@neasg/design-system 0.4.35 → 0.4.113

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) }));
 }

package/dist/notification.d.ts

@@ -25,6 +25,14 @@ export interface NotificationItemData {
     id: string;
     title: React.ReactNode;
     description?: React.ReactNode;
+    /** Person or system responsible for the event. */
+    actor?: React.ReactNode;
+    /** Optional status or category displayed in an activity-card header. */
+    badge?: React.ReactNode;
+    /** Per-item activity-card density. Falls back to the list density. */
+    activityDensity?: "compact" | "default";
+    /** `plain` matches activity events whose semantic glyph needs no tone tile. */
+    iconAppearance?: "plain" | "toned";
     meta?: React.ReactNode;
     timestamp?: NotificationTimestamp;
     dateTime?: string;
@@ -38,18 +46,21 @@ export interface NotificationItemData {
 export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect" | "title"> {
     notification: NotificationItemData;
     density?: "compact" | "default";
+    variant?: "row" | "card";
     labelLines?: 1 | 2;
     descriptionLines?: 1 | 2 | 3;
     unreadLabel?: React.ReactNode;
+    actorLabel?: React.ReactNode;
     onSelect?: (notification: NotificationItemData) => void;
 }
 export interface NotificationListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     notifications: NotificationItemData[];
     density?: "compact" | "default";
-    variant?: "bordered" | "plain";
+    variant?: "bordered" | "plain" | "cards";
     labelLines?: 1 | 2;
     descriptionLines?: 1 | 2 | 3;
     unreadLabel?: React.ReactNode;
+    actorLabel?: React.ReactNode;
     emptyState?: React.ReactNode;
     itemClassName?: string;
     onNotificationClick?: (notification: NotificationItemData) => void;
@@ -83,7 +94,7 @@ export interface NotificationTriggerProps extends Omit<ButtonProps, "children">
 }
 declare function formatNotificationTimestamp(timestamp: NotificationTimestamp, { now, locale }?: FormatNotificationTimestampOptions): string;
 declare const NotificationTrigger: React.ForwardRefExoticComponent<NotificationTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare function NotificationItem({ notification, density, labelLines, descriptionLines, unreadLabel, className, onClick, onSelect, ...props }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
-declare function NotificationList({ notifications, density, variant, labelLines, descriptionLines, unreadLabel, emptyState, itemClassName, className, onNotificationClick, ...props }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
+declare function NotificationItem({ notification, density, variant, labelLines, descriptionLines, unreadLabel, actorLabel, className, onClick, onSelect, ...props }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
+declare function NotificationList({ notifications, density, variant, labelLines, descriptionLines, unreadLabel, actorLabel, emptyState, itemClassName, className, onNotificationClick, ...props }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
 declare function NotificationPopover({ trigger, notifications, title, filter, defaultFilter, onFilterChange, showFilterTabs, height, minHeight, maxHeight, emptyState, listClassName, itemClassName, unreadLabel, markAllAsReadLabel, onNotificationClick, onMarkAllAsRead, contentClassName, align, ...popoverProps }: NotificationPopoverProps): import("react/jsx-runtime").JSX.Element;
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, };

package/dist/notification.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Bell, ClipboardCheck, FileText, MessageSquare, UserCheck, } from "lucide-react";
+import { ActivityCard, ActivityCardActor, ActivityCardContent, } from "./activity-card";
 import { Button } from "./button";
 import { CountBadge } from "./count-badge";
 import { EmptyState } from "./empty-state";
@@ -118,8 +119,8 @@ function getNotificationTone(notification) {
     var _a, _b;
     return ((_a = notification.tone) !== null && _a !== void 0 ? _a : notificationKindTones[(_b = notification.kind) !== null && _b !== void 0 ? _b : "system"]);
 }
-function NotificationItem({ notification, density = "default", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", className, onClick, onSelect, ...props }) {
-    var _a, _b, _c;
+function NotificationItem({ notification, density = "default", variant = "row", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", actorLabel = "By", className, onClick, onSelect, ...props }) {
+    var _a, _b, _c, _d;
     const Icon = getNotificationIcon(notification);
     const tone = getNotificationTone(notification);
     const isUnread = Boolean(notification.unread);
@@ -141,7 +142,33 @@ 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: "shrink-0 whitespace-nowrap text-muted-foreground/70", 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) => {
+    if (variant === "card") {
+        const activityDensity = (_d = notification.activityDensity) !== null && _d !== void 0 ? _d : density;
+        const hasDescription = notification.description !== undefined &&
+            notification.description !== null &&
+            notification.description !== "";
+        const actorBelongsInHeader = notification.actor !== undefined && !hasDescription && !hasActions;
+        const hasCardContent = hasDescription ||
+            (notification.actor !== undefined && !actorBelongsInHeader) ||
+            hasActions;
+        const activityElement = notification.href && !hasActions
+            ? "a"
+            : isInteractive
+                ? "button"
+                : "article";
+        const unreadIndicator = isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "block size-2.5 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null;
+        const cardTrailing = notification.badge || unreadIndicator ? (_jsxs("span", { className: "flex items-center gap-[var(--space-2)]", children: [notification.badge, unreadIndicator] })) : null;
+        return (_jsx(ActivityCard, { as: activityElement, "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, density: activityDensity, icon: _jsx(Icon, { className: activityDensity === "compact" ? "size-3.5" : "size-[24px]" }), iconTone: notification.iconAppearance === "plain" ? undefined : tone, title: notification.title, titleLines: labelLines, meta: meta, headerContent: actorBelongsInHeader ? (_jsx(ActivityCardActor, { actor: notification.actor, label: actorLabel })) : undefined, trailing: cardTrailing, href: notification.href, className: cn("group relative w-full text-left outline-none transition-colors", isUnread && "bg-primary/[0.045]", hasHoverSurface && "hover:bg-accent/70", isInteractive &&
+                "cursor-pointer focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", className), onClick: isInteractive ? handleClick : undefined, ...props, children: hasCardContent ? (_jsxs(ActivityCardContent, { density: activityDensity, children: [hasDescription ? (_jsx(Typography, { as: "div", variant: "bodySm", className: cn("text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, notification.actor !== undefined && !actorBelongsInHeader ? (_jsx(ActivityCardActor, { actor: notification.actor, label: actorLabel })) : null, hasActions ? (_jsx("div", { className: "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;
+                                    event.stopPropagation();
+                                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, notification, event);
+                                }, children: action.label }, (_b = action.id) !== null && _b !== void 0 ? _b : index));
+                        }) })) : null] })) : null }));
+    }
+    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: "shrink-0 whitespace-nowrap text-muted-foreground/70", 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, notification.actor !== undefined ? (_jsxs(Typography, { as: "span", variant: "bodySm", className: "mt-2 block text-left font-semibold text-foreground", children: [actorLabel, " ", notification.actor] })) : 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;
@@ -149,7 +176,7 @@ function NotificationItem({ notification, density = "default", labelLines = 2, d
                                     (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, notification, event);
                                 }, children: action.label }, (_b = action.id) !== null && _b !== void 0 ? _b : index));
                         }) })) : null] })] }));
