footprint-explainable-ui 0.21.0 → 0.22.0

package/dist/flowchart.js

@@ -280,7 +280,7 @@ var StageNode = 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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(Handle, { type: "target", position: Position.Top, style: { opacity: 0 } }),
@@ -363,6 +363,26 @@ var StageNode = memo(function StageNode2({
               }
             }
           ),
+          active && /* @__PURE__ */ jsx2(
+            "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__ */ jsxs("div", { style: { position: "relative", width: 120, height: 72 }, children: [
             /* @__PURE__ */ jsx2(
               "div",
@@ -1378,6 +1398,19 @@ function createMainChartBoxLayout(opts) {
 
 // src/components/LoopBackEdge/LoopBackEdge.tsx
 import { jsx as jsx6 } from "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);
 }
@@ -1398,11 +1431,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__ */ jsx6(BaseEdge, { id, path, markerEnd, style, "aria-label": "Loop back" });
+  return /* @__PURE__ */ jsx6(
+    BaseEdge,
+    {
+      id,
+      path,
+      markerEnd,
+      style: softenLoopStyle(style),
+      "aria-label": "Loop back"
+    }
+  );
 }
 
 // src/components/SmartStepEdge/SmartStepEdge.tsx
@@ -2006,10 +2049,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;
     }
   }
@@ -2052,6 +2094,7 @@ import { useEffect as useEffect5 } from "react";
 function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
   const duration = options.duration ?? 200;
   const padding2 = options.padding ?? 0.1;
+  const refitKey = options.refitKey;
   useEffect5(() => {
     const el = wrapperRef.current;
     if (!el || !rfInstance) return;
@@ -2071,6 +2114,19 @@ function useChartAutoRefit(wrapperRef, rfInstance, options = {}) {
       cancelAnimationFrame(raf);
     };
   }, [rfInstance, wrapperRef, duration, padding2]);
+  useEffect5(() => {
+    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
@@ -2404,7 +2460,7 @@ function TracedFlow({
   );
   const wrapperRef = useRef5(null);
   const [rfInstance, setRfInstance] = useState4(null);
-  useChartAutoRefit(wrapperRef, rfInstance);
+  useChartAutoRefit(wrapperRef, rfInstance, { refitKey: drill.currentSubflowId });
   return /* @__PURE__ */ jsxs8(
     "div",
     {