@uipath/apollo-wind 0.10.0 → 0.11.0

package/dist/components/custom/panel-studio.cjs

@@ -0,0 +1,122 @@
+"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 ('undefined' != 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__, {
+    StudioPanelSelection: ()=>StudioPanelSelection,
+    StudioPanel: ()=>StudioPanel
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const PANEL_DEFAULT_WIDTH = 340;
+const PANEL_MIN_WIDTH = 200;
+const PANEL_MAX_WIDTH = 460;
+function StudioPanel({ side, children, className, isCollapsed: _isCollapsed = false }) {
+    const [width, setWidth] = external_react_namespaceObject.useState(PANEL_DEFAULT_WIDTH);
+    function handleMouseDown(e) {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = width;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        function onMouseMove(ev) {
+            const delta = 'left' === side ? ev.clientX - startX : startX - ev.clientX;
+            setWidth(Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, startWidth + delta)));
+        }
+        function onMouseUp() {
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        }
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('relative flex h-full shrink-0 flex-col overflow-hidden bg-surface', 'left' === side ? 'border-r border-border-subtle' : 'border-l border-border-subtle', className),
+        style: {
+            width
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex-1 overflow-y-auto",
+                children: children
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "Resize panel",
+                "aria-valuenow": width,
+                "aria-valuemin": PANEL_MIN_WIDTH,
+                "aria-valuemax": PANEL_MAX_WIDTH,
+                tabIndex: 0,
+                onMouseDown: handleMouseDown,
+                onKeyDown: (e)=>{
+                    if ('ArrowLeft' === e.key || 'ArrowRight' === e.key) {
+                        e.preventDefault();
+                        const delta = 'ArrowLeft' === e.key ? -10 : 10;
+                        const adjustedDelta = 'left' === side ? delta : -delta;
+                        setWidth(Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, width + adjustedDelta)));
+                    }
+                },
+                className: (0, index_cjs_namespaceObject.cn)('absolute top-0 z-10 h-full w-1 cursor-col-resize transition-colors duration-150', 'hover:bg-brand/40 active:bg-brand/60', 'left' === side ? 'right-0' : 'left-0')
+            })
+        ]
+    });
+}
+function StudioPanelSelection({ side: _side, onIconClick, activeIndex, className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-full w-12 shrink-0 flex-col items-center gap-6 overflow-hidden bg-surface pt-6', className),
+        children: Array.from({
+            length: 5
+        }, (_, i)=>{
+            const isActive = activeIndex === i;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                onClick: ()=>onIconClick(i),
+                "aria-label": `Panel view ${i + 1}`,
+                "aria-pressed": isActive,
+                className: (0, index_cjs_namespaceObject.cn)('flex h-[18px] w-[18px] items-center justify-center rounded transition-colors', isActive ? 'bg-brand-subtle text-foreground-accent ring-1 ring-brand/30' : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground'),
+                children: isActive ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FolderOpen, {
+                    className: "h-[18px] w-[18px]",
+                    "aria-hidden": "true"
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Folder, {
+                    className: "h-[18px] w-[18px]",
+                    "aria-hidden": "true"
+                })
+            }, i);
+        })
+    });
+}
+exports.StudioPanel = __webpack_exports__.StudioPanel;
+exports.StudioPanelSelection = __webpack_exports__.StudioPanelSelection;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "StudioPanel",
+    "StudioPanelSelection"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/panel-studio.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+export interface StudioPanelProps {
+    /** Controls which side border and resize handle are applied */
+    side: 'left' | 'right';
+    children?: React.ReactNode;
+    className?: string;
+    /** Reserved for future collapse behavior — not currently used for styling */
+    isCollapsed?: boolean;
+}
+/**
+ * Resizable panel container for the Studio template.
+ *
+ * - Default width 296px, resizable from 200px to 460px by dragging the inner edge
+ * - Applies a border on the inner edge (right for left panel, left for right panel)
+ * - No built-in toggle button — visibility is controlled by the parent template
+ */
+export declare function StudioPanel({ side, children, className, isCollapsed: _isCollapsed, }: StudioPanelProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioPanelSelectionProps {
+    /** Semantic side — not currently used for styling */
+    side: 'left' | 'right';
+    /**
+     * Called with the 0-based index of the clicked icon.
+     * Use this to switch the active panel view or toggle visibility.
+     */
+    onIconClick: (index: number) => void;
+    /**
+     * Index of the currently active icon (0–4).
+     * That icon receives the active highlight style and `aria-pressed="true"`.
+     * Pass `undefined` (or omit) when no view is selected (panel hidden).
+     */
+    activeIndex?: number;
+    className?: string;
+}
+/**
+ * Vertical icon rail for the Studio template.
+ *
+ * Renders 5 icon buttons stacked top-to-bottom. Each button calls
+ * `onIconClick(index)` so the parent can switch to a specific panel view
+ * or toggle visibility. The active icon is highlighted via `activeIndex`.
+ *
+ * The rail is always visible regardless of whether its paired `StudioPanel`
+ * is shown. Pass `className="border-r border-border-subtle"` for the left
+ * rail or `"border-l border-border-subtle"` for the right rail.
+ *
+ * The placeholder icon can be replaced with your `icon-panel-select.svg`
+ * by swapping `<PanelSelectIcon />` with an `<img>` pointing to that asset.
+ */
+export declare function StudioPanelSelection({ side: _side, onIconClick, activeIndex, className, }: StudioPanelSelectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/panel-studio.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Folder, FolderOpen } from "lucide-react";
+import { cn } from "../../lib/index.js";
+const PANEL_DEFAULT_WIDTH = 340;
+const PANEL_MIN_WIDTH = 200;
+const PANEL_MAX_WIDTH = 460;
+function StudioPanel({ side, children, className, isCollapsed: _isCollapsed = false }) {
+    const [width, setWidth] = useState(PANEL_DEFAULT_WIDTH);
+    function handleMouseDown(e) {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = width;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        function onMouseMove(ev) {
+            const delta = 'left' === side ? ev.clientX - startX : startX - ev.clientX;
+            setWidth(Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, startWidth + delta)));
+        }
+        function onMouseUp() {
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        }
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('relative flex h-full shrink-0 flex-col overflow-hidden bg-surface', 'left' === side ? 'border-r border-border-subtle' : 'border-l border-border-subtle', className),
+        style: {
+            width
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex-1 overflow-y-auto",
+                children: children
+            }),
+            /*#__PURE__*/ jsx("div", {
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "Resize panel",
+                "aria-valuenow": width,
+                "aria-valuemin": PANEL_MIN_WIDTH,
+                "aria-valuemax": PANEL_MAX_WIDTH,
+                tabIndex: 0,
+                onMouseDown: handleMouseDown,
+                onKeyDown: (e)=>{
+                    if ('ArrowLeft' === e.key || 'ArrowRight' === e.key) {
+                        e.preventDefault();
+                        const delta = 'ArrowLeft' === e.key ? -10 : 10;
+                        const adjustedDelta = 'left' === side ? delta : -delta;
+                        setWidth(Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, width + adjustedDelta)));
+                    }
+                },
+                className: cn('absolute top-0 z-10 h-full w-1 cursor-col-resize transition-colors duration-150', 'hover:bg-brand/40 active:bg-brand/60', 'left' === side ? 'right-0' : 'left-0')
+            })
+        ]
+    });
+}
+function StudioPanelSelection({ side: _side, onIconClick, activeIndex, className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex h-full w-12 shrink-0 flex-col items-center gap-6 overflow-hidden bg-surface pt-6', className),
+        children: Array.from({
+            length: 5
+        }, (_, i)=>{
+            const isActive = activeIndex === i;
+            return /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: ()=>onIconClick(i),
+                "aria-label": `Panel view ${i + 1}`,
+                "aria-pressed": isActive,
+                className: cn('flex h-[18px] w-[18px] items-center justify-center rounded transition-colors', isActive ? 'bg-brand-subtle text-foreground-accent ring-1 ring-brand/30' : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground'),
+                children: isActive ? /*#__PURE__*/ jsx(FolderOpen, {
+                    className: "h-[18px] w-[18px]",
+                    "aria-hidden": "true"
+                }) : /*#__PURE__*/ jsx(Folder, {
+                    className: "h-[18px] w-[18px]",
+                    "aria-hidden": "true"
+                })
+            }, i);
+        })
+    });
+}
+export { StudioPanel, StudioPanelSelection };

