@fonderie/vue-courier-admin-screens 0.8.0 → 0.10.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/screens/TemplateCreateScreen.ts
 var import_client = require("@fonderie/client");
+var import_vue_courier_admin = require("@fonderie/vue-courier-admin");
 var import_vue = require("vue");
 
 // src/styles.ts
@@ -269,6 +270,16 @@ var styles = {
 // 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 IMPLICIT = /* @__PURE__ */ new Set(["subject", "preheader", "brandName"]);
+var PREVIEW_DEBOUNCE_MS = 500;
+var notice = {
+  fontSize: "13px",
+  color: "var(--fonderie-text,#171717)",
+  background: "color-mix(in srgb, var(--fonderie-warning,#f5a623) 16%, transparent)",
+  borderRadius: "6px",
+  padding: "8px 12px",
+  margin: "12px 0 0"
+};
 var TemplateCreateScreen = (0, import_vue.defineComponent)({
   name: "FonderieTemplateCreateScreen",
   props: {
@@ -297,6 +308,14 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
     const text = (0, import_vue.ref)("");
     const error = (0, import_vue.ref)(null);
     const busy = (0, import_vue.ref)(false);
+    const source = (0, import_vue.ref)(null);
+    const {
+      preview,
+      isPreviewing,
+      error: previewError,
+      renderPreview
+    } = (0, import_vue_courier_admin.useTemplatePreview)(props.client);
+    let variables = [];
     const tr = (key, params) => (0, import_client.createAdminT)(props.locale)(key, params);
     (0, import_vue.onMounted)(() => {
       if (!props.type) return;
@@ -304,8 +323,50 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
         subject.value = result.subject ?? "";
         html.value = result.html ?? "";
         text.value = result.text;
+        source.value = {
+          subject: result.subject ?? "",
+          html: result.html ?? "",
+          text: result.text
+        };
       }).catch(() => void 0);
     });
+    let timer;
+    (0, import_vue.watch)([newType, targetLocale, subject, html, text], () => {
+      clearTimeout(timer);
+      const type = addingLocale ? props.type : newType.value.trim();
+      const l = targetLocale.value.trim();
+      if (!TYPE_RE.test(type) || !text.value.trim()) return;
+      timer = setTimeout(async () => {
+        const input = {
+          text: text.value,
+          ...subject.value ? { subject: subject.value } : {},
+          ...html.value ? { html: html.value } : {}
+        };
+        const render = () => renderPreview(
+          type,
+          { ...input, data: Object.fromEntries(variables.map((v) => [v, v])) },
+          LOCALE_RE.test(l) ? l : null
+        );
+        try {
+          const result = await render();
+          const used = result.variables.filter((v) => !IMPLICIT.has(v));
+          if (used.some((v) => !variables.includes(v))) {
+            variables = used;
+            await render();
+          }
+        } catch {
+        }
+      }, PREVIEW_DEBOUNCE_MS);
+    });
+    const untranslated = (0, import_vue.computed)(() => {
+      const src = source.value;
+      if (!src) return [];
+      return [
+        subject.value && subject.value === src.subject ? tr("templates.subject") : null,
+        html.value && html.value === src.html ? tr("templates.htmlBody") : null,
+        text.value === src.text ? tr("templates.textBody") : null
+      ].filter((f) => f !== null);
+    });
     async function submit(e) {
       e.preventDefault();
       error.value = null;
@@ -363,7 +424,7 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
         }
       })
     ];
