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

package/dist/headless.d.ts

@@ -4,7 +4,7 @@ import * as _adatechnology_notification_client from '@adatechnology/notification
 import { NotificationClient } from '@adatechnology/notification-client';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import * as _adatechnology_notification_contracts from '@adatechnology/notification-contracts';
-import { NotificationSummary, NotificationPreference, NotificationTemplate, RenderedTemplatePreview } from '@adatechnology/notification-contracts';
+import { NotificationSummary, NotificationPreference, PreviewViewportSpec, RenderedTemplatePreview, NotificationTemplate, TemplateVariableDefinition, TemplateVariableDiff } from '@adatechnology/notification-contracts';
 
 var ptBR = {
 	"bell.label": "Notificações",
@@ -52,7 +52,26 @@ var ptBR = {
 	"settings.saving": "Salvando…",
 	"settings.unchanged": "Nada mudou ainda.",
 	"settings.close": "Fechar",
-	"settings.version": "v"
+	"settings.version": "v",
+	"settings.newTemplate": "Nova mensagem",
+	"settings.remove": "Remover",
+	"settings.key": "Chave da notificação",
+	"settings.keyHint": "Não muda depois de criada — é por ela que o envio acha a mensagem.",
+	"settings.channel": "Canal",
+	"settings.locale": "Idioma",
+	"settings.variablesTitle": "Variáveis",
+	"settings.variablesHint": "Clique para inserir no ponto onde o cursor estava.",
+	"settings.unknownVariables": "Variáveis que não existem nesta notificação:",
+	"settings.viewport.desktop": "Computador",
+	"settings.viewport.mobile": "Celular",
+	"settings.constraint.title": "Assunto passa do limite do canal:",
+	"settings.constraint.body": "Texto passa do limite do canal:",
+	"settings.tab.messages": "Mensagens",
+	"settings.tab.routing": "Roteamento",
+	"settings.policiesTitle": "Canais permitidos por assunto",
+	"settings.policiesHint": "Decisão da empresa. Canal desligado aqui não sai, mesmo que o destinatário tenha pedido.",
+	"settings.savePolicies": "Salvar roteamento",
+	"settings.discard": "Descartar"
 };
 
 /**
@@ -133,6 +152,37 @@ type UseNotificationStreamOptions = {
  */
 declare function useNotificationStream(options?: UseNotificationStreamOptions): void;
 
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * O roteamento: por quais canais cada categoria PODE sair, decidido pela empresa.
+ *
+ * É a camada que faltava. O chamador já podia enumerar canais em cada `sendNotification`, e quem
+ * recebe já tinha preferência — mas "cobrança nunca sai por SMS" não cabia em nenhum dos dois:
+ * o primeiro espalha a decisão por todo o código, o segundo deixa ela na mão do destinatário.
+ *
+ * O modelo aqui é de teto, não de piso: desligar barra o canal para todo mundo; ligar apenas
+ * permite, e a preferência de quem recebe continua valendo por cima.
+ */
+type UseCategoryPoliciesResult = {
+    readonly isLoading: boolean;
+    readonly isSaving: boolean;
+    readonly error: string | undefined;
+    readonly isDirty: boolean;
+    /** Linha ausente é permitido — o mesmo default do servidor, para a tela não mentir. */
+    isAllowed: (params: {
+        category: string;
+        channel: string;
+    }) => boolean;
+    toggle: (params: {
+        category: string;
+        channel: string;
+    }) => void;
+    save: () => void;
+    reset: () => void;
+};
+declare function useCategoryPolicies(): UseCategoryPoliciesResult;
+
 declare function usePreferences(): _tanstack_react_query.UseQueryResult<NoInfer<readonly NotificationPreference[]>, Error>;
 declare function useUpdatePreferences(): _tanstack_react_query.UseMutationResult<readonly NotificationPreference[], Error, readonly NotificationPreference[], unknown>;
 declare function useTemplates(): _tanstack_react_query.UseQueryResult<NoInfer<readonly _adatechnology_notification_contracts.NotificationTemplate[]>, Error>;
@@ -153,6 +203,17 @@ declare function useUpsertTemplate(): _tanstack_react_query.UseMutationResult<_a
     subject?: string | undefined;
     whatsappTemplateName?: string | undefined;
 }, unknown>;