package/dist/components/custom/toolbar-canvas.cjs

@@ -0,0 +1,124 @@
+"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 ('undefined' != 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__, {
+    FlowCanvasToolbar: ()=>FlowCanvasToolbar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function ToolbarSeparator() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "h-8 w-px bg-border-subtle"
+    });
+}
+function ToolbarButton({ icon, label, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-[60px] items-center gap-2 rounded-3xl border border-border bg-surface-raised px-2.5', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                        type: "button",
+                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'build' === activeMode ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                        onClick: ()=>onModeChange?.('build'),
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                children: "Build"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                        type: "button",
+                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'evaluate' === activeMode ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                        onClick: ()=>onModeChange?.('evaluate'),
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ListChecks, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                children: "Evaluate"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Undo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Undo"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Redo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Redo"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Play, {
+                    className: "h-5 w-5"
+                }),
+                label: "Run"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add node"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.StickyNote, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add note"
+            })
+        ]
+    });
+}
+exports.FlowCanvasToolbar = __webpack_exports__.FlowCanvasToolbar;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowCanvasToolbar"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/toolbar-canvas.d.ts

@@ -0,0 +1,15 @@
+export interface CanvasToolbarProps {
+    className?: string;
+    /** Active mode: 'build' | 'evaluate' */
+    activeMode?: 'build' | 'evaluate';
+    /** Callback when mode changes */
+    onModeChange?: (mode: 'build' | 'evaluate') => void;
+}
+/**
+ * Bottom-center toolbar for the Flow canvas.
+ *
+ * Contains a Build/Evaluate toggle, undo/redo, play, add, and sticky note
+ * buttons. Anchored to bottom-center via absolute positioning in the
+ * parent layout.
+ */
+export declare function FlowCanvasToolbar({ className, activeMode, onModeChange, }: CanvasToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/toolbar-canvas.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ListChecks, Play, Plus, Redo2, StickyNote, Undo2, Workflow } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function ToolbarSeparator() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "h-8 w-px bg-border-subtle"
+    });
+}
+function ToolbarButton({ icon, label, onClick }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex h-[60px] items-center gap-2 rounded-3xl border border-border bg-surface-raised px-2.5', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
+                children: [
+                    /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'build' === activeMode ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                        onClick: ()=>onModeChange?.('build'),
+                        children: [
+                            /*#__PURE__*/ jsx(Workflow, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "Build"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        className: cn('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'evaluate' === activeMode ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                        onClick: ()=>onModeChange?.('evaluate'),
+                        children: [
+                            /*#__PURE__*/ jsx(ListChecks, {
+                                className: "h-5 w-5"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "Evaluate"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Undo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Undo"
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Redo2, {
+                    className: "h-5 w-5"
+                }),
+                label: "Redo"
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Play, {
+                    className: "h-5 w-5"
+                }),
+                label: "Run"
+            }),
+            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(Plus, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add node"
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                icon: /*#__PURE__*/ jsx(StickyNote, {
+                    className: "h-5 w-5"
+                }),
+                label: "Add note"
+            })
+        ]
+    });
+}
+export { FlowCanvasToolbar };

