@joewinke/jatui 0.39.0 → 0.41.0

package/dist/index.js

@@ -112,6 +112,10 @@ export { default as InfiniteSearchGrid } from './components/InfiniteSearchGrid.s
 export { createInfiniteLoader } from './components/infiniteGridLoader';
 // Components — from Flush
 export { default as Button } from './components/Button.svelte';
+// Icon-only / close / text-link buttons (BoardUI wave 1, jatui-owg2z)
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as CloseButton } from './components/CloseButton.svelte';
+export { default as LinkButton } from './components/LinkButton.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
@@ -120,6 +124,7 @@ export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
 export { default as StatusBadge } from './components/StatusBadge.svelte';
 export { default as TextInput } from './components/TextInput.svelte';
 export { default as TextArea } from './components/TextArea.svelte';
+export { textareaRowsHeight } from './utils/textareaRows';
 export { default as SelectInput } from './components/SelectInput.svelte';
 export { default as PhoneInput } from './components/PhoneInput.svelte';
 // Components — from Chimaro
@@ -245,6 +250,8 @@ export { loadGoogleMapsAPI, isGoogleMapsLoaded, isPlacesLoaded, isGeometryLoaded
 // ============================================================
 // Motion primitives
 export { tooltip } from './actions/tooltip';
+// Progressive-blur scroll-region edge (BoardUI wave 1, jatui-owg2z)
+export { scrollEdge, edgeOpacity, edgeDistances } from './actions/scrollEdge';
 export { staggerEntrance } from './actions/staggerEntrance';
 export { attention } from './actions/attention';
 // Scroll-reveal (jatui-m4uz3.3, chimaro port): IntersectionObserver
@@ -258,7 +265,7 @@ export { default as MediaExplorer } from "./components/MediaExplorer.svelte";
 export { floating, makeVirtualAnchor } from './actions/floating';
 export { glide } from './transitions/glide';
 // View Transitions kit
-export { themeWipe } from './utils/themeWipe';
+export { themeWipe, wipeOrigin, coverRadius } from './utils/themeWipe';
 export { viewTransition } from './utils/viewTransition';
 // Motion level kit (jatui-j6833): data-motion="calm|standard|lively" scales
 // the --motion-* tokens per surface (styles/motion.css); these helpers,
@@ -292,6 +299,7 @@ export { default as CopyButton } from './components/CopyButton.svelte';
 export { default as HoldToConfirm } from './components/HoldToConfirm.svelte';
 // Form gaps
 export { default as PinInput } from './components/PinInput.svelte';
+export { applyCellInput as applyPinCellInput, distribute as distributePin, cellsFromValue as pinCellsFromValue, isPinComplete, sanitizePin } from './utils/pinInput';
 export { default as PasswordMeter } from './components/PasswordMeter.svelte';
 export { default as QuantityStepper } from './components/QuantityStepper.svelte';
 // Messaging
@@ -321,6 +329,7 @@ export { createStickToBottom } from './actions/stickToBottom';
 // ANSI terminal output → HTML (upstreamed from the JAT IDE, U5 — jatui-rl7w6.3).
 export { ansiToHtml, ansiToHtmlStateful, ansiToHtmlWithLinks, ansiToHtmlWithHierarchy, linkifyUrls, stripAnsi, classifyLine, parseOutputLines, createDefaultAnsiState } from './utils/ansiToHtml';
 export { default as Breadcrumb } from './components/basic/Breadcrumb.svelte';
+export { collapseBreadcrumb } from './components/basic/breadcrumbCollapse';
 export { default as Alert } from './components/basic/Alert.svelte';
 export { default as ButtonGroup } from './components/basic/ButtonGroup.svelte';
 export { default as Switch } from './components/basic/Switch.svelte';
@@ -384,3 +393,24 @@ export { splitStreamedText } from './components/agent/streamedText';
 export { stepsSummary, stepsRemaining, isStepsFinished, clampStepProgress } from './components/progress/stepsSummary';
 export { default as NotificationCenter } from './components/NotificationCenter.svelte';
 export { DEFAULT_NOTIFICATION_TABS, DATE_GROUP_LABELS as NOTIFICATION_DATE_GROUP_LABELS, dateGroupKey as notificationDateGroupKey, groupNotificationsByDate, toTimestampMs as notificationTimestampMs, isNotificationUnread, unreadIds as unreadNotificationIds, filterByTab as filterNotificationsByTab, tabCounts as notificationTabCounts, unreadSummary as notificationUnreadSummary } from './components/notificationCenter';
+// BoardUI wave 3 (jatui-6kitr) — tree, data and dashboards.
+// TreeView renders flattenTree's flat row list (role="tree", aria-level/
+// posinset/setsize, connector guides, full APG keys + typeahead, optional
+// jatui/virtual windowing). Stats: StatCard/StatGroup (AnimatedNumber's new
+// mode="tween"), ChartCard (headline driven by chart hover, no chart lib),
+// BarList, ActivityHeatmap. SegmentedControl = radio semantics (Tabs switch
+// panels; this sets a value). SettingsSection/SettingsRow = settings pages.
+// Pure grid helpers also live on the 'jatui/grid' subpath.
+export { default as TreeView } from './components/tree/TreeView.svelte';
+export { flattenTree, collectBranchIds, pathToNode } from './components/tree/flattenTree';
+export { resolveTreeKey, treeTypeahead } from './components/tree/treeKeys';
+export { default as StatCard } from './components/stats/StatCard.svelte';
+export { default as StatGroup } from './components/stats/StatGroup.svelte';
+export { default as ChartCard } from './components/stats/ChartCard.svelte';
+export { default as BarList } from './components/stats/BarList.svelte';
+export { default as ActivityHeatmap } from './components/stats/ActivityHeatmap.svelte';
+export { buildHeatmap, moveHeatFocus, isoDay as heatmapIsoDay, defaultLevelOf as heatmapLevelOf } from './components/stats/heatmap';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as SettingsSection } from './components/settings/SettingsSection.svelte';
+export { default as SettingsRow } from './components/settings/SettingsRow.svelte';
+export * from './data/grid/index';

