sh3-core 0.13.1 → 0.13.3

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 {};

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

@@ -0,0 +1,218 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, tick } from 'svelte';
+import PickerList from './PickerList.svelte';
+import { filterItems, toggle } from './PickerList';
+let host;
+let cmp = null;
+beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+});
+afterEach(() => {
+    if (cmp) {
+        unmount(cmp);
+        cmp = null;
+    }
+    host.remove();
+});
+describe('filterItems', () => {
+    const items = [
+        { id: 'notes', label: 'Notes', sublabel: 'note-taking' },
+        { id: 'files', label: 'Files' },
+        { id: 'tasks', label: 'Task Manager' },
+    ];
+    it('returns everything when query is empty', () => {
+        expect(filterItems(items, '')).toEqual(items);
+    });
+    it('matches by label case-insensitively', () => {
+        expect(filterItems(items, 'note').map((i) => i.id)).toEqual(['notes']);
+        expect(filterItems(items, 'TASK').map((i) => i.id)).toEqual(['tasks']);
+    });
+    it('matches by id', () => {
+        expect(filterItems(items, 'fil').map((i) => i.id)).toEqual(['files']);
+    });
+    it('matches by sublabel', () => {
+        expect(filterItems(items, 'taking').map((i) => i.id)).toEqual(['notes']);
+    });
+    it('returns empty when nothing matches', () => {
+        expect(filterItems(items, 'zzz')).toEqual([]);
+    });
+});
+describe('toggle', () => {
+    it('adds an id when missing', () => {
+        expect(toggle(['a'], 'b')).toEqual(['a', 'b']);
+    });
+    it('removes an id when present', () => {
+        expect(toggle(['a', 'b'], 'a')).toEqual(['b']);
+    });
+    it('returns a new array (does not mutate)', () => {
+        const v = ['a'];
+        const next = toggle(v, 'b');
+        expect(v).toEqual(['a']);
+        expect(next).not.toBe(v);
+    });
+});
+describe('PickerList — rendering', () => {
+    function makeItems(n) {
+        return Array.from({ length: n }, (_, i) => ({ id: `id-${i}`, label: `Item ${i}` }));
+    }
+    it('renders one checkbox row per item', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(3), value: [] },
+        });
+        await tick();
+        const rows = host.querySelectorAll('.sh3-picker__row');
+        expect(rows.length).toBe(3);
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        expect(checks.length).toBe(3);
+        expect(Array.from(checks).every((c) => !c.checked)).toBe(true);
+    });
+    it('reflects value as checked rows', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(3), value: ['id-1'] },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        expect(checks[0].checked).toBe(false);
+        expect(checks[1].checked).toBe(true);
+        expect(checks[2].checked).toBe(false);
+    });
+    it('hides the search input when items.length < threshold (default 8)', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(7), value: [] },
+        });
+        await tick();
+        expect(host.querySelector('.sh3-picker__search')).toBeNull();
+    });
+    it('shows the search input when items.length >= threshold', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(8), value: [] },
+        });
+        await tick();
+        expect(host.querySelector('.sh3-picker__search')).not.toBeNull();
+    });
+    it('shows "Loading…" and hides the list when loading=true', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(2), value: [], loading: true },
+        });
+        await tick();
+        expect(host.textContent).toContain('Loading');
+        expect(host.querySelectorAll('.sh3-picker__row').length).toBe(0);
+    });
+    it('shows the error message and a Retry button when error is set', async () => {
+        let retried = false;
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: [],
+                value: [],
+                error: 'boom',
+                onRetry: () => { retried = true; },
+            },
+        });
+        await tick();
+        expect(host.textContent).toContain('boom');
+        const retryBtn = host.querySelector('.sh3-picker__retry');
+        expect(retryBtn).not.toBeNull();
+        retryBtn.click();
+        expect(retried).toBe(true);
+    });
+    it('shows emptyText when items is empty and not loading/erroring', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: [], value: [], emptyText: 'No widgets.' },
+        });
+        await tick();
+        expect(host.textContent).toContain('No widgets.');
+    });
+    it('shows the selected count in the footer', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: { items: makeItems(4), value: ['id-0', 'id-2'] },
+        });
+        await tick();
+        expect(host.textContent).toMatch(/2 of 4 selected/);
+    });
+});
+describe('PickerList — interaction', () => {
+    function makeItems(n) {
+        return Array.from({ length: n }, (_, i) => ({ id: `id-${i}`, label: `Item ${i}` }));
+    }
+    it('clicking a row fires onchange with the new array', async () => {
+        let received = null;
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: makeItems(3),
+                value: [],
+                onchange: (next) => { received = next; },
+            },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        checks[1].click();
+        await tick();
+        expect(received).toEqual(['id-1']);
+    });
+    it('toggling an already-selected row removes it', async () => {
+        let received = null;
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: makeItems(3),
+                value: ['id-1'],
+                onchange: (next) => { received = next; },
+            },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        checks[1].click();
+        await tick();
+        expect(received).toEqual([]);
+    });
+    it('disabled blocks input', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: makeItems(2),
+                value: [],
+                disabled: true,
+            },
+        });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        expect(checks[0].disabled).toBe(true);
+    });
+    it('typing in the search input filters the rendered rows but keeps value', async () => {
+        cmp = mount(PickerList, {
+            target: host,
+            props: {
+                items: [
+                    { id: 'notes', label: 'Notes' },
+                    { id: 'files', label: 'Files' },
+                    { id: 'tasks', label: 'Tasks' },
+                    { id: 'photos', label: 'Photos' },
+                    { id: 'mail', label: 'Mail' },
+                    { id: 'maps', label: 'Maps' },
+                    { id: 'calc', label: 'Calculator' },
+                    { id: 'paint', label: 'Paint' },
+                ],
+                value: ['mail'],
+            },
+        });
+        await tick();
+        const search = host.querySelector('.sh3-picker__search');
+        expect(search).not.toBeNull();
+        search.value = 'note';
+        search.dispatchEvent(new Event('input', { bubbles: true }));
+        await tick();
+        const rows = host.querySelectorAll('.sh3-picker__row');
+        expect(rows.length).toBe(1);
+        expect(rows[0].textContent).toContain('Notes');
+    });
+});

