@uipath/apollo-react 4.5.4 → 4.6.0-pr525.51f590d

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

@@ -1,7 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import { NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES } from "../../constants.js";
+import { cx } from "../../utils/CssUtil.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
-import { BaseHeader, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder } from "./BaseNode.styles.js";
+const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
+    if ('rectangle' === shape) return /*#__PURE__*/ jsx("div", {
+        className: "flex flex-1 min-w-0 flex-col items-start text-left",
+        children: children
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: cx('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
+        style: {
+            bottom: hasBottomHandles ? NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : NODE_TEXT_BOTTOM_OFFSET
+        },
+        children: children
+    });
+};
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
     return /*#__PURE__*/ jsx(CanvasTooltip, {
@@ -12,6 +26,42 @@ const ConditionalTooltip = ({ content, children })=>{
         children: children
     });
 };
+const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
+        "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'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0,
+        children: children
+    });
+const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
+        "data-testid": dataTestId,
+        onDoubleClick: onDoubleClick,
+        className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        children: children
+    });
+const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
+        ref: ref,
+        value: value,
+        placeholder: placeholder,
+        rows: rows,
+        "aria-label": ariaLabel,
+        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', '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 && 'px-1.5 py-0.5'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0
+    }));
+EditableLabel.displayName = 'EditableLabel';
+const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ jsx("div", {
+        onDoubleClick: onDoubleClick,
+        className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
+        "aria-description": "Add node label",
+        "data-testid": "empty-label-placeholder"
+    });
 const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
     const [isEditing, setIsEditing] = useState(false);
     const [localLabel, setLocalLabel] = useState('');
