Fix directory picker

v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { melt, type TreeView } from '@melt-ui/svelte';
-    import { createEventDispatcher, getContext } from 'svelte';
-    import type { Directory } from '$lib/DirectoryPicker/index.js';
+    import { getContext } from 'svelte';
+    import type { Directory, DirectorySelectDetail } 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';
@@ -11,6 +11,8 @@
     export let directories: Directory[];
     export let level = 0;
     export let containerWidth: number | undefined;
+    export let selectedPath: string | undefined;
+    export let onSelect: ((detail: DirectorySelectDetail) => void) | undefined = undefined;
     let radioInputs: HTMLInputElement[] = [];
     let value: string;
 
@@ -35,7 +37,14 @@
     } = getContext<TreeView>('tree');
 
     const paddingLeftStyle = `padding-left: ${32 * level + 8}px`;
-    const dispatch = createEventDispatcher();
+
+    // Handle programmatic selection without dispatching events
+    $: if (selectedPath && directories?.length) {
+        const idx = directories.findIndex((d) => d.fullPath === selectedPath);
+        if (idx !== -1 && radioInputs[idx]) {
+            radioInputs[idx].checked = true;
+        }
+    }
 </script>
 
 {#each directories as { title, fileCount, fullPath, thumbnailUrl, thumbnailIcon, thumbnailHtml, children, showThumbnail = true, loading = false }, i}
@@ -48,7 +57,7 @@
             style={paddingLeftStyle}
             on:click={() => {
                 radioInputs[i].checked = true;
-                dispatch('select', { title, fullPath, hasChildren });
+                onSelect?.({ title, fullPath, hasChildren });
             }}
             use:melt={$item({
                 id: fullPath,
@@ -130,7 +139,13 @@
 
         {#if children}
             <div use:melt={$group({ id: fullPath })}>
-                <svelte:self directories={children} level={level + 1} {containerWidth} on:select />
+                <svelte:self
+                    directories={children}
+                    level={level + 1}
+                    {containerWidth}
+                    {selectedPath}
+                    {onSelect}
+                />
             </div>
         {/if}
     </div>

v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { createTreeView } from '@melt-ui/svelte';
     import { onMount, setContext } from 'svelte';
-    import type { Directory } from './index.js';
+    import type { Directory, DirectorySelectDetail } from './index.js';
     import DirectoryItem from './DirectoryItem.svelte';
     import Spinner from '$lib/Spinner.svelte';
     import { writable, type Writable } from 'svelte/store';
 
     export let expanded: Writable<string[]> | undefined = writable(['lib-0', 'tree-0']);
+    export let selected: string | undefined;
+    export let openTo: string | undefined;
 
     const ctx = createTreeView({
         expanded
@@ -19,16 +21,60 @@
 
     export let directories: Directory[];
     export let isLoading = true;
+    export let onSelect: ((detail: DirectorySelectDetail) => void) | undefined = undefined;
+    export let onChange: ((detail: { fullPath: string }) => void) | undefined = undefined;
     let rootContainer: HTMLDivElement;
     let containerWidth: number | undefined;
+    let internalSelected: string | undefined;
+
+    // Initialize internal selected state from selected prop
+    $: internalSelected = selected;
 
     onMount(() => {
         updateWidth();
+
+        // Auto-expand to openTo path if provided
+        if (openTo) {
+            const pathSegments = openTo.split('/').filter(Boolean);
+            const pathsToExpand: string[] = [];
+            let currentPath = '';
+
+            for (const segment of pathSegments) {
+                currentPath += '/' + segment;
+                pathsToExpand.push(currentPath);
+            }
+
+            // Update expanded state to include the path
+            if (pathsToExpand.length > 0) {
+                expanded?.update((current) => {
+                    const newExpanded = [...current];
+                    pathsToExpand.forEach((path) => {
+                        if (!newExpanded.includes(path)) {
+                            newExpanded.push(path);
+                        }
+                    });
+                    return newExpanded;
+                });
+            }
+        }
     });
 
     function updateWidth() {
         containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
     }
+
+    function handleSelect(detail: DirectorySelectDetail) {
+        internalSelected = detail.fullPath;
+        selected = internalSelected; // Update bind:selected
+        if (onChange) {
+            onChange({ fullPath: detail.fullPath });
+        }
+        if (onSelect) {
+            onSelect(detail);
+        }
+    }
+
+    $: containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
 </script>
 
 <svelte:window on:resize={updateWidth} />
@@ -39,7 +85,12 @@
             <Spinner /><span>Loading directory data...</span>
         </div>
     {:else}
-        <DirectoryItem {directories} {containerWidth} on:select />
+        <DirectoryItem
+            {directories}
+            {containerWidth}
+            selectedPath={internalSelected}
+            onSelect={handleSelect}
+        />
     {/if}
 </div>
 

v2/pink-sb/src/lib/DirectoryPicker/index.ts

@@ -13,3 +13,17 @@ export type Directory = {
 };
 
 export type Icon = 'svelte' | 'folder' | 'js';
+
+export type DirectoryPickerProps = {
+    directories: Directory[];
+    isLoading?: boolean;
+    selectedPath?: string;
+    selected?: string;
+    openTo?: string;
+};
+
+export type DirectorySelectDetail = {
+    title: string;
+    fullPath: string;
+    hasChildren: boolean;
+};

v2/pink-sb/src/stories/DirectoryPicker.stories.svelte

@@ -131,8 +131,8 @@
     <Story name="Default" let:args>
         <DirectoryPicker
             {...args}
-            on:select={(e) => {
-                console.log(e.detail);
+            onSelect={(detail) => {
+                console.log(detail);
             }}
         />
     </Story>