@joewinke/jatui 0.38.5 → 0.39.0

package/dist/components/agent/Questionnaire.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type QuestionnaireAnswers, type QuestionnaireQuestion } from './questionnaire';
+interface Props {
+    /** AskUserQuestion-shaped questions. */
+    questions: QuestionnaireQuestion[];
+    /** Answers aligned with `questions` (bindable). */
+    answers?: QuestionnaireAnswers;
+    /** Current question index (bindable). */
+    step?: number;
+    /** Show the free-text "Other" row on every question. */
+    allowOther?: boolean;
+    otherLabel?: string;
+    otherPlaceholder?: string;
+    /** Auto-advance delay (ms) after a single-select pick; `false` disables. */
+    advanceDelay?: number | false;
+    submitLabel?: string;
+    nextLabel?: string;
+    previousLabel?: string;
+    /** Card heading, e.g. "A few questions before I start". */
+    title?: string;
+    /** Done stays disabled until every question has an answer. */
+    requireAll?: boolean;
+    disabled?: boolean;
+    onChange?: (answers: QuestionnaireAnswers) => void;
+    onComplete?: (answers: QuestionnaireAnswers) => void;
+    class?: string;
+}
+declare const Questionnaire: import("svelte").Component<Props, {}, "step" | "answers">;
+type Questionnaire = ReturnType<typeof Questionnaire>;
+export default Questionnaire;

package/dist/components/agent/ShimmerText.svelte

