pixelize-design-library 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -11,7 +11,70 @@ line below names its issue number.
 
 ## [Unreleased]
 
-Nothing yet.
+## [3.1.0] — 2026-10-23
+
+### Added
+
+- **`Switch` `size`** (`"sm"`, `"md"` or `"lg"`, default `"sm"`) passes through to `SegmentedControl`, so the pill takes the button
+  scale (32, 40 and 48px) like Button, Tabs and Dropdown. `"sm"` is the height it already rendered at, so omitted, the output is
+  exactly as before. The `/switch` demo gains a Sizes variant, a row beside a field and a button, and a Playground `size` control.
+- **`NotificationCenter`** — the bell and its panel for any app. The panel has exactly two tabs, Needs you and Activity, with
+  inline Approve and Reject, a six-second Undo, threads, mark-all-read and loading, error, empty, offline and no-access
+  states. A popover on desktop and a full-height `variant="sheet"` on phones. The bell shows the server's Needs-you
+  count (99+), else a dot for unread, else nothing.
+- **`NotificationInbox`** — the full-page inbox: Needs you, Activity and Archived tabs, search, a type filter, unread-only,
+  bulk approve, read and archive, a reading pane, and a phone list-to-detail flow. `tab` and `selectedId` can be
+  controlled, so a URL can deep-link to one entry.
+- **`NotificationPreferences`** — the notification settings page: a type-by-channel grid with locked cells, an optional
+  email-summary choice, autosave per cell, and a rollback with a toast when `onChange` rejects.
+- **`NotificationCenterProvider` / `useNotificationCenter`** — one optimistic overlay, one undo queue and one polite live
+  region shared by every notification component inside it. Pass the source props to a component directly, or to a
+  provider and none to the components, so the bell and the inbox move together.
+- **`NotificationRow` / `NotificationDetail`** — one entry as a list row (`panel`, `inbox` and `phone` variants) and one
+  entry in full, for building your own surface on the same engine.
+- **`notificationActionError` / `isNotificationActionError` / `toNotificationActionError`** — reject `onAction` with a kind
+  (`conflict`, `forbidden`, `reasonRequired` or `failed`) to get the matching row state, status line and toast. A plain
+  HTTP 409 or 403 maps to conflict and forbidden.
+- **`defaultNotificationLabels(locale)` / `DEFAULT_NOTIFICATION_LOCALE`** — the English strings every notification component
+  falls back to; override any key through `labels`. Dates and plurals use `Intl` with the `locale`.
+- Types for all of the above, including `NotificationEntry`, `NotificationAction`, `NotificationCategories` and
+  `NotificationSourceProps`.
+
+### Deprecated
+
+Each of these still ships its full implementation and behaves as before.
+
+- **`NotificationPanel`** — use `NotificationCenter` for the bell panel and `NotificationInbox` for the page.
+- **`NotificationList`** — use `NotificationInbox`, or `NotificationCenter` for the bell panel.
+- **`NotificationItem`** — use `NotificationRow` inside a `NotificationCenterProvider`.
+
+`NotificationBell` stays: `NotificationCenter` wraps it. `Notification` (the countdown card) is unrelated and not deprecated.
+
+### Fixed
+
+- **`SegmentedControl`'s default track is pale on Zinc light.** Zinc's `background[600]` is a mid-grey (`#71717a`), so the
+  track rendered dark with near-white labels. A light track now stays no darker than the control outline (`boxborder[500]`),
+  so Zinc light uses its own `background[400]` (`#d4d4d8`) with dark labels. The other eight brands and every dark palette
+  are unchanged.
+- **`TableToggle` gets the same pale track on Zinc light, with a visible hover.** It shares `SegmentedControl`'s track
+  step and keeps its hover fill and icons at the same offsets from it: Zinc light now has a `#d4d4d8` track, `#f4f4f5`
+  hover and `#71717a` icons. Zinc light's `brandSlide` and `underlineSlide` resting icons were light grey on the white
+  canvas (1.60:1) and now clear 3:1. The other eight brands and every dark palette are unchanged.
+- **`SideBar` drawer rows use the docked row height, not 44px.** Below `lg`, and on desktop after the footer's Hide, the
+  rail rows, pinned rows, group captions, dividers, Add New and the user footer each had taller metrics of their own: rows
+  sat 46px apart in the drawer against 34px docked, so a 20-row menu's list was 1108px tall instead of 904px. The drawer now
+  renders the docked metrics (32px rows, 34px apart) and every row stays above the WCAG 2.5.8 24px target.
+  `SIDEBAR_ROW.overlayHeight` is removed (internal; 0 references in hrms, lfour, tickets, crm-frontend, account-frontend)
+  and `RenderMenuType.overlay` is `@deprecated`, now unread.
+- **`SideBar` drawer: the `SecondaryBar` no longer overflows the panel on narrow phones.** The panel is capped at 88vw but the
+  primary column (14.7rem) plus the secondary's label floor need about 329px, so on a 320px phone the secondary ended
+  47.6px past the panel and 9px past the screen, on a 360px phone 12.4px past the panel, and a long label overflowed even
+  at 375px (33px) and 390px (20px), pushing its toggle off screen at 320px. In the drawer the secondary now shrinks
+  to its icon strip (`SecondaryBarProps.shrinkable`, set by `SideBar`), the primary column gives up the difference
+  (`max-width: calc(88vw - 1px - 3.5rem)`), and from 23.3em (about 373px) down it starts as the strip; its header toggle
+  stays visible when squeezed. Measured in Chromium emulation at 320, 360, 375, 390, 430 and 844px wide: every width
+  now ends at the panel edge in both states; at 375px and wider the default look is unchanged (at 375px the secondary is 0.17px
+  narrower, which removes its sub-pixel overlap of the panel border). Docked layout is untouched.
 
 ## [3.0.0] — 2026-10-21
 

