sh3-core 0.12.0 → 0.13.0

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

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { constrainPair } from './RangeSlider';
+describe('RangeSlider thumb-no-cross', () => {
+    it('keeps low <= high when low pushes up', () => {
+        expect(constrainPair([3, 5], 'low', 7)).toEqual([5, 5]);
+    });
+    it('keeps low <= high when high pushes down', () => {
+        expect(constrainPair([3, 5], 'high', 1)).toEqual([3, 3]);
+    });
+    it('passes through when not crossing', () => {
+        expect(constrainPair([3, 5], 'low', 4)).toEqual([4, 5]);
+        expect(constrainPair([3, 5], 'high', 6)).toEqual([3, 6]);
+    });
+});

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

@@ -0,0 +1,9 @@
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare function nextValue(opts: SegmentedOption[], current: string): string;
+export declare function prevValue(opts: SegmentedOption[], current: string): string;
+export declare function firstValue(opts: SegmentedOption[]): string | undefined;
+export declare function lastValue(opts: SegmentedOption[]): string | undefined;

package/dist/primitives/widgets/Segmented.js

@@ -0,0 +1,28 @@
+function activeOptions(opts) {
+    return opts.filter((o) => !o.disabled);
+}
+export function nextValue(opts, current) {
+    const active = activeOptions(opts);
+    if (active.length === 0)
+        return current;
+    const idx = active.findIndex((o) => o.value === current);
+    const next = active[(idx + 1 + active.length) % active.length];
+    return next.value;
+}
+export function prevValue(opts, current) {
+    const active = activeOptions(opts);
+    if (active.length === 0)
+        return current;
+    const idx = active.findIndex((o) => o.value === current);
+    const prev = active[(idx - 1 + active.length) % active.length];
+    return prev.value;
+}
+export function firstValue(opts) {
+    var _a;
+    return (_a = activeOptions(opts)[0]) === null || _a === void 0 ? void 0 : _a.value;
+}
+export function lastValue(opts) {
+    var _a;
+    const a = activeOptions(opts);
+    return (_a = a[a.length - 1]) === null || _a === void 0 ? void 0 : _a.value;
+}

package/dist/primitives/widgets/Segmented.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { type SegmentedOption, nextValue, prevValue, firstValue, lastValue } from './Segmented';
+
+  let {
+    options,
+    value = $bindable(),
+    size = 'md',
+    disabled = false,
+  }: {
+    options: SegmentedOption[];
+    value: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+  } = $props();
+
+  function onKey(e: KeyboardEvent) {
+    if (disabled) return;
+    let next: string | undefined;
+    switch (e.key) {
+      case 'ArrowRight': case 'ArrowDown': next = nextValue(options, value); break;
+      case 'ArrowLeft': case 'ArrowUp':    next = prevValue(options, value); break;
+      case 'Home':                          next = firstValue(options); break;
+      case 'End':                           next = lastValue(options); break;
+      default: return;
+    }
+    e.preventDefault();
+    if (next !== undefined) value = next;
+  }
+</script>
+
+<div role="radiogroup" tabindex="-1" class="sh3-seg" class:sh3-seg--sm={size === 'sm'} onkeydown={onKey}>
+  {#each options as opt}
+    <button
+      type="button"
+      role="radio"
+      aria-checked={value === opt.value}
+      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; }}
+    >{opt.label}</button>
+  {/each}
+</div>
+
+<style>
+  .sh3-seg {
+    display: inline-flex;
+    background: var(--shell-bg-sunken);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius-pill);
+    padding: 2px;
+    height: var(--shell-field-height-md);
+    gap: 0;
+  }
+  .sh3-seg--sm { height: var(--shell-field-height-sm); }
+  .sh3-seg button {
+    background: transparent;
+    color: var(--shell-fg-muted);
+    border: none;
+    padding: 0 var(--shell-field-pad-x);
+    border-radius: var(--shell-widget-radius-pill);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition: background var(--shell-motion-fast) var(--shell-ease-standard),
+                color var(--shell-motion-fast) var(--shell-ease-standard);
+  }
+  .sh3-seg button:hover:not(:disabled):not(.sh3-seg__btn--active) {
+    color: var(--shell-fg);
+    filter: none;
+  }
+  .sh3-seg__btn--active {
+    background: var(--shell-accent);
+    color: var(--shell-fg-on-accent);
+    font-weight: 600;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 0 1px color-mix(in srgb, var(--shell-fg-on-accent) 25%, transparent);
+  }
+  .sh3-seg button:disabled { opacity: 0.5; cursor: not-allowed; }
+  .sh3-seg button:focus-visible {
+    outline: none;
+    box-shadow: var(--shell-focus-ring);
+  }
+</style>

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { nextValue, prevValue, firstValue, lastValue } from './Segmented';
+describe('Segmented keyboard nav', () => {
+    const opts = [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B', disabled: true },
+        { value: 'c', label: 'C' },
+    ];
+    it('nextValue skips disabled', () => {
+        expect(nextValue(opts, 'a')).toBe('c');
+    });
+    it('nextValue wraps to first', () => {
+        expect(nextValue(opts, 'c')).toBe('a');
+    });
+    it('prevValue skips disabled', () => {
+        expect(prevValue(opts, 'c')).toBe('a');
+    });
+    it('firstValue returns first non-disabled', () => {
+        expect(firstValue(opts)).toBe('a');
+    });
+    it('lastValue returns last non-disabled', () => {
+        expect(lastValue(opts)).toBe('c');
+    });
+});

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

