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

package/dist/esm/Components/NotificationCenter/center/CenterPanel.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { CheckCheck, ChevronRight, ChevronUp, Settings, WifiOff, X } from "lucide-react";
+import { Box, Flex, Heading, Icon } from "../../Primitives/Primitives.js";
+import Button from "../../Button/Button.js";
+import IconButton from "../../IconButton/IconButton.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import Tabs from "../../Tabs/Tabs.js";
+import { tabId } from "../../Tabs/TabsContext.js";
+import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { resolveFilledSurface } from "../../../Theme/tokens/builders/filledSurface.js";
+import { resolveSoftTone, toneScale } from "../../../Theme/tokens/builders/tone.js";
+import { insetFocusRingShadow } from "../../../Theme/chakra/focusRing.styles.js";
+import { useNotificationCenter } from "../core/NotificationCenterProvider.js";
+import { groupByCategory, groupByDay } from "../core/grouping.js";
+import { PanelEmpty, PanelError, PanelNoAccess, PanelSkeleton } from "./PanelStates.js";
+import { PanelRows } from "./PanelRows.js";
+import { useArrivals } from "./useArrivals.js";
+export const PANEL_ROW_LIMIT = 20;
+const TAB_COUNT_CAP = 99;
+const CenterPanel = forwardRef(function CenterPanel({ isSheet, tab, onTabChange, labels, titleId, onClose, onOpenInbox, onOpenSettings, "data-testid": testId }, ref) {
+    const { colors } = useCustomTheme();
+    const center = useNotificationCenter();
+    const { lists, counts, categories, features, format, now, status, isOffline, loadedAt, appName, actions } = center;
+    const bodyRef = useRef(null);
+    const all = tab === "needsYou" ? lists.needsYou : lists.activity;
+    const ids = useMemo(() => all.map((item) => item.entry.id), [all]);
+    const { heldIds, reveal, track } = useArrivals(ids, tab, bodyRef);
+    const visible = useMemo(() => {
+        const held = new Set(heldIds);
+        return all.slice(0, PANEL_ROW_LIMIT).filter((item) => !held.has(item.entry.id));
+    }, [all, heldIds]);
+    const groups = useMemo(() => tab === "needsYou"
+        ? groupByCategory(visible, categories, center.labels.otherCategory)
+        : groupByDay(visible, format, now), [tab, visible, categories, center.labels.otherCategory, format, now]);
+    const isReady = status === "ready";
+    const hasUnreadHere = all.some((item) => item.entry.isRead === false && !item.state.isHidden);
+    const canMarkAll = tab === "activity" ? counts.unread > 0 || hasUnreadHere : hasUnreadHere;
+    const cap = (count) => (count > TAB_COUNT_CAP ? labels.overflowCount(TAB_COUNT_CAP) : format.number(count));
+    const tabItems = [
+        { id: "needsYou", label: labels.needsYouTab, count: isReady && counts.needsYou > 0 ? cap(counts.needsYou) : undefined },
+        { id: "activity", label: labels.activityTab, count: isReady && counts.unread > 0 ? cap(counts.unread) : undefined },
+    ];
+    const openItem = useCallback((item, event) => {
+        actions.open(item.entry, event);
+        onClose();
+    }, [actions, onClose]);
+    const pill = resolveFilledSurface(colors.primary, colors);
+    const banner = resolveSoftTone(colors, toneScale(colors, "neutral"), colors.surfaceRaised);
+    const rule = raisedRule(colors);
+    const toolSize = isSheet ? "md" : "sm";
+    const iconPx = isSheet ? 18 : 16;
+    const markAll = () => actions.markAllRead({ zone: tab });
+    let content;
+    if (status === "loading")
+        content = _jsx(PanelSkeleton, { isSheet: isSheet });
+    else if (status === "error")
+        content = _jsx(PanelError, { labels: labels, onRetry: actions.retryLoad });
+    else if (status === "noAccess")
+        content = _jsx(PanelNoAccess, { labels: labels, appName: appName });
+    else if (groups.length === 0)
+        content = _jsx(PanelEmpty, { labels: labels, tab: tab });
+    else
+        content = _jsx(PanelRows, { groups: groups, variant: isSheet ? "phone" : "panel", format: format, onOpenItem: openItem });
+    return (_jsxs(Flex, { ref: ref, direction: "column", flex: 1, minH: 0, w: "100%", bg: colors.surfaceRaised, color: colors.text[800], "data-testid": testId, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexShrink: 0, minH: isSheet ? "3.5rem" : "3rem", pl: 4, pr: 2, pt: 2, pb: 1, children: [_jsx(Heading, { as: "h2", id: titleId, fontSize: "1rem", fontWeight: 600, lineHeight: "1.5", color: colors.header[900], children: labels.title }), _jsxs(Flex, { align: "center", gap: 1, children: [isReady && features.markAllRead && (isSheet ? (_jsx(ToolTip, { label: labels.markAllRead, children: _jsx(IconButton, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.markAllRead, icon: _jsx(Icon, { as: CheckCheck, boxSize: "1.125rem", "aria-hidden": "true" }), isDisabled: isOffline || !canMarkAll, onClick: markAll }) })) : (_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", label: labels.markAllRead, leftIcon: _jsx(CheckCheck, { size: iconPx, "aria-hidden": "true" }), isDisabled: isOffline || !canMarkAll, onClick: markAll }))), onOpenSettings && (_jsx(ToolTip, { label: labels.settings, children: _jsx(IconButton, { size: toolSize, variant: "ghost", colorScheme: "gray", "aria-label": labels.settings, icon: _jsx(Icon, { as: Settings, boxSize: `${iconPx / 16}rem`, "aria-hidden": "true" }), onClick: onOpenSettings }) })), isSheet && (_jsx(IconButton, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.close, icon: _jsx(Icon, { as: X, boxSize: "1.125rem", "aria-hidden": "true" }), onClick: onClose }))] })] }), isOffline && (_jsxs(Flex, { role: "status", align: "flex-start", gap: 2, flexShrink: 0, px: 4, py: 2, fontSize: "xs", lineHeight: "1.5", bg: banner.bg, color: banner.fg, borderBottom: `1px solid ${rule}`, children: [_jsx(Icon, { as: WifiOff, boxSize: "0.875rem", mt: "0.125rem", "aria-hidden": "true" }), _jsx("span", { children: labels.offlineBanner(loadedAt === undefined ? undefined : format.absolute(loadedAt, now)) })] })), _jsx(Box, { px: 2, flexShrink: 0, children: _jsx(Tabs, { id: `${titleId}-tabs`, items: tabItems, value: tab, onChange: (value) => onTabChange(value), variant: "line", size: isSheet ? "md" : "sm", isFitted: true, "aria-label": labels.tabsLabel }) }), _jsxs(Box, { ref: bodyRef, role: "tabpanel", "aria-labelledby": tabId(`${titleId}-tabs`, tab), "aria-busy": status === "loading" ? true : undefined, tabIndex: -1, flex: 1, minH: 0, overflowY: "auto", position: "relative", sx: {
+                    overscrollBehavior: "contain",
+                    ...scrollbarStyles(colors, "hover"),
+                    "&:focus-visible": { outline: "none", boxShadow: insetFocusRingShadow(colors) },
+                }, ...track, children: [heldIds.length > 0 && (_jsx(Box, { position: "sticky", top: 2, zIndex: 5, h: 0, display: "flex", justifyContent: "center", pointerEvents: "none", children: _jsx(Button, { size: isSheet ? "md" : "xs", mt: 2, h: isSheet ? undefined : "1.75rem", borderRadius: "full", "aria-label": labels.newCountName(heldIds.length), leftIcon: _jsx(ChevronUp, { size: 14, "aria-hidden": "true" }), label: labels.newCount(heldIds.length), onClick: reveal, sx: {
+                                bg: pill.fill,
+                                color: pill.color,
+                                boxShadow: "md",
+                                pointerEvents: "auto",
+                                "&:hover:not(:disabled)": { bg: pill.hoverFill, color: pill.hoverColor },
+                                "&:active:not(:disabled)": { bg: pill.activeFill, color: pill.activeColor },
+                            } }) })), status === "loading" && _jsx(VisuallyHidden, { children: labels.loading }), content] }), onOpenInbox && (_jsx(Flex, { flexShrink: 0, p: 2, borderTop: `1px solid ${rule}`, children: _jsx(Button, { size: isSheet ? "md" : "sm", variant: "ghost", colorScheme: "gray", width: "100%", label: labels.openInbox, rightIcon: _jsx(ChevronRight, { size: iconPx, "aria-hidden": "true" }), onClick: onOpenInbox }) }))] }));
+});
+export default CenterPanel;

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Box, Popover, PopoverContent, PopoverTrigger, Portal } from "../../Primitives/Primitives.js";
+import Drawer, { DrawerBody } from "../../Drawer/Drawer.js";
+import NotificationBell from "../../NotificationBell/NotificationBell.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { RADIUS_ROLE } from "../../../Theme/tokens/primitives/radii.js";
+import { NotificationScope, useNotificationCenter } from "../core/NotificationCenterProvider.js";
+import { withCenterLabels } from "./centerLabels.js";
+import { useIsSheet } from "./useIsSheet.js";
+import CenterPanel from "./CenterPanel.js";
+const TOAST_SELECTOR = '[id^="chakra-toast-manager"]';
+const TAB_SELECTOR = '[role="tab"][aria-selected="true"]';
+const CenterBody = ({ variant, isOpen, onOpenChange, defaultTab, labels: overrides, onOpenInbox, onOpenSettings, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const { counts, labels, format, lists, status, actions } = useNotificationCenter();
+    const text = useMemo(() => withCenterLabels(labels, format, overrides), [labels, format, overrides]);
+    const isSheet = useIsSheet(variant);
+    const titleId = useId();
+    const bellRef = useRef(null);
+    const panelRef = useRef(null);
+    const [ownOpen, setOwnOpen] = useState(false);
+    const open = isOpen === undefined ? ownOpen : isOpen;
+    const setOpen = useCallback((next) => {
+        setOwnOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    const startTab = () => {
+        if (defaultTab !== undefined)
+            return defaultTab;
+        const holdsAny = lists.needsYou.some((item) => !item.state.isHidden);
+        return status !== "ready" || holdsAny ? "needsYou" : "activity";
+    };
+    const [tab, setTab] = useState(startTab);
+    const [wasOpen, setWasOpen] = useState(open);
+    if (open !== wasOpen) {
+        setWasOpen(open);
+        if (open)
+            setTab(startTab());
+    }
+    useEffect(() => {
+        if (!open || isSheet)
+            return undefined;
+        const onPointerDown = (event) => {
+            var _a, _b;
+            const target = event.target;
+            const inside = ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = bellRef.current) === null || _b === void 0 ? void 0 : _b.contains(target));
+            if (!inside && !target.closest(TOAST_SELECTOR))
+                close();
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open, isSheet, close]);
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onKeyDown = (event) => {
+            const isUndo = (event.ctrlKey || event.metaKey) && !event.shiftKey && event.key.toLowerCase() === "z";
+            const isTyping = event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLInputElement;
+            if (isUndo && !isTyping && actions.undoLast())
+                event.preventDefault();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [open, actions]);
+    const focusTarget = useMemo(() => ({ get current() { var _a, _b; return (_b = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(TAB_SELECTOR)) !== null && _b !== void 0 ? _b : null; } }), []);
+    const panel = (_jsx(CenterPanel, { ref: panelRef, isSheet: isSheet, tab: tab, onTabChange: setTab, labels: text, titleId: titleId, onClose: close, onOpenInbox: onOpenInbox, onOpenSettings: onOpenSettings, "data-testid": testId ? `${testId}-panel` : undefined }));
+    const bellProps = {
+        ref: bellRef,
+        count: counts.needsYou,
+        showDot: counts.unread > 0,
+        "aria-label": text.bell(counts),
+        isOpen: open,
+    };
+    if (isSheet) {
+        return (_jsxs(Box, { display: "inline-flex", "data-testid": testId ? `${testId}-bell` : undefined, children: [_jsx(ToolTip, { label: text.title, isDisabled: open, children: _jsx(Box, { display: "inline-flex", children: _jsx(NotificationBell, { ...bellProps, onClick: () => setOpen(!open) }) }) }), _jsx(Drawer, { isOpen: open, onClose: close, placement: "bottom", size: "full", hideCloseButton: true, "aria-labelledby": titleId, initialFocusRef: focusTarget, finalFocusRef: bellRef, contentProps: {
+                        bg: colors.surfaceRaised,
+                        borderRadius: 0,
+                        border: "none",
+                        sx: { paddingTop: "env(safe-area-inset-top)", paddingBottom: "env(safe-area-inset-bottom)" },
+                    }, children: _jsx(DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflow: "hidden", children: panel }) })] }));
+    }
+    return (_jsxs(Popover, { isOpen: open, onOpen: () => setOpen(true), onClose: close, placement: "bottom-end", gutter: 8, isLazy: true, lazyBehavior: "keepMounted", closeOnBlur: false, initialFocusRef: focusTarget, children: [_jsx(Box, { display: "inline-flex", "data-testid": testId ? `${testId}-bell` : undefined, children: _jsx(ToolTip, { label: text.title, isDisabled: open, children: _jsx(Box, { display: "inline-flex", children: _jsx(PopoverTrigger, { children: _jsx(NotificationBell, { ...bellProps }) }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "25rem", maxW: "calc(100vw - 3rem)", p: 0, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: RADIUS_ROLE.float, bg: colors.surfaceRaised, minH: "18.75rem", maxH: "min(40rem, calc(100dvh - 15rem))", _focus: { outline: "none", boxShadow: undefined }, _focusVisible: { outline: "none" }, "aria-label": text.title, children: panel }) })] }));
+};
+/** Bell with the server's Needs-you count (99+), else a dot for unread Activity; opens a two-tab panel or, on phones, a sheet. */
+const NotificationCenter = (props) => {
+    const { variant, onOpenInbox, onOpenSettings, isOpen, onOpenChange, defaultTab, labels, "data-testid": testId } = props;
+    return (_jsx(NotificationScope, { source: props, children: _jsx(CenterBody, { variant: variant, onOpenInbox: onOpenInbox, onOpenSettings: onOpenSettings, isOpen: isOpen, onOpenChange: onOpenChange, defaultTab: defaultTab, labels: labels, "data-testid": testId }) }));
+};
+export default NotificationCenter;

package/dist/esm/Components/NotificationCenter/center/NotificationCenterProps.js

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

package/dist/esm/Components/NotificationCenter/center/PanelRows.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useId, useState } from "react";
+import { Box, Heading } from "../../Primitives/Primitives.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import NotificationRow from "../row/NotificationRow.js";
+export const PanelRows = ({ groups, variant, format, onOpenItem }) => {
+    const { colors } = useCustomTheme();
+    const idPrefix = useId();
+    const [openThreads, setOpenThreads] = useState(() => new Set());
+    const toggleThread = useCallback((thread) => {
+        setOpenThreads((current) => {
+            const next = new Set(current);
+            if (next.has(thread.key))
+                next.delete(thread.key);
+            else
+                next.add(thread.key);
+            return next;
+        });
+    }, []);
+    return (_jsx(Box, { pb: 2, children: groups.map((group) => {
+            const headingId = `${idPrefix}-${group.key}`;
+            return (_jsxs(Box, { as: "section", "aria-labelledby": group.label === null ? undefined : headingId, children: [group.label !== null && (_jsxs(Heading, { as: "h3", id: headingId, position: "sticky", top: 0, zIndex: 3, display: "flex", alignItems: "center", gap: 1.5, px: 4, pt: 3, pb: 1.5, bg: colors.surfaceRaised, color: colors.textMuted, fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", children: [_jsx("span", { children: group.label }), group.count > 0 && _jsx("span", { children: format.number(group.count) })] })), _jsx(Box, { as: "ul", role: "list", listStyleType: "none", m: 0, px: "6px", display: "grid", gap: "2px", children: group.threads.map((thread) => {
+                            const isOpen = openThreads.has(thread.key);
+                            return (_jsxs(Fragment, { children: [_jsx(NotificationRow, { item: thread.lead, variant: variant, thread: thread, isThreadOpen: isOpen, onThreadToggle: toggleThread, onOpen: onOpenItem }), isOpen &&
+                                        thread.rest.map((item) => (_jsx(NotificationRow, { item: item, variant: variant, isThreadChild: true, onOpen: onOpenItem }, item.entry.id)))] }, thread.key));
+                        }) })] }, group.key));
+        }) }));
+};

package/dist/esm/Components/NotificationCenter/center/PanelStates.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2, Bell, Lock } from "lucide-react";
+import { Box, Flex } from "../../Primitives/Primitives.js";
+import EmptyState from "../../EmptyState/EmptyState.js";
+import ErrorState from "../../QueryState/ErrorState.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
+const SKELETON_ROWS = 4;
+export const PanelSkeleton = ({ isSheet }) => (_jsx(Box, { "aria-hidden": "true", py: 2, px: "6px", children: Array.from({ length: SKELETON_ROWS }, (_, index) => (_jsxs(Flex, { gap: 3, py: 2.5, pl: 5, pr: 3, children: [_jsx(Skeletons, { type: "circle", size: isSheet ? "10" : "8" }), _jsxs(Flex, { flex: 1, direction: "column", gap: 2, pt: 1, children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: `${88 - index * 9}%` }), _jsx(Skeletons, { type: "skeleton", height: "0.625rem", width: `${54 + index * 7}%` }), index % 2 === 0 && _jsx(Skeletons, { type: "skeleton", height: index === 0 ? "1.5rem" : "0.625rem", width: "6rem" })] })] }, index))) }));
+export const PanelError = ({ labels, onRetry }) => (_jsx(ErrorState, { size: "sm", title: labels.loadErrorTitle, description: labels.loadErrorDescription, retryLabel: labels.retry, onRetry: onRetry }));
+export const PanelNoAccess = ({ labels, appName }) => (_jsx(Box, { role: "status", children: _jsx(EmptyState, { size: "sm", icon: Lock, colorScheme: "gray", title: labels.noAccessTitle, description: labels.noAccessDescription(appName) }) }));
+export const PanelEmpty = ({ labels, tab }) => tab === "needsYou" ? (_jsx(EmptyState, { size: "sm", icon: CheckCircle2, colorScheme: "success", title: labels.emptyNeedsYouTitle, description: labels.emptyNeedsYouDescription })) : (_jsx(EmptyState, { size: "sm", icon: Bell, title: labels.emptyActivityTitle, description: labels.emptyActivityDescription }));

