sh3-core 0.19.3 → 0.19.5

package/dist/primitives/widgets/DocumentFilePicker.js

@@ -0,0 +1,74 @@
+export function buildTree(docs, shardId, prefix) {
+    if (shardId === null) {
+        const shards = [...new Set(docs.map((d) => d.shardId))].sort();
+        return shards.map((s) => ({ kind: 'folder', name: s, fullPath: s }));
+    }
+    const shardDocs = docs.filter((d) => d.shardId === shardId);
+    const folders = new Map();
+    const files = [];
+    const normPrefix = prefix ? prefix + '/' : '';
+    const plen = normPrefix.length;
+    for (const doc of shardDocs) {
+        if (!doc.path.startsWith(normPrefix))
+            continue;
+        const relative = doc.path.slice(plen);
+        const slash = relative.indexOf('/');
+        if (slash >= 0) {
+            const name = relative.slice(0, slash);
+            const full = prefix ? `${prefix}/${name}` : name;
+            if (!folders.has(name))
+                folders.set(name, full);
+        }
+        else {
+            files.push({ kind: 'file', name: relative, doc });
+        }
+    }
+    const folderItems = [...folders.entries()]
+        .map(([name, fullPath]) => ({ kind: 'folder', name, fullPath }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    const fileItems = files.sort((a, b) => a.name.localeCompare(b.name));
+    return [...folderItems, ...fileItems];
+}
+export function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function formatDate(epochMs) {
+    const d = new Date(epochMs);
+    return d.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: d.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined,
+    });
+}
+const EXT_ICONS = {
+    guml: '⬡', glsl: '◇', md: '≡', obj: '△', png: '▦',
+};
+export function iconForFile(name) {
+    var _a;
+    const ext = name.slice(name.lastIndexOf('.') + 1).toLowerCase();
+    return (_a = EXT_ICONS[ext]) !== null && _a !== void 0 ? _a : '▯';
+}
+export function breadcrumbSegments(shardId, prefix) {
+    const segs = [
+        { label: 'SH3', level: 0, targetShard: null, targetPrefix: '' },
+    ];
+    if (shardId) {
+        segs.push({ label: shardId, level: 1, targetShard: shardId, targetPrefix: '' });
+        if (prefix) {
+            const parts = prefix.split('/');
+            for (let i = 0; i < parts.length; i++) {
+                segs.push({
+                    label: parts[i],
+                    level: 2 + i,
+                    targetShard: shardId,
+                    targetPrefix: parts.slice(0, i + 1).join('/'),
+                });
+            }
+        }
+    }
+    return segs;
+}

