@neasg/design-system 0.4.33 → 0.4.95

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,29 @@ 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 hasCardContent = notification.description !== undefined ||
+            notification.actor !== undefined ||
+            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, 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: [notification.description !== undefined ? (_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 ? (_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 +172,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 +182,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/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,7 +22,7 @@ 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;

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

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;

package/dist/rich-text-editor.js

@@ -11,6 +11,7 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import Highlight from "@tiptap/extension-highlight";
 import Underline from "@tiptap/extension-underline";
+import { Baseline, Reply } from "lucide-react";
 import { BoldIcon, ChevronDownIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, MaximizeIcon, PaletteIcon, PaperclipIcon, PlusIcon, SendIcon, StrikethroughIcon, UnderlineIcon, XIcon, } from "./animated-icons";
 import { Button } from "./button";
 import { DropdownButton } from "./dropdown-button";
@@ -19,6 +20,7 @@ import { inputControlPaddingClassName } from "./input-control";
 import { Popover } from "./popover";
 import { PopoverMenuItem, PopoverMenuSection } from "./popover-menu";
 import { Tooltip } from "./tooltip";
+import { Typography } from "./typography";
 import { cn } from "./lib/utils";
 const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 const DEFAULT_MAX_FILE_SIZE_LABEL = "10MB";
@@ -125,7 +127,8 @@ function ToolbarIconButton({ active, label, onClick, children, }) {
 function getTemplateCategory(template) {
     return template.category || DEFAULT_TEMPLATE_CATEGORY;
 }
-export function RichTextEditor({ placeholder = "Type message here...", editorAriaLabel = "Message body", header, isExpanded = false, onExpandToggle, onSend, className, maxFileSize = DEFAULT_MAX_FILE_SIZE, maxFileSizeLabel = DEFAULT_MAX_FILE_SIZE_LABEL, acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES, acceptedFileTypesLabel = DEFAULT_ACCEPTED_FILE_TYPES_LABEL, isSending = false, showTemplates = true, templates = [], templateContext = {}, templateCategoryLabels = {}, templateCategoryOrder, templateCreateHref, templateCreateLabel = "Create new template", onFileRejected, colorPalette = DEFAULT_COLOR_PALETTE, sendLabel = "Send", sendingLabel = "Sending...", sendActions, }) {
+export function RichTextEditor({ variant = "default", placeholder = "Type message here...", editorAriaLabel = "Message body", header, isExpanded = false, onExpandToggle, onSend, className, maxFileSize = DEFAULT_MAX_FILE_SIZE, maxFileSizeLabel = DEFAULT_MAX_FILE_SIZE_LABEL, acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES, acceptedFileTypesLabel = DEFAULT_ACCEPTED_FILE_TYPES_LABEL, isSending = false, showTemplates = true, templates = [], templateContext = {}, templateCategoryLabels = {}, templateCategoryOrder, templateCreateHref, templateCreateLabel = "Create new template", onFileRejected, colorPalette = DEFAULT_COLOR_PALETTE, sendLabel = "Send", sendingLabel = "Sending...", sendActions, }) {
+    var _a;
     const [isEmpty, setIsEmpty] = React.useState(true);
     const [attachments, setAttachments] = React.useState([]);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -133,6 +136,7 @@ export function RichTextEditor({ placeholder = "Type message here...", editorAri
     const [linkUrl, setLinkUrl] = React.useState("");
     const [linkMenuPosition, setLinkMenuPosition] = React.useState(null);
     const [templatePopoverOpen, setTemplatePopoverOpen] = React.useState(false);
+    const [isFormattingOpen, setIsFormattingOpen] = React.useState(false);
     const fileInputRef = React.useRef(null);
     const dropZoneRef = React.useRef(null);
     const linkInputRef = React.useRef(null);
@@ -192,7 +196,9 @@ export function RichTextEditor({ placeholder = "Type message here...", editorAri
                 role: "textbox",
                 "aria-multiline": "true",
                 "aria-label": editorAriaLabel,
-                class: cn("prose prose-sm max-w-none focus:outline-none", "min-h-[120px]", inputControlPaddingClassName),
+                class: cn("prose prose-sm max-w-none focus:outline-none", variant === "message"
+                    ? "min-h-[48px] px-[10px] py-[8px] text-sm"
+                    : cn("min-h-[120px]", inputControlPaddingClassName)),
             },
         },
         onUpdate: ({ editor }) => {
@@ -352,6 +358,25 @@ export function RichTextEditor({ placeholder = "Type message here...", editorAri
                 }, children: action.label }, action.id))) }) })) : (_jsxs(Button, { type: "button", className: "w-full", disabled: sendDisabled, onClick: () => {
             void handleSend();
         }, children: [_jsx(SendIcon, { size: 16 }), isSending ? sendingLabel : sendLabel] }));
+    if (variant === "message") {
+        return (_jsxs("div", { "data-slot": "message-composer", ref: dropZoneRef, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn("box-border flex min-h-[164px] flex-col overflow-hidden rounded-[8px] border border-input bg-background transition-all focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", !isExpanded && attachments.length === 0 && "h-[164px]", isDragging && "border-2 border-primary bg-primary/5", className), children: [header ? (_jsxs("div", { "data-slot": "message-composer-header", className: "flex min-h-[48px] items-center justify-between px-[10px] py-[8px] text-muted-foreground", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-[8px]", children: [_jsx(Reply, { "aria-hidden": "true", className: "size-[16px] shrink-0" }), _jsx(Typography, { as: "span", variant: "caption", className: "min-w-0 truncate font-medium text-muted-foreground", "data-slot": "message-composer-header-label", children: header })] }), onExpandToggle ? (_jsx(Tooltip, { content: isExpanded ? "Collapse editor" : "Expand editor", side: "top", children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[28px] w-[28px] shrink-0", onClick: onExpandToggle, "aria-label": isExpanded ? "Collapse editor" : "Expand editor", children: _jsx(MaximizeIcon, { size: 16 }) }) })) : null] })) : null, _jsx("div", { "data-slot": "message-composer-editor", className: cn("min-h-[64px]", isExpanded && "min-h-[200px]"), children: _jsx(EditorContent, { editor: editor, className: cn("min-h-[64px] text-sm", isExpanded && "min-h-[200px]", "[&_.ProseMirror]:min-h-[64px] [&_.ProseMirror]:outline-none", isExpanded && "[&_.ProseMirror]:min-h-[200px]", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]") }) }), attachments.length > 0 ? (_jsx("div", { className: "space-y-[8px] px-[10px] pb-[8px]", children: attachments.map((attachment, index) => (_jsxs("div", { className: "flex w-full items-center gap-[8px] rounded-md border bg-muted px-[12px] py-[8px] text-sm", children: [_jsx(PaperclipIcon, { size: 14, className: "shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: attachment.name }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatFileSize(attachment.size) }), _jsx("button", { type: "button", onClick: () => removeAttachment(index), className: "shrink-0 text-muted-foreground hover:text-foreground", "aria-label": `Remove ${attachment.name}`, children: _jsx(XIcon, { size: 14 }) })] }, `${attachment.name}-${attachment.size}-${index}`))) })) : null, _jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes, multiple: true, onChange: handleFileSelect, className: "hidden" }), linkPopoverOpen &&
+                    linkMenuPosition &&
+                    typeof document !== "undefined" &&
+                    createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[99]", onClick: () => {
+                                    setLinkPopoverOpen(false);
+                                    setLinkUrl("");
+                                    setLinkMenuPosition(null);
+                                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().run();
+                                } }), _jsx("div", { ref: linkMenuRef, className: "fixed z-[100] w-80 animate-in fade-in-0 zoom-in-95 rounded-md border bg-popover p-3 shadow-md", style: {
+                                    top: linkMenuPosition.top,
+                                    left: linkMenuPosition.left,
+                                }, children: _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Input, { ref: linkInputRef, label: "URL", id: "message-link-url", type: "url", placeholder: "https://example.com", value: linkUrl, onChange: (event) => setLinkUrl(event.target.value), onKeyDown: handleLinkKeyDown, inputClassName: "h-8 text-sm", autoFocus: true }), _jsx(Button, { type: "button", className: "h-8 px-3", onClick: handleLinkSubmit, disabled: !linkUrl.trim(), children: "Add" })] }) })] }), document.body), isFormattingOpen ? (_jsxs("div", { className: "flex flex-wrap items-center gap-[4px] border-t border-border px-[10px] py-[8px]", children: [_jsx(ToolbarIconButton, { label: "Bold", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bold"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run(), children: _jsx(BoldIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Italic", active: editor === null || editor === void 0 ? void 0 : editor.isActive("italic"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleItalic().run(), children: _jsx(ItalicIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Underline", active: editor === null || editor === void 0 ? void 0 : editor.isActive("underline"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) })] })) : null, _jsxs("div", { "data-slot": "message-composer-toolbar", className: "flex min-h-[52px] items-center justify-between px-[10px] py-[8px]", children: [_jsxs("div", { className: "flex items-center gap-[8px]", children: [_jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[28px] w-[28px]", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 16 }) }) }), _jsxs("div", { className: "inline-flex h-[32px] overflow-hidden rounded-control border border-input bg-background", children: [_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[32px] w-[32px] rounded-none border-r border-input", onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run(), "aria-pressed": (_a = editor === null || editor === void 0 ? void 0 : editor.isActive("bold")) !== null && _a !== void 0 ? _a : false, "aria-label": "Bold", children: _jsx(BoldIcon, { size: 16 }) }), _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[32px] w-[32px] rounded-none border-r border-input", onClick: openLinkMenu, "aria-label": "Add link", children: _jsx(LinkIcon, { size: 16 }) }), _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[32px] w-[32px] rounded-none", onClick: () => setIsFormattingOpen((open) => !open), "aria-expanded": isFormattingOpen, "aria-label": "Formatting options", children: _jsx(Baseline, { "aria-hidden": "true", className: "size-[16px]" }) })] })] }), _jsxs("div", { className: "flex items-center gap-[8px]", children: [showTemplates && (templates.length > 0 || templateCreateHref) ? (_jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "outline", size: "sm", children: ["Templates", _jsx(ChevronDownIcon, { size: 16 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
+                                                var _a;
+                                                return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description ? (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description })) : null] }, template.id)))] }, category));
+                                            }) }), templateCreateHref ? (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) })) : null] })) : null, _jsx(Button, { type: "button", size: "sm", disabled: isSending || !onSend, "aria-label": isSending ? sendingLabel : sendLabel, onClick: () => {
+                                        void handleSend();
+                                    }, children: isSending ? sendingLabel : sendLabel })] })] })] }));
+    }
     return (_jsxs("div", { ref: dropZoneRef, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn("overflow-hidden rounded-control border bg-background transition-all focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", isExpanded && "shadow-md", isDragging && "border-2 border-primary bg-primary/5", className), children: [header && (_jsxs("div", { className: cn("flex items-center justify-between border-b bg-muted dark:bg-muted/30", inputControlPaddingClassName), children: [_jsx("div", { className: "flex-1", children: header }), _jsx("div", { className: "flex items-center gap-2", children: onExpandToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6", onClick: onExpandToggle, "aria-label": "Expand editor", children: _jsx(MaximizeIcon, { size: 14 }) })) })] })), _jsxs("div", { className: cn("bg-background transition-all", isExpanded ? "min-h-[200px]" : "min-h-[120px]"), children: [_jsx(EditorContent, { editor: editor, className: cn("text-sm", "[&_.ProseMirror]:min-h-[120px] [&_.ProseMirror]:outline-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0", "[&_.ProseMirror_ul]:my-2 [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6", "[&_.ProseMirror_ol]:my-2 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6", "[&_.ProseMirror_li]:my-1", "[&_.ProseMirror_ul_ul]:list-[circle] [&_.ProseMirror_ul_ul_ul]:list-[square]") }), linkPopoverOpen &&
                         linkMenuPosition &&
                         typeof document !== "undefined" &&
@@ -387,7 +412,7 @@ export function RichTextEditor({ placeholder = "Type message here...", editorAri
                                         else {
                                             editor === null || editor === void 0 ? void 0 : editor.chain().focus().setHighlight({ color: color.value }).run();
                                         }
-                                    }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, `bg-${color.name}`))) }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) }), _jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 14 }) }) }), _jsx(ToolbarIconButton, { label: "Add link", active: editor === null || editor === void 0 ? void 0 : editor.isActive("link"), onClick: openLinkMenu, children: _jsx(LinkIcon, { size: 14 }) }), showTemplates && templates.length > 0 && (_jsx(_Fragment, { children: _jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "h-8 gap-1 text-muted-foreground", children: ["Template", _jsx(ChevronDownIcon, { size: 14 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
+                                    }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, `bg-${color.name}`))) }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) }), _jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 14 }) }) }), _jsx(ToolbarIconButton, { label: "Add link", active: editor === null || editor === void 0 ? void 0 : editor.isActive("link"), onClick: openLinkMenu, children: _jsx(LinkIcon, { size: 14 }) }), showTemplates && (templates.length > 0 || templateCreateHref) && (_jsx(_Fragment, { children: _jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "h-8 gap-1 text-muted-foreground", children: ["Template", _jsx(ChevronDownIcon, { size: 14 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
                                             var _a;
                                             return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description }))] }, template.id)))] }, category));
                                         }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));

