@fonderie/react-courier-admin-screens 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -46,8 +46,16 @@ function TemplateEditorScreen({
 }) {
   const t = (0, import_react.useMemo)(() => (0, import_client.createAdminT)(uiLocale), [uiLocale]);
   const { template, isLoading, error, refresh } = (0, import_react_courier_admin.useTemplate)(client, type, locale);
-  const { templates, saveTemplate, removeTemplate } = (0, import_react_courier_admin.useTemplates)(client);
-  const siblings = (0, import_client.groupTemplatesByType)(templates).find((g) => g.type === type)?.entries ?? [];
+  const notSaved = error?.status === 404;
+  const { builtIn, isLoading: builtInLoading } = (0, import_react_courier_admin.useBuiltInTemplate)(client, type, locale);
+  const { catalog, refresh: refreshCatalog } = (0, import_react_courier_admin.useTemplateCatalog)(client);
+  const defaultLocale = catalog?.defaultLocale ?? "en-US";
+  const email = catalog?.emails.find((e) => e.type === type);
+  const languages = email ? (0, import_client.templateLanguages)(email, defaultLocale) : [];
+  const source = template ?? (notSaved ? builtIn : null);
+  const { resolution, resolve } = (0, import_react_courier_admin.useTemplateResolution)(client);
+  const [probe, setProbe] = (0, import_react.useState)("");
+  const { saveTemplate, removeTemplate } = (0, import_react_courier_admin.useTemplates)(client);
   const [isDeleting, setIsDeleting] = (0, import_react.useState)(false);
   const { revisions, rollback } = (0, import_react_courier_admin.useTemplateRevisions)(client, type, locale);
   const [isSaving, setIsSaving] = (0, import_react.useState)(false);
@@ -60,12 +68,15 @@ function TemplateEditorScreen({
   const [sampleJson, setSampleJson] = (0, import_react.useState)("{}");
   const [sampleError, setSampleError] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
-    if (!template) return;
-    setSubject(template.subject ?? "");
-    setHtml(template.html ?? "");
-    setText(template.text);
-    setActive(template.active);
-  }, [template]);
+    if (!source) return;
+    setSubject(source.subject ?? "");
+    setHtml(source.html ?? "");
+    setText(source.text);
+    setActive(template ? template.active : true);
+  }, [source, template]);
+  (0, import_react.useEffect)(() => {
+    void resolve(type, locale ?? defaultLocale);
+  }, [resolve, type, locale, defaultLocale]);
   const run = (0, import_react.useCallback)(async () => {
     let data = {};
     try {
@@ -93,13 +104,15 @@ function TemplateEditorScreen({
   }, [renderPreview, type, text, subject, html, locale, sampleJson, t]);
   const runRef = (0, import_react.useRef)(run);
   runRef.current = run;
-  const loadedType = template ? `${type}:${locale ?? ""}` : null;
+  const loadedType = source ? `${type}:${locale ?? ""}` : null;
   (0, import_react.useEffect)(() => {
     if (!loadedType) return;
     const timer = setTimeout(() => void runRef.current(), PREVIEW_DEBOUNCE_MS);
     return () => clearTimeout(timer);
   }, [loadedType, subject, html, text, sampleJson]);
-  const dirty = !!template && (subject !== (template.subject ?? "") || html !== (template.html ?? "") || text !== template.text || active !== template.active);
+  const dirty = notSaved && !!builtIn || !!template && (subject !== (template.subject ?? "") || html !== (template.html ?? "") || text !== template.text || active !== template.active);
+  const protectedRow = !locale && (email?.system ?? system);
+  const shipsHere = locale ? languages.some((l) => l.locale === locale && l.builtIn) : !!email?.builtIn.default;
   const handleSubmit = async (event) => {
     event.preventDefault();
     setIsSaving(true);
@@ -110,7 +123,7 @@ function TemplateEditorScreen({
       if (html) input.html = html;
       if (template?.version !== void 0) input.ifVersion = template.version;
       await saveTemplate(type, input, locale);
-      await refresh();
+      await Promise.all([refresh(), refreshCatalog()]);
       onSaved?.();
     } catch (err) {
       setSaveError(err);
@@ -118,9 +131,32 @@ function TemplateEditorScreen({
       setIsSaving(false);
     }
   };
-  const switchTo = (entry) => {
-    if (dirty && !window.confirm(t("templates.editor.discardChanges"))) return;
-    onSelectLocale?.(entry);
+  const switchTo = (next) => {
+    if (dirty && !(notSaved && !!builtIn) && !window.confirm(t("templates.editor.discardChanges")))
+      return;
+    onSelectLocale?.(next);
+  };
+  const handleReset = async () => {
+    if (!builtIn || !window.confirm(t("templates.editor.confirmReset", { locale: locale ?? defaultLocale })))
+      return;
+    setIsDeleting(true);
+    setSaveError(null);
+    try {
+      if (locale) {
+        await removeTemplate(type, locale);
+      } else {
+        const input = { text: builtIn.text, active };
+        if (builtIn.subject) input.subject = builtIn.subject;
+        if (builtIn.html) input.html = builtIn.html;
+        if (template?.version !== void 0) input.ifVersion = template.version;
+        await saveTemplate(type, input, null);
+      }
+      await Promise.all([refresh(), refreshCatalog()]);
+    } catch (err) {
+      setSaveError(err);
+    } finally {
+      setIsDeleting(false);
+    }
   };
   const handleDelete = async () => {
     const message = locale ? t("templates.editor.confirmDeleteLocale", { type, locale }) : t("templates.editor.confirmDelete", { type });
@@ -136,8 +172,9 @@ function TemplateEditorScreen({
       setIsDeleting(false);
     }
   };
-  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.status, children: t("templates.editor.loading") });
-  if (error)
+  if (isLoading || notSaved && builtInLoading)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.status, children: t("templates.editor.loading") });
+  if (error && !(notSaved && builtIn))
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.error, role: "alert", children: error.explanation });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { style: styles.title, children: type }),
@@ -145,19 +182,23 @@ function TemplateEditorScreen({
       onSelectLocale ? (
         // Each tab opens another stored row, so this is navigation, not an
         // ARIA tablist: plain buttons, the open one marked aria-current.
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": t("templates.editor.locales"), style: styles.tabs, children: siblings.map((entry) => {
-          const selected = entry.locale === (locale ?? null);
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": t("templates.editor.locales"), style: styles.tabs, children: languages.map((l) => {
+          const selected = l.locale === (locale ?? null);
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
               type: "button",
               "aria-current": selected ? "true" : void 0,
-              onClick: () => selected ? void 0 : switchTo(entry),
-              style: selected ? styles.tabSelected : entry.active ? styles.tab : styles.tabInactive,
-              title: entry.active ? void 0 : t("common.status.inactive"),
-              children: entry.locale ?? t("templates.defaultChip")
+              onClick: () => selected ? void 0 : switchTo({ type, locale: l.locale, system: !!email?.system }),
+              style: {
+                ...selected ? styles.tabSelected : styles.tab,
+                ...l.saved ? {} : styles.tabBuiltIn,
+                ...l.active ? {} : styles.tabInactive
+              },
+              title: l.active ? void 0 : t("common.status.inactive"),
+              children: l.label
             },
-            entry.locale ?? ""
+            l.label
           );
         }) })
       ) : null,
