@joewinke/jatui 0.40.0 → 0.41.1

package/CLAUDE.md

@@ -24,6 +24,7 @@ Then import:
 | `TextInput` | Text input with label, error, icon slots | `label`, `value` (bindable), `placeholder`, `error`, `disabled` |
 | `TextArea` | Multiline text input. Auto-grow (`autoResize`, or implied by `maxRows`) grows a whole line at a time from `minRows` (default `rows`) to `maxRows`, then scrolls — CSS `field-sizing: content` where supported, row-quantized JS fallback (`textareaRowsHeight`) elsewhere. | `label`, `value` (bindable), `placeholder`, `rows`, `minRows?`, `maxRows?`, `autoResize?`, `error`, `maxlength` |
 | `SelectInput` | Dropdown select | `label`, `value` (bindable), `options: SelectOption[]`, `placeholder` |
+| `SegmentedControl` | Single-select toggle group that SETS A VALUE (Tabs switch panels): `role="radiogroup"` + `role="radio"`, roving tabindex, arrows move AND select, Home/End, disabled options skipped; sliding thumb on motion tokens (jumps under reduced motion). `solid` (track + raised thumb) or `plain`. Options may be plain strings. | `options: (SegmentedOption \| string)[]`, `value` (bindable), `size?` (`xs\|sm\|md`), `variant?`, `fullWidth?`, `disabled?`, `ariaLabel?`, `option?` (snippet), `onChange?` |
 | `PhoneInput` | Intl phone (country dropdown + tel input, outputs E.164; caps national digits per country). Fires `onChange(value)` on every change. | `value` (bindable), `name`, `defaultCountry`, `required`, `onChange` |
 | `PinInput` | One box per character for PINs and one-time codes. Every cell is `autocomplete="one-time-code"` with no maxlength, so SMS autofill / WebOTP (which drop the whole code into the focused cell) fill all cells from the first; paste distributes from the caret; `dir="ltr"`, `inputmode`/`pattern` numeric. Pure helpers: `applyPinCellInput`, `distributePin`, `isPinComplete`. | `value` (bindable), `length` (6), `numeric`, `masked`, `name?`, `autocomplete?` (`one-time-code`), `error`, `label`, `oncomplete` |
 | `ChipInput` | Tag/chip entry with suggestions | `chips` (bindable), `suggestions: SuggestionGroup[]`, `placeholder` |
@@ -62,6 +63,12 @@ Then import:
 | `LinkButton` | Text action styled as a link: `<a>` with `href`, `<button>` without; underline on hover (or always). `external` adds new-tab + rel=noopener + an SR hint. | `href?`, `tone?` (inherit\|primary\|muted\|error), `size?`, `underline?`, `external?`, `disabled?`, `onclick?`, `children` |
 | `ProgressButton` | Multi-phase async submit button (upstreamed from the JAT IDE): walks through the **named phases** of the work (`phases: [{key,label}]` in order) instead of a blank spinner — spinner + current phase label with shimmer, a fill bar that advances to `(index+1)/N`, disabled while busy, green check-flash on `success`. Caller owns the state machine (`phase` / `success`). Renders through the shared `Button`, so `class` composes with join patterns. | `phase?` (null = idle), `phases?: Phase[]`, `idleLabel?`, `success?`, `successLabel?`, `variant?`, `size?`, `disabled?`, `type?`, `class?`, `onclick?`, `children` |
 | `Badge` | Status/label badge | `variant`, `size`, `children` (snippet) |
