@fonderie/vue-admin-screens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fonderie, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @fonderie/vue-admin-screens
+
+The admin shell for Vue — the `/wp-admin` of a Fonderie app, over
+[`@fonderie/admin`](../admin). Navigation follows the operator's questions;
+each page is a screen you can also mount on its own.
+
+Status: **experimental** (0.x).
+
+| Group | Page | Answers |
+|---|---|---|
+| Today | Attention | what needs me today — empty is green |
+| System | Modules · Configuration · Doctor · Routes | what did I deploy · is it configured · is it working · what is exposed |
+| Settings | Config & secrets | the `@fonderie/config` admin screens, as a sub-page |
+| Messaging | Templates | the `@fonderie/courier` admin screens, as a sub-page |
+| Activity | Admin log · Access | who did what · who can be here |
+
+```ts
+import { AdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
+import { AdminShell } from '@fonderie/vue-admin-screens';
+
+const base = { baseUrl: 'https://api.example.com', adminToken, actor: 'louis' };
+const client = new AdminClient(base);
+// prefix: the composed surface under /_admin — one token for everything.
+const configClient = new ConfigAdminClient({ ...base, prefix: '/_admin' });
+const courierClient = new CourierAdminClient({ ...base, prefix: '/_admin' });
+```
+
+```ts
+h(AdminShell, { client, configClient, courierClient })
+```
+
+Pass `page` and listen to `navigate` to own the URL (one route per page);
+omit `page` and the shell keeps it itself. Settings and Messaging appear only
+when their client is given.
+
+Nothing here stores the token: the app constructs the clients and decides
+where the token lives. Every request through the shell lands in the admin
+log, including the ones the token refuses.

package/dist/index.cjs