@@ -168,17 +209,21 @@ function TemplateEditorScreen({
           style: { ...styles.rollbackButton, marginLeft: "auto" },
           onClick: () => {
             if (dirty && !window.confirm(t("templates.editor.discardChanges"))) return;
-            onAddLocale(type, { locales: (0, import_client.missingTemplateLocales)(templates, type) });
+            onAddLocale(type, {
+              locales: catalog ? (0, import_client.suggestTemplateLocales)(catalog, type) : [],
+              defaultLocale
+            });
           },
           children: t("templates.editor.addLocale")
         }
       ) : null
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: styles.meta, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: locale ?? t("templates.defaultLocale") }),
-      " \xB7 v",
-      template?.version ?? 1,
-      system ? ` \xB7 ${t("templates.editor.builtInNote")}` : ""
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: locale ?? defaultLocale }),
+      template ? ` \xB7 v${template.version}` : "",
+      template && protectedRow ? ` \xB7 ${t("templates.editor.builtInNote")}` : "",
+      !template && builtIn ? ` \xB7 ${t("templates.editor.builtInCopy")}` : "",
+      resolution && resolution.chain.length > 1 && resolution.requested === (locale ?? defaultLocale) ? ` \xB7 ${t("templates.editor.chain", { chain: [...resolution.chain, defaultLocale].join(" \u2192 ") })}` : ""
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.split, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.column, children: [
@@ -254,7 +299,16 @@ function TemplateEditorScreen({
               }
             ),
             !dirty && !isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.meta, children: t("templates.editor.noChanges") }),
