@12-apps/notifications 4.7.0 → 4.7.1

package/dist/{chunk-Y34FX24X.js → chunk-XE7HZVMH.js}

@@ -15,16 +15,8 @@ function taxonomyOf(config) {
 }
 __name(taxonomyOf, "taxonomyOf");
 
-// src/messages.ts
-function messagesOf(config, locale) {
-  const source = config.messages;
-  return typeof source === "function" ? source({ locale }) : source;
-}
-__name(messagesOf, "messagesOf");
-
 export {
   NOTIFICATION_CHANNELS,
-  taxonomyOf,
-  messagesOf
+  taxonomyOf
 };
-//# sourceMappingURL=chunk-Y34FX24X.js.map
+//# sourceMappingURL=chunk-XE7HZVMH.js.map

package/dist/chunk-XE7HZVMH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["/**\n * Core types of the channel-agnostic notification system (12-15).\n *\n * Three decoupled layers, each open for extension without touching the others:\n *   - GENERATORS map a typed domain event to agnostic content (title/body/…).\n *   - The CHANNEL ROUTER always writes the notification-centre inbox record,\n *     then fans out one delivery per enabled channel.\n *   - TRANSPORTS format the agnostic content for one channel and send it.\n *\n * Nothing here knows about a concrete channel's wire format — that lives\n * entirely inside each transport adapter — and nothing here knows about a\n * concrete DOMAIN either: the event `type` set, the preference categories and\n * the channel list are all host config (see {@link NotificationTaxonomy}).\n */\n\n/** Transport channels a notification can fan out to (DB CHECK mirrors this). */\nexport const NOTIFICATION_CHANNELS = ['EMAIL', 'SMS', 'WHATSAPP', 'WEB_PUSH'] as const;\nexport type NotificationChannel = (typeof NOTIFICATION_CHANNELS)[number];\n\n/**\n * The preference categories are the HOST's, and required.\n *\n * There used to be a `NOTIFICATION_CATEGORIES = ['orders','payments','stock',\n * 'system']` here — one product's set — and `taxonomyOf` fell back to it\n * whenever a host passed none. The docstring argued the case itself: \"it is\n * product vocabulary, not machinery\", and then shipped the vocabulary anyway as\n * the default, which is the only part a forgetful host would ever see.\n *\n * The consequence was quiet rather than loud: the settings screen renders four\n * rows a foreign host never chose, its own categories are absent, and every\n * preference a user sets is filed against a taxonomy nothing else in that\n * system uses. Nothing throws, because `category` is deliberately a free string\n * — the packaged migration puts **no CHECK** on it, precisely because a closed\n * set would be wrong for every host but the first. That freedom is what made\n * the default undetectable.\n *\n * `channel` and `status` are different and keep their CHECKs: those ARE this\n * library's own closed sets.\n */\nexport type NotificationCategory = string;\n\n/**\n * Per-channel delivery lifecycle (DB CHECK mirrors this).\n *\n * `SENDING` is the CLAIM: exactly one dispatcher moves a row out of `QUEUED`,\n * so two dispatchers can never both send the same delivery. A row left\n * `SENDING` is a dispatcher that died mid-send, and the sweep reclaims it once\n * it is older than the cutoff.\n *\n * `DEAD` is terminal: the attempt ceiling was reached (or the recipient no\n * longer exists), and no sweep will pick the row up again. Without it a\n * permanently invalid destination is a billed provider call on every sweep,\n * forever, and the sweep's working set only grows.\n */\nexport type DeliveryStatus = 'QUEUED' | 'SENDING' | 'SENT' | 'FAILED' | 'DEAD';\n\n/**\n * Channel-agnostic content a generator produces. This is what the inbox stores\n * verbatim and what every transport's formatter receives — no channel may leak\n * its wire format into it.\n */\nexport interface NotificationContent {\n  title: string;\n  body: string;\n  /** In-app deep link (a same-origin path such as `/orders/123`). */\n  link?: string;\n  /** Structured extras for consumers that want more than text. */\n  data?: Record<string, unknown>;\n}\n\n/** Who receives a notification. `clientId` scopes it to a tenant when set. */\nexport interface NotificationRecipient {\n  userId: string;\n  clientId?: string;\n}\n\n/**\n * A typed domain event handed to `notify`. `type` selects the registered\n * generator; `payload` is that generator's typed input. Callers never touch\n * channels, formatting, or preferences.\n */\nexport interface NotificationEvent<TPayload = unknown> {\n  type: string;\n  recipient: NotificationRecipient;\n  payload: TPayload;\n}\n\n/**\n * Maps one domain event type to agnostic content. Registered through the\n * server config (or `registerGenerator` for a late arrival); adding a\n * generator never touches existing generators, the router, or any transport\n * (open/closed).\n */\nexport interface NotificationGenerator<TPayload = unknown> {\n  /** The event key, dot-namespaced (\"order.paid\"). One generator per type. */\n  type: string;\n  /** The preference category the router gates this type's fan-out on. */\n  category: NotificationCategory;\n  generate: (payload: TPayload) => NotificationContent;\n}\n\n/**\n * The recipient as a transport sees them: resolved destinations only. Built by\n * the router from the host's contact directory + the push subscriptions this\n * package owns; transports use it to answer\n * {@link NotificationTransport.supports}.\n */\nexport interface TransportRecipient {\n  userId: string;\n  email: string | null;\n  /** Phone as the host stores it (transports normalize per provider rules). */\n  phone: string | null;\n  /** How many active browser push subscriptions the user holds. */\n  pushSubscriptionCount: number;\n}\n\n/**\n * One pluggable channel adapter: a FORMATTER (agnostic content → channel\n * message) plus a SENDER. Adding a channel = registering one of these; the\n * router dispatches through the registry and needs no change.\n *\n * `send` resolves on success and THROWS on failure — the router records the\n * error on the delivery row and isolates it from other channels. Sends must be\n * retry-safe: the router may re-dispatch a QUEUED/FAILED delivery.\n */\nexport interface NotificationTransport<TMessage = unknown> {\n  channel: NotificationChannel;\n  /**\n   * Whether this recipient is addressable on this channel right now — the\n   * destination exists (e-mail / phone / push subscription) AND the provider\n   * is configured. `false` simply skips the channel (no delivery row).\n   */\n  supports(recipient: TransportRecipient): boolean;\n  /** Transform the agnostic content into this channel's message shape. */\n  format(content: NotificationContent): TMessage;\n  /** Deliver the formatted message to the recipient. Throws on failure. */\n  send(message: TMessage, recipient: TransportRecipient): Promise<void>;\n}\n\n/**\n * The host's product vocabulary. Everything below the surface (routing,\n * delivery rows, retries, the wire) is identical for every host; WHICH\n * categories exist and how they are labelled is not.\n */\nexport interface NotificationTaxonomy {\n  /** The preference categories, in the order the settings screen lists them. */\n  categories: readonly NotificationCategory[];\n}\n\n/**\n * The taxonomy in force. `categories` is REQUIRED — see above.\n *\n * The empty check was already here and stays: an empty list and a missing one\n * are the same mistake, and both now fail at assembly rather than rendering an\n * empty settings screen or somebody else's four rows.\n */\nexport function taxonomyOf(config: {\n  categories: readonly NotificationCategory[];\n}): NotificationTaxonomy {\n  const categories = config.categories;\n  if (!categories || categories.length === 0) {\n    throw new Error(\n      '@12-apps/notifications: `categories` is required and must not be empty — ' +\n        'the preference categories are the host\\'s product vocabulary.',\n    );\n  }\n  return { categories: [...categories] };\n}\n\n/** The host's logger. Defaults to the console (the @12-apps/jobs precedent). */\nexport interface NotificationLogger {\n  info(message: string, ...meta: unknown[]): void;\n  error(message: string, ...meta: unknown[]): void;\n}\n"],"mappings":";;;;;AAgBO,IAAM,wBAAwB,CAAC,SAAS,OAAO,YAAY,UAAU;AA4IrE,SAAS,WAAW,QAEF;AACvB,QAAM,aAAa,OAAO;AAC1B,MAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,UAAM,IAAI;AAAA,MACR;AAAA,IAEF;AAAA,EACF;AACA,SAAO,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE;AACvC;AAXgB;","names":[]}

