@backmatter/studio 0.0.9 → 0.0.10

package/dist/chunks/{dashboard-BNUcbYU0.js → dashboard-8rjkfEXl.js}

@@ -1701,7 +1701,7 @@ function kr(e) {
   const t = e.replace(/\/$/, "") || "/";
   return t === "/__ui" || /^\/__ui\/[^/]+$/.test(t);
 }
-const Sr = et(() => import("./UiKitApp-b8qFsmA-.js").then((e) => ({
+const Sr = et(() => import("./UiKitApp-BxvTwsko.js").then((e) => ({
   default: e.UiKitApp
 })));
 function Pr() {

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { A as a, i as s } from "./chunks/dashboard-BNUcbYU0.js";
+import { A as a, i as s } from "./chunks/dashboard-8rjkfEXl.js";
 import { w as t, x as f } from "./chunks/WorkspaceRoutes-BKKEkAq7.js";
 export {
   a as DashboardApp,

package/dist/site-widget.js

@@ -29204,6 +29204,11 @@ function Vu(e, t) {
 }
 const ei = "backmatter-preview-frame";
 function xL() {
+  if (typeof navigator > "u") return Promise.resolve(void 0);
+  const e = navigator.userAgentData;
+  return e != null && e.getHighEntropyValues ? e.getHighEntropyValues(["platformVersion"]).then((t) => t.platformVersion) : Promise.resolve(void 0);
+}
+function vL() {
   return typeof navigator > "u" ? Ev : Vu(navigator.userAgent);
 }
 function pm(e) {
@@ -29215,10 +29220,10 @@ function pm(e) {
       if (Number.isFinite(n) && n >= 0) return n;
     }
   }
-  return xL();
+  return vL();
 }
 const Rv = "oklch(0.56 0.21 295)";
-function vL({
+function wL({
   active: e,
   radius: t
 }) {
@@ -29229,10 +29234,8 @@ function vL({
       return;
     }
     const s = navigator.userAgent;
-    i(Vu(s));
-    const a = navigator.userAgentData;
-    a != null && a.getHighEntropyValues && a.getHighEntropyValues(["platformVersion"]).then((u) => {
-      i(Vu(s, u.platformVersion));
+    i(Vu(s)), xL().then((a) => {
+      a !== void 0 && i(Vu(s, a));
     });
   }, [t]), Cn(() => {
     const s = n.current, a = r.current;
@@ -29245,7 +29248,7 @@ function vL({
       { duration: 700, delay: 180, easing: vo }
     );
   }, [e]), /* @__PURE__ */ V(At, { children: [
-    /* @__PURE__ */ k("style", { children: wL }),
+    /* @__PURE__ */ k("style", { children: kL }),
     /* @__PURE__ */ k(
       "div",
       {
@@ -29259,7 +29262,7 @@ function vL({
     )
   ] });
 }
-const wL = `
+const kL = `
 .${ei} {
   position: fixed;
   inset: 0;
@@ -29287,11 +29290,11 @@ const wL = `
     opacity: 1;
   }
 }
-`, T = "backmatter-devbar", kL = "/api/backmatter/preview", SL = 10, EL = 360;
+`, T = "backmatter-devbar", SL = "/api/backmatter/preview", EL = 10, CL = 360;
 function hm(e, t) {
   return `${e}:${t.trim().toLowerCase()}`;
 }
-function CL({
+function RL({
   label: e,
   branch: t,
   tree: n,
@@ -29302,7 +29305,7 @@ function CL({
   changeCount: a,
   lineDiff: u,
   activity: l = null,
-  previewEntryPath: c = kL,
+  previewEntryPath: c = SL,
   siteMode: f = "preview",
   frame: p = !1,
   frameRadius: d,
@@ -29387,7 +29390,7 @@ function CL({
     return document.addEventListener("pointerdown", X), () => document.removeEventListener("pointerdown", X);
   }, [Z]), Cn(() => {
     const X = D.current, se = A.current;
-    !X || !se || Z !== "settings" || AL(X, se);
+    !X || !se || Z !== "settings" || ML(X, se);
   }, [Z, I, ut]), Cn(() => {
     if (!C) return;
     const X = z.current;
@@ -29401,7 +29404,7 @@ function CL({
     };
   }, [s, C, ut, I]), Oe(() => {
     function X(se) {
-      if (!_L(se.composedPath()[0] ?? null)) {
+      if (!OL(se.composedPath()[0] ?? null)) {
         if ((se.metaKey || se.ctrlKey) && se.key === ".") {
           se.preventDefault(), ae.current.toggleHidden();
           return;
@@ -29556,7 +29559,7 @@ function CL({
     s && v(), O((X) => X === "page" ? null : "page");
   }
   const Xe = !!o || We === "live" && !y, Et = !r || a <= 0, tt = /* @__PURE__ */ k(
-    RL,
+    IL,
     {
       mode: We,
       disabled: Xe,
@@ -29578,7 +29581,7 @@ function CL({
     tt,
     /* @__PURE__ */ k("span", { className: `${T}-steps`, children: l.steps.map((X, se) => /* @__PURE__ */ V("span", { className: `${T}-step`, children: [
       se > 0 ? /* @__PURE__ */ k("span", { className: `${T}-dash`, "aria-hidden": !0, children: "—" }) : null,
-      /* @__PURE__ */ k(PL, { state: X.state }),
+      /* @__PURE__ */ k(_L, { state: X.state }),
       /* @__PURE__ */ k("span", { children: X.label })
     ] }, `${X.label}:${se}`)) })
   ] }) : (l == null ? void 0 : l.type) === "published" ? gt = /* @__PURE__ */ V(At, { children: [
@@ -29605,7 +29608,7 @@ function CL({
   ] }) : gt = /* @__PURE__ */ V(At, { children: [
     tt,
     /* @__PURE__ */ k(
-      qL,
+      BL,
       {
         label: e,
         doc: r,
@@ -29627,7 +29630,7 @@ function CL({
       }
     ),
     /* @__PURE__ */ k(
-      IL,
+      TL,
       {
         buttonRef: z,
         open: s,
@@ -29637,7 +29640,7 @@ function CL({
       }
     ),
     /* @__PURE__ */ k(
-      OL,
+      $L,
       {
         buttonRef: A,
         open: Z === "settings",
@@ -29646,7 +29649,7 @@ function CL({
     )
   ] });
   const vt = /* @__PURE__ */ V(At, { children: [
-    /* @__PURE__ */ k("style", { children: ZL }),
+    /* @__PURE__ */ k("style", { children: WL }),
     /* @__PURE__ */ V(
       "div",
       {
@@ -29655,7 +29658,7 @@ function CL({
         "data-mode": We,
         "data-branch": t || void 0,
         children: [
-          p ? /* @__PURE__ */ k(vL, { active: We === "preview", radius: d }) : null,
+          p ? /* @__PURE__ */ k(wL, { active: We === "preview", radius: d }) : null,
           /* @__PURE__ */ V(
             "footer",
             {
@@ -29684,7 +29687,7 @@ function CL({
             }
           ),
           /* @__PURE__ */ k(
-            $L,
+            AL,
             {
               open: Z === "settings",
               pane: Pe,
@@ -29711,7 +29714,7 @@ function CL({
             }
           ),
           t ? /* @__PURE__ */ k(
-            BL,
+            VL,
             {
               branch: t,
               tree: n,
@@ -29727,11 +29730,17 @@ function CL({
     )
   ] });
   return /* @__PURE__ */ V("div", { ref: Y, className: `${T}-host`, "data-backmatter-devbar": "", children: [
-    /* @__PURE__ */ k("style", { children: HL }),
-    U ? ia(vt, U) : /* @__PURE__ */ k("template", { shadowrootmode: "open", children: vt })
+    /* @__PURE__ */ k("style", { children: ZL }),
+    U ? ia(vt, U) : /* @__PURE__ */ k(
+      "template",
+      {
+        shadowrootmode: "open",
+        children: vt
+      }
+    )
   ] });
 }
-function RL({
+function IL({
   mode: e,
   disabled: t,
   buttonRef: n,
@@ -29751,7 +29760,7 @@ function RL({
       disabled: t,
       onClick: r,
       children: [
-        /* @__PURE__ */ k(TL, { exit: o }),
+        /* @__PURE__ */ k(PL, { exit: o }),
         o ? "Exit preview" : "Enter preview"
       ]
     }
@@ -29783,7 +29792,7 @@ function mm({
     }
   );
 }
-function IL({
+function TL({
   buttonRef: e,
   open: t,
   count: n,
@@ -29813,13 +29822,13 @@ function IL({
     }
   );
 }
-function TL({ exit: e }) {
+function PL({ exit: e }) {
   return e ? /* @__PURE__ */ k("svg", { className: `${T}-mark`, width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": !0, children: /* @__PURE__ */ k("path", { d: "M3 3l6 6M9 3 3 9", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }) }) : /* @__PURE__ */ V("svg", { className: `${T}-mark`, width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": !0, children: [
     /* @__PURE__ */ k("circle", { cx: "6", cy: "6", r: "3.25", stroke: "currentColor", strokeWidth: "1.25" }),
     /* @__PURE__ */ k("circle", { cx: "6", cy: "6", r: "1.35", fill: "currentColor" })
   ] });
 }
-function PL({ state: e }) {
+function _L({ state: e }) {
   return e === "done" ? /* @__PURE__ */ k("span", { className: `${T}-done`, "aria-hidden": !0, children: "✓" }) : e === "active" ? /* @__PURE__ */ k("span", { className: `${T}-spin`, "aria-hidden": !0 }) : /* @__PURE__ */ k("span", { className: `${T}-ring`, "aria-hidden": !0 });
 }
 function Hl(e, t = {}) {
@@ -29838,12 +29847,12 @@ function Hl(e, t = {}) {
     );
   });
 }
-function _L(e) {
+function OL(e) {
   if (!(e instanceof HTMLElement)) return !1;
   const t = e.tagName;
   return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" ? !0 : e.isContentEditable;
 }
-function OL({
+function $L({
   buttonRef: e,
   open: t,
   onClick: n
@@ -29862,7 +29871,7 @@ function OL({
     }
   );
 }
-function $L({
+function AL({
   open: e,
   pane: t,
   hostName: n,
@@ -29908,18 +29917,18 @@ function $L({
       E ? /* @__PURE__ */ k("span", { className: `${T}-settings-place`, children: E }) : null
     ] }),
     /* @__PURE__ */ V("div", { className: `${T}-settings-row`, children: [
-      /* @__PURE__ */ k(NL, {}),
+      /* @__PURE__ */ k(zL, {}),
       /* @__PURE__ */ k("span", { children: "Highlight editable blocks" }),
       /* @__PURE__ */ k(gm, { on: i, label: "Highlight editable blocks", onClick: () => u(!i) })
     ] }),
     /* @__PURE__ */ V("div", { className: `${T}-settings-row`, children: [
-      /* @__PURE__ */ k(zL, {}),
+      /* @__PURE__ */ k(DL, {}),
       /* @__PURE__ */ k("span", { children: "Preview when Agent edits" }),
       /* @__PURE__ */ k(gm, { on: s, label: "Preview when Agent edits", onClick: () => l(!s) })
     ] }),
     /* @__PURE__ */ k("div", { className: `${T}-settings-rule` }),
     a ? /* @__PURE__ */ V("button", { type: "button", className: `${T}-settings-action`, onClick: p, children: [
-      /* @__PURE__ */ k(DL, {}),
+      /* @__PURE__ */ k(LL, {}),
       /* @__PURE__ */ k("span", { children: "Open in dashboard" }),
       /* @__PURE__ */ V("kbd", { className: `${T}-kbd`, children: [
         v,
@@ -29932,12 +29941,12 @@ function $L({
       r ? /* @__PURE__ */ k("span", { className: `${T}-settings-email`, children: r }) : null
     ] }) : null,
     /* @__PURE__ */ V("button", { type: "button", className: `${T}-settings-action`, onClick: c, children: [
-      /* @__PURE__ */ k(LL, {}),
+      /* @__PURE__ */ k(jL, {}),
       /* @__PURE__ */ k("span", { children: "Keyboard shortcuts" }),
       /* @__PURE__ */ k("kbd", { className: `${T}-kbd`, children: "?" })
     ] }),
     /* @__PURE__ */ V("button", { type: "button", className: `${T}-settings-action`, "aria-keyshortcuts": "Meta+. Control+.", onClick: d, children: [
-      /* @__PURE__ */ k(jL, {}),
+      /* @__PURE__ */ k(FL, {}),
       /* @__PURE__ */ k("span", { children: "Hide toolbar" }),
       /* @__PURE__ */ V("kbd", { className: `${T}-kbd`, children: [
         v,
@@ -29947,7 +29956,7 @@ function $L({
     m ? /* @__PURE__ */ V(At, { children: [
       /* @__PURE__ */ k("div", { className: `${T}-settings-rule` }),
       /* @__PURE__ */ V("button", { type: "button", className: `${T}-settings-action`, onClick: m, children: [
-        /* @__PURE__ */ k(FL, {}),
+        /* @__PURE__ */ k(qL, {}),
         /* @__PURE__ */ k("span", { children: "Sign out" }),
         y ? /* @__PURE__ */ k("span", { className: `${T}-settings-email`, children: y }) : null
       ] })
@@ -29975,44 +29984,44 @@ function gm({ on: e, label: t, onClick: n }) {
     }
   );
 }
-function AL(e, t) {
+function ML(e, t) {
   const n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
   e.style.setProperty("--menu-right", `${Math.max(0, n.right - r.right)}px`);
 }
-function ML(e, t) {
-  const n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), o = Math.min(EL, window.innerWidth - 32);
+function NL(e, t) {
+  const n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), o = Math.min(CL, window.innerWidth - 32);
   let s = r.left + r.width / 2 - n.left - o / 2;
   const a = 16, u = a - n.left, l = window.innerWidth - a - o - n.left;
   e.style.setProperty("--menu-x", `${Math.max(u, Math.min(s, l))}px`);
 }
-function NL() {
+function zL() {
   return /* @__PURE__ */ V("svg", { className: `${T}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ k("path", { d: "M3 3h4.2v4.2H3zM8.8 3H13v4.2H8.8zM3 8.8h4.2V13H3z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
     /* @__PURE__ */ k("path", { d: "M8.8 10.2h4.2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeDasharray: "1.4 1.5" })
   ] });
 }
-function zL() {
+function DL() {
   return /* @__PURE__ */ V("svg", { className: `${T}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ k("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__ */ k("circle", { cx: "8", cy: "8", r: "1.8", fill: "none", stroke: "currentColor", strokeWidth: "1.3" })
   ] });
 }
-function DL() {
+function LL() {
   return /* @__PURE__ */ k("svg", { className: `${T}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: /* @__PURE__ */ k("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 LL() {
+function jL() {
   return /* @__PURE__ */ V("svg", { className: `${T}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ k("rect", { x: "1.8", y: "3.6", width: "12.4", height: "8.8", rx: "1.4", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
     /* @__PURE__ */ k("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 jL() {
+function FL() {
   return /* @__PURE__ */ V("svg", { className: `${T}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ k("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__ */ k("path", { d: "M3 13 13 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
   ] });
 }
-function FL() {
+function qL() {
   return /* @__PURE__ */ V("svg", { className: `${T}-settings-icon`, width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": !0, children: [
     /* @__PURE__ */ k("path", { d: "M6.5 3.2H3.8v9.6h2.7", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" }),
     /* @__PURE__ */ k("path", { d: "M7 8h6.2M11 5.4 13.6 8 11 10.6", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -30030,7 +30039,7 @@ function ym(e) {
   const t = typeof matchMedia == "function" && matchMedia("(prefers-color-scheme: dark)").matches, n = pL(e, t) === "dark", r = document.documentElement;
   r.dataset.theme = n ? "dark" : "light", r.style.colorScheme = e === "system" ? "light dark" : n ? "dark" : "light", r.classList.toggle("dark", n), r.classList.toggle("light", !n);
 }
-function qL({
+function BL({
   label: e,
   doc: t,
   dashboardHref: n,
@@ -30048,7 +30057,7 @@ function qL({
   }, [o]), Cn(() => {
     const $ = E.current;
     if (!o || !r || !$) return;
-    const z = () => ML(r, $);
+    const z = () => NL(r, $);
     return z(), window.addEventListener("resize", z), () => window.removeEventListener("resize", z);
   }, [o, r]);
   const _ = He(
@@ -30057,7 +30066,7 @@ function qL({
       const F = ++R.current, U = y.trim(), B = hm(t.workspaceId, U);
       z ? h(!0) : A != null && A.silent || p(!0), S2(t.workspaceId, {
         q: U || void 0,
-        limit: SL,
+        limit: EL,
         offset: $,
         current: t
       }).then((Y) => {
@@ -30167,7 +30176,7 @@ function qL({
     N && r ? ia(N, r) : null
   ] });
 }
-function BL({
+function VL({
   branch: e,
   tree: t,
   workspaceId: n,
@@ -30192,7 +30201,7 @@ function BL({
       v = !0;
     };
   }, [i, n, a, e]), !i || !o) return null;
-  const x = a ? VL(a.map((v) => ({ key: v, label: v })), m) : null;
+  const x = a ? UL(a.map((v) => ({ key: v, label: v })), m) : null;
   return ia(
     /* @__PURE__ */ k("div", { id: y, role: "menu", "aria-label": "Branches", className: `${T}-menu ${T}-page-menu`, children: n ? /* @__PURE__ */ k(
       Iv,
@@ -30217,7 +30226,7 @@ function BL({
                 s();
                 return;
               }
-              h(!0), p(null), UL({
+              h(!0), p(null), HL({
                 workspaceId: n,
                 branch: v.label,
                 tree: t,
@@ -30276,11 +30285,11 @@ function Iv({
 function Tv() {
   return /* @__PURE__ */ k("svg", { className: `${T}-chevron`, width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ k("path", { d: "M2.5 4.5 6 8l3.5-3.5", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function VL(e, t) {
+function UL(e, t) {
   const n = t.trim().toLowerCase();
   return n ? e.filter((r) => r.label.toLowerCase().includes(n)) : [...e];
 }
-async function UL(e) {
+async function HL(e) {
   const t = e.checkout ?? y2, n = e.ticket ?? g2, r = e.assign ?? ((s) => location.assign(s));
   await t(e.workspaceId, e.branch);
   let o;
@@ -30297,7 +30306,7 @@ async function UL(e) {
   const i = e.previewEntryPath.includes("?") ? "&" : "?";
   r(`${e.previewEntryPath}${i}ticket=${encodeURIComponent(o.ticket)}`);
 }
-const HL = `
+const ZL = `
 .${T}-host {
   position: absolute;
   width: 0;
@@ -30316,7 +30325,7 @@ html.backmatter-blocks [data-backmatter-block] {
   outline: 1.5px solid oklch(0.56 0.21 295);
   outline-offset: 2px;
 }
-`, ZL = `
+`, WL = `
 .${T}-root {
   --preview: ${Rv};
   --preview-hover: oklch(0.50 0.20 295);
@@ -30924,17 +30933,17 @@ html.backmatter-blocks [data-backmatter-block] {
 :host(.${T}-pointing) .${T},
 :host(.${T}-pointing) .${T} * { cursor: pointer !important; }
 :host(.${T}-pointing) .${T} button:disabled { cursor: default !important; }
-`, WL = {
+`, KL = {
   x17w6cid: "x145rjjm x17w6cid",
   $$css: !0
 };
-function KL(e, t) {
+function YL(e, t) {
   const n = (t == null ? void 0 : t.split(/\s+/).filter(Boolean)) ?? [];
   return n.length > 0 && e.classList.add(...n), () => {
     n.length > 0 && e.classList.remove(...n);
   };
 }
-function sj({
+function aj({
   doc: e,
   branch: t,
   tree: n,
@@ -30964,7 +30973,7 @@ function sj({
       var z;
       $ === 401 && ((z = b.current) == null || z.call(b));
     }
-  }), !0)), Cn(() => KL(document.documentElement, Mt(WL).className), []);
+  }), !0)), Cn(() => YL(document.documentElement, Mt(KL).className), []);
   const [y, x] = le(!1), [v, E] = le(!1), [w, g] = le(0), [R, C] = le(null), _ = e ? `${e.type}/${e.slug}` : "No document", M = He(($) => {
     C($);
   }, []);
@@ -30986,17 +30995,17 @@ function sj({
     }
     return document.addEventListener("pointerdown", $), () => document.removeEventListener("pointerdown", $);
   }, [v]);
-  const N = /* @__PURE__ */ k(CL, { label: _, branch: t, tree: n, doc: e, siteMode: r, exiting: o, chatOpen: y, publishOpen: v, changeCount: w, previewEntryPath: c, onExit: i, onEnterPreview: s, frame: !!f, frameRadius: p, onToggleChat: () => x(($) => !$), onTogglePublish: () => E(($) => !$), dashboardHref: h, onSignOut: m, onPublishAnchor: M });
+  const N = /* @__PURE__ */ k(RL, { label: _, branch: t, tree: n, doc: e, siteMode: r, exiting: o, chatOpen: y, publishOpen: v, changeCount: w, previewEntryPath: c, onExit: i, onEnterPreview: s, frame: !!f, frameRadius: p, onToggleChat: () => x(($) => !$), onTogglePublish: () => E(($) => !$), dashboardHref: h, onSignOut: m, onPublishAnchor: M });
   return /* @__PURE__ */ V(At, { children: [
     e ? /* @__PURE__ */ k(sk, { children: /* @__PURE__ */ k(N2, { children: /* @__PURE__ */ V(hz, { workspaceId: e.workspaceId, pointer: !0, children: [
-      /* @__PURE__ */ k(YL, { doc: e }),
-      /* @__PURE__ */ k(JL, { onDocChanged: D }),
-      /* @__PURE__ */ k(GL, { open: y }),
-      /* @__PURE__ */ k(XL, { onClose: () => x(!1) }),
-      /* @__PURE__ */ k(QL, { doc: e }),
+      /* @__PURE__ */ k(JL, { doc: e }),
+      /* @__PURE__ */ k(GL, { onDocChanged: D }),
+      /* @__PURE__ */ k(XL, { open: y }),
+      /* @__PURE__ */ k(QL, { onClose: () => x(!1) }),
+      /* @__PURE__ */ k(ej, { doc: e }),
       /* @__PURE__ */ k(mz, { children: y ? /* @__PURE__ */ k(H4, { site: !0 }) : null })
     ] }) }) }) : null,
-    e && v ? /* @__PURE__ */ k("div", { "data-backmatter-panel": "", style: ej(R), children: /* @__PURE__ */ k(Q4, { workspaceId: e.workspaceId, onStatus: ({
+    e && v ? /* @__PURE__ */ k("div", { "data-backmatter-panel": "", style: tj(R), children: /* @__PURE__ */ k(Q4, { workspaceId: e.workspaceId, onStatus: ({
       changeCount: $
     }) => g($), onPublished: () => {
       E(!1), g(0), D();
@@ -31004,7 +31013,7 @@ function sj({
     N
   ] });
 }
-function YL({
+function JL({
   doc: e
 }) {
   const {
@@ -31023,7 +31032,7 @@ function YL({
     });
   }, [e.locale, e.type, e.slug, t]), null;
 }
-function JL({
+function GL({
   onDocChanged: e
 }) {
   const t = Ee(e);
@@ -31034,7 +31043,7 @@ function JL({
     return window.addEventListener(Du, n), () => window.removeEventListener(Du, n);
   }, []), null;
 }
-function GL({
+function XL({
   open: e
 }) {
   const {
@@ -31048,7 +31057,7 @@ function GL({
     });
   }, [e, t]), null;
 }
-function XL({
+function QL({
   onClose: e
 }) {
   const {
@@ -31059,7 +31068,7 @@ function XL({
     r.current = n, i && !ra(n) && o.current();
   }, [n]), null;
 }
-function QL({
+function ej({
   doc: e
 }) {
   const {
@@ -31093,7 +31102,7 @@ function QL({
     };
   }, [t]), null;
 }
-function ej(e) {
+function tj(e) {
   const t = e ? Math.max(16, window.innerWidth - e.right) : 16, n = e ? Math.max(52, window.innerHeight - e.top + 8) : 52;
   return {
     position: "fixed",
@@ -31110,5 +31119,5 @@ function ej(e) {
   };
 }
 export {
-  sj as SiteWidget
+  aj as SiteWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {

package/src/preview-frame.tsx

@@ -12,6 +12,22 @@ import { PREVIEW_FRAME_RADIUS_DEFAULT, previewFrameRadiusFromUserAgent } from ".
 
 export const PREVIEW_FRAME_CLASS = "backmatter-preview-frame";
 
+type NavigatorWithUaData = Navigator & {
+  userAgentData?: {
+    getHighEntropyValues: (
+      hints: readonly string[],
+    ) => Promise<{ platformVersion?: string }>;
+  };
+};
+
+/** Chromium `platformVersion` when Client Hints are available (not in all TS `Navigator` libs). */
+function readNavigatorPlatformVersion(): Promise<string | undefined> {
+  if (typeof navigator === "undefined") return Promise.resolve(undefined);
+  const uad = (navigator as NavigatorWithUaData).userAgentData;
+  if (!uad?.getHighEntropyValues) return Promise.resolve(undefined);
+  return uad.getHighEntropyValues(["platformVersion"]).then((hints) => hints.platformVersion);
+}
+
 /** Bottom window corner radius when the host does not set `devBar.previewFrameRadius`. */
 export function guessPreviewFrameRadius(): number {
   if (typeof navigator === "undefined") return PREVIEW_FRAME_RADIUS_DEFAULT;
@@ -54,10 +70,9 @@ export function PreviewFrame({
     const ua = navigator.userAgent;
     setCorner(previewFrameRadiusFromUserAgent(ua));
 
-    const uad = navigator.userAgentData;
-    if (!uad?.getHighEntropyValues) return;
-    void uad.getHighEntropyValues(["platformVersion"]).then((hints) => {
-      setCorner(previewFrameRadiusFromUserAgent(ua, hints.platformVersion));
+    void readNavigatorPlatformVersion().then((platformVersion) => {
+      if (platformVersion === undefined) return;
+      setCorner(previewFrameRadiusFromUserAgent(ua, platformVersion));
     });
   }, [radius]);
 

package/src/site-bar.tsx

@@ -10,6 +10,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type HTMLAttributes,
   type MouseEvent,
   type ReactNode,
   type Ref,
@@ -74,6 +75,14 @@ function pageMenuCacheKey(workspaceId: string, query: string) {
 
 type MenuState = "page" | "branch" | "settings" | null;
 
+type DevbarHotkeyHandlers = {
+  toggleHidden: () => void;
+  onModeKey: (origin: HTMLElement) => void;
+  onEscape: () => void;
+  openDashboard: () => boolean;
+  openShortcuts: () => void;
+};
+
 export function SiteBar({
   label,
   branch,
@@ -161,7 +170,7 @@ export function SiteBar({
   const widthRef = useRef(0);
   const widthReady = useRef(false);
   const rose = useRef(false);
-  const handlers = useRef({
+  const handlers = useRef<DevbarHotkeyHandlers>({
     toggleHidden: () => {},
     onModeKey: (_origin: HTMLElement) => {},
     onEscape: () => {},
@@ -703,7 +712,17 @@ export function SiteBar({
   return (
     <div ref={attachHost} className={`${DEVBAR_CLASS}-host`} data-backmatter-devbar="">
       <style>{LIGHT_CSS}</style>
-      {shadow ? createPortal(body, shadow) : <template shadowrootmode="open">{body}</template>}
+      {shadow
+        ? createPortal(body, shadow)
+        : (
+            <template
+              {...({ shadowrootmode: "open" } as HTMLAttributes<HTMLTemplateElement> & {
+                shadowrootmode?: "open" | "closed";
+              })}
+            >
+              {body}
+            </template>
+          )}
     </div>
   );
 }