sh3-core 0.13.1 → 0.13.3

package/dist/primitives/widgets/Field.svelte.test.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Field from './Field.svelte';
+describe('Field event contract', () => {
+    it('fires oninput on every keystroke with current value', async () => {
+        const oninput = vi.fn();
+        const { container } = render(Field, { props: { value: '', oninput } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'h' } });
+        await fireEvent.input(input, { target: { value: 'he' } });
+        await fireEvent.input(input, { target: { value: 'hel' } });
+        expect(oninput).toHaveBeenCalledTimes(3);
+        expect(oninput).toHaveBeenNthCalledWith(1, 'h');
+        expect(oninput).toHaveBeenNthCalledWith(2, 'he');
+        expect(oninput).toHaveBeenNthCalledWith(3, 'hel');
+    });
+    it('fires onchange exactly once on blur with final value', async () => {
+        const onchange = vi.fn();
+        const { container } = render(Field, { props: { value: '', onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'hello' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith('hello');
+    });
+    it('renders error text and aria-invalid when invalid', () => {
+        const { container, getByText } = render(Field, {
+            props: { value: '', invalid: true, error: 'Required' },
+        });
+        expect(container.querySelector('input').getAttribute('aria-invalid')).toBe('true');
+        expect(getByText('Required')).toBeInTheDocument();
+    });
+});

package/dist/primitives/widgets/FilePicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
   import { extractValue, displayName, type FilePickerValue } from './FilePicker';
 
   let {
@@ -18,8 +19,7 @@
     invalid?: boolean;
     size?: 'sm' | 'md';
     buttonLabel?: string;
-    onchange?: (next: FilePickerValue) => void;
-  } = $props();
+  } & CommitOnlyEvents<FilePickerValue> = $props();
 
   function onPick(e: Event) {
     const target = e.currentTarget as HTMLInputElement;

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

@@ -1,3 +1,4 @@
+import type { CommitOnlyEvents } from './_contract';
 import { type FilePickerValue } from './FilePicker';
 type $$ComponentProps = {
     value?: FilePickerValue;
@@ -7,8 +8,7 @@ type $$ComponentProps = {
     invalid?: boolean;
     size?: 'sm' | 'md';
     buttonLabel?: string;
-    onchange?: (next: FilePickerValue) => void;
-};
+} & CommitOnlyEvents<FilePickerValue>;
 declare const FilePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
 type FilePicker = ReturnType<typeof FilePicker>;
 export default FilePicker;

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

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

package/dist/primitives/widgets/FilePicker.svelte.test.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import FilePicker from './FilePicker.svelte';
+function makeFile(name) {
+    return new File(['x'], name, { type: 'text/plain' });
+}
+describe('FilePicker event contract', () => {
+    it('fires onchange with single File when picked', async () => {
+        const onchange = vi.fn();
+        const { container } = render(FilePicker, { props: { onchange } });
+        const native = container.querySelector('input[type=file]');
+        const file = makeFile('hello.txt');
+        Object.defineProperty(native, 'files', { value: [file] });
+        await fireEvent.change(native);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange.mock.calls[0][0]).toBeInstanceOf(File);
+        expect(onchange.mock.calls[0][0].name).toBe('hello.txt');
+    });
+    it('fires onchange with File[] when multiple', async () => {
+        const onchange = vi.fn();
+        const { container } = render(FilePicker, { props: { multiple: true, onchange } });
+        const native = container.querySelector('input[type=file]');
+        const files = [makeFile('a.txt'), makeFile('b.txt')];
+        Object.defineProperty(native, 'files', { value: files });
+        await fireEvent.change(native);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        const next = onchange.mock.calls[0][0];
+        expect(Array.isArray(next)).toBe(true);
+        expect(next.map((f) => f.name)).toEqual(['a.txt', 'b.txt']);
+    });
+});

package/dist/primitives/widgets/IconPicker.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  /*
+   * IconPicker — searchable grid of icon ids from the bundled lucide
+   * sprite. The "(none)" tile clears the value. Composes the widget
+   * commit-only event contract (CommitOnlyEvents<string | undefined>).
+   */
+
+  import type { CommitOnlyEvents } from './_contract';
+  import { ICON_IDS } from '../../assets/iconIds.generated';
+  import iconsUrl from '../../assets/icons.svg';
+
+  type Props = {
+    value?: string | undefined;
+    label?: string;
+    disabled?: boolean;
+  } & CommitOnlyEvents<string | undefined>;
+
+  let {
+    value = $bindable(undefined),
+    label,
+    disabled = false,
+    onchange,
+  }: Props = $props();
+
+  let query = $state('');
+
+  const filtered = $derived(
+    query.trim() === ''
+      ? ICON_IDS
+      : ICON_IDS.filter((id) => id.includes(query.trim().toLowerCase())),
+  );
+
+  function pick(id: string | undefined): void {
+    if (disabled) return;
+    value = id;
+    onchange?.(id);
+  }
+</script>
+
+<div class="sh3-icon-picker" class:sh3-icon-picker--disabled={disabled}>
+  {#if label}<span class="sh3-icon-picker__label">{label}</span>{/if}
+  <input
+    type="search"
+    placeholder="Search icons…"
+    bind:value={query}
+    {disabled}
+    aria-label="Filter icons"
+  />
+  <div class="sh3-icon-picker__grid">
+    <button
+      type="button"
+      class="sh3-icon-picker__tile sh3-icon-picker__tile--none"
+      class:sh3-icon-picker__tile--selected={value === undefined}
+      aria-label="No icon"
+      {disabled}
+      onclick={() => pick(undefined)}
+    >×</button>
+    {#each filtered as id (id)}
+      <button
+        type="button"
+        class="sh3-icon-picker__tile"
+        class:sh3-icon-picker__tile--selected={value === id}
+        aria-label={id}
+        title={id}
+        {disabled}
+        onclick={() => pick(id)}
+      >
+        <svg viewBox="0 0 24 24"><use href="{iconsUrl}#{id}" /></svg>
+      </button>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .sh3-icon-picker { display: flex; flex-direction: column; gap: 6px; }
+  .sh3-icon-picker__label { font-size: 13px; color: var(--shell-fg-muted); }
+  .sh3-icon-picker input[type="search"] {
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px 8px; font: inherit; font-size: 13px;
+  }
+  .sh3-icon-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+    gap: 4px;
+    max-height: 220px;
+    overflow-y: auto;
+    padding: 4px;
+    background: var(--shell-bg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .sh3-icon-picker__tile {
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid transparent;
+    border-radius: var(--shell-radius-sm, 3px);
+    cursor: pointer;
+    padding: 0; font: inherit;
+  }
+  .sh3-icon-picker__tile--none { font-size: 16px; color: var(--shell-fg-muted); }
+  .sh3-icon-picker__tile:hover { border-color: var(--shell-accent); }
+  .sh3-icon-picker__tile--selected {
+    outline: 2px solid var(--shell-accent);
+    outline-offset: -2px;
+  }
+  .sh3-icon-picker__tile svg { width: 18px; height: 18px; }
+  .sh3-icon-picker--disabled .sh3-icon-picker__tile { cursor: not-allowed; opacity: 0.5; }
+</style>

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

@@ -0,0 +1,9 @@
+import type { CommitOnlyEvents } from './_contract';
+type Props = {
+    value?: string | undefined;
+    label?: string;
+    disabled?: boolean;
+} & CommitOnlyEvents<string | undefined>;
+declare const IconPicker: import("svelte").Component<Props, {}, "value">;
+type IconPicker = ReturnType<typeof IconPicker>;
+export default IconPicker;

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

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

package/dist/primitives/widgets/IconPicker.svelte.test.js

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import IconPicker from './IconPicker.svelte';
+describe('IconPicker', () => {
+    it('renders the (none) tile and at least one icon tile', () => {
+        const { container } = render(IconPicker, { props: {} });
+        const tiles = container.querySelectorAll('.sh3-icon-picker__tile');
+        expect(tiles.length).toBeGreaterThan(1);
+        expect(tiles[0].getAttribute('aria-label')).toBe('No icon');
+    });
+    it('filters tiles by search input', async () => {
+        const { container } = render(IconPicker, { props: {} });
+        const search = container.querySelector('input[type="search"]');
+        await fireEvent.input(search, { target: { value: 'house' } });
+        const visible = container.querySelectorAll('.sh3-icon-picker__tile:not([hidden])');
+        expect(visible.length).toBeGreaterThan(0);
+        expect(visible.length).toBeLessThan(20);
+    });
+    it('calls onchange with the clicked icon id', async () => {
+        let lastValue = '__sentinel__';
+        const { container } = render(IconPicker, {
+            props: {
+                onchange: (v) => { lastValue = v; },
+            },
+        });
+        const tiles = Array.from(container.querySelectorAll('.sh3-icon-picker__tile'));
+        await fireEvent.click(tiles[1]);
+        expect(lastValue).toEqual(expect.any(String));
+        expect(lastValue).not.toBe('__sentinel__');
+    });
+    it('calls onchange with undefined when (none) tile is clicked', async () => {
+        let lastValue = 'house';
+        const { container } = render(IconPicker, {
+            props: {
+                value: 'house',
+                onchange: (v) => { lastValue = v; },
+            },
+        });
+        const noneTile = container.querySelector('.sh3-icon-picker__tile');
+        await fireEvent.click(noneTile);
+        expect(lastValue).toBeUndefined();
+    });
+});

package/dist/primitives/widgets/IconToggleGroup.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { CommitOnlyEvents } from './_contract';
   import { toggleSingle, toggleMultiple } from './IconToggleGroup';
 
   type Option = { value: string; icon: Snippet; tooltip?: string };
 
   let {
     options,
-    value = $bindable(),
     multiple = false,
+    value = $bindable<string | string[]>(multiple ? [] : (options[0]?.value ?? '')),
     disabled = false,
     size = 'md',
     onchange,
   }: {
     options: Option[];
-    value: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     disabled?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: string | string[]) => void;
-  } = $props();
+  } & CommitOnlyEvents<string | string[]> = $props();
 
   function isActive(v: string): boolean {
     if (multiple && Array.isArray(value)) return value.includes(v);

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { CommitOnlyEvents } from './_contract';
 type Option = {
     value: string;
     icon: Snippet;
@@ -6,12 +7,11 @@ type Option = {
 };
 type $$ComponentProps = {
     options: Option[];
-    value: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     disabled?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: string | string[]) => void;
-};
+} & CommitOnlyEvents<string | string[]>;
 declare const IconToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
 type IconToggleGroup = ReturnType<typeof IconToggleGroup>;
 export default IconToggleGroup;

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

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

package/dist/primitives/widgets/IconToggleGroup.svelte.test.js

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import IconToggleGroup from './IconToggleGroup.svelte';
+const blank = createRawSnippet(() => ({ render: () => '<span/>' }));
+const options = [
+    { value: 'b', icon: blank, tooltip: 'Bold' },
+    { value: 'i', icon: blank, tooltip: 'Italic' },
+    { value: 'u', icon: blank, tooltip: 'Under' },
+];
+describe('IconToggleGroup event contract', () => {
+    it('fires onchange on click in single mode', async () => {
+        const onchange = vi.fn();
+        const { getByLabelText } = render(IconToggleGroup, {
+            props: { options, value: 'b', onchange },
+        });
+        await fireEvent.click(getByLabelText('Italic'));
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith('i');
+    });
+    it('defaults to first option in single mode', () => {
+        const { getByLabelText } = render(IconToggleGroup, { props: { options } });
+        const bold = getByLabelText('Bold');
+        expect(bold.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('defaults to empty array in multi mode', () => {
+        const { getByLabelText } = render(IconToggleGroup, { props: { options, multiple: true } });
+        expect(getByLabelText('Bold').getAttribute('aria-pressed')).toBe('false');
+        expect(getByLabelText('Italic').getAttribute('aria-pressed')).toBe('false');
+    });
+    it('toggles individual items in multi mode', async () => {
+        const onchange = vi.fn();
+        const { getByLabelText } = render(IconToggleGroup, {
+            props: { options, multiple: true, onchange },
+        });
+        await fireEvent.click(getByLabelText('Bold'));
+        await fireEvent.click(getByLabelText('Italic'));
+        expect(onchange).toHaveBeenLastCalledWith(['b', 'i']);
+    });
+});

package/dist/primitives/widgets/NumberInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { clamp, applyStep, formatNumber } from './NumberInput';
+  import type { LiveInputEvents } from './_contract';
+  import { clamp, applyStep } from './NumberInput';
 
   let {
     value = $bindable(0),
@@ -14,6 +15,7 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    oninput,
     onchange,
   }: {
     value?: number;
@@ -27,18 +29,18 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: number) => void;
-  } = $props();
-
-  const display = $derived(formatNumber(value, precision));
+  } & LiveInputEvents<number> = $props();
 
   function commit(next: number) {
     if (Number.isNaN(next)) return;
-    value = clamp(applyStep(next, { min, step }), min, max);
+    let v = clamp(applyStep(next, { min, step }), min, max);
+    if (precision !== undefined) v = Number(v.toFixed(precision));
+    value = v;
   }
 
   function bump(direction: 1 | -1) {
     commit(value + direction * step);
+    oninput?.(value);
   }
 
   let holdTimer: ReturnType<typeof setTimeout> | null = null;
@@ -82,9 +84,17 @@
       {step}
       {disabled}
       aria-invalid={invalid || undefined}
-      value={display}
-      oninput={(e) => commit(parseFloat((e.currentTarget as HTMLInputElement).value))}
-      onblur={() => onchange?.(value)}
+      value={value}
+      oninput={(e) => {
+        const raw = (e.currentTarget as HTMLInputElement).valueAsNumber;
+        if (Number.isNaN(raw)) return;
+        value = raw;
+        oninput?.(raw);
+      }}
+      onblur={() => {
+        commit(value);
+        onchange?.(value);
+      }}
     />
     {#if suffix}<span class="sh3-num__affix">{@render suffix()}</span>{/if}
     <span class="sh3-num__steppers">

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { LiveInputEvents } from './_contract';
 type $$ComponentProps = {
     value?: number;
     min?: number;
@@ -11,8 +12,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: number) => void;
-};
+} & LiveInputEvents<number>;
 declare const NumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NumberInput = ReturnType<typeof NumberInput>;
 export default NumberInput;

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

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

package/dist/primitives/widgets/NumberInput.svelte.test.js

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import NumberInput from './NumberInput.svelte';
+describe('NumberInput event contract', () => {
+    it('does not snap mid-typing when step=1', async () => {
+        const oninput = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, step: 1, oninput } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '5' } });
+        await fireEvent.input(input, { target: { value: '5.5' } });
+        expect(oninput).toHaveBeenCalledTimes(2);
+        expect(oninput).toHaveBeenNthCalledWith(1, 5);
+        expect(oninput).toHaveBeenNthCalledWith(2, 5.5);
+    });
+    it('swallows partial parses (NaN does not call oninput)', async () => {
+        const oninput = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 1, oninput } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '' } });
+        expect(oninput).not.toHaveBeenCalled();
+    });
+    it('commits applyStep on blur and fires onchange once', async () => {
+        const onchange = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, step: 1, onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '5.5' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith(6);
+    });
+    it('clamps to max on blur', async () => {
+        const onchange = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, max: 10, onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '999' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledWith(10);
+    });
+    it('rounds to precision on blur', async () => {
+        const onchange = vi.fn();
+        const { container } = render(NumberInput, { props: { value: 0, step: 0.01, precision: 2, onchange } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: '1.23456' } });
+        await fireEvent.blur(input);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange.mock.calls[0][0]).toBeCloseTo(1.23, 5);
+    });
+});

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