+/**
+ * O catálogo é config do host: muda com deploy, não com uso. `staleTime: Infinity` evita refetch a
+ * cada foco de janela por um dado que não muda durante a sessão.
+ */
+declare function useTemplateVariables(): _tanstack_react_query.UseQueryResult<NoInfer<Readonly<Record<string, readonly _adatechnology_notification_contracts.TemplateVariableDefinition[]>>>, Error>;
+/**
+ * Desativa o template. Invalida a lista pelo mesmo motivo do upsert: o servidor derruba TODAS as
+ * versões ativas da identidade, e um cache otimista que removesse só a linha clicada mostraria a
+ * versão anterior de volta na tela.
+ */
+declare function useDeactivateTemplate(): _tanstack_react_query.UseMutationResult<void, Error, string, unknown>;
 
 /**
  * Copyright (c) 2026 Ada Technology. MIT License.
@@ -173,6 +234,8 @@ declare const NOTIFICATION_QUERY_KEYS: {
     readonly unreadCount: () => readonly ["notifications", "unread-count"];
     readonly preferences: () => readonly ["notifications", "preferences"];
     readonly templates: () => readonly ["notifications", "templates"];
+    readonly templateVariables: () => readonly ["notifications", "template-variables"];
+    readonly categoryPolicies: () => readonly ["notifications", "category-policies"];
 };
 
 /**
@@ -205,6 +268,10 @@ declare function formatNotificationTimestamp(isoTimestamp: string, locale: strin
  *    derivar título vazio, em vez de cair no fallback que usa o corpo.
  * 4. **Preview pelo `renderTemplate` do contracts**, o mesmo do envio. Reimplementar a interpolação
  *    dá um preview que confere hoje e mente quando o renderer mudar.
+ *
+ * A criação de template novo trouxe uma quinta: **a identidade é imutável depois de criada**.
+ * `key`+`channel`+`locale` é o que o `sendNotification` procura; deixar editar num template
+ * existente não seria edição, seria criar outro e deixar o antigo órfão no ar.
  */
 
 type TemplateDraft = {
@@ -215,27 +282,52 @@ type TemplateDraft = {
     readonly body: string;
     readonly whatsappTemplateName: string;
 };
+type TemplateDraftField = 'subject' | 'body';
+type TemplatePreviewFrame = PreviewViewportSpec & {
+    readonly rendered: RenderedTemplatePreview;
+};
 type UseTemplateEditorParams = {
     /**
-     * Valores de exemplo do preview. É do produto: só ele sabe que `{{shortCode}}` é "QC-1042".
-     * Ausente, o preview mostra os campos vazios — que é o que o destinatário veria mesmo.
+     * Valores de exemplo do preview. Hoje o padrão vem do catálogo de variáveis do servidor; isto
+     * continua existindo para o produto sobrescrever um exemplo pontual sem mexer no catálogo.
      */
     readonly previewPayload?: Readonly<Record<string, unknown>>;
+    /** Canal e locale de um template novo, antes de o operador escolher. */
+    readonly defaultChannel?: string;
+    readonly defaultLocale?: string;
 };
 type UseTemplateEditorResult = {
     readonly templates: readonly NotificationTemplate[];
     readonly isLoading: boolean;
     readonly isSaving: boolean;
+    readonly isDeactivating: boolean;
     readonly error: string | undefined;
     readonly selected: NotificationTemplate | undefined;
     readonly draft: TemplateDraft | undefined;
-    readonly preview: RenderedTemplatePreview | undefined;
+    /** `true` enquanto o rascunho é um template que ainda não existe no servidor. */
+    readonly isNew: boolean;
+    /** Identidade travada — `false` só durante a criação. */
+    readonly isIdentityLocked: boolean;
+    /** Os dois quadros do preview, na ordem em que a tela desenha. */
+    readonly previews: readonly TemplatePreviewFrame[];
+    /** As variáveis que esta `key` declara. Vazio quando o catálogo não conhece a chave. */
+    readonly variables: readonly TemplateVariableDefinition[];
+    readonly variableDiff: TemplateVariableDiff;
     readonly isDirty: boolean;
+    readonly canSave: boolean;
     select: (template: NotificationTemplate) => void;
+    startNew: () => void;
     update: (patch: Partial<TemplateDraft>) => void;
+    /** Insere `{{nome}}` na posição do cursor. O operador nunca digita o nome à mão. */
+    insertVariable: (params: {
+        name: string;
+        field: TemplateDraftField;
+        cursorIndex: number;
+    }) => void;
     save: () => void;
+    deactivate: (id: string) => void;
     clear: () => void;
 };
 declare function useTemplateEditor(params?: UseTemplateEditorParams): UseTemplateEditorResult;
 
-export { DEFAULT_LOCALE, NOTIFICATION_QUERY_KEYS, type NotificationContextValue, type NotificationLocale, type NotificationMessages, NotificationProvider, type NotificationProviderProps, type NotificationTheme, type TemplateDraft, type UseNotificationStreamOptions, type UseNotificationsOptions, type UseTemplateEditorParams, type UseTemplateEditorResult, flattenNotificationPages, formatNotificationTime, formatNotificationTimestamp, resolveMessages, useDeleteNotification, useMarkAllAsRead, useMarkAsRead, useNotificationContext, useNotificationStream, useNotifications, usePreferences, useTemplateEditor, useTemplates, useUnreadCount, useUpdatePreferences, useUpsertTemplate };
+export { DEFAULT_LOCALE, NOTIFICATION_QUERY_KEYS, type NotificationContextValue, type NotificationLocale, type NotificationMessages, NotificationProvider, type NotificationProviderProps, type NotificationTheme, type TemplateDraft, type TemplateDraftField, type TemplatePreviewFrame, type UseCategoryPoliciesResult, type UseNotificationStreamOptions, type UseNotificationsOptions, type UseTemplateEditorParams, type UseTemplateEditorResult, flattenNotificationPages, formatNotificationTime, formatNotificationTimestamp, resolveMessages, useCategoryPolicies, useDeactivateTemplate, useDeleteNotification, useMarkAllAsRead, useMarkAsRead, useNotificationContext, useNotificationStream, useNotifications, usePreferences, useTemplateEditor, useTemplateVariables, useTemplates, useUnreadCount, useUpdatePreferences, useUpsertTemplate };

package/dist/headless.js

@@ -6,6 +6,8 @@ import {
   formatNotificationTime,
   formatNotificationTimestamp,
   resolveMessages,
+  useCategoryPolicies,
+  useDeactivateTemplate,
   useDeleteNotification,
   useMarkAllAsRead,
   useMarkAsRead,
@@ -14,11 +16,12 @@ import {
   useNotifications,
   usePreferences,
   useTemplateEditor,
+  useTemplateVariables,
   useTemplates,
   useUnreadCount,
   useUpdatePreferences,
   useUpsertTemplate
-} from "./chunk-I6WQKOCP.js";
+} from "./chunk-QBQ62VZ3.js";
 export {
   DEFAULT_LOCALE,
   NOTIFICATION_QUERY_KEYS,
@@ -27,6 +30,8 @@ export {
   formatNotificationTime,
   formatNotificationTimestamp,
   resolveMessages,
+  useCategoryPolicies,
+  useDeactivateTemplate,
   useDeleteNotification,
   useMarkAllAsRead,
   useMarkAsRead,
@@ -35,6 +40,7 @@ export {
   useNotifications,
   usePreferences,
   useTemplateEditor,
+  useTemplateVariables,
   useTemplates,
   useUnreadCount,
   useUpdatePreferences,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { DEFAULT_LOCALE, NOTIFICATION_QUERY_KEYS, NotificationContextValue, NotificationLocale, NotificationMessages, NotificationProvider, NotificationProviderProps, NotificationTheme, TemplateDraft, UseNotificationStreamOptions, UseNotificationsOptions, UseTemplateEditorParams, UseTemplateEditorResult, flattenNotificationPages, formatNotificationTime, formatNotificationTimestamp, resolveMessages, useDeleteNotification, useMarkAllAsRead, useMarkAsRead, useNotificationContext, useNotificationStream, useNotifications, usePreferences, useTemplateEditor, useTemplates, useUnreadCount, useUpdatePreferences, useUpsertTemplate } from './headless.js';
+export { DEFAULT_LOCALE, NOTIFICATION_QUERY_KEYS, NotificationContextValue, NotificationLocale, NotificationMessages, NotificationProvider, NotificationProviderProps, NotificationTheme, TemplateDraft, TemplateDraftField, TemplatePreviewFrame, UseCategoryPoliciesResult, UseNotificationStreamOptions, UseNotificationsOptions, UseTemplateEditorParams, UseTemplateEditorResult, flattenNotificationPages, formatNotificationTime, formatNotificationTimestamp, resolveMessages, useCategoryPolicies, useDeactivateTemplate, useDeleteNotification, useMarkAllAsRead, useMarkAsRead, useNotificationContext, useNotificationStream, useNotifications, usePreferences, useTemplateEditor, useTemplateVariables, useTemplates, useUnreadCount, useUpdatePreferences, useUpsertTemplate } from './headless.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { NotificationSummary, NotificationTemplate } from '@adatechnology/notification-contracts';

package/dist/index.js

@@ -6,6 +6,8 @@ import {
   formatNotificationTime,
   formatNotificationTimestamp,
   resolveMessages,
+  useCategoryPolicies,
+  useDeactivateTemplate,
   useDeleteNotification,
   useMarkAllAsRead,
   useMarkAsRead,
@@ -14,11 +16,12 @@ import {
   useNotifications,
   usePreferences,
   useTemplateEditor,
+  useTemplateVariables,
   useTemplates,
   useUnreadCount,
   useUpdatePreferences,
   useUpsertTemplate
-} from "./chunk-I6WQKOCP.js";
+} from "./chunk-QBQ62VZ3.js";
 
 // src/components/NotificationBell.tsx
 import { Bell } from "lucide-react";
@@ -295,6 +298,7 @@ function NotificationsWorkspace({
 }
 
 // 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,
@@ -311,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
@@ -336,7 +352,42 @@ function NotificationSettingsWorkspace({
       ] }),
       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: [
@@ -359,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") }),
@@ -404,6 +471,63 @@ 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") }),
@@ -411,7 +535,8 @@ function NotificationSettingsWorkspace({
               "input",
               {
                 value: editor.draft.subject,
-                onChange: (event) => editor.update({ subject: event.target.value })
+                onChange: (event) => editor.update({ subject: event.target.value }),
+                onSelect: (event) => rememberCursor("subject", event.currentTarget.selectionStart)
               }
             )
           ] }),
@@ -422,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)
               }
             )
           ] }),
@@ -431,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") })
           ] })
         ] })
@@ -460,6 +603,8 @@ export {
   formatNotificationTime,
   formatNotificationTimestamp,
   resolveMessages,
+  useCategoryPolicies,
+  useDeactivateTemplate,
   useDeleteNotification,
   useMarkAllAsRead,
   useMarkAsRead,
@@ -468,6 +613,7 @@ export {
   useNotifications,
   usePreferences,
   useTemplateEditor,
+  useTemplateVariables,
   useTemplates,
   useUnreadCount,
   useUpdatePreferences,