@adatechnology/notification-ui 0.1.0-rc.1 → 0.1.0-rc.3

package/dist/index.js

@@ -1,323 +1,58 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// src/NotificationProvider.tsx
-import { createContext, useContext, useMemo } from "react";
-
-// src/locales/pt-BR.json
-var pt_BR_default = {
-  "bell.label": "Notifica\xE7\xF5es",
-  "bell.unreadSuffix": "n\xE3o lidas",
-  "list.title": "Notifica\xE7\xF5es",
-  "list.empty": "Nenhuma notifica\xE7\xE3o por aqui.",
-  "list.loading": "Carregando\u2026",
-  "list.error": "N\xE3o foi poss\xEDvel carregar suas notifica\xE7\xF5es.",
-  "list.retry": "Tentar de novo",
-  "list.loadMore": "Carregar mais",
-  "list.markAllAsRead": "Marcar todas como lidas",
-  "item.markAsRead": "Marcar como lida",
-  "item.delete": "Excluir",
-  "item.unread": "N\xE3o lida",
-  "preferences.title": "Prefer\xEAncias de notifica\xE7\xE3o",
-  "preferences.description": "Escolha por onde voc\xEA quer ser avisado em cada assunto.",
-  "preferences.save": "Salvar prefer\xEAncias",
-  "preferences.saved": "Prefer\xEAncias salvas.",
-  "preferences.error": "N\xE3o foi poss\xEDvel salvar. Tente de novo.",
-  "preferences.empty": "Nenhuma prefer\xEAncia configurada ainda.",
-  "preferences.quietHours": "Sil\xEAncio entre",
-  "preferences.quietHoursTo": "e",
-  "channel.inbox": "No app",
-  "channel.push": "Push",
-  "channel.email": "E-mail",
-  "channel.whatsapp": "WhatsApp",
-  "channel.sms": "SMS"
-};
-
-// src/locales/en.json
-var en_default = {
-  "bell.label": "Notifications",
-  "bell.unreadSuffix": "unread",
-  "list.title": "Notifications",
-  "list.empty": "Nothing here yet.",
-  "list.loading": "Loading\u2026",
-  "list.error": "We couldn't load your notifications.",
-  "list.retry": "Try again",
-  "list.loadMore": "Load more",
-  "list.markAllAsRead": "Mark all as read",
-  "item.markAsRead": "Mark as read",
-  "item.delete": "Delete",
-  "item.unread": "Unread",
-  "preferences.title": "Notification preferences",
-  "preferences.description": "Choose how you want to be notified about each topic.",
-  "preferences.save": "Save preferences",
-  "preferences.saved": "Preferences saved.",
-  "preferences.error": "Couldn't save. Try again.",
-  "preferences.empty": "No preferences configured yet.",
-  "preferences.quietHours": "Quiet between",
-  "preferences.quietHoursTo": "and",
-  "channel.inbox": "In app",
-  "channel.push": "Push",
-  "channel.email": "Email",
-  "channel.whatsapp": "WhatsApp",
-  "channel.sms": "SMS"
-};
-
-// src/locales/index.ts
-var DEFAULT_LOCALE = "pt-BR";
-var MESSAGES_BY_LOCALE = {
-  "pt-BR": pt_BR_default,
-  en: en_default
-};
-function resolveMessages(locale) {
-  return MESSAGES_BY_LOCALE[locale] ?? MESSAGES_BY_LOCALE[DEFAULT_LOCALE];
-}
-__name(resolveMessages, "resolveMessages");
-
-// src/NotificationProvider.tsx
-var NotificationContext = /* @__PURE__ */ createContext(null);
-function NotificationProvider({ client, locale = DEFAULT_LOCALE, messageOverrides, theme = {}, pollIntervalSeconds = 60, children }) {
-  const value = useMemo(() => ({
-    client,
-    messages: {
-      ...resolveMessages(locale),
-      ...messageOverrides
-    },
-    theme,
-    pollIntervalSeconds
-  }), [
-    client,
-    locale,
-    messageOverrides,
-    theme,
-    pollIntervalSeconds
-  ]);
-  return /* @__PURE__ */ React.createElement(NotificationContext.Provider, {
-    value
-  }, children);
-}
-__name(NotificationProvider, "NotificationProvider");
-function useNotificationContext() {
-  const context = useContext(NotificationContext);
-  if (!context) throw new Error("notification-ui: componente usado fora de <NotificationProvider>");
-  return context;
-}
-__name(useNotificationContext, "useNotificationContext");
-
-// src/hooks/useNotifications.ts
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-
-// src/hooks/queryKeys.ts
-var NOTIFICATION_QUERY_KEYS = {
-  all: [
-    "notifications"
-  ],
-  list: /* @__PURE__ */ __name((filters) => [
-    "notifications",
-    "list",
-    filters
-  ], "list"),
-  unreadCount: /* @__PURE__ */ __name(() => [
-    "notifications",
-    "unread-count"
-  ], "unreadCount"),
-  preferences: /* @__PURE__ */ __name(() => [
-    "notifications",
-    "preferences"
-  ], "preferences"),
-  templates: /* @__PURE__ */ __name(() => [
-    "notifications",
-    "templates"
-  ], "templates")
-};
-
-// src/hooks/useNotifications.ts
-function useNotifications(options = {}) {
-  const { client } = useNotificationContext();
-  return useInfiniteQuery({
-    queryKey: NOTIFICATION_QUERY_KEYS.list({
-      category: options.category,
-      read: options.read
-    }),
-    initialPageParam: void 0,
-    queryFn: /* @__PURE__ */ __name(({ pageParam }) => client.listNotifications({
-      category: options.category,
-      read: options.read,
-      cursor: pageParam,
-      perPage: options.perPage
-    }), "queryFn"),
-    getNextPageParam: /* @__PURE__ */ __name((lastPage) => lastPage.nextCursor, "getNextPageParam")
-  });
-}
-__name(useNotifications, "useNotifications");
-function useUnreadCount() {
-  const { client, pollIntervalSeconds } = useNotificationContext();
-  return useQuery({
-    queryKey: NOTIFICATION_QUERY_KEYS.unreadCount(),
-    queryFn: /* @__PURE__ */ __name(() => client.countUnread(), "queryFn"),
-    // Polling é o fallback de quem não ligou o SSE. Com o stream ativo,
-    // `useNotificationStream` invalida esta chave e o refetch acontece na hora.
-    refetchInterval: pollIntervalSeconds > 0 ? pollIntervalSeconds * 1e3 : false
-  });
-}
-__name(useUnreadCount, "useUnreadCount");
-function useMarkAsRead() {
-  const { client } = useNotificationContext();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: /* @__PURE__ */ __name((id) => client.markAsRead(id), "mutationFn"),
-    async onMutate(id) {
-      await queryClient.cancelQueries({
-        queryKey: NOTIFICATION_QUERY_KEYS.all
-      });
-      const previousCount = queryClient.getQueryData(NOTIFICATION_QUERY_KEYS.unreadCount());
-      queryClient.setQueryData(NOTIFICATION_QUERY_KEYS.unreadCount(), (current) => current === void 0 ? current : Math.max(0, current - 1));
-      return {
-        previousCount,
-        id
-      };
-    },
-    onError(_error, _id, context) {
-      if (context?.previousCount !== void 0) {
-        queryClient.setQueryData(NOTIFICATION_QUERY_KEYS.unreadCount(), context.previousCount);
-      }
-    },
-    onSettled() {
-      void queryClient.invalidateQueries({
-        queryKey: NOTIFICATION_QUERY_KEYS.all
-      });
-    }
-  });
-}
-__name(useMarkAsRead, "useMarkAsRead");
-function useMarkAllAsRead() {
-  const { client } = useNotificationContext();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: /* @__PURE__ */ __name(() => client.markAllAsRead(), "mutationFn"),
-    onSettled() {
-      void queryClient.invalidateQueries({
-        queryKey: NOTIFICATION_QUERY_KEYS.all
-      });
-    }
-  });
-}
-__name(useMarkAllAsRead, "useMarkAllAsRead");
-function useDeleteNotification() {
-  const { client } = useNotificationContext();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: /* @__PURE__ */ __name((id) => client.deleteNotification(id), "mutationFn"),
-    onSettled() {
-      void queryClient.invalidateQueries({
-        queryKey: NOTIFICATION_QUERY_KEYS.all
-      });
-    }
-  });
-}
-__name(useDeleteNotification, "useDeleteNotification");
-function flattenNotificationPages(pages) {
-  return pages?.flatMap((page) => page.data) ?? [];
-}
-__name(flattenNotificationPages, "flattenNotificationPages");
-
-// src/hooks/useNotificationStream.ts
-import { useEffect } from "react";
-import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
-import { subscribeToNotificationStream } from "@adatechnology/notification-client";
-function useNotificationStream(options = {}) {
-  const { client } = useNotificationContext();
-  const queryClient = useQueryClient2();
-  const enabled = options.enabled ?? false;
-  const onEvent = options.onEvent;
-  useEffect(() => {
-    if (!enabled) return;
-    let subscription;
-    let cancelled = false;
-    void client.resolveStreamRequest().then(({ url, headers }) => {
-      if (cancelled) return;
-      subscription = subscribeToNotificationStream({
-        url,
-        headers,
-        onEvent: /* @__PURE__ */ __name((event) => {
-          onEvent?.(event);
-          void queryClient.invalidateQueries({
-            queryKey: NOTIFICATION_QUERY_KEYS.all
-          });
-        }, "onEvent")
-      });
-    });
-    return () => {
-      cancelled = true;
-      subscription?.close();
-    };
-  }, [
-    client,
-    queryClient,
-    enabled,
-    onEvent
-  ]);
-}
-__name(useNotificationStream, "useNotificationStream");
-
-// src/hooks/usePreferences.ts
-import { useMutation as useMutation2, useQuery as useQuery2, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
-function usePreferences() {
-  const { client } = useNotificationContext();
-  return useQuery2({
-    queryKey: NOTIFICATION_QUERY_KEYS.preferences(),
-    queryFn: /* @__PURE__ */ __name(() => client.getPreferences(), "queryFn")
-  });
-}
-__name(usePreferences, "usePreferences");
-function useUpdatePreferences() {
-  const { client } = useNotificationContext();
-  const queryClient = useQueryClient3();
-  return useMutation2({
-    mutationFn: /* @__PURE__ */ __name((preferences) => client.updatePreferences(preferences), "mutationFn"),
-    onSuccess(saved) {
-      queryClient.setQueryData(NOTIFICATION_QUERY_KEYS.preferences(), saved);
-    }
-  });
-}
-__name(useUpdatePreferences, "useUpdatePreferences");
-function useTemplates() {
-  const { client } = useNotificationContext();
-  return useQuery2({
-    queryKey: NOTIFICATION_QUERY_KEYS.templates(),
-    queryFn: /* @__PURE__ */ __name(() => client.listTemplates(), "queryFn")
-  });
-}
-__name(useTemplates, "useTemplates");
+import {
+  DEFAULT_LOCALE,
+  NOTIFICATION_QUERY_KEYS,
+  NotificationProvider,
+  flattenNotificationPages,
+  formatNotificationTime,
+  formatNotificationTimestamp,
+  resolveMessages,
+  useDeleteNotification,
+  useMarkAllAsRead,
+  useMarkAsRead,
+  useNotificationContext,
+  useNotificationStream,
+  useNotifications,
+  usePreferences,
+  useTemplateEditor,
+  useTemplates,
+  useUnreadCount,
+  useUpdatePreferences,
+  useUpsertTemplate
+} from "./chunk-I6WQKOCP.js";
 
 // src/components/NotificationBell.tsx
 import { Bell } from "lucide-react";
 import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_MAX_BADGE_COUNT = 99;
-function NotificationBell({ onClick, className, maxBadgeCount = DEFAULT_MAX_BADGE_COUNT }) {
+function NotificationBell({
+  onClick,
+  className,
+  maxBadgeCount = DEFAULT_MAX_BADGE_COUNT
+}) {
   const { messages, theme } = useNotificationContext();
   const { data: unreadCount = 0 } = useUnreadCount();
   const hasUnread = unreadCount > 0;
   const badgeLabel = unreadCount > maxBadgeCount ? `${maxBadgeCount}+` : String(unreadCount);
   const accessibleLabel = hasUnread ? `${messages["bell.label"]}: ${unreadCount} ${messages["bell.unreadSuffix"]}` : messages["bell.label"];
-  return /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    onClick,
-    className: clsx("adn-bell", theme.rootClassName, className),
-    // Botão só-ícone exige rótulo acessível (regra de ícones, `web.md` §9).
-    "aria-label": accessibleLabel
-  }, /* @__PURE__ */ React.createElement(Bell, {
-    className: "adn-bell__icon",
-    "aria-hidden": "true"
-  }), hasUnread ? (
-    // `aria-live` para leitor de tela anunciar a mudança do contador sem o usuário reabrir
-    // o menu; `polite` porque notificação nova não deve interromper o que ele está lendo.
-    /* @__PURE__ */ React.createElement("span", {
-      className: "adn-bell__badge",
-      "aria-live": "polite"
-    }, badgeLabel)
-  ) : null);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: clsx("adn-bell", theme.rootClassName, className),
+      "aria-label": accessibleLabel,
+      children: [
+        /* @__PURE__ */ jsx(Bell, { className: "adn-bell__icon", "aria-hidden": "true" }),
+        hasUnread ? (
+          // `aria-live` para leitor de tela anunciar a mudança do contador sem o usuário reabrir
+          // o menu; `polite` porque notificação nova não deve interromper o que ele está lendo.
+          /* @__PURE__ */ jsx("span", { className: "adn-bell__badge", "aria-live": "polite", children: badgeLabel })
+        ) : null
+      ]
+    }
+  );
 }
