flowsvg 0.1.0 → 0.2.0

package/dist/core.js

@@ -1,1149 +0,0 @@
-/**
- * Platform-independent core: validate and compile documents, then derive geometry, hit tests and static SVG.
- * The browser consumes these results; this module does not read the DOM, network, system theme or browser clock.
- */
-import { layoutNodeContent, supportsNodeContent, validateNodeContent } from "./node-content.js";
-import { paintContentHighlight } from "./node-content-paint.js";
-import { CompiledTimeline, mixColor } from "./timeline.js";
-import { resolveThemePalette } from "./theme.js";
-/** Compilation error for invalid documents; issues contains all field problems found by validation. */
-export class DiagramValidationError extends Error {
-    issues;
-    constructor(issues) {
-        super(`Invalid diagram document (${issues.length} issue${issues.length === 1 ? "" : "s"})`);
-        this.name = "DiagramValidationError";
-        this.issues = issues;
-    }
-}
-/**
- * Validate document structure, values and references; an empty list means validation passed.
- * Accumulate issues across inspectable branches without mutating input or producing a partial Diagram.
- */
-export function validateDocument(input) {
-    const issues = [];
-    if (!isRecord(input)) {
-        return [{ path: "$", message: "document must be an object" }];
-    }
-    validateUnknownFields(input, ["version", "title", "viewport", "theme", "nodes", "edges", "scenes"], "$", issues);
-    if (input.version !== 1)
-        issues.push({ path: "version", message: "must be 1" });
-    if (input.title !== undefined && typeof input.title !== "string")
-        issues.push({ path: "title", message: "must be a string" });
-    if (input.theme !== undefined && input.theme !== "light" && input.theme !== "dark")
-        issues.push({ path: "theme", message: "must be light or dark" });
-    const viewport = input.viewport;
-    if (!isRecord(viewport)) {
-        issues.push({ path: "viewport", message: "must be an object" });
-    }
-    else {
-        validateUnknownFields(viewport, ["width", "height"], "viewport", issues);
-        validatePositiveFinite(viewport.width, "viewport.width", issues);
-        validatePositiveFinite(viewport.height, "viewport.height", issues);
-    }
-    if (!Array.isArray(input.nodes))
-        issues.push({ path: "nodes", message: "must be an array" });
-    if (!Array.isArray(input.edges))
-        issues.push({ path: "edges", message: "must be an array" });
-    if (!Array.isArray(input.scenes))
-        issues.push({ path: "scenes", message: "must be an array" });
-    const nodes = Array.isArray(input.nodes) ? input.nodes : [];
-    const edges = Array.isArray(input.edges) ? input.edges : [];
-    const scenes = Array.isArray(input.scenes) ? input.scenes : [];
-    validateDenseArray(nodes, "nodes", issues);
-    validateDenseArray(edges, "edges", issues);
-    validateDenseArray(scenes, "scenes", issues);
-    const ids = new Set();
-    nodes.forEach((node, index) => {
-        const path = `nodes[${index}]`;
-        if (!isRecord(node)) {
-            issues.push({ path, message: "must be an object" });
-            return;
-        }
-        validateUnknownFields(node, ["id", "kind", "x", "y", "width", "height", "label", "content", "parentId", "visible", "style"], path, issues);
-        if (!isNonEmptyString(node.id))
-            issues.push({ path: `${path}.id`, message: "must be a non-empty string" });
-        else if (ids.has(node.id))
-            issues.push({ path: `${path}.id`, message: `duplicate id \"${node.id}\"` });
-        else
-            ids.add(node.id);
-        if (!isNodeKind(node.kind))
-            issues.push({ path: `${path}.kind`, message: "must be a supported node kind" });
-        validateFinite(node.x, `${path}.x`, issues);
-        validateFinite(node.y, `${path}.y`, issues);
-        validatePositiveFinite(node.width, `${path}.width`, issues);
-        validatePositiveFinite(node.height, `${path}.height`, issues);
-        if (node.label !== undefined && typeof node.label !== "string")
-            issues.push({ path: `${path}.label`, message: "must be a string" });
-        if (node.content !== undefined) {
-            validateNodeContent(node.content, `${path}.content`, issues);
-            if (node.label !== undefined)
-                issues.push({ path: `${path}.content`, message: "must not be declared together with label" });
-            if (!supportsNodeContent(node.kind))
-                issues.push({ path: `${path}.content`, message: "requires a rect, roundedRect or cylinder node" });
-        }
-        if (node.parentId !== undefined && !isNonEmptyString(node.parentId))
-            issues.push({ path: `${path}.parentId`, message: "must be a non-empty string" });
-        if (node.visible !== undefined && typeof node.visible !== "boolean")
-            issues.push({ path: `${path}.visible`, message: "must be a boolean" });
-        validateNodeStyle(node.style, `${path}.style`, issues);
-    });
-    const nodeById = new Map();
-    nodes.forEach((node) => {
-        if (isRecord(node) && isNonEmptyString(node.id))
-            nodeById.set(node.id, node);
-    });
-    nodes.forEach((node, index) => {
-        if (isRecord(node) && node.parentId !== undefined && isNonEmptyString(node.parentId)) {
-            const parent = nodeById.get(node.parentId);
-            if (!parent)
-                issues.push({ path: `nodes[${index}].parentId`, message: "must reference an existing node" });
-            else if (parent.kind !== "group")
-                issues.push({ path: `nodes[${index}].parentId`, message: "must reference a group node" });
-        }
-    });
-    validateParentCycles(nodes, nodeById, issues);
-    const edgeById = new Map();
-    edges.forEach((edge, index) => {
-        const path = `edges[${index}]`;
-        if (!isRecord(edge)) {
-            issues.push({ path, message: "must be an object" });
-            return;
-        }
-        validateUnknownFields(edge, ["id", "from", "to", "label", "route", "fromPort", "toPort", "visible", "style"], path, issues);
-        if (!isNonEmptyString(edge.id))
-            issues.push({ path: `${path}.id`, message: "must be a non-empty string" });
-        else if (ids.has(edge.id))
-            issues.push({ path: `${path}.id`, message: `duplicate id \"${edge.id}\"` });
-        else {
-            ids.add(edge.id);
-            edgeById.set(edge.id, edge);
-        }
-        validateEdgeEndpoint(edge.from, `${path}.from`, nodeById, issues);
-        validateEdgeEndpoint(edge.to, `${path}.to`, nodeById, issues);
-        if (edge.label !== undefined && typeof edge.label !== "string")
-            issues.push({ path: `${path}.label`, message: "must be a string" });
-        if (edge.route !== undefined && edge.route !== "straight" && edge.route !== "orthogonal" && edge.route !== "curved")
-            issues.push({ path: `${path}.route`, message: "must be straight, orthogonal or curved" });
-        if (edge.fromPort !== undefined && !isPortDirection(edge.fromPort))
-            issues.push({ path: `${path}.fromPort`, message: "must be top, right, bottom or left" });
-        if (edge.toPort !== undefined && !isPortDirection(edge.toPort))
-            issues.push({ path: `${path}.toPort`, message: "must be top, right, bottom or left" });
-        if (edge.visible !== undefined && typeof edge.visible !== "boolean")
-            issues.push({ path: `${path}.visible`, message: "must be a boolean" });
-        validateEdgeStyle(edge.style, `${path}.style`, issues);
-    });
-    const allIds = new Set([...nodeById.keys(), ...edgeById.keys()]);
-    const sceneIds = new Set();
-    scenes.forEach((scene, sceneIndex) => {
-        const path = `scenes[${sceneIndex}]`;
-        if (!isRecord(scene)) {
-            issues.push({ path, message: "must be an object" });
-            return;
-        }
-        validateUnknownFields(scene, ["id", "label", "beats"], path, issues);
-        if (!isNonEmptyString(scene.id))
-            issues.push({ path: `${path}.id`, message: "must be a non-empty string" });
-        else if (sceneIds.has(scene.id))
-            issues.push({ path: `${path}.id`, message: `duplicate id \"${scene.id}\"` });
-        else
-            sceneIds.add(scene.id);
-        if (!isNonEmptyString(scene.label))
-            issues.push({ path: `${path}.label`, message: "must be a non-empty string" });
-        if (!Array.isArray(scene.beats))
-            issues.push({ path: `${path}.beats`, message: "must be an array" });
-        else {
-            validateDenseArray(scene.beats, `${path}.beats`, issues);
-            if (scene.beats.length === 0)
-                issues.push({ path: `${path}.beats`, message: "must contain at least one beat" });
-            scene.beats.forEach((beat, beatIndex) => validateBeat(beat, `${path}.beats[${beatIndex}]`, allIds, nodeById, edgeById, issues));
-        }
-    });
-    return issues;
-}
-/**
- * Validate and copy a document, then compile its timeline; later input mutations cannot affect evaluation.
- * @throws {DiagramValidationError} If document structure, values or references are invalid.
- */
-export function createDiagram(input) {
-    const issues = validateDocument(input);
-    if (issues.length > 0)
-        throw new DiagramValidationError(issues);
-    return new CompiledDiagram(cloneDocument(input));
-}
-/** One-shot static SVG export; use createDiagram to reuse compilation across repeated evaluations or exports. */
-export function renderSvg(document, timeMs = 0, options) {
-    return createDiagram(document).renderSvg(timeMs, options);
-}
-/**
- * Own the frozen document and compiled timeline; derive visual values, absolute geometry/text, routes, then camera.
- * The ancestor index retains hierarchy; geometry is derived from current values on every frame to support group movement.
- * See docs/adr/0001-platform-independent-core.md for the platform boundary.
- */
-class CompiledDiagram {
-    totalDuration;
-    timeline;
-    document;
-    nodesById;
-    constructor(document) {
-        this.document = deepFreeze(document);
-        this.timeline = new CompiledTimeline(document);
-        this.totalDuration = this.timeline.totalDuration;
-        this.nodesById = new Map(document.nodes.map((node) => [node.id, node]));
-    }
-    evaluateAt(timeMs, options = {}) {
-        return this.evaluateFrame(timeMs, options).frame;
-    }
-    evaluateFrame(timeMs, options = {}) {
-        const palette = resolvePalette(this.document, options);
-        const timeline = this.timeline.evaluateAt(timeMs, options, palette);
-        const currentNodes = new Map(this.document.nodes.map((node) => {
-            const values = timeline.objects.get(node.id).values;
-            return [node.id, { ...node, x: values.x ?? node.x, y: values.y ?? node.y, width: values.width ?? node.width, height: values.height ?? node.height, label: values.label, content: values.content ?? undefined }];
-        }));
-        const warnings = [];
-        const nodes = [...currentNodes.values()].map((node, index) => {
-            const position = this.resolvePosition(node.id, currentNodes);
-            const labelLines = node.label ? wrapText(node.label, Math.max(1, node.width - TEXT_PADDING * 2), NODE_TYPOGRAPHY) : [];
-            const labelCenterY = node.kind === "group" ? position.y + 24 : position.y + node.height / 2;
-            const labelBoxes = makeLabelBoxes(labelLines, position.x + node.width / 2, labelCenterY, NODE_TYPOGRAPHY);
-            if (node.label && labelLines.length * NODE_TYPOGRAPHY.lineHeight > Math.max(0, node.height - TEXT_PADDING * 2))
-                warnings.push({ path: `nodes[${index}].label`, objectId: node.id, code: "text-overflow", message: `label for node \"${node.id}\" exceeds its height` });
-            const visual = this.resolveVisibility(node.id, timeline.objects);
-            const own = timeline.objects.get(node.id);
-            const flowHighlighted = timeline.flows.some((flow) => {
-                const edge = this.document.edges.find((candidate) => candidate.id === flow.target);
-                return edge?.from === node.id || edge?.to === node.id;
-            });
-            const style = {
-                strokeWidth: 2,
-                textColor: palette.text,
-                ...node.style,
-                fill: mixColor(own.values.fill ?? palette.fill, palette.highlight, Math.max(own.highlight, Number(flowHighlighted))),
-                stroke: mixColor(own.values.stroke ?? palette.stroke, palette.highlight, Math.max(own.highlight, Number(flowHighlighted)))
-            };
-            const contentLayout = node.content ? paintContentHighlight(layoutNodeContent(node.content, { ...position, width: node.width, height: node.height }, palette, node.kind), Math.max(own.highlight, Number(flowHighlighted)), style.fill) : undefined;
-            if (contentLayout) {
-                for (const direction of ["width", "height"]) {
-                    if (contentLayout[direction === "width" ? "widthOverflow" : "heightOverflow"])
-                        warnings.push({ path: `nodes[${index}].content`, objectId: node.id, code: "text-overflow", message: `content for node "${node.id}" exceeds its ${direction}` });
-                }
-            }
-            return { ...node, contentLayout, ...visual, highlighted: own.highlighted || flowHighlighted, style, x: position.x, y: position.y, labelLines, labelBoxes };
-        });
-        const nodeById = new Map(nodes.map((node) => [node.id, node]));
-        const edgeGeometries = new Map();
-        const edges = this.document.edges.map((original) => {
-            const own = timeline.objects.get(original.id);
-            const activeFlow = timeline.flows.find((flow) => flow.target === original.id);
-            const edge = { ...original, label: own.values.label };
-            const from = nodeById.get(edge.from);
-            const to = nodeById.get(edge.to);
-            const visible = own.visible && Boolean(from?.visible && to?.visible);
-            // Take the minimum so simultaneous endpoint fades do not darken an edge again through multiplication.
-            const opacity = Math.min(own.opacity, from?.opacity ?? 0, to?.opacity ?? 0);
-            const style = {
-                ...edge.style,
-                strokeWidth: own.values.strokeWidth ?? edge.style?.strokeWidth ?? 2,
-                dashed: edge.style?.dashed ?? false,
-                stroke: mixColor(own.values.stroke ?? palette.edge, palette.highlight, Math.max(own.highlight, Number(activeFlow !== undefined)))
-            };
-            const hasReverseCurve = edge.route === "curved" && this.document.edges.some((candidate) => candidate.id !== edge.id && candidate.route === "curved" && candidate.from === edge.to && candidate.to === edge.from);
-            // Both directions use the same lane magnitude; the perpendicular vector reverses with the edge,
-            // so the rendered relationships occupy opposite sides of their shared center line.
-            const reverseOffset = hasReverseCurve ? 1 : 0;
-            const geometry = from && to ? routeEdge(edge, from, to, nodes, reverseOffset) : emptyPathGeometry();
-            edgeGeometries.set(edge.id, geometry);
-            const labelLines = edge.label ? wrapText(edge.label, Math.max(1, geometry.length - TEXT_PADDING * 2), EDGE_TYPOGRAPHY) : [];
-            const midpoint = pathLabelAnchor(geometry);
-            const flow = activeFlow && visible && opacity > 0 && !options.reducedMotion ? {
-                direction: activeFlow.direction,
-                progress: timeline.beatProgress,
-                point: geometry.pointAt(activeFlow.direction === "forward" ? timeline.beatProgress : 1 - timeline.beatProgress),
-                ...(activeFlow.text !== undefined ? { text: activeFlow.text } : {})
-            } : undefined;
-            return { ...edge, visible, opacity, highlighted: own.highlighted || activeFlow !== undefined, style, path: geometry.path, labelLines, labelBoxes: makeLabelBoxes(labelLines, midpoint.x, midpoint.y, EDGE_TYPOGRAPHY), ...(flow ? { flow } : {}) };
-        });
-        const camera = resolveCamera(this.document.viewport, timeline.focusBefore, timeline.focusAfter, timeline.transitionProgress, nodes, edges, edgeGeometries);
-        return {
-            frame: { timeMs: timeline.timeMs, sceneId: timeline.sceneId, beatId: timeline.beatId, beatProgress: timeline.beatProgress, nodes, edges, camera, warnings, ...(timeline.caption !== undefined ? { caption: timeline.caption } : {}) },
-            edgeGeometries
-        };
-    }
-    renderSvg(timeMs = 0, options = {}) {
-        const frame = this.evaluateAt(timeMs, options);
-        const palette = resolvePalette(this.document, options);
-        return serializeSvg(this.document, frame, palette);
-    }
-    hitTest(timeMs, point, options = {}) {
-        if (!Number.isFinite(point.x) || !Number.isFinite(point.y))
-            return null;
-        const evaluated = this.evaluateFrame(timeMs, options);
-        const frame = evaluated.frame;
-        const nodes = [...frame.nodes].reverse();
-        const containsPoint = (candidate) => candidate.visible && candidate.opacity > 0 && isPointInNode(point, candidate);
-        const node = nodes.find((candidate) => candidate.kind !== "group" && containsPoint(candidate));
-        if (node)
-            return { id: node.id, type: "node" };
-        const edge = [...frame.edges].reverse().find((candidate) => candidate.visible && candidate.opacity > 0 && isPointNearPath(point, evaluated.edgeGeometries.get(candidate.id) ?? emptyPathGeometry(), (candidate.style?.strokeWidth ?? 2) + HIT_TOLERANCE));
-        if (edge)
-            return { id: edge.id, type: "edge" };
-        const group = nodes.find((candidate) => candidate.kind === "group" && containsPoint(candidate));
-        return group ? { id: group.id, type: "node" } : null;
-    }
-    resolvePosition(id, nodes) {
-        const node = nodes.get(id);
-        if (!node)
-            return { x: 0, y: 0 };
-        const parent = node.parentId ? this.resolvePosition(node.parentId, nodes) : { x: 0, y: 0 };
-        return { x: node.x + parent.x, y: node.y + parent.y };
-    }
-    /** Intersect ancestor visibility and take minimum opacity without altering a child's stored state. */
-    resolveVisibility(id, states) {
-        const node = this.nodesById.get(id);
-        const own = states.get(id);
-        if (!node?.parentId)
-            return { visible: own.visible, opacity: own.opacity };
-        const parent = this.resolveVisibility(node.parentId, states);
-        return { visible: own.visible && parent.visible, opacity: Math.min(own.opacity, parent.opacity) };
-    }
-}
-const TEXT_PADDING = 12;
-const CONTENT_TAG_CORNER_RADIUS = 3;
-const NODE_TYPOGRAPHY = { fontSize: 16, lineHeight: 20, charWidth: 8.5 };
-const EDGE_TYPOGRAPHY = { fontSize: 14, lineHeight: 18, charWidth: 8.4 };
-const TEXT_DESCENT_RATIO = 0.25;
-const FLOW_TYPOGRAPHY = { fontSize: 12, lineHeight: 16, charWidth: 7.2 };
-const FLOW_CAPSULE_HEIGHT = 24;
-const FLOW_TEXT_PADDING = 10;
-const FLOW_DOT_RADIUS = 5;
-/**
- * Estimate wrapping with fixed code-point widths, preserving explicit empty lines and preferring spaces as breaks.
- * No font/DOM measurement is used; this handles width only, while frame evaluation reports height overflow.
- */
-export function wrapText(label, maxWidth, typography = NODE_TYPOGRAPHY) {
-    const maxChars = Math.max(1, Math.floor(maxWidth / typography.charWidth));
-    const lines = [];
-    for (const explicitLine of label.split("\n")) {
-        if (explicitLine.length === 0) {
-            lines.push("");
-            continue;
-        }
-        // Code-point slicing keeps surrogate pairs intact even when only one character fits.
-        let remaining = Array.from(explicitLine);
-        while (remaining.length > maxChars) {
-            const candidate = remaining.slice(0, maxChars + 1);
-            const breakAt = candidate.lastIndexOf(" ");
-            const cut = breakAt > 0 ? breakAt : maxChars;
-            lines.push(remaining.slice(0, cut).join(""));
-            remaining = Array.from(remaining.slice(cut).join("").replace(/^\s+/, ""));
-        }
-        lines.push(remaining.join(""));
-    }
-    return lines;
-}
-function makeLabelBoxes(lines, centerX, centerY, typography) {
-    const startY = centerY - ((lines.length - 1) * typography.lineHeight) / 2 + typography.fontSize * 0.35;
-    return lines.map((text, index) => ({ text, x: centerX, y: startY + index * typography.lineHeight }));
-}
-/** Serialize group backgrounds, edges, ordinary nodes, then labels; write the evaluated camera directly to viewBox. */
-function serializeSvg(document, frame, palette) {
-    const title = escapeText(document.title ?? "Diagram");
-    const edgeShapes = frame.edges.filter((edge) => edge.opacity > 0).map((edge) => {
-        const stroke = edge.style?.stroke ?? palette.edge;
-        const width = edge.style?.strokeWidth ?? 2;
-        const dash = edge.style?.dashed ? ' stroke-dasharray="6 4"' : "";
-        return `<path d="${escapeAttribute(edge.path)}" fill="none" stroke="${escapeAttribute(stroke)}" color="${escapeAttribute(stroke)}" stroke-width="${width}"${dash} marker-end="url(#diagram-arrow)" data-id="${escapeAttribute(edge.id)}" opacity="${edge.opacity}"/>`;
-    }).join("");
-    const groupShapes = frame.nodes.filter((node) => node.opacity > 0 && node.kind === "group").map((node) => serializeNodeShape(node, palette)).join("");
-    const nodeShapes = frame.nodes.filter((node) => node.opacity > 0 && node.kind !== "group").map((node) => serializeNodeShape(node, palette)).join("");
-    const labels = frame.edges.filter((edge) => edge.opacity > 0).map((edge) => serializeLabel(edge.labelLines, edge.labelBoxes, edge.style?.stroke ?? palette.text, EDGE_TYPOGRAPHY, edge.opacity, palette.background)).join("") + frame.nodes.filter((node) => node.opacity > 0).map((node) => serializeLabel(node.labelLines, node.labelBoxes, node.style?.textColor ?? palette.text, NODE_TYPOGRAPHY, node.opacity, palette.background)).join("");
-    const contents = frame.nodes.filter((node) => node.opacity > 0 && node.contentLayout).map((node, index) => serializeNodeContent(node, index)).join("");
-    const flows = frame.edges.filter((edge) => edge.opacity > 0 && edge.flow).map((edge) => serializeFlowMarker(edge.flow, edge.id, palette.highlight, edge.opacity)).join("");
-    const marker = `<defs><marker id="diagram-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/></marker></defs>`;
-    const ariaLabel = escapeAttribute(document.title ?? "Diagram");
-    const camera = `${formatNumber(frame.camera.x)} ${formatNumber(frame.camera.y)} ${formatNumber(frame.camera.width)} ${formatNumber(frame.camera.height)}`;
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${camera}" role="img" aria-label="${ariaLabel}" font-family="sans-serif"><title>${title}</title>${marker}<rect x="${formatNumber(frame.camera.x)}" y="${formatNumber(frame.camera.y)}" width="${formatNumber(frame.camera.width)}" height="${formatNumber(frame.camera.height)}" fill="${palette.background}"/>${groupShapes}${edgeShapes}${nodeShapes}${labels}${contents}${flows}</svg>`;
-}
-/** Serialize evaluated text and tag backgrounds inside one clip; authored content cannot introduce SVG markup or CSS. */
-function serializeNodeContent(node, index) {
-    const layout = node.contentLayout;
-    const safe = layout.safeArea;
-    // Include exact clip geometry so independent SVGs with different node dimensions do not share a clip definition.
-    const geometryKey = [safe.x, safe.y, safe.width, safe.height].map((value) => String(value).replaceAll("-", "n").replaceAll(".", "p").replaceAll("+", "a")).join("-");
-    const clipId = `diagram-content-clip-${index}-${geometryKey}`;
-    const clip = `<defs><clipPath id="${clipId}" clipPathUnits="userSpaceOnUse"><rect x="${formatNumber(safe.x)}" y="${formatNumber(safe.y)}" width="${formatNumber(safe.width)}" height="${formatNumber(safe.height)}"/></clipPath></defs>`;
-    const tags = layout.tags.map((tag) => `<rect x="${formatNumber(tag.x)}" y="${formatNumber(tag.y)}" width="${formatNumber(tag.width)}" height="${formatNumber(tag.height)}" rx="${CONTENT_TAG_CORNER_RADIUS}" fill="${escapeAttribute(tag.fill)}"/>`).join("");
-    const lines = layout.lines.map((line) => `<text x="${formatNumber(line.x)}" y="${formatNumber(line.y)}" fill="${escapeAttribute(line.color)}" font-size="${line.fontSize}" font-weight="${line.fontWeight}" text-anchor="${line.align === "left" ? "start" : line.align === "right" ? "end" : "middle"}">${line.spans.map((span) => `<tspan x="${formatNumber(span.x)}" y="${formatNumber(span.y)}" fill="${escapeAttribute(span.color)}" font-size="${span.fontSize}" font-weight="${span.fontWeight}" text-anchor="start">${escapeText(span.text)}</tspan>`).join("")}</text>`).join("");
-    const graphs = (layout.graphs ?? []).map((graph) => `<g data-content-graph="${graph.blockIndex}" aria-hidden="true">${graph.edges.map((edge) => `<line x1="${formatNumber(edge.x1)}" y1="${formatNumber(edge.y1)}" x2="${formatNumber(edge.x2)}" y2="${formatNumber(edge.y2)}" stroke="${edge.color}"/>`).join("")}${graph.nodes.map((point) => `<circle cx="${formatNumber(point.x)}" cy="${formatNumber(point.y)}" r="${point.radius}" fill="${point.fill}"/>`).join("")}</g>`).join("");
-    return `${clip}<g id="diagram-content-${index}" data-content-id="${escapeAttribute(node.id)}" clip-path="url(#${clipId})" opacity="${node.opacity}">${tags}${graphs}${lines}</g>`;
-}
-/** Keep markers decorative and horizontal; coordinates come only from the evaluated path point. */
-function serializeFlowMarker(flow, edgeId, color, opacity) {
-    const attributes = `fill="${escapeAttribute(color)}" data-flow-id="${escapeAttribute(edgeId)}" opacity="${opacity}" pointer-events="none" aria-hidden="true"`;
-    if (flow.text === undefined)
-        return `<circle cx="${formatNumber(flow.point.x)}" cy="${formatNumber(flow.point.y)}" r="${FLOW_DOT_RADIUS}" ${attributes}/>`;
-    const width = Math.max(FLOW_CAPSULE_HEIGHT, estimateTextWidth(flow.text, FLOW_TYPOGRAPHY) + FLOW_TEXT_PADDING * 2);
-    const x = formatNumber(flow.point.x - width / 2);
-    const y = formatNumber(flow.point.y - FLOW_CAPSULE_HEIGHT / 2);
-    // A dark ink color preserves contrast against both themes' amber highlight fills.
-    const text = `<text x="${formatNumber(flow.point.x)}" y="${formatNumber(flow.point.y + FLOW_TYPOGRAPHY.fontSize * 0.35)}" fill="${resolveThemePalette("light").text}" font-size="${FLOW_TYPOGRAPHY.fontSize}" text-anchor="middle">${escapeText(flow.text)}</text>`;
-    return `<g ${attributes}><rect x="${x}" y="${y}" width="${formatNumber(width)}" height="${FLOW_CAPSULE_HEIGHT}" rx="${FLOW_CAPSULE_HEIGHT / 2}"/>${text}</g>`;
-}
-/** Reuse fixed code-point metrics without DOM measurements; reserve a full em for wide letters and Unicode. */
-function estimateTextWidth(text, typography) {
-    return Array.from(text).reduce((width, character) => {
-        const wide = character.codePointAt(0) > 0xff || "MWmw@%".includes(character);
-        return width + (wide ? typography.fontSize : typography.charWidth);
-    }, 0);
-}
-/** Serialize supported shapes with escaped color/identity attributes; labels are drawn in a separate text layer. */
-function serializeNodeShape(node, palette) {
-    const fill = node.style?.fill ?? palette.fill;
-    const stroke = node.style?.stroke ?? palette.stroke;
-    const width = node.style?.strokeWidth ?? 2;
-    const dash = node.kind === "group" && node.style?.dashed ? ' stroke-dasharray="10 7"' : "";
-    const attrs = `fill="${escapeAttribute(fill)}" stroke="${escapeAttribute(stroke)}" stroke-width="${width}"${dash} data-id="${escapeAttribute(node.id)}" opacity="${node.opacity}"`;
-    if (node.kind === "ellipse")
-        return `<ellipse cx="${formatNumber(node.x + node.width / 2)}" cy="${formatNumber(node.y + node.height / 2)}" rx="${formatNumber(node.width / 2)}" ry="${formatNumber(node.height / 2)}" ${attrs}/>`;
-    if (node.kind === "cylinder") {
-        const ry = Math.min(14, node.height / 4);
-        const bottom = node.y + node.height - ry;
-        const bodyPath = `M ${formatNumber(node.x)} ${formatNumber(node.y + ry)} L ${formatNumber(node.x + node.width)} ${formatNumber(node.y + ry)} L ${formatNumber(node.x + node.width)} ${formatNumber(bottom)} A ${formatNumber(node.width / 2)} ${formatNumber(ry)} 0 0 1 ${formatNumber(node.x)} ${formatNumber(bottom)} Z`;
-        // Keep the cap as a filled sibling so the SVG fill rule cannot turn its interior into a hole.
-        // The group owns the only data-id, allowing hover and DOM synchronization to treat the cylinder as one node.
-        const cap = `<ellipse cx="${formatNumber(node.x + node.width / 2)}" cy="${formatNumber(node.y + ry)}" rx="${formatNumber(node.width / 2)}" ry="${formatNumber(ry)}"/>`;
-        return `<g ${attrs}><path d="${bodyPath}"/>${cap}</g>`;
-    }
-    const radius = node.kind === "roundedRect" ? ` rx="${Math.min(12, node.width / 4, node.height / 4)}"` : "";
-    return `<rect x="${formatNumber(node.x)}" y="${formatNumber(node.y)}" width="${formatNumber(node.width)}" height="${formatNumber(node.height)}"${radius} ${attrs}/>`;
-}
-function serializeLabel(lines, boxes, color, typography, opacity = 1, background = "#ffffff") {
-    if (lines.length === 0)
-        return "";
-    const x = boxes[0]?.x ?? 0;
-    const body = lines.map((line, index) => `<tspan x="${formatNumber(x)}" y="${formatNumber(boxes[index]?.y ?? 0)}">${escapeText(line)}</tspan>`).join("");
-    return `<text fill="${escapeAttribute(color)}" stroke="${escapeAttribute(background)}" stroke-width="6" stroke-linejoin="round" paint-order="stroke" font-size="${typography.fontSize}" text-anchor="middle" opacity="${opacity}">${body}</text>`;
-}
-function straightPoints(from, to) {
-    const fromCenter = { x: from.x + from.width / 2, y: from.y + from.height / 2 };
-    const toCenter = { x: to.x + to.width / 2, y: to.y + to.height / 2 };
-    const start = boundaryPoint(from, toCenter);
-    const end = boundaryPoint(to, fromCenter);
-    return [start, end];
-}
-const ROUTING_GAP = 8;
-const FOCUS_PADDING = 24;
-const HIT_TOLERANCE = 6;
-function emptyPathGeometry() {
-    return createPathGeometry([]);
-}
-function createPathGeometry(points, serializedPath) {
-    const compact = simplifyPoints(points);
-    const path = serializedPath ?? pointsToPath(compact);
-    const segments = compact.slice(1).map((end, index) => ({ start: compact[index], end, length: Math.hypot(end.x - compact[index].x, end.y - compact[index].y) }));
-    const length = segments.reduce((total, segment) => total + segment.length, 0);
-    const xs = compact.map((point) => point.x);
-    const ys = compact.map((point) => point.y);
-    const bounds = xs.length === 0
-        ? { left: 0, top: 0, right: 0, bottom: 0 }
-        : { left: Math.min(...xs), top: Math.min(...ys), right: Math.max(...xs), bottom: Math.max(...ys) };
-    return {
-        path,
-        points: compact,
-        length: length || 1,
-        bounds,
-        pointAt(progress) {
-            if (compact.length === 0)
-                return { x: 0, y: 0 };
-            if (compact.length === 1 || length === 0)
-                return compact[0];
-            const distance = Math.min(1, Math.max(0, progress)) * length;
-            let traversed = 0;
-            for (const segment of segments) {
-                if (distance <= traversed + segment.length) {
-                    const ratio = segment.length === 0 ? 0 : (distance - traversed) / segment.length;
-                    return {
-                        x: segment.start.x + (segment.end.x - segment.start.x) * ratio,
-                        y: segment.start.y + (segment.end.y - segment.start.y) * ratio
-                    };
-                }
-                traversed += segment.length;
-            }
-            return compact.at(-1);
-        }
-    };
-}
-/** Build sampled geometry for a cubic curve while retaining the exact cubic command for SVG output. */
-function createCurveGeometry(start, controlStart, controlEnd, end) {
-    const samples = [];
-    const sampleCount = 32;
-    for (let index = 0; index <= sampleCount; index += 1) {
-        const progress = index / sampleCount;
-        const inverse = 1 - progress;
-        samples.push({
-            x: inverse ** 3 * start.x + 3 * inverse ** 2 * progress * controlStart.x + 3 * inverse * progress ** 2 * controlEnd.x + progress ** 3 * end.x,
-            y: inverse ** 3 * start.y + 3 * inverse ** 2 * progress * controlStart.y + 3 * inverse * progress ** 2 * controlEnd.y + progress ** 3 * end.y
-        });
-    }
-    const path = `M ${formatNumber(start.x)} ${formatNumber(start.y)} C ${formatNumber(controlStart.x)} ${formatNumber(controlStart.y)} ${formatNumber(controlEnd.x)} ${formatNumber(controlEnd.y)} ${formatNumber(end.x)} ${formatNumber(end.y)}`;
-    return createPathGeometry(samples, path);
-}
-/** Build a two-segment cubic route used for opposite relationships; endpoint tangents remain exact port normals. */
-function createSeparatedCurveGeometry(start, controlStart, midpoint, controlMidStart, controlMidEnd, controlEnd, end) {
-    const samples = [];
-    const sampleSegment = (first, firstControl, secondControl, last) => {
-        for (let index = 0; index <= 16; index += 1) {
-            if (samples.length > 0 && index === 0)
-                continue;
-            const progress = index / 16;
-            const inverse = 1 - progress;
-            samples.push({
-                x: inverse ** 3 * first.x + 3 * inverse ** 2 * progress * firstControl.x + 3 * inverse * progress ** 2 * secondControl.x + progress ** 3 * last.x,
-                y: inverse ** 3 * first.y + 3 * inverse ** 2 * progress * firstControl.y + 3 * inverse * progress ** 2 * secondControl.y + progress ** 3 * last.y
-            });
-        }
-    };
-    sampleSegment(start, controlStart, controlMidStart, midpoint);
-    sampleSegment(midpoint, controlMidEnd, controlEnd, end);
-    const path = `M ${formatNumber(start.x)} ${formatNumber(start.y)} C ${formatNumber(controlStart.x)} ${formatNumber(controlStart.y)} ${formatNumber(controlMidStart.x)} ${formatNumber(controlMidStart.y)} ${formatNumber(midpoint.x)} ${formatNumber(midpoint.y)} C ${formatNumber(controlMidEnd.x)} ${formatNumber(controlMidEnd.y)} ${formatNumber(controlEnd.x)} ${formatNumber(controlEnd.y)} ${formatNumber(end.x)} ${formatNumber(end.y)}`;
-    return createPathGeometry(samples, path);
-}
-/** Resolve both focus targets against current geometry, then interpolate cameras with the timeline's eased progress. */
-function resolveCamera(viewport, beforeTarget, afterTarget, progress, nodes, edges, edgeGeometries) {
-    const full = { x: 0, y: 0, width: viewport.width, height: viewport.height };
-    const before = focusCamera(viewport, beforeTarget, nodes, edges, edgeGeometries) ?? full;
-    const after = focusCamera(viewport, afterTarget, nodes, edges, edgeGeometries) ?? full;
-    if (progress <= 0)
-        return before;
-    if (progress >= 1)
-        return after;
-    return {
-        x: before.x + (after.x - before.x) * progress,
-        y: before.y + (after.y - before.y) * progress,
-        width: before.width + (after.width - before.width) * progress,
-        height: before.height + (after.height - before.height) * progress
-    };
-}
-/** Pad bounds of the target, descendants and visible incident edges, preserving aspect ratio within the initial viewport. */
-function focusCamera(viewport, target, nodes, edges, edgeGeometries) {
-    if (!target)
-        return undefined;
-    const targetNode = nodes.find((node) => node.id === target);
-    if (!targetNode)
-        return undefined;
-    const targetIds = new Set(nodes.filter((node) => node.id === target || hasAncestor(node, target, nodes)).map((node) => node.id));
-    const bounds = nodes.filter((node) => targetIds.has(node.id)).map(nodeBounds);
-    for (const edge of edges) {
-        if (edge.visible && edge.opacity > 0 && (targetIds.has(edge.from) || targetIds.has(edge.to)))
-            bounds.push((edgeGeometries.get(edge.id) ?? emptyPathGeometry()).bounds);
-    }
-    const combined = combineBounds(bounds);
-    if (!combined)
-        return undefined;
-    const aspect = viewport.width / viewport.height;
-    const paddedWidth = combined.right - combined.left + FOCUS_PADDING * 2;
-    const paddedHeight = combined.bottom - combined.top + FOCUS_PADDING * 2;
-    let width = Math.max(paddedWidth, paddedHeight * aspect);
-    let height = Math.max(paddedHeight, paddedWidth / aspect);
-    if (width > viewport.width) {
-        width = viewport.width;
-        height = width / aspect;
-    }
-    if (height > viewport.height) {
-        height = viewport.height;
-        width = height * aspect;
-    }
-    const centerX = (combined.left + combined.right) / 2;
-    const centerY = (combined.top + combined.bottom) / 2;
-    const x = clampCamera(centerX - width / 2, 0, viewport.width - width);
-    const y = clampCamera(centerY - height / 2, 0, viewport.height - height);
-    return { x, y, width, height };
-}
-function hasAncestor(node, ancestorId, nodes) {
-    const byId = new Map(nodes.map((candidate) => [candidate.id, candidate]));
-    let parentId = node.parentId;
-    while (parentId) {
-        if (parentId === ancestorId)
-            return true;
-        parentId = byId.get(parentId)?.parentId;
-    }
-    return false;
-}
-function nodeBounds(node) {
-    return { left: node.x, top: node.y, right: node.x + node.width, bottom: node.y + node.height };
-}
-function combineBounds(bounds) {
-    if (bounds.length === 0)
-        return undefined;
-    return { left: Math.min(...bounds.map((bound) => bound.left)), top: Math.min(...bounds.map((bound) => bound.top)), right: Math.max(...bounds.map((bound) => bound.right)), bottom: Math.max(...bounds.map((bound) => bound.bottom)) };
-}
-function clampCamera(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
-/** Include deterministic label bounds so overflowing text remains part of the node's interaction target. */
-function isPointInNode(point, node) {
-    const labelHit = node.labelBoxes.some((line) => {
-        if (line.text.length === 0)
-            return false;
-        const halfWidth = estimateTextWidth(line.text, NODE_TYPOGRAPHY) / 2;
-        return point.x >= line.x - halfWidth && point.x <= line.x + halfWidth
-            && point.y >= line.y - NODE_TYPOGRAPHY.fontSize && point.y <= line.y + NODE_TYPOGRAPHY.fontSize * TEXT_DESCENT_RATIO;
-    });
-    if (labelHit)
-        return true;
-    if (node.kind === "ellipse") {
-        const dx = (point.x - (node.x + node.width / 2)) / (node.width / 2);
-        const dy = (point.y - (node.y + node.height / 2)) / (node.height / 2);
-        return dx * dx + dy * dy <= 1;
-    }
-    return point.x >= node.x && point.x <= node.x + node.width && point.y >= node.y && point.y <= node.y + node.height;
-}
-function isPointNearPath(point, geometry, tolerance) {
-    for (let index = 1; index < geometry.points.length; index += 1)
-        if (distanceToSegment(point, geometry.points[index - 1], geometry.points[index]) <= tolerance)
-            return true;
-    return false;
-}
-function distanceToSegment(point, start, end) {
-    const dx = end.x - start.x;
-    const dy = end.y - start.y;
-    if (dx === 0 && dy === 0)
-        return Math.hypot(point.x - start.x, point.y - start.y);
-    const factor = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy)));
-    return Math.hypot(point.x - (start.x + factor * dx), point.y - (start.y + factor * dy));
-}
-/**
- * Automatic orthogonal routing excludes endpoints and group frames from obstacles.
- * Explicit orthogonal ports reserve outward stubs and route around endpoint bodies as well.
- * Routing uses visible separately from paint opacity: reveals block immediately, and hides block until completion.
- */
-function routeEdge(edge, from, to, nodes, reverseOffset = 0) {
-    if (edge.route === "curved") {
-        const automatic = automaticPorts(from, to);
-        const fromDirection = edge.fromPort ?? automatic.from;
-        const toDirection = edge.toPort ?? automatic.to;
-        const start = portPoint(from, fromDirection);
-        const end = portPoint(to, toDirection);
-        return curvedPath(start, end, fromDirection, toDirection, reverseOffset);
-    }
-    if (edge.route !== "orthogonal") {
-        const points = edge.fromPort || edge.toPort
-            ? [portPoint(from, edge.fromPort ?? automaticPorts(from, to).from), portPoint(to, edge.toPort ?? automaticPorts(from, to).to)]
-            : straightPoints(from, to);
-        return createPathGeometry(points);
-    }
-    const { start, end } = orthogonalAttachments(from, to, edge.fromPort, edge.toPort);
-    const obstacles = nodes
-        .filter((node) => node.visible && node.kind !== "group" && node.id !== from.id && node.id !== to.id)
-        .map(routingBounds);
-    if (edge.fromPort || edge.toPort)
-        return createPathGeometry(explicitOrthogonalPath(edge, from, to, obstacles));
-    return createPathGeometry(orthogonalPath(start, end, obstacles));
-}
-function routingBounds(node) {
-    return {
-        left: node.x - ROUTING_GAP,
-        top: node.y - ROUTING_GAP,
-        right: node.x + node.width + ROUTING_GAP,
-        bottom: node.y + node.height + ROUTING_GAP
-    };
-}
-/** Reserve endpoint-normal segments before grid search so a backside port cannot route through its own node. */
-function explicitOrthogonalPath(edge, from, to, obstacles) {
-    const automatic = automaticPorts(from, to);
-    const fromDirection = edge.fromPort ?? automatic.from;
-    const toDirection = edge.toPort ?? automatic.to;
-    const start = portPoint(from, fromDirection);
-    const end = portPoint(to, toDirection);
-    const fromNormal = portNormal(fromDirection);
-    const toNormal = portNormal(toDirection);
-    const startStub = { x: start.x + fromNormal.x * ROUTING_GAP, y: start.y + fromNormal.y * ROUTING_GAP };
-    const endStub = { x: end.x + toNormal.x * ROUTING_GAP, y: end.y + toNormal.y * ROUTING_GAP };
-    const middle = orthogonalPath(startStub, endStub, [...obstacles, routingBounds(from), routingBounds(to)]);
-    return [start, ...middle, end];
-}
-/** Choose rectangular attachment sides along the dominant center-to-center axis for orthogonal connections. */
-function orthogonalAttachments(from, to, fromPort, toPort) {
-    const automatic = automaticPorts(from, to);
-    return {
-        start: portPoint(from, fromPort ?? automatic.from),
-        end: portPoint(to, toPort ?? automatic.to)
-    };
-}
-/** Select cardinal sides from the dominant center-to-center axis for automatic routes. */
-function automaticPorts(from, to) {
-    const fromCenter = { x: from.x + from.width / 2, y: from.y + from.height / 2 };
-    const toCenter = { x: to.x + to.width / 2, y: to.y + to.height / 2 };
-    const horizontal = Math.abs(toCenter.x - fromCenter.x) >= Math.abs(toCenter.y - fromCenter.y);
-    if (horizontal) {
-        const right = toCenter.x >= fromCenter.x;
-        return { from: right ? "right" : "left", to: right ? "left" : "right" };
-    }
-    const bottom = toCenter.y >= fromCenter.y;
-    return { from: bottom ? "bottom" : "top", to: bottom ? "top" : "bottom" };
-}
-/** Return the actual outline point for a cardinal side, including ellipse contours. */
-function portPoint(node, direction) {
-    const center = { x: node.x + node.width / 2, y: node.y + node.height / 2 };
-    if (direction === "top")
-        return { x: center.x, y: node.y };
-    if (direction === "right")
-        return { x: node.x + node.width, y: center.y };
-    if (direction === "bottom")
-        return { x: center.x, y: node.y + node.height };
-    return { x: node.x, y: center.y };
-}
-/** Generate a smooth cubic route whose endpoint tangents follow port normals. */
-function curvedPath(start, end, fromDirection, toDirection, separation) {
-    const distance = Math.hypot(end.x - start.x, end.y - start.y);
-    const tangentLength = Math.max(24, distance * 0.32);
-    const fromNormal = portNormal(fromDirection);
-    const toNormal = portNormal(toDirection);
-    const perpendicular = { x: -(end.y - start.y), y: end.x - start.x };
-    const perpendicularLength = Math.hypot(perpendicular.x, perpendicular.y) || 1;
-    const lane = separation * Math.min(72, Math.max(28, distance * 0.16));
-    if (separation !== 0) {
-        const midpoint = {
-            x: (start.x + end.x) / 2 + perpendicular.x / perpendicularLength * lane,
-            y: (start.y + end.y) / 2 + perpendicular.y / perpendicularLength * lane
-        };
-        const chord = { x: end.x - start.x, y: end.y - start.y };
-        const chordLength = Math.hypot(chord.x, chord.y) || 1;
-        const joinTangent = { x: chord.x / chordLength, y: chord.y / chordLength };
-        return createSeparatedCurveGeometry(start, { x: start.x + fromNormal.x * tangentLength, y: start.y + fromNormal.y * tangentLength }, midpoint, { x: midpoint.x - joinTangent.x * tangentLength * 0.5, y: midpoint.y - joinTangent.y * tangentLength * 0.5 }, { x: midpoint.x + joinTangent.x * tangentLength * 0.5, y: midpoint.y + joinTangent.y * tangentLength * 0.5 }, { x: end.x + toNormal.x * tangentLength, y: end.y + toNormal.y * tangentLength }, end);
-    }
-    const controlStart = {
-        x: start.x + fromNormal.x * tangentLength + perpendicular.x / perpendicularLength * lane,
-        y: start.y + fromNormal.y * tangentLength + perpendicular.y / perpendicularLength * lane
-    };
-    const controlEnd = {
-        x: end.x + toNormal.x * tangentLength + perpendicular.x / perpendicularLength * lane,
-        y: end.y + toNormal.y * tangentLength + perpendicular.y / perpendicularLength * lane
-    };
-    return createCurveGeometry(start, controlStart, controlEnd, end);
-}
-function portNormal(direction) {
-    if (direction === "top")
-        return { x: 0, y: -1 };
-    if (direction === "right")
-        return { x: 1, y: 0 };
-    if (direction === "bottom")
-        return { x: 0, y: 1 };
-    return { x: -1, y: 0 };
-}
-/**
- * Breadth-first search the grid of endpoints and obstacle boundaries, using fixed neighbor order for determinism.
- * Grid-step search does not guarantee shortest geometric length or fewest bends; fall back to a fixed elbow if blocked.
- */
-function orthogonalPath(start, end, obstacles) {
-    const xs = uniqueSorted([start.x, end.x, ...obstacles.flatMap((rect) => [rect.left, rect.right])]);
-    const ys = uniqueSorted([start.y, end.y, ...obstacles.flatMap((rect) => [rect.top, rect.bottom])]);
-    const xIndex = new Map(xs.map((value, index) => [value, index]));
-    const yIndex = new Map(ys.map((value, index) => [value, index]));
-    const startKey = pointKey(start);
-    const endKey = pointKey(end);
-    const queue = [start];
-    const previous = new Map([[startKey, undefined]]);
-    const preferredHorizontal = Math.abs(end.x - start.x) >= Math.abs(end.y - start.y);
-    const directions = preferredHorizontal
-        ? [[1, 0], [0, -1], [0, 1], [-1, 0]]
-        : [[0, 1], [1, 0], [-1, 0], [0, -1]];
-    while (queue.length > 0) {
-        const current = queue.shift();
-        if (pointKey(current) === endKey)
-            break;
-        const currentX = xIndex.get(current.x);
-        const currentY = yIndex.get(current.y);
-        if (currentX === undefined || currentY === undefined)
-            continue;
-        for (const [dx, dy] of directions) {
-            const nextX = xs[currentX + dx];
-            const nextY = ys[currentY + dy];
-            if (nextX === undefined || nextY === undefined)
-                continue;
-            const next = { x: nextX, y: nextY };
-            const key = pointKey(next);
-            if (previous.has(key) || isInsideObstacle(next, obstacles) || blockedSegment(current, next, obstacles))
-                continue;
-            previous.set(key, current);
-            queue.push(next);
-        }
-    }
-    const points = [];
-    if (previous.has(endKey)) {
-        let current = end;
-        while (current) {
-            points.push(current);
-            current = previous.get(pointKey(current));
-        }
-        points.reverse();
-    }
-    else {
-        const middle = preferredHorizontal ? { x: end.x, y: start.y } : { x: start.x, y: end.y };
-        points.push(start, middle, end);
-    }
-    return removeMicroTurns(points, obstacles);
-}
-/** Replace tiny obstacle-detour turns with a wider elbow when the replacement remains collision-free. */
-function removeMicroTurns(points, obstacles) {
-    const result = [...points];
-    const minimum = ROUTING_GAP * 2;
-    for (let index = 1; index + 2 < result.length; index += 1) {
-        const before = result[index - 1];
-        const first = result[index];
-        const second = result[index + 1];
-        const after = result[index + 2];
-        const shortLength = Math.abs(second.x - first.x) + Math.abs(second.y - first.y);
-        if (shortLength >= minimum)
-            continue;
-        const candidate = before.x === first.x
-            ? { x: first.x, y: after.y }
-            : { x: after.x, y: first.y };
-        if (isInsideObstacle(candidate, obstacles) || blockedSegment(before, candidate, obstacles) || blockedSegment(candidate, after, obstacles))
-            continue;
-        result.splice(index, 2, candidate);
-        index = Math.max(0, index - 2);
-    }
-    return result;
-}
-/** Remove consecutive duplicates and collinear intermediate points to keep SVG paths compact. */
-function pointsToPath(points) {
-    return simplifyPoints(points).map((point, index) => `${index === 0 ? "M" : "L"} ${formatNumber(point.x)} ${formatNumber(point.y)}`).join(" ");
-}
-/** Keep collinear reversals: removing an extremum would shorten flow distance and truncate path bounds. */
-function simplifyPoints(points) {
-    const compact = [];
-    for (const point of points) {
-        const previous = compact.at(-1);
-        if (!previous || previous.x !== point.x || previous.y !== point.y)
-            compact.push(point);
-    }
-    const simplified = [];
-    for (const point of compact) {
-        const previous = simplified.at(-1);
-        const beforePrevious = simplified.at(-2);
-        const continuesDirection = previous && beforePrevious
-            && (previous.x - beforePrevious.x) * (point.x - previous.x) + (previous.y - beforePrevious.y) * (point.y - previous.y) >= 0;
-        if (previous && beforePrevious && continuesDirection && (beforePrevious.x === previous.x && previous.x === point.x || beforePrevious.y === previous.y && previous.y === point.y)) {
-            simplified[simplified.length - 1] = point;
-        }
-        else {
-            simplified.push(point);
-        }
-    }
-    return simplified;
-}
-/** Obstacles already include ROUTING_GAP; allow boundary contact and reject only segments crossing their interiors. */
-function blockedSegment(start, end, obstacles) {
-    for (const obstacle of obstacles) {
-        if (start.x === end.x) {
-            if (start.x > obstacle.left && start.x < obstacle.right && rangesOverlap(start.y, end.y, obstacle.top, obstacle.bottom))
-                return true;
-        }
-        else if (start.y === end.y && start.y > obstacle.top && start.y < obstacle.bottom && rangesOverlap(start.x, end.x, obstacle.left, obstacle.right)) {
-            return true;
-        }
-    }
-    return false;
-}
-function isInsideObstacle(point, obstacles) {
-    return obstacles.some((obstacle) => point.x > obstacle.left && point.x < obstacle.right && point.y > obstacle.top && point.y < obstacle.bottom);
-}
-function rangesOverlap(firstStart, firstEnd, secondStart, secondEnd) {
-    return Math.max(Math.min(firstStart, firstEnd), secondStart) < Math.min(Math.max(firstStart, firstEnd), secondEnd);
-}
-function pointKey(point) {
-    return `${point.x},${point.y}`;
-}
-function uniqueSorted(values) {
-    return [...new Set(values)].sort((left, right) => left - right);
-}
-/** Project straight connections onto the ellipse contour, or the bounding rectangle for other shapes. */
-function boundaryPoint(node, toward) {
-    const center = { x: node.x + node.width / 2, y: node.y + node.height / 2 };
-    const dx = toward.x - center.x;
-    const dy = toward.y - center.y;
-    if (dx === 0 && dy === 0)
-        return center;
-    const normalizedX = dx / (node.width / 2);
-    const normalizedY = dy / (node.height / 2);
-    const scale = 1 / (node.kind === "ellipse"
-        ? Math.hypot(normalizedX, normalizedY)
-        : Math.max(Math.abs(normalizedX), Math.abs(normalizedY)));
-    return { x: center.x + dx * scale, y: center.y + dy * scale };
-}
-function pathLabelAnchor(geometry) {
-    const points = geometry.points;
-    if (points.length < 2)
-        return { x: 0, y: -12 };
-    let longest = { start: points[0], end: points[1], length: 0 };
-    for (let index = 1; index < points.length; index += 1) {
-        const start = points[index - 1];
-        const end = points[index];
-        const length = Math.hypot(end.x - start.x, end.y - start.y);
-        if (length > longest.length)
-            longest = { start, end, length };
-    }
-    const horizontal = longest.start.y === longest.end.y;
-    return {
-        x: (longest.start.x + longest.end.x) / 2 + (horizontal ? 0 : 20),
-        y: (longest.start.y + longest.end.y) / 2 + (horizontal ? -12 : 0)
-    };
-}
-function formatNumber(value) {
-    return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(3)));
-}
-function escapeText(value) {
-    return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
-}
-function escapeAttribute(value) {
-    return escapeText(value);
-}
-function isRecord(value) {
-    if (typeof value !== "object" || value === null || Array.isArray(value))
-        return false;
-    const prototype = Object.getPrototypeOf(value);
-    return prototype === Object.prototype || prototype === null;
-}
-function isNonEmptyString(value) {
-    return typeof value === "string" && value.length > 0;
-}
-function isNodeKind(value) {
-    return value === "rect" || value === "roundedRect" || value === "ellipse" || value === "cylinder" || value === "group";
-}
-function isPortDirection(value) {
-    return value === "top" || value === "right" || value === "bottom" || value === "left";
-}
-function validateFinite(value, path, issues) {
-    if (typeof value !== "number" || !Number.isFinite(value))
-        issues.push({ path, message: "must be a finite number" });
-}
-function validatePositiveFinite(value, path, issues) {
-    validateFinite(value, path, issues);
-    if (typeof value === "number" && Number.isFinite(value) && value <= 0)
-        issues.push({ path, message: "must be greater than zero" });
-}
-function validateNonNegativeFinite(value, path, issues) {
-    validateFinite(value, path, issues);
-    if (typeof value === "number" && Number.isFinite(value) && value < 0)
-        issues.push({ path, message: "must be zero or greater" });
-}
-function validateUnknownFields(record, allowed, path, issues) {
-    const allowedFields = new Set(allowed);
-    for (const key of Object.keys(record))
-        if (!allowedFields.has(key))
-            issues.push({ path: path === "$" ? key : `${path}.${key}`, message: "unknown field" });
-}
-function validateDenseArray(values, path, issues) {
-    for (let index = 0; index < values.length; index += 1)
-        if (!(index in values))
-            issues.push({ path: `${path}[${index}]`, message: "must be a value" });
-}
-/** Restrict colors to interpolable hexadecimal data, excluding CSS expressions and external resource references. */
-function validateColor(value, path, issues) {
-    if (typeof value !== "string" || !/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i.test(value))
-        issues.push({ path, message: "must be a hexadecimal color" });
-}
-function validateNodeStyle(style, path, issues) {
-    if (style === undefined)
-        return;
-    if (!isRecord(style)) {
-        issues.push({ path, message: "must be an object" });
-        return;
-    }
-    validateUnknownFields(style, ["fill", "stroke", "strokeWidth", "textColor", "dashed"], path, issues);
-    for (const key of ["fill", "stroke", "textColor"])
-        if (style[key] !== undefined)
-            validateColor(style[key], `${path}.${key}`, issues);
-    if (style.strokeWidth !== undefined)
-        validateNonNegativeFinite(style.strokeWidth, `${path}.strokeWidth`, issues);
-    if (style.dashed !== undefined && typeof style.dashed !== "boolean")
-        issues.push({ path: `${path}.dashed`, message: "must be a boolean" });
-}
-function validateEdgeStyle(style, path, issues) {
-    if (style === undefined)
-        return;
-    if (!isRecord(style)) {
-        issues.push({ path, message: "must be an object" });
-        return;
-    }
-    validateUnknownFields(style, ["stroke", "strokeWidth", "dashed"], path, issues);
-    if (style.stroke !== undefined)
-        validateColor(style.stroke, `${path}.stroke`, issues);
-    if (style.strokeWidth !== undefined)
-        validateNonNegativeFinite(style.strokeWidth, `${path}.strokeWidth`, issues);
-    if (style.dashed !== undefined && typeof style.dashed !== "boolean")
-        issues.push({ path: `${path}.dashed`, message: "must be a boolean" });
-}
-function validateEdgeEndpoint(value, path, nodeById, issues) {
-    if (!isNonEmptyString(value)) {
-        issues.push({ path, message: "must reference an existing node" });
-        return;
-    }
-    const node = nodeById.get(value);
-    if (!node)
-        issues.push({ path, message: "must reference an existing node" });
-}
-/** Reject parent cycles at load time so later position and visibility recursion terminates. */
-function validateParentCycles(nodes, nodeById, issues) {
-    const reported = new Set();
-    for (const [id, node] of nodeById) {
-        const chain = new Set();
-        let current = id;
-        while (current) {
-            if (chain.has(current)) {
-                const index = nodes.findIndex((candidate) => isRecord(candidate) && candidate.id === id);
-                const path = index >= 0 ? `nodes[${index}].parentId` : "nodes.parentId";
-                if (!reported.has(path)) {
-                    issues.push({ path, message: "group parent references form a cycle" });
-                    reported.add(path);
-                }
-                break;
-            }
-            chain.add(current);
-            const parentValue = nodeById.get(current)?.parentId;
-            current = isNonEmptyString(parentValue) ? parentValue : undefined;
-        }
-    }
-}
-/** Track assignment keys per beat: allow different fields on one target but reject duplicate writes to a field. */
-function validateBeat(beat, path, allIds, nodeById, edgeById, issues) {
-    if (!isRecord(beat)) {
-        issues.push({ path, message: "must be an object" });
-        return;
-    }
-    validateUnknownFields(beat, ["durationMs", "transitionMs", "caption", "actions"], path, issues);
-    validatePositiveFinite(beat.durationMs, `${path}.durationMs`, issues);
-    if (beat.transitionMs !== undefined) {
-        validateNonNegativeFinite(beat.transitionMs, `${path}.transitionMs`, issues);
-        if (typeof beat.durationMs === "number" && Number.isFinite(beat.durationMs) && typeof beat.transitionMs === "number" && Number.isFinite(beat.transitionMs) && beat.transitionMs > beat.durationMs)
-            issues.push({ path: `${path}.transitionMs`, message: "must not exceed durationMs" });
-    }
-    if (beat.caption !== undefined && typeof beat.caption !== "string")
-        issues.push({ path: `${path}.caption`, message: "must be a string" });
-    if (!Array.isArray(beat.actions)) {
-        issues.push({ path: `${path}.actions`, message: "must be an array" });
-        return;
-    }
-    validateDenseArray(beat.actions, `${path}.actions`, issues);
-    const assignments = new Set();
-    beat.actions.forEach((action, index) => validateAction(action, `${path}.actions[${index}]`, allIds, nodeById, edgeById, assignments, issues));
-}
-/** Validate fields/targets by action kind; visibility and highlight keys are separate from ordinary style updates. */
-function validateAction(action, path, allIds, nodeById, edgeById, assignments, issues) {
-    if (!isRecord(action)) {
-        issues.push({ path, message: "must be an object" });
-        return;
-    }
-    if (typeof action.type !== "string") {
-        issues.push({ path: `${path}.type`, message: "must be a supported action" });
-        return;
-    }
-    const type = action.type;
-    const allowedByType = {
-        show: ["type", "target"], hide: ["type", "target"], highlight: ["type", "target"], unhighlight: ["type", "target"],
-        updateNode: ["type", "target", "value"], updateEdge: ["type", "target", "value"], focus: ["type", "target"],
-        flow: ["type", "target", "direction", "text"]
-    };
-    const allowed = Object.hasOwn(allowedByType, type) ? allowedByType[type] : undefined;
-    if (!allowed) {
-        issues.push({ path: `${path}.type`, message: "unknown action" });
-        return;
-    }
-    validateUnknownFields(action, allowed, path, issues);
-    if (["show", "hide", "highlight", "unhighlight"].includes(type)) {
-        if (!isNonEmptyString(action.target)) {
-            issues.push({ path: `${path}.target`, message: "must reference an existing object" });
-            return;
-        }
-        if (!allIds.has(action.target))
-            issues.push({ path: `${path}.target`, message: "must reference an existing object" });
-        addAssignment(`${type === "show" || type === "hide" ? "visibility" : "highlight"}:${action.target}`, path, assignments, issues);
-        return;
-    }
-    if (type === "focus") {
-        if (action.target !== null && (!isNonEmptyString(action.target) || !nodeById.has(action.target)))
-            issues.push({ path: `${path}.target`, message: "must reference a node or group" });
-        if (action.target === null || (isNonEmptyString(action.target) && nodeById.has(action.target)))
-            addAssignment("focus", path, assignments, issues);
-        return;
-    }
-    if (type === "flow") {
-        if (!isNonEmptyString(action.target))
-            issues.push({ path: `${path}.target`, message: "must reference an existing edge" });
-        else if (!edgeById.has(action.target))
-            issues.push({ path: `${path}.target`, message: "must reference an existing edge" });
-        if (action.direction !== "forward" && action.direction !== "reverse")
-            issues.push({ path: `${path}.direction`, message: "must be forward or reverse" });
-        if (action.text !== undefined && typeof action.text !== "string")
-            issues.push({ path: `${path}.text`, message: "must be a string" });
-        // Reserve the edge independently of other field errors so invalid directions cannot hide duplicate transfers.
-        if (isNonEmptyString(action.target) && edgeById.has(action.target))
-            addAssignment(`flow:${action.target}`, `${path}.target`, assignments, issues);
-        return;
-    }
-    if (!isNonEmptyString(action.target)) {
-        issues.push({ path: `${path}.target`, message: `must reference a ${type === "updateNode" ? "node" : "edge"}` });
-    }
-    else if (type === "updateNode" ? !nodeById.has(action.target) : !edgeById.has(action.target))
-        issues.push({ path: `${path}.target`, message: `must reference an existing ${type === "updateNode" ? "node" : "edge"}` });
-    validateUpdateValue(action.value, `${path}.value`, type === "updateNode", assignments, action.target, issues);
-    const targetNode = typeof action.target === "string" ? nodeById.get(action.target) : undefined;
-    if (type === "updateNode" && targetNode && isRecord(action.value) && action.value.content !== undefined && action.value.content !== null && !supportsNodeContent(targetNode.kind)) {
-        issues.push({ path: `${path}.value.content`, message: "requires a rect, roundedRect or cylinder node" });
-    }
-}
-function validateUpdateValue(value, path, isNode, assignments, target, issues) {
-    if (!isRecord(value)) {
-        issues.push({ path, message: "must be an object" });
-        return;
-    }
-    const allowed = isNode ? ["x", "y", "width", "height", "label", "content", "fill", "stroke", "opacity"] : ["label", "stroke", "strokeWidth", "opacity"];
-    validateUnknownFields(value, allowed, path, issues);
-    if (isNode && Object.hasOwn(value, "label") && Object.hasOwn(value, "content")) {
-        issues.push({ path: `${path}.content`, message: "must not be declared together with label" });
-    }
-    for (const key of Object.keys(value)) {
-        if (!allowed.includes(key))
-            continue;
-        // Both node text fields replace the same display mode, even across separate actions.
-        const assignmentField = isNode && (key === "label" || key === "content") ? "text-mode" : key;
-        addAssignment(`${isNode ? "node" : "edge"}:${String(target)}:${assignmentField}`, `${path}.${key}`, assignments, issues);
-        const field = value[key];
-        if (["x", "y", "width", "height", "opacity"].includes(key))
-            validateFinite(field, `${path}.${key}`, issues);
-        if (key === "strokeWidth")
-            validateNonNegativeFinite(field, `${path}.${key}`, issues);
-        if (["width", "height"].includes(key) && typeof field === "number" && field <= 0)
-            issues.push({ path: `${path}.${key}`, message: "must be greater than zero" });
-        if (key === "opacity" && typeof field === "number" && (field < 0 || field > 1))
-            issues.push({ path: `${path}.${key}`, message: "must be between zero and one" });
-        if (["fill", "stroke"].includes(key))
-            validateColor(field, `${path}.${key}`, issues);
-        if (key === "label" && typeof field !== "string")
-            issues.push({ path: `${path}.${key}`, message: "must be a string" });
-        if (key === "content" && field !== null)
-            validateNodeContent(field, `${path}.${key}`, issues);
-    }
-}
-function addAssignment(key, path, assignments, issues) {
-    if (assignments.has(key))
-        issues.push({ path, message: "duplicate beat assignment" });
-    else
-        assignments.add(key);
-}
-/** Validation restricts inputs to serializable documents; clone before freezing to isolate later author mutations. */
-function cloneDocument(document) {
-    return JSON.parse(JSON.stringify(document));
-}
-function deepFreeze(value) {
-    if (typeof value === "object" && value !== null) {
-        Object.freeze(value);
-        for (const child of Object.values(value))
-            deepFreeze(child);
-    }
-    return value;
-}
-function resolvePalette(document, options) {
-    return resolveThemePalette(options.theme ?? document.theme);
-}