@luxonis/depthai-pipeline-lib 3.7.6 → 3.8.1

package/dist/index.css

@@ -909,6 +909,9 @@
   .border-black {
     border-color: var(--color-black);
   }
+  .border-border {
+    border-color: var(--lux-border);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -981,6 +984,12 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-border {
+    background-color: var(--lux-border);
+  }
+  .bg-card {
+    background-color: var(--lux-card);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1201,6 +1210,9 @@
   .text-black {
     color: var(--color-black);
   }
+  .text-border {
+    color: var(--lux-border);
+  }
   .text-inherit {
     color: inherit;
   }
@@ -1429,6 +1441,12 @@
     rotate: 180deg;
   }
 }
+html.dark .react-flow__attribution {
+  background: var(--lux-surface-raised, #1a2437);
+}
+html.dark .react-flow__attribution a {
+  color: var(--lux-muted-foreground, #98a2b3);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/src/components/PipelineCanvas.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, Header } from '@luxonis/ui-components';
 import { BezierEdge, Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
 import React from 'react';
+import { useColorMode } from '../services/use-color-mode.js';
 import { adjustNodes, getLayoutedElements, updateNodesOnPipelineStateChange, } from '../services/utils.js';
 import { BridgeEdge } from './BridgeEdge.js';
 import { PipelineNode } from './Node.js';
@@ -15,6 +16,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
     const reactFlowHeight = useStore((state) => state.height);
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
     const [openLegend, setOpenLegend] = React.useState(false);
+    const colorMode = useColorMode();
     const pipelineState = React.useMemo(() => pipelineStateParsed, [pipelineStateParsed]);
     const layoutSignature = React.useMemo(() => {
         if (!pipeline) {
@@ -66,6 +68,6 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
             setShouldFitAndResize(false);
         }
     }, [shouldFitAndResize]);
-    return (_jsxs(Flex, { align: "center", justify: "center", full: true, className: "border border-border rounded-sm", children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.4, children: [header && _jsx(Panel, { position: "top-center", children: header }), _jsx(Panel, { position: "top-right", children: _jsxs(Flex, { gap: "xs", direction: "column", children: [_jsx(Button, { onClick: () => setOpenLegend(!openLegend), label: openLegend ? 'Collapse' : 'Legend' }), openLegend && _jsx(PipelineLegend, { isDebugging: isDebugging })] }) })] }))] }));
+    return (_jsxs(Flex, { align: "center", justify: "center", full: true, className: "border border-border rounded-sm", children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.4, colorMode: colorMode, children: [header && _jsx(Panel, { position: "top-center", children: header }), _jsx(Panel, { position: "top-right", children: _jsxs(Flex, { gap: "xs", direction: "column", children: [_jsx(Button, { onClick: () => setOpenLegend(!openLegend), label: openLegend ? 'Collapse' : 'Legend' }), openLegend && _jsx(PipelineLegend, { isDebugging: isDebugging })] }) })] }))] }));
 };
 export const PipelineCanvas = (props) => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/components/PipelineLegend.js

@@ -199,5 +199,5 @@ export const PipelineLegend = ({ isDebugging }) => {
             bridgeSection,
         ]
         : sharedSections;
-    return (_jsxs(Flex, { direction: "column", gap: "xs", className: "w-full max-w-[390px] bg-white border border-border rounded-sm p-4", children: [_jsx(Label, { text: "Legend", color: "black", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", className: "w-full", children: sections.map((section) => (_jsx(LegendSection, { title: section.title, items: section.items }, section.title))) }), _jsx(SubLabel, { text: `v${PACKAGE_VERSION}`, color: "lightGray", align: "right" })] }));
+    return (_jsxs(Flex, { direction: "column", gap: "xs", className: "w-full max-w-[390px] bg-card border border-border rounded-sm p-4", children: [_jsx(Label, { text: "Legend", color: "normal", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", className: "w-full", children: sections.map((section) => (_jsx(LegendSection, { title: section.title, items: section.items }, section.title))) }), _jsx(SubLabel, { text: `v${PACKAGE_VERSION}`, color: "lightGray", align: "right" })] }));
 };

package/dist/src/services/use-color-mode.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Tracks the host app's theme by watching the `dark` class on <html>.
+ *
+ * React Flow keeps its dark tokens under `.react-flow.dark`, which it only applies when
+ * given `colorMode`. Without this the canvas stays light-themed inside a dark app — most
+ * visibly the attribution pill, which renders 50%-white with #999 text.
+ *
+ * Implemented locally rather than imported from packages/common so this published library
+ * stays free of workspace coupling.
+ */
+export declare function useColorMode(): 'light' | 'dark';

package/dist/src/services/use-color-mode.js

@@ -0,0 +1,28 @@
+import React from 'react';
+/**
+ * Tracks the host app's theme by watching the `dark` class on <html>.
+ *
+ * React Flow keeps its dark tokens under `.react-flow.dark`, which it only applies when
+ * given `colorMode`. Without this the canvas stays light-themed inside a dark app — most
+ * visibly the attribution pill, which renders 50%-white with #999 text.
+ *
+ * Implemented locally rather than imported from packages/common so this published library
+ * stays free of workspace coupling.
+ */
+export function useColorMode() {
+    const read = React.useCallback(() => {
+        if (typeof document === 'undefined')
+            return 'light';
+        return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+    }, []);
+    const [colorMode, setColorMode] = React.useState(read);
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        setColorMode(read());
+        const observer = new MutationObserver(() => setColorMode(read()));
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        return () => observer.disconnect();
+    }, [read]);
+    return colorMode;
+}

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const PACKAGE_VERSION = "3.7.6";
+export declare const PACKAGE_VERSION = "3.8.1";

package/dist/src/version.js

@@ -1,2 +1,2 @@
 // Do not edit it manually.
-export const PACKAGE_VERSION = '3.7.6';
+export const PACKAGE_VERSION = '3.8.1';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "3.7.6",
+	"version": "3.8.1",
 	"type": "module",
 	"license": "UNLICENSED",
 	"main": "./dist/src/index.js",