@12-apps/notifications 4.7.0 → 4.8.0

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"]}

package/dist/preferences-screen-V3ZBWP7A.js

@@ -0,0 +1,294 @@
+import {
+  enableWebPush,
+  getExistingPushSubscription
+} from "./chunk-CQZMTFPY.js";
+import {
+  NOTIFICATION_CHANNELS
+} from "./chunk-BGI4BQ66.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-V3ZBWP7A.js.map

package/dist/preferences-screen-V3ZBWP7A.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,8 +1,8 @@
-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-DrgqtU4Q.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-DrgqtU4Q.js';
 import { JSX } from 'react';
-import { N as NotificationMessages } from '../wire-6dzyfDE7.js';
-import '../types-CXLAG3UU.js';
+import { N as NotificationMessages } from '../wire-CmRrB3_s.js';
+import '../types-CYJN1xCM.js';
 
 /** Inline SVG bell (no icon-library dependency in this package). */
 

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-M5XTROYM.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.d.ts

@@ -1,11 +1,11 @@
-import { A as ApiNotifications } from '../create-api-notifications-B3u6Kx3x.js';
-export { C as CommittedNotification, E as EMAIL_DRIVERS, c as EmailDriver, d as EmailDriverDeclaration, e as EmailMessage, f as ExtraDrivers, L as ListNotificationsInput, g as NotificationAudienceDirectory, h as NotificationChannelPolicy, i as NotificationCommittedListener, j as NotificationContactDirectory, k as NotificationCreateData, l as NotificationDelegate, m as NotificationDeliveryDelegate, n as NotificationDeliveryRow, o as NotificationDeliveryWhere, p as NotificationDispatchScheduler, q as NotificationInboxStore, r as NotificationPageAfter, s as NotificationPreferenceDelegate, t as NotificationPreferenceRow, u as NotificationPreferenceStore, v as NotificationRouter, w as NotificationWhere, a as NotificationsActor, x as NotificationsApiError, y as NotificationsDb, z as NotificationsDbClient, B as NotificationsDbProvider, D as NotificationsRequest, F as NotificationsResponse, b as NotificationsRoute, N as NotificationsServerConfig, G as NotifyByPermission, H as NotifyOptions, I as NotifyResult, P as PermissionNotificationResult, J as PermissionNotificationSkip, K as PushSubscriptionDelegate, M as PushSubscriptionInput, O as PushSubscriptionRow, Q as PushSubscriptionStore, S as SMS_DRIVERS, R as SmsDriver, T as SmsDriverDeclaration, U as SmsMessage, V as TransportDeclaration, W as TransportRegistry, X as WHATSAPP_DRIVERS, Y as WhatsAppDriver, Z as WhatsAppDriverDeclaration, _ as WhatsAppMessage, $ as createApiNotifications, a0 as createTransportRegistry, a1 as emailTransport, a2 as foldApiError, a3 as formatEmail, a4 as formatSms, a5 as formatWhatsApp, a6 as ok, a7 as smsTransport, a8 as whatsAppTransport } from '../create-api-notifications-B3u6Kx3x.js';
-export { D as DriverDeclarationBase, F as FetchImpl, N as NotificationProviderError, W as WEB_PUSH_DRIVERS, a as WebPushDriverDeclaration, b as WebPushMessage, c as WebPushSender, d as WebPushSubscription, e as WebPushSubscriptionSource, f as absoluteLink, g as formatWebPush, w as webPushTransport } from '../web-push-Cs14Wp9u.js';
+import { A as ApiNotifications } from '../create-api-notifications-WaexrZnn.js';
+export { C as CommittedNotification, E as EMAIL_DRIVERS, c as EmailDriver, d as EmailDriverDeclaration, e as EmailMessage, f as ExtraDrivers, L as ListNotificationsInput, g as NotificationAudienceDirectory, h as NotificationChannelPolicy, i as NotificationCommittedListener, j as NotificationContactDirectory, k as NotificationCreateData, l as NotificationDelegate, m as NotificationDeliveryDelegate, n as NotificationDeliveryRow, o as NotificationDeliveryWhere, p as NotificationDispatchScheduler, q as NotificationInboxStore, r as NotificationPageAfter, s as NotificationPreferenceDelegate, t as NotificationPreferenceRow, u as NotificationPreferenceStore, v as NotificationRouter, w as NotificationWhere, a as NotificationsActor, x as NotificationsApiError, y as NotificationsDb, z as NotificationsDbClient, B as NotificationsDbProvider, D as NotificationsRequest, F as NotificationsResponse, b as NotificationsRoute, N as NotificationsServerConfig, G as NotifyByPermission, H as NotifyOptions, I as NotifyResult, P as PermissionNotificationResult, J as PermissionNotificationSkip, K as PushSubscriptionDelegate, M as PushSubscriptionInput, O as PushSubscriptionRow, Q as PushSubscriptionStore, S as SMS_DRIVERS, R as SmsDriver, T as SmsDriverDeclaration, U as SmsMessage, V as TransportDeclaration, W as TransportRegistry, X as WHATSAPP_DRIVERS, Y as WhatsAppDriver, Z as WhatsAppDriverDeclaration, _ as WhatsAppMessage, $ as createApiNotifications, a0 as createTransportRegistry, a1 as emailTransport, a2 as foldApiError, a3 as formatEmail, a4 as formatSms, a5 as formatWhatsApp, a6 as ok, a7 as smsTransport, a8 as whatsAppTransport } from '../create-api-notifications-WaexrZnn.js';
+export { D as DriverDeclarationBase, F as FetchImpl, N as NotificationProviderError, W as WEB_PUSH_DRIVERS, a as WebPushDriverDeclaration, b as WebPushMessage, c as WebPushSender, d as WebPushSubscription, e as WebPushSubscriptionSource, f as absoluteLink, g as formatWebPush, w as webPushTransport } from '../web-push-iER5StBm.js';
 import { NotifyPort } from '@12-apps/wiring/ports';
