@backmatter/studio 0.0.9 → 0.0.11

package/dist/chunks/{UiKitApp-b8qFsmA-.js → UiKitApp-Cu0CS1NU.js}

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as t, Fragment as U } from "react/jsx-runtime";
-import { K as v, P as ue, Q as Zt, p as Rt, U as Qt, f as at, V as Fe, W as Jt, X as en, Y as tn, Z as nn, _ as rn, z as on, k as an, $ as sn, a0 as ln, a1 as cn, a2 as He, a3 as me, a4 as Ne, a5 as st, a6 as dn, a7 as un, T as hn, a8 as pn, a9 as gn, aa as mn, ab as fn, ac as bn, ad as xn, y as $n, ae as vn, N as kn, af as wn } from "./WorkspaceRoutes-BKKEkAq7.js";
+import { K as $, P as ue, Q as Zt, p as Rt, U as Qt, f as at, V as Fe, W as Jt, X as en, Y as tn, Z as nn, _ as rn, z as on, k as an, $ as sn, a0 as ln, a1 as cn, a2 as He, a3 as me, a4 as Ne, a5 as st, a6 as dn, a7 as un, T as hn, a8 as pn, a9 as gn, aa as mn, ab as fn, ac as bn, ad as xn, y as vn, ae as $n, N as kn, af as wn } from "./WorkspaceRoutes-Dzpaj8ov.js";
 import { useRef as k, useState as f, useLayoutEffect as te, useCallback as Ke, useEffect as z, useMemo as yn, useId as Ue } from "react";
 import { createPortal as Me } from "react-dom";
-import { L as Nn, a as lt } from "./dashboard-BNUcbYU0.js";
+import { L as Nn, a as lt } from "./dashboard-kWmpeuAP.js";
 function O({
   title: n,
   lede: r,
@@ -10,8 +10,8 @@ function O({
 }) {
   return /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf x14n5cft x1kozois", children: [
     /* @__PURE__ */ s("header", { className: "x78zum5 xdt5ytf x1ndbd79 xiky8lt", children: [
-      /* @__PURE__ */ t(v, { as: "h1", size: "display", weight: "semibold", children: n }),
-      /* @__PURE__ */ t(v, { tone: "muted", size: "sm", children: r })
+      /* @__PURE__ */ t($, { as: "h1", size: "display", weight: "semibold", children: n }),
+      /* @__PURE__ */ t($, { tone: "muted", size: "sm", children: r })
     ] }),
     /* @__PURE__ */ t("div", { className: "x78zum5 xdt5ytf x14n5cft", children: o })
   ] });
@@ -35,7 +35,7 @@ function b({
     /* @__PURE__ */ t("div", { className: "x78zum5 xdt5ytf x1qjc9v5 x3smv4v xh8yej3 xeuugli", children: r })
   ] });
 }
