footprint-explainable-ui 0.25.2 → 0.25.4

package/dist/index.d.cts

@@ -68,6 +68,11 @@ interface ThemeTokens {
         success?: string;
         error?: string;
         warning?: string;
+        /** Semantic node-state roles (a runtime overlay maps onto these): the scrub
+         *  cursor, the visited path, and a group's lead node. */
+        nodeCursor?: string;
+        nodeVisited?: string;
+        nodeMain?: string;
         bgPrimary?: string;
         bgSecondary?: string;
         bgTertiary?: string;
@@ -91,6 +96,9 @@ declare const rawDefaults: {
         readonly success: "#22c55e";
         readonly error: "#ef4444";
         readonly warning: "#f59e0b";
+        readonly nodeCursor: "#f59e0b";
+        readonly nodeVisited: "#22c55e";
+        readonly nodeMain: "#6366f1";
         readonly bgPrimary: "#0f172a";
         readonly bgSecondary: "#1e293b";
         readonly bgTertiary: "#334155";

package/dist/index.d.ts

@@ -68,6 +68,11 @@ interface ThemeTokens {
         success?: string;
         error?: string;
         warning?: string;
+        /** Semantic node-state roles (a runtime overlay maps onto these): the scrub
+         *  cursor, the visited path, and a group's lead node. */
+        nodeCursor?: string;
+        nodeVisited?: string;
+        nodeMain?: string;
         bgPrimary?: string;
         bgSecondary?: string;
         bgTertiary?: string;
@@ -91,6 +96,9 @@ declare const rawDefaults: {
         readonly success: "#22c55e";
         readonly error: "#ef4444";
         readonly warning: "#f59e0b";
+        readonly nodeCursor: "#f59e0b";
+        readonly nodeVisited: "#22c55e";
+        readonly nodeMain: "#6366f1";
         readonly bgPrimary: "#0f172a";
         readonly bgSecondary: "#1e293b";
         readonly bgTertiary: "#334155";

package/dist/index.js

@@ -10,6 +10,9 @@ function tokensToCSSVars(tokens) {
     if (c.success) vars["--fp-color-success"] = c.success;
     if (c.error) vars["--fp-color-error"] = c.error;
     if (c.warning) vars["--fp-color-warning"] = c.warning;
+    if (c.nodeCursor) vars["--fp-node-cursor"] = c.nodeCursor;
+    if (c.nodeVisited) vars["--fp-node-visited"] = c.nodeVisited;
+    if (c.nodeMain) vars["--fp-node-main"] = c.nodeMain;
     if (c.bgPrimary) vars["--fp-bg-primary"] = c.bgPrimary;
     if (c.bgSecondary) vars["--fp-bg-secondary"] = c.bgSecondary;
     if (c.bgTertiary) vars["--fp-bg-tertiary"] = c.bgTertiary;
@@ -29,6 +32,9 @@ var rawDefaults = {
     success: "#22c55e",
     error: "#ef4444",
     warning: "#f59e0b",
+    nodeCursor: "#f59e0b",
+    nodeVisited: "#22c55e",
+    nodeMain: "#6366f1",
     bgPrimary: "#0f172a",
     bgSecondary: "#1e293b",
     bgTertiary: "#334155",
@@ -49,6 +55,9 @@ var defaultTokens = {
     success: `var(--fp-color-success, ${rawDefaults.colors.success})`,
     error: `var(--fp-color-error, ${rawDefaults.colors.error})`,
     warning: `var(--fp-color-warning, ${rawDefaults.colors.warning})`,
+    nodeCursor: `var(--fp-node-cursor, ${rawDefaults.colors.nodeCursor})`,
+    nodeVisited: `var(--fp-node-visited, ${rawDefaults.colors.nodeVisited})`,
+    nodeMain: `var(--fp-node-main, ${rawDefaults.colors.nodeMain})`,
     bgPrimary: `var(--fp-bg-primary, ${rawDefaults.colors.bgPrimary})`,
     bgSecondary: `var(--fp-bg-secondary, ${rawDefaults.colors.bgSecondary})`,
     bgTertiary: `var(--fp-bg-tertiary, ${rawDefaults.colors.bgTertiary})`,
@@ -91,6 +100,15 @@ var theme = {
   success: v("--fp-color-success", "#22c55e"),
   error: v("--fp-color-error", "#ef4444"),
   warning: v("--fp-color-warning", "#f59e0b"),
+  // Semantic NODE-STATE colors — first-class, themeable roles a runtime overlay
+  // maps onto (scrub cursor / executed / a group's lead node). Distinct from the
+  // generic `primary` accent so the three read as three different things.
+  nodeCursor: v("--fp-node-cursor", "#f59e0b"),
+  // the current / scrubbed-to step
+  nodeVisited: v("--fp-node-visited", "#22c55e"),
+  // executed up to the cursor
+  nodeMain: v("--fp-node-main", "#6366f1"),
+  // the lead / "hero" node of a group
   bgPrimary: v("--fp-bg-primary", "#0f172a"),
   bgSecondary: v("--fp-bg-secondary", "#1e293b"),
   bgTertiary: v("--fp-bg-tertiary", "#334155"),
@@ -3564,6 +3582,18 @@ 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)
   );
@@ -3582,6 +3612,11 @@ function centerForkParents(graph, options = {}) {
     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]);
@@ -3598,6 +3633,28 @@ function centerForkParents(graph, options = {}) {
       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 } }
   );
@@ -3830,12 +3887,12 @@ var StageNode = memo3(function StageNode2({
   const isHero = data.emphasis === "hero";
   const isMuted = data.emphasis === "muted";
   const sizeScale = data.size === "lg" ? 1.3 : data.size === "sm" ? 0.85 : 1;
-  const restingBg = isHero ? `color-mix(in srgb, ${theme.primary} 12%, ${theme.bgSecondary})` : theme.bgSecondary;
-  const restingBorder = isHero ? theme.primary : theme.border;
-  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 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 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;
   return /* @__PURE__ */ jsxs15(Fragment5, { children: [
     /* @__PURE__ */ jsx16(Handle, { type: "target", position: Position.Top, style: { opacity: 0 } }),
@@ -3865,8 +3922,8 @@ var StageNode = memo3(function StageNode2({
               },
               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)`;
+                const badgeBg = isLatest && active ? theme.nodeCursor : theme.nodeVisited;
+                const glow = isLatest && active ? `color-mix(in srgb, ${theme.nodeCursor} 50%, transparent)` : `color-mix(in srgb, ${theme.nodeVisited} 40%, transparent)`;
                 return /* @__PURE__ */ jsx16(
                   "div",
                   {
@@ -3912,7 +3969,7 @@ var StageNode = memo3(function StageNode2({
                 inset: -6,
                 borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
                 clipPath: isDecider ? "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" : void 0,
-                border: `2px solid ${theme.primary}`,
+                border: `2px solid ${theme.nodeCursor}`,
                 opacity: 0.3,
                 animation: "fp-pulse 1.5s ease-out infinite"
               }