footprint-explainable-ui 0.26.0 → 0.26.2

package/dist/index.d.cts

@@ -624,6 +624,19 @@ interface RecorderView {
         selectedIndex: number;
     }) => React.ReactNode;
 }
+/**
+ * The Trace flowchart's two-colour theme (footprintjs level). `mode` selects
+ * the neutral base (unvisited / edges) for dark or light; `visited` and
+ * `current` are the two semantic colours. All optional — sensible per-mode
+ * defaults are used for anything omitted.
+ */
+interface TraceTheme {
+    mode?: "dark" | "light";
+    /** Executed / done nodes. */
+    visited?: string;
+    /** The node at the current cursor position ("now"). */
+    current?: string;
+}
 interface ExplainableShellProps extends BaseComponentProps {
     /**
      * Pre-converted visualization snapshots. Use when you've already called
@@ -661,6 +674,15 @@ interface ExplainableShellProps extends BaseComponentProps {
      * time-travel trace UI.
      */
     runtimeOverlay?: RuntimeOverlay | null;
+    /**
+     * Trace flowchart theme — the footprintjs-LEVEL **two-colour** scheme:
+     * `visited` (executed nodes) + `current` (the cursor node). `mode` picks the
+     * neutral base (unvisited nodes / edges follow dark/light; the background is
+     * transparent, so it inherits your container). Colours are optional — omit to
+     * use the per-mode defaults. The agent-semantic three-colour theme belongs to
+     * `<Lens>`, not here.
+     */
+    traceTheme?: TraceTheme;
     title?: string;
     resultData?: Record<string, unknown> | null;
     logs?: string[];
@@ -713,7 +735,7 @@ interface ExplainableShellProps extends BaseComponentProps {
      */
     showStageId?: boolean;
 }
-declare function ExplainableShell({ snapshots: snapshotsProp, runtimeSnapshot, title, resultData: resultDataProp, logs, narrativeEntries, tabs, defaultTab, hideConsole, hideTabs: hideTabsProp, panelLabels, defaultExpanded, recorderViews, renderFlowchart, showStageId, traceGraph, runtimeOverlay, size, unstyled, className, style, }: ExplainableShellProps): react.JSX.Element;
+declare function ExplainableShell({ snapshots: snapshotsProp, runtimeSnapshot, title, resultData: resultDataProp, logs, narrativeEntries, tabs, defaultTab, hideConsole, hideTabs: hideTabsProp, panelLabels, defaultExpanded, recorderViews, renderFlowchart, showStageId, traceGraph, runtimeOverlay, traceTheme, size, unstyled, className, style, }: ExplainableShellProps): react.JSX.Element;
 
 /**
  * TraceViewer — drop-in component that renders an `agentfootprint.exportTrace()`
@@ -1100,4 +1122,4 @@ interface CompactTimelineProps {
 }
 declare const CompactTimeline: react.NamedExoticComponent<CompactTimelineProps>;
 
-export { type NarrativeEntry as AdapterNarrativeEntry, type AgentfootprintTrace, type BaseComponentProps, type CausalFrame, CompactTimeline, type CompactTimelineProps, type DarkModeTokensOptions, DataTracePanel, type DataTracePanelProps, type DefaultExpanded, type DiffEntry, type EntryRangeIndex, ExplainableShell, type ExplainableShellProps, FootprintTheme, GanttTimeline, type GanttTimelineProps, type InsightConfig, InsightPanel, type InsightPanelProps, InspectorPanel, type InspectorPanelProps, type MemoryChange, MemoryInspector, type MemoryInspectorProps, MemoryPanel, type MemoryPanelProps, type NarrativeEntry, NarrativeLog, type NarrativeLogProps, NarrativePanel, type NarrativePanelProps, NarrativeTrace, type NarrativeTraceProps, type PanelLabels, type RecorderView, ResultPanel, type ResultPanelProps, type RuntimeSnapshotInput, ScopeDiff, type ScopeDiffProps, type ShellTab, type Size, SnapshotPanel, type SnapshotPanelProps, type StageDetailMode, StageDetailPanel, type StageDetailPanelProps, type StageSnapshot, StoryNarrative, type StoryNarrativeProps, SubflowTree, type SubflowTreeEntry, type SubflowTreeProps, type ThemePresetName, type ThemeTokens, TimeTravelControls, type TimeTravelControlsProps, type TraceParseError, TraceViewer, type TraceViewerProps, buildEntryRangeIndex, computeRevealedEntryCount, coolDark, coolLight, createSnapshots, defaultTokens, extractSubflowNarrative, mergeWritePatch, rawDefaults, subflowResultToSnapshots, themePresets, toVisualizationSnapshots, tokensToCSSVars, useDarkModeTokens, useFootprintTheme, warmDark, warmLight };
+export { type NarrativeEntry as AdapterNarrativeEntry, type AgentfootprintTrace, type BaseComponentProps, type CausalFrame, CompactTimeline, type CompactTimelineProps, type DarkModeTokensOptions, DataTracePanel, type DataTracePanelProps, type DefaultExpanded, type DiffEntry, type EntryRangeIndex, ExplainableShell, type ExplainableShellProps, FootprintTheme, GanttTimeline, type GanttTimelineProps, type InsightConfig, InsightPanel, type InsightPanelProps, InspectorPanel, type InspectorPanelProps, type MemoryChange, MemoryInspector, type MemoryInspectorProps, MemoryPanel, type MemoryPanelProps, type NarrativeEntry, NarrativeLog, type NarrativeLogProps, NarrativePanel, type NarrativePanelProps, NarrativeTrace, type NarrativeTraceProps, type PanelLabels, type RecorderView, ResultPanel, type ResultPanelProps, type RuntimeSnapshotInput, ScopeDiff, type ScopeDiffProps, type ShellTab, type Size, SnapshotPanel, type SnapshotPanelProps, type StageDetailMode, StageDetailPanel, type StageDetailPanelProps, type StageSnapshot, StoryNarrative, type StoryNarrativeProps, SubflowTree, type SubflowTreeEntry, type SubflowTreeProps, type ThemePresetName, type ThemeTokens, TimeTravelControls, type TimeTravelControlsProps, type TraceParseError, type TraceTheme, TraceViewer, type TraceViewerProps, buildEntryRangeIndex, computeRevealedEntryCount, coolDark, coolLight, createSnapshots, defaultTokens, extractSubflowNarrative, mergeWritePatch, rawDefaults, subflowResultToSnapshots, themePresets, toVisualizationSnapshots, tokensToCSSVars, useDarkModeTokens, useFootprintTheme, warmDark, warmLight };

package/dist/index.d.ts

@@ -624,6 +624,19 @@ interface RecorderView {
         selectedIndex: number;
     }) => React.ReactNode;
 }
+/**
+ * The Trace flowchart's two-colour theme (footprintjs level). `mode` selects
+ * the neutral base (unvisited / edges) for dark or light; `visited` and
+ * `current` are the two semantic colours. All optional — sensible per-mode
+ * defaults are used for anything omitted.
+ */
+interface TraceTheme {
+    mode?: "dark" | "light";
+    /** Executed / done nodes. */
+    visited?: string;
+    /** The node at the current cursor position ("now"). */
+    current?: string;
+}
 interface ExplainableShellProps extends BaseComponentProps {
     /**
      * Pre-converted visualization snapshots. Use when you've already called
@@ -661,6 +674,15 @@ interface ExplainableShellProps extends BaseComponentProps {
      * time-travel trace UI.
      */
     runtimeOverlay?: RuntimeOverlay | null;
+    /**
+     * Trace flowchart theme — the footprintjs-LEVEL **two-colour** scheme:
+     * `visited` (executed nodes) + `current` (the cursor node). `mode` picks the
+     * neutral base (unvisited nodes / edges follow dark/light; the background is
+     * transparent, so it inherits your container). Colours are optional — omit to
+     * use the per-mode defaults. The agent-semantic three-colour theme belongs to
+     * `<Lens>`, not here.
+     */
+    traceTheme?: TraceTheme;
     title?: string;
     resultData?: Record<string, unknown> | null;
     logs?: string[];
@@ -713,7 +735,7 @@ interface ExplainableShellProps extends BaseComponentProps {
      */
     showStageId?: boolean;
 }
-declare function ExplainableShell({ snapshots: snapshotsProp, runtimeSnapshot, title, resultData: resultDataProp, logs, narrativeEntries, tabs, defaultTab, hideConsole, hideTabs: hideTabsProp, panelLabels, defaultExpanded, recorderViews, renderFlowchart, showStageId, traceGraph, runtimeOverlay, size, unstyled, className, style, }: ExplainableShellProps): react.JSX.Element;
+declare function ExplainableShell({ snapshots: snapshotsProp, runtimeSnapshot, title, resultData: resultDataProp, logs, narrativeEntries, tabs, defaultTab, hideConsole, hideTabs: hideTabsProp, panelLabels, defaultExpanded, recorderViews, renderFlowchart, showStageId, traceGraph, runtimeOverlay, traceTheme, size, unstyled, className, style, }: ExplainableShellProps): react.JSX.Element;
 
 /**
  * TraceViewer — drop-in component that renders an `agentfootprint.exportTrace()`
@@ -1100,4 +1122,4 @@ interface CompactTimelineProps {
 }
 declare const CompactTimeline: react.NamedExoticComponent<CompactTimelineProps>;
 
-export { type NarrativeEntry as AdapterNarrativeEntry, type AgentfootprintTrace, type BaseComponentProps, type CausalFrame, CompactTimeline, type CompactTimelineProps, type DarkModeTokensOptions, DataTracePanel, type DataTracePanelProps, type DefaultExpanded, type DiffEntry, type EntryRangeIndex, ExplainableShell, type ExplainableShellProps, FootprintTheme, GanttTimeline, type GanttTimelineProps, type InsightConfig, InsightPanel, type InsightPanelProps, InspectorPanel, type InspectorPanelProps, type MemoryChange, MemoryInspector, type MemoryInspectorProps, MemoryPanel, type MemoryPanelProps, type NarrativeEntry, NarrativeLog, type NarrativeLogProps, NarrativePanel, type NarrativePanelProps, NarrativeTrace, type NarrativeTraceProps, type PanelLabels, type RecorderView, ResultPanel, type ResultPanelProps, type RuntimeSnapshotInput, ScopeDiff, type ScopeDiffProps, type ShellTab, type Size, SnapshotPanel, type SnapshotPanelProps, type StageDetailMode, StageDetailPanel, type StageDetailPanelProps, type StageSnapshot, StoryNarrative, type StoryNarrativeProps, SubflowTree, type SubflowTreeEntry, type SubflowTreeProps, type ThemePresetName, type ThemeTokens, TimeTravelControls, type TimeTravelControlsProps, type TraceParseError, TraceViewer, type TraceViewerProps, buildEntryRangeIndex, computeRevealedEntryCount, coolDark, coolLight, createSnapshots, defaultTokens, extractSubflowNarrative, mergeWritePatch, rawDefaults, subflowResultToSnapshots, themePresets, toVisualizationSnapshots, tokensToCSSVars, useDarkModeTokens, useFootprintTheme, warmDark, warmLight };
+export { type NarrativeEntry as AdapterNarrativeEntry, type AgentfootprintTrace, type BaseComponentProps, type CausalFrame, CompactTimeline, type CompactTimelineProps, type DarkModeTokensOptions, DataTracePanel, type DataTracePanelProps, type DefaultExpanded, type DiffEntry, type EntryRangeIndex, ExplainableShell, type ExplainableShellProps, FootprintTheme, GanttTimeline, type GanttTimelineProps, type InsightConfig, InsightPanel, type InsightPanelProps, InspectorPanel, type InspectorPanelProps, type MemoryChange, MemoryInspector, type MemoryInspectorProps, MemoryPanel, type MemoryPanelProps, type NarrativeEntry, NarrativeLog, type NarrativeLogProps, NarrativePanel, type NarrativePanelProps, NarrativeTrace, type NarrativeTraceProps, type PanelLabels, type RecorderView, ResultPanel, type ResultPanelProps, type RuntimeSnapshotInput, ScopeDiff, type ScopeDiffProps, type ShellTab, type Size, SnapshotPanel, type SnapshotPanelProps, type StageDetailMode, StageDetailPanel, type StageDetailPanelProps, type StageSnapshot, StoryNarrative, type StoryNarrativeProps, SubflowTree, type SubflowTreeEntry, type SubflowTreeProps, type ThemePresetName, type ThemeTokens, TimeTravelControls, type TimeTravelControlsProps, type TraceParseError, type TraceTheme, TraceViewer, type TraceViewerProps, buildEntryRangeIndex, computeRevealedEntryCount, coolDark, coolLight, createSnapshots, defaultTokens, extractSubflowNarrative, mergeWritePatch, rawDefaults, subflowResultToSnapshots, themePresets, toVisualizationSnapshots, tokensToCSSVars, useDarkModeTokens, useFootprintTheme, warmDark, warmLight };

package/dist/index.js

@@ -4346,8 +4346,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",
@@ -4370,7 +4370,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"
@@ -4378,7 +4378,7 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
                   children: entry.label
                 }
               ),
-              !isLast && /* @__PURE__ */ jsx17("span", { style: { color: rawDefaults.colors.textMuted }, children: "\u203A" })
+              !isLast && /* @__PURE__ */ jsx17("span", { style: { color: theme.textMuted }, children: "\u203A" })
             ]
           },
           entry.subflowId ?? "__top__"
