@fonderie/react-courier-admin-screens 0.5.0 → 0.7.0

package/dist/index.js

@@ -13,10 +13,14 @@ function TemplateEditorScreen({
   client,
   type,
   locale,
-  onSaved
+  onSaved,
+  system = false,
+  onDeleted,
+  onAddLocale
 }) {
   const { template, isLoading, error, refresh } = useTemplate(client, type, locale);
-  const { saveTemplate } = useTemplates(client);
+  const { saveTemplate, removeTemplate } = useTemplates(client);
+  const [isDeleting, setIsDeleting] = useState(false);
   const { revisions, rollback } = useTemplateRevisions(client, type, locale);
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState(null);
@@ -86,15 +90,42 @@ function TemplateEditorScreen({
       setIsSaving(false);
     }
   };
+  const handleDelete = async () => {
+    const which = locale ? `the ${locale} version of "${type}"` : `"${type}"`;
+    const fallback = locale ? " People in that locale will receive the default version." : "";
+    if (!window.confirm(`Delete ${which}?${fallback}`)) return;
+    setIsDeleting(true);
+    setSaveError(null);
+    try {
+      await removeTemplate(type, locale);
+      onDeleted?.();
+    } catch (err) {
+      setSaveError(err);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
   if (isLoading) return /* @__PURE__ */ jsx("p", { style: styles.status, children: "Loading template\u2026" });
   if (error)
     return /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: error.explanation });
   return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx("h1", { style: styles.title, children: type }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: styles.title, children: type }),
+      onAddLocale && !locale ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.rollbackButton, marginLeft: "auto" },
+          onClick: () => onAddLocale(type),
+          children: "+ Add locale"
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ jsxs("p", { style: styles.meta, children: [
-      locale ?? "base",
+      /* @__PURE__ */ jsx("strong", { children: locale ?? "default locale" }),
       " \xB7 v",
-      template?.version ?? 1
+      template?.version ?? 1,
+      system ? " \xB7 built-in email: edit or roll back, it cannot be deleted" : ""
     ] }),
     /* @__PURE__ */ jsxs("div", { style: styles.split, children: [
       /* @__PURE__ */ jsxs("div", { style: styles.column, children: [
@@ -143,10 +174,49 @@ function TemplateEditorScreen({
             ),
             "Active"
           ] }),
-          saveError && /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: saveError.explanation }),
+          saveError?.reason === "VERSION_CONFLICT" ? /* @__PURE__ */ jsxs("p", { style: styles.error, role: "alert", children: [
+            "Someone changed this template since you opened it. Reload to see their change, then edit again.",
+            " ",
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: styles.rollbackButton,
+                onClick: () => {
+                  setSaveError(null);
+                  void refresh();
+                },
+                children: "Reload"
+              }
+            )
+          ] }) : saveError ? /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: saveError.explanation }) : null,
           /* @__PURE__ */ jsxs("div", { style: styles.saveRow, children: [
-            /* @__PURE__ */ jsx("button", { type: "submit", disabled: isSaving || !dirty, style: dirty ? styles.button : styles.buttonDisabled, children: isSaving ? "Saving\u2026" : "Save" }),
-            !dirty && !isSaving && /* @__PURE__ */ jsx("span", { style: styles.meta, children: "No changes to save" })
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: isSaving || !dirty,
+                style: dirty ? styles.button : styles.buttonDisabled,
+                children: isSaving ? "Saving\u2026" : "Save"
+              }
+            ),
+            !dirty && !isSaving && /* @__PURE__ */ jsx("span", { style: styles.meta, children: "No changes to save" }),
+            !system ? /* @__PURE__ */ 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 ? "Deleting\u2026" : "Delete"
+              }
+            ) : null
           ] })
         ] }),
         /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-sample", children: "Sample data" }),
@@ -212,13 +282,24 @@ function TemplateEditorScreen({
   ] });
 }
 var styles = {
-  container: { padding: 24 },
+  container: { padding: "8px 40px 64px", maxWidth: 1400, boxSizing: "border-box" },
   // 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: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 24, alignItems: "start" },
+  split: {
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+    gap: 24,
+    alignItems: "start"
+  },
   column: { minWidth: 0, display: "flex", flexDirection: "column" },
   // Pinned while the form scrolls, so the preview stays in view as you edit.
-  previewColumn: { minWidth: 0, display: "flex", flexDirection: "column", position: "sticky", top: 16 },
+  previewColumn: {
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    position: "sticky",
+    top: 16
+  },
   saveRow: { display: "flex", alignItems: "center", gap: 12, marginTop: 16 },
   previewHeader: {
     display: "flex",
@@ -228,6 +309,7 @@ var styles = {
   },
   previewSubject: { fontSize: 14, fontWeight: 600, margin: "8px 0" },
   previewFrame: {
+    boxShadow: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))",
     width: "100%",
     height: 520,
     border: "1px solid var(--fonderie-border,#e0e0e0)",
@@ -242,60 +324,127 @@ var styles = {
     fontSize: 13,
     fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)'
   },