package/dist/primitives/widgets/RangeSlider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { LiveInputEvents } from './_contract';
   import { valueToPercent } from './Slider';
   import { constrainPair, type Pair } from './RangeSlider';
 
@@ -10,6 +11,7 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    oninput,
     onchange,
   }: {
     value?: Pair;
@@ -19,14 +21,19 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: Pair) => void;
-  } = $props();
+  } & LiveInputEvents<Pair> = $props();
 
   const lowPct = $derived(valueToPercent(value[0], min, max));
   const highPct = $derived(valueToPercent(value[1], min, max));
 
-  function setLow(n: number) { value = constrainPair(value, 'low', n); }
-  function setHigh(n: number) { value = constrainPair(value, 'high', n); }
+  function setLow(n: number) {
+    value = constrainPair(value, 'low', n);
+    oninput?.(value);
+  }
+  function setHigh(n: number) {
+    value = constrainPair(value, 'high', n);
+    oninput?.(value);
+  }
 </script>
 
 <div class="sh3-range" class:sh3-range--sm={size === 'sm'} class:sh3-range--invalid={invalid}>

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import RangeSlider from './RangeSlider.svelte';
+describe('RangeSlider event contract', () => {
+    it('fires oninput per thumb with constrained pair', async () => {
+        const oninput = vi.fn();
+        const { container } = render(RangeSlider, {
+            props: { value: [10, 90], min: 0, max: 100, oninput },
+        });
+        const lows = container.querySelectorAll('input[type=range]');
+        const low = lows[0];
+        await fireEvent.input(low, { target: { value: '20' } });
+        expect(oninput).toHaveBeenCalledTimes(1);
+        const lastCall = oninput.mock.calls[oninput.mock.calls.length - 1][0];
+        expect(lastCall).toEqual([20, 90]);
+    });
+    it('fires onchange per thumb on change event', async () => {
+        const onchange = vi.fn();
+        const { container } = render(RangeSlider, {
+            props: { value: [10, 90], min: 0, max: 100, onchange },
+        });
+        const high = container.querySelectorAll('input[type=range]')[1];
+        await fireEvent.input(high, { target: { value: '80' } });
+        await fireEvent.change(high, { target: { value: '80' } });
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange.mock.calls[0][0]).toEqual([10, 80]);
+    });
+    it('thumbs cannot cross', async () => {
+        const oninput = vi.fn();
+        const { container } = render(RangeSlider, {
+            props: { value: [10, 90], min: 0, max: 100, oninput },
+        });
+        const low = container.querySelectorAll('input[type=range]')[0];
+        await fireEvent.input(low, { target: { value: '99' } });
+        const lastCall = oninput.mock.calls[oninput.mock.calls.length - 1][0];
+        expect(lastCall[0]).toBeLessThanOrEqual(lastCall[1]);
+    });
+});

