Fix directory picker

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

@@ -11,6 +11,7 @@
     export let directories: Directory[];
     export let level = 0;
     export let containerWidth: number | undefined;
+    export let selectedPath: string | undefined;
     let radioInputs: HTMLInputElement[] = [];
     let value: string;
 
@@ -36,6 +37,14 @@
 
     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}
@@ -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}
+                    on:select
+                />
             </div>
         {/if}
     </div>

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

@@ -1,12 +1,19 @@
 <script lang="ts">
     import { createTreeView } from '@melt-ui/svelte';
-    import { onMount, setContext } from 'svelte';
+    import { onMount, setContext, createEventDispatcher } from 'svelte';
     import type { Directory } 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 dispatch = createEventDispatcher<{
+        change: { fullPath: string };
+        select: { title: string; fullPath: string; hasChildren: boolean };
+    }>();
 
     const ctx = createTreeView({
         expanded
@@ -21,15 +28,51 @@
     export let isLoading = true;
     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 = [];
+            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(event: CustomEvent<{ title: string; fullPath: string; hasChildren: boolean }>) {
+        internalSelected = event.detail.fullPath;
+        selected = internalSelected; // Update bind:selected
+        dispatch('change', { fullPath: event.detail.fullPath });
+        dispatch('select', event.detail);
+    }
+
     $: containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
 </script>
 
@@ -41,7 +84,7 @@
             <Spinner /><span>Loading directory data...</span>
         </div>
     {:else}
-        <DirectoryItem {directories} {containerWidth} on:select />
+        <DirectoryItem {directories} {containerWidth} selectedPath={internalSelected} on:select={handleSelect} />
     {/if}
 </div>
 

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

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