-export { a as NOTIFICATIONS_DRAIN_CRON, b as NOTIFICATIONS_DRAIN_LEASE_MS, c as NOTIFICATIONS_JOBS, d as NOTIFICATIONS_SWEEP_QUEUE, N as NotificationsJobDeps } from '../jobs-BDZ7aGHV.js';
-import '../generators-B9xt3sRh.js';
-import '../types-CXLAG3UU.js';
-import '../wire-6dzyfDE7.js';
+export { a as NOTIFICATIONS_DRAIN_CRON, b as NOTIFICATIONS_DRAIN_LEASE_MS, c as NOTIFICATIONS_JOBS, d as NOTIFICATIONS_SWEEP_QUEUE, N as NotificationsJobDeps } from '../jobs-CcsSA0YR.js';
+import '../generators-CH5m8Ucj.js';
+import '../types-CYJN1xCM.js';
+import '../wire-CmRrB3_s.js';
 import '@12-apps/wiring';
 
 /**

package/dist/server/index.js

@@ -4,7 +4,7 @@ import {
   NOTIFICATIONS_JOBS,
   NOTIFICATIONS_SWEEP_QUEUE,
   wireNotifyPort
-} from "../chunk-QRAXX3GR.js";
+} from "../chunk-KU4FVOFA.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-7234ROOP.js";
+import "../chunk-GGAZOLNN.js";
+import "../chunk-BGI4BQ66.js";
+import "../chunk-M2TVBVH2.js";
 import "../chunk-7QVYU63E.js";
 export {
   EMAIL_DRIVERS,

package/dist/{types-CXLAG3UU.d.ts → types-CYJN1xCM.d.ts}

@@ -84,12 +84,44 @@ interface NotificationEvent<TPayload = unknown> {
  * generator never touches existing generators, the router, or any transport
  * (open/closed).
  */