@@ -0,0 +1,24 @@
+export interface PickerItem {
+    id: string;
+    label: string;
+    /** Optional secondary line shown beneath the label in muted style. */
+    sublabel?: string;
+}
+export interface PickerListProps {
+    items: PickerItem[];
+    value: string[];
+    onchange?: (next: string[]) => void;
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    /** Empty-state message when items.length === 0 and not loading/error. */
+    emptyText?: string;
+    /** Search input is rendered when items.length >= this value. Default: 8. */
+    searchThreshold?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+}
+/** Case-insensitive substring match over label, id, and sublabel. */
+export declare function filterItems(items: PickerItem[], query: string): PickerItem[];
+/** Toggle the given id in or out of value, returning a NEW array. */
+export declare function toggle(value: string[], id: string): string[];

package/dist/primitives/widgets/PickerList.js

@@ -0,0 +1,21 @@
+/** Case-insensitive substring match over label, id, and sublabel. */
+export function filterItems(items, query) {
+    if (!query)
+        return items;
+    const q = query.toLowerCase();
+    return items.filter((it) => {
+        if (it.label.toLowerCase().includes(q))
+            return true;
+        if (it.id.toLowerCase().includes(q))
+            return true;
+        if (it.sublabel && it.sublabel.toLowerCase().includes(q))
+            return true;
+        return false;
+    });
+}
+/** Toggle the given id in or out of value, returning a NEW array. */
+export function toggle(value, id) {
+    if (value.includes(id))
+        return value.filter((v) => v !== id);
+    return [...value, id];
+}