footprint-explainable-ui 0.21.0 → 0.23.0

package/README.md

@@ -362,6 +362,22 @@ Strip all built-in styles for full CSS control. Components render semantic `data
 
 ---
 
+## Golden-Trace Fixtures (contributors)
+
+The pipeline (structure/runtime translators, dagre layout, snapshot adapter,
+narrative sync) is pinned against **real footprintjs engine output**, not
+hand-built mocks. `test/fixtures/golden/` holds recorded traces from 4
+representative charts (linear+decider, subflow+loop, parallel fork,
+pause/resume); `test/golden/goldenTraces.test.ts` replays them through the full
+pipeline and snapshot-asserts the outputs in `test/golden/__snapshots__/`.
+
+- **Engine shape changed** (new footprintjs): `npm i -D --save-exact footprintjs@<version> && npm run fixtures:regen`. The generator runs every chart twice and fails on any nondeterminism.
+- **Pipeline output changed intentionally** (eui edit): `npx vitest run test/golden -u`, then review the snapshot diff.
+- `test/fixtures/golden/manifest.json` records the footprintjs version the fixtures were recorded with.
+
+`footprintjs` is a devDependency used ONLY by the generator — the published
+library still has zero footprintjs dependency (it consumes plain JSON shapes).
+
 ## License
 
 MIT

package/dist/flowchart.cjs

@@ -362,7 +362,7 @@ var StageNode = (0, import_react3.memo)(function StageNode2({
   const restingShadow = isHero ? `0 0 10px color-mix(in srgb, ${theme.primary} 22%, transparent)` : `0 2px 8px rgba(0,0,0,0.15)`;
   const bg = active ? theme.primary : done ? theme.success : error ? theme.error : restingBg;
   const borderColor = active ? theme.primary : done ? theme.success : error ? theme.error : restingBorder;
-  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)` : restingShadow;
+  const shadow = active ? `0 0 22px color-mix(in srgb, ${theme.primary} 55%, 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)` : restingShadow;
   const textColor = active || 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 } }),
@@ -445,6 +445,26 @@ var StageNode = (0, import_react3.memo)(function StageNode2({
               }
             }
           ),
+          active && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: -9,
+                right: -8,
+                zIndex: 11,
+                background: theme.warning,
+                color: "#1a1a1a",
+                fontSize: 9,
+                fontWeight: 800,
+                letterSpacing: 0.6,
+                padding: "2px 6px",
+                borderRadius: 10,
+                boxShadow: `0 0 10px color-mix(in srgb, ${theme.warning} 60%, transparent)`
+              },
+              children: "NOW"
+            }
+          ),
           isDecider ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", width: 120, height: 72 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
@@ -1455,6 +1475,19 @@ function createMainChartBoxLayout(opts) {
 
 // src/components/LoopBackEdge/LoopBackEdge.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var LOOP_DASH = "5 5";
+var LOOP_STROKE_OPACITY_CAP = 0.55;
+var LOOP_STROKE_WIDTH = 1.5;
+function softenLoopStyle(style) {
+  const passedStrokeOpacity = typeof style?.strokeOpacity === "number" ? style.strokeOpacity : 1;
+  return {
+    ...style,
+    strokeDasharray: style?.strokeDasharray ?? LOOP_DASH,
+    strokeOpacity: Math.min(passedStrokeOpacity, LOOP_STROKE_OPACITY_CAP),
+    strokeWidth: LOOP_STROKE_WIDTH
+  };
+}
+var LOOP_CORNER_RADIUS = 28;
 function rightEdge(node) {
   return node.internals.positionAbsolute.x + (node.measured.width ?? 0);
 }
@@ -1475,11 +1508,21 @@ function LoopBackEdge({ id, source, target, markerEnd, style }) {
     return loopBackPath(
       { right: rightEdge(src), centerY: centerY(src) },
       { right: rightEdge(tgt), centerY: centerY(tgt) },
-      laneX
+      laneX,
+      LOOP_CORNER_RADIUS
     );
   });
   if (!path) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react8.BaseEdge, { id, path, markerEnd, style, "aria-label": "Loop back" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react8.BaseEdge,
+    {
+      id,
+      path,
+      markerEnd,
+      style: softenLoopStyle(style),
+      "aria-label": "Loop back"
+    }
+  );
 }
 
 // src/components/SmartStepEdge/SmartStepEdge.tsx
@@ -2078,10 +2121,9 @@ function aggregateMountStatus(slice, graph, currentSubflowId) {
     const members = graph.nodes.filter((n) => n.data?.subflowOf === sfId);
     if (members.length === 0) continue;
     const anyActive = members.some((m) => m.id === slice.activeStageId);
-    const anyDone = members.some((m) => slice.doneStageIds.has(m.id));
     const allDone = members.every((m) => slice.doneStageIds.has(m.id));
     if (allDone) doneIds.add(mount.id);
-    else if ((anyActive || anyDone) && currentSubflowId === null) {
+    else if (anyActive && currentSubflowId === null) {
       activeId = mount.id;
     }
   }
@@ -2124,6 +2166,7 @@ var import_react14 = require("react");
 function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
   const duration = options.duration ?? 200;
   const padding2 = options.padding ?? 0.1;
+  const refitKey = options.refitKey;
   (0, import_react14.useEffect)(() => {
     const el = wrapperRef.current;
     if (!el || !rfInstance) return;
@@ -2143,6 +2186,19 @@ function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
       cancelAnimationFrame(raf);
     };
   }, [rfInstance, wrapperRef, duration, padding2]);
+  (0, import_react14.useEffect)(() => {
+    if (!rfInstance) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        rfInstance.fitView({ duration, padding: padding2 });
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [rfInstance, refitKey, duration, padding2]);
 }
 
 // src/components/FlowchartView/SubflowBreadcrumbBar.tsx
@@ -2476,7 +2532,7 @@ function TracedFlow({
   );
   const wrapperRef = (0, import_react16.useRef)(null);
   const [rfInstance, setRfInstance] = (0, import_react16.useState)(null);
-  useChartAutoRefit(wrapperRef, rfInstance);
+  useChartAutoRefit(wrapperRef, rfInstance, { refitKey: drill.currentSubflowId });
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {