sh3-core 0.12.0 → 0.13.1

package/dist/navigation/platform-web.js

@@ -0,0 +1,54 @@
+/*
+ * Web platform emitter for the navigation back-cascade.
+ *
+ * Browser back/forward (and mouse X1/X2 buttons, which the browser maps
+ * to history navigation) all funnel through `popstate`. The event itself
+ * doesn't report direction, so we maintain a three-state "sandwich":
+ *
+ *   position 0:  { sh3: 'anchor' }           ← popstate here = back was pressed
+ *   position 1:  { sh3: 'main' }             ← resting position
+ *   position 2:  { sh3: 'forward-bumper' }   ← popstate here = forward was pressed
+ *
+ * On every consumed signal we re-anchor to 'main' so the user never
+ * navigates out of SH3 via the back/forward chord.
+ *
+ * Page reload re-runs install. The two extra synthetic history entries
+ * are accepted noise; no URL changes.
+ *
+ * Known limitation: third-party `pushState` (HMR, libraries) clobbers the
+ * forward-bumper. SH3 framework code must not call pushState directly.
+ */
+import { dispatchBack, dispatchForward } from './back-stack';
+let installed = false;
+let listener = null;
+export function installWebEmitter() {
+    if (installed)
+        return;
+    installed = true;
+    listener = (e) => {
+        var _a;
+        const tag = (_a = e.state) === null || _a === void 0 ? void 0 : _a.sh3;
+        if (tag === 'anchor') {
+            dispatchBack();
+            history.forward();
+        }
+        else if (tag === 'forward-bumper') {
+            dispatchForward();
+            history.back();
+        }
+        // tag === 'main' (or undefined) → echo from our own correction; ignore.
+    };
+    window.addEventListener('popstate', listener);
+    history.replaceState({ sh3: 'anchor' }, '');
+    history.pushState({ sh3: 'main' }, '');
+    history.pushState({ sh3: 'forward-bumper' }, '');
+    history.back();
+}
+/** @internal — test cleanup. Removes the listener; does not unwind history. */
+export function __uninstallWebEmitterForTest() {
+    if (listener) {
+        window.removeEventListener('popstate', listener);
+        listener = null;
+    }
+    installed = false;
+}

package/dist/navigation/platform-web.test.d.ts

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

package/dist/navigation/platform-web.test.js

