@uipath/apollo-wind 0.14.0-test → 0.15.0

package/dist/components/custom/chat-composer.cjs

@@ -32,7 +32,6 @@ const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function ChatComposer({ className, placeholder = 'I would like you to automate my', onSubmit }) {
     const [value, setValue] = external_react_namespaceObject.useState('');
-    const [focused, setFocused] = external_react_namespaceObject.useState(false);
     const handleSubmit = ()=>{
         if (value.trim()) {
             onSubmit?.(value.trim());
@@ -57,9 +56,7 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
                     rows: 3,
                     value: value,
                     onChange: (e)=>setValue(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    onFocus: ()=>setFocused(true),
-                    onBlur: ()=>setFocused(false)
+                    onKeyDown: handleKeyDown
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "flex items-center justify-between",
@@ -110,14 +107,14 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
                                     onClick: handleSubmit,
                                     "aria-label": "Submit message",
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerRightUp, {
-                                        className: "h-5 w-5 text-white"
+                                        className: "h-5 w-5 text-foreground-on-accent"
                                     })
                                 }) : /*#__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', focused ? 'bg-foreground-accent hover:bg-foreground-accent-muted' : 'bg-surface-hover hover:bg-foreground-accent-muted'),
+                                    className: "flex h-8 w-8 items-center justify-center rounded-lg bg-surface-hover group-focus-within/input:bg-foreground-accent hover:bg-foreground-accent-muted",
                                     "aria-label": "Voice input",
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Mic, {
-                                        className: "h-5 w-5 text-white"
+                                        className: "h-5 w-5 text-foreground-on-accent"
                                     })
                                 })
                             ]

package/dist/components/custom/chat-composer.js

@@ -4,7 +4,6 @@ import { useState } from "react";
 import { cn } from "../../lib/index.js";
 function ChatComposer({ className, placeholder = 'I would like you to automate my', onSubmit }) {
     const [value, setValue] = useState('');
-    const [focused, setFocused] = useState(false);
     const handleSubmit = ()=>{
         if (value.trim()) {
             onSubmit?.(value.trim());
@@ -29,9 +28,7 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
                     rows: 3,
                     value: value,
                     onChange: (e)=>setValue(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    onFocus: ()=>setFocused(true),
-                    onBlur: ()=>setFocused(false)
+                    onKeyDown: handleKeyDown
                 }),
                 /*#__PURE__*/ jsxs("div", {
                     className: "flex items-center justify-between",
@@ -82,14 +79,14 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
                                     onClick: handleSubmit,
                                     "aria-label": "Submit message",
                                     children: /*#__PURE__*/ jsx(CornerRightUp, {
-                                        className: "h-5 w-5 text-white"
+                                        className: "h-5 w-5 text-foreground-on-accent"
                                     })
                                 }) : /*#__PURE__*/ jsx("button", {
                                     type: "button",
-                                    className: cn('flex h-8 w-8 items-center justify-center rounded-lg', focused ? 'bg-foreground-accent hover:bg-foreground-accent-muted' : 'bg-surface-hover hover:bg-foreground-accent-muted'),
+                                    className: "flex h-8 w-8 items-center justify-center rounded-lg bg-surface-hover group-focus-within/input:bg-foreground-accent hover:bg-foreground-accent-muted",
                                     "aria-label": "Voice input",
                                     children: /*#__PURE__*/ jsx(Mic, {
-                                        className: "h-5 w-5 text-white"
+                                        className: "h-5 w-5 text-foreground-on-accent"
                                     })
                                 })
                             ]

package/dist/components/custom/flow-node-expandable.cjs

