@neasg/design-system 0.4.8 → 0.4.9

package/dist/layout.js

@@ -2,21 +2,87 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { GripVertical } from "lucide-react";
 import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { ChevronLeftIcon } from "./animated-icons/chevron-left";
 import { ChevronRightIcon } from "./animated-icons/chevron-right";
-import { Badge } from "./badge";
+import { AvatarProfile } from "./avatar";
 import { Button } from "./button";
 import { CountBadge } from "./count-badge";
+import { ScrollHint } from "./scroll-hint";
+import { Tabs } from "./tabs";
 import { Tooltip } from "./tooltip";
+import { Typography } from "./typography";
 import { cn } from "./lib/utils";
+import { rightPanelEdgeClassName, rightPanelEdgeClosedClassName, rightPanelEdgeOpenClassName, rightPanelResizeHandleSurfaceClassName, } from "./layout-right-panel-edge";
 const COLLAPSE_BREAKPOINT = 1280;
+const RIGHT_PANEL_AUTO_COLLAPSE_BREAKPOINT = 1600;
+const RIGHT_PANEL_TRANSITION_MS = 300;
+const RIGHT_PANEL_RESIZE_DEFAULT_WIDTH = 432;
+const RIGHT_PANEL_RESIZE_MIN_WIDTH = 320;
+const RIGHT_PANEL_RESIZE_MAX_WIDTH = 640;
+const RIGHT_PANEL_FIXED_WIDTH_RATIO = 0.24;
+const RIGHT_PANEL_SCROLL_HINT_THRESHOLD = 8;
+const collapsedSidebarControlClassName = "h-control min-h-control w-control min-w-control max-w-control shrink-0 rounded-control p-0";
 const TOP_OFFSET_CSS_VAR = "--layout-top-offset";
 const SidebarContext = React.createContext(undefined);
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-export function SidebarProvider({ children }) {
-    const [isCollapsed, setIsCollapsed] = React.useState(false);
-    const manualCollapsedRef = React.useRef(false);
+function useScrollOverflowHint() {
+    const scrollRef = React.useRef(null);
+    const [canScrollDown, setCanScrollDown] = React.useState(false);
+    const updateScrollHint = React.useCallback(() => {
+        const node = scrollRef.current;
+        if (!node) {
+            setCanScrollDown(false);
+            return;
+        }
+        const nextCanScrollDown = node.scrollHeight - node.scrollTop - node.clientHeight >
+            RIGHT_PANEL_SCROLL_HINT_THRESHOLD;
+        setCanScrollDown((current) => current === nextCanScrollDown ? current : nextCanScrollDown);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        updateScrollHint();
+    });
+    useIsomorphicLayoutEffect(() => {
+        const node = scrollRef.current;
+        if (!node) {
+            setCanScrollDown(false);
+            return undefined;
+        }
+        updateScrollHint();
+        node.addEventListener("scroll", updateScrollHint, { passive: true });
+        window.addEventListener("resize", updateScrollHint);
+        const resizeObserver = typeof ResizeObserver === "undefined"
+            ? undefined
+            : new ResizeObserver(() => updateScrollHint());
+        const mutationObserver = typeof MutationObserver === "undefined"
+            ? undefined
+            : new MutationObserver(() => updateScrollHint());
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(node);
+        Array.from(node.children).forEach((child) => {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(child);
+        });
+        mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.observe(node, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        return () => {
+            node.removeEventListener("scroll", updateScrollHint);
+            window.removeEventListener("resize", updateScrollHint);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
+        };
+    }, [updateScrollHint]);
+    return { scrollRef, canScrollDown };
+}
+export function SidebarProvider({ children, defaultCollapsed = false, }) {
+    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+    const manualCollapsedRef = React.useRef(defaultCollapsed);
+    const collapse = React.useCallback(() => {
+        setIsCollapsed(true);
+        manualCollapsedRef.current = true;
+    }, []);
     const toggle = () => {
         setIsCollapsed((prev) => {
             const next = !prev;
@@ -37,7 +103,7 @@ export function SidebarProvider({ children }) {
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, []);
-    return (_jsx(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: children }));
+    return (_jsx(SidebarContext.Provider, { value: { isCollapsed, toggle, collapse }, children: children }));
 }
 export function useSidebar() {
     const context = React.useContext(SidebarContext);
@@ -46,7 +112,7 @@ export function useSidebar() {
     }
     return context;
 }
-function DashboardLayout({ className, masthead, prototypeBanner, sidebar, surfaceClassName, contentClassName, children, style, ...props }) {
+function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed = false, children, style, ...props }) {
     const chromeRef = React.useRef(null);
     const [topOffset, setTopOffset] = React.useState(0);
     const layoutStyle = React.useMemo(() => ({
@@ -71,18 +137,18 @@ function DashboardLayout({ className, masthead, prototypeBanner, sidebar, surfac
         observer.observe(node);
         return () => observer.disconnect();
     }, [masthead, prototypeBanner]);
-    return (_jsx(SidebarProvider, { children: _jsxs("div", { className: cn("flex min-h-screen flex-col bg-[hsl(var(--layout-shell-background))]", className), style: layoutStyle, ...props, children: [masthead || prototypeBanner ? (_jsxs("div", { ref: chromeRef, className: "sticky top-0 z-40 shrink-0", children: [masthead, prototypeBanner] })) : null, _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx(DashboardContent, { className: contentClassName, surfaceClassName: surfaceClassName, children: children })] })] }) }));
+    return (_jsx(SidebarProvider, { defaultCollapsed: defaultSidebarCollapsed, children: _jsxs("div", { className: cn("flex min-h-screen flex-col bg-[hsl(var(--layout-shell-background))]", className), style: layoutStyle, ...props, children: [masthead || prototypeBanner ? (_jsxs("div", { ref: chromeRef, className: "sticky top-0 z-40 shrink-0", children: [masthead, prototypeBanner] })) : null, _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx(DashboardContent, { className: contentClassName, hasSidebar: Boolean(sidebar), rightPanel: rightPanel, rightPanelClassName: rightPanelClassName, rightPanelFallbackTrigger: rightPanelFallbackTrigger, rightPanelMode: rightPanelMode, rightPanelResizable: rightPanelResizable, rightPanelDefaultWidth: rightPanelDefaultWidth, rightPanelMinWidth: rightPanelMinWidth, rightPanelMaxWidth: rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint: rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName: surfaceClassName, children: children })] })] }) }));
 }
 function SidebarShell({ isCollapsed, className, children, ...props }) {
-    return (_jsx("aside", { className: cn("fixed left-0 top-[var(--layout-top-offset)] z-30 flex h-[calc(100dvh-var(--layout-top-offset))] shrink-0 flex-col overflow-hidden bg-[hsl(var(--layout-shell-background))] pb-2 pl-[var(--layout-sidebar-padding-inline)] pt-[var(--layout-sidebar-padding-top)] transition-all duration-300 ease-in-out", isCollapsed
-            ? "w-[var(--layout-sidebar-collapsed-width)]"
-            : "w-[var(--layout-sidebar-width)]", className), ...props, children: children }));
+    return (_jsx("aside", { className: cn("fixed left-0 top-[var(--layout-top-offset)] z-30 flex h-[calc(100dvh-var(--layout-top-offset))] shrink-0 flex-col bg-[hsl(var(--layout-sidebar-background))] pb-2 pt-[var(--layout-sidebar-padding-top)] transition-all duration-300 ease-in-out", isCollapsed
+            ? "w-[var(--layout-sidebar-collapsed-width)] overflow-visible px-[var(--layout-sidebar-padding-inline)]"
+            : "w-[var(--layout-sidebar-width)] overflow-hidden px-[var(--layout-sidebar-padding-inline)]", className), ...props, children: children }));
 }
 function SidebarHeader({ className, children, }) {
     return _jsx("div", { className: cn("shrink-0", className), children: children });
 }
 function SidebarContent({ className, children, }) {
-    return (_jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: children }));
+    return (_jsx("div", { className: cn("scrollbar-none flex-1 overflow-y-auto", className), children: children }));
 }
 function SidebarFooter({ className, children, }) {
     return _jsx("div", { className: cn("shrink-0", className), children: children });
@@ -91,20 +157,22 @@ function SidebarGroup({ className, children, }) {
     return _jsx("div", { className: className, children: children });
 }
 function SidebarGroupLabel({ className, children, }) {
-    return (_jsx("p", { className: cn("px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground", className), children: children }));
+    return (_jsx("p", { className: cn("px-2.5 py-1 text-xs font-normal text-muted-foreground/70", className), children: children }));
 }
 function SidebarMenu({ className, children, }) {
-    return _jsx("ul", { className: cn("space-y-1", className), children: children });
+    return _jsx("ul", { className: cn("space-y-0.5", className), children: children });
 }
-function SidebarMenuItem({ className, children, }) {
-    return _jsx("li", { className: className, children: children });
+function SidebarMenuItem({ className, children, collapsed = false, }) {
+    return (_jsx("li", { className: cn(collapsed && "flex h-control w-full items-center justify-center", className), children: children }));
 }
-const SidebarMenuButton = React.forwardRef(({ active = false, collapsed = false, disabled = false, className, asChild = false, children, ...props }, ref) => {
-    return (_jsx(Button, { ref: ref, asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-control w-full justify-start gap-3 rounded-lg text-sm font-medium shadow-none", collapsed ? "justify-center px-3" : "px-3", disabled
+const SidebarMenuButton = React.forwardRef(({ active = false, collapsed = false, depth: _depth = 0, disabled = false, className, asChild = false, children, ...props }, ref) => {
+    return (_jsx(Button, { ref: ref, asChild: asChild, variant: "ghost", size: collapsed ? "icon" : "default", disabled: disabled, className: cn("relative text-sm font-medium shadow-none transition-[background-color,color,box-shadow] duration-150", collapsed
+            ? cn(collapsedSidebarControlClassName, "gap-0")
+            : "h-control w-full justify-start gap-2.5 px-3", disabled
             ? "text-muted-foreground/50 hover:bg-transparent hover:text-muted-foreground/50"
             : active
-                ? "bg-white text-foreground hover:bg-white hover:text-foreground"
-                : "text-muted-foreground hover:bg-white hover:text-foreground", className), ...props, children: children }));
+                ? "border-none bg-card text-card-foreground shadow-sm hover:bg-card hover:text-card-foreground"
+                : "text-muted-foreground hover:bg-card hover:text-foreground", className), ...props, children: children }));
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
 function isDropdownSidebarItem(item) {
@@ -126,10 +194,13 @@ function renderSidebarSlot(slot, isCollapsed) {
     return slot !== null && slot !== void 0 ? slot : null;
 }
 function DashboardSidebarItemButton({ item, isCollapsed, active, expanded, depth = 0, onClick, ariaExpanded, }) {
+    var _a;
     const Icon = item.icon;
     const iconRef = React.useRef(null);
-    const showWipBadge = item.disabled || item.wip;
     const hasDropdown = isDropdownSidebarItem(item);
+    const hasCollapsedBadge = isCollapsed && item.badgeCount !== undefined;
+    const shouldRenderIconSlot = Boolean(Icon) || isCollapsed;
+    const collapsedBadge = hasCollapsedBadge ? (_jsx(CountBadge, { count: (_a = item.badgeCount) !== null && _a !== void 0 ? _a : 0, max: 9, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "pointer-events-none absolute -right-1.5 -top-1.5 z-10" })) : null;
     const handleMouseEnter = () => {
         var _a, _b, _c;
         if (!item.disabled) {
@@ -144,15 +215,24 @@ function DashboardSidebarItemButton({ item, isCollapsed, active, expanded, depth
             (_c = item.onHoverEnd) === null || _c === void 0 ? void 0 : _c.call(item);
         }
     };
-    const content = (_jsxs(_Fragment, { children: [Icon ? (_jsxs("div", { className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [_jsx(Icon, { ref: iconRef, size: 16 }), isCollapsed && item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "absolute -right-2 -top-2" })) : null] })) : (_jsxs("div", { "aria-hidden": "true", className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current/35" }), isCollapsed && item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "absolute -right-2 -top-2" })) : null] })), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-left", children: item.label }), showWipBadge ? _jsx(Badge, { variant: "muted", children: "WIP" }) : null, item.trailing, item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "md", pulse: item.badgePulse })) : null, hasDropdown ? (_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("shrink-0 text-muted-foreground transition-transform duration-200", expanded && "rotate-180 text-foreground"), size: 16 })) : null] })) : null] }));
-    const tooltipLabel = `${item.label}${showWipBadge ? " (WIP)" : ""}`;
-    const button = (_jsx(SidebarMenuButton, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, onClick: onClick, disabled: item.disabled, active: active, collapsed: isCollapsed, "aria-current": active && !hasDropdown ? "page" : undefined, "aria-expanded": ariaExpanded, "aria-label": isCollapsed ? tooltipLabel : undefined, children: content }));
-    const interactive = !hasDropdown && item.href && !item.disabled ? (_jsx(SidebarMenuButton, { asChild: true, onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, active: active, collapsed: isCollapsed, "aria-current": active ? "page" : undefined, "aria-label": isCollapsed ? tooltipLabel : undefined, children: _jsx("a", { href: item.href, target: item.target, rel: item.rel, children: content }) })) : (button);
+    const content = (_jsxs(_Fragment, { children: [Icon ? (_jsx("div", { className: cn("relative flex h-6 w-6 shrink-0 items-center justify-center transition-transform", hasCollapsedBadge && "translate-y-0.5"), children: _jsx(Icon, { ref: iconRef, size: 18 }) })) : shouldRenderIconSlot ? (_jsx("div", { "aria-hidden": "true", className: cn("relative flex h-6 w-6 shrink-0 items-center justify-center transition-transform", hasCollapsedBadge && "translate-y-0.5"), children: _jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current/35" }) })) : null, !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-left", children: item.label }), item.trailing, item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "md", pulse: item.badgePulse })) : null, hasDropdown ? (_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("shrink-0 text-muted-foreground transition-transform duration-200", expanded && "rotate-180 text-foreground"), size: 18 })) : null] })) : null] }));
+    const tooltipLabel = item.label;
+    const button = (_jsx(SidebarMenuButton, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, onClick: onClick, disabled: item.disabled, active: active, collapsed: isCollapsed, depth: depth, "aria-current": active && !hasDropdown ? "page" : undefined, "aria-expanded": ariaExpanded, "aria-label": isCollapsed ? tooltipLabel : undefined, children: content }));
+    const interactive = !hasDropdown && item.href && !item.disabled ? (_jsx(SidebarMenuButton, { asChild: true, onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, active: active, collapsed: isCollapsed, depth: depth, "aria-current": active ? "page" : undefined, "aria-label": isCollapsed ? tooltipLabel : undefined, children: _jsx("a", { href: item.href, target: item.target, rel: item.rel, children: content }) })) : (button);
     if (isCollapsed) {
-        return (_jsx(Tooltip, { side: "right", content: _jsx("p", { children: tooltipLabel }), children: item.disabled ? (_jsx("span", { className: "block w-full cursor-not-allowed", children: interactive })) : (interactive) }));
+        return (_jsx(Tooltip, { side: "right", content: _jsx("p", { children: tooltipLabel }), children: _jsxs("span", { className: cn("relative inline-flex h-control w-control shrink-0 items-center justify-center overflow-visible", item.disabled && "cursor-not-allowed"), children: [interactive, collapsedBadge] }) }));
     }
     return interactive;
 }