package/dist/{create-web-notifications-BpNR8qH3.d.ts → create-web-notifications-BHCzaU2y.d.ts}

@@ -324,11 +324,22 @@ interface NotificationsWebConfig {
     webPush?: WebPushSetupConfig;
 }
 interface WebNotifications {
-    /** The routed surface: the preferences screen. */
+    /**
+     * The routed surface: the preferences screen.
+     *
+     * Loaded on demand — see `page-lazy.tsx`. A host that mounts only the bell and
+     * the panel never downloads it, and a host that routes to it fetches it while
+     * entering that route.
+     */
     page: ComponentType<PreferencesScreenProps>;
     /** The bell, already bound to the shared store. */
     BellButton: ComponentType<BellButtonProps>;
-    /** The inbox slide-over, sharing that store. */
+    /**
+     * The inbox slide-over, sharing that store.
+     *
+     * Loaded the first time it is opened — see `panel-lazy.tsx`. Until then a
+     * host's chrome carries the bell and nothing else.
+     */
     Panel: ComponentType<NotificationsPanelProps>;
     /**
      * Bell + panel as ONE element, for a host that just wants the feature in its

package/dist/hono/index.js

@@ -1,10 +1,11 @@
 import {
   createApiNotifications
-} from "../chunk-TIGTBSAQ.js";
-import "../chunk-HQU4R4SG.js";
+} from "../chunk-WHBMPHQE.js";
+import "../chunk-HHMRCMQU.js";
+import "../chunk-XE7HZVMH.js";
 import {
   messagesOf
-} from "../chunk-Y34FX24X.js";
+} from "../chunk-M2TVBVH2.js";
 import {
   __name
 } from "../chunk-7QVYU63E.js";

package/dist/hono/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hono/index.ts"],"sourcesContent":["import { Hono } from 'hono';\nimport type { Context } from 'hono';\n\nimport { messagesOf } from '../messages';\n\nimport {\n  createApiNotifications,\n  type ApiNotifications,\n  type NotificationsServerConfig,\n} from '../server/create-api-notifications';\nimport type { NotificationsActor } from '../server/context';\n\n/**\n * `@12-apps/notifications/hono` — the account notification endpoints as a\n * mountable router.\n *\n * The framework-neutral descriptors in `/server` are the contract; this is the\n * adapter for the framework we happen to use, behind its own subpath with\n * `hono` as an OPTIONAL peer (the report-builder precedent — a host on Express,\n * or one that only wants the React surface, never resolves Hono).\n *\n * A host writes:\n *\n *   const notifications = notificationsRouter({ …config, resolveActor });\n *   app.route('/api/account', notifications.router);\n *\n * and keeps what is genuinely its own: who the caller is. Everything after\n * that — parsing, status codes, the envelope, the pt-BR copy — is the\n * package's.\n */\n\n/**\n * Resolve the caller. Returning `null` means unauthenticated, which answers 401\n * before any handler runs.\n *\n * Note the 401 is self-guarded HERE rather than assumed from middleware: these\n * paths sit under an API prefix that a host's page middleware typically does not\n * match, and an unauthenticated inbox read that fell through would answer\n * somebody else's rows or none at all — both worse than a 401.\n */\nexport type ResolveNotificationsActor = (\n  c: Context,\n) => Promise<NotificationsActor | null> | NotificationsActor | null;\n\nexport interface NotificationsHonoConfig extends NotificationsServerConfig {\n  resolveActor: ResolveNotificationsActor;\n}\n\nexport interface NotificationsHono extends ApiNotifications {\n  router: Hono;\n}\n\n/**\n * Reads the JSON body, tolerating an absent or malformed one — and only when\n * the caller SAID it was JSON.\n *\n * The content-type check is a CSRF speed bump, not a defence (see ADOPTING rule\n * 13, which names the actual one). `text/plain`, `multipart/form-data` and\n * `application/x-www-form-urlencoded` are the three types a cross-site `fetch`\n * or a plain `<form>` can send with NO preflight, so parsing a body regardless\n * of its type is what lets such a request reach these handlers at all. Refusing\n * them means a cross-site write has to earn a preflight first, which the browser\n * will then refuse on its own. The price is nil: every client of this surface,\n * the packaged one included, sends `application/json`.\n */\nfunction saysJson(c: Context): boolean {\n  const type = c.req.header('content-type');\n  if (!type) return false;\n  const mime = (type.split(';')[0] ?? '').trim().toLowerCase();\n  return mime === 'application/json' || mime.endsWith('+json');\n}\n\nasync function readBody(c: Context): Promise<unknown> {\n  if (c.req.method === 'GET') return undefined;\n  if (!saysJson(c)) return undefined;\n  try {\n    return await c.req.json();\n  } catch {\n    // A malformed body is the caller's error; the handler's own validation\n    // reports it far better than a parse failure would.\n    return undefined;\n  }\n}\n\nexport function notificationsRouter(config: NotificationsHonoConfig): NotificationsHono {\n  const api = createApiNotifications(config);\n  const messages = messagesOf(config);\n  const router = new Hono();\n\n  // Mounted IN DESCRIPTOR ORDER, which any adapter must preserve. Hono resolves\n  // by registration order, so a host route shaped `/notifications/:id` under the\n  // same prefix must be registered AFTER this router or it captures\n  // `/notifications/unread-count`.\n  for (const route of api.routes) {\n    const handler = async (c: Context): Promise<Response> => {\n      const actor = await config.resolveActor(c);\n      if (!actor) return c.json({ error: messages.unauthenticated }, 401);\n\n      const response = await route.handle({\n        actor,\n        params: c.req.param() as Record<string, string | undefined>,\n        query: c.req.query() as Record<string, string | undefined>,\n        body: await readBody(c),\n        headers: { 'user-agent': c.req.header('user-agent') },\n      });\n\n      // A handler that chose NO body means exactly that (204).\n      if (response.body === undefined) return c.body(null, response.status as 204);\n      // The status travels with the body the handler chose; the adapter never\n      // reinterprets either.\n      return c.json(response.body as Record<string, unknown>, response.status as 200);\n    };\n\n    if (route.method === 'GET') router.get(route.path, handler);\n    else if (route.method === 'POST') router.post(route.path, handler);\n    else if (route.method === 'PUT') router.put(route.path, handler);\n    else router.delete(route.path, handler);\n  }\n\n  return { ...api, router };\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY;AAiErB,SAAS,SAAS,GAAqB;AACrC,QAAM,OAAO,EAAE,IAAI,OAAO,cAAc;AACxC,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,QAAQ,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,IAAI,KAAK,EAAE,YAAY;AAC3D,SAAO,SAAS,sBAAsB,KAAK,SAAS,OAAO;AAC7D;AALS;AAOT,eAAe,SAAS,GAA8B;AACpD,MAAI,EAAE,IAAI,WAAW,MAAO,QAAO;AACnC,MAAI,CAAC,SAAS,CAAC,EAAG,QAAO;AACzB,MAAI;AACF,WAAO,MAAM,EAAE,IAAI,KAAK;AAAA,EAC1B,QAAQ;AAGN,WAAO;AAAA,EACT;AACF;AAVe;AAYR,SAAS,oBAAoB,QAAoD;AACtF,QAAM,MAAM,uBAAuB,MAAM;AACzC,QAAM,WAAW,WAAW,MAAM;AAClC,QAAM,SAAS,IAAI,KAAK;AAMxB,aAAW,SAAS,IAAI,QAAQ;AAC9B,UAAM,UAAU,8BAAO,MAAkC;AACvD,YAAM,QAAQ,MAAM,OAAO,aAAa,CAAC;AACzC,UAAI,CAAC,MAAO,QAAO,EAAE,KAAK,EAAE,OAAO,SAAS,gBAAgB,GAAG,GAAG;AAElE,YAAM,WAAW,MAAM,MAAM,OAAO;AAAA,QAClC;AAAA,QACA,QAAQ,EAAE,IAAI,MAAM;AAAA,QACpB,OAAO,EAAE,IAAI,MAAM;AAAA,QACnB,MAAM,MAAM,SAAS,CAAC;AAAA,QACtB,SAAS,EAAE,cAAc,EAAE,IAAI,OAAO,YAAY,EAAE;AAAA,MACtD,CAAC;AAGD,UAAI,SAAS,SAAS,OAAW,QAAO,EAAE,KAAK,MAAM,SAAS,MAAa;AAG3E,aAAO,EAAE,KAAK,SAAS,MAAiC,SAAS,MAAa;AAAA,IAChF,GAjBgB;AAmBhB,QAAI,MAAM,WAAW,MAAO,QAAO,IAAI,MAAM,MAAM,OAAO;AAAA,aACjD,MAAM,WAAW,OAAQ,QAAO,KAAK,MAAM,MAAM,OAAO;AAAA,aACxD,MAAM,WAAW,MAAO,QAAO,IAAI,MAAM,MAAM,OAAO;AAAA,QAC1D,QAAO,OAAO,MAAM,MAAM,OAAO;AAAA,EACxC;AAEA,SAAO,EAAE,GAAG,KAAK,OAAO;AAC1B;AApCgB;","names":[]}
+{"version":3,"sources":["../../src/hono/index.ts"],"sourcesContent":["import { Hono } from 'hono';\nimport type { Context } from 'hono';\n\nimport { messagesOf } from '../messages';\n\nimport {\n  createApiNotifications,\n  type ApiNotifications,\n  type NotificationsServerConfig,\n} from '../server/create-api-notifications';\nimport type { NotificationsActor } from '../server/context';\n\n/**\n * `@12-apps/notifications/hono` — the account notification endpoints as a\n * mountable router.\n *\n * The framework-neutral descriptors in `/server` are the contract; this is the\n * adapter for the framework we happen to use, behind its own subpath with\n * `hono` as an OPTIONAL peer (the report-builder precedent — a host on Express,\n * or one that only wants the React surface, never resolves Hono).\n *\n * A host writes:\n *\n *   const notifications = notificationsRouter({ …config, resolveActor });\n *   app.route('/api/account', notifications.router);\n *\n * and keeps what is genuinely its own: who the caller is. Everything after\n * that — parsing, status codes, the envelope, the pt-BR copy — is the\n * package's.\n */\n\n/**\n * Resolve the caller. Returning `null` means unauthenticated, which answers 401\n * before any handler runs.\n *\n * Note the 401 is self-guarded HERE rather than assumed from middleware: these\n * paths sit under an API prefix that a host's page middleware typically does not\n * match, and an unauthenticated inbox read that fell through would answer\n * somebody else's rows or none at all — both worse than a 401.\n */\nexport type ResolveNotificationsActor = (\n  c: Context,\n) => Promise<NotificationsActor | null> | NotificationsActor | null;\n\nexport interface NotificationsHonoConfig extends NotificationsServerConfig {\n  resolveActor: ResolveNotificationsActor;\n}\n\nexport interface NotificationsHono extends ApiNotifications {\n  router: Hono;\n}\n\n/**\n * Reads the JSON body, tolerating an absent or malformed one — and only when\n * the caller SAID it was JSON.\n *\n * The content-type check is a CSRF speed bump, not a defence (see ADOPTING rule\n * 13, which names the actual one). `text/plain`, `multipart/form-data` and\n * `application/x-www-form-urlencoded` are the three types a cross-site `fetch`\n * or a plain `<form>` can send with NO preflight, so parsing a body regardless\n * of its type is what lets such a request reach these handlers at all. Refusing\n * them means a cross-site write has to earn a preflight first, which the browser\n * will then refuse on its own. The price is nil: every client of this surface,\n * the packaged one included, sends `application/json`.\n */\nfunction saysJson(c: Context): boolean {\n  const type = c.req.header('content-type');\n  if (!type) return false;\n  const mime = (type.split(';')[0] ?? '').trim().toLowerCase();\n  return mime === 'application/json' || mime.endsWith('+json');\n}\n\nasync function readBody(c: Context): Promise<unknown> {\n  if (c.req.method === 'GET') return undefined;\n  if (!saysJson(c)) return undefined;\n  try {\n    return await c.req.json();\n  } catch {\n    // A malformed body is the caller's error; the handler's own validation\n    // reports it far better than a parse failure would.\n    return undefined;\n  }\n}\n\nexport function notificationsRouter(config: NotificationsHonoConfig): NotificationsHono {\n  const api = createApiNotifications(config);\n  const messages = messagesOf(config);\n  const router = new Hono();\n\n  // Mounted IN DESCRIPTOR ORDER, which any adapter must preserve. Hono resolves\n  // by registration order, so a host route shaped `/notifications/:id` under the\n  // same prefix must be registered AFTER this router or it captures\n  // `/notifications/unread-count`.\n  for (const route of api.routes) {\n    const handler = async (c: Context): Promise<Response> => {\n      const actor = await config.resolveActor(c);\n      if (!actor) return c.json({ error: messages.unauthenticated }, 401);\n\n      const response = await route.handle({\n        actor,\n        params: c.req.param() as Record<string, string | undefined>,\n        query: c.req.query() as Record<string, string | undefined>,\n        body: await readBody(c),\n        headers: { 'user-agent': c.req.header('user-agent') },\n      });\n\n      // A handler that chose NO body means exactly that (204).\n      if (response.body === undefined) return c.body(null, response.status as 204);\n      // The status travels with the body the handler chose; the adapter never\n      // reinterprets either.\n      return c.json(response.body as Record<string, unknown>, response.status as 200);\n    };\n\n    if (route.method === 'GET') router.get(route.path, handler);\n    else if (route.method === 'POST') router.post(route.path, handler);\n    else if (route.method === 'PUT') router.put(route.path, handler);\n    else router.delete(route.path, handler);\n  }\n\n  return { ...api, router };\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY;AAiErB,SAAS,SAAS,GAAqB;AACrC,QAAM,OAAO,EAAE,IAAI,OAAO,cAAc;AACxC,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,QAAQ,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,IAAI,KAAK,EAAE,YAAY;AAC3D,SAAO,SAAS,sBAAsB,KAAK,SAAS,OAAO;AAC7D;AALS;AAOT,eAAe,SAAS,GAA8B;AACpD,MAAI,EAAE,IAAI,WAAW,MAAO,QAAO;AACnC,MAAI,CAAC,SAAS,CAAC,EAAG,QAAO;AACzB,MAAI;AACF,WAAO,MAAM,EAAE,IAAI,KAAK;AAAA,EAC1B,QAAQ;AAGN,WAAO;AAAA,EACT;AACF;AAVe;AAYR,SAAS,oBAAoB,QAAoD;AACtF,QAAM,MAAM,uBAAuB,MAAM;AACzC,QAAM,WAAW,WAAW,MAAM;AAClC,QAAM,SAAS,IAAI,KAAK;AAMxB,aAAW,SAAS,IAAI,QAAQ;AAC9B,UAAM,UAAU,8BAAO,MAAkC;AACvD,YAAM,QAAQ,MAAM,OAAO,aAAa,CAAC;AACzC,UAAI,CAAC,MAAO,QAAO,EAAE,KAAK,EAAE,OAAO,SAAS,gBAAgB,GAAG,GAAG;AAElE,YAAM,WAAW,MAAM,MAAM,OAAO;AAAA,QAClC;AAAA,QACA,QAAQ,EAAE,IAAI,MAAM;AAAA,QACpB,OAAO,EAAE,IAAI,MAAM;AAAA,QACnB,MAAM,MAAM,SAAS,CAAC;AAAA,QACtB,SAAS,EAAE,cAAc,EAAE,IAAI,OAAO,YAAY,EAAE;AAAA,MACtD,CAAC;AAGD,UAAI,SAAS,SAAS,OAAW,QAAO,EAAE,KAAK,MAAM,SAAS,MAAa;AAG3E,aAAO,EAAE,KAAK,SAAS,MAAiC,SAAS,MAAa;AAAA,IAChF,GAjBgB;AAmBhB,QAAI,MAAM,WAAW,MAAO,QAAO,IAAI,MAAM,MAAM,OAAO;AAAA,aACjD,MAAM,WAAW,OAAQ,QAAO,KAAK,MAAM,MAAM,OAAO;AAAA,aACxD,MAAM,WAAW,MAAO,QAAO,IAAI,MAAM,MAAM,OAAO;AAAA,QAC1D,QAAO,OAAO,MAAM,MAAM,OAAO;AAAA,EACxC;AAEA,SAAO,EAAE,GAAG,KAAK,OAAO;AAC1B;AApCgB;","names":[]}

package/dist/index.js

@@ -9,12 +9,14 @@ import {
   mergeChoices,
   mergeStoredRow,
   normalizePhoneE164
-} from "./chunk-HQU4R4SG.js";
+} from "./chunk-HHMRCMQU.js";
 import {
   NOTIFICATION_CHANNELS,
-  messagesOf,
   taxonomyOf
-} from "./chunk-Y34FX24X.js";
+} from "./chunk-XE7HZVMH.js";
+import {
+  messagesOf
+} from "./chunk-M2TVBVH2.js";
 import "./chunk-7QVYU63E.js";
 export {
   DEFAULT_CHANNEL_ROW,

package/dist/manifest/server.js

@@ -1,11 +1,12 @@
 import {
   NOTIFICATIONS_JOBS
-} from "../chunk-QRAXX3GR.js";
+} from "../chunk-CUZW62JS.js";
 import {
   createApiNotifications
-} from "../chunk-TIGTBSAQ.js";
-import "../chunk-HQU4R4SG.js";
-import "../chunk-Y34FX24X.js";
+} from "../chunk-WHBMPHQE.js";
+import "../chunk-HHMRCMQU.js";
+import "../chunk-XE7HZVMH.js";
+import "../chunk-M2TVBVH2.js";
 import {
   __name
 } from "../chunk-7QVYU63E.js";

package/dist/manifest/server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/manifest/server.ts"],"sourcesContent":["/**\n * `@12-apps/notifications/manifest/server` — the server capabilities.\n *\n * `http.create` wraps `createApiNotifications` in a WIRE VIEW, and the reason\n * is one field. `NotificationsRequest` carries `headers` — the contract's\n * `WireRequest` does not, because headers are the adapter's business\n * everywhere else — and exactly one descriptor reads it: push-subscribe takes\n * `user-agent` as the DEVICE HINT it labels a subscription with. Without the\n * view the field would simply be absent at runtime while still type-checking,\n * and every saved device would come back unnamed: a silent quality loss, the\n * failure mode the wiring contract exists to convert into a loud one.\n *\n * So the view derives `headers` from the raw request the contract already\n * carries for the handlers `params`/`query`/`body` cannot serve. A host whose\n * adapter leaves `request` unset still gets a working surface — every route\n * answers, the subscription saves — with an unnamed device, which is the\n * honest degradation for a hint. `@12-apps/notifications/hono` populates it.\n *\n * Everything else rides beside the mapped routes on the aggregate unchanged:\n * `notify`, `notifyByPermission`, `dispatchDeliveries`, `drainPending`, the\n * three stores, `registerGenerator` and the transports registry. A host still\n * calls those directly — being mounted does not make the emit front door stop\n * being a library.\n */\n\nimport type { AnyServerManifest, WireRequest } from '@12-apps/wiring';\n\nimport {\n  createApiNotifications,\n  NOTIFICATIONS_JOBS,\n  type ApiNotifications,\n  type NotificationsRoute,\n  type NotificationsServerConfig,\n} from '../server';\n\n/** The header names this surface reads — the device hint, and nothing else. */\nconst READ_HEADERS = ['user-agent'] as const;\n\n/** The headers the package expects, taken off the raw request when there is one. */\nfunction headersOf(request: WireRequest<never>): Record<string, string | undefined> {\n  const raw = request.request;\n  if (!raw) return {};\n  return Object.fromEntries(\n    READ_HEADERS.map((name) => [name, raw.headers.get(name) ?? undefined]),\n  );\n}\n\n/** One `NotificationsRoute` as the wiring contract reads it. */\nfunction asWireRoute(route: NotificationsRoute): {\n  method: NotificationsRoute['method'];\n  path: string;\n  handle(request: WireRequest<never>): Promise<{ status: number; body: unknown }>;\n} {\n  return {\n    method: route.method,\n    path: route.path,\n    handle: (request) =>\n      route.handle({\n        actor: request.actor,\n        params: request.params,\n        query: request.query,\n        body: request.body,\n        headers: headersOf(request),\n      }),\n  };\n}\n\n/** `createApiNotifications`, its routes re-shaped for the aggregate. */\nexport function createWireApiNotifications(\n  config: NotificationsServerConfig,\n): Omit<ApiNotifications, 'routes'> & { routes: ReturnType<typeof asWireRoute>[] } {\n  const api = createApiNotifications(config);\n  return { ...api, routes: api.routes.map(asWireRoute) };\n}\n\nexport const notificationsServerManifest = {\n  name: '@12-apps/notifications',\n  http: { create: createWireApiNotifications },\n  /**\n   * The dispatch fast path and the retry sweep, with their cadence. The host\n   * binds `{ dispatchDeliveries, drainPending }` off its own mount — the two\n   * methods the aggregate already hands it — and deletes the hand-rolled\n   * copies. See `../server/jobs` for why the numbers are the package's.\n   */\n  jobs: NOTIFICATIONS_JOBS,\n} as const satisfies AnyServerManifest;\n"],"mappings":";;;;;;;;;;;;;AAoCA,IAAM,eAAe,CAAC,YAAY;AAGlC,SAAS,UAAU,SAAiE;AAClF,QAAM,MAAM,QAAQ;AACpB,MAAI,CAAC,IAAK,QAAO,CAAC;AAClB,SAAO,OAAO;AAAA,IACZ,aAAa,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,QAAQ,IAAI,IAAI,KAAK,MAAS,CAAC;AAAA,EACvE;AACF;AANS;AAST,SAAS,YAAY,OAInB;AACA,SAAO;AAAA,IACL,QAAQ,MAAM;AAAA,IACd,MAAM,MAAM;AAAA,IACZ,QAAQ,wBAAC,YACP,MAAM,OAAO;AAAA,MACX,OAAO,QAAQ;AAAA,MACf,QAAQ,QAAQ;AAAA,MAChB,OAAO,QAAQ;AAAA,MACf,MAAM,QAAQ;AAAA,MACd,SAAS,UAAU,OAAO;AAAA,IAC5B,CAAC,GAPK;AAAA,EAQV;AACF;AAjBS;AAoBF,SAAS,2BACd,QACiF;AACjF,QAAM,MAAM,uBAAuB,MAAM;AACzC,SAAO,EAAE,GAAG,KAAK,QAAQ,IAAI,OAAO,IAAI,WAAW,EAAE;AACvD;AALgB;AAOT,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,EAAE,QAAQ,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C,MAAM;AACR;","names":[]}
+{"version":3,"sources":["../../src/manifest/server.ts"],"sourcesContent":["/**\n * `@12-apps/notifications/manifest/server` — the server capabilities.\n *\n * `http.create` wraps `createApiNotifications` in a WIRE VIEW, and the reason\n * is one field. `NotificationsRequest` carries `headers` — the contract's\n * `WireRequest` does not, because headers are the adapter's business\n * everywhere else — and exactly one descriptor reads it: push-subscribe takes\n * `user-agent` as the DEVICE HINT it labels a subscription with. Without the\n * view the field would simply be absent at runtime while still type-checking,\n * and every saved device would come back unnamed: a silent quality loss, the\n * failure mode the wiring contract exists to convert into a loud one.\n *\n * So the view derives `headers` from the raw request the contract already\n * carries for the handlers `params`/`query`/`body` cannot serve. A host whose\n * adapter leaves `request` unset still gets a working surface — every route\n * answers, the subscription saves — with an unnamed device, which is the\n * honest degradation for a hint. `@12-apps/notifications/hono` populates it.\n *\n * Everything else rides beside the mapped routes on the aggregate unchanged:\n * `notify`, `notifyByPermission`, `dispatchDeliveries`, `drainPending`, the\n * three stores, `registerGenerator` and the transports registry. A host still\n * calls those directly — being mounted does not make the emit front door stop\n * being a library.\n */\n\nimport type { AnyServerManifest, WireRequest } from '@12-apps/wiring';\n\nimport {\n  createApiNotifications,\n  NOTIFICATIONS_JOBS,\n  type ApiNotifications,\n  type NotificationsRoute,\n  type NotificationsServerConfig,\n} from '../server';\n\n/** The header names this surface reads — the device hint, and nothing else. */\nconst READ_HEADERS = ['user-agent'] as const;\n\n/** The headers the package expects, taken off the raw request when there is one. */\nfunction headersOf(request: WireRequest<never>): Record<string, string | undefined> {\n  const raw = request.request;\n  if (!raw) return {};\n  return Object.fromEntries(\n    READ_HEADERS.map((name) => [name, raw.headers.get(name) ?? undefined]),\n  );\n}\n\n/** One `NotificationsRoute` as the wiring contract reads it. */\nfunction asWireRoute(route: NotificationsRoute): {\n  method: NotificationsRoute['method'];\n  path: string;\n  handle(request: WireRequest<never>): Promise<{ status: number; body: unknown }>;\n} {\n  return {\n    method: route.method,\n    path: route.path,\n    handle: (request) =>\n      route.handle({\n        actor: request.actor,\n        params: request.params,\n        query: request.query,\n        body: request.body,\n        headers: headersOf(request),\n      }),\n  };\n}\n\n/** `createApiNotifications`, its routes re-shaped for the aggregate. */\nexport function createWireApiNotifications(\n  config: NotificationsServerConfig,\n): Omit<ApiNotifications, 'routes'> & { routes: ReturnType<typeof asWireRoute>[] } {\n  const api = createApiNotifications(config);\n  return { ...api, routes: api.routes.map(asWireRoute) };\n}\n\nexport const notificationsServerManifest = {\n  name: '@12-apps/notifications',\n  http: { create: createWireApiNotifications },\n  /**\n   * The dispatch fast path and the retry sweep, with their cadence. The host\n   * binds `{ dispatchDeliveries, drainPending }` off its own mount — the two\n   * methods the aggregate already hands it — and deletes the hand-rolled\n   * copies. See `../server/jobs` for why the numbers are the package's.\n   */\n  jobs: NOTIFICATIONS_JOBS,\n} as const satisfies AnyServerManifest;\n"],"mappings":";;;;;;;;;;;;;;AAoCA,IAAM,eAAe,CAAC,YAAY;AAGlC,SAAS,UAAU,SAAiE;AAClF,QAAM,MAAM,QAAQ;AACpB,MAAI,CAAC,IAAK,QAAO,CAAC;AAClB,SAAO,OAAO;AAAA,IACZ,aAAa,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,QAAQ,IAAI,IAAI,KAAK,MAAS,CAAC;AAAA,EACvE;AACF;AANS;AAST,SAAS,YAAY,OAInB;AACA,SAAO;AAAA,IACL,QAAQ,MAAM;AAAA,IACd,MAAM,MAAM;AAAA,IACZ,QAAQ,wBAAC,YACP,MAAM,OAAO;AAAA,MACX,OAAO,QAAQ;AAAA,MACf,QAAQ,QAAQ;AAAA,MAChB,OAAO,QAAQ;AAAA,MACf,MAAM,QAAQ;AAAA,MACd,SAAS,UAAU,OAAO;AAAA,IAC5B,CAAC,GAPK;AAAA,EAQV;AACF;AAjBS;AAoBF,SAAS,2BACd,QACiF;AACjF,QAAM,MAAM,uBAAuB,MAAM;AACzC,SAAO,EAAE,GAAG,KAAK,QAAQ,IAAI,OAAO,IAAI,WAAW,EAAE;AACvD;AALgB;AAOT,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,EAAE,QAAQ,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3C,MAAM;AACR;","names":[]}

package/dist/manifest/web.d.ts

@@ -1,4 +1,4 @@
-import { c as createWebNotifications } from '../create-web-notifications-BpNR8qH3.js';
+import { c as createWebNotifications } from '../create-web-notifications-BHCzaU2y.js';
 import 'react';
 import '../wire-6dzyfDE7.js';
 import '../types-CXLAG3UU.js';

package/dist/manifest/web.js

@@ -1,7 +1,8 @@
 import {
   createWebNotifications
-} from "../chunk-6HLHQDKS.js";
-import "../chunk-Y34FX24X.js";
+} from "../chunk-MMLV4EZT.js";
+import "../chunk-BW723CX2.js";
+import "../chunk-M2TVBVH2.js";
 import "../chunk-7QVYU63E.js";
 
 // src/manifest/web.ts