@@ -0,0 +1,81 @@
+"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__, {
+    FlowNodeExpandable: ()=>FlowNodeExpandable
+});
+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 FlowNodeExpandable({ className, title = 'Node title', icon, expanded = false, selected = false, forceState, onToggle }) {
+    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
+    const isHover = 'hover' === forceState;
+    const isSelectedHover = 'selected-hover' === forceState;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('group w-[360px] rounded-2xl bg-surface-overlay', expanded ? 'flex flex-col size-[360px] px-4 pt-2.5 pb-4 gap-[15px]' : 'p-3', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-2.5",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "flex items-center justify-center rounded-xl bg-surface size-8 shrink-0",
+                                children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+                                    className: "h-5 w-5 text-foreground-muted"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-sm font-medium text-foreground whitespace-nowrap",
+                                children: title
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        className: "flex items-center justify-center rounded text-foreground-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        onClick: onToggle,
+                        "aria-label": expanded ? `Collapse ${title}` : `Expand ${title}`,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                            className: (0, index_cjs_namespaceObject.cn)('h-4 w-4', expanded && 'rotate-180')
+                        })
+                    })
+                ]
+            }),
+            expanded && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex-1 min-h-0 rounded-lg bg-surface"
+            })
+        ]
+    });
+}
+exports.FlowNodeExpandable = __webpack_exports__.FlowNodeExpandable;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FlowNodeExpandable"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/flow-node-expandable.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface FlowNodeExpandableProps {
+    className?: string;
+    /** Node title */
+    title?: string;
+    /** Icon rendered in the node header */
+    icon?: React.ReactNode;
+    /** Whether the node is expanded */
+    expanded?: boolean;
+    /** Whether the node is selected */
+    selected?: boolean;
+    /**
+     * Force a specific visual state — used for Storybook stories and snapshots.
+     * In normal use, hover is driven by CSS group-hover.
+     */
+    forceState?: 'default' | 'hover' | 'selected' | 'selected-hover';
+    /** Callback when expand/collapse chevron is toggled */
+    onToggle?: () => void;
+}
+/**
+ * Expandable card-style canvas node for the Flow template.
+ *
+ * Collapsed: 360px wide, header only.
+ * Expanded: 360×360px, header + content area.
+ * Shares the same 4-state border pattern as FlowNode.
+ */
+export declare function FlowNodeExpandable({ className, title, icon, expanded, selected, forceState, onToggle, }: FlowNodeExpandableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/flow-node-expandable.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ChevronDown, Workflow } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function FlowNodeExpandable({ className, title = 'Node title', icon, expanded = false, selected = false, forceState, onToggle }) {
+    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
+    const isHover = 'hover' === forceState;
+    const isSelectedHover = 'selected-hover' === forceState;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('group w-[360px] rounded-2xl bg-surface-overlay', expanded ? 'flex flex-col size-[360px] px-4 pt-2.5 pb-4 gap-[15px]' : 'p-3', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2.5",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "flex items-center justify-center rounded-xl bg-surface size-8 shrink-0",
+                                children: icon ?? /*#__PURE__*/ jsx(Workflow, {
+                                    className: "h-5 w-5 text-foreground-muted"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm font-medium text-foreground whitespace-nowrap",
+                                children: title
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "flex items-center justify-center rounded text-foreground-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        onClick: onToggle,
+                        "aria-label": expanded ? `Collapse ${title}` : `Expand ${title}`,
+                        children: /*#__PURE__*/ jsx(ChevronDown, {
+                            className: cn('h-4 w-4', expanded && 'rotate-180')
+                        })
+                    })
+                ]
+            }),
+            expanded && /*#__PURE__*/ jsx("div", {
+                className: "flex-1 min-h-0 rounded-lg bg-surface"
+            })
+        ]
+    });
+}
+export { FlowNodeExpandable };

package/dist/components/custom/flow-node.cjs

@@ -30,41 +30,39 @@ 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 FlowNode({ className, title = 'Node title', icon, children, selected = false }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex h-[360px] w-[360px] flex-col overflow-hidden rounded-2xl bg-surface-overlay px-4 pb-4 pt-2.5', selected && 'ring-1 ring-ring', className),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: "flex flex-1 flex-col gap-[15px]",
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    className: "flex items-center justify-between",
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                            className: "flex items-center gap-2.5",
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                    className: "flex h-8 w-8 items-center justify-center rounded-lg bg-surface",
-                                    children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Bot, {
-                                        className: "h-5 w-5 text-foreground-muted"
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                    className: "text-sm font-medium text-foreground",
-                                    children: title
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                            className: "h-4 w-4 text-foreground-muted"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: "flex-1 rounded-lg bg-surface-raised",
-                    children: children
+function FlowNode({ className, title = 'Node title', subtitle = 'Secondary title', icon, selected = false, forceState, onClick }) {
+    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
+    const isHover = 'hover' === forceState;
+    const isSelectedHover = 'selected-hover' === forceState;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+        type: "button",
+        className: (0, index_cjs_namespaceObject.cn)('group flex w-[107px] flex-col items-center gap-2.5 rounded-[32px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className),
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('relative flex items-center justify-center rounded-[32px] size-24 bg-surface-overlay', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted'),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "flex items-center justify-center overflow-hidden rounded-[24px] bg-surface size-20",
+                    children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Bot, {
+                        className: "h-10 w-10 text-foreground-muted",
+                        strokeWidth: 1.4
+                    })
                 })
-            ]
-        })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex flex-col items-center",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-center text-[14px] font-semibold leading-[18px] text-foreground",
+                        children: title
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-center text-[12px] leading-[18px] text-foreground-muted",
+                        children: subtitle
+                    })
+                ]
+            })
+        ]
     });
 }
 exports.FlowNode = __webpack_exports__.FlowNode;

package/dist/components/custom/flow-node.d.ts

