@luxonis/depthai-pipeline-lib 3.4.0-rc.2 → 3.5.0

package/dist/src/components/BridgeEdge.js

@@ -1,16 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowRightSideIcon, Icon } from '@luxonis/common-fe-components/icons';
+import { ChevronRightIcon, Icon } from '@luxonis/ui-components';
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from '@xyflow/react';
 import React from 'react';
-import { css } from '../styled-system/css/css.mjs';
-const bridgeArrowClassName = css({
-    width: '16px',
-    height: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    pointerEvents: 'none',
-});
 export const BridgeEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerStart, markerEnd, interactionWidth, pathOptions, }) => {
     const pathRef = React.useRef(null);
     const [path, labelX, labelY] = getSmoothStepPath({
@@ -50,8 +41,7 @@ export const BridgeEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosit
             return didChange ? nextArrowState : currentArrowState;
         });
     });
-    return (_jsxs(_Fragment, { children: [_jsx("path", { ref: pathRef, d: path, fill: "none", stroke: "transparent" }), _jsx(BaseEdge, { id: id, path: path, style: style, markerStart: markerStart, markerEnd: markerEnd, interactionWidth: interactionWidth }), _jsx(EdgeLabelRenderer, { children: _jsx("div", { className: bridgeArrowClassName, style: {
-                        position: 'absolute',
+    return (_jsxs(_Fragment, { children: [_jsx("path", { ref: pathRef, d: path, fill: "none", stroke: "transparent" }), _jsx(BaseEdge, { id: id, path: path, style: style, markerStart: markerStart, markerEnd: markerEnd, interactionWidth: interactionWidth }), _jsx(EdgeLabelRenderer, { children: _jsx("div", { className: "pointer-events-none absolute flex h-4 w-4 items-center justify-center", style: {
                         transform: `translate(-50%, -50%) translate(${arrowState.x}px, ${arrowState.y}px) rotate(${arrowState.angle}deg)`,
-                    }, children: _jsx(Icon, { icon: ArrowRightSideIcon, size: "sm", color: "gray", pointerEvents: "none" }) }) })] }));
+                    }, children: _jsx(Icon, { icon: ChevronRightIcon, size: "sm", color: "gray", pointerEvents: "none" }) }) })] }));
 };

package/dist/src/components/Node.js

@@ -1,51 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { Badge, Button, Flex, HelpIcon, Label, SubLabel } 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';
+import { DOCS_BASE_URL, NodesWithLinks } from '../services/utils.js';
+const handleColorClassName = (dotColor) => {
+    switch (dotColor) {
+        case 'green':
+            return '!bg-[var(--lux-success)]';
+        case 'red':
+            return '!bg-[var(--lux-error)]';
+        case 'yellow':
+            return '!bg-[var(--lux-warning)]';
+        default:
+            return '!bg-[var(--lux-gray)]';
+    }
+};
 const NodeHandles = (props) => {
     const { handles, type } = props;
     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;
             }
-            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: 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',
-                        }), style: {
-                            background: dotColor === 'gray'
-                                ? 'dark.gray!'
-                                : dotColor === 'green'
-                                    ? 'dark.success!'
-                                    : dotColor === 'red'
-                                        ? 'dark.error!'
-                                        : dotColor === 'yellow'
-                                            ? 'dark.warning!'
-                                            : 'dark.gray!',
-                        } }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
+            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: `!h-2 !w-2 !border-0 ${blocking ? '!rounded-none' : '!rounded-full'} ${handleColorClassName(dotColor)}` }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
         }) }));
 };
 const NodeHandlesSubLabel = (props) => {
     const { type, name, queueSize, maxQueueSize, fps } = props;
-    return (_jsx(SubLabel, { className: css({
-            ...(type === 'input' //
-                ? { marginLeft: 'xs' }
-                : { marginRight: 'xs' }),
-        }), text: type === 'input'
+    return (_jsx(SubLabel, { className: type === 'input' ? 'ml-2' : 'mr-2', text: type === 'input'
             ? `[${fps ? `${fps.toFixed(1)} | ` : ''}${`${maxQueueSize ?? 0}/${queueSize}`}] ${name}`
             : `${fps ? `[${fps.toFixed(1)}]` : ''} ${name}`, break: "none" }));
 };
@@ -58,37 +39,9 @@ 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: "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',
-                            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
+    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: "flex h-5 w-5 items-center", children: (node.nodeType === 'device' || node.nodeType === 'host') && (_jsx(Badge, { label: node.nodeType === 'device' ? 'D' : 'H', variant: node.nodeType === 'device' ? 'light' : 'filled', intent: "active", className: "flex h-5 w-5 cursor-help items-center justify-center p-0", tooltip: node.nodeType === 'device' ? 'Device Node' : 'Host Node' })) }), _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',
-                        })) })] }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", isConnectable: false, className: css({
-                    width: 'custom.handle.dot!',
-                    height: 'custom.handle.dot!',
-                }), style: {
-                    border: 'none',
-                    background: 'transparent',
-                } }), _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: {
-                    border: 'none',
-                    background: 'transparent',
-                } })] }));
+                                : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", intent: "white", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: "node-help-icon ml-auto h-auto w-auto" })] }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", isConnectable: false, className: "!h-2 !w-2 !rounded-full !border-0 !bg-transparent" }), _jsxs(Flex, { gap: "sm", className: "min-w-[376px] 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: "!h-2 !w-2 !rounded-full !border-0 !bg-transparent" })] }));
 };

package/dist/src/components/PipelineCanvas.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Header } from '@luxonis/common-fe-components';
-import { Flex } from '@luxonis/ui-components';
+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 { adjustNodes, getLayoutedElements, updateNodesOnPipelineStateChange, } from '../services/utils.js';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 type PipelineLegendProps = {
     isDebugging: boolean;
 };

