@fonderie/react-courier-admin-screens 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -20,12 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  TemplateCreateScreen: () => TemplateCreateScreen,
   TemplateEditorScreen: () => TemplateEditorScreen,
   TemplateListScreen: () => TemplateListScreen
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/screens/TemplateEditorScreen.tsx
+var import_client = require("@fonderie/client");
 var import_react_courier_admin = require("@fonderie/react-courier-admin");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -35,10 +37,16 @@ function TemplateEditorScreen({
   client,
   type,
   locale,
-  onSaved
+  onSaved,
+  system = false,
+  onDeleted,
+  onAddLocale,
+  uiLocale
 }) {
+  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 { saveTemplate } = (0, import_react_courier_admin.useTemplates)(client);
+  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);
   const [saveError, setSaveError] = (0, import_react.useState)(null);
@@ -61,13 +69,13 @@ function TemplateEditorScreen({
     try {
       const parsed = JSON.parse(sampleJson || "{}");
       if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-        setSampleError("Sample data must be a JSON object.");
+        setSampleError(t("templates.editor.sampleNotObject"));
         return;
       }
       data = parsed;
       setSampleError(null);
     } catch {
-      setSampleError("Sample data is not valid JSON.");
+      setSampleError(t("templates.editor.sampleInvalid"));
       return;
     }
     const result = await renderPreview(
@@ -80,7 +88,7 @@ function TemplateEditorScreen({
       const seeded = { ...data, ...Object.fromEntries(missing.map((v) => [v, v])) };
       setSampleJson(JSON.stringify(seeded, null, 2));
     }
-  }, [renderPreview, type, text, subject, html, locale, sampleJson]);
+  }, [renderPreview, type, text, subject, html, locale, sampleJson, t]);
   const runRef = (0, import_react.useRef)(run);
   runRef.current = run;
   const loadedType = template ? `${type}:${locale ?? ""}` : null;
@@ -108,20 +116,46 @@ function TemplateEditorScreen({
       setIsSaving(false);
     }
   };
-  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.status, children: "Loading template\u2026" });
+  const handleDelete = async () => {
+    const message = locale ? t("templates.editor.confirmDeleteLocale", { type, locale }) : t("templates.editor.confirmDelete", { type });
+    if (!window.confirm(message)) return;
+    setIsDeleting(true);
+    setSaveError(null);
+    try {
+      await removeTemplate(type, locale);
+      onDeleted?.();
+    } catch (err) {
+      setSaveError(err);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.status, children: t("templates.editor.loading") });
   if (error)
     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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { style: styles.title, children: type }),
+      onAddLocale && !locale ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.rollbackButton, marginLeft: "auto" },
+          onClick: () => onAddLocale(type),
+          children: t("templates.editor.addLocale")
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: styles.meta, children: [
-      locale ?? "base",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: locale ?? t("templates.defaultLocale") }),
       " \xB7 v",
-      template?.version ?? 1
+      template?.version ?? 1,
+      system ? ` \xB7 ${t("templates.editor.builtInNote")}` : ""
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.split, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.column, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { style: styles.form, onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-subject", children: "Subject" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-subject", children: t("templates.subject") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "input",
             {
@@ -131,7 +165,7 @@ function TemplateEditorScreen({
               onChange: (event) => setSubject(event.target.value)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-html", children: "HTML body" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-html", children: t("templates.htmlBody") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "textarea",
             {
@@ -142,7 +176,7 @@ function TemplateEditorScreen({
               rows: 8
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-text", children: "Plain-text body" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-text", children: t("templates.textBody") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "textarea",
             {
@@ -163,9 +197,24 @@ function TemplateEditorScreen({
                 onChange: (event) => setActive(event.target.checked)
               }
             ),
-            "Active"
+            t("templates.editor.active")
           ] }),
-          saveError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.error, role: "alert", children: saveError.explanation }),
+          saveError?.reason === "VERSION_CONFLICT" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: styles.error, role: "alert", children: [
+            t("templates.editor.conflict"),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles.rollbackButton,
+                onClick: () => {
+                  setSaveError(null);
+                  void refresh();
+                },
+                children: t("common.reload")
+              }
+            )
+          ] }) : saveError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.error, role: "alert", children: saveError.explanation }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.saveRow, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
@@ -173,13 +222,29 @@ function TemplateEditorScreen({
                 type: "submit",
                 disabled: isSaving || !dirty,
                 style: dirty ? styles.button : styles.buttonDisabled,
-                children: isSaving ? "Saving\u2026" : "Save"
+                children: isSaving ? t("common.saving") : t("common.save")
               }
             ),
