@fonderie/vue-courier-admin-screens 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -20,13 +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.ts
-var import_vue_courier_admin = require("@fonderie/vue-courier-admin");
+// src/screens/TemplateCreateScreen.ts
+var import_client = require("@fonderie/client");
 var import_vue = require("vue");
 
 // src/styles.ts
@@ -265,18 +266,170 @@ var styles = {
   dot: { width: "6px", height: "6px", borderRadius: "999px", background: "currentColor" }
 };
 
+// src/screens/TemplateCreateScreen.ts
+var TYPE_RE = /^[a-z0-9][a-z0-9_-]{0,80}$/;
+var LOCALE_RE = /^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/;
+var TemplateCreateScreen = (0, import_vue.defineComponent)({
+  name: "FonderieTemplateCreateScreen",
+  props: {
+    client: { type: Object, required: true },
+    /**
+     * Given ⇒ add a LOCALE of this existing template: the type is fixed and the
+     * form starts from its default-locale copy. Omitted ⇒ a brand-new template
+     * type (one the app sends that has no stored copy yet).
+     */
+    type: { type: String, default: void 0 },
+    /** Locales already in use, offered as suggestions. */
+    locales: { type: Array, default: () => [] }
+  },
+  emits: {
+    /** What was created, so the caller can open it in the editor. */
+    created: (_created) => true
+  },
+  setup(props, { emit }) {
+    const addingLocale = props.type !== void 0;
+    const newType = (0, import_vue.ref)("");
+    const locale = (0, import_vue.ref)("");
+    const subject = (0, import_vue.ref)("");
+    const html = (0, import_vue.ref)("");
+    const text = (0, import_vue.ref)("");
+    const error = (0, import_vue.ref)(null);
+    const busy = (0, import_vue.ref)(false);
+    (0, import_vue.onMounted)(() => {
+      if (!props.type) return;
+      props.client.getTemplate(props.type, null).then(({ result }) => {
+        subject.value = result.subject ?? "";
+        html.value = result.html ?? "";
+        text.value = result.text;
+      }).catch(() => void 0);
+    });
+    async function submit(e) {
+      e.preventDefault();
+      error.value = null;
+      const t = addingLocale ? props.type : newType.value.trim();
+      const l = locale.value.trim() || null;
+      if (!TYPE_RE.test(t)) {
+        error.value = "Type: lowercase letters, digits, - and _ (e.g. weekly-digest).";
+        return;
+      }
+      if (addingLocale && !l) {
+        error.value = "Choose the locale to add, e.g. fr or fr-CA.";
+        return;
+      }
+      if (l && !LOCALE_RE.test(l)) {
+        error.value = "Locale: a language tag such as fr, es or fr-CA.";
+        return;
+      }
+      if (!text.value.trim()) {
+        error.value = "The plain-text body is required \u2014 it is what every email client can show.";
+        return;
+      }
+      busy.value = true;
+      try {
+        const exists = await props.client.getTemplate(t, l).then(
+          () => true,
+          (err) => !(err instanceof import_client.FonderieApiError && err.status === 404)
+        );
+        if (exists) {
+          error.value = `"${t}"${l ? ` (${l})` : ""} already exists \u2014 open it from the list to edit.`;
+          return;
+        }
+        const input = { text: text.value, active: true };
+        if (subject.value) input.subject = subject.value;
+        if (html.value) input.html = html.value;
+        await props.client.setTemplate(t, input, l);
+        emit("created", { type: t, locale: l });
+      } catch (err) {
+        error.value = err instanceof import_client.FonderieApiError ? err.explanation : String(err);
+      } finally {
+        busy.value = false;
+      }
+    }
+    const field = (id, label, model, opts = {}) => [
+      (0, import_vue.h)("label", { style: styles.label, for: id }, label),
+      (0, import_vue.h)(opts.textarea ? "textarea" : "input", {
+        id,
+        style: opts.textarea ? { ...styles.textarea, minHeight: opts.minHeight } : styles.input,
+        value: model.value,
+        autocomplete: "off",
+        spellcheck: false,
+        ...opts.placeholder ? { placeholder: opts.placeholder } : {},
+        ...opts.list ? { list: opts.list } : {},
+        onInput: (ev) => {
+          model.value = ev.target.value;
+        }
+      })
+    ];
+    return () => (0, import_vue.h)("div", { style: { ...styles.container, maxWidth: "760px" } }, [
+      (0, import_vue.h)(
+        "h1",
+        { style: styles.title },
+        addingLocale ? `Add a locale to ${props.type}` : "New template"
+      ),
+      (0, import_vue.h)(
+        "p",
+        { style: { ...styles.meta, lineHeight: 1.5 } },
+        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."
+      ),
+      (0, import_vue.h)("form", { style: styles.form, onSubmit: (ev) => void submit(ev) }, [
+        ...addingLocale ? [] : field("new-template-type", "Type", newType, { placeholder: "weekly-digest" }),
+        ...field(
+          "new-template-locale",
+          addingLocale ? "Locale" : "Locale (optional \u2014 empty is the default)",
+          locale,
+          { placeholder: "fr", list: "new-template-locales" }
+        ),
+        (0, import_vue.h)(
+          "datalist",
+          { id: "new-template-locales" },
+          [...new Set(props.locales)].map((l) => (0, import_vue.h)("option", { key: l, value: l }))
+        ),
+        ...field("new-template-subject", "Subject", subject),
+        ...field("new-template-html", "HTML body", html, { textarea: true, minHeight: "160px" }),
+        ...field("new-template-text", "Plain-text body", text, {
+          textarea: true,
+          minHeight: "100px"
+        }),
+        error.value ? (0, import_vue.h)("p", { style: styles.error, role: "alert" }, error.value) : null,
+        (0, import_vue.h)(
+          "button",
+          {
+            type: "submit",
+            disabled: busy.value,
+            style: { ...styles.button, marginTop: "16px" }
+          },
+          busy.value ? "Creating\u2026" : addingLocale ? "Add locale" : "Create template"
+        )
+      ])
+    ]);
+  }
+});
+
 // src/screens/TemplateEditorScreen.ts