package/COMPONENT-GOTCHAS.md

@@ -415,7 +415,7 @@ The wrapper is deliberately not a button; make the custom component a button, or
 | `Table` | Radius `xl`; row height 32/40/52 by density; filter button is named "Filter {label}" (tests querying "Search" break); client pagination resets to page 1 when `data.length` changes | — |
 | `KanbanBoard` | `height`/`maxH` props replace the clipping wrapper; `height="100%"` needs a parent with a definite height | — |
 | `ProfileCard` / `SideBar` | `variant="outlein"` now draws an outline; header divider 1px `boxborder[200]` / mobile backdrop uses the shared scrim | — |
-| `SideBar` | Scroll-container and submenu ids are generated (`useId`) — `#sidebar-scroll-container` / `#submenu-<label>` no longer exist; rail rows 32px (44px in the mobile overlay), submenu rows 28px; count badges use soft tone | — |
+| `SideBar` | Scroll-container and submenu ids are generated (`useId`) — `#sidebar-scroll-container` / `#submenu-<label>` no longer exist; rail rows 32px, the mobile drawer's too, submenu rows 28px; count badges use soft tone. In the drawer, a menu with `secondaryItems` starts its panel as the icon strip (labels only as `aria-label`s until expanded) on screens up to ~373px, and the panel can no longer overflow the drawer | — |
 | `ToggleSwitch` | No `aria-required` on the switch (invalid for `role=switch`); `isRequired` still shows `*` | — |
 | `KanbanBoard` / `PdfViewer` / `UserDetails` | Cards, drag handles and toolbar links get accessible names; scroll panels are focusable regions; `UserDetails` badges 12px | — |
 | `NumberInput` / `FileUpload` | Steppers exactly half the field height; drop-zone border 1px (was 2px) | — |
@@ -557,6 +557,13 @@ use `bandOn(fill, surface)` for a header strip, hover or selection tint, `recess
 or off cell, `cardRule(colors)` for a rule inside a card and `raisedRule(colors)` for a rule inside an overlay.
 All four return the old value unchanged in light mode.
 
+### `background[600]` is a mid-grey on Zinc, not a pale tint
+
+The light `background` ramps are hand-written per brand. Eight stay pale through `[600]` (1.41-1.91:1 off the canvas);
+Zinc is a full neutral ramp whose `[600]` is `#71717a` (4.83:1), dark enough that ink lifted to AA on it turns white.
+Pick a pale fill by contrast, never by step number: the default tracks of `SegmentedControl` and `TableToggle` keep
+`[600]` only where it is no darker than `boxborder[500]`.
+
 ### A Chakra `ModalHeader` inside a coloured box keeps its own ink
 
 The theme gives `ModalHeader` `color: colors.header[900]` and a bottom rule. Wrapping it in a
