@cyoda/workflow-viewer 0.1.0

package/dist/index.js

@@ -0,0 +1,913 @@
+// src/components/WorkflowViewer.tsx
+import { useMemo, useState as useState2 } from "react";
+
+// src/theme/tokens.ts
+var workflowPalette = {
+  neutrals: {
+    white: "#FFFFFF",
+    white95: "#FFFFFFF2",
+    white75: "#FFFFFFBF",
+    slate200: "#E2E8F0",
+    slate300: "#CBD5E1",
+    slate500: "#64748B",
+    slate600: "#475569",
+    slate900: "#0F172A"
+  },
+  node: {
+    default: {
+      fill: "#F0FDFA",
+      border: "#2DD4BF",
+      meta: "#0F766E",
+      title: "#0F172A"
+    },
+    initial: {
+      fill: "#D1FAE5",
+      border: "#059669",
+      meta: "#047857",
+      title: "#022C22"
+    },
+    terminal: {
+      fill: "#FFF1F2",
+      border: "#FDA4AF",
+      meta: "#BE123C",
+      title: "#4C0519",
+      innerRing: "#FFFFFFBF"
+    },
+    manualReview: {
+      fill: "#F5F3FF",
+      border: "#C4B5FD",
+      meta: "#6D28D9",
+      title: "#2E1065"
+    },
+    processing: {
+      fill: "#F0F9FF",
+      border: "#7DD3FC",
+      meta: "#0369A1",
+      title: "#082F49"
+    }
+  },
+  edge: {
+    automated: "#64748B",
+    manual: "#8B5CF6",
+    conditional: "#F59E0B",
+    processing: "#0EA5E9",
+    terminal: "#FB7185",
+    loop: "#14B8A6",
+    disabled: "#CBD5E1",
+    arrowhead: "#64748B"
+  },
+  edgeLabel: {
+    fill: "#FFFFFFF2",
+    border: "#E2E8F0",
+    text: "#475569"
+  },
+  badge: {
+    manual: { fill: "#F5F3FF", border: "#DDD6FE" },
+    processor: { fill: "#F0F9FF", border: "#BAE6FD" },
+    criterion: { fill: "#FFFBEB", border: "#FDE68A" },
+    disabled: { fill: "#F8FAFC", border: "#E2E8F0" },
+    text: "#475569"
+  }
+};
+var typography = {
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif',
+  monoFamily: 'ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace',
+  stateCategory: { size: 10, weight: 700, tracking: "0.12em" },
+  stateTitle: { size: 14, weight: 700, tracking: "0.01em" },
+  edgeLabel: { size: 9, weight: 700, tracking: "0.04em" },
+  badge: { size: 8, weight: 600, tracking: "0.04em" }
+};
+var geometry = {
+  node: {
+    width: 144,
+    height: 72,
+    radius: 8,
+    strokeWidth: 1.5,
+    terminalInset: 3,
+    terminalInnerRadius: 6
+  },
+  edge: {
+    strokeWidth: 1.8,
+    loopStrokeWidth: 1.6,
+    arrowheadSize: 6
+  },
+  labelPill: {
+    paddingX: 6,
+    paddingY: 3,
+    radius: 6,
+    shadowOpacity: 0.08
+  }
+};
+
+// src/layout.ts
+function simpleLayout(graph) {
+  const { width: nodeW, height: nodeH } = geometry.node;
+  const hGap = 48;
+  const vGap = 48;
+  const positions = /* @__PURE__ */ new Map();
+  const nodesByWorkflow = groupByWorkflow(graph.nodes);
+  let yCursor = 24;
+  let maxWidth = 0;
+  for (const wfNodes of nodesByWorkflow.values()) {
+    const layers = layerByBFS(wfNodes, graph);
+    let y = yCursor;
+    for (const layer of layers) {
+      const layerWidth = layer.length * nodeW + (layer.length - 1) * hGap;
+      maxWidth = Math.max(maxWidth, layerWidth + 48);
+      let x = Math.max(24, (maxWidth - layerWidth) / 2);
+      for (const node of layer) {
+        positions.set(node.id, { id: node.id, x, y, width: nodeW, height: nodeH });
+        x += nodeW + hGap;
+      }
+      y += nodeH + vGap;
+    }
+    yCursor = y + vGap;
+  }
+  return { positions, width: maxWidth + 24, height: yCursor };
+}
+function groupByWorkflow(nodes) {
+  const out = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const wf = "workflow" in n ? n.workflow : "";
+    const list = out.get(wf) ?? [];
+    list.push(n);
+    out.set(wf, list);
+  }
+  return out;
+}
+function layerByBFS(nodes, graph) {
+  const stateNodes = nodes.filter((n) => n.kind === "state");
+  const markers = nodes.filter((n) => n.kind === "startMarker");
+  if (stateNodes.length === 0) return markers.length > 0 ? [markers] : [];
+  const adj = /* @__PURE__ */ new Map();
+  const indeg = /* @__PURE__ */ new Map();
+  for (const n of stateNodes) {
+    adj.set(n.id, /* @__PURE__ */ new Set());
+    indeg.set(n.id, 0);
+  }
+  for (const e of graph.edges) {
+    if (e.kind !== "transition" || e.isLoopback) continue;
+    if (!adj.has(e.sourceId) || !adj.has(e.targetId)) continue;
+    const set = adj.get(e.sourceId);
+    if (!set.has(e.targetId)) {
+      set.add(e.targetId);
+      indeg.set(e.targetId, (indeg.get(e.targetId) ?? 0) + 1);
+    }
+  }
+  const layers = [];
+  if (markers.length > 0) layers.push(markers);
+  const byId = new Map(stateNodes.map((n) => [n.id, n]));
+  let frontier = stateNodes.filter((n) => (indeg.get(n.id) ?? 0) === 0);
+  const placed = /* @__PURE__ */ new Set();
+  while (frontier.length > 0) {
+    layers.push(frontier);
+    const next = [];
+    for (const n of frontier) {
+      placed.add(n.id);
+      for (const succ of adj.get(n.id) ?? []) {
+        const remaining2 = (indeg.get(succ) ?? 0) - 1;
+        indeg.set(succ, remaining2);
+        if (remaining2 === 0 && !placed.has(succ)) {
+          const node = byId.get(succ);
+          if (node) next.push(node);
+        }
+      }
+    }
+    frontier = next;
+  }
+  const remaining = stateNodes.filter((n) => !placed.has(n.id));
+  if (remaining.length > 0) layers.push(remaining);
+  return layers;
+}
+
+// src/hooks/usePanZoom.ts
+import { useCallback, useRef, useState } from "react";
+var MIN_SCALE = 0.25;
+var MAX_SCALE = 4;
+var ZOOM_STEP = 1.1;
+function usePanZoom(initial) {
+  const [transform, setTransform] = useState({
+    x: initial?.x ?? 0,
+    y: initial?.y ?? 0,
+    scale: initial?.scale ?? 1
+  });
+  const dragStart = useRef(null);
+  const onWheel = useCallback((e) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? 1 / ZOOM_STEP : ZOOM_STEP;
+    setTransform((t) => {
+      const nextScale = clamp(t.scale * delta, MIN_SCALE, MAX_SCALE);
+      const ratio = nextScale / t.scale;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const px = e.clientX - rect.left;
+      const py = e.clientY - rect.top;
+      return {
+        scale: nextScale,
+        x: px - (px - t.x) * ratio,
+        y: py - (py - t.y) * ratio
+      };
+    });
+  }, []);
+  const onMouseDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    dragStart.current = { x: e.clientX, y: e.clientY, vx: transform.x, vy: transform.y };
+  }, [transform.x, transform.y]);
+  const onMouseMove = useCallback((e) => {
+    if (!dragStart.current) return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    setTransform((t) => ({ ...t, x: dragStart.current.vx + dx, y: dragStart.current.vy + dy }));
+  }, []);
+  const onMouseUp = useCallback(() => {
+    dragStart.current = null;
+  }, []);
+  const reset = useCallback(() => {
+    setTransform({ x: 0, y: 0, scale: 1 });
+  }, []);
+  return { transform, onWheel, onMouseDown, onMouseMove, onMouseUp, reset, setTransform };
+}
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+
+// src/theme/lane.ts
+function laneColor(edge, opts) {
+  const e = workflowPalette.edge;
+  if (edge.disabled) return e.disabled;
+  if (edge.isLoopback) return e.loop;
+  if (opts.targetIsTerminal) return e.terminal;
+  if (edge.summary.processor && edge.summary.processor.kind !== "none") {
+    return e.processing;
+  }
+  if (edge.manual) return e.manual;
+  if (edge.summary.criterion) return e.conditional;
+  return e.automated;
+}
+function laneDashArray(edge) {
+  if (edge.disabled) return "3 2";
+  if (edge.isLoopback) return "6 4";
+  return void 0;
+}
+
+// src/components/EdgePath.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function polylineToPath(points) {
+  if (points.length === 0) return "";
+  const [first, ...rest] = points;
+  let d = `M ${first.x} ${first.y}`;
+  for (const p of rest) d += ` L ${p.x} ${p.y}`;
+  return d;
+}
+function computeEdgeGeometry(edge, source, target) {
+  const sx = source.x + source.width / 2;
+  const sy = source.y + source.height / 2;
+  const tx = target.x + target.width / 2;
+  const ty = target.y + target.height / 2;
+  if (edge.isSelf) {
+    const rightX = source.x + source.width;
+    const topY = source.y + source.height / 3;
+    const bottomY = source.y + source.height * 2 / 3;
+    const loopX = rightX + 28;
+    const d2 = `M ${rightX} ${topY} C ${loopX} ${topY}, ${loopX} ${bottomY}, ${rightX} ${bottomY}`;
+    return { d: d2, midX: loopX, midY: (topY + bottomY) / 2 };
+  }
+  const offsetStep = 18;
+  const half = Math.floor(edge.parallelGroupSize / 2);
+  const signed = edge.parallelIndex - half;
+  const offset = signed * offsetStep;
+  const mx = (sx + tx) / 2 + offset;
+  const my = (sy + ty) / 2;
+  const d = `M ${sx} ${sy} Q ${mx} ${my}, ${tx} ${ty}`;
+  return { d, midX: mx, midY: my };
+}
+function EdgePath({
+  edge,
+  source,
+  target,
+  route,
+  targetIsTerminal,
+  highlighted,
+  dimmed,
+  selected,
+  onSelect,
+  onHoverEnter,
+  onHoverLeave
+}) {
+  const color = laneColor(edge, { targetIsTerminal });
+  const dash = laneDashArray(edge);
+  const d = route && route.points.length >= 2 ? polylineToPath(route.points) : computeEdgeGeometry(edge, source, target).d;
+  const strokeWidth = selected || highlighted ? geometry.edge.strokeWidth + 0.8 : edge.isLoopback ? geometry.edge.loopStrokeWidth : geometry.edge.strokeWidth;
+  const opacity = dimmed ? 0.25 : 1;
+  const isManualSolid = edge.manual && !edge.disabled && !edge.isLoopback;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      opacity,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect(edge.id);
+      },
+      onMouseEnter: () => onHoverEnter(edge.id),
+      onMouseLeave: onHoverLeave,
+      style: { cursor: "pointer" },
+      "data-testid": `edge-${edge.id}`,
+      children: [
+        /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: "transparent", strokeWidth: 12 }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeDasharray: dash,
+            markerEnd: `url(#wf-arrow-${colorKey(color)})`
+          }
+        ),
+        isManualSolid && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: workflowPalette.neutrals.white,
+            strokeWidth: 0.6,
+            pointerEvents: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+function colorKey(color) {
+  return color.replace("#", "").toLowerCase();
+}
+var laneColorSet = Object.values(workflowPalette.edge);
+
+// src/components/Defs.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Defs() {
+  const size = geometry.edge.arrowheadSize;
+  const unique = Array.from(new Set(laneColorSet));
+  return /* @__PURE__ */ jsxs2("defs", { children: [
+    unique.map((color) => /* @__PURE__ */ jsx2(
+      "marker",
+      {
+        id: `wf-arrow-${colorKey(color)}`,
+        viewBox: `0 0 ${size * 2} ${size * 2}`,
+        refX: size * 1.85,
+        refY: size,
+        markerWidth: size,
+        markerHeight: size,
+        orient: "auto-start-reverse",
+        children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: `M 0 ${size / 2} L ${size * 2} ${size} L 0 ${size * 1.5} z`,
+            fill: color
+          }
+        )
+      },
+      color
+    )),
+    /* @__PURE__ */ jsx2("filter", { id: "wf-node-shadow", x: "-10%", y: "-10%", width: "120%", height: "140%", children: /* @__PURE__ */ jsx2(
+      "feDropShadow",
+      {
+        dx: 0,
+        dy: 2,
+        stdDeviation: 2,
+        floodColor: workflowPalette.neutrals.slate900,
+        floodOpacity: 0.08
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(
+      "filter",
+      {
+        id: "wf-node-shadow-strong",
+        x: "-10%",
+        y: "-10%",
+        width: "120%",
+        height: "140%",
+        children: /* @__PURE__ */ jsx2(
+          "feDropShadow",
+          {
+            dx: 0,
+            dy: 3,
+            stdDeviation: 3,
+            floodColor: workflowPalette.neutrals.slate900,
+            floodOpacity: 0.18
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2("filter", { id: "wf-label-shadow", x: "-10%", y: "-10%", width: "120%", height: "140%", children: /* @__PURE__ */ jsx2(
+      "feDropShadow",
+      {
+        dx: 0,
+        dy: 1,
+        stdDeviation: 1.2,
+        floodColor: workflowPalette.neutrals.slate900,
+        floodOpacity: geometry.labelPill.shadowOpacity
+      }
+    ) })
+  ] });
+}
+
+// src/components/StartMarker.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StartMarker({ position }) {
+  const cx = position.x + position.width / 2;
+  const cy = position.y + position.height / 2;
+  const r = Math.min(position.width, position.height) / 3;
+  return /* @__PURE__ */ jsx3("g", { "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+    "circle",
+    {
+      cx,
+      cy,
+      r,
+      fill: workflowPalette.node.initial.border,
+      stroke: workflowPalette.node.initial.meta,
+      strokeWidth: 1.5
+    }
+  ) });
+}
+
+// src/theme/role-label.ts
+function roleCategoryLabel(node) {
+  if (node.role === "initial" || node.role === "initial-terminal") return "INITIAL";
+  if (node.role === "terminal") return "TERMINAL";
+  if (node.category === "MANUAL_REVIEW") return "MANUAL REVIEW";
+  if (node.category === "PROCESSING_STATE") return "PROCESSING STATE";
+  return "STATE";
+}
+
+// src/theme/node-palette.ts
+function paletteFor(node) {
+  const p = workflowPalette.node;
+  if (node.role === "terminal" || node.role === "initial-terminal") return p.terminal;
+  if (node.role === "initial") return p.initial;
+  if (node.category === "MANUAL_REVIEW") return p.manualReview;
+  if (node.category === "PROCESSING_STATE") return p.processing;
+  return p.default;
+}
+
+// src/theme/badges.ts
+function badgesFor(summary, flags) {
+  const out = [];
+  if (flags.manual) out.push({ key: "manual", label: "Manual" });
+  if (summary.processor) {
+    if (summary.processor.kind === "single") {
+      out.push({ key: "processor", label: summary.processor.name });
+    } else if (summary.processor.kind === "multiple") {
+      out.push({ key: "processor", label: `${summary.processor.count} processors` });
+    }
+  }
+  if (summary.criterion) {
+    const c = summary.criterion;
+    if (c.kind === "group") {
+      out.push({ key: "criterion", label: `${c.operator} \xB7 ${c.count}` });
+    } else {
+      out.push({ key: "criterion", label: "Criterion" });
+    }
+  }
+  if (summary.execution?.kind === "sync") {
+    out.push({ key: "execution", label: "SYNC" });
+  } else if (summary.execution?.kind === "asyncSameTx") {
+    out.push({ key: "execution", label: "ASYNC_SAME_TX" });
+  }
+  if (flags.disabled) out.push({ key: "disabled", label: "Disabled" });
+  return out;
+}
+
+// src/components/StateNode.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function StateNodeView({
+  node,
+  position,
+  selected,
+  highlighted,
+  dimmed,
+  onSelect,
+  onHoverEnter,
+  onHoverLeave
+}) {
+  const palette = paletteFor(node);
+  const { radius, strokeWidth, terminalInset, terminalInnerRadius } = geometry.node;
+  const { width, height } = position;
+  const isTerminal = node.role === "terminal" || node.role === "initial-terminal";
+  const isInitialTerminal = node.role === "initial-terminal";
+  const category = roleCategoryLabel(node);
+  const opacity = dimmed ? 0.35 : 1;
+  const outerStroke = selected ? workflowPalette.neutrals.slate900 : palette.border;
+  const outerStrokeWidth = selected ? strokeWidth + 1 : strokeWidth;
+  return /* @__PURE__ */ jsxs3(
+    "g",
+    {
+      transform: `translate(${position.x}, ${position.y})`,
+      opacity,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect(node.id);
+      },
+      onMouseEnter: () => onHoverEnter(node.id),
+      onMouseLeave: onHoverLeave,
+      style: { cursor: "pointer" },
+      "data-testid": `state-node-${node.stateCode}`,
+      "aria-label": `${category} ${node.stateCode}`,
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx4(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width,
+            height,
+            rx: radius,
+            ry: radius,
+            fill: palette.fill,
+            stroke: outerStroke,
+            strokeWidth: outerStrokeWidth,
+            filter: highlighted || selected ? "url(#wf-node-shadow-strong)" : "url(#wf-node-shadow)"
+          }
+        ),
+        isTerminal && /* @__PURE__ */ jsx4(
+          "rect",
+          {
+            x: terminalInset,
+            y: terminalInset,
+            width: width - terminalInset * 2,
+            height: height - terminalInset * 2,
+            rx: terminalInnerRadius,
+            ry: terminalInnerRadius,
+            fill: "none",
+            stroke: "innerRing" in palette ? palette.innerRing : workflowPalette.neutrals.white75,
+            strokeWidth: 1
+          }
+        ),
+        isInitialTerminal && /* @__PURE__ */ jsx4(
+          "rect",
+          {
+            x: terminalInset,
+            y: terminalInset,
+            width: width - terminalInset * 2,
+            height: height - terminalInset * 2,
+            rx: terminalInnerRadius,
+            ry: terminalInnerRadius,
+            fill: "none",
+            stroke: workflowPalette.node.initial.border,
+            strokeWidth: 1,
+            strokeDasharray: "3 3"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "text",
+          {
+            x: width / 2,
+            y: height / 2 - 8,
+            textAnchor: "middle",
+            fill: palette.meta,
+            fontFamily: typography.fontFamily,
+            fontSize: typography.stateCategory.size,
+            fontWeight: typography.stateCategory.weight,
+            letterSpacing: typography.stateCategory.tracking,
+            children: category
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "text",
+          {
+            x: width / 2,
+            y: height / 2 + 12,
+            textAnchor: "middle",
+            fill: palette.title,
+            fontFamily: typography.monoFamily,
+            fontSize: typography.stateTitle.size,
+            fontWeight: typography.stateTitle.weight,
+            letterSpacing: typography.stateTitle.tracking,
+            children: truncate(node.stateCode, 18)
+          }
+        )
+      ]
+    }
+  );
+}
+function truncate(s, max) {
+  if (s.length <= max) return s;
+  return `${s.slice(0, max - 1)}\u2026`;
+}
+
+// src/components/EdgeLabel.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var BADGE_HEIGHT = 14;
+var BADGE_GAP = 4;
+var LABEL_PADDING_X = geometry.labelPill.paddingX;
+var LABEL_PADDING_Y = geometry.labelPill.paddingY;
+var BADGE_TEXT_PADDING_X = 6;
+function estimateWidth(text, fontSize) {
+  return Math.ceil(text.length * fontSize * 0.58);
+}
+function EdgeLabel({ edge, x, y, width, height, dimmed }) {
+  const title = edge.summary.display;
+  const badges = badgesFor(edge.summary, {
+    manual: edge.manual,
+    disabled: edge.disabled
+  });
+  const titleW = estimateWidth(title, typography.edgeLabel.size);
+  const badgeWidths = badges.map(
+    (b) => estimateWidth(b.label, typography.badge.size) + BADGE_TEXT_PADDING_X * 2
+  );
+  const badgesTotalW = badgeWidths.reduce((a, b) => a + b, 0) + Math.max(0, badges.length - 1) * BADGE_GAP;
+  const pillW = width ?? Math.max(titleW, badgesTotalW) + LABEL_PADDING_X * 2;
+  const hasBadges = badges.length > 0;
+  const pillH = height ?? typography.edgeLabel.size + LABEL_PADDING_Y * 2 + (hasBadges ? BADGE_HEIGHT + BADGE_GAP : 0);
+  const pillX = x - pillW / 2;
+  const pillY = y - pillH / 2;
+  const titleY = pillY + LABEL_PADDING_Y + typography.edgeLabel.size - 2;
+  const badgeY = titleY + BADGE_GAP + 2;
+  const opacity = dimmed ? 0.4 : 1;
+  return /* @__PURE__ */ jsxs4("g", { opacity, pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: pillX,
+        y: pillY,
+        width: pillW,
+        height: pillH,
+        rx: geometry.labelPill.radius,
+        ry: geometry.labelPill.radius,
+        fill: workflowPalette.edgeLabel.fill,
+        stroke: workflowPalette.edgeLabel.border,
+        strokeWidth: 1,
+        filter: "url(#wf-label-shadow)"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "text",
+      {
+        x,
+        y: titleY,
+        textAnchor: "middle",
+        fill: workflowPalette.edgeLabel.text,
+        fontFamily: typography.fontFamily,
+        fontSize: typography.edgeLabel.size,
+        fontWeight: typography.edgeLabel.weight,
+        letterSpacing: typography.edgeLabel.tracking,
+        children: title
+      }
+    ),
+    hasBadges && renderBadges(badges, badgeWidths, pillX, pillW, badgeY)
+  ] });
+}
+function renderBadges(badges, widths, pillX, pillW, y) {
+  const totalW = widths.reduce((a, b) => a + b, 0) + Math.max(0, badges.length - 1) * BADGE_GAP;
+  let cursor = pillX + (pillW - totalW) / 2;
+  return /* @__PURE__ */ jsx5("g", { children: badges.map((b, i) => {
+    const w = widths[i];
+    const slot = pickBadgePalette(b.key);
+    const node = /* @__PURE__ */ jsxs4("g", { children: [
+      /* @__PURE__ */ jsx5(
+        "rect",
+        {
+          x: cursor,
+          y,
+          width: w,
+          height: BADGE_HEIGHT,
+          rx: BADGE_HEIGHT / 2,
+          ry: BADGE_HEIGHT / 2,
+          fill: slot.fill,
+          stroke: slot.border,
+          strokeWidth: 1
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "text",
+        {
+          x: cursor + w / 2,
+          y: y + BADGE_HEIGHT - 4,
+          textAnchor: "middle",
+          fill: workflowPalette.badge.text,
+          fontFamily: typography.fontFamily,
+          fontSize: typography.badge.size,
+          fontWeight: typography.badge.weight,
+          letterSpacing: typography.badge.tracking,
+          children: b.label
+        }
+      )
+    ] }, `${b.key}-${i}`);
+    cursor += w + BADGE_GAP;
+    return node;
+  }) });
+}
+function pickBadgePalette(key) {
+  switch (key) {
+    case "manual":
+      return workflowPalette.badge.manual;
+    case "processor":
+      return workflowPalette.badge.processor;
+    case "criterion":
+      return workflowPalette.badge.criterion;
+    case "execution":
+      return workflowPalette.badge.processor;
+    case "disabled":
+      return workflowPalette.badge.disabled;
+  }
+}
+
+// src/components/WorkflowViewer.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function WorkflowViewer({
+  graph,
+  layout,
+  width = "100%",
+  height = "100%",
+  selectedId,
+  onSelectionChange,
+  className
+}) {
+  const effectiveLayout = useMemo(
+    () => layout ?? simpleLayout(graph),
+    [graph, layout]
+  );
+  const pan = usePanZoom();
+  const [internalSelection, setInternalSelection] = useState2(null);
+  const [hovered, setHovered] = useState2(null);
+  const selection = selectedId ?? internalSelection;
+  const stateNodes = useMemo(
+    () => graph.nodes.filter((n) => n.kind === "state"),
+    [graph.nodes]
+  );
+  const stateById = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const n of stateNodes) m.set(n.id, n);
+    return m;
+  }, [stateNodes]);
+  const transitionEdges = useMemo(
+    () => graph.edges.filter((e) => e.kind === "transition"),
+    [graph.edges]
+  );
+  const highlightSet = useMemo(
+    () => computeHighlightSet(hovered ?? selection, graph.nodes, graph.edges),
+    [hovered, selection, graph.nodes, graph.edges]
+  );
+  const anythingFocused = highlightSet !== null;
+  const handleSelect = (id) => {
+    setInternalSelection(id);
+    onSelectionChange?.(id);
+  };
+  const handleBackgroundClick = () => {
+    setInternalSelection(null);
+    onSelectionChange?.(null);
+  };
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${effectiveLayout.width} ${effectiveLayout.height}`,
+      preserveAspectRatio: "xMidYMid meet",
+      onClick: handleBackgroundClick,
+      onWheel: pan.onWheel,
+      onMouseDown: pan.onMouseDown,
+      onMouseMove: pan.onMouseMove,
+      onMouseUp: pan.onMouseUp,
+      onMouseLeave: pan.onMouseUp,
+      className,
+      style: {
+        background: workflowPalette.neutrals.white,
+        fontFamily: "inherit",
+        userSelect: "none"
+      },
+      "data-testid": "workflow-viewer",
+      children: [
+        /* @__PURE__ */ jsx6(Defs, {}),
+        /* @__PURE__ */ jsxs5(
+          "g",
+          {
+            transform: `translate(${pan.transform.x}, ${pan.transform.y}) scale(${pan.transform.scale})`,
+            children: [
+              transitionEdges.map((edge) => {
+                const source = effectiveLayout.positions.get(edge.sourceId);
+                const target = effectiveLayout.positions.get(edge.targetId);
+                if (!source || !target) return null;
+                const targetNode = stateById.get(edge.targetId);
+                const route = effectiveLayout.edges?.get(edge.id);
+                const isEdgeSelected = selection === edge.id;
+                const isHighlighted = highlightSet?.has(edge.id) ?? false;
+                const isDimmed = anythingFocused && !isHighlighted;
+                return /* @__PURE__ */ jsx6(
+                  EdgePath,
+                  {
+                    edge,
+                    source,
+                    target,
+                    route,
+                    targetIsTerminal: targetNode?.role === "terminal" || targetNode?.role === "initial-terminal",
+                    highlighted: isHighlighted,
+                    dimmed: isDimmed,
+                    selected: isEdgeSelected,
+                    onSelect: handleSelect,
+                    onHoverEnter: setHovered,
+                    onHoverLeave: () => setHovered(null)
+                  },
+                  edge.id
+                );
+              }),
+              transitionEdges.map((edge) => {
+                const source = effectiveLayout.positions.get(edge.sourceId);
+                const target = effectiveLayout.positions.get(edge.targetId);
+                if (!source || !target) return null;
+                const route = effectiveLayout.edges?.get(edge.id);
+                const labelPos = route ? { midX: route.labelX, midY: route.labelY } : computeEdgeGeometry(edge, source, target);
+                const isHighlighted = highlightSet?.has(edge.id) ?? false;
+                const isDimmed = anythingFocused && !isHighlighted;
+                return /* @__PURE__ */ jsx6(
+                  EdgeLabel,
+                  {
+                    edge,
+                    x: labelPos.midX,
+                    y: labelPos.midY,
+                    width: route?.labelWidth,
+                    height: route?.labelHeight,
+                    dimmed: isDimmed
+                  },
+                  `label-${edge.id}`
+                );
+              }),
+              graph.nodes.map((node) => renderNode(node, effectiveLayout, {
+                selection,
+                highlightSet,
+                anythingFocused,
+                onSelect: handleSelect,
+                onHoverEnter: setHovered,
+                onHoverLeave: () => setHovered(null)
+              }))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function renderNode(node, layout, ctx) {
+  const pos = layout.positions.get(node.id);
+  if (!pos) return null;
+  if (node.kind === "startMarker") {
+    return /* @__PURE__ */ jsx6(StartMarker, { position: smallPositionForMarker(pos) }, node.id);
+  }
+  const isHighlighted = ctx.highlightSet?.has(node.id) ?? false;
+  const isDimmed = ctx.anythingFocused && !isHighlighted;
+  return /* @__PURE__ */ jsx6(
+    StateNodeView,
+    {
+      node,
+      position: pos,
+      selected: ctx.selection === node.id,
+      highlighted: isHighlighted,
+      dimmed: isDimmed,
+      onSelect: ctx.onSelect,
+      onHoverEnter: ctx.onHoverEnter,
+      onHoverLeave: ctx.onHoverLeave
+    },
+    node.id
+  );
+}
+function smallPositionForMarker(pos) {
+  const size = 16;
+  return {
+    id: pos.id,
+    x: pos.x + pos.width / 2 - size / 2,
+    y: pos.y + pos.height / 2 - size / 2,
+    width: size,
+    height: size
+  };
+}
+function computeHighlightSet(focusedId, nodes, edges) {
+  if (!focusedId) return null;
+  const set = /* @__PURE__ */ new Set();
+  set.add(focusedId);
+  const node = nodes.find((n) => n.id === focusedId);
+  if (node) {
+    for (const e of edges) {
+      if (e.kind !== "transition") continue;
+      if (e.sourceId === focusedId || e.targetId === focusedId) {
+        set.add(e.id);
+        set.add(e.sourceId);
+        set.add(e.targetId);
+      }
+    }
+    return set;
+  }
+  const edge = edges.find((e) => e.id === focusedId);
+  if (edge && edge.kind === "transition") {
+    set.add(edge.sourceId);
+    set.add(edge.targetId);
+  }
+  return set;
+}
+export {
+  WorkflowViewer,
+  simpleLayout
+};
+//# sourceMappingURL=index.js.map