package/dist/primitives/widgets/DocumentFilePicker.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import { sh3 } from '../../sh3Runtime.svelte';
+  import DocumentBrowser from './_DocumentBrowser.svelte';
+  import type { DocumentMeta } from '../../documents/types';
+  import type { DocEntry, OpenerValue, SaverValue } from './DocumentFilePicker';
+
+  type DocListFn = () => Promise<Array<DocumentMeta & { shardId: string }>>;
+
+  let {
+    mode,
+    value = $bindable<OpenerValue | SaverValue>(null),
+    listDocuments,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    buttonLabel = 'Choose…',
+    onchange,
+  }: {
+    mode: 'open' | 'save';
+    value?: OpenerValue | SaverValue;
+    listDocuments: DocListFn;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    buttonLabel?: string;
+  } & CommitOnlyEvents<OpenerValue | SaverValue> = $props();
+
+  let trigger = $state<HTMLButtonElement | undefined>(undefined);
+  let openFlag = $state(false);
+
+  const displayPath = $derived(
+    value
+      ? typeof value === 'string'
+        ? value
+        : `${value.shardId}/${value.path}`
+      : null,
+  );
+
+  function handleCommit(result: OpenerValue | SaverValue) {
+    value = result;
+    onchange?.(result);
+  }
+
+  function onOpenClosed() {
+    openFlag = false;
+    trigger?.focus();
+  }
+
+  async function open() {
+    if (disabled || openFlag || !trigger) return;
+    openFlag = true;
+    let docs: DocEntry[] = [];
+    try {
+      docs = await listDocuments();
+    } catch {
+      openFlag = false;
+      return;
+    }
+
+    const popupHandle = sh3.popup.show(
+      DocumentBrowser,
+      { anchor: trigger },
+      {
+        mode,
+        docs,
+        onCommit: (result: OpenerValue | SaverValue) => {
+          handleCommit(result);
+        },
+        onCancel: () => {},
+      },
+    );
+
+    const origClose = popupHandle.close;
+    popupHandle.close = () => {
+      origClose();
+      onOpenClosed();
+    };
+  }
+</script>
+
+<label class="sh3-dfp" class:sh3-dfp--sm={size === 'sm'} class:sh3-dfp--invalid={invalid}>
+  <button
+    type="button"
+    class="sh3-dfp__btn"
+    bind:this={trigger}
+    {disabled}
+    aria-haspopup="dialog"
+    aria-expanded={openFlag}
+    onclick={open}
+  >
+    <span class="sh3-dfp__label">{buttonLabel}</span>
+    <span class="sh3-dfp__path" class:sh3-dfp__path--empty={!displayPath}>
+      {displayPath ?? (mode === 'open' ? 'no document' : 'choose path…')}
+    </span>
+    <span class="sh3-dfp__chevron" aria-hidden="true">▾</span>
+  </button>
+</label>
+
+<style>
+  .sh3-dfp { display: inline-flex; font-size: 0.8125rem; }
+  .sh3-dfp__btn {
+    display: inline-flex; align-items: stretch;
+    height: var(--sh3-field-height-md);
+    min-width: 240px;
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
+    background: var(--sh3-input-bg);
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+    overflow: hidden;
+    padding: 0;
+  }
+  .sh3-dfp--sm .sh3-dfp__btn { height: var(--sh3-field-height-sm); }
+  .sh3-dfp--invalid .sh3-dfp__btn { border-color: var(--sh3-error); }
+  .sh3-dfp__btn:hover { border-color: var(--sh3-input-border-focus); }
+  .sh3-dfp__btn:focus-visible { outline: none; box-shadow: var(--sh3-focus-ring); border-color: var(--sh3-input-border-focus); }
+  .sh3-dfp__btn:disabled { opacity: 0.55; cursor: not-allowed; }
+  .sh3-dfp__label {
+    display: inline-flex; align-items: center;
+    padding: 0 var(--sh3-field-pad-x);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    border-right: 1px solid var(--sh3-border);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .sh3-dfp__path {
+    display: inline-flex; align-items: center;
+    padding: 0 var(--sh3-field-pad-x);
+    color: var(--sh3-fg);
+    flex: 1; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-family: var(--sh3-font-mono); font-size: 0.75rem;
+  }
+  .sh3-dfp__path--empty { color: var(--sh3-fg-muted); font-family: inherit; font-size: 0.8125rem; font-style: italic; }
+  .sh3-dfp__chevron {
+    display: inline-flex; align-items: center;
+    padding: 0 8px;
+    color: var(--sh3-fg-muted);
+    flex-shrink: 0;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { CommitOnlyEvents } from './_contract';
+import type { DocumentMeta } from '../../documents/types';
+import type { OpenerValue, SaverValue } from './DocumentFilePicker';
+type DocListFn = () => Promise<Array<DocumentMeta & {
+    shardId: string;
+}>>;
+type $$ComponentProps = {
+    mode: 'open' | 'save';
+    value?: OpenerValue | SaverValue;
+    listDocuments: DocListFn;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    buttonLabel?: string;
+} & CommitOnlyEvents<OpenerValue | SaverValue>;
+declare const DocumentFilePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DocumentFilePicker = ReturnType<typeof DocumentFilePicker>;
+export default DocumentFilePicker;

package/dist/primitives/widgets/DocumentOpener.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import DocumentFilePicker from './DocumentFilePicker.svelte';
+  import type { DocumentMeta } from '../../documents/types';
+  import type { OpenerValue } from './DocumentFilePicker';
+
+  type DocListFn = () => Promise<Array<DocumentMeta & { shardId: string }>>;
+
+  let {
+    value = $bindable<OpenerValue>(null),
+    listDocuments,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    buttonLabel = 'Open document…',
+    onchange,
+  }: {
+    value?: OpenerValue;
+    listDocuments: DocListFn;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    buttonLabel?: string;
+  } & CommitOnlyEvents<OpenerValue> = $props();
+</script>
+
+<DocumentFilePicker
+  mode="open"
+  bind:value
+  {listDocuments}
+  {disabled}
+  {invalid}
+  {size}
+  {buttonLabel}
+  {onchange}
+/>

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

@@ -0,0 +1,17 @@
+import type { CommitOnlyEvents } from './_contract';
+import type { DocumentMeta } from '../../documents/types';
+import type { OpenerValue } from './DocumentFilePicker';
+type DocListFn = () => Promise<Array<DocumentMeta & {
+    shardId: string;
+}>>;
+type $$ComponentProps = {
+    value?: OpenerValue;
+    listDocuments: DocListFn;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    buttonLabel?: string;
+} & CommitOnlyEvents<OpenerValue>;
+declare const DocumentOpener: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DocumentOpener = ReturnType<typeof DocumentOpener>;
+export default DocumentOpener;

package/dist/primitives/widgets/DocumentSaver.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import DocumentFilePicker from './DocumentFilePicker.svelte';
+  import type { DocumentMeta } from '../../documents/types';
+  import type { SaverValue } from './DocumentFilePicker';
+
+  type DocListFn = () => Promise<Array<DocumentMeta & { shardId: string }>>;
+
+  let {
+    value = $bindable<SaverValue>(null),
+    listDocuments,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    buttonLabel = 'Save as…',
+    onchange,
+  }: {
+    value?: SaverValue;
+    listDocuments: DocListFn;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    buttonLabel?: string;
+  } & CommitOnlyEvents<SaverValue> = $props();
+</script>
+
+<DocumentFilePicker
+  mode="save"
+  bind:value
+  {listDocuments}
+  {disabled}
+  {invalid}
+  {size}
+  {buttonLabel}
+  {onchange}
+/>

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

@@ -0,0 +1,17 @@
+import type { CommitOnlyEvents } from './_contract';
+import type { DocumentMeta } from '../../documents/types';
+import type { SaverValue } from './DocumentFilePicker';
+type DocListFn = () => Promise<Array<DocumentMeta & {
+    shardId: string;
+}>>;
+type $$ComponentProps = {
+    value?: SaverValue;
+    listDocuments: DocListFn;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    buttonLabel?: string;
+} & CommitOnlyEvents<SaverValue>;
+declare const DocumentSaver: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DocumentSaver = ReturnType<typeof DocumentSaver>;
+export default DocumentSaver;

package/dist/primitives/widgets/_DocumentBrowser.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+  import {
+    buildTree,
+    formatSize,
+    formatDate,
+    iconForFile,
+    breadcrumbSegments,
+    type DocEntry,
+    type OpenerValue,
+    type SaverValue,
+    type FileItem,
+  } from './DocumentFilePicker';
+
+  let {
+    mode,
+    docs,
+    onCommit,
+    onCancel,
+    close,
+  }: {
+    mode: 'open' | 'save';
+    docs: DocEntry[];
+    onCommit: (value: OpenerValue | SaverValue) => void;
+    onCancel: () => void;
+    close: () => void;
+  } = $props();
+
+  let shardId = $state<string | null>(null);
+  let prefix = $state('');
+  let selectedFile = $state<DocEntry | null>(null);
+  let filename = $state('');
+  let activeIdx = $state(0);
+  let listEl = $state<HTMLElement | undefined>(undefined);
+
+  const items = $derived(buildTree(docs, shardId, prefix));
+  const crumbs = $derived(breadcrumbSegments(shardId, prefix));
+
+  $effect(() => {
+    items;
+    activeIdx = Math.min(activeIdx, items.length - 1);
+  });
+
+  function navigateShard(id: string) {
+    shardId = id;
+    prefix = '';
+    selectedFile = null;
+    filename = '';
+    activeIdx = 0;
+  }
+
+  function navigatePrefix(p: string) {
+    if (shardId === null) {
+      navigateShard(p);
+    } else {
+      prefix = p;
+      selectedFile = null;
+      filename = '';
+      activeIdx = 0;
+    }
+  }
+
+  function selectFile(item: FileItem) {
+    if (item.kind === 'folder') {
+      navigatePrefix(item.fullPath);
+    } else {
+      if (mode === 'open') {
+        selectedFile = item.doc;
+      }
+      if (mode === 'save') {
+        filename = item.name;
+      }
+    }
+  }
+
+  function commit() {
+    if (mode === 'open' && selectedFile) {
+      onCommit({ shardId: selectedFile.shardId, path: selectedFile.path });
+      close();
+    } else if (mode === 'save' && filename.trim() && shardId) {
+      const p = prefix ? `${shardId}/${prefix}/${filename}` : `${shardId}/${filename}`;
+      onCommit(p);
+      close();
+    }
+  }
+
+  function cancel() {
+    onCancel();
+    close();
+  }
+
+  function canCommit(): boolean {
+    if (mode === 'open') return selectedFile !== null;
+    return filename.trim().length > 0 && shardId !== null;
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.target instanceof HTMLInputElement) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        activeIdx = Math.min(activeIdx + 1, items.length - 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        activeIdx = Math.max(activeIdx - 1, 0);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (activeIdx >= 0 && activeIdx < items.length) {
+          selectFile(items[activeIdx]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        cancel();
+        break;
+      case 'Backspace':
+        if (prefix) {
+          e.preventDefault();
+          const parts = prefix.split('/');
+          parts.pop();
+          prefix = parts.join('/');
+          activeIdx = 0;
+        } else if (shardId) {
+          e.preventDefault();
+          shardId = null;
+          activeIdx = 0;
+        }
+        break;
+    }
+  }
+
+  function onDblClick(item: FileItem) {
+    if (item.kind === 'folder') {
+      navigatePrefix(item.fullPath);
+    } else if (mode === 'open') {
+      onCommit({ shardId: item.doc.shardId, path: item.doc.path });
+      close();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="sh3-doc-browser" onkeydown={onKey} tabindex="-1">
+  <div class="sh3-doc-browser__head">
+    <span class="sh3-doc-browser__title">
+      {mode === 'open' ? 'Open Document' : 'Save Document'}
+    </span>
+  </div>
+
+  <nav class="sh3-doc-browser__crumbs">
+    {#each crumbs as seg, i}
+      {#if i > 0}<span class="sh3-doc-browser__crumb-sep">/</span>{/if}
+      <button
+        type="button"
+        class="sh3-doc-browser__crumb"
+        class:sh3-doc-browser__crumb--last={i === crumbs.length - 1}
+        onclick={() => {
+          shardId = seg.targetShard;
+          prefix = seg.targetPrefix;
+          selectedFile = null;
+          filename = '';
+          activeIdx = 0;
+        }}
+      >{seg.label}</button>
+    {/each}
+  </nav>
+
+  <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.'}
+      </div>
+    {:else}
+      {#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}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="sh3-doc-browser__item"
+          class:sh3-doc-browser__item--active={isActive}
+          class:sh3-doc-browser__item--selected={isSelected}
+          class:sh3-doc-browser__item--folder={item.kind === 'folder'}
+          role="option"
+          tabindex="-1"
+          aria-selected={isSelected}
+          onclick={() => selectFile(item)}
+          onkeydown={(e) => { if (e.key === 'Enter') selectFile(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>
+          {: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}
+        </div>
+      {/each}
+    {/if}
+  </div>
+
+  {#if mode === 'save' && shardId !== null}
+    <div class="sh3-doc-browser__save-row">
+      <span class="sh3-doc-browser__save-label">Filename:</span>
+      <input
+        class="sh3-doc-browser__save-input"
+        type="text"
+        placeholder="filename.ext"
+        bind:value={filename}
+        onkeydown={(e) => { if (e.key === 'Enter' && canCommit()) commit(); }}
+      />
+    </div>
+  {/if}
+
+  <div class="sh3-doc-browser__footer">
+    <button type="button" class="sh3-doc-browser__btn sh3-doc-browser__btn--cancel" onclick={cancel}>Cancel</button>
+    <button
+      type="button"
+      class="sh3-doc-browser__btn sh3-doc-browser__btn--primary"
+      disabled={!canCommit()}
+      onclick={commit}
+    >
+      {mode === 'open' ? 'Open' : 'Save'}
+    </button>
+  </div>
+</div>
+
+<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;
+    overflow: hidden;
+    color: var(--sh3-fg);
+    font-size: 0.8125rem;
+    outline: none;
+  }
+  .sh3-doc-browser__head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--sh3-border);
+  }
+  .sh3-doc-browser__title { font-weight: 600; }
+  .sh3-doc-browser__crumbs {
+    display: flex; align-items: center; gap: 2px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sh3-border);
+    overflow-x: auto;
+    flex-shrink: 0;
+  }
+  .sh3-doc-browser__crumb {
+    display: inline-flex; align-items: center;
+    padding: 1px 4px;
+    border: none; background: none;
+    color: var(--sh3-fg-muted);
+    font: inherit; font-size: 0.75rem;
+    cursor: pointer;
+    border-radius: var(--sh3-radius-sm);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .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__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__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 {
+    flex: 1; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    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__meta {
+    display: flex; align-items: center; gap: 10px;
+    flex-shrink: 0; font-size: 0.6875rem; color: var(--sh3-fg-muted);
+  }
+  .sh3-doc-browser__item--selected .sh3-doc-browser__meta { color: var(--sh3-fg-on-accent); opacity: 0.8; }
+  .sh3-doc-browser__date { color: var(--sh3-fg-subtle); }
+  .sh3-doc-browser__item--selected .sh3-doc-browser__date { color: var(--sh3-fg-on-accent); opacity: 0.65; }
+  .sh3-doc-browser__empty { padding: 20px 12px; text-align: center; color: var(--sh3-fg-muted); font-style: italic; }
+  .sh3-doc-browser__save-row {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 12px; border-top: 1px solid var(--sh3-border);
+  }
+  .sh3-doc-browser__save-label { font-size: 0.75rem; color: var(--sh3-fg-muted); flex-shrink: 0; }
+  .sh3-doc-browser__save-input {
+    flex: 1;
+    height: var(--sh3-field-height-sm);
+    padding: 0 8px;
+    background: var(--sh3-input-bg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm);
+    color: var(--sh3-fg);
+    font: inherit; font-family: var(--sh3-font-mono); font-size: 0.75rem;
+    outline: none;
+  }
+  .sh3-doc-browser__save-input:focus { border-color: var(--sh3-input-border-focus); box-shadow: var(--sh3-focus-ring); }
+  .sh3-doc-browser__footer {
+    display: flex; justify-content: flex-end; gap: 8px;
+    padding: 8px 12px; border-top: 1px solid var(--sh3-border);
+  }
+  .sh3-doc-browser__btn {
+    display: inline-flex; align-items: center;
+    height: 26px; padding: 0 12px;
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    font: inherit; font-size: 0.75rem;
+    cursor: pointer;
+  }
+  .sh3-doc-browser__btn:hover { background: var(--sh3-bg); }
+  .sh3-doc-browser__btn--primary {
+    background: var(--sh3-accent);
+    color: var(--sh3-fg-on-accent);
+    border-color: var(--sh3-accent);
+  }
+  .sh3-doc-browser__btn--primary:hover { filter: brightness(1.1); }
+  .sh3-doc-browser__btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+  .sh3-doc-browser__btn--primary:disabled:hover { filter: none; }
+</style>

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

@@ -0,0 +1,11 @@
+import { type DocEntry, type OpenerValue, type SaverValue } from './DocumentFilePicker';
+type $$ComponentProps = {
+    mode: 'open' | 'save';
+    docs: DocEntry[];
+    onCommit: (value: OpenerValue | SaverValue) => void;
+    onCancel: () => void;
+    close: () => void;
+};
+declare const DocumentBrowser: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocumentBrowser = ReturnType<typeof DocumentBrowser>;
+export default DocumentBrowser;