@pipelex/mthds-ui 0.8.0 → 0.9.0

package/dist/graph/react/index.js

@@ -5,6 +5,7 @@ import {
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_THEME,
+  GRAPH_THEME_MODE,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   applyControllers,
   applyFolds,
@@ -16,7 +17,7 @@ import {
   resolveConceptRef,
   stuffDigestFromId,
   validateGraphSpec
-} from "../../chunk-7VQUZ35P.js";
+} from "../../chunk-WNSV4E7G.js";
 import {
   __spreadProps,
   __spreadValues
@@ -29,7 +30,7 @@ import "./stuff/StuffViewer.css";
 import "./viewer/GraphToolbar.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
-import React8 from "react";
+import React9 from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -38,6 +39,51 @@ import {
   BackgroundVariant
 } from "@xyflow/react";
 
+// src/graph/react/viewer/useSystemTheme.ts
+import React from "react";
+var PREFERS_DARK_QUERY = "(prefers-color-scheme: dark)";
+function prefersDarkToTheme(prefersDark) {
+  return prefersDark ? GRAPH_THEME.DARK : GRAPH_THEME.LIGHT;
+}
+function detectSystemTheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return GRAPH_THEME.DARK;
+  }
+  return prefersDarkToTheme(window.matchMedia(PREFERS_DARK_QUERY).matches);
+}
+function subscribeToSystemTheme(onChange) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return () => {
+    };
+  }
+  const mql = window.matchMedia(PREFERS_DARK_QUERY);
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }
+  mql.addListener(onChange);
+  return () => mql.removeListener(onChange);
+}
+function systemThemeStore(injected) {
+  if (injected !== void 0) {
+    return {
+      subscribe: () => () => {
+      },
+      getSnapshot: () => injected,
+      getServerSnapshot: () => injected
+    };
+  }
+  return {
+    subscribe: subscribeToSystemTheme,
+    getSnapshot: detectSystemTheme,
+    getServerSnapshot: () => GRAPH_THEME.DARK
+  };
+}
+function useSystemTheme(injected) {
+  const store = React.useMemo(() => systemThemeStore(injected), [injected]);
+  return React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+}
+
 // src/graph/react/stuff/stuffViewerUtils.ts
 function isSafeDisplayUrl(url) {
   if (!url || typeof url !== "string") return false;
@@ -155,7 +201,7 @@ function findStuffDataByDigest(graphspec, digest) {
 }
 
 // src/graph/react/stuff/StuffViewer.tsx
-import React from "react";
+import React2 from "react";
 import DOMPurify from "dompurify";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ICON_COPY = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) });
