@joewinke/jatui 0.39.0 → 0.41.0

package/CLAUDE.md

@@ -22,9 +22,11 @@ Then import:
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
 | `TextInput` | Text input with label, error, icon slots | `label`, `value` (bindable), `placeholder`, `error`, `disabled` |
-| `TextArea` | Multiline text input | `label`, `value` (bindable), `placeholder`, `rows`, `error`, `maxlength` |
+| `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` |
 | `SearchDropdown` | Searchable dropdown with grouped results, keyboard nav, avatar/initials options. `appendToBody` escapes table/overflow stacking contexts; `variant='chip'` renders a compact pill; `size='sm'` a smaller trigger; `dropup` opens upward; `clearable` shows an × when a value is set. `onSearch` turns the built-in search box into a debounced server-side search hook (fires on open/clear with `''`; internal filtering is bypassed — the consumer updates `groups`). Exposes `openDropdown()`. | `groups: SearchDropdownGroup[]`, `value`, `onChange`, `placeholder`, `variant`, `size`, `dropup`, `appendToBody`, `clearable`, `colorFn`, `onSearch`, `searchDebounceMs` |
 | `FilterDropdown` | Multi-select filter dropdown | `label`, `options: string[]`, `selected: Set<string>` (bindable) |
@@ -56,13 +58,22 @@ Then import:
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
 | `Button` | Styled button with variants | `variant`, `size`, `loading`, `disabled`, `onclick` |
+| `IconButton` | Icon-only button with a **required** `label` (the aria-label; also the tooltip text with `tooltip`). Square/circle, toggle `pressed` (aria-pressed + selection surface), `href` → `<a>`, `variant="overlay"` for chrome over media. Use instead of hand-written `btn btn-sm btn-circle btn-ghost`. | `label`, `variant?` (ghost\|outline\|soft\|primary\|secondary\|error\|overlay), `size?`, `shape?` ('square'\|'circle'), `pressed?`, `tooltip?: boolean \| string`, `href?`, `children` (icon) |
+| `CloseButton` | The one ✕ for dialogs, drawers, sheets, toasts and lightboxes — an IconButton with a built-in X whose stroke is a true CSS pixel at every size. Modal, Drawer, BottomSheet and MediaLightbox use it. | `label?` ('Close'), `size?` ('sm'), `variant?`, `shape?` ('circle'), `tooltip?`, `onclick` |
+| `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?` |
 | `ConfirmModal` | Yes/no confirmation dialog | `open` (bindable), `title`, `message`, `onConfirm`, `onCancel` |
-| `Drawer` | Slide-out side panel | `open` (bindable), `side`, `children` (snippet) |
+| `Drawer` | Slide-out side panel. Header ✕ is a `CloseButton`; the body carries `use:scrollEdge` (opt out with `scrollEdge={false}`). | `open` (bindable), `side`, `scrollEdge?`, `children` (snippet) |
 | `LoadingSpinner` | Spinner animation | `size`, `color` |
 | `Sparkline` | Inline mini chart | `data: number[]`, `width`, `height`, `color` |
 | `LazyImage` | Image with lazy loading + placeholder | `src`, `alt`, `placeholder` |
@@ -215,16 +226,40 @@ 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 |
 |-----------|---------|-----------|
 | `PageHeader` | The standard route header (upstreamed from the JAT IDE): uppercase/tracked "instrument label" title + slots for a count chip, subtitle, leading `icon` snippet, right-aligned `actions` cluster, `meta` metrics strip and content below the header row. `sticky` pins it to the top of the scroll container; `size='lg'` for landing screens. All color via `--color-*` tokens; entrance animation reduced-motion gated (`animate`, default off). | `title`, `subtitle?`, `count?`, `size?` ('md'\|'lg'), `sticky?`, `animate?`, `icon?`/`actions?`/`meta?`/`children` (snippets) |
