footprint-explainable-ui 0.25.3 → 0.25.5

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"),
@@ -3869,13 +3887,13 @@ 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 textColor = active || done || error ? "#fff" : theme.textPrimary;
+  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 : 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__ */ jsxs15(Fragment5, { children: [
     /* @__PURE__ */ jsx16(Handle, { type: "target", position: Position.Top, style: { opacity: 0 } }),
     /* @__PURE__ */ jsx16("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs15(
@@ -3904,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",
                   {
@@ -3951,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"
               }