migrate: page from stores to state.

src/lib/components/Feedback.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { fade } from 'svelte/transition';
     import { loggedIn, user } from '$lib/utils/console';
     import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
@@ -28,7 +28,7 @@
             body: JSON.stringify({
                 email,
                 type: feedbackType,
-                route: $page.route.id,
+                route: page.route.id,
                 comment,
                 metaFields: {
                     userId
@@ -102,7 +102,7 @@
                     {/if}
                     <li>
                         <a
-                            href={`https://github.com/appwrite/website/tree/main/src/routes${$page.route.id}`}
+                            href={`https://github.com/appwrite/website/tree/main/src/routes${page.route.id}`}
                             target="_blank"
                             rel="noopener noreferrer"
                             class="web-link flex items-baseline gap-1"

src/lib/components/InitBanner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { onMount } from 'svelte';
 
     let mounted = false;
@@ -28,7 +28,7 @@
     const randomDelay = () => Math.floor(Math.random() * 750);
 </script>
 
-<div class="banner" class:hidden={$page.url.pathname.includes('init')}>
+<div class="banner" class:hidden={page.url.pathname.includes('init')}>
     <div class="content text-primary">
         <div class="headings">
             <span style:font-weight="500"

src/lib/components/IsLoggedIn.svelte

@@ -2,7 +2,6 @@
     import { classNames } from '$lib/utils/classnames';
     import { trackEvent } from '$lib/actions/analytics';
     import { browser } from '$app/environment';
-    import { page } from '$app/stores';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 
     export let classes = '';

src/lib/layouts/Docs.svelte

@@ -44,7 +44,7 @@
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
     import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 
     export let variant: DocsLayoutVariant = 'default';
@@ -67,7 +67,7 @@
         }));
     });
 
