sh3-core 0.12.0 → 0.13.1

package/dist/primitives/widgets/Slider.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { valueToPercent } from './Slider';
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    ticks,
+    showValue = false,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    orientation = 'horizontal',
+    onchange,
+  }: {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    ticks?: number[];
+    showValue?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    orientation?: 'horizontal' | 'vertical';
+    onchange?: (next: number) => void;
+  } = $props();
+
+  const pct = $derived(valueToPercent(value, min, max));
+</script>
+
+<div class="sh3-slider sh3-slider--{orientation}"
+     class:sh3-slider--sm={size === 'sm'}
+     class:sh3-slider--invalid={invalid}>
+  <div class="sh3-slider__track">
+    <div class="sh3-slider__fill" style:--pct="{pct}%"></div>
+    {#if ticks}
+      {#each ticks as t}
+        <span class="sh3-slider__tick" style:--tick-pct="{valueToPercent(t, min, max)}%"></span>
+      {/each}
+    {/if}
+  </div>
+  <input
+    type="range"
+    class="sh3-slider__native"
+    {min}
+    {max}
+    {step}
+    {disabled}
+    aria-invalid={invalid || undefined}
+    bind:value
+    onchange={() => onchange?.(value)}
+  />
+  {#if showValue}
+    <output class="sh3-slider__value" style:--pct="{pct}%">{value}</output>
+  {/if}
+</div>
+
+<style>
+  .sh3-slider {
+    --thumb-size: 14px;
+    position: relative;
+    display: inline-block;
+  }
+  .sh3-slider--sm { --thumb-size: 12px; }
+  .sh3-slider--horizontal { width: 200px; height: var(--thumb-size); }
+  .sh3-slider--vertical { width: var(--thumb-size); height: 200px; }
+
+  .sh3-slider__track {
+    position: absolute;
+    background: var(--shell-track-bg);
+    border: 1px solid var(--shell-track-border);
+    border-radius: var(--shell-widget-radius-pill);
+    pointer-events: none;
+  }
+  .sh3-slider--horizontal .sh3-slider__track {
+    top: 50%; left: 0; right: 0;
+    height: 4px;
+    transform: translateY(-50%);
+  }
+  .sh3-slider--vertical .sh3-slider__track {
+    left: 50%; top: 0; bottom: 0;
+    width: 4px;
+    transform: translateX(-50%);
+  }
+
+  .sh3-slider__fill {
+    position: absolute;
+    background: var(--shell-track-fill);
+    border-radius: inherit;
+  }
+  .sh3-slider--horizontal .sh3-slider__fill {
+    left: 0; top: 0; bottom: 0;
+    width: var(--pct);
+  }
+  .sh3-slider--vertical .sh3-slider__fill {
+    bottom: 0; left: 0; right: 0;
+    height: var(--pct);
+  }
+
+  .sh3-slider__tick {
+    position: absolute;
+    background: var(--shell-tick-bg);
+  }
+  .sh3-slider--horizontal .sh3-slider__tick {
+    width: 1px; height: 8px; top: 50%;
+    transform: translate(-50%, -50%);
+    left: var(--tick-pct);
+  }
+  .sh3-slider--vertical .sh3-slider__tick {
+    width: 8px; height: 1px; left: 50%;
+    transform: translate(-50%, 50%);
+    bottom: var(--tick-pct);
+  }
+
+  .sh3-slider__native {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
+  .sh3-slider--vertical .sh3-slider__native {
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+  /* Browser default applies opacity:0.5 to <input>:disabled at the
+     element level; that composites onto the thumb regardless of any
+     pseudo-element opacity overrides. Pin to 1 here so the disabled
+     thumb stays opaque and the muted-token recolor is what shows. */
+  .sh3-slider__native:disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+  .sh3-slider--invalid .sh3-slider__track { border-color: var(--shell-error); }
+
+  /* Disabled state: shift the fill + thumb to muted/border tokens
+     instead of using opacity, so the thumb stays opaque (no see-through). */
+  .sh3-slider:has(.sh3-slider__native:disabled) .sh3-slider__fill {
+    background: var(--shell-border-strong);
+  }
+
+  .sh3-slider__native::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background: var(--shell-thumb-bg);
+    border: 2px solid var(--shell-thumb-border);
+    box-shadow: var(--shell-thumb-shadow);
+    cursor: pointer;
+    opacity: 1;
+  }
+  .sh3-slider__native::-moz-range-thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background: var(--shell-thumb-bg);
+    border: 2px solid var(--shell-thumb-border);
+    box-shadow: var(--shell-thumb-shadow);
+    cursor: pointer;
+    opacity: 1;
+  }
+  .sh3-slider__native:disabled::-webkit-slider-thumb {
+    background: var(--shell-fg-subtle);
+    border-color: var(--shell-border-strong);
+    cursor: not-allowed;
+    opacity: 1;
+  }
+  .sh3-slider__native:disabled::-moz-range-thumb {
+    background: var(--shell-fg-subtle);
+    border-color: var(--shell-border-strong);
+    cursor: not-allowed;
+    opacity: 1;
+  }
+  .sh3-slider__native::-webkit-slider-runnable-track,
+  .sh3-slider__native::-moz-range-track {
+    background: transparent;
+  }
+  .sh3-slider__native:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--shell-focus-ring), var(--shell-thumb-shadow);
+  }
+  .sh3-slider__native:focus-visible::-moz-range-thumb {
+    box-shadow: var(--shell-focus-ring), var(--shell-thumb-shadow);
+  }
+
+  .sh3-slider__value {
+    position: absolute;
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted);
+    pointer-events: none;
+    transform: translate(-50%, 0);
+  }
+  .sh3-slider--horizontal .sh3-slider__value {
+    top: calc(100% + 4px);
+    left: var(--pct);
+  }
+  .sh3-slider--vertical .sh3-slider__value {
+    left: calc(100% + 6px);
+    bottom: var(--pct);
+    transform: translate(0, 50%);
+  }
+</style>

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

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    ticks?: number[];
+    showValue?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    orientation?: 'horizontal' | 'vertical';
+    onchange?: (next: number) => void;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

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

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { valueToPercent, percentToValue, snapToStep } from './Slider';
+describe('Slider value-position math', () => {
+    it('valueToPercent at min', () => {
+        expect(valueToPercent(0, 0, 100)).toBe(0);
+    });
+    it('valueToPercent at max', () => {
+        expect(valueToPercent(100, 0, 100)).toBe(100);
+    });
+    it('valueToPercent in middle', () => {
+        expect(valueToPercent(50, 0, 100)).toBe(50);
+    });
+    it('valueToPercent with negative range', () => {
+        expect(valueToPercent(0, -10, 10)).toBe(50);
+    });
+    it('percentToValue at 50%', () => {
+        expect(percentToValue(50, 0, 100)).toBe(50);
+    });
+    it('percentToValue at 0%', () => {
+        expect(percentToValue(0, -10, 10)).toBe(-10);
+    });
+    it('snapToStep snaps to grid', () => {
+        expect(snapToStep(2.7, 0, 1)).toBe(3);
+        expect(snapToStep(2.3, 0, 1)).toBe(2);
+        expect(snapToStep(2.7, 0, 0.5)).toBe(2.5);
+    });
+    it('snapToStep clamps to min/max', () => {
+        expect(snapToStep(-5, 0, 1, { min: 0, max: 10 })).toBe(0);
+        expect(snapToStep(15, 0, 1, { min: 0, max: 10 })).toBe(10);
+    });
+});

