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

package/dist/index.js

@@ -2,6 +2,10 @@ import {
   DEFAULT_LOCALE,
   NOTIFICATION_QUERY_KEYS,
   NotificationProvider,
+  SORT_DIRECTIONS,
+  TEMPLATE_COLUMNS,
+  TEMPLATE_SORT_FIELDS,
+  TEMPLATE_VIEWS,
   flattenNotificationPages,
   formatNotificationTime,
   formatNotificationTimestamp,
@@ -21,7 +25,7 @@ import {
   useUnreadCount,
   useUpdatePreferences,
   useUpsertTemplate
-} from "./chunk-QBQ62VZ3.js";
+} from "./chunk-7XDQ76IV.js";
 
 // src/components/NotificationBell.tsx
 import { Bell } from "lucide-react";
@@ -298,8 +302,632 @@ function NotificationsWorkspace({
 }
 
 // src/components/NotificationSettingsWorkspace.tsx
+import { Plus, Trash2 as Trash22, X } from "lucide-react";
+import { useState as useState4 } from "react";
+
+// src/components/HtmlCodeField.tsx
+import { useRef } from "react";
+
+// src/htmlHighlight.util.ts
+var HTML_TOKEN = {
+  TAG: "tag",
+  NAME: "name",
+  ATTRIBUTE: "attribute",
+  VALUE: "value",
+  COMMENT: "comment",
+  DOCTYPE: "doctype",
+  VARIABLE: "variable",
+  TEXT: "text"
+};
+var SCANNER = /(<!--[\s\S]*?-->)|(<!doctype[^>]*>)|(<\/?)([a-zA-Z][\w:-]*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?>)|(\{\{\s*[\w.]+\s*\}\})/gi;
+function tokenizeHtml(source) {
+  const tokens = [];
+  let cursor = 0;
+  for (const match of source.matchAll(SCANNER)) {
+    const start = match.index;
+    if (start > cursor) push(tokens, HTML_TOKEN.TEXT, source.slice(cursor, start));
+    const [whole, comment, doctype, open, name, attributes, close, variable] = match;
+    if (comment) push(tokens, HTML_TOKEN.COMMENT, comment);
+    else if (doctype) push(tokens, HTML_TOKEN.DOCTYPE, doctype);
+    else if (variable) push(tokens, HTML_TOKEN.VARIABLE, variable);
+    else if (name) {
+      push(tokens, HTML_TOKEN.TAG, open ?? "<");
+      push(tokens, HTML_TOKEN.NAME, name);
+      tokens.push(...tokenizeAttributes(attributes ?? ""));
+      push(tokens, HTML_TOKEN.TAG, close ?? ">");
+    }
+    cursor = start + whole.length;
+  }
+  if (cursor < source.length) push(tokens, HTML_TOKEN.TEXT, source.slice(cursor));
+  return tokens;
+}
+var ATTRIBUTE_SCANNER = /([\w:@.-]+)(\s*=\s*)("[^"]*"|'[^']*'|[^\s>]+)?/g;
+function tokenizeAttributes(source) {
+  const tokens = [];
+  let cursor = 0;
+  for (const match of source.matchAll(ATTRIBUTE_SCANNER)) {
+    const start = match.index;
+    if (start > cursor) push(tokens, HTML_TOKEN.TEXT, source.slice(cursor, start));
+    const [whole, attribute, equals, value] = match;
+    push(tokens, HTML_TOKEN.ATTRIBUTE, attribute ?? "");
+    push(tokens, HTML_TOKEN.TEXT, equals ?? "");
+    push(tokens, HTML_TOKEN.VALUE, value ?? "");
+    cursor = start + whole.length;
+  }
+  if (cursor < source.length) push(tokens, HTML_TOKEN.TEXT, source.slice(cursor));
+  return tokens;
+}
+function push(tokens, kind, text) {
+  if (text) tokens.push({ kind, text });
+}
+
+// src/components/HtmlCodeField.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function HtmlCodeField({ value, rows = 12, onChange, onSelect, onFocus, problems }) {
+  const highlightRef = useRef(null);
+  function handleScroll(event) {
+    const pre = highlightRef.current;
+    if (!pre) return;
+    pre.scrollTop = event.currentTarget.scrollTop;
+    pre.scrollLeft = event.currentTarget.scrollLeft;
+  }
+  const lineCount = value.split("\n").length;
+  return /* @__PURE__ */ jsxs6("div", { className: "adn-code", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "adn-code__editor", children: [
+      /* @__PURE__ */ jsx6("div", { className: "adn-code__gutter", "aria-hidden": "true", children: Array.from({ length: lineCount }, (_, index) => /* @__PURE__ */ jsx6("span", { children: index + 1 }, index)) }),
+      /* @__PURE__ */ jsxs6("div", { className: "adn-code__surface", children: [
+        /* @__PURE__ */ jsxs6("pre", { ref: highlightRef, className: "adn-code__highlight", "aria-hidden": "true", children: [
+          tokenizeHtml(value).map((token, index) => /* @__PURE__ */ jsx6("span", { className: `adn-code__token adn-code__token--${token.kind}`, children: token.text }, index)),
+          "\n"
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "textarea",
+          {
+            className: "adn-code__input",
+            spellCheck: false,
+            rows,
+            value,
+            onChange: (event) => onChange(event.target.value),
+            onScroll: handleScroll,
+            onSelect: (event) => onSelect?.(event.currentTarget.selectionStart),
+            onFocus
+          }
+        )
+      ] })
+    ] }),
+    problems && problems.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "adn-settings__email-report", children: problems.map((problem) => /* @__PURE__ */ jsx6(
+      "li",
+      {
+        className: `adn-settings__email-problem adn-settings__email-problem--${problem.severity}`,
+        children: problem.message
+      },
+      problem.code
+    )) })
+  ] });
+}
+
+// src/components/MessageBodyField.tsx
+import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+
+// src/messageFormat.util.ts
+function applyMark({ text, delimiter, selectionStart, selectionEnd }) {
+  const start = clamp(selectionStart, text.length);
+  const end = clamp(Math.max(selectionEnd, selectionStart), text.length);
+  const selected = text.slice(start, end);
+  const size = delimiter.length;
+  const wrappedInside = selected.startsWith(delimiter) && selected.endsWith(delimiter) && selected.length > size * 2;
+  if (wrappedInside) {
+    const bare = selected.slice(size, -size);
+    return {
+      text: `${text.slice(0, start)}${bare}${text.slice(end)}`,
+      selectionStart: start,
+      selectionEnd: start + bare.length
+    };
+  }
+  const wrappedOutside = text.slice(start - size, start) === delimiter && text.slice(end, end + size) === delimiter;
+  if (wrappedOutside) {
+    return {
+      text: `${text.slice(0, start - size)}${selected}${text.slice(end + size)}`,
+      selectionStart: start - size,
+      selectionEnd: start - size + selected.length
+    };
+  }
+  return {
+    text: `${text.slice(0, start)}${delimiter}${selected}${delimiter}${text.slice(end)}`,
+    selectionStart: start + size,
+    selectionEnd: start + size + selected.length
+  };
+}
+function insertAt({
+  text,
+  insertion,
+  selectionStart,
+  selectionEnd
+}) {
+  const start = clamp(selectionStart, text.length);
+  const end = clamp(Math.max(selectionEnd, selectionStart), text.length);
+  const next = start + insertion.length;
+  return {
+    text: `${text.slice(0, start)}${insertion}${text.slice(end)}`,
+    selectionStart: next,
+    selectionEnd: next
+  };
+}
+function clamp(value, max) {
+  return Math.min(Math.max(value, 0), max);
+}
+
+// src/components/MessageToolbar.tsx
+import { Bold, Code, Italic, Smile, Strikethrough } from "lucide-react";
 import { useState as useState2 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// src/messageFormat.constant.ts
+var MESSAGE_FORMAT = {
+  BOLD: "bold",
+  ITALIC: "italic",
+  STRIKETHROUGH: "strikethrough",
+  MONOSPACE: "monospace"
+};
+var MESSAGE_FORMAT_MARKS = [
+  { format: MESSAGE_FORMAT.BOLD, delimiter: "*" },
+  { format: MESSAGE_FORMAT.ITALIC, delimiter: "_" },
+  { format: MESSAGE_FORMAT.STRIKETHROUGH, delimiter: "~" },
+  { format: MESSAGE_FORMAT.MONOSPACE, delimiter: "```" }
+];
+var MESSAGE_EMOJI = [
+  "\u2705",
+  "\u274C",
+  "\u26A0\uFE0F",
+  "\u2139\uFE0F",
+  "\u{1F4C5}",
+  "\u23F0",
+  "\u23F3",
+  "\u{1F514}",
+  "\u{1F4AC}",
+  "\u{1F4DE}",
+  "\u{1F4E7}",
+  "\u{1F64B}",
+  "\u{1F4B0}",
+  "\u{1F4B3}",
+  "\u{1F9FE}",
+  "\u{1F4CA}",
+  "\u{1F4E6}",
+  "\u{1F69A}",
+  "\u{1F4CD}",
+  "\u{1F517}",
+  "\u{1F642}",
+  "\u{1F389}",
+  "\u{1F64F}",
+  "\u{1F44B}"
+];
+
+// src/components/MessageToolbar.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var FORMAT_ICON = {
+  [MESSAGE_FORMAT.BOLD]: /* @__PURE__ */ jsx7(Bold, { "aria-hidden": "true", className: "adn-settings__button-icon" }),
+  [MESSAGE_FORMAT.ITALIC]: /* @__PURE__ */ jsx7(Italic, { "aria-hidden": "true", className: "adn-settings__button-icon" }),
+  [MESSAGE_FORMAT.STRIKETHROUGH]: /* @__PURE__ */ jsx7(Strikethrough, { "aria-hidden": "true", className: "adn-settings__button-icon" }),
+  [MESSAGE_FORMAT.MONOSPACE]: /* @__PURE__ */ jsx7(Code, { "aria-hidden": "true", className: "adn-settings__button-icon" })
+};
+function MessageToolbar({ onMark, onInsert, labelOf }) {
+  const [isEmojiOpen, setIsEmojiOpen] = useState2(false);
+  return /* @__PURE__ */ jsxs7("div", { className: "adn-toolbar", children: [
+    MESSAGE_FORMAT_MARKS.map(({ format, delimiter }) => /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "adn-toolbar__button",
+        title: labelOf(`toolbar.${format}`),
+        "aria-label": labelOf(`toolbar.${format}`),
+        onMouseDown: (event) => {
+          event.preventDefault();
+          onMark(delimiter);
+        },
+        children: FORMAT_ICON[format]
+      },
+      format
+    )),
+    /* @__PURE__ */ jsx7("span", { className: "adn-toolbar__divider", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs7("div", { className: "adn-toolbar__emoji", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "adn-toolbar__button",
+          title: labelOf("toolbar.emoji"),
+          "aria-label": labelOf("toolbar.emoji"),
+          "aria-expanded": isEmojiOpen,
+          onMouseDown: (event) => {
+            event.preventDefault();
+            setIsEmojiOpen((current) => !current);
+          },
+          children: /* @__PURE__ */ jsx7(Smile, { "aria-hidden": "true", className: "adn-settings__button-icon" })
+        }
+      ),
+      isEmojiOpen && /* @__PURE__ */ jsx7("div", { className: "adn-toolbar__palette", role: "group", "aria-label": labelOf("toolbar.emoji"), children: MESSAGE_EMOJI.map((emoji) => /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "adn-toolbar__emoji-button",
+          onMouseDown: (event) => {
+            event.preventDefault();
+            onInsert(emoji);
+            setIsEmojiOpen(false);
+          },
+          children: emoji
+        },
+        emoji
+      )) })
+    ] })
+  ] });
+}
+
+// src/components/MessageBodyField.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function MessageBodyField({ value, rows = 5, onChange, onSelect, onFocus, labelOf }) {
+  const textareaRef = useRef2(null);
+  const [pendingSelection, setPendingSelection] = useState3();
+  useLayoutEffect(() => {
+    if (!pendingSelection) return;
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(pendingSelection[0], pendingSelection[1]);
+    setPendingSelection(void 0);
+  }, [pendingSelection]);
+  function currentRange() {
+    const textarea = textareaRef.current;
+    if (!textarea) return [value.length, value.length];
+    return [textarea.selectionStart, textarea.selectionEnd];
+  }
+  function handleMark(delimiter) {
+    const [selectionStart, selectionEnd] = currentRange();
+    const result = applyMark({ text: value, delimiter, selectionStart, selectionEnd });
+    onChange(result.text);
+    setPendingSelection([result.selectionStart, result.selectionEnd]);
+  }
+  function handleInsert(insertion) {
+    const [selectionStart, selectionEnd] = currentRange();
+    const result = insertAt({ text: value, insertion, selectionStart, selectionEnd });
+    onChange(result.text);
+    setPendingSelection([result.selectionStart, result.selectionEnd]);
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: "adn-message-field", children: [
+    /* @__PURE__ */ jsx8(MessageToolbar, { onMark: handleMark, onInsert: handleInsert, labelOf }),
+    /* @__PURE__ */ jsx8(
+      "textarea",
+      {
+        ref: textareaRef,
+        rows,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        onSelect: (event) => onSelect?.(event.currentTarget.selectionStart),
+        onFocus
+      }
+    )
+  ] });
+}
+
+// src/components/TemplatePreview.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function StatusIcons() {
+  return /* @__PURE__ */ jsxs9("span", { className: "adn-preview-status__icons", children: [
+    /* @__PURE__ */ jsxs9("svg", { width: "15", height: "10", viewBox: "0 0 15 10", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx9("rect", { x: "0", y: "6", width: "2.5", height: "4", rx: "0.6", fill: "currentColor" }),
+      /* @__PURE__ */ jsx9("rect", { x: "4", y: "4", width: "2.5", height: "6", rx: "0.6", fill: "currentColor" }),
+      /* @__PURE__ */ jsx9("rect", { x: "8", y: "2", width: "2.5", height: "8", rx: "0.6", fill: "currentColor" }),
+      /* @__PURE__ */ jsx9("rect", { x: "12", y: "0", width: "2.5", height: "10", rx: "0.6", fill: "currentColor" })
+    ] }),
+    /* @__PURE__ */ jsxs9("svg", { width: "13", height: "10", viewBox: "0 0 13 10", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx9("path", { d: "M6.5 9.2 1 3.6a7.8 7.8 0 0 1 11 0Z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
+      /* @__PURE__ */ jsx9("circle", { cx: "6.5", cy: "8", r: "1", fill: "currentColor" })
+    ] }),
+    /* @__PURE__ */ jsxs9("svg", { width: "20", height: "10", viewBox: "0 0 20 10", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx9("rect", { x: "0.5", y: "0.5", width: "16", height: "9", rx: "2.5", fill: "none", stroke: "currentColor", opacity: "0.5" }),
+      /* @__PURE__ */ jsx9("rect", { x: "2", y: "2", width: "11", height: "6", rx: "1.2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx9("rect", { x: "18", y: "3.5", width: "1.6", height: "3", rx: "0.8", fill: "currentColor", opacity: "0.5" })
+    ] })
+  ] });
+}
+function Phone({
+  children,
+  os,
+  tone,
+  time
+}) {
+  const android = os === "android";
+  const classes = ["adn-preview-phone", `adn-preview-phone--${android ? "android" : "ios"}`];
+  if (tone === "dark") classes.push("adn-preview-phone--dark");
+  return /* @__PURE__ */ jsxs9("div", { className: classes.join(" "), children: [
+    /* @__PURE__ */ jsx9("span", { className: "adn-preview-phone__btn adn-preview-phone__btn--mute" }),
+    /* @__PURE__ */ jsx9("span", { className: "adn-preview-phone__btn adn-preview-phone__btn--up" }),
+    /* @__PURE__ */ jsx9("span", { className: "adn-preview-phone__btn adn-preview-phone__btn--down" }),
+    /* @__PURE__ */ jsx9("span", { className: "adn-preview-phone__btn adn-preview-phone__btn--power" }),
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-phone__screen", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "adn-preview-status", children: [
+        /* @__PURE__ */ jsx9("span", { className: "adn-preview-status__time", children: time }),
+        android ? /* @__PURE__ */ jsx9("span", { className: "adn-preview-phone__punch" }) : /* @__PURE__ */ jsx9("span", { className: "adn-preview-phone__island" }),
+        /* @__PURE__ */ jsx9(StatusIcons, {})
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-phone__content", children }),
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-phone__gesture" })
+    ] })
+  ] });
+}
+function Icon({ d, size = 16 }) {
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.7",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx9("path", { d })
+    }
+  );
+}
+var ICON = {
+  back: "M19 12H5M12 19l-7-7 7-7",
+  archive: "M3 8h18v12H3zM3 4h18v4H3M10 12h4",
+  report: "M12 8v5M12 16.5v.01M12 3 2 20h20Z",
+  trash: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6",
+  unread: "M3 5h18v14H3zM3 5l9 7 9-7",
+  move: "M3 7h6l2 2h10v10H3zM3 7V5h6l2 2",
+  more: "M12 6v.01M12 12v.01M12 18v.01",
+  prev: "M15 19l-7-7 7-7",
+  next: "M9 5l7 7-7 7",
+  print: "M6 9V3h12v6M6 18H4v-6h16v6h-2M8 14h8v7H8z",
+  popout: "M14 4h6v6M20 4l-9 9M18 14v6H4V6h6",
+  star: "m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.8 6.2 20.9l1.1-6.5L2.6 9.8l6.5-.9Z",
+  reply: "M9 17H4V7M4 7l7 7M20 17v-3a6 6 0 0 0-6-6H4",
+  pencil: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z",
+  inbox: "M3 12h5l2 3h4l2-3h5M3 12l2-7h14l2 7v7H3z",
+  search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14M20 20l-3.5-3.5",
+  help: "M12 17v.01M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.7",
+  video: "M3 7h11v10H3zM14 10l7-3v10l-7-3",
+  call: "M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1",
+  mic: "M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3M5 11a7 7 0 0 0 14 0M12 18v3",
+  forward: "M15 17h5V7M20 7l-7 7M4 17v-3a6 6 0 0 1 6-6h10",
+  replyAll: "M7 17H3V9M3 9l5 5M11 17H8V9M8 9l5 5M20 17v-3a6 6 0 0 0-6-6H8",
+  chevron: "m6 9 6 6 6-6",
+  settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.3 1a7 7 0 0 0-1.7-1L14.5 3h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.3-1-2 3.4L6.1 11a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.3 1 2-3.4-2-1.5c.1-.3.1-.7.1-1"
+};
+function EmailDesktop({
+  rendered,
+  emailHtml,
+  senderName,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs9("div", { className: "adn-preview-browser", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-browser__bar", children: [
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-browser__dot" }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-browser__dot" }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-browser__dot" }),
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-browser__address", children: labels.address })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp__bar", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mailapp__menu", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx9("span", {}),
+          /* @__PURE__ */ jsx9("span", {}),
+          /* @__PURE__ */ jsx9("span", {})
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp__search", children: [
+          /* @__PURE__ */ jsx9(Icon, { d: ICON.search, size: 15 }),
+          /* @__PURE__ */ jsx9("span", { children: labels.mailbox })
+        ] }),
+        /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mailapp__account", children: [
+          /* @__PURE__ */ jsx9(Icon, { d: ICON.help, size: 15 }),
+          /* @__PURE__ */ jsx9(Icon, { d: ICON.settings, size: 15 }),
+          /* @__PURE__ */ jsx9("span", { className: "adn-preview-avatar adn-preview-avatar--small", children: senderName.slice(0, 1) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp__split", children: [
+        /* @__PURE__ */ jsxs9("nav", { className: "adn-preview-mailapp__rail", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__compose", children: /* @__PURE__ */ jsx9(Icon, { d: ICON.pencil, size: 16 }) }),
+          /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__rail-item adn-preview-mailapp__rail-item--active", children: /* @__PURE__ */ jsx9(Icon, { d: ICON.inbox, size: 16 }) }),
+          /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__rail-item", children: /* @__PURE__ */ jsx9(Icon, { d: ICON.star, size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "adn-preview-browser__viewport", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp__toolbar", children: [
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.back }),
+            /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__divider" }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.archive }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.report }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.trash }),
+            /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__divider" }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.unread }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.move }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.more }),
+            /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__spacer" }),
+            /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__counter", children: labels.counter }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.prev, size: 14 }),
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.next, size: 14 })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail__subject-row", children: [
+              /* @__PURE__ */ jsx9("div", { className: "adn-preview-mail__subject", children: rendered.title }),
+              /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__folder", children: labels.folder }),
+              /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__subject-actions", children: [
+                /* @__PURE__ */ jsx9(Icon, { d: ICON.print, size: 15 }),
+                /* @__PURE__ */ jsx9(Icon, { d: ICON.popout, size: 15 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail__from", children: [
+              /* @__PURE__ */ jsx9("span", { className: "adn-preview-avatar", children: senderName.slice(0, 1) }),
+              /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__identity", children: [
+                /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__sender-row", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__sender", children: senderName }),
+                  /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__address", children: labels.senderAddress }),
+                  /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__unsubscribe", children: labels.unsubscribe })
+                ] }),
+                /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__to", children: labels.to })
+              ] }),
+              /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__from-actions", children: [
+                /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__time", children: labels.now }),
+                /* @__PURE__ */ jsx9(Icon, { d: ICON.star, size: 15 }),
+                /* @__PURE__ */ jsx9(Icon, { d: ICON.reply, size: 15 }),
+                /* @__PURE__ */ jsx9(Icon, { d: ICON.more, size: 15 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx9(MailBody, { html: emailHtml, text: rendered.body })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function EmailMobile({
+  rendered,
+  emailHtml,
+  senderName,
+  os,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs9(Phone, { os, time: labels.time, children: [
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp__actions", children: [
+      /* @__PURE__ */ jsx9(Icon, { d: ICON.back, size: 18 }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-mailapp__spacer" }),
+      /* @__PURE__ */ jsx9(Icon, { d: ICON.archive, size: 18 }),
+      /* @__PURE__ */ jsx9(Icon, { d: ICON.trash, size: 18 }),
+      /* @__PURE__ */ jsx9(Icon, { d: ICON.unread, size: 18 }),
+      /* @__PURE__ */ jsx9(Icon, { d: ICON.more, size: 18 })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "adn-preview-mailapp__scroll", children: /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail adn-preview-mail--compact", children: [
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-mail__subject-row", children: /* @__PURE__ */ jsx9("div", { className: "adn-preview-mail__subject", children: rendered.title }) }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__folder", children: labels.folder }),
+      /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail__from adn-preview-mail__from--mobile", children: [
+        /* @__PURE__ */ jsx9("span", { className: "adn-preview-avatar adn-preview-avatar--large", children: senderName.slice(0, 1) }),
+        /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__identity", children: [
+          /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__sender-row", children: [
+            /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__sender", children: senderName }),
+            /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__time", children: labels.now })
+          ] }),
+          /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__recipients", children: [
+            labels.to,
+            /* @__PURE__ */ jsx9(Icon, { d: ICON.chevron, size: 12 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__from-actions", children: /* @__PURE__ */ jsx9(Icon, { d: ICON.star, size: 17 }) })
+      ] }),
+      /* @__PURE__ */ jsx9(MailBody, { html: emailHtml, text: rendered.body }),
+      /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail__reply", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__reply-button", children: [
+          /* @__PURE__ */ jsx9(Icon, { d: ICON.reply, size: 14 }),
+          labels.reply
+        ] }),
+        /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__reply-button", children: [
+          /* @__PURE__ */ jsx9(Icon, { d: ICON.replyAll, size: 14 }),
+          labels.replyAll
+        ] }),
+        /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__reply-button", children: [
+          /* @__PURE__ */ jsx9(Icon, { d: ICON.forward, size: 14 }),
+          labels.forward
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function WhatsAppPreview({
+  rendered,
+  labels,
+  os,
+  senderName
+}) {
+  return /* @__PURE__ */ jsxs9(Phone, { os, time: labels.time, children: [
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa__header", children: [
+      /* @__PURE__ */ jsx9(Icon, { d: ICON.back, size: 18 }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-wa__avatar", children: senderName.slice(0, 1) }),
+      /* @__PURE__ */ jsxs9("span", { className: "adn-preview-wa__contact", children: [
+        /* @__PURE__ */ jsx9("span", { className: "adn-preview-wa__name", children: senderName }),
+        /* @__PURE__ */ jsx9("span", { className: "adn-preview-wa__status", children: labels.online })
+      ] }),
+      /* @__PURE__ */ jsxs9("span", { className: "adn-preview-wa__header-actions", children: [
+        /* @__PURE__ */ jsx9(Icon, { d: ICON.video, size: 17 }),
+        /* @__PURE__ */ jsx9(Icon, { d: ICON.call, size: 17 }),
+        /* @__PURE__ */ jsx9(Icon, { d: ICON.more, size: 17 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa", children: [
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__day", children: labels.today }),
+      /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa__bubble", children: [
+        /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__text", children: rendered.body }),
+        /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__time", children: labels.now })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa__composer", children: [
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-wa__input", children: labels.compose }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-wa__send", children: /* @__PURE__ */ jsx9(Icon, { d: ICON.mic, size: 16 }) })
+    ] })
+  ] });
+}
+function SmsPreview({
+  rendered,
+  os,
+  labels
+}) {
+  return /* @__PURE__ */ jsx9(Phone, { os, time: labels.time, children: /* @__PURE__ */ jsx9("div", { className: "adn-preview-sms", children: /* @__PURE__ */ jsx9("div", { className: "adn-preview-sms__bubble", children: rendered.body }) }) });
+}
+function PushPreview({
+  rendered,
+  senderName,
+  labels,
+  os
+}) {
+  return /* @__PURE__ */ jsx9(Phone, { os, tone: "dark", time: labels.time, children: /* @__PURE__ */ jsx9("div", { className: "adn-preview-push", children: /* @__PURE__ */ jsxs9("div", { className: "adn-preview-push__card", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-push__app", children: [
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-avatar adn-preview-avatar--small", children: senderName.slice(0, 1) }),
+      /* @__PURE__ */ jsx9("span", { children: senderName }),
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-push__time", children: labels.now })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "adn-preview-push__title", children: rendered.title }),
+    /* @__PURE__ */ jsx9("div", { className: "adn-preview-push__body", children: rendered.body })
+  ] }) }) });
+}
+function InboxPreview({ rendered }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "adn-preview-inbox", children: [
+    /* @__PURE__ */ jsx9("span", { className: "adn-preview-inbox__dot" }),
+    /* @__PURE__ */ jsxs9("div", { className: "adn-preview-inbox__text", children: [
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-inbox__title", children: rendered.title }),
+      /* @__PURE__ */ jsx9("div", { className: "adn-preview-inbox__body", children: rendered.body })
+    ] })
+  ] });
+}
+function MailBody({ html, text }) {
+  if (!html) return /* @__PURE__ */ jsx9("div", { className: "adn-preview-mail__body", children: text });
+  return /* @__PURE__ */ jsx9(
+    "iframe",
+    {
+      className: "adn-preview-mail__body adn-preview-mail__frame",
+      sandbox: "",
+      srcDoc: html,
+      title: text.slice(0, 60)
+    }
+  );
+}
+function TemplatePreview({ channel, viewport, rendered, emailHtml, senderName, labels }) {
+  const sender = senderName ?? rendered.title.slice(0, 1).toUpperCase();
+  if (channel === "whatsapp") {
+    return /* @__PURE__ */ jsx9(WhatsAppPreview, { rendered, labels, os: viewport, senderName: sender });
+  }
+  if (channel === "sms") return /* @__PURE__ */ jsx9(SmsPreview, { rendered, os: viewport, labels });
+  if (channel === "push") {
+    return /* @__PURE__ */ jsx9(PushPreview, { rendered, senderName: sender, labels, os: viewport });
+  }
+  if (channel === "inbox") return /* @__PURE__ */ jsx9(InboxPreview, { rendered });
+  return viewport === "browser" ? /* @__PURE__ */ jsx9(EmailDesktop, { rendered, emailHtml, senderName: sender, labels }) : /* @__PURE__ */ jsx9(EmailMobile, { rendered, emailHtml, senderName: sender, os: viewport, labels });
+}
+
+// src/components/NotificationSettingsWorkspace.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function isHtmlBody(body) {
+  return /<\/?[a-zA-Z][\w:-]*(\s|>|\/)/.test(body);
+}
 function NotificationSettingsWorkspace({
   labels: labelsOverride,
   channels,
@@ -307,9 +935,12 @@ function NotificationSettingsWorkspace({
   previewPayload,
   templateLabelOf,
   renderChannelFields,
+  validateEmailHtml,
   renderHeader,
   renderHeaderActions,
-  className
+  className,
+  senderName,
+  categoryLabelOf
 }) {
   const { messages } = useNotificationContext();
   const label = (key) => labelsOverride?.[key] ?? messages[key] ?? key;
@@ -319,15 +950,17 @@ function NotificationSettingsWorkspace({
     ...previewPayload ? { previewPayload } : {},
     ...channels[0] ? { defaultChannel: channels[0].id } : {}
   });
-  const [cursor, setCursor] = useState2({
+  const [cursor, setCursor] = useState4({
     field: "body",
     cursorIndex: 0
   });
+  const [cursorChannel, setCursorChannel] = useState4(void 0);
+  const [activeChannel, setActiveChannel] = useState4(void 0);
   function rememberCursor(field, cursorIndex) {
     setCursor({ field, cursorIndex: cursorIndex ?? 0 });
   }
   const policies = useCategoryPolicies();
-  const [tab, setTab] = useState2("messages");
+  const [tab, setTab] = useState4("messages");
   function isEnabled(category, channel) {
     const row = (preferencesQuery.data ?? []).find(
       (preference) => preference.category === category && preference.channel === channel
@@ -344,15 +977,23 @@ function NotificationSettingsWorkspace({
     );
     updatePreferences.mutate(next);
   }
-  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") })
+  function sortMarkOf(field) {
+    if (editor.sort?.field !== field) return "\u2195";
+    return editor.sort.direction === SORT_DIRECTIONS.ASC ? "\u2191" : "\u2193";
+  }
+  function ariaSortOf(field) {
+    if (editor.sort?.field !== field) return "none";
+    return editor.sort.direction === SORT_DIRECTIONS.ASC ? "ascending" : "descending";
+  }
+  return /* @__PURE__ */ jsxs10("div", { className: `adn-settings ${className ?? ""}`, children: [
+    renderHeader ? renderHeader() : /* @__PURE__ */ jsxs10("header", { className: "adn-settings__header", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10("h1", { className: "adn-settings__title", children: label("settings.title") }),
+        /* @__PURE__ */ jsx10("p", { className: "adn-settings__description", children: label("settings.description") })
       ] }),
       renderHeaderActions?.()
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "adn-settings__tabs", role: "tablist", children: ["messages", "routing"].map((id) => /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx10("div", { className: "adn-settings__tabs", role: "tablist", children: ["messages", "routing"].map((id) => /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -364,13 +1005,13 @@ function NotificationSettingsWorkspace({
       },
       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(
+    tab === "routing" && /* @__PURE__ */ jsxs10("section", { className: "adn-settings__policies", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "adn-settings__section-title", children: label("settings.policiesTitle") }),
+      /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: label("settings.policiesHint") }),
+      categories.map((category) => /* @__PURE__ */ jsxs10("div", { className: "adn-settings__category", children: [
+        /* @__PURE__ */ jsx10("p", { className: "adn-settings__category-title", children: category.label }),
+        /* @__PURE__ */ jsx10("div", { className: "adn-settings__category-channels", children: channels.map((channel) => /* @__PURE__ */ jsxs10("label", { className: "adn-settings__toggle", children: [
+          /* @__PURE__ */ jsx10(
             "input",
             {
               type: "checkbox",
@@ -378,23 +1019,23 @@ function NotificationSettingsWorkspace({
               onChange: () => policies.toggle({ category: category.id, channel: channel.id })
             }
           ),
-          /* @__PURE__ */ jsx6("span", { className: "adn-settings__channel-label", children: channel.label })
+          /* @__PURE__ */ jsx10("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") })
+      policies.error && /* @__PURE__ */ jsx10("p", { className: "adn-settings__error", children: policies.error }),
+      /* @__PURE__ */ jsxs10("div", { className: "adn-settings__actions", children: [
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: policies.save, disabled: !policies.isDirty || policies.isSaving, children: policies.isSaving ? label("settings.saving") : label("settings.savePolicies") }),
+        policies.isDirty && /* @__PURE__ */ jsx10("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: [
-        /* @__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(
+    tab === "routing" && /* @__PURE__ */ jsxs10("section", { className: "adn-settings__channels", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "adn-settings__section-title", children: label("settings.channelsTitle") }),
+      /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: label("settings.channelsHint") }),
+      categories.map((category) => /* @__PURE__ */ jsxs10("div", { className: "adn-settings__category", children: [
+        /* @__PURE__ */ jsx10("p", { className: "adn-settings__category-label", children: category.label }),
+        category.hint && /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: category.hint }),
+        /* @__PURE__ */ jsx10("div", { className: "adn-settings__channel-grid", children: channels.map((channel) => /* @__PURE__ */ jsxs10("label", { className: "adn-settings__channel", children: [
+          /* @__PURE__ */ jsx10(
             "input",
             {
               type: "checkbox",
@@ -403,194 +1044,396 @@ function NotificationSettingsWorkspace({
               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 })
+          /* @__PURE__ */ jsxs10("span", { children: [
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__channel-label", children: channel.label }),
+            channel.hint && /* @__PURE__ */ jsx10("span", { className: "adn-settings__hint", children: channel.hint })
           ] })
         ] }, channel.id)) })
       ] }, category.id))
     ] }),
-    tab === "messages" && /* @__PURE__ */ jsxs6("div", { className: "adn-settings__templates", children: [
-      /* @__PURE__ */ jsxs6("section", { className: "adn-settings__template-list", children: [
-        /* @__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") })
+    tab === "messages" && /* @__PURE__ */ jsxs10("div", { className: editor.draft ? "adn-settings__templates" : "adn-settings__templates adn-settings__templates--browsing", children: [
+      /* @__PURE__ */ jsxs10("section", { className: "adn-settings__template-list", children: [
+        /* @__PURE__ */ jsx10("header", { className: "adn-settings__list-header", children: /* @__PURE__ */ jsxs10("div", { className: "adn-settings__list-header-row", children: [
+          /* @__PURE__ */ jsx10("h2", { className: "adn-settings__section-title", children: label("settings.templatesTitle") }),
+          /* @__PURE__ */ jsxs10("div", { className: "adn-settings__list-header-actions", children: [
+            /* @__PURE__ */ jsx10("div", { className: "adn-settings__view-switch", role: "group", "aria-label": label("settings.viewLabel"), children: [TEMPLATE_VIEWS.TABLE, TEMPLATE_VIEWS.LIST].map((view) => /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": editor.view === view,
+                className: editor.view === view ? "adn-settings__view adn-settings__view--on" : "adn-settings__view",
+                onClick: () => editor.setView(view),
+                children: label(`settings.view.${view}`)
+              },
+              view
+            )) }),
+            /* @__PURE__ */ jsxs10("button", { type: "button", className: "adn-settings__new", onClick: editor.startNew, children: [
+              /* @__PURE__ */ jsx10(Plus, { className: "adn-settings__button-icon", "aria-hidden": "true" }),
+              label("settings.newTemplate")
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs10("div", { className: "adn-settings__list-filters", children: [
+          /* @__PURE__ */ jsxs10("label", { className: "adn-settings__search", children: [
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__field-label adn-settings__visually-hidden", children: label("settings.searchLabel") }),
+            /* @__PURE__ */ jsx10(
+              "input",
+              {
+                type: "search",
+                value: editor.search,
+                placeholder: label("settings.searchPlaceholder"),
+                onChange: (event) => editor.setSearch(event.target.value)
+              }
+            )
           ] }),
-          /* @__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__ */ jsxs6("li", { className: "adn-settings__row", children: [
-          /* @__PURE__ */ jsxs6(
+          editor.categories.length > 1 && /* @__PURE__ */ jsx10("div", { className: "adn-settings__filter-row", children: editor.categories.map((category) => /* @__PURE__ */ jsx10(
             "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(
+              "aria-pressed": editor.categoryFilter.includes(category),
+              className: editor.categoryFilter.includes(category) ? "adn-settings__filter adn-settings__filter--on" : "adn-settings__filter",
+              onClick: () => editor.toggleCategoryFilter(category),
+              children: categoryLabelOf?.(category) ?? category
+            },
+            category
+          )) }),
+          /* @__PURE__ */ jsx10("div", { className: "adn-settings__filter-row", children: channels.map((channel) => /* @__PURE__ */ jsx10(
             "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") }),
-        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") })
+              "aria-pressed": editor.channelFilter.includes(channel.id),
+              className: editor.channelFilter.includes(channel.id) ? "adn-settings__filter adn-settings__filter--on" : "adn-settings__filter",
+              onClick: () => editor.toggleChannelFilter(channel.id),
+              children: channel.label
+            },
+            channel.id
+          )) }),
+          editor.hasFilters && /* @__PURE__ */ jsx10("button", { type: "button", className: "adn-settings__clear", onClick: editor.clearFilters, children: label("settings.clearFilters") })
+        ] }),
+        editor.isLoading && /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: label("list.loading") }),
+        !editor.isLoading && editor.totalCount === 0 && /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: label("settings.templatesEmpty") }),
+        !editor.isLoading && editor.totalCount > 0 && editor.templates.length === 0 && /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: label("settings.noResults") }),
+        editor.view === TEMPLATE_VIEWS.TABLE && editor.templates.length > 0 && /* `overflow-x` no contêiner: a página nunca rola na horizontal (web.md §10). */
+        /* @__PURE__ */ jsx10("div", { className: "adn-settings__table-scroll", children: /* @__PURE__ */ jsxs10("table", { className: "adn-settings__table", children: [
+          /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsx10("tr", { children: TEMPLATE_COLUMNS.map(({ labelKey, field, headerHidden }) => /* @__PURE__ */ jsx10("th", { scope: "col", "aria-sort": field ? ariaSortOf(field) : void 0, children: field ? /* @__PURE__ */ jsxs10("button", { type: "button", onClick: () => editor.toggleSort(field), children: [
+            label(labelKey),
+            /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "adn-settings__sort-mark", children: sortMarkOf(field) })
+          ] }) : /* @__PURE__ */ jsx10("span", { className: headerHidden ? "adn-settings__visually-hidden" : void 0, children: label(labelKey) }) }, labelKey)) }) }),
+          /* @__PURE__ */ jsx10("tbody", { children: editor.templates.map((template) => (
+            /* A linha inteira abre o template: na tabela so a celula da chave era clicavel,
+               e o alvo real de quem varre a lista e a linha. O botao da chave continua
+               existindo — e ele que recebe o foco pelo teclado. */
+            /* @__PURE__ */ jsxs10(
+              "tr",
+              {
+                onClick: () => editor.select(template),
+                className: editor.selected?.id === template.id ? "adn-settings__table-row adn-settings__table-row--active" : "adn-settings__table-row",
+                children: [
+                  /* @__PURE__ */ jsx10("td", { children: /* @__PURE__ */ jsx10(
+                    "button",
+                    {
+                      type: "button",
+                      className: "adn-settings__table-key",
+                      onClick: () => editor.select(template),
+                      children: templateLabelOf?.(template) ?? template.key
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx10("td", { className: "adn-settings__table-body", children: template.body }),
+                  /* @__PURE__ */ jsx10("td", { children: /* @__PURE__ */ jsx10("span", { className: `adn-settings__badge adn-settings__badge--${template.channel}`, children: label(`channel.${template.channel}`) }) }),
+                  /* @__PURE__ */ jsxs10("td", { className: "adn-settings__version", children: [
+                    label("settings.version"),
+                    template.version
+                  ] }),
+                  /* @__PURE__ */ jsx10("td", { children: /* @__PURE__ */ jsxs10(
+                    "button",
+                    {
+                      type: "button",
+                      className: "adn-settings__remove",
+                      "aria-label": `${label("settings.remove")} ${template.key}`,
+                      disabled: editor.isDeactivating,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        editor.deactivate(template.id);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx10(Trash22, { className: "adn-settings__button-icon", "aria-hidden": "true" }),
+                        label("settings.remove")
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              template.id
+            )
+          )) })
+        ] }) }),
+        editor.view === TEMPLATE_VIEWS.LIST && editor.groups.map((group) => /* @__PURE__ */ jsxs10("div", { className: "adn-settings__group", children: [
+          /* @__PURE__ */ jsxs10("p", { className: "adn-settings__group-title", children: [
+            categoryLabelOf?.(group.category) ?? group.category,
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__group-count", children: group.templates.length })
           ] }),
-          !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 })
-                }
-              )
+          /* @__PURE__ */ jsx10("ul", { children: group.templates.map((template) => /* @__PURE__ */ jsxs10("li", { className: "adn-settings__row", children: [
+            /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                type: "button",
+                onClick: () => editor.select(template),
+                className: editor.selected?.id === template.id ? "adn-settings__row--active" : void 0,
+                children: [
+                  /* @__PURE__ */ jsxs10("span", { className: "adn-settings__row-main", children: [
+                    /* @__PURE__ */ jsx10("span", { className: "adn-settings__row-title", children: templateLabelOf?.(template) ?? template.key }),
+                    /* @__PURE__ */ jsx10("span", { className: "adn-settings__row-body", children: template.body })
+                  ] }),
+                  /* @__PURE__ */ jsx10("span", { className: `adn-settings__badge adn-settings__badge--${template.channel}`, children: label(`channel.${template.channel}`) }),
+                  /* @__PURE__ */ jsxs10("span", { className: "adn-settings__version", children: [
+                    label("settings.version"),
+                    template.version
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                type: "button",
+                className: "adn-settings__remove",
+                "aria-label": `${label("settings.remove")} ${template.key}`,
+                disabled: editor.isDeactivating,
+                onClick: () => editor.deactivate(template.id),
+                children: [
+                  /* @__PURE__ */ jsx10(Trash22, { className: "adn-settings__button-icon", "aria-hidden": "true" }),
+                  label("settings.remove")
+                ]
+              }
+            )
+          ] }, template.id)) })
+        ] }, group.category))
+      ] }),
+      editor.draft && /* @__PURE__ */ jsx10("section", { className: "adn-settings__editor", children: /* @__PURE__ */ jsxs10(Fragment2, { children: [
+        /* @__PURE__ */ jsxs10("header", { className: "adn-settings__editor-header", children: [
+          /* @__PURE__ */ jsxs10("div", { children: [
+            /* @__PURE__ */ jsx10("h2", { className: "adn-settings__section-title", children: editor.selected ? templateLabelOf?.(editor.selected) ?? editor.selected.key : "" }),
+            /* @__PURE__ */ jsxs10("p", { className: "adn-settings__hint", children: [
+              editor.draft.channels.join(" \xB7 "),
+              " \xB7 ",
+              editor.draft.locale,
+              " \xB7 ",
+              label("settings.version"),
+              editor.selected?.version
             ] })
           ] }),
-          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",
+          /* @__PURE__ */ jsxs10("button", { type: "button", className: "adn-settings__close", onClick: editor.clear, children: [
+            /* @__PURE__ */ jsx10(X, { className: "adn-settings__button-icon", "aria-hidden": "true" }),
+            label("settings.close")
+          ] })
+        ] }),
+        !editor.isIdentityLocked && /* @__PURE__ */ jsxs10("div", { className: "adn-settings__identity", children: [
+          /* @__PURE__ */ jsxs10("label", { className: "adn-settings__field", children: [
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__field-label", children: label("settings.key") }),
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__hint", children: label("settings.keyHint") }),
+            /* @__PURE__ */ jsx10("input", { value: editor.draft.key, onChange: (event) => editor.update({ key: event.target.value }) })
+          ] }),
+          /* @__PURE__ */ jsxs10("fieldset", { className: "adn-settings__field adn-settings__field--channels", children: [
+            /* @__PURE__ */ jsx10("legend", { className: "adn-settings__field-label", children: label("settings.channel") }),
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__hint", children: label("settings.channelHint") }),
+            /* @__PURE__ */ jsx10("div", { className: "adn-settings__channel-picker", children: channels.map((channel) => /* @__PURE__ */ jsxs10("label", { className: "adn-settings__channel-chip", children: [
+              /* @__PURE__ */ jsx10(
+                "input",
                 {
-                  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 })
-                  ]
+                  type: "checkbox",
+                  checked: editor.draft?.channels.includes(channel.id) ?? false,
+                  onChange: () => {
+                    editor.toggleChannel(channel.id);
+                    if (!editor.draft?.channels.includes(channel.id)) setActiveChannel(channel.id);
+                  }
                 }
-              ) }, variable.name);
-            }) })
-          ] }),
-          editor.variableDiff.unknown.length > 0 && /* @__PURE__ */ jsxs6("p", { className: "adn-settings__error", children: [
-            label("settings.unknownVariables"),
-            " ",
-            editor.variableDiff.unknown.join(", ")
+              ),
+              /* @__PURE__ */ jsx10("span", { children: channel.label })
+            ] }, channel.id)) })
           ] }),
-          /* @__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(
+          /* @__PURE__ */ jsxs10("label", { className: "adn-settings__field", children: [
+            /* @__PURE__ */ jsx10("span", { className: "adn-settings__field-label", children: label("settings.locale") }),
+            /* @__PURE__ */ jsx10(
               "input",
               {
-                value: editor.draft.subject,
-                onChange: (event) => editor.update({ subject: event.target.value }),
-                onSelect: (event) => rememberCursor("subject", event.currentTarget.selectionStart)
+                value: editor.draft.locale,
+                onChange: (event) => editor.update({ locale: 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",
+          ] })
+        ] }),
+        editor.variables.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "adn-settings__variables", children: [
+          /* @__PURE__ */ jsx10("p", { className: "adn-settings__field-label", children: label("settings.variablesTitle") }),
+          /* @__PURE__ */ jsx10("p", { className: "adn-settings__hint", children: label("settings.variablesHint") }),
+          /* @__PURE__ */ jsx10("ul", { children: editor.variables.map((variable) => {
+            const used = editor.variableDiff.used.includes(variable.name);
+            const missing = editor.variableDiff.missingRequired.includes(variable.name);
+            return /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsxs10(
+              "button",
               {
-                rows: 4,
-                value: editor.draft.body,
-                onChange: (event) => editor.update({ body: event.target.value }),
-                onSelect: (event) => rememberCursor("body", event.currentTarget.selectionStart)
+                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,
+                  channel: cursorChannel ?? editor.draft?.channels[0] ?? ""
+                }),
+                children: [
+                  /* @__PURE__ */ jsx10("span", { className: "adn-settings__variable-name", children: `{{${variable.name}}}` }),
+                  /* @__PURE__ */ jsx10("span", { className: "adn-settings__hint", children: variable.example })
+                ]
               }
-            )
-          ] }),
-          renderChannelFields?.({
-            channel: editor.draft.channel,
-            value: editor.draft.whatsappTemplateName,
-            onChange: (value) => editor.update({ whatsappTemplateName: value })
-          }),
-          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("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.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") })
-          ] })
+            ) }, variable.name);
+          }) })
+        ] }),
+        editor.variableDiff.unknown.length > 0 && /* @__PURE__ */ jsxs10("p", { className: "adn-settings__error", children: [
+          label("settings.unknownVariables"),
+          " ",
+          editor.variableDiff.unknown.join(", ")
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "adn-settings__channel-tabs", role: "tablist", children: channels.filter((channel) => editor.draft?.channels.includes(channel.id)).map((channel) => {
+          const vazio = (editor.draft?.byChannel[channel.id]?.body ?? "").length === 0;
+          const ativo = (activeChannel ?? editor.draft?.channels[0]) === channel.id;
+          return /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": ativo,
+              className: ativo ? "adn-settings__tab adn-settings__tab--active" : "adn-settings__tab",
+              onClick: () => setActiveChannel(channel.id),
+              children: [
+                channel.label,
+                vazio && /* @__PURE__ */ jsx10("span", { className: "adn-settings__tab-dot", "aria-hidden": "true" })
+              ]
+            },
+            channel.id
+          );
+        }) }),
+        channels.filter((channel) => editor.draft?.channels.includes(channel.id)).filter((channel) => (activeChannel ?? editor.draft?.channels[0]) === channel.id).map((channel) => {
+          const content = editor.draft?.byChannel[channel.id];
+          const frames = editor.previews.filter((frame) => frame.channel === channel.id);
+          return /* @__PURE__ */ jsxs10("section", { className: "adn-settings__channel-block", children: [
+            /* @__PURE__ */ jsxs10("header", { className: "adn-settings__channel-block-header", children: [
+              /* @__PURE__ */ jsx10("h3", { className: "adn-settings__preview-channel", children: channel.label }),
+              channel.hint && /* @__PURE__ */ jsx10("span", { className: "adn-settings__hint", children: channel.hint })
+            ] }),
+            /* @__PURE__ */ jsxs10("label", { className: "adn-settings__field", children: [
+              /* @__PURE__ */ jsx10("span", { className: "adn-settings__field-label", children: label("settings.subject") }),
+              /* @__PURE__ */ jsx10("span", { className: "adn-settings__hint", children: label("settings.subjectHint") }),
+              /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  value: content?.subject ?? "",
+                  onChange: (event) => editor.updateChannel(channel.id, { subject: event.target.value }),
+                  onSelect: (event) => rememberCursor("subject", event.currentTarget.selectionStart),
+                  onFocus: () => setCursorChannel(channel.id)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs10("label", { className: "adn-settings__field", children: [
+              /* @__PURE__ */ jsx10("span", { className: "adn-settings__field-label", children: label("settings.body") }),
+              channel.id === "email" && isHtmlBody(content?.body ?? "") ? /* @__PURE__ */ jsx10(
+                HtmlCodeField,
+                {
+                  value: content?.body ?? "",
+                  onChange: (next) => editor.updateChannel(channel.id, { body: next }),
+                  onSelect: (cursorIndex) => rememberCursor("body", cursorIndex),
+                  onFocus: () => setCursorChannel(channel.id),
+                  ...validateEmailHtml ? { problems: validateEmailHtml(content?.body ?? "").problems } : {}
+                }
+              ) : /* @__PURE__ */ jsx10(
+                MessageBodyField,
+                {
+                  value: content?.body ?? "",
+                  onChange: (next) => editor.updateChannel(channel.id, { body: next }),
+                  onSelect: (cursorIndex) => rememberCursor("body", cursorIndex),
+                  onFocus: () => setCursorChannel(channel.id),
+                  labelOf: label
+                }
+              )
+            ] }),
+            renderChannelFields?.({
+              channel: channel.id,
+              value: content?.whatsappTemplateName ?? "",
+              onChange: (value) => editor.updateChannel(channel.id, { whatsappTemplateName: value })
+            }),
+            frames.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "adn-settings__previews", children: [
+              /* @__PURE__ */ jsx10("p", { className: "adn-settings__preview-title", children: label("settings.previewTitle") }),
+              /* @__PURE__ */ jsx10("div", { className: "adn-settings__preview-frames", children: frames.map((frame) => /* @__PURE__ */ jsxs10("figure", { className: "adn-settings__preview", children: [
+                /* @__PURE__ */ jsxs10("figcaption", { className: "adn-settings__hint", children: [
+                  label(`settings.viewport.${frame.viewport}`),
+                  " \xB7 ",
+                  frame.width,
+                  "px"
+                ] }),
+                /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    className: "adn-settings__preview-frame",
+                    style: { "--adn-preview-width": `${frame.width}px` },
+                    children: /* @__PURE__ */ jsx10(
+                      TemplatePreview,
+                      {
+                        channel: frame.channel,
+                        viewport: frame.viewport,
+                        rendered: frame.rendered,
+                        ...frame.channel === "email" && isHtmlBody(content?.body ?? "") ? { emailHtml: content?.body ?? "" } : {},
+                        labels: {
+                          to: label("preview.to"),
+                          now: label("preview.now"),
+                          mailbox: label("preview.mailbox"),
+                          time: label("preview.time"),
+                          address: label("preview.address"),
+                          counter: label("preview.counter"),
+                          folder: label("preview.folder"),
+                          senderAddress: label("preview.senderAddress"),
+                          unsubscribe: label("preview.unsubscribe"),
+                          online: label("preview.online"),
+                          today: label("preview.today"),
+                          compose: label("preview.compose"),
+                          reply: label("preview.reply"),
+                          forward: label("preview.forward"),
+                          replyAll: label("preview.replyAll")
+                        },
+                        ...senderName ? { senderName } : {}
+                      }
+                    )
+                  }
+                ),
+                frame.rendered.constraints.filter((constraint) => constraint.exceeded).map((constraint) => /* @__PURE__ */ jsxs10("p", { className: "adn-settings__preview-warning", children: [
+                  label(`settings.constraint.${constraint.field}`),
+                  " ",
+                  constraint.actual,
+                  "/",
+                  constraint.limit
+                ] }, constraint.field))
+              ] }, `${frame.channel}:${frame.viewport}`)) })
+            ] })
+          ] }, channel.id);
+        }),
+        editor.error && /* @__PURE__ */ jsx10("p", { className: "adn-settings__error", children: editor.error }),
+        /* @__PURE__ */ jsxs10("div", { className: "adn-settings__actions", children: [
+          /* @__PURE__ */ jsx10("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__ */ jsx10("span", { className: "adn-settings__hint", children: label("settings.unchanged") })
         ] })
-      ] })
+      ] }) })
     ] })
   ] });
 }
 export {
   DEFAULT_LOCALE,
+  HTML_TOKEN,
+  HtmlCodeField,
+  MESSAGE_EMOJI,
+  MESSAGE_FORMAT,
+  MESSAGE_FORMAT_MARKS,
+  MessageBodyField,
+  MessageToolbar,
   NOTIFICATION_QUERY_KEYS,
   NotificationBell,
   NotificationItem,
@@ -599,10 +1442,17 @@ export {
   NotificationSettingsWorkspace,
   NotificationsWorkspace,
   PreferencesPanel,
+  SORT_DIRECTIONS,
+  TEMPLATE_COLUMNS,
+  TEMPLATE_SORT_FIELDS,
+  TEMPLATE_VIEWS,
+  applyMark,
   flattenNotificationPages,
   formatNotificationTime,
   formatNotificationTimestamp,
+  insertAt,
   resolveMessages,
+  tokenizeHtml,
   useCategoryPolicies,
   useDeactivateTemplate,
   useDeleteNotification,