package/dist/styles/tokens.css

@@ -1,5 +1,5 @@
 /**
- * jatui design tokens — radius, spacing, border.
+ * jatui design tokens — radius, spacing, border, colour intent.
  *
  * Sibling of motion.css: jatui owns the token layer; DaisyUI theme
  * variables FEED INTO it (never the other way around). Components use
@@ -29,3 +29,82 @@
 	/* Border — depth comes from tonal surfaces + 1px borders, not shadows */
 	--jatui-border-w: 1px;
 }
+
+/*
+ * Colour-intent tokens (BoardUI wave 1, jatui-owg2z).
+ *
+ * A THIN component-intent layer: every value is DaisyUI's semantic colour
+ * vars mixed with `color-mix`, never a hex or a raw palette step, so a theme
+ * swap (and light ↔ dark) re-derives all of them for free. Mixing against
+ * --color-base-100 / --color-base-content is what makes the pairs flip in
+ * dark mode: the surface and the ink trade places, the mix follows.
+ *
+ * Declared on `:root` AND every `[data-theme]` element. Custom properties
+ * that contain var() are resolved where they are DECLARED, then inherited as
+ * finished colours — declared on :root alone, a nested `data-theme="dark"`
+ * panel would inherit the light root's values. Re-declaring them on each
+ * themed subtree makes them recompute against that subtree's palette.
+ *
+ * Components consume them with an inline fallback
+ * (`var(--jatui-focus-ring, …)`) so a host that never imports tokens.css
+ * still renders the same thing.
+ */
+:root,
+[data-theme] {
+	/* Focus — one ring for every interactive part */
+	--jatui-focus-ring: color-mix(in oklab, var(--color-primary) 70%, transparent);
+	--jatui-focus-ring-width: 2px;
+	--jatui-focus-ring-offset: 2px;
+
+	/* Surfaces + quiet structure */
+	--jatui-surface: var(--color-base-100); /* what a scroll-edge fade blends into */
+	--jatui-hover-bg: color-mix(in oklab, var(--color-base-content) 6%, transparent);
+	--jatui-pressed-bg: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+	--jatui-separator: color-mix(in oklab, var(--color-base-content) 12%, transparent);
+
+	/* Selection — selected rows, range bands, picked cells */
+	--jatui-selection-bg: color-mix(in oklab, var(--color-primary) 14%, transparent);
+	--jatui-selection-edge: color-mix(in oklab, var(--color-primary) 55%, transparent);
+	--jatui-selection-solid: var(--color-primary); /* range endpoints, the picked day */
+	--jatui-selection-solid-fg: var(--color-primary-content);
+
+	/* Chart — categorical series 1..5, plus the quiet chart furniture */
+	--jatui-chart-1: var(--color-primary);
+	--jatui-chart-2: var(--color-secondary);
+	--jatui-chart-3: var(--color-accent);
+	--jatui-chart-4: var(--color-info);
+	--jatui-chart-5: var(--color-warning);
+	--jatui-chart-grid: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+	--jatui-chart-axis: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+
+	/*
+	 * Event hues 1..6 — calendar chips, timeline bars, tags. Each hue is a
+	 * triplet: a tinted chip surface, legible ink, and a solid edge/dot.
+	 * bg mixes the hue into the surface; fg mixes it into the ink — both
+	 * flip with the theme.
+	 */
+	--jatui-event-1: var(--color-primary);
+	--jatui-event-2: var(--color-secondary);
+	--jatui-event-3: var(--color-accent);
+	--jatui-event-4: var(--color-info);
+	--jatui-event-5: var(--color-success);
+	--jatui-event-6: var(--color-warning);
+	--jatui-event-1-bg: color-mix(in oklab, var(--jatui-event-1) 16%, var(--color-base-100));
+	--jatui-event-2-bg: color-mix(in oklab, var(--jatui-event-2) 16%, var(--color-base-100));
+	--jatui-event-3-bg: color-mix(in oklab, var(--jatui-event-3) 16%, var(--color-base-100));
+	--jatui-event-4-bg: color-mix(in oklab, var(--jatui-event-4) 16%, var(--color-base-100));
+	--jatui-event-5-bg: color-mix(in oklab, var(--jatui-event-5) 16%, var(--color-base-100));
+	--jatui-event-6-bg: color-mix(in oklab, var(--jatui-event-6) 16%, var(--color-base-100));
+	--jatui-event-1-fg: color-mix(in oklab, var(--jatui-event-1) 55%, var(--color-base-content));
+	--jatui-event-2-fg: color-mix(in oklab, var(--jatui-event-2) 55%, var(--color-base-content));
+	--jatui-event-3-fg: color-mix(in oklab, var(--jatui-event-3) 55%, var(--color-base-content));
+	--jatui-event-4-fg: color-mix(in oklab, var(--jatui-event-4) 55%, var(--color-base-content));
+	--jatui-event-5-fg: color-mix(in oklab, var(--jatui-event-5) 55%, var(--color-base-content));
+	--jatui-event-6-fg: color-mix(in oklab, var(--jatui-event-6) 55%, var(--color-base-content));
+
+	/* Status intents — availability dots, deltas, soft banners */
+	--jatui-status-positive: var(--color-success);
+	--jatui-status-caution: var(--color-warning);
+	--jatui-status-negative: var(--color-error);
+	--jatui-status-neutral: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+}

