@webx-ui/module-blocks 0.6.2 → 0.6.3

package/dist/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as te, computed as T, openBlock as i, createElementBlock as x, createVNode as u, unref as e, createElementVNode as W, createTextVNode as E, toDisplayString as y, Fragment as j, createCommentVNode as z, renderList as ee, ref as N, onMounted as Ue, watch as fe, createBlock as A, withCtx as c, normalizeStyle as we, reactive as Ze, onBeforeUnmount as Xe, resolveComponent as kt, isRef as yt, normalizeClass as Be, nextTick as Rt, withKeys as st, withModifiers as it, provide as wt, inject as He, useModel as Ht, getCurrentInstance as jt, resolveDynamicComponent as Ft, mergeProps as qt, mergeModels as Jt } from "vue";
-import { useRoute as Kt, useRouter as _t } from "vue-router";
-import { useTranslate as re, useAdmin as Ie, useErrorText as Ne, WxDate as Zt, WxScreenHead as Gt, WxRenameButton as Yt, WxHelpButton as Qt, WxRowMenu as Xt, adminKey as el, WxListScreen as tl } from "@webx-ui/module-admin";
-import { WxIcon as ve, WxSkeleton as Ce, WxText as F, WxBadge as Y, WxButton as ie, confirm as Fe, toast as J, useElementWidth as qe, WxSegmented as xt, WxCard as Se, WxAlert as $t, WxTabs as ll, WxTab as Ve, WxCodeEditor as De, WxFormItem as X, WxInput as Ee, WxSelect as Tt, WxTextarea as nl, WxInputNumber as rt, WxTagsInput as ut, WxSwitch as al, WxActionBar as ol, useModal as St, WxDialog as Vt, WxEmpty as Ct, WxAction as Ae, WxSortableList as sl, createModal as Bt, WxDrawer as il, WxSpace as rl, WxSkeletonItem as Re } from "@webx-ui/core";
-import { WxScreenRenderer as Et, coreTypes as Ge } from "@webx-ui/schema";
-function We(t) {
+import { defineComponent as le, computed as S, openBlock as i, createElementBlock as $, createVNode as u, unref as e, createElementVNode as B, createTextVNode as W, toDisplayString as w, Fragment as j, createCommentVNode as N, renderList as Q, ref as P, onMounted as Pe, watch as ce, createBlock as I, withCtx as c, normalizeStyle as _e, reactive as Ge, onBeforeUnmount as tt, normalizeClass as xe, withDirectives as Ht, vShow as jt, resolveComponent as yt, isRef as wt, nextTick as Ft, withKeys as it, withModifiers as rt, provide as _t, inject as Fe, useModel as qt, getCurrentInstance as Jt, resolveDynamicComponent as Kt, mergeProps as Zt, mergeModels as Gt } from "vue";
+import { useRoute as Yt, useRouter as xt } from "vue-router";
+import { useTranslate as de, useAdmin as Ue, useErrorText as Me, WxDate as Qt, WxScreenHead as Xt, WxRenameButton as el, WxHelpButton as tl, WxRowMenu as ll, adminKey as nl, WxListScreen as al } from "@webx-ui/module-admin";
+import { WxIcon as he, WxSkeleton as We, WxText as F, WxBadge as re, WxButton as ue, confirm as Je, toast as q, useElementWidth as Ke, WxSegmented as $t, WxCard as Be, WxPopover as ol, WxAlert as St, WxTabs as sl, WxTab as Ee, WxCodeEditor as He, WxFormItem as te, WxInput as Ne, WxSelect as Tt, WxTextarea as il, WxIconPicker as rl, WxInputNumber as ut, WxTagsInput as ct, WxSwitch as ul, WxActionBar as cl, useModal as Ct, WxDialog as Vt, WxEmpty as Bt, WxAction as ze, WxSortableList as dl, createModal as Et, WxDrawer as pl, WxSpace as vl, WxSkeletonItem as je } from "@webx-ui/core";
+import { WxScreenRenderer as Wt, coreTypes as Ye } from "@webx-ui/schema";
+function Le(t) {
   const l = `${t.apiPath}/blocks`, o = (n) => n.data;
   return {
     list: () => t.http.get(l).then(o),
@@ -20,10 +20,10 @@ function We(t) {
     restore: (n, s) => t.http.post(`${l}/${n}/versions/${s}/restore`, {}).then(o)
   };
 }
-const ul = { class: "wx-block-checks" }, cl = {
+const fl = { class: "wx-block-checks" }, ml = {
   key: 0,
   class: "wx-block-checks__line is-error"
-}, dl = /* @__PURE__ */ te({
+}, hl = /* @__PURE__ */ le({
   __name: "BlockChecks",
   props: {
     file: {},
@@ -32,50 +32,50 @@ const ul = { class: "wx-block-checks" }, cl = {
     error: {}
   },
   setup(t) {
-    const l = t, o = re("webx-blocks"), n = T(() => l.lints.filter((r) => r.file === l.file)), s = T(() => {
-      const r = new Set(n.value.map((h) => h.code)), a = [];
+    const l = t, o = de("webx-blocks"), n = S(() => l.lints.filter((r) => r.file === l.file)), s = S(() => {
+      const r = new Set(n.value.map((f) => f.code)), a = [];
       return l.file === "template" && (r.has("no-marker") || a.push(o("checks.ok-marker")), r.has("variables-missing") || a.push(o("checks.ok-variables"))), l.file === "styles" && (r.has("stray-selectors") || a.push(o("checks.ok-prefix", { slug: l.slug })), r.has("bare-selectors") || a.push(o("checks.ok-bare")), r.has("media-query") || a.push(o("checks.ok-container"))), a;
     });
-    return (r, a) => (i(), x("div", ul, [
-      t.error ? (i(), x("div", cl, [
-        u(e(ve), { name: "close-circle" }),
-        W("span", null, [
-          E(y(t.error.message) + " ", 1),
-          t.error.line !== null ? (i(), x(j, { key: 0 }, [
-            E(" · " + y(e(o)("page.line", { line: t.error.line })), 1)
-          ], 64)) : z("", !0),
-          t.error.where ? (i(), x(j, { key: 1 }, [
-            E(" · " + y(t.error.where), 1)
-          ], 64)) : z("", !0)
+    return (r, a) => (i(), $("div", fl, [
+      t.error ? (i(), $("div", ml, [
+        u(e(he), { name: "close-circle" }),
+        B("span", null, [
+          W(w(t.error.message) + " ", 1),
+          t.error.line !== null ? (i(), $(j, { key: 0 }, [
+            W(" · " + w(e(o)("page.line", { line: t.error.line })), 1)
+          ], 64)) : N("", !0),
+          t.error.where ? (i(), $(j, { key: 1 }, [
+            W(" · " + w(t.error.where), 1)
+          ], 64)) : N("", !0)
         ])
-      ])) : z("", !0),
-      (i(!0), x(j, null, ee(n.value, (h) => (i(), x("div", {
-        key: h.code,
+      ])) : N("", !0),
+      (i(!0), $(j, null, Q(n.value, (f) => (i(), $("div", {
+        key: f.code,
         class: "wx-block-checks__line is-warning"
       }, [
-        u(e(ve), { name: "warning" }),
-        W("span", null, [
-          E(y(h.message) + " ", 1),
-          h.line !== null ? (i(), x(j, { key: 0 }, [
-            E(" · " + y(e(o)("page.line", { line: h.line })), 1)
-          ], 64)) : z("", !0)
+        u(e(he), { name: "warning" }),
+        B("span", null, [
+          W(w(f.message) + " ", 1),
+          f.line !== null ? (i(), $(j, { key: 0 }, [
+            W(" · " + w(e(o)("page.line", { line: f.line })), 1)
+          ], 64)) : N("", !0)
         ])
       ]))), 128)),
-      (i(!0), x(j, null, ee(s.value, (h) => (i(), x("div", {
-        key: h,
+      (i(!0), $(j, null, Q(s.value, (f) => (i(), $("div", {
+        key: f,
         class: "wx-block-checks__line is-ok"
       }, [
-        u(e(ve), { name: "check" }),
-        W("span", null, y(h), 1)
+        u(e(he), { name: "check" }),
+        B("span", null, w(f), 1)
       ]))), 128))
     ]));
   }
-}), le = (t, l) => {
+}), ne = (t, l) => {
   const o = t.__vccOpts || t;
   for (const [n, s] of l)
     o[n] = s;
   return o;
-}, ct = /* @__PURE__ */ le(dl, [["__scopeId", "data-v-e56947a8"]]), pl = { class: "wx-block-history" }, vl = { class: "wx-block-history__number" }, fl = { class: "wx-block-history__who" }, ml = /* @__PURE__ */ te({
+}, dt = /* @__PURE__ */ ne(hl, [["__scopeId", "data-v-e56947a8"]]), bl = { class: "wx-block-history" }, gl = { class: "wx-block-history__number" }, kl = { class: "wx-block-history__who" }, yl = /* @__PURE__ */ le({
   __name: "BlockHistory",
   props: {
     block: {},
@@ -83,46 +83,46 @@ const ul = { class: "wx-block-checks" }, cl = {
   },
   emits: ["restored"],
   setup(t, { emit: l }) {
-    const o = t, n = l, s = Ie(), r = We(s), a = re("webx-blocks"), h = Ne(), I = N(null);
-    async function d() {
-      I.value = await r.versions(o.block.id);
+    const o = t, n = l, s = Ue(), r = Le(s), a = de("webx-blocks"), f = Me(), z = P(null);
+    async function v() {
+      z.value = await r.versions(o.block.id);
     }
-    function p(f) {
-      return o.block.draft?.number === f.number ? "draft" : o.block.published?.number === f.number ? "live" : "replaced";
+    function d(m) {
+      return o.block.draft?.number === m.number ? "draft" : o.block.published?.number === m.number ? "live" : "replaced";
     }
-    async function b(f) {
-      if (await Fe({
-        title: a("page.restore-title", { number: f.number }),
+    async function b(m) {
+      if (await Je({
+        title: a("page.restore-title", { number: m.number }),
         message: a("page.restore-text"),
         confirmText: a("page.restore"),
         cancelText: a("page.cancel")
       }))
         try {
-          const B = await r.restore(o.block.id, f.number);
-          J.success(a("page.restored", { number: B.draft?.number ?? f.number })), n("restored", B), await d();
-        } catch (B) {
-          J.danger(h(B));
+          const T = await r.restore(o.block.id, m.number);
+          q.success(a("page.restored", { number: T.draft?.number ?? m.number })), n("restored", T), await v();
+        } catch (T) {
+          q.danger(f(T));
         }
     }
-    return Ue(d), fe(
+    return Pe(v), ce(
       () => [o.block.draft?.number, o.block.published?.number],
       () => {
-        d();
+        v();
       }
-    ), (f, k) => (i(), x("div", pl, [
-      I.value === null ? (i(), A(e(Ce), {
+    ), (m, h) => (i(), $("div", bl, [
+      z.value === null ? (i(), I(e(We), {
         key: 0,
         class: "wx-block-history__ghost",
         rows: 3
-      })) : (i(!0), x(j, { key: 1 }, ee(I.value, (B) => (i(), x("div", {
-        key: B.number,
+      })) : (i(!0), $(j, { key: 1 }, Q(z.value, (T) => (i(), $("div", {
+        key: T.number,
         class: "wx-block-history__row"
       }, [
-        W("code", vl, y(e(a)("page.version", { number: B.number })), 1),
-        W("div", fl, [
+        B("code", gl, w(e(a)("page.version", { number: T.number })), 1),
+        B("div", kl, [
           u(e(F), null, {
             default: c(() => [
-              E(y(e(a)(`page.version-${p(B)}`)), 1)
+              W(w(e(a)(`page.version-${d(T)}`)), 1)
             ]),
             _: 2
           }, 1024),
@@ -131,53 +131,53 @@ const ul = { class: "wx-block-checks" }, cl = {
             tone: "muted"
           }, {
             default: c(() => [
-              B.created_at ? (i(), A(e(Zt), {
+              T.created_at ? (i(), I(e(Qt), {
                 key: 0,
-                value: B.created_at
-              }, null, 8, ["value"])) : z("", !0),
-              E(" · " + y(B.author ?? e(a)(`page.source-${B.source}`)) + " ", 1),
-              B.comment ? (i(), x(j, { key: 1 }, [
-                E(" · " + y(B.comment), 1)
-              ], 64)) : z("", !0)
+                value: T.created_at
+              }, null, 8, ["value"])) : N("", !0),
+              W(" · " + w(T.author ?? e(a)(`page.source-${T.source}`)) + " ", 1),
+              T.comment ? (i(), $(j, { key: 1 }, [
+                W(" · " + w(T.comment), 1)
+              ], 64)) : N("", !0)
             ]),
             _: 2
           }, 1024)
         ]),
-        p(B) === "draft" ? (i(), A(e(Y), {
+        d(T) === "draft" ? (i(), I(e(re), {
           key: 0,
           type: "warning",
           dot: ""
         }, {
           default: c(() => [
-            E(y(e(a)("page.version-draft")), 1)
+            W(w(e(a)("page.version-draft")), 1)
           ]),
           _: 1
-        })) : p(B) === "live" ? (i(), A(e(Y), {
+        })) : d(T) === "live" ? (i(), I(e(re), {
           key: 1,
           type: "success",
           dot: ""
         }, {
           default: c(() => [
-            E(y(e(a)("page.version-live")), 1)
+            W(w(e(a)("page.version-live")), 1)
           ]),
           _: 1
-        })) : z("", !0),
-        t.canManage && p(B) === "replaced" ? (i(), A(e(ie), {
+        })) : N("", !0),
+        t.canManage && d(T) === "replaced" ? (i(), I(e(ue), {
           key: 2,
           size: "sm",
           variant: "outline",
-          onClick: (V) => b(B)
+          onClick: (V) => b(T)
         }, {
           default: c(() => [
-            E(y(e(a)("page.restore")), 1)
+            W(w(e(a)("page.restore")), 1)
           ]),
           _: 1
-        }, 8, ["onClick"])) : z("", !0)
+        }, 8, ["onClick"])) : N("", !0)
       ]))), 128))
     ]));
   }
-}), hl = /* @__PURE__ */ le(ml, [["__scopeId", "data-v-42c6b7ad"]]), ze = "wx-preview-selected", je = "wx-preview-hover", dt = "wx-preview-style";
-function Wt(t, l) {
+}), wl = /* @__PURE__ */ ne(yl, [["__scopeId", "data-v-42c6b7ad"]]), Ie = "wx-preview-selected", qe = "wx-preview-hover", pt = "wx-preview-style";
+function Lt(t, l) {
   const n = (t.ownerDocument ?? t).createTreeWalker(
     t,
     128
@@ -193,50 +193,50 @@ function Wt(t, l) {
   }
   return null;
 }
-function bl(t, l, o) {
-  const n = Wt(t, l);
+function _l(t, l, o) {
+  const n = Lt(t, l);
   if (!n) return !1;
   const s = n.start.parentNode;
   if (!s) return !1;
   const r = t.createElement("template");
   r.innerHTML = o;
   const a = n.end.nextSibling;
-  let h = n.start;
-  for (; h; ) {
-    const b = h.nextSibling, f = h === n.end;
-    if (s.removeChild(h), f) break;
-    h = b;
+  let f = n.start;
+  for (; f; ) {
+    const b = f.nextSibling, m = f === n.end;
+    if (s.removeChild(f), m) break;
+    f = b;
   }
-  const I = r.content, d = Array.from(I.childNodes);
-  s.insertBefore(I, a);
-  const p = t.defaultView?.webx;
-  if (p?.mount)
-    for (const b of d)
-      b.nodeType === 1 && p.mount(b);
+  const z = r.content, v = Array.from(z.childNodes);
+  s.insertBefore(z, a);
+  const d = t.defaultView?.webx;
+  if (d?.mount)
+    for (const b of v)
+      b.nodeType === 1 && d.mount(b);
   return !0;
 }
-function et(t, l) {
-  const o = Wt(t, l);
+function lt(t, l) {
+  const o = Lt(t, l);
   if (!o) return null;
   for (let n = o.start.nextSibling; n && n !== o.end; n = n.nextSibling)
     if (n.nodeType === 1) return n;
   return null;
 }
-function Ye(t, l) {
-  tt(t);
-  for (const n of Array.from(t.querySelectorAll(`.${ze}`)))
-    n.classList.remove(ze);
+function Qe(t, l) {
+  nt(t);
+  for (const n of Array.from(t.querySelectorAll(`.${Ie}`)))
+    n.classList.remove(Ie);
   if (l === null) return null;
-  const o = et(t, l);
-  return o?.classList.add(ze), o;
+  const o = lt(t, l);
+  return o?.classList.add(Ie), o;
 }
-function pt(t, l) {
-  tt(t);
-  for (const o of Array.from(t.querySelectorAll(`.${je}`)))
-    o.classList.remove(je);
-  l !== null && et(t, l)?.classList.add(je);
+function vt(t, l) {
+  nt(t);
+  for (const o of Array.from(t.querySelectorAll(`.${qe}`)))
+    o.classList.remove(qe);
+  l !== null && lt(t, l)?.classList.add(qe);
 }
-function vt(t) {
+function ft(t) {
   let l = t?.nodeType === 1 ? t : t?.parentElement ?? null;
   for (; l; ) {
     let o = 0;
@@ -254,21 +254,21 @@ function vt(t) {
   }
   return null;
 }
-function gl(t, l) {
-  tt(t);
+function xl(t, l) {
+  nt(t);
   let o = null;
-  function n(h) {
-    h.preventDefault(), h.stopPropagation();
+  function n(f) {
+    f.preventDefault(), f.stopPropagation();
   }
-  function s(h) {
-    n(h), l.select(vt(h.target));
+  function s(f) {
+    n(f), l.select(ft(f.target));
   }
-  function r(h) {
-    const I = vt(h.target);
-    I !== o && (o = I, pt(t, I));
+  function r(f) {
+    const z = ft(f.target);
+    z !== o && (o = z, vt(t, z));
   }
   function a() {
-    o = null, pt(t, null);
+    o = null, vt(t, null);
   }
   return t.addEventListener("click", s, !0), t.addEventListener("auxclick", n, !0), t.addEventListener("submit", n, !0), t.addEventListener("dragstart", n, !0), t.addEventListener("mousemove", r, !0), t.addEventListener("mouseleave", a), {
     release() {
@@ -276,19 +276,19 @@ function gl(t, l) {
     }
   };
 }
-function tt(t) {
-  if (t.getElementById(dt)) return;
+function nt(t) {
+  if (t.getElementById(pt)) return;
   const l = t.createElement("style");
-  l.id = dt, l.textContent = `.${ze}{outline:2px solid #427edd;outline-offset:-2px;}.${je}:not(.${ze}){outline:1px solid #427edd;outline-offset:-1px;cursor:pointer;}`, (t.head ?? t.documentElement).appendChild(l);
+  l.id = pt, l.textContent = `.${Ie}{outline:2px solid #427edd;outline-offset:-2px;}.${qe}:not(.${Ie}){outline:1px solid #427edd;outline-offset:-1px;cursor:pointer;}`, (t.head ?? t.documentElement).appendChild(l);
 }
-function Lt(t) {
-  const l = t.base ? `<base href="${ft(t.base)}">` : "", o = t.frame ? `<style>${t.frame}</style>` : "", n = t.script && t.runtime ? `<script src="${ft(t.runtime)}"><\/script><script>${t.script}<\/script>` : "";
+function At(t) {
+  const l = t.base ? `<base href="${mt(t.base)}">` : "", o = t.frame ? `<style>${t.frame}</style>` : "", n = t.script && t.runtime ? `<script src="${mt(t.runtime)}"><\/script><script>${t.script}<\/script>` : "";
   return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${l}<style>html,body{margin:0}body{container-type:inline-size}</style>${o}<style>${t.styles}</style></head><body>${t.html}${n}</body></html>`;
 }
-function ft(t) {
+function mt(t) {
   return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
-const kl = { class: "wx-block-stage" }, yl = { class: "wx-block-stage__bar" }, wl = ["srcdoc", "title"], _l = /* @__PURE__ */ te({
+const $l = { class: "wx-block-stage" }, Sl = { class: "wx-block-stage__bar" }, Tl = ["srcdoc", "title"], Cl = /* @__PURE__ */ le({
   __name: "BlockStage",
   props: {
     html: {},
@@ -298,12 +298,21 @@ const kl = { class: "wx-block-stage" }, yl = { class: "wx-block-stage__bar" }, w
     loading: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const l = t, o = re("webx-blocks"), n = T(() => [
+    const l = t, o = de("webx-blocks"), n = S(() => [
       { value: 1280, icon: "monitor", ariaLabel: o("page.width-desktop") },
       { value: 834, icon: "tablet", ariaLabel: o("page.width-tablet") },
       { value: 390, icon: "smartphone", ariaLabel: o("page.width-phone") }
-    ]), s = N(1280), r = N(null), a = N(null), h = qe(r), I = N(360), d = T(() => h.value === 0 ? 1 : Math.min(1, h.value / s.value)), p = T(
-      () => Lt({
+    ]), s = P(1280), r = P(null), a = P(null), f = Ke(r), z = P(360), v = P(!1);
+    ce([f, n], () => {
+      if (v.value || f.value === 0) return;
+      const p = n.value.find((k) => f.value / k.value >= 0.45);
+      s.value = (p ?? n.value[n.value.length - 1]).value;
+    });
+    function d(p) {
+      v.value = !0, s.value = p;
+    }
+    const b = S(() => f.value === 0 ? 1 : Math.min(1, f.value / s.value)), m = S(
+      () => At({
         html: l.html,
         styles: l.styles,
         script: l.script,
@@ -311,157 +320,159 @@ const kl = { class: "wx-block-stage" }, yl = { class: "wx-block-stage__bar" }, w
         base: typeof location > "u" ? null : location.origin + "/"
       })
     );
-    function b() {
-      const V = a.value?.contentDocument;
-      V?.documentElement && (I.value = Math.max(120, V.documentElement.scrollHeight));
+    function h() {
+      const p = a.value?.contentDocument?.body;
+      p && (z.value = Math.max(120, p.scrollHeight));
     }
-    function f() {
-      b(), setTimeout(b, 300);
+    function T() {
+      h(), setTimeout(h, 300);
     }
-    fe(s, () => setTimeout(b, 50));
-    const k = T(() => ({
+    ce(s, () => setTimeout(h, 50)), ce(f, (p, k) => {
+      p > 0 && k === 0 && setTimeout(h, 50);
+    });
+    const V = S(() => ({
       width: `${s.value}px`,
-      height: `${I.value}px`,
-      transform: `scale(${d.value})`
-    })), B = T(() => ({
-      width: `${Math.round(s.value * d.value)}px`,
-      height: `${Math.round(I.value * d.value)}px`
+      height: `${z.value}px`,
+      transform: `scale(${b.value})`
+    })), x = S(() => ({
+      width: `${Math.round(s.value * b.value)}px`,
+      height: `${Math.round(z.value * b.value)}px`
     }));
-    return (V, _) => (i(), x("div", kl, [
-      W("div", yl, [
-        u(e(xt), {
-          modelValue: s.value,
-          "onUpdate:modelValue": _[0] || (_[0] = (g) => s.value = g),
+    return (p, k) => (i(), $("div", $l, [
+      B("div", Sl, [
+        u(e($t), {
+          "model-value": s.value,
           options: n.value,
           size: "sm",
-          "aria-label": e(o)("page.width")
-        }, null, 8, ["modelValue", "options", "aria-label"])
+          "aria-label": e(o)("page.width"),
+          "onUpdate:modelValue": k[0] || (k[0] = (R) => d(Number(R)))
+        }, null, 8, ["model-value", "options", "aria-label"])
       ]),
-      W("div", {
+      B("div", {
         ref_key: "box",
         ref: r,
         class: "wx-block-stage__ground"
       }, [
-        t.loading && !t.html ? (i(), A(e(Ce), {
+        t.loading && !t.html ? (i(), I(e(We), {
           key: 0,
           rows: 3
-        })) : (i(), x("div", {
+        })) : (i(), $("div", {
           key: 1,
           class: "wx-block-stage__clip",
-          style: we(B.value)
+          style: _e(x.value)
         }, [
-          W("iframe", {
+          B("iframe", {
             ref_key: "frame",
             ref: a,
             class: "wx-block-stage__frame",
-            srcdoc: p.value,
-            style: we(k.value),
+            srcdoc: m.value,
+            style: _e(V.value),
             sandbox: "allow-same-origin allow-scripts",
             title: e(o)("page.preview"),
-            onLoad: f
-          }, null, 44, wl)
+            onLoad: T
+          }, null, 44, Tl)
         ], 4))
       ], 512)
     ]));
   }
-}), xl = /* @__PURE__ */ le(_l, [["__scopeId", "data-v-8254da4a"]]);
-function At(t) {
+}), Vl = /* @__PURE__ */ ne(Cl, [["__scopeId", "data-v-f7b592c6"]]);
+function zt(t) {
   return typeof t == "object" && t !== null && typeof t.type == "string" && t.type !== "";
 }
-function Je(t) {
-  return Array.isArray(t) && t.length > 0 && t.every(At);
+function Ze(t) {
+  return Array.isArray(t) && t.length > 0 && t.every(zt);
 }
-function Qe() {
+function Xe() {
   return (typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID().replace(/-/g, "") : Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2)).slice(0, 12);
 }
-function $l(t, l = {}) {
-  return { key: Qe(), type: t, values: l };
+function Bl(t, l = {}) {
+  return { key: Xe(), type: t, values: l };
 }
-function se(t, l) {
-  return zt(t, l, null, null);
+function ie(t, l) {
+  return It(t, l, null, null);
 }
-function zt(t, l, o, n) {
+function It(t, l, o, n) {
   for (let s = 0; s < t.length; s++) {
     const r = t[s];
     if (r.key === l) return { node: r, parent: o, field: n, list: t, index: s };
-    for (const [a, h] of Object.entries(r.values ?? {}))
-      if (Je(h)) {
-        const I = zt(h, l, r, a);
-        if (I) return I;
+    for (const [a, f] of Object.entries(r.values ?? {}))
+      if (Ze(f)) {
+        const z = It(f, l, r, a);
+        if (z) return z;
       }
   }
   return null;
 }
-function Pe(t, l, o = 0, n = null) {
+function De(t, l, o = 0, n = null) {
   for (const s of t)
-    if (At(s)) {
+    if (zt(s)) {
       l(s, o, n);
       for (const r of Object.values(s.values ?? {}))
-        Je(r) && Pe(r, l, o + 1, s);
+        Ze(r) && De(r, l, o + 1, s);
     }
 }
-function Tl(t, l) {
+function El(t, l) {
   let o = 0;
-  return Pe(t, (n) => {
+  return De(t, (n) => {
     n.type === l && o++;
   }), o;
 }
-function Sl(t) {
+function Wl(t) {
   let l = 0;
   for (const o of Object.values(t.values ?? {}))
-    Je(o) && Pe(o, () => l++);
+    Ze(o) && De(o, () => l++);
   return l;
 }
-function da(t) {
+function ma(t) {
   const l = [];
-  return Pe(t, (o) => {
+  return De(t, (o) => {
     l.includes(o.type) || l.push(o.type);
   }), l;
 }
-function Ut(t) {
+function Nt(t) {
   const l = [];
   for (const o of t)
-    o.type === "wx-blocks" && l.push(o), o.children && l.push(...Ut(o.children));
+    o.type === "wx-blocks" && l.push(o), o.children && l.push(...Nt(o.children));
   return l;
 }
-function It(t) {
+function Pt(t) {
   const l = {};
   for (const [o, n] of Object.entries(t.values ?? {}))
-    l[o] = Je(n) ? n.map(It) : me(n);
-  return t.hidden === !0 ? { key: Qe(), type: t.type, hidden: !0, values: l } : { key: Qe(), type: t.type, values: l };
+    l[o] = Ze(n) ? n.map(Pt) : be(n);
+  return t.hidden === !0 ? { key: Xe(), type: t.type, hidden: !0, values: l } : { key: Xe(), type: t.type, values: l };
 }
-function Vl(t, l, o) {
-  const n = me(t), s = se(n, l);
+function Ll(t, l, o) {
+  const n = be(t), s = ie(n, l);
   return s ? (o ? s.node.hidden = !0 : delete s.node.hidden, n) : t;
 }
-function Cl(t, l, o) {
+function Al(t, l, o) {
   if (l === null) return t;
-  const n = se(t, l);
+  const n = ie(t, l);
   if (!n || o === null) return null;
   const s = n.node.values[o];
   return Array.isArray(s) || (n.node.values[o] = []), n.node.values[o];
 }
-function mt(t, l, o, n, s) {
-  const r = me(t), a = Cl(r, l, o);
+function ht(t, l, o, n, s) {
+  const r = be(t), a = Al(r, l, o);
   return a ? (a.splice(Math.max(0, Math.min(n, a.length)), 0, s), r) : t;
 }
-function Bl(t, l) {
-  const o = me(t), n = se(o, l);
+function zl(t, l) {
+  const o = be(t), n = ie(o, l);
   return n ? (n.list.splice(n.index, 1), o) : t;
 }
-function El(t, l, o) {
-  const n = me(t), s = se(n, l);
+function Il(t, l, o) {
+  const n = be(t), s = ie(n, l);
   return s ? (s.node.values = o, n) : t;
 }
-function Wl(t, l, o, n) {
-  if (l === null) return me(n);
-  const s = me(t), r = se(s, l);
-  return !r || o === null ? t : (r.node.values[o] = me(n), s);
+function Nl(t, l, o, n) {
+  if (l === null) return be(n);
+  const s = be(t), r = ie(s, l);
+  return !r || o === null ? t : (r.node.values[o] = be(n), s);
 }
-function me(t) {
+function be(t) {
   return t === void 0 ? t : JSON.parse(JSON.stringify(t));
 }
-const Ll = {
+const Pl = {
   module: {
     title: "Blocks"
   },
@@ -474,6 +485,7 @@ const Ll = {
     "empty-help": "A block type is made here entirely: its fields, its template, its styles and its script.",
     "editing-off": "Editing is switched off on this site: the types arrive by import, and the section is read-only.",
     "on-pages": "on :count pages",
+    "on-page": "on one page",
     "not-used": "not used yet",
     draft: "Draft v:number",
     live: "Live v:number",
@@ -485,6 +497,10 @@ const Ll = {
     description: "Description",
     "description-help": "A hint for the editor, and the instruction an agent reads.",
     icon: "Icon",
+    "icon-search": "Search icons",
+    "icon-none": "No icon of that name",
+    "icon-unknown": "This name is not in the icon set, so nothing is drawn",
+    "icon-clear": "Clear the icon",
     group: "Group",
     "group-help": "The section of the list an editor picks a block from.",
     allow: "May hold",
@@ -505,20 +521,22 @@ const Ll = {
     "tab-settings": "Settings",
     "tab-history": "History",
     "insert-field": "Insert a field:",
+    examples: "Examples",
+    "example-handler": "A handler on something inside the block",
+    "example-values": "A value the editor filled in",
+    "example-provided": "A library the site provides",
     "script-help": "The body of an initialiser: el is the root of one instance, values are its values. Called for every instance, and again for a block replaced in the preview.",
     provides: "This site provides through webx.provide(): :names",
     "provides-none": "This site has not declared anything through webx.provide().",
-    "fields-help": "Screen nodes, the same ones described screens are built from. The sample form on the right is built from them.",
+    "fields-help": "Screen nodes, the same ones described screens are built from. The sample form is built from them.",
     "schema-invalid": "The schema is not valid JSON: :error",
     sample: "Sample values",
-    "sample-help": "What the thumbnail is drawn on, and what the publish check runs on.",
     preview: "Preview",
     width: "Width",
     "width-desktop": "Desktop",
     "width-tablet": "Tablet",
     "width-phone": "Phone",
     usage: "Where it is used",
-    "usage-empty": "Not on any page yet.",
     "usage-more": "and :count more",
     "unpublished-page": "draft",
     save: "Save",
@@ -536,6 +554,7 @@ const Ll = {
     "delete-title": 'Delete ":title"?',
     "delete-text": "Every version goes with it. This cannot be undone.",
     "delete-used": "The block stands on :count pages and cannot be deleted.",
+    "delete-used-one": "The block stands on one page and cannot be deleted.",
     deleted: "Deleted.",
     cancel: "Cancel",
     create: "Create",
@@ -609,57 +628,57 @@ const Ll = {
     "ok-container": "Width is decided by container queries.",
     "ok-variables": "Every variable of the template is a field of the schema."
   }
-}, ht = /* @__PURE__ */ new WeakSet();
-function Me() {
+}, bt = /* @__PURE__ */ new WeakSet();
+function Oe() {
   try {
-    const { i18n: t } = Ie();
-    ht.has(t) || (t.defaults("webx-blocks", Ll), ht.add(t));
+    const { i18n: t } = Ue();
+    bt.has(t) || (t.defaults("webx-blocks", Pl), bt.add(t));
   } catch {
   }
 }
-const Al = ["block", "entity", "loop", "__env", "errors", "app"];
-function zl(t, l, o) {
+const Ul = ["block", "entity", "loop", "__env", "errors", "app"];
+function Ml(t, l, o) {
   const n = [];
   /data-wx-block\s*=/.test(l.template) || n.push({ file: "template", code: "no-marker", line: null, message: o("checks.no-marker") });
-  const s = Ul(l.template, l.schema);
+  const s = Dl(l.template, l.schema);
   s.length > 0 && n.push({
     file: "template",
     code: "variables-missing",
     line: null,
     message: o("checks.variables-missing", {
-      variables: s.map((p) => `$${p}`).join(", ")
+      variables: s.map((d) => `$${d}`).join(", ")
     })
   });
-  const r = [], a = [], h = `.b-${t}`;
-  for (const [p, b] of Il(l.styles))
-    p.startsWith(h) || p.startsWith("&") || (/^[a-z][a-z0-9-]*/i.test(p) ? a.push([p, b]) : r.push([p, b]));
+  const r = [], a = [], f = `.b-${t}`;
+  for (const [d, b] of Ol(l.styles))
+    d.startsWith(f) || d.startsWith("&") || (/^[a-z][a-z0-9-]*/i.test(d) ? a.push([d, b]) : r.push([d, b]));
   r.length > 0 && n.push({
     file: "styles",
     code: "stray-selectors",
     line: r[0][1],
-    message: o("checks.stray-selectors", { slug: t, selectors: bt(r) })
+    message: o("checks.stray-selectors", { slug: t, selectors: gt(r) })
   }), a.length > 0 && n.push({
     file: "styles",
     code: "bare-selectors",
     line: a[0][1],
-    message: o("checks.bare-selectors", { selectors: bt(a) })
+    message: o("checks.bare-selectors", { selectors: gt(a) })
   });
-  const I = Pt(l.styles), d = /@media\b/.exec(I);
-  return d && n.push({
+  const z = Mt(l.styles), v = /@media\b/.exec(z);
+  return v && n.push({
     file: "styles",
     code: "media-query",
-    line: Mt(I, d.index),
+    line: Dt(z, v.index),
     message: o("checks.media-query")
   }), n;
 }
-function Nt(t) {
+function Ut(t) {
   const l = [];
   for (const o of t)
-    o.id && l.push(o.id), o.children && l.push(...Nt(o.children));
+    o.id && l.push(o.id), o.children && l.push(...Ut(o.children));
   return l;
 }
-function Ul(t, l) {
-  const o = /* @__PURE__ */ new Set([...Nt(l), ...Al]);
+function Dl(t, l) {
+  const o = /* @__PURE__ */ new Set([...Ut(l), ...Ul]);
   for (const s of t.matchAll(/\bas\s+\$([a-zA-Z_]\w*)(?:\s*=>\s*\$([a-zA-Z_]\w*))?/g))
     o.add(s[1]), s[2] && o.add(s[2]);
   for (const s of t.matchAll(/\$([a-zA-Z_]\w*)\s*(?:=[^=]|\+\+|--|\.=|\+=|-=)/g))
@@ -671,65 +690,68 @@ function Ul(t, l) {
   }
   return n;
 }
-function Il(t) {
-  const l = Pt(t), o = [];
+function Ol(t) {
+  const l = Mt(t), o = [];
   for (const n of l.matchAll(/([^{};]+)\{/g)) {
     const s = n[1], r = s.trim();
     if (!(r === "" || r.startsWith("@")))
       for (const a of s.split(",")) {
-        const h = a.trim();
-        h === "" || h === "from" || h === "to" || h.endsWith("%") || o.push([h, Mt(l, n.index + s.indexOf(h))]);
+        const f = a.trim();
+        f === "" || f === "from" || f === "to" || f.endsWith("%") || o.push([f, Dt(l, n.index + s.indexOf(f))]);
       }
   }
   return o;
 }
-function Pt(t) {
+function Mt(t) {
   return t.replace(/\/\*[\s\S]*?\*\//g, (l) => l.replace(/[^\n]/g, " "));
 }
-function Mt(t, l) {
+function Dt(t, l) {
   return t.slice(0, Math.max(0, l)).split(`
 `).length;
 }
-function bt(t) {
+function gt(t) {
   const l = [...new Set(t.map(([o]) => o))];
   return l.slice(0, 3).join(", ") + (l.length > 3 ? ", …" : "");
 }
-function lt(t) {
+function at(t) {
   return t.map((l) => ({
     ...l,
     name: l.name ?? l.id,
-    children: l.children ? lt(l.children) : l.children
+    children: l.children ? at(l.children) : l.children
   }));
 }
-function Le(t, l) {
+function et(t, l) {
+  return t === 0 ? l("page.not-used") : t === 1 ? l("page.on-page") : l("page.on-pages", { count: t });
+}
+function Ae(t, l) {
   const o = `groups.${t}`, n = l(o);
   return n === o || n === `webx-blocks::${o}` ? t.charAt(0).toUpperCase() + t.slice(1) : n;
 }
-const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns" }, Ml = { class: "wx-block-editor__columns" }, Ol = { class: "wx-block-editor__files" }, Dl = { class: "wx-block-editor__pane" }, Rl = {
+const Rl = { class: "wx-block-editor" }, Hl = { class: "wx-block-editor__split" }, jl = {
+  type: "button",
+  class: "wx-block-editor__uses"
+}, Fl = { class: "wx-block-editor__usage" }, ql = { class: "wx-block-editor__pane" }, Jl = {
   key: 0,
   class: "wx-block-editor__pills"
-}, Hl = ["disabled", "onClick", "textContent"], jl = { class: "wx-block-editor__pane" }, Fl = { class: "wx-block-editor__pane" }, ql = { class: "wx-block-editor__note" }, Jl = { class: "wx-block-editor__pane" }, Kl = { class: "wx-block-editor__note" }, Zl = { class: "wx-block-editor__settings" }, Gl = {
+}, Kl = ["disabled", "onClick", "textContent"], Zl = { class: "wx-block-editor__pane" }, Gl = { class: "wx-block-editor__pane" }, Yl = { class: "wx-block-editor__note" }, Ql = { class: "wx-block-editor__split" }, Xl = { class: "wx-block-editor__pane" }, en = { class: "wx-block-editor__note" }, tn = { class: "wx-block-editor__settings" }, ln = {
   key: 0,
   class: "is-wide wx-block-editor__danger"
-}, Yl = { class: "wx-block-editor__side" }, Ql = {
-  key: 1,
-  class: "wx-block-editor__usage"
-}, Xl = /* @__PURE__ */ te({
+}, nn = /* @__PURE__ */ le({
   __name: "BlockEditorPage",
   props: {
     base: { default: "/blocks" }
   },
   setup(t) {
-    const l = t, o = Ie(), n = We(o), s = Kt(), r = _t();
-    Me();
-    const a = re("webx-blocks"), h = Ne(), I = T(() => Number(s.params.id)), d = N(null), p = N([]), b = N(!0), f = N(!1), k = N(!1), B = N("template"), V = T(() => {
-      const S = o.state.manifest?.modules.find((v) => v.id === "blocks")?.meta;
+    const l = t, o = Ue(), n = Le(o), s = Yt(), r = xt();
+    Oe();
+    const a = de("webx-blocks"), f = Me(), z = S(() => Number(s.params.id)), v = P(null), d = P([]), b = P(!0), m = P(!1), h = P(!1), T = P("template"), V = S(() => {
+      const L = o.state.manifest?.modules.find((g) => g.id === "blocks")?.meta;
       return {
-        groups: S?.groups ?? [],
-        editing: S?.editing ?? !0,
-        provides: S?.provides ?? []
+        groups: L?.groups ?? [],
+        editing: L?.editing ?? !0,
+        provides: L?.provides ?? []
       };
-    }), _ = T(() => o.can("blocks.manage") && V.value.editing), g = Ze({
+    }), x = S(() => o.can("blocks.manage") && V.value.editing), p = Ge({
       slug: "",
       title: "",
       description: "",
@@ -740,176 +762,176 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
       allowed_in: [],
       max_per_entity: null,
       is_enabled: !0
-    }), w = Ze({
+    }), k = Ge({
       schema: [],
       template: "",
       styles: "",
       script: null,
       sample: {}
-    }), H = N("[]"), K = N(null), Z = N(""), ne = N({}), C = N(null), P = Ze({
+    }), R = P("[]"), J = P(null), K = P(""), ae = P({}), C = P(null), M = Ge({
       html: "",
       styles: "",
       script: null,
       runtime: null,
       loading: !1
-    }), O = T(() => JSON.stringify({ settings: g, content: w })), q = T(() => Z.value !== "" && O.value !== Z.value), _e = T(() => zl(g.slug, w, a)), ue = T(() => {
-      const S = [...V.value.groups];
-      return S.includes(g.group) || S.push(g.group), S.map((v) => ({ value: v, label: Le(v, a) }));
-    }), ae = T({
-      get: () => w.sample,
-      set: (S) => {
-        w.sample = S;
+    }), O = S(() => JSON.stringify({ settings: p, content: k })), Z = S(() => K.value !== "" && O.value !== K.value), $e = S(() => Ml(p.slug, k, a)), pe = S(() => {
+      const L = [...V.value.groups];
+      return L.includes(p.group) || L.push(p.group), L.map((g) => ({ value: g, label: Ae(g, a) }));
+    }), oe = S({
+      get: () => k.sample,
+      set: (L) => {
+        k.sample = L;
       }
-    }), ke = T(() => xe(w.schema));
-    function xe(S) {
-      const v = [];
-      for (const $ of S)
-        $.type !== "wx-blocks" && !($.children?.length && !$.name) && v.push($.id), $.children && v.push(...xe($.children));
-      return v;
+    }), we = S(() => Se(k.schema));
+    function Se(L) {
+      const g = [];
+      for (const _ of L)
+        _.type !== "wx-blocks" && !(_.children?.length && !_.name) && g.push(_.id), _.children && g.push(...Se(_.children));
+      return g;
     }
-    function he(S) {
-      d.value = S, Object.assign(g, {
-        slug: S.slug,
-        title: S.title,
-        description: S.description,
-        icon: S.icon,
-        group: S.group,
-        sort: S.sort,
-        allow: S.allow ?? [],
-        allowed_in: S.allowed_in ?? [],
-        max_per_entity: S.max_per_entity,
-        is_enabled: S.is_enabled
+    function ge(L) {
+      v.value = L, Object.assign(p, {
+        slug: L.slug,
+        title: L.title,
+        description: L.description,
+        icon: L.icon,
+        group: L.group,
+        sort: L.sort,
+        allow: L.allow ?? [],
+        allowed_in: L.allowed_in ?? [],
+        max_per_entity: L.max_per_entity,
+        is_enabled: L.is_enabled
       });
-      const v = S.content ?? {
+      const g = L.content ?? {
         schema: [],
         template: "",
         styles: "",
         script: null,
         sample: {}
       };
-      Object.assign(w, me(v)), H.value = JSON.stringify(v.schema, null, 2), K.value = null, Z.value = O.value;
+      Object.assign(k, be(g)), R.value = JSON.stringify(g.schema, null, 2), J.value = null, K.value = O.value;
     }
-    async function Q() {
+    async function X() {
       b.value = !0;
       try {
-        he(await n.get(I.value)), p.value = await n.usage(I.value);
-      } catch (S) {
-        J.danger(h(S));
+        ge(await n.get(z.value)), d.value = await n.usage(z.value);
+      } catch (L) {
+        q.danger(f(L));
       } finally {
         b.value = !1;
       }
     }
-    function $e(S) {
-      H.value = S;
+    function Te(L) {
+      R.value = L;
       try {
-        const v = JSON.parse(S);
-        if (!Array.isArray(v)) throw new Error("not a list");
-        w.schema = v, K.value = null;
-      } catch (v) {
-        K.value = a("page.schema-invalid", { error: v.message });
+        const g = JSON.parse(L);
+        if (!Array.isArray(g)) throw new Error("not a list");
+        k.schema = g, J.value = null;
+      } catch (g) {
+        J.value = a("page.schema-invalid", { error: g.message });
       }
     }
-    let be, de = 0;
-    function U() {
-      clearTimeout(be), be = setTimeout(() => {
-        M();
+    let ke, fe = 0;
+    function A() {
+      clearTimeout(ke), ke = setTimeout(() => {
+        D();
       }, 250);
     }
-    async function M() {
-      if (!d.value) return;
-      const S = ++de;
-      P.loading = !0;
+    async function D() {
+      if (!v.value) return;
+      const L = ++fe;
+      M.loading = !0;
       try {
-        const v = await n.render(d.value.id, {
-          values: w.sample,
-          content: _.value ? {
-            template: w.template,
-            styles: w.styles,
-            script: w.script,
-            schema: w.schema
+        const g = await n.render(v.value.id, {
+          values: k.sample,
+          content: x.value ? {
+            template: k.template,
+            styles: k.styles,
+            script: k.script,
+            schema: k.schema
           } : void 0
         });
-        if (S !== de) return;
-        P.html = v.html, P.styles = v.styles, P.script = v.script, P.runtime = v.runtime;
-      } catch (v) {
-        S === de && J.danger(h(v));
+        if (L !== fe) return;
+        M.html = g.html, M.styles = g.styles, M.script = g.script, M.runtime = g.runtime;
+      } catch (g) {
+        L === fe && q.danger(f(g));
       } finally {
-        S === de && (P.loading = !1);
+        L === fe && (M.loading = !1);
       }
     }
-    fe(
-      () => [w.template, w.styles, w.script, w.schema, w.sample],
-      U,
+    ce(
+      () => [k.template, k.styles, k.script, k.schema, k.sample],
+      A,
       { deep: !0 }
     );
-    const R = N(null);
-    function G(S) {
-      return `{{ $${S} }}`;
+    const H = P(null);
+    function G(L) {
+      return `{{ $${L} }}`;
     }
-    function ce(S) {
-      const $ = R.value?.view?.value;
-      if (!$) {
-        w.template += `{{ $${S} }}`;
+    function ve(L) {
+      const _ = H.value?.view?.value;
+      if (!_) {
+        k.template += `{{ $${L} }}`;
         return;
       }
-      $.dispatch($.state.replaceSelection(`{{ $${S} }}`)), $.focus();
+      _.dispatch(_.state.replaceSelection(`{{ $${L} }}`)), _.focus();
     }
-    async function pe() {
-      if (!d.value) return;
-      f.value = !0, ne.value = {}, C.value = null;
-      const S = d.value.draft?.number ?? null;
+    async function me() {
+      if (!v.value) return;
+      m.value = !0, ae.value = {}, C.value = null;
+      const L = v.value.draft?.number ?? null;
       try {
-        const v = await n.update(d.value.id, {
-          ...g,
-          allow: g.allow.length ? g.allow : null,
-          allowed_in: g.allowed_in.length ? g.allowed_in : null,
-          description: g.description || null,
-          icon: g.icon || null,
-          content: K.value ? { ...w, schema: void 0 } : w
+        const g = await n.update(v.value.id, {
+          ...p,
+          allow: p.allow.length ? p.allow : null,
+          allowed_in: p.allowed_in.length ? p.allowed_in : null,
+          description: p.description || null,
+          icon: p.icon || null,
+          content: J.value ? { ...k, schema: void 0 } : k
         });
-        he(v), J.success(
-          v.draft && v.draft.number !== S ? a("page.saved", { number: v.draft.number }) : a("page.unchanged")
+        ge(g), q.success(
+          g.draft && g.draft.number !== L ? a("page.saved", { number: g.draft.number }) : a("page.unchanged")
         );
-      } catch (v) {
-        const $ = v.body;
-        $?.errors ? (ne.value = $.errors, J.danger(a("page.failed"))) : J.danger(h(v, a("page.failed")));
+      } catch (g) {
+        const _ = g.body;
+        _?.errors ? (ae.value = _.errors, q.danger(a("page.failed"))) : q.danger(f(g, a("page.failed")));
       } finally {
-        f.value = !1;
+        m.value = !1;
       }
     }
-    async function oe() {
-      if (!(!d.value?.draft || (q.value && await pe(), !d.value.draft) || !await Fe({
-        title: a("page.publish-title", { number: d.value.draft.number }),
-        message: a("page.publish-text", { count: d.value.usage_count }),
+    async function se() {
+      if (!(!v.value?.draft || (Z.value && await me(), !v.value.draft) || !await Je({
+        title: a("page.publish-title", { number: v.value.draft.number }),
+        message: a("page.publish-text", { count: v.value.usage_count }),
         confirmText: a("page.publish"),
         cancelText: a("page.cancel")
       }))) {
-        k.value = !0, C.value = null;
+        h.value = !0, C.value = null;
         try {
-          he(await n.publish(d.value.id)), J.success(a("page.published", { number: d.value.published?.number ?? 0 }));
-        } catch (v) {
-          const $ = v.body;
-          $?.errors ? (C.value = $, B.value = "template", J.danger(a("page.publish-failed"))) : J.danger(h(v, a("page.publish-failed")));
+          ge(await n.publish(v.value.id)), q.success(a("page.published", { number: v.value.published?.number ?? 0 }));
+        } catch (g) {
+          const _ = g.body;
+          _?.errors ? (C.value = _, T.value = "template", q.danger(a("page.publish-failed"))) : q.danger(f(g, a("page.publish-failed")));
         } finally {
-          k.value = !1;
+          h.value = !1;
         }
       }
     }
-    async function ge() {
-      if (!(!d.value || !await Fe({
-        title: a("page.delete-title", { title: d.value.title }),
+    async function ye() {
+      if (!(!v.value || !await Je({
+        title: a("page.delete-title", { title: v.value.title }),
         message: a("page.delete-text"),
         confirmText: a("page.delete"),
         cancelText: a("page.cancel"),
         tone: "danger"
       })))
         try {
-          await n.remove(d.value.id), J.success(a("page.deleted")), r.push(l.base);
-        } catch (v) {
-          J.danger(h(v));
+          await n.remove(v.value.id), q.success(a("page.deleted")), r.push(l.base);
+        } catch (g) {
+          q.danger(f(g));
         }
     }
-    const Te = T(
+    const Ce = S(
       () => C.value ? {
         message: C.value.errors.template?.[0] ?? C.value.message,
         line: C.value.line,
@@ -917,632 +939,646 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
           title: C.value.entity.title ?? `#${C.value.entity.id}`
         }) : null
       } : null
-    ), ye = T(() => p.value.slice(0, 5));
-    function m(S) {
-      return ne.value[S]?.[0];
+    ), Ve = S(() => T.value === "template" || T.value === "styles"), y = S(() => [
+      {
+        title: a("page.example-handler"),
+        code: `el.querySelector('.b-hero__button')?.addEventListener('click', (event) => {
+  event.preventDefault()
+  el.classList.toggle('is-open')
+})`
+      },
+      {
+        title: a("page.example-values"),
+        /* The one thing the sentence above the examples does not say: values reach the script
+           only through the attribute, and a template that never prints it hands over `{}`. */
+        code: `// <section data-wx-values="{{ json_encode($block->values) }}">
+const seconds = Number(values.delay ?? 5)
+
+setInterval(() => el.classList.toggle('is-second'), seconds * 1000)`
+      },
+      {
+        title: a("page.example-provided"),
+        code: `const Swiper = await webx.use('swiper')
+
+new Swiper(el.querySelector('.b-slider__viewport'), { loop: true })`
+      }
+    ]), E = S(() => d.value.slice(0, 5));
+    function U(L) {
+      return ae.value[L]?.[0];
     }
-    function L(S) {
-      q.value && S.preventDefault();
+    function Y(L) {
+      Z.value && L.preventDefault();
     }
-    Ue(() => {
-      Q(), window.addEventListener("beforeunload", L);
-    }), Xe(() => {
-      clearTimeout(be), window.removeEventListener("beforeunload", L);
-    }), fe(I, () => {
-      Q();
+    Pe(() => {
+      X(), window.addEventListener("beforeunload", Y);
+    }), tt(() => {
+      clearTimeout(ke), window.removeEventListener("beforeunload", Y);
+    }), ce(z, () => {
+      X();
     });
-    const D = T(
-      () => _.value ? [
-        { key: "save", label: a("page.save"), loading: f.value, run: () => {
-          pe();
+    const ee = S(
+      () => x.value ? [
+        { key: "save", label: a("page.save"), loading: m.value, run: () => {
+          me();
         } },
         {
           key: "publish",
           label: a("page.publish"),
           primary: !0,
-          loading: k.value,
-          disabled: !d.value?.draft && !q.value,
+          loading: h.value,
+          disabled: !v.value?.draft && !Z.value,
           run: () => {
-            oe();
+            se();
           }
         }
       ] : []
     );
-    return (S, v) => (i(), x("div", Nl, [
-      b.value || !d.value ? (i(), x(j, { key: 0 }, [
-        u(e(Ce), {
+    return (L, g) => (i(), $("div", Rl, [
+      b.value || !v.value ? (i(), $(j, { key: 0 }, [
+        u(e(We), {
           class: "wx-block-editor__ghost-head",
           title: "",
           rows: 1
         }),
-        W("div", Pl, [
-          u(e(Se), null, {
+        B("div", Hl, [
+          u(e(Be), null, {
             default: c(() => [
-              u(e(Ce), { rows: 8 })
+              u(e(We), { rows: 8 })
             ]),
             _: 1
           }),
-          u(e(Se), null, {
+          u(e(Be), null, {
             default: c(() => [
-              u(e(Ce), { rows: 4 })
+              u(e(We), { rows: 4 })
             ]),
             _: 1
           })
         ])
-      ], 64)) : (i(), x(j, { key: 1 }, [
-        u(e(Gt), {
-          title: g.title,
+      ], 64)) : (i(), $(j, { key: 1 }, [
+        u(e(Xt), {
+          title: p.title,
           back: t.base,
           "back-label": e(a)("page.back"),
-          actions: D.value
+          actions: ee.value
         }, {
           "title-after": c(() => [
-            _.value ? (i(), A(e(Yt), {
+            x.value ? (i(), I(e(el), {
               key: 0,
-              name: g.title,
+              name: p.title,
               placeholder: e(a)("page.title"),
-              onRename: v[0] || (v[0] = ($) => g.title = $)
-            }, null, 8, ["name", "placeholder"])) : z("", !0),
-            q.value ? (i(), A(e(Y), {
+              onRename: g[0] || (g[0] = (_) => p.title = _)
+            }, null, 8, ["name", "placeholder"])) : N("", !0),
+            Z.value ? (i(), I(e(re), {
               key: 1,
               type: "primary",
               dot: ""
             }, {
               default: c(() => [
-                E(y(e(a)("page.unsaved")), 1)
+                W(w(e(a)("page.unsaved")), 1)
               ]),
               _: 1
-            })) : z("", !0),
-            d.value.draft ? (i(), A(e(Y), {
+            })) : N("", !0),
+            v.value.draft ? (i(), I(e(re), {
               key: 2,
               type: "warning",
               dot: ""
             }, {
               default: c(() => [
-                E(y(e(a)("page.draft", { number: d.value.draft.number })), 1)
+                W(w(e(a)("page.draft", { number: v.value.draft.number })), 1)
               ]),
               _: 1
-            })) : z("", !0),
-            d.value.published ? (i(), A(e(Y), {
+            })) : N("", !0),
+            v.value.published ? (i(), I(e(re), {
               key: 3,
               type: "success",
               dot: ""
             }, {
               default: c(() => [
-                E(y(e(a)("page.live", { number: d.value.published.number })), 1)
+                W(w(e(a)("page.live", { number: v.value.published.number })), 1)
               ]),
               _: 1
-            })) : (i(), A(e(Y), {
+            })) : (i(), I(e(re), {
               key: 4,
               type: "default"
             }, {
               default: c(() => [
-                E(y(e(a)("page.never-published")), 1)
+                W(w(e(a)("page.never-published")), 1)
               ]),
               _: 1
             }))
           ]),
           subtitle: c(() => [
-            W("code", null, y(g.slug), 1),
-            E(" · " + y(e(Le)(g.group, e(a))) + " · " + y(d.value.usage_count > 0 ? e(a)("page.on-pages", { count: d.value.usage_count }) : e(a)("page.not-used")), 1)
+            B("code", null, w(p.slug), 1),
+            W(" · " + w(e(Ae)(p.group, e(a))) + " · ", 1),
+            v.value.usage_count > 0 ? (i(), I(e(ol), {
+              key: 0,
+              title: e(a)("page.usage"),
+              width: 260,
+              align: "start"
+            }, {
+              trigger: c(() => [
+                B("button", jl, w(e(et)(v.value.usage_count, e(a))), 1)
+              ]),
+              default: c(() => [
+                B("div", Fl, [
+                  (i(!0), $(j, null, Q(E.value, (_) => (i(), $("div", {
+                    key: `${_.model}:${_.id}`,
+                    class: "wx-block-editor__use"
+                  }, [
+                    B("span", null, w(_.title ?? `#${_.id}`), 1),
+                    _.published ? N("", !0) : (i(), I(e(re), {
+                      key: 0,
+                      type: "warning",
+                      size: "sm"
+                    }, {
+                      default: c(() => [
+                        W(w(e(a)("page.unpublished-page")), 1)
+                      ]),
+                      _: 1
+                    }))
+                  ]))), 128)),
+                  d.value.length > E.value.length ? (i(), I(e(F), {
+                    key: 0,
+                    size: "sm",
+                    tone: "muted"
+                  }, {
+                    default: c(() => [
+                      W(w(e(a)("page.usage-more", { count: d.value.length - E.value.length })), 1)
+                    ]),
+                    _: 1
+                  })) : N("", !0)
+                ])
+              ]),
+              _: 1
+            }, 8, ["title"])) : (i(), $(j, { key: 1 }, [
+              W(w(e(et)(v.value.usage_count, e(a))), 1)
+            ], 64))
           ]),
           _: 1
         }, 8, ["title", "back", "back-label", "actions"]),
-        V.value.editing ? z("", !0) : (i(), A(e($t), {
+        V.value.editing ? N("", !0) : (i(), I(e(St), {
           key: 0,
           type: "info",
           variant: "soft",
           description: e(a)("page.editing-off")
         }, null, 8, ["description"])),
-        W("div", Ml, [
-          W("div", Ol, [
-            u(e(ll), {
-              modelValue: B.value,
-              "onUpdate:modelValue": v[13] || (v[13] = ($) => B.value = $),
-              "keep-alive": ""
-            }, {
-              default: c(() => [
-                u(e(Ve), {
-                  value: "template",
-                  label: e(a)("page.tab-template")
-                }, {
-                  default: c(() => [
-                    W("div", Dl, [
-                      u(e(De), {
-                        ref_key: "templateEditor",
-                        ref: R,
-                        modelValue: w.template,
-                        "onUpdate:modelValue": v[1] || (v[1] = ($) => w.template = $),
-                        language: "php",
-                        readonly: !_.value,
-                        "min-height": "340px",
-                        "max-height": "70vh",
-                        "line-wrapping": ""
-                      }, null, 8, ["modelValue", "readonly"]),
-                      ke.value.length ? (i(), x("div", Rl, [
-                        u(e(F), {
-                          size: "sm",
-                          tone: "muted"
-                        }, {
-                          default: c(() => [
-                            E(y(e(a)("page.insert-field")), 1)
-                          ]),
-                          _: 1
-                        }),
-                        (i(!0), x(j, null, ee(ke.value, ($) => (i(), x("button", {
-                          key: $,
-                          type: "button",
-                          class: "wx-block-editor__pill",
-                          disabled: !_.value,
-                          onClick: (Oe) => ce($),
-                          textContent: y(G($))
-                        }, null, 8, Hl))), 128))
-                      ])) : z("", !0),
-                      u(ct, {
-                        file: "template",
-                        lints: _e.value,
-                        slug: g.slug,
-                        error: Te.value
-                      }, null, 8, ["lints", "slug", "error"])
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["label"]),
-                u(e(Ve), {
-                  value: "styles",
-                  label: e(a)("page.tab-styles")
-                }, {
-                  default: c(() => [
-                    W("div", jl, [
-                      u(e(De), {
-                        modelValue: w.styles,
-                        "onUpdate:modelValue": v[2] || (v[2] = ($) => w.styles = $),
-                        language: "css",
-                        readonly: !_.value,
-                        "min-height": "340px",
-                        "max-height": "70vh"
-                      }, null, 8, ["modelValue", "readonly"]),
-                      u(ct, {
-                        file: "styles",
-                        lints: _e.value,
-                        slug: g.slug
-                      }, null, 8, ["lints", "slug"])
+        B("div", {
+          class: xe(["wx-block-editor__columns", { "is-alone": !Ve.value }])
+        }, [
+          u(e(sl), {
+            modelValue: T.value,
+            "onUpdate:modelValue": g[14] || (g[14] = (_) => T.value = _),
+            "keep-alive": ""
+          }, {
+            default: c(() => [
+              u(e(Ee), {
+                value: "template",
+                label: e(a)("page.tab-template")
+              }, {
+                default: c(() => [
+                  B("div", ql, [
+                    u(e(He), {
+                      ref_key: "templateEditor",
+                      ref: H,
+                      modelValue: k.template,
+                      "onUpdate:modelValue": g[1] || (g[1] = (_) => k.template = _),
+                      language: "php",
+                      readonly: !x.value,
+                      "min-height": "340px",
+                      "max-height": "70vh",
+                      "line-wrapping": ""
+                    }, null, 8, ["modelValue", "readonly"]),
+                    we.value.length ? (i(), $("div", Jl, [
+                      u(e(F), {
+                        size: "sm",
+                        tone: "muted"
+                      }, {
+                        default: c(() => [
+                          W(w(e(a)("page.insert-field")), 1)
+                        ]),
+                        _: 1
+                      }),
+                      (i(!0), $(j, null, Q(we.value, (_) => (i(), $("button", {
+                        key: _,
+                        type: "button",
+                        class: "wx-block-editor__pill",
+                        disabled: !x.value,
+                        onClick: (Re) => ve(_),
+                        textContent: w(G(_))
+                      }, null, 8, Kl))), 128))
+                    ])) : N("", !0),
+                    u(dt, {
+                      file: "template",
+                      lints: $e.value,
+                      slug: p.slug,
+                      error: Ce.value
+                    }, null, 8, ["lints", "slug", "error"])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["label"]),
+              u(e(Ee), {
+                value: "styles",
+                label: e(a)("page.tab-styles")
+              }, {
+                default: c(() => [
+                  B("div", Zl, [
+                    u(e(He), {
+                      modelValue: k.styles,
+                      "onUpdate:modelValue": g[2] || (g[2] = (_) => k.styles = _),
+                      language: "css",
+                      readonly: !x.value,
+                      "min-height": "340px",
+                      "max-height": "70vh"
+                    }, null, 8, ["modelValue", "readonly"]),
+                    u(dt, {
+                      file: "styles",
+                      lints: $e.value,
+                      slug: p.slug
+                    }, null, 8, ["lints", "slug"])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["label"]),
+              u(e(Ee), {
+                value: "script",
+                label: e(a)("page.tab-script")
+              }, {
+                default: c(() => [
+                  B("div", Gl, [
+                    u(e(He), {
+                      "model-value": k.script ?? "",
+                      language: "javascript",
+                      readonly: !x.value,
+                      "min-height": "340px",
+                      "max-height": "70vh",
+                      "onUpdate:modelValue": g[3] || (g[3] = (_) => k.script = _ || null)
+                    }, null, 8, ["model-value", "readonly"]),
+                    B("div", Yl, [
+                      u(e(F), {
+                        size: "sm",
+                        tone: "muted"
+                      }, {
+                        default: c(() => [
+                          W(w(e(a)("page.script-help")), 1)
+                        ]),
+                        _: 1
+                      }),
+                      u(e(F), {
+                        size: "sm",
+                        tone: "muted"
+                      }, {
+                        default: c(() => [
+                          W(w(V.value.provides.length ? e(a)("page.provides", { names: V.value.provides.join(", ") }) : e(a)("page.provides-none")), 1)
+                        ]),
+                        _: 1
+                      })
                     ])
                   ]),
-                  _: 1
-                }, 8, ["label"]),
-                u(e(Ve), {
-                  value: "script",
-                  label: e(a)("page.tab-script")
-                }, {
-                  default: c(() => [
-                    W("div", Fl, [
-                      u(e(De), {
-                        "model-value": w.script ?? "",
-                        language: "javascript",
-                        readonly: !_.value,
-                        "min-height": "340px",
-                        "max-height": "70vh",
-                        "onUpdate:modelValue": v[3] || (v[3] = ($) => w.script = $ || null)
-                      }, null, 8, ["model-value", "readonly"]),
-                      W("div", ql, [
-                        u(e(F), {
-                          size: "sm",
-                          tone: "muted"
-                        }, {
-                          default: c(() => [
-                            E(y(e(a)("page.script-help")), 1)
-                          ]),
-                          _: 1
-                        }),
+                  u(e(Be), {
+                    class: "wx-block-editor__examples",
+                    title: e(a)("page.examples")
+                  }, {
+                    default: c(() => [
+                      (i(!0), $(j, null, Q(y.value, (_) => (i(), $("div", {
+                        key: _.title,
+                        class: "wx-block-editor__example"
+                      }, [
                         u(e(F), {
                           size: "sm",
                           tone: "muted"
                         }, {
                           default: c(() => [
-                            E(y(V.value.provides.length ? e(a)("page.provides", { names: V.value.provides.join(", ") }) : e(a)("page.provides-none")), 1)
+                            W(w(_.title), 1)
                           ]),
-                          _: 1
-                        })
-                      ])
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["label"]),
-                u(e(Ve), {
-                  value: "fields",
-                  label: e(a)("page.tab-fields")
-                }, {
-                  default: c(() => [
-                    W("div", Jl, [
-                      u(e(De), {
-                        "model-value": H.value,
+                          _: 2
+                        }, 1024),
+                        B("pre", null, [
+                          B("code", null, w(_.code), 1)
+                        ])
+                      ]))), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["title"])
+                ]),
+                _: 1
+              }, 8, ["label"]),
+              u(e(Ee), {
+                value: "fields",
+                label: e(a)("page.tab-fields")
+              }, {
+                default: c(() => [
+                  B("div", Ql, [
+                    B("div", Xl, [
+                      u(e(He), {
+                        "model-value": R.value,
                         language: "json",
                         lint: "",
-                        readonly: !_.value,
+                        readonly: !x.value,
                         "min-height": "340px",
                         "max-height": "70vh",
-                        "onUpdate:modelValue": $e
+                        "onUpdate:modelValue": Te
                       }, null, 8, ["model-value", "readonly"]),
-                      W("div", Kl, [
-                        K.value ? (i(), A(e(F), {
+                      B("div", en, [
+                        J.value ? (i(), I(e(F), {
                           key: 0,
                           size: "sm",
                           tone: "danger"
                         }, {
                           default: c(() => [
-                            E(y(K.value), 1)
+                            W(w(J.value), 1)
                           ]),
                           _: 1
-                        })) : m("content.schema") ? (i(), A(e(F), {
+                        })) : U("content.schema") ? (i(), I(e(F), {
                           key: 1,
                           size: "sm",
                           tone: "danger"
                         }, {
                           default: c(() => [
-                            E(y(m("content.schema")), 1)
+                            W(w(U("content.schema")), 1)
                           ]),
                           _: 1
-                        })) : (i(), A(e(F), {
+                        })) : (i(), I(e(F), {
                           key: 2,
                           size: "sm",
                           tone: "muted"
                         }, {
                           default: c(() => [
-                            E(y(e(a)("page.fields-help")), 1)
+                            W(w(e(a)("page.fields-help")), 1)
                           ]),
                           _: 1
                         })),
-                        u(e(Qt), {
+                        u(e(tl), {
                           title: e(a)("help.schema-title"),
                           body: e(a)("help.schema")
                         }, null, 8, ["title", "body"])
                       ])
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["label"]),
-                u(e(Ve), {
-                  value: "settings",
-                  label: e(a)("page.tab-settings")
-                }, {
-                  default: c(() => [
-                    u(e(Se), { class: "wx-block-editor__sheet" }, {
+                    ]),
+                    u(e(Be), {
+                      class: "wx-block-editor__sample",
+                      title: e(a)("page.sample")
+                    }, {
                       default: c(() => [
-                        W("div", Zl, [
-                          u(e(X), {
-                            label: e(a)("page.identifier"),
-                            help: e(a)("page.identifier-help"),
-                            error: m("slug"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(Ee), {
-                                modelValue: g.slug,
-                                "onUpdate:modelValue": v[4] || (v[4] = ($) => g.slug = $)
-                              }, null, 8, ["modelValue"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.group"),
-                            help: e(a)("page.group-help"),
-                            error: m("group"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(Tt), {
-                                modelValue: g.group,
-                                "onUpdate:modelValue": v[5] || (v[5] = ($) => g.group = $),
-                                options: ue.value
-                              }, null, 8, ["modelValue", "options"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            class: "is-wide",
-                            label: e(a)("page.description"),
-                            help: e(a)("page.description-help"),
-                            error: m("description"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(nl), {
-                                "model-value": g.description ?? "",
-                                rows: 2,
-                                "onUpdate:modelValue": v[6] || (v[6] = ($) => g.description = String($ ?? ""))
-                              }, null, 8, ["model-value"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.icon"),
-                            error: m("icon"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(Ee), {
-                                "model-value": g.icon ?? "",
-                                placeholder: "grid",
-                                "onUpdate:modelValue": v[7] || (v[7] = ($) => g.icon = String($ ?? ""))
-                              }, null, 8, ["model-value"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.sort"),
-                            help: e(a)("page.sort-help"),
-                            error: m("sort"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(rt), {
-                                modelValue: g.sort,
-                                "onUpdate:modelValue": v[8] || (v[8] = ($) => g.sort = $)
-                              }, null, 8, ["modelValue"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.allow"),
-                            help: e(a)("page.allow-help"),
-                            error: m("allow"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(ut), {
-                                modelValue: g.allow,
-                                "onUpdate:modelValue": v[9] || (v[9] = ($) => g.allow = $),
-                                "allow-create": ""
-                              }, null, 8, ["modelValue"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.allowed-in"),
-                            help: e(a)("page.allowed-in-help"),
-                            error: m("allowed_in"),
-                            disabled: !_.value
-                          }, {
-                            default: c(() => [
-                              u(e(ut), {
-                                modelValue: g.allowed_in,
-                                "onUpdate:modelValue": v[10] || (v[10] = ($) => g.allowed_in = $),
-                                "allow-create": "",
-                                suggestions: ["root"]
-                              }, null, 8, ["modelValue"])
-                            ]),
-                            _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.max-per-entity"),
-                            help: e(a)("page.max-per-entity-help"),
-                            error: m("max_per_entity"),
-                            disabled: !_.value
+                        k.schema.length ? (i(), I(e(Wt), {
+                          key: 0,
+                          modelValue: oe.value,
+                          "onUpdate:modelValue": g[4] || (g[4] = (_) => oe.value = _),
+                          root: e(at)(k.schema),
+                          types: e(o).types,
+                          translate: e(o).i18n.t,
+                          can: e(o).can,
+                          disabled: !x.value,
+                          size: "sm"
+                        }, null, 8, ["modelValue", "root", "types", "translate", "can", "disabled"])) : N("", !0)
+                      ]),
+                      _: 1
+                    }, 8, ["title"])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["label"]),
+              u(e(Ee), {
+                value: "settings",
+                label: e(a)("page.tab-settings")
+              }, {
+                default: c(() => [
+                  u(e(Be), { class: "wx-block-editor__sheet" }, {
+                    default: c(() => [
+                      B("div", tn, [
+                        u(e(te), {
+                          label: e(a)("page.identifier"),
+                          help: e(a)("page.identifier-help"),
+                          error: U("slug"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(Ne), {
+                              modelValue: p.slug,
+                              "onUpdate:modelValue": g[5] || (g[5] = (_) => p.slug = _)
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.group"),
+                          help: e(a)("page.group-help"),
+                          error: U("group"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(Tt), {
+                              modelValue: p.group,
+                              "onUpdate:modelValue": g[6] || (g[6] = (_) => p.group = _),
+                              options: pe.value
+                            }, null, 8, ["modelValue", "options"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          class: "is-wide",
+                          label: e(a)("page.description"),
+                          help: e(a)("page.description-help"),
+                          error: U("description"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(il), {
+                              "model-value": p.description ?? "",
+                              rows: 2,
+                              "onUpdate:modelValue": g[7] || (g[7] = (_) => p.description = String(_ ?? ""))
+                            }, null, 8, ["model-value"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.icon"),
+                          error: U("icon"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(rl), {
+                              "model-value": p.icon,
+                              clearable: "",
+                              placeholder: e(a)("page.icon-search"),
+                              "empty-text": e(a)("page.icon-none"),
+                              "unknown-text": e(a)("page.icon-unknown"),
+                              "clear-label": e(a)("page.icon-clear"),
+                              "onUpdate:modelValue": g[8] || (g[8] = (_) => p.icon = _)
+                            }, null, 8, ["model-value", "placeholder", "empty-text", "unknown-text", "clear-label"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.sort"),
+                          help: e(a)("page.sort-help"),
+                          error: U("sort"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(ut), {
+                              modelValue: p.sort,
+                              "onUpdate:modelValue": g[9] || (g[9] = (_) => p.sort = _)
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.allow"),
+                          help: e(a)("page.allow-help"),
+                          error: U("allow"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(ct), {
+                              modelValue: p.allow,
+                              "onUpdate:modelValue": g[10] || (g[10] = (_) => p.allow = _),
+                              "allow-create": ""
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.allowed-in"),
+                          help: e(a)("page.allowed-in-help"),
+                          error: U("allowed_in"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(ct), {
+                              modelValue: p.allowed_in,
+                              "onUpdate:modelValue": g[11] || (g[11] = (_) => p.allowed_in = _),
+                              "allow-create": "",
+                              suggestions: ["root"]
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.max-per-entity"),
+                          help: e(a)("page.max-per-entity-help"),
+                          error: U("max_per_entity"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(ut), {
+                              "model-value": p.max_per_entity ?? void 0,
+                              min: 1,
+                              "onUpdate:modelValue": g[12] || (g[12] = (_) => p.max_per_entity = _ ?? null)
+                            }, null, 8, ["model-value"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "error", "disabled"]),
+                        u(e(te), {
+                          label: e(a)("page.enabled"),
+                          help: e(a)("page.enabled-help"),
+                          disabled: !x.value
+                        }, {
+                          default: c(() => [
+                            u(e(ul), {
+                              modelValue: p.is_enabled,
+                              "onUpdate:modelValue": g[13] || (g[13] = (_) => p.is_enabled = _)
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        }, 8, ["label", "help", "disabled"]),
+                        x.value ? (i(), $("div", ln, [
+                          u(e(ue), {
+                            type: "danger",
+                            variant: "outline",
+                            disabled: v.value.usage_count > 0,
+                            onClick: ye
                           }, {
                             default: c(() => [
-                              u(e(rt), {
-                                "model-value": g.max_per_entity ?? void 0,
-                                min: 1,
-                                "onUpdate:modelValue": v[11] || (v[11] = ($) => g.max_per_entity = $ ?? null)
-                              }, null, 8, ["model-value"])
+                              W(w(e(a)("page.delete")), 1)
                             ]),
                             _: 1
-                          }, 8, ["label", "help", "error", "disabled"]),
-                          u(e(X), {
-                            label: e(a)("page.enabled"),
-                            help: e(a)("page.enabled-help"),
-                            disabled: !_.value
+                          }, 8, ["disabled"]),
+                          v.value.usage_count > 0 ? (i(), I(e(F), {
+                            key: 0,
+                            size: "sm",
+                            tone: "muted"
                           }, {
                             default: c(() => [
-                              u(e(al), {
-                                modelValue: g.is_enabled,
-                                "onUpdate:modelValue": v[12] || (v[12] = ($) => g.is_enabled = $)
-                              }, null, 8, ["modelValue"])
+                              W(w(v.value.usage_count === 1 ? e(a)("page.delete-used-one") : e(a)("page.delete-used", { count: v.value.usage_count })), 1)
                             ]),
                             _: 1
-                          }, 8, ["label", "help", "disabled"]),
-                          _.value ? (i(), x("div", Gl, [
-                            u(e(ie), {
-                              type: "danger",
-                              variant: "outline",
-                              disabled: d.value.usage_count > 0,
-                              onClick: ge
-                            }, {
-                              default: c(() => [
-                                E(y(e(a)("page.delete")), 1)
-                              ]),
-                              _: 1
-                            }, 8, ["disabled"]),
-                            d.value.usage_count > 0 ? (i(), A(e(F), {
-                              key: 0,
-                              size: "sm",
-                              tone: "muted"
-                            }, {
-                              default: c(() => [
-                                E(y(e(a)("page.delete-used", { count: d.value.usage_count })), 1)
-                              ]),
-                              _: 1
-                            })) : z("", !0)
-                          ])) : z("", !0)
-                        ])
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["label"]),
-                u(e(Ve), {
-                  value: "history",
-                  label: e(a)("page.tab-history")
-                }, {
-                  default: c(() => [
-                    u(e(Se), {
-                      class: "wx-block-editor__sheet",
-                      padding: "none"
-                    }, {
-                      default: c(() => [
-                        u(hl, {
-                          block: d.value,
-                          "can-manage": _.value,
-                          onRestored: he
-                        }, null, 8, ["block", "can-manage"])
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  _: 1
-                }, 8, ["label"])
-              ]),
-              _: 1
-            }, 8, ["modelValue"])
-          ]),
-          W("div", Yl, [
-            u(xl, {
-              html: P.html,
-              styles: P.styles,
-              script: P.script,
-              runtime: P.runtime,
-              loading: P.loading
-            }, null, 8, ["html", "styles", "script", "runtime", "loading"]),
-            u(e(Se), {
-              title: e(a)("page.sample")
-            }, {
-              default: c(() => [
-                w.schema.length ? (i(), A(e(Et), {
-                  key: 0,
-                  modelValue: ae.value,
-                  "onUpdate:modelValue": v[14] || (v[14] = ($) => ae.value = $),
-                  root: e(lt)(w.schema),
-                  types: e(o).types,
-                  translate: e(o).i18n.t,
-                  can: e(o).can,
-                  disabled: !_.value,
-                  size: "sm"
-                }, null, 8, ["modelValue", "root", "types", "translate", "can", "disabled"])) : z("", !0),
-                u(e(F), {
-                  size: "sm",
-                  tone: "muted"
-                }, {
-                  default: c(() => [
-                    E(y(e(a)("page.sample-help")), 1)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["title"]),
-            u(e(Se), {
-              title: e(a)("page.usage")
-            }, {
-              default: c(() => [
-                p.value.length === 0 ? (i(), A(e(F), {
-                  key: 0,
-                  size: "sm",
-                  tone: "muted"
-                }, {
-                  default: c(() => [
-                    E(y(e(a)("page.usage-empty")), 1)
-                  ]),
-                  _: 1
-                })) : (i(), x("div", Ql, [
-                  (i(!0), x(j, null, ee(ye.value, ($) => (i(), x("div", {
-                    key: `${$.model}:${$.id}`,
-                    class: "wx-block-editor__use"
-                  }, [
-                    W("span", null, y($.title ?? `#${$.id}`), 1),
-                    $.published ? z("", !0) : (i(), A(e(Y), {
-                      key: 0,
-                      type: "warning",
-                      size: "sm"
-                    }, {
-                      default: c(() => [
-                        E(y(e(a)("page.unpublished-page")), 1)
-                      ]),
-                      _: 1
-                    }))
-                  ]))), 128)),
-                  p.value.length > ye.value.length ? (i(), A(e(F), {
-                    key: 0,
-                    size: "sm",
-                    tone: "muted"
+                          })) : N("", !0)
+                        ])) : N("", !0)
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["label"]),
+              u(e(Ee), {
+                value: "history",
+                label: e(a)("page.tab-history")
+              }, {
+                default: c(() => [
+                  u(e(Be), {
+                    class: "wx-block-editor__sheet",
+                    padding: "none"
                   }, {
                     default: c(() => [
-                      E(y(e(a)("page.usage-more", { count: p.value.length - ye.value.length })), 1)
+                      u(wl, {
+                        block: v.value,
+                        "can-manage": x.value,
+                        onRestored: ge
+                      }, null, 8, ["block", "can-manage"])
                     ]),
                     _: 1
-                  })) : z("", !0)
-                ]))
-              ]),
-              _: 1
-            }, 8, ["title"])
+                  })
+                ]),
+                _: 1
+              }, 8, ["label"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          Ht(u(Vl, {
+            class: "wx-block-editor__stage",
+            html: M.html,
+            styles: M.styles,
+            script: M.script,
+            runtime: M.runtime,
+            loading: M.loading
+          }, null, 8, ["html", "styles", "script", "runtime", "loading"]), [
+            [jt, Ve.value]
           ])
-        ]),
-        _.value ? (i(), A(e(ol), { key: 1 }, {
-          state: c(() => [
-            q.value ? (i(), A(e(Y), {
-              key: 0,
-              type: "primary",
-              dot: ""
-            }, {
-              default: c(() => [
-                E(y(e(a)("page.unsaved")), 1)
-              ]),
-              _: 1
-            })) : z("", !0),
-            d.value.draft ? (i(), A(e(Y), {
-              key: 1,
-              type: "warning",
-              dot: ""
-            }, {
-              default: c(() => [
-                E(y(e(a)("page.draft", { number: d.value.draft.number })), 1)
-              ]),
-              _: 1
-            })) : z("", !0),
-            d.value.published ? (i(), A(e(Y), {
-              key: 2,
-              type: "success",
-              dot: ""
-            }, {
-              default: c(() => [
-                E(y(e(a)("page.live", { number: d.value.published.number })), 1)
-              ]),
-              _: 1
-            })) : z("", !0)
-          ]),
+        ], 2),
+        x.value ? (i(), I(e(cl), { key: 1 }, {
           default: c(() => [
-            u(e(ie), {
+            u(e(ue), {
               variant: "outline",
-              loading: f.value,
-              onClick: pe
+              loading: m.value,
+              onClick: me
             }, {
               default: c(() => [
-                E(y(e(a)("page.save")), 1)
+                W(w(e(a)("page.save")), 1)
               ]),
               _: 1
             }, 8, ["loading"]),
-            u(e(ie), {
+            u(e(ue), {
               type: "primary",
-              loading: k.value,
-              disabled: !d.value.draft && !q.value,
-              onClick: oe
+              loading: h.value,
+              disabled: !v.value.draft && !Z.value,
+              onClick: se
             }, {
               default: c(() => [
-                E(y(e(a)("page.publish")), 1)
+                W(w(e(a)("page.publish")), 1)
               ]),
               _: 1
             }, 8, ["loading", "disabled"])
           ]),
           _: 1
-        })) : z("", !0)
+        })) : N("", !0)
       ], 64))
     ]));
   }
-}), en = /* @__PURE__ */ le(Xl, [["__scopeId", "data-v-abef0165"]]), tn = ["srcdoc"], ln = {
+}), an = /* @__PURE__ */ ne(nn, [["__scopeId", "data-v-acb6e830"]]), on = ["srcdoc"], sn = {
   key: 1,
   class: "wx-block-thumb__empty"
-}, nn = /* @__PURE__ */ te({
+}, rn = /* @__PURE__ */ le({
   __name: "BlockThumb",
   props: {
     thumbnail: {},
@@ -1550,36 +1586,36 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
     height: { default: 120 }
   },
   setup(t) {
-    const l = t, o = N(null), n = qe(o), s = T(() => n.value > 0 ? n.value / l.width : 0.2), r = T(
-      () => l.thumbnail ? Lt({ html: l.thumbnail.html, styles: l.thumbnail.styles }) : ""
-    ), a = T(() => ({
+    const l = t, o = P(null), n = Ke(o), s = S(() => n.value > 0 ? n.value / l.width : 0.2), r = S(
+      () => l.thumbnail ? At({ html: l.thumbnail.html, styles: l.thumbnail.styles }) : ""
+    ), a = S(() => ({
       width: `${l.width}px`,
       height: `${Math.round(l.height / s.value)}px`,
       transform: `scale(${s.value})`
     }));
-    return (h, I) => (i(), x("div", {
+    return (f, z) => (i(), $("div", {
       ref_key: "box",
       ref: o,
       class: "wx-block-thumb",
-      style: we({ height: `${t.height}px` })
+      style: _e({ height: `${t.height}px` })
     }, [
-      t.thumbnail ? (i(), x("iframe", {
+      t.thumbnail ? (i(), $("iframe", {
         key: 0,
         class: "wx-block-thumb__frame",
         srcdoc: r.value,
-        style: we(a.value),
+        style: _e(a.value),
         sandbox: "allow-same-origin",
         tabindex: "-1",
         "aria-hidden": "true"
-      }, null, 12, tn)) : (i(), x("div", ln, [
-        u(e(ve), { name: "grid" })
+      }, null, 12, on)) : (i(), $("div", sn, [
+        u(e(he), { name: "grid" })
       ]))
     ], 4));
   }
-}), Ot = /* @__PURE__ */ le(nn, [["__scopeId", "data-v-615b818a"]]), an = { class: "wx-block-picker" }, on = {
+}), Ot = /* @__PURE__ */ ne(rn, [["__scopeId", "data-v-615b818a"]]), un = { class: "wx-block-picker" }, cn = {
   key: 0,
   class: "wx-block-picker__group-title"
-}, sn = { class: "wx-block-picker__cards" }, rn = ["disabled", "title", "onClick"], un = { class: "wx-block-picker__body" }, cn = { class: "wx-block-picker__title" }, dn = /* @__PURE__ */ te({
+}, dn = { class: "wx-block-picker__cards" }, pn = ["disabled", "title", "onClick"], vn = { class: "wx-block-picker__body" }, fn = { class: "wx-block-picker__title" }, mn = /* @__PURE__ */ le({
   __name: "BlockPicker",
   props: {
     catalog: {},
@@ -1590,134 +1626,134 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
     blocksPath: { default: null }
   },
   setup(t) {
-    const l = t, { resolve: o, dismiss: n, open: s } = St();
-    Me();
-    const r = re("webx-blocks"), a = N("");
-    function h(f) {
+    const l = t, { resolve: o, dismiss: n, open: s } = Ct();
+    Oe();
+    const r = de("webx-blocks"), a = P("");
+    function f(m) {
       if (l.parent === null)
-        return f.allowed_in === null || f.allowed_in.includes("root");
-      const k = l.allow ? l.allow.includes(f.slug) : l.parent.allow?.includes(f.slug) === !0, B = f.allowed_in === null || f.allowed_in.includes(l.parent.slug);
-      return k && B;
+        return m.allowed_in === null || m.allowed_in.includes("root");
+      const h = l.allow ? l.allow.includes(m.slug) : l.parent.allow?.includes(m.slug) === !0, T = m.allowed_in === null || m.allowed_in.includes(l.parent.slug);
+      return h && T;
     }
-    const I = T(
-      () => l.catalog.filter((f) => f.is_enabled && f.published !== null && h(f)).map((f) => {
-        const k = Tl(l.tree, f.slug), B = f.max_per_entity !== null && k >= f.max_per_entity;
-        return { type: f, reason: B ? r("field.limit-reached", { count: k }) : null };
+    const z = S(
+      () => l.catalog.filter((m) => m.is_enabled && m.published !== null && f(m)).map((m) => {
+        const h = El(l.tree, m.slug), T = m.max_per_entity !== null && h >= m.max_per_entity;
+        return { type: m, reason: T ? r("field.limit-reached", { count: h }) : null };
       })
-    ), d = T(() => {
-      const f = a.value.trim().toLowerCase();
-      return f === "" ? I.value : I.value.filter(
-        ({ type: k }) => k.title.toLowerCase().includes(f) || k.slug.includes(f) || (k.description ?? "").toLowerCase().includes(f)
+    ), v = S(() => {
+      const m = a.value.trim().toLowerCase();
+      return m === "" ? z.value : z.value.filter(
+        ({ type: h }) => h.title.toLowerCase().includes(m) || h.slug.includes(m) || (h.description ?? "").toLowerCase().includes(m)
       );
-    }), p = T(() => {
-      const f = [...l.groups];
-      for (const { type: V } of d.value)
-        f.includes(V.group) || f.push(V.group);
-      const k = f.map((V) => ({
+    }), d = S(() => {
+      const m = [...l.groups];
+      for (const { type: V } of v.value)
+        m.includes(V.group) || m.push(V.group);
+      const h = m.map((V) => ({
         id: V,
-        label: Le(V, r),
-        options: d.value.filter((_) => _.type.group === V)
+        label: Ae(V, r),
+        options: v.value.filter((x) => x.type.group === V)
       })).filter((V) => V.options.length > 0);
-      return d.value.length <= 5 || a.value.trim() !== "" || k.length < 2 ? [{ id: "", label: "", options: d.value }] : k;
-    }), b = T(() => {
+      return v.value.length <= 5 || a.value.trim() !== "" || h.length < 2 ? [{ id: "", label: "", options: v.value }] : h;
+    }), b = S(() => {
       if (l.catalog.length === 0) return r("field.pick-none");
-      if (I.value.length === 0 && l.parent) {
-        const f = (l.allow ?? l.parent.allow ?? []).filter(
-          (k) => l.catalog.some((B) => B.slug === k)
+      if (z.value.length === 0 && l.parent) {
+        const m = (l.allow ?? l.parent.allow ?? []).filter(
+          (h) => l.catalog.some((T) => T.slug === h)
         );
-        return f.length === 0 ? r("field.pick-nothing-allowed", { parent: l.parent.title }) : r("field.pick-limited", { parent: l.parent.title, types: f.join(", ") });
+        return m.length === 0 ? r("field.pick-nothing-allowed", { parent: l.parent.title }) : r("field.pick-limited", { parent: l.parent.title, types: m.join(", ") });
       }
       return r("field.pick-empty");
     });
-    return (f, k) => {
-      const B = kt("router-link");
-      return i(), A(e(Vt), {
+    return (m, h) => {
+      const T = yt("router-link");
+      return i(), I(e(Vt), {
         open: e(s),
-        "onUpdate:open": k[2] || (k[2] = (V) => yt(s) ? s.value = V : null),
+        "onUpdate:open": h[2] || (h[2] = (V) => wt(s) ? s.value = V : null),
         title: e(r)("field.pick"),
         width: 860
       }, {
         footer: c(() => [
-          u(e(ie), {
+          u(e(ue), {
             variant: "outline",
-            onClick: k[1] || (k[1] = (V) => e(n)())
+            onClick: h[1] || (h[1] = (V) => e(n)())
           }, {
             default: c(() => [
-              E(y(e(r)("field.close")), 1)
+              W(w(e(r)("field.close")), 1)
             ]),
             _: 1
           })
         ]),
         default: c(() => [
-          W("div", an, [
-            I.value.length > 0 ? (i(), A(e(Ee), {
+          B("div", un, [
+            z.value.length > 0 ? (i(), I(e(Ne), {
               key: 0,
               modelValue: a.value,
-              "onUpdate:modelValue": k[0] || (k[0] = (V) => a.value = V),
+              "onUpdate:modelValue": h[0] || (h[0] = (V) => a.value = V),
               placeholder: e(r)("field.search"),
               clearable: "",
               autofocus: ""
-            }, null, 8, ["modelValue", "placeholder"])) : z("", !0),
-            d.value.length === 0 ? (i(), A(e(Ct), {
+            }, null, 8, ["modelValue", "placeholder"])) : N("", !0),
+            v.value.length === 0 ? (i(), I(e(Bt), {
               key: 1,
               icon: "grid",
               title: b.value,
               size: "sm"
             }, {
               default: c(() => [
-                t.catalog.length === 0 && t.blocksPath ? (i(), A(B, {
+                t.catalog.length === 0 && t.blocksPath ? (i(), I(T, {
                   key: 0,
                   to: t.blocksPath
                 }, {
                   default: c(() => [
-                    E(y(e(r)("field.pick-none-link")), 1)
+                    W(w(e(r)("field.pick-none-link")), 1)
                   ]),
                   _: 1
-                }, 8, ["to"])) : z("", !0)
+                }, 8, ["to"])) : N("", !0)
               ]),
               _: 1
-            }, 8, ["title"])) : z("", !0),
-            (i(!0), x(j, null, ee(p.value, (V) => (i(), x("section", {
+            }, 8, ["title"])) : N("", !0),
+            (i(!0), $(j, null, Q(d.value, (V) => (i(), $("section", {
               key: V.id,
               class: "wx-block-picker__group"
             }, [
-              V.label ? (i(), x("div", on, y(V.label), 1)) : z("", !0),
-              W("div", sn, [
-                (i(!0), x(j, null, ee(V.options, (_) => (i(), x("button", {
-                  key: _.type.id,
+              V.label ? (i(), $("div", cn, w(V.label), 1)) : N("", !0),
+              B("div", dn, [
+                (i(!0), $(j, null, Q(V.options, (x) => (i(), $("button", {
+                  key: x.type.id,
                   type: "button",
-                  class: Be(["wx-block-picker__card", { "is-disabled": _.reason !== null }]),
-                  disabled: _.reason !== null,
-                  title: _.reason ?? void 0,
-                  onClick: (g) => e(o)(_.type)
+                  class: xe(["wx-block-picker__card", { "is-disabled": x.reason !== null }]),
+                  disabled: x.reason !== null,
+                  title: x.reason ?? void 0,
+                  onClick: (p) => e(o)(x.type)
                 }, [
                   u(Ot, {
-                    thumbnail: _.type.thumbnail,
+                    thumbnail: x.type.thumbnail,
                     height: 96
                   }, null, 8, ["thumbnail"]),
-                  W("div", un, [
-                    W("div", cn, y(_.type.title), 1),
-                    _.reason ? (i(), A(e(F), {
+                  B("div", vn, [
+                    B("div", fn, w(x.type.title), 1),
+                    x.reason ? (i(), I(e(F), {
                       key: 0,
                       size: "sm",
                       tone: "warning"
                     }, {
                       default: c(() => [
-                        E(y(_.reason), 1)
+                        W(w(x.reason), 1)
                       ]),
                       _: 2
-                    }, 1024)) : _.type.description ? (i(), A(e(F), {
+                    }, 1024)) : x.type.description ? (i(), I(e(F), {
                       key: 1,
                       size: "sm",
                       tone: "muted"
                     }, {
                       default: c(() => [
-                        E(y(_.type.description), 1)
+                        W(w(x.type.description), 1)
                       ]),
                       _: 2
-                    }, 1024)) : z("", !0)
+                    }, 1024)) : N("", !0)
                   ])
-                ], 10, rn))), 128))
+                ], 10, pn))), 128))
               ])
             ]))), 128))
           ])
@@ -1726,7 +1762,7 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
       }, 8, ["open", "title"]);
     };
   }
-}), pn = /* @__PURE__ */ le(dn, [["__scopeId", "data-v-99f4090e"]]), vn = { class: "wx-blocks-preview__tools" }, fn = ["src", "title"], mn = /* @__PURE__ */ te({
+}), hn = /* @__PURE__ */ ne(mn, [["__scopeId", "data-v-99f4090e"]]), bn = { class: "wx-blocks-preview__tools" }, gn = ["src", "title"], kn = /* @__PURE__ */ le({
   __name: "BlocksPreview",
   props: {
     url: {},
@@ -1736,122 +1772,122 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
   },
   emits: ["select", "edit"],
   setup(t, { expose: l, emit: o }) {
-    const n = t, s = o, r = re("webx-blocks"), a = N(null), h = N(null), I = N(null), d = qe(I), p = N(!1), b = N(!1), f = N(null), k = N(0), B = T(() => k.value > 0), V = T(() => [
+    const n = t, s = o, r = de("webx-blocks"), a = P(null), f = P(null), z = P(null), v = Ke(z), d = P(!1), b = P(!1), m = P(null), h = P(0), T = S(() => h.value > 0), V = S(() => [
       { value: 1280, icon: "monitor", ariaLabel: r("field.width-desktop") },
       { value: 834, icon: "tablet", ariaLabel: r("field.width-tablet") },
       { value: 390, icon: "smartphone", ariaLabel: r("field.width-phone") }
-    ]), _ = T(() => f.value !== null ? f.value : n.compact ? d.value > 0 && d.value < 560 ? 390 : 834 : 1280), g = T(() => d.value === 0 ? 1 : Math.min(1, d.value / _.value)), w = T(() => ({
-      width: `${_.value}px`,
-      transform: `scale(${g.value})`,
-      ...B.value ? { height: `${k.value}px` } : {}
-    })), H = T(() => ({
-      width: `${Math.round(_.value * g.value)}px`,
-      ...B.value ? { height: `${Math.round(k.value * g.value)}px` } : {}
-    })), K = T(() => {
+    ]), x = S(() => m.value !== null ? m.value : n.compact ? v.value > 0 && v.value < 560 ? 390 : 834 : 1280), p = S(() => v.value === 0 ? 1 : Math.min(1, v.value / x.value)), k = S(() => ({
+      width: `${x.value}px`,
+      transform: `scale(${p.value})`,
+      ...T.value ? { height: `${h.value}px` } : {}
+    })), R = S(() => ({
+      width: `${Math.round(x.value * p.value)}px`,
+      ...T.value ? { height: `${Math.round(h.value * p.value)}px` } : {}
+    })), J = S(() => {
       if (!n.url) return "";
       try {
-        return `${new URL(n.url, location.origin).pathname} · ${_.value} px`;
+        return `${new URL(n.url, location.origin).pathname} · ${x.value} px`;
       } catch {
         return n.url;
       }
     });
-    function Z() {
+    function K() {
       try {
         return a.value?.contentDocument ?? null;
       } catch {
         return null;
       }
     }
-    let ne = null, C = null;
-    function P(U) {
-      U.documentElement.scrollTop !== 0 && (U.documentElement.scrollTop = 0);
+    let ae = null, C = null;
+    function M(A) {
+      A.documentElement.scrollTop !== 0 && (A.documentElement.scrollTop = 0);
     }
     function O() {
-      const U = Z(), M = U?.body;
-      if (!M || !U?.defaultView) return;
-      P(U);
-      const R = U.defaultView.getComputedStyle(M), G = (parseFloat(R.marginTop) || 0) + (parseFloat(R.marginBottom) || 0), ce = Math.ceil(M.scrollHeight + G);
-      ce !== k.value && (k.value = ce, ue !== null && Rt(() => requestAnimationFrame(Q)));
+      const A = K(), D = A?.body;
+      if (!D || !A?.defaultView) return;
+      M(A);
+      const H = A.defaultView.getComputedStyle(D), G = (parseFloat(H.marginTop) || 0) + (parseFloat(H.marginBottom) || 0), ve = Math.ceil(D.scrollHeight + G);
+      ve !== h.value && (h.value = ve, pe !== null && Ft(() => requestAnimationFrame(X)));
     }
-    function q(U) {
+    function Z(A) {
       C?.disconnect();
-      const M = U.defaultView;
-      !M || !U.body || (C = new M.ResizeObserver(O), C.observe(U.body), O());
+      const D = A.defaultView;
+      !D || !A.body || (C = new D.ResizeObserver(O), C.observe(A.body), O());
     }
-    function _e() {
+    function $e() {
       b.value = !0;
-      const U = Z();
-      U && (q(U), ne?.release(), ne = gl(U, {
+      const A = K();
+      A && (Z(A), ae?.release(), ae = xl(A, {
         /* No guard against answering a click with a scroll: `bring` moves nothing that is already
            readable, and a block clicked at the very bottom of the window, half under the action
            bar, is exactly the one worth moving. */
-        select: (M) => s("select", M)
-      }), Ye(U, n.selected ?? null), ke(n.selected ?? null));
+        select: (D) => s("select", D)
+      }), Qe(A, n.selected ?? null), we(n.selected ?? null));
     }
-    let ue = null, ae = null;
-    function ke(U) {
-      U !== null && (ue = U, ae !== null && clearTimeout(ae), ae = window.setTimeout(() => {
-        ue = null, ae = null;
-      }, 400), Q());
+    let pe = null, oe = null;
+    function we(A) {
+      A !== null && (pe = A, oe !== null && clearTimeout(oe), oe = window.setTimeout(() => {
+        pe = null, oe = null;
+      }, 400), X());
     }
-    function xe(U) {
-      const M = a.value?.getBoundingClientRect();
-      if (!M) return null;
-      const R = U.getBoundingClientRect();
-      return { top: M.top + R.top * g.value, height: R.height * g.value };
+    function Se(A) {
+      const D = a.value?.getBoundingClientRect();
+      if (!D) return null;
+      const H = A.getBoundingClientRect();
+      return { top: D.top + H.top * p.value, height: H.height * p.value };
     }
-    function he() {
-      let U = a.value?.parentElement ?? null;
-      for (; U; ) {
-        const M = getComputedStyle(U).overflowY;
-        if ((M === "auto" || M === "scroll") && U.scrollHeight > U.clientHeight)
-          return U;
-        U = U.parentElement;
+    function ge() {
+      let A = a.value?.parentElement ?? null;
+      for (; A; ) {
+        const D = getComputedStyle(A).overflowY;
+        if ((D === "auto" || D === "scroll") && A.scrollHeight > A.clientHeight)
+          return A;
+        A = A.parentElement;
       }
       return null;
     }
-    function Q() {
-      const U = Z();
-      if (ue === null || !U) return;
-      P(U);
-      const M = et(U, ue), R = M ? xe(M) : null;
-      if (!R) return;
-      const G = he(), ce = G?.getBoundingClientRect(), pe = h.value?.getBoundingClientRect().height ?? 0, oe = {
-        top: (ce?.top ?? 0) + pe,
-        bottom: (ce ? ce.bottom : window.innerHeight) - pe
-      }, ge = R.top + R.height, Te = R.top < oe.top, ye = R.height > oe.bottom - oe.top, m = Te || ye ? R.top - oe.top : ge > oe.bottom ? ge - oe.bottom : 0;
-      m !== 0 && (G ?? window).scrollBy({ top: m, behavior: "smooth" });
+    function X() {
+      const A = K();
+      if (pe === null || !A) return;
+      M(A);
+      const D = lt(A, pe), H = D ? Se(D) : null;
+      if (!H) return;
+      const G = ge(), ve = G?.getBoundingClientRect(), me = f.value?.getBoundingClientRect().height ?? 0, se = {
+        top: (ve?.top ?? 0) + me,
+        bottom: (ve ? ve.bottom : window.innerHeight) - me
+      }, ye = H.top + H.height, Ce = H.top < se.top, Ve = H.height > se.bottom - se.top, y = Ce || Ve ? H.top - se.top : ye > se.bottom ? ye - se.bottom : 0;
+      y !== 0 && (G ?? window).scrollBy({ top: y, behavior: "smooth" });
     }
-    function $e(U, M) {
-      const R = Z();
-      if (!R || !b.value) return !1;
-      const G = bl(R, U, M);
-      return G && Ye(R, n.selected ?? null), G;
+    function Te(A, D) {
+      const H = K();
+      if (!H || !b.value) return !1;
+      const G = _l(H, A, D);
+      return G && Qe(H, n.selected ?? null), G;
     }
-    function be() {
+    function ke() {
       b.value = !1, C?.disconnect(), C = null, a.value && n.url && (a.value.src = n.url);
     }
-    function de(U) {
-      U.key === "Escape" && p.value && (p.value = !1, U.stopPropagation());
+    function fe(A) {
+      A.key === "Escape" && d.value && (d.value = !1, A.stopPropagation());
     }
-    return fe(
+    return ce(
       () => n.selected,
-      (U) => {
-        const M = Z();
-        !M || !b.value || (Ye(M, U ?? null), ke(U ?? null));
+      (A) => {
+        const D = K();
+        !D || !b.value || (Qe(D, A ?? null), we(A ?? null));
       }
-    ), fe(() => n.reload, be), fe(
+    ), ce(() => n.reload, ke), ce(
       () => n.url,
       () => b.value = !1
-    ), Ue(() => window.addEventListener("keydown", de)), Xe(() => {
-      window.removeEventListener("keydown", de), ae !== null && clearTimeout(ae), C?.disconnect(), ne?.release();
-    }), l({ replace: $e, refresh: be, open: () => p.value = !0 }), (U, M) => (i(), x("div", {
-      class: Be(["wx-blocks-preview", { "is-fullscreen": p.value, "is-grown": B.value, "is-compact": t.compact }]),
-      style: we({ "--wx-preview-scale": g.value })
+    ), Pe(() => window.addEventListener("keydown", fe)), tt(() => {
+      window.removeEventListener("keydown", fe), oe !== null && clearTimeout(oe), C?.disconnect(), ae?.release();
+    }), l({ replace: Te, refresh: ke, open: () => d.value = !0 }), (A, D) => (i(), $("div", {
+      class: xe(["wx-blocks-preview", { "is-fullscreen": d.value, "is-grown": T.value, "is-compact": t.compact }]),
+      style: _e({ "--wx-preview-scale": p.value })
     }, [
-      W("div", {
+      B("div", {
         ref_key: "bar",
-        ref: h,
+        ref: f,
         class: "wx-blocks-preview__bar"
       }, [
         u(e(F), {
@@ -1861,28 +1897,28 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
           truncate: ""
         }, {
           default: c(() => [
-            E(y(K.value), 1)
+            W(w(J.value), 1)
           ]),
           _: 1
         }),
-        u(e(xt), {
+        u(e($t), {
           class: "wx-blocks-preview__widths",
-          "model-value": _.value,
+          "model-value": x.value,
           options: V.value,
           size: "sm",
           "aria-label": e(r)("field.width"),
-          "onUpdate:modelValue": M[0] || (M[0] = (R) => f.value = Number(R))
+          "onUpdate:modelValue": D[0] || (D[0] = (H) => m.value = Number(H))
         }, null, 8, ["model-value", "options", "aria-label"]),
-        W("div", vn, [
-          t.compact ? (i(), A(e(Ae), {
+        B("div", bn, [
+          t.compact ? (i(), I(e(ze), {
             key: 0,
             size: "sm",
             tone: "primary",
             icon: "edit",
             title: e(r)("field.blocks"),
-            onClick: M[1] || (M[1] = (R) => s("edit"))
-          }, null, 8, ["title"])) : z("", !0),
-          t.url ? (i(), A(e(Ae), {
+            onClick: D[1] || (D[1] = (H) => s("edit"))
+          }, null, 8, ["title"])) : N("", !0),
+          t.url ? (i(), I(e(ze), {
             key: 1,
             size: "sm",
             icon: "external-link",
@@ -1891,43 +1927,43 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
             href: t.url,
             target: "_blank",
             rel: "noopener"
-          }, null, 8, ["title", "href"])) : z("", !0),
-          u(e(Ae), {
+          }, null, 8, ["title", "href"])) : N("", !0),
+          u(e(ze), {
             size: "sm",
-            icon: p.value ? "minimize" : "maximize",
+            icon: d.value ? "minimize" : "maximize",
             tone: "neutral",
-            title: p.value ? e(r)("field.close") : e(r)("field.fullscreen"),
-            onClick: M[2] || (M[2] = (R) => p.value = !p.value)
+            title: d.value ? e(r)("field.close") : e(r)("field.fullscreen"),
+            onClick: D[2] || (D[2] = (H) => d.value = !d.value)
           }, null, 8, ["icon", "title"])
         ])
       ], 512),
-      W("div", {
+      B("div", {
         ref_key: "box",
-        ref: I,
+        ref: z,
         class: "wx-blocks-preview__ground"
       }, [
-        W("div", {
+        B("div", {
           class: "wx-blocks-preview__clip",
-          style: we(H.value)
+          style: _e(R.value)
         }, [
-          t.url ? (i(), x("iframe", {
+          t.url ? (i(), $("iframe", {
             key: 0,
             ref_key: "frame",
             ref: a,
             class: "wx-blocks-preview__frame",
             src: t.url,
-            style: we(w.value),
+            style: _e(k.value),
             title: e(r)("field.preview"),
-            onLoad: _e
-          }, null, 44, fn)) : z("", !0)
+            onLoad: $e
+          }, null, 44, gn)) : N("", !0)
         ], 4)
       ], 512)
     ], 6));
   }
-}), hn = /* @__PURE__ */ le(mn, [["__scopeId", "data-v-398e4cef"]]), bn = { class: "wx-blocks-tree__node" }, gn = ["onClick", "onKeydown"], kn = { class: "wx-blocks-tree__name" }, yn = ["title"], wn = ["title"], _n = ["title"], xn = ["title"], $n = {
+}), yn = /* @__PURE__ */ ne(kn, [["__scopeId", "data-v-398e4cef"]]), wn = { class: "wx-blocks-tree__node" }, _n = ["onClick", "onKeydown"], xn = { class: "wx-blocks-tree__name" }, $n = ["title"], Sn = ["title"], Tn = ["title"], Cn = ["title"], Vn = {
   key: 4,
   class: "wx-blocks-tree__actions"
-}, Tn = ["onClick"], Sn = /* @__PURE__ */ te({
+}, Bn = ["onClick"], En = /* @__PURE__ */ le({
   __name: "BlocksTree",
   props: {
     nodes: {},
@@ -1940,133 +1976,133 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
   },
   emits: ["select", "add", "remove", "duplicate", "visibility", "reorder"],
   setup(t, { emit: l }) {
-    const o = t, n = l, s = re("webx-blocks");
-    function r(p) {
-      return o.catalog.find((b) => b.slug === p.type) ?? null;
+    const o = t, n = l, s = de("webx-blocks");
+    function r(d) {
+      return o.catalog.find((b) => b.slug === d.type) ?? null;
     }
-    function a(p) {
-      return r(p)?.title ?? p.type;
+    function a(d) {
+      return r(d)?.title ?? d.type;
     }
-    function h(p) {
-      const b = r(p);
-      return b?.content ? Ut(b.content.schema) : [];
+    function f(d) {
+      const b = r(d);
+      return b?.content ? Nt(b.content.schema) : [];
     }
-    function I(p, b) {
-      const f = p.values[b.id];
-      return Array.isArray(f) ? f : [];
+    function z(d, b) {
+      const m = d.values[b.id];
+      return Array.isArray(m) ? m : [];
     }
-    function d(p) {
+    function v(d) {
       return [
         {
           key: "visibility",
-          icon: p.hidden === !0 ? "eye" : "eye-off",
-          label: p.hidden === !0 ? s("field.show") : s("field.hide"),
-          run: () => n("visibility", p.key, p.hidden !== !0)
+          icon: d.hidden === !0 ? "eye" : "eye-off",
+          label: d.hidden === !0 ? s("field.show") : s("field.hide"),
+          run: () => n("visibility", d.key, d.hidden !== !0)
         },
         {
           key: "duplicate",
           icon: "copy",
           label: s("field.duplicate"),
-          run: () => n("duplicate", p.key)
+          run: () => n("duplicate", d.key)
         },
         {
           key: "remove",
           icon: "trash",
           label: s("field.remove"),
           danger: !0,
-          run: () => n("remove", p.key)
+          run: () => n("remove", d.key)
         }
       ];
     }
-    return (p, b) => {
-      const f = kt("blocks-tree", !0);
-      return i(), A(e(sl), {
+    return (d, b) => {
+      const m = yt("blocks-tree", !0);
+      return i(), I(e(dl), {
         "model-value": t.nodes,
         "item-key": "key",
-        "item-label": (k) => a(k),
+        "item-label": (h) => a(h),
         disabled: t.disabled,
         plain: "",
         size: "sm",
         "empty-text": t.depth === 0 ? e(s)("field.empty") : "",
-        class: Be(["wx-blocks-tree", { "is-nested": t.depth > 0 }]),
-        "onUpdate:modelValue": b[6] || (b[6] = (k) => n("reorder", t.parentKey, t.field, k))
+        class: xe(["wx-blocks-tree", { "is-nested": t.depth > 0 }]),
+        "onUpdate:modelValue": b[6] || (b[6] = (h) => n("reorder", t.parentKey, t.field, h))
       }, {
-        default: c(({ item: k }) => [
-          W("div", bn, [
-            W("div", {
-              class: Be(["wx-blocks-tree__row", { "is-selected": t.selected === k.key, "is-hidden": k.hidden === !0 }]),
+        default: c(({ item: h }) => [
+          B("div", wn, [
+            B("div", {
+              class: xe(["wx-blocks-tree__row", { "is-selected": t.selected === h.key, "is-hidden": h.hidden === !0 }]),
               role: "button",
               tabindex: "0",
-              onClick: (B) => n("select", k.key),
+              onClick: (T) => n("select", h.key),
               onKeydown: [
-                st(it((B) => n("select", k.key), ["prevent"]), ["enter"]),
-                st(it((B) => n("select", k.key), ["prevent"]), ["space"])
+                it(rt((T) => n("select", h.key), ["prevent"]), ["enter"]),
+                it(rt((T) => n("select", h.key), ["prevent"]), ["space"])
               ]
             }, [
-              W("span", kn, y(a(k)), 1),
-              r(k) ? r(k)?.draft ? (i(), x("span", {
+              B("span", xn, w(a(h)), 1),
+              r(h) ? r(h)?.draft ? (i(), $("span", {
                 key: 1,
                 class: "wx-blocks-tree__flag is-warning",
                 title: e(s)("field.draft-type")
               }, [
-                u(e(ve), { name: "warning" })
-              ], 8, wn)) : r(k)?.is_enabled === !1 ? (i(), x("span", {
+                u(e(he), { name: "warning" })
+              ], 8, Sn)) : r(h)?.is_enabled === !1 ? (i(), $("span", {
                 key: 2,
                 class: "wx-blocks-tree__flag",
                 title: e(s)("field.disabled-type")
               }, [
-                u(e(ve), { name: "lock" })
-              ], 8, _n)) : z("", !0) : (i(), x("span", {
+                u(e(he), { name: "lock" })
+              ], 8, Tn)) : N("", !0) : (i(), $("span", {
                 key: 0,
                 class: "wx-blocks-tree__flag is-danger",
-                title: e(s)("field.unknown-type", { type: k.type })
+                title: e(s)("field.unknown-type", { type: h.type })
               }, [
-                u(e(ve), { name: "close-circle" })
-              ], 8, yn)),
-              k.hidden === !0 ? (i(), x("span", {
+                u(e(he), { name: "close-circle" })
+              ], 8, $n)),
+              h.hidden === !0 ? (i(), $("span", {
                 key: 3,
                 class: "wx-blocks-tree__flag",
                 title: e(s)("field.hidden-note")
               }, [
-                u(e(ve), { name: "eye-off" })
-              ], 8, xn)) : z("", !0),
-              t.disabled ? z("", !0) : (i(), x("span", $n, [
-                u(e(Xt), {
-                  actions: d(k),
-                  label: a(k)
+                u(e(he), { name: "eye-off" })
+              ], 8, Cn)) : N("", !0),
+              t.disabled ? N("", !0) : (i(), $("span", Vn, [
+                u(e(ll), {
+                  actions: v(h),
+                  label: a(h)
                 }, null, 8, ["actions", "label"])
               ]))
-            ], 42, gn),
-            (i(!0), x(j, null, ee(h(k), (B) => (i(), x("div", {
-              key: B.id,
+            ], 42, _n),
+            (i(!0), $(j, null, Q(f(h), (T) => (i(), $("div", {
+              key: T.id,
               class: "wx-blocks-tree__kids"
             }, [
-              u(f, {
-                nodes: I(k, B),
+              u(m, {
+                nodes: z(h, T),
                 catalog: t.catalog,
-                "parent-key": k.key,
-                field: B.id,
+                "parent-key": h.key,
+                field: T.id,
                 selected: t.selected,
                 disabled: t.disabled,
                 depth: t.depth + 1,
                 onSelect: b[0] || (b[0] = (V) => n("select", V)),
-                onAdd: b[1] || (b[1] = (V, _, g) => n("add", V, _, g)),
+                onAdd: b[1] || (b[1] = (V, x, p) => n("add", V, x, p)),
                 onRemove: b[2] || (b[2] = (V) => n("remove", V)),
                 onDuplicate: b[3] || (b[3] = (V) => n("duplicate", V)),
-                onVisibility: b[4] || (b[4] = (V, _) => n("visibility", V, _)),
-                onReorder: b[5] || (b[5] = (V, _, g) => n("reorder", V, _, g))
+                onVisibility: b[4] || (b[4] = (V, x) => n("visibility", V, x)),
+                onReorder: b[5] || (b[5] = (V, x, p) => n("reorder", V, x, p))
               }, null, 8, ["nodes", "catalog", "parent-key", "field", "selected", "disabled", "depth"]),
-              t.disabled ? z("", !0) : (i(), x("button", {
+              t.disabled ? N("", !0) : (i(), $("button", {
                 key: 0,
                 type: "button",
                 class: "wx-blocks-tree__add is-inner",
-                onClick: (V) => n("add", k.key, B.id, B)
+                onClick: (V) => n("add", h.key, T.id, T)
               }, [
-                E(" + " + y(e(s)("field.add-inside")), 1),
-                h(k).length > 1 ? (i(), x(j, { key: 0 }, [
-                  E(" · " + y(B.label ?? B.id), 1)
-                ], 64)) : z("", !0)
-              ], 8, Tn))
+                W(" + " + w(e(s)("field.add-inside")), 1),
+                f(h).length > 1 ? (i(), $(j, { key: 0 }, [
+                  W(" · " + w(T.label ?? T.id), 1)
+                ], 64)) : N("", !0)
+              ], 8, Bn))
             ]))), 128))
           ])
         ]),
@@ -2074,33 +2110,33 @@ const Nl = { class: "wx-block-editor" }, Pl = { class: "wx-block-editor__columns
       }, 8, ["model-value", "item-label", "disabled", "empty-text", "class"]);
     };
   }
-}), Vn = /* @__PURE__ */ le(Sn, [["__scopeId", "data-v-590fa1d6"]]), nt = /* @__PURE__ */ Symbol("wx-blocks-preview");
-function pa(t) {
-  wt(nt, t);
+}), Wn = /* @__PURE__ */ ne(En, [["__scopeId", "data-v-590fa1d6"]]), ot = /* @__PURE__ */ Symbol("wx-blocks-preview");
+function ha(t) {
+  _t(ot, t);
 }
-function va() {
-  return He(nt, null);
+function ba() {
+  return Fe(ot, null);
 }
-const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
+const kt = /* @__PURE__ */ Symbol("wx-blocks-root"), Ln = {
   key: 0,
   class: "wx-blocks-nested"
-}, Bn = {
+}, An = {
   key: 0,
   class: "wx-blocks__tree"
-}, En = { class: "wx-blocks__panel-head" }, Wn = { class: "wx-blocks__panel-title" }, Ln = { class: "wx-blocks__tools" }, An = {
+}, zn = { class: "wx-blocks__panel-head" }, In = { class: "wx-blocks__panel-title" }, Nn = { class: "wx-blocks__tools" }, Pn = {
   key: 1,
   class: "wx-blocks__fields"
-}, zn = { class: "wx-blocks__panel-head" }, Un = { class: "wx-blocks__panel-title" }, In = {
+}, Un = { class: "wx-blocks__panel-head" }, Mn = { class: "wx-blocks__panel-title" }, Dn = {
   key: 0,
   class: "wx-blocks__trail"
-}, Nn = ["onClick"], Pn = { class: "wx-blocks__panel-name" }, Mn = { class: "wx-blocks__panel-extra" }, On = { key: 0 }, Dn = { class: "wx-blocks__form" }, Rn = {
+}, On = ["onClick"], Rn = { class: "wx-blocks__panel-name" }, Hn = { class: "wx-blocks__panel-extra" }, jn = { key: 0 }, Fn = { class: "wx-blocks__form" }, qn = {
   key: 0,
   class: "wx-blocks__preview"
-}, Hn = /* @__PURE__ */ te({
+}, Jn = /* @__PURE__ */ le({
   name: "WxBlocks",
   inheritAttrs: !1,
   __name: "BlocksField",
-  props: /* @__PURE__ */ Jt({
+  props: /* @__PURE__ */ Gt({
     node: { default: void 0 },
     context: { default: void 0 },
     name: { default: void 0 },
@@ -2116,36 +2152,36 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
   }),
   emits: ["update:modelValue"],
   setup(t) {
-    const l = t, o = Ht(t, "modelValue"), n = He(gt, !1);
-    wt(gt, !0), Me();
-    const s = re("webx-blocks"), r = Ne(), a = He(el, null);
-    let h = null;
-    const I = N([]), d = T(() => l.catalog ?? I.value), p = T(() => Array.isArray(o.value) ? o.value : []), b = N(null), f = T(() => b.value ? se(p.value, b.value) : null), k = T(
-      () => f.value ? d.value.find((m) => m.slug === f.value?.node.type) ?? null : null
+    const l = t, o = qt(t, "modelValue"), n = Fe(kt, !1);
+    _t(kt, !0), Oe();
+    const s = de("webx-blocks"), r = Me(), a = Fe(nl, null);
+    let f = null;
+    const z = P([]), v = S(() => l.catalog ?? z.value), d = S(() => Array.isArray(o.value) ? o.value : []), b = P(null), m = S(() => b.value ? ie(d.value, b.value) : null), h = S(
+      () => m.value ? v.value.find((y) => y.slug === m.value?.node.type) ?? null : null
     );
-    function B(m) {
-      return d.value.find((L) => L.slug === m.type)?.title ?? m.type;
+    function T(y) {
+      return v.value.find((E) => E.slug === y.type)?.title ?? y.type;
     }
-    const V = T(() => {
-      const m = [];
-      return Pe(p.value, (L) => m.push(L.key)), m;
-    }), _ = T(() => {
-      const m = b.value ? V.value.indexOf(b.value) : -1;
+    const V = S(() => {
+      const y = [];
+      return De(d.value, (E) => y.push(E.key)), y;
+    }), x = S(() => {
+      const y = b.value ? V.value.indexOf(b.value) : -1;
       return {
-        previous: m > 0 ? V.value[m - 1] : null,
-        next: m >= 0 && m < V.value.length - 1 ? V.value[m + 1] : null
+        previous: y > 0 ? V.value[y - 1] : null,
+        next: y >= 0 && y < V.value.length - 1 ? V.value[y + 1] : null
       };
-    }), g = T(() => {
-      const m = [];
-      let L = f.value?.parent ?? null;
-      for (; L; )
-        m.unshift({ key: L.key, title: B(L) }), L = se(p.value, L.key)?.parent ?? null;
-      return m;
-    }), w = He(nt, null), H = N(null), K = N(null), Z = qe(K), ne = T(() => w !== null && w.url.value !== null), C = T(() => ne.value && Z.value > 0 && Z.value <= 900), P = N(!1), O = T(() => {
-      if (!f.value) return;
-      const m = k.value?.title ?? f.value.node.type;
-      return [...g.value.map((L) => L.title), m].join(" / ");
-    }), q = T(
+    }), p = S(() => {
+      const y = [];
+      let E = m.value?.parent ?? null;
+      for (; E; )
+        y.unshift({ key: E.key, title: T(E) }), E = ie(d.value, E.key)?.parent ?? null;
+      return y;
+    }), k = Fe(ot, null), R = P(null), J = P(null), K = Ke(J), ae = S(() => k !== null && k.url.value !== null), C = S(() => ae.value && K.value > 0 && K.value <= 900), M = P(!1), O = S(() => {
+      if (!m.value) return;
+      const y = h.value?.title ?? m.value.node.type;
+      return [...p.value.map((E) => E.title), y].join(" / ");
+    }), Z = S(
       () => C.value ? {
         /* Up from the bottom, and not all the way: the strip of page left above it is what
            says the sheet is over the page rather than instead of it. No heading of its own —
@@ -2164,290 +2200,290 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
            in the column is part of the heading this replaces. The tree keeps its own heading,
            which already says what it is and how many. */
         title: O.value,
-        open: P.value,
-        "onUpdate:open": (m) => P.value = m
+        open: M.value,
+        "onUpdate:open": (y) => M.value = y
       } : {}
-    ), _e = T(
-      () => a?.state.manifest?.modules.find((m) => m.id === "blocks")?.meta?.groups ?? []
-    ), ue = jt()?.type, ae = T(() => l.context?.types ? l.context.types : a?.types ? { ...Ge, ...a.types } : ue ? { ...Ge, "wx-blocks": { component: ue, kind: "field", nested: !0 } } : Ge), ke = T(
-      () => l.context?.translate ?? a?.i18n.t ?? ((m) => m)
-    ), xe = T(() => l.context?.can ?? a?.can ?? (() => !0)), he = Bt(pn);
-    function Q(m) {
-      o.value = m;
+    ), $e = S(
+      () => a?.state.manifest?.modules.find((y) => y.id === "blocks")?.meta?.groups ?? []
+    ), pe = Jt()?.type, oe = S(() => l.context?.types ? l.context.types : a?.types ? { ...Ye, ...a.types } : pe ? { ...Ye, "wx-blocks": { component: pe, kind: "field", nested: !0 } } : Ye), we = S(
+      () => l.context?.translate ?? a?.i18n.t ?? ((y) => y)
+    ), Se = S(() => l.context?.can ?? a?.can ?? (() => !0)), ge = Et(hn);
+    function X(y) {
+      o.value = y;
     }
-    async function $e(m, L, D) {
-      const S = m ? se(p.value, m) : null, v = S ? d.value.find((Dt) => Dt.slug === S.node.type) ?? null : null, $ = m === null ? l.allow : D?.props?.allow ?? null, Oe = m === null ? l.max : D?.props?.max ?? null, at = m === null ? p.value : S && L ? S.node.values[L] ?? [] : [];
-      if (Oe != null && at.length >= Oe) return;
-      const Ke = await he({
-        catalog: d.value,
-        parent: v,
-        allow: $,
-        tree: p.value,
-        groups: _e.value,
+    async function Te(y, E, U) {
+      const Y = y ? ie(d.value, y) : null, ee = Y ? v.value.find((Rt) => Rt.slug === Y.node.type) ?? null : null, L = y === null ? l.allow : U?.props?.allow ?? null, g = y === null ? l.max : U?.props?.max ?? null, _ = y === null ? d.value : Y && E ? Y.node.values[E] ?? [] : [];
+      if (g != null && _.length >= g) return;
+      const Re = await ge({
+        catalog: v.value,
+        parent: ee,
+        allow: L,
+        tree: d.value,
+        groups: $e.value,
         blocksPath: l.blocksPath
       });
-      if (!Ke) return;
-      const ot = $l(Ke.slug, be(Ke));
-      Q(mt(p.value, m, L, at.length, ot)), b.value = ot.key;
+      if (!Re) return;
+      const st = Bl(Re.slug, ke(Re));
+      X(ht(d.value, y, E, _.length, st)), b.value = st.key;
     }
-    function be(m) {
-      const L = m.content?.sample ?? {}, D = {};
-      for (const [S, v] of Object.entries(L))
-        (!Array.isArray(v) || v.length === 0 || typeof v[0] != "object") && (D[S] = v);
-      return D;
+    function ke(y) {
+      const E = y.content?.sample ?? {}, U = {};
+      for (const [Y, ee] of Object.entries(E))
+        (!Array.isArray(ee) || ee.length === 0 || typeof ee[0] != "object") && (U[Y] = ee);
+      return U;
     }
-    async function de(m) {
-      const L = se(p.value, m);
-      if (!L) return;
-      const D = Sl(L.node);
-      await Fe({
+    async function fe(y) {
+      const E = ie(d.value, y);
+      if (!E) return;
+      const U = Wl(E.node);
+      await Je({
         title: s("field.remove-title", {
-          title: d.value.find((v) => v.slug === L.node.type)?.title ?? L.node.type
+          title: v.value.find((ee) => ee.slug === E.node.type)?.title ?? E.node.type
         }),
-        message: D > 0 ? s("field.remove-text", { count: D }) : s("field.remove-alone"),
+        message: U > 0 ? s("field.remove-text", { count: U }) : s("field.remove-alone"),
         confirmText: s("field.remove"),
         cancelText: s("page.cancel"),
         tone: "danger"
-      }) && (b.value === m && (b.value = null), Q(Bl(p.value, m)));
+      }) && (b.value === y && (b.value = null), X(zl(d.value, y)));
     }
-    function U(m) {
-      const L = se(p.value, m);
-      if (!L) return;
-      const D = It(L.node);
-      Q(mt(p.value, L.parent?.key ?? null, L.field, L.index + 1, D)), b.value = D.key;
+    function A(y) {
+      const E = ie(d.value, y);
+      if (!E) return;
+      const U = Pt(E.node);
+      X(ht(d.value, E.parent?.key ?? null, E.field, E.index + 1, U)), b.value = U.key;
     }
-    function M(m, L) {
-      Q(Vl(p.value, m, L));
+    function D(y, E) {
+      X(Ll(d.value, y, E));
     }
-    function R(m, L, D) {
-      Q(Wl(p.value, m, L, D));
+    function H(y, E, U) {
+      X(Nl(d.value, y, E, U));
     }
-    function G(m) {
-      b.value = b.value === m ? null : m;
+    function G(y) {
+      b.value = b.value === y ? null : y;
     }
-    function ce(m) {
-      m === null || !se(p.value, m) || (b.value = m, C.value && (P.value = !0));
+    function ve(y) {
+      y === null || !ie(d.value, y) || (b.value = y, C.value && (M.value = !0));
     }
-    function pe() {
+    function me() {
       b.value = null;
     }
-    function oe(m) {
-      b.value && Q(El(p.value, b.value, m));
+    function se(y) {
+      b.value && X(Il(d.value, b.value, y));
     }
-    let ge;
-    fe(
-      () => f.value?.node.values,
-      (m, L) => {
-        if (!m || !L || !k.value || !h || !w) return;
-        const D = b.value, S = k.value.id;
-        clearTimeout(ge), ge = setTimeout(() => {
-          !D || !h || h.render(S, { values: m, key: D }).then((v) => {
-            H.value?.replace(D, v.html) || H.value?.refresh();
+    let ye;
+    ce(
+      () => m.value?.node.values,
+      (y, E) => {
+        if (!y || !E || !h.value || !f || !k) return;
+        const U = b.value, Y = h.value.id;
+        clearTimeout(ye), ye = setTimeout(() => {
+          !U || !f || f.render(Y, { values: y, key: U }).then((ee) => {
+            R.value?.replace(U, ee.html) || R.value?.refresh();
           }).catch(() => {
           });
         }, 300);
       },
       { deep: !0 }
     );
-    function Te(m) {
-      m.key === "Escape" && b.value && pe();
+    function Ce(y) {
+      y.key === "Escape" && b.value && me();
     }
-    Ue(async () => {
-      if (window.addEventListener("keydown", Te), l.catalog === null && a) {
-        h = We(a);
+    Pe(async () => {
+      if (window.addEventListener("keydown", Ce), l.catalog === null && a) {
+        f = Le(a);
         try {
-          I.value = await h.catalog();
-        } catch (m) {
-          J.danger(r(m));
+          z.value = await f.catalog();
+        } catch (y) {
+          q.danger(r(y));
         }
-      } else a && (h = We(a));
-    }), Xe(() => {
-      clearTimeout(ge), window.removeEventListener("keydown", Te);
+      } else a && (f = Le(a));
+    }), tt(() => {
+      clearTimeout(ye), window.removeEventListener("keydown", Ce);
     });
-    const ye = T(
-      () => k.value?.content ? lt(k.value.content.schema) : []
+    const Ve = S(
+      () => h.value?.content ? at(h.value.content.schema) : []
     );
-    return (m, L) => e(n) ? (i(), x("div", Cn, [
+    return (y, E) => e(n) ? (i(), $("div", Ln, [
       u(e(F), {
         size: "sm",
         tone: "muted"
       }, {
         default: c(() => [
-          E(y(e(s)("field.nested-note")), 1)
+          W(w(e(s)("field.nested-note")), 1)
         ]),
         _: 1
       })
-    ])) : (i(), x("div", {
+    ])) : (i(), $("div", {
       key: 1,
       ref_key: "host",
-      ref: K,
-      class: Be(["wx-blocks-host", { "is-compact": C.value }])
+      ref: J,
+      class: xe(["wx-blocks-host", { "is-compact": C.value }])
     }, [
-      W("div", {
-        class: Be(["wx-blocks", {
-          "is-editing": f.value !== null,
-          "has-preview": e(w) !== null && e(w).url.value !== null
+      B("div", {
+        class: xe(["wx-blocks", {
+          "is-editing": m.value !== null,
+          "has-preview": e(k) !== null && e(k).url.value !== null
         }])
       }, [
-        (i(), A(Ft(C.value ? e(il) : "div"), qt(q.value, { class: "wx-blocks__side" }), {
+        (i(), I(Kt(C.value ? e(pl) : "div"), Zt(Z.value, { class: "wx-blocks__side" }), {
           default: c(() => [
-            f.value ? z("", !0) : (i(), x("div", Bn, [
-              W("div", En, [
-                W("span", Wn, y(e(s)("field.blocks")), 1),
+            m.value ? N("", !0) : (i(), $("div", An, [
+              B("div", zn, [
+                B("span", In, w(e(s)("field.blocks")), 1),
                 u(e(F), {
                   size: "sm",
                   tone: "muted"
                 }, {
                   default: c(() => [
-                    E(y(p.value.length), 1)
+                    W(w(d.value.length), 1)
                   ]),
                   _: 1
                 })
               ]),
-              u(Vn, {
-                nodes: p.value,
-                catalog: d.value,
+              u(Wn, {
+                nodes: d.value,
+                catalog: v.value,
                 selected: b.value,
                 disabled: t.disabled,
                 onSelect: G,
-                onAdd: $e,
-                onRemove: de,
-                onDuplicate: U,
-                onVisibility: M,
-                onReorder: R
+                onAdd: Te,
+                onRemove: fe,
+                onDuplicate: A,
+                onVisibility: D,
+                onReorder: H
               }, null, 8, ["nodes", "catalog", "selected", "disabled"]),
-              W("div", Ln, [
-                !t.disabled && (t.max === null || p.value.length < t.max) ? (i(), A(e(ie), {
+              B("div", Nn, [
+                !t.disabled && (t.max === null || d.value.length < t.max) ? (i(), I(e(ue), {
                   key: 0,
                   variant: "outline",
                   icon: "plus",
                   class: "wx-blocks__add",
-                  onClick: L[0] || (L[0] = (D) => $e(null, null, null))
+                  onClick: E[0] || (E[0] = (U) => Te(null, null, null))
                 }, {
                   default: c(() => [
-                    E(y(e(s)("field.add")), 1)
+                    W(w(e(s)("field.add")), 1)
                   ]),
                   _: 1
-                })) : z("", !0),
-                !C.value && e(w) && e(w).url.value ? (i(), A(e(ie), {
+                })) : N("", !0),
+                !C.value && e(k) && e(k).url.value ? (i(), I(e(ue), {
                   key: 1,
                   variant: "outline",
                   icon: "eye",
                   class: "wx-blocks__preview-button",
-                  onClick: L[1] || (L[1] = (D) => H.value?.open())
+                  onClick: E[1] || (E[1] = (U) => R.value?.open())
                 }, {
                   default: c(() => [
-                    E(y(e(s)("field.preview")), 1)
+                    W(w(e(s)("field.preview")), 1)
                   ]),
                   _: 1
-                })) : z("", !0)
+                })) : N("", !0)
               ])
             ])),
-            f.value ? (i(), x("div", An, [
-              W("div", zn, [
-                W("span", Un, [
-                  g.value.length ? (i(), x("span", In, [
-                    (i(!0), x(j, null, ee(g.value, (D) => (i(), x(j, {
-                      key: D.key
+            m.value ? (i(), $("div", Pn, [
+              B("div", Un, [
+                B("span", Mn, [
+                  p.value.length ? (i(), $("span", Dn, [
+                    (i(!0), $(j, null, Q(p.value, (U) => (i(), $(j, {
+                      key: U.key
                     }, [
-                      W("button", {
+                      B("button", {
                         type: "button",
                         class: "wx-blocks__trail-step",
-                        onClick: (S) => G(D.key)
-                      }, y(D.title), 9, Nn),
-                      u(e(ve), { name: "chevron-right" })
+                        onClick: (Y) => G(U.key)
+                      }, w(U.title), 9, On),
+                      u(e(he), { name: "chevron-right" })
                     ], 64))), 128))
-                  ])) : z("", !0),
-                  W("span", Pn, y(k.value?.title ?? f.value.node.type), 1)
+                  ])) : N("", !0),
+                  B("span", Rn, w(h.value?.title ?? m.value.node.type), 1)
                 ]),
-                W("span", Mn, [
-                  C.value ? z("", !0) : (i(), x("code", On, y(f.value.node.type), 1)),
-                  u(e(Ae), {
+                B("span", Hn, [
+                  C.value ? N("", !0) : (i(), $("code", jn, w(m.value.node.type), 1)),
+                  u(e(ze), {
                     size: "sm",
                     tone: "neutral",
                     icon: "chevron-up",
                     title: e(s)("field.previous"),
-                    disabled: _.value.previous === null,
-                    onClick: L[2] || (L[2] = (D) => _.value.previous && G(_.value.previous))
+                    disabled: x.value.previous === null,
+                    onClick: E[2] || (E[2] = (U) => x.value.previous && G(x.value.previous))
                   }, null, 8, ["title", "disabled"]),
-                  u(e(Ae), {
+                  u(e(ze), {
                     size: "sm",
                     tone: "neutral",
                     icon: "chevron-down",
                     title: e(s)("field.next"),
-                    disabled: _.value.next === null,
-                    onClick: L[3] || (L[3] = (D) => _.value.next && G(_.value.next))
+                    disabled: x.value.next === null,
+                    onClick: E[3] || (E[3] = (U) => x.value.next && G(x.value.next))
                   }, null, 8, ["title", "disabled"]),
-                  !C.value && e(w) && e(w).url.value ? (i(), A(e(ie), {
+                  !C.value && e(k) && e(k).url.value ? (i(), I(e(ue), {
                     key: 1,
                     size: "sm",
                     variant: "outline",
                     icon: "eye",
                     class: "wx-blocks__preview-button",
                     "aria-label": e(s)("field.preview"),
-                    onClick: L[4] || (L[4] = (D) => H.value?.open())
-                  }, null, 8, ["aria-label"])) : z("", !0),
-                  u(e(ie), {
+                    onClick: E[4] || (E[4] = (U) => R.value?.open())
+                  }, null, 8, ["aria-label"])) : N("", !0),
+                  u(e(ue), {
                     size: "sm",
                     variant: "outline",
-                    onClick: pe
+                    onClick: me
                   }, {
                     default: c(() => [
-                      E(y(C.value ? e(s)("field.done") : `${e(s)("field.done")} · Esc`), 1)
+                      W(w(C.value ? e(s)("field.done") : `${e(s)("field.done")} · Esc`), 1)
                     ]),
                     _: 1
                   })
                 ])
               ]),
-              W("div", Dn, [
-                k.value?.content ? (i(), A(e(Et), {
-                  key: f.value.node.key,
-                  "model-value": f.value.node.values,
-                  root: ye.value,
-                  types: ae.value,
-                  translate: ke.value,
-                  can: xe.value,
+              B("div", Fn, [
+                h.value?.content ? (i(), I(e(Wt), {
+                  key: m.value.node.key,
+                  "model-value": m.value.node.values,
+                  root: Ve.value,
+                  types: oe.value,
+                  translate: we.value,
+                  can: Se.value,
                   disabled: t.disabled,
-                  "onUpdate:modelValue": oe
-                }, null, 8, ["model-value", "root", "types", "translate", "can", "disabled"])) : (i(), A(e(F), {
+                  "onUpdate:modelValue": se
+                }, null, 8, ["model-value", "root", "types", "translate", "can", "disabled"])) : (i(), I(e(F), {
                   key: 1,
                   size: "sm",
                   tone: "danger"
                 }, {
                   default: c(() => [
-                    E(y(e(s)("field.unknown-type", { type: f.value.node.type })), 1)
+                    W(w(e(s)("field.unknown-type", { type: m.value.node.type })), 1)
                   ]),
                   _: 1
                 }))
               ])
-            ])) : z("", !0)
+            ])) : N("", !0)
           ]),
           _: 1
         }, 16)),
-        e(w) && e(w).url.value ? (i(), x("div", Rn, [
-          u(hn, {
+        e(k) && e(k).url.value ? (i(), $("div", qn, [
+          u(yn, {
             ref_key: "previewEl",
-            ref: H,
-            url: e(w).url.value,
+            ref: R,
+            url: e(k).url.value,
             selected: b.value,
-            reload: e(w).reload?.value ?? 0,
+            reload: e(k).reload?.value ?? 0,
             compact: C.value,
-            onSelect: ce,
-            onEdit: L[5] || (L[5] = (D) => P.value = !0)
+            onSelect: ve,
+            onEdit: E[5] || (E[5] = (U) => M.value = !0)
           }, null, 8, ["url", "selected", "reload", "compact"])
-        ])) : z("", !0)
+        ])) : N("", !0)
       ], 2)
     ], 2));
   }
-}), jn = /* @__PURE__ */ le(Hn, [["__scopeId", "data-v-613ad857"]]), Fn = { class: "wx-block-card__body" }, qn = { class: "wx-block-card__title" }, Jn = { class: "wx-block-card__chips" }, Kn = /* @__PURE__ */ te({
+}), Kn = /* @__PURE__ */ ne(Jn, [["__scopeId", "data-v-613ad857"]]), Zn = { class: "wx-block-card__body" }, Gn = { class: "wx-block-card__title" }, Yn = { class: "wx-block-card__chips" }, Qn = /* @__PURE__ */ le({
   __name: "BlockCard",
   props: {
     block: {}
   },
   emits: ["open"],
   setup(t, { emit: l }) {
-    const o = l, n = re("webx-blocks");
-    return (s, r) => (i(), x("button", {
+    const o = l, n = de("webx-blocks");
+    return (s, r) => (i(), $("button", {
       type: "button",
       class: "wx-block-card",
       onClick: r[0] || (r[0] = (a) => o("open", t.block))
@@ -2456,54 +2492,54 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
         thumbnail: t.block.thumbnail,
         height: 120
       }, null, 8, ["thumbnail"]),
-      W("div", Fn, [
-        W("div", qn, y(t.block.title), 1),
+      B("div", Zn, [
+        B("div", Gn, w(t.block.title), 1),
         u(e(F), {
           size: "sm",
           tone: "muted"
         }, {
           default: c(() => [
-            W("code", null, y(t.block.slug), 1),
-            E(" · " + y(t.block.usage_count > 0 ? e(n)("page.on-pages", { count: t.block.usage_count }) : e(n)("page.not-used")), 1)
+            B("code", null, w(t.block.slug), 1),
+            W(" · " + w(e(et)(t.block.usage_count, e(n))), 1)
           ]),
           _: 1
         }),
-        W("div", Jn, [
-          t.block.draft ? (i(), A(e(Y), {
+        B("div", Yn, [
+          t.block.draft ? (i(), I(e(re), {
             key: 0,
             type: "warning",
             dot: ""
           }, {
             default: c(() => [
-              E(y(e(n)("page.draft", { number: t.block.draft.number })), 1)
+              W(w(e(n)("page.draft", { number: t.block.draft.number })), 1)
             ]),
             _: 1
-          })) : z("", !0),
-          t.block.published ? (i(), A(e(Y), {
+          })) : N("", !0),
+          t.block.published ? (i(), I(e(re), {
             key: 1,
             type: "success",
             dot: ""
           }, {
             default: c(() => [
-              E(y(e(n)("page.live", { number: t.block.published.number })), 1)
+              W(w(e(n)("page.live", { number: t.block.published.number })), 1)
             ]),
             _: 1
-          })) : (i(), A(e(Y), {
+          })) : (i(), I(e(re), {
             key: 2,
             type: "default"
           }, {
             default: c(() => [
-              E(y(e(n)("page.never-published")), 1)
+              W(w(e(n)("page.never-published")), 1)
             ]),
             _: 1
           })),
-          t.block.is_enabled ? z("", !0) : (i(), A(e(Y), {
+          t.block.is_enabled ? N("", !0) : (i(), I(e(re), {
             key: 3,
             type: "default",
             variant: "outline"
           }, {
             default: c(() => [
-              E(y(e(n)("page.hidden")), 1)
+              W(w(e(n)("page.hidden")), 1)
             ]),
             _: 1
           }))
@@ -2511,62 +2547,62 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
       ])
     ]));
   }
-}), Zn = /* @__PURE__ */ le(Kn, [["__scopeId", "data-v-daa12de4"]]), Gn = { class: "wx-block-create" }, Yn = /* @__PURE__ */ te({
+}), Xn = /* @__PURE__ */ ne(Qn, [["__scopeId", "data-v-3d94f339"]]), ea = { class: "wx-block-create" }, ta = /* @__PURE__ */ le({
   __name: "BlockCreateDialog",
   setup(t) {
-    const { resolve: l, dismiss: o, open: n } = St(), s = Ie(), r = We(s);
-    Me();
-    const a = re("webx-blocks"), h = Ne(), I = T(() => s.state.manifest?.modules.find((w) => w.id === "blocks")?.meta?.groups ?? ["content"]), d = N({ title: "", slug: "", group: I.value[0] ?? "content" }), p = N({}), b = N(!1), f = N(!1), k = T(
-      () => I.value.map((g) => ({ value: g, label: Le(g, a) }))
+    const { resolve: l, dismiss: o, open: n } = Ct(), s = Ue(), r = Le(s);
+    Oe();
+    const a = de("webx-blocks"), f = Me(), z = S(() => s.state.manifest?.modules.find((k) => k.id === "blocks")?.meta?.groups ?? ["content"]), v = P({ title: "", slug: "", group: z.value[0] ?? "content" }), d = P({}), b = P(!1), m = P(!1), h = S(
+      () => z.value.map((p) => ({ value: p, label: Ae(p, a) }))
     );
-    function B(g) {
-      return g.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^[^a-z]+/, "").slice(0, 64);
+    function T(p) {
+      return p.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^[^a-z]+/, "").slice(0, 64);
     }
-    fe(
-      () => d.value.title,
-      (g) => {
-        f.value || (d.value.slug = B(g));
+    ce(
+      () => v.value.title,
+      (p) => {
+        m.value || (v.value.slug = T(p));
       }
     );
-    function V(g) {
-      return p.value[g]?.[0];
+    function V(p) {
+      return d.value[p]?.[0];
     }
-    async function _() {
-      b.value = !0, p.value = {};
+    async function x() {
+      b.value = !0, d.value = {};
       try {
-        l(await r.create(d.value));
-      } catch (g) {
-        const w = g.body;
-        w?.errors ? p.value = w.errors : J.danger(h(g, a("page.failed")));
+        l(await r.create(v.value));
+      } catch (p) {
+        const k = p.body;
+        k?.errors ? d.value = k.errors : q.danger(f(p, a("page.failed")));
       } finally {
         b.value = !1;
       }
     }
-    return (g, w) => (i(), A(e(Vt), {
+    return (p, k) => (i(), I(e(Vt), {
       open: e(n),
-      "onUpdate:open": w[5] || (w[5] = (H) => yt(n) ? n.value = H : null),
+      "onUpdate:open": k[5] || (k[5] = (R) => wt(n) ? n.value = R : null),
       title: e(a)("page.new"),
       width: 520
     }, {
       footer: c(() => [
-        u(e(rl), { size: "sm" }, {
+        u(e(vl), { size: "sm" }, {
           default: c(() => [
-            u(e(ie), {
+            u(e(ue), {
               variant: "outline",
-              onClick: w[4] || (w[4] = (H) => e(o)())
+              onClick: k[4] || (k[4] = (R) => e(o)())
             }, {
               default: c(() => [
-                E(y(e(a)("page.cancel")), 1)
+                W(w(e(a)("page.cancel")), 1)
               ]),
               _: 1
             }),
-            u(e(ie), {
+            u(e(ue), {
               type: "primary",
               loading: b.value,
-              onClick: _
+              onClick: x
             }, {
               default: c(() => [
-                E(y(e(a)("page.create")), 1)
+                W(w(e(a)("page.create")), 1)
               ]),
               _: 1
             }, 8, ["loading"])
@@ -2575,45 +2611,45 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
         })
       ]),
       default: c(() => [
-        W("div", Gn, [
-          u(e(X), {
+        B("div", ea, [
+          u(e(te), {
             label: e(a)("page.title"),
             error: V("title")
           }, {
             default: c(() => [
-              u(e(Ee), {
-                modelValue: d.value.title,
-                "onUpdate:modelValue": w[0] || (w[0] = (H) => d.value.title = H),
+              u(e(Ne), {
+                modelValue: v.value.title,
+                "onUpdate:modelValue": k[0] || (k[0] = (R) => v.value.title = R),
                 autofocus: ""
               }, null, 8, ["modelValue"])
             ]),
             _: 1
           }, 8, ["label", "error"]),
-          u(e(X), {
+          u(e(te), {
             label: e(a)("page.identifier"),
             help: e(a)("page.identifier-help"),
             error: V("slug")
           }, {
             default: c(() => [
-              u(e(Ee), {
-                modelValue: d.value.slug,
-                "onUpdate:modelValue": w[1] || (w[1] = (H) => d.value.slug = H),
+              u(e(Ne), {
+                modelValue: v.value.slug,
+                "onUpdate:modelValue": k[1] || (k[1] = (R) => v.value.slug = R),
                 placeholder: "hero",
-                onInput: w[2] || (w[2] = (H) => f.value = !0)
+                onInput: k[2] || (k[2] = (R) => m.value = !0)
               }, null, 8, ["modelValue"])
             ]),
             _: 1
           }, 8, ["label", "help", "error"]),
-          u(e(X), {
+          u(e(te), {
             label: e(a)("page.group"),
             help: e(a)("page.group-help"),
             error: V("group")
           }, {
             default: c(() => [
               u(e(Tt), {
-                modelValue: d.value.group,
-                "onUpdate:modelValue": w[3] || (w[3] = (H) => d.value.group = H),
-                options: k.value
+                modelValue: v.value.group,
+                "onUpdate:modelValue": k[3] || (k[3] = (R) => v.value.group = R),
+                options: h.value
               }, null, 8, ["modelValue", "options"])
             ]),
             _: 1
@@ -2623,121 +2659,121 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
       _: 1
     }, 8, ["open", "title"]));
   }
-}), Qn = /* @__PURE__ */ le(Yn, [["__scopeId", "data-v-a4c0d44c"]]), Xn = {
+}), la = /* @__PURE__ */ ne(ta, [["__scopeId", "data-v-a4c0d44c"]]), na = {
   key: 1,
   class: "wx-blocks-page__toolbar"
-}, ea = { class: "wx-blocks-page__cards" }, ta = { class: "wx-blocks-page__ghost-body" }, la = {
+}, aa = { class: "wx-blocks-page__cards" }, oa = { class: "wx-blocks-page__ghost-body" }, sa = {
   key: 0,
   class: "wx-blocks-page__group-title"
-}, na = { class: "wx-blocks-page__cards" }, aa = /* @__PURE__ */ te({
+}, ia = { class: "wx-blocks-page__cards" }, ra = /* @__PURE__ */ le({
   __name: "BlocksPage",
   props: {
     base: { default: "/blocks" }
   },
   setup(t) {
-    const l = t, o = Ie(), n = We(o), s = _t();
-    Me();
-    const r = re("webx-blocks"), a = Ne(), h = N([]), I = N(!0), d = N(""), p = N(""), b = Bt(Qn), f = T(() => {
-      const C = o.state.manifest?.modules.find((P) => P.id === "blocks")?.meta;
+    const l = t, o = Ue(), n = Le(o), s = xt();
+    Oe();
+    const r = de("webx-blocks"), a = Me(), f = P([]), z = P(!0), v = P(""), d = P(""), b = Et(la), m = S(() => {
+      const C = o.state.manifest?.modules.find((M) => M.id === "blocks")?.meta;
       return {
         groups: C?.groups ?? [],
         editing: C?.editing ?? !0,
         provides: C?.provides ?? []
       };
-    }), k = T(() => o.can("blocks.manage") && f.value.editing), B = T(
+    }), h = S(() => o.can("blocks.manage") && m.value.editing), T = S(
       () => o.state.manifest?.modules.find((C) => C.id === "blocks")?.title ?? r("module.title")
-    ), V = T(() => {
-      const C = d.value.trim().toLowerCase(), P = p.value === "" ? h.value : h.value.filter((O) => O.group === p.value);
-      return C === "" ? P : P.filter(
+    ), V = S(() => {
+      const C = v.value.trim().toLowerCase(), M = d.value === "" ? f.value : f.value.filter((O) => O.group === d.value);
+      return C === "" ? M : M.filter(
         (O) => O.title.toLowerCase().includes(C) || O.slug.includes(C) || (O.description ?? "").toLowerCase().includes(C)
       );
-    }), _ = T(() => {
-      const C = [...f.value.groups];
-      for (const P of h.value)
-        C.includes(P.group) || C.push(P.group);
-      return C.filter((P) => h.value.some((O) => O.group === P));
-    }), g = T(
-      () => _.value.length < 2 ? [] : [
+    }), x = S(() => {
+      const C = [...m.value.groups];
+      for (const M of f.value)
+        C.includes(M.group) || C.push(M.group);
+      return C.filter((M) => f.value.some((O) => O.group === M));
+    }), p = S(
+      () => x.value.length < 2 ? [] : [
         { value: "", label: r("page.all-groups") },
-        ..._.value.map((C) => ({ value: C, label: Le(C, r) }))
+        ...x.value.map((C) => ({ value: C, label: Ae(C, r) }))
       ]
-    ), w = T(() => {
-      const C = _.value.map((O) => ({
+    ), k = S(() => {
+      const C = x.value.map((O) => ({
         id: O,
-        label: Le(O, r),
-        blocks: V.value.filter((q) => q.group === O)
+        label: Ae(O, r),
+        blocks: V.value.filter((Z) => Z.group === O)
       })).filter((O) => O.blocks.length > 0);
-      return p.value !== "" || V.value.length <= 5 || d.value.trim() !== "" || C.length < 2 ? [{ id: "", label: "", blocks: V.value }] : C;
+      return d.value !== "" || V.value.length <= 5 || v.value.trim() !== "" || C.length < 2 ? [{ id: "", label: "", blocks: V.value }] : C;
     });
-    async function H() {
-      I.value = !0;
+    async function R() {
+      z.value = !0;
       try {
-        h.value = await n.list();
+        f.value = await n.list();
       } catch (C) {
-        J.danger(a(C));
+        q.danger(a(C));
       } finally {
-        I.value = !1;
+        z.value = !1;
       }
     }
-    function K(C) {
+    function J(C) {
       s.push(`${l.base}/${C.id}`);
     }
-    async function Z() {
+    async function K() {
       const C = await b({});
-      C && K(C);
+      C && J(C);
     }
-    Ue(H);
-    const ne = T(
-      () => k.value ? [{ key: "new", label: r("page.new"), icon: "plus", primary: !0, run: () => {
-        Z();
+    Pe(R);
+    const ae = S(
+      () => h.value ? [{ key: "new", label: r("page.new"), icon: "plus", primary: !0, run: () => {
+        K();
       } }] : []
     );
-    return (C, P) => (i(), A(e(tl), {
-      view: p.value,
-      "onUpdate:view": P[1] || (P[1] = (O) => p.value = O),
+    return (C, M) => (i(), I(e(al), {
+      view: d.value,
+      "onUpdate:view": M[1] || (M[1] = (O) => d.value = O),
       class: "wx-blocks-page",
-      title: B.value,
-      views: g.value,
-      actions: ne.value
+      title: T.value,
+      views: p.value,
+      actions: ae.value
     }, {
       default: c(() => [
-        f.value.editing ? z("", !0) : (i(), A(e($t), {
+        m.value.editing ? N("", !0) : (i(), I(e(St), {
           key: 0,
           type: "info",
           variant: "soft",
           description: e(r)("page.editing-off")
         }, null, 8, ["description"])),
-        I.value || h.value.length > 0 ? (i(), x("div", Xn, [
-          u(e(Ee), {
-            modelValue: d.value,
-            "onUpdate:modelValue": P[0] || (P[0] = (O) => d.value = O),
+        z.value || f.value.length > 0 ? (i(), $("div", na, [
+          u(e(Ne), {
+            modelValue: v.value,
+            "onUpdate:modelValue": M[0] || (M[0] = (O) => v.value = O),
             class: "wx-blocks-page__search",
             placeholder: e(r)("page.search"),
             clearable: ""
           }, null, 8, ["modelValue", "placeholder"])
-        ])) : z("", !0),
-        I.value ? (i(), A(e(Ce), { key: 2 }, {
+        ])) : N("", !0),
+        z.value ? (i(), I(e(We), { key: 2 }, {
           template: c(() => [
-            W("div", ea, [
-              (i(), x(j, null, ee(4, (O) => W("div", {
+            B("div", aa, [
+              (i(), $(j, null, Q(4, (O) => B("div", {
                 key: O,
                 class: "wx-blocks-page__ghost"
               }, [
-                u(e(Re), {
+                u(e(je), {
                   variant: "image",
                   height: 120,
                   class: "wx-blocks-page__ghost-thumb"
                 }),
-                W("div", ta, [
-                  u(e(Re), {
+                B("div", oa, [
+                  u(e(je), {
                     variant: "title",
                     width: "45%"
                   }),
-                  u(e(Re), {
+                  u(e(je), {
                     variant: "text",
                     width: "70%"
                   }),
-                  u(e(Re), {
+                  u(e(je), {
                     variant: "button",
                     width: "64px",
                     height: "22px"
@@ -2747,21 +2783,21 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
             ])
           ]),
           _: 1
-        })) : h.value.length === 0 ? (i(), A(e(Ct), {
+        })) : f.value.length === 0 ? (i(), I(e(Bt), {
           key: 3,
           icon: "grid",
           title: e(r)("page.empty"),
           description: e(r)("page.empty-help")
-        }, null, 8, ["title", "description"])) : (i(!0), x(j, { key: 4 }, ee(w.value, (O) => (i(), x("section", {
+        }, null, 8, ["title", "description"])) : (i(!0), $(j, { key: 4 }, Q(k.value, (O) => (i(), $("section", {
           key: O.id,
           class: "wx-blocks-page__group"
         }, [
-          O.label ? (i(), x("div", la, y(O.label), 1)) : z("", !0),
-          W("div", na, [
-            (i(!0), x(j, null, ee(O.blocks, (q) => (i(), A(Zn, {
-              key: q.id,
-              block: q,
-              onOpen: K
+          O.label ? (i(), $("div", sa, w(O.label), 1)) : N("", !0),
+          B("div", ia, [
+            (i(!0), $(j, null, Q(O.blocks, (Z) => (i(), I(Xn, {
+              key: Z.id,
+              block: Z,
+              onOpen: J
             }, null, 8, ["block"]))), 128))
           ])
         ]))), 128))
@@ -2769,18 +2805,18 @@ const gt = /* @__PURE__ */ Symbol("wx-blocks-root"), Cn = {
       _: 1
     }, 8, ["view", "title", "views", "actions"]));
   }
-}), oa = /* @__PURE__ */ le(aa, [["__scopeId", "data-v-553b680f"]]);
-function fa(t = {}) {
+}), ua = /* @__PURE__ */ ne(ra, [["__scopeId", "data-v-553b680f"]]);
+function ga(t = {}) {
   const l = t.path ?? "/blocks";
   return {
     id: "blocks",
     path: l,
     routes: [
-      { path: l, name: "webx.blocks", component: oa, props: { base: l } },
+      { path: l, name: "webx.blocks", component: ua, props: { base: l } },
       {
         path: `${l}/:id(\\d+)`,
         name: "webx.blocks.edit",
-        component: en,
+        component: an,
         props: { base: l }
       }
     ],
@@ -2789,7 +2825,7 @@ function fa(t = {}) {
     // draws its children through the renderer; it needs the node for `props.allow` alone.
     types: {
       "wx-blocks": {
-        component: jn,
+        component: Kn,
         kind: "field",
         nested: !0,
         wide: !0,
@@ -2799,37 +2835,37 @@ function fa(t = {}) {
   };
 }
 export {
-  en as WxBlockEditorPage,
-  pn as WxBlockPicker,
-  xl as WxBlockStage,
+  an as WxBlockEditorPage,
+  hn as WxBlockPicker,
+  Vl as WxBlockStage,
   Ot as WxBlockThumb,
-  jn as WxBlocks,
-  oa as WxBlocksPage,
-  fa as blocks,
-  Ll as blocksMessages,
-  nt as blocksPreviewKey,
-  It as cloneNode,
-  Tl as countType,
-  We as createBlocksApi,
-  Wt as findRange,
-  lt as formSchema,
-  Ye as highlightBlock,
-  mt as insertNode,
-  At as isNode,
-  Je as isNodeList,
-  zl as lintBlock,
-  se as locate,
-  $l as makeNode,
-  Qe as newKey,
-  pa as provideBlocksPreview,
-  Bl as removeNode,
-  bl as replaceBlock,
-  Wl as replaceList,
-  Lt as stageDocument,
-  da as typesIn,
-  Ul as undeclared,
-  El as updateValues,
-  va as useBlocksPreview,
-  Pe as walk
+  Kn as WxBlocks,
+  ua as WxBlocksPage,
+  ga as blocks,
+  Pl as blocksMessages,
+  ot as blocksPreviewKey,
+  Pt as cloneNode,
+  El as countType,
+  Le as createBlocksApi,
+  Lt as findRange,
+  at as formSchema,
+  Qe as highlightBlock,
+  ht as insertNode,
+  zt as isNode,
+  Ze as isNodeList,
+  Ml as lintBlock,
+  ie as locate,
+  Bl as makeNode,
+  Xe as newKey,
+  ha as provideBlocksPreview,
+  zl as removeNode,
+  _l as replaceBlock,
+  Nl as replaceList,
+  At as stageDocument,
+  ma as typesIn,
+  Dl as undeclared,
+  Il as updateValues,
+  ba as useBlocksPreview,
+  De as walk
 };
 //# sourceMappingURL=index.js.map