@luxonis/depthai-pipeline-lib 3.3.0 → 3.4.0-rc.1

package/dist/index.css

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

package/dist/panda.css

@@ -1268,22 +1268,6 @@
     pointer-events: none;
 }
 
-  .min-w_container\.smaller\.xxs {
-    min-width: var(--sizes-container-smaller-xxs);
-}
-
-  .bd_base {
-    border: var(--borders-base);
-}
-
-  .bdr_common {
-    border-radius: var(--radii-common);
-}
-
-  .p_0 {
-    padding: var(--spacing-0);
-}
-
   .bdr_0\%\! {
     border-radius: 0% !important;
 }
@@ -1304,15 +1288,6 @@
     border: var(--borders-none) !important;
 }
 
-  .w_full {
-    width: var(--sizes-full);
-}
-
-  .bdr-t_common {
-    border-top-left-radius: var(--radii-common);
-    border-top-right-radius: var(--radii-common);
-}
-
   .w_20px {
     width: 20px;
 }
@@ -1337,14 +1312,6 @@
     justify-content: center;
 }
 
-  .border-style_dashed {
-    border-style: dashed;
-}
-
-  .bg-c_rgba\(0\,0\,0\,0\.125\) {
-    background-color: rgba(0,0,0,0.125);
-}
-
   .bg-c_dark\.warning\! {
     background-color: var(--colors-dark-warning) !important;
 }
@@ -1369,19 +1336,7 @@
     margin-right: var(--spacing-xs);
 }
 
-  .bg-c_white {
-    background-color: var(--colors-white);
-}
-
-  .bg-c_light\.gray {
-    background-color: var(--colors-light-gray);
-}
-
   .right_xs {
     right: var(--spacing-xs);
 }
-
-  .\[\&\:hover_\.node-help-icon\]\:c_text\.normal:hover .node-help-icon {
-    color: var(--colors-text-normal);
-}
 }

package/dist/src/components/Node.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Button, Flex, HelpIcon, Label, SubLabel } from '@luxonis/common-fe-components';
+import { Badge, Button, HelpIcon, Label, SubLabel } from '@luxonis/common-fe-components';
 import { clsx } from '@luxonis/common-fe-components/helpers';
