@uipath/apollo-react 4.32.0 → 4.32.1

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

@@ -29,7 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
 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 index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const external_utils_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;
@@ -39,7 +40,7 @@ function resolveState(iterationState) {
     return {
         ...iterationState,
         total,
-        activeIndex: (0, index_cjs_namespaceObject.clamp)(rawActiveIndex, 0, total - 1)
+        activeIndex: (0, external_utils_index_cjs_namespaceObject.clamp)(rawActiveIndex, 0, total - 1)
     };
 }
 function stopCanvasControlEvent(event) {
@@ -53,12 +54,33 @@ function IterationNavigator({ iterationState }) {
     });
 }
 function NavigatorContent({ iterationState }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     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 label = ariaLabel ?? _({
+        id: 'loop-node.iteration.label',
+        message: 'Loop iteration'
+    });
     const visibleIndex = activeIndex + 1;
+    const statusLabel = _({
+        id: 'loop-node.iteration.status',
+        message: '{label}: {visibleIndex} of {total}',
+        values: {
+            label,
+            visibleIndex,
+            total
+        }
+    });
+    const previousLabel = _({
+        id: 'loop-node.iteration.previous',
+        message: 'Previous loop iteration'
+    });
+    const nextLabel = _({
+        id: 'loop-node.iteration.next',
+        message: 'Next loop iteration'
+    });
     const handlePrevious = (0, external_react_namespaceObject.useCallback)((event)=>{
         event.stopPropagation();
         if (!canGoPrevious) return;
@@ -84,21 +106,15 @@ function NavigatorContent({ iterationState }) {
         onMouseDown: stopCanvasControlEvent,
         onDoubleClick: stopCanvasControlEvent,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("legend", {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("legend", {
                 className: "sr-only",
-                children: [
-                    label,
-                    ": ",
-                    visibleIndex,
-                    " of ",
-                    total
-                ]
+                children: statusLabel
             }),
             /*#__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",
+                "aria-label": previousLabel,
                 onClick: handlePrevious,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,
@@ -121,7 +137,7 @@ function NavigatorContent({ iterationState }) {
                 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",
+                "aria-label": nextLabel,
                 onClick: handleNext,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,

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

@@ -1 +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"}
+{"version":3,"file":"IterationNavigator.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/IterationNavigator.tsx"],"names":[],"mappings":"AAMA,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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@uipath/apollo-wind";
 import { useCallback } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
 import { clamp } from "../../utils/index.js";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 function resolveState(iterationState) {
@@ -25,12 +26,33 @@ function IterationNavigator({ iterationState }) {
     });
 }
 function NavigatorContent({ iterationState }) {
+    const { _ } = useSafeLingui();
     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 label = ariaLabel ?? _({
+        id: 'loop-node.iteration.label',
+        message: 'Loop iteration'
+    });
     const visibleIndex = activeIndex + 1;
+    const statusLabel = _({
+        id: 'loop-node.iteration.status',
+        message: '{label}: {visibleIndex} of {total}',
+        values: {
+            label,
+            visibleIndex,
+            total
+        }
+    });
+    const previousLabel = _({
+        id: 'loop-node.iteration.previous',
+        message: 'Previous loop iteration'
+    });
+    const nextLabel = _({
+        id: 'loop-node.iteration.next',
+        message: 'Next loop iteration'
+    });
     const handlePrevious = useCallback((event)=>{
         event.stopPropagation();
         if (!canGoPrevious) return;
@@ -56,21 +78,15 @@ function NavigatorContent({ iterationState }) {
         onMouseDown: stopCanvasControlEvent,
         onDoubleClick: stopCanvasControlEvent,
         children: [
-            /*#__PURE__*/ jsxs("legend", {
+            /*#__PURE__*/ jsx("legend", {
                 className: "sr-only",
-                children: [
-                    label,
-                    ": ",
-                    visibleIndex,
-                    " of ",
-                    total
-                ]
+                children: statusLabel
             }),
             /*#__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",
+                "aria-label": previousLabel,
                 onClick: handlePrevious,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,
@@ -93,7 +109,7 @@ function NavigatorContent({ iterationState }) {
                 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",
+                "aria-label": nextLabel,
                 onClick: handleNext,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,

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

@@ -31,8 +31,9 @@ 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 index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
-const index_cjs_namespaceObject = require("../../core/index.cjs");
+const external_core_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");
 const container_cjs_namespaceObject = require("../../utils/container.cjs");
@@ -47,11 +48,11 @@ const BaseNodeBadgeSlot_cjs_namespaceObject = require("../BaseNode/BaseNodeBadge
 const BaseNodeContainer_cjs_namespaceObject = require("../BaseNode/BaseNodeContainer.cjs");
 const BaseNodeMissingManifest_cjs_namespaceObject = require("../BaseNode/BaseNodeMissingManifest.cjs");
 const external_ButtonHandle_index_cjs_namespaceObject = require("../ButtonHandle/index.cjs");
+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_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;
@@ -158,7 +159,8 @@ function resolveLoopHandleConfigurations(manifestHandleConfigurations, data) {
 }
 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 nodeTypeRegistry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
+    const nodeTypeRegistry = (0, external_core_index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const resolvedData = data ?? EMPTY_DATA;
@@ -203,9 +205,23 @@ function LoopNodeComponent(props) {
         id,
         resolvedData
     ]);
-    const displayTitle = display.label ?? DEFAULT_LOOP_TITLE;
+    const displayTitle = display.label ?? _({
+        id: 'loop-node.title',
+        message: 'Loop'
+    });
     const displayIcon = display.icon ?? DEFAULT_LOOP_ICON;
     const isParallel = true === resolvedData.parallel;
+    const label = isParallel ? _({
+        id: 'loop-node.mode.parallel',
+        message: 'Parallel'
+    }) : _({
+        id: 'loop-node.mode.sequential',
+        message: 'Sequential'
+    });
+    const addNodeToLoopLabel = _({
+        id: 'loop-node.add-node',
+        message: 'Add node to loop'
+    });
     const isDropTarget = true === resolvedData.isDropTarget;
     const containerWidth = width || container_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH;
     const containerHeight = height || container_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT;
@@ -330,6 +346,7 @@ function LoopNodeComponent(props) {
                 icon: displayIcon,
                 loading: isLoading,
                 isParallel: isParallel,
+                label: label,
                 iterationState: iterationStateProp,
                 hasTopLeftAdornment: hasTopLeftAdornment,
                 hasTopRightAdornment: hasTopRightAdornment
@@ -341,6 +358,7 @@ function LoopNodeComponent(props) {
             showEmptyStateButton ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: (0, apollo_wind_namespaceObject.cn)('pointer-events-none absolute left-1/2 top-1/2', '-translate-x-1/2 -translate-y-1/2'),
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyState, {
+                    label: addNodeToLoopLabel,
                     onAddFirstChild: handleEmptyClick
                 })
             }) : null,
@@ -368,7 +386,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
+function Header({ title, icon, loading, isParallel, label, 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", {
@@ -389,7 +407,6 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
         paddingLeft: hasTopLeftAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0,
         paddingRight: hasTopRightAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0
     } : void 0;
-    const executionModeIcon = isParallel ? 'columns-3' : 'rows-3';
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         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,
@@ -412,14 +429,14 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
                         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: "flex shrink-0",
+                                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: executionModeIcon,
+                                    icon: "text-align-justify",
                                     size: 12
                                 })
                             }),
-                            isParallel ? 'Parallel' : 'Sequential'
+                            label
                         ]
                     })
                 ]
@@ -427,15 +444,19 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
         ]
     });
 }
-function EmptyState({ onAddFirstChild }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-        type: "button",
-        onClick: onAddFirstChild,
-        "aria-label": "Add node to loop",
-        className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan', 'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl', 'border border-border bg-surface-overlay text-foreground', 'shadow-(--canvas-node-shadow-lifted)', 'transition-colors', 'hover:bg-surface-hover hover:border-brand'),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-            icon: "plus",
-            size: 14
+function EmptyState({ label, onAddFirstChild }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+        content: label,
+        placement: "top",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+            type: "button",
+            onClick: onAddFirstChild,
+            "aria-label": label,
+            className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan', 'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl', 'border border-border bg-surface-overlay text-foreground', 'shadow-(--canvas-node-shadow-lifted)', 'transition-colors', 'hover:bg-surface-hover hover:border-brand'),
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "plus",
+                size: 14
+            })
         })
     });
 }

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

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

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 { useSafeLingui } from "../../../i18n/index.js";
 import { NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE } from "../../constants.js";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
@@ -19,11 +20,11 @@ import { BaseBadgeSlot } from "../BaseNode/BaseNodeBadgeSlot.js";
 import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
 import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
 import { ButtonHandles } from "../ButtonHandle/index.js";
+import { CanvasTooltip } from "../CanvasTooltip.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;
@@ -131,6 +132,7 @@ function resolveLoopHandleConfigurations(manifestHandleConfigurations, data) {
 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 nodeTypeRegistry = useOptionalNodeTypeRegistry();
+    const { _ } = useSafeLingui();
     const [isHovered, setIsHovered] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
     const resolvedData = data ?? EMPTY_DATA;
@@ -175,9 +177,23 @@ function LoopNodeComponent(props) {
         id,
         resolvedData
     ]);
-    const displayTitle = display.label ?? DEFAULT_LOOP_TITLE;
+    const displayTitle = display.label ?? _({
+        id: 'loop-node.title',
+        message: 'Loop'
+    });
     const displayIcon = display.icon ?? DEFAULT_LOOP_ICON;
     const isParallel = true === resolvedData.parallel;
+    const label = isParallel ? _({
+        id: 'loop-node.mode.parallel',
+        message: 'Parallel'
+    }) : _({
+        id: 'loop-node.mode.sequential',
+        message: 'Sequential'
+    });
+    const addNodeToLoopLabel = _({
+        id: 'loop-node.add-node',
+        message: 'Add node to loop'
+    });
     const isDropTarget = true === resolvedData.isDropTarget;
     const containerWidth = width || DEFAULT_CONTAINER_WIDTH;
     const containerHeight = height || DEFAULT_CONTAINER_HEIGHT;
@@ -302,6 +318,7 @@ function LoopNodeComponent(props) {
                 icon: displayIcon,
                 loading: isLoading,
                 isParallel: isParallel,
+                label: label,
                 iterationState: iterationStateProp,
                 hasTopLeftAdornment: hasTopLeftAdornment,
                 hasTopRightAdornment: hasTopRightAdornment
@@ -313,6 +330,7 @@ function LoopNodeComponent(props) {
             showEmptyStateButton ? /*#__PURE__*/ jsx("div", {
                 className: cn('pointer-events-none absolute left-1/2 top-1/2', '-translate-x-1/2 -translate-y-1/2'),
                 children: /*#__PURE__*/ jsx(EmptyState, {
+                    label: addNodeToLoopLabel,
                     onAddFirstChild: handleEmptyClick
                 })
             }) : null,
@@ -340,7 +358,7 @@ function LoopNodeComponent(props) {
     });
 }
 const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
-function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
+function Header({ title, icon, loading, isParallel, label, iterationState, hasTopLeftAdornment, hasTopRightAdornment }) {
     const titleContent = loading ? /*#__PURE__*/ jsx("div", {
         className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
     }) : /*#__PURE__*/ jsx("span", {
@@ -361,7 +379,6 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
         paddingLeft: hasTopLeftAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0,
         paddingRight: hasTopRightAdornment ? LOOP_HEADER_ADORNMENT_PADDING : void 0
     } : void 0;
-    const executionModeIcon = isParallel ? 'columns-3' : 'rows-3';
     return /*#__PURE__*/ jsxs("div", {
         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,
@@ -384,14 +401,14 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
                         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: "flex shrink-0",
+                                className: cn('flex shrink-0', isParallel && 'rotate-90'),
                                 "aria-hidden": true,
                                 children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                    icon: executionModeIcon,
+                                    icon: "text-align-justify",
                                     size: 12
                                 })
                             }),
-                            isParallel ? 'Parallel' : 'Sequential'
+                            label
                         ]
                     })
                 ]
@@ -399,15 +416,19 @@ function Header({ title, icon, loading, isParallel, iterationState, hasTopLeftAd
         ]
     });
 }