@@ -4391,10 +4391,9 @@ function SubflowBreadcrumbBar({ entries, onNavigate }) {
 // src/components/GroupContainerNode/GroupContainerNode.tsx
 import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
 import { jsx as jsx18, jsxs as jsxs17 } from "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__ */ jsxs17(
     "div",
     {
@@ -4404,8 +4403,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"
       },
@@ -4420,7 +4420,7 @@ function GroupContainerNode({ data }) {
               padding: "8px 12px",
               fontSize: 12,
               fontWeight: 600,
-              color: C.textMuted,
+              color: theme.textMuted,
               letterSpacing: 0.2
             },
             children: [
@@ -6075,6 +6075,7 @@ function ExplainableShell({
   showStageId = false,
   traceGraph,
   runtimeOverlay,
+  traceTheme,
   size = "default",
   unstyled = false,
   className,
@@ -6107,11 +6108,17 @@ function ExplainableShell({
         }
         if (i >= 0) overlayIdx = i;
       }
+      const traceColors = traceTheme && {
+        ...traceTheme.visited !== void 0 && { done: traceTheme.visited },
+        ...traceTheme.current !== void 0 && { active: traceTheme.current },
+        ...traceTheme.mode !== void 0 && { default: traceTheme.mode === "dark" ? "#94a3b8" : "#64748b" }
+      };
       return /* @__PURE__ */ jsx26(
         TracedFlow,
         {
           graph: traceGraph,
           overlay: runtimeOverlay ?? void 0,
+          colors: traceColors || void 0,
           scrubIndex: overlayIdx,
           onNodeClick: (stageId) => onNodeClick?.(stageId),
           onSubflowChange: (mountId) => {
@@ -6120,7 +6127,7 @@ function ExplainableShell({
         }
       );
     };
-  }, [traceGraph, runtimeOverlay]);
+  }, [traceGraph, runtimeOverlay, traceTheme]);
   const effectiveRenderFlowchart = renderFlowchart ?? tracedFlowRenderer;
   const leftLabel = panelLabels?.topology ?? "Topology";
   const rightLabel = panelLabels?.details ?? "Details";