@joewinke/jatui 0.38.6 → 0.40.0

package/dist/components/agent/AgentThinking.svelte

@@ -0,0 +1,280 @@
+<!--
+  AgentThinking — the "agent is working" status line that sits above a
+  composer or at the tail of a transcript: a small indicator, a shimmering
+  label and an elapsed timer.
+
+  Variants (indicator geometry adapted from BoardUI's agent-thinking —
+    MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)):
+    wave      3×3 dot grid, a diagonal wavefront
+    spin      3×3 dot grid, a bright head orbiting clockwise
+    stars     staggered sparkles
+    infinity  a comet sweeping a figure-eight
+
+  Differences from the original: the dot comet is pure CSS (no 80 ms
+  setInterval re-render), the timer is aria-hidden so screen readers hear the
+  label once instead of a re-announcement every 100 ms, tones are tokens,
+  and `startedAt` lets a re-mounted row (virtualised list) keep the real
+  elapsed time.
+
+  Motion: the indicator carries meaning (work is in progress), so it keeps
+  running on data-motion="calm"; the label shimmer is decorative and stops
+  there. Under prefers-reduced-motion everything rests on a static frame.
+-->
+<script lang="ts">
+	import ShimmerText from './ShimmerText.svelte';
+	import {
+		DOT_SEED,
+		DOT_PERIOD_MS,
+		TONE_COLOR,
+		VARIANT_TONE,
+		dotDelayMs,
+		formatThinkingTime,
+		type AgentThinkingTone,
+		type AgentThinkingVariant
+	} from './agentThinking';
+
+	interface Props {
+		variant?: AgentThinkingVariant;
+		/** Status label, e.g. "Thinking" or "Searching the docs". */
+		label?: string;
+		/** Indicator + label tone. Defaults per variant (`stars` is subtle). */
+		tone?: AgentThinkingTone;
+		/** Travelling highlight across the label. */
+		shimmer?: boolean;
+		/** Elapsed time after the label. */
+		showTimer?: boolean;
+		/**
+		 * When the work started (epoch ms, Date.now() basis). Defaults to mount
+		 * time. Pass it when the row can re-mount so the timer keeps counting.
+		 */
+		startedAt?: number;
+		size?: 'sm' | 'md';
+		class?: string;
+	}
+
+	let {
+		variant = 'wave',
+		label = 'Thinking',
+		tone,
+		shimmer = true,
+		showTimer = true,
+		startedAt,
+		size = 'md',
+		class: className = ''
+	}: Props = $props();
+
+	const toneKey = $derived(tone ?? VARIANT_TONE[variant]);
+	const color = $derived(TONE_COLOR[toneKey]);
+
+	const mountedAt = Date.now();
+	let now = $state(Date.now());
+	const elapsed = $derived(now - (startedAt ?? mountedAt));
+
+	$effect(() => {
+		if (!showTimer) return;
+		now = Date.now();
+		const id = setInterval(() => (now = Date.now()), 100);
+		return () => clearInterval(id);
+	});
+
+	const STAR_PERIOD_MS = 1400;
+	const STARS = [
+		{ x: 50, y: 46, scale: 1 },
+		{ x: 18, y: 22, scale: 0.55 },
+		{ x: 82, y: 26, scale: 0.45 },
+		{ x: 78, y: 76, scale: 0.55 },
+		{ x: 22, y: 78, scale: 0.4 }
+	];
+	const STAR_PATH = 'M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z';
+	const INFINITY_PATH = 'M28 14C33 5 47 5 47 14C47 23 33 23 28 14C23 5 9 5 9 14C9 23 23 23 28 14Z';
+</script>
+
+<div
+	class="agent-thinking agent-thinking--{size} {className}"
+	role="status"
+	style:color
+	style:--at-period="{DOT_PERIOD_MS}ms"
+>
+	{#if variant === 'wave' || variant === 'spin'}
+		<span class="at-dots" aria-hidden="true">
+			{#each DOT_SEED as seed, i (i)}
+				<span
+					class="at-dot"
+					style:--at-seed={seed}
+					style:animation-delay="{dotDelayMs(variant, i)}ms"
+				></span>
+			{/each}
+		</span>
+	{:else if variant === 'stars'}
+		<span class="at-stars" aria-hidden="true">
+			{#each STARS as star, i (i)}
+				<svg
+					viewBox="0 0 24 24"
+					class="at-star"
+					style:width="{star.scale}em"
+					style:height="{star.scale}em"
+					style:left="{star.x}%"
+					style:top="{star.y}%"
+					style:animation-duration="{STAR_PERIOD_MS}ms"
+					style:animation-delay="{Math.round((i * STAR_PERIOD_MS * 0.7) / STARS.length)}ms"
+				>
+					<path d={STAR_PATH} fill="currentColor" />
+				</svg>
+			{/each}
+		</span>
+	{:else}
+		<svg class="at-infinity" viewBox="0 0 56 28" aria-hidden="true">
+			<path d={INFINITY_PATH} fill="none" stroke="currentColor" stroke-width="2.75" opacity="0.15" />
+			<path
+				class="at-comet"
+				d={INFINITY_PATH}
+				pathLength="100"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2.75"
+				stroke-linecap="round"
+				stroke-dasharray="11 89"
+			/>
+		</svg>
+	{/if}
+
+	<ShimmerText class="at-label" text={label} tone={toneKey} active={shimmer} />
+
+	{#if showTimer}
+		<span class="at-timer" aria-hidden="true">{formatThinkingTime(elapsed)}</span>
+	{/if}
+</div>
+
+<style>
+	.agent-thinking {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.625rem;
+		min-width: 0;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+	}
+	.agent-thinking--sm {
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		line-height: 1rem;
+	}
+
+	.agent-thinking :global(.at-label) {
+		font-weight: 500;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.at-timer {
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.75rem;
+		font-variant-numeric: tabular-nums;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+		flex-shrink: 0;
+	}
+
+	/* ── dot grid ─────────────────────────────────────────────────────── */
+	.at-dots {
+		display: grid;
+		grid-template-columns: repeat(3, 4px);
+		gap: 2px;
+		flex-shrink: 0;
+	}
+	.agent-thinking--sm .at-dots {
+		grid-template-columns: repeat(3, 3px);
+	}
+	.at-dot {
+		aspect-ratio: 1;
+		border-radius: 1px;
+		background: currentColor;
+		opacity: var(--at-seed);
+		animation: at-comet-cell var(--at-period) linear infinite;
+	}
+	/* One lap: the head peaks at 0%/100% and the tail falls off over 30%,
+	   floored at 0.12 (agentThinking.ts cometOpacity). */
+	@keyframes at-comet-cell {
+		0% {
+			opacity: 1;
+		}
+		10% {
+			opacity: 0.599;
+		}
+		20% {
+			opacity: 0.289;
+		}
+		30% {
+			opacity: 0.12;
+		}
+		95% {
+			opacity: 0.12;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	/* ── stars ────────────────────────────────────────────────────────── */
+	.at-stars {
+		position: relative;
+		display: block;
+		flex-shrink: 0;
+		width: 1.3em;
+		height: 1.3em;
+		color: color-mix(in oklab, currentColor 80%, transparent);
+	}
+	.at-star {
+		position: absolute;
+		translate: -50% -50%;
+		transform: scale(0);
+		animation-name: at-star;
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: infinite;
+	}
+	@keyframes at-star {
+		0%,
+		100% {
+			transform: scale(0);
+			opacity: 0;
+		}
+		40% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		60% {
+			transform: scale(0.8);
+			opacity: 0.9;
+		}
+	}
+
+	/* ── infinity ─────────────────────────────────────────────────────── */
+	.at-infinity {
+		flex-shrink: 0;
+		width: 2em;
+		height: 1em;
+		/* the figure-eight spans x 9–47 of 56: pull the dead space back in */
+		margin: 0 -0.25em;
+	}
+	.at-comet {
+		animation: at-dash 1200ms linear infinite;
+	}
+	@keyframes at-dash {
+		to {
+			stroke-dashoffset: -100;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.at-dot,
+		.at-comet {
+			animation: none;
+		}
+		.at-star {
+			animation: none;
+			transform: none;
+			opacity: 0.7;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import { type AgentThinkingTone, type AgentThinkingVariant } from './agentThinking';
+interface Props {
+    variant?: AgentThinkingVariant;
+    /** Status label, e.g. "Thinking" or "Searching the docs". */
+    label?: string;
+    /** Indicator + label tone. Defaults per variant (`stars` is subtle). */
+    tone?: AgentThinkingTone;
+    /** Travelling highlight across the label. */
+    shimmer?: boolean;
+    /** Elapsed time after the label. */
+    showTimer?: boolean;
+    /**
+     * When the work started (epoch ms, Date.now() basis). Defaults to mount
+     * time. Pass it when the row can re-mount so the timer keeps counting.
+     */
+    startedAt?: number;
+    size?: 'sm' | 'md';
+    class?: string;
+}
+declare const AgentThinking: import("svelte").Component<Props, {}, "">;
+type AgentThinking = ReturnType<typeof AgentThinking>;
+export default AgentThinking;

package/dist/components/agent/ComposerGlow.svelte

@@ -0,0 +1,265 @@
+<!--
+  ComposerGlow — wraps a composer and, while `active`, orbits a band of light
+  around its rim: a crisp line leading, a small glow and a soft bloom bleeding
+  inward (clipped by the box). Flip `active` while awaiting a reply; the light
+  fades in/out instead of snapping.
+
+  MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+  Adapted from BoardUI's composer-loader.tsx: the rounded-rect perimeter math,
+  the pathLength=100 dash + CSS dashoffset lap, the per-layer "head trails the
+  tip by N px" phase, the three blur scales, SVG-native feGaussianBlur (WebKit
+  ignores CSS `filter` on SVG children) and the ResizeObserver that keeps the
+  viewBox equal to the px box so stroke widths stay true.
+  Changed for jatui: colours are theme tokens (info → primary → mid →
+  secondary → accent, midpoint via color-mix in oklch — no hex, no JS colour
+  parsing); the surface is --color-base-100 on the box radius; knobs trimmed
+  to active / speed / intensity / radius; the 14-copy taper is dropped; the
+  lap only runs while visible; and on data-motion="calm" or under
+  prefers-reduced-motion there is no frozen arc — the light is replaced by a
+  plain static focus-ring tint.
+
+  The wrapped composer must not paint its own background (the glow paints the
+  surface under it):
+
+    <ComposerGlow active={busy}>
+      <MessageInput {busy} onStop={stop} onsend={send} />
+    </ComposerGlow>
+-->
+<script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+
+	interface Props {
+		/** Show the light. Fades in/out. */
+		active?: boolean;
+		/** Seconds per lap. Default 4.5. */
+		speed?: number;
+		intensity?: 'subtle' | 'normal' | 'vivid';
+		/**
+		 * Corner radius: px number or any CSS length. Default: the box radius
+		 * (--jatui-radius-box → --radius-box).
+		 */
+		radius?: number | string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		active = false,
+		speed = 4.5,
+		intensity = 'normal',
+		radius,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const uid = $props.id();
+	const gid = `jatui-cg-${uid.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+	const INTENSITY = {
+		subtle: { light: 0.45, bloom: 0.22 },
+		normal: { light: 0.7, bloom: 0.3 },
+		vivid: { light: 0.95, bloom: 0.42 }
+	} as const;
+	const level = $derived(INTENSITY[intensity] ?? INTENSITY.normal);
+
+	const cssRadius = $derived(
+		radius == null
+			? 'var(--jatui-radius-box, var(--radius-box, 0.5rem))'
+			: typeof radius === 'number'
+				? `${radius}px`
+				: radius
+	);
+
+	// ── Geometry (the px box, so stroke widths are true) ────────────────
+	let clipEl = $state<HTMLSpanElement | null>(null);
+	let box = $state({ w: 640, h: 52, r: 8 });
+
+	$effect(() => {
+		const el = clipEl;
+		if (!el || typeof ResizeObserver === 'undefined') return;
+		const measure = () => {
+			const w = Math.max(1, el.clientWidth);
+			const h = Math.max(1, el.clientHeight);
+			const raw = getComputedStyle(el).borderTopLeftRadius;
+			const n = parseFloat(raw);
+			const r = Number.isFinite(n) ? (raw.trim().endsWith('%') ? (n / 100) * h : n) : 8;
+			untrack(() => {
+				if (w !== box.w || h !== box.h || r !== box.r) box = { w, h, r };
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
+	// Band = 120° of the lap; soft layers are slightly shorter and their heads
+	// sit N px behind the crisp tip.
+	const BAND = (120 / 360) * 100;
+	const LINE = 2.5;
+	const BLOOM = 16;
+	const rx = $derived(Math.min(box.r, box.w / 2, box.h / 2));
+	// Rounded-rect perimeter: straight runs + four quarter arcs.
+	const perimeter = $derived(Math.max(1, 2 * (box.w + box.h) - 8 * rx + 2 * Math.PI * rx));
+
+	/** Animation delay putting a layer `backPx` behind the tip (negative = head start, no stall). */
+	function delayFor(len: number, backPx: number): string {
+		const phase = len - BAND + (backPx * 100) / perimeter; // path units behind
+		const frac = (((phase / 100) % 1) + 1) % 1;
+		return `${((frac - 1) * speed).toFixed(3)}s`;
+	}
+
+	const layers = $derived([
+		// wide bloom bleeding inward (outer half clipped by the box)
+		{ width: BLOOM * 2, blur: 14, opacity: level.bloom, len: BAND * 0.9, back: BLOOM + 16 },
+		// tight glow
+		{ width: LINE * 3.2, blur: 6, opacity: 0.8, len: BAND * 0.95, back: 10 },
+		// crisp line, tip leading
+		{ width: LINE, blur: 0.5, opacity: 1, len: BAND, back: 0 }
+	]);
+
+	// Run the lap only while it can be seen: start on activate, stop after
+	// the fade-out has finished.
+	let running = $state(false);
+	$effect(() => {
+		if (active) {
+			running = true;
+			return;
+		}
+		const t = setTimeout(() => (running = false), 700);
+		return () => clearTimeout(t);
+	});
+</script>
+
+<div
+	class="composer-glow {className}"
+	class:composer-glow--active={active}
+	style:--cg-radius={cssRadius}
+	style:--cg-speed="{speed}s"
+>
+	<span class="composer-glow-surface" aria-hidden="true"></span>
+	<span class="composer-glow-tint" aria-hidden="true"></span>
+	<span class="composer-glow-light" bind:this={clipEl} aria-hidden="true">
+		{#if running}
+			<svg
+				width="100%"
+				height="100%"
+				viewBox="0 0 {box.w} {box.h}"
+				preserveAspectRatio="none"
+				style:opacity={level.light}
+			>
+				<defs>
+					<linearGradient id={gid} x1="0" y1="0" x2="1" y2="0">
+						<stop offset="0%" style="stop-color: var(--color-info)" />
+						<stop offset="30%" style="stop-color: var(--color-primary)" />
+						<stop offset="50%" style="stop-color: color-mix(in oklch, var(--color-primary), var(--color-secondary))" />
+						<stop offset="70%" style="stop-color: var(--color-secondary)" />
+						<stop offset="100%" style="stop-color: var(--color-accent)" />
+					</linearGradient>
+					{#each layers as layer (layer.blur)}
+						<filter id="{gid}-b{String(layer.blur).replace('.', '_')}" x="-50%" y="-50%" width="200%" height="200%">
+							<feGaussianBlur stdDeviation={layer.blur} />
+						</filter>
+					{/each}
+				</defs>
+				{#each layers as layer (layer.blur)}
+					<rect
+						class="composer-glow-rect jatui-motion-ambient"
+						x="0"
+						y="0"
+						width={box.w}
+						height={box.h}
+						{rx}
+						pathLength="100"
+						fill="none"
+						stroke="url(#{gid})"
+						stroke-width={layer.width}
+						stroke-linecap="round"
+						stroke-dasharray="{layer.len} {100 - layer.len}"
+						filter="url(#{gid}-b{String(layer.blur).replace('.', '_')})"
+						style:opacity={layer.opacity}
+						style:animation-delay={delayFor(layer.len, layer.back)}
+					/>
+				{/each}
+			</svg>
+		{/if}
+	</span>
+	<div class="composer-glow-content">{@render children()}</div>
+</div>
+
+<style>
+	.composer-glow {
+		position: relative;
+		border-radius: var(--cg-radius);
+		/* 1 = decorative motion allowed (motion.css); 0 on calm / reduced motion. */
+		--cg-ambient: var(--motion-ambient, 1);
+		--cg-fade: calc(var(--motion-move, 300ms) * 1.5);
+	}
+
+	.composer-glow-surface,
+	.composer-glow-tint,
+	.composer-glow-light {
+		position: absolute;
+		inset: 0;
+		border-radius: var(--cg-radius);
+		pointer-events: none;
+	}
+
+	.composer-glow-surface {
+		background: var(--color-base-100);
+	}
+
+	/* Calm / reduced-motion stand-in: a plain static focus-ring tint. */
+	.composer-glow-tint {
+		box-shadow:
+			0 0 0 2px color-mix(in oklch, var(--color-primary) 30%, transparent),
+			inset 0 0 0 1px color-mix(in oklch, var(--color-primary) 45%, transparent);
+		opacity: 0;
+		transition: opacity var(--cg-fade) var(--motion-glide, ease);
+	}
+
+	.composer-glow-light {
+		overflow: hidden;
+		opacity: 0;
+		transition: opacity var(--cg-fade) var(--motion-glide, ease);
+	}
+
+	.composer-glow--active .composer-glow-light {
+		opacity: var(--cg-ambient);
+	}
+
+	.composer-glow--active .composer-glow-tint {
+		opacity: calc(1 - var(--cg-ambient));
+	}
+
+	.composer-glow-light svg {
+		display: block;
+	}
+
+	.composer-glow-rect {
+		animation: composer-glow-lap var(--cg-speed) linear infinite;
+	}
+
+	@keyframes composer-glow-lap {
+		from {
+			stroke-dashoffset: 0;
+		}
+		to {
+			stroke-dashoffset: -100;
+		}
+	}
+
+	.composer-glow-content {
+		position: relative;
+	}
+
+	/* Hosts without motion.css still get the reduced-motion swap. */
+	@media (prefers-reduced-motion: reduce) {
+		.composer-glow {
+			--cg-ambient: 0;
+		}
+		.composer-glow-rect {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    /** Show the light. Fades in/out. */
+    active?: boolean;
+    /** Seconds per lap. Default 4.5. */
+    speed?: number;
+    intensity?: 'subtle' | 'normal' | 'vivid';
+    /**
+     * Corner radius: px number or any CSS length. Default: the box radius
+     * (--jatui-radius-box → --radius-box).
+     */
+    radius?: number | string;
+    class?: string;
+    children: Snippet;
+}
+declare const ComposerGlow: import("svelte").Component<Props, {}, "">;
+type ComposerGlow = ReturnType<typeof ComposerGlow>;
+export default ComposerGlow;