pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/NotificationCenter/row/NotificationDetail.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Avatar_1 = __importDefault(require("../../Avatar/Avatar"));
+const Button_1 = __importDefault(require("../../Button/Button"));
+const DescriptionList_1 = __importDefault(require("../../DescriptionList/DescriptionList"));
+const EmptyState_1 = __importDefault(require("../../EmptyState/EmptyState"));
+const Tag_1 = __importDefault(require("../../Tag/Tag"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const category_1 = require("./category");
+const ReasonForm_1 = require("./ReasonForm");
+const RowActions_1 = require("./RowActions");
+const RowStatus_1 = require("./RowStatus");
+const rowParts_1 = require("./rowParts");
+const rowMenu_1 = require("./rowMenu");
+const rowStyles_1 = require("./rowStyles");
+/** One notification in full for a reading pane or a phone screen; text only, never markup. */
+const NotificationDetail = ({ item, variant = "desktop", onBack, titleRef }) => {
+    var _a, _b, _c;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const shared = (0, NotificationCenterProvider_1.useNotificationShared)();
+    const { labels, format, now, categories, features, isOffline, appName, actions } = shared;
+    const { entry, state } = item;
+    const titleId = (0, react_1.useId)();
+    const [asking, setAsking] = (0, react_1.useState)(null);
+    const isPhone = variant === "phone";
+    const size = isPhone ? "md" : "sm";
+    const iconPx = (0, rowStyles_1.iconSizeFor)(size);
+    const category = (0, category_1.categoryFor)(categories, entry.category, labels.otherCategory);
+    const tile = (0, rowParts_1.useToneTile)(category.tone);
+    const isUnread = entry.isRead === false;
+    const actionList = (0, rowMenu_1.visibleActionsFor)(entry, features);
+    const decides = actionList.some(rowMenu_1.isDecision);
+    const days = format.daysSince(entry.createdAt, now);
+    const isWaiting = state.zone === "needsYou" && decides && days >= rowStyles_1.WAITING_AFTER_DAYS;
+    const request = state.reasonRequest;
+    const askingAction = asking && asking.id === entry.id ? asking.action : undefined;
+    const requested = request ? actionList.find((action) => action.id === request.actionId) : undefined;
+    const formAction = state.status === "open" ? (askingAction !== null && askingAction !== void 0 ? askingAction : requested) : undefined;
+    const isQuiet = state.status === "open";
+    const plane = colors.surfaceRaised;
+    const closeForm = () => {
+        setAsking(null);
+        if (request)
+            actions.clearReasonRequest(entry.id);
+    };
+    const archiveButton = features.archive && state.zone === "activity" ? ((0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: entry.blocked ? "outline" : "ghost", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Archive, { size: iconPx, "aria-hidden": "true" }), label: labels.archive, isDisabled: isOffline, sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": (0, rowStyles_1.testIdFor)(entry, "archive"), onClick: () => actions.archive([entry.id]) })) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_2.chakra.article, { "aria-labelledby": titleId, display: "flex", flexDirection: "column", gap: 4, px: isPhone ? 4 : 8, pt: isPhone ? 2 : 6, pb: 8, maxW: "47.5rem", "data-testid": (0, rowStyles_1.testIdFor)(entry, "detail"), children: [isPhone && onBack && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { mx: -2, children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: "md", variant: "ghost", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: (0, rowStyles_1.iconSizeFor)("md"), "aria-hidden": "true" }), label: labels.back, sx: (0, rowStyles_1.touchTargetFor)("md"), onClick: onBack }) })), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { as: "header", display: "grid", gap: 1.5, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { wrap: "wrap", align: "center", gap: 1.5, fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Flex, { boxSize: "1.25rem", align: "center", justify: "center", borderRadius: radii_1.RADIUS_ROLE.option, bg: tile.bg, color: tile.fg, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: category.icon, boxSize: "0.75rem" }) }), (0, jsx_runtime_1.jsx)("span", { children: category.label }), entry.eyebrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u00B7" }), (0, jsx_runtime_1.jsx)(react_2.chakra.span, { fontFamily: "mono", children: entry.eyebrow })] })), isUnread && (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", colorScheme: "primary", label: labels.unread })] }), (0, jsx_runtime_1.jsx)(Primitives_1.Heading, { as: "h2", id: titleId, ref: titleRef, tabIndex: -1, fontSize: "lg", fontWeight: 500, lineHeight: "1.4", color: colors.text[800], borderRadius: "sm", sx: { textWrap: "balance", "&:focus-visible": (0, focusRing_styles_1.focusVisibleRing)(colors) }, children: (0, jsx_runtime_1.jsx)(rowParts_1.TitleText, { parts: entry.title, isUnread: true }) }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { wrap: "wrap", align: "center", gap: 2, fontSize: "xs-plus", color: colors.textMuted, children: [entry.actor && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { name: entry.actor.name, src: entry.actor.avatarUrl, size: "xs" }), (0, jsx_runtime_1.jsx)("span", { children: entry.actor.name }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u00B7" })] })), (0, jsx_runtime_1.jsx)(react_2.chakra.time, { dateTime: format.iso(entry.createdAt), children: format.absolute(entry.createdAt, now) }), isWaiting && (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "warning", leadingIcon: lucide_react_1.Hourglass, label: labels.waiting(days) })] })] }), entry.blocked ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { borderRadius: radii_1.RADIUS_ROLE.control, bg: colors.backgroundColor.subtle, children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Lock, size: "sm", titleAs: "h3", title: labels.blockedTitle, description: entry.blocked, action: archiveButton }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entry.context && ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: -2, fontSize: "xs-plus", color: colors.textMuted, children: entry.context })), ((_a = entry.body) !== null && _a !== void 0 ? _a : entry.preview) && ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "sm", lineHeight: "1.65", color: colors.text[800], maxW: "65ch", whiteSpace: "pre-line", children: (_b = entry.body) !== null && _b !== void 0 ? _b : entry.preview })), entry.change && (0, jsx_runtime_1.jsx)(rowParts_1.ChangeChips, { change: entry.change, labels: labels }), entry.fields && entry.fields.length > 0 && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { p: 4, borderRadius: radii_1.RADIUS_ROLE.control, bg: colors.backgroundColor.subtle, children: (0, jsx_runtime_1.jsx)(DescriptionList_1.default, { items: entry.fields.map(([label, value]) => ({ label, value })), layout: isPhone ? "stacked" : "inline", columns: { base: 1 } }) })), state.status !== "open" ? ((0, jsx_runtime_1.jsx)(RowStatus_1.RowStatus, { item: item, shared: shared, size: size })) : formAction ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { maxW: "32.5rem", children: (0, jsx_runtime_1.jsx)(ReasonForm_1.ReasonForm, { entry: entry, action: formAction, labels: labels, size: size, isOffline: isOffline, serverMessage: request ? ((_c = request.message) !== null && _c !== void 0 ? _c : labels.reasonRequiredMessage) : undefined, onCancel: closeForm, onSubmit: (reason) => {
+                                setAsking(null);
+                                actions.decide([entry.id], formAction, reason);
+                            } }) })) : (actionList.length > 0 && ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { display: "grid", gap: 2, children: [(0, jsx_runtime_1.jsx)(RowActions_1.RowActions, { entry: entry, actionList: actionList, shared: shared, size: size, emphasis: "detail", onAsk: (action) => setAsking({ id: entry.id, action }) }), isOffline && decides && (0, jsx_runtime_1.jsx)(RowActions_1.OfflineNote, { text: labels.offlineMessage })] })))] })), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { wrap: "wrap", gap: 2, pt: 4, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.ruleOn)(colors, plane)}`, children: [!entry.blocked && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: decides ? "outline" : "solid", colorScheme: decides ? "gray" : "primary", rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: iconPx, "aria-hidden": "true" }), label: labels.openIn(appName), sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": (0, rowStyles_1.testIdFor)(entry, "open"), onClick: (event) => actions.open(entry, event) })), isQuiet && features.markRead && entry.isRead !== undefined && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: "ghost", colorScheme: "gray", leftIcon: isUnread ? (0, jsx_runtime_1.jsx)(lucide_react_1.MailOpen, { size: iconPx, "aria-hidden": "true" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: iconPx, "aria-hidden": "true" }), label: isUnread ? labels.markRead : labels.markUnread, isDisabled: isOffline, sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": (0, rowStyles_1.testIdFor)(entry, "read"), onClick: () => actions.setRead([entry.id], isUnread) })), isQuiet && !entry.blocked && archiveButton, isQuiet && features.restore && state.zone === "archived" && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: "ghost", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArchiveRestore, { size: iconPx, "aria-hidden": "true" }), label: labels.restore, isDisabled: isOffline, sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": (0, rowStyles_1.testIdFor)(entry, "restore"), onClick: () => actions.restore([entry.id]) }))] })] }));
+};
+exports.default = NotificationDetail;

package/dist/Components/NotificationCenter/row/NotificationDetailProps.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from "react";
+import type { LiveNotificationEntry } from "../core/NotificationEngineProps";
+/** Density: desktop uses 32px buttons, phone 40px with 44px touch targets and a Back button. */
+export type NotificationDetailVariant = "desktop" | "phone";
+/** One entry in full: facts, the decision, and Open in, read and archive actions. Reads the nearest `NotificationCenterProvider`. */
+export interface NotificationDetailProps {
+    /** A live entry from `useNotificationCenter()`. */
+    item: LiveNotificationEntry;
+    /** Defaults to "desktop". */
+    variant?: NotificationDetailVariant;
+    /** Shows the Back button on phone. */
+    onBack?: () => void;
+    /** Ref to the focusable title, so opening an entry can move focus to it. */
+    titleRef?: Ref<HTMLHeadingElement>;
+}

package/dist/Components/NotificationCenter/row/NotificationDetailProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NotificationCenter/row/NotificationRow.d.ts

@@ -0,0 +1,3 @@
+import type { NotificationRowProps } from "./NotificationRowProps";
+declare const _default: import("react").MemoExoticComponent<({ item, variant, isSelected, isChecked, onCheckedChange, isThreadChild, thread, isThreadOpen, onThreadToggle, initialReasonActionId, onOpen, linkRef, }: NotificationRowProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/Components/NotificationCenter/row/NotificationRow.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../../Theme/chakra/motion");
+const motion_2 = require("../../../Theme/tokens/primitives/motion");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const grouping_1 = require("../core/grouping");
+const category_1 = require("./category");
+const ReasonForm_1 = require("./ReasonForm");
+const RowActions_1 = require("./RowActions");
+const RowQuickActions_1 = require("./RowQuickActions");
+const RowStatus_1 = require("./RowStatus");
+const rowParts_1 = require("./rowParts");
+const rowMenu_1 = require("./rowMenu");
+const rowStyles_1 = require("./rowStyles");
+const COLLAPSE = (0, motion_2.transitionFor)(["grid-template-rows", "opacity"], "base");
+const HIDE = `${COLLAPSE}, visibility ${motion_2.MOTION_MS.base}ms step-end`;
+const SHOW = `${COLLAPSE}, visibility ${motion_2.MOTION_MS.base}ms step-start`;
+const isPlainClick = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+/** One notification as a list row: lead avatar or tile, title, context, decisions with undo, and hover actions. */
+const NotificationRow = ({ item, variant = "panel", isSelected = false, isChecked = false, onCheckedChange, isThreadChild = false, thread, isThreadOpen = false, onThreadToggle, initialReasonActionId, onOpen, linkRef, }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const shared = (0, NotificationCenterProvider_1.useNotificationShared)();
+    const { labels, format, now, categories, features, isOffline, actions } = shared;
+    const { entry, state } = item;
+    const [askingId, setAskingId] = (0, react_1.useState)(initialReasonActionId);
+    const rows = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
+    const size = rowStyles_1.ROW_BUTTON_SIZE[variant];
+    const isPhone = variant === "phone";
+    const isUnread = entry.isRead === false;
+    const isHidden = state.isHidden;
+    const category = (0, category_1.categoryFor)(categories, entry.category, labels.otherCategory);
+    const title = (0, grouping_1.plainTitle)(entry.title);
+    const actionList = (0, rowMenu_1.visibleActionsFor)(entry, features);
+    const days = format.daysSince(entry.createdAt, now);
+    const hasDecision = actionList.some((action) => action.href === undefined);
+    const waitingDays = state.zone === "needsYou" && hasDecision && days >= rowStyles_1.WAITING_AFTER_DAYS ? days : null;
+    const request = state.reasonRequest;
+    const formActionId = askingId !== undefined ? askingId : request ? request.actionId : undefined;
+    const formAction = state.status === "open" && formActionId !== undefined
+        ? actionList.find((action) => action.id === formActionId)
+        : undefined;
+    const isQuiet = state.status === "open" && formAction === undefined;
+    const quick = isQuiet ? (0, rowMenu_1.quickActionsFor)(item, (0, rowMenu_1.rowScope)(item, thread, isThreadOpen), shared) : [];
+    const rest = thread ? thread.rest.length : 0;
+    const resting = isSelected || isChecked ? rows.selected : colors.surfaceRaised;
+    const hover = isSelected || isChecked ? rows.selectedActive : rows.active;
+    const open = (event) => {
+        if (onOpen)
+            onOpen(item, event);
+        else
+            actions.open(entry, event);
+    };
+    const onLinkClick = (event) => {
+        if (entry.href !== undefined) {
+            if (!isPlainClick(event))
+                return;
+            event.preventDefault();
+        }
+        open(event);
+    };
+    const closeForm = () => {
+        setAskingId(undefined);
+        if (request)
+            actions.clearReasonRequest(entry.id);
+    };
+    const sendForm = (action, reason) => {
+        setAskingId(undefined);
+        actions.decide([entry.id], action, reason);
+    };
+    const linkSx = {
+        flex: 1,
+        minW: 0,
+        textAlign: "left",
+        fontSize: "sm",
+        lineHeight: "1.43",
+        color: "inherit",
+        textDecoration: "none",
+        "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            zIndex: 1,
+            borderRadius: radii_1.RADIUS_ROLE.option,
+        },
+        "&:focus-visible": { outline: "none" },
+        "&:focus-visible::after": {
+            boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
+            outline: "2px solid transparent",
+            outlineOffset: "-2px",
+        },
+    };
+    const linkBody = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isUnread && (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: `${labels.unread}. ` }), entry.eyebrow && ((0, jsx_runtime_1.jsxs)(react_2.chakra.span, { fontFamily: "mono", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: [entry.eyebrow, " "] })), (0, jsx_runtime_1.jsx)(rowParts_1.TitleText, { parts: entry.title, isUnread: isUnread })] }));
+    return ((0, jsx_runtime_1.jsx)(react_2.chakra.li, { listStyleType: "none", display: "grid", gridTemplateRows: isHidden ? "0fr" : "1fr", opacity: isHidden ? 0 : 1, visibility: isHidden ? "hidden" : "visible", "aria-hidden": isHidden ? true : undefined, "data-testid": entry.testId, "data-notification-id": entry.id, "data-status": state.status, sx: {
+            transition: isHidden ? HIDE : SHOW,
+            contentVisibility: "auto",
+            containIntrinsicSize: "auto 4.5rem",
+            ...(0, motion_1.reducedMotionSx)(),
+        }, children: (0, jsx_runtime_1.jsx)(Primitives_1.Box, { minH: 0, overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { position: "relative", align: "flex-start", gap: variant === "inbox" ? 2.5 : 3, pt: isPhone ? 3 : 2.5, pb: isPhone ? 3 : 2.5, pr: isPhone ? 2 : 3, pl: isThreadChild ? 16 : 5, borderRadius: radii_1.RADIUS_ROLE.option, bg: resting, sx: {
+                    [rowParts_1.ROW_PLANE_VAR]: resting,
+                    transition: (0, motion_2.transitionFor)(["background-color"]),
+                    "&:hover": { bg: hover, [rowParts_1.ROW_PLANE_VAR]: hover },
+                    [`&:hover ${RowQuickActions_1.QUICK_SELECTOR}, &:focus-within ${RowQuickActions_1.QUICK_SELECTOR}`]: { opacity: 1 },
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, children: [isSelected && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", left: 0, top: 2, bottom: 2, w: "0.1875rem", borderRightRadius: "sm", bg: colors.primary[500], "aria-hidden": "true" })), isUnread && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", left: isThreadChild ? "3.125rem" : "0.4375rem", top: isThreadChild ? "0.875rem" : isPhone ? "1.125rem" : "1rem", boxSize: "0.5rem", borderRadius: "full", bg: colors.accentText, "aria-hidden": "true", "data-testid": (0, rowStyles_1.testIdFor)(entry, "dot") })), onCheckedChange && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "relative", zIndex: 2, mt: 1, sx: rowStyles_1.CHECKBOX_TOUCH_TARGET_SX, children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isChecked, "aria-label": labels.select(title), onChange: (event) => onCheckedChange(item, event.target.checked) }) })), (0, jsx_runtime_1.jsx)(rowParts_1.RowLeading, { entry: entry, category: category, size: isThreadChild ? "xs" : isPhone ? "md" : "sm" }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "baseline", gap: 2, children: [entry.href !== undefined ? ((0, jsx_runtime_1.jsx)(react_2.chakra.a, { ref: linkRef, href: entry.href, "aria-current": isSelected ? "true" : undefined, "data-testid": (0, rowStyles_1.testIdFor)(entry, "link"), onClick: onLinkClick, sx: linkSx, children: linkBody })) : ((0, jsx_runtime_1.jsx)(react_2.chakra.button, { ref: linkRef, type: "button", "aria-current": isSelected ? "true" : undefined, "data-testid": (0, rowStyles_1.testIdFor)(entry, "link"), onClick: onLinkClick, sx: linkSx, children: linkBody })), (0, jsx_runtime_1.jsx)(rowParts_1.RowTime, { at: entry.createdAt, now: now, format: format })] }), (0, jsx_runtime_1.jsx)(rowParts_1.RowContext, { entry: entry, waitingDays: waitingDays, labels: labels }), entry.preview && (0, jsx_runtime_1.jsx)(rowParts_1.RowPreview, { text: entry.preview, isLarge: isPhone }), entry.change && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(rowParts_1.ChangeChips, { change: entry.change, labels: labels }) })), formAction ? ((0, jsx_runtime_1.jsx)(ReasonForm_1.ReasonForm, { entry: entry, action: formAction, labels: labels, size: size, isOffline: isOffline, serverMessage: request ? ((_a = request.message) !== null && _a !== void 0 ? _a : labels.reasonRequiredMessage) : undefined, onCancel: closeForm, onSubmit: (reason) => sendForm(formAction, reason) })) : (state.status === "open" &&
+                                actionList.length > 0 && ((0, jsx_runtime_1.jsx)(RowActions_1.RowActions, { entry: entry, actionList: actionList, shared: shared, size: size, emphasis: "row", onAsk: (action) => setAskingId(action.id) }))), (0, jsx_runtime_1.jsx)(RowStatus_1.RowStatus, { item: item, shared: shared, size: size }), thread && rest > 0 && onThreadToggle && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "relative", zIndex: 2, mt: 2, children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "link", leftIcon: isThreadOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: (0, rowStyles_1.iconSizeFor)("xs"), "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: (0, rowStyles_1.iconSizeFor)("xs"), "aria-hidden": "true" })), label: isThreadOpen ? labels.threadHide(rest) : labels.threadShow(rest), "aria-expanded": isThreadOpen, "data-testid": (0, rowStyles_1.testIdFor)(entry, "thread"), onClick: () => onThreadToggle(thread) }) }))] }), quick.length > 0 &&
+                        (isPhone ? ((0, jsx_runtime_1.jsx)(RowQuickActions_1.RowMoreMenu, { entry: entry, items: quick, isOffline: isOffline, label: labels.moreActions(title) })) : ((0, jsx_runtime_1.jsx)(RowQuickActions_1.RowQuickActions, { entry: entry, items: quick, isOffline: isOffline })))] }) }) }));
+};
+exports.default = (0, react_1.memo)(NotificationRow);

package/dist/Components/NotificationCenter/row/NotificationRowProps.d.ts

@@ -0,0 +1,33 @@
+import type { KeyboardEvent, MouseEvent, RefCallback } from "react";
+import type { LiveNotificationEntry, NotificationThread } from "../core/NotificationEngineProps";
+/** Density: panel rows carry 24px buttons, inbox rows 32px, phone rows 40px with 44px touch targets. */
+export type NotificationRowVariant = "panel" | "inbox" | "phone";
+/** The click or key press that opened a row. */
+export type NotificationRowOpenEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+/** One entry as a list row; reads labels and actions from the nearest `NotificationCenterProvider`. Render it inside a `ul`. */
+export interface NotificationRowProps {
+    /** A live entry from `useNotificationCenter().lists`; rows skip re-rendering while it is unchanged. */
+    item: LiveNotificationEntry;
+    /** Defaults to "panel". */
+    variant?: NotificationRowVariant;
+    /** The entry shown in the reading pane: tinted, with a rail and `aria-current` on its link. */
+    isSelected?: boolean;
+    /** The bulk-selection checkbox state; only shown with `onCheckedChange`. */
+    isChecked?: boolean;
+    /** Shows the selection checkbox; pass one stable function for every row. */
+    onCheckedChange?: (item: LiveNotificationEntry, checked: boolean) => void;
+    /** An older entry inside an open thread: indented, with a 24px avatar. */
+    isThreadChild?: boolean;
+    /** Set on a thread's lead row; while closed, its read and archive buttons cover the whole thread. */
+    thread?: NotificationThread;
+    /** Whether the thread's older entries are showing. */
+    isThreadOpen?: boolean;
+    /** Shows the thread toggle; pass one stable function for every row. */
+    onThreadToggle?: (thread: NotificationThread) => void;
+    /** Opens the reason form for this action on mount, e.g. from a keyboard shortcut. */
+    initialReasonActionId?: string;
+    /** Replaces opening through `onOpen`, e.g. to show the entry in a reading pane; modifier clicks still open a new tab. */
+    onOpen?: (item: LiveNotificationEntry, event: NotificationRowOpenEvent) => void;
+    /** Callback ref to the row's link (an `a`, or a `button` without `href`), for roving focus in a list. */
+    linkRef?: RefCallback<HTMLElement>;
+}

package/dist/Components/NotificationCenter/row/NotificationRowProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NotificationCenter/row/ReasonForm.d.ts

@@ -0,0 +1,14 @@
+import type { NotificationAction, NotificationEntry, NotificationLabels } from "../core/NotificationSourceProps";
+import { type RowButtonSize } from "./rowStyles";
+interface ReasonFormProps {
+    entry: NotificationEntry;
+    action: NotificationAction;
+    labels: NotificationLabels;
+    size: RowButtonSize;
+    isOffline: boolean;
+    serverMessage?: string;
+    onCancel: () => void;
+    onSubmit: (reason: string) => void;
+}
+export declare const ReasonForm: ({ entry, action, labels, size, isOffline, serverMessage, onCancel, onSubmit, }: ReasonFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/row/ReasonForm.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReasonForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const InputTextArea_1 = __importDefault(require("../../InputTextArea/InputTextArea"));
+const Kbd_1 = __importDefault(require("../../Kbd/Kbd"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const rowStyles_1 = require("./rowStyles");
+const ReasonForm = ({ entry, action, labels, size, isOffline, serverMessage, onCancel, onSubmit, }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const id = (0, react_1.useId)();
+    const hintId = `${id}-hint`;
+    const field = (0, react_1.useRef)(null);
+    const [text, setText] = (0, react_1.useState)("");
+    const [touched, setTouched] = (0, react_1.useState)(false);
+    const isServerRequest = serverMessage !== undefined;
+    const isRequired = action.reason === "required" || isServerRequest;
+    const isNegative = action.intent === "negative";
+    const isMissing = isRequired && !text.trim();
+    const missingMessage = isNegative ? labels.reasonMissingNegative : labels.reasonMissing;
+    const errorText = touched && isMissing ? missingMessage : isServerRequest && !text.trim() ? serverMessage : undefined;
+    (0, react_1.useEffect)(() => {
+        if (field.current)
+            field.current.focus();
+    }, []);
+    const submit = () => {
+        setTouched(true);
+        if (isMissing) {
+            if (field.current)
+                field.current.focus();
+            return;
+        }
+        onSubmit(text.trim());
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            onCancel();
+        }
+        else if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            submit();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.chakra.form, { noValidate: true, position: "relative", zIndex: 2, display: "grid", gap: 1.5, mt: 2.5, onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, children: [(0, jsx_runtime_1.jsxs)(react_2.chakra.label, { htmlFor: id, fontSize: "xs-plus", fontWeight: 500, color: colors.text[700], children: [(_a = action.reasonLabel) !== null && _a !== void 0 ? _a : labels.reasonLabel, !isRequired && ((0, jsx_runtime_1.jsxs)(react_2.chakra.span, { fontWeight: 400, color: colors.textMuted, children: [" ", labels.reasonOptional] }))] }), (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { ref: field, id: id, rows: 2, size: size === "md" ? "md" : "sm", resize: "vertical", value: text, error: errorText !== undefined, "aria-describedby": hintId, placeholder: isNegative ? labels.reasonPlaceholder : undefined, onChange: (event) => setText(event.target.value), onKeyDown: onKeyDown }), (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { id: hintId, align: "center", wrap: "wrap", gap: 1, fontSize: "xs", fontWeight: errorText !== undefined ? 500 : 400, color: errorText !== undefined ? colors.semanticText.error : colors.textMuted, children: errorText !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.CircleAlert, boxSize: "0.75rem", "aria-hidden": "true" }), errorText] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: labels.keyCtrl }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: labels.keyEnter }), (0, jsx_runtime_1.jsxs)("span", { children: [labels.toSend, " \u00B7"] }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: labels.keyEsc }), (0, jsx_runtime_1.jsx)("span", { children: labels.toCancel })] })) }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { justify: "flex-end", gap: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: "ghost", colorScheme: "gray", label: labels.cancel, sx: (0, rowStyles_1.touchTargetFor)(size), onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", size: size, variant: "solid", colorScheme: isNegative ? "red" : "primary", label: action.label, "aria-label": labels.actionName(action.label, entry.subject), isDisabled: isOffline, sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": entry.testId ? `${entry.testId}-${action.id}-send` : undefined })] })] }));
+};
+exports.ReasonForm = ReasonForm;

package/dist/Components/NotificationCenter/row/RowActions.d.ts

@@ -0,0 +1,16 @@
+import type { NotificationAction, NotificationEntry } from "../core/NotificationSourceProps";
+import type { NotificationShared } from "../core/useNotificationEngine";
+import { type RowButtonSize } from "./rowStyles";
+interface RowActionsProps {
+    entry: NotificationEntry;
+    actionList: NotificationAction[];
+    shared: NotificationShared;
+    size: RowButtonSize;
+    emphasis: "row" | "detail";
+    onAsk: (action: NotificationAction) => void;
+}
+export declare const OfflineNote: ({ text }: {
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RowActions: ({ entry, actionList, shared, size, emphasis, onAsk }: RowActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/row/RowActions.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowActions = exports.OfflineNote = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const rowMenu_1 = require("./rowMenu");
+const rowStyles_1 = require("./rowStyles");
+const OfflineNote = ({ text }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { as: "span", display: "inline-flex", align: "center", gap: 1, fontSize: "xs", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.WifiOff, boxSize: "0.75rem", "aria-hidden": "true" }), text] }));
+};
+exports.OfflineNote = OfflineNote;
+const RowActions = ({ entry, actionList, shared, size, emphasis, onAsk }) => {
+    const { labels, actions, isOffline } = shared;
+    const iconPx = (0, rowStyles_1.iconSizeFor)(size);
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { position: "relative", zIndex: 2, wrap: "wrap", align: "center", gap: 2, mt: emphasis === "row" ? 2.5 : 0, children: [actionList.map((action) => {
+                const isLink = !(0, rowMenu_1.isDecision)(action);
+                const isStrong = emphasis === "detail" && (action.intent === "positive" || action.intent === "primary");
+                return ((0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: isStrong ? "solid" : "outline", colorScheme: isStrong ? "primary" : "gray", label: action.label, "aria-label": labels.actionName(action.label, entry.subject), leftIcon: !isLink && action.intent === "positive" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconPx, "aria-hidden": "true" }) : undefined, rightIcon: isLink ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: iconPx, "aria-hidden": "true" }) : undefined, isDisabled: isOffline && !isLink, sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": (0, rowStyles_1.testIdFor)(entry, action.id), onClick: (event) => {
+                        event.stopPropagation();
+                        if (isLink)
+                            actions.open(entry, event, action);
+                        else if (action.reason)
+                            onAsk(action);
+                        else
+                            actions.decide([entry.id], action);
+                    } }, action.id));
+            }), isOffline && actionList.some(rowMenu_1.isDecision) && (0, jsx_runtime_1.jsx)(exports.OfflineNote, { text: labels.offlineNote })] }));
+};
+exports.RowActions = RowActions;

package/dist/Components/NotificationCenter/row/RowQuickActions.d.ts

@@ -0,0 +1,17 @@
+import type { NotificationEntry } from "../core/NotificationSourceProps";
+import type { RowQuickAction } from "./rowMenu";
+export declare const QUICK_SELECTOR = "[data-nc-quick]";
+interface QuickActionsProps {
+    entry: NotificationEntry;
+    items: RowQuickAction[];
+    isOffline: boolean;
+}
+export declare const RowQuickActions: ({ entry, items, isOffline }: QuickActionsProps) => import("react/jsx-runtime").JSX.Element;
+interface MoreMenuProps {
+    entry: NotificationEntry;
+    items: RowQuickAction[];
+    isOffline: boolean;
+    label: string;
+}
+export declare const RowMoreMenu: ({ entry, items, isOffline, label }: MoreMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/row/RowQuickActions.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowMoreMenu = exports.RowQuickActions = exports.QUICK_SELECTOR = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const IconButton_1 = __importDefault(require("../../IconButton/IconButton"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const DropDown_1 = __importDefault(require("../../Dropdown/DropDown"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
+const rowStyles_1 = require("./rowStyles");
+exports.QUICK_SELECTOR = "[data-nc-quick]";
+const RowQuickActions = ({ entry, items, isOffline }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { "data-nc-quick": "", position: "absolute", top: "0.375rem", right: "0.375rem", zIndex: 2, gap: "0.125rem", p: "0.125rem", borderRadius: radii_1.RADIUS_ROLE.control, bg: colors.surfaceRaised, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, boxShadow: "sm", opacity: 0, sx: {
+            transition: (0, motion_1.transitionFor)(["opacity"]),
+            "@media (hover: none)": {
+                position: "relative",
+                top: "auto",
+                right: "auto",
+                opacity: 1,
+                alignSelf: "flex-start",
+                border: "none",
+                boxShadow: "none",
+                bg: "transparent",
+            },
+            ...(0, motion_2.reducedMotionSx)(),
+        }, children: items.map((item) => ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.label, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "xs", variant: "ghost", colorScheme: "gray", "aria-label": item.label, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: item.icon, boxSize: `${(0, rowStyles_1.iconSizeFor)("xs") / 16}rem`, "aria-hidden": "true" }), isDisabled: isOffline, "data-testid": (0, rowStyles_1.testIdFor)(entry, item.id), onClick: (event) => {
+                    event.stopPropagation();
+                    item.run();
+                } }) }, item.id))) }));
+};
+exports.RowQuickActions = RowQuickActions;
+const RowMoreMenu = ({ entry, items, isOffline, label }) => {
+    const trigger = {
+        variant: "ghost",
+        colorScheme: "gray",
+        px: 0,
+        minW: "2.5rem",
+        isDisabled: isOffline,
+        sx: rowStyles_1.TOUCH_TARGET_SX,
+        "data-testid": (0, rowStyles_1.testIdFor)(entry, "more"),
+    };
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { position: "relative", zIndex: 2, flexShrink: 0, mt: "-0.5rem", mr: "-0.5rem", children: (0, jsx_runtime_1.jsx)(DropDown_1.default, { size: "md", options: items.map((item) => ({ id: item.id, label: item.label, image: item.icon })), handleOptionSelect: (id) => {
+                const hit = items.find((item) => item.id === id);
+                if (hit)
+                    hit.run();
+            }, DropdownIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Ellipsis, { size: (0, rowStyles_1.iconSizeFor)("md"), "aria-hidden": "true" }), isVisibleIconShow: false, ariaLabel: label, buttonProps: trigger }) }));
+};
+exports.RowMoreMenu = RowMoreMenu;

package/dist/Components/NotificationCenter/row/RowStatus.d.ts

@@ -0,0 +1,10 @@
+import type { LiveNotificationEntry } from "../core/NotificationEngineProps";
+import type { NotificationShared } from "../core/useNotificationEngine";
+import { type RowButtonSize } from "./rowStyles";
+interface RowStatusProps {
+    item: LiveNotificationEntry;
+    shared: NotificationShared;
+    size: RowButtonSize;
+}
+export declare const RowStatus: ({ item, shared, size }: RowStatusProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Components/NotificationCenter/row/RowStatus.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const Spinner_1 = __importDefault(require("../../Spinner/Spinner"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const rowStyles_1 = require("./rowStyles");
+const StatusLine = ({ tone, icon, role, children }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const soft = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, tone), colors.surfaceRaised);
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { role: role, position: "relative", zIndex: 2, wrap: "wrap", align: "center", columnGap: 2, rowGap: 1.5, mt: 2.5, px: 2.5, py: 1.5, borderRadius: radii_1.RADIUS_ROLE.control, bg: soft.bg, color: soft.fg, fontSize: "xs-plus", lineHeight: "1.45", onClick: (event) => event.stopPropagation(), children: [icon, children] }));
+};
+const glyph = (as) => (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: as, boxSize: "0.875rem", flexShrink: 0, "aria-hidden": "true" });
+const LINK_SX = { color: "inherit", fontWeight: 600 };
+const RowStatus = ({ item, shared, size }) => {
+    const { entry, state } = item;
+    const { labels, actions, isOffline } = shared;
+    const { decision, error } = state;
+    if (!decision || state.status === "open")
+        return null;
+    if (state.status === "failed") {
+        return ((0, jsx_runtime_1.jsxs)(StatusLine, { tone: "error", icon: glyph(lucide_react_1.CircleAlert), role: "alert", children: [(0, jsx_runtime_1.jsxs)(react_1.chakra.span, { fontWeight: 500, children: [(0, jsx_runtime_1.jsx)(react_1.chakra.strong, { fontWeight: 600, children: labels.couldNot(decision.label) }), " ", error && error.message ? error.message : labels.failedMessage] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: size, variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: (0, rowStyles_1.iconSizeFor)(size), "aria-hidden": "true" }), label: labels.retry, "aria-label": labels.actionName(labels.retry, entry.subject), isDisabled: isOffline, ml: "auto", sx: (0, rowStyles_1.touchTargetFor)(size), "data-testid": (0, rowStyles_1.testIdFor)(entry, "retry"), onClick: () => actions.retry(entry.id) })] }));
+    }
+    if (state.status === "denied") {
+        const isForbidden = error !== undefined && error.kind === "forbidden";
+        const fallback = isForbidden ? labels.forbiddenMessage : labels.conflictMessage;
+        return ((0, jsx_runtime_1.jsxs)(StatusLine, { tone: "info", icon: glyph(isForbidden ? lucide_react_1.Lock : lucide_react_1.Info), children: [(0, jsx_runtime_1.jsx)(react_1.chakra.span, { fontWeight: 500, children: error && error.message ? error.message : fallback }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "link", label: labels.dismiss, "aria-label": labels.actionName(labels.dismiss, entry.subject), sx: LINK_SX, "data-testid": (0, rowStyles_1.testIdFor)(entry, "dismiss"), onClick: () => actions.dismiss(entry.id) })] }));
+    }
+    const isNegative = decision.intent === "negative";
+    const isSending = state.status === "sending";
+    return ((0, jsx_runtime_1.jsxs)(StatusLine, { tone: isNegative ? "neutral" : "success", icon: isSending ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "xs", color: "currentColor", "aria-hidden": "true" }) : glyph(isNegative ? lucide_react_1.CircleX : lucide_react_1.CircleCheck), children: [(0, jsx_runtime_1.jsx)(react_1.chakra.span, { fontWeight: 500, children: isSending ? labels.sending : decision.doneLabel }), state.status === "undo" && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "link", label: labels.undo, "aria-label": labels.actionName(labels.undo, entry.subject), sx: LINK_SX, "data-testid": (0, rowStyles_1.testIdFor)(entry, "undo"), onClick: () => actions.undo(entry.id) })), decision.reason && ((0, jsx_runtime_1.jsx)(react_1.chakra.span, { flexBasis: "100%", pl: "1.375rem", fontStyle: "italic", opacity: 0.85, children: labels.reasonQuote(decision.reason) }))] }));
+};
+exports.RowStatus = RowStatus;

package/dist/Components/NotificationCenter/row/category.d.ts

@@ -0,0 +1,8 @@
+import type { NotificationCategories, NotificationCategory } from "../core/NotificationSourceProps";
+import type { Tone } from "../../../Theme/tokens/builders/tone";
+export interface ResolvedCategory {
+    label: string;
+    icon: NotificationCategory["icon"];
+    tone: Tone;
+}
+export declare const categoryFor: (categories: NotificationCategories, key: string, otherLabel: string) => ResolvedCategory;

package/dist/Components/NotificationCenter/row/category.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.categoryFor = void 0;
+const lucide_react_1 = require("lucide-react");
+const grouping_1 = require("../core/grouping");
+const categoryFor = (categories, key, otherLabel) => {
+    var _a;
+    const category = (0, grouping_1.findCategory)(categories, key);
+    if (!category)
+        return { label: otherLabel, icon: lucide_react_1.Bell, tone: "neutral" };
+    return { label: category.label, icon: category.icon, tone: (_a = category.tone) !== null && _a !== void 0 ? _a : "neutral" };
+};
+exports.categoryFor = categoryFor;

package/dist/Components/NotificationCenter/row/rowMenu.d.ts

@@ -0,0 +1,14 @@
+import type { ElementType } from "react";
+import type { NotificationAction, NotificationEntry } from "../core/NotificationSourceProps";
+import type { LiveNotificationEntry, NotificationFeatures, NotificationThread } from "../core/NotificationEngineProps";
+import type { NotificationShared } from "../core/useNotificationEngine";
+export interface RowQuickAction {
+    id: string;
+    label: string;
+    icon: ElementType;
+    run: () => void;
+}
+export declare const rowScope: (item: LiveNotificationEntry, thread: NotificationThread | undefined, isThreadOpen: boolean) => LiveNotificationEntry[];
+export declare const quickActionsFor: (item: LiveNotificationEntry, scope: LiveNotificationEntry[], shared: NotificationShared) => RowQuickAction[];
+export declare const visibleActionsFor: (entry: NotificationEntry, features: NotificationFeatures) => NotificationAction[];
+export declare const isDecision: (action: NotificationAction) => boolean;