footprint-explainable-ui 0.25.1 → 0.25.3

package/dist/index.js

@@ -2208,7 +2208,7 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-import { memo as memo8, useState as useState14, useCallback as useCallback8, useMemo as useMemo12, useRef as useRef9, useEffect as useEffect10 } from "react";
+import { memo as memo8, useState as useState14, useCallback as useCallback8, useMemo as useMemo12, useRef as useRef9, useEffect as useEffect11 } from "react";
 
 // src/utils/narrativeSync.ts
 function buildEntryRangeIndex(entries) {
@@ -3331,7 +3331,7 @@ var SubflowBreadcrumb = memo2(function SubflowBreadcrumb2({
 });
 
 // src/components/FlowchartView/TracedFlow.tsx
-import { useCallback as useCallback7, useMemo as useMemo10, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo10, useRef as useRef8, useState as useState10 } from "react";
 import {
   ReactFlow,
   Background,
@@ -3453,6 +3453,16 @@ function createDagreTraceLayout(options = {}) {
   return (graph) => dagreTraceLayout(graph, options);
 }
 
+// src/components/FlowchartView/_internal/devWarn.ts
+function isDevModeEnv() {
+  const proc = globalThis.process;
+  return proc?.env?.NODE_ENV !== "production";
+}
+function devWarn(messageFn, ...extras) {
+  if (!isDevModeEnv()) return;
+  console.warn(messageFn(), ...extras);
+}
+
 // src/components/FlowchartView/_internal/snapLinearSuccessors.ts
 function snapLinearSuccessors(graph, options = {}) {
   if (graph.nodes.length === 0) return graph;
@@ -3554,36 +3564,79 @@ function centerForkParents(graph, options = {}) {
     }
     return minX <= maxX ? Math.max(minX, Math.min(maxX, desiredX)) : x0;
   };
+  const evenFanKids = (forkCenter, kids) => {
+    if (kids.length < 2) return;
+    const sorted = [...kids].sort((a, b) => centerX(a) - centerX(b));
+    let gap = 0;
+    for (let i = 0; i < sorted.length - 1; i++) {
+      gap = Math.max(gap, width.get(sorted[i]) / 2 + nodeSep + width.get(sorted[i + 1]) / 2);
+    }
+    const mid = (sorted.length - 1) / 2;
+    for (let i = 0; i < sorted.length; i++) {
+      workingX.set(sorted[i], forkCenter + (i - mid) * gap - width.get(sorted[i]) / 2);
+    }
+  };
   const order = [...graph.nodes].sort(
     (a, b) => b.position.y - a.position.y || a.position.x - b.position.x || a.id.localeCompare(b.id)
   );
   for (const n of order) {
-    if ((outDegree.get(n.id) ?? 0) < 2) continue;
-    if ((inDegree.get(n.id) ?? 0) > 1) continue;
-    const kids = (childrenOf.get(n.id) ?? []).filter(
+    const outD = outDegree.get(n.id) ?? 0;
+    const inD = inDegree.get(n.id) ?? 0;
+    const isFork = outD >= 2 && inD <= 1;
+    const isMerge = inD >= 2 && outD <= 1;
+    if (!isFork && !isMerge) continue;
+    const kin = ((isFork ? childrenOf.get(n.id) : predsOf.get(n.id)) ?? []).filter(
       (k) => byId.get(k)?.parentId === n.parentId
       // same compound only
     );
-    if (kids.length < 2) continue;
-    const centers = kids.map(centerX);
+    if (kin.length < 2) continue;
+    const centers = kin.map(centerX);
     const wN = width.get(n.id);
     const span = (Math.min(...centers) + Math.max(...centers)) / 2;
     workingX.set(n.id, clampX(n.id, span - wN / 2));
+    if (isFork) {
+      const succSets = kin.map((k) => childrenOf.get(k) ?? []);
+      const isDiamond = kin.length >= 2 && succSets[0].some((s) => succSets.every((ss) => ss.includes(s)));
+      if (isDiamond) evenFanKids(centerX(n.id), kin);
+    }
+    const stepOf = isFork ? predsOf : childrenOf;
     let curId = n.id;
     const walked = /* @__PURE__ */ new Set([curId]);
     for (; ; ) {
-      const ps = predsOf.get(curId);
-      if (!ps || ps.length !== 1) break;
-      const p = ps[0];
-      if (walked.has(p)) break;
-      if ((outDegree.get(p) ?? 0) !== 1) break;
-      if ((inDegree.get(p) ?? 0) > 1) break;
-      if (byId.get(p)?.parentId !== byId.get(curId)?.parentId) break;
-      workingX.set(p, clampX(p, centerX(curId) - width.get(p) / 2));
-      walked.add(p);
-      curId = p;
+      const nexts = stepOf.get(curId);
+      if (!nexts || nexts.length !== 1) break;
+      const m = nexts[0];
+      if (walked.has(m)) break;
+      if ((outDegree.get(m) ?? 0) > 1) break;
+      if ((inDegree.get(m) ?? 0) > 1) break;
+      if (byId.get(m)?.parentId !== byId.get(curId)?.parentId) break;
+      workingX.set(m, clampX(m, centerX(curId) - width.get(m) / 2));
+      walked.add(m);
+      curId = m;
     }
   }
+  for (const n of order) {
+    const outD = outDegree.get(n.id) ?? 0;
+    const inD = inDegree.get(n.id) ?? 0;
+    if (!(outD >= 2 && inD <= 1)) continue;
+    const kids = (childrenOf.get(n.id) ?? []).filter(
+      (k) => byId.get(k)?.parentId === n.parentId
+    );
+    if (kids.length < 2) continue;
+    const succSets = kids.map((k) => childrenOf.get(k) ?? []);
+    const isDiamond = succSets[0].some((s) => succSets.every((ss) => ss.includes(s)));
+    if (isDiamond) continue;
+    const ps = predsOf.get(n.id);
+    if (!ps || ps.length !== 1) continue;
+    const pred = ps[0];
+    if ((outDegree.get(pred) ?? 0) !== 1) continue;
+    if (byId.get(pred)?.parentId !== byId.get(n.id)?.parentId) continue;
+    const before = centerX(n.id);
+    workingX.set(n.id, clampX(n.id, centerX(pred) - width.get(n.id) / 2));
+    const delta = centerX(n.id) - before;
+    if (delta === 0) continue;
+    for (const k of kids) workingX.set(k, clampX(k, workingX.get(k) + delta));
+  }
   const nodes = graph.nodes.map(
     (n) => workingX.get(n.id) === n.position.x ? n : { ...n, position: { x: workingX.get(n.id), y: n.position.y } }
   );
@@ -4898,6 +4951,13 @@ function TracedFlow({
   style
 }) {
   const layout = layoutProp ?? dagreTraceLayout;
+  useEffect10(() => {
+    if (layoutProp === dagreTraceLayout) {
+      devWarn(
+        () => "[footprint-explainable-ui] <TracedFlow layout={dagreTraceLayout}> bypasses the built-in measure-then-layout pipeline (content-exact sizing, fork/merge centering, straight spines). OMIT the `layout` prop to use it \u2014 passing the raw dagreTraceLayout silently forfeits every layout improvement eui ships."
+      );
+    }
+  }, [layoutProp]);
   const colors = useMemo10(
     () => ({ ...DEFAULT_COLORS, ...colorOverrides ?? {} }),
     [colorOverrides]
@@ -5813,7 +5873,7 @@ var DetailsContent = memo8(function DetailsContent2({
   const allViews = [...builtInViews, ...extraViews ?? []];
   const [activeViewId, setActiveViewId] = useState14(allViews[0]?.id ?? "memory");
   const viewIds = allViews.map((v2) => v2.id).join(",");
-  useEffect10(() => {
+  useEffect11(() => {
     if (!allViews.find((v2) => v2.id === activeViewId)) {
       setActiveViewId(allViews[0]?.id ?? "memory");
     }
@@ -6070,7 +6130,7 @@ function ExplainableShell({
   const shellRef = useRef9(null);
   const [isNarrow, setIsNarrow] = useState14(false);
   const [isMedium, setIsMedium] = useState14(false);
-  useEffect10(() => {
+  useEffect11(() => {
     const el = shellRef.current;
     if (!el) return;
     const ro = new ResizeObserver(([entry]) => {
@@ -6115,7 +6175,7 @@ function ExplainableShell({
   const [rightPanelMode, setRightPanelMode] = useState14("insights");
   const [leftExpanded, setLeftExpanded] = useState14(defaultExpanded?.topology ?? false);
   const [timelineExpanded, setTimelineExpanded] = useState14(defaultExpanded?.timeline ?? false);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isNarrow) {
       setLeftExpanded(false);
       setRightExpanded(false);