@12-apps/notifications 4.10.0 → 4.10.1

package/dist/panel-OPB3DBLJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/panel.tsx","../src/react/row.tsx"],"sourcesContent":["/**\n * The notification-centre slide-over: newest-first list with unread styling,\n * per-item open (marks read + deep-links), soft delete, mark-all, empty /\n * loading / error states and a \"load more\" cursor pager.\n *\n * Rendering is app-agnostic — the host passes `onNavigate` (its router's\n * navigate) for deep links. Without one a link is simply not followed, which is\n * what lets the panel mount in a host that has no router at all.\n */\nimport { useCallback, type JSX } from 'react';\n\nimport { EmptyState } from '@12-apps/ui/data-display/EmptyState';\nimport { LoadingState } from '@12-apps/ui/data-display/LoadingState';\nimport { Button } from '@12-apps/ui/form/Button';\nimport { Drawer, DrawerContent, DrawerHeader } from '@12-apps/ui/layout/Drawer';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { useMediaQuery } from '@12-apps/ui/mui/useMediaQuery';\nimport { useTheme } from '@12-apps/ui/mui/styles';\n\nimport type { LiveActivity } from '../live';\nimport type { NotificationMessages } from '../messages';\nimport type { InboxNotification } from '../wire';\n\nimport { BellIcon } from './bell-icon';\nimport { useInboxList } from './hooks';\nimport type { InboxState, InboxStore } from './inbox-state';\nimport type { LiveActivitiesConfig } from './live-config';\nimport type { LiveSeenStore } from './live-seen';\nimport { LiveSection } from './live-section';\nimport { NotificationRow } from './row';\n\ninterface PanelBodyProps {\n  state: InboxState;\n  messages: NotificationMessages;\n  onRetry: () => void;\n  onLoadMore: () => void;\n  onOpen: (notification: InboxNotification) => void;\n  onDelete: (id: string) => void;\n  /**\n   * Whether the live section above has anything in it.\n   *\n   * The empty state is a CLAIM about the whole panel — \"nenhuma notificação\" —\n   * and a live entry is a notification, so an inbox with no rows under a pinned\n   * pedido is not empty. Without this the panel said both things at once.\n   */\n  hasLive: boolean;\n}\n\n/** The scrollable panel body: loading / error / empty / the list + pager. */\nfunction PanelBody({\n  state,\n  messages,\n  onRetry,\n  onLoadMore,\n  onOpen,\n  onDelete,\n  hasLive,\n}: PanelBodyProps): JSX.Element {\n  if (state.status === 'pending' || state.status === 'idle') {\n    return (\n      <LoadingState\n        variant=\"spinner\"\n        message={messages.loading}\n        size=\"md\"\n        dataTestId=\"notifications-loading\"\n      />\n    );\n  }\n  if (state.status === 'error') {\n    return (\n      <EmptyState\n        variant=\"minimal\"\n        title={messages.loadFailedTitle}\n        description={messages.loadFailedBody}\n        onRefresh={onRetry}\n        refreshLabel={messages.retry}\n        dataTestId=\"notifications-error\"\n      />\n    );\n  }\n  if (state.items.length === 0 && !hasLive) {\n    return (\n      <EmptyState\n        variant=\"illustrated\"\n        illustration={<BellIcon size={44} dim />}\n        title={messages.emptyTitle}\n        description={messages.emptyBody}\n        dataTestId=\"notifications-empty\"\n      />\n    );\n  }\n  return (\n    // A stable anchor for the inbox half, present whether or not it has rows.\n    // The panel's claim is that what is HAPPENING sits above what has already\n    // happened, and until this existed the only thing below the live section to\n    // point at was the empty state — which is exactly what stops rendering when\n    // something is live.\n    <Box data-testid=\"notifications-inbox\">\n      {state.items.map((notification) => (\n        <NotificationRow\n          key={notification.id}\n          notification={notification}\n          messages={messages}\n          onOpen={onOpen}\n          onDelete={onDelete}\n        />\n      ))}\n      {state.nextCursor ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', py: 1.5 }}>\n          <Button\n            variant=\"outline\"\n            color=\"neutral\"\n            size=\"sm\"\n            disabled={state.loadingMore}\n            onClick={onLoadMore}\n            dataTestId=\"notifications-load-more\"\n          >\n            {state.loadingMore ? messages.loadingMore : messages.loadMore}\n          </Button>\n        </Box>\n      ) : null}\n    </Box>\n  );\n}\n\n/**\n * The two open gestures, which are ONE deep-link path with a mark-read in front\n * of half of it.\n *\n * Lifted out of the component because both kinds of entry follow a link the\n * same way and a host with no router follows neither — one rule, stated once,\n * rather than the same three lines written twice.\n */\nfunction usePanelOpeners(\n  store: InboxStore,\n  onClose: () => void,\n  onNavigate?: (link: string) => void,\n): {\n  openNotification: (notification: InboxNotification) => void;\n  openLive: (activity: LiveActivity) => void;\n} {\n  const follow = useCallback(\n    (link: string | null) => {\n      if (!link || !onNavigate) return;\n      onClose();\n      onNavigate(link);\n    },\n    [onClose, onNavigate],\n  );\n\n  return {\n    openNotification: useCallback(\n      (notification: InboxNotification) => {\n        if (notification.readAt === null) store.markRead([notification.id]);\n        follow(notification.link);\n      },\n      [store, follow],\n    ),\n    openLive: useCallback((activity: LiveActivity) => follow(activity.link), [follow]),\n  };\n}\n\nexport interface NotificationsPanelProps {\n  open: boolean;\n  onClose: () => void;\n  /** Navigate to a notification's in-app link (the host's router). */\n  onNavigate?: (link: string) => void;\n}\n\n/**\n * Everything BELOW the live section: the mark-all control and the list.\n *\n * Its own component rather than a block inside the panel because it is rendered\n * from two places — through `LiveSection`, and directly when the host turned\n * live activities off — and because the panel is at its line ceiling. \"Marcar\n * todas como lidas\" belongs to the INBOX and travels with it: a live entry has\n * nothing to mark.\n */\nfunction PanelInbox({\n  state,\n  messages,\n  store,\n  onOpen,\n  hasLive,\n}: {\n  state: InboxState;\n  messages: NotificationMessages;\n  store: InboxStore;\n  onOpen: (notification: InboxNotification) => void;\n  hasLive: boolean;\n}): JSX.Element {\n  const hasUnread = state.items.some((item) => item.readAt === null);\n  return (\n    <>\n      {hasUnread ? (\n        <Box sx={{ display: 'flex', justifyContent: 'flex-end', pb: 1 }}>\n          <Button\n            variant=\"ghost\"\n            color=\"primary\"\n            size=\"xs\"\n            onClick={() => store.markAllRead()}\n            dataTestId=\"notifications-mark-all-read\"\n          >\n            {messages.markAllRead}\n          </Button>\n        </Box>\n      ) : null}\n      <PanelBody\n        state={state}\n        messages={messages}\n        onRetry={() => store.invalidate()}\n        onLoadMore={() => store.loadMore()}\n        onOpen={onOpen}\n        onDelete={(id) => store.remove(id)}\n        hasLive={hasLive}\n      />\n    </>\n  );\n}\n\nexport function NotificationsPanel({\n  open,\n  onClose,\n  onNavigate,\n  store,\n  messages,\n  live,\n  liveSeen,\n}: NotificationsPanelProps & {\n  store: InboxStore;\n  messages: NotificationMessages;\n  live?: LiveActivitiesConfig;\n  liveSeen?: LiveSeenStore;\n}): JSX.Element {\n  // `useTheme` from @mui/material/styles falls back to the DEFAULT theme when\n  // no provider is mounted, where the callback form of `useMediaQuery` would\n  // hand the callback a null theme and throw. A published component must render\n  // in a host that has not wrapped it yet.\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n  const state = useInboxList(store, open);\n\n  const { openNotification, openLive } = usePanelOpeners(store, onClose, onNavigate);\n\n  // A function rather than an element so the live count can reach it: with a\n  // live section it is called by `LiveSection` — the only place the host's hook\n  // may be called — and without one it is called here with zero.\n  const renderInbox = (liveCount: number): JSX.Element => (\n    <PanelInbox\n      state={state}\n      messages={messages}\n      store={store}\n      onOpen={openNotification}\n      hasLive={liveCount > 0}\n    />\n  );\n\n  return (\n    <Drawer\n      open={open}\n      onClose={onClose}\n      anchor=\"right\"\n      variant=\"right\"\n      width={isMobile ? '100vw' : 400}\n      dataTestId=\"notifications-panel\"\n    >\n      <DrawerHeader onClose={onClose}>{messages.panelTitle}</DrawerHeader>\n      <DrawerContent>\n        {/*\n          Above the mark-all control as well as above the list, deliberately:\n          \"marcar todas como lidas\" belongs to the INBOX, and a live entry has\n          nothing to mark. A control between the two blocks would read as\n          applying to both.\n        */}\n        {live ? (\n          <LiveSection\n            config={live}\n            messages={messages}\n            active={open}\n            {...(onNavigate ? { onOpen: openLive } : {})}\n            {...(liveSeen ? { seen: liveSeen } : {})}\n          >\n            {renderInbox}\n          </LiveSection>\n        ) : (\n          renderInbox(0)\n        )}\n      </DrawerContent>\n    </Drawer>\n  );\n}\n","/** One inbox row: unread accent, content (opens/marks read), timestamp, delete. */\nimport type { JSX } from 'react';\n\nimport { Button } from '@12-apps/ui/form/Button';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { alpha, type Theme } from '@12-apps/ui/mui/styles';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { NotificationMessages } from '../messages';\nimport type { InboxNotification } from '../wire';\n\nimport { relativeTime } from './relative-time';\n\nconst contentButtonSx = {\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 0.25,\n  textAlign: 'left',\n  border: 'none',\n  background: 'none',\n  p: 0,\n  cursor: 'pointer',\n  color: 'text.primary',\n  fontFamily: 'inherit',\n} as const;\n\nconst unreadDotSx = {\n  width: 8,\n  height: 8,\n  borderRadius: '50%',\n  bgcolor: 'primary.main',\n  flex: '0 0 auto',\n} as const;\n\nexport function NotificationRow({\n  notification,\n  messages,\n  onOpen,\n  onDelete,\n}: {\n  notification: InboxNotification;\n  messages: NotificationMessages;\n  onOpen: (notification: InboxNotification) => void;\n  onDelete: (id: string) => void;\n}): JSX.Element {\n  const unread = notification.readAt === null;\n  return (\n    <Box\n      data-testid={`notification-${notification.id}`}\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: 1,\n        py: 1.5,\n        px: 1,\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n        bgcolor: unread ? (t: Theme) => alpha(t.palette.primary.main, 0.06) : 'transparent',\n      }}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={() => onOpen(notification)}\n        aria-label={\n          unread ? `${notification.title} (${messages.unreadSuffix})` : notification.title\n        }\n        sx={contentButtonSx}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>\n          {unread ? <Box aria-hidden sx={unreadDotSx} /> : null}\n          <Text variant=\"body\" size=\"sm\" weight={unread ? 'bold' : 'medium'} as=\"span\">\n            {notification.title}\n          </Text>\n        </Box>\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"span\">\n          {notification.body}\n        </Text>\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"span\" italic>\n          {relativeTime(notification.createdAt, messages)}\n        </Text>\n      </Box>\n\n      <Button\n        variant=\"ghost\"\n        color=\"neutral\"\n        size=\"xs\"\n        aria-label={messages.deleteOne(notification.title)}\n        onClick={() => onDelete(notification.id)}\n        dataTestId={`notification-delete-${notification.id}`}\n      >\n        ✕\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":"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","names":["Button","Box","jsx","jsxs","Box","Button"]}

package/dist/react/index.d.ts

@@ -1,11 +1,51 @@
-import { L as LiveActivitiesConfig, N as NotificationsApiClient } from '../create-web-notifications-_NVYmlvy.js';
-export { B as BADGE_POLL_MS, a as BADGE_RECONCILE_MS, b as BellButtonProps, I as InboxListStatus, d as InboxState, e as InboxStore, f as LiveActivitiesHook, g as LiveActivityMessages, h as NotificationsHttpError, i as NotificationsPanelProps, j as NotificationsResult, k as NotificationsSignalHook, l as NotificationsSubscribe, m as NotificationsTransport, n as NotificationsWebConfig, P as PAGE_SIZE, o as PreferencesPayload, p as PreferencesScreenProps, q as PushRegistrationPayload, W as WebNotifications, r as WebPushPlatformHint, s as WebPushSetupConfig, t as createInboxStore, u as createNotificationsApiClient, c as createWebNotifications, v as httpNotificationsTransport, w as useInboxList, x as useInboxState, y as useUnreadCount } from '../create-web-notifications-_NVYmlvy.js';
-import { JSX } from 'react';
+import { L as LiveActivitiesConfig, N as NotificationsApiClient } from '../create-web-notifications-DV3Y8k7e.js';
+export { B as BADGE_POLL_MS, a as BADGE_RECONCILE_MS, b as BellButtonProps, I as InboxListStatus, d as InboxState, e as InboxStore, f as LiveActivitiesHook, g as LiveActivityMessages, h as NotificationsHttpError, i as NotificationsPanelProps, j as NotificationsResult, k as NotificationsSignalHook, l as NotificationsSubscribe, m as NotificationsTransport, n as NotificationsWebConfig, P as PAGE_SIZE, o as PreferencesPayload, p as PreferencesScreenProps, q as PushRegistrationPayload, W as WebNotifications, r as WebPushPlatformHint, s as WebPushSetupConfig, t as createInboxStore, u as createNotificationsApiClient, c as createWebNotifications, v as httpNotificationsTransport, w as useInboxList, x as useInboxState, y as useUnreadCount } from '../create-web-notifications-DV3Y8k7e.js';
+import { JSX, ReactNode } from 'react';
 import { b as LiveActivity } from '../live-DYxEFO49.js';
 export { c as LiveActivityLane, d as LiveActivityStep, l as liveActivityLane } from '../live-DYxEFO49.js';
 import { N as NotificationMessages } from '../wire-BG1kuoXX.js';
 import '../types-BlqZkCWZ.js';
 
+/**
+ * What the reader has already been shown, so the bell can say NEW rather than
+ * merely PRESENT.
+ *
+ * A live activity is unlike an inbox row in the one way that matters here: it
+ * stays on the panel for as long as the thing is happening, so its presence
+ * cannot mean "you have not seen this". A pedido that has been `Preparo` for
+ * ten minutes is still live and still worth counting, but nothing has happened
+ * — and a badge that shouts for a subject the reader has already looked at is a
+ * badge people stop reading.
+ *
+ * So presence and novelty are answered separately: the COUNT comes from how
+ * many are live, and the TONE comes from this. The panel writes it — being on
+ * screen is what seen means — and the bell reads it.
+ *
+ * ## Per subject, not one watermark
+ *
+ * A single "newest instant already seen" is smaller and was the first cut, and
+ * it is wrong in a way that shows up in normal use: a pedido placed ten minutes
+ * ago but only now reaching the client arrives with an `updatedAt` BEHIND the
+ * watermark, and would be silently marked as already seen. The reader has never
+ * laid eyes on it. Keyed by subject, an id that has not been recorded is new
+ * whatever its clock says.
+ *
+ * Bounded by pruning rather than by expiry: every write keeps only the subjects
+ * that are live at that moment, so the record can never outgrow the number of
+ * things happening at once. A subject that finishes and later comes back is
+ * news again, which is correct — it is a different occurrence.
+ */
+
+/** id -> the `updatedAt` that was on screen. */
+type SeenMap = Readonly<Record<string, string>>;
+interface LiveSeenStore {
+    /** What has been shown, keyed by subject id. */
+    read: () => SeenMap;
+    /** Record that exactly these are on screen now, forgetting subjects that are not. */
+    mark: (activities: readonly LiveActivity[]) => void;
+    subscribe: (listener: () => void) => () => void;
+}
+
 /** Inline SVG bell (no icon-library dependency in this package). */
 
 declare function BellIcon({ size, dim, }: {
@@ -49,8 +89,31 @@ interface LiveSectionProps {
      * does nothing.
      */
     onOpen?: (activity: LiveActivity) => void;
+    /**
+     * The rest of the panel, given how many entries are live.
+     *
+     * A render prop rather than a sibling, because the count is knowable only
+     * where the host's hook is CALLED, and it cannot be called anywhere else:
+     * `live` is optional on the panel, so reading it there would mean calling a
+     * hook conditionally — the failure React reports as a crash in some unrelated
+     * component.
+     *
+     * The inbox needs the number for exactly one decision, and it is the decision
+     * this section exists to inform: whether "no notifications" is true. A live
+     * entry IS a notification, so a panel showing one under that sentence is
+     * contradicting itself.
+     */
+    children?: (liveCount: number) => ReactNode;
+    /**
+     * Where "the reader has seen these" is recorded, for the bell to read.
+     *
+     * Written HERE because this is the component that puts them on screen, and
+     * being on screen is what seen means. Optional so the section stays usable by
+     * a host that mounts it outside the panel.
+     */
+    seen?: LiveSeenStore;
 }
-declare function LiveSection({ config, messages, active, onOpen, }: LiveSectionProps): JSX.Element | null;
+declare function LiveSection({ config, messages, active, onOpen, children, seen, }: LiveSectionProps): JSX.Element;
 
 /**
  * "há 5 min"-style relative timestamp, falling back to an absolute date for

package/dist/react/index.js

@@ -3,11 +3,11 @@ import {
   createNotificationsApiClient,
   createWebNotifications,
   httpNotificationsTransport
-} from "../chunk-5Y7QRORV.js";
+} from "../chunk-I5QUMTCN.js";
 import {
   LiveSection,
   relativeTime
-} from "../chunk-JCVRQ42B.js";
+} from "../chunk-ZY32PC34.js";
 import {
   BADGE_POLL_MS,
   BADGE_RECONCILE_MS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/notifications",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "type": "module",
   "sideEffects": false,
   "description": "Plug-and-play notification system (12-15): an always-on in-app inbox, per-user × per-category channel preferences, and email / SMS / WhatsApp / web-push transports behind vendor DRIVERS so a second provider is a config entry. Framework-free core (.), host-mounted backend surface (./server: inbox / preferences / push-subscription endpoints, the channel router with delivery records + retry sweep, the permission fan-out, duck-typed Prisma seam), Hono adapter (./hono), React surface (./react: bell + badge, inbox drawer, preferences screen), VAPID sender (./web-push) and the package-owned Prisma partial + migrations. Standardized adoption contract in ADOPTING.md.",
@@ -71,7 +71,7 @@
     "prisma:sync:check": "node scripts/sync-notifications-schema.mjs --check"
   },
   "dependencies": {
-    "@12-apps/ui": "^6.17.0"
+    "@12-apps/ui": "^6.18.0"
   },
   "peerDependencies": {
     "@12-apps/wiring": ">=1.3.0",

package/src/react/bell-button.tsx

@@ -3,7 +3,7 @@
  * have a styled icon-button slot. A host with its own trigger chrome uses
  * `useUnreadCount` + `Panel` directly.
  */
-import type { JSX } from 'react';
+import { useSyncExternalStore, type JSX } from 'react';
 
 import { Badge } from '@12-apps/ui/data-display/Badge';
 import { Box } from '@12-apps/ui/mui/Box';
@@ -12,6 +12,8 @@ import type { NotificationMessages } from '../messages';
 
 import { BellIcon } from './bell-icon';
 import { useUnreadCount, type NotificationsSignalHook, type NotificationsSubscribe } from './hooks';
+import type { LiveActivitiesConfig } from './live-config';
+import { hasUnseenActivity, type LiveSeenStore } from './live-seen';
 import type { InboxStore } from './inbox-state';
 
 const triggerSx = {
@@ -40,42 +42,136 @@ export interface BellButtonProps {
   enabled?: boolean;
 }
 
-export function BellButton({
+/**
+ * The trigger itself, given a count and whether any of it is NEW.
+ *
+ * Presentational, and shared by both bells below, so the two can never drift on
+ * what the badge looks like — only on where the number comes from.
+ *
+ * ## The two tones
+ *
+ * `primary` says *something happened*; `neutral` says *something is present*. A
+ * live activity is the reason that distinction has to exist: it stays on the
+ * panel for as long as the thing is happening, so a bell that painted every
+ * live entry as new would be permanently red for a pedido the reader already
+ * looked at, and a bell that ignored them would say nothing at all while one
+ * was running. Grey keeps the count honest without spending attention twice.
+ */
+function BellTrigger({
   onClick,
-  enabled = true,
-  store,
+  count,
+  hasNew,
   messages,
-  subscribe,
-  useSignal,
-}: BellButtonProps & {
-  store: InboxStore;
+}: {
+  onClick: () => void;
+  count: number;
+  hasNew: boolean;
   messages: NotificationMessages;
-  subscribe?: NotificationsSubscribe;
-  useSignal?: NotificationsSignalHook;
 }): JSX.Element {
-  const count = useUnreadCount(store, {
-    enabled,
-    ...(subscribe ? { subscribe } : {}),
-    ...(useSignal ? { useSignal } : {}),
-  });
   return (
     <Box
       component="button"
       type="button"
       onClick={onClick}
+      // `openBellWithUnread` rather than a new message, and not for want of
+      // precision: `NotificationMessages` is REQUIRED of every host, so adding
+      // a field is a breaking change to a package several apps already mount.
+      // The sentence a host wrote for "you have N" is the sentence this wants.
       aria-label={count > 0 ? messages.openBellWithUnread(count) : messages.openBell}
       data-testid="notifications-bell"
       sx={triggerSx}
     >
       <Badge
         content={count > 0 ? count : undefined}
-        color="primary"
+        color={hasNew ? 'primary' : 'neutral'}
         variant="count"
         max={99}
         data-testid="notifications-badge"
+        // The tone is carried by a colour, and a colour is not something a
+        // test can read — nor, on its own, a signal every reader can. This is
+        // what the tests assert on.
+        data-tone={hasNew ? 'new' : 'seen'}
       >
         <BellIcon size={28} />
       </Badge>
     </Box>
   );
 }
+
+export function BellButton({
+  onClick,
+  enabled = true,
+  store,
+  messages,
+  subscribe,
+  useSignal,
+}: BellButtonProps & {
+  store: InboxStore;
+  messages: NotificationMessages;
+  subscribe?: NotificationsSubscribe;
+  useSignal?: NotificationsSignalHook;
+}): JSX.Element {
+  const count = useUnreadCount(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} />;
+}
+
+/**
+ * The bell for a host that configured live activities.
+ *
+ * A SECOND component rather than a flag on the one above, because the host's
+ * `useActivities` is a hook: reading an optional config inside one component
+ * would mean calling it conditionally, which React reports as a crash in some
+ * 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.
+ */
+export function LiveBellButton({
+  onClick,
+  enabled = true,
+  store,
+  messages,
+  subscribe,
+  useSignal,
+  live,
+  seen,
+}: BellButtonProps & {
+  store: InboxStore;
+  messages: NotificationMessages;
+  subscribe?: NotificationsSubscribe;
+  useSignal?: NotificationsSignalHook;
+  live: LiveActivitiesConfig;
+  seen: LiveSeenStore;
+}): JSX.Element {
+  const unread = useUnreadCount(store, {
+    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}
+    />
+  );
+}

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

@@ -3,7 +3,7 @@ import { useState, type ComponentType, type JSX } from 'react';
 import { messagesOf, type NotificationMessages } from '../messages';
 
 import { createNotificationsApiClient, type NotificationsApiClient } from './api';
-import { BellButton, type BellButtonProps } from './bell-button';
+import { BellButton, LiveBellButton, type BellButtonProps } from './bell-button';
 import {
   useUnreadCount,
   type NotificationsSignalHook,
@@ -11,6 +11,7 @@ import {
 } from './hooks';
 import { createInboxStore, type InboxStore } from './inbox-state';
 import type { LiveActivitiesConfig } from './live-config';
+import { createLiveSeenStore } from './live-seen';
 import { lazyNotificationsPanel } from './panel-lazy';
 import type { NotificationsPanelProps } from './panel';
 import { lazyPreferencesPage } from './page-lazy';
@@ -117,13 +118,33 @@ export function createWebNotifications(config: NotificationsWebConfig): WebNotif
     ...(config.useSignal ? { useSignal: config.useSignal } : {}),
   };
 
-  const Bell: ComponentType<BellButtonProps> = (props) => (
-    <BellButton {...props} store={store} messages={messages} {...subscribeOption} />
-  );
+  // One store per factory, shared by the bell that READS it and the panel that
+  // WRITES it — the same arrangement as the inbox store above, and for the same
+  // reason: two independent copies would disagree about what the reader saw.
+  const liveSeen = createLiveSeenStore();
+
+  // Chosen ONCE, here, because `useActivities` is a hook and the choice must
+  // not be made per render: a bell that read an optional config inside itself
+  // would be calling a hook conditionally.
+  const live = config.liveActivities;
+  const Bell: ComponentType<BellButtonProps> = live
+    ? (props) => (
+        <LiveBellButton
+          {...props}
+          store={store}
+          messages={messages}
+          live={live}
+          seen={liveSeen}
+          {...subscribeOption}
+        />
+      )
+    : (props) => (
+        <BellButton {...props} store={store} messages={messages} {...subscribeOption} />
+      );
   const Panel = lazyNotificationsPanel({
     store,
     messages,
-    ...(config.liveActivities ? { live: config.liveActivities } : {}),
+    ...(live ? { live, liveSeen } : {}),
   });
 
   function useBoundUnreadCount(options: { enabled?: boolean } = {}): number {

package/src/react/live-section.tsx

@@ -20,7 +20,7 @@
  * - It does not fetch. `useActivities` is the host's, and `active` tells it
  *   whether anyone is looking.
  */
-import { useEffect, useId, useState, type JSX } from 'react';
+import { useEffect, useId, useState, type JSX, type ReactNode } from 'react';
 
 import { Box } from '@12-apps/ui/mui/Box';
 import { Text } from '@12-apps/ui/typography/Text';
@@ -30,6 +30,7 @@ import type { NotificationMessages } from '../messages';
 
 import { LiveActivityCard } from './live-card';
 import type { LiveActivitiesConfig } from './live-config';
+import type { LiveSeenStore } from './live-seen';
 
 /**
  * How often the section re-reads the clock.
@@ -75,6 +76,29 @@ export interface LiveSectionProps {
    * does nothing.
    */
   onOpen?: (activity: LiveActivity) => void;
+  /**
+   * The rest of the panel, given how many entries are live.
+   *
+   * A render prop rather than a sibling, because the count is knowable only
+   * where the host's hook is CALLED, and it cannot be called anywhere else:
+   * `live` is optional on the panel, so reading it there would mean calling a
+   * hook conditionally — the failure React reports as a crash in some unrelated
+   * component.
+   *
+   * The inbox needs the number for exactly one decision, and it is the decision
+   * this section exists to inform: whether "no notifications" is true. A live
+   * entry IS a notification, so a panel showing one under that sentence is
+   * contradicting itself.
+   */
+  children?: (liveCount: number) => ReactNode;
+  /**
+   * Where "the reader has seen these" is recorded, for the bell to read.
+   *
+   * Written HERE because this is the component that puts them on screen, and
+   * being on screen is what seen means. Optional so the section stays usable by
+   * a host that mounts it outside the panel.
+   */
+  seen?: LiveSeenStore;
 }
 
 
@@ -84,7 +108,9 @@ export function LiveSection({
   messages,
   active,
   onOpen,
-}: LiveSectionProps): JSX.Element | null {
+  children,
+  seen,
+}: LiveSectionProps): JSX.Element {
   // Unconditional, because it is a hook. `active` is how it is told nobody is
   // looking — the same arrangement `useSignal` has one seam over.
   const activities = config.useActivities({ active });
@@ -94,9 +120,19 @@ export function LiveSection({
   // regions resolve their label to whichever came first.
   const headingId = useId();
 
-  if (activities.length === 0) return null;
+  const liveCount = activities.length;
+
+  // Only while somebody is looking. The panel keeps this mounted through the
+  // closing transition, and marking there would swallow an update that arrived
+  // in the frames after the reader turned away.
+  useEffect(() => {
+    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.
@@ -136,6 +172,8 @@ export function LiveSection({
           />
         ))}
       </Box>
-    </Box>
+      </Box>
+      {children?.(liveCount)}
+    </>
   );
 }

package/src/react/live-seen.ts

@@ -0,0 +1,138 @@
+/**
+ * What the reader has already been shown, so the bell can say NEW rather than
+ * merely PRESENT.
+ *
+ * A live activity is unlike an inbox row in the one way that matters here: it
+ * stays on the panel for as long as the thing is happening, so its presence
+ * cannot mean "you have not seen this". A pedido that has been `Preparo` for
+ * ten minutes is still live and still worth counting, but nothing has happened
+ * — and a badge that shouts for a subject the reader has already looked at is a
+ * badge people stop reading.
+ *
+ * So presence and novelty are answered separately: the COUNT comes from how
+ * many are live, and the TONE comes from this. The panel writes it — being on
+ * screen is what seen means — and the bell reads it.
+ *
+ * ## Per subject, not one watermark
+ *
+ * A single "newest instant already seen" is smaller and was the first cut, and
+ * it is wrong in a way that shows up in normal use: a pedido placed ten minutes
+ * ago but only now reaching the client arrives with an `updatedAt` BEHIND the
+ * watermark, and would be silently marked as already seen. The reader has never
+ * laid eyes on it. Keyed by subject, an id that has not been recorded is new
+ * whatever its clock says.
+ *
+ * Bounded by pruning rather than by expiry: every write keeps only the subjects
+ * that are live at that moment, so the record can never outgrow the number of
+ * things happening at once. A subject that finishes and later comes back is
+ * news again, which is correct — it is a different occurrence.
+ */
+import type { LiveActivity } from '../live';
+
+const STORAGE_KEY = '12a.notifications.live-seen';
+
+/** id -> the `updatedAt` that was on screen. */
+type SeenMap = Readonly<Record<string, string>>;
+
+const EMPTY: SeenMap = {};
+
+/** ms since epoch, or `null` for an absent or unparseable stamp. */
+function instant(iso: string | undefined): number | null {
+  if (iso === undefined) return null;
+  const ms = Date.parse(iso);
+  return Number.isNaN(ms) ? null : ms;
+}
+
+/**
+ * Read/write through `try`, every time.
+ *
+ * `localStorage` is not merely absent in SSR and in a worker — the ACCESSOR
+ * itself throws in a browser set to block site data. A notification bell that
+ * cannot render because storage is blocked is a worse failure than one that
+ * forgets what was seen, and forgetting degrades in the safe direction: towards
+ * saying something is happening.
+ */
+function readStored(): SeenMap {
+  try {
+    const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (!raw) return EMPTY;
+    const parsed: unknown = JSON.parse(raw);
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) return EMPTY;
+    // Anything can be in storage — another version of this package, or a person
+    // with the devtools open. Keep only what has the shape this reads.
+    const clean: Record<string, string> = {};
+    for (const [id, value] of Object.entries(parsed)) {
+      if (typeof value === 'string') clean[id] = value;
+    }
+    return clean;
+  } catch {
+    return EMPTY;
+  }
+}
+
+function writeStored(value: SeenMap): void {
+  try {
+    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(value));
+  } catch {
+    // Blocked or full. The badge stays new a while longer; nothing else breaks.
+  }
+}
+
+export interface LiveSeenStore {
+  /** What has been shown, keyed by subject id. */
+  read: () => SeenMap;
+  /** Record that exactly these are on screen now, forgetting subjects that are not. */
+  mark: (activities: readonly LiveActivity[]) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+
+export function createLiveSeenStore(): LiveSeenStore {
+  // Mirrored in memory as well as in storage: `useSyncExternalStore` compares
+  // snapshots by IDENTITY and calls `read` on every render, so parsing storage
+  // there would hand it a fresh object each time and re-render for ever.
+  let current = readStored();
+  const listeners = new Set<() => void>();
+
+  return {
+    read: () => current,
+    mark: (activities) => {
+      const next: Record<string, string> = {};
+      for (const activity of activities) next[activity.id] = activity.updatedAt;
+      // Identity is the snapshot, so an unchanged map must not become a new
+      // object — see `read` above.
+      const ids = Object.keys(next);
+      const same =
+        ids.length === Object.keys(current).length &&
+        ids.every((id) => current[id] === next[id]);
+      if (same) return;
+      current = next;
+      writeStored(next);
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/**
+ * Whether any of these has moved, or arrived, since the reader last looked.
+ *
+ * An id with nothing recorded is new — that is the case the per-subject record
+ * exists for. An unparseable stamp is treated as new too: the alternative is
+ * silently never alerting for a host whose clock format this does not read.
+ */
+export function hasUnseenActivity(
+  activities: readonly LiveActivity[],
+  seen: SeenMap,
+): boolean {
+  return activities.some((activity) => {
+    const shown = instant(seen[activity.id]);
+    if (shown === null) return true;
+    const now = instant(activity.updatedAt);
+    return now === null || now > shown;
+  });
+}

package/src/react/panel-lazy.tsx

@@ -37,6 +37,7 @@ import type { NotificationMessages } from '../messages';
 
 import type { InboxStore } from './inbox-state';
 import type { LiveActivitiesConfig } from './live-config';
+import type { LiveSeenStore } from './live-seen';
 import type { NotificationsPanelProps } from './panel';
 
 /** What the factory binds into the panel, and the host never passes. */
@@ -45,6 +46,8 @@ interface PanelParts {
   messages: NotificationMessages;
   /** Absent unless the host turned live activities on — see `./live-config`. */
   live?: LiveActivitiesConfig;
+  /** Travels with `live`: where the panel records what the reader has seen. */
+  liveSeen?: LiveSeenStore;
 }
 
 export function lazyNotificationsPanel(