@joewinke/jatui 0.38.5 → 0.39.0

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;