@12-apps/notifications 4.10.2 → 4.11.0

package/src/react/bell-button.tsx

@@ -1,19 +1,26 @@
 /**
  * Bare bell trigger with the live unread badge — for hosts that do not already
- * have a styled icon-button slot. A host with its own trigger chrome uses
- * `useUnreadCount` + `Panel` directly.
+ * have a styled icon-button slot.
+ *
+ * A host with its own trigger chrome uses `useBellBadge` + `Panel` directly,
+ * and NOT `useUnreadCount`, which is what this sentence used to say. That
+ * advice was taken, verbatim and by name, by a storefront whose header needed
+ * its own trigger — and it gave that storefront a bell showing nothing at all
+ * while a live pedido sat in the panel it opens, because `useUnreadCount`
+ * counts inbox rows and knows nothing about what is happening right now.
  */
-import { useSyncExternalStore, type JSX } from 'react';
+import type { JSX } from 'react';
 
 import { Badge } from '@12-apps/ui/data-display/Badge';
 import { Box } from '@12-apps/ui/mui/Box';
 
 import type { NotificationMessages } from '../messages';
 
+import { useInboxBellBadge, useLiveBellBadge } from './bell-badge';
 import { BellIcon } from './bell-icon';
-import { useUnreadCount, type NotificationsSignalHook, type NotificationsSubscribe } from './hooks';
+import type { NotificationsSignalHook, NotificationsSubscribe } from './hooks';
 import type { LiveActivitiesConfig } from './live-config';
