@uipath/apollo-react 4.24.2 → 4.25.0

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

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { useCallback } from "react";
+import { clamp } from "../../utils/index.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+function resolveState(iterationState) {
+    if (!Number.isFinite(iterationState.total)) return;
+    const total = Math.trunc(iterationState.total);
+    if (total <= 0) return;
+    const rawActiveIndex = Number.isFinite(iterationState.activeIndex) ? Math.trunc(iterationState.activeIndex) : 0;
+    return {
+        ...iterationState,
+        total,
+        activeIndex: clamp(rawActiveIndex, 0, total - 1)
+    };
+}
+function stopCanvasControlEvent(event) {
+    event.stopPropagation();
+}
+function IterationNavigator({ iterationState }) {
+    const resolvedState = resolveState(iterationState);
+    if (!resolvedState) return null;
+    return /*#__PURE__*/ jsx(NavigatorContent, {
+        iterationState: resolvedState
+    });
+}
+function NavigatorContent({ iterationState }) {
+    const { activeIndex, total, onActiveIndexChange, disabled, ariaLabel } = iterationState;
+    const canInteract = !disabled && 'function' == typeof onActiveIndexChange;
+    const canGoPrevious = canInteract && activeIndex > 0;
+    const canGoNext = canInteract && activeIndex < total - 1;
+    const label = ariaLabel ?? 'Loop iteration';
+    const visibleIndex = activeIndex + 1;
+    const handlePrevious = useCallback((event)=>{
+        event.stopPropagation();
+        if (!canGoPrevious) return;
+        onActiveIndexChange?.(activeIndex - 1);
+    }, [
+        activeIndex,
+        canGoPrevious,
+        onActiveIndexChange
+    ]);
+    const handleNext = useCallback((event)=>{
+        event.stopPropagation();
+        if (!canGoNext) return;
+        onActiveIndexChange?.(activeIndex + 1);
+    }, [
+        activeIndex,
+        canGoNext,
+        onActiveIndexChange
+    ]);
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: cn('nodrag nopan pointer-events-auto m-0 flex h-6 min-w-0 shrink-0 items-center gap-1 rounded-full px-1 py-0', 'border border-border bg-surface text-foreground shadow-sm'),
+        "data-testid": "loop-iteration-navigator",
+        onPointerDown: stopCanvasControlEvent,
+        onMouseDown: stopCanvasControlEvent,
+        onDoubleClick: stopCanvasControlEvent,
+        children: [
+            /*#__PURE__*/ jsxs("legend", {
+                className: "sr-only",
+                children: [
+                    label,
+                    ": ",
+                    visibleIndex,
+                    " of ",
+                    total
+                ]
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: cn('nodrag nopan inline-flex h-4 w-4 items-center justify-center rounded-full', 'text-foreground transition-opacity', canGoPrevious ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40'),
+                disabled: !canGoPrevious,
+                "aria-label": "Previous loop iteration",
+                onClick: handlePrevious,
+                onPointerDown: stopCanvasControlEvent,
+                onMouseDown: stopCanvasControlEvent,
+                "data-testid": "loop-iteration-previous",
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "chevron-left",
+                    size: 12
+                })
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "min-w-8 select-none px-1 text-center text-[11px] font-semibold leading-4",
+                "data-testid": "loop-iteration-label",
+                children: [
+                    visibleIndex,
+                    " / ",
+                    total
+                ]
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: cn('nodrag nopan inline-flex h-4 w-4 items-center justify-center rounded-full', 'text-foreground transition-opacity', canGoNext ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40'),
+                disabled: !canGoNext,
+                "aria-label": "Next loop iteration",
+                onClick: handleNext,
+                onPointerDown: stopCanvasControlEvent,
+                onMouseDown: stopCanvasControlEvent,
+                "data-testid": "loop-iteration-next",
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "chevron-right",
+                    size: 12
+                })
+            })
+        ]
+    });
+}
+export { IterationNavigator };

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