-__name(NotificationBell, "NotificationBell");
 
 // src/components/NotificationList.tsx
 import { CheckCheck, Inbox, RotateCw } from "lucide-react";
@@ -326,8 +61,9 @@ import clsx3 from "clsx";
 // src/components/NotificationItem.tsx
 import { Check, Trash2 } from "lucide-react";
 import clsx2 from "clsx";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function NotificationItem({ notification, onSelect, className }) {
-  const { messages } = useNotificationContext();
+  const { locale, messages } = useNotificationContext();
   const markAsRead = useMarkAsRead();
   const deleteNotification = useDeleteNotification();
   const isUnread = notification.readAt === void 0;
@@ -335,110 +71,117 @@ function NotificationItem({ notification, onSelect, className }) {
     if (isUnread) markAsRead.mutate(notification.id);
     onSelect?.(notification);
   }
-  __name(handleSelect, "handleSelect");
-  return /* @__PURE__ */ React.createElement("li", {
-    className: clsx2("adn-item", isUnread && "adn-item--unread", className)
-  }, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-item__main",
-    onClick: handleSelect
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "adn-item__title"
-  }, notification.title), /* @__PURE__ */ React.createElement("span", {
-    className: "adn-item__body"
-  }, notification.body), isUnread ? /* @__PURE__ */ React.createElement("span", {
-    className: "adn-item__unread-dot",
-    "aria-label": messages["item.unread"]
-  }) : null), /* @__PURE__ */ React.createElement("div", {
-    className: "adn-item__actions"
-  }, isUnread ? /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-item__action",
-    onClick: /* @__PURE__ */ __name(() => markAsRead.mutate(notification.id), "onClick"),
-    disabled: markAsRead.isPending,
-    "aria-label": messages["item.markAsRead"],
-    title: messages["item.markAsRead"]
-  }, /* @__PURE__ */ React.createElement(Check, {
-    className: "adn-item__action-icon",
-    "aria-hidden": "true"
-  })) : null, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-item__action adn-item__action--danger",
-    onClick: /* @__PURE__ */ __name(() => deleteNotification.mutate(notification.id), "onClick"),
-    disabled: deleteNotification.isPending,
-    "aria-label": messages["item.delete"],
-    title: messages["item.delete"]
-  }, /* @__PURE__ */ React.createElement(Trash2, {
-    className: "adn-item__action-icon",
-    "aria-hidden": "true"
-  }))));
+  return /* @__PURE__ */ jsxs2("li", { className: clsx2("adn-item", isUnread && "adn-item--unread", className), children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "adn-item__main", onClick: handleSelect, children: [
+      /* @__PURE__ */ jsxs2("span", { className: "adn-item__heading", children: [
+        isUnread ? /* @__PURE__ */ jsx2("span", { className: "adn-item__unread-dot", "aria-label": messages["item.unread"] }) : null,
+        /* @__PURE__ */ jsx2("span", { className: "adn-item__title", children: notification.title }),
+        /* @__PURE__ */ jsx2(
+          "time",
+          {
+            className: "adn-item__time",
+            dateTime: notification.createdAt,
+            title: formatNotificationTimestamp(notification.createdAt, locale),
+            children: formatNotificationTime(notification.createdAt, locale, /* @__PURE__ */ new Date())
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "adn-item__body", children: notification.body })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "adn-item__actions", children: [
+      isUnread ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "adn-item__action",
+          onClick: () => markAsRead.mutate(notification.id),
+          disabled: markAsRead.isPending,
+          "aria-label": messages["item.markAsRead"],
+          title: messages["item.markAsRead"],
+          children: /* @__PURE__ */ jsx2(Check, { className: "adn-item__action-icon", "aria-hidden": "true" })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "adn-item__action adn-item__action--danger",
+          onClick: () => deleteNotification.mutate(notification.id),
+          disabled: deleteNotification.isPending,
+          "aria-label": messages["item.delete"],
+          title: messages["item.delete"],
+          children: /* @__PURE__ */ jsx2(Trash2, { className: "adn-item__action-icon", "aria-hidden": "true" })
+        }
+      )
+    ] })
+  ] });
 }