@@ -844,26 +851,43 @@ what `isLoaded` is set to. Neither `Skeletons` nor `ProgressBar` forwards a `ref
 **Apply:** for `circle`/`text`, control visibility by conditionally rendering the `Skeletons` element
 itself, not via `isLoaded`.
 
-### Five exports start with `Notification` and only one of them is a notification tray
+### Eight exports start with `Notification` and only the Notification Center family is a tray
 
-Autocomplete offers `Notification`, `NotificationBell`, `NotificationPanel`, `NotificationList` and
-`NotificationItem`. They are not a family — `Notification` is a standalone countdown card from a
-different era, and picking it for an inbox row is the common mistake.
+Autocomplete offers `Notification`, `NotificationBell`, `NotificationPanel`, `NotificationList`, `NotificationItem` and the
+newer `NotificationCenter`, `NotificationInbox`, `NotificationPreferences`, `NotificationRow`, `NotificationDetail`. Only
+`Notification` is unrelated — a standalone countdown card from a different era, and picking it for an inbox row is the
+common mistake.
 
 | Export | What it actually is |
 | --- | --- |
-| `NotificationBell` | The badge/bell button only. Requires `aria-label`; it renders no list |
-| `NotificationPanel` | The tray the bell opens — zones, filters, loading/error/empty/data |
-| `NotificationList` | The panel's scrolling body without the panel chrome — owns the day bucketing and `groupKey` collapsing |
-| `NotificationItem` | One inbox row: the tone-driven chassis the list paints for each item |
-| `Notification` | **Not deprecated.** A dated countdown card — its dot colour comes from `dueDate`/`endDate` math, not from a tone. `NotificationItem` cannot replace it: `formatRelativeTime` clamps every future date to "Just now" |
+| `NotificationCenter` | **Use this.** The bell plus a two-tab panel (Needs you, Activity) with inline approvals and undo |
+| `NotificationInbox` | **Use this** for the full page: tabs, search, bulk actions, reading pane |
+| `NotificationPreferences` | **Use this** for the settings page: type-by-channel switches with autosave |
+| `NotificationRow` / `NotificationDetail` | One entry as a row / in full, for your own surface inside a `NotificationCenterProvider` |
+| `NotificationBell` | The badge/bell button only. Requires `aria-label`; it renders no list. `NotificationCenter` wraps it |
+| `NotificationPanel`, `NotificationList`, `NotificationItem` | **Deprecated**, behaviour unchanged. Replaced by `NotificationCenter`, `NotificationInbox` and `NotificationRow` |
+| `Notification` | **Not deprecated.** A dated countdown card — its dot colour comes from `dueDate`/`endDate` math, not from a tone. `NotificationRow` cannot replace it: `formatRelativeTime` clamps every future date to "Just now" |
 
 `Notification` is kept only because nothing else does that date-driven countdown; it is not a thin
 alias, so it has not been removed.
 
-**Apply:** for a notification tray use `NotificationBell` + `NotificationPanel`. For rows inside your
-own layout use `NotificationList` or `NotificationItem`. Reach for `Notification` only when you
-specifically want the deadline-countdown card, and read the gotcha below before you do.
+**Apply:** for a notification tray use `NotificationCenter`; for a page, `NotificationInbox`. Reach for `Notification` only
+when you specifically want the deadline-countdown card, and read the gotcha below before you do.
+
+### Notification Center: four silent traps
+
+- **Counts must come from the server.** `counts.needsYou` and `counts.unread` are never derived from the loaded `entries`,
+  because a paged list under-counts. The library only adjusts them optimistically and never below 0.
+- **`onAction` must reject with a kind to get the right row.** `notificationActionError("conflict" | "forbidden" |
+  "reasonRequired" | "failed", message?)` (or an HTTP 409/403) picks the status line. Any other rejection reads as
+  `failed` with Try again, so a "someone already decided this" case looks like a retryable error.
+- **A feature exists only when its callback is passed.** No `onArchive` means no Archived tab and no archive button; no
+  `onRestore` no restore; no `onAction` no decision buttons; no `onMarkRead` no read toggle. Nothing is disabled, it is
+  absent.
+- **One provider per page, or the components do not share state.** `NotificationCenter` and `NotificationInbox` given their
+  own source props each run a private provider with its own undo queue. To share, pass the props to one
+  `NotificationCenterProvider` and none to the components. Keep `categories` and `labels` stable references, and mount a
+  `ToasterProvider` above (`PixelizeThemeProvider` supplies one).
 
 ### `Notification`'s `onClick` only reaches the title text, and its status dot has two gates
 

package/DESIGN-GUIDE.md

@@ -191,7 +191,9 @@ sections are `Card` with the title in `header`.
 | Per-day activity (leave, tasks, shifts) | `CalendarGrid` with `events` mapped from your data — don't hand-roll a month grid |
 | Voice note capture | `AudioRecorder`; `MediaAudioPlayer` for playback |
 | Previewing an attachment (image, video, audio, PDF, Office, text, archive) | `MediaViewer` (`items`, `isOpen`, `onClose`) — omit `index` and it owns navigation itself |
-| Notification tray | `NotificationBell` (badge, needs `aria-label`) opening a `NotificationPanel` (zones, filters, all four states) |
+| Notification tray | `NotificationCenter` — bell plus a two-tab panel (Needs you, Activity) with inline approvals and undo; `NotificationBell` alone is just the badge. `NotificationPanel`, `NotificationList` and `NotificationItem` are deprecated |
+| Notification inbox page | `NotificationInbox` (tabs, search, type filter, bulk actions, reading pane, `variant="phone"`) — share one `NotificationCenterProvider` with the bell |
+| Notification settings page | `NotificationPreferences` (`channels`, `groups`, `values`, `onChange`; locked cells, autosave with rollback) |
 | Confirm that needs the name typed to arm it | `ConfirmDialog confirmationText="delete-me"` — `onConfirm` does **not** close; call `onClose` yourself |
 | Scrim over the page or one panel while something runs | `Backdrop open loader` — `variant="dim"` by default. Add `container` to scope it to the nearest positioned ancestor, `allowBackgroundInteraction` to let clicks through, `onClick` to dismiss |
 | A short "saved" / "copied" / "failed" notice | `useToaster().showToast({ title, status })` (`PixelizeThemeProvider` and `withTheme` mount the provider) — not a `ToolTip`, not an `AlertDialog` |
@@ -314,6 +316,7 @@ not shipped in this package). Start from the closest one:
 | List of records | `records.tsx` | saved views, `FilterBar`, `Table` (`isGlobalSearch={false}`, `Tag` cells, row selection), `BulkSelectionBar` (count, facts, ranked actions, clear), `AlertDialog tone="danger"`, create `Drawer` |
 | One record | `recordDetail.tsx` | `PageHeader` with breadcrumbs/avatar/meta, `Tabs` (declarative `items` with `count` badges), `DescriptionList` (grid + inline side panel), `Timeline` (per-event `icon`/`description`), `ErrorState` + back |
 | Settings / long form | `settings.tsx` | `SectionRail` (rail from `lg`, `Select` below, dirty dots), `SettingsSection` + `SettingRow`, `SaveBar`, danger zone |
+| Notification inbox and settings | `demo.notificationInbox.tsx` (`/notificationinbox`), `demo.notificationPreferences.tsx` (`/notificationpreferences`) in the **Feedback & overlays** group | `NotificationInbox` desktop, phone, shared provider with the bell and all load states; `NotificationPreferences` with locked cells, autosave rollback and read-only |
 | Board | `pipeline.tsx` | `KanbanBoard` with custom cards and column totals (`height`/`maxH` to size it) |
 | Inbox / master–detail | `inbox.tsx` | selectable list rows, conversation pane, composer, mobile list↔detail |
 | App launcher (browse, pins, recents, search with actions) | `launcher.tsx` (`/examples/launcher`) | `NavLauncher` with an app-owned registry and role-based permission filter, pinned / frequent / recent ids, `linkAs`, remote results via `extraResults`, `isLoading`, Classic / Spotlight toggle, synonyms, scopes, quick actions, company facts with Copy, answers |

package/dist/Components/NotificationBell/NotificationBellProps.d.ts

@@ -61,7 +61,7 @@ export interface NotificationItemModel {
 }
 /** How the unread state reads on a row. Defaults to "bar" (the 2px left border both apps use). */
 export type NotificationUnreadIndicator = "bar" | "dot" | "tint" | "none";
-/** One row; exported so a `renderItem` override can still reuse the chassis. */
+/** @deprecated Build rows with NotificationRow inside a NotificationCenterProvider. */
 export interface NotificationItemProps {
     /** The mapped row model that this chassis paints. */
     item: NotificationItemModel;
@@ -82,7 +82,7 @@ export interface NotificationItemProps {
     /** Fires when a collapsed run's "Show N updates" affordance is activated. */
     onExpandGroup?: () => void;
 }
-/** Props shared by NotificationList and NotificationPanel — generic over the caller's own row type. */
+/** @deprecated Use NotificationCenter or NotificationInbox, which take NotificationEntry rows. */
 export interface NotificationListProps<T> {
     /** Rows in display order; each is mapped through `toItem` for rendering and, with `groupBy` "day", bucketed by its timestamp. */
     items: T[];
@@ -131,7 +131,7 @@ export interface NotificationFilter {
     /** Shown even when 0, unlike a zone count; capped at 99 like the badge. Omit for no suffix. */
     count?: number;
 }
-/** The panel shell. Generic over the caller's row type — the library defines no notification shape. */
+/** @deprecated Use NotificationCenter for the bell panel and NotificationInbox for the page. */
 export interface NotificationPanelProps<T> extends NotificationListProps<T> {
     /** Omit for a single-zone panel (crm, spare-cart). Two zones is the tickets/hrms shape. */
     zones?: NotificationZone[];

package/dist/Components/NotificationBell/NotificationItem.d.ts

@@ -1,4 +1,4 @@
 import type { NotificationItemProps } from "./NotificationBellProps";
-/** One notification row; used by NotificationList and reusable standalone under a `renderItem` override. */
+/** @deprecated Use NotificationRow inside a NotificationCenterProvider. */
 declare const NotificationItem: ({ item, onClick, actions, actionsAlwaysVisible, preview, trailing, unreadIndicator, groupCount, onExpandGroup, }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
 export default NotificationItem;

package/dist/Components/NotificationBell/NotificationItem.js

@@ -14,7 +14,7 @@ const tone_1 = require("../../Theme/tokens/builders/tone");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const notificationHelpers_1 = require("./notificationHelpers");
 const TILE_SIZE = "1.75rem";
-/** One notification row; used by NotificationList and reusable standalone under a `renderItem` override. */
+/** @deprecated Use NotificationRow inside a NotificationCenterProvider. */
 const NotificationItem = ({ item, onClick, actions, actionsAlwaysVisible = false, preview, trailing, unreadIndicator = "bar", groupCount, onExpandGroup, }) => {
     var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/NotificationBell/NotificationList.d.ts

@@ -1,4 +1,4 @@
 import type { NotificationListProps } from "./NotificationBellProps";
-/** Day sections + consecutive groupKey runs over NotificationItem rows. Generic over the caller's row type. */
+/** @deprecated Use NotificationInbox, or NotificationCenter for the bell panel. */
 declare function NotificationList<T>({ items, toItem, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }: NotificationListProps<T>): import("react/jsx-runtime").JSX.Element;
 export default NotificationList;

package/dist/Components/NotificationBell/NotificationList.js

@@ -10,7 +10,7 @@ const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const NotificationItem_1 = __importDefault(require("./NotificationItem"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const notificationHelpers_1 = require("./notificationHelpers");
-/** Day sections + consecutive groupKey runs over NotificationItem rows. Generic over the caller's row type. */
+/** @deprecated Use NotificationInbox, or NotificationCenter for the bell panel. */
 function NotificationList({ items, toItem, groupBy = "day", collapseGroups = false, dayLabels = notificationHelpers_1.DEFAULT_DAY_LABELS, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator = "bar", actionsAlwaysVisible = false, "aria-label": ariaLabel, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [expandedGroups, setExpandedGroups] = (0, react_1.useState)(new Set());

package/dist/Components/NotificationBell/NotificationPanel.d.ts

@@ -1,4 +1,4 @@
 import type { NotificationPanelProps } from "./NotificationBellProps";
-/** The panel shell: header, zone/filter row, scroll body with loading/empty/error, footer. */
+/** @deprecated Use NotificationCenter, which wraps NotificationBell with a two-tab panel. */
 declare function NotificationPanel<T>({ items, toItem, zones, activeZone, onZoneChange, filters, activeFilter, onFilterChange, isLoading, error, onRetry, empty, header, headerAction, footer, variant, maxH, onLoadMore, hasMore, isLoadingMore, panelRef, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }: NotificationPanelProps<T>): import("react/jsx-runtime").JSX.Element;
 export default NotificationPanel;

package/dist/Components/NotificationBell/NotificationPanel.js

@@ -15,7 +15,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const notificationHelpers_1 = require("./notificationHelpers");
 const DEFAULT_EMPTY = { title: "No notifications yet", description: "You're all caught up.", size: "sm" };
-/** The panel shell: header, zone/filter row, scroll body with loading/empty/error, footer. */
+/** @deprecated Use NotificationCenter, which wraps NotificationBell with a two-tab panel. */
 function NotificationPanel({ items, toItem, zones, activeZone, onZoneChange, filters, activeFilter, onFilterChange, isLoading = false, error, onRetry, empty, header, headerAction, footer, variant = "popover", maxH, onLoadMore, hasMore = false, isLoadingMore = false, panelRef, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const internalRef = (0, react_1.useRef)(null);

package/dist/Components/NotificationCenter/center/CenterPanel.d.ts

@@ -0,0 +1,15 @@
+import type { NotificationCenterLabels, NotificationCenterTab } from "./NotificationCenterProps";
+export declare const PANEL_ROW_LIMIT = 20;
+interface CenterPanelProps {
+    isSheet: boolean;
+    tab: NotificationCenterTab;
+    onTabChange: (tab: NotificationCenterTab) => void;
+    labels: NotificationCenterLabels;
+    titleId: string;
+    onClose: () => void;
+    onOpenInbox?: () => void;
+    onOpenSettings?: () => void;
+    "data-testid"?: string;
+}
+declare const CenterPanel: import("react").ForwardRefExoticComponent<CenterPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CenterPanel;

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

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PANEL_ROW_LIMIT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const IconButton_1 = __importDefault(require("../../IconButton/IconButton"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const Tabs_1 = __importDefault(require("../../Tabs/Tabs"));
+const TabsContext_1 = require("../../Tabs/TabsContext");
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const grouping_1 = require("../core/grouping");
+const PanelStates_1 = require("./PanelStates");
+const PanelRows_1 = require("./PanelRows");
+const useArrivals_1 = require("./useArrivals");
+exports.PANEL_ROW_LIMIT = 20;
+const TAB_COUNT_CAP = 99;
+const CenterPanel = (0, react_1.forwardRef)(function CenterPanel({ isSheet, tab, onTabChange, labels, titleId, onClose, onOpenInbox, onOpenSettings, "data-testid": testId }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const center = (0, NotificationCenterProvider_1.useNotificationCenter)();
+    const { lists, counts, categories, features, format, now, status, isOffline, loadedAt, appName, actions } = center;
+    const bodyRef = (0, react_1.useRef)(null);
+    const all = tab === "needsYou" ? lists.needsYou : lists.activity;
+    const ids = (0, react_1.useMemo)(() => all.map((item) => item.entry.id), [all]);
+    const { heldIds, reveal, track } = (0, useArrivals_1.useArrivals)(ids, tab, bodyRef);
+    const visible = (0, react_1.useMemo)(() => {
+        const held = new Set(heldIds);
+        return all.slice(0, exports.PANEL_ROW_LIMIT).filter((item) => !held.has(item.entry.id));
+    }, [all, heldIds]);
+    const groups = (0, react_1.useMemo)(() => tab === "needsYou"
+        ? (0, grouping_1.groupByCategory)(visible, categories, center.labels.otherCategory)
+        : (0, grouping_1.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 = (0, react_1.useCallback)((item, event) => {
+        actions.open(item.entry, event);
+        onClose();
+    }, [actions, onClose]);
+    const pill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const banner = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, "neutral"), colors.surfaceRaised);
+    const rule = (0, surfaceRaised_1.raisedRule)(colors);
+    const toolSize = isSheet ? "md" : "sm";
+    const iconPx = isSheet ? 18 : 16;
+    const markAll = () => actions.markAllRead({ zone: tab });
+    let content;
+    if (status === "loading")
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelSkeleton, { isSheet: isSheet });
+    else if (status === "error")
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelError, { labels: labels, onRetry: actions.retryLoad });
+    else if (status === "noAccess")
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelNoAccess, { labels: labels, appName: appName });
+    else if (groups.length === 0)
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelEmpty, { labels: labels, tab: tab });
+    else
+        content = (0, jsx_runtime_1.jsx)(PanelRows_1.PanelRows, { groups: groups, variant: isSheet ? "phone" : "panel", format: format, onOpenItem: openItem });
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: ref, direction: "column", flex: 1, minH: 0, w: "100%", bg: colors.surfaceRaised, color: colors.text[800], "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", justify: "space-between", gap: 2, flexShrink: 0, minH: isSheet ? "3.5rem" : "3rem", pl: 4, pr: 2, pt: 2, pb: 1, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Heading, { as: "h2", id: titleId, fontSize: "1rem", fontWeight: 600, lineHeight: "1.5", color: colors.header[900], children: labels.title }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1, children: [isReady && features.markAllRead && (isSheet ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.markAllRead, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.markAllRead, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.CheckCheck, boxSize: "1.125rem", "aria-hidden": "true" }), isDisabled: isOffline || !canMarkAll, onClick: markAll }) })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", label: labels.markAllRead, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCheck, { size: iconPx, "aria-hidden": "true" }), isDisabled: isOffline || !canMarkAll, onClick: markAll }))), onOpenSettings && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.settings, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: toolSize, variant: "ghost", colorScheme: "gray", "aria-label": labels.settings, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.Settings, boxSize: `${iconPx / 16}rem`, "aria-hidden": "true" }), onClick: onOpenSettings }) })), isSheet && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.X, boxSize: "1.125rem", "aria-hidden": "true" }), onClick: onClose }))] })] }), isOffline && ((0, jsx_runtime_1.jsxs)(Primitives_1.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: [(0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.WifiOff, boxSize: "0.875rem", mt: "0.125rem", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: labels.offlineBanner(loadedAt === undefined ? undefined : format.absolute(loadedAt, now)) })] })), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { px: 2, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { id: `${titleId}-tabs`, items: tabItems, value: tab, onChange: (value) => onTabChange(value), variant: "line", size: isSheet ? "md" : "sm", isFitted: true, "aria-label": labels.tabsLabel }) }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { ref: bodyRef, role: "tabpanel", "aria-labelledby": (0, TabsContext_1.tabId)(`${titleId}-tabs`, tab), "aria-busy": status === "loading" ? true : undefined, tabIndex: -1, flex: 1, minH: 0, overflowY: "auto", position: "relative", sx: {
+                    overscrollBehavior: "contain",
+                    ...(0, scrollbar_1.scrollbarStyles)(colors, "hover"),
+                    "&:focus-visible": { outline: "none", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors) },
+                }, ...track, children: [heldIds.length > 0 && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "sticky", top: 2, zIndex: 5, h: 0, display: "flex", justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: isSheet ? "md" : "xs", mt: 2, h: isSheet ? undefined : "1.75rem", borderRadius: "full", "aria-label": labels.newCountName(heldIds.length), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.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" && (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: labels.loading }), content] }), onOpenInbox && ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { flexShrink: 0, p: 2, borderTop: `1px solid ${rule}`, children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: isSheet ? "md" : "sm", variant: "ghost", colorScheme: "gray", width: "100%", label: labels.openInbox, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: iconPx, "aria-hidden": "true" }), onClick: onOpenInbox }) }))] }));
+});
+exports.default = CenterPanel;

package/dist/Components/NotificationCenter/center/NotificationCenter.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationCenterProps } from "./NotificationCenterProps";
+/** 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. */
+declare const NotificationCenter: (props: NotificationCenterProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationCenter;

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

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Drawer_1 = __importStar(require("../../Drawer/Drawer"));
+const NotificationBell_1 = __importDefault(require("../../NotificationBell/NotificationBell"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const centerLabels_1 = require("./centerLabels");
+const useIsSheet_1 = require("./useIsSheet");
+const CenterPanel_1 = __importDefault(require("./CenterPanel"));
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const { counts, labels, format, lists, status, actions } = (0, NotificationCenterProvider_1.useNotificationCenter)();
+    const text = (0, react_1.useMemo)(() => (0, centerLabels_1.withCenterLabels)(labels, format, overrides), [labels, format, overrides]);
+    const isSheet = (0, useIsSheet_1.useIsSheet)(variant);
+    const titleId = (0, react_1.useId)();
+    const bellRef = (0, react_1.useRef)(null);
+    const panelRef = (0, react_1.useRef)(null);
+    const [ownOpen, setOwnOpen] = (0, react_1.useState)(false);
+    const open = isOpen === undefined ? ownOpen : isOpen;
+    const setOpen = (0, react_1.useCallback)((next) => {
+        setOwnOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const close = (0, react_1.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] = (0, react_1.useState)(startTab);
+    const [wasOpen, setWasOpen] = (0, react_1.useState)(open);
+    if (open !== wasOpen) {
+        setWasOpen(open);
+        if (open)
+            setTab(startTab());
+    }
+    (0, react_1.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]);
+    (0, react_1.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 = (0, react_1.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 = ((0, jsx_runtime_1.jsx)(CenterPanel_1.default, { 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 ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { display: "inline-flex", "data-testid": testId ? `${testId}-bell` : undefined, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.title, isDisabled: open, children: (0, jsx_runtime_1.jsx)(Primitives_1.Box, { display: "inline-flex", children: (0, jsx_runtime_1.jsx)(NotificationBell_1.default, { ...bellProps, onClick: () => setOpen(!open) }) }) }), (0, jsx_runtime_1.jsx)(Drawer_1.default, { 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: (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflow: "hidden", children: panel }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Popover, { isOpen: open, onOpen: () => setOpen(true), onClose: close, placement: "bottom-end", gutter: 8, isLazy: true, lazyBehavior: "keepMounted", closeOnBlur: false, initialFocusRef: focusTarget, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { display: "inline-flex", "data-testid": testId ? `${testId}-bell` : undefined, children: (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.title, isDisabled: open, children: (0, jsx_runtime_1.jsx)(Primitives_1.Box, { display: "inline-flex", children: (0, jsx_runtime_1.jsx)(Primitives_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(NotificationBell_1.default, { ...bellProps }) }) }) }) }), (0, jsx_runtime_1.jsx)(Primitives_1.Portal, { children: (0, jsx_runtime_1.jsx)(Primitives_1.PopoverContent, { w: "25rem", maxW: "calc(100vw - 3rem)", p: 0, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: radii_1.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 ((0, jsx_runtime_1.jsx)(NotificationCenterProvider_1.NotificationScope, { source: props, children: (0, jsx_runtime_1.jsx)(CenterBody, { variant: variant, onOpenInbox: onOpenInbox, onOpenSettings: onOpenSettings, isOpen: isOpen, onOpenChange: onOpenChange, defaultTab: defaultTab, labels: labels, "data-testid": testId }) }));
+};
+exports.default = NotificationCenter;

package/dist/Components/NotificationCenter/center/NotificationCenterProps.d.ts

@@ -0,0 +1,71 @@
+import type { NotificationCounts, NotificationLabels, NotificationSourceBinding } from "../core/NotificationSourceProps";
+/** Strings the bell and the panel add to the shared ones; anything left out stays English. */
+export interface NotificationCenterLabels extends NotificationLabels {
+    /** The bell's accessible name, built from the server counts. */
+    bell: (counts: NotificationCounts) => string;
+    /** Panel heading. */
+    title: string;
+    /** First tab: decisions and unread mentions. */
+    needsYouTab: string;
+    /** Second tab: everything else. */
+    activityTab: string;
+    /** Accessible name of the tab list. */
+    tabsLabel: string;
+    /** Header action for the open tab. */
+    markAllRead: string;
+    /** Footer link to the full inbox. */
+    openInbox: string;
+    /** Header gear. */
+    settings: string;
+    /** Close button of the phone sheet. */
+    close: string;
+    /** Spoken while the first fetch is running. */
+    loading: string;
+    /** Heading of the failed-load panel. */
+    loadErrorTitle: string;
+    /** Body of the failed-load panel. */
+    loadErrorDescription: string;
+    /** Heading shown when the person's role can't see notifications. */
+    noAccessTitle: string;
+    /** Body of the no-access panel; `appName` comes from the source. */
+    noAccessDescription: (appName?: string) => string;
+    /** Heading of an empty Needs you tab. */
+    emptyNeedsYouTitle: string;
+    /** Body of an empty Needs you tab. */
+    emptyNeedsYouDescription: string;
+    /** Heading of an empty Activity tab. */
+    emptyActivityTitle: string;
+    /** Body of an empty Activity tab. */
+    emptyActivityDescription: string;
+    /** Offline banner; `loadedAt` is the already formatted time of the last fetch, if known. */
+    offlineBanner: (loadedAt: string | undefined) => string;
+    /** Visible text of the "N new" pill. */
+    newCount: (count: number) => string;
+    /** Accessible name of the "N new" pill; must start with the visible text. */
+    newCountName: (count: number) => string;
+    /** A tab count above the cap, e.g. "99+". */
+    overflowCount: (cap: number) => string;
+}
+/** Forces one presentation; leave it out and the panel follows the viewport. */
+export type NotificationCenterVariant = "popover" | "sheet";
+/** The panel's two tabs; type filters live only in the inbox. */
+export type NotificationCenterTab = "needsYou" | "activity";
+/** Bell plus panel with exactly two tabs; pass the source props, or render it inside a `NotificationCenterProvider`. Needs a `ToasterProvider` above. */
+export type NotificationCenterProps = NotificationSourceBinding & {
+    /** "popover" anchors the panel to the bell, "sheet" opens it full screen; defaults to a popover from 48em up and a sheet below. */
+    variant?: NotificationCenterVariant;
+    /** Shows "Open inbox" in the panel footer; the library never routes. */
+    onOpenInbox?: () => void;
+    /** Shows the settings gear in the panel header. */
+    onOpenSettings?: () => void;
+    /** Controlled open state; leave it out and the bell toggles the panel itself. */
+    isOpen?: boolean;
+    /** Called when the bell, Esc, an outside click or opening a row asks to open or close. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Tab on open; defaults to Needs you while it holds anything, else Activity. */
+    defaultTab?: NotificationCenterTab;
+    /** Bell and panel strings; shared keys override the provider's for this component only. */
+    labels?: Partial<NotificationCenterLabels>;
+    /** Test id root: the bell gets `-bell`, the panel `-panel`. */
+    "data-testid"?: string;
+};

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

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

package/dist/Components/NotificationCenter/center/PanelRows.d.ts

@@ -0,0 +1,10 @@
+import type { NotificationRowOpenEvent } from "../row/NotificationRowProps";
+import type { LiveNotificationEntry, NotificationFormatter, NotificationGroup } from "../core/NotificationEngineProps";
+interface PanelRowsProps {
+    groups: NotificationGroup[];
+    variant: "panel" | "phone";
+    format: NotificationFormatter;
+    onOpenItem: (item: LiveNotificationEntry, event: NotificationRowOpenEvent) => void;
+}
+export declare const PanelRows: ({ groups, variant, format, onOpenItem }: PanelRowsProps) => import("react/jsx-runtime").JSX.Element;
+export {};