@@ -0,0 +1,96 @@
+/*
+ * Note: happy-dom does not simulate `history.back()` / `history.forward()`
+ * (state stays put). We can't drive the listener via the real navigation
+ * API in this environment, so we test what we own — listener wiring and
+ * dispatch routing — by dispatching synthetic PopStateEvents directly.
+ * The trailing `history.back()` in installWebEmitter is a no-op here but
+ * is real in browsers and Tauri webviews; manual verification (Task 7 of
+ * the plan) covers the actual navigation behavior.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { installWebEmitter, __uninstallWebEmitterForTest } from './platform-web';
+import { __resetBackStackForTest, __setLifecycleHandlersForTest, } from './back-stack';
+import { activeApp, breadcrumbApp } from '../apps/registry.svelte';
+beforeEach(() => {
+    __resetBackStackForTest();
+    activeApp.id = null;
+    breadcrumbApp.id = null;
+});
+afterEach(() => {
+    __uninstallWebEmitterForTest();
+});
+// happy-dom's PopStateEvent constructor ignores the `state` init dict, so
+// we attach state manually via defineProperty before dispatching.
+function firePopState(state) {
+    const e = new PopStateEvent('popstate');
+    Object.defineProperty(e, 'state', { value: state });
+    window.dispatchEvent(e);
+}
+const fireAnchor = () => firePopState({ sh3: 'anchor' });
+const fireForwardBumper = () => firePopState({ sh3: 'forward-bumper' });
+const fireMain = () => firePopState({ sh3: 'main' });
+describe('platform-web — sentinel install', () => {
+    it('installs without throwing and pushes the three sentinel entries', () => {
+        const before = history.length;
+        installWebEmitter();
+        // pushState appends; replaceState doesn't. We expect at least +2 entries
+        // (the two pushStates; replaceState replaced the user's current entry).
+        expect(history.length).toBeGreaterThanOrEqual(before + 2);
+    });
+    it('install is idempotent — second call does nothing', () => {
+        installWebEmitter();
+        const after1 = history.length;
+        installWebEmitter();
+        expect(history.length).toBe(after1);
+    });
+});
+describe('platform-web — back signal', () => {
+    it('an anchor-tagged popstate fires dispatchBack', () => {
+        activeApp.id = 'app';
+        const returnToHome = vi.fn();
+        __setLifecycleHandlersForTest({ returnToHome, launchApp: vi.fn() });
+        installWebEmitter();
+        fireAnchor();
+        expect(returnToHome).toHaveBeenCalledTimes(1);
+    });
+});
+describe('platform-web — forward signal', () => {
+    it('a forward-bumper-tagged popstate fires dispatchForward', () => {
+        activeApp.id = null;
+        breadcrumbApp.id = 'last-app';
+        const launchApp = vi.fn();
+        __setLifecycleHandlersForTest({ returnToHome: vi.fn(), launchApp });
+        installWebEmitter();
+        fireForwardBumper();
+        expect(launchApp).toHaveBeenCalledWith('last-app');
+    });
+});
+describe('platform-web — main echo is ignored', () => {
+    it('a popstate tagged main does not fire dispatch', () => {
+        activeApp.id = 'app';
+        const returnToHome = vi.fn();
+        __setLifecycleHandlersForTest({ returnToHome, launchApp: vi.fn() });
+        installWebEmitter();
+        fireMain();
+        expect(returnToHome).not.toHaveBeenCalled();
+    });
+    it('a popstate with no state (untagged) does not fire dispatch', () => {
+        activeApp.id = 'app';
+        const returnToHome = vi.fn();
+        __setLifecycleHandlersForTest({ returnToHome, launchApp: vi.fn() });
+        installWebEmitter();
+        firePopState(null);
+        expect(returnToHome).not.toHaveBeenCalled();
+    });
+});
+describe('platform-web — uninstall', () => {
+    it('after __uninstall, popstates no longer fire dispatch', () => {
+        activeApp.id = 'app';
+        const returnToHome = vi.fn();
+        __setLifecycleHandlersForTest({ returnToHome, launchApp: vi.fn() });
+        installWebEmitter();
+        __uninstallWebEmitterForTest();
+        fireAnchor();
+        expect(returnToHome).not.toHaveBeenCalled();
+    });
+});

package/dist/overlays/modal.js

@@ -39,6 +39,7 @@
 import { mount, unmount } from 'svelte';
 import ModalFrame from './ModalFrame.svelte';
 import { getLayerRoot } from './roots';
+import { registerDismissable } from '../navigation/back-stack';
 const stack = [];
 let escapeInstalled = false;
 let backdrop = null;
@@ -116,6 +117,12 @@ function openModal(Content, props, options) {
     const handle = {
         close: () => removeEntry(entry),
     };
+    const dismissReg = registerDismissable(() => handle.close());
+    const originalClose = handle.close;
+    handle.close = () => {
+        dismissReg.unregister();
+        originalClose();
+    };
     const frame = mount(ModalFrame, {
         target: host,
         props: {

package/dist/overlays/modal.test.js

@@ -53,3 +53,38 @@ describe('modal — backdrop dismiss policy', () => {
         expect(layerRoot.querySelector('.sh3-modal-host')).not.toBeNull();
     });
 });
+describe('modal — back-cascade integration', () => {
+    let layerRoot;
+    beforeEach(() => {
+        layerRoot = makeLayerRoot();
+    });
+    afterEach(() => {
+        modalManager.closeAll();
+        teardownLayerRoot(layerRoot);
+    });
+    it('opens register a dismissable; back closes the topmost modal', async () => {
+        const { dispatchBack, __resetBackStackForTest } = await import('../navigation/back-stack');
+        __resetBackStackForTest();
+        modalManager.open(DummyFrame, {});
+        modalManager.open(DummyFrame, {});
+        await tick();
+        expect(layerRoot.querySelectorAll('.sh3-modal-host').length).toBe(2);
+        dispatchBack();
+        await tick();
+        expect(layerRoot.querySelectorAll('.sh3-modal-host').length).toBe(1);
+        dispatchBack();
+        await tick();
+        expect(layerRoot.querySelectorAll('.sh3-modal-host').length).toBe(0);
+    });
+    it('programmatic close unregisters the dismissable (no double-close)', async () => {
+        const { dispatchBack, __resetBackStackForTest } = await import('../navigation/back-stack');
+        __resetBackStackForTest();
+        const handle = modalManager.open(DummyFrame, {});
+        await tick();
+        handle.close();
+        handle.close();
+        await tick();
+        expect(() => dispatchBack()).not.toThrow();
+        expect(layerRoot.querySelectorAll('.sh3-modal-host').length).toBe(0);
+    });
+});

package/dist/overlays/popup.js

@@ -28,6 +28,7 @@
 import { mount, unmount } from 'svelte';
 import PopupFrame from './PopupFrame.svelte';
 import { getLayerRoot } from './roots';
+import { registerDismissable } from '../navigation/back-stack';
 /**
  * Convert a PopupAnchor to a DOMRect.
  * - HTMLElement: uses its live bounding rect.
@@ -91,6 +92,12 @@ function showPopup(Content, options, props) {
     const handle = {
         close: () => removeEntry(entry),
     };
+    const dismissReg = registerDismissable(() => handle.close());
+    const originalClose = handle.close;
+    handle.close = () => {
+        dismissReg.unregister();
+        originalClose();
+    };
     const frame = mount(PopupFrame, {
         target: host,
         props: {

package/dist/overlays/popup.test.js

@@ -93,3 +93,36 @@ describe('popup — P.2 HTMLElement anchor regression', () => {
         anchor.remove();
     });
 });
+describe('popup — back-cascade integration', () => {
+    let layerRoot;
+    beforeEach(() => {
+        vi.stubGlobal('innerWidth', 2000);
+        vi.stubGlobal('innerHeight', 2000);
+        layerRoot = makeLayerRoot();
+    });
+    afterEach(() => {
+        __resetPopupManagerForTest();
+        teardownLayerRoot(layerRoot);
+        vi.unstubAllGlobals();
+    });
+    it('opening a popup registers a dismissable; back closes it', async () => {
+        const { dispatchBack, __resetBackStackForTest } = await import('../navigation/back-stack');
+        __resetBackStackForTest();
+        popupManager.show(DummyFrame, { anchor: { x: 100, y: 100 } }, {});
+        await tick();
+        expect(layerRoot.querySelector('.sh3-popup-host')).not.toBeNull();
+        dispatchBack();
+        await tick();
+        expect(layerRoot.querySelector('.sh3-popup-host')).toBeNull();
+    });
+    it('programmatic close does not leave a stale dismissable', async () => {
+        const { dispatchBack, __resetBackStackForTest } = await import('../navigation/back-stack');
+        __resetBackStackForTest();
+        const handle = popupManager.show(DummyFrame, { anchor: { x: 100, y: 100 } }, {});
+        await tick();
+        handle.close();
+        await tick();
+        expect(() => dispatchBack()).not.toThrow();
+        expect(layerRoot.querySelector('.sh3-popup-host')).toBeNull();
+    });
+});

package/dist/platform/index.d.ts

@@ -8,3 +8,18 @@ export interface PlatformResult {
     localOwner: boolean;
 }
 export declare function resolvePlatform(): Promise<PlatformResult>;
+/**
+ * Erase all persisted SH3 state for this user/device.
+ *
+ * Wipes:
+ *   - Tauri plugin-store files (`workspace.json`, `user.json`) when running
+ *     inside a Tauri webview
+ *   - localStorage keys with the `sh3:` prefix (web zones + theme overrides;
+ *     also active inside the Tauri webview)
+ *   - the `sh3-packages` IndexedDB database (installed bundle registry)
+ *
+ * Intentionally preserves the `sh3-documents` IndexedDB so user-authored
+ * content survives a reset. Callers are expected to follow this with a
+ * `location.reload()` so a clean boot picks up the cleared state.
+ */
+export declare function wipeUserData(): Promise<void>;

