@matchina/viz-svg 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/SvgInspector.d.ts

@@ -1,5 +1,5 @@
 import type { MachineShape } from 'matchina';
-import type { ElkLayoutOptions, SvgLayout } from './elk-layout.js';
+import type { ElkLayoutOptions, SvgLayout } from './elk-layout';
 export interface SvgInspectorProps {
     shape: MachineShape;
     value: string;

package/dist/SvgInspector.mjs

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { runElkLayout } from "./elk-layout.js";
-import { buildCurvedPath, pathAtT } from "./svg-path.js";
+import { runElkLayout } from "./elk-layout.mjs";
+import { buildCurvedPath, pathAtT } from "./svg-path.mjs";
 const V = {
   accent: "var(--matchina-viz-accent, #2dd4bf)",
   bg: "var(--matchina-viz-bg, #0a0f17)",

package/dist/index.d.ts

@@ -1,6 +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';
+export { SvgInspector } from './SvgInspector';
+export type { SvgInspectorProps } from './SvgInspector';
+export { runElkLayout } from './elk-layout';
+export type { ElkLayoutOptions, SvgLayout, SvgNode, SvgEdge } from './elk-layout';
+export { layoutToSvg } from './layout-to-svg';
+export type { LayoutToSvgOptions } from './layout-to-svg';

package/dist/index.mjs

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

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

@@ -1,4 +1,4 @@
-import type { SvgLayout } from './elk-layout.js';
+import type { SvgLayout } from './elk-layout';
 export interface LayoutToSvgOptions {
     /** Current active state value (dot-separated full key). */
     value?: string;

package/dist/layout-to-svg.mjs

@@ -1,4 +1,4 @@
-import { buildCurvedPath, pathAtT } from "./svg-path.js";
+import { buildCurvedPath, pathAtT } from "./svg-path.mjs";
 const V = {
   accent: "var(--matchina-viz-accent, #2dd4bf)",
   bg: "var(--matchina-viz-bg, #0a0f17)",

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@matchina/viz-svg",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "SVG-based state machine visualizer for Matchina using ELK layout",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.mjs"
     }
   },
   "files": [

package/src/SvgInspector.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { MachineShape } from 'matchina';
-import { runElkLayout } from './elk-layout.js';
-import type { ElkLayoutOptions, SvgEdge, SvgLayout, SvgNode } from './elk-layout.js';
-import { buildCurvedPath, pathAtT } from './svg-path.js';
+import { runElkLayout } from './elk-layout';
+import type { ElkLayoutOptions, SvgEdge, SvgLayout, SvgNode } from './elk-layout';
+import { buildCurvedPath, pathAtT } from './svg-path';
 
 // CSS variable names with their default values (dark teal theme).
 // Consumers can override any of these on a parent element.

package/src/index.ts

@@ -1,6 +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';
+export { SvgInspector } from './SvgInspector';
+export type { SvgInspectorProps } from './SvgInspector';
+export { runElkLayout } from './elk-layout';
+export type { ElkLayoutOptions, SvgLayout, SvgNode, SvgEdge } from './elk-layout';
+export { layoutToSvg } from './layout-to-svg';
+export type { LayoutToSvgOptions } from './layout-to-svg';

package/src/layout-to-svg.ts

@@ -2,8 +2,8 @@
 // Mirrors the rendering logic of SvgInspector.tsx, but emits a string instead of React elements.
 // Use this for build-time SSR (e.g. from Astro frontmatter) where no React runtime is needed.
 
-import type { SvgLayout, SvgNode, SvgEdge } from './elk-layout.js';
-import { buildCurvedPath, pathAtT } from './svg-path.js';
+import type { SvgLayout, SvgNode, SvgEdge } from './elk-layout';
+import { buildCurvedPath, pathAtT } from './svg-path';
 
 // CSS variable names with their default values (dark teal theme).
 // Match SvgInspector.tsx.

package/dist/SvgInspector.js

@@ -1,586 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = exports.SvgInspector = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _elkLayout = require("./elk-layout.js");
-var _svgPath = require("./svg-path.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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))",
-  ctrlBg: "var(--matchina-viz-ctrl-bg, rgba(20,28,40,0.85))",
-  ctrlBorder: "var(--matchina-viz-ctrl-border, rgba(148,163,184,0.24))",
-  ctrlText: "var(--matchina-viz-ctrl-text, rgba(226,232,240,0.65))"
-};
-function NodeShape({
-  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;
-  return /* @__PURE__ */_react.default.createElement("g", null, /* @__PURE__ */_react.default.createElement("rect", {
-    x: node.x,
-    y: node.y,
-    width: node.width,
-    height: node.height,
-    rx: 10,
-    ry: 10,
-    style: {
-      fill,
-      stroke,
-      strokeWidth,
-      transition: "stroke 280ms ease, fill 280ms ease"
-    }
-  }), node.isCompound ? /* @__PURE__ */_react.default.createElement("text", {
-    x: node.x + 14,
-    y: node.y + 22,
-    style: {
-      fill: isActive || isAncestor ? V.accent : V.text,
-      fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
-      fontSize: 12,
-      fontWeight: 600,
-      letterSpacing: "0.06em",
-      transition: "fill 280ms ease"
-    }
-  }, node.label) : /* @__PURE__ */_react.default.createElement("text", {
-    x: node.x + node.width / 2,
-    y: node.y + node.height / 2 + 5,
-    textAnchor: "middle",
-    style: {
-      fill: textFill,
-      fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
-      fontSize: 14,
-      fontWeight: isActive ? 600 : 500,
-      transition: "fill 280ms ease"
-    }
-  }, node.label), isActive && !node.isCompound && /* @__PURE__ */_react.default.createElement("circle", {
-    cx: node.x + node.width - 10,
-    cy: node.y + 10,
-    r: 4,
-    style: {
-      fill: V.accent
-    }
-  }, /* @__PURE__ */_react.default.createElement("animate", {
-    attributeName: "opacity",
-    values: "1;0.35;1",
-    dur: "1.6s",
-    repeatCount: "indefinite"
-  })));
-}
-function SelfLoopShape({
-  edge,
-  node,
-  isOutgoing,
-  onFire,
-  loopIndex
-}) {
-  const [hovered, setHovered] = (0, _react.useState)(false);
-  const stroke = isOutgoing ? V.accent : V.edge;
-  const strokeWidth = isOutgoing ? hovered ? 2.5 : 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);
-  return /* @__PURE__ */_react.default.createElement("g", {
-    style: {
-      cursor: isOutgoing ? "pointer" : "default"
-    },
-    onClick: isOutgoing ? () => onFire(edge.event) : void 0,
-    onMouseEnter: isOutgoing ? () => setHovered(true) : void 0,
-    onMouseLeave: isOutgoing ? () => setHovered(false) : void 0
-  }, isOutgoing && /* @__PURE__ */_react.default.createElement("path", {
-    d,
-    fill: "none",
-    stroke: "transparent",
-    strokeWidth: 14
-  }), /* @__PURE__ */_react.default.createElement("path", {
-    d,
-    fill: "none",
-    style: {
-      stroke,
-      strokeWidth,
-      opacity,
-      transition: "stroke 220ms ease, opacity 220ms ease"
-    },
-    markerEnd: `url(#${markerId})`
-  }), label && /* @__PURE__ */_react.default.createElement("g", {
-    transform: `translate(${labelX}, ${labelY - label.height / 2})`,
-    style: {
-      opacity,
-      transition: "opacity 220ms ease",
-      cursor: isOutgoing ? "pointer" : "default"
-    },
-    onClick: isOutgoing ? () => onFire(edge.event) : void 0
-  }, /* @__PURE__ */_react.default.createElement("rect", {
-    x: -6,
-    y: -2,
-    width: label.width + 12,
-    height: label.height + 4,
-    rx: 6,
-    ry: 6,
-    style: {
-      fill: isOutgoing ? hovered ? V.accent : V.labelBgActive : V.labelBg,
-      stroke: isOutgoing ? V.accent : "rgba(100,116,139,0.45)",
-      strokeWidth: isOutgoing ? 1 : 0.75,
-      transition: "fill 150ms ease, stroke 150ms ease"
-    }
-  }), /* @__PURE__ */_react.default.createElement("text", {
-    x: label.width / 2,
-    y: (label.height + 4) / 2 + 4,
-    textAnchor: "middle",
-    style: {
-      fill: isOutgoing ? hovered ? V.labelBg : V.accent : V.labelText,
-      fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
-      fontSize: 11,
-      fontWeight: isOutgoing ? 600 : 500,
-      letterSpacing: "0.04em",
-      userSelect: "none",
-      transition: "fill 150ms ease"
-    }
-  }, label.text)));
-}
-function EdgeShape({
-  edge,
-  isOutgoing,
-  onFire,
-  labelT = 0.5
-}) {
-  const [hovered, setHovered] = (0, _react.useState)(false);
-  const section = edge.sections?.[0];
-  if (!section?.startPoint || !section?.endPoint) return null;
-  const d = (0, _svgPath.buildCurvedPath)(section);
-  const stroke = isOutgoing ? V.accent : V.edge;
-  const strokeWidth = isOutgoing ? hovered ? 2.5 : 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;
-  return /* @__PURE__ */_react.default.createElement("g", {
-    style: {
-      cursor: isOutgoing ? "pointer" : "default"
-    },
-    onClick: isOutgoing ? () => onFire(edge.event) : void 0,
-    onMouseEnter: isOutgoing ? () => setHovered(true) : void 0,
-    onMouseLeave: isOutgoing ? () => setHovered(false) : void 0
-  }, isOutgoing && /* @__PURE__ */_react.default.createElement("path", {
-    d,
-    fill: "none",
-    stroke: "transparent",
-    strokeWidth: 18
-  }), /* @__PURE__ */_react.default.createElement("path", {
-    d,
-    fill: "none",
-    style: {
-      stroke,
-      strokeWidth,
-      opacity,
-      transition: "stroke 220ms ease, opacity 220ms ease"
-    },
-    markerEnd: `url(#${markerId})`
-  }), label && mid && /* @__PURE__ */_react.default.createElement("g", {
-    transform: `translate(${mid.x - label.width / 2}, ${mid.y - label.height / 2})`,
-    style: {
-      opacity,
-      transition: "opacity 220ms ease",
-      cursor: isOutgoing ? "pointer" : "default"
-    },
-    onClick: isOutgoing ? () => onFire(edge.event) : void 0
-  }, /* @__PURE__ */_react.default.createElement("rect", {
-    x: -6,
-    y: -2,
-    width: label.width + 12,
-    height: label.height + 4,
-    rx: 6,
-    ry: 6,
-    style: {
-      fill: isOutgoing ? hovered ? V.accent : V.labelBgActive : V.labelBg,
-      stroke: isOutgoing ? V.accent : "rgba(100,116,139,0.45)",
-      strokeWidth: isOutgoing ? 1 : 0.75,
-      transition: "fill 150ms ease, stroke 150ms ease"
-    }
-  }), /* @__PURE__ */_react.default.createElement("text", {
-    x: label.width / 2,
-    y: (label.height + 4) / 2 + 4,
-    textAnchor: "middle",
-    style: {
-      fill: isOutgoing ? hovered ? V.labelBg : V.accent : V.labelText,
-      fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
-      fontSize: 11,
-      fontWeight: isOutgoing ? 600 : 500,
-      letterSpacing: "0.04em",
-      userSelect: "none",
-      transition: "fill 150ms ease"
-    }
-  }, label.text)));
-}
-const ctrlBtn = {
-  background: "transparent",
-  border: "none",
-  color: V.ctrlText,
-  // 44×44 meets a11y touch-target minimum on coarse pointers; on fine pointers
-  // (mouse) the visual hit area is still adequate. Keeps the corner control
-  // stack compact while remaining tappable on mobile.
-  width: 44,
-  height: 44,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
-  fontSize: 14,
-  lineHeight: 1,
-  cursor: "pointer",
-  padding: 0
-};
-const MAX_FIT_ZOOM = 1;
-function computeFit(contentW, contentH, containerW, containerH) {
-  const scaleX = containerW / contentW;
-  const scaleY = containerH / contentH;
-  const zoom = Math.min(scaleX, scaleY, MAX_FIT_ZOOM);
-  const pan = {
-    x: (containerW - contentW * zoom) / 2,
-    y: (containerH - contentH * zoom) / 2
-  };
-  return {
-    zoom,
-    pan
-  };
-}
-const SvgInspector = exports.SvgInspector = _react.default.memo(function SvgInspector2({
-  shape,
-  value,
-  onFire,
-  options,
-  interactive = true,
-  precomputedLayout
-}) {
-  const [layout, setLayout] = (0, _react.useState)(precomputedLayout ?? null);
-  const [pan, setPan] = (0, _react.useState)({
-    x: 20,
-    y: 20
-  });
-  const [zoom, setZoom] = (0, _react.useState)(1);
-  const [interacted, setInteracted] = (0, _react.useState)(false);
-  const dragRef = (0, _react.useRef)({
-    active: false,
-    sx: 0,
-    sy: 0,
-    px: 0,
-    py: 0
-  });
-  const containerRef = (0, _react.useRef)(null);
-  const optionsKey = JSON.stringify(options ?? {});
-  const initialOptionsKey = (0, _react.useRef)(optionsKey);
-  const initialShapeRef = (0, _react.useRef)(shape);
-  (0, _react.useEffect)(() => {
-    if (precomputedLayout && shape === initialShapeRef.current && optionsKey === initialOptionsKey.current) {
-      return;
-    }
-    (0, _elkLayout.runElkLayout)(shape, options ?? {}).then(l => {
-      setLayout(l);
-      if (interacted) fitToContainer(l);
-    }).catch(console.error);
-  }, [shape, optionsKey]);
-  function fitToContainer(l) {
-    const el = containerRef.current;
-    if (!el) return;
-    const {
-      zoom: z,
-      pan: p
-    } = computeFit(l.width, l.height, el.clientWidth, el.clientHeight);
-    setZoom(z);
-    setPan(p);
-  }
-  function leaveViewBoxMode(l) {
-    const el = containerRef.current;
-    if (!el) {
-      setInteracted(true);
-      return;
-    }
-    const scaleX = el.clientWidth / l.width;
-    const scaleY = el.clientHeight / l.height;
-    const z = Math.min(scaleX, scaleY, MAX_FIT_ZOOM);
-    const p = {
-      x: (el.clientWidth - l.width * z) / 2,
-      y: (el.clientHeight - l.height * z) / 2
-    };
-    setZoom(z);
-    setPan(p);
-    setInteracted(true);
-  }
-  const activePath = (0, _react.useMemo)(() => value ? value.split(".") : [], [value]);
-  const activeLeafId = value;
-  const activeAncestorIds = (0, _react.useMemo)(() => {
-    const set = /* @__PURE__ */new Set();
-    for (let i = 0; i < activePath.length - 1; i++) {
-      set.add(activePath.slice(0, i + 1).join("."));
-    }
-    return set;
-  }, [activePath]);
-  const activeSourceIds = (0, _react.useMemo)(() => {
-    const set = /* @__PURE__ */new Set();
-    for (let i = 1; i <= activePath.length; i++) {
-      set.add(activePath.slice(0, i).join("."));
-    }
-    return set;
-  }, [activePath]);
-  function handleFire(event) {
-    if (interactive) onFire?.(event);
-  }
-  function onWheel(e) {
-    e.preventDefault();
-    if (!interacted && layout) leaveViewBoxMode(layout);
-    setZoom(z => Math.min(2.5, Math.max(0.3, z * (e.deltaY > 0 ? 0.92 : 1.08))));
-  }
-  function onMouseDown(e) {
-    if (e.button !== 0) return;
-    if (!interacted && layout) leaveViewBoxMode(layout);
-    dragRef.current = {
-      active: true,
-      sx: e.clientX,
-      sy: e.clientY,
-      px: pan.x,
-      py: pan.y
-    };
-  }
-  function onMouseMove(e) {
-    if (!dragRef.current.active) return;
-    setPan({
-      x: dragRef.current.px + e.clientX - dragRef.current.sx,
-      y: dragRef.current.py + e.clientY - dragRef.current.sy
-    });
-  }
-  function onMouseUp() {
-    dragRef.current.active = false;
-  }
-  const edgeLabelT = (0, _react.useMemo)(() => {
-    const allEdges = layout?.edges ?? [];
-    const pairNextIdx = /* @__PURE__ */new Map();
-    const pairTotal = /* @__PURE__ */new Map();
-    for (const edge of allEdges) {
-      const key = `${edge.sourcePath.join(".")}\u2192${edge.targetPath.join(".")}`;
-      pairTotal.set(key, (pairTotal.get(key) ?? 0) + 1);
-    }
-    const result = /* @__PURE__ */new Map();
-    for (const edge of allEdges) {
-      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;
-      result.set(edge.id, t);
-    }
-    return result;
-  }, [layout]);
-  if (!layout) {
-    return /* @__PURE__ */_react.default.createElement("div", {
-      style: {
-        width: "100%",
-        height: "100%",
-        background: V.bg,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    }, /* @__PURE__ */_react.default.createElement("span", {
-      style: {
-        color: V.edge,
-        fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
-        fontSize: 12
-      }
-    }, "computing layout\u2026"));
-  }
-  const {
-    nodes,
-    edges,
-    width,
-    height
-  } = layout;
-  const compounds = nodes.filter(n => n.isCompound);
-  const leaves = nodes.filter(n => !n.isCompound);
-  return /* @__PURE__ */_react.default.createElement("div", {
-    ref: containerRef,
-    style: {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      cursor: "grab",
-      background: V.bg,
-      backgroundImage: `radial-gradient(ellipse 80% 60% at 70% 0%, color-mix(in srgb, ${V.accent} 5%, transparent), transparent 60%)`,
-      // Pre-interaction we let the SVG act as a flex item so its maxWidth/maxHeight
-      // (set to content dimensions) caps it at 1x and centers it. Post-interaction
-      // the inner <g transform> controls placement, so we revert to block layout.
-      ...(!interacted && {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      })
-    },
-    onWheel,
-    onMouseDown,
-    onMouseMove,
-    onMouseUp,
-    onMouseLeave: onMouseUp
-  }, /* @__PURE__ */_react.default.createElement("svg", {
-    ...(interacted && {
-      width: "100%",
-      height: "100%"
-    }),
-    style: {
-      display: "block",
-      // Pre-interaction: cap intrinsic size at the content's natural dimensions so
-      // small diagrams sit at 1x (centered by the parent flex container) instead of
-      // ballooning to fill via viewBox. Larger diagrams still shrink to fit via the
-      // viewBox + `meet` because we still allow width/height to expand to 100%.
-      ...(!interacted && {
-        width: "100%",
-        height: "100%",
-        maxWidth: width,
-        maxHeight: height
-      })
-    },
-    ...(!interacted && {
-      viewBox: `0 0 ${width} ${height}`,
-      preserveAspectRatio: "xMidYMid meet"
-    })
-  }, /* @__PURE__ */_react.default.createElement("defs", null, /* @__PURE__ */_react.default.createElement("marker", {
-    id: "matchina-svg-arrow",
-    viewBox: "0 0 10 10",
-    refX: "9",
-    refY: "5",
-    markerWidth: "7",
-    markerHeight: "7",
-    orient: "auto-start-reverse"
-  }, /* @__PURE__ */_react.default.createElement("path", {
-    d: "M 0 0 L 10 5 L 0 10 z",
-    style: {
-      fill: "rgba(100,116,139,0.7)"
-    }
-  })), /* @__PURE__ */_react.default.createElement("marker", {
-    id: "matchina-svg-arrow-active",
-    viewBox: "0 0 10 10",
-    refX: "9",
-    refY: "5",
-    markerWidth: "7",
-    markerHeight: "7",
-    orient: "auto-start-reverse"
-  }, /* @__PURE__ */_react.default.createElement("path", {
-    d: "M 0 0 L 10 5 L 0 10 z",
-    style: {
-      fill: V.accent
-    }
-  }))), /* @__PURE__ */_react.default.createElement("g", {
-    transform: interacted ? `translate(${pan.x}, ${pan.y}) scale(${zoom})` : void 0
-  }, compounds.map(node => /* @__PURE__ */_react.default.createElement(NodeShape, {
-    key: node.id,
-    node,
-    isActive: node.id === activeLeafId,
-    isAncestor: activeAncestorIds.has(node.id)
-  })), (() => {
-    const nodeById = new Map(nodes.map(n => [n.id, n]));
-    const selfLoopIndexByNode = /* @__PURE__ */new Map();
-    return 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 null;
-        const loopIndex = selfLoopIndexByNode.get(nodeId) ?? 0;
-        selfLoopIndexByNode.set(nodeId, loopIndex + 1);
-        return /* @__PURE__ */_react.default.createElement(SelfLoopShape, {
-          key: edge.id,
-          edge,
-          node,
-          isOutgoing,
-          onFire: handleFire,
-          loopIndex
-        });
-      }
-      return /* @__PURE__ */_react.default.createElement(EdgeShape, {
-        key: edge.id,
-        edge,
-        isOutgoing,
-        onFire: handleFire,
-        labelT: edgeLabelT.get(edge.id) ?? 0.5
-      });
-    });
-  })(), leaves.map(node => /* @__PURE__ */_react.default.createElement(NodeShape, {
-    key: node.id,
-    node,
-    isActive: node.id === activeLeafId,
-    isAncestor: activeAncestorIds.has(node.id)
-  })))), /* @__PURE__ */_react.default.createElement("div", {
-    style: {
-      position: "absolute",
-      bottom: 14,
-      right: 14,
-      display: "flex",
-      flexDirection: "column",
-      background: V.ctrlBg,
-      border: `1px solid ${V.ctrlBorder}`,
-      borderRadius: "var(--matchina-viz-radius, 2px)",
-      overflow: "hidden"
-    }
-  }, /* @__PURE__ */_react.default.createElement("button", {
-    "aria-label": "Zoom in",
-    title: "Zoom in",
-    onClick: () => {
-      if (!interacted && layout) leaveViewBoxMode(layout);
-      setZoom(z => Math.min(2.5, z * 1.15));
-    },
-    style: ctrlBtn
-  }, "+"), /* @__PURE__ */_react.default.createElement("button", {
-    "aria-label": "Zoom out",
-    title: "Zoom out",
-    onClick: () => {
-      if (!interacted && layout) leaveViewBoxMode(layout);
-      setZoom(z => Math.max(0.3, z * 0.87));
-    },
-    style: {
-      ...ctrlBtn,
-      borderTop: `1px solid ${V.ctrlBorder}`
-    }
-  }, "\u2212"), /* @__PURE__ */_react.default.createElement("button", {
-    "aria-label": "Fit view",
-    title: "Fit view",
-    onClick: () => layout && leaveViewBoxMode(layout),
-    style: {
-      ...ctrlBtn,
-      borderTop: `1px solid ${V.ctrlBorder}`
-    }
-  }, "\u26F6")));
-});
-module.exports = SvgInspector;

package/dist/elk-layout.js

@@ -1,210 +0,0 @@
-"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/index.js

@@ -1,26 +0,0 @@
-"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/layout-to-svg.js

@@ -1,148 +0,0 @@
-"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>`;
-}

