@uipath/apollo-react 4.6.0-pr525.f6fa0d2 → 4.6.1

package/dist/canvas/components/BaseCanvas/BaseCanvas.cjs

@@ -76,6 +76,7 @@ const BaseCanvasInnerComponent = (props)=>{
         isDarkMode: isDarkMode,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_cjs_namespaceObject.ReactFlow, {
             ...reactFlowProps,
+            colorMode: '',
             nodes: nodes,
             edges: edges,
             nodeTypes: nodeTypes,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAqB,MAAM,0CAA0C,CAAC;AAE9F,OAAO,EAIL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAmMzE,eAAO,MAAM,UAAU,EAKjB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC/D,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;CACpD,KACE,YAAY,CAAC"}
+{"version":3,"file":"BaseCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,IAAI,EACJ,IAAI,EAEL,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqMzE,eAAO,MAAM,UAAU,EAKjB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC/D,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;CACpD,KACE,YAAY,CAAC"}

package/dist/canvas/components/BaseCanvas/BaseCanvas.js

@@ -48,6 +48,7 @@ const BaseCanvasInnerComponent = (props)=>{
         isDarkMode: isDarkMode,
         children: /*#__PURE__*/ jsxs(ReactFlow, {
             ...reactFlowProps,
+            colorMode: '',
             nodes: nodes,
             edges: edges,
             nodeTypes: nodeTypes,

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

@@ -27,10 +27,11 @@ __webpack_require__.d(__webpack_exports__, {
     BaseNode: ()=>BaseNode
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../utils/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 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 icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
@@ -43,31 +44,10 @@ const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/Selecti
 const SmartHandle_cjs_namespaceObject = require("../ButtonHandle/SmartHandle.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
-const external_BaseNodeBadgeSlot_cjs_namespaceObject = require("./BaseNodeBadgeSlot.cjs");
+const external_BaseNode_styles_cjs_namespaceObject = require("./BaseNode.styles.cjs");
 const external_BaseNodeConfigContext_cjs_namespaceObject = require("./BaseNodeConfigContext.cjs");
-const external_BaseNodeContainer_cjs_namespaceObject = require("./BaseNodeContainer.cjs");
-const external_BaseNodeInnerShape_cjs_namespaceObject = require("./BaseNodeInnerShape.cjs");
-const external_BaseNodeMissingManifest_cjs_namespaceObject = require("./BaseNodeMissingManifest.cjs");
 const external_NodeLabel_cjs_namespaceObject = require("./NodeLabel.cjs");
 const selectIsConnecting = (state)=>!!state.connectionClickStartHandle;
-const getContainerWidth = (shape, width)=>{
-    const defaultWidth = 'rectangle' === 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;
-};
-const getContainerHeight = (height, hasFooter, footerVariant)=>{
-    if (hasFooter) switch(footerVariant){
-        case 'button':
-            return external_constants_cjs_namespaceObject.NODE_HEIGHT_FOOTER_BUTTON;
-        case 'single':
-            return external_constants_cjs_namespaceObject.NODE_HEIGHT_FOOTER_SINGLE;
-        case 'double':
-            return external_constants_cjs_namespaceObject.NODE_HEIGHT_FOOTER_DOUBLE;
-        default:
-            return 'auto';
-    }
-    return height || external_constants_cjs_namespaceObject.NODE_HEIGHT_DEFAULT;
-};
 const BaseNodeComponent = (props)=>{
     const { type, data, selected, id, dragging, width, height } = props;
     const { onHandleAction: onHandleActionProp, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = (0, external_BaseNodeConfigContext_cjs_namespaceObject.useBaseNodeOverrideConfig)();
@@ -79,7 +59,7 @@ const BaseNodeComponent = (props)=>{
     const originalHeightRef = (0, external_react_namespaceObject.useRef)(void 0);
     const executionState = (0, external_hooks_index_cjs_namespaceObject.useNodeExecutionState)(id);
     const validationState = (0, external_hooks_index_cjs_namespaceObject.useElementValidationStatus)(id);
-    const nodeTypeRegistry = (0, index_cjs_namespaceObject.useNodeTypeRegistry)();
+    const nodeTypeRegistry = (0, external_core_index_cjs_namespaceObject.useNodeTypeRegistry)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const isConnecting = (0, react_cjs_namespaceObject.useStore)(selectIsConnecting);
@@ -175,7 +155,7 @@ const BaseNodeComponent = (props)=>{
         statusContext
     ]);
     const computedHeight = (0, external_react_namespaceObject.useMemo)(()=>{
-        const handleSpacing = 2 * external_constants_cjs_namespaceObject.GRID_SPACING;
+        const handleSpacing = 32;
         const leftHandles = handleConfigurations.filter((config)=>config.position === react_cjs_namespaceObject.Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.length, 0);
         const rightHandles = handleConfigurations.filter((config)=>config.position === react_cjs_namespaceObject.Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.length, 0);
         const leftRightHandles = Math.max(leftHandles, rightHandles);
@@ -229,31 +209,6 @@ const BaseNodeComponent = (props)=>{
         display.subLabel
     ]);
     const displayFooter = footerComponent;
-    const hasFooter = !!displayFooter;
-    const containerWidth = getContainerWidth(displayShape, width);
-    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
-    const nodeVars = (0, external_react_namespaceObject.useMemo)(()=>{
-        const numH = 'number' == typeof containerHeight ? containerHeight : void 0;
-        const radiusBasis = 'rectangle' === displayShape ? numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : Math.min(containerWidth, numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
-        const nodeRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${radiusBasis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO}px`;
-        const effectiveH = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
-        const effectiveW = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
-        const basis = 'rectangle' === displayShape ? effectiveH : Math.min(effectiveW, effectiveH);
-        const innerRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO}px`;
-        return {
-            '--node-w': `${containerWidth}px`,
-            '--node-h': numH ? `${numH}px` : 'auto',
-            '--node-radius': nodeRadius,
-            '--inner-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO}px`,
-            '--inner-radius': innerRadius,
-            '--icon-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO}px`
-        };
-    }, [
-        containerWidth,
-        containerHeight,
-        displayShape,
-        hasFooter
-    ]);
     const interactionState = (0, external_react_namespaceObject.useMemo)(()=>{
         if (disabled) return 'disabled';
         if (dragging) return 'drag';
@@ -369,62 +324,103 @@ const BaseNodeComponent = (props)=>{
     const handleElements = useSmartHandles ? smartHandleElements : buttonHandleElements;
     if (!manifest) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: containerRef,
-        className: "relative",
-        style: nodeVars,
+        style: {
+            position: 'relative'
+        },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeMissingManifest_cjs_namespaceObject.MissingManifestNode, {
-            type: data.nodeType,
-            isSelected: selected,
-            isHovered: isHovered,
-            interactionState: interactionState
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseContainer, {
+            selected: selected,
+            shape: "square",
+            className: interactionState,
+            interactionState: interactionState,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseIconWrapper, {
+                    backgroundColor: "var(--canvas-error-background)",
+                    shape: "square",
+                    height: height,
+                    width: width ?? height,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "circle-alert",
+                        size: 32,
+                        color: "var(--canvas-error-icon)"
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {
+                    shape: "square",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseHeader, {
+                            shape: "square",
+                            children: "Manifest not found"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseSubHeader, {
+                            children: [
+                                'Node type "',
+                                type,
+                                '" is not registered'
+                            ]
+                        })
+                    ]
+                })
+            ]
         })
     });
     const nodeContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: containerRef,
-        className: "relative",
-        style: nodeVars,
+        style: {
+            position: 'relative'
+        },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNodeContainer_cjs_namespaceObject.BaseContainer, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseContainer, {
+                selected: selected,
                 shape: displayShape,
-                isSelected: selected,
-                isHovered: isHovered,
+                className: (0, index_cjs_namespaceObject.cx)(executionStatus, interactionState),
                 interactionState: interactionState,
                 executionStatus: executionStatus,
                 validationStatus: validationState?.validationStatus,
                 suggestionType: suggestionType,
-                hasFooter: hasFooter,
-                background: displayBackground,
-                loading: data.loading,
+                width: width,
+                height: height,
+                backgroundColor: displayBackground,
+                hasFooter: !!displayFooter,
+                footerVariant: displayFooterVariant,
+                "aria-busy": data.loading || void 0,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
+                    data.loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseSkeletonIcon, {
+                        "data-testid": "skeleton-icon",
+                        shape: displayShape,
+                        nodeHeight: displayFooter ? void 0 : height,
+                        nodeWidth: displayFooter ? void 0 : width ?? height
+                    }) : Icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseIconWrapper, {
+                        shape: displayShape,
                         color: displayColor,
-                        background: displayIconBackground,
-                        loading: data.loading,
-                        children: data.loading ? null : Icon
+                        backgroundColor: displayIconBackground,
+                        height: displayFooter ? void 0 : height,
+                        width: displayFooter ? void 0 : width ?? height,
+                        children: Icon
                     }),
-                    adornments?.topLeft && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeBadgeSlot_cjs_namespaceObject.BaseBadgeSlot, {
+                    adornments?.topLeft && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseBadgeSlot, {
                         position: "top-left",
                         shape: displayShape,
                         children: adornments.topLeft
                     }),
-                    adornments?.topRight && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeBadgeSlot_cjs_namespaceObject.BaseBadgeSlot, {
+                    adornments?.topRight && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseBadgeSlot, {
                         position: "top-right",
                         shape: displayShape,
                         children: adornments.topRight
                     }),
-                    adornments?.bottomRight && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeBadgeSlot_cjs_namespaceObject.BaseBadgeSlot, {
+                    adornments?.bottomRight && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseBadgeSlot, {
                         position: "bottom-right",
                         shape: displayShape,
                         children: adornments.bottomRight
                     }),
-                    adornments?.bottomLeft && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeBadgeSlot_cjs_namespaceObject.BaseBadgeSlot, {
+                    adornments?.bottomLeft && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseBadgeSlot, {
                         position: "bottom-left",
                         shape: displayShape,
                         children: adornments.bottomLeft
@@ -442,7 +438,12 @@ const BaseNodeComponent = (props)=>{
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "basis-full pt-0.5 min-w-0 overflow-hidden",
+                        style: {
+                            flexBasis: '100%',
+                            paddingTop: '2px',
+                            minWidth: 0,
+                            overflow: 'hidden'
+                        },
                         children: displayFooter
                     })
                 ]

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,EAAkB,MAAM,0CAA0C,CAAC;AAqChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAmlB1B,eAAO,MAAM,QAAQ,8CA3iBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CA2iBhB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAkChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AA+hB1B,eAAO,MAAM,QAAQ,8CAzhBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAyhBhB,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/index.js";
 import { Position, useReactFlow, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, 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 { DEFAULT_NODE_SIZE } from "../../constants.js";
 import { useNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
-import { getIcon } from "../../utils/icon-registry.js";
+import { CanvasIcon, getIcon } from "../../utils/icon-registry.js";
 import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
 import { resolveToolbar } from "../../utils/toolbar-resolver.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
@@ -15,31 +16,10 @@ import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { NodeToolbar } from "../Toolbar/index.js";
-import { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
+import { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSkeletonIcon, BaseSubHeader, BaseTextContainer } from "./BaseNode.styles.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
-import { BaseContainer } from "./BaseNodeContainer.js";
-import { BaseInnerShape } from "./BaseNodeInnerShape.js";
-import { MissingManifestNode } from "./BaseNodeMissingManifest.js";
 import { NodeLabel } from "./NodeLabel.js";
 const selectIsConnecting = (state)=>!!state.connectionClickStartHandle;
-const getContainerWidth = (shape, width)=>{
-    const defaultWidth = 'rectangle' === shape ? DEFAULT_RECTANGLE_NODE_WIDTH : DEFAULT_NODE_SIZE;
-    if (width && width !== DEFAULT_NODE_SIZE && width !== DEFAULT_RECTANGLE_NODE_WIDTH) return width;
-    return defaultWidth;
-};
-const getContainerHeight = (height, hasFooter, footerVariant)=>{
-    if (hasFooter) switch(footerVariant){
-        case 'button':
-            return NODE_HEIGHT_FOOTER_BUTTON;
-        case 'single':
-            return NODE_HEIGHT_FOOTER_SINGLE;
-        case 'double':
-            return NODE_HEIGHT_FOOTER_DOUBLE;
-        default:
-            return 'auto';
-    }
-    return height || NODE_HEIGHT_DEFAULT;
-};
 const BaseNodeComponent = (props)=>{
     const { type, data, selected, id, dragging, width, height } = props;
     const { onHandleAction: onHandleActionProp, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = useBaseNodeOverrideConfig();
@@ -147,7 +127,7 @@ const BaseNodeComponent = (props)=>{
         statusContext
     ]);
     const computedHeight = useMemo(()=>{
-        const handleSpacing = 2 * GRID_SPACING;
+        const handleSpacing = 32;
         const leftHandles = handleConfigurations.filter((config)=>config.position === Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.length, 0);
         const rightHandles = handleConfigurations.filter((config)=>config.position === Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.length, 0);
         const leftRightHandles = Math.max(leftHandles, rightHandles);
@@ -201,31 +181,6 @@ const BaseNodeComponent = (props)=>{
         display.subLabel
     ]);
     const displayFooter = footerComponent;
-    const hasFooter = !!displayFooter;
-    const containerWidth = getContainerWidth(displayShape, width);
-    const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
-    const nodeVars = useMemo(()=>{
-        const numH = 'number' == typeof containerHeight ? containerHeight : void 0;
-        const radiusBasis = 'rectangle' === displayShape ? numH ?? DEFAULT_NODE_SIZE : Math.min(containerWidth, numH ?? DEFAULT_NODE_SIZE);
-        const nodeRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${radiusBasis * NODE_CONTAINER_RADIUS_RATIO}px`;
-        const effectiveH = hasFooter ? DEFAULT_NODE_SIZE : numH ?? DEFAULT_NODE_SIZE;
-        const effectiveW = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
-        const basis = 'rectangle' === displayShape ? effectiveH : Math.min(effectiveW, effectiveH);
-        const innerRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${basis * NODE_INNER_RADIUS_RATIO}px`;
-        return {
-            '--node-w': `${containerWidth}px`,
-            '--node-h': numH ? `${numH}px` : 'auto',
-            '--node-radius': nodeRadius,
-            '--inner-size': `${basis * NODE_INNER_SHAPE_RATIO}px`,
-            '--inner-radius': innerRadius,
-            '--icon-size': `${basis * NODE_INNER_ICON_RATIO}px`
-        };
-    }, [
-        containerWidth,
-        containerHeight,
-        displayShape,
-        hasFooter
-    ]);
     const interactionState = useMemo(()=>{
         if (disabled) return 'disabled';
         if (dragging) return 'drag';
@@ -341,45 +296,86 @@ const BaseNodeComponent = (props)=>{
     const handleElements = useSmartHandles ? smartHandleElements : buttonHandleElements;
     if (!manifest) return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
-        className: "relative",
-        style: nodeVars,
+        style: {
+            position: 'relative'
+        },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
-        children: /*#__PURE__*/ jsx(MissingManifestNode, {
-            type: data.nodeType,
-            isSelected: selected,
-            isHovered: isHovered,
-            interactionState: interactionState
+        children: /*#__PURE__*/ jsxs(BaseContainer, {
+            selected: selected,
+            shape: "square",
+            className: interactionState,
+            interactionState: interactionState,
+            children: [
+                /*#__PURE__*/ jsx(BaseIconWrapper, {
+                    backgroundColor: "var(--canvas-error-background)",
+                    shape: "square",
+                    height: height,
+                    width: width ?? height,
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "circle-alert",
+                        size: 32,
+                        color: "var(--canvas-error-icon)"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(BaseTextContainer, {
+                    shape: "square",
+                    children: [
+                        /*#__PURE__*/ jsx(BaseHeader, {
+                            shape: "square",
+                            children: "Manifest not found"
+                        }),
+                        /*#__PURE__*/ jsxs(BaseSubHeader, {
+                            children: [
+                                'Node type "',
+                                type,
+                                '" is not registered'
+                            ]
+                        })
+                    ]
+                })
+            ]
         })
     });
     const nodeContent = /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
-        className: "relative",
-        style: nodeVars,
+        style: {
+            position: 'relative'
+        },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
         onBlur: handleBlur,
         children: [
             /*#__PURE__*/ jsxs(BaseContainer, {
+                selected: selected,
                 shape: displayShape,
-                isSelected: selected,
-                isHovered: isHovered,
+                className: cx(executionStatus, interactionState),
                 interactionState: interactionState,
                 executionStatus: executionStatus,
                 validationStatus: validationState?.validationStatus,
                 suggestionType: suggestionType,
-                hasFooter: hasFooter,
-                background: displayBackground,
-                loading: data.loading,
+                width: width,
+                height: height,
+                backgroundColor: displayBackground,
+                hasFooter: !!displayFooter,
+                footerVariant: displayFooterVariant,
+                "aria-busy": data.loading || void 0,
                 children: [
-                    /*#__PURE__*/ jsx(BaseInnerShape, {
+                    data.loading ? /*#__PURE__*/ jsx(BaseSkeletonIcon, {
+                        "data-testid": "skeleton-icon",
+                        shape: displayShape,
+                        nodeHeight: displayFooter ? void 0 : height,
+                        nodeWidth: displayFooter ? void 0 : width ?? height
+                    }) : Icon && /*#__PURE__*/ jsx(BaseIconWrapper, {
+                        shape: displayShape,
                         color: displayColor,
-                        background: displayIconBackground,
-                        loading: data.loading,
-                        children: data.loading ? null : Icon
+                        backgroundColor: displayIconBackground,
+                        height: displayFooter ? void 0 : height,
+                        width: displayFooter ? void 0 : width ?? height,
+                        children: Icon
                     }),
                     adornments?.topLeft && /*#__PURE__*/ jsx(BaseBadgeSlot, {
                         position: "top-left",
@@ -414,7 +410,12 @@ const BaseNodeComponent = (props)=>{
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ jsx("div", {
-                        className: "basis-full pt-0.5 min-w-0 overflow-hidden",
+                        style: {
+                            flexBasis: '100%',
+                            paddingTop: '2px',
+                            minWidth: 0,
+                            overflow: 'hidden'
+                        },
                         children: displayFooter
                     })
                 ]