@adatechnology/notification-ui 0.1.0-rc.2 → 0.1.0-rc.4

package/dist/index.js

@@ -3,7 +3,11 @@ import {
   NOTIFICATION_QUERY_KEYS,
   NotificationProvider,
   flattenNotificationPages,
+  formatNotificationTime,
+  formatNotificationTimestamp,
   resolveMessages,
+  useCategoryPolicies,
+  useDeactivateTemplate,
   useDeleteNotification,
   useMarkAllAsRead,
   useMarkAsRead,
@@ -12,18 +16,23 @@ import {
   useNotifications,
   usePreferences,
   useTemplateEditor,
+  useTemplateVariables,
   useTemplates,
   useUnreadCount,
   useUpdatePreferences,
   useUpsertTemplate
-} from "./chunk-FNUYTJ36.js";
+} from "./chunk-QBQ62VZ3.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;
@@ -57,7 +66,7 @@ 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;
@@ -67,9 +76,20 @@ function NotificationItem({ notification, onSelect, className }) {
   }
   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__ */ jsx2("span", { className: "adn-item__title", children: notification.title }),
-      /* @__PURE__ */ jsx2("span", { className: "adn-item__body", children: notification.body }),
-      isUnread ? /* @__PURE__ */ jsx2("span", { className: "adn-item__unread-dot", "aria-label": messages["item.unread"] }) : null
+      /* @__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(
@@ -102,16 +122,21 @@ function NotificationItem({ notification, onSelect, className }) {
 
 // src/components/NotificationList.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function NotificationList({ category, onSelect, className, components }) {
+var SKELETON_ROWS = [0, 1, 2];
+function NotificationList({ category, onSelect, className, renderEmpty, components }) {
   const { messages, theme } = useNotificationContext();
   const query = useNotifications({ category });
   const { data: unreadCount = 0 } = useUnreadCount();
   const markAllAsRead = useMarkAllAsRead();
   const Item = components?.Item ?? NotificationItem;
   const notifications = flattenNotificationPages(query.data?.pages);
+  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__ */ jsx3("h2", { className: "adn-list__title", children: messages["list.title"] }),
+      /* @__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",
         {
@@ -126,20 +151,20 @@ function NotificationList({ category, onSelect, className, components }) {
         }
       ) : null
     ] }),
-    query.isPending ? /* @__PURE__ */ jsx3("p", { className: "adn-list__state", children: messages["list.loading"] }) : null,
-    query.isError ? /* @__PURE__ */ jsxs3("div", { className: "adn-list__state adn-list__state--error", children: [
+    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,
-    !query.isPending && !query.isError && notifications.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "adn-list__state adn-list__state--empty", children: [
+    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(
+    query.hasNextPage ? /* @__PURE__ */ jsx3("div", { className: "adn-list__footer", children: /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -148,7 +173,7 @@ function NotificationList({ category, onSelect, className, components }) {
         disabled: query.isFetchingNextPage,
         children: messages["list.loadMore"]
       }
-    ) : null
+    ) }) : null
   ] });
 }
 
