@matchina/viz-svg 0.1.0-alpha.1

package/dist/elk-layout.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runElkLayout = runElkLayout;
+var _elkBundled = _interopRequireDefault(require("elkjs/lib/elk.bundled.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const elk = new _elkBundled.default();
+function toElkId(fullKey) {
+  return fullKey.replace(/\./g, "|");
+}
+function fromElkId(id) {
+  return id.replace(/\|/g, ".");
+}
+function textWidth(text, charW = 7.2, pad = 24) {
+  return Math.max(60, Math.ceil(text.length * charW) + pad);
+}
+function lcaPath(a, b) {
+  const out = [];
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i++) {
+    if (a[i] === b[i]) out.push(a[i]);else break;
+  }
+  return out;
+}
+function buildElkNode(fullKey, shape, nodeSpacing, layerSpacing, direction) {
+  const stateNode = shape.states.get(fullKey);
+  const label = stateNode.key;
+  const isCompound = stateNode.isCompound;
+  const path = fullKey.split(".");
+  const node = {
+    id: toElkId(fullKey),
+    labels: [{
+      text: label,
+      width: textWidth(label, 7.5, 16),
+      height: 18
+    }],
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": direction,
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(layerSpacing),
+      "elk.spacing.nodeNode": String(nodeSpacing),
+      "elk.spacing.edgeNode": String(nodeSpacing * 0.5),
+      "elk.layered.cycleBreaking.strategy": "MODEL_ORDER",
+      "elk.layered.considerModelOrder": "NODES_AND_EDGES"
+    },
+    _meta: {
+      path,
+      isCompound
+    }
+  };
+  if (!isCompound) {
+    node.width = Math.max(textWidth(label, 8, 32), 92);
+    node.height = 44;
+  } else {
+    node.layoutOptions["elk.hierarchyHandling"] = "INCLUDE_CHILDREN";
+    node.layoutOptions["elk.padding"] = `[top=36,left=${nodeSpacing * 0.6},bottom=${nodeSpacing * 0.6},right=${nodeSpacing * 0.6}]`;
+    const children = [];
+    for (const [childKey, parentKey] of shape.hierarchy) {
+      if (parentKey === fullKey) children.push(childKey);
+    }
+    node.children = children.map(childKey => buildElkNode(childKey, shape, nodeSpacing, layerSpacing, direction));
+  }
+  return node;
+}
+function indexNodes(node, byId) {
+  byId.set(node.id, node);
+  for (const child of node.children ?? []) indexNodes(child, byId);
+}
+async function runElkLayout(shape, opts = {}) {
+  const nodeSpacing = opts.nodeSpacing ?? 40;
+  const layerSpacing = opts.layerSpacing ?? nodeSpacing + 20;
+  const direction = opts.direction ?? "DOWN";
+  const edgeRouting = opts.edgeRouting ?? "ORTHOGONAL";
+  const rootKeys = [];
+  for (const [fullKey, parentKey] of shape.hierarchy) {
+    if (parentKey === void 0 && fullKey !== "") rootKeys.push(fullKey);
+  }
+  const rootChildren = rootKeys.map(key => buildElkNode(key, shape, nodeSpacing, layerSpacing, direction));
+  const byId = /* @__PURE__ */new Map();
+  for (const child of rootChildren) indexNodes(child, byId);
+  const rootEdges = [];
+  for (const [sourceFullKey, eventMap] of shape.transitions) {
+    for (const [event, targetFullKey] of eventMap) {
+      if (!shape.states.has(targetFullKey)) continue;
+      if (!byId.has(toElkId(sourceFullKey)) || !byId.has(toElkId(targetFullKey))) continue;
+      const sourcePath = sourceFullKey.split(".");
+      const targetPath = targetFullKey.split(".");
+      const edge = {
+        id: `e:${toElkId(sourceFullKey)}->${toElkId(targetFullKey)}:${event}`,
+        sources: [toElkId(sourceFullKey)],
+        targets: [toElkId(targetFullKey)],
+        labels: [{
+          text: event,
+          width: textWidth(event, 6.6, 14),
+          height: 16
+        }],
+        _meta: {
+          event,
+          sourcePath,
+          targetPath
+        }
+      };
+      const lca = lcaPath(sourcePath, targetPath);
+      const lcaKey = lca.join(".");
+      const owner = lcaKey ? byId.get(toElkId(lcaKey)) : null;
+      if (owner?.children) {
+        owner.edges = owner.edges ?? [];
+        owner.edges.push(edge);
+      } else {
+        rootEdges.push(edge);
+      }
+    }
+  }
+  const elkInput = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": direction,
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.edgeRouting": edgeRouting,
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(layerSpacing),
+      "elk.spacing.nodeNode": String(nodeSpacing),
+      // Keep parallel edges visually separate — don't merge or collapse them.
+      "elk.layered.mergeEdges": "false",
+      "elk.layered.mergeHierarchyEdges": "false",
+      "elk.layered.cycleBreaking.strategy": "MODEL_ORDER",
+      "elk.layered.considerModelOrder": "NODES_AND_EDGES",
+      "elk.padding": `[top=${nodeSpacing * 0.6},left=${nodeSpacing * 0.6},bottom=${nodeSpacing * 0.6},right=${nodeSpacing * 0.6}]`
+    },
+    children: rootChildren,
+    edges: rootEdges
+  };
+  const result = await elk.layout(elkInput);
+  const nodes = [];
+  const edges = [];
+  const absById = /* @__PURE__ */new Map();
+  absById.set("root", {
+    x: 0,
+    y: 0
+  });
+  function walkNodes(node, ox, oy) {
+    const ax = (node.x ?? 0) + ox;
+    const ay = (node.y ?? 0) + oy;
+    absById.set(node.id, {
+      x: ax,
+      y: ay
+    });
+    if (node.id !== "root" && node._meta) {
+      nodes.push({
+        id: fromElkId(node.id),
+        x: ax,
+        y: ay,
+        width: node.width ?? 92,
+        height: node.height ?? 44,
+        label: node.labels?.[0]?.text ?? node.id,
+        isCompound: node._meta.isCompound,
+        path: node._meta.path
+      });
+    }
+    for (const child of node.children ?? []) walkNodes(child, ax, ay);
+  }
+  walkNodes(result, 0, 0);
+  function walkEdges(node) {
+    for (const edge of node.edges ?? []) {
+      const containerId = edge.container ?? node.id ?? "root";
+      const off = absById.get(containerId) ?? {
+        x: 0,
+        y: 0
+      };
+      const label = edge.labels?.[0];
+      edges.push({
+        id: edge.id,
+        event: edge._meta?.event ?? "",
+        sourcePath: edge._meta?.sourcePath ?? [],
+        targetPath: edge._meta?.targetPath ?? [],
+        sections: (edge.sections ?? []).map(s => ({
+          startPoint: {
+            x: s.startPoint.x + off.x,
+            y: s.startPoint.y + off.y
+          },
+          endPoint: {
+            x: s.endPoint.x + off.x,
+            y: s.endPoint.y + off.y
+          },
+          bendPoints: (s.bendPoints ?? []).map(b => ({
+            x: b.x + off.x,
+            y: b.y + off.y
+          }))
+        })),
+        label: label ? {
+          text: label.text,
+          x: (label.x ?? 0) + off.x,
+          y: (label.y ?? 0) + off.y,
+          width: label.width ?? 60,
+          height: label.height ?? 16
+        } : null
+      });
+    }
+    for (const child of node.children ?? []) walkEdges(child);
+  }
+  walkEdges(result);
+  return {
+    nodes,
+    edges,
+    width: result.width ?? 800,
+    height: result.height ?? 600
+  };
+}

