sh3-core 0.13.0 → 0.13.2

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,8 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    oninput,
+    onchange,
   }: {
     value?: Pair;
     min?: number;
@@ -18,13 +21,19 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-  } = $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}>
@@ -36,11 +45,13 @@
   <input type="range" class="sh3-range__native sh3-range__native--low"
          {min} {max} {step} {disabled}
          value={value[0]}
-         oninput={(e) => setLow(parseFloat((e.currentTarget as HTMLInputElement).value))} />
+         oninput={(e) => setLow(parseFloat((e.currentTarget as HTMLInputElement).value))}
+         onchange={() => onchange?.(value)} />
   <input type="range" class="sh3-range__native sh3-range__native--high"
          {min} {max} {step} {disabled}
          value={value[1]}
-         oninput={(e) => setHigh(parseFloat((e.currentTarget as HTMLInputElement).value))} />
+         oninput={(e) => setHigh(parseFloat((e.currentTarget as HTMLInputElement).value))}
+         onchange={() => onchange?.(value)} />
 </div>
 
 <style>

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,7 +8,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-};
+} & 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,17 +1,24 @@
 <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;
-  } = $props();
+  } & CommitOnlyEvents<string> = $props();
+
+  function commit(next: string) {
+    value = next;
+    onchange?.(next);
+  }
 
   function onKey(e: KeyboardEvent) {
     if (disabled) return;
@@ -24,7 +31,7 @@
       default: return;
     }
     e.preventDefault();
-    if (next !== undefined) value = next;
+    if (next !== undefined) commit(next);
   }
 </script>
 
@@ -37,7 +44,7 @@
       tabindex={value === opt.value ? 0 : -1}
       disabled={disabled || opt.disabled}
       class:sh3-seg__btn--active={value === opt.value}
-      onclick={() => { if (!opt.disabled && !disabled) value = opt.value; }}
+      onclick={() => { if (!opt.disabled && !disabled) commit(opt.value); }}
     >{opt.label}</button>
   {/each}
 </div>

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

@@ -1,10 +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;
-};
+} & 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,28 +1,30 @@
 <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,
     invalid = false,
     size = 'md',
+    onchange,
   }: {
     options: SelectOption[];
-    value?: string | string[];
     multiple?: boolean;
+    value?: string | string[];
     placeholder?: string;
     label?: string;
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
-  } = $props();
+  } & CommitOnlyEvents<string | string[]> = $props();
 
   let trigger = $state<HTMLButtonElement | undefined>(undefined);
   let nativeRef = $state<HTMLSelectElement | undefined>(undefined);
@@ -54,6 +56,7 @@
           } else {
             value = v;
           }
+          onchange?.(value);
         },
         // Listbox calls this on its own close paths (selection in
         // single mode, Escape inside the listbox). Outside-click and
@@ -90,6 +93,7 @@
     } else {
       value = nativeRef.value;
     }
+    onchange?.(value);
   }
 </script>
 

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

@@ -1,14 +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';
-};
+} & 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 {};

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

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Select from './Select.svelte';
+vi.mock('../../shellRuntime.svelte', () => ({
+    shell: { popup: { show: () => ({ close: () => { } }) } },
+}));
+describe('Select event contract', () => {
+    const options = [
+        { value: 'a', label: 'Apple' },
+        { value: 'b', label: 'Banana' },
+        { value: 'c', label: 'Cherry' },
+    ];
+    it('fires onchange via native select in single mode', async () => {
+        const onchange = vi.fn();
+        const { container } = render(Select, { props: { options, value: 'a', onchange } });
+        const native = container.querySelector('select');
+        native.value = 'c';
+        await fireEvent.change(native);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith('c');
+    });
+    it('defaults to empty array in multi mode', () => {
+        const { container } = render(Select, { props: { options, multiple: true } });
+        const native = container.querySelector('select');
+        // No <option> should carry a `selected` attribute when value defaults to [].
+        // (happy-dom may surface a selectedOptions item for the first option in a
+        // multi-select that has no explicit selection — assert the attribute the
+        // template controls instead.)
+        const optionsEls = Array.from(native.querySelectorAll('option'));
+        expect(optionsEls.every((o) => !o.hasAttribute('selected'))).toBe(true);
+    });
+    it('defaults to empty string in single mode', () => {
+        const { container } = render(Select, { props: { options } });
+        const trigger = container.querySelector('.sh3-select__display');
+        expect(trigger === null || trigger === void 0 ? void 0 : trigger.classList.contains('sh3-select__display--placeholder')).toBe(true);
+    });
+});