@@ -238,6 +263,7 @@ function NotificationsWorkspace({
   showPreferences = true,
   settingsHref,
   onSelectNotification,
+  renderHeader,
   renderHeaderActions,
   renderAboveList,
   renderEmpty,
@@ -246,7 +272,7 @@ function NotificationsWorkspace({
   const { messages } = useNotificationContext();
   const label = (key) => labelsOverride?.[key] ?? messages[key] ?? key;
   return /* @__PURE__ */ jsxs5("div", { className: `adn-workspace ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxs5("header", { className: "adn-workspace__header", 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") })
@@ -258,22 +284,21 @@ function NotificationsWorkspace({
     ] }),
     renderAboveList?.(),
     /* @__PURE__ */ jsxs5("div", { className: showPreferences ? "adn-workspace__grid" : "adn-workspace__grid--single", children: [
-      /* @__PURE__ */ jsxs5("section", { className: "adn-workspace__inbox", children: [
-        /* @__PURE__ */ jsx5(
-          NotificationList,
-          {
-            ...category ? { category } : {},
-            ...onSelectNotification ? { onSelect: onSelectNotification } : {}
-          }
-        ),
-        renderEmpty?.()
-      ] }),
+      /* @__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 { useState as useState2 } from "react";
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function NotificationSettingsWorkspace({
   labels: labelsOverride,
@@ -282,6 +307,7 @@ function NotificationSettingsWorkspace({
   previewPayload,
   templateLabelOf,
   renderChannelFields,
+  renderHeader,
   renderHeaderActions,
   className
 }) {
@@ -289,7 +315,19 @@ function NotificationSettingsWorkspace({
   const label = (key) => labelsOverride?.[key] ?? messages[key] ?? key;
   const preferencesQuery = usePreferences();
   const updatePreferences = useUpdatePreferences();
-  const editor = useTemplateEditor(previewPayload ? { previewPayload } : {});
+  const editor = useTemplateEditor({
+    ...previewPayload ? { previewPayload } : {},
+    ...channels[0] ? { defaultChannel: channels[0].id } : {}
+  });
+  const [cursor, setCursor] = useState2({
+    field: "body",
+    cursorIndex: 0
+  });
+  function rememberCursor(field, cursorIndex) {
+    setCursor({ field, cursorIndex: cursorIndex ?? 0 });
+  }
+  const policies = useCategoryPolicies();
+  const [tab, setTab] = useState2("messages");
   function isEnabled(category, channel) {
     const row = (preferencesQuery.data ?? []).find(
       (preference) => preference.category === category && preference.channel === channel
@@ -307,14 +345,49 @@ function NotificationSettingsWorkspace({
     updatePreferences.mutate(next);
   }
   return /* @__PURE__ */ jsxs6("div", { className: `adn-settings ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxs6("header", { className: "adn-settings__header", 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("div", { className: "adn-settings__tabs", role: "tablist", children: ["messages", "routing"].map((id) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": tab === id,
+        className: tab === id ? "adn-settings__tab adn-settings__tab--active" : "adn-settings__tab",
+        onClick: () => setTab(id),
+        children: label(`settings.tab.${id}`)
+      },
+      id
+    )) }),
+    tab === "routing" && /* @__PURE__ */ jsxs6("section", { className: "adn-settings__policies", children: [
+      /* @__PURE__ */ jsx6("h2", { className: "adn-settings__section-title", children: label("settings.policiesTitle") }),
+      /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.policiesHint") }),
+      categories.map((category) => /* @__PURE__ */ jsxs6("div", { className: "adn-settings__category", children: [
+        /* @__PURE__ */ jsx6("p", { className: "adn-settings__category-title", children: category.label }),
+        /* @__PURE__ */ jsx6("div", { className: "adn-settings__category-channels", children: channels.map((channel) => /* @__PURE__ */ jsxs6("label", { className: "adn-settings__toggle", children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "checkbox",
+              checked: policies.isAllowed({ category: category.id, channel: channel.id }),
+              onChange: () => policies.toggle({ category: category.id, channel: channel.id })
+            }
+          ),
+          /* @__PURE__ */ jsx6("span", { className: "adn-settings__channel-label", children: channel.label })
+        ] }, channel.id)) })
+      ] }, category.id)),
+      policies.error && /* @__PURE__ */ jsx6("p", { className: "adn-settings__error", children: policies.error }),
+      /* @__PURE__ */ jsxs6("div", { className: "adn-settings__actions", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", onClick: policies.save, disabled: !policies.isDirty || policies.isSaving, children: policies.isSaving ? label("settings.saving") : label("settings.savePolicies") }),
+        policies.isDirty && /* @__PURE__ */ jsx6("button", { type: "button", onClick: policies.reset, children: label("settings.discard") })
+      ] })
+    ] }),
+    tab === "routing" && /* @__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: [
@@ -337,33 +410,49 @@ function NotificationSettingsWorkspace({
         ] }, channel.id)) })
       ] }, category.id))
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "adn-settings__templates", children: [
+    tab === "messages" && /* @__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") })
+        /* @__PURE__ */ jsxs6("header", { className: "adn-settings__list-header", children: [
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("h2", { className: "adn-settings__section-title", children: label("settings.templatesTitle") }),
+            /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.templatesHint") })
+          ] }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "adn-settings__new", onClick: editor.startNew, children: label("settings.newTemplate") })
         ] }),
         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__ */ jsx6("ul", { children: editor.templates.map((template) => /* @__PURE__ */ jsxs6("li", { className: "adn-settings__row", 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
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "adn-settings__remove",
+              "aria-label": `${label("settings.remove")} ${template.key}`,
+              disabled: editor.isDeactivating,
+              onClick: () => editor.deactivate(template.id),
+              children: label("settings.remove")
+            }
+          )
+        ] }, template.id)) })
       ] }),
       /* @__PURE__ */ jsxs6("section", { className: "adn-settings__editor", children: [
         !editor.draft && /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.pickTemplate") }),
@@ -382,10 +471,74 @@ function NotificationSettingsWorkspace({
             ] }),
             /* @__PURE__ */ jsx6("button", { type: "button", onClick: editor.clear, children: label("settings.close") })
           ] }),