+| `Breadcrumb` | Location trail in a `<nav aria-label>`; the last item is `aria-current="page"`. `maxItems` keeps the root + the last `maxItems - 1` and folds the middle into a `…` button whose menu lists the hidden levels (arrows/Home/End/Escape, click-outside; pure `collapseBreadcrumb`). Leading icons via `item.icon` (component taking `{size,class}`) or the `icon` snippet. | `items: BreadcrumbItem[]`, `maxItems?`, `icon?` (snippet `(item, i)`), `ariaLabel?` |
 | `ResizablePanel` | Resizable container | `minWidth`, `maxWidth`, `defaultWidth` |
 | `ResizableDivider` | Drag handle between panels | `onResize` |
 | `InfiniteGrid` | Cursor-paged infinite-scroll grid (from chimaro). `loadMore(cursor, {signal})` resolves `{items, nextCursor, total?}` (`nextCursor: null` = end); cells render through the `renderItem(item, i)` snippet. Change `resetKey` to start over — the in-flight page is aborted and a late page for the old key is dropped. One request in flight; items de-duped by `getKey`; short pages auto-chain until the sentinel leaves the screen; distinct skeleton / empty / exhausted / error(+Retry) states; non-item rows are `overflow-anchor: none` so scroll anchoring can't runaway-load. Scroll root = `root` or nearest scrollable ancestor. Exposes `reset()`/`retry()`. Not virtualized. Pure core: `createInfiniteLoader`. | `loadMore`, `renderItem` (snippet), `getKey?`, `resetKey?`, `columns?` / `minItemWidth?`, `gap?`, `root?`, `loadAhead?` (400px), `skeleton?`/`empty?`/`end?`/`error?` (snippets), `emptyText?`, `endText?`, `onStateChange?` |
 | `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`.
 