+import { Flex } from '@luxonis/ui-components';
 import { Handle, Position } from '@xyflow/react';
 import { formatTiming } from '../services/pipeline-state.js';
 import { DOCS_BASE_URL, MIN_NODE_WIDTH, NodesWithLinks } from '../services/utils.js';
 import { css } from '../styled-system/css/css.mjs';
 const NodeHandles = (props) => {
     const { handles, type } = props;
-    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, }) => {
+    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', className: 'min-w-[120px]', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected, dotColor, }) => {
             if (!connected) {
                 return null;
             }
@@ -49,7 +50,7 @@ const NodeHandlesSubLabel = (props) => {
             : `${fps ? `[${fps.toFixed(1)}]` : ''} ${name}`, break: "none" }));
 };
 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`))) }));
+    return (_jsx(Flex, { direction: "column", align: "center", className: 'min-w-[120px]', children: Object.entries(props).map(([key, item]) => (_jsxs(Flex, { gap: "xs", 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;
@@ -57,19 +58,7 @@ export const PipelineNode = (props) => {
     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',
-            '&:hover .node-help-icon': {
-                color: 'text.normal',
-            },
-        }), children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: "xs", className: css({
-                    width: 'full',
-                    backgroundColor: 'light.gray',
-                    roundedTop: 'common',
-                }), children: [_jsx("span", { className: css({
+    return (_jsxs(Flex, { direction: "column", className: "min-w-[120px] border border-border rounded-sm bg-background hover:[&_.node-help-icon]:text-foreground", children: [_jsxs(Flex, { align: "center", justify: "between", gap: "xs", className: "w-full bg-muted rounded-t-sm", children: [_jsx("span", { className: css({
                             width: '20px',
                             height: '20px',
                             display: 'flex',
@@ -95,7 +84,7 @@ export const PipelineNode = (props) => {
                 }), style: {
                     border: 'none',
                     background: 'transparent',
-                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", minWidth: `${MIN_NODE_WIDTH}px`, children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), 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({
+                } }), _jsxs(Flex, { gap: "sm", className: `min-w-[${MIN_NODE_WIDTH}px] py-2`, children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), 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,8 +1,7 @@
-import type { FlexProps } from '@luxonis/common-fe-components';
 import React from 'react';
 import type { Pipeline } from '../services/pipeline.js';
 import type { PipelineState } from '../services/pipeline-state.js';
-export type PipelineCanvasProps = FlexProps & {
+export type PipelineCanvasProps = {
     pipeline: Pipeline | null;
     pipelineState: PipelineState[] | null;
     header?: React.ReactNode;

package/dist/src/components/PipelineCanvas.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, Header } from '@luxonis/common-fe-components';
+import { Button, Header } from '@luxonis/common-fe-components';
+import { Flex } from '@luxonis/ui-components';
 import { BezierEdge, Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
 import React from 'react';
 import { adjustNodes, getLayoutedElements, updateNodesOnPipelineStateChange, } from '../services/utils.js';
@@ -8,7 +9,7 @@ import { PipelineNode } from './Node.js';
 import { PipelineLegend } from './PipelineLegend.js';
 const nodeTypes = { generic: PipelineNode };
 const edgeTypes = { generic: BezierEdge, bridge: BridgeEdge };
-const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, header, isDebugging = false, ...flexProps }) => {
+const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, header, isDebugging = false, }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const reactFlowWidth = useStore((state) => state.width);
@@ -66,6 +67,6 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
             setShouldFitAndResize(false);
         }
     }, [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 && (_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", flexDirection: "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, 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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Flex, Label, SubLabel } from '@luxonis/common-fe-components';
+import { Badge, Label, SubLabel } from '@luxonis/common-fe-components';
+import { Flex } from '@luxonis/ui-components';
 import React from 'react';
 import { PACKAGE_VERSION } from '../version.js';
 const debugSections = [
@@ -197,10 +198,10 @@ function LegendDot({ tone, square = false }) {
         } }));
 }
 function LegendCell({ left, right }) {
-    return (_jsxs(Flex, { gap: "xxs", width: "full", alignItems: "center", children: [_jsxs(Flex, { alignItems: "center", gap: "xxs", width: "full", children: [left.marker, _jsx(SubLabel, { text: `${left.label}` })] }), right ? (_jsxs(Flex, { alignItems: "center", gap: "xxs", width: "full", children: [right.marker, _jsx(SubLabel, { text: `${right.label}` })] })) : null] }));
+    return (_jsxs(Flex, { gap: "xs", align: "center", className: "w-full", children: [_jsxs(Flex, { align: "center", gap: "xs", className: "w-full", children: [left.marker, _jsx(SubLabel, { text: `${left.label}` })] }), right ? (_jsxs(Flex, { align: "center", gap: "xs", className: "w-full", children: [right.marker, _jsx(SubLabel, { text: `${right.label}` })] })) : null] }));
 }
 function LegendSection({ title, items }) {
-    return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", children: [_jsx(Label, { text: title, weight: "medium" }), items.map((item) => (_jsx(LegendCell, { left: item[0], right: item[1] }, `${item[0].id}-${item[1]?.id}`)))] }));
+    return (_jsxs(Flex, { direction: "column", gap: "xs", className: "w-full", children: [_jsx(Label, { text: title, weight: "medium" }), items.map((item) => (_jsx(LegendCell, { left: item[0], right: item[1] }, `${item[0].id}-${item[1]?.id}`)))] }));
 }
 export const PipelineLegend = ({ isDebugging }) => {
     const sections = isDebugging
@@ -212,5 +213,5 @@ export const PipelineLegend = ({ isDebugging }) => {
             bridgeSection,
         ]
         : sharedSections;
-    return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", padding: "sm", rounded: "common", border: "base", backgroundColor: "white", maxWidth: "390px", children: [_jsx(Label, { text: "Legend", color: "black", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", width: "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-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" })] }));
 };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const PACKAGE_VERSION = "3.3.0";
+export declare const PACKAGE_VERSION = "3.4.0-rc.1";

package/dist/src/version.js

@@ -1,2 +1,2 @@
 // Do not edit it manually.
-export const PACKAGE_VERSION = '3.3.0';
+export const PACKAGE_VERSION = '3.4.0-rc.1';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "3.3.0",
+	"version": "3.4.0-rc.1",
 	"type": "module",
 	"license": "UNLICENSED",
 	"main": "./dist/src/index.js",
@@ -16,6 +16,7 @@
 	"dependencies": {
 		"@dagrejs/dagre": "^1.1.3",
 		"@luxonis/common-fe-components": "1.25.9",
+		"@luxonis/ui-components": "1.0.3",
 		"@xyflow/react": "^12.0.4",
 		"postcss-import": "^16.1.0",
 		"postcss-nested": "^6.2.0",

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

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

package/dist/src/components/GroupNode.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Flex } from '@luxonis/common-fe-components';
-import { css } from '../styled-system/css/index.mjs';
-// TODO: Add group node
-export const GroupNode = (props) => {
-    const { data: _node } = props;
-    return (_jsx(Flex, { direction: "column", className: css({
-            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)',
-        }) }));
-};