@uipath/apollo-react 4.15.1-pr556.f7e5934 → 4.16.0

package/dist/canvas/components/ButtonHandle/ButtonHandleLayoutUtils.js

@@ -0,0 +1,122 @@
+import { Position } from "../../xyflow/react.js";
+import { GRID_SPACING } from "../../constants.js";
+import { HANDLE_CROSS_AXIS_SIZE_PX, HANDLE_EDGE_COVERAGE_RATIO } from "./ButtonHandleStyleUtils.js";
+const INWARD_HANDLE_ANCHOR_SIZE_PX = GRID_SPACING;
+const INWARD_HANDLE_ANCHOR_RADIUS_PX = INWARD_HANDLE_ANCHOR_SIZE_PX / 2;
+const INWARD_NOTCH_OVERLAP_PX = {
+    artifact: 5,
+    input: 4,
+    output: 6
+};
+function getHandleActionPortal({ nodeId, position, positionPercent, total, nodeWidth, nodeHeight }) {
+    if (!nodeWidth || !nodeHeight) return;
+    const edgeCoverageRatio = HANDLE_EDGE_COVERAGE_RATIO / total;
+    const horizontalWidth = nodeWidth * edgeCoverageRatio;
+    const verticalHeight = nodeHeight * edgeCoverageRatio;
+    const x = positionPercent / 100 * nodeWidth;
+    const y = positionPercent / 100 * nodeHeight;
+    switch(position){
+        case Position.Top:
+            return {
+                nodeId,
+                left: x,
+                top: 0,
+                width: horizontalWidth,
+                height: HANDLE_CROSS_AXIS_SIZE_PX,
+                transform: 'translate(-50%, -50%)'
+            };
+        case Position.Bottom:
+            return {
+                nodeId,
+                left: x,
+                top: nodeHeight - HANDLE_CROSS_AXIS_SIZE_PX,
+                width: horizontalWidth,
+                height: HANDLE_CROSS_AXIS_SIZE_PX,
+                transform: 'translate(-50%, 50%)'
+            };
+        case Position.Left:
+            return {
+                nodeId,
+                left: 0,
+                top: y,
+                width: HANDLE_CROSS_AXIS_SIZE_PX,
+                height: verticalHeight,
+                transform: 'translate(-50%, -50%)'
+            };
+        case Position.Right:
+            return {
+                nodeId,
+                left: nodeWidth - HANDLE_CROSS_AXIS_SIZE_PX,
+                top: y,
+                width: HANDLE_CROSS_AXIS_SIZE_PX,
+                height: verticalHeight,
+                transform: 'translate(50%, -50%)'
+            };
+    }
+}
+function getInwardHandleLayout(position, handleType) {
+    const notchOverlap = -INWARD_NOTCH_OVERLAP_PX[handleType];
+    const anchorSize = {
+        width: INWARD_HANDLE_ANCHOR_SIZE_PX,
+        height: INWARD_HANDLE_ANCHOR_SIZE_PX
+    };
+    switch(position){
+        case Position.Left:
+            return {
+                rootTransform: 'translate(0, -50%)',
+                contentDirectionClassName: 'flex-row',
+                notchStyle: {
+                    marginLeft: notchOverlap
+                },
+                anchorStyle: {
+                    ...anchorSize,
+                    left: `calc(100% - ${INWARD_HANDLE_ANCHOR_RADIUS_PX}px)`,
+                    top: '50%',
+                    transform: 'translateY(-50%)'
+                }
+            };
+        case Position.Right:
+            return {
+                rootTransform: 'translate(0, -50%)',
+                contentDirectionClassName: 'flex-row-reverse',
+                notchStyle: {
+                    marginRight: notchOverlap
+                },
+                anchorStyle: {
+                    ...anchorSize,
+                    left: -INWARD_HANDLE_ANCHOR_RADIUS_PX,
+                    top: '50%',
+                    transform: 'translateY(-50%)'
+                }
+            };
+        case Position.Top:
+            return {
+                rootTransform: 'translate(-50%, 0)',
+                contentDirectionClassName: 'flex-col',
+                notchStyle: {
+                    marginTop: notchOverlap
+                },
+                anchorStyle: {
+                    ...anchorSize,
+                    left: '50%',
+                    top: `calc(100% - ${INWARD_HANDLE_ANCHOR_RADIUS_PX}px)`,
+                    transform: 'translateX(-50%)'
+                }
+            };
+        case Position.Bottom:
+            return {
+                rootTransform: 'translate(-50%, 0)',
+                contentDirectionClassName: 'flex-col-reverse',
+                notchStyle: {
+                    marginBottom: notchOverlap
+                },
+                anchorStyle: {
+                    ...anchorSize,
+                    left: '50%',
+                    top: -INWARD_HANDLE_ANCHOR_RADIUS_PX,
+                    transform: 'translateX(-50%)'
+                }
+            };
+    }
+}
+export { getHandleActionPortal, getInwardHandleLayout };

