From 5f33eaa58f1a90318dd4d293cf9b1cc5b98354f2 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 6 Oct 2025 13:17:50 +0000
Subject: [PATCH 1/3] add selectedPath prop for auto-select and auto-expand

---
 .../lib/DirectoryPicker/DirectoryItem.svelte  | 19 ++++++++++++++++++-
 .../DirectoryPicker/DirectoryPicker.svelte    | 17 ++++++++++++++++-
 v2/pink-sb/src/lib/DirectoryPicker/index.ts   |  6 ++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
index 00591d2179..e9728c0aed 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
+++ b/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,16 @@
 
     const paddingLeftStyle = `padding-left: ${32 * level + 8}px`;
     const dispatch = createEventDispatcher();
+
+    $: if (selectedPath && directories?.length) {
+        const idx = directories.findIndex((d) => d.fullPath === selectedPath);
+        if (idx !== -1 && radioInputs[idx]) {
+            radioInputs[idx].checked = true;
+            const { title, fullPath, children } = directories[idx];
+            const hasChildren = !!children?.length;
+            dispatch('select', { title, fullPath, hasChildren });
+        }
+    }
 </script>
 
 {#each directories as { title, fileCount, fullPath, thumbnailUrl, thumbnailIcon, thumbnailHtml, children, showThumbnail = true, loading = false }, i}
@@ -130,7 +141,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>
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index 697aaa6263..ae4c4e9499 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -7,6 +7,7 @@
     import { writable, type Writable } from 'svelte/store';
 
     export let expanded: Writable<string[]> | undefined = writable(['lib-0', 'tree-0']);
+    export let selectedPath: string | undefined;
 
     const ctx = createTreeView({
         expanded
@@ -24,6 +25,20 @@
 
     onMount(() => {
         updateWidth();
+        if (selectedPath && expanded) {
+            const segments = selectedPath.split('/').filter(Boolean);
+            const ancestorPaths: string[] = [];
+            let current = '';
+            for (const segment of segments) {
+                current = current ? `${current}/${segment}` : segment;
+                ancestorPaths.push(current);
+            }
+            expanded.update((prev) => {
+                const set = new Set(prev ?? []);
+                for (const p of ancestorPaths) set.add(p);
+                return Array.from(set);
+            });
+        }
     });
 
     function updateWidth() {
@@ -41,7 +56,7 @@
             <Spinner /><span>Loading directory data...</span>
         </div>
     {:else}
-        <DirectoryItem {directories} {containerWidth} on:select />
+        <DirectoryItem {directories} {containerWidth} {selectedPath} on:select />
     {/if}
 </div>
 
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/index.ts b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
index e9af35a50d..15cfc98086 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/index.ts
+++ b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
@@ -13,3 +13,9 @@ export type Directory = {
 };
 
 export type Icon = 'svelte' | 'folder' | 'js';
+
+export type DirectoryPickerProps = {
+    directories: Directory[];
+    isLoading?: boolean;
+    selectedPath?: string;
+};

From 5a80bb25b96f6de2a2e857353d8e50a13d8a30bb Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 6 Oct 2025 13:46:36 +0000
Subject: [PATCH 2/3] changes

---
 .../src/lib/DirectoryPicker/DirectoryPicker.svelte | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index ae4c4e9499..704090e806 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -25,20 +25,6 @@
 
     onMount(() => {
         updateWidth();
-        if (selectedPath && expanded) {
-            const segments = selectedPath.split('/').filter(Boolean);
-            const ancestorPaths: string[] = [];
-            let current = '';
-            for (const segment of segments) {
-                current = current ? `${current}/${segment}` : segment;
-                ancestorPaths.push(current);
-            }
-            expanded.update((prev) => {
-                const set = new Set(prev ?? []);
-                for (const p of ancestorPaths) set.add(p);
-                return Array.from(set);
-            });
-        }
     });
 
     function updateWidth() {

From aa2ed6ee4b1dfc9af40ff810b7c097b18afacc02 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 6 Oct 2025 18:11:18 +0000
Subject: [PATCH 3/3] test

---
 .../lib/DirectoryPicker/DirectoryItem.svelte  |  4 +-
 .../DirectoryPicker/DirectoryPicker.svelte    | 48 +++++++++++++++++--
 v2/pink-sb/src/lib/DirectoryPicker/index.ts   |  2 +
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
index e9728c0aed..af93c563d8 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -38,13 +38,11 @@
     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;
-            const { title, fullPath, children } = directories[idx];
-            const hasChildren = !!children?.length;
-            dispatch('select', { title, fullPath, hasChildren });
         }
     }
 </script>
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
index 704090e806..bd14b3083d 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
+++ b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -1,13 +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 selectedPath: string | undefined;
+    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
@@ -22,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>
 
@@ -42,7 +84,7 @@
             <Spinner /><span>Loading directory data...</span>
         </div>
     {:else}
-        <DirectoryItem {directories} {containerWidth} {selectedPath} on:select />
+        <DirectoryItem {directories} {containerWidth} selectedPath={internalSelected} on:select={handleSelect} />
     {/if}
 </div>
 
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/index.ts b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
index 15cfc98086..5975fddc84 100644
--- a/v2/pink-sb/src/lib/DirectoryPicker/index.ts
+++ b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
@@ -18,4 +18,6 @@ export type DirectoryPickerProps = {
     directories: Directory[];
     isLoading?: boolean;
     selectedPath?: string;
+    selected?: string;
+    openTo?: string;
 };