@uipath/apollo-react 4.31.1 → 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/components/StageNode/StageNodeHeader.cjs

@@ -40,6 +40,7 @@ const ExecutionStatusIcon_cjs_namespaceObject = require("../ExecutionStatusIcon/
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
 const external_StageTitleInput_cjs_namespaceObject = require("./StageTitleInput.cjs");
+const external_useExecutionStatusLabel_cjs_namespaceObject = require("./useExecutionStatusLabel.cjs");
 const external_useStageNodeLabels_cjs_namespaceObject = require("./useStageNodeLabels.cjs");
 const SLA_ICON_CONFIG = {
     warning: {
@@ -70,6 +71,7 @@ const CHIP_ICONS = {
 };
 const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
     const labels = (0, external_useStageNodeLabels_cjs_namespaceObject.useStageNodeLabels)();
+    const getStatusName = (0, external_useExecutionStatusLabel_cjs_namespaceObject.useExecutionStatusLabel)();
     const { id, stageDetails, execution, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
     const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
     const icon = stageDetails?.icon;
@@ -78,6 +80,8 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
     const slaText = execution?.stageStatus?.slaText;
     const slaIcon = execution?.stageStatus?.slaIcon;
     const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
+    const statusFallbackName = status ? getStatusName(status) : '';
+    const statusTooltip = statusLabel || statusFallbackName;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StageNode_styles_cjs_namespaceObject.StageHeader, {
         isException: isException,
         "data-testid": `stage-header-${id}`,
@@ -106,13 +110,13 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
                         py: apollo_core_namespaceObject.Padding.PadS,
                         children: [
                             status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                content: statusLabel,
+                                content: statusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-6 w-6",
-                                    "aria-label": statusLabel,
+                                    "aria-label": statusTooltip,
                                     children: 'NotExecuted' === status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                                         icon: "hourglass",
                                         size: 20,

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

@@ -1 +1 @@
-{"version":3,"file":"StageNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHeader.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqJnF,eAAO,MAAM,eAAe,wGAxHzB;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACvD,6CAkHwD,CAAC"}
+{"version":3,"file":"StageNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeHeader.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAyJnF,eAAO,MAAM,eAAe,wGA3HzB;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kBAAkB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACvD,6CAqHwD,CAAC"}

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

@@ -12,6 +12,7 @@ import { getExecutionStatusColor } from "../ExecutionStatusIcon/ExecutionStatusI
 import { StageChip, StageHeader } from "./StageNode.styles.js";
 import { StageHeaderChipType } from "./StageNode.types.js";
 import { StageTitleInput } from "./StageTitleInput.js";
+import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
 import { useStageNodeLabels } from "./useStageNodeLabels.js";
 const SLA_ICON_CONFIG = {
     warning: {
@@ -42,6 +43,7 @@ const CHIP_ICONS = {
 };
 const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
     const labels = useStageNodeLabels();
+    const getStatusName = useExecutionStatusLabel();
     const { id, stageDetails, execution, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
     const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
     const icon = stageDetails?.icon;
@@ -50,6 +52,8 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
     const slaText = execution?.stageStatus?.slaText;
     const slaIcon = execution?.stageStatus?.slaIcon;
     const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
+    const statusFallbackName = status ? getStatusName(status) : '';
+    const statusTooltip = statusLabel || statusFallbackName;
     return /*#__PURE__*/ jsxs(StageHeader, {
         isException: isException,
         "data-testid": `stage-header-${id}`,
@@ -78,13 +82,13 @@ const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTa
                         py: Padding.PadS,
                         children: [
                             status && /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: statusLabel,
+                                content: statusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ jsx(Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-6 w-6",
-                                    "aria-label": statusLabel,
+                                    "aria-label": statusTooltip,
                                     children: 'NotExecuted' === status ? /*#__PURE__*/ jsx(CanvasIcon, {
                                         icon: "hourglass",
                                         size: 20,

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

@@ -47,6 +47,7 @@ const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageTaskEntryConditionIcon_cjs_namespaceObject = require("./StageTaskEntryConditionIcon.cjs");
+const external_useExecutionStatusLabel_cjs_namespaceObject = require("./useExecutionStatusLabel.cjs");
 const ProcessCanvasIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
@@ -147,9 +148,12 @@ const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
     });
 });
 const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ task, taskExecution, isDragging, onTaskPlay })=>{
+    const getStatusName = (0, external_useExecutionStatusLabel_cjs_namespaceObject.useExecutionStatusLabel)();
     const hasExecutionStatus = !!taskExecution?.status;
     const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || taskExecution.badge);
     const showPlayButtonSmall = onTaskPlay && hasExecutionStatus;
+    const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
+    const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
         flex: 1,
         style: {
@@ -196,21 +200,19 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                             flexShrink: 0
                         },
                         children: [
-                            hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                content: taskExecution.message,
+                            hasExecutionStatus && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                content: taskStatusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-4 w-4",
-                                    "aria-label": taskExecution.message,
+                                    "aria-label": taskStatusTooltip,
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
                                         status: taskExecution.status
                                     })
                                 })
-                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
-                                status: taskExecution.status
-                            })),
+                            }),
                             !hasSecondRowContent && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageTaskEntryConditionIcon_cjs_namespaceObject.StageTaskEntryConditionIcon, {
                                 task: task,
                                 small: !!hasExecutionStatus

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

@@ -1 +1 @@
-{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA+F3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,wFAC4B,gBAAgB,6CAqFnE,CAAC"}
+{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgG3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,wFAC4B,gBAAgB,6CAqFnE,CAAC"}

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

@@ -9,6 +9,7 @@ import { CanvasTooltip } from "../CanvasTooltip.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { StageTaskIcon, StageTaskRetryDuration } from "./StageNode.styles.js";
 import { StageTaskEntryConditionIcon } from "./StageTaskEntryConditionIcon.js";
+import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
 const ProcessCanvasIcon = ()=>/*#__PURE__*/ jsxs("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
@@ -109,9 +110,12 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
     });
 });
 const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTaskPlay })=>{
+    const getStatusName = useExecutionStatusLabel();
     const hasExecutionStatus = !!taskExecution?.status;
     const hasSecondRowContent = taskExecution && (taskExecution.duration || taskExecution.retryDuration || taskExecution.badge);
     const showPlayButtonSmall = onTaskPlay && hasExecutionStatus;
+    const taskStatusFallbackName = hasExecutionStatus ? getStatusName(taskExecution?.status) : '';
+    const taskStatusTooltip = taskExecution?.message || taskStatusFallbackName;
     return /*#__PURE__*/ jsxs(Column, {
         flex: 1,
         style: {
@@ -158,21 +162,19 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                             flexShrink: 0
                         },
                         children: [
-                            hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ jsx(CanvasTooltip, {
-                                content: taskExecution.message,
+                            hasExecutionStatus && /*#__PURE__*/ jsx(CanvasTooltip, {
+                                content: taskStatusTooltip,
                                 placement: "top",
                                 children: /*#__PURE__*/ jsx(Button, {
                                     variant: "ghost",
                                     size: "icon",
                                     className: "h-4 w-4",
-                                    "aria-label": taskExecution.message,
+                                    "aria-label": taskStatusTooltip,
                                     children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
                                         status: taskExecution.status
                                     })
                                 })
-                            }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
-                                status: taskExecution.status
-                            })),
+                            }),
                             !hasSecondRowContent && /*#__PURE__*/ jsx(StageTaskEntryConditionIcon, {
                                 task: task,
                                 small: !!hasExecutionStatus