@magic-marker/nurt 0.1.0

package/dist/react/index.js

@@ -0,0 +1,1234 @@
+// src/react/nurt-flow-chart.tsx
+import { useEffect, useState } from "react";
+
+// src/react/nurt-flow-chart-edges.tsx
+import { jsx } from "react/jsx-runtime";
+var FlowEdge = ({ edge }) => {
+  const { bendPoints, x1, x2, y1, y2 } = edge;
+  if (bendPoints && bendPoints.length > 0) {
+    const points = [{ x: x1, y: y1 }, ...bendPoints, { x: x2, y: y2 }];
+    const d2 = buildSplinePath(points);
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: d2,
+        fill: "none",
+        markerEnd: "url(#arrowhead)",
+        stroke: "#4b5563",
+        strokeWidth: 1.5
+      }
+    );
+  }
+  if (Math.abs(x1 - x2) < 2) {
+    return /* @__PURE__ */ jsx(
+      "line",
+      {
+        markerEnd: "url(#arrowhead)",
+        stroke: "#4b5563",
+        strokeWidth: 1.5,
+        x1,
+        x2,
+        y1,
+        y2
+      }
+    );
+  }
+  const midY = (y1 + y2) / 2;
+  const d = `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`;
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      d,
+      fill: "none",
+      markerEnd: "url(#arrowhead)",
+      stroke: "#4b5563",
+      strokeWidth: 1.5
+    }
+  );
+};
+function buildSplinePath(points) {
+  if (points.length < 2) return "";
+  if (points.length === 2) {
+    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+  }
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length; i++) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    const midY = (prev.y + curr.y) / 2;
+    d += ` C ${prev.x} ${midY}, ${curr.x} ${midY}, ${curr.x} ${curr.y}`;
+  }
+  return d;
+}
+
+// src/react/nurt-flow-chart-layout.ts
+import ELK from "elkjs/lib/elk.bundled.js";
+var NODE_W = 180;
+var NODE_H = 58;
+var MEMBER_W = 160;
+var MEMBER_H = 28;
+var SUBGRAPH_STEP_W = 110;
+var SUBGRAPH_STEP_H = 30;
+var elk = new ELK();
+async function layoutSnapshot(snapshot) {
+  const { groups, steps } = snapshot.flow;
+  if (steps.length === 0 && groups.length === 0) {
+    return { edges: [], externalRefEdges: [], height: 0, nodes: [], width: 0 };
+  }
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const g of groups) groupMap.set(g.name, g);
+  const elkGraph = buildElkGraph(steps, groups, groupMap);
+  const laid = await elk.layout(elkGraph);
+  return extractLayout(laid, steps, groupMap);
+}
+function buildElkGraph(steps, groups, groupMap) {
+  const allIds = /* @__PURE__ */ new Set([
+    ...steps.map((s) => s.name),
+    ...groups.map((g) => g.name)
+  ]);
+  const children = [];
+  for (const step of steps) {
+    children.push({
+      height: NODE_H,
+      id: step.name,
+      width: NODE_W
+    });
+  }
+  for (const g of groups) {
+    const memberChildren = [];
+    for (const m of g.members) {
+      const memberId = `${g.name}/${m.name}`;
+      if (m.type === "subgraph" && m.subgraph && m.subgraph.flow.steps.length > 0) {
+        const subSteps = m.subgraph.flow.steps;
+        const subChildren = subSteps.map((s) => ({
+          height: SUBGRAPH_STEP_H,
+          id: `${memberId}/${s.name}`,
+          width: SUBGRAPH_STEP_W
+        }));
+        const subEdges = [];
+        let edgeIdx = 0;
+        for (const s of subSteps) {
+          for (const parent of s.parentNames) {
+            subEdges.push({
+              id: `pe-${memberId}-${edgeIdx++}`,
+              sources: [`${memberId}/${parent}`],
+              targets: [`${memberId}/${s.name}`]
+            });
+          }
+        }
+        memberChildren.push({
+          children: subChildren,
+          edges: subEdges,
+          id: memberId,
+          layoutOptions: {
+            "elk.algorithm": "layered",
+            "elk.direction": "DOWN",
+            "elk.edgeRouting": "SPLINES",
+            "elk.layered.spacing.nodeNodeBetweenLayers": "30",
+            "elk.padding": "[top=24,left=8,bottom=8,right=8]",
+            "elk.spacing.nodeNode": "12"
+          }
+        });
+      } else {
+        memberChildren.push({
+          height: MEMBER_H,
+          id: memberId,
+          width: MEMBER_W
+        });
+      }
+    }
+    const isEmpty = memberChildren.length === 0;
+    children.push({
+      children: memberChildren,
+      // Empty groups get a minimum size so they render visibly
+      ...isEmpty ? { height: NODE_H, width: NODE_W } : {},
+      id: g.name,
+      layoutOptions: {
+        "elk.padding": "[top=36,left=10,bottom=10,right=10]"
+      }
+    });
+  }
+  const edges = [];
+  let edgeId = 0;
+  for (const step of steps) {
+    for (const parent of step.parentNames) {
+      if (allIds.has(parent)) {
+        edges.push({
+          id: `e${edgeId++}`,
+          sources: [parent],
+          targets: [step.name]
+        });
+      }
+    }
+  }
+  for (const g of groups) {
+    for (const dep of g.dependsOn) {
+      if (allIds.has(dep)) {
+        edges.push({
+          id: `e${edgeId++}`,
+          sources: [dep],
+          targets: [g.name]
+        });
+      }
+    }
+  }
+  return {
+    children,
+    edges,
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": "DOWN",
+      "elk.edgeRouting": "SPLINES",
+      "elk.layered.spacing.edgeNodeBetweenLayers": "30",
+      "elk.layered.spacing.nodeNodeBetweenLayers": "50",
+      "elk.spacing.nodeNode": "20"
+    }
+  };
+}
+function extractLayout(laid, steps, groupMap) {
+  const nodes = [];
+  const edges = [];
+  const stepMap = new Map(steps.map((s) => [s.name, s]));
+  for (const child of laid.children ?? []) {
+    const group = groupMap.get(child.id);
+    const step = stepMap.get(child.id);
+    const cx = child.x ?? 0;
+    const cy = child.y ?? 0;
+    const cw = child.width ?? NODE_W;
+    const ch = child.height ?? NODE_H;
+    if (group) {
+      const members = (child.children ?? []).map(
+        (memberElk) => {
+          const memberName = memberElk.id.split("/").at(-1) ?? memberElk.id;
+          const memberData = group.members.find((m) => m.name === memberName);
+          const mx = (memberElk.x ?? 0) + cx;
+          const my = (memberElk.y ?? 0) + cy;
+          let subgraphSteps;
+          let memberSubgraphEdges;
+          if (memberData?.type === "subgraph" && memberData.subgraph && memberElk.children && memberElk.children.length > 0) {
+            const subSteps = memberData.subgraph.flow.steps;
+            subgraphSteps = memberElk.children.map((subElk) => {
+              const subName = subElk.id.split("/").at(-1) ?? subElk.id;
+              const subData = subSteps.find((s) => s.name === subName);
+              return {
+                durationMs: subData?.durationMs,
+                height: subElk.height ?? SUBGRAPH_STEP_H,
+                name: subName,
+                status: subData?.status ?? "pending",
+                width: subElk.width ?? SUBGRAPH_STEP_W,
+                x: (subElk.x ?? 0) + mx,
+                y: (subElk.y ?? 0) + my
+              };
+            });
+            memberSubgraphEdges = [];
+            for (const pEdge of memberElk.edges ?? []) {
+              const sections = pEdge.sections ?? [];
+              if (sections.length > 0) {
+                const sec = sections[0];
+                memberSubgraphEdges.push({
+                  bendPoints: sec.bendPoints?.map((bp) => ({
+                    x: bp.x + mx,
+                    y: bp.y + my
+                  })),
+                  memberName,
+                  x1: sec.startPoint.x + mx,
+                  x2: sec.endPoint.x + mx,
+                  y1: sec.startPoint.y + my,
+                  y2: sec.endPoint.y + my
+                });
+              }
+            }
+          }
+          return {
+            durationMs: memberData?.durationMs,
+            error: memberData?.error,
+            height: memberElk.height ?? MEMBER_H,
+            name: memberName,
+            status: memberData?.status ?? "pending",
+            subgraphEdges: memberSubgraphEdges,
+            subgraphSteps,
+            type: memberData?.type ?? "single",
+            width: memberElk.width ?? MEMBER_W,
+            x: mx,
+            y: my
+          };
+        }
+      );
+      nodes.push({
+        groupName: group.name,
+        height: ch,
+        id: child.id,
+        label: group.name,
+        members,
+        status: deriveGroupStatus(group),
+        type: "group",
+        width: cw,
+        x: cx,
+        y: cy
+      });
+    } else if (step) {
+      nodes.push({
+        height: ch,
+        id: child.id,
+        label: step.name,
+        status: step.status,
+        step,
+        type: "step",
+        width: cw,
+        x: cx,
+        y: cy
+      });
+    }
+  }
+  for (const elkEdge of laid.edges ?? []) {
+    const source = elkEdge.sources?.[0] ?? "";
+    const target = elkEdge.targets?.[0] ?? "";
+    const sections = elkEdge.sections ?? [];
+    if (sections.length > 0) {
+      const section = sections[0];
+      const bendPoints = section.bendPoints?.map((bp) => ({
+        x: bp.x,
+        y: bp.y
+      }));
+      edges.push({
+        bendPoints,
+        source,
+        target,
+        x1: section.startPoint.x,
+        x2: section.endPoint.x,
+        y1: section.startPoint.y,
+        y2: section.endPoint.y
+      });
+    } else {
+      const srcNode = nodes.find((n) => n.id === source);
+      const tgtNode = nodes.find((n) => n.id === target);
+      if (srcNode && tgtNode) {
+        edges.push({
+          source,
+          target,
+          x1: srcNode.x + srcNode.width / 2,
+          x2: tgtNode.x + tgtNode.width / 2,
+          y1: srcNode.y + srcNode.height,
+          y2: tgtNode.y
+        });
+      }
+    }
+  }
+  const externalRefEdges = [];
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  for (const node of nodes) {
+    if (node.type !== "group" || !node.members) continue;
+    for (const member of node.members) {
+      if (member.type !== "subgraph") continue;
+      const group = groupMap.get(node.id);
+      const memberData = group?.members.find((m) => m.name === member.name);
+      if (!memberData?.externalDeps) continue;
+      for (const [, parentStepName] of Object.entries(
+        memberData.externalDeps
+      )) {
+        const srcNode = nodeMap.get(parentStepName);
+        if (srcNode) {
+          externalRefEdges.push({
+            sourceStepName: parentStepName,
+            targetMemberName: member.name,
+            x1: srcNode.x + srcNode.width / 2,
+            x2: member.x + member.width / 2,
+            y1: srcNode.y + srcNode.height,
+            y2: member.y
+          });
+        }
+      }
+    }
+  }
+  const totalWidth = laid.width ?? 900;
+  const totalHeight = laid.height ?? 400;
+  return {
+    edges,
+    externalRefEdges,
+    height: Math.max(400, totalHeight + 40),
+    nodes,
+    width: Math.max(900, totalWidth + 40)
+  };
+}
+function deriveGroupStatus(group) {
+  if (group.members.length === 0) return "pending";
+  if (group.members.some((m) => m.status === "running")) return "running";
+  if (group.members.every((m) => m.status === "success")) return "success";
+  if (group.members.every((m) => m.status === "success" || m.status === "error"))
+    return "error";
+  return "pending";
+}
+
+// src/react/nurt-flow-chart-utils.ts
+var formatDuration = (ms) => {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+};
+var statusIndicator = (status) => {
+  switch (status) {
+    case "success":
+      return "\u2713";
+    case "error":
+      return "\u2717";
+    case "running":
+      return "\u25CB";
+    case "skipped":
+      return "\u2014";
+    case "pending":
+      return "\u2022";
+    default:
+      return "";
+  }
+};
+var getNodeStyle = (status, hovered) => {
+  switch (status) {
+    case "running":
+      return {
+        fill: "#1e3a5f",
+        opacity: 1,
+        stroke: hovered ? "#60a5fa" : "#3b82f6",
+        strokeWidth: hovered ? 2 : 1.5
+      };
+    case "pending":
+      return {
+        fill: "#1f2937",
+        opacity: 0.5,
+        stroke: "#374151",
+        strokeWidth: 1
+      };
+    case "error":
+      return {
+        fill: "#3b1c1c",
+        opacity: 1,
+        stroke: hovered ? "#f87171" : "#ef4444",
+        strokeWidth: hovered ? 2 : 1
+      };
+    case "skipped":
+      return {
+        fill: "#1f2937",
+        opacity: 0.6,
+        stroke: "#4b5563",
+        strokeWidth: 1
+      };
+    default:
+      return {
+        fill: "#374151",
+        opacity: 1,
+        stroke: hovered ? "#9ca3af" : "#6b7280",
+        strokeWidth: hovered ? 2 : 1
+      };
+  }
+};
+var getMemberStyle = (status) => {
+  switch (status) {
+    case "success":
+      return { fill: "#065f46", stroke: "#10b981" };
+    case "error":
+      return { fill: "#7f1d1d", stroke: "#ef4444" };
+    case "running":
+      return { fill: "#1e3a5f", stroke: "#3b82f6" };
+    default:
+      return { fill: "#374151", stroke: "#6b7280" };
+  }
+};
+var statusTextColor = (status) => {
+  switch (status) {
+    case "success":
+      return "#34d399";
+    case "error":
+      return "#f87171";
+    case "running":
+      return "#60a5fa";
+    case "skipped":
+      return "#6b7280";
+    default:
+      return "#9ca3af";
+  }
+};
+
+// src/react/nurt-flow-chart-nodes.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var StepNode = ({ hovered, node, onClick, onHover }) => {
+  const rectX = node.x;
+  const rectY = node.y;
+  const centerX = node.x + node.width / 2;
+  const centerY = node.y + node.height / 2;
+  const style = getNodeStyle(node.status, hovered);
+  const step = node.step;
+  const isClickable = node.status !== "pending" && node.status !== "running";
+  let durationText = "";
+  if (step?.status === "running") durationText = "running\u2026";
+  else if (step?.durationMs && step.durationMs > 0)
+    durationText = formatDuration(step.durationMs);
+  const hasSubline = durationText || step?.terminal;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: node.status === "running" ? "node-running" : void 0,
+      onClick: () => isClickable && onClick?.(node.id),
+      onMouseEnter: () => onHover(node.id),
+      onMouseLeave: () => onHover(null),
+      style: { cursor: isClickable ? "pointer" : "default" },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            fill: style.fill,
+            height: node.height,
+            opacity: style.opacity,
+            rx: 6,
+            stroke: style.stroke,
+            strokeDasharray: node.status === "skipped" ? "4 3" : void 0,
+            strokeWidth: style.strokeWidth,
+            width: node.width,
+            x: rectX,
+            y: rectY
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            dominantBaseline: "central",
+            fill: node.status === "pending" ? "#6b7280" : "#d1d5db",
+            fontSize: 11,
+            opacity: style.opacity,
+            textAnchor: "middle",
+            x: centerX,
+            y: centerY - (hasSubline ? 8 : 0),
+            children: [
+              statusIndicator(node.status),
+              " ",
+              node.label
+            ]
+          }
+        ),
+        durationText && /* @__PURE__ */ jsxs(
+          "text",
+          {
+            dominantBaseline: "central",
+            fill: statusTextColor(node.status),
+            fontSize: 10,
+            opacity: style.opacity,
+            textAnchor: "middle",
+            x: centerX,
+            y: centerY + 10,
+            children: [
+              durationText,
+              step?.terminal ? " \u25C6" : ""
+            ]
+          }
+        ),
+        !durationText && step?.terminal && /* @__PURE__ */ jsxs(
+          "text",
+          {
+            dominantBaseline: "central",
+            fill: "#9ca3af",
+            fontSize: 9,
+            opacity: style.opacity,
+            textAnchor: "middle",
+            x: centerX,
+            y: centerY + 10,
+            children: [
+              "terminal ",
+              "\u25C6"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var GroupNode = ({ hovered, node, onClick, onHover }) => {
+  const rectX = node.x;
+  const rectY = node.y;
+  const centerX = node.x + node.width / 2;
+  const centerY = node.y + node.height / 2;
+  const style = getNodeStyle(node.status, hovered);
+  const isEmpty = !node.members || node.members.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      onMouseEnter: () => onHover(node.id),
+      onMouseLeave: () => onHover(null),
+      style: { cursor: "pointer" },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            fill: isEmpty ? "none" : style.fill,
+            height: node.height,
+            onClick: () => onClick?.(node.id),
+            opacity: isEmpty ? 0.4 : style.opacity,
+            rx: 8,
+            stroke: isEmpty ? "#4b5563" : style.stroke,
+            strokeDasharray: isEmpty ? "4 4" : "6 3",
+            strokeWidth: style.strokeWidth,
+            width: node.width,
+            x: rectX,
+            y: rectY
+          }
+        ),
+        isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            "text",
+            {
+              dominantBaseline: "central",
+              fill: "#6b7280",
+              fontSize: 16,
+              opacity: 0.5,
+              textAnchor: "middle",
+              x: centerX,
+              y: centerY - 8,
+              children: "\u2026"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "text",
+            {
+              dominantBaseline: "central",
+              fill: "#6b7280",
+              fontSize: 9,
+              opacity: 0.5,
+              textAnchor: "middle",
+              x: centerX,
+              y: centerY + 10,
+              children: node.label
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            "text",
+            {
+              dominantBaseline: "central",
+              fill: "#9ca3af",
+              fontSize: 10,
+              fontWeight: "bold",
+              textAnchor: "middle",
+              x: centerX,
+              y: rectY + 18,
+              children: node.label
+            }
+          ),
+          node.members?.map((member) => /* @__PURE__ */ jsx2(MemberNode, { member, onClick }, member.name))
+        ] })
+      ]
+    }
+  );
+};
+var MemberNode = ({ member, onClick }) => {
+  const mStyle = getMemberStyle(member.status);
+  const hasSubgraphSteps = member.type === "subgraph" && member.subgraphSteps && member.subgraphSteps.length > 0;
+  if (hasSubgraphSteps) {
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        className: member.status === "running" ? "node-running" : void 0,
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick?.(member.name);
+        },
+        style: { cursor: "pointer" },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "rect",
+            {
+              fill: mStyle.fill,
+              height: member.height,
+              opacity: 0.6,
+              rx: 4,
+              stroke: mStyle.stroke,
+              strokeDasharray: "3 2",
+              strokeWidth: 0.5,
+              width: member.width,
+              x: member.x,
+              y: member.y
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "text",
+            {
+              dominantBaseline: "central",
+              fill: "#9ca3af",
+              fontSize: 8,
+              textAnchor: "middle",
+              x: member.x + member.width / 2,
+              y: member.y + 10,
+              children: [
+                member.name,
+                member.durationMs && member.durationMs > 0 ? ` (${formatDuration(member.durationMs)})` : member.status === "running" ? " (running\u2026)" : ""
+              ]
+            }
+          ),
+          member.subgraphEdges?.map((se, i) => /* @__PURE__ */ jsx2(SubgraphInternalEdge, { edge: se }, `${member.name}-e${i}`)),
+          member.subgraphSteps.map((ps) => /* @__PURE__ */ jsx2(SubgraphStepNode, { step: ps }, ps.name))
+        ]
+      }
+    );
+  }
+  const centerX = member.x + member.width / 2;
+  const centerY = member.y + member.height / 2;
+  let memberDurationText = "";
+  if (member.status === "running") memberDurationText = "running\u2026";
+  else if (member.durationMs && member.durationMs > 0)
+    memberDurationText = formatDuration(member.durationMs);
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: member.status === "running" ? "node-running" : void 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.(member.name);
+      },
+      style: { cursor: "pointer" },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            fill: mStyle.fill,
+            height: member.height,
+            rx: 4,
+            stroke: mStyle.stroke,
+            strokeWidth: 0.5,
+            width: member.width,
+            x: member.x,
+            y: member.y
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            dominantBaseline: "central",
+            fill: "#d1d5db",
+            fontSize: 9,
+            textAnchor: "middle",
+            x: centerX,
+            y: memberDurationText ? centerY - 5 : centerY,
+            children: [
+              statusIndicator(member.status),
+              " ",
+              member.name
+            ]
+          }
+        ),
+        memberDurationText && /* @__PURE__ */ jsx2(
+          "text",
+          {
+            dominantBaseline: "central",
+            fill: statusTextColor(member.status),
+            fontSize: 8,
+            textAnchor: "middle",
+            x: centerX,
+            y: centerY + 7,
+            children: memberDurationText
+          }
+        )
+      ]
+    }
+  );
+};
+var SubgraphStepNode = ({ step }) => {
+  const style = getNodeStyle(step.status, false);
+  const centerX = step.x + step.width / 2;
+  const centerY = step.y + step.height / 2;
+  let stepDurationText = "";
+  if (step.status === "running") stepDurationText = "running\u2026";
+  else if (step.durationMs && step.durationMs > 0)
+    stepDurationText = formatDuration(step.durationMs);
+  return /* @__PURE__ */ jsxs("g", { className: step.status === "running" ? "node-running" : void 0, children: [
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        fill: style.fill,
+        height: step.height,
+        opacity: style.opacity,
+        rx: 4,
+        stroke: style.stroke,
+        strokeDasharray: step.status === "skipped" ? "3 2" : void 0,
+        strokeWidth: 0.75,
+        width: step.width,
+        x: step.x,
+        y: step.y
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        dominantBaseline: "central",
+        fill: step.status === "pending" ? "#6b7280" : "#d1d5db",
+        fontSize: 9,
+        opacity: style.opacity,
+        textAnchor: "middle",
+        x: centerX,
+        y: stepDurationText ? centerY - 5 : centerY,
+        children: [
+          statusIndicator(step.status),
+          " ",
+          step.name
+        ]
+      }
+    ),
+    stepDurationText && /* @__PURE__ */ jsx2(
+      "text",
+      {
+        dominantBaseline: "central",
+        fill: statusTextColor(step.status),
+        fontSize: 8,
+        opacity: style.opacity,
+        textAnchor: "middle",
+        x: centerX,
+        y: centerY + 7,
+        children: stepDurationText
+      }
+    )
+  ] });
+};
+var SubgraphInternalEdge = ({
+  edge
+}) => {
+  const { bendPoints, x1, x2, y1, y2 } = edge;
+  if (bendPoints && bendPoints.length > 0) {
+    const points = [{ x: x1, y: y1 }, ...bendPoints, { x: x2, y: y2 }];
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+      const prev = points[i - 1];
+      const curr = points[i];
+      const midY = (prev.y + curr.y) / 2;
+      d += ` C ${prev.x} ${midY}, ${curr.x} ${midY}, ${curr.x} ${curr.y}`;
+    }
+    return /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d,
+        fill: "none",
+        markerEnd: "url(#arrowhead-sm)",
+        stroke: "#6b7280",
+        strokeWidth: 1
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "line",
+    {
+      markerEnd: "url(#arrowhead-sm)",
+      stroke: "#6b7280",
+      strokeWidth: 1,
+      x1,
+      x2,
+      y1,
+      y2
+    }
+  );
+};
+
+// src/react/nurt-flow-chart.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var EMPTY_LAYOUT = {
+  edges: [],
+  externalRefEdges: [],
+  height: 400,
+  nodes: [],
+  width: 900
+};
+var NurtFlowChart = ({
+  className,
+  onNodeClick,
+  snapshot
+}) => {
+  const [layout, setLayout] = useState(EMPTY_LAYOUT);
+  const [hoveredId, setHoveredId] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    layoutSnapshot(snapshot).then((result) => {
+      if (!cancelled) setLayout(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [snapshot]);
+  const { edges, externalRefEdges, height, nodes, width } = layout;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      className,
+      height,
+      preserveAspectRatio: "xMidYMin meet",
+      viewBox: `0 0 ${width} ${height}`,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsxs2("defs", { children: [
+          /* @__PURE__ */ jsx3(
+            "marker",
+            {
+              id: "arrowhead",
+              markerHeight: "6",
+              markerWidth: "8",
+              orient: "auto",
+              refX: "8",
+              refY: "3",
+              children: /* @__PURE__ */ jsx3("polygon", { fill: "#4b5563", points: "0 0, 8 3, 0 6" })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "marker",
+            {
+              id: "arrowhead-sm",
+              markerHeight: "4",
+              markerWidth: "6",
+              orient: "auto",
+              refX: "6",
+              refY: "2",
+              children: /* @__PURE__ */ jsx3("polygon", { fill: "#6b7280", points: "0 0, 6 2, 0 4" })
+            }
+          ),
+          /* @__PURE__ */ jsx3("style", { children: `
+          @keyframes pulse-glow {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+          }
+          .node-running { animation: pulse-glow 1.5s ease-in-out infinite; }
+        ` })
+        ] }),
+        edges.map((e) => /* @__PURE__ */ jsx3(FlowEdge, { edge: e }, `${e.source}-${e.target}`)),
+        externalRefEdges.map((ref, i) => {
+          const midY = (ref.y1 + ref.y2) / 2;
+          const d = `M ${ref.x1} ${ref.y1} C ${ref.x1} ${midY}, ${ref.x2} ${midY}, ${ref.x2} ${ref.y2}`;
+          return /* @__PURE__ */ jsx3(
+            "path",
+            {
+              d,
+              fill: "none",
+              markerEnd: "url(#arrowhead-sm)",
+              opacity: 0.6,
+              stroke: "#a78bfa",
+              strokeDasharray: "6 4",
+              strokeWidth: 1.5
+            },
+            `ref-${ref.sourceStepName}-${ref.targetMemberName}-${i}`
+          );
+        }),
+        nodes.map(
+          (node) => node.type === "group" ? /* @__PURE__ */ jsx3(
+            GroupNode,
+            {
+              hovered: hoveredId === node.id,
+              node,
+              onClick: onNodeClick,
+              onHover: setHoveredId
+            },
+            node.id
+          ) : /* @__PURE__ */ jsx3(
+            StepNode,
+            {
+              hovered: hoveredId === node.id,
+              node,
+              onClick: onNodeClick,
+              onHover: setHoveredId
+            },
+            node.id
+          )
+        )
+      ]
+    }
+  );
+};
+
+// src/react/nurt-flow-chart-with-panel.tsx
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/react/nurt-step-detail-panel.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var STATUS_DOT = {
+  error: "bg-red-500",
+  pending: "bg-gray-400",
+  running: "bg-blue-500 animate-pulse",
+  skipped: "bg-gray-400",
+  success: "bg-green-500"
+};
+var StatusDot = ({ status }) => /* @__PURE__ */ jsx4(
+  "span",
+  {
+    className: `inline-block h-2 w-2 rounded-full ${STATUS_DOT[status] ?? "bg-gray-400"}`
+  }
+);
+var NurtStepDetailPanel = ({
+  onClose,
+  onNavigate,
+  selectedNode,
+  snapshot
+}) => {
+  const step = snapshot.flow.steps.find((s) => s.name === selectedNode);
+  const groupData = snapshot.flow.groups.find((g) => g.name === selectedNode);
+  const member = findMember(snapshot, selectedNode);
+  const subgraphStep = findSubgraphStep(snapshot, selectedNode);
+  const status = step?.status ?? subgraphStep?.step.status ?? member?.status ?? deriveGroupStatus2(groupData) ?? "pending";
+  if (!step && !member && !groupData && !subgraphStep) {
+    return /* @__PURE__ */ jsx4("div", { className: "flex h-full items-center justify-center text-sm text-gray-500", children: "Node not found" });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-b border-gray-700 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx4(StatusDot, { status }),
+        /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-gray-200", children: selectedNode }),
+        groupData && /* @__PURE__ */ jsx4("span", { className: "rounded bg-gray-700 px-1.5 py-0.5 text-xs text-gray-400", children: "group" }),
+        member?.type === "subgraph" && /* @__PURE__ */ jsx4("span", { className: "rounded bg-gray-700 px-1.5 py-0.5 text-xs text-gray-400", children: "subgraph" }),
+        subgraphStep && /* @__PURE__ */ jsx4("span", { className: "rounded bg-gray-700 px-1.5 py-0.5 text-xs text-gray-400", children: subgraphStep.memberName })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          className: "rounded px-2 py-1 text-sm text-gray-400 hover:bg-gray-700 hover:text-gray-200",
+          onClick: onClose,
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: [
+      step && /* @__PURE__ */ jsx4(StepDetails, { onNavigate, step }),
+      !step && groupData && /* @__PURE__ */ jsx4(GroupDetails, { group: groupData, onNavigate }),
+      !step && !groupData && !subgraphStep && member && /* @__PURE__ */ jsx4(MemberDetails, { member, onNavigate }),
+      subgraphStep && /* @__PURE__ */ jsx4(
+        SubgraphStepDetails,
+        {
+          memberName: subgraphStep.memberName,
+          onNavigate,
+          step: subgraphStep.step
+        }
+      )
+    ] })
+  ] });
+};
+var StepDetails = ({ onNavigate, step }) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsxs3(Section, { title: "Status", children: [
+    /* @__PURE__ */ jsx4(Row, { label: "Status", children: /* @__PURE__ */ jsxs3("span", { className: "font-mono", children: [
+      statusIndicator(step.status),
+      " ",
+      step.status
+    ] }) }),
+    step.durationMs != null && step.durationMs > 0 && /* @__PURE__ */ jsx4(Row, { label: "Duration", children: /* @__PURE__ */ jsx4("span", { className: "font-mono", children: formatDuration(step.durationMs) }) }),
+    step.startedAt != null && /* @__PURE__ */ jsx4(Row, { label: "Started", children: formatTime(step.startedAt) }),
+    step.completedAt != null && /* @__PURE__ */ jsx4(Row, { label: "Completed", children: formatTime(step.completedAt) }),
+    step.terminal && /* @__PURE__ */ jsx4(Row, { label: "Terminal", children: /* @__PURE__ */ jsx4("span", { className: "text-yellow-400", children: "\u25C6 yes" }) }),
+    step.allowFailures && /* @__PURE__ */ jsx4(Row, { label: "Allow failures", children: /* @__PURE__ */ jsx4("span", { className: "text-blue-400", children: "yes" }) })
+  ] }),
+  step.parentNames.length > 0 && /* @__PURE__ */ jsx4(Section, { title: "Parents", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: step.parentNames.map((p) => /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: "rounded bg-gray-700 px-2 py-0.5 font-mono text-xs text-gray-300 hover:bg-gray-600",
+      onClick: () => onNavigate?.(p),
+      children: p
+    },
+    p
+  )) }) }),
+  step.error && /* @__PURE__ */ jsx4(Section, { title: "Error", children: /* @__PURE__ */ jsx4("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded bg-red-950 p-2 font-mono text-xs text-red-300", children: step.error }) }),
+  step.output != null && /* @__PURE__ */ jsx4(Section, { title: "Output", children: /* @__PURE__ */ jsx4(JsonBlock, { data: step.output }) }),
+  step.output == null && step.status === "success" && /* @__PURE__ */ jsx4(Section, { title: "Output", children: /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-500", children: "No output data" }) })
+] });
+var GroupDetails = ({ group, onNavigate }) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsxs3(Section, { title: "Group Info", children: [
+    /* @__PURE__ */ jsx4(Row, { label: "Sealed", children: group.sealed ? "yes" : "no" }),
+    /* @__PURE__ */ jsx4(Row, { label: "Members", children: group.members.length })
+  ] }),
+  group.dependsOn.length > 0 && /* @__PURE__ */ jsx4(Section, { title: "Depends On", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: group.dependsOn.map((d) => /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: "rounded bg-gray-700 px-2 py-0.5 font-mono text-xs text-gray-300 hover:bg-gray-600",
+      onClick: () => onNavigate?.(d),
+      children: d
+    },
+    d
+  )) }) }),
+  group.members.length > 0 && /* @__PURE__ */ jsx4(Section, { title: "Members", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-1", children: group.members.map((m) => /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      className: "flex items-center justify-between rounded bg-gray-800 px-2 py-1.5 text-left hover:bg-gray-750",
+      onClick: () => onNavigate?.(m.name),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4(StatusDot, { status: m.status }),
+          /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-gray-300", children: m.name }),
+          m.type === "subgraph" && /* @__PURE__ */ jsx4("span", { className: "rounded bg-gray-700 px-1 py-0.5 text-xs text-gray-500", children: "subgraph" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          m.error && /* @__PURE__ */ jsx4("span", { className: "text-xs text-red-400", children: "error" }),
+          m.durationMs != null && m.durationMs > 0 && /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-gray-500", children: formatDuration(m.durationMs) })
+        ] })
+      ]
+    },
+    m.name
+  )) }) })
+] });
+var MemberDetails = ({ member, onNavigate }) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsxs3(Section, { title: "Status", children: [
+    /* @__PURE__ */ jsx4(Row, { label: "Status", children: /* @__PURE__ */ jsxs3("span", { className: "font-mono", children: [
+      statusIndicator(member.status),
+      " ",
+      member.status
+    ] }) }),
+    /* @__PURE__ */ jsx4(Row, { label: "Type", children: /* @__PURE__ */ jsx4("span", { className: "font-mono", children: member.type }) }),
+    member.durationMs != null && member.durationMs > 0 && /* @__PURE__ */ jsx4(Row, { label: "Duration", children: /* @__PURE__ */ jsx4("span", { className: "font-mono", children: formatDuration(member.durationMs) }) }),
+    member.startedAt != null && /* @__PURE__ */ jsx4(Row, { label: "Started", children: formatTime(member.startedAt) }),
+    member.completedAt != null && /* @__PURE__ */ jsx4(Row, { label: "Completed", children: formatTime(member.completedAt) })
+  ] }),
+  member.error && /* @__PURE__ */ jsx4(Section, { title: "Error", children: /* @__PURE__ */ jsx4("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded bg-red-950 p-2 font-mono text-xs text-red-300", children: member.error }) }),
+  member.output != null && /* @__PURE__ */ jsx4(Section, { title: "Output", children: /* @__PURE__ */ jsx4(JsonBlock, { data: member.output }) }),
+  member.subgraph && member.subgraph.flow.steps.length > 0 && /* @__PURE__ */ jsx4(Section, { title: "Subgraph Steps", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-1", children: member.subgraph.flow.steps.map((s) => /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: "block w-full text-left",
+      onClick: () => onNavigate?.(s.name),
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between rounded bg-gray-800 px-2 py-1.5 hover:bg-gray-750", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4(StatusDot, { status: s.status }),
+          /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-gray-300", children: s.name })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          s.error && /* @__PURE__ */ jsx4("span", { className: "text-xs text-red-400", children: "error" }),
+          s.durationMs != null && s.durationMs > 0 && /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-gray-500", children: formatDuration(s.durationMs) })
+        ] })
+      ] })
+    },
+    s.name
+  )) }) })
+] });
+var SubgraphStepDetails = ({ memberName, onNavigate, step }) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsxs3(Section, { title: "Status", children: [
+    /* @__PURE__ */ jsx4(Row, { label: "Status", children: /* @__PURE__ */ jsxs3("span", { className: "font-mono", children: [
+      statusIndicator(step.status),
+      " ",
+      step.status
+    ] }) }),
+    step.durationMs != null && step.durationMs > 0 && /* @__PURE__ */ jsx4(Row, { label: "Duration", children: /* @__PURE__ */ jsx4("span", { className: "font-mono", children: formatDuration(step.durationMs) }) }),
+    step.startedAt != null && /* @__PURE__ */ jsx4(Row, { label: "Started", children: formatTime(step.startedAt) }),
+    step.completedAt != null && /* @__PURE__ */ jsx4(Row, { label: "Completed", children: formatTime(step.completedAt) })
+  ] }),
+  /* @__PURE__ */ jsx4(Section, { title: "Part of", children: /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: "rounded bg-gray-700 px-2 py-0.5 font-mono text-xs text-gray-300 hover:bg-gray-600",
+      onClick: () => onNavigate?.(memberName),
+      children: memberName
+    }
+  ) }),
+  step.parentNames.length > 0 && /* @__PURE__ */ jsx4(Section, { title: "Parents", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: step.parentNames.map((p) => /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: "rounded bg-gray-700 px-2 py-0.5 font-mono text-xs text-gray-300 hover:bg-gray-600",
+      onClick: () => onNavigate?.(p),
+      children: p
+    },
+    p
+  )) }) }),
+  step.error && /* @__PURE__ */ jsx4(Section, { title: "Error", children: /* @__PURE__ */ jsx4("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded bg-red-950 p-2 font-mono text-xs text-red-300", children: step.error }) }),
+  step.output != null && /* @__PURE__ */ jsx4(Section, { title: "Output", children: /* @__PURE__ */ jsx4(JsonBlock, { data: step.output }) }),
+  step.output == null && step.status === "success" && /* @__PURE__ */ jsx4(Section, { title: "Output", children: /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-500", children: "No output data" }) })
+] });
+var Section = ({ children, title }) => /* @__PURE__ */ jsxs3("div", { children: [
+  /* @__PURE__ */ jsx4("h3", { className: "mb-1.5 text-xs font-semibold uppercase tracking-wider text-gray-500", children: title }),
+  children
+] });
+var Row = ({ children, label }) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between py-0.5 text-xs", children: [
+  /* @__PURE__ */ jsx4("span", { className: "text-gray-500", children: label }),
+  /* @__PURE__ */ jsx4("span", { className: "text-gray-300", children })
+] });
+var JsonBlock = ({ data }) => /* @__PURE__ */ jsx4("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap rounded bg-gray-800 p-2 font-mono text-xs text-gray-300", children: JSON.stringify(data, null, 2) });
+function findMember(snapshot, name) {
+  for (const g of snapshot.flow.groups) {
+    const m = g.members.find((m2) => m2.name === name);
+    if (m) return m;
+  }
+  return void 0;
+}
+function findSubgraphStep(snapshot, name) {
+  for (const g of snapshot.flow.groups) {
+    for (const m of g.members) {
+      if (m.subgraph) {
+        const s = m.subgraph.flow.steps.find((s2) => s2.name === name);
+        if (s) return { memberName: m.name, step: s };
+      }
+    }
+  }
+  return void 0;
+}
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString();
+}
+function deriveGroupStatus2(group) {
+  if (!group) return void 0;
+  if (group.members.length === 0) return "pending";
+  if (group.members.some((m) => m.status === "running")) return "running";
+  if (group.members.every((m) => m.status === "success")) return "success";
+  if (group.members.every((m) => m.status === "success" || m.status === "error"))
+    return "error";
+  return "pending";
+}
+
+// src/react/nurt-flow-chart-with-panel.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var NurtFlowChartWithPanel = ({
+  className,
+  snapshot
+}) => {
+  const [selectedNode, setSelectedNode] = useState2(null);
+  const handleNodeClick = useCallback((name) => {
+    setSelectedNode((prev) => prev === name ? null : name);
+  }, []);
+  const handleClose = useCallback(() => {
+    setSelectedNode(null);
+  }, []);
+  const handleNavigate = useCallback((name) => {
+    setSelectedNode(name);
+  }, []);
+  useEffect2(() => {
+    if (!selectedNode) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") setSelectedNode(null);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [selectedNode]);
+  const isOpen = selectedNode !== null;
+  return /* @__PURE__ */ jsxs4("div", { className: `flex overflow-hidden ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "min-w-0 transition-all duration-200 ease-out",
+        style: { flex: isOpen ? "1 1 0%" : "1 1 100%" },
+        children: /* @__PURE__ */ jsx5(NurtFlowChart, { onNodeClick: handleNodeClick, snapshot })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "shrink-0 overflow-hidden border-gray-700 bg-gray-900 transition-all duration-200 ease-out",
+        style: {
+          borderLeftWidth: isOpen ? 1 : 0,
+          opacity: isOpen ? 1 : 0,
+          width: isOpen ? 320 : 0
+        },
+        children: selectedNode && /* @__PURE__ */ jsx5("div", { className: "h-full w-80", children: /* @__PURE__ */ jsx5(
+          NurtStepDetailPanel,
+          {
+            onClose: handleClose,
+            onNavigate: handleNavigate,
+            selectedNode,
+            snapshot
+          }
+        ) })
+      }
+    )
+  ] });
+};
+export {
+  FlowEdge,
+  NurtFlowChart,
+  NurtFlowChartWithPanel,
+  NurtStepDetailPanel,
+  formatDuration,
+  getMemberStyle,
+  getNodeStyle,
+  layoutSnapshot,
+  statusIndicator,
+  statusTextColor
+};
+//# sourceMappingURL=index.js.map