package/dist/elk-layout.mjs

@@ -0,0 +1,175 @@
+import ELKConstructor from "elkjs/lib/elk.bundled.js";
+const elk = new ELKConstructor();
+function toElkId(fullKey) {
+  return fullKey.replace(/\./g, "|");
+}
+function fromElkId(id) {
+  return id.replace(/\|/g, ".");
+}
+function textWidth(text, charW = 7.2, pad = 24) {
+  return Math.max(60, Math.ceil(text.length * charW) + pad);
+}
+function lcaPath(a, b) {
+  const out = [];
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i++) {
+    if (a[i] === b[i]) out.push(a[i]);
+    else break;
+  }
+  return out;
+}
+function buildElkNode(fullKey, shape, nodeSpacing, layerSpacing, direction) {
+  const stateNode = shape.states.get(fullKey);
+  const label = stateNode.key;
+  const isCompound = stateNode.isCompound;
+  const path = fullKey.split(".");
+  const node = {
+    id: toElkId(fullKey),
+    labels: [{ text: label, width: textWidth(label, 7.5, 16), height: 18 }],
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": direction,
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(layerSpacing),
+      "elk.spacing.nodeNode": String(nodeSpacing),
+      "elk.spacing.edgeNode": String(nodeSpacing * 0.5),
+      "elk.layered.cycleBreaking.strategy": "MODEL_ORDER",
+      "elk.layered.considerModelOrder": "NODES_AND_EDGES"
+    },
+    _meta: { path, isCompound }
+  };
+  if (!isCompound) {
+    node.width = Math.max(textWidth(label, 8, 32), 92);
+    node.height = 44;
+  } else {
+    node.layoutOptions["elk.hierarchyHandling"] = "INCLUDE_CHILDREN";
+    node.layoutOptions["elk.padding"] = `[top=36,left=${nodeSpacing * 0.6},bottom=${nodeSpacing * 0.6},right=${nodeSpacing * 0.6}]`;
+    const children = [];
+    for (const [childKey, parentKey] of shape.hierarchy) {
+      if (parentKey === fullKey) children.push(childKey);
+    }
+    node.children = children.map(
+      (childKey) => buildElkNode(childKey, shape, nodeSpacing, layerSpacing, direction)
+    );
+  }
+  return node;
+}
+function indexNodes(node, byId) {
+  byId.set(node.id, node);
+  for (const child of node.children ?? []) indexNodes(child, byId);
+}
+export async function runElkLayout(shape, opts = {}) {
+  const nodeSpacing = opts.nodeSpacing ?? 40;
+  const layerSpacing = opts.layerSpacing ?? nodeSpacing + 20;
+  const direction = opts.direction ?? "DOWN";
+  const edgeRouting = opts.edgeRouting ?? "ORTHOGONAL";
+  const rootKeys = [];
+  for (const [fullKey, parentKey] of shape.hierarchy) {
+    if (parentKey === void 0 && fullKey !== "") rootKeys.push(fullKey);
+  }
+  const rootChildren = rootKeys.map(
+    (key) => buildElkNode(key, shape, nodeSpacing, layerSpacing, direction)
+  );
+  const byId = /* @__PURE__ */ new Map();
+  for (const child of rootChildren) indexNodes(child, byId);
+  const rootEdges = [];
+  for (const [sourceFullKey, eventMap] of shape.transitions) {
+    for (const [event, targetFullKey] of eventMap) {
+      if (!shape.states.has(targetFullKey)) continue;
+      if (!byId.has(toElkId(sourceFullKey)) || !byId.has(toElkId(targetFullKey))) continue;
+      const sourcePath = sourceFullKey.split(".");
+      const targetPath = targetFullKey.split(".");
+      const edge = {
+        id: `e:${toElkId(sourceFullKey)}->${toElkId(targetFullKey)}:${event}`,
+        sources: [toElkId(sourceFullKey)],
+        targets: [toElkId(targetFullKey)],
+        labels: [{ text: event, width: textWidth(event, 6.6, 14), height: 16 }],
+        _meta: { event, sourcePath, targetPath }
+      };
+      const lca = lcaPath(sourcePath, targetPath);
+      const lcaKey = lca.join(".");
+      const owner = lcaKey ? byId.get(toElkId(lcaKey)) : null;
+      if (owner?.children) {
+        owner.edges = owner.edges ?? [];
+        owner.edges.push(edge);
+      } else {
+        rootEdges.push(edge);
+      }
+    }
+  }
+  const elkInput = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": direction,
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.edgeRouting": edgeRouting,
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(layerSpacing),
+      "elk.spacing.nodeNode": String(nodeSpacing),
+      // Keep parallel edges visually separate — don't merge or collapse them.
+      "elk.layered.mergeEdges": "false",
+      "elk.layered.mergeHierarchyEdges": "false",
+      "elk.layered.cycleBreaking.strategy": "MODEL_ORDER",
+      "elk.layered.considerModelOrder": "NODES_AND_EDGES",
+      "elk.padding": `[top=${nodeSpacing * 0.6},left=${nodeSpacing * 0.6},bottom=${nodeSpacing * 0.6},right=${nodeSpacing * 0.6}]`
+    },
+    children: rootChildren,
+    edges: rootEdges
+  };
+  const result = await elk.layout(elkInput);
+  const nodes = [];
+  const edges = [];
+  const absById = /* @__PURE__ */ new Map();
+  absById.set("root", { x: 0, y: 0 });
+  function walkNodes(node, ox, oy) {
+    const ax = (node.x ?? 0) + ox;
+    const ay = (node.y ?? 0) + oy;
+    absById.set(node.id, { x: ax, y: ay });
+    if (node.id !== "root" && node._meta) {
+      nodes.push({
+        id: fromElkId(node.id),
+        x: ax,
+        y: ay,
+        width: node.width ?? 92,
+        height: node.height ?? 44,
+        label: node.labels?.[0]?.text ?? node.id,
+        isCompound: node._meta.isCompound,
+        path: node._meta.path
+      });
+    }
+    for (const child of node.children ?? []) walkNodes(child, ax, ay);
+  }
+  walkNodes(result, 0, 0);
+  function walkEdges(node) {
+    for (const edge of node.edges ?? []) {
+      const containerId = edge.container ?? node.id ?? "root";
+      const off = absById.get(containerId) ?? { x: 0, y: 0 };
+      const label = edge.labels?.[0];
+      edges.push({
+        id: edge.id,
+        event: edge._meta?.event ?? "",
+        sourcePath: edge._meta?.sourcePath ?? [],
+        targetPath: edge._meta?.targetPath ?? [],
+        sections: (edge.sections ?? []).map((s) => ({
+          startPoint: { x: s.startPoint.x + off.x, y: s.startPoint.y + off.y },
+          endPoint: { x: s.endPoint.x + off.x, y: s.endPoint.y + off.y },
+          bendPoints: (s.bendPoints ?? []).map((b) => ({ x: b.x + off.x, y: b.y + off.y }))
+        })),
+        label: label ? {
+          text: label.text,
+          x: (label.x ?? 0) + off.x,
+          y: (label.y ?? 0) + off.y,
+          width: label.width ?? 60,
+          height: label.height ?? 16
+        } : null
+      });
+    }
+    for (const child of node.children ?? []) walkEdges(child);
+  }
+  walkEdges(result);
+  return {
+    nodes,
+    edges,
+    width: result.width ?? 800,
+    height: result.height ?? 600
+  };
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { SvgInspector } from './SvgInspector.js';
+export type { SvgInspectorProps } from './SvgInspector.js';
+export { runElkLayout } from './elk-layout.js';
+export type { ElkLayoutOptions, SvgLayout, SvgNode, SvgEdge } from './elk-layout.js';
+export { layoutToSvg } from './layout-to-svg.js';
+export type { LayoutToSvgOptions } from './layout-to-svg.js';