@@ -3,18 +3,23 @@ export interface FlowNodeProps {
     className?: string;
     /** Node title */
     title?: string;
-    /** Icon to display in the node header */
+    /** Node subtitle */
+    subtitle?: string;
+    /** Icon rendered inside the inner shape */
     icon?: React.ReactNode;
-    /** Node content (rendered below the header) */
-    children?: React.ReactNode;
-    /** Whether the node is selected */
+    /** Whether the node is in selected state */
     selected?: boolean;
+    /**
+     * Force a specific visual state — used for Storybook stories and snapshots.
+     * In normal use, hover is driven by CSS group-hover.
+     */
+    forceState?: 'default' | 'hover' | 'selected' | 'selected-hover';
+    onClick?: () => void;
 }
 /**
- * A canvas node card for the Flow template.
+ * Icon-centric canvas node for the Flow template.
  *
- * Displays a dark card with a header (icon + title + chevron) and a
- * content area. Default size is 360×360px but can be overridden via
- * className.
+ * 96×96 outer ring → 80×80 inner rounded shape → 40×40 icon.
+ * Title + subtitle centered below.
  */
-export declare function FlowNode({ className, title, icon, children, selected, }: FlowNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function FlowNode({ className, title, subtitle, icon, selected, forceState, onClick, }: FlowNodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/flow-node.js

@@ -1,42 +1,40 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Bot, ChevronDown } from "lucide-react";
+import { Bot } from "lucide-react";
 import { cn } from "../../lib/index.js";
-function FlowNode({ className, title = 'Node title', icon, children, selected = false }) {
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('flex h-[360px] w-[360px] flex-col overflow-hidden rounded-2xl bg-surface-overlay px-4 pb-4 pt-2.5', selected && 'ring-1 ring-ring', className),
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "flex flex-1 flex-col gap-[15px]",
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: "flex items-center justify-between",
-                    children: [
-                        /*#__PURE__*/ jsxs("div", {
-                            className: "flex items-center gap-2.5",
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "flex h-8 w-8 items-center justify-center rounded-lg bg-surface",
-                                    children: icon ?? /*#__PURE__*/ jsx(Bot, {
-                                        className: "h-5 w-5 text-foreground-muted"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "text-sm font-medium text-foreground",
-                                    children: title
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(ChevronDown, {
-                            className: "h-4 w-4 text-foreground-muted"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: "flex-1 rounded-lg bg-surface-raised",
-                    children: children
+function FlowNode({ className, title = 'Node title', subtitle = 'Secondary title', icon, selected = false, forceState, onClick }) {
+    const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
+    const isHover = 'hover' === forceState;
+    const isSelectedHover = 'selected-hover' === forceState;
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: cn('group flex w-[107px] flex-col items-center gap-2.5 rounded-[32px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className),
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn('relative flex items-center justify-center rounded-[32px] size-24 bg-surface-overlay', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted'),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex items-center justify-center overflow-hidden rounded-[24px] bg-surface size-20",
+                    children: icon ?? /*#__PURE__*/ jsx(Bot, {
+                        className: "h-10 w-10 text-foreground-muted",
+                        strokeWidth: 1.4
+                    })
                 })
-            ]
-        })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col items-center",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-center text-[14px] font-semibold leading-[18px] text-foreground",
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-center text-[12px] leading-[18px] text-foreground-muted",
+                        children: subtitle
+                    })
+                ]
+            })
+        ]
     });
 }
 export { FlowNode };

package/dist/components/custom/hover-menu.cjs

@@ -0,0 +1,84 @@
+"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__, {
+    HoverMenu: ()=>HoverMenu
+});
+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 MenuButton({ icon: Icon, label, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        className: "group flex h-6 w-6 items-center justify-center rounded-[4px] text-foreground-muted hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-label": label,
+        onClick: onClick,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "h-4 w-4 transition-transform group-hover:scale-[1.25]",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                className: "h-full w-full",
+                strokeWidth: 1.4
+            })
+        })
+    });
+}
+function HoverMenu({ className, onPlay, onEdit, onDelete, onMore }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex h-10 items-center gap-1 rounded-xl border border-surface-overlay bg-surface-raised px-2 py-1', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MenuButton, {
+                icon: external_lucide_react_namespaceObject.Play,
+                label: "Run node",
+                onClick: onPlay
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MenuButton, {
+                icon: external_lucide_react_namespaceObject.Pencil,
+                label: "Edit node",
+                onClick: onEdit
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MenuButton, {
+                icon: external_lucide_react_namespaceObject.Trash2,
+                label: "Delete node",
+                onClick: onDelete
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "h-5 w-px bg-border-subtle"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MenuButton, {
+                icon: external_lucide_react_namespaceObject.EllipsisVertical,
+                label: "More options",
+                onClick: onMore
+            })
+        ]
+    });
+}
+exports.HoverMenu = __webpack_exports__.HoverMenu;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "HoverMenu"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/hover-menu.d.ts