package/dist/routing-timeline.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type RoutingTimelineItemKind = "assigned" | "reassigned" | "returned" | "routed" | "system";
+export type RoutingTimelineItemKind = "assigned" | "reassigned" | "returned" | "routed" | "message-received" | "message-sent" | "system";
 export interface RoutingTimelineItem {
     id: string;
     kind?: RoutingTimelineItemKind;
@@ -8,15 +8,20 @@ export interface RoutingTimelineItem {
     actor?: React.ReactNode;
     remark?: React.ReactNode;
     description?: React.ReactNode;
+    detailLabel?: React.ReactNode;
     from?: React.ReactNode;
     to?: React.ReactNode;
     fromLabel?: React.ReactNode;
     toLabel?: React.ReactNode;
     badgeLabel?: React.ReactNode;
+    badge?: React.ReactNode;
+    icon?: React.ReactNode;
 }
 export interface RoutingTimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     items: RoutingTimelineItem[];
     emptyMessage?: React.ReactNode;
+    /** Reduces typography, icon, padding, and event spacing for constrained panels. */
+    density?: "default" | "compact";
 }
-declare function RoutingTimeline({ items, emptyMessage, className, ...props }: RoutingTimelineProps): import("react/jsx-runtime").JSX.Element;
+declare function RoutingTimeline({ items, emptyMessage, density, className, ...props }: RoutingTimelineProps): import("react/jsx-runtime").JSX.Element;
 export { RoutingTimeline };