@uipath/apollo-react 4.32.1 → 4.33.0

package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs

@@ -184,6 +184,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         nodeId: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
         placement: "right-start",
         offset: external_constants_cjs_namespaceObject.FLOATING_CANVAS_PANEL_OFFSET,
+        scrollableContent: !!CustomPanel,
         children: CustomPanel ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CustomPanel, {
             onNodeSelect: (item)=>handleNodeSelect(item),
             onClose: handleClose

package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2NxD,CAAC"}
+{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8NxD,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodeManager.js

@@ -156,6 +156,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         nodeId: PREVIEW_NODE_ID,
         placement: "right-start",
         offset: FLOATING_CANVAS_PANEL_OFFSET,
+        scrollableContent: !!CustomPanel,
         children: CustomPanel ? /*#__PURE__*/ jsx(CustomPanel, {
             onNodeSelect: (item)=>handleNodeSelect(item),
             onClose: handleClose

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.cjs

@@ -0,0 +1,66 @@
+"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__, {
+    CANVAS_MODE_TOOLBAR_HEIGHT: ()=>CANVAS_MODE_TOOLBAR_HEIGHT,
+    CountBadge: ()=>CanvasModeToolbar_CountBadge,
+    CanvasModeToolbar: ()=>CanvasModeToolbar_CanvasModeToolbar,
+    TOOLBAR_ICON_BUTTON_CLASS: ()=>TOOLBAR_ICON_BUTTON_CLASS
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const CANVAS_MODE_TOOLBAR_HEIGHT = 48;
+const TOOLBAR_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-5 [&_svg]:transition-all hover:[&_svg]:size-6 disabled:hover:[&_svg]:size-5';
+const CanvasModeToolbar_CountBadge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ count, variant = 'default' }) {
+    if (count <= 0) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: `absolute -top-1 -right-1 min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full flex items-center justify-center ${'destructive' === variant ? 'bg-destructive text-destructive-foreground' : 'bg-muted text-muted-foreground'}`,
+        children: count
+    });
+});
+const CanvasModeToolbar_CanvasModeToolbar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ children, className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Row, {
+        "data-testid": "canvas-toolbar",
+        className: (0, apollo_wind_namespaceObject.cn)('gap-2 items-center rounded-2xl border border-border-subtle bg-surface-raised text-foreground px-2.5 backdrop-blur-sm shadow-lg', className),
+        style: {
+            height: CANVAS_MODE_TOOLBAR_HEIGHT
+        },
+        children: children
+    });
+});
+exports.CANVAS_MODE_TOOLBAR_HEIGHT = __webpack_exports__.CANVAS_MODE_TOOLBAR_HEIGHT;
+exports.CanvasModeToolbar = __webpack_exports__.CanvasModeToolbar;
+exports.CountBadge = __webpack_exports__.CountBadge;
+exports.TOOLBAR_ICON_BUTTON_CLASS = __webpack_exports__.TOOLBAR_ICON_BUTTON_CLASS;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_MODE_TOOLBAR_HEIGHT",
+    "CanvasModeToolbar",
+    "CountBadge",
+    "TOOLBAR_ICON_BUTTON_CLASS"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export declare const CANVAS_MODE_TOOLBAR_HEIGHT = 48;
+export declare const TOOLBAR_ICON_BUTTON_CLASS = "text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-5 [&_svg]:transition-all hover:[&_svg]:size-6 disabled:hover:[&_svg]:size-5";
+export declare const CountBadge: import("react").NamedExoticComponent<{
+    count: number;
+    variant?: "default" | "destructive";
+}>;
+export interface CanvasModeToolbarProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare const CanvasModeToolbar: import("react").NamedExoticComponent<CanvasModeToolbarProps>;
+//# sourceMappingURL=CanvasModeToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasModeToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasModeToolbar/CanvasModeToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,eAAO,MAAM,yBAAyB,gKACyH,CAAC;AAMhK,eAAO,MAAM,UAAU;WAId,MAAM;cACH,SAAS,GAAG,aAAa;EAcnC,CAAC;AAMH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,iBAAiB,8DAgB5B,CAAC"}

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Row, cn } from "@uipath/apollo-wind";
+const CANVAS_MODE_TOOLBAR_HEIGHT = 48;
+const TOOLBAR_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-5 [&_svg]:transition-all hover:[&_svg]:size-6 disabled:hover:[&_svg]:size-5';
+const CanvasModeToolbar_CountBadge = /*#__PURE__*/ memo(function({ count, variant = 'default' }) {
+    if (count <= 0) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: `absolute -top-1 -right-1 min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full flex items-center justify-center ${'destructive' === variant ? 'bg-destructive text-destructive-foreground' : 'bg-muted text-muted-foreground'}`,
+        children: count
+    });
+});
+const CanvasModeToolbar_CanvasModeToolbar = /*#__PURE__*/ memo(function({ children, className }) {
+    return /*#__PURE__*/ jsx(Row, {
+        "data-testid": "canvas-toolbar",
+        className: cn('gap-2 items-center rounded-2xl border border-border-subtle bg-surface-raised text-foreground px-2.5 backdrop-blur-sm shadow-lg', className),
+        style: {
+            height: CANVAS_MODE_TOOLBAR_HEIGHT
+        },
+        children: children
+    });
+});
+export { CANVAS_MODE_TOOLBAR_HEIGHT, CanvasModeToolbar_CanvasModeToolbar as CanvasModeToolbar, CanvasModeToolbar_CountBadge as CountBadge, TOOLBAR_ICON_BUTTON_CLASS };

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__);
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.d.ts