-__name(NotificationItem, "NotificationItem");
 
 // src/components/NotificationList.tsx
-function NotificationList({ category, onSelect, className, components }) {
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SKELETON_ROWS = [0, 1, 2];
+function NotificationList({ category, onSelect, className, renderEmpty, components }) {
   const { messages, theme } = useNotificationContext();
-  const query = useNotifications({
-    category
-  });
+  const query = useNotifications({ category });
   const { data: unreadCount = 0 } = useUnreadCount();
   const markAllAsRead = useMarkAllAsRead();
   const Item = components?.Item ?? NotificationItem;
   const notifications = flattenNotificationPages(query.data?.pages);
-  return /* @__PURE__ */ React.createElement("section", {
-    className: clsx3("adn-list", theme.rootClassName, className),
-    "aria-label": messages["list.title"]
-  }, /* @__PURE__ */ React.createElement("header", {
-    className: "adn-list__header"
-  }, /* @__PURE__ */ React.createElement("h2", {
-    className: "adn-list__title"
-  }, messages["list.title"]), unreadCount > 0 ? /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-list__bulk-action",
-    onClick: /* @__PURE__ */ __name(() => markAllAsRead.mutate(), "onClick"),
-    disabled: markAllAsRead.isPending
-  }, /* @__PURE__ */ React.createElement(CheckCheck, {
-    className: "adn-list__bulk-icon",
-    "aria-hidden": "true"
-  }), messages["list.markAllAsRead"]) : null), query.isPending ? /* @__PURE__ */ React.createElement("p", {
-    className: "adn-list__state"
-  }, messages["list.loading"]) : null, query.isError ? /* @__PURE__ */ React.createElement("div", {
-    className: "adn-list__state adn-list__state--error"
-  }, /* @__PURE__ */ React.createElement("p", null, messages["list.error"]), /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-list__retry",
-    onClick: /* @__PURE__ */ __name(() => void query.refetch(), "onClick")
-  }, /* @__PURE__ */ React.createElement(RotateCw, {
-    className: "adn-list__retry-icon",
-    "aria-hidden": "true"
-  }), messages["list.retry"])) : null, !query.isPending && !query.isError && notifications.length === 0 ? /* @__PURE__ */ React.createElement("div", {
-    className: "adn-list__state adn-list__state--empty"
-  }, /* @__PURE__ */ React.createElement(Inbox, {
-    className: "adn-list__empty-icon",
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ React.createElement("p", null, messages["list.empty"])) : null, notifications.length > 0 ? /* @__PURE__ */ React.createElement("ul", {
-    className: "adn-list__items"
-  }, notifications.map((notification) => /* @__PURE__ */ React.createElement(Item, {
-    key: notification.id,
-    notification,
-    onSelect
-  }))) : null, query.hasNextPage ? /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-list__load-more",
-    onClick: /* @__PURE__ */ __name(() => void query.fetchNextPage(), "onClick"),
-    disabled: query.isFetchingNextPage
-  }, messages["list.loadMore"]) : null);
+  const isEmpty = !query.isPending && !query.isError && notifications.length === 0;
+  return /* @__PURE__ */ jsxs3("section", { className: clsx3("adn-list", theme.rootClassName, className), "aria-label": messages["list.title"], children: [
+    /* @__PURE__ */ jsxs3("header", { className: "adn-list__header", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "adn-list__heading", children: [
+        /* @__PURE__ */ jsx3("h2", { className: "adn-list__title", children: messages["list.title"] }),
+        unreadCount > 0 ? /* @__PURE__ */ jsx3("span", { className: "adn-list__count", role: "status", "aria-label": `${unreadCount} ${messages["list.unread"]}`, children: unreadCount }) : null
+      ] }),
+      unreadCount > 0 ? /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          className: "adn-list__bulk-action",
+          onClick: () => markAllAsRead.mutate(),
+          disabled: markAllAsRead.isPending,
+          children: [
+            /* @__PURE__ */ jsx3(CheckCheck, { className: "adn-list__bulk-icon", "aria-hidden": "true" }),
+            messages["list.markAllAsRead"]
+          ]
+        }
+      ) : null
+    ] }),
+    query.isPending ? /* @__PURE__ */ jsx3("div", { className: "adn-list__skeleton", role: "status", "aria-label": messages["list.loading"], children: SKELETON_ROWS.map((row) => /* @__PURE__ */ jsx3("span", { className: "adn-list__skeleton-row" }, row)) }) : null,
+    query.isError ? /* @__PURE__ */ jsxs3("div", { className: "adn-list__state adn-list__state--error", role: "alert", children: [
+      /* @__PURE__ */ jsx3("p", { children: messages["list.error"] }),
+      /* @__PURE__ */ jsxs3("button", { type: "button", className: "adn-list__retry", onClick: () => void query.refetch(), children: [
+        /* @__PURE__ */ jsx3(RotateCw, { className: "adn-list__retry-icon", "aria-hidden": "true" }),
+        messages["list.retry"]
+      ] })
+    ] }) : null,
+    isEmpty ? renderEmpty?.() ?? /* @__PURE__ */ jsxs3("div", { className: "adn-list__state adn-list__state--empty", children: [
+      /* @__PURE__ */ jsx3(Inbox, { className: "adn-list__empty-icon", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx3("p", { children: messages["list.empty"] })
+    ] }) : null,
+    notifications.length > 0 ? /* @__PURE__ */ jsx3("ul", { className: "adn-list__items", children: notifications.map((notification) => /* @__PURE__ */ jsx3(Item, { notification, onSelect }, notification.id)) }) : null,
+    query.hasNextPage ? /* @__PURE__ */ jsx3("div", { className: "adn-list__footer", children: /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "adn-list__load-more",
+        onClick: () => void query.fetchNextPage(),
+        disabled: query.isFetchingNextPage,
+        children: messages["list.loadMore"]
+      }
+    ) }) : null
+  ] });
 }
