@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/input/CheckboxGroup.svelte

@@ -0,0 +1,250 @@
+<!--
+  CheckboxGroup.svelte: a labelled column of checkbox rows. Each row is
+  role=checkbox and owns focus and keys (Space/Enter toggle, arrows, Home/End).
+  The box sits on the group label's left edge, the same x as radio-group and a
+  standalone checkbox; labels are body ink at normal weight whether or not they
+  are checked, so an unchecked row never reads as disabled. A checked row has
+  no fill of its own: the box says it.
+  A hover highlight and a focus ring glide between rows through the shared
+  `movingIndicator` action on the FF `fast` (80ms) token; the hover fill is the
+  row's own box, so it never reaches left of the label edge.
+  Mechanism and timing ported from Fluid Functionalism's checkbox-group
+  (github.com/mickadesign/fluid-functionalism, MIT).
+-->
+
+<script lang="ts">
+  import { Checkbox as CheckboxPrimitive } from '../../components/ui/checkbox/index.js';
+  import { cn } from '../../utils.js';
+  import { canonicalOptions } from '../../utils/safe-props.js';
+  import { FF_SPRING_TOKENS } from '@ripple-ui/core';
+  import { movingIndicator, type IndicatorRect } from '../../motion/moving-indicator.js';
+  import { FIELD_LABEL } from '../../components/ui/control.js';
+
+  type Option = { value: string | number; label: string; disabled?: boolean };
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    /** Options to show. Strings or { value, label, disabled }. */
+    options?: (string | Option)[];
+    /** Array of checked values. Bind via `bind: "<state-path>"`. */
+    value?: (string | number)[];
+    disabled?: boolean;
+    onchange?: (value: (string | number)[]) => void;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    label,
+    options: rawOptions = [],
+    value = [],
+    disabled = false,
+    onchange
+  }: Props = $props();
+
+  const options = $derived(
+    canonicalOptions(rawOptions, { widget: 'checkbox-group', key: 'options' }) as Option[]
+  );
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const checked = $derived(Array.isArray(value) ? value : []);
+  const checkedSet = $derived(new Set(checked));
+
+  // The indicators measure for themselves; this measure feeds the nearest-on-y
+  // hit test that maps the cursor to activeIndex before any indicator mounts.
+  type Rect = IndicatorRect;
+
+  let container: HTMLDivElement | null = $state(null);
+  const itemEls: (HTMLElement | null)[] = [];
+  let itemRects = $state<Rect[]>([]);
+  let activeIndex = $state<number | null>(null);
+  let focusedIndex = $state<number | null>(null);
+  let prefersReduced = $state(false);
+  let frame = 0;
+
+  function measure() {
+    const rects: Rect[] = [];
+    for (let i = 0; i < itemEls.length; i++) {
+      const el = itemEls[i];
+      if (el) rects[i] = { top: el.offsetTop, left: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight };
+    }
+    itemRects = rects;
+  }
+
+  // Re-measure whenever the option set changes (and once on mount). $effect runs
+  // after the DOM updates, so itemEls are populated. SSR-safe: $effect is
+  // client-only, and itemRects starts [] so SSR paints no highlight (correct —
+  // the highlight is a hover affordance, not initial content).
+  $effect(() => {
+    void options.length; // re-run when the list changes
+    measure();
+  });
+
+  $effect(() => {
+    // jsdom (unit tests) and older runtimes may not implement matchMedia — guard
+    // so the widget renders without a layout/media engine. Defaults to motion on.
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    prefersReduced = mq.matches;
+    const onChange = () => (prefersReduced = mq.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  });
+
+  // Nearest-on-y-axis active detection (FF parity): prefer the item the cursor
+  // is vertically inside; fall back to the closest item center. rAF-throttled.
+  function onPointerMove(e: PointerEvent) {
+    if (disabled || !container) return;
+    if (frame) return;
+    const y = e.clientY;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      if (!container) return;
+      const cRect = container.getBoundingClientRect();
+      let containing: number | null = null;
+      let closest: number | null = null;
+      let closestDist = Infinity;
+      for (let i = 0; i < itemRects.length; i++) {
+        const r = itemRects[i];
+        if (!r) continue;
+        const start = cRect.top + r.top;
+        const end = start + r.height;
+        if (y >= start && y <= end) containing = i;
+        const dist = Math.abs(y - (start + r.height / 2));
+        if (dist < closestDist) { closestDist = dist; closest = i; }
+      }
+      activeIndex = containing ?? closest;
+    });
+  }
+
+  function onPointerLeave() {
+    if (frame) { cancelAnimationFrame(frame); frame = 0; }
+    activeIndex = null;
+  }
+
+  const hoverActiveIndex = $derived(activeIndex);
+
+  // Enumerate the item elements for the indicators (re-read each apply).
+  const enumerateItems = () => itemEls;
+
+  function toggle(opt: Option, i: number) {
+    if (disabled || opt.disabled) return;
+    const next = checkedSet.has(opt.value)
+      ? checked.filter((v) => v !== opt.value)
+      : [...checked, opt.value];
+    onchange?.(next);
+  }
+
+  function onItemKeydown(e: KeyboardEvent, opt: Option, i: number) {
+    const items = itemEls.filter((el): el is HTMLElement => !!el);
+    const here = items.indexOf(e.currentTarget as HTMLElement);
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggle(opt, i);
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (here === -1) return;
+      const n = e.key === 'ArrowDown' ? (here + 1) % items.length : (here - 1 + items.length) % items.length;
+      items[n]?.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      items[0]?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      items[items.length - 1]?.focus();
+    }
+  }
+</script>
+
+<div class={cn('flex flex-col gap-1.5', className)} style={styleString}>
+  {#if label}
+    <span class={FIELD_LABEL}>{label}</span>
+  {/if}
+
+  <div
+    bind:this={container}
+    {id}
+    role="group"
+    aria-label={label}
+    class={cn('relative flex flex-col w-fit max-w-full select-none', disabled && 'opacity-60')}
+    onpointermove={onPointerMove}
+    onpointerleave={onPointerLeave}
+  >
+    <!-- Hover highlight: one element gliding to the active row's box. -->
+    {#if hoverActiveIndex !== null}
+      <div
+        class="absolute rounded-md bg-ripple-track/60 pointer-events-none z-0"
+        data-checkbox-group-highlight
+        use:movingIndicator={{
+          container: () => container,
+          items: enumerateItems,
+          active: hoverActiveIndex,
+          token: FF_SPRING_TOKENS.fast,
+          axis: 'both',
+          reducedMotion: prefersReduced
+        }}
+      ></div>
+    {/if}
+
+    <!-- Focus ring — sits 2px OUTSIDE the focused item (inset: -2), also glides on
+         the FF `fast` token via the same primitive. Mounts only while focused. -->
+    {#if focusedIndex !== null}
+      <div
+        class="absolute rounded-md pointer-events-none z-20 border border-[var(--ring)]"
+        data-checkbox-group-focus
+        use:movingIndicator={{
+          container: () => container,
+          items: enumerateItems,
+          active: focusedIndex,
+          token: FF_SPRING_TOKENS.fast,
+          axis: 'both',
+          inset: -2,
+          reducedMotion: prefersReduced
+        }}
+      ></div>
+    {/if}
+
+    {#each options as opt, i (opt.value)}
+      {@const isChecked = checkedSet.has(opt.value)}
+      {@const isActive = activeIndex === i}
+      {@const itemDisabled = disabled || opt.disabled}
+      <div
+        bind:this={itemEls[i]}
+        data-checkbox-group-item={i}
+        role="checkbox"
+        aria-checked={isChecked}
+        aria-label={opt.label}
+        aria-disabled={itemDisabled}
+        tabindex={itemDisabled ? -1 : 0}
+        class={cn(
+          'relative z-10 flex items-start gap-2 rounded-md py-1 pr-2 outline-none',
+          itemDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+        )}
+        onclick={() => toggle(opt, i)}
+        onkeydown={(e) => onItemKeydown(e, opt, i)}
+        onfocus={(e) => { activeIndex = i; focusedIndex = (e.currentTarget as HTMLElement).matches(':focus-visible') ? i : null; }}
+        onblur={(e) => { if (container?.contains(e.relatedTarget as Node)) return; focusedIndex = null; activeIndex = null; }}
+      >
+        <!-- Box — our shared Checkbox primitive (atomic block) for a11y. tabindex
+             -1 + aria-hidden: the ROW owns focus + keyboard, the box is visual. -->
+        <span class="pointer-events-none flex h-[1.35em] shrink-0 items-center text-sm">
+          <CheckboxPrimitive
+            checked={isChecked}
+            disabled={itemDisabled}
+            tabindex={-1}
+            aria-hidden="true"
+          />
+        </span>
+
+        <span class="text-sm leading-[1.35] text-ripple-surface-foreground">{opt.label}</span>
+      </div>
+    {/each}
+  </div>
+</div>

package/dist/widgets/input/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+type Option = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+};
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    /** Options to show. Strings or { value, label, disabled }. */
+    options?: (string | Option)[];
+    /** Array of checked values. Bind via `bind: "<state-path>"`. */
+    value?: (string | number)[];
+    disabled?: boolean;
+    onchange?: (value: (string | number)[]) => void;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/widgets/input/ChoiceGrid.svelte

@@ -0,0 +1,150 @@
+<!--
+  widgets/input/ChoiceGrid.svelte
+  A single-choice grid of compact cards: a document size picker, a template
+  picker, any "pick one of N" where each option deserves a picture. On `./ui`.
+  - Each option: `value`, `label`, optional `detail` (the exact size, a short
+    note) and `thumb: {width, height}`, which draws a small page whose
+    proportions match (portrait, landscape and square read at a glance). A
+    `media` snippet replaces the built-in page for custom art.
+  - a11y: role="radiogroup" of role="radio" cards with a roving tabindex; the
+    arrow keys move AND select (native radio behaviour; up/down move a row),
+    Home/End go to the ends, disabled options are skipped.
+  - `columns` sets a fixed count; default is auto-fill at `minCardWidth`.
+  - Why not OptionList: that is a roomy p-4 icon card with no roving focus or
+    thumbnail; this is dense, keyboard-first and proportional.
+  Tokens only.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import type { ChoiceOption } from './choice-grid.js';
+
+  interface Props {
+    options: ChoiceOption[];
+    value?: string | null;
+    onchange?: (value: string) => void;
+    /** Accessible name of the group. */
+    label?: string;
+    columns?: number;
+    minCardWidth?: string;
+    media?: Snippet<[ChoiceOption, boolean]>;
+    class?: string;
+  }
+
+  let {
+    options,
+    value = $bindable(null),
+    onchange,
+    label,
+    columns,
+    minCardWidth = '6.5rem',
+    media,
+    class: className,
+  }: Props = $props();
+
+  let root = $state<HTMLDivElement | null>(null);
+
+  // The tab stop is the selected card, else the first enabled one.
+  const focusIndex = $derived.by(() => {
+    const i = options.findIndex((o) => o.value === value && !o.disabled);
+    return i >= 0 ? i : options.findIndex((o) => !o.disabled);
+  });
+
+  function pick(o: ChoiceOption) {
+    if (o.disabled) return;
+    value = o.value;
+    onchange?.(o.value);
+  }
+
+  /** How many cards sit on one row right now (for up/down). */
+  function perRow(): number {
+    if (columns) return columns;
+    const cards = root?.querySelectorAll<HTMLElement>('[role="radio"]');
+    if (!cards || cards.length < 2) return 1;
+    const top = cards[0].offsetTop;
+    let n = 0;
+    for (const c of cards) {
+      if (c.offsetTop !== top) break;
+      n++;
+    }
+    return Math.max(1, n);
+  }
+
+  function onkeydown(e: KeyboardEvent, from: number) {
+    const step: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: perRow(), ArrowUp: -perRow() };
+    let to = -1;
+    if (e.key in step) {
+      const d = step[e.key];
+      for (let i = from + d; i >= 0 && i < options.length; i += Math.sign(d)) {
+        if (!options[i].disabled) {
+          to = i;
+          break;
+        }
+      }
+    } else if (e.key === 'Home') to = options.findIndex((o) => !o.disabled);
+    else if (e.key === 'End') to = options.findLastIndex((o) => !o.disabled);
+    else return;
+    e.preventDefault();
+    if (to < 0) return;
+    pick(options[to]);
+    root?.querySelectorAll<HTMLElement>('[role="radio"]')[to]?.focus();
+  }
+
+  /** The page thumbnail box, fitted inside 40 x 32. */
+  function thumbBox(t: { width: number; height: number }) {
+    const s = Math.min(40 / Math.max(t.width, 1e-6), 32 / Math.max(t.height, 1e-6));
+    return { w: Math.max(6, Math.round(t.width * s)), h: Math.max(6, Math.round(t.height * s)) };
+  }
+</script>
+
+<div
+  bind:this={root}
+  role="radiogroup"
+  aria-label={label}
+  data-slot="choice-grid"
+  class={cn('grid gap-2', className)}
+  style:grid-template-columns={columns ? `repeat(${columns}, minmax(0, 1fr))` : `repeat(auto-fill, minmax(${minCardWidth}, 1fr))`}
+>
+  {#each options as o, i (`${o.value}:${i}`)}
+    {@const selected = o.value === value}
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected}
+      aria-disabled={o.disabled || undefined}
+      tabindex={i === focusIndex ? 0 : -1}
+      onclick={() => pick(o)}
+      onkeydown={(e) => onkeydown(e, i)}
+      class={cn(
+        'group/choice flex min-w-0 flex-col items-center gap-2 rounded-lg px-2 pb-2 pt-3 text-center outline-none ring-1 transition-[background-color,box-shadow,color] duration-150 ease-ripple-out',
+        'focus-visible:ring-2 focus-visible:ring-ripple-ring',
+        selected
+          ? 'bg-ripple-accent/10 ring-ripple-accent text-ripple-surface-foreground'
+          : 'bg-ripple-surface ring-ripple-border text-ripple-surface-foreground hover:bg-ripple-muted/60',
+        o.disabled && 'cursor-not-allowed opacity-50'
+      )}
+    >
+      <span class="flex h-8 w-10 items-center justify-center" aria-hidden="true">
+        {#if media}
+          {@render media(o, selected)}
+        {:else if o.thumb}
+          {@const b = thumbBox(o.thumb)}
+          <span
+            class={cn(
+              'block rounded-[2px] ring-1 shadow-sm transition-colors',
+              selected ? 'bg-ripple-accent/30 ring-ripple-accent' : 'bg-ripple-surface-foreground/15 ring-ripple-surface-foreground/25 group-hover/choice:bg-ripple-surface-foreground/25'
+            )}
+            style:width="{b.w}px"
+            style:height="{b.h}px"
+          ></span>
+        {:else}
+          <span class="block size-6 rounded-[2px] border border-dashed border-ripple-muted-foreground/60"></span>
+        {/if}
+      </span>
+      <span class="flex w-full min-w-0 flex-col gap-0.5">
+        <span class="truncate text-[12px] font-medium leading-tight">{o.label}</span>
+        {#if o.detail}<span class="truncate text-[11px] leading-tight tabular-nums text-ripple-muted-foreground">{o.detail}</span>{/if}
+      </span>
+    </button>
+  {/each}
+</div>

package/dist/widgets/input/ChoiceGrid.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { ChoiceOption } from './choice-grid.js';
+interface Props {
+    options: ChoiceOption[];
+    value?: string | null;
+    onchange?: (value: string) => void;
+    /** Accessible name of the group. */
+    label?: string;
+    columns?: number;
+    minCardWidth?: string;
+    media?: Snippet<[ChoiceOption, boolean]>;
+    class?: string;
+}
+declare const ChoiceGrid: import("svelte").Component<Props, {}, "value">;
+type ChoiceGrid = ReturnType<typeof ChoiceGrid>;
+export default ChoiceGrid;

package/dist/widgets/input/CodeEditor.svelte

@@ -0,0 +1,146 @@
+<!--
+  src/lib/widgets/input/CodeEditor.svelte: the `code-editor` widget, a
+  CodeMirror 6 editor loaded on mount with JavaScript, TypeScript, JSON or HTML
+  support. Its surface (background, text, gutter, active line, cursor,
+  selection) is painted from the theme tokens, so it follows the root
+  light/dark class with no remount.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { onMount } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  type Lang = 'javascript' | 'typescript' | 'json' | 'html' | 'text';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    /** Source string. Bind via `bind: "<state-path>"`. */
+    value?: string;
+    language?: Lang;
+    height?: string;
+    readonly?: boolean;
+    placeholder?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    label,
+    value = '',
+    language = 'javascript',
+    height = '240px',
+    readonly = false,
+    placeholder,
+    onchange
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  let containerEl = $state<HTMLDivElement | null>(null);
+  let view: any = null;
+  let ready = $state(false);
+
+  async function loadLanguage(lang: Lang) {
+    if (lang === 'javascript' || lang === 'typescript') {
+      const mod = await import('@codemirror/lang-javascript');
+      return mod.javascript({ typescript: lang === 'typescript' });
+    }
+    if (lang === 'json') {
+      const mod = await import('@codemirror/lang-json');
+      return mod.json();
+    }
+    if (lang === 'html') {
+      const mod = await import('@codemirror/lang-html');
+      return mod.html();
+    }
+    return [];
+  }
+
+  onMount(() => {
+    let cancelled = false;
+
+    (async () => {
+      const [{ EditorView, basicSetup }, { EditorState }, langExt] = await Promise.all([
+        import('codemirror'),
+        import('@codemirror/state'),
+        loadLanguage(language)
+      ]);
+      if (cancelled || !containerEl) return;
+
+      const updateListener = EditorView.updateListener.of((u) => {
+        if (u.docChanged) {
+          const next = u.state.doc.toString();
+          onchange?.(next);
+        }
+      });
+
+      view = new EditorView({
+        parent: containerEl,
+        state: EditorState.create({
+          doc: value || '',
+          extensions: [
+            basicSetup,
+            langExt,
+            EditorView.editable.of(!readonly),
+            EditorState.readOnly.of(readonly),
+            EditorView.theme({
+              '&': { fontSize: '13px', height: '100%', backgroundColor: 'var(--background)', color: 'var(--foreground)' },
+              '.cm-scroller': { fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace' },
+              '.cm-content': { padding: '8px 0', caretColor: 'var(--foreground)' },
+              '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--foreground)' },
+              '.cm-gutters': {
+                backgroundColor: 'color-mix(in oklch, var(--muted) 50%, var(--background))',
+                color: 'var(--muted-foreground)',
+                borderRight: '1px solid var(--border)'
+              },
+              '.cm-activeLine': { backgroundColor: 'color-mix(in oklch, var(--muted) 45%, transparent)' },
+              '.cm-activeLineGutter': { backgroundColor: 'color-mix(in oklch, var(--muted) 70%, transparent)', color: 'var(--foreground)' },
+              '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+                backgroundColor: 'color-mix(in oklch, var(--primary) 25%, transparent)'
+              }
+            }),
+            updateListener
+          ]
+        })
+      });
+      ready = true;
+    })();
+
+    return () => {
+      cancelled = true;
+      view?.destroy();
+      view = null;
+    };
+  });
+
+  // Sync external value changes (avoid clobbering during typing).
+  $effect(() => {
+    if (!view || !ready) return;
+    const current = view.state.doc.toString();
+    if (value !== current && value !== undefined) {
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: value || '' }
+      });
+    }
+  });
+</script>
+
+<div class={cn('flex flex-col gap-1.5', className)} style={styleString}>
+  {#if label}
+    <label class="text-sm font-medium" for={id}>{label}</label>
+  {/if}
+  <div
+    {id}
+    bind:this={containerEl}
+    class="rounded-md border border-input bg-background shadow-xs overflow-hidden focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px] transition-[color,box-shadow]"
+    style={safeStyle(`height: ${height}`)}
+    aria-label={placeholder ?? 'Code editor'}
+  ></div>
+</div>

package/dist/widgets/input/CodeEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+type Lang = 'javascript' | 'typescript' | 'json' | 'html' | 'text';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    /** Source string. Bind via `bind: "<state-path>"`. */
+    value?: string;
+    language?: Lang;
+    height?: string;
+    readonly?: boolean;
+    placeholder?: string;
+    onchange?: (value: string) => void;
+}
+declare const CodeEditor: import("svelte").Component<Props, {}, "">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;