@12-apps/notifications 4.7.0 → 4.7.1

package/dist/preferences-screen-IOW6Y2H2.js

@@ -0,0 +1,294 @@
+import {
+  enableWebPush,
+  getExistingPushSubscription
+} from "./chunk-CQZMTFPY.js";
+import {
+  NOTIFICATION_CHANNELS
+} from "./chunk-XE7HZVMH.js";
+import {
+  __name
+} from "./chunk-7QVYU63E.js";
+
+// src/react/preferences-screen.tsx
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+import { LoadingState } from "@12-apps/ui/data-display/LoadingState";
+import { Switch } from "@12-apps/ui/form/Switch";
+import { Box as Box2 } from "@12-apps/ui/mui/Box";
+import { Text as Text2 } from "@12-apps/ui/typography/Text";
+
+// src/react/web-push-setup.tsx
+import { useEffect, useState } from "react";
+import { Button } from "@12-apps/ui/form/Button";
+import { Box } from "@12-apps/ui/mui/Box";
+import { Text } from "@12-apps/ui/typography/Text";
+import { jsx, jsxs } from "react/jsx-runtime";
+var cardSx = {
+  p: 2,
+  border: "1px solid",
+  borderColor: "divider",
+  borderRadius: 2
+};
+function InstallFirstHint({ hint }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: cardSx, "data-testid": "web-push-install-hint", children: [
+    /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", as: "p", children: hint.title }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: hint.body })
+  ] });
+}
+__name(InstallFirstHint, "InstallFirstHint");
+async function resolveState(api) {
+  const subscription = await getExistingPushSubscription();
+  if (!subscription) return "idle";
+  const registration = await api.getPushRegistration({ endpoint: subscription.endpoint }).catch(() => null);
+  return registration?.registered ? "on" : "idle";
+}
+__name(resolveState, "resolveState");
+function statusText(state, messages) {
+  if (state === "on") return messages.devicePushOn;
+  if (state === "denied") return messages.devicePushDenied;
+  if (state === "failed") return messages.devicePushFailed;
+  return messages.devicePushIdle;
+}
+__name(statusText, "statusText");
+function WebPushDeviceSetup({
+  available,
+  api,
+  messages,
+  config
+}) {
+  const [state, setState] = useState("checking");
+  const [needsInstall] = useState(() => config.needsInstallFirst?.() ?? false);
+  useEffect(() => {
+    let cancelled = false;
+    void resolveState(api).then((next) => {
+      if (!cancelled) setState(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+  if (!available) return null;
+  if (needsInstall && config.installHint) return /* @__PURE__ */ jsx(InstallFirstHint, { hint: config.installHint });
+  const enable = /* @__PURE__ */ __name(async () => {
+    setState("busy");
+    const result = await enableWebPush(api, config.swPath);
+    if (result.ok) setState("on");
+    else setState(result.reason === "permission-denied" ? "denied" : "failed");
+  }, "enable");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        ...cardSx,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2
+      },
+      "data-testid": "web-push-device-setup",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", as: "p", children: messages.devicePushTitle }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: statusText(state, messages) })
+        ] }),
+        state !== "on" ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            color: "primary",
+            size: "sm",
+            disabled: state === "busy" || state === "checking",
+            onClick: () => void enable(),
+            dataTestId: "web-push-enable",
+            children: state === "busy" ? messages.devicePushEnabling : messages.devicePushEnable
+          }
+        ) : null
+      ]
+    }
+  );
+}
+__name(WebPushDeviceSetup, "WebPushDeviceSetup");
+
+// src/react/preferences-screen.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function CategoryCard({
+  category,
+  channels,
+  availability,
+  messages,
+  onToggle
+}) {
+  const labels = messages.categoryLabels[category];
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      sx: { p: 2, border: "1px solid", borderColor: "divider", borderRadius: 2 },
+      "data-testid": `prefs-${category}`,
+      children: [
+        /* @__PURE__ */ jsx2(Text2, { variant: "body", size: "sm", weight: "semibold", as: "p", children: labels?.title ?? messages.categoryFallbackTitle(category) }),
+        labels?.description ? /* @__PURE__ */ jsx2(Text2, { variant: "caption", size: "xs", color: "secondary", as: "p", children: labels.description }) : null,
+        /* @__PURE__ */ jsx2(
+          Box2,
+          {
+            sx: {
+              mt: 1.5,
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr 1fr", sm: "repeat(4, 1fr)" },
+              gap: 1
+            },
+            children: NOTIFICATION_CHANNELS.map((channel) => /* @__PURE__ */ jsx2(
+              Switch,
+              {
+                size: "sm",
+                color: "primary",
+                label: messages.channelLabels[channel] ?? channel,
+                checked: channels[channel] && availability[channel],
+                disabled: !availability[channel],
+                onChange: (_, checked) => onToggle(channel, checked),
+                dataTestId: `prefs-${category}-${channel}`
+              },
+              channel
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+__name(CategoryCard, "CategoryCard");
+function UnavailableHints({
+  availability,
+  messages
+}) {
+  const unavailable = NOTIFICATION_CHANNELS.filter((channel) => !availability[channel]);
+  if (unavailable.length === 0) return null;
+  return /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: unavailable.map((channel) => /* @__PURE__ */ jsxs2(
+    Text2,
+    {
+      variant: "caption",
+      size: "xs",
+      color: "secondary",
+      as: "p",
+      "data-testid": `prefs-hint-${channel}`,
+      children: [
+        messages.channelLabels[channel] ?? channel,
+        ":",
+        " ",
+        messages.channelUnavailableHints[channel] ?? ""
+      ]
+    },
+    channel
+  )) });
+}
+__name(UnavailableHints, "UnavailableHints");
+function usePreferences(api) {
+  const [payload, setPayload] = useState2(null);
+  useEffect2(() => {
+    let cancelled = false;
+    void api.getPreferences().then((next) => {
+      if (!cancelled) setPayload(next);
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+  const toggle = useCallback(
+    (category, channel, enabled) => {
+      setPayload((current) => {
+        const row = current?.preferences[category];
+        if (!current || !row) return current;
+        return {
+          ...current,
+          preferences: { ...current.preferences, [category]: { ...row, [channel]: enabled } }
+        };
+      });
+      const reconcile = /* @__PURE__ */ __name(() => {
+        void api.getPreferences().then(setPayload).catch(() => void 0);
+      }, "reconcile");
+      void api.savePreference(category, channel, enabled).then((result) => {
+        if (result.ok) setPayload(result.data);
+        else reconcile();
+      }).catch(reconcile);
+    },
+    [api]
+  );
+  return { payload, toggle };
+}
+__name(usePreferences, "usePreferences");
+function PreferencesScreen({
+  footer,
+  api,
+  messages,
+  webPush
+}) {
+  const { payload, toggle } = usePreferences(api);
+  if (!payload) {
+    return /* @__PURE__ */ jsx2(
+      LoadingState,
+      {
+        variant: "spinner",
+        message: messages.loadingMore,
+        size: "md",
+        dataTestId: "notification-prefs-loading"
+      }
+    );
+  }
+  const { preferences, availability, categories } = payload;
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      component: "section",
+      "data-testid": "notification-prefs-view",
+      sx: {
+        maxWidth: 640,
+        mx: "auto",
+        width: "100%",
+        px: 2,
+        py: 4,
+        display: "flex",
+        flexDirection: "column",
+        gap: 2
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { variant: "heading", size: "lg", as: "h1", children: messages.preferencesTitle }),
+          /* @__PURE__ */ jsxs2(Text2, { variant: "caption", size: "sm", color: "secondary", as: "p", children: [
+            messages.preferencesLead,
+            " ",
+            footer
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          WebPushDeviceSetup,
+          {
+            available: availability.WEB_PUSH,
+            api,
+            messages,
+            config: webPush
+          }
+        ),
+        categories.map((category) => /* @__PURE__ */ jsx2(
+          CategoryCard,
+          {
+            category,
+            channels: preferences[category] ?? {
+              EMAIL: false,
+              SMS: false,
+              WHATSAPP: false,
+              WEB_PUSH: false
+            },
+            availability,
+            messages,
+            onToggle: (channel, enabled) => toggle(category, channel, enabled)
+          },
+          category
+        )),
+        /* @__PURE__ */ jsx2(UnavailableHints, { availability, messages })
+      ]
+    }
+  );
+}
+__name(PreferencesScreen, "PreferencesScreen");
+export {
+  PreferencesScreen
+};
+//# sourceMappingURL=preferences-screen-IOW6Y2H2.js.map

package/dist/preferences-screen-IOW6Y2H2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/preferences-screen.tsx","../src/react/web-push-setup.tsx"],"sourcesContent":["/**\n * The notification-preferences screen: the category × channel matrix over\n * `GET/PUT <mount>/notification-preferences`.\n *\n * Toggles auto-save (optimistic, per change); channels that cannot reach the\n * user right now (no phone on file / channel not declared) render disabled with\n * a hint. Web Push additionally carries the per-BROWSER enable step, since a\n * preference alone cannot reach a device that never subscribed.\n */\nimport { useCallback, useEffect, useState, type JSX } from 'react';\n\nimport { LoadingState } from '@12-apps/ui/data-display/LoadingState';\nimport { Switch } from '@12-apps/ui/form/Switch';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { NotificationMessages } from '../messages';\nimport { NOTIFICATION_CHANNELS, type NotificationChannel } from '../types';\n\nimport type { NotificationsApiClient, PreferencesPayload } from './api';\nimport { WebPushDeviceSetup, type WebPushSetupConfig } from './web-push-setup';\n\ntype Availability = Record<NotificationChannel, boolean>;\n\n/** One category's row of channel switches. */\nfunction CategoryCard({\n  category,\n  channels,\n  availability,\n  messages,\n  onToggle,\n}: {\n  category: string;\n  channels: Record<NotificationChannel, boolean>;\n  availability: Availability;\n  messages: NotificationMessages;\n  onToggle: (channel: NotificationChannel, enabled: boolean) => void;\n}): JSX.Element {\n  const labels = messages.categoryLabels[category];\n  return (\n    <Box\n      sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}\n      data-testid={`prefs-${category}`}\n    >\n      <Text variant=\"body\" size=\"sm\" weight=\"semibold\" as=\"p\">\n        {labels?.title ?? messages.categoryFallbackTitle(category)}\n      </Text>\n      {labels?.description ? (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          {labels.description}\n        </Text>\n      ) : null}\n      <Box\n        sx={{\n          mt: 1.5,\n          display: 'grid',\n          gridTemplateColumns: { xs: '1fr 1fr', sm: 'repeat(4, 1fr)' },\n          gap: 1,\n        }}\n      >\n        {NOTIFICATION_CHANNELS.map((channel) => (\n          <Switch\n            key={channel}\n            size=\"sm\"\n            color=\"primary\"\n            label={messages.channelLabels[channel] ?? channel}\n            // An unavailable channel reads OFF regardless of the stored choice:\n            // a toggle that says \"on\" for a channel that cannot reach you is a\n            // promise the pipeline will not keep.\n            checked={channels[channel] && availability[channel]}\n            disabled={!availability[channel]}\n            onChange={(_, checked) => onToggle(channel, checked)}\n            // `dataTestId`, not `data-testid`: the UI Switch puts this one on\n            // the INPUT (and derives `-container` / `-label` from it), which is\n            // the element a click and a `disabled` assertion need.\n            dataTestId={`prefs-${category}-${channel}`}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n\n/** Why disabled toggles are disabled, one line per unavailable channel. */\nfunction UnavailableHints({\n  availability,\n  messages,\n}: {\n  availability: Availability;\n  messages: NotificationMessages;\n}): JSX.Element | null {\n  const unavailable = NOTIFICATION_CHANNELS.filter((channel) => !availability[channel]);\n  if (unavailable.length === 0) return null;\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>\n      {unavailable.map((channel) => (\n        <Text\n          key={channel}\n          variant=\"caption\"\n          size=\"xs\"\n          color=\"secondary\"\n          as=\"p\"\n          data-testid={`prefs-hint-${channel}`}\n        >\n          {messages.channelLabels[channel] ?? channel}:{' '}\n          {messages.channelUnavailableHints[channel] ?? ''}\n        </Text>\n      ))}\n    </Box>\n  );\n}\n\nexport interface PreferencesScreenProps {\n  /** Rendered under the lead paragraph — a \"back to account\" link, typically. */\n  footer?: JSX.Element;\n}\n\n/** Optimistic per-toggle auto-save; a failed PUT takes the server's answer. */\nfunction usePreferences(api: NotificationsApiClient): {\n  payload: PreferencesPayload | null;\n  toggle: (category: string, channel: NotificationChannel, enabled: boolean) => void;\n} {\n  const [payload, setPayload] = useState<PreferencesPayload | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    void api\n      .getPreferences()\n      .then((next) => {\n        if (!cancelled) setPayload(next);\n      })\n      .catch(() => undefined);\n    return () => {\n      cancelled = true;\n    };\n  }, [api]);\n\n  const toggle = useCallback(\n    (category: string, channel: NotificationChannel, enabled: boolean) => {\n      setPayload((current) => {\n        const row = current?.preferences[category];\n        if (!current || !row) return current;\n        return {\n          ...current,\n          preferences: { ...current.preferences, [category]: { ...row, [channel]: enabled } },\n        };\n      });\n      const reconcile = (): void => {\n        void api.getPreferences().then(setPayload).catch(() => undefined);\n      };\n      void api\n        .savePreference(category, channel, enabled)\n        .then((result) => {\n          // The PUT answers with the whole matrix, so a success REPLACES the\n          // optimistic guess with the server's own row — which is what catches a\n          // save the server merged differently from the way the screen assumed.\n          if (result.ok) setPayload(result.data);\n          else reconcile();\n        })\n        // The packaged transport never rejects (it folds a failure into\n        // `ok: false`), but a HOST transport may — and an unhandled rejection\n        // would leave the toggle showing a choice the server never took.\n        .catch(reconcile);\n    },\n    [api],\n  );\n\n  return { payload, toggle };\n}\n\nexport function PreferencesScreen({\n  footer,\n  api,\n  messages,\n  webPush,\n}: PreferencesScreenProps & {\n  api: NotificationsApiClient;\n  messages: NotificationMessages;\n  webPush: WebPushSetupConfig;\n}): JSX.Element {\n  const { payload, toggle } = usePreferences(api);\n\n  if (!payload) {\n    return (\n      <LoadingState\n        variant=\"spinner\"\n        message={messages.loadingMore}\n        size=\"md\"\n        dataTestId=\"notification-prefs-loading\"\n      />\n    );\n  }\n\n  const { preferences, availability, categories } = payload;\n  return (\n    <Box\n      component=\"section\"\n      data-testid=\"notification-prefs-view\"\n      sx={{\n        maxWidth: 640,\n        mx: 'auto',\n        width: '100%',\n        px: 2,\n        py: 4,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 2,\n      }}\n    >\n      <Box>\n        <Text variant=\"heading\" size=\"lg\" as=\"h1\">\n          {messages.preferencesTitle}\n        </Text>\n        <Text variant=\"caption\" size=\"sm\" color=\"secondary\" as=\"p\">\n          {messages.preferencesLead} {footer}\n        </Text>\n      </Box>\n      <WebPushDeviceSetup\n        available={availability.WEB_PUSH}\n        api={api}\n        messages={messages}\n        config={webPush}\n      />\n      {categories.map((category) => (\n        <CategoryCard\n          key={category}\n          category={category}\n          channels={preferences[category] ?? {\n            EMAIL: false,\n            SMS: false,\n            WHATSAPP: false,\n            WEB_PUSH: false,\n          }}\n          availability={availability}\n          messages={messages}\n          onToggle={(channel, enabled) => toggle(category, channel, enabled)}\n        />\n      ))}\n      <UnavailableHints availability={availability} messages={messages} />\n    </Box>\n  );\n}\n","/**\n * The per-BROWSER Web Push enable step, which sits above the preference matrix\n * because a preference alone cannot reach a device that never subscribed.\n */\nimport { useEffect, useState, type JSX } from 'react';\n\nimport { Button } from '@12-apps/ui/form/Button';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { NotificationMessages } from '../messages';\n\nimport type { NotificationsApiClient } from './api';\nimport { enableWebPush, getExistingPushSubscription } from './web-push-client';\n\n/** The panel's copy for a host whose platform blocks browser-level push. */\nexport interface WebPushPlatformHint {\n  title: string;\n  body: string;\n}\n\nexport interface WebPushSetupConfig {\n  /**\n   * The host's service-worker path. Path-routed SPAs each control their own\n   * scope, and the file itself is the host's.\n   */\n  swPath?: string;\n  /**\n   * Whether THIS platform must be installed to the home screen before a\n   * subscription can exist at all.\n   *\n   * iOS is the case: Safari has no browser-level Web Push, so \"Ativar\" there\n   * asks no permission, creates no subscription, and fails with nothing a user\n   * could act on. The check is a config seam rather than a dependency because\n   * \"is this an installable iOS browser\" is a question a host's PWA layer\n   * already answers (the origin passes\n   * `() => isIosInstallable() && !isStandalone()` from `@12-apps/pwa`).\n   */\n  needsInstallFirst?: () => boolean;\n  /** What to say instead of the button when the check above is true. */\n  installHint?: WebPushPlatformHint;\n}\n\nconst cardSx = {\n  p: 2,\n  border: '1px solid',\n  borderColor: 'divider',\n  borderRadius: 2,\n} as const;\n\nfunction InstallFirstHint({ hint }: { hint: WebPushPlatformHint }): JSX.Element {\n  return (\n    <Box sx={cardSx} data-testid=\"web-push-install-hint\">\n      <Text variant=\"body\" size=\"sm\" weight=\"semibold\" as=\"p\">\n        {hint.title}\n      </Text>\n      <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n        {hint.body}\n      </Text>\n    </Box>\n  );\n}\n\ntype SetupState = 'idle' | 'checking' | 'on' | 'busy' | 'failed' | 'denied';\n\n/**\n * \"Is this browser receiving alerts?\" — asked of the browser AND of the server.\n *\n * The browser alone is not enough, and answering from it alone is how a real\n * person is silenced while being told they are fine. Two users share a counter\n * PC: Ana enables push, then Otávio signs in on the same browser and enables it\n * too. `PushManager` hands out the SAME endpoint for the same browser profile,\n * so the POST re-owns the row and Ana's is gone. Ana signs back in, her browser\n * still holds the subscription object, and a browser-only check renders \"Este\n * navegador está recebendo alertas.\" with no button to fix it — forever. The\n * 404/410 prune reaches the same state from the other direction.\n *\n * So the server is asked whether it still has THIS endpoint under THIS user. A\n * `false` (or an unreachable server) shows *Ativar* again, and one click\n * re-registers the row — which is the same request the happy path makes, so the\n * recovery costs nothing to maintain.\n */\nasync function resolveState(api: NotificationsApiClient): Promise<SetupState> {\n  const subscription = await getExistingPushSubscription();\n  if (!subscription) return 'idle';\n  const registration = await api\n    .getPushRegistration({ endpoint: subscription.endpoint })\n    .catch(() => null);\n  return registration?.registered ? 'on' : 'idle';\n}\n\nfunction statusText(state: SetupState, messages: NotificationMessages): string {\n  if (state === 'on') return messages.devicePushOn;\n  if (state === 'denied') return messages.devicePushDenied;\n  if (state === 'failed') return messages.devicePushFailed;\n  return messages.devicePushIdle;\n}\n\nexport function WebPushDeviceSetup({\n  available,\n  api,\n  messages,\n  config,\n}: {\n  available: boolean;\n  api: NotificationsApiClient;\n  messages: NotificationMessages;\n  config: WebPushSetupConfig;\n}): JSX.Element | null {\n  const [state, setState] = useState<SetupState>('checking');\n  // Read once, at mount: neither can change without a new document.\n  const [needsInstall] = useState(() => config.needsInstallFirst?.() ?? false);\n\n  useEffect(() => {\n    let cancelled = false;\n    void resolveState(api).then((next) => {\n      if (!cancelled) setState(next);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [api]);\n\n  if (!available) return null;\n  if (needsInstall && config.installHint) return <InstallFirstHint hint={config.installHint} />;\n\n  const enable = async (): Promise<void> => {\n    setState('busy');\n    const result = await enableWebPush(api, config.swPath);\n    if (result.ok) setState('on');\n    else setState(result.reason === 'permission-denied' ? 'denied' : 'failed');\n  };\n\n  return (\n    <Box\n      sx={{\n        ...cardSx,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 2,\n      }}\n      data-testid=\"web-push-device-setup\"\n    >\n      <Box sx={{ minWidth: 0 }}>\n        <Text variant=\"body\" size=\"sm\" weight=\"semibold\" as=\"p\">\n          {messages.devicePushTitle}\n        </Text>\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          {statusText(state, messages)}\n        </Text>\n      </Box>\n      {state !== 'on' ? (\n        <Button\n          variant=\"outline\"\n          color=\"primary\"\n          size=\"sm\"\n          disabled={state === 'busy' || state === 'checking'}\n          onClick={() => void enable()}\n          dataTestId=\"web-push-enable\"\n        >\n          {state === 'busy' ? messages.devicePushEnabling : messages.devicePushEnable}\n        </Button>\n      ) : null}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["useEffect","useState","Box","Text","jsx","jsxs","Box","Text","useState","useEffect"]}

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
-import { N as NotificationsApiClient } from '../create-web-notifications-BpNR8qH3.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 NotificationsHttpError, g as NotificationsPanelProps, h as NotificationsResult, i as NotificationsSignalHook, j as NotificationsSubscribe, k as NotificationsTransport, l as NotificationsWebConfig, P as PAGE_SIZE, m as PreferencesPayload, n as PreferencesScreenProps, o as PushRegistrationPayload, W as WebNotifications, p as WebPushPlatformHint, q as WebPushSetupConfig, r as createInboxStore, s as createNotificationsApiClient, c as createWebNotifications, t as httpNotificationsTransport, u as useInboxList, v as useInboxState, w as useUnreadCount } from '../create-web-notifications-BpNR8qH3.js';
+import { N as NotificationsApiClient } from '../create-web-notifications-BHCzaU2y.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 NotificationsHttpError, g as NotificationsPanelProps, h as NotificationsResult, i as NotificationsSignalHook, j as NotificationsSubscribe, k as NotificationsTransport, l as NotificationsWebConfig, P as PAGE_SIZE, m as PreferencesPayload, n as PreferencesScreenProps, o as PushRegistrationPayload, W as WebNotifications, p as WebPushPlatformHint, q as WebPushSetupConfig, r as createInboxStore, s as createNotificationsApiClient, c as createWebNotifications, t as httpNotificationsTransport, u as useInboxList, v as useInboxState, w as useUnreadCount } from '../create-web-notifications-BHCzaU2y.js';
 import { JSX } from 'react';
 import { N as NotificationMessages } from '../wire-6dzyfDE7.js';
 import '../types-CXLAG3UU.js';

package/dist/react/index.js

@@ -1,23 +1,29 @@
+import {
+  relativeTime
+} from "../chunk-O5BVUXPO.js";
+import {
+  disableWebPush,
+  enableWebPush,
+  getExistingPushSubscription,
+  pushSupported
+} from "../chunk-CQZMTFPY.js";
+import {
+  NotificationsHttpError,
+  createNotificationsApiClient,
+  createWebNotifications,
+  httpNotificationsTransport
+} from "../chunk-MMLV4EZT.js";
 import {
   BADGE_POLL_MS,
   BADGE_RECONCILE_MS,
   BellIcon,
-  NotificationsHttpError,
   PAGE_SIZE,
   createInboxStore,
-  createNotificationsApiClient,
-  createWebNotifications,
-  disableWebPush,
-  enableWebPush,
-  getExistingPushSubscription,
-  httpNotificationsTransport,
-  pushSupported,
-  relativeTime,
   useInboxList,
   useInboxState,
   useUnreadCount
-} from "../chunk-6HLHQDKS.js";
-import "../chunk-Y34FX24X.js";
+} from "../chunk-BW723CX2.js";
+import "../chunk-M2TVBVH2.js";
 import "../chunk-7QVYU63E.js";
 export {
   BADGE_POLL_MS,

package/dist/server/index.js

@@ -4,7 +4,7 @@ import {
   NOTIFICATIONS_JOBS,
   NOTIFICATIONS_SWEEP_QUEUE,
   wireNotifyPort
-} from "../chunk-QRAXX3GR.js";
+} from "../chunk-CUZW62JS.js";
 import {
   EMAIL_DRIVERS,
   NotificationProviderError,
@@ -25,9 +25,10 @@ import {
   smsTransport,
   webPushTransport,
   whatsAppTransport
-} 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 "../chunk-7QVYU63E.js";
 export {
   EMAIL_DRIVERS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/notifications",
-  "version": "4.7.0",
+  "version": "4.7.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.",
@@ -51,7 +51,7 @@
     "prisma:sync:check": "node scripts/sync-notifications-schema.mjs --check"
   },
   "dependencies": {
-    "@12-apps/ui": "^6.11.0"
+    "@12-apps/ui": "^6.11.1"
   },
   "peerDependencies": {
     "@12-apps/wiring": ">=1.3.0",

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

@@ -10,8 +10,10 @@ import {
   type NotificationsSubscribe,
 } from './hooks';
 import { createInboxStore, type InboxStore } from './inbox-state';
-import { NotificationsPanel, type NotificationsPanelProps } from './panel';
-import { PreferencesScreen, type PreferencesScreenProps } from './preferences-screen';
+import { lazyNotificationsPanel } from './panel-lazy';
+import type { NotificationsPanelProps } from './panel';
+import { lazyPreferencesPage } from './page-lazy';
+import type { PreferencesScreenProps } from './preferences-screen';
 import { httpNotificationsTransport, type NotificationsTransport } from './transport';
 import type { WebPushSetupConfig } from './web-push-setup';
 
@@ -56,11 +58,22 @@ export interface NotificationsWebConfig {
 }
 
 export 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
@@ -97,9 +110,7 @@ export function createWebNotifications(config: NotificationsWebConfig): WebNotif
   const Bell: ComponentType<BellButtonProps> = (props) => (
     <BellButton {...props} store={store} messages={messages} {...subscribeOption} />
   );
-  const Panel: ComponentType<NotificationsPanelProps> = (props) => (
-    <NotificationsPanel {...props} store={store} messages={messages} />
-  );
+  const Panel = lazyNotificationsPanel({ store, messages });
 
   function useBoundUnreadCount(options: { enabled?: boolean } = {}): number {
     return useUnreadCount(store, { ...options, ...subscribeOption });
@@ -126,9 +137,7 @@ export function createWebNotifications(config: NotificationsWebConfig): WebNotif
   }
 
   return {
-    page: (props) => (
-      <PreferencesScreen {...props} api={api} messages={messages} webPush={webPush} />
-    ),
+    page: lazyPreferencesPage({ api, messages, webPush }),
     BellButton: Bell,
     Panel,
     BellWithPanel,

package/src/react/page-lazy.tsx

@@ -0,0 +1,73 @@
+/**
+ * The routed preferences screen, fetched when a host actually routes to it.
+ *
+ * `createWebNotifications` returns two different KINDS of thing, and its own
+ * docstring says so: `page` is "the standalone surface … the one thing a host
+ * routes to", while the bell and the panel "are a PAIR a host drops into its own
+ * chrome". Chrome is on screen from the first paint; a routed surface is not.
+ *
+ * A static import made that distinction invisible to a bundler. Every host that
+ * put the bell in its header also shipped the preferences matrix — its channel
+ * toggles, the per-browser push enable step, and the design-system `Switch`
+ * behind them — in the same chunk as the header. A storefront paid for a
+ * settings screen a shopper never opens, before its first screen could render;
+ * a host that renders its OWN preferences page paid for this one twice.
+ *
+ * So `page` now loads on demand. Nothing else moves: the bell, the panel and
+ * `BellWithPanel` stay exactly as eager as the chrome they belong to, because
+ * that is what they are.
+ *
+ * NO PREFETCH, deliberately, and this is the opposite call from a surface a
+ * host opens from chrome it already has. A routed surface is reached by
+ * NAVIGATION, and every host here already code-splits its routes — so the
+ * fetch happens while the route is being entered, which is the moment a
+ * prefetch would have been trying to anticipate. Warming it at factory time
+ * would put the screen back on the boot path of every app, which is the whole
+ * cost this removes.
+ */
+import { Suspense, lazy, type ComponentType, type JSX } from 'react';
+
+import type { NotificationMessages } from '../messages';
+
+import type { NotificationsApiClient } from './api';
+import type { PreferencesScreenProps } from './preferences-screen';
+import type { WebPushSetupConfig } from './web-push-setup';
+
+/** What the factory binds into the screen, and the host never passes. */
+interface PreferencesPageParts {
+  api: NotificationsApiClient;
+  messages: NotificationMessages;
+  webPush: WebPushSetupConfig;
+}
+
+/**
+ * The routed screen, bound and loaded on first render.
+ *
+ * `lazy` memoises its factory, so the binding below happens once however many
+ * times a host mounts the page — the same guarantee the direct call gave.
+ *
+ * The fallback is `null` because a host routes to this: whatever it renders
+ * around the route is already on screen, and a second spinner inside it would
+ * be one more thing appearing and disappearing during a navigation the host is
+ * already indicating.
+ */
+export function lazyPreferencesPage(
+  parts: PreferencesPageParts,
+): ComponentType<PreferencesScreenProps> {
+  const Bound = lazy(async () => {
+    const { PreferencesScreen } = await import('./preferences-screen');
+    return {
+      default: (props: PreferencesScreenProps): JSX.Element => (
+        <PreferencesScreen {...props} {...parts} />
+      ),
+    };
+  });
+
+  return function NotificationsPreferencesPage(props: PreferencesScreenProps): JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <Bound {...props} />
+      </Suspense>
+    );
+  };
+}

package/src/react/panel-lazy.tsx

@@ -0,0 +1,74 @@
+/**
+ * The inbox slide-over, fetched the first time somebody opens it.
+ *
+ * The bell and the panel are a PAIR a host drops into its chrome, and that is
+ * still true — but only the BELL is on screen when a page paints. The panel is
+ * behind a tap, and a static import made every host pay for it up front: the
+ * design-system `Drawer` and, through it, MUI's `SwipeableDrawer`, `Modal`,
+ * `Slide` and the focus trap, plus the row, the empty state and the pager. On a
+ * storefront that is a slide-over most visits never open, parsed before the
+ * first screen can render.
+ *
+ * ## Why the gate is "ever opened" rather than `open`
+ *
+ * `lazy` fetches when a component first RENDERS, so a boundary that still
+ * rendered the panel while closed would fetch immediately and buy nothing. This
+ * renders `null` until the panel has been open once, which is what actually
+ * defers the download to the tap.
+ *
+ * And once opened it STAYS mounted. Unmounting on close would throw away the
+ * drawer's transition state, so the panel would vanish instead of sliding out,
+ * and the entrance animation would re-run on every reopen — which someone
+ * working through an inbox does repeatedly. The fetch happens once.
+ *
+ * The initial state reads `open` rather than starting at `false`, so a host that
+ * mounts the panel already open renders it in the same commit instead of a frame
+ * later.
+ *
+ * ## Why `null` for the fallback
+ *
+ * The only frame this can show anything is the one right after the tap, where a
+ * spinner reads as a stall rather than as progress. The chunk is small and
+ * same-origin.
+ */
+import { Suspense, lazy, useEffect, useState, type ComponentType, type JSX } from 'react';
+
+import type { NotificationMessages } from '../messages';
+
+import type { InboxStore } from './inbox-state';
+import type { NotificationsPanelProps } from './panel';
+
+/** What the factory binds into the panel, and the host never passes. */
+interface PanelParts {
+  store: InboxStore;
+  messages: NotificationMessages;
+}
+
+export function lazyNotificationsPanel(
+  parts: PanelParts,
+): ComponentType<NotificationsPanelProps> {
+  const Bound = lazy(async () => {
+    const { NotificationsPanel } = await import('./panel');
+    return {
+      default: (props: NotificationsPanelProps): JSX.Element => (
+        <NotificationsPanel {...props} {...parts} />
+      ),
+    };
+  });
+
+  return function NotificationsPanelSlot(props: NotificationsPanelProps): JSX.Element | null {
+    const [everOpened, setEverOpened] = useState(props.open);
+
+    useEffect(() => {
+      if (props.open) setEverOpened(true);
+    }, [props.open]);
+
+    if (!everOpened) return null;
+
+    return (
+      <Suspense fallback={null}>
+        <Bound {...props} />
+      </Suspense>
+    );
+  };
+}