footprint-explainable-ui 0.3.0

package/dist/flowchart.js

@@ -0,0 +1,1486 @@
+// src/components/FlowchartView/FlowchartView.tsx
+import { useMemo, useCallback } from "react";
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  useNodesState,
+  useEdgesState
+} from "@xyflow/react";
+
+// src/components/StageNode/StageNode.tsx
+import { memo } from "react";
+import { Handle, Position } from "@xyflow/react";
+
+// src/theme/ThemeProvider.tsx
+import { createContext, useContext } from "react";
+
+// src/theme/tokens.ts
+var defaultTokens = {
+  colors: {
+    primary: "#6366f1",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    bgPrimary: "#0f172a",
+    bgSecondary: "#1e293b",
+    bgTertiary: "#334155",
+    textPrimary: "#f8fafc",
+    textSecondary: "#94a3b8",
+    textMuted: "#64748b",
+    border: "#334155"
+  },
+  radius: "8px",
+  fontFamily: {
+    sans: "Inter, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace"
+  }
+};
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext({});
+
+// src/theme/styles.ts
+function v(varName, fallback) {
+  return `var(${varName}, ${fallback})`;
+}
+var theme = {
+  primary: v("--fp-color-primary", "#6366f1"),
+  success: v("--fp-color-success", "#22c55e"),
+  error: v("--fp-color-error", "#ef4444"),
+  warning: v("--fp-color-warning", "#f59e0b"),
+  bgPrimary: v("--fp-bg-primary", "#0f172a"),
+  bgSecondary: v("--fp-bg-secondary", "#1e293b"),
+  bgTertiary: v("--fp-bg-tertiary", "#334155"),
+  textPrimary: v("--fp-text-primary", "#f8fafc"),
+  textSecondary: v("--fp-text-secondary", "#94a3b8"),
+  textMuted: v("--fp-text-muted", "#64748b"),
+  border: v("--fp-border", "#334155"),
+  radius: v("--fp-radius", "8px"),
+  fontSans: v("--fp-font-sans", "Inter, system-ui, -apple-system, sans-serif"),
+  fontMono: v("--fp-font-mono", "'JetBrains Mono', 'Fira Code', monospace")
+};
+var fontSize = {
+  compact: { label: 10, body: 11, small: 9 },
+  default: { label: 11, body: 12, small: 10 },
+  detailed: { label: 12, body: 13, small: 11 }
+};
+var padding = {
+  compact: 8,
+  default: 12,
+  detailed: 16
+};
+
+// src/components/StageNode/StageNode.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var StageNode = memo(function StageNode2({
+  data
+}) {
+  const { label, active, done, error, linked, stepNumbers, dimmed, isSubflow } = data;
+  const isOnPath = active || done;
+  const bg = active ? theme.primary : done ? theme.success : error ? theme.error : theme.bgSecondary;
+  const borderColor = active ? theme.primary : done ? theme.success : error ? theme.error : theme.border;
+  const shadow = active ? `0 0 16px color-mix(in srgb, ${theme.primary} 40%, transparent)` : done ? `0 0 8px color-mix(in srgb, ${theme.success} 20%, transparent)` : error ? `0 0 12px color-mix(in srgb, ${theme.error} 30%, transparent)` : `0 2px 8px rgba(0,0,0,0.15)`;
+  const textColor = active || done || error ? "#fff" : theme.textPrimary;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Handle, { type: "target", position: Position.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          gap: 6
+        },
+        children: [
+          stepNumbers && stepNumbers.length > 0 && isOnPath && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: -10,
+                left: -10,
+                display: "flex",
+                gap: 3,
+                zIndex: 10
+              },
+              children: stepNumbers.map((num, i) => {
+                const isLatest = i === stepNumbers.length - 1;
+                const badgeBg = isLatest && active ? theme.primary : theme.success;
+                const glow = isLatest && active ? `color-mix(in srgb, ${theme.primary} 50%, transparent)` : `color-mix(in srgb, ${theme.success} 40%, transparent)`;
+                return /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      width: 22,
+                      height: 22,
+                      borderRadius: "50%",
+                      background: badgeBg,
+                      color: "#fff",
+                      fontSize: 11,
+                      fontWeight: 700,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      boxShadow: `0 0 8px ${glow}`
+                    },
+                    children: num
+                  },
+                  num
+                );
+              })
+            }
+          ),
+          linked && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: -6,
+                borderRadius: `calc(${theme.radius} + 4px)`,
+                border: `2px solid ${theme.primary}`,
+                opacity: 0.4,
+                animation: "fp-pulse 2s ease-in-out infinite"
+              }
+            }
+          ),
+          active && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: -6,
+                borderRadius: `calc(${theme.radius} + 4px)`,
+                border: `2px solid ${theme.primary}`,
+                opacity: 0.3,
+                animation: "fp-pulse 1.5s ease-out infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: bg,
+                border: `2px solid ${borderColor}`,
+                borderRadius: theme.radius,
+                padding: "10px 20px",
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                boxShadow: shadow,
+                transition: "all 0.3s ease",
+                fontFamily: theme.fontSans,
+                minWidth: 100,
+                justifyContent: "center"
+              },
+              children: [
+                done && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2713" }),
+                active && /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: "#fff",
+                      animation: "fp-blink 1s ease-in-out infinite",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                error && /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: textColor }, children: "\u2717" }),
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 13,
+                      fontWeight: 500,
+                      color: textColor,
+                      whiteSpace: "nowrap"
+                    },
+                    children: label
+                  }
+                ),
+                isSubflow && /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 16,
+                      height: 16,
+                      borderRadius: 3,
+                      border: `1.5px solid ${textColor}`,
+                      position: "relative",
+                      opacity: 0.7,
+                      flexShrink: 0
+                    },
+                    children: /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: 2,
+                          border: `1px solid ${textColor}`
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(Handle, { type: "source", position: Position.Bottom, style: { opacity: 0 } }),
+    /* @__PURE__ */ jsx2(
+      Handle,
+      {
+        id: "loop-source",
+        type: "source",
+        position: Position.Right,
+        style: { background: "transparent", border: "none", width: 6, height: 6 }
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Handle,
+      {
+        id: "loop-target",
+        type: "target",
+        position: Position.Right,
+        style: { background: "transparent", border: "none", width: 6, height: 6 }
+      }
+    )
+  ] });
+});
+
+// src/components/FlowchartView/FlowchartView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var nodeTypes = { stageNode: StageNode };
+function FlowchartView({
+  nodes: rawNodes,
+  edges: rawEdges,
+  snapshots,
+  selectedIndex = 0,
+  onNodeClick,
+  unstyled = false,
+  className,
+  style
+}) {
+  const enhancedNodes = useMemo(() => {
+    if (!snapshots || snapshots.length === 0) {
+      return rawNodes.map((n) => ({
+        ...n,
+        type: "stageNode",
+        data: {
+          ...n.data,
+          label: n.data.label || n.id,
+          active: false,
+          done: false,
+          error: false
+        }
+      }));
+    }
+    const doneNames = new Set(
+      snapshots.slice(0, selectedIndex).map((s) => s.stageName)
+    );
+    const activeName = snapshots[selectedIndex]?.stageName;
+    return rawNodes.map((n) => ({
+      ...n,
+      type: "stageNode",
+      data: {
+        ...n.data,
+        label: n.data.label || n.id,
+        active: n.id === activeName,
+        done: doneNames.has(n.id),
+        error: false
+      }
+    }));
+  }, [rawNodes, snapshots, selectedIndex]);
+  const enhancedEdges = useMemo(() => {
+    if (!snapshots || snapshots.length === 0) {
+      return rawEdges.map((e) => ({
+        ...e,
+        style: { stroke: theme.textMuted, strokeWidth: 1.5 },
+        animated: false
+      }));
+    }
+    const doneNames = new Set(
+      snapshots.slice(0, selectedIndex + 1).map((s) => s.stageName)
+    );
+    const activeName = snapshots[selectedIndex]?.stageName;
+    return rawEdges.map((e) => {
+      const sourceIsDone = doneNames.has(e.source);
+      const isFromActive = e.source === activeName;
+      return {
+        ...e,
+        style: {
+          stroke: sourceIsDone ? theme.success : theme.textMuted,
+          strokeWidth: 1.5
+        },
+        animated: isFromActive
+      };
+    });
+  }, [rawEdges, snapshots, selectedIndex]);
+  const [nodes, , onNodesChange] = useNodesState(enhancedNodes);
+  const [edges, , onEdgesChange] = useEdgesState(enhancedEdges);
+  const handleNodeClick = useCallback(
+    (_, node) => {
+      if (!onNodeClick || !snapshots) return;
+      const idx = snapshots.findIndex((s) => s.stageName === node.id);
+      if (idx >= 0) onNodeClick(idx);
+    },
+    [onNodeClick, snapshots]
+  );
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...style
+      },
+      "data-fp": "flowchart-view",
+      children: /* @__PURE__ */ jsx3(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onNodeClick: handleNodeClick,
+          nodeTypes,
+          fitView: true,
+          panOnDrag: false,
+          zoomOnScroll: false,
+          zoomOnPinch: false,
+          zoomOnDoubleClick: false,
+          preventScrolling: false,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: !!onNodeClick,
+          children: !unstyled && /* @__PURE__ */ jsx3(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 })
+        }
+      )
+    }
+  );
+}
+
+// src/components/FlowchartView/SubflowBreadcrumb.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
+  breadcrumbs,
+  onNavigate
+}) {
+  if (breadcrumbs.length <= 1) return null;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "6px 12px",
+        background: theme.bgSecondary,
+        borderBottom: `1px solid ${theme.border}`,
+        fontSize: 12,
+        fontFamily: theme.fontSans,
+        flexShrink: 0,
+        overflowX: "auto"
+      },
+      children: breadcrumbs.map((crumb, i) => {
+        const isLast = i === breadcrumbs.length - 1;
+        return /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          i > 0 && /* @__PURE__ */ jsx4("span", { style: { color: theme.textMuted, fontSize: 10 }, children: "\u203A" }),
+          isLast ? /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                color: theme.primary,
+                fontWeight: 600
+              },
+              children: crumb.label
+            }
+          ) : /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: () => onNavigate(i),
+              style: {
+                background: "none",
+                border: "none",
+                color: theme.textSecondary,
+                cursor: "pointer",
+                padding: "2px 4px",
+                borderRadius: 4,
+                fontSize: 12,
+                fontFamily: "inherit",
+                fontWeight: 500,
+                transition: "color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.color = `${theme.primary}`;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.color = `${theme.textSecondary}`;
+              },
+              children: crumb.label
+            }
+          )
+        ] }, i);
+      })
+    }
+  );
+});
+
+// src/components/FlowchartView/useSubflowNavigation.ts
+import { useState, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+
+// src/components/FlowchartView/specToReactFlow.ts
+var DEFAULT_COLORS = {
+  edgeDefault: defaultTokens.colors.textMuted,
+  edgeExecuted: defaultTokens.colors.success,
+  edgeActive: defaultTokens.colors.primary,
+  edgeLoop: defaultTokens.colors.warning,
+  labelDefault: defaultTokens.colors.textSecondary,
+  labelExecuted: defaultTokens.colors.success,
+  labelLoop: defaultTokens.colors.warning,
+  pathGlow: `${defaultTokens.colors.success}4D`
+  // ~30% opacity hex
+};
+var Y_STEP = 100;
+var X_SPREAD = 200;
+function nid(n) {
+  return n.name || n.id || `spec-${Math.random()}`;
+}
+function addEdge(state, source, target, label, isLoop) {
+  state.edgeCounter++;
+  const o = state.overlay;
+  const c = state.colors;
+  const executed = o && o.executedStages.has(source) && o.executedStages.has(target);
+  const isLeadingEdge = o && source === o.activeStage && !o.doneStages.has(target);
+  if (isLoop) {
+    let loopExecuted = false;
+    if (o?.executionOrder) {
+      const lastSourceIdx = o.executionOrder.lastIndexOf(source);
+      if (lastSourceIdx >= 0) {
+        loopExecuted = o.executionOrder.slice(lastSourceIdx + 1).includes(target);
+      }
+    }
+    state.edges.push({
+      id: `se${state.edgeCounter}`,
+      source,
+      target,
+      sourceHandle: "loop-source",
+      targetHandle: "loop-target",
+      label: label ?? "loop",
+      type: "smoothstep",
+      pathOptions: { offset: 40, borderRadius: 16 },
+      style: {
+        stroke: c.edgeLoop,
+        strokeWidth: loopExecuted ? 3 : 2,
+        strokeDasharray: "6 3",
+        opacity: o && !loopExecuted ? 0.35 : 1
+      },
+      labelStyle: { fontSize: 10, fontWeight: 700, fill: c.labelLoop },
+      animated: loopExecuted,
+      zIndex: 2
+    });
+    return;
+  }
+  if (executed) {
+    state.edges.push({
+      id: `se${state.edgeCounter}-glow`,
+      source,
+      target,
+      style: {
+        stroke: c.pathGlow,
+        strokeWidth: 8,
+        opacity: 0.4
+      },
+      zIndex: 0,
+      selectable: false,
+      focusable: false
+    });
+    state.edges.push({
+      id: `se${state.edgeCounter}`,
+      source,
+      target,
+      label,
+      style: {
+        stroke: isLeadingEdge ? c.edgeActive : c.edgeExecuted,
+        strokeWidth: 3.5
+      },
+      labelStyle: { fontSize: 10, fontWeight: 600, fill: c.labelExecuted },
+      animated: !!isLeadingEdge,
+      zIndex: 1
+    });
+  } else {
+    state.edges.push({
+      id: `se${state.edgeCounter}`,
+      source,
+      target,
+      label,
+      style: {
+        stroke: c.edgeDefault,
+        strokeWidth: 1.5,
+        opacity: o ? 0.3 : 1
+      },
+      labelStyle: { fontSize: 10, fill: c.labelDefault }
+    });
+  }
+}
+function walk(node, state, x, y) {
+  const id = nid(node);
+  if (state.seen.has(id)) {
+    return { lastIds: [id], bottomY: y };
+  }
+  state.seen.add(id);
+  const isDecider = node.type === "decider" || node.hasDecider;
+  const isFork = node.type === "fork";
+  const o = state.overlay;
+  const isDone = o ? o.doneStages.has(id) : false;
+  const isActive = o ? o.activeStage === id : false;
+  const wasExecuted = o ? o.executedStages.has(id) : false;
+  const dimmed = o && !wasExecuted;
+  let stepNumbers;
+  if (o?.executionOrder) {
+    const nums = [];
+    for (let i = 0; i < o.executionOrder.length; i++) {
+      if (o.executionOrder[i] === id) nums.push(i + 1);
+    }
+    if (nums.length > 0) stepNumbers = nums;
+  }
+  state.nodes.push({
+    id,
+    position: { x, y },
+    data: {
+      label: node.name,
+      active: isActive,
+      done: isDone,
+      error: false,
+      isDecider,
+      isFork,
+      description: node.description,
+      dimmed,
+      stepNumbers,
+      isSubflow: !!node.isSubflowRoot
+    },
+    type: "stage",
+    style: dimmed ? { opacity: 0.35 } : void 0
+  });
+  let lastIds = [id];
+  let bottomY = y;
+  if (node.children && node.children.length > 0) {
+    const totalWidth = (node.children.length - 1) * X_SPREAD;
+    const startX = x - totalWidth / 2;
+    const childY = y + Y_STEP;
+    const childResults = [];
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      const childX = startX + i * X_SPREAD;
+      const edgeLabel = node.branchIds?.[i];
+      addEdge(state, id, nid(child), edgeLabel);
+      const result = walk(child, state, childX, childY);
+      childResults.push(result);
+    }
+    lastIds = childResults.flatMap((r) => r.lastIds);
+    bottomY = Math.max(...childResults.map((r) => r.bottomY));
+  }
+  if (node.loopTarget) {
+    addEdge(state, id, node.loopTarget, "loop", true);
+  }
+  if (node.next) {
+    const nextY = bottomY + Y_STEP;
+    const nextId = nid(node.next);
+    for (const lid of lastIds) {
+      if (node.loopTarget && lid === id && node.loopTarget === nextId) continue;
+      addEdge(state, lid, nextId);
+    }
+    const result = walk(node.next, state, x, nextY);
+    return result;
+  }
+  return { lastIds, bottomY };
+}
+function specToReactFlow(spec, overlay, colors) {
+  const state = {
+    nodes: [],
+    edges: [],
+    edgeCounter: 0,
+    seen: /* @__PURE__ */ new Set(),
+    overlay: overlay ?? null,
+    colors: { ...DEFAULT_COLORS, ...colors }
+  };
+  walk(spec, state, 300, 0);
+  return { nodes: state.nodes, edges: state.edges };
+}
+
+// src/components/FlowchartView/useSubflowNavigation.ts
+function useSubflowNavigation(rootSpec, overlay, colors) {
+  const [stack, setStack] = useState([]);
+  const currentSpec = stack.length > 0 ? stack[stack.length - 1].spec : rootSpec;
+  const { nodes, edges } = useMemo2(() => {
+    if (!currentSpec) return { nodes: [], edges: [] };
+    return specToReactFlow(currentSpec, overlay, colors);
+  }, [currentSpec, overlay, colors]);
+  const subflowMap = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!currentSpec) return map;
+    function collectSubflows(node) {
+      if (node.isSubflowRoot && node.subflowStructure) {
+        const id = node.name || node.id || "";
+        map.set(id, node);
+      }
+      if (node.children) node.children.forEach(collectSubflows);
+      if (node.next) collectSubflows(node.next);
+    }
+    collectSubflows(currentSpec);
+    return map;
+  }, [currentSpec]);
+  const breadcrumbs = useMemo2(() => {
+    const root = {
+      label: rootSpec?.name || "Pipeline",
+      spec: rootSpec
+    };
+    return [root, ...stack];
+  }, [rootSpec, stack]);
+  const handleNodeClick = useCallback2(
+    (nodeId) => {
+      const subflowNode = subflowMap.get(nodeId);
+      if (!subflowNode?.subflowStructure) return false;
+      setStack((prev) => [
+        ...prev,
+        {
+          label: subflowNode.subflowName || subflowNode.name,
+          spec: subflowNode.subflowStructure
+        }
+      ]);
+      return true;
+    },
+    [subflowMap]
+  );
+  const navigateTo = useCallback2(
+    (level) => {
+      if (level === 0) {
+        setStack([]);
+      } else {
+        setStack((prev) => prev.slice(0, level));
+      }
+    },
+    []
+  );
+  return {
+    breadcrumbs,
+    nodes,
+    edges,
+    handleNodeClick,
+    navigateTo,
+    isInSubflow: stack.length > 0,
+    currentSubflowNodeName: stack.length > 0 ? stack[0].label : null
+  };
+}
+
+// src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
+import { useState as useState2 } from "react";
+
+// src/components/MemoryInspector/MemoryInspector.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function MemoryInspector({
+  data,
+  snapshots,
+  selectedIndex = 0,
+  showTypes = false,
+  highlightNew = true,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const { memory, newKeys } = useMemo3(() => {
+    if (data) {
+      return { memory: data, newKeys: /* @__PURE__ */ new Set() };
+    }
+    if (!snapshots || snapshots.length === 0) {
+      return { memory: {}, newKeys: /* @__PURE__ */ new Set() };
+    }
+    const merged = {};
+    for (let i = 0; i <= Math.min(selectedIndex, snapshots.length - 1); i++) {
+      Object.assign(merged, snapshots[i]?.memory);
+    }
+    const nk = /* @__PURE__ */ new Set();
+    if (highlightNew && selectedIndex > 0) {
+      const prev = {};
+      for (let i = 0; i < selectedIndex; i++) {
+        Object.assign(prev, snapshots[i]?.memory);
+      }
+      const current = snapshots[selectedIndex]?.memory ?? {};
+      for (const k of Object.keys(current)) {
+        if (!(k in prev)) nk.add(k);
+      }
+    } else if (highlightNew && selectedIndex === 0 && snapshots[0]) {
+      for (const k of Object.keys(snapshots[0].memory)) nk.add(k);
+    }
+    return { memory: merged, newKeys: nk };
+  }, [data, snapshots, selectedIndex, highlightNew]);
+  const entries = Object.entries(memory);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs3("div", { className, style, "data-fp": "memory-inspector", children: [
+      /* @__PURE__ */ jsx5("div", { "data-fp": "memory-label", children: "Memory State" }),
+      /* @__PURE__ */ jsx5("pre", { "data-fp": "memory-json", children: JSON.stringify(memory, null, 2) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: {
+        padding: pad,
+        fontFamily: theme.fontSans,
+        ...style
+      },
+      "data-fp": "memory-inspector",
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              fontSize: fs.label,
+              fontWeight: 600,
+              color: theme.textMuted,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            },
+            children: "Memory State"
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              background: theme.bgSecondary,
+              border: `1px solid ${theme.border}`,
+              borderRadius: theme.radius,
+              padding: `${pad}px ${pad + 4}px`,
+              fontFamily: theme.fontMono,
+              fontSize: fs.body,
+              lineHeight: 1.8
+            },
+            children: [
+              /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "{" }),
+              entries.length === 0 && /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    paddingLeft: 16,
+                    color: theme.textMuted,
+                    fontStyle: "italic"
+                  },
+                  children: "// empty"
+                }
+              ),
+              entries.map(([key, value], i) => {
+                const isNew = newKeys.has(key);
+                const isLast = i === entries.length - 1;
+                return /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    style: {
+                      paddingLeft: 16,
+                      background: isNew ? `color-mix(in srgb, ${theme.success} 10%, transparent)` : "transparent",
+                      borderRadius: 4,
+                      marginLeft: -4,
+                      marginRight: -4,
+                      paddingRight: 4
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs3("span", { style: { color: theme.primary }, children: [
+                        '"',
+                        key,
+                        '"'
+                      ] }),
+                      /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: ": " }),
+                      /* @__PURE__ */ jsx5("span", { style: { color: theme.success }, children: formatValue(value) }),
+                      showTypes && /* @__PURE__ */ jsxs3(
+                        "span",
+                        {
+                          style: {
+                            color: theme.textMuted,
+                            fontSize: fs.small,
+                            marginLeft: 8,
+                            opacity: 0.6
+                          },
+                          children: [
+                            "(",
+                            typeof value,
+                            ")"
+                          ]
+                        }
+                      ),
+                      !isLast && /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "," })
+                    ]
+                  },
+                  key
+                );
+              }),
+              /* @__PURE__ */ jsx5("span", { style: { color: theme.textMuted }, children: "}" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function formatValue(value) {
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "object" && value !== null) return JSON.stringify(value);
+  return String(value);
+}
+
+// src/components/NarrativeLog/NarrativeLog.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function NarrativeLog({
+  snapshots,
+  selectedIndex,
+  narrative,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const entries = useMemo4(() => {
+    if (narrative) {
+      return [{ label: "Output", text: narrative, isCurrent: true }];
+    }
+    const idx = selectedIndex ?? snapshots.length - 1;
+    return snapshots.slice(0, idx + 1).map((s, i) => ({
+      label: s.stageLabel,
+      text: s.narrative,
+      isCurrent: i === idx
+    }));
+  }, [snapshots, selectedIndex, narrative]);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (unstyled) {
+    return /* @__PURE__ */ jsx6("div", { className, style, "data-fp": "narrative-log", children: entries.map((entry, i) => /* @__PURE__ */ jsxs4("div", { "data-fp": "narrative-entry", "data-current": entry.isCurrent, children: [
+      /* @__PURE__ */ jsx6("strong", { children: entry.label }),
+      /* @__PURE__ */ jsx6("p", { children: entry.text })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: { padding: pad, fontFamily: theme.fontSans, ...style },
+      "data-fp": "narrative-log",
+      children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            style: {
+              fontSize: fs.label,
+              fontWeight: 600,
+              color: theme.textMuted,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            },
+            children: "Execution Log"
+          }
+        ),
+        /* @__PURE__ */ jsx6("div", { style: { marginTop: 8, display: "flex", flexDirection: "column" }, children: entries.map((entry, i) => /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 10,
+              padding: `${pad}px 0`,
+              borderBottom: i < entries.length - 1 ? `1px solid ${theme.border}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    width: 12,
+                    flexShrink: 0,
+                    paddingTop: 5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6(
+                      "div",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: "50%",
+                          background: entry.isCurrent ? theme.primary : theme.success,
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    i < entries.length - 1 && /* @__PURE__ */ jsx6(
+                      "div",
+                      {
+                        style: {
+                          width: 1,
+                          flex: 1,
+                          background: theme.border,
+                          marginTop: 4
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx6(
+                  "span",
+                  {
+                    style: {
+                      fontSize: fs.label,
+                      fontWeight: 600,
+                      color: entry.isCurrent ? theme.primary : theme.textMuted
+                    },
+                    children: entry.label
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    style: {
+                      fontSize: fs.body,
+                      lineHeight: 1.5,
+                      color: entry.isCurrent ? theme.textPrimary : theme.textSecondary,
+                      marginTop: 2
+                    },
+                    children: entry.text
+                  }
+                )
+              ] })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+// src/components/GanttTimeline/GanttTimeline.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function GanttTimeline({
+  snapshots,
+  selectedIndex = 0,
+  onSelect,
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const totalWallTime = useMemo5(
+    () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
+    [snapshots]
+  );
+  const fs = fontSize[size];
+  const pad = padding[size];
+  const labelWidth = size === "compact" ? 50 : size === "detailed" ? 100 : 80;
+  const msWidth = size === "compact" ? 28 : 36;
+  if (unstyled) {
+    return /* @__PURE__ */ jsx7("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        "data-fp": "gantt-bar",
+        "data-selected": idx === selectedIndex,
+        "data-visible": idx <= selectedIndex,
+        onClick: () => onSelect?.(idx),
+        children: [
+          /* @__PURE__ */ jsx7("span", { "data-fp": "gantt-label", children: snap.stageLabel }),
+          /* @__PURE__ */ jsxs5("span", { "data-fp": "gantt-duration", children: [
+            snap.durationMs,
+            "ms"
+          ] })
+        ]
+      },
+      snap.stageName
+    )) });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className,
+      style: { padding: pad, fontFamily: theme.fontSans, ...style },
+      "data-fp": "gantt-timeline",
+      children: [
+        /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: {
+              fontSize: fs.label,
+              fontWeight: 600,
+              color: theme.textMuted,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            },
+            children: size === "compact" ? "Timeline" : "Execution Timeline"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: snapshots.map((snap, idx) => {
+              const leftPct = snap.startMs / totalWallTime * 100;
+              const widthPct = Math.max(snap.durationMs / totalWallTime * 100, 1);
+              const isSelected = idx === selectedIndex;
+              const isVisible = idx <= selectedIndex;
+              return /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  onClick: () => onSelect?.(idx),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: size === "compact" ? 4 : 8,
+                    cursor: onSelect ? "pointer" : "default",
+                    opacity: isVisible ? 1 : 0.3,
+                    transition: "opacity 0.3s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      "span",
+                      {
+                        style: {
+                          width: labelWidth,
+                          fontSize: fs.small,
+                          color: isSelected ? theme.primary : theme.textMuted,
+                          fontWeight: isSelected ? 600 : 400,
+                          textAlign: "right",
+                          flexShrink: 0,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: snap.stageLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          height: size === "compact" ? 6 : 8,
+                          position: "relative",
+                          background: theme.bgTertiary,
+                          borderRadius: 3
+                        },
+                        children: isVisible && /* @__PURE__ */ jsx7(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              left: `${leftPct}%`,
+                              top: 0,
+                              width: `${widthPct}%`,
+                              height: "100%",
+                              borderRadius: 3,
+                              background: isSelected ? theme.primary : theme.success,
+                              transition: "width 0.3s ease"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fs.small,
+                          color: theme.textMuted,
+                          fontFamily: theme.fontMono,
+                          width: msWidth,
+                          flexShrink: 0
+                        },
+                        children: [
+                          snap.durationMs,
+                          "ms"
+                        ]
+                      }
+                    )
+                  ]
+                },
+                snap.stageName
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              marginTop: 4,
+              marginLeft: labelWidth + (size === "compact" ? 4 : 8),
+              marginRight: msWidth + (size === "compact" ? 4 : 8),
+              display: "flex",
+              justifyContent: "space-between",
+              fontSize: fs.small - 1,
+              color: theme.textMuted,
+              fontFamily: theme.fontMono
+            },
+            children: [
+              /* @__PURE__ */ jsx7("span", { children: "0ms" }),
+              size !== "compact" && /* @__PURE__ */ jsxs5("span", { children: [
+                (totalWallTime / 2).toFixed(1),
+                "ms"
+              ] }),
+              /* @__PURE__ */ jsxs5("span", { children: [
+                totalWallTime.toFixed(1),
+                "ms"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TimeTravelDebugger/TimeTravelDebugger.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function TimeTravelDebugger({
+  snapshots,
+  nodes,
+  edges,
+  showGantt = true,
+  layout = "horizontal",
+  title = "Time-Travel Debugger",
+  size = "default",
+  unstyled = false,
+  className,
+  style
+}) {
+  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const fs = fontSize[size];
+  const pad = padding[size];
+  if (snapshots.length === 0) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className,
+        style: {
+          padding: pad * 2,
+          textAlign: "center",
+          color: theme.textMuted,
+          ...style
+        },
+        children: "No snapshots to debug"
+      }
+    );
+  }
+  const isHorizontal = layout === "horizontal";
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs6("div", { className, style, "data-fp": "time-travel-debugger", children: [
+      /* @__PURE__ */ jsx8("h3", { children: title }),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: snapshots.length - 1,
+          value: selectedIndex,
+          onChange: (e) => setSelectedIndex(parseInt(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        FlowchartView,
+        {
+          nodes,
+          edges,
+          snapshots,
+          selectedIndex,
+          onNodeClick: setSelectedIndex,
+          unstyled: true
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        MemoryInspector,
+        {
+          snapshots,
+          selectedIndex,
+          unstyled: true
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        NarrativeLog,
+        {
+          snapshots,
+          selectedIndex,
+          unstyled: true
+        }
+      ),
+      showGantt && /* @__PURE__ */ jsx8(
+        GanttTimeline,
+        {
+          snapshots,
+          selectedIndex,
+          onSelect: setSelectedIndex,
+          unstyled: true
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: theme.bgPrimary,
+        fontFamily: theme.fontSans,
+        overflow: "hidden",
+        ...style
+      },
+      "data-fp": "time-travel-debugger",
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              padding: `${pad}px ${pad + 4}px`,
+              borderBottom: `1px solid ${theme.border}`,
+              background: theme.bgSecondary,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs6(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fs.body + 2,
+                          fontWeight: 600,
+                          color: theme.textPrimary
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fs.small,
+                          color: theme.textMuted
+                        },
+                        children: "Scrub to replay execution"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx8(
+                  ScrubButton,
+                  {
+                    label: "\\u25C0",
+                    disabled: selectedIndex === 0,
+                    onClick: () => setSelectedIndex((i) => Math.max(0, i - 1))
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: snapshots.length - 1,
+                    value: selectedIndex,
+                    onChange: (e) => setSelectedIndex(parseInt(e.target.value)),
+                    style: {
+                      flex: 1,
+                      height: 4,
+                      accentColor: theme.primary,
+                      cursor: "pointer"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  ScrubButton,
+                  {
+                    label: "\\u25B6",
+                    disabled: selectedIndex === snapshots.length - 1,
+                    onClick: () => setSelectedIndex((i) => Math.min(snapshots.length - 1, i + 1))
+                  }
+                ),
+                /* @__PURE__ */ jsxs6(
+                  "span",
+                  {
+                    style: {
+                      fontSize: fs.small,
+                      color: theme.textMuted,
+                      flexShrink: 0,
+                      fontFamily: theme.fontMono
+                    },
+                    children: [
+                      selectedIndex + 1,
+                      "/",
+                      snapshots.length
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: isHorizontal ? "row" : "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    overflow: "hidden",
+                    borderRight: isHorizontal ? `1px solid ${theme.border}` : "none",
+                    borderBottom: !isHorizontal ? `1px solid ${theme.border}` : "none"
+                  },
+                  children: /* @__PURE__ */ jsx8(
+                    FlowchartView,
+                    {
+                      nodes,
+                      edges,
+                      snapshots,
+                      selectedIndex,
+                      onNodeClick: setSelectedIndex,
+                      size
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs6("div", { style: { flex: 1, overflow: "auto" }, children: [
+                /* @__PURE__ */ jsx8(
+                  MemoryInspector,
+                  {
+                    snapshots,
+                    selectedIndex,
+                    size
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "div",
+                  {
+                    style: {
+                      height: 1,
+                      background: theme.border,
+                      margin: `0 ${pad}px`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  NarrativeLog,
+                  {
+                    snapshots,
+                    selectedIndex,
+                    size
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showGantt && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              borderTop: `1px solid ${theme.border}`,
+              background: theme.bgSecondary,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx8(
+              GanttTimeline,
+              {
+                snapshots,
+                selectedIndex,
+                onSelect: setSelectedIndex,
+                size
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ScrubButton({
+  label,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      onClick,
+      disabled,
+      style: {
+        background: theme.bgTertiary,
+        border: `1px solid ${theme.border}`,
+        color: disabled ? theme.textMuted : theme.textPrimary,
+        borderRadius: 6,
+        width: 28,
+        height: 28,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        fontSize: 12,
+        flexShrink: 0
+      },
+      children: label
+    }
+  );
+}
+export {
+  FlowchartView,
+  StageNode,
+  SubflowBreadcrumb,
+  TimeTravelDebugger,
+  specToReactFlow,
+  useSubflowNavigation
+};
+//# sourceMappingURL=flowchart.js.map