@luxonis/depthai-pipeline-lib 1.11.0 → 1.13.0

package/dist/index.css

@@ -1,3 +1,3 @@
-@import url('@xyflow/react/dist/style.css');
-@import url('@luxonis/common-fe-components/styles');
-@import url('./panda.css');
+@import url("@xyflow/react/dist/style.css");
+@import url("@luxonis/common-fe-components/styles");
+@import url("./panda.css");

package/dist/panda.css

@@ -1297,12 +1297,16 @@
     border-top-right-radius: var(--radii-common);
 }
 
-  .w_icon\.sm {
-    width: var(--sizes-icon-sm);
+  .w_20px {
+    width: 20px;
 }
 
-  .h_icon\.sm {
-    height: var(--sizes-icon-sm);
+  .h_20px {
+    height: 20px;
+}
+
+  .d_flex {
+    display: flex;
 }
 
   .w_auto {
@@ -1321,14 +1325,22 @@
     background-color: rgba(0,0,0,0.125);
 }
 
-  .bg-c_dark\.error\! {
-    background-color: var(--colors-dark-error) !important;
+  .bg-c_dark\.warning\! {
+    background-color: var(--colors-dark-warning) !important;
 }
 
   .bg-c_dark\.success\! {
     background-color: var(--colors-dark-success) !important;
 }
 
+  .bg-c_dark\.error\! {
+    background-color: var(--colors-dark-error) !important;
+}
+
+  .bg-c_dark\.gray\! {
+    background-color: var(--colors-dark-gray) !important;
+}
+
   .ml_xs {
     margin-left: var(--spacing-xs);
 }
@@ -1345,6 +1357,10 @@
     background-color: var(--colors-light-gray);
 }
 
+  .ai_center {
+    align-items: center;
+}
+
   .right_xs {
     right: var(--spacing-xs);
 }

package/dist/src/components/GroupNode.js

@@ -6,14 +6,14 @@ import { css } from '../styled-system/css/index.mjs';
 export const GroupNode = (props) => {
     const { data: _node } = props;
     return (_jsx(Flex, { direction: "column", className: css({
-            'minWidth': 'container.smaller.xxs',
-            'border': 'base',
-            'rounded': 'common',
+            minWidth: 'container.smaller.xxs',
+            border: 'base',
+            rounded: 'common',
             '&:hover .node-help-icon': {
                 color: 'text.normal',
             },
-            'padding': 0,
-            'borderStyle': 'dashed',
-            'backgroundColor': 'rgba(0,0,0,0.125)',
+            padding: 0,
+            borderStyle: 'dashed',
+            backgroundColor: 'rgba(0,0,0,0.125)',
         }) }));
 };

package/dist/src/components/Node.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { NodeProps } from '@xyflow/react';
+import React from 'react';
 import { type ParsedNode } from '../services/pipeline.js';
 export type PipelineNodeProps = NodeProps<ParsedNode>;
 export declare const PipelineNode: React.FC<PipelineNodeProps>;

package/dist/src/components/Node.js

@@ -1,25 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Handle, Position } from '@xyflow/react';
+import { Badge, Button, Flex, HelpIcon, Label, SubLabel, } from '@luxonis/common-fe-components';
 import { clsx } from '@luxonis/common-fe-components/helpers';
-import { Button, Flex, HelpIcon, Label, SubLabel } from '@luxonis/common-fe-components';
-import { css } from '../styled-system/css/css.mjs';
+import { Handle, Position } from '@xyflow/react';
 import { DOCS_BASE_URL, NodesWithLinks, } from '../services/pipeline.js';
-const NodeHandles = props => {
+import { formatTiming } from '../services/pipeline-state.js';
+import { css } from '../styled-system/css/css.mjs';
+import { MIN_NODE_WIDTH } from './PipelineCanvas.js';
+const NodeHandles = (props) => {
     const { handles, type } = props;
-    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected }) => {
+    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', minWidth: "120px", children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected, dotColor, }) => {
             if (!connected) {
                 return;
             }
             return (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
                             width: 'custom.handle.dot!',
                             height: 'custom.handle.dot!',
-                            backgroundColor: blocking ? 'dark.error!' : 'dark.success!',
+                            backgroundColor: blocking
+                                ? 'dark.error!'
+                                : dotColor === 'gray'
+                                    ? 'dark.gray!'
+                                    : dotColor === 'green'
+                                        ? 'dark.success!'
+                                        : dotColor === 'red'
+                                            ? 'dark.error!'
+                                            : dotColor === 'yellow'
+                                                ? 'dark.warning!'
+                                                : 'dark.success!',
                             border: 'none!',
                             borderRadius: blocking ? '0% !important' : '100% !important',
                         }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
         }) }));
 };