@@ -0,0 +1,10 @@
+export type CanvasMode = 'design' | 'debug' | 'evaluate';
+export interface DebugControls {
+    isInitiated?: boolean;
+    status?: string;
+    onStep?: () => void;
+    onContinue?: () => void;
+    onRestart?: () => void;
+    onStop?: () => void;
+}
+//# sourceMappingURL=CanvasModeToolbar.types.d.ts.map

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasModeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/dist/canvas/components/CanvasModeToolbar/index.cjs

@@ -0,0 +1,45 @@
+"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__, {
+    CANVAS_MODE_TOOLBAR_HEIGHT: ()=>external_CanvasModeToolbar_cjs_namespaceObject.CANVAS_MODE_TOOLBAR_HEIGHT,
+    CountBadge: ()=>external_CanvasModeToolbar_cjs_namespaceObject.CountBadge,
+    CanvasModeToolbar: ()=>external_CanvasModeToolbar_cjs_namespaceObject.CanvasModeToolbar,
+    TOOLBAR_ICON_BUTTON_CLASS: ()=>external_CanvasModeToolbar_cjs_namespaceObject.TOOLBAR_ICON_BUTTON_CLASS
+});
+const external_CanvasModeToolbar_cjs_namespaceObject = require("./CanvasModeToolbar.cjs");
+exports.CANVAS_MODE_TOOLBAR_HEIGHT = __webpack_exports__.CANVAS_MODE_TOOLBAR_HEIGHT;
+exports.CanvasModeToolbar = __webpack_exports__.CanvasModeToolbar;
+exports.CountBadge = __webpack_exports__.CountBadge;
+exports.TOOLBAR_ICON_BUTTON_CLASS = __webpack_exports__.TOOLBAR_ICON_BUTTON_CLASS;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_MODE_TOOLBAR_HEIGHT",
+    "CanvasModeToolbar",
+    "CountBadge",
+    "TOOLBAR_ICON_BUTTON_CLASS"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasModeToolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { CanvasModeToolbar, CountBadge, CANVAS_MODE_TOOLBAR_HEIGHT, TOOLBAR_ICON_BUTTON_CLASS, } from './CanvasModeToolbar';
+export type { CanvasModeToolbarProps } from './CanvasModeToolbar';
+export type { CanvasMode, DebugControls } from './CanvasModeToolbar.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasModeToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/canvas/components/CanvasModeToolbar/index.js

@@ -0,0 +1,2 @@
+import { CANVAS_MODE_TOOLBAR_HEIGHT, CanvasModeToolbar, CountBadge, TOOLBAR_ICON_BUTTON_CLASS } from "./CanvasModeToolbar.js";
+export { CANVAS_MODE_TOOLBAR_HEIGHT, CanvasModeToolbar, CountBadge, TOOLBAR_ICON_BUTTON_CLASS };

package/dist/canvas/components/CanvasZoomControls/CanvasZoomControls.cjs

