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

package/dist/esm/Components/NotificationCenter/inbox/NotificationInbox.js

@@ -0,0 +1,396 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Archive, Check, CheckCheck, Inbox, Keyboard, Mail, MailOpen, Settings, SlidersHorizontal, WifiOff } from "lucide-react";
+import Button from "../../Button/Button.js";
+import BulkSelectionBar from "../../BulkSelectionBar/BulkSelectionBar.js";
+import Drawer, { DrawerBody, DrawerHeader } from "../../Drawer/Drawer.js";
+import EmptyState from "../../EmptyState/EmptyState.js";
+import FilteredEmptyState from "../../EmptyState/FilteredEmptyState.js";
+import FilterBar from "../../FilterBar/FilterBar.js";
+import IconButton from "../../IconButton/IconButton.js";
+import PageHeader from "../../PageHeader/PageHeader.js";
+import { Box, Flex, Icon, Text } from "../../Primitives/Primitives.js";
+import Search from "../../Search/Search.js";
+import Select from "../../Select/Select.js";
+import Tabs from "../../Tabs/Tabs.js";
+import ToggleSwitch from "../../ToggleSwitch/ToggleSwitch.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { ruleOn } from "../../../Theme/tokens/builders/planeStep.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { NotificationScope, useNotificationCenter } from "../core/NotificationCenterProvider.js";
+import { groupByCategory, groupByDay, threadEntries } from "../core/grouping.js";
+import NotificationDetail from "../row/NotificationDetail.js";
+import { InboxEmpty, InboxLoadFailure, InboxSkeleton } from "./InboxStates.js";
+import { InboxList } from "./InboxList.js";
+import { ShortcutsDialog } from "./ShortcutsDialog.js";
+import { ALL_TYPES, bulkDecision, filterItems, isShown, isTypingTarget, threadsByLead, visibleRowIds, } from "./inboxModel.js";
+import { withInboxLabels } from "./inboxLabels.js";
+import { useControllable } from "./useControllable.js";
+const TAB_BY_ID = { needsYou: "needsYou", activity: "activity", archived: "archived" };
+const NotificationInboxBody = ({ variant = "desktop", tab: tabProp, onTabChange, selectedId: selectedProp, onSelectedChange, onOpenSettings, labels: labelOverrides, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const center = useNotificationCenter();
+    const { lists, counts, categories, features, format, now, status, isOffline, hasMore, isLoadingMore, appName, actions, find } = center;
+    const labels = useMemo(() => withInboxLabels(center.labels, format, labelOverrides), [center.labels, format, labelOverrides]);
+    const baseId = useId();
+    const isPhone = variant === "phone";
+    const plane = colors.surfaceRaised;
+    const rule = `${BORDER_WIDTHS.hairline} solid ${ruleOn(colors, plane)}`;
+    const outline = `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`;
+    const [tabValue, setTab] = useControllable(tabProp, "needsYou", onTabChange);
+    const [selectedId, setSelectedRaw, isSelectionControlled] = useControllable(selectedProp, null, onSelectedChange);
+    const [query, setQuery] = useState("");
+    const [type, setType] = useState(ALL_TYPES);
+    const [unreadOnly, setUnreadOnly] = useState(false);
+    const [checked, setChecked] = useState(() => new Set());
+    const [openThreads, setOpenThreads] = useState(() => new Set());
+    const [keysOpen, setKeysOpen] = useState(false);
+    const [filtersOpen, setFiltersOpen] = useState(false);
+    const rootRef = useRef(null);
+    const searchRef = useRef(null);
+    const titleRef = useRef(null);
+    const links = useRef(new Map());
+    const linkRefs = useRef(new Map());
+    const pendingFocus = useRef(null);
+    const orderRef = useRef([]);
+    const activeTab = tabValue === "archived" && !features.archive ? "needsYou" : tabValue;
+    const showUnreadOnly = unreadOnly && activeTab !== "needsYou";
+    const selectedItem = selectedId === null ? undefined : find(selectedId);
+    const isDetailOpen = isPhone && selectedItem !== undefined;
+    const isReady = status === "ready";
+    const canSelect = features.decide || features.markRead || features.archive || features.restore;
+    const base = lists[activeTab];
+    const filtered = useMemo(() => filterItems(base, { type, unreadOnly: showUnreadOnly, query, keepId: selectedId }), [base, type, showUnreadOnly, query, selectedId]);
+    const groups = useMemo(() => activeTab === "needsYou"
+        ? groupByCategory(filtered, categories, labels.otherCategory)
+        : groupByDay(filtered, format, now), [activeTab, filtered, categories, labels.otherCategory, format, now]);
+    const visibleItems = useMemo(() => filtered.filter(isShown), [filtered]);
+    const rowIds = useMemo(() => visibleRowIds(groups, openThreads), [groups, openThreads]);
+    const filterCount = (query.trim() === "" ? 0 : 1) + (type === ALL_TYPES ? 0 : 1) + (showUnreadOnly ? 1 : 0);
+    const typeOptions = useMemo(() => {
+        const tally = new Map();
+        base.filter(isShown).forEach(({ entry }) => { var _a; return tally.set(entry.category, ((_a = tally.get(entry.category)) !== null && _a !== void 0 ? _a : 0) + 1); });
+        const present = Object.keys(categories).filter((key) => tally.has(key) || key === type);
+        return [
+            { id: ALL_TYPES, label: labels.allTypes },
+            ...present.map((key) => { var _a; return ({ id: key, label: `${categories[key].label} (${format.number((_a = tally.get(key)) !== null && _a !== void 0 ? _a : 0)})` }); }),
+        ];
+    }, [base, categories, type, labels.allTypes, format]);
+    const visibleIds = useMemo(() => new Set(visibleItems.map((item) => item.entry.id)), [visibleItems]);
+    const leadThreads = useMemo(() => threadsByLead(groups), [groups]);
+    const checkedIds = useMemo(() => [...checked].filter((id) => visibleIds.has(id)), [checked, visibleIds]);
+    const checkedItems = useMemo(() => checkedIds.flatMap((id) => {
+        const item = find(id);
+        if (!item)
+            return [];
+        const thread = leadThreads.get(id);
+        return thread && !openThreads.has(id) ? threadEntries(thread).filter(isShown) : [item];
+    }), [checkedIds, find, leadThreads, openThreads]);
+    const select = (id, isExplicit) => {
+        setSelectedRaw(id);
+        if (id === null || !isExplicit)
+            return;
+        const item = find(id);
+        if (item && item.state.zone === "activity" && item.entry.isRead === false)
+            actions.setRead([id], true);
+        if (isPhone)
+            pendingFocus.current = { kind: "title" };
+    };
+    const clearChecked = () => setChecked(new Set());
+    const clearFilters = () => {
+        setQuery("");
+        setType(ALL_TYPES);
+        setUnreadOnly(false);
+    };
+    const latest = useRef({ select });
+    latest.current = { select };
+    const onOpenRow = useCallback((item) => latest.current.select(item.entry.id, true), []);
+    const onCheckedChange = useCallback((item, isChecked) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            if (isChecked)
+                next.add(item.entry.id);
+            else
+                next.delete(item.entry.id);
+            return next;
+        });
+    }, []);
+    const onThreadToggle = useCallback((thread) => {
+        setOpenThreads((current) => {
+            const next = new Set(current);
+            if (!next.delete(thread.key))
+                next.add(thread.key);
+            return next;
+        });
+    }, []);
+    const linkRefFor = useCallback((id) => {
+        const cached = linkRefs.current.get(id);
+        if (cached)
+            return cached;
+        const ref = (element) => {
+            if (element)
+                links.current.set(id, element);
+            else
+                links.current.delete(id);
+        };
+        linkRefs.current.set(id, ref);
+        return ref;
+    }, []);
+    const goBack = () => {
+        if (selectedId !== null)
+            pendingFocus.current = { kind: "row", id: selectedId };
+        setSelectedRaw(null);
+    };
+    useEffect(() => {
+        clearChecked();
+        setType(ALL_TYPES);
+    }, [activeTab]);
+    useLayoutEffect(() => {
+        var _a, _b;
+        const previous = orderRef.current;
+        orderRef.current = rowIds;
+        if (!isReady)
+            return;
+        if (selectedId === null) {
+            if (!isPhone && !isSelectionControlled && rowIds.length > 0)
+                setSelectedRaw(rowIds[0]);
+            return;
+        }
+        if (!previous.includes(selectedId) || rowIds.includes(selectedId))
+            return;
+        if (isPhone) {
+            if (selectedItem === undefined || selectedItem.state.isHidden || selectedItem.state.zone === "archived") {
+                setSelectedRaw(null);
+            }
+            return;
+        }
+        const index = previous.indexOf(selectedId);
+        const after = previous.slice(index + 1).find((id) => rowIds.includes(id));
+        const before = previous.slice(0, index).reverse().find((id) => rowIds.includes(id));
+        const next = (_a = after !== null && after !== void 0 ? after : before) !== null && _a !== void 0 ? _a : null;
+        const active = document.activeElement;
+        const hadFocus = active === document.body || (((_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.contains(active)) === true && !isTypingTarget(active));
+        if (next !== null && hadFocus)
+            pendingFocus.current = { kind: "row", id: next };
+        setSelectedRaw(next);
+    });
+    useEffect(() => {
+        const pending = pendingFocus.current;
+        if (!pending)
+            return;
+        if (pending.kind === "title" && isDetailOpen && titleRef.current) {
+            pendingFocus.current = null;
+            titleRef.current.focus();
+        }
+        else if (pending.kind === "row" && !isDetailOpen) {
+            const link = links.current.get(pending.id);
+            if (link) {
+                pendingFocus.current = null;
+                link.focus();
+            }
+        }
+    });
+    const filtersKey = `${activeTab}|${type}|${query}|${showUnreadOnly}`;
+    const lastFiltersKey = useRef(filtersKey);
+    useEffect(() => {
+        if (lastFiltersKey.current === filtersKey)
+            return undefined;
+        lastFiltersKey.current = filtersKey;
+        const timer = setTimeout(() => actions.announce(labels.results(visibleItems.length)), 500);
+        return () => clearTimeout(timer);
+    }, [filtersKey, actions, labels, visibleItems.length]);
+    const focusSearch = () => { var _a, _b; return (_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input")) === null || _b === void 0 ? void 0 : _b.focus(); };
+    const move = (direction) => {
+        var _a;
+        if (rowIds.length === 0)
+            return;
+        const index = selectedId === null ? -1 : rowIds.indexOf(selectedId);
+        const next = rowIds[Math.max(0, Math.min(rowIds.length - 1, index < 0 ? 0 : index + direction))];
+        if (!isPhone)
+            select(next, true);
+        (_a = links.current.get(next)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKey = (event) => {
+        var _a, _b, _c;
+        const target = event.target;
+        const inside = target instanceof Node && rootRef.current !== null && rootRef.current.contains(target);
+        if (event.defaultPrevented || keysOpen || filtersOpen || (!inside && target !== document.body))
+            return;
+        const typing = isTypingTarget(target);
+        const isUndo = (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "z";
+        if (typing) {
+            if (event.key === "Escape" && target instanceof HTMLInputElement && ((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                setQuery("");
+                target.blur();
+            }
+            return;
+        }
+        if (isUndo) {
+            if (!actions.undoLast())
+                actions.announce(labels.nothingToUndo);
+            event.preventDefault();
+            return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        const inList = target instanceof Node && ((_c = (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tabpanel"]')) === null || _c === void 0 ? void 0 : _c.contains(target)) === true;
+        const handled = (() => {
+            switch (event.key) {
+                case "/":
+                    focusSearch();
+                    return true;
+                case "j":
+                    move(1);
+                    return true;
+                case "k":
+                    move(-1);
+                    return true;
+                case "ArrowDown":
+                    if (inList)
+                        move(1);
+                    return inList;
+                case "ArrowUp":
+                    if (inList)
+                        move(-1);
+                    return inList;
+                case "?":
+                    setKeysOpen(true);
+                    return true;
+                case "z":
+                    if (!actions.undoLast())
+                        actions.announce(labels.nothingToUndo);
+                    return true;
+                case "Escape":
+                    if (checked.size === 0)
+                        return false;
+                    clearChecked();
+                    return true;
+                default:
+                    break;
+            }
+            if (!selectedItem || isOffline)
+                return false;
+            const { entry, state } = selectedItem;
+            switch (event.key) {
+                case "o":
+                    actions.open(entry);
+                    return true;
+                case "u":
+                    if (!features.markRead || entry.isRead === undefined)
+                        return false;
+                    actions.setRead([entry.id], !entry.isRead);
+                    return true;
+                case "e":
+                    if (state.zone === "activity" && features.archive)
+                        actions.archive([entry.id]);
+                    else if (state.zone === "archived" && features.restore)
+                        actions.restore([entry.id]);
+                    else
+                        return false;
+                    return true;
+                case "x":
+                    if (!canSelect || !visibleIds.has(entry.id))
+                        return false;
+                    onCheckedChange(selectedItem, !checked.has(entry.id));
+                    return true;
+                default:
+                    return false;
+            }
+        })();
+        if (handled)
+            event.preventDefault();
+    };
+    const keyRef = useRef(onKey);
+    keyRef.current = onKey;
+    useEffect(() => {
+        const listener = (event) => keyRef.current(event);
+        document.addEventListener("keydown", listener);
+        return () => document.removeEventListener("keydown", listener);
+    }, []);
+    const unreadHere = visibleItems.some((item) => item.entry.isRead === false);
+    const markAllRead = () => {
+        if (activeTab === "archived")
+            return;
+        actions.markAllRead({
+            zone: activeTab,
+            category: type === ALL_TYPES ? undefined : type,
+            query: query.trim() === "" ? undefined : query.trim(),
+        });
+    };
+    const bulkActions = useMemo(() => {
+        const ids = checkedItems.map((item) => item.entry.id);
+        const afterwards = (run) => () => {
+            run();
+            clearChecked();
+        };
+        const result = [];
+        if (checkedIds.length < visibleItems.length) {
+            result.push({ id: "select-all", label: labels.selectAll, onClick: () => setChecked(new Set(visibleIds)) });
+        }
+        const decision = features.decide ? bulkDecision(checkedItems) : undefined;
+        if (decision) {
+            result.push({
+                id: "decide",
+                label: labels.bulkDecide(decision.label, checkedIds.length),
+                tone: "primary",
+                icon: Check,
+                isDisabled: isOffline,
+                onClick: afterwards(() => actions.decide(ids, decision)),
+            });
+        }
+        const unread = checkedItems.filter((item) => item.entry.isRead === false).map((item) => item.entry.id);
+        const read = checkedItems.filter((item) => item.entry.isRead === true).map((item) => item.entry.id);
+        if (features.markRead && unread.length > 0) {
+            result.push({ id: "read", label: labels.markRead, icon: MailOpen, isDisabled: isOffline, onClick: afterwards(() => actions.setRead(unread, true)) });
+        }
+        else if (features.markRead && read.length > 0) {
+            result.push({ id: "unread", label: labels.markUnread, icon: Mail, isDisabled: isOffline, onClick: afterwards(() => actions.setRead(read, false)) });
+        }
+        if (activeTab === "activity" && features.archive) {
+            result.push({ id: "archive", label: labels.archive, icon: Archive, isDisabled: isOffline, onClick: afterwards(() => actions.archive(ids)) });
+        }
+        if (activeTab === "archived" && features.restore) {
+            result.push({ id: "restore", label: labels.restore, icon: Archive, isDisabled: isOffline, onClick: afterwards(() => actions.restore(ids)) });
+        }
+        return result;
+    }, [checkedItems, checkedIds.length, visibleItems.length, visibleIds, features, labels, isOffline, activeTab, actions]);
+    const tabItems = [
+        { id: "needsYou", label: labels.needsYouTab, count: counts.needsYou > 0 ? counts.needsYou : undefined },
+        { id: "activity", label: labels.activityTab, count: counts.unread > 0 ? counts.unread : undefined },
+        ...(features.archive ? [{ id: "archived", label: labels.archivedTab }] : []),
+    ];
+    const typeSelect = (_jsx(Select, { native: false, isSearchable: false, size: isPhone ? "md" : "sm", "aria-label": labels.typeFilter, options: typeOptions, value: type, isDisabled: !isReady, width: isPhone ? "100%" : "11rem", onChange: (option) => setType(option === undefined ? ALL_TYPES : String(option.id)) }));
+    const unreadSwitch = activeTab !== "needsYou" && (_jsx(ToggleSwitch, { size: isPhone ? "md" : "sm", label: labels.unreadOnly, isChecked: showUnreadOnly, isDisabled: !isReady, onChange: setUnreadOnly }));
+    const search = (_jsx(Box, { ref: searchRef, minW: isPhone ? 0 : "15rem", flex: isPhone ? 1 : undefined, children: _jsx(Search, { size: isPhone ? "md" : "sm", placeholder: labels.search, "aria-label": labels.search, shortcut: false, query: query, isDisabled: !isReady, onSearch: (event) => setQuery(event.target.value), onClear: () => {
+                setQuery("");
+                focusSearch();
+            } }) }));
+    const bulkBar = (_jsx(BulkSelectionBar, { placement: "inline", selectedCount: checkedIds.length, countLabel: labels.selected(checkedIds.length), actions: bulkActions, clearLabel: labels.clearSelection, onClearSelection: clearChecked, "data-testid": testId ? `${testId}-bulk` : undefined }));
+    const toolbar = checkedIds.length > 0 ? (_jsx(Box, { flex: 1, minW: 0, py: 2, children: bulkBar })) : isPhone ? (_jsxs(Flex, { gap: 2, align: "center", w: "100%", py: 2, children: [search, _jsxs(Box, { position: "relative", flexShrink: 0, children: [_jsx(IconButton, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.filters, "aria-haspopup": "dialog", icon: _jsx(Icon, { as: SlidersHorizontal, boxSize: 5, "aria-hidden": "true" }), onClick: () => setFiltersOpen(true) }), (type !== ALL_TYPES || showUnreadOnly) && (_jsx(Box, { position: "absolute", top: 2, right: 2, boxSize: 2, borderRadius: "full", bg: colors.primary[500], "aria-hidden": "true" }))] })] })) : (_jsx(Box, { ml: "auto", py: 2, children: _jsxs(FilterBar, { search: search, searchLabel: labels.search, children: [typeSelect, unreadSwitch] }) }));
+    const showMarkAll = features.markAllRead && isReady && activeTab !== "archived";
+    const headerActions = (_jsxs(_Fragment, { children: [showMarkAll &&
+                (isPhone ? (_jsx(ToolTip, { label: labels.markAllRead, children: _jsx(IconButton, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.markAllRead, icon: _jsx(Icon, { as: CheckCheck, boxSize: 5, "aria-hidden": "true" }), isDisabled: !unreadHere || isOffline, onClick: markAllRead }) })) : (_jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", leftIcon: _jsx(CheckCheck, { size: 16, "aria-hidden": "true" }), label: labels.markAllRead, isDisabled: !unreadHere || isOffline, onClick: markAllRead }))), !isPhone && (_jsx(ToolTip, { label: labels.keyboardShortcuts, children: _jsx(IconButton, { size: "sm", variant: "ghost", colorScheme: "gray", "aria-label": labels.keyboardShortcuts, icon: _jsx(Icon, { as: Keyboard, boxSize: 4, "aria-hidden": "true" }), onClick: () => setKeysOpen(true) }) })), onOpenSettings && (_jsx(ToolTip, { label: labels.settings, children: _jsx(IconButton, { size: isPhone ? "md" : "sm", variant: "ghost", colorScheme: "gray", "aria-label": labels.settings, icon: _jsx(Icon, { as: Settings, boxSize: isPhone ? 5 : 4, "aria-hidden": "true" }), onClick: onOpenSettings }) }))] }));
+    const loadMore = hasMore && features.loadMore ? (_jsx(Flex, { justify: "center", p: 3, children: _jsx(Button, { size: isPhone ? "md" : "sm", variant: "outline", colorScheme: "gray", label: labels.loadMore, isLoading: isLoadingMore, onClick: actions.loadMore }) })) : null;
+    let listBody;
+    if (status === "loading")
+        listBody = _jsx(InboxSkeleton, { isPhone: isPhone, label: labels.loading });
+    else if (status === "error" || status === "noAccess") {
+        listBody = _jsx(InboxLoadFailure, { kind: status, labels: labels, appName: appName, onRetry: actions.retryLoad });
+    }
+    else if (visibleItems.length === 0) {
+        listBody =
+            filterCount > 0 && base.some(isShown) ? (_jsxs(_Fragment, { children: [_jsx(FilteredEmptyState, { scale: "card", filterCount: filterCount, onClearFilters: clearFilters }), loadMore] })) : (_jsxs(_Fragment, { children: [_jsx(InboxEmpty, { tab: activeTab, labels: labels }), loadMore] }));
+    }
+    else {
+        listBody = (_jsxs(_Fragment, { children: [_jsx(InboxList, { groups: groups, isPhone: isPhone, selectedId: selectedId, checked: checked, openThreads: openThreads, idPrefix: baseId, onOpenRow: onOpenRow, onCheckedChange: canSelect ? onCheckedChange : undefined, onThreadToggle: onThreadToggle, linkRefFor: linkRefFor }), loadMore] }));
+    }
+    const detail = selectedItem ? (_jsx(NotificationDetail, { item: selectedItem, variant: isPhone ? "phone" : "desktop", onBack: goBack, titleRef: titleRef }, selectedItem.entry.id)) : (_jsx(EmptyState, { size: "md", icon: Inbox, colorScheme: "gray", title: labels.nothingSelected, description: labels.nothingSelectedHint, minH: "100%" }));
+    const scroll = scrollbarStyles(colors, "hover");
+    return (_jsxs(Flex, { ref: rootRef, direction: "column", h: "100%", minH: isPhone ? undefined : "32rem", "data-testid": testId, children: [_jsxs(Box, { display: isDetailOpen ? "none" : "block", flexShrink: 0, px: isPhone ? 4 : 0, pt: isPhone ? 4 : 0, pb: isPhone ? 3 : 0, children: [_jsx(PageHeader, { title: labels.title, subtitle: isReady ? labels.subtitle(counts) : appName, actions: headerActions }), isOffline && (_jsxs(Flex, { align: "flex-start", gap: 2, mt: 3, px: 4, py: 2, fontSize: "xs", bg: colors.backgroundColor.subtle, color: colors.text[800], borderRadius: isPhone ? undefined : RADIUS_ROLE.control, children: [_jsx(Icon, { as: WifiOff, boxSize: 3.5, mt: 0.5, "aria-hidden": "true" }), _jsx(Text, { children: labels.offlineMessage })] }))] }), _jsxs(Flex, { direction: "column", flex: 1, minH: 0, mt: isPhone ? 0 : 4, bg: plane, border: isPhone ? undefined : outline, borderRadius: isPhone ? undefined : RADIUS_ROLE.card, overflow: "hidden", children: [_jsxs(Flex, { display: isDetailOpen ? "none" : "flex", flexShrink: 0, direction: isPhone ? "column" : "row", wrap: "wrap", align: isPhone ? "stretch" : "flex-end", justify: "space-between", columnGap: 4, px: isPhone ? 2 : 3, pt: isPhone ? 0 : 2, pb: 0, borderBottom: rule, children: [_jsx(Tabs, { id: baseId, "aria-label": labels.listsLabel, size: isPhone ? "md" : "sm", items: tabItems, value: activeTab, onChange: (value) => setTab(TAB_BY_ID[value]) }), toolbar] }), _jsxs(Flex, { flex: 1, minH: 0, display: isDetailOpen ? "none" : "flex", children: [_jsx(Box, { role: "tabpanel", id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${activeTab}`, "aria-busy": status === "loading" ? true : undefined, flex: isPhone ? 1 : undefined, w: isPhone ? undefined : "clamp(17.5rem, 32%, 22.5rem)", flexShrink: 0, minW: 0, overflowY: "auto", borderRight: isPhone ? undefined : rule, pt: 1, sx: scroll, children: listBody }), !isPhone && (_jsx(Box, { flex: 1, minW: 0, overflowY: "auto", sx: scroll, children: isReady ? detail : null }))] }), isDetailOpen && (_jsx(Box, { flex: 1, overflowY: "auto", sx: scroll, children: detail }))] }), _jsx(ShortcutsDialog, { isOpen: keysOpen, onClose: () => setKeysOpen(false), labels: labels }), isPhone && (_jsxs(Drawer, { isOpen: filtersOpen, onClose: () => setFiltersOpen(false), placement: "bottom", size: "md", children: [_jsx(DrawerHeader, { children: labels.filters }), _jsx(DrawerBody, { children: _jsxs(Flex, { direction: "column", gap: 4, children: [typeSelect, unreadSwitch] }) })] }))] }));
+};
+/** Full-page inbox: Needs you, Activity and Archived tabs, search, a type filter, bulk actions and a reading pane. */
+const NotificationInbox = (props) => (_jsx(NotificationScope, { source: props, children: _jsx(NotificationInboxBody, { ...props }) }));
+export default NotificationInbox;

package/dist/esm/Components/NotificationCenter/inbox/NotificationInboxProps.js

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

package/dist/esm/Components/NotificationCenter/inbox/ShortcutsDialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Flex, Text } from "../../Primitives/Primitives.js";
+import Kbd from "../../Kbd/Kbd.js";
+import Modal, { ModalBody } from "../../Modal/Modal.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+export const ShortcutsDialog = ({ isOpen, onClose, labels }) => {
+    const { colors } = useCustomTheme();
+    const rows = [
+        [["j", "↓"], labels.shortcuts.next],
+        [["k", "↑"], labels.shortcuts.previous],
+        [[labels.keyEnter], labels.shortcuts.show],
+        [["o"], labels.shortcuts.openInApp],
+        [["u"], labels.shortcuts.toggleRead],
+        [["e"], labels.shortcuts.archive],
+        [["x"], labels.shortcuts.select],
+        [["z"], labels.shortcuts.undo],
+        [["/"], labels.shortcuts.search],
+        [[labels.keyEsc], labels.shortcuts.clear],
+        [["?"], labels.shortcuts.help],
+    ];
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "sm", isCentered: true, title: labels.keyboardShortcuts, subtitle: labels.shortcutsHint, children: _jsx(ModalBody, { children: _jsx(Flex, { as: "dl", direction: "column", gap: 2, m: 0, children: rows.map(([keys, name]) => (_jsxs(Flex, { justify: "space-between", align: "center", gap: 4, children: [_jsx(Text, { as: "dt", fontSize: "sm", color: colors.text[800], children: name }), _jsx(Flex, { as: "dd", gap: 1, align: "center", m: 0, children: keys.map((key, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Text, { color: colors.textMuted, children: "/" }), _jsx(Kbd, { children: key })] }, key))) })] }, name))) }) }) }));
+};

package/dist/esm/Components/NotificationCenter/inbox/inboxLabels.js

@@ -0,0 +1,52 @@
+import { mergeDefined } from "../core/labels.js";
+export const withInboxLabels = (shared, format, overrides = {}) => mergeDefined({
+    ...shared,
+    title: "Inbox",
+    subtitle: ({ needsYou, unread }) => `${format.number(needsYou)} need you · ${format.number(unread)} unread`,
+    listsLabel: "Inbox lists",
+    needsYouTab: "Needs you",
+    activityTab: "Activity",
+    archivedTab: "Archived",
+    search: "Search notifications",
+    typeFilter: "Type",
+    allTypes: "All types",
+    unreadOnly: "Unread only",
+    filters: "Filters",
+    markAllRead: "Mark all read",
+    settings: "Notification settings",
+    keyboardShortcuts: "Keyboard shortcuts",
+    shortcutsHint: "They work when focus is in the inbox, not while typing.",
+    shortcuts: {
+        next: "Next notification",
+        previous: "Previous notification",
+        show: "Show the details",
+        openInApp: "Open in the app",
+        toggleRead: "Mark as read or unread",
+        archive: "Archive",
+        select: "Select",
+        undo: "Undo the last action",
+        search: "Search",
+        clear: "Clear selection",
+        help: "Show these shortcuts",
+    },
+    selected: (count) => `${format.number(count)} selected`,
+    selectAll: "Select all",
+    clearSelection: "Clear selection",
+    bulkDecide: (actionLabel, count) => `${actionLabel} ${format.number(count)}`,
+    nothingSelected: "Nothing selected",
+    nothingSelectedHint: "Pick a notification to read it here.",
+    nothingToUndo: "Nothing to undo",
+    results: (count) => (count === 1 ? "1 result" : `${format.number(count)} results`),
+    caughtUpTitle: "You're all caught up",
+    caughtUpBody: "Nothing is waiting for your decision.",
+    activityEmptyTitle: "No activity yet",
+    activityEmptyBody: "Updates about your work and requests show up here.",
+    archivedEmptyTitle: "Nothing archived",
+    archivedEmptyBody: "Archived notifications stay here until you move them back.",
+    loadErrorTitle: "Couldn't load notifications",
+    loadErrorBody: "Check your connection, then try again. Nothing you did was lost.",
+    noAccessTitle: "Notifications aren't turned on for you",
+    noAccessBody: (appName) => `Your ${appName !== null && appName !== void 0 ? appName : "app"} admin hasn't given your role access to notifications in this workspace.`,
+    loading: "Loading notifications",
+    loadMore: "Load more",
+}, overrides);

package/dist/esm/Components/NotificationCenter/inbox/inboxModel.js

@@ -0,0 +1,37 @@
+import { matchesNotificationQuery, threadEntries } from "../core/grouping.js";
+export const ALL_TYPES = "all";
+export const filterItems = (items, filters) => items.filter(({ entry }) => (filters.type === ALL_TYPES || entry.category === filters.type) &&
+    (!filters.unreadOnly || entry.isRead === false || entry.id === filters.keepId) &&
+    matchesNotificationQuery(entry, filters.query));
+export const isShown = (item) => !item.state.isHidden;
+export const visibleRowIds = (groups, openThreads) => groups.flatMap((group) => group.threads.flatMap((thread) => {
+    const rows = openThreads.has(thread.key) ? threadEntries(thread) : [thread.lead];
+    return rows.filter(isShown).map((item) => item.entry.id);
+}));
+export const threadsByLead = (groups) => new Map(groups.flatMap((group) => group.threads.map((thread) => [thread.key, thread])));
+export const bulkDecision = (items) => {
+    var _a, _b;
+    const quick = (action) => action.href === undefined && action.reason === undefined;
+    const candidate = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.entry.actions) === null || _b === void 0 ? void 0 : _b.find((action) => quick(action) && action.intent === "positive");
+    if (!candidate)
+        return undefined;
+    const everyone = items.every(({ entry, state }) => {
+        var _a;
+        return state.zone === "needsYou" &&
+            state.status === "open" &&
+            ((_a = entry.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === candidate.id && quick(action)));
+    });
+    return everyone ? candidate : undefined;
+};
+export const tabZoneMatches = (tab, item) => (item.state.zone === "archived") === (tab === "archived");
+const TYPING_ROLES = '[role="combobox"],[role="listbox"],[role="menu"],[role="textbox"],[role="searchbox"]';
+const NON_TEXT_INPUTS = ["checkbox", "radio", "button", "submit"];
+export const isTypingTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable || target.closest(TYPING_ROLES))
+        return true;
+    if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)
+        return true;
+    return target instanceof HTMLInputElement && !NON_TEXT_INPUTS.includes(target.type);
+};

package/dist/esm/Components/NotificationCenter/inbox/useControllable.js

@@ -0,0 +1,11 @@
+import { useCallback, useState } from "react";
+export const useControllable = (controlled, initial, onChange) => {
+    const [inner, setInner] = useState(initial);
+    const isControlled = controlled !== undefined;
+    const set = useCallback((next) => {
+        if (!isControlled)
+            setInner(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
+    return [isControlled ? controlled : inner, set, isControlled];
+};

package/dist/esm/Components/NotificationCenter/index.js

@@ -0,0 +1,8 @@
+export { NotificationCenterProvider, useNotificationCenter } from "./core/NotificationCenterProvider.js";
+export { isNotificationActionError, notificationActionError, toNotificationActionError } from "./core/actionError.js";
+export { DEFAULT_NOTIFICATION_LOCALE, defaultNotificationLabels } from "./core/labels.js";
+export { default as NotificationRow } from "./row/NotificationRow.js";
+export { default as NotificationDetail } from "./row/NotificationDetail.js";
+export { default as NotificationCenter } from "./center/NotificationCenter.js";
+export { default as NotificationInbox } from "./inbox/NotificationInbox.js";
+export { default as NotificationPreferences } from "./preferences/NotificationPreferences.js";

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { AlertTriangle, Check, Lock, RotateCw, WifiOff } from "lucide-react";
+import { Alert, AlertDescription, Box, Flex, Text } from "../../Primitives/Primitives.js";
+import Card from "../../Card/Card.js";
+import PageHeader from "../../PageHeader/PageHeader.js";
+import SettingRow from "../../SettingRow/SettingRow.js";
+import SettingsSection from "../../SettingRow/SettingsSection.js";
+import SegmentedControl from "../../SegmentedControl/SegmentedControl.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import Spinner from "../../Spinner/Spinner.js";
+import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.js";
+import Button from "../../Button/Button.js";
+import EmptyState from "../../EmptyState/EmptyState.js";
+import { useToaster } from "../../Toaster/Toaster.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import PreferenceGroups from "./PreferenceGroups.js";
+import { resolvePreferencesLabels } from "./preferencesLabels.js";
+import { useAutosave } from "./useAutosave.js";
+const EMAIL_KEY = "email-summary";
+const SaveStatus = ({ isSaving, hasSaved, labels }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { role: "status", align: "center", gap: 1.5, fontSize: "xs", color: hasSaved && !isSaving ? colors.semanticText.success : colors.textMuted, fontWeight: hasSaved && !isSaving ? 500 : 400, children: [isSaving && _jsx(Spinner, { size: "xs", label: "" }), !isSaving && hasSaved && _jsx(Check, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: isSaving ? labels.saving : hasSaved ? labels.saved : labels.autosave })] }));
+};
+const Banner = ({ icon, children }) => (_jsxs(Alert, { status: "info", borderRadius: "lg", alignItems: "flex-start", children: [_jsx(Box, { mt: 0.5, mr: 2, flexShrink: 0, children: icon }), _jsx(AlertDescription, { fontSize: "sm", children: children })] }));
+const SkeletonCard = ({ rows }) => (_jsx(Card, { header: _jsx(Skeletons, { type: "skeleton", height: "1rem", width: "8rem" }), children: _jsx(Flex, { direction: "column", gap: 5, children: Array.from({ length: rows }, (_, index) => (_jsxs(Flex, { justify: "space-between", align: "center", gap: 4, children: [_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", height: "0.875rem", width: "9rem" }), _jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "14rem" })] }), _jsx(Skeletons, { type: "skeleton", height: "1rem", width: "6rem" })] }, index))) }) }));
+/** Notification settings: a type-by-channel grid with locked cells and an email summary choice; every change autosaves and rolls back on failure. */
+const NotificationPreferences = ({ channels, groups, values, onChange, emailSummary, onEmailSummaryChange, status = "ready", onRetry, isOffline = false, note, appName, variant = "desktop", labels: labelOverrides, "data-testid": testId, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const { showToast } = useToaster();
+    const labels = useMemo(() => resolvePreferencesLabels(labelOverrides), [labelOverrides]);
+    const saved = useMemo(() => ({ values, emailSummary }), [values, emailSummary]);
+    const notifyFailed = useCallback((what) => showToast({ status: "error", title: labels.saveFailed(what) }), [showToast, labels]);
+    const { draft, pendingKeys, hasSaved, commit } = useAutosave(saved, notifyFailed);
+    const isFrozen = status !== "ready" || isOffline;
+    const isReadOnly = status === "readOnly";
+    const pagePadding = variant === "phone" ? 4 : 6;
+    const cellKey = (rowId, channelId) => `cell:${rowId}:${channelId}`;
+    const valueOf = (rowId, channelId) => {
+        const pending = draft[cellKey(rowId, channelId)];
+        if (typeof pending === "boolean")
+            return pending;
+        const row = values[rowId];
+        return Boolean(row && row[channelId]);
+    };
+    const isPending = (rowId, channelId) => pendingKeys.includes(cellKey(rowId, channelId));
+    const toggle = (row, channel, next) => commit(cellKey(row.id, channel.id), next, () => onChange(row.id, channel.id, next), `${row.label} by ${channel.label.toLowerCase()}`);
+    const shownEmail = (_a = draft[EMAIL_KEY]) !== null && _a !== void 0 ? _a : emailSummary;
+    const changeEmail = (next) => {
+        if (!onEmailSummaryChange || next === shownEmail)
+            return;
+        commit(EMAIL_KEY, next, () => onEmailSummaryChange(next), labels.email);
+    };
+    const header = (_jsx(PageHeader, { title: labels.title, subtitle: labels.subtitle(appName), actions: status === "ready" && !isOffline ? _jsx(SaveStatus, { isSaving: pendingKeys.length > 0, hasSaved: hasSaved, labels: labels }) : undefined, actionsLayout: "inline" }));
+    if (status === "loading") {
+        return (_jsxs(Flex, { direction: "column", gap: 5, px: pagePadding, py: 5, maxW: "57.5rem", "aria-busy": "true", "data-testid": testId, children: [header, _jsx(VisuallyHidden, { role: "status", children: labels.loading }), _jsx(SkeletonCard, { rows: 1 }), _jsx(SkeletonCard, { rows: 4 })] }));
+    }
+    if (status === "error") {
+        return (_jsxs(Flex, { direction: "column", gap: 5, px: pagePadding, py: 5, maxW: "57.5rem", "data-testid": testId, children: [header, _jsx(Box, { role: "alert", w: "100%", children: _jsx(EmptyState, { colorScheme: "error", icon: AlertTriangle, titleAs: "h2", title: labels.errorTitle, description: labels.errorDescription, size: "md", action: _jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", label: labels.retry, leftIcon: _jsx(RotateCw, { size: 16 }), onClick: onRetry }) }) })] }));
+    }
+    return (_jsxs(Flex, { direction: "column", gap: 5, px: pagePadding, py: 5, maxW: "57.5rem", "data-testid": testId, children: [header, isReadOnly && _jsx(Banner, { icon: _jsx(Lock, { size: 16, "aria-hidden": "true" }), children: labels.readOnlyBanner }), isOffline && _jsx(Banner, { icon: _jsx(WifiOff, { size: 16, "aria-hidden": "true" }), children: labels.offlineBanner }), shownEmail && (_jsx(SettingsSection, { title: labels.email, children: _jsx(SettingRow, { title: labels.emailTiming, description: labels.emailHint(appName), control: _jsx(SegmentedControl, { "aria-label": labels.emailTiming, options: [
+                            { value: "asItHappens", label: labels.asItHappens, isDisabled: isFrozen },
+                            { value: "daily", label: labels.daily, isDisabled: isFrozen },
+                        ], value: shownEmail, onChange: changeEmail }) }) })), _jsx(PreferenceGroups, { channels: channels, groups: groups, labels: labels, variant: variant, isFrozen: isFrozen, valueOf: valueOf, isPending: isPending, onToggle: toggle, testId: testId }), note && (_jsxs(Flex, { align: "flex-start", gap: 1.5, maxW: "72ch", fontSize: "xs", color: colors.textMuted, children: [_jsx(Box, { mt: 0.5, flexShrink: 0, children: _jsx(Lock, { size: 12, "aria-hidden": "true" }) }), _jsx(Text, { children: note })] }))] }));
+};
+export default NotificationPreferences;

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

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