package/dist/canvas/components/LoopNode/LoopNode.cjs

@@ -53,22 +53,22 @@ const RESIZE_CONTROLS = [
     {
         position: 'top-left',
         cursor: 'nwse-resize',
-        indicatorClassName: 'top-[-5px] left-[-5px]'
+        indicatorClassName: 'top-[-4px] left-[-4px]'
     },
     {
         position: 'top-right',
         cursor: 'nesw-resize',
-        indicatorClassName: 'top-[-5px] right-[-5px]'
+        indicatorClassName: 'top-[-4px] right-[-4px]'
     },
     {
         position: 'bottom-left',
         cursor: 'nesw-resize',
-        indicatorClassName: 'bottom-[-5px] left-[-5px]'
+        indicatorClassName: 'bottom-[-4px] left-[-4px]'
     },
     {
         position: 'bottom-right',
         cursor: 'nwse-resize',
-        indicatorClassName: 'bottom-[-5px] right-[-5px]'
+        indicatorClassName: 'bottom-[-4px] right-[-4px]'
     }
 ];
 const RESIZE_CONTROL_STYLE = {
@@ -165,6 +165,8 @@ function LoopNodeComponent(props) {
     ]);
     const displayTitle = display.label ?? external_LoopNode_constants_cjs_namespaceObject.DEFAULT_LOOP_TITLE;
     const displayIcon = display.icon ?? external_LoopNode_constants_cjs_namespaceObject.DEFAULT_LOOP_ICON;