-function EmptyState({ onAddFirstChild }) {
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        onClick: onAddFirstChild,
-        "aria-label": "Add node to loop",
-        className: cn('nodrag nopan', 'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl', 'border border-border bg-surface-overlay text-foreground', 'shadow-(--canvas-node-shadow-lifted)', 'transition-colors', 'hover:bg-surface-hover hover:border-brand'),
-        children: /*#__PURE__*/ jsx(CanvasIcon, {
-            icon: "plus",
-            size: 14
+function EmptyState({ label, onAddFirstChild }) {
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
+        content: label,
+        placement: "top",
+        children: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            onClick: onAddFirstChild,
+            "aria-label": label,
+            className: cn('nodrag nopan', 'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl', 'border border-border bg-surface-overlay text-foreground', 'shadow-(--canvas-node-shadow-lifted)', 'transition-colors', 'hover:bg-surface-hover hover:border-brand'),
+            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "plus",
+                size: 14
+            })
         })
     });
 }

package/dist/canvas/locales/en.cjs

@@ -26,7 +26,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     messages: ()=>messages
 });
-const messages = JSON.parse("{\"stage-node.add-first-task\":[\"Add first task\"],\"stage-node.add-task\":[\"Add task\"],\"stage-node.add-task-to-parallel-group-above\":[\"Add task to parallel group above\"],\"stage-node.add-task-to-parallel-group-below\":[\"Add task to parallel group below\"],\"stage-node.adhoc-tasks\":[\"Ad hoc tasks\"],\"stage-node.create-parallel-group-with-task-above\":[\"Create parallel group with task above\"],\"stage-node.create-parallel-group-with-task-below\":[\"Create parallel group with task below\"],\"stage-node.delete-task\":[\"Delete task\"],\"stage-node.event-driven-tasks\":[\"Event-driven tasks\"],\"stage-node.move-down\":[\"Move down\"],\"stage-node.move-up\":[\"Move up\"],\"stage-node.no-tasks\":[\"No tasks\"],\"stage-node.parallel\":[\"Parallel\"],\"stage-node.remove-from-parallel-group\":[\"Remove from parallel group\"],\"stage-node.remove-group-from-stage\":[\"Remove group from stage\"],\"stage-node.replace-task\":[\"Replace task\"],\"stage-node.status.cancelled\":[\"Cancelled\"],\"stage-node.status.completed\":[\"Completed\"],\"stage-node.status.failed\":[\"Failed\"],\"stage-node.status.in-progress\":[\"In progress\"],\"stage-node.status.not-executed\":[\"Not started\"],\"stage-node.status.paused\":[\"Paused\"],\"stage-node.status.terminated\":[\"Terminated\"],\"stage-node.status.warning\":[\"Warning\"],\"stage-node.ungroup-parallel-tasks\":[\"Ungroup parallel tasks\"],\"stage-node.untitled-stage\":[\"Untitled stage\"],\"sticky-note.formatting.bold\":[\"Bold (\",[\"boldShortcut\"],\")\"],\"sticky-note.formatting.bullet-list\":[\"Bullet list\"],\"sticky-note.formatting.italic\":[\"Italic (\",[\"italicShortcut\"],\")\"],\"sticky-note.formatting.numbered-list\":[\"Numbered list\"],\"sticky-note.formatting.strikethrough\":[\"Strikethrough (\",[\"strikethroughShortcut\"],\")\"],\"sticky-note.formatting.toolbar\":[\"Text formatting\"],\"sticky-note.toolbar.color\":[\"Color\"],\"sticky-note.toolbar.delete\":[\"Delete\"],\"sticky-note.toolbar.edit\":[\"Edit\"],\"toolbox.search\":[\"Search\"]}");
+const messages = JSON.parse("{\"loop-node.add-node\":[\"Add node to loop\"],\"loop-node.iteration.label\":[\"Loop iteration\"],\"loop-node.iteration.next\":[\"Next loop iteration\"],\"loop-node.iteration.previous\":[\"Previous loop iteration\"],\"loop-node.iteration.status\":[[\"label\"],\": \",[\"visibleIndex\"],\" of \",[\"total\"]],\"loop-node.mode.parallel\":[\"Parallel\"],\"loop-node.mode.sequential\":[\"Sequential\"],\"loop-node.title\":[\"Loop\"],\"stage-node.add-first-task\":[\"Add first task\"],\"stage-node.add-task\":[\"Add task\"],\"stage-node.add-task-to-parallel-group-above\":[\"Add task to parallel group above\"],\"stage-node.add-task-to-parallel-group-below\":[\"Add task to parallel group below\"],\"stage-node.adhoc-tasks\":[\"Ad hoc tasks\"],\"stage-node.create-parallel-group-with-task-above\":[\"Create parallel group with task above\"],\"stage-node.create-parallel-group-with-task-below\":[\"Create parallel group with task below\"],\"stage-node.delete-task\":[\"Delete task\"],\"stage-node.event-driven-tasks\":[\"Event-driven tasks\"],\"stage-node.move-down\":[\"Move down\"],\"stage-node.move-up\":[\"Move up\"],\"stage-node.no-tasks\":[\"No tasks\"],\"stage-node.parallel\":[\"Parallel\"],\"stage-node.remove-from-parallel-group\":[\"Remove from parallel group\"],\"stage-node.remove-group-from-stage\":[\"Remove group from stage\"],\"stage-node.replace-task\":[\"Replace task\"],\"stage-node.status.cancelled\":[\"Cancelled\"],\"stage-node.status.completed\":[\"Completed\"],\"stage-node.status.failed\":[\"Failed\"],\"stage-node.status.in-progress\":[\"In progress\"],\"stage-node.status.not-executed\":[\"Not started\"],\"stage-node.status.paused\":[\"Paused\"],\"stage-node.status.terminated\":[\"Terminated\"],\"stage-node.status.warning\":[\"Warning\"],\"stage-node.ungroup-parallel-tasks\":[\"Ungroup parallel tasks\"],\"stage-node.untitled-stage\":[\"Untitled stage\"],\"sticky-note.formatting.bold\":[\"Bold (\",[\"boldShortcut\"],\")\"],\"sticky-note.formatting.bullet-list\":[\"Bullet list\"],\"sticky-note.formatting.italic\":[\"Italic (\",[\"italicShortcut\"],\")\"],\"sticky-note.formatting.numbered-list\":[\"Numbered list\"],\"sticky-note.formatting.strikethrough\":[\"Strikethrough (\",[\"strikethroughShortcut\"],\")\"],\"sticky-note.formatting.toolbar\":[\"Text formatting\"],\"sticky-note.toolbar.color\":[\"Color\"],\"sticky-note.toolbar.delete\":[\"Delete\"],\"sticky-note.toolbar.edit\":[\"Edit\"],\"toolbox.search\":[\"Search\"]}");
 exports.messages = __webpack_exports__.messages;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "messages"

