@joewinke/jatui 0.38.6 → 0.39.0

package/dist/components/agent/AgentLog.svelte

@@ -0,0 +1,217 @@
+<!--
+  AgentLog — a streaming agent transcript that draws itself down the page:
+  rows arrive one at a time, each growing in (height, a brief blur and a small
+  lift, a soft fading clip edge) while a curved tree guide strokes alongside
+  them, plus an optional "working" line at the tail.
+
+  This is the machinery only; what a row says is yours. Two ways to fill it:
+
+    items + row snippet      <AgentLog items={visible} key={(s) => s.id}>
+                               {#snippet row(step)}{step.label}{/snippet}
+                             </AgentLog>
+    children                 <AgentLog>
+                               <AgentLogRow first>…</AgentLogRow>
+                               <AgentLogRow last>…</AgentLogRow>
+                             </AgentLog>
+
+  Pacing is separate: slice your items with createRevealTicker (timer or
+  real-event driven). Rows already present on the log's first render rest;
+  only rows added afterwards animate (pass `appear` to animate those too).
+
+  Adapted from BoardUI's agent-log (WorkingRow, GuideBridge, the overall
+  structure): MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+  The working row sits deliberately OFF the guide: the tree records what the
+  agent did, and that one line has not happened yet.
+-->
+<script lang="ts" generics="T">
+	import { onMount, type Snippet } from 'svelte';
+	import AgentThinking from './AgentThinking.svelte';
+	import AgentLogRow from './AgentLogRow.svelte';
+	import { getAgentLogContext, setAgentLogContext } from './agentLog';
+	import { prefersReducedMotion } from '../../motion/level';
+
+	interface Props {
+		/** Rows to render (already sliced to what should be visible). */
+		items?: T[];
+		/** Row content for `items`. */
+		row?: Snippet<[item: T, index: number]>;
+		/** Stable key per item. Default: index. */
+		key?: (item: T, index: number) => string | number;
+		/** Extra classes per row (items mode). */
+		rowClass?: (item: T, index: number) => string;
+		/** Manual rows (AgentLogRow) instead of `items`. */
+		children?: Snippet;
+		/**
+		 * Working line at the tail (AgentThinking "stars"): a label, or
+		 * false/null/'' for none.
+		 */
+		working?: string | false | null;
+		/** Elapsed timer on the working line. */
+		workingTimer?: boolean;
+		/** When the work started (epoch ms) — keeps the working timer honest across re-mounts. */
+		workingStartedAt?: number;
+		/**
+		 * Draw the tree guide. Default true.
+		 */
+		guide?: boolean;
+		/**
+		 * Nested list: draw a stretch of trunk this many px ABOVE the first row
+		 * (from the parent row's glyph down to this list) and make the first branch
+		 * wait for it, so the two levels read as one line. 0 = none.
+		 */
+		bridge?: number;
+		/**
+		 * Animate rows present on the first render. Default: inherit — a log
+		 * mounted inside a row that is itself growing in animates; a top-level log
+		 * does not.
+		 */
+		appear?: boolean;
+		/**
+		 * Announce additions to screen readers (role="log", polite). Turn off for a
+		 * log nested inside another live region.
+		 */
+		live?: boolean;
+		/** Accessible name for the log. */
+		ariaLabel?: string;
+		/** aria-busy while work is in progress. Default: a working line is shown. */
+		busy?: boolean;
+		class?: string;
+		listClass?: string;
+	}
+
+	let {
+		items,
+		row,
+		key,
+		rowClass,
+		children,
+		working = null,
+		workingTimer = false,
+		workingStartedAt,
+		guide = true,
+		bridge = 0,
+		appear,
+		live = true,
+		ariaLabel,
+		busy,
+		class: className = '',
+		listClass = ''
+	}: Props = $props();
+
+	const parent = getAgentLogContext();
+	// Plain (non-reactive) flag: each row reads it once, when it mounts.
+	// svelte-ignore state_referenced_locally
+	const flag = { live: appear ?? parent?.isLive() ?? false };
+	const reduced = prefersReducedMotion();
+
+	setAgentLogContext({
+		isLive: () => flag.live,
+		get bridged() {
+			return bridge > 0;
+		}
+	});
+
+	onMount(() => {
+		flag.live = true;
+	});
+
+	const keyOf = (item: T, i: number) => (key ? key(item, i) : i);
+	const showWorking = $derived(!!working);
+</script>
+
+<div
+	class="agent-log {className}"
+	role={live ? 'log' : undefined}
+	aria-live={live ? 'polite' : undefined}
+	aria-relevant={live ? 'additions' : undefined}
+	aria-label={ariaLabel}
+	aria-busy={busy ?? showWorking}
+>
+	{#if bridge > 0 && guide && ((items && items.length > 0) || children)}
+		<span
+			class="al-bridge"
+			class:is-drawing={!reduced && flag.live}
+			style:top="-{bridge}px"
+			style:height="{bridge}px"
+			aria-hidden="true"
+		></span>
+	{/if}
+	<ol class="al-list {listClass}" class:has-bridge={bridge > 0} role="list">
+		{#if items && row}
+			{#each items as item, i (keyOf(item, i))}
+				<AgentLogRow
+					first={i === 0}
+					last={i === items.length - 1}
+					{guide}
+					class={rowClass?.(item, i) ?? ''}
+				>
+					{@render row(item, i)}
+				</AgentLogRow>
+			{/each}
+		{:else if children}
+			{@render children()}
+		{/if}
+	</ol>
+
+	{#if showWorking}
+		<AgentLogRow as="div" guide={false} class="al-working">
+			<div class="al-working-inner">
+				<AgentThinking
+					variant="stars"
+					size="sm"
+					label={working || 'Working'}
+					showTimer={workingTimer}
+					startedAt={workingStartedAt}
+				/>
+			</div>
+		</AgentLogRow>
+	{/if}
+</div>
+
+<style>
+	.agent-log {
+		position: relative;
+		min-width: 0;
+	}
+	.al-list {
+		position: relative;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		/* rows must touch: each row's trunk meets the next row's branch */
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	/* From the parent row's glyph down into this list's first branch. */
+	.al-bridge {
+		pointer-events: none;
+		position: absolute;
+		inset-inline-start: 0;
+		width: 1px;
+		background: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+		transform-origin: top;
+	}
+	.al-bridge.is-drawing {
+		animation: al-bridge calc(var(--motion-fast, 150ms) * 0.8) linear both;
+	}
+	@keyframes al-bridge {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+
+	.al-working-inner {
+		padding-block: 0.25rem;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.al-bridge.is-drawing {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,72 @@
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** Rows to render (already sliced to what should be visible). */
+        items?: T[];
+        /** Row content for `items`. */
+        row?: Snippet<[item: T, index: number]>;
+        /** Stable key per item. Default: index. */
+        key?: (item: T, index: number) => string | number;
+        /** Extra classes per row (items mode). */
+        rowClass?: (item: T, index: number) => string;
+        /** Manual rows (AgentLogRow) instead of `items`. */
+        children?: Snippet;
+        /**
+         * Working line at the tail (AgentThinking "stars"): a label, or
+         * false/null/'' for none.
+         */
+        working?: string | false | null;
+        /** Elapsed timer on the working line. */
+        workingTimer?: boolean;
+        /** When the work started (epoch ms) — keeps the working timer honest across re-mounts. */
+        workingStartedAt?: number;
+        /**
+         * Draw the tree guide. Default true.
+         */
+        guide?: boolean;
+        /**
+         * Nested list: draw a stretch of trunk this many px ABOVE the first row
+         * (from the parent row's glyph down to this list) and make the first branch
+         * wait for it, so the two levels read as one line. 0 = none.
+         */
+        bridge?: number;
+        /**
+         * Animate rows present on the first render. Default: inherit — a log
+         * mounted inside a row that is itself growing in animates; a top-level log
+         * does not.
+         */
+        appear?: boolean;
+        /**
+         * Announce additions to screen readers (role="log", polite). Turn off for a
+         * log nested inside another live region.
+         */
+        live?: boolean;
+        /** Accessible name for the log. */
+        ariaLabel?: string;
+        /** aria-busy while work is in progress. Default: a working line is shown. */
+        busy?: boolean;
+        class?: string;
+        listClass?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AgentLog: $$IsomorphicComponent;
+type AgentLog<T> = InstanceType<typeof AgentLog<T>>;
+export default AgentLog;

package/dist/components/agent/AgentLogRow.svelte

@@ -0,0 +1,281 @@
+<!--
+  AgentLogRow — one row of an AgentLog: the grow-in reveal, the soft clipping
+  edge that keeps it from being cut as it grows, and the stretch of tree guide
+  that belongs to it.
+
+  Adapted from BoardUI's agent-log (LogRow / RowConnector / useRevealMask):
+    MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+  What changed in the port: the `motion` library is replaced by CSS — height
+  0 → auto is a grid-template-rows 0fr → 1fr keyframe, the soft edge is a
+  registered `--jatui-reveal-fade` length animated inside a mask gradient,
+  the branch draws with stroke-dashoffset on pathLength=1 and the trunk with
+  a scaleY. Durations come from --motion-* tokens (so data-motion levels
+  rescale them) with glide easing; the guide pen stays linear on purpose so
+  junctions don't stall. Rows present on the log's first render rest instead
+  of animating.
+
+  At rest a row carries no mask, no blur, no overflow clip and no
+  compositing layer. Under prefers-reduced-motion it always renders at rest.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { prefersReducedMotion } from '../../motion/level';
+	import { BRANCH_PATH, BRANCH_WIDTH, BRANCH_Y, getAgentLogContext } from './agentLog';
+
+	interface Props {
+		/** First row of its list: its branch starts with the row (no tail above to wait for). */
+		first?: boolean;
+		/** Last row of its list: no trunk below the elbow, so the guide ends on the corner. */
+		last?: boolean;
+		/** Draw the tree guide. false for rows that are not findings (e.g. the working row). */
+		guide?: boolean;
+		/**
+		 * Force the grow-in on or off. Default: animate when the row is added after
+		 * its AgentLog's first render (always, when used outside an AgentLog).
+		 */
+		animate?: boolean;
+		/** Element to render: `li` inside a list, `div` elsewhere. */
+		as?: 'li' | 'div';
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		first = false,
+		last = false,
+		guide = true,
+		animate,
+		as = 'li',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const ctx = getAgentLogContext();
+	const reduced = prefersReducedMotion();
+	// Decided once, at mount: a row never starts animating later.
+	// svelte-ignore state_referenced_locally
+	const live = !reduced && (animate ?? ctx?.isLive() ?? true);
+	// svelte-ignore state_referenced_locally
+	const waitForTail = !first || (first && !!ctx?.bridged);
+
+	let entering = $state(live);
+
+	$effect(() => {
+		if (!entering) return;
+		// Backstop in case animationend never arrives (a hidden ancestor, a host
+		// stylesheet overriding the animation).
+		const id = setTimeout(() => (entering = false), 2000);
+		return () => clearTimeout(id);
+	});
+
+	function onAnimationEnd(e: AnimationEvent) {
+		if (e.animationName.endsWith('al-fade')) entering = false;
+	}
+
+	/** Trunk/branch draw only for rows (or trunks) that arrive live. */
+	function trunkLive(): boolean {
+		return !reduced && (animate ?? ctx?.isLive() ?? true);
+	}
+</script>
+
+<svelte:element
+	this={as}
+	class="al-row {className}"
+	class:is-entering={entering}
+	onanimationend={onAnimationEnd}
+>
+	<div class="al-clip">
+		<div class="al-body" class:has-guide={guide}>
+			{#if guide}
+				<span class="al-guide" aria-hidden="true">
+					<svg
+						class="al-svg"
+						width={BRANCH_WIDTH}
+						height={BRANCH_Y + 1}
+						viewBox="0 0 {BRANCH_WIDTH} {BRANCH_Y + 1}"
+						fill="none"
+					>
+						<path
+							class="al-branch"
+							class:is-drawing={live}
+							class:waits={waitForTail}
+							d={BRANCH_PATH}
+							pathLength="1"
+							stroke="currentColor"
+							stroke-width="1"
+						/>
+					</svg>
+					{#if !last}
+						<span class="al-trunk" class:is-drawing={trunkLive()}></span>
+					{/if}
+				</span>
+			{/if}
+			{@render children()}
+		</div>
+	</div>
+</svelte:element>
+
+<style>
+	@property --jatui-reveal-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0px;
+	}
+
+	.al-row {
+		/* Timings: lengths of the BoardUI reveal, expressed on motion tokens. */
+		--al-grow-d: calc(var(--motion-move, 300ms) * 1.27);
+		--al-in-d: calc(var(--motion-move, 300ms) * 1.4);
+		--al-fade-d: calc(var(--motion-move, 300ms) * 1.47);
+		/* One pen speed (~160px/s): the tail above, then this row's branch. */
+		--al-tail-d: calc(var(--motion-fast, 150ms) * 0.8);
+		--al-branch-d: calc(var(--motion-fast, 150ms) * 0.93);
+
+		position: relative;
+		display: grid;
+		grid-template-rows: 1fr;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.al-clip {
+		position: relative;
+		min-height: 0;
+		min-width: 0;
+	}
+
+	.al-body {
+		position: relative;
+		min-width: 0;
+	}
+	.al-body.has-guide {
+		padding-inline-start: 1rem;
+	}
+
+	/* ── grow-in ──────────────────────────────────────────────────────── */
+	.al-row.is-entering {
+		animation: al-grow var(--al-grow-d) var(--motion-glide, ease-out) both;
+	}
+	.al-row.is-entering > .al-clip {
+		overflow: hidden;
+		/* Mask stops are alpha only (not a theme colour). The transparent stop
+		   sits 1px past the box: two stops at exactly 100% make a degenerate
+		   gradient that softens the last pixel row and breaks the guide where
+		   rows meet. */
+		-webkit-mask-image: linear-gradient(
+			to bottom,
+			black calc(100% - var(--jatui-reveal-fade)),
+			transparent calc(100% + 1px)
+		);
+		mask-image: linear-gradient(
+			to bottom,
+			black calc(100% - var(--jatui-reveal-fade)),
+			transparent calc(100% + 1px)
+		);
+		animation:
+			al-in var(--al-in-d) var(--motion-glide, ease-out) both,
+			al-fade var(--al-fade-d) var(--motion-glide, ease-out) both;
+	}
+
+	@keyframes al-grow {
+		from {
+			grid-template-rows: 0fr;
+		}
+		to {
+			grid-template-rows: 1fr;
+		}
+	}
+	@keyframes al-in {
+		from {
+			opacity: 0;
+			translate: 0 calc(var(--motion-travel, 16px) * 0.25);
+			filter: blur(6px);
+		}
+		to {
+			opacity: 1;
+			translate: 0 0;
+			filter: blur(0);
+		}
+	}
+	/* Longer than a text line, so a row is faintest exactly where it is clipped. */
+	@keyframes al-fade {
+		from {
+			--jatui-reveal-fade: 22px;
+		}
+		to {
+			--jatui-reveal-fade: 0px;
+		}
+	}
+
+	/* ── tree guide ───────────────────────────────────────────────────── */
+	.al-guide {
+		pointer-events: none;
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+	}
+	.al-svg {
+		position: absolute;
+		top: 0;
+		inset-inline-start: 0;
+		overflow: visible;
+	}
+	.al-svg:dir(rtl) {
+		scale: -1 1;
+	}
+	.al-branch.is-drawing {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+		animation: al-draw var(--al-branch-d) linear forwards;
+	}
+	.al-branch.is-drawing.waits {
+		animation-delay: var(--al-tail-d);
+	}
+	@keyframes al-draw {
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+
+	.al-trunk {
+		position: absolute;
+		inset-inline-start: 0;
+		top: 8px; /* BRANCH_Y - BRANCH_RADIUS */
+		bottom: 0;
+		width: 1px;
+		background: currentColor;
+		transform-origin: top;
+	}
+	.al-trunk.is-drawing {
+		animation: al-scale var(--al-tail-d) linear both;
+	}
+	@keyframes al-scale {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+
+	/* Reduced motion: final state — no growth, no mask, no blur, no draw. */
+	@media (prefers-reduced-motion: reduce) {
+		.al-row.is-entering,
+		.al-row.is-entering > .al-clip,
+		.al-branch.is-drawing,
+		.al-trunk.is-drawing {
+			animation: none;
+		}
+		.al-row.is-entering > .al-clip {
+			overflow: visible;
+			-webkit-mask-image: none;
+			mask-image: none;
+		}
+		.al-branch.is-drawing {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** First row of its list: its branch starts with the row (no tail above to wait for). */
+    first?: boolean;
+    /** Last row of its list: no trunk below the elbow, so the guide ends on the corner. */
+    last?: boolean;
+    /** Draw the tree guide. false for rows that are not findings (e.g. the working row). */
+    guide?: boolean;
+    /**
+     * Force the grow-in on or off. Default: animate when the row is added after
+     * its AgentLog's first render (always, when used outside an AgentLog).
+     */
+    animate?: boolean;
+    /** Element to render: `li` inside a list, `div` elsewhere. */
+    as?: 'li' | 'div';
+    class?: string;
+    children: Snippet;
+}
+declare const AgentLogRow: import("svelte").Component<Props, {}, "">;
+type AgentLogRow = ReturnType<typeof AgentLogRow>;
+export default AgentLogRow;