+    const isParallel = true === resolvedData.parallel;
+    const isDropTarget = true === resolvedData.isDropTarget;
     const containerWidth = width || external_constants_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH;
     const containerHeight = height || external_constants_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT;
     const nodeSizeStyle = {
@@ -240,11 +242,12 @@ function LoopNodeComponent(props) {
         "data-suggestion-type": suggestionType,
         "data-validation-status": validationState?.validationStatus,
         "aria-busy": resolvedData.loading || void 0,
-        className: (0, apollo_wind_namespaceObject.cn)('group/loop-shell relative flex h-full w-full flex-col overflow-visible border bg-surface-overlay', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border-subtle', (0, BaseNodeContainer_cjs_namespaceObject.getStatusBorder)(suggestionType ?? validationState?.validationStatus ?? executionStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', selected && 'outline outline-foreground-accent-muted', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
+        className: (0, apollo_wind_namespaceObject.cn)('group/loop-shell relative box-border flex h-full w-full flex-col overflow-visible rounded-[20px] border bg-transparent', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border-subtle', (0, BaseNodeContainer_cjs_namespaceObject.getStatusBorder)(suggestionType ?? validationState?.validationStatus ?? executionStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', selected && 'outline outline-2 outline-foreground-accent-muted', isDropTarget && 'bg-surface-hover outline outline-2 outline-brand', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
         style: {
             ...nodeSizeStyle,
-            borderRadius: external_LoopNode_constants_cjs_namespaceObject.CONTAINER_SHELL_RADIUS_PX,
-            background: display.background ?? external_LoopNode_constants_cjs_namespaceObject.DEFAULT_CONTAINER_SHELL_BACKGROUND
+            ...display.background ? {
+                background: display.background
+            } : {}
         },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -263,7 +266,8 @@ function LoopNodeComponent(props) {
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
                 title: displayTitle,
                 icon: displayIcon,
-                loading: isLoading
+                loading: isLoading,
+                isParallel: isParallel
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BodyFrame, {
                 isEmpty: showEmptyStateButton,
@@ -294,11 +298,11 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(LoopNodeComponent);
-function Header({ title, icon, loading }) {
+function Header({ title, icon, loading, isParallel }) {
     const titleContent = loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-        className: "truncate text-[14px] font-semibold tracking-normal",
+        className: "truncate text-[15px] font-semibold leading-5 tracking-normal",
         children: title
     });
     const iconContent = loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -311,16 +315,32 @@ function Header({ title, icon, loading }) {
             size: 16
         })
     }) : null;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "flex shrink-0 items-center justify-between gap-2.5 pl-4.5 pr-5 pt-3.5 text-foreground cursor-grab active:cursor-grabbing",
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex shrink-0 cursor-grab items-center justify-between gap-2.5 px-3.5 pt-2.5 text-foreground active:cursor-grabbing",
         "data-testid": "loop-node-header",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: "flex min-w-0 items-center gap-2",
-            children: [
-                iconContent,
-                titleContent
-            ]
-        })
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex min-w-0 items-center gap-2.5",
+                children: [
+                    iconContent,
+                    titleContent
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                className: "flex shrink-0 items-center gap-1 rounded-full border border-border-subtle bg-transparent px-2.5 py-0.5 text-[11px] font-semibold leading-4 text-foreground",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: (0, apollo_wind_namespaceObject.cn)('flex shrink-0', isParallel && 'rotate-90'),
+                        "aria-hidden": true,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                            icon: "align-justify",
+                            size: 11
+                        })
+                    }),
+                    isParallel ? 'Parallel' : 'Sequential'
+                ]
+            })
+        ]
     });
 }
 function EmptyState({ onAddFirstChild }) {
@@ -339,12 +359,7 @@ function BodyFrame({ isEmpty, isLoading, onAddFirstChild }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": "loop-body-frame",
         "data-empty": isEmpty ? 'true' : 'false',
-        className: (0, apollo_wind_namespaceObject.cn)('relative flex flex-1 rounded-[26px] border border-dashed', 'pointer-events-none', isEmpty && 'items-center justify-center'),
-        style: {
-            margin: external_LoopNode_constants_cjs_namespaceObject.CONTAINER_FRAME_INSET_PX,
-            background: external_LoopNode_constants_cjs_namespaceObject.DEFAULT_CONTAINER_FRAME_BACKGROUND,
-            borderColor: external_LoopNode_constants_cjs_namespaceObject.DEFAULT_CONTAINER_FRAME_BORDER
-        },
+        className: (0, apollo_wind_namespaceObject.cn)('relative m-2.5 flex flex-1 rounded-xl border-[1.5px] border-dashed border-border-subtle bg-transparent', 'pointer-events-none', isEmpty && 'items-center justify-center'),
         children: [
             isLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
@@ -376,7 +391,7 @@ function ResizeCornerIndicators({ visible }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
         children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 "aria-hidden": true,
-                className: (0, apollo_wind_namespaceObject.cn)('pointer-events-none absolute h-1.5 w-1.5 rounded-[1px] border border-brand bg-background transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
+                className: (0, apollo_wind_namespaceObject.cn)('pointer-events-none absolute h-2 w-2 rounded-full bg-brand transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
             }, position))
     });
 }

package/dist/canvas/components/LoopNode/LoopNode.constants.cjs

@@ -24,47 +24,30 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    DEFAULT_CONTAINER_HEADER_HEIGHT_PX: ()=>DEFAULT_CONTAINER_HEADER_HEIGHT_PX,
-    DEFAULT_CONTAINER_FRAME_BACKGROUND: ()=>DEFAULT_CONTAINER_FRAME_BACKGROUND,
-    DEFAULT_LOOP_ICON: ()=>DEFAULT_LOOP_ICON,
-    DEFAULT_LOOP_TITLE: ()=>DEFAULT_LOOP_TITLE,
     CONTAINER_FRAME_INSET_PX: ()=>CONTAINER_FRAME_INSET_PX,
-    CONTAINER_SHELL_RADIUS_PX: ()=>CONTAINER_SHELL_RADIUS_PX,
-    DEFAULT_CONTAINER_FRAME_BORDER: ()=>DEFAULT_CONTAINER_FRAME_BORDER,
-    DEFAULT_CONTAINER_SHELL_BACKGROUND: ()=>DEFAULT_CONTAINER_SHELL_BACKGROUND,
+    DEFAULT_CONTAINER_HEADER_HEIGHT_PX: ()=>DEFAULT_CONTAINER_HEADER_HEIGHT_PX,
+    DEFAULT_CONTAINER_MIN_HEIGHT: ()=>DEFAULT_CONTAINER_MIN_HEIGHT,
     DEFAULT_CONTAINER_MIN_WIDTH: ()=>DEFAULT_CONTAINER_MIN_WIDTH,