package/dist/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SvgInspector", {
+  enumerable: true,
+  get: function () {
+    return _SvgInspector.SvgInspector;
+  }
+});
+Object.defineProperty(exports, "layoutToSvg", {
+  enumerable: true,
+  get: function () {
+    return _layoutToSvg.layoutToSvg;
+  }
+});
+Object.defineProperty(exports, "runElkLayout", {
+  enumerable: true,
+  get: function () {
+    return _elkLayout.runElkLayout;
+  }
+});
+var _SvgInspector = require("./SvgInspector.js");
+var _elkLayout = require("./elk-layout.js");
+var _layoutToSvg = require("./layout-to-svg.js");

package/dist/index.mjs

@@ -0,0 +1,3 @@
+export { SvgInspector } from "./SvgInspector.js";
+export { runElkLayout } from "./elk-layout.js";
+export { layoutToSvg } from "./layout-to-svg.js";

package/dist/layout-to-svg.d.ts

@@ -0,0 +1,13 @@
+import type { SvgLayout } from './elk-layout.js';
+export interface LayoutToSvgOptions {
+    /** Current active state value (dot-separated full key). */
+    value?: string;
+    /** @deprecated No longer used; the SVG is sized to exact content dimensions. */
+    padding?: number;
+}
+/**
+ * Produce a complete SVG markup string from a precomputed ELK layout.
+ * Output is sized to the layout's intrinsic dimensions plus padding,
+ * with a viewBox so it scales to its container via `width="100%" height="100%"`.
+ */
+export declare function layoutToSvg(layout: SvgLayout, opts?: LayoutToSvgOptions): string;

