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

package/dist/esm/Components/NotificationCenter/preferences/PreferenceCells.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lock } from "lucide-react";
+import { Box, Flex } from "../../Primitives/Primitives.js";
+import Checkbox from "../../Checkbox/Checkbox.js";
+import ToggleSwitch from "../../ToggleSwitch/ToggleSwitch.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+const LockMark = ({ label }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { as: "span", role: "img", "aria-label": label, tabIndex: 0, display: "inline-flex", color: colors.textMuted, borderRadius: "sm", children: _jsx(Lock, { size: 12, "aria-hidden": "true" }) }));
+};
+export const GridCell = ({ row, channel, labels, isOn, isLocked, isFrozen, isPending, onToggle, "data-testid": testId }) => {
+    const name = `${row.label}: ${channel.label}`;
+    const checkbox = (_jsx(Checkbox, { "aria-label": isLocked ? `${name}, ${labels.alwaysOn}` : name, isChecked: isOn, isDisabled: isLocked || isFrozen, onChange: (event) => onToggle(event.target.checked) }));
+    if (!isLocked) {
+        return (_jsx(Flex, { "data-testid": testId, justify: "center", opacity: isPending ? 0.6 : 1, children: checkbox }));
+    }
+    return (_jsx(ToolTip, { label: labels.lockedTip, placement: "top", children: _jsxs(Flex, { "data-testid": testId, justify: "center", position: "relative", w: "fit-content", mx: "auto", children: [checkbox, _jsx(Box, { position: "absolute", left: "calc(100% + 0.375rem)", top: "50%", transform: "translateY(-50%)", children: _jsx(LockMark, { label: labels.lockedTip }) })] }) }));
+};
+const touchTarget = {
+    "& label": { display: "inline-flex", alignItems: "center", minHeight: "2.75rem" },
+    "& input[role='switch']": { top: "-0.6875rem", height: "calc(100% + 1.375rem)", left: "-0.25rem", width: "calc(100% + 0.5rem)" },
+};
+export const SwitchCell = ({ row, channel, labels, isOn, isLocked, isFrozen, isPending, onToggle, "data-testid": testId }) => {
+    const name = `${row.label}: ${channel.label}`;
+    return (_jsxs(Flex, { "data-testid": testId, align: "center", gap: 1.5, minH: "2.75rem", opacity: isPending ? 0.6 : 1, sx: touchTarget, children: [_jsx(ToggleSwitch, { size: "md", label: isLocked ? `${channel.label} (${labels.alwaysOn})` : channel.label, "aria-label": isLocked ? `${name}, ${labels.alwaysOn}` : name, isChecked: isOn, isDisabled: isLocked || isFrozen, onChange: onToggle }), isLocked && _jsx(LockMark, { label: labels.lockedTip })] }));
+};

package/dist/esm/Components/NotificationCenter/preferences/PreferenceGroups.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text } from "../../Primitives/Primitives.js";
+import SettingRow from "../../SettingRow/SettingRow.js";
+import SettingsSection from "../../SettingRow/SettingsSection.js";
+import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { cardRule } from "../../../Theme/tokens/builders/planeStep.js";
+import { GridCell, SwitchCell } from "./PreferenceCells.js";
+const isLockedCell = (row, channelId) => Boolean(row.locked && row.locked.includes(channelId));
+const cellId = (testId, rowId, channelId) => (testId ? `${testId}-${rowId}-${channelId}` : undefined);
+const GroupTable = ({ group, channels, labels, isFrozen, valueOf, isPending, onToggle, testId }) => {
+    const { colors } = useCustomTheme();
+    const rule = cardRule(colors);
+    return (_jsxs(Box, { as: "table", w: "100%", sx: { borderCollapse: "collapse" }, children: [_jsx(Box, { as: "thead", children: _jsxs(Box, { as: "tr", children: [_jsx(Box, { as: "th", scope: "col", textAlign: "left", pb: 2, children: _jsx(VisuallyHidden, { children: labels.typeColumn }) }), channels.map((channel) => (_jsx(Box, { as: "th", scope: "col", w: "7rem", pb: 2, textAlign: "center", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: channel.label }, channel.id)))] }) }), _jsx(Box, { as: "tbody", children: group.rows.map((row) => (_jsxs(Box, { as: "tr", borderTop: "1px solid", borderColor: rule, children: [_jsxs(Box, { as: "th", scope: "row", textAlign: "left", fontWeight: 400, py: 3, pr: 4, children: [_jsx(Text, { fontSize: "sm", fontWeight: 500, color: colors.text[800], children: row.label }), row.hint && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: row.hint }))] }), channels.map((channel) => (_jsx(Box, { as: "td", textAlign: "center", verticalAlign: "middle", py: 3, children: _jsx(GridCell, { row: row, channel: channel, labels: labels, isOn: isLockedCell(row, channel.id) || valueOf(row.id, channel.id), isLocked: isLockedCell(row, channel.id), isFrozen: isFrozen, isPending: isPending(row.id, channel.id), onToggle: (next) => onToggle(row, channel, next), "data-testid": cellId(testId, row.id, channel.id) }) }, channel.id)))] }, row.id))) })] }));
+};
+const GroupRows = ({ group, channels, labels, isFrozen, valueOf, isPending, onToggle, testId }) => (_jsx(_Fragment, { children: group.rows.map((row) => {
+        var _a;
+        return (_jsx(SettingRow, { title: row.label, description: (_a = row.hint) !== null && _a !== void 0 ? _a : null, control: _jsx(Flex, { role: "group", "aria-label": row.label, wrap: "wrap", columnGap: 5, rowGap: 0, children: channels.map((channel) => (_jsx(SwitchCell, { row: row, channel: channel, labels: labels, isOn: isLockedCell(row, channel.id) || valueOf(row.id, channel.id), isLocked: isLockedCell(row, channel.id), isFrozen: isFrozen, isPending: isPending(row.id, channel.id), onToggle: (next) => onToggle(row, channel, next), "data-testid": cellId(testId, row.id, channel.id) }, channel.id))) }) }, row.id));
+    }) }));
+const PreferenceGroups = (props) => (_jsx(_Fragment, { children: props.groups.map((group) => (_jsx(SettingsSection, { title: group.label, children: props.variant === "phone" ? _jsx(GroupRows, { ...props, group: group }) : _jsx(GroupTable, { ...props, group: group }) }, group.id))) }));
+export default PreferenceGroups;