-  title: { fontSize: 24, fontWeight: 700 },
-  meta: { fontSize: 13, color: "var(--fonderie-text-muted,#5c5c5c)", marginBottom: 16 },
+  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 },
   status: { padding: 24, textAlign: "center", color: "var(--fonderie-text-muted,#5c5c5c)" },
-  error: { color: "var(--fonderie-danger,#e00)", marginBottom: 12, fontSize: 14 },
-  form: { display: "flex", flexDirection: "column", gap: 4 },
-  label: { fontSize: 13, fontWeight: 600, marginTop: 12 },
-  input: { border: "1px solid var(--fonderie-border,#e0e0e0)", borderRadius: 8, padding: 10, fontSize: 14 },
+  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
+  },
+  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",
+    boxShadow: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
+  },
+  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: 8,
+    borderRadius: 6,
     padding: 10,
-    fontSize: 14,
+    fontSize: 13,
+    lineHeight: 1.55,
+    background: "var(--fonderie-surface,#fff)",
+    color: "var(--fonderie-text,#171717)",
     fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)'
   },
   checkboxLabel: { display: "flex", alignItems: "center", gap: 8, marginTop: 12, fontSize: 14 },
   button: {
+    display: "inline-flex",
+    alignItems: "center",
+    height: 36,
+    boxSizing: "border-box",
     backgroundColor: "var(--fonderie-text,#171717)",
     color: "var(--fonderie-surface,#fff)",
-    padding: "10px 20px",
-    borderRadius: 8,
-    border: "none",
-    fontSize: 14,
+    padding: "0 16px",
+    borderRadius: 6,
+    border: "1px solid var(--fonderie-text,#171717)",
+    fontSize: 13.5,
     fontWeight: 600,
+    fontFamily: "inherit",
     cursor: "pointer",
     alignSelf: "flex-start"
   },
   buttonDisabled: {
-    backgroundColor: "var(--fonderie-border,#e0e0e0)",
-    color: "var(--fonderie-text-muted,#5c5c5c)",
-    padding: "10px 20px",
-    borderRadius: 8,
-    border: "none",
-    fontSize: 14,
+    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,
-    cursor: "not-allowed",
-    alignSelf: "flex-start"
+    fontFamily: "inherit",
+    alignSelf: "flex-start",
+    opacity: 0.45,
+    cursor: "not-allowed"
   },
   revisions: { marginTop: 32 },
-  subtitle: { fontSize: 16, fontWeight: 600, marginBottom: 8 },
-  list: { listStyle: "none", padding: 0, margin: 0 },
+  subtitle: {
+    fontSize: 15,
+    fontWeight: 600,
+    margin: "0 0 10px",
+    letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
+  },
+  list: {
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    background: "var(--fonderie-surface,#fff)",
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: "var(--fonderie-radius-lg,8px)",
+    overflow: "hidden"
+  },
   row: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "8px 0",
+    gap: 12,
+    padding: "9px 16px",
     borderBottom: "1px solid var(--fonderie-border-light,#f5f5f5)",
     fontSize: 13
   },
   rollbackButton: {
-    background: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    height: 28,
+    boxSizing: "border-box",
+    background: "var(--fonderie-surface,#fff)",
+    color: "var(--fonderie-text,#171717)",
     border: "1px solid var(--fonderie-border,#e0e0e0)",
-    borderRadius: 8,
-    padding: "4px 10px",
-    fontSize: 12,
+    borderRadius: 6,
+    padding: "0 10px",
+    fontSize: 12.5,
+    fontWeight: 500,
+    fontFamily: "inherit",
     cursor: "pointer"
   }
 };
