@neasg/design-system 0.4.11 → 0.4.13

package/dist/layout.js

@@ -2,11 +2,12 @@
 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 { GripVertical, PanelRightClose, PanelRightOpen } 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 { AvatarProfile } from "./avatar";
+import { Avatar, AvatarProfile } from "./avatar";
+import { AvatarProfilePopover, } from "./avatar-profile-popover";
 import { Button } from "./button";
 import { CountBadge } from "./count-badge";
 import { ScrollHint } from "./scroll-hint";
@@ -15,12 +16,14 @@ 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 COLLAPSE_BREAKPOINT = 1800;
+const RIGHT_PANEL_AUTO_COLLAPSE_BREAKPOINT = 1800;
 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_COLLAPSED_WIDTH = 40;
+const RIGHT_PANEL_COLLAPSE_BUTTON_SIZE = 32;
 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";
@@ -112,7 +115,7 @@ export function useSidebar() {
     }
     return context;
 }
-function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed = false, children, style, ...props }) {
+function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelCollapsible, rightPanelCollapsed, defaultRightPanelCollapsed, onRightPanelCollapsedChange, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed = false, children, style, ...props }) {
     const chromeRef = React.useRef(null);
     const [topOffset, setTopOffset] = React.useState(0);
     const layoutStyle = React.useMemo(() => ({
@@ -137,7 +140,7 @@ function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightP
         observer.observe(node);
         return () => observer.disconnect();
     }, [masthead, prototypeBanner]);
-    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 })] })] }) }));
+    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, rightPanelCollapsible: rightPanelCollapsible, rightPanelCollapsed: rightPanelCollapsed, defaultRightPanelCollapsed: defaultRightPanelCollapsed, onRightPanelCollapsedChange: onRightPanelCollapsedChange, 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 bg-[hsl(var(--layout-sidebar-background))] pb-2 pt-[var(--layout-sidebar-padding-top)] transition-all duration-300 ease-in-out", isCollapsed
@@ -168,7 +171,7 @@ function SidebarMenuItem({ className, children, collapsed = false, }) {
 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
+            : "h-control w-full justify-start gap-2.5 px-2", disabled
             ? "text-muted-foreground/50 hover:bg-transparent hover:text-muted-foreground/50"
             : active
                 ? "border-none bg-card text-card-foreground shadow-sm hover:bg-card hover:text-card-foreground"
@@ -224,14 +227,46 @@ function DashboardSidebarItemButton({ item, isCollapsed, active, expanded, depth
     }
     return interactive;
 }
-function DashboardSidebarProfile({ isCollapsed = false, status = "online", name, role, rolePlacement = "below", size = "sm", ...props }) {
-    const statusClassName = {
+function getDashboardSidebarProfileStatusClassName(status) {
+    return {
         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 getDashboardSidebarProfileAvatarOverlay(status) {
+    if (status === "none") {
+        return undefined;
+    }
+    return (_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", getDashboardSidebarProfileStatusClassName(status)) }));
+}
+function DashboardSidebarProfileView({ isCollapsed = false, status = "online", name, role, rolePlacement = "below", size = "sm", ...props }) {
+    return (_jsx(AvatarProfile, { ...props, size: size, name: isCollapsed ? undefined : name, role: isCollapsed ? undefined : role, rolePlacement: rolePlacement, className: cn("rounded-control py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", isCollapsed ? "justify-center px-0" : "min-w-0 px-1.5"), avatarClassName: "h-9 w-9 ring-1 ring-border/60 shadow-sm", fallbackClassName: "bg-background text-foreground", avatarOverlay: getDashboardSidebarProfileAvatarOverlay(status) }));
+}
+function DashboardSidebarProfile({ isCollapsed = false, ...props }) {
+    return (_jsx("div", { className: cn(isCollapsed ? "px-0" : "px-1", "pb-4 pt-2"), children: _jsx(DashboardSidebarProfileView, { isCollapsed: isCollapsed, ...props }) }));
+}
+const DashboardSidebarProfileTrigger = React.forwardRef(({ isCollapsed = false, name, nameAs: _NameElement, nameRowClassName: _nameRowClassName, nameTrailing, role, rolePlacement = "below", size = "sm", src, alt = "", fallback, loading = false, status = "online", topInfo, bottomInfo, triggerAriaLabel, triggerClassName, ...triggerProps }, ref) => {
+    const buttonProps = triggerProps;
+    const profileLabel = triggerAriaLabel !== null && triggerAriaLabel !== void 0 ? triggerAriaLabel : (typeof name === "string"
+        ? `Open profile menu for ${name}`
+        : "Open profile menu");
+    const resolvedTop = topInfo !== null && topInfo !== void 0 ? topInfo : (rolePlacement === "above" ? role : undefined);
+    const resolvedBottom = bottomInfo !== null && bottomInfo !== void 0 ? bottomInfo : (rolePlacement === "below" ? role : undefined);
+    const hasSupportingInfo = (resolvedTop !== undefined && resolvedTop !== null) ||
+        (resolvedBottom !== undefined && resolvedBottom !== null);
+    const hasMeta = name !== undefined ||
+        nameTrailing !== undefined ||
+        resolvedTop !== undefined ||
+        resolvedBottom !== undefined;
+    const infoClassName = "min-w-0 truncate text-xs leading-4 text-muted-foreground";
+    const nameNode = name !== undefined && name !== null ? (_jsx("span", { className: "min-w-0 truncate text-sm font-medium leading-5 text-foreground", children: name })) : null;
+    return (_jsx("div", { className: cn(isCollapsed ? "px-0" : "px-1", "pb-4 pt-2"), children: _jsx("button", { ...buttonProps, ref: ref, type: "button", "aria-label": profileLabel, "aria-busy": loading ? "true" : undefined, className: cn("group/profile-trigger block h-auto w-full cursor-pointer rounded-control border-0 bg-transparent p-0 text-left text-muted-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0", isCollapsed ? "justify-center" : "justify-start", triggerClassName), children: _jsxs("span", { className: cn("flex min-w-0 max-w-full rounded-control py-2 transition-colors hover:bg-card hover:text-foreground", hasSupportingInfo ? "items-start" : "items-center", isCollapsed ? "justify-center px-0" : "gap-2.5 px-1.5"), children: [_jsxs("span", { className: "relative shrink-0", children: [loading ? (_jsx("span", { "aria-hidden": "true", className: cn("block h-9 w-9 shrink-0 animate-pulse rounded-full bg-muted ring-1 ring-border/60 shadow-sm", hasSupportingInfo && "mt-0.5") })) : (_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: cn("h-9 w-9 ring-1 ring-border/60 shadow-sm", hasSupportingInfo && "mt-0.5") })), getDashboardSidebarProfileAvatarOverlay(status)] }), !isCollapsed && hasMeta ? (_jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [resolvedTop !== undefined && resolvedTop !== null ? (_jsx("span", { className: infoClassName, children: resolvedTop })) : null, nameTrailing !== undefined && nameTrailing !== null ? (_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [nameNode, nameTrailing] })) : (nameNode), resolvedBottom !== undefined && resolvedBottom !== null ? (_jsx("span", { className: infoClassName, children: resolvedBottom })) : null] })) : null, !isCollapsed ? (_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("mt-2 shrink-0 text-muted-foreground transition-transform duration-200", "group-data-[state=open]/profile-trigger:rotate-180 group-hover/profile-trigger:text-foreground"), size: 16 })) : null] }) }) }));
+});
+DashboardSidebarProfileTrigger.displayName = "DashboardSidebarProfileTrigger";
+function DashboardSidebarProfilePopover({ align = "end", alignOffset, avoidCollisions, children, collisionPadding = 8, contentClassName, defaultOpen, modal, onOpenChange, open, side = "right", sideOffset = 4, triggerAriaLabel, triggerClassName, ...profileProps }) {
+    return (_jsx(AvatarProfilePopover, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, collisionPadding: collisionPadding, sideOffset: sideOffset, contentClassName: contentClassName, trigger: _jsx(DashboardSidebarProfileTrigger, { ...profileProps, triggerAriaLabel: triggerAriaLabel, triggerClassName: triggerClassName }), children: children }));
 }
 function DashboardSidebarLeafItem({ item, isCollapsed, depth = 0, }) {
     return (_jsx(DashboardSidebarItemButton, { item: item, isCollapsed: isCollapsed, active: sidebarItemIsActive(item), depth: depth, onClick: item.onClick }));
@@ -294,25 +329,23 @@ function DashboardSidebar({ className, children, logo, search, navGroups, footer
     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"
+                    ? "overflow-visible p-[var(--layout-sidebar-content-padding)]"
                     : "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 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}`));
+                        return (_jsx(SidebarGroup, { children: _jsxs("div", { className: cn(groupIndex > 0 && "mt-[var(--layout-sidebar-section-gap)]"), children: [group.label ? (_jsx(SidebarGroupLabel, { "aria-hidden": isCollapsed ? true : undefined, className: isCollapsed ? "invisible" : undefined, 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 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 }));
+    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 pb-[var(--layout-right-panel-tabs-gap)] pl-[var(--layout-right-panel-padding)] pr-[calc(var(--layout-right-panel-padding)+var(--layout-right-panel-action-space,0px))] 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] }) }));
+    return (_jsx("div", { className: cn("shrink-0 pb-[var(--layout-right-panel-padding)] pl-[var(--layout-right-panel-padding)] pr-[calc(var(--layout-right-panel-padding)+var(--layout-right-panel-action-space,0px))] pt-[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();
@@ -321,9 +354,14 @@ function DashboardRightPanelBody({ className, contentClassName, footer, footerCl
     }
     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 }) {
+function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode = "responsive", rightPanelResizable = false, rightPanelCollapsible = false, rightPanelCollapsed, defaultRightPanelCollapsed = false, onRightPanelCollapsedChange, 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 isRightPanelCollapseControlled = rightPanelCollapsed !== undefined;
+    const [uncontrolledRightPanelCollapsed, setUncontrolledRightPanelCollapsed,] = React.useState(defaultRightPanelCollapsed);
+    const canCollapsePersistentRightPanel = rightPanelMode === "persistent" && rightPanelCollapsible && hasRightPanel;
+    const effectiveRightPanelCollapsed = canCollapsePersistentRightPanel &&
+        (rightPanelCollapsed !== null && rightPanelCollapsed !== void 0 ? rightPanelCollapsed : uncontrolledRightPanelCollapsed);
     const persistentRightPanelMinWidth = Math.min(rightPanelMinWidth, rightPanelMaxWidth);
     const persistentRightPanelMaxWidth = Math.max(rightPanelMinWidth, rightPanelMaxWidth);
     const [persistentRightPanelWidth, setPersistentRightPanelWidth] = React.useState(rightPanelDefaultWidth);
@@ -331,14 +369,16 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
     const workspaceSurfaceRef = React.useRef(null);
     const persistentRightPanelSlotRef = React.useRef(null);
     const persistentRightPanelSurfaceRef = React.useRef(null);
+    const rightPanelContentId = React.useId();
     const [renderedRightPanel, setRenderedRightPanel] = React.useState(rightPanel);
     const [shouldRenderRightPanel, setShouldRenderRightPanel] = React.useState(hasRightPanel);
-    const [rightPanelOpen, setRightPanelOpen] = React.useState(hasRightPanel);
+    const [rightPanelOpen, setRightPanelOpen] = React.useState(hasRightPanel && !effectiveRightPanelCollapsed);
     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 hasCollapsedPersistentRightPanelRail = hasPersistentRightPanel && hasRightPanel && effectiveRightPanelCollapsed;
     const isPersistentRightPanelResizable = hasPersistentRightPanel && rightPanelResizable;
     const firstChild = React.Children.toArray(children).find((child) => child !== null && child !== undefined);
     const hasLeadingWorkspaceHeader = React.isValidElement(firstChild) &&
@@ -350,12 +390,18 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
     React.useEffect(() => {
         persistentRightPanelWidthRef.current = persistentRightPanelWidth;
     }, [persistentRightPanelWidth]);
+    const setRightPanelCollapsedState = React.useCallback((collapsed) => {
+        if (!isRightPanelCollapseControlled) {
+            setUncontrolledRightPanelCollapsed(collapsed);
+        }
+        onRightPanelCollapsedChange === null || onRightPanelCollapsedChange === void 0 ? void 0 : onRightPanelCollapsedChange(collapsed);
+    }, [isRightPanelCollapseControlled, onRightPanelCollapsedChange]);
     const getPersistentRightPanelGridTemplate = React.useCallback((width) => `minmax(0, 1fr) ${width}px`, []);
-    const getFixedPersistentRightPanelGridTemplate = React.useCallback((width, isOpen) => `minmax(0, 1fr) ${isOpen
+    const getFixedPersistentRightPanelGridTemplate = React.useCallback((width, isOpen, collapsedWidth = 0) => `minmax(0, 1fr) ${isOpen
         ? width
             ? `${width}px`
             : `${RIGHT_PANEL_FIXED_WIDTH_RATIO * 100}%`
-        : "0px"}`, []);
+        : `${collapsedWidth}px`}`, []);
     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;
@@ -371,13 +417,18 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
         const width = `${persistentRightPanelWidth}px`;
         if (workspaceSurfaceRef.current) {
             workspaceSurfaceRef.current.style.gridTemplateColumns =
-                getPersistentRightPanelGridTemplate(rightPanelOpen ? persistentRightPanelWidth : 0);
+                getPersistentRightPanelGridTemplate(hasCollapsedPersistentRightPanelRail
+                    ? RIGHT_PANEL_COLLAPSED_WIDTH
+                    : rightPanelOpen
+                        ? persistentRightPanelWidth
+                        : 0);
         }
         if (persistentRightPanelSurfaceRef.current) {
             persistentRightPanelSurfaceRef.current.style.width = width;
         }
     }, [
         getPersistentRightPanelGridTemplate,
+        hasCollapsedPersistentRightPanelRail,
         isPersistentRightPanelResizable,
         persistentRightPanelWidth,
         rightPanelOpen,
@@ -429,6 +480,7 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
         if (rightPanelMode === "persistent") {
             setRightPanelOverlayOpen(false);
         }
+        const shouldOpenRightPanel = hasRightPanel && !effectiveRightPanelCollapsed;
         if (hasRightPanel) {
             if (rightPanelMode === "persistent" && !rightPanelResizable) {
                 const nextFixedRightPanelWidth = measureFixedRightPanelWidth();
@@ -438,14 +490,18 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
                         : nextFixedRightPanelWidth);
                 }
             }
-            if (rightPanelAutoCollapseSidebarBreakpoint !== false &&
+            if (shouldOpenRightPanel &&
+                rightPanelAutoCollapseSidebarBreakpoint !== false &&
                 !isCollapsedRef.current &&
                 window.innerWidth < rightPanelAutoCollapseSidebarBreakpoint) {
                 collapse();
             }
             setRenderedRightPanel(rightPanel);
             setShouldRenderRightPanel(true);
-            if (wasRightPanelVisibleRef.current) {
+            if (!shouldOpenRightPanel) {
+                setRightPanelOpen(false);
+            }
+            else if (wasRightPanelVisibleRef.current) {
                 setRightPanelOpen(true);
             }
             else {
@@ -485,6 +541,7 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
     }, [
         collapse,
         hasRightPanel,
+        effectiveRightPanelCollapsed,
         rightPanel,
         rightPanelMode,
         rightPanelResizable,
@@ -494,6 +551,7 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
     React.useEffect(() => {
         if (rightPanelMode !== "persistent" ||
             !hasRightPanel ||
+            effectiveRightPanelCollapsed ||
             rightPanelAutoCollapseSidebarBreakpoint === false) {
             return undefined;
         }
@@ -509,14 +567,15 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
     }, [
         collapse,
         hasRightPanel,
+        effectiveRightPanelCollapsed,
         rightPanelMode,
         rightPanelAutoCollapseSidebarBreakpoint,
     ]);
     const handleContentClick = React.useCallback(() => {
         if (!isCollapsed && window.innerWidth < COLLAPSE_BREAKPOINT) {
-            toggle();
+            collapse();
         }
-    }, [isCollapsed, toggle]);
+    }, [collapse, isCollapsed]);
     const handleRightPanelResizePointerDown = React.useCallback((event) => {
         if (!isPersistentRightPanelResizable) {
             return;
@@ -575,17 +634,24 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
         if (!isPersistentRightPanelResizable) {
             return {
                 columnGap: rightPanelOpen ? "var(--space-6)" : 0,
-                gridTemplateColumns: getFixedPersistentRightPanelGridTemplate(fixedRightPanelWidth, rightPanelOpen),
+                gridTemplateColumns: getFixedPersistentRightPanelGridTemplate(fixedRightPanelWidth, rightPanelOpen, hasCollapsedPersistentRightPanelRail
+                    ? RIGHT_PANEL_COLLAPSED_WIDTH
+                    : 0),
             };
         }
         return {
             columnGap: 0,
-            gridTemplateColumns: getPersistentRightPanelGridTemplate(rightPanelOpen ? persistentRightPanelWidth : 0),
+            gridTemplateColumns: getPersistentRightPanelGridTemplate(hasCollapsedPersistentRightPanelRail
+                ? RIGHT_PANEL_COLLAPSED_WIDTH
+                : rightPanelOpen
+                    ? persistentRightPanelWidth
+                    : 0),
         };
     }, [
         getFixedPersistentRightPanelGridTemplate,
         getPersistentRightPanelGridTemplate,
         fixedRightPanelWidth,
+        hasCollapsedPersistentRightPanelRail,
         hasPersistentRightPanel,
         isPersistentRightPanelResizable,
         persistentRightPanelWidth,
@@ -605,30 +671,58 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
         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 &&
+    const rightPanelContentStyle = React.useMemo(() => {
+        if (!canCollapsePersistentRightPanel) {
+            return undefined;
+        }
+        return {
+            "--layout-right-panel-action-space": "var(--space-10)",
+        };
+    }, [canCollapsePersistentRightPanel]);
+    const rightPanelCollapseToggleStyle = React.useMemo(() => {
+        if (!hasPersistentRightPanel || !canCollapsePersistentRightPanel) {
+            return undefined;
+        }
+        if (hasCollapsedPersistentRightPanelRail) {
+            return {
+                right: `${(RIGHT_PANEL_COLLAPSED_WIDTH - RIGHT_PANEL_COLLAPSE_BUTTON_SIZE) / 2}px`,
+            };
+        }
+        return { right: "var(--space-3)" };
+    }, [
+        canCollapsePersistentRightPanel,
+        hasCollapsedPersistentRightPanelRail,
+        hasPersistentRightPanel,
+    ]);
+    const rightPanelCollapseToggleLabel = rightPanelOpen
+        ? "Collapse right panel"
+        : "Expand right panel";
+    return (_jsxs("main", { onClickCapture: 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
+                : "ml-[var(--layout-sidebar-width)]"), className), ...props, children: [_jsxs("div", { ref: workspaceSurfaceRef, "data-slot": "dashboard-workspace-surface", className: cn("relative 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
+                    : "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 || hasCollapsedPersistentRightPanelRail
                             ? rightPanelEdgeOpenClassName
-                            : rightPanelEdgeClosedClassName, !rightPanelOpen && "pointer-events-none", isPersistentRightPanelResizable
+                            : rightPanelEdgeClosedClassName, !rightPanelOpen &&
+                            !hasCollapsedPersistentRightPanelRail &&
+                            "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
+                                    : "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", { id: rightPanelContentId, "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"), style: rightPanelContentStyle, 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" &&
+                                : "motion-safe:animate-out motion-safe:fade-out-0 motion-safe:slide-out-to-right-full motion-safe:duration-300"), children: renderedRightPanel }) })) : null, canCollapsePersistentRightPanel ? (_jsx(Tooltip, { content: rightPanelCollapseToggleLabel, side: "left", children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-controls": rightPanelContentId, "aria-expanded": rightPanelOpen, "aria-label": rightPanelCollapseToggleLabel, className: "absolute top-3 z-30 text-muted-foreground transition-[right,background-color,color] duration-300 ease-out hover:text-foreground motion-reduce:transition-none", style: rightPanelCollapseToggleStyle, onClick: () => setRightPanelCollapsedState(!effectiveRightPanelCollapsed), children: rightPanelOpen ? (_jsx(PanelRightClose, { "aria-hidden": "true" })) : (_jsx(PanelRightOpen, { "aria-hidden": "true" })) }) })) : 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, DashboardSidebarProfile, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };

package/dist/message-item.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Download, FileText } from "lucide-react";
+import { FileText } from "lucide-react";
+import { DownloadIcon } from "./animated-icons";
 import { AvatarProfile } from "./avatar";
 import { Badge } from "./badge";
 import { Separator } from "./separator";
@@ -9,13 +10,11 @@ import { Typography } from "./typography";
 import { cn } from "./lib/utils";
 export const formatMessageDate = (date) => {
     const d = new Date(date);
-    return d.toLocaleDateString("en-SG", {
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-    });
+    const hours = d.getHours();
+    const twelveHour = hours % 12 || 12;
+    const period = hours >= 12 ? "PM" : "AM";
+    const pad = (value) => String(value).padStart(2, "0");
+    return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(twelveHour)}:${pad(d.getMinutes())} ${period}`;
 };
 function getInitials(name) {
     if (!name)
@@ -43,7 +42,7 @@ export function MessageNewDivider({ children = "New Message", className, }) {
 export function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel = `Download ${attachment.name}`, className, ...props }) {
     const renderContent = (isInteractive) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 pr-1", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "line-clamp-2 font-medium", children: attachment.name }), attachment.size ? (_jsx(Typography, { as: "p", variant: "caption", children: attachment.size })) : null] }), _jsx("span", { "aria-hidden": "true", className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-control border border-border bg-background text-muted-foreground transition-colors", isInteractive
                     ? "group-hover:border-primary/40 group-hover:bg-primary/10 group-hover:text-primary group-focus-visible:border-primary/40 group-focus-visible:bg-primary/10 group-focus-visible:text-primary"
-                    : "opacity-60"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) })] }));
+                    : "opacity-60"), children: _jsx(DownloadIcon, { size: 14 }) })] }));
     if (downloadUrl) {
         return (_jsx("a", { className: cn("group grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)_2.75rem] items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 text-foreground no-underline shadow-sm transition hover:border-primary/50 hover:bg-primary/5 hover:no-underline hover:shadow-md focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), href: downloadUrl, target: "_blank", rel: "noopener noreferrer", download: attachment.name, "aria-label": downloadLabel, title: downloadLabel, ...props, children: renderContent(true) }));
     }
@@ -135,7 +134,7 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
     const downloadCaseId = caseId !== null && caseId !== void 0 ? caseId : message.caseId;
     const contentHtml = toHtmlContent(message.content);
     const richContentClassName = cn("break-words leading-6", "[&_p]:my-0 [&_p+p]:mt-2", "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5", "[&_li]:my-1", "[&_a]:text-primary [&_a]:underline [&_a:hover]:text-primary/80", "[&_h1]:mb-2 [&_h1]:mt-3 [&_h1]:text-xl [&_h1]:font-semibold", "[&_h2]:mb-2 [&_h2]:mt-3 [&_h2]:text-lg [&_h2]:font-semibold", "[&_h3]:mb-1.5 [&_h3]:mt-3 [&_h3]:text-base [&_h3]:font-semibold", "[&_h4]:mb-1.5 [&_h4]:mt-3 [&_h4]:font-semibold", "[&_h5]:mb-1.5 [&_h5]:mt-3 [&_h5]:font-semibold", "[&_h6]:mb-1.5 [&_h6]:mt-3 [&_h6]:font-semibold", "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse", "[&_td]:border [&_td]:border-border [&_td]:p-2", "[&_th]:border [&_th]:border-border [&_th]:bg-[hsl(var(--table-header-background))] [&_th]:p-2 [&_th]:font-semibold", "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-[0.85em]", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]", "[&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_mark]:rounded-sm [&_mark]:bg-[hsl(var(--status-warning))] [&_mark]:px-0.5 [&_mark]:text-[hsl(var(--status-warning-foreground))]", "[&_img]:h-auto [&_img]:max-w-full", contentClassName);
-    return (_jsxs(_Fragment, { children: [showUnreadDivider && (_jsx(MessageNewDivider, { children: newMessageLabel })), _jsxs("article", { ref: messageRef, className: cn("min-w-0", className), children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-x-3 gap-y-1", children: [_jsx(AvatarProfile, { fallback: getInitials(initialsName), name: senderName, nameAs: "h3", nameTrailing: isApplicant ? (_jsx(Badge, { variant: "warning", bordered: true, children: "Applicant" })) : undefined, role: hasSenderProfileRole ? (_jsx("span", { "data-slot": "message-author-role", children: senderProfileRole })) : undefined, rolePlacement: "below", className: "min-w-0 flex-1 [column-gap:var(--space-3)]", avatarClassName: "h-9 w-9 shrink-0", fallbackClassName: "text-xs font-medium", nameClassName: "max-w-full whitespace-normal break-words [overflow-wrap:anywhere]" }), _jsx("time", { className: "shrink-0 whitespace-nowrap pt-0.5", dateTime: messageDate.toISOString(), children: _jsx(Typography, { as: "span", variant: "caption", children: formatTimestamp
+    return (_jsxs(_Fragment, { children: [showUnreadDivider && (_jsx(MessageNewDivider, { children: newMessageLabel })), _jsxs("article", { ref: messageRef, className: cn("min-w-0", className), children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-x-3 gap-y-1", children: [_jsx(AvatarProfile, { fallback: getInitials(initialsName), name: senderName, nameAs: "h3", nameTrailing: isApplicant ? (_jsx(Badge, { variant: "warning", bordered: true, children: "Applicant" })) : undefined, role: hasSenderProfileRole ? (_jsx("span", { "data-slot": "message-author-role", children: senderProfileRole })) : undefined, rolePlacement: "below", className: "min-w-0 flex-1 [column-gap:var(--space-3)]", avatarClassName: "h-9 w-9 shrink-0", fallbackClassName: "text-xs font-medium", nameClassName: "max-w-full whitespace-normal break-words [overflow-wrap:anywhere]" }), _jsx("time", { className: "shrink-0 whitespace-nowrap pt-0.5", dateTime: messageDate.toISOString(), children: _jsx(Typography, { as: "span", variant: "caption", className: "text-muted-foreground/60", children: formatTimestamp
                                         ? formatTimestamp(messageDate, message)
                                         : formatMessageDate(messageDate) }) })] }), _jsxs("div", { className: "ml-[calc(2.25rem+var(--space-3))] pt-2", children: [_jsx(Typography, { as: "div", variant: "bodySm", color: "inherit", className: richContentClassName, dangerouslySetInnerHTML: { __html: contentHtml } }), attachments.length > 0 ? (_jsx("div", { className: "mt-3 space-y-2", children: attachments.map((attachment, idx) => (_jsx(MessageAttachmentRow, { attachment: attachment, downloadUrl: getAttachmentDownloadUrl === null || getAttachmentDownloadUrl === void 0 ? void 0 : getAttachmentDownloadUrl(attachment, message, downloadCaseId) }, `${attachment.name}-${idx}`))) })) : null] })] })] }));
 }

package/dist/notification.js

@@ -73,7 +73,7 @@ function NotificationItem({ notification, density = "default", labelLines = 2, d
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(notification);
         }
     };
-    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 flex shrink-0 items-center justify-center rounded-control border", density === "compact" ? "h-7 w-7" : "h-8 w-8", notificationToneClasses[tone]), children: _jsx(Icon, { className: density === "compact" ? "h-3.5 w-3.5" : "h-4 w-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: cn("min-w-0 text-left text-foreground", isUnread ? "font-semibold" : "font-medium", labelLineClasses[labelLines]), children: notification.title }), meta || (isUnread && unreadLabel !== null) ? (_jsxs("span", { className: "flex min-w-0 shrink-0 items-center justify-end gap-1.5 text-right", children: [meta ? (_jsx(Typography, { as: "span", variant: "caption", className: "min-w-0 max-w-24 truncate whitespace-nowrap text-muted-foreground", children: meta })) : null, isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null] })) : null] }), notification.description !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: cn("mt-1.5 block text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasActions ? (_jsx("span", { className: "mt-4 flex flex-wrap gap-2", children: actions.map((action, index) => {
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 flex shrink-0 items-center justify-center rounded-control border", density === "compact" ? "h-7 w-7" : "h-8 w-8", notificationToneClasses[tone]), children: _jsx(Icon, { className: density === "compact" ? "h-3.5 w-3.5" : "h-4 w-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: cn("min-w-0 text-left text-foreground", isUnread ? "font-semibold" : "font-medium", labelLineClasses[labelLines]), children: notification.title }), meta || (isUnread && unreadLabel !== null) ? (_jsxs("span", { className: "flex min-w-0 shrink-0 items-center justify-end gap-1.5 text-right", children: [meta ? (_jsx(Typography, { as: "span", variant: "caption", className: "min-w-0 max-w-24 truncate whitespace-nowrap text-muted-foreground/60", children: meta })) : null, isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null] })) : null] }), notification.description !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: cn("mt-1.5 block text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasActions ? (_jsx("span", { className: "mt-4 flex flex-wrap gap-2", children: actions.map((action, index) => {
                             var _a, _b;
                             return (_jsx(Button, { type: "button", variant: (_a = action.variant) !== null && _a !== void 0 ? _a : (index === 0 ? "outline" : "default"), size: "sm", disabled: action.disabled, className: cn("min-w-24", action.className), onClick: (event) => {
                                     var _a;

package/dist/page-layout.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type PageLayoutGap = "page" | "header" | "section" | "control" | "context";
+export type PageLayoutStackGap = Exclude<PageLayoutGap, "page"> | "title";
+declare const pageLayoutGapClassNames: Record<PageLayoutGap, string>;
+declare const pageLayoutStackGapClassNames: Record<PageLayoutStackGap, string>;
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: PageLayoutGap;
+}
+declare function PageLayout({ gap, className, ...props }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export interface PageLayoutStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: PageLayoutStackGap;
+    titleOffset?: boolean;
+}
+declare function PageLayoutStack({ gap, titleOffset, className, ...props }: PageLayoutStackProps): import("react/jsx-runtime").JSX.Element;
+type PageLayoutNamedStackProps = Omit<PageLayoutStackProps, "gap">;
+export type PageLayoutTitleProps = PageLayoutNamedStackProps;
+declare function PageLayoutTitle(props: PageLayoutTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function PageLayoutHeader(props: PageLayoutNamedStackProps): import("react/jsx-runtime").JSX.Element;
+declare function PageLayoutSection(props: PageLayoutNamedStackProps): import("react/jsx-runtime").JSX.Element;
+declare function PageLayoutControls(props: PageLayoutNamedStackProps): import("react/jsx-runtime").JSX.Element;
+declare function PageLayoutContext(props: PageLayoutNamedStackProps): import("react/jsx-runtime").JSX.Element;
+export { PageLayout, PageLayoutStack, PageLayoutTitle, PageLayoutHeader, PageLayoutSection, PageLayoutControls, PageLayoutContext, pageLayoutGapClassNames, pageLayoutStackGapClassNames, };

package/dist/page-layout.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+const pageLayoutGapClassNames = {
+    page: "space-y-[var(--layout-page-gap)]",
+    header: "space-y-[var(--layout-page-header-gap)]",
+    section: "space-y-[var(--layout-page-section-gap)]",
+    control: "space-y-[var(--layout-page-control-gap)]",
+    context: "space-y-[var(--layout-page-context-gap)]",
+};
+const pageLayoutStackGapClassNames = {
+    header: pageLayoutGapClassNames.header,
+    section: pageLayoutGapClassNames.section,
+    control: pageLayoutGapClassNames.control,
+    context: pageLayoutGapClassNames.context,
+    title: "space-y-[var(--space-1)]",
+};
+function PageLayout({ gap = "page", className, ...props }) {
+    return (_jsx("div", { "data-slot": "page-layout", className: cn(pageLayoutGapClassNames[gap], className), ...props }));
+}
+function PageLayoutStack({ gap = "section", titleOffset = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "page-layout-stack", className: cn(pageLayoutStackGapClassNames[gap], titleOffset && "pt-[var(--layout-page-title-offset)]", className), ...props }));
+}
+function PageLayoutTitle(props) {
+    return (_jsx(PageLayoutStack, { gap: "title", "data-slot": "page-layout-title", ...props }));
+}
+function PageLayoutHeader(props) {
+    return (_jsx(PageLayoutStack, { gap: "header", "data-slot": "page-layout-header", ...props }));
+}
+function PageLayoutSection(props) {
+    return (_jsx(PageLayoutStack, { gap: "section", "data-slot": "page-layout-section", ...props }));
+}
+function PageLayoutControls(props) {
+    return (_jsx(PageLayoutStack, { gap: "control", "data-slot": "page-layout-controls", ...props }));
+}
+function PageLayoutContext(props) {
+    return (_jsx(PageLayoutStack, { gap: "context", "data-slot": "page-layout-context", ...props }));
+}
+export { PageLayout, PageLayoutStack, PageLayoutTitle, PageLayoutHeader, PageLayoutSection, PageLayoutControls, PageLayoutContext, pageLayoutGapClassNames, pageLayoutStackGapClassNames, };

package/dist/page-section.js

@@ -9,6 +9,6 @@ function PageSectionGroup({ variant = "divided", className, ...props }) {
 function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }) {
     const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "h3", variant: "subheading", children: title }));
     const renderedDescription = description == null ? null : React.isValidElement(description) ? (description) : (_jsx(Typography, { as: "p", variant: "caption", children: description }));
-    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
+    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-3 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
 }
 export { PageSection, PageSectionGroup };

package/dist/popover-menu.js

@@ -19,7 +19,7 @@ function PopoverMenuSection({ className, children, ...props }) {
     return (_jsx("div", { className: cn("space-y-0", className), ...props, children: children }));
 }
 function PopoverMenuItem({ className, children, active, type = "button", ...props }) {
-    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-2 text-left font-normal whitespace-normal", active &&
+    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-2 text-left font-normal whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", active &&
             "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
 }
 function PopoverMenuCheckboxItem({ className, children, checked = false, description, disabled, onChange, readOnly, ...props }) {
@@ -33,7 +33,7 @@ function PopoverMenuFooter({ className, children, inset = "menu", ...props }) {
     return (_jsx("div", { className: cn("flex items-center gap-2 border-t p-1.5", inset === "menu" && "-mx-1 -mb-1", inset === "flush" && "m-0", className), ...props, children: children }));
 }
 function PopoverMenuFooterAction({ className, type = "button", ...props }) {
-    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal", className), ...props }));
+    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", className), ...props }));
 }
 function PopoverMenuFooterMeta({ className, children, ...props }) {
     return (_jsx(Typography, { as: "span", variant: "bodySm", color: "muted", className: cn("shrink-0 px-2 font-medium", className), ...props, children: children }));

package/dist/routing-timeline.js

@@ -52,7 +52,7 @@ function RoutingTimeline({ items, emptyMessage = "No routing activity yet.", cla
                 const hasCompleteRoute = Boolean(item.from && item.to);
                 const title = (_b = item.title) !== null && _b !== void 0 ? _b : config.title;
                 const remark = (_c = item.remark) !== null && _c !== void 0 ? _c : item.description;
-                return (_jsxs("li", { className: "relative grid grid-cols-[var(--space-3)_minmax(0,1fr)] gap-[var(--space-3)] pb-[var(--space-5)] last:pb-0", children: [_jsx("div", { className: "relative flex justify-center", children: _jsx("span", { "aria-hidden": "true", "data-slot": "routing-timeline-marker", className: cn("relative z-10 mt-[var(--space-1)] size-[var(--space-2)] rounded-full border", config.markerClassName) }) }), _jsxs("div", { "data-slot": "routing-timeline-event-card", className: "min-w-0 rounded-surface border border-border/70 bg-card p-[var(--space-3)] text-card-foreground", children: [_jsxs("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-[var(--space-2)]", children: [_jsx(Typography, { as: "p", variant: "label", className: "min-w-0 flex-1 font-semibold", children: title }), _jsx(Badge, { variant: config.badgeVariant, bordered: true, className: "max-w-full shrink-0 self-start", children: (_d = item.badgeLabel) !== null && _d !== void 0 ? _d : config.label })] }), item.timestamp || item.actor ? (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-[var(--space-1)] gap-y-[var(--space-1)]", children: [item.timestamp ? (_jsx(Typography, { as: "time", variant: "caption", className: "shrink-0", children: item.timestamp })) : null, item.actor ? (_jsxs(Typography, { as: "p", variant: "caption", className: "inline-flex min-w-0 items-center gap-x-[var(--space-1)]", children: [item.timestamp ? (_jsx("span", { "aria-hidden": "true", children: "\u00B7" })) : null, "By ", item.actor] })) : null] })) : null] }), remark ? (_jsx(Typography, { as: "div", variant: "bodySm", "data-slot": "routing-timeline-remark", className: "mt-[var(--space-4)] font-normal", children: remark })) : null, hasRouteEndpoints ? (_jsxs("footer", { "data-slot": "routing-timeline-handoff", "data-complete-route": hasCompleteRoute ? "true" : undefined, className: "mt-[var(--space-4)] flex flex-col space-y-[var(--space-2)] text-xs text-muted-foreground", children: [item.from ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.from })) : null, item.from && item.to ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "to" }), _jsx(ArrowDown, { "aria-hidden": "true", "data-slot": "routing-timeline-handoff-arrow", className: "ml-1 size-4 shrink-0 text-muted-foreground" })] })) : null, item.to ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.to })) : null] })) : null] })] }, item.id));
+                return (_jsxs("li", { className: "relative grid grid-cols-[var(--space-3)_minmax(0,1fr)] gap-[var(--space-3)] pb-[var(--space-5)] last:pb-0", children: [_jsx("div", { className: "relative flex justify-center", children: _jsx("span", { "aria-hidden": "true", "data-slot": "routing-timeline-marker", className: cn("relative z-10 mt-[var(--space-1)] size-[var(--space-2)] rounded-full border", config.markerClassName) }) }), _jsxs("div", { "data-slot": "routing-timeline-event-card", className: "min-w-0 rounded-surface border border-border/70 bg-card p-[var(--space-3)] text-card-foreground", children: [_jsxs("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-[var(--space-2)]", children: [_jsx(Typography, { as: "p", variant: "label", className: "min-w-0 flex-1 font-semibold", children: title }), _jsx(Badge, { variant: config.badgeVariant, bordered: true, className: "max-w-full shrink-0 self-start", children: (_d = item.badgeLabel) !== null && _d !== void 0 ? _d : config.label })] }), item.timestamp || item.actor ? (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-[var(--space-1)] gap-y-[var(--space-1)]", children: [item.timestamp ? (_jsx(Typography, { as: "time", variant: "caption", className: "shrink-0 text-muted-foreground/60", children: item.timestamp })) : null, item.actor ? (_jsxs(Typography, { as: "p", variant: "caption", className: "inline-flex min-w-0 items-center gap-x-[var(--space-1)]", children: [item.timestamp ? (_jsx("span", { "aria-hidden": "true", children: "\u00B7" })) : null, "By ", item.actor] })) : null] })) : null] }), remark ? (_jsx(Typography, { as: "div", variant: "bodySm", "data-slot": "routing-timeline-remark", className: "mt-[var(--space-4)] font-normal", children: remark })) : null, hasRouteEndpoints ? (_jsxs("footer", { "data-slot": "routing-timeline-handoff", "data-complete-route": hasCompleteRoute ? "true" : undefined, className: "mt-[var(--space-4)] flex flex-col space-y-[var(--space-2)] text-xs text-muted-foreground", children: [item.from ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.from })) : null, item.from && item.to ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "to" }), _jsx(ArrowDown, { "aria-hidden": "true", "data-slot": "routing-timeline-handoff-arrow", className: "ml-1 size-4 shrink-0 text-muted-foreground" })] })) : null, item.to ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.to })) : null] })) : null] })] }, item.id));
             }) }) }));
 }
 export { RoutingTimeline };