package/dist/esm/Components/NotificationCenter/preferences/preferencesLabels.js

@@ -0,0 +1,24 @@
+import { mergeDefined } from "../core/labels.js";
+const DEFAULT_PREFERENCES_LABELS = {
+    title: "Notification settings",
+    subtitle: (appName) => (appName ? `Choose where ${appName} tells you about things.` : "Choose where you hear about things."),
+    email: "Email",
+    emailTiming: "Email timing",
+    emailHint: (appName) => appName ? `A summary skips anything you've already read in ${appName}.` : "A summary skips anything you've already read.",
+    typeColumn: "Notification type",
+    lockedTip: "Always on for this type",
+    asItHappens: "As it happens",
+    daily: "Daily at 9:00 am",
+    alwaysOn: "always on",
+    saving: "Saving…",
+    saved: "Saved",
+    autosave: "Changes save automatically",
+    saveFailed: (what) => `Couldn't save that change. ${what} was put back.`,
+    readOnlyBanner: "Your admin manages notification settings for your role. You can see them, but not change them.",
+    offlineBanner: "You're offline. Settings can't be changed until you reconnect.",
+    loading: "Loading settings",
+    errorTitle: "Couldn't load your settings",
+    errorDescription: "Nothing was changed. Try again in a moment.",
+    retry: "Try again",
+};
+export const resolvePreferencesLabels = (overrides) => mergeDefined(DEFAULT_PREFERENCES_LABELS, overrides);