+function DashboardSidebarProfile({ isCollapsed = false, status = "online", name, role, rolePlacement = "below", size = "sm", ...props }) {
+    const statusClassName = {
+        online: "bg-primary",
+        busy: "bg-[hsl(var(--status-warning-foreground))]",
+        offline: "bg-muted-foreground",
+        none: "",
+    }[status];
+    return (_jsx("div", { className: cn(isCollapsed ? "px-0" : "px-2", "pb-4 pt-2"), children: _jsx(AvatarProfile, { ...props, size: size, name: isCollapsed ? undefined : name, role: isCollapsed ? undefined : role, rolePlacement: rolePlacement, className: cn("rounded-control px-2 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", isCollapsed ? "justify-center px-0" : "min-w-0"), avatarClassName: "h-9 w-9 ring-1 ring-border/60 shadow-sm", fallbackClassName: "bg-background text-foreground", avatarOverlay: status === "none" ? undefined : (_jsx("span", { className: cn("absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-[hsl(var(--layout-sidebar-background))] shadow-sm", statusClassName) })) }) }));
+}
 function DashboardSidebarLeafItem({ item, isCollapsed, depth = 0, }) {
     return (_jsx(DashboardSidebarItemButton, { item: item, isCollapsed: isCollapsed, active: sidebarItemIsActive(item), depth: depth, onClick: item.onClick }));
 }