package/dist/primitives/widgets/SliderGroup.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import Slider from './Slider.svelte';
+
+  type Channel = { id: string; label: string; min?: number; max?: number; step?: number };
+
+  let {
+    orientation = 'horizontal',
+    channels,
+    values = $bindable<Record<string, number>>({}),
+    showValues = false,
+    disabled = false,
+    size = 'md',
+    onchange,
+  }: {
+    orientation?: 'horizontal' | 'vertical';
+    channels: Channel[];
+    values?: Record<string, number>;
+    showValues?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (next: Record<string, number>) => void;
+  } = $props();
+</script>
+
+<div class="sh3-sg sh3-sg--{orientation}">
+  {#each channels as ch (ch.id)}
+    <div class="sh3-sg__channel">
+      <span class="sh3-sg__label">{ch.label}</span>
+      <Slider
+        {orientation}
+        min={ch.min ?? 0}
+        max={ch.max ?? 100}
+        step={ch.step ?? 1}
+        {disabled}
+        {size}
+        showValue={showValues}
+        bind:value={
+          () => values[ch.id] ?? 0,
+          (n: number) => values = { ...values, [ch.id]: n }
+        }
+        onchange={() => onchange?.(values)}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sh3-sg { display: inline-flex; gap: var(--shell-pad-md); }
+  .sh3-sg--vertical { flex-direction: row; align-items: end; }
+  .sh3-sg--horizontal { flex-direction: column; }
+  .sh3-sg__channel {
+    display: flex; gap: 4px; align-items: center;
+  }
+  .sh3-sg--vertical .sh3-sg__channel { flex-direction: column-reverse; align-items: center; }
+  .sh3-sg__label {
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted);
+    min-width: 60px;
+  }
+  .sh3-sg--vertical .sh3-sg__label { min-width: 0; text-align: center; }
+</style>

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

