From cf7ae32b5c3cd4bc0965b9e07daac2268734d39d Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 22 Oct 2024 15:30:21 +0200
Subject: [PATCH 1/7] WIP root directory component

---
 .../lib/DirectoryPicker/DirectoryItem.svelte  | 142 ++++++++++++++++
 .../DirectoryPicker/DirectoryPicker.svelte    |  49 ++++++
 v2/pink-sb/src/lib/index.ts                   |   2 +
 v2/pink-sb/src/lib/selector/Radio.svelte      |  11 +-
 .../stories/DirectoryPicker.stories.svelte    | 151 ++++++++++++++++++
 5 files changed, 354 insertions(+), 1 deletion(-)
 create mode 100644 v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
 create mode 100644 v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
 create mode 100644 v2/pink-sb/src/stories/DirectoryPicker.stories.svelte

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
new file mode 100644
index 0000000000..0fa5103e54
--- /dev/null
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+    import { DirectoryItem } from '$lib/index.js';
+    import type { Directory } from 'DirectoryPicker.svelte';
+    import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
+    import Radio from '$lib/selector/Radio.svelte';
+    import Spinner from '$lib/Spinner.svelte';
+
+    export let directory: Directory;
+    export let depth: number = 0;
+    export let isExpanded = false;
+
+    const paddingLeftStyle = `padding-left: ${32 * depth + 8}px`;
+    let radioInput;
+
+    let thumbnailLoading = true;
+    let thumbnailError = false;
+
+    function handleThumbnailLoad() {
+        thumbnailLoading = false;
+        thumbnailError = false;
+    }
+    function handleThumbnailError() {
+        thumbnailLoading = false;
+        thumbnailError = true;
+    }
+</script>
+
+<div class="container">
+    <button
+        class="folder"
+        style={paddingLeftStyle}
+        on:click={() => {
+            radioInput.checked = true;
+            if (directory.subDirectories.length > 0) {
+                isExpanded = !isExpanded;
+            }
+        }}
+    >
+        <div class="info">
+            <Radio group="directory" name="directory" bind:radioInput />
+            <div
+                class="chevron-container"
+                class:folder-open={isExpanded}
+                class:disabled={directory.subDirectories.length === 0}
+            >
+                <IconChevronRight />
+            </div>
+            <div class="meta">
+                <span>{directory.name}</span>
+                <span class="fileCount">({directory.fileCount} files)</span>
+            </div>
+        </div>
+        <div>
+            {#if thumbnailLoading}
+                <Spinner />
+            {/if}
+
+            {#if thumbnailError}
+                <div class="thumbnail-fallback" />
+            {:else}
+                <img
+                    src={directory.thumbnailUrl}
+                    alt="Directory thumbnail"
+                    class="thumbnail"
+                    class:hidden={thumbnailLoading}
+                    on:load={handleThumbnailLoad}
+                    on:error={handleThumbnailError}
+                />
+            {/if}
+        </div>
+    </button>
+    {#if isExpanded}
+        {#each directory.subDirectories as subDirectory}
+            <DirectoryItem directory={subDirectory} depth={depth + 1} />
+        {/each}
+    {/if}
+</div>
+
+<style>
+    .container {
+        width: 100%;
+    }
+    .folder {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        padding: var(--space-3, 6px) var(--space-4, 8px);
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            border-radius: var(--border-radius-S, 8px);
+            background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+        }
+    }
+    .info {
+        display: flex;
+    }
+    .chevron-container {
+        width: 20px;
+        height: 20px;
+        transition: transform ease-in-out 0.1s;
+        margin-left: 8px;
+        margin-right: 4px;
+    }
+    .folder-open {
+        transform: rotate(90deg);
+    }
+    .disabled {
+        color: var(--color-fgcolor-neutral-tertiary);
+    }
+
+    .meta {
+        display: flex;
+        gap: var(--space-2, 4px);
+    }
+
+    .fileCount {
+        color: var(--color-fgColor-neutral-tertiary, #97979b);
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .thumbnail {
+        width: var(--icon-size-l, 24px);
+        height: var(--icon-size-l, 24px);
+        flex-shrink: 0;
+        border-radius: var(--border-radius-circle, 99999px);
+    }
+
+    .thumbnail-fallback {
+        width: var(--icon-size-l, 24px);
+        height: var(--icon-size-l, 24px);
+        flex-shrink: 0;
+        border-radius: var(--border-radius-circle, 99999px);
+        border: var(--border-width-s, 1px) dashed var(--color-border-neutral-strong, #d8d8db);
+        background: var(--color-bgcolor-neutral-primary, #fff);
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
new file mode 100644
index 0000000000..5bb8e6d4a7
--- /dev/null
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import Spinner from '$lib/Spinner.svelte';
+    import { DirectoryItem } from '$lib/index.js';
+
+    export type Directory = {
+        id: string;
+        name: string;
+        fullPath: string;
+        fileCount: number;
+        thumbnailUrl: string;
+        subDirectories: Directory[];
+    };
+
+    export let directory: Directory | null = null;
+    export let isLoading = true;
+</script>
+
+<div class="container" class:isLoading>
+    {#if isLoading}<div class="loading-container">
+            <Spinner /><span>Loading directory data...</span>
+        </div>{:else}<DirectoryItem {directory} />{/if}
+</div>
+
+<style>
+    .container {
+        min-width: 560px;
+        height: 316px;
+        overflow-y: scroll;
+        flex-shrink: 0;
+        display: flex;
+        padding: var(--space-2, 4px);
+
+        border-radius: var(--border-radius-m, 12px);
+        border: var(--border-width-s, 1px) solid var(--color-border-neutral, #ededf0);
+        background: var(--color-bgcolor-neutral-primary, #fff);
+    }
+
+    .isLoading {
+        justify-content: center;
+        align-items: center;
+    }
+
+    .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--gap-m);
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 83c9dccff5..827b2a376c 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -18,6 +18,8 @@ export { default as ActionList } from './action-list/index.js';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Empty } from './Empty.svelte';
+export { default as DirectoryPicker } from './DirectoryPicker/DirectoryPicker.svelte';
+export { default as DirectoryItem } from './DirectoryPicker/DirectoryItem.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './Pagination.svelte';
diff --git a/v2/pink-sb/src/lib/selector/Radio.svelte b/v2/pink-sb/src/lib/selector/Radio.svelte
index c6dcafe295..e73c83b414 100644
--- a/v2/pink-sb/src/lib/selector/Radio.svelte
+++ b/v2/pink-sb/src/lib/selector/Radio.svelte
@@ -15,10 +15,19 @@
     export let size: $$Props['size'] = 'medium';
     export let id: string | undefined = undefined;
     export let label: $$Props['label'] = undefined;
+    export let radioInput;
 </script>
 
 <Base {label} {id}>
-    <input type="radio" bind:group {value} {id} class:small={size === 'small'} {...$$restProps} />
+    <input
+        type="radio"
+        bind:this={radioInput}
+        bind:group
+        {value}
+        {id}
+        class:small={size === 'small'}
+        {...$$restProps}
+    />
 </Base>
 
 <style lang="scss">
diff --git a/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte b/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte
new file mode 100644
index 0000000000..a577f01a28
--- /dev/null
+++ b/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte
@@ -0,0 +1,151 @@
+<script context="module" lang="ts">
+    import { DirectoryPicker } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/DirectoryPicker',
+        component: DirectoryPicker,
+        args: {
+            isLoading: false,
+            directory: {
+                id: '1',
+                name: 'Root',
+                fullPath: '/',
+                fileCount: 5,
+                thumbnailUrl: 'https://example.com/thumbnails/root.png',
+                subDirectories: [
+                    {
+                        id: '1-1',
+                        name: 'Folder A',
+                        fullPath: '/FolderA',
+                        fileCount: 3,
+                        thumbnailUrl: 'https://appwrite.io/images/logos/appwrite.svg',
+                        subDirectories: [
+                            {
+                                id: '1-1-1',
+                                name: 'SubFolder A1',
+                                fullPath: '/FolderA/SubFolderA1',
+                                fileCount: 2,
+                                thumbnailUrl: 'https://example.com/thumbnails/subFolderA1.png',
+                                subDirectories: []
+                            },
+                            {
+                                id: '1-1-2',
+                                name: 'SubFolder A2',
+                                fullPath: '/FolderA/SubFolderA2',
+                                fileCount: 1,
+                                thumbnailUrl: 'https://example.com/thumbnails/subFolderA2.png',
+                                subDirectories: [
+                                    {
+                                        id: '1-1-2-1',
+                                        name: 'SubSubFolder A2-1',
+                                        fullPath: '/FolderA/SubFolderA2/SubSubFolderA2-1',
+                                        fileCount: 0,
+                                        thumbnailUrl:
+                                            'https://example.com/thumbnails/subSubFolderA2-1.png',
+                                        subDirectories: []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        id: '1-2',
+                        name: 'Folder B',
+                        fullPath: '/FolderB',
+                        fileCount: 7,
+                        thumbnailUrl: 'https://example.com/thumbnails/folderB.png',
+                        subDirectories: [
+                            {
+                                id: '1-2-1',
+                                name: 'SubFolder B1',
+                                fullPath: '/FolderB/SubFolderB1',
+                                fileCount: 0,
+                                thumbnailUrl: 'https://example.com/thumbnails/subFolderB1.png',
+                                subDirectories: []
+                            },
+                            {
+                                id: '1-2-2',
+                                name: 'SubFolder B2',
+                                fullPath: '/FolderB/SubFolderB2',
+                                fileCount: 4,
+                                thumbnailUrl: 'https://example.com/thumbnails/subFolderB2.png',
+                                subDirectories: [
+                                    {
+                                        id: '1-2-2-1',
+                                        name: 'SubSubFolder B2-1',
+                                        fullPath: '/FolderB/SubFolderB2/SubSubFolderB2-1',
+                                        fileCount: 2,
+                                        thumbnailUrl:
+                                            'https://example.com/thumbnails/subSubFolderB2-1.png',
+                                        subDirectories: [
+                                            {
+                                                id: '1-2-2-1-1',
+                                                name: 'SubSubSubFolder B2-1-1',
+                                                fullPath:
+                                                    '/FolderB/SubFolderB2/SubSubFolderB2-1/SubSubSubFolderB2-1-1',
+                                                fileCount: 0,
+                                                thumbnailUrl:
+                                                    'https://example.com/thumbnails/subSubSubFolderB2-1-1.png',
+                                                subDirectories: []
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        id: '3-1',
+                        name: 'Folder C',
+                        fullPath: '/FolderC',
+                        fileCount: 3,
+                        thumbnailUrl: 'https://example.com/thumbnails/folderC.png',
+                        subDirectories: [
+                            {
+                                id: '3-1-1',
+                                name: 'SubFolder C1',
+                                fullPath: '/FolderC/SubFolderC1',
+                                fileCount: 2,
+                                thumbnailUrl: 'https://example.com/thumbnails/subFolderC1.png',
+                                subDirectories: []
+                            },
+                            {
+                                id: '3-1-2',
+                                name: 'SubFolder C2',
+                                fullPath: '/FolderC/SubFolderC2',
+                                fileCount: 1,
+                                thumbnailUrl: 'https://example.com/thumbnails/subFolderC2.png',
+                                subDirectories: [
+                                    {
+                                        id: '3-1-2-1',
+                                        name: 'SubSubFolder C2-1',
+                                        fullPath: '/FolderC/SubFolderA2/SubSubFolderAC-1',
+                                        fileCount: 0,
+                                        thumbnailUrl:
+                                            'https://example.com/thumbnails/subSubFolderAC-1.png',
+                                        subDirectories: []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+</script>
+
+<div class="wrapper">
+    <Story name="Default" let:args>
+        <DirectoryPicker {...args} />
+    </Story>
+</div>
+
+<style>
+    .wrapper {
+        margin: 100px auto;
+        width: fit-content;
+    }
+</style>

From eef1a20b83fe5e17c3af4083113b77d7dc6fb733 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 23 Oct 2024 10:08:54 +0200
Subject: [PATCH 2/7] Typescript fixes

---
 .../src/lib/DirectoryPicker/DirectoryItem.svelte | 16 ++++++++++++----
 .../lib/DirectoryPicker/DirectoryPicker.svelte   | 15 ++++-----------
 v2/pink-sb/src/lib/DirectoryPicker/index.ts      |  8 ++++++++
 v2/pink-sb/src/lib/selector/Radio.svelte         |  3 ++-
 4 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 v2/pink-sb/src/lib/DirectoryPicker/index.ts

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
index 0fa5103e54..ff15aac1ec 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { DirectoryItem } from '$lib/index.js';
-    import type { Directory } from 'DirectoryPicker.svelte';
     import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
     import Radio from '$lib/selector/Radio.svelte';
     import Spinner from '$lib/Spinner.svelte';
+    import type { Directory } from '$lib/DirectoryPicker/index.js';
 
     export let directory: Directory;
     export let depth: number = 0;
     export let isExpanded = false;
 
     const paddingLeftStyle = `padding-left: ${32 * depth + 8}px`;
-    let radioInput;
+    let radioInput: HTMLInputElement;
 
     let thumbnailLoading = true;
     let thumbnailError = false;
@@ -37,7 +37,7 @@
         }}
     >
         <div class="info">
-            <Radio group="directory" name="directory" bind:radioInput />
+            <Radio group="directory" name="directory" bind:radioInput size="small" />
             <div
                 class="chevron-container"
                 class:folder-open={isExpanded}
@@ -50,7 +50,7 @@
                 <span class="fileCount">({directory.fileCount} files)</span>
             </div>
         </div>
-        <div>
+        <div class="thumbnail-container">
             {#if thumbnailLoading}
                 <Spinner />
             {/if}
@@ -124,6 +124,14 @@
         display: none;
     }
 
+    .thumbnail-container {
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        width: var(--icon-size-l, 24px);
+        height: var(--icon-size-l, 24px);
+    }
+
     .thumbnail {
         width: var(--icon-size-l, 24px);
         height: var(--icon-size-l, 24px);
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index 5bb8e6d4a7..a3f61e5dfe 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
     import Spinner from '$lib/Spinner.svelte';
     import { DirectoryItem } from '$lib/index.js';
-
-    export type Directory = {
-        id: string;
-        name: string;
-        fullPath: string;
-        fileCount: number;
-        thumbnailUrl: string;
-        subDirectories: Directory[];
-    };
+    import type { Directory } from '$lib/DirectoryPicker/index.js';
 
     export let directory: Directory | null = null;
     export let isLoading = true;
@@ -18,12 +10,13 @@
 <div class="container" class:isLoading>
     {#if isLoading}<div class="loading-container">
             <Spinner /><span>Loading directory data...</span>
-        </div>{:else}<DirectoryItem {directory} />{/if}
+        </div>{:else if directory !== null}<DirectoryItem {directory} />{/if}
 </div>
 
 <style>
     .container {
-        min-width: 560px;
+        width: 560px;
+        max-width: 100%;
         height: 316px;
         overflow-y: scroll;
         flex-shrink: 0;
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/index.ts b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
new file mode 100644
index 0000000000..0c1b4eb2a1
--- /dev/null
+++ b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
@@ -0,0 +1,8 @@
+export type Directory = {
+    id: string;
+    name: string;
+    fullPath: string;
+    fileCount: number;
+    thumbnailUrl: string;
+    subDirectories: Directory[];
+};
diff --git a/v2/pink-sb/src/lib/selector/Radio.svelte b/v2/pink-sb/src/lib/selector/Radio.svelte
index e73c83b414..d118118990 100644
--- a/v2/pink-sb/src/lib/selector/Radio.svelte
+++ b/v2/pink-sb/src/lib/selector/Radio.svelte
@@ -8,6 +8,7 @@
     } & Partial<{
             size: 'small' | 'medium';
             label: string;
+            radioInput: HTMLInputElement;
         }>;
 
     export let group: $$Props['group'];
@@ -15,7 +16,7 @@
     export let size: $$Props['size'] = 'medium';
     export let id: string | undefined = undefined;
     export let label: $$Props['label'] = undefined;
-    export let radioInput;
+    export let radioInput: $$Props['radioInput'];
 </script>
 
 <Base {label} {id}>

From 355078282002486439c620cce63919b4a653c261 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 23 Oct 2024 13:26:28 +0200
Subject: [PATCH 3/7] Update to using melt

---
 pnpm-lock.yaml                                |  16 ++
 v2/pink-sb/package.json                       |   9 +-
 .../lib/DirectoryPicker/DirectoryItem.svelte  | 152 ++++++++++--------
 .../DirectoryPicker/DirectoryPicker.svelte    |  22 ++-
 v2/pink-sb/src/lib/DirectoryPicker/index.ts   |   6 +-
 v2/pink-sb/svelte.config.js                   |   3 +-
 6 files changed, 131 insertions(+), 77 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a64134c09..f7b38be510 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,9 @@ importers:
         specifier: ^18.0.0
         version: 18.3.1(react@18.3.1)
     devDependencies:
+      '@melt-ui/pp':
+        specifier: ^0.3.2
+        version: 0.3.2(@melt-ui/svelte@0.83.0(svelte@4.2.18))(svelte@4.2.18)
       '@storybook/addon-a11y':
         specifier: ^8.2.9
         version: 8.2.9(storybook@8.2.9(@babel/preset-env@7.25.3(@babel/core@7.25.2)))
@@ -1366,6 +1369,12 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@melt-ui/pp@0.3.2':
+    resolution: {integrity: sha512-xKkPvaIAFinklLXcQOpwZ8YSpqAFxykjWf8Y/fSJQwsixV/0rcFs07hJ49hJjPy5vItvw5Qa0uOjzFUbXzBypQ==}
+    peerDependencies:
+      '@melt-ui/svelte': '>= 0.29.0'
+      svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
+
   '@melt-ui/svelte@0.83.0':
     resolution: {integrity: sha512-E7QT+8YSftz+Hdk1W0hNR3f+cnaF2COMWkStn+2u4vk0RO1I9mXRJl+bJD6uhYaH146oxEB+5elu/ABbv6rpsA==}
     peerDependencies:
@@ -7174,6 +7183,13 @@ snapshots:
       '@types/react': 18.3.3
       react: 18.3.1
 
+  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.83.0(svelte@4.2.18))(svelte@4.2.18)':
+    dependencies:
+      '@melt-ui/svelte': 0.83.0(svelte@4.2.18)
+      estree-walker: 3.0.3
+      magic-string: 0.30.11
+      svelte: 4.2.18
+
   '@melt-ui/svelte@0.83.0(svelte@4.2.18)':
     dependencies:
       '@floating-ui/core': 1.6.7
diff --git a/v2/pink-sb/package.json b/v2/pink-sb/package.json
index a96603c8d6..1dcb2da9cc 100644
--- a/v2/pink-sb/package.json
+++ b/v2/pink-sb/package.json
@@ -37,6 +37,7 @@
         "svelte": "^4.0.0"
     },
     "devDependencies": {
+        "@melt-ui/pp": "^0.3.2",
         "@storybook/addon-a11y": "^8.2.9",
         "@storybook/addon-essentials": "^8.2.9",
         "@storybook/addon-interactions": "^8.2.9",
@@ -63,10 +64,13 @@
         "eslint-plugin-svelte": "^2.43.0",
         "genauigkeit": "^0.0.36",
         "globals": "^15.9.0",
+        "node-gyp": "^10.2.0",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.6",
         "publint": "catalog:default",
         "sass": "^1.77.8",
+        "shiki": "^1.18.0",
+        "sourcemap-codec": "^1.4.8",
         "storybook": "^8.2.9",
         "svelte": "catalog:default",
         "svelte-check": "^3.8.5",
@@ -74,10 +78,7 @@
         "tslib": "^2.6.3",
         "typescript": "^5.5.4",
         "typescript-eslint": "^8.0.1",
-        "vite": "^5.4.0",
-        "node-gyp": "^10.2.0",
-        "shiki": "^1.18.0",
-        "sourcemap-codec": "^1.4.8"
+        "vite": "^5.4.0"
     },
     "svelte": "./dist/index.js",
     "types": "./dist/index.d.ts",
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
index ff15aac1ec..a10ac1a05a 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -1,80 +1,101 @@
 <script lang="ts">
-    import { DirectoryItem } from '$lib/index.js';
+    import { melt, type TreeView } from '@melt-ui/svelte';
+    import { getContext } from 'svelte';
+    import type { Directory } from '$lib/DirectoryPicker/index.js';
     import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
     import Radio from '$lib/selector/Radio.svelte';
     import Spinner from '$lib/Spinner.svelte';
-    import type { Directory } from '$lib/DirectoryPicker/index.js';
-
-    export let directory: Directory;
-    export let depth: number = 0;
-    export let isExpanded = false;
 
-    const paddingLeftStyle = `padding-left: ${32 * depth + 8}px`;
-    let radioInput: HTMLInputElement;
+    export let directories: Directory[];
+    export let level = 0;
+    let radioInputs: HTMLInputElement[] = [];
 
-    let thumbnailLoading = true;
-    let thumbnailError = false;
+    let thumbnailStates = directories.map(() => ({
+        loading: true,
+        error: false
+    }));
 
-    function handleThumbnailLoad() {
-        thumbnailLoading = false;
-        thumbnailError = false;
+    function handleThumbnailLoad(index) {
+        thumbnailStates[index].loading = false;
+        thumbnailStates[index].error = false;
     }
-    function handleThumbnailError() {
-        thumbnailLoading = false;
-        thumbnailError = true;
+
+    function handleThumbnailError(index) {
+        thumbnailStates[index].loading = false;
+        thumbnailStates[index].error = true;
     }
+
+    const {
+        elements: { item, group },
+        helpers: { isExpanded, isSelected }
+    } = getContext<TreeView>('tree');
+
+    const paddingLeftStyle = `padding-left: ${32 * level + 8}px`;
 </script>
 
-<div class="container">
-    <button
-        class="folder"
-        style={paddingLeftStyle}
-        on:click={() => {
-            radioInput.checked = true;
-            if (directory.subDirectories.length > 0) {
-                isExpanded = !isExpanded;
-            }
-        }}
-    >
-        <div class="info">
-            <Radio group="directory" name="directory" bind:radioInput size="small" />
-            <div
-                class="chevron-container"
-                class:folder-open={isExpanded}
-                class:disabled={directory.subDirectories.length === 0}
-            >
-                <IconChevronRight />
+{#each directories as { title, fileCount, thumbnailUrl, children }, i}
+    {@const itemId = `${title}-${i}`}
+    {@const hasChildren = !!children?.length}
+    {@const thumb = thumbnailUrl}
+
+    <div class="container">
+        <button
+            class="folder"
+            style={paddingLeftStyle}
+            on:click={() => {
+                radioInputs[i].checked = true;
+            }}
+            use:melt={$item({
+                id: itemId,
+                hasChildren
+            })}
+        >
+            <div class="info">
+                <Radio
+                    group="directory"
+                    name="directory"
+                    size="small"
+                    bind:radioInput={radioInputs[i]}
+                />
+                <div
+                    class="chevron-container"
+                    class:folder-open={$isExpanded(itemId)}
+                    class:disabled={!hasChildren}
+                >
+                    <IconChevronRight />
+                </div>
+                <div class="meta">
+                    <span>{title}</span>
+                    <span class="fileCount">({fileCount} files)</span>
+                </div>
+            </div>
+            <div class="thumbnail-container">
+                {#if thumbnailStates[i].loading}
+                    <Spinner />
+                {/if}
+
+                {#if thumbnailStates[i].error}
+                    <div class="thumbnail-fallback" />
+                {:else}
+                    <img
+                        src={thumb}
+                        alt="Directory thumbnail"
+                        class="thumbnail"
+                        class:hidden={thumbnailStates[i].loading}
+                        on:load={() => handleThumbnailLoad(i)}
+                        on:error={() => handleThumbnailError(i)}
+                    />
+                {/if}
             </div>
-            <div class="meta">
-                <span>{directory.name}</span>
-                <span class="fileCount">({directory.fileCount} files)</span>
+        </button>
+
+        {#if children}
+            <div use:melt={$group({ id: itemId })}>
+                <svelte:self directories={children} level={level + 1} />
             </div>
-        </div>
-        <div class="thumbnail-container">
-            {#if thumbnailLoading}
-                <Spinner />
-            {/if}
-
-            {#if thumbnailError}
-                <div class="thumbnail-fallback" />
-            {:else}
-                <img
-                    src={directory.thumbnailUrl}
-                    alt="Directory thumbnail"
-                    class="thumbnail"
-                    class:hidden={thumbnailLoading}
-                    on:load={handleThumbnailLoad}
-                    on:error={handleThumbnailError}
-                />
-            {/if}
-        </div>
-    </button>
-    {#if isExpanded}
-        {#each directory.subDirectories as subDirectory}
-            <DirectoryItem directory={subDirectory} depth={depth + 1} />
-        {/each}
-    {/if}
-</div>
+        {/if}
+    </div>
+{/each}
 
 <style>
     .container {
@@ -89,7 +110,8 @@
         align-items: center;
         cursor: pointer;
 
-        &:hover {
+        &:hover,
+        &:focus {
             border-radius: var(--border-radius-S, 8px);
             background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
         }
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index a3f61e5dfe..78322f3379 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -1,16 +1,28 @@
 <script lang="ts">
+    import { createTreeView } from '@melt-ui/svelte';
+    import { setContext } from 'svelte';
+
+    import type { Directory } from './index.js';
+    import DirectoryItem from './DirectoryItem.svelte';
     import Spinner from '$lib/Spinner.svelte';
-    import { DirectoryItem } from '$lib/index.js';
-    import type { Directory } from '$lib/DirectoryPicker/index.js';
 
-    export let directory: Directory | null = null;
+    const ctx = createTreeView({
+        defaultExpanded: ['lib-0', 'tree-0']
+    });
+    setContext('tree', ctx);
+
+    const {
+        elements: { tree }
+    } = ctx;
+
+    export let directories: Directory[];
     export let isLoading = true;
 </script>
 
-<div class="container" class:isLoading>
+<div class="container" class:isLoading {...$tree}>
     {#if isLoading}<div class="loading-container">
             <Spinner /><span>Loading directory data...</span>
-        </div>{:else if directory !== null}<DirectoryItem {directory} />{/if}
+        </div>{:else}<DirectoryItem {directories} />{/if}
 </div>
 
 <style>
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/index.ts b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
index 0c1b4eb2a1..594254afc4 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/index.ts
+++ b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
@@ -1,8 +1,10 @@
 export type Directory = {
     id: string;
-    name: string;
+    title: string;
     fullPath: string;
     fileCount: number;
     thumbnailUrl: string;
-    subDirectories: Directory[];
+    children?: Directory[];
 };
+
+export type Icon = 'svelte' | 'folder' | 'js';
diff --git a/v2/pink-sb/svelte.config.js b/v2/pink-sb/svelte.config.js
index de1eacb243..2877f2d75e 100644
--- a/v2/pink-sb/svelte.config.js
+++ b/v2/pink-sb/svelte.config.js
@@ -1,11 +1,12 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { preprocessMeltUI, sequence } from '@melt-ui/pp';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Consult https://kit.svelte.dev/docs/integrations#preprocessors
     // for more information about preprocessors
-    preprocess: vitePreprocess(),
+    preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
 
     kit: {
         // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

From 377145a673bb909c69e506e95500c4079e2bd5eb Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 23 Oct 2024 13:28:01 +0200
Subject: [PATCH 4/7] Update to using melt

---
 .../stories/DirectoryPicker.stories.svelte    | 254 +++++++++---------
 1 file changed, 128 insertions(+), 126 deletions(-)

diff --git a/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte b/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte
index a577f01a28..6911133ac0 100644
--- a/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte
+++ b/v2/pink-sb/src/stories/DirectoryPicker.stories.svelte
@@ -8,131 +8,133 @@
         component: DirectoryPicker,
         args: {
             isLoading: false,
-            directory: {
-                id: '1',
-                name: 'Root',
-                fullPath: '/',
-                fileCount: 5,
-                thumbnailUrl: 'https://example.com/thumbnails/root.png',
-                subDirectories: [
-                    {
-                        id: '1-1',
-                        name: 'Folder A',
-                        fullPath: '/FolderA',
-                        fileCount: 3,
-                        thumbnailUrl: 'https://appwrite.io/images/logos/appwrite.svg',
-                        subDirectories: [
-                            {
-                                id: '1-1-1',
-                                name: 'SubFolder A1',
-                                fullPath: '/FolderA/SubFolderA1',
-                                fileCount: 2,
-                                thumbnailUrl: 'https://example.com/thumbnails/subFolderA1.png',
-                                subDirectories: []
-                            },
-                            {
-                                id: '1-1-2',
-                                name: 'SubFolder A2',
-                                fullPath: '/FolderA/SubFolderA2',
-                                fileCount: 1,
-                                thumbnailUrl: 'https://example.com/thumbnails/subFolderA2.png',
-                                subDirectories: [
-                                    {
-                                        id: '1-1-2-1',
-                                        name: 'SubSubFolder A2-1',
-                                        fullPath: '/FolderA/SubFolderA2/SubSubFolderA2-1',
-                                        fileCount: 0,
-                                        thumbnailUrl:
-                                            'https://example.com/thumbnails/subSubFolderA2-1.png',
-                                        subDirectories: []
-                                    }
-                                ]
-                            }
-                        ]
-                    },
-                    {
-                        id: '1-2',
-                        name: 'Folder B',
-                        fullPath: '/FolderB',
-                        fileCount: 7,
-                        thumbnailUrl: 'https://example.com/thumbnails/folderB.png',
-                        subDirectories: [
-                            {
-                                id: '1-2-1',
-                                name: 'SubFolder B1',
-                                fullPath: '/FolderB/SubFolderB1',
-                                fileCount: 0,
-                                thumbnailUrl: 'https://example.com/thumbnails/subFolderB1.png',
-                                subDirectories: []
-                            },
-                            {
-                                id: '1-2-2',
-                                name: 'SubFolder B2',
-                                fullPath: '/FolderB/SubFolderB2',
-                                fileCount: 4,
-                                thumbnailUrl: 'https://example.com/thumbnails/subFolderB2.png',
-                                subDirectories: [
-                                    {
-                                        id: '1-2-2-1',
-                                        name: 'SubSubFolder B2-1',
-                                        fullPath: '/FolderB/SubFolderB2/SubSubFolderB2-1',
-                                        fileCount: 2,
-                                        thumbnailUrl:
-                                            'https://example.com/thumbnails/subSubFolderB2-1.png',
-                                        subDirectories: [
-                                            {
-                                                id: '1-2-2-1-1',
-                                                name: 'SubSubSubFolder B2-1-1',
-                                                fullPath:
-                                                    '/FolderB/SubFolderB2/SubSubFolderB2-1/SubSubSubFolderB2-1-1',
-                                                fileCount: 0,
-                                                thumbnailUrl:
-                                                    'https://example.com/thumbnails/subSubSubFolderB2-1-1.png',
-                                                subDirectories: []
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    },
-                    {
-                        id: '3-1',
-                        name: 'Folder C',
-                        fullPath: '/FolderC',
-                        fileCount: 3,
-                        thumbnailUrl: 'https://example.com/thumbnails/folderC.png',
-                        subDirectories: [
-                            {
-                                id: '3-1-1',
-                                name: 'SubFolder C1',
-                                fullPath: '/FolderC/SubFolderC1',
-                                fileCount: 2,
-                                thumbnailUrl: 'https://example.com/thumbnails/subFolderC1.png',
-                                subDirectories: []
-                            },
-                            {
-                                id: '3-1-2',
-                                name: 'SubFolder C2',
-                                fullPath: '/FolderC/SubFolderC2',
-                                fileCount: 1,
-                                thumbnailUrl: 'https://example.com/thumbnails/subFolderC2.png',
-                                subDirectories: [
-                                    {
-                                        id: '3-1-2-1',
-                                        name: 'SubSubFolder C2-1',
-                                        fullPath: '/FolderC/SubFolderA2/SubSubFolderAC-1',
-                                        fileCount: 0,
-                                        thumbnailUrl:
-                                            'https://example.com/thumbnails/subSubFolderAC-1.png',
-                                        subDirectories: []
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
+            directories: [
+                {
+                    id: '1',
+                    title: 'Root',
+                    fullPath: '/',
+                    fileCount: 5,
+                    thumbnailUrl: 'https://example.com/thumbnails/root.png',
+                    children: [
+                        {
+                            id: '1-1',
+                            title: 'Folder A with a very long name',
+                            fullPath: '/FolderA',
+                            fileCount: 3,
+                            thumbnailUrl: 'https://appwrite.io/images/logos/appwrite.svg',
+                            children: [
+                                {
+                                    id: '1-1-1',
+                                    title: 'SubFolder A1',
+                                    fullPath: '/FolderA/SubFolderA1',
+                                    fileCount: 2,
+                                    thumbnailUrl: 'https://example.com/thumbnails/subFolderA1.png',
+                                    children: []
+                                },
+                                {
+                                    id: '1-1-2',
+                                    title: 'SubFolder A2',
+                                    fullPath: '/FolderA/SubFolderA2',
+                                    fileCount: 1,
+                                    thumbnailUrl: 'https://example.com/thumbnails/subFolderA2.png',
+                                    children: [
+                                        {
+                                            id: '1-1-2-1',
+                                            title: 'SubSubFolder A2-1',
+                                            fullPath: '/FolderA/SubFolderA2/SubSubFolderA2-1',
+                                            fileCount: 0,
+                                            thumbnailUrl:
+                                                'https://example.com/thumbnails/subSubFolderA2-1.png',
+                                            children: []
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            id: '1-2',
+                            title: 'Folder B',
+                            fullPath: '/FolderB',
+                            fileCount: 7,
+                            thumbnailUrl: 'https://example.com/thumbnails/folderB.png',
+                            children: [
+                                {
+                                    id: '1-2-1',
+                                    title: 'SubFolder B1',
+                                    fullPath: '/FolderB/SubFolderB1',
+                                    fileCount: 0,
+                                    thumbnailUrl: 'https://example.com/thumbnails/subFolderB1.png',
+                                    children: []
+                                },
+                                {
+                                    id: '1-2-2',
+                                    title: 'SubFolder B2',
+                                    fullPath: '/FolderB/SubFolderB2',
+                                    fileCount: 4,
+                                    thumbnailUrl: 'https://example.com/thumbnails/subFolderB2.png',
+                                    children: [
+                                        {
+                                            id: '1-2-2-1',
+                                            title: 'SubSubFolder B2-1',
+                                            fullPath: '/FolderB/SubFolderB2/SubSubFolderB2-1',
+                                            fileCount: 2,
+                                            thumbnailUrl:
+                                                'https://example.com/thumbnails/subSubFolderB2-1.png',
+                                            children: [
+                                                {
+                                                    id: '1-2-2-1-1',
+                                                    title: 'SubSubSubFolder B2-1-1',
+                                                    fullPath:
+                                                        '/FolderB/SubFolderB2/SubSubFolderB2-1/SubSubSubFolderB2-1-1',
+                                                    fileCount: 0,
+                                                    thumbnailUrl:
+                                                        'https://example.com/thumbnails/subSubSubFolderB2-1-1.png',
+                                                    children: []
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            id: '3-1',
+                            title: 'Folder C',
+                            fullPath: '/FolderC',
+                            fileCount: 3,
+                            thumbnailUrl: 'https://example.com/thumbnails/folderC.png',
+                            children: [
+                                {
+                                    id: '3-1-1',
+                                    title: 'SubFolder C1',
+                                    fullPath: '/FolderC/SubFolderC1',
+                                    fileCount: 2,
+                                    thumbnailUrl: 'https://example.com/thumbnails/subFolderC1.png',
+                                    children: []
+                                },
+                                {
+                                    id: '3-1-2',
+                                    title: 'SubFolder C2',
+                                    fullPath: '/FolderC/SubFolderC2',
+                                    fileCount: 1,
+                                    thumbnailUrl: 'https://example.com/thumbnails/subFolderC2.png',
+                                    children: [
+                                        {
+                                            id: '3-1-2-1',
+                                            title: 'SubSubFolder C2-1',
+                                            fullPath: '/FolderC/SubFolderA2/SubSubFolderAC-1',
+                                            fileCount: 0,
+                                            thumbnailUrl:
+                                                'https://example.com/thumbnails/subSubFolderAC-1.png',
+                                            children: []
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
         }
     };
 </script>
@@ -146,6 +148,6 @@
 <style>
     .wrapper {
         margin: 100px auto;
-        width: fit-content;
+        width: 100%;
     }
 </style>

From 0ddbb7a486ee71c6a7f2575257418ddbbd6e17e8 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 23 Oct 2024 13:55:01 +0200
Subject: [PATCH 5/7] Better responsiveness

---
 .../lib/DirectoryPicker/DirectoryItem.svelte  | 22 +++++++++++++++++--
 .../DirectoryPicker/DirectoryPicker.svelte    |  8 +++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
index a10ac1a05a..aedafe0dfe 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -8,6 +8,7 @@
 
     export let directories: Directory[];
     export let level = 0;
+    export let containerWidth: number | undefined;
     let radioInputs: HTMLInputElement[] = [];
 
     let thumbnailStates = directories.map(() => ({
@@ -65,7 +66,11 @@
                     <IconChevronRight />
                 </div>
                 <div class="meta">
-                    <span>{title}</span>
+                    <span
+                        class="title"
+                        style={containerWidth &&
+                            `max-width: ${containerWidth - 100 - level * 40}px`}>{title}</span
+                    >
                     <span class="fileCount">({fileCount} files)</span>
                 </div>
             </div>
@@ -91,7 +96,7 @@
 
         {#if children}
             <div use:melt={$group({ id: itemId })}>
-                <svelte:self directories={children} level={level + 1} />
+                <svelte:self directories={children} level={level + 1} {containerWidth} />
             </div>
         {/if}
     </div>
@@ -125,6 +130,7 @@
         transition: transform ease-in-out 0.1s;
         margin-left: 8px;
         margin-right: 4px;
+        flex-shrink: 0;
     }
     .folder-open {
         transform: rotate(90deg);
@@ -138,8 +144,20 @@
         gap: var(--space-2, 4px);
     }
 
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-grow: 0;
+    }
+
     .fileCount {
         color: var(--color-fgColor-neutral-tertiary, #97979b);
+        display: none;
+
+        @media (min-width: 1024px) {
+            display: block;
+        }
     }
 
     .hidden {
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index 78322f3379..04870e571e 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -17,12 +17,16 @@
 
     export let directories: Directory[];
     export let isLoading = true;
+    let rootContainer: HTMLDivElement;
+    let containerWidth: number | undefined;
+
+    $: containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
 </script>
 
-<div class="container" class:isLoading {...$tree}>
+<div class="container" class:isLoading {...$tree} bind:this={rootContainer}>
     {#if isLoading}<div class="loading-container">
             <Spinner /><span>Loading directory data...</span>
-        </div>{:else}<DirectoryItem {directories} />{/if}
+        </div>{:else}<DirectoryItem {directories} {containerWidth} />{/if}
 </div>
 
 <style>

From 32edf88608b9b6052779680612c8c2cc83dec582 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 23 Oct 2024 14:21:13 +0200
Subject: [PATCH 6/7] Monitor viewport

---
 .../src/lib/DirectoryPicker/DirectoryItem.svelte  |  3 ++-
 .../lib/DirectoryPicker/DirectoryPicker.svelte    | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
index aedafe0dfe..5fa639cba9 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -28,7 +28,7 @@
 
     const {
         elements: { item, group },
-        helpers: { isExpanded, isSelected }
+        helpers: { isExpanded }
     } = getContext<TreeView>('tree');
 
     const paddingLeftStyle = `padding-left: ${32 * level + 8}px`;
@@ -114,6 +114,7 @@
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
         &:hover,
         &:focus {
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index 04870e571e..84376d4108 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -19,6 +19,21 @@
     export let isLoading = true;
     let rootContainer: HTMLDivElement;
     let containerWidth: number | undefined;
+    monitorResize();
+
+    function monitorResize() {
+        window.addEventListener('resize', updateWidth);
+
+        return {
+            destroy() {
+                window.removeEventListener('resize', updateWidth);
+            }
+        };
+    }
+
+    function updateWidth() {
+        containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
+    }
 
     $: containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
 </script>

From aac541ed53b578ae1ab186977b5ff38a6338e8e1 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 21 Nov 2024 15:36:45 +0100
Subject: [PATCH 7/7] Fix wrong merge

---
 v2/pink-sb/src/lib/selector/Radio.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/selector/Radio.svelte b/v2/pink-sb/src/lib/selector/Radio.svelte
index 672f1b0e02..90f4188c83 100644
--- a/v2/pink-sb/src/lib/selector/Radio.svelte
+++ b/v2/pink-sb/src/lib/selector/Radio.svelte
@@ -26,7 +26,7 @@
         bind:group
         {value}
         {id}
-        class:small={size === 's'}
+        class:s={size === 's'}
         {...$$restProps}
     />
 </Base>