package/dist/utils/pinInput.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Pure cell logic behind PinInput (jatui-owg2z). No DOM — unit-tested.
+ *
+ * One rule set covers typing, paste and OS one-time-code autofill:
+ *  - a single character replaces the cell and advances;
+ *  - several characters DISTRIBUTE from the cell they landed in (paste from
+ *    the caret);
+ *  - a whole code (≥ length characters) fills from the FIRST cell no matter
+ *    which cell received it — that is what iOS/Android SMS autofill and
+ *    Chrome's WebOTP do: they drop the full code into the focused field.
+ */
+export interface PinCellOptions {
+    length: number;
+    numeric?: boolean;
+}
+export interface PinCellResult {
+    cells: string[];
+    /** Index to focus next. */
+    focus: number;
+}
+/** Strip whitespace and separators; digits only when numeric. */
+export declare function sanitizePin(raw: string, numeric?: boolean): string;
+/** Normalise an external value into exactly `length` cells. */
+export declare function cellsFromValue(value: string, length: number, numeric?: boolean): string[];
+/**
+ * Apply what the browser put into cell `index`. `raw` is the cell's whole
+ * new value (with no maxlength, a typed character arrives NEXT TO the old
+ * one — "3" + "7" → "37" — so the previous char is dropped first).
+ */
+export declare function applyCellInput(cells: readonly string[], index: number, raw: string, { length, numeric }: PinCellOptions): PinCellResult;
+/** Paste / autofill: spread `text` across cells starting at `start`. */
+export declare function distribute(cells: readonly string[], start: number, text: string, { length, numeric }: PinCellOptions): PinCellResult;
+export declare function isPinComplete(cells: readonly string[], length: number): boolean;