package/dist/esm/Components/NotificationCenter/center/centerLabels.js

@@ -0,0 +1,34 @@
+import { mergeDefined } from "../core/labels.js";
+export const withCenterLabels = (shared, format, overrides = {}) => mergeDefined({
+    ...shared,
+    bell: ({ needsYou, unread }) => {
+        if (needsYou > 0)
+            return `Notifications, ${format.number(needsYou)} need you`;
+        if (unread > 0)
+            return `Notifications, ${format.number(unread)} unread`;
+        return "Notifications";
+    },
+    title: "Notifications",
+    needsYouTab: "Needs you",
+    activityTab: "Activity",
+    tabsLabel: "Notification lists",
+    markAllRead: "Mark all read",
+    openInbox: "Open inbox",
+    settings: "Notification settings",
+    close: "Close notifications",
+    loading: "Loading notifications",
+    loadErrorTitle: "Couldn't load notifications",
+    loadErrorDescription: "Check your connection, then try again. Nothing you did was lost.",
+    noAccessTitle: "Notifications aren't turned on for you",
+    noAccessDescription: (appName) => `Your ${appName !== null && appName !== void 0 ? appName : "workspace"} admin hasn't given your role access to notifications in this workspace.`,
+    emptyNeedsYouTitle: "You're all caught up",
+    emptyNeedsYouDescription: "Nothing is waiting for your decision.",
+    emptyActivityTitle: "No activity yet",
+    emptyActivityDescription: "Updates about your work and requests show up here.",
+    offlineBanner: (loadedAt) => loadedAt === undefined
+        ? "You're offline. Changes are paused."
+        : `You're offline. These are from ${loadedAt}, and changes are paused.`,
+    newCount: (count) => `${format.number(count)} new`,
+    newCountName: (count) => `${format.number(count)} new notifications`,
+    overflowCount: (count) => `${format.number(count)}+`,
+}, overrides);

