@12-apps/notifications 4.0.0 → 4.1.1

package/dist/react/index.js

@@ -0,0 +1,1030 @@
+import {
+  NOTIFICATION_CHANNELS,
+  messagesOf
+} from "../chunk-4TTYQVPK.js";
+import {
+  __name
+} from "../chunk-7QVYU63E.js";
+
+// src/react/create-web-notifications.tsx
+import { useState as useState3 } from "react";
+
+// src/react/api.ts
+function createNotificationsApiClient(apiBase, transport) {
+  const base = apiBase.replace(/\/$/, "");
+  const url = /* @__PURE__ */ __name((path) => `${base}${path}`, "url");
+  return {
+    listNotifications({ cursor, limit, filter }) {
+      const params = new URLSearchParams();
+      if (limit !== void 0) params.set("limit", String(limit));
+      if (cursor) params.set("cursor", cursor);
+      if (filter) params.set("filter", filter);
+      const query = params.toString();
+      return transport.get(
+        url(`/notifications${query ? `?${query}` : ""}`)
+      );
+    },
+    async unreadCount() {
+      const { count } = await transport.get(
+        url("/notifications/unread-count")
+      );
+      return count;
+    },
+    markRead: /* @__PURE__ */ __name((ids) => transport.send(url("/notifications/mark-read"), "POST", { ids: [...ids] }), "markRead"),
+    markAllRead: /* @__PURE__ */ __name(() => transport.send(url("/notifications/mark-read"), "POST", { all: true }), "markAllRead"),
+    remove: /* @__PURE__ */ __name((ids) => transport.send(url("/notifications/delete"), "POST", { ids: [...ids] }), "remove"),
+    getPreferences: /* @__PURE__ */ __name(() => transport.get(url("/notification-preferences")), "getPreferences"),
+    savePreference: /* @__PURE__ */ __name((category, channel, enabled) => transport.send(url("/notification-preferences"), "PUT", {
+      [category]: { [channel]: enabled }
+    }), "savePreference"),
+    getPushRegistration: /* @__PURE__ */ __name(({ endpoint } = {}) => transport.get(
+      url(
+        endpoint ? `/push-subscriptions?endpoint=${encodeURIComponent(endpoint)}` : "/push-subscriptions"
+      )
+    ), "getPushRegistration"),
+    savePushSubscription: /* @__PURE__ */ __name((input) => transport.send(url("/push-subscriptions"), "POST", input), "savePushSubscription"),
+    removePushSubscription: /* @__PURE__ */ __name((endpoint) => transport.send(url("/push-subscriptions"), "DELETE", { endpoint }), "removePushSubscription")
+  };
+}
+__name(createNotificationsApiClient, "createNotificationsApiClient");
+
+// src/react/bell-button.tsx
+import { Badge } from "@12-apps/ui/data-display/Badge";
+import { Box as Box2 } from "@12-apps/ui/mui/Box";
+
+// src/react/bell-icon.tsx
+import { Box } from "@12-apps/ui/mui/Box";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BellIcon({
+  size = 28,
+  dim = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "svg",
+      viewBox: "0 0 24 24",
+      "aria-hidden": true,
+      sx: {
+        width: size,
+        height: size,
+        fill: "none",
+        stroke: "currentColor",
+        opacity: dim ? 0.4 : 1
+      },
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 20a2 2 0 0 0 4 0" })
+      ]
+    }
+  );
+}
+__name(BellIcon, "BellIcon");
+
+// src/react/hooks.ts
+import { useEffect, useSyncExternalStore } from "react";
+
+// src/react/inbox-state.ts
+var PAGE_SIZE = 20;
+var BADGE_POLL_MS = 6e4;
+var BADGE_RECONCILE_MS = 3e5;
+var EMPTY = {
+  unread: 0,
+  items: [],
+  status: "idle",
+  nextCursor: null,
+  loadingMore: false
+};
+function patch(cell, next) {
+  cell.state = { ...cell.state, ...next };
+  for (const listener of cell.listeners) listener();
+}
+__name(patch, "patch");
+function refreshBadge(cell, api) {
+  void api.unreadCount().then((unread) => patch(cell, { unread })).catch(() => void 0);
+}
+__name(refreshBadge, "refreshBadge");
+function reloadList(cell, api) {
+  const token = cell.request += 1;
+  patch(cell, { status: cell.state.items.length > 0 ? cell.state.status : "pending" });
+  void api.listNotifications({ limit: PAGE_SIZE }).then((page) => {
+    if (token !== cell.request) return;
+    patch(cell, { items: page.items, nextCursor: page.nextCursor, status: "ready" });
+  }).catch(() => {
+    if (token !== cell.request) return;
+    patch(cell, { status: "error" });
+  });
+}
+__name(reloadList, "reloadList");
+function invalidate(cell, api) {
+  refreshBadge(cell, api);
+  if (cell.state.status !== "idle") reloadList(cell, api);
+}
+__name(invalidate, "invalidate");
+function write(cell, api, apply, send) {
+  apply();
+  void send().then((result) => {
+    if (!result.ok) invalidate(cell, api);
+  }).catch(() => invalidate(cell, api));
+}
+__name(write, "write");
+function bumpUnread(cell, delta) {
+  patch(cell, { unread: Math.max(0, cell.state.unread + delta) });
+}
+__name(bumpUnread, "bumpUnread");
+function loadMore(cell, api) {
+  const cursor = cell.state.nextCursor;
+  if (!cursor || cell.state.loadingMore) return;
+  patch(cell, { loadingMore: true });
+  void api.listNotifications({ cursor, limit: PAGE_SIZE }).then((page) => {
+    patch(cell, {
+      items: [...cell.state.items, ...page.items],
+      nextCursor: page.nextCursor,
+      loadingMore: false
+    });
+  }).catch(() => patch(cell, { loadingMore: false }));
+}
+__name(loadMore, "loadMore");
+function markRead(cell, api, ids) {
+  const readAt = (/* @__PURE__ */ new Date()).toISOString();
+  let flipped = 0;
+  const items = cell.state.items.map((item) => {
+    if (!ids.includes(item.id) || item.readAt !== null) return item;
+    flipped += 1;
+    return { ...item, readAt };
+  });
+  if (flipped === 0) return;
+  write(
+    cell,
+    api,
+    () => {
+      patch(cell, { items });
+      bumpUnread(cell, -flipped);
+    },
+    () => api.markRead(ids)
+  );
+}
+__name(markRead, "markRead");
+function remove(cell, api, id) {
+  const target = cell.state.items.find((item) => item.id === id);
+  if (!target) return;
+  const items = cell.state.items.filter((item) => item.id !== id);
+  write(
+    cell,
+    api,
+    () => {
+      patch(cell, { items });
+      if (target.readAt === null) bumpUnread(cell, -1);
+    },
+    () => api.remove([id])
+  );
+}
+__name(remove, "remove");
+function createInboxStore(api) {
+  const cell = { state: EMPTY, listeners: /* @__PURE__ */ new Set(), request: 0 };
+  return {
+    getState: /* @__PURE__ */ __name(() => cell.state, "getState"),
+    subscribe(listener) {
+      cell.listeners.add(listener);
+      return () => cell.listeners.delete(listener);
+    },
+    open() {
+      if (cell.state.status === "idle") reloadList(cell, api);
+    },
+    refreshBadge: /* @__PURE__ */ __name(() => refreshBadge(cell, api), "refreshBadge"),
+    invalidate: /* @__PURE__ */ __name(() => invalidate(cell, api), "invalidate"),
+    loadMore: /* @__PURE__ */ __name(() => loadMore(cell, api), "loadMore"),
+    markRead: /* @__PURE__ */ __name((ids) => markRead(cell, api, ids), "markRead"),
+    markAllRead() {
+      const readAt = (/* @__PURE__ */ new Date()).toISOString();
+      const items = cell.state.items.map((item) => ({ ...item, readAt: item.readAt ?? readAt }));
+      write(
+        cell,
+        api,
+        () => patch(cell, { items, unread: 0 }),
+        () => api.markAllRead()
+      );
+    },
+    remove: /* @__PURE__ */ __name((id) => remove(cell, api, id), "remove")
+  };
+}
+__name(createInboxStore, "createInboxStore");
+
+// src/react/hooks.ts
+function useInboxState(store) {
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+__name(useInboxState, "useInboxState");
+function useUnreadCount(store, options = {}) {
+  const enabled = options.enabled ?? true;
+  const subscribe = options.subscribe;
+  const { unread } = useInboxState(store);
+  options.useSignal?.(() => {
+    if (enabled) store.invalidate();
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    store.refreshBadge();
+    const unsubscribe = subscribe?.(() => store.invalidate());
+    const interval = setInterval(
+      () => store.refreshBadge(),
+      subscribe ? BADGE_RECONCILE_MS : BADGE_POLL_MS
+    );
+    const onFocus = /* @__PURE__ */ __name(() => store.refreshBadge(), "onFocus");
+    globalThis.addEventListener?.("focus", onFocus);
+    return () => {
+      clearInterval(interval);
+      globalThis.removeEventListener?.("focus", onFocus);
+      unsubscribe?.();
+    };
+  }, [store, enabled, subscribe]);
+  return enabled ? unread : 0;
+}
+__name(useUnreadCount, "useUnreadCount");
+function useInboxList(store, open) {
+  const state = useInboxState(store);
+  useEffect(() => {
+    if (open) store.open();
+  }, [store, open]);
+  return state;
+}
+__name(useInboxList, "useInboxList");
+
+// src/react/bell-button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var triggerSx = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  p: 0.5,
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  color: "text.primary",
+  lineHeight: 0,
+  "& *": { cursor: "pointer" },
+  "&:hover": { color: "primary.main" },
+  "&:focus-visible": {
+    outline: "2px solid",
+    outlineColor: "primary.main",
+    outlineOffset: "2px",
+    borderRadius: "50%"
+  }
+};
+function BellButton({
+  onClick,
+  enabled = true,
+  store,
+  messages,
+  subscribe,
+  useSignal
+}) {
+  const count = useUnreadCount(store, {
+    enabled,
+    ...subscribe ? { subscribe } : {},
+    ...useSignal ? { useSignal } : {}
+  });
+  return /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      component: "button",
+      type: "button",
+      onClick,
+      "aria-label": count > 0 ? messages.openBellWithUnread(count) : messages.openBell,
+      "data-testid": "notifications-bell",
+      sx: triggerSx,
+      children: /* @__PURE__ */ jsx2(
+        Badge,
+        {
+          content: count > 0 ? count : void 0,
+          color: "primary",
+          variant: "count",
+          max: 99,
+          "data-testid": "notifications-badge",
+          children: /* @__PURE__ */ jsx2(BellIcon, { size: 28 })
+        }
+      )
+    }
+  );
+}
+__name(BellButton, "BellButton");
+
+// 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 Box4 } 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 as Box3 } from "@12-apps/ui/mui/Box";
+import { alpha } from "@12-apps/ui/mui/styles";
+import { Text } from "@12-apps/ui/typography/Text";
+
+// src/react/relative-time.ts
+function relativeTime(iso, messages) {
+  const elapsedMs = Date.now() - new Date(iso).getTime();
+  const minutes = Math.round(elapsedMs / 6e4);
+  if (minutes < 1) return messages.justNow;
+  if (minutes < 60) return messages.minutesAgo(minutes);
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return messages.hoursAgo(hours);
+  const days = Math.round(hours / 24);
+  if (days < 7) return messages.daysAgo(days);
+  return new Date(iso).toLocaleDateString(messages.dateLocale);
+}
+__name(relativeTime, "relativeTime");
+
+// src/react/row.tsx
+import { jsx as jsx3, jsxs as jsxs2 } 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__ */ jsxs2(
+    Box3,
+    {
+      "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__ */ jsxs2(
+          Box3,
+          {
+            component: "button",
+            type: "button",
+            onClick: () => onOpen(notification),
+            "aria-label": unread ? `${notification.title} (${messages.unreadSuffix})` : notification.title,
+            sx: contentButtonSx,
+            children: [
+              /* @__PURE__ */ jsxs2(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+                unread ? /* @__PURE__ */ jsx3(Box3, { "aria-hidden": true, sx: unreadDotSx }) : null,
+                /* @__PURE__ */ jsx3(Text, { variant: "body", size: "sm", weight: unread ? "bold" : "medium", as: "span", children: notification.title })
+              ] }),
+              /* @__PURE__ */ jsx3(Text, { variant: "caption", size: "xs", color: "secondary", as: "span", children: notification.body }),
+              /* @__PURE__ */ jsx3(Text, { variant: "caption", size: "xs", color: "secondary", as: "span", italic: true, children: relativeTime(notification.createdAt, messages) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          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 jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PanelBody({
+  state,
+  messages,
+  onRetry,
+  onLoadMore,
+  onOpen,
+  onDelete
+}) {
+  if (state.status === "pending" || state.status === "idle") {
+    return /* @__PURE__ */ jsx4(
+      LoadingState,
+      {
+        variant: "spinner",
+        message: messages.loading,
+        size: "md",
+        dataTestId: "notifications-loading"
+      }
+    );
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx4(
+      EmptyState,
+      {
+        variant: "minimal",
+        title: messages.loadFailedTitle,
+        description: messages.loadFailedBody,
+        onRefresh: onRetry,
+        refreshLabel: messages.retry,
+        dataTestId: "notifications-error"
+      }
+    );
+  }
+  if (state.items.length === 0) {
+    return /* @__PURE__ */ jsx4(
+      EmptyState,
+      {
+        variant: "illustrated",
+        illustration: /* @__PURE__ */ jsx4(BellIcon, { size: 44, dim: true }),
+        title: messages.emptyTitle,
+        description: messages.emptyBody,
+        dataTestId: "notifications-empty"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(Box4, { children: [
+    state.items.map((notification) => /* @__PURE__ */ jsx4(
+      NotificationRow,
+      {
+        notification,
+        messages,
+        onOpen,
+        onDelete
+      },
+      notification.id
+    )),
+    state.nextCursor ? /* @__PURE__ */ jsx4(Box4, { sx: { display: "flex", justifyContent: "center", py: 1.5 }, children: /* @__PURE__ */ jsx4(
+      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__ */ jsxs3(
+    Drawer,
+    {
+      open,
+      onClose,
+      anchor: "right",
+      variant: "right",
+      width: isMobile ? "100vw" : 400,
+      dataTestId: "notifications-panel",
+      children: [
+        /* @__PURE__ */ jsx4(DrawerHeader, { onClose, children: messages.panelTitle }),
+        /* @__PURE__ */ jsxs3(DrawerContent, { children: [
+          hasUnread ? /* @__PURE__ */ jsx4(Box4, { sx: { display: "flex", justifyContent: "flex-end", pb: 1 }, children: /* @__PURE__ */ jsx4(
+            Button2,
+            {
+              variant: "ghost",
+              color: "primary",
+              size: "xs",
+              onClick: () => store.markAllRead(),
+              dataTestId: "notifications-mark-all-read",
+              children: messages.markAllRead
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx4(
+            PanelBody,
+            {
+              state,
+              messages,
+              onRetry: () => store.invalidate(),
+              onLoadMore: () => store.loadMore(),
+              onOpen: openNotification,
+              onDelete: (id) => store.remove(id)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+__name(NotificationsPanel, "NotificationsPanel");
+
+// src/react/preferences-screen.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import { LoadingState as LoadingState2 } from "@12-apps/ui/data-display/LoadingState";
+import { Switch } from "@12-apps/ui/form/Switch";
+import { Box as Box6 } from "@12-apps/ui/mui/Box";
+import { Text as Text3 } from "@12-apps/ui/typography/Text";
+
+// src/react/web-push-setup.tsx
+import { useEffect as useEffect2, useState } from "react";
+import { Button as Button3 } from "@12-apps/ui/form/Button";
+import { Box as Box5 } from "@12-apps/ui/mui/Box";
+import { Text as Text2 } from "@12-apps/ui/typography/Text";
+
+// src/react/web-push-client.ts
+function base64UrlToUint8Array(base64Url) {
+  const padding = "=".repeat((4 - base64Url.length % 4) % 4);
+  const base64 = (base64Url + padding).replaceAll("-", "+").replaceAll("_", "/");
+  const raw = atob(base64);
+  return Uint8Array.from(raw, (char) => char.charCodeAt(0));
+}
+__name(base64UrlToUint8Array, "base64UrlToUint8Array");
+function pushSupported() {
+  return typeof navigator !== "undefined" && "serviceWorker" in navigator && typeof window !== "undefined" && "PushManager" in window && "Notification" in window;
+}
+__name(pushSupported, "pushSupported");
+async function getExistingPushSubscription() {
+  if (!pushSupported()) return null;
+  const registration = await navigator.serviceWorker.getRegistration();
+  if (!registration) return null;
+  return registration.pushManager.getSubscription();
+}
+__name(getExistingPushSubscription, "getExistingPushSubscription");
+async function obtainSubscription(swPath, vapidPublicKey) {
+  const registration = await navigator.serviceWorker.register(swPath);
+  await navigator.serviceWorker.ready;
+  return await registration.pushManager.getSubscription() ?? registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: base64UrlToUint8Array(vapidPublicKey)
+  });
+}
+__name(obtainSubscription, "obtainSubscription");
+async function persist(api, subscription) {
+  const json = subscription.toJSON();
+  if (!json.endpoint || !json.keys?.p256dh || !json.keys.auth) {
+    return { ok: false, reason: "error" };
+  }
+  const saved = await api.savePushSubscription({
+    endpoint: json.endpoint,
+    keys: { p256dh: json.keys.p256dh, auth: json.keys.auth }
+  });
+  return saved.ok ? { ok: true } : { ok: false, reason: "error" };
+}
+__name(persist, "persist");
+async function enableWebPush(api, swPath = "/sw.js") {
+  if (!pushSupported()) return { ok: false, reason: "unsupported" };
+  const registration = await api.getPushRegistration().catch(() => null);
+  if (!registration?.vapidPublicKey) return { ok: false, reason: "unconfigured" };
+  const permission = await Notification.requestPermission();
+  if (permission !== "granted") return { ok: false, reason: "permission-denied" };
+  try {
+    return await persist(
+      api,
+      await obtainSubscription(swPath, registration.vapidPublicKey)
+    );
+  } catch {
+    return { ok: false, reason: "error" };
+  }
+}
+__name(enableWebPush, "enableWebPush");
+async function disableWebPush(api) {
+  const subscription = await getExistingPushSubscription();
+  if (!subscription) return;
+  const endpoint = subscription.endpoint;
+  await subscription.unsubscribe().catch(() => false);
+  await api.removePushSubscription(endpoint).catch(() => void 0);
+}
+__name(disableWebPush, "disableWebPush");
+
+// src/react/web-push-setup.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var cardSx = {
+  p: 2,
+  border: "1px solid",
+  borderColor: "divider",
+  borderRadius: 2
+};
+function InstallFirstHint({ hint }) {
+  return /* @__PURE__ */ jsxs4(Box5, { sx: cardSx, "data-testid": "web-push-install-hint", children: [
+    /* @__PURE__ */ jsx5(Text2, { variant: "body", size: "sm", weight: "semibold", as: "p", children: hint.title }),
+    /* @__PURE__ */ jsx5(Text2, { 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);
+  useEffect2(() => {
+    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__ */ jsx5(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__ */ jsxs4(
+    Box5,
+    {
+      sx: {
+        ...cardSx,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2
+      },
+      "data-testid": "web-push-device-setup",
+      children: [
+        /* @__PURE__ */ jsxs4(Box5, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx5(Text2, { variant: "body", size: "sm", weight: "semibold", as: "p", children: messages.devicePushTitle }),
+          /* @__PURE__ */ jsx5(Text2, { variant: "caption", size: "xs", color: "secondary", as: "p", children: statusText(state, messages) })
+        ] }),
+        state !== "on" ? /* @__PURE__ */ jsx5(
+          Button3,
+          {
+            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 jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function CategoryCard({
+  category,
+  channels,
+  availability,
+  messages,
+  onToggle
+}) {
+  const labels = messages.categoryLabels[category];
+  return /* @__PURE__ */ jsxs5(
+    Box6,
+    {
+      sx: { p: 2, border: "1px solid", borderColor: "divider", borderRadius: 2 },
+      "data-testid": `prefs-${category}`,
+      children: [
+        /* @__PURE__ */ jsx6(Text3, { variant: "body", size: "sm", weight: "semibold", as: "p", children: labels?.title ?? messages.categoryFallbackTitle(category) }),
+        labels?.description ? /* @__PURE__ */ jsx6(Text3, { variant: "caption", size: "xs", color: "secondary", as: "p", children: labels.description }) : null,
+        /* @__PURE__ */ jsx6(
+          Box6,
+          {
+            sx: {
+              mt: 1.5,
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr 1fr", sm: "repeat(4, 1fr)" },
+              gap: 1
+            },
+            children: NOTIFICATION_CHANNELS.map((channel) => /* @__PURE__ */ jsx6(
+              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__ */ jsx6(Box6, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: unavailable.map((channel) => /* @__PURE__ */ jsxs5(
+    Text3,
+    {
+      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);
+  useEffect3(() => {
+    let cancelled = false;
+    void api.getPreferences().then((next) => {
+      if (!cancelled) setPayload(next);
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+  const toggle = useCallback2(
+    (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__ */ jsx6(
+      LoadingState2,
+      {
+        variant: "spinner",
+        message: messages.loadingMore,
+        size: "md",
+        dataTestId: "notification-prefs-loading"
+      }
+    );
+  }
+  const { preferences, availability, categories } = payload;
+  return /* @__PURE__ */ jsxs5(
+    Box6,
+    {
+      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__ */ jsxs5(Box6, { children: [
+          /* @__PURE__ */ jsx6(Text3, { variant: "heading", size: "lg", as: "h1", children: messages.preferencesTitle }),
+          /* @__PURE__ */ jsxs5(Text3, { variant: "caption", size: "sm", color: "secondary", as: "p", children: [
+            messages.preferencesLead,
+            " ",
+            footer
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          WebPushDeviceSetup,
+          {
+            available: availability.WEB_PUSH,
+            api,
+            messages,
+            config: webPush
+          }
+        ),
+        categories.map((category) => /* @__PURE__ */ jsx6(
+          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__ */ jsx6(UnavailableHints, { availability, messages })
+      ]
+    }
+  );
+}
+__name(PreferencesScreen, "PreferencesScreen");
+
+// src/react/transport.ts
+var NotificationsHttpError = class _NotificationsHttpError extends Error {
+  static {
+    __name(this, "NotificationsHttpError");
+  }
+  status;
+  constructor(status, message) {
+    super(message);
+    this.name = "NotificationsHttpError";
+    this.status = status;
+    Object.setPrototypeOf(this, _NotificationsHttpError.prototype);
+  }
+};
+var FALLBACK_ERROR = "N\xE3o foi poss\xEDvel concluir a opera\xE7\xE3o.";
+function httpNotificationsTransport(fallbackError = FALLBACK_ERROR) {
+  return {
+    async get(path) {
+      const response = await fetch(path, {
+        credentials: "same-origin",
+        headers: { Accept: "application/json" }
+      });
+      const payload = await response.json().catch(() => null);
+      if (!response.ok) {
+        throw new NotificationsHttpError(
+          response.status,
+          payload?.error ?? `HTTP ${response.status} for ${path}`
+        );
+      }
+      return payload?.data ?? payload;
+    },
+    async send(path, method, body) {
+      try {
+        const response = await fetch(path, {
+          method,
+          credentials: "same-origin",
+          headers: {
+            Accept: "application/json",
+            ...body === void 0 ? {} : { "Content-Type": "application/json" }
+          },
+          ...body === void 0 ? {} : { body: JSON.stringify(body) }
+        });
+        if (response.status === 204) return { ok: true, data: void 0 };
+        const payload = await response.json().catch(() => null);
+        if (!response.ok) return { ok: false, error: payload?.error ?? fallbackError };
+        return { ok: true, data: payload?.data ?? payload };
+      } catch {
+        return { ok: false, error: fallbackError };
+      }
+    }
+  };
+}
+__name(httpNotificationsTransport, "httpNotificationsTransport");
+
+// src/react/create-web-notifications.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function createWebNotifications(config) {
+  const messages = messagesOf(config);
+  const api = createNotificationsApiClient(
+    config.apiBase,
+    config.transport ?? httpNotificationsTransport(messages.operationFailed)
+  );
+  const store = createInboxStore(api);
+  const webPush = config.webPush ?? {};
+  const subscribe = config.subscribe;
+  const subscribeOption = {
+    ...subscribe ? { subscribe } : {},
+    ...config.useSignal ? { useSignal: config.useSignal } : {}
+  };
+  const Bell = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx7(BellButton, { ...props, store, messages, ...subscribeOption }), "Bell");
+  const Panel = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx7(NotificationsPanel, { ...props, store, messages }), "Panel");
+  function useBoundUnreadCount(options = {}) {
+    return useUnreadCount(store, { ...options, ...subscribeOption });
+  }
+  __name(useBoundUnreadCount, "useBoundUnreadCount");
+  function BellWithPanel({
+    enabled = true,
+    onNavigate
+  }) {
+    const [open, setOpen] = useState3(false);
+    return /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx7(Bell, { enabled, onClick: () => setOpen(true) }),
+      /* @__PURE__ */ jsx7(
+        Panel,
+        {
+          open,
+          onClose: () => setOpen(false),
+          ...onNavigate ? { onNavigate } : {}
+        }
+      )
+    ] });
+  }
+  __name(BellWithPanel, "BellWithPanel");
+  return {
+    page: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx7(PreferencesScreen, { ...props, api, messages, webPush }), "page"),
+    BellButton: Bell,
+    Panel,
+    BellWithPanel,
+    useUnreadCount: useBoundUnreadCount,
+    store,
+    api,
+    messages
+  };
+}
+__name(createWebNotifications, "createWebNotifications");
+export {
+  BADGE_POLL_MS,
+  BADGE_RECONCILE_MS,
+  BellIcon,
+  NotificationsHttpError,
+  PAGE_SIZE,
+  createInboxStore,
+  createNotificationsApiClient,
+  createWebNotifications,
+  disableWebPush,
+  enableWebPush,
+  getExistingPushSubscription,
+  httpNotificationsTransport,
+  pushSupported,
+  relativeTime,
+  useInboxList,
+  useInboxState,
+  useUnreadCount
+};
+//# sourceMappingURL=index.js.map