@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0-alpha.3

package/dist/AgentIndicator-Bs2S8AWJ.js

@@ -0,0 +1,847 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { forwardRef, useId, useLayoutEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import './AgentIndicator.css';// src/ds/components/AgentIndicator/shapes.ts
+var TAU = Math.PI * 2;
+var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+var range = (n) => Array.from({ length: n }, (_, i) => i);
+function once(make) {
+	let value;
+	return () => value ??= make();
+}
+var lerpFrame = (a, b, w) => a.map((v, i) => v + ((b[i] ?? v) - v) * w);
+function sstep(a, b, x) {
+	const k = clamp01((x - a) / (b - a));
+	return k * k * (3 - 2 * k);
+}
+function cubicBezier(x1, y1, x2, y2) {
+	const cx = 3 * x1;
+	const bx = 3 * (x2 - x1) - cx;
+	const ax = 1 - cx - bx;
+	const cy = 3 * y1;
+	const by = 3 * (y2 - y1) - cy;
+	const ay = 1 - cy - by;
+	const at = (t) => ((ax * t + bx) * t + cx) * t;
+	return (x) => {
+		if (x <= 0) return 0;
+		if (x >= 1) return 1;
+		let lo = 0;
+		let hi = 1;
+		let t = x;
+		for (let i = 0; i < 24 && Math.abs(at(t) - x) >= 1e-5; i++) {
+			if (at(t) < x) lo = t;
+			else hi = t;
+			t = (lo + hi) / 2;
+		}
+		return ((ay * t + by) * t + cy) * t;
+	};
+}
+function segDist([px, py], [ax, ay], [bx, by]) {
+	const vx = bx - ax;
+	const vy = by - ay;
+	const k = clamp01(((px - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy));
+	return Math.hypot(px - ax - vx * k, py - ay - vy * k);
+}
+var inCirc = (cx, cy, r) => ([x, y]) => (x - cx) ** 2 + (y - cy) ** 2 < r * r;
+var inCap = (a, b, r) => (p) => segDist(p, a, b) < r;
+var inShape = (poly) => ([x, y]) => {
+	let inside = false;
+	let previous = poly.at(-1);
+	for (const point of poly) {
+		if (!previous) break;
+		const [xi, yi] = point;
+		const [xj, yj] = previous;
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+		previous = point;
+	}
+	return inside;
+};
+var inRoundRect = (cx, cy, hx, hy, r) => ([x, y]) => Math.hypot(Math.max(0, Math.abs(x - cx) - hx + r), Math.max(0, Math.abs(y - cy) - hy + r)) < r;
+var inOval = (cx, cy, rx, ry, b = 0, n = 11) => ([x, y]) => ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2 < (1 + b * Math.cos(n * Math.atan2(y - cy, x - cx))) ** 2;
+var anyOf = (...shapes) => (p) => shapes.some((inside) => inside(p));
+var allOf = (...shapes) => (p) => shapes.every((inside) => inside(p));
+var nothing = () => false;
+var placed = (inside, a, [tx, ty] = [0, 0]) => ([x, y]) => {
+	const c = Math.cos(a);
+	const s = Math.sin(a);
+	const dx = x - tx;
+	const dy = y - ty;
+	return inside([dx * c + dy * s, -dx * s + dy * c]);
+};
+var around = ([cx, cy], a, r) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+var dot = (p, d) => [[
+	...p,
+	d,
+	0
+], [
+	...p,
+	0,
+	0
+]];
+function radial(inside, [cx, cy]) {
+	const r = range(64).map((i) => {
+		const a = TAU * i / 64;
+		const at = (d) => inside([cx + Math.cos(a) * d, cy + Math.sin(a) * d]);
+		let d = 0;
+		while (d < 12 && at(d)) d += .3;
+		let lo = Math.max(0, d - .3);
+		let hi = d;
+		for (let k = 0; k < 6; k++) {
+			const m = (lo + hi) / 2;
+			if (at(m)) lo = m;
+			else hi = m;
+		}
+		return lo;
+	});
+	const ring = (i) => r[(i + 64) % 64] ?? 0;
+	return range(64).map((i) => (ring(i - 1) + 2 * ring(i) + ring(i + 1)) / 4);
+}
+var NO_HOLE = range(64).map(() => 0);
+function kit(outer, c, { hole, holeCenter = c, balls = [], cuts = [], inks = [] } = {}) {
+	return [
+		...c,
+		...radial(outer, c),
+		...holeCenter,
+		...hole ? radial(hole, holeCenter) : NO_HOLE,
+		...range(2).flatMap((i) => balls[i] ?? [...c, 0]),
+		...range(2).flatMap((i) => cuts[i] ?? [
+			...c,
+			...c,
+			0
+		]),
+		...range(2).flatMap((i) => inks[i] ?? [
+			...c,
+			...c,
+			0
+		])
+	];
+}
+function withTrail(kitFrame, points = []) {
+	const [x = 0, y = 0] = points.at(-1) ?? kitFrame;
+	return [...kitFrame, ...range(64).flatMap((i) => points[i] ?? [
+		x,
+		y,
+		0,
+		0
+	])];
+}
+// src/ds/components/AgentIndicator/paint.ts
+var xy = (x, y) => `${x.toFixed(2)} ${y.toFixed(2)}`;
+function outline(cx, cy, radii) {
+	const points = radii.map((r, i) => [cx + r * Math.cos(TAU * i / 64), cy + r * Math.sin(TAU * i / 64)]);
+	const mid = ([ax, ay], [bx, by] = [ax, ay]) => xy((ax + bx) / 2, (ay + by) / 2);
+	const curves = points.map((p, i) => `Q${xy(...p)} ${mid(p, points[(i + 1) % 64])}`).join("");
+	const [first = [cx, cy]] = points;
+	return `M${mid(first, points.at(-1))}${curves}Z`;
+}
+function segment$1(x1, y1, x2, y2, width) {
+	const strokeWidth = Math.max(0, width).toFixed(3);
+	if (Number(strokeWidth) === 0) return { width: strokeWidth };
+	return {
+		width: strokeWidth,
+		d: `M${x1.toFixed(3)} ${y1.toFixed(3)}L${(x2 + .001).toFixed(3)} ${y2.toFixed(3)}`
+	};
+}
+var HOLE_AT = 66;
+var LINES_AT = 138;
+function frameParts(f) {
+	const at = (i) => f[i] ?? 0;
+	const hole = f.slice(HOLE_AT + 2, HOLE_AT + 2 + 64);
+	const holePath = hole.some((r) => r > .05) ? outline(at(HOLE_AT), at(HOLE_AT + 1), hole) : "";
+	const line = (k) => segment$1(at(k), at(k + 1), at(k + 2), at(k + 3), at(k + 4));
+	const trail = (k, widthAt) => segment$1(at(k), at(k + 1), at(k + 4), at(k + 5), at(k + widthAt));
+	return {
+		body: outline(at(0), at(1), f.slice(2, HOLE_AT)) + holePath,
+		balls: range(2).map((i) => {
+			const k = 132 + 3 * i;
+			return {
+				cx: at(k).toFixed(2),
+				cy: at(k + 1).toFixed(2),
+				r: Math.max(0, at(k + 2)).toFixed(2)
+			};
+		}),
+		cuts: range(2).map((i) => line(LINES_AT + 5 * i)),
+		inks: range(2).map((i) => line(LINES_AT + 5 * (2 + i))),
+		trailCuts: range(63).map((i) => trail(158 + 4 * i, 3)),
+		trailInks: range(63).map((i) => trail(158 + 4 * i, 2))
+	};
+}
+var attribute = (element, name, value) => {
+	if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+};
+function stroke(path, { width, d }) {
+	attribute(path, "stroke-width", width);
+	if (d) attribute(path, "d", d);
+}
+function painter(svg) {
+	const parts = (name) => [...svg.querySelectorAll(`[data-part="${name}"]`)];
+	const [body] = parts("body");
+	if (!body) throw new Error("AgentIndicator is missing its body path");
+	const balls = parts("ball");
+	const strokes = {
+		cuts: parts("cut"),
+		inks: parts("ink"),
+		trailCuts: parts("trail-cut"),
+		trailInks: parts("trail-ink")
+	};
+	return (f) => {
+		const drawn = frameParts(f);
+		attribute(body, "d", drawn.body);
+		balls.forEach((ball, i) => {
+			const { cx = "0", cy = "0", r = "0" } = drawn.balls[i] ?? {};
+			attribute(ball, "cx", cx);
+			attribute(ball, "cy", cy);
+			attribute(ball, "r", r);
+		});
+		for (const name of [
+			"cuts",
+			"inks",
+			"trailCuts",
+			"trailInks"
+		]) strokes[name].forEach((path, i) => {
+			const part = drawn[name][i];
+			if (part) stroke(path, part);
+		});
+	};
+}
+// src/ds/components/AgentIndicator/poses.ts
+var agentIndicatorStates = [
+	"idle",
+	"memory",
+	"thinking",
+	"reading",
+	"searching",
+	"finding",
+	"browsing",
+	"editing",
+	"running",
+	"deleting",
+	"skill",
+	"tool",
+	"waiting",
+	"done",
+	"error",
+	"context",
+	"notice"
+];
+var MORPH_SECONDS = .52;
+var GROW = 1.2;
+var settle = (sinceEntered) => Math.max(0, sinceEntered - MORPH_SECONDS);
+var AGENT_HEAD = [0, -5.5];
+var AGENT_LIMBS = [
+	[-5.778, -1.293],
+	[5.778, -1.293],
+	[3.57, 5.5],
+	[-3.57, 5.5]
+];
+var AGENT_WEB = [
+	AGENT_LIMBS[0],
+	[-4.029, -2.566],
+	[4.029, -2.566],
+	...AGENT_LIMBS.slice(1)
+];
+var AGENT_NOTCHES = [
+	[-4.674, 2.104],
+	[4.674, 2.104],
+	[0, 5.5]
+];
+var AGENT_DOT = 4.326;
+var agent = once(() => withTrail(kit(inShape(AGENT_WEB), [0, 1.8]), [
+	...dot(AGENT_HEAD, AGENT_DOT),
+	[
+		...AGENT_HEAD,
+		0,
+		9.968
+	],
+	[
+		...AGENT_HEAD,
+		0,
+		0
+	],
+	...AGENT_LIMBS.flatMap((limb) => dot(limb, AGENT_DOT)),
+	...AGENT_NOTCHES.flatMap((notch) => [[
+		...notch,
+		0,
+		2.818
+	], [
+		...notch,
+		0,
+		0
+	]])
+]));
+var memory = (t) => {
+	const c = t / 2.4;
+	const turn = Math.floor(c) + sstep(0, .6, c - Math.floor(c));
+	const minute = -Math.PI / 2 - TAU * turn;
+	const hour = -2.6 - TAU / 12 * turn;
+	return withTrail(kit(inCirc(0, 0, 7.8), [0, 0], { cuts: [[
+		0,
+		0,
+		4.6 * Math.cos(minute),
+		4.6 * Math.sin(minute),
+		2.2
+	], [
+		0,
+		0,
+		3 * Math.cos(hour),
+		3 * Math.sin(hour),
+		2.2
+	]] }));
+};
+var sulcus = ([a, b, amp, waves]) => (u) => {
+	const dx = b[0] - a[0];
+	const dy = b[1] - a[1];
+	const length = Math.hypot(dx, dy);
+	const s = amp * Math.sin(Math.PI * waves * u);
+	return [a[0] + dx * u - dy / length * s, a[1] + dy * u + dx / length * s];
+};
+var PROFILE = anyOf(inOval(-.3, -1.3, 7.9, 5.3, .035), inOval(-1.6, 2.2, 4.6, 2.6), inOval(5, 3.4, 2.8, 2), inCap([1.4, 2.6], [2.1, 6.8], 1.2));
+var SULCI = [
+	[
+		[-5.8, 1.4],
+		[3, -1.6],
+		.5,
+		2
+	],
+	[
+		[.9, -7],
+		[-.6, -2.6],
+		.45,
+		3
+	],
+	[
+		[-7.6, -2.2],
+		[-3.4, -3.4],
+		.55,
+		2
+	],
+	[
+		[4.6, -6],
+		[5.6, -1.6],
+		.5,
+		2
+	],
+	[
+		[2.4, 2.4],
+		[8.2, 1.8],
+		0,
+		1
+	]
+].map(sulcus);
+var brainKit = once(() => kit(PROFILE, [.4, .4], { cuts: [[
+	2.9,
+	3,
+	3.4,
+	6.2,
+	1.2
+]] }));
+var brain = (t) => withTrail(brainKit(), SULCI.flatMap((fold, j) => range(9).map((i) => {
+	const pulse = .7 * Math.max(0, Math.cos(2.2 * t - 1.3 * j - 3 * i / 8)) ** 6;
+	return [
+		...fold(i / 8),
+		0,
+		i < 8 ? (j ? 1.6 : 1.9) + pulse : 0
+	];
+})));
+var BULB = anyOf(inCirc(0, -1.2, 4.6), inShape([
+	[-3.1, 1.9],
+	[3.1, 1.9],
+	[2.1, 4.4],
+	[-2.1, 4.4]
+]), inRoundRect(0, 5.5, 2.1, 1.4, .8));
+var BULB_RAYS = [
+	-132,
+	-48,
+	-174,
+	-6,
+	-90
+].map((d) => d * Math.PI / 180);
+var bulbKit = once(() => kit(BULB, [0, 0], { cuts: [[
+	0,
+	-2,
+	0,
+	-2,
+	0
+], [
+	-2.6,
+	5.4,
+	2.6,
+	5.4,
+	.8
+]] }));
+var bulb = (light) => withTrail(bulbKit(), BULB_RAYS.flatMap((a, j) => {
+	const n = j < 4 ? 15 : 2;
+	return range(n).map((i) => [
+		...around([0, -1.2], a, 5.9 + 1.5 * light * i / (n - 1)),
+		i < n - 1 ? 1.8 * light : 0,
+		0
+	]);
+}));
+var thinking = (t) => {
+	const p = t / 5 % 1;
+	const lit = sstep(.28, .4, p) * (1 - sstep(.76, .88, p));
+	const glow = sstep(.4, .5, p) * (1 - sstep(.68, .76, p));
+	return lerpFrame(brain(t), bulb(glow * (1 + .06 * Math.sin(8 * t))), lit);
+};
+var TELESCOPE = anyOf(inShape([
+	[-6.8, -1.3],
+	[5.4, -2.6],
+	[5.4, 2.6],
+	[-6.8, 1.3]
+]), inCap([-6.8, 0], [-8, 0], 1.6), inCirc(0, 1.6, 1.8));
+var MOUNT = [-.4, 1];
+var browsing = (t) => {
+	return withTrail(kit(placed(TELESCOPE, -.5 + .2 * Math.sin(.9 * t) + .06 * Math.sin(2.3 * t), MOUNT), MOUNT, { inks: [[
+		MOUNT[0],
+		MOUNT[1] + 1.4,
+		-4.2,
+		8,
+		1.8
+	], [
+		MOUNT[0],
+		MOUNT[1] + 1.4,
+		3.4,
+		8,
+		1.8
+	]] }));
+};
+var NUT = ([x, y]) => {
+	const side = Math.PI / 3;
+	const a = (Math.atan2(y, x) % side + side) % side;
+	return Math.hypot(x, y) < 7.4 * Math.cos(side / 2) / Math.cos(a - side / 2);
+};
+var nut = (turn) => withTrail(kit(placed(NUT, Math.PI / 3 * turn), [0, 0], { hole: inCirc(0, 0, 2.8) }));
+var restingNut = once(() => nut(0));
+var tool = (t) => {
+	const c = t / 1.1;
+	const turn = sstep(.55, .85, c - Math.floor(c));
+	return Number.isInteger(turn) ? restingNut() : nut(turn);
+};
+var turned = ([x, y], a) => [x * Math.cos(a) - y * Math.sin(a), x * Math.sin(a) + y * Math.cos(a)];
+var shifted = ([x, y], [dx, dy]) => [x + dx, y + dy];
+var segment = (a, b, width) => [
+	...a,
+	...b,
+	width
+];
+var polyline = (points, ink, cut) => points.map((p, i) => i < points.length - 1 ? [
+	...p,
+	ink,
+	cut
+] : [
+	...p,
+	0,
+	0
+]);
+var dotCut = (p, d) => [[
+	...p,
+	0,
+	d
+], [
+	...p,
+	0,
+	0
+]];
+var ALMOND = allOf(inCirc(0, 4.6, 8.8), inCirc(0, -4.6, 8.8));
+var reading = (t) => {
+	const iris = [1.5 * Math.sin(TAU * t / 2.6), 0];
+	return withTrail(kit(ALMOND, [0, 0], {
+		hole: inCirc(...iris, 3.1),
+		holeCenter: iris,
+		balls: [[...iris, 1.7]]
+	}));
+};
+var LENS = [-1.6, -1.6];
+var MAGNIFIER = anyOf(inCirc(...LENS, 5), inCap([1.8, 1.8], [5.4, 5.4], 1.7));
+var searching = (t) => {
+	const w = TAU * t / 2.4;
+	const at = [.9 * Math.sin(w), .5 * Math.sin(2 * w)];
+	const lens = shifted(LENS, at);
+	return withTrail(kit(placed(MAGNIFIER, 0, at), lens, {
+		hole: inCirc(...lens, 3.1),
+		holeCenter: lens
+	}));
+};
+var FOLDER = anyOf(inRoundRect(0, .8, 7.6, 5, 1.8), inRoundRect(-4, -4.4, 3.6, 1.4, 1.2));
+var FOLDER_LENS = [-.6, .6];
+var finding = (t) => {
+	const w = TAU * t / 2.8;
+	const lens = shifted(FOLDER_LENS, [1.3 * Math.sin(w), .6 * Math.sin(2 * w)]);
+	return withTrail(kit(FOLDER, [0, .4], {
+		hole: inCirc(...lens, 2.9),
+		holeCenter: lens,
+		balls: [[...lens, 1.7]],
+		cuts: [segment(shifted(lens, [2.1, 2.1]), shifted(lens, [3.5, 3.5]), 1.5)]
+	}));
+};
+var PEN = anyOf(inCap([-2.6, 2.6], [5, -5], 2.3), inShape([
+	[-4.23, .97],
+	[-.97, 4.23],
+	[-5.9, 5.9]
+]));
+var PEN_BANDS = [[[-3.4, .6], [-.6, 3.4]], [[1.4, -4.2], [4.2, -1.4]]];
+var editing = (t) => {
+	const w = TAU * t / .9;
+	const at = [.45 * Math.sin(w), .3 * Math.sin(2 * w)];
+	return withTrail(kit(placed(PEN, 0, at), at, { cuts: PEN_BANDS.map(([a, b]) => segment(shifted(a, at), shifted(b, at), 1)) }));
+};
+var SCREEN = inRoundRect(0, 0, 7.6, 6.2, 2);
+var PROMPT = [
+	[-4, -2.4],
+	[-1.2, .2],
+	[-4, 2.8]
+];
+var running = (t) => {
+	const p = t / 1.1 % 1;
+	return withTrail(kit(SCREEN, [0, 0], { cuts: [segment([.6, 2.8], [4.2, 2.8], 1.8 * (1 - sstep(.45, .55, p) + sstep(.9, 1, p)))] }), polyline(PROMPT, 0, 1.8));
+};
+var CAN = anyOf(inRoundRect(0, 1.6, 5.4, 5.2, 1.4), inRoundRect(0, -4.4, 7.2, 1, 1), inRoundRect(0, -6, 2.4, 1, .8));
+var CAN_CUTS = [[[-1.9, -.8], [-1.9, 4.4]], [[1.9, -.8], [1.9, 4.4]]];
+var LID_SEAM = [[-5.6, -3.2], [5.6, -3.2]];
+var deleting = (t) => {
+	const a = .08 * Math.sin(TAU * t / 1.2);
+	return withTrail(kit(placed(CAN, a), [0, 0], { cuts: CAN_CUTS.map(([p, q]) => segment(turned(p, a), turned(q, a), 1.3)) }), polyline(LID_SEAM.map((p) => turned(p, a)), 0, .9));
+};
+var page = (side, lift) => inShape([
+	[-.1, -3.6],
+	[3, -5.2 - lift],
+	[7.6, -5 - lift],
+	[7.6, 4.6],
+	[3, 4.8],
+	[-.1, 6.2]
+].map(([x, y]) => [side * x, y]));
+var skill = (t) => {
+	const lift = .5 * Math.sin(TAU * t / 2.2);
+	return withTrail(kit(anyOf(page(1, lift), page(-1, -lift)), [0, .4], { cuts: [segment([0, -3.2], [0, 5.6], 1)] }));
+};
+var LAYER_TIERS = [
+	-3.2,
+	0,
+	3.2
+];
+var diamond = (cy) => [
+	[0, cy - 3.6],
+	[7.4, cy],
+	[0, cy + 3.6],
+	[-7.4, cy]
+];
+var context = once(() => withTrail(kit(anyOf(...LAYER_TIERS.map((cy) => inShape(diamond(cy)))), [0, 0]), LAYER_TIERS.slice(0, -1).flatMap((cy) => {
+	const [, right, bottom, left] = diamond(cy);
+	return polyline([
+		left,
+		bottom,
+		right
+	], 0, 1);
+})));
+var notice = once(() => withTrail(kit(inCirc(0, 0, 7.4), [0, 0], { cuts: [segment([0, -.4], [0, 3.8], 1.9)] }), dotCut([0, -3.6], 2.3)));
+var blank = once(() => kit(nothing, [0, 0]));
+var line = (a, b) => (u) => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u];
+var twoStrokes = (first, second, width) => withTrail(blank(), [first, second].flatMap((stroke) => range(32).map((i) => [
+	...stroke(i / 31),
+	i < 31 ? width : 0,
+	0
+])));
+var waiting = once(() => twoStrokes(line([-2.7, -3.4], [-2.7, 3.4]), line([2.7, -3.4], [2.7, 3.4]), 2.2));
+var CHECK = [
+	[-6.2, .4],
+	[-2.2, 4.4],
+	[6.4, -4.8]
+];
+var done = (_, s) => {
+	const q = settle(s);
+	const k = 1 + .08 * Math.exp(-q * 7) * Math.sin(q * 15);
+	const at = ([x, y]) => [x * k, y * k];
+	const [a, b, c] = CHECK;
+	return twoStrokes(line(at(a), at(b)), line(at(b), at(c)), 2.1);
+};
+var CROSS = 4.6;
+var error = (_, s) => {
+	const q = settle(s);
+	const shake = 1.4 * Math.exp(-q * 5) * Math.sin(q * 36);
+	return twoStrokes(line([-4.6 + shake, -4.6], [CROSS + shake, CROSS]), line([CROSS + shake, -4.6], [-4.6 + shake, CROSS]), 2.1);
+};
+var grown = (pose) => (t, s) => pose(t, s).map((v) => v * GROW);
+var RINGING_SECONDS = 2.52;
+var restsAfterSeconds = {
+	idle: 0,
+	waiting: 0,
+	context: 0,
+	notice: 0,
+	done: RINGING_SECONDS,
+	error: RINGING_SECONDS
+};
+var poses = {
+	idle: grown(agent),
+	memory: grown(memory),
+	thinking: grown(thinking),
+	reading: grown(reading),
+	searching: grown(searching),
+	finding: grown(finding),
+	browsing: grown(browsing),
+	editing: grown(editing),
+	running: grown(running),
+	deleting: grown(deleting),
+	skill: grown(skill),
+	tool: grown(tool),
+	waiting: grown(waiting),
+	done: grown(done),
+	error: grown(error),
+	context: grown(context),
+	notice: grown(notice)
+};
+// src/ds/components/AgentIndicator/animate.ts
+var ease = cubicBezier(.65, 0, .35, 1);
+var MAX_STEP_SECONDS = .05;
+var prefersReducedMotion = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+function animate(svg) {
+	const paint = painter(svg);
+	const reduced = prefersReducedMotion();
+	let clock = 0;
+	let state;
+	let enteredAt = 0;
+	let leaving;
+	let shown;
+	let onScreen = true;
+	let frame = 0;
+	let last = 0;
+	const draw = () => {
+		if (!state) return;
+		let f = poses[state](clock, clock - enteredAt);
+		const morph = clamp01((clock - enteredAt) / MORPH_SECONDS);
+		if (morph >= 1) leaving = void 0;
+		if (leaving) f = lerpFrame(leaving(clock), f, ease(morph));
+		shown = f;
+		paint(f);
+	};
+	const resting = () => !leaving && state !== void 0 && clock - enteredAt >= (restsAfterSeconds[state] ?? Infinity);
+	const tick = (now) => {
+		clock += Math.min(MAX_STEP_SECONDS, (now - last) / 1e3);
+		last = now;
+		draw();
+		frame = resting() ? 0 : requestAnimationFrame(tick);
+	};
+	const wake = () => {
+		const running = onScreen && !reduced && !resting();
+		if (running && !frame) {
+			last = performance.now();
+			frame = requestAnimationFrame(tick);
+		}
+		if (!running && frame) {
+			cancelAnimationFrame(frame);
+			frame = 0;
+		}
+	};
+	const viewport = new IntersectionObserver((entries) => {
+		onScreen = entries.at(-1)?.isIntersecting ?? onScreen;
+		wake();
+	});
+	viewport.observe(svg);
+	return {
+		show(next) {
+			if (next === state) return;
+			if (state && !reduced) {
+				const outgoing = poses[state];
+				const outgoingAt = enteredAt;
+				const frozen = shown;
+				leaving = leaving && frozen ? () => frozen : (t) => outgoing(t, t - outgoingAt);
+			}
+			state = next;
+			enteredAt = clock;
+			draw();
+			wake();
+		},
+		stop() {
+			cancelAnimationFrame(frame);
+			viewport.disconnect();
+		}
+	};
+}
+// src/ds/components/AgentIndicator/agent-indicator.tsx
+var MORPH = { "--agent-indicator-morph": `${MORPH_SECONDS}s` };
+function Strokes({ part, count }) {
+	return range(count).map((i) => /* @__PURE__ */ jsx("path", { "data-part": part }, i));
+}
+var CUTS = /* @__PURE__ */ jsxs("g", {
+	fill: "none",
+	stroke: "black",
+	strokeLinecap: "round",
+	children: [/* @__PURE__ */ jsx(Strokes, {
+		part: "cut",
+		count: 2
+	}), /* @__PURE__ */ jsx(Strokes, {
+		part: "trail-cut",
+		count: 63
+	})]
+});
+var SHAPE = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	/* @__PURE__ */ jsx("path", {
+		"data-part": "body",
+		fillRule: "evenodd"
+	}),
+	range(2).map((i) => /* @__PURE__ */ jsx("circle", { "data-part": "ball" }, i)),
+	/* @__PURE__ */ jsx("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		children: /* @__PURE__ */ jsx(Strokes, {
+			part: "ink",
+			count: 2
+		})
+	})
+] });
+var TRAIL_INKS = /* @__PURE__ */ jsx("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ jsx(Strokes, {
+		part: "trail-ink",
+		count: 63
+	})
+});
+function AgentIndicator({ state, still, className }) {
+	const maskId = `agent-indicator-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const svgRef = useRef(null);
+	const animation = useRef(void 0);
+	useLayoutEffect(() => {
+		if (!svgRef.current) return;
+		const running = animate(svgRef.current);
+		animation.current = running;
+		return () => {
+			running.stop();
+			animation.current = void 0;
+		};
+	}, []);
+	useLayoutEffect(() => {
+		animation.current?.show(state);
+	}, [state]);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-state": state,
+		"data-still": still || void 0,
+		className: cn("agent-indicator inline-flex size-4 shrink-0", className),
+		style: MORPH,
+		children: /* @__PURE__ */ jsxs("svg", {
+			ref: svgRef,
+			viewBox: "-12 -12 24 24",
+			className: "size-full",
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+					id: maskId,
+					maskUnits: "userSpaceOnUse",
+					x: -12,
+					y: -12,
+					width: 24,
+					height: 24,
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: -12,
+						y: -12,
+						width: 24,
+						height: 24,
+						fill: "white"
+					}), CUTS]
+				}) }),
+				/* @__PURE__ */ jsx("g", {
+					fill: "currentColor",
+					mask: `url(#${maskId})`,
+					children: SHAPE
+				}),
+				TRAIL_INKS
+			]
+		})
+	});
+}
+// src/ds/components/AgentIndicator/agent-glyph.tsx
+var SETTLED_SECONDS = 60;
+var drawn = (strokes) => strokes.filter((stroke) => stroke.d);
+function glyph(state) {
+	const parts = once(() => frameParts(poses[state](0, SETTLED_SECONDS)));
+	const Glyph = forwardRef(({ size = 24, color = "currentColor", absoluteStrokeWidth: _, ...props }, ref) => {
+		const maskId = `agent-glyph-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const { body, balls, cuts, inks, trailCuts, trailInks } = parts();
+		const cutting = drawn([...cuts, ...trailCuts]);
+		const named = Object.keys(props).some((prop) => prop.startsWith("aria-") || prop === "role" || prop === "title");
+		return /* @__PURE__ */ jsxs("svg", {
+			ref,
+			viewBox: "-12 -12 24 24",
+			width: size,
+			height: size,
+			fill: color,
+			"aria-hidden": named ? void 0 : true,
+			...props,
+			children: [
+				cutting.length > 0 && /* @__PURE__ */ jsxs("mask", {
+					id: maskId,
+					maskUnits: "userSpaceOnUse",
+					x: -12,
+					y: -12,
+					width: 24,
+					height: 24,
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: -12,
+						y: -12,
+						width: 24,
+						height: 24,
+						fill: "white"
+					}), /* @__PURE__ */ jsx("g", {
+						fill: "none",
+						stroke: "black",
+						strokeLinecap: "round",
+						children: cutting.map(({ d, width }) => /* @__PURE__ */ jsx("path", {
+							"data-part": "cut",
+							d,
+							strokeWidth: width
+						}, d))
+					})]
+				}),
+				/* @__PURE__ */ jsxs("g", {
+					mask: cutting.length > 0 ? `url(#${maskId})` : void 0,
+					children: [
+						/* @__PURE__ */ jsx("path", {
+							"data-part": "body",
+							d: body,
+							fillRule: "evenodd"
+						}),
+						balls.filter((ball) => Number(ball.r) > 0).map((ball) => /* @__PURE__ */ jsx("circle", {
+							"data-part": "ball",
+							...ball
+						}, `${ball.cx} ${ball.cy}`)),
+						/* @__PURE__ */ jsx("g", {
+							fill: "none",
+							stroke: color,
+							strokeLinecap: "round",
+							children: drawn(inks).map(({ d, width }) => /* @__PURE__ */ jsx("path", {
+								"data-part": "ink",
+								d,
+								strokeWidth: width
+							}, d))
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("g", {
+					fill: "none",
+					stroke: color,
+					strokeLinecap: "round",
+					children: drawn(trailInks).map(({ d, width }) => /* @__PURE__ */ jsx("path", {
+						"data-part": "ink",
+						d,
+						strokeWidth: width
+					}, d))
+				})
+			]
+		});
+	});
+	Glyph.displayName = `AgentGlyph(${state})`;
+	return Glyph;
+}
+var glyphs = /* @__PURE__ */ new Map();
+/** An indicator pose as a still icon: what a row shows for the work the indicator morphs into. */
+function agentGlyph(state) {
+	const known = glyphs.get(state);
+	if (known) return known;
+	const made = glyph(state);
+	glyphs.set(state, made);
+	return made;
+}
+export { AgentIndicator as n, agentIndicatorStates as r, agentGlyph as t };
+
+//# sourceMappingURL=AgentIndicator-Bs2S8AWJ.js.map