@matchina/viz-svg 0.1.0-alpha.1

package/dist/SvgInspector.mjs

@@ -0,0 +1,522 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { runElkLayout } from "./elk-layout.js";
+import { buildCurvedPath, pathAtT } from "./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))",
+  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.createElement("g", null, /* @__PURE__ */ React.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.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.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.createElement("circle", { cx: node.x + node.width - 10, cy: node.y + 10, r: 4, style: { fill: V.accent } }, /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", values: "1;0.35;1", dur: "1.6s", repeatCount: "indefinite" })));
+}
+function SelfLoopShape({ edge, node, isOutgoing, onFire, loopIndex }) {
+  const [hovered, setHovered] = 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.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.createElement("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14 }),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d,
+        fill: "none",
+        style: { stroke, strokeWidth, opacity, transition: "stroke 220ms ease, opacity 220ms ease" },
+        markerEnd: `url(#${markerId})`
+      }
+    ),
+    label && /* @__PURE__ */ React.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.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.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] = useState(false);
+  const section = edge.sections?.[0];
+  if (!section?.startPoint || !section?.endPoint) return null;
+  const d = 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 ? pathAtT(section, labelT) : null;
+  return /* @__PURE__ */ React.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.createElement("path", { d, fill: "none", stroke: "transparent", strokeWidth: 18 }),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d,
+        fill: "none",
+        style: {
+          stroke,
+          strokeWidth,
+          opacity,
+          transition: "stroke 220ms ease, opacity 220ms ease"
+        },
+        markerEnd: `url(#${markerId})`
+      }
+    ),
+    label && mid && /* @__PURE__ */ React.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.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.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 };
+}
+export const SvgInspector = React.memo(function SvgInspector2({
+  shape,
+  value,
+  onFire,
+  options,
+  interactive = true,
+  precomputedLayout
+}) {
+  const [layout, setLayout] = useState(precomputedLayout ?? null);
+  const [pan, setPan] = useState({ x: 20, y: 20 });
+  const [zoom, setZoom] = useState(1);
+  const [interacted, setInteracted] = useState(false);
+  const dragRef = useRef({ active: false, sx: 0, sy: 0, px: 0, py: 0 });
+  const containerRef = useRef(null);
+  const optionsKey = JSON.stringify(options ?? {});
+  const initialOptionsKey = useRef(optionsKey);
+  const initialShapeRef = useRef(shape);
+  useEffect(() => {
+    if (precomputedLayout && shape === initialShapeRef.current && optionsKey === initialOptionsKey.current) {
+      return;
+    }
+    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 = useMemo(() => value ? value.split(".") : [], [value]);
+  const activeLeafId = value;
+  const activeAncestorIds = 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 = 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 = 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.createElement("div", { style: { width: "100%", height: "100%", background: V.bg, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.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.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.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.createElement("defs", null, /* @__PURE__ */ React.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.createElement("path", { d: "M 0 0 L 10 5 L 0 10 z", style: { fill: "rgba(100,116,139,0.7)" } })), /* @__PURE__ */ React.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.createElement("path", { d: "M 0 0 L 10 5 L 0 10 z", style: { fill: V.accent } }))),
+      /* @__PURE__ */ React.createElement("g", { transform: interacted ? `translate(${pan.x}, ${pan.y}) scale(${zoom})` : void 0 }, compounds.map((node) => /* @__PURE__ */ React.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.createElement(
+              SelfLoopShape,
+              {
+                key: edge.id,
+                edge,
+                node,
+                isOutgoing,
+                onFire: handleFire,
+                loopIndex
+              }
+            );
+          }
+          return /* @__PURE__ */ React.createElement(
+            EdgeShape,
+            {
+              key: edge.id,
+              edge,
+              isOutgoing,
+              onFire: handleFire,
+              labelT: edgeLabelT.get(edge.id) ?? 0.5
+            }
+          );
+        });
+      })(), leaves.map((node) => /* @__PURE__ */ React.createElement(
+        NodeShape,
+        {
+          key: node.id,
+          node,
+          isActive: node.id === activeLeafId,
+          isAncestor: activeAncestorIds.has(node.id)
+        }
+      )))
+    ),
+    /* @__PURE__ */ React.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.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.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.createElement(
+      "button",
+      {
+        "aria-label": "Fit view",
+        title: "Fit view",
+        onClick: () => layout && leaveViewBoxMode(layout),
+        style: { ...ctrlBtn, borderTop: `1px solid ${V.ctrlBorder}` }
+      },
+      "\u26F6"
+    ))
+  );
+});
+export default SvgInspector;

package/dist/elk-layout.d.ts

@@ -0,0 +1,51 @@
+import type { MachineShape } from 'matchina';
+export interface SvgNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label: string;
+    isCompound: boolean;
+    path: string[];
+}
+export interface SvgEdge {
+    id: string;
+    event: string;
+    sourcePath: string[];
+    targetPath: string[];
+    sections: {
+        startPoint: {
+            x: number;
+            y: number;
+        };
+        endPoint: {
+            x: number;
+            y: number;
+        };
+        bendPoints?: {
+            x: number;
+            y: number;
+        }[];
+    }[];
+    label: {
+        text: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export interface SvgLayout {
+    nodes: SvgNode[];
+    edges: SvgEdge[];
+    width: number;
+    height: number;
+}
+export interface ElkLayoutOptions {
+    direction?: 'RIGHT' | 'DOWN';
+    edgeRouting?: 'ORTHOGONAL' | 'POLYLINE';
+    nodeSpacing?: number;
+    layerSpacing?: number;
+}
+export declare function runElkLayout(shape: MachineShape, opts?: ElkLayoutOptions): Promise<SvgLayout>;