@webx-ui/module-admin 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,64 +1,93 @@
-import { inject as C, reactive as T, computed as A, defineComponent as O, resolveComponent as v, openBlock as _, createBlock as U, unref as d, withCtx as g, createElementBlock as x, Fragment as j, renderList as z, ref as M, createVNode as w, createTextVNode as R, toDisplayString as N, renderSlot as L, createCommentVNode as G, isRef as J, createApp as Q, h as k } from "vue";
-import { useRouter as Y, useRoute as Z, createRouter as ee, createWebHistory as te } from "vue-router";
-import { useResponsiveShell as ne, WxToaster as ae, WebxUI as oe, localesKey as se } from "@webx-ui/core";
-const D = /* @__PURE__ */ Symbol("webx-admin");
-function H() {
-  const e = C(D, null);
+import { inject as R, reactive as C, computed as k, defineComponent as M, resolveComponent as y, openBlock as w, createBlock as S, unref as d, withCtx as x, createElementBlock as _, Fragment as U, renderList as P, ref as T, createVNode as b, createTextVNode as I, toDisplayString as W, renderSlot as $, createCommentVNode as J, isRef as Q, createApp as Y, h as A, useModel as Z, watch as ee, mergeModels as D } from "vue";
+import { useRouter as te, useRoute as ne, createRouter as ae, createWebHistory as le } from "vue-router";
+import { useResponsiveShell as oe, WxToaster as se, WebxUI as re, localesKey as ie, WxAlert as ce, WxSkeleton as ue } from "@webx-ui/core";
+import { WxScreenRenderer as de } from "@webx-ui/schema";
+const F = /* @__PURE__ */ Symbol("webx-admin");
+function N() {
+  const e = R(F, null);
   if (e === null)
     throw new Error("useAdmin() was called outside a panel created by createAdmin().");
   return e;
 }
-function le(e) {
-  const t = T({
+function fe(e) {
+  const n = C({
     status: "loading",
     manifest: null,
     user: null,
     error: null
-  }), n = A(() => {
-    const s = t.manifest;
-    if (s === null)
+  }), o = k(() => {
+    const t = n.manifest;
+    if (t === null)
       return [];
-    const o = [];
-    for (const l of s.modules) {
-      const a = e.modules.find((i) => i.id === l.id);
-      if (a === void 0)
+    const a = [];
+    for (const c of t.modules) {
+      const s = e.modules.find((h) => h.id === c.id);
+      if (s === void 0)
         continue;
-      const r = a.path ?? a.routes?.[0]?.path;
-      r !== void 0 && o.push({
-        id: l.id,
-        title: l.title,
-        icon: l.icon,
-        path: r
+      const v = s.path ?? s.routes?.[0]?.path;
+      v !== void 0 && a.push({
+        id: c.id,
+        title: c.title,
+        icon: c.icon,
+        path: v,
+        group: c.group ?? null
       });
     }
-    return o;
-  });
-  let c = null;
-  async function u() {
-    t.status = "loading", t.error = null;
+    return a;
+  }), u = k(() => {
+    const t = n.manifest?.groups ?? [], a = [], c = /* @__PURE__ */ new Map();
+    for (const s of o.value)
+      if (s.group !== null && t.some((v) => v.id === s.group)) {
+        const v = c.get(s.group) ?? [];
+        v.push(s), c.set(s.group, v);
+      } else
+        a.push(s);
+    return {
+      top: a,
+      groups: t.filter((s) => c.has(s.id)).map((s) => ({
+        id: s.id,
+        title: s.title,
+        entries: c.get(s.id) ?? []
+      }))
+    };
+  }), f = {};
+  for (const t of e.modules)
+    Object.assign(f, t.types);
+  Object.assign(f, e.types);
+  const m = /* @__PURE__ */ new Map();
+  async function p(t) {
+    const a = `${e.i18n.state.locale}:${t}`;
+    let c = m.get(a);
+    return c === void 0 && (c = e.http.get(`${e.apiPath}/screens/${t}`).then((s) => s.data.root).catch((s) => {
+      throw m.delete(a), s;
+    }), m.set(a, c)), c;
+  }
+  let r = null;
+  async function i() {
+    n.status = "loading", n.error = null;
     try {
-      if (c !== null && (t.user = await c(), t.user === null)) {
-        t.manifest = null, t.status = "unauthenticated";
+      if (r !== null && (n.user = await r(), n.user === null)) {
+        n.manifest = null, n.status = "unauthenticated";
         return;
       }
-      const s = await e.loadManifest();
-      t.manifest = s, e.i18n.state.contentLocales = s.locales ?? [], e.i18n.state.panelLocales = s.panelLocales ?? e.i18n.state.panelLocales, s.locale !== void 0 && s.locale !== e.i18n.state.locale && await f(s.locale), t.status = "ready";
-    } catch (s) {
-      if (ie(s)) {
-        t.manifest = null, t.user = null, t.status = "unauthenticated";
+      const t = await e.loadManifest();
+      n.manifest = t, e.i18n.state.contentLocales = t.locales ?? [], e.i18n.state.panelLocales = t.panelLocales ?? e.i18n.state.panelLocales, t.locale !== void 0 && t.locale !== e.i18n.state.locale && await l(t.locale), n.status = "ready";
+    } catch (t) {
+      if (pe(t)) {
+        n.manifest = null, n.user = null, n.status = "unauthenticated";
         return;
       }
-      t.error = s instanceof Error ? s.message : String(s), t.status = "error";
+      n.error = t instanceof Error ? t.message : String(t), n.status = "error";
     }
   }
-  async function f(s) {
+  async function l(t) {
     if (e.loadDictionary === void 0) {
-      e.i18n.state.locale = s;
+      e.i18n.state.locale = t;
       return;
     }
-    if (await e.loadDictionary(s), t.manifest !== null)
+    if (await e.loadDictionary(t), n.manifest !== null)
       try {
-        t.manifest = await e.loadManifest();
+        n.manifest = await e.loadManifest();
       } catch {
       }
   }
@@ -66,187 +95,209 @@ function le(e) {
     http: e.http,
     basePath: e.basePath,
     apiPath: e.apiPath,
-    state: t,
+    state: n,
     i18n: e.i18n,
     modules: e.modules,
-    nav: n,
-    reload: u,
-    setLocale: f,
-    setUser(s) {
-      t.user = s;
+    nav: o,
+    groups: u,
+    types: f,
+    reload: i,
+    setLocale: l,
+    setUser(t) {
+      n.user = t;
+    },
+    useSessionLoader(t) {
+      r = t;
     },
-    useSessionLoader(s) {
-      c = s;
+    can(t) {
+      const a = n.user;
+      return a === null ? !1 : a.isSuper || a.permissions.includes(t);
     },
-    can(s) {
-      const o = t.user;
-      return o === null ? !1 : o.isSuper || o.permissions.includes(s);
+    loadScreen: p,
+    screenPatch(t) {
+      return e.screens?.[t] ?? [];
     }
   };
 }
-function re(e, t) {
-  e.provide(D, t);
+function me(e, n) {
+  e.provide(F, n);
 }
-function ie(e) {
+function pe(e) {
   return typeof e == "object" && e !== null && "status" in e && e.status === 401;
 }
-const $ = /* @__PURE__ */ Symbol("webx-i18n");
-function Re() {
-  const e = C($, null);
+const O = /* @__PURE__ */ Symbol("webx-i18n");
+function De() {
+  const e = R(O, null);
   if (e === null)
     throw new Error("useI18n() was called outside a panel created by createAdmin().");
   return e;
 }
-function F(e) {
-  const t = C($, null);
-  return t === null ? V().scope(e) : t.scope(e);
+function j(e) {
+  const n = R(O, null);
+  return n === null ? X().scope(e) : n.scope(e);
 }
-function ce(e, t) {
-  e.provide($, t);
+function he(e, n) {
+  e.provide(O, n);
 }
-function V(e = {}) {
-  const t = e.fallback ?? "en", n = T({
-    locale: e.locale ?? t,
-    fallback: t,
+function X(e = {}) {
+  const n = e.fallback ?? "en", o = C({
+    locale: e.locale ?? n,
+    fallback: n,
     panelLocales: [],
     contentLocales: []
-  }), c = {}, u = T({ value: {} });
-  function f(o, l, a) {
-    let r = o[l]?.[a[0] ?? ""];
-    for (const i of a.slice(1)) {
-      if (typeof r != "object" || r === null)
+  }), u = {}, f = C({ value: {} });
+  function m(r, i, l) {
+    let t = r[i]?.[l[0] ?? ""];
+    for (const a of l.slice(1)) {
+      if (typeof t != "object" || t === null)
         return null;
-      r = r[i];
+      t = t[a];
     }
-    return typeof r == "string" ? r : null;
+    return typeof t == "string" ? t : null;
   }
-  function s(o, l, a) {
-    const [r, i] = l.includes("::") ? l.split("::", 2) : [o, l], m = i.split("."), y = f(u.value, r, m) ?? f(c, r, m) ?? // Not an empty string: a key on screen is ugly, but it says which key, and a blank
+  function p(r, i, l) {
+    const [t, a] = i.includes("::") ? i.split("::", 2) : [r, i], c = a.split("."), s = m(f.value, t, c) ?? m(u, t, c) ?? // Not an empty string: a key on screen is ugly, but it says which key, and a blank
     // label says nothing to anybody trying to fix it.
-    l;
-    return a === void 0 ? y : ue(y, a);
+    i;
+    return l === void 0 ? s : ve(s, l);
   }
   return {
-    state: n,
-    defaults(o, l) {
-      c[o] = { ...c[o], ...l };
+    state: o,
+    defaults(r, i) {
+      u[r] = { ...u[r], ...i };
     },
-    load(o, l, a) {
-      u.value = o ?? {}, n.locale = l ?? n.locale, a !== void 0 && (n.fallback = a);
+    load(r, i, l) {
+      f.value = r ?? {}, o.locale = i ?? o.locale, l !== void 0 && (o.fallback = l);
     },
-    scope(o) {
-      return (l, a) => s(o, l, a);
+    scope(r) {
+      return (i, l) => p(r, i, l);
     },
-    t: (o, l) => s("", o, l)
+    t: (r, i) => p("", r, i)
   };
 }
-function ue(e, t) {
-  let n = e;
-  for (const [c, u] of Object.entries(t))
-    n = n.replaceAll(`:${c}`, String(u));
-  return n;
+function ve(e, n) {
+  let o = e;
+  for (const [u, f] of Object.entries(n))
+    o = o.replaceAll(`:${u}`, String(f));
+  return o;
 }
-const de = /* @__PURE__ */ O({
+const we = /* @__PURE__ */ M({
   __name: "AdminNav",
   props: {
     collapsed: { type: Boolean }
   },
   emits: ["select"],
-  setup(e, { emit: t }) {
-    const n = t, c = H(), u = F("webx-admin"), f = Y(), s = Z(), o = A({
-      get: () => c.nav.value.find((a) => s.path.startsWith(a.path))?.id ?? "",
-      set: (l) => {
-        const a = c.nav.value.find((r) => r.id === l);
-        a !== void 0 && f.push(a.path);
+  setup(e, { emit: n }) {
+    const o = n, u = N(), f = j("webx-admin"), m = te(), p = ne(), r = k({
+      get: () => u.nav.value.find((l) => p.path.startsWith(l.path))?.id ?? "",
+      set: (i) => {
+        const l = u.nav.value.find((t) => t.id === i);
+        l !== void 0 && m.push(l.path);
       }
     });
-    return (l, a) => {
-      const r = v("wx-menu-item"), i = v("wx-menu");
-      return _(), U(i, {
-        modelValue: o.value,
-        "onUpdate:modelValue": a[0] || (a[0] = (m) => o.value = m),
+    return (i, l) => {
+      const t = y("wx-menu-item"), a = y("wx-submenu"), c = y("wx-menu");
+      return w(), S(c, {
+        modelValue: r.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (s) => r.value = s),
         collapsed: e.collapsed,
-        label: d(u)("nav.sections"),
-        onSelect: a[1] || (a[1] = (m) => n("select"))
+        label: d(f)("nav.sections"),
+        onSelect: l[1] || (l[1] = (s) => o("select"))
       }, {
-        default: g(() => [
-          (_(!0), x(j, null, z(d(c).nav.value, (m) => (_(), U(r, {
-            key: m.id,
-            value: m.id,
-            icon: m.icon ?? void 0,
-            label: m.title
-          }, null, 8, ["value", "icon", "label"]))), 128))
+        default: x(() => [
+          (w(!0), _(U, null, P(d(u).groups.value.top, (s) => (w(), S(t, {
+            key: s.id,
+            value: s.id,
+            icon: s.icon ?? void 0,
+            label: s.title
+          }, null, 8, ["value", "icon", "label"]))), 128)),
+          (w(!0), _(U, null, P(d(u).groups.value.groups, (s) => (w(), S(a, {
+            key: s.id,
+            value: `group:${s.id}`,
+            title: s.title,
+            icon: "gear"
+          }, {
+            default: x(() => [
+              (w(!0), _(U, null, P(s.entries, (v) => (w(), S(t, {
+                key: v.id,
+                value: v.id,
+                icon: v.icon ?? void 0,
+                label: v.title
+              }, null, 8, ["value", "icon", "label"]))), 128))
+            ]),
+            _: 2
+          }, 1032, ["value", "title"]))), 128))
         ]),
         _: 1
       }, 8, ["modelValue", "collapsed", "label"]);
     };
   }
-}), fe = {
+}), ge = {
   key: 0,
   class: "wx-root wx-admin-plain"
-}, me = {
+}, ye = {
   key: 1,
   class: "wx-root wx-admin-plain"
-}, pe = {
+}, be = {
   key: 2,
   class: "wx-root wx-admin-plain"
-}, he = /* @__PURE__ */ O({
+}, xe = /* @__PURE__ */ M({
   __name: "AdminShell",
   setup(e) {
-    const t = H(), n = F("webx-admin"), c = M(null), { layout: u, collapsed: f, showAside: s, drawerOpen: o, toggle: l, close: a } = ne(c, {
+    const n = N(), o = j("webx-admin"), u = T(null), { layout: f, collapsed: m, showAside: p, drawerOpen: r, toggle: i, close: l } = oe(u, {
       persist: "webx-admin-shell"
     });
-    return (r, i) => {
-      const m = v("router-view"), y = v("wx-loading"), b = v("wx-button"), p = v("wx-result"), h = v("wx-action"), S = v("wx-text"), K = v("wx-header"), W = v("wx-aside"), q = v("wx-main"), P = v("wx-container"), B = v("wx-drawer");
-      return _(), x(j, null, [
-        w(d(ae)),
-        d(t).state.status === "unauthenticated" ? (_(), x("div", fe, [
-          w(m)
-        ])) : d(t).state.status === "loading" ? (_(), x("div", me, [
-          w(y, {
-            label: d(n)("shell.loading")
+    return (t, a) => {
+      const c = y("router-view"), s = y("wx-loading"), v = y("wx-button"), h = y("wx-result"), g = y("wx-action"), E = y("wx-text"), K = y("wx-header"), q = y("wx-aside"), B = y("wx-main"), V = y("wx-container"), G = y("wx-drawer");
+      return w(), _(U, null, [
+        b(d(se)),
+        d(n).state.status === "unauthenticated" ? (w(), _("div", ge, [
+          b(c)
+        ])) : d(n).state.status === "loading" ? (w(), _("div", ye, [
+          b(s, {
+            label: d(o)("shell.loading")
           }, null, 8, ["label"])
-        ])) : d(t).state.status === "error" ? (_(), x("div", pe, [
-          w(p, {
+        ])) : d(n).state.status === "error" ? (w(), _("div", be, [
+          b(h, {
             status: "error",
-            title: d(n)("shell.error-title"),
-            description: d(t).state.error
+            title: d(o)("shell.error-title"),
+            description: d(n).state.error
           }, {
-            default: g(() => [
-              w(b, {
+            default: x(() => [
+              b(v, {
                 type: "primary",
-                onClick: i[0] || (i[0] = (E) => d(t).reload())
+                onClick: a[0] || (a[0] = (L) => d(n).reload())
               }, {
-                default: g(() => [
-                  R(N(d(n)("shell.retry")), 1)
+                default: x(() => [
+                  I(W(d(o)("shell.retry")), 1)
                 ]),
                 _: 1
               })
             ]),
             _: 1
           }, 8, ["title", "description"])
-        ])) : (_(), x("div", {
+        ])) : (w(), _("div", {
           key: 3,
           ref_key: "shellEl",
-          ref: c,
+          ref: u,
           class: "wx-root wx-admin"
         }, [
-          w(P, { viewport: "" }, {
-            default: g(() => [
-              w(K, null, {
-                end: g(() => [
-                  L(r.$slots, "user", {}, void 0, !0)
+          b(V, { viewport: "" }, {
+            default: x(() => [
+              b(K, null, {
+                end: x(() => [
+                  $(t.$slots, "user", {}, void 0, !0)
                 ]),
-                default: g(() => [
-                  w(h, {
-                    icon: d(u) === "drawer" ? "menu" : "sidebar",
-                    title: d(u) === "drawer" ? d(n)("nav.menu") : d(n)("nav.collapse"),
-                    onClick: d(l)
+                default: x(() => [
+                  b(g, {
+                    icon: d(f) === "drawer" ? "menu" : "sidebar",
+                    title: d(f) === "drawer" ? d(o)("nav.menu") : d(o)("nav.collapse"),
+                    onClick: d(i)
                   }, null, 8, ["icon", "title", "onClick"]),
-                  L(r.$slots, "brand", {}, () => [
-                    w(S, { weight: "semibold" }, {
-                      default: g(() => [
-                        R(N(d(t).state.manifest?.title), 1)
+                  $(t.$slots, "brand", {}, () => [
+                    b(E, { weight: "semibold" }, {
+                      default: x(() => [
+                        I(W(d(n).state.manifest?.title), 1)
                       ]),
                       _: 1
                     })
@@ -254,26 +305,26 @@ const de = /* @__PURE__ */ O({
                 ]),
                 _: 3
               }),
-              w(P, { direction: "horizontal" }, {
-                default: g(() => [
-                  d(s) ? (_(), U(W, {
+              b(V, { direction: "horizontal" }, {
+                default: x(() => [
+                  d(p) ? (w(), S(q, {
                     key: 0,
-                    collapsed: d(f),
+                    collapsed: d(m),
                     width: 220,
                     scroll: ""
                   }, {
-                    default: g(() => [
-                      L(r.$slots, "nav", { collapsed: d(f) }, void 0, !0)
+                    default: x(() => [
+                      $(t.$slots, "nav", { collapsed: d(m) }, void 0, !0)
                     ]),
                     _: 3
-                  }, 8, ["collapsed"])) : G("", !0),
-                  w(q, {
+                  }, 8, ["collapsed"])) : J("", !0),
+                  b(B, {
                     padding: "md",
                     scroll: "",
                     class: "wx-admin__screen"
                   }, {
-                    default: g(() => [
-                      w(m)
+                    default: x(() => [
+                      b(c)
                     ]),
                     _: 1
                   })
@@ -283,19 +334,19 @@ const de = /* @__PURE__ */ O({
             ]),
             _: 3
           }),
-          w(B, {
-            open: d(o),
-            "onUpdate:open": i[2] || (i[2] = (E) => J(o) ? o.value = E : null),
-            title: d(n)("nav.menu"),
+          b(G, {
+            open: d(r),
+            "onUpdate:open": a[2] || (a[2] = (L) => Q(r) ? r.value = L : null),
+            title: d(o)("nav.menu"),
             side: "left",
             size: 260,
             closable: ""
           }, {
-            default: g(() => [
-              L(r.$slots, "nav", {
+            default: x(() => [
+              $(t.$slots, "nav", {
                 collapsed: !1,
-                onSelect: i[1] || (i[1] = //@ts-ignore
-                (...E) => d(a) && d(a)(...E))
+                onSelect: a[1] || (a[1] = //@ts-ignore
+                (...L) => d(l) && d(l)(...L))
               }, void 0, !0)
             ]),
             _: 3
@@ -304,15 +355,15 @@ const de = /* @__PURE__ */ O({
       ], 64);
     };
   }
-}), we = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [c, u] of t)
-    n[c] = u;
-  return n;
-}, ve = /* @__PURE__ */ we(he, [["__scopeId", "data-v-9ef35d4d"]]);
-class ge extends Error {
-  constructor(t, n, c = {}, u = null, f = null) {
-    super(t), this.status = n, this.errors = c, this.retryAfter = u, this.body = f, this.name = "HttpError";
+}), _e = (e, n) => {
+  const o = e.__vccOpts || e;
+  for (const [u, f] of n)
+    o[u] = f;
+  return o;
+}, Se = /* @__PURE__ */ _e(xe, [["__scopeId", "data-v-9ef35d4d"]]);
+class ke extends Error {
+  constructor(n, o, u = {}, f = null, m = null) {
+    super(n), this.status = o, this.errors = u, this.retryAfter = f, this.body = m, this.name = "HttpError";
   }
   status;
   errors;
@@ -329,86 +380,86 @@ class ge extends Error {
     return this.status === 429;
   }
 }
-const ye = /* @__PURE__ */ new Set(["POST", "PUT", "PATCH", "DELETE"]);
-function _e(e = {}) {
-  const t = (e.baseUrl ?? "").replace(/\/$/, ""), n = e.csrfUrl ?? "/sanctum/csrf-cookie", c = e.fetch ?? globalThis.fetch.bind(globalThis), u = e.onUnauthenticated, f = e.headers;
-  let s = !1;
-  async function o(a = !1) {
-    s && !a && I("XSRF-TOKEN") !== null || (await c(n, { credentials: "same-origin" }), s = !0);
+const Ee = /* @__PURE__ */ new Set(["POST", "PUT", "PATCH", "DELETE"]);
+function Le(e = {}) {
+  const n = (e.baseUrl ?? "").replace(/\/$/, ""), o = e.csrfUrl ?? "/sanctum/csrf-cookie", u = e.fetch ?? globalThis.fetch.bind(globalThis), f = e.onUnauthenticated, m = e.headers;
+  let p = !1;
+  async function r(l = !1) {
+    p && !l && H("XSRF-TOKEN") !== null || (await u(o, { credentials: "same-origin" }), p = !0);
   }
-  async function l(a, r, i, m = {}, y = !1) {
-    const b = ye.has(a);
-    b && await o();
-    const p = {
+  async function i(l, t, a, c = {}, s = !1) {
+    const v = Ee.has(l);
+    v && await r();
+    const h = {
       Accept: "application/json",
       "X-Requested-With": "XMLHttpRequest",
       // Standing headers first, so a caller can still override one for a single request.
-      ...f?.(),
-      ...m.headers
+      ...m?.(),
+      ...c.headers
     };
-    if (b) {
-      const S = I("XSRF-TOKEN");
-      S !== null && (p["X-XSRF-TOKEN"] = S);
+    if (v) {
+      const E = H("XSRF-TOKEN");
+      E !== null && (h["X-XSRF-TOKEN"] = E);
     }
-    i !== void 0 && (p["Content-Type"] = "application/json");
-    const h = await c(xe(t, r, m.query), {
-      method: a,
+    a !== void 0 && (h["Content-Type"] = "application/json");
+    const g = await u(Ae(n, t, c.query), {
+      method: l,
       credentials: "same-origin",
-      headers: p,
-      signal: m.signal,
-      body: i === void 0 ? void 0 : JSON.stringify(i)
+      headers: h,
+      signal: c.signal,
+      body: a === void 0 ? void 0 : JSON.stringify(a)
     });
-    if (h.status === 419 && b && !y)
-      return await o(!0), l(a, r, i, m, !0);
-    if (h.status === 401 && u?.(), !h.ok)
-      throw await be(h);
-    if (h.status !== 204)
-      return await h.json();
+    if (g.status === 419 && v && !s)
+      return await r(!0), i(l, t, a, c, !0);
+    if (g.status === 401 && f?.(), !g.ok)
+      throw await $e(g);
+    if (g.status !== 204)
+      return await g.json();
   }
   return {
-    get: (a, r) => l("GET", a, void 0, r),
-    post: (a, r, i) => l("POST", a, r, i),
-    put: (a, r, i) => l("PUT", a, r, i),
-    patch: (a, r, i) => l("PATCH", a, r, i),
-    delete: (a, r) => l("DELETE", a, void 0, r)
+    get: (l, t) => i("GET", l, void 0, t),
+    post: (l, t, a) => i("POST", l, t, a),
+    put: (l, t, a) => i("PUT", l, t, a),
+    patch: (l, t, a) => i("PATCH", l, t, a),
+    delete: (l, t) => i("DELETE", l, void 0, t)
   };
 }
-async function be(e) {
-  let t = null;
+async function $e(e) {
+  let n = null;
   try {
-    t = await e.json();
+    n = await e.json();
   } catch {
   }
-  const n = t ?? {}, c = typeof n.message == "string" && n.message !== "" ? n.message : e.statusText || `Request failed with ${e.status}`, u = n.errors !== null && typeof n.errors == "object" ? n.errors : {}, f = e.headers.get("Retry-After"), s = f === null ? null : Number.parseInt(f, 10);
-  return new ge(
-    c,
-    e.status,
+  const o = n ?? {}, u = typeof o.message == "string" && o.message !== "" ? o.message : e.statusText || `Request failed with ${e.status}`, f = o.errors !== null && typeof o.errors == "object" ? o.errors : {}, m = e.headers.get("Retry-After"), p = m === null ? null : Number.parseInt(m, 10);
+  return new ke(
     u,
-    Number.isFinite(s) ? s : null,
-    t
+    e.status,
+    f,
+    Number.isFinite(p) ? p : null,
+    n
   );
 }
-function xe(e, t, n) {
-  const u = /^https?:\/\//i.test(t) ? t : `${e}/${t.replace(/^\//, "")}`;
-  if (n === void 0)
-    return u;
-  const f = new URLSearchParams();
-  for (const [o, l] of Object.entries(n))
-    l != null && f.set(o, String(l));
-  const s = f.toString();
-  return s === "" ? u : `${u}${u.includes("?") ? "&" : "?"}${s}`;
+function Ae(e, n, o) {
+  const f = /^https?:\/\//i.test(n) ? n : `${e}/${n.replace(/^\//, "")}`;
+  if (o === void 0)
+    return f;
+  const m = new URLSearchParams();
+  for (const [r, i] of Object.entries(o))
+    i != null && m.set(r, String(i));
+  const p = m.toString();
+  return p === "" ? f : `${f}${f.includes("?") ? "&" : "?"}${p}`;
 }
-function I(e) {
+function H(e) {
   if (typeof document > "u")
     return null;
-  for (const t of document.cookie.split(";")) {
-    const [n, ...c] = t.trim().split("=");
-    if (n === e)
-      return decodeURIComponent(c.join("="));
+  for (const n of document.cookie.split(";")) {
+    const [o, ...u] = n.trim().split("=");
+    if (o === e)
+      return decodeURIComponent(u.join("="));
   }
   return null;
 }
-const Se = {
+const Ue = {
   shell: {
     loading: "Loading the panel…",
     "error-title": "The panel could not start",
@@ -422,119 +473,176 @@ const Se = {
     collapse: "Collapse the menu",
     language: "Language"
   }
-}, X = "webx.locale";
-function Ne(e = {}) {
-  const t = e.manifestUrl ?? Ue() ?? "/api/cms/manifest", n = e.apiPath ?? t.replace(/\/manifest\/?$/, ""), c = e.basePath ?? "/cms", u = e.modules ?? [], f = [...e.routes ?? []];
-  for (const p of u)
-    f.push(...p.routes ?? []);
-  const s = ee({
-    history: te(c),
-    routes: f
-  }), o = V({ locale: e.locale ?? Le() }), l = e.http ?? _e({
+}, z = "webx.locale";
+function He(e = {}) {
+  const n = e.manifestUrl ?? Ne() ?? "/api/cms/manifest", o = e.apiPath ?? n.replace(/\/manifest\/?$/, ""), u = e.basePath ?? "/cms", f = e.modules ?? [], m = [...e.routes ?? []];
+  for (const h of f)
+    m.push(...h.routes ?? []);
+  const p = ae({
+    history: le(u),
+    routes: m
+  }), r = X({ locale: e.locale ?? Pe() }), i = e.http ?? Le({
     baseUrl: "",
     onUnauthenticated: () => {
-      r.setUser(null), r.state.status = "unauthenticated";
+      t.setUser(null), t.state.status = "unauthenticated";
     },
     // Every request says which language the panel is currently showing. It decides what
     // the server writes its own messages in — a 422 under a field — for anybody who has
     // not stored a preference yet, which is everybody until they choose one. Without it,
     // signing in on a Russian sign-in screen lands in an English panel.
-    headers: () => ({ "X-Webx-Locale": o.state.locale })
+    headers: () => ({ "X-Webx-Locale": r.state.locale })
   });
-  o.defaults("webx-admin", Se);
-  async function a(p) {
-    const h = await l.get(`${n}/translations/${p}`);
-    o.load(h.data.namespaces, h.data.locale, h.data.fallback), ke(h.data.locale), Te(h.data.locale, o.state.panelLocales);
+  r.defaults("webx-admin", Ue);
+  async function l(h) {
+    const g = await i.get(`${o}/translations/${h}`);
+    r.load(g.data.namespaces, g.data.locale, g.data.fallback), Ce(g.data.locale), Me(g.data.locale, r.state.panelLocales);
   }
-  const r = le({
-    http: l,
-    basePath: c,
-    apiPath: n,
-    modules: u,
-    i18n: o,
-    loadDictionary: a,
-    loadManifest: async () => (await l.get(t)).data
-  }), i = Q(Ee(e));
-  i.use(oe), re(i, r), ce(i, o);
-  const m = M("");
-  i.provide(se, {
-    list: A(
-      () => o.state.contentLocales.map((p) => ({
-        code: p.code,
-        label: p.code.toUpperCase()
+  const t = fe({
+    http: i,
+    basePath: u,
+    apiPath: o,
+    modules: f,
+    i18n: r,
+    loadDictionary: l,
+    types: e.types,
+    screens: e.screens,
+    loadManifest: async () => (await i.get(n)).data
+  }), a = Y(Te(e));
+  a.use(re), me(a, t), he(a, r);
+  const c = T("");
+  a.provide(ie, {
+    list: k(
+      () => r.state.contentLocales.map((h) => ({
+        code: h.code,
+        label: h.code.toUpperCase()
       }))
     ),
-    active: A({
-      get: () => m.value || (o.state.contentLocales[0]?.code ?? ""),
-      set: (p) => {
-        m.value = p;
+    active: k({
+      get: () => c.value || (r.state.contentLocales[0]?.code ?? ""),
+      set: (h) => {
+        c.value = h;
       }
     })
   });
-  const y = {
-    app: i,
-    router: s,
-    context: r,
-    i18n: o,
+  const s = {
+    app: a,
+    router: p,
+    context: t,
+    i18n: r,
     async mount() {
-      await Promise.all([b(), a(o.state.locale)]).catch(() => {
-      }), i.mount(e.el ?? "#webx-app"), await r.reload();
+      await Promise.all([v(), l(r.state.locale)]).catch(() => {
+      }), a.mount(e.el ?? "#webx-app"), await t.reload();
     }
   };
-  async function b() {
-    const p = await l.get(`${n}/locales`);
-    o.state.panelLocales = p.data.panel, o.state.contentLocales = p.data.content;
+  async function v() {
+    const h = await i.get(`${o}/locales`);
+    r.state.panelLocales = h.data.panel, r.state.contentLocales = h.data.content;
   }
-  for (const p of e.plugins ?? [])
-    p.install(y);
-  return i.use(s), y;
+  for (const h of e.plugins ?? [])
+    h.install(s);
+  return a.use(p), s;
 }
-function Ee(e) {
-  const t = {
+function Te(e) {
+  const n = {
     // The menu is the panel's own: it is the manifest, drawn.
-    nav: (n) => k(de, { collapsed: n.collapsed === !0 })
+    nav: (o) => A(we, { collapsed: o.collapsed === !0 })
   };
-  return e.brand !== void 0 && (t.brand = () => k(e.brand)), e.userMenu !== void 0 && (t.user = () => k(e.userMenu)), { render: () => k(ve, null, t) };
+  return e.brand !== void 0 && (n.brand = () => A(e.brand)), e.userMenu !== void 0 && (n.user = () => A(e.userMenu)), { render: () => A(Se, null, n) };
 }
-function Le() {
-  const e = Ae(X);
+function Pe() {
+  const e = Re(z);
   return e !== null ? e : typeof document < "u" && document.documentElement.lang !== "" ? document.documentElement.lang : typeof navigator > "u" ? "en" : navigator.language;
 }
-function ke(e) {
+function Ce(e) {
   try {
-    localStorage.setItem(X, e);
+    localStorage.setItem(z, e);
   } catch {
   }
 }
-function Ae(e) {
+function Re(e) {
   try {
     return localStorage.getItem(e);
   } catch {
     return null;
   }
 }
-function Te(e, t) {
-  typeof document > "u" || (document.documentElement.lang = e, document.documentElement.dir = t.find((n) => n.code === e)?.direction ?? "ltr");
+function Me(e, n) {
+  typeof document > "u" || (document.documentElement.lang = e, document.documentElement.dir = n.find((o) => o.code === e)?.direction ?? "ltr");
 }
-function Ue() {
+function Ne() {
   return typeof document > "u" ? null : document.querySelector('meta[name="webx-manifest"]')?.getAttribute("content") ?? null;
 }
+const Oe = { class: "wx-screen-host" }, Fe = /* @__PURE__ */ M({
+  __name: "Screen",
+  props: /* @__PURE__ */ D({
+    name: {},
+    errors: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    labelPosition: { default: void 0 },
+    labelWidth: { default: void 0 },
+    size: { default: void 0 }
+  }, {
+    modelValue: { default: () => ({}) },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ D(["loaded"], ["update:modelValue"]),
+  setup(e, { expose: n, emit: o }) {
+    const u = e, f = o, m = Z(e, "modelValue"), p = N(), r = j("webx-admin"), i = T(null), l = T(null);
+    async function t() {
+      i.value = null, l.value = null;
+      try {
+        const a = await p.loadScreen(u.name);
+        i.value = a, f("loaded", a);
+      } catch (a) {
+        l.value = a instanceof Error ? a.message : String(a);
+      }
+    }
+    return ee([() => u.name, () => p.i18n.state.locale], () => {
+      t();
+    }, { immediate: !0 }), n({ reload: t }), (a, c) => (w(), _("div", Oe, [
+      l.value ? (w(), S(d(ce), {
+        key: 0,
+        type: "danger",
+        title: d(r)("shell.error-title"),
+        description: l.value
+      }, null, 8, ["title", "description"])) : i.value === null ? (w(), S(d(ue), {
+        key: 1,
+        rows: 4
+      })) : (w(), S(d(de), {
+        key: 2,
+        modelValue: m.value,
+        "onUpdate:modelValue": c[0] || (c[0] = (s) => m.value = s),
+        root: i.value,
+        patch: d(p).screenPatch(e.name),
+        types: d(p).types,
+        errors: e.errors,
+        translate: d(p).i18n.t,
+        can: d(p).can,
+        disabled: e.disabled,
+        "label-position": e.labelPosition,
+        "label-width": e.labelWidth,
+        size: e.size
+      }, null, 8, ["modelValue", "root", "patch", "types", "errors", "translate", "can", "disabled", "label-position", "label-width", "size"]))
+    ]));
+  }
+});
 export {
-  de as AdminNav,
-  ve as AdminShell,
-  ge as HttpError,
-  D as adminKey,
-  Se as adminMessages,
-  Ne as createAdmin,
-  le as createAdminContext,
-  _e as createHttp,
-  V as createI18n,
-  $ as i18nKey,
-  re as provideAdmin,
-  ce as provideI18n,
-  I as readCookie,
-  H as useAdmin,
-  Re as useI18n,
-  F as useTranslate
+  we as AdminNav,
+  Se as AdminShell,
+  ke as HttpError,
+  Fe as WxScreen,
+  F as adminKey,
+  Ue as adminMessages,
+  He as createAdmin,
+  fe as createAdminContext,
+  Le as createHttp,
+  X as createI18n,
+  O as i18nKey,
+  me as provideAdmin,
+  he as provideI18n,
+  H as readCookie,
+  N as useAdmin,
+  De as useI18n,
+  j as useTranslate
 };
 //# sourceMappingURL=index.js.map