+| `AnimatedNumber` | Number that animates to its new value. `mode='roll'` (default) is the per-digit odometer; `mode='tween'` counts from the previous value (`svelte/motion` Tween, `--motion-move` duration scaled by `data-motion`, instant under reduced motion; screen readers get the final value only). | `value`, `format?: Intl.NumberFormatOptions`, `mode?`, `duration?` (ms) |
+| `StatCard` | KPI tile: label, a value that tweens to its new number, delta chip toned by sign (success/error/neutral tokens; `invertDelta` for metrics where down is good), caption, icon tile (`tone`), info tooltip, inline SVG sparkline (no d3). `variant='footer'` moves caption + delta into a footer band; `href` makes the card a link; `loading` skeleton. A numeric `delta` is a FRACTION (0.125 → "+12.5%"). | `label`, `value`, `format?`, `animate?` (`tween\|roll\|false`), `delta?`, `deltaFormat?`, `deltaTone?`, `invertDelta?`, `caption?`, `info?`, `sparkline?: number[]`, `variant?`, `tone?`, `size?`, `href?`, `loading?`, `icon?`/`children?` (snippets) |
+| `StatGroup` | Lays out StatCards: `cards` (responsive auto-fit grid) or `joined` (one bordered panel with hairline dividers) — the replacement for raw DaisyUI `stats` markup. | `columns?`, `minWidth?` ('12rem'), `variant?`, `ariaLabel?`, `children` |
+| `ChartCard` | "Headline + period switch + chart" shell that draws NO chart (bring layerchart / d3 / SVG). The `chart` snippet gets `{ period, hover, hovered }`; call `hover({value, label, delta?})` as the pointer moves and the headline tweens to that point and the caption shows its label; `hover(null)` (or pointer leave) restores the total. Periods use SegmentedControl. | `label`, `value`, `format?`, `delta?`, `invertDelta?`, `caption?`, `periods?`, `period` (bindable), `onPeriodChange?`, `chartHeight?`, `loading?`, `chart` (snippet), `actions?`/`footer?` (snippets) |
+| `BarList` | Ranked horizontal bars ("top pages / top callers"): label + value as text, a decorative token-tinted bar sized against the max, optional `href` or `onSelect` per row, `hint`, per-row `tone`, `limit` + "Show N more". Pure HTML/CSS, no chart lib. | `items: BarListItem[]`, `sort?` (`desc`), `limit?`, `format?`, `formatValue?(item, total)`, `labelHeader?`/`valueHeader?`, `tone?`, `size?`, `onSelect?`, `label?` (snippet) |
+| `ActivityHeatmap` | GitHub-style activity-per-day calendar (calls/day, tasks closed/day): 7 weekday rows × week columns, default range = last 12 months, `weekStart`, 4-step `color-mix` ramp from one theme `tone` (no hex), one floating tooltip, legend + summary ("1,204 calls in the last year"). `role="grid"` with ONE tab stop: arrows move by day (↑↓) / week (←→), PgUp/PgDn 4 weeks, Home/End row ends, mod+Home/End range ends, Enter/Space select. Pure layout helpers exported (`buildHeatmap`, `moveHeatFocus`). | `data` (`{date, count}[]` or `getDate`/`getCount`), `start?`/`end?`, `weekStart?`, `unit?` ('call' or ['call','calls']), `formatLabel?`, `tone?`, `levels?`, `levelOf?`, `compact?`, `showLegend?`/`showWeekdays?`/`showMonths?`, `summary?`, `selected` (bindable), `onSelectDay?(date, count)`, `locale?` |
 | `StatusBadge` | Status indicator with dot | `status: StatusValue`, `label` |
 | `Card` | Content card container | `title`, `children` (snippet) |
 | `Modal` | Dialog overlay. `zIndex` accepts `number` OR any CSS `z-index` string, including `"var(--z-lightbox)"`. **Escape is owned by the dialog element itself** (not the window handler) — Modal focuses the dialog on open, so `trapKeys`' stopPropagation would otherwise swallow Esc before the window listener sees it; a Modal opened inside a host Drawer closes before the drawer. The component ships its own open-state `.modal-box` opacity rule, so it renders under DaisyUI 5 with no host global override. | `open` (bindable), `title`, `children` (snippet), `zIndex?: string \| number`, `trapKeys?`, `closeOnEscape?` |
