@kitn.ai/ui 0.28.0 → 0.29.0

package/src/ui/scroll-area.tsx

@@ -1,26 +0,0 @@
-import { type JSX, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export type ScrollOrientation = 'vertical' | 'horizontal' | 'both';
-
-export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-  /** Which axis scrolls. `vertical` (default) · `horizontal` · `both`. The cross
-   *  axis is clamped to `hidden` so content can't overflow it. */
-  orientation?: ScrollOrientation;
-}
-
-export function ScrollArea(props: ScrollAreaProps) {
-  const [local, rest] = splitProps(props, ['children', 'class', 'orientation']);
-  const overflow = () =>
-    local.orientation === 'horizontal' ? 'overflow-x-auto overflow-y-hidden'
-      : local.orientation === 'both' ? 'overflow-auto'
-        : 'overflow-y-auto overflow-x-hidden';
-  return (
-    // tabindex=0 keeps the scroll region reachable by keyboard when it has no
-    // focusable descendants (WCAG 2.1.1 — axe `scrollable-region-focusable`).
-    <div tabindex={0} class={cn(overflow(), 'scrollbar-thin', local.class)} {...rest}>
-      {local.children}
-    </div>
-  );
-}

package/src/ui/segmented.tsx

@@ -1,109 +0,0 @@
-import { type JSX, For, Show, mergeProps } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface SegmentedOption {
-  value: string;
-  label: string;
-  /** Optional leading icon (a JSX node, e.g. a lucide-solid icon). */
-  icon?: JSX.Element;
-}
-
-export interface SegmentedProps {
-  /** The selectable segments, left to right. */
-  options: SegmentedOption[];
-  /** The selected segment's `value` (controlled). */
-  value: string;
-  /** Fires with the next `value` when a segment is chosen. */
-  onChange: (value: string) => void;
-  /** Control density. Defaults to `md`. */
-  size?: 'sm' | 'md';
-  class?: string;
-}
-
-const SIZE: Record<'sm' | 'md', string> = {
-  sm: 'h-7 px-2 text-xs',
-  md: 'h-8 px-3 text-sm',
-};
-
-/**
- * `Segmented`: a single-select pill track (a.k.a. segmented / toggle-group). A
- * recessed `bg-surface-sunken` rail of segment buttons where the selected segment
- * lifts onto a raised `bg-background` chip. Token-driven, light + dark.
- *
- * a11y: `role="group"` of real `<button>`s, each carrying `aria-pressed`; a roving
- * tabindex (only the selected segment is in the tab order) with Arrow / Home / End
- * key navigation that moves selection between segments.
- */
-export function Segmented(props: SegmentedProps): JSX.Element {
-  const merged = mergeProps({ size: 'md' as const }, props);
-  const buttons: HTMLButtonElement[] = [];
-
-  const currentIndex = () => merged.options.findIndex((o) => o.value === merged.value);
-
-  const select = (i: number) => {
-    const opt = merged.options[i];
-    if (!opt) return;
-    merged.onChange(opt.value);
-    buttons[i]?.focus();
-  };
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    const count = merged.options.length;
-    if (count === 0) return;
-    const cur = currentIndex();
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-      e.preventDefault();
-      select((Math.max(cur, 0) + 1) % count);
-    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-      e.preventDefault();
-      select((Math.max(cur, 0) - 1 + count) % count);
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      select(0);
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      select(count - 1);
-    }
-  };
-
-  return (
-    <div
-      role="group"
-      part="track"
-      onKeyDown={onKeyDown}
-      class={cn('inline-flex items-center gap-0.5 rounded-lg bg-surface-sunken p-0.5', merged.class)}
-    >
-      <For each={merged.options}>
-        {(opt, i) => {
-          const selected = () => opt.value === merged.value;
-          // Roving tabindex: the selected segment is tabbable; if nothing matches,
-          // the first segment falls back to tabbable so the group is reachable.
-          const focusable = () => selected() || (currentIndex() === -1 && i() === 0);
-          return (
-            <button
-              type="button"
-              part="segment"
-              ref={(el) => { buttons[i()] = el; }}
-              aria-pressed={selected()}
-              tabindex={focusable() ? 0 : -1}
-              onClick={() => merged.onChange(opt.value)}
-              class={cn(
-                'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                SIZE[merged.size],
-                selected()
-                  ? 'bg-background text-foreground shadow-sm'
-                  : 'text-muted-foreground hover:text-foreground',
-              )}
-            >
-              <Show when={opt.icon}>
-                <span class="inline-flex shrink-0 items-center" aria-hidden="true">{opt.icon}</span>
-              </Show>
-              <span>{opt.label}</span>
-            </button>
-          );
-        }}
-      </For>
-    </div>
-  );
-}