package/dist/platform/index.js

@@ -31,3 +31,50 @@ export async function resolvePlatform() {
         return { backends: null, localOwner: DEV };
     }
 }
+/**
+ * Erase all persisted SH3 state for this user/device.
+ *
+ * Wipes:
+ *   - Tauri plugin-store files (`workspace.json`, `user.json`) when running
+ *     inside a Tauri webview
+ *   - localStorage keys with the `sh3:` prefix (web zones + theme overrides;
+ *     also active inside the Tauri webview)
+ *   - the `sh3-packages` IndexedDB database (installed bundle registry)
+ *
+ * Intentionally preserves the `sh3-documents` IndexedDB so user-authored
+ * content survives a reset. Callers are expected to follow this with a
+ * `location.reload()` so a clean boot picks up the cleared state.
+ */
+export async function wipeUserData() {
+    // Tauri stores live on disk via plugin-store; localStorage/IDB don't reach them.
+    try {
+        const { LazyStore } = await import('@tauri-apps/plugin-store');
+        const workspace = new LazyStore('workspace.json', { defaults: {}, autoSave: true });
+        const user = new LazyStore('user.json', { defaults: {}, autoSave: true });
+        await workspace.clear();
+        await user.clear();
+    }
+    catch (_a) {
+        // Not in Tauri — nothing to clear on disk.
+    }
+    if (typeof localStorage !== 'undefined') {
+        const keys = [];
+        for (let i = 0; i < localStorage.length; i++) {
+            const k = localStorage.key(i);
+            if (k && k.startsWith('sh3:'))
+                keys.push(k);
+        }
+        for (const k of keys)
+            localStorage.removeItem(k);
+    }
+    if (typeof indexedDB !== 'undefined') {
+        await new Promise((resolve) => {
+            const req = indexedDB.deleteDatabase('sh3-packages');
+            req.onsuccess = () => resolve();
+            // Swallow errors/blocked: a stale lock shouldn't abort the wipe;
+            // the next boot will re-create the DB empty either way.
+            req.onerror = () => resolve();
+            req.onblocked = () => resolve();
+        });
+    }
+}