@@ -219,6 +226,25 @@ import type {
 import { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from 'jatui/meet'
 ```
 
+### Grid helpers (subpath: `jatui/grid`, also on the root barrel)
+
+Pure, dependency-free helpers for spreadsheet-style editing (MOS tables, IDE tables, a future DataTable editable mode):
+
+```typescript
+import {
+  parseClipboardTsv, serializeTsv,          // Excel/Sheets clipboard: quoted tabs/newlines, "" escapes, CRLF, ragged rows
+  serializeCsv, serializeRowsToCsv,         // RFC 4180 + BOM + formula-injection escaping ('=…', '+…', '-…', '@…' strings get a leading ')
+  escapeCsvFormula,
+  columnLetter, columnIndex, parseCellRef,  // 0 ↔ "A", 26 ↔ "AA", "B3" → {col:1,row:2}
+  parseCellValue,                           // typed parse + human error: number ($1,234.50, 12%, (7)), select, boolean, text; min/max/required
+  applyEdits, diffEdits, deleteRows, planPaste,
+  createEditHistory                         // diff-based undo/redo (limit 100) with a STALE GUARD: if the data changed underneath, history clears instead of reverting someone else's change
+} from 'jatui/grid'
+// const h = createEditHistory({ getRowId: (r) => r.id })
+// rows = h.commit(rows, diffEdits(rows, planPaste(parseClipboardTsv(text), target).values, { getRowId }))
+// const step = h.undo(rows); if (step.ok) rows = step.data   // step.reason: 'empty' | 'stale'
+```
+
 ### Layout
 
 | Component | Purpose | Key Props |
@@ -231,6 +257,9 @@ import { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from 'jatui
 | `InfiniteSearchGrid` | Search box + `InfiniteGrid`. Query is debounced, then becomes the grid's `resetKey` (Enter commits now, Escape clears). Below `minQueryLength` no request is made and `prompt` shows. All other `InfiniteGrid` props pass through. | `search(query, cursor, {signal})`, `renderItem` (snippet), `query` (bindable), `debounceMs?` (300), `minQueryLength?` (0), `placeholder?`, `noResultsText?`/`noResults?`, `prompt?`/`promptText?`, `toolbar?` (snippet) |
 | `SectionNav` | Sticky in-page section index for long single-column pages — vertical rail beside the content on xl+, wrapping chip row above it below xl. Built-in scroll-spy (omit `activeId` and it just works; `bind:activeId` to observe/control — the spy writes back to it): on every observer callback + rAF-throttled scroll/resize it measures ALL sections and activates the last one whose top is at/above the activation line (`activationRatio`, default 0.3 of the scroller height); at the bottom of the page the last section wins. Clicking an item activates it immediately and holds the spy off until the smooth scroll lands (`scrollend`, or 800ms after the last scroll event); reduced-motion scrolls instantly. Pure decision fn exported as `computeActiveSection(rects, viewport, scroll, ratio?)`. Amber dot per `dirtyIds` marks sections holding unsaved edits. `go()` scrolls AND moves focus so keyboard/SR users land where the click did. j/k/Enter via `listNav`. Layout contract: parent is a `flex flex-wrap gap-8 items-start` row, content column `flex-1 min-w-0`; sections need `id` + `scroll-mt-*`. | `sections: {id,label}[]`, `activeId?` (bindable), `dirtyIds?: Set<string>`, `ariaLabel?`, `spy?`, `activationRatio?` (0.3) |
 | `use:scrollEdge` (action) | Progressive-blur fade on a scroll region's edge once content scrolls under it: a stationary `aria-hidden` sticky strip inside the scroller with two masked backdrop-blur layers + a surface→transparent gradient, each ramping opacity 0→1 over the first `size` px of scroll distance (nothing drawn at rest). Keep headers OUTSIDE the scroller; chat threads (stick-to-bottom) want `edges: 'bottom'`. Opacity-only, reduced-motion safe. Pure: `edgeOpacity`, `edgeDistances`. | `edges?` ('top'\|'bottom'\|'both'), `size?` (24), `surface?` (`--jatui-surface`), `blur?` (true), `enabled?` |
+| `TreeView` | Data-driven tree (`nodes` + `getId`/`getChildren`/`getLabel`, defaults `id`/`children`/`label ?? name`). Renders `flattenTree`'s FLAT row list as `role="tree"` / `role="treeitem"` with `aria-level`/`posinset`/`setsize`/`expanded`/`selected`, so it windows with `jatui/virtual` (`virtual={{ createRowWindow }}`). Connector guides (trunks only while an ancestor has a later sibling, elbow, tail, bridge), full APG keys (↑↓, → open then step INTO the first child, ← close then parent, Home/End, `*` opens siblings, Enter = `onAction`, Space selects, typeahead, mod+A in multi), `selectionMode` none/single/multiple (Ctrl toggle, Shift range), lazy folders via `hasChildren` + `onExpand`, leaving rows go `inert` during the collapse animation (off under reduced motion / while windowed). `bind:this` → `expandAll()`, `collapseAll()`, `reveal(id)`, `focus(id?)`, `visibleIds()`. Pure helpers: `flattenTree`, `collectBranchIds`, `pathToNode`, `resolveTreeKey`, `treeTypeahead`. | `nodes`, `expanded` (bindable Set), `selected` (bindable Set), `selectionMode?`, `size?`, `showGuides?`, `icons?`, `expandOnClick?`, `animate?`, `maxHeight?`, `virtual?`, `isDisabled?`, `hasChildren?`, `label?`/`icon?`/`trailing?`/`empty?` (snippets), `onExpand?`, `onAction?`, `onRowContextMenu?`, `onSelectionChange?` |
+| `SettingsSection` | Titled group of SettingsRows with hairline dividers; `card` (framed) or `plain`; header `actions`, `footer`, amber `dirty` dot (matches SectionNav `dirtyIds`); `id` makes it a SectionNav target. | `title?`, `description?`, `id?`, `variant?`, `headingLevel?`, `dirty?`, `actions?`/`footer?`/`children` (snippets) |
+| `SettingsRow` | Label + description on the start side, control on the end; stacks when its container is narrow (or `layout='stacked'`). Wires ids for you: the `control` snippet gets `{ id, labelId, descriptionId }` — put `id` on the input and `descriptionId` on `aria-describedby`. `error`, `dirty`, `disabled`, children render under the row. | `label`, `description?`, `for?`, `layout?`, `dirty?`, `disabled?`, `error?`, `id?`, `control?` (snippet), `children?`, `labelContent?` |
 
 **Windowing (subpath: `jatui/virtual`, optional peer `@tanstack/virtual-core`).** `createRowWindow(opts)` is headless variable-height windowing built on **spacer rows**, not absolute positioning, so it works inside a `<table>` and keeps `table-layout: fixed` and sticky `<thead>`s. It returns reactive `items` (`{index, key, start, size, end, gapBefore, sticky, pinned}`), `paddingTop`, `paddingBottom`, `totalSize` and `windowed`, plus `use:win.anchor` (on the `<tbody>` or list container, whose top is item 0's top) and `use:win.measure={item.key}` (on each item; a shared ResizeObserver re-measures it). Reading a row's height for the first time, or later re-measuring one above the viewport, shifts `scrollTop` by the delta so nothing jumps. The anchor gets `overflow-anchor: none` so native scroll anchoring doesn't correct the shift a second time. The options are reactive getters: `count`, `getKey`, `estimateSize`, `pinned()` (keys kept rendered, e.g. an open editor or exiting row), `stickyIndices()` (a flat list, or one array per level `[projectHdrs, epicHdrs]`; the active header of each level stays rendered, and an inner header never outlives its outer group), and `threshold` (render everything below N; pass it as a getter to make it reactive). Also `scrollRoot` (`'auto'` = the nearest ancestor that really scrolls, else the window; it re-resolves on resize), `overscan` (6), `scrollPaddingStart/End` and `initialViewportSize` (800; used for SSR and first paint). Methods: `scrollToIndex`/`scrollToKey(…, {align})` (queued until mount), `indexOf`, `remeasure()`. Render `item.gapBefore` as a spacer before the item; it is non-zero only when a pinned or sticky item sits outside the slice. Pure policy helpers are exported too (`extractWindowIndices`, `activeStickyIndices`, `layoutWindow`, `findScrollRoot`, `RowWindowEngine`). Demo: `/components/row-window`.
 

package/THIRD_PARTY_NOTICES.md

@@ -65,3 +65,18 @@ follow ideas from BoardUI's free items:
 - `themeWipe` fixes and `ThemeToggle`/`ThemeSelector` `reveal`: BoardUI theme
   toggle.
 - `Breadcrumb` `maxItems` and icons: BoardUI breadcrumb.
+
+### Wave 3 (jatui-6kitr) — re-implemented for Svelte 5 after BoardUI free components
+
+- `src/lib/components/tree/TreeView.svelte`, `flattenTree.ts`, `treeKeys.ts` — from
+  `tree-view` (connector-guide rule, ArrowRight steps into the first child).
+- `src/lib/data/grid/` — from `data-grid` utils (TSV clipboard round-trip, CSV
+  formula-injection escaping, stale-guarded edit history).
+- `src/lib/components/stats/StatCard.svelte` — from `stat-cards` (plain/footer looks).
+- `src/lib/components/SegmentedControl.svelte` — from `segmented-control`
+  (solid/plain variants).
+- `src/lib/components/settings/` — the row recipe from `settings-rows`.
+
+`BarList` and `ActivityHeatmap` follow BoardUI Pro ideas built from public
+behaviour only; no Pro source was read or copied. No BoardUI images, logos or
+palettes are included.

package/dist/components/AnimatedNumber.svelte

@@ -1,11 +1,63 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { getMotionContext, motionDuration } from '../motion/level';
+
 	interface Props {
 		value: number;
 		format?: Intl.NumberFormatOptions;
+		/**
+		 * 'roll' (default): per-digit odometer. 'tween': counts from the previous
+		 * value to the new one (dashboards, a headline driven by chart hover).
+		 */
+		mode?: 'roll' | 'tween';
+		/** Tween duration in ms at the standard motion level. Default: the --motion-move token. */
+		duration?: number;
 		class?: string;
 	}
 
-	let { value, format = {}, class: className = '' }: Props = $props();
+	let { value, format = {}, mode = 'roll', duration, class: className = '' }: Props = $props();
+
+	// ── Tween mode ─────────────────────────────────────────────────────────
+	let tweenEl: HTMLSpanElement | undefined = $state();
+	// A hand-rolled rAF tween, NOT svelte/motion's Tween: importing svelte/motion
+	// creates a prefers-reduced-motion MediaQuery at MODULE load, which throws
+	// 'window.matchMedia is not a function' in any jsdom test that merely
+	// imports 'jatui' (jatui-oozkb). Reduced motion comes from motionDuration,
+	// which is 0 under prefers-reduced-motion.
+	let tweenCurrent = $state(untrack(() => value));
+	$effect(() => {
+		if (mode !== 'tween') return;
+		const target = value;
+		// Level-aware (data-motion) and instant under prefers-reduced-motion.
+		const ms = motionDuration(duration ?? 'move', getMotionContext(tweenEl ?? null));
+		const from = untrack(() => tweenCurrent);
+		if (ms <= 0 || from === target || typeof requestAnimationFrame !== 'function') {
+			tweenCurrent = target;
+			return;
+		}
+		let frame = 0;
+		let start: number | null = null;
+		const step = (now: number) => {
+			start ??= now;
+			const t = Math.min(1, (now - start) / ms);
+			tweenCurrent = from + (target - from) * cubicOut(t);
+			if (t < 1) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
+	});
+	/** Decimals to show mid-tween: the target's own, unless `format` decides. */
+	const tweenDecimals = $derived.by(() => {
+		if (format.maximumFractionDigits != null) return null;
+		const s = String(value);
+		return s.includes('.') && !s.includes('e') ? s.split('.')[1].length : 0;
+	});
+	const tweenText = $derived.by(() => {
+		const v = tweenCurrent;
+		const shown = tweenDecimals == null ? v : Number(v.toFixed(tweenDecimals));
+		return formatNumber(shown, format);
+	});
 
 	type Digit = { prev: string; next: string; animating: boolean; id: number };
 
@@ -54,6 +106,12 @@
 	});
 </script>
 
+{#if mode === 'tween'}
+	<span
+		class="animated-number inline-flex tabular-nums {className}"
+		bind:this={tweenEl}
+	><span class="sr-only">{formatNumber(value, format)}</span><span aria-hidden="true">{tweenText}</span></span>
+{:else}
 <span
 	class="animated-number inline-flex tabular-nums {className}"
 	aria-live="polite"
@@ -80,6 +138,7 @@
 		{/if}
 	{/each}
 </span>
+{/if}
 
 <style>
 	.digit-inner {

package/dist/components/AnimatedNumber.svelte.d.ts

@@ -1,6 +1,13 @@
 interface Props {
     value: number;
     format?: Intl.NumberFormatOptions;
+    /**
+     * 'roll' (default): per-digit odometer. 'tween': counts from the previous
+     * value to the new one (dashboards, a headline driven by chart hover).
+     */
+    mode?: 'roll' | 'tween';
+    /** Tween duration in ms at the standard motion level. Default: the --motion-move token. */
+    duration?: number;
     class?: string;
 }
 declare const AnimatedNumber: import("svelte").Component<Props, {}, "">;

package/dist/components/SegmentedControl.svelte

@@ -0,0 +1,263 @@
+<!--
+  SegmentedControl: single-select toggle group that SETS A VALUE
+  (jatui-6kitr). Use Tabs to switch panels; use this for "Week / Month /
+  Year", view modes and filter scopes.
+
+  Radio semantics (role="radiogroup" + role="radio"), roving tabindex, arrow
+  keys move AND select (as native radios do), Home/End. A sliding thumb marks
+  the selection on motion tokens; it jumps under reduced motion. Variants
+  after BoardUI's segmented control (MIT, © 2026 Mertcan Dundar Esmergul):
+  `solid` (track + raised thumb) and `plain` (tinted thumb, no track).
+-->
+<script lang="ts" module>
+	export interface SegmentedOption<V extends string | number = string> {
+		value: V;
+		label: string;
+		disabled?: boolean;
+		/** Accessible name when `label` is visually hidden by an `option` snippet. */
+		ariaLabel?: string;
+	}
+</script>
+
+<script lang="ts" generics="V extends string | number = string">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Options, or plain strings (value = label). */
+		options: readonly (SegmentedOption<V> | V)[];
+		value?: V;
+		size?: 'xs' | 'sm' | 'md';
+		variant?: 'solid' | 'plain';
+		/** Stretch to the container, segments share the width. */
+		fullWidth?: boolean;
+		disabled?: boolean;
+		ariaLabel?: string;
+		/** Custom segment content (icon + label, counts…). */
+		option?: Snippet<[SegmentedOption<V>, { selected: boolean }]>;
+		onChange?: (value: V) => void;
+		class?: string;
+	}
+
+	let {
+		options,
+		value = $bindable(),
+		size = 'sm',
+		variant = 'solid',
+		fullWidth = false,
+		disabled = false,
+		ariaLabel,
+		option,
+		onChange,
+		class: className = ''
+	}: Props = $props();
+
+	const items = $derived(
+		options.map((o): SegmentedOption<V> =>
+			typeof o === 'object' ? o : { value: o, label: String(o) }
+		)
+	);
+	const selectedIndex = $derived(items.findIndex((o) => o.value === value));
+	const tabIndexOf = $derived(selectedIndex >= 0 ? selectedIndex : items.findIndex((o) => !o.disabled));
+
+	let trackEl: HTMLDivElement | undefined = $state();
+	const buttons: HTMLButtonElement[] = $state([]);
+	let thumb = $state<{ x: number; w: number } | null>(null);
+	let ready = $state(false);
+
+	function measure() {
+		const b = buttons[selectedIndex];
+		if (!b || !trackEl) {
+			thumb = null;
+			return;
+		}
+		thumb = { x: b.offsetLeft, w: b.offsetWidth };
+	}
+
+	$effect(() => {
+		void selectedIndex;
+		void items.length;
+		measure();
+		// Enable the slide only after the first placement (no fly-in on mount).
+		const id = requestAnimationFrame(() => (ready = true));
+		return () => cancelAnimationFrame(id);
+	});
+
+	$effect(() => {
+		if (!trackEl || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(() => measure());
+		ro.observe(trackEl);
+		return () => ro.disconnect();
+	});
+
+	function choose(i: number) {
+		const o = items[i];
+		if (!o || o.disabled || disabled) return;
+		if (o.value !== value) {
+			value = o.value;
+			onChange?.(o.value);
+		}
+	}
+
+	function onKeydown(e: KeyboardEvent, i: number) {
+		const step = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+		let next = -1;
+		const n = items.length;
+		if (step) {
+			for (let k = 1; k <= n; k++) {
+				const j = (((i + step * k) % n) + n) % n;
+				if (!items[j].disabled) {
+					next = j;
+					break;
+				}
+			}
+		} else if (e.key === 'Home') next = items.findIndex((o) => !o.disabled);
+		else if (e.key === 'End') next = items.findLastIndex((o) => !o.disabled);
+		else return;
+		if (next < 0) return;
+		e.preventDefault();
+		choose(next);
+		buttons[next]?.focus();
+	}
+</script>
+
+<div
+	bind:this={trackEl}
+	class="jatui-segmented seg-{size} seg-{variant} {className}"
+	class:seg-full={fullWidth}
+	class:seg-ready={ready}
+	class:seg-disabled={disabled}
+	role="radiogroup"
+	aria-label={ariaLabel}
+	aria-disabled={disabled || undefined}
+>
+	{#if thumb}
+		<span class="seg-thumb" aria-hidden="true" style:--x="{thumb.x}px" style:--w="{thumb.w}px"></span>
+	{/if}
+	{#each items as o, i (o.value)}
+		{@const sel = i === selectedIndex}
+		<button
+			bind:this={buttons[i]}
+			type="button"
+			role="radio"
+			class="seg-item"
+			class:is-selected={sel}
+			aria-checked={sel}
+			aria-label={o.ariaLabel}
+			disabled={o.disabled || disabled}
+			tabindex={i === tabIndexOf ? 0 : -1}
+			onclick={() => choose(i)}
+			onkeydown={(e) => onKeydown(e, i)}
+		>
+			{#if option}{@render option(o, { selected: sel })}{:else}{o.label}{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.jatui-segmented {
+		--seg-h: 2rem;
+		--seg-px: 0.75rem;
+		--seg-pad: 3px;
+		position: relative;
+		display: inline-flex;
+		align-items: stretch;
+		gap: 2px;
+		padding: var(--seg-pad);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		font-size: 0.875rem;
+		isolation: isolate;
+	}
+	.seg-solid {
+		background: color-mix(in oklch, var(--color-base-content) 7%, var(--color-base-100));
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+	.seg-xs {
+		--seg-h: 1.5rem;
+		--seg-px: 0.5rem;
+		--seg-pad: 2px;
+		font-size: 0.75rem;
+	}
+	.seg-sm {
+		--seg-h: 1.75rem;
+		--seg-px: 0.625rem;
+		font-size: 0.8125rem;
+	}
+	.seg-full {
+		display: flex;
+		width: 100%;
+	}
+	.seg-full .seg-item {
+		flex: 1 1 0;
+	}
+
+	.seg-item {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--jatui-space-sm, 4px);
+		min-height: var(--seg-h);
+		padding: 0 var(--seg-px);
+		border: 0;
+		border-radius: calc(var(--jatui-radius-field, 0.25rem) - 1px);
+		background: transparent;
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		font: inherit;
+		font-weight: 500;
+		white-space: nowrap;
+		cursor: pointer;
+		transition: color var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.seg-item:hover:not(:disabled):not(.is-selected) {
+		color: var(--color-base-content);
+	}
+	.seg-item.is-selected {
+		color: var(--color-base-content);
+	}
+	.seg-plain .seg-item.is-selected {
+		color: var(--color-primary);
+	}
+	.seg-item:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.seg-item:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
+	.seg-thumb {
+		position: absolute;
+		z-index: 0;
+		top: var(--seg-pad);
+		bottom: var(--seg-pad);
+		left: 0;
+		width: var(--w);
+		transform: translateX(var(--x));
+		border-radius: calc(var(--jatui-radius-field, 0.25rem) - 1px);
+		pointer-events: none;
+	}
+	.seg-solid .seg-thumb {
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+	.seg-plain .seg-thumb {
+		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+	}
+	.seg-ready .seg-thumb {
+		transition:
+			transform var(--motion-move, 250ms) var(--motion-glide, cubic-bezier(0.22, 1, 0.36, 1)),
+			width var(--motion-move, 250ms) var(--motion-glide, cubic-bezier(0.22, 1, 0.36, 1));
+	}
+	.seg-disabled {
+		opacity: 0.6;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.seg-ready .seg-thumb,
+		.seg-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/SegmentedControl.svelte.d.ts

@@ -0,0 +1,48 @@
+export interface SegmentedOption<V extends string | number = string> {
+    value: V;
+    label: string;
+    disabled?: boolean;
+    /** Accessible name when `label` is visually hidden by an `option` snippet. */
+    ariaLabel?: string;
+}
+import type { Snippet } from 'svelte';
+declare function $$render<V extends string | number = string>(): {
+    props: {
+        /** Options, or plain strings (value = label). */
+        options: readonly (SegmentedOption<V> | V)[];
+        value?: V;
+        size?: "xs" | "sm" | "md";
+        variant?: "solid" | "plain";
+        /** Stretch to the container, segments share the width. */
+        fullWidth?: boolean;
+        disabled?: boolean;
+        ariaLabel?: string;
+        /** Custom segment content (icon + label, counts…). */
+        option?: Snippet<[SegmentedOption<V>, {
+            selected: boolean;
+        }]>;
+        onChange?: (value: V) => void;
+        class?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string | number = string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string | number = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string | number = string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SegmentedControl: $$IsomorphicComponent;
+type SegmentedControl<V extends string | number = string> = InstanceType<typeof SegmentedControl<V>>;
+export default SegmentedControl;

package/dist/components/settings/SettingsRow.svelte

@@ -0,0 +1,177 @@
+<!--
+  SettingsRow: label + description on the start side, the control on the
+  end side (jatui-6kitr). Stacks when its container is narrow. The row wires
+  ids: pass `for` (your control's id) or let it generate one and put
+  `ctx.id` on your control; `ctx.descriptionId` goes on aria-describedby.
+
+    <SettingsRow label="Email digests" description="One summary a day">
+      {#snippet control(ctx)}
+        <Switch id={ctx.id} aria-describedby={ctx.descriptionId} bind:checked />
+      {/snippet}
+    </SettingsRow>
+-->
+<script lang="ts" module>
+	export interface SettingsRowContext {
+		/** Id to put on the control (the label points at it). */
+		id: string;
+		labelId: string;
+		/** Undefined when there is no description. */
+		descriptionId: string | undefined;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label: string;
+		description?: string;
+		/** Id of the control the label is for. Default: generated, passed as `ctx.id`. */
+		for?: string;
+		/** 'inline' (default) puts the control beside the text; 'stacked' always below. */
+		layout?: 'inline' | 'stacked';
+		/** Unsaved-change dot. */
+		dirty?: boolean;
+		disabled?: boolean;
+		/** Validation / warning text under the description. */
+		error?: string;
+		/** Anchor id for deep links. */
+		id?: string;
+		control?: Snippet<[SettingsRowContext]>;
+		/** Extra content under the row (an expanded sub-form). */
+		children?: Snippet;
+		/** Custom label content (badge, icon). It becomes the accessible name, so include the text. */
+		labelContent?: Snippet;
+		class?: string;
+	}
+
+	let {
+		label,
+		description,
+		for: forId,
+		layout = 'inline',
+		dirty = false,
+		disabled = false,
+		error,
+		id,
+		control,
+		children,
+		labelContent,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+	const ctx = $derived<SettingsRowContext>({
+		id: forId ?? `${uid}-control`,
+		labelId: `${uid}-label`,
+		descriptionId: description || error ? `${uid}-desc` : undefined
+	});
+</script>
+
+<div
+	{id}
+	class="jatui-settings-row srow-{layout} {className}"
+	class:is-disabled={disabled}
+	class:has-error={!!error}
+>
+	<div class="srow-main">
+		<div class="srow-text">
+			<label class="srow-label" id={ctx.labelId} for={ctx.id}>
+				{#if labelContent}{@render labelContent()}{:else}{label}{/if}
+				{#if dirty}
+					<span class="srow-dirty" aria-hidden="true"></span><span class="sr-only">(unsaved)</span>
+				{/if}
+			</label>
+			{#if description || error}
+				<p class="srow-desc" id={ctx.descriptionId}>
+					{#if description}<span>{description}</span>{/if}
+					{#if error}<span class="srow-error" role="alert">{error}</span>{/if}
+				</p>
+			{/if}
+		</div>
+		{#if control}
+			<div class="srow-control">{@render control(ctx)}</div>
+		{/if}
+	</div>
+	{#if children}
+		<div class="srow-extra">{@render children()}</div>
+	{/if}
+</div>
+
+<style>
+	.jatui-settings-row {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-base, 8px);
+		min-height: 3.25rem;
+		padding-block: var(--jatui-space-lg, 12px);
+		justify-content: center;
+	}
+	.srow-main {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-xl, 16px);
+	}
+	.srow-stacked .srow-main {
+		flex-direction: column;
+		align-items: stretch;
+		gap: var(--jatui-space-base, 8px);
+	}
+	@container (max-width: 28rem) {
+		.srow-main {
+			flex-direction: column;
+			align-items: stretch;
+			gap: var(--jatui-space-base, 8px);
+		}
+	}
+	.srow-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+	.srow-label {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--color-base-content);
+	}
+	.srow-dirty {
+		width: 0.4375rem;
+		height: 0.4375rem;
+		border-radius: 9999px;
+		background: var(--color-warning);
+	}
+	.srow-desc {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 0;
+		font-size: 0.8125rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+	.srow-error {
+		color: var(--color-error);
+	}
+	.srow-control {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: var(--jatui-space-base, 8px);
+		flex: none;
+		max-width: 100%;
+	}
+	.srow-stacked .srow-control {
+		justify-content: flex-start;
+	}
+	.is-disabled .srow-text {
+		opacity: 0.55;
+	}
+	.srow-extra {
+		min-width: 0;
+	}
+</style>