footprint-explainable-ui 0.25.4 → 0.26.0

package/README.md

@@ -10,6 +10,8 @@
 
 Themeable React components for visualizing [footprintjs](https://github.com/footprintjs/footPrint) pipeline execution — time-travel debugging, flowchart overlays, subflow drill-down, and collapsible detail panels.
 
+> Part of the **[footprintjs ecosystem](https://footprintjs.github.io/)** — the self-explaining stack.
+
 ## Install
 
 ```bash
@@ -52,25 +54,16 @@ const snapshots = toVisualizationSnapshots(
 
 ```tsx
 import { ExplainableShell } from "footprint-explainable-ui";
-import { TracedFlowchartView } from "footprint-explainable-ui/flowchart";
 
-function DebugView({ snapshots, spec, narrative, narrativeEntries }) {
+function DebugView({ snapshots, narrativeEntries, traceGraph, runtimeOverlay }) {
   return (
     <ExplainableShell
       snapshots={snapshots}
-      spec={spec}
-      narrative={narrative}
       narrativeEntries={narrativeEntries}
+      traceGraph={traceGraph}
+      runtimeOverlay={runtimeOverlay}
       title="My Pipeline"
       panelLabels={{ topology: "What Ran", details: "What Happened", timeline: "How Long" }}
-      renderFlowchart={({ spec, snapshots, selectedIndex, onNodeClick }) => (
-        <TracedFlowchartView
-          spec={spec}
-          snapshots={snapshots}
-          snapshotIndex={selectedIndex}
-          onNodeClick={onNodeClick}
-        />
-      )}
     />
   );
 }
@@ -132,7 +125,8 @@ The all-in-one orchestrator. Handles time-travel, subflow drill-down, memory/nar
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `snapshots` | `StageSnapshot[]` | required | Visualization snapshots |
-| `spec` | `SpecNode \| null` | — | Pipeline spec (enables flowchart + subflow tree) |
+| `traceGraph` | `TraceGraph \| null` | — | Build-time graph — drives the flowchart + subflow drill-down |
+| `runtimeOverlay` | `RuntimeOverlay` | — | Per-step execution overlay — lights the executed path |
 | `title` | `string` | `"Flowchart"` | Breadcrumb root label |
 | `narrative` | `string[]` | — | Flat narrative lines |
 | `narrativeEntries` | `NarrativeEntry[]` | — | Structured narrative (rich rendering) |
@@ -164,7 +158,7 @@ Control which panels start open. Desktop default: details panel open (flowchart
 
 ```tsx
 // Desktop (default) — memory panel open
-<ExplainableShell snapshots={...} spec={...} />
+<ExplainableShell snapshots={...} traceGraph={...} runtimeOverlay={...} />
 
 // Mobile — all collapsed, flowchart fills screen
 <ExplainableShell
@@ -378,6 +372,20 @@ pipeline and snapshot-asserts the outputs in `test/golden/__snapshots__/`.
 `footprintjs` is a devDependency used ONLY by the generator — the published
 library still has zero footprintjs dependency (it consumes plain JSON shapes).
 
+## The footprintjs ecosystem
+
+The self-explaining stack — from backend pipelines to AI agents. → **[overview](https://footprintjs.github.io/)**
+
+| Project | Role |
+|---|---|
+| [footprintjs](https://footprintjs.github.io/footPrint/) | the flowchart pattern (core engine) |
+| [agentfootprint](https://footprintjs.github.io/agentfootprint/) | build self-explaining AI agents |
+| **Explainable UI** ← you are here | visualize a footprintjs run |
+| [Lens](https://github.com/footprintjs/agentfootprint-lens) | debug an agentfootprint run |
+| [Thinking UI](https://footprintjs.github.io/agentThinkingUI/) | replay an agent run for non-devs |
+
+---
+
 ## License
 
 MIT

package/dist/flowchart.cjs

@@ -375,10 +375,10 @@ var StageNode = (0, import_react3.memo)(function StageNode2({
   const restingBg = isHero ? `color-mix(in srgb, ${theme.nodeMain} 12%, ${theme.bgSecondary})` : theme.bgSecondary;
   const restingBorder = isHero ? theme.nodeMain : theme.border;
   const restingShadow = isHero ? `0 0 10px color-mix(in srgb, ${theme.nodeMain} 22%, transparent)` : `0 2px 8px rgba(0,0,0,0.15)`;
-  const bg = active ? theme.nodeCursor : done ? theme.nodeVisited : error ? theme.error : restingBg;
-  const borderColor = active ? theme.nodeCursor : done ? theme.nodeVisited : error ? theme.error : restingBorder;
-  const shadow = active ? `0 0 22px color-mix(in srgb, ${theme.nodeCursor} 55%, transparent)` : done ? `0 0 8px color-mix(in srgb, ${theme.nodeVisited} 20%, transparent)` : error ? `0 0 12px color-mix(in srgb, ${theme.error} 30%, transparent)` : restingShadow;
-  const textColor = active || done || error ? "#fff" : theme.textPrimary;
+  const bg = active ? theme.nodeCursor : isHero && done ? theme.nodeMain : done ? theme.nodeVisited : error ? theme.error : restingBg;
+  const borderColor = active ? theme.nodeCursor : isHero && done ? theme.nodeMain : done ? theme.nodeVisited : error ? theme.error : restingBorder;
+  const shadow = active ? `0 0 22px color-mix(in srgb, ${theme.nodeCursor} 55%, transparent)` : isHero && done ? `0 0 12px color-mix(in srgb, ${theme.nodeMain} 30%, transparent)` : done ? `0 0 8px color-mix(in srgb, ${theme.nodeVisited} 20%, transparent)` : error ? `0 0 12px color-mix(in srgb, ${theme.error} 30%, transparent)` : restingShadow;
+  const textColor = active ? "#1a1a1a" : done || error ? "#fff" : theme.textPrimary;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Handle, { type: "target", position: import_react4.Position.Top, style: { opacity: 0 } }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(