@svgrid/grid 1.2.23 → 1.2.25

package/dist/SvTagsInput.svelte

@@ -3,7 +3,12 @@
    * SvTagsInput - editable token/chips input. Type + Enter/comma to add,
    * Backspace to remove the last, click × to remove a chip. Parity: Smart
    * `smart-tags` / `smart-input` token mode. Emits string[].
+   *
+   * One styled renderer over the headless `createTagsInput` core (draft +
+   * add/remove + keyboard).
    */
+  import { createTagsInput } from './createTagsInput.svelte'
+
   type Props = {
     value?: string[]
     onChange?: (tags: string[]) => void
@@ -18,45 +23,29 @@
 
   let { value = [], onChange, placeholder = 'Add tag…', disabled = false, unique = true, max = Infinity, name, ariaLabel }: Props = $props()
 
-  let draft = $state('')
-
-  function add(raw: string) {
-    const tag = raw.trim()
-    if (!tag || disabled) return
-    if (value.length >= max) return
-    if (unique && value.includes(tag)) { draft = ''; return }
-    onChange?.([...value, tag])
-    draft = ''
-  }
-  function removeAt(i: number) {
-    if (disabled) return
-    onChange?.(value.filter((_, idx) => idx !== i))
-  }
-  function onKeydown(e: KeyboardEvent) {
-    if (disabled) return
-    if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(draft) }
-    else if (e.key === 'Backspace' && draft === '' && value.length) { removeAt(value.length - 1) }
-  }
+  const ti = createTagsInput({
+    value: () => value,
+    onChange: (t) => onChange?.(t),
+    disabled: () => disabled,
+    unique: () => unique,
+    max: () => max,
+    ariaLabel: () => ariaLabel,
+  })
 </script>
 
-<div class="sv-tags" class:is-disabled={disabled} role="group" aria-label={ariaLabel}>
+<div class="sv-tags" class:is-disabled={disabled} {...ti.rootProps()}>
   {#each value as tag, i (tag + i)}
-    <span class="sv-tags__chip">
+    <span class="sv-tags__chip" {...ti.tagProps(i)}>
       <span class="sv-tags__label">{tag}</span>
       {#if !disabled}
-        <button type="button" class="sv-tags__x" aria-label={`Remove ${tag}`} onclick={() => removeAt(i)}>&times;</button>
+        <button class="sv-tags__x" {...ti.removeProps(i)}>&times;</button>
       {/if}
     </span>
   {/each}
   <input
     class="sv-tags__input"
-    type="text"
-    bind:value={draft}
     placeholder={value.length ? '' : placeholder}
-    {disabled}
-    aria-label={ariaLabel ?? 'Add tag'}
-    onkeydown={onKeydown}
-    onblur={() => add(draft)}
+    {...ti.inputProps()}
   />
   {#if name}<input type="hidden" {name} value={value.join(',')} />{/if}
 </div>

package/dist/SvTagsInput.svelte.d.ts

@@ -1,8 +1,3 @@
-/**
- * SvTagsInput - editable token/chips input. Type + Enter/comma to add,
- * Backspace to remove the last, click × to remove a chip. Parity: Smart
- * `smart-tags` / `smart-input` token mode. Emits string[].
- */
 type Props = {
     value?: string[];
     onChange?: (tags: string[]) => void;

package/dist/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/dist/SvTimePicker.svelte.d.ts

@@ -1,16 +1,19 @@
-export type TimeValue = Date | string | number | null;
+export type { TimeValue } from './createTimePicker.svelte';
 /**
- * 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.
- * All visuals come from `--sg-*` tokens so every theme applies for free.
- */
+   * SvTimePicker - an analog clock-dial time picker (parity: Smart
+   * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
+   * 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 { 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;
@@ -20,7 +23,7 @@ type Props = {
     readonly?: boolean;
     name?: string;
     /** Which dial opens first. */
-    selection?: 'hour' | 'minute';
+    selection?: TimeSelection;
 };
 declare const SvTimePicker: import("svelte").Component<Props, {}, "">;
 type SvTimePicker = ReturnType<typeof SvTimePicker>;

package/dist/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>