sh3-core 0.19.3 → 0.19.6

package/dist/api.d.ts

@@ -30,6 +30,7 @@ export { inspectActiveLayout, spliceIntoActiveLayout, dockIntoActiveLayout, focu
 export type { DocumentHandle, DocumentHandleOptions, DocumentFormat, DocumentMeta, DocumentChange, AutosaveController, } from './documents/types';
 export { PERMISSION_DOCUMENTS_BROWSE, PERMISSION_DOCUMENTS_READ, PERMISSION_DOCUMENTS_WRITE, } from './documents/types';
 export type { BrowseCapability } from './documents/browse';
+export type { DocumentPickerApi, DocumentOpenOptions, DocumentSaveOptions } from './documents/picker-api';
 export type { ContributionsApi } from './contributions/types';
 export type { SyncPolicy, SyncPolicyRule, DocStatus, ConflictFile, ConflictBranch, } from './documents/sync-types';
 export { PERMISSION_SYNC_PEER, PERMISSION_SYNC_POLICY } from './documents/sync-types';
@@ -87,5 +88,9 @@ export { default as Select } from './primitives/widgets/Select.svelte';
 export type { SelectOption } from './primitives/widgets/Select';
 export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
 export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';
+export { default as DocumentFilePicker } from './primitives/widgets/DocumentFilePicker.svelte';
+export { default as DocumentOpener } from './primitives/widgets/DocumentOpener.svelte';
+export { default as DocumentSaver } from './primitives/widgets/DocumentSaver.svelte';
+export type { OpenerValue, SaverValue } from './primitives/widgets/DocumentFilePicker';
 export type { FieldKind, FieldAddress, FieldView, ControllableFieldDescriptor, ImperativeFieldDescriptor, ElementRefFieldDescriptor, ReadonlyFieldDescriptor, FieldsApi, DecorationHandle, } from './fields/types';
 export { fieldAddressToString, fieldAddressFromString } from './fields/address';

package/dist/api.js

@@ -97,4 +97,7 @@ export { default as FilePicker } from './primitives/widgets/FilePicker.svelte';
 export { default as Select } from './primitives/widgets/Select.svelte';
 export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
 export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';
+export { default as DocumentFilePicker } from './primitives/widgets/DocumentFilePicker.svelte';
+export { default as DocumentOpener } from './primitives/widgets/DocumentOpener.svelte';
+export { default as DocumentSaver } from './primitives/widgets/DocumentSaver.svelte';
 export { fieldAddressToString, fieldAddressFromString } from './fields/address';

package/dist/chrome/CompactChrome.svelte

@@ -12,14 +12,23 @@
   import { sh3 } from '../sh3Runtime.svelte';
   import { layoutStore, getActiveRoot } from '../layout/store.svelte';
   import { derive } from '../layout/compact/derive';
+  import {
+    compactRootStore,
+    resolveCompactBodyRoot,
+  } from '../layout/compact/rootStore.svelte';
   import { getLiveDispatcherState } from '../actions/state.svelte';
   import { getRegisteredApp } from '../apps/registry.svelte';
   import { returnToHome } from '../apps/lifecycle';
   import Button from '../primitives/Button.svelte';
   import MenuSheet from './MenuSheet.svelte';
+  import FloatsSheet from './FloatsSheet.svelte';
   import type { DrawerAnchor } from '../layout/compact/types';
 
-  const rendering = $derived(derive(layoutStore.root));
+  // Drawer toggles re-derive against whatever is currently the body —
+  // when the user is on a float, its role-tagged slots drive the chrome,
+  // not the docked tree's.
+  const bodyRoot = $derived(resolveCompactBodyRoot());
+  const rendering = $derived(derive(bodyRoot));
   const dispatcher = $derived(getLiveDispatcherState());
   const onHome = $derived(getActiveRoot() === 'home');
   const appLabel = $derived.by(() => {
@@ -47,13 +56,28 @@
     return bestLabel;
   });
 
+  const floatTitle = $derived.by(() => {
+    const cur = compactRootStore.current;
+    if (cur.kind !== 'float') return null;
+    const f = layoutStore.tree.floats.find((x) => x.id === cur.floatId);
+    if (!f) return null;
+    if (f.title) return f.title;
+    if (f.content.type === 'tabs') {
+      const t = f.content.tabs[f.content.activeTab] ?? f.content.tabs[0];
+      return t?.label ?? null;
+    }
+    return null;
+  });
+
   const title = $derived.by(() => {
+    if (floatTitle) return floatTitle;
     const carouselLabel = topmostCarouselLabel;
     if (carouselLabel) return `${appLabel} › ${carouselLabel}`;
     return appLabel;
   });
 
   let menuOpen = $state(false);
+  let floatsOpen = $state(false);
 
   function toggleDrawer(anchor: DrawerAnchor) {
     sh3.drawers.toggle(anchor);
@@ -92,11 +116,20 @@
   <div class="title">{title}</div>
   <div class="trailing">
     <Button variant="icon" icon="command" ariaLabel="Open command palette" title="Open command palette" onclick={openPalette} />
+    <Button
+      variant="icon"
+      icon="layers"
+      ariaLabel="Floats"
+      title="Floats"
+      pressed={floatsOpen}
+      onclick={() => { floatsOpen = !floatsOpen; }}
+    />
     <Button variant="icon" icon="ellipsis-vertical" ariaLabel="Open menu" title="Open menu" onclick={() => { menuOpen = true; }} />
   </div>
 </header>
 
 <MenuSheet open={menuOpen} onClose={() => (menuOpen = false)} />
+<FloatsSheet open={floatsOpen} onClose={() => (floatsOpen = false)} />
 
 <style>
   .sh3-compact-chrome {

package/dist/chrome/CompactChrome.svelte.test.js

@@ -65,7 +65,7 @@ describe('CompactChrome (dom)', () => {
         expect(host.querySelector('.leading [data-sh3-anchor="right"] button')).not.toBeNull();
         expect(host.querySelector('.leading [data-sh3-anchor="top"] button')).toBeNull();
     });
-    it('renders palette + overflow buttons in the trailing section', () => {
+    it('renders palette + floats + overflow buttons in the trailing section', () => {
         attachApp(fakeApp());
         switchToApp();
         flushSync();
@@ -74,7 +74,9 @@ describe('CompactChrome (dom)', () => {
         mounted = mount(CompactChromeAny, { target: host });
         flushSync();
         const trailing = host.querySelectorAll('.trailing button');
-        expect(trailing.length).toBe(2);
+        expect(trailing.length).toBe(3);
+        const labels = Array.from(trailing).map((b) => b.getAttribute('aria-label'));
+        expect(labels).toEqual(['Open command palette', 'Floats', 'Open menu']);
     });
 });
 describe('CompactChrome — home button', () => {

package/dist/chrome/FloatsSheet.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  /*
+   * FloatsSheet — bottom-anchored navigation sheet for compact mode.
+   *
+   * Lists the active-layout entry plus one row per non-dismissable float.
+   * Tapping a row calls compactRootStore.setRoot(...) and closes the sheet.
+   * Dismissable pickers (anchored popovers) are excluded — they aren't
+   * "places to go", they're transient overlays.
+   *
+   * The active-layout row label tracks the active app (or "Home" when no
+   * app is attached). The current row is marked with data-current="true"
+   * for styling.
+   */
+  import { layoutStore, getActiveRoot } from '../layout/store.svelte';
+  import { compactRootStore } from '../layout/compact/rootStore.svelte';
+  import { floatManager } from '../overlays/float';
+  import { getLiveDispatcherState } from '../actions/state.svelte';
+  import { getRegisteredApp } from '../apps/registry.svelte';
+  import type { FloatEntry } from '../layout/types';
+
+  let { open, onClose }: { open: boolean; onClose: () => void } = $props();
+
+  const dispatcher = $derived(getLiveDispatcherState());
+  const dockedLabel = $derived.by(() => {
+    if (getActiveRoot() === 'home') return 'Home';
+    const id = dispatcher.activeAppId;
+    if (!id) return 'Home';
+    return getRegisteredApp(id)?.manifest.label ?? id;
+  });
+
+  function floatLabel(f: FloatEntry): string {
+    if (f.title) return f.title;
+    if (f.content.type === 'tabs') {
+      const t = f.content.tabs[f.content.activeTab] ?? f.content.tabs[0];
+      if (t) return t.label;
+    }
+    return f.id;
+  }
+
+  const rows = $derived.by(() => {
+    const out: { id: 'docked' | string; label: string }[] = [
+      { id: 'docked', label: dockedLabel },
+    ];
+    for (const f of layoutStore.tree.floats) {
+      if (f.dismissable) continue;
+      out.push({ id: f.id, label: floatLabel(f) });
+    }
+    return out;
+  });
+
+  function isCurrent(rowId: 'docked' | string): boolean {
+    const cur = compactRootStore.current;
+    if (rowId === 'docked') return cur.kind === 'docked';
+    return cur.kind === 'float' && cur.floatId === rowId;
+  }
+
+  function activate(rowId: 'docked' | string): void {
+    if (rowId === 'docked') {
+      compactRootStore.reset();
+    } else {
+      compactRootStore.setRoot({ kind: 'float', floatId: rowId });
+    }
+    onClose();
+  }
+
+  // ----- swipe-to-close --------------------------------------------------
+  // Horizontal pointer drag on a float row past 40% of its width closes the
+  // float. The active-layout row is non-swipeable. Document-level pointer
+  // listeners survive the pointer leaving the row mid-drag, mirroring the
+  // float-frame drag pattern.
+  const SWIPE_THRESHOLD = 0.4;
+  let swipingId = $state<string | null>(null);
+  let swipeDx = $state(0);
+  let swipeStartX = 0;
+  let swipePointerId: number | null = null;
+  let swipeRowEl: HTMLElement | null = null;
+
+  function rowOffset(rowId: 'docked' | string): number {
+    return swipingId === rowId ? swipeDx : 0;
+  }
+
+  function rowTransition(rowId: 'docked' | string): string {
+    return swipingId === rowId ? 'none' : 'transform 160ms ease-out';
+  }
+
+  function onRowPointerDown(e: PointerEvent, rowId: 'docked' | string): void {
+    if (rowId === 'docked') return;
+    if (e.button !== 0) return;
+    if (swipingId !== null) return;
+    swipingId = rowId;
+    swipeStartX = e.clientX;
+    swipeDx = 0;
+    swipePointerId = e.pointerId;
+    // Prefer e.currentTarget; fall back to a DOM query so synthetic events
+    // (vitest dispatchEvent) that may not populate currentTarget still
+    // resolve the row width for the threshold check.
+    swipeRowEl =
+      (e.currentTarget as HTMLElement | null) ??
+      (document.querySelector(`[data-sh3-floats-row="${rowId}"]`) as HTMLElement | null);
+    document.addEventListener('pointermove', onSwipeMove);
+    document.addEventListener('pointerup', onSwipeUp);
+    document.addEventListener('pointercancel', onSwipeCancel);
+  }
+
+  function onSwipeMove(e: PointerEvent): void {
+    if (e.pointerId !== swipePointerId) return;
+    swipeDx = e.clientX - swipeStartX;
+  }
+
+  function endSwipe(): void {
+    document.removeEventListener('pointermove', onSwipeMove);
+    document.removeEventListener('pointerup', onSwipeUp);
+    document.removeEventListener('pointercancel', onSwipeCancel);
+    swipingId = null;
+    swipePointerId = null;
+    swipeStartX = 0;
+    swipeDx = 0;
+    swipeRowEl = null;
+  }
+
+  function onSwipeUp(e: PointerEvent): void {
+    if (e.pointerId !== swipePointerId) return;
+    const id = swipingId;
+    const width = swipeRowEl?.clientWidth ?? 0;
+    const dx = swipeDx;
+    endSwipe();
+    if (id && id !== 'docked' && width > 0 && Math.abs(dx) >= width * SWIPE_THRESHOLD) {
+      floatManager.close(id);
+    }
+  }
+
+  function onSwipeCancel(e: PointerEvent): void {
+    if (e.pointerId !== swipePointerId) return;
+    endSwipe();
+  }
+</script>
+
+{#if open}
+  <div
+    class="backdrop"
+    onclick={onClose}
+    onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}
+    role="presentation"
+  ></div>
+  <div class="sheet" role="dialog" aria-label="Floats" data-sh3-region="floats-sheet">
+    <div class="scroll">
+      {#each rows as row (row.id)}
+        <button
+          class="row"
+          data-sh3-floats-row={row.id}
+          data-current={isCurrent(row.id) ? 'true' : 'false'}
+          onclick={() => activate(row.id)}
+          onpointerdown={(e) => onRowPointerDown(e, row.id)}
+          style:transform="translateX({rowOffset(row.id)}px)"
+          style:transition={rowTransition(row.id)}
+        >
+          <span class="label">{row.label}</span>
+          {#if row.id === 'docked'}
+            <span class="kind">layout</span>
+          {:else}
+            <span class="kind">float</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+    <button class="cancel" onclick={onClose}>Cancel</button>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    background: var(--sh3-overlay-backdrop, rgba(0, 0, 0, 0.35));
+    pointer-events: auto;
+    z-index: var(--sh3-z-layer-4);
+  }
+  .sheet {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--sh3-bg);
+    color: var(--sh3-fg);
+    border-top: 1px solid var(--sh3-border);
+    box-shadow: var(--sh3-shadow-md, 0 -4px 16px rgba(0, 0, 0, 0.2));
+    pointer-events: auto;
+    z-index: var(--sh3-z-layer-4);
+  }
+  .scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--sh3-pad-sm) 0;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--sh3-pad-sm);
+    width: 100%;
+    padding: var(--sh3-pad-md);
+    border: none;
+    background: none;
+    color: var(--sh3-fg);
+    text-align: left;
+    cursor: pointer;
+    /* Suppress browser-claimed horizontal pan so swipe-to-close survives
+       past the system scroll-claim threshold on Android/iOS. */
+    touch-action: pan-y;
+    user-select: none;
+  }
+  .row[data-current='true'] {
+    background: var(--sh3-bg-sunken);
+    font-weight: 600;
+  }
+  .row:active { background: var(--sh3-bg-sunken); }
+  .label { flex: 1; }
+  .kind {
+    color: var(--sh3-fg-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .cancel {
+    padding: var(--sh3-pad-md);
+    border: none;
+    border-top: 1px solid var(--sh3-border);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    font-weight: 600;
+    cursor: pointer;
+  }
+</style>

package/dist/chrome/FloatsSheet.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    open: boolean;
+    onClose: () => void;
+};
+declare const FloatsSheet: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatsSheet = ReturnType<typeof FloatsSheet>;
+export default FloatsSheet;

package/dist/chrome/FloatsSheet.svelte.test.d.ts

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

package/dist/chrome/FloatsSheet.svelte.test.js

@@ -0,0 +1,155 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { tick } from 'svelte';
+import { renderWithShell } from '../__test__/render';
+import { resetFramework } from '../__test__/reset';
+import { __resetLayoutStoreForTest, layoutStore, } from '../layout/store.svelte';
+import { compactRootStore, __resetCompactRootStoreForTest, } from '../layout/compact/rootStore.svelte';
+import FloatsSheet from './FloatsSheet.svelte';
+function makeFloat(id, title) {
+    return {
+        id,
+        content: {
+            type: 'tabs',
+            tabs: [{ slotId: `s-${id}`, viewId: 'v', label: title }],
+            activeTab: 0,
+        },
+        position: { x: 0, y: 0 },
+        size: { w: 200, h: 200 },
+        title,
+    };
+}
+describe('FloatsSheet', () => {
+    beforeEach(() => {
+        resetFramework();
+        __resetCompactRootStoreForTest();
+        __resetLayoutStoreForTest();
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('renders the active-layout row even when no floats exist', async () => {
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { },
+        });
+        await tick();
+        const rows = container.querySelectorAll('[data-sh3-floats-row]');
+        expect(rows.length).toBe(1);
+        expect(rows[0].getAttribute('data-sh3-floats-row')).toBe('docked');
+    });
+    it('lists one row per non-dismissable float, excluding pickers', async () => {
+        layoutStore.tree.floats.push(makeFloat('f-1', 'Notes'));
+        layoutStore.tree.floats.push(makeFloat('f-2', 'Editor'));
+        layoutStore.tree.floats.push(Object.assign(Object.assign({}, makeFloat('f-3', 'Picker')), { dismissable: true }));
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { },
+        });
+        await tick();
+        const rows = container.querySelectorAll('[data-sh3-floats-row]');
+        expect(rows.length).toBe(3); // docked + 2 non-dismissable
+        const ids = Array.from(rows).map((r) => r.getAttribute('data-sh3-floats-row'));
+        expect(ids).toEqual(['docked', 'f-1', 'f-2']);
+    });
+    it('tapping a float row sets compactRootStore + calls onClose', async () => {
+        layoutStore.tree.floats.push(makeFloat('f-9', 'Notes'));
+        let closed = false;
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { closed = true; },
+        });
+        await tick();
+        const row = container.querySelector('[data-sh3-floats-row="f-9"]');
+        row.click();
+        expect(compactRootStore.current).toEqual({ kind: 'float', floatId: 'f-9' });
+        expect(closed).toBe(true);
+    });
+    it('tapping the docked row resets compactRootStore + calls onClose', async () => {
+        layoutStore.tree.floats.push(makeFloat('f-10', 'Notes'));
+        compactRootStore.setRoot({ kind: 'float', floatId: 'f-10' });
+        let closed = false;
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { closed = true; },
+        });
+        await tick();
+        const row = container.querySelector('[data-sh3-floats-row="docked"]');
+        row.click();
+        expect(compactRootStore.current).toEqual({ kind: 'docked' });
+        expect(closed).toBe(true);
+    });
+    it('marks the current row with data-current="true"', async () => {
+        layoutStore.tree.floats.push(makeFloat('f-11', 'Notes'));
+        compactRootStore.setRoot({ kind: 'float', floatId: 'f-11' });
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { },
+        });
+        await tick();
+        const cur = container.querySelector('[data-current="true"]');
+        expect(cur === null || cur === void 0 ? void 0 : cur.getAttribute('data-sh3-floats-row')).toBe('f-11');
+    });
+});
+import { floatManager, bindFloatStore, __resetFloatManagerForTest, } from '../overlays/float';
+function fakePointer(type, x, y, id = 1) {
+    const ev = new Event(type, { bubbles: true, cancelable: true });
+    Object.assign(ev, { pointerId: id, clientX: x, clientY: y, pointerType: 'touch', button: 0 });
+    return ev;
+}
+describe('FloatsSheet — swipe to close', () => {
+    beforeEach(() => {
+        resetFramework();
+        __resetCompactRootStoreForTest();
+        __resetLayoutStoreForTest();
+        __resetFloatManagerForTest();
+        bindFloatStore(layoutStore.floats, () => ({ w: 360, h: 740 }));
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('swiping a float row past 40% width closes that float', async () => {
+        const id = floatManager.open('test:view', { title: 'Notes' });
+        expect(layoutStore.floats.find((f) => f.id === id)).toBeTruthy();
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { },
+        });
+        await tick();
+        const row = container.querySelector(`[data-sh3-floats-row="${id}"]`);
+        Object.defineProperty(row, 'clientWidth', { configurable: true, value: 360 });
+        row.dispatchEvent(fakePointer('pointerdown', 10, 10, 1));
+        document.dispatchEvent(fakePointer('pointermove', 200, 10, 1));
+        document.dispatchEvent(fakePointer('pointerup', 200, 10, 1));
+        await tick();
+        expect(layoutStore.floats.find((f) => f.id === id)).toBeUndefined();
+    });
+    it('does not let the docked row be swiped (no throw, no state change)', async () => {
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { },
+        });
+        await tick();
+        const row = container.querySelector('[data-sh3-floats-row="docked"]');
+        Object.defineProperty(row, 'clientWidth', { configurable: true, value: 360 });
+        row.dispatchEvent(fakePointer('pointerdown', 10, 10, 2));
+        document.dispatchEvent(fakePointer('pointermove', 300, 10, 2));
+        document.dispatchEvent(fakePointer('pointerup', 300, 10, 2));
+        await tick();
+        expect(compactRootStore.current).toEqual({ kind: 'docked' });
+    });
+    it('swiping less than 40% width does not close', async () => {
+        const id = floatManager.open('test:view', { title: 'Notes' });
+        const { container } = renderWithShell(FloatsSheet, {
+            open: true,
+            onClose: () => { },
+        });
+        await tick();
+        const row = container.querySelector(`[data-sh3-floats-row="${id}"]`);
+        Object.defineProperty(row, 'clientWidth', { configurable: true, value: 360 });
+        row.dispatchEvent(fakePointer('pointerdown', 10, 10, 3));
+        document.dispatchEvent(fakePointer('pointermove', 50, 10, 3));
+        document.dispatchEvent(fakePointer('pointerup', 50, 10, 3));
+        await tick();
+        expect(layoutStore.floats.find((f) => f.id === id)).toBeTruthy();
+    });
+});