@@ -0,0 +1,11 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare const SEARCH_THRESHOLD = 8;
+export declare function shouldShowSearch(options: SelectOption[]): boolean;
+export declare function filterOptions(options: SelectOption[], query: string): SelectOption[];
+export declare function matchTypeAhead(options: SelectOption[], buffer: string, current: number): number;
+export declare function resolveValueLabel(options: SelectOption[], value: string | string[], multiple: boolean): string;
+export declare function toggleMulti(current: string[], v: string): string[];

package/dist/primitives/widgets/Select.js

@@ -0,0 +1,42 @@
+export const SEARCH_THRESHOLD = 8;
+export function shouldShowSearch(options) {
+    return options.length >= SEARCH_THRESHOLD;
+}
+export function filterOptions(options, query) {
+    if (!query)
+        return options.slice();
+    const q = query.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+}
+export function matchTypeAhead(options, buffer, current) {
+    if (!buffer)
+        return -1;
+    const b = buffer.toLowerCase();
+    const n = options.length;
+    for (let i = 1; i <= n; i++) {
+        const idx = (current + i) % n;
+        if (options[idx].disabled)
+            continue;
+        if (options[idx].label.toLowerCase().startsWith(b))
+            return idx;
+    }
+    return -1;
+}
+export function resolveValueLabel(options, value, multiple) {
+    var _a, _b;
+    if (multiple && Array.isArray(value)) {
+        return value
+            .map((v) => { var _a, _b; return (_b = (_a = options.find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : ''; })
+            .filter(Boolean)
+            .join(', ');
+    }
+    if (typeof value === 'string' && value) {
+        return (_b = (_a = options.find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';
+    }
+    return '';
+}
+export function toggleMulti(current, v) {
+    if (current.includes(v))
+        return current.filter((x) => x !== v);
+    return [...current, v];
+}

package/dist/primitives/widgets/Select.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  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,
+    placeholder = 'Select…',
+    label,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+  }: {
+    options: SelectOption[];
+    value?: string | string[];
+    multiple?: boolean;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+  } = $props();
+
+  let trigger = $state<HTMLButtonElement | undefined>(undefined);
+  let nativeRef = $state<HTMLSelectElement | undefined>(undefined);
+  let isOpen = $state(false);
+
+  const displayLabel = $derived(resolveValueLabel(options, value, multiple));
+
+  function onPopupClose() {
+    isOpen = false;
+    trigger?.focus();
+  }
+
+  async function open() {
+    if (disabled || isOpen || !trigger) return;
+    isOpen = true;
+    const popupHandle = shell.popup.show(
+      Listbox,
+      { anchor: trigger },
+      {
+        options,
+        // Closure read so the listbox sees Select's live value across
+        // multiple selections without remount.
+        getValue: () => value,
+        multiple,
+        onSelect: (v: string) => {
+          if (multiple) {
+            const arr = Array.isArray(value) ? value : [];
+            value = toggleMulti(arr, v);
+          } else {
+            value = v;
+          }
+        },
+        // Listbox calls this on its own close paths (selection in
+        // single mode, Escape inside the listbox). Outside-click and
+        // document-Escape go through the wrap below instead.
+        onClose: onPopupClose,
+      },
+    );
+    // popup.ts's outside-click + document-Escape route through
+    // current.handle.close() — wrap that to also clear our state.
+    const origClose = popupHandle.close;
+    popupHandle.close = () => {
+      origClose();
+      onPopupClose();
+    };
+    await tick();
+    const lb = document.querySelector<HTMLElement>('.sh3-listbox');
+    lb?.focus();
+  }
+
+  function onTriggerKey(e: KeyboardEvent) {
+    if (disabled || isOpen) return;
+    switch (e.key) {
+      case 'ArrowDown': case 'ArrowUp': case 'Enter': case ' ':
+        e.preventDefault();
+        open();
+        break;
+    }
+  }
+
+  function onNativeChange() {
+    if (!nativeRef) return;
+    if (multiple) {
+      value = Array.from(nativeRef.selectedOptions).map((o) => o.value);
+    } else {
+      value = nativeRef.value;
+    }
+  }
+</script>
+
+<label class="sh3-select" class:sh3-select--invalid={invalid} class:sh3-select--sm={size === 'sm'}>
+  {#if label}<span class="sh3-select__label">{label}</span>{/if}
+  <button
+    type="button"
+    class="sh3-select__btn"
+    bind:this={trigger}
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    onclick={open}
+    onkeydown={onTriggerKey}
+  >
+    <span class="sh3-select__display" class:sh3-select__display--placeholder={!displayLabel}>
+      {displayLabel || placeholder}
+    </span>
+    <span class="sh3-select__chevron" aria-hidden="true">▾</span>
+  </button>
+
+  <select
+    bind:this={nativeRef}
+    class="sh3-select__native"
+    {multiple}
+    {disabled}
+    tabindex={-1}
+    aria-hidden="true"
+    onchange={onNativeChange}
+  >
+    {#each options as opt}
+      <option value={opt.value} selected={
+        multiple
+          ? Array.isArray(value) && value.includes(opt.value)
+          : value === opt.value
+      }>{opt.label}</option>
+    {/each}
+  </select>
+</label>
+
+<style>
+  .sh3-select { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; position: relative; }
+  .sh3-select__label { color: var(--shell-fg-muted); font-size: 0.75rem; }
+  .sh3-select__btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    height: var(--shell-field-height-md);
+    min-width: 140px;
+    padding: 0 var(--shell-field-pad-x);
+    background: var(--shell-input-bg);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius);
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+  .sh3-select--sm .sh3-select__btn { height: var(--shell-field-height-sm); }
+  .sh3-select__btn:focus-visible { outline: none; box-shadow: var(--shell-focus-ring); border-color: var(--shell-input-border-focus); }
+  .sh3-select__btn:disabled { opacity: 0.55; cursor: not-allowed; }
+  .sh3-select--invalid .sh3-select__btn { border-color: var(--shell-error); }
+  .sh3-select__display { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sh3-select__display--placeholder { color: var(--shell-fg-muted); }
+  .sh3-select__chevron { color: var(--shell-fg-muted); }
+  .sh3-select__native {
+    position: absolute;
+    width: 1px; height: 1px;
+    margin: 0; padding: 0;
+    border: 0; opacity: 0;
+    pointer-events: none;
+  }
+</style>

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

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

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

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

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

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import { shouldShowSearch, filterOptions, matchTypeAhead, resolveValueLabel, toggleMulti, SEARCH_THRESHOLD, } from './Select';
+const opts = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+    { value: 'fig', label: 'Fig' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'honeydew', label: 'Honeydew' },
+];
+describe('Select threshold', () => {
+    it('does not show search at 7 options', () => {
+        expect(shouldShowSearch(opts.slice(0, 7))).toBe(false);
+    });
+    it('shows search at 8 options (threshold)', () => {
+        expect(shouldShowSearch(opts)).toBe(true);
+    });
+    it('threshold constant is 8', () => {
+        expect(SEARCH_THRESHOLD).toBe(8);
+    });
+});
+describe('Select filtering', () => {
+    it('filters case-insensitively by substring', () => {
+        expect(filterOptions(opts, 'AN').map((o) => o.value)).toEqual(['banana']);
+    });
+    it('matches multiple', () => {
+        expect(filterOptions(opts, 'e').map((o) => o.value))
+            .toEqual(['apple', 'cherry', 'date', 'elderberry', 'grape', 'honeydew']);
+    });
+    it('empty query returns all', () => {
+        expect(filterOptions(opts, '').length).toBe(opts.length);
+    });
+});
+describe('Select type-ahead', () => {
+    it('matches by first character', () => {
+        expect(matchTypeAhead(opts, 'b', 0)).toBe(1);
+    });
+    it('matches by buffer prefix', () => {
+        expect(matchTypeAhead(opts, 'ho', 0)).toBe(7);
+    });
+    it('returns -1 when no match', () => {
+        expect(matchTypeAhead(opts, 'z', 0)).toBe(-1);
+    });
+    it('searches from current+1 forward, then wraps', () => {
+        expect(matchTypeAhead(opts, 'b', 1)).toBe(1);
+    });
+});
+describe('Select value resolution', () => {
+    it('resolveValueLabel single', () => {
+        expect(resolveValueLabel(opts, 'cherry', false)).toBe('Cherry');
+    });
+    it('resolveValueLabel single null', () => {
+        expect(resolveValueLabel(opts, '', false)).toBe('');
+    });
+    it('resolveValueLabel multi joined', () => {
+        expect(resolveValueLabel(opts, ['apple', 'cherry'], true)).toBe('Apple, Cherry');
+    });
+});
+describe('Select toggleMulti', () => {
+    it('adds new selection', () => {
+        expect(toggleMulti(['a'], 'b')).toEqual(['a', 'b']);
+    });
+    it('removes existing', () => {
+        expect(toggleMulti(['a', 'b'], 'a')).toEqual(['b']);
+    });
+});

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

@@ -0,0 +1,6 @@
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare function percentToValue(pct: number, min: number, max: number): number;
+export declare function snapToStep(value: number, base: number, step: number, bounds?: {
+    min?: number;
+    max?: number;
+}): number;

package/dist/primitives/widgets/Slider.js

@@ -0,0 +1,19 @@
+export function valueToPercent(value, min, max) {
+    if (max === min)
+        return 0;
+    return ((value - min) / (max - min)) * 100;
+}
+export function percentToValue(pct, min, max) {
+    return min + (pct / 100) * (max - min);
+}
+export function snapToStep(value, base, step, bounds) {
+    if (step <= 0)
+        return value;
+    const k = Math.round((value - base) / step);
+    let v = base + k * step;
+    if ((bounds === null || bounds === void 0 ? void 0 : bounds.min) !== undefined && v < bounds.min)
+        v = bounds.min;
+    if ((bounds === null || bounds === void 0 ? void 0 : bounds.max) !== undefined && v > bounds.max)
+        v = bounds.max;
+    return v;
+}