@0xbuff/throughline 0.0.0-stage → 0.0.2

package/dist/react/index.js

@@ -0,0 +1,810 @@
+import { a as getAt, i as format, n as visibleScene, o as overlaps, r as effectiveView, s as parseTarget, t as describeFrame } from "../describe-ZC7v_r7z.js";
+import { cn } from "cn";
+import { useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/layout/edges.ts
+function bypass(a, b, blockers, horizontal) {
+	if (horizontal) {
+		const y = Math.max(a.y + a.h, b.y + b.h, ...blockers.map((box) => box.y + box.h)) + 16;
+		const from = [a.x + a.w / 2, a.y + a.h];
+		const to = [b.x + b.w / 2, b.y + b.h];
+		return {
+			from,
+			to,
+			d: `M${from[0]} ${from[1]}V${y}H${to[0]}V${to[1]}`,
+			label: [(from[0] + to[0]) / 2, y],
+			angle: -Math.PI / 2
+		};
+	}
+	const x = Math.min(a.x, b.x, ...blockers.map((box) => box.x)) - 10;
+	const from = [a.x, a.y + a.h / 2];
+	const to = [b.x, b.y + b.h / 2];
+	return {
+		from,
+		to,
+		d: `M${from[0]} ${from[1]}H${x}V${to[1]}H${to[0]}`,
+		label: [x, (from[1] + to[1]) / 2],
+		angle: 0
+	};
+}
+/** Attach to the facing sides, preserving direction in horizontal and stacked scenes. */
+function routeEdges(relations, nodes) {
+	const edges = {};
+	for (const relation of relations) {
+		const a = nodes[relation.from];
+		const b = nodes[relation.to];
+		if (!a || !b) continue;
+		const dx = b.x + b.w / 2 - a.x - a.w / 2;
+		const dy = b.y + b.h / 2 - a.y - a.h / 2;
+		const horizontal = Math.abs(dx) > Math.abs(dy);
+		const blockers = Object.values(nodes).filter((box) => box !== a && box !== b && (horizontal ? box.x > Math.min(a.x, b.x) && box.x < Math.max(a.x, b.x) && box.y < Math.max(a.y + a.h, b.y + b.h) && box.y + box.h > Math.min(a.y, b.y) : box.y > Math.min(a.y, b.y) && box.y < Math.max(a.y, b.y) && box.x < Math.max(a.x + a.w, b.x + b.w) && box.x + box.w > Math.min(a.x, b.x)));
+		if (blockers.length) {
+			edges[relation.id] = bypass(a, b, blockers, horizontal);
+			continue;
+		}
+		let from, to, c1, c2;
+		if (relation.from === relation.to) {
+			from = [a.x + a.w * .65, a.y + a.h];
+			to = [a.x + a.w * .35, a.y + a.h];
+			c1 = [from[0] + 12, from[1] + 24];
+			c2 = [to[0] - 12, to[1] + 24];
+		} else if (Math.abs(dx) > Math.abs(dy)) {
+			const direction = Math.sign(dx);
+			from = [direction > 0 ? a.x + a.w : a.x, a.y + a.h / 2];
+			to = [direction > 0 ? b.x : b.x + b.w, b.y + b.h / 2];
+			const bend = Math.max(14, Math.abs(to[0] - from[0]) / 2);
+			c1 = [from[0] + direction * bend, from[1]];
+			c2 = [to[0] - direction * bend, to[1]];
+		} else {
+			const direction = Math.sign(dy) || 1;
+			from = [a.x + a.w / 2, direction > 0 ? a.y + a.h : a.y];
+			to = [b.x + b.w / 2, direction > 0 ? b.y : b.y + b.h];
+			const bend = Math.max(14, Math.abs(to[1] - from[1]) / 2);
+			c1 = [from[0], from[1] + direction * bend];
+			c2 = [to[0], to[1] - direction * bend];
+		}
+		edges[relation.id] = {
+			d: `M${from[0]} ${from[1]}C${c1[0]} ${c1[1]} ${c2[0]} ${c2[1]} ${to[0]} ${to[1]}`,
+			from,
+			to,
+			label: [(from[0] + 3 * c1[0] + 3 * c2[0] + to[0]) / 8, (from[1] + 3 * c1[1] + 3 * c2[1] + to[1]) / 8],
+			angle: Math.atan2(to[1] - c2[1], to[0] - c2[0])
+		};
+	}
+	return edges;
+}
+// src/layout/ranks.ts
+function assignRanks(entities, relations) {
+	const out = new Map(entities.map((entity) => [entity.id, []]));
+	const indegree = new Map(entities.map((entity) => [entity.id, 0]));
+	const connected = /* @__PURE__ */ new Set();
+	for (const relation of relations) {
+		out.get(relation.from)?.push(relation.to);
+		indegree.set(relation.to, indegree.get(relation.to) + 1);
+		connected.add(relation.from);
+		connected.add(relation.to);
+	}
+	const colour = /* @__PURE__ */ new Map();
+	const back = /* @__PURE__ */ new Set();
+	const visit = (id) => {
+		colour.set(id, 1);
+		for (const to of out.get(id)) {
+			const state = colour.get(to);
+			if (state === 1) back.add(`${id}>${to}`);
+			else if (!state) visit(to);
+		}
+		colour.set(id, 2);
+	};
+	const order = [...entities.filter((entity) => indegree.get(entity.id) === 0), ...entities];
+	for (const entity of order) if (!colour.has(entity.id)) visit(entity.id);
+	const preds = new Map(entities.map((entity) => [entity.id, []]));
+	for (const relation of relations) if (relation.from !== relation.to && !back.has(`${relation.from}>${relation.to}`)) preds.get(relation.to)?.push(relation.from);
+	const ranks = /* @__PURE__ */ new Map();
+	const rank = (id) => {
+		const known = ranks.get(id);
+		if (known !== void 0) return known;
+		ranks.set(id, 0);
+		const value = Math.max(-1, ...(preds.get(id) ?? []).map(rank)) + 1;
+		ranks.set(id, value);
+		return value;
+	};
+	for (const entity of entities) if (connected.has(entity.id)) rank(entity.id);
+	const perLane = /* @__PURE__ */ new Map();
+	for (const entity of entities) {
+		if (connected.has(entity.id)) continue;
+		const lane = entity.lane ?? "State";
+		const next = perLane.get(lane) ?? 0;
+		perLane.set(lane, next + 1);
+		ranks.set(entity.id, next);
+	}
+	return ranks;
+}
+// src/layout/value.ts
+const PAD$1 = 10;
+const TOP = 32;
+const gap = 4;
+const limit = (n, min, max) => Math.max(min, Math.min(max, n));
+/** Keep the focused position in a bounded window without hiding truncation. */
+function windowStart(length, count, focus) {
+	return limit(focus - count + 1, 0, Math.max(0, length - count));
+}
+function focusIndex(key, fallback = 0) {
+	return typeof key === "number" && Number.isFinite(key) ? key : fallback;
+}
+function grid(items, columns, cellW, note) {
+	const stride = items.some((item) => item.label !== void 0) ? 46 : 32;
+	return {
+		w: columns * (cellW + gap) - gap + 20,
+		h: TOP + Math.max(1, Math.ceil(items.length / columns)) * stride + (note ? 24 : 6),
+		note,
+		cells: items.map((item, i) => ({
+			...item,
+			x: PAD$1 + i % columns * (cellW + gap),
+			y: TOP + Math.floor(i / columns) * stride,
+			w: cellW,
+			h: 28
+		}))
+	};
+}
+/** Shared by measurement and SVG rendering: the two cannot disagree on clipping. */
+function presentValue(entity, maxWidth, focus = []) {
+	const { value } = entity;
+	const view = effectiveView(entity.view, value);
+	const width = Math.max(80, maxWidth);
+	let result;
+	if (view === "matrix") {
+		const rows = value;
+		const colCount = rows.reduce((maximum, row) => Math.max(maximum, row.length), 0);
+		const cols = Math.max(1, Math.min(6, colCount, Math.floor((width - 16) / 38)));
+		const firstRow = windowStart(rows.length, 6, focusIndex(focus[0]?.[0]));
+		const firstCol = windowStart(colCount, cols, focusIndex(focus[0]?.[1]));
+		const visibleRows = rows.slice(firstRow, firstRow + 6);
+		const items = visibleRows.flatMap((row, r) => Array.from({ length: cols }, (_, c) => ({
+			text: row[firstCol + c] === void 0 ? "·" : format(row[firstCol + c]),
+			path: [firstRow + r, firstCol + c]
+		})));
+		const note = rows.length > 6 || colCount > cols ? `Rows ${firstRow + 1}–${firstRow + visibleRows.length}/${rows.length} · cols ${firstCol + 1}–${firstCol + cols}/${colCount}` : void 0;
+		result = grid(items, cols, Math.min(56, (width - 20 - (cols - 1) * gap) / cols), note);
+	} else if (view === "array" || view === "stack" || view === "bits") {
+		const bits = view === "bits" ? value.toString(2).padStart(Math.max(8, Math.ceil(value.toString(2).length / 4) * 4), "0") : "";
+		const items = bits ? [...bits] : value;
+		const count = view === "stack" ? 6 : view === "bits" ? items.length : 12;
+		const focused = focusIndex(focus[0]?.[0], view === "stack" ? items.length - 1 : 0);
+		const start = windowStart(items.length, count, focused);
+		const shown = items.slice(start, start + count);
+		const cellW = view === "bits" ? 28 : Math.min(86, Math.max(34, ...shown.map((item) => format(item).length * 7.5 + 14)));
+		const cols = view === "stack" ? 1 : Math.max(1, Math.min(shown.length || 1, Math.floor((width - 16) / (cellW + gap))));
+		const note = items.length > count ? `Items ${start + 1}–${start + shown.length} of ${items.length}` : void 0;
+		result = grid(shown.map((item, i) => ({
+			text: format(item),
+			path: [bits ? bits.length - 1 - i : start + i],
+			label: String(bits ? bits.length - 1 - i : start + i)
+		})), cols, Math.min(cellW, width - 20), note);
+	} else if (view === "record") {
+		const entries = Object.entries(value);
+		const focused = entries.findIndex(([key]) => key === focus[0]?.[0]);
+		const start = windowStart(entries.length, 6, focused);
+		const shown = entries.slice(start, start + 6);
+		const note = entries.length > 6 ? `Fields ${start + 1}–${start + shown.length} of ${entries.length}` : void 0;
+		const cellW = Math.min(width - 20, Math.max(100, ...shown.map(([key, item]) => (key.length + format(item).length + 2) * 7.5 + 16)));
+		result = grid(shown.map(([key, item]) => ({
+			text: `${key}: ${format(item)}`,
+			path: [key]
+		})), 1, cellW, note);
+	} else {
+		const text = format(value);
+		result = grid([{
+			text,
+			path: []
+		}], 1, Math.min(width - 20, Math.max(60, text.length * 8 + 16)));
+	}
+	result.w = Math.min(width, Math.max(result.w, Math.min(240, entity.label.length * 7 + 20)));
+	if (!result.cells.length) result.cells.push({
+		path: [],
+		text: "empty",
+		x: PAD$1,
+		y: TOP,
+		w: result.w - 20,
+		h: 28
+	});
+	return result;
+}
+// src/layout.ts
+const PAD = 12;
+const GAP = 28;
+const laneOf = (entity) => entity.lane ?? "State";
+function arrangeGroup(name, members, relations, sizes, arrangement, maxWidth) {
+	const ids = new Set(members.map((entity) => entity.id));
+	const ranks = assignRanks(members, relations.filter((relation) => ids.has(relation.from) && ids.has(relation.to)));
+	const rows = [];
+	for (const member of members) {
+		const rank = arrangement === "tree" ? ranks.get(member.id) ?? 0 : arrangement === "column" ? rows.length : 0;
+		rows[rank] ??= [];
+		rows[rank].push(member);
+	}
+	const nodes = {};
+	let y = 32, w = Math.min(maxWidth, Math.max(100, name.length * 7 + 24));
+	for (const row of rows) {
+		if (!row) continue;
+		let x = PAD, rowHeight = 0;
+		for (const entity of row) {
+			const size = sizes.get(entity.id);
+			if (x > PAD && x + size.w + PAD > maxWidth) {
+				y += rowHeight + GAP;
+				x = PAD;
+				rowHeight = 0;
+			}
+			nodes[entity.id] = {
+				...size,
+				x,
+				y
+			};
+			rowHeight = Math.max(rowHeight, size.h);
+			w = Math.max(w, x + size.w + PAD);
+			x += size.w + GAP;
+		}
+		y += rowHeight + GAP;
+	}
+	if (arrangement === "tree") {
+		const levels = new Set(Object.values(nodes).map((box) => box.y));
+		for (const level of levels) {
+			const boxes = Object.values(nodes).filter((box) => box.y === level);
+			const right = Math.max(...boxes.map((box) => box.x + box.w));
+			const offset = (w - PAD - right) / 2;
+			for (const box of boxes) box.x += offset;
+		}
+	}
+	return {
+		name,
+		x: 0,
+		y: 0,
+		w,
+		h: Math.max(64, y),
+		nodes
+	};
+}
+/** History-sized boxes and responsive group packing; no per-step layout or shrinking text. */
+function composeTrace(trace, availableWidth = 720) {
+	const width = Math.max(160, Number.isFinite(availableWidth) ? Math.floor(availableWidth) : 720);
+	const entities = trace.frames[0]?.state.entities ?? [];
+	const relations = trace.frames[0]?.state.relations ?? [];
+	const maxWidth = width - 24;
+	const nodeWidth = Math.min(260, maxWidth - 24);
+	const sizes = /* @__PURE__ */ new Map();
+	for (const frame of trace.frames) {
+		const targets = frame.state.active.map(parseTarget);
+		for (const entity of frame.state.entities) {
+			const value = presentValue(entity, nodeWidth, targets.filter((target) => target?.id === entity.id).map((target) => target.path));
+			const old = sizes.get(entity.id);
+			sizes.set(entity.id, {
+				x: 0,
+				y: 0,
+				w: Math.max(old?.w ?? 0, value.w),
+				h: Math.max(old?.h ?? 0, value.h)
+			});
+		}
+	}
+	const groups = [...new Set(entities.map(laneOf))].map((name) => arrangeGroup(name, entities.filter((entity) => laneOf(entity) === name), relations, sizes, trace.groups?.find((group) => group.name === name)?.layout ?? "row", maxWidth));
+	const nodes = {};
+	let x = PAD, y = PAD, rowHeight = 0;
+	for (const group of groups) {
+		if (x > PAD && x + group.w + PAD > width) {
+			x = PAD;
+			y += rowHeight + GAP;
+			rowHeight = 0;
+		}
+		group.x = x;
+		group.y = y;
+		for (const [id, box] of Object.entries(group.nodes)) nodes[id] = {
+			...box,
+			x: box.x + x,
+			y: box.y + y
+		};
+		x += group.w + GAP;
+		rowHeight = Math.max(rowHeight, group.h);
+	}
+	for (const rowY of new Set(groups.map((group) => group.y))) {
+		const row = groups.filter((group) => group.y === rowY);
+		const right = Math.max(...row.map((group) => group.x + group.w));
+		const offset = Math.max(0, (width - PAD - right) / 2);
+		for (const group of row) {
+			group.x += offset;
+			for (const id of Object.keys(group.nodes)) nodes[id].x += offset;
+		}
+	}
+	const height = Math.max(100, y + rowHeight + PAD);
+	return {
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		groups: groups.map(({ nodes: _, ...group }) => group),
+		nodes,
+		edges: routeEdges(relations, nodes)
+	};
+}
+// src/react/caption.tsx
+function PlayerCaption({ frame, id }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "thl-caption",
+		id,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "thl-step",
+			children: String(frame.index + 1).padStart(2, "0")
+		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: frame.label }), frame.state.notes.length > 0 && /* @__PURE__ */ jsx("span", { children: frame.state.notes.join(" ") })] }), frame.state.transfers.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "thl-transfers",
+			"aria-label": "Transfers",
+			children: frame.state.transfers.map((transfer, index) => {
+				const link = frame.state.relations.find((relation) => relation.id === transfer.relation);
+				return /* @__PURE__ */ jsxs("li", { children: [link ? `${link.from} → ${link.to}` : transfer.relation, transfer.value !== void 0 && /* @__PURE__ */ jsx("code", { children: format(transfer.value) })] }, `${transfer.relation}:${index}`);
+			})
+		})] })]
+	});
+}
+// src/seek.ts
+/**
+* Player seek model: pure state transitions, no DOM, no timers. The React
+* binding (usePlayerInTimeline) drives these from an interval; tests drive
+* them directly.
+*/
+const SPEEDS = [
+	.5,
+	1,
+	2
+];
+const initialSeek = (max) => ({
+	step: 0,
+	max,
+	playing: false,
+	speed: 1
+});
+const clamp = (n, max) => Math.max(0, Math.min(max, n));
+function seekReducer(state, action) {
+	switch (action.type) {
+		case "reset": return initialSeek(action.max);
+		case "tick":
+			if (!state.playing) return state;
+			if (state.step >= state.max) return {
+				...state,
+				playing: false
+			};
+			return {
+				...state,
+				step: state.step + 1,
+				playing: state.step + 1 < state.max
+			};
+		case "toggle":
+			if (state.playing) return {
+				...state,
+				playing: false
+			};
+			if (state.step >= state.max) return {
+				...state,
+				step: 0,
+				playing: true
+			};
+			return {
+				...state,
+				playing: true
+			};
+		case "pause": return {
+			...state,
+			playing: false
+		};
+		case "step": return {
+			...state,
+			step: clamp(action.to, state.max),
+			playing: false
+		};
+		case "speed": return {
+			...state,
+			speed: action.to
+		};
+	}
+}
+/** Milliseconds per frame at the given speed; `base` is the 1x cadence. */
+const stepDelayMs = (base, speed) => Math.round(base / speed);
+// src/react/controls.tsx
+function PlayerControls({ state, dispatch, sound }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "thl-controls",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Step back",
+				disabled: state.step === 0,
+				onClick: () => dispatch({
+					type: "step",
+					to: state.step - 1
+				}),
+				children: "←"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "thl-play",
+				"aria-label": state.playing ? "Pause" : "Play",
+				disabled: state.max < 1,
+				onClick: () => dispatch({ type: "toggle" }),
+				children: state.playing ? "Pause" : state.step === state.max && state.max > 0 ? "Replay" : "Play"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Step forward",
+				disabled: state.step === state.max,
+				onClick: () => dispatch({
+					type: "step",
+					to: state.step + 1
+				}),
+				children: "→"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				className: "thl-timeline",
+				"aria-label": "Timeline",
+				"aria-valuetext": `Step ${state.step + 1} of ${state.max + 1}`,
+				min: 0,
+				max: state.max,
+				value: state.step,
+				disabled: state.max < 1,
+				onChange: (event) => dispatch({
+					type: "step",
+					to: Number(event.currentTarget.value)
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "thl-count",
+				children: [
+					state.step + 1,
+					" / ",
+					state.max + 1
+				]
+			}),
+			/* @__PURE__ */ jsx("select", {
+				"aria-label": "Playback speed",
+				value: state.speed,
+				onChange: (event) => dispatch({
+					type: "speed",
+					to: Number(event.currentTarget.value)
+				}),
+				children: SPEEDS.map((speed) => /* @__PURE__ */ jsxs("option", {
+					value: speed,
+					children: [speed, "×"]
+				}, speed))
+			}),
+			sound && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Sonify trace",
+				"aria-pressed": sound.enabled,
+				onClick: sound.toggle,
+				children: "Sound"
+			})
+		]
+	});
+}
+// src/react/inspector.tsx
+function StateInspector({ frame }) {
+	return /* @__PURE__ */ jsxs("details", {
+		className: "thl-inspector",
+		children: [/* @__PURE__ */ jsx("summary", { children: "Inspect state" }), /* @__PURE__ */ jsx("dl", { children: visibleScene(frame.state).entities.map((entity) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("dt", { children: [
+			entity.label,
+			" ",
+			/* @__PURE__ */ jsxs("span", { children: [
+				"(",
+				entity.id,
+				")"
+			] })
+		] }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(entity.value) }) })] }, entity.id)) })]
+	});
+}
+// src/react/node-card.tsx
+const truncate = (text, length) => text.length > length ? `${text.slice(0, Math.max(1, length - 1))}…` : text;
+function NodeCard({ entity, previous, box, focus, changed }) {
+	const value = presentValue(entity, box.w, focus);
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(${box.x},${box.y})`,
+		"data-node": entity.id,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: `${entity.label}: ${format(entity.value)}${focus.length ? " (focus)" : ""}` }),
+			/* @__PURE__ */ jsx("rect", {
+				width: box.w,
+				height: box.h,
+				rx: 8,
+				className: cn("thl-node", { "thl-focused": focus.length > 0 })
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: 10,
+				y: 19,
+				className: "thl-node-label",
+				children: truncate(entity.label, Math.floor((box.w - 20) / 7))
+			}),
+			value.cells.map((cell) => {
+				const isChanged = changed.some((path) => overlaps(path, cell.path)) && (effectiveView(entity.view, entity.value) === "bits" ? typeof previous !== "number" || String(Math.floor(previous / 2 ** Number(cell.path[0])) % 2) !== cell.text : JSON.stringify(getAt(previous, cell.path)) !== JSON.stringify(getAt(entity.value, cell.path)));
+				const isFocused = focus.some((path) => overlaps(path, cell.path));
+				return /* @__PURE__ */ jsxs("g", {
+					transform: `translate(${cell.x},${cell.y})`,
+					className: cn("thl-cell", {
+						"thl-changed": isChanged,
+						"thl-focused": isFocused
+					}),
+					children: [
+						/* @__PURE__ */ jsx("title", { children: cell.text }),
+						/* @__PURE__ */ jsx("rect", {
+							width: cell.w,
+							height: cell.h,
+							rx: 4
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: cell.w / 2,
+							y: cell.h / 2,
+							dominantBaseline: "central",
+							textAnchor: "middle",
+							children: truncate(cell.text, Math.floor((cell.w - 10) / 7.8))
+						}),
+						cell.label !== void 0 && /* @__PURE__ */ jsx("text", {
+							x: cell.w / 2,
+							y: cell.h + 13,
+							textAnchor: "middle",
+							className: "thl-index",
+							children: cell.label
+						})
+					]
+				}, JSON.stringify(cell.path));
+			}),
+			value.note && /* @__PURE__ */ jsxs("text", {
+				x: 10,
+				y: box.h - 10,
+				className: "thl-window",
+				children: [truncate(value.note, Math.floor((box.w - 20) / 6.2)), /* @__PURE__ */ jsx("title", { children: value.note })]
+			})
+		]
+	});
+}
+// src/react/scene.tsx
+function SceneLink({ relation, edge, frame }) {
+	const transfer = frame.state.transfers.find((item) => item.relation === relation.id);
+	const label = relation.label;
+	return /* @__PURE__ */ jsxs("g", {
+		className: cn("thl-link", { "thl-transferred": !!transfer }),
+		children: [
+			/* @__PURE__ */ jsx("title", { children: `${relation.from} → ${relation.to}${relation.label ? `: ${relation.label}` : ""}` }),
+			/* @__PURE__ */ jsx("path", {
+				d: edge.d,
+				className: "thl-edge"
+			}),
+			transfer && /* @__PURE__ */ jsx("path", {
+				d: edge.d,
+				pathLength: 1,
+				className: "thl-flow"
+			}, frame.index),
+			/* @__PURE__ */ jsx("polygon", {
+				points: "0,0 -7,-3.5 -7,3.5",
+				transform: `translate(${edge.to[0]},${edge.to[1]}) rotate(${edge.angle * 180 / Math.PI})`
+			}),
+			label && /* @__PURE__ */ jsxs("text", {
+				x: edge.label[0],
+				y: edge.label[1] - 8,
+				textAnchor: "middle",
+				className: "thl-edge-label",
+				children: [truncate(label, 20), /* @__PURE__ */ jsx("title", { children: label })]
+			})
+		]
+	});
+}
+function TraceScene({ frame, previous, layout }) {
+	const scene = visibleScene(frame.state);
+	const before = new Map(previous?.state.entities.map((entity) => [entity.id, entity.value]));
+	const targets = frame.state.active.map(parseTarget);
+	const changes = frame.state.changed.map(parseTarget);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		layout.groups.filter((group) => scene.entities.some((entity) => (entity.lane ?? "State") === group.name)).map((group) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x: group.x,
+			y: group.y,
+			width: group.w,
+			height: group.h,
+			rx: 12,
+			className: "thl-group"
+		}), /* @__PURE__ */ jsx("text", {
+			x: group.x + 12,
+			y: group.y + 20,
+			className: "thl-group-label",
+			children: truncate(group.name, Math.floor((group.w - 24) / 7))
+		})] }, group.name)),
+		scene.relations.map((relation) => /* @__PURE__ */ jsx(SceneLink, {
+			relation,
+			edge: layout.edges[relation.id],
+			frame
+		}, relation.id)),
+		scene.entities.map((entity) => /* @__PURE__ */ jsx(NodeCard, {
+			entity,
+			previous: before.get(entity.id),
+			box: layout.nodes[entity.id],
+			focus: targets.flatMap((target) => target?.id === entity.id ? [target.path] : []),
+			changed: changes.flatMap((target) => target?.id === entity.id ? [target.path] : [])
+		}, entity.id)),
+		!scene.entities.length && /* @__PURE__ */ jsx("text", {
+			x: layout.width / 2,
+			y: 50,
+			textAnchor: "middle",
+			className: "thl-empty",
+			children: "No visible state at this step."
+		})
+	] });
+}
+// src/react/use-player.ts
+function usePlayer(trace) {
+	const [identity, setIdentity] = useState(trace);
+	const [state, dispatch] = useReducer(seekReducer, Math.max(0, trace.frames.length - 1), initialSeek);
+	if (identity !== trace) {
+		setIdentity(trace);
+		dispatch({
+			type: "reset",
+			max: Math.max(0, trace.frames.length - 1)
+		});
+	}
+	useEffect(() => {
+		if (!state.playing) return;
+		const timer = setInterval(() => dispatch({ type: "tick" }), stepDelayMs(1500, state.speed));
+		return () => clearInterval(timer);
+	}, [state.playing, state.speed]);
+	const onKeyDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if ([
+			"ArrowRight",
+			"ArrowLeft",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const to = event.key === "Home" ? 0 : event.key === "End" ? state.max : state.step + (event.key === "ArrowRight" ? 1 : -1);
+			dispatch({
+				type: "step",
+				to
+			});
+		} else if (event.key === " " && state.max > 0) {
+			event.preventDefault();
+			dispatch({ type: "toggle" });
+		}
+	};
+	return {
+		state,
+		dispatch,
+		onKeyDown
+	};
+}
+function useSceneWidth(ref) {
+	const [width, setWidth] = useState(720);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry.contentRect.width > 0) setWidth(Math.floor(entry.contentRect.width));
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return width;
+}
+// src/sonify.ts
+/** Optional stage feedback. Visual focus is not evidence of cost or contention. */
+const SONIFY_MIN_HZ = 261.63;
+const SONIFY_MAX_HZ = 523.25;
+function frequencyForStep(step, total) {
+	if (!Number.isFinite(step) || !Number.isFinite(total) || total <= 1 || step <= 0) return SONIFY_MIN_HZ;
+	if (step >= total - 1) return SONIFY_MAX_HZ;
+	return Math.round(SONIFY_MIN_HZ * (SONIFY_MAX_HZ / SONIFY_MIN_HZ) ** (step / (total - 1)) * 100) / 100;
+}
+function sonificationEvent(step, total) {
+	return {
+		step,
+		total,
+		frequency: frequencyForStep(step, total),
+		durationMs: 180
+	};
+}
+// src/react/use-sound.ts
+/** One short voice at a time; seeking or disabling sound stops the previous voice. */
+function useSound(step, total, enabled, options) {
+	const context = useRef(null);
+	const handler = options?.onTone;
+	useEffect(() => () => {
+		const audio = context.current;
+		context.current = null;
+		audio?.close().catch(() => {});
+	}, []);
+	useEffect(() => {
+		if (!enabled || total === 0) return;
+		const event = sonificationEvent(step, total);
+		try {
+			if (handler) {
+				handler(event);
+				return;
+			}
+			if (typeof AudioContext === "undefined") return;
+			context.current ??= new AudioContext();
+			const audio = context.current;
+			audio.resume().catch(() => {});
+			const oscillator = audio.createOscillator();
+			const gain = audio.createGain();
+			const now = audio.currentTime;
+			oscillator.frequency.value = event.frequency;
+			gain.gain.setValueAtTime(1e-4, now);
+			gain.gain.exponentialRampToValueAtTime(.1, now + .02);
+			gain.gain.exponentialRampToValueAtTime(1e-4, now + event.durationMs / 1e3);
+			oscillator.connect(gain);
+			gain.connect(audio.destination);
+			oscillator.onended = () => {
+				oscillator.disconnect();
+				gain.disconnect();
+			};
+			oscillator.start();
+			oscillator.stop(now + event.durationMs / 1e3 + .02);
+			return () => {
+				oscillator.stop();
+			};
+		} catch {}
+	}, [
+		step,
+		total,
+		enabled,
+		handler
+	]);
+}
+// src/react/player.tsx
+function ThroughlinePlayer({ trace, className, theme = "auto", sonification }) {
+	const ref = useRef(null);
+	const width = useSceneWidth(ref);
+	const { state, dispatch, onKeyDown } = usePlayer(trace);
+	const [sound, setSound] = useState(sonification?.enabled ?? false);
+	const layout = useMemo(() => composeTrace(trace, width), [trace, width]);
+	const captionId = useId();
+	const frame = trace.frames[state.step] ?? trace.frames[0];
+	useSound(state.step, trace.frames.length, !!sonification && sound, sonification);
+	const summary = frame ? describeFrame(frame, trace.frames.length) : "No steps to display.";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("thl", className),
+		"data-theme": theme,
+		role: "group",
+		"aria-label": "Visualization player",
+		tabIndex: 0,
+		onKeyDown,
+		children: [/* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "thl-sr-only",
+			children: summary
+		}), frame ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("svg", {
+				width: "100%",
+				height: layout.height,
+				viewBox: layout.viewBox,
+				role: "img",
+				"aria-label": summary,
+				"aria-describedby": captionId,
+				className: "thl-scene",
+				children: /* @__PURE__ */ jsx(TraceScene, {
+					frame,
+					previous: trace.frames[state.step - 1],
+					layout
+				})
+			}),
+			/* @__PURE__ */ jsx(PlayerCaption, {
+				frame,
+				id: captionId
+			}),
+			/* @__PURE__ */ jsx(PlayerControls, {
+				state,
+				dispatch,
+				sound: sonification ? {
+					enabled: sound,
+					toggle: () => setSound(!sound)
+				} : void 0
+			}),
+			/* @__PURE__ */ jsx(StateInspector, { frame })
+		] }) : /* @__PURE__ */ jsx("p", {
+			className: "thl-empty",
+			children: "No steps to display."
+		})]
+	});
+}
+export { ThroughlinePlayer };
+
+//# sourceMappingURL=index.js.map