@neasg/design-system 0.4.35 → 0.4.95

package/dist/layout.js

@@ -2,7 +2,7 @@
 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, PanelRightClose, PanelRightOpen } from "lucide-react";
+import { ChevronsUpDown, 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";
@@ -10,6 +10,7 @@ import { Avatar, AvatarProfile } from "./avatar";
 import { AvatarProfilePopover, } from "./avatar-profile-popover";
 import { Button } from "./button";
 import { CountBadge } from "./count-badge";
+import { EmptyState } from "./empty-state";
 import { ScrollHint } from "./scroll-hint";
 import { Tabs } from "./tabs";
 import { Tooltip } from "./tooltip";
@@ -17,6 +18,7 @@ import { Typography } from "./typography";
 import { cn } from "./lib/utils";
 import { rightPanelEdgeClassName, rightPanelEdgeClosedClassName, rightPanelEdgeOpenClassName, rightPanelResizeHandleSurfaceClassName, } from "./layout-right-panel-edge";
 const COLLAPSE_BREAKPOINT = 1800;
+const SIDEBAR_CONTENT_CROSSFADE_MS = 100;
 const RIGHT_PANEL_AUTO_COLLAPSE_BREAKPOINT = 1800;
 const RIGHT_PANEL_TRANSITION_MS = 300;
 const RIGHT_PANEL_RESIZE_DEFAULT_WIDTH = 432;
@@ -81,32 +83,77 @@ function useScrollOverflowHint() {
 }
 export function SidebarProvider({ children, defaultCollapsed = false, }) {
     const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+    const [isContentCollapsed, setIsContentCollapsed] = React.useState(defaultCollapsed);
+    const [isContentVisible, setIsContentVisible] = React.useState(true);
+    const isCollapsedRef = React.useRef(defaultCollapsed);
+    const isContentCollapsedRef = React.useRef(defaultCollapsed);
     const manualCollapsedRef = React.useRef(defaultCollapsed);
+    const collapseTimerRef = React.useRef(null);
+    const clearCollapseTimer = React.useCallback(() => {
+        if (collapseTimerRef.current === null)
+            return;
+        clearTimeout(collapseTimerRef.current);
+        collapseTimerRef.current = null;
+    }, []);
+    const updateCollapsedState = React.useCallback((nextCollapsed) => {
+        var _a;
+        clearCollapseTimer();
+        isCollapsedRef.current = nextCollapsed;
+        setIsCollapsed(nextCollapsed);
+        const reduceMotion = typeof window !== "undefined" &&
+            ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+        if (reduceMotion) {
+            isContentCollapsedRef.current = nextCollapsed;
+            setIsContentCollapsed(nextCollapsed);
+            setIsContentVisible(true);
+            return;
+        }
+        if (isContentCollapsedRef.current === nextCollapsed) {
+            setIsContentVisible(true);
+            return;
+        }
+        setIsContentVisible(false);
+        collapseTimerRef.current = setTimeout(() => {
+            collapseTimerRef.current = null;
+            if (isCollapsedRef.current === nextCollapsed) {
+                isContentCollapsedRef.current = nextCollapsed;
+                setIsContentCollapsed(nextCollapsed);
+                setIsContentVisible(true);
+            }
+        }, SIDEBAR_CONTENT_CROSSFADE_MS);
+    }, [clearCollapseTimer]);
     const collapse = React.useCallback(() => {
-        setIsCollapsed(true);
         manualCollapsedRef.current = true;
-    }, []);
-    const toggle = () => {
-        setIsCollapsed((prev) => {
-            const next = !prev;
-            manualCollapsedRef.current = next;
-            return next;
-        });
-    };
+        updateCollapsedState(true);
+    }, [updateCollapsedState]);
+    const toggle = React.useCallback(() => {
+        const nextCollapsed = !isCollapsedRef.current;
+        manualCollapsedRef.current = nextCollapsed;
+        updateCollapsedState(nextCollapsed);
+    }, [updateCollapsedState]);
     React.useEffect(() => {
         const handleResize = () => {
             if (window.innerWidth < COLLAPSE_BREAKPOINT) {
-                setIsCollapsed(true);
+                updateCollapsedState(true);
             }
             else {
-                setIsCollapsed(manualCollapsedRef.current);
+                updateCollapsedState(manualCollapsedRef.current);
             }
         };
         handleResize();
         window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return (_jsx(SidebarContext.Provider, { value: { isCollapsed, toggle, collapse }, children: children }));
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            clearCollapseTimer();
+        };
+    }, [clearCollapseTimer, updateCollapsedState]);
+    return (_jsx(SidebarContext.Provider, { value: {
+            isCollapsed,
+            isContentCollapsed,
+            isContentVisible,
+            toggle,
+            collapse,
+        }, children: children }));
 }
 export function useSidebar() {
     const context = React.useContext(SidebarContext);
@@ -142,10 +189,10 @@ function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightP
     }, [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, 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
-            ? "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 SidebarShell({ isCollapsed, isContentCollapsed, isContentVisible, 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-[width] duration-300 ease-in-out will-change-[width] motion-reduce:transition-none", isCollapsed
+            ? "w-[var(--layout-sidebar-collapsed-width)] px-[var(--layout-sidebar-padding-inline)]"
+            : "w-[var(--layout-sidebar-width)] px-[var(--layout-sidebar-padding-inline)]", isContentCollapsed ? "overflow-visible" : "overflow-hidden", className), ...props, children: _jsx("div", { "data-slot": "sidebar-transition-content", className: cn("flex min-h-0 flex-1 flex-col transition-opacity duration-100 ease-out motion-reduce:transition-none", isContentVisible ? "opacity-100" : "opacity-0"), children: children }) }));
 }
 function SidebarHeader({ className, children, }) {
     return _jsx("div", { className: cn("shrink-0", className), children: children });
@@ -242,7 +289,9 @@ function getDashboardSidebarProfileAvatarOverlay(status) {
     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) }));