package/src/ui/select.tsx

@@ -1,168 +0,0 @@
-import { type JSX, For, Show, createEffect, splitProps } from 'solid-js';
-import { ChevronDown } from 'lucide-solid';
-import { cn } from '../utils/cn';
-import { FIELD_BASE, FIELD_INVALID } from './input';
-
-/** One choice in a {@link Select}. */
-export interface SelectOption<T = string> {
-  /** The value this row selects. Compared to the select's `value` by identity. */
-  value: T;
-  /** Visible text. Defaults to `String(value)`. Native `<option>`s hold text, not markup. */
-  label?: string;
-  /** Disable this option alone (the select's `disabled` disables the whole control). */
-  disabled?: boolean;
-}
-
-export interface SelectProps<T = string>
-  extends Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'children'> {
-  /**
-   * The choices, in display order. Rendered in full: the kit never truncates,
-   * re-orders or de-duplicates a consumer's option list.
-   *
-   * Omit it and pass `children` instead when you need `<optgroup>`s or anything else
-   * a flat list cannot express.
-   */
-  options?: readonly SelectOption<T>[];
-  /**
-   * The selected value, matched against each option's `value` by IDENTITY (so a
-   * numeric enum selects on the number, not on its string form). Pass an array for a
-   * `multiple` select.
-   */
-  value?: T | readonly T[];
-  /**
-   * Text for a leading, disabled, empty-valued option — the "nothing chosen yet" row.
-   * Omitted means no such row is rendered at all; there is no default placeholder,
-   * because inventing one would put words in the consumer's UI.
-   */
-  placeholder?: string;
-  /** Force the invalid (destructive-border) state. Matches `Input`'s. */
-  invalid?: boolean;
-  /** Raw `<option>` / `<optgroup>` children, for lists `options` cannot express.
-   *  `value` still drives the selection when you use these: it is applied to the
-   *  rendered options rather than quietly doing nothing. */
-  children?: JSX.Element;
-  /** Extra classes for the positioning wrapper that holds the chevron. */
-  containerClass?: string;
-}
-
-/**
- * A select. A REAL native `<select>` behind `appearance: none`, in a box consistent
- * with {@link Input}, with the kit's own chevron drawn over it.
- *
- * **Native, not a listbox, and that is the design.** A hand-built popup can be made to
- * look identical and cannot be made to behave identically: the native control brings
- * the platform picker on mobile, type-ahead on desktop, form participation, and the
- * OS's own accessibility tree. This kit's control audit found every one of its
- * accessibility defects in a control that had replaced a native element.
- *
- * The trade is that the *dropdown list itself* stays OS chrome — it renders outside the
- * page and no stylesheet reaches it. What the kit can do is make it follow the kit's
- * light/dark mode rather than the OS's, which `color-scheme` on the element host
- * already does (`src/elements/styles.css`). Styling the closed control and leaving the
- * open list to the platform is the whole of the bargain.
- *
- * Everything not listed in `SelectProps` is forwarded to the `<select>`, so `id`,
- * `name`, `required`, `disabled`, `multiple`, `size`, `aria-*`, any `data-*` hook and
- * the DOM events behave exactly as they do on a plain select. No validation is
- * applied: `required` reaches the native attribute and stops there.
- *
- * ```tsx
- * <Select
- *   options={[{ value: 'low' }, { value: 'high', label: 'High priority' }]}
- *   value={sev()}
- *   placeholder="Choose a severity…"
- *   onChange={(e) => setSev(e.currentTarget.value)}
- * />
- * ```
- */
-export function Select<T = string>(props: SelectProps<T>): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'class', 'containerClass', 'options', 'value', 'placeholder', 'invalid', 'children', 'ref',
-  ]);
-
-  // A `multiple` select is a scrolling list box, not a closed control: there is no
-  // collapsed state for a chevron to point at, and `appearance: none` on one buys
-  // nothing. So the custom chrome applies to the single-value shape only.
-  const isMulti = () => !!rest.multiple;
-
-  const isSelected = (v: T): boolean => {
-    const sel = local.value;
-    if (Array.isArray(sel)) return (sel as readonly T[]).includes(v);
-    return sel === v;
-  };
-
-  // Nothing chosen yet, for deciding whether the placeholder row is the selected one.
-  // Array-aware on purpose: an empty array means nothing is selected, and without this
-  // branch the browser would fall through to auto-selecting the first NON-disabled
-  // option — i.e. showing a real choice while the caller's state said none was made.
-  const isEmpty = (): boolean => {
-    const v = local.value;
-    if (Array.isArray(v)) return v.length === 0;
-    return v === undefined || v === null || (v as unknown) === '';
-  };
-
-  return (
-    <div class={cn('relative block w-full', local.containerClass)}>
-      <select
-        {...rest}
-        ref={(el) => {
-          // `ref` is split out and re-applied by hand because this component needs the
-          // element itself for the `children` path below. Solid always hands a component
-          // a ref FUNCTION (a variable ref compiles into one), so the typeof guard is for
-          // the hand-written object case only.
-          const forward = local.ref;
-          if (typeof forward === 'function') (forward as (el: HTMLSelectElement) => void)(el);
-
-          // `value` drives the `options` list declaratively (each `<option selected>`),
-          // which cannot reach options the CALLER rendered as `children`. Applying it
-          // imperatively for that path is the difference between "children are an
-          // escape hatch" and "`value` silently does nothing once you use one".
-          createEffect(() => {
-            if (local.children === undefined) return;
-            const v = local.value;
-            if (v === undefined || v === null) return;
-            if (Array.isArray(v)) {
-              const wanted = new Set((v as readonly unknown[]).map(String));
-              for (const o of el.options) o.selected = wanted.has(o.value);
-            } else {
-              el.value = String(v);
-            }
-          });
-        }}
-        class={cn(
-          FIELD_BASE,
-          // `peer` so the chevron beside it can dim with the control.
-          'peer',
-          // `pr-9` reserves the lane the chevron sits in, so a long option label never
-          // slides under it.
-          !isMulti() && 'cursor-pointer appearance-none pr-9',
-          local.invalid && FIELD_INVALID,
-          local.class,
-        )}
-      >
-        <Show when={local.placeholder !== undefined}>
-          <option value="" disabled selected={isEmpty()}>
-            {local.placeholder}
-          </option>
-        </Show>
-        <For each={local.options}>
-          {(opt) => (
-            <option value={String(opt.value)} disabled={opt.disabled} selected={isSelected(opt.value)}>
-              {opt.label ?? String(opt.value)}
-            </option>
-          )}
-        </For>
-        {local.children}
-      </select>
-      <Show when={!isMulti()}>
-        {/* `pointer-events-none` so the chevron is decoration and every click, including
-            one landing on the arrow, still opens the native picker. `aria-hidden`
-            because the select already announces itself as a combo box. */}
-        <ChevronDown
-          aria-hidden="true"
-          class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
-        />
-      </Show>
-    </div>
-  );
-}