+var import_vue_courier_admin = require("@fonderie/vue-courier-admin");
+var import_vue2 = require("vue");
 var PREVIEW_DEBOUNCE_MS = 500;
 var IMPLICIT = /* @__PURE__ */ new Set(["subject", "preheader", "brandName"]);
-var TemplateEditorScreen = (0, import_vue.defineComponent)({
+var TemplateEditorScreen = (0, import_vue2.defineComponent)({
   name: "FonderieTemplateEditorScreen",
   props: {
     client: { type: Object, required: true },
     type: { type: String, required: true },
-    locale: { type: String, default: null }
+    locale: { type: String, default: null },
+    /**
+     * A built-in email's default-locale row (the list's `system` flag): it can
+     * be edited and rolled back, never deleted — Delete is not offered.
+     */
+    system: { type: Boolean, default: false },
+    /** Shows "+ Add locale" on the default locale (emits add-locale). */
+    allowAddLocale: { type: Boolean, default: false }
   },
   emits: {
-    saved: () => true
+    saved: () => true,
+    /** The template was deleted and no longer exists. */
+    deleted: () => true,
+    /** Create a translation of this template. */
+    "add-locale": (_type) => true
   },
   setup(props, { emit }) {
     const { template, isLoading, error, refresh } = (0, import_vue_courier_admin.useTemplate)(
@@ -284,15 +437,16 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
       props.type,
       props.locale
     );
-    const { saveTemplate } = (0, import_vue_courier_admin.useTemplates)(props.client);
+    const { saveTemplate, removeTemplate } = (0, import_vue_courier_admin.useTemplates)(props.client);
+    const isDeleting = (0, import_vue2.ref)(false);
     const { revisions, rollback } = (0, import_vue_courier_admin.useTemplateRevisions)(props.client, props.type, props.locale);
-    const isSaving = (0, import_vue.ref)(false);
-    const saveError = (0, import_vue.ref)(null);
-    const subject = (0, import_vue.ref)("");
-    const html = (0, import_vue.ref)("");
-    const text = (0, import_vue.ref)("");
-    const active = (0, import_vue.ref)(true);
-    (0, import_vue.watch)(template, (tpl) => {
+    const isSaving = (0, import_vue2.ref)(false);
+    const saveError = (0, import_vue2.ref)(null);
+    const subject = (0, import_vue2.ref)("");
+    const html = (0, import_vue2.ref)("");
+    const text = (0, import_vue2.ref)("");
+    const active = (0, import_vue2.ref)(true);
+    (0, import_vue2.watch)(template, (tpl) => {
       if (!tpl) return;
       subject.value = tpl.subject ?? "";
       html.value = tpl.html ?? "";
@@ -305,8 +459,8 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
       error: previewError,
       renderPreview
     } = (0, import_vue_courier_admin.useTemplatePreview)(props.client);
-    const sampleJson = (0, import_vue.ref)("{}");
-    const sampleError = (0, import_vue.ref)(null);
+    const sampleJson = (0, import_vue2.ref)("{}");
+    const sampleError = (0, import_vue2.ref)(null);
     async function run() {
       let data = {};
       try {
@@ -341,12 +495,12 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
       }
     }
     let previewTimer;
-    (0, import_vue.watch)([template, subject, html, text, sampleJson], () => {
+    (0, import_vue2.watch)([template, subject, html, text, sampleJson], () => {
       if (!template.value) return;
       clearTimeout(previewTimer);
       previewTimer = setTimeout(() => void run(), PREVIEW_DEBOUNCE_MS);
     });
-    const dirty = (0, import_vue.computed)(() => {
+    const dirty = (0, import_vue2.computed)(() => {
       const tpl = template.value;
       return !!tpl && (subject.value !== (tpl.subject ?? "") || html.value !== (tpl.html ?? "") || text.value !== tpl.text || active.value !== tpl.active);
     });
@@ -368,13 +522,28 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
         isSaving.value = false;
       }
     }
+    async function handleDelete() {
+      const which = props.locale ? `the ${props.locale} version of "${props.type}"` : `"${props.type}"`;
+      const fallback = props.locale ? " People in that locale will receive the default version." : "";
+      if (!window.confirm(`Delete ${which}?${fallback}`)) return;
+      isDeleting.value = true;
+      saveError.value = null;
+      try {
+        await removeTemplate(props.type, props.locale);
+        emit("deleted");
+      } catch (err) {
+        saveError.value = err;
+      } finally {
+        isDeleting.value = false;
+      }
+    }
     function renderRevision(rev) {
-      return (0, import_vue.h)("li", { key: rev.version, style: styles.revisionRow }, [
-        (0, import_vue.h)(
+      return (0, import_vue2.h)("li", { key: rev.version, style: styles.revisionRow }, [
+        (0, import_vue2.h)(
           "span",
           `v${rev.version} \u2014 ${rev.actor ?? "unknown"} \u2014 ${new Date(rev.createdAt).toLocaleString()}`
         ),
-        (0, import_vue.h)(
+        (0, import_vue2.h)(
           "button",
           { type: "button", style: styles.rollbackButton, onClick: () => rollback(rev.version) },
           "Roll back"
@@ -382,21 +551,36 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
       ]);
     }
     return () => {
-      if (isLoading.value) return (0, import_vue.h)("p", { style: styles.status }, "Loading template\u2026");
+      if (isLoading.value) return (0, import_vue2.h)("p", { style: styles.status }, "Loading template\u2026");
       if (error.value)
-        return (0, import_vue.h)("p", { style: styles.error, role: "alert" }, error.value.explanation);
-      return (0, import_vue.h)("div", { style: styles.container }, [
-        (0, import_vue.h)("h1", { style: styles.title }, props.type),
-        (0, import_vue.h)(
-          "p",
-          { style: styles.meta },
-          `${props.locale ?? "base"} \xB7 v${template.value?.version ?? 1}`
+        return (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, error.value.explanation);
+      return (0, import_vue2.h)("div", { style: styles.container }, [
+        (0, import_vue2.h)(
+          "div",
+          { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" } },
+          [
+            (0, import_vue2.h)("h1", { style: styles.title }, props.type),
+            props.allowAddLocale && !props.locale ? (0, import_vue2.h)(
+              "button",
+              {
+                type: "button",
+                style: { ...styles.rollbackButton, marginLeft: "auto" },
+                onClick: () => emit("add-locale", props.type)
+              },
+              "+ Add locale"
+            ) : null
+          ]
         ),
-        (0, import_vue.h)("div", { style: styles.split }, [
-          (0, import_vue.h)("div", { style: styles.column }, [
-            (0, import_vue.h)("form", { style: styles.form, onSubmit: handleSubmit }, [
-              (0, import_vue.h)("label", { style: styles.label, for: "template-subject" }, "Subject"),
-              (0, import_vue.h)("input", {
+        (0, import_vue2.h)("p", { style: styles.meta }, [
+          (0, import_vue2.h)("strong", props.locale ?? "default locale"),
+          ` \xB7 v${template.value?.version ?? 1}`,
+          props.system ? " \xB7 built-in email: edit or roll back, it cannot be deleted" : ""
+        ]),
+        (0, import_vue2.h)("div", { style: styles.split }, [
+          (0, import_vue2.h)("div", { style: styles.column }, [
+            (0, import_vue2.h)("form", { style: styles.form, onSubmit: handleSubmit }, [
+              (0, import_vue2.h)("label", { style: styles.label, for: "template-subject" }, "Subject"),
+              (0, import_vue2.h)("input", {
                 id: "template-subject",
                 style: styles.input,
                 value: subject.value,
@@ -404,8 +588,8 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
                   subject.value = e.target.value;
                 }
               }),
-              (0, import_vue.h)("label", { style: styles.label, for: "template-html" }, "HTML body"),
-              (0, import_vue.h)("textarea", {
+              (0, import_vue2.h)("label", { style: styles.label, for: "template-html" }, "HTML body"),
+              (0, import_vue2.h)("textarea", {
                 id: "template-html",
                 style: styles.textarea,
                 rows: 8,
@@ -414,8 +598,8 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
                   html.value = e.target.value;
                 }
               }),
-              (0, import_vue.h)("label", { style: styles.label, for: "template-text" }, "Plain-text body"),
-              (0, import_vue.h)("textarea", {
+              (0, import_vue2.h)("label", { style: styles.label, for: "template-text" }, "Plain-text body"),
+              (0, import_vue2.h)("textarea", {
                 id: "template-text",
                 style: styles.textarea,
                 rows: 4,
@@ -425,8 +609,8 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
                   text.value = e.target.value;
                 }
               }),
-              (0, import_vue.h)("label", { style: styles.checkboxLabel }, [
-                (0, import_vue.h)("input", {
+              (0, import_vue2.h)("label", { style: styles.checkboxLabel }, [
+                (0, import_vue2.h)("input", {
                   type: "checkbox",
                   checked: active.value,
                   onChange: (e) => {
@@ -435,9 +619,23 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
                 }),
                 "Active"
               ]),
-              saveError.value ? (0, import_vue.h)("p", { style: styles.error, role: "alert" }, saveError.value.explanation) : null,
-              (0, import_vue.h)("div", { style: styles.saveRow }, [
-                (0, import_vue.h)(
+              saveError.value?.reason === "VERSION_CONFLICT" ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, [
+                "Someone changed this template since you opened it. Reload to see their change, then edit again. ",
+                (0, import_vue2.h)(
+                  "button",
+                  {
+                    type: "button",
+                    style: styles.rollbackButton,
+                    onClick: () => {
+                      saveError.value = null;
+                      void refresh();
+                    }
+                  },
+                  "Reload"
+                )
+              ]) : saveError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, saveError.value.explanation) : null,
+              (0, import_vue2.h)("div", { style: styles.saveRow }, [
+                (0, import_vue2.h)(
                   "button",
                   {
                     type: "submit",
@@ -446,11 +644,27 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
                   },
                   isSaving.value ? "Saving\u2026" : "Save"
                 ),
-                !dirty.value && !isSaving.value ? (0, import_vue.h)("span", { style: styles.meta }, "No changes to save") : null
+                !dirty.value && !isSaving.value ? (0, import_vue2.h)("span", { style: styles.meta }, "No changes to save") : null,
+                !props.system ? (0, import_vue2.h)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDeleting.value,
+                    onClick: () => void handleDelete(),
+                    style: {
+                      ...styles.rollbackButton,
+                      height: "36px",
+                      marginLeft: "auto",
+                      color: "var(--fonderie-danger,#e00)",
+                      borderColor: "color-mix(in srgb, var(--fonderie-danger,#e00) 40%, transparent)"
+                    }
+                  },
+                  isDeleting.value ? "Deleting\u2026" : "Delete"
+                ) : null
               ])
             ]),
-            (0, import_vue.h)("label", { style: styles.label, for: "template-sample" }, "Sample data"),
-            (0, import_vue.h)("textarea", {
+            (0, import_vue2.h)("label", { style: styles.label, for: "template-sample" }, "Sample data"),
+            (0, import_vue2.h)("textarea", {
               id: "template-sample",
               style: styles.textarea,
               rows: 6,
@@ -460,31 +674,31 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
                 sampleJson.value = e.target.value;
               }
             }),
-            sampleError.value ? (0, import_vue.h)("p", { style: styles.error, role: "alert" }, sampleError.value) : null
+            sampleError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, sampleError.value) : null
           ]),
-          (0, import_vue.h)("div", { style: styles.previewColumn }, [
-            (0, import_vue.h)("div", { style: styles.previewHeader }, [
-              (0, import_vue.h)("span", { style: styles.label }, "Preview"),
-              (0, import_vue.h)("span", { style: styles.meta }, isPreviewing.value ? "Rendering\u2026" : "Live")
+          (0, import_vue2.h)("div", { style: styles.previewColumn }, [
+            (0, import_vue2.h)("div", { style: styles.previewHeader }, [
+              (0, import_vue2.h)("span", { style: styles.label }, "Preview"),
+              (0, import_vue2.h)("span", { style: styles.meta }, isPreviewing.value ? "Rendering\u2026" : "Live")
             ]),
-            previewError.value ? (0, import_vue.h)("p", { style: styles.error, role: "alert" }, previewError.value.explanation) : null,
-            preview.value?.subject ? (0, import_vue.h)("p", { style: styles.previewSubject }, preview.value.subject) : null,
+            previewError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, previewError.value.explanation) : null,
+            preview.value?.subject ? (0, import_vue2.h)("p", { style: styles.previewSubject }, preview.value.subject) : null,
             preview.value?.html ? (
               // sandbox= — no scripts, no same-origin. Operator-authored HTML
               // must never execute in the dashboard's origin, where the admin
               // token lives.
-              (0, import_vue.h)("iframe", {
+              (0, import_vue2.h)("iframe", {
                 title: "Template preview",
                 style: styles.previewFrame,
                 sandbox: "",
                 srcdoc: preview.value.html
               })
-            ) : preview.value ? (0, import_vue.h)("pre", { style: styles.previewText }, preview.value.text) : (0, import_vue.h)("p", { style: styles.meta }, "Nothing rendered yet.")
+            ) : preview.value ? (0, import_vue2.h)("pre", { style: styles.previewText }, preview.value.text) : (0, import_vue2.h)("p", { style: styles.meta }, "Nothing rendered yet.")
           ])
         ]),
-        revisions.value.length > 0 ? (0, import_vue.h)("div", { style: styles.revisions }, [
-          (0, import_vue.h)("h2", { style: styles.subtitle }, "History"),
-          (0, import_vue.h)("ul", { style: styles.list }, revisions.value.map(renderRevision))
+        revisions.value.length > 0 ? (0, import_vue2.h)("div", { style: styles.revisions }, [
+          (0, import_vue2.h)("h2", { style: styles.subtitle }, "History"),
+          (0, import_vue2.h)("ul", { style: styles.list }, revisions.value.map(renderRevision))
         ]) : null
       ]);
     };
@@ -493,20 +707,48 @@ var TemplateEditorScreen = (0, import_vue.defineComponent)({
 
 // src/screens/TemplateListScreen.ts
 var import_vue_courier_admin2 = require("@fonderie/vue-courier-admin");
-var import_vue2 = require("vue");
-var TemplateListScreen = (0, import_vue2.defineComponent)({
+var import_vue3 = require("vue");
+var builtIn = {
+  fontSize: "11px",
+  fontWeight: 500,
+  padding: "1px 7px",
+  borderRadius: "999px",
+  border: "1px solid var(--fonderie-border,#e0e0e0)",
+  color: "var(--fonderie-text-muted,#5c5c5c)"
+};
+var newButton = {
+  display: "inline-flex",
+  alignItems: "center",
+  height: "32px",
+  boxSizing: "border-box",
+  borderRadius: "6px",
+  padding: "0 12px",
+  fontSize: "13px",
+  fontWeight: 500,
+  fontFamily: "inherit",
+  cursor: "pointer",
+  backgroundColor: "var(--fonderie-text,#171717)",
+  color: "var(--fonderie-surface,#fff)",
+  border: "1px solid var(--fonderie-text,#171717)"
+};
+var TemplateListScreen = (0, import_vue3.defineComponent)({
   name: "FonderieTemplateListScreen",
   props: {
-    client: { type: Object, required: true }
+    client: { type: Object, required: true },
+    /** Shows a "New template" button (emits create-template). */
+    allowCreate: { type: Boolean, default: false }
   },
   emits: {
-    "select-template": (_template) => true
+    /** The whole row — type AND locale, and whether it is built-in. */
+    "select-template": (_template) => true,
+    /** Receives the locales in use, to suggest. */
+    "create-template": (_context) => true
   },
   setup(props, { emit }) {
     const { templates, isLoading, error } = (0, import_vue_courier_admin2.useTemplates)(props.client);
     function renderRow(template) {
-      return (0, import_vue2.h)("li", { key: `${template.type}:${template.locale ?? "base"}`, style: styles.row }, [
-        (0, import_vue2.h)(
+      return (0, import_vue3.h)("li", { key: `${template.type}:${template.locale ?? "base"}`, style: styles.row }, [
+        (0, import_vue3.h)(
           "button",
           {
             type: "button",
@@ -514,29 +756,59 @@ var TemplateListScreen = (0, import_vue2.defineComponent)({
             onClick: () => emit("select-template", template)
           },
           [
-            (0, import_vue2.h)("span", { style: styles.type }, template.type),
-            (0, import_vue2.h)("span", { style: styles.locale }, template.locale ?? "default locale"),
-            (0, import_vue2.h)("span", { style: template.active ? styles.active : styles.inactive }, [
-              (0, import_vue2.h)("span", { style: styles.dot }),
+            (0, import_vue3.h)("span", { style: styles.type }, template.type),
+            (0, import_vue3.h)("span", { style: styles.locale }, template.locale ?? "default locale"),
+            template.system ? (0, import_vue3.h)("span", { style: builtIn }, "built-in") : null,
+            (0, import_vue3.h)("span", { style: template.active ? styles.active : styles.inactive }, [
+              (0, import_vue3.h)("span", { style: styles.dot }),
               template.active ? "active" : "inactive"
             ])
           ]
         )
       ]);
     }
-    return () => (0, import_vue2.h)("div", { style: styles.listContainer }, [
-      (0, import_vue2.h)("h1", { style: styles.listTitle }, "Templates"),
-      (0, import_vue2.h)(
+    return () => (0, import_vue3.h)("div", { style: styles.listContainer }, [
+      (0, import_vue3.h)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "16px"
+          }
+        },
+        [
+          (0, import_vue3.h)("h1", { style: styles.listTitle }, "Templates"),
+          props.allowCreate ? (0, import_vue3.h)(
+            "button",
+            {
+              type: "button",
+              style: newButton,
+              onClick: () => emit("create-template", {
+                locales: [
+                  ...new Set(
+                    templates.value.map((t) => t.locale).filter((l) => !!l)
+                  )
+                ]
+              })
+            },
+            "New template"
+          ) : null
+        ]
+      ),
+      (0, import_vue3.h)(
         "p",
         { style: styles.hint },
         "Every email the app sends. Open one to edit its copy and preview it live."
       ),
-      isLoading.value ? (0, import_vue2.h)("p", { style: styles.status }, "Loading templates\u2026") : error.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : (0, import_vue2.h)("ul", { style: styles.list }, templates.value.map(renderRow))
+      isLoading.value ? (0, import_vue3.h)("p", { style: styles.status }, "Loading templates\u2026") : error.value ? (0, import_vue3.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : (0, import_vue3.h)("ul", { style: styles.list }, templates.value.map(renderRow))
     ]);
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TemplateCreateScreen,
   TemplateEditorScreen,
   TemplateListScreen
 });