@uipath/apollo-react 4.34.0 → 4.36.0

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

@@ -51,6 +51,7 @@ const external_ButtonHandle_index_cjs_namespaceObject = require("../ButtonHandle
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
 const external_IterationNavigator_cjs_namespaceObject = require("./IterationNavigator.cjs");
+const external_LoopNodeExecutionCount_cjs_namespaceObject = require("./LoopNodeExecutionCount.cjs");
 const external_LoopNode_helpers_cjs_namespaceObject = require("./LoopNode.helpers.cjs");
 const DEFAULT_LOOP_ICON = 'repeat';
 const EMPTY_DATA = {};
@@ -158,7 +159,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, iterationState: iterationStateProp } = props;
+    const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp, iterationState: iterationStateProp, iterationPillState: iterationPillStateProp } = props;
     const nodeTypeRegistry = (0, external_core_index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
@@ -348,6 +349,8 @@ function LoopNodeComponent(props) {
                 isParallel: isParallel,
                 label: label,
                 iterationState: iterationStateProp,
+                iterationPillState: iterationPillStateProp,
+                nodeWidth: containerWidth,
                 hasTopLeftAdornment: hasTopLeftAdornment,
                 hasTopRightAdornment: hasTopRightAdornment
             }),
@@ -386,7 +389,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel, label, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
+function Header({ title, icon, loading, isParallel, label, iterationState, iterationPillState, nodeWidth, 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", {
@@ -422,7 +425,10 @@ function Header({ title, icon, loading, isParallel, label, iterationState, hasTo
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "flex shrink-0 items-center gap-2",
                 children: [
-                    iterationState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_IterationNavigator_cjs_namespaceObject.IterationNavigator, {
+                    iterationPillState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_LoopNodeExecutionCount_cjs_namespaceObject.LoopNodeExecutionCount, {
+                        state: iterationPillState,
+                        size: nodeWidth >= 400 ? 'full' : nodeWidth >= 260 ? 'compact' : 'minimal'
+                    }) : iterationState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_IterationNavigator_cjs_namespaceObject.IterationNavigator, {
                         iterationState: iterationState
                     }) : null,
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {

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":"AA0CA,OAAO,KAAK,EAAsB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAqI1E,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CA6Q9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
+{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,kBAAkB,CAAC;AAqI1B,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAgR9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

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

@@ -23,6 +23,7 @@ import { ButtonHandles } from "../ButtonHandle/index.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 import { NodeToolbar } from "../Toolbar/index.js";
 import { IterationNavigator } from "./IterationNavigator.js";
+import { LoopNodeExecutionCount } from "./LoopNodeExecutionCount.js";
 import { resolveContainerHandleGroups } from "./LoopNode.helpers.js";
 const DEFAULT_LOOP_ICON = 'repeat';
 const EMPTY_DATA = {};
@@ -130,7 +131,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, iterationState: iterationStateProp } = props;
+    const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp, iterationState: iterationStateProp, iterationPillState: iterationPillStateProp } = props;
     const nodeTypeRegistry = useOptionalNodeTypeRegistry();
     const { _ } = useSafeLingui();
     const [isHovered, setIsHovered] = useState(false);
@@ -320,6 +321,8 @@ function LoopNodeComponent(props) {
                 isParallel: isParallel,
                 label: label,
                 iterationState: iterationStateProp,
+                iterationPillState: iterationPillStateProp,
+                nodeWidth: containerWidth,
                 hasTopLeftAdornment: hasTopLeftAdornment,
                 hasTopRightAdornment: hasTopRightAdornment
             }),
@@ -358,7 +361,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel, label, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
+function Header({ title, icon, loading, isParallel, label, iterationState, iterationPillState, nodeWidth, hasTopLeftAdornment, hasTopRightAdornment }) {
     const titleContent = loading ? /*#__PURE__*/ jsx("div", {
         className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
     }) : /*#__PURE__*/ jsx("span", {
@@ -394,7 +397,10 @@ function Header({ title, icon, loading, isParallel, label, iterationState, hasTo
             /*#__PURE__*/ jsxs("div", {
                 className: "flex shrink-0 items-center gap-2",
                 children: [
-                    iterationState ? /*#__PURE__*/ jsx(IterationNavigator, {
+                    iterationPillState ? /*#__PURE__*/ jsx(LoopNodeExecutionCount, {
+                        state: iterationPillState,
+                        size: nodeWidth >= 400 ? 'full' : nodeWidth >= 260 ? 'compact' : 'minimal'
+                    }) : iterationState ? /*#__PURE__*/ jsx(IterationNavigator, {
                         iterationState: iterationState
                     }) : null,
                     /*#__PURE__*/ jsxs("span", {

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

@@ -16,12 +16,22 @@ export interface LoopIterationState {
     disabled?: boolean;
     ariaLabel?: string;
 }
+export interface LoopNodeExecutionCountState {
+    activeIndex: number;
+    total: number;
+    onActiveIndexChange?: (nextIndex: number) => void;
+    disabled?: boolean;
+    isAll: boolean;
+    onAllChange: (isAll: boolean) => void;
+    iterationStatuses?: Map<number, ElementStatusValues>;
+}
 export interface LoopNodeConfig {
     toolbarConfig?: NodeToolbarConfig | null;
     adornments?: NodeAdornments;
     executionStatusOverride?: ElementStatusValues;
     suggestionType?: SuggestionType;
     iterationState?: LoopIterationState;
+    iterationPillState?: LoopNodeExecutionCountState;
 }
 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,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"}
+{"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,2BAA2B;IAC1C,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,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CACtD;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;IACpC,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;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/LoopNode/LoopNodeExecutionCount.cjs

@@ -0,0 +1,370 @@
+"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__, {
+    LoopNodeExecutionCount: ()=>LoopNodeExecutionCount,
+    getIterationStatusColor: ()=>getIterationStatusColor
+});
+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("../../../i18n/index.cjs");
+const execution_cjs_namespaceObject = require("../../types/execution.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+const NodeUtils_cjs_namespaceObject = require("../../utils/NodeUtils.cjs");
+function stopEvent(e) {
+    e.stopPropagation();
+}
+function getIterationStatusColor(status) {
+    switch(status){
+        case execution_cjs_namespaceObject.ElementStatusValues.Completed:
+            return '#22c55e';
+        case execution_cjs_namespaceObject.ElementStatusValues.Failed:
+            return '#ef4444';
+        case execution_cjs_namespaceObject.ElementStatusValues.InProgress:
+            return '#f59e0b';
+        case execution_cjs_namespaceObject.ElementStatusValues.Paused:
+            return '#a855f7';
+        case execution_cjs_namespaceObject.ElementStatusValues.Cancelled:
+            return '#94a3b8';
+        default:
+            return 'currentColor';
+    }
+}
+function LoopNodeExecutionCount({ state, size = 'full' }) {
+    const { activeIndex, total, onActiveIndexChange, disabled, isAll, onAllChange, iterationStatuses } = state;
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
+    const [inputValue, setInputValue] = (0, external_react_namespaceObject.useState)('');
+    const inputRef = (0, external_react_namespaceObject.useRef)(null);
+    const safeTotal = Number.isFinite(total) && total > 0 ? total : 1;
+    const safeActiveIndex = (0, NodeUtils_cjs_namespaceObject.clamp)(Number.isFinite(activeIndex) && activeIndex >= 0 ? activeIndex : 0, 0, safeTotal - 1);
+    const canInteract = !disabled && 'function' == typeof onActiveIndexChange;
+    const visibleIndex = safeActiveIndex + 1;
+    const currentStatus = iterationStatuses?.get(safeActiveIndex);
+    const firstFailedIndex = iterationStatuses ? [
+        ...iterationStatuses.entries()
+    ].find(([, s])=>s === execution_cjs_namespaceObject.ElementStatusValues.Failed)?.[0] : void 0;
+    const completedCount = iterationStatuses ? [
+        ...iterationStatuses.values()
+    ].filter((s)=>s === execution_cjs_namespaceObject.ElementStatusValues.Completed).length : void 0;
+    const failedCount = iterationStatuses ? [
+        ...iterationStatuses.values()
+    ].filter((s)=>s === execution_cjs_namespaceObject.ElementStatusValues.Failed).length : 0;
+    const handlePrev = (e)=>{
+        e.stopPropagation();
+        if (canInteract && !isAll && safeActiveIndex > 0) onActiveIndexChange?.(safeActiveIndex - 1);
+    };
+    const handleNext = (e)=>{
+        e.stopPropagation();
+        if (canInteract && !isAll && safeActiveIndex < safeTotal - 1) onActiveIndexChange?.(safeActiveIndex + 1);
+    };
+    const toggleAll = (e)=>{
+        e.stopPropagation();
+        if (disabled) return;
+        onAllChange(!isAll);
+    };
+    const handleJumpToFailed = (e)=>{
+        e.stopPropagation();
+        if (void 0 !== firstFailedIndex) onActiveIndexChange?.(firstFailedIndex);
+    };
+    const startEdit = (e)=>{
+        e.stopPropagation();
+        if (!canInteract || isAll || isEditing) return;
+        setInputValue(String(visibleIndex));
+        setIsEditing(true);
+        requestAnimationFrame(()=>inputRef.current?.select());
+    };
+    const commitEdit = ()=>{
+        const parsed = parseInt(inputValue, 10);
+        if (!Number.isNaN(parsed)) onActiveIndexChange?.((0, NodeUtils_cjs_namespaceObject.clamp)(parsed, 1, safeTotal) - 1);
+        setIsEditing(false);
+    };
+    const handleInputKeyDown = (e)=>{
+        e.stopPropagation();
+        if ('Enter' === e.key) commitEdit();
+        if ('Escape' === e.key) setIsEditing(false);
+    };
+    const canGoPrev = canInteract && !isAll && safeActiveIndex > 0;
+    const canGoNext = canInteract && !isAll && safeActiveIndex < safeTotal - 1;
+    if ('minimal' === size) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "nodrag nopan pointer-events-auto flex items-center",
+        onPointerDown: stopEvent,
+        onMouseDown: stopEvent,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "flex h-6 items-center gap-0.5 rounded-full border border-border bg-surface px-2 text-[11px] font-semibold leading-none shadow-sm",
+            children: isAll ? void 0 !== completedCount ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                        style: {
+                            color: getIterationStatusColor(execution_cjs_namespaceObject.ElementStatusValues.Completed)
+                        },
+                        children: [
+                            "✓",
+                            completedCount
+                        ]
+                    }),
+                    failedCount > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                        style: {
+                            color: getIterationStatusColor(execution_cjs_namespaceObject.ElementStatusValues.Failed)
+                        },
+                        children: [
+                            ' ',
+                            "✗",
+                            failedCount
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "opacity-60",
+                        children: "Σ"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "ml-0.5",
+                        children: safeTotal
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    currentStatus && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "h-1.5 w-1.5 shrink-0 rounded-full",
+                        style: {
+                            backgroundColor: getIterationStatusColor(currentStatus)
+                        }
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: visibleIndex
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "px-0.5 opacity-60",
+                        children: "/"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: safeTotal
+                    })
+                ]
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "nodrag nopan pointer-events-auto flex items-center gap-1.5",
+        onPointerDown: stopEvent,
+        onMouseDown: stopEvent,
+        onDoubleClick: stopEvent,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "nodrag nopan flex h-6 items-stretch overflow-hidden rounded-full border border-border bg-surface shadow-sm",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        onClick: toggleAll,
+                        onPointerDown: stopEvent,
+                        onMouseDown: stopEvent,
+                        disabled: disabled,
+                        "aria-pressed": isAll,
+                        "aria-label": _({
+                            id: 'loop-node.execution-count.show-aggregate',
+                            message: 'Show aggregate across all iterations'
+                        }),
+                        className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan select-none px-2.5 text-[11px] font-semibold leading-none transition-colors', isAll ? 'bg-surface-overlay text-foreground' : 'text-foreground hover:bg-surface-hover', disabled && 'cursor-not-allowed opacity-50'),
+                        children: "All"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "w-px shrink-0 bg-border"
+                    }),
+                    isAll ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        onClick: toggleAll,
+                        onPointerDown: stopEvent,
+                        onMouseDown: stopEvent,
+                        disabled: disabled,
+                        className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan flex items-center gap-1.5 px-2.5 text-[11px] font-semibold leading-none transition-colors hover:bg-surface-overlay', disabled && 'cursor-not-allowed opacity-50'),
+                        "aria-label": _({
+                            id: 'loop-node.execution-count.return-to-individual',
+                            message: 'Return to individual iteration view'
+                        }),
+                        title: _({
+                            id: 'loop-node.execution-count.click-to-return',
+                            message: 'Click to return to individual iteration view'
+                        }),
+                        children: void 0 !== completedCount ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                    style: {
+                                        color: getIterationStatusColor(execution_cjs_namespaceObject.ElementStatusValues.Completed)
+                                    },
+                                    children: [
+                                        "✓ ",
+                                        completedCount
+                                    ]
+                                }),
+                                failedCount > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                    style: {
+                                        color: getIterationStatusColor(execution_cjs_namespaceObject.ElementStatusValues.Failed)
+                                    },
+                                    children: [
+                                        "✗ ",
+                                        failedCount
+                                    ]
+                                })
+                            ]
+                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    "aria-hidden": true,
+                                    className: "opacity-60",
+                                    children: "Σ"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    children: safeTotal
+                                })
+                            ]
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-stretch",
+                        children: [
+                            'full' === size && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan flex w-5 items-center justify-center text-foreground transition-opacity', canGoPrev ? 'cursor-pointer hover:bg-surface-overlay' : 'cursor-not-allowed opacity-40'),
+                                disabled: !canGoPrev,
+                                "aria-label": _({
+                                    id: 'loop-node.execution-count.previous-iteration',
+                                    message: 'Previous iteration'
+                                }),
+                                onClick: handlePrev,
+                                onPointerDown: stopEvent,
+                                onMouseDown: stopEvent,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "chevron-left",
+                                    size: 12
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: (0, apollo_wind_namespaceObject.cn)('flex min-w-10 select-none items-center justify-center gap-0.5 text-[11px] font-semibold leading-none', 'full' === size ? 'px-1' : 'px-2.5', canInteract && !isEditing && 'cursor-pointer hover:text-foreground-accent'),
+                                onClick: startEdit,
+                                title: canInteract ? _({
+                                    id: 'loop-node.execution-count.click-to-jump',
+                                    message: 'Click to jump to a specific iteration'
+                                }) : void 0,
+                                children: isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                                            ref: inputRef,
+                                            type: "number",
+                                            min: 1,
+                                            max: safeTotal,
+                                            value: inputValue,
+                                            onChange: (e)=>setInputValue(e.target.value),
+                                            onBlur: commitEdit,
+                                            onKeyDown: handleInputKeyDown,
+                                            onPointerDown: stopEvent,
+                                            className: "w-7 appearance-none bg-transparent text-center text-[11px] font-semibold leading-none outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none border-b border-foreground-accent"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "px-0.5 opacity-60",
+                                            children: "/"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            children: safeTotal
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                    children: [
+                                        currentStatus && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "h-1.5 w-1.5 shrink-0 rounded-full",
+                                            style: {
+                                                backgroundColor: getIterationStatusColor(currentStatus)
+                                            }
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            children: visibleIndex
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "px-0.5 opacity-60",
+                                            children: "/"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            children: safeTotal
+                                        })
+                                    ]
+                                })
+                            }),
+                            'full' === size && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan flex w-5 items-center justify-center text-foreground transition-opacity', canGoNext ? 'cursor-pointer hover:bg-surface-overlay' : 'cursor-not-allowed opacity-40'),
+                                disabled: !canGoNext,
+                                "aria-label": _({
+                                    id: 'loop-node.execution-count.next-iteration',
+                                    message: 'Next iteration'
+                                }),
+                                onClick: handleNext,
+                                onPointerDown: stopEvent,
+                                onMouseDown: stopEvent,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "chevron-right",
+                                    size: 12
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            void 0 !== firstFailedIndex && !isAll && canInteract && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                className: "nodrag nopan inline-flex h-6 w-6 items-center justify-center rounded-full border border-border bg-surface shadow-sm transition-colors hover:border-red-400",
+                onClick: handleJumpToFailed,
+                onPointerDown: stopEvent,
+                onMouseDown: stopEvent,
+                "aria-label": _({
+                    id: 'loop-node.execution-count.jump-to-failed',
+                    message: 'Jump to first failed iteration'
+                }),
+                title: _({
+                    id: 'loop-node.execution-count.jump-to-iteration',
+                    message: 'Jump to iteration {iterationNumber} (failed)',
+                    values: {
+                        iterationNumber: firstFailedIndex + 1
+                    }
+                }),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "crosshair",
+                    size: 12,
+                    color: getIterationStatusColor(execution_cjs_namespaceObject.ElementStatusValues.Failed)
+                })
+            })
+        ]
+    });
+}
+exports.LoopNodeExecutionCount = __webpack_exports__.LoopNodeExecutionCount;
+exports.getIterationStatusColor = __webpack_exports__.getIterationStatusColor;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "LoopNodeExecutionCount",
+    "getIterationStatusColor"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,8 @@
+import { ElementStatusValues } from '../../types/execution';
+import type { LoopNodeExecutionCountState } from './LoopNode.types';
+export declare function getIterationStatusColor(status: ElementStatusValues | undefined): string;
+export declare function LoopNodeExecutionCount({ state, size, }: {
+    state: LoopNodeExecutionCountState;
+    size?: 'full' | 'compact' | 'minimal';
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoopNodeExecutionCount.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoopNodeExecutionCount.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodeExecutionCount.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AAMpE,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAevF;AAED,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,IAAa,GACd,EAAE;IACD,KAAK,EAAE,2BAA2B,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACvC,2CA0UA"}