package/src/ui/separator.tsx

@@ -1,10 +0,0 @@
-import { type JSX, splitProps } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> { orientation?: 'horizontal' | 'vertical'; }
-
-export function Separator(props: SeparatorProps) {
-  const [local, rest] = splitProps(props, ['orientation', 'class']);
-  const isVertical = () => local.orientation === 'vertical';
-  return <div role="separator" class={cn('shrink-0 bg-border', isVertical() ? 'h-full w-px' : 'h-px w-full', local.class)} {...rest} />;
-}

package/src/ui/settings-group.tsx

@@ -1,67 +0,0 @@
-import { type JSX, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface SettingsGroupProps {
-  /** Small section heading shown above the card. */
-  heading: string;
-  /** Optional muted description under the heading. */
-  description?: string;
-  /** The stacked `SettingItem` rows. */
-  children: JSX.Element;
-  class?: string;
-}
-
-/**
- * A settings section: a small heading + optional muted description over a bordered,
- * rounded card that stacks `SettingItem` rows with hairline dividers between them.
- * Host-agnostic chrome: the SAME group drops into a modal or a full settings page;
- * only the content (the rows) changes per app.
- */
-export function SettingsGroup(props: SettingsGroupProps): JSX.Element {
-  return (
-    <section class={cn('flex flex-col gap-2', props.class)}>
-      <div part="header" class="flex flex-col gap-0.5 px-1">
-        <h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-          {props.heading}
-        </h3>
-        <Show when={props.description}>
-          <p class="text-xs text-muted-foreground">{props.description}</p>
-        </Show>
-      </div>
-      <div part="body" class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
-        {props.children}
-      </div>
-    </section>
-  );
-}
-
-export interface SettingItemProps {
-  /** Row label (primary text). */
-  label: string;
-  /** Optional secondary description under the label. */
-  description?: string;
-  /** The control on the right (a `Switch`, `Segmented`, select, ...). Omit for a
-   *  plain label row. */
-  control?: JSX.Element;
-  class?: string;
-}
-
-/**
- * One row inside a `SettingsGroup`: a left label/description block and an optional
- * right-aligned `control`, vertically centered with comfortable padding.
- */
-export function SettingItem(props: SettingItemProps): JSX.Element {
-  return (
-    <div class={cn('flex items-center justify-between gap-4 px-4 py-3', props.class)}>
-      <div part="label" class="flex min-w-0 flex-col gap-0.5">
-        <span class="text-sm text-foreground">{props.label}</span>
-        <Show when={props.description}>
-          <span class="text-xs leading-snug text-muted-foreground">{props.description}</span>
-        </Show>
-      </div>
-      <Show when={props.control}>
-        <div part="control" class="shrink-0">{props.control}</div>
-      </Show>
-    </div>
-  );
-}

package/src/ui/skeleton.tsx

@@ -1,73 +0,0 @@
-import { type JSX, splitProps, For, Show } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export type SkeletonVariant = 'text' | 'rect' | 'circle';
-
-export interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** Shape preset. `text` = one or more lines; `rect` = a block; `circle` =
-   *  round. Omit for the bare, class-driven block (size it with utility classes
-   *  yourself — the original low-level usage). */
-  variant?: SkeletonVariant;
-  /** CSS width (a number is treated as px). With a `variant` and no width it
-   *  fills its container (responsive); for `circle` it is the diameter. */
-  width?: string | number;
-  /** CSS height (a number is treated as px). Defaults per variant. */
-  height?: string | number;
-  /** `text` only: how many lines to render (the last is shorter). Default 1. */
-  lines?: number;
-}
-
-const len = (v?: string | number) => (typeof v === 'number' ? `${v}px` : v);
-
-const rounding = (variant?: SkeletonVariant) =>
-  variant === 'circle' ? 'rounded-full' : variant === 'text' ? 'rounded' : 'rounded-md';
-
-function Skeleton(props: SkeletonProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'width', 'height', 'lines', 'style']);
-
-  const hasWidth = () => local.width != null;
-  const hasHeight = () => local.height != null;
-  // The responsive default applies only to the variant API; bare class-driven
-  // usage is left untouched so `<Skeleton class="h-4 w-64" />` keeps working.
-  const fills = () => !hasWidth() && local.variant != null && local.variant !== 'circle';
-
-  const blockStyle = (shortLast: boolean): JSX.CSSProperties => {
-    const style: JSX.CSSProperties = typeof local.style === 'object' && local.style ? { ...local.style } : {};
-    if (local.variant === 'circle') {
-      const d = len(local.width) ?? len(local.height) ?? '2.5rem';
-      style.width = d;
-      style.height = d;
-      return style;
-    }
-    if (shortLast) style.width = '70%';
-    else if (hasWidth()) style.width = len(local.width);
-    if (hasHeight()) style.height = len(local.height);
-    else if (local.variant === 'text') style.height = '0.75rem';
-    return style;
-  };
-
-  const block = (shortLast = false) => (
-    <div
-      part="skeleton"
-      // `bg-foreground/10` tints from the theme foreground, so it keeps a visible
-      // ~10% contrast against the background in BOTH light and dark (the old
-      // `bg-muted` was nearly invisible on a light surface). Recolor / restyle
-      // opacity from outside via `::part(skeleton)`.
-      class={cn('animate-pulse bg-foreground/10', rounding(local.variant), fills() && 'w-full', local.class)}
-      style={blockStyle(shortLast)}
-      {...rest}
-    />
-  );
-
-  const lineCount = () => (local.variant === 'text' ? Math.max(1, local.lines ?? 1) : 1);
-
-  return (
-    <Show when={lineCount() > 1} fallback={block()}>
-      <div class="flex w-full flex-col gap-2">
-        <For each={Array.from({ length: lineCount() })}>{(_, i) => block(i() === lineCount() - 1)}</For>
-      </div>
-    </Show>
-  );
-}
-
-export { Skeleton };