+          !editor.isIdentityLocked && /* @__PURE__ */ jsxs6("div", { className: "adn-settings__identity", children: [
+            /* @__PURE__ */ jsxs6("label", { className: "adn-settings__field", children: [
+              /* @__PURE__ */ jsx6("span", { className: "adn-settings__field-label", children: label("settings.key") }),
+              /* @__PURE__ */ jsx6("span", { className: "adn-settings__hint", children: label("settings.keyHint") }),
+              /* @__PURE__ */ jsx6("input", { value: editor.draft.key, onChange: (event) => editor.update({ key: event.target.value }) })
+            ] }),
+            /* @__PURE__ */ jsxs6("label", { className: "adn-settings__field", children: [
+              /* @__PURE__ */ jsx6("span", { className: "adn-settings__field-label", children: label("settings.channel") }),
+              /* @__PURE__ */ jsx6(
+                "select",
+                {
+                  value: editor.draft.channel,
+                  onChange: (event) => editor.update({ channel: event.target.value }),
+                  children: channels.map((channel) => /* @__PURE__ */ jsx6("option", { value: channel.id, children: channel.label }, channel.id))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("label", { className: "adn-settings__field", children: [
+              /* @__PURE__ */ jsx6("span", { className: "adn-settings__field-label", children: label("settings.locale") }),
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  value: editor.draft.locale,
+                  onChange: (event) => editor.update({ locale: event.target.value })
+                }
+              )
+            ] })
+          ] }),
+          editor.variables.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "adn-settings__variables", children: [
+            /* @__PURE__ */ jsx6("p", { className: "adn-settings__field-label", children: label("settings.variablesTitle") }),
+            /* @__PURE__ */ jsx6("p", { className: "adn-settings__hint", children: label("settings.variablesHint") }),
+            /* @__PURE__ */ jsx6("ul", { children: editor.variables.map((variable) => {
+              const used = editor.variableDiff.used.includes(variable.name);
+              const missing = editor.variableDiff.missingRequired.includes(variable.name);
+              return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  type: "button",
+                  className: [
+                    "adn-settings__variable",
+                    used ? "adn-settings__variable--used" : "",
+                    missing ? "adn-settings__variable--missing" : ""
+                  ].filter(Boolean).join(" "),
+                  onClick: () => editor.insertVariable({ ...cursor, name: variable.name }),
+                  children: [
+                    /* @__PURE__ */ jsx6("span", { className: "adn-settings__variable-name", children: `{{${variable.name}}}` }),
+                    /* @__PURE__ */ jsx6("span", { className: "adn-settings__hint", children: variable.example })
+                  ]
+                }
+              ) }, variable.name);
+            }) })
+          ] }),
+          editor.variableDiff.unknown.length > 0 && /* @__PURE__ */ jsxs6("p", { className: "adn-settings__error", children: [
+            label("settings.unknownVariables"),
+            " ",
+            editor.variableDiff.unknown.join(", ")
+          ] }),
           /* @__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__ */ jsx6(
+              "input",
+              {
+                value: editor.draft.subject,
+                onChange: (event) => editor.update({ subject: event.target.value }),
+                onSelect: (event) => rememberCursor("subject", event.currentTarget.selectionStart)
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxs6("label", { className: "adn-settings__field", children: [
             /* @__PURE__ */ jsx6("span", { className: "adn-settings__field-label", children: label("settings.body") }),
@@ -394,7 +547,8 @@ function NotificationSettingsWorkspace({
               {
                 rows: 4,
                 value: editor.draft.body,
-                onChange: (event) => editor.update({ body: event.target.value })
+                onChange: (event) => editor.update({ body: event.target.value }),
+                onSelect: (event) => rememberCursor("body", event.currentTarget.selectionStart)
               }
             )
           ] }),
@@ -403,14 +557,31 @@ function NotificationSettingsWorkspace({
             value: editor.draft.whatsappTemplateName,
             onChange: (value) => editor.update({ whatsappTemplateName: value })
           }),
-          editor.preview && /* @__PURE__ */ jsxs6("div", { className: "adn-settings__preview", children: [
+          editor.previews.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "adn-settings__previews", 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 })
+            /* @__PURE__ */ jsx6("div", { className: "adn-settings__preview-frames", children: editor.previews.map((frame) => /* @__PURE__ */ jsxs6("figure", { className: "adn-settings__preview", children: [
+              /* @__PURE__ */ jsxs6("figcaption", { className: "adn-settings__hint", children: [
+                label(`settings.viewport.${frame.viewport}`),
+                " \xB7 ",
+                frame.width,
+                "px"
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "adn-settings__preview-frame", style: { width: frame.width }, children: [
+                /* @__PURE__ */ jsx6("p", { className: "adn-settings__preview-subject", children: frame.rendered.title }),
+                /* @__PURE__ */ jsx6("p", { className: "adn-settings__preview-body", children: frame.rendered.body })
+              ] }),
+              frame.rendered.constraints.filter((constraint) => constraint.exceeded).map((constraint) => /* @__PURE__ */ jsxs6("p", { className: "adn-settings__preview-warning", children: [
+                label(`settings.constraint.${constraint.field}`),
+                " ",
+                constraint.actual,
+                "/",
+                constraint.limit
+              ] }, constraint.field))
+            ] }, frame.viewport)) })
           ] }),
           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") }),
+            /* @__PURE__ */ jsx6("button", { type: "button", onClick: editor.save, disabled: !editor.isDirty || !editor.canSave || editor.isSaving, children: editor.isSaving ? label("settings.saving") : label("settings.save") }),
             !editor.isDirty && /* @__PURE__ */ jsx6("span", { className: "adn-settings__hint", children: label("settings.unchanged") })
           ] })
         ] })
@@ -429,7 +600,11 @@ export {
   NotificationsWorkspace,
   PreferencesPanel,
   flattenNotificationPages,
+  formatNotificationTime,
+  formatNotificationTimestamp,
   resolveMessages,
+  useCategoryPolicies,
+  useDeactivateTemplate,
   useDeleteNotification,
   useMarkAllAsRead,
   useMarkAsRead,
@@ -438,6 +613,7 @@ export {
   useNotifications,
   usePreferences,
   useTemplateEditor,
+  useTemplateVariables,
   useTemplates,
   useUnreadCount,
   useUpdatePreferences,