package/dist/esm/Components/NotificationCenter/center/useArrivals.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const ROW_SELECTOR = "[data-notification-id]";
+const FOCUS_SELECTOR = "a[href], button";
+export const useArrivals = (ids, scope, bodyRef) => {
+    const latest = useRef(ids);
+    latest.current = ids;
+    const known = useRef(new Set(ids));
+    const seenScope = useRef(scope);
+    const busy = useRef(false);
+    const [held, setHeld] = useState({ scope, ids: [] });
+    const key = ids.join();
+    useEffect(() => {
+        var _a, _b;
+        if (seenScope.current !== scope) {
+            seenScope.current = scope;
+            known.current = new Set(latest.current);
+            setHeld({ scope, ids: [] });
+            if (bodyRef.current)
+                bodyRef.current.scrollTop = 0;
+            return;
+        }
+        const fresh = latest.current.filter((id) => !known.current.has(id));
+        if (!fresh.length)
+            return;
+        fresh.forEach((id) => known.current.add(id));
+        const scrolled = ((_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) > 4;
+        if (busy.current || scrolled)
+            setHeld((current) => ({ scope, ids: [...current.ids, ...fresh] }));
+    }, [key, scope, bodyRef]);
+    const heldIds = useMemo(() => {
+        if (held.scope !== scope)
+            return [];
+        const present = new Set(ids);
+        return held.ids.filter((id) => present.has(id));
+    }, [held, scope, ids]);
+    const reveal = useCallback(() => {
+        setHeld({ scope, ids: [] });
+        requestAnimationFrame(() => {
+            var _a;
+            const body = bodyRef.current;
+            if (!body)
+                return;
+            const row = [...body.querySelectorAll(ROW_SELECTOR)].find((node) => { var _a; return heldIds.includes((_a = node.dataset.notificationId) !== null && _a !== void 0 ? _a : ""); });
+            if (!row)
+                return;
+            const top = row.getBoundingClientRect().top - body.getBoundingClientRect().top;
+            body.scrollTop += top - 8;
+            (_a = row.querySelector(FOCUS_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        });
+    }, [heldIds, scope, bodyRef]);
+    const track = useMemo(() => ({
+        onPointerEnter: () => {
+            busy.current = true;
+        },
+        onPointerLeave: () => {
+            busy.current = false;
+        },
+        onFocus: () => {
+            busy.current = true;
+        },
+        onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                busy.current = false;
+        },
+    }), []);
+    return { heldIds, reveal, track };
+};

package/dist/esm/Components/NotificationCenter/center/useIsSheet.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+const DESKTOP = "(min-width: 48em)";
+const isNarrow = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia(DESKTOP).matches;
+export const useIsSheet = (variant) => {
+    const [narrow, setNarrow] = useState(isNarrow);
+    useEffect(() => {
+        if (variant !== undefined || typeof window.matchMedia !== "function")
+            return undefined;
+        const query = window.matchMedia(DESKTOP);
+        const sync = () => setNarrow(!query.matches);
+        sync();
+        query.addEventListener("change", sync);
+        return () => query.removeEventListener("change", sync);
+    }, [variant]);
+    return variant === undefined ? narrow : variant === "sheet";
+};

package/dist/esm/Components/NotificationCenter/core/NotificationCenterProvider.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import VisuallyHidden from "../../VisuallyHidden/VisuallyHidden.js";
+import { useNotificationEngine } from "./useNotificationEngine.js";
+const NotificationCenterContext = createContext(null);
+const NotificationSharedContext = createContext(null);
+const MISSING_PROVIDER = "This notification component has no data: pass entries, counts, categories and onOpen, or render it inside a NotificationCenterProvider.";
+/** One overlay, one undo queue and one polite live region for every notification component inside it. */
+export const NotificationCenterProvider = ({ children, ...source }) => {
+    const { value, shared, announcement } = useNotificationEngine(source);
+    return (_jsx(NotificationCenterContext.Provider, { value: value, children: _jsxs(NotificationSharedContext.Provider, { value: shared, children: [children, _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", "data-testid": "notification-center-announcer", children: announcement })] }) }));
+};
+/** The live lists, counts and actions of the nearest `NotificationCenterProvider`; throws outside one. */
+export const useNotificationCenter = () => {
+    const value = useContext(NotificationCenterContext);
+    if (!value)
+        throw new Error(MISSING_PROVIDER);
+    return value;
+};
+export const useNotificationShared = () => {
+    const value = useContext(NotificationSharedContext);
+    if (!value)
+        throw new Error(MISSING_PROVIDER);
+    return value;
+};
+export const hasNotificationSource = (binding) => binding.entries !== undefined;
+/** A component's own source props win with a private provider; without them it joins the provider above. */
+export const NotificationScope = ({ source, children }) => {
+    const parent = useContext(NotificationCenterContext);
+    if (hasNotificationSource(source))
+        return _jsx(NotificationCenterProvider, { ...source, children: children });
+    if (!parent)
+        throw new Error(MISSING_PROVIDER);
+    return _jsx(_Fragment, { children: children });
+};

package/dist/esm/Components/NotificationCenter/core/NotificationEngineProps.js

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

package/dist/esm/Components/NotificationCenter/core/NotificationSourceProps.js

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

package/dist/esm/Components/NotificationCenter/core/actionError.js

@@ -0,0 +1,39 @@
+import { getApiErrorStatus } from "../../../Utils/apiError.js";
+const KINDS = ["conflict", "forbidden", "reasonRequired", "failed"];
+const asRecord = (value) => typeof value === "object" && value !== null ? value : {};
+const text = (value) => typeof value === "string" && value.trim() ? value : undefined;
+export const isNotificationActionError = (value) => KINDS.includes(asRecord(value).kind);
+export const notificationActionError = (kind, message) => {
+    const error = new Error(message !== null && message !== void 0 ? message : "");
+    error.name = "NotificationActionError";
+    error.kind = kind;
+    return error;
+};
+const statusOf = (error) => {
+    const direct = getApiErrorStatus(error);
+    if (direct !== null)
+        return direct;
+    const status = asRecord(asRecord(error).response).status;
+    return typeof status === "number" ? status : null;
+};
+const serverMessage = (error) => {
+    var _a;
+    const record = asRecord(error);
+    return (_a = text(asRecord(record.data).message)) !== null && _a !== void 0 ? _a : text(asRecord(asRecord(record.response).data).message);
+};
+const kindFor = (status) => {
+    if (status === 409)
+        return "conflict";
+    if (status === 403)
+        return "forbidden";
+    return "failed";
+};
+export const toNotificationActionError = (error) => {
+    if (isNotificationActionError(error)) {
+        const message = text(error.message);
+        return message ? { kind: error.kind, message } : { kind: error.kind };
+    }
+    const message = serverMessage(error);
+    const kind = kindFor(statusOf(error));
+    return message ? { kind, message } : { kind };
+};

package/dist/esm/Components/NotificationCenter/core/format.js

@@ -0,0 +1,87 @@
+const MINUTE_MS = 60000;
+const HOUR_MS = 60 * MINUTE_MS;
+export const DAY_MS = 24 * HOUR_MS;
+const WEEK_DAYS = 7;
+const startOfDay = (at) => {
+    const date = new Date(at);
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+};
+const daysBefore = (dayStart, days) => {
+    const date = new Date(dayStart);
+    date.setDate(date.getDate() - days);
+    return date.getTime();
+};
+const sameYear = (a, b) => new Date(a).getFullYear() === new Date(b).getFullYear();
+export const createNotificationFormatter = (locale, labels) => {
+    const time = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit" });
+    const shortDate = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" });
+    const shortDateWithYear = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" });
+    const full = new Intl.DateTimeFormat(locale, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+    const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+    const narrow = (unit) => new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "narrow" });
+    const minutes = narrow("minute");
+    const hours = narrow("hour");
+    const days = narrow("day");
+    const digits = new Intl.NumberFormat(locale);
+    const elapsed = (at, now) => Math.max(0, now - at);
+    const dayBucket = (at, now) => {
+        const today = startOfDay(now);
+        if (at >= today)
+            return "today";
+        if (at >= daysBefore(today, 1))
+            return "yesterday";
+        if (at >= daysBefore(today, WEEK_DAYS - 1))
+            return "thisWeek";
+        return "older";
+    };
+    const dayLabels = {
+        today: labels.today,
+        yesterday: labels.yesterday,
+        thisWeek: labels.thisWeek,
+        older: labels.older,
+    };
+    return {
+        shortAge: (at, now) => {
+            const gap = elapsed(at, now);
+            if (gap < MINUTE_MS)
+                return labels.now;
+            if (gap < HOUR_MS)
+                return minutes.format(Math.floor(gap / MINUTE_MS));
+            if (gap < DAY_MS)
+                return hours.format(Math.floor(gap / HOUR_MS));
+            if (gap < WEEK_DAYS * DAY_MS)
+                return days.format(Math.floor(gap / DAY_MS));
+            return (sameYear(at, now) ? shortDate : shortDateWithYear).format(at);
+        },
+        longAge: (at, now) => {
+            const gap = elapsed(at, now);
+            if (gap < MINUTE_MS)
+                return labels.justNow;
+            if (gap < HOUR_MS)
+                return relative.format(-Math.floor(gap / MINUTE_MS), "minute");
+            if (gap < DAY_MS)
+                return relative.format(-Math.floor(gap / HOUR_MS), "hour");
+            return full.format(at);
+        },
+        absolute: (at, now) => {
+            const bucket = dayBucket(at, now);
+            if (bucket === "today")
+                return labels.todayAt(time.format(at));
+            if (bucket === "yesterday")
+                return labels.yesterdayAt(time.format(at));
+            return full.format(at);
+        },
+        dayBucket,
+        dayLabel: (bucket) => dayLabels[bucket],
+        daysSince: (at, now) => Math.floor(elapsed(at, now) / DAY_MS),
+        number: (value) => digits.format(value),
+        iso: (at) => new Date(at).toISOString(),
+    };
+};

package/dist/esm/Components/NotificationCenter/core/grouping.js

@@ -0,0 +1,88 @@
+export const OTHER_CATEGORY_KEY = "__other";
+export const plainTitle = (parts) => parts.map((part) => (typeof part === "string" ? part : part.b)).join("");
+export const findCategory = (categories, key) => Object.prototype.hasOwnProperty.call(categories, key) ? categories[key] : undefined;
+export const zoneFor = (entry, categories) => {
+    var _a;
+    if (entry.archived)
+        return "archived";
+    const rule = (_a = findCategory(categories, entry.category)) === null || _a === void 0 ? void 0 : _a.needsYou;
+    if (rule === "always")
+        return "needsYou";
+    if (rule === "untilRead" && entry.isRead === false)
+        return "needsYou";
+    return "activity";
+};
+export const byNewest = (a, b) => b.entry.createdAt - a.entry.createdAt;
+export const matchesNotificationQuery = (entry, query) => {
+    const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return true;
+    const haystack = [plainTitle(entry.title), entry.context, entry.preview, entry.eyebrow, entry.subject, entry.body]
+        .filter((part) => Boolean(part))
+        .join(" ")
+        .toLowerCase();
+    return words.every((word) => haystack.includes(word));
+};
+export const threadify = (items) => {
+    const threads = [];
+    const byKey = new Map();
+    items.forEach((item) => {
+        const key = item.entry.groupKey;
+        const existing = key === undefined ? undefined : byKey.get(key);
+        if (existing) {
+            existing.rest.push(item);
+            return;
+        }
+        const thread = { key: item.entry.id, lead: item, rest: [] };
+        threads.push(thread);
+        if (key !== undefined)
+            byKey.set(key, thread);
+    });
+    return threads;
+};
+export const threadEntries = (thread) => [thread.lead, ...thread.rest];
+export const threadIds = (thread) => threadEntries(thread).map((item) => item.entry.id);
+export const threadHasUnread = (thread) => threadEntries(thread).some((item) => item.entry.isRead === false);
+const isShown = (item) => !item.state.isHidden;
+const single = (item) => ({ key: item.entry.id, lead: item, rest: [] });
+export const groupByCategory = (items, categories, otherLabel) => {
+    const byCategory = new Map();
+    items.forEach((item) => {
+        const key = findCategory(categories, item.entry.category) ? item.entry.category : OTHER_CATEGORY_KEY;
+        const list = byCategory.get(key);
+        if (list)
+            list.push(item);
+        else
+            byCategory.set(key, [item]);
+    });
+    const order = [...Object.keys(categories), OTHER_CATEGORY_KEY].filter((key) => byCategory.has(key));
+    const groups = order.flatMap((key) => {
+        const list = byCategory.get(key);
+        if (!list || !list.some(isShown))
+            return [];
+        const category = findCategory(categories, key);
+        return [
+            {
+                key,
+                label: category ? category.label : otherLabel,
+                count: list.filter((item) => item.state.isPending).length,
+                threads: list.map(single),
+            },
+        ];
+    });
+    return groups.length === 1 ? [{ ...groups[0], label: null }] : groups;
+};
+export const groupByDay = (items, format, now) => {
+    const buckets = new Map();
+    items.forEach((item) => {
+        const bucket = format.dayBucket(item.entry.createdAt, now);
+        const list = buckets.get(bucket);
+        if (list)
+            list.push(item);
+        else
+            buckets.set(bucket, [item]);
+    });
+    return [...buckets]
+        .filter(([, list]) => list.some(isShown))
+        .map(([bucket, list]) => ({ key: bucket, label: format.dayLabel(bucket), count: 0, threads: threadify(list) }));
+};