package/dist/layout-to-svg.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutToSvg = layoutToSvg;
+var _svgPath = require("./svg-path.js");
+const V = {
+  accent: "var(--matchina-viz-accent, #2dd4bf)",
+  bg: "var(--matchina-viz-bg, #0a0f17)",
+  node: "var(--matchina-viz-node, rgba(28,38,54,0.95))",
+  nodeActive: "var(--matchina-viz-node-active, rgba(20,90,82,0.85))",
+  nodeCompound: "var(--matchina-viz-node-compound, rgba(20,28,40,0.7))",
+  border: "var(--matchina-viz-border, rgba(148,163,184,0.25))",
+  text: "var(--matchina-viz-text, rgba(226,232,240,0.92))",
+  textActive: "var(--matchina-viz-text-active, #e6fffb)",
+  edge: "var(--matchina-viz-edge, rgba(100,116,139,0.55))",
+  labelBg: "var(--matchina-viz-label-bg, rgba(15,23,33,0.95))",
+  labelBgActive: "var(--matchina-viz-label-bg-active, rgba(8,47,51,0.95))",
+  labelText: "var(--matchina-viz-label-text, rgba(203,213,225,0.82))"
+};
+const FONT = "var(--matchina-viz-font, 'JetBrains Mono', monospace)";
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function nodeSvg(node, isActive, isAncestor) {
+  const stroke = isActive || isAncestor ? V.accent : V.border;
+  const strokeWidth = isActive ? 2 : isAncestor ? 1.5 : 1;
+  const fill = node.isCompound ? V.nodeCompound : isActive ? V.nodeActive : V.node;
+  const textFill = isActive ? V.textActive : isActive || isAncestor ? V.accent : V.text;
+  const rect = `<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="10" ry="10" style="fill:${fill};stroke:${stroke};stroke-width:${strokeWidth}" />`;
+  const label = node.isCompound ? `<text x="${node.x + 14}" y="${node.y + 22}" style="fill:${isActive || isAncestor ? V.accent : V.text};font-family:${FONT};font-size:12px;font-weight:600;letter-spacing:0.06em">${esc(node.label)}</text>` : `<text x="${node.x + node.width / 2}" y="${node.y + node.height / 2 + 5}" text-anchor="middle" style="fill:${textFill};font-family:${FONT};font-size:14px;font-weight:${isActive ? 600 : 500}">${esc(node.label)}</text>`;
+  const activeDot = isActive && !node.isCompound ? `<circle cx="${node.x + node.width - 10}" cy="${node.y + 10}" r="4" style="fill:${V.accent}"><animate attributeName="opacity" values="1;0.35;1" dur="1.6s" repeatCount="indefinite" /></circle>` : "";
+  return `<g data-node-id="${esc(node.id)}" data-active="${isActive}" data-ancestor="${isAncestor}">${rect}${label}${activeDot}</g>`;
+}
+function selfLoopSvg(edge, node, isOutgoing, loopIndex) {
+  const stroke = isOutgoing ? V.accent : V.edge;
+  const strokeWidth = isOutgoing ? 2 : 1.25;
+  const opacity = isOutgoing ? 1 : 0.65;
+  const markerId = isOutgoing ? "matchina-svg-arrow-active" : "matchina-svg-arrow";
+  const {
+    label
+  } = edge;
+  const hw = node.width / 2;
+  const hh = node.height / 2;
+  const sx = node.x + hw;
+  const sy = node.y + hh;
+  const loopRadius = 28 + loopIndex * 16;
+  const startX = sx + hw - 8 - loopIndex * 2;
+  const startY = sy - hh;
+  const endX = sx + hw;
+  const endY = sy - hh + 8 + loopIndex * 2;
+  const d = `M ${startX} ${startY} C ${startX} ${startY - loopRadius}, ${endX + loopRadius} ${endY}, ${endX} ${endY}`;
+  const labelX = sx + hw + loopRadius + 4;
+  const labelY = sy - hh - 10 + loopIndex * (label ? label.height + 8 : 24);
+  const path = `<path d="${d}" fill="none" style="stroke:${stroke};stroke-width:${strokeWidth};opacity:${opacity}" marker-end="url(#${markerId})" />`;
+  const labelMarkup = label ? `<g transform="translate(${labelX}, ${labelY - label.height / 2})" style="opacity:${opacity}">
+        <rect x="-6" y="-2" width="${label.width + 12}" height="${label.height + 4}" rx="6" ry="6" style="fill:${isOutgoing ? V.labelBgActive : V.labelBg};stroke:${isOutgoing ? V.accent : "rgba(100,116,139,0.45)"};stroke-width:${isOutgoing ? 1 : 0.75}" />
+        <text x="${label.width / 2}" y="${(label.height + 4) / 2 + 4}" text-anchor="middle" style="fill:${isOutgoing ? V.accent : V.labelText};font-family:${FONT};font-size:11px;font-weight:${isOutgoing ? 600 : 500};letter-spacing:0.04em">${esc(label.text)}</text>
+      </g>` : "";
+  return `<g data-edge-id="${esc(edge.id)}" data-event="${esc(edge.event)}">${path}${labelMarkup}</g>`;
+}
+function edgeSvg(edge, isOutgoing, labelT) {
+  const section = edge.sections?.[0];
+  if (!section?.startPoint || !section?.endPoint) return "";
+  const d = (0, _svgPath.buildCurvedPath)(section);
+  const stroke = isOutgoing ? V.accent : V.edge;
+  const strokeWidth = isOutgoing ? 2 : 1.25;
+  const opacity = isOutgoing ? 1 : 0.65;
+  const {
+    label
+  } = edge;
+  const markerId = isOutgoing ? "matchina-svg-arrow-active" : "matchina-svg-arrow";
+  const mid = label ? (0, _svgPath.pathAtT)(section, labelT) : null;
+  const path = `<path d="${d}" fill="none" style="stroke:${stroke};stroke-width:${strokeWidth};opacity:${opacity}" marker-end="url(#${markerId})" />`;
+  const labelMarkup = label && mid ? `<g transform="translate(${mid.x - label.width / 2}, ${mid.y - label.height / 2})" style="opacity:${opacity}">
+        <rect x="-6" y="-2" width="${label.width + 12}" height="${label.height + 4}" rx="6" ry="6" style="fill:${isOutgoing ? V.labelBgActive : V.labelBg};stroke:${isOutgoing ? V.accent : "rgba(100,116,139,0.45)"};stroke-width:${isOutgoing ? 1 : 0.75}" />
+        <text x="${label.width / 2}" y="${(label.height + 4) / 2 + 4}" text-anchor="middle" style="fill:${isOutgoing ? V.accent : V.labelText};font-family:${FONT};font-size:11px;font-weight:${isOutgoing ? 600 : 500};letter-spacing:0.04em">${esc(label.text)}</text>
+      </g>` : "";
+  return `<g data-edge-id="${esc(edge.id)}" data-event="${esc(edge.event)}">${path}${labelMarkup}</g>`;
+}
+function layoutToSvg(layout, opts = {}) {
+  const {
+    value = ""
+  } = opts;
+  const padding = 0;
+  const activePath = value ? value.split(".") : [];
+  const activeLeafId = value;
+  const activeAncestorIds = /* @__PURE__ */new Set();
+  for (let i = 0; i < activePath.length - 1; i++) {
+    activeAncestorIds.add(activePath.slice(0, i + 1).join("."));
+  }
+  const activeSourceIds = /* @__PURE__ */new Set();
+  for (let i = 1; i <= activePath.length; i++) {
+    activeSourceIds.add(activePath.slice(0, i).join("."));
+  }
+  const pairTotal = /* @__PURE__ */new Map();
+  for (const edge of layout.edges) {
+    const key = `${edge.sourcePath.join(".")}\u2192${edge.targetPath.join(".")}`;
+    pairTotal.set(key, (pairTotal.get(key) ?? 0) + 1);
+  }
+  const pairNextIdx = /* @__PURE__ */new Map();
+  const edgeLabelT = /* @__PURE__ */new Map();
+  for (const edge of layout.edges) {
+    const key = `${edge.sourcePath.join(".")}\u2192${edge.targetPath.join(".")}`;
+    const count = pairTotal.get(key) ?? 1;
+    const idx = pairNextIdx.get(key) ?? 0;
+    pairNextIdx.set(key, idx + 1);
+    const t = count === 1 ? 0.5 : 0.3 + idx / (count - 1) * 0.4;
+    edgeLabelT.set(edge.id, t);
+  }
+  const compounds = layout.nodes.filter(n => n.isCompound);
+  const leaves = layout.nodes.filter(n => !n.isCompound);
+  const nodeById = new Map(layout.nodes.map(n => [n.id, n]));
+  const selfLoopIndexByNode = /* @__PURE__ */new Map();
+  const edgeMarkup = layout.edges.map(edge => {
+    const isSelf = edge.sourcePath.join(".") === edge.targetPath.join(".");
+    const isOutgoing = activeSourceIds.has(edge.sourcePath.join("."));
+    if (isSelf) {
+      const nodeId = edge.sourcePath.join(".");
+      const node = nodeById.get(nodeId);
+      if (!node) return "";
+      const loopIndex = selfLoopIndexByNode.get(nodeId) ?? 0;
+      selfLoopIndexByNode.set(nodeId, loopIndex + 1);
+      return selfLoopSvg(edge, node, isOutgoing, loopIndex);
+    }
+    return edgeSvg(edge, isOutgoing, edgeLabelT.get(edge.id) ?? 0.5);
+  }).join("");
+  const compoundsMarkup = compounds.map(n => nodeSvg(n, n.id === activeLeafId, activeAncestorIds.has(n.id))).join("");
+  const leavesMarkup = leaves.map(n => nodeSvg(n, n.id === activeLeafId, activeAncestorIds.has(n.id))).join("");
+  const vw = layout.width + padding * 2;
+  const vh = layout.height + padding * 2;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${vw} ${vh}" preserveAspectRatio="xMidYMid meet" style="display:block;background:${V.bg}">
+    <defs>
+      <marker id="matchina-svg-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" style="fill:rgba(100,116,139,0.7)" />
+      </marker>
+      <marker id="matchina-svg-arrow-active" 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" style="fill:${V.accent}" />
+      </marker>
+    </defs>
+    <g transform="translate(${padding}, ${padding})">
+      ${compoundsMarkup}
+      ${edgeMarkup}
+      ${leavesMarkup}
+    </g>
+  </svg>`;
+}