package/dist/manifest/web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/manifest/web.ts"],"sourcesContent":["/**\n * `@12-apps/notifications/manifest/web` — the web capabilities.\n *\n * `surface.create` IS `createWebNotifications`, unchanged: the bell, the inbox\n * slide-over, the preferences screen and the bound store, built once per\n * adoption by the consumer's binder (the members are component TYPES, so\n * rebuilding per render unmounts the panel mid-interaction — the memoisation\n * rule every hand wiring carries as a comment today).\n *\n * ## Why this manifest exists now\n *\n * It was narrowed away with a reason that reads plausibly and is FALSE:\n * \"listing `web` would oblige every server host adopting this manifest to\n * answer for a React surface it never mounts.\" The consumer does not work\n * that way. A capability declared for the other runtime is reported\n * `out-of-scope` — \"a web host answers for this\" — and `assemble()` returns\n * fine; only a capability applicable to THIS runtime and unanswered is\n * `unbound`. `wiring`'s own fixture package declares both halves and its\n * server-host suite asserts exactly that.\n *\n * The narrowing therefore bought nothing and cost the thing the capability is\n * for. `./react` and `./web-push` ship Bell, Panel and Preferences — the exact\n * screens the adaptation report wanted to stop being hand-duplicated in hosts,\n * and the origin host duplicated the preferences screen and the push setup\n * anyway, because a manifest that never mentions them is a manifest nobody\n * discovers them from.\n *\n * ## Why there are no `areas`\n *\n * The bell is not a routed screen: it lives in a host's header chrome, beside\n * whatever else that host puts there, and no package can suggest a route for\n * it. Preferences IS routed, but where it belongs differs per host — under\n * account settings in one app, under a tenant's configuration in another — and\n * it is offered as `page` on the surface for the host to route at its own\n * call site. A suggested nav row would be wrong for every host but the first,\n * which is the `AreaContribution` doctrine's own test.\n */\n\nimport type { AnyWebManifest } from '@12-apps/wiring';\n\nimport { createWebNotifications } from '../react/create-web-notifications';\n\nexport const notificationsWebManifest = {\n  name: '@12-apps/notifications',\n  surface: { create: createWebNotifications },\n} as const satisfies AnyWebManifest;\n"],"mappings":";;;;;;;AA0CO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,SAAS,EAAE,QAAQ,uBAAuB;AAC5C;","names":[]}
+{"version":3,"sources":["../../src/manifest/web.ts"],"sourcesContent":["/**\n * `@12-apps/notifications/manifest/web` — the web capabilities.\n *\n * `surface.create` IS `createWebNotifications`, unchanged: the bell, the inbox\n * slide-over, the preferences screen and the bound store, built once per\n * adoption by the consumer's binder (the members are component TYPES, so\n * rebuilding per render unmounts the panel mid-interaction — the memoisation\n * rule every hand wiring carries as a comment today).\n *\n * ## Why this manifest exists now\n *\n * It was narrowed away with a reason that reads plausibly and is FALSE:\n * \"listing `web` would oblige every server host adopting this manifest to\n * answer for a React surface it never mounts.\" The consumer does not work\n * that way. A capability declared for the other runtime is reported\n * `out-of-scope` — \"a web host answers for this\" — and `assemble()` returns\n * fine; only a capability applicable to THIS runtime and unanswered is\n * `unbound`. `wiring`'s own fixture package declares both halves and its\n * server-host suite asserts exactly that.\n *\n * The narrowing therefore bought nothing and cost the thing the capability is\n * for. `./react` and `./web-push` ship Bell, Panel and Preferences — the exact\n * screens the adaptation report wanted to stop being hand-duplicated in hosts,\n * and the origin host duplicated the preferences screen and the push setup\n * anyway, because a manifest that never mentions them is a manifest nobody\n * discovers them from.\n *\n * ## Why there are no `areas`\n *\n * The bell is not a routed screen: it lives in a host's header chrome, beside\n * whatever else that host puts there, and no package can suggest a route for\n * it. Preferences IS routed, but where it belongs differs per host — under\n * account settings in one app, under a tenant's configuration in another — and\n * it is offered as `page` on the surface for the host to route at its own\n * call site. A suggested nav row would be wrong for every host but the first,\n * which is the `AreaContribution` doctrine's own test.\n */\n\nimport type { AnyWebManifest } from '@12-apps/wiring';\n\nimport { createWebNotifications } from '../react/create-web-notifications';\n\nexport const notificationsWebManifest = {\n  name: '@12-apps/notifications',\n  surface: { create: createWebNotifications },\n} as const satisfies AnyWebManifest;\n"],"mappings":";;;;;;;;AA0CO,IAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,SAAS,EAAE,QAAQ,uBAAuB;AAC5C;","names":[]}