+/**
+ * Who the content is being rendered FOR — the reader, at the moment the
+ * generator is asked.
+ *
+ * A notification is stored as rendered TEXT: title and body are columns, so
+ * the language is chosen once, when the row is written, and never again. That
+ * makes this the only honest place to ask. A generator is registered at BOOT —
+ * a host that resolved its words there would pin every future reader to
+ * whichever language the process happened to start in, invisibly, because a
+ * single-locale host cannot tell the difference.
+ *
+ * The tag is the RECIPIENT's, never the request's. The person who triggers a
+ * notification is routinely not the person who reads it: an invite is sent
+ * because an administrator acted and is read by the invitee. Reading
+ * `Accept-Language` here would be a bug that only ever surfaces as somebody
+ * being told things in a language they do not speak.
+ *
+ * Absent means "nobody said" — a host with one audience, or one that stores no
+ * per-user language, populates nothing and every generator answers with its
+ * own default exactly as it did before this existed.
+ */
+interface NotificationGenerateContext {
+    readonly locale?: string | null;
+}
 interface NotificationGenerator<TPayload = unknown> {
     /** The event key, dot-namespaced ("order.paid"). One generator per type. */
     type: string;
     /** The preference category the router gates this type's fan-out on. */
     category: NotificationCategory;
-    generate: (payload: TPayload) => NotificationContent;
+    /**
+     * Render this event's content for ONE recipient.
+     *
+     * `context` is OPTIONAL, and that is what keeps every generator written
+     * before it working: a one-parameter `generate` is assignable to this
+     * signature unchanged. A host that passes nothing is stating a fact — it has
+     * no language for this reader — rather than asserting a default.
+     */
+    generate: (payload: TPayload, context?: NotificationGenerateContext) => NotificationContent;
 }
 /**
  * The recipient as a transport sees them: resolved destinations only. Built by
@@ -100,6 +132,11 @@ interface NotificationGenerator<TPayload = unknown> {
 interface TransportRecipient {
     userId: string;
     email: string | null;
+    /**
+     * The recipient's own language, when the host's contact directory states
+     * one. Absent means "nobody said" — see {@link NotificationGenerateContext}.
+     */
+    locale?: string | null;
     /** Phone as the host stores it (transports normalize per provider rules). */
     phone: string | null;
     /** How many active browser push subscriptions the user holds. */
@@ -152,4 +189,4 @@ interface NotificationLogger {
     error(message: string, ...meta: unknown[]): void;
 }
 
-export { type DeliveryStatus as D, NOTIFICATION_CHANNELS as N, type TransportRecipient as T, type NotificationCategory as a, type NotificationChannel as b, type NotificationContent as c, type NotificationEvent as d, type NotificationGenerator as e, type NotificationLogger as f, type NotificationRecipient as g, type NotificationTaxonomy as h, type NotificationTransport as i, taxonomyOf as t };
+export { type DeliveryStatus as D, NOTIFICATION_CHANNELS as N, type TransportRecipient as T, type NotificationCategory as a, type NotificationChannel as b, type NotificationContent as c, type NotificationEvent as d, type NotificationGenerateContext as e, type NotificationGenerator as f, type NotificationLogger as g, type NotificationRecipient as h, type NotificationTaxonomy as i, type NotificationTransport as j, taxonomyOf as t };

package/dist/web-push/index.d.ts

@@ -1,5 +1,5 @@
-import { c as WebPushSender } from '../web-push-Cs14Wp9u.js';
-import '../types-CXLAG3UU.js';
+import { c as WebPushSender } from '../web-push-iER5StBm.js';
+import '../types-CYJN1xCM.js';
 
 /**
  * `@12-apps/notifications/web-push` — the VAPID sender, behind its own subpath.

package/dist/{web-push-Cs14Wp9u.d.ts → web-push-iER5StBm.d.ts}

@@ -1,4 +1,4 @@
-import { f as NotificationLogger, c as NotificationContent, i as NotificationTransport } from './types-CXLAG3UU.js';
+import { g as NotificationLogger, c as NotificationContent, j as NotificationTransport } from './types-CYJN1xCM.js';
 
 /**
  * The DRIVER port — the reason a host adds a vendor with a config entry and no

package/dist/{wire-6dzyfDE7.d.ts → wire-CmRrB3_s.d.ts}

@@ -1,4 +1,4 @@
-import { a as NotificationCategory, b as NotificationChannel } from './types-CXLAG3UU.js';
+import { a as NotificationCategory, b as NotificationChannel } from './types-CYJN1xCM.js';
 
 /**
  * Every sentence this package can say to a USER, stated by the HOST.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/notifications",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "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",
@@ -80,7 +80,7 @@
   "devDependencies": {
     "@12-apps/eslint-config": "^1.22.0",
     "@12-apps/typescript-config": "^1.21.0",
-    "@12-apps/wiring": "^1.14.0",
+    "@12-apps/wiring": "^1.16.0",
     "@testing-library/react": "^16.1.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",

package/src/index.ts

@@ -28,6 +28,7 @@ export {
   type NotificationChannel,
   type NotificationContent,
   type NotificationEvent,
+  type NotificationGenerateContext,
   type NotificationGenerator,
   type NotificationLogger,
   type NotificationRecipient,