-const T = [
+const P = [
   {
     slug: "colors",
     title: "Colors",
@@ -98,10 +98,10 @@ const T = [
   }
 ];
 function Mn(n) {
-  const r = T.find((o) => o.slug === n);
+  const r = P.find((o) => o.slug === n);
   return r ? r.slug : "colors";
 }
-const ct = T.find((n) => n.slug === "buttons"), En = ["primary", "secondary", "ghost", "danger"];
+const ct = P.find((n) => n.slug === "buttons"), En = ["primary", "secondary", "ghost", "danger"];
 function Cn() {
   return /* @__PURE__ */ t(O, { title: ct.title, lede: ct.lede, children: /* @__PURE__ */ t(Ee, { children: En.map((n) => /* @__PURE__ */ t(b, { label: n, children: /* @__PURE__ */ s(Sn, { children: [
     /* @__PURE__ */ t(ue, { variant: n, children: n }),
@@ -109,7 +109,7 @@ function Cn() {
     /* @__PURE__ */ t(Zt, { variant: n, to: "/__ui/buttons", children: "link" })
   ] }) }, n)) }) });
 }
-const dt = T.find((n) => n.slug === "colors");
+const dt = P.find((n) => n.slug === "colors");
 function zn() {
   return /* @__PURE__ */ t(O, { title: dt.title, lede: dt.lede, children: /* @__PURE__ */ t("div", { className: "xrvj5dj x1sipb5g x11cgr9k x1kk4rku", children: Rn.map(([n, r]) => /* @__PURE__ */ s("figure", { className: "x78zum5 xdt5ytf x3smv4v x1ghz6dp xeuugli", children: [
     /* @__PURE__ */ t("div", { ...Rt(w.chip, r) }),
@@ -212,17 +212,17 @@ function ut(n, r, o, a = "en") {
   return !r || !o ? d : `${d}${Qt(o, r.type, r.slug, r.locale, a)}`;
 }
 const he = "cubic-bezier(0.23, 1, 0.32, 1)", Oe = "cubic-bezier(0.55, 0, 1, 0.45)", In = "cubic-bezier(0.32, 0.72, 0, 1)", _n = 550, An = 300, Ln = 750, Bn = 360, It = "backmatter.devbar.mode";
-function Tn(n) {
+function Pn(n) {
   const r = n.activity ?? null, o = r ? r.type : n.siteMode === "preview" && n.changeCount > 0 ? "changes" : "idle", a = o === "published" ? "live" : n.siteMode;
   return { mode: a, row: o, modeLabel: a === "preview" ? "Exit preview" : "Enter preview", announce: a === "preview" ? "Preview on, drafts visible" : "Live site" };
 }
-function Wn(n, r) {
+function Tn(n, r) {
   return {
     x: r.left + r.width / 2 - n.left,
     y: r.top + r.height / 2 - n.top
   };
 }
-function Pn(n, r) {
+function Wn(n, r) {
   return Math.abs(r - n) > 1;
 }
 function se() {
@@ -279,6 +279,11 @@ function Ve(n, r) {
 }
 const be = "backmatter-preview-frame";
 function Gn() {
+  if (typeof navigator > "u") return Promise.resolve(void 0);
+  const n = navigator.userAgentData;
+  return n != null && n.getHighEntropyValues ? n.getHighEntropyValues(["platformVersion"]).then((r) => r.platformVersion) : Promise.resolve(void 0);
+}
+function Xn() {
   return typeof navigator > "u" ? _t : Ve(navigator.userAgent);
 }
 function bt(n) {
@@ -290,10 +295,10 @@ function bt(n) {
       if (Number.isFinite(o) && o >= 0) return o;
     }
   }
-  return Gn();
+  return Xn();
 }
 const Lt = "oklch(0.56 0.21 295)";
-function Xn({
+function Yn({
   active: n,
   radius: r
 }) {
@@ -304,10 +309,8 @@ function Xn({
       return;
     }
     const h = navigator.userAgent;
-    m(Ve(h));
-    const u = navigator.userAgentData;
-    u != null && u.getHighEntropyValues && u.getHighEntropyValues(["platformVersion"]).then((p) => {
-      m(Ve(h, p.platformVersion));
+    m(Ve(h)), Gn().then((u) => {
+      u !== void 0 && m(Ve(h, u));
     });
   }, [r]), te(() => {
     const h = o.current, u = a.current;
@@ -320,7 +323,7 @@ function Xn({
       { duration: 700, delay: 180, easing: he }
     );
   }, [n]), /* @__PURE__ */ s(U, { children: [
-    /* @__PURE__ */ t("style", { children: Yn }),
+    /* @__PURE__ */ t("style", { children: Zn }),
     /* @__PURE__ */ t(
       "div",
       {
@@ -334,7 +337,7 @@ function Xn({
     )
   ] });
 }
-const Yn = `
+const Zn = `
 .${be} {
   position: fixed;
   inset: 0;
@@ -362,11 +365,11 @@ const Yn = `
     opacity: 1;
   }
 }
-`, e = "backmatter-devbar", Zn = "/api/backmatter/preview", Qn = 10, Jn = 360;
+`, e = "backmatter-devbar", Qn = "/api/backmatter/preview", Jn = 10, er = 360;
 function xt(n, r) {
   return `${n}:${r.trim().toLowerCase()}`;
 }
-function er({
+function tr({
   label: n,
   branch: r,
   tree: o,
@@ -377,7 +380,7 @@ function er({
   changeCount: u,
   lineDiff: p,
   activity: c = null,
-  previewEntryPath: R = Zn,
+  previewEntryPath: R = Qn,
   siteMode: y = "preview",
   frame: D = !1,
   frameRadius: X,
@@ -393,14 +396,14 @@ function er({
   onSignOut: j,
   onPublishAnchor: Y
 }) {
-  const le = k(null), ce = k(null), Z = k(null), G = k(null), x = k(null), A = k(null), W = k(null), Q = k(null), [ne, pe] = f(null), re = Ke((i) => {
+  const le = k(null), ce = k(null), Z = k(null), G = k(null), x = k(null), A = k(null), T = k(null), Q = k(null), [ne, pe] = f(null), re = Ke((i) => {
     if (le.current = i, !i) {
       pe(null);
       return;
     }
     const l = i.shadowRoot ?? i.attachShadow({ mode: "open" });
-    pe(($) => $ === l ? $ : l);
-  }, []), [ie, xe] = f(null), [F, L] = f(null), [$e, Ce] = f(y), [ze, Wt] = f(!1), Re = k(!1), oe = k(null), Ge = k(0), Xe = k(!1), Ye = k(!1), P = k({
+    pe((v) => v === l ? v : l);
+  }, []), [ie, xe] = f(null), [F, L] = f(null), [ve, Ce] = f(y), [ze, Tt] = f(!1), Re = k(!1), oe = k(null), Ge = k(0), Xe = k(!1), Ye = k(!1), W = k({
     toggleHidden: () => {
     },
     onModeKey: (i) => {
@@ -410,7 +413,7 @@ function er({
     openDashboard: () => !1,
     openShortcuts: () => {
     }
-  }), Ze = k(!0), [Ie, Pt] = f("system"), [_e, Qe] = f(!0), [Je, et] = f(!0), [Ht, ve] = f("main"), [Dt, qt] = f(""), [Ae, Le] = f(null), [tt, jt] = f("en");
+  }), Ze = k(!0), [Ie, Wt] = f("system"), [_e, Qe] = f(!0), [Je, et] = f(!0), [Ht, $e] = f("main"), [Dt, qt] = f(""), [Ae, Le] = f(null), [tt, jt] = f("en");
   z(() => {
     const i = a == null ? void 0 : a.workspaceId;
     if (!i) {
@@ -418,8 +421,8 @@ function er({
       return;
     }
     let l = !1;
-    return at(i).then(({ workspace: $ }) => {
-      l || (Le($.slug), jt($.locales[0] ?? "en"));
+    return at(i).then(({ workspace: v }) => {
+      l || (Le(v.slug), jt(v.locales[0] ?? "en"));
     }).catch(() => {
       l || Le(null);
     }), () => {
@@ -431,11 +434,11 @@ function er({
     [N, a, Ae, tt]
   ), Ft = Ke((i) => {
     Z.current = i, !(i && !(i.getRootNode() instanceof ShadowRoot)) && xe(i);
-  }, []), Te = Tn({ siteMode: $e, changeCount: u, activity: c }), de = Te.mode, Kt = (c == null ? void 0 : c.type) === "editing" ? `editing:${c.field}` : (c == null ? void 0 : c.type) === "publishing" ? `publishing:${c.steps.map((i) => `${i.state}:${i.label}`).join("|")}` : (c == null ? void 0 : c.type) === "published" ? `published:${c.sha}` : "", We = `${$e}|${Te.row}|${u}|${(p == null ? void 0 : p.added) ?? ""}|${(p == null ? void 0 : p.removed) ?? ""}|${n}|${Kt}`;
+  }, []), Pe = Pn({ siteMode: ve, changeCount: u, activity: c }), de = Pe.mode, Kt = (c == null ? void 0 : c.type) === "editing" ? `editing:${c.field}` : (c == null ? void 0 : c.type) === "publishing" ? `publishing:${c.steps.map((i) => `${i.state}:${i.label}`).join("|")}` : (c == null ? void 0 : c.type) === "published" ? `published:${c.sha}` : "", Te = `${ve}|${Pe.row}|${u}|${(p == null ? void 0 : p.added) ?? ""}|${(p == null ? void 0 : p.removed) ?? ""}|${n}|${Kt}`;
   z(() => {
     qt(location.host);
     const i = je(), l = qn(i);
-    et(gt(i, pt, !0)), Pt(l), Qe(gt(i, ht, !0));
+    et(gt(i, pt, !0)), Wt(l), Qe(gt(i, ht, !0));
   }, []), z(() => {
     if (kt(Ie), Ie !== "system" || typeof matchMedia != "function") return;
     const i = matchMedia("(prefers-color-scheme: dark)"), l = () => kt("system");
@@ -443,7 +446,7 @@ function er({
   }, [Ie]), z(() => (document.documentElement.classList.toggle("backmatter-blocks", _e), () => document.documentElement.classList.remove("backmatter-blocks")), [_e]), z(() => {
     const i = le.current;
     if (!i) return;
-    const l = document.documentElement, $ = `${e}-pointing`, H = () => i.classList.toggle($, l.classList.contains("backmatter-pointing"));
+    const l = document.documentElement, v = `${e}-pointing`, H = () => i.classList.toggle(v, l.classList.contains("backmatter-pointing"));
     H();
     const J = new MutationObserver(H);
     return J.observe(l, { attributes: !0, attributeFilter: ["class"] }), () => J.disconnect();
@@ -456,14 +459,14 @@ function er({
   }, [y, d]), z(() => {
     if (!F) return;
     function i(l) {
-      const $ = ce.current;
-      $ && l.composedPath().includes($) || L(null);
+      const v = ce.current;
+      v && l.composedPath().includes(v) || L(null);
     }
     return document.addEventListener("pointerdown", i), () => document.removeEventListener("pointerdown", i);
   }, [F]), te(() => {
-    const i = Z.current, l = W.current;
-    !i || !l || F !== "settings" || lr(i, l);
-  }, [F, ie, We]), te(() => {
+    const i = Z.current, l = T.current;
+    !i || !l || F !== "settings" || cr(i, l);
+  }, [F, ie, Te]), te(() => {
     if (!Y) return;
     const i = A.current;
     if (!h || !i) {
@@ -474,31 +477,31 @@ function er({
     return l(), window.addEventListener("resize", l), window.addEventListener("scroll", l, !0), () => {
       window.removeEventListener("resize", l), window.removeEventListener("scroll", l, !0);
     };
-  }, [h, Y, We, ie]), z(() => {
+  }, [h, Y, Te, ie]), z(() => {
     function i(l) {
-      if (!or(l.composedPath()[0] ?? null)) {
+      if (!ar(l.composedPath()[0] ?? null)) {
         if ((l.metaKey || l.ctrlKey) && l.key === ".") {
-          l.preventDefault(), P.current.toggleHidden();
+          l.preventDefault(), W.current.toggleHidden();
           return;
         }
         if ((l.metaKey || l.ctrlKey) && l.shiftKey && l.key.toLowerCase() === "p") {
           l.preventDefault();
-          const $ = x.current;
-          if (!$ || $.disabled) return;
-          P.current.onModeKey($);
+          const v = x.current;
+          if (!v || v.disabled) return;
+          W.current.onModeKey(v);
           return;
         }
         if ((l.metaKey || l.ctrlKey) && !l.shiftKey && l.key.toLowerCase() === "d") {
-          if (!P.current.openDashboard()) return;
+          if (!W.current.openDashboard()) return;
           l.preventDefault();
           return;
         }
         if (l.key === "?" && !l.metaKey && !l.ctrlKey && !l.altKey) {
-          l.preventDefault(), P.current.openShortcuts();
+          l.preventDefault(), W.current.openShortcuts();
           return;
         }
         if (l.key === "Escape") {
-          P.current.onEscape();
+          W.current.onEscape();
           return;
         }
         Jt(l) === "chat" && L(null);
@@ -536,13 +539,13 @@ function er({
     const J = i.offsetWidth;
     if (Ge.current = J, l) return;
     const B = G.current;
-    if (B && (se() ? B.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease", fill: "backwards" }) : qe(B, { delay: 40, blur: !0 })), se() || !Pn(H, J)) return;
+    if (B && (se() ? B.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease", fill: "backwards" }) : qe(B, { delay: 40, blur: !0 })), se() || !Wn(H, J)) return;
     const Yt = i.animate(
       [{ width: `${H}px` }, { width: `${J}px` }],
       { duration: 380, easing: In }
     );
     Yt.id = "w";
-  }, [ne, We, I, y]);
+  }, [ne, Te, I, y]);
   const ke = (c == null ? void 0 : c.type) === "published" ? c.sha : "";
   te(() => {
     const i = Q.current;
@@ -558,21 +561,21 @@ function er({
     const i = window.setTimeout(_, 3200);
     return () => window.clearTimeout(i);
   }, [ke, _]);
-  function Pe(i, l) {
-    if (d || i === $e || i === "preview" && !S) return;
-    const $ = Z.current;
-    if ($) {
-      const H = Wn($.getBoundingClientRect(), l.getBoundingClientRect());
-      $.style.setProperty("--ox", `${H.x}px`), $.style.setProperty("--oy", `${H.y}px`);
+  function We(i, l) {
+    if (d || i === ve || i === "preview" && !S) return;
+    const v = Z.current;
+    if (v) {
+      const H = Tn(v.getBoundingClientRect(), l.getBoundingClientRect());
+      v.style.setProperty("--ox", `${H.x}px`), v.style.setProperty("--oy", `${H.y}px`);
     }
     i === "live" && (L(null), m && E(), h && g()), oe.current = i, De(i), Ce(i), i === "preview" ? S == null || S() : C();
   }
   function nt(i) {
     if (Re.current === i) return;
-    Re.current = i, L(null), Wt(i);
+    Re.current = i, L(null), Tt(i);
     const l = Z.current;
     if (!l || !(l.getRootNode() instanceof ShadowRoot)) return;
-    const $ = l.getRootNode(), H = $ instanceof ShadowRoot ? $.activeElement : null;
+    const v = l.getRootNode(), H = v instanceof ShadowRoot ? v.activeElement : null;
     if (i && H instanceof HTMLElement && H.blur(), l.getAnimations().filter((B) => B.id === "hide" || B.id === "rise").forEach((B) => B.cancel()), se()) {
       const B = l.animate(
         [{ opacity: i ? 1 : 0 }, { opacity: i ? 0 : 1 }],
@@ -595,7 +598,7 @@ function er({
     );
     J.id = "rise", G.current && qe(G.current, { delay: 140 });
   }
-  P.current.openDashboard = () => N ? ((async () => {
+  W.current.openDashboard = () => N ? ((async () => {
     let i = Be ?? N;
     if (a != null && a.workspaceId && a.type && a.slug && !Ae)
       try {
@@ -604,9 +607,9 @@ function er({
       } catch {
       }
     location.assign(i);
-  })(), !0) : !1, P.current.openShortcuts = () => {
-    ve("shortcuts"), L("settings");
-  }, P.current.toggleHidden = () => nt(!Re.current), P.current.onModeKey = (i) => Pe(de === "preview" ? "live" : "preview", i), P.current.onEscape = () => {
+  })(), !0) : !1, W.current.openShortcuts = () => {
+    $e("shortcuts"), L("settings");
+  }, W.current.toggleHidden = () => nt(!Re.current), W.current.onModeKey = (i) => We(de === "preview" ? "live" : "preview", i), W.current.onEscape = () => {
     if (F) {
       L(null);
       return;
@@ -618,25 +621,25 @@ function er({
     (c == null ? void 0 : c.type) === "editing" && (M == null || M());
   };
   function rt(i) {
-    d || (L(null), h && g(), $e === "live" && Ze.current && Pe("preview", i), E());
+    d || (L(null), h && g(), ve === "live" && Ze.current && We("preview", i), E());
   }
   function Vt() {
     d || (L(null), m && E(), g());
   }
   Ze.current = Je;
   function Ut(i) {
-    h && g(), ve(i), L((l) => l === "settings" && i === "main" ? null : "settings");
+    h && g(), $e(i), L((l) => l === "settings" && i === "main" ? null : "settings");
   }
   function Ot() {
     h && g(), L((i) => i === "page" ? null : "page");
   }
   const Gt = !!d || de === "live" && !S, Xt = !a || u <= 0, we = /* @__PURE__ */ t(
-    tr,
+    nr,
     {
       mode: de,
       disabled: Gt,
       buttonRef: x,
-      onClick: (i) => Pe(de === "preview" ? "live" : "preview", i.currentTarget)
+      onClick: (i) => We(de === "preview" ? "live" : "preview", i.currentTarget)
     }
   );
   let ge;
@@ -653,7 +656,7 @@ function er({
     we,
     /* @__PURE__ */ t("span", { className: `${e}-steps`, children: c.steps.map((i, l) => /* @__PURE__ */ s("span", { className: `${e}-step`, children: [
       l > 0 ? /* @__PURE__ */ t("span", { className: `${e}-dash`, "aria-hidden": !0, children: "—" }) : null,
-      /* @__PURE__ */ t(ir, { state: i.state }),
+      /* @__PURE__ */ t(or, { state: i.state }),
       /* @__PURE__ */ t("span", { children: i.label })
     ] }, `${i.label}:${l}`)) })
   ] }) : (c == null ? void 0 : c.type) === "published" ? ge = /* @__PURE__ */ s(U, { children: [
@@ -669,7 +672,7 @@ function er({
     ] }),
     /* @__PURE__ */ t("button", { type: "button", className: `${e}-btn`, onClick: () => (q ?? C)(), children: "View live" }),
     /* @__PURE__ */ t(
-      $t,
+      vt,
       {
         pressed: m,
         disabled: !a,
@@ -680,7 +683,7 @@ function er({
   ] }) : ge = /* @__PURE__ */ s(U, { children: [
     we,
     /* @__PURE__ */ t(
-      fr,
+      br,
       {
         label: n,
         doc: a,
@@ -693,7 +696,7 @@ function er({
     ),
     /* @__PURE__ */ t("span", { className: `${e}-rule`, "aria-hidden": !0 }),
     /* @__PURE__ */ t(
-      $t,
+      vt,
       {
         pressed: m,
         disabled: !a,
@@ -702,7 +705,7 @@ function er({
       }
     ),
     /* @__PURE__ */ t(
-      nr,
+      rr,
       {
         buttonRef: A,
         open: h,
@@ -712,16 +715,16 @@ function er({
       }
     ),
     /* @__PURE__ */ t(
-      ar,
+      sr,
       {
-        buttonRef: W,
+        buttonRef: T,
         open: F === "settings",
         onClick: () => Ut("main")
       }
     )
   ] });
   const it = /* @__PURE__ */ s(U, { children: [
-    /* @__PURE__ */ t("style", { children: kr }),
+    /* @__PURE__ */ t("style", { children: wr }),
     /* @__PURE__ */ s(
       "div",
       {
@@ -730,7 +733,7 @@ function er({
         "data-mode": de,
         "data-branch": r || void 0,
         children: [
-          D ? /* @__PURE__ */ t(Xn, { active: de === "preview", radius: X }) : null,
+          D ? /* @__PURE__ */ t(Yn, { active: de === "preview", radius: X }) : null,
           /* @__PURE__ */ s(
             "footer",
             {
@@ -754,12 +757,12 @@ function er({
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ t("div", { className: `${e}-sr`, "aria-live": "polite", children: Te.announce })
+                /* @__PURE__ */ t("div", { className: `${e}-sr`, "aria-live": "polite", children: Pe.announce })
               ]
             }
           ),
           /* @__PURE__ */ t(
-            sr,
+            lr,
             {
               open: F === "settings",
               pane: Ht,
@@ -775,10 +778,10 @@ function er({
               onPreviewAgent: (i) => {
                 et(i), mt(je(), pt, i);
               },
-              onShortcuts: () => ve("shortcuts"),
-              onBack: () => ve("main"),
+              onShortcuts: () => $e("shortcuts"),
+              onBack: () => $e("main"),
               onDashboard: () => {
-                P.current.openDashboard();
+                W.current.openDashboard();
               },
               onHide: () => nt(!0),
               onSwitchBranch: r ? () => L("branch") : void 0,
@@ -786,7 +789,7 @@ function er({
             }
           ),
           r ? /* @__PURE__ */ t(
-            br,
+            xr,
             {
               branch: r,
               tree: o,
@@ -802,11 +805,17 @@ function er({
     )
   ] });
   return /* @__PURE__ */ s("div", { ref: re, className: `${e}-host`, "data-backmatter-devbar": "", children: [
-    /* @__PURE__ */ t("style", { children: vr }),
-    ne ? Me(it, ne) : /* @__PURE__ */ t("template", { shadowrootmode: "open", children: it })
+    /* @__PURE__ */ t("style", { children: kr }),
+    ne ? Me(it, ne) : /* @__PURE__ */ t(
+      "template",
+      {
+        shadowrootmode: "open",
+        children: it
+      }
+    )
   ] });
 }
-function tr({
+function nr({
   mode: n,
   disabled: r,
   buttonRef: o,
@@ -826,13 +835,13 @@ function tr({
       disabled: r,
       onClick: a,
       children: [
-        /* @__PURE__ */ t(rr, { exit: d }),
+        /* @__PURE__ */ t(ir, { exit: d }),
         d ? "Exit preview" : "Enter preview"
       ]
     }
   );
 }
-function $t({
+function vt({
   pressed: n,
   disabled: r,
   shortcut: o,
@@ -858,7 +867,7 @@ function $t({
     }
   );
 }
-function nr({
+function rr({
   buttonRef: n,
   open: r,
   count: o,
@@ -888,13 +897,13 @@ function nr({
     }
   );
 }
-function rr({ exit: n }) {
+function ir({ exit: n }) {
   return n ? /* @__PURE__ */ t("svg", { className: `${e}-mark`, width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": !0, children: /* @__PURE__ */ t("path", { d: "M3 3l6 6M9 3 3 9", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }) }) : /* @__PURE__ */ s("svg", { className: `${e}-mark`, width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": !0, children: [
     /* @__PURE__ */ t("circle", { cx: "6", cy: "6", r: "3.25", stroke: "currentColor", strokeWidth: "1.25" }),
     /* @__PURE__ */ t("circle", { cx: "6", cy: "6", r: "1.35", fill: "currentColor" })
   ] });
 }
-function ir({ state: n }) {
+function or({ state: n }) {
   return n === "done" ? /* @__PURE__ */ t("span", { className: `${e}-done`, "aria-hidden": !0, children: "✓" }) : n === "active" ? /* @__PURE__ */ t("span", { className: `${e}-spin`, "aria-hidden": !0 }) : /* @__PURE__ */ t("span", { className: `${e}-ring`, "aria-hidden": !0 });
 }
 function qe(n, r = {}) {
@@ -913,12 +922,12 @@ function qe(n, r = {}) {
     );
   });
 }
-function or(n) {
+function ar(n) {
   if (!(n instanceof HTMLElement)) return !1;
   const r = n.tagName;
   return r === "INPUT" || r === "TEXTAREA" || r === "SELECT" ? !0 : n.isContentEditable;
 }
-function ar({
+function sr({
   buttonRef: n,
   open: r,
   onClick: o
@@ -937,7 +946,7 @@ function ar({
     }
   );
 }
-function sr({
+function lr({
   open: n,
   pane: r,
   hostName: o,
@@ -969,7 +978,7 @@ function sr({
   }, [n]), !n || !d) return null;
   const M = o && a ? `${o} · ${a}` : o || a || "", q = r === "shortcuts" ? /* @__PURE__ */ s("div", { role: "dialog", "aria-labelledby": C, className: `${e}-menu ${e}-settings`, children: [
     /* @__PURE__ */ t("div", { className: `${e}-settings-head`, children: /* @__PURE__ */ s("button", { type: "button", className: `${e}-settings-back`, onClick: y, children: [
-      /* @__PURE__ */ t(Tt, {}),
+      /* @__PURE__ */ t(Pt, {}),
       /* @__PURE__ */ t("span", { id: C, children: "Shortcuts" })
     ] }) }),
     /* @__PURE__ */ t(fe, { label: "Toggle preview", keys: `${g}⇧P` }),
@@ -983,18 +992,18 @@ function sr({
       M ? /* @__PURE__ */ t("span", { className: `${e}-settings-place`, children: M }) : null
     ] }),
     /* @__PURE__ */ s("div", { className: `${e}-settings-row`, children: [
-      /* @__PURE__ */ t(dr, {}),
+      /* @__PURE__ */ t(ur, {}),
       /* @__PURE__ */ t("span", { children: "Highlight editable blocks" }),
-      /* @__PURE__ */ t(vt, { on: m, label: "Highlight editable blocks", onClick: () => p(!m) })
+      /* @__PURE__ */ t($t, { on: m, label: "Highlight editable blocks", onClick: () => p(!m) })
     ] }),
     /* @__PURE__ */ s("div", { className: `${e}-settings-row`, children: [
-      /* @__PURE__ */ t(ur, {}),
+      /* @__PURE__ */ t(hr, {}),
       /* @__PURE__ */ t("span", { children: "Preview when Agent edits" }),
-      /* @__PURE__ */ t(vt, { on: h, label: "Preview when Agent edits", onClick: () => c(!h) })
+      /* @__PURE__ */ t($t, { on: h, label: "Preview when Agent edits", onClick: () => c(!h) })
     ] }),
     /* @__PURE__ */ t("div", { className: `${e}-settings-rule` }),
     u ? /* @__PURE__ */ s("button", { type: "button", className: `${e}-settings-action`, onClick: D, children: [
-      /* @__PURE__ */ t(hr, {}),
+      /* @__PURE__ */ t(pr, {}),
       /* @__PURE__ */ t("span", { children: "Open in dashboard" }),
       /* @__PURE__ */ s("kbd", { className: `${e}-kbd`, children: [
         g,
@@ -1007,12 +1016,12 @@ function sr({
       a ? /* @__PURE__ */ t("span", { className: `${e}-settings-email`, children: a }) : null
     ] }) : null,
     /* @__PURE__ */ s("button", { type: "button", className: `${e}-settings-action`, onClick: R, children: [
-      /* @__PURE__ */ t(pr, {}),
+      /* @__PURE__ */ t(gr, {}),
       /* @__PURE__ */ t("span", { children: "Keyboard shortcuts" }),
       /* @__PURE__ */ t("kbd", { className: `${e}-kbd`, children: "?" })
     ] }),
     /* @__PURE__ */ s("button", { type: "button", className: `${e}-settings-action`, "aria-keyshortcuts": "Meta+. Control+.", onClick: X, children: [
-      /* @__PURE__ */ t(gr, {}),
+      /* @__PURE__ */ t(mr, {}),
       /* @__PURE__ */ t("span", { children: "Hide toolbar" }),
       /* @__PURE__ */ s("kbd", { className: `${e}-kbd`, children: [
         g,
@@ -1022,7 +1031,7 @@ function sr({
     N ? /* @__PURE__ */ s(U, { children: [
       /* @__PURE__ */ t("div", { className: `${e}-settings-rule` }),
       /* @__PURE__ */ s("button", { type: "button", className: `${e}-settings-action`, onClick: N, children: [
-        /* @__PURE__ */ t(mr, {}),
+        /* @__PURE__ */ t(fr, {}),
         /* @__PURE__ */ t("span", { children: "Sign out" }),
         S ? /* @__PURE__ */ t("span", { className: `${e}-settings-email`, children: S }) : null
       ] })
@@ -1036,7 +1045,7 @@ function fe({ label: n, keys: r }) {
     /* @__PURE__ */ t("kbd", { className: `${e}-kbd`, children: r })
   ] });
 }
-function vt({ on: n, label: r, onClick: o }) {
+function $t({ on: n, label: r, onClick: o }) {
   return /* @__PURE__ */ t(
     "button",
     {
@@ -1050,44 +1059,44 @@ function vt({ on: n, label: r, onClick: o }) {
     }
   );
 }
-function lr(n, r) {
+function cr(n, r) {
   const o = n.getBoundingClientRect(), a = r.getBoundingClientRect();
   n.style.setProperty("--menu-right", `${Math.max(0, o.right - a.right)}px`);
 }
-function cr(n, r) {
-  const o = n.getBoundingClientRect(), a = r.getBoundingClientRect(), d = Math.min(Jn, window.innerWidth - 32);
+function dr(n, r) {
+  const o = n.getBoundingClientRect(), a = r.getBoundingClientRect(), d = Math.min(er, window.innerWidth - 32);
   let h = a.left + a.width / 2 - o.left - d / 2;
   const u = 16, p = u - o.left, c = window.innerWidth - u - d - o.left;
   n.style.setProperty("--menu-x", `${Math.max(p, Math.min(h, c))}px`);
 }
-function dr() {
+function ur() {
   return /* @__PURE__ */ s("svg", { className: `${e}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ t("path", { d: "M3 3h4.2v4.2H3zM8.8 3H13v4.2H8.8zM3 8.8h4.2V13H3z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
     /* @__PURE__ */ t("path", { d: "M8.8 10.2h4.2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeDasharray: "1.4 1.5" })
   ] });
 }
-function ur() {
+function hr() {
   return /* @__PURE__ */ s("svg", { className: `${e}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ t("path", { d: "M1.6 8S4 3.8 8 3.8 14.4 8 14.4 8 12 12.2 8 12.2 1.6 8 1.6 8Z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
     /* @__PURE__ */ t("circle", { cx: "8", cy: "8", r: "1.8", fill: "none", stroke: "currentColor", strokeWidth: "1.3" })
   ] });
 }
-function hr() {
+function pr() {
   return /* @__PURE__ */ t("svg", { className: `${e}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: /* @__PURE__ */ t("path", { d: "M2.5 2.5h4.2v4.2H2.5zM9.3 2.5h4.2v4.2H9.3zM2.5 9.3h4.2v4.2H2.5zM9.3 9.3h4.2v4.2H9.3z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }) });
 }
-function pr() {
+function gr() {
   return /* @__PURE__ */ s("svg", { className: `${e}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ t("rect", { x: "1.8", y: "3.6", width: "12.4", height: "8.8", rx: "1.4", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
     /* @__PURE__ */ t("path", { d: "M4 6.2h.1M6.4 6.2h.1M8.8 6.2h.1M11.2 6.2h.1M4.8 8.4h6.4", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
   ] });
 }
-function gr() {
+function mr() {
   return /* @__PURE__ */ s("svg", { className: `${e}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ t("path", { d: "M2 8s2.2-3.6 6-3.6S14 8 14 8s-2.2 3.6-6 3.6S2 8 2 8Z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
     /* @__PURE__ */ t("path", { d: "M3 13 13 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
   ] });
 }
-function mr() {
+function fr() {
   return /* @__PURE__ */ s("svg", { className: `${e}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ t("path", { d: "M6.5 3.2H3.8v9.6h2.7", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" }),
     /* @__PURE__ */ t("path", { d: "M7 8h6.2M11 5.4 13.6 8 11 10.6", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -1105,7 +1114,7 @@ function kt(n) {
   const r = typeof matchMedia == "function" && matchMedia("(prefers-color-scheme: dark)").matches, o = jn(n, r) === "dark", a = document.documentElement;
   a.dataset.theme = o ? "dark" : "light", a.style.colorScheme = n === "system" ? "light dark" : o ? "dark" : "light", a.classList.toggle("dark", o), a.classList.toggle("light", !o);
 }
-function fr({
+function br({
   label: n,
   doc: r,
   dashboardHref: o,
@@ -1123,16 +1132,16 @@ function fr({
   }, [d]), te(() => {
     const x = M.current;
     if (!d || !a || !x) return;
-    const A = () => cr(a, x);
+    const A = () => dr(a, x);
     return A(), window.addEventListener("resize", A), () => window.removeEventListener("resize", A);
   }, [d, a]);
   const le = Ke(
-    (x, A, W) => {
+    (x, A, T) => {
       if (!r) return;
       const Q = ++j.current, ne = S.trim(), pe = xt(r.workspaceId, ne);
-      A ? I(!0) : W != null && W.silent || D(!0), tn(r.workspaceId, {
+      A ? I(!0) : T != null && T.silent || D(!0), tn(r.workspaceId, {
         q: ne || void 0,
-        limit: Qn,
+        limit: Jn,
         offset: x,
         current: r
       }).then((re) => {
@@ -1150,10 +1159,10 @@ function fr({
   );
   z(() => {
     if (!d || !r) return;
-    const x = S.trim(), A = xt(r.workspaceId, x), W = Y.current.get(A);
-    W && (p(W.rows), R(W.total), C(null));
+    const x = S.trim(), A = xt(r.workspaceId, x), T = Y.current.get(A);
+    T && (p(T.rows), R(T.total), C(null));
     const Q = window.setTimeout(
-      () => le(0, !1, { silent: !!W }),
+      () => le(0, !1, { silent: !!T }),
       x ? 200 : 0
     );
     return () => window.clearTimeout(Q);
@@ -1235,14 +1244,14 @@ function fr({
         onClick: h,
         children: [
           /* @__PURE__ */ t("span", { children: n }),
-          /* @__PURE__ */ t(Tt, {})
+          /* @__PURE__ */ t(Pt, {})
         ]
       }
     ),
     G && a ? Me(G, a) : null
   ] });
 }
-function br({
+function xr({
   branch: n,
   tree: r,
   workspaceId: o,
@@ -1267,7 +1276,7 @@ function br({
       g = !0;
     };
   }, [m, o, u, n]), !m || !d) return null;
-  const E = u ? xr(u.map((g) => ({ key: g, label: g })), N) : null;
+  const E = u ? vr(u.map((g) => ({ key: g, label: g })), N) : null;
   return Me(
     /* @__PURE__ */ t("div", { id: S, role: "menu", "aria-label": "Branches", className: `${e}-menu ${e}-page-menu`, children: o ? /* @__PURE__ */ t(
       Bt,
@@ -1348,10 +1357,10 @@ function Bt({
     ] }) : null
   ] });
 }
-function Tt() {
+function Pt() {
   return /* @__PURE__ */ t("svg", { className: `${e}-chevron`, width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ t("path", { d: "M2.5 4.5 6 8l3.5-3.5", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function xr(n, r) {
+function vr(n, r) {
   const o = r.trim().toLowerCase();
   return o ? n.filter((a) => a.label.toLowerCase().includes(o)) : [...n];
 }
@@ -1372,7 +1381,7 @@ async function $r(n) {
   const m = n.previewEntryPath.includes("?") ? "&" : "?";
   a(`${n.previewEntryPath}${m}ticket=${encodeURIComponent(d.ticket)}`);
 }
-const vr = `
+const kr = `
 .${e}-host {
   position: absolute;
   width: 0;
@@ -1391,7 +1400,7 @@ html.backmatter-blocks [data-backmatter-block] {
   outline: 1.5px solid oklch(0.56 0.21 295);
   outline-offset: 2px;
 }
-`, kr = `
+`, wr = `
 .${e}-root {
   --preview: ${Lt};
   --preview-hover: oklch(0.50 0.20 295);
@@ -2000,20 +2009,20 @@ html.backmatter-blocks [data-backmatter-block] {
 :host(.${e}-pointing) .${e} * { cursor: pointer !important; }
 :host(.${e}-pointing) .${e} button:disabled { cursor: default !important; }
 `, Se = () => {
-}, wr = {
+}, yr = {
   position: "relative",
   height: 96,
   overflow: "hidden",
   transform: "translateZ(0)",
   "--bm-devbar-right": "auto",
   "--bm-devbar-left": "12px"
-}, yr = {
+}, Nr = {
   locale: "en",
   type: "page",
   slug: "home",
   workspaceId: "ws_sample"
 };
-function Nr() {
+function Sr() {
   const [n, r] = f(0);
   return /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: 40 }, children: [
     /* @__PURE__ */ t("style", { children: `
@@ -2123,12 +2132,12 @@ function K({
 }) {
   return /* @__PURE__ */ s("section", { style: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ t("h2", { className: "ui-kit-devbar-label", children: r }),
-    /* @__PURE__ */ t("div", { className: "ui-kit-devbar-stage", style: wr, children: /* @__PURE__ */ t(
-      er,
+    /* @__PURE__ */ t("div", { className: "ui-kit-devbar-stage", style: yr, children: /* @__PURE__ */ t(
+      tr,
       {
         label: "page/home",
         branch: a,
-        doc: m ? yr : null,
+        doc: m ? Nr : null,
         siteMode: o,
         exiting: d,
         chatOpen: h,
@@ -2146,8 +2155,8 @@ function K({
     ) })
   ] });
 }
-const wt = T.find((n) => n.slug === "feedback");
-function Sr() {
+const wt = P.find((n) => n.slug === "feedback");
+function Mr() {
   return /* @__PURE__ */ t(O, { title: wt.title, lede: wt.lede, children: /* @__PURE__ */ s(Ee, { children: [
     /* @__PURE__ */ t(b, { label: "StatusBar", block: !0, children: /* @__PURE__ */ s(He, { children: [
       /* @__PURE__ */ t(me, { children: "main" }),
@@ -2158,12 +2167,12 @@ function Sr() {
       /* @__PURE__ */ t(me, { children: "Unsaved" })
     ] }) }),
     /* @__PURE__ */ t(b, { label: "danger", block: !0, children: /* @__PURE__ */ t(He, { children: /* @__PURE__ */ t(me, { tone: "danger", children: "Save failed" }) }) }),
-    /* @__PURE__ */ t(b, { label: "success", children: /* @__PURE__ */ t(v, { tone: "success", children: "Success" }) }),
-    /* @__PURE__ */ t(b, { label: "danger", children: /* @__PURE__ */ t(v, { tone: "danger", children: "Danger" }) })
+    /* @__PURE__ */ t(b, { label: "success", children: /* @__PURE__ */ t($, { tone: "success", children: "Success" }) }),
+    /* @__PURE__ */ t(b, { label: "danger", children: /* @__PURE__ */ t($, { tone: "danger", children: "Danger" }) })
   ] }) });
 }
-const yt = T.find((n) => n.slug === "fields");
-function Mr() {
+const yt = P.find((n) => n.slug === "fields");
+function Er() {
   const [n, r] = f("en");
   return /* @__PURE__ */ t(O, { title: yt.title, lede: yt.lede, children: /* @__PURE__ */ s(Ee, { children: [
     /* @__PURE__ */ t(b, { label: "Input", block: !0, children: /* @__PURE__ */ t(Ne, { label: "Text", hint: "Shown under the field.", children: /* @__PURE__ */ t(st, { defaultValue: "Ada Lovelace", autoComplete: "off", spellCheck: !1 }) }) }),
@@ -2187,15 +2196,15 @@ title: Hello
 Paragraph.` }) }) })
   ] }) });
 }
-const Nt = T.find((n) => n.slug === "lists");
-function Er() {
+const Nt = P.find((n) => n.slug === "lists");
+function Cr() {
   return /* @__PURE__ */ t(O, { title: Nt.title, lede: Nt.lede, children: /* @__PURE__ */ t(b, { label: "List", block: !0, children: /* @__PURE__ */ s(Nn, { children: [
     /* @__PURE__ */ t(lt, { to: "/__ui/lists", title: "hello", meta: "en" }),
     /* @__PURE__ */ t(lt, { to: "/__ui/lists", title: "about", meta: "da" })
   ] }) }) });
 }
-const St = T.find((n) => n.slug === "overlays");
-function Cr() {
+const St = P.find((n) => n.slug === "overlays");
+function zr() {
   const [n, r] = f(!1);
   return /* @__PURE__ */ t(hn, { children: /* @__PURE__ */ t(O, { title: St.title, lede: St.lede, children: /* @__PURE__ */ s(Ee, { children: [
     /* @__PURE__ */ s(b, { label: "ConfirmDialog", children: [
@@ -2216,8 +2225,8 @@ function Cr() {
     /* @__PURE__ */ t(b, { label: "Tooltip", children: /* @__PURE__ */ t(gn, { label: "Sample tooltip", children: /* @__PURE__ */ t(ue, { variant: "secondary", children: "Hover" }) }) })
   ] }) }) });
 }
-const Mt = T.find((n) => n.slug === "sections");
-function zr() {
+const Mt = P.find((n) => n.slug === "sections");
+function Rr() {
   return /* @__PURE__ */ s(O, { title: Mt.title, lede: Mt.lede, children: [
     /* @__PURE__ */ t(b, { label: "PageHeader", block: !0, children: /* @__PURE__ */ t(
       mn,
@@ -2229,13 +2238,13 @@ function zr() {
       }
     ) }),
     /* @__PURE__ */ t(b, { label: "Panel", block: !0, children: /* @__PURE__ */ t(bn, { children: /* @__PURE__ */ s(xn, { children: [
-      /* @__PURE__ */ t(v, { children: "First line" }),
-      /* @__PURE__ */ t(v, { children: "Second line" })
+      /* @__PURE__ */ t($, { children: "First line" }),
+      /* @__PURE__ */ t($, { children: "Second line" })
     ] }) }) })
   ] });
 }
-const Et = T.find((n) => n.slug === "surfaces");
-function Rr() {
+const Et = P.find((n) => n.slug === "surfaces");
+function Ir() {
   return /* @__PURE__ */ s(O, { title: Et.title, lede: Et.lede, children: [
     /* @__PURE__ */ t(b, { label: "Space", children: /* @__PURE__ */ s("div", { className: "x78zum5 x1a02dak xuk3077 x1n5939r", children: [
       /* @__PURE__ */ t(ee, { label: "xs", bar: V.xs }),
@@ -2250,12 +2259,12 @@ function Rr() {
       /* @__PURE__ */ t(ee, { label: "md", box: V.radiusMd })
     ] }) }),
     /* @__PURE__ */ t(b, { label: "Backgrounds", children: /* @__PURE__ */ s("div", { className: "xk7greg x13oidi x86kjsi", children: [
-      /* @__PURE__ */ t(v, { size: "xs", tone: "muted", mono: !0, children: "bgApp" }),
+      /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: "bgApp" }),
       /* @__PURE__ */ s("div", { className: "xk7greg x13oidi x1jtkcfc", children: [
-        /* @__PURE__ */ t(v, { size: "xs", tone: "muted", mono: !0, children: "bgSidebar" }),
+        /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: "bgSidebar" }),
         /* @__PURE__ */ s("div", { className: "xk7greg x13oidi x1d0qn7y", children: [
-          /* @__PURE__ */ t(v, { size: "xs", tone: "muted", mono: !0, children: "bgPanel" }),
-          /* @__PURE__ */ t("div", { className: "xk7greg x13oidi x1hb2obb xmkeg23 x1y0btm7 x1j0qoeq", children: /* @__PURE__ */ t(v, { size: "xs", mono: !0, children: "bgSurface" }) })
+          /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: "bgPanel" }),
+          /* @__PURE__ */ t("div", { className: "xk7greg x13oidi x1hb2obb xmkeg23 x1y0btm7 x1j0qoeq", children: /* @__PURE__ */ t($, { size: "xs", mono: !0, children: "bgSurface" }) })
         ] })
       ] })
     ] }) })
@@ -2268,7 +2277,7 @@ function ee({
 }) {
   return /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf x1cy8zhl x3smv4v", children: [
     /* @__PURE__ */ t("div", { ...Rt(r ? V.bar : V.radiusBox, r, o) }),
-    /* @__PURE__ */ t(v, { size: "xs", tone: "muted", mono: !0, children: n })
+    /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: n })
   ] });
 }
 const V = {
@@ -2319,41 +2328,41 @@ const V = {
     kaIpWk: "x13oidi",
     $$css: !0
   }
-}, Ct = T.find((n) => n.slug === "type");
-function Ir() {
+}, Ct = P.find((n) => n.slug === "type");
+function _r() {
   return /* @__PURE__ */ s(O, { title: Ct.title, lede: Ct.lede, children: [
-    /* @__PURE__ */ t(b, { label: "display", children: /* @__PURE__ */ t(v, { size: "display", weight: "semibold", children: "Display" }) }),
-    /* @__PURE__ */ t(b, { label: "xl", children: /* @__PURE__ */ t(v, { size: "xl", weight: "semibold", children: "Title" }) }),
-    /* @__PURE__ */ t(b, { label: "lg", children: /* @__PURE__ */ t(v, { size: "lg", weight: "medium", children: "Heading" }) }),
-    /* @__PURE__ */ t(b, { label: "md", children: /* @__PURE__ */ t(v, { children: "Body" }) }),
-    /* @__PURE__ */ t(b, { label: "sm", children: /* @__PURE__ */ t(v, { size: "sm", children: "Small" }) }),
-    /* @__PURE__ */ t(b, { label: "xs", children: /* @__PURE__ */ t(v, { size: "xs", weight: "semibold", children: "Overline" }) }),
-    /* @__PURE__ */ t(b, { label: "muted", children: /* @__PURE__ */ t(v, { tone: "muted", size: "sm", children: "Muted" }) }),
-    /* @__PURE__ */ t(b, { label: "danger", children: /* @__PURE__ */ t(v, { tone: "danger", children: "Danger" }) }),
-    /* @__PURE__ */ t(b, { label: "success", children: /* @__PURE__ */ t(v, { tone: "success", children: "Success" }) }),
-    /* @__PURE__ */ t(b, { label: "mono", children: /* @__PURE__ */ t(v, { mono: !0, size: "sm", children: "content/blog/hello.mdx" }) })
+    /* @__PURE__ */ t(b, { label: "display", children: /* @__PURE__ */ t($, { size: "display", weight: "semibold", children: "Display" }) }),
+    /* @__PURE__ */ t(b, { label: "xl", children: /* @__PURE__ */ t($, { size: "xl", weight: "semibold", children: "Title" }) }),
+    /* @__PURE__ */ t(b, { label: "lg", children: /* @__PURE__ */ t($, { size: "lg", weight: "medium", children: "Heading" }) }),
+    /* @__PURE__ */ t(b, { label: "md", children: /* @__PURE__ */ t($, { children: "Body" }) }),
+    /* @__PURE__ */ t(b, { label: "sm", children: /* @__PURE__ */ t($, { size: "sm", children: "Small" }) }),
+    /* @__PURE__ */ t(b, { label: "xs", children: /* @__PURE__ */ t($, { size: "xs", weight: "semibold", children: "Overline" }) }),
+    /* @__PURE__ */ t(b, { label: "muted", children: /* @__PURE__ */ t($, { tone: "muted", size: "sm", children: "Muted" }) }),
+    /* @__PURE__ */ t(b, { label: "danger", children: /* @__PURE__ */ t($, { tone: "danger", children: "Danger" }) }),
+    /* @__PURE__ */ t(b, { label: "success", children: /* @__PURE__ */ t($, { tone: "success", children: "Success" }) }),
+    /* @__PURE__ */ t(b, { label: "mono", children: /* @__PURE__ */ t($, { mono: !0, size: "sm", children: "content/blog/hello.mdx" }) })
   ] });
 }
-const _r = {
+const Ar = {
   colors: zn,
-  type: Ir,
-  surfaces: Rr,
-  sections: zr,
+  type: _r,
+  surfaces: Ir,
+  sections: Rr,
   buttons: Cn,
-  fields: Mr,
-  lists: Er,
-  overlays: Cr,
-  feedback: Sr,
-  devbar: Ar
+  fields: Er,
+  lists: Cr,
+  overlays: zr,
+  feedback: Mr,
+  devbar: Lr
 };
-function Ar() {
-  const n = T.find((r) => r.slug === "devbar");
-  return /* @__PURE__ */ t(O, { title: n.title, lede: n.lede, children: /* @__PURE__ */ t(Nr, {}) });
+function Lr() {
+  const n = P.find((r) => r.slug === "devbar");
+  return /* @__PURE__ */ t(O, { title: n.title, lede: n.lede, children: /* @__PURE__ */ t(Sr, {}) });
 }
-const zt = T.map((n) => ({
+const zt = P.map((n) => ({
   ...n,
-  Page: _r[n.slug]
-})), Lr = [{
+  Page: Ar[n.slug]
+})), Br = [{
   value: "system",
   label: "System"
 }, {
@@ -2362,25 +2371,25 @@ const zt = T.map((n) => ({
 }, {
   value: "dark",
   label: "Dark"
-}], Br = ["Foundations", "Components", "Host"];
-function qr() {
+}], Pr = ["Foundations", "Components", "Host"];
+function jr() {
   const {
     pathname: n
-  } = $n(), r = n.replace(/\/$/, "") || "/", o = r === "/__ui" ? void 0 : r.slice(6), a = Mn(o), {
+  } = vn(), r = n.replace(/\/$/, "") || "/", o = r === "/__ui" ? void 0 : r.slice(6), a = Mn(o), {
     preference: d,
     setPreference: m
-  } = vn();
+  } = $n();
   if (r !== `/__ui/${a}`)
     return /* @__PURE__ */ t(kn, { to: `/__ui/${a}`, replace: !0 });
   const u = zt.find((p) => p.slug === a).Page;
   return /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf x1ov3xa9 x86kjsi xqjzbou xnezs1t", children: [
     /* @__PURE__ */ s("header", { className: "x78zum5 x6s0dn4 x1qughib x11cgr9k x173sf5p x15jjofa xso031l x1q0q8m5 x4b2zrn x1hb2obb", children: [
-      /* @__PURE__ */ t(v, { as: "p", size: "lg", weight: "semibold", children: "UI kit" }),
-      /* @__PURE__ */ t("div", { className: "x78zum5 x1a02dak x3smv4v", role: "group", "aria-label": "Theme", children: Lr.map((p) => /* @__PURE__ */ t(ue, { variant: d === p.value ? "primary" : "secondary", "aria-pressed": d === p.value, onClick: () => m(p.value), children: p.label }, p.value)) })
+      /* @__PURE__ */ t($, { as: "p", size: "lg", weight: "semibold", children: "UI kit" }),
+      /* @__PURE__ */ t("div", { className: "x78zum5 x1a02dak x3smv4v", role: "group", "aria-label": "Theme", children: Br.map((p) => /* @__PURE__ */ t(ue, { variant: d === p.value ? "primary" : "secondary", "aria-pressed": d === p.value, onClick: () => m(p.value), children: p.label }, p.value)) })
     ] }),
     /* @__PURE__ */ s("div", { className: "x78zum5 x98rzlu x2lwn1j", children: [
-      /* @__PURE__ */ t("nav", { className: "x16grhtn x2lah0s x1odjw0f xk7greg x1jtkcfc xs1s249 x32b0ac xpozbvl", "aria-label": "UI kit", children: Br.map((p) => /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf xpw8yq9 x31bu4j", children: [
-        /* @__PURE__ */ t(v, { as: "p", size: "xs", tone: "muted", weight: "semibold", children: p }),
+      /* @__PURE__ */ t("nav", { className: "x16grhtn x2lah0s x1odjw0f xk7greg x1jtkcfc xs1s249 x32b0ac xpozbvl", "aria-label": "UI kit", children: Pr.map((p) => /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf xpw8yq9 x31bu4j", children: [
+        /* @__PURE__ */ t($, { as: "p", size: "xs", tone: "muted", weight: "semibold", children: p }),
         zt.filter((c) => c.group === p).map((c) => /* @__PURE__ */ t(wn, { to: `/__ui/${c.slug}`, className: "x1lliihq x1heor9g x1hl2dhg", children: ({
           isActive: R
         }) => /* @__PURE__ */ t("span", { ...{
@@ -2397,5 +2406,5 @@ function qr() {
   ] });
 }
 export {
-  qr as UiKitApp
+  jr as UiKitApp
 };