sh3-core 0.13.0 → 0.13.2

package/dist/primitives/widgets/IconToggleGroup.svelte

@@ -1,22 +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';
-  } = $props();
+  } & CommitOnlyEvents<string | string[]> = $props();
 
   function isActive(v: string): boolean {
     if (multiple && Array.isArray(value)) return value.includes(v);
@@ -31,6 +33,7 @@
     } else {
       value = toggleSingle(typeof value === 'string' ? value : '', v);
     }
+    onchange?.(value);
   }
 </script>
 

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,11 +7,11 @@ type Option = {
 };
 type $$ComponentProps = {
     options: Option[];
-    value: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     disabled?: boolean;
     size?: 'sm' | 'md';
-};
+} & 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,8 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    oninput,
+    onchange,
   }: {
     value?: number;
     min?: number;
@@ -26,23 +29,26 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-  } = $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;
   let holdInterval: ReturnType<typeof setInterval> | null = null;
+  let bumping = false;
   function startHold(direction: 1 | -1) {
     if (disabled) return;
+    bumping = true;
     bump(direction);
     holdTimer = setTimeout(() => {
       let elapsed = 0;
@@ -59,6 +65,10 @@
   function stopHold() {
     if (holdTimer) { clearTimeout(holdTimer); holdTimer = null; }
     if (holdInterval) { clearInterval(holdInterval); holdInterval = null; }
+    if (bumping) {
+      bumping = false;
+      onchange?.(value);
+    }
   }
 </script>
 
@@ -74,8 +84,17 @@
       {step}
       {disabled}
       aria-invalid={invalid || undefined}
-      value={display}
-      oninput={(e) => commit(parseFloat((e.currentTarget as HTMLInputElement).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,7 +12,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-};
+} & 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];
+}

package/dist/primitives/widgets/PickerList.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import { filterItems, toggle, type PickerItem } from './PickerList';
+
+  let {
+    items,
+    value = $bindable<string[]>([]),
+    loading = false,
+    error = null,
+    onRetry,
+    emptyText = 'No items.',
+    searchThreshold = 8,
+    disabled = false,
+    size = 'md',
+    onchange,
+  }: {
+    items: PickerItem[];
+    value?: string[];
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    emptyText?: string;
+    searchThreshold?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+  } & CommitOnlyEvents<string[]> = $props();
+
+  let query = $state('');
+  const showSearch = $derived(items.length >= searchThreshold);
+  const filtered = $derived(filterItems(items, query));
+  const totalCount = $derived(items.length);
+  const selectedCount = $derived(value.length);
+
+  function toggleId(id: string) {
+    if (disabled) return;
+    const next = toggle(value, id);
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class="sh3-picker" class:sh3-picker--sm={size === 'sm'} class:sh3-picker--disabled={disabled}>
+  {#if showSearch}
+    <input
+      type="search"
+      class="sh3-picker__search"
+      placeholder="Filter…"
+      bind:value={query}
+      {disabled}
+    />
+  {/if}
+
+  <div class="sh3-picker__list">
+    {#if loading}
+      <p class="sh3-picker__status">Loading…</p>
+    {:else if error}
+      <p class="sh3-picker__status sh3-picker__status--error">{error}</p>
+      {#if onRetry}
+        <button type="button" class="sh3-picker__retry" onclick={() => onRetry?.()}>Retry</button>
+      {/if}
+    {:else if items.length === 0}
+      <p class="sh3-picker__status">{emptyText}</p>
+    {:else}
+      {#each filtered as item (item.id)}
+        <label class="sh3-picker__row">
+          <input
+            type="checkbox"
+            checked={value.includes(item.id)}
+            {disabled}
+            onchange={() => toggleId(item.id)}
+          />
+          <span class="sh3-picker__row-text">
+            <span class="sh3-picker__row-label">{item.label}</span>
+            {#if item.sublabel}
+              <span class="sh3-picker__row-sub">{item.sublabel}</span>
+            {/if}
+          </span>
+        </label>
+      {/each}
+    {/if}
+  </div>
+
+  <p class="sh3-picker__footer">{selectedCount} of {totalCount} selected</p>
+</div>
+
+<style>
+  .sh3-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px;
+    background: var(--shell-bg-elevated);
+  }
+  .sh3-picker__search {
+    width: 100%;
+    padding: 4px 6px;
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    background: var(--shell-bg);
+    color: var(--shell-fg);
+    font: inherit;
+    font-size: 12px;
+  }
+  .sh3-picker__list {
+    display: flex;
+    flex-direction: column;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .sh3-picker__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 6px;
+    cursor: pointer;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .sh3-picker__row:hover { background: var(--shell-bg); }
+  .sh3-picker__row-text { display: flex; flex-direction: column; gap: 0; }
+  .sh3-picker__row-label { font-size: 13px; }
+  .sh3-picker__row-sub { font-size: 11px; color: var(--shell-fg-muted); }
+  .sh3-picker__status {
+    margin: 0;
+    padding: 8px 6px;
+    color: var(--shell-fg-muted);
+    font-size: 12px;
+  }
+  .sh3-picker__status--error { color: var(--shell-error, #c33); }
+  .sh3-picker__retry {
+    align-self: flex-start;
+    margin: 0 6px 8px;
+    background: var(--shell-bg);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 2px 8px;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .sh3-picker__footer {
+    margin: 0;
+    font-size: 11px;
+    color: var(--shell-fg-muted);
+    text-align: right;
+  }
+  .sh3-picker--disabled .sh3-picker__row { cursor: not-allowed; opacity: 0.6; }
+</style>

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

@@ -0,0 +1,16 @@
+import type { CommitOnlyEvents } from './_contract';
+import { type PickerItem } from './PickerList';
+type $$ComponentProps = {
+    items: PickerItem[];
+    value?: string[];
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    emptyText?: string;
+    searchThreshold?: number;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+} & CommitOnlyEvents<string[]>;
+declare const PickerList: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PickerList = ReturnType<typeof PickerList>;
+export default PickerList;

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

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

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

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import PickerList from './PickerList.svelte';
+const items = [
+    { id: '1', label: 'One' },
+    { id: '2', label: 'Two' },
+    { id: '3', label: 'Three' },
+];
+describe('PickerList event contract', () => {
+    it('fires onchange with updated array when row toggled', async () => {
+        const onchange = vi.fn();
+        const { container } = render(PickerList, { props: { items, value: [], onchange } });
+        const checkboxes = container.querySelectorAll('input[type=checkbox]');
+        await fireEvent.click(checkboxes[1]);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith(['2']);
+    });
+    it('renders loading state', () => {
+        const { getByText } = render(PickerList, { props: { items: [], loading: true } });
+        expect(getByText('Loading…')).toBeInTheDocument();
+    });
+    it('renders error state with retry button when provided', async () => {
+        const onRetry = vi.fn();
+        const { getByText } = render(PickerList, {
+            props: { items: [], error: 'Boom', onRetry },
+        });
+        expect(getByText('Boom')).toBeInTheDocument();
+        await fireEvent.click(getByText('Retry'));
+        expect(onRetry).toHaveBeenCalled();
+    });
+});

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

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