-const NodeHandlesSubLabel = props => {
+const NodeHandlesSubLabel = (props) => {
     const { type, name, queueSize, maxQueueSize, fps } = props;
     return (_jsx(SubLabel, { className: css({
             ...(type === 'input' //
@@ -29,17 +41,20 @@ const NodeHandlesSubLabel = props => {
             ? `[${fps ? `${fps.toFixed(1)} | ` : ''}${`${maxQueueSize ?? 0}/${queueSize}`}] ${name}`
             : `${fps ? `[${fps.toFixed(1)}]` : ''} ${name}`, break: "none" }));
 };
-export const PipelineNode = props => {
+const GPSTTimings = (props) => {
+    return (_jsx(Flex, { flexDirection: "column", alignItems: "center", minWidth: "120px", children: Object.entries(props).map(([key, item]) => (_jsxs(Flex, { gap: "xxs", children: [_jsx(Label, { text: `${key}:`, size: "small" }), _jsx(Label, { text: `${formatTiming(item)}ms`, size: "small" })] }, `${key}-${item}-label`))) }));
+};
+export const PipelineNode = (props) => {
     const { data: node } = props;
-    // eslint-disable-next-line no-prototype-builtins
+    // biome-ignore lint/suspicious/noPrototypeBuiltins: Intended
     const link = NodesWithLinks.hasOwnProperty(node.name)
         ? `${DOCS_BASE_URL}/${NodesWithLinks[node.name]}`
         : DOCS_BASE_URL;
     return (_jsxs(Flex, { direction: "column", className: css({
-            'minWidth': 'container.smaller.xxs',
-            'border': 'base',
-            'rounded': 'common',
-            'backgroundColor': 'white',
+            minWidth: 'container.smaller.xxs',
+            border: 'base',
+            rounded: 'common',
+            backgroundColor: 'white',
             '&:hover .node-help-icon': {
                 color: 'text.normal',
             },
@@ -48,9 +63,22 @@ export const PipelineNode = props => {
                     backgroundColor: 'light.gray',
                     roundedTop: 'common',
                 }), children: [_jsx("span", { className: css({
-                            width: 'icon.sm',
-                            height: 'icon.sm',
-                        }) }), _jsx(Label, { text: node.id ? `${node.name} (${node.id})` : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
+                            width: '20px',
+                            height: '20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                        }), children: (node.nodeType === 'device' || node.nodeType === 'host') && (_jsx(Badge, { label: node.nodeType === 'device' ? 'D' : 'H', variant: node.nodeType === 'device' ? 'active' : 'cyan', style: {
+                                padding: '0px',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                width: '20px',
+                                height: '20px',
+                            }, tooltip: node.nodeType === 'device' ? 'Device Node' : 'Host Node', cursor: "help" })) }), _jsx(Label, { text: node.id
+                            ? `${node.name} (${node.id}) ${node.extras?.stateInfo ? `(${node.extras.stateInfo.letter})` : ''}`
+                            : node.extras?.stateInfo
+                                ? `${node.name} (${node.extras.stateInfo.letter})`
+                                : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
                             width: 'auto',
                             height: 'auto',
                             right: 'xs',
@@ -60,7 +88,7 @@ export const PipelineNode = props => {
                 }), style: {
                     border: 'none',
                     background: 'transparent',
-                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", isConnectable: false, className: css({
+                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", minWidth: `${MIN_NODE_WIDTH}px`, children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), node.extras && node.extras.gpstTimings && (_jsx(GPSTTimings, { ...node.extras.gpstTimings })), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", isConnectable: false, className: css({
                     width: 'custom.handle.dot!',
                     height: 'custom.handle.dot!',
                 }), style: {

package/dist/src/components/PipelineCanvas.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FlexProps } from '@luxonis/common-fe-components';
+import React from 'react';
 import type { ParsedNode, Pipeline } from '../services/pipeline.js';
 import type { PipelineState } from '../services/pipeline-state.js';
 export type PipelineCanvasProps = FlexProps & {
@@ -7,5 +7,7 @@ export type PipelineCanvasProps = FlexProps & {
     pipelineState: PipelineState[] | null;
     action?: React.ReactNode;
 };
+export declare const MIN_NODE_WIDTH = 376;
+export declare const MIN_NODE_HEIGHT = 150;
 export declare const updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];
 export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -1,79 +1,84 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
-import { Flex, Header } from '@luxonis/common-fe-components';
 import Dagre from '@dagrejs/dagre';
+import { Flex, Header } from '@luxonis/common-fe-components';
+import { Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
+import React from 'react';
+import { topoSort } from '../services/utils.js';
 import { PipelineNode } from './Node.js';
+export const MIN_NODE_WIDTH = 376;
+export const MIN_NODE_HEIGHT = 150;
 const getLayoutedElements = (nodes, edges) => {
     const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
-    const childNodes = nodes.filter(node => node.type !== 'group');
+    graph.setGraph({ rankdir: 'LR' });
     for (const edge of edges) {
         graph.setEdge(edge.source, edge.target);
     }
-    for (const node of childNodes) {
+    for (const node of nodes) {
         graph.setNode(node.id, {
-            width: node.measured?.width ?? 300,
-            height: node.measured?.height ?? 150,
+            ...node,
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
         });
     }
     Dagre.layout(graph);
     return {
-        nodes: nodes.map(node => {
-            const pos = graph.node(node.id);
-            if (!pos)
-                return node;
-            return {
-                ...node,
-                position: {
-                    x: pos.x - (node.measured?.width ?? 300) / 2,
-                    y: pos.y - (node.measured?.height ?? 150) / 2,
-                },
-            };
+        nodes: nodes.map((node) => {
+            const position = graph.node(node.id);
+            const x = position.x - MIN_NODE_WIDTH / 2;
+            const y = position.y - MIN_NODE_HEIGHT / 2;
+            return { ...node, position: { x, y } };
         }),
         edges,
     };
 };
 const adjustNodes = (nodes, edges) => {
     const PADDING = 16;
-    const groupNodes = nodes.filter(node => node.type === 'group');
-    const childNodes = nodes.filter(node => node.type !== 'group');
-    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
-    for (const edge of edges) {
-        graph.setEdge(edge.source, edge.target);
-    }
+    const HEADER_HEIGHT = 24;
+    // Build a tree: find all group nodes and their depth
+    const groupNodes = nodes.filter((node) => node.type === 'group');
+    const childNodes = nodes.filter((node) => node.type !== 'group');
+    // Sort groups by depth (deepest first) so children are resolved before parents
+    const getDepth = (nodeId, depth = 0) => {
+        const node = nodes.find((n) => n.id === nodeId);
+        if (!node?.parentId)
+            return depth;
+        return getDepth(node.parentId, depth + 1);
+    };
+    const sortedGroups = [...groupNodes].sort((a, b) => getDepth(b.id) - getDepth(a.id));
+    // Track resolved sizes for groups as we process them
+    const resolvedSizes = {};
+    // Start with all non-group nodes at their measured sizes
     for (const node of childNodes) {
-        graph.setNode(node.id, {
-            width: node.measured?.width ?? 300,
-            height: node.measured?.height ?? 150,
-        });
-    }
-    Dagre.layout(graph);
-    const positionedChildren = childNodes.map(node => {
-        const pos = graph.node(node.id);
-        return {
-            ...node,
-            position: {
-                x: pos.x - (node.measured?.width ?? 300) / 2,
-                y: pos.y - (node.measured?.height ?? 150) / 2,
-            },
+        resolvedSizes[node.id] = {
+            width: Math.min(node.measured?.width ?? MIN_NODE_WIDTH),
+            height: Math.min(node.measured?.height ?? MIN_NODE_HEIGHT),
         };
-    });
-    const positionedGroups = groupNodes.map(group => {
-        const children = positionedChildren.filter(n => n.parentId === group.id);
+    }
+    const updatedNodes = {};
+    for (const node of nodes)
+        updatedNodes[node.id] = { ...node };
+    // Process groups deepest-first
+    for (const group of sortedGroups) {
+        const children = nodes.filter((n) => n.parentId === group.id);
         if (children.length === 0) {
-            return { ...group, position: { x: 0, y: 0 } };
+            resolvedSizes[group.id] = {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            continue;
         }
         const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-        g.setGraph({ rankdir: 'LR', ranksep: 60, nodesep: 20 });
+        g.setGraph({ rankdir: 'LR' });
         for (const child of children) {
-            g.setNode(child.id, {
-                width: child.measured?.width ?? 300,
-                height: child.measured?.height ?? 150,
-            });
+            // Use resolved size (important for nested groups!)
+            const size = resolvedSizes[child.id] ?? {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            g.setNode(child.id, { width: size.width, height: size.height });
         }
-        const groupEdges = edges.filter(e => children.some(c => c.id === e.source) && children.some(c => c.id === e.target));
+        const groupEdges = edges.filter((e) => children.some((c) => c.id === e.source) &&
+            children.some((c) => c.id === e.target));
         for (const edge of groupEdges) {
             g.setEdge(edge.source, edge.target);
         }
@@ -82,59 +87,86 @@ const adjustNodes = (nodes, edges) => {
         let minY = 9999;
         let maxX = -9999;
         let maxY = -9999;
-        const locallyPositioned = children.map(child => {
+        // Replace both child loops with this single pass:
+        for (const child of children) {
             const pos = g.node(child.id);
-            const x = pos.x - (child.measured?.width ?? 300) / 2;
-            const y = pos.y - (child.measured?.height ?? 150) / 2;
+            const size = resolvedSizes[child.id] ?? {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            const x = pos.x - size.width / 2;
+            const y = pos.y - size.height / 2;
             minX = Math.min(minX, x);
             minY = Math.min(minY, y);
-            maxX = Math.max(maxX, x + (child.measured?.width ?? 300));
-            maxY = Math.max(maxY, y + (child.measured?.height ?? 150));
-            return { ...child, position: { x, y } };
-        });
-        const relativeChildren = locallyPositioned.map(child => ({
-            ...child,
-            position: {
-                x: child.position.x - minX + PADDING,
-                y: child.position.y - minY + PADDING,
-            },
-        }));
-        const groupW = maxX - minX + PADDING * 2;
-        const groupH = maxY - minY + PADDING * 2;
-        let absMinX = 9999;
-        let absMinY = 9999;
-        for (const child of children) {
-            const pos = graph.node(child.id);
-            absMinX = Math.min(absMinX, pos.x - (child.measured?.width ?? 300) / 2);
-            absMinY = Math.min(absMinY, pos.y - (child.measured?.height ?? 150) / 2);
+            maxX = Math.max(maxX, x + size.width);
+            maxY = Math.max(maxY, y + size.height);
         }
-        return {
-            nodes: relativeChildren,
-            group: {
-                ...group,
+        // Now positions are correct, apply them
+        for (const child of children) {
+            const pos = g.node(child.id);
+            const size = resolvedSizes[child.id] ?? {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            updatedNodes[child.id] = {
+                ...updatedNodes[child.id],
                 position: {
-                    x: absMinX - PADDING,
-                    y: absMinY - PADDING,
+                    x: pos.x - size.width / 2 - minX + PADDING,
+                    y: pos.y - size.height / 2 - minY + PADDING + HEADER_HEIGHT,
                 },
-                width: groupW + PADDING,
-                height: groupH,
-                style: { ...group.style, width: groupW + PADDING, height: groupH },
+            };
+        }
+        const groupW = maxX - minX + PADDING * 2;
+        const groupH = maxY - minY + PADDING * 2 + HEADER_HEIGHT;
+        // Store this group's resolved size for its own parent to use
+        resolvedSizes[group.id] = { width: groupW, height: groupH };
+        updatedNodes[group.id] = {
+            ...updatedNodes[group.id],
+            style: { ...updatedNodes[group.id].style, width: groupW, height: groupH },
+            width: groupW,
+            height: groupH,
+        };
+    }
+    // Now lay out the top-level (root) nodes using Dagre with correct sizes
+    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    graph.setGraph({ rankdir: 'LR' });
+    const rootNodes = nodes.filter((n) => !n.parentId);
+    for (const node of rootNodes) {
+        const size = resolvedSizes[node.id] ?? {
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
+        };
+        graph.setNode(node.id, { width: size.width, height: size.height });
+    }
+    const rootEdges = edges.filter((e) => rootNodes.some((n) => n.id === e.source) &&
+        rootNodes.some((n) => n.id === e.target));
+    for (const edge of rootEdges) {
+        graph.setEdge(edge.source, edge.target);
+    }
+    Dagre.layout(graph);
+    for (const node of rootNodes) {
+        const pos = graph.node(node.id);
+        if (!pos)
+            continue;
+        const size = resolvedSizes[node.id] ?? {
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
+        };
+        updatedNodes[node.id] = {
+            ...updatedNodes[node.id],
+            position: {
+                x: pos.x - size.width / 2,
+                y: pos.y - size.height / 2,
             },
         };
-    });
-    const rootChildren = positionedChildren.filter(n => !n.parentId);
-    const groupedChildren = positionedGroups.flatMap(g => g.nodes);
-    const groups = positionedGroups.map(g => g.group);
-    return [
-        ...groups.filter(g => g !== undefined),
-        ...groupedChildren.filter(c => c !== undefined),
-        ...rootChildren,
-    ];
+    }
+    return topoSort(Object.values(updatedNodes));
 };
 export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
     const parsedNodes = [];
     for (const node of nodes) {
-        const nodeState = pipelineState.find(state => state.id.toString() === node.id.toString());
+        const nodeState = pipelineState.find((state) => state.id.toString() === node.id.toString());
+        // Inputs and outputs
         const inputHandles = node.data.handles.input;
         const outputHandles = node.data.handles.output;
         const newInputHandles = [];
@@ -144,6 +176,7 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
             if (inputState) {
                 obj.maxQueueSize = inputState.numQueued;
                 obj.fps = inputState.timing.fps;
+                obj.dotColor = inputState.dotColor;
             }
             newInputHandles.push(obj);
         }
@@ -154,9 +187,14 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
             if (outputState) {
                 obj.maxQueueSize = outputState.numQueued;
                 obj.fps = outputState.timing.fps;
+                obj.dotColor = outputState.dotColor;
             }
             newOutputHandles.push(obj);
         }
+        // GPST timings
+        const gpst = nodeState?.gpstTimings;
+        // Node state
+        const state = nodeState?.stateInfo;
         parsedNodes.push({
             ...node,
             data: {
@@ -165,12 +203,16 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
                     input: newInputHandles,
                     output: newOutputHandles,
                 },
+                extras: {
+                    gpstTimings: gpst,
+                    stateInfo: state,
+                },
             },
         });
     }
     return parsedNodes;
 };
-const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) => {
+const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, action, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const widthSelector = (state) => state.width;
@@ -178,6 +220,8 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
     const reactFlowWidth = useStore(widthSelector);
     const reactFlowHeight = useStore(heightSelector);
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
+    const pipelineState = React.useMemo(() => pipelineStateParsed, [pipelineStateParsed]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         void fitView();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -189,17 +233,19 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
             return;
         }
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
-        const adjustedNodes = adjustNodes([...layouted.nodes], [...layouted.edges]);
         if (pipelineState) {
-            const updatedNodes = updateNodesOnPipelineStateChange(adjustedNodes, pipelineState);
-            setNodes([...updatedNodes]);
+            const updatedNodes = updateNodesOnPipelineStateChange([...layouted.nodes], pipelineState);
+            const adjustedNodes = adjustNodes([...updatedNodes], layouted.edges);
+            setNodes([...adjustedNodes]);
         }
         else {
+            const adjustedNodes = adjustNodes([...layouted.nodes], layouted.edges);
             setNodes([...adjustedNodes]);
         }
         setEdges([...layouted.edges]);
         setShouldFitAndResize(true);
     }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes, pipelineState]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         if (pipelineState && nodes.length > 0) {
             const updatedNodes = updateNodesOnPipelineStateChange(nodes, pipelineState);
@@ -217,16 +263,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         await setViewport({ x, y, zoom });
         await fitView({ nodes: nds });
     };
-    React.useEffect(() => {
-        if (!autoArrangeRef.current) {
-            return;
-        }
-        if (nodes.length > 0 && edges.length > 0) {
-            const viewport = getViewport();
-            void setViewportAndFit(viewport.x, viewport.y, viewport.zoom, nodes);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nodes, edges]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         if (shouldFitAndResize) {
             const viewport = getViewport();
@@ -237,4 +274,4 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
     }, [shouldFitAndResize]);
     return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode }, minZoom: 0.4, children: action && _jsx(Panel, { position: "top-right", children: action }) }))] }));
 };
-export const PipelineCanvas = props => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));
+export const PipelineCanvas = (props) => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/index.d.ts

@@ -1,6 +1,6 @@
-export { parsePipeline } from './services/pipeline.js';
+export type { PipelineCanvasProps } from './components/PipelineCanvas.js';
+export { PipelineCanvas } from './components/PipelineCanvas.js';
 export type { Pipeline, RawPipelinePayload } from './services/pipeline.js';
+export { parsePipeline } from './services/pipeline.js';
+export type { PipelineState, RawPipelineStatePayload, } from './services/pipeline-state.js';
 export { parsePipelineState } from './services/pipeline-state.js';
-export type { PipelineState, RawPipelineStatePayload } from './services/pipeline-state.js';
-export { PipelineCanvas } from './components/PipelineCanvas.js';
-export type { PipelineCanvasProps } from './components/PipelineCanvas.js';

package/dist/src/index.js

@@ -1,3 +1,3 @@
+export { PipelineCanvas } from './components/PipelineCanvas.js';
 export { parsePipeline } from './services/pipeline.js';
 export { parsePipelineState } from './services/pipeline-state.js';
-export { PipelineCanvas } from './components/PipelineCanvas.js';

package/dist/src/services/pipeline-handles.d.ts

@@ -0,0 +1,84 @@
+import type { Edge } from '@xyflow/react';
+import type { ParsedNode, RawPipelineNodeIO } from './pipeline';
+import { PipelineStateDotColor } from './pipeline-state';
+export type RawPipelineBridge = [number, number];
+export type ParsedHandle = {
+    id: number;
+    name: string;
+    type: 'input' | 'output';
+    blocking: boolean;
+    queueSize: number;
+    connected: boolean;
+    maxQueueSize?: number;
+    fps?: number;
+    dotColor?: PipelineStateDotColor;
+};
+export declare function parseHandles(handles: RawPipelineNodeIO[]): {
+    input: ParsedHandle[];
+    output: ParsedHandle[];
+};
+export declare function filterNodesHandles(nodes: ParsedNode[], edges: Edge[]): {
+    data: {
+        handles: {
+            input: {
+                connected: boolean;
+                id: number;
+                name: string;
+                type: "input" | "output";
+                blocking: boolean;
+                queueSize: number;
+                maxQueueSize?: number;
+                fps?: number;
+                dotColor?: PipelineStateDotColor;
+            }[];
+            output: {
+                connected: boolean;
+                id: number;
+                name: string;
+                type: "input" | "output";
+                blocking: boolean;
+                queueSize: number;
+                maxQueueSize?: number;
+                fps?: number;
+                dotColor?: PipelineStateDotColor;
+            }[];
+        };
+        id: string;
+        parentId?: string;
+        name: string;
+        nodeType?: "device" | "host";
+        extras?: import("./pipeline-state").NodeExtras;
+    };
+    id: string;
+    position: import("@xyflow/system").XYPosition;
+    type?: string | undefined;
+    sourcePosition?: import("@xyflow/system").Position;
+    targetPosition?: import("@xyflow/system").Position;
+    hidden?: boolean;
+    selected?: boolean;
+    dragging?: boolean;
+    draggable?: boolean;
+    selectable?: boolean;
+    connectable?: boolean;
+    deletable?: boolean;
+    dragHandle?: string;
+    width?: number;
+    height?: number;
+    initialWidth?: number;
+    initialHeight?: number;
+    parentId?: string;
+    zIndex?: number;
+    extent?: "parent" | import("@xyflow/system").CoordinateExtent;
+    expandParent?: boolean;
+    ariaLabel?: string;
+    origin?: import("@xyflow/system").NodeOrigin;
+    handles?: import("@xyflow/system").NodeHandle[];
+    measured?: {
+        width?: number;
+        height?: number;
+    };
+    style?: import("react").CSSProperties;
+    className?: string;
+    resizing?: boolean;
+    focusable?: boolean;
+}[];

package/dist/src/services/pipeline-handles.js

@@ -0,0 +1,41 @@
+export function parseHandles(handles) {
+    const parsedHandles = {
+        input: [],
+        output: [],
+    };
+    for (const [_, handle] of handles) {
+        const type = handle.type === 3 ? 'input' : 'output';
+        const parsed = {
+            id: handle.id,
+            name: handle.name,
+            type,
+            blocking: handle.blocking,
+            queueSize: handle.queueSize,
+            connected: true,
+        };
+        parsedHandles[type].push(parsed);
+    }
+    return parsedHandles;
+}
+export function filterNodesHandles(nodes, edges) {
+    const connectedHandleIds = new Set(edges.flatMap((edge) => [
+        `${edge.source}-${edge.sourceHandle}`,
+        `${edge.target}-${edge.targetHandle}`,
+    ]));
+    return nodes.map((node) => ({
+        ...node,
+        data: {
+            ...node.data,
+            handles: {
+                input: node.data.handles.input.map((handle) => ({
+                    ...handle,
+                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
+                })),
+                output: node.data.handles.output.map((handle) => ({
+                    ...handle,
+                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
+                })),
+            },
+        },
+    }));
+}

package/dist/src/services/pipeline-state.d.ts

@@ -1,10 +1,13 @@
 export type RawPipelineStatePayload = {
     nodeStates: RawPipelineState[];
 };
+type IONodeState = 0 | 1 | 2;
 export type IOStates = {
     [key: string]: {
         numQueued: number;
         timing: TimingWithFps;
+        state?: IONodeState;
+        dotColor?: PipelineStateDotColor;
     };
 };
 type Timing = {
@@ -20,6 +23,8 @@ type TimingWithFps = {
     durationStats: Timing;
     fps: number;
 };
+type NodeStateRaw = 0 | 1 | 2 | 3;
+type NodeState = 'IDLE' | 'GETTING_INPUTS' | 'PROCESSING' | 'SENDING_OUTPUTS';
 export type RawPipelineState = [
     number,
     {
@@ -30,13 +35,31 @@ export type RawPipelineState = [
         otherTimings: object;
         outputStates: IOStates;
         outputsSendTiming: TimingWithFps;
-        state: number;
+        state?: NodeStateRaw;
     }
 ];
+export type PipelineStateDotColor = 'gray' | 'green' | 'yellow' | 'red';
+export type GPSTTimingsType = {
+    G: number;
+    P: number;
+    S: number;
+    T: number;
+};
+export type NodeExtras = {
+    gpstTimings?: GPSTTimingsType;
+    stateInfo?: {
+        state: NodeState;
+        label: string;
+        letter: string;
+    };
+};
 export type PipelineState = {
     id: number;
     inputs: IOStates;
     outputs: IOStates;
-};
+} & NodeExtras;
 export declare function parsePipelineState(rawPayload: RawPipelineStatePayload): PipelineState[];
+export declare function stateToLabel(state: NodeState): string;
+export declare function stateToLetter(state: NodeState): string;
+export declare function formatTiming(time: number): string;
 export {};

package/dist/src/services/pipeline-state.js

@@ -1,13 +1,94 @@
+function nodeStateToDotColor(state) {
+    switch (state) {
+        case 0:
+            return 'green';
+        case 1:
+            return 'yellow';
+        case 2:
+            return 'red';
+        default:
+            return 'gray';
+    }
+}
+function nodeStateToState(state) {
+    switch (state) {
+        case 0:
+            return 'IDLE';
+        case 1:
+            return 'GETTING_INPUTS';
+        case 2:
+            return 'PROCESSING';
+        case 3:
+            return 'SENDING_OUTPUTS';
+    }
+}
+function formatIOStates(values) {
+    let returnObj = {};
+    for (const [key, value] of Object.entries(values)) {
+        returnObj = {
+            ...returnObj,
+            [key]: {
+                ...value,
+                dotColor: value.state ? nodeStateToDotColor(value.state) : 'gray',
+            },
+        };
+    }
+    return returnObj;
+}
 export function parsePipelineState(rawPayload) {
     const { nodeStates } = rawPayload;
     const parsedNodeStates = [];
     for (const [nodeId, nodeState] of nodeStates) {
+        const state = nodeState?.state ? nodeStateToState(nodeState.state) : 'IDLE';
         const currentNode = {
             id: nodeId,
-            inputs: nodeState.inputStates,
-            outputs: nodeState.outputStates,
+            inputs: formatIOStates(nodeState.inputStates),
+            outputs: formatIOStates(nodeState.outputStates),
+            gpstTimings: {
+                G: nodeState.inputsGetTiming.durationStats.averageMicrosRecent,
+                P: nodeState.mainLoopTiming.durationStats.averageMicrosRecent -
+                    nodeState.outputsSendTiming.durationStats.averageMicrosRecent -
+                    nodeState.inputsGetTiming.durationStats.averageMicrosRecent,
+                S: nodeState.outputsSendTiming.durationStats.averageMicrosRecent,
+                T: nodeState.mainLoopTiming.durationStats.averageMicrosRecent,
+            },
+            stateInfo: {
+                state: state,
+                label: stateToLabel(state),
+                letter: stateToLetter(state),
+            },
         };
         parsedNodeStates.push(currentNode);
     }
     return parsedNodeStates;
 }
+export function stateToLabel(state) {
+    switch (state) {
+        case 'IDLE':
+            return 'Idle';
+        case 'GETTING_INPUTS':
+            return 'Getting Inputs';
+        case 'PROCESSING':
+            return 'Processing';
+        case 'SENDING_OUTPUTS':
+            return 'Sending Outputs';
+    }
+}
+export function stateToLetter(state) {
+    switch (state) {
+        case 'IDLE':
+            return 'I';
+        case 'GETTING_INPUTS':
+            return 'G';
+        case 'PROCESSING':
+            return 'P';
+        case 'SENDING_OUTPUTS':
+            return 'S';
+    }
+}
+// NOTE: Time is in microseconds. 1us => 0.001 ms => 1e-6 s
+export function formatTiming(time) {
+    return Math.round(time / 1000)
+        .toString()
+        .padStart(3, '0');
+}

package/dist/src/services/pipeline.d.ts

@@ -1,4 +1,6 @@
 import { type Edge, type Node } from '@xyflow/react';
+import { type ParsedHandle } from './pipeline-handles';
+import { NodeExtras } from './pipeline-state';
 export type RawPipelineNodeIO = [
     [
         string,
@@ -17,8 +19,8 @@ export type RawPipelineNode = {
     ioInfo: RawPipelineNodeIO[];
     name: string;
     parentId?: number;
+    deviceNode?: boolean;
 };
-export type RawPipelineBridge = [number, number];
 export type RawPipelineEdge = {
     node1Id: number;
     node1Output: string;
@@ -37,16 +39,6 @@ export type Pipeline = {
     nodes: ParsedNode[];
     edges: Edge[];
 };
-export type ParsedHandle = {
-    id: number;
-    name: string;
-    type: 'input' | 'output';
-    blocking: boolean;
-    queueSize: number;
-    connected: boolean;
-    maxQueueSize?: number;
-    fps?: number;
-};
 export type ParsedNode = Node<{
     id: string;
     parentId?: string;
@@ -55,6 +47,8 @@ export type ParsedNode = Node<{
         input: ParsedHandle[];
         output: ParsedHandle[];
     };
+    nodeType?: 'device' | 'host';
+    extras?: NodeExtras;
 }>;
 export declare function parsePipeline(rawPayload: RawPipelinePayload): Pipeline;
 export declare const DOCS_BASE_URL = "https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes";

package/dist/src/services/pipeline.js

@@ -1,74 +1,78 @@
-import { MarkerType } from '@xyflow/react';
-function parseHandles(handles) {
-    const parsedHandles = {
-        input: [],
-        output: [],
-    };
-    for (const [_, handle] of handles) {
-        const type = handle.type === 3 ? 'input' : 'output';
-        const parsed = {
-            id: handle.id,
-            name: handle.name,
-            type,
-            blocking: handle.blocking,
-            queueSize: handle.queueSize,
-            connected: true,
-        };
-        parsedHandles[type].push(parsed);
-    }
-    return parsedHandles;
-}
-function filterNodesHandles(nodes, edges) {
-    const connectedHandleIds = new Set(edges.flatMap(edge => [
-        `${edge.source}-${edge.sourceHandle}`,
-        `${edge.target}-${edge.targetHandle}`,
-    ]));
-    return nodes.map(node => ({
-        ...node,
-        data: {
-            ...node.data,
-            handles: {
-                input: node.data.handles.input.map(handle => ({
-                    ...handle,
-                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
-                })),
-                output: node.data.handles.output.map(handle => ({
-                    ...handle,
-                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
-                })),
-            },
+import { MarkerType, } from '@xyflow/react';
+import { filterNodesHandles, parseHandles, } from './pipeline-handles';
+function addFakeNode(id) {
+    return [
+        typeof id === 'number' ? id : parseInt(id),
+        {
+            id: typeof id === 'number' ? id : parseInt(id),
+            name: 'Unknown',
+            ioInfo: [
+                [
+                    ['', ''],
+                    {
+                        id: 0,
+                        name: 'unknown',
+                        type: 0,
+                        blocking: false,
+                        queueSize: 0,
+                    },
+                ],
+            ],
         },
-    }));
+    ];
 }
 export function parsePipeline(rawPayload) {
     const { pipeline } = rawPayload;
     // Set all nodes as generic nodes
     const nodes = pipeline.nodes
-        .filter(([_, node]) => pipeline.connections.some(connection => connection.node1Id === node.id || connection.node2Id === node.id))
+        .filter(([_, node]) => pipeline.connections.some((connection) => connection.node1Id === node.id || connection.node2Id === node.id))
         .map(([id, node]) => ({
         type: 'generic',
         id: id.toString(),
         position: { x: 0, y: 0 },
-        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
-        extent: node.parentId?.toString() === '-1' ? undefined : 'parent',
+        parentId: node.parentId?.toString() === '-1'
+            ? undefined
+            : node.parentId?.toString(),
+        extent: node.parentId?.toString() === '-1' || node.parentId === undefined
+            ? undefined
+            : 'parent',
         data: {
             id: id.toString(),
             name: node.name,
             handles: parseHandles(node.ioInfo),
+            nodeType: node.deviceNode === undefined
+                ? undefined
+                : node.deviceNode
+                    ? 'device'
+                    : 'host',
         },
     })) ?? [];
+    // Check for parent nodes and if there is children with some parent node that doesn't exist the create it as fake node
+    const parentNodesIdsRaw = [
+        ...new Set(nodes
+            .map((node) => {
+            if (node.parentId !== undefined && node.parentId !== '-1') {
+                return node.parentId;
+            }
+            else {
+                return null;
+            }
+        })
+            .filter((id) => id !== null)),
+    ];
+    const parentNodesArr = parentNodesIdsRaw.map((id) => pipeline.nodes.find(([_, node]) => node.id.toString() === id) ??
+        addFakeNode(id));
     // Set all parent nodes as group nodes
-    const mappedParentNodes = nodes.map(node => node.parentId).filter(id => id !== undefined);
-    const filteredParentNodes = mappedParentNodes.filter(id => id !== '-1');
-    const parentNodes = [...new Set(filteredParentNodes)];
-    const parentNodesArr = parentNodes
-        .map(id => pipeline.nodes.find(([_, node]) => node.id.toString() === id))
-        .filter(node => node !== undefined);
     const formattedParentNodes = parentNodesArr.map(([id, node]) => ({
         type: 'group',
         id: id.toString(),
         position: { x: 0, y: 0 },
-        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
+        parentId: node.parentId?.toString() === '-1' || node.parentId === undefined
+            ? undefined
+            : `${node.parentId?.toString()}-parent`,
+        extent: node.parentId?.toString() === '-1' || node.parentId === undefined
+            ? undefined
+            : 'parent',
         data: {
             id: id.toString(),
             name: node.name,
@@ -80,9 +84,10 @@ export function parsePipeline(rawPayload) {
             background: 'rgba(0,0,0,0.125)',
         },
     })) ?? [];
-    const parentNodesIds = parentNodes.map(id => id.toString());
+    // Children nodes
+    const parentNodesIds = parentNodesIdsRaw.map((id) => id.toString());
     const childrenNodes = nodes
-        .map(node => {
+        .map((node) => {
         if (node.parentId && parentNodesIds.includes(node.parentId)) {
             return {
                 ...node,
@@ -101,11 +106,15 @@ export function parsePipeline(rawPayload) {
             return null;
         }
     })
-        .filter(node => node !== null);
+        .filter((node) => node !== null && node !== undefined);
+    // Non-parent and non-child nodes
     const filteredNodes = nodes
-        .filter(node => childrenNodes.find(childNode => childNode.id === node.id) !== undefined ? null : node)
-        .filter(node => node !== null);
-    const newFormattedParentNodes = formattedParentNodes.map(node => ({
+        .filter((node) => childrenNodes.find((childNode) => childNode.id === node.id) !== undefined
+        ? null
+        : node)
+        .filter((node) => node !== null);
+    // After formatting and filtering set the parent nodes ids to match with children parentIds
+    const parentNodes = formattedParentNodes.map((node) => ({
         ...node,
         id: `${node.id}-parent`,
         data: {
@@ -113,14 +122,14 @@ export function parsePipeline(rawPayload) {
             id: `${node.data.id}-parent`,
         },
     }));
-    const edges = pipeline.connections.map(connection => ({
+    const edges = pipeline.connections.map((connection) => ({
         id: `${connection.node1Id}-${connection.node2Id}-${connection.node1Output}-${connection.node2Input}-edge`,
         source: connection.node1Id.toString(),
         target: connection.node2Id.toString(),
         sourceHandle: connection.node1Output,
         targetHandle: connection.node2Input,
     })) ?? [];
-    const bridges = pipeline.bridges?.map(bridge => ({
+    const bridges = pipeline.bridges?.map((bridge) => ({
         id: `${bridge[0]}-${bridge[1]}-bridge`,
         source: bridge[0].toString(),
         target: bridge[1].toString(),
@@ -136,9 +145,12 @@ export function parsePipeline(rawPayload) {
         type: 'step',
     })) ?? [];
     // NOTE: Parent nodes should be rendered before child nodes
-    const groupedNodes = [...newFormattedParentNodes, ...childrenNodes, ...filteredNodes];
+    const groupedNodes = [...parentNodes, ...childrenNodes, ...filteredNodes];
     const nodesWithFilteredHandles = filterNodesHandles(groupedNodes, edges);
-    return { nodes: [...nodesWithFilteredHandles], edges: [...edges, ...bridges] };
+    return {
+        nodes: [...nodesWithFilteredHandles],
+        edges: [...edges, ...bridges],
+    };
 }
 export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
 export const NodesWithLinks = {

package/dist/src/services/utils.d.ts

@@ -0,0 +1,2 @@
+import { ParsedNode } from './pipeline';
+export declare const topoSort: (nodes: ParsedNode[]) => ParsedNode[];

package/dist/src/services/utils.js

@@ -0,0 +1,21 @@
+export const topoSort = (nodes) => {
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const result = [];
+    const visited = new Set();
+    const visit = (id) => {
+        if (visited.has(id))
+            return;
+        visited.add(id);
+        const node = nodeMap.get(id);
+        if (!node)
+            return;
+        // Visit parent first
+        if (node.parentId)
+            visit(node.parentId);
+        result.push(node);
+    };
+    for (const node of nodes) {
+        visit(node.id);
+    }
+    return result;
+};

package/package.json

@@ -1,64 +1,50 @@
 {
-  "name": "@luxonis/depthai-pipeline-lib",
-  "version": "1.11.0",
-  "type": "module",
-  "license": "UNLICENSED",
-  "main": "./dist/src/index.js",
-  "scripts": {
-    "build": "./build.sh",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "gen:styles": "panda codegen",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@dagrejs/dagre": "^1.1.3",
-    "@luxonis/common-fe-components": "1.25.9",
-    "@xyflow/react": "^12.0.4",
-    "postcss-import": "^16.1.0",
-    "postcss-nested": "^6.2.0",
-    "postcss-preset-env": "^10.0.0",
-    "rehype-sanitize": "^6.0.0"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@pandacss/dev": "^0.53.0",
-    "@stylistic/eslint-plugin": "^2.6.1",
-    "@types/react": "^18.3.1 || ^19.0.0",
-    "@types/react-dom": "^18.3.1 || ^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-interactive": "^10.8.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-functional": "^6.0.0",
-    "eslint-plugin-github": "^4.10.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.31",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
-    "typescript": "^5.2.2"
-  },
-  "overrides": {
-    "@radix-ui/react-alert-dialog": "1.0.5"
-  },
-  "files": [
-    "dist/src/*",
-    "dist/*.css"
-  ],
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./styles": "./dist/index.css"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "@luxonis/depthai-pipeline-lib",
+	"version": "1.13.0",
+	"type": "module",
+	"license": "UNLICENSED",
+	"main": "./dist/src/index.js",
+	"scripts": {
+		"build": "./build.sh",
+		"lint": "biome check .",
+		"lint:fix": "biome check . --write",
+		"gen:styles": "panda codegen",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"@dagrejs/dagre": "^1.1.3",
+		"@luxonis/common-fe-components": "1.25.9",
+		"@xyflow/react": "^12.0.4",
+		"postcss-import": "^16.1.0",
+		"postcss-nested": "^6.2.0",
+		"postcss-preset-env": "^10.0.0",
+		"rehype-sanitize": "^6.0.0"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1 || ^19.0.0",
+		"react-dom": "^18.3.1 || ^19.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.4.6",
+		"@pandacss/dev": "^0.53.0",
+		"@types/react": "^18.3.1 || ^19.0.0",
+		"@types/react-dom": "^18.3.1 || ^19.0.0",
+		"postcss": "^8.4.31",
+		"prettier": "^3.2.5",
+		"typescript": "^5.2.2"
+	},
+	"overrides": {
+		"@radix-ui/react-alert-dialog": "1.0.5"
+	},
+	"files": [
+		"dist/src/*",
+		"dist/*.css"
+	],
+	"exports": {
+		".": "./dist/src/index.js",
+		"./styles": "./dist/index.css"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
 }