package/dist/utils/pinInput.js

@@ -0,0 +1,63 @@
+/**
+ * Pure cell logic behind PinInput (jatui-owg2z). No DOM — unit-tested.
+ *
+ * One rule set covers typing, paste and OS one-time-code autofill:
+ *  - a single character replaces the cell and advances;
+ *  - several characters DISTRIBUTE from the cell they landed in (paste from
+ *    the caret);
+ *  - a whole code (≥ length characters) fills from the FIRST cell no matter
+ *    which cell received it — that is what iOS/Android SMS autofill and
+ *    Chrome's WebOTP do: they drop the full code into the focused field.
+ */
+/** Strip whitespace and separators; digits only when numeric. */
+export function sanitizePin(raw, numeric = false) {
+    const s = raw.replace(/[\s\-–—·.]/g, '');
+    return numeric ? s.replace(/\D/g, '') : s;
+}
+/** Normalise an external value into exactly `length` cells. */
+export function cellsFromValue(value, length, numeric = false) {
+    const chars = [...sanitizePin(value ?? '', numeric)].slice(0, length);
+    return Array.from({ length }, (_, i) => chars[i] ?? '');
+}
+/**
+ * Apply what the browser put into cell `index`. `raw` is the cell's whole
+ * new value (with no maxlength, a typed character arrives NEXT TO the old
+ * one — "3" + "7" → "37" — so the previous char is dropped first).
+ */
+export function applyCellInput(cells, index, raw, { length, numeric = false }) {
+    const next = Array.from({ length }, (_, i) => cells[i] ?? '');
+    let text = sanitizePin(raw, numeric);
+    const prev = next[index];
+    // Typed over an existing character: keep only what is new.
+    if (prev && [...text].length === 2 && text.includes(prev)) {
+        text = text.startsWith(prev) ? text.slice(prev.length) : text.slice(0, -prev.length);
+    }
+    const chars = [...text];
+    if (chars.length === 0) {
+        next[index] = '';
+        return { cells: next, focus: index };
+    }
+    if (chars.length === 1) {
+        next[index] = chars[0];
+        return { cells: next, focus: Math.min(index + 1, length - 1) };
+    }
+    return distribute(next, chars.length >= length ? 0 : index, text, { length, numeric });
+}
+/** Paste / autofill: spread `text` across cells starting at `start`. */
+export function distribute(cells, start, text, { length, numeric = false }) {
+    const next = Array.from({ length }, (_, i) => cells[i] ?? '');
+    const chars = [...sanitizePin(text, numeric)];
+    const from = chars.length >= length ? 0 : start;
+    let i = from;
+    for (const c of chars) {
+        if (i >= length)
+            break;
+        next[i++] = c;
+    }
+    const firstEmpty = next.findIndex((c) => !c);
+    const focus = firstEmpty === -1 ? length - 1 : Math.min(i, length - 1);
+    return { cells: next, focus };
+}
+export function isPinComplete(cells, length) {
+    return cells.length >= length && cells.slice(0, length).every((c) => c !== '');
+}

package/dist/utils/textareaRows.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Row-quantized auto-grow for TextArea (jatui-owg2z, BoardUI wave 1). Pure.
+ *
+ * Grows a whole line at a time between `minRows` and `maxRows`, then
+ * scrolls — no sub-line jitter while typing. `chrome` is the vertical
+ * padding + border in px (the element is border-box).
+ */
+export interface TextareaRowsInput {
+    /** The element's scrollHeight measured at `height: auto` (content + padding). */
+    scrollHeight: number;
+    lineHeight: number;
+    /** Vertical padding + border, px. */
+    chrome: number;
+    /** Vertical padding only, px (scrollHeight includes padding, not border). */
+    padding: number;
+    minRows: number;
+    maxRows?: number;
+}
+export declare function textareaRowsHeight(m: TextareaRowsInput): {
+    rows: number;
+    height: number;
+    overflow: 'hidden' | 'auto';
+};