package/dist/documents/picker-api.d.ts

@@ -0,0 +1,31 @@
+import type { DocEntry, OpenerValue, SaverValue } from '../primitives/widgets/DocumentFilePicker';
+/** Function that returns the document tree for the picker to browse. */
+export type DocListFn = () => Promise<DocEntry[]>;
+/** Options for `ctx.documentPicker.open()`. */
+export interface DocumentOpenOptions {
+    /** Element to anchor the popup to. Defaults to viewport center. */
+    anchor?: HTMLElement;
+}
+/** Options for `ctx.documentPicker.save()`. */
+export interface DocumentSaveOptions {
+    /** Pre-fill the filename input in the save dialog. */
+    suggestedName?: string;
+    /** Element to anchor the popup to. Defaults to viewport center. */
+    anchor?: HTMLElement;
+}
+/** Programmatic document picker API — available on `ctx.documentPicker`. */
+export interface DocumentPickerApi {
+    /**
+     * Open the document browser in "open" mode. The user browses and selects
+     * an existing document. Returns the selected `{shardId, path}` or null
+     * if cancelled or dismissed externally.
+     */
+    open(opts?: DocumentOpenOptions): Promise<OpenerValue | null>;
+    /**
+     * Open the document browser in "save" mode. The user navigates to a
+     * folder and provides a filename. Returns the full path string or null
+     * if cancelled or dismissed externally.
+     */
+    save(opts?: DocumentSaveOptions): Promise<SaverValue | null>;
+}
+export type { OpenerValue, SaverValue };

package/dist/documents/picker-api.js

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

package/dist/documents/picker-api.test.d.ts

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