package/dist/primitives/widgets/Slider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { LiveInputEvents } from './_contract';
   import { valueToPercent } from './Slider';
 
   let {
@@ -12,6 +13,8 @@
     invalid = false,
     size = 'md',
     orientation = 'horizontal',
+    oninput,
+    onchange,
   }: {
     value?: number;
     min?: number;
@@ -23,7 +26,7 @@
     invalid?: boolean;
     size?: 'sm' | 'md';
     orientation?: 'horizontal' | 'vertical';
-  } = $props();
+  } & LiveInputEvents<number> = $props();
 
   const pct = $derived(valueToPercent(value, min, max));
 </script>
@@ -48,6 +51,8 @@
     {disabled}
     aria-invalid={invalid || undefined}
     bind:value
+    oninput={() => oninput?.(value)}
+    onchange={() => onchange?.(value)}
   />
   {#if showValue}
     <output class="sh3-slider__value" style:--pct="{pct}%">{value}</output>

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

@@ -1,3 +1,4 @@
+import type { LiveInputEvents } from './_contract';
 type $$ComponentProps = {
     value?: number;
     min?: number;
@@ -9,7 +10,7 @@ type $$ComponentProps = {
     invalid?: boolean;
     size?: 'sm' | 'md';
     orientation?: 'horizontal' | 'vertical';
-};
+} & LiveInputEvents<number>;
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

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

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

@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Slider from './Slider.svelte';
+describe('Slider event contract', () => {
+    it('fires oninput on native input event', async () => {
+        const oninput = vi.fn();
+        const { container } = render(Slider, { props: { value: 0, min: 0, max: 100, oninput } });
+        const range = container.querySelector('input[type=range]');
+        await fireEvent.input(range, { target: { value: '42' } });
+        expect(oninput).toHaveBeenCalledTimes(1);
+        expect(oninput).toHaveBeenCalledWith(42);
+    });
+    it('fires onchange on native change event', async () => {
+        const onchange = vi.fn();
+        const { container } = render(Slider, { props: { value: 0, min: 0, max: 100, onchange } });
+        const range = container.querySelector('input[type=range]');
+        await fireEvent.input(range, { target: { value: '70' } });
+        await fireEvent.change(range, { target: { value: '70' } });
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith(70);
+    });
+});

package/dist/primitives/widgets/SliderGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { LiveInputEvents } from './_contract';
   import Slider from './Slider.svelte';
 
   type Channel = { id: string; label: string; min?: number; max?: number; step?: number };
@@ -10,6 +11,8 @@
     showValues = false,
     disabled = false,
     size = 'md',
+    oninput,
+    onchange,
   }: {
     orientation?: 'horizontal' | 'vertical';
     channels: Channel[];
@@ -17,7 +20,7 @@
     showValues?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
-  } = $props();
+  } & LiveInputEvents<Record<string, number>> = $props();
 </script>
 
 <div class="sh3-sg sh3-sg--{orientation}">
@@ -36,6 +39,8 @@
           () => values[ch.id] ?? 0,
           (n: number) => values = { ...values, [ch.id]: n }
         }
+        oninput={() => oninput?.(values)}
+        onchange={() => onchange?.(values)}
       />
     </div>
   {/each}

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

@@ -1,3 +1,4 @@
+import type { LiveInputEvents } from './_contract';
 type Channel = {
     id: string;
     label: string;
@@ -12,7 +13,7 @@ type $$ComponentProps = {
     showValues?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
-};
+} & LiveInputEvents<Record<string, number>>;
 declare const SliderGroup: import("svelte").Component<$$ComponentProps, {}, "values">;
 type SliderGroup = ReturnType<typeof SliderGroup>;
 export default SliderGroup;

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

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