From 1409722c066c5d6d0eb2db51a0b3a32c3313c96f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 23 Mar 2025 17:50:57 +0530
Subject: [PATCH 01/36] add: analytics, dependencies.

---
 package.json                 |  2 +-
 pnpm-lock.yaml               | 10 +++++-----
 src/lib/actions/analytics.ts |  7 +++++++
 src/lib/constants.ts         |  2 ++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 96260c21a..780ce0ee1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6 ",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f37e4783..e81337b51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464
-        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464
+        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562
+        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -211,8 +211,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464':
-    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562':
+    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562}
     version: 1.2.1
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6':
@@ -4097,7 +4097,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562': {}
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6(svelte@4.2.19)':
     dependencies:
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index cbdc60077..aa8a6d8f9 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -157,6 +157,7 @@ export enum Click {
     FunctionsDeploymentDeleteClick = 'click_deployment_delete',
     FunctionsDeploymentCancelClick = 'click_deployment_cancel',
     KeyCreateClick = 'click_key_create',
+    DevKeyCreateClick = 'click_dev_key_create',
     MenuDropDownClick = 'click_menu_dropdown',
     MenuOverviewClick = 'click_menu_overview',
     ModalCloseClick = 'click_close_modal',
@@ -307,12 +308,18 @@ export enum Submit {
     VariableDelete = 'submit_variable_delete',
     VariableUpdate = 'submit_variable_update',
     VariableEditor = 'submit_variable_editor',
+
     KeyCreate = 'submit_key_create',
     KeyDelete = 'submit_key_delete',
     KeyUpdateName = 'submit_key_update_name',
     KeyUpdateScopes = 'submit_key_update_scopes',
     KeyUpdateExpire = 'submit_key_update_expire',
 
+    DevKeyCreate = 'submit_dev_key_create',
+    DevKeyDelete = 'submit_dev_key_delete',
+    DevKeyUpdateName = 'submit_dev_key_update_name',
+    DevKeyUpdateExpire = 'submit_dev_key_update_expire',
+
     PlatformCreate = 'submit_platform_create',
     PlatformDelete = 'submit_platform_delete',
     PlatformUpdate = 'submit_platform_update',
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index a038fd15f..a42f70b98 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -46,6 +46,8 @@ export enum Dependencies {
     PLATFORMS = 'dependency:platforms',
     KEY = 'dependency:key',
     KEYS = 'dependency:keys',
+    DEV_KEY = 'dependency:dev_key',
+    DEV_KEYS = 'dependency:dev_keys',
     DOMAINS = 'dependency:domains',
     DOMAIN = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',

From 49a201700e39e15335272f999b825791de44a691 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 23 Mar 2025 18:16:25 +0530
Subject: [PATCH 02/36] feat: dev-keys on pink2 [wip].

---
 .../project-[project]/overview/+layout.svelte |  17 ++-
 .../{keys => components}/checkbox.svelte      |   0
 .../expirationInput.svelte                    |   0
 .../overview/dev-keys/+page.svelte            |  46 ++++++++
 .../overview/dev-keys/+page.ts                |  13 +++
 .../overview/dev-keys/[key]/+page.ts          |  22 ++++
 .../[key]/+page@project-[project].svelte      | 109 ++++++++++++++++++
 .../dev-keys/[key]/breadcrumbs.svelte         |  28 +++++
 .../overview/dev-keys/[key]/delete.svelte     |  35 ++++++
 .../overview/dev-keys/[key]/header.svelte     |  18 +++
 .../overview/dev-keys/[key]/store.ts          |   5 +
 .../[key]/updateExpirationDate.svelte         |  75 ++++++++++++
 .../overview/dev-keys/action.svelte           |  15 +++
 .../overview/dev-keys/create/+page.svelte     |  83 +++++++++++++
 .../project-[project]/overview/store.ts       |   2 +-
 15 files changed, 466 insertions(+), 2 deletions(-)
 rename src/routes/(console)/project-[project]/overview/{keys => components}/checkbox.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{keys => components}/expirationInput.svelte (100%)
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/+page.ts
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page.ts
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte

diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index 8d998a7d8..fcdaf1746 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -66,7 +66,17 @@
             label: 'Create API Key',
             icon: IconPlus,
             callback() {
-                goto(`${base}/project-[project]/overview/keys/create`);
+                goto(`${base}/project-${projectId}/overview/keys/create`);
+            },
+            keys: ['c', 'k'],
+            group: 'integrations',
+            disabled: !$canWriteProjects
+        },
+        {
+            label: 'Create Dev Key',
+            icon: IconPlus,
+            callback() {
+                goto(`${base}/project-${projectId}/overview/dev-keys/create`);
             },
             keys: ['c', 'k'],
             group: 'integrations',
@@ -216,6 +226,11 @@
                         href={`${path}/keys`}
                         selected={$page.url.pathname === `${path}/keys`}
                         event="keys">API keys</Tab>
+                    <Tab
+                        noscroll
+                        href={`${path}/dev-keys`}
+                        selected={$page.url.pathname === `${path}/dev-keys`}
+                        event="keys">Dev keys</Tab>
                 </Tabs>
                 {#if $action}
                     <svelte:component this={$action} />
diff --git a/src/routes/(console)/project-[project]/overview/keys/checkbox.svelte b/src/routes/(console)/project-[project]/overview/components/checkbox.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/keys/checkbox.svelte
rename to src/routes/(console)/project-[project]/overview/components/checkbox.svelte
diff --git a/src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte b/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte
rename to src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
new file mode 100644
index 000000000..2e104b112
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { Empty } from '$lib/components';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import type { PageData } from './$types';
+    import Action from './action.svelte';
+    import { setOverviewAction } from '../context';
+    import { Table } from '@appwrite.io/pink-svelte';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    setOverviewAction(Action);
+</script>
+
+{#if data.devKeys.total}
+    <Table.Root columns={4} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
+            <Table.Header.Cell {root}>Expiration date</Table.Header.Cell>
+        </svelte:fragment>
+        {#each data.devKeys.keys as key}
+            <Table.Row.Link href={`dev-keys/${key.$id}`} {root}>
+                <Table.Cell {root}>
+                    {key.name}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+                </Table.Cell>
+            </Table.Row.Link>
+        {/each}
+    </Table.Root>
+{:else}
+    <Empty
+        single
+        allowCreate={$canWriteKeys}
+        href="https://appwrite.io/docs/advanced/platform/dev-keys"
+        target="Dev key"
+        on:click={() => goto(`${base}/project-${$page.params.project}/overview/dev-keys/create`)} />
+{/if}
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/+page.ts b/src/routes/(console)/project-[project]/overview/dev-keys/+page.ts
new file mode 100644
index 000000000..5f7e3e623
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/+page.ts
@@ -0,0 +1,13 @@
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import { selectedTab } from '../store';
+import type { PageLoad } from './$types';
+
+selectedTab.set('dev-keys');
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.DEV_KEYS);
+    return {
+        devKeys: await sdk.forConsole.projects.listDevKeys(params.project)
+    };
+};
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page.ts b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page.ts
new file mode 100644
index 000000000..d54a142ca
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page.ts
@@ -0,0 +1,22 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.DEV_KEY);
+
+    const key = await sdk.forConsole.projects.getDevKey(params.project, params.key);
+    if (key.expire) {
+        key.expire = new Date(key.expire).toISOString().slice(0, 23);
+    } else {
+        key.expire = undefined;
+    }
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        key
+    };
+};
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
new file mode 100644
index 000000000..f588a217a
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Box, CardGrid, Secret } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { toLocaleDate } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../../store';
+    import Delete from './delete.svelte';
+    import { devKey } from './store';
+    import UpdateExpirationDate from './updateExpirationDate.svelte';
+
+    let showDelete = false;
+    let name: string = null;
+    let secret: string = null;
+
+    onMount(() => {
+        name ??= $devKey.name;
+        secret ??= $devKey.secret;
+    });
+
+    async function updateName() {
+        try {
+            await sdk.forConsole.projects.updateDevKey(
+                $project.$id,
+                $devKey.$id,
+                name,
+                $devKey.expire
+            );
+            await invalidate(Dependencies.KEY);
+            trackEvent(Submit.KeyUpdateName);
+            addNotification({
+                type: 'success',
+                message: 'API key name has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.KeyUpdateName);
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Dev key - Appwrite</title>
+</svelte:head>
+
+<Container>
+    {@const accessedAt = $devKey.accessedAt ? toLocaleDate($devKey.accessedAt) : 'never'}
+    <CardGrid>
+        <svelte:fragment slot="title">{$devKey.name}</svelte:fragment>
+        <svelte:fragment slot="aside">Last accessed: {accessedAt}</svelte:fragment>
+    </CardGrid>
+
+    <CardGrid>
+        <svelte:fragment slot="title">Dev key secret</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <Secret copyEvent="key" bind:value={secret} />
+        </svelte:fragment>
+    </CardGrid>
+
+    <Form onSubmit={updateName}>
+        <CardGrid>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            Choose any name that will help you distinguish between Dev keys.
+            <svelte:fragment slot="aside">
+                <InputText
+                    id="name"
+                    label="Name"
+                    bind:value={name}
+                    required
+                    placeholder="Enter name" />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={name === $devKey.name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <UpdateExpirationDate />
+
+    <CardGrid>
+        <svelte:fragment slot="title">Delete Dev key</svelte:fragment>
+        The Dev key will be permanently deleted. This action is irreversible.
+        <svelte:fragment slot="aside">
+            <Box>
+                <div class="u-flex u-gap-16">
+                    <div class="u-cross-child-center u-line-height-1-5">
+                        <h6 class="u-bold" data-private>{$devKey.name}</h6>
+                        <p>Last accessed: {accessedAt}</p>
+                    </div>
+                </div>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete bind:showDelete />
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
new file mode 100644
index 000000000..a1a2f9f7c
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/breadcrumbs.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { devKey } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${$project?.$id}/overview/dev-keys`,
+            title: 'Dev keys'
+        },
+        {
+            href: `${base}/project-${$project?.$id}/overview/dev-keys/${$devKey?.$id}`,
+            title: $devKey?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte
new file mode 100644
index 000000000..610915a3b
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../../store';
+    import { devKey } from './store';
+
+    export let showDelete = false;
+    let error: string;
+
+    async function handleDelete() {
+        try {
+            await sdk.forConsole.projects.deleteDevKey($project.$id, $devKey.$id);
+            await invalidate(Dependencies.DEV_KEYS);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$devKey.name} has been deleted`
+            });
+            trackEvent(Submit.DevKeyDelete);
+            await goto(`${base}/project-${$project.$id}/overview/dev-keys`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.DevKeyDelete);
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title="Delete Dev key" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this Dev key?
+</Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
new file mode 100644
index 000000000..54e1f51c5
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Id } from '$lib/components';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { devKey } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`${base}/project-${projectId}/overview/dev-keys`}>
+            {$devKey?.name}
+        </CoverTitle>
+        <Id value={$devKey?.secret}>Dev key secret</Id>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts
new file mode 100644
index 000000000..6d3fc98bd
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts
@@ -0,0 +1,5 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@appwrite.io/console';
+
+export const devKey = derived(page, ($page) => $page.data.key as Models.DevKey);
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte
new file mode 100644
index 000000000..b3deffb6a
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
+    import { diffDays } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Alert } from '@appwrite.io/pink-svelte';
+    import { project } from '../../../store';
+    import { devKey } from './store';
+    import ExpirationInput from '../../components/expirationInput.svelte';
+
+    let expiration = $devKey.expire;
+
+    async function updateExpire() {
+        try {
+            await sdk.forConsole.projects.updateDevKey(
+                $project.$id,
+                $devKey.$id,
+                $devKey.name,
+                expiration
+            );
+            await invalidate(Dependencies.DEV_KEY);
+            trackEvent(Submit.DevKeyUpdateExpire);
+            addNotification({
+                type: 'success',
+                message: 'Dev key expiration has been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DevKeyUpdateExpire);
+        }
+    }
+
+    let alertsDismissed = false;
+    $: isExpiring =
+        !alertsDismissed && $devKey.expire && diffDays(new Date(), new Date($devKey.expire)) < 14;
+    $: isExpired =
+        !alertsDismissed && $devKey.expire !== null && new Date($devKey.expire) < new Date();
+</script>
+
+<Form onSubmit={updateExpire}>
+    <CardGrid>
+        <svelte:fragment slot="title">Expiration date</svelte:fragment>
+        Set a date after which your Dev key will expire.
+        <svelte:fragment slot="aside">
+            {#if isExpired}
+                <Alert.Inline
+                    status="error"
+                    on:dismiss={() => (alertsDismissed = true)}
+                    title="Your Dev key has expired">
+                    For security reasons, we recommend you delete your expired key and create a new
+                    one.
+                </Alert.Inline>
+            {:else if isExpiring}
+                <Alert.Inline
+                    status="warning"
+                    on:dismiss={() => (alertsDismissed = true)}
+                    title="Your Dev key is about to expire">
+                    Update the expiration date to keep the key active
+                </Alert.Inline>
+            {/if}
+            <ExpirationInput bind:value={expiration} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={expiration === $devKey.expire} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
new file mode 100644
index 000000000..a6dd57d54
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
@@ -0,0 +1,15 @@
+<script>
+    import Button from '$lib/elements/forms/button.svelte';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+</script>
+
+{#if $canWriteKeys}
+    <Button href={`${base}/project-${$page.params.project}/overview/dev-keys/create`}>
+        <Icon icon={IconPlus} slot="start" size="s" />
+        Create Dev key
+    </Button>
+{/if}
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
new file mode 100644
index 000000000..a60de8d18
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { InputText } from '$lib/elements/forms/index.js';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
+    import ExpirationInput from '../../components/expirationInput.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { onboarding } from '$routes/(console)/project-[project]/store';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let name = '',
+        expire = '';
+
+    async function create() {
+        try {
+            const { $id } = await sdk.forConsole.projects.createDevKey(
+                $page.params.project,
+                name,
+                expire || undefined
+            );
+
+            if ($onboarding) {
+                await invalidate(Dependencies.PROJECT);
+            }
+            trackEvent(Submit.DevKeyCreate);
+            goto(`${base}/project-${$page.params.project}/overview/dev-keys/${$id}`);
+            addNotification({
+                message: `Dev key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DevKeyCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create Dev key"
+    href={`${base}/project-${$page.params.project}/overview/dev-keys/`}
+    bind:showExitModal
+    column
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Configuration">
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Dev key name"
+                        required
+                        bind:value={name} />
+                    <ExpirationInput bind:value={expire} />
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[project]/overview/store.ts b/src/routes/(console)/project-[project]/overview/store.ts
index 2c18cefa9..e0fd85cdc 100644
--- a/src/routes/(console)/project-[project]/overview/store.ts
+++ b/src/routes/(console)/project-[project]/overview/store.ts
@@ -17,4 +17,4 @@ export const usage = cachedStore<
     };
 });
 
-export const selectedTab: Writable<'platforms' | 'keys'> = writable('platforms');
+export const selectedTab: Writable<'platforms' | 'keys' | 'dev-keys'> = writable('platforms');

From ed4b4a9f0046c37b785786db5a099c8391ff1288 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 23 Mar 2025 19:44:08 +0530
Subject: [PATCH 03/36] update: simplify UI components.

---
 package.json                                  |   2 +-
 .../overview/components/create.svelte         | 110 ++++++++++++++++++
 .../overview/components/delete.svelte         |  49 ++++++++
 .../overview/components/table.svelte          |  59 ++++++++++
 .../updateExpirationDate.svelte               |  60 ++++++----
 .../overview/dev-keys/+page.svelte            |  38 +-----
 .../[key]/+page@project-[project].svelte      |  10 +-
 .../overview/dev-keys/[key]/delete.svelte     |  35 ------
 .../overview/dev-keys/create/+page.svelte     |  82 +------------
 .../overview/keys/+page.svelte                |  42 +------
 .../keys/[key]/+page@project-[project].svelte |   8 +-
 .../overview/keys/[key]/delete.svelte         |  35 ------
 .../keys/[key]/updateExpirationDate.svelte    |  75 ------------
 .../overview/keys/create/+page.svelte         |  97 +--------------
 .../overview/keys/scopes.svelte               |   2 -
 15 files changed, 276 insertions(+), 428 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/overview/components/create.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/components/delete.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/components/table.svelte
 rename src/routes/(console)/project-[project]/overview/{dev-keys/[key] => components}/updateExpirationDate.svelte (51%)
 delete mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte

diff --git a/package.json b/package.json
index 780ce0ee1..1161a9d93 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --check . && eslint .",
-        "format": "prettier --write . && eslint --fix .",
+        "format": "prettier --write .",
         "test": "TZ=EST vitest run",
         "test:ui": "TZ=EST vitest --ui",
         "test:watch": "TZ=EST vitest watch",
diff --git a/src/routes/(console)/project-[project]/overview/components/create.svelte b/src/routes/(console)/project-[project]/overview/components/create.svelte
new file mode 100644
index 000000000..ab5d9f712
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/components/create.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { InputText } from '$lib/elements/forms/index.js';
+    import { Wizard } from '$lib/layout';
+    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import ExpirationInput from './expirationInput.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { onboarding } from '$routes/(console)/project-[project]/store';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import Scopes from '$routes/(console)/project-[project]/overview/keys/scopes.svelte';
+
+    export let keyType: 'api' | 'dev' = 'api';
+
+    const projectId = $page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+    const event = isApiKey ? Submit.KeyCreate : Submit.DevKeyCreate;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    let scopes = [];
+    let name = '',
+        expire = '';
+
+    async function create() {
+        try {
+            const { $id } = isApiKey
+                ? await sdk.forConsole.projects.createKey(
+                      projectId,
+                      name,
+                      scopes,
+                      expire || undefined
+                  )
+                : await sdk.forConsole.projects.createDevKey(projectId, name, expire || undefined);
+
+            if ($onboarding) {
+                await invalidate(Dependencies.PROJECT);
+            }
+            trackEvent(event);
+            goto(`${base}/project-${$page.params.project}/overview/${slug}/${$id}`);
+            addNotification({
+                message: `${label} key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, event);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create {label} key"
+    href={`${base}/project-${projectId}/overview/${slug}/`}
+    bind:showExitModal
+    column
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Configuration">
+                <Layout.Stack>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="{label} key name"
+                        required
+                        bind:value={name} />
+                    <ExpirationInput bind:value={expire} />
+                </Layout.Stack>
+            </Fieldset>
+
+            {#if isApiKey}
+                <Fieldset legend="Scopes">
+                    <Layout.Stack gap="xl">
+                        <Typography.Text>
+                            Choose which permission scopes to grant your application. It is best
+                            practice to allow only the permissions you need to meet your project
+                            goals.
+                        </Typography.Text>
+                        <Scopes bind:scopes />
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[project]/overview/components/delete.svelte b/src/routes/(console)/project-[project]/overview/components/delete.svelte
new file mode 100644
index 000000000..8a5c0bfa1
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/components/delete.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
+    import { page } from '$app/stores';
+
+    export let showDelete = false;
+    export let keyType: 'api' | 'dev' = 'api';
+    export let key: Models.DevKey | Models.Key;
+
+    const projectId = $page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+    const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+    const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+    let error: string;
+
+    async function handleDelete() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.deleteKey(projectId, key.$id)
+                : await sdk.forConsole.projects.deleteDevKey(projectId, key.$id);
+
+            await invalidate(dependency);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${key.name} has been deleted`
+            });
+            trackEvent(event);
+            await goto(`${base}/project-${projectId}/overview/${slug}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        }
+    }
+</script>
+
+<Confirm onSubmit={handleDelete} title="Delete {label} key" bind:open={showDelete} bind:error>
+    Are you sure you want to delete this execution?
+</Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/components/table.svelte b/src/routes/(console)/project-[project]/overview/components/table.svelte
new file mode 100644
index 000000000..a6b232f52
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/components/table.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { Empty } from '$lib/components';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import { Table } from '@appwrite.io/pink-svelte';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import type { Models } from '@appwrite.io/console';
+
+    export let keyType: 'api' | 'dev' = 'api';
+    export let keys: Models.KeyList | Models.DevKeyList;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+
+    function asApiKey(key: Models.Key | Models.DevKey) {
+        return key as Models.Key;
+    }
+</script>
+
+{#if keys.total}
+    <Table.Root columns={4} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
+            <Table.Header.Cell {root}>Expiration date</Table.Header.Cell>
+            {#if isApiKey}
+                <Table.Header.Cell {root}>Scopes</Table.Header.Cell>
+            {/if}
+        </svelte:fragment>
+        {#each keys.keys as key}
+            <Table.Row.Link href={`dev-keys/${key.$id}`} {root}>
+                <Table.Cell {root}>
+                    {key.name}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
+                </Table.Cell>
+                <Table.Cell {root}>
+                    {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+                </Table.Cell>
+                {#if isApiKey}
+                    <Table.Cell {root}>
+                        {asApiKey(key).scopes.length} Scopes
+                    </Table.Cell>
+                {/if}
+            </Table.Row.Link>
+        {/each}
+    </Table.Root>
+{:else}
+    <Empty
+        single
+        allowCreate={$canWriteKeys}
+        href="https://appwrite.io/docs/advanced/platform/{slug}"
+        target="{label} key"
+        on:click={() => goto(`${base}/project-${$page.params.project}/overview/${slug}/create`)} />
+{/if}
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
similarity index 51%
rename from src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte
rename to src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
index b3deffb6a..1393f86e0 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
@@ -8,52 +8,70 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Alert } from '@appwrite.io/pink-svelte';
-    import { project } from '../../../store';
-    import { devKey } from './store';
-    import ExpirationInput from '../../components/expirationInput.svelte';
+    import ExpirationInput from './expirationInput.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { page } from '$app/stores';
 
-    let expiration = $devKey.expire;
+    export let keyType: 'api' | 'dev' = 'api';
+    export let key: Models.DevKey | Models.Key;
+
+    const projectId = $page.params.project;
+
+    let isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const dependency = isApiKey ? Dependencies.KEY : Dependencies.DEV_KEY;
+    const event = isApiKey ? Submit.KeyUpdateExpire : Submit.DevKeyUpdateExpire;
+
+    let expiration = key.expire;
 
     async function updateExpire() {
         try {
-            await sdk.forConsole.projects.updateDevKey(
-                $project.$id,
-                $devKey.$id,
-                $devKey.name,
-                expiration
-            );
-            await invalidate(Dependencies.DEV_KEY);
-            trackEvent(Submit.DevKeyUpdateExpire);
+            isApiKey
+                ? await sdk.forConsole.projects.updateKey(
+                      projectId,
+                      key.$id,
+                      key.name,
+                      (key as Models.Key).scopes,
+                      expiration
+                  )
+                : await sdk.forConsole.projects.updateDevKey(
+                      projectId,
+                      key.$id,
+                      key.name,
+                      expiration
+                  );
+
+            await invalidate(dependency);
+            trackEvent(event);
             addNotification({
                 type: 'success',
-                message: 'Dev key expiration has been updated'
+                message: `${label} key expiration has been updated`
             });
         } catch (error) {
             addNotification({
                 type: 'error',
                 message: error.message
             });
-            trackError(error, Submit.DevKeyUpdateExpire);
+            trackError(error, event);
         }
     }
 
     let alertsDismissed = false;
     $: isExpiring =
-        !alertsDismissed && $devKey.expire && diffDays(new Date(), new Date($devKey.expire)) < 14;
-    $: isExpired =
-        !alertsDismissed && $devKey.expire !== null && new Date($devKey.expire) < new Date();
+        !alertsDismissed && key.expire && diffDays(new Date(), new Date(key.expire)) < 14;
+    $: isExpired = !alertsDismissed && key.expire !== null && new Date(key.expire) < new Date();
 </script>
 
 <Form onSubmit={updateExpire}>
     <CardGrid>
         <svelte:fragment slot="title">Expiration date</svelte:fragment>
-        Set a date after which your Dev key will expire.
+        Set a date after which your {label} key will expire.
         <svelte:fragment slot="aside">
             {#if isExpired}
                 <Alert.Inline
                     status="error"
                     on:dismiss={() => (alertsDismissed = true)}
-                    title="Your Dev key has expired">
+                    title="Your {label} key has expired">
                     For security reasons, we recommend you delete your expired key and create a new
                     one.
                 </Alert.Inline>
@@ -61,7 +79,7 @@
                 <Alert.Inline
                     status="warning"
                     on:dismiss={() => (alertsDismissed = true)}
-                    title="Your Dev key is about to expire">
+                    title="Your {label} key is about to expire">
                     Update the expiration date to keep the key active
                 </Alert.Inline>
             {/if}
@@ -69,7 +87,7 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={expiration === $devKey.expire} submit>Update</Button>
+            <Button disabled={expiration === key.expire} submit>Update</Button>
         </svelte:fragment>
     </CardGrid>
 </Form>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
index 2e104b112..1303b0b70 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
@@ -1,46 +1,12 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
-    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
-    import { canWriteKeys } from '$lib/stores/roles';
     import type { PageData } from './$types';
     import Action from './action.svelte';
     import { setOverviewAction } from '../context';
-    import { Table } from '@appwrite.io/pink-svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import Table from '../components/table.svelte';
 
     export let data: PageData;
 
     setOverviewAction(Action);
 </script>
 
-{#if data.devKeys.total}
-    <Table.Root columns={4} let:root>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell {root}>Name</Table.Header.Cell>
-            <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
-            <Table.Header.Cell {root}>Expiration date</Table.Header.Cell>
-        </svelte:fragment>
-        {#each data.devKeys.keys as key}
-            <Table.Row.Link href={`dev-keys/${key.$id}`} {root}>
-                <Table.Cell {root}>
-                    {key.name}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {key.expire ? toLocaleDateTime(key.expire) : 'never'}
-                </Table.Cell>
-            </Table.Row.Link>
-        {/each}
-    </Table.Root>
-{:else}
-    <Empty
-        single
-        allowCreate={$canWriteKeys}
-        href="https://appwrite.io/docs/advanced/platform/dev-keys"
-        target="Dev key"
-        on:click={() => goto(`${base}/project-${$page.params.project}/overview/dev-keys/create`)} />
-{/if}
+<Table keys={data.devKeys} keyType="dev" />
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
index f588a217a..d62096b86 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
@@ -10,9 +10,9 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project } from '../../../store';
-    import Delete from './delete.svelte';
+    import Delete from '../../components/delete.svelte';
     import { devKey } from './store';
-    import UpdateExpirationDate from './updateExpirationDate.svelte';
+    import UpdateExpirationDate from '../../components/updateExpirationDate.svelte';
 
     let showDelete = false;
     let name: string = null;
@@ -55,6 +55,8 @@
     {@const accessedAt = $devKey.accessedAt ? toLocaleDate($devKey.accessedAt) : 'never'}
     <CardGrid>
         <svelte:fragment slot="title">{$devKey.name}</svelte:fragment>
+
+        <!-- TODO: @itznotabug, center alignment -->
         <svelte:fragment slot="aside">Last accessed: {accessedAt}</svelte:fragment>
     </CardGrid>
 
@@ -84,7 +86,7 @@
         </CardGrid>
     </Form>
 
-    <UpdateExpirationDate />
+    <UpdateExpirationDate keyType="dev" key={$devKey} />
 
     <CardGrid>
         <svelte:fragment slot="title">Delete Dev key</svelte:fragment>
@@ -106,4 +108,4 @@
     </CardGrid>
 </Container>
 
-<Delete bind:showDelete />
+<Delete keyType="dev" key={$devKey} bind:showDelete />
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte
deleted file mode 100644
index 610915a3b..000000000
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/delete.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import Confirm from '$lib/components/confirm.svelte';
-    import { Dependencies } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { project } from '../../../store';
-    import { devKey } from './store';
-
-    export let showDelete = false;
-    let error: string;
-
-    async function handleDelete() {
-        try {
-            await sdk.forConsole.projects.deleteDevKey($project.$id, $devKey.$id);
-            await invalidate(Dependencies.DEV_KEYS);
-            showDelete = false;
-            addNotification({
-                type: 'success',
-                message: `${$devKey.name} has been deleted`
-            });
-            trackEvent(Submit.DevKeyDelete);
-            await goto(`${base}/project-${$project.$id}/overview/dev-keys`);
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.DevKeyDelete);
-        }
-    }
-</script>
-
-<Confirm onSubmit={handleDelete} title="Delete Dev key" bind:open={showDelete} bind:error>
-    Are you sure you want to delete this Dev key?
-</Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
index a60de8d18..e3dae9bcf 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
@@ -1,83 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { InputText } from '$lib/elements/forms/index.js';
-    import { Wizard } from '$lib/layout';
-    import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
-    import ExpirationInput from '../../components/expirationInput.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import Form from '$lib/elements/forms/form.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { onboarding } from '$routes/(console)/project-[project]/store';
-    import { goto, invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { writable } from 'svelte/store';
-
-    let showExitModal = false;
-    let formComponent: Form;
-    let isSubmitting = writable(false);
-
-    let name = '',
-        expire = '';
-
-    async function create() {
-        try {
-            const { $id } = await sdk.forConsole.projects.createDevKey(
-                $page.params.project,
-                name,
-                expire || undefined
-            );
-
-            if ($onboarding) {
-                await invalidate(Dependencies.PROJECT);
-            }
-            trackEvent(Submit.DevKeyCreate);
-            goto(`${base}/project-${$page.params.project}/overview/dev-keys/${$id}`);
-            addNotification({
-                message: `Dev key has been created`,
-                type: 'success'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.DevKeyCreate);
-        }
-    }
+    import CreateKey from '../../components/create.svelte';
 </script>
 
-<Wizard
-    title="Create Dev key"
-    href={`${base}/project-${$page.params.project}/overview/dev-keys/`}
-    bind:showExitModal
-    column
-    confirmExit>
-    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
-        <Layout.Stack gap="xxl">
-            <Fieldset legend="Configuration">
-                <Layout.Stack>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Dev key name"
-                        required
-                        bind:value={name} />
-                    <ExpirationInput bind:value={expire} />
-                </Layout.Stack>
-            </Fieldset>
-        </Layout.Stack>
-    </Form>
-
-    <svelte:fragment slot="footer">
-        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
-        <Button
-            fullWidthMobile
-            on:click={() => formComponent.triggerSubmit()}
-            disabled={$isSubmitting}>
-            Create
-        </Button>
-    </svelte:fragment>
-</Wizard>
+<CreateKey keyType="dev" />
diff --git a/src/routes/(console)/project-[project]/overview/keys/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
index d1b6b096d..d23abab9f 100644
--- a/src/routes/(console)/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
@@ -1,50 +1,12 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
-    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
-    import { canWriteKeys } from '$lib/stores/roles';
     import type { PageData } from './$types';
     import Action from './action.svelte';
     import { setOverviewAction } from '../context';
-    import { Table } from '@appwrite.io/pink-svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import Table from '../components/table.svelte';
 
     export let data: PageData;
 
     setOverviewAction(Action);
 </script>
 
-{#if data.keys.total}
-    <Table.Root columns={4} let:root>
-        <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell {root}>Name</Table.Header.Cell>
-            <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
-            <Table.Header.Cell {root}>Expiration date</Table.Header.Cell>
-            <Table.Header.Cell {root}>Scopes</Table.Header.Cell>
-        </svelte:fragment>
-        {#each data.keys.keys as key}
-            <Table.Row.Link href={`keys/${key.$id}`} {root}>
-                <Table.Cell {root}>
-                    {key.name}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {key.expire ? toLocaleDateTime(key.expire) : 'never'}
-                </Table.Cell>
-                <Table.Cell {root}>
-                    {key.scopes.length} Scopes
-                </Table.Cell>
-            </Table.Row.Link>
-        {/each}
-    </Table.Root>
-{:else}
-    <Empty
-        single
-        allowCreate={$canWriteKeys}
-        href="https://appwrite.io/docs/advanced/platform/api-keys"
-        target="API key"
-        on:click={() => goto(`${base}/project-${$page.params.project}/overview/keys/create`)} />
-{/if}
+<Table keys={data.keys} />
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index b9dbf675e..ade356733 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -12,9 +12,9 @@
     import { onMount } from 'svelte';
     import { project } from '../../../store';
     import Scopes from '../scopes.svelte';
-    import Delete from './delete.svelte';
+    import Delete from '../../components/delete.svelte';
     import { key } from './store';
-    import UpdateExpirationDate from './updateExpirationDate.svelte';
+    import UpdateExpirationDate from '../../components/updateExpirationDate.svelte';
 
     let showDelete = false;
     let name: string = null;
@@ -140,7 +140,7 @@
         </CardGrid>
     </Form>
 
-    <UpdateExpirationDate />
+    <UpdateExpirationDate key={$key} />
 
     <CardGrid>
         <svelte:fragment slot="title">Delete API key</svelte:fragment>
@@ -162,4 +162,4 @@
     </CardGrid>
 </Container>
 
-<Delete bind:showDelete />
+<Delete key={$key} bind:showDelete />
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte
deleted file mode 100644
index 5968bd499..000000000
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import Confirm from '$lib/components/confirm.svelte';
-    import { Dependencies } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { project } from '../../../store';
-    import { key } from './store';
-
-    export let showDelete = false;
-    let error: string;
-
-    async function handleDelete() {
-        try {
-            await sdk.forConsole.projects.deleteKey($project.$id, $key.$id);
-            await invalidate(Dependencies.KEYS);
-            showDelete = false;
-            addNotification({
-                type: 'success',
-                message: `${$key.name} has been deleted`
-            });
-            trackEvent(Submit.KeyDelete);
-            await goto(`${base}/project-${$project.$id}/overview/keys`);
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.KeyDelete);
-        }
-    }
-</script>
-
-<Confirm onSubmit={handleDelete} title="Delete API key" bind:open={showDelete} bind:error>
-    Are you sure you want to delete this execution?
-</Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
deleted file mode 100644
index 5595ea2b2..000000000
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button, Form } from '$lib/elements/forms';
-    import { diffDays } from '$lib/helpers/date';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { Alert } from '@appwrite.io/pink-svelte';
-    import { project } from '../../../store';
-    import ExpirationInput from '../expirationInput.svelte';
-    import { key } from './store';
-
-    let expiration = $key.expire;
-
-    async function updateExpire() {
-        try {
-            await sdk.forConsole.projects.updateKey(
-                $project.$id,
-                $key.$id,
-                $key.name,
-                $key.scopes,
-                expiration
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateExpire);
-            addNotification({
-                type: 'success',
-                message: 'API key expiration has been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateExpire);
-        }
-    }
-
-    let alertsDismissed = false;
-    $: isExpiring =
-        !alertsDismissed && $key.expire && diffDays(new Date(), new Date($key.expire)) < 14;
-    $: isExpired = !alertsDismissed && $key.expire !== null && new Date($key.expire) < new Date();
-</script>
-
-<Form onSubmit={updateExpire}>
-    <CardGrid>
-        <svelte:fragment slot="title">Expiration date</svelte:fragment>
-        Set a date after which your API key will expire.
-        <svelte:fragment slot="aside">
-            {#if isExpired}
-                <Alert.Inline
-                    status="error"
-                    on:dismiss={() => (alertsDismissed = true)}
-                    title="Your API key has expired">
-                    For security reasons, we recommend you delete your expired key and create a new
-                    one.
-                </Alert.Inline>
-            {:else if isExpiring}
-                <Alert.Inline
-                    status="warning"
-                    on:dismiss={() => (alertsDismissed = true)}
-                    title="Your API key is about to expire">
-                    Update the expiration date to keep the key active
-                </Alert.Inline>
-            {/if}
-            <ExpirationInput bind:value={expiration} />
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button disabled={expiration === $key.expire} submit>Update</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Form>
diff --git a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
index a435ceea3..da0dad597 100644
--- a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
@@ -1,98 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { InputText } from '$lib/elements/forms/index.js';
-    import { Wizard } from '$lib/layout';
-    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import ExpirationInput from '../expirationInput.svelte';
-    import Scopes from '../scopes.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import Form from '$lib/elements/forms/form.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { onboarding } from '$routes/(console)/project-[project]/store';
-    import { goto, invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { writable } from 'svelte/store';
-
-    let showExitModal = false;
-    let formComponent: Form;
-    let isSubmitting = writable(false);
-
-    let name = '',
-        expire = '';
-    let scopes = [];
-
-    async function create() {
-        try {
-            const { $id } = await sdk.forConsole.projects.createKey(
-                $page.params.project,
-                name,
-                scopes,
-                expire || undefined
-            );
-
-            if ($onboarding) {
-                await invalidate(Dependencies.PROJECT);
-            }
-            trackEvent(Submit.KeyCreate, {
-                scopes: scopes
-            });
-            goto(`${base}/project-${$page.params.project}/overview/keys/${$id}`);
-            addNotification({
-                message: `API key has been created`,
-                type: 'success'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyCreate);
-        }
-    }
+    import CreateKey from '../../components/create.svelte';
 </script>
 
-<Wizard
-    title="Create API key"
-    href={`${base}/project-${$page.params.project}/overview/keys/`}
-    bind:showExitModal
-    column
-    confirmExit>
-    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
-        <Layout.Stack gap="xxl">
-            <Fieldset legend="Configuration">
-                <Layout.Stack>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="API key name"
-                        required
-                        bind:value={name} />
-                    <ExpirationInput bind:value={expire} />
-                </Layout.Stack>
-            </Fieldset>
-
-            <Fieldset legend="Scopes">
-                <Layout.Stack gap="xl">
-                    <Typography.Text>
-                        Choose which permission scopes to grant your application. It is best
-                        practice to allow only the permissions you need to meet your project goals.
-                    </Typography.Text>
-                    <Scopes bind:scopes />
-                </Layout.Stack>
-            </Fieldset>
-        </Layout.Stack>
-    </Form>
-
-    <svelte:fragment slot="footer">
-        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
-        <Button
-            fullWidthMobile
-            on:click={() => formComponent.triggerSubmit()}
-            disabled={$isSubmitting}>
-            Create
-        </Button>
-    </svelte:fragment>
-</Wizard>
+<CreateKey />
diff --git a/src/routes/(console)/project-[project]/overview/keys/scopes.svelte b/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
index 9c4f39f0a..44fb2c49c 100644
--- a/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
@@ -77,8 +77,6 @@
             }
         }
     }
-
-    $: console.log(scopes);
 </script>
 
 <Layout.Stack>

From eb18860154f3b376ffc24febbf7f7f2307128fda Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 23 Mar 2025 19:50:48 +0530
Subject: [PATCH 04/36] fix: duplicate shortcut.

---
 src/routes/(console)/project-[project]/overview/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index fcdaf1746..d48a3e12c 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -78,7 +78,7 @@
             callback() {
                 goto(`${base}/project-${projectId}/overview/dev-keys/create`);
             },
-            keys: ['c', 'k'],
+            keys: ['c', 'd', 'k'],
             group: 'integrations',
             disabled: !$canWriteProjects
         }

From 0d4f71e63eb17744dea90425088935f12f735820 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 24 Mar 2025 11:16:04 +0530
Subject: [PATCH 05/36] update: cleanups, expiry fixes.

---
 .../overview/components/create.svelte         |  7 +++---
 .../overview/components/delete.svelte         |  2 +-
 .../components/expirationInput.svelte         | 24 +++++++++++++++++--
 .../components/updateExpirationDate.svelte    |  2 +-
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/components/create.svelte b/src/routes/(console)/project-[project]/overview/components/create.svelte
index ab5d9f712..f74d558e1 100644
--- a/src/routes/(console)/project-[project]/overview/components/create.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/create.svelte
@@ -44,11 +44,11 @@
                   )
                 : await sdk.forConsole.projects.createDevKey(projectId, name, expire || undefined);
 
-            if ($onboarding) {
+            if ($onboarding && isApiKey) {
                 await invalidate(Dependencies.PROJECT);
             }
             trackEvent(event);
-            goto(`${base}/project-${$page.params.project}/overview/${slug}/${$id}`);
+            goto(`${base}/project-${projectId}/overview/${slug}/${$id}`);
             addNotification({
                 message: `${label} key has been created`,
                 type: 'success'
@@ -79,7 +79,8 @@
                         placeholder="{label} key name"
                         required
                         bind:value={name} />
-                    <ExpirationInput bind:value={expire} />
+
+                    <ExpirationInput bind:value={expire} {keyType} />
                 </Layout.Stack>
             </Fieldset>
 
diff --git a/src/routes/(console)/project-[project]/overview/components/delete.svelte b/src/routes/(console)/project-[project]/overview/components/delete.svelte
index 8a5c0bfa1..230adeb2a 100644
--- a/src/routes/(console)/project-[project]/overview/components/delete.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/delete.svelte
@@ -45,5 +45,5 @@
 </script>
 
 <Confirm onSubmit={handleDelete} title="Delete {label} key" bind:open={showDelete} bind:error>
-    Are you sure you want to delete this execution?
+    Are you sure you want to delete this key?
 </Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte b/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
index cafc292c6..1df900861 100644
--- a/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
@@ -19,7 +19,7 @@
         return date.toISOString();
     }
 
-    const options = [
+    const defaultOptions = [
         {
             label: 'Never',
             value: null
@@ -46,10 +46,30 @@
         }
     ];
 
+    const limitedOptions = [
+        {
+            label: '1 Day',
+            value: incrementToday(1, 'day')
+        },
+        {
+            label: '7 Days',
+            value: incrementToday(7, 'day')
+        },
+        {
+            label: '30 days',
+            value: incrementToday(30, 'day')
+        }
+    ];
+
     export let value: string | null = null;
+    export let keyType: 'api' | 'dev' = 'api';
+
+    const options = keyType === 'api' ? defaultOptions : limitedOptions;
 
     function initExpirationSelect() {
-        if (value === null || !isValidDate(value)) return null;
+        if (value === null || !isValidDate(value)) {
+            return options[0]?.value ?? null;
+        }
 
         let result = 'custom';
         for (const option of options) {
diff --git a/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
index 1393f86e0..34dad4c13 100644
--- a/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
@@ -83,7 +83,7 @@
                     Update the expiration date to keep the key active
                 </Alert.Inline>
             {/if}
-            <ExpirationInput bind:value={expiration} />
+            <ExpirationInput bind:value={expiration} {keyType} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">

From 9d62307e10f04df7e2c916b1d42b52f047dae2a3 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 24 Mar 2025 14:56:31 +0530
Subject: [PATCH 06/36] fixes: as per designs.

---
 .../overview/components/create.svelte         | 65 +++++++----------
 .../overview/components/table.svelte          | 34 +++++++--
 .../overview/dev-keys/action.svelte           | 71 ++++++++++++++++++-
 .../overview/dev-keys/create/+page.svelte     |  5 --
 4 files changed, 124 insertions(+), 51 deletions(-)
 delete mode 100644 src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte

diff --git a/src/routes/(console)/project-[project]/overview/components/create.svelte b/src/routes/(console)/project-[project]/overview/components/create.svelte
index f74d558e1..b2dbc90ee 100644
--- a/src/routes/(console)/project-[project]/overview/components/create.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/create.svelte
@@ -8,23 +8,16 @@
     import Button from '$lib/elements/forms/button.svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { onboarding } from '$routes/(console)/project-[project]/store';
+    import { onboarding } from '../../store';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { writable } from 'svelte/store';
-    import Scopes from '$routes/(console)/project-[project]/overview/keys/scopes.svelte';
-
-    export let keyType: 'api' | 'dev' = 'api';
+    import Scopes from '../keys/scopes.svelte';
 
     const projectId = $page.params.project;
 
-    const isApiKey = keyType === 'api';
-    const label = isApiKey ? 'API' : 'Dev';
-    const slug = isApiKey ? 'keys' : 'dev-keys';
-    const event = isApiKey ? Submit.KeyCreate : Submit.DevKeyCreate;
-
     let showExitModal = false;
     let formComponent: Form;
     let isSubmitting = writable(false);
@@ -35,22 +28,21 @@
 
     async function create() {
         try {
-            const { $id } = isApiKey
-                ? await sdk.forConsole.projects.createKey(
-                      projectId,
-                      name,
-                      scopes,
-                      expire || undefined
-                  )
-                : await sdk.forConsole.projects.createDevKey(projectId, name, expire || undefined);
+            const { $id } = await sdk.forConsole.projects.createKey(
+                projectId,
+                name,
+                scopes,
+                expire || undefined
+            );
 
-            if ($onboarding && isApiKey) {
+            if ($onboarding) {
                 await invalidate(Dependencies.PROJECT);
             }
-            trackEvent(event);
-            goto(`${base}/project-${projectId}/overview/${slug}/${$id}`);
+
+            trackEvent(Submit.KeyCreate);
+            await goto(`${base}/project-${projectId}/overview/keys/${$id}`);
             addNotification({
-                message: `${label} key has been created`,
+                message: `API key has been created`,
                 type: 'success'
             });
         } catch (error) {
@@ -58,14 +50,14 @@
                 type: 'error',
                 message: error.message
             });
-            trackError(error, event);
+            trackError(error, Submit.KeyCreate);
         }
     }
 </script>
 
 <Wizard
-    title="Create {label} key"
-    href={`${base}/project-${projectId}/overview/${slug}/`}
+    title="Create API key"
+    href={`${base}/project-${projectId}/overview/keys/`}
     bind:showExitModal
     column
     confirmExit>
@@ -76,26 +68,23 @@
                     <InputText
                         id="name"
                         label="Name"
-                        placeholder="{label} key name"
+                        placeholder="API key name"
                         required
                         bind:value={name} />
 
-                    <ExpirationInput bind:value={expire} {keyType} />
+                    <ExpirationInput bind:value={expire} keyType="api" />
                 </Layout.Stack>
             </Fieldset>
 
-            {#if isApiKey}
-                <Fieldset legend="Scopes">
-                    <Layout.Stack gap="xl">
-                        <Typography.Text>
-                            Choose which permission scopes to grant your application. It is best
-                            practice to allow only the permissions you need to meet your project
-                            goals.
-                        </Typography.Text>
-                        <Scopes bind:scopes />
-                    </Layout.Stack>
-                </Fieldset>
-            {/if}
+            <Fieldset legend="Scopes">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    <Scopes bind:scopes />
+                </Layout.Stack>
+            </Fieldset>
         </Layout.Stack>
     </Form>
 
diff --git a/src/routes/(console)/project-[project]/overview/components/table.svelte b/src/routes/(console)/project-[project]/overview/components/table.svelte
index a6b232f52..3c142c025 100644
--- a/src/routes/(console)/project-[project]/overview/components/table.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/table.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Empty } from '$lib/components';
-    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { canWriteKeys } from '$lib/stores/roles';
-    import { Table } from '@appwrite.io/pink-svelte';
+    import { Badge, Layout, Table } from '@appwrite.io/pink-svelte';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
@@ -18,10 +18,23 @@
     function asApiKey(key: Models.Key | Models.DevKey) {
         return key as Models.Key;
     }
+
+    function getExpiryDetails(key: Models.Key | Models.DevKey): {
+        status: 'success' | 'warning' | 'error' | null;
+        message: string | null;
+    } {
+        const isExpired = key.expire !== null && new Date(key.expire) < new Date();
+        const isExpiring = key.expire && diffDays(new Date(), new Date(key.expire)) < 14;
+
+        return {
+            status: isExpired ? 'error' : isExpiring ? 'warning' : null,
+            message: isExpired ? 'Expired' : isExpiring ? 'Expires soon' : null
+        };
+    }
 </script>
 
 {#if keys.total}
-    <Table.Root columns={4} let:root>
+    <Table.Root columns={isApiKey ? 4 : 3} let:root>
         <svelte:fragment slot="header" let:root>
             <Table.Header.Cell {root}>Name</Table.Header.Cell>
             <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
@@ -31,7 +44,7 @@
             {/if}
         </svelte:fragment>
         {#each keys.keys as key}
-            <Table.Row.Link href={`dev-keys/${key.$id}`} {root}>
+            <Table.Row.Link href={`${slug}/${key.$id}`} {root}>
                 <Table.Cell {root}>
                     {key.name}
                 </Table.Cell>
@@ -39,7 +52,18 @@
                     {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
                 </Table.Cell>
                 <Table.Cell {root}>
-                    {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+                    {@const expiration = getExpiryDetails(key)}
+                    <Layout.Stack gap="s" direction="row">
+                        {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+
+                        {#if expiration.status}
+                            <Badge
+                                size="s"
+                                variant="secondary"
+                                type={expiration.status}
+                                content={expiration.message} />
+                        {/if}
+                    </Layout.Stack>
                 </Table.Cell>
                 {#if isApiKey}
                     <Table.Cell {root}>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
index a6dd57d54..dd5398dc8 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
@@ -1,15 +1,80 @@
-<script>
+<script lang="ts">
     import Button from '$lib/elements/forms/button.svelte';
     import { canWriteKeys } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Modal, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Form, InputText } from '$lib/elements/forms/index.js';
+    import ExpirationInput from '../components/expirationInput.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { base } from '$app/paths';
+    import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
+
+    let showModal = false;
+    let isSubmitting = false;
+    let name = '',
+        expire = '';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        try {
+            isSubmitting = true;
+            const { $id } = await sdk.forConsole.projects.createDevKey(
+                projectId,
+                name,
+                expire || undefined
+            );
+
+            showModal = false;
+            trackEvent(Submit.DevKeyCreate);
+            goto(`${base}/project-${projectId}/overview/dev-keys/${$id}`);
+            addNotification({
+                message: `Dev key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DevKeyCreate);
+        } finally {
+            isSubmitting = false;
+        }
+    }
 </script>
 
 {#if $canWriteKeys}
-    <Button href={`${base}/project-${$page.params.project}/overview/dev-keys/create`}>
+    <Button on:click={() => (showModal = true)}>
         <Icon icon={IconPlus} slot="start" size="s" />
         Create Dev key
     </Button>
+
+    <Form onSubmit={create} isModal>
+        <Modal title="Create Dev key" bind:open={showModal}>
+            <span slot="description">
+                Test your app without rate limits and more detailed error messages.
+            </span>
+
+            <Layout.Stack>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Dev key name"
+                    required
+                    bind:value={name} />
+
+                <ExpirationInput bind:value={expire} keyType="dev" />
+            </Layout.Stack>
+
+            <Layout.Stack direction="row" justifyContent="flex-end" slot="footer">
+                <Button fullWidthMobile secondary on:click={() => (showModal = false)}
+                    >Cancel</Button>
+                <Button fullWidthMobile submit disabled={isSubmitting}>Create</Button>
+            </Layout.Stack>
+        </Modal>
+    </Form>
 {/if}
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
deleted file mode 100644
index e3dae9bcf..000000000
--- a/src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-    import CreateKey from '../../components/create.svelte';
-</script>
-
-<CreateKey keyType="dev" />

From 6f4a45f79dbad9f5341248383e290fb62a5fb8b8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 24 Mar 2025 17:08:16 +0530
Subject: [PATCH 07/36] update: streamline components.

---
 src/lib/elements/forms/inputSelect.svelte     |   3 +-
 .../components/expirationInput.svelte         |  22 +-
 .../overview/components/keyDetails.svelte     | 205 ++++++++++++++++++
 .../components/updateExpirationDate.svelte    |   9 +-
 .../[key]/+page@project-[project].svelte      | 109 +---------
 .../overview/dev-keys/action.svelte           |   2 +-
 .../keys/[key]/+page@project-[project].svelte | 163 +-------------
 7 files changed, 232 insertions(+), 281 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/overview/components/keyDetails.svelte

diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index b64746bfd..ae4187870 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -4,6 +4,7 @@
 
     export let id: string;
     export let label: string | undefined = undefined;
+    export let helper: string | undefined = undefined;
     export let value: string | number | boolean | null;
     export let optionalText: string | number | boolean | null | undefined = undefined;
     export let placeholder = '';
@@ -55,7 +56,7 @@
     {disabled}
     {isSearchable}
     {required}
-    helper={error}
+    helper={error ?? helper}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input
diff --git a/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte b/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
index 1df900861..0f92c7742 100644
--- a/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Helper, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { InputDateTime, InputSelect } from '$lib/elements/forms';
     import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
@@ -91,15 +91,21 @@
             value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
         }
     }
+
+    $: helper =
+        expirationSelect !== 'custom' && expirationSelect !== null
+            ? `Your key will expire in ${toLocaleDate(value)}`
+            : undefined;
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration date">
-    <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom' && expirationSelect !== null}
-            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
-        {/if}
-    </svelte:fragment>
-</InputSelect>
+<InputSelect
+    required
+    {helper}
+    {options}
+    id="preset"
+    label="Expiration date"
+    bind:value={expirationSelect} />
+
 {#if expirationSelect === 'custom'}
     <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/overview/components/keyDetails.svelte b/src/routes/(console)/project-[project]/overview/components/keyDetails.svelte
new file mode 100644
index 000000000..570abf8a1
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/components/keyDetails.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Box, CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../../store';
+    import Delete from './delete.svelte';
+    import UpdateExpirationDate from './updateExpirationDate.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import Scopes from '../keys/scopes.svelte';
+    import { InteractiveText, Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    export let key: Models.DevKey | Models.Key;
+    export let keyType: 'api' | 'dev' = 'api';
+
+    let name = null;
+    let scopes = null;
+
+    let showDelete = false;
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'Dev';
+    const event = isApiKey ? Submit.KeyUpdateName : Submit.DevKeyUpdateName;
+    const dependency = isApiKey ? Dependencies.KEY : Dependencies.DEV_KEY;
+
+    onMount(() => {
+        name ??= key.name;
+        if (isApiKey) {
+            scopes ??= (key as Models.Key).scopes;
+        }
+    });
+
+    function asApiKey(key: Models.Key | Models.DevKey) {
+        return key as Models.Key;
+    }
+
+    async function updateName() {
+        try {
+            isApiKey
+                ? await sdk.forConsole.projects.updateKey(
+                      $project.$id,
+                      key.$id,
+                      name,
+                      scopes,
+                      key.expire
+                  )
+                : await sdk.forConsole.projects.updateDevKey(
+                      $project.$id,
+                      key.$id,
+                      name,
+                      key.expire
+                  );
+            await invalidate(dependency);
+            trackEvent(event);
+            addNotification({
+                type: 'success',
+                message: `${label} key name has been updated`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, event);
+        }
+    }
+
+    async function updateScopes() {
+        try {
+            await sdk.forConsole.projects.updateKey(
+                $project.$id,
+                key.$id,
+                key.name,
+                scopes,
+                key.expire
+            );
+            await invalidate(Dependencies.KEY);
+            trackEvent(Submit.KeyUpdateScopes, {
+                scopes
+            });
+            addNotification({
+                type: 'success',
+                message: 'API key scopes have been updated'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.KeyUpdateScopes);
+        }
+    }
+
+    let tiles: Record<string, string>;
+    $: tiles = {
+        Name: key.name,
+        'Last accessed': key.accessedAt ? toLocaleDate(key.accessedAt) : 'never',
+        'Expiration date': key.expire ? toLocaleDateTime(key.expire) : 'never',
+        Secret: key.secret
+    };
+</script>
+
+<svelte:head>
+    <title>{label} key - Appwrite</title>
+</svelte:head>
+
+<Container>
+    {@const accessedAt = key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
+    <CardGrid>
+        <svelte:fragment slot="title">Key details</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <Layout.GridFraction start={1} end={2} gap="xxxl" rowGap="xl">
+                {#each Object.entries(tiles) as [label, value]}
+                    <Layout.Stack gap="xxxs">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                            {label}
+                        </Typography.Text>
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                            {#if label === 'Secret'}
+                                <InteractiveText
+                                    variant="secret-code"
+                                    isVisible={false}
+                                    text={value} />
+                            {:else}
+                                {value}
+                            {/if}
+                        </Typography.Text>
+                    </Layout.Stack>
+                {/each}
+            </Layout.GridFraction>
+        </svelte:fragment>
+    </CardGrid>
+
+    <Form onSubmit={updateName}>
+        <CardGrid>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            Choose any name that will help you distinguish between {label} keys.
+            <svelte:fragment slot="aside">
+                <InputText
+                    id="name"
+                    label="Name"
+                    bind:value={name}
+                    required
+                    placeholder="Enter name" />
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={name === key.name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    {#if isApiKey}
+        <Form onSubmit={updateScopes}>
+            {@const apiKey = asApiKey(key)}
+            <CardGrid>
+                <svelte:fragment slot="title">Scopes</svelte:fragment>
+                You can choose which permission scope to grant your application. It is a best practice
+                to allow only the permissions you need to meet your project goals.
+                <svelte:fragment slot="aside">
+                    {#if scopes !== null}
+                        <Scopes bind:scopes />
+                    {/if}
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button
+                        submit
+                        disabled={scopes &&
+                            apiKey?.scopes &&
+                            !symmetricDifference(scopes, apiKey.scopes).length}>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+    {/if}
+
+    <UpdateExpirationDate {keyType} {key} />
+
+    <CardGrid>
+        <svelte:fragment slot="title">Delete {label} key</svelte:fragment>
+        The Dev key will be permanently deleted. This action is irreversible.
+        <svelte:fragment slot="aside">
+            <Box>
+                <div class="u-flex u-gap-16">
+                    <div class="u-cross-child-center u-line-height-1-5">
+                        <h6 class="u-bold" data-private>{key.name}</h6>
+                        <p>Last accessed: {accessedAt}</p>
+                    </div>
+                </div>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete {keyType} {key} bind:showDelete />
diff --git a/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
index 34dad4c13..eda52dfef 100644
--- a/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
@@ -4,7 +4,7 @@
     import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
-    import { diffDays } from '$lib/helpers/date';
+    import { diffDays, isSameDay } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Alert } from '@appwrite.io/pink-svelte';
@@ -17,7 +17,7 @@
 
     const projectId = $page.params.project;
 
-    let isApiKey = keyType === 'api';
+    const isApiKey = keyType === 'api';
     const label = isApiKey ? 'API' : 'Dev';
     const dependency = isApiKey ? Dependencies.KEY : Dependencies.DEV_KEY;
     const event = isApiKey ? Submit.KeyUpdateExpire : Submit.DevKeyUpdateExpire;
@@ -60,6 +60,9 @@
     $: isExpiring =
         !alertsDismissed && key.expire && diffDays(new Date(), new Date(key.expire)) < 14;
     $: isExpired = !alertsDismissed && key.expire !== null && new Date(key.expire) < new Date();
+
+    // for comparison's sake.
+    $: disableButton = isSameDay(new Date(expiration), new Date(key?.expire));
 </script>
 
 <Form onSubmit={updateExpire}>
@@ -87,7 +90,7 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={expiration === key.expire} submit>Update</Button>
+            <Button disabled={disableButton} submit>Update</Button>
         </svelte:fragment>
     </CardGrid>
 </Form>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
index d62096b86..d9751bd0f 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
@@ -1,111 +1,6 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Box, CardGrid, Secret } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button, Form, InputText } from '$lib/elements/forms';
-    import { toLocaleDate } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { project } from '../../../store';
-    import Delete from '../../components/delete.svelte';
     import { devKey } from './store';
-    import UpdateExpirationDate from '../../components/updateExpirationDate.svelte';
-
-    let showDelete = false;
-    let name: string = null;
-    let secret: string = null;
-
-    onMount(() => {
-        name ??= $devKey.name;
-        secret ??= $devKey.secret;
-    });
-
-    async function updateName() {
-        try {
-            await sdk.forConsole.projects.updateDevKey(
-                $project.$id,
-                $devKey.$id,
-                name,
-                $devKey.expire
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateName);
-            addNotification({
-                type: 'success',
-                message: 'API key name has been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateName);
-        }
-    }
+    import KeyDetails from '../../components/keyDetails.svelte';
 </script>
 
-<svelte:head>
-    <title>Dev key - Appwrite</title>
-</svelte:head>
-
-<Container>
-    {@const accessedAt = $devKey.accessedAt ? toLocaleDate($devKey.accessedAt) : 'never'}
-    <CardGrid>
-        <svelte:fragment slot="title">{$devKey.name}</svelte:fragment>
-
-        <!-- TODO: @itznotabug, center alignment -->
-        <svelte:fragment slot="aside">Last accessed: {accessedAt}</svelte:fragment>
-    </CardGrid>
-
-    <CardGrid>
-        <svelte:fragment slot="title">Dev key secret</svelte:fragment>
-        <svelte:fragment slot="aside">
-            <Secret copyEvent="key" bind:value={secret} />
-        </svelte:fragment>
-    </CardGrid>
-
-    <Form onSubmit={updateName}>
-        <CardGrid>
-            <svelte:fragment slot="title">Name</svelte:fragment>
-            Choose any name that will help you distinguish between Dev keys.
-            <svelte:fragment slot="aside">
-                <InputText
-                    id="name"
-                    label="Name"
-                    bind:value={name}
-                    required
-                    placeholder="Enter name" />
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button disabled={name === $devKey.name} submit>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-    </Form>
-
-    <UpdateExpirationDate keyType="dev" key={$devKey} />
-
-    <CardGrid>
-        <svelte:fragment slot="title">Delete Dev key</svelte:fragment>
-        The Dev key will be permanently deleted. This action is irreversible.
-        <svelte:fragment slot="aside">
-            <Box>
-                <div class="u-flex u-gap-16">
-                    <div class="u-cross-child-center u-line-height-1-5">
-                        <h6 class="u-bold" data-private>{$devKey.name}</h6>
-                        <p>Last accessed: {accessedAt}</p>
-                    </div>
-                </div>
-            </Box>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Container>
-
-<Delete keyType="dev" key={$devKey} bind:showDelete />
+<KeyDetails key={$devKey} keyType="dev" />
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
index dd5398dc8..d29bce66e 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
@@ -30,7 +30,7 @@
 
             showModal = false;
             trackEvent(Submit.DevKeyCreate);
-            goto(`${base}/project-${projectId}/overview/dev-keys/${$id}`);
+            await goto(`${base}/project-${projectId}/overview/dev-keys/${$id}`);
             addNotification({
                 message: `Dev key has been created`,
                 type: 'success'
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index ade356733..118d093f5 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -1,165 +1,6 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Box, CardGrid, Secret } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button, Form, InputText } from '$lib/elements/forms';
-    import { symmetricDifference } from '$lib/helpers/array';
-    import { toLocaleDate } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { project } from '../../../store';
-    import Scopes from '../scopes.svelte';
-    import Delete from '../../components/delete.svelte';
     import { key } from './store';
-    import UpdateExpirationDate from '../../components/updateExpirationDate.svelte';
-
-    let showDelete = false;
-    let name: string = null;
-    let secret: string = null;
-    let scopes: string[] = null;
-
-    onMount(() => {
-        name ??= $key.name;
-        secret ??= $key.secret;
-        scopes ??= $key.scopes;
-    });
-
-    async function updateName() {
-        try {
-            await sdk.forConsole.projects.updateKey(
-                $project.$id,
-                $key.$id,
-                name,
-                $key.scopes,
-                $key.expire
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateName);
-            addNotification({
-                type: 'success',
-                message: 'API key name has been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateName);
-        }
-    }
-
-    async function updateScopes() {
-        try {
-            await sdk.forConsole.projects.updateKey(
-                $project.$id,
-                $key.$id,
-                $key.name,
-                scopes,
-                $key.expire
-            );
-            await invalidate(Dependencies.KEY);
-            trackEvent(Submit.KeyUpdateScopes, {
-                scopes
-            });
-            addNotification({
-                type: 'success',
-                message: 'API key scopes have been updated'
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.KeyUpdateScopes);
-        }
-    }
+    import KeyDetails from '../../components/keyDetails.svelte';
 </script>
 
-<svelte:head>
-    <title>API key - Appwrite</title>
-</svelte:head>
-
-<Container>
-    {@const accessedAt = $key.accessedAt ? toLocaleDate($key.accessedAt) : 'never'}
-    <CardGrid>
-        <svelte:fragment slot="title">{$key.name}</svelte:fragment>
-        <svelte:fragment slot="aside">
-            <p>
-                Last accessed: {accessedAt}<br />
-                Scopes granted: {$key.scopes.length}
-            </p>
-        </svelte:fragment>
-    </CardGrid>
-
-    <CardGrid>
-        <svelte:fragment slot="title">API key secret</svelte:fragment>
-        <svelte:fragment slot="aside">
-            <Secret copyEvent="key" bind:value={secret} />
-        </svelte:fragment>
-    </CardGrid>
-
-    <Form onSubmit={updateName}>
-        <CardGrid>
-            <svelte:fragment slot="title">Name</svelte:fragment>
-            Choose any name that will help you distinguish between API keys.
-            <svelte:fragment slot="aside">
-                <InputText
-                    id="name"
-                    label="Name"
-                    bind:value={name}
-                    required
-                    placeholder="Enter name" />
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button disabled={name === $key.name} submit>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-    </Form>
-    <Form onSubmit={updateScopes}>
-        <CardGrid>
-            <svelte:fragment slot="title">Scopes</svelte:fragment>
-            You can choose which permission scope to grant your application. It is a best practice to
-            allow only the permissions you need to meet your project goals.
-            <svelte:fragment slot="aside">
-                {#if scopes !== null}
-                    <Scopes bind:scopes />
-                {/if}
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    submit
-                    disabled={scopes &&
-                        $key?.scopes &&
-                        !symmetricDifference(scopes, $key.scopes).length}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-    </Form>
-
-    <UpdateExpirationDate key={$key} />
-
-    <CardGrid>
-        <svelte:fragment slot="title">Delete API key</svelte:fragment>
-        The API key will be permanently deleted. This action is irreversible.
-        <svelte:fragment slot="aside">
-            <Box>
-                <div class="u-flex u-gap-16">
-                    <div class="u-cross-child-center u-line-height-1-5">
-                        <h6 class="u-bold" data-private>{$key.name}</h6>
-                        <p>Last accessed: {accessedAt}</p>
-                    </div>
-                </div>
-            </Box>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Container>
-
-<Delete key={$key} bind:showDelete />
+<KeyDetails key={$key} keyType="api" />

From 4c9900762e75c62df30d19c7a3b4b5d1ce603b18 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Mar 2025 11:30:53 +0530
Subject: [PATCH 08/36] update: component dir path.

---
 package.json                                                | 1 -
 .../overview/{components => (components)}/checkbox.svelte   | 0
 .../overview/{components => (components)}/create.svelte     | 0
 .../overview/{components => (components)}/delete.svelte     | 0
 .../{components => (components)}/expirationInput.svelte     | 0
 .../overview/{components => (components)}/keyDetails.svelte | 0
 .../overview/{components => (components)}/table.svelte      | 0
 .../updateExpirationDate.svelte                             | 6 +++++-
 .../project-[project]/overview/dev-keys/+page.svelte        | 2 +-
 .../overview/dev-keys/[key]/+page@project-[project].svelte  | 2 +-
 .../project-[project]/overview/dev-keys/action.svelte       | 2 +-
 .../(console)/project-[project]/overview/keys/+page.svelte  | 2 +-
 .../overview/keys/[key]/+page@project-[project].svelte      | 2 +-
 .../project-[project]/overview/keys/create/+page.svelte     | 2 +-
 14 files changed, 11 insertions(+), 8 deletions(-)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/checkbox.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/create.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/delete.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/expirationInput.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/keyDetails.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/table.svelte (100%)
 rename src/routes/(console)/project-[project]/overview/{components => (components)}/updateExpirationDate.svelte (93%)

diff --git a/package.json b/package.json
index ad70f3ff5..0846a0a16 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     },
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9562",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08b7400",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@64948b6 ",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/src/routes/(console)/project-[project]/overview/components/checkbox.svelte b/src/routes/(console)/project-[project]/overview/(components)/checkbox.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/components/checkbox.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/checkbox.svelte
diff --git a/src/routes/(console)/project-[project]/overview/components/create.svelte b/src/routes/(console)/project-[project]/overview/(components)/create.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/components/create.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/create.svelte
diff --git a/src/routes/(console)/project-[project]/overview/components/delete.svelte b/src/routes/(console)/project-[project]/overview/(components)/delete.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/components/delete.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/delete.svelte
diff --git a/src/routes/(console)/project-[project]/overview/components/expirationInput.svelte b/src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/components/expirationInput.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
diff --git a/src/routes/(console)/project-[project]/overview/components/keyDetails.svelte b/src/routes/(console)/project-[project]/overview/(components)/keyDetails.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/components/keyDetails.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/keyDetails.svelte
diff --git a/src/routes/(console)/project-[project]/overview/components/table.svelte b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/overview/components/table.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/table.svelte
diff --git a/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/(components)/updateExpirationDate.svelte
similarity index 93%
rename from src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
rename to src/routes/(console)/project-[project]/overview/(components)/updateExpirationDate.svelte
index eda52dfef..c0d21dd97 100644
--- a/src/routes/(console)/project-[project]/overview/components/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/updateExpirationDate.svelte
@@ -62,7 +62,11 @@
     $: isExpired = !alertsDismissed && key.expire !== null && new Date(key.expire) < new Date();
 
     // for comparison's sake.
-    $: disableButton = isSameDay(new Date(expiration), new Date(key?.expire));
+    $: disableButton =
+        // expiration becomes `null` in `ExpirationInput`.
+        typeof key?.expire === 'undefined' && expiration === null
+            ? true
+            : isSameDay(new Date(expiration), new Date(key?.expire));
 </script>
 
 <Form onSubmit={updateExpire}>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
index 1303b0b70..35382191b 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/+page.svelte
@@ -2,7 +2,7 @@
     import type { PageData } from './$types';
     import Action from './action.svelte';
     import { setOverviewAction } from '../context';
-    import Table from '../components/table.svelte';
+    import Table from '../(components)/table.svelte';
 
     export let data: PageData;
 
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
index d9751bd0f..9e16d83b5 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/+page@project-[project].svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { devKey } from './store';
-    import KeyDetails from '../../components/keyDetails.svelte';
+    import KeyDetails from '../../(components)/keyDetails.svelte';
 </script>
 
 <KeyDetails key={$devKey} keyType="dev" />
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
index d29bce66e..48710d628 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
@@ -4,7 +4,7 @@
     import { Icon, Modal, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Form, InputText } from '$lib/elements/forms/index.js';
-    import ExpirationInput from '../components/expirationInput.svelte';
+    import ExpirationInput from '../(components)/expirationInput.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
diff --git a/src/routes/(console)/project-[project]/overview/keys/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
index d23abab9f..f9f98b736 100644
--- a/src/routes/(console)/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/+page.svelte
@@ -2,7 +2,7 @@
     import type { PageData } from './$types';
     import Action from './action.svelte';
     import { setOverviewAction } from '../context';
-    import Table from '../components/table.svelte';
+    import Table from '../(components)/table.svelte';
 
     export let data: PageData;
 
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index 118d093f5..82d29d955 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { key } from './store';
-    import KeyDetails from '../../components/keyDetails.svelte';
+    import KeyDetails from '../../(components)/keyDetails.svelte';
 </script>
 
 <KeyDetails key={$key} keyType="api" />
diff --git a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
index da0dad597..dd2233840 100644
--- a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import CreateKey from '../../components/create.svelte';
+    import CreateKey from '../../(components)/create.svelte';
 </script>
 
 <CreateKey />

From 501b97bc9d944906d625090a40aa25e80e9d0165 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Mar 2025 17:17:01 +0530
Subject: [PATCH 09/36] fix: accordion divider; update: wizard column size.

---
 .../overview/(components)/create.svelte            |  1 +
 .../project-[project]/overview/keys/scopes.svelte  | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/overview/(components)/create.svelte b/src/routes/(console)/project-[project]/overview/(components)/create.svelte
index b2dbc90ee..e4267b08d 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/create.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/create.svelte
@@ -60,6 +60,7 @@
     href={`${base}/project-${projectId}/overview/keys/`}
     bind:showExitModal
     column
+    columnSize="s"
     confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[project]/overview/keys/scopes.svelte b/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
index 44fb2c49c..d3a7601e6 100644
--- a/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
@@ -17,6 +17,16 @@
         Other = 'Other'
     }
 
+    const categories = [
+        Category.Auth,
+        Category.Database,
+        Category.Functions,
+        Category.Storage,
+        Category.Messaging,
+        Category.Sites,
+        Category.Other
+    ];
+
     let mounted = false;
 
     onMount(() => {
@@ -90,14 +100,16 @@
     <Layout.Stack gap="none">
         <Divider />
 
-        {#each [Category.Auth, Category.Database, Category.Functions, Category.Storage, Category.Messaging, Category.Sites, Category.Other] as category}
+        {#each categories as category, index}
             {@const checked = categoryState(category, scopes)}
+            {@const isLastItem = index === categories.length - 1}
             {@const scopesLength = allScopes.filter(
                 (n) => n.category === category && scopes.includes(n.scope)
             ).length}
             <Accordion
                 selectable
                 title={category}
+                hideDivider={isLastItem}
                 badge={`${scopesLength} ${scopesLength === 1 ? 'Scope' : 'Scopes'}`}
                 {checked}
                 on:change={(event) => onCategoryChange(event, category)}>

From 8bd1869768b845bbce7b11f95ef9aa548f7b111c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 27 Mar 2025 13:00:09 +0530
Subject: [PATCH 10/36] feat: Import documents from a CSV.

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  28 +--
 src/lib/components/csvImportBox.svelte        | 162 ++++++++++++++++++
 src/lib/helpers/files.ts                      |  18 ++
 .../project-[project]/+layout.svelte          |   2 +
 .../collection-[collection]/+page.svelte      | 125 +++++++++++++-
 .../attributes/+page.svelte                   |  77 +++++----
 .../attributes/createAttributeDropdown.svelte |  45 +++--
 .../csvDisabled.svelte                        |  12 ++
 .../collection-[collection]/store.ts          |   3 +
 10 files changed, 406 insertions(+), 70 deletions(-)
 create mode 100644 src/lib/components/csvImportBox.svelte
 create mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte

diff --git a/package.json b/package.json
index f74a73efc..44254c1e8 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@310",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@203ff84",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@310",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f6bc6d6a..d5db0176e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@310
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@310(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@203ff84
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@203ff84(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@310
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@310(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@203ff849e6d6a66529bf690af2e97cade99ef488':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@203ff849e6d6a66529bf690af2e97cade99ef488}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2db2d48b7ac3f0f2a0a8b90c9d81310183586c2a':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2db2d48b7ac3f0f2a0a8b90c9d81310183586c2a}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@310':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@310}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@203ff84':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@203ff84}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@310':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@310}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4243,11 +4243,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@203ff849e6d6a66529bf690af2e97cade99ef488(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2db2d48b7ac3f0f2a0a8b90c9d81310183586c2a(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@310(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4260,9 +4260,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@203ff84(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@310(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@203ff849e6d6a66529bf690af2e97cade99ef488(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2db2d48b7ac3f0f2a0a8b90c9d81310183586c2a(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
new file mode 100644
index 000000000..9b444447a
--- /dev/null
+++ b/src/lib/components/csvImportBox.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import { type Payload } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+    import { addNotification } from '$lib/stores/notifications';
+    import { base } from '$app/paths';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { page } from '$app/stores';
+    let importItems: Map<string, string> = new Map<string, string>();
+
+    function showCompletionNotification(databaseId: string, collectionId: string) {
+        const projectId = $page.params.project;
+        addNotification({
+            type: 'success',
+            isHtml: true,
+            message: `Documents import through CSV complete.`,
+            buttons: [
+                {
+                    name: 'View imported documents',
+                    method: () => {
+                        goto(
+                            `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`
+                        );
+                    }
+                }
+            ]
+        });
+    }
+
+    // TODO: @itznotabug, update after the SDK is available
+    function updateOrAddItem(payload: Payload) {}
+
+    function graphSize(status: string): number {
+        switch (status) {
+            case 'pending':
+                return 10;
+            case 'processing':
+                return 30;
+            case 'uploading':
+                return 60;
+            case 'completed':
+            case 'failed':
+                return 100;
+            default:
+                return 30;
+        }
+    }
+
+    function text(status: string) {
+        if (status === 'completed') {
+            return `CSV import complete`;
+        } else if (status === 'failed') {
+            return `CSV import failed`;
+        } else {
+            return 'Preparing CSV for import...';
+        }
+    }
+
+    onMount(() => {
+        // Mocking data
+        //showCsvImportBox = true;
+        // importItems.set(ID.unique(), 'something here')
+        // importItems.set(ID.unique(), 'something here 2')
+        // no idea yet on what events to observe
+        // return sdk.forConsole.client.subscribe('console', (response) => {
+        //     if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+        //
+        //     // TODO: @itznotabug, update after SDK is available
+        //     if (response.events.includes('*')) {
+        //         updateOrAddItem(response.payload);
+        //     }
+        // });
+    });
+
+    $: isOpen = true;
+    $: showCsvImportBox = importItems.size > 0;
+</script>
+
+{#if showCsvImportBox}
+    <div class="box-holder u-flex u-flex-vertical u-gap-16" style="align-items: end">
+        <section class="upload-box">
+            <header class="upload-box-header">
+                <h4 class="upload-box-title">
+                    <Typography.Text variant="m-500">
+                        Importing documents ({importItems.size})
+                    </Typography.Text>
+                </h4>
+                <button
+                    class="upload-box-button"
+                    class:is-open={isOpen}
+                    aria-label="toggle upload box"
+                    on:click={() => {
+                        isOpen = !isOpen;
+                    }}>
+                    <span class="icon-cheveron-up" aria-hidden="true" />
+                </button>
+                <button
+                    class="upload-box-button"
+                    aria-label="close backup restore box"
+                    on:click={() => (importItems = new Map())}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            </header>
+
+            {#each [...importItems.entries()] as [key, value]}
+                <div class="upload-box-content" class:is-open={isOpen}>
+                    <ul class="upload-box-list">
+                        <li class="upload-box-item">
+                            <section class="progress-bar u-width-full-line">
+                                <div
+                                    class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
+                                    <Typography.Text>
+                                        {text(key)}
+                                    </Typography.Text>
+
+                                    <Typography.Caption variant="400">
+                                        Collection name
+                                    </Typography.Caption>
+                                </div>
+                                <div
+                                    class="progress-bar-container"
+                                    class:is-danger={key.status === 'failed'}
+                                    style="--graph-size:{graphSize(key.status)}%" />
+                            </section>
+                        </li>
+                    </ul>
+                </div>
+            {/each}
+        </section>
+    </div>
+{/if}
+
+<style lang="scss">
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-content {
+        min-width: 400px;
+        max-width: 100vw;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .progress-bar-container {
+        height: 4px;
+
+        &::before {
+            height: 4px;
+            background-color: var(--bgcolor-neutral-invert);
+        }
+
+        &.is-danger::before {
+            height: 4px;
+            background-color: var(--bgcolor-error);
+        }
+    }
+</style>
diff --git a/src/lib/helpers/files.ts b/src/lib/helpers/files.ts
index f85f4e7bd..89e92d654 100644
--- a/src/lib/helpers/files.ts
+++ b/src/lib/helpers/files.ts
@@ -97,6 +97,24 @@ export function removeFile(file: File, files: FileList) {
     return dataTransfer.files;
 }
 
+export function readColumnsFromCSV(file: File): Promise<string[]> {
+    // more than enough!
+    const CHUNK_SIZE = 4096;
+
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+            const text = reader.result as string;
+            const [firstLine] = text.split('\n');
+            resolve(firstLine.split(','));
+        };
+
+        reader.onerror = reject;
+        reader.readAsText(file.slice(0, CHUNK_SIZE));
+    });
+}
+
 export const defaultIgnore = `
 ### Node ###
 # Logs
diff --git a/src/routes/(console)/project-[project]/+layout.svelte b/src/routes/(console)/project-[project]/+layout.svelte
index 9faa9c742..5c9bac20e 100644
--- a/src/routes/(console)/project-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/+layout.svelte
@@ -24,6 +24,7 @@
         canWriteProjects,
         canWriteSites
     } from '$lib/stores/roles';
+    import CsvImportBox from '$lib/components/csvImportBox.svelte';
 
     onMount(() => {
         return sdk.forConsole.client.subscribe(['project', 'console'], (response) => {
@@ -117,6 +118,7 @@
     <UploadBox />
     <MigrationBox />
     <BackupRestoreBox />
+    <CsvImportBox />
 </div>
 
 <style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 7feded646..c5783802e 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, EmptySearch, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch, Modal, PaginationWithLimit } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
@@ -8,19 +8,32 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
+    import {
+        Card,
+        Icon,
+        Layout,
+        Empty as PinkEmpty,
+        Typography,
+        Table as PinkTable,
+        Tooltip,
+        Upload
+    } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
     import { collection, columns } from './store';
     import Table from './table.svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { base } from '$app/paths';
     import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { readColumnsFromCSV, removeFile } from '$lib/helpers/files';
 
     export let data: PageData;
 
+    let files: FileList;
+    let showImportCSV = false;
+    let showValidityAlert = false;
     let showCreateAttribute = false;
     let selectedAttribute: Option['name'] = null;
 
@@ -38,6 +51,39 @@
     );
     $: hasAttributes = !!$collection.attributes.length;
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
+
+    let differences: Record<string, string[]> = {};
+    async function checkCsvAttrsValidity() {
+        if (!files.length) {
+            differences = { csv: [], collection: [] };
+            return;
+        }
+
+        const columns = await readColumnsFromCSV(files[0]);
+        const expected = $collection.attributes.map((attr) => attr.key);
+
+        showValidityAlert = !(
+            columns.length === expected.length && columns.every((col, i) => col === expected[i])
+        );
+
+        if (showValidityAlert) {
+            differences = {
+                csv: Array.from({ length: columns.length }, (_, i) => columns[i] || ''),
+                collection: Array.from(
+                    { length: $collection.attributes.length },
+                    (_, i) => expected[i] || ''
+                )
+            };
+        } else {
+            differences = { csv: [], collection: [] };
+        }
+    }
+
+    $: if (!showImportCSV) {
+        files = null;
+        showValidityAlert = false;
+        differences = { csv: [], collection: [] };
+    }
 </script>
 
 {#key $page.params.collection}
@@ -50,6 +96,13 @@
                 analyticsSource="database_documents" />
             <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                 <ViewSelector view={data.view} {columns} hideView allowNoColumns />
+                <Button
+                    secondary
+                    event="import_documents"
+                    disabled={!(hasAttributes && hasValidAttributes)}
+                    on:click={() => (showImportCSV = true)}>
+                    Import CSV
+                </Button>
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
                     href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/create`}
@@ -149,3 +202,69 @@
         bind:showCreate={showCreateAttribute}
         bind:selectedOption={selectedAttribute} />
 {/if}
+
+<Modal title="Import CSV" bind:show={showImportCSV}>
+    <Typography.Text slot="description">
+        Select a CSV file to upload. Ensure the file is properly formatted before proceeding.
+        <!-- TODO: @itznotabug, need a docs link here -->
+        <Button compact href="https://appwrite.io/docs/products/databases">Learn more.</Button>
+    </Typography.Text>
+
+    <Upload.Dropzone
+        required
+        bind:files
+        title="Upload CSV"
+        extensions={['csv']}
+        on:change={checkCsvAttrsValidity}>
+        <Layout.Stack alignItems="center" gap="s">
+            <Layout.Stack alignItems="center" gap="s">
+                <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
+                    <Typography.Text variant="l-500">
+                        Drag and drop file here or click to upload
+                    </Typography.Text>
+                    <Tooltip maxWidth="fit-content" placement="top">
+                        <Layout.Stack alignItems="center" justifyContent="center" inline>
+                            <Icon icon={IconInfo} size="s" />
+                        </Layout.Stack>
+                        <svelte:fragment slot="tooltip">Only csv files allowed</svelte:fragment>
+                    </Tooltip>
+                </Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Upload.Dropzone>
+    {#if files?.length}
+        <!-- TODO: torsten, the types issue with FileList-->
+        <Upload.List bind:files on:remove={(e) => (files = removeFile(e.detail, files))} />
+    {/if}
+
+    {#if showValidityAlert}
+        <!-- TODO: @itznotabug, need to brainstorm for design on this one -->
+        <Layout.Stack gap="s">
+            <Typography.Text>
+                The uploaded CSV doesn't match the structure of the collection's attributes.
+            </Typography.Text>
+
+            <PinkTable.Root columns={2} let:root stickyHeaders maxHeight="14rem">
+                <svelte:fragment slot="header" let:root>
+                    <PinkTable.Header.Cell column="csv" {root}>CSV</PinkTable.Header.Cell>
+                    <PinkTable.Header.Cell column="collection" {root}
+                        >Collection</PinkTable.Header.Cell>
+                </svelte:fragment>
+                {#each differences.csv as csvKey, i}
+                    <PinkTable.Row.Base {root}>
+                        <PinkTable.Cell column="csv" {root}>{csvKey ?? '-'}</PinkTable.Cell>
+                        <PinkTable.Cell column="collection" {root}
+                            >{differences.collection[i] ?? '-'}</PinkTable.Cell>
+                    </PinkTable.Row.Base>
+                {/each}
+            </PinkTable.Root>
+        </Layout.Stack>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showImportCSV = false)}>Cancel</Button>
+        <Button
+            disabled={files ? (showValidityAlert ? showValidityAlert : files?.length === 0) : true}
+            submit>Import</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index e2c1576c3..c50e40f17 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -19,7 +19,7 @@
     import { isRelationship } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
-    import { attributes, type Attributes } from '../store';
+    import { attributes, type Attributes, isCsvImportInProgress } from '../store';
     import CreateAttributeDropdown from './createAttributeDropdown.svelte';
     import Delete from './deleteAttribute.svelte';
     import Edit from './edit.svelte';
@@ -36,6 +36,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import CsvDisabled from '../csvDisabled.svelte';
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
@@ -155,45 +156,53 @@
                             : '-'}
                     </Table.Cell>
                     <Table.Cell column="actions" {root}>
-                        <Popover let:toggle padding="none" placement="bottom-end">
-                            <Button text icon ariaLabel="more options" on:click={toggle}>
-                                <Icon icon={IconDotsHorizontal} size="s" />
-                            </Button>
-                            <ActionMenu.Root slot="tooltip">
-                                <ActionMenu.Item.Button
-                                    leadingIcon={IconPencil}
-                                    on:click={() => {
-                                        selectedAttribute = attribute;
-                                        showEdit = true;
-                                        showDropdown[index] = false;
-                                    }}>
-                                    Update
-                                </ActionMenu.Item.Button>
-                                {#if !isRelationship(attribute)}
+                        {#if $isCsvImportInProgress}
+                            <CsvDisabled>
+                                <Button disabled text icon ariaLabel="more options">
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                            </CsvDisabled>
+                        {:else}
+                            <Popover let:toggle padding="none" placement="bottom-end">
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip">
                                     <ActionMenu.Item.Button
-                                        leadingIcon={IconPlus}
+                                        leadingIcon={IconPencil}
                                         on:click={() => {
                                             selectedAttribute = attribute;
-                                            showCreateIndex = true;
+                                            showEdit = true;
                                             showDropdown[index] = false;
                                         }}>
-                                        Create index
+                                        Update
                                     </ActionMenu.Item.Button>
-                                {/if}
-                                {#if attribute.status !== 'processing'}
-                                    <ActionMenu.Item.Button
-                                        leadingIcon={IconTrash}
-                                        on:click={() => {
-                                            selectedAttribute = attribute;
-                                            showDelete = true;
-                                            showDropdown[index] = false;
-                                            trackEvent(Click.DatabaseAttributeDelete);
-                                        }}>
-                                        Delete
-                                    </ActionMenu.Item.Button>
-                                {/if}
-                            </ActionMenu.Root>
-                        </Popover>
+                                    {#if !isRelationship(attribute)}
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPlus}
+                                            on:click={() => {
+                                                selectedAttribute = attribute;
+                                                showCreateIndex = true;
+                                                showDropdown[index] = false;
+                                            }}>
+                                            Create index
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                    {#if attribute.status !== 'processing'}
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconTrash}
+                                            on:click={() => {
+                                                selectedAttribute = attribute;
+                                                showDelete = true;
+                                                showDropdown[index] = false;
+                                                trackEvent(Click.DatabaseAttributeDelete);
+                                            }}>
+                                            Delete
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                </ActionMenu.Root>
+                            </Popover>
+                        {/if}
                     </Table.Cell>
                 </Table.Row.Base>
             {/each}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
index 650da6140..201ef960f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
@@ -3,28 +3,39 @@
     import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
     import { attributeOptions, type Option } from './store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import CsvDisabled from '../csvDisabled.svelte';
+    import { isCsvImportInProgress } from '../store';
 
     export let selectedOption: Option['name'] = null;
     export let showCreate = false;
 </script>
 
-<Popover let:toggle padding="none" placement="bottom-start">
-    <slot {toggle}>
-        <Button on:click={toggle} event="create_attribute">
+{#if $isCsvImportInProgress}
+    <CsvDisabled>
+        <Button size="s" disabled>
             <Icon icon={IconPlus} slot="start" size="s" />
             Create attribute
         </Button>
-    </slot>
-    <ActionMenu.Root slot="tooltip">
-        {#each attributeOptions as attribute}
-            <ActionMenu.Item.Button
-                leadingIcon={attribute.icon}
-                on:click={() => {
-                    selectedOption = attribute.name;
-                    showCreate = true;
-                }}>
-                {attribute.name}
-            </ActionMenu.Item.Button>
-        {/each}
-    </ActionMenu.Root>
-</Popover>
+    </CsvDisabled>
+{:else}
+    <Popover let:toggle padding="none" placement="bottom-start">
+        <slot {toggle}>
+            <Button on:click={toggle} event="create_attribute">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create attribute
+            </Button>
+        </slot>
+        <ActionMenu.Root slot="tooltip">
+            {#each attributeOptions as attribute}
+                <ActionMenu.Item.Button
+                    leadingIcon={attribute.icon}
+                    on:click={() => {
+                        selectedOption = attribute.name;
+                        showCreate = true;
+                    }}>
+                    {attribute.name}
+                </ActionMenu.Item.Button>
+            {/each}
+        </ActionMenu.Root>
+    </Popover>
+{/if}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte
new file mode 100644
index 000000000..1ebac3183
--- /dev/null
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/csvDisabled.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { isCsvImportInProgress } from './store';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
+</script>
+
+<Tooltip disabled={!$isCsvImportInProgress} maxWidth="12rem">
+    <div>
+        <slot />
+    </div>
+
+    <div slot="tooltip">This action is disabled during import.</div>
+</Tooltip>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
index 4408ca1ea..ea9c696a3 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -26,3 +26,6 @@ export const attributes = derived(
 export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]);
 
 export const columns = writable<Column[]>([]);
+
+// TODO: @itznotabug, check what data is received when SDK is available.
+export const isCsvImportInProgress = derived(page, ($page) => $page.data.csvImport ?? true);

From 75a3a202f073cb0d7948d75896bb87dda15f9349 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 27 Mar 2025 13:33:23 +0530
Subject: [PATCH 11/36] update: copy and maxHeight.

---
 .../database-[database]/collection-[collection]/+page.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index c5783802e..5d1347d02 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -241,10 +241,10 @@
         <!-- TODO: @itznotabug, need to brainstorm for design on this one -->
         <Layout.Stack gap="s">
             <Typography.Text>
-                The uploaded CSV doesn't match the structure of the collection's attributes.
+                The uploaded CSV does not match the collection's attribute structure.
             </Typography.Text>
 
-            <PinkTable.Root columns={2} let:root stickyHeaders maxHeight="14rem">
+            <PinkTable.Root columns={2} let:root stickyHeaders maxHeight="16rem">
                 <svelte:fragment slot="header" let:root>
                     <PinkTable.Header.Cell column="csv" {root}>CSV</PinkTable.Header.Cell>
                     <PinkTable.Header.Cell column="collection" {root}

From 6b3a0d53a3985c00614e8a231c27ffe639550eb2 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 28 Mar 2025 13:40:08 +0530
Subject: [PATCH 12/36] update: misc logic.

---
 .../collection-[collection]/+page.svelte              | 11 +++++++++--
 .../collection-[collection]/store.ts                  |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 5d1347d02..0f55f69f4 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -22,7 +22,7 @@
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
-    import { collection, columns } from './store';
+    import { collection, columns, isCsvImportInProgress } from './store';
     import Table from './table.svelte';
     import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { base } from '$app/paths';
@@ -203,7 +203,14 @@
         bind:selectedOption={selectedAttribute} />
 {/if}
 
-<Modal title="Import CSV" bind:show={showImportCSV}>
+<Modal
+    title="Import CSV"
+    bind:show={showImportCSV}
+    onSubmit={() => {
+        // todo: trigger upload and import once SDK is available.
+        showImportCSV = false;
+        $isCsvImportInProgress = true;
+    }}>
     <Typography.Text slot="description">
         Select a CSV file to upload. Ensure the file is properly formatted before proceeding.
         <!-- TODO: @itznotabug, need a docs link here -->
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
index ea9c696a3..8bcf4ef08 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -28,4 +28,4 @@ export const indexes = derived(page, ($page) => $page.data.collection.indexes as
 export const columns = writable<Column[]>([]);
 
 // TODO: @itznotabug, check what data is received when SDK is available.
-export const isCsvImportInProgress = derived(page, ($page) => $page.data.csvImport ?? true);
+export const isCsvImportInProgress = writable(false);

From 014d07951da2d945455395d9821c73004e1c2e72 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Apr 2025 19:03:34 +0530
Subject: [PATCH 13/36] update: realtime progress on csv imports!

---
 package.json                                  |    2 +-
 pnpm-lock.yaml                                | 1576 +++++++----------
 src/lib/actions/analytics.ts                  |    2 +
 src/lib/components/csvImportBox.svelte        |  153 +-
 src/lib/components/filePicker.svelte          |    4 +-
 src/lib/elements/forms/inputFilePicker.svelte |    2 +-
 src/lib/helpers/files.ts                      |   18 -
 .../collection-[collection]/+page.svelte      |  154 +-
 .../subNavigation.svelte                      |    2 +-
 .../collection-[collection]/table.svelte      |   19 +-
 .../message-[message]/pushMessage.svelte      |    2 +-
 11 files changed, 833 insertions(+), 1101 deletions(-)

diff --git a/package.json b/package.json
index 1f4f2eb9f..f891ad39d 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
         "e2e:ui": "playwright test --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 778550975..bd1a4e68f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,32 +9,32 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e
-        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e
+        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9
+        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
         specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.27.0)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
         specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
       '@sentry/sveltekit':
         specifier: ^8.38.0
-        version: 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+        version: 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       '@stripe/stripe-js':
         specifier: ^3.5.0
         version: 3.5.0
       ai:
         specifier: ^2.2.37
-        version: 2.2.37(react@18.3.1)(solid-js@1.9.5)(svelte@5.25.3)(vue@3.5.13(typescript@5.8.2))
+        version: 2.2.37(react@18.3.1)(solid-js@1.9.5)(svelte@5.27.0)(vue@3.5.13(typescript@5.8.3))
       analytics:
         specifier: ^0.8.16
         version: 0.8.16(@types/dlv@1.1.5)
@@ -73,35 +73,35 @@ importers:
         version: 2.0.1
       svelte-confetti:
         specifier: ^1.4.0
-        version: 1.4.0(svelte@5.25.3)
+        version: 1.4.0(svelte@5.27.0)
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
     devDependencies:
       '@eslint/compat':
         specifier: ^1.2.7
-        version: 1.2.7(eslint@9.23.0)
+        version: 1.2.8(eslint@9.24.0)
       '@eslint/js':
         specifier: ^9.24.0
         version: 9.24.0
       '@melt-ui/pp':
         specifier: ^0.3.2
-        version: 0.3.2(@melt-ui/svelte@0.86.5(svelte@5.25.3))(svelte@5.25.3)
+        version: 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.27.0))(svelte@5.27.0)
       '@melt-ui/svelte':
         specifier: ^0.86.5
-        version: 0.86.5(svelte@5.25.3)
+        version: 0.86.6(svelte@5.27.0)
       '@playwright/test':
         specifier: ^1.51.1
         version: 1.51.1
       '@sveltejs/adapter-static':
         specifier: ^3.0.8
-        version: 3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))
+        version: 3.0.8(@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))
       '@sveltejs/kit':
         specifier: ^2.20.2
-        version: 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+        version: 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
-        version: 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+        version: 5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.0
@@ -110,7 +110,7 @@ importers:
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.4
-        version: 5.2.7(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)
+        version: 5.2.7(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))(vitest@3.1.1)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.0)
@@ -125,28 +125,28 @@ importers:
         version: 2.0.8
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.28.0
-        version: 8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)
+        version: 8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.24.0)(typescript@5.8.3))(eslint@9.24.0)(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.28.0
-        version: 8.28.0(eslint@9.23.0)(typescript@5.8.2)
+        version: 8.30.1(eslint@9.24.0)(typescript@5.8.3)
       '@vitest/ui':
         specifier: ^3.0.9
-        version: 3.0.9(vitest@3.0.9)
+        version: 3.1.1(vitest@3.1.1)
       eslint:
         specifier: ^9.23.0
-        version: 9.23.0
+        version: 9.24.0
       eslint-config-prettier:
         specifier: ^10.1.0
-        version: 10.1.1(eslint@9.23.0)
+        version: 10.1.2(eslint@9.24.0)
       eslint-plugin-svelte:
         specifier: ^3.3.3
-        version: 3.3.3(eslint@9.23.0)(svelte@5.25.3)
+        version: 3.5.1(eslint@9.24.0)(svelte@5.27.0)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
       jsdom:
         specifier: ^26.0.0
-        version: 26.0.0
+        version: 26.1.0
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
@@ -155,19 +155,19 @@ importers:
         version: 3.5.3
       prettier-plugin-svelte:
         specifier: ^3.3.3
-        version: 3.3.3(prettier@3.5.3)(svelte@5.25.3)
+        version: 3.3.3(prettier@3.5.3)(svelte@5.27.0)
       sass:
         specifier: ^1.86.0
-        version: 1.86.0
+        version: 1.86.3
       svelte:
         specifier: ^5.25.3
-        version: 5.25.3
+        version: 5.27.0
       svelte-check:
         specifier: ^4.1.5
-        version: 4.1.5(picomatch@4.0.2)(svelte@5.25.3)(typescript@5.8.2)
+        version: 4.1.6(picomatch@4.0.2)(svelte@5.27.0)(typescript@5.8.3)
       svelte-preprocess:
         specifier: ^6.0.3
-        version: 6.0.3(@babel/core@7.26.10)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.0)(svelte@5.25.3)(typescript@5.8.2)
+        version: 6.0.3(@babel/core@7.26.9)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.3)(svelte@5.27.0)(typescript@5.8.3)
       svelte-sequential-preprocessor:
         specifier: ^2.0.2
         version: 2.0.2
@@ -176,16 +176,16 @@ importers:
         version: 2.8.1
       typescript:
         specifier: ^5.8.2
-        version: 5.8.2
+        version: 5.8.3
       typescript-eslint:
         specifier: ^8.30.1
-        version: 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+        version: 8.30.1(eslint@9.24.0)(typescript@5.8.3)
       vite:
         specifier: ^6.2.3
-        version: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+        version: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
       vitest:
         specifier: ^3.0.0
-        version: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0)
+        version: 3.1.1(@types/node@22.13.5)(@vitest/ui@3.1.1)(jsdom@26.1.0)(sass@1.86.3)
 
 packages:
 
@@ -217,8 +217,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e':
-    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9':
+    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9}
     version: 1.2.1
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c':
@@ -249,8 +249,8 @@ packages:
       react-dom: ^18.0.0
       svelte: ^4.0.0
 
-  '@asamuzakjp/css-color@3.1.1':
-    resolution: {integrity: sha512-hpRD68SV2OMcZCsrbdkccTw5FXjNDLo5OuqSHyHZfwweGsDWZwDJ2+gONyNAbazZclobMirACLw0lk8WVxIqxA==}
+  '@asamuzakjp/css-color@3.1.2':
+    resolution: {integrity: sha512-nwgc7jPn3LpZ4JWsoHtuwBsad1qSSLDDX634DdG0PBJofIuIEtSWk4KkRmuXyu178tjuHAbwiMNNzwqIyLYxZw==}
 
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
@@ -260,16 +260,16 @@ packages:
     resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.26.10':
-    resolution: {integrity: sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==}
+  '@babel/core@7.26.9':
+    resolution: {integrity: sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.27.0':
-    resolution: {integrity: sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==}
+  '@babel/generator@7.26.9':
+    resolution: {integrity: sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.27.0':
-    resolution: {integrity: sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==}
+  '@babel/helper-compilation-targets@7.26.5':
+    resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-imports@7.25.9':
@@ -294,29 +294,29 @@ packages:
     resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.27.0':
-    resolution: {integrity: sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==}
+  '@babel/helpers@7.26.9':
+    resolution: {integrity: sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.27.0':
-    resolution: {integrity: sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==}
+  '@babel/parser@7.26.9':
+    resolution: {integrity: sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/runtime@7.27.0':
-    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
+  '@babel/runtime@7.26.9':
+    resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.27.0':
-    resolution: {integrity: sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==}
+  '@babel/template@7.26.9':
+    resolution: {integrity: sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.27.0':
-    resolution: {integrity: sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==}
+  '@babel/traverse@7.26.9':
+    resolution: {integrity: sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.27.0':
-    resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
+  '@babel/types@7.26.9':
+    resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
     engines: {node: '>=6.9.0'}
 
   '@csstools/color-helpers@5.0.2':
@@ -347,158 +347,158 @@ packages:
     resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
     engines: {node: '>=18'}
 
-  '@esbuild/aix-ppc64@0.25.1':
-    resolution: {integrity: sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==}
+  '@esbuild/aix-ppc64@0.25.2':
+    resolution: {integrity: sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.25.1':
-    resolution: {integrity: sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==}
+  '@esbuild/android-arm64@0.25.2':
+    resolution: {integrity: sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.25.1':
-    resolution: {integrity: sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==}
+  '@esbuild/android-arm@0.25.2':
+    resolution: {integrity: sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.25.1':
-    resolution: {integrity: sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==}
+  '@esbuild/android-x64@0.25.2':
+    resolution: {integrity: sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.25.1':
-    resolution: {integrity: sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==}
+  '@esbuild/darwin-arm64@0.25.2':
+    resolution: {integrity: sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.1':
-    resolution: {integrity: sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==}
+  '@esbuild/darwin-x64@0.25.2':
+    resolution: {integrity: sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.25.1':
-    resolution: {integrity: sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==}
+  '@esbuild/freebsd-arm64@0.25.2':
+    resolution: {integrity: sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.1':
-    resolution: {integrity: sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==}
+  '@esbuild/freebsd-x64@0.25.2':
+    resolution: {integrity: sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.25.1':
-    resolution: {integrity: sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==}
+  '@esbuild/linux-arm64@0.25.2':
+    resolution: {integrity: sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.1':
-    resolution: {integrity: sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==}
+  '@esbuild/linux-arm@0.25.2':
+    resolution: {integrity: sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.1':
-    resolution: {integrity: sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==}
+  '@esbuild/linux-ia32@0.25.2':
+    resolution: {integrity: sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.1':
-    resolution: {integrity: sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==}
+  '@esbuild/linux-loong64@0.25.2':
+    resolution: {integrity: sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.1':
-    resolution: {integrity: sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==}
+  '@esbuild/linux-mips64el@0.25.2':
+    resolution: {integrity: sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.1':
-    resolution: {integrity: sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==}
+  '@esbuild/linux-ppc64@0.25.2':
+    resolution: {integrity: sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.1':
-    resolution: {integrity: sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==}
+  '@esbuild/linux-riscv64@0.25.2':
+    resolution: {integrity: sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.1':
-    resolution: {integrity: sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==}
+  '@esbuild/linux-s390x@0.25.2':
+    resolution: {integrity: sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.1':
-    resolution: {integrity: sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==}
+  '@esbuild/linux-x64@0.25.2':
+    resolution: {integrity: sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.1':
-    resolution: {integrity: sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==}
+  '@esbuild/netbsd-arm64@0.25.2':
+    resolution: {integrity: sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.1':
-    resolution: {integrity: sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==}
+  '@esbuild/netbsd-x64@0.25.2':
+    resolution: {integrity: sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.1':
-    resolution: {integrity: sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==}
+  '@esbuild/openbsd-arm64@0.25.2':
+    resolution: {integrity: sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.1':
-    resolution: {integrity: sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==}
+  '@esbuild/openbsd-x64@0.25.2':
+    resolution: {integrity: sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.25.1':
-    resolution: {integrity: sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==}
+  '@esbuild/sunos-x64@0.25.2':
+    resolution: {integrity: sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.25.1':
-    resolution: {integrity: sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==}
+  '@esbuild/win32-arm64@0.25.2':
+    resolution: {integrity: sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.1':
-    resolution: {integrity: sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==}
+  '@esbuild/win32-ia32@0.25.2':
+    resolution: {integrity: sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.1':
-    resolution: {integrity: sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==}
+  '@esbuild/win32-x64@0.25.2':
+    resolution: {integrity: sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.5.1':
-    resolution: {integrity: sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==}
+  '@eslint-community/eslint-utils@4.4.1':
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -507,8 +507,8 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.7':
-    resolution: {integrity: sha512-xvv7hJE32yhegJ8xNAnb62ggiAwTYHBpUCWhRxEj/ksvgDJuSXfoDkBcRYaYNFiJ+jH0IE3K16hd+xXzhBgNbg==}
+  '@eslint/compat@1.2.8':
+    resolution: {integrity: sha512-LqCYHdWL/QqKIJuZ/ucMAv8d4luKGs4oCPgpt8mWztQAtPrHfXKQ/XAUc8ljCHAfJCn6SvkpTcGt5Tsh8saowA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.10.0
@@ -516,24 +516,24 @@ packages:
       eslint:
         optional: true
 
-  '@eslint/config-array@0.19.2':
-    resolution: {integrity: sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==}
+  '@eslint/config-array@0.20.0':
+    resolution: {integrity: sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.2.0':
-    resolution: {integrity: sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==}
+  '@eslint/config-helpers@0.2.1':
+    resolution: {integrity: sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/core@0.12.0':
     resolution: {integrity: sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/eslintrc@3.3.1':
-    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+  '@eslint/core@0.13.0':
+    resolution: {integrity: sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.23.0':
-    resolution: {integrity: sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==}
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/js@9.24.0':
@@ -544,8 +544,8 @@ packages:
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.7':
-    resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
+  '@eslint/plugin-kit@0.2.8':
+    resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.9':
@@ -604,11 +604,6 @@ packages:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
 
-  '@melt-ui/svelte@0.86.5':
-    resolution: {integrity: sha512-aaVfc0pxCf6B3ByrzGJ+hB2Sop9wJamw2lNHZlzaolU0Ew1D6O9CbeJElGODT8IbH8/bhI3LcN0nCJRh2ePq+A==}
-    peerDependencies:
-      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
-
   '@melt-ui/svelte@0.86.6':
     resolution: {integrity: sha512-Jer+M7DgIwT5IHfTayb4Iw/fkkxWNmC/mqn/nMh9JrbPbkxmyabfLQnhJ+JDn5HK77f84j34lubO3iqFtYAfMg==}
     peerDependencies:
@@ -946,103 +941,103 @@ packages:
   '@prisma/instrumentation@5.22.0':
     resolution: {integrity: sha512-LxccF392NN37ISGxIurUljZSh1YWnphO34V5a0+T7FVQG2u9bhAXRTJpgmQ3483woVhkraQZFF7cbRrpbw/F4Q==}
 
-  '@rollup/rollup-android-arm-eabi@4.37.0':
-    resolution: {integrity: sha512-l7StVw6WAa8l3vA1ov80jyetOAEo1FtHvZDbzXDO/02Sq/QVvqlHkYoFwDJPIMj0GKiistsBudfx5tGFnwYWDQ==}
+  '@rollup/rollup-android-arm-eabi@4.40.0':
+    resolution: {integrity: sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.37.0':
-    resolution: {integrity: sha512-6U3SlVyMxezt8Y+/iEBcbp945uZjJwjZimu76xoG7tO1av9VO691z8PkhzQ85ith2I8R2RddEPeSfcbyPfD4hA==}
+  '@rollup/rollup-android-arm64@4.40.0':
+    resolution: {integrity: sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.37.0':
-    resolution: {integrity: sha512-+iTQ5YHuGmPt10NTzEyMPbayiNTcOZDWsbxZYR1ZnmLnZxG17ivrPSWFO9j6GalY0+gV3Jtwrrs12DBscxnlYA==}
+  '@rollup/rollup-darwin-arm64@4.40.0':
+    resolution: {integrity: sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.37.0':
-    resolution: {integrity: sha512-m8W2UbxLDcmRKVjgl5J/k4B8d7qX2EcJve3Sut7YGrQoPtCIQGPH5AMzuFvYRWZi0FVS0zEY4c8uttPfX6bwYQ==}
+  '@rollup/rollup-darwin-x64@4.40.0':
+    resolution: {integrity: sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.37.0':
-    resolution: {integrity: sha512-FOMXGmH15OmtQWEt174v9P1JqqhlgYge/bUjIbiVD1nI1NeJ30HYT9SJlZMqdo1uQFyt9cz748F1BHghWaDnVA==}
+  '@rollup/rollup-freebsd-arm64@4.40.0':
+    resolution: {integrity: sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.37.0':
-    resolution: {integrity: sha512-SZMxNttjPKvV14Hjck5t70xS3l63sbVwl98g3FlVVx2YIDmfUIy29jQrsw06ewEYQ8lQSuY9mpAPlmgRD2iSsA==}
+  '@rollup/rollup-freebsd-x64@4.40.0':
+    resolution: {integrity: sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.37.0':
-    resolution: {integrity: sha512-hhAALKJPidCwZcj+g+iN+38SIOkhK2a9bqtJR+EtyxrKKSt1ynCBeqrQy31z0oWU6thRZzdx53hVgEbRkuI19w==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.0':
+    resolution: {integrity: sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.37.0':
-    resolution: {integrity: sha512-jUb/kmn/Gd8epbHKEqkRAxq5c2EwRt0DqhSGWjPFxLeFvldFdHQs/n8lQ9x85oAeVb6bHcS8irhTJX2FCOd8Ag==}
+  '@rollup/rollup-linux-arm-musleabihf@4.40.0':
+    resolution: {integrity: sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.37.0':
-    resolution: {integrity: sha512-oNrJxcQT9IcbcmKlkF+Yz2tmOxZgG9D9GRq+1OE6XCQwCVwxixYAa38Z8qqPzQvzt1FCfmrHX03E0pWoXm1DqA==}
+  '@rollup/rollup-linux-arm64-gnu@4.40.0':
+    resolution: {integrity: sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.37.0':
-    resolution: {integrity: sha512-pfxLBMls+28Ey2enpX3JvjEjaJMBX5XlPCZNGxj4kdJyHduPBXtxYeb8alo0a7bqOoWZW2uKynhHxF/MWoHaGQ==}
+  '@rollup/rollup-linux-arm64-musl@4.40.0':
+    resolution: {integrity: sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.37.0':
-    resolution: {integrity: sha512-yCE0NnutTC/7IGUq/PUHmoeZbIwq3KRh02e9SfFh7Vmc1Z7atuJRYWhRME5fKgT8aS20mwi1RyChA23qSyRGpA==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.0':
+    resolution: {integrity: sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.37.0':
-    resolution: {integrity: sha512-NxcICptHk06E2Lh3a4Pu+2PEdZ6ahNHuK7o6Np9zcWkrBMuv21j10SQDJW3C9Yf/A/P7cutWoC/DptNLVsZ0VQ==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
+    resolution: {integrity: sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.37.0':
-    resolution: {integrity: sha512-PpWwHMPCVpFZLTfLq7EWJWvrmEuLdGn1GMYcm5MV7PaRgwCEYJAwiN94uBuZev0/J/hFIIJCsYw4nLmXA9J7Pw==}
+  '@rollup/rollup-linux-riscv64-gnu@4.40.0':
+    resolution: {integrity: sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.37.0':
-    resolution: {integrity: sha512-DTNwl6a3CfhGTAOYZ4KtYbdS8b+275LSLqJVJIrPa5/JuIufWWZ/QFvkxp52gpmguN95eujrM68ZG+zVxa8zHA==}
+  '@rollup/rollup-linux-riscv64-musl@4.40.0':
+    resolution: {integrity: sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.37.0':
-    resolution: {integrity: sha512-hZDDU5fgWvDdHFuExN1gBOhCuzo/8TMpidfOR+1cPZJflcEzXdCy1LjnklQdW8/Et9sryOPJAKAQRw8Jq7Tg+A==}
+  '@rollup/rollup-linux-s390x-gnu@4.40.0':
+    resolution: {integrity: sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.37.0':
-    resolution: {integrity: sha512-pKivGpgJM5g8dwj0ywBwe/HeVAUSuVVJhUTa/URXjxvoyTT/AxsLTAbkHkDHG7qQxLoW2s3apEIl26uUe08LVQ==}
+  '@rollup/rollup-linux-x64-gnu@4.40.0':
+    resolution: {integrity: sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.37.0':
-    resolution: {integrity: sha512-E2lPrLKE8sQbY/2bEkVTGDEk4/49UYRVWgj90MY8yPjpnGBQ+Xi1Qnr7b7UIWw1NOggdFQFOLZ8+5CzCiz143w==}
+  '@rollup/rollup-linux-x64-musl@4.40.0':
+    resolution: {integrity: sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.37.0':
-    resolution: {integrity: sha512-Jm7biMazjNzTU4PrQtr7VS8ibeys9Pn29/1bm4ph7CP2kf21950LgN+BaE2mJ1QujnvOc6p54eWWiVvn05SOBg==}
+  '@rollup/rollup-win32-arm64-msvc@4.40.0':
+    resolution: {integrity: sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.37.0':
-    resolution: {integrity: sha512-e3/1SFm1OjefWICB2Ucstg2dxYDkDTZGDYgwufcbsxTHyqQps1UQf33dFEChBNmeSsTOyrjw2JJq0zbG5GF6RA==}
+  '@rollup/rollup-win32-ia32-msvc@4.40.0':
+    resolution: {integrity: sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.37.0':
-    resolution: {integrity: sha512-LWbXUBwn/bcLx2sSsqy7pK5o+Nr+VCoRoAohfJ5C/aBio9nfJmGQqHAhU6pwxV/RmyTk5AqdySma7uwWGlmeuA==}
+  '@rollup/rollup-win32-x64-msvc@4.40.0':
+    resolution: {integrity: sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==}
     cpu: [x64]
     os: [win32]
 
@@ -1074,55 +1069,49 @@ packages:
     resolution: {integrity: sha512-1esQdgSUCww9XAntO4pr7uAM5cfGhLsgTK9MEwAKNfvpMYJi9NUTYa3A7AZmdA8V6107Lo4OD7peIPrDRbaDCg==}
     engines: {node: '>= 14'}
 
-  '@sentry/cli-darwin@2.43.0':
-    resolution: {integrity: sha512-0MYvRHJowXOMNY5W6XF4p9GQNH3LuQ+IHAQwVbZOsfwnEv8e20rf9BiPPzmJ9sIjZSWYR4yIqm6dBp6ABJFbGQ==}
+  '@sentry/cli-darwin@2.42.2':
+    resolution: {integrity: sha512-GtJSuxER7Vrp1IpxdUyRZzcckzMnb4N5KTW7sbTwUiwqARRo+wxS+gczYrS8tdgtmXs5XYhzhs+t4d52ITHMIg==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.43.0':
-    resolution: {integrity: sha512-7URSaNjbEJQZyYJ33XK3pVKl6PU2oO9ETF6R/4Cz2FmU3fecACLKVldv7+OuNl9aspLZ62mnPMDvT732/Fp2Ug==}
+  '@sentry/cli-linux-arm64@2.42.2':
+    resolution: {integrity: sha512-BOxzI7sgEU5Dhq3o4SblFXdE9zScpz6EXc5Zwr1UDZvzgXZGosUtKVc7d1LmkrHP8Q2o18HcDWtF3WvJRb5Zpw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux, freebsd]
 
-  '@sentry/cli-linux-arm@2.43.0':
-    resolution: {integrity: sha512-c2Fwb6HrFL1nbaGV4uRhHC1wEJPR+wfpKN5y06PgSNNbd10YrECAB3tqBHXC8CEmhuDyFR+ORGZ7VbswfCWEEQ==}
+  '@sentry/cli-linux-arm@2.42.2':
+    resolution: {integrity: sha512-7udCw+YL9lwq+9eL3WLspvnuG+k5Icg92YE7zsteTzWLwgPVzaxeZD2f8hwhsu+wmL+jNqbpCRmktPteh3i2mg==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux, freebsd]
 
-  '@sentry/cli-linux-i686@2.43.0':
-    resolution: {integrity: sha512-bFo/tpMZeMJ275HPGmAENREchnBxhALOOpZAphSyalUu3pGZ+EETEtlSLrKyVNJo26Dye5W7GlrYUV9+rkyCtg==}
+  '@sentry/cli-linux-i686@2.42.2':
+    resolution: {integrity: sha512-Sw/dQp5ZPvKnq3/y7wIJyxTUJYPGoTX/YeMbDs8BzDlu9to2LWV3K3r7hE7W1Lpbaw4tSquUHiQjP5QHCOS7aQ==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [linux, freebsd]
 
-  '@sentry/cli-linux-x64@2.43.0':
-    resolution: {integrity: sha512-EbAmKXUNU/Ii4pNGVRCepU6ks1M43wStMKx3pibrUTllrrCwqYKyPxRRdoFYySHkduwCxnoKZcLEg9vWZ3qS6A==}
+  '@sentry/cli-linux-x64@2.42.2':
+    resolution: {integrity: sha512-mU4zUspAal6TIwlNLBV5oq6yYqiENnCWSxtSQVzWs0Jyq97wtqGNG9U+QrnwjJZ+ta/hvye9fvL2X25D/RxHQw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux, freebsd]
 
-  '@sentry/cli-win32-arm64@2.43.0':
-    resolution: {integrity: sha512-KmJRCdQQGLSErJvrcGcN+yWo68m+5OdluhyJHsVYMOQknwu8YMOWLm12EIa+4t4GclDvwg5xcxLccCuiWMJUZw==}
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@sentry/cli-win32-i686@2.43.0':
-    resolution: {integrity: sha512-ZWxZdOyZX7NJ/CTskzg+dJ2xTpobFLXVNMOMq0HiwdhqXP2zYYJzKnIt3mHNJYA40zYFODGSgxIamodjpB8BuA==}
+  '@sentry/cli-win32-i686@2.42.2':
+    resolution: {integrity: sha512-iHvFHPGqgJMNqXJoQpqttfsv2GI3cGodeTq4aoVLU/BT3+hXzbV0x1VpvvEhncJkDgDicJpFLM8sEPHb3b8abw==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [win32]
 
-  '@sentry/cli-win32-x64@2.43.0':
-    resolution: {integrity: sha512-S/IRQYAziEnjpyROhnqzTqShDq3m8jcevXx+q5f49uQnFbfYcTgS1sdrEPqqao/K2boOWbffxYtTkvBiB/piQQ==}
+  '@sentry/cli-win32-x64@2.42.2':
+    resolution: {integrity: sha512-vPPGHjYoaGmfrU7xhfFxG7qlTBacroz5NdT+0FmDn6692D8IvpNXl1K+eV3Kag44ipJBBeR8g1HRJyx/F/9ACw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.43.0':
-    resolution: {integrity: sha512-gBE3bkx+PBJxopTrzIJLX4xHe5S0w87q5frIveWKDZ5ulVIU6YWnVumay0y07RIEweUEj3IYva1qH6HG2abfiA==}
+  '@sentry/cli@2.42.2':
+    resolution: {integrity: sha512-spb7S/RUumCGyiSTg8DlrCX4bivCNmU/A1hcfkwuciTFGu8l5CDc2I6jJWWZw8/0enDGxuj5XujgXvU5tr4bxg==}
     engines: {node: '>= 10'}
     hasBin: true
 
@@ -1200,8 +1189,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/kit@2.20.2':
-    resolution: {integrity: sha512-Dv8TOAZC9vyfcAB9TMsvUEJsRbklRTeNfcYBPaeH6KnABJ99i3CvCB2eNx8fiiliIqe+9GIchBg4RodRH5p1BQ==}
+  '@sveltejs/kit@2.20.7':
+    resolution: {integrity: sha512-dVbLMubpJJSLI4OYB+yWYNHGAhgc2bVevWuBjDj8jFUXIJOAnLwYP3vsmtcgoxNGUXoq0rHS5f7MFCsryb6nzg==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -1287,8 +1276,8 @@ packages:
   '@types/mysql@2.15.26':
     resolution: {integrity: sha512-DSLCOXhkvfS5WNNPbfn2KdICAmk8lLc+/PNvnPnF7gOdMZCxopXduqv0OQ13y/yA/zXTSikZZqVgybUxOEg6YQ==}
 
-  '@types/node@22.13.14':
-    resolution: {integrity: sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==}
+  '@types/node@22.13.5':
+    resolution: {integrity: sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==}
 
   '@types/pg-pool@2.0.6':
     resolution: {integrity: sha512-TaAUE5rq2VQYxab5Ts7WZhKNmuN78Q6PiFonTDdpbx8a1H0M1vhy3rhiMjl+e2iHmogyMw7jZF4FrE6eJUy5HQ==}
@@ -1302,8 +1291,8 @@ packages:
   '@types/prop-types@15.7.14':
     resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
 
-  '@types/react@18.3.20':
-    resolution: {integrity: sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==}
+  '@types/react@18.3.18':
+    resolution: {integrity: sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==}
 
   '@types/remarkable@2.0.8':
     resolution: {integrity: sha512-eKXqPZfpQl1kOADjdKchHrp2gwn9qMnGXhH/AtZe0UrklzhGJkawJo/Y/D0AlWcdWoWamFNIum8+/nkAISQVGg==}
@@ -1317,14 +1306,6 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@typescript-eslint/eslint-plugin@8.28.0':
-    resolution: {integrity: sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/eslint-plugin@8.30.1':
     resolution: {integrity: sha512-v+VWphxMjn+1t48/jO4t950D6KR8JaJuNXzi33Ve6P8sEmPr5k6CEXjdGwT6+LodVnEa91EQCtwjWNUCPweo+Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1333,13 +1314,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/parser@8.28.0':
-    resolution: {integrity: sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/parser@8.30.1':
     resolution: {integrity: sha512-H+vqmWwT5xoNrXqWs/fesmssOW70gxFlgcMlYcBaWNPIEWDgLa4W9nkSPmhuOgLnXq9QYgkZ31fhDyLhleCsAg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1347,21 +1321,10 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/scope-manager@8.28.0':
-    resolution: {integrity: sha512-u2oITX3BJwzWCapoZ/pXw6BCOl8rJP4Ij/3wPoGvY8XwvXflOzd1kLrDUUUAIEdJSFh+ASwdTHqtan9xSg8buw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.30.1':
     resolution: {integrity: sha512-+C0B6ChFXZkuaNDl73FJxRYT0G7ufVPOSQkqkpM/U198wUwUFOtgo1k/QzFh1KjpBitaK7R1tgjVz6o9HmsRPg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.28.0':
-    resolution: {integrity: sha512-oRoXu2v0Rsy/VoOGhtWrOKDiIehvI+YNrDk5Oqj40Mwm0Yt01FC/Q7nFqg088d3yAsR1ZcZFVfPCTTFCe/KPwg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/type-utils@8.30.1':
     resolution: {integrity: sha512-64uBF76bfQiJyHgZISC7vcNz3adqQKIccVoKubyQcOnNcdJBvYOILV1v22Qhsw3tw3VQu5ll8ND6hycgAR5fEA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1369,33 +1332,16 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/types@8.28.0':
-    resolution: {integrity: sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.30.1':
     resolution: {integrity: sha512-81KawPfkuulyWo5QdyG/LOKbspyyiW+p4vpn4bYO7DM/hZImlVnFwrpCTnmNMOt8CvLRr5ojI9nU1Ekpw4RcEw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.28.0':
-    resolution: {integrity: sha512-H74nHEeBGeklctAVUvmDkxB1mk+PAZ9FiOMPFncdqeRBXxk1lWSYraHw8V12b7aa6Sg9HOBNbGdSHobBPuQSuA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/typescript-estree@8.30.1':
     resolution: {integrity: sha512-kQQnxymiUy9tTb1F2uep9W6aBiYODgq5EMSk6Nxh4Z+BDUoYUSa029ISs5zTzKBFnexQEh71KqwjKnRz58lusQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@8.28.0':
-    resolution: {integrity: sha512-OELa9hbTYciYITqgurT1u/SzpQVtDLmQMFzy/N8pQE+tefOyCWT79jHsav294aTqV1q1u+VzqDGbuujvRYaeSQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/utils@8.30.1':
     resolution: {integrity: sha512-T/8q4R9En2tcEsWPQgB5BQ0XJVOtfARcUvOa8yJP3fh9M/mXraLxZrkCfGb6ChrO/V3W+Xbd04RacUEqk1CFEQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1403,10 +1349,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/visitor-keys@8.28.0':
-    resolution: {integrity: sha512-hbn8SZ8w4u2pRwgQ1GlUrPKE+t2XvcCW5tTRF7j6SMYIuYG37XuzIW44JCZPa36evi0Oy2SnM664BlIaAuQcvg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.30.1':
     resolution: {integrity: sha512-aEhgas7aJ6vZnNFC7K4/vMGDGyOiqWcYZPpIWrTKuTAlsvDNKy2GFDqh9smL+iq069ZvR0YzEeq0B8NJlLzjFA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1414,11 +1356,11 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  '@vitest/expect@3.0.9':
-    resolution: {integrity: sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==}
+  '@vitest/expect@3.1.1':
+    resolution: {integrity: sha512-q/zjrW9lgynctNbwvFtQkGK9+vvHA5UzVi2V8APrp1C6fG6/MuYYkmlx4FubuqLycCeSdHD5aadWfua/Vr0EUA==}
 
-  '@vitest/mocker@3.0.9':
-    resolution: {integrity: sha512-ryERPIBOnvevAkTq+L1lD+DTFBRcjueL9lOUfXsLfwP92h4e+Heb+PjiqS3/OURWPtywfafK0kj++yDFjWUmrA==}
+  '@vitest/mocker@3.1.1':
+    resolution: {integrity: sha512-bmpJJm7Y7i9BBELlLuuM1J1Q6EQ6K5Ye4wcyOpOMXMcePYKSIYlpcrCm4l/O6ja4VJA5G2aMJiuZkZdnxlC3SA==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^5.0.0 || ^6.0.0
@@ -1428,25 +1370,25 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@3.0.9':
-    resolution: {integrity: sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==}
+  '@vitest/pretty-format@3.1.1':
+    resolution: {integrity: sha512-dg0CIzNx+hMMYfNmSqJlLSXEmnNhMswcn3sXO7Tpldr0LiGmg3eXdLLhwkv2ZqgHb/d5xg5F7ezNFRA1fA13yA==}
 
-  '@vitest/runner@3.0.9':
-    resolution: {integrity: sha512-NX9oUXgF9HPfJSwl8tUZCMP1oGx2+Sf+ru6d05QjzQz4OwWg0psEzwY6VexP2tTHWdOkhKHUIZH+fS6nA7jfOw==}
+  '@vitest/runner@3.1.1':
+    resolution: {integrity: sha512-X/d46qzJuEDO8ueyjtKfxffiXraPRfmYasoC4i5+mlLEJ10UvPb0XH5M9C3gWuxd7BAQhpK42cJgJtq53YnWVA==}
 
-  '@vitest/snapshot@3.0.9':
-    resolution: {integrity: sha512-AiLUiuZ0FuA+/8i19mTYd+re5jqjEc2jZbgJ2up0VY0Ddyyxg/uUtBDpIFAy4uzKaQxOW8gMgBdAJJ2ydhu39A==}
+  '@vitest/snapshot@3.1.1':
+    resolution: {integrity: sha512-bByMwaVWe/+1WDf9exFxWWgAixelSdiwo2p33tpqIlM14vW7PRV5ppayVXtfycqze4Qhtwag5sVhX400MLBOOw==}
 
-  '@vitest/spy@3.0.9':
-    resolution: {integrity: sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==}
+  '@vitest/spy@3.1.1':
+    resolution: {integrity: sha512-+EmrUOOXbKzLkTDwlsc/xrwOlPDXyVk3Z6P6K4oiCndxz7YLpp/0R0UsWVOKT0IXWjjBJuSMk6D27qipaupcvQ==}
 
-  '@vitest/ui@3.0.9':
-    resolution: {integrity: sha512-FpZD4aIv/qNpwkV3XbLV6xldWFHMgoNWAJEgg5GmpObmAOLAErpYjew9dDwXdYdKOS3iZRKdwI+P3JOJcYeUBg==}
+  '@vitest/ui@3.1.1':
+    resolution: {integrity: sha512-2HpiRIYg3dlvAJBV9RtsVswFgUSJK4Sv7QhpxoP0eBGkYwzGIKP34PjaV00AULQi9Ovl6LGyZfsetxDWY5BQdQ==}
     peerDependencies:
-      vitest: 3.0.9
+      vitest: 3.1.1
 
-  '@vitest/utils@3.0.9':
-    resolution: {integrity: sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==}
+  '@vitest/utils@3.1.1':
+    resolution: {integrity: sha512-1XIjflyaU2k3HMArJ50bwSh3wKWPD6Q47wz/NUSmRV0zNywPc4w79ARjg/i/aNINHwA+mIALhUVqD9/aUvZNgg==}
 
   '@vue/compiler-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
@@ -1487,8 +1429,8 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn@8.14.1:
-    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -1573,9 +1515,6 @@ packages:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
-  asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-
   autolinker@3.16.2:
     resolution: {integrity: sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==}
 
@@ -1621,16 +1560,16 @@ packages:
     resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
     engines: {node: '>= 0.4'}
 
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+  call-bound@1.0.3:
+    resolution: {integrity: sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==}
     engines: {node: '>= 0.4'}
 
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001707:
-    resolution: {integrity: sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==}
+  caniuse-lite@1.0.30001701:
+    resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1682,10 +1621,6 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -1902,10 +1837,6 @@ packages:
   delaunator@5.0.1:
     resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
 
-  delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -1941,8 +1872,8 @@ packages:
   echarts@5.6.0:
     resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
 
-  electron-to-chromium@1.5.128:
-    resolution: {integrity: sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ==}
+  electron-to-chromium@1.5.107:
+    resolution: {integrity: sha512-dJr1o6yCntRkXElnhsHh1bAV19bo/hKyFf7tCcWgpXbuFIF0Lakjgqv5LRfSDaNzAII8Fnxg2tqgHkgCvxdbxw==}
 
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
@@ -1969,12 +1900,8 @@ packages:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
-  es-set-tostringtag@2.1.0:
-    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
-    engines: {node: '>= 0.4'}
-
-  esbuild@0.25.1:
-    resolution: {integrity: sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==}
+  esbuild@0.25.2:
+    resolution: {integrity: sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1986,20 +1913,14 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-compat-utils@0.6.4:
-    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      eslint: '>=6.0.0'
-
-  eslint-config-prettier@10.1.1:
-    resolution: {integrity: sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==}
+  eslint-config-prettier@10.1.2:
+    resolution: {integrity: sha512-Epgp/EofAUeEpIdZkW60MHKvPyru1ruQJxPL+WIycnaPApuseK0Zpkrh/FwL9oIpQvIhJwV7ptOy0DWUjTlCiA==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-plugin-svelte@3.3.3:
-    resolution: {integrity: sha512-imzGqIgWbfsb/CR14d3k3M8MiVNGet+l9mjPhvo1Rm0Nxi0rNn4/eELqyR8FWlgKBMlGkOp2kshRJm0xpxNfHQ==}
+  eslint-plugin-svelte@3.5.1:
+    resolution: {integrity: sha512-Qn1slddZHfqYiDO6IN8/iN3YL+VuHlgYjm30FT+hh0Jf/TX0jeZMTJXQMajFm5f6f6hURi+XO8P+NPYD+T4jkg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.1 || ^9.0.0
@@ -2020,8 +1941,8 @@ packages:
     resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.23.0:
-    resolution: {integrity: sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==}
+  eslint@9.24.0:
+    resolution: {integrity: sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -2046,8 +1967,8 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
-  esrap@1.4.5:
-    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+  esrap@1.4.6:
+    resolution: {integrity: sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -2071,8 +1992,8 @@ packages:
     resolution: {integrity: sha512-9jgfSCa3dmEme2ES3mPByGXfgZ87VbP97tng1G2nWwWx6bV2nYxm2AWCrbQjXToSe+yYlqaZNtxffR9IeQr95g==}
     engines: {node: '>=14.18'}
 
-  expect-type@1.2.0:
-    resolution: {integrity: sha512-80F22aiJ3GLyVnS/B3HzgR6RelZVumzj9jkL0Rhz4h0xYbNW9PjlQz5h3J/SShErbXBc295vseR4/MIbVmUbeA==}
+  expect-type@1.2.1:
+    resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
     engines: {node: '>=12.0.0'}
 
   fast-deep-equal@3.1.3:
@@ -2128,10 +2049,6 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
-  form-data@4.0.2:
-    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
-    engines: {node: '>= 6'}
-
   forwarded-parse@2.1.2:
     resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
 
@@ -2273,15 +2190,15 @@ packages:
     resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
     engines: {node: '>= 4'}
 
-  immutable@5.1.1:
-    resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==}
+  immutable@5.0.3:
+    resolution: {integrity: sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==}
 
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-in-the-middle@1.13.1:
-    resolution: {integrity: sha512-k2V9wNm9B+ysuelDTHjI9d5KPc4l8zAZTGqj+pcynvWkypZd857ryzN8jNC7Pg2YZXNMJcHRPpaDyCBbNyVRpA==}
+  import-in-the-middle@1.13.0:
+    resolution: {integrity: sha512-YG86SYDtrL/Yu8JgfWb7kjQ0myLeT1whw6fs/ZHFkXFcbk9zJU9lOCsSJHpvaPumU11nN3US7NW6x1YTk+HrUA==}
 
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
@@ -2401,8 +2318,8 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsdom@26.0.0:
-    resolution: {integrity: sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw==}
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
     engines: {node: '>=18'}
     peerDependencies:
       canvas: ^3.0.0
@@ -2473,8 +2390,8 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  luxon@3.6.0:
-    resolution: {integrity: sha512-WE7p0p7W1xji9qxkLYsvcIxZyfP48GuFrWIBQZIsbjCyf65dG1rv4n83HcOyEyhvzxJCrUoObCRNFgRNIQ5KNA==}
+  luxon@3.5.0:
+    resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
     engines: {node: '>=12'}
 
   lz-string@1.5.0:
@@ -2528,14 +2445,6 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -2576,13 +2485,13 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+  nanoid@3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -2616,8 +2525,8 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  nwsapi@2.2.20:
-    resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
+  nwsapi@2.2.16:
+    resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
@@ -2686,8 +2595,8 @@ packages:
     resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
     engines: {node: '>=4.0.0'}
 
-  pg-protocol@1.8.0:
-    resolution: {integrity: sha512-jvuYlEkL03NRvOoyoRktBK7+qU5kOvlAwvmrH8sr3wbLrOdVWsRxQfz8mMy9sZFsqJ1hEWNfdWKI4SAmoL+j7g==}
+  pg-protocol@1.7.1:
+    resolution: {integrity: sha512-gjTHWGYWsEgy9MsY0Gp6ZJxV24IjDqdpTW7Eh0x+WfJLFsm/TJx1MzL6T0D88mBvkpxotCQ6TwW6N+Kko7lhgQ==}
 
   pg-types@2.2.0:
     resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
@@ -2837,8 +2746,8 @@ packages:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
-  recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+  recast@0.23.10:
+    resolution: {integrity: sha512-mbCmRMJUKCJ1h41V0cu2C26ULBURwuoZ34C9rChjcDaeJ/4Kv5al3O2HPwTs2m0wQ1vGhMY+tguhzU1aE8md1A==}
     engines: {node: '>= 4'}
 
   redent@3.0.0:
@@ -2886,8 +2795,8 @@ packages:
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
-  rollup@4.37.0:
-    resolution: {integrity: sha512-iAtQy/L4QFU+rTJ1YUjXqJOJzuwEghqWzCEYD2FEghT7Gsy1VdABntrO4CLopA5IkflTyqNiLNwPcOJ3S7UKLg==}
+  rollup@4.40.0:
+    resolution: {integrity: sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -2911,8 +2820,8 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.86.0:
-    resolution: {integrity: sha512-zV8vGUld/+mP4KbMLJMX7TyGCuUp7hnkOScgCMsWuHtns8CWBoz+vmEhoGMXsaJrbUP8gj+F1dLvVe79sK8UdA==}
+  sass@1.86.3:
+    resolution: {integrity: sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -3026,8 +2935,8 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.8.1:
-    resolution: {integrity: sha512-vj5lIj3Mwf9D79hBkltk5qmkFI+biIKWS2IBxEyEU3AX1tUf7AoL8nSazCOiiqQsGKIq01SClsKEzweu34uwvA==}
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
@@ -3055,8 +2964,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-check@4.1.5:
-    resolution: {integrity: sha512-Gb0T2IqBNe1tLB9EB1Qh+LOe+JB8wt2/rNBDGvkxQVvk8vNeAoG+vZgFB/3P5+zC7RWlyBlzm9dVjZFph/maIg==}
+  svelte-check@4.1.6:
+    resolution: {integrity: sha512-P7w/6tdSfk3zEVvfsgrp3h3DFC75jCdZjTQvgGJtjPORs1n7/v2VMPIoty3PWv7jnfEm3x0G/p9wH4pecTb0Wg==}
     engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
@@ -3068,8 +2977,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  svelte-eslint-parser@1.1.1:
-    resolution: {integrity: sha512-QLVGPIMDettl30qRHXU2VrPvVJKG8GsGstye7n8rFbEiu3gEARksuQg9Xu4GzubNxhGNM8stfBZkhyMbBQmjFA==}
+  svelte-eslint-parser@1.1.2:
+    resolution: {integrity: sha512-vqFBRamDKo1l70KMfxxXj1/0Cco5TfMDnqaAjgz6D8PyoMhfMcDOLRkAwPg8WkMyZjMtQL3wW66TZ0x59iqO2w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
@@ -3132,8 +3041,8 @@ packages:
     resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
     engines: {node: '>=16'}
 
-  svelte@5.25.3:
-    resolution: {integrity: sha512-J9rcZ/xVJonAoESqVGHHZhrNdVbrCfkdB41BP6eiwHMoFShD9it3yZXApVYMHdGfCshBsZCKsajwJeBbS/M1zg==}
+  svelte@5.27.0:
+    resolution: {integrity: sha512-Uai13Ydt1ZE+bUHme6b9U38PCYVNCqBRoBMkUKbFbKiD7kHWjdUUrklYAQZJxyKK81qII4mrBwe/YmvEMSlC9w==}
     engines: {node: '>=18'}
 
   swr-store@0.10.6:
@@ -3193,11 +3102,11 @@ packages:
   tippy.js@6.3.7:
     resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
 
-  tldts-core@6.1.85:
-    resolution: {integrity: sha512-DTjUVvxckL1fIoPSb3KE7ISNtkWSawZdpfxGxwiIrZoO6EbHVDXXUIlIuWympPaeS+BLGyggozX/HTMsRAdsoA==}
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
 
-  tldts@6.1.85:
-    resolution: {integrity: sha512-gBdZ1RjCSevRPFix/hpaUWeak2/RNUZB4/8frF1r5uYMHjFptkiT0JXIebWvgI/0ZHXvxaUDDJshiA0j6GdL3w==}
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
     hasBin: true
 
   to-regex-range@5.0.1:
@@ -3215,8 +3124,8 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  tr46@5.1.0:
-    resolution: {integrity: sha512-IUWnUK7ADYR5Sl1fZlO1INDUhVhatWl7BtJWsIhwJ0UAK7ilzzIa8uIqOO/aYVWHZPJkKbEL+362wrzoeRF7bw==}
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
 
   trim-lines@3.0.1:
@@ -3251,8 +3160,8 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  typescript@5.8.2:
-    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -3286,8 +3195,8 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  use-sync-external-store@1.5.0:
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+  use-sync-external-store@1.4.0:
+    resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -3300,13 +3209,13 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-node@3.0.9:
-    resolution: {integrity: sha512-w3Gdx7jDcuT9cNn9jExXgOyKmf5UOTb6WMHz8LGAm54eS1Elf5OuBhCxl6zJxGhEeIkgsE1WbHuoL0mj/UXqXg==}
+  vite-node@3.1.1:
+    resolution: {integrity: sha512-V+IxPAE2FvXpTCHXyNem0M+gWm6J7eRyWPR6vYoG/Gl+IscNOjXzztUhimQgTxaAoUoj40Qqimaa0NLIOOAH4w==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
-  vite@6.2.3:
-    resolution: {integrity: sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==}
+  vite@6.3.1:
+    resolution: {integrity: sha512-kkzzkqtMESYklo96HKKPE5KKLkC1amlsqt+RjFMlX2AvbRB/0wghap19NdBxxwGZ+h/C6DLCrcEphPIItlGrRQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -3353,16 +3262,16 @@ packages:
       vite:
         optional: true
 
-  vitest@3.0.9:
-    resolution: {integrity: sha512-BbcFDqNyBlfSpATmTtXOAOj71RNKDDvjBM/uPfnxxVGrG+FSH2RQIwgeEngTaTkuU/h0ScFvf+tRcKfYXzBybQ==}
+  vitest@3.1.1:
+    resolution: {integrity: sha512-kiZc/IYmKICeBAZr9DQ5rT7/6bD9G7uqQEki4fxazi1jdVl2mWGzedtBs5s6llz59yQhVb7FFY2MbHzHCnT79Q==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/debug': ^4.1.12
       '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 3.0.9
-      '@vitest/ui': 3.0.9
+      '@vitest/browser': 3.1.1
+      '@vitest/ui': 3.1.1
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -3430,8 +3339,8 @@ packages:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
 
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+  which-typed-array@1.1.18:
+    resolution: {integrity: sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==}
     engines: {node: '>= 0.4'}
 
   which@2.0.2:
@@ -3534,15 +3443,15 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c(svelte@5.27.0)':
     dependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.27.0)':
     dependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
@@ -3553,23 +3462,23 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c(svelte@5.27.0)
       '@floating-ui/dom': 1.6.13
-      '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
-      '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
+      '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.27.0))(svelte@5.27.0)
+      '@melt-ui/svelte': 0.86.6(svelte@5.27.0)
       ansicolor: 2.0.3
       d3: 7.9.0
       fuse.js: 7.1.0
       pretty-bytes: 6.1.1
       react-dom: 18.3.1(react@18.3.1)
       shiki: 1.29.2
-      svelte: 5.25.3
-      svelte-motion: 0.12.2(svelte@5.25.3)
-      svelte-sonner: 0.3.28(svelte@5.25.3)
+      svelte: 5.27.0
+      svelte-motion: 0.12.2(svelte@5.27.0)
+      svelte-sonner: 0.3.28(svelte@5.27.0)
 
-  '@asamuzakjp/css-color@3.1.1':
+  '@asamuzakjp/css-color@3.1.2':
     dependencies:
       '@csstools/css-calc': 2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-color-parser': 3.0.8(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
@@ -3585,18 +3494,18 @@ snapshots:
 
   '@babel/compat-data@7.26.8': {}
 
-  '@babel/core@7.26.10':
+  '@babel/core@7.26.9':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.27.0
-      '@babel/helper-compilation-targets': 7.27.0
-      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.10)
-      '@babel/helpers': 7.27.0
-      '@babel/parser': 7.27.0
-      '@babel/template': 7.27.0
-      '@babel/traverse': 7.27.0
-      '@babel/types': 7.27.0
+      '@babel/generator': 7.26.9
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
+      '@babel/helpers': 7.26.9
+      '@babel/parser': 7.26.9
+      '@babel/template': 7.26.9
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
       convert-source-map: 2.0.0
       debug: 4.4.0
       gensync: 1.0.0-beta.2
@@ -3605,15 +3514,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.27.0':
+  '@babel/generator@7.26.9':
     dependencies:
-      '@babel/parser': 7.27.0
-      '@babel/types': 7.27.0
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 3.1.0
 
-  '@babel/helper-compilation-targets@7.27.0':
+  '@babel/helper-compilation-targets@7.26.5':
     dependencies:
       '@babel/compat-data': 7.26.8
       '@babel/helper-validator-option': 7.25.9
@@ -3623,17 +3532,17 @@ snapshots:
 
   '@babel/helper-module-imports@7.25.9':
     dependencies:
-      '@babel/traverse': 7.27.0
-      '@babel/types': 7.27.0
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.10)':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.9)':
     dependencies:
-      '@babel/core': 7.26.10
+      '@babel/core': 7.26.9
       '@babel/helper-module-imports': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
-      '@babel/traverse': 7.27.0
+      '@babel/traverse': 7.26.9
     transitivePeerDependencies:
       - supports-color
 
@@ -3643,38 +3552,38 @@ snapshots:
 
   '@babel/helper-validator-option@7.25.9': {}
 
-  '@babel/helpers@7.27.0':
+  '@babel/helpers@7.26.9':
     dependencies:
-      '@babel/template': 7.27.0
-      '@babel/types': 7.27.0
+      '@babel/template': 7.26.9
+      '@babel/types': 7.26.9
 
-  '@babel/parser@7.27.0':
+  '@babel/parser@7.26.9':
     dependencies:
-      '@babel/types': 7.27.0
+      '@babel/types': 7.26.9
 
-  '@babel/runtime@7.27.0':
+  '@babel/runtime@7.26.9':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/template@7.27.0':
+  '@babel/template@7.26.9':
     dependencies:
       '@babel/code-frame': 7.26.2
-      '@babel/parser': 7.27.0
-      '@babel/types': 7.27.0
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
 
-  '@babel/traverse@7.27.0':
+  '@babel/traverse@7.26.9':
     dependencies:
       '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.27.0
-      '@babel/parser': 7.27.0
-      '@babel/template': 7.27.0
-      '@babel/types': 7.27.0
+      '@babel/generator': 7.26.9
+      '@babel/parser': 7.26.9
+      '@babel/template': 7.26.9
+      '@babel/types': 7.26.9
       debug: 4.4.0
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.27.0':
+  '@babel/types@7.26.9':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
@@ -3699,93 +3608,93 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.3': {}
 
-  '@esbuild/aix-ppc64@0.25.1':
+  '@esbuild/aix-ppc64@0.25.2':
     optional: true
 
-  '@esbuild/android-arm64@0.25.1':
+  '@esbuild/android-arm64@0.25.2':
     optional: true
 
-  '@esbuild/android-arm@0.25.1':
+  '@esbuild/android-arm@0.25.2':
     optional: true
 
-  '@esbuild/android-x64@0.25.1':
+  '@esbuild/android-x64@0.25.2':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.1':
+  '@esbuild/darwin-arm64@0.25.2':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.1':
+  '@esbuild/darwin-x64@0.25.2':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.1':
+  '@esbuild/freebsd-arm64@0.25.2':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.1':
+  '@esbuild/freebsd-x64@0.25.2':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.1':
+  '@esbuild/linux-arm64@0.25.2':
     optional: true
 
-  '@esbuild/linux-arm@0.25.1':
+  '@esbuild/linux-arm@0.25.2':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.1':
+  '@esbuild/linux-ia32@0.25.2':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.1':
+  '@esbuild/linux-loong64@0.25.2':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.1':
+  '@esbuild/linux-mips64el@0.25.2':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.1':
+  '@esbuild/linux-ppc64@0.25.2':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.1':
+  '@esbuild/linux-riscv64@0.25.2':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.1':
+  '@esbuild/linux-s390x@0.25.2':
     optional: true
 
-  '@esbuild/linux-x64@0.25.1':
+  '@esbuild/linux-x64@0.25.2':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.1':
+  '@esbuild/netbsd-arm64@0.25.2':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.1':
+  '@esbuild/netbsd-x64@0.25.2':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.1':
+  '@esbuild/openbsd-arm64@0.25.2':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.1':
+  '@esbuild/openbsd-x64@0.25.2':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.1':
+  '@esbuild/sunos-x64@0.25.2':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.1':
+  '@esbuild/win32-arm64@0.25.2':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.1':
+  '@esbuild/win32-ia32@0.25.2':
     optional: true
 
-  '@esbuild/win32-x64@0.25.1':
+  '@esbuild/win32-x64@0.25.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.5.1(eslint@9.23.0)':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.24.0)':
     dependencies:
-      eslint: 9.23.0
+      eslint: 9.24.0
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/compat@1.2.7(eslint@9.23.0)':
+  '@eslint/compat@1.2.8(eslint@9.24.0)':
     optionalDependencies:
-      eslint: 9.23.0
+      eslint: 9.24.0
 
-  '@eslint/config-array@0.19.2':
+  '@eslint/config-array@0.20.0':
     dependencies:
       '@eslint/object-schema': 2.1.6
       debug: 4.4.0
@@ -3793,12 +3702,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.2.0': {}
+  '@eslint/config-helpers@0.2.1': {}
 
   '@eslint/core@0.12.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/core@0.13.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
@@ -3813,15 +3726,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.23.0': {}
-
   '@eslint/js@9.24.0': {}
 
   '@eslint/object-schema@2.1.6': {}
 
-  '@eslint/plugin-kit@0.2.7':
+  '@eslint/plugin-kit@0.2.8':
     dependencies:
-      '@eslint/core': 0.12.0
+      '@eslint/core': 0.13.0
       levn: 0.4.1
 
   '@floating-ui/core@1.6.9':
@@ -3869,21 +3780,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.5(svelte@5.25.3))(svelte@5.25.3)':
+  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.6(svelte@5.27.0))(svelte@5.27.0)':
     dependencies:
-      '@melt-ui/svelte': 0.86.5(svelte@5.25.3)
+      '@melt-ui/svelte': 0.86.6(svelte@5.27.0)
       estree-walker: 3.0.3
       magic-string: 0.30.17
-      svelte: 5.25.3
+      svelte: 5.27.0
 
-  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)':
-    dependencies:
-      '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
-      estree-walker: 3.0.3
-      magic-string: 0.30.17
-      svelte: 5.25.3
-
-  '@melt-ui/svelte@0.86.5(svelte@5.25.3)':
+  '@melt-ui/svelte@0.86.6(svelte@5.27.0)':
     dependencies:
       '@floating-ui/core': 1.6.9
       '@floating-ui/dom': 1.6.13
@@ -3891,17 +3795,7 @@ snapshots:
       dequal: 2.0.3
       focus-trap: 7.6.4
       nanoid: 5.1.5
-      svelte: 5.25.3
-
-  '@melt-ui/svelte@0.86.6(svelte@5.25.3)':
-    dependencies:
-      '@floating-ui/core': 1.6.9
-      '@floating-ui/dom': 1.6.13
-      '@internationalized/date': 3.7.0
-      dequal: 2.0.3
-      focus-trap: 7.6.4
-      nanoid: 5.1.5
-      svelte: 5.25.3
+      svelte: 5.27.0
 
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
@@ -4151,7 +4045,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.53.0
       '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.13.1
+      import-in-the-middle: 1.13.0
       require-in-the-middle: 7.5.2
       semver: 7.7.1
       shimmer: 1.2.1
@@ -4163,7 +4057,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.57.1
       '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.13.1
+      import-in-the-middle: 1.13.0
       require-in-the-middle: 7.5.2
       semver: 7.7.1
       shimmer: 1.2.1
@@ -4175,7 +4069,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/api-logs': 0.57.2
       '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.13.1
+      import-in-the-middle: 1.13.0
       require-in-the-middle: 7.5.2
       semver: 7.7.1
       shimmer: 1.2.1
@@ -4285,64 +4179,64 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/rollup-android-arm-eabi@4.37.0':
+  '@rollup/rollup-android-arm-eabi@4.40.0':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.37.0':
+  '@rollup/rollup-android-arm64@4.40.0':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.37.0':
+  '@rollup/rollup-darwin-arm64@4.40.0':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.37.0':
+  '@rollup/rollup-darwin-x64@4.40.0':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.37.0':
+  '@rollup/rollup-freebsd-arm64@4.40.0':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.37.0':
+  '@rollup/rollup-freebsd-x64@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.37.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.37.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.37.0':
+  '@rollup/rollup-linux-arm64-gnu@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.37.0':
+  '@rollup/rollup-linux-arm64-musl@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.37.0':
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.37.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.37.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.37.0':
+  '@rollup/rollup-linux-riscv64-musl@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.37.0':
+  '@rollup/rollup-linux-s390x-gnu@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.37.0':
+  '@rollup/rollup-linux-x64-gnu@4.40.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.37.0':
+  '@rollup/rollup-linux-x64-musl@4.40.0':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.37.0':
+  '@rollup/rollup-win32-arm64-msvc@4.40.0':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.37.0':
+  '@rollup/rollup-win32-ia32-msvc@4.40.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.37.0':
+  '@rollup/rollup-win32-x64-msvc@4.40.0':
     optional: true
 
   '@sentry-internal/browser-utils@8.55.0':
@@ -4375,9 +4269,9 @@ snapshots:
 
   '@sentry/bundler-plugin-core@2.22.6':
     dependencies:
-      '@babel/core': 7.26.10
+      '@babel/core': 7.26.9
       '@sentry/babel-plugin-component-annotate': 2.22.6
-      '@sentry/cli': 2.43.0
+      '@sentry/cli': 2.42.2
       dotenv: 16.4.7
       find-up: 5.0.0
       glob: 9.3.5
@@ -4387,31 +4281,28 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.43.0':
+  '@sentry/cli-darwin@2.42.2':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.43.0':
+  '@sentry/cli-linux-arm64@2.42.2':
     optional: true
 
-  '@sentry/cli-linux-arm@2.43.0':
+  '@sentry/cli-linux-arm@2.42.2':
     optional: true
 
-  '@sentry/cli-linux-i686@2.43.0':
+  '@sentry/cli-linux-i686@2.42.2':
     optional: true
 
-  '@sentry/cli-linux-x64@2.43.0':
+  '@sentry/cli-linux-x64@2.42.2':
     optional: true
 
-  '@sentry/cli-win32-arm64@2.43.0':
+  '@sentry/cli-win32-i686@2.42.2':
     optional: true
 
-  '@sentry/cli-win32-i686@2.43.0':
+  '@sentry/cli-win32-x64@2.42.2':
     optional: true
 
-  '@sentry/cli-win32-x64@2.43.0':
-    optional: true
-
-  '@sentry/cli@2.43.0':
+  '@sentry/cli@2.42.2':
     dependencies:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0
@@ -4419,14 +4310,13 @@ snapshots:
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.43.0
-      '@sentry/cli-linux-arm': 2.43.0
-      '@sentry/cli-linux-arm64': 2.43.0
-      '@sentry/cli-linux-i686': 2.43.0
-      '@sentry/cli-linux-x64': 2.43.0
-      '@sentry/cli-win32-arm64': 2.43.0
-      '@sentry/cli-win32-i686': 2.43.0
-      '@sentry/cli-win32-x64': 2.43.0
+      '@sentry/cli-darwin': 2.42.2
+      '@sentry/cli-linux-arm': 2.42.2
+      '@sentry/cli-linux-arm64': 2.42.2
+      '@sentry/cli-linux-i686': 2.42.2
+      '@sentry/cli-linux-x64': 2.42.2
+      '@sentry/cli-win32-i686': 2.42.2
+      '@sentry/cli-win32-x64': 2.42.2
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4469,7 +4359,7 @@ snapshots:
       '@prisma/instrumentation': 5.22.0
       '@sentry/core': 8.55.0
       '@sentry/opentelemetry': 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)
-      import-in-the-middle: 1.13.1
+      import-in-the-middle: 1.13.0
     transitivePeerDependencies:
       - supports-color
 
@@ -4483,26 +4373,26 @@ snapshots:
       '@opentelemetry/semantic-conventions': 1.30.0
       '@sentry/core': 8.55.0
 
-  '@sentry/svelte@8.55.0(svelte@5.25.3)':
+  '@sentry/svelte@8.55.0(svelte@5.27.0)':
     dependencies:
       '@sentry/browser': 8.55.0
       '@sentry/core': 8.55.0
       magic-string: 0.30.7
-      svelte: 5.25.3
+      svelte: 5.27.0
 
-  '@sentry/sveltekit@8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sentry/sveltekit@8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))':
     dependencies:
       '@sentry/core': 8.55.0
       '@sentry/node': 8.55.0
       '@sentry/opentelemetry': 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)
-      '@sentry/svelte': 8.55.0(svelte@5.25.3)
+      '@sentry/svelte': 8.55.0(svelte@5.27.0)
       '@sentry/vite-plugin': 2.22.6
-      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/kit': 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       magic-string: 0.30.7
       magicast: 0.2.8
       sorcery: 1.0.0
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
     transitivePeerDependencies:
       - '@opentelemetry/api'
       - '@opentelemetry/context-async-hooks'
@@ -4559,17 +4449,17 @@ snapshots:
 
   '@stripe/stripe-js@3.5.0': {}
 
-  '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.1)':
+  '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.0)':
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.14.0
 
-  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))':
+  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))':
     dependencies:
-      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/kit': 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
 
-  '@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4581,28 +4471,28 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
-      svelte: 5.25.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      svelte: 5.27.0
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       debug: 4.4.0
-      svelte: 5.25.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      svelte: 5.27.0
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)))(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.25.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
-      vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      svelte: 5.27.0
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
+      vitefu: 1.0.6(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
     transitivePeerDependencies:
       - supports-color
 
@@ -4613,7 +4503,7 @@ snapshots:
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.26.9
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       chalk: 4.1.2
@@ -4631,13 +4521,13 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.7(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)':
+  '@testing-library/svelte@5.2.7(svelte@5.27.0)(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))(vitest@3.1.1)':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.25.3
+      svelte: 5.27.0
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
-      vitest: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0)
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
+      vitest: 3.1.1(@types/node@22.13.5)(@vitest/ui@3.1.1)(jsdom@26.1.0)(sass@1.86.3)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
     dependencies:
@@ -4647,7 +4537,7 @@ snapshots:
 
   '@types/connect@3.4.36':
     dependencies:
-      '@types/node': 22.13.14
+      '@types/node': 22.13.5
 
   '@types/cookie@0.6.0': {}
 
@@ -4671,9 +4561,9 @@ snapshots:
 
   '@types/mysql@2.15.26':
     dependencies:
-      '@types/node': 22.13.14
+      '@types/node': 22.13.5
 
-  '@types/node@22.13.14':
+  '@types/node@22.13.5':
     dependencies:
       undici-types: 6.20.0
 
@@ -4683,15 +4573,15 @@ snapshots:
 
   '@types/pg@8.6.1':
     dependencies:
-      '@types/node': 22.13.14
-      pg-protocol: 1.8.0
+      '@types/node': 22.13.5
+      pg-protocol: 1.7.1
       pg-types: 2.2.0
 
   '@types/prismjs@1.26.5': {}
 
   '@types/prop-types@15.7.14': {}
 
-  '@types/react@18.3.20':
+  '@types/react@18.3.18':
     dependencies:
       '@types/prop-types': 15.7.14
       csstype: 3.1.3
@@ -4702,119 +4592,58 @@ snapshots:
 
   '@types/tedious@4.0.14':
     dependencies:
-      '@types/node': 22.13.14
+      '@types/node': 22.13.5
 
   '@types/unist@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)':
+  '@typescript-eslint/eslint-plugin@8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.24.0)(typescript@5.8.3))(eslint@9.24.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
-      '@typescript-eslint/scope-manager': 8.28.0
-      '@typescript-eslint/type-utils': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
-      '@typescript-eslint/visitor-keys': 8.28.0
-      eslint: 9.23.0
-      graphemer: 1.4.0
-      ignore: 5.3.2
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.8.2)
-      typescript: 5.8.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/eslint-plugin@8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/parser': 8.30.1(eslint@9.24.0)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.30.1
-      '@typescript-eslint/type-utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/type-utils': 8.30.1(eslint@9.24.0)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.30.1(eslint@9.24.0)(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.30.1
-      eslint: 9.23.0
+      eslint: 9.24.0
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.8.2)
-      typescript: 5.8.2
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.28.0(eslint@9.23.0)(typescript@5.8.2)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.28.0
-      '@typescript-eslint/types': 8.28.0
-      '@typescript-eslint/typescript-estree': 8.28.0(typescript@5.8.2)
-      '@typescript-eslint/visitor-keys': 8.28.0
-      debug: 4.4.0
-      eslint: 9.23.0
-      typescript: 5.8.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.30.1(eslint@9.23.0)(typescript@5.8.2)':
+  '@typescript-eslint/parser@8.30.1(eslint@9.24.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.30.1
       '@typescript-eslint/types': 8.30.1
-      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.2)
+      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.3)
       '@typescript-eslint/visitor-keys': 8.30.1
       debug: 4.4.0
-      eslint: 9.23.0
-      typescript: 5.8.2
+      eslint: 9.24.0
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.28.0':
-    dependencies:
-      '@typescript-eslint/types': 8.28.0
-      '@typescript-eslint/visitor-keys': 8.28.0
-
   '@typescript-eslint/scope-manager@8.30.1':
     dependencies:
       '@typescript-eslint/types': 8.30.1
       '@typescript-eslint/visitor-keys': 8.30.1
 
-  '@typescript-eslint/type-utils@8.28.0(eslint@9.23.0)(typescript@5.8.2)':
+  '@typescript-eslint/type-utils@8.30.1(eslint@9.24.0)(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.28.0(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.28.0(eslint@9.23.0)(typescript@5.8.2)
+      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.30.1(eslint@9.24.0)(typescript@5.8.3)
       debug: 4.4.0
-      eslint: 9.23.0
-      ts-api-utils: 2.1.0(typescript@5.8.2)
-      typescript: 5.8.2
+      eslint: 9.24.0
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.30.1(eslint@9.23.0)(typescript@5.8.2)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
-      debug: 4.4.0
-      eslint: 9.23.0
-      ts-api-utils: 2.1.0(typescript@5.8.2)
-      typescript: 5.8.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.28.0': {}
-
   '@typescript-eslint/types@8.30.1': {}
 
-  '@typescript-eslint/typescript-estree@8.28.0(typescript@5.8.2)':
-    dependencies:
-      '@typescript-eslint/types': 8.28.0
-      '@typescript-eslint/visitor-keys': 8.28.0
-      debug: 4.4.0
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.1
-      ts-api-utils: 2.1.0(typescript@5.8.2)
-      typescript: 5.8.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@8.30.1(typescript@5.8.2)':
+  '@typescript-eslint/typescript-estree@8.30.1(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/types': 8.30.1
       '@typescript-eslint/visitor-keys': 8.30.1
@@ -4823,38 +4652,22 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.1
-      ts-api-utils: 2.1.0(typescript@5.8.2)
-      typescript: 5.8.2
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.28.0(eslint@9.23.0)(typescript@5.8.2)':
+  '@typescript-eslint/utils@8.30.1(eslint@9.24.0)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
-      '@typescript-eslint/scope-manager': 8.28.0
-      '@typescript-eslint/types': 8.28.0
-      '@typescript-eslint/typescript-estree': 8.28.0(typescript@5.8.2)
-      eslint: 9.23.0
-      typescript: 5.8.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.30.1(eslint@9.23.0)(typescript@5.8.2)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.24.0)
       '@typescript-eslint/scope-manager': 8.30.1
       '@typescript-eslint/types': 8.30.1
-      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.2)
-      eslint: 9.23.0
-      typescript: 5.8.2
+      '@typescript-eslint/typescript-estree': 8.30.1(typescript@5.8.3)
+      eslint: 9.24.0
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.28.0':
-    dependencies:
-      '@typescript-eslint/types': 8.28.0
-      eslint-visitor-keys: 4.2.0
-
   '@typescript-eslint/visitor-keys@8.30.1':
     dependencies:
       '@typescript-eslint/types': 8.30.1
@@ -4862,60 +4675,60 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitest/expect@3.0.9':
+  '@vitest/expect@3.1.1':
     dependencies:
-      '@vitest/spy': 3.0.9
-      '@vitest/utils': 3.0.9
+      '@vitest/spy': 3.1.1
+      '@vitest/utils': 3.1.1
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.9(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@vitest/mocker@3.1.1(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))':
     dependencies:
-      '@vitest/spy': 3.0.9
+      '@vitest/spy': 3.1.1
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
 
-  '@vitest/pretty-format@3.0.9':
+  '@vitest/pretty-format@3.1.1':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/runner@3.0.9':
+  '@vitest/runner@3.1.1':
     dependencies:
-      '@vitest/utils': 3.0.9
+      '@vitest/utils': 3.1.1
       pathe: 2.0.3
 
-  '@vitest/snapshot@3.0.9':
+  '@vitest/snapshot@3.1.1':
     dependencies:
-      '@vitest/pretty-format': 3.0.9
+      '@vitest/pretty-format': 3.1.1
       magic-string: 0.30.17
       pathe: 2.0.3
 
-  '@vitest/spy@3.0.9':
+  '@vitest/spy@3.1.1':
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/ui@3.0.9(vitest@3.0.9)':
+  '@vitest/ui@3.1.1(vitest@3.1.1)':
     dependencies:
-      '@vitest/utils': 3.0.9
+      '@vitest/utils': 3.1.1
       fflate: 0.8.2
       flatted: 3.3.3
       pathe: 2.0.3
       sirv: 3.0.1
       tinyglobby: 0.2.12
       tinyrainbow: 2.0.0
-      vitest: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0)
+      vitest: 3.1.1(@types/node@22.13.5)(@vitest/ui@3.1.1)(jsdom@26.1.0)(sass@1.86.3)
 
-  '@vitest/utils@3.0.9':
+  '@vitest/utils@3.1.1':
     dependencies:
-      '@vitest/pretty-format': 3.0.9
+      '@vitest/pretty-format': 3.1.1
       loupe: 3.1.3
       tinyrainbow: 2.0.0
 
   '@vue/compiler-core@3.5.13':
     dependencies:
-      '@babel/parser': 7.27.0
+      '@babel/parser': 7.26.9
       '@vue/shared': 3.5.13
       entities: 4.5.0
       estree-walker: 2.0.2
@@ -4928,7 +4741,7 @@ snapshots:
 
   '@vue/compiler-sfc@3.5.13':
     dependencies:
-      '@babel/parser': 7.27.0
+      '@babel/parser': 7.26.9
       '@vue/compiler-core': 3.5.13
       '@vue/compiler-dom': 3.5.13
       '@vue/compiler-ssr': 3.5.13
@@ -4959,23 +4772,23 @@ snapshots:
       '@vue/shared': 3.5.13
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.2))':
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.8.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.8.3)
 
   '@vue/shared@3.5.13': {}
 
-  acorn-import-attributes@1.9.5(acorn@8.14.1):
+  acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.14.0
 
-  acorn-jsx@5.3.2(acorn@8.14.1):
+  acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.14.0
 
-  acorn@8.14.1: {}
+  acorn@8.14.0: {}
 
   agent-base@6.0.2:
     dependencies:
@@ -4985,20 +4798,20 @@ snapshots:
 
   agent-base@7.1.3: {}
 
-  ai@2.2.37(react@18.3.1)(solid-js@1.9.5)(svelte@5.25.3)(vue@3.5.13(typescript@5.8.2)):
+  ai@2.2.37(react@18.3.1)(solid-js@1.9.5)(svelte@5.27.0)(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       eventsource-parser: 1.0.0
       nanoid: 3.3.6
       solid-swr-store: 0.10.7(solid-js@1.9.5)(swr-store@0.10.6)
-      sswr: 2.0.0(svelte@5.25.3)
+      sswr: 2.0.0(svelte@5.27.0)
       swr: 2.2.0(react@18.3.1)
       swr-store: 0.10.6
-      swrv: 1.0.4(vue@3.5.13(typescript@5.8.2))
+      swrv: 1.0.4(vue@3.5.13(typescript@5.8.3))
     optionalDependencies:
       react: 18.3.1
       solid-js: 1.9.5
-      svelte: 5.25.3
-      vue: 3.5.13(typescript@5.8.2)
+      svelte: 5.27.0
+      vue: 3.5.13(typescript@5.8.3)
 
   ajv@6.12.6:
     dependencies:
@@ -5049,7 +4862,7 @@ snapshots:
 
   array-buffer-byte-length@1.0.2:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       is-array-buffer: 3.0.5
 
   assertion-error@2.0.1: {}
@@ -5058,8 +4871,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  asynckit@0.4.0: {}
-
   autolinker@3.16.2:
     dependencies:
       tslib: 2.8.1
@@ -5089,8 +4900,8 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001707
-      electron-to-chromium: 1.5.128
+      caniuse-lite: 1.0.30001701
+      electron-to-chromium: 1.5.107
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
@@ -5108,14 +4919,14 @@ snapshots:
       get-intrinsic: 1.3.0
       set-function-length: 1.2.2
 
-  call-bound@1.0.4:
+  call-bound@1.0.3:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001707: {}
+  caniuse-lite@1.0.30001701: {}
 
   ccount@2.0.1: {}
 
@@ -5166,8 +4977,8 @@ snapshots:
   code-red@1.0.4:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.7
-      acorn: 8.14.1
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
       estree-walker: 3.0.3
       periscopic: 3.1.0
 
@@ -5177,10 +4988,6 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  combined-stream@1.0.8:
-    dependencies:
-      delayed-stream: 1.0.0
-
   comma-separated-tokens@2.0.3: {}
 
   commander@7.2.0: {}
@@ -5193,7 +5000,7 @@ snapshots:
 
   cron-parser@4.9.0:
     dependencies:
-      luxon: 3.6.0
+      luxon: 3.5.0
 
   cross-spawn@7.0.6:
     dependencies:
@@ -5212,7 +5019,7 @@ snapshots:
 
   cssstyle@4.3.0:
     dependencies:
-      '@asamuzakjp/css-color': 3.1.1
+      '@asamuzakjp/css-color': 3.1.2
       rrweb-cssom: 0.8.0
 
   csstype@3.1.3: {}
@@ -5403,7 +5210,7 @@ snapshots:
       side-channel: 1.1.0
       which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.18
 
   deep-is@0.1.4: {}
 
@@ -5425,8 +5232,6 @@ snapshots:
     dependencies:
       robust-predicates: 3.0.2
 
-  delayed-stream@1.0.0: {}
-
   dequal@2.0.3: {}
 
   detect-libc@1.0.3:
@@ -5457,7 +5262,7 @@ snapshots:
       tslib: 2.3.0
       zrender: 5.6.1
 
-  electron-to-chromium@1.5.128: {}
+  electron-to-chromium@1.5.107: {}
 
   emoji-regex-xs@1.0.0: {}
 
@@ -5485,69 +5290,56 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
 
-  es-set-tostringtag@2.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
-  esbuild@0.25.1:
+  esbuild@0.25.2:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.1
-      '@esbuild/android-arm': 0.25.1
-      '@esbuild/android-arm64': 0.25.1
-      '@esbuild/android-x64': 0.25.1
-      '@esbuild/darwin-arm64': 0.25.1
-      '@esbuild/darwin-x64': 0.25.1
-      '@esbuild/freebsd-arm64': 0.25.1
-      '@esbuild/freebsd-x64': 0.25.1
-      '@esbuild/linux-arm': 0.25.1
-      '@esbuild/linux-arm64': 0.25.1
-      '@esbuild/linux-ia32': 0.25.1
-      '@esbuild/linux-loong64': 0.25.1
-      '@esbuild/linux-mips64el': 0.25.1
-      '@esbuild/linux-ppc64': 0.25.1
-      '@esbuild/linux-riscv64': 0.25.1
-      '@esbuild/linux-s390x': 0.25.1
-      '@esbuild/linux-x64': 0.25.1
-      '@esbuild/netbsd-arm64': 0.25.1
-      '@esbuild/netbsd-x64': 0.25.1
-      '@esbuild/openbsd-arm64': 0.25.1
-      '@esbuild/openbsd-x64': 0.25.1
-      '@esbuild/sunos-x64': 0.25.1
-      '@esbuild/win32-arm64': 0.25.1
-      '@esbuild/win32-ia32': 0.25.1
-      '@esbuild/win32-x64': 0.25.1
+      '@esbuild/aix-ppc64': 0.25.2
+      '@esbuild/android-arm': 0.25.2
+      '@esbuild/android-arm64': 0.25.2
+      '@esbuild/android-x64': 0.25.2
+      '@esbuild/darwin-arm64': 0.25.2
+      '@esbuild/darwin-x64': 0.25.2
+      '@esbuild/freebsd-arm64': 0.25.2
+      '@esbuild/freebsd-x64': 0.25.2
+      '@esbuild/linux-arm': 0.25.2
+      '@esbuild/linux-arm64': 0.25.2
+      '@esbuild/linux-ia32': 0.25.2
+      '@esbuild/linux-loong64': 0.25.2
+      '@esbuild/linux-mips64el': 0.25.2
+      '@esbuild/linux-ppc64': 0.25.2
+      '@esbuild/linux-riscv64': 0.25.2
+      '@esbuild/linux-s390x': 0.25.2
+      '@esbuild/linux-x64': 0.25.2
+      '@esbuild/netbsd-arm64': 0.25.2
+      '@esbuild/netbsd-x64': 0.25.2
+      '@esbuild/openbsd-arm64': 0.25.2
+      '@esbuild/openbsd-x64': 0.25.2
+      '@esbuild/sunos-x64': 0.25.2
+      '@esbuild/win32-arm64': 0.25.2
+      '@esbuild/win32-ia32': 0.25.2
+      '@esbuild/win32-x64': 0.25.2
 
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-compat-utils@0.6.4(eslint@9.23.0):
+  eslint-config-prettier@10.1.2(eslint@9.24.0):
     dependencies:
-      eslint: 9.23.0
-      semver: 7.7.1
+      eslint: 9.24.0
 
-  eslint-config-prettier@10.1.1(eslint@9.23.0):
+  eslint-plugin-svelte@3.5.1(eslint@9.24.0)(svelte@5.27.0):
     dependencies:
-      eslint: 9.23.0
-
-  eslint-plugin-svelte@3.3.3(eslint@9.23.0)(svelte@5.25.3):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.24.0)
       '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 9.23.0
-      eslint-compat-utils: 0.6.4(eslint@9.23.0)
+      eslint: 9.24.0
       esutils: 2.0.3
       known-css-properties: 0.35.0
       postcss: 8.5.3
       postcss-load-config: 3.1.4(postcss@8.5.3)
       postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.7.1
-      svelte-eslint-parser: 1.1.1(svelte@5.25.3)
+      svelte-eslint-parser: 1.1.2(svelte@5.27.0)
     optionalDependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
     transitivePeerDependencies:
       - ts-node
 
@@ -5560,20 +5352,20 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.23.0:
+  eslint@9.24.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.24.0)
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.19.2
-      '@eslint/config-helpers': 0.2.0
+      '@eslint/config-array': 0.20.0
+      '@eslint/config-helpers': 0.2.1
       '@eslint/core': 0.12.0
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.23.0
-      '@eslint/plugin-kit': 0.2.7
+      '@eslint/js': 9.24.0
+      '@eslint/plugin-kit': 0.2.8
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.2
-      '@types/estree': 1.0.7
+      '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
@@ -5604,8 +5396,8 @@ snapshots:
 
   espree@10.3.0:
     dependencies:
-      acorn: 8.14.1
-      acorn-jsx: 5.3.2(acorn@8.14.1)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       eslint-visitor-keys: 4.2.0
 
   esprima@4.0.1: {}
@@ -5614,7 +5406,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.4.5:
+  esrap@1.4.6:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -5628,13 +5420,13 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.7
+      '@types/estree': 1.0.6
 
   esutils@2.0.3: {}
 
   eventsource-parser@1.0.0: {}
 
-  expect-type@1.2.0: {}
+  expect-type@1.2.1: {}
 
   fast-deep-equal@3.1.3: {}
 
@@ -5688,13 +5480,6 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
-  form-data@4.0.2:
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      es-set-tostringtag: 2.1.0
-      mime-types: 2.1.35
-
   forwarded-parse@2.1.2: {}
 
   framesync@6.1.2:
@@ -5837,17 +5622,17 @@ snapshots:
 
   ignore@6.0.2: {}
 
-  immutable@5.1.1: {}
+  immutable@5.0.3: {}
 
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-in-the-middle@1.13.1:
+  import-in-the-middle@1.13.0:
     dependencies:
-      acorn: 8.14.1
-      acorn-import-attributes: 1.9.5(acorn@8.14.1)
+      acorn: 8.14.0
+      acorn-import-attributes: 1.9.5(acorn@8.14.0)
       cjs-module-lexer: 1.4.3
       module-details-from-path: 1.0.3
 
@@ -5867,13 +5652,13 @@ snapshots:
 
   is-arguments@1.2.0:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       has-tostringtag: 1.0.2
 
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       get-intrinsic: 1.3.0
 
   is-bigint@1.1.0:
@@ -5886,7 +5671,7 @@ snapshots:
 
   is-boolean-object@1.2.2:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       has-tostringtag: 1.0.2
 
   is-callable@1.2.7: {}
@@ -5897,7 +5682,7 @@ snapshots:
 
   is-date-object@1.1.0:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       has-tostringtag: 1.0.2
 
   is-extglob@2.1.1: {}
@@ -5910,7 +5695,7 @@ snapshots:
 
   is-number-object@1.1.1:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       has-tostringtag: 1.0.2
 
   is-number@7.0.0: {}
@@ -5919,11 +5704,11 @@ snapshots:
 
   is-reference@3.0.3:
     dependencies:
-      '@types/estree': 1.0.7
+      '@types/estree': 1.0.6
 
   is-regex@1.2.1:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       gopd: 1.2.0
       has-tostringtag: 1.0.2
       hasown: 2.0.2
@@ -5932,16 +5717,16 @@ snapshots:
 
   is-shared-array-buffer@1.0.4:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
 
   is-string@1.1.1:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       has-tostringtag: 1.0.2
 
   is-symbol@1.1.1:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       has-symbols: 1.1.0
       safe-regex-test: 1.1.0
 
@@ -5949,7 +5734,7 @@ snapshots:
 
   is-weakset@2.0.4:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       get-intrinsic: 1.3.0
 
   isarray@2.0.5: {}
@@ -5962,17 +5747,16 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@26.0.0:
+  jsdom@26.1.0:
     dependencies:
       cssstyle: 4.3.0
       data-urls: 5.0.0
       decimal.js: 10.5.0
-      form-data: 4.0.2
       html-encoding-sniffer: 4.0.0
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.20
+      nwsapi: 2.2.16
       parse5: 7.2.1
       rrweb-cssom: 0.8.0
       saxes: 6.0.0
@@ -6037,7 +5821,7 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  luxon@3.6.0: {}
+  luxon@3.5.0: {}
 
   lz-string@1.5.0: {}
 
@@ -6055,9 +5839,9 @@ snapshots:
 
   magicast@0.2.8:
     dependencies:
-      '@babel/parser': 7.27.0
-      '@babel/types': 7.27.0
-      recast: 0.23.11
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+      recast: 0.23.10
 
   math-intrinsics@1.1.0: {}
 
@@ -6099,12 +5883,6 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   min-indent@1.0.1: {}
 
   minimatch@3.1.2:
@@ -6133,10 +5911,10 @@ snapshots:
 
   ms@2.1.3: {}
 
-  nanoid@3.3.11: {}
-
   nanoid@3.3.6: {}
 
+  nanoid@3.3.8: {}
+
   nanoid@5.1.5: {}
 
   nanotar@0.1.1: {}
@@ -6154,7 +5932,7 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  nwsapi@2.2.20: {}
+  nwsapi@2.2.16: {}
 
   object-inspect@1.13.4: {}
 
@@ -6168,7 +5946,7 @@ snapshots:
   object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.8
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
       has-symbols: 1.1.0
@@ -6222,13 +6000,13 @@ snapshots:
 
   periscopic@3.1.0:
     dependencies:
-      '@types/estree': 1.0.7
+      '@types/estree': 1.0.6
       estree-walker: 3.0.3
       is-reference: 3.0.3
 
   pg-int8@1.0.1: {}
 
-  pg-protocol@1.8.0: {}
+  pg-protocol@1.7.1: {}
 
   pg-types@2.2.0:
     dependencies:
@@ -6285,7 +6063,7 @@ snapshots:
 
   postcss@8.5.3:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.8
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -6301,10 +6079,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.25.3):
+  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.27.0):
     dependencies:
       prettier: 3.5.3
-      svelte: 5.25.3
+      svelte: 5.27.0
 
   prettier@3.5.3: {}
 
@@ -6346,7 +6124,7 @@ snapshots:
 
   readdirp@4.1.2: {}
 
-  recast@0.23.11:
+  recast@0.23.10:
     dependencies:
       ast-types: 0.16.1
       esprima: 4.0.1
@@ -6406,30 +6184,30 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
-  rollup@4.37.0:
+  rollup@4.40.0:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.7
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.37.0
-      '@rollup/rollup-android-arm64': 4.37.0
-      '@rollup/rollup-darwin-arm64': 4.37.0
-      '@rollup/rollup-darwin-x64': 4.37.0
-      '@rollup/rollup-freebsd-arm64': 4.37.0
-      '@rollup/rollup-freebsd-x64': 4.37.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.37.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.37.0
-      '@rollup/rollup-linux-arm64-gnu': 4.37.0
-      '@rollup/rollup-linux-arm64-musl': 4.37.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.37.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.37.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.37.0
-      '@rollup/rollup-linux-riscv64-musl': 4.37.0
-      '@rollup/rollup-linux-s390x-gnu': 4.37.0
-      '@rollup/rollup-linux-x64-gnu': 4.37.0
-      '@rollup/rollup-linux-x64-musl': 4.37.0
-      '@rollup/rollup-win32-arm64-msvc': 4.37.0
-      '@rollup/rollup-win32-ia32-msvc': 4.37.0
-      '@rollup/rollup-win32-x64-msvc': 4.37.0
+      '@rollup/rollup-android-arm-eabi': 4.40.0
+      '@rollup/rollup-android-arm64': 4.40.0
+      '@rollup/rollup-darwin-arm64': 4.40.0
+      '@rollup/rollup-darwin-x64': 4.40.0
+      '@rollup/rollup-freebsd-arm64': 4.40.0
+      '@rollup/rollup-freebsd-x64': 4.40.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.40.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.40.0
+      '@rollup/rollup-linux-arm64-gnu': 4.40.0
+      '@rollup/rollup-linux-arm64-musl': 4.40.0
+      '@rollup/rollup-linux-loongarch64-gnu': 4.40.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.40.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.40.0
+      '@rollup/rollup-linux-riscv64-musl': 4.40.0
+      '@rollup/rollup-linux-s390x-gnu': 4.40.0
+      '@rollup/rollup-linux-x64-gnu': 4.40.0
+      '@rollup/rollup-linux-x64-musl': 4.40.0
+      '@rollup/rollup-win32-arm64-msvc': 4.40.0
+      '@rollup/rollup-win32-ia32-msvc': 4.40.0
+      '@rollup/rollup-win32-x64-msvc': 4.40.0
       fsevents: 2.3.3
 
   rrweb-cssom@0.8.0: {}
@@ -6446,16 +6224,16 @@ snapshots:
 
   safe-regex-test@1.1.0:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       es-errors: 1.3.0
       is-regex: 1.2.1
 
   safer-buffer@2.1.2: {}
 
-  sass@1.86.0:
+  sass@1.86.3:
     dependencies:
       chokidar: 4.0.3
-      immutable: 5.1.1
+      immutable: 5.0.3
       source-map-js: 1.2.1
     optionalDependencies:
       '@parcel/watcher': 2.5.1
@@ -6522,14 +6300,14 @@ snapshots:
 
   side-channel-map@1.0.1:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       object-inspect: 1.13.4
 
   side-channel-weakmap@1.0.2:
     dependencies:
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       object-inspect: 1.13.4
@@ -6576,14 +6354,14 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  sswr@2.0.0(svelte@5.25.3):
+  sswr@2.0.0(svelte@5.27.0):
     dependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
       swrev: 4.0.0
 
   stackback@0.0.2: {}
 
-  std-env@3.8.1: {}
+  std-env@3.9.0: {}
 
   stop-iteration-iterator@1.1.0:
     dependencies:
@@ -6612,23 +6390,23 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.25.3)(typescript@5.8.2):
+  svelte-check@4.1.6(picomatch@4.0.2)(svelte@5.27.0)(typescript@5.8.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
       fdir: 6.4.3(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.25.3
-      typescript: 5.8.2
+      svelte: 5.27.0
+      typescript: 5.8.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-confetti@1.4.0(svelte@5.25.3):
+  svelte-confetti@1.4.0(svelte@5.27.0):
     dependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
 
-  svelte-eslint-parser@1.1.1(svelte@5.25.3):
+  svelte-eslint-parser@1.1.2(svelte@5.27.0):
     dependencies:
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -6637,43 +6415,43 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.3)
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
 
-  svelte-motion@0.12.2(svelte@5.25.3):
+  svelte-motion@0.12.2(svelte@5.27.0):
     dependencies:
-      '@types/react': 18.3.20
+      '@types/react': 18.3.18
       framesync: 6.1.2
       popmotion: 11.0.5
       style-value-types: 5.1.2
-      svelte: 5.25.3
+      svelte: 5.27.0
       tslib: 2.8.1
 
-  svelte-preprocess@6.0.3(@babel/core@7.26.10)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.0)(svelte@5.25.3)(typescript@5.8.2):
+  svelte-preprocess@6.0.3(@babel/core@7.26.9)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.3)(svelte@5.27.0)(typescript@5.8.3):
     dependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
     optionalDependencies:
-      '@babel/core': 7.26.10
+      '@babel/core': 7.26.9
       postcss: 8.5.3
       postcss-load-config: 3.1.4(postcss@8.5.3)
-      sass: 1.86.0
-      typescript: 5.8.2
+      sass: 1.86.3
+      typescript: 5.8.3
 
   svelte-sequential-preprocessor@2.0.2:
     dependencies:
       svelte: 4.2.19
       tslib: 2.7.0
 
-  svelte-sonner@0.3.28(svelte@5.25.3):
+  svelte-sonner@0.3.28(svelte@5.27.0):
     dependencies:
-      svelte: 5.25.3
+      svelte: 5.27.0
 
   svelte@4.2.19:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
-      '@types/estree': 1.0.7
-      acorn: 8.14.1
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
       aria-query: 5.3.2
       axobject-query: 4.1.0
       code-red: 1.0.4
@@ -6684,18 +6462,18 @@ snapshots:
       magic-string: 0.30.17
       periscopic: 3.1.0
 
-  svelte@5.25.3:
+  svelte@5.27.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1)
-      '@types/estree': 1.0.7
-      acorn: 8.14.1
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.0)
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
       aria-query: 5.3.2
       axobject-query: 4.1.0
       clsx: 2.1.1
       esm-env: 1.2.2
-      esrap: 1.4.5
+      esrap: 1.4.6
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.17
@@ -6708,13 +6486,13 @@ snapshots:
   swr@2.2.0(react@18.3.1):
     dependencies:
       react: 18.3.1
-      use-sync-external-store: 1.5.0(react@18.3.1)
+      use-sync-external-store: 1.4.0(react@18.3.1)
 
   swrev@4.0.0: {}
 
-  swrv@1.0.4(vue@3.5.13(typescript@5.8.2)):
+  swrv@1.0.4(vue@3.5.13(typescript@5.8.3)):
     dependencies:
-      vue: 3.5.13(typescript@5.8.2)
+      vue: 3.5.13(typescript@5.8.3)
 
   symbol-tree@3.2.4: {}
 
@@ -6748,11 +6526,11 @@ snapshots:
     dependencies:
       '@popperjs/core': 2.11.8
 
-  tldts-core@6.1.85: {}
+  tldts-core@6.1.86: {}
 
-  tldts@6.1.85:
+  tldts@6.1.86:
     dependencies:
-      tldts-core: 6.1.85
+      tldts-core: 6.1.86
 
   to-regex-range@5.0.1:
     dependencies:
@@ -6762,19 +6540,19 @@ snapshots:
 
   tough-cookie@5.1.2:
     dependencies:
-      tldts: 6.1.85
+      tldts: 6.1.86
 
   tr46@0.0.3: {}
 
-  tr46@5.1.0:
+  tr46@5.1.1:
     dependencies:
       punycode: 2.3.1
 
   trim-lines@3.0.1: {}
 
-  ts-api-utils@2.1.0(typescript@5.8.2):
+  ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
-      typescript: 5.8.2
+      typescript: 5.8.3
 
   tslib@2.3.0: {}
 
@@ -6788,17 +6566,17 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  typescript-eslint@8.30.1(eslint@9.23.0)(typescript@5.8.2):
+  typescript-eslint@8.30.1(eslint@9.24.0)(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0)(typescript@5.8.2)
-      '@typescript-eslint/parser': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.30.1(eslint@9.23.0)(typescript@5.8.2)
-      eslint: 9.23.0
-      typescript: 5.8.2
+      '@typescript-eslint/eslint-plugin': 8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.24.0)(typescript@5.8.3))(eslint@9.24.0)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.30.1(eslint@9.24.0)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.30.1(eslint@9.24.0)(typescript@5.8.3)
+      eslint: 9.24.0
+      typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.8.2: {}
+  typescript@5.8.3: {}
 
   undici-types@6.20.0: {}
 
@@ -6827,7 +6605,7 @@ snapshots:
 
   unplugin@1.0.1:
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.14.0
       chokidar: 3.6.0
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
@@ -6842,7 +6620,7 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-sync-external-store@1.5.0(react@18.3.1):
+  use-sync-external-store@1.4.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
@@ -6858,13 +6636,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-node@3.0.9(@types/node@22.13.14)(sass@1.86.0):
+  vite-node@3.1.1(@types/node@22.13.5)(sass@1.86.3):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 2.0.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -6879,46 +6657,49 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.2.3(@types/node@22.13.14)(sass@1.86.0):
+  vite@6.3.1(@types/node@22.13.5)(sass@1.86.3):
     dependencies:
-      esbuild: 0.25.1
+      esbuild: 0.25.2
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
       postcss: 8.5.3
-      rollup: 4.37.0
+      rollup: 4.40.0
+      tinyglobby: 0.2.12
     optionalDependencies:
-      '@types/node': 22.13.14
+      '@types/node': 22.13.5
       fsevents: 2.3.3
-      sass: 1.86.0
+      sass: 1.86.3
 
-  vitefu@1.0.6(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)):
+  vitefu@1.0.6(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3)):
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
 
-  vitest@3.0.9(@types/node@22.13.14)(@vitest/ui@3.0.9)(jsdom@26.0.0)(sass@1.86.0):
+  vitest@3.1.1(@types/node@22.13.5)(@vitest/ui@3.1.1)(jsdom@26.1.0)(sass@1.86.3):
     dependencies:
-      '@vitest/expect': 3.0.9
-      '@vitest/mocker': 3.0.9(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
-      '@vitest/pretty-format': 3.0.9
-      '@vitest/runner': 3.0.9
-      '@vitest/snapshot': 3.0.9
-      '@vitest/spy': 3.0.9
-      '@vitest/utils': 3.0.9
+      '@vitest/expect': 3.1.1
+      '@vitest/mocker': 3.1.1(vite@6.3.1(@types/node@22.13.5)(sass@1.86.3))
+      '@vitest/pretty-format': 3.1.1
+      '@vitest/runner': 3.1.1
+      '@vitest/snapshot': 3.1.1
+      '@vitest/spy': 3.1.1
+      '@vitest/utils': 3.1.1
       chai: 5.2.0
       debug: 4.4.0
-      expect-type: 1.2.0
+      expect-type: 1.2.1
       magic-string: 0.30.17
       pathe: 2.0.3
-      std-env: 3.8.1
+      std-env: 3.9.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
-      vite-node: 3.0.9(@types/node@22.13.14)(sass@1.86.0)
+      vite: 6.3.1(@types/node@22.13.5)(sass@1.86.3)
+      vite-node: 3.1.1(@types/node@22.13.5)(sass@1.86.3)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.13.14
-      '@vitest/ui': 3.0.9(vitest@3.0.9)
-      jsdom: 26.0.0
+      '@types/node': 22.13.5
+      '@vitest/ui': 3.1.1(vitest@3.1.1)
+      jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
       - less
@@ -6933,15 +6714,15 @@ snapshots:
       - tsx
       - yaml
 
-  vue@3.5.13(typescript@5.8.2):
+  vue@3.5.13(typescript@5.8.3):
     dependencies:
       '@vue/compiler-dom': 3.5.13
       '@vue/compiler-sfc': 3.5.13
       '@vue/runtime-dom': 3.5.13
-      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.2))
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.3))
       '@vue/shared': 3.5.13
     optionalDependencies:
-      typescript: 5.8.2
+      typescript: 5.8.3
 
   w3c-xmlserializer@5.0.0:
     dependencies:
@@ -6963,7 +6744,7 @@ snapshots:
 
   whatwg-url@14.2.0:
     dependencies:
-      tr46: 5.1.0
+      tr46: 5.1.1
       webidl-conversions: 7.0.0
 
   whatwg-url@5.0.0:
@@ -6986,13 +6767,12 @@ snapshots:
       is-weakmap: 2.0.2
       is-weakset: 2.0.4
 
-  which-typed-array@1.1.19:
+  which-typed-array@1.1.18:
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
-      call-bound: 1.0.4
+      call-bound: 1.0.3
       for-each: 0.3.5
-      get-proto: 1.0.1
       gopd: 1.2.0
       has-tostringtag: 1.0.2
 
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 98460c596..cc36ddc46 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -149,6 +149,7 @@ export enum Click {
     DatabaseIndexDelete = 'click_index_delete',
     DatabaseCollectionDelete = 'click_collection_delete',
     DatabaseDatabaseDelete = 'click_database_delete',
+    DatabaseImportCsv = 'click_database_import_csv',
     DomainCreateClick = 'click_domain_create',
     DomainDeleteClick = 'click_domain_delete',
     DomainRetryDomainVerificationClick = 'click_domain_retry_domain_verification',
@@ -267,6 +268,7 @@ export enum Submit {
     DatabaseCreate = 'submit_database_create',
     DatabaseDelete = 'submit_database_delete',
     DatabaseUpdateName = 'submit_database_update_name',
+    DatabaseImportCsv = 'submit_database_import_csv',
     AttributeCreate = 'submit_attribute_create',
     AttributeUpdate = 'submit_attribute_update',
     AttributeDelete = 'submit_attribute_delete',
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 9b444447a..92d5a16b3 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -1,34 +1,95 @@
 <script lang="ts">
-    import { type Payload } from '@appwrite.io/console';
     import { onMount } from 'svelte';
-    import { goto } from '$app/navigation';
-    import { addNotification } from '$lib/stores/notifications';
     import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { goto, invalidate } from '$app/navigation';
+    import { getProjectId } from '$lib/helpers/project';
     import { Typography } from '@appwrite.io/pink-svelte';
-    import { page } from '$app/stores';
-    let importItems: Map<string, string> = new Map<string, string>();
+    import { writable, type Writable } from 'svelte/store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { type Models, type Payload, Query } from '@appwrite.io/console';
+
+    type ImportItem = {
+        status: string;
+        collection?: string;
+    };
+
+    type ImportItemsMap = Map<string, ImportItem>;
+
+    /**
+     * Keeps a track of the active and ongoing csv migrations.
+     *
+     * The structure is as follows -
+     * `{ migrationId: { status: status, collection: collection } }`
+     */
+    const importItems: Writable<ImportItemsMap> = writable(new Map());
+
+    async function showCompletionNotification(databaseId: string, collectionId: string) {
+        const projectId = page.params.project;
+        await invalidate(Dependencies.DOCUMENTS);
+        const url = `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
 
-    function showCompletionNotification(databaseId: string, collectionId: string) {
-        const projectId = $page.params.project;
         addNotification({
             type: 'success',
             isHtml: true,
-            message: `Documents import through CSV complete.`,
-            buttons: [
-                {
-                    name: 'View imported documents',
-                    method: () => {
-                        goto(
-                            `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`
-                        );
-                    }
-                }
-            ]
+            message: `CSV import finished successfully.`,
+            buttons:
+                collectionId === page.params.collection
+                    ? undefined
+                    : [
+                          {
+                              name: 'View documents',
+                              method: () => goto(url)
+                          }
+                      ]
         });
     }
 
-    // TODO: @itznotabug, update after the SDK is available
-    function updateOrAddItem(payload: Payload) {}
+    async function updateOrAddItem(importData: Payload | Models.Migration) {
+        if (importData.source.toLowerCase() !== 'csv') return;
+
+        const existing = $importItems.get(importData.$id);
+        if (existing?.status === importData.status) return;
+
+        const status = importData.status;
+        const resourceId = importData.resourceId ?? '';
+        const [databaseId, collectionId] = resourceId.split(':') ?? [];
+
+        let collectionName = existing?.collection ?? null;
+
+        console.log([importData.status, text(importData.status)].join(', '));
+
+        // fetch if we don't have it
+        if (!existing && collectionId) {
+            try {
+                const collection = await sdk.forProject.databases.getCollection(
+                    databaseId,
+                    collectionId
+                );
+                collectionName = collection.name;
+            } catch (err) {
+                collectionName = null;
+            }
+        }
+
+        importItems.update((items) => {
+            items.set(importData.$id, { status, collection: collectionName });
+            return items;
+        });
+
+        if (status === 'completed') {
+            await showCompletionNotification(databaseId, collectionId);
+        }
+    }
+
+    function clear() {
+        importItems.update((items) => {
+            items.clear();
+            return items;
+        });
+    }
 
     function graphSize(status: string): number {
         switch (status) {
@@ -57,23 +118,22 @@
     }
 
     onMount(() => {
-        // Mocking data
-        //showCsvImportBox = true;
-        // importItems.set(ID.unique(), 'something here')
-        // importItems.set(ID.unique(), 'something here 2')
-        // no idea yet on what events to observe
-        // return sdk.forConsole.client.subscribe('console', (response) => {
-        //     if (!response.channels.includes(`projects.${getProjectId()}`)) return;
-        //
-        //     // TODO: @itznotabug, update after SDK is available
-        //     if (response.events.includes('*')) {
-        //         updateOrAddItem(response.payload);
-        //     }
-        // });
+        sdk.forProject.migrations
+            .list([Query.equal('source', 'CSV'), Query.equal('status', ['pending', 'processing'])])
+            .then((migrations) => {
+                migrations.migrations.forEach(updateOrAddItem);
+            });
+
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+            if (response.events.includes('migrations.*')) {
+                updateOrAddItem(response.payload);
+            }
+        });
     });
 
     $: isOpen = true;
-    $: showCsvImportBox = importItems.size > 0;
+    $: showCsvImportBox = $importItems.size > 0;
 </script>
 
 {#if showCsvImportBox}
@@ -82,7 +142,7 @@
             <header class="upload-box-header">
                 <h4 class="upload-box-title">
                     <Typography.Text variant="m-500">
-                        Importing documents ({importItems.size})
+                        Importing documents ({$importItems.size})
                     </Typography.Text>
                 </h4>
                 <button
@@ -92,17 +152,17 @@
                     on:click={() => {
                         isOpen = !isOpen;
                     }}>
-                    <span class="icon-cheveron-up" aria-hidden="true" />
+                    <span class="icon-cheveron-up" aria-hidden="true"></span>
                 </button>
                 <button
                     class="upload-box-button"
                     aria-label="close backup restore box"
-                    on:click={() => (importItems = new Map())}>
-                    <span class="icon-x" aria-hidden="true" />
+                    on:click={clear}>
+                    <span class="icon-x" aria-hidden="true"></span>
                 </button>
             </header>
 
-            {#each [...importItems.entries()] as [key, value]}
+            {#each [...$importItems.entries()] as [key, value] (key)}
                 <div class="upload-box-content" class:is-open={isOpen}>
                     <ul class="upload-box-list">
                         <li class="upload-box-item">
@@ -110,17 +170,20 @@
                                 <div
                                     class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                                     <Typography.Text>
-                                        {text(key)}
+                                        {text(value.status)}
                                     </Typography.Text>
 
-                                    <Typography.Caption variant="400">
-                                        Collection name
-                                    </Typography.Caption>
+                                    {#if value.collection}
+                                        <Typography.Caption variant="400">
+                                            {value.collection}
+                                        </Typography.Caption>
+                                    {/if}
                                 </div>
                                 <div
                                     class="progress-bar-container"
-                                    class:is-danger={key.status === 'failed'}
-                                    style="--graph-size:{graphSize(key.status)}%" />
+                                    class:is-danger={value.status === 'failed'}
+                                    style="--graph-size:{graphSize(value.status)}%">
+                                </div>
                             </section>
                         </li>
                     </ul>
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 9c16bb2e8..04960d8ab 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -205,10 +205,10 @@
                                         disabled={uploading}
                                         on:click={() => fileSelector.click()}>
                                         <input
-                                            tabindex="-1"
                                             type="file"
-                                            accept="image/*"
+                                            tabindex="-1"
                                             class="u-hide"
+                                            accept={mimeTypeQuery}
                                             on:change={uploadFile}
                                             bind:this={fileSelector} />
                                         {#if uploading}
diff --git a/src/lib/elements/forms/inputFilePicker.svelte b/src/lib/elements/forms/inputFilePicker.svelte
index 38c90d163..c029b459a 100644
--- a/src/lib/elements/forms/inputFilePicker.svelte
+++ b/src/lib/elements/forms/inputFilePicker.svelte
@@ -25,7 +25,7 @@
         <Label {optionalText} {tooltip} hide={!label}>
             {label}{#if $$slots.popover && isPopoverDefined}
                 <Drop bind:show display="inline-block">
-                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    <!-- TODO: make un-clicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
                         type="button"
                         on:click={() => (show = !show)}
diff --git a/src/lib/helpers/files.ts b/src/lib/helpers/files.ts
index 89e92d654..f85f4e7bd 100644
--- a/src/lib/helpers/files.ts
+++ b/src/lib/helpers/files.ts
@@ -97,24 +97,6 @@ export function removeFile(file: File, files: FileList) {
     return dataTransfer.files;
 }
 
-export function readColumnsFromCSV(file: File): Promise<string[]> {
-    // more than enough!
-    const CHUNK_SIZE = 4096;
-
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-
-        reader.onload = () => {
-            const text = reader.result as string;
-            const [firstLine] = text.split('\n');
-            resolve(firstLine.split(','));
-        };
-
-        reader.onerror = reject;
-        reader.readAsText(file.slice(0, CHUNK_SIZE));
-    });
-}
-
 export const defaultIgnore = `
 ### Node ###
 # Logs
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index ce2d52c51..b86912f34 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -8,32 +8,24 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import {
-        Card,
-        Icon,
-        Layout,
-        Empty as PinkEmpty,
-        Typography,
-        Table as PinkTable,
-        Tooltip,
-        Upload
-    } from '@appwrite.io/pink-svelte';
+    import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
     import { collection, columns, isCsvImportInProgress } from './store';
     import Table from './table.svelte';
-    import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { base } from '$app/paths';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { readColumnsFromCSV, removeFile } from '$lib/helpers/files';
+    import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import FilePicker from '$lib/components/filePicker.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let data: PageData;
 
-    let files: FileList;
     let showImportCSV = false;
-    let showValidityAlert = false;
     let showCreateAttribute = false;
     let selectedAttribute: Option['name'] = null;
 
@@ -52,37 +44,31 @@
     $: hasAttributes = !!$collection.attributes.length;
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
 
-    let differences: Record<string, string[]> = {};
-    async function checkCsvAttrsValidity() {
-        if (!files.length) {
-            differences = { csv: [], collection: [] };
-            return;
+    async function onSelect(file: Models.File) {
+        $isCsvImportInProgress = true;
+
+        try {
+            await sdk.forProject.migrations.createCsvMigration(
+                file.bucketId,
+                file.$id,
+                `${page.params.database}:${page.params.collection}`
+            );
+
+            addNotification({
+                type: 'success',
+                message: 'Documents import from csv has started'
+            });
+
+            trackEvent(Submit.DatabaseImportCsv);
+        } catch (e) {
+            trackError(e, Submit.DatabaseImportCsv);
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        } finally {
+            $isCsvImportInProgress = false;
         }
-
-        const columns = await readColumnsFromCSV(files[0]);
-        const expected = $collection.attributes.map((attr) => attr.key);
-
-        showValidityAlert = !(
-            columns.length === expected.length && columns.every((col, i) => col === expected[i])
-        );
-
-        if (showValidityAlert) {
-            differences = {
-                csv: Array.from({ length: columns.length }, (_, i) => columns[i] || ''),
-                collection: Array.from(
-                    { length: $collection.attributes.length },
-                    (_, i) => expected[i] || ''
-                )
-            };
-        } else {
-            differences = { csv: [], collection: [] };
-        }
-    }
-
-    $: if (!showImportCSV) {
-        files = null;
-        showValidityAlert = false;
-        differences = { csv: [], collection: [] };
     }
 </script>
 
@@ -98,7 +84,7 @@
                 <ViewSelector view={data.view} {columns} hideView />
                 <Button
                     secondary
-                    event="import_documents"
+                    event={Click.DatabaseImportCsv}
                     disabled={!(hasAttributes && hasValidAttributes)}
                     on:click={() => (showImportCSV = true)}>
                     Import CSV
@@ -203,75 +189,7 @@
         bind:selectedOption={selectedAttribute} />
 {/if}
 
-<Modal
-    title="Import CSV"
-    bind:show={showImportCSV}
-    onSubmit={() => {
-        // todo: trigger upload and import once SDK is available.
-        showImportCSV = false;
-        $isCsvImportInProgress = true;
-    }}>
-    <Typography.Text slot="description">
-        Select a CSV file to upload. Ensure the file is properly formatted before proceeding.
-        <!-- TODO: @itznotabug, need a docs link here -->
-        <Button compact href="https://appwrite.io/docs/products/databases">Learn more.</Button>
-    </Typography.Text>
-
-    <Upload.Dropzone
-        required
-        bind:files
-        title="Upload CSV"
-        extensions={['csv']}
-        on:change={checkCsvAttrsValidity}>
-        <Layout.Stack alignItems="center" gap="s">
-            <Layout.Stack alignItems="center" gap="s">
-                <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
-                    <Typography.Text variant="l-500">
-                        Drag and drop file here or click to upload
-                    </Typography.Text>
-                    <Tooltip maxWidth="fit-content" placement="top">
-                        <Layout.Stack alignItems="center" justifyContent="center" inline>
-                            <Icon icon={IconInfo} size="s" />
-                        </Layout.Stack>
-                        <svelte:fragment slot="tooltip">Only csv files allowed</svelte:fragment>
-                    </Tooltip>
-                </Layout.Stack>
-            </Layout.Stack>
-        </Layout.Stack>
-    </Upload.Dropzone>
-    {#if files?.length}
-        <!-- TODO: torsten, the types issue with FileList-->
-        <Upload.List bind:files on:remove={(e) => (files = removeFile(e.detail, files))} />
-    {/if}
-
-    {#if showValidityAlert}
-        <!-- TODO: @itznotabug, need to brainstorm for design on this one -->
-        <Layout.Stack gap="s">
-            <Typography.Text>
-                The uploaded CSV does not match the collection's attribute structure.
-            </Typography.Text>
-
-            <PinkTable.Root columns={2} let:root stickyHeaders maxHeight="16rem">
-                <svelte:fragment slot="header" let:root>
-                    <PinkTable.Header.Cell column="csv" {root}>CSV</PinkTable.Header.Cell>
-                    <PinkTable.Header.Cell column="collection" {root}
-                        >Collection</PinkTable.Header.Cell>
-                </svelte:fragment>
-                {#each differences.csv as csvKey, i}
-                    <PinkTable.Row.Base {root}>
-                        <PinkTable.Cell column="csv" {root}>{csvKey ?? '-'}</PinkTable.Cell>
-                        <PinkTable.Cell column="collection" {root}
-                            >{differences.collection[i] ?? '-'}</PinkTable.Cell>
-                    </PinkTable.Row.Base>
-                {/each}
-            </PinkTable.Root>
-        </Layout.Stack>
-    {/if}
-
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showImportCSV = false)}>Cancel</Button>
-        <Button
-            disabled={files ? (showValidityAlert ? showValidityAlert : files?.length === 0) : true}
-            submit>Import</Button>
-    </svelte:fragment>
-</Modal>
+{#if showImportCSV}
+   <!-- CSVs can be text/plain or text/csv sometimes! -->
+    <FilePicker {onSelect} mimeTypeQuery="text/" bind:show={showImportCSV} />
+{/if}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index e391fd5b6..89c9859a8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -24,7 +24,7 @@
     );
 
     const selectedCollection = $derived.by(() =>
-        sortedCollections()?.find((collection) => collection.$id === collectionId)
+        sortedCollections?.find((collection) => collection.$id === collectionId)
     );
 
     let openBottomSheet = $state(false);
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 391baefcf..88f36da7a 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, Id, Modal } from '$lib/components';
+    import { Alert, Confirm, Id } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -112,7 +112,6 @@
 
     let selectedRows: string[] = [];
     let showDelete = false;
-    let deleting = false;
 
     async function handleDelete() {
         showDelete = false;
@@ -267,11 +266,7 @@
     </FloatingActionBar>
 {/if}
 
-<Modal
-    title="Delete Documents"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    dismissible={!deleting}>
+<Confirm title="Delete Documents" bind:open={showDelete} onSubmit={handleDelete}>
     <div>
         Are you sure you want to delete <b>{selectedRows.length}</b>
         {selectedRows.length > 1 ? 'documents' : 'document'}?
@@ -323,12 +318,4 @@
             <p class="u-bold">This action is irreversible.</p>
         {/if}
     </div>
-
-    <svelte:fragment slot="footer">
-        <ConsoleButton text on:click={() => (showDelete = false)} disabled={deleting}
-            >Cancel</ConsoleButton>
-        <ConsoleButton secondary submit disabled={deleting || (relAttributes?.length && !checked)}>
-            Delete
-        </ConsoleButton>
-    </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
index 63c10d664..ae1438e46 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
@@ -89,7 +89,7 @@
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status != 'draft'}>
+    <CardGrid hideFooter={message.status !== 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
             <Typography.Title size="s">Message</Typography.Title>
             <div class="u-flex u-margin-block-start-24 u-width-full-line">

From 92af712e0e20255ea4c1d5dbd5e1f8e1bc580013 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 18 Apr 2025 09:25:10 +0530
Subject: [PATCH 14/36] fix: realtime logic update on progress.

---
 src/lib/components/csvImportBox.svelte        | 35 +++++++++++--------
 .../collection-[collection]/+page.svelte      |  2 +-
 .../subNavigation.svelte                      |  2 +-
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 92d5a16b3..d4cc7a9d4 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -50,33 +50,40 @@
     async function updateOrAddItem(importData: Payload | Models.Migration) {
         if (importData.source.toLowerCase() !== 'csv') return;
 
-        const existing = $importItems.get(importData.$id);
-        if (existing?.status === importData.status) return;
-
         const status = importData.status;
         const resourceId = importData.resourceId ?? '';
         const [databaseId, collectionId] = resourceId.split(':') ?? [];
 
-        let collectionName = existing?.collection ?? null;
+        const current = $importItems.get(importData.$id);
+        let collectionName = current?.collection ?? null;
 
-        console.log([importData.status, text(importData.status)].join(', '));
-
-        // fetch if we don't have it
-        if (!existing && collectionId) {
+        if (!collectionName && collectionId) {
             try {
                 const collection = await sdk.forProject.databases.getCollection(
                     databaseId,
                     collectionId
                 );
                 collectionName = collection.name;
-            } catch (err) {
+            } catch {
                 collectionName = null;
             }
         }
 
         importItems.update((items) => {
-            items.set(importData.$id, { status, collection: collectionName });
-            return items;
+            const existing = items.get(importData.$id);
+
+            const isDone = (s: string) => s === 'completed' || s === 'failed';
+            const isInProgress = (s: string) => ['pending', 'processing', 'uploading'].includes(s);
+
+            const shouldSkip =
+                (existing && isDone(existing.status) && isInProgress(status)) ||
+                existing?.status === status;
+
+            if (shouldSkip) return items;
+
+            const next = new Map(items);
+            next.set(importData.$id, { status, collection: collectionName ?? undefined });
+            return next;
         });
 
         if (status === 'completed') {
@@ -109,9 +116,9 @@
 
     function text(status: string) {
         if (status === 'completed') {
-            return `CSV import complete`;
+            return 'CSV import complete';
         } else if (status === 'failed') {
-            return `CSV import failed`;
+            return 'CSV import failed';
         } else {
             return 'Preparing CSV for import...';
         }
@@ -127,7 +134,7 @@
         return sdk.forConsole.client.subscribe('console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;
             if (response.events.includes('migrations.*')) {
-                updateOrAddItem(response.payload);
+                updateOrAddItem(response.payload as Payload);
             }
         });
     });
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index b86912f34..d2a546179 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -190,6 +190,6 @@
 {/if}
 
 {#if showImportCSV}
-   <!-- CSVs can be text/plain or text/csv sometimes! -->
+    <!-- CSVs can be text/plain or text/csv sometimes! -->
     <FilePicker {onSelect} mimeTypeQuery="text/" bind:show={showImportCSV} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index 89c9859a8..fda4b488e 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -44,7 +44,7 @@
                 href={`${base}/project-${project}/databases/database-${databaseId}`}
                 class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
                 <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
-                {data.database.name}
+                {data.database?.name}
             </a>
             <div class="collection-content">
                 {#if data?.allCollections?.total}

From 3e147e92d62bc4c0baef6e1eddd7db5a634c8c16 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 18 Apr 2025 09:29:44 +0530
Subject: [PATCH 15/36] misc: fixes.

---
 .../storage/bucket-[bucket]/+page.svelte               | 10 +++++++---
 .../bucket-[bucket]/file-[file]/deleteFile.svelte      |  5 +++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
index ad06d67ec..45d7fa37a 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -49,7 +49,7 @@
         try {
             await sdk.forProject.storage.deleteFile(file.bucketId, file.$id);
             await invalidate(Dependencies.FILES);
-            uploader.removeFile(file);
+            await uploader.removeFile(file);
             trackEvent(Submit.FileDelete);
         } catch (error) {
             addNotification({
@@ -219,7 +219,11 @@
             single
             href="https://appwrite.io/docs/products/storage/upload-download"
             target="file"
-            on:click={() => void 0} />
+            on:click={() => {
+                goto(
+                    `${base}/project-${page.params.project}/storage/bucket-${page.params.bucket}/create`
+                );
+            }} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
index e4ba0b043..92f18111e 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
@@ -14,19 +14,20 @@
     const deleteFile = async () => {
         try {
             await sdk.forProject.storage.deleteFile($file.bucketId, $file.$id);
-            showDelete = false;
-            await goto(`${base}/project-${page.params.project}/storage/bucket-${$file.bucketId}`);
             addNotification({
                 type: 'success',
                 message: `${$file.name} has been deleted`
             });
             trackEvent(Submit.FileDelete);
+            await goto(`${base}/project-${page.params.project}/storage/bucket-${$file.bucketId}`);
         } catch (error) {
             addNotification({
                 type: 'error',
                 message: error.message
             });
             trackError(error, Submit.FileDelete);
+        } finally {
+            showDelete = false;
         }
     };
 </script>

From 6c453853dcacac0a8c8c1983d91872c424c6fb0f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 18 Apr 2025 10:02:27 +0530
Subject: [PATCH 16/36] fix: selection on file upload.

---
 src/lib/components/filePicker.svelte | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 04960d8ab..92d6ab8e9 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -282,7 +282,7 @@
                                                         Created
                                                     </Table.Header.Cell>
                                                 </svelte:fragment>
-                                                {#each response?.files as file}
+                                                {#each response?.files as file (file.$id)}
                                                     <Table.Row.Button
                                                         {root}
                                                         on:click={() => selectFile(file)}>
@@ -291,10 +291,8 @@
                                                                 class="u-inline-flex u-cross-center u-gap-12">
                                                                 <Selector.Radio
                                                                     name="file"
-                                                                    group="file"
                                                                     value={file.$id}
-                                                                    checked={file.$id ===
-                                                                        selectedFile} />
+                                                                    bind:group={selectedFile} />
                                                                 <img
                                                                     style:border-radius="var(--border-radius-xsmall)"
                                                                     width="28"

From 7abc5b53604bf2d598b81377afe7b9c609b7782e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Apr 2025 12:58:09 +0530
Subject: [PATCH 17/36] misc: fixes.

---
 package.json                                          |  2 +-
 pnpm-lock.yaml                                        | 10 +++++-----
 src/lib/layout/usage.svelte                           | 11 ++++++-----
 .../project-[project]/overview/+layout.svelte         | 11 ++++++-----
 .../overview/dev-keys/[key]/header.svelte             |  4 ++--
 .../overview/dev-keys/[key]/store.ts                  |  2 +-
 .../project-[project]/overview/dev-keys/action.svelte |  4 ++--
 .../project-[project]/overview/keys/[key]/store.ts    |  2 +-
 8 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 5dbe15c26..7d90753a5 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
         "e2e:ui": "playwright test --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e84836ebe..8081d4164 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e
-        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e
+        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939
+        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -217,8 +217,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e':
-    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939':
+    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939}
     version: 1.2.1
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27':
@@ -3534,7 +3534,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939': {}
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.25.3)':
     dependencies:
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index b5eb857d4..9a520e750 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+    import { ProjectUsageRange, type Models } from '@appwrite.io/console';
     export type UsagePeriods = '24h' | '30d' | '90d';
 
     export function periodToDates(period: UsagePeriods): {
@@ -58,14 +59,14 @@
 </script>
 
 <script lang="ts">
-    import { BarChart } from '$lib/charts';
-    import { formatNumberWithCommas } from '$lib/helpers/numbers';
-    import { Card } from '$lib/components';
-    import { ProjectUsageRange, type Models } from '@appwrite.io/console';
     import { page } from '$app/state';
-    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { goto } from '$app/navigation';
+
+    import { BarChart } from '$lib/charts';
+    import { Card } from '$lib/components';
     import { InputSelect } from '$lib/elements/forms';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     type MetricMetadata = {
         title: string;
diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index 807d20bce..36c2e7a29 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -1,4 +1,7 @@
 <script lang="ts" context="module">
+    import { total } from '$lib/helpers/array';
+    import type { Metric } from '$lib/sdk/usage';
+
     export function totalMetrics(set: Array<unknown>): number {
         if (!set) return 0;
         return total((set as Metric[]).map((c) => c.value));
@@ -20,16 +23,14 @@
     import Requests from './requests.svelte';
     import { usage } from './store';
     import { formatNum } from '$lib/helpers/string';
-    import { total } from '$lib/helpers/array';
-    import type { Metric } from '$lib/sdk/usage';
     import { periodToDates } from '$lib/layout/usage.svelte';
     import { canWriteProjects } from '$lib/stores/roles';
     import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { writable, type Writable } from 'svelte/store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
-    $: projectId = page.params.project;
-    $: path = `${base}/project-${projectId}/overview`;
+    const projectId = page.params.project;
+    const path = `${base}/project-${projectId}/overview`;
     let period: UsagePeriods = '30d';
 
     onMount(handle);
@@ -229,7 +230,7 @@
                     <Tab
                         noscroll
                         href={`${path}/dev-keys`}
-                        selected={$page.url.pathname === `${path}/dev-keys`}
+                        selected={page.url.pathname === `${path}/dev-keys`}
                         event="keys">Dev keys</Tab>
                 </Tabs>
                 {#if $action}
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
index 54e1f51c5..fc36b5250 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { devKey } from './store';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 </script>
 
 <Cover>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts
index 6d3fc98bd..baf2031a7 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/store.ts
@@ -1,5 +1,5 @@
-import { derived } from 'svelte/store';
 import { page } from '$app/stores';
+import { derived } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 
 export const devKey = derived(page, ($page) => $page.data.key as Models.DevKey);
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
index 48710d628..c32a1e46d 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
@@ -10,14 +10,14 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { base } from '$app/paths';
     import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
 
     let showModal = false;
     let isSubmitting = false;
     let name = '',
         expire = '';
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     async function create() {
         try {
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/store.ts b/src/routes/(console)/project-[project]/overview/keys/[key]/store.ts
index dc984c86c..5a1a9f936 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/store.ts
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/store.ts
@@ -1,5 +1,5 @@
-import { derived } from 'svelte/store';
 import { page } from '$app/stores';
+import { derived } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 
 export const key = derived(page, ($page) => $page.data.key as Models.Key);

From 645eaaa7c446f6f125c056867a9b40308eb6ea0a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Apr 2025 14:33:22 +0530
Subject: [PATCH 18/36] update: design reviews, add error message.

---
 src/lib/components/csvImportBox.svelte | 35 ++++++++------
 src/lib/components/filePicker.svelte   | 63 ++++++++++++++++++--------
 2 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index d4cc7a9d4..78526d196 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -26,17 +26,25 @@
      */
     const importItems: Writable<ImportItemsMap> = writable(new Map());
 
-    async function showCompletionNotification(databaseId: string, collectionId: string) {
+    async function showCompletionNotification(
+        databaseId: string,
+        collectionId: string,
+        status: string,
+        errors: string = ''
+    ) {
         const projectId = page.params.project;
         await invalidate(Dependencies.DOCUMENTS);
         const url = `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
 
+        const type = status === 'completed' ? 'success' : 'error';
+        const message = status === 'completed' ? 'CSV import finished successfully.' : `${errors}`;
+
         addNotification({
-            type: 'success',
+            type,
+            message,
             isHtml: true,
-            message: `CSV import finished successfully.`,
             buttons:
-                collectionId === page.params.collection
+                collectionId === page.params.collection || type === 'error'
                     ? undefined
                     : [
                           {
@@ -86,8 +94,11 @@
             return next;
         });
 
-        if (status === 'completed') {
-            await showCompletionNotification(databaseId, collectionId);
+        if (status === 'completed' || status === 'failed') {
+            // extract clean message from nested backend error.
+            const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
+            const actualMessage = match?.[1];
+            await showCompletionNotification(databaseId, collectionId, status, actualMessage);
         }
     }
 
@@ -114,11 +125,13 @@
         }
     }
 
-    function text(status: string) {
+    function text(status: string, collectionName: string = '') {
         if (status === 'completed') {
             return 'CSV import complete';
         } else if (status === 'failed') {
             return 'CSV import failed';
+        } else if (status === 'processing') {
+            return `Importing CSV file${collectionName ? ` to ${collectionName}` : ''}`;
         } else {
             return 'Preparing CSV for import...';
         }
@@ -177,14 +190,8 @@
                                 <div
                                     class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                                     <Typography.Text>
-                                        {text(value.status)}
+                                        {text(value.status, value.collection)}
                                     </Typography.Text>
-
-                                    {#if value.collection}
-                                        <Typography.Caption variant="400">
-                                            {value.collection}
-                                        </Typography.Caption>
-                                    {/if}
                                 </div>
                                 <div
                                     class="progress-bar-container"
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 92d6ab8e9..9fc27add8 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -21,7 +21,8 @@
         ToggleButton,
         Selector,
         Empty,
-        Card
+        Card,
+        Divider
     } from '@appwrite.io/pink-svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { IconCheck, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
@@ -146,21 +147,22 @@
 <Form {onSubmit}>
     <Modal bind:open={show} title="Select file" size="l">
         <Layout.Stack direction="row" height="50vh">
-            <aside>
+            <!-- min-width to avoid a layout-shift -->
+            <aside style="min-width: 200px">
                 <Typography.Caption variant="500">Buckets</Typography.Caption>
                 {#await buckets}
                     <div class="u-flex u-main-center">
                         <div class="loader"></div>
                     </div>
                 {:then response}
-                    <ActionMenu.Root>
+                    <ActionMenu.Root width="200px">
                         {#each response.buckets as bucket}
                             {@const isSelected = bucket.$id === selectedBucket}
-                            <ActionMenu.Item.Button
-                                on:click={() => selectBucket(bucket)}
-                                leadingIcon={isSelected ? IconCheck : undefined}>
-                                {bucket.name}
-                            </ActionMenu.Item.Button>
+                            <div class="action-button" class:active-item={isSelected}>
+                                <ActionMenu.Item.Button on:click={() => selectBucket(bucket)}>
+                                    {bucket.name}
+                                </ActionMenu.Item.Button>
+                            </div>
                         {:else}
                             <ActionMenu.Item.Button>No buckets found</ActionMenu.Item.Button>
                         {/each}
@@ -168,17 +170,21 @@
                 {/await}
             </aside>
 
+            <Divider vertical />
+
             <Layout.Stack>
                 {#await buckets then response}
                     {#if response?.total}
                         {#if currentBucket}
                             <Layout.Stack>
-                                <Layout.Stack direction="row" alignItems="center">
-                                    <Typography.Title>{currentBucket?.name}</Typography.Title>
-                                    <Id value={currentBucket?.$id} event="bucket">
-                                        {currentBucket?.$id}
-                                    </Id>
-                                </Layout.Stack>
+                                {#key currentBucket?.$id}
+                                    <Layout.Stack direction="row" alignItems="center">
+                                        <Typography.Title>{currentBucket?.name}</Typography.Title>
+                                        <Id value={currentBucket?.$id} event="bucket">
+                                            {currentBucket?.$id}
+                                        </Id>
+                                    </Layout.Stack>
+                                {/key}
                                 <Layout.Stack direction="row" alignItems="center">
                                     <InputSearch
                                         placeholder="Search files"
@@ -244,7 +250,8 @@
                                                     <Card.Selector
                                                         group="files"
                                                         name="files"
-                                                        title="files"
+                                                        padding="xxs"
+                                                        title={file.name}
                                                         value={file.$id}
                                                         src={getPreview(
                                                             currentBucket.$id,
@@ -290,6 +297,7 @@
                                                             <div
                                                                 class="u-inline-flex u-cross-center u-gap-12">
                                                                 <Selector.Radio
+                                                                    size="s"
                                                                     name="file"
                                                                     value={file.$id}
                                                                     bind:group={selectedFile} />
@@ -332,7 +340,8 @@
                                                 secondary
                                                 slot="actions"
                                                 on:click={() => ($search = '')}
-                                                >Clear search</Button>
+                                                >Clear search
+                                            </Button>
                                         </Empty>
                                     {:else}
                                         <Empty title="No files found within this bucket.">
@@ -341,7 +350,8 @@
                                                 slot="actions"
                                                 disabled={uploading}
                                                 on:click={() => fileSelector.click()}
-                                                >Upload file</Button>
+                                                >Upload file
+                                            </Button>
                                         </Empty>
                                     {/if}
                                 {/await}
@@ -365,8 +375,25 @@
             <Layout.Stack direction="row" justifyContent="flex-end">
                 <Button text on:click={closeModal}>Cancel</Button>
                 <Button submit disabled={selectedBucket === null || selectedFile === null}
-                    >Select</Button>
+                    >Select
+                </Button>
             </Layout.Stack>
         </svelte:fragment>
     </Modal>
 </Form>
+
+<style>
+    .action-button {
+        width: 100%;
+        margin-block: 0.125rem;
+
+        & :global(button) {
+            width: 100%;
+        }
+
+        &.active-item {
+            border-radius: var(--border-radius-s);
+            background-color: var(--bgcolor-neutral-secondary, #f4f4f7);
+        }
+    }
+</style>

From 140a2155b3953ca77041ebf68dad7f8d28bdbe75 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Apr 2025 16:23:38 +0530
Subject: [PATCH 19/36] fix: table missing dev key data.

---
 .../overview/(components)/table.svelte                | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/(components)/table.svelte b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
index 3c142c025..241f49a7e 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/table.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
@@ -5,7 +5,7 @@
     import { Badge, Layout, Table } from '@appwrite.io/pink-svelte';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
 
     export let keyType: 'api' | 'dev' = 'api';
@@ -31,6 +31,11 @@
             message: isExpired ? 'Expired' : isExpiring ? 'Expires soon' : null
         };
     }
+
+    function getKeys(): Models.Key[] | Models.DevKey[] {
+        if (isApiKey) return keys['keys'] as Models.Key[];
+        else return keys['devKeys'] as Models.DevKey[];
+    }
 </script>
 
 {#if keys.total}
@@ -43,7 +48,7 @@
                 <Table.Header.Cell {root}>Scopes</Table.Header.Cell>
             {/if}
         </svelte:fragment>
-        {#each keys.keys as key}
+        {#each getKeys() as key (key.$id)}
             <Table.Row.Link href={`${slug}/${key.$id}`} {root}>
                 <Table.Cell {root}>
                     {key.name}
@@ -79,5 +84,5 @@
         allowCreate={$canWriteKeys}
         href="https://appwrite.io/docs/advanced/platform/{slug}"
         target="{label} key"
-        on:click={() => goto(`${base}/project-${$page.params.project}/overview/${slug}/create`)} />
+        on:click={() => goto(`${base}/project-${page.params.project}/overview/${slug}/create`)} />
 {/if}

From e420bab2fcc534b19f9aaafc0e7995f018749db6 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Apr 2025 12:27:32 +0530
Subject: [PATCH 20/36] address comments: misc changes to logic, copy.

---
 package.json                                  |  4 +--
 pnpm-lock.yaml                                | 28 +++++++++---------
 .../overview/(components)/create.svelte       |  2 +-
 .../overview/(components)/table.svelte        | 29 ++++++++++++++-----
 .../overview/dev-keys/[key]/header.svelte     |  1 -
 .../overview/dev-keys/action.svelte           | 14 ++++-----
 .../overview/keys/[key]/header.svelte         |  1 -
 .../project-[project]/overview/store.ts       |  2 ++
 8 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 7d90753a5..82989cec4 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6c85487",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8081d4164..38d52105d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6c85487
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6c85487(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -221,14 +221,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487cf9b15630ea5b7df69b56e02877dbdf1c':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487cf9b15630ea5b7df69b56e02877dbdf1c}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -242,8 +242,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6c85487':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6c85487}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -3536,11 +3536,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@7773939': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487cf9b15630ea5b7df69b56e02877dbdf1c(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3553,9 +3553,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6c85487(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6c85487cf9b15630ea5b7df69b56e02877dbdf1c(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
diff --git a/src/routes/(console)/project-[project]/overview/(components)/create.svelte b/src/routes/(console)/project-[project]/overview/(components)/create.svelte
index e4267b08d..a5ccdf3db 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/create.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/create.svelte
@@ -69,7 +69,7 @@
                     <InputText
                         id="name"
                         label="Name"
-                        placeholder="API key name"
+                        placeholder="Enter key name"
                         required
                         bind:value={name} />
 
diff --git a/src/routes/(console)/project-[project]/overview/(components)/table.svelte b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
index 241f49a7e..c67cafb50 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/table.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
-    import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
-    import { canWriteKeys } from '$lib/stores/roles';
-    import { Badge, Layout, Table } from '@appwrite.io/pink-svelte';
-    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { goto } from '$app/navigation';
+    import { Empty } from '$lib/components';
+    import { canWriteKeys } from '$lib/stores/roles';
     import type { Models } from '@appwrite.io/console';
+    import { showDevKeysCreateModal } from '../store';
+    import { Badge, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
 
     export let keyType: 'api' | 'dev' = 'api';
     export let keys: Models.KeyList | Models.DevKeyList;
 
     const isApiKey = keyType === 'api';
-    const label = isApiKey ? 'API' : 'Dev';
+    const label = isApiKey ? 'API' : 'dev';
     const slug = isApiKey ? 'keys' : 'dev-keys';
 
     function asApiKey(key: Models.Key | Models.DevKey) {
@@ -36,6 +37,13 @@
         if (isApiKey) return keys['keys'] as Models.Key[];
         else return keys['devKeys'] as Models.DevKey[];
     }
+
+    function getDescription(): string {
+        if (isApiKey)
+            return 'Use API keys to authenticate your app’s requests in production, granting secure access to live data and services.';
+        else
+            return 'Dev keys allow bypassing rate limits and accessing more detailed error messages while in development.';
+    }
 </script>
 
 {#if keys.total}
@@ -84,5 +92,12 @@
         allowCreate={$canWriteKeys}
         href="https://appwrite.io/docs/advanced/platform/{slug}"
         target="{label} key"
-        on:click={() => goto(`${base}/project-${page.params.project}/overview/${slug}/create`)} />
+        description={getDescription()}
+        on:click={() => {
+            if (isApiKey) {
+                goto(`${base}/project-${page.params.project}/overview/${slug}/create`);
+            } else {
+                $showDevKeysCreateModal = true;
+            }
+        }} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
index fc36b5250..f2a19f346 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/[key]/header.svelte
@@ -13,6 +13,5 @@
         <CoverTitle href={`${base}/project-${projectId}/overview/dev-keys`}>
             {$devKey?.name}
         </CoverTitle>
-        <Id value={$devKey?.secret}>Dev key secret</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
index c32a1e46d..306188b52 100644
--- a/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[project]/overview/dev-keys/action.svelte
@@ -11,8 +11,8 @@
     import { base } from '$app/paths';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/state';
+    import { showDevKeysCreateModal } from '$routes/(console)/project-[project]/overview/store';
 
-    let showModal = false;
     let isSubmitting = false;
     let name = '',
         expire = '';
@@ -28,7 +28,7 @@
                 expire || undefined
             );
 
-            showModal = false;
+            $showDevKeysCreateModal = false;
             trackEvent(Submit.DevKeyCreate);
             await goto(`${base}/project-${projectId}/overview/dev-keys/${$id}`);
             addNotification({
@@ -48,13 +48,13 @@
 </script>
 
 {#if $canWriteKeys}
-    <Button on:click={() => (showModal = true)}>
+    <Button on:click={() => ($showDevKeysCreateModal = true)}>
         <Icon icon={IconPlus} slot="start" size="s" />
-        Create Dev key
+        Create dev key
     </Button>
 
     <Form onSubmit={create} isModal>
-        <Modal title="Create Dev key" bind:open={showModal}>
+        <Modal title="Create dev key" bind:open={$showDevKeysCreateModal}>
             <span slot="description">
                 Test your app without rate limits and more detailed error messages.
             </span>
@@ -63,7 +63,7 @@
                 <InputText
                     id="name"
                     label="Name"
-                    placeholder="Dev key name"
+                    placeholder="Enter key name"
                     required
                     bind:value={name} />
 
@@ -71,7 +71,7 @@
             </Layout.Stack>
 
             <Layout.Stack direction="row" justifyContent="flex-end" slot="footer">
-                <Button fullWidthMobile secondary on:click={() => (showModal = false)}
+                <Button fullWidthMobile secondary on:click={() => ($showDevKeysCreateModal = false)}
                     >Cancel</Button>
                 <Button fullWidthMobile submit disabled={isSubmitting}>Create</Button>
             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/header.svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/header.svelte
index 9bd9f3eb0..0d7411d60 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/header.svelte
@@ -13,6 +13,5 @@
         <CoverTitle href={`${base}/project-${projectId}/overview/keys`}>
             {$key?.name}
         </CoverTitle>
-        <Id value={$key?.secret}>API key secret</Id>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/(console)/project-[project]/overview/store.ts b/src/routes/(console)/project-[project]/overview/store.ts
index e0fd85cdc..94a931569 100644
--- a/src/routes/(console)/project-[project]/overview/store.ts
+++ b/src/routes/(console)/project-[project]/overview/store.ts
@@ -18,3 +18,5 @@ export const usage = cachedStore<
 });
 
 export const selectedTab: Writable<'platforms' | 'keys' | 'dev-keys'> = writable('platforms');
+
+export const showDevKeysCreateModal: Writable<boolean> = writable(false);

From c6ca1c101d03152960ae4070c873c7a84464e11d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Apr 2025 13:59:42 +0530
Subject: [PATCH 21/36] address comments: design review.

---
 src/lib/components/csvImportBox.svelte        | 25 ++++++-----
 src/lib/components/filePicker.svelte          | 43 ++++++++++++-------
 .../collection-[collection]/+page.svelte      |  2 +-
 .../attributes/+page.svelte                   |  5 ++-
 4 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 78526d196..0a76b7ff0 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -125,15 +125,16 @@
         }
     }
 
-    function text(status: string, collectionName: string = '') {
-        if (status === 'completed') {
-            return 'CSV import complete';
-        } else if (status === 'failed') {
-            return 'CSV import failed';
-        } else if (status === 'processing') {
-            return `Importing CSV file${collectionName ? ` to ${collectionName}` : ''}`;
-        } else {
-            return 'Preparing CSV for import...';
+    function text(status: string, collectionName = '') {
+        const name = collectionName ? `<b>${collectionName}</b>` : '';
+        switch (status) {
+            case 'completed':
+            case 'failed':
+                return `Import to ${name} ${status}`;
+            case 'processing':
+                return `Importing CSV file${name ? ` to ${name}` : ''}`;
+            default:
+                return 'Preparing CSV for import...';
         }
     }
 
@@ -169,9 +170,7 @@
                     class="upload-box-button"
                     class:is-open={isOpen}
                     aria-label="toggle upload box"
-                    on:click={() => {
-                        isOpen = !isOpen;
-                    }}>
+                    on:click={() => (isOpen = !isOpen)}>
                     <span class="icon-cheveron-up" aria-hidden="true"></span>
                 </button>
                 <button
@@ -190,7 +189,7 @@
                                 <div
                                     class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                                     <Typography.Text>
-                                        {text(value.status, value.collection)}
+                                        {@html text(value.status, value.collection)}
                                     </Typography.Text>
                                 </div>
                                 <div
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 9fc27add8..410973265 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Id } from '.';
+    import { EmptySearch, Id } from '.';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { ID, Query, Permission, Role } from '@appwrite.io/console';
@@ -26,9 +26,12 @@
     } from '@appwrite.io/pink-svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { IconCheck, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
+    import { goto } from '$app/navigation';
+    import { showCreateBucket } from '$routes/(console)/project-[project]/storage/+page.svelte';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
+    export let allowedExtension: string = '*';
     export let selectedBucket: string = null;
     export let selectedFile: string = null;
     export let onSelect: (e: Models.File) => void;
@@ -126,7 +129,11 @@
         sdk.forProject.storage
             .listFiles(
                 currentBucket.$id,
-                [Query.startsWith('mimeType', mimeTypeQuery), Query.orderDesc('$createdAt')],
+                [
+                    Query.startsWith('mimeType', mimeTypeQuery),
+                    Query.endsWith('name', `.${allowedExtension}`),
+                    Query.orderDesc('$createdAt')
+                ],
                 $search || undefined
             )
             .then((response) => {
@@ -134,12 +141,16 @@
                     searchEnabled = response.total > 0;
                 }
 
+                console.log(JSON.stringify(response, null, 2));
+
                 return response;
             });
 
     $: if ($search) {
         resetFile();
     }
+
+    $: extension = allowedExtension === '*' ? mimeTypeQuery : `.${allowedExtension}`;
 </script>
 
 <svelte:document on:visibilitychange={handleVisibilityChange} />
@@ -214,7 +225,7 @@
                                             type="file"
                                             tabindex="-1"
                                             class="u-hide"
-                                            accept={mimeTypeQuery}
+                                            accept={extension}
                                             on:change={uploadFile}
                                             bind:this={fileSelector} />
                                         {#if uploading}
@@ -248,7 +259,7 @@
                                                 columns={4}>
                                                 {#each response?.files as file}
                                                     <Card.Selector
-                                                        group="files"
+                                                        bind:group={selectedFile}
                                                         name="files"
                                                         padding="xxs"
                                                         title={file.name}
@@ -332,17 +343,15 @@
                                             </Table.Root>
                                         {/if}
                                     {:else if $search}
-                                        <Empty
-                                            type="secondary"
-                                            title={`Sorry we couldn't find "${$search}"`}
-                                            description="There are no files that match your search.">
-                                            <Button
-                                                secondary
-                                                slot="actions"
-                                                on:click={() => ($search = '')}
-                                                >Clear search
+                                        <EmptySearch
+                                            hidePages
+                                            hidePagination
+                                            bind:search={$search}
+                                            target="files">
+                                            <Button secondary on:click={() => ($search = '')}>
+                                                Clear search
                                             </Button>
-                                        </Empty>
+                                        </EmptySearch>
                                     {:else}
                                         <Empty title="No files found within this bucket.">
                                             <Button
@@ -362,8 +371,10 @@
                             <Button
                                 slot="actions"
                                 secondary
-                                external
-                                href={`${base}/project-${page.params.project}/storage`}>
+                                on:click={async () => {
+                                    await goto(`${base}/project-${page.params.project}/storage`);
+                                    $showCreateBucket = true;
+                                }}>
                                 Create bucket
                             </Button>
                         </Empty>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index d2a546179..8a4ceac00 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -191,5 +191,5 @@
 
 {#if showImportCSV}
     <!-- CSVs can be text/plain or text/csv sometimes! -->
-    <FilePicker {onSelect} mimeTypeQuery="text/" bind:show={showImportCSV} />
+    <FilePicker {onSelect} mimeTypeQuery="text/" allowedExtension="csv" bind:show={showImportCSV} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index f71d0e829..298ea4ead 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -32,7 +32,8 @@
         IconPencil,
         IconPlus,
         IconSwitchHorizontal,
-        IconTrash
+        IconTrash,
+        IconViewList
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -55,7 +56,7 @@
         ip: IconLocationMarker,
         url: IconLink,
         email: IconLink,
-        enum: IconSwitchHorizontal
+        enum: IconViewList
     };
 
     function getAttributeStatusBadge(status: string): ComponentProps<Badge>['type'] {

From ca8b32808a192bd00f3b71b472911e15b1bfaf0e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Apr 2025 14:05:24 +0530
Subject: [PATCH 22/36] fix: tabs state calculation.

---
 .../collection-[collection]/header.svelte     | 86 ++++++++++---------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
index e4b58dfd1..4e6d36737 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -8,46 +8,52 @@
     import { collection } from './store';
     import { isTabletViewport } from '$lib/stores/viewport';
 
-    $: projectId = page.params.project;
-    $: databaseId = page.params.database;
-    $: collectionId = page.params.collection;
-    $: path = `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
-    $: tabs = [
-        {
-            href: path,
-            title: 'Documents',
-            event: 'documents',
-            hasChildren: true
-        },
-        {
-            href: `${path}/attributes`,
-            title: 'Attributes',
-            event: 'attributes'
-        },
-        {
-            href: `${path}/indexes`,
-            title: 'Indexes',
-            event: 'indexes'
-        },
-        {
-            href: `${path}/activity`,
-            title: 'Activity',
-            event: 'activity',
-            hasChildren: true
-        },
-        {
-            href: `${path}/usage`,
-            title: 'Usage',
-            event: 'usage',
-            hasChildren: true
-        },
-        {
-            href: `${path}/settings`,
-            title: 'Settings',
-            event: 'settings',
-            disabled: !$canWriteCollections
-        }
-    ].filter((tab) => !tab.disabled);
+    const projectId = $derived(page.params.project);
+    const databaseId = $derived(page.params.database);
+    const collectionId = $derived(page.params.collection);
+
+    const path = $derived(
+        `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`
+    );
+
+    const tabs = $derived.by(() =>
+        [
+            {
+                href: path,
+                title: 'Documents',
+                event: 'documents',
+                hasChildren: true
+            },
+            {
+                href: `${path}/attributes`,
+                title: 'Attributes',
+                event: 'attributes'
+            },
+            {
+                href: `${path}/indexes`,
+                title: 'Indexes',
+                event: 'indexes'
+            },
+            {
+                href: `${path}/activity`,
+                title: 'Activity',
+                event: 'activity',
+                hasChildren: true
+            },
+            {
+                href: `${path}/usage`,
+                title: 'Usage',
+                event: 'usage',
+                hasChildren: true
+            },
+            {
+                href: `${path}/settings`,
+                title: 'Settings',
+                event: 'settings',
+                disabled: !$canWriteCollections
+            }
+        ].filter((tab) => !tab.disabled)
+    );
 </script>
 
 <div style:margin-top={$isTabletViewport ? '48px' : 0}>

From b8da104150bfde1967b801fba880f7f8797bf10b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Apr 2025 15:02:58 +0530
Subject: [PATCH 23/36] update: batch delete to keys.

---
 .../overview/(components)/delete.svelte       | 14 ++---
 .../overview/(components)/deleteBatch.svelte  | 63 +++++++++++++++++++
 .../overview/(components)/table.svelte        | 44 ++++++++++---
 .../project-[project]/overview/store.ts       | 14 ++++-
 4 files changed, 117 insertions(+), 18 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte

diff --git a/src/routes/(console)/project-[project]/overview/(components)/delete.svelte b/src/routes/(console)/project-[project]/overview/(components)/delete.svelte
index 230adeb2a..74d068bde 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/delete.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/delete.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-    import { goto, invalidate } from '$app/navigation';
+    import { page } from '$app/state';
     import { base } from '$app/paths';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import Confirm from '$lib/components/confirm.svelte';
-    import { Dependencies } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
     import { type Models } from '@appwrite.io/console';
-    import { page } from '$app/stores';
+    import { goto, invalidate } from '$app/navigation';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
 
     export let showDelete = false;
     export let keyType: 'api' | 'dev' = 'api';
     export let key: Models.DevKey | Models.Key;
 
-    const projectId = $page.params.project;
+    const projectId = page.params.project;
 
     const isApiKey = keyType === 'api';
     const label = isApiKey ? 'API' : 'Dev';
diff --git a/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte b/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
new file mode 100644
index 000000000..dc7dff58a
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { base } from '$app/paths';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { goto, invalidate } from '$app/navigation';
+    import Confirm from '$lib/components/confirm.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+    export let keyIds: string[] = [];
+    export let keyType: 'api' | 'dev' = 'api';
+
+    const projectId = page.params.project;
+
+    const isApiKey = keyType === 'api';
+    const label = isApiKey ? 'API' : 'dev';
+    const slug = isApiKey ? 'keys' : 'dev-keys';
+    const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+    const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
+    let error: string;
+
+    async function handleDelete() {
+        try {
+            await Promise.all(
+                keyIds.map((key) =>
+                    isApiKey
+                        ? sdk.forConsole.projects.deleteKey(projectId, key)
+                        : sdk.forConsole.projects.deleteDevKey(projectId, key)
+                )
+            );
+
+            await invalidate(dependency);
+            showDelete = false;
+
+            addNotification({
+                type: 'success',
+                message: `${keyIds.length} ${label} key${keyIds.length > 1 ? 's' : ''} deleted`
+            });
+
+            trackEvent(event);
+            await goto(`${base}/project-${projectId}/overview/${slug}`);
+        } catch (e) {
+            error = e.message;
+            trackError(e, event);
+        } finally {
+            keyIds = [];
+        }
+    }
+</script>
+
+<Confirm
+    onSubmit={handleDelete}
+    title={`Delete ${label} key`}
+    bind:open={showDelete}
+    bind:error>
+    <p>
+        Are you sure you want to delete <b>{keyIds.length}</b>
+        {label} key{keyIds.length > 1 ? 's' : ''}?
+    </p>
+</Confirm>
diff --git a/src/routes/(console)/project-[project]/overview/(components)/table.svelte b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
index c67cafb50..e879facb8 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/table.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/table.svelte
@@ -3,15 +3,21 @@
     import { page } from '$app/state';
     import { goto } from '$app/navigation';
     import { Empty } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import { canWriteKeys } from '$lib/stores/roles';
     import type { Models } from '@appwrite.io/console';
-    import { showDevKeysCreateModal } from '../store';
-    import { Badge, Layout, Table } from '@appwrite.io/pink-svelte';
     import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { devKeyColumns, keyColumns, showDevKeysCreateModal } from '../store';
+    import { Badge, FloatingActionBar, Layout, Table } from '@appwrite.io/pink-svelte';
+    import DeleteBatch from './deleteBatch.svelte';
+    import { capitalize } from '$lib/helpers/string';
 
     export let keyType: 'api' | 'dev' = 'api';
     export let keys: Models.KeyList | Models.DevKeyList;
 
+    let showDeleteModal = false;
+    let selectedRows: string[] = [];
+
     const isApiKey = keyType === 'api';
     const label = isApiKey ? 'API' : 'dev';
     const slug = isApiKey ? 'keys' : 'dev-keys';
@@ -44,20 +50,19 @@
         else
             return 'Dev keys allow bypassing rate limits and accessing more detailed error messages while in development.';
     }
+
+    const columns = isApiKey ? $keyColumns : $devKeyColumns;
 </script>
 
 {#if keys.total}
-    <Table.Root columns={isApiKey ? 4 : 3} let:root>
+    <Table.Root let:root {columns} bind:selectedRows allowSelection={$canWriteKeys}>
         <svelte:fragment slot="header" let:root>
-            <Table.Header.Cell {root}>Name</Table.Header.Cell>
-            <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
-            <Table.Header.Cell {root}>Expiration date</Table.Header.Cell>
-            {#if isApiKey}
-                <Table.Header.Cell {root}>Scopes</Table.Header.Cell>
-            {/if}
+            {#each columns as column}
+                <Table.Header.Cell column={column.id} {root}>{column.title}</Table.Header.Cell>
+            {/each}
         </svelte:fragment>
         {#each getKeys() as key (key.$id)}
-            <Table.Row.Link href={`${slug}/${key.$id}`} {root}>
+            <Table.Row.Link id={key.$id} href={`${slug}/${key.$id}`} {root}>
                 <Table.Cell {root}>
                     {key.name}
                 </Table.Cell>
@@ -101,3 +106,22 @@
             }
         }} />
 {/if}
+
+{#if selectedRows.length > 0}
+    <FloatingActionBar>
+        <svelte:fragment slot="start">
+            <Badge content={selectedRows.length.toString()} />
+            <span>
+                {capitalize(label)}
+                {selectedRows.length > 1 ? 'keys' : 'key'}
+                selected
+            </span>
+        </svelte:fragment>
+        <svelte:fragment slot="end">
+            <Button text on:click={() => (selectedRows = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDeleteModal = true)}>Delete</Button>
+        </svelte:fragment>
+    </FloatingActionBar>
+{/if}
+
+<DeleteBatch {keyType} bind:keyIds={selectedRows} bind:showDelete={showDeleteModal} />
diff --git a/src/routes/(console)/project-[project]/overview/store.ts b/src/routes/(console)/project-[project]/overview/store.ts
index 94a931569..3adf1b9fc 100644
--- a/src/routes/(console)/project-[project]/overview/store.ts
+++ b/src/routes/(console)/project-[project]/overview/store.ts
@@ -1,7 +1,8 @@
 import { sdk } from '$lib/stores/sdk';
 import { cachedStore } from '$lib/helpers/cache';
-import { writable, type Writable } from 'svelte/store';
+import { get, readable, writable, type Writable } from 'svelte/store';
 import type { Models, ProjectUsageRange } from '@appwrite.io/console';
+import type { Column } from '$lib/helpers/types';
 
 export const usage = cachedStore<
     Models.UsageProject,
@@ -20,3 +21,14 @@ export const usage = cachedStore<
 export const selectedTab: Writable<'platforms' | 'keys' | 'dev-keys'> = writable('platforms');
 
 export const showDevKeysCreateModal: Writable<boolean> = writable(false);
+
+export const devKeyColumns = readable<Column[]>([
+    { id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
+    { id: 'last_accessed', title: 'Last accessed', type: 'datetime', width: { min: 120 } },
+    { id: 'expiration', title: 'Expiration date', type: 'datetime', width: { min: 120 } }
+]);
+
+export const keyColumns = readable<Column[]>([
+    ...get(devKeyColumns),
+    { id: 'scopes', title: 'Scopes', type: 'string', width: { min: 120 } }
+]);

From bc5a31f3ace5238622f0857149c5f7c8679a71e4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Apr 2025 19:20:31 +0530
Subject: [PATCH 24/36] bump: lockfile.

---
 pnpm-lock.yaml | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd1a4e68f..795347916 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -221,8 +221,8 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -242,8 +242,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -3445,7 +3445,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c(svelte@5.27.0)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.27.0)':
     dependencies:
       svelte: 5.27.0
 
@@ -3462,9 +3462,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@12075ba(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@12075ba0a81ce1c8ef6f31a9951b42369eab478c(svelte@5.27.0)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.27.0)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.27.0))(svelte@5.27.0)
       '@melt-ui/svelte': 0.86.6(svelte@5.27.0)

From e0d93a0cd9c020a5fd62582a097f0f3c58b7e23b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Apr 2025 15:08:53 +0530
Subject: [PATCH 25/36] fix: designs on file picker; update: misc. logic here
 and there.

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  26 +-
 src/lib/components/csvImportBox.svelte        |  19 +-
 src/lib/components/filePicker.svelte          | 669 +++++++++++-------
 .../collection-[collection]/+page.svelte      |  54 +-
 5 files changed, 492 insertions(+), 278 deletions(-)

diff --git a/package.json b/package.json
index c8547862e..de203a8b9 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bd21ff7f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1c607c0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69f1af5b0..cd44cbe66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,13 +16,13 @@ importers:
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
         specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f(svelte@5.25.3)
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f(svelte@5.27.0)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bd21ff7f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bd21ff7f(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1c607c0
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1c607c0(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -221,14 +221,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1c607c00c8ac325d51241066f9c74a9dfdfb8fcd':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1c607c00c8ac325d51241066f9c74a9dfdfb8fcd}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f1fe1b018f3ef6aa6091874b28cfc4554':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f1fe1b018f3ef6aa6091874b28cfc4554}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -242,8 +242,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bd21ff7f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bd21ff7f}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1c607c0':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1c607c0}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -3445,11 +3445,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@61868a9': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1c607c00c8ac325d51241066f9c74a9dfdfb8fcd(svelte@5.27.0)':
     dependencies:
       svelte: 5.27.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f1fe1b018f3ef6aa6091874b28cfc4554(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f(svelte@5.27.0)':
     dependencies:
       svelte: 5.27.0
 
@@ -3462,9 +3462,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@bd21ff7f(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1c607c0(react-dom@18.3.1(react@18.3.1))(svelte@5.27.0)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f1fe1b018f3ef6aa6091874b28cfc4554(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1c607c00c8ac325d51241066f9c74a9dfdfb8fcd(svelte@5.27.0)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.27.0))(svelte@5.27.0)
       '@melt-ui/svelte': 0.86.6(svelte@5.27.0)
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 0a76b7ff0..d3bd62888 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -29,15 +29,21 @@
     async function showCompletionNotification(
         databaseId: string,
         collectionId: string,
-        status: string,
-        errors: string = ''
+        importData: Payload
     ) {
         const projectId = page.params.project;
         await invalidate(Dependencies.DOCUMENTS);
         const url = `${base}/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
 
-        const type = status === 'completed' ? 'success' : 'error';
-        const message = status === 'completed' ? 'CSV import finished successfully.' : `${errors}`;
+        // extract clean message from nested backend error.
+        const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
+        const actualMessage = match?.[1];
+
+        const type = importData.status === 'completed' ? 'success' : 'error';
+        const message =
+            importData.status === 'completed'
+                ? 'CSV import finished successfully.'
+                : `${actualMessage}`;
 
         addNotification({
             type,
@@ -95,10 +101,7 @@
         });
 
         if (status === 'completed' || status === 'failed') {
-            // extract clean message from nested backend error.
-            const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
-            const actualMessage = match?.[1];
-            await showCompletionNotification(databaseId, collectionId, status, actualMessage);
+            await showCompletionNotification(databaseId, collectionId, importData);
         }
     }
 
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 410973265..b090759e1 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -1,32 +1,34 @@
 <script lang="ts">
     import { EmptySearch, Id } from '.';
-    import { Button } from '$lib/elements/forms';
-    import { sdk } from '$lib/stores/sdk';
-    import { ID, Query, Permission, Role } from '@appwrite.io/console';
-    import type { Models } from '@appwrite.io/console';
-    import { calculateSize } from '$lib/helpers/sizeConvertion';
-    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
-    import { writable } from 'svelte/store';
     import { onMount } from 'svelte';
     import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { writable } from 'svelte/store';
+    import { Button, InputSelect } from '$lib/elements/forms';
     import DualTimeView from './dualTimeView.svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
+    import { ID, Query, Permission, Role } from '@appwrite.io/console';
     import {
-        Layout,
-        Typography,
-        Modal,
         ActionMenu,
-        Table,
-        Spinner,
-        ToggleButton,
-        Selector,
-        Empty,
         Card,
-        Divider
+        Divider,
+        Empty,
+        Layout,
+        Modal,
+        Selector,
+        Spinner,
+        Table,
+        ToggleButton,
+        Tooltip,
+        Typography
     } from '@appwrite.io/pink-svelte';
     import Form from '$lib/elements/forms/form.svelte';
-    import { IconCheck, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
-    import { goto } from '$app/navigation';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
     import { showCreateBucket } from '$routes/(console)/project-[project]/storage/+page.svelte';
 
     export let show: boolean;
@@ -35,6 +37,9 @@
     export let selectedBucket: string = null;
     export let selectedFile: string = null;
     export let onSelect: (e: Models.File) => void;
+    export let gridImageDimensions: { imageHeight?: number; imageWidth?: number } = {
+        imageHeight: 148
+    };
 
     let search = writable('');
     let searchEnabled = false;
@@ -124,25 +129,32 @@
         return response;
     }
 
+    function truncatedFilename(file: Models.File, max: number = 15): string {
+        const length = file.name.length;
+        return length > 15 ? `${file.name.substring(0, max)}...` : file.name;
+    }
+
+    function getProperQuery(): string[] {
+        let query = [Query.orderDesc('$createdAt')];
+
+        if (allowedExtension === '*') {
+            query.push(Query.startsWith('mimeType', mimeTypeQuery));
+        } else {
+            Query.endsWith('name', `.${allowedExtension}`);
+        }
+
+        return query;
+    }
+
     $: files =
         currentBucket &&
         sdk.forProject.storage
-            .listFiles(
-                currentBucket.$id,
-                [
-                    Query.startsWith('mimeType', mimeTypeQuery),
-                    Query.endsWith('name', `.${allowedExtension}`),
-                    Query.orderDesc('$createdAt')
-                ],
-                $search || undefined
-            )
+            .listFiles(currentBucket.$id, getProperQuery(), $search || undefined)
             .then((response) => {
                 if ($search === '') {
                     searchEnabled = response.total > 0;
                 }
 
-                console.log(JSON.stringify(response, null, 2));
-
                 return response;
             });
 
@@ -151,236 +163,359 @@
     }
 
     $: extension = allowedExtension === '*' ? mimeTypeQuery : `.${allowedExtension}`;
+
+    $: console.log(`Allowed extensions: ${allowedExtension}, MimeType: ${mimeTypeQuery}`);
 </script>
 
 <svelte:document on:visibilitychange={handleVisibilityChange} />
 
-<Form {onSubmit}>
+<Form {onSubmit} isModal class="file-picker-modal-form">
     <Modal bind:open={show} title="Select file" size="l">
-        <Layout.Stack direction="row" height="50vh">
+        <Layout.Stack direction={$isSmallViewport ? 'column' : 'row'} height="50vh" gap="none">
             <!-- min-width to avoid a layout-shift -->
-            <aside style="min-width: 200px">
-                <Typography.Caption variant="500">Buckets</Typography.Caption>
+            <aside>
+                {#if !$isSmallViewport}
+                    <Typography.Caption variant="500">Buckets</Typography.Caption>
+                {/if}
+
                 {#await buckets}
-                    <div class="u-flex u-main-center">
-                        <div class="loader"></div>
-                    </div>
+                    {#if $isSmallViewport}
+                        <!-- disabled state -->
+                        <div style:padding-block-start="1rem">
+                            <InputSelect
+                                required
+                                disabled
+                                id="bucket"
+                                options={[]}
+                                label="Bucket"
+                                placeholder="Loading buckets..." />
+                        </div>
+                    {/if}
                 {:then response}
-                    <ActionMenu.Root width="200px">
-                        {#each response.buckets as bucket}
-                            {@const isSelected = bucket.$id === selectedBucket}
-                            <div class="action-button" class:active-item={isSelected}>
-                                <ActionMenu.Item.Button on:click={() => selectBucket(bucket)}>
-                                    {bucket.name}
-                                </ActionMenu.Item.Button>
-                            </div>
-                        {:else}
-                            <ActionMenu.Item.Button>No buckets found</ActionMenu.Item.Button>
-                        {/each}
-                    </ActionMenu.Root>
+                    {#if $isSmallViewport}
+                        <div style:padding-block-start="1rem">
+                            <InputSelect
+                                required
+                                id="bucket"
+                                label="Bucket"
+                                bind:value={selectedBucket}
+                                placeholder="Select bucket"
+                                on:change={(event) => {
+                                    const bucketId = event.detail;
+                                    const bucket = response.buckets.find(
+                                        (bucket) => bucket.$id === bucketId
+                                    );
+                                    selectBucket(bucket);
+                                }}
+                                options={response.buckets.map((bucket) => {
+                                    return {
+                                        value: bucket.$id,
+                                        label: `${bucket.name}`
+                                    };
+                                })} />
+                        </div>
+                    {:else}
+                        <div class="action-menu-holder">
+                            <ActionMenu.Root width="180px">
+                                {#each response.buckets as bucket}
+                                    {@const isSelected = bucket.$id === selectedBucket}
+                                    <div class="action-button" class:active-item={isSelected}>
+                                        <ActionMenu.Item.Button
+                                            on:click={() => selectBucket(bucket)}>
+                                            {bucket.name}
+                                        </ActionMenu.Item.Button>
+                                    </div>
+                                {:else}
+                                    <ActionMenu.Item.Button
+                                        >No buckets found</ActionMenu.Item.Button>
+                                {/each}
+                            </ActionMenu.Root>
+                        </div>
+                    {/if}
                 {/await}
             </aside>
 
-            <Divider vertical />
+            <div style:padding-inline-start="1rem" style:opacity={$isSmallViewport ? 0 : 1}>
+                <Divider vertical />
+            </div>
 
-            <Layout.Stack>
-                {#await buckets then response}
-                    {#if response?.total}
-                        {#if currentBucket}
-                            <Layout.Stack>
-                                {#key currentBucket?.$id}
+            <div class="files-section">
+                <Layout.Stack gap="l">
+                    {#if $isSmallViewport}
+                        <Button
+                            secondary
+                            disabled={uploading}
+                            on:click={() => fileSelector.click()}>
+                            <input
+                                type="file"
+                                tabindex="-1"
+                                class="u-hide"
+                                accept={extension}
+                                on:change={uploadFile}
+                                bind:this={fileSelector} />
+                            {#if uploading}
+                                <div class="loader is-small"></div>
+                                <span>Uploading</span>
+                            {:else}
+                                <span class="icon-upload" aria-hidden="true"></span>
+                                <span>Upload</span>
+                            {/if}
+                        </Button>
+                    {/if}
+
+                    {#await buckets then response}
+                        {#if response?.total}
+                            {#if currentBucket}
+                                <Layout.Stack>
+                                    {#if !$isSmallViewport}
+                                        {#key currentBucket?.$id}
+                                            <Layout.Stack direction="row" alignItems="center">
+                                                <Typography.Title size="s"
+                                                    >{currentBucket?.name}</Typography.Title>
+                                                <Id value={currentBucket?.$id} event="bucket">
+                                                    {currentBucket?.$id}
+                                                </Id>
+                                            </Layout.Stack>
+                                        {/key}
+                                    {/if}
                                     <Layout.Stack direction="row" alignItems="center">
-                                        <Typography.Title>{currentBucket?.name}</Typography.Title>
-                                        <Id value={currentBucket?.$id} event="bucket">
-                                            {currentBucket?.$id}
-                                        </Id>
-                                    </Layout.Stack>
-                                {/key}
-                                <Layout.Stack direction="row" alignItems="center">
-                                    <InputSearch
-                                        placeholder="Search files"
-                                        bind:value={$search}
-                                        disabled={!searchEnabled} />
-                                    <ToggleButton
-                                        bind:active={view}
-                                        buttons={[
-                                            {
-                                                id: 'list',
-                                                label: 'list view',
-                                                disabled: !searchEnabled,
-                                                icon: IconViewList
-                                            },
-                                            {
-                                                id: 'grid',
-                                                label: 'grid view',
-                                                disabled: !searchEnabled,
-                                                icon: IconViewGrid
-                                            }
-                                        ]} />
-                                    <Button
-                                        secondary
-                                        disabled={uploading}
-                                        on:click={() => fileSelector.click()}>
-                                        <input
-                                            type="file"
-                                            tabindex="-1"
-                                            class="u-hide"
-                                            accept={extension}
-                                            on:change={uploadFile}
-                                            bind:this={fileSelector} />
-                                        {#if uploading}
-                                            <div class="loader is-small"></div>
-                                            <span>Uploading</span>
-                                        {:else}
-                                            <span class="icon-upload" aria-hidden="true"></span>
-                                            <span>Upload</span>
-                                        {/if}
-                                    </Button>
-                                </Layout.Stack>
-                            </Layout.Stack>
-
-                            {#if files}
-                                {#await files}
-                                    <Layout.Stack
-                                        justifyContent="center"
-                                        alignContent="center"
-                                        alignItems="center"
-                                        height="100%">
-                                        <Spinner size="l" />
-                                        <span>Loading files...</span>
-                                    </Layout.Stack>
-                                {:then response}
-                                    {#if response?.files?.length}
-                                        {#if view === 'grid'}
-                                            <Layout.Grid
-                                                columnsXXS={1}
-                                                columnsXS={2}
-                                                columnsS={3}
-                                                columns={4}>
-                                                {#each response?.files as file}
-                                                    <Card.Selector
-                                                        bind:group={selectedFile}
-                                                        name="files"
-                                                        padding="xxs"
-                                                        title={file.name}
-                                                        value={file.$id}
-                                                        src={getPreview(
-                                                            currentBucket.$id,
-                                                            file.$id,
-                                                            360
-                                                        )}
-                                                        on:click={() => selectFile(file)} />
-                                                {/each}
-                                            </Layout.Grid>
-                                        {/if}
-                                        {#if view === 'list'}
-                                            <Table.Root
-                                                let:root
-                                                columns={[
-                                                    { id: 'filename', width: { min: 140 } },
-                                                    { id: 'id', width: { min: 100 } },
-                                                    { id: 'type', width: { min: 100 } },
-                                                    { id: 'size', width: { min: 100 } },
-                                                    { id: 'created', width: { min: 120 } }
-                                                ]}>
-                                                <svelte:fragment slot="header" let:root>
-                                                    <Table.Header.Cell column="filename" {root}>
-                                                        Filename
-                                                    </Table.Header.Cell>
-                                                    <Table.Header.Cell column="id" {root}>
-                                                        ID
-                                                    </Table.Header.Cell>
-                                                    <Table.Header.Cell column="type" {root}>
-                                                        Type
-                                                    </Table.Header.Cell>
-                                                    <Table.Header.Cell column="size" {root}>
-                                                        Size
-                                                    </Table.Header.Cell>
-                                                    <Table.Header.Cell column="created" {root}>
-                                                        Created
-                                                    </Table.Header.Cell>
-                                                </svelte:fragment>
-                                                {#each response?.files as file (file.$id)}
-                                                    <Table.Row.Button
-                                                        {root}
-                                                        on:click={() => selectFile(file)}>
-                                                        <Table.Cell column="filename" {root}>
-                                                            <div
-                                                                class="u-inline-flex u-cross-center u-gap-12">
-                                                                <Selector.Radio
-                                                                    size="s"
-                                                                    name="file"
-                                                                    value={file.$id}
-                                                                    bind:group={selectedFile} />
-                                                                <img
-                                                                    style:border-radius="var(--border-radius-xsmall)"
-                                                                    width="28"
-                                                                    height="28"
-                                                                    src={getPreview(
-                                                                        currentBucket.$id,
-                                                                        file.$id
-                                                                    )}
-                                                                    alt={file.name} />
-                                                                <Typography.Text truncate>
-                                                                    {file.name}
-                                                                </Typography.Text>
-                                                            </div>
-                                                        </Table.Cell>
-                                                        <Table.Cell column="id" {root}>
-                                                            <Id value={file.$id}>{file.$id}</Id>
-                                                        </Table.Cell>
-                                                        <Table.Cell column="type" {root}>
-                                                            {file.mimeType}
-                                                        </Table.Cell>
-                                                        <Table.Cell column="size" {root}>
-                                                            {calculateSize(file.sizeOriginal)}
-                                                        </Table.Cell>
-                                                        <Table.Cell column="created" {root}>
-                                                            <DualTimeView time={file.$createdAt} />
-                                                        </Table.Cell>
-                                                    </Table.Row.Button>
-                                                {/each}
-                                            </Table.Root>
-                                        {/if}
-                                    {:else if $search}
-                                        <EmptySearch
-                                            hidePages
-                                            hidePagination
-                                            bind:search={$search}
-                                            target="files">
-                                            <Button secondary on:click={() => ($search = '')}>
-                                                Clear search
-                                            </Button>
-                                        </EmptySearch>
-                                    {:else}
-                                        <Empty title="No files found within this bucket.">
+                                        <InputSearch
+                                            placeholder="Search files"
+                                            bind:value={$search}
+                                            disabled={!searchEnabled} />
+                                        <ToggleButton
+                                            bind:active={view}
+                                            buttons={[
+                                                {
+                                                    id: 'list',
+                                                    label: 'list view',
+                                                    disabled: !searchEnabled,
+                                                    icon: IconViewList
+                                                },
+                                                {
+                                                    id: 'grid',
+                                                    label: 'grid view',
+                                                    disabled: !searchEnabled,
+                                                    icon: IconViewGrid
+                                                }
+                                            ]} />
+                                        {#if !$isSmallViewport}
                                             <Button
                                                 secondary
-                                                slot="actions"
                                                 disabled={uploading}
-                                                on:click={() => fileSelector.click()}
-                                                >Upload file
+                                                on:click={() => fileSelector.click()}>
+                                                <input
+                                                    type="file"
+                                                    tabindex="-1"
+                                                    class="u-hide"
+                                                    accept={extension}
+                                                    on:change={uploadFile}
+                                                    bind:this={fileSelector} />
+                                                {#if uploading}
+                                                    <div class="loader is-small"></div>
+                                                    <span>Uploading</span>
+                                                {:else}
+                                                    <span class="icon-upload" aria-hidden="true"
+                                                    ></span>
+                                                    <span>Upload</span>
+                                                {/if}
                                             </Button>
-                                        </Empty>
-                                    {/if}
-                                {/await}
+                                        {/if}
+                                    </Layout.Stack>
+                                </Layout.Stack>
+
+                                {#if files}
+                                    {#await files}
+                                        <Layout.Stack
+                                            justifyContent="center"
+                                            alignContent="center"
+                                            alignItems="center"
+                                            gap="xl"
+                                            height="100%">
+                                            <Spinner size="l" />
+                                            <span>Loading files...</span>
+                                        </Layout.Stack>
+                                    {:then response}
+                                        {#if response?.files?.length}
+                                            {#if view === 'grid'}
+                                                {#if $isSmallViewport}
+                                                    <Layout.Stack gap="l">
+                                                        {#each response?.files as file}
+                                                            <Card.Selector
+                                                                radius="s"
+                                                                name="files"
+                                                                padding="xxs"
+                                                                imageHeight={32}
+                                                                imageWidth={32}
+                                                                imageRadius="xs"
+                                                                bind:group={selectedFile}
+                                                                title={truncatedFilename(file, 14)}
+                                                                value={file.$id}
+                                                                src={getPreview(
+                                                                    currentBucket.$id,
+                                                                    file.$id,
+                                                                    360
+                                                                )}
+                                                                on:click={() => selectFile(file)} />
+                                                        {/each}
+                                                    </Layout.Stack>
+                                                {:else}
+                                                    <Layout.Grid
+                                                        columnsXXS={1}
+                                                        columnsXS={2}
+                                                        columnsS={3}
+                                                        columns={4}>
+                                                        {#each response?.files as file}
+                                                            <div class="image-selector">
+                                                                <Card.Selector
+                                                                    radius="s"
+                                                                    name="files"
+                                                                    padding="xxs"
+                                                                    imageWidth={gridImageDimensions.imageWidth}
+                                                                    imageHeight={gridImageDimensions.imageHeight}
+                                                                    imageRadius="xs"
+                                                                    bind:group={selectedFile}
+                                                                    title={truncatedFilename(
+                                                                        file,
+                                                                        14
+                                                                    )}
+                                                                    value={file.$id}
+                                                                    src={getPreview(
+                                                                        currentBucket.$id,
+                                                                        file.$id,
+                                                                        360
+                                                                    )}
+                                                                    on:click={() =>
+                                                                        selectFile(file)} />
+                                                            </div>
+                                                        {/each}
+                                                    </Layout.Grid>
+                                                {/if}
+                                            {/if}
+                                            {#if view === 'list'}
+                                                <Table.Root
+                                                    let:root
+                                                    columns={[
+                                                        { id: 'filename', width: { min: 225 } },
+                                                        { id: 'id', width: { min: 200 } },
+                                                        { id: 'type', width: { min: 100 } },
+                                                        { id: 'size', width: { min: 120 } },
+                                                        { id: 'created', width: { min: 140 } }
+                                                    ]}>
+                                                    <svelte:fragment slot="header" let:root>
+                                                        <Table.Header.Cell column="filename" {root}>
+                                                            Filename
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="id" {root}>
+                                                            ID
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="type" {root}>
+                                                            Type
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="size" {root}>
+                                                            Size
+                                                        </Table.Header.Cell>
+                                                        <Table.Header.Cell column="created" {root}>
+                                                            Created
+                                                        </Table.Header.Cell>
+                                                    </svelte:fragment>
+                                                    {#each response?.files as file (file.$id)}
+                                                        <Table.Row.Button
+                                                            {root}
+                                                            on:click={() => selectFile(file)}>
+                                                            <Table.Cell column="filename" {root}>
+                                                                <div
+                                                                    class="u-inline-flex u-cross-center u-gap-12">
+                                                                    <Selector.Radio
+                                                                        size="s"
+                                                                        name="file"
+                                                                        value={file.$id}
+                                                                        bind:group={selectedFile} />
+
+                                                                    <div class="preview-block">
+                                                                        <img
+                                                                            alt={file.name}
+                                                                            src={getPreview(
+                                                                                currentBucket.$id,
+                                                                                file.$id
+                                                                            )} />
+                                                                    </div>
+
+                                                                    <Tooltip
+                                                                        disabled={file.name.length <
+                                                                            15}
+                                                                        maxWidth="fit-content">
+                                                                        <Typography.Text truncate>
+                                                                            {truncatedFilename(
+                                                                                file
+                                                                            )}
+                                                                        </Typography.Text>
+
+                                                                        <span slot="tooltip">
+                                                                            {file.name}
+                                                                        </span>
+                                                                    </Tooltip>
+                                                                </div>
+                                                            </Table.Cell>
+                                                            <Table.Cell column="id" {root}>
+                                                                <Id value={file.$id}>{file.$id}</Id>
+                                                            </Table.Cell>
+                                                            <Table.Cell column="type" {root}>
+                                                                {file.mimeType}
+                                                            </Table.Cell>
+                                                            <Table.Cell column="size" {root}>
+                                                                {calculateSize(file.sizeOriginal)}
+                                                            </Table.Cell>
+                                                            <Table.Cell column="created" {root}>
+                                                                <DualTimeView
+                                                                    time={file.$createdAt} />
+                                                            </Table.Cell>
+                                                        </Table.Row.Button>
+                                                    {/each}
+                                                </Table.Root>
+                                            {/if}
+                                        {:else if $search}
+                                            <EmptySearch
+                                                hidePages
+                                                hidePagination
+                                                bind:search={$search}
+                                                target="files">
+                                                <Button secondary on:click={() => ($search = '')}>
+                                                    Clear search
+                                                </Button>
+                                            </EmptySearch>
+                                        {:else}
+                                            <Empty title="No files found within this bucket.">
+                                                <Button
+                                                    secondary
+                                                    slot="actions"
+                                                    disabled={uploading}
+                                                    on:click={() => fileSelector.click()}
+                                                    >Upload file
+                                                </Button>
+                                            </Empty>
+                                        {/if}
+                                    {/await}
+                                {/if}
                             {/if}
+                        {:else}
+                            <Empty title="No buckets found">
+                                <Button
+                                    slot="actions"
+                                    secondary
+                                    on:click={async () => {
+                                        await goto(
+                                            `${base}/project-${page.params.project}/storage`
+                                        );
+                                        $showCreateBucket = true;
+                                    }}>
+                                    Create bucket
+                                </Button>
+                            </Empty>
                         {/if}
-                    {:else}
-                        <Empty title="No buckets found">
-                            <Button
-                                slot="actions"
-                                secondary
-                                on:click={async () => {
-                                    await goto(`${base}/project-${page.params.project}/storage`);
-                                    $showCreateBucket = true;
-                                }}>
-                                Create bucket
-                            </Button>
-                        </Empty>
-                    {/if}
-                {/await}
-            </Layout.Stack>
+                    {/await}
+                </Layout.Stack>
+            </div>
         </Layout.Stack>
         <svelte:fragment slot="footer">
             <Layout.Stack direction="row" justifyContent="flex-end">
@@ -394,6 +529,44 @@
 </Form>
 
 <style>
+    :global(.file-picker-modal-form dialog .content) {
+        padding: unset !important;
+    }
+
+    aside {
+        min-width: 200px;
+        padding: var(--space-7);
+
+        @media (max-width: 768px) {
+            padding-block: unset;
+            padding-inline: var(--space-7);
+        }
+    }
+
+    .files-section {
+        width: 100%;
+        height: 100%;
+        padding: var(--space-8);
+        background: var(--bgcolor-neutral-default);
+
+        /*div.root is a table */
+        :global(&:has(div.root)) {
+            overflow: hidden !important;
+
+            @media (max-width: 768px) {
+                overflow: auto !important;
+            }
+        }
+
+        @media (max-width: 768px) {
+            overflow: auto !important;
+        }
+    }
+
+    .action-menu-holder :global(div:first-of-type) {
+        padding-inline: unset;
+    }
+
     .action-button {
         width: 100%;
         margin-block: 0.125rem;
@@ -407,4 +580,20 @@
             background-color: var(--bgcolor-neutral-secondary, #f4f4f7);
         }
     }
+
+    .preview-block {
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        border: var(--border-width-S, 1px) solid var(--border-neutral-strong, #d8d8db);
+
+        & img {
+            border-radius: 50%;
+            align-self: center;
+        }
+    }
+
+    .image-selector :global(img) {
+        border: 1px solid var(--border-neutral);
+    }
 </style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 8a4ceac00..7339d7942 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -22,6 +22,7 @@
     import type { Models } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     export let data: PageData;
 
@@ -74,21 +75,34 @@
 
 {#key page.params.collection}
     <Container>
-        <Layout.Stack direction="row" justifyContent="space-between">
-            <Filters
-                query={data.query}
-                {columns}
-                disabled={!(hasAttributes && hasValidAttributes)}
-                analyticsSource="database_documents" />
-            <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-                <ViewSelector view={data.view} {columns} hideView />
-                <Button
-                    secondary
-                    event={Click.DatabaseImportCsv}
+        <Layout.Stack direction="column" gap="xl">
+            <Layout.Stack direction="row" justifyContent="space-between">
+                <Filters
+                    query={data.query}
+                    {columns}
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    on:click={() => (showImportCSV = true)}>
-                    Import CSV
-                </Button>
+                    analyticsSource="database_documents" />
+                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+                    <ViewSelector view={data.view} {columns} hideView />
+                    <Button
+                        secondary
+                        event={Click.DatabaseImportCsv}
+                        disabled={!(hasAttributes && hasValidAttributes)}
+                        on:click={() => (showImportCSV = true)}>
+                        Import CSV
+                    </Button>
+                    {#if !$isSmallViewport}
+                        <Button
+                            disabled={!(hasAttributes && hasValidAttributes)}
+                            href={`${base}/project-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                            event="create_document">
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create document
+                        </Button>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+            {#if $isSmallViewport}
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
                     href={`${base}/project-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
@@ -96,7 +110,7 @@
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create document
                 </Button>
-            </Layout.Stack>
+            {/if}
         </Layout.Stack>
 
         {#if hasAttributes && hasValidAttributes}
@@ -191,5 +205,13 @@
 
 {#if showImportCSV}
     <!-- CSVs can be text/plain or text/csv sometimes! -->
-    <FilePicker {onSelect} mimeTypeQuery="text/" allowedExtension="csv" bind:show={showImportCSV} />
+    <FilePicker
+        {onSelect}
+        mimeTypeQuery="text/"
+        allowedExtension="csv"
+        bind:show={showImportCSV}
+        gridImageDimensions={{
+            imageHeight: 32,
+            imageWidth: 32
+        }} />
 {/if}

From 346b2c99699a958428c3cb999728cca4bb18897b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Apr 2025 11:13:29 +0530
Subject: [PATCH 26/36] fix: invalid query.

---
 src/lib/components/filePicker.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index b090759e1..814e7259f 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -140,7 +140,7 @@
         if (allowedExtension === '*') {
             query.push(Query.startsWith('mimeType', mimeTypeQuery));
         } else {
-            Query.endsWith('name', `.${allowedExtension}`);
+            query.push(Query.endsWith('name', `.${allowedExtension}`));
         }
 
         return query;

From 6602bb8d0026a168cea916cebb7c1d198cb44774 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Apr 2025 11:14:48 +0530
Subject: [PATCH 27/36] update: consistent empty views.

---
 src/lib/components/filePicker.svelte | 89 +++++++++++++++++-----------
 1 file changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 814e7259f..4b8576a50 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -485,33 +485,59 @@
                                                 </Button>
                                             </EmptySearch>
                                         {:else}
-                                            <Empty title="No files found within this bucket.">
-                                                <Button
-                                                    secondary
-                                                    slot="actions"
-                                                    disabled={uploading}
-                                                    on:click={() => fileSelector.click()}
-                                                    >Upload file
-                                                </Button>
-                                            </Empty>
+                                            <Card.Base padding="none">
+                                                <Empty
+                                                    title="No files found within this bucket."
+                                                    description="Need a hand? Learn more in our documentation.">
+                                                    <slot name="actions" slot="actions">
+                                                        <Button
+                                                            text
+                                                            external
+                                                            size="s"
+                                                            event="empty_documentation"
+                                                            href="https://appwrite.io/docs/products/storage/upload-download"
+                                                            ariaLabel="create document"
+                                                            >Documentation</Button>
+                                                        <Button
+                                                            secondary
+                                                            disabled={uploading}
+                                                            on:click={() => fileSelector.click()}
+                                                            >Upload file
+                                                        </Button>
+                                                    </slot>
+                                                </Empty>
+                                            </Card.Base>
                                         {/if}
                                     {/await}
                                 {/if}
                             {/if}
                         {:else}
-                            <Empty title="No buckets found">
-                                <Button
-                                    slot="actions"
-                                    secondary
-                                    on:click={async () => {
-                                        await goto(
-                                            `${base}/project-${page.params.project}/storage`
-                                        );
-                                        $showCreateBucket = true;
-                                    }}>
-                                    Create bucket
-                                </Button>
-                            </Empty>
+                            <Card.Base padding="none">
+                                <Empty
+                                    title="No buckets found"
+                                    description="Need a hand? Learn more in our documentation.">
+                                    <slot name="actions" slot="actions">
+                                        <Button
+                                            text
+                                            external
+                                            size="s"
+                                            event="empty_documentation"
+                                            href="https://appwrite.io/docs/products/storage/buckets"
+                                            ariaLabel="create document">Documentation</Button>
+
+                                        <Button
+                                            secondary
+                                            on:click={async () => {
+                                                await goto(
+                                                    `${base}/project-${page.params.project}/storage`
+                                                );
+                                                $showCreateBucket = true;
+                                            }}>
+                                            Create bucket
+                                        </Button>
+                                    </slot>
+                                </Empty>
+                            </Card.Base>
                         {/if}
                     {/await}
                 </Layout.Stack>
@@ -530,7 +556,12 @@
 
 <style>
     :global(.file-picker-modal-form dialog .content) {
+        overflow: hidden;
         padding: unset !important;
+
+        /* multiple scroll bars from `.content` and `.files-section` look very odd */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
     }
 
     aside {
@@ -546,20 +577,12 @@
     .files-section {
         width: 100%;
         height: 100%;
+        overflow: auto;
         padding: var(--space-8);
         background: var(--bgcolor-neutral-default);
 
-        /*div.root is a table */
-        :global(&:has(div.root)) {
-            overflow: hidden !important;
-
-            @media (max-width: 768px) {
-                overflow: auto !important;
-            }
-        }
-
-        @media (max-width: 768px) {
-            overflow: auto !important;
+        &::-webkit-scrollbar {
+            display: none;
         }
     }
 

From 2476ad5a97af6c288fa14a7cc940fa47a9709338 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 8 May 2025 09:16:13 +0530
Subject: [PATCH 28/36] address comments.

---
 src/lib/components/csvImportBox.svelte                 | 10 +++++-----
 .../collection-[collection]/store.ts                   |  1 -
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index d3bd62888..a74c3f1f6 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -6,9 +6,9 @@
     import { Dependencies } from '$lib/constants';
     import { goto, invalidate } from '$app/navigation';
     import { getProjectId } from '$lib/helpers/project';
-    import { Typography } from '@appwrite.io/pink-svelte';
     import { writable, type Writable } from 'svelte/store';
     import { addNotification } from '$lib/stores/notifications';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { type Models, type Payload, Query } from '@appwrite.io/console';
 
     type ImportItem = {
@@ -37,13 +37,13 @@
 
         // extract clean message from nested backend error.
         const match = importData.errors.join('').match(/message: '(.*)' Message:/i);
-        const actualMessage = match?.[1];
+        const errorMessage = match?.[1];
 
         const type = importData.status === 'completed' ? 'success' : 'error';
         const message =
             importData.status === 'completed'
                 ? 'CSV import finished successfully.'
-                : `${actualMessage}`;
+                : `${errorMessage}`;
 
         addNotification({
             type,
@@ -161,7 +161,7 @@
 </script>
 
 {#if showCsvImportBox}
-    <div class="box-holder u-flex u-flex-vertical u-gap-16" style="align-items: end">
+    <Layout.Stack direction="column" gap="l" alignItems="flex-end">
         <section class="upload-box">
             <header class="upload-box-header">
                 <h4 class="upload-box-title">
@@ -206,7 +206,7 @@
                 </div>
             {/each}
         </section>
-    </div>
+    </Layout.Stack>
 {/if}
 
 <style lang="scss">
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
index 8bcf4ef08..374adf90f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -27,5 +27,4 @@ export const indexes = derived(page, ($page) => $page.data.collection.indexes as
 
 export const columns = writable<Column[]>([]);
 
-// TODO: @itznotabug, check what data is received when SDK is available.
 export const isCsvImportInProgress = writable(false);

From aafa0915cfa1a4294113656b739000bbfcd4ba66 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 8 May 2025 09:25:17 +0530
Subject: [PATCH 29/36] update: simplify tab selection logic, run lint.

---
 .../auth/templates/resetEmail.svelte          | 14 +++++------
 .../overview/(components)/deleteBatch.svelte  |  6 +----
 .../project-[project]/overview/+layout.svelte | 24 +++++++++++--------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte b/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte
index cec8738bb..ebf009cf4 100644
--- a/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte
@@ -49,14 +49,14 @@
     <svelte:fragment slot="title">Reset email template?</svelte:fragment>
 
     <Layout.Stack>
-    <p class="text">
-        Are you sure you want to reset the email template?
-        <b>Default values will be set in all inputs.</b>
-    </p>
+        <p class="text">
+            Are you sure you want to reset the email template?
+            <b>Default values will be set in all inputs.</b>
+        </p>
 
-    {#if error}
-        <Alert.Inline status="warning">{error}</Alert.Inline>
-    {/if}
+        {#if error}
+            <Alert.Inline status="warning">{error}</Alert.Inline>
+        {/if}
     </Layout.Stack>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte b/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
index dc7dff58a..04a326947 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
@@ -51,11 +51,7 @@
     }
 </script>
 
-<Confirm
-    onSubmit={handleDelete}
-    title={`Delete ${label} key`}
-    bind:open={showDelete}
-    bind:error>
+<Confirm onSubmit={handleDelete} title={`Delete ${label} key`} bind:open={showDelete} bind:error>
     <p>
         Are you sure you want to delete <b>{keyIds.length}</b>
         {label} key{keyIds.length > 1 ? 's' : ''}?
diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index 5417eb03c..69c4534ce 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -52,6 +52,10 @@
         return usage.load(dates.start, dates.end, dates.period);
     }
 
+    function isTabSelected(key: string) {
+        return page.url.pathname === `${path}/${key}`;
+    }
+
     $: $registerCommands([
         {
             label: 'Add platform',
@@ -221,20 +225,20 @@
                 <Tabs>
                     <Tab
                         noscroll
+                        event="platforms"
                         href={`${path}/platforms`}
-                        selected={page.url.pathname === `${path}/platforms`}
-                        event="platforms">Platforms</Tab>
+                        selected={isTabSelected('platforms')}>Platforms</Tab>
                     <Tab
                         noscroll
+                        event="keys"
                         href={`${path}/keys`}
-                        selected={page.url.pathname === `${path}/keys`}
-                        event="keys">API keys</Tab>
-                <Tab
-                    noscroll
-                    href={`${path}/dev-keys`}
-                    selected={page.url.pathname === `${path}/dev-keys`}
-                    event="keys">Dev keys</Tab>
-            </Tabs>
+                        selected={isTabSelected('keys')}>API keys</Tab>
+                    <Tab
+                        noscroll
+                        event="keys"
+                        href={`${path}/dev-keys`}
+                        selected={isTabSelected('dev-keys')}>Dev keys</Tab>
+                </Tabs>
                 {#if $action}
                     <svelte:component this={$action} />
                 {/if}

From aff1f051b2043328c426a9b6b73387c7cb417ff1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 9 May 2025 09:15:07 +0530
Subject: [PATCH 30/36] address comments.

---
 .../overview/(components)/deleteBatch.svelte         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte b/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
index 04a326947..e7ce88b45 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/deleteBatch.svelte
@@ -12,17 +12,17 @@
     export let keyIds: string[] = [];
     export let keyType: 'api' | 'dev' = 'api';
 
-    const projectId = page.params.project;
+    let error: string;
 
     const isApiKey = keyType === 'api';
     const label = isApiKey ? 'API' : 'dev';
-    const slug = isApiKey ? 'keys' : 'dev-keys';
-    const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
-    const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
-
-    let error: string;
+    const projectId = page.params.project;
 
     async function handleDelete() {
+        const slug = isApiKey ? 'keys' : 'dev-keys';
+        const event = isApiKey ? Submit.KeyDelete : Submit.DevKeyDelete;
+        const dependency = isApiKey ? Dependencies.KEYS : Dependencies.DEV_KEYS;
+
         try {
             await Promise.all(
                 keyIds.map((key) =>

From 0692f28c545d590fb76c4a40edee447a33f849a1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 9 May 2025 09:31:19 +0530
Subject: [PATCH 31/36] remove: conflict comments.

---
 .../(components)/expirationInput.svelte         | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte b/src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
index 59c7e2207..0f92c7742 100644
--- a/src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
+++ b/src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
@@ -62,15 +62,9 @@
     ];
 
     export let value: string | null = null;
-<<<<<<<< HEAD:src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
     export let keyType: 'api' | 'dev' = 'api';
 
     const options = keyType === 'api' ? defaultOptions : limitedOptions;
-========
-    export let dateSelectorLabel: string | undefined = undefined;
-    export let selectorLabel: string | undefined = 'Expiration Date';
-    export let resourceType: string | 'key' | 'token' | undefined = 'key';
->>>>>>>> feat-pink-v2:src/lib/components/expirationInput.svelte
 
     function initExpirationSelect() {
         if (value === null || !isValidDate(value)) {
@@ -91,10 +85,6 @@
     }
     let expirationSelect = initExpirationSelect();
     let expirationCustom: string | null = value ?? null;
-    $: helper =
-        expirationSelect !== 'custom' && expirationSelect !== null
-            ? `Your ${resourceType} will expire in ${toLocaleDate(value)}`
-            : null;
 
     $: {
         if (!isSameDay(new Date(expirationSelect), new Date(value))) {
@@ -108,7 +98,6 @@
             : undefined;
 </script>
 
-<<<<<<<< HEAD:src/routes/(console)/project-[project]/overview/(components)/expirationInput.svelte
 <InputSelect
     required
     {helper}
@@ -117,10 +106,6 @@
     label="Expiration date"
     bind:value={expirationSelect} />
 
-========
-<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
-</InputSelect>
->>>>>>>> feat-pink-v2:src/lib/components/expirationInput.svelte
 {#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
+    <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
 {/if}

From eb0ebc422a117f3886ae00890e3c79cd80296973 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 9 May 2025 10:03:30 +0200
Subject: [PATCH 32/36] Update pink

---
 package.json   |  2 +-
 pnpm-lock.yaml | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 80a1d1e8a..423f49c10 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e5a77b9",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f473f04d..849fd1e75 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e5a77b9
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e5a77b9(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -264,8 +264,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e5a77b9b25e2cb5e55587e93725d7a06df0b3d94':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e5a77b9b25e2cb5e55587e93725d7a06df0b3d94}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -279,8 +279,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e5a77b9':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e5a77b9}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -3631,7 +3631,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e5a77b9b25e2cb5e55587e93725d7a06df0b3d94(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3644,9 +3644,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e5a77b9(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e5a77b9b25e2cb5e55587e93725d7a06df0b3d94(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)

From 9d5547cc239d0824477411121df68571e3b2df44 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 May 2025 14:36:51 +0200
Subject: [PATCH 33/36] fix: paddings

---
 src/lib/components/menu/subMenu.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/menu/subMenu.svelte b/src/lib/components/menu/subMenu.svelte
index 4fa080832..66186bf2a 100644
--- a/src/lib/components/menu/subMenu.svelte
+++ b/src/lib/components/menu/subMenu.svelte
@@ -37,7 +37,6 @@
 <style>
     .subMenu {
         min-width: 244px;
-        margin-inline: -4px;
         margin-block: -4px;
     }
 </style>

From df34be7ad0a6932186048a73ddbcff98ff90367c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 May 2025 14:45:43 +0200
Subject: [PATCH 34/36] chore: remove duplicate file

---
 src/lib/components/expirationInput.svelte | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/lib/components/expirationInput.svelte

diff --git a/src/lib/components/expirationInput.svelte b/src/lib/components/expirationInput.svelte
deleted file mode 100644
index e69de29bb..000000000

From abed54f074e3a24963491f484128f3270ac20cb2 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 12 May 2025 12:01:11 +0200
Subject: [PATCH 35/36] Fix: use sentence case

---
 src/routes/(public)/(guest)/login/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(public)/(guest)/login/+page.svelte b/src/routes/(public)/(guest)/login/+page.svelte
index fda23c7b4..799af47a1 100644
--- a/src/routes/(public)/(guest)/login/+page.svelte
+++ b/src/routes/(public)/(guest)/login/+page.svelte
@@ -113,11 +113,11 @@
     </svelte:fragment>
     <svelte:fragment slot="links">
         <li class="inline-links-item">
-            <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
+            <a href={`${base}/recover`}><span class="text">Forgot password?</span></a>
         </li>
         <li class="inline-links-item">
             <a href={`${base}/register${page?.url?.search ?? ''}`}>
-                <span class="text">Sign Up</span>
+                <span class="text">Sign up</span>
             </a>
         </li>
     </svelte:fragment>

From 2c760e381e7ec80b0121df5fc75db10818740e59 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 12 May 2025 12:21:23 +0200
Subject: [PATCH 36/36] Fix: import error

---
 src/lib/components/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 4e509c671..b20b38d1f 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -82,4 +82,3 @@ export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
-export { default as ExpirationInput } from './expirationInput.svelte';