@@ -303,14 +452,37 @@ var styles = {
 // src/screens/TemplateListScreen.tsx
 import { useTemplates as useTemplates2 } from "@fonderie/react-courier-admin";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function TemplateListScreen({ client, onSelectTemplate }) {
+function TemplateListScreen({
+  client,
+  onSelectTemplate,
+  onCreateTemplate
+}) {
   const { templates, isLoading, error } = useTemplates2(client);
-  if (isLoading) return /* @__PURE__ */ jsx2("p", { style: styles2.status, children: "Loading templates\u2026" });
-  if (error)
-    return /* @__PURE__ */ jsx2("p", { style: styles2.error, role: "alert", children: error.explanation });
   return /* @__PURE__ */ jsxs2("div", { style: styles2.container, children: [
-    /* @__PURE__ */ jsx2("h1", { style: styles2.title, children: "Templates" }),
-    /* @__PURE__ */ jsx2("ul", { style: styles2.list, children: templates.map((template) => /* @__PURE__ */ jsx2("li", { style: styles2.row, children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 },
+        children: [
+          /* @__PURE__ */ jsx2("h1", { style: styles2.title, children: "Templates" }),
+          onCreateTemplate ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => onCreateTemplate({
+                locales: [
+                  ...new Set(templates.map((t) => t.locale).filter((l) => !!l))
+                ]
+              }),
+              style: styles2.newButton,
+              children: "New template"
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("p", { style: styles2.hint, children: "Every email the app sends. Open one to edit its copy and preview it live." }),
+    isLoading ? /* @__PURE__ */ jsx2("p", { style: styles2.status, children: "Loading templates\u2026" }) : error ? /* @__PURE__ */ jsx2("p", { style: styles2.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsx2("ul", { style: styles2.list, children: templates.map((template) => /* @__PURE__ */ jsx2("li", { style: styles2.row, children: /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -318,37 +490,315 @@ function TemplateListScreen({ client, onSelectTemplate }) {
         style: styles2.rowButton,
         children: [
           /* @__PURE__ */ jsx2("span", { style: styles2.type, children: template.type }),
-          /* @__PURE__ */ jsx2("span", { style: styles2.locale, children: template.locale ?? "base" }),
-          /* @__PURE__ */ jsx2("span", { style: template.active ? styles2.active : styles2.inactive, children: template.active ? "Active" : "Inactive" })
+          /* @__PURE__ */ jsx2("span", { style: styles2.locale, children: template.locale ?? "default locale" }),
+          template.system ? /* @__PURE__ */ jsx2("span", { style: styles2.builtIn, children: "built-in" }) : null,
+          /* @__PURE__ */ jsxs2("span", { style: template.active ? styles2.active : styles2.inactive, children: [
+            /* @__PURE__ */ jsx2("span", { style: styles2.dot }),
+            template.active ? "active" : "inactive"
+          ] })
         ]
       }
     ) }, `${template.type}:${template.locale ?? "base"}`)) })
   ] });
 }
+var pill = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  borderRadius: 999,
+  padding: "2px 9px 2px 8px",
+  fontSize: 12,
+  fontWeight: 600,
+  lineHeight: 1.5,
+  minWidth: 64
+};
 var styles2 = {
-  container: { padding: 24, maxWidth: 640 },
-  title: { fontSize: 24, fontWeight: 700, marginBottom: 16 },
-  status: { padding: 24, textAlign: "center", color: "var(--fonderie-text-muted,#5c5c5c)" },
+  container: { padding: "32px 40px 64px", maxWidth: 1160, boxSizing: "border-box" },
+  title: {
+    fontSize: 22,
+    fontWeight: 600,
+    margin: 0,
+    letterSpacing: "var(--fonderie-tracking-display,-0.05em)",
+    lineHeight: 1.25
+  },
+  hint: { fontSize: 13.5, color: "var(--fonderie-text-muted,#5c5c5c)", margin: "4px 0 24px" },
+  status: { padding: "24px 0", color: "var(--fonderie-text-muted,#5c5c5c)", fontSize: 13.5 },
   error: { color: "var(--fonderie-danger,#e00)", marginBottom: 12, fontSize: 14 },
-  list: { listStyle: "none", padding: 0, margin: 0 },
+  list: {
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    background: "var(--fonderie-surface,#fff)",
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: "var(--fonderie-radius-lg,8px)",
+    overflow: "hidden",
+    boxShadow: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
+  },
   row: { borderBottom: "1px solid var(--fonderie-border-light,#f5f5f5)" },
   rowButton: {
     width: "100%",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "12px 0",
+    gap: 16,
+    padding: "13px 16px",
     background: "none",
     border: "none",
     cursor: "pointer",
-    textAlign: "left"
+    textAlign: "left",
+    color: "var(--fonderie-text,#171717)",
+    fontFamily: "inherit"
+  },
+  type: {
+    fontSize: 13,
+    fontWeight: 600,
+    flex: 1,
+    fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)'
+  },
+  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)"
   },
-  type: { fontSize: 14, fontWeight: 600, flex: 1 },
-  locale: { fontSize: 13, color: "var(--fonderie-text-muted,#5c5c5c)", marginRight: 16 },
-  active: { fontSize: 12, color: "var(--fonderie-accent-strong,#009767)" },
-  inactive: { fontSize: 12, color: "var(--fonderie-text-muted,#5c5c5c)" }
+  active: {
+    ...pill,
+    color: "var(--fonderie-accent-strong,#009767)",
+    background: "color-mix(in srgb, var(--fonderie-accent-strong,#009767) 13%, transparent)"
+  },
+  inactive: {
+    ...pill,
+    color: "var(--fonderie-text-muted,#5c5c5c)",
+    background: "color-mix(in srgb, var(--fonderie-text-muted,#5c5c5c) 10%, transparent)"
+  }
+};
+
+// src/screens/TemplateCreateScreen.tsx
+import { FonderieApiError } from "@fonderie/client";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "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
+}) {
+  const addingLocale = type !== void 0;
+  const [newType, setNewType] = useState2("");
+  const [locale, setLocale] = useState2("");
+  const [subject, setSubject] = useState2("");
+  const [html, setHtml] = useState2("");
+  const [text, setText] = useState2("");
+  const [error, setError] = useState2(null);
+  const [busy, setBusy] = useState2(false);
+  useEffect2(() => {
+    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 = locale.trim() || null;
+    if (!TYPE_RE.test(t))
+      return setError("Type: lowercase letters, digits, - and _ (e.g. weekly-digest).");
+    if (addingLocale && !l) return setError("Choose the locale to add, e.g. fr or fr-CA.");
+    if (l && !LOCALE_RE.test(l)) return setError("Locale: a language tag such as fr, es or fr-CA.");
+    if (!text.trim())
+      return setError("The plain-text body is required \u2014 it is what every email client can show.");
+    setBusy(true);
+    try {
+      const exists = await client.getTemplate(t, l).then(
+        () => true,
+        (err) => !(err instanceof FonderieApiError && err.status === 404)
+      );
+      if (exists) {
+        setError(`"${t}"${l ? ` (${l})` : ""} already exists \u2014 open it from the list to edit.`);
+        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 FonderieApiError ? err.explanation : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: styles3.container, children: [
+    /* @__PURE__ */ jsx3("h1", { style: styles3.title, children: addingLocale ? `Add a locale to ${type}` : "New template" }),
+    /* @__PURE__ */ jsx3("p", { style: styles3.meta, children: addingLocale ? "Starts from the default copy. People whose locale matches receive this version; everyone else keeps the default." : "For an email your app sends that has no stored copy yet. The type must match what the app sends." }),
+    /* @__PURE__ */ jsxs3("form", { style: styles3.form, onSubmit: (e) => void submit(e), children: [
+      !addingLocale ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-type", children: "Type" }),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsxs3("label", { style: styles3.label, htmlFor: "new-template-locale", children: [
+        "Locale ",
+        addingLocale ? "" : "(optional \u2014 empty is the default)"
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id: "new-template-locale",
+          style: styles3.input,
+          value: locale,
+          placeholder: "fr",
+          list: "new-template-locales",
+          autoComplete: "off",
+          spellCheck: false,
+          onChange: (e) => setLocale(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx3("datalist", { id: "new-template-locales", children: [...new Set(locales)].map((l) => /* @__PURE__ */ jsx3("option", { value: l }, l)) }),
+      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-subject", children: "Subject" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id: "new-template-subject",
+          style: styles3.input,
+          value: subject,
+          onChange: (e) => setSubject(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-html", children: "HTML body" }),
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          id: "new-template-html",
+          style: { ...styles3.textarea, minHeight: 160 },
+          value: html,
+          onChange: (e) => setHtml(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-text", children: "Plain-text body" }),
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          id: "new-template-text",
+          style: { ...styles3.textarea, minHeight: 100 },
+          value: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      ),
+      error ? /* @__PURE__ */ jsx3("p", { style: styles3.error, role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: busy, style: styles3.button, children: busy ? "Creating\u2026" : addingLocale ? "Add locale" : "Create template" })
+    ] })
+  ] });
+}
+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
+  }
 };
 export {
+  TemplateCreateScreen,
   TemplateEditorScreen,
   TemplateListScreen
 };