@@ -0,0 +1,120 @@
+"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__, {
+    CanvasZoomControls: ()=>CanvasZoomControls_CanvasZoomControls
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_ToolbarButton_cjs_namespaceObject = require("../ToolbarButton.cjs");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const ZOOM_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-[18px] [&_svg]:transition-all hover:[&_svg]:size-[22px] disabled:hover:[&_svg]:size-[18px]';
+const CanvasZoomControls_CanvasZoomControls = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(/*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ orientation = 'vertical', fitViewOptions, zoomInOptions, zoomOutOptions, onOrganize, onFitView }, ref) {
+    const { zoomIn, zoomOut, fitView } = (0, react_cjs_namespaceObject.useReactFlow)();
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const isVertical = 'vertical' === orientation;
+    const tooltipSide = isVertical ? 'left' : 'top';
+    const handleZoomIn = (0, external_react_namespaceObject.useCallback)(()=>{
+        zoomIn(zoomInOptions);
+    }, [
+        zoomIn,
+        zoomInOptions
+    ]);
+    const handleZoomOut = (0, external_react_namespaceObject.useCallback)(()=>{
+        zoomOut(zoomOutOptions);
+    }, [
+        zoomOut,
+        zoomOutOptions
+    ]);
+    const handleFitView = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (onFitView) onFitView();
+        else fitView(fitViewOptions);
+    }, [
+        onFitView,
+        fitView,
+        fitViewOptions
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: ref,
+        "data-testid": "canvas-controls",
+        className: `flex gap-1 items-center rounded-xl border border-border-subtle bg-surface-raised text-foreground p-1 backdrop-blur-sm shadow-lg ${isVertical ? 'flex-col' : 'flex-row'}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "zoom-in-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_in',
+                    message: 'Zoom in'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomIn,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomIn, {})
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "zoom-out-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_out',
+                    message: 'Zoom out'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomOut,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomOut, {})
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "fit-to-view-button",
+                label: _({
+                    id: 'canvas.zoom.fit_to_screen',
+                    message: 'Fit to screen'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleFitView,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Scan, {})
+            }),
+            onOrganize && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "organize-button",
+                label: _({
+                    id: 'canvas.zoom.tidy_up',
+                    message: 'Tidy up'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: onOrganize,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.BrushCleaning, {})
+            })
+        ]
+    });
+}));
+CanvasZoomControls_CanvasZoomControls.displayName = 'CanvasZoomControls';
+exports.CanvasZoomControls = __webpack_exports__.CanvasZoomControls;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasZoomControls"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,18 @@
+export interface CanvasZoomControlsProps {
+    orientation?: 'vertical' | 'horizontal';
+    fitViewOptions?: {
+        duration?: number;
+        padding?: number;
+        maxZoom?: number;
+    };
+    zoomInOptions?: {
+        duration?: number;
+    };
+    zoomOutOptions?: {
+        duration?: number;
+    };
+    onOrganize?: () => void;
+    onFitView?: () => void;
+}
+export declare const CanvasZoomControls: import("react").NamedExoticComponent<CanvasZoomControlsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CanvasZoomControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasZoomControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasZoomControls/CanvasZoomControls.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,cAAc,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,aAAa,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,cAAc,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAKD,eAAO,MAAM,kBAAkB,+GAqF9B,CAAC"}

package/dist/canvas/components/CanvasZoomControls/CanvasZoomControls.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback } from "react";
+import { BrushCleaning, Scan, ZoomIn, ZoomOut } from "lucide-react";
+import { useReactFlow } from "../../xyflow/react.js";
+import { ToolbarButton } from "../ToolbarButton.js";
+import { useSafeLingui } from "../../../i18n/index.js";
+const ZOOM_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-[18px] [&_svg]:transition-all hover:[&_svg]:size-[22px] disabled:hover:[&_svg]:size-[18px]';
+const CanvasZoomControls_CanvasZoomControls = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function({ orientation = 'vertical', fitViewOptions, zoomInOptions, zoomOutOptions, onOrganize, onFitView }, ref) {
+    const { zoomIn, zoomOut, fitView } = useReactFlow();
+    const { _ } = useSafeLingui();
+    const isVertical = 'vertical' === orientation;
+    const tooltipSide = isVertical ? 'left' : 'top';
+    const handleZoomIn = useCallback(()=>{
+        zoomIn(zoomInOptions);
+    }, [
+        zoomIn,
+        zoomInOptions
+    ]);
+    const handleZoomOut = useCallback(()=>{
+        zoomOut(zoomOutOptions);
+    }, [
+        zoomOut,
+        zoomOutOptions
+    ]);
+    const handleFitView = useCallback(()=>{
+        if (onFitView) onFitView();
+        else fitView(fitViewOptions);
+    }, [
+        onFitView,
+        fitView,
+        fitViewOptions
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-testid": "canvas-controls",
+        className: `flex gap-1 items-center rounded-xl border border-border-subtle bg-surface-raised text-foreground p-1 backdrop-blur-sm shadow-lg ${isVertical ? 'flex-col' : 'flex-row'}`,
+        children: [
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "zoom-in-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_in',
+                    message: 'Zoom in'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomIn,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(ZoomIn, {})
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "zoom-out-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_out',
+                    message: 'Zoom out'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomOut,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(ZoomOut, {})
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "fit-to-view-button",
+                label: _({
+                    id: 'canvas.zoom.fit_to_screen',
+                    message: 'Fit to screen'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleFitView,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(Scan, {})
+            }),
+            onOrganize && /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "organize-button",
+                label: _({
+                    id: 'canvas.zoom.tidy_up',
+                    message: 'Tidy up'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: onOrganize,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(BrushCleaning, {})
+            })
+        ]
+    });
+}));
+CanvasZoomControls_CanvasZoomControls.displayName = 'CanvasZoomControls';
+export { CanvasZoomControls_CanvasZoomControls as CanvasZoomControls };

package/dist/canvas/components/CanvasZoomControls/index.cjs

@@ -0,0 +1,36 @@
+"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__, {
+    CanvasZoomControls: ()=>external_CanvasZoomControls_cjs_namespaceObject.CanvasZoomControls
+});
+const external_CanvasZoomControls_cjs_namespaceObject = require("./CanvasZoomControls.cjs");
+exports.CanvasZoomControls = __webpack_exports__.CanvasZoomControls;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasZoomControls"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasZoomControls/index.d.ts

@@ -0,0 +1,3 @@
+export { CanvasZoomControls } from './CanvasZoomControls';
+export type { CanvasZoomControlsProps } from './CanvasZoomControls';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasZoomControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/canvas/components/CanvasZoomControls/index.js

@@ -0,0 +1,2 @@
+import { CanvasZoomControls } from "./CanvasZoomControls.js";
+export { CanvasZoomControls };

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

@@ -35,10 +35,12 @@ const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
 const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
 const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
 const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
+const PANEL_FLOATING_MAX_HEIGHT = 600;
+const PANEL_FLOATING_MIN_HEIGHT = 100;
 const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
 const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
-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)({
+function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, scrollableContent = true, onMouseEnter, onMouseLeave }) {
+    const { computedAnchor, floatingStyles, availableHeight, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
         open,
         nodeId,
         anchorRect,
@@ -49,6 +51,19 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
     const panelClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
         isPinned
     ]);
+    const sizingStyle = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (isPinned || null == availableHeight) return {};
+        const maxHeight = Math.min(PANEL_FLOATING_MAX_HEIGHT, availableHeight);
+        const occupiedHeight = Math.max(PANEL_FLOATING_MIN_HEIGHT, maxHeight);
+        return {
+            maxHeight: `${maxHeight}px`,
+            minHeight: `${PANEL_FLOATING_MIN_HEIGHT}px`,
+            ['--floating-available-height']: `${occupiedHeight}px`
+        };
+    }, [
+        isPinned,
+        availableHeight
+    ]);
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -100,6 +115,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             style: {
                 position: 'fixed',
                 ...screenPosition,
+                ...sizingStyle,
                 zIndex: 1100,
                 pointerEvents: 'auto'
             },
@@ -109,6 +125,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
                 headerActions: headerActions,
                 onClose: onClose,
                 scrollKey: scrollKey,
+                scrollableContent: scrollableContent,
                 children: children
             })
         });
@@ -123,6 +140,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         onPointerLeave: onMouseLeave,
         style: {
             ...isPinned ? {} : floatingStyles,
+            ...sizingStyle,
             position: isPinned ? 'fixed' : 'absolute',
             right: isPinned ? 0 : void 0,
             top: isPinned ? 0 : void 0,
@@ -135,6 +153,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             headerActions: headerActions,
             onClose: onClose,
             scrollKey: scrollKey,
+            scrollableContent: scrollableContent,
             children: children
         })
     });

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

@@ -17,8 +17,9 @@ export type FloatingCanvasPanelProps = {
     children?: ReactNode;
     onClose?: () => void;
     scrollKey?: string;
+    scrollableContent?: boolean;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 };
-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;
+export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, fallbackPlacement, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, scrollableContent, 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":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAW7E,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,kDAgJ1B"}
+{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AA4B7E,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;IAOnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,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,iBAAwB,EACxB,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDAmK1B"}