footprint-explainable-ui 0.25.3 → 0.25.5

package/dist/flowchart.cjs

@@ -94,6 +94,9 @@ var rawDefaults = {
     success: "#22c55e",
     error: "#ef4444",
     warning: "#f59e0b",
+    nodeCursor: "#f59e0b",
+    nodeVisited: "#22c55e",
+    nodeMain: "#6366f1",
     bgPrimary: "#0f172a",
     bgSecondary: "#1e293b",
     bgTertiary: "#334155",
@@ -114,6 +117,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})`,
@@ -142,6 +148,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"),
@@ -357,13 +372,13 @@ var StageNode = (0, import_react3.memo)(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__ */ (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 } }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -392,8 +407,8 @@ var StageNode = (0, import_react3.memo)(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__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
@@ -439,7 +454,7 @@ var StageNode = (0, import_react3.memo)(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"
               }