@uipath/apollo-wind 0.9.1 → 0.10.0-pr219.61d64eb

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

@@ -0,0 +1,280 @@
+"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__, {
+    DelegatePanel: ()=>DelegatePanel
+});
+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 collapsible_cjs_namespaceObject = require("../ui/collapsible.cjs");
+const scroll_area_cjs_namespaceObject = require("../ui/scroll-area.cjs");
+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 rounded-lg bg-brand shadow-sm', className),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            className: "text-xs font-bold text-foreground-on-accent select-none",
+            children: "Ui"
+        })
+    });
+}
+function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelect }) {
+    const isExpandable = Array.isArray(item.children);
+    if (!isExpandable) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+        className: "flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
+        onClick: onToggle,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+                children: item.icon
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-sm font-semibold",
+                children: item.label
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(collapsible_cjs_namespaceObject.Collapsible, {
+        open: isOpen,
+        onOpenChange: ()=>onToggle(),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                    className: "flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+                                    children: item.icon
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-sm font-semibold",
+                                    children: item.label
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "flex h-9 w-9 shrink-0 items-center justify-center",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                className: (0, index_cjs_namespaceObject.cn)('h-5 w-5 transition-transform duration-200', isOpen && 'rotate-180')
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(collapsible_cjs_namespaceObject.CollapsibleContent, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "flex flex-col",
+                    children: item.children?.map((child)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                            className: (0, index_cjs_namespaceObject.cn)('flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover', selectedChildId === child.id && 'bg-surface-hover text-foreground-on-accent'),
+                            onClick: ()=>onChildSelect?.(child.id),
+                            children: child.label
+                        }, child.id))
+                })
+            })
+        ]
+    });
+}
+function CollapsedNavItem({ item, isActive, onClick }) {
+    return /*#__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", {
+                    className: (0, index_cjs_namespaceObject.cn)('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', isActive && 'text-brand-foreground'),
+                    onClick: onClick,
+                    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', isActive && 'bg-brand-subtle'),
+                        children: item.icon
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipContent, {
+                side: "right",
+                children: item.label
+            })
+        ]
+    });
+}
+function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, onOpenChange, navItems = [], activeNavId: controlledActiveNavId, onNavChange, selectedChildId, onChildSelect }) {
+    const [internalOpen, setInternalOpen] = external_react_namespaceObject.useState(defaultOpen);
+    const panelOpen = controlledOpen ?? internalOpen;
+    const setPanelOpen = external_react_namespaceObject.useCallback((next)=>{
+        setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [
+        onOpenChange
+    ]);
+    const [internalActiveNavId, setInternalActiveNavId] = external_react_namespaceObject.useState(navItems[0]?.id ?? '');
+    const activeNavId = controlledActiveNavId ?? internalActiveNavId;
+    const setActiveNavId = external_react_namespaceObject.useCallback((id)=>{
+        setInternalActiveNavId(id);
+        onNavChange?.(id);
+    }, [
+        onNavChange
+    ]);
+    const [openSections, setOpenSections] = external_react_namespaceObject.useState(()=>{
+        const initial = {};
+        navItems.forEach((item)=>{
+            if (item.children && item.children.length > 0) initial[item.id] = item.defaultOpen ?? true;
+        });
+        return initial;
+    });
+    const toggleSection = (id)=>{
+        setOpenSections((prev)=>({
+                ...prev,
+                [id]: !prev[id]
+            }));
+    };
+    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 flex-col justify-between bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)] transition-[width] duration-300 ease-in-out', panelOpen ? 'w-80' : 'w-[60px]', className),
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "flex flex-1 flex-col overflow-hidden",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: (0, index_cjs_namespaceObject.cn)('flex shrink-0 items-center gap-2 pt-1', panelOpen ? 'pl-1 pr-4' : 'justify-center px-0 pt-3'),
+                            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, {})
+                                }),
+                                panelOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "flex flex-1 items-center justify-between",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            className: "flex items-center gap-[18px]",
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                                    type: "button",
+                                                    className: "text-foreground-muted transition-colors hover:text-foreground",
+                                                    "aria-label": "New conversation",
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MessageCirclePlus, {
+                                                        className: "h-5 w-5"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                                    type: "button",
+                                                    className: "text-foreground-muted transition-colors hover:text-foreground",
+                                                    "aria-label": "Picture in picture",
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PictureInPicture2, {
+                                                        className: "h-5 w-5"
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                            type: "button",
+                                            className: "text-foreground-muted transition-colors hover:text-foreground",
+                                            onClick: ()=>setPanelOpen(false),
+                                            "aria-label": "Collapse panel",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {
+                                                className: "h-5 w-5"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(scroll_area_cjs_namespaceObject.ScrollArea, {
+                            className: "flex-1",
+                            children: panelOpen ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
+                                className: "flex flex-col gap-1 px-3 pt-[18px]",
+                                children: navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExpandedNavItem, {
+                                        item: item,
+                                        isOpen: openSections[item.id] ?? false,
+                                        onToggle: ()=>{
+                                            if (item.children?.length) toggleSection(item.id);
+                                            setActiveNavId(item.id);
+                                        },
+                                        selectedChildId: selectedChildId,
+                                        onChildSelect: onChildSelect
+                                    }, item.id))
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("nav", {
+                                className: "flex flex-col items-center pt-[18px]",
+                                children: [
+                                    /*#__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", {
+                                                    className: "flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
+                                                    onClick: ()=>setPanelOpen(true),
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "flex h-9 w-9 items-center justify-center rounded-lg",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelRightOpen, {
+                                                            className: "h-5 w-5 -scale-x-100"
+                                                        })
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_cjs_namespaceObject.TooltipContent, {
+                                                side: "right",
+                                                children: "Expand panel"
+                                            })
+                                        ]
+                                    }),
+                                    navItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CollapsedNavItem, {
+                                            item: item,
+                                            isActive: activeNavId === item.id,
+                                            onClick: ()=>{
+                                                setActiveNavId(item.id);
+                                                setPanelOpen(true);
+                                            }
+                                        }, item.id))
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "flex h-[60px] shrink-0 items-center justify-start px-3",
+                    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"
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+exports.DelegatePanel = __webpack_exports__.DelegatePanel;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DelegatePanel"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export interface NavItem {
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+    children?: NavChildItem[];
+    /** Whether the collapsible section starts expanded. Defaults to true. */
+    defaultOpen?: boolean;
+}
+export interface NavChildItem {
+    id: string;
+    label: string;
+}
+export interface DelegatePanelProps {
+    className?: string;
+    /** Whether the panel starts expanded */
+    defaultOpen?: boolean;
+    /** Controlled open state (overrides internal state when provided) */
+    open?: boolean;
+    /** Callback when the panel open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Navigation items */
+    navItems?: NavItem[];
+    /** ID of the currently active top-level nav */
+    activeNavId?: string;
+    /** Callback when a top-level nav is activated */
+    onNavChange?: (navId: string) => void;
+    /** ID of the currently selected nav child */
+    selectedChildId?: string;
+    /** Callback when a nav child is selected */
+    onChildSelect?: (childId: string) => void;
+}
+/** Collapsible left-hand navigation panel for Delegate templates. */
+export declare function DelegatePanel({ className, defaultOpen, open: controlledOpen, onOpenChange, navItems, activeNavId: controlledActiveNavId, onNavChange, selectedChildId, onChildSelect, }: DelegatePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,246 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, MessageCirclePlus, PanelRightOpen, PictureInPicture2 } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Avatar, AvatarFallback } from "../ui/avatar.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { cn } from "../../lib/index.js";
+function UiPathLogo({ className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm', className),
+        children: /*#__PURE__*/ jsx("span", {
+            className: "text-xs font-bold text-foreground-on-accent select-none",
+            children: "Ui"
+        })
+    });
+}
+function ExpandedNavItem({ item, isOpen, onToggle, selectedChildId, onChildSelect }) {
+    const isExpandable = Array.isArray(item.children);
+    if (!isExpandable) return /*#__PURE__*/ jsxs("button", {
+        className: "flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
+        onClick: onToggle,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+                children: item.icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "text-sm font-semibold",
+                children: item.label
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Collapsible, {
+        open: isOpen,
+        onOpenChange: ()=>onToggle(),
+        children: [
+            /*#__PURE__*/ jsx(CollapsibleTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs("button", {
+                    className: "flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+                                    children: item.icon
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "text-sm font-semibold",
+                                    children: item.label
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex h-9 w-9 shrink-0 items-center justify-center",
+                            children: /*#__PURE__*/ jsx(ChevronDown, {
+                                className: cn('h-5 w-5 transition-transform duration-200', isOpen && 'rotate-180')
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(CollapsibleContent, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-col",
+                    children: item.children?.map((child)=>/*#__PURE__*/ jsx("button", {
+                            className: cn('flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover', selectedChildId === child.id && 'bg-surface-hover text-foreground-on-accent'),
+                            onClick: ()=>onChildSelect?.(child.id),
+                            children: child.label
+                        }, child.id))
+                })
+            })
+        ]
+    });
+}
+function CollapsedNavItem({ item, isActive, onClick }) {
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("button", {
+                    className: cn('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', isActive && 'text-brand-foreground'),
+                    onClick: onClick,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: cn('flex h-9 w-9 items-center justify-center rounded-lg transition-colors', isActive && 'bg-brand-subtle'),
+                        children: item.icon
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: "right",
+                children: item.label
+            })
+        ]
+    });
+}
+function DelegatePanel({ className, defaultOpen = true, open: controlledOpen, onOpenChange, navItems = [], activeNavId: controlledActiveNavId, onNavChange, selectedChildId, onChildSelect }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const panelOpen = controlledOpen ?? internalOpen;
+    const setPanelOpen = useCallback((next)=>{
+        setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [
+        onOpenChange
+    ]);
+    const [internalActiveNavId, setInternalActiveNavId] = useState(navItems[0]?.id ?? '');
+    const activeNavId = controlledActiveNavId ?? internalActiveNavId;
+    const setActiveNavId = useCallback((id)=>{
+        setInternalActiveNavId(id);
+        onNavChange?.(id);
+    }, [
+        onNavChange
+    ]);
+    const [openSections, setOpenSections] = useState(()=>{
+        const initial = {};
+        navItems.forEach((item)=>{
+            if (item.children && item.children.length > 0) initial[item.id] = item.defaultOpen ?? true;
+        });
+        return initial;
+    });
+    const toggleSection = (id)=>{
+        setOpenSections((prev)=>({
+                ...prev,
+                [id]: !prev[id]
+            }));
+    };
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn('flex flex-col justify-between bg-surface-overlay shadow-[0px_4px_24px_0px_rgba(0,0,0,0.25)] transition-[width] duration-300 ease-in-out', panelOpen ? 'w-80' : 'w-[60px]', className),
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex flex-1 flex-col overflow-hidden",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: cn('flex shrink-0 items-center gap-2 pt-1', panelOpen ? 'pl-1 pr-4' : 'justify-center px-0 pt-3'),
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex h-[60px] w-[60px] shrink-0 items-center justify-center",
+                                    children: /*#__PURE__*/ jsx(UiPathLogo, {})
+                                }),
+                                panelOpen && /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-1 items-center justify-between",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center gap-[18px]",
+                                            children: [
+                                                /*#__PURE__*/ jsx("button", {
+                                                    type: "button",
+                                                    className: "text-foreground-muted transition-colors hover:text-foreground",
+                                                    "aria-label": "New conversation",
+                                                    children: /*#__PURE__*/ jsx(MessageCirclePlus, {
+                                                        className: "h-5 w-5"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("button", {
+                                                    type: "button",
+                                                    className: "text-foreground-muted transition-colors hover:text-foreground",
+                                                    "aria-label": "Picture in picture",
+                                                    children: /*#__PURE__*/ jsx(PictureInPicture2, {
+                                                        className: "h-5 w-5"
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: "text-foreground-muted transition-colors hover:text-foreground",
+                                            onClick: ()=>setPanelOpen(false),
+                                            "aria-label": "Collapse panel",
+                                            children: /*#__PURE__*/ jsx(PanelRightOpen, {
+                                                className: "h-5 w-5"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(ScrollArea, {
+                            className: "flex-1",
+                            children: panelOpen ? /*#__PURE__*/ jsx("nav", {
+                                className: "flex flex-col gap-1 px-3 pt-[18px]",
+                                children: navItems.map((item)=>/*#__PURE__*/ jsx(ExpandedNavItem, {
+                                        item: item,
+                                        isOpen: openSections[item.id] ?? false,
+                                        onToggle: ()=>{
+                                            if (item.children?.length) toggleSection(item.id);
+                                            setActiveNavId(item.id);
+                                        },
+                                        selectedChildId: selectedChildId,
+                                        onChildSelect: onChildSelect
+                                    }, item.id))
+                            }) : /*#__PURE__*/ jsxs("nav", {
+                                className: "flex flex-col items-center pt-[18px]",
+                                children: [
+                                    /*#__PURE__*/ jsxs(Tooltip, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                asChild: true,
+                                                children: /*#__PURE__*/ jsx("button", {
+                                                    className: "flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
+                                                    onClick: ()=>setPanelOpen(true),
+                                                    children: /*#__PURE__*/ jsx("div", {
+                                                        className: "flex h-9 w-9 items-center justify-center rounded-lg",
+                                                        children: /*#__PURE__*/ jsx(PanelRightOpen, {
+                                                            className: "h-5 w-5 -scale-x-100"
+                                                        })
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(TooltipContent, {
+                                                side: "right",
+                                                children: "Expand panel"
+                                            })
+                                        ]
+                                    }),
+                                    navItems.map((item)=>/*#__PURE__*/ jsx(CollapsedNavItem, {
+                                            item: item,
+                                            isActive: activeNavId === item.id,
+                                            onClick: ()=>{
+                                                setActiveNavId(item.id);
+                                                setPanelOpen(true);
+                                            }
+                                        }, item.id))
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex h-[60px] shrink-0 items-center justify-start px-3",
+                    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"
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+export { DelegatePanel };