@svgrid/grid 1.2.23 → 1.2.24

package/src/SvTimePicker.svelte

@@ -1,20 +1,24 @@
 <script lang="ts" module>
-  export type TimeValue = Date | string | number | null
+  export type { TimeValue } from './createTimePicker.svelte'
 </script>
 
 <script lang="ts">
   /**
    * SvTimePicker - an analog clock-dial time picker (parity: Smart
    * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
-   * pointer-drag + keyboard. Works standalone and as the SvGrid `time` editor.
+   * pointer-drag + keyboard. It is a styled renderer over the headless
+   * `createTimePicker` core: the core owns the value math, dial geometry, keyboard
+   * and ARIA; this component keeps the DOM-bound pointer capture + hit-testing.
    * All visuals come from `--sg-*` tokens so every theme applies for free.
    */
+  import { createTimePicker, type TimeValue, type TimeFormat, type TimeSelection } from './createTimePicker.svelte'
+
   type Props = {
     /** Date, "HH:MM[:SS]" string, or epoch ms. */
     value?: TimeValue
     /** Fires with a Date (today's date carrying the picked time). */
     onChange?: (value: Date) => void
-    format?: '12-hour' | '24-hour'
+    format?: TimeFormat
     minuteInterval?: number
     /** After picking an hour, jump the dial to minutes. Default true. */
     autoSwitchToMinutes?: boolean
@@ -24,7 +28,7 @@
     readonly?: boolean
     name?: string
     /** Which dial opens first. */
-    selection?: 'hour' | 'minute'
+    selection?: TimeSelection
   }
 
   let {
@@ -40,224 +44,68 @@
     selection = 'hour',
   }: Props = $props()
 
