@uipath/apollo-react 4.24.1 → 4.24.2-pr672.9dd3fa2

package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs

@@ -192,7 +192,7 @@ const ButtonHandleBase = ({ id, nodeId, type, position, connectionPosition = pos
 const ButtonHandle = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ButtonHandleBase);
 function InwardHandleContent({ handleType, isVertical, selected, hovered, showNotch, label, labelIcon, labelBackgroundColor, layout }) {
     const labelElement = label ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, CssUtil_cjs_namespaceObject.cx)('pointer-events-none flex items-center gap-1.5 whitespace-nowrap rounded-full border border-border-subtle bg-transparent px-2 py-0.5', 'text-xs font-medium leading-4 text-foreground-muted'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('pointer-events-none flex items-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-surface px-2 py-0.5', 'text-xs font-medium leading-4 text-foreground-muted'),
         style: labelBackgroundColor ? {
             backgroundColor: labelBackgroundColor
         } : void 0,

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

@@ -163,7 +163,7 @@ const ButtonHandleBase = ({ id, nodeId, type, position, connectionPosition = pos
 const ButtonHandle = /*#__PURE__*/ memo(ButtonHandleBase);
 function InwardHandleContent({ handleType, isVertical, selected, hovered, showNotch, label, labelIcon, labelBackgroundColor, layout }) {
     const labelElement = label ? /*#__PURE__*/ jsxs("div", {
-        className: cx('pointer-events-none flex items-center gap-1.5 whitespace-nowrap rounded-full border border-border-subtle bg-transparent px-2 py-0.5', 'text-xs font-medium leading-4 text-foreground-muted'),
+        className: cx('pointer-events-none flex items-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-surface px-2 py-0.5', 'text-xs font-medium leading-4 text-foreground-muted'),
         style: labelBackgroundColor ? {
             backgroundColor: labelBackgroundColor
         } : void 0,

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

@@ -0,0 +1,143 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    IterationNavigator: ()=>IterationNavigator
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../utils/index.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+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: (0, index_cjs_namespaceObject.clamp)(rawActiveIndex, 0, total - 1)
+    };
+}
+function stopCanvasControlEvent(event) {
+    event.stopPropagation();
+}
+function IterationNavigator({ iterationState }) {
+    const resolvedState = resolveState(iterationState);
+    if (!resolvedState) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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 = (0, external_react_namespaceObject.useCallback)((event)=>{
+        event.stopPropagation();
+        if (!canGoPrevious) return;
+        onActiveIndexChange?.(activeIndex - 1);
+    }, [
+        activeIndex,
+        canGoPrevious,
+        onActiveIndexChange
+    ]);
+    const handleNext = (0, external_react_namespaceObject.useCallback)((event)=>{
+        event.stopPropagation();
+        if (!canGoNext) return;
+        onActiveIndexChange?.(activeIndex + 1);
+    }, [
+        activeIndex,
+        canGoNext,
+        onActiveIndexChange
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
+        className: (0, apollo_wind_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)("legend", {
+                className: "sr-only",
+                children: [
+                    label,
+                    ": ",
+                    visibleIndex,
+                    " of ",
+                    total
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                className: (0, apollo_wind_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "chevron-left",
+                    size: 12
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                className: (0, apollo_wind_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "chevron-right",
+                    size: 12
+                })
+            })
+        ]
+    });
+}
+exports.IterationNavigator = __webpack_exports__.IterationNavigator;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "IterationNavigator"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,7 @@
+import type { LoopIterationState } from './LoopNode.types';
+interface IterationNavigatorProps {
+    iterationState: LoopIterationState;
+}
+export declare function IterationNavigator({ iterationState }: IterationNavigatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=IterationNavigator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IterationNavigator.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/IterationNavigator.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,uBAAuB;IAC/B,cAAc,EAAE,kBAAkB,CAAC;CACpC;AA4BD,wBAAgB,kBAAkB,CAAC,EAAE,cAAc,EAAE,EAAE,uBAAuB,kDAQ7E"}

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

@@ -47,6 +47,7 @@ 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';
@@ -153,7 +154,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;
@@ -285,7 +286,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', (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,
             ...display.background ? {
@@ -311,7 +312,8 @@ function LoopNodeComponent(props) {
                 title: displayTitle,
                 icon: displayIcon,
                 loading: isLoading,
-                isParallel: isParallel
+                isParallel: isParallel,
+                iterationState: iterationStateProp
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BodyFrame, {
                 isEmpty: showEmptyStateButton,
@@ -347,7 +349,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 }) {
     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", {
@@ -365,7 +367,7 @@ function Header({ title, icon, loading, isParallel }) {
         })
     }) : null;
     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'),
         "data-testid": "loop-node-header",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -375,18 +377,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 +418,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":"AAuCA,OAAO,KAAK,EAAsB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAmI1E,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAkP9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

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

@@ -19,6 +19,7 @@ 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';
@@ -125,7 +126,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;
@@ -257,7 +258,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', 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,
             ...display.background ? {
@@ -283,7 +284,8 @@ function LoopNodeComponent(props) {
                 title: displayTitle,
                 icon: displayIcon,
                 loading: isLoading,
-                isParallel: isParallel
+                isParallel: isParallel,
+                iterationState: iterationStateProp
             }),
             /*#__PURE__*/ jsx(BodyFrame, {
                 isEmpty: showEmptyStateButton,
@@ -319,7 +321,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel }) {
+function Header({ title, icon, loading, isParallel, iterationState }) {
     const titleContent = loading ? /*#__PURE__*/ jsx("div", {
         className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
     }) : /*#__PURE__*/ jsx("span", {
@@ -337,7 +339,7 @@ function Header({ title, icon, loading, isParallel }) {
         })
     }) : null;
     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'),
         "data-testid": "loop-node-header",
         children: [
             /*#__PURE__*/ jsxs("div", {
@@ -347,18 +349,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 +390,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"}