-            !dirty && !isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.meta, children: "No changes to save" })
+            !dirty && !isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.meta, children: t("templates.editor.noChanges") }),
+            !system ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: isDeleting,
+                onClick: () => void handleDelete(),
+                style: {
+                  ...styles.rollbackButton,
+                  height: 36,
+                  marginLeft: "auto",
+                  color: "var(--fonderie-danger,#e00)",
+                  borderColor: "color-mix(in srgb, var(--fonderie-danger,#e00) 40%, transparent)"
+                },
+                children: isDeleting ? t("common.deleting") : t("common.delete")
+              }
+            ) : null
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-sample", children: "Sample data" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: styles.label, htmlFor: "template-sample", children: t("templates.editor.sampleData") }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "textarea",
           {
@@ -195,8 +260,8 @@ function TemplateEditorScreen({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.previewColumn, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.previewHeader, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.label, children: "Preview" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.meta, children: isPreviewing ? "Rendering\u2026" : "Live" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.label, children: t("templates.editor.preview") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.meta, children: isPreviewing ? t("templates.editor.rendering") : t("templates.editor.live") })
         ] }),
         previewError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.error, role: "alert", children: previewError.explanation }),
         preview?.subject && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: styles.previewSubject, children: preview.subject }),
@@ -207,26 +272,26 @@ function TemplateEditorScreen({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "iframe",
             {
-              title: "Template preview",
+              title: t("templates.editor.previewTitle"),
               style: styles.previewFrame,
               sandbox: "",
               srcDoc: preview.html
             }
           )
-        ) : 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: "Nothing rendered yet." })
+        ) : 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") })
       ] })
     ] }),
     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: "History" }),