-    const itemClassName = cn("group relative flex w-full min-w-0 items-start gap-3 overflow-hidden border-b border-border/70 bg-card text-left text-card-foreground outline-none transition-colors last:border-b-0", density === "compact" ? "px-3 py-3" : "px-4 py-4", isUnread && "bg-primary/[0.045]", hasHoverSurface && "hover:bg-accent/70", isInteractive &&
+    const itemClassName = cn("group relative flex w-full min-w-0 items-start gap-3 overflow-hidden bg-card text-left text-card-foreground outline-none transition-colors", "border-b border-border/70 last:border-b-0", density === "compact" ? "px-3 py-3" : "px-4 py-4", isUnread && "bg-primary/[0.045]", hasHoverSurface && "hover:bg-accent/70", isInteractive &&
         "cursor-pointer focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", className);
     if (notification.href && !hasActions) {
         return (_jsx("a", { href: notification.href, "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, className: itemClassName, onClick: handleClick, ...props, children: content }));
@@ -159,11 +186,13 @@ function NotificationItem({ notification, density = "default", labelLines = 2, d
     }
     return (_jsx("div", { "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, className: itemClassName, ...props, children: content }));
 }
-function NotificationList({ notifications, density = "default", variant = "bordered", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", emptyState, itemClassName, className, onNotificationClick, ...props }) {
+function NotificationList({ notifications, density = "default", variant = "bordered", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", actorLabel = "By", emptyState, itemClassName, className, onNotificationClick, ...props }) {
     const hasNotifications = notifications.length > 0;
     const resolvedEmptyState = emptyState !== null && emptyState !== void 0 ? emptyState : (_jsx(EmptyState, { message: "No notifications", description: "New updates will appear here.", icon: Bell }));
-    return (_jsx("div", { "data-slot": "notification-list", className: cn("min-w-0 overflow-hidden bg-card text-card-foreground", !hasNotifications && "flex min-h-full flex-col", variant === "bordered" && "rounded-surface border border-border/70", className), ...props, children: hasNotifications
-            ? notifications.map((notification) => (_jsx(NotificationItem, { notification: notification, density: density, labelLines: labelLines, descriptionLines: descriptionLines, unreadLabel: unreadLabel, className: itemClassName, onSelect: onNotificationClick }, notification.id)))
+    return (_jsx("div", { "data-slot": "notification-list", className: cn("min-w-0 text-card-foreground", !hasNotifications && "flex min-h-full flex-col", variant === "cards"
+            ? "space-y-[var(--space-4)] bg-transparent"
+            : "overflow-hidden bg-card", variant === "bordered" && "rounded-surface border border-border/70", className), ...props, children: hasNotifications
+            ? notifications.map((notification) => (_jsx(NotificationItem, { notification: notification, density: density, variant: variant === "cards" ? "card" : "row", labelLines: labelLines, descriptionLines: descriptionLines, unreadLabel: unreadLabel, actorLabel: actorLabel, className: itemClassName, onSelect: onNotificationClick }, notification.id)))
             : (_jsx("div", { className: "flex min-h-0 flex-1 flex-col justify-center", children: resolvedEmptyState })) }));
 }
 function NotificationPopover({ trigger, notifications, title = "Notifications", filter, defaultFilter = "all", onFilterChange, showFilterTabs = true, height = "h-[36rem]", minHeight = "min-h-[36rem]", maxHeight = "max-h-[36rem]", emptyState, listClassName, itemClassName, unreadLabel = "Unread", markAllAsReadLabel = "Mark all as read", onNotificationClick, onMarkAllAsRead, contentClassName, align = "end", ...popoverProps }) {

package/dist/page-section.d.ts

@@ -8,8 +8,9 @@ export interface PageSectionProps extends Omit<React.HTMLAttributes<HTMLElement>
     description?: React.ReactNode;
     headerAction?: React.ReactNode;
     titleAdornment?: React.ReactNode;
+    titleAdornmentSpacing?: "default" | "comfortable";
     headerClassName?: string;
     contentClassName?: string;
 }
-declare function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function PageSection({ title, description, headerAction, titleAdornment, titleAdornmentSpacing, className, headerClassName, contentClassName, children, ...props }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
 export { PageSection, PageSectionGroup };

package/dist/page-section.js

@@ -6,9 +6,9 @@ function PageSectionGroup({ variant = "divided", className, ...props }) {
     return (_jsx("div", { className: cn(variant === "divided" && "divide-y divide-border", variant === "cards" &&
             "space-y-4 [&>[data-slot=page-section]]:rounded-surface [&>[data-slot=page-section]]:border [&>[data-slot=page-section]]:border-border/70 [&>[data-slot=page-section]]:bg-card [&>[data-slot=page-section]]:p-5", className), ...props }));
 }
-function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }) {
+function PageSection({ title, description, headerAction, titleAdornment, titleAdornmentSpacing = "default", 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-3 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: cn("flex flex-wrap items-center", titleAdornmentSpacing === "comfortable" ? "gap-4" : "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.d.ts

@@ -17,8 +17,10 @@ export interface PopoverMenuSectionProps extends React.HTMLAttributes<HTMLDivEle
 declare function PopoverMenuSection({ className, children, ...props }: PopoverMenuSectionProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
+    /** Communicates destructive actions without changing menu-item sizing. */
+    tone?: "default" | "destructive";
 }
-declare function PopoverMenuItem({ className, children, active, type, ...props }: PopoverMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverMenuItem({ className, children, active, tone, type, ...props }: PopoverMenuItemProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverMenuCheckboxItemProps extends Omit<CheckboxProps, "className" | "label"> {
     description?: React.ReactNode;
     className?: string;
@@ -52,7 +54,7 @@ declare const PopoverMenuSearch: React.ForwardRefExoticComponent<Omit<PopoverMen
 export interface PopoverMenuScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     maxHeight?: string;
 }
-declare function PopoverMenuScrollArea({ className, children, maxHeight, ...props }: PopoverMenuScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverMenuScrollArea({ className, children, maxHeight, onScroll, ...props }: PopoverMenuScrollAreaProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverMenuViewProps extends React.HTMLAttributes<HTMLDivElement> {
     direction?: "forward" | "backward" | "none";
     viewKey?: React.Key;

package/dist/popover-menu.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Check } from "lucide-react";
+import { Check, ChevronUp } from "lucide-react";
+import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
 import { Input } from "./input";
@@ -20,9 +21,10 @@ function PopoverMenuHeader({ className, children, ...props }) {
 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 }) {
+function PopoverMenuItem({ className, children, active, tone = "default", type = "button", ...props }) {
     return (_jsxs(Button, { type: type, variant: "ghost", "data-slot": "popover-menu-item", className: cn("h-auto min-h-8 w-full justify-start gap-2 px-2 py-2 text-left font-normal whitespace-normal aria-[selected=true]:bg-highlight aria-[selected=true]:text-highlight-foreground aria-[selected=true]:[--muted-foreground:var(--instructional-foreground)] aria-[selected=true]:hover:bg-highlight/80 aria-[selected=true]:hover:text-highlight-foreground aria-[selected=true]:focus-visible:bg-highlight/80 aria-[selected=true]:focus-visible:text-highlight-foreground", popoverMenuItemFocusClassName, active &&
-            "bg-highlight text-highlight-foreground [--muted-foreground:var(--instructional-foreground)] hover:bg-highlight/80 hover:text-highlight-foreground focus-visible:bg-highlight/80 focus-visible:text-highlight-foreground", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
+            "bg-highlight text-highlight-foreground [--muted-foreground:var(--instructional-foreground)] hover:bg-highlight/80 hover:text-highlight-foreground focus-visible:bg-highlight/80 focus-visible:text-highlight-foreground", tone === "destructive" &&
+            "text-destructive hover:bg-destructive/10 hover:text-destructive focus-visible:bg-destructive/10 focus-visible:text-destructive", 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 }) {
     return (_jsxs("label", { className: cn("flex h-auto min-h-8 w-full cursor-pointer items-start gap-1.5 rounded-sm px-2 py-2 text-left text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground", popoverMenuItemFocusWithinClassName, checked &&
@@ -52,8 +54,66 @@ const PopoverMenuSearch = React.forwardRef(({ "aria-label": ariaLabel, className
     return (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-1 py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-['']", containerClassName), children: _jsx(Input, { ref: ref, "data-popover-menu-search": "true", label: (_b = (_a = label !== null && label !== void 0 ? label : ariaLabel) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : "Search", hideLabel: true, className: "gap-0", inputClassName: className, "aria-label": ariaLabel, placeholder: placeholder, ...props }) }));
 });
 PopoverMenuSearch.displayName = "PopoverMenuSearch";
-function PopoverMenuScrollArea({ className, children, maxHeight = "max-h-64", ...props }) {
-    return (_jsx("div", { className: cn(maxHeight, "space-y-1 overflow-y-auto overflow-x-hidden", className), ...props, children: children }));
+function PopoverMenuScrollButton({ direction, onAutoScroll, }) {
+    const autoScrollTimerRef = React.useRef(null);
+    const clearAutoScrollTimer = React.useCallback(() => {
+        if (autoScrollTimerRef.current === null)
+            return;
+        window.clearInterval(autoScrollTimerRef.current);
+        autoScrollTimerRef.current = null;
+    }, []);
+    const startAutoScroll = React.useCallback(() => {
+        if (autoScrollTimerRef.current !== null)
+            return;
+        autoScrollTimerRef.current = window.setInterval(() => onAutoScroll(direction), 50);
+    }, [direction, onAutoScroll]);
+    React.useEffect(() => clearAutoScrollTimer, [clearAutoScrollTimer]);
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": `popover-menu-scroll-${direction}-button`, className: "-mx-1 flex shrink-0 cursor-pointer items-center justify-center py-1", onPointerDown: startAutoScroll, onPointerMove: startAutoScroll, onPointerLeave: clearAutoScrollTimer, children: direction === "up" ? (_jsx(ChevronUp, { className: "h-4 w-4" })) : (_jsx(ChevronDownIcon, { size: 16 })) }));
+}
+function PopoverMenuScrollArea({ className, children, maxHeight = "max-h-64", onScroll, ...props }) {
+    const scrollAreaRef = React.useRef(null);
+    const [canScrollUp, setCanScrollUp] = React.useState(false);
+    const [canScrollDown, setCanScrollDown] = React.useState(false);
+    const updateScrollControls = React.useCallback(() => {
+        const scrollArea = scrollAreaRef.current;
+        if (!scrollArea)
+            return;
+        const maxScroll = scrollArea.scrollHeight - scrollArea.clientHeight;
+        setCanScrollUp(scrollArea.scrollTop > 0);
+        setCanScrollDown(maxScroll > 0 && Math.ceil(scrollArea.scrollTop) < maxScroll);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        const scrollArea = scrollAreaRef.current;
+        if (!scrollArea)
+            return;
+        updateScrollControls();
+        const animationFrame = window.requestAnimationFrame(updateScrollControls);
+        const resizeObserver = typeof ResizeObserver === "undefined"
+            ? null
+            : new ResizeObserver(updateScrollControls);
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(scrollArea);
+        const mutationObserver = new MutationObserver(updateScrollControls);
+        mutationObserver.observe(scrollArea, { childList: true, subtree: true });
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [children, updateScrollControls]);
+    const handleScroll = React.useCallback((event) => {
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+        updateScrollControls();
+    }, [onScroll, updateScrollControls]);
+    const handleAutoScroll = React.useCallback((direction) => {
+        const scrollArea = scrollAreaRef.current;
+        if (!scrollArea)
+            return;
+        const firstItem = scrollArea.querySelector('[data-slot="popover-menu-item"]');
+        const scrollStep = (firstItem === null || firstItem === void 0 ? void 0 : firstItem.offsetHeight) || 32;
+        scrollArea.scrollTop += direction === "up" ? -scrollStep : scrollStep;
+        updateScrollControls();
+    }, [updateScrollControls]);
+    return (_jsxs("div", { "data-slot": "popover-menu-scroll-viewport", className: cn(maxHeight, "flex min-h-0 flex-col overflow-hidden"), children: [canScrollUp ? (_jsx(PopoverMenuScrollButton, { direction: "up", onAutoScroll: handleAutoScroll })) : null, _jsx("div", { ref: scrollAreaRef, className: cn("-mx-1 min-h-0 flex-1 space-y-1 overflow-y-auto overflow-x-hidden px-1", className), onScroll: handleScroll, ...props, children: children }), canScrollDown ? (_jsx(PopoverMenuScrollButton, { direction: "down", onAutoScroll: handleAutoScroll })) : null] }));
 }
 function PopoverMenuView({ children, className, direction = "forward", viewKey = "default", ...props }) {
     const [activeViewKey, setActiveViewKey] = React.useState(viewKey);

package/dist/popover.d.ts

@@ -5,12 +5,15 @@ import { type TooltipProps } from "./tooltip";
 import { Typography } from "./typography";
 type PopoverRootProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
 type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+type PopoverAnchorProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
 export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "modal" | "onOpenChange" | "open">, Omit<PopoverContentProps, "children" | "className" | "title"> {
     trigger: React.ReactElement;
+    /** Positions the popover from a specific element while retaining `trigger` for interaction and focus. */
+    virtualAnchorRef?: PopoverAnchorProps["virtualRef"];
     children: React.ReactNode;
     /** Visible popover heading. Also labels the popover for assistive technology. */
     title?: React.ReactNode;
-    surface?: "panel" | "menu";
+    surface?: "panel" | "menu" | "message";
     /** Controls whether Tab stays within the popover or closes it and continues in the page Tab order. */
     tabBehavior?: PopoverTabBehavior;
     contentClassName?: string;
@@ -19,8 +22,13 @@ export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "mo
     triggerTooltipSideOffset?: TooltipProps["sideOffset"];
     triggerTooltipClassName?: TooltipProps["contentClassName"];
 }
-declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface, tabBehavior, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, virtualAnchorRef, children, title, surface, tabBehavior, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, style, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Typography>, "as" | "asChild" | "variant" | "color"> {
 }
 declare function PopoverTitle({ className, children, ...props }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
 export { Popover, PopoverTitle };
+export interface PopoverListProps {
+    items: readonly string[];
+}
+/** Read-only information rows for a popover, without implying menu actions. */
+export declare function PopoverList({ items }: PopoverListProps): import("react/jsx-runtime").JSX.Element;

package/dist/popover.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
-import { PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
+import { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
 import { usePopoverTabExit, } from "./popover-focus";
 import { Tooltip } from "./tooltip";
 import { Typography } from "./typography";
-function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface = "panel", tabBehavior = "contain", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, ...contentProps }) {
+function Popover({ defaultOpen, modal, onOpenChange, open, trigger, virtualAnchorRef, children, title, surface = "panel", tabBehavior = "contain", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, style, ...contentProps }) {
     const generatedTitleId = React.useId();
     const titleId = title ? `popover-title-${generatedTitleId}` : undefined;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
@@ -79,7 +79,7 @@ function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, ti
         contentOnCloseAutoFocus === null || contentOnCloseAutoFocus === void 0 ? void 0 : contentOnCloseAutoFocus(event);
         handleCloseAutoFocus(event);
     }, [contentOnCloseAutoFocus, handleCloseAutoFocus]);
-    return (_jsxs(PopoverRoot, { modal: modal, onOpenChange: setOpen, open: currentOpen, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { ref: contentRef, align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, onCloseAutoFocus: handleContentCloseAutoFocus, onKeyDown: handleContentKeyDown, onKeyDownCapture: handleContentKeyDownCapture, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
+    return (_jsxs(PopoverRoot, { modal: modal, onOpenChange: setOpen, open: currentOpen, children: [virtualAnchorRef ? (_jsx(PopoverAnchor, { virtualRef: virtualAnchorRef })) : null, triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { ref: contentRef, align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", surface === "message" && "overflow-hidden p-0", contentClassName), style: style, ...contentProps, onCloseAutoFocus: handleContentCloseAutoFocus, onKeyDown: handleContentKeyDown, onKeyDownCapture: handleContentKeyDownCapture, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
                             ? "px-2 py-1.5"
                             : "-mx-4 -mt-4 mb-4 border-b px-4 py-3"), children: title })) : null, children] })] }));
 }
@@ -87,3 +87,7 @@ function PopoverTitle({ className, children, ...props }) {
     return (_jsx(Typography, { as: "p", variant: "label", "data-slot": "popover-title", className: className, ...props, children: children }));
 }
 export { Popover, PopoverTitle };
+/** Read-only information rows for a popover, without implying menu actions. */
+export function PopoverList({ items }) {
+    return (_jsx("ul", { "data-slot": "popover-list", className: "max-h-64 space-y-3 overflow-y-auto text-sm text-foreground", children: items.map((item, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "mt-2 size-1 shrink-0 rounded-full bg-muted-foreground" }), _jsx("span", { className: "min-w-0 break-words", children: item })] }, index))) }));
+}

package/dist/rich-text-editor.d.ts

@@ -25,6 +25,7 @@ export interface RichTextEditorSendAction {
     disabled?: boolean;
 }
 export interface RichTextEditorProps {
+    variant?: "default" | "message";
     placeholder?: string;
     editorAriaLabel?: string;
     header?: React.ReactNode;
@@ -53,4 +54,4 @@ export interface RichTextEditorProps {
 export declare function formatFileSize(bytes: number): string;
 export declare function sanitizeRichTextHtml(html: string): string;
 export declare function replaceTemplateVariables(content: string, context: TemplateContext): string;
-export declare function RichTextEditor({ placeholder, editorAriaLabel, header, isExpanded, onExpandToggle, onSend, className, maxFileSize, maxFileSizeLabel, acceptedFileTypes, acceptedFileTypesLabel, isSending, showTemplates, templates, templateContext, templateCategoryLabels, templateCategoryOrder, templateCreateHref, templateCreateLabel, onFileRejected, colorPalette, sendLabel, sendingLabel, sendActions, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditor({ variant, placeholder, editorAriaLabel, header, isExpanded, onExpandToggle, onSend, className, maxFileSize, maxFileSizeLabel, acceptedFileTypes, acceptedFileTypesLabel, isSending, showTemplates, templates, templateContext, templateCategoryLabels, templateCategoryOrder, templateCreateHref, templateCreateLabel, onFileRejected, colorPalette, sendLabel, sendingLabel, sendActions, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;