package/dist/panel-UFXNO4AF.js

@@ -0,0 +1,243 @@
+import {
+  relativeTime
+} from "./chunk-O5BVUXPO.js";
+import {
+  BellIcon,
+  useInboxList
+} from "./chunk-BW723CX2.js";
+import {
+  __name
+} from "./chunk-7QVYU63E.js";
+
+// src/react/panel.tsx
+import { useCallback } from "react";
+import { EmptyState } from "@12-apps/ui/data-display/EmptyState";
+import { LoadingState } from "@12-apps/ui/data-display/LoadingState";
+import { Button as Button2 } from "@12-apps/ui/form/Button";
+import { Drawer, DrawerContent, DrawerHeader } from "@12-apps/ui/layout/Drawer";
+import { Box as Box2 } from "@12-apps/ui/mui/Box";
+import { useMediaQuery } from "@12-apps/ui/mui/useMediaQuery";
+import { useTheme } from "@12-apps/ui/mui/styles";
+
+// src/react/row.tsx
+import { Button } from "@12-apps/ui/form/Button";
+import { Box } from "@12-apps/ui/mui/Box";
+import { alpha } from "@12-apps/ui/mui/styles";
+import { Text } from "@12-apps/ui/typography/Text";
+import { jsx, jsxs } from "react/jsx-runtime";
+var contentButtonSx = {
+  flex: 1,
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 0.25,
+  textAlign: "left",
+  border: "none",
+  background: "none",
+  p: 0,
+  cursor: "pointer",
+  color: "text.primary",
+  fontFamily: "inherit"
+};
+var unreadDotSx = {
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  bgcolor: "primary.main",
+  flex: "0 0 auto"
+};
+function NotificationRow({
+  notification,
+  messages,
+  onOpen,
+  onDelete
+}) {
+  const unread = notification.readAt === null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `notification-${notification.id}`,
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1,
+        py: 1.5,
+        px: 1,
+        borderBottom: "1px solid",
+        borderColor: "divider",
+        bgcolor: unread ? (t) => alpha(t.palette.primary.main, 0.06) : "transparent"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            onClick: () => onOpen(notification),
+            "aria-label": unread ? `${notification.title} (${messages.unreadSuffix})` : notification.title,
+            sx: contentButtonSx,
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+                unread ? /* @__PURE__ */ jsx(Box, { "aria-hidden": true, sx: unreadDotSx }) : null,
+                /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: unread ? "bold" : "medium", as: "span", children: notification.title })
+              ] }),
+              /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "span", children: notification.body }),
+              /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "span", italic: true, children: relativeTime(notification.createdAt, messages) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            color: "neutral",
+            size: "xs",
+            "aria-label": messages.deleteOne(notification.title),
+            onClick: () => onDelete(notification.id),
+            dataTestId: `notification-delete-${notification.id}`,
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+__name(NotificationRow, "NotificationRow");
+
+// src/react/panel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PanelBody({
+  state,
+  messages,
+  onRetry,
+  onLoadMore,
+  onOpen,
+  onDelete
+}) {
+  if (state.status === "pending" || state.status === "idle") {
+    return /* @__PURE__ */ jsx2(
+      LoadingState,
+      {
+        variant: "spinner",
+        message: messages.loading,
+        size: "md",
+        dataTestId: "notifications-loading"
+      }
+    );
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx2(
+      EmptyState,
+      {
+        variant: "minimal",
+        title: messages.loadFailedTitle,
+        description: messages.loadFailedBody,
+        onRefresh: onRetry,
+        refreshLabel: messages.retry,
+        dataTestId: "notifications-error"
+      }
+    );
+  }
+  if (state.items.length === 0) {
+    return /* @__PURE__ */ jsx2(
+      EmptyState,
+      {
+        variant: "illustrated",
+        illustration: /* @__PURE__ */ jsx2(BellIcon, { size: 44, dim: true }),
+        title: messages.emptyTitle,
+        description: messages.emptyBody,
+        dataTestId: "notifications-empty"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(Box2, { children: [
+    state.items.map((notification) => /* @__PURE__ */ jsx2(
+      NotificationRow,
+      {
+        notification,
+        messages,
+        onOpen,
+        onDelete
+      },
+      notification.id
+    )),
+    state.nextCursor ? /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", justifyContent: "center", py: 1.5 }, children: /* @__PURE__ */ jsx2(
+      Button2,
+      {
+        variant: "outline",
+        color: "neutral",
+        size: "sm",
+        disabled: state.loadingMore,
+        onClick: onLoadMore,
+        dataTestId: "notifications-load-more",
+        children: state.loadingMore ? messages.loadingMore : messages.loadMore
+      }
+    ) }) : null
+  ] });
+}
+__name(PanelBody, "PanelBody");
+function NotificationsPanel({
+  open,
+  onClose,
+  onNavigate,
+  store,
+  messages
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const state = useInboxList(store, open);
+  const openNotification = useCallback(
+    (notification) => {
+      if (notification.readAt === null) store.markRead([notification.id]);
+      if (notification.link && onNavigate) {
+        onClose();
+        onNavigate(notification.link);
+      }
+    },
+    [store, onClose, onNavigate]
+  );
+  const hasUnread = state.items.some((item) => item.readAt === null);
+  return /* @__PURE__ */ jsxs2(
+    Drawer,
+    {
+      open,
+      onClose,
+      anchor: "right",
+      variant: "right",
+      width: isMobile ? "100vw" : 400,
+      dataTestId: "notifications-panel",
+      children: [
+        /* @__PURE__ */ jsx2(DrawerHeader, { onClose, children: messages.panelTitle }),
+        /* @__PURE__ */ jsxs2(DrawerContent, { children: [
+          hasUnread ? /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", justifyContent: "flex-end", pb: 1 }, children: /* @__PURE__ */ jsx2(
+            Button2,
+            {
+              variant: "ghost",
+              color: "primary",
+              size: "xs",
+              onClick: () => store.markAllRead(),
+              dataTestId: "notifications-mark-all-read",
+              children: messages.markAllRead
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx2(
+            PanelBody,
+            {
+              state,
+              messages,
+              onRetry: () => store.invalidate(),
+              onLoadMore: () => store.loadMore(),
+              onOpen: openNotification,
+              onDelete: (id) => store.remove(id)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+__name(NotificationsPanel, "NotificationsPanel");
+export {
+  NotificationsPanel
+};
+//# sourceMappingURL=panel-UFXNO4AF.js.map

package/dist/panel-UFXNO4AF.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 { 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 { 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\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}: 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) {\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    <Box>\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\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\nexport function NotificationsPanel({\n  open,\n  onClose,\n  onNavigate,\n  store,\n  messages,\n}: NotificationsPanelProps & {\n  store: InboxStore;\n  messages: NotificationMessages;\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 = useCallback(\n    (notification: InboxNotification) => {\n      if (notification.readAt === null) store.markRead([notification.id]);\n      if (notification.link && onNavigate) {\n        onClose();\n        onNavigate(notification.link);\n      }\n    },\n    [store, onClose, onNavigate],\n  );\n\n  const hasUnread = state.items.some((item) => item.readAt === null);\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        {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={openNotification}\n          onDelete={(id) => store.remove(id)}\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"]}