+    return (_jsx(AvatarProfile, { ...props, size: size, name: isCollapsed ? undefined : name, role: isCollapsed ? undefined : role, rolePlacement: rolePlacement, className: cn("w-full items-center rounded-control text-muted-foreground transition-colors hover:bg-card hover:text-foreground", isCollapsed
+            ? "justify-center p-0"
+            : "min-w-0 gap-[8px] p-[10px]"), avatarClassName: "mt-0 h-[32px] w-[32px] rounded-[10px]", fallbackClassName: "rounded-[10px]", contentClassName: "max-w-[120px] gap-[2px]", nameClassName: "font-semibold leading-none", roleClassName: "leading-none text-foreground", topInfoClassName: "leading-none text-foreground", bottomInfoClassName: "leading-none 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 }) }));
@@ -254,15 +303,13 @@ const DashboardSidebarProfileTrigger = React.forwardRef(({ isCollapsed = false,
         : "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] }) }) }));
+    const infoClassName = "min-w-0 truncate text-xs leading-none text-foreground";
+    const nameNode = name !== undefined && name !== null ? (_jsx("span", { className: "min-w-0 truncate text-sm font-semibold leading-none 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 w-full min-w-0 max-w-full items-center rounded-control transition-colors hover:bg-card hover:text-foreground", isCollapsed ? "justify-center p-0" : "gap-[8px] p-[10px]"), children: [_jsxs("span", { className: "relative shrink-0", children: [loading ? (_jsx("span", { "aria-hidden": "true", className: "block h-[32px] w-[32px] shrink-0 animate-pulse rounded-[10px] bg-muted" })) : (_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: "h-[32px] w-[32px] rounded-[10px]", fallbackClassName: "rounded-[10px]" })), getDashboardSidebarProfileAvatarOverlay(status)] }), !isCollapsed && hasMeta ? (_jsxs("span", { className: "flex min-w-0 max-w-[120px] 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(ChevronsUpDown, { "aria-hidden": "true", className: "ml-auto shrink-0 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 }) {
@@ -315,44 +362,73 @@ function DashboardSidebarItem({ item, isCollapsed, depth = 0, }) {
     }
     return (_jsx(DashboardSidebarLeafItem, { item: item, isCollapsed: isCollapsed, depth: depth }));
 }
-function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel = "Toggle sidebar", ...props }) {
+function DashboardSidebar({ className, children, logo, collapsedToggleIcon, search, navGroups, showNavigationDivider = true, footerItems, footer, toggleAriaLabel = "Toggle sidebar", ...props }) {
     var _a;
-    const { isCollapsed, toggle } = useSidebar();
+    const { isCollapsed, isContentCollapsed, isContentVisible, toggle, } = useSidebar();
     const hasStructuredSidebar = logo !== undefined ||
         search !== undefined ||
         navGroups !== undefined ||
         footerItems !== undefined ||
         footer !== undefined;
     if (!hasStructuredSidebar) {
-        return (_jsx(SidebarShell, { isCollapsed: isCollapsed, className: className, ...props, children: children }));
+        return (_jsx(SidebarShell, { isCollapsed: isCollapsed, isContentCollapsed: isContentCollapsed, isContentVisible: isContentVisible, 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-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
+    return (_jsxs(SidebarShell, { isCollapsed: isCollapsed, isContentCollapsed: isContentCollapsed, isContentVisible: isContentVisible, className: className, ...props, children: [_jsxs(SidebarHeader, { className: cn("flex h-14 items-center gap-2", isContentCollapsed
+                    ? "justify-center px-0"
+                    : "justify-between px-3"), children: [renderSidebarSlot(logo, isContentCollapsed), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": toggleAriaLabel, title: isContentCollapsed && collapsedToggleIcon
+                            ? toggleAriaLabel
+                            : undefined, className: cn("shrink-0 rounded-control", isContentCollapsed
+                            ? collapsedSidebarControlClassName
+                            : "h-7 w-7"), onClick: toggle, children: isContentCollapsed ? (collapsedToggleIcon !== null && collapsedToggleIcon !== void 0 ? collapsedToggleIcon : _jsx(ChevronRightIcon, { size: 16 })) : (_jsx(ChevronLeftIcon, { size: 16 })) })] }), search ? (_jsx(SidebarHeader, { className: cn(isContentCollapsed
                     ? "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
+                    : "px-2 pb-3 pt-2"), children: renderSidebarSlot(search, isContentCollapsed) })) : null, showNavigationDivider &&
+                (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(isContentCollapsed
                     ? "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 (_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] }));
+                        return (_jsx(SidebarGroup, { children: _jsxs("div", { className: cn(groupIndex > 0 &&
+                                    "mt-[var(--layout-sidebar-section-gap)]"), children: [group.label ? (_jsx(SidebarGroupLabel, { "aria-hidden": isContentCollapsed ? true : undefined, className: isContentCollapsed ? "invisible" : undefined, children: group.label })) : null, _jsx(SidebarMenu, { children: group.items.map((item) => (_jsx(SidebarMenuItem, { collapsed: isContentCollapsed, children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isContentCollapsed }) }, 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(isContentCollapsed ? "px-0 py-1" : "px-1.5 py-1"), children: _jsx(SidebarMenu, { children: footerItems.map((item) => (_jsx(SidebarMenuItem, { collapsed: isContentCollapsed, children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isContentCollapsed }) }, 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, isContentCollapsed) })) : 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 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 DashboardRightPanelTabs({ className, listWrapperClassName, panelClassName, spacing = "default", size, ...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", spacing === "spacious"
+            ? "px-[32px] pb-[24px] pt-[24px]"
+            : "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), size: size !== null && size !== void 0 ? size : (spacing === "spacious" ? "comfortable" : undefined), ...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 }));
+const DashboardRightPanel = React.forwardRef(({ className, surface = "default", ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex min-h-0 flex-1 flex-col", surface === "plain"
+        ? "bg-background"
+        : "bg-[hsl(var(--layout-right-panel-background))]", className), ...props })));
+DashboardRightPanel.displayName = "DashboardRightPanel";
+function DashboardRightPanelHeader({ className, spacing = "default", title, subtitle, badge, action, children, ...props }) {
+    return (_jsx("div", { className: cn(spacing === "comfortable"
+            ? "shrink-0 p-[16px]"
+            : "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: cn("min-w-0 flex-1", spacing === "comfortable" && "space-y-[4px]"), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Typography, { as: "h2", variant: "subheading", children: title }), badge] }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: spacing === "comfortable"
+                                ? "text-muted-foreground"
+                                : undefined, children: subtitle })) : null, children] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }) }));
 }
-function DashboardRightPanelHeader({ className, title, subtitle, badge, action, children, ...props }) {
-    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] }) }));
+const DashboardActionPanel = React.forwardRef(({ panelId, headerSpacing, title, subtitle, badge, action, headerChildren, className, children, ...props }, ref) => (_jsxs(DashboardRightPanel, { ref: ref, "data-slot": "dashboard-action-panel", "data-panel-id": panelId, className: cn("h-full min-h-0 w-full", className), ...props, children: [_jsx(DashboardRightPanelHeader, { spacing: headerSpacing, title: title, subtitle: subtitle, badge: badge, action: action, children: headerChildren }), children] })));
+DashboardActionPanel.displayName = "DashboardActionPanel";
+function DashboardActionPanelEmptyState(props) {
+    return (_jsx("div", { "data-slot": "dashboard-action-panel-empty-state", className: "absolute inset-0 flex items-center justify-center overflow-y-auto", children: _jsx(EmptyState, { ...props }) }));
 }
-function DashboardRightPanelBody({ className, contentClassName, footer, footerClassName, children, ...props }) {
+function DashboardRightPanelBody({ className, contentClassName, footer, footerVariant = "inline", footerClassName, spacing = "default", topInset = "default", children, ...props }) {
     const { scrollRef, canScrollDown } = useScrollOverflowHint();
+    const spacingClassName = spacing === "spacious"
+        ? "px-[32px] py-[24px]"
+        : spacing === "comfortable"
+            ? "p-[16px]"
+            : "p-[var(--layout-right-panel-padding)]";
+    const topInsetClassName = topInset === "none" ? "pt-0" : undefined;
     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 })] }));
+        if (footerVariant === "separated") {
+            return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", className: cn("scrollbar-none h-full min-h-0 overflow-y-auto", spacingClassName, topInsetClassName, contentClassName), children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }), _jsx("div", { className: cn("shrink-0 border-t border-border bg-muted/50", spacingClassName, footerClassName), children: footer })] }));
+        }
+        return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", spacingClassName, topInsetClassName, className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", 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 })] }));
+    return (_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto", spacingClassName, topInsetClassName, className), ...props, children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }));
 }
 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();
@@ -725,4 +801,4 @@ function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanel
                             ? "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, DashboardSidebarProfilePopover, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, DashboardContent, DashboardActionPanel, DashboardActionPanelEmptyState, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };

package/dist/lib/utils.js

@@ -4,6 +4,7 @@ const twMerge = extendTailwindMerge({
     extend: {
         theme: {
             borderRadius: ["control", "surface", "overlay"],
+            spacing: ["control"],
         },
     },
 });

package/dist/message-item.d.ts

@@ -11,6 +11,9 @@ export interface MessageItemData {
     senderRole: "OFFICER" | "APPLICANT" | "SYSTEM";
     officerName?: string | null;
     officerRole?: string | null;
+    avatarUrl?: string | null;
+    systemLabel?: string | null;
+    senderBadgeLabel?: React.ReactNode;
     applicantEmail?: string | null;
     applicantName?: string | null;
     content: string;
@@ -24,12 +27,17 @@ export interface MessageItemProps {
     caseId?: string;
     showNewBadge?: boolean;
     newMessageLabel?: React.ReactNode;
+    /** Controls whether unread state is shown as an inline badge or a divider before the message. */
+    newIndicatorPresentation?: "badge" | "divider";
     /** @deprecated Unread messages render a divider. Use `newMessageLabel` to customize its text. */
     newIndicator?: React.ReactNode;
     onMarkAsRead?: (message: MessageItemData) => Promise<boolean | void> | boolean | void;
     onMarkedAsRead?: (message: MessageItemData) => void;
     getAttachmentDownloadUrl?: (attachment: MessageItemAttachment, message: MessageItemData, caseId?: string) => string | null | undefined;
     formatTimestamp?: (date: Date, message: MessageItemData) => React.ReactNode;
+    variant?: "default" | "card";
+    /** `compact` reduces card insets for constrained correspondence panels. */
+    density?: "default" | "compact";
     className?: string;
     contentClassName?: string;
 }
@@ -37,6 +45,7 @@ export interface MessageAttachmentRowProps extends React.HTMLAttributes<HTMLElem
     attachment: MessageItemAttachment;
     downloadUrl?: string | null;
     downloadLabel?: string;
+    variant?: "default" | "compact";
 }
 export interface MessageNewDividerProps {
     children?: React.ReactNode;
@@ -47,16 +56,27 @@ export interface MessageThreadProps {
     caseId?: string;
     showNewBadge?: boolean;
     newMessageLabel?: React.ReactNode;
+    /** Controls whether unread state is shown as an inline badge or a divider before the first unread message. */
+    newIndicatorPresentation?: "badge" | "divider";
     onMarkAsRead?: MessageItemProps["onMarkAsRead"];
     onMarkedAsRead?: MessageItemProps["onMarkedAsRead"];
     getAttachmentDownloadUrl?: MessageItemProps["getAttachmentDownloadUrl"];
     formatTimestamp?: MessageItemProps["formatTimestamp"];
+    variant?: MessageItemProps["variant"];
+    density?: MessageItemProps["density"];
+    groupByDate?: boolean;
+    /** Keeps timestamps in each card while omitting redundant date-group headings. */
+    showDateHeadings?: boolean;
+    formatDateHeading?: (date: Date) => React.ReactNode;
     className?: string;
     itemClassName?: string;
     contentClassName?: string;
 }
 export declare const formatMessageDate: (date: Date) => string;
+export declare const formatMessageTime: (date: Date) => string;
+export declare const formatMessageCardTimestamp: (date: Date, now?: Date) => string;
+export declare const formatMessageDateHeading: (date: Date, now?: Date) => string;
 export declare function MessageNewDivider({ children, className, }: MessageNewDividerProps): import("react/jsx-runtime").JSX.Element;
-export declare function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel, className, ...props }: MessageAttachmentRowProps): import("react/jsx-runtime").JSX.Element;
-export declare function MessageItem({ message, caseId, showNewBadge, newMessageLabel, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, contentClassName, }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
-export declare function MessageThread({ messages, caseId, showNewBadge, newMessageLabel, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, itemClassName, contentClassName, }: MessageThreadProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel, variant, className, ...props }: MessageAttachmentRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageItem({ message, caseId, showNewBadge, newMessageLabel, newIndicatorPresentation, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, variant, density, className, contentClassName, }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageThread({ messages, caseId, showNewBadge, newMessageLabel, newIndicatorPresentation, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, variant, density, groupByDate, showDateHeadings, formatDateHeading: formatDateHeadingProp, className, itemClassName, contentClassName, }: MessageThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/message-item.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { FileText } from "lucide-react";
+import { FileText, Laptop, Paperclip } from "lucide-react";
 import { DownloadIcon } from "./animated-icons";
-import { AvatarProfile } from "./avatar";
+import { Avatar, AvatarProfile } from "./avatar";
 import { Badge } from "./badge";
 import { formatNotificationTimestamp } from "./notification";
 import { Separator } from "./separator";
@@ -18,6 +18,49 @@ export const formatMessageDate = (date) => {
     const pad = (value) => String(value).padStart(2, "0");
     return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(twelveHour)}:${pad(d.getMinutes())} ${period}`;
 };
+export const formatMessageTime = (date) => new Intl.DateTimeFormat("en-SG", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+})
+    .format(new Date(date))
+    .toLowerCase();
+export const formatMessageCardTimestamp = (date, now = new Date()) => {
+    const value = new Date(date);
+    const nowValue = new Date(now);
+    const timeLabel = new Intl.DateTimeFormat("en-SG", {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    }).format(value).toUpperCase();
+    const isToday = value.getFullYear() === nowValue.getFullYear() &&
+        value.getMonth() === nowValue.getMonth() &&
+        value.getDate() === nowValue.getDate();
+    if (isToday)
+        return `Today  ${timeLabel}`;
+    const elapsedDays = Math.floor((new Date(nowValue.getFullYear(), nowValue.getMonth(), nowValue.getDate()).getTime() -
+        new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime()) /
+        (24 * 60 * 60 * 1000));
+    if (elapsedDays > 0 && elapsedDays < 7) {
+        return `${elapsedDays} ${elapsedDays === 1 ? "day" : "days"} ago ${timeLabel}`;
+    }
+    const pad = (part) => String(part).padStart(2, "0");
+    const dateLabel = `${pad(value.getDate())}/${pad(value.getMonth() + 1)}/${value.getFullYear()}`;
+    return `${dateLabel}  ${timeLabel}`;
+};
+export const formatMessageDateHeading = (date, now = new Date()) => {
+    const value = new Date(date);
+    const isToday = value.getFullYear() === now.getFullYear() &&
+        value.getMonth() === now.getMonth() &&
+        value.getDate() === now.getDate();
+    if (isToday)
+        return "Today";
+    return new Intl.DateTimeFormat("en-SG", {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+    }).format(value);
+};
 function getInitials(name) {
     if (!name)
         return "";
@@ -39,9 +82,18 @@ function toHtmlContent(content) {
         .replace(/\n/g, "<br>");
 }
 export function MessageNewDivider({ children = "New Message", className, }) {
-    return (_jsxs("div", { className: cn("mb-3 flex items-center gap-3 py-1", className), children: [_jsx(Separator, { "aria-hidden": "true", className: "flex-1" }), _jsx(Typography, { as: "span", variant: "caption", className: "shrink-0 px-2 font-medium text-muted-foreground", children: children }), _jsx(Separator, { "aria-hidden": "true", className: "flex-1" })] }));
+    return (_jsxs("div", { "data-slot": "message-new-divider", className: cn("mb-3 flex items-center gap-3 py-1", className), children: [_jsx(Separator, { "aria-hidden": "true", className: "flex-1" }), _jsx(Typography, { as: "span", variant: "caption", className: "shrink-0 px-2 font-medium text-muted-foreground", children: children }), _jsx(Separator, { "aria-hidden": "true", className: "flex-1" })] }));
 }
-export function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel = `Download ${attachment.name}`, className, ...props }) {
+export function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel = `Download ${attachment.name}`, variant = "default", className, ...props }) {
+    if (variant === "compact") {
+        const compactContent = (_jsxs(_Fragment, { children: [_jsx(Paperclip, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx(Typography, { as: "span", variant: "bodySm", className: "min-w-0 truncate font-normal text-interactive", children: attachment.name }), attachment.size ? (_jsx(Typography, { as: "span", variant: "bodySm", className: "shrink-0 text-muted-foreground", children: attachment.size })) : null] }));
+        const compactClassName = cn("grid min-h-[44px] min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[8px] rounded-[8px] border border-border bg-card px-[12px] py-[11px] text-foreground no-underline", downloadUrl &&
+            "cursor-pointer transition-colors hover:border-primary/50 hover:bg-primary/5 hover:no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className);
+        if (downloadUrl) {
+            return (_jsx("a", { className: compactClassName, href: downloadUrl, target: "_blank", rel: "noopener noreferrer", download: attachment.name, "aria-label": downloadLabel, title: downloadLabel, ...props, children: compactContent }));
+        }
+        return (_jsx("div", { className: compactClassName, "aria-disabled": "true", ...props, children: compactContent }));
+    }
     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-highlight group-hover:text-highlight-foreground group-focus-visible:border-primary/40 group-focus-visible:bg-highlight group-focus-visible:text-highlight-foreground"
                     : "opacity-60"), children: _jsx(DownloadIcon, { size: 14 }) })] }));
@@ -50,7 +102,7 @@ export function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel =
     }
     return (_jsx("div", { className: cn("grid min-w-0 grid-cols-[auto_minmax(0,1fr)_2.75rem] items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 shadow-sm", className), "aria-disabled": "true", ...props, children: renderContent(false) }));
 }
-export function MessageItem({ message, caseId, showNewBadge = false, newMessageLabel = "New Message", onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, contentClassName, }) {
+export function MessageItem({ message, caseId, showNewBadge = false, newMessageLabel = "New Message", newIndicatorPresentation, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, variant = "default", density = "default", className, contentClassName, }) {
     var _a;
     const messageRef = React.useRef(null);
     const [hasBeenViewed, setHasBeenViewed] = React.useState(message.isRead);
@@ -59,7 +111,10 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
     const isOfficer = message.senderRole === "OFFICER";
     const isApplicant = message.senderRole === "APPLICANT";
     const isUnreadApplicant = isApplicant && !message.isRead;
-    const showUnreadDivider = showNewBadge && isUnreadApplicant;
+    const showUnreadIndicator = showNewBadge && isUnreadApplicant;
+    const resolvedNewIndicatorPresentation = newIndicatorPresentation !== null && newIndicatorPresentation !== void 0 ? newIndicatorPresentation : (variant === "card" ? "badge" : "divider");
+    const showUnreadBadge = showUnreadIndicator && resolvedNewIndicatorPresentation === "badge";
+    const showUnreadDivider = showUnreadIndicator && resolvedNewIndicatorPresentation === "divider";
     React.useEffect(() => {
         if (message.isRead ||
             message.senderRole !== "APPLICANT" ||
@@ -125,7 +180,7 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
         }
         const intervalId = window.setInterval(() => setTimestampNow(new Date()), MESSAGE_TIMESTAMP_REFRESH_MS);
         return () => window.clearInterval(intervalId);
-    }, [formatTimestamp]);
+    }, [formatTimestamp, variant]);
     const senderName = isOfficer
         ? message.officerName || "Officer"
         : isApplicant
@@ -137,23 +192,67 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
             ? message.applicantName || message.applicantEmail || "Applicant"
             : "System";
     const officerRole = isOfficer ? message.officerRole : undefined;
-    const senderProfileRole = isOfficer ? officerRole : undefined;
+    const senderProfileRole = isOfficer
+        ? officerRole
+        : variant === "card"
+            ? isApplicant
+                ? "Applicant"
+                : "System (Auto-generated)"
+            : undefined;
     const hasSenderProfileRole = Boolean(senderProfileRole);
     const attachments = (message.attachments || []);
     const messageDate = (_a = message.sentAt) !== null && _a !== void 0 ? _a : message.createdAt;
     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-interactive [&_a]:underline [&_a:hover]:text-interactive", "[&_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", className: "text-muted-foreground/60", children: formatTimestamp
-                                        ? formatTimestamp(messageDate, message)
-                                        : formatNotificationTimestamp(messageDate, {
-                                            now: timestampNow,
-                                        }) }) })] }), _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] })] })] }));
+    const richContentClassName = cn("break-words", variant === "default" && "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-interactive [&_a]:underline [&_a:hover]:text-interactive", "[&_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);
+    const cardSenderName = message.senderRole === "SYSTEM"
+        ? "System (Auto-generated)"
+        : senderName;
+    const cardSenderRole = isOfficer
+        ? officerRole
+        : isApplicant
+            ? "Applicant"
+            : message.systemLabel || "Automated message";
+    const sender = variant === "card" ? (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-[8px]", children: [isOfficer ? (_jsx(Avatar, { src: message.avatarUrl, alt: cardSenderName, fallback: getInitials(initialsName), size: "sm", className: "shrink-0" })) : message.senderRole === "SYSTEM" ? (_jsx("span", { className: "flex size-[24px] shrink-0 items-center justify-center", children: _jsx(Laptop, { "aria-hidden": "true", className: "size-[24px]" }) })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-[4px]", children: [_jsx(Typography, { as: "h3", variant: "label", className: "min-w-0", children: cardSenderName }), message.senderBadgeLabel ? (_jsx(Badge, { variant: "muted", className: "h-5 rounded-full px-2 py-0 [&_span]:normal-case", children: message.senderBadgeLabel })) : null, showUnreadBadge ? (_jsx(Badge, { variant: "success", className: "h-5 rounded-full px-2 py-0 [&_span]:normal-case", children: newMessageLabel })) : null] }), cardSenderRole ? (_jsx(Typography, { as: "p", variant: "caption", className: "truncate text-muted-foreground", "data-slot": "message-author-role", children: cardSenderRole })) : null] })] })) : (_jsx(AvatarProfile, { fallback: getInitials(initialsName), name: senderName, nameAs: "h3", nameTrailing: variant === "default" && 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]" }));
+    const header = variant === "card" ? (_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-[8px]", children: [sender, _jsx("time", { className: "shrink-0 whitespace-nowrap", dateTime: messageDate.toISOString(), children: _jsx(Typography, { as: "span", variant: "caption", className: "text-muted-foreground", children: formatTimestamp
+                        ? formatTimestamp(messageDate, message)
+                        : formatMessageCardTimestamp(messageDate, timestampNow) }) })] })) : (_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-x-3 gap-y-1", children: [sender, _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)
+                        : formatNotificationTimestamp(messageDate, {
+                            now: timestampNow,
+                        }) }) })] }));
+    const body = (_jsxs(_Fragment, { children: [_jsx(Typography, { as: "div", variant: "bodySm", color: "inherit", className: richContentClassName, dangerouslySetInnerHTML: { __html: contentHtml } }), attachments.length > 0 ? (_jsx("div", { className: variant === "card" ? "mt-[8px] space-y-[8px]" : "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), variant: variant === "card" ? "compact" : "default" }, `${attachment.name}-${idx}`))) })) : null] }));
+    return (_jsxs(_Fragment, { children: [showUnreadDivider && (_jsx(MessageNewDivider, { children: newMessageLabel })), _jsx("article", { "data-slot": variant === "card" ? "message-card" : "message-item", ref: messageRef, className: cn("min-w-0", variant === "card" &&
+                    "overflow-hidden rounded-surface border border-[hsl(var(--card-border))] bg-card", className), children: variant === "card" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: density === "compact" ? "p-[12px]" : "p-[16px]", children: header }), _jsx("div", { className: cn("border-t border-border", density === "compact" ? "p-[12px]" : "p-[16px]"), children: body })] })) : (_jsxs(_Fragment, { children: [header, _jsx("div", { className: "ml-[calc(2.25rem+var(--space-3))] pt-2", children: body })] })) })] }));
 }
-export function MessageThread({ messages, caseId, showNewBadge = false, newMessageLabel = "New Message", onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, itemClassName, contentClassName, }) {
+export function MessageThread({ messages, caseId, showNewBadge = false, newMessageLabel = "New Message", newIndicatorPresentation, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, variant = "default", density = "default", groupByDate = false, showDateHeadings = true, formatDateHeading: formatDateHeadingProp, className, itemClassName, contentClassName, }) {
     var _a;
+    const resolvedNewIndicatorPresentation = newIndicatorPresentation !== null && newIndicatorPresentation !== void 0 ? newIndicatorPresentation : (variant === "card" ? "badge" : "divider");
     const firstUnreadMessageId = showNewBadge
         ? (_a = messages.find((message) => message.senderRole === "APPLICANT" && !message.isRead)) === null || _a === void 0 ? void 0 : _a.id
         : undefined;
-    return (_jsx("div", { className: cn("space-y-5", className), children: messages.map((message) => (_jsx(MessageItem, { message: message, caseId: caseId, showNewBadge: message.id === firstUnreadMessageId, newMessageLabel: newMessageLabel, onMarkAsRead: onMarkAsRead, onMarkedAsRead: onMarkedAsRead, getAttachmentDownloadUrl: getAttachmentDownloadUrl, formatTimestamp: formatTimestamp, className: itemClassName, contentClassName: contentClassName }, message.id))) }));
+    const renderMessage = (message) => (_jsx(MessageItem, { message: message, caseId: caseId, showNewBadge: resolvedNewIndicatorPresentation === "badge" && variant === "card"
+            ? showNewBadge &&
+                message.senderRole === "APPLICANT" &&
+                !message.isRead
+            : message.id === firstUnreadMessageId, newMessageLabel: newMessageLabel, newIndicatorPresentation: resolvedNewIndicatorPresentation, onMarkAsRead: onMarkAsRead, onMarkedAsRead: onMarkedAsRead, getAttachmentDownloadUrl: getAttachmentDownloadUrl, formatTimestamp: formatTimestamp, variant: variant, density: density, className: itemClassName, contentClassName: contentClassName }, message.id));
+    if (groupByDate && showDateHeadings) {
+        const groups = messages.reduce((result, message) => {
+            var _a;
+            const date = new Date((_a = message.sentAt) !== null && _a !== void 0 ? _a : message.createdAt);
+            const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+            const group = result[result.length - 1];
+            if ((group === null || group === void 0 ? void 0 : group.key) === key) {
+                group.messages.push(message);
+            }
+            else {
+                result.push({ key, date, messages: [message] });
+            }
+            return result;
+        }, []);
+        return (_jsx("div", { className: cn(variant === "card" ? "space-y-[24px]" : "space-y-5", className), children: groups.map((group) => (_jsxs("section", { className: variant === "card" ? "space-y-[16px]" : "space-y-3", children: [_jsx(Typography, { as: "h3", variant: "label", className: variant === "card" ? "font-semibold" : undefined, children: formatDateHeadingProp
+                            ? formatDateHeadingProp(group.date)
+                            : formatMessageDateHeading(group.date) }), _jsx("div", { className: variant === "card" ? "space-y-[16px]" : "space-y-3", children: group.messages.map(renderMessage) })] }, group.key))) }));
+    }
+    return (_jsx("div", { className: cn(variant === "card" ? "space-y-[16px]" : "space-y-5", className), children: messages.map(renderMessage) }));
 }