@@ -363,8 +398,8 @@ const callbacks: AnnotationCallbacks = {
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
-| `ThemeSelector` | DaisyUI theme switcher with preview dots | `themes`, `defaultTheme`, `dropUp`, `storageKey`, `onThemeChange` |
-| `ThemeToggle` | Icon-only sun<->moon light/dark toggle with an animated morph (transform+opacity on motion tokens; instant under reduced-motion; spring flattens on `data-motion="calm"`). A pure control — flips the bindable `theme` and fires `onchange`; storage stays with the consumer. | `theme` (bindable), `lightTheme`, `darkTheme`, `onchange`, `size` |
+| `ThemeSelector` | DaisyUI theme switcher with preview dots. `reveal` wipes the new theme in from the clicked item (`themeWipe`). | `themes`, `defaultTheme`, `dropUp`, `storageKey`, `onThemeChange`, `reveal?: boolean \| 'hard' \| 'soft'` |
+| `ThemeToggle` | Icon-only sun<->moon light/dark toggle with an animated morph (transform+opacity on motion tokens; instant under reduced-motion; spring flattens on `data-motion="calm"`). A pure control — flips the bindable `theme` and fires `onchange`; storage stays with the consumer. `reveal` runs the flip inside a `themeWipe` circular View Transition from the button (keyboard activation grows from its centre). | `theme` (bindable), `lightTheme`, `darkTheme`, `onchange`, `size`, `reveal?: boolean \| 'hard' \| 'soft'` |
 
 ### Keyboard Navigation
 
@@ -526,6 +561,12 @@ import { groupRows, groupPathKey, type GroupLevel, type GroupedItem } from "jatu
 // groupRows(rows, [{ key: t => t.project }, { key: t => t.epic }], { getRowId, collapsed, label? })
 //   → { kind:'group', key, path, depth, label, rows, count, collapsed } | { kind:'row', row, id, depth, groupPath, position }
 
+// Theme change reveal — circular View Transition from the click (or, for a
+// keyboard activation, the control's centre). Single-flight, level-scaled
+// duration, reduced-motion = instant. ThemeToggle/ThemeSelector `reveal` use it.
+import { themeWipe } from "jatui"
+// themeWipe(event, () => setTheme(next), { edge: 'soft' })  // edge: 'hard' (default) | 'soft'
+
 // Date formatting
 import { formatRelativeTime, formatDate, formatShortDate, formatDateTime } from "jatui"
 
@@ -645,7 +686,13 @@ Three rules keep DaisyUI swappable instead of load-bearing:
    internal skin, like vendored CSS — never part of a component's public
    props/API.
 3. **jatui owns the token layer.** Components consume `--jatui-*`
-   (`styles/tokens.css`: radius/spacing/border) and `--motion-*`
+   (`styles/tokens.css`: radius/spacing/border, plus the colour-intent layer —
+   `--jatui-focus-ring{,-width,-offset}`, `--jatui-surface`, `--jatui-hover-bg`,
+   `--jatui-pressed-bg`, `--jatui-separator`, `--jatui-selection-{bg,edge,solid,solid-fg}`,
+   `--jatui-chart-{1..5,grid,axis}`, `--jatui-event-{1..6}{,-bg,-fg}`,
+   `--jatui-status-{positive,caution,negative,neutral}`; all `color-mix` over DaisyUI
+   semantic vars, re-declared on `[data-theme]` so nested themes recompute — use
+   them with an inline fallback) and `--motion-*`
    (`styles/motion.css`: easing/duration) custom properties. DaisyUI theme
    variables feed INTO those tokens (as fallback-chained inputs), never
    appear directly in component styles for values the tokens cover.

package/THIRD_PARTY_NOTICES.md

@@ -49,3 +49,34 @@ Files adapted from BoardUI free components:
 BoardUI Pro items are not covered by the MIT licence. `AgentTaskList`,
 `Questionnaire` and `ContextMeter` were built from public behaviour only; no Pro
 source was read or copied.
+
+### Wave 1 (jatui-owg2z) — ideas only, written fresh for Svelte 5
+
+None of these files is a close port, so none carries the BoardUI notice. They
+follow ideas from BoardUI's free items:
+
+- `IconButton`, `CloseButton`, `LinkButton`: BoardUI icon-button, close-button
+  and link-button.
+- `use:scrollEdge`: BoardUI's scroll-region progressive-blur guidance.
+- Colour-intent tokens in `styles/tokens.css`: BoardUI's semantic theme vars,
+  reduced to a thin `color-mix` layer over DaisyUI.
+- `PinInput` one-time-code autofill: BoardUI input-otp.
+- `TextArea` `minRows`/`maxRows`: BoardUI textarea.
+- `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/actions/scrollEdge.d.ts

@@ -0,0 +1,55 @@
+/**
+ * scrollEdge — progressive-blur fade on the edge of a scroll region.
+ *
+ *   <div class="overflow-y-auto" use:scrollEdge>…</div>                 top edge
+ *   <div class="overflow-y-auto" use:scrollEdge={{ edges: 'both' }}>…</div>
+ *   <div use:scroller.action use:scrollEdge={{ edges: 'bottom' }}>…</div> chat (stick-to-bottom)
+ *
+ * When content has scrolled under an edge, that edge softens: a stationary,
+ * `pointer-events: none`, `aria-hidden` overlay with three layers —
+ *
+ *   1. a tall band of light backdrop blur (1px), masked to fade out,
+ *   2. a shorter band of heavier blur (4px), masked the same way,
+ *   3. a surface → transparent gradient.
+ *
+ * Each layer's opacity ramps 0 → 1 over the first `size` px of scroll
+ * distance from that edge, so at rest (scrollTop 0) nothing is drawn and
+ * the first line of content is never dimmed. Opacity goes on the LAYERS,
+ * never their parent: a translucent parent becomes a backdrop root and the
+ * blur would sample nothing.
+ *
+ * The overlay lives inside the scroller as a `position: sticky` strip with a
+ * negative margin, so it needs no positioned wrapper and takes no layout
+ * space. Keep headers OUTSIDE the scroller — the edge belongs to the scroll
+ * area, not the chrome above it. Opacity-only, so it is reduced-motion safe.
+ *
+ * Idea from BoardUI's scroll-region guidance (MIT); written fresh.
+ */
+export type ScrollEdgeSide = 'top' | 'bottom' | 'both';
+export interface ScrollEdgeOptions {
+    /** Which edge(s) fade. Default 'top'. Chat threads that stick to the bottom want 'bottom'. */
+    edges?: ScrollEdgeSide;
+    /** Height of the fade band and the scroll distance the ramp runs over, px. Default 24. */
+    size?: number;
+    /** Colour the gradient blends into. Default the `--jatui-surface` token (base-100). */
+    surface?: string;
+    /** Backdrop blur layers. false = gradient only (cheaper on huge lists). Default true. */
+    blur?: boolean;
+    /** Turn it off without unmounting the action. Default true. */
+    enabled?: boolean;
+}
+/** Opacity for an edge given how far content has scrolled past it. Pure. */
+export declare function edgeOpacity(distance: number, size: number): number;
+/** Scroll distance past the top and bottom edges of a scroller. Pure. */
+export declare function edgeDistances(m: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}): {
+    top: number;
+    bottom: number;
+};
+export declare function scrollEdge(node: HTMLElement, options?: ScrollEdgeOptions): {
+    update(next?: ScrollEdgeOptions): void;
+    destroy(): void;
+};

package/dist/actions/scrollEdge.js

@@ -0,0 +1,144 @@
+/**
+ * scrollEdge — progressive-blur fade on the edge of a scroll region.
+ *
+ *   <div class="overflow-y-auto" use:scrollEdge>…</div>                 top edge
+ *   <div class="overflow-y-auto" use:scrollEdge={{ edges: 'both' }}>…</div>
+ *   <div use:scroller.action use:scrollEdge={{ edges: 'bottom' }}>…</div> chat (stick-to-bottom)
+ *
+ * When content has scrolled under an edge, that edge softens: a stationary,
+ * `pointer-events: none`, `aria-hidden` overlay with three layers —
+ *
+ *   1. a tall band of light backdrop blur (1px), masked to fade out,
+ *   2. a shorter band of heavier blur (4px), masked the same way,
+ *   3. a surface → transparent gradient.
+ *
+ * Each layer's opacity ramps 0 → 1 over the first `size` px of scroll
+ * distance from that edge, so at rest (scrollTop 0) nothing is drawn and
+ * the first line of content is never dimmed. Opacity goes on the LAYERS,
+ * never their parent: a translucent parent becomes a backdrop root and the
+ * blur would sample nothing.
+ *
+ * The overlay lives inside the scroller as a `position: sticky` strip with a
+ * negative margin, so it needs no positioned wrapper and takes no layout
+ * space. Keep headers OUTSIDE the scroller — the edge belongs to the scroll
+ * area, not the chrome above it. Opacity-only, so it is reduced-motion safe.
+ *
+ * Idea from BoardUI's scroll-region guidance (MIT); written fresh.
+ */
+/** Opacity for an edge given how far content has scrolled past it. Pure. */
+export function edgeOpacity(distance, size) {
+    if (!(size > 0) || !Number.isFinite(distance))
+        return 0;
+    return Math.min(1, Math.max(0, distance / size));
+}
+/** Scroll distance past the top and bottom edges of a scroller. Pure. */
+export function edgeDistances(m) {
+    return {
+        top: Math.max(0, m.scrollTop),
+        bottom: Math.max(0, m.scrollHeight - m.clientHeight - m.scrollTop)
+    };
+}
+const DEFAULT_SURFACE = 'var(--jatui-surface, var(--color-base-100, Canvas))';
+function strip(side, o) {
+    const el = document.createElement('div');
+    el.setAttribute('aria-hidden', 'true');
+    el.dataset.scrollEdge = side;
+    const s = el.style;
+    s.position = 'sticky';
+    s.display = 'block';
+    s[side] = '0';
+    s.height = `${o.size}px`;
+    s[side === 'top' ? 'marginBottom' : 'marginTop'] = `-${o.size}px`;
+    s.pointerEvents = 'none';
+    s.zIndex = '1';
+    s.gridColumn = '1 / -1'; // a grid scroller must not give the strip its own cell
+    s.flexShrink = '0';
+    s.alignSelf = 'stretch';
+    const dir = side === 'top' ? 'to bottom' : 'to top';
+    const anchor = side === 'top' ? 'top: 0' : 'bottom: 0';
+    const layers = [];
+    if (o.blur) {
+        layers.push(`${anchor}; height: 100%; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask-image: linear-gradient(${dir}, #000, transparent); -webkit-mask-image: linear-gradient(${dir}, #000, transparent)`, `${anchor}; height: 66%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(${dir}, #000, transparent); -webkit-mask-image: linear-gradient(${dir}, #000, transparent)`);
+    }
+    layers.push(`${anchor}; height: 100%; background: linear-gradient(${dir}, ${o.surface}, transparent)`);
+    for (const css of layers) {
+        const layer = document.createElement('div');
+        layer.style.cssText = `position: absolute; left: 0; right: 0; ${css}; opacity: var(--jatui-scroll-edge-o, 0); transition: opacity var(--motion-instant, 80ms) linear;`;
+        el.appendChild(layer);
+    }
+    return el;
+}
+export function scrollEdge(node, options = {}) {
+    let opts = resolve(options);
+    let top = null;
+    let bottom = null;
+    let frame = 0;
+    let ro = null;
+    function resolve(o) {
+        return {
+            edges: o.edges ?? 'top',
+            size: o.size ?? 24,
+            surface: o.surface ?? DEFAULT_SURFACE,
+            blur: o.blur ?? true,
+            enabled: o.enabled ?? true
+        };
+    }
+    function measure() {
+        frame = 0;
+        const d = edgeDistances(node);
+        top?.style.setProperty('--jatui-scroll-edge-o', String(edgeOpacity(d.top, opts.size)));
+        bottom?.style.setProperty('--jatui-scroll-edge-o', String(edgeOpacity(d.bottom, opts.size)));
+    }
+    function schedule() {
+        if (frame)
+            return;
+        frame = requestAnimationFrame(measure);
+    }
+    function mount() {
+        unmount();
+        if (!opts.enabled)
+            return;
+        if (opts.edges !== 'bottom') {
+            top = strip('top', opts);
+            node.prepend(top);
+        }
+        if (opts.edges !== 'top') {
+            bottom = strip('bottom', opts);
+            node.append(bottom);
+        }
+        measure();
+    }
+    function unmount() {
+        top?.remove();
+        bottom?.remove();
+        top = bottom = null;
+    }
+    node.addEventListener('scroll', schedule, { passive: true });
+    if (typeof ResizeObserver !== 'undefined') {
+        ro = new ResizeObserver(schedule);
+        ro.observe(node);
+    }
+    // Content growth changes the bottom distance without a scroll event.
+    const mo = typeof MutationObserver !== 'undefined' ? new MutationObserver(schedule) : null;
+    mo?.observe(node, { childList: true, subtree: true, characterData: true });
+    mount();
+    return {
+        update(next = {}) {
+            const prev = opts;
+            opts = resolve(next);
+            const same = Object.keys(opts).every((k) => opts[k] === prev[k]);
+            if (same)
+                schedule();
+            else
+                mount();
+        },
+        destroy() {
+            node.removeEventListener('scroll', schedule);
+            ro?.disconnect();
+            mo?.disconnect();
+            if (frame)
+                cancelAnimationFrame(frame);
+            unmount();
+        }
+    };
+}