@@ -31,6 +31,7 @@ const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const shallow_namespaceObject = require("zustand/shallow");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
 const adornment_resolver_cjs_namespaceObject = require("../../utils/adornment-resolver.cjs");
@@ -47,10 +48,13 @@ const BaseNodeContainer_cjs_namespaceObject = require("../BaseNode/BaseNodeConta
 const BaseNodeMissingManifest_cjs_namespaceObject = require("../BaseNode/BaseNodeMissingManifest.cjs");
 const external_ButtonHandle_index_cjs_namespaceObject = require("../ButtonHandle/index.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const external_IterationNavigator_cjs_namespaceObject = require("./IterationNavigator.cjs");
 const external_LoopNode_helpers_cjs_namespaceObject = require("./LoopNode.helpers.cjs");
 const DEFAULT_LOOP_ICON = 'repeat';
 const DEFAULT_LOOP_TITLE = 'Loop';
 const EMPTY_DATA = {};
+const LOOP_HEADER_ADORNMENT_GAP = 8;
+const LOOP_HEADER_ADORNMENT_PADDING = external_constants_cjs_namespaceObject.NODE_BADGE_INSET_SQUARE + external_constants_cjs_namespaceObject.NODE_BADGE_SIZE + LOOP_HEADER_ADORNMENT_GAP;
 const RESIZE_CONTROLS = [
     {
         position: 'top-left',
@@ -153,7 +157,7 @@ function resolveLoopHandleConfigurations(manifestHandleConfigurations, data) {
     return manifestHandleConfigurations ?? [];
 }
 function LoopNodeComponent(props) {
-    const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp } = props;
+    const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp, iterationState: iterationStateProp } = props;
     const nodeTypeRegistry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const resolvedData = data ?? EMPTY_DATA;
@@ -222,12 +226,16 @@ function LoopNodeComponent(props) {
         toolbarConfigProp
     ]);
     const adornments = (0, external_react_namespaceObject.useMemo)(()=>({
-            ...(0, adornment_resolver_cjs_namespaceObject.resolveAdornments)(statusContext),
+            ...(0, adornment_resolver_cjs_namespaceObject.resolveAdornments)(statusContext, {
+                hideExecutionStatusAdornment: true
+            }),
             ...adornmentsProp ?? {}
         }), [
         adornmentsProp,
         statusContext
     ]);
+    const hasTopLeftAdornment = !!adornments.topLeft;
+    const hasTopRightAdornment = !!adornments.topRight;
     const resolvedHandleGroups = (0, external_react_namespaceObject.useMemo)(()=>{
         const handleConfigurations = resolveLoopHandleConfigurations(manifest?.handleConfiguration, resolvedData);
         return (0, manifest_resolver_cjs_namespaceObject.resolveHandles)(handleConfigurations, {
@@ -265,6 +273,9 @@ function LoopNodeComponent(props) {
     const showHandleAddButtons = isDesignMode && !multipleNodesSelected && !isConnecting && !dragging;
     const showEmptyStateButton = isDesignMode && !hasChildNodes && !!onAddFirstChild;
     const interactionState = resolveInteractionState(dragging, selected, isHovered);
+    const activeStatus = suggestionType ?? validationState?.validationStatus ?? executionStatus;
+    const statusBorder = (0, BaseNodeContainer_cjs_namespaceObject.getStatusBorder)(activeStatus);
+    const hasStatusBorder = statusBorder.length > 0;
     if (!manifest) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "relative",
         style: nodeSizeStyle,
@@ -285,7 +296,7 @@ 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 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)'),
+        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', statusBorder, isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && '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,
             ...display.background ? {
@@ -311,7 +322,10 @@ function LoopNodeComponent(props) {
                 title: displayTitle,
                 icon: displayIcon,
                 loading: isLoading,
-                isParallel: isParallel
+                isParallel: isParallel,
+                iterationState: iterationStateProp,
+                hasTopLeftAdornment: hasTopLeftAdornment,
+                hasTopRightAdornment: hasTopRightAdornment
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BodyFrame, {
                 isEmpty: showEmptyStateButton,
@@ -347,7 +361,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel }) {
+function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
     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", {
@@ -364,8 +378,13 @@ function Header({ title, icon, loading, isParallel }) {
             size: 16
         })
     }) : null;
+    const headerStyle = hasTopLeftAdornment || hasTopRightAdornment ? {
+        paddingLeft: hasTopLeftAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0,
+        paddingRight: hasTopRightAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0
+    } : void 0;
     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",
+        className: (0, apollo_wind_namespaceObject.cn)('flex shrink-0 cursor-grab items-center justify-between gap-2.5 rounded-t-[18px]', '-mb-2.5 bg-surface-overlay px-3.5 pb-2.5 pt-2.5 text-foreground', 'active:cursor-grabbing'),
+        style: headerStyle,
         "data-testid": "loop-node-header",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -375,18 +394,26 @@ function Header({ title, icon, loading, isParallel }) {
                     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",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex shrink-0 items-center gap-2",
                 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'
+                    iterationState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_IterationNavigator_cjs_namespaceObject.IterationNavigator, {
+                        iterationState: iterationState
+                    }) : null,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                        className: "flex h-6 shrink-0 items-center gap-1 rounded-full border border-border bg-surface px-2.5 text-[11px] font-semibold leading-4 text-foreground shadow-sm",
+                        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'
+                        ]
+                    })
                 ]
             })
         ]