@@ -0,0 +1,13 @@
+export interface HoverMenuProps {
+    className?: string;
+    onPlay?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onMore?: () => void;
+}
+/**
+ * Contextual hover menu for canvas nodes.
+ *
+ * Displays Play, Edit, Delete, and More actions in a compact floating toolbar.
+ */
+export declare function HoverMenu({ className, onPlay, onEdit, onDelete, onMore }: HoverMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/hover-menu.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { EllipsisVertical, Pencil, Play, Trash2 } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function MenuButton({ icon: Icon, label, onClick }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: "group flex h-6 w-6 items-center justify-center rounded-[4px] text-foreground-muted hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-label": label,
+        onClick: onClick,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "h-4 w-4 transition-transform group-hover:scale-[1.25]",
+            children: /*#__PURE__*/ jsx(Icon, {
+                className: "h-full w-full",
+                strokeWidth: 1.4
+            })
+        })
+    });
+}
+function HoverMenu({ className, onPlay, onEdit, onDelete, onMore }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex h-10 items-center gap-1 rounded-xl border border-surface-overlay bg-surface-raised px-2 py-1', className),
+        children: [
+            /*#__PURE__*/ jsx(MenuButton, {
+                icon: Play,
+                label: "Run node",
+                onClick: onPlay
+            }),
+            /*#__PURE__*/ jsx(MenuButton, {
+                icon: Pencil,
+                label: "Edit node",
+                onClick: onEdit
+            }),
+            /*#__PURE__*/ jsx(MenuButton, {
+                icon: Trash2,
+                label: "Delete node",
+                onClick: onDelete
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "h-5 w-px bg-border-subtle"
+            }),
+            /*#__PURE__*/ jsx(MenuButton, {
+                icon: EllipsisVertical,
+                label: "More options",
+                onClick: onMore
+            })
+        ]
+    });
+}
+export { HoverMenu };

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

@@ -36,7 +36,7 @@ const tooltip_cjs_namespaceObject = require("../ui/tooltip.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function UiPathLogo({ className }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg bg-[#0092b8] shadow-sm', className),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
             viewBox: "0 0 24 24",
             fill: "none",
@@ -70,6 +70,7 @@ function ExpandedNavItem({ item, isOpen, isActive, onToggle, selectedChildId, on
         type: "button",
         className: (0, index_cjs_namespaceObject.cn)('flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-hover transition-colors hover:bg-surface-hover hover:text-foreground', isActive && 'bg-surface-hover text-foreground'),
         onClick: onToggle,
+        "aria-current": isActive ? 'page' : void 0,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
@@ -134,8 +135,10 @@ function CollapsedNavItem({ item, isActive, onClick }) {
                 asChild: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                     type: "button",
-                    className: "group flex h-12 w-full items-center justify-center",
+                    className: "group flex h-12 w-full items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset rounded-lg",
                     onClick: onClick,
+                    "aria-label": item.label,
+                    "aria-pressed": isActive,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center rounded-lg text-foreground-muted group-hover:bg-surface-hover group-hover:text-foreground-hover', isActive && 'bg-surface-hover text-foreground-hover'),
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

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

@@ -8,7 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import { cn } from "../../lib/index.js";
 function UiPathLogo({ className }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm', className),
+        className: cn('flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg bg-[#0092b8] shadow-sm', className),
         children: /*#__PURE__*/ jsxs("svg", {
             viewBox: "0 0 24 24",
             fill: "none",
@@ -42,6 +42,7 @@ function ExpandedNavItem({ item, isOpen, isActive, onToggle, selectedChildId, on
         type: "button",
         className: cn('flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-hover transition-colors hover:bg-surface-hover hover:text-foreground', isActive && 'bg-surface-hover text-foreground'),
         onClick: onToggle,
+        "aria-current": isActive ? 'page' : void 0,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
@@ -106,8 +107,10 @@ function CollapsedNavItem({ item, isActive, onClick }) {
                 asChild: true,
                 children: /*#__PURE__*/ jsx("button", {
                     type: "button",
-                    className: "group flex h-12 w-full items-center justify-center",
+                    className: "group flex h-12 w-full items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset rounded-lg",
                     onClick: onClick,
+                    "aria-label": item.label,
+                    "aria-pressed": isActive,
                     children: /*#__PURE__*/ jsx("div", {
                         className: cn('flex h-9 w-9 items-center justify-center rounded-lg text-foreground-muted group-hover:bg-surface-hover group-hover:text-foreground-hover', isActive && 'bg-surface-hover text-foreground-hover'),
                         children: /*#__PURE__*/ jsx("div", {