-  const is12 = $derived(format === '12-hour')
-  const isInteractive = $derived(!disabled && !readonly)
-
-  function parseValue(v: TimeValue): { h: number; m: number } {
-    if (v == null) { const n = new Date(); return { h: n.getHours(), m: n.getMinutes() } }
-    if (typeof v === 'string') {
-      const mt = v.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/)
-      if (mt) return { h: Math.min(23, +mt[1]!), m: Math.min(59, +mt[2]!) }
-      const d = new Date(v)
-      if (!isNaN(d.getTime())) return { h: d.getHours(), m: d.getMinutes() }
-      const n = new Date(); return { h: n.getHours(), m: n.getMinutes() }
-    }
-    const d = new Date(v)
-    return { h: d.getHours(), m: d.getMinutes() }
-  }
-
-  let hours = $state(0)
-  let minutes = $state(0)
-  let sel = $state<'hour' | 'minute'>('hour')
-  let seeded = false
-  let lastKey = '￿'
-  $effect(() => {
-    const { h, m } = parseValue(value)
-    const key = `${h}:${m}`
-    if (key !== lastKey) {
-      lastKey = key
-      hours = h
-      minutes = m
-      if (!seeded) { seeded = true; sel = selection }
-    }
-  })
-
-  const displayHour = $derived(is12 ? (hours % 12 === 0 ? 12 : hours % 12) : hours)
-  const isPm = $derived(hours >= 12)
-  const mm = $derived(String(minutes).padStart(2, '0'))
-
-  // --- Dial geometry ---
-  const SIZE = 240
-  const C = SIZE / 2
-  const OUTER = C - 22
-  const INNER = C - 58
-
-  function pointAt(angleDeg: number, r: number) {
-    const rad = ((angleDeg - 90) * Math.PI) / 180
-    return { x: C + r * Math.cos(rad), y: C + r * Math.sin(rad) }
-  }
-
-  type Tick = { label: string; x: number; y: number; value: number; ring: 'outer' | 'inner' }
-
-  const hourTicks = $derived.by<Tick[]>(() => {
-    const ticks: Tick[] = []
-    if (is12) {
-      for (let i = 0; i < 12; i++) {
-        const h = i === 0 ? 12 : i
-        const p = pointAt(i * 30, OUTER)
-        ticks.push({ label: String(h), x: p.x, y: p.y, value: h, ring: 'outer' })
-      }
-    } else {
-      for (let i = 0; i < 12; i++) {
-        const outer = pointAt(i * 30, OUTER) // 12..23
-        const inner = pointAt(i * 30, INNER) // 00..11
-        const ho = i + 12
-        const hi = i
-        ticks.push({ label: String(ho).padStart(2, '0'), x: outer.x, y: outer.y, value: ho, ring: 'outer' })
-        ticks.push({ label: hi === 0 ? '00' : String(hi).padStart(2, '0'), x: inner.x, y: inner.y, value: hi, ring: 'inner' })
-      }
-    }
-    return ticks
+  // The headless core owns all state, geometry, keyboard + ARIA. Reactive inputs
+  // are getters; callbacks are closures.
+  const tp = createTimePicker({
+    value: () => value,
+    onChange: (d) => onChange?.(d),
+    format: () => format,
+    minuteInterval: () => minuteInterval,
+    autoSwitchToMinutes: () => autoSwitchToMinutes,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    selection: () => selection,
   })
 
-  const minuteTicks = $derived.by<Tick[]>(() =>
-    Array.from({ length: 12 }, (_, i) => {
-      const v = i * 5
-      const p = pointAt(i * 30, OUTER)
-      return { label: String(v).padStart(2, '0'), x: p.x, y: p.y, value: v, ring: 'outer' as const }
-    }),
-  )
-
-  // Hand endpoint for the current selection.
-  const handAngle = $derived(
-    sel === 'hour'
-      ? (is12 ? (displayHour % 12) * 30 : (hours % 12) * 30)
-      : minutes * 6,
-  )
-  const handRadius = $derived(sel === 'hour' && !is12 && hours % 12 === hours && hours < 12 ? INNER : OUTER)
-  const handEnd = $derived(pointAt(handAngle, handRadius))
-
-  // --- Emit ---
-  function emit() {
-    const d = new Date()
-    d.setHours(hours, minutes, 0, 0)
-    onChange?.(d)
-  }
-
-  function setHourFromDisplay(h12OrH: number, ring: 'outer' | 'inner') {
-    if (is12) {
-      // Preserve AM/PM.
-      const base = h12OrH % 12
-      hours = isPm ? base + 12 : base
-    } else {
-      hours = ring === 'inner' ? h12OrH : h12OrH
-    }
-    lastKey = `${hours}:${minutes}`
-    emit()
-    if (autoSwitchToMinutes) sel = 'minute'
-  }
-
-  function snap(m: number) {
-    const step = Math.max(1, Math.floor(minuteInterval))
-    return (Math.round(m / step) * step) % 60
-  }
-
-  function setMinute(m: number) {
-    minutes = snap(m)
-    lastKey = `${hours}:${minutes}`
-    emit()
-  }
-
-  function setAmPm(pm: boolean) {
-    if (pm === isPm) return
-    hours = pm ? (hours % 12) + 12 : hours % 12
-    lastKey = `${hours}:${minutes}`
-    emit()
-  }
-
-  // --- Pointer drag on the dial ---
+  // --- Pointer drag on the dial (DOM-bound; stays in the component) -----------
+  // The core exposes SIZE/C + a pure `pointerSelect(angle, dist)`; here we only
+  // turn a pointer event into that angle via the live element rect.
   let dialEl: SVGSVGElement | null = null
   let dragging = false
 
   function angleFromEvent(e: PointerEvent): { angle: number; dist: number } {
     const rect = dialEl!.getBoundingClientRect()
-    const scale = SIZE / rect.width
-    const x = (e.clientX - rect.left) * scale - C
-    const y = (e.clientY - rect.top) * scale - C
+    const scale = tp.SIZE / rect.width
+    const x = (e.clientX - rect.left) * scale - tp.C
+    const y = (e.clientY - rect.top) * scale - tp.C
     let deg = (Math.atan2(y, x) * 180) / Math.PI + 90
     if (deg < 0) deg += 360
     return { angle: deg, dist: Math.hypot(x, y) }
   }
 
-  function applyPointer(e: PointerEvent) {
-    if (!isInteractive) return
-    const { angle, dist } = angleFromEvent(e)
-    if (sel === 'hour') {
-      const idx = Math.round(angle / 30) % 12
-      if (is12) {
-        const h = idx === 0 ? 12 : idx
-        const base = h % 12
-        hours = isPm ? base + 12 : base
-      } else {
-        const inner = dist < (OUTER + INNER) / 2
-        hours = inner ? idx : idx + 12
-      }
-      lastKey = `${hours}:${minutes}`
-      emit()
-    } else {
-      const m = Math.round(angle / 6) % 60
-      setMinute(m)
-    }
-  }
-
   function onDialPointerDown(e: PointerEvent) {
-    if (!isInteractive) return
+    if (!tp.isInteractive) return
     dragging = true
     dialEl?.setPointerCapture(e.pointerId)
-    applyPointer(e)
+    const { angle, dist } = angleFromEvent(e)
+    tp.pointerSelect(angle, dist)
   }
   function onDialPointerMove(e: PointerEvent) {
-    if (dragging) applyPointer(e)
+    if (!dragging) return
+    const { angle, dist } = angleFromEvent(e)
+    tp.pointerSelect(angle, dist)
   }
   function onDialPointerUp(e: PointerEvent) {
     if (!dragging) return
     dragging = false
     dialEl?.releasePointerCapture(e.pointerId)
-    if (sel === 'hour' && autoSwitchToMinutes) sel = 'minute'
-  }
-
-  function onKeydown(e: KeyboardEvent) {
-    if (!isInteractive) return
-    const step = sel === 'minute' ? Math.max(1, Math.floor(minuteInterval)) : 1
-    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
-      e.preventDefault()
-      if (sel === 'hour') { hours = (hours + 1) % 24 } else { minutes = (minutes + step) % 60 }
-      lastKey = `${hours}:${minutes}`; emit()
-    } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
-      e.preventDefault()
-      if (sel === 'hour') { hours = (hours + 23) % 24 } else { minutes = (minutes - step + 60) % 60 }
-      lastKey = `${hours}:${minutes}`; emit()
-    } else if (e.key === 'Tab' && !e.shiftKey && sel === 'hour') {
-      sel = 'minute'
-    }
-  }
-
-  function now() {
-    const n = new Date()
-    hours = n.getHours(); minutes = n.getMinutes()
-    lastKey = `${hours}:${minutes}`
-    emit()
-  }
-
-  function isActiveHour(t: Tick): boolean {
-    if (is12) return t.value === displayHour
-    return t.value === hours
+    tp.endPointer()
   }
 </script>
 
 <div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label="Time picker">
   <div class="sv-tp__head">