package/dist/canvas/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/canvas/locales/en.ts"],"names":[],"mappings":"AAAkB,OAAO,KAAI,EAAC,QAAQ,EAAC,MAAI,cAAc,CAAC;AAAA,eAAO,MAAM,QAAQ,EAA+/D,QAAQ,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/canvas/locales/en.ts"],"names":[],"mappings":"AAAkB,OAAO,KAAI,EAAC,QAAQ,EAAC,MAAI,cAAc,CAAC;AAAA,eAAO,MAAM,QAAQ,EAA26E,QAAQ,CAAC"}

package/dist/canvas/locales/en.js

@@ -1,2 +1,2 @@
-const messages = JSON.parse("{\"stage-node.add-first-task\":[\"Add first task\"],\"stage-node.add-task\":[\"Add task\"],\"stage-node.add-task-to-parallel-group-above\":[\"Add task to parallel group above\"],\"stage-node.add-task-to-parallel-group-below\":[\"Add task to parallel group below\"],\"stage-node.adhoc-tasks\":[\"Ad hoc tasks\"],\"stage-node.create-parallel-group-with-task-above\":[\"Create parallel group with task above\"],\"stage-node.create-parallel-group-with-task-below\":[\"Create parallel group with task below\"],\"stage-node.delete-task\":[\"Delete task\"],\"stage-node.event-driven-tasks\":[\"Event-driven tasks\"],\"stage-node.move-down\":[\"Move down\"],\"stage-node.move-up\":[\"Move up\"],\"stage-node.no-tasks\":[\"No tasks\"],\"stage-node.parallel\":[\"Parallel\"],\"stage-node.remove-from-parallel-group\":[\"Remove from parallel group\"],\"stage-node.remove-group-from-stage\":[\"Remove group from stage\"],\"stage-node.replace-task\":[\"Replace task\"],\"stage-node.status.cancelled\":[\"Cancelled\"],\"stage-node.status.completed\":[\"Completed\"],\"stage-node.status.failed\":[\"Failed\"],\"stage-node.status.in-progress\":[\"In progress\"],\"stage-node.status.not-executed\":[\"Not started\"],\"stage-node.status.paused\":[\"Paused\"],\"stage-node.status.terminated\":[\"Terminated\"],\"stage-node.status.warning\":[\"Warning\"],\"stage-node.ungroup-parallel-tasks\":[\"Ungroup parallel tasks\"],\"stage-node.untitled-stage\":[\"Untitled stage\"],\"sticky-note.formatting.bold\":[\"Bold (\",[\"boldShortcut\"],\")\"],\"sticky-note.formatting.bullet-list\":[\"Bullet list\"],\"sticky-note.formatting.italic\":[\"Italic (\",[\"italicShortcut\"],\")\"],\"sticky-note.formatting.numbered-list\":[\"Numbered list\"],\"sticky-note.formatting.strikethrough\":[\"Strikethrough (\",[\"strikethroughShortcut\"],\")\"],\"sticky-note.formatting.toolbar\":[\"Text formatting\"],\"sticky-note.toolbar.color\":[\"Color\"],\"sticky-note.toolbar.delete\":[\"Delete\"],\"sticky-note.toolbar.edit\":[\"Edit\"],\"toolbox.search\":[\"Search\"]}");
+const messages = JSON.parse("{\"loop-node.add-node\":[\"Add node to loop\"],\"loop-node.iteration.label\":[\"Loop iteration\"],\"loop-node.iteration.next\":[\"Next loop iteration\"],\"loop-node.iteration.previous\":[\"Previous loop iteration\"],\"loop-node.iteration.status\":[[\"label\"],\": \",[\"visibleIndex\"],\" of \",[\"total\"]],\"loop-node.mode.parallel\":[\"Parallel\"],\"loop-node.mode.sequential\":[\"Sequential\"],\"loop-node.title\":[\"Loop\"],\"stage-node.add-first-task\":[\"Add first task\"],\"stage-node.add-task\":[\"Add task\"],\"stage-node.add-task-to-parallel-group-above\":[\"Add task to parallel group above\"],\"stage-node.add-task-to-parallel-group-below\":[\"Add task to parallel group below\"],\"stage-node.adhoc-tasks\":[\"Ad hoc tasks\"],\"stage-node.create-parallel-group-with-task-above\":[\"Create parallel group with task above\"],\"stage-node.create-parallel-group-with-task-below\":[\"Create parallel group with task below\"],\"stage-node.delete-task\":[\"Delete task\"],\"stage-node.event-driven-tasks\":[\"Event-driven tasks\"],\"stage-node.move-down\":[\"Move down\"],\"stage-node.move-up\":[\"Move up\"],\"stage-node.no-tasks\":[\"No tasks\"],\"stage-node.parallel\":[\"Parallel\"],\"stage-node.remove-from-parallel-group\":[\"Remove from parallel group\"],\"stage-node.remove-group-from-stage\":[\"Remove group from stage\"],\"stage-node.replace-task\":[\"Replace task\"],\"stage-node.status.cancelled\":[\"Cancelled\"],\"stage-node.status.completed\":[\"Completed\"],\"stage-node.status.failed\":[\"Failed\"],\"stage-node.status.in-progress\":[\"In progress\"],\"stage-node.status.not-executed\":[\"Not started\"],\"stage-node.status.paused\":[\"Paused\"],\"stage-node.status.terminated\":[\"Terminated\"],\"stage-node.status.warning\":[\"Warning\"],\"stage-node.ungroup-parallel-tasks\":[\"Ungroup parallel tasks\"],\"stage-node.untitled-stage\":[\"Untitled stage\"],\"sticky-note.formatting.bold\":[\"Bold (\",[\"boldShortcut\"],\")\"],\"sticky-note.formatting.bullet-list\":[\"Bullet list\"],\"sticky-note.formatting.italic\":[\"Italic (\",[\"italicShortcut\"],\")\"],\"sticky-note.formatting.numbered-list\":[\"Numbered list\"],\"sticky-note.formatting.strikethrough\":[\"Strikethrough (\",[\"strikethroughShortcut\"],\")\"],\"sticky-note.formatting.toolbar\":[\"Text formatting\"],\"sticky-note.toolbar.color\":[\"Color\"],\"sticky-note.toolbar.delete\":[\"Delete\"],\"sticky-note.toolbar.edit\":[\"Edit\"],\"toolbox.search\":[\"Search\"]}");
 export { messages };