-import { hasUnseenActivity, type LiveSeenStore } from './live-seen';
+import type { LiveSeenStore } from './live-seen';
 import type { InboxStore } from './inbox-state';
 
 const triggerSx = {
@@ -111,14 +118,12 @@ export function BellButton({
   subscribe?: NotificationsSubscribe;
   useSignal?: NotificationsSignalHook;
 }): JSX.Element {
-  const count = useUnreadCount(store, {
+  const badge = useInboxBellBadge(store, {
     enabled,
     ...(subscribe ? { subscribe } : {}),
     ...(useSignal ? { useSignal } : {}),
   });
-  // No live config on this host: unread IS the whole count, and an unread row
-  // is by definition something the reader has not seen.
-  return <BellTrigger onClick={onClick} count={count} hasNew={count > 0} messages={messages} />;
+  return <BellTrigger onClick={onClick} {...badge} messages={messages} />;
 }
 
 /**
@@ -130,14 +135,9 @@ export function BellButton({
  * unrelated component rather than here. The factory knows statically which host
  * it is building for and picks one.
  *
- * ## What it costs the host, stated plainly
- *
- * The bell is mounted for as long as the app is, so unlike the panel's copy of
- * this hook there is no "nobody is looking" state to stand down in — `active`
- * is simply `enabled`. A host that answers by polling therefore polls for every
- * signed-in reader whether or not they ever open the centre. That is the price
- * of a badge that knows about live activities at all, and the reason to answer
- * this hook from a pushed cache rather than from an interval.
+ * What the number MEANS, and what it costs the host, is `bell-badge.ts` — the
+ * same hook a host with its own trigger chrome reaches through the factory's
+ * `useBellBadge`, so the two bells can never disagree about the count.
  */
 export function LiveBellButton({
   onClick,
@@ -156,22 +156,10 @@ export function LiveBellButton({
   live: LiveActivitiesConfig;
   seen: LiveSeenStore;
 }): JSX.Element {
-  const unread = useUnreadCount(store, {
+  const badge = useLiveBellBadge(store, live, seen, {
     enabled,
     ...(subscribe ? { subscribe } : {}),
     ...(useSignal ? { useSignal } : {}),
   });
-  const activities = live.useActivities({ active: enabled });
-  const seenIso = useSyncExternalStore(seen.subscribe, seen.read, seen.read);
-  const liveCount = enabled ? activities.length : 0;
-  return (
-    <BellTrigger
-      onClick={onClick}
-      // A live entry counts. It is a notification — it is the one the reader
-      // most wants to know about — and the panel it opens lists it.
-      count={unread + liveCount}
-      hasNew={unread > 0 || (enabled && hasUnseenActivity(activities, seenIso))}
-      messages={messages}
-    />
-  );
+  return <BellTrigger onClick={onClick} {...badge} messages={messages} />;
 }

package/src/react/create-web-notifications.tsx

@@ -3,6 +3,7 @@ import { useState, type ComponentType, type JSX } from 'react';
 import { messagesOf, type NotificationMessages } from '../messages';
 
 import { createNotificationsApiClient, type NotificationsApiClient } from './api';
+import { useInboxBellBadge, useLiveBellBadge, type BellBadge } from './bell-badge';
 import { BellButton, LiveBellButton, type BellButtonProps } from './bell-button';
 import {
   useUnreadCount,
@@ -11,7 +12,7 @@ import {
 } from './hooks';
 import { createInboxStore, type InboxStore } from './inbox-state';
 import type { LiveActivitiesConfig } from './live-config';
-import { createLiveSeenStore } from './live-seen';
+import { createLiveSeenStore, type LiveSeenStore } from './live-seen';
 import { lazyNotificationsPanel } from './panel-lazy';
 import type { NotificationsPanelProps } from './panel';
 import { lazyPreferencesPage } from './page-lazy';
@@ -94,8 +95,31 @@ export interface WebNotifications {
     enabled?: boolean;
     onNavigate?: (link: string) => void;
   }>;
-  /** The badge number, for a host with its own trigger chrome. */
+  /**
+   * The unread INBOX count.
+   *
+   * For a host with its own trigger chrome only when that host configured no
+   * live activities — otherwise it is a bell that ignores everything happening
+   * right now, and `useBellBadge` below is the door. Still the right hook for
+   * anything that genuinely wants "how many unread rows".
+   */
   useUnreadCount: (options?: { enabled?: boolean }) => number;
+  /**
+   * The badge's NUMBER AND TONE, for a host with its own trigger chrome.
+   *
+   * What `useUnreadCount` should have been for a host that also configured live
+   * activities, and the reason it is a second door rather than a change to that
+   * one: a count alone cannot express a bell, because a live entry is present
+   * without being news (see `./bell-badge`). A host that renders
+   * `useUnreadCount` in its own chrome gets a badge that ignores everything
+   * happening right now — which is not a subtle wrongness, it is the pinned
+   * pedido on screen going uncounted.
+   *
+   * Identical to what this package's own `BellButton` draws, because it is the
+   * hook that bell uses. Without live activities configured it is
+   * `useUnreadCount` plus `hasNew: count > 0`.
+   */
+  useBellBadge: (options?: { enabled?: boolean }) => BellBadge;
   /** The shared client state, for host glue. */
   store: InboxStore;
   /** The bound wire client. */
@@ -104,6 +128,33 @@ export interface WebNotifications {
   messages: NotificationMessages;
 }
 
+/** What the factory passes both badge hooks: whatever realtime wiring it has. */
+type SubscribeOption = {
+  subscribe?: NotificationsSubscribe;
+  useSignal?: NotificationsSignalHook;
+};
+
+/**
+ * The two badge hooks, bound to this factory's store.
+ *
+ * `useBellBadge` is chosen ONCE here, the same way `Bell` is below and for the
+ * same reason: `live.useActivities` is a hook, so which implementation runs
+ * must not be a per-render decision.
+ */
+function bindBadgeHooks(
+  store: InboxStore,
+  subscribeOption: SubscribeOption,
+  liveSeen: LiveSeenStore,
+  live: LiveActivitiesConfig | undefined,
+): Pick<WebNotifications, 'useUnreadCount' | 'useBellBadge'> {
+  return {
+    useUnreadCount: (options = {}) => useUnreadCount(store, { ...options, ...subscribeOption }),
+    useBellBadge: live
+      ? (options = {}) => useLiveBellBadge(store, live, liveSeen, { ...options, ...subscribeOption })
+      : (options = {}) => useInboxBellBadge(store, { ...options, ...subscribeOption }),
+  };
+}
+
 export function createWebNotifications(config: NotificationsWebConfig): WebNotifications {
   const messages = messagesOf(config);
   const api = createNotificationsApiClient(
@@ -147,9 +198,7 @@ export function createWebNotifications(config: NotificationsWebConfig): WebNotif
     ...(live ? { live, liveSeen } : {}),
   });
 
-  function useBoundUnreadCount(options: { enabled?: boolean } = {}): number {
-    return useUnreadCount(store, { ...options, ...subscribeOption });
-  }
+  const badgeHooks = bindBadgeHooks(store, subscribeOption, liveSeen, live);
 
   function BellWithPanel({
     enabled = true,
@@ -176,7 +225,7 @@ export function createWebNotifications(config: NotificationsWebConfig): WebNotif
     BellButton: Bell,
     Panel,
     BellWithPanel,
-    useUnreadCount: useBoundUnreadCount,
+    ...badgeHooks,
     store,
     api,
     messages,

package/src/react/hooks.ts

@@ -48,23 +48,60 @@ export function useInboxState(store: InboxStore): InboxState {
   return useSyncExternalStore(store.subscribe, store.getState, store.getState);
 }
 
+/** What both badge hooks below take, and what the bell passes them. */
+export interface BadgeSyncOptions {
+  enabled?: boolean;
+  subscribe?: NotificationsSubscribe;
+  useSignal?: NotificationsSignalHook;
+}
+
+/**
+ * What a disabled badge reads, instead of whatever the store happens to hold.
+ *
+ * A CONSTANT, so `useSyncExternalStore`'s identity comparison sees no change
+ * across the renders of a signed-out session.
+ */
+const NOTHING_TO_SHOW: InboxState = {
+  unread: 0,
+  items: [],
+  status: 'idle',
+  nextCursor: null,
+  loadingMore: false,
+};
+
 /**
- * The bell badge number: pushed while a subscription is live, polled otherwise.
+ * The badge's server state, kept fresh: pushed while a subscription is live,
+ * polled otherwise.
+ *
+ * The whole state rather than the count, because every badge hook that layers
+ * on top of it needs the poll and the subscription mounted exactly ONCE per
+ * bell — read through two hooks, a bell that showed both a number and a tone
+ * would open two of everything.
+ *
+ * ## `enabled` gates the ANSWER, not only the fetching
  *
- * `enabled` gates the poll AND the subscription. A signed-out header still
- * mounts the bell, and there is nothing for it to hear.
+ * It gates the poll and the subscription, which is the obvious half. It also
+ * blanks the returned state, which is the half that was missing and matters
+ * more: the store is per FACTORY and a host builds one at module scope for the
+ * whole app, so signing out does not empty it — `refreshBadge` swallows the 401
+ * and leaves the last number in place. Without this, a hook told there is
+ * nobody signed in hands back the PREVIOUS reader's unread count and their
+ * inbox rows.
+ *
+ * Deliberately here rather than at each caller. It was at each caller, three
+ * times, in three shapes, and two of them were dead weight no test could reach
+ * — which is what an invariant looks like just before one copy of it goes
+ * missing.
+ *
+ * INTERNAL. Not exported from `./index`: it hands back rows as well as a count,
+ * and a host wanting a number has `useUnreadCount` or the factory's
+ * `useBellBadge`.
  */
-export function useUnreadCount(
-  store: InboxStore,
-  options: {
-    enabled?: boolean;
-    subscribe?: NotificationsSubscribe;
-    useSignal?: NotificationsSignalHook;
-  } = {},
-): number {
+export function useBadgeState(store: InboxStore, options: BadgeSyncOptions = {}): InboxState {
   const enabled = options.enabled ?? true;
   const subscribe = options.subscribe;
-  const { unread } = useInboxState(store);
+  const live = useInboxState(store);
+  const state = enabled ? live : NOTHING_TO_SHOW;
 
   // Called unconditionally — it is a hook, so it cannot sit behind `enabled`.
   // The host's own hook decides what to do when there is nothing to hear.
@@ -91,7 +128,18 @@ export function useUnreadCount(
     };
   }, [store, enabled, subscribe]);
 
-  return enabled ? unread : 0;
+  return state;
+}
+
+/**
+ * The bell badge number, for a host with its own trigger chrome.
+ *
+ * A host that also publishes live activities wants `useBellBadge` from the
+ * factory instead — this one counts inbox rows and knows nothing about what is
+ * happening right now.
+ */
+export function useUnreadCount(store: InboxStore, options: BadgeSyncOptions = {}): number {
+  return useBadgeState(store, options).unread;
 }
 
 /** The panel's list — only fetches while the panel is open. */

package/src/react/index.ts

@@ -26,6 +26,15 @@ export {
   type PushRegistrationPayload,
 } from './api';
 
+// `useInboxBellBadge` and `useLiveBellBadge` are deliberately NOT exported, and
+// the live one is why: it takes a `LiveSeenStore`, and the only store that
+// works is the factory's own — the panel writes "seen" into THAT one. A host
+// handed the hook and no way to build the store would either hand-roll a
+// `{read, mark, subscribe}` nothing ever writes to, and get a badge that is
+// permanently `new`, or reach for `createLiveSeenStore` and find it unexported
+// too. `useBellBadge` off the factory is the door, already bound to both.
+export type { BellBadge } from './bell-badge';
+
 export {
   BADGE_POLL_MS,
   BADGE_RECONCILE_MS,
@@ -36,10 +45,14 @@ export {
   type InboxStore,
 } from './inbox-state';
 
+// `useBadgeState` is NOT here, for the reason the raw badge hooks above are
+// not: it hands back the inbox ROWS as well as the count, and a host wanting a
+// number already has `useUnreadCount` and the factory's `useBellBadge`.
 export {
   useInboxList,
   useInboxState,
   useUnreadCount,
+  type BadgeSyncOptions,
   type NotificationsSignalHook,
   type NotificationsSubscribe,
 } from './hooks';

package/src/react/live-section.tsx

@@ -12,11 +12,15 @@
  *
  * ## What it deliberately does NOT do
  *
- * - It does not touch `unread`. A live entry is not news; counting it would put
- *   a number on the bell that no amount of reading can clear.
- * - It renders nothing at all when there is nothing live — no heading, no empty
- *   state, no reserved space. A panel with one permanent empty section in it is
- *   a panel that has taught its reader to skip the top.
+ * - It does not mark anything READ. A live entry counts on the bell, but as
+ *   itself rather than as unread — the tone, not the number, is what says
+ *   whether it is news. (This once read "it does not touch `unread`", on the
+ *   argument that counting it would put a number on the bell no amount of
+ *   reading can clear. The argument stands; the tone is what answers it.)
+ * - It renders no heading, no empty state and no reserved space when there is
+ *   nothing live — but it still renders its SLOT, so the inbox below keeps its
+ *   position and is not torn down and rebuilt every time a subject starts or
+ *   finishes.
  * - It does not fetch. `useActivities` is the host's, and `active` tells it
  *   whether anyone is looking.
  */
@@ -103,6 +107,22 @@ export interface LiveSectionProps {
 
 
 
+/**
+ * ## Why this always renders its slot, even with nothing live
+ *
+ * React reconciles a fragment's children POSITIONALLY. The section and the
+ * inbox are siblings in one fragment, and the empty branch used to render the
+ * inbox ALONE — one child rather than two — so the inbox moved to a position
+ * previously held by a different element type, which React handles by
+ * unmounting the old subtree and mounting a new one. Every `NotificationRow`
+ * would be torn down and rebuilt the moment a pedido started or finished,
+ * throwing keyboard focus to `<body>` inside a focus-trapped drawer, for a
+ * reader who was only scrolling their inbox.
+ *
+ * So the empty case renders `null` INTO the slot rather than returning early.
+ * Pinned by comparing the row's DOM NODE across the transition: a test on the
+ * test id alone passes either way, because a remounted row has the same id.
+ */
 export function LiveSection({
   config,
   messages,
@@ -129,14 +149,11 @@ export function LiveSection({
     if (active && liveCount > 0) seen?.mark(activities);
   }, [active, liveCount, activities, seen]);
 
-  if (liveCount === 0) return <>{children?.(0)}</>;
-
   return (
     <>
-    // A NAMED region. Without the label a screen-reader user meets a loose run
-    // of controls ahead of the inbox with nothing saying what they are; the
-    // panel's own title is the drawer's heading and cannot describe this block.
-    <Box
+      {/* A NAMED region, and always a SLOT — see the docblock above. */}
+      {liveCount === 0 ? null : (
+        <Box
       component="section"
       aria-labelledby={headingId}
       data-testid="live-activities"
@@ -170,9 +187,10 @@ export function LiveSection({
             {...(onOpen ? { onOpen } : {})}
             {...(config.renderIcon ? { renderIcon: config.renderIcon } : {})}
           />
-        ))}
-      </Box>
-      </Box>
+            ))}
+          </Box>
+        </Box>
+      )}
       {children?.(liveCount)}
     </>
   );

package/dist/chunk-BW723CX2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/react/bell-icon.tsx","../src/react/inbox-state.ts","../src/react/hooks.ts"],"sourcesContent":["/** Inline SVG bell (no icon-library dependency in this package). */\nimport type { JSX } from 'react';\n\nimport { Box } from '@12-apps/ui/mui/Box';\n\nexport function BellIcon({\n  size = 28,\n  dim = false,\n}: {\n  size?: number;\n  dim?: boolean;\n}): JSX.Element {\n  return (\n    <Box\n      component=\"svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n      sx={{\n        width: size,\n        height: size,\n        fill: 'none',\n        stroke: 'currentColor',\n        opacity: dim ? 0.4 : 1,\n      }}\n      strokeWidth={1.8}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6\" />\n      <path d=\"M10 20a2 2 0 0 0 4 0\" />\n    </Box>\n  );\n}\n","import type { InboxNotification } from '../wire';\n\nimport type { NotificationsApiClient } from './api';\n\n/**\n * The inbox's client state, as ONE store shared by the bell and the panel.\n *\n * They have to share it: marking a row read in the panel must move the badge in\n * the same tick, and an arrival must add a row to the list AND to the count.\n * the origin got that for free from a react-query cache the host had already\n * mounted; a published package cannot assume one — a query client is a host\n * decision, and requiring a particular one (or a particular version of one) is\n * the kind of dependency that keeps a package out of a host that made the other\n * choice. So the sharing is explicit and dependency-free: one subscribable\n * store, read through `useSyncExternalStore`.\n *\n * Optimistic on every write, with invalidate-on-error: the badge and the list\n * update instantly, and a failed write refetches the server truth rather than\n * leaving the screen asserting something the database does not say.\n */\n\nexport const PAGE_SIZE = 20;\n\n/** The badge's poll while nothing is pushing to us. */\nexport const BADGE_POLL_MS = 60_000;\n\n/**\n * The badge's interval while a realtime connection is live.\n *\n * Five minutes, not \"never\": this is the reconcile that catches an event the bus\n * dropped, and it costs one COUNT per open tab per five minutes. Deliberately\n * far slower than an operational screen's — a bell badge is ambient, and the\n * arrival that matters is pushed within milliseconds anyway. The poll does NOT\n * stop, which is the standing contract: a dropped event must cost latency and\n * never correctness.\n */\nexport const BADGE_RECONCILE_MS = 300_000;\n\nexport type InboxListStatus = 'idle' | 'pending' | 'ready' | 'error';\n\nexport interface InboxState {\n  unread: number;\n  items: InboxNotification[];\n  status: InboxListStatus;\n  /** A cursor means there is another page. */\n  nextCursor: string | null;\n  loadingMore: boolean;\n}\n\nexport interface InboxStore {\n  getState(): InboxState;\n  subscribe(listener: () => void): () => void;\n  /** Load the first page (idempotent while one is in flight). */\n  open(): void;\n  /** Refetch the badge count. */\n  refreshBadge(): void;\n  /** Refetch both — what a realtime hint or a failed write triggers. */\n  invalidate(): void;\n  loadMore(): void;\n  markRead(ids: readonly string[]): void;\n  markAllRead(): void;\n  remove(id: string): void;\n}\n\nconst EMPTY: InboxState = {\n  unread: 0,\n  items: [],\n  status: 'idle',\n  nextCursor: null,\n  loadingMore: false,\n};\n\n/** The mutable cell the functions below share, so each one stays small. */\ninterface Cell {\n  state: InboxState;\n  listeners: Set<() => void>;\n  /** Fences a stale reload: a newer one must always win. */\n  request: number;\n}\n\nfunction patch(cell: Cell, next: Partial<InboxState>): void {\n  cell.state = { ...cell.state, ...next };\n  for (const listener of cell.listeners) listener();\n}\n\n/** Refetch the badge count. The number is always one the server just gave us. */\nfunction refreshBadge(cell: Cell, api: NotificationsApiClient): void {\n  void api\n    .unreadCount()\n    .then((unread) => patch(cell, { unread }))\n    .catch(() => undefined);\n}\n\n/**\n * Reload page one, discarding whatever the optimistic path had produced.\n * `request` fences it: a reload that started before a newer one must not land\n * after it and reinstate stale rows.\n */\nfunction reloadList(cell: Cell, api: NotificationsApiClient): void {\n  const token = (cell.request += 1);\n  patch(cell, { status: cell.state.items.length > 0 ? cell.state.status : 'pending' });\n  void api\n    .listNotifications({ limit: PAGE_SIZE })\n    .then((page) => {\n      if (token !== cell.request) return;\n      patch(cell, { items: page.items, nextCursor: page.nextCursor, status: 'ready' });\n    })\n    .catch(() => {\n      if (token !== cell.request) return;\n      patch(cell, { status: 'error' });\n    });\n}\n\nfunction invalidate(cell: Cell, api: NotificationsApiClient): void {\n  refreshBadge(cell, api);\n  if (cell.state.status !== 'idle') reloadList(cell, api);\n}\n\n/** Apply an optimistic edit; on failure, take the server's word instead. */\nfunction write(\n  cell: Cell,\n  api: NotificationsApiClient,\n  apply: () => void,\n  send: () => Promise<{ ok: boolean }>,\n): void {\n  apply();\n  void send()\n    .then((result) => {\n      if (!result.ok) invalidate(cell, api);\n    })\n    .catch(() => invalidate(cell, api));\n}\n\nfunction bumpUnread(cell: Cell, delta: number): void {\n  patch(cell, { unread: Math.max(0, cell.state.unread + delta) });\n}\n\nfunction loadMore(cell: Cell, api: NotificationsApiClient): void {\n  const cursor = cell.state.nextCursor;\n  if (!cursor || cell.state.loadingMore) return;\n  patch(cell, { loadingMore: true });\n  void api\n    .listNotifications({ cursor, limit: PAGE_SIZE })\n    .then((page) => {\n      patch(cell, {\n        items: [...cell.state.items, ...page.items],\n        nextCursor: page.nextCursor,\n        loadingMore: false,\n      });\n    })\n    .catch(() => patch(cell, { loadingMore: false }));\n}\n\nfunction markRead(cell: Cell, api: NotificationsApiClient, ids: readonly string[]): void {\n  const readAt = new Date().toISOString();\n  let flipped = 0;\n  const items = cell.state.items.map((item) => {\n    if (!ids.includes(item.id) || item.readAt !== null) return item;\n    flipped += 1;\n    return { ...item, readAt };\n  });\n  if (flipped === 0) return;\n  write(\n    cell,\n    api,\n    () => {\n      patch(cell, { items });\n      bumpUnread(cell, -flipped);\n    },\n    () => api.markRead(ids),\n  );\n}\n\nfunction remove(cell: Cell, api: NotificationsApiClient, id: string): void {\n  const target = cell.state.items.find((item) => item.id === id);\n  if (!target) return;\n  const items = cell.state.items.filter((item) => item.id !== id);\n  write(\n    cell,\n    api,\n    () => {\n      patch(cell, { items });\n      if (target.readAt === null) bumpUnread(cell, -1);\n    },\n    () => api.remove([id]),\n  );\n}\n\nexport function createInboxStore(api: NotificationsApiClient): InboxStore {\n  const cell: Cell = { state: EMPTY, listeners: new Set(), request: 0 };\n  return {\n    getState: () => cell.state,\n    subscribe(listener) {\n      cell.listeners.add(listener);\n      return () => cell.listeners.delete(listener);\n    },\n    open() {\n      if (cell.state.status === 'idle') reloadList(cell, api);\n    },\n    refreshBadge: () => refreshBadge(cell, api),\n    invalidate: () => invalidate(cell, api),\n    loadMore: () => loadMore(cell, api),\n    markRead: (ids) => markRead(cell, api, ids),\n    markAllRead() {\n      const readAt = new Date().toISOString();\n      const items = cell.state.items.map((item) => ({ ...item, readAt: item.readAt ?? readAt }));\n      write(\n        cell,\n        api,\n        () => patch(cell, { items, unread: 0 }),\n        () => api.markAllRead(),\n      );\n    },\n    remove: (id) => remove(cell, api, id),\n  };\n}\n","import { useEffect, useSyncExternalStore } from 'react';\n\nimport {\n  BADGE_POLL_MS,\n  BADGE_RECONCILE_MS,\n  type InboxState,\n  type InboxStore,\n} from './inbox-state';\n\n/**\n * The two hooks the bell and the panel use, and the realtime seam between them.\n *\n * A host that has a message bus passes `subscribe`; one that has not passes\n * nothing and keeps the 60 s poll. The bell ships in this package and mounts in\n * whatever embeds it, so it must not require the host to have adopted anything.\n */\n\n/**\n * How the surface learns an inbox changed without asking.\n *\n * Called once per mounted bell with a callback that means only \"ask again\" — no\n * payload, so the number on screen is always one the server just gave us.\n * Returns its own teardown. A host wires this to whatever it already has.\n */\nexport type NotificationsSubscribe = (onHint: () => void) => () => void;\n\n/**\n * The same wiring, as a HOOK — for a host whose realtime connection lives in\n * React context rather than in a module.\n *\n * `subscribe` above is supplied at FACTORY time, which is module scope, and a\n * context-bound connection cannot be reached from there: the provider holding\n * it is inside the tree. A host in that shape (a `<UserRealtimeProvider>` and a\n * `useUserTopics` hook, which is the common one) had no way to pass anything at\n * all, and the badge simply never heard an event.\n *\n * So this is the second door, and it is the one `@12-apps/app-shell` already\n * uses for the same problem — its consent dialog takes a `useSignal` hook for\n * exactly this reason. Two packages solving one problem two ways is how an\n * adopter ends up believing the feature is unavailable to it.\n *\n * Called during render, so it may use context and hooks freely. Pass one or\n * the other; passing both runs both, which is a host's business.\n */\nexport type NotificationsSignalHook = (onHint: () => void) => void;\n\nexport function useInboxState(store: InboxStore): InboxState {\n  return useSyncExternalStore(store.subscribe, store.getState, store.getState);\n}\n\n/**\n * The bell badge number: pushed while a subscription is live, polled otherwise.\n *\n * `enabled` gates the poll AND the subscription. A signed-out header still\n * mounts the bell, and there is nothing for it to hear.\n */\nexport function useUnreadCount(\n  store: InboxStore,\n  options: {\n    enabled?: boolean;\n    subscribe?: NotificationsSubscribe;\n    useSignal?: NotificationsSignalHook;\n  } = {},\n): number {\n  const enabled = options.enabled ?? true;\n  const subscribe = options.subscribe;\n  const { unread } = useInboxState(store);\n\n  // Called unconditionally — it is a hook, so it cannot sit behind `enabled`.\n  // The host's own hook decides what to do when there is nothing to hear.\n  options.useSignal?.(() => {\n    if (enabled) store.invalidate();\n  });\n\n  useEffect(() => {\n    if (!enabled) return;\n    store.refreshBadge();\n    const unsubscribe = subscribe?.(() => store.invalidate());\n    // A live subscription relaxes the poll to the reconcile interval; without\n    // one it stays the 60 s poll.\n    const interval = setInterval(\n      () => store.refreshBadge(),\n      subscribe ? BADGE_RECONCILE_MS : BADGE_POLL_MS,\n    );\n    const onFocus = (): void => store.refreshBadge();\n    globalThis.addEventListener?.('focus', onFocus);\n    return () => {\n      clearInterval(interval);\n      globalThis.removeEventListener?.('focus', onFocus);\n      unsubscribe?.();\n    };\n  }, [store, enabled, subscribe]);\n\n  return enabled ? unread : 0;\n}\n\n/** The panel's list — only fetches while the panel is open. */\nexport function useInboxList(store: InboxStore, open: boolean): InboxState {\n  const state = useInboxState(store);\n  useEffect(() => {\n    if (open) store.open();\n  }, [store, open]);\n  return state;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-I5QUMTCN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/react/api.ts","../src/react/transport.ts","../src/react/create-web-notifications.tsx","../src/react/bell-button.tsx","../src/react/live-seen.ts","../src/react/panel-lazy.tsx","../src/react/page-lazy.tsx"],"sourcesContent":["import type { ChannelRow } from '../preferences-core';\nimport type { NotificationChannel } from '../types';\nimport type { ListNotificationsResult } from '../wire';\n\nimport type { NotificationsResult, NotificationsTransport } from './transport';\n\n/**\n * The wire client, bound to one mount (12-15).\n *\n * Every path this package's screens can call, in one place — which is what\n * makes the api half's route table and the web half's URLs one contract instead\n * of two lists that drift.\n */\n\n/** `GET <mount>/notification-preferences` and the PUT's answer. */\nexport interface PreferencesPayload {\n  preferences: Record<string, ChannelRow>;\n  availability: Record<NotificationChannel, boolean>;\n  /** The host's taxonomy, so the screen renders it without being told twice. */\n  categories: string[];\n}\n\n/** `GET <mount>/push-subscriptions`. */\nexport interface PushRegistrationPayload {\n  /** null = web push is not configured on this deployment. */\n  vapidPublicKey: string | null;\n  count: number;\n  /**\n   * Whether the endpoint asked about is still registered to the caller. Present\n   * only when one was passed — see {@link NotificationsApiClient.getPushRegistration}.\n   */\n  registered?: boolean;\n}\n\nexport interface NotificationsApiClient {\n  listNotifications(input: {\n    cursor?: string | null;\n    limit?: number;\n    filter?: 'all' | 'unread';\n  }): Promise<ListNotificationsResult>;\n  unreadCount(): Promise<number>;\n  markRead(ids: readonly string[]): Promise<NotificationsResult<{ updated: number }>>;\n  markAllRead(): Promise<NotificationsResult<{ updated: number }>>;\n  remove(ids: readonly string[]): Promise<NotificationsResult<{ deleted: number }>>;\n  getPreferences(): Promise<PreferencesPayload>;\n  savePreference(\n    category: string,\n    channel: NotificationChannel,\n    enabled: boolean,\n  ): Promise<NotificationsResult<PreferencesPayload>>;\n  /**\n   * The deployment's VAPID key and the caller's device count — and, when an\n   * `endpoint` is passed, whether the SERVER still has that exact subscription\n   * under the caller's id. The browser holding a subscription object is not\n   * evidence of that: a re-own or a 404/410 prune drops the row and leaves the\n   * browser's object in place.\n   */\n  getPushRegistration(input?: { endpoint?: string }): Promise<PushRegistrationPayload>;\n  savePushSubscription(input: {\n    endpoint: string;\n    keys: { p256dh: string; auth: string };\n  }): Promise<NotificationsResult<{ count: number }>>;\n  removePushSubscription(endpoint: string): Promise<NotificationsResult<{ count: number }>>;\n}\n\nexport function createNotificationsApiClient(\n  apiBase: string,\n  transport: NotificationsTransport,\n): NotificationsApiClient {\n  const base = apiBase.replace(/\\/$/, '');\n  const url = (path: string): string => `${base}${path}`;\n\n  return {\n    listNotifications({ cursor, limit, filter }) {\n      const params = new URLSearchParams();\n      if (limit !== undefined) params.set('limit', String(limit));\n      if (cursor) params.set('cursor', cursor);\n      if (filter) params.set('filter', filter);\n      const query = params.toString();\n      return transport.get<ListNotificationsResult>(\n        url(`/notifications${query ? `?${query}` : ''}`),\n      );\n    },\n    async unreadCount() {\n      const { count } = await transport.get<{ count: number }>(\n        url('/notifications/unread-count'),\n      );\n      return count;\n    },\n    markRead: (ids) =>\n      transport.send(url('/notifications/mark-read'), 'POST', { ids: [...ids] }),\n    markAllRead: () => transport.send(url('/notifications/mark-read'), 'POST', { all: true }),\n    remove: (ids) => transport.send(url('/notifications/delete'), 'POST', { ids: [...ids] }),\n    getPreferences: () => transport.get<PreferencesPayload>(url('/notification-preferences')),\n    savePreference: (category, channel, enabled) =>\n      transport.send(url('/notification-preferences'), 'PUT', {\n        [category]: { [channel]: enabled },\n      }),\n    getPushRegistration: ({ endpoint } = {}) =>\n      transport.get<PushRegistrationPayload>(\n        url(\n          endpoint\n            ? `/push-subscriptions?endpoint=${encodeURIComponent(endpoint)}`\n            : '/push-subscriptions',\n        ),\n      ),\n    savePushSubscription: (input) => transport.send(url('/push-subscriptions'), 'POST', input),\n    removePushSubscription: (endpoint) =>\n      transport.send(url('/push-subscriptions'), 'DELETE', { endpoint }),\n  };\n}\n","/**\n * How the notification screens reach their data (12-15) — the report-builder\n * transport doctrine: this is the ONLY way the surface performs I/O, so a\n * caller supplying one has substituted the entire backend without stubbing a\n * global. The default is same-origin `fetch` riding the browser's cookies.\n */\n\n/** A write outcome the screens branch on — never a thrown mutation. */\nexport type NotificationsResult<T> = { ok: true; data: T } | { ok: false; error: string };\n\n/** A failed read, carrying the status the screens branch on (401 = signed out). */\nexport class NotificationsHttpError extends Error {\n  readonly status: number;\n  constructor(status: number, message: string) {\n    super(message);\n    this.name = 'NotificationsHttpError';\n    this.status = status;\n    Object.setPrototypeOf(this, NotificationsHttpError.prototype);\n  }\n}\n\nexport interface NotificationsTransport {\n  /** A read. Returns the payload INSIDE the `{ data }` envelope. */\n  get<T>(path: string): Promise<T>;\n  /** A write. Returns a {@link NotificationsResult} rather than rejecting. */\n  send<T>(path: string, method: string, body?: unknown): Promise<NotificationsResult<T>>;\n}\n\n/**\n * @param fallbackError What a failed write says when the server sent no\n * sentence of its own — REQUIRED, the host's words. `createWebNotifications`\n * already passes its (equally required) `messages.operationFailed`; only a\n * host constructing the transport directly writes it here. The old default\n * was one application's Portuguese, and the only string in this package the\n * required-messages port did not cover.\n */\nexport function httpNotificationsTransport(fallbackError: string): NotificationsTransport {\n  return {\n    async get<T>(path: string): Promise<T> {\n      const response = await fetch(path, {\n        credentials: 'same-origin',\n        headers: { Accept: 'application/json' },\n      });\n      const payload = (await response.json().catch(() => null)) as\n        | { data?: T; error?: string }\n        | null;\n      if (!response.ok) {\n        throw new NotificationsHttpError(\n          response.status,\n          payload?.error ?? `HTTP ${response.status} for ${path}`,\n        );\n      }\n      return (payload?.data ?? payload) as T;\n    },\n\n    async send<T>(path: string, method: string, body?: unknown): Promise<NotificationsResult<T>> {\n      try {\n        const response = await fetch(path, {\n          method,\n          credentials: 'same-origin',\n          headers: {\n            Accept: 'application/json',\n            ...(body === undefined ? {} : { 'Content-Type': 'application/json' }),\n          },\n          ...(body === undefined ? {} : { body: JSON.stringify(body) }),\n        });\n        if (response.status === 204) return { ok: true, data: undefined as T };\n        const payload = (await response.json().catch(() => null)) as\n          | { data?: T; error?: string }\n          | null;\n        if (!response.ok) return { ok: false, error: payload?.error ?? fallbackError };\n        return { ok: true, data: (payload?.data ?? payload) as T };\n      } catch {\n        return { ok: false, error: fallbackError };\n      }\n    },\n  };\n}\n","import { useState, type ComponentType, type JSX } from 'react';\n\nimport { messagesOf, type NotificationMessages } from '../messages';\n\nimport { createNotificationsApiClient, type NotificationsApiClient } from './api';\nimport { BellButton, LiveBellButton, type BellButtonProps } from './bell-button';\nimport {\n  useUnreadCount,\n  type NotificationsSignalHook,\n  type NotificationsSubscribe,\n} from './hooks';\nimport { createInboxStore, type InboxStore } from './inbox-state';\nimport type { LiveActivitiesConfig } from './live-config';\nimport { createLiveSeenStore } from './live-seen';\nimport { lazyNotificationsPanel } from './panel-lazy';\nimport type { NotificationsPanelProps } from './panel';\nimport { lazyPreferencesPage } from './page-lazy';\nimport type { PreferencesScreenProps } from './preferences-screen';\nimport { httpNotificationsTransport, type NotificationsTransport } from './transport';\nimport type { WebPushSetupConfig } from './web-push-setup';\n\n/**\n * The one thing this package exposes to a FRONTEND host (12-15).\n *\n * Everything the notification centre IS — the bell with its live badge, the\n * slide-over inbox with its optimistic mark-read / delete / mark-all and its\n * cursor pager, the preferences matrix with its availability hints and the\n * per-browser push enable step, and every wire call between them — lives inside\n * this package. The host names where the API is mounted, and that is the whole\n * wiring.\n *\n * `page` is the standalone surface (the preferences screen), which is the one\n * thing a host routes to. The bell and the panel are a PAIR a host drops into\n * its own chrome, and they share one store, so a read in the panel moves the\n * badge in the same tick.\n */\n\nexport interface NotificationsWebConfig {\n  /** The account mount the routes live under, e.g. `/api/account`. */\n  apiBase: string;\n  /** How the surface reaches its data. Default: same-origin fetch. */\n  transport?: NotificationsTransport;\n  /** User-facing copy overrides (pt-BR product copy by default). */\n  messages: NotificationMessages;\n  /**\n   * How the surface learns an inbox changed without asking — the host's message\n   * bus. Without it the badge keeps its 60 s poll, which is the standing\n   * contract rather than a fallback: a dropped event must cost latency, never\n   * correctness.\n   */\n  subscribe?: NotificationsSubscribe;\n  /**\n   * The same wiring as a HOOK, for a host whose realtime connection lives in\n   * React context — see `NotificationsSignalHook`. `subscribe` is read at\n   * factory time, which such a host cannot reach.\n   */\n  useSignal?: NotificationsSignalHook;\n  /** The browser push enable step's host seams (SW path, platform hint). */\n  webPush?: WebPushSetupConfig;\n  /**\n   * LIVE ACTIVITIES — the ongoing-state entries pinned above the inbox list.\n   *\n   * Opt-in, and absent means absent: a host that passes nothing gets the panel\n   * it had, with no section, no heading and no reserved space. See\n   * `./live-config` for the two things a host has to supply (where they come\n   * from, and what the section says) and `../live` for what one IS.\n   */\n  liveActivities?: LiveActivitiesConfig;\n}\n\nexport interface WebNotifications {\n  /**\n   * The routed surface: the preferences screen.\n   *\n   * Loaded on demand — see `page-lazy.tsx`. A host that mounts only the bell and\n   * the panel never downloads it, and a host that routes to it fetches it while\n   * entering that route.\n   */\n  page: ComponentType<PreferencesScreenProps>;\n  /** The bell, already bound to the shared store. */\n  BellButton: ComponentType<BellButtonProps>;\n  /**\n   * The inbox slide-over, sharing that store.\n   *\n   * Loaded the first time it is opened — see `panel-lazy.tsx`. Until then a\n   * host's chrome carries the bell and nothing else.\n   */\n  Panel: ComponentType<NotificationsPanelProps>;\n  /**\n   * Bell + panel as ONE element, for a host that just wants the feature in its\n   * header and does not want to own the open/closed state.\n   */\n  BellWithPanel: ComponentType<{\n    enabled?: boolean;\n    onNavigate?: (link: string) => void;\n  }>;\n  /** The badge number, for a host with its own trigger chrome. */\n  useUnreadCount: (options?: { enabled?: boolean }) => number;\n  /** The shared client state, for host glue. */\n  store: InboxStore;\n  /** The bound wire client. */\n  api: NotificationsApiClient;\n  /** The copy in force, so a host's own chrome can reuse a sentence. */\n  messages: NotificationMessages;\n}\n\nexport function createWebNotifications(config: NotificationsWebConfig): WebNotifications {\n  const messages = messagesOf(config);\n  const api = createNotificationsApiClient(\n    config.apiBase,\n    config.transport ?? httpNotificationsTransport(messages.operationFailed),\n  );\n  const store = createInboxStore(api);\n  const webPush = config.webPush ?? {};\n  const subscribe = config.subscribe;\n  const subscribeOption = {\n    ...(subscribe ? { subscribe } : {}),\n    ...(config.useSignal ? { useSignal: config.useSignal } : {}),\n  };\n\n  // One store per factory, shared by the bell that READS it and the panel that\n  // WRITES it — the same arrangement as the inbox store above, and for the same\n  // reason: two independent copies would disagree about what the reader saw.\n  const liveSeen = createLiveSeenStore();\n\n  // Chosen ONCE, here, because `useActivities` is a hook and the choice must\n  // not be made per render: a bell that read an optional config inside itself\n  // would be calling a hook conditionally.\n  const live = config.liveActivities;\n  const Bell: ComponentType<BellButtonProps> = live\n    ? (props) => (\n        <LiveBellButton\n          {...props}\n          store={store}\n          messages={messages}\n          live={live}\n          seen={liveSeen}\n          {...subscribeOption}\n        />\n      )\n    : (props) => (\n        <BellButton {...props} store={store} messages={messages} {...subscribeOption} />\n      );\n  const Panel = lazyNotificationsPanel({\n    store,\n    messages,\n    ...(live ? { live, liveSeen } : {}),\n  });\n\n  function useBoundUnreadCount(options: { enabled?: boolean } = {}): number {\n    return useUnreadCount(store, { ...options, ...subscribeOption });\n  }\n\n  function BellWithPanel({\n    enabled = true,\n    onNavigate,\n  }: {\n    enabled?: boolean;\n    onNavigate?: (link: string) => void;\n  }): JSX.Element {\n    const [open, setOpen] = useState(false);\n    return (\n      <>\n        <Bell enabled={enabled} onClick={() => setOpen(true)} />\n        <Panel\n          open={open}\n          onClose={() => setOpen(false)}\n          {...(onNavigate ? { onNavigate } : {})}\n        />\n      </>\n    );\n  }\n\n  return {\n    page: lazyPreferencesPage({ api, messages, webPush }),\n    BellButton: Bell,\n    Panel,\n    BellWithPanel,\n    useUnreadCount: useBoundUnreadCount,\n    store,\n    api,\n    messages,\n  };\n}\n","/**\n * Bare bell trigger with the live unread badge — for hosts that do not already\n * have a styled icon-button slot. A host with its own trigger chrome uses\n * `useUnreadCount` + `Panel` directly.\n */\nimport { useSyncExternalStore, type JSX } from 'react';\n\nimport { Badge } from '@12-apps/ui/data-display/Badge';\nimport { Box } from '@12-apps/ui/mui/Box';\n\nimport type { NotificationMessages } from '../messages';\n\nimport { BellIcon } from './bell-icon';\nimport { useUnreadCount, type NotificationsSignalHook, type NotificationsSubscribe } from './hooks';\nimport type { LiveActivitiesConfig } from './live-config';\nimport { hasUnseenActivity, type LiveSeenStore } from './live-seen';\nimport type { InboxStore } from './inbox-state';\n\nconst triggerSx = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  p: 0.5,\n  border: 'none',\n  background: 'none',\n  cursor: 'pointer',\n  color: 'text.primary',\n  lineHeight: 0,\n  '& *': { cursor: 'pointer' },\n  '&:hover': { color: 'primary.main' },\n  '&:focus-visible': {\n    outline: '2px solid',\n    outlineColor: 'primary.main',\n    outlineOffset: '2px',\n    borderRadius: '50%',\n  },\n} as const;\n\nexport interface BellButtonProps {\n  onClick: () => void;\n  /** Signed-out hosts still mount the bell; `false` silences it. */\n  enabled?: boolean;\n}\n\n/**\n * The trigger itself, given a count and whether any of it is NEW.\n *\n * Presentational, and shared by both bells below, so the two can never drift on\n * what the badge looks like — only on where the number comes from.\n *\n * ## The two tones\n *\n * `primary` says *something happened*; `neutral` says *something is present*. A\n * live activity is the reason that distinction has to exist: it stays on the\n * panel for as long as the thing is happening, so a bell that painted every\n * live entry as new would be permanently red for a pedido the reader already\n * looked at, and a bell that ignored them would say nothing at all while one\n * was running. Grey keeps the count honest without spending attention twice.\n */\nfunction BellTrigger({\n  onClick,\n  count,\n  hasNew,\n  messages,\n}: {\n  onClick: () => void;\n  count: number;\n  hasNew: boolean;\n  messages: NotificationMessages;\n}): JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onClick}\n      // `openBellWithUnread` rather than a new message, and not for want of\n      // precision: `NotificationMessages` is REQUIRED of every host, so adding\n      // a field is a breaking change to a package several apps already mount.\n      // The sentence a host wrote for \"you have N\" is the sentence this wants.\n      aria-label={count > 0 ? messages.openBellWithUnread(count) : messages.openBell}\n      data-testid=\"notifications-bell\"\n      sx={triggerSx}\n    >\n      <Badge\n        content={count > 0 ? count : undefined}\n        color={hasNew ? 'primary' : 'neutral'}\n        variant=\"count\"\n        max={99}\n        data-testid=\"notifications-badge\"\n        // The tone is carried by a colour, and a colour is not something a\n        // test can read — nor, on its own, a signal every reader can. This is\n        // what the tests assert on.\n        data-tone={hasNew ? 'new' : 'seen'}\n      >\n        <BellIcon size={28} />\n      </Badge>\n    </Box>\n  );\n}\n\nexport function BellButton({\n  onClick,\n  enabled = true,\n  store,\n  messages,\n  subscribe,\n  useSignal,\n}: BellButtonProps & {\n  store: InboxStore;\n  messages: NotificationMessages;\n  subscribe?: NotificationsSubscribe;\n  useSignal?: NotificationsSignalHook;\n}): JSX.Element {\n  const count = useUnreadCount(store, {\n    enabled,\n    ...(subscribe ? { subscribe } : {}),\n    ...(useSignal ? { useSignal } : {}),\n  });\n  // No live config on this host: unread IS the whole count, and an unread row\n  // is by definition something the reader has not seen.\n  return <BellTrigger onClick={onClick} count={count} hasNew={count > 0} messages={messages} />;\n}\n\n/**\n * The bell for a host that configured live activities.\n *\n * A SECOND component rather than a flag on the one above, because the host's\n * `useActivities` is a hook: reading an optional config inside one component\n * would mean calling it conditionally, which React reports as a crash in some\n * unrelated component rather than here. The factory knows statically which host\n * it is building for and picks one.\n *\n * ## What it costs the host, stated plainly\n *\n * The bell is mounted for as long as the app is, so unlike the panel's copy of\n * this hook there is no \"nobody is looking\" state to stand down in — `active`\n * is simply `enabled`. A host that answers by polling therefore polls for every\n * signed-in reader whether or not they ever open the centre. That is the price\n * of a badge that knows about live activities at all, and the reason to answer\n * this hook from a pushed cache rather than from an interval.\n */\nexport function LiveBellButton({\n  onClick,\n  enabled = true,\n  store,\n  messages,\n  subscribe,\n  useSignal,\n  live,\n  seen,\n}: BellButtonProps & {\n  store: InboxStore;\n  messages: NotificationMessages;\n  subscribe?: NotificationsSubscribe;\n  useSignal?: NotificationsSignalHook;\n  live: LiveActivitiesConfig;\n  seen: LiveSeenStore;\n}): JSX.Element {\n  const unread = useUnreadCount(store, {\n    enabled,\n    ...(subscribe ? { subscribe } : {}),\n    ...(useSignal ? { useSignal } : {}),\n  });\n  const activities = live.useActivities({ active: enabled });\n  const seenIso = useSyncExternalStore(seen.subscribe, seen.read, seen.read);\n  const liveCount = enabled ? activities.length : 0;\n  return (\n    <BellTrigger\n      onClick={onClick}\n      // A live entry counts. It is a notification — it is the one the reader\n      // most wants to know about — and the panel it opens lists it.\n      count={unread + liveCount}\n      hasNew={unread > 0 || (enabled && hasUnseenActivity(activities, seenIso))}\n      messages={messages}\n    />\n  );\n}\n","/**\n * What the reader has already been shown, so the bell can say NEW rather than\n * merely PRESENT.\n *\n * A live activity is unlike an inbox row in the one way that matters here: it\n * stays on the panel for as long as the thing is happening, so its presence\n * cannot mean \"you have not seen this\". A pedido that has been `Preparo` for\n * ten minutes is still live and still worth counting, but nothing has happened\n * — and a badge that shouts for a subject the reader has already looked at is a\n * badge people stop reading.\n *\n * So presence and novelty are answered separately: the COUNT comes from how\n * many are live, and the TONE comes from this. The panel writes it — being on\n * screen is what seen means — and the bell reads it.\n *\n * ## Per subject, not one watermark\n *\n * A single \"newest instant already seen\" is smaller and was the first cut, and\n * it is wrong in a way that shows up in normal use: a pedido placed ten minutes\n * ago but only now reaching the client arrives with an `updatedAt` BEHIND the\n * watermark, and would be silently marked as already seen. The reader has never\n * laid eyes on it. Keyed by subject, an id that has not been recorded is new\n * whatever its clock says.\n *\n * Bounded by pruning rather than by expiry: every write keeps only the subjects\n * that are live at that moment, so the record can never outgrow the number of\n * things happening at once. A subject that finishes and later comes back is\n * news again, which is correct — it is a different occurrence.\n */\nimport type { LiveActivity } from '../live';\n\nconst STORAGE_KEY = '12a.notifications.live-seen';\n\n/** id -> the `updatedAt` that was on screen. */\ntype SeenMap = Readonly<Record<string, string>>;\n\nconst EMPTY: SeenMap = {};\n\n/** ms since epoch, or `null` for an absent or unparseable stamp. */\nfunction instant(iso: string | undefined): number | null {\n  if (iso === undefined) return null;\n  const ms = Date.parse(iso);\n  return Number.isNaN(ms) ? null : ms;\n}\n\n/**\n * Read/write through `try`, every time.\n *\n * `localStorage` is not merely absent in SSR and in a worker — the ACCESSOR\n * itself throws in a browser set to block site data. A notification bell that\n * cannot render because storage is blocked is a worse failure than one that\n * forgets what was seen, and forgetting degrades in the safe direction: towards\n * saying something is happening.\n */\nfunction readStored(): SeenMap {\n  try {\n    const raw = globalThis.localStorage?.getItem(STORAGE_KEY);\n    if (!raw) return EMPTY;\n    const parsed: unknown = JSON.parse(raw);\n    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) return EMPTY;\n    // Anything can be in storage — another version of this package, or a person\n    // with the devtools open. Keep only what has the shape this reads.\n    const clean: Record<string, string> = {};\n    for (const [id, value] of Object.entries(parsed)) {\n      if (typeof value === 'string') clean[id] = value;\n    }\n    return clean;\n  } catch {\n    return EMPTY;\n  }\n}\n\nfunction writeStored(value: SeenMap): void {\n  try {\n    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(value));\n  } catch {\n    // Blocked or full. The badge stays new a while longer; nothing else breaks.\n  }\n}\n\nexport interface LiveSeenStore {\n  /** What has been shown, keyed by subject id. */\n  read: () => SeenMap;\n  /** Record that exactly these are on screen now, forgetting subjects that are not. */\n  mark: (activities: readonly LiveActivity[]) => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\nexport function createLiveSeenStore(): LiveSeenStore {\n  // Mirrored in memory as well as in storage: `useSyncExternalStore` compares\n  // snapshots by IDENTITY and calls `read` on every render, so parsing storage\n  // there would hand it a fresh object each time and re-render for ever.\n  let current = readStored();\n  const listeners = new Set<() => void>();\n\n  return {\n    read: () => current,\n    mark: (activities) => {\n      const next: Record<string, string> = {};\n      for (const activity of activities) next[activity.id] = activity.updatedAt;\n      // Identity is the snapshot, so an unchanged map must not become a new\n      // object — see `read` above.\n      const ids = Object.keys(next);\n      const same =\n        ids.length === Object.keys(current).length &&\n        ids.every((id) => current[id] === next[id]);\n      if (same) return;\n      current = next;\n      writeStored(next);\n      for (const listener of listeners) listener();\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n}\n\n/**\n * Whether any of these has moved, or arrived, since the reader last looked.\n *\n * An id with nothing recorded is new — that is the case the per-subject record\n * exists for. An unparseable stamp is treated as new too: the alternative is\n * silently never alerting for a host whose clock format this does not read.\n */\nexport function hasUnseenActivity(\n  activities: readonly LiveActivity[],\n  seen: SeenMap,\n): boolean {\n  return activities.some((activity) => {\n    const shown = instant(seen[activity.id]);\n    if (shown === null) return true;\n    const now = instant(activity.updatedAt);\n    return now === null || now > shown;\n  });\n}\n","/**\n * The inbox slide-over, fetched the first time somebody opens it.\n *\n * The bell and the panel are a PAIR a host drops into its chrome, and that is\n * still true — but only the BELL is on screen when a page paints. The panel is\n * behind a tap, and a static import made every host pay for it up front: the\n * design-system `Drawer` and, through it, MUI's `SwipeableDrawer`, `Modal`,\n * `Slide` and the focus trap, plus the row, the empty state and the pager. On a\n * storefront that is a slide-over most visits never open, parsed before the\n * first screen can render.\n *\n * ## Why the gate is \"ever opened\" rather than `open`\n *\n * `lazy` fetches when a component first RENDERS, so a boundary that still\n * rendered the panel while closed would fetch immediately and buy nothing. This\n * renders `null` until the panel has been open once, which is what actually\n * defers the download to the tap.\n *\n * And once opened it STAYS mounted. Unmounting on close would throw away the\n * drawer's transition state, so the panel would vanish instead of sliding out,\n * and the entrance animation would re-run on every reopen — which someone\n * working through an inbox does repeatedly. The fetch happens once.\n *\n * The initial state reads `open` rather than starting at `false`, so a host that\n * mounts the panel already open renders it in the same commit instead of a frame\n * later.\n *\n * ## Why `null` for the fallback\n *\n * The only frame this can show anything is the one right after the tap, where a\n * spinner reads as a stall rather than as progress. The chunk is small and\n * same-origin.\n */\nimport { Suspense, lazy, useEffect, useState, type ComponentType, type JSX } from 'react';\n\nimport type { NotificationMessages } from '../messages';\n\nimport type { InboxStore } from './inbox-state';\nimport type { LiveActivitiesConfig } from './live-config';\nimport type { LiveSeenStore } from './live-seen';\nimport type { NotificationsPanelProps } from './panel';\n\n/** What the factory binds into the panel, and the host never passes. */\ninterface PanelParts {\n  store: InboxStore;\n  messages: NotificationMessages;\n  /** Absent unless the host turned live activities on — see `./live-config`. */\n  live?: LiveActivitiesConfig;\n  /** Travels with `live`: where the panel records what the reader has seen. */\n  liveSeen?: LiveSeenStore;\n}\n\nexport function lazyNotificationsPanel(\n  parts: PanelParts,\n): ComponentType<NotificationsPanelProps> {\n  const Bound = lazy(async () => {\n    const { NotificationsPanel } = await import('./panel');\n    return {\n      default: (props: NotificationsPanelProps): JSX.Element => (\n        <NotificationsPanel {...props} {...parts} />\n      ),\n    };\n  });\n\n  return function NotificationsPanelSlot(props: NotificationsPanelProps): JSX.Element | null {\n    const [everOpened, setEverOpened] = useState(props.open);\n\n    useEffect(() => {\n      if (props.open) setEverOpened(true);\n    }, [props.open]);\n\n    if (!everOpened) return null;\n\n    return (\n      <Suspense fallback={null}>\n        <Bound {...props} />\n      </Suspense>\n    );\n  };\n}\n","/**\n * The routed preferences screen, fetched when a host actually routes to it.\n *\n * `createWebNotifications` returns two different KINDS of thing, and its own\n * docstring says so: `page` is \"the standalone surface … the one thing a host\n * routes to\", while the bell and the panel \"are a PAIR a host drops into its own\n * chrome\". Chrome is on screen from the first paint; a routed surface is not.\n *\n * A static import made that distinction invisible to a bundler. Every host that\n * put the bell in its header also shipped the preferences matrix — its channel\n * toggles, the per-browser push enable step, and the design-system `Switch`\n * behind them — in the same chunk as the header. A storefront paid for a\n * settings screen a shopper never opens, before its first screen could render;\n * a host that renders its OWN preferences page paid for this one twice.\n *\n * So `page` now loads on demand. Nothing else moves: the bell, the panel and\n * `BellWithPanel` stay exactly as eager as the chrome they belong to, because\n * that is what they are.\n *\n * NO PREFETCH, deliberately, and this is the opposite call from a surface a\n * host opens from chrome it already has. A routed surface is reached by\n * NAVIGATION, and every host here already code-splits its routes — so the\n * fetch happens while the route is being entered, which is the moment a\n * prefetch would have been trying to anticipate. Warming it at factory time\n * would put the screen back on the boot path of every app, which is the whole\n * cost this removes.\n */\nimport { Suspense, lazy, type ComponentType, type JSX } from 'react';\n\nimport type { NotificationMessages } from '../messages';\n\nimport type { NotificationsApiClient } from './api';\nimport type { PreferencesScreenProps } from './preferences-screen';\nimport type { WebPushSetupConfig } from './web-push-setup';\n\n/** What the factory binds into the screen, and the host never passes. */\ninterface PreferencesPageParts {\n  api: NotificationsApiClient;\n  messages: NotificationMessages;\n  webPush: WebPushSetupConfig;\n}\n\n/**\n * The routed screen, bound and loaded on first render.\n *\n * `lazy` memoises its factory, so the binding below happens once however many\n * times a host mounts the page — the same guarantee the direct call gave.\n *\n * The fallback is `null` because a host routes to this: whatever it renders\n * around the route is already on screen, and a second spinner inside it would\n * be one more thing appearing and disappearing during a navigation the host is\n * already indicating.\n */\nexport function lazyPreferencesPage(\n  parts: PreferencesPageParts,\n): ComponentType<PreferencesScreenProps> {\n  const Bound = lazy(async () => {\n    const { PreferencesScreen } = await import('./preferences-screen');\n    return {\n      default: (props: PreferencesScreenProps): JSX.Element => (\n        <PreferencesScreen {...props} {...parts} />\n      ),\n    };\n  });\n\n  return function NotificationsPreferencesPage(props: PreferencesScreenProps): JSX.Element {\n    return (\n      <Suspense fallback={null}>\n        <Bound {...props} />\n      </Suspense>\n    );\n  };\n}\n"],"mappings":"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","names":["useState","jsx","Suspense","lazy","jsx","lazy","Suspense","jsx","useState"]}