@@ -190,15 +236,15 @@ function StuffViewer({
   onOpenExternally
 }) {
   var _a, _b;
-  const [activeTab, setActiveTab] = React.useState("html");
-  const [copied, setCopied] = React.useState(false);
-  const contentRef = React.useRef(null);
-  const httpInlineUrl = React.useMemo(() => extractInlineUrl(stuff.data), [stuff.data]);
-  const httpExternalUrl = React.useMemo(() => extractUrl(stuff.data), [stuff.data]);
-  const storageUri = React.useMemo(() => extractStorageUri(stuff.data), [stuff.data]);
-  const filename = React.useMemo(() => extractFilename(stuff.data), [stuff.data]);
-  const [resolvedStorageUrl, setResolvedStorageUrl] = React.useState(null);
-  React.useEffect(() => {
+  const [activeTab, setActiveTab] = React2.useState("html");
+  const [copied, setCopied] = React2.useState(false);
+  const contentRef = React2.useRef(null);
+  const httpInlineUrl = React2.useMemo(() => extractInlineUrl(stuff.data), [stuff.data]);
+  const httpExternalUrl = React2.useMemo(() => extractUrl(stuff.data), [stuff.data]);
+  const storageUri = React2.useMemo(() => extractStorageUri(stuff.data), [stuff.data]);
+  const filename = React2.useMemo(() => extractFilename(stuff.data), [stuff.data]);
+  const [resolvedStorageUrl, setResolvedStorageUrl] = React2.useState(null);
+  React2.useEffect(() => {
     setResolvedStorageUrl(null);
     if (!storageUri || !resolveStorageUrl || httpInlineUrl) {
       return;
@@ -216,14 +262,14 @@ function StuffViewer({
   }, [storageUri, resolveStorageUrl, httpInlineUrl]);
   const inlineUrl = httpInlineUrl != null ? httpInlineUrl : resolvedStorageUrl;
   const externalUrl = httpExternalUrl != null ? httpExternalUrl : resolvedStorageUrl;
-  const effectiveMime = React.useMemo(
+  const effectiveMime = React2.useMemo(
     () => resolveMimeType(stuff.data, stuff.contentType, externalUrl != null ? externalUrl : storageUri),
     [stuff.data, stuff.contentType, externalUrl, storageUri]
   );
   const isPdf = effectiveMime === "application/pdf";
   const isImage = (_a = effectiveMime == null ? void 0 : effectiveMime.startsWith("image/")) != null ? _a : false;
   const htmlTabLabel = getHtmlTabLabel(effectiveMime != null ? effectiveMime : stuff.contentType);
-  const { jsonString, jsonError } = React.useMemo(() => {
+  const { jsonString, jsonError } = React2.useMemo(() => {
     if (stuff.data == null) return { jsonString: null, jsonError: null };
     try {
       return { jsonString: JSON.stringify(stuff.data, null, 2), jsonError: null };
@@ -231,7 +277,7 @@ function StuffViewer({
       return { jsonString: null, jsonError: err instanceof Error ? err.message : String(err) };
     }
   }, [stuff.data]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (activeTab !== "html" || !contentRef.current) return;
     contentRef.current.querySelectorAll("a").forEach((link) => {
       link.setAttribute("target", "_blank");
@@ -461,7 +507,7 @@ function StuffViewer({
 }
 
 // src/graph/react/detail/DetailPanel.tsx
-import React2 from "react";
+import React3 from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function DetailPanel({
   isOpen,
@@ -472,7 +518,7 @@ function DetailPanel({
   onResizeHandleMouseDown,
   closeOnEscape = true
 }) {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!isOpen || !closeOnEscape) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -504,7 +550,7 @@ function DetailPanel({
 }
 
 // src/graph/react/detail/useResizable.ts
-import React3 from "react";
+import React4 from "react";
 var MAX_WIDTH_RATIO = 0.6;
 function useResizable({
   defaultWidth,
@@ -512,11 +558,11 @@ function useResizable({
   maxWidth,
   containerRef
 }) {
-  const [width, setWidth] = React3.useState(defaultWidth);
-  const [isDragging, setIsDragging] = React3.useState(false);
-  const dragRef = React3.useRef({ startX: 0, startWidth: 0, maxAllowed: maxWidth });
-  const rafRef = React3.useRef(null);
-  const handleMouseDown = React3.useCallback(
+  const [width, setWidth] = React4.useState(defaultWidth);
+  const [isDragging, setIsDragging] = React4.useState(false);
+  const dragRef = React4.useRef({ startX: 0, startWidth: 0, maxAllowed: maxWidth });
+  const rafRef = React4.useRef(null);
+  const handleMouseDown = React4.useCallback(
     (e) => {
       var _a;
       e.preventDefault();
@@ -530,7 +576,7 @@ function useResizable({
     },
     [width, maxWidth, containerRef]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isDragging) return;
     const onMouseMove = (e) => {
       if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
@@ -568,7 +614,7 @@ function useResizable({
 }
 
 // src/graph/react/detail/PipeDetailPanel.tsx
-import React5 from "react";
+import React6 from "react";
 
 // src/graph/react/detail/sections/shared.tsx
 import { useState } from "react";
@@ -1160,7 +1206,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   const badge = PIPE_TYPE_BADGES[pipeType];
   const status = node.status;
   const statusColor = (_a = STATUS_COLORS[status]) != null ? _a : "#6272a4";
-  const blueprint = React5.useMemo(() => {
+  const blueprint = React6.useMemo(() => {
     var _a2, _b2;
     if (!node.pipe_code || !spec.pipe_registry) return void 0;
     const directKey = `${(_b2 = (_a2 = spec.pipeline_ref) == null ? void 0 : _a2.domain) != null ? _b2 : ""}.${node.pipe_code}`;
@@ -1331,7 +1377,7 @@ function GenericExecutionData({ data }) {
 }
 
 // src/graph/react/detail/ConceptDetailPanel.tsx
-import React6 from "react";
+import React7 from "react";
 import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function ConceptDetailPanel({
   concept,
@@ -1376,8 +1422,8 @@ function ConceptBody({
   onOpenExternally
 }) {
   const hasData = Boolean(ioData) && !isDryRun;
-  const [activeTab, setActiveTab] = React6.useState(hasData ? "data" : "structure");
-  const baseId = React6.useId();
+  const [activeTab, setActiveTab] = React7.useState(hasData ? "data" : "structure");
+  const baseId = React7.useId();
   const tabId = (tab) => `${baseId}-tab-${tab}`;
   const panelId = (tab) => `${baseId}-tabpanel-${tab}`;
   const structure = concept.json_schema ? /* @__PURE__ */ jsxs14("div", { children: [
@@ -1813,6 +1859,47 @@ var MOON_ICON = /* @__PURE__ */ jsx16(
     children: /* @__PURE__ */ jsx16("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
   }
 );
+var MONITOR_ICON = /* @__PURE__ */ jsxs16(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx16("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx16("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+    ]
+  }
+);
+var THEME_MODE_CYCLE = [
+  GRAPH_THEME_MODE.SYSTEM,
+  GRAPH_THEME_MODE.LIGHT,
+  GRAPH_THEME_MODE.DARK
+];
+function nextThemeMode(current) {
+  const idx = THEME_MODE_CYCLE.indexOf(current);
+  return THEME_MODE_CYCLE[(idx + 1) % THEME_MODE_CYCLE.length];
+}
+function themeModeIcon(mode) {
+  if (mode === GRAPH_THEME_MODE.LIGHT) return SUN_ICON;
+  if (mode === GRAPH_THEME_MODE.DARK) return MOON_ICON;
+  return MONITOR_ICON;
+}
+function themeModeLabel(mode) {
+  const names = {
+    [GRAPH_THEME_MODE.SYSTEM]: "system",
+    [GRAPH_THEME_MODE.LIGHT]: "light",
+    [GRAPH_THEME_MODE.DARK]: "dark"
+  };
+  const next = nextThemeMode(mode);
+  return `Theme: ${names[mode]} \u2014 switch to ${names[next]}`;
+}
 function GraphToolbar({
   direction,
   onDirectionChange,
@@ -1825,12 +1912,11 @@ function GraphToolbar({
   onExpandAll,
   foldAllDisabled = false,
   expandAllDisabled = false,
-  theme,
-  onThemeChange,
+  themeMode,
+  onThemeModeChange,
   rightOffset = 0
 }) {
-  const themeToggleEnabled = theme !== void 0 && onThemeChange !== void 0;
-  const themeLabel = theme === GRAPH_THEME.LIGHT ? "Switch to dark theme" : "Switch to light theme";
+  const themeToggleEnabled = themeMode !== void 0 && onThemeModeChange !== void 0;
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
   const directionLabel = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout";
   const controllersLabel = showControllers ? "Hide pipe controllers" : "Show pipe controllers \u2014 groups pipes by their controlling pipe";
@@ -1926,10 +2012,10 @@ function GraphToolbar({
         {
           type: "button",
           className: "graph-toolbar-btn",
-          onClick: () => onThemeChange(theme === GRAPH_THEME.LIGHT ? GRAPH_THEME.DARK : GRAPH_THEME.LIGHT),
-          title: themeLabel,
-          "aria-label": themeLabel,
-          children: theme === GRAPH_THEME.LIGHT ? MOON_ICON : SUN_ICON
+          onClick: () => onThemeModeChange(nextThemeMode(themeMode)),
+          title: themeModeLabel(themeMode),
+          "aria-label": themeModeLabel(themeMode),
+          children: themeModeIcon(themeMode)
         }
       )
     ] })
@@ -2213,9 +2299,12 @@ function seedFoldedControllers(mode, controllerIds) {
   if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
   return /* @__PURE__ */ new Set();
 }
-function resolveExternalTheme(themeProp, configTheme) {
+function resolveExternalThemeMode(themeProp, configTheme) {
   var _a, _b;
-  return (_b = (_a = themeProp != null ? themeProp : configTheme) != null ? _a : DEFAULT_GRAPH_CONFIG.theme) != null ? _b : GRAPH_THEME.DARK;
+  return (_b = (_a = themeProp != null ? themeProp : configTheme) != null ? _a : DEFAULT_GRAPH_CONFIG.theme) != null ? _b : GRAPH_THEME_MODE.SYSTEM;
+}
+function resolveActiveTheme(mode, systemTheme) {
+  return mode === GRAPH_THEME_MODE.SYSTEM ? systemTheme : mode;
 }
 function cloneCachedNodes(nodes) {
   return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
@@ -2250,6 +2339,7 @@ function GraphViewer(props) {
     initialFoldMode,
     hideToolbar = false,
     theme: themeProp,
+    systemTheme: systemThemeProp,
     showThemeToggle = true,
     onThemeChange,
     onNavigateToPipe,
@@ -2263,59 +2353,65 @@ function GraphViewer(props) {
     canEmbedPdf,
     onOpenExternally
   } = props;
-  const graphspec = React8.useMemo(
+  const graphspec = React9.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
   );
-  const [direction, setDirection] = React8.useState(
+  const [direction, setDirection] = React9.useState(
     () => {
       var _a2, _b2;
       return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
-  const externalTheme = resolveExternalTheme(themeProp, config.theme);
-  const [theme, setTheme] = React8.useState(externalTheme);
-  const prevExternalThemeRef = React8.useRef(externalTheme);
-  React8.useEffect(() => {
-    if (externalTheme !== prevExternalThemeRef.current) {
-      prevExternalThemeRef.current = externalTheme;
-      setTheme(externalTheme);
+  const externalMode = resolveExternalThemeMode(themeProp, config.theme);
+  const [mode, setMode] = React9.useState(externalMode);
+  const prevExternalModeRef = React9.useRef(externalMode);
+  React9.useEffect(() => {
+    if (externalMode !== prevExternalModeRef.current) {
+      prevExternalModeRef.current = externalMode;
+      setMode(externalMode);
     }
-  }, [externalTheme]);
-  const onThemeChangeRef = React8.useRef(onThemeChange);
+  }, [externalMode]);
+  const systemTheme = useSystemTheme(systemThemeProp);
+  const resolvedTheme = resolveActiveTheme(mode, systemTheme);
+  const onThemeChangeRef = React9.useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
-  const prevReportedThemeRef = React8.useRef(theme);
-  React8.useEffect(() => {
+  const prevReportedRef = React9.useRef({
+    mode,
+    resolvedTheme
+  });
+  React9.useEffect(() => {
     var _a2;
-    if (theme !== prevReportedThemeRef.current) {
-      prevReportedThemeRef.current = theme;
-      (_a2 = onThemeChangeRef.current) == null ? void 0 : _a2.call(onThemeChangeRef, theme);
+    const prev = prevReportedRef.current;
+    if (prev.mode !== mode || prev.resolvedTheme !== resolvedTheme) {
+      prevReportedRef.current = { mode, resolvedTheme };
+      (_a2 = onThemeChangeRef.current) == null ? void 0 : _a2.call(onThemeChangeRef, mode, resolvedTheme);
     }
-  }, [theme]);
+  }, [mode, resolvedTheme]);
   const effectiveFoldMode = (_b = (_a = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _a : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _b : FOLD_MODE.EXPANDED;
-  const [showControllers, setShowControllers] = React8.useState(() => {
+  const [showControllers, setShowControllers] = React9.useState(() => {
     var _a2, _b2;
     if (effectiveFoldMode === FOLD_MODE.FOLDED) return true;
     return (_b2 = (_a2 = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a2 : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b2 : false;
   });
-  const foldModeRef = React8.useRef(effectiveFoldMode);
+  const foldModeRef = React9.useRef(effectiveFoldMode);
   foldModeRef.current = effectiveFoldMode;
-  const containerRef = React8.useRef(null);
-  const [detailSelection, setDetailSelection] = React8.useState(null);
-  const [conceptOverride, setConceptOverride] = React8.useState(null);
+  const containerRef = React9.useRef(null);
+  const [detailSelection, setDetailSelection] = React9.useState(null);
+  const [conceptOverride, setConceptOverride] = React9.useState(null);
   const {
     width: panelWidth,
     isDragging: isPanelDragging,
     handleMouseDown: onResizeMouseDown
   } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     setDetailSelection(null);
     setConceptOverride(null);
   }, [graphspec]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
-    const themePalette = getPaletteForTheme(theme);
+    const themePalette = getPaletteForTheme(resolvedTheme);
     const overrides = config.paletteColors;
     const palette = overrides ? __spreadValues(__spreadValues({}, themePalette), overrides) : themePalette;
     for (const [cssVar, value] of Object.entries(palette)) {
@@ -2326,15 +2422,15 @@ function GraphViewer(props) {
         el.style.removeProperty(cssVar);
       }
     };
-  }, [config.paletteColors, theme]);
+  }, [config.paletteColors, resolvedTheme]);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowRef = React8.useRef(null);
-  const initialDataRef = React8.useRef(null);
-  const rawGraphDataRef = React8.useRef(null);
-  const layoutCacheRef = React8.useRef(null);
-  const [expandedControllers, setExpandedControllers] = React8.useState(/* @__PURE__ */ new Set());
-  const toggleCollapse = React8.useCallback((controllerId) => {
+  const reactFlowRef = React9.useRef(null);
+  const initialDataRef = React9.useRef(null);
+  const rawGraphDataRef = React9.useRef(null);
+  const layoutCacheRef = React9.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React9.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React9.useCallback((controllerId) => {
     setExpandedControllers((prev) => {
       const next = new Set(prev);
       if (next.has(controllerId)) next.delete(controllerId);
@@ -2342,8 +2438,8 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
-  const [foldedControllers, setFoldedControllers] = React8.useState(/* @__PURE__ */ new Set());
-  const toggleFold = React8.useCallback((controllerId, options) => {
+  const [foldedControllers, setFoldedControllers] = React9.useState(/* @__PURE__ */ new Set());
+  const toggleFold = React9.useCallback((controllerId, options) => {
     setFoldedControllers((prev) => {
       const next = new Set(prev);
       const shouldFold = !next.has(controllerId);
@@ -2357,34 +2453,34 @@ function GraphViewer(props) {
     });
   }, []);
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
-  const layoutConfig = React8.useMemo(
+  const layoutConfig = React9.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
     [config.nodesep, config.ranksep]
   );
-  const showControllersRef = React8.useRef(showControllers);
+  const showControllersRef = React9.useRef(showControllers);
   showControllersRef.current = showControllers;
-  const directionRef = React8.useRef(direction);
+  const directionRef = React9.useRef(direction);
   directionRef.current = direction;
-  const layoutConfigRef = React8.useRef(layoutConfig);
+  const layoutConfigRef = React9.useRef(layoutConfig);
   layoutConfigRef.current = layoutConfig;
-  const initialZoomRef = React8.useRef(config.initialZoom);
+  const initialZoomRef = React9.useRef(config.initialZoom);
   initialZoomRef.current = config.initialZoom;
-  const panToTopRef = React8.useRef(config.panToTop);
+  const panToTopRef = React9.useRef(config.panToTop);
   panToTopRef.current = config.panToTop;
-  const expandedRef = React8.useRef(expandedControllers);
+  const expandedRef = React9.useRef(expandedControllers);
   expandedRef.current = expandedControllers;
-  const toggleCollapseRef = React8.useRef(toggleCollapse);
+  const toggleCollapseRef = React9.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
-  const foldedRef = React8.useRef(foldedControllers);
+  const foldedRef = React9.useRef(foldedControllers);
   foldedRef.current = foldedControllers;
-  const toggleFoldRef = React8.useRef(toggleFold);
+  const toggleFoldRef = React9.useRef(toggleFold);
   toggleFoldRef.current = toggleFold;
-  const isFirstFoldEffect = React8.useRef(true);
-  const prevFoldSizeRef = React8.useRef(0);
-  const skipNextFoldEffectRef = React8.useRef(false);
-  const statusMapRef = React8.useRef(statusMap);
+  const isFirstFoldEffect = React9.useRef(true);
+  const prevFoldSizeRef = React9.useRef(0);
+  const skipNextFoldEffectRef = React9.useRef(false);
+  const statusMapRef = React9.useRef(statusMap);
   statusMapRef.current = statusMap;
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
     (async () => {
@@ -2436,7 +2532,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [direction, layoutConfig]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
     const cachedEdges = layoutCacheRef.current.edges;
@@ -2456,7 +2552,7 @@ function GraphViewer(props) {
     );
     setEdges(toAppEdges(withControllers.edges));
   }, [showControllers, expandedControllers, toggleCollapse, toggleFold]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!graphspec) {
       initialDataRef.current = null;
       rawGraphDataRef.current = null;
@@ -2560,7 +2656,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -2640,7 +2736,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [foldedControllers, toggleFold]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
     const cachedEdges = layoutCacheRef.current.edges;
@@ -2658,7 +2754,7 @@ function GraphViewer(props) {
     setNodes(applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMap));
     setEdges(toAppEdges(withControllers.edges));
   }, [statusMap]);
-  const onNodeClick = React8.useCallback(
+  const onNodeClick = React9.useCallback(
     (event, node) => {
       var _a2;
       const nodeData = node.data;
@@ -2700,7 +2796,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React8.useCallback(
+  const onInit = React9.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -2709,12 +2805,12 @@ function GraphViewer(props) {
     },
     [onReactFlowInit]
   );
-  const handlePaneClick = React8.useCallback(() => {
+  const handlePaneClick = React9.useCallback(() => {
     setDetailSelection(null);
     setConceptOverride(null);
     onPaneClick == null ? void 0 : onPaneClick();
   }, [onPaneClick]);
-  const handleConceptClick = React8.useCallback(
+  const handleConceptClick = React9.useCallback(
     (conceptCode) => {
       if (!graphspec) return;
       const info = resolveConceptRef(graphspec, conceptCode);
@@ -2726,7 +2822,7 @@ function GraphViewer(props) {
   const detailOpen = detailSelection !== null || conceptOverride !== null;
   const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
-  const foldAllProps = React8.useMemo(() => {
+  const foldAllProps = React9.useMemo(() => {
     if (!showControllers || !allControllerIds || allControllerIds.size === 0) {
       return {
         onFoldAll: void 0,
@@ -2742,96 +2838,103 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: `react-flow-container react-flow-container--theme-${theme}`, children: [
-    /* @__PURE__ */ jsx20(
-      ReactFlow,
-      {
-        nodes,
-        edges,
-        nodeTypes,
-        onNodesChange,
-        onEdgesChange,
-        onNodeClick,
-        onPaneClick: handlePaneClick,
-        onInit,
-        fitView: true,
-        fitViewOptions: { padding: 0.1 },
-        defaultEdgeOptions: { type: edgeType },
-        panOnScroll: true,
-        minZoom: 0.1,
-        proOptions: { hideAttribution: true },
-        panActivationKeyCode: null,
-        children: /* @__PURE__ */ jsx20(
-          Background,
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ref: containerRef,
+      className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
+      children: [
+        /* @__PURE__ */ jsx20(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes,
+            onNodesChange,
+            onEdgesChange,
+            onNodeClick,
+            onPaneClick: handlePaneClick,
+            onInit,
+            fitView: true,
+            fitViewOptions: { padding: 0.1 },
+            defaultEdgeOptions: { type: edgeType },
+            panOnScroll: true,
+            minZoom: 0.1,
+            proOptions: { hideAttribution: true },
+            panActivationKeyCode: null,
+            children: /* @__PURE__ */ jsx20(
+              Background,
+              {
+                variant: BackgroundVariant.Dots,
+                gap: 20,
+                size: 1,
+                color: "var(--color-bg-dots)"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs20(
+          DetailPanel,
+          {
+            isOpen: detailOpen,
+            onClose: handlePaneClick,
+            width: panelWidth,
+            isDragging: isPanelDragging,
+            onResizeHandleMouseDown: onResizeMouseDown,
+            children: [
+              conceptOverride ? /* @__PURE__ */ jsx20(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx20(
+                PipeDetailPanel,
+                {
+                  node: selectedSpecNode,
+                  spec: graphspec,
+                  onConceptClick: handleConceptClick
+                }
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx20(
+                StuffNodeDetail,
+                {
+                  nodeId: detailSelection.nodeId,
+                  stuffData: detailSelection.stuffData,
+                  graphspec,
+                  resolveStorageUrl,
+                  canEmbedPdf,
+                  onOpenExternally
+                }
+              ) : null,
+              renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
+            ]
+          }
+        ),
+        !hideToolbar && /* @__PURE__ */ jsx20(
+          GraphToolbar,
           {
-            variant: BackgroundVariant.Dots,
-            gap: 20,
-            size: 1,
-            color: "var(--color-bg-dots)"
+            direction,
+            onDirectionChange: setDirection,
+            showControllers,
+            onShowControllersChange: setShowControllers,
+            onZoomIn: () => {
+              var _a2;
+              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
+            },
+            onZoomOut: () => {
+              var _a2;
+              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
+            },
+            onFitView: () => {
+              var _a2;
+              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
+            },
+            onFoldAll: foldAllProps.onFoldAll,
+            onExpandAll: foldAllProps.onExpandAll,
+            foldAllDisabled: foldAllProps.foldAllDisabled,
+            expandAllDisabled: foldAllProps.expandAllDisabled,
+            themeMode: showThemeToggle ? mode : void 0,
+            onThemeModeChange: showThemeToggle ? setMode : void 0,
+            rightOffset: detailOpen ? panelWidth : 0
           }
         )
-      }
-    ),
-    /* @__PURE__ */ jsxs20(
-      DetailPanel,
-      {
-        isOpen: detailOpen,
-        onClose: handlePaneClick,
-        width: panelWidth,
-        isDragging: isPanelDragging,
-        onResizeHandleMouseDown: onResizeMouseDown,
-        children: [
-          conceptOverride ? /* @__PURE__ */ jsx20(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx20(
-            PipeDetailPanel,
-            {
-              node: selectedSpecNode,
-              spec: graphspec,
-              onConceptClick: handleConceptClick
-            }
-          ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx20(
-            StuffNodeDetail,
-            {
-              nodeId: detailSelection.nodeId,
-              stuffData: detailSelection.stuffData,
-              graphspec,
-              resolveStorageUrl,
-              canEmbedPdf,
-              onOpenExternally
-            }
-          ) : null,
-          renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
-        ]
-      }
-    ),
-    !hideToolbar && /* @__PURE__ */ jsx20(
-      GraphToolbar,
-      {
-        direction,
-        onDirectionChange: setDirection,
-        showControllers,
-        onShowControllersChange: setShowControllers,
-        onZoomIn: () => {
-          var _a2;
-          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
-        },
-        onZoomOut: () => {
-          var _a2;
-          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
-        },
-        onFitView: () => {
-          var _a2;
-          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
-        },
-        onFoldAll: foldAllProps.onFoldAll,
-        onExpandAll: foldAllProps.onExpandAll,
-        foldAllDisabled: foldAllProps.foldAllDisabled,
-        expandAllDisabled: foldAllProps.expandAllDisabled,
-        theme: showThemeToggle ? theme : void 0,
-        onThemeChange: showThemeToggle ? setTheme : void 0,
-        rightOffset: detailOpen ? panelWidth : 0
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 export {
   ConceptDetailPanel,
@@ -2844,6 +2947,7 @@ export {
   StuffViewer,
   applyStatusOverrides,
   controllerNodeTypes,
+  detectSystemTheme,
   extractFilename,
   extractInlineUrl,
   extractStorageUri,
@@ -2857,6 +2961,7 @@ export {
   resolveMimeType,
   toAppEdges,
   toAppNodes,
-  useResizable
+  useResizable,
+  useSystemTheme
 };
 //# sourceMappingURL=index.js.map