@@ -192,7 +272,7 @@ function DashboardSidebarDropdownItem({ item, isCollapsed, depth = 0, }) {
         }
         handleOpenChange(!expanded);
     }, [expanded, handleOpenChange, isCollapsed, item.disabled, setExpanded, toggle]);
-    return (_jsxs(CollapsiblePrimitive.Root, { open: expanded, onOpenChange: handleOpenChange, children: [_jsx(DashboardSidebarItemButton, { item: item, isCollapsed: isCollapsed, active: item.active || hasActiveDescendant, expanded: expanded, depth: depth, onClick: handleClick, ariaExpanded: isCollapsed ? undefined : expanded }), !isCollapsed ? (_jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden", children: _jsx("div", { className: "ml-5 mt-1 border-l border-border/70 pl-2", children: _jsx(SidebarMenu, { className: "space-y-1", children: item.items.map((child) => (_jsx(SidebarMenuItem, { children: _jsx(DashboardSidebarItem, { item: child, isCollapsed: false, depth: depth + 1 }) }, child.id))) }) }) })) : null] }));
+    return (_jsxs(CollapsiblePrimitive.Root, { open: expanded, onOpenChange: handleOpenChange, children: [_jsx(DashboardSidebarItemButton, { item: item, isCollapsed: isCollapsed, active: item.active || hasActiveDescendant, expanded: expanded, depth: depth, onClick: handleClick, ariaExpanded: isCollapsed ? undefined : expanded }), !isCollapsed ? (_jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden", children: _jsx("div", { className: "ml-5 mt-1 border-l border-[hsl(var(--layout-sidebar-border))] pl-2", children: _jsx(SidebarMenu, { className: "space-y-1", children: item.items.map((child) => (_jsx(SidebarMenuItem, { collapsed: isCollapsed, children: _jsx(DashboardSidebarItem, { item: child, isCollapsed: false, depth: depth + 1 }) }, child.id))) }) }) })) : null] }));
 }
 function DashboardSidebarItem({ item, isCollapsed, depth = 0, }) {
     if (isDropdownSidebarItem(item)) {
@@ -211,20 +291,344 @@ function DashboardSidebar({ className, children, logo, search, navGroups, footer
     if (!hasStructuredSidebar) {
         return (_jsx(SidebarShell, { isCollapsed: isCollapsed, className: className, ...props, children: children }));
     }
-    return (_jsxs(SidebarShell, { isCollapsed: isCollapsed, className: className, ...props, children: [_jsxs(SidebarHeader, { className: cn("flex h-14 items-center gap-2", isCollapsed ? "justify-center px-2" : "justify-between px-3"), children: [renderSidebarSlot(logo, isCollapsed), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": toggleAriaLabel, className: "h-7 w-7 shrink-0", onClick: toggle, children: isCollapsed ? (_jsx(ChevronRightIcon, { size: 16 })) : (_jsx(ChevronLeftIcon, { size: 16 })) })] }), search ? (_jsx(SidebarHeader, { className: "px-2 pb-3 pt-2", children: renderSidebarSlot(search, isCollapsed) })) : null, search || ((_a = navGroups === null || navGroups === void 0 ? void 0 : navGroups.length) !== null && _a !== void 0 ? _a : 0) > 0 ? (_jsx(SidebarHeader, { className: "mx-2 mb-2 border-t" })) : null, (navGroups === null || navGroups === void 0 ? void 0 : navGroups.length) ? (_jsx(SidebarContent, { className: "p-2", children: _jsx("nav", { "aria-label": "Sidebar navigation", children: navGroups.map((group, groupIndex) => {
+    return (_jsxs(SidebarShell, { isCollapsed: isCollapsed, className: className, ...props, children: [_jsxs(SidebarHeader, { className: cn("flex h-14 items-center gap-2", isCollapsed ? "justify-center px-0" : "justify-between px-3"), children: [renderSidebarSlot(logo, isCollapsed), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": toggleAriaLabel, className: cn("shrink-0 rounded-control", isCollapsed ? collapsedSidebarControlClassName : "h-7 w-7"), onClick: toggle, children: isCollapsed ? (_jsx(ChevronRightIcon, { size: 16 })) : (_jsx(ChevronLeftIcon, { size: 16 })) })] }), search ? (_jsx(SidebarHeader, { className: cn(isCollapsed
+                    ? "flex justify-center px-0 pb-3 pt-2"
+                    : "px-2 pb-3 pt-2"), children: renderSidebarSlot(search, isCollapsed) })) : null, search || ((_a = navGroups === null || navGroups === void 0 ? void 0 : navGroups.length) !== null && _a !== void 0 ? _a : 0) > 0 ? (_jsx(SidebarHeader, { className: "mx-2 mb-2 border-t border-[hsl(var(--layout-sidebar-border))]" })) : null, (navGroups === null || navGroups === void 0 ? void 0 : navGroups.length) ? (_jsx(SidebarContent, { className: cn(isCollapsed
+                    ? "overflow-visible p-0"
+                    : "p-[var(--layout-sidebar-content-padding)]"), children: _jsx("nav", { "aria-label": "Sidebar navigation", children: navGroups.map((group, groupIndex) => {
                         var _a;
-                        return (_jsxs(SidebarGroup, { children: [isCollapsed && groupIndex > 0 ? (_jsx("div", { className: "mx-2 my-2 border-t" })) : null, _jsxs("div", { className: cn(!isCollapsed && groupIndex > 0 && "mt-4"), children: [!isCollapsed && group.label ? (_jsx(SidebarGroupLabel, { children: group.label })) : null, _jsx(SidebarMenu, { children: group.items.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isCollapsed }) }, item.id))) })] })] }, `${(_a = group.label) !== null && _a !== void 0 ? _a : "group"}-${groupIndex}`));
-                    }) }) })) : null, (footerItems === null || footerItems === void 0 ? void 0 : footerItems.length) ? (_jsx(SidebarFooter, { className: "px-2 py-1", children: _jsx(SidebarMenu, { children: footerItems.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isCollapsed }) }, item.id))) }) })) : null, footer ? _jsx(SidebarFooter, { className: "mx-2 mt-2 border-t pt-2" }) : null, footer ? (_jsx(SidebarFooter, { children: renderSidebarSlot(footer, isCollapsed) })) : null] }));
+                        return (_jsxs(SidebarGroup, { children: [isCollapsed && groupIndex > 0 ? (_jsx("div", { className: "mx-2 my-2 border-t border-[hsl(var(--layout-sidebar-border))]" })) : null, _jsxs("div", { className: cn(!isCollapsed &&
+                                        groupIndex > 0 &&
+                                        "mt-[var(--layout-sidebar-section-gap)]"), children: [!isCollapsed && group.label ? (_jsx(SidebarGroupLabel, { children: group.label })) : null, _jsx(SidebarMenu, { children: group.items.map((item) => (_jsx(SidebarMenuItem, { collapsed: isCollapsed, children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isCollapsed }) }, item.id))) })] })] }, `${(_a = group.label) !== null && _a !== void 0 ? _a : "group"}-${groupIndex}`));
+                    }) }) })) : null, (footerItems === null || footerItems === void 0 ? void 0 : footerItems.length) ? (_jsx(SidebarFooter, { className: cn(isCollapsed ? "px-0 py-1" : "px-1.5 py-1"), children: _jsx(SidebarMenu, { children: footerItems.map((item) => (_jsx(SidebarMenuItem, { collapsed: isCollapsed, children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isCollapsed }) }, item.id))) }) })) : null, footer ? _jsx(SidebarFooter, { className: "mx-1.5 mt-1.5 border-t border-[hsl(var(--layout-sidebar-border))] pt-1.5" }) : null, footer ? (_jsx(SidebarFooter, { children: renderSidebarSlot(footer, isCollapsed) })) : null] }));
 }