@@ -0,0 +1,19 @@
+type Channel = {
+    id: string;
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+type $$ComponentProps = {
+    orientation?: 'horizontal' | 'vertical';
+    channels: Channel[];
+    values?: Record<string, number>;
+    showValues?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (next: Record<string, number>) => void;
+};
+declare const SliderGroup: import("svelte").Component<$$ComponentProps, {}, "values">;
+type SliderGroup = ReturnType<typeof SliderGroup>;
+export default SliderGroup;

package/dist/primitives/widgets/Textarea.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  let {
+    value = $bindable(''),
+    label,
+    placeholder,
+    helper,
+    error,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    required = false,
+    rows = 3,
+    resize = 'vertical',
+    onchange,
+  }: {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    helper?: string;
+    error?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    required?: boolean;
+    rows?: number;
+    resize?: 'none' | 'vertical' | 'both';
+    onchange?: (next: string) => void;
+  } = $props();
+
+  const showError = $derived(invalid && !!error);
+  const helperText = $derived(showError ? error : helper);
+</script>
+
+<label class="sh3-textarea" class:sh3-textarea--invalid={invalid} class:sh3-textarea--sm={size === 'sm'}>
+  {#if label}<span class="sh3-textarea__label">{label}{#if required}<span aria-hidden="true"> *</span>{/if}</span>{/if}
+  <textarea
+    class="sh3-textarea__input"
+    style:resize
+    {placeholder}
+    {disabled}
+    {required}
+    {rows}
+    aria-invalid={invalid || undefined}
+    bind:value
+    onblur={() => onchange?.(value)}
+  ></textarea>
+  {#if helperText}<span class="sh3-textarea__helper" class:sh3-textarea__helper--error={showError}>{helperText}</span>{/if}
+</label>
+
+<style>
+  .sh3-textarea {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 4px;
+    font-family: var(--shell-font-ui);
+    font-size: 0.8125rem;
+  }
+  .sh3-textarea__label {
+    color: var(--shell-fg-muted);
+    font-size: 0.75rem;
+  }
+  .sh3-textarea__input {
+    background: var(--shell-input-bg);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius);
+    padding: var(--shell-pad-sm) var(--shell-field-pad-x);
+    font: inherit;
+    outline: none;
+    transition: border-color var(--shell-motion-fast) var(--shell-ease-standard);
+  }
+  .sh3-textarea__input:focus {
+    border-color: var(--shell-input-border-focus);
+    box-shadow: var(--shell-focus-ring);
+  }
+  .sh3-textarea--invalid .sh3-textarea__input {
+    border-color: var(--shell-error);
+  }
+  .sh3-textarea__helper {
+    color: var(--shell-fg-muted);
+    font-size: 0.75rem;
+  }
+  .sh3-textarea__helper--error { color: var(--shell-error); }
+</style>

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

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    helper?: string;
+    error?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    required?: boolean;
+    rows?: number;
+    resize?: 'none' | 'vertical' | 'both';
+    onchange?: (next: string) => void;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/primitives/widgets/_select-listbox.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import {
+    type SelectOption,
+    shouldShowSearch,
+    filterOptions,
+    matchTypeAhead,
+  } from './Select';
+
+  let {
+    options,
+    getValue,
+    multiple,
+    onSelect,
+    onClose,
+    close,
+  }: {
+    options: SelectOption[];
+    /** Live read of the selected value(s). Returning a closure (rather
+     *  than passing value as a snapshot) is what lets the listbox
+     *  re-render checkmarks across multiple selections without unmounting. */
+    getValue: () => string | string[];
+    multiple: boolean;
+    onSelect: (v: string) => void;
+    /** Called by listbox-initiated close paths so the trigger can
+     *  restore its open-flag and focus. Outside-click and Escape
+     *  paths are handled by the popup manager via Select's wrap. */
+    onClose?: () => void;
+    close: () => void;
+  } = $props();
+
+  const value = $derived(getValue());
+
+  function dismiss() {
+    onClose?.();
+    close();
+  }
+
+  const showSearch = $derived(shouldShowSearch(options));
+
+  function initialActiveIdx(): number {
+    if (multiple) return 0;
+    const v = typeof value === 'string' ? value : '';
+    const idx = options.findIndex((o) => o.value === v && !o.disabled);
+    return idx >= 0 ? idx : 0;
+  }
+
+  let query = $state('');
+  let activeIdx = $state(initialActiveIdx());
+  let listEl = $state<HTMLDivElement | undefined>(undefined);
+  let searchEl = $state<HTMLInputElement | undefined>(undefined);
+  let typeAheadBuffer = '';
+  let typeAheadTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const filtered = $derived(filterOptions(options, query));
+
+  $effect(() => {
+    if (activeIdx >= filtered.length) activeIdx = 0;
+    void scrollActiveIntoView();
+  });
+
+  async function scrollActiveIntoView() {
+    await tick();
+    if (!listEl) return;
+    const el = listEl.querySelector<HTMLElement>(`[data-idx="${activeIdx}"]`);
+    el?.scrollIntoView({ block: 'nearest' });
+  }
+
+  function isSelected(o: SelectOption): boolean {
+    if (multiple && Array.isArray(value)) return value.includes(o.value);
+    return value === o.value;
+  }
+
+  function commit(idx: number) {
+    const o = filtered[idx];
+    if (!o || o.disabled) return;
+    onSelect(o.value);
+    if (!multiple) dismiss();
+  }
+
+  function onListKey(e: KeyboardEvent) {
+    if (filtered.length === 0) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        activeIdx = (activeIdx + 1) % filtered.length;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        activeIdx = (activeIdx - 1 + filtered.length) % filtered.length;
+        break;
+      case 'Home':
+        e.preventDefault();
+        activeIdx = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        activeIdx = filtered.length - 1;
+        break;
+      case 'Enter':
+        e.preventDefault();
+        commit(activeIdx);
+        break;
+      case ' ':
+      case 'Space':
+        e.preventDefault();
+        commit(activeIdx);
+        break;
+      case 'Escape':
+        e.preventDefault();
+        dismiss();
+        break;
+      default:
+        if (showSearch && document.activeElement === searchEl) return;
+        if (e.key.length !== 1 || e.metaKey || e.ctrlKey || e.altKey) return;
+        typeAheadBuffer += e.key;
+        if (typeAheadTimer) clearTimeout(typeAheadTimer);
+        typeAheadTimer = setTimeout(() => { typeAheadBuffer = ''; }, 500);
+        const idx = matchTypeAhead(filtered, typeAheadBuffer, activeIdx);
+        if (idx >= 0) activeIdx = idx;
+    }
+  }
+</script>
+
+<div
+  class="sh3-listbox"
+  role="listbox"
+  aria-multiselectable={multiple}
+  tabindex="-1"
+  onkeydown={onListKey}
+>
+  {#if showSearch}
+    <input
+      bind:this={searchEl}
+      class="sh3-listbox__search"
+      type="search"
+      placeholder="Filter…"
+      bind:value={query}
+    />
+  {/if}
+  <div class="sh3-listbox__list" bind:this={listEl}>
+    {#each filtered as opt, i}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div
+        role="option"
+        tabindex="-1"
+        aria-selected={isSelected(opt)}
+        aria-disabled={opt.disabled}
+        data-idx={i}
+        class:sh3-listbox__opt--active={i === activeIdx}
+        class:sh3-listbox__opt--selected={isSelected(opt)}
+        onclick={() => commit(i)}
+        onmouseenter={() => activeIdx = i}
+      >
+        {#if multiple}
+          <span class="sh3-listbox__check" class:sh3-listbox__check--on={isSelected(opt)} aria-hidden="true"></span>
+        {/if}
+        <span class="sh3-listbox__label">{opt.label}</span>
+      </div>
+    {/each}
+    {#if filtered.length === 0}
+      <div class="sh3-listbox__empty">No matches</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .sh3-listbox {
+    background: var(--shell-bg-elevated);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius);
+    box-shadow: var(--shell-shadow-sm);
+    min-width: 180px;
+    max-width: 320px;
+    color: var(--shell-fg);
+    font-size: 0.8125rem;
+    overflow: hidden;
+  }
+  .sh3-listbox__search {
+    width: 100%;
+    height: 26px;
+    padding: 0 8px;
+    background: var(--shell-input-bg);
+    border: none;
+    border-bottom: 1px solid var(--shell-border);
+    color: var(--shell-fg);
+    font: inherit;
+    outline: none;
+  }
+  .sh3-listbox__list {
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+  .sh3-listbox__list > div {
+    display: flex; align-items: center; gap: 6px;
+    padding: 4px 10px;
+    cursor: pointer;
+  }
+  .sh3-listbox__opt--active { background: var(--shell-bg); }
+  .sh3-listbox__opt--selected { color: var(--shell-accent); }
+  .sh3-listbox__opt--active.sh3-listbox__opt--selected { background: var(--shell-accent); color: var(--shell-fg-on-accent); }
+  .sh3-listbox__list > div[aria-disabled="true"] {
+    color: var(--shell-fg-subtle);
+    cursor: not-allowed;
+  }
+  .sh3-listbox__check {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+  }
+  .sh3-listbox__check--on::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: var(--shell-accent);
+    clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 85% 8%, 38% 70%);
+  }
+  .sh3-listbox__opt--active.sh3-listbox__opt--selected .sh3-listbox__check--on::before {
+    background: var(--shell-fg-on-accent);
+  }
+  .sh3-listbox__empty {
+    padding: 6px 10px;
+    color: var(--shell-fg-muted);
+    font-style: italic;
+  }
+</style>

package/dist/primitives/widgets/_select-listbox.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type SelectOption } from './Select';
+type $$ComponentProps = {
+    options: SelectOption[];
+    /** Live read of the selected value(s). Returning a closure (rather
+     *  than passing value as a snapshot) is what lets the listbox
+     *  re-render checkmarks across multiple selections without unmounting. */
+    getValue: () => string | string[];
+    multiple: boolean;
+    onSelect: (v: string) => void;
+    /** Called by listbox-initiated close paths so the trigger can
+     *  restore its open-flag and focus. Outside-click and Escape
+     *  paths are handled by the popup manager via Select's wrap. */
+    onClose?: () => void;
+    close: () => void;
+};
+declare const SelectListbox: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectListbox = ReturnType<typeof SelectListbox>;
+export default SelectListbox;