@kekonic/diagrams 1.0.0-rc.4

package/dist/index.mjs

@@ -0,0 +1,1642 @@
+import { BUILTIN_KIND_CATALOG, BUILTIN_KIND_CATALOG as BUILTIN_KIND_CATALOG$1, BUILTIN_KIND_LIST, BUILTIN_SHAPE_IDS, BUILTIN_SHAPE_IDS as BUILTIN_SHAPE_IDS$1, EDGE_OPS, EDGE_OPS as EDGE_OPS$1, STATEMENT_KEYWORDS, STATEMENT_KEYWORDS as STATEMENT_KEYWORDS$1, animationIdFromName, bindSequenceFlowEdgeIds, compile, compile as compile$1, displayLabelCase, edgeOpsPattern, enumerateAutoPaths, flowHopEdgeId, formatLabelText, formatSource, formatSource as formatSource$1, getKindDefaults, inferAutoAnimation, inferAutoAnimation as inferAutoAnimation$1, isBuiltinKind, isGeometryKind, isKnownShapeId, isPureCardinalityLabel, kindHasCapability, kindSubtitle, listGeometryKinds, listKindsByCategory, mergeOptions, mergeOptions as mergeOptions$1, mergePresentationOptions, mergePresentationOptions as mergePresentationOptions$1, normalizeShapeId, parse, parse as parse$1, planAutoWalk, rectsOverlap, resolvePresentation, resolvePresentation as resolvePresentation$1, traceDeclarationPath } from "@kekonic/diagrams-core";
+import { DEFAULT_FONT_FAMILY, ELK_LAYOUT_ALGORITHM, ELK_LAYOUT_ALGORITHM as ELK_LAYOUT_ALGORITHM$1, ELK_ROUTER_ALGORITHM, ELK_ROUTER_ALGORITHM as ELK_ROUTER_ALGORITHM$1, analyzeDiagramTopology, analyzeDiagramTopology as analyzeDiagramTopology$1, defaultMeasurer, ensureBrowserFonts, layoutAndRouteWithElk, layoutAndRouteWithElk as layoutAndRouteWithElk$1, measureGraph, measureGraph as measureGraph$1, measurerUsedApproximationFallback, resetDefaultMeasurer, snapErdEdgeEndpoints } from "@kekonic/diagrams-layout";
+import { THEME_CSS, THEME_CSS as THEME_CSS$1, getThemeTokens, getThemeTokens as getThemeTokens$1, registerTheme, themeToCss } from "@kekonic/diagrams-theme";
+import { BUILTIN_ICON_ALIASES, collectIconIds, collectIconIds as collectIconIds$1, listBuiltinIconIds, listBuiltinIconIds as listBuiltinIconIds$1, listDefaultCollections, listDefaultCollections as listDefaultCollections$1, normalizeIconId, parseIconId, preloadCollections, preloadIcons, preloadIcons as preloadIcons$1, registerCollection, registerCollectionLoader, registerIcon, renderIconById, resolveIcon, setIconifyApiBaseUrl } from "@kekonic/diagrams-icons";
+import { renderSvg, renderSvg as renderSvg$1 } from "@kekonic/diagrams-render-svg";
+import { ARROW_ENDPOINT_INSET, CARDINALITY_ENDPOINT_INSET, EDGE_ENDPOINT_INSET, EDGE_LABEL_ICON, EDGE_LABEL_ICON_GAP, EDGE_LABEL_PAD_X, applyCrossingTreatment, applyCrossingTreatment as applyCrossingTreatment$1, attachPointOnPerimeter, detectCrossingPoints, trimEdgeEndpoints } from "@kekonic/diagrams-routing";
+import { buildNodeBoundsModel, getNodeTypeDefinition, listRegisteredNodeTypeIds, listRegisteredShapeIds, registerNodeType, registerShape, resolveNodeTypeGeometry, resolveShapeGeometry } from "@kekonic/diagrams-geometry";
+//#region src/pipeline/finalize-edges.ts
+/** Match `.flow-edge-label-text` theme (11px / 700). */
+const EDGE_LABEL_FONT = {
+	fontSize: 11,
+	fontFamily: DEFAULT_FONT_FAMILY,
+	fontWeight: "700"
+};
+const EDGE_LABEL_PAD_Y = 5;
+/** Prefer anchors this far from path ends / arrowheads. */
+const ENDPOINT_SOFT_CLEARANCE = 36;
+/** Prefer anchors this far from polyline bends. */
+const BEND_SOFT_CLEARANCE = 28;
+/** Prefer anchors this far from edge crossings. */
+const CROSSING_SOFT_CLEARANCE = 24;
+function pathsToRouted(paths) {
+	return paths.map((path) => {
+		const points = path.points;
+		const segments = [];
+		for (let i = 0; i < points.length - 1; i++) segments.push({
+			from: points[i],
+			to: points[i + 1]
+		});
+		return {
+			edgeId: path.edgeId,
+			points,
+			segments
+		};
+	});
+}
+function measureLabelSize(text, hasIcon, measurer) {
+	const metrics = text.length > 0 ? measurer.measureText(text, EDGE_LABEL_FONT) : {
+		width: 0,
+		height: EDGE_LABEL_FONT.fontSize * 1.2
+	};
+	const iconGutter = hasIcon ? EDGE_LABEL_ICON + (text.length > 0 ? EDGE_LABEL_ICON_GAP : 0) : 0;
+	const min = hasIcon && text.length === 0 ? 22 : 28;
+	return {
+		width: Math.max(min, metrics.width + iconGutter + EDGE_LABEL_PAD_X * 2),
+		height: Math.max(18, Math.ceil(metrics.height) + EDGE_LABEL_PAD_Y * 2)
+	};
+}
+function overlapArea(a, b) {
+	const x0 = Math.max(a.x, b.x);
+	const y0 = Math.max(a.y, b.y);
+	const x1 = Math.min(a.x + a.width, b.x + b.width);
+	const y1 = Math.min(a.y + a.height, b.y + b.height);
+	if (x1 <= x0 || y1 <= y0) return 0;
+	return (x1 - x0) * (y1 - y0);
+}
+function distPoint(a, b) {
+	return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function distPointToRect(p, r) {
+	return distPoint(p, {
+		x: Math.min(Math.max(p.x, r.x), r.x + r.width),
+		y: Math.min(Math.max(p.y, r.y), r.y + r.height)
+	});
+}
+function pathLength(points) {
+	let len = 0;
+	for (let i = 1; i < points.length; i++) {
+		const a = points[i - 1];
+		const b = points[i];
+		len += Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
+	}
+	return len;
+}
+/** Nearest point on an orthogonal polyline to `p`. */
+function nearestOnPath(points, p) {
+	let best = points[0] ?? p;
+	let bestD = Infinity;
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		let q;
+		if (Math.abs(a.x - b.x) < .5) {
+			const y = Math.min(Math.max(p.y, Math.min(a.y, b.y)), Math.max(a.y, b.y));
+			q = {
+				x: a.x,
+				y
+			};
+		} else if (Math.abs(a.y - b.y) < .5) q = {
+			x: Math.min(Math.max(p.x, Math.min(a.x, b.x)), Math.max(a.x, b.x)),
+			y: a.y
+		};
+		else q = {
+			x: Math.min(Math.max(p.x, Math.min(a.x, b.x)), Math.max(a.x, b.x)),
+			y: Math.min(Math.max(p.y, Math.min(a.y, b.y)), Math.max(a.y, b.y))
+		};
+		const d = distPoint(p, q);
+		if (d < bestD) {
+			bestD = d;
+			best = q;
+		}
+	}
+	return best;
+}
+/** Gap between label pill and the stroke — keep pills hugging the path. */
+function pathClearance(bounds, points) {
+	const onPath = nearestOnPath(points, {
+		x: bounds.x + bounds.width / 2,
+		y: bounds.y + bounds.height / 2
+	});
+	return distPoint(onPath, {
+		x: Math.min(Math.max(onPath.x, bounds.x), bounds.x + bounds.width),
+		y: Math.min(Math.max(onPath.y, bounds.y), bounds.y + bounds.height)
+	});
+}
+function scoreLabelCandidate(bounds, anchor, obstacles, points, crossings, alongFrac, position, authoredPosition) {
+	let score = 0;
+	for (const obs of obstacles) {
+		const area = overlapArea(bounds, obs);
+		if (area > 0) score += area * 10;
+		else if (rectsOverlap(bounds, obs, 4)) score += 4;
+	}
+	if (points.length >= 2) {
+		const start = points[0];
+		const end = points[points.length - 1];
+		const dStart = distPoint(anchor, start);
+		const dEnd = distPoint(anchor, end);
+		if (dStart < ENDPOINT_SOFT_CLEARANCE) score += (ENDPOINT_SOFT_CLEARANCE - dStart) * 2;
+		if (dEnd < ENDPOINT_SOFT_CLEARANCE) score += (ENDPOINT_SOFT_CLEARANCE - dEnd) * 2;
+		for (let i = 1; i < points.length - 1; i++) {
+			const d = distPoint(anchor, points[i]);
+			if (d < BEND_SOFT_CLEARANCE) score += (BEND_SOFT_CLEARANCE - d) * 1.5;
+		}
+	}
+	for (const c of crossings) {
+		const d = distPointToRect(c, bounds);
+		if (d < CROSSING_SOFT_CLEARANCE) score += (CROSSING_SOFT_CLEARANCE - d) * 3;
+	}
+	const preferred = position === "start" ? .22 : position === "end" ? .78 : .5;
+	const total = Math.max(1, pathLength(points));
+	const weight = authoredPosition ? 3.4 : .55;
+	score += Math.abs(alongFrac - preferred) * total * weight;
+	const clearance = pathClearance(bounds, points);
+	if (clearance > 2) score += (clearance - 2) * 6;
+	return score;
+}
+/**
+* Place an edge label near a free path segment, preferring positions that miss
+* node cards, corners, endpoints/arrowheads, and crossings.
+*/
+function placeEdgeLabel(edgeId, text, points, obstacles, endpoints = [], options = {}) {
+	const measurer = options.measurer ?? defaultMeasurer;
+	const crossings = options.crossings ?? [];
+	const position = options.position ?? "middle";
+	const authoredPosition = options.authoredPosition === true;
+	const { width: w, height: h } = measureLabelSize(text, options.hasIcon === true, measurer);
+	const midFallback = points[Math.floor(points.length / 2)] ?? {
+		x: 0,
+		y: 0
+	};
+	const totalLen = Math.max(1, pathLength(points));
+	const candidates = [];
+	const pushCandidate = (anchor, bounds, length, alongFrac) => {
+		candidates.push({
+			anchor,
+			bounds,
+			score: scoreLabelCandidate(bounds, anchor, obstacles, points, crossings, alongFrac, position, authoredPosition),
+			length
+		});
+	};
+	let walked = 0;
+	const GAP = 4;
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		const length = Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+		const fracs = length > 40 ? [
+			.2,
+			.35,
+			.5,
+			.65,
+			.8
+		] : [.5];
+		for (const t of fracs) {
+			const anchor = {
+				x: a.x + (b.x - a.x) * t,
+				y: a.y + (b.y - a.y) * t
+			};
+			const alongFrac = (walked + t * length) / totalLen;
+			const offsets = Math.abs(a.x - b.x) < .5 ? [
+				{
+					dx: GAP,
+					dy: -h / 2
+				},
+				{
+					dx: -w - GAP,
+					dy: -h / 2
+				},
+				{
+					dx: GAP,
+					dy: -h - GAP
+				},
+				{
+					dx: -w - GAP,
+					dy: -h - GAP
+				},
+				{
+					dx: GAP,
+					dy: GAP
+				},
+				{
+					dx: -w - GAP,
+					dy: GAP
+				}
+			] : [
+				{
+					dx: -w / 2,
+					dy: -h - GAP
+				},
+				{
+					dx: -w / 2,
+					dy: GAP
+				},
+				{
+					dx: -w / 2,
+					dy: -h / 2
+				},
+				{
+					dx: -w - GAP,
+					dy: -h / 2
+				},
+				{
+					dx: GAP,
+					dy: -h / 2
+				}
+			];
+			for (const { dx, dy } of offsets) pushCandidate(anchor, {
+				x: anchor.x + dx,
+				y: anchor.y + dy,
+				width: w,
+				height: h
+			}, length, alongFrac);
+		}
+		walked += length;
+	}
+	const cluster = endpoints.length ? endpoints : obstacles;
+	if (cluster.length && points.length >= 2) {
+		const midFrac = position === "start" ? .22 : position === "end" ? .78 : .5;
+		let along = 0;
+		const target = midFrac * totalLen;
+		let parkOn = points[0];
+		for (let i = 0; i < points.length - 1; i++) {
+			const a = points[i];
+			const b = points[i + 1];
+			const seg = Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+			if (along + seg >= target || i === points.length - 2) {
+				const t = seg > 0 ? Math.min(1, Math.max(0, (target - along) / seg)) : .5;
+				parkOn = {
+					x: a.x + (b.x - a.x) * t,
+					y: a.y + (b.y - a.y) * t
+				};
+				break;
+			}
+			along += seg;
+		}
+		const top = Math.min(...cluster.map((o) => o.y));
+		const bottom = Math.max(...cluster.map((o) => o.y + o.height));
+		pushCandidate(parkOn, {
+			x: parkOn.x - w / 2,
+			y: top - h - GAP,
+			width: w,
+			height: h
+		}, 1, midFrac);
+		pushCandidate(parkOn, {
+			x: parkOn.x - w / 2,
+			y: bottom + GAP,
+			width: w,
+			height: h
+		}, 1, midFrac);
+		pushCandidate(parkOn, {
+			x: parkOn.x + GAP,
+			y: parkOn.y - h / 2,
+			width: w,
+			height: h
+		}, 1, midFrac);
+		pushCandidate(parkOn, {
+			x: parkOn.x - w - GAP,
+			y: parkOn.y - h / 2,
+			width: w,
+			height: h
+		}, 1, midFrac);
+	}
+	candidates.sort((c, d) => c.score - d.score || d.length - c.length);
+	const best = candidates[0];
+	if (best) {
+		const anchor = nearestOnPath(points, {
+			x: best.bounds.x + best.bounds.width / 2,
+			y: best.bounds.y + best.bounds.height / 2
+		});
+		return {
+			edgeId,
+			text,
+			bounds: best.bounds,
+			anchor
+		};
+	}
+	return {
+		edgeId,
+		text,
+		bounds: {
+			x: midFallback.x - w / 2,
+			y: midFallback.y - h - 6,
+			width: w,
+			height: h
+		},
+		anchor: midFallback
+	};
+}
+/** ELK labels + ERD column snap + marker inset (silhouette attach already ran in layout). */
+function finalizeElkEdges(input) {
+	const { graph, layout, edgePaths, routingOpts } = input;
+	if (graph.diagramKind === "sequence" || layout.sequence) {
+		const routingEdges = pathsToRouted(edgePaths);
+		const treatedEdges = routingEdges.map((e) => ({
+			edgeId: e.edgeId,
+			segments: e.segments.map((s) => ({
+				type: "line",
+				from: s.from,
+				to: s.to
+			}))
+		}));
+		return {
+			labels: (layout.edgeLabels ?? []).map((l) => ({
+				edgeId: l.edgeId,
+				text: l.text,
+				bounds: l.bounds,
+				anchor: l.anchor
+			})),
+			treatedEdges,
+			routingEdges
+		};
+	}
+	const measurer = input.measurer ?? defaultMeasurer;
+	const snappedPaths = snapErdEdgeEndpoints(graph, layout, edgePaths);
+	const routingEdges = pathsToRouted(snappedPaths);
+	const crossings = detectCrossingPoints(routingEdges);
+	const nodeBounds = new Map(layout.nodes.map((n) => [n.nodeId, n.bounds]));
+	const obstacles = layout.nodes.map((n) => n.bounds);
+	const labels = [];
+	const labelObstacles = [];
+	for (const edge of graph.edges) {
+		const path = snappedPaths.find((p) => p.edgeId === edge.id);
+		if (!path || path.points.length < 2) continue;
+		const pureCard = Boolean(edge.cardinality && isPureCardinalityLabel(edge.label));
+		let text;
+		if (edge.fromColumn || edge.toColumn) {
+			if (edge.label && !pureCard) text = edge.label;
+		} else if (edge.label && !pureCard) text = edge.label;
+		const hasIcon = Boolean(edge.icon && edge.icon !== "none");
+		if (!text && !hasIcon) {
+			const elk = layout.edgeLabels.find((l) => l.edgeId === edge.id);
+			if (elk && !pureCard) {
+				labels.push({
+					edgeId: elk.edgeId,
+					text: elk.text,
+					bounds: elk.bounds,
+					anchor: elk.anchor
+				});
+				labelObstacles.push(elk.bounds);
+			}
+			continue;
+		}
+		const endpoints = [nodeBounds.get(edge.from), nodeBounds.get(edge.to)].filter((b) => b != null);
+		const placed = placeEdgeLabel(edge.id, text ?? "", path.points, [...obstacles, ...labelObstacles], endpoints, {
+			hasIcon,
+			measurer,
+			crossings,
+			position: edge.labelPosition,
+			authoredPosition: edge.labelPosition != null
+		});
+		labels.push(placed);
+		labelObstacles.push(placed.bounds);
+	}
+	const treated = applyCrossingTreatment$1(routingEdges, routingOpts.crossings ?? "none");
+	const showArrowheads = routingOpts.arrowheads !== false;
+	return {
+		labels,
+		treatedEdges: trimEdgeEndpoints(treated, {
+			sourceInset: (edgeId) => {
+				return graph.edges.find((e) => e.id === edgeId)?.cardinality ? CARDINALITY_ENDPOINT_INSET : EDGE_ENDPOINT_INSET;
+			},
+			targetInset: (edgeId) => {
+				const edge = graph.edges.find((e) => e.id === edgeId);
+				if (edge?.cardinality) return CARDINALITY_ENDPOINT_INSET;
+				return showArrowheads && edge != null && (edge.kind === "sync" || edge.kind === "async" || edge.kind === "eventual" || edge.kind === "failure") ? ARROW_ENDPOINT_INSET : EDGE_ENDPOINT_INSET;
+			}
+		}),
+		routingEdges
+	};
+}
+//#endregion
+//#region src/quality.ts
+const DEFAULT_TARGET_ASPECT_RATIO = 16 / 9;
+const QUALITY_CHECKS = [
+	"extreme-aspect-ratio",
+	"canvas-spanning-edges",
+	"excessive-edge-crossings",
+	"reverse-layout-flow",
+	"edge-label-pressure"
+];
+const QUALITY_RANGE = {
+	start: {
+		line: 1,
+		column: 1,
+		offset: 0
+	},
+	end: {
+		line: 1,
+		column: 1,
+		offset: 0
+	}
+};
+/** Measure rendered geometry and return evidence plus actionable, human-readable diagnostics. */
+function analyzeDiagramQuality(graph, layout, routedEdges) {
+	const aspectRatio = layout.width / Math.max(1, layout.height);
+	const crossings = detectCrossingPoints(routedEdges).length;
+	const canvasSpanningEdges = layout.edgePaths.filter((path) => {
+		if (path.points.length < 2) return false;
+		const xs = path.points.map((point) => point.x);
+		const ys = path.points.map((point) => point.y);
+		const spanX = Math.max(...xs) - Math.min(...xs);
+		const spanY = Math.max(...ys) - Math.min(...ys);
+		let length = 0;
+		for (let index = 1; index < path.points.length; index++) {
+			const previous = path.points[index - 1];
+			const current = path.points[index];
+			length += Math.abs(current.x - previous.x) + Math.abs(current.y - previous.y);
+		}
+		return Math.max(spanX / Math.max(1, layout.width), spanY / Math.max(1, layout.height)) > .72 && length > .8 * (layout.width + layout.height);
+	}).length;
+	const nodeBounds = new Map(layout.nodes.map((node) => [node.nodeId, node.bounds]));
+	const horizontal = layout.direction === "LR" || layout.direction === "RL";
+	const reverseFlowEdges = graph.edges.filter((edge) => {
+		const from = nodeBounds.get(edge.from);
+		const to = nodeBounds.get(edge.to);
+		if (!from || !to) return false;
+		const fromPrimary = horizontal ? from.x + from.width / 2 : from.y + from.height / 2;
+		const toPrimary = horizontal ? to.x + to.width / 2 : to.y + to.height / 2;
+		const sign = layout.direction === "RL" || layout.direction === "BT" ? -1 : 1;
+		return (fromPrimary - toPrimary) * sign > 24;
+	}).length;
+	const labeledEdges = graph.edges.filter((edge) => edge.label?.trim()).length;
+	const metrics = {
+		width: layout.width,
+		height: layout.height,
+		aspectRatio: Number(aspectRatio.toFixed(3)),
+		targetAspectRatio: Number(DEFAULT_TARGET_ASPECT_RATIO.toFixed(3)),
+		targetAspectRatioDifference: Number(Math.abs(aspectRatio - DEFAULT_TARGET_ASPECT_RATIO).toFixed(3)),
+		edgeCrossings: crossings,
+		canvasSpanningEdges,
+		reverseFlowEdges,
+		labeledEdges
+	};
+	if (graph.nodes.length < 6) return {
+		metrics,
+		diagnostics: []
+	};
+	const diagnostics = [];
+	const silhouetteRatio = Math.max(aspectRatio, 1 / Math.max(.001, aspectRatio));
+	if (silhouetteRatio > 3) diagnostics.push({
+		severity: "warning",
+		code: "extreme-aspect-ratio",
+		message: `Diagram canvas is extremely ${layout.width > layout.height ? "wide" : "tall"} (${silhouetteRatio.toFixed(1)}:1)`,
+		range: QUALITY_RANGE,
+		hint: "Aim near 16:9 by trying another direction, a bounded grid, shorter labels, or multiple views."
+	});
+	if (canvasSpanningEdges >= 3) diagnostics.push({
+		severity: "warning",
+		code: "canvas-spanning-edges",
+		message: `${canvasSpanningEdges} edges span most of the canvas`,
+		range: QUALITY_RANGE,
+		hint: "Separate feedback behavior, reduce cross-region relationships, or use progressive views."
+	});
+	if (crossings >= Math.max(5, Math.ceil(graph.edges.length / 3))) diagnostics.push({
+		severity: "warning",
+		code: "excessive-edge-crossings",
+		message: `Diagram contains ${crossings} edge crossings`,
+		range: QUALITY_RANGE,
+		hint: "Reorder regions, choose a different layout, or split secondary relationships into another view."
+	});
+	if (reverseFlowEdges >= Math.max(3, Math.ceil(graph.edges.length * .2))) diagnostics.push({
+		severity: "warning",
+		code: "reverse-layout-flow",
+		message: `${reverseFlowEdges} transitions run against the primary layout direction`,
+		range: QUALITY_RANGE,
+		hint: "Move retry behavior to a focused view or use responsibility lanes and explicit stages."
+	});
+	if (graph.edges.length > graph.nodes.length * 1.6 && labeledEdges >= 12) diagnostics.push({
+		severity: "warning",
+		code: "edge-label-pressure",
+		message: "Edge-label pressure is high for the number of nodes",
+		range: QUALITY_RANGE,
+		hint: "Keep the primary story and move secondary conditions or event catalogs into another view."
+	});
+	return {
+		metrics,
+		diagnostics
+	};
+}
+//#endregion
+//#region src/pipeline/render.ts
+const DEFAULT_LAYOUT = {
+	direction: "LR",
+	density: "normal",
+	spacingScale: 1.1,
+	algorithmVersion: "elk-layered-v1",
+	groupLayout: "compound",
+	nodePlacement: "balanced"
+};
+const DEFAULT_ROUTING = {
+	route: "metro",
+	crossings: "gaps",
+	arrowheads: true
+};
+const DEFAULT_RENDER = {
+	theme: "dark",
+	shadows: false,
+	roundedCorners: false
+};
+function parseSource(source) {
+	const ast = parse$1(source);
+	return {
+		ast,
+		diagnostics: ast.diagnostics
+	};
+}
+function compileSource(source, diagramIndex = 0) {
+	const { ast } = parseSource(source);
+	return compile$1(ast, diagramIndex);
+}
+function measureFromGraph(graph, direction = "LR") {
+	const measured = measureGraph$1(graph);
+	const topology = analyzeDiagramTopology$1(graph, direction);
+	return {
+		graph,
+		measured: measured.nodes,
+		topology,
+		diagnostics: []
+	};
+}
+async function layoutFromGraph(graph, layoutOpts = {}) {
+	const opts = mergeOptions$1(DEFAULT_LAYOUT, layoutOpts);
+	return (await layoutAndRouteWithElk$1(graph, measureGraph$1(graph).nodes, opts)).layout;
+}
+async function layoutMeasuredGraph(measuredGraph, layoutOpts = {}) {
+	const opts = mergeOptions$1(DEFAULT_LAYOUT, layoutOpts);
+	const result = await layoutAndRouteWithElk$1(measuredGraph.graph, measuredGraph.measured, opts);
+	return {
+		...measuredGraph,
+		layout: result.layout
+	};
+}
+/**
+* Finalize labels + endpoint trim from ELK edge paths on `layout`.
+* Does not re-run layout — ELK already owned routing in `layoutFromGraph` / `layoutMeasuredGraph`.
+*/
+function routeFromLayout(graph, layout, routingOpts = {}) {
+	const opts = mergeOptions$1(DEFAULT_ROUTING, routingOpts);
+	const t0 = performance.now();
+	const finalized = finalizeElkEdges({
+		graph,
+		layout,
+		edgePaths: layout.edgePaths,
+		routingOpts: opts
+	});
+	return {
+		labels: finalized.labels,
+		treatedEdges: finalized.treatedEdges,
+		routing: {
+			edges: finalized.routingEdges,
+			algorithmVersion: ELK_ROUTER_ALGORITHM$1,
+			routeMs: performance.now() - t0,
+			diagnostics: []
+		}
+	};
+}
+function routeLaidOutGraph(laidOut, routingOpts = {}) {
+	const routed = routeFromLayout(laidOut.graph, laidOut.layout, routingOpts);
+	return {
+		...laidOut,
+		routing: routed.routing
+	};
+}
+function finalizeRoutedGraph(routed, routingOpts = {}) {
+	const opts = mergeOptions$1(DEFAULT_ROUTING, routingOpts);
+	const finalized = finalizeElkEdges({
+		graph: routed.graph,
+		layout: routed.layout,
+		edgePaths: routed.layout.edgePaths,
+		routingOpts: opts
+	});
+	return {
+		...routed,
+		routing: {
+			...routed.routing,
+			edges: finalized.routingEdges
+		},
+		labels: finalized.labels,
+		treatedEdges: finalized.treatedEdges
+	};
+}
+async function renderPipeline(source, options = {}) {
+	const t0 = performance.now();
+	const diagnostics = [];
+	const tParse = performance.now();
+	const { ast, diagnostics: parseDiags } = parseSource(source);
+	diagnostics.push(...parseDiags);
+	const parseMs = performance.now() - tParse;
+	const tCompile = performance.now();
+	const compiled = compile$1(ast);
+	diagnostics.push(...compiled.diagnostics);
+	const graph = compiled.graph;
+	const compileMs = performance.now() - tCompile;
+	if (diagnostics.some((d) => d.severity === "error")) return emptyResult(diagnostics, {
+		parseMs,
+		compileMs,
+		measureMs: 0,
+		layoutMs: 0,
+		routeMs: 0,
+		renderMs: 0,
+		totalMs: performance.now() - t0,
+		nodeCount: graph.nodes.length,
+		edgeCount: graph.edges.length,
+		layoutAlgorithm: ELK_LAYOUT_ALGORITHM$1,
+		routerAlgorithm: ELK_ROUTER_ALGORITHM$1
+	});
+	const layoutOpts = mergeOptions$1(DEFAULT_LAYOUT, compiled.layoutHints, options.layout);
+	const routingOpts = mergeOptions$1(DEFAULT_ROUTING, compiled.routingHints, options.edges);
+	const renderOpts = mergeOptions$1(DEFAULT_RENDER, compiled.renderHints, options);
+	renderOpts.presentation = mergePresentationOptions$1(compiled.renderHints.presentation, options.presentation);
+	const presentation = resolvePresentation$1(renderOpts.presentation, graph.title);
+	await preloadIcons$1(collectIconIds$1([
+		...graph.nodes,
+		...graph.edges,
+		...graph.groups
+	]));
+	const tMeasure = performance.now();
+	const measured = measureGraph$1(graph, void 0, { reserveKindSubtitles: presentation.showKindSubtitles });
+	const measureMs = performance.now() - tMeasure;
+	if (measurerUsedApproximationFallback()) diagnostics.push({
+		severity: "warning",
+		code: "FM210",
+		message: "Text measurement using approximation fallback; bundled font unavailable",
+		range: {
+			start: {
+				line: 1,
+				column: 1,
+				offset: 0
+			},
+			end: {
+				line: 1,
+				column: 1,
+				offset: 0
+			}
+		},
+		hint: "Install @fontsource/inter for shared CLI/browser metrics"
+	});
+	const tLayout = performance.now();
+	const elk = await layoutAndRouteWithElk$1(graph, measured.nodes, layoutOpts);
+	const layout = elk.layout;
+	const layoutMs = performance.now() - tLayout;
+	const tRoute = performance.now();
+	const finalized = finalizeElkEdges({
+		graph,
+		layout,
+		edgePaths: layout.edgePaths,
+		routingOpts
+	});
+	diagnostics.push(...analyzeDiagramQuality(graph, layout, finalized.routingEdges).diagnostics);
+	const routeMs = performance.now() - tRoute;
+	const routing = {
+		edges: finalized.routingEdges,
+		algorithmVersion: elk.routerAlgorithm,
+		routeMs,
+		diagnostics: []
+	};
+	const tRender = performance.now();
+	const svg = renderSvg$1({
+		graph,
+		layout,
+		measured: measured.nodes,
+		treatedEdges: finalized.treatedEdges,
+		labels: finalized.labels,
+		options: renderOpts,
+		routingOptions: {
+			route: routingOpts.route ?? "orthogonal",
+			cornerRadius: routingOpts.cornerRadius,
+			arrowheads: routingOpts.arrowheads
+		}
+	});
+	const stats = {
+		parseMs,
+		compileMs,
+		measureMs,
+		layoutMs,
+		routeMs,
+		renderMs: performance.now() - tRender,
+		totalMs: performance.now() - t0,
+		nodeCount: graph.nodes.length,
+		edgeCount: graph.edges.length,
+		layoutAlgorithm: layout.algorithmVersion,
+		routerAlgorithm: routing.algorithmVersion
+	};
+	return {
+		ok: true,
+		svg,
+		ast,
+		graph,
+		layout,
+		routing,
+		labels: finalized.labels,
+		diagnostics,
+		stats
+	};
+}
+function emptyResult(diagnostics, stats) {
+	return {
+		ok: false,
+		diagnostics,
+		stats
+	};
+}
+//#endregion
+//#region src/animation/player.ts
+function prefersReducedMotion() {
+	if (typeof matchMedia !== "function") return false;
+	return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function buildTimeline(cues) {
+	const timed = [];
+	let t = 0;
+	const appendCue = (cue, at) => {
+		if (cue.op === "dim" || cue.op === "activate") {
+			timed.push({
+				startMs: at,
+				endMs: at,
+				cue
+			});
+			return 0;
+		}
+		if (cue.op === "wait" || cue.op === "pulse" || cue.op === "flow") {
+			const durationMs = Math.max(0, cue.durationMs);
+			timed.push({
+				startMs: at,
+				endMs: at + durationMs,
+				cue
+			});
+			return durationMs;
+		}
+		if (cue.op === "parallel") {
+			let maxDur = 0;
+			for (const child of cue.cues) maxDur = Math.max(maxDur, appendCue(child, at));
+			return maxDur;
+		}
+		return 0;
+	};
+	for (const cue of cues) t += appendCue(cue, t);
+	return {
+		timed,
+		durationMs: t
+	};
+}
+/**
+* Resolve which nodes/edges are dimmed vs active at `timeMs`.
+* `dim *` starts a new focus chapter: prior activate/flow stickiness is cleared.
+*/
+function resolvePlaybackEmphasis(timed, timeMs, allNodeIds, reducedMotion = false) {
+	let dimAll = false;
+	const activeNodes = /* @__PURE__ */ new Set();
+	const activeEdges = /* @__PURE__ */ new Set();
+	const activeEdgeIds = /* @__PURE__ */ new Set();
+	const pulseTargets = [];
+	const flows = [];
+	const markFlowHop = (cue, hopIndex) => {
+		const from = cue.path[hopIndex];
+		const to = cue.path[hopIndex + 1];
+		activeEdges.add(`${from}->${to}`);
+		const id = flowHopEdgeId(hopIndex, cue);
+		if (id) activeEdgeIds.add(id);
+	};
+	for (const item of timed) {
+		if (item.startMs > timeMs) break;
+		const cue = item.cue;
+		if (cue.op === "dim") {
+			for (const t of cue.targets) if (t.type === "all") {
+				dimAll = true;
+				activeNodes.clear();
+				activeEdges.clear();
+				activeEdgeIds.clear();
+				pulseTargets.length = 0;
+				flows.length = 0;
+			}
+		} else if (cue.op === "activate") for (const t of cue.targets) if (t.type === "all") for (const id of allNodeIds) activeNodes.add(id);
+		else if (t.type === "node") activeNodes.add(t.id);
+		else activeEdges.add(`${t.from}->${t.to}`);
+		else if (cue.op === "pulse") {
+			if (timeMs >= item.startMs && timeMs <= item.endMs && !reducedMotion) {
+				pulseTargets.push(...cue.targets);
+				for (const t of cue.targets) {
+					if (t.type === "node") activeNodes.add(t.id);
+					if (t.type === "edge") activeEdges.add(`${t.from}->${t.to}`);
+				}
+			}
+		} else if (cue.op === "flow") {
+			if (timeMs >= item.startMs && timeMs <= item.endMs) {
+				const span = Math.max(1, item.endMs - item.startMs);
+				const flowProgress = reducedMotion ? 1 : (timeMs - item.startMs) / span;
+				flows.push({
+					path: cue.path,
+					progress: flowProgress,
+					edgeId: cue.edgeId,
+					edgeIds: cue.edgeIds
+				});
+				const edgeCount = Math.max(1, cue.path.length - 1);
+				for (let i = 0; i < cue.path.length; i++) {
+					if (flowProgress >= i / edgeCount - .001) activeNodes.add(cue.path[i]);
+					if (cue.path[i + 1] && flowProgress >= i / edgeCount) markFlowHop(cue, i);
+				}
+			} else if (timeMs > item.endMs) {
+				for (const nodeId of cue.path) activeNodes.add(nodeId);
+				for (let i = 0; i < cue.path.length - 1; i++) markFlowHop(cue, i);
+			}
+		}
+	}
+	return {
+		dimAll,
+		activeNodes,
+		activeEdges,
+		activeEdgeIds,
+		pulseTargets,
+		flows
+	};
+}
+/**
+* Interactive SVG animation player bound to a mounted KDiagram diagram.
+*/
+var AnimationPlayer = class {
+	#svg = null;
+	#graph = null;
+	#catalog = [];
+	#current = null;
+	#timed = [];
+	#durationMs = 0;
+	#timeMs = 0;
+	#playing = false;
+	#loop = false;
+	#speed = 1;
+	#raf = null;
+	#lastTick = 0;
+	#listeners = /* @__PURE__ */ new Set();
+	#flowLayer = null;
+	list() {
+		return this.#catalog.map((a) => ({
+			id: a.id,
+			name: a.name,
+			source: a.source
+		}));
+	}
+	getState() {
+		return {
+			id: this.#current?.id ?? null,
+			playing: this.#playing,
+			timeMs: this.#timeMs,
+			durationMs: this.#durationMs,
+			loop: this.#loop,
+			speed: this.#speed
+		};
+	}
+	subscribe(listener) {
+		this.#listeners.add(listener);
+		listener(this.getState());
+		return () => this.#listeners.delete(listener);
+	}
+	/** Rebind after SVG replace. Preserves current animation id and time when possible. */
+	rebind(svg, graph) {
+		const prevId = this.#current?.id ?? null;
+		const prevTime = this.#timeMs;
+		const wasPlaying = this.#playing;
+		const prevLoop = this.#loop;
+		const prevSpeed = this.#speed;
+		this.#teardownVisuals();
+		this.#svg = svg;
+		this.#graph = graph;
+		this.#rebuildCatalog();
+		if (!svg || !graph) {
+			this.#current = null;
+			this.#timed = [];
+			this.#durationMs = 0;
+			this.#timeMs = 0;
+			this.#playing = false;
+			this.#notify();
+			return;
+		}
+		const next = prevId && this.#catalog.find((a) => a.id === prevId) || this.#catalog[0] || null;
+		this.#select(next, false);
+		if (next && prevId === next.id) this.#loop = prevLoop;
+		this.#speed = prevSpeed;
+		if (next) {
+			this.seek(Math.min(prevTime, this.#durationMs));
+			if (wasPlaying) this.play();
+		} else this.#notify();
+	}
+	play(id) {
+		if (id) {
+			const found = this.#catalog.find((a) => a.id === id);
+			if (found) this.#select(found, true);
+		} else if (!this.#current) this.#select(this.#catalog[0] ?? null, true);
+		if (!this.#current || this.#durationMs <= 0) {
+			this.#applyAt(0);
+			this.#notify();
+			return;
+		}
+		if (this.#timeMs >= this.#durationMs) this.#timeMs = 0;
+		this.#playing = true;
+		this.#lastTick = performance.now();
+		this.#armRaf();
+		this.#notify();
+	}
+	pause() {
+		this.#playing = false;
+		this.#cancelRaf();
+		this.#notify();
+	}
+	stop() {
+		this.#playing = false;
+		this.#cancelRaf();
+		this.#timeMs = 0;
+		this.#clearEmphasis();
+		this.#notify();
+	}
+	seek(ms) {
+		this.#timeMs = Math.max(0, Math.min(this.#durationMs, ms));
+		this.#applyAt(this.#timeMs);
+		this.#notify();
+	}
+	step(delta) {
+		if (this.#timed.length === 0) return;
+		const boundaries = [...new Set(this.#timed.flatMap((t) => [t.startMs, t.endMs]))].sort((a, b) => a - b);
+		if (delta > 0) {
+			const next = boundaries.find((b) => b > this.#timeMs + .5);
+			this.seek(next ?? this.#durationMs);
+		} else {
+			const prev = [...boundaries].reverse().find((b) => b < this.#timeMs - .5);
+			this.seek(prev ?? 0);
+		}
+	}
+	setLoop(on) {
+		this.#loop = on;
+		this.#notify();
+	}
+	setSpeed(rate) {
+		if (!Number.isFinite(rate)) return;
+		this.#speed = Math.min(2, Math.max(.5, rate));
+		this.#notify();
+	}
+	destroy() {
+		this.stop();
+		this.#listeners.clear();
+		this.#svg = null;
+		this.#graph = null;
+		this.#catalog = [];
+	}
+	#rebuildCatalog() {
+		if (!this.#graph) {
+			this.#catalog = [];
+			return;
+		}
+		const authored = this.#graph.animations ?? [];
+		const catalog = [];
+		for (const anim of authored) {
+			if (anim.source === "auto") {
+				const inferred = inferAutoAnimation$1(this.#graph);
+				if (!inferred) continue;
+				catalog.push({
+					...inferred,
+					id: anim.id,
+					name: anim.name,
+					loop: anim.loop,
+					source: "auto"
+				});
+				continue;
+			}
+			catalog.push({
+				...anim,
+				cues: bindSequenceFlowEdgeIds(this.#graph, anim.cues)
+			});
+		}
+		this.#catalog = catalog;
+	}
+	#select(anim, resetTime) {
+		this.#current = anim;
+		if (!anim) {
+			this.#timed = [];
+			this.#durationMs = 0;
+			this.#timeMs = 0;
+			this.#loop = false;
+			this.#clearEmphasis();
+			return;
+		}
+		const built = buildTimeline(anim.cues);
+		this.#timed = built.timed;
+		this.#durationMs = built.durationMs;
+		this.#loop = anim.loop;
+		if (resetTime) this.#timeMs = 0;
+		this.#applyAt(this.#timeMs);
+	}
+	#notify() {
+		const state = this.getState();
+		for (const listener of this.#listeners) listener(state);
+	}
+	#armRaf() {
+		this.#cancelRaf();
+		this.#raf = requestAnimationFrame(this.#tick);
+	}
+	#cancelRaf() {
+		if (this.#raf != null) {
+			cancelAnimationFrame(this.#raf);
+			this.#raf = null;
+		}
+	}
+	#tick = (now) => {
+		if (!this.#playing) return;
+		const dt = (now - this.#lastTick) * this.#speed;
+		this.#lastTick = now;
+		this.#timeMs += dt;
+		if (this.#timeMs >= this.#durationMs) if (this.#loop && this.#durationMs > 0) this.#timeMs = this.#timeMs % this.#durationMs;
+		else {
+			this.#timeMs = this.#durationMs;
+			this.#playing = false;
+			this.#applyAt(this.#timeMs);
+			this.#notify();
+			return;
+		}
+		this.#applyAt(this.#timeMs);
+		this.#notify();
+		this.#armRaf();
+	};
+	#teardownVisuals() {
+		this.#cancelRaf();
+		this.#clearEmphasis();
+	}
+	#clearEmphasis() {
+		if (!this.#svg) return;
+		for (const el of this.#svg.querySelectorAll(".flow-anim-dim, .flow-anim-active, .flow-anim-pulse")) el.classList.remove("flow-anim-dim", "flow-anim-active", "flow-anim-pulse");
+		this.#flowLayer?.remove();
+		this.#flowLayer = null;
+	}
+	#applyAt(timeMs) {
+		if (!this.#svg || !this.#graph) return;
+		this.#clearEmphasis();
+		const reduced = prefersReducedMotion();
+		const { dimAll, activeNodes, activeEdges, activeEdgeIds, pulseTargets, flows } = resolvePlaybackEmphasis(this.#timed, timeMs, this.#graph.nodes.map((n) => n.id), reduced);
+		if (dimAll) {
+			for (const el of this.#svg.querySelectorAll("[data-node-id], g.flow-edge[data-edge-id], .flow-sequence-activation, g.flow-sequence-fragment, .flow-sequence-fragment-operand, g.flow-sequence-note, g.flow-sequence-divider")) el.classList.add("flow-anim-dim");
+			for (const el of this.#svg.querySelectorAll("g.flow-edge-label")) el.classList.add("flow-anim-dim");
+		}
+		for (const id of activeNodes) for (const el of this.#nodeEls(id)) {
+			el.classList.remove("flow-anim-dim");
+			el.classList.add("flow-anim-active");
+		}
+		if (this.#graph.sequence) for (const id of activeEdgeIds) this.#emphasizeEdgeId(id);
+		else for (const key of activeEdges) {
+			const [from, to] = key.split("->");
+			if (!from || !to) continue;
+			for (const el of this.#edgeEls(from, to)) {
+				el.classList.remove("flow-anim-dim");
+				el.classList.add("flow-anim-active");
+				const edgeId = el.getAttribute("data-edge-id");
+				if (edgeId) this.#emphasizeEdgeLabels(edgeId);
+			}
+		}
+		this.#applySequenceChrome(dimAll, activeEdgeIds);
+		if (pulseTargets.length) {
+			for (const t of pulseTargets) if (t.type === "node") this.#nodeEls(t.id).forEach((el) => el.classList.add("flow-anim-pulse"));
+			else if (t.type === "edge") this.#edgeEls(t.from, t.to).forEach((el) => el.classList.add("flow-anim-pulse"));
+		}
+		if (flows.length && !reduced) this.#paintFlows(flows);
+	}
+	/**
+	* Sequence chrome: highlight activation bars + fragments covering active message orders.
+	* Orders come only from concrete message edge ids (never bare from→to).
+	*/
+	#applySequenceChrome(dimAll, activeEdgeIds) {
+		if (!this.#svg || !this.#graph?.sequence) return;
+		const focusOrders = /* @__PURE__ */ new Set();
+		for (const id of activeEdgeIds) for (const el of this.#edgeElsById(id)) {
+			const raw = el.getAttribute("data-sequence-order");
+			if (raw == null) continue;
+			const order = Number(raw);
+			if (Number.isFinite(order)) focusOrders.add(order);
+		}
+		if (focusOrders.size === 0 && !dimAll) return;
+		const emphasizeSpan = (el) => {
+			const start = Number(el.getAttribute("data-start-order"));
+			const end = Number(el.getAttribute("data-end-order"));
+			if (!Number.isFinite(start) || !Number.isFinite(end)) return;
+			let live = false;
+			for (const order of focusOrders) if (start <= order && order <= end) {
+				live = true;
+				break;
+			}
+			if (live) {
+				el.classList.remove("flow-anim-dim");
+				el.classList.add("flow-anim-active");
+			} else if (dimAll) {
+				el.classList.add("flow-anim-dim");
+				el.classList.remove("flow-anim-active");
+			}
+		};
+		for (const el of this.#svg.querySelectorAll(".flow-sequence-activation")) emphasizeSpan(el);
+		for (const el of this.#svg.querySelectorAll("g.flow-sequence-fragment")) emphasizeSpan(el);
+		for (const el of this.#svg.querySelectorAll(".flow-sequence-fragment-operand")) emphasizeSpan(el);
+	}
+	#emphasizeEdgeId(edgeId) {
+		for (const el of this.#edgeElsById(edgeId)) {
+			el.classList.remove("flow-anim-dim");
+			el.classList.add("flow-anim-active");
+		}
+		this.#emphasizeEdgeLabels(edgeId);
+	}
+	#emphasizeEdgeLabels(edgeId) {
+		if (!this.#svg) return;
+		for (const label of this.#svg.querySelectorAll(`g.flow-edge-label[data-edge-id="${cssEscape(edgeId)}"]`)) {
+			label.classList.remove("flow-anim-dim");
+			label.classList.add("flow-anim-active");
+		}
+	}
+	#edgeElsById(edgeId) {
+		if (!this.#svg) return [];
+		return [...this.#svg.querySelectorAll(`g.flow-edge[data-edge-id="${cssEscape(edgeId)}"]`)];
+	}
+	#nodeEls(id) {
+		if (!this.#svg) return [];
+		return [...this.#svg.querySelectorAll(`[data-node-id="${cssEscape(id)}"]`)];
+	}
+	#edgeEls(from, to, edgeId) {
+		if (!this.#svg) return [];
+		if (edgeId) {
+			const exact = this.#edgeElsById(edgeId);
+			if (exact.length) return exact;
+		}
+		return [...this.#svg.querySelectorAll(`g.flow-edge[data-edge-from="${cssEscape(from)}"][data-edge-to="${cssEscape(to)}"]`)];
+	}
+	/** Collect routed path `d` values for an edge (main strokes + jumps). */
+	#edgePathDs(from, to, edgeId) {
+		const edge = this.#edgeEls(from, to, edgeId)[0];
+		if (!edge) return [];
+		const ds = [];
+		for (const p of edge.querySelectorAll("path.flow-edge-path, path.flow-edge-jump")) {
+			const d = p.getAttribute("d");
+			if (d) ds.push(d);
+		}
+		return ds;
+	}
+	/** Resolved paint of an edge — keeps yes/no/kind color on the flow bead. */
+	#edgeStroke(from, to, edgeId) {
+		const path = this.#edgeEls(from, to, edgeId)[0]?.querySelector("path.flow-edge-path, path.flow-edge-jump");
+		if (!path) return null;
+		const stroke = getComputedStyle(path).stroke;
+		if (!stroke || stroke === "none") return null;
+		return stroke;
+	}
+	/**
+	* Diagram geometry lives under `.flow-diagram-content` (translated for padding).
+	* Flow overlays must mount there or they sit at a parallel offset from real edges.
+	*/
+	#diagramContent() {
+		return this.#svg?.querySelector("g.flow-diagram-content") ?? this.#svg;
+	}
+	#paintFlows(flows) {
+		if (!this.#svg) return;
+		const mount = this.#diagramContent();
+		const layer = document.createElementNS("http://www.w3.org/2000/svg", "g");
+		layer.setAttribute("class", "flow-anim-flow-layer");
+		layer.style.pointerEvents = "none";
+		let painted = false;
+		for (const flow of flows) {
+			if (flow.path.length < 2) continue;
+			if (this.#paintFlowOnto(layer, mount, flow)) painted = true;
+		}
+		if (!painted) return;
+		mount.appendChild(layer);
+		this.#flowLayer = layer;
+	}
+	/**
+	* Paint one flow bead/trail into `layer`. Probes are attached to `mount` temporarily
+	* for getTotalLength. Returns true when any geometry was drawn.
+	*/
+	#paintFlowOnto(layer, mount, flow) {
+		const { path, progress } = flow;
+		const hops = [];
+		for (let i = 0; i < path.length - 1; i++) {
+			const from = path[i];
+			const to = path[i + 1];
+			const hopId = flowHopEdgeId(i, flow);
+			const ds = this.#edgePathDs(from, to, hopId);
+			const segs = [];
+			for (const d of ds) {
+				const probe = document.createElementNS("http://www.w3.org/2000/svg", "path");
+				probe.setAttribute("d", d);
+				probe.setAttribute("visibility", "hidden");
+				mount.appendChild(probe);
+				segs.push({
+					d,
+					len: probe.getTotalLength?.() ?? 0,
+					probe
+				});
+			}
+			hops.push({
+				stroke: this.#edgeStroke(from, to, hopId),
+				segs
+			});
+		}
+		if (!hops.some((h) => h.segs.length > 0)) {
+			for (const hop of hops) for (const seg of hop.segs) seg.probe.remove();
+			return false;
+		}
+		const p = Math.max(0, Math.min(1, progress));
+		const hopCount = hops.length;
+		const scaled = p * hopCount;
+		const hopIdx = p >= 1 ? hopCount - 1 : Math.min(hopCount - 1, Math.floor(scaled));
+		const localT = p >= 1 ? 1 : scaled - hopIdx;
+		let headPoint = null;
+		let headStroke = null;
+		for (let h = 0; h < hopCount; h++) {
+			const hop = hops[h];
+			const segs = hop.segs;
+			const hopLen = segs.reduce((sum, s) => sum + s.len, 0);
+			const revealInHop = h < hopIdx ? hopLen : h > hopIdx ? 0 : Math.max(0, Math.min(hopLen, localT * hopLen));
+			let walked = 0;
+			for (const seg of segs) {
+				const localReveal = Math.max(0, Math.min(seg.len, revealInHop - walked));
+				if (localReveal > 0 && seg.len > 0) {
+					const track = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					track.setAttribute("class", "flow-anim-flow-track");
+					track.setAttribute("d", seg.d);
+					track.style.strokeDasharray = `${seg.len}`;
+					track.style.strokeDashoffset = `${seg.len - localReveal}`;
+					if (hop.stroke) track.style.stroke = `color-mix(in srgb, ${hop.stroke} 40%, transparent)`;
+					layer.appendChild(track);
+					const overlay = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					overlay.setAttribute("class", "flow-anim-flow-overlay");
+					overlay.setAttribute("d", seg.d);
+					overlay.style.strokeDasharray = `${seg.len}`;
+					overlay.style.strokeDashoffset = `${seg.len - localReveal}`;
+					if (hop.stroke) overlay.style.stroke = hop.stroke;
+					layer.appendChild(overlay);
+					const core = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					core.setAttribute("class", "flow-anim-flow-core");
+					core.setAttribute("d", seg.d);
+					core.style.strokeDasharray = `${seg.len}`;
+					core.style.strokeDashoffset = `${seg.len - localReveal}`;
+					if (hop.stroke) core.style.stroke = `color-mix(in srgb, ${hop.stroke} 35%, white)`;
+					layer.appendChild(core);
+					if (revealInHop >= walked && revealInHop <= walked + seg.len) {
+						headPoint = seg.probe.getPointAtLength(localReveal);
+						headStroke = hop.stroke;
+					} else if (revealInHop > walked + seg.len) {
+						headPoint = seg.probe.getPointAtLength(seg.len);
+						headStroke = hop.stroke;
+					}
+				}
+				walked += seg.len;
+			}
+		}
+		for (const hop of hops) for (const seg of hop.segs) seg.probe.remove();
+		if (headPoint && p > 0 && p < 1) {
+			const head = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+			head.setAttribute("class", "flow-anim-flow-head");
+			head.setAttribute("cx", String(headPoint.x));
+			head.setAttribute("cy", String(headPoint.y));
+			head.setAttribute("r", "5.5");
+			if (headStroke) {
+				head.style.fill = `color-mix(in srgb, ${headStroke} 35%, white)`;
+				head.style.stroke = headStroke;
+			}
+			layer.appendChild(head);
+		}
+		return true;
+	}
+};
+function cssEscape(value) {
+	if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(value);
+	return value.replace(/["\\]/g, "\\$&");
+}
+//#endregion
+//#region src/capabilities.ts
+const KDIAGRAM_CAPABILITIES_VERSION = 1;
+/** Deterministic, JSON-safe description of the active built-in KDiagram surface. */
+function getCapabilities() {
+	return {
+		version: 1,
+		registryScope: "built-in",
+		language: {
+			version: 1,
+			diagramFamilies: [
+				"flow",
+				"state",
+				"sequence"
+			],
+			statementKeywords: [...STATEMENT_KEYWORDS$1].sort(),
+			edgeOperators: [...EDGE_OPS$1]
+		},
+		nodes: Object.entries(BUILTIN_KIND_CATALOG$1).map(([id, kind]) => ({
+			id,
+			category: kind.category,
+			shape: kind.shape,
+			subtitle: kind.subtitle,
+			capabilities: [...kind.capabilities].sort(),
+			...kind.icon ? { defaultIcon: kind.icon } : {}
+		})).sort((left, right) => left.id.localeCompare(right.id)),
+		shapes: [...BUILTIN_SHAPE_IDS$1].sort(),
+		icons: {
+			builtin: listBuiltinIconIds$1().sort(),
+			collections: listDefaultCollections$1().sort()
+		},
+		layout: {
+			algorithm: ELK_LAYOUT_ALGORITHM$1,
+			router: ELK_ROUTER_ALGORITHM$1,
+			directions: [
+				"LR",
+				"RL",
+				"TD",
+				"BT"
+			],
+			densities: [
+				"compact",
+				"normal",
+				"spacious"
+			],
+			groupLayouts: ["compound", "swimlane"],
+			regionArrangements: [
+				"stack",
+				"row",
+				"grid"
+			]
+		},
+		presentation: {
+			themes: ["dark", "light"],
+			exportFormats: ["svg"],
+			themeModes: ["snapshot", "live"]
+		},
+		qualityChecks: [...QUALITY_CHECKS]
+	};
+}
+//#endregion
+//#region src/index.ts
+const KDiagram = {
+	parse(source) {
+		return parseSource(source);
+	},
+	compile(source, _options) {
+		return compileSource(source);
+	},
+	async layout(graph, options) {
+		return layoutFromGraph(graph, options);
+	},
+	route(graph, layout, options) {
+		return routeFromLayout(graph, layout, options);
+	},
+	format(source) {
+		return formatSource$1(source);
+	},
+	async ensureFonts() {
+		const { default: interFontUrl } = await import("@fontsource/inter/files/inter-latin-500-normal.woff?url");
+		await ensureBrowserFonts(interFontUrl);
+		resetDefaultMeasurer();
+	},
+	async renderToSvg(source, options) {
+		return renderPipeline(source, options);
+	},
+	renderToElement(source, container, options) {
+		let currentTheme = options?.theme ?? "dark";
+		let currentOptions = { ...options };
+		let naturalView = {
+			x: 0,
+			y: 0,
+			w: 1,
+			h: 1
+		};
+		let viewport = { ...naturalView };
+		let isPanning = false;
+		let panOrigin = {
+			x: 0,
+			y: 0,
+			w: 0,
+			h: 0
+		};
+		let panPointer = {
+			x: 0,
+			y: 0
+		};
+		let hasPainted = false;
+		let resizeObserver = null;
+		const MIN_ZOOM = .15;
+		const MAX_ZOOM = 4;
+		const wrapper = document.createElement("div");
+		wrapper.className = `kdiagram-viewport kdiagram-theme-${currentTheme}`;
+		wrapper.style.cssText = "width:100%;height:100%;overflow:hidden;position:relative;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;";
+		const applyLiveThemeTokens = () => {
+			for (const [property, value] of Object.entries(getThemeTokens$1(currentTheme))) wrapper.style.setProperty(property, value);
+		};
+		applyLiveThemeTokens();
+		const inner = document.createElement("div");
+		inner.className = "kdiagram-canvas";
+		inner.style.cssText = "width:100%;height:100%;user-select:none;-webkit-user-select:none;";
+		wrapper.appendChild(inner);
+		container.innerHTML = "";
+		container.appendChild(wrapper);
+		const themeCssText = `${THEME_CSS$1}
+.kdiagram-viewport, .kdiagram-viewport svg, .kdiagram-viewport text {
+  user-select: none;
+  -webkit-user-select: none;
+}
+.kdiagram-viewport svg { display:block; width:100%; height:100%; }`;
+		let themeStyle = document.getElementById("kdiagram-theme-css");
+		if (!themeStyle) {
+			themeStyle = document.createElement("style");
+			themeStyle.id = "kdiagram-theme-css";
+			document.head.appendChild(themeStyle);
+		}
+		themeStyle.textContent = themeCssText;
+		let lastSource = source;
+		const animationPlayer = new AnimationPlayer();
+		const parseViewBox = (svg) => {
+			const parts = (svg.getAttribute("viewBox") ?? "0 0 1 1").trim().split(/\s+/).map(Number);
+			return {
+				x: parts[0] ?? 0,
+				y: parts[1] ?? 0,
+				w: parts[2] ?? 1,
+				h: parts[3] ?? 1
+			};
+		};
+		const applyView = () => {
+			const svg = inner.querySelector("svg");
+			if (!svg) return;
+			svg.setAttribute("viewBox", `${viewport.x} ${viewport.y} ${viewport.w} ${viewport.h}`);
+			svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+			svg.style.width = "100%";
+			svg.style.height = "100%";
+			svg.style.display = "block";
+		};
+		const clientToView = (clientX, clientY) => {
+			const rect = wrapper.getBoundingClientRect();
+			const nx = (clientX - rect.left) / rect.width;
+			const ny = (clientY - rect.top) / rect.height;
+			return {
+				x: viewport.x + nx * viewport.w,
+				y: viewport.y + ny * viewport.h
+			};
+		};
+		const zoomAt = (clientX, clientY, factor) => {
+			const pt = clientToView(clientX, clientY);
+			const minW = naturalView.w / MAX_ZOOM;
+			const maxW = naturalView.w / MIN_ZOOM;
+			const nextW = Math.min(maxW, Math.max(minW, viewport.w * factor));
+			const ratio = nextW / viewport.w;
+			const nextH = viewport.h * ratio;
+			viewport = {
+				x: pt.x - (pt.x - viewport.x) * ratio,
+				y: pt.y - (pt.y - viewport.y) * ratio,
+				w: nextW,
+				h: nextH
+			};
+			applyView();
+		};
+		const fitView = () => {
+			const cw = wrapper.clientWidth;
+			const ch = wrapper.clientHeight;
+			if (!cw || !ch) return;
+			const contentW = naturalView.w * 1.12;
+			const contentH = naturalView.h * 1.12;
+			const contentAspect = contentW / contentH;
+			const containerAspect = cw / ch;
+			let w;
+			let h;
+			if (contentAspect > containerAspect) {
+				w = contentW;
+				h = w / containerAspect;
+			} else {
+				h = contentH;
+				w = h * containerAspect;
+			}
+			viewport = {
+				x: naturalView.x + naturalView.w / 2 - w / 2,
+				y: naturalView.y + naturalView.h / 2 - h / 2,
+				w,
+				h
+			};
+			applyView();
+		};
+		const render = async (src, opts) => {
+			lastSource = src;
+			if (opts) currentOptions = {
+				...currentOptions,
+				...opts
+			};
+			const prevRatio = hasPainted && naturalView.w > 0 ? viewport.w / naturalView.w : 1;
+			const centerX = viewport.x + viewport.w / 2;
+			const centerY = viewport.y + viewport.h / 2;
+			const result = await renderPipeline(src, {
+				...currentOptions,
+				theme: currentTheme
+			});
+			inner.innerHTML = result.svg ?? "";
+			const svg = inner.querySelector("svg");
+			animationPlayer.rebind(svg, result.graph ?? null);
+			if (svg) {
+				naturalView = parseViewBox(svg);
+				if (!hasPainted) {
+					hasPainted = true;
+					fitView();
+					if ((!wrapper.clientWidth || !wrapper.clientHeight) && typeof ResizeObserver !== "undefined") {
+						resizeObserver = new ResizeObserver(() => {
+							if (wrapper.clientWidth && wrapper.clientHeight) {
+								fitView();
+								resizeObserver?.disconnect();
+								resizeObserver = null;
+							}
+						});
+						resizeObserver.observe(wrapper);
+					}
+				} else {
+					const w = naturalView.w * prevRatio;
+					const h = naturalView.h * prevRatio;
+					viewport = {
+						x: centerX - w / 2,
+						y: centerY - h / 2,
+						w,
+						h
+					};
+					applyView();
+				}
+			}
+			return result;
+		};
+		const onWheel = (e) => {
+			if (!inner.querySelector("svg")) return;
+			e.preventDefault();
+			const factor = e.deltaY > 0 ? 1.1 : 1 / 1.1;
+			zoomAt(e.clientX, e.clientY, factor);
+		};
+		const onPointerDown = (e) => {
+			if (e.button === 0 || e.button === 1) {
+				e.preventDefault();
+				window.getSelection()?.removeAllRanges();
+				isPanning = true;
+				panOrigin = { ...viewport };
+				panPointer = {
+					x: e.clientX,
+					y: e.clientY
+				};
+				wrapper.style.cursor = "grabbing";
+				wrapper.setPointerCapture(e.pointerId);
+			}
+		};
+		const onPointerMove = (e) => {
+			if (!isPanning) return;
+			e.preventDefault();
+			const dx = (e.clientX - panPointer.x) / wrapper.clientWidth * viewport.w;
+			const dy = (e.clientY - panPointer.y) / wrapper.clientHeight * viewport.h;
+			viewport = {
+				...viewport,
+				x: panOrigin.x - dx,
+				y: panOrigin.y - dy
+			};
+			applyView();
+		};
+		const onPointerUp = (e) => {
+			if (isPanning) {
+				isPanning = false;
+				wrapper.style.cursor = "grab";
+				wrapper.releasePointerCapture(e.pointerId);
+			}
+		};
+		const onSelectStart = (e) => {
+			e.preventDefault();
+		};
+		wrapper.addEventListener("wheel", onWheel, { passive: false });
+		wrapper.addEventListener("pointerdown", onPointerDown);
+		wrapper.addEventListener("pointermove", onPointerMove);
+		wrapper.addEventListener("pointerup", onPointerUp);
+		wrapper.addEventListener("pointercancel", onPointerUp);
+		wrapper.addEventListener("selectstart", onSelectStart);
+		const readyPromise = render(source, options);
+		return {
+			async update(src, opts) {
+				return render(src, opts);
+			},
+			async setTheme(theme) {
+				currentTheme = theme;
+				wrapper.className = `kdiagram-viewport kdiagram-theme-${theme}`;
+				applyLiveThemeTokens();
+				return render(lastSource);
+			},
+			ready() {
+				return readyPromise;
+			},
+			fit() {
+				fitView();
+			},
+			zoomIn() {
+				const rect = wrapper.getBoundingClientRect();
+				zoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2, 1 / 1.2);
+			},
+			zoomOut() {
+				const rect = wrapper.getBoundingClientRect();
+				zoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2, 1.2);
+			},
+			resetView() {
+				fitView();
+			},
+			animations: animationPlayer,
+			destroy() {
+				animationPlayer.destroy();
+				resizeObserver?.disconnect();
+				resizeObserver = null;
+				wrapper.removeEventListener("wheel", onWheel);
+				wrapper.removeEventListener("pointerdown", onPointerDown);
+				wrapper.removeEventListener("pointermove", onPointerMove);
+				wrapper.removeEventListener("pointerup", onPointerUp);
+				wrapper.removeEventListener("pointercancel", onPointerUp);
+				wrapper.removeEventListener("selectstart", onSelectStart);
+				wrapper.remove();
+			}
+		};
+	}
+};
+//#endregion
+export { AnimationPlayer, BUILTIN_ICON_ALIASES, BUILTIN_KIND_CATALOG, BUILTIN_KIND_LIST, BUILTIN_SHAPE_IDS, DEFAULT_TARGET_ASPECT_RATIO, EDGE_OPS, ELK_LAYOUT_ALGORITHM, ELK_ROUTER_ALGORITHM, KDIAGRAM_CAPABILITIES_VERSION, KDiagram, QUALITY_CHECKS, STATEMENT_KEYWORDS, THEME_CSS, analyzeDiagramQuality, analyzeDiagramTopology, animationIdFromName, applyCrossingTreatment, attachPointOnPerimeter, buildNodeBoundsModel, collectIconIds, compile, compileSource, displayLabelCase, edgeOpsPattern, enumerateAutoPaths, finalizeElkEdges, finalizeRoutedGraph, formatLabelText, formatSource, getCapabilities, getKindDefaults, getNodeTypeDefinition, getThemeTokens, inferAutoAnimation, isBuiltinKind, isGeometryKind, isKnownShapeId, kindHasCapability, kindSubtitle, layoutAndRouteWithElk, layoutFromGraph, layoutMeasuredGraph, listBuiltinIconIds, listDefaultCollections, listGeometryKinds, listKindsByCategory, listRegisteredNodeTypeIds, listRegisteredShapeIds, measureFromGraph, measureGraph, mergeOptions, mergePresentationOptions, normalizeIconId, normalizeShapeId, parse, parseIconId, parseSource, planAutoWalk, preloadCollections, preloadIcons, registerCollection, registerCollectionLoader, registerIcon, registerNodeType, registerShape, registerTheme, renderIconById, renderPipeline, renderSvg, resolveIcon, resolveNodeTypeGeometry, resolvePresentation, resolveShapeGeometry, routeFromLayout, routeLaidOutGraph, setIconifyApiBaseUrl, themeToCss, traceDeclarationPath };
+
+//# sourceMappingURL=index.mjs.map