footprint-explainable-ui 0.26.1 → 0.27.0

package/dist/flowchart.cjs

@@ -2430,8 +2430,8 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
         gap: 6,
         padding: "6px 12px",
         fontSize: 11,
-        background: rawDefaults.colors.bgSecondary,
-        borderBottom: `1px solid ${rawDefaults.colors.border}`,
+        background: theme.bgSecondary,
+        borderBottom: `1px solid ${theme.border}`,
         flexShrink: 0
       },
       "aria-label": "Subflow breadcrumb",
@@ -2454,7 +2454,7 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
                     padding: 0,
                     fontSize: 11,
                     fontWeight: isLast ? 600 : 500,
-                    color: isLast ? rawDefaults.colors.textPrimary : rawDefaults.colors.primary,
+                    color: isLast ? theme.textPrimary : theme.primary,
                     cursor: isLast ? "default" : "pointer",
                     textDecoration: isLast ? "none" : "underline",
                     fontFamily: "inherit"
@@ -2462,7 +2462,7 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
                   children: entry.label
                 }
               ),
-              !isLast && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: rawDefaults.colors.textMuted }, children: "\u203A" })
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: theme.textMuted }, children: "\u203A" })
             ]
           },
           entry.subflowId ?? "__top__"
@@ -2475,10 +2475,9 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
 // src/components/GroupContainerNode/GroupContainerNode.tsx
 var import_react15 = require("@xyflow/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var C = rawDefaults.colors;
 function GroupContainerNode({ data }) {
   const d = data;
-  const borderColor = d.error ? C.error : d.active ? C.primary : d.done ? C.success : C.border;
+  const borderColor = d.error ? theme.error : d.active ? theme.primary : d.done ? theme.nodeVisited : theme.border;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
@@ -2488,8 +2487,9 @@ function GroupContainerNode({ data }) {
         boxSizing: "border-box",
         border: `1.5px ${d.active || d.done || d.error ? "solid" : "dashed"} ${borderColor}`,
         borderRadius: 12,
-        // Translucent so the dotted background + nested children read clearly.
-        background: "rgba(148, 163, 184, 0.06)",
+        // Translucent (theme-derived) so the dotted background + nested children
+        // read clearly, while still following dark/light.
+        background: `color-mix(in srgb, ${theme.textMuted} 7%, transparent)`,
         opacity: d.dimmed ? 0.4 : 1,
         position: "relative"
       },
@@ -2504,7 +2504,7 @@ function GroupContainerNode({ data }) {
               padding: "8px 12px",
               fontSize: 12,
               fontWeight: 600,
-              color: C.textMuted,
+              color: theme.textMuted,
               letterSpacing: 0.2
             },
             children: [
@@ -3811,11 +3811,10 @@ function createTraceStructureRecorder(options = {}) {
 // src/components/SlotPillNode/SlotPillNode.tsx
 var import_react24 = require("@xyflow/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var C2 = rawDefaults.colors;
 function SlotPillNode({ data }) {
   const d = data;
   const lit = !!(d.active || d.selected);
-  const accent = lit ? C2.primary : d.done ? C2.success : C2.textMuted;
+  const accent = lit ? theme.primary : d.done ? theme.nodeVisited : theme.textMuted;
   const opacity = d.dimmed && !lit ? 0.45 : 1;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
@@ -3830,13 +3829,16 @@ function SlotPillNode({ data }) {
         padding: "0 12px",
         borderRadius: 999,
         // full pill
-        border: `1.5px solid ${lit ? C2.primary : C2.border}`,
-        background: lit ? "rgba(99, 102, 241, 0.14)" : "rgba(148, 163, 184, 0.06)",
-        boxShadow: lit ? `0 0 0 2px rgba(99,102,241,0.25)` : "none",
+        border: `1.5px solid ${lit ? theme.primary : theme.border}`,
+        // Fills derive from the theme so the pill follows dark/light — the lit
+        // state is a faint primary tint over the resting node bg, unlit is the
+        // resting bg itself (visible against the canvas via the border).
+        background: lit ? `color-mix(in srgb, ${theme.primary} 14%, ${theme.bgSecondary})` : theme.bgSecondary,
+        boxShadow: lit ? `0 0 0 2px color-mix(in srgb, ${theme.primary} 25%, transparent)` : "none",
         opacity,
         fontSize: 12,
         fontWeight: 600,
-        color: lit ? C2.textPrimary : C2.textSecondary,
+        color: lit ? theme.textPrimary : theme.textSecondary,
         whiteSpace: "nowrap",
         overflow: "hidden",
         transition: "opacity 120ms, box-shadow 120ms, border-color 120ms"