sh3-core 0.19.6 → 0.20.2

package/dist/primitives/widgets/_DocumentBrowser.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import {
     buildTree,
     formatSize,
@@ -10,6 +11,9 @@
     type SaverValue,
     type FileItem,
   } from './DocumentFilePicker';
+  import Button from '../Button.svelte';
+  import FolderConfirmDelete from './_FolderConfirmDelete.svelte';
+  import { documentChanges } from '../../documents/notifications';
 
   let {
     mode,
@@ -18,6 +22,10 @@
     onCancel,
     close,
     suggestedName = '',
+    selectable = 'file',
+    listFolders,
+    handle,
+    readOnlyShard,
   }: {
     mode: 'open' | 'save';
     docs: DocEntry[];
@@ -25,16 +33,49 @@
     onCancel: () => void;
     close: () => void;
     suggestedName?: string;
+    selectable?: 'file' | 'folder' | 'both';
+    listFolders?: (shardId: string, prefix: string) => Promise<string[]>;
+    handle?: {
+      mkdir: (shardId: string, path: string) => Promise<void>;
+      rmdir: (shardId: string, path: string, opts: { recursive: boolean }) => Promise<void>;
+      renameFolder: (shardId: string, oldPath: string, newPath: string) => Promise<void>;
+      rename: (shardId: string, oldPath: string, newPath: string) => Promise<void>;
+      delete: (shardId: string, path: string) => Promise<void>;
+    };
+    readOnlyShard?: (shardId: string) => boolean;
   } = $props();
 
+  type Selected =
+    | { kind: 'file'; doc: DocEntry }
+    | { kind: 'folder'; fullPath: string; name: string }
+    | null;
+
   let shardId = $state<string | null>(null);
   let prefix = $state('');
-  let selectedFile = $state<DocEntry | null>(null);
-  let filename = $state(suggestedName);
+  let selected = $state<Selected>(null);
+  let filename = $state(untrack(() => suggestedName));
   let activeIdx = $state(0);
   let listEl = $state<HTMLElement | undefined>(undefined);
 