package/dist/svg-path.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buildCurvedPath = buildCurvedPath;
-exports.pathAtT = pathAtT;
-exports.pathMidpoint = pathMidpoint;
-function pathAtT(section, t) {
-  const pts = [section.startPoint, ...(section.bendPoints ?? []), section.endPoint];
-  const lengths = [];
-  let total = 0;
-  for (let i = 1; i < pts.length; i++) {
-    const l = Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
-    lengths.push(l);
-    total += l;
-  }
-  let remaining = total * Math.max(0, Math.min(1, t));
-  for (let i = 0; i < lengths.length; i++) {
-    if (remaining <= lengths[i]) {
-      const s = remaining / lengths[i];
-      return {
-        x: pts[i].x + s * (pts[i + 1].x - pts[i].x),
-        y: pts[i].y + s * (pts[i + 1].y - pts[i].y)
-      };
-    }
-    remaining -= lengths[i];
-  }
-  return pts[pts.length - 1];
-}
-function pathMidpoint(section) {
-  return pathAtT(section, 0.5);
-}
-function buildCurvedPath(section, radius = 14) {
-  const pts = [section.startPoint, ...(section.bendPoints ?? []), section.endPoint];
-  if (pts.length <= 2) {
-    return `M ${pts[0].x} ${pts[0].y} L ${pts[pts.length - 1].x} ${pts[pts.length - 1].y}`;
-  }
-  let d = `M ${pts[0].x} ${pts[0].y}`;
-  for (let i = 1; i < pts.length - 1; i++) {
-    const prev = pts[i - 1];
-    const cur = pts[i];
-    const next = pts[i + 1];
-    const v1x = cur.x - prev.x;
-    const v1y = cur.y - prev.y;
-    const v2x = next.x - cur.x;
-    const v2y = next.y - cur.y;
-    const len1 = Math.hypot(v1x, v1y) || 1;
-    const len2 = Math.hypot(v2x, v2y) || 1;
-    const r = Math.min(radius, len1 / 2, len2 / 2);
-    const p1 = {
-      x: cur.x - v1x / len1 * r,
-      y: cur.y - v1y / len1 * r
-    };
-    const p2 = {
-      x: cur.x + v2x / len2 * r,
-      y: cur.y + v2y / len2 * r
-    };
-    d += ` L ${p1.x} ${p1.y} Q ${cur.x} ${cur.y} ${p2.x} ${p2.y}`;
-  }
-  const last = pts[pts.length - 1];
-  d += ` L ${last.x} ${last.y}`;
-  return d;
-}