package/dist/artifact-blocks/blocks/diagram/DiagramBlock.svelte.d.ts

@@ -6,7 +6,7 @@ declare const DiagramBlock: import("svelte").Component<BlockProps<{
         id: string;
         label: string;
         sublabel?: string | undefined;
-        kind?: "data" | "input" | "output" | "note" | "default" | "decision" | "external" | "terminal" | "process" | "subroutine" | undefined;
+        kind?: "data" | "input" | "output" | "note" | "default" | "external" | "decision" | "terminal" | "process" | "subroutine" | undefined;
         tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
         shape?: "circle" | "rect" | "stadium" | "pill" | "diamond" | undefined;
     }[];

package/dist/artifact-blocks/blocks/diagram/schema.d.ts

@@ -39,8 +39,8 @@ export declare const diagramParamsSchema: z.ZodObject<{
             output: "output";
             note: "note";
             default: "default";
-            decision: "decision";
             external: "external";
+            decision: "decision";
             terminal: "terminal";
             process: "process";
             subroutine: "subroutine";

package/dist/components/AnimatedNumber.svelte

@@ -1,11 +1,45 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { Tween } from 'svelte/motion';
+	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();
+	const tween = new Tween(untrack(() => value), { easing: cubicOut, duration: 0 });
+	$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));
+		void tween.set(target, { duration: ms });
+	});
+	/** 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 = tween.current;
+		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 +88,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 +120,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/BottomSheet.svelte

@@ -26,6 +26,8 @@
              settles on the snap nearest the post-drag height.
 -->
 <script lang="ts">
+	import CloseButton from './CloseButton.svelte';
+	import { scrollEdge as scrollEdgeAction } from '../actions/scrollEdge';
 	import { onMount, untrack } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 	import type { Snippet } from 'svelte';
@@ -49,6 +51,7 @@
 		onclose = () => {},
 		shortcutRegistry,
 		shortcutContext = 'bottom-sheet',
+		scrollEdge = true,
 		children
 	}: {
 		open?: boolean;
@@ -70,6 +73,8 @@
 		shortcutRegistry?: ShortcutRegistry;
 		/** Context name pushed while open. Default `'bottom-sheet'`. */
 		shortcutContext?: string;
