@backmatter/studio 0.0.8 → 0.0.10

package/dist/chunks/UiKitApp-BxvTwsko.js

@@ -0,0 +1,2410 @@
+import { jsxs as s, jsx as t, Fragment as U } from "react/jsx-runtime";
+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-BKKEkAq7.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-8rjkfEXl.js";
+function O({
+  title: n,
+  lede: r,
+  children: o
+}) {
+  return /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf x14n5cft x1kozois", children: [
+    /* @__PURE__ */ s("header", { className: "x78zum5 xdt5ytf x1ndbd79 xiky8lt", children: [
+      /* @__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 })
+  ] });
+}
+function Ee({
+  children: n
+}) {
+  return /* @__PURE__ */ t("div", { className: "xrvj5dj xnby9oq xwaa2ar xe93d63 x7a106z xcqouw7", children: n });
+}
+function Sn({
+  children: n
+}) {
+  return /* @__PURE__ */ t("div", { className: "x78zum5 x1a02dak x6s0dn4 x3smv4v", children: n });
+}
+function b({
+  label: n,
+  children: r
+}) {
+  return /* @__PURE__ */ s("section", { className: "x78zum5 xdt5ytf x1ndbd79 xeuugli", children: [
+    /* @__PURE__ */ t("h2", { className: "x1ghz6dp x1l3a84d x1s688f xjat59b xwn7fz2 xqjzbou", children: n }),
+    /* @__PURE__ */ t("div", { className: "x78zum5 xdt5ytf x1qjc9v5 x3smv4v xh8yej3 xeuugli", children: r })
+  ] });
+}
+const P = [
+  {
+    slug: "colors",
+    title: "Colors",
+    group: "Foundations",
+    lede: "Color tokens paint surfaces, text, and status, and follow the active theme."
+  },
+  {
+    slug: "type",
+    title: "Type",
+    group: "Foundations",
+    lede: "Text sizes and tones for titles, body copy, and metadata."
+  },
+  {
+    slug: "surfaces",
+    title: "Surfaces",
+    group: "Foundations",
+    lede: "Spacing, radii, and the background roles stacked the way a page stacks them."
+  },
+  {
+    slug: "sections",
+    title: "Sections",
+    group: "Foundations",
+    lede: "Page header, panel, and stack are how a settings page is built."
+  },
+  {
+    slug: "buttons",
+    title: "Buttons",
+    group: "Components",
+    lede: "Variants for a primary action, a secondary action, a quiet action, and danger."
+  },
+  {
+    slug: "fields",
+    title: "Fields",
+    group: "Components",
+    lede: "Text, select, and multiline fields, including a hint and a disabled control."
+  },
+  {
+    slug: "lists",
+    title: "Lists",
+    group: "Components",
+    lede: "A list of rows that link to a document."
+  },
+  {
+    slug: "overlays",
+    title: "Overlays",
+    group: "Components",
+    lede: "A confirm dialog and a tooltip."
+  },
+  {
+    slug: "feedback",
+    title: "Feedback",
+    group: "Components",
+    lede: "Status bars, and the success and danger text tones."
+  },
+  {
+    slug: "devbar",
+    title: "DevBar",
+    group: "Host",
+    lede: "The host bar a site mounts. These specimens do not call the preview API."
+  }
+];
+function Mn(n) {
+  const r = P.find((o) => o.slug === n);
+  return r ? r.slug : "colors";
+}
+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 }),
+    /* @__PURE__ */ t(ue, { variant: n, disabled: !0, children: "disabled" }),
+    /* @__PURE__ */ t(Zt, { variant: n, to: "/__ui/buttons", children: "link" })
+  ] }) }, n)) }) });
+}
+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) }),
+    /* @__PURE__ */ t("figcaption", { className: "x1ar5oo6 x10qp4ay x111yfic", children: n })
+  ] }, n)) }) });
+}
+const w = {
+  chip: {
+    kZKoxP: "xy75621",
+    kaIpWk: "x13oidi",
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "x1j0qoeq",
+    $$css: !0
+  },
+  bgApp: {
+    kWkggS: "x86kjsi",
+    $$css: !0
+  },
+  bgSidebar: {
+    kWkggS: "x1jtkcfc",
+    $$css: !0
+  },
+  bgPanel: {
+    kWkggS: "x1d0qn7y",
+    $$css: !0
+  },
+  bgPanelInset: {
+    kWkggS: "x69djma",
+    $$css: !0
+  },
+  bgSurface: {
+    kWkggS: "x1hb2obb",
+    $$css: !0
+  },
+  bgHover: {
+    kWkggS: "xofhlkk",
+    $$css: !0
+  },
+  bgActive: {
+    kWkggS: "xaaunc5",
+    $$css: !0
+  },
+  bgInput: {
+    kWkggS: "xawfm1v",
+    $$css: !0
+  },
+  bgStatus: {
+    kWkggS: "x1f2181x",
+    $$css: !0
+  },
+  text: {
+    kWkggS: "x1bldc27",
+    $$css: !0
+  },
+  textMuted: {
+    kWkggS: "x1nc039n",
+    $$css: !0
+  },
+  textInverse: {
+    kWkggS: "xoor36a",
+    $$css: !0
+  },
+  border: {
+    kWkggS: "xz7mq1p",
+    $$css: !0
+  },
+  accent: {
+    kWkggS: "xrb6rkd",
+    $$css: !0
+  },
+  accentHover: {
+    kWkggS: "x1iiistc",
+    $$css: !0
+  },
+  accentMuted: {
+    kWkggS: "xkkeql0",
+    $$css: !0
+  },
+  danger: {
+    kWkggS: "x1qc5ydl",
+    $$css: !0
+  },
+  success: {
+    kWkggS: "x1c15u7q",
+    $$css: !0
+  },
+  overlay: {
+    kWkggS: "xplmcw3",
+    $$css: !0
+  },
+  focus: {
+    kWkggS: "xc54rw4",
+    $$css: !0
+  }
+}, Rn = [["bgApp", w.bgApp], ["bgSidebar", w.bgSidebar], ["bgPanel", w.bgPanel], ["bgPanelInset", w.bgPanelInset], ["bgSurface", w.bgSurface], ["bgHover", w.bgHover], ["bgActive", w.bgActive], ["bgInput", w.bgInput], ["bgStatus", w.bgStatus], ["text", w.text], ["textMuted", w.textMuted], ["textInverse", w.textInverse], ["border", w.border], ["accent", w.accent], ["accentHover", w.accentHover], ["accentMuted", w.accentMuted], ["danger", w.danger], ["success", w.success], ["overlay", w.overlay], ["focus", w.focus]];
+function ut(n, r, o, a = "en") {
+  if (!(n != null && n.trim())) return;
+  const d = n.replace(/\/+$/, "");
+  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 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 Tn(n, r) {
+  return {
+    x: r.left + r.width / 2 - n.left,
+    y: r.top + r.height / 2 - n.top
+  };
+}
+function Wn(n, r) {
+  return Math.abs(r - n) > 1;
+}
+function se() {
+  return typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Hn() {
+  if (typeof sessionStorage > "u") return null;
+  try {
+    const n = sessionStorage.getItem(It);
+    return n === "live" || n === "preview" ? n : null;
+  } catch {
+    return null;
+  }
+}
+const ht = "backmatter.devbar.highlight", pt = "backmatter.devbar.agent-preview", Dn = "backmatter-theme";
+function qn(n) {
+  const r = n == null ? void 0 : n.getItem(Dn);
+  return r === "light" || r === "dark" || r === "system" ? r : "system";
+}
+function jn(n, r) {
+  return n === "system" ? r ? "dark" : "light" : n;
+}
+function gt(n, r, o) {
+  const a = n == null ? void 0 : n.getItem(r);
+  return a === "1" ? !0 : a === "0" ? !1 : o;
+}
+function mt(n, r, o) {
+  n == null || n.setItem(r, o ? "1" : "0");
+}
+function De(n) {
+  if (!(typeof sessionStorage > "u"))
+    try {
+      sessionStorage.setItem(It, n);
+    } catch {
+    }
+}
+const Fn = 20, ft = 16, Kn = 12, Vn = 8, _t = 12;
+function Un(n) {
+  if (!n) return null;
+  const r = Number.parseInt(n.split(".")[0] ?? "", 10);
+  return Number.isFinite(r) ? r : null;
+}
+function At(n) {
+  return /Macintosh|Mac OS X/.test(n);
+}
+function On(n) {
+  return !At(n) || /Firefox\//.test(n) ? !1 : /Chrome\/|Chromium\/|Edg\/|OPR\/|Brave\//.test(n);
+}
+function Ve(n, r) {
+  if (/Windows/.test(n)) return Vn;
+  if (!At(n)) return _t;
+  const o = Un(r);
+  return On(n) ? o !== null && o >= 26 ? Fn : (o !== null && o >= 15, ft) : Kn;
+}
+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) {
+  if (n !== void 0 && Number.isFinite(n) && n >= 0) return n;
+  if (typeof document < "u") {
+    const r = getComputedStyle(document.documentElement).getPropertyValue("--bm-preview-frame-radius").trim();
+    if (r) {
+      const o = Number.parseFloat(r);
+      if (Number.isFinite(o) && o >= 0) return o;
+    }
+  }
+  return Xn();
+}
+const Lt = "oklch(0.56 0.21 295)";
+function Yn({
+  active: n,
+  radius: r
+}) {
+  const o = k(null), a = k(null), [d, m] = f(() => bt(r));
+  return te(() => {
+    if (r !== void 0) {
+      m(bt(r));
+      return;
+    }
+    const h = navigator.userAgent;
+    m(Ve(h)), Gn().then((u) => {
+      u !== void 0 && m(Ve(h, u));
+    });
+  }, [r]), te(() => {
+    const h = o.current, u = a.current;
+    a.current = n, !(!h || u === null || u || !n || se()) && h.animate(
+      [
+        { borderWidth: "3px" },
+        { borderWidth: "7px", offset: 0.5 },
+        { borderWidth: "3px" }
+      ],
+      { duration: 700, delay: 180, easing: he }
+    );
+  }, [n]), /* @__PURE__ */ s(U, { children: [
+    /* @__PURE__ */ t("style", { children: Zn }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: o,
+        className: be,
+        "data-backmatter-preview-frame": "",
+        "data-active": n ? "true" : "false",
+        style: { "--bm-preview-frame-radius": `${d}px` },
+        "aria-hidden": !0
+      }
+    )
+  ] });
+}
+const Zn = `
+.${be} {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482999;
+  box-sizing: border-box;
+  pointer-events: none;
+  border: 3px solid ${Lt};
+  border-radius: 0 0 var(--bm-preview-frame-radius, 12px) var(--bm-preview-frame-radius, 12px);
+  background: transparent;
+  clip-path: circle(0% at 100% 100%);
+  transition: clip-path ${Bn}ms ${Oe};
+}
+.${be}[data-active="true"] {
+  /* 150% is shorter than the viewport diagonal — the ring never reached the top. */
+  clip-path: circle(150vmax at 100% 100%);
+  transition: clip-path ${Ln}ms ${he} 80ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${be} {
+    transition: none;
+    clip-path: none;
+    opacity: 0;
+  }
+  .${be}[data-active="true"] {
+    opacity: 1;
+  }
+}
+`, e = "backmatter-devbar", Qn = "/api/backmatter/preview", Jn = 10, er = 360;
+function xt(n, r) {
+  return `${n}:${r.trim().toLowerCase()}`;
+}
+function tr({
+  label: n,
+  branch: r,
+  tree: o,
+  doc: a,
+  exiting: d,
+  chatOpen: m,
+  publishOpen: h,
+  changeCount: u,
+  lineDiff: p,
+  activity: c = null,
+  previewEntryPath: R = Qn,
+  siteMode: y = "preview",
+  frame: D = !1,
+  frameRadius: X,
+  entrance: I = "auto",
+  dashboardHref: N,
+  onExit: C,
+  onEnterPreview: S,
+  onToggleChat: E,
+  onTogglePublish: g,
+  onStop: M,
+  onViewLive: q,
+  onPublishedDone: _,
+  onSignOut: j,
+  onPublishAnchor: Y
+}) {
+  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((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) => {
+    },
+    onEscape: () => {
+    },
+    openDashboard: () => !1,
+    openShortcuts: () => {
+    }
+  }), 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) {
+      Le(null);
+      return;
+    }
+    let l = !1;
+    return at(i).then(({ workspace: v }) => {
+      l || (Le(v.slug), jt(v.locales[0] ?? "en"));
+    }).catch(() => {
+      l || Le(null);
+    }), () => {
+      l = !0;
+    };
+  }, [a == null ? void 0 : a.workspaceId]);
+  const Be = yn(
+    () => ut(N, a, Ae, tt),
+    [N, a, Ae, tt]
+  ), Ft = Ke((i) => {
+    Z.current = i, !(i && !(i.getRootNode() instanceof ShadowRoot)) && xe(i);
+  }, []), 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)), 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");
+    return i.addEventListener("change", l), () => i.removeEventListener("change", l);
+  }, [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, 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();
+  }, []), z(() => {
+    if (oe.current && oe.current !== y && !d) {
+      oe.current = null, De(y), Ce(y);
+      return;
+    }
+    oe.current || Ce(y), oe.current === y && (oe.current = null);
+  }, [y, d]), z(() => {
+    if (!F) return;
+    function i(l) {
+      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 = T.current;
+    !i || !l || F !== "settings" || cr(i, l);
+  }, [F, ie, Te]), te(() => {
+    if (!Y) return;
+    const i = A.current;
+    if (!h || !i) {
+      Y(null);
+      return;
+    }
+    const l = () => Y(i.getBoundingClientRect());
+    return l(), window.addEventListener("resize", l), window.addEventListener("scroll", l, !0), () => {
+      window.removeEventListener("resize", l), window.removeEventListener("scroll", l, !0);
+    };
+  }, [h, Y, Te, ie]), z(() => {
+    function i(l) {
+      if (!ar(l.composedPath()[0] ?? null)) {
+        if ((l.metaKey || l.ctrlKey) && l.key === ".") {
+          l.preventDefault(), W.current.toggleHidden();
+          return;
+        }
+        if ((l.metaKey || l.ctrlKey) && l.shiftKey && l.key.toLowerCase() === "p") {
+          l.preventDefault();
+          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 (!W.current.openDashboard()) return;
+          l.preventDefault();
+          return;
+        }
+        if (l.key === "?" && !l.metaKey && !l.ctrlKey && !l.altKey) {
+          l.preventDefault(), W.current.openShortcuts();
+          return;
+        }
+        if (l.key === "Escape") {
+          W.current.onEscape();
+          return;
+        }
+        Jt(l) === "chat" && L(null);
+      }
+    }
+    return document.addEventListener("keydown", i, !0), () => document.removeEventListener("keydown", i, !0);
+  }, []), te(() => {
+    var ot;
+    const i = Z.current;
+    if (!ne || !i || !(i.getRootNode() instanceof ShadowRoot)) return;
+    if (!Ye.current) {
+      Ye.current = !0;
+      const ae = I !== "play" && Hn() === y;
+      if (I !== "play" && De(y), ae)
+        (ot = ce.current) == null || ot.setAttribute("data-settled", "true"), requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            var ye;
+            return (ye = ce.current) == null ? void 0 : ye.removeAttribute("data-settled");
+          });
+        });
+      else if (se())
+        i.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, easing: "ease", fill: "backwards" });
+      else {
+        const ye = i.animate(
+          [{ transform: "translateY(100%)" }, { transform: "none" }],
+          { duration: 460, easing: he, delay: 600, fill: "backwards" }
+        );
+        ye.id = "rise", G.current && qe(G.current, { delay: 740 });
+      }
+    }
+    const l = !Xe.current;
+    Xe.current = !0;
+    const H = i.getAnimations().some((ae) => ae.id === "w") ? i.offsetWidth : Ge.current;
+    i.getAnimations().filter((ae) => ae.id === "w").forEach((ae) => ae.cancel());
+    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() || !Wn(H, J)) return;
+    const Yt = i.animate(
+      [{ width: `${H}px` }, { width: `${J}px` }],
+      { duration: 380, easing: In }
+    );
+    Yt.id = "w";
+  }, [ne, Te, I, y]);
+  const ke = (c == null ? void 0 : c.type) === "published" ? c.sha : "";
+  te(() => {
+    const i = Q.current;
+    !ke || !i || se() || i.animate(
+      [
+        { transform: "scale(0.5)", opacity: 0 },
+        { transform: "none", opacity: 1 }
+      ],
+      { duration: 420, delay: 140, easing: "cubic-bezier(.34, 1.56, .64, 1)", fill: "backwards" }
+    );
+  }, [ke]), z(() => {
+    if (!ke || !_) return;
+    const i = window.setTimeout(_, 3200);
+    return () => window.clearTimeout(i);
+  }, [ke, _]);
+  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), Tt(i);
+    const l = Z.current;
+    if (!l || !(l.getRootNode() instanceof ShadowRoot)) return;
+    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 }],
+        { duration: 200, easing: "ease", fill: "forwards" }
+      );
+      B.id = i ? "hide" : "rise";
+      return;
+    }
+    if (i) {
+      const B = l.animate(
+        [{ transform: "translateY(0)" }, { transform: "translateY(100%)" }],
+        { duration: 220, easing: Oe, fill: "forwards" }
+      );
+      B.id = "hide";
+      return;
+    }
+    const J = l.animate(
+      [{ transform: "translateY(100%)" }, { transform: "none" }],
+      { duration: 460, easing: he, fill: "backwards" }
+    );
+    J.id = "rise", G.current && qe(G.current, { delay: 140 });
+  }
+  W.current.openDashboard = () => N ? ((async () => {
+    let i = Be ?? N;
+    if (a != null && a.workspaceId && a.type && a.slug && !Ae)
+      try {
+        const { workspace: l } = await at(a.workspaceId);
+        i = ut(N, a, l.slug, l.locales[0] ?? "en") ?? i;
+      } catch {
+      }
+    location.assign(i);
+  })(), !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;
+    }
+    if (h) {
+      g();
+      return;
+    }
+    (c == null ? void 0 : c.type) === "editing" && (M == null || M());
+  };
+  function rt(i) {
+    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(), $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(
+    nr,
+    {
+      mode: de,
+      disabled: Gt,
+      buttonRef: x,
+      onClick: (i) => We(de === "preview" ? "live" : "preview", i.currentTarget)
+    }
+  );
+  let ge;
+  (c == null ? void 0 : c.type) === "editing" ? ge = /* @__PURE__ */ s(U, { children: [
+    we,
+    /* @__PURE__ */ t("span", { className: `${e}-spin`, "aria-hidden": !0 }),
+    /* @__PURE__ */ t("span", { className: `${e}-shimmer`, children: "Agent is editing" }),
+    /* @__PURE__ */ t("code", { className: `${e}-field`, children: c.field }),
+    /* @__PURE__ */ s("button", { type: "button", className: `${e}-btn`, onClick: () => M == null ? void 0 : M(), children: [
+      "Stop",
+      /* @__PURE__ */ t("kbd", { className: `${e}-kbd`, children: "esc" })
+    ] })
+  ] }) : (c == null ? void 0 : c.type) === "publishing" ? ge = /* @__PURE__ */ s(U, { children: [
+    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(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: [
+    we,
+    /* @__PURE__ */ t("span", { ref: Q, className: `${e}-check`, "aria-hidden": !0, children: "✓" }),
+    /* @__PURE__ */ s("span", { className: `${e}-published`, children: [
+      "Published ",
+      /* @__PURE__ */ t("code", { className: `${e}-field`, children: c.sha }),
+      /* @__PURE__ */ s("span", { className: `${e}-when`, children: [
+        " · ",
+        c.when
+      ] })
+    ] }),
+    /* @__PURE__ */ t("button", { type: "button", className: `${e}-btn`, onClick: () => (q ?? C)(), children: "View live" }),
+    /* @__PURE__ */ t(
+      vt,
+      {
+        pressed: m,
+        disabled: !a,
+        shortcut: Fe(),
+        onClick: (i) => rt(i.currentTarget)
+      }
+    )
+  ] }) : ge = /* @__PURE__ */ s(U, { children: [
+    we,
+    /* @__PURE__ */ t(
+      br,
+      {
+        label: n,
+        doc: a,
+        dashboardHref: Be,
+        bar: ie,
+        open: F === "page",
+        expanded: F === "page",
+        onToggle: Ot
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: `${e}-rule`, "aria-hidden": !0 }),
+    /* @__PURE__ */ t(
+      vt,
+      {
+        pressed: m,
+        disabled: !a,
+        shortcut: Fe(),
+        onClick: (i) => rt(i.currentTarget)
+      }
+    ),
+    /* @__PURE__ */ t(
+      rr,
+      {
+        buttonRef: A,
+        open: h,
+        count: u,
+        disabled: Xt,
+        onClick: Vt
+      }
+    ),
+    /* @__PURE__ */ t(
+      sr,
+      {
+        buttonRef: T,
+        open: F === "settings",
+        onClick: () => Ut("main")
+      }
+    )
+  ] });
+  const it = /* @__PURE__ */ s(U, { children: [
+    /* @__PURE__ */ t("style", { children: wr }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        ref: ce,
+        className: `${e}-root`,
+        "data-mode": de,
+        "data-branch": r || void 0,
+        children: [
+          D ? /* @__PURE__ */ t(Yn, { active: de === "preview", radius: X }) : null,
+          /* @__PURE__ */ s(
+            "footer",
+            {
+              ref: Ft,
+              "aria-label": "Backmatter",
+              "aria-hidden": ze || void 0,
+              inert: ze ? !0 : void 0,
+              "data-hidden": ze ? "true" : "false",
+              "data-branch": r || void 0,
+              className: e,
+              children: [
+                /* @__PURE__ */ s("div", { className: `${e}-clip`, children: [
+                  /* @__PURE__ */ t("span", { className: `${e}-flood`, "aria-hidden": !0 }),
+                  /* @__PURE__ */ t("div", { ref: G, className: `${e}-row`, children: ge }),
+                  (c == null ? void 0 : c.type) === "publishing" ? /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: `${e}-progress`,
+                      style: { width: `${Math.max(0, Math.min(1, c.progress)) * 100}%` },
+                      "aria-hidden": !0
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ t("div", { className: `${e}-sr`, "aria-live": "polite", children: Pe.announce })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            lr,
+            {
+              open: F === "settings",
+              pane: Ht,
+              hostName: Dt,
+              branch: r,
+              bar: ie,
+              highlightBlocks: _e,
+              previewAgent: Je,
+              dashboardHref: Be,
+              onHighlight: (i) => {
+                Qe(i), mt(je(), ht, i);
+              },
+              onPreviewAgent: (i) => {
+                et(i), mt(je(), pt, i);
+              },
+              onShortcuts: () => $e("shortcuts"),
+              onBack: () => $e("main"),
+              onDashboard: () => {
+                W.current.openDashboard();
+              },
+              onHide: () => nt(!0),
+              onSwitchBranch: r ? () => L("branch") : void 0,
+              onSignOut: j
+            }
+          ),
+          r ? /* @__PURE__ */ t(
+            xr,
+            {
+              branch: r,
+              tree: o,
+              workspaceId: (a == null ? void 0 : a.workspaceId) ?? null,
+              previewEntryPath: R,
+              bar: ie,
+              open: F === "branch",
+              onClose: () => L(null)
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ s("div", { ref: re, className: `${e}-host`, "data-backmatter-devbar": "", children: [
+    /* @__PURE__ */ t("style", { children: kr }),
+    ne ? Me(it, ne) : /* @__PURE__ */ t(
+      "template",
+      {
+        shadowrootmode: "open",
+        children: it
+      }
+    )
+  ] });
+}
+function nr({
+  mode: n,
+  disabled: r,
+  buttonRef: o,
+  onClick: a
+}) {
+  const d = n === "preview";
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      "data-mode-button": "",
+      className: `${e}-mode`,
+      "aria-pressed": d,
+      "aria-keyshortcuts": "Meta+Shift+P Control+Shift+P",
+      title: d ? "View the published site" : "View draft content",
+      disabled: r,
+      onClick: a,
+      children: [
+        /* @__PURE__ */ t(ir, { exit: d }),
+        d ? "Exit preview" : "Enter preview"
+      ]
+    }
+  );
+}
+function vt({
+  pressed: n,
+  disabled: r,
+  shortcut: o,
+  onClick: a
+}) {
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      className: `${e}-btn ${e}-agent${n ? ` ${e}-on` : ""}`,
+      "aria-pressed": n,
+      "aria-keyshortcuts": "Meta+J Control+J",
+      disabled: r,
+      onClick: a,
+      children: [
+        /* @__PURE__ */ t(en, {}),
+        /* @__PURE__ */ t("span", { children: "Agent" }),
+        /* @__PURE__ */ s("kbd", { className: `${e}-kbd`, children: [
+          o,
+          "J"
+        ] })
+      ]
+    }
+  );
+}
+function rr({
+  buttonRef: n,
+  open: r,
+  count: o,
+  disabled: a,
+  onClick: d
+}) {
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      ref: n,
+      type: "button",
+      className: `${e}-publish${r ? ` ${e}-publish-on` : ""}`,
+      "aria-haspopup": "dialog",
+      "aria-expanded": r ?? !1,
+      disabled: a,
+      onClick: d,
+      children: [
+        /* @__PURE__ */ t(nn, {}),
+        /* @__PURE__ */ s("span", { children: [
+          "Publish",
+          o > 0 ? /* @__PURE__ */ s("span", { className: `${e}-count`, children: [
+            " ",
+            o
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+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 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 = {}) {
+  const o = r.delay ?? 0;
+  if (se()) {
+    n.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease", fill: "backwards" });
+    return;
+  }
+  [...n.children].forEach((a, d) => {
+    a.animate(
+      [
+        { opacity: 0, transform: "translateY(4px)", filter: r.blur ? "blur(2px)" : "none" },
+        { opacity: 1, transform: "none", filter: "none" }
+      ],
+      { duration: 300, delay: o + d * 28, easing: he, fill: "backwards" }
+    );
+  });
+}
+function ar(n) {
+  if (!(n instanceof HTMLElement)) return !1;
+  const r = n.tagName;
+  return r === "INPUT" || r === "TEXTAREA" || r === "SELECT" ? !0 : n.isContentEditable;
+}
+function sr({
+  buttonRef: n,
+  open: r,
+  onClick: o
+}) {
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      ref: n,
+      type: "button",
+      className: `${e}-gear${r ? ` ${e}-gear-on` : ""}`,
+      "aria-label": "Settings",
+      "aria-haspopup": "dialog",
+      "aria-expanded": r,
+      onClick: o,
+      children: /* @__PURE__ */ t(rn, {})
+    }
+  );
+}
+function lr({
+  open: n,
+  pane: r,
+  hostName: o,
+  branch: a,
+  bar: d,
+  highlightBlocks: m,
+  previewAgent: h,
+  dashboardHref: u,
+  onHighlight: p,
+  onPreviewAgent: c,
+  onShortcuts: R,
+  onBack: y,
+  onDashboard: D,
+  onHide: X,
+  onSwitchBranch: I,
+  onSignOut: N
+}) {
+  const C = Ue(), [S, E] = f(null), g = Fe();
+  if (z(() => {
+    if (!n) return;
+    let _ = !1;
+    return on().then((j) => {
+      _ || E((j == null ? void 0 : j.user.email) ?? null);
+    }).catch(() => {
+      _ || E(null);
+    }), () => {
+      _ = !0;
+    };
+  }, [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(Pt, {}),
+      /* @__PURE__ */ t("span", { id: C, children: "Shortcuts" })
+    ] }) }),
+    /* @__PURE__ */ t(fe, { label: "Toggle preview", keys: `${g}⇧P` }),
+    /* @__PURE__ */ t(fe, { label: "Agent", keys: `${g}J` }),
+    /* @__PURE__ */ t(fe, { label: "Open in dashboard", keys: `${g}D` }),
+    /* @__PURE__ */ t(fe, { label: "Hide toolbar", keys: `${g}.` }),
+    /* @__PURE__ */ t(fe, { label: "Keyboard shortcuts", keys: "?" })
+  ] }) : /* @__PURE__ */ s("div", { role: "dialog", "aria-labelledby": C, className: `${e}-menu ${e}-settings`, children: [
+    /* @__PURE__ */ s("div", { className: `${e}-settings-head`, children: [
+      /* @__PURE__ */ t("span", { id: C, className: `${e}-settings-kicker`, children: "Settings" }),
+      M ? /* @__PURE__ */ t("span", { className: `${e}-settings-place`, children: M }) : null
+    ] }),
+    /* @__PURE__ */ s("div", { className: `${e}-settings-row`, children: [
+      /* @__PURE__ */ t(ur, {}),
+      /* @__PURE__ */ t("span", { children: "Highlight editable blocks" }),
+      /* @__PURE__ */ t($t, { on: m, label: "Highlight editable blocks", onClick: () => p(!m) })
+    ] }),
+    /* @__PURE__ */ s("div", { className: `${e}-settings-row`, children: [
+      /* @__PURE__ */ t(hr, {}),
+      /* @__PURE__ */ t("span", { children: "Preview when Agent edits" }),
+      /* @__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(pr, {}),
+      /* @__PURE__ */ t("span", { children: "Open in dashboard" }),
+      /* @__PURE__ */ s("kbd", { className: `${e}-kbd`, children: [
+        g,
+        "D"
+      ] })
+    ] }) : null,
+    I ? /* @__PURE__ */ s("button", { type: "button", className: `${e}-settings-action`, onClick: I, children: [
+      /* @__PURE__ */ t("span", { className: `${e}-settings-icon`, "aria-hidden": !0, children: /* @__PURE__ */ t(sn, {}) }),
+      /* @__PURE__ */ t("span", { children: "Switch branch" }),
+      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(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(mr, {}),
+      /* @__PURE__ */ t("span", { children: "Hide toolbar" }),
+      /* @__PURE__ */ s("kbd", { className: `${e}-kbd`, children: [
+        g,
+        "."
+      ] })
+    ] }),
+    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(fr, {}),
+        /* @__PURE__ */ t("span", { children: "Sign out" }),
+        S ? /* @__PURE__ */ t("span", { className: `${e}-settings-email`, children: S }) : null
+      ] })
+    ] }) : null
+  ] });
+  return Me(q, d);
+}
+function fe({ label: n, keys: r }) {
+  return /* @__PURE__ */ s("div", { className: `${e}-settings-action ${e}-settings-static`, children: [
+    /* @__PURE__ */ t("span", { children: n }),
+    /* @__PURE__ */ t("kbd", { className: `${e}-kbd`, children: r })
+  ] });
+}
+function $t({ on: n, label: r, onClick: o }) {
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      className: `${e}-switch${n ? ` ${e}-switch-on` : ""}`,
+      "aria-checked": n,
+      "aria-label": r,
+      onClick: o,
+      children: /* @__PURE__ */ t("span", { className: `${e}-knob` })
+    }
+  );
+}
+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 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 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 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 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 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 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 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" })
+  ] });
+}
+function je() {
+  try {
+    return typeof localStorage > "u" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+function kt(n) {
+  if (typeof document > "u") return;
+  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 br({
+  label: n,
+  doc: r,
+  dashboardHref: o,
+  bar: a,
+  open: d,
+  expanded: m,
+  onToggle: h
+}) {
+  const [u, p] = f([]), [c, R] = f(0), [y, D] = f(!1), [X, I] = f(!1), [N, C] = f(null), [S, E] = f(""), g = Ue(), M = k(null), q = k(null), _ = k(null), j = k(0), Y = k(/* @__PURE__ */ new Map());
+  z(() => {
+    d || E("");
+  }, [d]), te(() => {
+    var x;
+    d && ((x = _.current) == null || x.focus({ preventScroll: !0 }));
+  }, [d]), te(() => {
+    const x = M.current;
+    if (!d || !a || !x) return;
+    const A = () => dr(a, x);
+    return A(), window.addEventListener("resize", A), () => window.removeEventListener("resize", A);
+  }, [d, a]);
+  const le = Ke(
+    (x, A, T) => {
+      if (!r) return;
+      const Q = ++j.current, ne = S.trim(), pe = xt(r.workspaceId, ne);
+      A ? I(!0) : T != null && T.silent || D(!0), tn(r.workspaceId, {
+        q: ne || void 0,
+        limit: Jn,
+        offset: x,
+        current: r
+      }).then((re) => {
+        Q === j.current && (R(re.total), p((ie) => {
+          const xe = A ? [...ie, ...re.items] : re.items;
+          return Y.current.set(pe, { rows: xe, total: re.total }), xe;
+        }), C(null));
+      }).catch(() => {
+        Q === j.current && (A || Y.current.get(pe) || p([]), C("Couldn't load pages"));
+      }).finally(() => {
+        Q === j.current && (D(!1), I(!1));
+      });
+    },
+    [r, S]
+  );
+  z(() => {
+    if (!d || !r) return;
+    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: !!T }),
+      x ? 200 : 0
+    );
+    return () => window.clearTimeout(Q);
+  }, [d, r, S, le]);
+  function ce() {
+    const x = q.current;
+    !x || y || X || u.length >= c || x.scrollTop + x.clientHeight < x.scrollHeight - 48 || le(u.length, !0);
+  }
+  if (!r) return /* @__PURE__ */ t("span", { className: `${e}-crumb`, children: n });
+  const Z = !y && !N && u.length === 0, G = d ? /* @__PURE__ */ s(
+    "div",
+    {
+      id: g,
+      role: "menu",
+      "aria-label": "Pages",
+      className: `${e}-menu ${e}-page-menu`,
+      children: [
+        /* @__PURE__ */ t(
+          Bt,
+          {
+            query: S,
+            onQuery: E,
+            inputRef: _,
+            searchClassName: `${e}-page-search`,
+            showFilter: !0,
+            empty: Z,
+            emptyLabel: S.trim() ? "Nothing matches" : "No pages",
+            error: N,
+            loading: y && u.length === 0
+          }
+        ),
+        /* @__PURE__ */ s("div", { ref: q, className: `${e}-page-menu-list`, onScroll: ce, children: [
+          u.map((x) => /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: `${e}-option${x.current ? ` ${e}-current` : ""}`,
+              "aria-current": x.current ? "page" : void 0,
+              onClick: () => {
+                if (x.current || x.href === location.pathname) {
+                  h();
+                  return;
+                }
+                location.assign(x.href);
+              },
+              children: /* @__PURE__ */ t("span", { children: x.label })
+            },
+            x.key
+          )),
+          X ? /* @__PURE__ */ t("p", { className: `${e}-note`, children: "Loading more…" }) : null,
+          Z && !N ? /* @__PURE__ */ t("p", { className: `${e}-note`, children: S.trim() ? "Nothing matches" : "No pages" }) : null,
+          N ? /* @__PURE__ */ t("p", { className: `${e}-note ${e}-note-error`, children: N }) : null,
+          y && u.length === 0 ? /* @__PURE__ */ t("p", { className: `${e}-note ${e}-note-muted`, children: "Loading pages…" }) : null
+        ] }),
+        o ? /* @__PURE__ */ t("div", { className: `${e}-page-menu-foot`, children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: `${e}-option`,
+            onClick: () => location.assign(o),
+            children: /* @__PURE__ */ t("span", { children: "Open in dashboard" })
+          }
+        ) }) : null
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ s(U, { children: [
+    /* @__PURE__ */ s(
+      "button",
+      {
+        ref: M,
+        type: "button",
+        className: `${e}-btn ${e}-page${m ? ` ${e}-page-on` : ""}`,
+        "aria-haspopup": "menu",
+        "aria-expanded": m,
+        "aria-controls": g,
+        onClick: h,
+        children: [
+          /* @__PURE__ */ t("span", { children: n }),
+          /* @__PURE__ */ t(Pt, {})
+        ]
+      }
+    ),
+    G && a ? Me(G, a) : null
+  ] });
+}
+function xr({
+  branch: n,
+  tree: r,
+  workspaceId: o,
+  previewEntryPath: a,
+  bar: d,
+  open: m,
+  onClose: h
+}) {
+  const [u, p] = f(null), [c, R] = f(null), [y, D] = f(null), [X, I] = f(!1), [N, C] = f(""), S = Ue();
+  if (z(() => {
+    m || C("");
+  }, [m]), z(() => {
+    if (!m || !o || u) return;
+    let g = !1;
+    return an(o).then((M) => {
+      if (g) return;
+      const q = M.branches.map((_) => _.name);
+      q.includes(n) || q.unshift(n), p(q), R(M.defaultBranch);
+    }).catch(() => {
+      g || D("Couldn't load branches");
+    }), () => {
+      g = !0;
+    };
+  }, [m, o, u, n]), !m || !d) return 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,
+      {
+        query: N,
+        onQuery: C,
+        showFilter: ((u == null ? void 0 : u.length) ?? 0) > 7,
+        empty: (E == null ? void 0 : E.length) === 0,
+        emptyLabel: N.trim() ? "Nothing matches" : "No branches",
+        error: y,
+        loading: E === null && !y,
+        children: E == null ? void 0 : E.map((g) => /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: `${e}-option${g.label === n ? ` ${e}-current` : ""}`,
+            "aria-current": g.label === n ? "true" : void 0,
+            disabled: X,
+            onClick: () => {
+              if (g.label === n) {
+                h();
+                return;
+              }
+              I(!0), D(null), $r({
+                workspaceId: o,
+                branch: g.label,
+                tree: r,
+                redirect: location.pathname + location.search + location.hash,
+                previewEntryPath: a
+              }).catch((M) => {
+                I(!1), D(M instanceof Error ? M.message : "Couldn't switch branch");
+              });
+            },
+            children: [
+              /* @__PURE__ */ t("span", { children: g.label }),
+              g.label === c ? /* @__PURE__ */ t("span", { className: `${e}-meta`, children: "default" }) : null
+            ]
+          },
+          g.key
+        ))
+      }
+    ) : /* @__PURE__ */ t("p", { className: `${e}-note`, children: n }) }),
+    d
+  );
+}
+function Bt({
+  query: n,
+  onQuery: r,
+  inputRef: o,
+  searchClassName: a,
+  showFilter: d,
+  empty: m,
+  emptyLabel: h,
+  error: u,
+  loading: p,
+  children: c
+}) {
+  return /* @__PURE__ */ s(U, { children: [
+    d ? /* @__PURE__ */ t("div", { className: `${e}-page-menu-search`, children: /* @__PURE__ */ t(
+      "input",
+      {
+        ref: o,
+        value: n,
+        onChange: (R) => r(R.target.value),
+        placeholder: "Search files",
+        "aria-label": "Search files",
+        autoComplete: "off",
+        spellCheck: !1,
+        className: a
+      }
+    ) }) : null,
+    c ? /* @__PURE__ */ s(U, { children: [
+      u ? /* @__PURE__ */ t("p", { className: `${e}-note ${e}-note-error`, children: u }) : null,
+      p ? /* @__PURE__ */ t("p", { className: `${e}-note`, children: "Loading…" }) : null,
+      m && !u ? /* @__PURE__ */ t("p", { className: `${e}-note`, children: h }) : null,
+      c
+    ] }) : null
+  ] });
+}
+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 vr(n, r) {
+  const o = r.trim().toLowerCase();
+  return o ? n.filter((a) => a.label.toLowerCase().includes(o)) : [...n];
+}
+async function $r(n) {
+  const r = n.checkout ?? cn, o = n.ticket ?? ln, a = n.assign ?? ((h) => location.assign(h));
+  await r(n.workspaceId, n.branch);
+  let d;
+  try {
+    d = await o(n.workspaceId, {
+      redirect: n.redirect,
+      branch: n.branch,
+      tree: n.tree
+    });
+  } catch (h) {
+    const u = h instanceof Error ? h.message : "Couldn't open the branch";
+    throw new Error(`Checked out ${n.branch}, but the preview didn't update. ${u}`);
+  }
+  const m = n.previewEntryPath.includes("?") ? "&" : "?";
+  a(`${n.previewEntryPath}${m}ticket=${encodeURIComponent(d.ticket)}`);
+}
+const kr = `
+.${e}-host {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+}
+html.backmatter-pointing, html.backmatter-pointing * { cursor: crosshair !important; }
+html.backmatter-pointing [data-backmatter-panel],
+html.backmatter-pointing [data-backmatter-panel] *,
+html.backmatter-pointing [data-backmatter-devbar] { cursor: pointer !important; }
+html.backmatter-blocks [data-backmatter-block] {
+  outline: 1.5px solid oklch(0.56 0.21 295);
+  outline-offset: 2px;
+}
+`, wr = `
+.${e}-root {
+  --preview: ${Lt};
+  --preview-hover: oklch(0.50 0.20 295);
+  --preview-deep: oklch(0.48 0.20 295);
+  --preview-line: oklch(0.66 0.16 295);
+  --preview-outline: oklch(0.72 0.13 295);
+  --preview-ink: oklch(0.98 0.01 295);
+  --preview-ink-soft: oklch(0.88 0.05 295);
+  --preview-on-white: oklch(0.36 0.16 295);
+  --panel: #ffffff;
+  --line: #e7e7e4;
+  --line2: #d8d8d4;
+  --fg: #17171a;
+  --fg2: #5d5d62;
+  --fg3: #8e8e93;
+  --hover: #f3f3f1;
+  --live: oklch(0.66 0.13 150);
+  --shadow-live: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -8px rgba(0, 0, 0, 0.18);
+  --shadow-preview: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 28px -8px oklch(0.45 0.2 295 / 0.5);
+  --ease-out: ${he};
+  --ease-in: ${Oe};
+  --ox: 28px;
+  --oy: 20px;
+  color-scheme: light;
+  text-decoration: none;
+}
+.${e} {
+  all: initial;
+  position: var(--bm-devbar-position, fixed);
+  right: var(--bm-devbar-right, max(16px, env(safe-area-inset-right, 0px)));
+  left: var(--bm-devbar-left, auto);
+  bottom: var(--bm-devbar-bottom, 0px);
+  z-index: 2147483000;
+  display: block;
+  width: max-content;
+  max-width: calc(100vw - 32px);
+  height: 40px;
+  box-sizing: border-box;
+  transform-origin: 100% 100%;
+  pointer-events: auto;
+  color: var(--fg);
+  font-family: "Geist Sans", Geist, ui-sans-serif, system-ui, sans-serif;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  font-variant-numeric: tabular-nums;
+  -webkit-font-smoothing: antialiased;
+  text-align: left;
+  cursor: default;
+  user-select: none;
+  transition: color 250ms ease;
+}
+.${e}[data-hidden="true"] { pointer-events: none; }
+.${e}-root[data-mode="preview"] .${e} { color: var(--preview-ink); }
+.${e} button, .${e} input {
+  all: unset;
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.${e} button {
+  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 250ms ease, border-color 300ms ease;
+}
+.${e} button:active:not(:disabled) { transform: scale(0.97); }
+.${e} button:disabled { cursor: default; }
+.${e} button:focus-visible, .${e}-menu input:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1.5px currentColor;
+}
+.${e} input.${e}-page-search:focus,
+.${e} input.${e}-page-search:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.${e}-clip {
+  position: relative;
+  height: 40px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid var(--line);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  background: var(--panel);
+  box-shadow: var(--shadow-live);
+  transition: border-color 300ms ease;
+}
+.${e}-root[data-mode="preview"] .${e}-clip {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.${e}-flood {
+  position: absolute;
+  z-index: 0;
+  inset: -1px -1px 0 -1px;
+  border-radius: 12px 12px 0 0;
+  background: var(--preview);
+  pointer-events: none;
+  clip-path: circle(0px at var(--ox) var(--oy));
+  transition: clip-path ${An}ms var(--ease-in);
+}
+.${e}-root[data-mode="preview"] .${e}-flood {
+  clip-path: circle(150% at var(--ox) var(--oy));
+  transition: clip-path ${_n}ms var(--ease-out);
+}
+.${e}-root[data-settled] .${e}-flood { transition: none; }
+.${e}-row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 39px;
+  padding: 0 8px 0 12px;
+  white-space: nowrap;
+}
+.${e} button.${e}-mode {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  margin-right: 10px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: var(--preview);
+  color: var(--preview-ink);
+}
+.${e}-root[data-mode="preview"] button.${e}-mode {
+  background: transparent;
+  border-color: var(--preview-outline);
+}
+.${e} button.${e}-mode:active:not(:disabled) { background: var(--preview-deep); }
+.${e}-mark { flex-shrink: 0; }
+.${e}-crumb {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: min(180px, 28vw);
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 8px;
+  color: var(--fg2);
+}
+.${e}-root[data-mode="preview"] .${e}-crumb { color: var(--preview-ink-soft); }
+.${e} button.${e}-page {
+  min-width: 0;
+  max-width: min(200px, 34vw);
+}
+.${e} button.${e}-page > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${e}-page-on { background: var(--hover); }
+.${e}-root[data-mode="preview"] .${e}-page-on {
+  background: rgba(255, 255, 255, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
+}
+.${e}-chevron { flex-shrink: 0; color: var(--fg3); }
+.${e}-root[data-mode="preview"] .${e}-chevron { color: var(--preview-ink-soft); }
+.${e}-rule {
+  width: 1px;
+  height: 16px;
+  flex-shrink: 0;
+  margin: 0 6px;
+  background: var(--line2);
+}
+.${e}-root[data-mode="preview"] .${e}-rule { background: var(--preview-line); }
+.${e} button.${e}-btn,
+.${e} button.${e}-publish {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 8px;
+  border: 0;
+  text-decoration: none;
+}
+.${e} button.${e}-btn span,
+.${e} button.${e}-publish span {
+  text-decoration: none;
+}
+.${e}-kbd, .${e}-field, .${e}-when {
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+}
+.${e}-kbd, .${e}-when, .${e}-field { color: var(--fg3); }
+.${e}-root[data-mode="preview"] .${e}-kbd,
+.${e}-root[data-mode="preview"] .${e}-field,
+.${e}-root[data-mode="preview"] .${e}-when { color: var(--preview-ink-soft); }
+.${e}-count { font-variant-numeric: tabular-nums; }
+.${e} button.${e}-publish:not(:disabled) { background: #17171a; color: #fff; }
+.${e}-root[data-mode="live"] button.${e}-publish:disabled {
+  background: #f0f0ee;
+  color: var(--fg3);
+}
+.${e}-root[data-mode="preview"] button.${e}-publish:not(:disabled) {
+  background: #fff;
+  color: var(--preview-on-white);
+}
+.${e}-root[data-mode="preview"] button.${e}-publish:disabled {
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--preview-ink-soft);
+}
+.${e} button.${e}-btn:disabled { opacity: 0.45; }
+.${e}-changes, .${e}-steps, .${e}-published, .${e}-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.${e}-diff { display: inline-flex; gap: 4px; }
+.${e}-add, .${e}-del { font-variant-numeric: tabular-nums; }
+.${e}-dash { color: var(--preview-ink-soft); }
+.${e}-spin {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1.5px solid var(--preview-line);
+  border-top-color: #fff;
+  border-radius: 999px;
+  animation: ${e}-spin 800ms linear infinite;
+}
+.${e}-ring {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1.5px solid var(--preview-line);
+  border-radius: 999px;
+}
+.${e}-done, .${e}-check { color: var(--live); }
+.${e}-root[data-mode="preview"] .${e}-done { color: var(--preview-ink); }
+.${e}-shimmer {
+  display: inline-block;
+  background-image: linear-gradient(90deg, var(--preview-ink-soft) 0%, #fff 45%, var(--preview-ink-soft) 90%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: ${e}-shimmer 1.4s linear infinite;
+}
+.${e}-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  height: 2px;
+  background: #fff;
+  pointer-events: none;
+  transition: width 300ms linear;
+}
+.${e}-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.${e}-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: var(--menu-x, 12px);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  max-height: 280px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+  color: var(--fg);
+  box-shadow: var(--shadow-live);
+  box-sizing: border-box;
+}
+.${e}-page-menu {
+  display: flex;
+  flex-direction: column;
+  width: min(360px, calc(100vw - 32px));
+  max-height: min(420px, calc(100vh - 96px));
+  padding: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+.${e}-page-menu-search {
+  flex-shrink: 0;
+  padding: 8px 12px 0;
+  border-bottom: 1px solid var(--line);
+}
+.${e}-page-menu-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: 1px;
+  min-height: 240px;
+  max-height: 320px;
+  overflow: auto;
+  padding: 4px 6px 6px;
+  box-sizing: border-box;
+}
+.${e}-root[data-mode="preview"] .${e}-page-menu {
+  border-color: var(--preview-line);
+  background: #fff;
+  color: var(--fg);
+  box-shadow: 0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06);
+}
+.${e}-menu input {
+  width: 100%;
+  height: 32px;
+  margin: 2px 0 4px;
+  padding: 0 8px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--fg);
+  font-size: 16px;
+  cursor: text;
+  user-select: text;
+}
+.${e} input.${e}-page-search {
+  display: block;
+  width: 100%;
+  height: 40px;
+  margin: 0;
+  padding: 0 4px 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  cursor: text;
+  user-select: text;
+  box-sizing: border-box;
+}
+.${e} input.${e}-page-search::placeholder {
+  color: var(--fg3);
+  font-weight: 400;
+}
+.${e}-page-menu-foot {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  padding: 0 8px 8px;
+}
+.${e}-page-menu-foot::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 0 4px 6px;
+  background: var(--line);
+}
+.${e}-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 8px;
+  border-radius: 7px;
+  text-align: left;
+  box-sizing: border-box;
+}
+.${e}-page-menu .${e}-option {
+  flex-shrink: 0;
+  min-height: 30px;
+  padding: 5px 12px;
+  border-radius: 7px;
+  font-size: 12.5px;
+  line-height: 1.25;
+}
+.${e}-option > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${e}-current { background: var(--hover); }
+.${e}-meta {
+  margin-left: auto;
+  flex-shrink: 0;
+  color: var(--fg3);
+  font-size: 11px;
+  font-weight: 500;
+}
+.${e} button.${e}-gear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-left: 4px;
+  border-radius: 8px;
+  background: var(--hover);
+  color: var(--fg2);
+}
+.${e} button.${e}-gear svg {
+  display: block;
+  flex-shrink: 0;
+}
+.${e}-gear-on { background: var(--line); color: var(--fg); }
+.${e}-publish-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
+.${e}-root[data-mode="live"] button.${e}-publish-on {
+  box-shadow: inset 0 0 0 1px var(--line2);
+}
+.${e}-root[data-mode="preview"] button.${e}-gear {
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--preview-ink);
+}
+.${e}-settings {
+  right: var(--menu-right, 8px);
+  left: auto;
+  width: 328px;
+  max-height: min(480px, calc(100vh - 80px));
+  padding: 8px;
+  border-radius: 16px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.${e}-settings-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+  padding: 4px 12px 8px;
+}
+.${e}-settings-kicker {
+  color: var(--fg3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.${e}-settings-place {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--fg3);
+  font-size: 12px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${e}-settings-row,
+.${e}-settings-action,
+.${e} button.${e}-settings-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 8px;
+  color: var(--fg);
+  text-align: left;
+  box-sizing: border-box;
+}
+.${e}-settings-row.${e}-settings-theme {
+  flex-wrap: wrap;
+  row-gap: 8px;
+  padding-bottom: 4px;
+}
+.${e}-settings-theme > span:nth-child(2) {
+  flex: 1 1 auto;
+}
+.${e}-settings-row > span:nth-child(2),
+.${e} button.${e}-settings-action > span:nth-child(2) {
+  min-width: 0;
+  flex: 1;
+}
+.${e}-settings-icon { flex-shrink: 0; color: var(--fg2); }
+.${e}-settings-rule { height: 1px; margin: 6px 12px; background: var(--line); }
+.${e}-segment {
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--hover);
+}
+.${e} button.${e}-segment-btn {
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 7px;
+  color: var(--fg2);
+  font-size: 12.5px;
+}
+.${e} button.${e}-segment-on {
+  background: #fff;
+  color: var(--fg);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.${e} button.${e}-switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 36px;
+  height: 22px;
+  margin-left: auto;
+  border-radius: 999px;
+  background: #e4e4e1;
+}
+.${e} button.${e}-switch-on { background: var(--preview); }
+.${e}-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
+  transition: transform 160ms var(--ease-out);
+}
+.${e}-switch-on .${e}-knob { transform: translateX(14px); }
+.${e}-settings .${e}-kbd { margin-left: auto; color: var(--fg3); }
+.${e}-settings-email {
+  margin-left: auto;
+  max-width: 46%;
+  overflow: hidden;
+  color: var(--fg3);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${e} button.${e}-settings-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  color: var(--fg);
+  font-weight: 600;
+}
+.${e}-settings-back svg { transform: rotate(90deg); }
+.${e}-settings-static { cursor: default; }
+.${e}-menu-split {
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--line);
+}
+.${e}-note {
+  margin: 0;
+  padding: 8px;
+  color: var(--fg2);
+  font-size: 12px;
+  font-weight: 500;
+}
+.${e}-page-menu .${e}-note {
+  padding: 8px 12px;
+  font-size: 12.5px;
+}
+.${e}-note-error { color: #b91c1c; }
+.${e}-note-muted { color: var(--fg3); }
+@media (hover: hover) {
+  .${e} button.${e}-mode:hover:not(:disabled) { background: var(--preview-hover); }
+  .${e}-root[data-mode="preview"] button.${e}-mode:hover:not(:disabled) { background: var(--preview-hover); }
+  .${e}-root[data-mode="live"] button.${e}-btn:hover:not(:disabled),
+  .${e}-root[data-mode="live"] button.${e}-page:hover:not(:disabled),
+  .${e}-root[data-mode="live"] button.${e}-gear:hover,
+  .${e}-option:hover:not(:disabled),
+  .${e} button.${e}-settings-action:hover { background: var(--hover); }
+  .${e}-root[data-mode="preview"] button.${e}-btn:hover:not(:disabled),
+  .${e}-root[data-mode="preview"] button.${e}-page:hover:not(:disabled) { background: var(--preview-hover); }
+  .${e}-root[data-mode="preview"] button.${e}-publish:hover:not(:disabled),
+  .${e}-root[data-mode="preview"] button.${e}-publish:active:not(:disabled) { background: #fff; }
+  .${e}-root[data-mode="preview"] button.${e}-btn:active:not(:disabled) { background: var(--preview-deep); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .${e}-flood,
+  .${e} button,
+  .${e}-clip,
+  .${e}-progress,
+  .${e}-knob { transition: none !important; }
+  .${e}-flood { clip-path: none; opacity: 0; }
+  .${e}-root[data-mode="preview"] .${e}-flood { opacity: 1; }
+}
+@keyframes ${e}-spin { to { transform: rotate(360deg); } }
+@keyframes ${e}-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+:host(.${e}-pointing) .${e},
+:host(.${e}-pointing) .${e} * { cursor: pointer !important; }
+:host(.${e}-pointing) .${e} button:disabled { cursor: default !important; }
+`, Se = () => {
+}, yr = {
+  position: "relative",
+  height: 96,
+  overflow: "hidden",
+  transform: "translateZ(0)",
+  "--bm-devbar-right": "auto",
+  "--bm-devbar-left": "12px"
+}, Nr = {
+  locale: "en",
+  type: "page",
+  slug: "home",
+  workspaceId: "ws_sample"
+};
+function Sr() {
+  const [n, r] = f(0);
+  return /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: 40 }, children: [
+    /* @__PURE__ */ t("style", { children: `
+        .ui-kit-devbar-label {
+          margin: 0 0 8px;
+          font-size: 14px;
+          font-weight: 600;
+          letter-spacing: -0.01em;
+          line-height: 1.3;
+        }
+        .ui-kit-devbar-stage {
+          width: 100%;
+        }
+        .ui-kit-devbar-reset {
+          align-self: flex-start;
+          height: 28px;
+          padding: 0 10px;
+          border: 1px solid currentColor;
+          border-radius: 8px;
+          background: transparent;
+          color: inherit;
+          font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
+          cursor: pointer;
+        }
+        .ui-kit-devbar-reset:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 2px;
+        }
+      ` }),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: "ui-kit-devbar-reset",
+        onClick: () => r((o) => o + 1),
+        children: "Reset"
+      }
+    ),
+    /* @__PURE__ */ t(K, { play: n, heading: "Preview", siteMode: "preview" }),
+    /* @__PURE__ */ t(K, { play: n, heading: "Live", siteMode: "live" }),
+    /* @__PURE__ */ t(K, { play: n, heading: "Branch", siteMode: "preview", branch: "feat/sale", doc: !0 }),
+    /* @__PURE__ */ t(K, { play: n, heading: "Exiting", siteMode: "preview", exiting: !0 }),
+    /* @__PURE__ */ t(K, { play: n, heading: "Agent", siteMode: "preview", doc: !0, chatOpen: !0 }),
+    /* @__PURE__ */ t(K, { play: n, heading: "Publish", siteMode: "live", doc: !0, changeCount: 3 }),
+    /* @__PURE__ */ t(
+      K,
+      {
+        play: n,
+        heading: "Changes",
+        siteMode: "preview",
+        doc: !0,
+        changeCount: 3,
+        lineDiff: { added: 14, removed: 2 }
+      }
+    ),
+    /* @__PURE__ */ t(
+      K,
+      {
+        play: n,
+        heading: "Editing",
+        siteMode: "preview",
+        doc: !0,
+        activity: { type: "editing", field: "hero.title" }
+      }
+    ),
+    /* @__PURE__ */ t(
+      K,
+      {
+        play: n,
+        heading: "Publishing",
+        siteMode: "preview",
+        doc: !0,
+        activity: {
+          type: "publishing",
+          progress: 0.45,
+          steps: [
+            { label: "Commit", state: "done" },
+            { label: "PR #42", state: "done" },
+            { label: "Deploying 0:14", state: "active" }
+          ]
+        }
+      }
+    ),
+    /* @__PURE__ */ t(
+      K,
+      {
+        play: n,
+        heading: "Published",
+        siteMode: "live",
+        doc: !0,
+        activity: { type: "published", sha: "3a9f21", when: "just now" }
+      }
+    )
+  ] });
+}
+function K({
+  play: n,
+  heading: r,
+  siteMode: o,
+  branch: a,
+  exiting: d = !1,
+  doc: m = !1,
+  chatOpen: h = !1,
+  changeCount: u = 0,
+  lineDiff: p,
+  activity: c = null
+}) {
+  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: yr, children: /* @__PURE__ */ t(
+      tr,
+      {
+        label: "page/home",
+        branch: a,
+        doc: m ? Nr : null,
+        siteMode: o,
+        exiting: d,
+        chatOpen: h,
+        publishOpen: !1,
+        changeCount: u,
+        lineDiff: p,
+        activity: c,
+        entrance: "play",
+        onExit: Se,
+        onEnterPreview: Se,
+        onToggleChat: Se,
+        onTogglePublish: Se
+      },
+      n
+    ) })
+  ] });
+}
+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" }),
+      /* @__PURE__ */ t(me, { children: "2 uncommitted" })
+    ] }) }),
+    /* @__PURE__ */ t(b, { label: "StatusBar", block: !0, children: /* @__PURE__ */ s(He, { children: [
+      /* @__PURE__ */ t(me, { children: "feat/sale" }),
+      /* @__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($, { tone: "success", children: "Success" }) }),
+    /* @__PURE__ */ t(b, { label: "danger", children: /* @__PURE__ */ t($, { tone: "danger", children: "Danger" }) })
+  ] }) });
+}
+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 }) }) }),
+    /* @__PURE__ */ t(b, { label: "disabled", block: !0, children: /* @__PURE__ */ t(Ne, { label: "Disabled", children: /* @__PURE__ */ t(st, { defaultValue: "Locked", disabled: !0 }) }) }),
+    /* @__PURE__ */ t(b, { label: "Select", block: !0, children: /* @__PURE__ */ t(Ne, { label: "Select", children: /* @__PURE__ */ t(
+      dn,
+      {
+        "aria-label": "Locale",
+        value: n,
+        onValueChange: (o) => r(o ?? "en"),
+        options: [
+          { value: "en", label: "English (en)" },
+          { value: "da", label: "Dansk (da)" }
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ t(b, { label: "Textarea", block: !0, children: /* @__PURE__ */ t(Ne, { label: "Body", children: /* @__PURE__ */ t(un, { mono: !0, rows: 4, defaultValue: `---
+title: Hello
+---
+
+Paragraph.` }) }) })
+  ] }) });
+}
+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 = 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: [
+      /* @__PURE__ */ t(ue, { onClick: () => r(!0), children: "Open dialog" }),
+      /* @__PURE__ */ t(
+        pn,
+        {
+          open: n,
+          onOpenChange: r,
+          title: "Delete this sample?",
+          confirmLabel: "Delete",
+          cancelLabel: "Cancel",
+          destructive: !0,
+          onConfirm: () => r(!1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(b, { label: "Tooltip", children: /* @__PURE__ */ t(gn, { label: "Sample tooltip", children: /* @__PURE__ */ t(ue, { variant: "secondary", children: "Hover" }) }) })
+  ] }) }) });
+}
+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,
+      {
+        kicker: /* @__PURE__ */ t(fn, { to: "/__ui/sections", children: "Sections" }),
+        title: "Documents",
+        description: "Sample page header with action.",
+        action: /* @__PURE__ */ t(ue, { children: "New" })
+      }
+    ) }),
+    /* @__PURE__ */ t(b, { label: "Panel", block: !0, children: /* @__PURE__ */ t(bn, { children: /* @__PURE__ */ s(xn, { children: [
+      /* @__PURE__ */ t($, { children: "First line" }),
+      /* @__PURE__ */ t($, { children: "Second line" })
+    ] }) }) })
+  ] });
+}
+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 }),
+      /* @__PURE__ */ t(ee, { label: "sm", bar: V.sm }),
+      /* @__PURE__ */ t(ee, { label: "md", bar: V.md }),
+      /* @__PURE__ */ t(ee, { label: "lg", bar: V.lg }),
+      /* @__PURE__ */ t(ee, { label: "xl", bar: V.xl }),
+      /* @__PURE__ */ t(ee, { label: "xxl", bar: V.xxl })
+    ] }) }),
+    /* @__PURE__ */ t(b, { label: "Radius", children: /* @__PURE__ */ s("div", { className: "x78zum5 x1a02dak xuk3077 x1n5939r", children: [
+      /* @__PURE__ */ t(ee, { label: "sm", box: V.radiusSm }),
+      /* @__PURE__ */ t(ee, { label: "md", box: V.radiusMd })
+    ] }) }),
+    /* @__PURE__ */ t(b, { label: "Backgrounds", children: /* @__PURE__ */ s("div", { className: "xk7greg x13oidi x86kjsi", children: [
+      /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: "bgApp" }),
+      /* @__PURE__ */ s("div", { className: "xk7greg x13oidi x1jtkcfc", children: [
+        /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: "bgSidebar" }),
+        /* @__PURE__ */ s("div", { className: "xk7greg x13oidi x1d0qn7y", children: [
+          /* @__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" }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function ee({
+  label: n,
+  bar: r,
+  box: o
+}) {
+  return /* @__PURE__ */ s("div", { className: "x78zum5 xdt5ytf x1cy8zhl x3smv4v", children: [
+    /* @__PURE__ */ t("div", { ...Rt(r ? V.bar : V.radiusBox, r, o) }),
+    /* @__PURE__ */ t($, { size: "xs", tone: "muted", mono: !0, children: n })
+  ] });
+}
+const V = {
+  bar: {
+    kZKoxP: "xlup9mm",
+    kWkggS: "xrb6rkd",
+    kaIpWk: "xjdkmwh",
+    $$css: !0
+  },
+  xs: {
+    kzqmXN: "x1ezurc1",
+    $$css: !0
+  },
+  sm: {
+    kzqmXN: "x1odspls",
+    $$css: !0
+  },
+  md: {
+    kzqmXN: "x1w3uvz2",
+    $$css: !0
+  },
+  lg: {
+    kzqmXN: "xuuo8to",
+    $$css: !0
+  },
+  xl: {
+    kzqmXN: "x11jbs3w",
+    $$css: !0
+  },
+  xxl: {
+    kzqmXN: "x1y0qqsj",
+    $$css: !0
+  },
+  radiusBox: {
+    kzqmXN: "x1fu8urw",
+    kZKoxP: "x1vqgdyp",
+    kWkggS: "x1hb2obb",
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "x1j0qoeq",
+    $$css: !0
+  },
+  radiusSm: {
+    kaIpWk: "xjdkmwh",
+    $$css: !0
+  },
+  radiusMd: {
+    kaIpWk: "x13oidi",
+    $$css: !0
+  }
+}, 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($, { 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 Ar = {
+  colors: zn,
+  type: _r,
+  surfaces: Ir,
+  sections: Rr,
+  buttons: Cn,
+  fields: Er,
+  lists: Cr,
+  overlays: zr,
+  feedback: Mr,
+  devbar: Lr
+};
+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 = P.map((n) => ({
+  ...n,
+  Page: Ar[n.slug]
+})), Br = [{
+  value: "system",
+  label: "System"
+}, {
+  value: "light",
+  label: "Light"
+}, {
+  value: "dark",
+  label: "Dark"
+}], Pr = ["Foundations", "Components", "Host"];
+function jr() {
+  const {
+    pathname: n
+  } = vn(), r = n.replace(/\/$/, "") || "/", o = r === "/__ui" ? void 0 : r.slice(6), a = Mn(o), {
+    preference: d,
+    setPreference: m
+  } = $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($, { 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: 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", { ...{
+          0: {
+            className: "x78zum5 x6s0dn4 x13oidi x1l8q8zy x1om5956 x17tv04q xk50ysn xqjzbou x1xcxyqb"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 x13oidi x1l8q8zy x1om5956 x17tv04q xk50ysn xqjzbou x1xcxyqb xaaunc5"
+          }
+        }[!!R << 0], children: c.title }) }, c.slug))
+      ] }, p)) }),
+      /* @__PURE__ */ t("main", { className: "x98rzlu xeuugli x1odjw0f xm8shrt x198e4go", children: /* @__PURE__ */ t(u, {}) })
+    ] })
+  ] });
+}
+export {
+  jr as UiKitApp
+};