-    <button type="button" class="sv-tp__seg" class:is-active={sel === 'hour'} onclick={() => (sel = 'hour')} disabled={disabled}>
-      {String(displayHour).padStart(2, '0')}
+    <button class="sv-tp__seg" class:is-active={tp.selection === 'hour'} {...tp.segProps('hour')}>
+      {String(tp.displayHour).padStart(2, '0')}
     </button>
     <span class="sv-tp__colon">:</span>
-    <button type="button" class="sv-tp__seg" class:is-active={sel === 'minute'} onclick={() => (sel = 'minute')} disabled={disabled}>
-      {mm}
+    <button class="sv-tp__seg" class:is-active={tp.selection === 'minute'} {...tp.segProps('minute')}>
+      {tp.mm}
     </button>
-    {#if is12}
+    {#if tp.is12}
       <div class="sv-tp__ampm">
-        <button type="button" class:is-active={!isPm} onclick={() => setAmPm(false)} disabled={disabled}>AM</button>
-        <button type="button" class:is-active={isPm} onclick={() => setAmPm(true)} disabled={disabled}>PM</button>
+        <button class:is-active={!tp.isPm} {...tp.ampmProps(false)}>AM</button>
+        <button class:is-active={tp.isPm} {...tp.ampmProps(true)}>PM</button>
       </div>
     {/if}
   </div>
@@ -265,43 +113,37 @@
   <svg
     bind:this={dialEl}
     class="sv-tp__dial"
-    viewBox={`0 0 ${SIZE} ${SIZE}`}
+    viewBox={`0 0 ${tp.SIZE} ${tp.SIZE}`}
     width="100%"
-    role="slider"
-    tabindex={disabled ? -1 : 0}
-    aria-label={sel === 'hour' ? 'Hour' : 'Minute'}
-    aria-valuenow={sel === 'hour' ? hours : minutes}
-    aria-valuemin="0"
-    aria-valuemax={sel === 'hour' ? 23 : 59}
+    {...tp.dialProps()}
     onpointerdown={onDialPointerDown}
     onpointermove={onDialPointerMove}
     onpointerup={onDialPointerUp}
     onpointercancel={onDialPointerUp}
-    onkeydown={onKeydown}
   >
-    <circle class="sv-tp__face" cx={C} cy={C} r={C - 4} />
+    <circle class="sv-tp__face" cx={tp.C} cy={tp.C} r={tp.C - 4} />
     <!-- hand -->
-    <line class="sv-tp__hand" x1={C} y1={C} x2={handEnd.x} y2={handEnd.y} />
-    <circle class="sv-tp__hub" cx={C} cy={C} r="3" />
-    <circle class="sv-tp__knob" cx={handEnd.x} cy={handEnd.y} r="15" />
-    {#if sel === 'hour'}
-      {#each hourTicks as t (t.ring + '-' + t.value)}
-        <text class="sv-tp__num" class:is-active={isActiveHour(t)} class:is-inner={t.ring === 'inner'} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+    <line class="sv-tp__hand" x1={tp.C} y1={tp.C} x2={tp.handEnd.x} y2={tp.handEnd.y} />
+    <circle class="sv-tp__hub" cx={tp.C} cy={tp.C} r="3" />
+    <circle class="sv-tp__knob" cx={tp.handEnd.x} cy={tp.handEnd.y} r="15" />
+    {#if tp.selection === 'hour'}
+      {#each tp.hourTicks as t (t.ring + '-' + t.value)}
+        <text class="sv-tp__num" class:is-active={tp.isActiveHour(t)} class:is-inner={t.ring === 'inner'} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
       {/each}
     {:else}
-      {#each minuteTicks as t (t.value)}
-        <text class="sv-tp__num" class:is-active={t.value === minutes} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {#each tp.minuteTicks as t (t.value)}
+        <text class="sv-tp__num" class:is-active={t.value === tp.minutes} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
       {/each}
     {/if}
   </svg>
 
   {#if footer}
     <div class="sv-tp__footer">
-      <button type="button" class="sv-tp__now" onclick={now} disabled={disabled}>Now</button>
+      <button class="sv-tp__now" {...tp.nowProps()}>Now</button>
     </div>
   {/if}
 
-  {#if name}<input type="hidden" {name} value={`${String(hours).padStart(2, '0')}:${mm}`} />{/if}
+  {#if name}<input type="hidden" {name} value={`${String(tp.hours).padStart(2, '0')}:${tp.mm}`} />{/if}
 </div>
 
 <style>

package/src/SvToggleButton.svelte

@@ -4,6 +4,7 @@
    * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
    */
   import type { Snippet } from 'svelte'
+  import { createToggle } from './createToggle.svelte'
 
   type Props = {
     pressed?: boolean
@@ -16,20 +17,19 @@
 
   let { pressed = false, onChange, disabled = false, size = 'md', ariaLabel, children }: Props = $props()
 
-  function toggle() {
-    if (disabled) return
-    onChange?.(!pressed)
-  }
+  // The styled toggle is just a renderer over the headless core.
+  const t = createToggle({
+    pressed: () => pressed,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+  })
 </script>
 
 <button
-  type="button"
   class="sv-toggle sv-toggle--{size}"
   class:is-pressed={pressed}
-  aria-pressed={pressed}
-  aria-label={ariaLabel}
-  {disabled}
-  onclick={toggle}
+  {...t.buttonProps()}
 >
   {#if children}{@render children()}{/if}
 </button>

package/src/SvTree.svelte

@@ -1,10 +1,5 @@
 <script lang="ts" module>
-  export type TreeNode = {
-    id: string
-    label: string
-    children?: TreeNode[]
-    disabled?: boolean
-  }
+  export type { TreeNode } from './createTree.svelte'
 </script>
 
 <script lang="ts">
@@ -12,8 +7,12 @@
    * SvTree - a WAI-ARIA tree view. Expand/collapse, single-select highlight, and
    * optional cascading tri-state checkboxes. Parity: Smart `smart-tree`. Keyboard:
    * up/down move, left collapse/parent, right expand/child, Enter/Space select.
-   * The visible tree is flattened so roving-focus keyboard nav stays simple.
+   *
+   * The behavior (flattening, cascade math, keyboard, ARIA) lives in the headless
+   * `createTree` core; this component is just one styled renderer over it.
    */
+  import { createTree, type TreeNode } from './createTree.svelte'
+
   type Props = {
     nodes: ReadonlyArray<TreeNode>
     /** Selected node id (single-select highlight). */
@@ -41,117 +40,39 @@
     ariaLabel,
   }: Props = $props()
 
-  // Internal expanded set, seeded from the prop once (then self-managed unless
-  // the prop identity changes).
-  let expanded = $state<Set<string>>(new Set())
-  let seededExp = false
-  $effect(() => {
-    if (!seededExp) { seededExp = true; if (expandedIds) expanded = new Set(expandedIds) }
+  const tree = createTree({
+    nodes: () => nodes,
+    selected: () => selected,
+    onSelect: (id) => onSelect?.(id),
+    expandedIds: () => expandedIds,
+    onToggle: (id, exp) => onToggle?.(id, exp),
+    checkable: () => checkable,
+    checked: () => checked,
+    onCheck: (ids) => onCheck?.(ids),
+    ariaLabel: () => ariaLabel,
   })
 
-  type Flat = { node: TreeNode; depth: number; hasChildren: boolean; open: boolean; parentId: string | null }
-
-  const flat = $derived.by<Flat[]>(() => {
-    const out: Flat[] = []
-    const walk = (list: ReadonlyArray<TreeNode>, depth: number, parentId: string | null) => {
-      for (const node of list) {
-        const hasChildren = !!node.children?.length
-        const open = expanded.has(node.id)
-        out.push({ node, depth, hasChildren, open, parentId })
-        if (hasChildren && open) walk(node.children!, depth + 1, node.id)
-      }
+  // DOM focus movement is a render concern: follow the core's roving focus row.
+  let treeEl: HTMLDivElement | null = null
+  let lastFocusTick = 0
+  $effect(() => {
+    if (tree.focusTick !== lastFocusTick) {
+      lastFocusTick = tree.focusTick
+      const i = tree.activeIndex
+      queueMicrotask(() => treeEl?.querySelector<HTMLElement>(`[data-row="${i}"]`)?.focus())
     }
-    walk(nodes, 0, null)
-    return out
   })
-
-  let active = $state(0)
-  $effect(() => { if (active >= flat.length) active = Math.max(0, flat.length - 1) })
-
-  const checkedSet = $derived(new Set(checked))
-
-  function descendantIds(node: TreeNode): string[] {
-    const ids: string[] = []
-    const walk = (n: TreeNode) => { for (const c of n.children ?? []) { ids.push(c.id); walk(c) } }
-    walk(node)
-    return ids
-  }
-  function checkState(node: TreeNode): 'checked' | 'indeterminate' | 'unchecked' {
-    if (!node.children?.length) return checkedSet.has(node.id) ? 'checked' : 'unchecked'
-    const desc = descendantIds(node)
-    const on = desc.filter((id) => checkedSet.has(id)).length
-    if (on === 0 && !checkedSet.has(node.id)) return 'unchecked'
-    if (on === desc.length) return 'checked'
-    return 'indeterminate'
-  }
-
-  function toggleExpand(node: TreeNode) {
-    if (!node.children?.length) return
-    const next = new Set(expanded)
-    const willOpen = !next.has(node.id)
-    willOpen ? next.add(node.id) : next.delete(node.id)
-    expanded = next
-    onToggle?.(node.id, willOpen)
-  }
-  function select(node: TreeNode) {
-    if (node.disabled) return
-    onSelect?.(node.id)
-  }
-  function toggleCheck(node: TreeNode) {
-    if (node.disabled) return
-    const next = new Set(checkedSet)
-    const ids = [node.id, ...descendantIds(node)]
-    const currentlyOn = checkState(node) === 'checked'
-    for (const id of ids) currentlyOn ? next.delete(id) : next.add(id)
-    onCheck?.([...next])
-  }
-
-  function onKeydown(e: KeyboardEvent) {
-    const item = flat[active]
-    if (!item) return
-    switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); active = Math.min(active + 1, flat.length - 1); focusActive(); break
-      case 'ArrowUp': e.preventDefault(); active = Math.max(active - 1, 0); focusActive(); break
-      case 'ArrowRight':
-        e.preventDefault()
-        if (item.hasChildren && !item.open) toggleExpand(item.node)
-        else if (item.hasChildren && item.open) { active = Math.min(active + 1, flat.length - 1); focusActive() }
-        break
-      case 'ArrowLeft':
-        e.preventDefault()
-        if (item.hasChildren && item.open) toggleExpand(item.node)
-        else if (item.parentId) { const pi = flat.findIndex((f) => f.node.id === item.parentId); if (pi >= 0) { active = pi; focusActive() } }
-        break
-      case 'Enter': e.preventDefault(); select(item.node); break
-      case ' ': e.preventDefault(); checkable ? toggleCheck(item.node) : select(item.node); break
-      case 'Home': e.preventDefault(); active = 0; focusActive(); break
-      case 'End': e.preventDefault(); active = flat.length - 1; focusActive(); break
-    }
-  }
-
-  let treeEl: HTMLDivElement | null = null
-  function focusActive() {
-    queueMicrotask(() => treeEl?.querySelector<HTMLElement>(`[data-row="${active}"]`)?.focus())
-  }
 </script>
 
-<div bind:this={treeEl} class="sv-tree" role="tree" aria-label={ariaLabel} aria-multiselectable={checkable}>
-  {#each flat as item, i (item.node.id)}
-    {@const cs = checkable ? checkState(item.node) : 'unchecked'}
+<div bind:this={treeEl} class="sv-tree" {...tree.treeProps()}>
+  {#each tree.rows as item (item.node.id)}
+    {@const cs = checkable ? tree.checkStateOf(item.node) : 'unchecked'}
     <div
       class="sv-tree__row"
       class:is-selected={item.node.id === selected}
       class:is-disabled={item.node.disabled}
-      role="treeitem"
-      aria-level={item.depth + 1}
-      aria-selected={item.node.id === selected}
-      aria-expanded={item.hasChildren ? item.open : undefined}
-      aria-checked={checkable ? cs === 'checked' ? 'true' : cs === 'indeterminate' ? 'mixed' : 'false' : undefined}
-      data-row={i}
-      tabindex={i === active ? 0 : -1}
       style:padding-left={`${item.depth * 18 + 6}px`}
-      onclick={() => { active = i; select(item.node) }}
-      onkeydown={onKeydown}
+      {...tree.itemProps(item)}
     >
       <button
         type="button"
@@ -160,14 +81,14 @@
         class:is-leaf={!item.hasChildren}
         tabindex="-1"
         aria-hidden={!item.hasChildren}
-        onclick={(e) => { e.stopPropagation(); toggleExpand(item.node) }}
+        onclick={(e) => { e.stopPropagation(); tree.toggleExpand(item.node) }}
       >
         {#if item.hasChildren}
           <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
         {/if}
       </button>
       {#if checkable}
-        <button type="button" class="sv-tree__check is-{cs}" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); toggleCheck(item.node) }}>
+        <button type="button" class="sv-tree__check is-{cs}" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); tree.toggleCheck(item.node) }}>
           {#if cs === 'checked'}<svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
           {:else if cs === 'indeterminate'}<svg viewBox="0 0 16 16"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>{/if}
         </button>

package/src/createAutocomplete.svelte.ts

@@ -0,0 +1,104 @@
+/**
+ * createAutocomplete - the HEADLESS core behind <SvAutoComplete>: a free-text
+ * field with a live-filtered suggestion list (accepts ANY typed value; the
+ * suggestions are shortcuts). Roving active index + keyboard, exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles/DOM/portal - those
+ * stay in the styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createAutocomplete } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const ac = createAutocomplete({ value: () => value, suggestions: () => list, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...ac.inputProps()} />
+ * {#if ac.open}
+ *   <ul {...ac.listboxProps()}>
+ *     {#each ac.filtered as opt, i (opt.value)}<li {...ac.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { filterOptions, type ListOption } from './list-option'
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type AutocompleteConfig = {
+  value: () => string
+  onChange?: (value: string) => void
+  /** Suggestions - strings or {value,label} (label shown, value inserted). */
+  suggestions: () => ReadonlyArray<string | ListOption>
+  minChars?: () => number
+  disabled?: () => boolean
+  ariaLabel?: () => string | undefined
+  /** DOM focus hook provided by the renderer; the core never touches the DOM. */
+  focusInput?: () => void
+}
+
+export function createAutocomplete(config: AutocompleteConfig) {
+  const minChars = () => config.minChars?.() ?? 1
+
+  let open = $state(false)
+  let active = $state(0)
+
+  const asOptions = $derived<ListOption[]>(
+    config.suggestions().map((s) => (typeof s === 'string' ? { value: s, label: s } : s)),
+  )
+  const filtered = $derived(config.value().length >= minChars() ? filterOptions(asOptions, config.value()).slice(0, 10) : [])
+
+  function maybeOpen() { open = filtered.length > 0; if (open) active = 0 }
+  function pick(o: ListOption | undefined) { if (!o) return; config.onChange?.(String(o.value)); open = false; config.focusInput?.() }
+  function close() { open = false }
+  function onInput(e: Event) { config.onChange?.((e.currentTarget as HTMLInputElement).value); queueMicrotask(maybeOpen) }
+  function onKeydown(e: KeyboardEvent) {
+    if (!open) { if (e.key === 'ArrowDown') { queueMicrotask(maybeOpen) } return }
+    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, filtered.length - 1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0) }
+    else if (e.key === 'Enter') { e.preventDefault(); pick(filtered[active]) }
+    else if (e.key === 'Escape') { close() }
+  }
+
+  return {
+    /** Panel open state. */
+    get open() { return open },
+    /** Highlighted suggestion index into `filtered`. */
+    get activeIndex() { return active },
+    /** Suggestions after the live substring filter (capped at 10). */
+    get filtered() { return filtered },
+    /** Controlled text value. */
+    get value() { return config.value() },
+    isActive: (i: number) => i === active,
+    setActive: (i: number) => { active = i },
+    maybeOpen,
+    close,
+    pick,
+    onInput,
+    onKeydown,
+    /** Spread onto the text <input>. */
+    inputProps: () => ({
+      role: 'combobox' as const,
+      'aria-expanded': open,
+      'aria-autocomplete': 'list' as const,
+      'aria-label': config.ariaLabel?.(),
+      value: config.value(),
+      disabled: config.disabled?.() ?? false,
+      oninput: onInput,
+      onfocus: maybeOpen,
+      onkeydown: onKeydown,
+    }),
+    /** Spread onto the listbox container. */
+    listboxProps: () => ({
+      role: 'listbox' as const,
+    }),
+    /** Spread onto the suggestion at `index` (index into `filtered`). */
+    optionProps: (index: number) => ({
+      role: 'option' as const,
+      tabindex: -1,
+      'aria-selected': index === active,
+      'data-idx': index,
+      onclick: () => pick(filtered[index]),
+      onpointermove: () => { active = index },
+    }),
+  }
+}
+
+export type Autocomplete = ReturnType<typeof createAutocomplete>