@neasg/design-system 0.4.133 → 0.4.137

package/dist/assignee-popover.d.ts

@@ -0,0 +1,28 @@
+export interface AssigneeOption {
+    value: string;
+    label: string;
+    role?: string;
+    /** Optional menu group, such as "Licensing officers" or "Supervisors". */
+    group?: string;
+    avatarSrc?: string;
+    initials?: string;
+    keywords?: string[];
+    disabled?: boolean;
+}
+export interface AssigneePopoverProps {
+    options: AssigneeOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Value of the current user in options; enables the self-assignment shortcut. */
+    currentUserValue?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    highlightQuery?: string;
+    triggerAriaLabel?: string;
+    menuLabel?: string;
+    selfOptionLabel?: string;
+    groupLabel?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+}
+export declare function AssigneePopover({ options, value, onValueChange, currentUserValue, disabled, placeholder, highlightQuery, triggerAriaLabel, menuLabel, selfOptionLabel, groupLabel, searchPlaceholder, emptyMessage, }: AssigneePopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/assignee-popover.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { UserPlus } from "lucide-react";
+import { AvatarProfile } from "./avatar";
+import { Button } from "./button";
+import { Popover } from "./popover";
+import { PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, PopoverMenuSearch, PopoverMenuSection } from "./popover-menu";
+import { SearchHighlight } from "./use-search-highlight";
+import { Typography } from "./typography";
+function Profile({ option, label = option.label, query = "" }) {
+    var _a;
+    return _jsx(AvatarProfile, { size: "xs", src: option.avatarSrc, alt: option.label, fallback: (_a = option.initials) !== null && _a !== void 0 ? _a : option.label.trim().split(/\s+/).slice(0, 2).map((word) => { var _a; return (_a = word[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase(); }).join(""), name: _jsx(SearchHighlight, { text: label, query: query }), role: option.role, rolePlacement: "below", className: "min-w-0 max-w-full" });
+}
+export function AssigneePopover({ options, value, onValueChange, currentUserValue, disabled = false, placeholder = "Unassigned", highlightQuery, triggerAriaLabel, menuLabel = "Assign to", selfOptionLabel = "Assign to myself", groupLabel = "People", searchPlaceholder = "Search people...", emptyMessage = "No matching people", }) {
+    var _a;
+    const [open, setOpen] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    const selected = (_a = options.find((option) => option.value === value)) !== null && _a !== void 0 ? _a : { value, label: value || placeholder };
+    const currentUser = options.find((option) => option.value === currentUserValue);
+    const query = search.trim().toLowerCase();
+    const filtered = options.filter((option) => {
+        var _a;
+        return [option.label, option.role, ...((_a = option.keywords) !== null && _a !== void 0 ? _a : [])]
+            .some((text) => text === null || text === void 0 ? void 0 : text.toLowerCase().includes(query));
+    });
+    const groups = filtered.reduce((result, option) => {
+        var _a;
+        const label = (_a = option.group) !== null && _a !== void 0 ? _a : groupLabel;
+        const group = result.find((item) => item.label === label);
+        if (group)
+            group.options.push(option);
+        else
+            result.push({ label, options: [option] });
+        return result;
+    }, []);
+    const select = (option) => {
+        if (disabled || option.disabled)
+            return;
+        onValueChange(option.value);
+        setOpen(false);
+        setSearch("");
+    };
+    return _jsxs(Popover, { open: open && !disabled, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            if (!nextOpen)
+                setSearch("");
+        }, surface: "menu", align: "start", contentClassName: "w-72", trigger: _jsx(Button, { type: "button", variant: "ghost", size: "default", disabled: disabled, className: "flex h-auto min-w-0 max-w-full justify-start whitespace-normal text-left leading-none", "aria-label": triggerAriaLabel !== null && triggerAriaLabel !== void 0 ? triggerAriaLabel : `Change assignee: ${selected.label}`, onClick: (event) => event.stopPropagation(), children: _jsx(Profile, { option: selected, query: highlightQuery }) }), children: [_jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: menuLabel }), currentUser ? _jsx(PopoverMenuSection, { children: _jsxs(PopoverMenuItem, { active: value === currentUser.value, disabled: currentUser.disabled, onClick: () => select(currentUser), children: [_jsx(UserPlus, { "aria-hidden": "true", className: "size-4" }), _jsx("span", { children: selfOptionLabel })] }) }) : null] }), _jsx(PopoverMenuDivider, {}), _jsx(PopoverMenuSearch, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none", autoFocus: true }), _jsxs(PopoverMenuScrollArea, { children: [groups.map((group) => _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: group.label }), _jsx(PopoverMenuSection, { children: group.options.map((option) => _jsx(PopoverMenuItem, { active: value === option.value, disabled: option.disabled, onClick: () => select(option), children: _jsx(Profile, { option: option, query: search }) }, option.value)) })] }, group.label)), filtered.length === 0 ? _jsx(Typography, { as: "p", variant: "bodySm", className: "px-2 py-3 text-muted-foreground", role: "status", children: emptyMessage }) : null] })] });
+}

package/dist/changelog-action-panel.d.ts

@@ -1,17 +1,29 @@
 import * as React from "react";
 import { type DashboardActionPanelProps } from "./layout";
 import { type NotificationItemData } from "./notification";
+export interface ChangelogActionPanelFilter {
+    value: string;
+    label: React.ReactNode;
+}
+export interface ChangelogActionPanelNotification extends NotificationItemData {
+    category?: string;
+}
 export interface ChangelogActionPanelProps extends Omit<DashboardActionPanelProps, "children" | "headerSpacing" | "title"> {
     title?: React.ReactNode;
-    notifications: NotificationItemData[];
+    notifications: ChangelogActionPanelNotification[];
+    filters?: ChangelogActionPanelFilter[];
+    allFilterLabel?: React.ReactNode;
+    filterGroupLabel?: string;
     isLoading?: boolean;
     loadingLabel?: string;
     emptyMessage?: React.ReactNode;
     emptyDescription?: React.ReactNode;
+    filteredEmptyMessage?: React.ReactNode;
+    filteredEmptyDescription?: React.ReactNode;
 }
 /**
  * Shared change-log panel. Consumers map their domain events to notification
  * items; this component owns the complete list, loading, and empty-state UI.
  */
-declare function ChangelogActionPanel({ title, subtitle, notifications, isLoading, loadingLabel, emptyMessage, emptyDescription, ...panelProps }: ChangelogActionPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function ChangelogActionPanel({ title, subtitle, notifications, filters, allFilterLabel, filterGroupLabel, isLoading, loadingLabel, emptyMessage, emptyDescription, filteredEmptyMessage, filteredEmptyDescription, headerChildren, ...panelProps }: ChangelogActionPanelProps): import("react/jsx-runtime").JSX.Element;
 export { ChangelogActionPanel };

package/dist/changelog-action-panel.js

@@ -1,14 +1,29 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { History } from "lucide-react";
 import { DashboardActionPanel, DashboardActionPanelEmptyState, DashboardRightPanelBody, } from "./layout";
+import { FilterToggle } from "./filter-toggle";
 import { NotificationList, } from "./notification";
 import { Spinner } from "./spinner";
 /**
  * Shared change-log panel. Consumers map their domain events to notification
  * items; this component owns the complete list, loading, and empty-state UI.
  */
-function ChangelogActionPanel({ title = "Change log", subtitle = "Review all activity recorded here.", notifications, isLoading = false, loadingLabel = "Loading change log", emptyMessage = "No change log entries yet", emptyDescription = "Changes will be recorded here.", ...panelProps }) {
-    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", title: title, subtitle: subtitle, ...panelProps, children: _jsx(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", children: isLoading ? (_jsx("div", { "data-slot": "changelog-action-panel-loading", className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : notifications.length === 0 ? (_jsx(DashboardActionPanelEmptyState, { icon: History, message: emptyMessage, description: emptyDescription })) : (_jsx(NotificationList, { density: "compact", notifications: notifications, descriptionLines: 3, emptyState: null, variant: "bordered" })) }) }));
+function ChangelogActionPanel({ title = "Change log", subtitle = "Review all activity recorded here.", notifications, filters = [], allFilterLabel = "All", filterGroupLabel = "Filter change log", isLoading = false, loadingLabel = "Loading change log", emptyMessage = "No change log entries yet", emptyDescription = "Changes will be recorded here.", filteredEmptyMessage = "No activity in this category", filteredEmptyDescription = "Try another change log filter.", headerChildren, ...panelProps }) {
+    const [activeFilter, setActiveFilter] = React.useState("all");
+    const resolvedActiveFilter = activeFilter === "all" ||
+        filters.some((filter) => filter.value === activeFilter)
+        ? activeFilter
+        : "all";
+    const visibleNotifications = resolvedActiveFilter === "all"
+        ? notifications
+        : notifications.filter((notification) => notification.category === resolvedActiveFilter);
+    const filterControls = filters.length > 0 ? (_jsxs("div", { role: "group", "aria-label": filterGroupLabel, "data-slot": "changelog-action-panel-filters", className: "flex flex-wrap items-center gap-[var(--space-1)] pt-[var(--space-2)]", children: [_jsx(FilterToggle, { selected: resolvedActiveFilter === "all", "aria-pressed": resolvedActiveFilter === "all", onClick: () => setActiveFilter("all"), children: allFilterLabel }), filters.map((filter) => (_jsx(FilterToggle, { selected: resolvedActiveFilter === filter.value, "aria-pressed": resolvedActiveFilter === filter.value, onClick: () => setActiveFilter(filter.value), children: filter.label }, filter.value)))] })) : null;
+    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", title: title, subtitle: subtitle, headerChildren: headerChildren || filterControls ? (_jsxs(_Fragment, { children: [headerChildren, filterControls] })) : undefined, ...panelProps, children: _jsx(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", children: isLoading ? (_jsx("div", { "data-slot": "changelog-action-panel-loading", className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : visibleNotifications.length === 0 ? (_jsx(DashboardActionPanelEmptyState, { icon: History, message: notifications.length === 0
+                    ? emptyMessage
+                    : filteredEmptyMessage, description: notifications.length === 0
+                    ? emptyDescription
+                    : filteredEmptyDescription })) : (_jsx(NotificationList, { density: "compact", notifications: visibleNotifications, descriptionLines: 3, emptyState: null, variant: "bordered" })) }) }));
 }
 export { ChangelogActionPanel };

