sh3-core 0.13.1 → 0.13.2

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

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,7 @@
     invalid = false,
     size = 'md',
     orientation = 'horizontal',
+    oninput,
     onchange,
   }: {
     value?: number;
@@ -24,8 +26,7 @@
     invalid?: boolean;
     size?: 'sm' | 'md';
     orientation?: 'horizontal' | 'vertical';
-    onchange?: (next: number) => void;
-  } = $props();
+  } & LiveInputEvents<number> = $props();
 
   const pct = $derived(valueToPercent(value, min, max));
 </script>
@@ -50,6 +51,7 @@
     {disabled}
     aria-invalid={invalid || undefined}
     bind:value
+    oninput={() => oninput?.(value)}
     onchange={() => onchange?.(value)}
   />
   {#if showValue}

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

@@ -1,3 +1,4 @@
+import type { LiveInputEvents } from './_contract';
 type $$ComponentProps = {
     value?: number;
     min?: number;
@@ -9,8 +10,7 @@ type $$ComponentProps = {
     invalid?: boolean;
     size?: 'sm' | 'md';
     orientation?: 'horizontal' | 'vertical';
-    onchange?: (next: number) => void;
-};
+} & 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,7 @@
     showValues = false,
     disabled = false,
     size = 'md',
+    oninput,
     onchange,
   }: {
     orientation?: 'horizontal' | 'vertical';
@@ -18,8 +20,7 @@
     showValues?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: Record<string, number>) => void;
-  } = $props();
+  } & LiveInputEvents<Record<string, number>> = $props();
 </script>
 
 <div class="sh3-sg sh3-sg--{orientation}">
@@ -38,6 +39,7 @@
           () => values[ch.id] ?? 0,
           (n: number) => values = { ...values, [ch.id]: n }
         }
+        oninput={() => oninput?.(values)}
         onchange={() => onchange?.(values)}
       />
     </div>

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

@@ -1,3 +1,4 @@
+import type { LiveInputEvents } from './_contract';
 type Channel = {
     id: string;
     label: string;
@@ -12,8 +13,7 @@ type $$ComponentProps = {
     showValues?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
-    onchange?: (next: Record<string, number>) => void;
-};
+} & 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 {};

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

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import SliderGroup from './SliderGroup.svelte';
+describe('SliderGroup event contract', () => {
+    const channels = [
+        { id: 'r', label: 'R' },
+        { id: 'g', label: 'G' },
+        { id: 'b', label: 'B' },
+    ];
+    it('emits oninput with full record when a child slider moves', async () => {
+        const oninput = vi.fn();
+        const { container } = render(SliderGroup, {
+            props: { channels, values: { r: 0, g: 0, b: 0 }, oninput },
+        });
+        const ranges = container.querySelectorAll('input[type=range]');
+        const gSlider = ranges[1];
+        await fireEvent.input(gSlider, { target: { value: '50' } });
+        expect(oninput).toHaveBeenCalled();
+        const lastCall = oninput.mock.calls[oninput.mock.calls.length - 1][0];
+        expect(lastCall).toEqual({ r: 0, g: 50, b: 0 });
+    });
+    it('emits onchange with full record on commit', async () => {
+        const onchange = vi.fn();
+        const { container } = render(SliderGroup, {
+            props: { channels, values: { r: 0, g: 0, b: 0 }, onchange },
+        });
+        const bSlider = container.querySelectorAll('input[type=range]')[2];
+        await fireEvent.input(bSlider, { target: { value: '75' } });
+        await fireEvent.change(bSlider, { target: { value: '75' } });
+        expect(onchange).toHaveBeenCalled();
+        const lastCall = onchange.mock.calls[onchange.mock.calls.length - 1][0];
+        expect(lastCall).toEqual({ r: 0, g: 0, b: 75 });
+    });
+});

package/dist/primitives/widgets/Textarea.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { LiveInputEvents } from './_contract';
+
   let {
     value = $bindable(''),
     label,
@@ -11,6 +13,7 @@
     required = false,
     rows = 3,
     resize = 'vertical',
+    oninput,
     onchange,
   }: {
     value?: string;
@@ -24,8 +27,7 @@
     required?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'both';
-    onchange?: (next: string) => void;
-  } = $props();
+  } & LiveInputEvents<string> = $props();
 
   const showError = $derived(invalid && !!error);
   const helperText = $derived(showError ? error : helper);
@@ -42,6 +44,7 @@
     {rows}
     aria-invalid={invalid || undefined}
     bind:value