package/src/ui/slider.tsx

@@ -1,178 +0,0 @@
-import { type JSX, Show, splitProps, createSignal } from 'solid-js';
-import { cn } from '../utils/cn';
-
-export interface SliderProps
-  extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'min' | 'max' | 'step' | 'value'> {
-  /**
-   * Lowest selectable value. REQUIRED, and deliberately so.
-   *
-   * A range with no `min`/`max` is not a slider, it is a slider-shaped guess, and the
-   * guess belongs to whoever knows what the number means. `SliderWidget` reading a
-   * JSON-Schema field still defaults an absent `minimum` to 0 — that is the WIDGET's
-   * decision about a consumer-authored schema, and it stays there rather than being
-   * quietly adopted by every caller of this component.
-   */
-  min: number;
-  /** Highest selectable value. REQUIRED for the same reason as `min`. */
-  max: number;
-  /** Granularity. Omitted means the native default (1); `'any'` means continuous. */
-  step?: number | 'any';
-  /** The current value. Controlled — drive it from `onInput`. Omit for uncontrolled. */
-  value?: number;
-  /** Initial value when uncontrolled. */
-  defaultValue?: number;
-  /**
-   * Show the current value beside the track. Off by default.
-   *
-   * Two shapes, because one is not enough and three would be too many. `true` renders
-   * the raw number, which is what most sliders want. A FUNCTION renders whatever it
-   * returns, because plenty of sliders are not counting bare numbers: `60%`, `3 of 5`,
-   * `1m 30s`. A boolean alone cannot express those, and a formatter alone would make
-   * the common case read `valueLabel={(v) => v}`.
-   *
-   * The readout is `aria-hidden`. The input already reports the same number through
-   * `aria-valuenow` / `aria-valuetext`, so an exposed copy would be announced twice.
-   *
-   * NOTE ON STRUCTURE: with a readout the component renders a flex row around the
-   * input; without one it is still a bare `<input>` and nothing changes for existing
-   * callers. Toggling this at runtime therefore rebuilds the input element, which is
-   * fine for a control panel and not something a real app does mid-drag.
-   */
-  valueLabel?: boolean | ((value: number) => JSX.Element);
-}
-
-/**
- * A slider. A REAL `<input type="range">` behind `appearance: none`, styled by the
- * kit's `.kai-range` rule, never a `<div>` with a drag handler.
- *
- * The native control brings the whole keyboard contract (arrows, Home, End,
- * PageUp/PageDown), pointer and touch dragging, form participation via `name`, and
- * the `slider` role with a live value announcement — all of it for free and all of it
- * correct. Every accessibility defect this kit's control audit found was in a control
- * that had replaced the native element with something hand-rolled.
- *
- * What the component adds is the **filled track**. `.kai-range` paints the portion
- * left of the thumb from a `--kai-range-fill` custom property, and until now every
- * caller computed that percentage itself. It is arithmetic over `min`, `max` and the
- * current value — three things this component already has — so no consumer should
- * ever write it again.
- *
- * Everything not listed in `SliderProps` is forwarded to the input, so `id`, `name`,
- * `disabled`, `required`, `aria-*` and any `data-*` hook behave exactly as they do on
- * a plain `<input>`. No clamping and no validation is applied: a value outside
- * `min`..`max` is the browser's business, not ours.
- *
- * ```tsx
- * <Slider min={0} max={100} step={5} value={v()} onInput={(e) => setV(e.currentTarget.valueAsNumber)} />
- * ```
- */
-export function Slider(props: SliderProps): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'class', 'style', 'min', 'max', 'step', 'value', 'defaultValue', 'ref', 'valueLabel',
-  ]);
-
-  // The uncontrolled mirror. A slider's fill has to follow the thumb even when nobody
-  // is holding the value in a signal, so the component tracks the live value itself
-  // through a NATIVE `on:input` listener. That is `on:` and not `onInput` on purpose:
-  // `onInput` stays in `rest` and reaches the input untouched, so a caller's handler
-  // is neither wrapped nor swallowed, and the two listeners simply both run.
-  const [live, setLive] = createSignal<number | undefined>(props.defaultValue);
-
-  // HTML's own rule for a range with no value: the midpoint of the span. Restated here
-  // rather than left to the browser because the fill has to agree with the thumb on the
-  // very first paint, before any input event exists.
-  const current = () => local.value ?? live() ?? (local.min + local.max) / 2;
-
-  const fill = (): string => {
-    const lo = local.min;
-    const hi = local.max;
-    if (!(hi > lo)) return '0%';
-    // Clamp: a value outside the range is the caller's to fix, but a track painted
-    // 140% wide is a rendering artefact nobody asked for.
-    const pct = ((current() - lo) / (hi - lo)) * 100;
-    return `${Math.min(100, Math.max(0, pct))}%`;
-  };
-
-  // Merge rather than replace: `style` is a legitimate thing to pass a slider, and the
-  // fill is a custom property that has to survive alongside it. Solid accepts either a
-  // string or an object here, so both shapes are handled.
-  const style = (): string | JSX.CSSProperties => {
-    const s = local.style;
-    if (typeof s === 'string') return `${s.replace(/;\s*$/, '')};--kai-range-fill:${fill()}`;
-    return { ...(s ?? {}), '--kai-range-fill': fill() } as JSX.CSSProperties;
-  };
-
-  // CONTROLLED-MODE RECONCILIATION. A controlled `<input type="range">` in Solid can
-  // drift: the browser moves the thumb on a drag, and if the caller's `value` does not
-  // change in response, the bound expression is unchanged, so Solid never writes the
-  // DOM back. The thumb ends up somewhere the component's own state says it is not —
-  // and because the fill is derived from `value`, the two visibly DISAGREE. That is the
-  // exact symptom reported against the Storybook Playground: thumb slides, track does
-  // not. A pinned, writer-less `<Slider value={40} />` is a legitimate thing to render,
-  // and it should look pinned rather than half-moved.
-  //
-  // WHY A MICROTASK AND NOT THE HANDLER OR A BARE EFFECT. Both of those run too early
-  // and would break the ordinary controlled case. The `on:input` listener above is
-  // attached to the TARGET, so it runs before the caller's `onInput`, which Solid
-  // delegates at the document; snapping back there would hand the caller's handler a
-  // value we had already reset. A `createEffect` is flushed at the end of the update
-  // that `setLive` starts, which is still inside the target listener and therefore also
-  // before the delegated one. A microtask runs after the whole event turn: every input
-  // listener has run and any signal the caller set has propagated, so a value that
-  // still disagrees means the caller genuinely did not accept the edit.
-  let el: HTMLInputElement | undefined;
-  const reconcileControlled = () => {
-    const v = local.value;
-    // Uncontrolled: `live` is the truth and the DOM is already showing it.
-    if (v === undefined || el === undefined) return;
-    if (el.valueAsNumber !== v) el.value = String(v);
-  };
-
-  const readout = (): JSX.Element => {
-    const vl = local.valueLabel;
-    return typeof vl === 'function' ? vl(current()) : current();
-  };
-
-  const control = () => (
-    <input
-      {...rest}
-      type="range"
-      class={cn('kai-range', local.class)}
-      style={style()}
-      min={local.min}
-      max={local.max}
-      step={local.step}
-      value={local.value ?? live() ?? undefined}
-      ref={(node) => {
-        // `ref` is split out and re-applied by hand because this component needs the
-        // element for the reconciliation above. Solid always hands a component a ref
-        // FUNCTION (a variable ref compiles into one), so the typeof guard is for the
-        // hand-written object case only.
-        el = node;
-        const forward = local.ref;
-        if (typeof forward === 'function') (forward as (n: HTMLInputElement) => void)(node);
-      }}
-      on:input={(e) => {
-        setLive((e.currentTarget as HTMLInputElement).valueAsNumber);
-        queueMicrotask(reconcileControlled);
-      }}
-    />
-  );
-
-  return (
-    <Show when={local.valueLabel} fallback={control()}>
-      <div class="flex items-center gap-3">
-        {control()}
-        {/* aria-hidden: the input already announces this number. The readout is a
-            second copy for the eyes only, and exposing it would double the
-            announcement on every step of a drag. */}
-        <span
-          aria-hidden="true"
-          class="min-w-9 shrink-0 rounded-md bg-background px-2 py-1 text-center text-sm font-medium tabular-nums text-foreground shadow-sm"
-        >
-          {readout()}
-        </span>
-      </div>
-    </Show>
-  );
-}