+      /* @__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: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
           "v",
           rev.version,
           " \u2014 ",
-          rev.actor ?? "unknown",
+          rev.actor ?? t("templates.editor.unknownActor"),
           " \u2014",
           " ",
-          new Date(rev.createdAt).toLocaleString()
+          (0, import_client.formatAdminDate)(rev.createdAt, uiLocale)
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
@@ -234,7 +299,7 @@ function TemplateEditorScreen({
             type: "button",
             onClick: () => rollback(rev.version),
             style: styles.rollbackButton,
-            children: "Roll back"
+            children: t("templates.editor.rollBack")
           }
         )
       ] }, rev.version)) })
@@ -410,14 +475,42 @@ var styles = {
 };
 
 // src/screens/TemplateListScreen.tsx
+var import_client2 = require("@fonderie/client");
 var import_react_courier_admin2 = require("@fonderie/react-courier-admin");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function TemplateListScreen({ client, onSelectTemplate }) {
+function TemplateListScreen({
+  client,
+  onSelectTemplate,
+  onCreateTemplate,
+  locale
+}) {
+  const t = (0, import_client2.createAdminT)(locale);
   const { templates, isLoading, error } = (0, import_react_courier_admin2.useTemplates)(client);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { style: styles2.title, children: "Templates" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.hint, children: "Every email the app sends. Open one to edit its copy and preview it live." }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: styles2.status, children: "Loading templates\u2026" }) : 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: templates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { style: styles2.title, children: t("templates.list.title") }),
+          onCreateTemplate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onCreateTemplate({
+                locales: [
+                  ...new Set(templates.map((row) => row.locale).filter((l) => !!l))
+                ]
+              }),
+              style: styles2.newButton,
+              children: t("templates.list.newTemplate")
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__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: templates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
         type: "button",
@@ -425,10 +518,11 @@ function TemplateListScreen({ client, onSelectTemplate }) {
         style: styles2.rowButton,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.type, children: template.type }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.locale, children: template.locale ?? "default locale" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.locale, children: template.locale ?? t("templates.defaultLocale") }),
+          template.system ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.builtIn, children: t("templates.builtInBadge") }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: template.active ? styles2.active : styles2.inactive, children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.dot }),
-            template.active ? "active" : "inactive"
+            template.active ? t("common.status.active") : t("common.status.inactive")
           ] })
         ]
       }
@@ -491,6 +585,29 @@ var styles2 = {
   },
   locale: { fontSize: 12.5, color: "var(--fonderie-text-muted,#5c5c5c)" },
   dot: { width: 6, height: 6, borderRadius: 999, background: "currentColor" },
+  builtIn: {
+    fontSize: 11,
+    fontWeight: 500,
+    padding: "1px 7px",
+    borderRadius: 999,
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    color: "var(--fonderie-text-muted,#5c5c5c)"
+  },
+  newButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    height: 32,
+    boxSizing: "border-box",
+    borderRadius: 6,
+    padding: "0 12px",
+    fontSize: 13,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    backgroundColor: "var(--fonderie-text,#171717)",
+    color: "var(--fonderie-surface,#fff)",
+    border: "1px solid var(--fonderie-text,#171717)"
+  },
   active: {
     ...pill,
     color: "var(--fonderie-accent-strong,#009767)",
@@ -502,8 +619,214 @@ var styles2 = {
     background: "color-mix(in srgb, var(--fonderie-text-muted,#5c5c5c) 10%, transparent)"
   }
 };
+
+// src/screens/TemplateCreateScreen.tsx
+var import_client3 = require("@fonderie/client");
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TYPE_RE = /^[a-z0-9][a-z0-9_-]{0,80}$/;
+var LOCALE_RE = /^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/;
+function TemplateCreateScreen({
+  client,
+  type,
+  locales = [],
+  onCreated,
+  locale
+}) {
+  const tr = (0, import_client3.createAdminT)(locale);
+  const addingLocale = type !== void 0;
+  const [newType, setNewType] = (0, import_react2.useState)("");
+  const [targetLocale, setTargetLocale] = (0, import_react2.useState)("");
+  const [subject, setSubject] = (0, import_react2.useState)("");
+  const [html, setHtml] = (0, import_react2.useState)("");
+  const [text, setText] = (0, import_react2.useState)("");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!type) return;
+    client.getTemplate(type, null).then(({ result }) => {
+      setSubject(result.subject ?? "");
+      setHtml(result.html ?? "");
+      setText(result.text);
+    }).catch(() => void 0);
+  }, [client, type]);
+  const submit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    const t = addingLocale ? type : newType.trim();
+    const l = targetLocale.trim() || null;
+    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 (!text.trim()) return setError(tr("templates.create.errorText"));
+    setBusy(true);
+    try {
+      const exists = await client.getTemplate(t, l).then(
+        () => true,
+        (err) => !(err instanceof import_client3.FonderieApiError && err.status === 404)
+      );
+      if (exists) {
+        setError(
+          l ? tr("templates.create.existsLocale", { type: t, locale: l }) : tr("templates.create.exists", { type: t })
+        );
+        return;
+      }
+      const input = { text, active: true };
+      if (subject) input.subject = subject;
+      if (html) input.html = html;
+      await client.setTemplate(t, input, l);
+      onCreated?.({ type: t, locale: l });
+    } catch (err) {
+      setError(err instanceof import_client3.FonderieApiError ? err.explanation : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles3.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { style: styles3.title, children: addingLocale ? tr("templates.create.titleLocale", { type }) : tr("templates.create.titleNew") }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles3.meta, children: addingLocale ? tr("templates.create.hintLocale") : tr("templates.create.hintNew") }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { style: styles3.form, onSubmit: (e) => void submit(e), children: [
+      !addingLocale ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: styles3.label, htmlFor: "new-template-type", children: tr("templates.create.type") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            id: "new-template-type",
+            style: styles3.input,
+            value: newType,
+            placeholder: "weekly-digest",
+            autoComplete: "off",
+            spellCheck: false,
+            onChange: (e) => setNewType(e.target.value)
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: styles3.label, htmlFor: "new-template-locale", children: addingLocale ? tr("templates.create.locale") : tr("templates.create.localeOptional") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          id: "new-template-locale",
+          style: styles3.input,
+          value: targetLocale,
+          placeholder: "fr",
+          list: "new-template-locales",
+          autoComplete: "off",
+          spellCheck: false,
+          onChange: (e) => setTargetLocale(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("datalist", { id: "new-template-locales", children: [...new Set(locales)].map((l) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: l }, l)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: styles3.label, htmlFor: "new-template-subject", children: tr("templates.subject") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          id: "new-template-subject",
+          style: styles3.input,
+          value: subject,
+          onChange: (e) => setSubject(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: styles3.label, htmlFor: "new-template-html", children: tr("templates.htmlBody") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "textarea",
+        {
+          id: "new-template-html",
+          style: { ...styles3.textarea, minHeight: 160 },
+          value: html,
+          onChange: (e) => setHtml(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: styles3.label, htmlFor: "new-template-text", children: tr("templates.textBody") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "textarea",
+        {
+          id: "new-template-text",
+          style: { ...styles3.textarea, minHeight: 100 },
+          value: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      ),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles3.error, role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", disabled: busy, style: styles3.button, children: busy ? tr("templates.create.creating") : addingLocale ? tr("templates.create.submitLocale") : tr("templates.create.submitNew") })
+    ] })
+  ] });
+}
+var MONO = 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)';
+var styles3 = {
+  container: { padding: "8px 40px 64px", maxWidth: 760, boxSizing: "border-box" },
+  title: {
+    fontSize: 22,
+    fontWeight: 600,
+    margin: "8px 0 4px",
+    letterSpacing: "var(--fonderie-tracking-display,-0.05em)",
+    lineHeight: 1.25
+  },
+  meta: {
+    fontSize: 13,
+    color: "var(--fonderie-text-muted,#5c5c5c)",
+    marginBottom: 20,
+    lineHeight: 1.5
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    background: "var(--fonderie-surface,#fff)",
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: "var(--fonderie-radius-lg,8px)",
+    padding: "6px 20px 20px"
+  },
+  label: { fontSize: 13, fontWeight: 500, marginTop: 14, marginBottom: 2 },
+  input: {
+    height: 36,
+    boxSizing: "border-box",
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: 6,
+    padding: "0 10px",
+    fontSize: 13.5,
+    fontFamily: "inherit",
+    background: "var(--fonderie-surface,#fff)",
+    color: "var(--fonderie-text,#171717)"
+  },
+  textarea: {
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: 6,
+    padding: 10,
+    fontSize: 13,
+    lineHeight: 1.55,
+    background: "var(--fonderie-surface,#fff)",
+    color: "var(--fonderie-text,#171717)",
+    fontFamily: MONO
+  },
+  error: {
+    color: "var(--fonderie-danger,#e00)",
+    background: "color-mix(in srgb, var(--fonderie-danger,#e00) 8%, transparent)",
+    borderRadius: 6,
+    padding: "8px 12px",
+    margin: "8px 0",
+    fontSize: 13.5
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    height: 36,
+    boxSizing: "border-box",
+    backgroundColor: "var(--fonderie-text,#171717)",
+    color: "var(--fonderie-surface,#fff)",
+    padding: "0 16px",
+    borderRadius: 6,
+    border: "1px solid var(--fonderie-text,#171717)",
+    fontSize: 13.5,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    alignSelf: "flex-start",
+    marginTop: 16
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TemplateCreateScreen,
   TemplateEditorScreen,
   TemplateListScreen
 });