-    DEFAULT_CONTAINER_MIN_HEIGHT: ()=>DEFAULT_CONTAINER_MIN_HEIGHT
+    DEFAULT_LOOP_ICON: ()=>DEFAULT_LOOP_ICON,
+    DEFAULT_LOOP_TITLE: ()=>DEFAULT_LOOP_TITLE
 });
-const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const DEFAULT_LOOP_ICON = 'repeat';
 const DEFAULT_LOOP_TITLE = 'Loop';
 const DEFAULT_CONTAINER_HEADER_HEIGHT_PX = 40;
-const DEFAULT_CONTAINER_MIN_WIDTH = 12 * external_constants_cjs_namespaceObject.GRID_SPACING;
-const DEFAULT_CONTAINER_MIN_HEIGHT = 12 * external_constants_cjs_namespaceObject.GRID_SPACING;
-const CONTAINER_SHELL_RADIUS_PX = 20;
-const CONTAINER_FRAME_INSET_PX = 12;
-const DEFAULT_CONTAINER_SHELL_BACKGROUND = 'var(--canvas-background)';
-const DEFAULT_CONTAINER_FRAME_BACKGROUND = 'var(--canvas-background)';
-const DEFAULT_CONTAINER_FRAME_BORDER = 'var(--canvas-border)';
+const DEFAULT_CONTAINER_MIN_WIDTH = 400;
+const DEFAULT_CONTAINER_MIN_HEIGHT = 220;
+const CONTAINER_FRAME_INSET_PX = 10;
 exports.CONTAINER_FRAME_INSET_PX = __webpack_exports__.CONTAINER_FRAME_INSET_PX;
-exports.CONTAINER_SHELL_RADIUS_PX = __webpack_exports__.CONTAINER_SHELL_RADIUS_PX;
-exports.DEFAULT_CONTAINER_FRAME_BACKGROUND = __webpack_exports__.DEFAULT_CONTAINER_FRAME_BACKGROUND;
-exports.DEFAULT_CONTAINER_FRAME_BORDER = __webpack_exports__.DEFAULT_CONTAINER_FRAME_BORDER;
 exports.DEFAULT_CONTAINER_HEADER_HEIGHT_PX = __webpack_exports__.DEFAULT_CONTAINER_HEADER_HEIGHT_PX;
 exports.DEFAULT_CONTAINER_MIN_HEIGHT = __webpack_exports__.DEFAULT_CONTAINER_MIN_HEIGHT;
 exports.DEFAULT_CONTAINER_MIN_WIDTH = __webpack_exports__.DEFAULT_CONTAINER_MIN_WIDTH;
-exports.DEFAULT_CONTAINER_SHELL_BACKGROUND = __webpack_exports__.DEFAULT_CONTAINER_SHELL_BACKGROUND;
 exports.DEFAULT_LOOP_ICON = __webpack_exports__.DEFAULT_LOOP_ICON;
 exports.DEFAULT_LOOP_TITLE = __webpack_exports__.DEFAULT_LOOP_TITLE;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CONTAINER_FRAME_INSET_PX",
-    "CONTAINER_SHELL_RADIUS_PX",
-    "DEFAULT_CONTAINER_FRAME_BACKGROUND",
-    "DEFAULT_CONTAINER_FRAME_BORDER",
     "DEFAULT_CONTAINER_HEADER_HEIGHT_PX",
     "DEFAULT_CONTAINER_MIN_HEIGHT",
     "DEFAULT_CONTAINER_MIN_WIDTH",
-    "DEFAULT_CONTAINER_SHELL_BACKGROUND",
     "DEFAULT_LOOP_ICON",
     "DEFAULT_LOOP_TITLE"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts

@@ -1,11 +1,7 @@
 export declare const DEFAULT_LOOP_ICON = "repeat";
 export declare const DEFAULT_LOOP_TITLE = "Loop";
 export declare const DEFAULT_CONTAINER_HEADER_HEIGHT_PX = 40;