@@ -408,7 +435,7 @@ function BodyFrame({ isEmpty, isLoading }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-testid": "loop-body-frame",
         "data-empty": isEmpty ? 'true' : 'false',
-        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'),
+        className: (0, apollo_wind_namespaceObject.cn)('relative m-2.5 flex flex-1 rounded-xl border-[1.5px] border-dashed border-border bg-transparent', 'shadow-[0_0_0_10px_var(--surface-overlay)]', 'pointer-events-none'),
         children: isLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
             className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
         }) : null

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":"AAsCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAmItD,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CA2O9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
+{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAsB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAsI1E,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CA0P9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

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

@@ -3,6 +3,7 @@ import { NodeResizeControl, useStore, useUpdateNodeInternals } from "../../xyflo
 import { cn } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { shallow } from "zustand/shallow";
+import { NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE } from "../../constants.js";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
@@ -19,10 +20,13 @@ 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 { IterationNavigator } from "./IterationNavigator.js";
 import { resolveContainerHandleGroups } from "./LoopNode.helpers.js";
 const DEFAULT_LOOP_ICON = 'repeat';
 const DEFAULT_LOOP_TITLE = 'Loop';
 const EMPTY_DATA = {};
+const LOOP_HEADER_ADORNMENT_GAP = 8;
+const LOOP_HEADER_ADORNMENT_PADDING = NODE_BADGE_INSET_SQUARE + NODE_BADGE_SIZE + LOOP_HEADER_ADORNMENT_GAP;
 const RESIZE_CONTROLS = [
     {
         position: 'top-left',
@@ -125,7 +129,7 @@ function resolveLoopHandleConfigurations(manifestHandleConfigurations, data) {
     return manifestHandleConfigurations ?? [];
 }
 function LoopNodeComponent(props) {
-    const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp } = props;
+    const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp, iterationState: iterationStateProp } = props;
     const nodeTypeRegistry = useOptionalNodeTypeRegistry();
     const [isHovered, setIsHovered] = useState(false);
     const resolvedData = data ?? EMPTY_DATA;
@@ -194,12 +198,16 @@ function LoopNodeComponent(props) {
         toolbarConfigProp
     ]);
     const adornments = useMemo(()=>({
-            ...resolveAdornments(statusContext),
+            ...resolveAdornments(statusContext, {
+                hideExecutionStatusAdornment: true
+            }),
             ...adornmentsProp ?? {}
         }), [
         adornmentsProp,
         statusContext
     ]);
+    const hasTopLeftAdornment = !!adornments.topLeft;
+    const hasTopRightAdornment = !!adornments.topRight;
     const resolvedHandleGroups = useMemo(()=>{
         const handleConfigurations = resolveLoopHandleConfigurations(manifest?.handleConfiguration, resolvedData);
         return resolveHandles(handleConfigurations, {
@@ -237,6 +245,9 @@ function LoopNodeComponent(props) {
     const showHandleAddButtons = isDesignMode && !multipleNodesSelected && !isConnecting && !dragging;
     const showEmptyStateButton = isDesignMode && !hasChildNodes && !!onAddFirstChild;
     const interactionState = resolveInteractionState(dragging, selected, isHovered);
+    const activeStatus = suggestionType ?? validationState?.validationStatus ?? executionStatus;
+    const statusBorder = getStatusBorder(activeStatus);
+    const hasStatusBorder = statusBorder.length > 0;
     if (!manifest) return /*#__PURE__*/ jsx("div", {
         className: "relative",
         style: nodeSizeStyle,
@@ -257,7 +268,7 @@ function LoopNodeComponent(props) {
         "data-suggestion-type": suggestionType,
         "data-validation-status": validationState?.validationStatus,
         "aria-busy": resolvedData.loading || void 0,
-        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)'),
+        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', statusBorder, isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && '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,
             ...display.background ? {
@@ -283,7 +294,10 @@ function LoopNodeComponent(props) {
                 title: displayTitle,
                 icon: displayIcon,
                 loading: isLoading,
-                isParallel: isParallel
+                isParallel: isParallel,
+                iterationState: iterationStateProp,
+                hasTopLeftAdornment: hasTopLeftAdornment,
+                hasTopRightAdornment: hasTopRightAdornment
             }),
             /*#__PURE__*/ jsx(BodyFrame, {
                 isEmpty: showEmptyStateButton,
@@ -319,7 +333,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel }) {
+function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
     const titleContent = loading ? /*#__PURE__*/ jsx("div", {
         className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
     }) : /*#__PURE__*/ jsx("span", {
@@ -336,8 +350,13 @@ function Header({ title, icon, loading, isParallel }) {
             size: 16
         })
     }) : null;
+    const headerStyle = hasTopLeftAdornment || hasTopRightAdornment ? {
+        paddingLeft: hasTopLeftAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0,
+        paddingRight: hasTopRightAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0
+    } : void 0;
     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",
+        className: cn('flex shrink-0 cursor-grab items-center justify-between gap-2.5 rounded-t-[18px]', '-mb-2.5 bg-surface-overlay px-3.5 pb-2.5 pt-2.5 text-foreground', 'active:cursor-grabbing'),
+        style: headerStyle,
         "data-testid": "loop-node-header",
         children: [
             /*#__PURE__*/ jsxs("div", {
@@ -347,18 +366,26 @@ function Header({ title, icon, loading, isParallel }) {
                     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",
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex shrink-0 items-center gap-2",
                 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'
+                    iterationState ? /*#__PURE__*/ jsx(IterationNavigator, {
+                        iterationState: iterationState
+                    }) : null,
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "flex h-6 shrink-0 items-center gap-1 rounded-full border border-border bg-surface px-2.5 text-[11px] font-semibold leading-4 text-foreground shadow-sm",
+                        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'
+                        ]
+                    })
                 ]
             })
         ]
@@ -380,7 +407,7 @@ function BodyFrame({ isEmpty, isLoading }) {
     return /*#__PURE__*/ jsx("div", {
         "data-testid": "loop-body-frame",
         "data-empty": isEmpty ? 'true' : 'false',
-        className: cn('relative m-2.5 flex flex-1 rounded-xl border-[1.5px] border-dashed border-border-subtle bg-transparent', 'pointer-events-none'),
+        className: cn('relative m-2.5 flex flex-1 rounded-xl border-[1.5px] border-dashed border-border bg-transparent', 'shadow-[0_0_0_10px_var(--surface-overlay)]', 'pointer-events-none'),
         children: isLoading ? /*#__PURE__*/ jsx("div", {
             className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
         }) : null

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

@@ -9,11 +9,19 @@ export interface LoopNodeResizeSize {
     width: number;
     height: number;
 }
+export interface LoopIterationState {
+    activeIndex: number;
+    total: number;
+    onActiveIndexChange?: (nextIndex: number) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
 export interface LoopNodeConfig {
     toolbarConfig?: NodeToolbarConfig | null;
     adornments?: NodeAdornments;
     executionStatusOverride?: ElementStatusValues;
     suggestionType?: SuggestionType;
+    iterationState?: LoopIterationState;
 }
 export interface LoopNodeProps extends NodeProps<Node<LoopNodeData>>, LoopNodeConfig {
     onAddFirstChild?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"LoopNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC;AAExC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc;IAClF,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C"}
+{"version":3,"file":"LoopNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC;AAExC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc;IAClF,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C"}

package/dist/canvas/components/StageNode/AdhocTask.cjs

@@ -48,6 +48,7 @@ const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMen
         "data-testid": `stage-task-${task.id}`,
         selected: isSelected,
         status: taskExecution?.status,
+        isPlaceholder: task.isPlaceholder,
         onClick: handleClick,
         ...getContextMenuItems && !isTaskLoading && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/AdhocTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdhocTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/AdhocTask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI3E,UAAU,kBAAkB;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA+CD,eAAO,MAAM,aAAa,0IArCvB,kBAAkB,6CAqCoC,CAAC"}
+{"version":3,"file":"AdhocTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/AdhocTask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI3E,UAAU,kBAAkB;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAgDD,eAAO,MAAM,aAAa,0IAtCvB,kBAAkB,6CAsCoC,CAAC"}

package/dist/canvas/components/StageNode/AdhocTask.js

@@ -20,6 +20,7 @@ const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMen
         "data-testid": `stage-task-${task.id}`,
         selected: isSelected,
         status: taskExecution?.status,
+        isPlaceholder: task.isPlaceholder,
         onClick: handleClick,
         ...getContextMenuItems && !isTaskLoading && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/DraggableTask.cjs

@@ -100,6 +100,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         status: taskExecution?.status,
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
+        isPlaceholder: task.isPlaceholder,
         onClick: handleClick,
         ...getContextMenuItems && !isTaskLoading && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/DraggableTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AA2HhE,eAAO,MAAM,aAAa,iMApGvB,kBAAkB,6CAoGoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AA4HhE,eAAO,MAAM,aAAa,iMArGvB,kBAAkB,6CAqGoC,CAAC"}

package/dist/canvas/components/StageNode/DraggableTask.js

@@ -72,6 +72,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
         status: taskExecution?.status,
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
+        isPlaceholder: task.isPlaceholder,
         onClick: handleClick,
         ...getContextMenuItems && !isTaskLoading && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/EventDrivenTask.cjs

@@ -48,6 +48,7 @@ const EventDrivenTaskItemComponent = ({ task, taskExecution, isSelected, getCont
         "data-testid": `stage-task-${task.id}`,
         selected: isSelected,
         status: taskExecution?.status,
+        isPlaceholder: task.isPlaceholder,
         onClick: handleClick,
         ...getContextMenuItems && !isTaskLoading && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/EventDrivenTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventDrivenTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/EventDrivenTask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI3E,UAAU,wBAAwB;IAChC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA+CD,eAAO,MAAM,mBAAmB,8HAtC7B,wBAAwB,6CAsC0C,CAAC"}
+{"version":3,"file":"EventDrivenTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/EventDrivenTask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI3E,UAAU,wBAAwB;IAChC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAgDD,eAAO,MAAM,mBAAmB,8HAvC7B,wBAAwB,6CAuC0C,CAAC"}

package/dist/canvas/components/StageNode/EventDrivenTask.js

@@ -20,6 +20,7 @@ const EventDrivenTaskItemComponent = ({ task, taskExecution, isSelected, getCont
         "data-testid": `stage-task-${task.id}`,
         selected: isSelected,
         status: taskExecution?.status,
+        isPlaceholder: task.isPlaceholder,
         onClick: handleClick,
         ...getContextMenuItems && !isTaskLoading && {
             onContextMenu: handleContextMenu

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -36,8 +36,10 @@ const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.style
 const external_StageNodeAllTaskGroups_cjs_namespaceObject = require("./StageNodeAllTaskGroups.cjs");
 const external_StageNodeHandles_cjs_namespaceObject = require("./StageNodeHandles.cjs");
 const external_StageNodeHeader_cjs_namespaceObject = require("./StageNodeHeader.cjs");
+const external_useStageNodeLabels_cjs_namespaceObject = require("./useStageNodeLabels.cjs");
 const StageNodeInner = (props)=>{
-    const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox } = props;
+    const labels = (0, external_useStageNodeLabels_cjs_namespaceObject.useStageNodeLabels)();
+    const { dragging, selected, id, width, execution, stageDetails, taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const allTasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
         stageDetails?.tasks
@@ -167,7 +169,7 @@ const StageNodeInner = (props)=>{
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
-                    title: addTaskLabel,
+                    title: labels.addTask,
                     initialItems: taskOptions,
                     onClose: ()=>setIsAddingTask(false),
                     onItemSelect: handleAddTaskToolboxItemSelected,
@@ -179,7 +181,7 @@ const StageNodeInner = (props)=>{
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
-                    title: replaceTaskLabel,
+                    title: labels.replaceTask,
                     initialItems: taskOptions,
                     onClose: ()=>setIsReplacingTask(false),
                     onItemSelect: handleReplaceTaskToolboxItemSelected,

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAgM5E,eAAO,MAAM,SAAS,8CA3LS,cAAc,6CA2LA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAgM5E,eAAO,MAAM,SAAS,8CA1LS,cAAc,6CA0LA,CAAC"}

package/dist/canvas/components/StageNode/StageNode.js

@@ -8,8 +8,10 @@ import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer } from "./StageN
 import { StageNodeAllTaskGroups } from "./StageNodeAllTaskGroups.js";
 import { StageNodeHandles } from "./StageNodeHandles.js";
 import { StageNodeHeader } from "./StageNodeHeader.js";
+import { useStageNodeLabels } from "./useStageNodeLabels.js";
 const StageNodeInner = (props)=>{
-    const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox } = props;
+    const labels = useStageNodeLabels();
+    const { dragging, selected, id, width, execution, stageDetails, taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onReplaceTaskFromToolbox } = props;
     const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
     const allTasks = useMemo(()=>stageDetails?.tasks || [], [
         stageDetails?.tasks
@@ -139,7 +141,7 @@ const StageNodeInner = (props)=>{
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ jsx(Toolbox, {
-                    title: addTaskLabel,
+                    title: labels.addTask,
                     initialItems: taskOptions,
                     onClose: ()=>setIsAddingTask(false),
                     onItemSelect: handleAddTaskToolboxItemSelected,
@@ -151,7 +153,7 @@ const StageNodeInner = (props)=>{
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ jsx(Toolbox, {
-                    title: replaceTaskLabel,
+                    title: labels.replaceTask,
                     initialItems: taskOptions,
                     onClose: ()=>setIsReplacingTask(false),
                     onItemSelect: handleReplaceTaskToolboxItemSelected,