-    return () => (0, import_vue.h)("div", { style: { ...styles.container, maxWidth: "760px" } }, [
+    return () => (0, import_vue.h)("div", { style: styles.container }, [
       (0, import_vue.h)(
         "h1",
         { style: styles.title },
@@ -374,35 +435,69 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
         { style: { ...styles.meta, lineHeight: 1.5 } },
         addingLocale ? tr("templates.create.hintLocale") : tr("templates.create.hintNew")
       ),
-      (0, import_vue.h)("form", { style: styles.form, onSubmit: (ev) => void submit(ev) }, [
-        ...addingLocale ? [] : field("new-template-type", tr("templates.create.type"), newType, { placeholder: "weekly-digest" }),
-        ...field(
-          "new-template-locale",
-          addingLocale ? tr("templates.create.locale") : tr("templates.create.localeOptional"),
-          targetLocale,
-          { 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", tr("templates.subject"), subject),
-        ...field("new-template-html", tr("templates.htmlBody"), html, { textarea: true, minHeight: "160px" }),
-        ...field("new-template-text", tr("templates.textBody"), 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 ? tr("templates.create.creating") : addingLocale ? tr("templates.create.submitLocale") : tr("templates.create.submitNew")
-        )
+      (0, import_vue.h)("div", { style: styles.split }, [
+        (0, import_vue.h)("form", { style: styles.form, onSubmit: (ev) => void submit(ev) }, [
+          ...addingLocale ? [] : field("new-template-type", tr("templates.create.type"), newType, {
+            placeholder: "weekly-digest"
+          }),
+          ...field(
+            "new-template-locale",
+            addingLocale ? tr("templates.create.locale") : tr("templates.create.localeOptional"),
+            targetLocale,
+            { 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", tr("templates.subject"), subject),
+          ...field("new-template-html", tr("templates.htmlBody"), html, {
+            textarea: true,
+            minHeight: "160px"
+          }),
+          ...field("new-template-text", tr("templates.textBody"), text, {
+            textarea: true,
+            minHeight: "100px"
+          }),
+          untranslated.value.length > 0 ? (0, import_vue.h)(
+            "p",
+            { style: notice },
+            tr("templates.create.untranslated", { fields: untranslated.value.join(", ") })
+          ) : null,
+          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 ? tr("templates.create.creating") : addingLocale ? tr("templates.create.submitLocale") : tr("templates.create.submitNew")
+          )
+        ]),
+        (0, import_vue.h)("div", { style: styles.previewColumn }, [
+          (0, import_vue.h)("div", { style: styles.previewHeader }, [
+            (0, import_vue.h)("span", { style: styles.label }, tr("templates.editor.preview")),
+            (0, import_vue.h)(
+              "span",
+              { style: styles.meta },
+              isPreviewing.value ? tr("templates.editor.rendering") : tr("templates.editor.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,
+          preview.value?.html ? (
+            // sandbox= — no scripts, no same-origin: operator-authored HTML must
+            // never execute in the console's origin.
+            (0, import_vue.h)("iframe", {
+              title: tr("templates.editor.previewTitle"),
+              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 }, tr("templates.editor.nothingRendered"))
+        ])
       ])
     ]);
   }
@@ -410,10 +505,38 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
 
 // src/screens/TemplateEditorScreen.ts
 var import_client2 = require("@fonderie/client");
-var import_vue_courier_admin = require("@fonderie/vue-courier-admin");
+var import_vue_courier_admin2 = require("@fonderie/vue-courier-admin");
 var import_vue2 = require("vue");
-var PREVIEW_DEBOUNCE_MS = 500;
-var IMPLICIT = /* @__PURE__ */ new Set(["subject", "preheader", "brandName"]);
+var PREVIEW_DEBOUNCE_MS2 = 500;
+var IMPLICIT2 = /* @__PURE__ */ new Set(["subject", "preheader", "brandName"]);
+var tab = {
+  height: "32px",
+  padding: "0 10px",
+  background: "none",
+  border: "none",
+  borderBottom: "2px solid transparent",
+  color: "var(--fonderie-text-muted,#5c5c5c)",
+  fontSize: "13px",
+  fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  cursor: "pointer"
+};
+var tabSelected = {
+  ...tab,
+  color: "var(--fonderie-text,#171717)",
+  fontWeight: 600,
+  borderBottomColor: "var(--fonderie-text,#171717)",
+  cursor: "default"
+};
+var tabInactive = { ...tab, opacity: 0.55, textDecoration: "line-through" };
+var tabBar = {
+  display: "flex",
+  alignItems: "flex-end",
+  gap: "12px",
+  borderBottom: "1px solid var(--fonderie-border,#e0e0e0)",
+  margin: "4px 0 12px",
+  paddingBottom: "6px"
+};
+var tabs = { display: "flex", flexWrap: "wrap", gap: "4px", marginBottom: "-7px" };
 var TemplateEditorScreen = (0, import_vue2.defineComponent)({
   name: "FonderieTemplateEditorScreen",
   props: {
@@ -425,8 +548,13 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
      * 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). */
+    /** Shows "+ Add locale" (emits add-locale). */
     allowAddLocale: { type: Boolean, default: false },
+    /**
+     * Shows a tab per locale this email exists in (emits select-locale).
+     * Unsaved edits are confirmed before switching away.
+     */
+    localeTabs: { type: Boolean, default: false },
     /** The console language (`locale` is the template's); defaults to English. */
     uiLocale: { type: String, default: void 0 }
   },
@@ -434,19 +562,27 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
     saved: () => true,
     /** The template was deleted and no longer exists. */
     deleted: () => true,
-    /** Create a translation of this template. */
-    "add-locale": (_type) => true
+    /**
+     * Create a translation of this template. `locales` are the ones the app
+     * uses elsewhere that this email lacks — suggest them first.
+     */
+    "add-locale": (_type, _context) => true,
+    /** Open another locale of this email. */
+    "select-locale": (_template) => true
   },
   setup(props, { emit }) {
     const t = (key, params) => (0, import_client2.createAdminT)(props.uiLocale)(key, params);
-    const { template, isLoading, error, refresh } = (0, import_vue_courier_admin.useTemplate)(
+    const { template, isLoading, error, refresh } = (0, import_vue_courier_admin2.useTemplate)(
       props.client,
       props.type,
       props.locale
     );
-    const { saveTemplate, removeTemplate } = (0, import_vue_courier_admin.useTemplates)(props.client);
+    const { templates, saveTemplate, removeTemplate } = (0, import_vue_courier_admin2.useTemplates)(props.client);
+    const siblings = (0, import_vue2.computed)(
+      () => (0, import_client2.groupTemplatesByType)(templates.value).find((g) => g.type === props.type)?.entries ?? []
+    );
     const isDeleting = (0, import_vue2.ref)(false);
-    const { revisions, rollback } = (0, import_vue_courier_admin.useTemplateRevisions)(props.client, props.type, props.locale);
+    const { revisions, rollback } = (0, import_vue_courier_admin2.useTemplateRevisions)(props.client, props.type, props.locale);
     const isSaving = (0, import_vue2.ref)(false);
     const saveError = (0, import_vue2.ref)(null);
     const subject = (0, import_vue2.ref)("");
@@ -465,7 +601,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       isPreviewing,
       error: previewError,
       renderPreview
-    } = (0, import_vue_courier_admin.useTemplatePreview)(props.client);
+    } = (0, import_vue_courier_admin2.useTemplatePreview)(props.client);
     const sampleJson = (0, import_vue2.ref)("{}");
     const sampleError = (0, import_vue2.ref)(null);
     async function run() {
@@ -492,7 +628,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
         },
         props.locale
       );
-      const missing = result.variables.filter((v) => !IMPLICIT.has(v) && !(v in data));
+      const missing = result.variables.filter((v) => !IMPLICIT2.has(v) && !(v in data));
       if (missing.length > 0) {
         sampleJson.value = JSON.stringify(
           { ...data, ...Object.fromEntries(missing.map((v) => [v, v])) },
@@ -505,7 +641,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
     (0, import_vue2.watch)([template, subject, html, text, sampleJson], () => {
       if (!template.value) return;
       clearTimeout(previewTimer);
-      previewTimer = setTimeout(() => void run(), PREVIEW_DEBOUNCE_MS);
+      previewTimer = setTimeout(() => void run(), PREVIEW_DEBOUNCE_MS2);
     });
     const dirty = (0, import_vue2.computed)(() => {
       const tpl = template.value;
@@ -529,6 +665,51 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
         isSaving.value = false;
       }
     }
+    const leave = () => !dirty.value || window.confirm(t("templates.editor.discardChanges"));
+    function renderTabBar() {
+      if (!props.localeTabs && !props.allowAddLocale) return null;
+      return (0, import_vue2.h)("div", { style: tabBar }, [
+        props.localeTabs ? (
+          // Each tab opens another stored row, so this is navigation, not an
+          // ARIA tablist: plain buttons, the open one marked aria-current.
+          (0, import_vue2.h)(
+            "nav",
+            { "aria-label": t("templates.editor.locales"), style: tabs },
+            siblings.value.map((entry) => {
+              const selected = entry.locale === (props.locale ?? null);
+              return (0, import_vue2.h)(
+                "button",
+                {
+                  key: entry.locale ?? "",
+                  type: "button",
+                  "aria-current": selected ? "true" : void 0,
+                  style: selected ? tabSelected : entry.active ? tab : tabInactive,
+                  title: entry.active ? void 0 : t("common.status.inactive"),
+                  onClick: () => {
+                    if (!selected && leave()) emit("select-locale", entry);
+                  }
+                },
+                entry.locale ?? t("templates.defaultChip")
+              );
+            })
+          )
+        ) : null,
+        props.allowAddLocale ? (0, import_vue2.h)(
+          "button",
+          {
+            type: "button",
+            style: { ...styles.rollbackButton, marginLeft: "auto" },
+            onClick: () => {
+              if (leave())
+                emit("add-locale", props.type, {
+                  locales: (0, import_client2.missingTemplateLocales)(templates.value, props.type)
+                });
+            }
+          },
+          t("templates.editor.addLocale")
+        ) : null
+      ]);
+    }
     async function handleDelete() {
       const message = props.locale ? t("templates.editor.confirmDeleteLocale", { locale: props.locale, type: props.type }) : t("templates.editor.confirmDelete", { type: props.type });
       if (!window.confirm(message)) return;
@@ -561,22 +742,8 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       if (error.value)
         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)
-              },
-              t("templates.editor.addLocale")
-            ) : null
-          ]
-        ),
+        (0, import_vue2.h)("h1", { style: styles.title }, props.type),
+        renderTabBar(),
         (0, import_vue2.h)("p", { style: styles.meta }, [
           (0, import_vue2.h)("strong", props.locale ?? t("templates.defaultLocale")),
           ` \xB7 v${template.value?.version ?? 1}`,
@@ -669,7 +836,11 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                 ) : null
               ])
             ]),
-            (0, import_vue2.h)("label", { style: styles.label, for: "template-sample" }, t("templates.editor.sampleData")),
+            (0, import_vue2.h)(
+              "label",
+              { style: styles.label, for: "template-sample" },
+              t("templates.editor.sampleData")
+            ),
             (0, import_vue2.h)("textarea", {
               id: "template-sample",
               style: styles.textarea,
@@ -685,7 +856,11 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
           (0, import_vue2.h)("div", { style: styles.previewColumn }, [
             (0, import_vue2.h)("div", { style: styles.previewHeader }, [
               (0, import_vue2.h)("span", { style: styles.label }, t("templates.editor.preview")),
-              (0, import_vue2.h)("span", { style: styles.meta }, isPreviewing.value ? t("templates.editor.rendering") : t("templates.editor.live"))
+              (0, import_vue2.h)(
+                "span",
+                { style: styles.meta },
+                isPreviewing.value ? t("templates.editor.rendering") : t("templates.editor.live")
+              )
             ]),
             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,
@@ -713,7 +888,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
 
 // src/screens/TemplateListScreen.ts
 var import_client3 = require("@fonderie/client");
-var import_vue_courier_admin2 = require("@fonderie/vue-courier-admin");
+var import_vue_courier_admin3 = require("@fonderie/vue-courier-admin");
 var import_vue3 = require("vue");
 var builtIn = {
   fontSize: "11px",
@@ -723,6 +898,33 @@ var builtIn = {
   border: "1px solid var(--fonderie-border,#e0e0e0)",
   color: "var(--fonderie-text-muted,#5c5c5c)"
 };
+var chip = {
+  height: "24px",
+  boxSizing: "border-box",
+  padding: "0 8px",
+  borderRadius: "6px",
+  border: "1px solid var(--fonderie-border,#e0e0e0)",
+  background: "var(--fonderie-surface,#fff)",
+  color: "var(--fonderie-text,#171717)",
+  fontSize: "12px",
+  fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  cursor: "pointer"
+};
+var chipInactive = { ...chip, opacity: 0.5, textDecoration: "line-through" };
+var row = {
+  ...styles.row,
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  paddingRight: "16px"
+};
+var rowButton = { ...styles.rowButton, width: "auto", flex: "1", minWidth: "0" };
+var chips = {
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "flex-end",
+  gap: "6px"
+};
 var newButton = {
   display: "inline-flex",
   alignItems: "center",
@@ -748,32 +950,55 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
     locale: { type: String, default: void 0 }
   },
   emits: {
-    /** The whole row — type AND locale, and whether it is built-in. */
+    /**
+     * The whole row — type AND locale, and whether it is built-in. One row
+     * per email: the row opens the default locale, a locale chip that locale.
+     */
     "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);
+    const { templates, isLoading, error } = (0, import_vue_courier_admin3.useTemplates)(props.client);
     const t = (key, params) => (0, import_client3.createAdminT)(props.locale)(key, params);
-    function renderRow(template) {
-      return (0, import_vue3.h)("li", { key: `${template.type}:${template.locale ?? "base"}`, style: styles.row }, [
+    function renderRow(group) {
+      const primary = group.primary;
+      return (0, import_vue3.h)("li", { key: group.type, style: row }, [
         (0, import_vue3.h)(
           "button",
           {
             type: "button",
-            style: styles.rowButton,
-            onClick: () => emit("select-template", template)
+            style: rowButton,
+            onClick: () => emit("select-template", primary)
           },
           [
-            (0, import_vue3.h)("span", { style: styles.type }, template.type),
-            (0, import_vue3.h)("span", { style: styles.locale }, template.locale ?? t("templates.defaultLocale")),
-            template.system ? (0, import_vue3.h)("span", { style: builtIn }, t("templates.builtInBadge")) : null,
-            (0, import_vue3.h)("span", { style: template.active ? styles.active : styles.inactive }, [
+            (0, import_vue3.h)("span", { style: styles.type }, group.type),
+            group.system ? (0, import_vue3.h)("span", { style: builtIn }, t("templates.builtInBadge")) : null,
+            (0, import_vue3.h)("span", { style: primary.active ? styles.active : styles.inactive }, [
               (0, import_vue3.h)("span", { style: styles.dot }),
-              template.active ? t("common.status.active") : t("common.status.inactive")
+              primary.active ? t("common.status.active") : t("common.status.inactive")
             ])
           ]
+        ),
+        // Siblings of the row button, not inside it: a button cannot hold buttons.
+        (0, import_vue3.h)(
+          "span",
+          { style: chips },
+          group.entries.map((entry) => {
+            const name = entry.locale ?? t("templates.defaultChip");
+            return (0, import_vue3.h)(
+              "button",
+              {
+                key: entry.locale ?? "",
+                type: "button",
+                style: entry.active ? chip : chipInactive,
+                "aria-label": t("templates.list.openLocale", { type: group.type, locale: name }),
+                title: entry.active ? void 0 : t("common.status.inactive"),
+                onClick: () => emit("select-template", entry)
+              },
+              name
+            );
+          })
         )
       ]);
     }
@@ -807,12 +1032,8 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
           ) : null
         ]
       ),
-      (0, import_vue3.h)(
-        "p",
-        { style: styles.hint },
-        t("templates.list.hint")
-      ),
-      isLoading.value ? (0, import_vue3.h)("p", { style: styles.status }, t("templates.list.loading")) : 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))
+      (0, import_vue3.h)("p", { style: styles.hint }, t("templates.list.hint")),
+      isLoading.value ? (0, import_vue3.h)("p", { style: styles.status }, t("templates.list.loading")) : error.value ? (0, import_vue3.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : (0, import_vue3.h)("ul", { style: styles.list }, (0, import_client3.groupTemplatesByType)(templates.value).map(renderRow))
     ]);
   }
 });