package/dist/primitives/base.css

@@ -52,7 +52,8 @@ input[type="tel"],
 input[type="number"],
 textarea,
 .shell-base-input {
-  padding: var(--shell-pad-md) var(--shell-pad-lg);
+  padding: 0 var(--shell-field-pad-x);
+  height: var(--shell-field-height-md);
   background: var(--shell-input-bg);
   color: var(--shell-fg);
   border: 1px solid var(--shell-border);
@@ -82,6 +83,8 @@ textarea:disabled,
 textarea {
   resize: vertical;
   min-height: calc(var(--shell-line) * 3em);
+  height: auto;
+  padding: var(--shell-pad-sm) var(--shell-field-pad-x);
 }
 
 /* ── Checkbox & radio ────────────────────────────────────────────────── */
@@ -103,8 +106,10 @@ input[type="radio"].shell-base-radio {
 .shell-base-check { border-radius: var(--shell-radius-sm); }
 .shell-base-radio { border-radius: 50%; }
 
-.shell-base-check:checked,
-.shell-base-radio:checked {
+/* Need the input[type] prefix to outweigh the base
+   `input[type="checkbox"].shell-base-check` rule's specificity. */
+input[type="checkbox"].shell-base-check:checked,
+input[type="radio"].shell-base-radio:checked {
   background: var(--shell-accent);
   border-color: var(--shell-accent);
 }
@@ -145,11 +150,13 @@ input[type="checkbox"].shell-base-switch {
   width: 28px;
   height: 16px;
   margin: 0;
-  background: var(--shell-border-strong);
+  background: var(--shell-bg-sunken);
+  border: 1px solid var(--shell-border-strong);
   border-radius: 999px;
   cursor: pointer;
-  transition: background 120ms ease;
+  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
   flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .shell-base-switch::before {
@@ -164,7 +171,11 @@ input[type="checkbox"].shell-base-switch {
   transition: transform 120ms ease;
 }
 
-.shell-base-switch:checked { background: var(--shell-accent); }
+input[type="checkbox"].shell-base-switch:checked {
+  background: var(--shell-accent);
+  border-color: var(--shell-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-accent) 25%, transparent);
+}
 .shell-base-switch:checked::before {
   transform: translateX(12px);
   background: var(--shell-fg-on-accent);

package/dist/primitives/widgets/ColorSwatch.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { shell } from '../../shellRuntime.svelte';
+
+  let {
+    value = $bindable('#000000'),
+    label,
+    disabled = false,
+    size = 'md',
+  }: {
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+  } = $props();
+
+  let trigger: HTMLButtonElement | undefined;
+
+  async function open() {
+    if (disabled) return;
+    const result = await shell.color.pick({ initial: value, anchor: trigger });
+    if (result !== null && result !== undefined) value = result;
+  }
+</script>
+
+<label class="sh3-swatch" class:sh3-swatch--sm={size === 'sm'}>
+  {#if label}<span class="sh3-swatch__label">{label}</span>{/if}
+  <button
+    type="button"
+    class="sh3-swatch__btn"
+    bind:this={trigger}
+    {disabled}
+    onclick={open}
+    aria-label="{label ?? 'Color'} (current {value})"
+    style:--swatch-color={value}
+  ><span class="sh3-swatch__dot"></span><span class="sh3-swatch__hex">{value}</span></button>
+</label>
+
+<style>
+  .sh3-swatch { display: inline-flex; flex-direction: column; gap: 4px; }
+  .sh3-swatch__label { font-size: 0.75rem; color: var(--shell-fg-muted); }
+  .sh3-swatch__btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    height: var(--shell-field-height-md);
+    padding: 0 var(--shell-field-pad-x);
+    background: var(--shell-input-bg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius);
+    color: var(--shell-fg);
+    cursor: pointer;
+    font: inherit;
+  }
+  .sh3-swatch--sm .sh3-swatch__btn { height: var(--shell-field-height-sm); }
+  .sh3-swatch__btn:hover:not(:disabled) {
+    background: var(--shell-bg-elevated);
+    filter: none;
+  }
+  .sh3-swatch__btn:focus-visible { outline: none; box-shadow: var(--shell-focus-ring); }
+  .sh3-swatch__btn:disabled { opacity: 0.55; cursor: not-allowed; }
+  .sh3-swatch__dot {
+    width: 16px; height: 16px;
+    border: 1px solid var(--shell-border-strong);
+    border-radius: var(--shell-radius-sm);
+    background: var(--swatch-color);
+  }
+  .sh3-swatch__hex { font-family: var(--shell-font-mono); font-size: 0.75rem; }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const ColorSwatch: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ColorSwatch = ReturnType<typeof ColorSwatch>;
+export default ColorSwatch;

package/dist/primitives/widgets/Field.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    value = $bindable(''),
+    type = 'text',
+    label,
+    placeholder,
+    prefix,
+    suffix,
+    helper,
+    error,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    required = false,
+    autocomplete,
+    onchange,
+  }: {
+    value?: string;
+    type?: 'text' | 'email' | 'password' | 'search' | 'url' | 'tel';
+    label?: string;
+    placeholder?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    helper?: string;
+    error?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    required?: boolean;
+    autocomplete?: AutoFill;
+    onchange?: (next: string) => void;
+  } = $props();
+
+  const showError = $derived(invalid && !!error);
+  const helperText = $derived(showError ? error : helper);
+</script>
+
+<label class="sh3-field" class:sh3-field--invalid={invalid} class:sh3-field--sm={size === 'sm'}>
+  {#if label}<span class="sh3-field__label">{label}{#if required}<span aria-hidden="true"> *</span>{/if}</span>{/if}
+  <span class="sh3-field__row">
+    {#if prefix}<span class="sh3-field__affix">{@render prefix()}</span>{/if}
+    <input
+      class="sh3-field__input"
+      {type}
+      {placeholder}
+      {disabled}
+      {required}
+      {autocomplete}
+      aria-invalid={invalid || undefined}
+      bind:value
+      onblur={() => onchange?.(value)}
+    />
+    {#if suffix}<span class="sh3-field__affix">{@render suffix()}</span>{/if}
+  </span>
+  {#if helperText}<span class="sh3-field__helper" class:sh3-field__helper--error={showError}>{helperText}</span>{/if}
+</label>
+
+<style>
+  .sh3-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 4px;
+    font-family: var(--shell-font-ui);
+    font-size: 0.8125rem;
+    color: var(--shell-fg);
+  }
+  .sh3-field__label {
+    color: var(--shell-fg-muted);
+    font-size: 0.75rem;
+  }
+  .sh3-field__row {
+    display: inline-flex;
+    align-items: stretch;
+    background: var(--shell-input-bg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius);
+    height: var(--shell-field-height-md);
+    transition: border-color var(--shell-motion-fast) var(--shell-ease-standard),
+                box-shadow var(--shell-motion-fast) var(--shell-ease-standard);
+  }
+  .sh3-field--sm .sh3-field__row { height: var(--shell-field-height-sm); }
+  .sh3-field__row:focus-within {
+    border-color: var(--shell-input-border-focus);
+    box-shadow: var(--shell-focus-ring);
+  }
+  .sh3-field--invalid .sh3-field__row {
+    border-color: var(--shell-error);
+  }
+  .sh3-field--invalid .sh3-field__row:focus-within {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-error) 40%, transparent);
+  }
+  .sh3-field__input {
+    flex: 1 1 auto;
+    height: 100%;
+    padding: 0 var(--shell-field-pad-x);
+    background: transparent;
+    border: none;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+  /* The .sh3-field__row owns the focus ring; suppress base.css's
+     global input:focus-visible box-shadow so it doesn't double up. */
+  .sh3-field__input:focus,
+  .sh3-field__input:focus-visible {
+    outline: none;
+    box-shadow: none;
+    border: none;
+  }
+  .sh3-field__input:disabled { color: var(--shell-fg-muted); cursor: not-allowed; }
+  .sh3-field__affix {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--shell-field-pad-x);
+    color: var(--shell-fg-muted);
+    flex-shrink: 0;
+  }
+  .sh3-field__affix:first-child { padding-right: 0; }
+  .sh3-field__affix:last-child { padding-left: 0; }
+  .sh3-field__helper {
+    color: var(--shell-fg-muted);
+    font-size: 0.75rem;
+  }
+  .sh3-field__helper--error { color: var(--shell-error); }
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value?: string;
+    type?: 'text' | 'email' | 'password' | 'search' | 'url' | 'tel';
+    label?: string;
+    placeholder?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    helper?: string;
+    error?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    required?: boolean;
+    autocomplete?: AutoFill;
+    onchange?: (next: string) => void;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/primitives/widgets/FilePicker.d.ts

@@ -0,0 +1,3 @@
+export type FilePickerValue = File | File[] | null;
+export declare function extractValue(files: FileList | null, multiple: boolean): FilePickerValue;
+export declare function displayName(value: FilePickerValue): string;

package/dist/primitives/widgets/FilePicker.js

@@ -0,0 +1,19 @@
+export function extractValue(files, multiple) {
+    if (!files || files.length === 0)
+        return multiple ? [] : null;
+    if (multiple)
+        return Array.from(files);
+    return files[0];
+}
+export function displayName(value) {
+    if (value === null)
+        return '';
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return '';
+        if (value.length === 1)
+            return value[0].name;
+        return `${value.length} files`;
+    }
+    return value.name;
+}