-export declare const DEFAULT_CONTAINER_MIN_WIDTH: number;
-export declare const DEFAULT_CONTAINER_MIN_HEIGHT: number;
-export declare const CONTAINER_SHELL_RADIUS_PX = 20;
-export declare const CONTAINER_FRAME_INSET_PX = 12;
-export declare const DEFAULT_CONTAINER_SHELL_BACKGROUND = "var(--canvas-background)";
-export declare const DEFAULT_CONTAINER_FRAME_BACKGROUND = "var(--canvas-background)";
-export declare const DEFAULT_CONTAINER_FRAME_BORDER = "var(--canvas-border)";
+export declare const DEFAULT_CONTAINER_MIN_WIDTH = 400;
+export declare const DEFAULT_CONTAINER_MIN_HEIGHT = 220;
+export declare const CONTAINER_FRAME_INSET_PX = 10;
 //# sourceMappingURL=LoopNode.constants.d.ts.map

package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoopNode.constants.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,kBAAkB,SAAS,CAAC;AACzC,eAAO,MAAM,kCAAkC,KAAK,CAAC;AAErD,eAAO,MAAM,2BAA2B,QAAoB,CAAC;AAC7D,eAAO,MAAM,4BAA4B,QAAoB,CAAC;AAC9D,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAC5C,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,kCAAkC,6BAA6B,CAAC;AAC7E,eAAO,MAAM,kCAAkC,6BAA6B,CAAC;AAC7E,eAAO,MAAM,8BAA8B,yBAAyB,CAAC"}
+{"version":3,"file":"LoopNode.constants.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,kBAAkB,SAAS,CAAC;AACzC,eAAO,MAAM,kCAAkC,KAAK,CAAC;AAErD,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAChD,eAAO,MAAM,wBAAwB,KAAK,CAAC"}

package/dist/canvas/components/LoopNode/LoopNode.constants.js

@@ -1,12 +1,7 @@
-import { GRID_SPACING } from "../../constants.js";
 const DEFAULT_LOOP_ICON = 'repeat';
 const DEFAULT_LOOP_TITLE = 'Loop';
 const DEFAULT_CONTAINER_HEADER_HEIGHT_PX = 40;
-const DEFAULT_CONTAINER_MIN_WIDTH = 12 * GRID_SPACING;
-const DEFAULT_CONTAINER_MIN_HEIGHT = 12 * GRID_SPACING;
-const CONTAINER_SHELL_RADIUS_PX = 20;
-const CONTAINER_FRAME_INSET_PX = 12;
-const DEFAULT_CONTAINER_SHELL_BACKGROUND = 'var(--canvas-background)';
-const DEFAULT_CONTAINER_FRAME_BACKGROUND = 'var(--canvas-background)';
-const DEFAULT_CONTAINER_FRAME_BORDER = 'var(--canvas-border)';
-export { CONTAINER_FRAME_INSET_PX, CONTAINER_SHELL_RADIUS_PX, DEFAULT_CONTAINER_FRAME_BACKGROUND, DEFAULT_CONTAINER_FRAME_BORDER, DEFAULT_CONTAINER_HEADER_HEIGHT_PX, DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_CONTAINER_SHELL_BACKGROUND, DEFAULT_LOOP_ICON, DEFAULT_LOOP_TITLE };
+const DEFAULT_CONTAINER_MIN_WIDTH = 400;
+const DEFAULT_CONTAINER_MIN_HEIGHT = 220;
+const CONTAINER_FRAME_INSET_PX = 10;
+export { CONTAINER_FRAME_INSET_PX, DEFAULT_CONTAINER_HEADER_HEIGHT_PX, DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_LOOP_ICON, DEFAULT_LOOP_TITLE };