-    const key = $page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
+    const key = page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
     setContext(key, true);
 
     const handleKeydown = (e: KeyboardEvent) => {

src/lib/layouts/DocsTutorial.svelte

@@ -5,7 +5,7 @@
     import type { TocItem } from './DocsArticle.svelte';
     import Heading from '$markdoc/nodes/Heading.svelte';
     import { onMount, tick } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let toc: Array<TocItem>;
     export let back: string;
@@ -50,13 +50,13 @@
     async function preSelectItemOnInit() {
         await tick();
 
-        if (!$page.url.hash) return;
+        if (!page.url.hash) return;
         const tocItem = toc.slice(1);
 
         // no sub-items, return.
         if (!tocItem.length) return;
 
-        const pageHash = $page.url.hash.replace('#', '');
+        const pageHash = page.url.hash.replace('#', '');
         const tocItemHref = tocItem[0].href.replace('#', '');
 
         if (pageHash !== tocItemHref) return;

src/lib/layouts/Main.svelte

@@ -18,7 +18,7 @@
     import ProductsMobileSubmenu from '$lib/components/ProductsMobileSubmenu.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import MainNav from '$lib/components/MainNav.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 
     export let omitMainId = false;
@@ -190,7 +190,7 @@
         class:is-special-padding={!BANNER_KEY.startsWith('init-banner-')}
         style={BANNER_KEY === 'init-banner-02' ? 'padding-inline: 0' : ''}
     >
-        <!-- {#if !$page.data.isStickyNav}
+        <!-- {#if !page.data.isStickyNav}
             {#if BANNER_KEY.startsWith('init-banner-')}
                 <InitBanner />
             {:else}

src/lib/layouts/SidebarNavButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { NavLink } from './Sidebar.svelte';
 
     export let groupItem: NavLink;
@@ -7,7 +7,7 @@
 
 <a
     class="web-side-nav-button flex size-10 w-full items-center rounded-lg p-2 whitespace-nowrap"
-    class:is-selected={$page.url?.pathname === groupItem.href}
+    class:is-selected={page.url?.pathname === groupItem.href}
     href={groupItem.href}
     target={groupItem.openInNewTab ? '_blank' : '_self'}
 >

src/markdoc/layouts/Article.svelte

@@ -21,7 +21,7 @@
     import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
     import { DOCS_TITLE_SUFFIX, OVERVIEW_TITLE_SUFFIX } from '$routes/titles';
     import { getContext, setContext } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     export let title: string;
     export let description: string;
@@ -60,7 +60,7 @@
         return carry;
     }, []);
 
-    const isProductsPage = /^\/docs\/products\/[^/]+$/.test($page.route.id!.toString());
+    const isProductsPage = /^\/docs\/products\/[^/]+$/.test(page.route.id!.toString());
 
     let seoTitle = title + DOCS_TITLE_SUFFIX;
     if (isProductsPage) seoTitle = title + OVERVIEW_TITLE_SUFFIX;

src/markdoc/layouts/Author.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Article, FooterNav, MainFooter } from '$lib/components';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Main } from '$lib/layouts';
     import { getContext } from 'svelte';
     import { TITLE_SUFFIX } from '$routes/titles';
@@ -19,7 +19,7 @@
     const posts = getContext<PostsData[]>('posts');
     const authors = getContext<AuthorData[]>('authors');
     const author = authors.find(
-        (p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug
+        (p) => page.url.pathname.substring(page.url.pathname.lastIndexOf('/') + 1) === p.slug
     );
 
     const seoTitle = name + TITLE_SUFFIX;

src/markdoc/layouts/Category.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Article, FooterNav, MainFooter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
@@ -10,7 +10,7 @@
     export let name: string;
     export let description: string;
 
-    const pageSlug = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1);
+    const pageSlug = page.url.pathname.substring(page.url.pathname.lastIndexOf('/') + 1);
     const authors = getContext<AuthorData[]>('authors');
     const postsList = getContext<PostsData[]>('posts');
     const posts = postsList.filter((post) => post.category.includes(pageSlug));

src/markdoc/layouts/Post.svelte

@@ -12,7 +12,7 @@
     import type { AuthorData, PostsData } from '$routes/blog/content';
     import { TITLE_SUFFIX } from '$routes/titles';
     import { getContext, setContext } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import CTA from '$lib/components/BlogCta.svelte';
     import PostMeta from '$lib/components/blog/post-meta.svelte';
     import Breadcrumbs from '$lib/components/blog/breadcrumbs.svelte';
@@ -74,7 +74,7 @@
 
     callToAction ??= true;
 
-    const currentURL = `https://appwrite.io${$page.url.pathname}`;
+    const currentURL = `https://appwrite.io${page.url.pathname}`;
 </script>
 
 <svelte:head>

src/routes/+error.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { FooterNav, MainFooter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import DocsError from './docs/+error.svelte';
 
-    const isDocs = $page.url.pathname.startsWith('/docs');
+    const isDocs = page.url.pathname.startsWith('/docs');
 </script>
 
 {#if isDocs}
@@ -16,12 +16,12 @@
                 <div class="container">
                     <div class="web-hero" style="--hero-gap:1.25rem;">
                         <span class="web-badges text-micro !text-white uppercase"
-                            >{$page.status}</span
+                            >{page.status}</span
                         >
                         <h1 class="text-headline font-aeonik-pro text-primary">
-                            {$page.error?.message ?? 'An error has occured'}
+                            {page.error?.message ?? 'An error has occured'}
                         </h1>
-                        {#if $page.status === 404}
+                        {#if page.status === 404}
                             <p class="text-description">
                                 Sorry, it seems that the page you are looking for does not exist.
                                 Feel free to use our navigation menu or the button below to explore

src/routes/+layout.svelte

@@ -50,7 +50,8 @@
     import '$icons/output/web-icon.css';
 
     import { browser, dev } from '$app/environment';
-    import { navigating, page, updated } from '$app/stores';
+    import { page, updated } from '$app/state';
+    import { navigating } from '$app/stores';
     import { onMount } from 'svelte';
     import { loggedIn } from '$lib/utils/console';
     import { beforeNavigate } from '$app/navigation';
@@ -68,9 +69,9 @@
     const tracked = new Set();
 
     onMount(() => {
-        saveReferrerAndUtmSource($page.url);
+        saveReferrerAndUtmSource(page.url);
 
-        const initialTheme = $page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
+        const initialTheme = page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
 
         applyTheme(initialTheme);
 
@@ -95,7 +96,7 @@
         if (window) {
             tracked.clear();
         }
-        if ($updated && !willUnload && to?.url) {
+        if (updated && !willUnload && to?.url) {
             location.href = to.url.href;
         }
     });
@@ -105,8 +106,7 @@
         document.body.dataset.loggedIn = '';
     }
 
-    $: canonicalUrl =
+    $: canonicalUrl = page.url.origin.replace(/^https?:\/\/www\./, 'https://') + page.url.pathname;
-        $page.url.origin.replace(/^https?:\/\/www\./, 'https://') + $page.url.pathname;
 
     function handleScroll() {
         const scrollY = window.scrollY;
@@ -116,9 +116,9 @@
         thresholds.forEach((threshold) => {
             if (scrollPercentage >= threshold && !tracked.has(threshold)) {
                 const pageName =
-                    $page.url.pathname.slice(1) === ''
+                    page.url.pathname.slice(1) === ''
                         ? 'home'
-                        : $page.url.pathname.slice(1).replace(/\//g, '-');
+                        : page.url.pathname.slice(1).replace(/\//g, '-');
 
                 const eventName = `${pageName}_scroll-depth_${threshold * 100}prct_scroll`;
                 tracked.add(threshold);

src/routes/blog/[[page]]/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { tick } from 'svelte';
+    import { page } from '$app/state';
     import { Main } from '$lib/layouts';
-    import { Article, FooterNav, MainFooter } from '$lib/components';
+    import { TITLE_SUFFIX } from '$routes/titles';
-    import { TITLE_SUFFIX } from '$routes/titles.js';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
-    import { onMount, tick } from 'svelte';
-    import { beforeNavigate, goto } from '$app/navigation';
     import { createDebounce } from '$lib/utils/debounce';
+    import { goto, onNavigate } from '$app/navigation';
+    import { Article, FooterNav, MainFooter } from '$lib/components';
 
     let { data } = $props();
 
@@ -28,20 +28,15 @@
 
     let previousPage: number | null = null;
 
-    beforeNavigate(({ from, type }) => {
+    onNavigate(async ({ from, type }) => {
         previousPage = type === 'link' ? parseInt(from?.params?.page ?? '1') : null;
+        if (!articlesHeader || !previousPage) return;
+
+        await tick();
+        articlesHeader.scrollIntoView();
     });
 
-    onMount(() => {
+    let selectedCategory = $state(page.url.searchParams.get('category') ?? 'Latest');
-        return page.subscribe(async () => {
-            if (articlesHeader && previousPage) {
-                await tick();
-                articlesHeader?.scrollIntoView();
-            }
-        });
-    });
-
-    let selectedCategory = $state($page.url.searchParams.get('category') ?? 'Latest');
 
     const handleSearch = async () => {
         const searchQuery = query.toLowerCase();
@@ -50,7 +45,7 @@
          * Navigate to the first page on search/filter to ensure consistent
          * navigation experience when changing categories or search queries.
          */
-        const url = new URL('/blog', $page.url);
+        const url = new URL('/blog', page.url);
 
         if (searchQuery) {
             url.searchParams.set('search', searchQuery);
@@ -71,7 +66,7 @@
     };
 
     let navigationLink = $derived((pageNumber: number): string => {
-        const currentUrl = $page.url;
+        const currentUrl = page.url;
         const url = new URL(`/blog/${pageNumber}`, currentUrl);
 
         if (currentUrl.search) {

src/routes/changelog/[[page]]/+page.svelte

@@ -5,7 +5,7 @@
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
     import { onMount } from 'svelte';
     import ChangelogEntry from '../ChangelogEntry.svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { CHANGELOG_KEY } from '../utils';
     import { TITLE_SUFFIX } from '$routes/titles';
 
@@ -23,7 +23,7 @@
     }
 
     onMount(() => {
-        localStorage.setItem(CHANGELOG_KEY, $page.data.changelogEntries.toString());
+        localStorage.setItem(CHANGELOG_KEY, page.data.changelogEntries.toString());
     });
 </script>
 

src/routes/changelog/entry/[entry]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { FooterNav, MainFooter, Tooltip } from '$lib/components';
     import PreFooter from '$lib/components/PreFooter.svelte';
     import { type SocialShareOption, socialSharingOptions } from '$lib/constants';
@@ -31,7 +31,7 @@
     let copyText = $state<CopyStatusValue>(CopyStatus.Copy);
 
     async function handleCopy() {
-        const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`);
+        const blogPostUrl = encodeURI(`https://appwrite.io${page.url.pathname}`);
 
         await copy(blogPostUrl);
 
@@ -42,7 +42,7 @@
     }
 
     function getShareLink(shareOption: SocialShareOption): string {
-        const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`);
+        const blogPostUrl = encodeURI(`https://appwrite.io${page.url.pathname}`);
         const shareableLink = shareOption.link
             .replace('{TITLE}', seo.title + '.')
             .replace('{URL}', blogPostUrl);

src/routes/docs/+error.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { MainFooter } from '$lib/components';
     import { Docs } from '$lib/layouts';
     import Sidebar from './Sidebar.svelte';
@@ -10,11 +10,11 @@
     <div class="web-article mx-auto flex max-w-[700px] items-center justify-center py-4">
         <div class="container">
             <div class="web-hero" style="--hero-gap:1.25rem;">
-                <span class="web-badges text-micro !text-white uppercase">{$page.status}</span>
+                <span class="web-badges text-micro !text-white uppercase">{page.status}</span>
                 <h1 class="text-headline font-aeonik-pro text-primary">
-                    {$page.error?.message ?? 'An error has occured'}
+                    {page.error?.message ?? 'An error has occured'}
                 </h1>
-                {#if $page.status === 404}
+                {#if page.status === 404}
                     <p class="text-description">
                         Sorry, it seems that the page you are looking for does not exist. Feel free
                         to use our navigation menu or the button below to explore more of Appwrite's

src/routes/docs/quick-starts/+layout.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import Docs from '$lib/layouts/Docs.svelte';
     import Sidebar from '../Sidebar.svelte';
 </script>
 
-<Docs variant={$page.route.id === '/docs/quick-starts' ? 'default' : 'two-side-navs'}>
+<Docs variant={page.route.id === '/docs/quick-starts' ? 'default' : 'two-side-navs'}>
     <Sidebar />
     <slot />
 </Docs>

src/routes/docs/references/+layout.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import Docs from '$lib/layouts/Docs.svelte';
     import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
     import { preferredPlatform, preferredVersion } from '$lib/utils/references';
 
-    $: expandable = !!$page.url.pathname.match(
+    $: expandable = !!page.url.pathname.match(
         /\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/
     );
 
-    $: platform = $preferredPlatform ?? $page.params?.platform ?? 'client-web';
+    $: platform = $preferredPlatform ?? page.params?.platform ?? 'client-web';
 
     /* correct platform prefix for references page */
     $: resolvedPlatformPrefix = /^server-|^client-/.test(platform)
         ? platform
         : `server-${platform}`;
 
-    $: prefix = `/docs/references/${$preferredVersion ?? $page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`;
+    $: prefix = `/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`;
 
     $: navigation = [
         {

src/routes/docs/references/[version]/[platform]/[service]/(components)/Response.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { SDKMethod } from '$lib/utils/specs';
 
     export let method: SDKMethod;
@@ -23,7 +23,7 @@
                                     <li>
                                         <a
                                             class="web-link"
-                                            href={`/docs/references/${$page.params.version}/models/${model.id}`}
+                                            href={`/docs/references/${page.params.version}/models/${model.id}`}
                                         >
                                             {model.name}
                                         </a>

src/routes/docs/references/[version]/[platform]/[service]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { MainFooter, Select } from '$lib/components';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
     import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
@@ -48,7 +48,7 @@
     });
 
     function selectPlatform(event: CustomEvent<unknown>) {
-        const { version, service } = $page.params;
+        const { version, service } = page.params;
         const platform = event.detail as Platform;
 
         // except nodejs, all other server sided need to be saved as without `server-` prefix
@@ -68,7 +68,7 @@
     }
 
     function selectVersion(event: CustomEvent<unknown>) {
-        const { platform, service } = $page.params;
+        const { platform, service } = page.params;
         const version = event.detail as Version;
         preferredVersion.set(version);
         goto(`/docs/references/${version}/${platform}/${service}`, {
@@ -97,9 +97,9 @@
 
     onMount(() => {
         preferredPlatform.set(platform);
-        preferredVersion.set($page.params.version as Version);
+        preferredVersion.set(page.params.version as Version);
 
-        const isSame = $preferredPlatform === $page.params.platform;
+        const isSame = $preferredPlatform === page.params.platform;
         const hasPlatformPrefix =
             $preferredPlatform.startsWith('client-') || $preferredPlatform.startsWith('server-');
 
@@ -109,7 +109,7 @@
                 ? $preferredPlatform
                 : `server-${$preferredPlatform}`;
 
-            goto(`/docs/references/${$preferredVersion}/${platformMode}/${$page.params.service}`, {
+            goto(`/docs/references/${$preferredVersion}/${platformMode}/${page.params.service}`, {
                 noScroll: true,
                 replaceState: false
             });
@@ -128,8 +128,8 @@
         serviceDescription.substring(0, serviceDescription.indexOf('.') + 1)
     );
 
-    let platformBindingForSelect = $derived($page.params.platform as Platform);
+    let platformBindingForSelect = $derived(page.params.platform as Platform);
-    let platform = $derived(($preferredPlatform ?? $page.params.platform) as Platform);
+    let platform = $derived(($preferredPlatform ?? page.params.platform) as Platform);
     let platformType = $derived(platform.startsWith('client-') ? 'CLIENT' : 'SERVER');
     let serviceName = $derived(serviceMap[data.service?.name]);
     let title = $derived(serviceName + API_REFERENCE_TITLE_SUFFIX);
@@ -153,10 +153,10 @@
     <meta name="twitter:image" content={ogImage} />
     <meta name="twitter:card" content="summary_large_image" />
 
-    {#if $page.params.version !== 'cloud'}
+    {#if page.params.version !== 'cloud'}
         <link
             rel="canonical"
-            href={`https://appwrite.io/docs/references/cloud/${$page.params.platform}/${$page.params.service}`}
+            href={`https://appwrite.io/docs/references/cloud/${page.params.platform}/${page.params.service}`}
         />
     {/if}
 </svelte:head>
@@ -202,7 +202,7 @@
                         <Select
                             nativeMobile
                             on:change={selectVersion}
-                            value={$page.params.version}
+                            value={page.params.version}
                             options={[
                                 { value: 'cloud', label: 'Cloud' },
                                 ...versions.map((version) => ({

src/routes/docs/references/[version]/models/[model]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import Article from '$markdoc/layouts/Article.svelte';
     import { Table, Thead, Tr, Th, Tbody, Td, Heading, Fence } from '$markdoc/nodes/_Module.svelte';
     import { parse } from '$lib/utils/markdown';
@@ -10,10 +10,10 @@
 </script>
 
 <svelte:head>
-    {#if $page.params.version !== 'cloud'}
+    {#if page.params.version !== 'cloud'}
         <link
             rel="canonical"
-            href={`https://appwrite.io/docs/references/cloud/models/${$page.params.model}`}
+            href={`https://appwrite.io/docs/references/cloud/models/${page.params.model}`}
         />
     {/if}
 </svelte:head>

src/routes/docs/tutorials/+layout.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import Docs, { type DocsLayoutVariant } from '$lib/layouts/Docs.svelte';
     import Sidebar from '../Sidebar.svelte';
 
     $: variant =
-        $page.route.id === '/docs/tutorials' ? 'default' : ('two-side-navs' as DocsLayoutVariant);
+        page.route.id === '/docs/tutorials' ? 'default' : ('two-side-navs' as DocsLayoutVariant);
 </script>
 
 <Docs {variant}>

src/routes/init-0/tickets/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
     import Main from '$lib/layouts/Main.svelte';

src/routes/init-0/tickets/[id]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
     import Main from '$lib/layouts/Main.svelte';
@@ -10,9 +10,9 @@
     let { data } = $props();
 
     let firstName = data.ticket?.name?.split(/\s/)[0] ?? '';
-    const ogImage = `${$page.url.origin}/init-0/tickets/${data.ticket.$id}/og`;
+    const ogImage = `${page.url.origin}/init-0/tickets/${data.ticket.$id}/og`;
 
-    const { copied, copy } = createCopy($page.url.href);
+    const { copied, copy } = createCopy(page.url.href);
 </script>
 
 <svelte:head>

src/routes/init-0/tickets/customize/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
     import Main from '$lib/layouts/Main.svelte';
@@ -57,7 +57,7 @@
         saveTicket();
     }
 
-    const ticketUrl = `${$page.url.origin}/init-0/tickets/${data.ticket.$id}`;
+    const ticketUrl = `${page.url.origin}/init-0/tickets/${data.ticket.$id}`;
     const { copied, copy } = createCopy(ticketUrl);
     let twitterText = $derived(
         encodeURIComponent(

src/routes/init-0/tickets/customize/form.svelte

@@ -25,7 +25,7 @@
 <script lang="ts">
     import { browser, dev } from '$app/environment';
     import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { appwriteInit } from '$lib/appwrite/init';
     import { Switch } from '$lib/components';
     import { loginGithub } from '$routes/init-0/helpers';
@@ -39,7 +39,7 @@
     export let tribe: string | null = null;
     export let showGitHub = true;
     export let variant: TicketVariant = 'default';
-    $: ({ ticket } = $page.data as PageData);
+    $: ({ ticket } = page.data as PageData);
 
     const variants: TicketVariant[] = ['default', 'pink', 'rainbow'] as const;
 </script>
@@ -135,7 +135,7 @@
         Sign in with your Appwrite account and see the magic happen in your ticket.
     </p>
     <a
-        href={getAppwriteDashboardUrl(`/login?forceRedirect=${$page.url.origin}/init-0/tickets`)}
+        href={getAppwriteDashboardUrl(`/login?forceRedirect=${page.url.origin}/init-0/tickets`)}
         class="web-button is-full-width is-secondary u-margin-block-start-24"
     >
         <div class="web-icon-appwrite text-primary"></div>

src/routes/init/(components)/ticket/TicketActions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Switch } from '$lib/components';
     import { createCopy } from '$lib/utils/copy';
     import { loginGithub } from '$routes/init/helpers';
@@ -14,9 +14,9 @@
     export let modified = false;
     export let saving = false;
     export let saveTicket: () => void;
-    let { ticket } = $page.data;
+    let { ticket } = page.data;
 
-    const ticketUrl = `${$page.url.origin}/init/tickets/${ticket?.$id}`;
+    const ticketUrl = `${page.url.origin}/init/tickets/${ticket?.$id}`;
     const shareTextOptions = [
         `Join us during the week of August 19–23 to celebrate everything new with @appwrite. Claim your ticket here 👇 ${ticketUrl}`,
         `Come celebrate everything new with @appwrite from August 19–23! Don't miss out on the latest features and updates. Get your ticket ASAP! 📅 ${ticketUrl}`,

src/routes/init/tickets/[id]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
     import Main from '$lib/layouts/Main.svelte';
@@ -9,9 +9,9 @@
     let { data } = $props();
 
     let firstName = data.ticket?.name?.split(/\s/)[0] ?? '';
-    const ogImage = `${$page.url.origin}/init/tickets/${data.ticket.$id}/og`;
+    const ogImage = `${page.url.origin}/init/tickets/${data.ticket.$id}/og`;
 
-    const { copied, copy } = createCopy($page.url.href);
+    const { copied, copy } = createCopy(page.url.href);
 </script>
 
 <svelte:head>

src/routes/integrations/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { browser } from '$app/environment';
     import { goto } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { autoHash } from '$lib/actions/autoHash';
     import FooterNav from '$lib/components/FooterNav.svelte';
     import MainFooter from '$lib/components/MainFooter.svelte';
@@ -31,7 +31,7 @@
 
     let result: ResultType<Integration> = $state([]);
 
-    let query = $state(decodeURIComponent($page.url.searchParams.get('search') ?? ''));
+    let query = $state(decodeURIComponent(page.url.searchParams.get('search') ?? ''));
     let hasQuery = $derived(query.length > 0);
 
     // platform filters

src/routes/subscription/verify/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { FooterNav, MainFooter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { onMount } from 'svelte';
@@ -8,8 +8,8 @@
     let error: string | undefined;
 
     onMount(async () => {
-        const email = $page.url.searchParams.get('email');
+        const email = page.url.searchParams.get('email');
-        const key = $page.url.searchParams.get('key');
+        const key = page.url.searchParams.get('key');
         const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/newsletter/verify`, {
             method: 'POST',
             headers: {