package/dist/utils/textareaRows.js

@@ -0,0 +1,13 @@
+export function textareaRowsHeight(m) {
+    const lh = m.lineHeight > 0 ? m.lineHeight : 20;
+    const min = Math.max(1, Math.floor(m.minRows));
+    const max = m.maxRows != null ? Math.max(min, Math.floor(m.maxRows)) : Infinity;
+    // Content lines; a hair of tolerance so 3.0001 lines is still 3.
+    const contentLines = Math.ceil((m.scrollHeight - m.padding) / lh - 0.01);
+    const rows = Math.min(max, Math.max(min, contentLines));
+    return {
+        rows,
+        height: Math.round(rows * lh + m.chrome),
+        overflow: contentLines > rows ? 'auto' : 'hidden'
+    };
+}

package/dist/utils/themeWipe.d.ts

@@ -1,21 +1,40 @@
+export interface ThemeWipeOptions {
+    /** 'hard' (default) clip-path circle, or 'soft' — a feathered mask edge. */
+    edge?: 'hard' | 'soft';
+    /** Standard-level duration in ms; scaled by the motion level. Default 500. */
+    duration?: number;
+    /** Explicit origin: a point, or an element whose centre is used. Overrides the event. */
+    origin?: {
+        x: number;
+        y: number;
+    } | Element | null;
+}
+type Point = {
+    x: number;
+    y: number;
+};
 /**
- * themeWipe — circular View Transition reveal from a click origin.
- *
- * Wraps document.startViewTransition, computes a covering radius from the
- * click point, and animates ::view-transition-new(root) with a clip-path
- * circle via WAAPI (~500ms, var(--motion-glide)).
- *
- * Falls back gracefully: if startViewTransition is unsupported or
- * prefers-reduced-motion is set, applyTheme() runs synchronously with no
- * animation.
+ * Where the wipe grows from. Pure apart from reading the element rect.
+ * Keyboard-synthesised clicks report clientX = clientY = 0; those use the
+ * element's centre instead of the top-left corner.
  */
+export declare function wipeOrigin(event: Pick<MouseEvent, 'clientX' | 'clientY' | 'currentTarget' | 'target'> | null, viewport: {
+    width: number;
+    height: number;
+}, origin?: ThemeWipeOptions['origin']): Point;
+/** Radius that covers the whole viewport from `p`. Pure. */
+export declare function coverRadius(p: Point, viewport: {
+    width: number;
+    height: number;
+}): number;
+/** WAAPI keyframes for the soft (mask) edge. Pure. */
+export declare function softWipeKeyframes(p: Point, radius: number): Keyframe[];
 /**
- * @param event - The click (or pointer) event that triggered the theme toggle.
- *                Used to anchor the reveal circle. Pass null to default to
- *                screen center.
- * @param applyTheme - Callback that performs the actual theme mutation
- *                     (e.g. set data-theme, update localStorage). Called
- *                     inside the startViewTransition callback so the snapshot
- *                     captures the old state and the new DOM is recorded after.
+ * @param event - The click/pointer/keyboard event that triggered the toggle
+ *                (anchors the circle). Pass null for the viewport centre.
+ * @param applyTheme - Performs the theme mutation (data-theme, storage). Runs
+ *                     inside startViewTransition so the old state is captured
+ *                     before it.
  */
-export declare function themeWipe(event: MouseEvent | PointerEvent | null, applyTheme: () => void): Promise<void>;
+export declare function themeWipe(event: MouseEvent | PointerEvent | KeyboardEvent | null, applyTheme: () => void, options?: ThemeWipeOptions): Promise<void>;
+export {};

package/dist/utils/themeWipe.js

@@ -2,48 +2,158 @@
  * themeWipe — circular View Transition reveal from a click origin.
  *
  * Wraps document.startViewTransition, computes a covering radius from the
- * click point, and animates ::view-transition-new(root) with a clip-path
- * circle via WAAPI (~500ms, var(--motion-glide)).
+ * origin, and grows ::view-transition-new(root) from it with WAAPI.
  *