package/dist/canvas/components/LoopNode/LoopNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAuEtD,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAwN9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
+{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAuEtD,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CA0N9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

package/dist/canvas/components/LoopNode/LoopNode.helpers.cjs

@@ -44,7 +44,7 @@ function isContainerNodeManifest(manifest) {
 }
 function resolveContainerHandleGroups(groups) {
     return groups.map((group)=>{
-        const boundary = 'inner' === group.boundary ? 'inner' : 'outer';
+        const boundary = group.boundary ?? 'outer';
         const position = group.position;
         return {
             ...group,

package/dist/canvas/components/LoopNode/LoopNode.helpers.js

@@ -12,7 +12,7 @@ function isContainerNodeManifest(manifest) {
 }
 function resolveContainerHandleGroups(groups) {
     return groups.map((group)=>{
-        const boundary = 'inner' === group.boundary ? 'inner' : 'outer';
+        const boundary = group.boundary ?? 'outer';
         const position = group.position;
         return {
             ...group,

package/dist/canvas/components/LoopNode/LoopNode.js

@@ -18,29 +18,29 @@ import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
 import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
 import { ButtonHandles } from "../ButtonHandle/index.js";
 import { NodeToolbar } from "../Toolbar/index.js";
-import { CONTAINER_FRAME_INSET_PX, CONTAINER_SHELL_RADIUS_PX, DEFAULT_CONTAINER_FRAME_BACKGROUND, DEFAULT_CONTAINER_FRAME_BORDER, DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_CONTAINER_SHELL_BACKGROUND, DEFAULT_LOOP_ICON, DEFAULT_LOOP_TITLE } from "./LoopNode.constants.js";
+import { DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_LOOP_ICON, DEFAULT_LOOP_TITLE } from "./LoopNode.constants.js";
 import { resolveContainerHandleGroups } from "./LoopNode.helpers.js";
 const EMPTY_DATA = {};
 const RESIZE_CONTROLS = [
     {
         position: 'top-left',
         cursor: 'nwse-resize',
-        indicatorClassName: 'top-[-5px] left-[-5px]'
+        indicatorClassName: 'top-[-4px] left-[-4px]'
     },
     {
         position: 'top-right',
         cursor: 'nesw-resize',
-        indicatorClassName: 'top-[-5px] right-[-5px]'
+        indicatorClassName: 'top-[-4px] right-[-4px]'
     },
     {
         position: 'bottom-left',
         cursor: 'nesw-resize',
-        indicatorClassName: 'bottom-[-5px] left-[-5px]'
+        indicatorClassName: 'bottom-[-4px] left-[-4px]'
     },
     {
         position: 'bottom-right',
         cursor: 'nwse-resize',
-        indicatorClassName: 'bottom-[-5px] right-[-5px]'
+        indicatorClassName: 'bottom-[-4px] right-[-4px]'
     }
 ];
 const RESIZE_CONTROL_STYLE = {
@@ -137,6 +137,8 @@ function LoopNodeComponent(props) {
     ]);
     const displayTitle = display.label ?? DEFAULT_LOOP_TITLE;
     const displayIcon = display.icon ?? DEFAULT_LOOP_ICON;
+    const isParallel = true === resolvedData.parallel;
+    const isDropTarget = true === resolvedData.isDropTarget;
     const containerWidth = width || DEFAULT_CONTAINER_WIDTH;
     const containerHeight = height || DEFAULT_CONTAINER_HEIGHT;
     const nodeSizeStyle = {
@@ -212,11 +214,12 @@ function LoopNodeComponent(props) {
         "data-suggestion-type": suggestionType,
         "data-validation-status": validationState?.validationStatus,
         "aria-busy": resolvedData.loading || void 0,
-        className: cn('group/loop-shell relative flex h-full w-full flex-col overflow-visible border bg-surface-overlay', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border-subtle', getStatusBorder(suggestionType ?? validationState?.validationStatus ?? executionStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', selected && 'outline outline-foreground-accent-muted', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
+        className: cn('group/loop-shell relative box-border flex h-full w-full flex-col overflow-visible rounded-[20px] border bg-transparent', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border-subtle', getStatusBorder(suggestionType ?? validationState?.validationStatus ?? executionStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', selected && 'outline outline-2 outline-foreground-accent-muted', isDropTarget && 'bg-surface-hover outline outline-2 outline-brand', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
         style: {
             ...nodeSizeStyle,
-            borderRadius: CONTAINER_SHELL_RADIUS_PX,
-            background: display.background ?? DEFAULT_CONTAINER_SHELL_BACKGROUND
+            ...display.background ? {
+                background: display.background
+            } : {}
         },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -235,7 +238,8 @@ function LoopNodeComponent(props) {
             /*#__PURE__*/ jsx(Header, {
                 title: displayTitle,
                 icon: displayIcon,
-                loading: isLoading
+                loading: isLoading,
+                isParallel: isParallel
             }),
             /*#__PURE__*/ jsx(BodyFrame, {
                 isEmpty: showEmptyStateButton,
@@ -266,11 +270,11 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
-function Header({ title, icon, loading }) {
+function Header({ title, icon, loading, isParallel }) {
     const titleContent = loading ? /*#__PURE__*/ jsx("div", {
         className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
     }) : /*#__PURE__*/ jsx("span", {
-        className: "truncate text-[14px] font-semibold tracking-normal",
+        className: "truncate text-[15px] font-semibold leading-5 tracking-normal",
         children: title
     });
     const iconContent = loading ? /*#__PURE__*/ jsx("div", {
@@ -283,16 +287,32 @@ function Header({ title, icon, loading }) {
             size: 16
         })
     }) : null;
-    return /*#__PURE__*/ jsx("div", {
-        className: "flex shrink-0 items-center justify-between gap-2.5 pl-4.5 pr-5 pt-3.5 text-foreground cursor-grab active:cursor-grabbing",
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex shrink-0 cursor-grab items-center justify-between gap-2.5 px-3.5 pt-2.5 text-foreground active:cursor-grabbing",
         "data-testid": "loop-node-header",
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "flex min-w-0 items-center gap-2",
-            children: [
-                iconContent,
-                titleContent
-            ]
-        })
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex min-w-0 items-center gap-2.5",
+                children: [
+                    iconContent,
+                    titleContent
+                ]
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex shrink-0 items-center gap-1 rounded-full border border-border-subtle bg-transparent px-2.5 py-0.5 text-[11px] font-semibold leading-4 text-foreground",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: cn('flex shrink-0', isParallel && 'rotate-90'),
+                        "aria-hidden": true,
+                        children: /*#__PURE__*/ jsx(CanvasIcon, {
+                            icon: "align-justify",
+                            size: 11
+                        })
+                    }),
+                    isParallel ? 'Parallel' : 'Sequential'
+                ]
+            })
+        ]
     });
 }
 function EmptyState({ onAddFirstChild }) {
@@ -311,12 +331,7 @@ function BodyFrame({ isEmpty, isLoading, onAddFirstChild }) {
     return /*#__PURE__*/ jsxs("div", {
         "data-testid": "loop-body-frame",
         "data-empty": isEmpty ? 'true' : 'false',
-        className: cn('relative flex flex-1 rounded-[26px] border border-dashed', 'pointer-events-none', isEmpty && 'items-center justify-center'),
-        style: {
-            margin: CONTAINER_FRAME_INSET_PX,
-            background: DEFAULT_CONTAINER_FRAME_BACKGROUND,
-            borderColor: DEFAULT_CONTAINER_FRAME_BORDER
-        },
+        className: cn('relative m-2.5 flex flex-1 rounded-xl border-[1.5px] border-dashed border-border-subtle bg-transparent', 'pointer-events-none', isEmpty && 'items-center justify-center'),
         children: [
             isLoading ? /*#__PURE__*/ jsx("div", {
                 className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
@@ -348,7 +363,7 @@ function ResizeCornerIndicators({ visible }) {
     return /*#__PURE__*/ jsx(Fragment, {
         children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ jsx("div", {
                 "aria-hidden": true,
-                className: cn('pointer-events-none absolute h-1.5 w-1.5 rounded-[1px] border border-brand bg-background transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
+                className: cn('pointer-events-none absolute h-2 w-2 rounded-full bg-brand transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
             }, position))
     });
 }

package/dist/canvas/constants.cjs

@@ -60,8 +60,8 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_SOURCE_HANDLE_ID = 'output';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-const DEFAULT_CONTAINER_WIDTH = 45 * GRID_SPACING;
-const DEFAULT_CONTAINER_HEIGHT = 27 * GRID_SPACING;
+const DEFAULT_CONTAINER_WIDTH = 35 * GRID_SPACING;
+const DEFAULT_CONTAINER_HEIGHT = 20 * GRID_SPACING;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
 const TOOLBOX_HEIGHT = 440;

package/dist/canvas/constants.js

@@ -3,8 +3,8 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_SOURCE_HANDLE_ID = 'output';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-const DEFAULT_CONTAINER_WIDTH = 45 * GRID_SPACING;
-const DEFAULT_CONTAINER_HEIGHT = 27 * GRID_SPACING;
+const DEFAULT_CONTAINER_WIDTH = 35 * GRID_SPACING;
+const DEFAULT_CONTAINER_HEIGHT = 20 * GRID_SPACING;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
 const TOOLBOX_HEIGHT = 440;