+		/** Soft progressive-blur fade at the top of the content once it scrolls (`use:scrollEdge`). Ignored with `fullHeight` (the slot owns scrolling). Default true. */
+		scrollEdge?: boolean;
 		children?: Snippet;
 	} = $props();
 
@@ -254,12 +259,7 @@
 		{#if title}
 			<div class="flex-shrink-0 flex items-center justify-between px-4 py-2 border-b border-base-200">
 				<span class="text-sm font-semibold">{title}</span>
-				<button
-					type="button"
-					class="btn btn-sm btn-ghost btn-circle"
-					aria-label="Close"
-					onclick={dismiss}
-				>✕</button>
+				<CloseButton label="Close" onclick={dismiss} />
 			</div>
 		{/if}
 
@@ -273,6 +273,7 @@
 				: keyboardInset > 0
 					? `padding-bottom: ${keyboardInset}px;`
 					: ''}
+			use:scrollEdgeAction={{ enabled: scrollEdge && !(fullHeight && !isDual) }}
 		>
 			{@render children?.()}
 		</div>

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

@@ -20,6 +20,8 @@ type $$ComponentProps = {
     shortcutRegistry?: ShortcutRegistry;
     /** Context name pushed while open. Default `'bottom-sheet'`. */
     shortcutContext?: string;
+    /** Soft progressive-blur fade at the top of the content once it scrolls (`use:scrollEdge`). Ignored with `fullHeight` (the slot owns scrolling). Default true. */
+    scrollEdge?: boolean;
     children?: Snippet;
 };
 declare const BottomSheet: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/CloseButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	/**
+	 * CloseButton — the one ✕ every dialog, drawer, sheet, toast and lightbox
+	 * needs. An IconButton with a built-in X glyph whose stroke is a true CSS
+	 * pixel width at every size (`vector-effect: non-scaling-stroke`), so the
+	 * cross never turns hairline at xs or chunky at lg.
+	 *
+	 *   <CloseButton onclick={close} />
+	 *   <CloseButton label="Close drawer" size="md" onclick={close} />
+	 *   <CloseButton variant="overlay" onclick={close} />   <!-- over media -->
+	 *
+	 * Idea from BoardUI's close-button (MIT); written fresh for Svelte 5.
+	 */
+	import IconButton, { type IconButtonSize, type IconButtonVariant } from './IconButton.svelte';
+
+	interface Props {
+		/** Accessible name. Default "Close" — name the thing ("Close drawer") when several are on screen. */
+		label?: string;
+		size?: IconButtonSize;
+		variant?: IconButtonVariant;
+		shape?: 'square' | 'circle';
+		disabled?: boolean;
+		/** Show the label as a tooltip (string = custom text, e.g. "Close (Esc)"). */
+		tooltip?: boolean | string;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: unknown;
+	}
+
+	let {
+		label = 'Close',
+		size = 'sm',
+		variant = 'ghost',
+		shape = 'circle',
+		disabled = false,
+		tooltip = false,
+		class: className = '',
+		onclick,
+		...rest
+	}: Props = $props();
+
+	/** Glyph box per size — the X itself is inset to ~58% of it. */
+	const GLYPH: Record<IconButtonSize, number> = { xs: 12, sm: 16, md: 18, lg: 22 };
+	const STROKE: Record<IconButtonSize, number> = { xs: 1.5, sm: 1.75, md: 2, lg: 2 };
+	const px = $derived(GLYPH[size] ?? 16);
+</script>
+
+<IconButton
+	{...rest}
+	{label}
+	{size}
+	{variant}
+	{shape}
+	{disabled}
+	{tooltip}
+	{onclick}
+	class="jatui-close-btn {className}"
+>
+	<svg
+		width={px}
+		height={px}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-linecap="round"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path
+			d="M17 7L7 17M7 7l10 10"
+			stroke-width={STROKE[size] ?? 1.75}
+			vector-effect="non-scaling-stroke"
+		/>
+	</svg>
+</IconButton>

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

@@ -0,0 +1,29 @@
+/**
+     * CloseButton — the one ✕ every dialog, drawer, sheet, toast and lightbox
+     * needs. An IconButton with a built-in X glyph whose stroke is a true CSS
+     * pixel width at every size (`vector-effect: non-scaling-stroke`), so the
+     * cross never turns hairline at xs or chunky at lg.
+     *
+     *   <CloseButton onclick={close} />
+     *   <CloseButton label="Close drawer" size="md" onclick={close} />
+     *   <CloseButton variant="overlay" onclick={close} />   <!-- over media -->
+     *
+     * Idea from BoardUI's close-button (MIT); written fresh for Svelte 5.
+     */
+import { type IconButtonSize, type IconButtonVariant } from './IconButton.svelte';
+interface Props {
+    /** Accessible name. Default "Close" — name the thing ("Close drawer") when several are on screen. */
+    label?: string;
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+    shape?: 'square' | 'circle';
+    disabled?: boolean;
+    /** Show the label as a tooltip (string = custom text, e.g. "Close (Esc)"). */
+    tooltip?: boolean | string;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const CloseButton: import("svelte").Component<Props, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;