-__name(NotificationList, "NotificationList");
 
 // src/components/PreferencesPanel.tsx
 import { useState } from "react";
 import { Save } from "lucide-react";
 import clsx4 from "clsx";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function channelLabelKey(channel) {
   return `channel.${channel}`;
 }
-__name(channelLabelKey, "channelLabelKey");
 function PreferencesPanel({ className }) {
   const { messages, theme } = useNotificationContext();
   const { data: saved = [], isPending } = usePreferences();
@@ -446,73 +189,263 @@ function PreferencesPanel({ className }) {
   const [draft, setDraft] = useState(void 0);
   const preferences = draft ?? saved;
   function toggleChannel(target) {
-    setDraft(preferences.map((preference) => preference.category === target.category && preference.channel === target.channel ? {
-      ...preference,
-      enabled: !preference.enabled
-    } : preference));
+    setDraft(
+      preferences.map(
+        (preference) => preference.category === target.category && preference.channel === target.channel ? { ...preference, enabled: !preference.enabled } : preference
+      )
+    );
   }
-  __name(toggleChannel, "toggleChannel");
   function handleSave() {
-    updatePreferences.mutate(preferences, {
-      onSuccess: /* @__PURE__ */ __name(() => setDraft(void 0), "onSuccess")
-    });
+    updatePreferences.mutate(preferences, { onSuccess: () => setDraft(void 0) });
+  }
+  if (isPending) return /* @__PURE__ */ jsx4("p", { className: "adn-preferences__state", children: messages["list.loading"] });
+  return /* @__PURE__ */ jsxs4("section", { className: clsx4("adn-preferences", theme.rootClassName, className), children: [
+    /* @__PURE__ */ jsxs4("header", { className: "adn-preferences__header", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "adn-preferences__title", children: messages["preferences.title"] }),
+      /* @__PURE__ */ jsx4("p", { className: "adn-preferences__description", children: messages["preferences.description"] })
+    ] }),
+    preferences.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "adn-preferences__state", children: messages["preferences.empty"] }) : /* @__PURE__ */ jsx4("ul", { className: "adn-preferences__items", children: preferences.map((preference) => {
+      const inputId = `adn-pref-${preference.category}-${preference.channel}`;
+      return /* @__PURE__ */ jsxs4("li", { className: "adn-preferences__item", children: [
+        /* @__PURE__ */ jsxs4("label", { className: "adn-preferences__label", htmlFor: inputId, children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              id: inputId,
+              type: "checkbox",
+              className: "adn-preferences__checkbox",
+              checked: preference.enabled,
+              onChange: () => toggleChannel(preference)
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "adn-preferences__category", children: preference.category }),
+          /* @__PURE__ */ jsx4("span", { className: "adn-preferences__channel", children: messages[channelLabelKey(preference.channel)] ?? preference.channel })
+        ] }),
+        preference.quietHoursStart && preference.quietHoursEnd ? /* @__PURE__ */ jsxs4("span", { className: "adn-preferences__quiet-hours", children: [
+          messages["preferences.quietHours"],
+          " ",
+          preference.quietHoursStart,
+          " ",
+          messages["preferences.quietHoursTo"],
+          " ",
+          preference.quietHoursEnd
+        ] }) : null
+      ] }, inputId);
+    }) }),
+    /* @__PURE__ */ jsxs4("footer", { className: "adn-preferences__footer", children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          className: "adn-preferences__save",
+          onClick: handleSave,
+          disabled: updatePreferences.isPending || draft === void 0,
+          children: [
+            /* @__PURE__ */ jsx4(Save, { className: "adn-preferences__save-icon", "aria-hidden": "true" }),
+            messages["preferences.save"]
+          ]
+        }
+      ),
+      updatePreferences.isSuccess && draft === void 0 ? /* @__PURE__ */ jsx4("span", { className: "adn-preferences__feedback", role: "status", children: messages["preferences.saved"] }) : null,
+      updatePreferences.isError ? /* @__PURE__ */ jsx4("span", { className: "adn-preferences__feedback adn-preferences__feedback--error", role: "alert", children: messages["preferences.error"] }) : null
+    ] })
+  ] });
+}
+
+// src/components/NotificationsWorkspace.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function NotificationsWorkspace({
+  labels: labelsOverride,
+  category,
+  showPreferences = true,
+  settingsHref,
+  onSelectNotification,
+  renderHeader,
+  renderHeaderActions,
+  renderAboveList,
+  renderEmpty,
+  className
+}) {
+  const { messages } = useNotificationContext();
+  const label = (key) => labelsOverride?.[key] ?? messages[key] ?? key;
+  return /* @__PURE__ */ jsxs5("div", { className: `adn-workspace ${className ?? ""}`, children: [
+    renderHeader ? renderHeader() : /* @__PURE__ */ jsxs5("header", { className: "adn-workspace__header", children: [
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx5("h1", { className: "adn-workspace__title", children: label("workspace.title") }),
+        /* @__PURE__ */ jsx5("p", { className: "adn-workspace__description", children: label("workspace.description") })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "adn-workspace__actions", children: [
+        renderHeaderActions?.(),
+        settingsHref && /* @__PURE__ */ jsx5("a", { href: settingsHref, className: "adn-button adn-button--outline", children: label("workspace.settingsLink") })
+      ] })
+    ] }),
+    renderAboveList?.(),
+    /* @__PURE__ */ jsxs5("div", { className: showPreferences ? "adn-workspace__grid" : "adn-workspace__grid--single", children: [
+      /* @__PURE__ */ jsx5("section", { className: "adn-workspace__inbox", children: /* @__PURE__ */ jsx5(
+        NotificationList,
+        {
+          ...category ? { category } : {},
+          ...onSelectNotification ? { onSelect: onSelectNotification } : {},
+          ...renderEmpty ? { renderEmpty } : {}
+        }
+      ) }),
+      showPreferences && /* @__PURE__ */ jsx5("aside", { className: "adn-workspace__aside", children: /* @__PURE__ */ jsx5(PreferencesPanel, {}) })
+    ] })
+  ] });
+}
+
+// src/components/NotificationSettingsWorkspace.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function NotificationSettingsWorkspace({
+  labels: labelsOverride,
+  channels,
+  categories,
+  previewPayload,
+  templateLabelOf,
+  renderChannelFields,
+  renderHeader,
+  renderHeaderActions,
+  className
+}) {
+  const { messages } = useNotificationContext();
+  const label = (key) => labelsOverride?.[key] ?? messages[key] ?? key;
+  const preferencesQuery = usePreferences();
+  const updatePreferences = useUpdatePreferences();
+  const editor = useTemplateEditor(previewPayload ? { previewPayload } : {});
+  function isEnabled(category, channel) {
+    const row = (preferencesQuery.data ?? []).find(
+      (preference) => preference.category === category && preference.channel === channel
+    );
+    return row?.enabled ?? true;
+  }
+  function toggle(category, channel) {
+    const next = categories.flatMap(
+      (eachCategory) => channels.map((eachChannel) => ({
+        category: eachCategory.id,
+        channel: eachChannel.id,
+        enabled: eachCategory.id === category && eachChannel.id === channel ? !isEnabled(category, channel) : isEnabled(eachCategory.id, eachChannel.id)
+      }))
+    );
+    updatePreferences.mutate(next);
   }
-  __name(handleSave, "handleSave");
-  if (isPending) return /* @__PURE__ */ React.createElement("p", {
-    className: "adn-preferences__state"
-  }, messages["list.loading"]);
-  return /* @__PURE__ */ React.createElement("section", {
-    className: clsx4("adn-preferences", theme.rootClassName, className)
-  }, /* @__PURE__ */ React.createElement("header", {
-    className: "adn-preferences__header"
-  }, /* @__PURE__ */ React.createElement("h2", {
-    className: "adn-preferences__title"
-  }, messages["preferences.title"]), /* @__PURE__ */ React.createElement("p", {
-    className: "adn-preferences__description"
-  }, messages["preferences.description"])), preferences.length === 0 ? /* @__PURE__ */ React.createElement("p", {
-    className: "adn-preferences__state"
-  }, messages["preferences.empty"]) : /* @__PURE__ */ React.createElement("ul", {
-    className: "adn-preferences__items"
-  }, preferences.map((preference) => {
-    const inputId = `adn-pref-${preference.category}-${preference.channel}`;
-    return /* @__PURE__ */ React.createElement("li", {
-      key: inputId,
-      className: "adn-preferences__item"
-    }, /* @__PURE__ */ React.createElement("label", {
-      className: "adn-preferences__label",
-      htmlFor: inputId
-    }, /* @__PURE__ */ React.createElement("input", {
-      id: inputId,
-      type: "checkbox",
-      className: "adn-preferences__checkbox",
-      checked: preference.enabled,
-      onChange: /* @__PURE__ */ __name(() => toggleChannel(preference), "onChange")
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "adn-preferences__category"
-    }, preference.category), /* @__PURE__ */ React.createElement("span", {
-      className: "adn-preferences__channel"
-    }, messages[channelLabelKey(preference.channel)] ?? preference.channel)), preference.quietHoursStart && preference.quietHoursEnd ? /* @__PURE__ */ React.createElement("span", {
-      className: "adn-preferences__quiet-hours"
-    }, messages["preferences.quietHours"], " ", preference.quietHoursStart, " ", messages["preferences.quietHoursTo"], " ", preference.quietHoursEnd) : null);
-  })), /* @__PURE__ */ React.createElement("footer", {
-    className: "adn-preferences__footer"
-  }, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "adn-preferences__save",
-    onClick: handleSave,
-    disabled: updatePreferences.isPending || draft === void 0
-  }, /* @__PURE__ */ React.createElement(Save, {
-    className: "adn-preferences__save-icon",
-    "aria-hidden": "true"
-  }), messages["preferences.save"]), updatePreferences.isSuccess && draft === void 0 ? /* @__PURE__ */ React.createElement("span", {
-    className: "adn-preferences__feedback",
-    role: "status"
-  }, messages["preferences.saved"]) : null, updatePreferences.isError ? /* @__PURE__ */ React.createElement("span", {
-    className: "adn-preferences__feedback adn-preferences__feedback--error",
-    role: "alert"
-  }, messages["preferences.error"]) : null));
+  return /* @__PURE__ */ jsxs6("div", { className: `adn-settings ${className ?? ""}`, children: [
+    renderHeader ? renderHeader() : /* @__PURE__ */ jsxs6("header", { className: "adn-settings__header", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("h1", { className: "adn-settings__title", children: label("settings.title") }),
+        /* @__PURE__ */ jsx6("p", { className: "adn-settings__description", children: label("settings.description") })
+      ] }),
+      renderHeaderActions?.()
+    ] }),
+    /* @__PURE__ */ jsxs6("section", { className: "adn-settings__channels", children: [
+      /* @__PURE__ */ jsx6("h2", { className: "adn-settings__section-title", children: label("settings.channelsTitle") }),
+      /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.channelsHint") }),
+      categories.map((category) => /* @__PURE__ */ jsxs6("div", { className: "adn-settings__category", children: [
+        /* @__PURE__ */ jsx6("p", { className: "adn-settings__category-label", children: category.label }),
+        category.hint && /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: category.hint }),
+        /* @__PURE__ */ jsx6("div", { className: "adn-settings__channel-grid", children: channels.map((channel) => /* @__PURE__ */ jsxs6("label", { className: "adn-settings__channel", children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "checkbox",
+              checked: isEnabled(category.id, channel.id),
+              disabled: updatePreferences.isPending,
+              onChange: () => toggle(category.id, channel.id)
+            }
+          ),
+          /* @__PURE__ */ jsxs6("span", { children: [
+            /* @__PURE__ */ jsx6("span", { className: "adn-settings__channel-label", children: channel.label }),
+            channel.hint && /* @__PURE__ */ jsx6("span", { className: "adn-settings__hint", children: channel.hint })
+          ] })
+        ] }, channel.id)) })
+      ] }, category.id))
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "adn-settings__templates", children: [
+      /* @__PURE__ */ jsxs6("section", { className: "adn-settings__template-list", children: [
+        /* @__PURE__ */ jsxs6("header", { children: [
+          /* @__PURE__ */ jsx6("h2", { className: "adn-settings__section-title", children: label("settings.templatesTitle") }),
+          /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.templatesHint") })
+        ] }),
+        editor.isLoading && /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("list.loading") }),
+        !editor.isLoading && editor.templates.length === 0 && /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.templatesEmpty") }),
+        /* @__PURE__ */ jsx6("ul", { children: editor.templates.map((template) => /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            onClick: () => editor.select(template),
+            className: editor.selected?.id === template.id ? "adn-settings__row--active" : void 0,
+            children: [
+              /* @__PURE__ */ jsxs6("span", { className: "adn-settings__row-main", children: [
+                /* @__PURE__ */ jsx6("span", { className: "adn-settings__row-title", children: templateLabelOf?.(template) ?? template.key }),
+                /* @__PURE__ */ jsx6("span", { className: "adn-settings__row-body", children: template.body })
+              ] }),
+              /* @__PURE__ */ jsx6("span", { className: `adn-settings__badge adn-settings__badge--${template.channel}`, children: label(`channel.${template.channel}`) }),
+              /* @__PURE__ */ jsxs6("span", { className: "adn-settings__version", children: [
+                label("settings.version"),
+                template.version
+              ] })
+            ]
+          }
+        ) }, template.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs6("section", { className: "adn-settings__editor", children: [
+        !editor.draft && /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.pickTemplate") }),
+        editor.draft && /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsxs6("header", { className: "adn-settings__editor-header", children: [
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsx6("h2", { className: "adn-settings__section-title", children: editor.selected ? templateLabelOf?.(editor.selected) ?? editor.selected.key : "" }),
+              /* @__PURE__ */ jsxs6("p", { className: "adn-settings__hint", children: [
+                editor.draft.channel,
+                " \xB7 ",
+                editor.draft.locale,
+                " \xB7 ",
+                label("settings.version"),
+                editor.selected?.version
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx6("button", { type: "button", onClick: editor.clear, children: label("settings.close") })
+          ] }),
+          /* @__PURE__ */ jsxs6("label", { className: "adn-settings__field", children: [
+            /* @__PURE__ */ jsx6("span", { className: "adn-settings__field-label", children: label("settings.subject") }),
+            /* @__PURE__ */ jsx6("span", { className: "adn-settings__hint", children: label("settings.subjectHint") }),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                value: editor.draft.subject,
+                onChange: (event) => editor.update({ subject: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs6("label", { className: "adn-settings__field", children: [
+            /* @__PURE__ */ jsx6("span", { className: "adn-settings__field-label", children: label("settings.body") }),
+            /* @__PURE__ */ jsx6(
+              "textarea",
+              {
+                rows: 4,
+                value: editor.draft.body,
+                onChange: (event) => editor.update({ body: event.target.value })
+              }
+            )
+          ] }),
+          renderChannelFields?.({
+            channel: editor.draft.channel,
+            value: editor.draft.whatsappTemplateName,
+            onChange: (value) => editor.update({ whatsappTemplateName: value })
+          }),
+          editor.preview && /* @__PURE__ */ jsxs6("div", { className: "adn-settings__preview", children: [
+            /* @__PURE__ */ jsx6("p", { className: "adn-settings__preview-title", children: label("settings.previewTitle") }),
+            /* @__PURE__ */ jsx6("p", { className: "adn-settings__preview-subject", children: editor.preview.title }),
+            /* @__PURE__ */ jsx6("p", { className: "adn-settings__preview-body", children: editor.preview.body })
+          ] }),
+          editor.error && /* @__PURE__ */ jsx6("p", { className: "adn-settings__error", children: editor.error }),
+          /* @__PURE__ */ jsxs6("div", { className: "adn-settings__actions", children: [
+            /* @__PURE__ */ jsx6("button", { type: "button", onClick: editor.save, disabled: !editor.isDirty || editor.isSaving, children: editor.isSaving ? label("settings.saving") : label("settings.save") }),
+            !editor.isDirty && /* @__PURE__ */ jsx6("span", { className: "adn-settings__hint", children: label("settings.unchanged") })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
 }
-__name(PreferencesPanel, "PreferencesPanel");
 export {
   DEFAULT_LOCALE,
   NOTIFICATION_QUERY_KEYS,
@@ -520,8 +453,12 @@ export {
   NotificationItem,
   NotificationList,
   NotificationProvider,
+  NotificationSettingsWorkspace,
+  NotificationsWorkspace,
   PreferencesPanel,
   flattenNotificationPages,
+  formatNotificationTime,
+  formatNotificationTimestamp,
   resolveMessages,
   useDeleteNotification,
   useMarkAllAsRead,
@@ -530,8 +467,10 @@ export {
   useNotificationStream,
   useNotifications,
   usePreferences,
+  useTemplateEditor,
   useTemplates,
   useUnreadCount,
-  useUpdatePreferences
+  useUpdatePreferences,
+  useUpsertTemplate
 };
 //# sourceMappingURL=index.js.map