- * Falls back gracefully: if startViewTransition is unsupported or
- * prefers-reduced-motion is set, applyTheme() runs synchronously with no
- * animation.
+ *   themeWipe(event, () => setTheme(next))                       hard edge
+ *   themeWipe(event, () => setTheme(next), { edge: 'soft' })     feathered edge
+ *
+ * Behaviour (BoardUI wave 1 fixes, jatui-owg2z):
+ *  - Origin: the pointer position; a KEYBOARD activation (clientX/Y both 0)
+ *    uses the centre of the element that fired it (`event.currentTarget`,
+ *    or `options.origin`), never the top-left corner. No event → viewport
+ *    centre.
+ *  - Single-flight: a second call while a wipe is running skips the running
+ *    transition and applies the new theme at once — no overlapping
+ *    transitions on a double-click.
+ *  - Motion tokens: duration is level-scaled (`data-motion` calm ×0.75,
+ *    lively ×1.25) and the easing is `--motion-glide`. Reduced motion (or no
+ *    View Transitions support) applies the theme synchronously.
+ *  - The UA's default root cross-fade is suppressed for the duration, so the
+ *    circle is the only thing that moves.
+ *
+ * The returned promise resolves once the theme is applied and any animation
+ * has finished.
  */
-const DURATION = 500;
+import { getMotionContext, motionDuration } from '../motion/level';
 const EASING = 'cubic-bezier(0.16, 1, 0.3, 1)'; // --motion-glide fallback
+/** Standard-level duration, ms (scaled by the motion level). */
+const BASE_DURATION = 500;
+/** Soft edge: the opaque core is this fraction of the mask circle's radius. */
+const SOFT_CORE = 0.82;
+function centreOf(el) {
+    const r = el.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+}
 /**
- * @param event - The click (or pointer) event that triggered the theme toggle.
- *                Used to anchor the reveal circle. Pass null to default to
- *                screen center.
- * @param applyTheme - Callback that performs the actual theme mutation
- *                     (e.g. set data-theme, update localStorage). Called
- *                     inside the startViewTransition callback so the snapshot
- *                     captures the old state and the new DOM is recorded after.
+ * Where the wipe grows from. Pure apart from reading the element rect.
+ * Keyboard-synthesised clicks report clientX = clientY = 0; those use the
+ * element's centre instead of the top-left corner.
  */
