@uipath/apollo-react 6.50.0 → 6.52.0

package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts

@@ -31,7 +31,7 @@ export declare const agentFlowManifest: {
             canvasLabel?: string | undefined;
             description?: string | undefined;
             icon?: string | undefined;
-            shape?: "square" | "circle" | "container" | "rectangle" | undefined;
+            shape?: "document" | "square" | "circle" | "container" | "rectangle" | "pill" | "clipped" | undefined;
             color?: string | undefined;
             background?: string | undefined;
             iconBackground?: string | undefined;
@@ -104,7 +104,7 @@ export declare const agentFlowManifest: {
                     requiresPermissions?: string[] | undefined;
                     hideOnExecution?: boolean | undefined;
                     nodeTypes?: string[] | undefined;
-                    shapes?: ("square" | "circle" | "container" | "rectangle")[] | undefined;
+                    shapes?: ("document" | "square" | "circle" | "container" | "rectangle" | "pill" | "clipped")[] | undefined;
                     handles?: {
                         handleType: "input" | "output" | "artifact";
                         type?: "target" | "source" | undefined;
@@ -120,7 +120,7 @@ export declare const agentFlowManifest: {
                     requiresPermissions?: string[] | undefined;
                     hideOnExecution?: boolean | undefined;
                     nodeTypes?: string[] | undefined;
-                    shapes?: ("square" | "circle" | "container" | "rectangle")[] | undefined;
+                    shapes?: ("document" | "square" | "circle" | "container" | "rectangle" | "pill" | "clipped")[] | undefined;
                     handles?: {
                         handleType: "input" | "output" | "artifact";
                         type?: "target" | "source" | undefined;

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -32,6 +32,7 @@ const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
+const external_schema_index_cjs_namespaceObject = require("../../schema/index.cjs");
 const adornment_resolver_cjs_namespaceObject = require("../../utils/adornment-resolver.cjs");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const manifest_resolver_cjs_namespaceObject = require("../../utils/manifest-resolver.cjs");
@@ -56,7 +57,7 @@ const external_BaseNodeMissingManifest_cjs_namespaceObject = require("./BaseNode
 const external_NodeLabel_cjs_namespaceObject = require("./NodeLabel.cjs");
 const NEVER_SHOW_ADD_BUTTON = ()=>false;
 const getContainerWidth = (shape, width)=>{
-    const defaultWidth = 'rectangle' === shape ? external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH : external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
+    const defaultWidth = (0, external_schema_index_cjs_namespaceObject.isWideNodeShape)(shape) ? external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH : external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
     if (width && width !== external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE && width !== external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH) return width;
     return defaultWidth;
 };
@@ -242,9 +243,9 @@ const BaseNodeComponent = (props)=>{
         const effectiveH = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : numH;
         const effectiveW = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
         const innerBasis = Math.min(effectiveH, effectiveW);
-        const innerRadius = getRadius(innerBasis, external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO);
+        const innerRadius = 'pill' === displayShape ? '9999px' : getRadius(innerBasis, external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO);
         const gap = innerBasis * (1 - external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO);
-        const keepSquare = 'circle' === displayShape || 'rectangle' === displayShape;
+        const keepSquare = 'circle' === displayShape || (0, external_schema_index_cjs_namespaceObject.isWideNodeShape)(displayShape);
         const innerW = keepSquare ? innerBasis - gap : effectiveW - gap;
         const innerH = keepSquare ? innerBasis - gap : effectiveH - gap;
         return {

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA+ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAysB1B,eAAO,MAAM,QAAQ,8CApqBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAoqBmB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA+ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AA2sB1B,eAAO,MAAM,QAAQ,8CAtqBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAsqBmB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -4,6 +4,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE, NODE_BORDER_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
 import { useNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
+import { isWideNodeShape } from "../../schema/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
 import { CanvasIcon, getIcon } from "../../utils/icon-registry.js";
 import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
@@ -28,7 +29,7 @@ import { MissingManifestNode } from "./BaseNodeMissingManifest.js";
 import { NodeLabel } from "./NodeLabel.js";
 const NEVER_SHOW_ADD_BUTTON = ()=>false;
 const getContainerWidth = (shape, width)=>{
-    const defaultWidth = 'rectangle' === shape ? DEFAULT_RECTANGLE_NODE_WIDTH : DEFAULT_NODE_SIZE;
+    const defaultWidth = isWideNodeShape(shape) ? DEFAULT_RECTANGLE_NODE_WIDTH : DEFAULT_NODE_SIZE;
     if (width && width !== DEFAULT_NODE_SIZE && width !== DEFAULT_RECTANGLE_NODE_WIDTH) return width;
     return defaultWidth;
 };
@@ -214,9 +215,9 @@ const BaseNodeComponent = (props)=>{
         const effectiveH = hasFooter ? DEFAULT_NODE_SIZE : numH;
         const effectiveW = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
         const innerBasis = Math.min(effectiveH, effectiveW);
-        const innerRadius = getRadius(innerBasis, NODE_INNER_RADIUS_RATIO);
+        const innerRadius = 'pill' === displayShape ? '9999px' : getRadius(innerBasis, NODE_INNER_RADIUS_RATIO);
         const gap = innerBasis * (1 - NODE_INNER_SHAPE_RATIO);
-        const keepSquare = 'circle' === displayShape || 'rectangle' === displayShape;
+        const keepSquare = 'circle' === displayShape || isWideNodeShape(displayShape);
         const innerW = keepSquare ? innerBasis - gap : effectiveW - gap;
         const innerH = keepSquare ? innerBasis - gap : effectiveH - gap;
         return {

package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs

@@ -30,6 +30,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("../../schema/index.cjs");
+const external_BaseNodeOutline_cjs_namespaceObject = require("./BaseNodeOutline.cjs");
 const getStatusBorder = (status)=>{
     switch(status){
         case 'InProgress':
@@ -59,7 +61,8 @@ const BaseContainer = ({ isSelected, isHovered, isStacked, shape, interactionSta
     const className = (0, external_react_namespaceObject.useMemo)(()=>{
         const statusBorder = getStatusBorder(activeStatus);
         const hasStatusBorder = statusBorder.length > 0;
-        return (0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'outline-offset-0 transition-[box-shadow,border-color] duration-150', shadow && 'shadow-(--canvas-node-shadow-rest)', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', statusBorder, shadow && isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && 'border-border-hover', isSelected && 'outline outline-2 outline-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && (0, apollo_wind_namespaceObject.cn)('cursor-grabbing', shadow && 'shadow-(--canvas-node-shadow-lifted)'), isStacked && 'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-full before:rounded-[inherit] before:bg-surface-overlay before:border before:border-brand before:translate-y-[6px] before:-z-10 before:pointer-events-none');
+        const drawnByOutline = (0, index_cjs_namespaceObject.isOutlineDrawnShape)(shape);
+        return (0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer', drawnByOutline ? 'bg-transparent border-0' : (0, apollo_wind_namespaceObject.cn)('bg-surface-overlay border border-border', 'pill' === shape ? 'rounded-full' : 'rounded-(--node-radius)'), 'w-(--node-w) h-(--node-h)', 'outline-offset-0 transition-[box-shadow,border-color] duration-150', shadow && !drawnByOutline && 'shadow-(--canvas-node-shadow-rest)', (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', !drawnByOutline && statusBorder, shadow && !drawnByOutline && isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && !drawnByOutline && 'border-border-hover', isSelected && !drawnByOutline && 'outline outline-2 outline-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && (0, apollo_wind_namespaceObject.cn)('cursor-grabbing', shadow && !drawnByOutline && 'shadow-(--canvas-node-shadow-lifted)'), isStacked && 'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-full before:rounded-[inherit] before:bg-surface-overlay before:border before:border-brand before:translate-y-[6px] before:-z-10 before:pointer-events-none');
     }, [
         shape,
         hasFooter,
@@ -70,7 +73,7 @@ const BaseContainer = ({ isSelected, isHovered, isStacked, shape, interactionSta
         interactionState,
         shadow
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": "base-container",
         "data-execution-status": executionStatus,
         "data-interaction-state": interactionState,
@@ -82,7 +85,17 @@ const BaseContainer = ({ isSelected, isHovered, isStacked, shape, interactionSta
             background
         } : void 0,
         "aria-busy": loading || void 0,
-        children: children
+        children: [
+            (0, index_cjs_namespaceObject.isOutlineDrawnShape)(shape) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeOutline_cjs_namespaceObject.BaseNodeOutline, {
+                shape: shape,
+                isSelected: isSelected,
+                isHovered: isHovered,
+                isDragging: 'drag' === interactionState,
+                shadow: shadow,
+                status: activeStatus
+            }),
+            children
+        ]
     });
 };
 exports.BaseContainer = __webpack_exports__.BaseContainer;

package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts

@@ -1,4 +1,4 @@
-import type { NodeShape } from '../../schema';
+import { type NodeShape } from '../../schema';
 import type { SuggestionType } from '../../types';
 import type { ElementStatusValues } from '../../types/execution';
 import type { ValidationErrorSeverity } from '../../types/validation';

package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAuBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,qKAc3B,kBAAkB,4CAgDpB,CAAC"}
+{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGtE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAuBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,qKAc3B,kBAAkB,4CAoEpB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNodeContainer.js

@@ -1,6 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@uipath/apollo-wind";
 import { useMemo } from "react";
+import { isOutlineDrawnShape, isWideNodeShape } from "../../schema/index.js";
+import { BaseNodeOutline } from "./BaseNodeOutline.js";
 const getStatusBorder = (status)=>{
     switch(status){
         case 'InProgress':
@@ -30,7 +32,8 @@ const BaseContainer = ({ isSelected, isHovered, isStacked, shape, interactionSta
     const className = useMemo(()=>{
         const statusBorder = getStatusBorder(activeStatus);
         const hasStatusBorder = statusBorder.length > 0;
-        return cn('relative flex items-center cursor-pointer bg-surface-overlay border border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'outline-offset-0 transition-[box-shadow,border-color] duration-150', shadow && 'shadow-(--canvas-node-shadow-rest)', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', statusBorder, shadow && isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && 'border-border-hover', isSelected && 'outline outline-2 outline-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && cn('cursor-grabbing', shadow && 'shadow-(--canvas-node-shadow-lifted)'), isStacked && 'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-full before:rounded-[inherit] before:bg-surface-overlay before:border before:border-brand before:translate-y-[6px] before:-z-10 before:pointer-events-none');
+        const drawnByOutline = isOutlineDrawnShape(shape);
+        return cn('relative flex items-center cursor-pointer', drawnByOutline ? 'bg-transparent border-0' : cn('bg-surface-overlay border border-border', 'pill' === shape ? 'rounded-full' : 'rounded-(--node-radius)'), 'w-(--node-w) h-(--node-h)', 'outline-offset-0 transition-[box-shadow,border-color] duration-150', shadow && !drawnByOutline && 'shadow-(--canvas-node-shadow-rest)', isWideNodeShape(shape) ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', !drawnByOutline && statusBorder, shadow && !drawnByOutline && isHovered && 'shadow-(--canvas-node-shadow-hover)', isHovered && !hasStatusBorder && !drawnByOutline && 'border-border-hover', isSelected && !drawnByOutline && 'outline outline-2 outline-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && cn('cursor-grabbing', shadow && !drawnByOutline && 'shadow-(--canvas-node-shadow-lifted)'), isStacked && 'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-full before:rounded-[inherit] before:bg-surface-overlay before:border before:border-brand before:translate-y-[6px] before:-z-10 before:pointer-events-none');
     }, [
         shape,
         hasFooter,
@@ -41,7 +44,7 @@ const BaseContainer = ({ isSelected, isHovered, isStacked, shape, interactionSta
         interactionState,
         shadow
     ]);
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsxs("div", {
         "data-testid": "base-container",
         "data-execution-status": executionStatus,
         "data-interaction-state": interactionState,
@@ -53,7 +56,17 @@ const BaseContainer = ({ isSelected, isHovered, isStacked, shape, interactionSta
             background
         } : void 0,
         "aria-busy": loading || void 0,
-        children: children
+        children: [
+            isOutlineDrawnShape(shape) && /*#__PURE__*/ jsx(BaseNodeOutline, {
+                shape: shape,
+                isSelected: isSelected,
+                isHovered: isHovered,
+                isDragging: 'drag' === interactionState,
+                shadow: shadow,
+                status: activeStatus
+            }),
+            children
+        ]
     });
 };
 export { BaseContainer, getStatusBorder };

package/dist/canvas/components/BaseNode/BaseNodeOutline.cjs

@@ -0,0 +1,131 @@
+"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__, {
+    pathFor: ()=>pathFor,
+    BaseNodeOutline: ()=>BaseNodeOutline,
+    getStatusStroke: ()=>getStatusStroke
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const EDGE = 0.5;
+const CUT_RATIO = 0.32;
+const WAVE_RATIO = 0.16;
+const pathFor = (shape, width, height)=>{
+    const right = width - EDGE;
+    const bottom = height - EDGE;
+    if ('clipped' === shape) {
+        const cut = Math.min(height * CUT_RATIO, 18);
+        return `M${cut} ${EDGE} H${right} V${bottom - cut} L${right - cut} ${bottom} H${EDGE} V${cut} Z`;
+    }
+    const wave = Math.min(height * WAVE_RATIO, 14);
+    const crest = bottom - wave;
+    return [
+        `M${EDGE} ${EDGE}`,
+        `H${right}`,
+        `V${crest}`,
+        `C${0.66 * width} ${crest} ${0.45 * width} ${bottom} ${0.2 * width} ${bottom}`,
+        `C${0.1 * width} ${bottom} ${0.04 * width} ${bottom - 0.5 * wave} ${EDGE} ${bottom - 0.8 * wave}`,
+        'Z'
+    ].join(' ');
+};
+const getStatusStroke = (status)=>{
+    switch(status){
+        case 'InProgress':
+            return 'stroke-info animate-glow [--glow-color:var(--info)]';
+        case 'Completed':
+        case 'add':
+            return 'stroke-success';
+        case 'ActionNeeded':
+        case 'Paused':
+        case 'Warning':
+        case 'WARNING':
+        case 'update':
+            return 'stroke-warning animate-glow [--glow-color:var(--warning)]';
+        case 'Cancelled':
+        case 'Failed':
+        case 'Terminated':
+        case 'ERROR':
+        case 'CRITICAL':
+        case 'delete':
+            return 'stroke-error animate-glow [--glow-color:var(--error)]';
+        default:
+            return '';
+    }
+};
+const outlineShadow = (isDragging, isHovered)=>{
+    if (isDragging) return '[filter:var(--canvas-node-filter-lifted)]';
+    return isHovered ? '[filter:var(--canvas-node-filter-hover)]' : '[filter:var(--canvas-node-filter-rest)]';
+};
+const BaseNodeOutline = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ shape, isSelected, isHovered, isDragging, shadow, status })=>{
+    const ref = (0, external_react_namespaceObject.useRef)(null);
+    const [box, setBox] = (0, external_react_namespaceObject.useState)({
+        width: external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH,
+        height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE
+    });
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const element = ref.current;
+        if (!element) return;
+        const measure = ()=>{
+            const { clientWidth, clientHeight } = element;
+            if (clientWidth > 0 && clientHeight > 0) setBox({
+                width: clientWidth,
+                height: clientHeight
+            });
+        };
+        measure();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, []);
+    const statusStroke = getStatusStroke(status);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
+        ref: ref,
+        "aria-hidden": true,
+        "data-testid": "base-node-outline",
+        className: (0, apollo_wind_namespaceObject.cn)('pointer-events-none absolute inset-0 -z-10 h-full w-full transition-[filter] duration-150', shadow && outlineShadow(isDragging, isHovered)),
+        viewBox: `0 0 ${box.width} ${box.height}`,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            d: pathFor(shape, box.width, box.height),
+            className: (0, apollo_wind_namespaceObject.cn)('fill-surface-overlay transition-[stroke,stroke-width] duration-150', statusStroke || (isSelected ? 'stroke-foreground-accent-muted' : isHovered ? 'stroke-border-hover' : 'stroke-border')),
+            strokeWidth: isSelected ? 2 : 1
+        })
+    });
+});
+BaseNodeOutline.displayName = 'BaseNodeOutline';
+exports.BaseNodeOutline = __webpack_exports__.BaseNodeOutline;
+exports.getStatusStroke = __webpack_exports__.getStatusStroke;
+exports.pathFor = __webpack_exports__.pathFor;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "BaseNodeOutline",
+    "getStatusStroke",
+    "pathFor"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/BaseNode/BaseNodeOutline.d.ts

@@ -0,0 +1,17 @@
+import type { OutlineDrawnNodeShape } from '../../schema';
+import type { SuggestionType } from '../../types';
+import type { ElementStatusValues } from '../../types/execution';
+import type { ValidationErrorSeverity } from '../../types/validation';
+export declare const pathFor: (shape: OutlineDrawnNodeShape, width: number, height: number) => string;
+export declare const getStatusStroke: (status?: ElementStatusValues | ValidationErrorSeverity | SuggestionType) => string;
+interface BaseNodeOutlineProps {
+    shape: OutlineDrawnNodeShape;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    isDragging?: boolean;
+    shadow?: boolean;
+    status?: ElementStatusValues | ValidationErrorSeverity | SuggestionType;
+}
+export declare const BaseNodeOutline: import("react").MemoExoticComponent<({ shape, isSelected, isHovered, isDragging, shadow, status }: BaseNodeOutlineProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=BaseNodeOutline.d.ts.map

package/dist/canvas/components/BaseNode/BaseNodeOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNodeOutline.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeOutline.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAoBtE,eAAO,MAAM,OAAO,GAAI,OAAO,qBAAqB,EAAE,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,MAyBrF,CAAC;AAGF,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAuBF,CAAC;AAgBF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,CAAC;CACzE;AAUD,eAAO,MAAM,eAAe,qGACqC,oBAAoB,6CA0DpF,CAAC"}

package/dist/canvas/components/BaseNode/BaseNodeOutline.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { memo, useEffect, useRef, useState } from "react";
+import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH } from "../../constants.js";
+const EDGE = 0.5;
+const CUT_RATIO = 0.32;
+const WAVE_RATIO = 0.16;
+const pathFor = (shape, width, height)=>{
+    const right = width - EDGE;
+    const bottom = height - EDGE;
+    if ('clipped' === shape) {
+        const cut = Math.min(height * CUT_RATIO, 18);
+        return `M${cut} ${EDGE} H${right} V${bottom - cut} L${right - cut} ${bottom} H${EDGE} V${cut} Z`;
+    }
+    const wave = Math.min(height * WAVE_RATIO, 14);
+    const crest = bottom - wave;
+    return [
+        `M${EDGE} ${EDGE}`,
+        `H${right}`,
+        `V${crest}`,
+        `C${0.66 * width} ${crest} ${0.45 * width} ${bottom} ${0.2 * width} ${bottom}`,
+        `C${0.1 * width} ${bottom} ${0.04 * width} ${bottom - 0.5 * wave} ${EDGE} ${bottom - 0.8 * wave}`,
+        'Z'
+    ].join(' ');
+};
+const getStatusStroke = (status)=>{
+    switch(status){
+        case 'InProgress':
+            return 'stroke-info animate-glow [--glow-color:var(--info)]';
+        case 'Completed':
+        case 'add':
+            return 'stroke-success';
+        case 'ActionNeeded':
+        case 'Paused':
+        case 'Warning':
+        case 'WARNING':
+        case 'update':
+            return 'stroke-warning animate-glow [--glow-color:var(--warning)]';
+        case 'Cancelled':
+        case 'Failed':
+        case 'Terminated':
+        case 'ERROR':
+        case 'CRITICAL':
+        case 'delete':
+            return 'stroke-error animate-glow [--glow-color:var(--error)]';
+        default:
+            return '';
+    }
+};
+const outlineShadow = (isDragging, isHovered)=>{
+    if (isDragging) return '[filter:var(--canvas-node-filter-lifted)]';
+    return isHovered ? '[filter:var(--canvas-node-filter-hover)]' : '[filter:var(--canvas-node-filter-rest)]';
+};
+const BaseNodeOutline = /*#__PURE__*/ memo(({ shape, isSelected, isHovered, isDragging, shadow, status })=>{
+    const ref = useRef(null);
+    const [box, setBox] = useState({
+        width: DEFAULT_RECTANGLE_NODE_WIDTH,
+        height: DEFAULT_NODE_SIZE
+    });
+    useEffect(()=>{
+        const element = ref.current;
+        if (!element) return;
+        const measure = ()=>{
+            const { clientWidth, clientHeight } = element;
+            if (clientWidth > 0 && clientHeight > 0) setBox({
+                width: clientWidth,
+                height: clientHeight
+            });
+        };
+        measure();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, []);
+    const statusStroke = getStatusStroke(status);
+    return /*#__PURE__*/ jsx("svg", {
+        ref: ref,
+        "aria-hidden": true,
+        "data-testid": "base-node-outline",
+        className: cn('pointer-events-none absolute inset-0 -z-10 h-full w-full transition-[filter] duration-150', shadow && outlineShadow(isDragging, isHovered)),
+        viewBox: `0 0 ${box.width} ${box.height}`,
+        children: /*#__PURE__*/ jsx("path", {
+            d: pathFor(shape, box.width, box.height),
+            className: cn('fill-surface-overlay transition-[stroke,stroke-width] duration-150', statusStroke || (isSelected ? 'stroke-foreground-accent-muted' : isHovered ? 'stroke-border-hover' : 'stroke-border')),
+            strokeWidth: isSelected ? 2 : 1
+        })
+    });
+});
+BaseNodeOutline.displayName = 'BaseNodeOutline';
+export { BaseNodeOutline, getStatusStroke, pathFor };

package/dist/canvas/components/BaseNode/NodeLabel.cjs

@@ -30,10 +30,11 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const index_cjs_namespaceObject = require("../../schema/index.cjs");
 const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
-    if ('rectangle' === shape) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    if ((0, index_cjs_namespaceObject.isWideNodeShape)(shape)) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-node-part": "label",
         className: "flex flex-1 min-w-0 flex-col items-start text-left",
         children: children
@@ -62,7 +63,7 @@ const Header = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ s
         ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
         style: {
             ...style,
             ...backgroundColor ? {
@@ -77,7 +78,7 @@ const SubHeader = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((
         ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden whitespace-pre-line', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden whitespace-pre-line', (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
         style: style,
         children: children
     }));
@@ -91,7 +92,7 @@ const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         onChange: onChange,
         onKeyDown: onKeyDown,
         onBlur: onBlur,
-        className: (0, CssUtil_cjs_namespaceObject.cx)('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full px-1.5', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'py-0.5'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full px-1.5', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'py-0.5'),
         style: backgroundColor ? {
             backgroundColor
         } : void 0
@@ -210,7 +211,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name
     });
     const headerTooltipContent = labelTooltip ?? label;
     const subHeaderTooltipContent = labelTooltip ?? subLabel;
-    const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
+    const tooltipPlacement = (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 'top' : 'bottom';
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
@@ -227,7 +228,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
                         placeholder: labelPlaceholder,
-                        rows: 'rectangle' === shape ? 1 : void 0,
+                        rows: (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 1 : void 0,
                         "aria-label": "Edit node name"
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditableLabel, {
@@ -239,7 +240,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name
                         shape: shape,
                         variant: "subtext",
                         placeholder: subLabelPlaceholder,
-                        rows: 'rectangle' === shape ? 2 : void 0,
+                        rows: (0, index_cjs_namespaceObject.isWideNodeShape)(shape) ? 2 : void 0,
                         "aria-label": "Edit node description"
                     })
                 ]

package/dist/canvas/components/BaseNode/NodeLabel.d.ts

@@ -1,4 +1,4 @@
-import type { NodeShape } from '../../schema';
+import { type NodeShape } from '../../schema';
 interface BaseTextContainerProps {
     hasBottomHandles?: boolean;
     shape?: NodeShape;

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAwBxB,CAAC;AAyKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAoMD,eAAO,MAAM,SAAS,kPAnLnB,cAAc,6CAmL+B,CAAC"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/D,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAwBxB,CAAC;AAyKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAoMD,eAAO,MAAM,SAAS,kPAnLnB,cAAc,6CAmL+B,CAAC"}

package/dist/canvas/components/BaseNode/NodeLabel.js

@@ -1,10 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES } from "../../constants.js";
+import { isWideNodeShape } from "../../schema/index.js";
 import { cx } from "../../utils/CssUtil.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
-    if ('rectangle' === shape) return /*#__PURE__*/ jsx("div", {
+    if (isWideNodeShape(shape)) return /*#__PURE__*/ jsx("div", {
         "data-node-part": "label",
         className: "flex flex-1 min-w-0 flex-col items-start text-left",
         children: children
@@ -33,7 +34,7 @@ const Header = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, onDoubleClick
         ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
+        className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', isWideNodeShape(shape) ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
         style: {
             ...style,
             ...backgroundColor ? {
@@ -48,7 +49,7 @@ const SubHeader = /*#__PURE__*/ forwardRef(({ shape, onDoubleClick, children, cl
         ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden whitespace-pre-line', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
+        className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden whitespace-pre-line', isWideNodeShape(shape) ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
         style: style,
         children: children
     }));
@@ -62,7 +63,7 @@ const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, varian
         onChange: onChange,
         onKeyDown: onKeyDown,
         onBlur: onBlur,
-        className: cx('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full px-1.5', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'py-0.5'),
+        className: cx('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full px-1.5', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', isWideNodeShape(shape) ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'py-0.5'),
         style: backgroundColor ? {
             backgroundColor
         } : void 0
@@ -181,7 +182,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name
     });
     const headerTooltipContent = labelTooltip ?? label;
     const subHeaderTooltipContent = labelTooltip ?? subLabel;
-    const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
+    const tooltipPlacement = isWideNodeShape(shape) ? 'top' : 'bottom';
     return /*#__PURE__*/ jsxs(BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
@@ -198,7 +199,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
                         placeholder: labelPlaceholder,
-                        rows: 'rectangle' === shape ? 1 : void 0,
+                        rows: isWideNodeShape(shape) ? 1 : void 0,
                         "aria-label": "Edit node name"
                     }),
                     /*#__PURE__*/ jsx(EditableLabel, {
@@ -210,7 +211,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name
                         shape: shape,
                         variant: "subtext",
                         placeholder: subLabelPlaceholder,
-                        rows: 'rectangle' === shape ? 2 : void 0,
+                        rows: isWideNodeShape(shape) ? 2 : void 0,
                         "aria-label": "Edit node description"
                     })
                 ]