+    oninput={() => oninput?.(value)}
     onblur={() => onchange?.(value)}
   ></textarea>
   {#if helperText}<span class="sh3-textarea__helper" class:sh3-textarea__helper--error={showError}>{helperText}</span>{/if}

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

@@ -1,3 +1,4 @@
+import type { LiveInputEvents } from './_contract';
 type $$ComponentProps = {
     value?: string;
     label?: string;
@@ -10,8 +11,7 @@ type $$ComponentProps = {
     required?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'both';
-    onchange?: (next: string) => void;
-};
+} & LiveInputEvents<string>;
 declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

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

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

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

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Textarea from './Textarea.svelte';
+describe('Textarea event contract', () => {
+    it('fires oninput on every keystroke', async () => {
+        const oninput = vi.fn();
+        const { container } = render(Textarea, { props: { value: '', oninput } });
+        const ta = container.querySelector('textarea');
+        await fireEvent.input(ta, { target: { value: 'a' } });
+        await fireEvent.input(ta, { target: { value: 'ab' } });
+        expect(oninput).toHaveBeenCalledTimes(2);
+        expect(oninput).toHaveBeenNthCalledWith(2, 'ab');
+    });
+    it('fires onchange once on blur with final value', async () => {
+        const onchange = vi.fn();
+        const { container } = render(Textarea, { props: { value: '', onchange } });
+        const ta = container.querySelector('textarea');
+        await fireEvent.input(ta, { target: { value: 'done' } });
+        await fireEvent.blur(ta);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith('done');
+    });
+    it('propagates rows and resize props', () => {
+        const { container } = render(Textarea, { props: { value: '', rows: 5, resize: 'none' } });
+        const ta = container.querySelector('textarea');
+        expect(ta.getAttribute('rows')).toBe('5');
+        expect(ta.style.resize).toBe('none');
+    });
+});

package/dist/primitives/widgets/UserPicker.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import PickerList from './PickerList.svelte';
+  import type { PickerItem } from './PickerList';
+  import { usersAdminState, refreshAdminUsers } from '../../auth/admin-users.svelte';
+
+  let {
+    value = $bindable<string[]>([]),
+    onchange,
+    disabled = false,
+    size = 'md',
+  }: {
+    value?: string[];
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+  } & CommitOnlyEvents<string[]> = $props();
+
+  // Kick a fetch if the cache is empty. The store dedupes concurrent calls,
+  // so multiple UserPicker mounts share one request. After completion
+  // subsequent mounts see the cached state.
+  if (
+    usersAdminState.users.length === 0 &&
+    !usersAdminState.loading &&
+    !usersAdminState.error
+  ) {
+    void refreshAdminUsers();
+  }
+
+  const items = $derived<PickerItem[]>(
+    usersAdminState.users.map((u) => ({
+      id: u.id,
+      label: u.displayName || u.username,
+      sublabel: u.username,
+    })),
+  );
+
+  function handleChange(next: string[]) {
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<PickerList
+  {items}
+  {value}
+  onchange={handleChange}
+  loading={usersAdminState.loading}
+  error={usersAdminState.error}
+  onRetry={() => void refreshAdminUsers()}
+  emptyText="No users found."
+  {disabled}
+  {size}
+/>

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import UserPicker from './UserPicker.svelte';
+const refresh = vi.fn();
+vi.mock('../../auth/admin-users.svelte', () => ({
+    usersAdminState: {
+        users: [
+            { id: 'u1', displayName: 'Alice', username: 'alice' },
+            { id: 'u2', displayName: '', username: 'bob' },
+        ],
+        loading: false,
+        error: null,
+    },
+    refreshAdminUsers: () => refresh(),
+}));
+describe('UserPicker event contract', () => {
+    it('renders cached users with displayName fallback to username', () => {
+        const { container } = render(UserPicker, { props: { value: [] } });
+        const labels = Array.from(container.querySelectorAll('.sh3-picker__row-label')).map((el) => el.textContent);
+        expect(labels).toEqual(['Alice', 'bob']);
+    });
+    it('fires onchange with id array on toggle', async () => {
+        const onchange = vi.fn();
+        const { container } = render(UserPicker, { props: { value: [], onchange } });
+        const checkboxes = container.querySelectorAll('input[type=checkbox]');
+        await fireEvent.click(checkboxes[0]);
+        expect(onchange).toHaveBeenCalledTimes(1);
+        expect(onchange).toHaveBeenCalledWith(['u1']);
+    });
+});

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

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