@@ -22,7 +72,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     const handleSave = useCallback(()=>{
         setIsEditing(false);
         setFocusTarget(null);
-        if (localLabel !== label || localSubLabel !== subLabel) onChange({
+        if (localLabel !== label || localSubLabel !== subLabel) onChange?.({
             label: localLabel,
             subLabel: localSubLabel
         });
@@ -101,11 +151,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ jsx(EmptyLabelPlaceholder, {
-                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
-                className: "nodrag nowheel",
-                role: "button",
-                "aria-label": "Add node label",
-                "data-testid": "empty-label-placeholder"
+                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment
         ]
@@ -125,10 +171,8 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         shape: shape,
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
-                        className: "nodrag nowheel",
                         placeholder: "Name",
                         rows: 'rectangle' === shape ? 1 : void 0,
-                        role: "textbox",
                         "aria-label": "Edit node name"
                     }),
                     /*#__PURE__*/ jsx(EditableLabel, {
@@ -139,24 +183,22 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         onBlur: handleBlur,
                         shape: shape,
                         variant: "subtext",
-                        className: "nodrag nowheel",
                         placeholder: "Description",
                         rows: 'rectangle' === shape ? 2 : void 0,
-                        role: "textbox",
                         "aria-label": "Edit node description"
                     })
                 ]
             }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
                 content: labelTooltip,
                 children: [
-                    /*#__PURE__*/ jsx(BaseHeader, {
+                    /*#__PURE__*/ jsx(Header, {
                         shape: shape,
                         backgroundColor: labelBackgroundColor,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
                         "data-testid": "node-label",
                         children: label
                     }),
-                    subLabel && /*#__PURE__*/ jsx(BaseSubHeader, {
+                    subLabel && /*#__PURE__*/ jsx(SubHeader, {
                         shape: shape,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
                         "data-testid": "node-sublabel",
@@ -169,4 +211,4 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     });
 };
 const NodeLabel = /*#__PURE__*/ memo(NodeLabelInternal);
-export { NodeLabel };
+export { BaseTextContainer, NodeLabel };

package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs

@@ -40,19 +40,16 @@ const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const isHorizontalEdge = (position)=>position === react_cjs_namespaceObject.Position.Top || position === react_cjs_namespaceObject.Position.Bottom;
 const isVerticalEdge = (position)=>position === react_cjs_namespaceObject.Position.Left || position === react_cjs_namespaceObject.Position.Right;
 const snapToGrid = (value, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING)=>Math.round(value / gridSize) * gridSize;
-const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING)=>{
+const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING / 2)=>{
     if (0 === numHandles) return [];
     if (nodeSize <= 0) return [];
     const idealSpacing = nodeSize / (numHandles + 1);
-    const gridAlignedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
+    const roundedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
+    const gridAlignedSpacing = Math.max(gridSize, roundedSpacing);
     const totalSpan = (numHandles - 1) * gridAlignedSpacing;
     const startPosition = (nodeSize - totalSpan) / 2;
     const positions = [];
-    for(let i = 0; i < numHandles; i++){
-        const position = startPosition + i * gridAlignedSpacing;
-        const snappedPosition = snapToGrid(position, gridSize);
-        positions.push(snappedPosition);
-    }
+    for(let i = 0; i < numHandles; i++)positions.push(startPosition + i * gridAlignedSpacing);
     return positions;
 };
 const pixelToPercent = (pixelPosition, nodeSize)=>{

package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonHandleStyleUtils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/ButtonHandleStyleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAEpE,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAoB/F,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,WAAU,MAAqB,KAAG,MAE3E,CAAC;AASF,eAAO,MAAM,mCAAmC,GAC9C,UAAU,MAAM,EAChB,YAAY,MAAM,EAClB,WAAU,MAAqB,KAC9B,MAAM,EAuBR,CAAC;AAQF,eAAO,MAAM,cAAc,GAAI,eAAe,MAAM,EAAE,UAAU,MAAM,KAAG,MAGxE,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,wCAIxC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yCAIzC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,uEAMlC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,uEAMrC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,sEAMnC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,sEAMpC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,yCAGhC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;CAChE,KAAG,MAgBH,CAAC"}
+{"version":3,"file":"ButtonHandleStyleUtils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/ButtonHandleStyleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAEpE,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAoB/F,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,WAAU,MAAqB,KAAG,MAE3E,CAAC;AAmBF,eAAO,MAAM,mCAAmC,GAC9C,UAAU,MAAM,EAChB,YAAY,MAAM,EAClB,WAAU,MAAyB,KAClC,MAAM,EA4BR,CAAC;AAQF,eAAO,MAAM,cAAc,GAAI,eAAe,MAAM,EAAE,UAAU,MAAM,KAAG,MAGxE,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,wCAIxC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yCAIzC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,uEAMlC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,uEAMrC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,sEAMnC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,sEAMpC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,yCAGhC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;CAChE,KAAG,MAgBH,CAAC"}

package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js

@@ -3,19 +3,16 @@ import { GRID_SPACING } from "../../constants.js";
 const isHorizontalEdge = (position)=>position === Position.Top || position === Position.Bottom;
 const isVerticalEdge = (position)=>position === Position.Left || position === Position.Right;
 const snapToGrid = (value, gridSize = GRID_SPACING)=>Math.round(value / gridSize) * gridSize;
-const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = GRID_SPACING)=>{
+const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = GRID_SPACING / 2)=>{
     if (0 === numHandles) return [];
     if (nodeSize <= 0) return [];
     const idealSpacing = nodeSize / (numHandles + 1);
-    const gridAlignedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
+    const roundedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
+    const gridAlignedSpacing = Math.max(gridSize, roundedSpacing);
     const totalSpan = (numHandles - 1) * gridAlignedSpacing;
     const startPosition = (nodeSize - totalSpan) / 2;
     const positions = [];
-    for(let i = 0; i < numHandles; i++){
-        const position = startPosition + i * gridAlignedSpacing;
-        const snappedPosition = snapToGrid(position, gridSize);
-        positions.push(snappedPosition);
-    }
+    for(let i = 0; i < numHandles; i++)positions.push(startPosition + i * gridAlignedSpacing);
     return positions;
 };
 const pixelToPercent = (pixelPosition, nodeSize)=>{

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs

@@ -60,13 +60,14 @@ const PanelContainer = styled_default().div`
   transition: opacity 0.2s ease-in-out;
   border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
-function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
+function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
         open,
         nodeId,
         anchorRect,
         placement,
-        offset
+        offset,
+        fallbackPlacement
     });
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts

@@ -7,6 +7,7 @@ export type FloatingCanvasPanelProps = {
     anchorRect?: AnchorRect;
     placement?: Placement;
     offset?: number;
+    fallbackPlacement?: 'none' | 'start' | 'end';
     isPinned?: boolean;
     useFixedPosition?: boolean;
     portalToBody?: boolean;
@@ -19,5 +20,5 @@ export type FloatingCanvasPanelProps = {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 };
-export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave, }: FloatingCanvasPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, fallbackPlacement, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave, }: FloatingCanvasPanelProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FloatingCanvasPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA4I1B"}
+{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA6I1B"}

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js

@@ -22,13 +22,14 @@ const PanelContainer = styled.div`
   transition: opacity 0.2s ease-in-out;
   border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
 `;
-function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
+function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = useFloatingPosition({
         open,
         nodeId,
         anchorRect,
         placement,
-        offset
+        offset,
+        fallbackPlacement
     });
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.cjs

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const react_namespaceObject = require("@floating-ui/react");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
-function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20 }) {
+function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = (0, external_react_namespaceObject.useRef)(null);
     const internalNode = (0, react_cjs_namespaceObject.useInternalNode)(nodeId || '');
     const computedAnchor = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -56,7 +56,9 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
         open: !!open && !!computedAnchor,
         middleware: [
             (0, react_namespaceObject.offset)(offsetValue),
-            (0, react_namespaceObject.flip)()
+            (0, react_namespaceObject.flip)({
+                fallbackAxisSideDirection: fallbackPlacement
+            })
         ],
         whileElementsMounted: react_namespaceObject.autoUpdate
     });

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts

@@ -12,6 +12,7 @@ export interface UseFloatingPositionOptions {
     anchorRect?: AnchorRect;
     placement?: Placement;
     offset?: number;
+    fallbackPlacement?: 'none' | 'start' | 'end';
 }
 export interface UseFloatingPositionReturn {
     computedAnchor: AnchorRect | null;
@@ -22,5 +23,5 @@ export interface UseFloatingPositionReturn {
     };
     mergedReferenceRef: ((instance: Element | null) => void) | null;
 }
-export declare function useFloatingPosition({ open, nodeId, anchorRect, placement, offset: offsetValue, }: UseFloatingPositionOptions): UseFloatingPositionReturn;
+export declare function useFloatingPosition({ open, nodeId, anchorRect, placement, offset: offsetValue, fallbackPlacement, }: UseFloatingPositionOptions): UseFloatingPositionReturn;
 //# sourceMappingURL=useFloatingPosition.d.ts.map

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAA8B,MAAM,OAAO,CAAC;AAEzF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,GACzB,EAAE,0BAA0B,GAAG,yBAAyB,CA8CxD"}
+{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAA8B,MAAM,OAAO,CAAC;AAEzF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,EACxB,iBAA0B,GAC3B,EAAE,0BAA0B,GAAG,yBAAyB,CA8CxD"}

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.js

@@ -1,7 +1,7 @@
 import { autoUpdate, flip, offset, useFloating, useMergeRefs } from "@floating-ui/react";
 import { useInternalNode } from "../../xyflow/react.js";
 import { useEffect, useMemo, useRef } from "react";
-function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20 }) {
+function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = useRef(null);
     const internalNode = useInternalNode(nodeId || '');
     const computedAnchor = useMemo(()=>{
@@ -28,7 +28,9 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
         open: !!open && !!computedAnchor,
         middleware: [
             offset(offsetValue),
-            flip()
+            flip({
+                fallbackAxisSideDirection: fallbackPlacement
+            })
         ],
         whileElementsMounted: autoUpdate
     });

package/dist/canvas/constants.cjs

@@ -26,7 +26,22 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     CANVAS_COMPACT_BREAKPOINT: ()=>CANVAS_COMPACT_BREAKPOINT,
     DEFAULT_NODE_SIZE: ()=>DEFAULT_NODE_SIZE,
+    DEFAULT_RECTANGLE_NODE_WIDTH: ()=>DEFAULT_RECTANGLE_NODE_WIDTH,
     GRID_SPACING: ()=>GRID_SPACING,
+    NODE_BADGE_INSET_CIRCLE: ()=>NODE_BADGE_INSET_CIRCLE,
+    NODE_BADGE_INSET_SQUARE: ()=>NODE_BADGE_INSET_SQUARE,
+    NODE_BADGE_SIZE: ()=>NODE_BADGE_SIZE,
+    NODE_CONTAINER_RADIUS_RATIO: ()=>NODE_CONTAINER_RADIUS_RATIO,
+    NODE_ERROR_ICON_SIZE: ()=>NODE_ERROR_ICON_SIZE,
+    NODE_HEIGHT_DEFAULT: ()=>NODE_HEIGHT_DEFAULT,
+    NODE_HEIGHT_FOOTER_BUTTON: ()=>NODE_HEIGHT_FOOTER_BUTTON,
+    NODE_HEIGHT_FOOTER_DOUBLE: ()=>NODE_HEIGHT_FOOTER_DOUBLE,
+    NODE_HEIGHT_FOOTER_SINGLE: ()=>NODE_HEIGHT_FOOTER_SINGLE,
+    NODE_INNER_ICON_RATIO: ()=>NODE_INNER_ICON_RATIO,
+    NODE_INNER_RADIUS_RATIO: ()=>NODE_INNER_RADIUS_RATIO,
+    NODE_INNER_SHAPE_RATIO: ()=>NODE_INNER_SHAPE_RATIO,
+    NODE_TEXT_BOTTOM_OFFSET: ()=>NODE_TEXT_BOTTOM_OFFSET,
+    NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES: ()=>NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES,
     PREVIEW_EDGE_ID: ()=>PREVIEW_EDGE_ID,
     PREVIEW_NODE_ID: ()=>PREVIEW_NODE_ID
 });
@@ -35,15 +50,60 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
 const CANVAS_COMPACT_BREAKPOINT = 600;
+const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
+const NODE_HEIGHT_DEFAULT = 6 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_SPACING;
+const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
+const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
+const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
+const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
+const NODE_ERROR_ICON_SIZE = 40;
+const NODE_TEXT_BOTTOM_OFFSET = -8;
+const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
+const NODE_BADGE_SIZE = 20;
+const NODE_BADGE_INSET_SQUARE = 6;
+const NODE_BADGE_INSET_CIRCLE = 12;
 exports.CANVAS_COMPACT_BREAKPOINT = __webpack_exports__.CANVAS_COMPACT_BREAKPOINT;
 exports.DEFAULT_NODE_SIZE = __webpack_exports__.DEFAULT_NODE_SIZE;
+exports.DEFAULT_RECTANGLE_NODE_WIDTH = __webpack_exports__.DEFAULT_RECTANGLE_NODE_WIDTH;
 exports.GRID_SPACING = __webpack_exports__.GRID_SPACING;
+exports.NODE_BADGE_INSET_CIRCLE = __webpack_exports__.NODE_BADGE_INSET_CIRCLE;
+exports.NODE_BADGE_INSET_SQUARE = __webpack_exports__.NODE_BADGE_INSET_SQUARE;
+exports.NODE_BADGE_SIZE = __webpack_exports__.NODE_BADGE_SIZE;
+exports.NODE_CONTAINER_RADIUS_RATIO = __webpack_exports__.NODE_CONTAINER_RADIUS_RATIO;
+exports.NODE_ERROR_ICON_SIZE = __webpack_exports__.NODE_ERROR_ICON_SIZE;
+exports.NODE_HEIGHT_DEFAULT = __webpack_exports__.NODE_HEIGHT_DEFAULT;
+exports.NODE_HEIGHT_FOOTER_BUTTON = __webpack_exports__.NODE_HEIGHT_FOOTER_BUTTON;
+exports.NODE_HEIGHT_FOOTER_DOUBLE = __webpack_exports__.NODE_HEIGHT_FOOTER_DOUBLE;
+exports.NODE_HEIGHT_FOOTER_SINGLE = __webpack_exports__.NODE_HEIGHT_FOOTER_SINGLE;
+exports.NODE_INNER_ICON_RATIO = __webpack_exports__.NODE_INNER_ICON_RATIO;
+exports.NODE_INNER_RADIUS_RATIO = __webpack_exports__.NODE_INNER_RADIUS_RATIO;
+exports.NODE_INNER_SHAPE_RATIO = __webpack_exports__.NODE_INNER_SHAPE_RATIO;
+exports.NODE_TEXT_BOTTOM_OFFSET = __webpack_exports__.NODE_TEXT_BOTTOM_OFFSET;
+exports.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = __webpack_exports__.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES;
 exports.PREVIEW_EDGE_ID = __webpack_exports__.PREVIEW_EDGE_ID;
 exports.PREVIEW_NODE_ID = __webpack_exports__.PREVIEW_NODE_ID;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CANVAS_COMPACT_BREAKPOINT",
     "DEFAULT_NODE_SIZE",
+    "DEFAULT_RECTANGLE_NODE_WIDTH",
     "GRID_SPACING",
+    "NODE_BADGE_INSET_CIRCLE",
+    "NODE_BADGE_INSET_SQUARE",
+    "NODE_BADGE_SIZE",
+    "NODE_CONTAINER_RADIUS_RATIO",
+    "NODE_ERROR_ICON_SIZE",
+    "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",
+    "NODE_TEXT_BOTTOM_OFFSET",
+    "NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES",
     "PREVIEW_EDGE_ID",
     "PREVIEW_NODE_ID"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/canvas/constants.d.ts

@@ -3,4 +3,19 @@ export declare const PREVIEW_EDGE_ID = "preview-edge-id";
 export declare const DEFAULT_NODE_SIZE = 96;
 export declare const GRID_SPACING = 16;
 export declare const CANVAS_COMPACT_BREAKPOINT = 600;
+export declare const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
+export declare const NODE_HEIGHT_DEFAULT: number;
+export declare const NODE_HEIGHT_FOOTER_BUTTON: number;
+export declare const NODE_HEIGHT_FOOTER_SINGLE: number;
+export declare const NODE_HEIGHT_FOOTER_DOUBLE: number;
+export declare const NODE_CONTAINER_RADIUS_RATIO: number;
+export declare const NODE_INNER_SHAPE_RATIO: number;
+export declare const NODE_INNER_ICON_RATIO: number;
+export declare const NODE_INNER_RADIUS_RATIO: number;
+export declare const NODE_ERROR_ICON_SIZE = 40;
+export declare const NODE_TEXT_BOTTOM_OFFSET = -8;
+export declare const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
+export declare const NODE_BADGE_SIZE = 20;
+export declare const NODE_BADGE_INSET_SQUARE = 6;
+export declare const NODE_BADGE_INSET_CIRCLE = 12;
 //# sourceMappingURL=constants.d.ts.map

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAG9D,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}

package/dist/canvas/constants.js

@@ -3,4 +3,19 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
 const CANVAS_COMPACT_BREAKPOINT = 600;
-export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID };
+const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
+const NODE_HEIGHT_DEFAULT = 6 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_SPACING;
+const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
+const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
+const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
+const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
+const NODE_ERROR_ICON_SIZE = 40;
+const NODE_TEXT_BOTTOM_OFFSET = -8;
+const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
+const NODE_BADGE_SIZE = 20;
+const NODE_BADGE_INSET_SQUARE = 6;
+const NODE_BADGE_INSET_CIRCLE = 12;
+export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_ERROR_ICON_SIZE, 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, NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES, PREVIEW_EDGE_ID, PREVIEW_NODE_ID };

package/dist/canvas/index.cjs

@@ -24,6 +24,9 @@ var __webpack_modules__ = {
     "./schema" (module) {
         module.exports = require("./schema/index.cjs");
     },
+    "./styles/reactflow-reset.css" (module) {
+        module.exports = require("./styles/reactflow-reset.css");
+    },
     "./styles/variables.css" (module) {
         module.exports = require("./styles/variables.css");
     },
@@ -84,86 +87,87 @@ var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
-        Icons: ()=>_icons__rspack_import_6
+        Icons: ()=>_icons__rspack_import_7
     });
     __webpack_require__("./styles/variables.css");
-    var _components__rspack_import_1 = __webpack_require__("./components");
+    __webpack_require__("./styles/reactflow-reset.css");
+    var _components__rspack_import_2 = __webpack_require__("./components");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _components__rspack_import_1)if ([
+    for(const __rspack_import_key in _components__rspack_import_2)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_components__rspack_import_1[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_components__rspack_import_2[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _constants__rspack_import_2 = __webpack_require__("./constants");
+    var _constants__rspack_import_3 = __webpack_require__("./constants");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _constants__rspack_import_2)if ([
+    for(const __rspack_import_key in _constants__rspack_import_3)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_constants__rspack_import_2[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_constants__rspack_import_3[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _controls__rspack_import_3 = __webpack_require__("./controls");
+    var _controls__rspack_import_4 = __webpack_require__("./controls");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _controls__rspack_import_3)if ([
+    for(const __rspack_import_key in _controls__rspack_import_4)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_controls__rspack_import_3[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_controls__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _core__rspack_import_4 = __webpack_require__("./core");
+    var _core__rspack_import_5 = __webpack_require__("./core");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _core__rspack_import_4)if ([
+    for(const __rspack_import_key in _core__rspack_import_5)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_core__rspack_import_4[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_core__rspack_import_5[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hooks__rspack_import_5 = __webpack_require__("./hooks");
+    var _hooks__rspack_import_6 = __webpack_require__("./hooks");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _hooks__rspack_import_5)if ([
+    for(const __rspack_import_key in _hooks__rspack_import_6)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hooks__rspack_import_5[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hooks__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _icons__rspack_import_6 = __webpack_require__("./icons");
-    var _layouts__rspack_import_7 = __webpack_require__("./layouts");
+    var _icons__rspack_import_7 = __webpack_require__("./icons");
+    var _layouts__rspack_import_8 = __webpack_require__("./layouts");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _layouts__rspack_import_7)if ([
+    for(const __rspack_import_key in _layouts__rspack_import_8)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_layouts__rspack_import_7[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_layouts__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _schema__rspack_import_8 = __webpack_require__("./schema");
+    var _schema__rspack_import_9 = __webpack_require__("./schema");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _schema__rspack_import_8)if ([
+    for(const __rspack_import_key in _schema__rspack_import_9)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_schema__rspack_import_8[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_schema__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _types__rspack_import_9 = __webpack_require__("./types");
+    var _types__rspack_import_10 = __webpack_require__("./types");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _types__rspack_import_9)if ([
+    for(const __rspack_import_key in _types__rspack_import_10)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types__rspack_import_9[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _types_execution__rspack_import_10 = __webpack_require__("./types/execution");
+    var _types_execution__rspack_import_11 = __webpack_require__("./types/execution");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _types_execution__rspack_import_10)if ([
+    for(const __rspack_import_key in _types_execution__rspack_import_11)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types_execution__rspack_import_10[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types_execution__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _types_validation__rspack_import_11 = __webpack_require__("./types/validation");
+    var _types_validation__rspack_import_12 = __webpack_require__("./types/validation");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _types_validation__rspack_import_11)if ([
+    for(const __rspack_import_key in _types_validation__rspack_import_12)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types_validation__rspack_import_11[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types_validation__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _utils__rspack_import_12 = __webpack_require__("./utils");
+    var _utils__rspack_import_13 = __webpack_require__("./utils");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _utils__rspack_import_12)if ([
+    for(const __rspack_import_key in _utils__rspack_import_13)if ([
         "Icons",
         "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_utils__rspack_import_12[__rspack_import_key];
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_utils__rspack_import_13[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
 })();
 exports.Icons = __webpack_exports__.Icons;

package/dist/canvas/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/variables.css';
+import './styles/reactflow-reset.css';
 export * from './components';
 export * from './constants';
 export * from './controls';

package/dist/canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAEhC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AAEtC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}

package/dist/canvas/index.js

@@ -1,4 +1,5 @@
 import "./styles/variables.css";
+import "./styles/reactflow-reset.css";
 export * from "./components/index.js";
 export * from "./constants.js";
 export * from "./controls/index.js";

package/dist/canvas/styles/reactflow-reset.css

@@ -0,0 +1,12 @@
+.react-flow__node-default, .react-flow__node-default.selectable:hover, .react-flow__node-default.selectable.selected, .react-flow__node-default.selectable:focus, .react-flow__node-default.selectable:focus-visible {
+  width: auto !important;
+  color: inherit !important;
+  text-align: inherit !important;
+  font-size: inherit !important;
+  box-shadow: none !important;
+  background: none !important;
+  border: none !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+}
+