-export async function themeWipe(event, applyTheme) {
-    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    if (prefersReduced || !document.startViewTransition) {
+export function wipeOrigin(event, viewport, origin) {
+    if (origin) {
+        if ('getBoundingClientRect' in origin)
+            return centreOf(origin);
+        return origin;
+    }
+    if (event) {
+        // KeyboardEvents carry no clientX/Y at all; synthesised clicks carry 0,0.
+        const cx = typeof event.clientX === 'number' ? event.clientX : 0;
+        const cy = typeof event.clientY === 'number' ? event.clientY : 0;
+        if (cx !== 0 || cy !== 0)
+            return { x: cx, y: cy };
+        const el = (event.currentTarget ?? event.target);
+        if (el && typeof el.getBoundingClientRect === 'function')
+            return centreOf(el);
+    }
+    return { x: viewport.width / 2, y: viewport.height / 2 };
+}
+/** Radius that covers the whole viewport from `p`. Pure. */
+export function coverRadius(p, viewport) {
+    return Math.hypot(Math.max(p.x, viewport.width - p.x), Math.max(p.y, viewport.height - p.y));
+}
+/** WAAPI keyframes for the soft (mask) edge. Pure. */
+export function softWipeKeyframes(p, radius) {
+    const end = (2 * radius) / SOFT_CORE;
+    const frame = (size) => ({
+        maskSize: `${size}px ${size}px`,
+        maskPosition: `${p.x - size / 2}px ${p.y - size / 2}px`,
+        webkitMaskSize: `${size}px ${size}px`,
+        webkitMaskPosition: `${p.x - size / 2}px ${p.y - size / 2}px`
+    });
+    return [frame(0), frame(end)];
+}
+let running = null;
+const STYLE_ID = 'jatui-theme-wipe-style';
+function setWipeStyle(edge) {
+    document.getElementById(STYLE_ID)?.remove();
+    if (!edge)
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    const mask = edge === 'soft'
+        ? `mask-image: radial-gradient(closest-side, #000 ${SOFT_CORE * 100}%, transparent);
+			   -webkit-mask-image: radial-gradient(closest-side, #000 ${SOFT_CORE * 100}%, transparent);
+			   mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
+			   mask-size: 0 0; -webkit-mask-size: 0 0;`
+        : '';
+    style.textContent = `
+		::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
+		::view-transition-new(root) { ${mask} }
+	`;
+    document.head.appendChild(style);
+}
+/**
+ * @param event - The click/pointer/keyboard event that triggered the toggle
+ *                (anchors the circle). Pass null for the viewport centre.
+ * @param applyTheme - Performs the theme mutation (data-theme, storage). Runs
+ *                     inside startViewTransition so the old state is captured
+ *                     before it.
+ */
+export async function themeWipe(event, applyTheme, options = {}) {
+    if (typeof document === 'undefined') {
+        applyTheme();
+        return;
+    }
+    // Single-flight: finish the running wipe instantly, then apply this one plainly.
+    if (running) {
+        const prev = running;
+        running = null;
+        prev.skipTransition();
+        // Its update callback still runs (asynchronously) — let it land first,
+        // or it would overwrite the theme applied here.
+        await prev.updateCallbackDone.catch(() => { });
         applyTheme();
         return;
     }
-    // Origin: click point or viewport center
-    const x = event ? event.clientX : window.innerWidth / 2;
-    const y = event ? event.clientY : window.innerHeight / 2;
-    // Radius that covers the entire viewport from the click origin
-    const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+    const ctx = getMotionContext();
+    const duration = motionDuration(options.duration ?? BASE_DURATION, ctx);
+    if (ctx.reduced || duration <= 0 || !document.startViewTransition) {
+        applyTheme();
+        return;
+    }
+    const viewport = { width: window.innerWidth, height: window.innerHeight };
+    const p = wipeOrigin(event, viewport, options.origin);
+    const radius = coverRadius(p, viewport);
+    const edge = options.edge ?? 'hard';
+    setWipeStyle(edge);
     const transition = document.startViewTransition(applyTheme);
-    // Wait until both snapshots are captured before animating
-    await transition.ready;
-    // Read the resolved --motion-glide easing from CSS custom properties
-    const resolvedEasing = getComputedStyle(document.documentElement)
-        .getPropertyValue('--motion-glide')
-        .trim() || EASING;
-    document.documentElement.animate([
-        { clipPath: `circle(0px at ${x}px ${y}px)` },
-        { clipPath: `circle(${endRadius}px at ${x}px ${y}px)` }
-    ], {
-        duration: DURATION,
-        easing: resolvedEasing,
-        pseudoElement: '::view-transition-new(root)'
-    });
+    running = transition;
+    try {
+        await transition.ready;
+        const easing = getComputedStyle(document.documentElement).getPropertyValue('--motion-glide').trim() ||
+            EASING;
+        const keyframes = edge === 'soft'
+            ? softWipeKeyframes(p, radius)
+            : [
+                { clipPath: `circle(0px at ${p.x}px ${p.y}px)` },
+                { clipPath: `circle(${radius}px at ${p.x}px ${p.y}px)` }
+            ];
+        document.documentElement.animate(keyframes, {
+            duration,
+            easing,
+            fill: 'forwards',
+            pseudoElement: '::view-transition-new(root)'
+        });
+        await transition.finished;
+    }
+    catch {
+        // Skipped or aborted — the theme callback has still run.
+    }
+    finally {
+        if (running === transition)
+            running = null;
+        // A newer wipe may own the style element by now — leave it alone.
+        if (!running)
+            setWipeStyle(null);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -34,6 +34,10 @@
       "svelte": "./dist/components/table/index.js",
       "default": "./dist/components/table/index.js"
     },
+    "./grid": {
+      "types": "./dist/data/grid/index.d.ts",
+      "default": "./dist/data/grid/index.js"
+    },
     "./virtual": {
       "types": "./dist/virtual/index.d.ts",
       "svelte": "./dist/virtual/index.js",