@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

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

@@ -0,0 +1,262 @@
+"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__, {
+    FlowPanel: ()=>FlowPanel,
+    defaultFlowNavItems: ()=>defaultFlowNavItems
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const avatar_cjs_namespaceObject = require("../ui/avatar.cjs");
+const tooltip_cjs_namespaceObject = require("../ui/tooltip.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function UiPathLogo() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "text-xs font-bold text-foreground-on-accent select-none",
+            children: "Ui"
+        })
+    });
+}
+function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('flex w-[60px] shrink-0 flex-col justify-between bg-surface-overlay', hasShadow && 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]'),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex flex-col",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex h-[60px] w-[60px] shrink-0 items-center justify-center",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UiPathLogo, {})
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
+                        className: "flex flex-col items-center pt-[18px]",
+                        children: navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_cjs_namespaceObject.Tooltip, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipTrigger, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                            type: "button",
+                                            className: (0, index_cjs_namespaceObject.cn)('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', activeId === item.id && 'text-brand-foreground'),
+                                            onClick: ()=>onNavClick(item.id),
+                                            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 transition-colors', activeId === item.id && 'bg-surface-hover'),
+                                                children: item.icon
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipContent, {
+                                        side: "right",
+                                        children: item.label
+                                    })
+                                ]
+                            }, item.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex h-[60px] shrink-0 items-center justify-center",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(avatar_cjs_namespaceObject.Avatar, {
+                    className: "h-8 w-8 bg-surface-raised",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(avatar_cjs_namespaceObject.AvatarFallback, {
+                        className: "bg-surface-raised text-xs text-foreground-muted",
+                        children: "U"
+                    })
+                })
+            })
+        ]
+    });
+}
+function DefaultChatContent({ chatMessages }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex flex-1 flex-col justify-end gap-7 overflow-y-auto",
+        children: chatMessages.map((msg)=>'user' === msg.role ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex flex-col items-end pr-6",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised px-6 py-4",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                        className: "text-base leading-6 tracking-[-0.4px] text-foreground",
+                        children: msg.content
+                    })
+                })
+            }, msg.id) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex items-center gap-2",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                    className: "text-base font-medium leading-5 text-foreground-muted",
+                    children: msg.content
+                })
+            }, msg.id))
+    });
+}
+function ChatInput() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-3",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex h-12 items-center rounded-2xl border border-border bg-surface-raised px-4",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                    type: "text",
+                    placeholder: "Ask me to help build your Flow",
+                    className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-foreground-subtle outline-none",
+                    readOnly: true
+                })
+            }),
+            /*#__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",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
+                                "aria-label": "Add attachment",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                                    className: "h-5 w-5"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
+                                "aria-label": "Add workflow",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+                                    className: "h-5 w-5"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        className: "flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent",
+                        "aria-label": "Submit message",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerDownLeft, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex h-full w-[420px] shrink-0 flex-col justify-between overflow-hidden bg-surface-overlay px-4 pb-4 pt-3",
+        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-4 text-base tracking-[-0.6px] leading-9",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "font-bold text-foreground",
+                                children: "Flow"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "font-medium text-foreground-subtle",
+                                children: "Autopilot"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        className: "text-foreground-muted transition-colors hover:text-foreground",
+                        onClick: onClose,
+                        "aria-label": "Close panel",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {
+                            className: "h-5 w-5"
+                        })
+                    })
+                ]
+            }),
+            expandedContent ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultChatContent, {
+                chatMessages: chatMessages
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChatInput, {})
+        ]
+    });
+}
+function FlowPanel({ className, open = false, onOpenChange, navItems = [], activeNavId, onNavChange, chatMessages = [], expandedContent }) {
+    const [internalActiveId, setInternalActiveId] = external_react_namespaceObject.useState(navItems[0]?.id ?? '');
+    const activeId = activeNavId ?? internalActiveId;
+    const handleNavClick = (id)=>{
+        setInternalActiveId(id);
+        onNavChange?.(id);
+        onOpenChange?.(true);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('flex h-full', className),
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconRail, {
+                    navItems: navItems,
+                    activeId: activeId,
+                    onNavClick: handleNavClick,
+                    hasShadow: open
+                }),
+                open && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExpandedPanel, {
+                    chatMessages: chatMessages,
+                    expandedContent: expandedContent,
+                    onClose: ()=>onOpenChange?.(false)
+                })
+            ]
+        })
+    });
+}
+const defaultFlowNavItems = [
+    {
+        id: 'chat',
+        label: 'Chat',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MessageCircle, {
+            className: "h-5 w-5"
+        })
+    },
+    {
+        id: 'home',
+        label: 'Home',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.House, {
+            className: "h-5 w-5"
+        })
+    },
+    {
+        id: 'flows',
+        label: 'Flows',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
+            className: "h-5 w-5"
+        })
+    }
+];
+exports.FlowPanel = __webpack_exports__.FlowPanel;
+exports.defaultFlowNavItems = __webpack_exports__.defaultFlowNavItems;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowPanel",
+    "defaultFlowNavItems"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface FlowPanelNavItem {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+}
+export interface FlowPanelChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+}
+export interface FlowPanelProps {
+    className?: string;
+    /** Whether the expanded panel is open */
+    open?: boolean;
+    /** Callback to toggle expanded panel */
+    onOpenChange?: (open: boolean) => void;
+    /** Navigation items shown as icon buttons */
+    navItems?: FlowPanelNavItem[];
+    /** Currently active nav item ID */
+    activeNavId?: string;
+    /** Callback when a nav item is clicked */
+    onNavChange?: (navId: string) => void;
+    /** Chat messages to display in the expanded panel */
+    chatMessages?: FlowPanelChatMessage[];
+    /** Content to render inside the expanded panel (overrides default chat UI) */
+    expandedContent?: React.ReactNode;
+}
+/**
+ * Flow template left panel with collapsed icon rail and optional expanded
+ * chat panel.
+ *
+ * - **Collapsed**: 60px icon rail with logo, nav icons, and avatar
+ * - **Expanded**: Icon rail + 420px chat panel with Flow/Autopilot tabs,
+ *   chat messages, and input field
+ */
+export declare function FlowPanel({ className, open, onOpenChange, navItems, activeNavId, onNavChange, chatMessages, expandedContent, }: FlowPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultFlowNavItems: FlowPanelNavItem[];

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

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CornerDownLeft, House, MessageCircle, PanelRightOpen, Plus, Workflow } from "lucide-react";
+import { useState } from "react";
+import { Avatar, AvatarFallback } from "../ui/avatar.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { cn } from "../../lib/index.js";
+function UiPathLogo() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm",
+        children: /*#__PURE__*/ jsx("span", {
+            className: "text-xs font-bold text-foreground-on-accent select-none",
+            children: "Ui"
+        })
+    });
+}
+function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex w-[60px] shrink-0 flex-col justify-between bg-surface-overlay', hasShadow && 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]'),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex h-[60px] w-[60px] shrink-0 items-center justify-center",
+                        children: /*#__PURE__*/ jsx(UiPathLogo, {})
+                    }),
+                    /*#__PURE__*/ jsx("nav", {
+                        className: "flex flex-col items-center pt-[18px]",
+                        children: navItems.map((item)=>/*#__PURE__*/ jsxs(Tooltip, {
+                                children: [
+                                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: cn('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', activeId === item.id && 'text-brand-foreground'),
+                                            onClick: ()=>onNavClick(item.id),
+                                            children: /*#__PURE__*/ jsx("div", {
+                                                className: cn('flex h-9 w-9 items-center justify-center rounded-lg transition-colors', activeId === item.id && 'bg-surface-hover'),
+                                                children: item.icon
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(TooltipContent, {
+                                        side: "right",
+                                        children: item.label
+                                    })
+                                ]
+                            }, item.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex h-[60px] shrink-0 items-center justify-center",
+                children: /*#__PURE__*/ jsx(Avatar, {
+                    className: "h-8 w-8 bg-surface-raised",
+                    children: /*#__PURE__*/ jsx(AvatarFallback, {
+                        className: "bg-surface-raised text-xs text-foreground-muted",
+                        children: "U"
+                    })
+                })
+            })
+        ]
+    });
+}
+function DefaultChatContent({ chatMessages }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex flex-1 flex-col justify-end gap-7 overflow-y-auto",
+        children: chatMessages.map((msg)=>'user' === msg.role ? /*#__PURE__*/ jsx("div", {
+                className: "flex flex-col items-end pr-6",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised px-6 py-4",
+                    children: /*#__PURE__*/ jsx("p", {
+                        className: "text-base leading-6 tracking-[-0.4px] text-foreground",
+                        children: msg.content
+                    })
+                })
+            }, msg.id) : /*#__PURE__*/ jsx("div", {
+                className: "flex items-center gap-2",
+                children: /*#__PURE__*/ jsx("p", {
+                    className: "text-base font-medium leading-5 text-foreground-muted",
+                    children: msg.content
+                })
+            }, msg.id))
+    });
+}
+function ChatInput() {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-3",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex h-12 items-center rounded-2xl border border-border bg-surface-raised px-4",
+                children: /*#__PURE__*/ jsx("input", {
+                    type: "text",
+                    placeholder: "Ask me to help build your Flow",
+                    className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-foreground-subtle outline-none",
+                    readOnly: true
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
+                                "aria-label": "Add attachment",
+                                children: /*#__PURE__*/ jsx(Plus, {
+                                    className: "h-5 w-5"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
+                                "aria-label": "Add workflow",
+                                children: /*#__PURE__*/ jsx(Workflow, {
+                                    className: "h-5 w-5"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent",
+                        "aria-label": "Submit message",
+                        children: /*#__PURE__*/ jsx(CornerDownLeft, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex h-full w-[420px] shrink-0 flex-col justify-between overflow-hidden bg-surface-overlay px-4 pb-4 pt-3",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-4 text-base tracking-[-0.6px] leading-9",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "font-bold text-foreground",
+                                children: "Flow"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "font-medium text-foreground-subtle",
+                                children: "Autopilot"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "text-foreground-muted transition-colors hover:text-foreground",
+                        onClick: onClose,
+                        "aria-label": "Close panel",
+                        children: /*#__PURE__*/ jsx(PanelRightOpen, {
+                            className: "h-5 w-5"
+                        })
+                    })
+                ]
+            }),
+            expandedContent ?? /*#__PURE__*/ jsx(DefaultChatContent, {
+                chatMessages: chatMessages
+            }),
+            /*#__PURE__*/ jsx(ChatInput, {})
+        ]
+    });
+}
+function FlowPanel({ className, open = false, onOpenChange, navItems = [], activeNavId, onNavChange, chatMessages = [], expandedContent }) {
+    const [internalActiveId, setInternalActiveId] = useState(navItems[0]?.id ?? '');
+    const activeId = activeNavId ?? internalActiveId;
+    const handleNavClick = (id)=>{
+        setInternalActiveId(id);
+        onNavChange?.(id);
+        onOpenChange?.(true);
+    };
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn('flex h-full', className),
+            children: [
+                /*#__PURE__*/ jsx(IconRail, {
+                    navItems: navItems,
+                    activeId: activeId,
+                    onNavClick: handleNavClick,
+                    hasShadow: open
+                }),
+                open && /*#__PURE__*/ jsx(ExpandedPanel, {
+                    chatMessages: chatMessages,
+                    expandedContent: expandedContent,
+                    onClose: ()=>onOpenChange?.(false)
+                })
+            ]
+        })
+    });
+}
+const defaultFlowNavItems = [
+    {
+        id: 'chat',
+        label: 'Chat',
+        icon: /*#__PURE__*/ jsx(MessageCircle, {
+            className: "h-5 w-5"
+        })
+    },
+    {
+        id: 'home',
+        label: 'Home',
+        icon: /*#__PURE__*/ jsx(House, {
+            className: "h-5 w-5"
+        })
+    },
+    {
+        id: 'flows',
+        label: 'Flows',
+        icon: /*#__PURE__*/ jsx(Workflow, {
+            className: "h-5 w-5"
+        })
+    }
+];
+export { FlowPanel, defaultFlowNavItems };

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