package/dist/components/custom/toolbar-view.cjs

@@ -0,0 +1,121 @@
+"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 ('undefined' != 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__, {
+    FlowViewToolbar: ()=>FlowViewToolbar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function ViewButton({ icon, label, isActive, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        className: (0, index_cjs_namespaceObject.cn)('flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground', isActive && 'rounded-2xl border border-border bg-surface text-foreground'),
+        onClick: onClick,
+        "aria-label": label,
+        children: icon
+    });
+}
+function NodeSizeIcon({ size, isActive }) {
+    const label = {
+        s: 'S',
+        m: 'M',
+        l: 'L'
+    }[size];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        className: (0, index_cjs_namespaceObject.cn)('flex h-8 w-8 items-center justify-center rounded-2xl text-xs font-bold text-foreground-muted transition-colors hover:text-foreground', isActive && 'border border-border bg-surface text-foreground'),
+        "aria-label": `Node size ${label}`,
+        children: label
+    });
+}
+function FlowViewToolbar({ className, activeNodeSize = 's', onAction }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-4', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex w-10 flex-col items-center gap-1 rounded-xl bg-surface-raised p-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomIn, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Zoom in",
+                        onClick: ()=>onAction?.('zoom-in')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomOut, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Zoom out",
+                        onClick: ()=>onAction?.('zoom-out')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "h-px w-6 bg-border-subtle"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Fit to screen",
+                        onClick: ()=>onAction?.('fit')
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ViewButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LayoutGrid, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Toggle grid",
+                        onClick: ()=>onAction?.('grid')
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex w-10 flex-col items-center gap-2 rounded-[20px] border border-border-deep bg-surface-raised p-1",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSizeIcon, {
+                        size: "s",
+                        isActive: 's' === activeNodeSize
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSizeIcon, {
+                        size: "m",
+                        isActive: 'm' === activeNodeSize
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeSizeIcon, {
+                        size: "l",
+                        isActive: 'l' === activeNodeSize
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.FlowViewToolbar = __webpack_exports__.FlowViewToolbar;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowViewToolbar"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/toolbar-view.d.ts

@@ -0,0 +1,14 @@
+export interface ViewToolbarProps {
+    className?: string;
+    /** Active node size: 's' | 'm' | 'l' */
+    activeNodeSize?: 's' | 'm' | 'l';
+    /** Callback for zoom/view actions */
+    onAction?: (action: string) => void;
+}
+/**
+ * Bottom-right view controls for the Flow canvas.
+ *
+ * Contains zoom in/out, fit-to-screen, grid toggle, and node size selector.
+ * Anchored to bottom-right via absolute positioning in the parent layout.
+ */
+export declare function FlowViewToolbar({ className, activeNodeSize, onAction, }: ViewToolbarProps): import("react/jsx-runtime").JSX.Element;