-            !system ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            template && shipsHere && builtIn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: isDeleting,
+                onClick: () => void handleReset(),
+                style: { ...styles.rollbackButton, height: 36, marginLeft: "auto" },
+                children: t("templates.editor.resetToBuiltIn")
+              }
+            ) : template && !protectedRow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 type: "button",
@@ -309,6 +363,43 @@ function TemplateEditorScreen({
         ) : preview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { style: styles.previewText, children: preview.text }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.meta, children: t("templates.editor.nothingRendered") })
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.revisions, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: styles.subtitle, children: t("templates.editor.whoReceives") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (probe.trim()) void resolve(type, probe.trim());
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                "aria-label": t("templates.editor.whoReceives"),
+                style: { ...styles.input, width: 200 },
+                value: probe,
+                placeholder: t("templates.editor.whoPlaceholder"),
+                spellCheck: false,
+                onChange: (event) => setProbe(event.target.value)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", style: { ...styles.rollbackButton, height: 36 }, children: t("templates.editor.check") }),
+            resolution && probe.trim() ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { ...styles.meta, marginBottom: 0 }, role: "status", children: [
+              t("templates.editor.receives", {
+                requested: resolution.requested,
+                sent: resolution.sent
+              }),
+              " ",
+              resolution.source === "saved" ? t("templates.editor.sourceSaved") : t("templates.editor.sourceBuiltIn"),
+              " ",
+              resolution.chain.length > 0 ? `(${[...resolution.chain, resolution.defaultLocale].join(" \u2192 ")})` : ""
+            ] }) : null
+          ]
+        }
+      )
+    ] }),
     revisions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.revisions, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: styles.subtitle, children: t("templates.editor.history") }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: styles.list, children: revisions.map((rev) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: styles.row, children: [
@@ -365,7 +456,9 @@ var styles = {
     borderBottomColor: "var(--fonderie-text,#171717)",
     cursor: "default"
   },
-  tabInactive: { ...tab, opacity: 0.55, textDecoration: "line-through" },
+  tabInactive: { opacity: 0.55, textDecoration: "line-through" },
+  // Fonderie's built-in copy, not saved by the app — the list's dashed chip.
+  tabBuiltIn: { fontStyle: "italic" },
   // Two columns, always: the editor on the left, the rendered result on the
   // right. Stacking the preview under a long form hid it below the fold.
   split: {
@@ -543,8 +636,14 @@ function TemplateListScreen({
   locale
 }) {
   const t = (0, import_client2.createAdminT)(locale);
-  const { templates, isLoading, error } = (0, import_react_courier_admin2.useTemplates)(client);
-  const groups = (0, import_client2.groupTemplatesByType)(templates);
+  const { catalog, isLoading, error } = (0, import_react_courier_admin2.useTemplateCatalog)(client);
+  const emails = catalog?.emails ?? [];
+  const defaultLocale = catalog?.defaultLocale ?? "en-US";
+  const chipStyle = (l) => ({
+    ...chip,
+    ...l.saved ? {} : chipBuiltIn,
+    ...l.active ? {} : chipOff
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
@@ -558,8 +657,12 @@ function TemplateListScreen({
               type: "button",
               onClick: () => onCreateTemplate({
                 locales: [
-                  ...new Set(templates.map((row) => row.locale).filter((l) => !!l))
-                ]
+                  ...new Set(
+                    emails.flatMap(
+                      (e) => (0, import_client2.templateLanguages)(e, defaultLocale).filter((l) => l.locale !== null).map((l) => l.label)
+                    )
+                  )
+                ].sort()
               }),
               style: styles2.newButton,
               children: t("templates.list.newTemplate")
@@ -569,39 +672,47 @@ function TemplateListScreen({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.hint, children: t("templates.list.hint") }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.status, children: t("templates.list.loading") }) : error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { style: styles2.list, children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { style: styles2.row, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: () => onSelectTemplate?.(group.primary),
-          style: styles2.rowButton,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.type, children: group.type }),
-            group.system ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.builtIn, children: t("templates.builtInBadge") }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: group.primary.active ? styles2.active : styles2.inactive, children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.status, children: t("templates.list.loading") }) : error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { style: styles2.list, children: emails.map((email) => {
+        const languages = (0, import_client2.templateLanguages)(email, defaultLocale);
+        const primary = languages.find((l) => l.locale === null) ?? languages[0];
+        const open = (l) => onSelectTemplate?.({
+          type: email.type,
+          locale: l?.locale ?? null,
+          system: email.system
+        });
+        return (
+          // Columns, not a flex row: the language chips line up down the
+          // list whatever the email name or badge.
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { style: styles2.row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { type: "button", onClick: () => open(primary), style: styles2.rowButton, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.type, children: email.type }),
+              email.system ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.builtIn, children: t("templates.builtInBadge") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {})
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.chips, children: languages.map((l) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => open(l),
+                style: chipStyle(l),
+                "aria-label": t("templates.list.openLocale", {
+                  type: email.type,
+                  locale: l.label
+                }),
+                title: l.active ? void 0 : t("common.status.inactive"),
+                children: l.label
+              },
+              l.label
+            )) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: primary?.active === false ? styles2.inactive : styles2.active, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.dot }),
-              group.primary.active ? t("common.status.active") : t("common.status.inactive")
+              primary?.active === false ? t("common.status.inactive") : t("common.status.active")
             ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.chips, children: group.entries.map((entry) => {
-        const name = entry.locale ?? t("templates.defaultChip");
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => onSelectTemplate?.(entry),
-            style: entry.active ? styles2.chip : styles2.chipInactive,
-            "aria-label": t("templates.list.openLocale", { type: group.type, locale: name }),
-            title: entry.active ? void 0 : t("common.status.inactive"),
-            children: name
-          },
-          entry.locale ?? ""
+          ] }, email.type)
         );