package/dist/primitives/widgets/Segmented.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
   import { type SegmentedOption, nextValue, prevValue, firstValue, lastValue } from './Segmented';
 
   let {
     options,
-    value = $bindable(),
+    value = $bindable(options[0]?.value ?? ''),
     size = 'md',
     disabled = false,
     onchange,
   }: {
     options: SegmentedOption[];
-    value: string;
+    value?: string;
     size?: 'sm' | 'md';
     disabled?: boolean;
-    onchange?: (next: string) => void;
-  } = $props();
+  } & CommitOnlyEvents<string> = $props();
 
   function commit(next: string) {
     value = next;

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Segmented from './Segmented.svelte';
+describe('Segmented event contract', () => {
+    const options = [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+        { value: 'c', label: 'C' },
+    ];
+    it('fires onchange once on click', async () => {
+        const onchange = vi.fn();
+        const { getByText } = render(Segmented, { props: { options, value: 'a', onchange } });
+        await fireEvent.click(getByText('B'));
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith('b');
+    });
+    it('defaults value to first option when not passed', () => {
+        const { container } = render(Segmented, { props: { options } });
+        const active = container.querySelector('.sh3-seg__btn--active');
+        expect(active === null || active === void 0 ? void 0 : active.textContent).toBe('A');
+    });
+    it('does not throw props_invalid_value when bound to an undefined source', () => {
+        expect(() => render(Segmented, { props: { options, value: undefined } })).not.toThrow();
+    });
+});

package/dist/primitives/widgets/Select.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { tick } from 'svelte';
+  import type { CommitOnlyEvents } from './_contract';
   import { shell } from '../../shellRuntime.svelte';
   import Listbox from './_select-listbox.svelte';
   import { type SelectOption, resolveValueLabel, toggleMulti } from './Select';
 
   let {
     options,
-    value = $bindable<string | string[]>(''),
     multiple = false,
+    value = $bindable<string | string[]>(multiple ? [] : ''),
     placeholder = 'Select…',
     label,
     disabled = false,
@@ -16,15 +17,14 @@
     onchange,
   }: {
     options: SelectOption[];
-    value?: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     placeholder?: string;
     label?: string;
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: string | string[]) => void;
-  } = $props();
+  } & CommitOnlyEvents<string | string[]> = $props();
 
   let trigger = $state<HTMLButtonElement | undefined>(undefined);
   let nativeRef = $state<HTMLSelectElement | undefined>(undefined);

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

@@ -1,15 +1,15 @@
+import type { CommitOnlyEvents } from './_contract';
 import { type SelectOption } from './Select';
 type $$ComponentProps = {
     options: SelectOption[];
-    value?: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     placeholder?: string;
     label?: string;
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: string | string[]) => void;
-};
+} & CommitOnlyEvents<string | string[]>;
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

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