package/dist/src/components/PipelineLegend.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Label, SubLabel } from '@luxonis/common-fe-components';
-import { Flex } from '@luxonis/ui-components';
-import React from 'react';
+import { Badge, Flex, Label, SubLabel } from '@luxonis/ui-components';
 import { PACKAGE_VERSION } from '../version.js';
 const debugSections = [
     {
@@ -11,12 +9,12 @@ const debugSections = [
                 0: {
                     id: 'device-node',
                     label: 'Device Node',
-                    marker: (_jsx(Badge, { label: "D", variant: "active", style: { padding: '0px', paddingInline: '4px' } })),
+                    marker: _jsx(Badge, { label: "D", variant: "light", intent: "active", className: "px-[5px] py-0" }),
                 },
                 1: {
                     id: 'host-node',
                     label: 'Host Node',
-                    marker: (_jsx(Badge, { label: "H", variant: "cyan", style: { padding: '0px', paddingInline: '4px' } })),
+                    marker: _jsx(Badge, { label: "H", variant: "filled", intent: "active", className: "px-[5px] py-0" }),
                 },
             },
         ],
@@ -170,32 +168,20 @@ const bridgeSection = {
         },
     ],
 };
-// NOTE: Colors from hub repo
-// success: '#12B76A',
-// warning: '#DC6803',
-// error: '#F04438',
-// gray: '#667085',
 function LegendDot({ tone, square = false }) {
-    const color = React.useMemo(() => {
+    const className = (() => {
         switch (tone) {
             case 'gray':
-                return '#667085';
+                return 'bg-[#667085]';
             case 'green':
-                return '#12B76A';
+                return 'bg-[#12B76A]';
             case 'yellow':
-                return '#DC6803';
+                return 'bg-[#DC6803]';
             case 'red':
-                return '#F04438';
+                return 'bg-[#F04438]';
         }
-    }, [tone]);
-    return (_jsx("div", { style: {
-            width: '8px',
-            height: '8px',
-            backgroundColor: color,
-            border: 'none',
-            borderRadius: square ? undefined : '100%',
-            flexShrink: 0,
-        } }));
+    })();
+    return (_jsx("div", { className: `h-2 w-2 shrink-0 border-0 ${square ? 'rounded-none' : 'rounded-full'} ${className}` }));
 }
 function LegendCell({ left, right }) {
     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] }));

package/dist/src/version.d.ts

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

package/dist/src/version.js

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

package/package.json

@@ -1,22 +1,21 @@
 {
 	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "3.4.0-rc.2",
+	"version": "3.5.0",
 	"type": "module",
 	"license": "UNLICENSED",
 	"main": "./dist/src/index.js",
 	"types": "./dist/src/index.d.ts",
 	"scripts": {
+		"tailwind": "tailwindcss -i ./src/index.css -o ./dist/index.css",
 		"build": "./build.sh",
 		"build:win": "powershell -NoProfile -ExecutionPolicy Bypass -File ./build.win.ps1",
 		"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",
-		"@luxonis/ui-components": "1.0.3",
+		"@luxonis/ui-components": "^1.3.0",
 		"@xyflow/react": "^12.0.4",
 		"postcss-import": "^16.1.0",
 		"postcss-nested": "^6.2.0",
@@ -29,7 +28,6 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.15",
-		"@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",