-      }) })
-    ] }, group.type)) })
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.legend, children: t("templates.list.legend") })
+    ] })
   ] });
 }
 var pill = {
@@ -615,6 +726,7 @@ var pill = {
   lineHeight: 1.5,
   minWidth: 64
 };
+var MONO = 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)';
 var chip = {
   height: 24,
   boxSizing: "border-box",
@@ -624,9 +736,15 @@ var chip = {
   background: "var(--fonderie-surface,#fff)",
   color: "var(--fonderie-text,#171717)",
   fontSize: 12,
-  fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  fontFamily: MONO,
   cursor: "pointer"
 };
+var chipBuiltIn = {
+  borderStyle: "dashed",
+  background: "transparent",
+  color: "var(--fonderie-text-muted,#5c5c5c)"
+};
+var chipOff = { opacity: 0.5, textDecoration: "line-through" };
 var styles2 = {
   container: { padding: "32px 40px 64px", maxWidth: 1160, boxSizing: "border-box" },
   title: {
@@ -637,6 +755,7 @@ var styles2 = {
     lineHeight: 1.25
   },
   hint: { fontSize: 13.5, color: "var(--fonderie-text-muted,#5c5c5c)", margin: "4px 0 24px" },
+  legend: { fontSize: 12.5, color: "var(--fonderie-text-muted,#5c5c5c)", margin: "10px 2px 0" },
   status: { padding: "24px 0", color: "var(--fonderie-text-muted,#5c5c5c)", fontSize: 13.5 },
   error: { color: "var(--fonderie-danger,#e00)", marginBottom: 12, fontSize: 14 },
   list: {
@@ -649,20 +768,20 @@ var styles2 = {
     overflow: "hidden",
     boxShadow: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
   },
+  // name + badge | languages | status — fixed tracks so every column aligns.
   row: {
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) minmax(180px, 280px) 88px",
     alignItems: "center",
-    gap: 8,
+    gap: 16,
     paddingRight: 16,
     borderBottom: "1px solid var(--fonderie-border-light,#f5f5f5)"
   },
   rowButton: {
-    flex: 1,
     minWidth: 0,
     display: "flex",
-    justifyContent: "space-between",
     alignItems: "center",
-    gap: 16,
+    gap: 12,
     padding: "13px 16px",
     background: "none",
     border: "none",
@@ -674,12 +793,12 @@ var styles2 = {
   type: {
     fontSize: 13,
     fontWeight: 600,
-    flex: 1,
-    fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)'
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontFamily: MONO
   },
-  chips: { display: "flex", flexWrap: "wrap", justifyContent: "flex-end", gap: 6 },
-  chip,
-  chipInactive: { ...chip, opacity: 0.5, textDecoration: "line-through" },
+  chips: { display: "flex", flexWrap: "wrap", gap: 6 },
   dot: { width: 6, height: 6, borderRadius: 999, background: "currentColor" },
   builtIn: {
     fontSize: 11,
@@ -687,7 +806,8 @@ var styles2 = {
     padding: "1px 7px",
     borderRadius: 999,
     border: "1px solid var(--fonderie-border,#e0e0e0)",
-    color: "var(--fonderie-text-muted,#5c5c5c)"
+    color: "var(--fonderie-text-muted,#5c5c5c)",
+    flexShrink: 0
   },
   newButton: {
     display: "inline-flex",
@@ -729,6 +849,7 @@ function TemplateCreateScreen({
   client,
   type,
   locales = [],
+  defaultLocale,
   onCreated,
   locale
 }) {
@@ -748,7 +869,7 @@ function TemplateCreateScreen({
   const variables = (0, import_react2.useRef)([]);
   (0, import_react2.useEffect)(() => {
     if (!type) return;
-    client.getTemplate(type, null).then(({ result }) => {
+    client.getTemplate(type, null).catch(() => client.getBuiltInTemplate(type, null)).then(({ result }) => {
       setSubject(result.subject ?? "");
       setHtml(result.html ?? "");
       setText(result.text);
@@ -791,6 +912,9 @@ function TemplateCreateScreen({
     if (!TYPE_RE.test(t)) return setError(tr("templates.create.errorType"));
     if (addingLocale && !l) return setError(tr("templates.create.errorLocaleRequired"));
     if (l && !LOCALE_RE.test(l)) return setError(tr("templates.create.errorLocale"));
+    if (l && defaultLocale && l.toLowerCase() === defaultLocale.toLowerCase()) {
+      return setError(tr("templates.create.errorDefaultLocale", { locale: defaultLocale }));
+    }
     if (!text.trim()) return setError(tr("templates.create.errorText"));
     setBusy(true);
     try {
@@ -908,7 +1032,7 @@ function TemplateCreateScreen({
     ] })
   ] });
 }
-var MONO = 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)';
+var MONO2 = 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)';
 var styles3 = {
   container: { padding: "8px 40px 64px", maxWidth: 1400, boxSizing: "border-box" },
   // The editor's layout: the form on the left, the render pinned on the right.
@@ -941,7 +1065,7 @@ var styles3 = {
     borderRadius: 8,
     padding: 12,
     fontSize: 13,
-    fontFamily: MONO
+    fontFamily: MONO2
   },
   // The console's warning token (the shell's amber), readable in both themes.
   notice: {
@@ -994,7 +1118,7 @@ var styles3 = {
     lineHeight: 1.55,
     background: "var(--fonderie-surface,#fff)",
     color: "var(--fonderie-text,#171717)",
-    fontFamily: MONO
+    fontFamily: MONO2
   },
   error: {
     color: "var(--fonderie-danger,#e00)",