@@ -0,0 +1,74 @@
+"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__, {
+    MaestroPanel: ()=>MaestroPanel
+});
+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 MaestroPanel({ side, children, className, isCollapsed = false, onToggle }) {
+    const isExpanded = !isCollapsed;
+    const isLeft = 'left' === side;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('relative flex h-full shrink-0 flex-col bg-surface transition-all duration-300', isLeft ? 'border-r border-border-subtle' : 'border-l border-border-subtle', isExpanded ? 'w-[300px]' : 'w-8', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                className: "absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
+                style: {
+                    top: 28,
+                    ...isLeft ? {
+                        right: 0,
+                        transform: 'translateX(50%)'
+                    } : {
+                        left: 0,
+                        transform: 'translateX(-50%)'
+                    }
+                },
+                onClick: onToggle,
+                "aria-label": isExpanded ? 'Collapse panel' : 'Expand panel',
+                children: isLeft ? isExpanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronLeft, {
+                    className: "h-4 w-4"
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronRight, {
+                    className: "h-4 w-4"
+                }) : isExpanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronRight, {
+                    className: "h-4 w-4"
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronLeft, {
+                    className: "h-4 w-4"
+                })
+            }),
+            isExpanded && children
+        ]
+    });
+}
+exports.MaestroPanel = __webpack_exports__.MaestroPanel;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "MaestroPanel"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface MaestroPanelProps {
+    /** Determines border side, arrow direction, and arrow position */
+    side: 'left' | 'right';
+    /** Panel content — only rendered when expanded */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Controlled collapsed state */
+    isCollapsed?: boolean;
+    /** Callback when the toggle button is clicked */
+    onToggle?: () => void;
+}
+/**
+ * Collapsible panel for the Maestro template (controlled).
+ *
+ * Dimensions:
+ * - **Expanded**: 300px wide
+ * - **Collapsed**: 32px wide
+ * - **Height**: fills parent (`h-full`)
+ *
+ * The expand/collapse toggle button is a 28×28px circle that straddles
+ * the panel border — half inside the panel, half outside — positioned
+ * 28px from the top.
+ *
+ * Content is only rendered when expanded. Transition is 300ms.
+ *
+ * State is managed by the parent — pass `isCollapsed` and `onToggle`.
+ */
+export declare function MaestroPanel({ side, children, className, isCollapsed, onToggle, }: MaestroPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/index.js";
+function MaestroPanel({ side, children, className, isCollapsed = false, onToggle }) {
+    const isExpanded = !isCollapsed;
+    const isLeft = 'left' === side;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('relative flex h-full shrink-0 flex-col bg-surface transition-all duration-300', isLeft ? 'border-r border-border-subtle' : 'border-l border-border-subtle', isExpanded ? 'w-[300px]' : 'w-8', className),
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "absolute z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
+                style: {
+                    top: 28,
+                    ...isLeft ? {
+                        right: 0,
+                        transform: 'translateX(50%)'
+                    } : {
+                        left: 0,
+                        transform: 'translateX(-50%)'
+                    }
+                },
+                onClick: onToggle,
+                "aria-label": isExpanded ? 'Collapse panel' : 'Expand panel',
+                children: isLeft ? isExpanded ? /*#__PURE__*/ jsx(ChevronLeft, {
+                    className: "h-4 w-4"
+                }) : /*#__PURE__*/ jsx(ChevronRight, {
+                    className: "h-4 w-4"
+                }) : isExpanded ? /*#__PURE__*/ jsx(ChevronRight, {
+                    className: "h-4 w-4"
+                }) : /*#__PURE__*/ jsx(ChevronLeft, {
+                    className: "h-4 w-4"
+                })
+            }),
+            isExpanded && children
+        ]
+    });
+}
+export { MaestroPanel };