@@ -0,0 +1,627 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AdminLogScreen: () => AdminLogScreen,
+  AdminShell: () => AdminShell,
+  AttentionScreen: () => AttentionScreen,
+  ConfigScreen: () => ConfigScreen,
+  DoctorScreen: () => DoctorScreen,
+  ModulesScreen: () => ModulesScreen,
+  RoutesScreen: () => RoutesScreen,
+  TokensScreen: () => TokensScreen
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/screens/AdminShell.ts
+var import_vue_config_admin_screens = require("@fonderie/vue-config-admin-screens");
+var import_vue_courier_admin_screens = require("@fonderie/vue-courier-admin-screens");
+var import_vue9 = require("vue");
+
+// src/styles.ts
+var styles = {
+  shell: {
+    display: "flex",
+    minHeight: "100vh",
+    fontFamily: "system-ui, sans-serif",
+    color: "#111"
+  },
+  nav: { width: "220px", borderRight: "1px solid #eee", padding: "16px", flexShrink: 0 },
+  navGroup: {
+    fontSize: "11px",
+    textTransform: "uppercase",
+    letterSpacing: "0.6px",
+    color: "#888",
+    margin: "16px 0 6px"
+  },
+  navItem: {
+    display: "block",
+    width: "100%",
+    textAlign: "left",
+    background: "none",
+    border: "none",
+    borderRadius: "6px",
+    padding: "6px 8px",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#111"
+  },
+  navItemActive: { background: "#f3f4f6", fontWeight: 600 },
+  main: { flex: 1, padding: "24px", maxWidth: "960px" },
+  container: { padding: "24px", maxWidth: "960px" },
+  title: { fontSize: "20px", fontWeight: 700, marginTop: 0, marginBottom: "12px" },
+  subtitle: { fontSize: "15px", fontWeight: 600, marginTop: "24px", marginBottom: "8px" },
+  status: { padding: "12px", color: "#666" },
+  error: { color: "#e11d48", marginBottom: "12px", fontSize: "14px" },
+  ok: { color: "#15803d", fontWeight: 600 },
+  bad: { color: "#e11d48", fontWeight: 600 },
+  advice: { color: "#b45309" },
+  muted: { color: "#666", fontSize: "13px" },
+  mono: { fontFamily: "ui-monospace, monospace", fontSize: "13px" },
+  table: { width: "100%", borderCollapse: "collapse", fontSize: "14px" },
+  th: {
+    textAlign: "left",
+    borderBottom: "1px solid #ddd",
+    padding: "6px 8px",
+    fontWeight: 600,
+    color: "#444"
+  },
+  td: { borderBottom: "1px solid #eee", padding: "6px 8px", verticalAlign: "top" },
+  list: { listStyle: "none", padding: 0, margin: 0 },
+  row: { borderBottom: "1px solid #eee", padding: "8px 0" },
+  badge: {
+    display: "inline-block",
+    borderRadius: "999px",
+    padding: "1px 8px",
+    fontSize: "12px",
+    background: "#f3f4f6"
+  },
+  button: {
+    background: "none",
+    border: "1px solid #ddd",
+    borderRadius: "8px",
+    padding: "4px 10px",
+    cursor: "pointer",
+    fontSize: "13px"
+  },
+  toolbar: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }
+};
+
+// src/screens/AdminLogScreen.ts
+var import_vue_admin = require("@fonderie/vue-admin");
+var import_vue2 = require("vue");
+
+// src/screens/common.ts
+var import_vue = require("vue");
+function page(title, state, content, toolbar = [], options = {}) {
+  const body = state.isLoading.value ? (0, import_vue.h)("p", { style: styles.status }, options.loadingText ?? "Loading\u2026") : state.error.value ? (0, import_vue.h)(
+    "p",
+    { style: styles.error, role: "alert" },
+    (options.errorText ?? ((e) => e.explanation))(state.error.value)
+  ) : content();
+  return (0, import_vue.h)("div", { style: styles.container }, [
+    (0, import_vue.h)("div", { style: styles.toolbar }, [
+      (0, import_vue.h)("h1", { style: { ...styles.title, marginBottom: 0 } }, title),
+      ...toolbar
+    ]),
+    body
+  ]);
+}
+function table(headers, rows) {
+  return (0, import_vue.h)("table", { style: styles.table }, [
+    (0, import_vue.h)("thead", [
+      (0, import_vue.h)(
+        "tr",
+        headers.map((t) => (0, import_vue.h)("th", { style: styles.th }, t))
+      )
+    ]),
+    (0, import_vue.h)("tbody", rows)
+  ]);
+}
+var td = (children, extra = {}) => (0, import_vue.h)("td", { style: { ...styles.td, ...extra } }, children);
+var refreshButton = (label, disabled, onClick) => (0, import_vue.h)("button", { type: "button", style: styles.button, disabled, onClick }, label);
+
+// src/screens/AdminLogScreen.ts
+var AdminLogScreen = (0, import_vue2.defineComponent)({
+  name: "FonderieAdminLogScreen",
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
+  setup(props) {
+    const { entries, hasMore, isLoading, error, refresh, loadMore } = (0, import_vue_admin.useAdminLog)(props.client, {
+      limit: props.pageSize
+    });
+    return () => (0, import_vue2.h)("div", { style: styles.container }, [
+      (0, import_vue2.h)("div", { style: styles.toolbar }, [
+        (0, import_vue2.h)("h1", { style: { ...styles.title, marginBottom: 0 } }, "Admin log"),
+        refreshButton("Refresh", isLoading.value, () => void refresh())
+      ]),
+      error.value ? (0, import_vue2.h)(
+        "p",
+        { style: styles.error, role: "alert" },
+        error.value.status === 404 ? "The admin log is off \u2014 give AdminModule a store." : error.value.explanation
+      ) : [
+        table(
+          ["When", "Actor", "Request", "Status", "Module"],
+          entries.value.map(
+            (e) => (0, import_vue2.h)("tr", { key: e.id }, [
+              td(new Date(e.at).toLocaleString(), styles.muted),
+              td(e.actor),
+              td(`${e.method} ${e.path}`, styles.mono),
+              td([
+                (0, import_vue2.h)(
+                  "span",
+                  { style: e.status >= 400 ? styles.bad : styles.ok },
+                  String(e.status)
+                ),
+                " ",
+                (0, import_vue2.h)("span", { style: styles.muted }, `${e.durationMs} ms`)
+              ]),
+              td(e.module, styles.muted)
+            ])
+          )
+        ),
+        isLoading.value ? (0, import_vue2.h)("p", { style: styles.status }, "Loading\u2026") : null,
+        hasMore.value && !isLoading.value ? (0, import_vue2.h)(
+          "button",
+          {
+            type: "button",
+            style: { ...styles.button, marginTop: "12px" },
+            onClick: () => void loadMore()
+          },
+          "Load more"
+        ) : null
+      ]
+    ]);
+  }
+});
+
+// src/screens/AttentionScreen.ts
+var import_vue_admin2 = require("@fonderie/vue-admin");
+var import_vue3 = require("vue");
+var AttentionScreen = (0, import_vue3.defineComponent)({
+  name: "FonderieAttentionScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { attention, isLoading, error, refresh } = (0, import_vue_admin2.useAttention)(props.client);
+    return () => page(
+      "Attention",
+      { isLoading, error },
+      () => {
+        const a = attention.value;
+        if (!a) return null;
+        if (a.items.length === 0)
+          return (0, import_vue3.h)(
+            "p",
+            { style: styles.ok },
+            `Nothing needs you. Checked ${new Date(a.generatedAt).toLocaleString()}.`
+          );
+        return (0, import_vue3.h)(
+          "ul",
+          { style: styles.list },
+          a.items.map(
+            (item) => (0, import_vue3.h)("li", { key: `${item.source}:${item.message}`, style: styles.row }, [
+              (0, import_vue3.h)(
+                "span",
+                { style: item.severity === "error" ? styles.bad : styles.advice },
+                item.severity
+              ),
+              " ",
+              (0, import_vue3.h)("span", { style: styles.mono }, item.source),
+              ` \u2014 ${item.message}`
+            ])
+          )
+        );
+      },
+      [refreshButton("Refresh", isLoading.value, () => void refresh())],
+      { loadingText: "Running the checks\u2026" }
+    );
+  }
+});
+
+// src/screens/ConfigScreen.ts
+var import_vue_admin3 = require("@fonderie/vue-admin");
+var import_vue4 = require("vue");
+var ConfigScreen = (0, import_vue4.defineComponent)({
+  name: "FonderieConfigScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error } = (0, import_vue_admin3.useAdminConfig)(props.client);
+    return () => page("Configuration", { isLoading, error }, () => {
+      const r = report.value;
+      if (!r) return null;
+      return [
+        (0, import_vue4.h)("h2", { style: styles.subtitle }, "Readiness"),
+        (0, import_vue4.h)(
+          "ul",
+          { style: styles.list },
+          r.modules.map(
+            (m) => (0, import_vue4.h)("li", { key: m.name, style: styles.row }, [
+              (0, import_vue4.h)("span", { style: styles.mono }, m.name),
+              " ",
+              ...m.problems.length === 0 ? [(0, import_vue4.h)("span", { style: styles.ok }, "ok")] : m.problems.map(
+                (p) => (0, import_vue4.h)(
+                  "div",
+                  {
+                    key: p.message,
+                    style: p.severity === "error" ? styles.bad : styles.advice
+                  },
+                  p.message
+                )
+              )
+            ])
+          )
+        ),
+        (0, import_vue4.h)("h2", { style: styles.subtitle }, "Environment"),
+        r.env.length === 0 ? (0, import_vue4.h)("p", { style: styles.muted }, "No variables declared \u2014 pass `env` to AdminModule.") : (0, import_vue4.h)(
+          "ul",
+          { style: styles.list },
+          r.env.map(
+            (e) => (0, import_vue4.h)("li", { key: e.name, style: styles.row }, [
+              (0, import_vue4.h)("span", { style: styles.mono }, e.name),
+              " ",
+              (0, import_vue4.h)("span", { style: e.set ? styles.ok : styles.bad }, e.set ? "set" : "missing")
+            ])
+          )
+        )
+      ];
+    });
+  }
+});
+
+// src/screens/DoctorScreen.ts
+var import_vue_admin4 = require("@fonderie/vue-admin");
+var import_vue5 = require("vue");
+var DoctorScreen = (0, import_vue5.defineComponent)({
+  name: "FonderieDoctorScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error, refresh } = (0, import_vue_admin4.useDoctor)(props.client);
+    return () => page(
+      "Doctor",
+      { isLoading, error },
+      () => {
+        const r = report.value;
+        if (!r) return null;
+        return (0, import_vue5.h)(
+          "ul",
+          { style: styles.list },
+          r.checks.map(
+            (c) => (0, import_vue5.h)("li", { key: c.name, style: styles.row }, [
+              (0, import_vue5.h)(
+                "span",
+                { style: c.skipped ? styles.muted : c.ok ? styles.ok : styles.bad },
+                c.skipped ? "skipped" : c.ok ? "ok" : "failed"
+              ),
+              " ",
+              (0, import_vue5.h)("span", { style: styles.mono }, c.name),
+              " ",
+              (0, import_vue5.h)("span", { style: styles.muted }, `${c.module} \xB7 ${c.durationMs} ms`),
+              c.skipped ? (0, import_vue5.h)("div", { style: styles.muted }, c.skipped) : null,
+              ...c.findings.map(
+                (f) => (0, import_vue5.h)("div", { key: f, style: c.ok ? styles.advice : styles.bad }, f)
+              )
+            ])
+          )
+        );
+      },
+      [
+        refreshButton("Run again", isLoading.value, () => void refresh()),
+        report.value && !isLoading.value ? (0, import_vue5.h)(
+          "span",
+          { style: report.value.ok ? styles.ok : styles.bad },
+          report.value.ok ? "all checks pass" : "a check failed"
+        ) : (0, import_vue5.h)("span")
+      ],
+      { loadingText: "Running the checks\u2026" }
+    );
+  }
+});
+
+// src/screens/ModulesScreen.ts
+var import_vue_admin5 = require("@fonderie/vue-admin");
+var import_vue6 = require("vue");
+var ModulesScreen = (0, import_vue6.defineComponent)({
+  name: "FonderieModulesScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { manifest, isLoading, error } = (0, import_vue_admin5.useManifest)(props.client);
+    return () => page("Modules", { isLoading, error }, () => {
+      const m = manifest.value;
+      if (!m) return null;
+      return [
+        (0, import_vue6.h)(
+          "p",
+          { style: styles.muted },
+          `${m.env} \xB7 admin ${m.admin.version} \xB7 admin log ${m.admin.log ? "on" : "off"} \xB7 ${m.routes.length} routes`
+        ),
+        table(
+          ["Module", "Version", "Readiness", "Describes admin"],
+          m.modules.map(
+            (mod) => (0, import_vue6.h)("tr", { key: mod.name }, [
+              td(mod.name, styles.mono),
+              td(mod.version ?? (0, import_vue6.h)("span", { style: styles.muted }, "not reported")),
+              td([
+                (0, import_vue6.h)(
+                  "span",
+                  { style: mod.readiness.ok ? styles.ok : styles.bad },
+                  mod.readiness.ok ? "ok" : "error"
+                ),
+                ...mod.readiness.problems.map(
+                  (p) => (0, import_vue6.h)(
+                    "div",
+                    {
+                      key: p.message,
+                      style: p.severity === "error" ? styles.bad : styles.advice
+                    },
+                    p.message
+                  )
+                )
+              ]),
+              td(mod.describesAdmin ? "yes" : (0, import_vue6.h)("span", { style: styles.muted }, "no"))
+            ])
+          )
+        )
+      ];
+    });
+  }
+});
+
+// src/screens/RoutesScreen.ts
+var import_vue_admin6 = require("@fonderie/vue-admin");
+var import_vue7 = require("vue");
+var RoutesScreen = (0, import_vue7.defineComponent)({
+  name: "FonderieRoutesScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error } = (0, import_vue_admin6.useAdminRoutes)(props.client);
+    return () => page(
+      "Routes",
+      { isLoading, error },
+      () => table(
+        ["Method", "Path", "Guard", "Module"],
+        (report.value?.routes ?? []).map(
+          (r) => (0, import_vue7.h)("tr", { key: `${r.method} ${r.path}` }, [
+            td(r.method, styles.mono),
+            td(r.path, styles.mono),
+            td((0, import_vue7.h)("span", { style: styles.badge }, r.guard)),
+            td(r.module ?? "application", styles.muted)
+          ])
+        )
+      )
+    );
+  }
+});
+
+// src/screens/TokensScreen.ts
+var import_vue_admin7 = require("@fonderie/vue-admin");
+var import_vue8 = require("vue");
+var TokensScreen = (0, import_vue8.defineComponent)({
+  name: "FonderieTokensScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error } = (0, import_vue_admin7.useAdminTokens)(props.client);
+    return () => page("Access", { isLoading, error }, () => {
+      const r = report.value;
+      if (!r) return null;
+      return [
+        (0, import_vue8.h)("h2", { style: styles.subtitle }, "Admin token"),
+        (0, import_vue8.h)("p", [
+          (0, import_vue8.h)(
+            "span",
+            { style: r.admin.ok ? styles.ok : styles.bad },
+            r.admin.ok ? "strong" : "weak"
+          ),
+          ...r.admin.problems.map(
+            (p) => (0, import_vue8.h)("div", { key: p.message, style: styles.bad }, p.message)
+          )
+        ]),
+        (0, import_vue8.h)("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
+        r.legacy.length === 0 ? (0, import_vue8.h)(
+          "p",
+          { style: styles.muted },
+          "None \u2014 every brick's admin surface goes through this token."
+        ) : (0, import_vue8.h)(
+          "ul",
+          { style: styles.list },
+          r.legacy.map(
+            (l) => (0, import_vue8.h)("li", { key: l.module, style: styles.row }, [
+              (0, import_vue8.h)("span", { style: styles.mono }, l.module),
+              " ",
+              (0, import_vue8.h)(
+                "span",
+                { style: styles.muted },
+                "still registers its standalone routes with its own token (deprecated)"
+              )
+            ])
+          )
+        )
+      ];
+    });
+  }
+});
+
+// src/screens/AdminShell.ts
+var NAV = [
+  { group: "Today", items: [{ page: "attention", label: "Attention" }] },
+  {
+    group: "System",
+    items: [
+      { page: "modules", label: "Modules" },
+      { page: "config", label: "Configuration" },
+      { page: "doctor", label: "Doctor" },
+      { page: "routes", label: "Routes" }
+    ]
+  },
+  { group: "Settings", items: [{ page: "settings", label: "Config & secrets", needs: "config" }] },
+  { group: "Messaging", items: [{ page: "templates", label: "Templates", needs: "courier" }] },
+  {
+    group: "Activity",
+    items: [
+      { page: "log", label: "Admin log" },
+      { page: "tokens", label: "Access" }
+    ]
+  }
+];
+var AdminShell = (0, import_vue9.defineComponent)({
+  name: "FonderieAdminShell",
+  props: {
+    client: { type: Object, required: true },
+    // Given ⇒ the Settings and Messaging pages appear. Construct them with
+    // `prefix: '/_admin'` to go through the one token.
+    configClient: { type: Object, default: void 0 },
+    courierClient: { type: Object, default: void 0 },
+    environment: { type: String, default: void 0 },
+    // Controlled navigation: pass `page` and listen to `navigate` to own the
+    // URL. Omit `page` and the shell keeps it itself.
+    page: { type: String, default: void 0 }
+  },
+  emits: { navigate: (_page) => true },
+  setup(props, { emit }) {
+    const own = (0, import_vue9.ref)("attention");
+    const current = (0, import_vue9.computed)(() => props.page ?? own.value);
+    const editing = (0, import_vue9.ref)(null);
+    const go = (p) => {
+      editing.value = null;
+      emit("navigate", p);
+      if (props.page === void 0) own.value = p;
+    };
+    const back = () => (0, import_vue9.h)(
+      "button",
+      { type: "button", style: styles.button, onClick: () => editing.value = null },
+      "\u2190 Back"
+    );
+    const body = () => {
+      const c = props.client;
+      switch (current.value) {
+        case "attention":
+          return (0, import_vue9.h)(AttentionScreen, { client: c });
+        case "modules":
+          return (0, import_vue9.h)(ModulesScreen, { client: c });
+        case "doctor":
+          return (0, import_vue9.h)(DoctorScreen, { client: c });
+        case "config":
+          return (0, import_vue9.h)(ConfigScreen, { client: c });
+        case "routes":
+          return (0, import_vue9.h)(RoutesScreen, { client: c });
+        case "tokens":
+          return (0, import_vue9.h)(TokensScreen, { client: c });
+        case "log":
+          return (0, import_vue9.h)(AdminLogScreen, { client: c });
+        case "settings": {
+          const cc = props.configClient;
+          if (!cc)
+            return (0, import_vue9.h)(
+              "p",
+              { style: styles.status },
+              "Pass a ConfigAdminClient to manage config and secrets here."
+            );
+          const e = editing.value;
+          if (e && e.kind !== "template")
+            return [
+              back(),
+              (0, import_vue9.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
+                client: cc,
+                kind: e.kind,
+                configKey: e.key,
+                ...props.environment !== void 0 ? { environment: props.environment } : {},
+                onSaved: () => editing.value = null
+              })
+            ];
+          return (0, import_vue9.h)(import_vue_config_admin_screens.ConfigListScreen, {
+            client: cc,
+            ...props.environment !== void 0 ? { environment: props.environment } : {},
+            "onSelect-config": (key) => editing.value = { kind: "config", key },
+            "onSelect-secret": (key) => editing.value = { kind: "secret", key }
+          });
+        }
+        case "templates": {
+          const kc = props.courierClient;
+          if (!kc)
+            return (0, import_vue9.h)(
+              "p",
+              { style: styles.status },
+              "Pass a CourierAdminClient to manage templates here."
+            );
+          const e = editing.value;
+          if (e?.kind === "template")
+            return [
+              back(),
+              (0, import_vue9.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
+                client: kc,
+                type: e.type,
+                onSaved: () => editing.value = null
+              })
+            ];
+          return (0, import_vue9.h)(import_vue_courier_admin_screens.TemplateListScreen, {
+            client: kc,
+            "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
+          });
+        }
+      }
+    };
+    return () => (0, import_vue9.h)("div", { style: styles.shell }, [
+      (0, import_vue9.h)(
+        "nav",
+        { style: styles.nav, "aria-label": "Admin" },
+        NAV.map((g) => {
+          const items = g.items.filter(
+            (i) => !i.needs || (i.needs === "config" ? props.configClient : props.courierClient)
+          );
+          if (items.length === 0) return null;
+          return (0, import_vue9.h)("div", { key: g.group }, [
+            (0, import_vue9.h)("div", { style: styles.navGroup }, g.group),
+            ...items.map(
+              (i) => (0, import_vue9.h)(
+                "button",
+                {
+                  key: i.page,
+                  type: "button",
+                  style: {
+                    ...styles.navItem,
+                    ...current.value === i.page ? styles.navItemActive : {}
+                  },
+                  "aria-current": current.value === i.page ? "page" : void 0,
+                  onClick: () => go(i.page)
+                },
+                i.label
+              )
+            )
+          ]);
+        })
+      ),
+      (0, import_vue9.h)("main", { style: styles.main }, body())
+    ]);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdminLogScreen,
+  AdminShell,
+  AttentionScreen,
+  ConfigScreen,
+  DoctorScreen,
+  ModulesScreen,
+  RoutesScreen,
+  TokensScreen
+});
+//# sourceMappingURL=index.cjs.map