@svgrid/grid 1.2.34 → 2.0.1

package/src/createPasswordInput.svelte.ts

@@ -15,6 +15,7 @@
  *
  * The styled <SvPasswordInput> is just one renderer over this core.
  */
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export const STRENGTH_LABELS = ['', 'Weak', 'Fair', 'Good', 'Strong']
 
@@ -36,8 +37,21 @@ export type PasswordInputConfig = {
   placeholder?: () => string | undefined
   disabled?: () => boolean
   readonly?: () => boolean
-  ariaLabel?: () => string | undefined
   autocomplete?: () => string | undefined
+  // Localizable strings (fall back to the built-in English defaults).
+  /** Accessible label for the reveal toggle when the value is hidden. */
+  showLabel?: () => string | undefined
+  /** Accessible label for the reveal toggle when the value is shown. */
+  hideLabel?: () => string | undefined
+  /** Strength labels indexed 0-4 (index 0 unused; 1..4 = weak..strong). */
+  strengthLabels?: () => readonly string[]
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
+  ariaLabel?: () => string | undefined
 }
 
 export function createPasswordInput(config: PasswordInputConfig) {
@@ -53,29 +67,41 @@ export function createPasswordInput(config: PasswordInputConfig) {
   }
   const toggle = () => (revealed = !revealed)
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     /** Whether the value is currently shown as plain text. */
     get revealed() { return revealed },
     /** Strength score, 0-4. */
     get strength() { return strength },
-    /** Human label for the strength score. */
-    get strengthLabel() { return STRENGTH_LABELS[strength] },
+    /** Human label for the strength score (localizable via `strengthLabels`). */
+    get strengthLabel() { return (config.strengthLabels?.() ?? STRENGTH_LABELS)[strength] },
     toggle,
     /** Spread onto the text/password input element. */
     inputProps: () => ({
+      id: config.id?.(),
       value: config.value(),
       type: (revealed ? 'text' : 'password') as 'text' | 'password',
       placeholder: config.placeholder?.(),
       disabled: disabled(),
       readonly: readonly(),
       autocomplete: (config.autocomplete?.() ?? 'current-password') as AutoFill,
-      'aria-label': config.ariaLabel?.(),
+      ...editorAria(ariaState()),
       oninput: onInput,
     }),
     /** Spread onto the reveal (show/hide) toggle button. */
     toggleProps: () => ({
       type: 'button' as const,
-      'aria-label': revealed ? 'Hide password' : 'Show password',
+      'aria-label': revealed
+        ? (config.hideLabel?.() ?? 'Hide password')
+        : (config.showLabel?.() ?? 'Show password'),
       'aria-pressed': revealed,
       disabled: disabled(),
       tabindex: -1,

package/src/createPhoneInput.svelte.ts

@@ -17,18 +17,30 @@
  *
  * The styled <SvPhoneInput> is just one renderer over this core.
  */
-import { COUNTRIES, COUNTRY_BY_CODE, flagEmoji } from './countries'
+import { COUNTRIES, COUNTRY_BY_CODE, flagEmoji, phoneDigitsValid } from './countries'
 import { applyMask } from './datetime/mask'
+import { editorAria, type EditorAriaState } from './editor-contract'
+
+/** Emitted alongside the phone value: parsed parts + per-country validity. */
+export type PhoneParts = { country: string; dial: string; national: string; valid: boolean; complete: boolean }
 
 /** Reactive inputs are passed as getters so the core tracks live prop changes. */
 export type PhoneInputConfig = {
   value: () => string
-  onChange?: (value: string, parts: { country: string; dial: string; national: string }) => void
+  onChange?: (value: string, parts: PhoneParts) => void
   /** Default country ISO code. */
   country?: () => string
   disabled?: () => boolean
   readonly?: () => boolean
   placeholder?: () => string | undefined
+  /** Accessible name for the country `<select>` (localizable). */
+  countryLabel?: () => string | undefined
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
   ariaLabel?: () => string | undefined
 }
 
@@ -69,8 +81,13 @@ export function createPhoneInput(config: PhoneInputConfig) {
     }
   })
 
+  // Per-country length validity: empty is valid (required handles emptiness);
+  // a non-empty number must match the country's expected national length.
+  const complete = $derived(national.length > 0 && phoneDigitsValid(iso, national))
+  const valid = $derived(national.length === 0 || phoneDigitsValid(iso, national))
+
   function emit() {
-    config.onChange?.(`${dial}${national}`, { country: iso, dial, national })
+    config.onChange?.(`${dial}${national}`, { country: iso, dial, national, valid, complete })
   }
   function onNumberInput(e: Event) {
     const raw = (e.currentTarget as HTMLInputElement).value.replace(/\D/g, '')
@@ -84,6 +101,15 @@ export function createPhoneInput(config: PhoneInputConfig) {
     emit()
   }
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     /** Selected country ISO code. */
     get iso() { return iso },
@@ -95,21 +121,29 @@ export function createPhoneInput(config: PhoneInputConfig) {
     get displayNational() { return displayNational },
     /** The full emitted value (`+<dial><digits>`). */
     get value() { return `${dial}${national}` },
+    /** Whether the national number is a plausible length for the country. */
+    get valid() { return valid },
+    /** Whether a non-empty number matches the country's expected length. */
+    get complete() { return complete },
     /** Spread onto the country `<select>` element. */
     selectProps: () => ({
       value: iso,
       disabled: disabled(),
-      'aria-label': 'Country',
+      'aria-label': config.countryLabel?.() ?? 'Country',
       onchange: onCountryChange,
     }),
     /** Spread onto the national number input element. */
     inputProps: () => ({
+      id: config.id?.(),
       value: displayNational,
       type: 'tel' as const,
       inputmode: 'tel' as const,
       placeholder: config.placeholder?.() ?? 'Phone number',
       disabled: disabled(),
       readonly: readonly(),
+      // aria-invalid/required/describedby come from the editor contract; the
+      // aria-label default stays 'Phone number' so the field is always named.
+      ...editorAria(ariaState()),
       'aria-label': config.ariaLabel?.() ?? 'Phone number',
       oninput: onNumberInput,
     }),

package/src/createPopoverSelect.svelte.ts

@@ -0,0 +1,208 @@
+/**
+ * createPopoverSelect - the shared HEADLESS engine behind the kit's dropdown
+ * selects (SvMultiSelect, SvTreeSelect, SvGridSelect and any future one). It
+ * owns the parts every anchored-panel select repeats: open/close state, the
+ * `anchoredRect` positioning (reposition on scroll/resize), outside/Escape
+ * dismissal via the shared layer stack, a roving `active` index over the visible
+ * items, the WAI-ARIA combobox wiring (`aria-expanded` / `aria-controls` /
+ * `aria-activedescendant` + stable option ids), and focus management (focus
+ * moves into the panel on open, back to the trigger on close).
+ *
+ * The component owns its own `bind:this` refs and item rendering; it passes the
+ * refs in as getters and spreads the returned prop-getters onto its trigger,
+ * panel and items. Runes-based, like `createListbox`.
+ */
+import { anchoredRect, type AnchoredRect } from './popover'
+import { createDismissableLayer } from './a11y/dismissable'
+
+let uidSeq = 0
+
+export type PopoverSelectConfig = {
+  /** Number of currently-visible/navigable items (post-filter). */
+  itemCount: () => number
+  /** Whether item `i` is disabled (skipped by roving, not selectable). */
+  disabled?: (index: number) => boolean
+  /** Commit the item at `index` (Enter or a click the component forwards). */
+  onSelect: (index: number) => void
+  /** Notified whenever the open state changes. */
+  onOpenChange?: (open: boolean) => void
+  /** The trigger element (component owns `bind:this`, passes a getter). */
+  getTrigger: () => HTMLElement | null
+  /** The panel element. */
+  getPanel: () => HTMLElement | null
+  /** Element focused when the panel opens (e.g. a search input). Defaults to the
+   *  panel itself. Its id-holder also carries `aria-activedescendant`. */
+  getInitialFocus?: () => HTMLElement | null
+  /** Estimated panel height, for the flip-up decision. Default 280. */
+  estimatedHeight?: () => number
+  /** Minimum panel width. Default 200. */
+  minWidth?: () => number
+  /** Close after a selection (single-select). Default true. */
+  closeOnSelect?: () => boolean
+  /** Active index to start on when opening (e.g. the selected row). Default 0. */
+  initialActive?: () => number
+  /** Handle a key the core doesn't (e.g. tree ArrowLeft/Right). Return true if
+   *  handled to stop the core's default handling. */
+  onExtraKey?: (event: KeyboardEvent, active: number) => boolean
+  idPrefix?: string
+}
+
+export function createPopoverSelect(config: PopoverSelectConfig) {
+  const id = `${config.idPrefix ?? 'sv-pop'}-${uidSeq++}`
+  const panelId = `${id}-panel`
+  const optionId = (i: number) => `${id}-opt-${i}`
+
+  let open = $state(false)
+  let active = $state(0)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  const count = () => config.itemCount()
+  const isDisabled = (i: number) => config.disabled?.(i) ?? false
+
+  function enabledIndices(): number[] {
+    const out: number[] = []
+    const n = count()
+    for (let i = 0; i < n; i++) if (!isDisabled(i)) out.push(i)
+    return out
+  }
+  function clampActive(i: number): number {
+    const n = count()
+    return n <= 0 ? 0 : Math.max(0, Math.min(i, n - 1))
+  }
+
+  function setOpen(v: boolean) {
+    if (v === open) return
+    open = v
+    config.onOpenChange?.(v)
+  }
+  function openPanel() {
+    active = clampActive(config.initialActive?.() ?? 0)
+    setOpen(true)
+  }
+  function closePanel() {
+    setOpen(false)
+    config.getTrigger()?.focus()
+  }
+  function toggle() {
+    open ? setOpen(false) : openPanel()
+  }
+
+  function move(delta: number) {
+    const list = enabledIndices()
+    if (!list.length) return
+    const pos = list.indexOf(active)
+    active = list[(pos + delta + list.length) % list.length] ?? list[0]!
+  }
+  function first() { active = enabledIndices()[0] ?? 0 }
+  function last() { active = enabledIndices().at(-1) ?? 0 }
+  function selectActive() {
+    if (count() === 0 || isDisabled(active)) return
+    config.onSelect(active)
+    if (config.closeOnSelect?.() ?? true) closePanel()
+  }
+
+  function updatePos() {
+    const t = config.getTrigger()
+    if (!t) return
+    rect = anchoredRect(t.getBoundingClientRect(), {
+      estimatedHeight: config.estimatedHeight?.() ?? 280,
+      minWidth: config.minWidth?.() ?? 200,
+    })
+  }
+
+  // While open: position, focus into the panel, reposition on scroll/resize, and
+  // register a dismissable layer (Escape / outside-click, top-of-stack first).
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const initial = config.getInitialFocus?.() ?? config.getPanel()
+    queueMicrotask(() => initial?.focus())
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    const layer = createDismissableLayer({
+      element: () => [config.getTrigger(), config.getPanel()],
+      onDismiss: () => setOpen(false),
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+
+  function onTriggerKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      openPanel()
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      openPanel()
+      last()
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+    }
+  }
+  function onPanelKeydown(e: KeyboardEvent) {
+    if (config.onExtraKey?.(e, active)) return
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); move(1); break
+      case 'ArrowUp': e.preventDefault(); move(-1); break
+      case 'Home': e.preventDefault(); first(); break
+      case 'End': e.preventDefault(); last(); break
+      case 'Enter': e.preventDefault(); selectActive(); break
+      case 'Escape': e.preventDefault(); closePanel(); break
+      case 'Tab': setOpen(false); break
+    }
+  }
+
+  /** The current active-descendant id (for the focused element), or undefined. */
+  const activeDescendant = () => (open && count() > 0 ? optionId(active) : undefined)
+
+  return {
+    get open() { return open },
+    set open(v: boolean) { setOpen(v) },
+    get active() { return active },
+    set active(i: number) { active = clampActive(i) },
+    get rect() { return rect },
+    /** Stable id of the panel element (for aria-controls / labelling). */
+    panelId,
+    /** Stable id of the option at `i` (for aria-activedescendant + item id). */
+    optionId,
+    activeDescendant,
+    openPanel,
+    closePanel,
+    toggle,
+    move,
+    first,
+    last,
+    selectActive,
+    updatePos,
+    onPanelKeydown,
+    /** True when item `i` is the roving-active one. */
+    isActive: (i: number) => i === active,
+    /** Spread onto the trigger button. */
+    triggerProps: () => ({
+      'aria-haspopup': 'listbox' as const,
+      'aria-expanded': open,
+      'aria-controls': open ? panelId : undefined,
+      onkeydown: onTriggerKeydown,
+    }),
+    /** Attributes for the element that OWNS focus + activedescendant (the panel,
+     *  or a search input). Pass the ARIA role the panel should expose. */
+    focusOwnerProps: (role: 'listbox' | 'tree' | 'grid' = 'listbox') => ({
+      role,
+      'aria-activedescendant': activeDescendant(),
+      onkeydown: onPanelKeydown,
+    }),
+    /** Spread onto the item element at `i`. */
+    itemProps: (i: number) => ({
+      id: optionId(i),
+      'data-active': i === active ? '' : undefined,
+      onpointermove: () => { if (!isDisabled(i)) active = i },
+    }),
+  }
+}
+
+export type PopoverSelect = ReturnType<typeof createPopoverSelect>

package/src/createRadioGroup.svelte.ts

@@ -21,6 +21,8 @@
  */
 export type RadioOption = { value: string | number; label: string; disabled?: boolean }
 
+import { editorAria, type EditorAriaState } from './editor-contract'
+
 /** Reactive inputs are passed as getters so the core tracks live prop changes. */
 export type RadioGroupConfig = {
   options: () => ReadonlyArray<RadioOption>
@@ -28,6 +30,12 @@ export type RadioGroupConfig = {
   onChange?: (value: string | number) => void
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
+  // Editor contract (ARIA + validation) - folded into groupProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
 }
 
 export type RadioProps = {
@@ -43,7 +51,11 @@ export type RadioProps = {
 
 export type RadioGroupProps = {
   role: 'radiogroup'
+  id: string | undefined
   'aria-label': string | undefined
+  'aria-invalid': 'true' | undefined
+  'aria-required': 'true' | undefined
+  'aria-describedby': string | undefined
   'aria-disabled': boolean
   onkeydown: (e: KeyboardEvent) => void
 }
@@ -102,6 +114,15 @@ export function createRadioGroup(config: RadioGroupConfig): RadioGroup {
     container.querySelectorAll<HTMLElement>('[role="radio"]')[target]?.focus()
   }
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     get value() { return config.value() },
     get disabled() { return disabled() },
@@ -110,8 +131,9 @@ export function createRadioGroup(config: RadioGroupConfig): RadioGroup {
     onKeydown,
     groupProps: () => ({
       role: 'radiogroup',
-      'aria-label': config.ariaLabel?.(),
+      id: config.id?.(),
       'aria-disabled': disabled(),
+      ...editorAria(ariaState()),
       onkeydown: onKeydown,
     }),
     radioProps: (option: RadioOption) => {

package/src/createRating.svelte.ts

@@ -19,6 +19,8 @@
  */
 export type RatingFill = 'full' | 'half' | 'empty'
 
+import { editorAria, type EditorAriaState } from './editor-contract'
+
 /** Reactive inputs are passed as getters so the core tracks live prop changes. */
 export type RatingConfig = {
   value: () => number
@@ -28,12 +30,24 @@ export type RatingConfig = {
   readonly?: () => boolean
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
+  /** Accessible label for a star given its 1-based position (localizable). */
+  starLabel?: (position: number) => string | undefined
+  // Editor contract (ARIA + validation) - folded into rootProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
 }
 
 export type RatingRootProps = {
   role: 'slider'
+  id: string | undefined
   tabindex: number
   'aria-label': string
+  'aria-invalid': 'true' | undefined
+  'aria-required': 'true' | undefined
+  'aria-describedby': string | undefined
   'aria-valuenow': number
   'aria-valuemin': number
   'aria-valuemax': number
@@ -112,6 +126,15 @@ export function createRating(config: RatingConfig): Rating {
     else if (e.key === 'End') { e.preventDefault(); config.onChange?.(max()) }
   }
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     get value() { return config.value() },
     get preview() { return preview },
@@ -123,7 +146,9 @@ export function createRating(config: RatingConfig): Rating {
     onKeydown,
     rootProps: () => ({
       role: 'slider',
+      id: config.id?.(),
       tabindex: interactive() ? 0 : -1,
+      ...editorAria(ariaState()),
       'aria-label': config.ariaLabel?.() ?? 'Rating',
       'aria-valuenow': config.value(),
       'aria-valuemin': 0,
@@ -136,7 +161,7 @@ export function createRating(config: RatingConfig): Rating {
       type: 'button',
       tabindex: -1,
       disabled: !interactive(),
-      'aria-label': `${index + 1} star${index ? 's' : ''}`,
+      'aria-label': config.starLabel?.(index + 1) ?? `${index + 1} star${index ? 's' : ''}`,
       'data-fill': fillOf(index),
       onpointermove: (e: PointerEvent) => { if (interactive()) hover = valueAt(e, index) },
       onclick: (e: MouseEvent) => { if (interactive()) config.onChange?.(valueAt(e, index)) },

package/src/createSlider.svelte.ts

@@ -35,6 +35,8 @@ export type SliderConfig = {
   orientation?: () => SliderOrientation
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
+  /** Right-to-left: mirrors horizontal pointer + Left/Right key direction. */
+  rtl?: () => boolean
 }
 
 export function createSlider(config: SliderConfig) {
@@ -44,6 +46,7 @@ export function createSlider(config: SliderConfig) {
   const range = () => config.range?.() ?? false
   const isVert = () => (config.orientation?.() ?? 'horizontal') === 'vertical'
   const disabled = () => config.disabled?.() ?? false
+  const rtl = () => config.rtl?.() ?? false
 
   const lo = $derived(range() ? (config.value() as [number, number])[0] : min())
   const hi = $derived(range() ? (config.value() as [number, number])[1] : (config.value() as number))
@@ -59,9 +62,10 @@ export function createSlider(config: SliderConfig) {
 
   /** Turn a pointer position (client coords) + measured track rect into a value. */
   function valueFromPointer(pos: SliderPoint, rect: DOMRect): number {
+    const horiz = (pos.x - rect.left) / rect.width
     const frac = isVert()
       ? 1 - (pos.y - rect.top) / rect.height
-      : (pos.x - rect.left) / rect.width
+      : rtl() ? 1 - horiz : horiz
     return clampStep(min() + Math.min(1, Math.max(0, frac)) * (max() - min()))
   }
 
@@ -104,9 +108,16 @@ export function createSlider(config: SliderConfig) {
   function onThumbKey(e: KeyboardEvent, which: SliderThumb) {
     if (disabled()) return
     const cur = which === 'lo' ? lo : hi
+    // Under horizontal RTL, Left increases and Right decreases (Up/Down keep
+    // their natural up=more direction regardless of text direction).
+    const rtlH = rtl() && !isVert()
+    const inc = clampStep(cur + stepSize())
+    const dec = clampStep(cur - stepSize())
     let next = cur
-    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next = clampStep(cur + stepSize())
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = clampStep(cur - stepSize())
+    if (e.key === 'ArrowUp') next = inc
+    else if (e.key === 'ArrowDown') next = dec
+    else if (e.key === 'ArrowRight') next = rtlH ? dec : inc
+    else if (e.key === 'ArrowLeft') next = rtlH ? inc : dec
     else if (e.key === 'Home') next = min()
     else if (e.key === 'End') next = max()
     else if (e.key === 'PageUp') next = clampStep(cur + stepSize() * 10)

package/src/createSplitter.svelte.ts

@@ -0,0 +1,119 @@
+/**
+ * createSplitter - the HEADLESS core behind <SvSplitter>: a two-pane resizable
+ * split with a draggable separator (WAI-ARIA `separator`), keyboard resize and
+ * clamping, exposed as **prop-getters** you spread onto YOUR OWN markup. The core
+ * never touches the DOM - the renderer measures the container rect and passes the
+ * pointer position + rect IN via `setFromPointer` (same split as createSlider).
+ * Parity: Smart `smart-splitter`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSplitter } from '@svgrid/grid'
+ *   let frac = $state(0.5)
+ *   const sp = createSplitter({ fraction: () => frac, onChange: (f) => (frac = f) })
+ * </script>
+ * <div class="row" bind:this={row}>
+ *   <div style:flex-basis={sp.percent + '%'}>A</div>
+ *   <div {...sp.separatorProps()} onpointerdown={...}></div>
+ *   <div style:flex="1">B</div>
+ * </div>
+ * ```
+ */
+export type SplitterOrientation = 'horizontal' | 'vertical'
+export type SplitterPoint = { x: number; y: number }
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type SplitterConfig = {
+  /** Size of the FIRST pane as a fraction of the container (0..1). */
+  fraction: () => number
+  onChange?: (fraction: number) => void
+  /** Split direction: `horizontal` = a vertical gutter between left/right panes. */
+  orientation?: () => SplitterOrientation
+  /** Min / max fraction for the first pane (0..1). */
+  min?: () => number
+  max?: () => number
+  /** Keyboard step as a fraction (default 0.02 = 2%). */
+  step?: () => number
+  disabled?: () => boolean
+  dir?: () => 'ltr' | 'rtl' | 'auto' | undefined
+  ariaLabel?: () => string | undefined
+}
+
+export function createSplitter(config: SplitterConfig) {
+  const isVert = () => (config.orientation?.() ?? 'horizontal') === 'vertical'
+  const min = () => config.min?.() ?? 0.1
+  const max = () => config.max?.() ?? 0.9
+  const step = () => config.step?.() ?? 0.02
+  const disabled = () => config.disabled?.() ?? false
+  const rtl = () => config.dir?.() === 'rtl'
+
+  const clamp = (f: number) => Math.min(max(), Math.max(min(), f))
+  const fraction = $derived(clamp(config.fraction()))
+  const percent = $derived(Math.round(fraction * 1000) / 10)
+
+  let dragging = $state(false)
+
+  function fromPointer(pos: SplitterPoint, rect: DOMRect): number {
+    const raw = isVert()
+      ? (pos.y - rect.top) / rect.height
+      : (pos.x - rect.left) / rect.width
+    // Horizontal RTL: the first pane sits on the right, so invert.
+    const f = !isVert() && rtl() ? 1 - raw : raw
+    return clamp(f)
+  }
+
+  function pointerDown() { if (!disabled()) dragging = true }
+  function setFromPointer(pos: SplitterPoint, rect: DOMRect) {
+    if (!dragging || disabled()) return
+    config.onChange?.(fromPointer(pos, rect))
+  }
+  function endDrag() { dragging = false }
+
+  function nudge(delta: number) {
+    if (disabled()) return
+    config.onChange?.(clamp(fraction + delta))
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled()) return
+    const horiz = !isVert()
+    const rtlH = horiz && rtl()
+    const inc = () => nudge(step())
+    const dec = () => nudge(-step())
+    switch (e.key) {
+      case 'ArrowRight': if (horiz) { e.preventDefault(); rtlH ? dec() : inc() } break
+      case 'ArrowLeft': if (horiz) { e.preventDefault(); rtlH ? inc() : dec() } break
+      case 'ArrowDown': if (!horiz) { e.preventDefault(); inc() } break
+      case 'ArrowUp': if (!horiz) { e.preventDefault(); dec() } break
+      case 'Home': e.preventDefault(); config.onChange?.(min()); break
+      case 'End': e.preventDefault(); config.onChange?.(max()); break
+    }
+  }
+
+  return {
+    /** Clamped fraction (0..1) of the first pane. */
+    get fraction() { return fraction },
+    /** Clamped size of the first pane as a percentage (0..100). */
+    get percent() { return percent },
+    /** Whether the separator is being dragged. */
+    get dragging() { return dragging },
+    pointerDown,
+    setFromPointer,
+    endDrag,
+    nudge,
+    /** Spread onto the draggable separator element. */
+    separatorProps: () => ({
+      role: 'separator' as const,
+      tabindex: disabled() ? -1 : 0,
+      'aria-orientation': (isVert() ? 'horizontal' : 'vertical') as 'horizontal' | 'vertical',
+      'aria-valuemin': Math.round(min() * 100),
+      'aria-valuemax': Math.round(max() * 100),
+      'aria-valuenow': Math.round(fraction * 100),
+      'aria-label': config.ariaLabel?.() ?? 'Resize panes',
+      'aria-disabled': disabled() || undefined,
+      onkeydown: onKeydown,
+    }),
+  }
+}
+
+export type Splitter = ReturnType<typeof createSplitter>