@particle-academy/fancy-flow 0.40.2 → 0.40.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-5UCWY7G3.js';
-export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-5UCWY7G3.js';
+import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-WOO4B7M5.js';
+export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-WOO4B7M5.js';
 import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-A6RFLGWV.js';
 export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-A6RFLGWV.js';
 export { runCohort } from './chunk-QZTGV3ZL.js';

package/dist/screens.cjs

@@ -9422,6 +9422,36 @@ function HelperLines({ horizontal, vertical }) {
     )
   ] });
 }
+function readDocumentTheme() {
+  if (typeof document === "undefined") return "light";
+  const root2 = document.documentElement;
+  const attr = root2.getAttribute("data-theme");
+  if (attr === "dark" || attr === "light") return attr;
+  if (root2.classList.contains("dark")) return "dark";
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function useResolvedColorMode(explicit) {
+  const [resolved, setResolved] = ReactExports.useState("light");
+  const pinned = explicit === "light" || explicit === "dark" ? explicit : void 0;
+  ReactExports.useEffect(() => {
+    if (pinned) return;
+    if (typeof document === "undefined") return;
+    const sync = () => setResolved(readDocumentTheme());
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", sync);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener?.("change", sync);
+    };
+  }, [pinned]);
+  return pinned ?? resolved;
+}
 function preventScrollWhileZooming(event) {
   if (event.shiftKey) event.preventDefault();
 }
@@ -9494,6 +9524,7 @@ function FlowCanvas({
     },
     [showHelperLines, onNodesChange]
   );
+  const resolvedColorMode = useResolvedColorMode(colorMode);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9501,8 +9532,8 @@ function FlowCanvas({
         "ff-canvas",
         // colorMode drives BOTH react-flow's chrome (below) and our `ff-` styles
         // via the shared `.dark` class / light opt-out — one theme signal.
-        colorMode === "dark" ? "dark" : "",
-        colorMode === "light" ? "ff-canvas--light" : "",
+        resolvedColorMode === "dark" ? "dark" : "",
+        resolvedColorMode === "light" ? "ff-canvas--light" : "",
         className ?? ""
       ].filter(Boolean).join(" "),
       style: { height, ...style2 },
@@ -9514,7 +9545,7 @@ function FlowCanvas({
             nodes: orderedNodes,
             edges,
             onNodesChange: handleNodesChange,
-            colorMode,
+            colorMode: resolvedColorMode,
             nodeTypes: mergedNodeTypes,
             edgeTypes: mergedEdgeTypes,
             fitView: true,