-  const items = $derived(buildTree(docs, shardId, prefix));
+  // Folder state loaded via listFolders
+  let folders = $state<string[]>([]);
+
+  $effect(() => {
+    folders = [];
+    if (!listFolders || shardId === null) return;
+    const _shard = shardId;
+    const _prefix = prefix;
+    let cancelled = false;
+    (async () => {
+      try {
+        const f = await listFolders(_shard, _prefix);
+        if (!cancelled) folders = f;
+      } catch { /* leave folders empty on error */ }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  const items = $derived(buildTree(docs, folders, shardId, prefix));
   const crumbs = $derived(breadcrumbSegments(shardId, prefix));
 
   $effect(() => {
@@ -42,10 +83,33 @@
     activeIdx = Math.min(activeIdx, items.length - 1);
   });
 
+  const toolbarVisible = $derived(
+    shardId !== null && !!handle && !(readOnlyShard?.(shardId) ?? false),
+  );
+
+  // Toolbar state
+  let newFolderActive = $state(false);
+  let newFolderName = $state('');
+  // Path key for rename: doc.path for files, fullPath for folders
+  let renamingPath = $state<string | null>(null);
+  let renameValue = $state('');
+  let toolbarError = $state<string | null>(null);
+  let confirmDelete = $state<FileItem | null>(null);
+  let clipboard = $state<
+    | { kind: 'file'; shardId: string; path: string }
+    | { kind: 'folder'; shardId: string; path: string }
+    | null
+  >(null);
+
+  function showError(msg: string) {
+    toolbarError = msg;
+    setTimeout(() => { if (toolbarError === msg) toolbarError = null; }, 3000);
+  }
+
   function navigateShard(id: string) {
     shardId = id;
     prefix = '';
-    selectedFile = null;
+    selected = null;
     filename = '';
     activeIdx = 0;
   }
@@ -55,18 +119,22 @@
       navigateShard(p);
     } else {
       prefix = p;
-      selectedFile = null;
+      selected = null;
       filename = '';
       activeIdx = 0;
     }
   }
 
-  function selectFile(item: FileItem) {
+  function selectItem(item: FileItem) {
     if (item.kind === 'folder') {
-      navigatePrefix(item.fullPath);
+      if (selectable !== 'file') {
+        selected = { kind: 'folder', fullPath: item.fullPath, name: item.name };
+      } else {
+        navigatePrefix(item.fullPath);
+      }
     } else {
       if (mode === 'open') {
-        selectedFile = item.doc;
+        selected = { kind: 'file', doc: item.doc };
       }
       if (mode === 'save') {
         filename = item.name;
@@ -75,8 +143,12 @@
   }
 
   function commit() {
-    if (mode === 'open' && selectedFile) {
-      onCommit({ shardId: selectedFile.shardId, path: selectedFile.path });
+    if (mode === 'open' && selected) {
+      if (selected.kind === 'file') {
+        onCommit({ shardId: selected.doc.shardId, path: selected.doc.path, kind: 'file' });
+      } else {
+        onCommit({ shardId: shardId!, path: selected.fullPath, kind: 'folder' });
+      }
       close();
     } else if (mode === 'save' && filename.trim() && shardId) {
       const p = prefix ? `${shardId}/${prefix}/${filename}` : `${shardId}/${filename}`;
@@ -91,10 +163,150 @@
   }
 
   function canCommit(): boolean {
-    if (mode === 'open') return selectedFile !== null;
+    if (mode === 'open') {
+      if (!selected) return false;
+      if (selectable === 'file') return selected.kind === 'file';
+      if (selectable === 'folder') return selected.kind === 'folder';
+      return true; // 'both'
+    }
     return filename.trim().length > 0 && shardId !== null;
   }
 
+  // Toolbar actions
+  function beginNewFolder() {
+    if (!handle || shardId === null) return;
+    newFolderActive = true;
+    newFolderName = '';
+  }
+
+  async function commitNewFolder() {
+    const name = newFolderName.trim();
+    newFolderActive = false;
+    if (!name || !handle || shardId === null) return;
+    if (items.some((i) => i.name === name)) {
+      showError(`"${name}" already exists`);
+      return;
+    }
+    const fullPath = prefix ? `${prefix}/${name}` : name;
+    try {
+      await handle.mkdir(shardId, fullPath);
+    } catch (err: unknown) {
+      showError(String((err as Error)?.message ?? err));
+    }
+  }
+
+  function cancelNewFolder() {
+    newFolderActive = false;
+    newFolderName = '';
+  }
+
+  function beginRename() {
+    if (!selected) return;
+    if (selected.kind === 'file') {
+      renamingPath = (selected as { kind: 'file'; doc: DocEntry }).doc.path;
+      renameValue = (selected as { kind: 'file'; doc: DocEntry }).doc.path.split('/').pop() ?? '';
+    } else {
+      renamingPath = (selected as { kind: 'folder'; fullPath: string; name: string }).fullPath;
+      renameValue = (selected as { kind: 'folder'; fullPath: string; name: string }).name;
+    }
+  }
+
+  async function commitRename() {
+    const path = renamingPath;
+    const newName = renameValue.trim();
+    renamingPath = null;
+    if (!path || !newName || !handle || shardId === null) return;
+    const item = items.find(
+      (i) => (i.kind === 'file' && i.doc.path === path) ||
+              (i.kind === 'folder' && i.fullPath === path),
+    );
+    if (!item || newName === item.name) return;
+    if (items.some((i) => i !== item && i.name === newName)) {
+      showError(`"${newName}" already exists`);
+      return;
+    }
+    try {
+      if (item.kind === 'file') {
+        const newPath = prefix ? `${prefix}/${newName}` : newName;
+        await handle.rename(shardId, item.doc.path, newPath);
+      } else {
+        const newFull = prefix ? `${prefix}/${newName}` : newName;
+        await handle.renameFolder(shardId, item.fullPath, newFull);
+      }
+    } catch (err: unknown) {
+      showError(String((err as Error)?.message ?? err));
+    }
+  }
+
+  function cancelRename() { renamingPath = null; renameValue = ''; }
+
+  function beginDelete() {
+    if (!selected) return;
+    if (selected.kind === 'file') {
+      const path = (selected as { kind: 'file'; doc: DocEntry }).doc.path;
+      confirmDelete = items.find((i) => i.kind === 'file' && i.doc.path === path) ?? null;
+    } else {
+      const fullPath = (selected as { kind: 'folder'; fullPath: string; name: string }).fullPath;
+      confirmDelete = items.find((i) => i.kind === 'folder' && i.fullPath === fullPath) ?? null;
+    }
+  }
+
+  async function performDelete(recursive: boolean) {
+    const item = confirmDelete;
+    confirmDelete = null;
+    if (!item || !handle || shardId === null) return;
+    try {
+      if (item.kind === 'file') {
+        await handle.delete(shardId, item.doc.path);
+      } else {
+        await handle.rmdir(shardId, item.fullPath, { recursive });
+      }
+      selected = null;
+    } catch (err: unknown) {
+      showError(String((err as Error)?.message ?? err));
+    }
+  }
+
+  function cutSelected() {
+    if (!selected || shardId === null) return;
+    if (selected.kind === 'file') {
+      clipboard = { kind: 'file', shardId, path: selected.doc.path };
+    } else {
+      clipboard = { kind: 'folder', shardId, path: selected.fullPath };
+    }
+  }
+
+  function canPasteHere(): boolean {
+    if (!clipboard || !handle || shardId === null) return false;
+    if (clipboard.shardId !== shardId) return false;
+    const targetPrefix = prefix;
+    if (clipboard.kind === 'folder') {
+      if (targetPrefix === clipboard.path) return false;
+      if (targetPrefix.startsWith(clipboard.path + '/')) return false;
+    }
+    const sourceParent = clipboard.path.includes('/')
+      ? clipboard.path.slice(0, clipboard.path.lastIndexOf('/'))
+      : '';
+    if (sourceParent === targetPrefix) return false;
+    return true;
+  }
+
+  async function pasteHere() {
+    if (!canPasteHere() || !clipboard || !handle || shardId === null) return;
+    const name = clipboard.path.split('/').pop()!;
+    const newPath = prefix ? `${prefix}/${name}` : name;
+    try {
+      if (clipboard.kind === 'file') {
+        await handle.rename(shardId, clipboard.path, newPath);
+      } else {
+        await handle.renameFolder(shardId, clipboard.path, newPath);
+      }
+      clipboard = null;
+    } catch (err: unknown) {
+      showError(String((err as Error)?.message ?? err));
+    }
+  }
+
   function onKey(e: KeyboardEvent) {
     if (e.target instanceof HTMLInputElement) return;
     switch (e.key) {
@@ -109,13 +321,30 @@
       case 'Enter':
         e.preventDefault();
         if (activeIdx >= 0 && activeIdx < items.length) {
-          selectFile(items[activeIdx]);
+          selectItem(items[activeIdx]);
         }
         break;
       case 'Escape':
         e.preventDefault();
         cancel();
         break;
+      case 'F2':
+        e.preventDefault();
+        beginRename();
+        break;
+      case 'Delete':
+        e.preventDefault();
+        beginDelete();
+        break;
+      case 'x':
+        if (e.ctrlKey || e.metaKey) { e.preventDefault(); cutSelected(); }
+        break;
+      case 'v':
+        if (e.ctrlKey || e.metaKey) { e.preventDefault(); void pasteHere(); }
+        break;
+      case 'N':
+        if ((e.ctrlKey || e.metaKey) && e.shiftKey) { e.preventDefault(); beginNewFolder(); }
+        break;
       case 'Backspace':
         if (prefix) {
           e.preventDefault();
@@ -136,10 +365,21 @@
     if (item.kind === 'folder') {
       navigatePrefix(item.fullPath);
     } else if (mode === 'open') {
-      onCommit({ shardId: item.doc.shardId, path: item.doc.path });
+      onCommit({ shardId: item.doc.shardId, path: item.doc.path, kind: 'file' });
       close();
     }
   }
+
+  // Live folder refresh on document changes
+  $effect(() => {
+    const unsub = documentChanges.subscribe(async (change) => {
+      if (shardId !== null && change.shardId !== shardId) return;
+      if (listFolders && shardId !== null) {
+        try { folders = await listFolders(shardId, prefix); } catch { /* ignore */ }
+      }
+    });
+    return () => unsub();
+  });
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -160,7 +400,7 @@
         onclick={() => {
           shardId = seg.targetShard;
           prefix = seg.targetPrefix;
-          selectedFile = null;
+          selected = null;
           filename = '';
           activeIdx = 0;
         }}
@@ -168,15 +408,100 @@
     {/each}
   </nav>
 
+  {#if toolbarVisible}
+    <div class="sh3-doc-browser__toolbar">
+      <Button
+        variant="icon"
+        icon="folder-plus"
+        title="New folder"
+        onclick={beginNewFolder}
+        disabled={newFolderActive}
+      />
+      <Button
+        variant="icon"
+        icon="pencil"
+        title="Rename"
+        onclick={beginRename}
+        disabled={!selected}
+      />
+      <Button
+        variant="icon"
+        icon="trash-2"
+        title="Delete"
+        onclick={beginDelete}
+        disabled={!selected}
+      />
+      <Button
+        variant="icon"
+        icon="scissors"
+        title="Cut"
+        onclick={cutSelected}
+        disabled={!selected}
+      />
+      <Button
+        variant="icon"
+        icon="clipboard"
+        title="Paste"
+        onclick={() => void pasteHere()}
+        disabled={!canPasteHere()}
+      />
+      {#if toolbarError}
+        <span class="sh3-doc-browser__toolbar-error">{toolbarError}</span>
+      {/if}
+    </div>
+  {/if}
+
   <div class="sh3-doc-browser__list" bind:this={listEl}>
-    {#if items.length === 0}
-      <div class="sh3-doc-browser__empty">
-        {shardId === null ? 'No shards available.' : prefix ? 'Empty directory.' : 'No documents in this shard.'}
+    {#if confirmDelete}
+      {@const childCount = confirmDelete.kind === 'folder'
+        ? docs.filter((d) =>
+            d.shardId === shardId && d.path.startsWith(confirmDelete!.fullPath + '/'),
+          ).length
+        : 0}
+      <div class="sh3-doc-browser__confirm-overlay">
+        <FolderConfirmDelete
+          item={{ kind: confirmDelete.kind, name: confirmDelete.name }}
+          {childCount}
+          onConfirm={() => void performDelete(confirmDelete!.kind === 'folder')}
+          onCancel={() => { confirmDelete = null; }}
+        />
       </div>
     {:else}
+      {#if items.length === 0 && !newFolderActive}
+        <div class="sh3-doc-browser__empty">
+          {shardId === null ? 'No shards available.' : prefix ? 'Empty directory.' : 'No documents in this shard.'}
+        </div>
+      {/if}
+
+      {#if newFolderActive}
+        <div class="sh3-doc-browser__item sh3-doc-browser__item--folder sh3-doc-browser__item--editing">
+          <span class="sh3-doc-browser__icon sh3-doc-browser__icon--folder" aria-hidden="true">📁</span>
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            class="sh3-doc-browser__rename-input"
+            type="text"
+            autofocus
+            bind:value={newFolderName}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') { e.preventDefault(); void commitNewFolder(); }
+              if (e.key === 'Escape') { e.preventDefault(); cancelNewFolder(); }
+            }}
+            onblur={() => void commitNewFolder()}
+          />
+        </div>
+      {/if}
+
       {#each items as item, i}
         {@const isActive = i === activeIdx}
-        {@const isSelected = item.kind === 'file' && mode === 'open' && selectedFile?.path === item.doc.path && selectedFile?.shardId === item.doc.shardId}
+        {@const isSelected =
+          (item.kind === 'file' && mode === 'open' && selected?.kind === 'file' &&
+            selected.doc.path === item.doc.path && selected.doc.shardId === item.doc.shardId) ||
+          (item.kind === 'folder' && selected?.kind === 'folder' &&
+            selected.fullPath === item.fullPath)}
+        {@const isRenaming = renamingPath !== null && (
+          (item.kind === 'file' && item.doc.path === renamingPath) ||
+          (item.kind === 'folder' && item.fullPath === renamingPath)
+        )}
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="sh3-doc-browser__item"
@@ -186,22 +511,52 @@
           role="option"
           tabindex="-1"
           aria-selected={isSelected}
-          onclick={() => selectFile(item)}
-          onkeydown={(e) => { if (e.key === 'Enter') selectFile(item); }}
+          onclick={() => selectItem(item)}
+          onkeydown={(e) => { if (e.key === 'Enter') selectItem(item); }}
           ondblclick={() => onDblClick(item)}
           onmouseenter={() => activeIdx = i}
         >
           {#if item.kind === 'folder'}
             <span class="sh3-doc-browser__icon sh3-doc-browser__icon--folder" aria-hidden="true">📁</span>
-            <span class="sh3-doc-browser__name">{item.name}</span>
-            <span class="sh3-doc-browser__meta"></span>
+            {#if isRenaming}
+              <!-- svelte-ignore a11y_autofocus -->
+              <input
+                class="sh3-doc-browser__rename-input"
+                type="text"
+                autofocus
+                bind:value={renameValue}
+                onkeydown={(e) => {
+                  if (e.key === 'Enter') { e.preventDefault(); void commitRename(); }
+                  if (e.key === 'Escape') { e.preventDefault(); cancelRename(); }
+                }}
+                onblur={() => void commitRename()}
+              />
+            {:else}
+              <span class="sh3-doc-browser__name">{item.name}</span>
+              <span class="sh3-doc-browser__meta"></span>
+            {/if}
           {:else}
             <span class="sh3-doc-browser__icon" aria-hidden="true">{iconForFile(item.name)}</span>
-            <span class="sh3-doc-browser__name">{item.name}</span>
-            <span class="sh3-doc-browser__meta">
-              {formatSize(item.doc.size)}
-              <span class="sh3-doc-browser__date">{formatDate(item.doc.lastModified)}</span>
-            </span>
+            {#if isRenaming}
+              <!-- svelte-ignore a11y_autofocus -->
+              <input
+                class="sh3-doc-browser__rename-input"
+                type="text"
+                autofocus
+                bind:value={renameValue}
+                onkeydown={(e) => {
+                  if (e.key === 'Enter') { e.preventDefault(); void commitRename(); }
+                  if (e.key === 'Escape') { e.preventDefault(); cancelRename(); }
+                }}
+                onblur={() => void commitRename()}
+              />
+            {:else}
+              <span class="sh3-doc-browser__name">{item.name}</span>
+              <span class="sh3-doc-browser__meta">
+                {formatSize(item.doc.size)}
+                <span class="sh3-doc-browser__date">{formatDate(item.doc.lastModified)}</span>
+              </span>
+            {/if}
           {/if}
         </div>
       {/each}
@@ -236,13 +591,9 @@
 
 <style>
   .sh3-doc-browser {
-    background: var(--sh3-bg-elevated);
-    border: 1px solid var(--sh3-border-strong);
-    border-radius: var(--sh3-widget-radius);
-    box-shadow: var(--sh3-shadow-lg);
-    width: 420px;
-    max-height: 480px;
-    display: flex; flex-direction: column;
+    display: flex;
+    flex-direction: column;
+    max-height: 85vh;
     overflow: hidden;
     color: var(--sh3-fg);
     font-size: 0.8125rem;
@@ -275,11 +626,33 @@
   .sh3-doc-browser__crumb:hover { background: var(--sh3-bg); color: var(--sh3-fg); }
   .sh3-doc-browser__crumb--last { color: var(--sh3-fg); font-weight: 600; }
   .sh3-doc-browser__crumb-sep { color: var(--sh3-fg-subtle); font-size: 0.75rem; flex-shrink: 0; }
-  .sh3-doc-browser__list { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; }
+  .sh3-doc-browser__toolbar {
+    display: flex; align-items: center; gap: 2px;
+    padding: 2px 8px;
+    border-bottom: 1px solid var(--sh3-border);
+    flex-shrink: 0;
+  }
+  .sh3-doc-browser__toolbar-error {
+    font-size: 0.6875rem;
+    color: var(--sh3-error);
+    padding: 0 4px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sh3-doc-browser__list { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; position: relative; }
+  .sh3-doc-browser__confirm-overlay {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--sh3-bg-overlay, rgba(0,0,0,0.3));
+    z-index: 1;
+  }
   .sh3-doc-browser__item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; }
   .sh3-doc-browser__item--active { background: var(--sh3-bg); }
   .sh3-doc-browser__item--selected { background: var(--sh3-accent); color: var(--sh3-fg-on-accent); }
   .sh3-doc-browser__item--active.sh3-doc-browser__item--selected { background: var(--sh3-accent); }
+  .sh3-doc-browser__item--editing { cursor: default; }
   .sh3-doc-browser__icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 0.875rem; }
   .sh3-doc-browser__icon--folder { font-size: 0.75rem; }
   .sh3-doc-browser__name {
@@ -288,6 +661,17 @@
     font-family: var(--sh3-font-mono); font-size: 0.75rem;
   }
   .sh3-doc-browser__item--folder .sh3-doc-browser__name { font-family: inherit; font-size: 0.8125rem; }
+  .sh3-doc-browser__rename-input {
+    flex: 1; min-width: 0;
+    height: 22px;
+    padding: 0 4px;
+    background: var(--sh3-input-bg);
+    border: 1px solid var(--sh3-input-border-focus);
+    border-radius: var(--sh3-radius-sm);
+    color: var(--sh3-fg);
+    font: inherit; font-size: 0.75rem;
+    outline: none;
+  }
   .sh3-doc-browser__meta {
     display: flex; align-items: center; gap: 10px;
     flex-shrink: 0; font-size: 0.6875rem; color: var(--sh3-fg-muted);

package/dist/primitives/widgets/_DocumentBrowser.svelte.d.ts

@@ -6,6 +6,18 @@ type $$ComponentProps = {
     onCancel: () => void;
     close: () => void;
     suggestedName?: string;
+    selectable?: 'file' | 'folder' | 'both';
+    listFolders?: (shardId: string, prefix: string) => Promise<string[]>;
+    handle?: {
+        mkdir: (shardId: string, path: string) => Promise<void>;
+        rmdir: (shardId: string, path: string, opts: {
+            recursive: boolean;
+        }) => Promise<void>;
+        renameFolder: (shardId: string, oldPath: string, newPath: string) => Promise<void>;
+        rename: (shardId: string, oldPath: string, newPath: string) => Promise<void>;
+        delete: (shardId: string, path: string) => Promise<void>;
+    };
+    readOnlyShard?: (shardId: string) => boolean;
 };
 declare const DocumentBrowser: import("svelte").Component<$$ComponentProps, {}, "">;
 type DocumentBrowser = ReturnType<typeof DocumentBrowser>;

package/dist/primitives/widgets/_DocumentBrowser.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};