-function DashboardContent({ className, surfaceClassName, children, ...props }) {
-    const { isCollapsed, toggle } = useSidebar();
+function DashboardRightPanelSection({ className, title, description, titleClassName, descriptionClassName, children, ...props }) {
+    return (_jsxs("section", { className: cn("space-y-[var(--layout-right-panel-section-gap)]", className), ...props, children: [title || description ? (_jsxs("div", { className: "space-y-[var(--layout-right-panel-heading-gap)]", children: [title ? (_jsx(Typography, { as: "h3", variant: "body", className: cn("font-semibold", titleClassName), children: title })) : null, description ? (_jsx(Typography, { as: "p", variant: "caption", className: descriptionClassName, children: description })) : null] })) : null, children] }));
+}
+function DashboardRightPanelTabs({ className, listWrapperClassName, panelClassName, ...props }) {
+    return (_jsx(Tabs, { className: cn("flex min-h-0 flex-1 flex-col space-y-0", className), listWrapperClassName: cn("scrollbar-none w-full min-w-0 max-w-full shrink-0 self-stretch overflow-x-auto overflow-y-hidden px-[var(--layout-right-panel-padding)] pb-[var(--layout-right-panel-tabs-gap)] pt-[var(--layout-right-panel-padding)]", listWrapperClassName), panelClassName: cn("min-h-0 flex-1 flex-col overflow-hidden pt-0 data-[state=active]:flex", panelClassName), ...props }));
+}
+function DashboardRightPanel({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex min-h-0 flex-1 flex-col bg-[hsl(var(--layout-right-panel-background))]", className), ...props }));
+}
+function DashboardRightPanelHeader({ className, title, subtitle, badge, action, children, ...props }) {
+    return (_jsx("div", { className: cn("shrink-0 p-[var(--layout-right-panel-padding)]", className), ...props, children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Typography, { as: "h2", variant: "body", className: "font-semibold", children: title }), badge] }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", children: subtitle })) : null, children] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }) }));
+}
+function DashboardRightPanelBody({ className, contentClassName, footer, footerClassName, children, ...props }) {
+    const { scrollRef, canScrollDown } = useScrollOverflowHint();
+    if (footer) {
+        return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden p-[var(--layout-right-panel-padding)]", className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto", contentClassName), children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }), _jsx("div", { className: cn("shrink-0 space-y-[var(--layout-right-panel-footer-gap)] pt-[var(--layout-right-panel-gap)]", footerClassName), children: footer })] }));
+    }
+    return (_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto p-[var(--layout-right-panel-padding)]", className), ...props, children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }));
+}
+function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode = "responsive", rightPanelResizable = false, rightPanelDefaultWidth = RIGHT_PANEL_RESIZE_DEFAULT_WIDTH, rightPanelMinWidth = RIGHT_PANEL_RESIZE_MIN_WIDTH, rightPanelMaxWidth = RIGHT_PANEL_RESIZE_MAX_WIDTH, rightPanelAutoCollapseSidebarBreakpoint = RIGHT_PANEL_AUTO_COLLAPSE_BREAKPOINT, surfaceClassName, children, ...props }) {
+    const { isCollapsed, toggle, collapse } = useSidebar();
+    const hasRightPanel = Boolean(rightPanel);
+    const persistentRightPanelMinWidth = Math.min(rightPanelMinWidth, rightPanelMaxWidth);
+    const persistentRightPanelMaxWidth = Math.max(rightPanelMinWidth, rightPanelMaxWidth);
+    const [persistentRightPanelWidth, setPersistentRightPanelWidth] = React.useState(rightPanelDefaultWidth);
+    const persistentRightPanelWidthRef = React.useRef(persistentRightPanelWidth);
+    const workspaceSurfaceRef = React.useRef(null);
+    const persistentRightPanelSlotRef = React.useRef(null);
+    const persistentRightPanelSurfaceRef = React.useRef(null);
+    const [renderedRightPanel, setRenderedRightPanel] = React.useState(rightPanel);
+    const [shouldRenderRightPanel, setShouldRenderRightPanel] = React.useState(hasRightPanel);
+    const [rightPanelOpen, setRightPanelOpen] = React.useState(hasRightPanel);
+    const [rightPanelOverlayOpen, setRightPanelOverlayOpen] = React.useState(false);
+    const [fixedRightPanelWidth, setFixedRightPanelWidth] = React.useState(null);
+    const wasRightPanelVisibleRef = React.useRef(hasRightPanel);
+    const isCollapsedRef = React.useRef(isCollapsed);
+    const hasPersistentRightPanel = rightPanelMode === "persistent" && shouldRenderRightPanel;
+    const isPersistentRightPanelResizable = hasPersistentRightPanel && rightPanelResizable;
+    const firstChild = React.Children.toArray(children).find((child) => child !== null && child !== undefined);
+    const hasLeadingWorkspaceHeader = React.isValidElement(firstChild) &&
+        firstChild.type.displayName ===
+            "WorkspaceHeader";
+    React.useEffect(() => {
+        isCollapsedRef.current = isCollapsed;
+    }, [isCollapsed]);
+    React.useEffect(() => {
+        persistentRightPanelWidthRef.current = persistentRightPanelWidth;
+    }, [persistentRightPanelWidth]);
+    const getPersistentRightPanelGridTemplate = React.useCallback((width) => `minmax(0, 1fr) ${width}px`, []);
+    const getFixedPersistentRightPanelGridTemplate = React.useCallback((width, isOpen) => `minmax(0, 1fr) ${isOpen
+        ? width
+            ? `${width}px`
+            : `${RIGHT_PANEL_FIXED_WIDTH_RATIO * 100}%`
+        : "0px"}`, []);
+    const measureFixedRightPanelWidth = React.useCallback(() => {
+        var _a, _b;
+        const surfaceWidth = (_b = (_a = workspaceSurfaceRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+        if (surfaceWidth <= 0) {
+            return null;
+        }
+        return Math.round(surfaceWidth * RIGHT_PANEL_FIXED_WIDTH_RATIO);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        if (!isPersistentRightPanelResizable) {
+            return;
+        }
+        const width = `${persistentRightPanelWidth}px`;
+        if (workspaceSurfaceRef.current) {
+            workspaceSurfaceRef.current.style.gridTemplateColumns =
+                getPersistentRightPanelGridTemplate(rightPanelOpen ? persistentRightPanelWidth : 0);
+        }
+        if (persistentRightPanelSurfaceRef.current) {
+            persistentRightPanelSurfaceRef.current.style.width = width;
+        }
+    }, [
+        getPersistentRightPanelGridTemplate,
+        isPersistentRightPanelResizable,
+        persistentRightPanelWidth,
+        rightPanelOpen,
+    ]);
+    useIsomorphicLayoutEffect(() => {
+        if (!hasPersistentRightPanel ||
+            isPersistentRightPanelResizable ||
+            !rightPanelOpen ||
+            !workspaceSurfaceRef.current) {
+            return undefined;
+        }
+        const measureRightPanel = () => {
+            const nextWidth = measureFixedRightPanelWidth();
+            if (!nextWidth) {
+                return;
+            }
+            setFixedRightPanelWidth((currentWidth) => currentWidth === nextWidth ? currentWidth : nextWidth);
+        };
+        measureRightPanel();
+        const resizeObserver = typeof ResizeObserver === "undefined"
+            ? undefined
+            : new ResizeObserver(measureRightPanel);
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(workspaceSurfaceRef.current);
+        window.addEventListener("resize", measureRightPanel);
+        return () => {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            window.removeEventListener("resize", measureRightPanel);
+        };
+    }, [
+        hasPersistentRightPanel,
+        isPersistentRightPanelResizable,
+        measureFixedRightPanelWidth,
+        rightPanelOpen,
+    ]);
+    React.useEffect(() => {
+        if (!rightPanelResizable) {
+            return;
+        }
+        setPersistentRightPanelWidth((width) => Math.min(Math.max(width, persistentRightPanelMinWidth), persistentRightPanelMaxWidth));
+    }, [
+        persistentRightPanelMaxWidth,
+        persistentRightPanelMinWidth,
+        rightPanelResizable,
+    ]);
+    useIsomorphicLayoutEffect(() => {
+        let frame = 0;
+        let nextFrame = 0;
+        let timeout = 0;
+        if (rightPanelMode === "persistent") {
+            setRightPanelOverlayOpen(false);
+        }
+        if (hasRightPanel) {
+            if (rightPanelMode === "persistent" && !rightPanelResizable) {
+                const nextFixedRightPanelWidth = measureFixedRightPanelWidth();
+                if (nextFixedRightPanelWidth) {
+                    setFixedRightPanelWidth((currentWidth) => currentWidth === nextFixedRightPanelWidth
+                        ? currentWidth
+                        : nextFixedRightPanelWidth);
+                }
+            }
+            if (rightPanelAutoCollapseSidebarBreakpoint !== false &&
+                !isCollapsedRef.current &&
+                window.innerWidth < rightPanelAutoCollapseSidebarBreakpoint) {
+                collapse();
+            }
+            setRenderedRightPanel(rightPanel);
+            setShouldRenderRightPanel(true);
+            if (wasRightPanelVisibleRef.current) {
+                setRightPanelOpen(true);
+            }
+            else {
+                setRightPanelOpen(false);
+                frame = window.requestAnimationFrame(() => {
+                    nextFrame = window.requestAnimationFrame(() => {
+                        setRightPanelOpen(true);
+                    });
+                });
+            }
+        }
+        else if (wasRightPanelVisibleRef.current) {
+            setRightPanelOpen(false);
+            setRightPanelOverlayOpen(false);
+            timeout = window.setTimeout(() => {
+                setShouldRenderRightPanel(false);
+                setRenderedRightPanel(null);
+            }, RIGHT_PANEL_TRANSITION_MS);
+        }
+        else {
+            setShouldRenderRightPanel(false);
+            setRenderedRightPanel(null);
+            setRightPanelOverlayOpen(false);
+        }
+        wasRightPanelVisibleRef.current = hasRightPanel;
+        return () => {
+            if (frame) {
+                window.cancelAnimationFrame(frame);
+            }
+            if (nextFrame) {
+                window.cancelAnimationFrame(nextFrame);
+            }
+            if (timeout) {
+                window.clearTimeout(timeout);
+            }
+        };
+    }, [
+        collapse,
+        hasRightPanel,
+        rightPanel,
+        rightPanelMode,
+        rightPanelResizable,
+        measureFixedRightPanelWidth,
+        rightPanelAutoCollapseSidebarBreakpoint,
+    ]);
+    React.useEffect(() => {
+        if (rightPanelMode !== "persistent" ||
+            !hasRightPanel ||
+            rightPanelAutoCollapseSidebarBreakpoint === false) {
+            return undefined;
+        }
+        const maybeCollapseSidebar = () => {
+            if (!isCollapsedRef.current &&
+                window.innerWidth < rightPanelAutoCollapseSidebarBreakpoint) {
+                collapse();
+            }
+        };
+        maybeCollapseSidebar();
+        window.addEventListener("resize", maybeCollapseSidebar);
+        return () => window.removeEventListener("resize", maybeCollapseSidebar);
+    }, [
+        collapse,
+        hasRightPanel,
+        rightPanelMode,
+        rightPanelAutoCollapseSidebarBreakpoint,
+    ]);
     const handleContentClick = React.useCallback(() => {
         if (!isCollapsed && window.innerWidth < COLLAPSE_BREAKPOINT) {
             toggle();
         }
     }, [isCollapsed, toggle]);
-    return (_jsx("main", { onClick: handleContentClick, className: cn("flex min-h-[calc(100dvh-var(--layout-top-offset))] min-w-0 flex-1 flex-col bg-[hsl(var(--layout-shell-background))] pb-[var(--layout-content-padding)] pl-[var(--layout-content-gap-start)] pr-[var(--layout-content-padding)] pt-[var(--layout-content-padding)] transition-all duration-300 md:pb-[var(--layout-content-padding-md)] md:pl-[var(--layout-content-gap-start-md)] md:pr-[var(--layout-content-padding-md)] md:pt-[var(--layout-content-padding-md)] lg:pb-[var(--layout-content-padding-lg)] lg:pl-[var(--layout-content-gap-start-lg)] lg:pr-[var(--layout-content-padding-lg)] lg:pt-[var(--layout-content-padding-lg)]", isCollapsed
-            ? "ml-[var(--layout-sidebar-collapsed-width)]"
-            : "ml-[var(--layout-sidebar-width)]", className), ...props, children: _jsx("div", { className: cn("flex flex-1 flex-col gap-[var(--layout-surface-gap)] overflow-x-clip rounded-[var(--radius-lg)] bg-background p-[var(--layout-surface-padding)] shadow-sm md:p-[var(--layout-surface-padding-md)] lg:p-[var(--layout-surface-padding-lg)]", surfaceClassName), children: children }) }));
+    const handleRightPanelResizePointerDown = React.useCallback((event) => {
+        if (!isPersistentRightPanelResizable) {
+            return;
+        }
+        event.preventDefault();
+        const startX = event.clientX;
+        const startWidth = persistentRightPanelWidthRef.current;
+        const previousCursor = document.body.style.cursor;
+        const previousUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        let pendingWidth = startWidth;
+        let frame = 0;
+        const applyPendingWidth = () => {
+            frame = 0;
+            persistentRightPanelWidthRef.current = pendingWidth;
+            if (workspaceSurfaceRef.current) {
+                workspaceSurfaceRef.current.style.gridTemplateColumns =
+                    getPersistentRightPanelGridTemplate(pendingWidth);
+            }
+            if (persistentRightPanelSurfaceRef.current) {
+                persistentRightPanelSurfaceRef.current.style.width = `${pendingWidth}px`;
+            }
+        };
+        const handlePointerMove = (moveEvent) => {
+            pendingWidth = Math.min(Math.max(startWidth + startX - moveEvent.clientX, persistentRightPanelMinWidth), persistentRightPanelMaxWidth);
+            if (!frame) {
+                frame = window.requestAnimationFrame(applyPendingWidth);
+            }
+        };
+        const finishResize = () => {
+            if (frame) {
+                window.cancelAnimationFrame(frame);
+                applyPendingWidth();
+            }
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousUserSelect;
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", finishResize);
+            window.removeEventListener("pointercancel", finishResize);
+            setPersistentRightPanelWidth(pendingWidth);
+        };
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", finishResize, { once: true });
+        window.addEventListener("pointercancel", finishResize, { once: true });
+    }, [
+        getPersistentRightPanelGridTemplate,
+        isPersistentRightPanelResizable,
+        persistentRightPanelMaxWidth,
+        persistentRightPanelMinWidth,
+    ]);
+    const workspaceSurfaceStyle = React.useMemo(() => {
+        if (!hasPersistentRightPanel) {
+            return undefined;
+        }
+        if (!isPersistentRightPanelResizable) {
+            return {
+                columnGap: rightPanelOpen ? "var(--space-6)" : 0,
+                gridTemplateColumns: getFixedPersistentRightPanelGridTemplate(fixedRightPanelWidth, rightPanelOpen),
+            };
+        }
+        return {
+            columnGap: 0,
+            gridTemplateColumns: getPersistentRightPanelGridTemplate(rightPanelOpen ? persistentRightPanelWidth : 0),
+        };
+    }, [
+        getFixedPersistentRightPanelGridTemplate,
+        getPersistentRightPanelGridTemplate,
+        fixedRightPanelWidth,
+        hasPersistentRightPanel,
+        isPersistentRightPanelResizable,
+        persistentRightPanelWidth,
+        rightPanelOpen,
+    ]);
+    const persistentRightPanelSurfaceStyle = React.useMemo(() => {
+        if (!hasPersistentRightPanel) {
+            return undefined;
+        }
+        if (isPersistentRightPanelResizable) {
+            return { width: persistentRightPanelWidth };
+        }
+        return fixedRightPanelWidth ? { width: fixedRightPanelWidth } : undefined;
+    }, [
+        fixedRightPanelWidth,
+        hasPersistentRightPanel,
+        isPersistentRightPanelResizable,
+        persistentRightPanelWidth,
+    ]);
+    return (_jsxs("main", { onClick: handleContentClick, className: cn("flex h-[calc(100dvh-var(--layout-top-offset))] min-w-0 flex-1 overflow-hidden bg-[hsl(var(--layout-shell-background))] pb-[var(--layout-content-padding)] pl-[var(--layout-content-gap-start)] pr-[var(--layout-content-padding)] pt-[var(--layout-content-padding)] transition-all duration-300 md:pb-[var(--layout-content-padding-md)] md:pl-[var(--layout-content-gap-start-md)] md:pr-[var(--layout-content-padding-md)] md:pt-[var(--layout-content-padding-md)] lg:pb-[var(--layout-content-padding-lg)] lg:pl-[var(--layout-content-gap-start-lg)] lg:pr-[var(--layout-content-padding-lg)] lg:pt-[var(--layout-content-padding-lg)]", hasSidebar &&
+            (isCollapsed
+                ? "ml-[var(--layout-sidebar-collapsed-width)]"
+                : "ml-[var(--layout-sidebar-width)]"), className), ...props, children: [_jsxs("div", { ref: workspaceSurfaceRef, "data-slot": "dashboard-workspace-surface", className: cn("h-full min-h-0 min-w-0 flex-1 overflow-hidden rounded-surface border border-[hsl(var(--layout-surface-border))] bg-[hsl(var(--layout-surface-background))] shadow-[var(--layout-surface-shadow)]", hasPersistentRightPanel
+                    ? "grid transition-[grid-template-columns,column-gap] duration-300 ease-out motion-reduce:transition-none"
+                    : "flex"), style: workspaceSurfaceStyle, children: [_jsx("div", { className: cn("scrollbar-none flex min-h-0 min-w-0 flex-1 flex-col gap-[var(--layout-surface-gap)] overflow-y-auto overflow-x-clip p-[var(--layout-surface-padding)] md:p-[var(--layout-surface-padding-md)] lg:p-[var(--layout-surface-padding-lg)]", hasPersistentRightPanel && "min-w-0", hasLeadingWorkspaceHeader && "pt-0 md:pt-0 lg:pt-0", surfaceClassName), children: children }), hasPersistentRightPanel ? (_jsx("aside", { ref: persistentRightPanelSlotRef, "aria-hidden": rightPanelOpen ? undefined : true, className: cn("relative min-h-0 transition-[border-color,box-shadow] duration-300 ease-out motion-reduce:transition-none", rightPanelEdgeClassName, rightPanelOpen
+                            ? rightPanelEdgeOpenClassName
+                            : rightPanelEdgeClosedClassName, !rightPanelOpen && "pointer-events-none", isPersistentRightPanelResizable
+                            ? "min-w-0 overflow-visible"
+                            : "min-w-0 overflow-hidden"), children: _jsx("div", { "data-slot": "dashboard-right-panel-viewport", className: "relative h-full w-full min-w-0 overflow-hidden", children: _jsxs("div", { ref: persistentRightPanelSurfaceRef, "data-slot": "dashboard-right-panel-surface", className: cn("absolute inset-y-0 right-0 flex h-full w-full min-w-0 bg-[hsl(var(--layout-right-panel-background))] transition-[opacity,transform] duration-300 ease-out motion-reduce:transition-none", rightPanelOpen
+                                    ? "translate-x-0 opacity-100"
+                                    : "translate-x-full opacity-0", isPersistentRightPanelResizable
+                                    ? "overflow-visible"
+                                    : "overflow-hidden", rightPanelClassName), style: persistentRightPanelSurfaceStyle, children: [isPersistentRightPanelResizable && rightPanelOpen ? (_jsx("button", { type: "button", "aria-label": "Resize right panel", className: "group absolute inset-y-0 -left-3 z-10 flex w-6 cursor-col-resize items-center justify-center rounded-none outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", onPointerDown: handleRightPanelResizePointerDown, children: _jsx("span", { "aria-hidden": "true", className: cn("flex h-10 w-4 items-center justify-center rounded-full border text-muted-foreground/80 shadow-sm transition-[border-color,color,box-shadow] group-hover:border-ring group-hover:text-foreground group-hover:shadow-md group-focus-visible:border-ring group-focus-visible:text-foreground group-focus-visible:shadow-md", rightPanelResizeHandleSurfaceClassName), children: _jsx(GripVertical, { className: "h-3.5 w-3.5 stroke-[2.25]" }) }) })) : null, _jsx("div", { "data-slot": "dashboard-right-panel-content", className: cn("scrollbar-none flex h-full w-full min-w-0 shrink-0 flex-col overflow-y-auto overflow-x-hidden"), children: renderedRightPanel })] }) }) })) : shouldRenderRightPanel ? (_jsx("aside", { "aria-hidden": rightPanelOpen ? undefined : true, className: cn("hidden min-h-0 shrink-0 overflow-hidden bg-[hsl(var(--layout-right-panel-background))] transition-[width,border-color,box-shadow] duration-300 ease-out will-change-[width] motion-reduce:transition-none xl:flex", rightPanelEdgeClassName, rightPanelOpen
+                            ? [
+                                "w-[var(--layout-right-panel-width)]",
+                                rightPanelEdgeOpenClassName,
+                            ]
+                            : ["pointer-events-none w-0", rightPanelEdgeClosedClassName], rightPanelClassName), children: _jsx("div", { className: cn("scrollbar-none flex h-full w-[var(--layout-right-panel-width)] shrink-0 flex-col overflow-y-auto overflow-x-hidden motion-reduce:animate-none", rightPanelOpen
+                                ? "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-right-full motion-safe:duration-300"
+                                : "motion-safe:animate-out motion-safe:fade-out-0 motion-safe:slide-out-to-right-full motion-safe:duration-300"), children: renderedRightPanel }) })) : null] }), rightPanelMode !== "persistent" &&
+                shouldRenderRightPanel &&
+                rightPanelFallbackTrigger ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", className: cn("fixed bottom-4 right-4 z-50 xl:hidden", rightPanelOverlayOpen && "hidden"), onClick: () => setRightPanelOverlayOpen(true), children: rightPanelFallbackTrigger }), _jsx("aside", { "aria-hidden": rightPanelOverlayOpen ? undefined : true, className: cn("fixed bottom-0 right-0 top-[var(--layout-top-offset)] z-50 flex w-[min(100vw,var(--layout-right-panel-width))] max-w-full overflow-hidden bg-[hsl(var(--layout-right-panel-background))] transition-transform duration-200 ease-out motion-reduce:transition-none xl:hidden", rightPanelEdgeClassName, rightPanelEdgeOpenClassName, rightPanelOverlayOpen
+                            ? "translate-x-0"
+                            : "pointer-events-none translate-x-full", rightPanelClassName), children: _jsx("div", { className: "scrollbar-none flex h-full w-full flex-col overflow-y-auto overflow-x-hidden", children: renderedRightPanel }) })] })) : null] }));
 }
-export { DashboardLayout, DashboardSidebar, DashboardContent };
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };

package/dist/lib/date-utils.d.ts

@@ -1,7 +1,15 @@
+export interface ParseDateTimeOptions {
+    /** Base date used for relative strings like "Today" and dates without a year. */
+    referenceDate?: Date;
+}
 /**
- * Parse a date string in DD/MM/YYYY HH:MM AM/PM format to a timestamp (ms).
+ * Parse common CLIP date/time strings to a timestamp (ms).
+ *
+ * Supports numeric dates (`23/03/2025 01:51 AM`), compact meridiem times
+ * (`12/05/2026 10:00AM`), month-name dates (`13 Feb 2026, 03:13 PM`), and
+ * relative sandbox labels (`Today, 11:12 AM`, `Yesterday, 5:28 PM`).
  */
-export declare function parseDateTime(dateStr: string): number;
+export declare function parseDateTime(dateStr: string, options?: ParseDateTimeOptions): number;
 /**
  * Format a Date object or ISO string to DD/MM/YYYY HH:MM AM/PM format.
  * Returns `"-"` for null/undefined/invalid input.