package/dist/esm/Components/NotificationCenter/preferences/useAutosave.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const useAutosave = (saved, onFailed) => {
+    const [draft, setDraft] = useState({});
+    const [pendingKeys, setPendingKeys] = useState([]);
+    const [hasSaved, setHasSaved] = useState(false);
+    const inFlight = useRef(new Set());
+    useEffect(() => {
+        setDraft((current) => {
+            const kept = Object.keys(current).filter((key) => inFlight.current.has(key));
+            return kept.length === Object.keys(current).length ? current : Object.fromEntries(kept.map((key) => [key, current[key]]));
+        });
+    }, [saved]);
+    const commit = useCallback((key, next, save, what) => {
+        if (inFlight.current.has(key))
+            return;
+        inFlight.current.add(key);
+        setDraft((current) => ({ ...current, [key]: next }));
+        setPendingKeys(Array.from(inFlight.current));
+        const settle = () => {
+            inFlight.current.delete(key);
+            setPendingKeys(Array.from(inFlight.current));
+        };
+        save().then(() => {
+            setHasSaved(true);
+            settle();
+        }, () => {
+            setDraft((current) => {
+                const rest = { ...current };
+                delete rest[key];
+                return rest;
+            });
+            settle();
+            onFailed(what);
+        });
+    }, [onFailed]);
+    return { draft, pendingKeys, hasSaved, commit };
+};

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { chakra } from "@chakra-ui/react";
+import { Archive, ArchiveRestore, ArrowLeft, ExternalLink, Hourglass, Lock, Mail, MailOpen } from "lucide-react";
+import { Box, Flex, Heading, Icon, Text } from "../../Primitives/Primitives.js";
+import Avatar from "../../Avatar/Avatar.js";
+import Button from "../../Button/Button.js";
+import DescriptionList from "../../DescriptionList/DescriptionList.js";
+import EmptyState from "../../EmptyState/EmptyState.js";
+import Tag from "../../Tag/Tag.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+import { ruleOn } from "../../../Theme/tokens/builders/planeStep.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { useNotificationShared } from "../core/NotificationCenterProvider.js";
+import { categoryFor } from "./category.js";
+import { ReasonForm } from "./ReasonForm.js";
+import { OfflineNote, RowActions } from "./RowActions.js";
+import { RowStatus } from "./RowStatus.js";
+import { ChangeChips, TitleText, useToneTile } from "./rowParts.js";
+import { isDecision, visibleActionsFor } from "./rowMenu.js";
+import { WAITING_AFTER_DAYS, iconSizeFor, testIdFor, touchTargetFor } from "./rowStyles.js";
+/** 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 } = useCustomTheme();
+    const shared = useNotificationShared();
+    const { labels, format, now, categories, features, isOffline, appName, actions } = shared;
+    const { entry, state } = item;
+    const titleId = useId();
+    const [asking, setAsking] = useState(null);
+    const isPhone = variant === "phone";
+    const size = isPhone ? "md" : "sm";
+    const iconPx = iconSizeFor(size);
+    const category = categoryFor(categories, entry.category, labels.otherCategory);
+    const tile = useToneTile(category.tone);
+    const isUnread = entry.isRead === false;
+    const actionList = visibleActionsFor(entry, features);
+    const decides = actionList.some(isDecision);
+    const days = format.daysSince(entry.createdAt, now);
+    const isWaiting = state.zone === "needsYou" && decides && days >= 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" ? (_jsx(Button, { size: size, variant: entry.blocked ? "outline" : "ghost", colorScheme: "gray", leftIcon: _jsx(Archive, { size: iconPx, "aria-hidden": "true" }), label: labels.archive, isDisabled: isOffline, sx: touchTargetFor(size), "data-testid": testIdFor(entry, "archive"), onClick: () => actions.archive([entry.id]) })) : null;
+    return (_jsxs(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": testIdFor(entry, "detail"), children: [isPhone && onBack && (_jsx(Box, { mx: -2, children: _jsx(Button, { size: "md", variant: "ghost", colorScheme: "gray", leftIcon: _jsx(ArrowLeft, { size: iconSizeFor("md"), "aria-hidden": "true" }), label: labels.back, sx: touchTargetFor("md"), onClick: onBack }) })), _jsxs(Box, { as: "header", display: "grid", gap: 1.5, children: [_jsxs(Flex, { wrap: "wrap", align: "center", gap: 1.5, fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: [_jsx(Flex, { boxSize: "1.25rem", align: "center", justify: "center", borderRadius: RADIUS_ROLE.option, bg: tile.bg, color: tile.fg, "aria-hidden": "true", children: _jsx(Icon, { as: category.icon, boxSize: "0.75rem" }) }), _jsx("span", { children: category.label }), entry.eyebrow && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx(chakra.span, { fontFamily: "mono", children: entry.eyebrow })] })), isUnread && _jsx(Tag, { size: "xs", colorScheme: "primary", label: labels.unread })] }), _jsx(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": focusVisibleRing(colors) }, children: _jsx(TitleText, { parts: entry.title, isUnread: true }) }), _jsxs(Flex, { wrap: "wrap", align: "center", gap: 2, fontSize: "xs-plus", color: colors.textMuted, children: [entry.actor && (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: entry.actor.name, src: entry.actor.avatarUrl, size: "xs" }), _jsx("span", { children: entry.actor.name }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" })] })), _jsx(chakra.time, { dateTime: format.iso(entry.createdAt), children: format.absolute(entry.createdAt, now) }), isWaiting && _jsx(Tag, { size: "xs", tone: "warning", leadingIcon: Hourglass, label: labels.waiting(days) })] })] }), entry.blocked ? (_jsx(Box, { borderRadius: RADIUS_ROLE.control, bg: colors.backgroundColor.subtle, children: _jsx(EmptyState, { icon: Lock, size: "sm", titleAs: "h3", title: labels.blockedTitle, description: entry.blocked, action: archiveButton }) })) : (_jsxs(_Fragment, { children: [entry.context && (_jsx(Text, { mt: -2, fontSize: "xs-plus", color: colors.textMuted, children: entry.context })), ((_a = entry.body) !== null && _a !== void 0 ? _a : entry.preview) && (_jsx(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 && _jsx(ChangeChips, { change: entry.change, labels: labels }), entry.fields && entry.fields.length > 0 && (_jsx(Box, { p: 4, borderRadius: RADIUS_ROLE.control, bg: colors.backgroundColor.subtle, children: _jsx(DescriptionList, { items: entry.fields.map(([label, value]) => ({ label, value })), layout: isPhone ? "stacked" : "inline", columns: { base: 1 } }) })), state.status !== "open" ? (_jsx(RowStatus, { item: item, shared: shared, size: size })) : formAction ? (_jsx(Box, { maxW: "32.5rem", children: _jsx(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 && (_jsxs(Box, { display: "grid", gap: 2, children: [_jsx(RowActions, { entry: entry, actionList: actionList, shared: shared, size: size, emphasis: "detail", onAsk: (action) => setAsking({ id: entry.id, action }) }), isOffline && decides && _jsx(OfflineNote, { text: labels.offlineMessage })] })))] })), _jsxs(Flex, { wrap: "wrap", gap: 2, pt: 4, borderTop: `${BORDER_WIDTHS.hairline} solid ${ruleOn(colors, plane)}`, children: [!entry.blocked && (_jsx(Button, { size: size, variant: decides ? "outline" : "solid", colorScheme: decides ? "gray" : "primary", rightIcon: _jsx(ExternalLink, { size: iconPx, "aria-hidden": "true" }), label: labels.openIn(appName), sx: touchTargetFor(size), "data-testid": testIdFor(entry, "open"), onClick: (event) => actions.open(entry, event) })), isQuiet && features.markRead && entry.isRead !== undefined && (_jsx(Button, { size: size, variant: "ghost", colorScheme: "gray", leftIcon: isUnread ? _jsx(MailOpen, { size: iconPx, "aria-hidden": "true" }) : _jsx(Mail, { size: iconPx, "aria-hidden": "true" }), label: isUnread ? labels.markRead : labels.markUnread, isDisabled: isOffline, sx: touchTargetFor(size), "data-testid": testIdFor(entry, "read"), onClick: () => actions.setRead([entry.id], isUnread) })), isQuiet && !entry.blocked && archiveButton, isQuiet && features.restore && state.zone === "archived" && (_jsx(Button, { size: size, variant: "ghost", colorScheme: "gray", leftIcon: _jsx(ArchiveRestore, { size: iconPx, "aria-hidden": "true" }), label: labels.restore, isDisabled: isOffline, sx: touchTargetFor(size), "data-testid": testIdFor(entry, "restore"), onClick: () => actions.restore([entry.id]) }))] })] }));
+};
+export default NotificationDetail;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import { chakra } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Box, Flex } from "../../Primitives/Primitives.js";
+import Button from "../../Button/Button.js";
+import Checkbox from "../../Checkbox/Checkbox.js";
+import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { insetFocusRingShadow } from "../../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
+import { MOTION_MS, transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { useNotificationShared } from "../core/NotificationCenterProvider.js";
+import { plainTitle } from "../core/grouping.js";
+import { categoryFor } from "./category.js";
+import { ReasonForm } from "./ReasonForm.js";
+import { RowActions } from "./RowActions.js";
+import { RowMoreMenu, RowQuickActions, QUICK_SELECTOR } from "./RowQuickActions.js";
+import { RowStatus } from "./RowStatus.js";
+import { ChangeChips, ROW_PLANE_VAR, RowContext, RowLeading, RowPreview, RowTime, TitleText } from "./rowParts.js";
+import { quickActionsFor, rowScope, visibleActionsFor } from "./rowMenu.js";
+import { CHECKBOX_TOUCH_TARGET_SX, ROW_BUTTON_SIZE, WAITING_AFTER_DAYS, iconSizeFor, testIdFor } from "./rowStyles.js";
+const COLLAPSE = transitionFor(["grid-template-rows", "opacity"], "base");
+const HIDE = `${COLLAPSE}, visibility ${MOTION_MS.base}ms step-end`;
+const SHOW = `${COLLAPSE}, visibility ${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 } = useCustomTheme();
+    const shared = useNotificationShared();
+    const { labels, format, now, categories, features, isOffline, actions } = shared;
+    const { entry, state } = item;
+    const [askingId, setAskingId] = useState(initialReasonActionId);
+    const rows = useMemo(() => listRowBackgrounds(colors), [colors]);
+    const size = ROW_BUTTON_SIZE[variant];
+    const isPhone = variant === "phone";
+    const isUnread = entry.isRead === false;
+    const isHidden = state.isHidden;
+    const category = categoryFor(categories, entry.category, labels.otherCategory);
+    const title = plainTitle(entry.title);
+    const actionList = 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 >= 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 ? quickActionsFor(item, 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: RADIUS_ROLE.option,
+        },
+        "&:focus-visible": { outline: "none" },
+        "&:focus-visible::after": {
+            boxShadow: insetFocusRingShadow(colors),
+            outline: "2px solid transparent",
+            outlineOffset: "-2px",
+        },
+    };
+    const linkBody = (_jsxs(_Fragment, { children: [isUnread && _jsx(VisuallyHidden, { children: `${labels.unread}. ` }), entry.eyebrow && (_jsxs(chakra.span, { fontFamily: "mono", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: [entry.eyebrow, " "] })), _jsx(TitleText, { parts: entry.title, isUnread: isUnread })] }));
+    return (_jsx(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",
+            ...reducedMotionSx(),
+        }, children: _jsx(Box, { minH: 0, overflow: "hidden", children: _jsxs(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: RADIUS_ROLE.option, bg: resting, sx: {
+                    [ROW_PLANE_VAR]: resting,
+                    transition: transitionFor(["background-color"]),
+                    "&:hover": { bg: hover, [ROW_PLANE_VAR]: hover },
+                    [`&:hover ${QUICK_SELECTOR}, &:focus-within ${QUICK_SELECTOR}`]: { opacity: 1 },
+                    ...reducedMotionSx(),
+                }, children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: 2, bottom: 2, w: "0.1875rem", borderRightRadius: "sm", bg: colors.primary[500], "aria-hidden": "true" })), isUnread && (_jsx(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": testIdFor(entry, "dot") })), onCheckedChange && (_jsx(Box, { position: "relative", zIndex: 2, mt: 1, sx: CHECKBOX_TOUCH_TARGET_SX, children: _jsx(Checkbox, { isChecked: isChecked, "aria-label": labels.select(title), onChange: (event) => onCheckedChange(item, event.target.checked) }) })), _jsx(RowLeading, { entry: entry, category: category, size: isThreadChild ? "xs" : isPhone ? "md" : "sm" }), _jsxs(Box, { flex: 1, minW: 0, children: [_jsxs(Flex, { align: "baseline", gap: 2, children: [entry.href !== undefined ? (_jsx(chakra.a, { ref: linkRef, href: entry.href, "aria-current": isSelected ? "true" : undefined, "data-testid": testIdFor(entry, "link"), onClick: onLinkClick, sx: linkSx, children: linkBody })) : (_jsx(chakra.button, { ref: linkRef, type: "button", "aria-current": isSelected ? "true" : undefined, "data-testid": testIdFor(entry, "link"), onClick: onLinkClick, sx: linkSx, children: linkBody })), _jsx(RowTime, { at: entry.createdAt, now: now, format: format })] }), _jsx(RowContext, { entry: entry, waitingDays: waitingDays, labels: labels }), entry.preview && _jsx(RowPreview, { text: entry.preview, isLarge: isPhone }), entry.change && (_jsx(Box, { mt: 1.5, children: _jsx(ChangeChips, { change: entry.change, labels: labels }) })), formAction ? (_jsx(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 && (_jsx(RowActions, { entry: entry, actionList: actionList, shared: shared, size: size, emphasis: "row", onAsk: (action) => setAskingId(action.id) }))), _jsx(RowStatus, { item: item, shared: shared, size: size }), thread && rest > 0 && onThreadToggle && (_jsx(Box, { position: "relative", zIndex: 2, mt: 2, children: _jsx(Button, { size: "xs", variant: "link", leftIcon: isThreadOpen ? (_jsx(ChevronDown, { size: iconSizeFor("xs"), "aria-hidden": "true" })) : (_jsx(ChevronRight, { size: iconSizeFor("xs"), "aria-hidden": "true" })), label: isThreadOpen ? labels.threadHide(rest) : labels.threadShow(rest), "aria-expanded": isThreadOpen, "data-testid": testIdFor(entry, "thread"), onClick: () => onThreadToggle(thread) }) }))] }), quick.length > 0 &&
+                        (isPhone ? (_jsx(RowMoreMenu, { entry: entry, items: quick, isOffline: isOffline, label: labels.moreActions(title) })) : (_jsx(RowQuickActions, { entry: entry, items: quick, isOffline: isOffline })))] }) }) }));
+};
+export default memo(NotificationRow);

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { chakra } from "@chakra-ui/react";
+import { CircleAlert } from "lucide-react";
+import { Flex, Icon } from "../../Primitives/Primitives.js";
+import Button from "../../Button/Button.js";
+import InputTextArea from "../../InputTextArea/InputTextArea.js";
+import Kbd from "../../Kbd/Kbd.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { touchTargetFor } from "./rowStyles.js";
+export const ReasonForm = ({ entry, action, labels, size, isOffline, serverMessage, onCancel, onSubmit, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const id = useId();
+    const hintId = `${id}-hint`;
+    const field = useRef(null);
+    const [text, setText] = useState("");
+    const [touched, setTouched] = 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;
+    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 (_jsxs(chakra.form, { noValidate: true, position: "relative", zIndex: 2, display: "grid", gap: 1.5, mt: 2.5, onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, children: [_jsxs(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 && (_jsxs(chakra.span, { fontWeight: 400, color: colors.textMuted, children: [" ", labels.reasonOptional] }))] }), _jsx(InputTextArea, { 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 }), _jsx(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 ? (_jsxs(_Fragment, { children: [_jsx(Icon, { as: CircleAlert, boxSize: "0.75rem", "aria-hidden": "true" }), errorText] })) : (_jsxs(_Fragment, { children: [_jsx(Kbd, { size: "xs", children: labels.keyCtrl }), _jsx(Kbd, { size: "xs", children: labels.keyEnter }), _jsxs("span", { children: [labels.toSend, " \u00B7"] }), _jsx(Kbd, { size: "xs", children: labels.keyEsc }), _jsx("span", { children: labels.toCancel })] })) }), _jsxs(Flex, { justify: "flex-end", gap: 2, children: [_jsx(Button, { size: size, variant: "ghost", colorScheme: "gray", label: labels.cancel, sx: touchTargetFor(size), onClick: onCancel }), _jsx(Button, { type: "submit", size: size, variant: "solid", colorScheme: isNegative ? "red" : "primary", label: action.label, "aria-label": labels.actionName(action.label, entry.subject), isDisabled: isOffline, sx: touchTargetFor(size), "data-testid": entry.testId ? `${entry.testId}-${action.id}-send` : undefined })] })] }));
+};

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronRight, WifiOff } from "lucide-react";
+import { Flex, Icon } from "../../Primitives/Primitives.js";
+import Button from "../../Button/Button.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { isDecision } from "./rowMenu.js";
+import { iconSizeFor, testIdFor, touchTargetFor } from "./rowStyles.js";
+export const OfflineNote = ({ text }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { as: "span", display: "inline-flex", align: "center", gap: 1, fontSize: "xs", color: colors.textMuted, children: [_jsx(Icon, { as: WifiOff, boxSize: "0.75rem", "aria-hidden": "true" }), text] }));
+};
+export const RowActions = ({ entry, actionList, shared, size, emphasis, onAsk }) => {
+    const { labels, actions, isOffline } = shared;
+    const iconPx = iconSizeFor(size);
+    return (_jsxs(Flex, { position: "relative", zIndex: 2, wrap: "wrap", align: "center", gap: 2, mt: emphasis === "row" ? 2.5 : 0, children: [actionList.map((action) => {
+                const isLink = !isDecision(action);
+                const isStrong = emphasis === "detail" && (action.intent === "positive" || action.intent === "primary");
+                return (_jsx(Button, { 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" ? _jsx(Check, { size: iconPx, "aria-hidden": "true" }) : undefined, rightIcon: isLink ? _jsx(ChevronRight, { size: iconPx, "aria-hidden": "true" }) : undefined, isDisabled: isOffline && !isLink, sx: touchTargetFor(size), "data-testid": 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(isDecision) && _jsx(OfflineNote, { text: labels.offlineNote })] }));
+};

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Ellipsis } from "lucide-react";
+import { Flex, Icon } from "../../Primitives/Primitives.js";
+import IconButton from "../../IconButton/IconButton.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import Dropdown from "../../Dropdown/DropDown.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
+import { TOUCH_TARGET_SX, iconSizeFor, testIdFor } from "./rowStyles.js";
+export const QUICK_SELECTOR = "[data-nc-quick]";
+export const RowQuickActions = ({ entry, items, isOffline }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Flex, { "data-nc-quick": "", position: "absolute", top: "0.375rem", right: "0.375rem", zIndex: 2, gap: "0.125rem", p: "0.125rem", borderRadius: RADIUS_ROLE.control, bg: colors.surfaceRaised, border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, boxShadow: "sm", opacity: 0, sx: {
+            transition: transitionFor(["opacity"]),
+            "@media (hover: none)": {
+                position: "relative",
+                top: "auto",
+                right: "auto",
+                opacity: 1,
+                alignSelf: "flex-start",
+                border: "none",
+                boxShadow: "none",
+                bg: "transparent",
+            },
+            ...reducedMotionSx(),
+        }, children: items.map((item) => (_jsx(ToolTip, { label: item.label, children: _jsx(IconButton, { size: "xs", variant: "ghost", colorScheme: "gray", "aria-label": item.label, icon: _jsx(Icon, { as: item.icon, boxSize: `${iconSizeFor("xs") / 16}rem`, "aria-hidden": "true" }), isDisabled: isOffline, "data-testid": testIdFor(entry, item.id), onClick: (event) => {
+                    event.stopPropagation();
+                    item.run();
+                } }) }, item.id))) }));
+};
+export const RowMoreMenu = ({ entry, items, isOffline, label }) => {
+    const trigger = {
+        variant: "ghost",
+        colorScheme: "gray",
+        px: 0,
+        minW: "2.5rem",
+        isDisabled: isOffline,
+        sx: TOUCH_TARGET_SX,
+        "data-testid": testIdFor(entry, "more"),
+    };
+    return (_jsx(Flex, { position: "relative", zIndex: 2, flexShrink: 0, mt: "-0.5rem", mr: "-0.5rem", children: _jsx(Dropdown, { 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: _jsx(Ellipsis, { size: iconSizeFor("md"), "aria-hidden": "true" }), isVisibleIconShow: false, ariaLabel: label, buttonProps: trigger }) }));
+};

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

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { chakra } from "@chakra-ui/react";
+import { CircleAlert, CircleCheck, CircleX, Info, Lock, RefreshCw } from "lucide-react";
+import { Flex, Icon } from "../../Primitives/Primitives.js";
+import Button from "../../Button/Button.js";
+import Spinner from "../../Spinner/Spinner.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../../Theme/tokens/builders/tone.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { iconSizeFor, testIdFor, touchTargetFor } from "./rowStyles.js";
+const StatusLine = ({ tone, icon, role, children }) => {
+    const { colors } = useCustomTheme();
+    const soft = resolveSoftTone(colors, toneScale(colors, tone), colors.surfaceRaised);
+    return (_jsxs(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: 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) => _jsx(Icon, { as: as, boxSize: "0.875rem", flexShrink: 0, "aria-hidden": "true" });
+const LINK_SX = { color: "inherit", fontWeight: 600 };
+export 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 (_jsxs(StatusLine, { tone: "error", icon: glyph(CircleAlert), role: "alert", children: [_jsxs(chakra.span, { fontWeight: 500, children: [_jsx(chakra.strong, { fontWeight: 600, children: labels.couldNot(decision.label) }), " ", error && error.message ? error.message : labels.failedMessage] }), _jsx(Button, { size: size, variant: "outline", colorScheme: "gray", leftIcon: _jsx(RefreshCw, { size: iconSizeFor(size), "aria-hidden": "true" }), label: labels.retry, "aria-label": labels.actionName(labels.retry, entry.subject), isDisabled: isOffline, ml: "auto", sx: touchTargetFor(size), "data-testid": 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 (_jsxs(StatusLine, { tone: "info", icon: glyph(isForbidden ? Lock : Info), children: [_jsx(chakra.span, { fontWeight: 500, children: error && error.message ? error.message : fallback }), _jsx(Button, { size: "xs", variant: "link", label: labels.dismiss, "aria-label": labels.actionName(labels.dismiss, entry.subject), sx: LINK_SX, "data-testid": testIdFor(entry, "dismiss"), onClick: () => actions.dismiss(entry.id) })] }));
+    }
+    const isNegative = decision.intent === "negative";
+    const isSending = state.status === "sending";
+    return (_jsxs(StatusLine, { tone: isNegative ? "neutral" : "success", icon: isSending ? _jsx(Spinner, { size: "xs", color: "currentColor", "aria-hidden": "true" }) : glyph(isNegative ? CircleX : CircleCheck), children: [_jsx(chakra.span, { fontWeight: 500, children: isSending ? labels.sending : decision.doneLabel }), state.status === "undo" && (_jsx(Button, { size: "xs", variant: "link", label: labels.undo, "aria-label": labels.actionName(labels.undo, entry.subject), sx: LINK_SX, "data-testid": testIdFor(entry, "undo"), onClick: () => actions.undo(entry.id) })), decision.reason && (_jsx(chakra.span, { flexBasis: "100%", pl: "1.375rem", fontStyle: "italic", opacity: 0.85, children: labels.reasonQuote(decision.reason) }))] }));
+};

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

@@ -0,0 +1,9 @@
+import { Bell } from "lucide-react";
+import { findCategory } from "../core/grouping.js";
+export const categoryFor = (categories, key, otherLabel) => {
+    var _a;
+    const category = findCategory(categories, key);
+    if (!category)
+        return { label: otherLabel, icon: Bell, tone: "neutral" };
+    return { label: category.label, icon: category.icon, tone: (_a = category.tone) !== null && _a !== void 0 ? _a : "neutral" };
+};

package/dist/esm/Components/NotificationCenter/row/rowMenu.js

@@ -0,0 +1,30 @@
+import { Archive, ArchiveRestore, Mail, MailOpen } from "lucide-react";
+import { threadEntries } from "../core/grouping.js";
+export const rowScope = (item, thread, isThreadOpen) => (thread && !isThreadOpen ? threadEntries(thread) : [item]);
+export const quickActionsFor = (item, scope, shared) => {
+    const { features, labels, actions } = shared;
+    const { entry, state } = item;
+    const ids = scope.map((member) => member.entry.id);
+    const list = [];
+    if (features.markRead && entry.isRead !== undefined) {
+        const unread = scope.some((member) => member.entry.isRead === false);
+        list.push({
+            id: "read",
+            label: unread ? labels.markRead : labels.markUnread,
+            icon: unread ? MailOpen : Mail,
+            run: () => actions.setRead(ids, unread),
+        });
+    }
+    if (features.archive && state.zone === "activity") {
+        list.push({ id: "archive", label: labels.archive, icon: Archive, run: () => actions.archive(ids) });
+    }
+    if (features.restore && state.zone === "archived") {
+        list.push({ id: "restore", label: labels.restore, icon: ArchiveRestore, run: () => actions.restore(ids) });
+    }
+    actions.extraActionsFor(entry).forEach((extra) => {
+        list.push({ id: extra.id, label: extra.label, icon: extra.icon, run: () => actions.runExtraAction(entry, extra) });
+    });
+    return list;
+};
+export const visibleActionsFor = (entry, features) => { var _a; return ((_a = entry.actions) !== null && _a !== void 0 ? _a : []).filter((action) => action.href !== undefined || features.decide); };
+export const isDecision = (action) => action.href === undefined;

package/dist/esm/Components/NotificationCenter/row/rowParts.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { chakra } from "@chakra-ui/react";
+import { ChevronRight, Hourglass, Lock } from "lucide-react";
+import { Box, Flex, Icon, Text } from "../../Primitives/Primitives.js";
+import Avatar from "../../Avatar/Avatar.js";
+import Tag from "../../Tag/Tag.js";
+import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../../Theme/tokens/builders/statusTone.js";
+import { toneScale } from "../../../Theme/tokens/builders/tone.js";
+import { ruleOn } from "../../../Theme/tokens/builders/planeStep.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { NUMERIC_TEXT } from "../../../Theme/tokens/primitives/typography.js";
+export const ROW_PLANE_VAR = "--nc-row-bg";
+export const TitleText = ({ parts, isUnread }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(chakra.span, { color: isUnread ? colors.text[800] : colors.text[700], children: parts.map((part, index) => typeof part === "string" ? (_jsx(Fragment, { children: part }, index)) : (_jsx(chakra.strong, { fontWeight: isUnread ? 600 : 500, color: isUnread ? colors.header[900] : colors.text[800], children: part.b }, index))) }));
+};
+const LEAD_BOX = {
+    "2xs": "1rem",
+    xs: "1.5rem",
+    sm: "2rem",
+    md: "2.5rem",
+    lg: "3rem",
+    xl: "4rem",
+};
+export const useToneTile = (tone) => {
+    const { colors } = useCustomTheme();
+    return resolveStatusTone(toneScale(colors, tone), isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light");
+};
+export const RowLeading = ({ entry, category, size }) => {
+    const tile = useToneTile(category.tone);
+    const iconPx = size === "md" || size === "lg" || size === "xl" ? 18 : 16;
+    if (entry.actor) {
+        return (_jsxs(Box, { position: "relative", flexShrink: 0, boxSize: LEAD_BOX[size], "aria-hidden": "true", children: [_jsx(Avatar, { name: entry.actor.name, src: entry.actor.avatarUrl, size: size }), _jsx(Flex, { position: "absolute", right: "-0.375rem", bottom: "-0.375rem", boxSize: "1.25rem", align: "center", justify: "center", borderRadius: "full", bg: tile.bg, color: tile.fg, border: `${BORDER_WIDTHS.thick} solid var(${ROW_PLANE_VAR})`, children: _jsx(Icon, { as: category.icon, boxSize: "0.625rem", strokeWidth: 2.5 }) })] }));
+    }
+    return (_jsx(Flex, { flexShrink: 0, boxSize: LEAD_BOX[size], align: "center", justify: "center", borderRadius: RADIUS_ROLE.media, bg: tile.bg, color: tile.fg, "aria-hidden": "true", children: _jsx(Icon, { as: category.icon, boxSize: `${iconPx / 16}rem` }) }));
+};
+export const RowTime = ({ at, now, format }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(chakra.time, { dateTime: format.iso(at), title: format.absolute(at, now), flexShrink: 0, fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", sx: NUMERIC_TEXT, children: [_jsx("span", { "aria-hidden": "true", children: format.shortAge(at, now) }), _jsx(VisuallyHidden, { children: format.longAge(at, now) })] }));
+};
+export const RowContext = ({ entry, waitingDays, labels }) => {
+    const { colors } = useCustomTheme();
+    if (waitingDays === null && !entry.blocked && !entry.context)
+        return null;
+    return (_jsxs(Flex, { wrap: "wrap", align: "center", columnGap: 2, rowGap: 1, mt: 1, fontSize: "xs", lineHeight: "1.5", color: colors.textMuted, children: [waitingDays !== null && _jsx(Tag, { size: "xs", tone: "warning", leadingIcon: Hourglass, label: labels.waiting(waitingDays) }), entry.blocked && _jsx(Tag, { size: "xs", tone: "neutral", leadingIcon: Lock, label: labels.noAccess }), entry.context && _jsx(chakra.span, { minW: 0, children: entry.context })] }));
+};
+export const RowPreview = ({ text, isLarge }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Text, { mt: 1.5, pl: 2.5, borderLeft: `${BORDER_WIDTHS.thick} solid ${ruleOn(colors, colors.surfaceRaised)}`, fontSize: isLarge ? "sm" : "xs-plus", lineHeight: "1.5", color: colors.text[700], noOfLines: 2, children: text }));
+};
+export const ChangeChips = ({ change, labels }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { align: "center", wrap: "wrap", gap: 1.5, color: colors.textMuted, children: [_jsx(Tag, { size: "xs", tone: "neutral", label: change.from }), _jsx(Icon, { as: ChevronRight, boxSize: "0.75rem", "aria-hidden": "true" }), _jsx(VisuallyHidden, { children: labels.changedTo }), _jsx(Tag, { size: "xs", colorScheme: "primary", label: change.to })] }));
+};