package/dist/checklist.d.ts

@@ -48,10 +48,13 @@ export interface ChecklistQuestionProps {
     /** Count and limit characters instead of words when supplied. */
     remarksMaxLength?: number;
     remarksRequired?: boolean;
+    remarksDescription?: React.ReactNode;
+    remarksOpen?: boolean;
+    onRemarksOpenChange?: (open: boolean) => void;
     evidence?: React.ReactNode;
     evidenceCount?: number;
 }
-export declare function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit, remarksMaxLength, remarksRequired, evidence, evidenceCount }: ChecklistQuestionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit, remarksMaxLength, remarksRequired, remarksDescription, remarksOpen, onRemarksOpenChange, evidence, evidenceCount }: ChecklistQuestionProps): import("react/jsx-runtime").JSX.Element;
 export interface ChecklistAttachmentsProps {
     items: {
         key: string;

package/dist/checklist.js

@@ -19,21 +19,23 @@ export function ChecklistSelection({ title, description, typeOptions, subtypeOpt
     const Icon = loading ? LoaderCircle : ClipboardList;
     return _jsxs("div", { "data-slot": "checklist-selection", "aria-busy": loading, className: "flex flex-col items-center gap-4 rounded-lg bg-muted/30 p-6 text-center", children: [_jsx(Icon, { "aria-hidden": "true", className: cn("size-8", loading && "animate-spin") }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs("div", { className: "grid w-full max-w-md grid-cols-1 gap-[var(--space-2)] sm:grid-cols-2", children: [_jsx(Select, { label: "Type", hideLabel: true, placeholder: "Type", options: typeOptions, value: type, onValueChange: onTypeChange, disabled: disabled || loading }), _jsx(Select, { label: "Sub-Type", hideLabel: true, placeholder: "Sub-Type", options: subtypeOptions, value: subtype, onValueChange: onSubtypeChange, disabled: disabled || loading || !type })] }), action] });
 }
-export function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit = 500, remarksMaxLength, remarksRequired = false, evidence, evidenceCount = 0 }) {
+export function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit = 500, remarksMaxLength, remarksRequired = false, remarksDescription, remarksOpen, onRemarksOpenChange, evidence, evidenceCount = 0 }) {
+    var _a;
     const name = React.useId();
-    const [remarksOpen, setRemarksOpen] = React.useState(null);
+    const [internalRemarksOpen, setInternalRemarksOpen] = React.useState(null);
     const [evidenceOpen, setEvidenceOpen] = React.useState(null);
-    React.useEffect(() => {
-        if (remarksRequired)
-            setRemarksOpen(true);
-    }, [remarksRequired]);
-    const showRemarks = remarksOpen !== null && remarksOpen !== void 0 ? remarksOpen : (remarksRequired || Boolean(remarks.trim()));
+    const showRemarks = (_a = remarksOpen !== null && remarksOpen !== void 0 ? remarksOpen : internalRemarksOpen) !== null && _a !== void 0 ? _a : Boolean(remarks.trim());
+    const setRemarksOpen = (open) => {
+        if (remarksOpen === undefined)
+            setInternalRemarksOpen(open);
+        onRemarksOpenChange === null || onRemarksOpenChange === void 0 ? void 0 : onRemarksOpenChange(open);
+    };
     const showEvidence = evidenceOpen !== null && evidenceOpen !== void 0 ? evidenceOpen : evidenceCount > 0;
     const remarksVisible = disabled ? Boolean(remarks.trim()) : showRemarks;
     const evidenceVisible = disabled ? evidenceCount > 0 : showEvidence;
     const remarksToggleLabel = showRemarks ? "Hide remarks" : "Show remarks";
     const evidenceToggleLabel = showEvidence ? "Hide photos" : "Show photos";
-    return _jsxs("div", { "data-slot": "checklist-question", className: "space-y-4 rounded-xl border border-border bg-card p-4 shadow-xs", children: [_jsx("p", { id: `${name}-label`, className: "text-sm font-medium", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx("fieldset", { disabled: disabled, "aria-labelledby": `${name}-label`, className: cn("flex min-w-0 border-0 p-0", disabled && "opacity-50"), children: options.map((option, index) => _jsxs("label", { className: cn("relative cursor-pointer border border-input px-2.5 py-2 text-sm font-medium focus-within:z-10 focus-within:ring-2 focus-within:ring-ring", index > 0 && "-ml-px", index === 0 && "rounded-l-md", index === options.length - 1 && "rounded-r-md", disabled && "cursor-not-allowed", value === option.value ? option.tone === "negative" ? "bg-destructive/20" : option.tone === "positive" ? "bg-primary/20" : "bg-muted" : "bg-background"), children: [_jsx("input", { className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", type: "radio", name: name, value: option.value, checked: value === option.value, onChange: () => onValueChange(option.value) }), option.label] }, option.value)) }), !disabled ? _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tooltip, { content: remarksToggleLabel, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": remarksToggleLabel, "aria-expanded": showRemarks, "aria-controls": `${name}-remarks`, onClick: () => setRemarksOpen(!showRemarks), children: _jsx(MessageSquareText, { "aria-hidden": "true", size: 16 }) }) }), evidence ? _jsx(Tooltip, { content: `${evidenceToggleLabel}${evidenceCount > 0 ? ` (${evidenceCount})` : ""}`, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": evidenceToggleLabel, "aria-expanded": showEvidence, "aria-controls": `${name}-evidence`, onClick: () => setEvidenceOpen(!showEvidence), children: _jsx(Camera, { "aria-hidden": "true", size: 16 }) }) }) : null] }) : null] }), evidenceVisible && evidence ? _jsx("div", { id: `${name}-evidence`, children: evidence }) : null, remarksVisible ? _jsx("div", { id: `${name}-remarks`, children: disabled ? _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Remarks" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: remarks })] }) : _jsx(Textarea, { label: "Remarks", description: "Required when No or N/A is selected.", placeholder: "Type...", value: remarks, "aria-required": remarksRequired, rows: 5, onChange: (event) => { setRemarksOpen(true); onRemarksChange(event.target.value); }, maxWords: remarksMaxLength === undefined ? remarksLimit : undefined, maxLength: remarksMaxLength, showCount: remarksMaxLength !== undefined }) }) : null] });
+    return _jsxs("div", { "data-slot": "checklist-question", className: "space-y-4 rounded-xl border border-border bg-card p-4 shadow-xs", children: [_jsx("p", { id: `${name}-label`, className: "text-sm font-medium", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx("fieldset", { disabled: disabled, "aria-labelledby": `${name}-label`, className: cn("flex min-w-0 border-0 p-0", disabled && "opacity-50"), children: options.map((option, index) => _jsxs("label", { className: cn("relative cursor-pointer border border-input px-2.5 py-2 text-sm font-medium focus-within:z-10 focus-within:ring-2 focus-within:ring-ring", index > 0 && "-ml-px", index === 0 && "rounded-l-md", index === options.length - 1 && "rounded-r-md", disabled && "cursor-not-allowed", value === option.value ? option.tone === "negative" ? "bg-destructive/20" : option.tone === "positive" ? "bg-primary/20" : "bg-muted" : "bg-background"), children: [_jsx("input", { className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", type: "radio", name: name, value: option.value, checked: value === option.value, onChange: () => onValueChange(option.value) }), option.label] }, option.value)) }), !disabled ? _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tooltip, { content: remarksToggleLabel, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": remarksToggleLabel, "aria-expanded": showRemarks, "aria-controls": `${name}-remarks`, onClick: () => setRemarksOpen(!showRemarks), children: _jsx(MessageSquareText, { "aria-hidden": "true", size: 16 }) }) }), evidence ? _jsx(Tooltip, { content: `${evidenceToggleLabel}${evidenceCount > 0 ? ` (${evidenceCount})` : ""}`, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": evidenceToggleLabel, "aria-expanded": showEvidence, "aria-controls": `${name}-evidence`, onClick: () => setEvidenceOpen(!showEvidence), children: _jsx(Camera, { "aria-hidden": "true", size: 16 }) }) }) : null] }) : null] }), evidenceVisible && evidence ? _jsx("div", { id: `${name}-evidence`, children: evidence }) : null, remarksVisible ? _jsx("div", { id: `${name}-remarks`, children: disabled ? _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Remarks" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: remarks })] }) : _jsx(Textarea, { label: "Remarks", description: remarksDescription, placeholder: "Type...", value: remarks, "aria-required": remarksRequired, rows: 5, onChange: (event) => { setRemarksOpen(true); onRemarksChange(event.target.value); }, maxWords: remarksMaxLength === undefined ? remarksLimit : undefined, maxLength: remarksMaxLength, showCount: remarksMaxLength !== undefined }) }) : null] });
 }
 export function ChecklistAttachments({ items, onRemove }) {
     return _jsx("ul", { className: "space-y-2", children: items.map((item) => _jsx(FileUploadStatusRow, { file: { name: item.name, type: item.type, size: item.sizeBytes || item.size, status: "complete" }, href: item.url, onRemove: onRemove ? () => onRemove(item.key) : undefined }, item.key)) });

package/dist/file-upload-status-row.js

@@ -37,9 +37,9 @@ export function FileUploadStatusRow({ file, href, onCancel, onRemove, disabled =
     const canCancel = (isUploading || isPending) && onCancel;
     const canRemove = !isUploading && onRemove;
     const action = canCancel ? "cancel" : canRemove ? "remove" : null;
-    return (_jsxs("li", { className: cn("rounded-control border bg-background px-2.5 py-2", isError && "border-destructive/80 bg-destructive/5"), children: [_jsxs("div", { className: cn("grid min-h-7 items-start gap-x-2", action
+    return (_jsxs("li", { className: cn("rounded-control border bg-background px-2.5 py-2", isError && "border-destructive/80 bg-destructive/5"), children: [_jsxs("div", { className: cn("grid min-h-7 items-center gap-x-2", action
                     ? "grid-cols-[1.5rem_minmax(0,1fr)_auto_1.75rem]"
-                    : "grid-cols-[1.5rem_minmax(0,1fr)_auto]"), children: [_jsx("span", { className: "flex h-7 w-6 shrink-0 items-center justify-center", children: getStatusIcon(file.status, file.type) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1 py-1", children: [href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: "min-w-0 truncate underline-offset-4 hover:underline", children: _jsx(Typography, { as: "span", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name }) })) : (_jsx(Typography, { as: "p", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name })), isError ? (_jsx(Typography, { as: "p", variant: "caption", className: "break-words text-xs leading-4 text-destructive", children: (_a = file.error) !== null && _a !== void 0 ? _a : "Upload failed" })) : null] }), sizeLabel ? (_jsx(Typography, { as: "span", variant: "bodySm", className: "col-start-3 mt-1.5 whitespace-nowrap text-xs leading-4 text-muted-foreground", children: sizeLabel })) : null, action ? (_jsx(Button, { type: "button", variant: action === "remove" ? "destructiveGhost" : "ghost", size: "compactIcon", className: "col-start-4 h-7 w-7 shrink-0", disabled: disabled, onClick: (event) => {
+                    : "grid-cols-[1.5rem_minmax(0,1fr)_auto]"), children: [_jsx("span", { className: "flex h-7 w-6 shrink-0 items-center justify-center", children: getStatusIcon(file.status, file.type) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1 py-1", children: [href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: "min-w-0 truncate leading-5 underline-offset-4 hover:underline", children: _jsx(Typography, { as: "span", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name }) })) : (_jsx(Typography, { as: "p", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name })), isError ? (_jsx(Typography, { as: "p", variant: "caption", className: "break-words text-xs leading-4 text-destructive", children: (_a = file.error) !== null && _a !== void 0 ? _a : "Upload failed" })) : null] }), sizeLabel ? (_jsx(Typography, { as: "span", variant: "bodySm", className: "col-start-3 whitespace-nowrap text-xs leading-4 text-muted-foreground", children: sizeLabel })) : null, action ? (_jsx(Button, { type: "button", variant: action === "remove" ? "destructiveGhost" : "ghost", size: "compactIcon", className: "col-start-4 h-7 w-7 shrink-0", disabled: disabled, onClick: (event) => {
                             event.stopPropagation();
                             if (action === "cancel") {
                                 onCancel === null || onCancel === void 0 ? void 0 : onCancel();

package/dist/filter-toggle.js

@@ -10,7 +10,7 @@ const filterToggleVariants = cva("inline-flex shrink-0 cursor-pointer select-non
         },
         selected: {
             true: "border-transparent bg-highlight text-highlight-foreground hover:bg-highlight/80 focus-visible:bg-highlight/80",
-            false: "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
+            false: "border-transparent bg-muted text-instructional hover:bg-muted/80",
         },
     },
     defaultVariants: {

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export type { AlertStackProps } from "./alert-stack";
 export { ActivityCard, ActivityCardActor, ActivityCardContent, } from "./activity-card";
 export type { ActivityCardActorProps, ActivityCardContentProps, ActivityCardDensity, ActivityCardIconTone, ActivityCardProps, } from "./activity-card";
 export { ChangelogActionPanel } from "./changelog-action-panel";
-export type { ChangelogActionPanelProps } from "./changelog-action-panel";
+export type { ChangelogActionPanelFilter, ChangelogActionPanelNotification, ChangelogActionPanelProps, } from "./changelog-action-panel";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export type { CardGridProps, CardListItemProps, CardListProps, CardProps, CardSplitGridProps, } from "./card";
@@ -22,8 +22,6 @@ export { MessageActionPanel } from "./message-action-panel";
 export type { MessageActionPanelProps } from "./message-action-panel";
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
 export type { NotificationAction, NotificationFilter, NotificationIcon, NotificationItemData, NotificationItemProps, NotificationKind, NotificationListProps, NotificationPopoverProps, NotificationTimestamp, NotificationTriggerProps, NotificationTone, FormatNotificationTimestampOptions, } from "./notification";
-export { RoutingTimeline } from "./routing-timeline";
-export type { RoutingTimelineItem, RoutingTimelineItemKind, RoutingTimelineProps, } from "./routing-timeline";
 export { RoutingActionPanel } from "./routing-action-panel";
 export type { RoutingActionPanelProps } from "./routing-action-panel";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
@@ -176,3 +174,5 @@ export { PopoverList, type PopoverListProps } from "./popover";
 export { StatusBanner, type StatusBannerProps } from "./status-banner";
 export { FileUploadList } from "./file-upload-list";
 export type { FileUploadListProps, UploadedFile } from "./file-upload-list";
+export { AssigneePopover } from "./assignee-popover";
+export type { AssigneePopoverProps, AssigneeOption } from "./assignee-popover";

package/dist/index.js

@@ -11,7 +11,6 @@ export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageCardTimestamp, formatMessageDate, } from "./message-item";
 export { MessageActionPanel } from "./message-action-panel";
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
-export { RoutingTimeline } from "./routing-timeline";
 export { RoutingActionPanel } from "./routing-action-panel";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
 export { Calendar, CalendarDayButton } from "./calendar";
@@ -94,3 +93,4 @@ export { TableAddRow } from "./table-add-row";
 export { PopoverList } from "./popover";
 export { StatusBanner } from "./status-banner";
 export { FileUploadList } from "./file-upload-list";
+export { AssigneePopover } from "./assignee-popover";

package/dist/layout.js

@@ -406,7 +406,7 @@ function DashboardRightPanelHeader({ className, spacing = "default", title, subt
     return (_jsx("div", { className: cn(spacing === "comfortable"
             ? "shrink-0 p-[16px]"
             : "shrink-0 pb-[var(--layout-right-panel-padding)] pl-[var(--layout-right-panel-padding)] pr-[calc(var(--layout-right-panel-padding)+var(--layout-right-panel-action-space,0px))] pt-[var(--layout-right-panel-padding)]", className), ...props, children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: cn("min-w-0 flex-1", spacing === "comfortable" && "space-y-[4px]"), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Typography, { as: "h2", variant: "subheading", children: title }), badge] }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: spacing === "comfortable"
-                                ? "text-muted-foreground"
+                                ? "text-instructional"
                                 : undefined, children: subtitle })) : null, children] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }) }));
 }
 const DashboardActionPanel = React.forwardRef(({ panelId, headerSpacing, title, subtitle, badge, action, headerChildren, className, children, ...props }, ref) => (_jsxs(DashboardRightPanel, { ref: ref, "data-slot": "dashboard-action-panel", "data-panel-id": panelId, className: cn("h-full min-h-0 w-full", className), ...props, children: [_jsx(DashboardRightPanelHeader, { spacing: headerSpacing, title: title, subtitle: subtitle, badge: badge, action: action, children: headerChildren }), children] })));
@@ -424,11 +424,11 @@ function DashboardRightPanelBody({ className, contentClassName, footer, footerVa
     const topInsetClassName = topInset === "none" ? "pt-0" : undefined;
     if (footer) {
         if (footerVariant === "separated") {
-            return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", className: cn("scrollbar-none h-full min-h-0 overflow-y-auto", spacingClassName, topInsetClassName, contentClassName), children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }), _jsx("div", { className: cn("shrink-0 border-t border-border bg-muted/50", spacingClassName, footerClassName), children: footer })] }));
+            return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", tabIndex: 0, className: cn("scrollbar-none h-full min-h-0 overflow-y-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", spacingClassName, topInsetClassName, contentClassName), children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }), _jsx("div", { className: cn("shrink-0 border-t border-border bg-muted/50", spacingClassName, footerClassName), children: footer })] }));
         }
-        return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", spacingClassName, topInsetClassName, className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto", contentClassName), children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }), _jsx("div", { className: cn("shrink-0 space-y-[var(--layout-right-panel-footer-gap)] pt-[var(--layout-right-panel-gap)]", footerClassName), children: footer })] }));
+        return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", spacingClassName, topInsetClassName, className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", tabIndex: 0, className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", contentClassName), children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }), _jsx("div", { className: cn("shrink-0 space-y-[var(--layout-right-panel-footer-gap)] pt-[var(--layout-right-panel-gap)]", footerClassName), children: footer })] }));
     }
-    return (_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto", spacingClassName, topInsetClassName, className), ...props, children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }));
+    return (_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scrollRef, "data-slot": "dashboard-right-panel-scroll-area", tabIndex: 0, className: cn("scrollbar-none h-full min-h-0 space-y-[var(--layout-right-panel-gap)] overflow-y-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", spacingClassName, topInsetClassName, className), ...props, children: children }), _jsx(ScrollHint, { visible: canScrollDown })] }));
 }
 function DashboardContent({ className, hasSidebar = true, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode = "responsive", rightPanelResizable = false, rightPanelCollapsible = false, rightPanelCollapsed, defaultRightPanelCollapsed = false, onRightPanelCollapsedChange, rightPanelDefaultWidth = RIGHT_PANEL_RESIZE_DEFAULT_WIDTH, rightPanelMinWidth = RIGHT_PANEL_RESIZE_MIN_WIDTH, rightPanelMaxWidth = RIGHT_PANEL_RESIZE_MAX_WIDTH, rightPanelAutoCollapseSidebarBreakpoint = RIGHT_PANEL_AUTO_COLLAPSE_BREAKPOINT, surfaceClassName, children, ...props }) {
     const { isCollapsed, toggle, collapse } = useSidebar();

package/dist/notification.d.ts

@@ -25,6 +25,10 @@ export interface NotificationItemData {
     id: string;
     title: React.ReactNode;
     description?: React.ReactNode;
+    /** Optional secondary content rendered separately from the event summary. */
+    detail?: React.ReactNode;
+    /** Label for secondary content, for example `Remarks`. */
+    detailLabel?: React.ReactNode;
     /** Person or system responsible for the event. */
     actor?: React.ReactNode;
     /** Optional status or category displayed in an activity-card header. */

package/dist/notification.js

@@ -128,6 +128,9 @@ function NotificationItem({ notification, density = "default", variant = "row",
     const hasActions = actions.length > 0;
     const isInteractive = Boolean(!hasActions && (notification.href || onClick || onSelect));
     const hasHoverSurface = isInteractive || hasActions;
+    const hasDetail = notification.detail !== undefined &&
+        notification.detail !== null &&
+        notification.detail !== "";
     const timestamp = notification.timestamp;
     const now = useNotificationTimestampNow(timestamp);
     const formattedTimestamp = timestamp !== undefined
@@ -147,8 +150,12 @@ function NotificationItem({ notification, density = "default", variant = "row",
         const hasDescription = notification.description !== undefined &&
             notification.description !== null &&
             notification.description !== "";
-        const actorBelongsInHeader = notification.actor !== undefined && !hasDescription && !hasActions;
+        const actorBelongsInHeader = notification.actor !== undefined &&
+            !hasDescription &&
+            !hasDetail &&
+            !hasActions;
         const hasCardContent = hasDescription ||
+            hasDetail ||
             (notification.actor !== undefined && !actorBelongsInHeader) ||
             hasActions;
         const activityElement = notification.href && !hasActions
@@ -159,7 +166,7 @@ function NotificationItem({ notification, density = "default", variant = "row",
         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) => {
+                "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-instructional", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasDetail ? (_jsxs("div", { "data-slot": "notification-item-detail", className: "text-left", children: [notification.detailLabel !== undefined ? (_jsx(Typography, { as: "div", variant: "caption", className: "font-semibold text-foreground", children: notification.detailLabel })) : null, _jsx(Typography, { as: "div", variant: "bodySm", className: "whitespace-pre-wrap text-instructional [overflow-wrap:anywhere]", children: notification.detail })] })) : 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;
@@ -168,7 +175,7 @@ function NotificationItem({ notification, density = "default", variant = "row",
                                 }, 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) => {
+    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-instructional", 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-instructional", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasDetail ? (_jsxs("span", { "data-slot": "notification-item-detail", className: "mt-2 block text-left", children: [notification.detailLabel !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: "block font-semibold text-foreground", children: notification.detailLabel })) : null, _jsx(Typography, { as: "span", variant: "caption", className: "block whitespace-pre-wrap text-instructional [overflow-wrap:anywhere]", children: notification.detail })] })) : 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;

package/dist/routing-action-panel.d.ts

@@ -1,13 +1,7 @@
 import * as React from "react";
 import { type DashboardActionPanelProps } from "./layout";
-import { type RoutingTimelineItem } from "./routing-timeline";
 import { type SelectOption } from "./select";
 export interface RoutingActionPanelProps extends Omit<DashboardActionPanelProps, "children"> {
-    items: RoutingTimelineItem[];
-    isLoading?: boolean;
-    loadingLabel?: string;
-    emptyMessage?: React.ReactNode;
-    emptyDescription?: React.ReactNode;
     routeOptions: SelectOption[];
     routeValue?: string;
     routePlaceholder?: string;
@@ -16,7 +10,7 @@ export interface RoutingActionPanelProps extends Omit<DashboardActionPanelProps,
     onRouteValueChange?: (value: string) => void;
     /** Workflow-specific fields rendered before the route target. */
     supplementaryFields?: React.ReactNode;
-    /** Read-only review context in the scrollable body, above routing activity. */
+    /** Read-only review context in the scrollable body, above the routing form. */
     context?: React.ReactNode;
     remarks: string;
     remarksDescription?: React.ReactNode;
@@ -32,9 +26,8 @@ export interface RoutingActionPanelProps extends Omit<DashboardActionPanelProps,
     onSubmit: () => void;
 }
 /**
- * Shared routing surface for constrained dashboard popovers and right panels.
- * Consumers provide workflow data and actions; the component owns the complete
- * visual composition so different records render routing consistently.
+ * Shared action-only routing surface for constrained dashboard popovers and
+ * right panels. Historical routing events belong in the change log.
  */
-declare function RoutingActionPanel({ items, isLoading, loadingLabel, emptyMessage, emptyDescription, routeOptions, routeValue, routePlaceholder, routeDescription, routeDisabled, onRouteValueChange, supplementaryFields, context, remarks, remarksDescription, remarksPlaceholder, remarksRequired, remarksRows, validationMessages, onRemarksChange, submitLabel, submitDisabled, submitLoading, onSubmit, ...panelProps }: RoutingActionPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function RoutingActionPanel({ routeOptions, routeValue, routePlaceholder, routeDescription, routeDisabled, onRouteValueChange, supplementaryFields, context, remarks, remarksDescription, remarksPlaceholder, remarksRequired, remarksRows, validationMessages, onRemarksChange, submitLabel, submitDisabled, submitLoading, onSubmit, ...panelProps }: RoutingActionPanelProps): import("react/jsx-runtime").JSX.Element;
 export { RoutingActionPanel };

package/dist/routing-action-panel.js

@@ -2,20 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Route } from "lucide-react";
 import { Button } from "./button";
-import { EmptyState } from "./empty-state";
-import { DashboardActionPanel, DashboardActionPanelEmptyState, DashboardRightPanelBody, } from "./layout";
-import { RoutingTimeline, } from "./routing-timeline";
+import { DashboardActionPanel, DashboardRightPanelBody, } from "./layout";
 import { Select } from "./select";
-import { Spinner } from "./spinner";
 import { Textarea } from "./textarea";
 /**
- * Shared routing surface for constrained dashboard popovers and right panels.
- * Consumers provide workflow data and actions; the component owns the complete
- * visual composition so different records render routing consistently.
+ * Shared action-only routing surface for constrained dashboard popovers and
+ * right panels. Historical routing events belong in the change log.
  */
-function RoutingActionPanel({ items, isLoading = false, loadingLabel = "Loading routing activity", emptyMessage = "No routing activity yet", emptyDescription = "Workflow routes will appear here.", routeOptions, routeValue, routePlaceholder = "Select Officer Role", routeDescription, routeDisabled = false, onRouteValueChange, supplementaryFields, context, remarks, remarksDescription, remarksPlaceholder = "Type remarks", remarksRequired = false, remarksRows = 2, validationMessages = [], onRemarksChange, submitLabel = "Route", submitDisabled = false, submitLoading = false, onSubmit, ...panelProps }) {
-    const RoutingEmptyState = context ? EmptyState : DashboardActionPanelEmptyState;
-    const footer = (_jsxs("div", { "data-slot": "routing-action-panel-form", className: "grid gap-[var(--space-4)]", children: [supplementaryFields, _jsx(Select, { label: "Route To", options: routeOptions, value: routeValue, placeholder: routePlaceholder, disabled: routeDisabled || submitLoading, description: routeDescription, onValueChange: onRouteValueChange }), _jsx(Textarea, { label: "Remarks", value: remarks, onChange: (event) => onRemarksChange(event.target.value), placeholder: remarksPlaceholder, description: remarksDescription, disabled: routeDisabled || submitLoading, required: remarksRequired, rows: remarksRows }), validationMessages.length > 0 ? (_jsxs("details", { className: "text-sm text-muted-foreground", children: [_jsxs("summary", { className: "cursor-pointer font-medium text-foreground", children: [validationMessages.length, " required ", validationMessages.length === 1 ? "item" : "items", " remaining \u2014 view details"] }), _jsx("ul", { className: "mt-2 max-h-40 list-disc space-y-1 overflow-y-auto pl-5", children: validationMessages.map((message, index) => _jsx("li", { children: message }, index)) })] })) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", size: "default", disabled: routeDisabled || submitDisabled || validationMessages.length > 0, loading: submitLoading, loadingText: submitLabel, onClick: onSubmit, children: [_jsx(Route, { "aria-hidden": "true", className: "size-4" }), submitLabel] }) })] }));
-    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", ...panelProps, children: _jsxs(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", footerVariant: "separated", footerClassName: "max-h-[50%] overflow-y-auto overscroll-contain", footer: footer, children: [context ? (_jsx("div", { "data-slot": "routing-action-panel-context", className: "mb-[var(--space-4)] grid min-w-0 gap-[var(--space-3)] whitespace-pre-wrap [overflow-wrap:anywhere]", children: context })) : null, isLoading ? (_jsx("div", { "data-slot": "routing-action-panel-loading", className: context ? "flex items-center justify-center py-[var(--space-4)]" : "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : items.length === 0 ? (_jsx(RoutingEmptyState, { icon: Route, message: emptyMessage, description: emptyDescription })) : (_jsx(RoutingTimeline, { density: "compact", items: items }))] }) }));
+function RoutingActionPanel({ routeOptions, routeValue, routePlaceholder = "Select Officer Role", routeDescription, routeDisabled = false, onRouteValueChange, supplementaryFields, context, remarks, remarksDescription, remarksPlaceholder = "Type remarks", remarksRequired = false, remarksRows = 2, validationMessages = [], onRemarksChange, submitLabel = "Route", submitDisabled = false, submitLoading = false, onSubmit, ...panelProps }) {
+    const form = (_jsxs("div", { "data-slot": "routing-action-panel-form", className: "grid gap-[var(--space-4)]", children: [supplementaryFields, _jsx(Select, { label: "Route To", options: routeOptions, value: routeValue, placeholder: routePlaceholder, disabled: routeDisabled || submitLoading, description: routeDescription, onValueChange: onRouteValueChange }), _jsx(Textarea, { label: "Remarks", value: remarks, onChange: (event) => onRemarksChange(event.target.value), placeholder: remarksPlaceholder, description: remarksDescription, disabled: routeDisabled || submitLoading, required: remarksRequired, rows: remarksRows }), validationMessages.length > 0 ? (_jsxs("details", { className: "text-sm text-muted-foreground", children: [_jsxs("summary", { className: "cursor-pointer font-medium text-foreground", children: [validationMessages.length, " required ", validationMessages.length === 1 ? "item" : "items", " remaining \u2014 view details"] }), _jsx("ul", { className: "mt-2 max-h-40 list-disc space-y-1 overflow-y-auto pl-5", children: validationMessages.map((message, index) => _jsx("li", { children: message }, index)) })] })) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", size: "default", disabled: routeDisabled || submitDisabled || validationMessages.length > 0, loading: submitLoading, loadingText: submitLabel, onClick: onSubmit, children: [_jsx(Route, { "aria-hidden": "true", className: "size-4" }), submitLabel] }) })] }));
+    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", ...panelProps, children: _jsxs(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", children: [context ? (_jsx("div", { "data-slot": "routing-action-panel-context", className: "grid min-w-0 gap-[var(--space-3)] whitespace-pre-wrap [overflow-wrap:anywhere]", children: context })) : null, form] }) }));
 }
 export { RoutingActionPanel };

package/dist/styles.css

@@ -412,33 +412,6 @@
   }
 }
 
-@layer components {
-  [data-slot="routing-timeline-event-card"] {
-    container-type: inline-size;
-  }
-
-  [data-slot="routing-timeline-endpoints"][data-complete-route="true"] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  [data-slot="routing-timeline-endpoint-arrow"] {
-    justify-self: start;
-    transform: rotate(90deg);
-  }
-
-  @container (min-width: 22rem) {
-    [data-slot="routing-timeline-endpoints"][data-complete-route="true"] {
-      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-    }
-
-    [data-slot="routing-timeline-endpoint-arrow"] {
-      align-self: center;
-      justify-self: center;
-      transform: none;
-    }
-  }
-}
-
 @layer utilities {
   .shadow-overlay-strong {
     box-shadow: var(--overlay-shadow-strong);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.133",
+  "version": "0.4.137",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "repository": {
     "type": "git",

package/dist/routing-timeline.d.ts

@@ -1,27 +0,0 @@
-import * as React from "react";
-export type RoutingTimelineItemKind = "assigned" | "reassigned" | "returned" | "routed" | "message-received" | "message-sent" | "system";
-export interface RoutingTimelineItem {
-    id: string;
-    kind?: RoutingTimelineItemKind;
-    title?: React.ReactNode;
-    timestamp?: React.ReactNode;
-    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, density, className, ...props }: RoutingTimelineProps): import("react/jsx-runtime").JSX.Element;
-export { RoutingTimeline };

package/dist/routing-timeline.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowRight, Mail, Route } from "lucide-react";
-import { ActivityCard, ActivityCardContent } from "./activity-card";
-import { AvatarProfile } from "./avatar";
-import { Badge } from "./badge";
-import { EmptyState } from "./empty-state";
-import { cn } from "./lib/utils";
-import { Typography } from "./typography";
-const routingKindConfig = {
-    assigned: {
-        title: "Assigned case",
-        label: "ASSIGNED",
-        icon: "route",
-    },
-    reassigned: {
-        title: "Reassigned case",
-        label: "REASSIGNED",
-        icon: "route",
-    },
-    returned: {
-        title: "Case returned",
-        label: "RETURNED",
-        icon: "route",
-    },
-    routed: {
-        title: "Case routed",
-        label: "ROUTED",
-        icon: "route",
-    },
-    "message-received": {
-        title: "Received from applicant",
-        label: "RECEIVED",
-        detailLabel: "Response from applicant:",
-        icon: "mail",
-    },
-    "message-sent": {
-        title: "Sent to applicant",
-        label: "SENT",
-        detailLabel: "Officer sent a message:",
-        icon: "mail",
-    },
-    system: {
-        title: "System update",
-        label: "SYSTEM",
-        icon: "route",
-    },
-};
-function RoutingTimelineHandoffEndpoint({ value, label, }) {
-    const isTextValue = typeof value === "string" || typeof value === "number";
-    if (!isTextValue) {
-        return (_jsx("div", { "data-slot": "routing-timeline-profile", "data-avatar-size": "xs", className: "min-w-0", children: value }));
-    }
-    const name = String(value);
-    const fallback = name
-        .split(/\s+/)
-        .filter(Boolean)
-        .slice(0, 2)
-        .map((part) => part.charAt(0))
-        .join("")
-        .toUpperCase();
-    return (_jsx("div", { "data-slot": "routing-timeline-profile", "data-avatar-size": "xs", className: "min-w-0", children: _jsx(AvatarProfile, { size: "xs", fallback: fallback || "?", name: name, role: label, rolePlacement: "below" }) }));
-}
-function RoutingEventIcon({ icon, kind, density, }) {
-    if (icon)
-        return _jsx(_Fragment, { children: icon });
-    return routingKindConfig[kind].icon === "mail" ? (_jsx(Mail, { "aria-hidden": "true", className: density === "compact" ? "size-4" : "size-6" })) : (_jsx(Route, { "aria-hidden": "true", className: density === "compact" ? "size-4" : "size-6" }));
-}
-function RoutingTimeline({ items, emptyMessage = "No routing activity yet.", density = "default", className, ...props }) {
-    if (items.length === 0) {
-        return (_jsx(EmptyState, { "data-slot": "routing-timeline", message: emptyMessage, className: cn("border-0 bg-transparent px-0", density === "compact"
-                ? "py-[var(--space-4)]"
-                : "py-[var(--space-6)]", className), ...props }));
-    }
-    return (_jsx("div", { "data-slot": "routing-timeline", "data-density": density, className: cn("min-w-0", className), ...props, children: _jsx("ol", { "data-slot": "routing-timeline-list", className: cn(density === "compact"
-                ? "space-y-[var(--space-4)]"
-                : "space-y-[32px]"), children: items.map((item) => {
-                var _a, _b, _c, _d, _e;
-                const kind = (_a = item.kind) !== null && _a !== void 0 ? _a : "routed";
-                const config = routingKindConfig[kind];
-                const hasRouteEndpoints = Boolean(item.from || item.to);
-                const hasCompleteRoute = Boolean(item.from && item.to);
-                const title = (_b = item.title) !== null && _b !== void 0 ? _b : config.title;
-                const remark = (_c = item.remark) !== null && _c !== void 0 ? _c : item.description;
-                const detailLabel = (_d = item.detailLabel) !== null && _d !== void 0 ? _d : config.detailLabel;
-                const showDefaultBadge = item.badgeLabel !== null;
-                return (_jsx("li", { children: _jsx(ActivityCard, { "data-slot": "routing-timeline-event-card", density: density, icon: _jsx(RoutingEventIcon, { icon: item.icon, kind: kind, density: density }), title: title, meta: item.timestamp, trailing: item.badge ? (item.badge) : showDefaultBadge ? (_jsx(Badge, { variant: "outline", bordered: true, className: "max-w-full shrink-0", children: (_e = item.badgeLabel) !== null && _e !== void 0 ? _e : config.label })) : null, children: hasRouteEndpoints || remark ? (_jsxs(ActivityCardContent, { density: density, children: [hasRouteEndpoints ? (_jsxs("div", { "data-slot": "routing-timeline-handoff", "data-complete-route": hasCompleteRoute ? "true" : undefined, className: cn("flex min-w-0 items-center", density === "compact"
-                                        ? "gap-[var(--space-3)]"
-                                        : "gap-[24px]"), children: [item.from ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.from, label: item.fromLabel })) : null, item.from && item.to ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "to" }), _jsx(ArrowRight, { "aria-hidden": "true", "data-slot": "routing-timeline-handoff-arrow", className: cn("shrink-0 text-foreground", density === "compact" ? "size-4" : "size-6") })] })) : null, item.to ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.to, label: item.toLabel })) : null] })) : null, remark ? (_jsxs("div", { "data-slot": "routing-timeline-remark", className: cn("bg-muted", density === "compact"
-                                        ? "rounded-control p-[var(--space-2)]"
-                                        : "rounded-md p-[12px]"), children: [detailLabel ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold text-instructional", children: detailLabel })) : null, _jsx(Typography, { as: "div", variant: "bodySm", className: cn("whitespace-pre-wrap [overflow-wrap:anywhere]", detailLabel &&
-                                                (density === "compact"
-                                                    ? "mt-[var(--space-1)]"
-                                                    : "mt-[4px]")), children: remark })] })) : null] })) : null }) }, item.id));
-            }) }) }));
-}
-export { RoutingTimeline };