@@ -0,0 +1,100 @@
+<!--
+  ShimmerText — a highlight that travels across a line of text ("Thinking",
+  "Searching the docs", a running task title). One tone in, every stop derived
+  from it with color-mix, so any token colour shimmers consistently.
+
+  The single-tone gradient idea comes from BoardUI's agent-thinking label:
+    MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+
+  Decorative loop: marked .jatui-motion-ambient and turned off (plain text in
+  the tone colour, no gradient left behind) under data-motion="calm" and
+  prefers-reduced-motion. `active={false}` does the same on demand.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { TONE_COLOR, type AgentThinkingTone } from './agentThinking';
+
+	interface Props {
+		/** The text. Or pass children for inline markup. */
+		text?: string;
+		/** Token tone, or any CSS colour (e.g. 'var(--color-info)'). */
+		tone?: AgentThinkingTone | (string & {});
+		/** One sweep, ms. */
+		duration?: number;
+		/** false = plain text in the tone colour (the shimmer stops). */
+		active?: boolean;
+		/** Element to render. */
+		as?: 'span' | 'div' | 'p' | 'strong';
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		text,
+		tone = 'default',
+		duration = 2600,
+		active = true,
+		as = 'span',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const color = $derived(TONE_COLOR[tone as AgentThinkingTone] ?? tone);
+</script>
+
+<svelte:element
+	this={as}
+	class="jatui-shimmer {className}"
+	class:jatui-motion-ambient={active}
+	class:is-active={active}
+	style:--jatui-shimmer-tone={color}
+	style:--jatui-shimmer-duration="{duration}ms"
+>
+	{#if children}{@render children()}{:else}{text}{/if}
+</svelte:element>
+
+<style>
+	.jatui-shimmer {
+		color: var(--jatui-shimmer-tone);
+	}
+
+	.jatui-shimmer.is-active {
+		color: transparent;
+		background-image: linear-gradient(
+			100deg,
+			color-mix(in oklab, var(--jatui-shimmer-tone) 55%, transparent) 30%,
+			var(--jatui-shimmer-tone) 50%,
+			color-mix(in oklab, var(--jatui-shimmer-tone) 55%, transparent) 70%
+		);
+		background-size: 300% 100%;
+		background-position: 200% center;
+		-webkit-background-clip: text;
+		background-clip: text;
+		animation: jatui-shimmer-sweep var(--jatui-shimmer-duration) linear infinite;
+	}
+
+	@keyframes jatui-shimmer-sweep {
+		from {
+			background-position: 200% center;
+		}
+		to {
+			background-position: -100% center;
+		}
+	}
+
+	/* Calm / reduced motion: solid text, not a frozen half-dim gradient. */
+	:global([data-motion='calm']) .jatui-shimmer.is-active,
+	.jatui-shimmer.is-active:global([data-motion='calm']) {
+		color: var(--jatui-shimmer-tone);
+		background-image: none;
+		animation: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-shimmer.is-active {
+			color: var(--jatui-shimmer-tone);
+			background-image: none;
+			animation: none;
+		}
+	}
+</style>

package/dist/components/agent/ShimmerText.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type AgentThinkingTone } from './agentThinking';
+interface Props {
+    /** The text. Or pass children for inline markup. */
+    text?: string;
+    /** Token tone, or any CSS colour (e.g. 'var(--color-info)'). */
+    tone?: AgentThinkingTone | (string & {});
+    /** One sweep, ms. */
+    duration?: number;
+    /** false = plain text in the tone colour (the shimmer stops). */
+    active?: boolean;
+    /** Element to render. */
+    as?: 'span' | 'div' | 'p' | 'strong';
+    class?: string;
+    children?: Snippet;
+}
+declare const ShimmerText: import("svelte").Component<Props, {}, "">;
+type ShimmerText = ReturnType<typeof ShimmerText>;
+export default ShimmerText;

package/dist/components/agent/StreamedText.svelte

@@ -0,0 +1,135 @@
+<!--
+  StreamedText — streamed assistant text that reveals per BLOCK (paragraph or
+  line), never per token or word.
+
+  Why blocks: a token arrives as a word fragment; a fade/blur on that fragment
+  then mutates into the finished word with no transition, which reads as
+  stutter. Here each block mounts once (keyed by its index — the splitter in
+  ./streamedText.ts is append-only, so earlier blocks never change), plays a
+  short fade + un-blur on the motion tokens, and from then on only GROWS as
+  text arrives. Blocks already present on first render (history) don't
+  animate; under prefers-reduced-motion the reveal is instant.
+  Idea adapted from BoardUI's agent-chat StreamedText
+    (MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)).
+
+  Props:
+    text         the accumulated text so far
+    streaming    shows a subtle caret after the last block while true
+    split        'paragraph' (blank-line separated, fences kept whole; default)
+                 or 'line'
+    as           root element (default 'div')
+    renderBlock  Snippet<[text, index]> to render each block yourself (e.g.
+                 markdown → HTML). The caret is then appended after your block.
+
+  ─── Recipe: when to show the thinking row ──────────────────────────────────
+  Show <AgentThinking> until the reply's first TEXT part exists — not until the
+  request leaves the "submitted" state. Reasoning models flip a chat transport
+  to "streaming" as soon as reasoning/tool chunks arrive, so keying the
+  indicator off status === 'submitted' hides it while the transcript is still
+  empty, leaving a blank gap:
+
+    const answer = $derived(message.parts.filter((p) => p.type === 'text').map((p) => p.text).join(''))
+    {#if busy && !answer}<AgentThinking label="Thinking" />{/if}
+    {#if answer}<StreamedText text={answer} streaming={busy} />{/if}
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { resolveMotionTiming } from '../../motion/transitions';
+	import { splitStreamedText, type StreamedTextSplit } from './streamedText';
+
+	interface Props {
+		text: string;
+		streaming?: boolean;
+		split?: StreamedTextSplit;
+		as?: string;
+		class?: string;
+		renderBlock?: Snippet<[string, number]>;
+	}
+
+	let {
+		text,
+		streaming = false,
+		split = 'paragraph',
+		as = 'div',
+		class: className = '',
+		renderBlock
+	}: Props = $props();
+
+	const blocks = $derived(splitStreamedText(text ?? '', split));
+
+	/** Block entrance: opacity + a 4px blur + a small rise, on the motion tokens. */
+	function blockIn(node: Element) {
+		const { delay, duration, easing } = resolveMotionTiming(node, {}, {
+			duration: 'move',
+			easing: 'glide'
+		});
+		return {
+			delay,
+			duration: duration * 1.4,
+			easing,
+			css: (t: number, u: number) =>
+				`opacity: ${t}; filter: blur(${(u * 4).toFixed(2)}px); transform: translateY(${(u * 4).toFixed(2)}px);`
+		};
+	}
+</script>
+
+<svelte:element this={as} class="streamed-text {className}" aria-busy={streaming ? 'true' : undefined}>
+	{#each blocks as block, i (block.key)}
+		{@const live = streaming && i === blocks.length - 1}
+		{#if renderBlock}
+			<div class="streamed-text-block" in:blockIn>
+				{@render renderBlock(block.text, i)}{#if live}<span class="streamed-text-caret jatui-motion-ambient" aria-hidden="true"></span>{/if}
+			</div>
+		{:else}
+			<p class="streamed-text-block streamed-text-plain" in:blockIn>
+				{block.text}{#if live}<span class="streamed-text-caret jatui-motion-ambient" aria-hidden="true"></span>{/if}
+			</p>
+		{/if}
+	{/each}
+	{#if streaming && blocks.length === 0}
+		<span class="streamed-text-caret jatui-motion-ambient" aria-hidden="true"></span>
+	{/if}
+</svelte:element>
+
+<style>
+	.streamed-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		min-width: 0;
+	}
+
+	.streamed-text-block {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+
+	.streamed-text-plain {
+		margin: 0;
+		white-space: pre-wrap;
+	}
+
+	.streamed-text-caret {
+		display: inline-block;
+		width: 0.5em;
+		height: 1em;
+		margin-left: 0.15em;
+		vertical-align: -0.15em;
+		border-radius: 1px;
+		background: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		animation: streamed-text-caret 1.1s steps(1, end) infinite;
+	}
+
+	@keyframes streamed-text-caret {
+		50% {
+			opacity: 0;
+		}
+	}
+
+	/* Static caret under reduced motion (the global floor also stops it). */
+	@media (prefers-reduced-motion: reduce) {
+		.streamed-text-caret {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/agent/StreamedText.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type StreamedTextSplit } from './streamedText';
+interface Props {
+    text: string;
+    streaming?: boolean;
+    split?: StreamedTextSplit;
+    as?: string;
+    class?: string;
+    renderBlock?: Snippet<[string, number]>;
+}
+declare const StreamedText: import("svelte").Component<Props, {}, "">;
+type StreamedText = ReturnType<typeof StreamedText>;
+export default StreamedText;

package/dist/components/agent/agentLog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The elbow sits a fixed distance from the row's top, not at 50%, so a row
+ * whose label wraps still branches at its first line: half a 20px line plus
+ * the row's 4px top padding.
+ */
+export declare const BRANCH_Y = 14;
+export declare const BRANCH_RADIUS = 6;
+export declare const BRANCH_WIDTH = 12;
+/** Down the trunk, round the corner, out to the label. */
+export declare const BRANCH_PATH = "M0.5 0 V8 Q0.5 14 6.5 14 H11.5";
+export interface AgentLogContext {
+    /**
+     * Has the log finished its first render? Rows present on first paint (a
+     * history view, a re-opened group) render at rest; rows added afterwards
+     * grow in. Plain value, not reactive: each row reads it once, at mount.
+     */
+    isLive(): boolean;
+    /** The log draws a bridge above its first row (nested lists). */
+    bridged: boolean;
+}
+export declare function setAgentLogContext(ctx: AgentLogContext): void;
+export declare function getAgentLogContext(): AgentLogContext | undefined;

package/dist/components/agent/agentLog.js

@@ -0,0 +1,26 @@
+/**
+ * Shared geometry + context for AgentLog / AgentLogRow.
+ *
+ * Tree-guide geometry adapted from BoardUI's agent-log:
+ *   MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+ * (fixed elbow height so wrapped labels branch at their first line; branch
+ * drawn as one path, trunk as a 1px bar scaling from its top.)
+ */
+import { getContext, setContext } from 'svelte';
+/**
+ * The elbow sits a fixed distance from the row's top, not at 50%, so a row
+ * whose label wraps still branches at its first line: half a 20px line plus
+ * the row's 4px top padding.
+ */
+export const BRANCH_Y = 14;
+export const BRANCH_RADIUS = 6;
+export const BRANCH_WIDTH = 12;
+/** Down the trunk, round the corner, out to the label. */
+export const BRANCH_PATH = `M0.5 0 V${BRANCH_Y - BRANCH_RADIUS} Q0.5 ${BRANCH_Y} ${0.5 + BRANCH_RADIUS} ${BRANCH_Y} H11.5`;
+const KEY = Symbol('jatui-agent-log');
+export function setAgentLogContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getAgentLogContext() {
+    return getContext(KEY);
+}

package/dist/components/agent/agentTaskList.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Pure model behind AgentTaskList: unit counting (a task header and each of
+ * its steps are one reveal unit), what is visible at a given reveal count,
+ * the status shown, the fold policy, and the source-mark stack. No DOM —
+ * tests/unit/agentTaskList.test.ts runs it in node.
+ *
+ * Our own design (clean-room); the reveal pacing it feeds is RevealCore.
+ */
+import type { Component } from 'svelte';
+export type AgentTaskStatus = 'pending' | 'running' | 'done' | 'error';
+/** A resource a step touched — a file, a table, a URL. */
+export interface AgentTaskChip {
+    label: string;
+    /** An icon component taking `{ size, class }` (e.g. lucide-svelte), or a short text glyph. */
+    icon?: Component<{
+        size?: number | string;
+        class?: string;
+    }> | string;
+    /** Makes the chip a link. */
+    href?: string;
+}
+/** A page a research step read. */
+export interface AgentTaskSource {
+    title: string;
+    href?: string;
+    /** Shown in the hover card; derived from `href` when omitted. */
+    domain?: string;
+    /** Host-supplied icon URL (e.g. your favicon proxy). Falls back to a letter tile. */
+    favicon?: string;
+}
+export interface AgentTaskStep {
+    id?: string;
+    label: string;
+    /** Trailing detail, e.g. "5 results" or "212 ms". */
+    meta?: string;
+    chips?: AgentTaskChip[];
+    /** Research step: branches into a "Sources" row of site marks. */
+    sources?: AgentTaskSource[];
+}
+export interface AgentTask {
+    id: string;
+    label: string;
+    status: AgentTaskStatus;
+    steps: AgentTaskStep[];
+}
+/** `true` folds each task as it finishes; `'all'` folds every task together at the end. */
+export type CollapsePolicy = boolean | 'all';
+export interface TaskReveal {
+    /** Unit index of this task's header. */
+    offset: number;
+    /** The header has been revealed. */
+    visible: boolean;
+    /** How many of its steps are revealed. */
+    stepsVisible: number;
+    /** Header and every step are revealed. */
+    allRevealed: boolean;
+    /** Some unit after this task is revealed (the log has moved on). */
+    passed: boolean;
+}
+export declare function countUnits(tasks: readonly AgentTask[]): number;
+export declare function layoutTaskReveal(tasks: readonly AgentTask[], count: number): TaskReveal[];
+/**
+ * The status to show. A task reported done/error still reads as running
+ * while its steps are being revealed, so a replayed (timer-driven) log never
+ * shows a check mark above steps that haven't appeared yet.
+ */
+export declare function displayStatus(task: AgentTask, r: TaskReveal): AgentTaskStatus;
+/** Every unit is revealed and no task is still pending or running. */
+export declare function isListComplete(tasks: readonly AgentTask[], revealed: number): boolean;
+/**
+ * Should the policy fold this task? Only finished-and-done tasks fold — a
+ * failed task stays open so the error is visible.
+ *   true   once the log has moved past it (or the list is complete)
+ *   'all'  only when the whole list is complete
+ */
+export declare function foldedByPolicy(task: AgentTask, r: TaskReveal, policy: CollapsePolicy | undefined, listComplete: boolean): boolean;
+/** Open = the user's choice when they made one, else the policy. */
+export declare function isTaskOpen(folded: boolean, override: boolean | undefined): boolean;
+export declare const DEFAULT_MAX_SOURCES = 6;
+/** Up to `max` marks; anything past that collapses into one "+N" mark. */
+export declare function sourceStack<S>(sources: readonly S[], max?: number): {
+    visible: S[];
+    overflow: S[];
+};
+export declare function sourceDomain(s: AgentTaskSource): string;
+/** Letter-tile fallback: first letter of the domain, else the title. */
+export declare function sourceInitial(s: AgentTaskSource): string;
+/** Hover / accessible text: "Title — domain". */
+export declare function sourceLabel(s: AgentTaskSource): string;
+export declare function stepKey(step: AgentTaskStep, index: number): string;

package/dist/components/agent/agentTaskList.js

@@ -0,0 +1,93 @@
+export function countUnits(tasks) {
+    let n = 0;
+    for (const t of tasks)
+        n += 1 + t.steps.length;
+    return n;
+}
+export function layoutTaskReveal(tasks, count) {
+    const out = [];
+    const revealed = Math.max(0, Math.min(count, countUnits(tasks)));
+    let offset = 0;
+    for (const t of tasks) {
+        const units = 1 + t.steps.length;
+        const shown = Math.max(0, Math.min(revealed - offset, units));
+        out.push({
+            offset,
+            visible: shown > 0,
+            stepsVisible: Math.max(0, shown - 1),
+            allRevealed: shown >= units,
+            passed: revealed > offset + units
+        });
+        offset += units;
+    }
+    return out;
+}
+/**
+ * The status to show. A task reported done/error still reads as running
+ * while its steps are being revealed, so a replayed (timer-driven) log never
+ * shows a check mark above steps that haven't appeared yet.
+ */
+export function displayStatus(task, r) {
+    if ((task.status === 'done' || task.status === 'error') && !r.allRevealed) {
+        return r.visible ? 'running' : 'pending';
+    }
+    return task.status;
+}
+/** Every unit is revealed and no task is still pending or running. */
+export function isListComplete(tasks, revealed) {
+    const total = countUnits(tasks);
+    if (total === 0 || revealed < total)
+        return false;
+    return tasks.every((t) => t.status === 'done' || t.status === 'error');
+}
+/**
+ * Should the policy fold this task? Only finished-and-done tasks fold — a
+ * failed task stays open so the error is visible.
+ *   true   once the log has moved past it (or the list is complete)
+ *   'all'  only when the whole list is complete
+ */
+export function foldedByPolicy(task, r, policy, listComplete) {
+    if (!policy)
+        return false;
+    if (displayStatus(task, r) !== 'done')
+        return false;
+    if (policy === 'all')
+        return listComplete;
+    return r.passed || listComplete;
+}
+/** Open = the user's choice when they made one, else the policy. */
+export function isTaskOpen(folded, override) {
+    return override ?? !folded;
+}
+export const DEFAULT_MAX_SOURCES = 6;
+/** Up to `max` marks; anything past that collapses into one "+N" mark. */
+export function sourceStack(sources, max = DEFAULT_MAX_SOURCES) {
+    const cap = Math.max(1, Math.floor(max));
+    return { visible: sources.slice(0, cap), overflow: sources.slice(cap) };
+}
+export function sourceDomain(s) {
+    if (s.domain)
+        return s.domain;
+    if (!s.href)
+        return '';
+    try {
+        return new URL(s.href).hostname.replace(/^www\./, '');
+    }
+    catch {
+        return '';
+    }
+}
+/** Letter-tile fallback: first letter of the domain, else the title. */
+export function sourceInitial(s) {
+    const base = sourceDomain(s) || s.title || '?';
+    const ch = base.trim().charAt(0);
+    return ch ? ch.toUpperCase() : '?';
+}
+/** Hover / accessible text: "Title — domain". */
+export function sourceLabel(s) {
+    const d = sourceDomain(s);
+    return d && d !== s.title ? `${s.title} — ${d}` : s.title;
+}
+export function stepKey(step, index) {
+    return step.id ?? `#${index}`;
+}

package/dist/components/agent/agentThinking.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Pure helpers behind AgentThinking (and anything else that wants the same
+ * "agent is working" vocabulary): the dot-grid comet math and the elapsed
+ * timer format. No DOM, so tests/unit/agentThinking.test.ts runs them in node.
+ *
+ * The dot-grid comet (scalar per cell, trail 0.3, `** 1.5` falloff, 0.12 floor,
+ * the static seed frame) is adapted from BoardUI's agent-thinking:
+ *   MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+ * BoardUI re-renders every 80 ms from a setInterval; here the same curve is
+ * baked into one CSS @keyframes and each cell is offset by animation-delay,
+ * so nothing runs on the main thread.
+ */
+export type AgentThinkingVariant = 'wave' | 'spin' | 'stars' | 'infinity';
+export type AgentThinkingTone = 'subtle' | 'default' | 'strong' | 'primary';
+export declare const DOT_GRID = 3;
+/** One lap of the wave/spin pattern, ms (BoardUI: 8 steps × 80 ms). */
+export declare const DOT_PERIOD_MS = 640;
+export declare const DOT_TRAIL = 0.3;
+export declare const DOT_MIN_OPACITY = 0.12;
+/**
+ * Resting frame: what renders on the server, on first paint and under reduced
+ * motion — a frozen wavefront, never a blank box.
+ */
+export declare const DOT_SEED: readonly number[];
+/**
+ * Where a cell sits along the pattern's direction of travel, in [0, 1).
+ * Wave: diagonal top-left → bottom-right, compressed below 1 so the wrap reads
+ * as the front leaving the grid and re-entering. Spin: angle around the centre.
+ */
+export declare function dotScalar(variant: 'wave' | 'spin', col: number, row: number): number;
+/** Opacity of a cell `behind` (0..1 of a lap) the bright head. */
+export declare function cometOpacity(behind: number): number;
+/**
+ * The CSS animation-delay (ms, ≤ 0) that puts a cell's peak at the right
+ * point of the shared lap: negative so every cell is mid-cycle from frame one.
+ */
+export declare function dotDelayMs(variant: 'wave' | 'spin', index: number): number;
+/**
+ * Elapsed time for the timer: `0.0s` … `59.9s`, then `1m 05s`, then `1h 02m`.
+ * Fixed-width-friendly (rendered with tabular-nums), never negative.
+ */
+export declare function formatThinkingTime(ms: number): string;
+/** Default tone per variant — sparkles read heavier, so they start subtle. */
+export declare const VARIANT_TONE: Record<AgentThinkingVariant, AgentThinkingTone>;
+/** Tone → CSS colour, token-only. */
+export declare const TONE_COLOR: Record<AgentThinkingTone, string>;

package/dist/components/agent/agentThinking.js

@@ -0,0 +1,78 @@
+/**
+ * Pure helpers behind AgentThinking (and anything else that wants the same
+ * "agent is working" vocabulary): the dot-grid comet math and the elapsed
+ * timer format. No DOM, so tests/unit/agentThinking.test.ts runs them in node.
+ *
+ * The dot-grid comet (scalar per cell, trail 0.3, `** 1.5` falloff, 0.12 floor,
+ * the static seed frame) is adapted from BoardUI's agent-thinking:
+ *   MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+ * BoardUI re-renders every 80 ms from a setInterval; here the same curve is
+ * baked into one CSS @keyframes and each cell is offset by animation-delay,
+ * so nothing runs on the main thread.
+ */
+export const DOT_GRID = 3;
+/** One lap of the wave/spin pattern, ms (BoardUI: 8 steps × 80 ms). */
+export const DOT_PERIOD_MS = 640;
+export const DOT_TRAIL = 0.3;
+export const DOT_MIN_OPACITY = 0.12;
+/**
+ * Resting frame: what renders on the server, on first paint and under reduced
+ * motion — a frozen wavefront, never a blank box.
+ */
+export const DOT_SEED = [0.55, 0.3, 0.15, 0.85, 0.55, 0.3, 1, 0.85, 0.55];
+/**
+ * Where a cell sits along the pattern's direction of travel, in [0, 1).
+ * Wave: diagonal top-left → bottom-right, compressed below 1 so the wrap reads
+ * as the front leaving the grid and re-entering. Spin: angle around the centre.
+ */
+export function dotScalar(variant, col, row) {
+    const m = DOT_GRID - 1;
+    if (variant === 'wave')
+        return ((col + row) / (2 * m)) * (DOT_GRID / (DOT_GRID + 1));
+    const c = m / 2;
+    return (Math.atan2(row - c, col - c) / (2 * Math.PI) + 1) % 1;
+}
+/** Opacity of a cell `behind` (0..1 of a lap) the bright head. */
+export function cometOpacity(behind) {
+    const b = ((behind % 1) + 1) % 1;
+    const lit = Math.max(0, 1 - b / DOT_TRAIL) ** 1.5;
+    return DOT_MIN_OPACITY + (1 - DOT_MIN_OPACITY) * lit;
+}
+/**
+ * The CSS animation-delay (ms, ≤ 0) that puts a cell's peak at the right
+ * point of the shared lap: negative so every cell is mid-cycle from frame one.
+ */
+export function dotDelayMs(variant, index) {
+    const s = dotScalar(variant, index % DOT_GRID, Math.floor(index / DOT_GRID));
+    return Math.round((s - 1) * DOT_PERIOD_MS);
+}
+/**
+ * Elapsed time for the timer: `0.0s` … `59.9s`, then `1m 05s`, then `1h 02m`.
+ * Fixed-width-friendly (rendered with tabular-nums), never negative.
+ */
+export function formatThinkingTime(ms) {
+    const t = Math.max(0, Number.isFinite(ms) ? ms : 0);
+    if (t < 60_000)
+        return `${(Math.floor(t / 100) / 10).toFixed(1)}s`;
+    const totalS = Math.floor(t / 1000);
+    if (totalS < 3600) {
+        const m = Math.floor(totalS / 60);
+        return `${m}m ${String(totalS % 60).padStart(2, '0')}s`;
+    }
+    const h = Math.floor(totalS / 3600);
+    return `${h}h ${String(Math.floor((totalS % 3600) / 60)).padStart(2, '0')}m`;
+}
+/** Default tone per variant — sparkles read heavier, so they start subtle. */
+export const VARIANT_TONE = {
+    wave: 'default',
+    spin: 'default',
+    stars: 'subtle',
+    infinity: 'default'
+};
+/** Tone → CSS colour, token-only. */
+export const TONE_COLOR = {
+    subtle: 'color-mix(in oklab, var(--color-base-content) 50%, transparent)',
+    default: 'color-mix(in oklab, var(--color-base-content) 72%, transparent)',
+    strong: 'var(--color-base-content)',
+    primary: 'var(--color-primary)'
+};