@backmatter/studio 0.0.4 → 0.0.6

package/dist/site-widget.js

@@ -1,229 +1,839 @@
-import { jsxs as p, jsx as n, Fragment as N } from "react/jsx-runtime";
-import { useRef as f, useState as k, useLayoutEffect as O, useEffect as m } from "react";
-import { c as z, a as T, p as W, l as _, P as B, S as D, m as H, T as M, E as V, C as G, b as U, d as j, e as J, u as q, D as I, f as E, i as S, g as y, h as K, j as Y } from "./chunks/status-bar-action-DiXhfcj3.js";
-import { E as Q } from "./chunks/EmbedPublishPage-hx1xoAhI.js";
-const t = "backmatter-devbar";
-function be({
-  doc: e,
-  branch: o,
-  tree: r,
-  exiting: c,
-  onExit: u,
-  onDocChanged: s,
-  onSessionExpired: b,
-  proxyPath: x = "/api/backmatter/cms",
-  version: i
+import { jsxs as p, Fragment as B, jsx as n } from "react/jsx-runtime";
+import { useRef as P, useState as k, useEffect as N, useId as V, useLayoutEffect as j } from "react";
+import { S as H, m as J, P as K, k as T, l as Q, o as O, b as Y, G as _, q as Z, t as X, u as ee, v as te, w as ne, x as re, p as ae, y as oe, T as ie, E as se, C as le, z as ce, A as ue, D as de, F as D, H as M, I as z, J as F, K as pe, L as fe } from "./chunks/status-bar-action-RNBujSgk.js";
+import { E as he } from "./chunks/EmbedPublishPage-DazYJLaD.js";
+const I = "backmatter-preview-frame", A = "#d97706";
+function me() {
+  return /* @__PURE__ */ p("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: [
+    /* @__PURE__ */ n(
+      "path",
+      {
+        d: "M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z",
+        stroke: "currentColor",
+        strokeWidth: "1.25",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "1.75", stroke: "currentColor", strokeWidth: "1.25" })
+  ] });
+}
+function be() {
+  return /* @__PURE__ */ p(B, { children: [
+    /* @__PURE__ */ n("style", { children: xe }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: I,
+        "data-backmatter-preview-frame": "",
+        "aria-hidden": !0,
+        children: /* @__PURE__ */ p("div", { className: `${I}-badge`, children: [
+          /* @__PURE__ */ n(me, {}),
+          /* @__PURE__ */ n("span", { children: "Preview" })
+        ] })
+      }
+    )
+  ] });
+}
+const xe = `
+.${I} {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482999;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 2px ${A};
+  overflow: visible;
+}
+.${I}-badge {
+  position: absolute;
+  top: env(safe-area-inset-top, 0px);
+  right: env(safe-area-inset-right, 0px);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid ${A};
+  border-top: 0;
+  border-radius: 0 0 14px 14px;
+  background: #fff7ed;
+  color: #9a3412;
+  font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+}
+@keyframes backmatter-preview-frame-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .${I} {
+    animation: backmatter-preview-frame-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .${I} { animation: none; }
+}
+`, e = "backmatter-devbar", ge = "/api/backmatter/preview";
+function ve(t) {
+  const a = new Map(t.models.map((r) => [r.type, r])), l = new Set(t.docs.map((r) => r.locale)).size > 1, s = [];
+  for (const r of t.docs) {
+    const i = a.get(r.type);
+    if (!i || !Z(i)) continue;
+    const f = X(i, r.locale, r.slug);
+    if (!f) continue;
+    const u = `${r.type}/${r.slug}`;
+    s.push({
+      key: `${r.locale}/${r.type}/${r.slug}`,
+      label: l ? `${u} · ${r.locale}` : u,
+      href: f,
+      current: !!(t.current && t.current.locale === r.locale && t.current.type === r.type && t.current.slug === r.slug)
+    });
+  }
+  return s.sort((r, i) => r.label.localeCompare(i.label)), s;
+}
+function $e({
+  label: t,
+  branch: a,
+  tree: o,
+  doc: l,
+  exiting: s,
+  chatOpen: r,
+  publishOpen: i,
+  changeCount: f,
+  previewEntryPath: u = ge,
+  siteMode: v = "preview",
+  onExit: w,
+  onEnterPreview: y,
+  onToggleChat: C,
+  onTogglePublish: m
+}) {
+  const h = P(null), [c, b] = k(null);
+  N(() => {
+    if (!c) return;
+    function $(R) {
+      var L;
+      const E = R.target;
+      E instanceof Node && ((L = h.current) != null && L.contains(E) || b(null));
+    }
+    function S(R) {
+      R.key === "Escape" && b(null);
+    }
+    return document.addEventListener("pointerdown", $), document.addEventListener("keydown", S), () => {
+      document.removeEventListener("pointerdown", $), document.removeEventListener("keydown", S);
+    };
+  }, [c]), N(() => {
+    function $(S) {
+      T(S) === "chat" && b(null);
+    }
+    return document.addEventListener("keydown", $, !0), () => document.removeEventListener("keydown", $, !0);
+  }, []);
+  function g() {
+    r && C(), i && m();
+  }
+  function d($) {
+    b((S) => S === $ ? null : (g(), $));
+  }
+  const x = i || f > 0;
+  return /* @__PURE__ */ p(B, { children: [
+    /* @__PURE__ */ n("style", { children: Ce }),
+    /* @__PURE__ */ p("footer", { ref: h, "aria-label": "Backmatter", className: e, children: [
+      /* @__PURE__ */ p("div", { className: `${e}-mode`, role: "group", "aria-label": "Site view", children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": v === "live",
+            title: "View the published site",
+            disabled: s || v === "live",
+            onClick: () => {
+              b(null), w();
+            },
+            children: "Live"
+          }
+        ),
+        /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": v === "preview",
+            title: "View draft content",
+            disabled: s || v === "preview" || !y,
+            onClick: () => {
+              b(null), y == null || y();
+            },
+            children: [
+              /* @__PURE__ */ n(ke, {}),
+              "Preview"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n(
+        we,
+        {
+          label: t,
+          doc: l,
+          open: c === "page",
+          onToggle: () => d("page")
+        }
+      ),
+      a ? /* @__PURE__ */ n(
+        ye,
+        {
+          branch: a,
+          tree: o,
+          workspaceId: (l == null ? void 0 : l.workspaceId) ?? null,
+          previewEntryPath: u,
+          open: c === "branch",
+          onToggle: () => d("branch")
+        }
+      ) : null,
+      /* @__PURE__ */ n("span", { className: `${e}-rule`, "aria-hidden": !0 }),
+      /* @__PURE__ */ p("div", { className: `${e}-actions`, children: [
+        /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            className: `${e}-btn ${e}-agent${r ? ` ${e}-on` : ""}`,
+            "aria-pressed": r,
+            "aria-keyshortcuts": "Meta+J Control+J",
+            disabled: !l,
+            onClick: () => {
+              b(null), i && m(), C();
+            },
+            children: [
+              /* @__PURE__ */ n(H, {}),
+              /* @__PURE__ */ n("span", { children: "Agent" }),
+              /* @__PURE__ */ p("kbd", { children: [
+                J(),
+                "J"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            className: `${e}-btn${x ? ` ${e}-on` : ""}`,
+            "aria-pressed": i,
+            disabled: !l,
+            onClick: () => {
+              b(null), r && C(), m();
+            },
+            children: [
+              /* @__PURE__ */ n(K, {}),
+              /* @__PURE__ */ p("span", { children: [
+                "Publish",
+                f ? /* @__PURE__ */ p("span", { className: `${e}-count`, children: [
+                  " ",
+                  f
+                ] }) : null
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ke() {
+  return /* @__PURE__ */ n("span", { className: `${e}-dot`, "aria-hidden": !0 });
+}
+function G() {
+  return /* @__PURE__ */ n("svg", { className: `${e}-chevron`, width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ n("path", { d: "M2.5 4.5 6 8l3.5-3.5", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function we({
+  label: t,
+  doc: a,
+  open: o,
+  onToggle: l
 }) {
-  const l = f(b);
-  l.current = b, k(() => (z({
-    baseUrl: x.replace(/\/+$/, ""),
+  const [s, r] = k(null), [i, f] = k(null), [u, v] = k(null), [w, y] = k(""), C = V();
+  N(() => {
+    o || y("");
+  }, [o]), N(() => {
+    if (!o || !a || s) return;
+    let c = !1;
+    return Promise.all([Q(a.workspaceId), O(a.workspaceId)]).then(([b, g]) => {
+      var d;
+      c || (r(b.docs), f(
+        (((d = g.schema) == null ? void 0 : d.payload.models) ?? []).map((x) => ({
+          type: x.type,
+          ...x.route !== void 0 ? { route: x.route } : {},
+          ...x.indexSlug ? { indexSlug: x.indexSlug } : {}
+        }))
+      ));
+    }).catch(() => {
+      c || v("Couldn't load pages");
+    }), () => {
+      c = !0;
+    };
+  }, [o, a, s]);
+  const m = s && i ? ve({ docs: s, models: i, current: a }) : null, h = m ? W(m, w) : null;
+  return a ? /* @__PURE__ */ p("div", { className: `${e}-pop`, children: [
+    /* @__PURE__ */ p(
+      "button",
+      {
+        type: "button",
+        className: `${e}-crumb ${e}-page`,
+        "aria-haspopup": "menu",
+        "aria-expanded": o,
+        "aria-controls": C,
+        onClick: l,
+        children: [
+          /* @__PURE__ */ n("span", { children: t }),
+          /* @__PURE__ */ n(G, {})
+        ]
+      }
+    ),
+    o ? /* @__PURE__ */ n("div", { id: C, role: "menu", "aria-label": "Pages", className: `${e}-menu`, children: /* @__PURE__ */ n(
+      U,
+      {
+        query: w,
+        onQuery: y,
+        showFilter: ((m == null ? void 0 : m.length) ?? 0) > 7,
+        empty: (h == null ? void 0 : h.length) === 0,
+        emptyLabel: w.trim() ? "Nothing matches" : "No pages",
+        error: u,
+        loading: h === null && !u,
+        children: h == null ? void 0 : h.map((c) => /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: `${e}-option${c.current ? ` ${e}-current` : ""}`,
+            "aria-current": c.current ? "page" : void 0,
+            onClick: () => {
+              if (c.current || c.href === location.pathname) {
+                l();
+                return;
+              }
+              location.assign(c.href);
+            },
+            children: /* @__PURE__ */ n("span", { children: c.label })
+          },
+          c.key
+        ))
+      }
+    ) }) : null
+  ] }) : /* @__PURE__ */ n("span", { className: `${e}-crumb`, children: t });
+}
+function ye({
+  branch: t,
+  tree: a,
+  workspaceId: o,
+  previewEntryPath: l,
+  open: s,
+  onToggle: r
+}) {
+  const [i, f] = k(null), [u, v] = k(null), [w, y] = k(null), [C, m] = k(!1), [h, c] = k(""), b = V();
+  N(() => {
+    s || c("");
+  }, [s]), N(() => {
+    if (!s || !o || i) return;
+    let d = !1;
+    return Y(o).then((x) => {
+      if (d) return;
+      const $ = x.branches.map((S) => S.name);
+      $.includes(t) || $.unshift(t), f($), v(x.defaultBranch);
+    }).catch(() => {
+      d || y("Couldn't load branches");
+    }), () => {
+      d = !0;
+    };
+  }, [s, o, i, t]);
+  const g = i ? W(i.map((d) => ({ key: d, label: d })), h) : null;
+  return o ? /* @__PURE__ */ p("div", { className: `${e}-pop`, children: [
+    /* @__PURE__ */ p(
+      "button",
+      {
+        type: "button",
+        className: `${e}-crumb ${e}-branch`,
+        "aria-haspopup": "menu",
+        "aria-expanded": s,
+        "aria-controls": b,
+        "aria-label": `Branch ${t}`,
+        "aria-busy": C,
+        disabled: C,
+        onClick: r,
+        children: [
+          /* @__PURE__ */ n(_, {}),
+          /* @__PURE__ */ n("span", { children: t }),
+          /* @__PURE__ */ n(G, {})
+        ]
+      }
+    ),
+    s ? /* @__PURE__ */ n("div", { id: b, role: "menu", "aria-label": "Branches", className: `${e}-menu ${e}-menu-end`, children: /* @__PURE__ */ n(
+      U,
+      {
+        query: h,
+        onQuery: c,
+        showFilter: ((i == null ? void 0 : i.length) ?? 0) > 7,
+        empty: (g == null ? void 0 : g.length) === 0,
+        emptyLabel: h.trim() ? "Nothing matches" : "No branches",
+        error: w,
+        loading: g === null && !w,
+        children: g == null ? void 0 : g.map((d) => /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: `${e}-option${d.label === t ? ` ${e}-current` : ""}`,
+            "aria-current": d.label === t ? "true" : void 0,
+            disabled: C,
+            onClick: () => {
+              if (d.label === t) {
+                r();
+                return;
+              }
+              m(!0), y(null), Ee({
+                workspaceId: o,
+                branch: d.label,
+                tree: a,
+                redirect: location.pathname + location.search + location.hash,
+                previewEntryPath: l
+              }).catch((x) => {
+                m(!1), y(x instanceof Error ? x.message : "Couldn't switch branch");
+              });
+            },
+            children: [
+              /* @__PURE__ */ n("span", { children: d.label }),
+              d.label === u ? /* @__PURE__ */ n("span", { className: `${e}-meta`, children: "default" }) : null
+            ]
+          },
+          d.key
+        ))
+      }
+    ) }) : null
+  ] }) : /* @__PURE__ */ p("span", { className: `${e}-crumb ${e}-branch`, children: [
+    /* @__PURE__ */ n(_, {}),
+    /* @__PURE__ */ n("span", { children: t })
+  ] });
+}
+function U({
+  query: t,
+  onQuery: a,
+  showFilter: o,
+  empty: l,
+  emptyLabel: s,
+  error: r,
+  loading: i,
+  children: f
+}) {
+  return /* @__PURE__ */ p(B, { children: [
+    o ? /* @__PURE__ */ n(
+      "input",
+      {
+        value: t,
+        onChange: (u) => a(u.target.value),
+        placeholder: "Filter",
+        "aria-label": "Filter",
+        autoComplete: "off",
+        spellCheck: !1
+      }
+    ) : null,
+    r ? /* @__PURE__ */ n("p", { className: `${e}-note ${e}-note-error`, children: r }) : null,
+    i ? /* @__PURE__ */ n("p", { className: `${e}-note`, children: "Loading…" }) : null,
+    l && !r ? /* @__PURE__ */ n("p", { className: `${e}-note`, children: s }) : null,
+    f
+  ] });
+}
+function W(t, a) {
+  const o = a.trim().toLowerCase();
+  return o ? t.filter((l) => l.label.toLowerCase().includes(o)) : [...t];
+}
+async function Ee(t) {
+  const a = t.checkout ?? te, o = t.ticket ?? ee, l = t.assign ?? ((i) => location.assign(i));
+  await a(t.workspaceId, t.branch);
+  let s;
+  try {
+    s = await o(t.workspaceId, {
+      redirect: t.redirect,
+      branch: t.branch,
+      tree: t.tree
+    });
+  } catch (i) {
+    const f = i instanceof Error ? i.message : "Couldn't open the branch";
+    throw new Error(`Checked out ${t.branch}, but the preview didn't update. ${f}`);
+  }
+  const r = t.previewEntryPath.includes("?") ? "&" : "?";
+  l(`${t.previewEntryPath}${r}ticket=${encodeURIComponent(s.ticket)}`);
+}
+const Ce = `
+@keyframes backmatter-devbar-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.${e} {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right, 0px));
+  bottom: 0;
+  z-index: 2147483000;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
+  min-height: 40px;
+  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 4px;
+  box-sizing: border-box;
+  border: 2px solid ${A};
+  border-bottom: 0;
+  border-radius: 14px 14px 0 0;
+  background: #ffffff;
+  color: #71717a;
+  box-shadow: 0 10px 28px rgba(24, 24, 27, 0.12), 0 1px 2px rgba(24, 24, 27, 0.06);
+  font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-variant-numeric: tabular-nums;
+  animation: backmatter-devbar-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${e} { animation: none; }
+}
+.${e}-mode {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: #f4f4f5;
+}
+.${e}-mode button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #71717a;
+  font: inherit;
+  cursor: pointer;
+}
+.${e}-mode button[aria-pressed="true"] {
+  background: #f4efe4;
+  color: #18181b;
+}
+.${e}-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #c4841d;
+  flex-shrink: 0;
+}
+.${e}-pop { position: relative; min-width: 0; }
+.${e}-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: min(180px, 100%);
+  height: 28px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #18181b;
+  font: inherit;
+}
+button.${e}-crumb { cursor: pointer; }
+.${e}-crumb > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${e}-branch { color: #52525b; }
+.${e}-chevron { flex-shrink: 0; color: #a1a1aa; }
+.${e}-rule {
+  width: 1px;
+  height: 16px;
+  flex-shrink: 0;
+  background: #e4e4e7;
+}
+.${e}-actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+}
+.${e}-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #e4e4e7;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #18181b;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.${e}-agent {
+  border-color: transparent;
+  background: #f4f4f5;
+}
+.${e}-agent kbd {
+  font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 400;
+  color: #71717a;
+}
+.${e}-count { font-variant-numeric: tabular-nums; }
+.${e} button.${e}-on,
+.${e} button.${e}-on:hover:not(:disabled) {
+  background: #18181b;
+  border-color: #18181b;
+  color: #fafafa;
+}
+.${e}-on kbd { color: #d4d4d8; }
+.${e}-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  max-height: 280px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid #e4e4e7;
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: 0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06);
+}
+.${e}-menu-end { left: auto; right: 0; }
+.${e}-menu input {
+  width: 100%;
+  box-sizing: border-box;
+  height: 32px;
+  margin: 2px 0 4px;
+  padding: 0 8px;
+  border: 1px solid #e4e4e7;
+  border-radius: 7px;
+  background: #ffffff;
+  color: #18181b;
+  font: inherit;
+  font-size: 16px;
+}
+.${e}-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #18181b;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.${e}-option > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${e}-current { background: #f4f4f5; }
+.${e}-meta {
+  margin-left: auto;
+  flex-shrink: 0;
+  color: #71717a;
+  font-size: 11px;
+  font-weight: 400;
+}
+.${e}-note {
+  margin: 0;
+  padding: 8px;
+  color: #71717a;
+  font-size: 12px;
+  font-weight: 400;
+}
+.${e}-note-error { color: #b91c1c; }
+@media (hover: hover) {
+  .${e}-mode button:hover:not(:disabled):not([aria-pressed="true"]) { color: #18181b; }
+  .${e}-crumb:hover:not(:disabled) { background: #f4f4f5; }
+  .${e}-btn:hover:not(:disabled):not(.${e}-on) { background: #fafafa; }
+  .${e}-agent:hover:not(:disabled):not(.${e}-on) { background: #ececee; }
+  .${e}-option:hover:not(:disabled) { background: #f4f4f5; }
+}
+.${e} button:focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 2px;
+}
+.${e} button:disabled { cursor: default; opacity: 0.5; }
+.${e}-menu input:focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 1px;
+}
+html.backmatter-pointing, html.backmatter-pointing * { cursor: crosshair !important; }
+html.backmatter-pointing .${e},
+html.backmatter-pointing .${e} *,
+html.backmatter-pointing [data-backmatter-panel],
+html.backmatter-pointing [data-backmatter-panel] * { cursor: pointer !important; }
+html.backmatter-pointing .${e} button:disabled { cursor: default !important; }
+`;
+function Me({
+  doc: t,
+  branch: a,
+  tree: o,
+  siteMode: l = "preview",
+  exiting: s,
+  onExit: r,
+  onEnterPreview: i,
+  onDocChanged: f,
+  onSessionExpired: u,
+  proxyPath: v = "/api/backmatter/cms",
+  previewEntryPath: w,
+  previewFrame: y,
+  version: C
+}) {
+  const m = P(u);
+  m.current = u, k(() => (ne({
+    baseUrl: v.replace(/\/+$/, ""),
     credentials: "same-origin",
     dev: !1,
-    version: i,
+    version: C,
     onUnauthorized: ({
-      status: a
+      status: E
     }) => {
-      var h;
-      a === 401 && ((h = l.current) == null || h.call(l));
+      var L;
+      E === 401 && ((L = m.current) == null || L.call(m));
     }
-  }), !0)), O(() => T(document.documentElement, W(_).className), []);
-  const [d, g] = k(!1), [w, v] = k(!1), [C, P] = k(0), A = e ? `${e.type}/${e.slug}` : "No document";
-  function R() {
-    s == null || s();
+  }), !0)), j(() => re(document.documentElement, ae(oe).className), []);
+  const [h, c] = k(!1), [b, g] = k(!1), [d, x] = k(0), $ = t ? `${t.type}/${t.slug}` : "No document";
+  function S() {
+    f == null || f();
   }
-  m(() => {
-    function a(h) {
-      J(h) === "chat" && (h.preventDefault(), v(!1), g((L) => !L));
+  N(() => {
+    function E(L) {
+      T(L) === "chat" && (L.preventDefault(), g(!1), c((q) => !q));
     }
-    return document.addEventListener("keydown", a, !0), () => document.removeEventListener("keydown", a, !0);
+    return document.addEventListener("keydown", E, !0), () => document.removeEventListener("keydown", E, !0);
   }, []);
-  const F = /* @__PURE__ */ p("footer", { "aria-label": "Backmatter", className: t, style: oe, children: [
-    /* @__PURE__ */ n("span", { style: ae, children: A }),
-    /* @__PURE__ */ n($, { children: "Preview" }),
-    o ? /* @__PURE__ */ n($, { children: o }) : null,
-    r ? /* @__PURE__ */ n($, { children: "draft" }) : null,
-    /* @__PURE__ */ p("button", { type: "button", className: `${t}-btn${w ? ` ${t}-on` : ""}`, "aria-pressed": w, disabled: !e, onClick: () => {
-      g(!1), v((a) => !a);
-    }, children: [
-      /* @__PURE__ */ n(B, {}),
-      /* @__PURE__ */ p("span", { children: [
-        "Publish",
-        C ? ` ${C}` : ""
-      ] })
-    ] }),
-    /* @__PURE__ */ p("button", { type: "button", className: `${t}-btn ${t}-agent${d ? ` ${t}-on` : ""}`, "aria-pressed": d, "aria-keyshortcuts": "Meta+J Control+J", disabled: !e, onClick: () => {
-      v(!1), g((a) => !a);
-    }, children: [
-      /* @__PURE__ */ n(D, {}),
-      /* @__PURE__ */ n("span", { children: "Agent" }),
-      /* @__PURE__ */ p("kbd", { children: [
-        H(),
-        "J"
-      ] })
-    ] }),
-    /* @__PURE__ */ n("button", { type: "button", "aria-label": "Exit preview", disabled: c, onClick: u, style: re, children: "Exit" })
-  ] });
-  return /* @__PURE__ */ p(N, { children: [
-    /* @__PURE__ */ n("style", { children: le }),
-    e ? /* @__PURE__ */ n(M, { children: /* @__PURE__ */ n(V, { children: /* @__PURE__ */ p(G, { workspaceId: e.workspaceId, pointer: !0, children: [
-      /* @__PURE__ */ n(X, { doc: e }),
-      /* @__PURE__ */ n(Z, { onDocChanged: R }),
-      /* @__PURE__ */ n(ee, { open: d }),
-      /* @__PURE__ */ n(te, { onClose: () => g(!1) }),
-      /* @__PURE__ */ n(ne, { doc: e }),
-      /* @__PURE__ */ n(U, { children: d ? /* @__PURE__ */ n(j, { site: !0 }) : null })
+  const R = /* @__PURE__ */ n($e, { label: $, branch: a, tree: o, doc: t, siteMode: l, exiting: s, chatOpen: h, publishOpen: b, changeCount: d, previewEntryPath: w, onExit: r, onEnterPreview: i, onToggleChat: () => c((E) => !E), onTogglePublish: () => g((E) => !E) });
+  return /* @__PURE__ */ p(B, { children: [
+    y ? /* @__PURE__ */ n(be, {}) : null,
+    t ? /* @__PURE__ */ n(ie, { children: /* @__PURE__ */ n(se, { children: /* @__PURE__ */ p(le, { workspaceId: t.workspaceId, pointer: !0, children: [
+      /* @__PURE__ */ n(Ne, { doc: t }),
+      /* @__PURE__ */ n(Se, { onDocChanged: S }),
+      /* @__PURE__ */ n(Le, { open: h }),
+      /* @__PURE__ */ n(Pe, { onClose: () => c(!1) }),
+      /* @__PURE__ */ n(Ie, { doc: t }),
+      /* @__PURE__ */ n(ce, { children: h ? /* @__PURE__ */ n(ue, { site: !0 }) : null })
     ] }) }) }) : null,
-    e ? /* @__PURE__ */ n("div", { "data-backmatter-panel": "", hidden: !w, style: se, children: /* @__PURE__ */ n(Q, { workspaceId: e.workspaceId, onStatus: ({
-      changeCount: a
-    }) => P(a), onPublished: () => {
-      v(!1), P(0), R();
+    t ? /* @__PURE__ */ n("div", { "data-backmatter-panel": "", hidden: !b, style: Re, children: /* @__PURE__ */ n(he, { workspaceId: t.workspaceId, onStatus: ({
+      changeCount: E
+    }) => x(E), onPublished: () => {
+      g(!1), x(0), S();
     } }) }) : null,
-    F
+    R
   ] });
 }
-function X({
-  doc: e
+function Ne({
+  doc: t
 }) {
   const {
-    setFocus: o
-  } = q();
-  return m(() => {
-    o({
+    setFocus: a
+  } = de();
+  return N(() => {
+    a({
       docRef: {
-        locale: e.locale,
-        type: e.type,
-        slug: e.slug
+        locale: t.locale,
+        type: t.type,
+        slug: t.slug
       },
       frontmatter: {},
       body: "",
       selection: null
     });
-  }, [e.locale, e.type, e.slug, o]), null;
+  }, [t.locale, t.type, t.slug, a]), null;
 }
-function Z({
-  onDocChanged: e
+function Se({
+  onDocChanged: t
 }) {
-  const o = f(e);
-  return o.current = e, m(() => {
-    function r() {
-      o.current();
+  const a = P(t);
+  return a.current = t, N(() => {
+    function o() {
+      a.current();
     }
-    return window.addEventListener(I, r), () => window.removeEventListener(I, r);
+    return window.addEventListener(D, o), () => window.removeEventListener(D, o);
   }, []), null;
 }
-function ee({
-  open: e
+function Le({
+  open: t
 }) {
   const {
-    dispatch: o
-  } = E();
-  return m(() => {
-    o({
-      type: e ? "open" : "close"
-    }), e && requestAnimationFrame(() => {
+    dispatch: a
+  } = M();
+  return N(() => {
+    a({
+      type: t ? "open" : "close"
+    }), t && requestAnimationFrame(() => {
       window.dispatchEvent(new Event("backmatter:chat-focus"));
     });
-  }, [e, o]), null;
+  }, [t, a]), null;
 }
-function te({
-  onClose: e
+function Pe({
+  onClose: t
 }) {
   const {
-    panel: o
-  } = E(), r = o.mode, c = f(r), u = f(e);
-  return u.current = e, m(() => {
-    const s = S(c.current);
-    c.current = r, s && !S(r) && u.current();
-  }, [r]), null;
-}
-function ne({
-  doc: e
+    panel: a
+  } = M(), o = a.mode, l = P(o), s = P(t);
+  return s.current = t, N(() => {
+    const r = z(l.current);
+    l.current = o, r && !z(o) && s.current();
+  }, [o]), null;
+}
+function Ie({
+  doc: t
 }) {
   const {
-    addPointer: o,
-    panel: r
-  } = E(), c = S(r.mode), u = f(c), s = f(e);
-  return u.current = c, s.current = e, m(() => {
-    const b = K(document, {
-      bar: () => document.querySelector(`.${t}`),
-      ignore: (i) => !(i instanceof Element) || i.closest("[data-backmatter-panel]") ? !0 : i.closest("iframe") !== null,
-      onGrab: (i) => {
-        const l = Y(s.current, i);
-        l && o(l);
+    addPointer: a,
+    panel: o
+  } = M(), l = z(o.mode), s = P(l), r = P(t);
+  return s.current = l, r.current = t, N(() => {
+    const i = pe(document, {
+      bar: () => document.querySelector(`.${e}`),
+      ignore: (u) => !(u instanceof Element) || u.closest("[data-backmatter-panel]") ? !0 : u.closest("iframe") !== null,
+      onGrab: (u) => {
+        const v = fe(r.current, u);
+        v && (a(v), requestAnimationFrame(() => {
+          window.dispatchEvent(new Event("backmatter:chat-focus"));
+        }));
       },
       onEscape: () => {
-        window.dispatchEvent(new CustomEvent(y, {
+        window.dispatchEvent(new CustomEvent(F, {
           detail: {
             on: !1
           }
         }));
       }
     });
-    function x(i) {
-      var d;
-      ((d = i.detail) == null ? void 0 : d.on) && u.current ? b.arm() : b.disarm();
+    function f(u) {
+      var w;
+      ((w = u.detail) == null ? void 0 : w.on) && s.current ? i.arm() : i.disarm();
     }
-    return window.addEventListener(y, x), () => {
-      window.removeEventListener(y, x), b.dispose();
+    return window.addEventListener(F, f), () => {
+      window.removeEventListener(F, f), i.dispose();
     };
-  }, [o]), null;
+  }, [a]), null;
 }
-function $({
-  children: e
-}) {
-  return /* @__PURE__ */ n("span", { style: ie, children: e });
-}
-const oe = {
-  position: "fixed",
-  right: "max(16px, env(safe-area-inset-right, 0px))",
-  bottom: 0,
-  zIndex: 2147483e3,
-  isolation: "isolate",
-  display: "flex",
-  alignItems: "center",
-  gap: 2,
-  width: "max-content",
-  maxWidth: "calc(100vw - 32px)",
-  minHeight: 36,
-  padding: "0 6px 0 10px",
-  boxSizing: "border-box",
-  border: "1px solid #e4e4e7",
-  borderRadius: "12px 12px 0 0",
-  background: "#ffffff",
-  color: "#71717a",
-  boxShadow: "0 10px 28px rgba(24, 24, 27, 0.12), 0 1px 2px rgba(24, 24, 27, 0.06)",
-  font: '12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
-  WebkitFontSmoothing: "antialiased"
-}, re = {
-  border: 0,
-  borderRadius: 8,
-  background: "transparent",
-  color: "#18181b",
-  font: "inherit",
-  cursor: "pointer",
-  padding: "0 8px",
-  minHeight: 28
-}, ae = {
-  fontWeight: 600,
-  color: "#18181b",
-  maxWidth: 200,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  padding: "0 6px"
-}, ie = {
-  color: "#71717a",
-  fontSize: 12,
-  margin: 0,
-  padding: "0 6px",
-  maxWidth: 140,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-}, se = {
+const Re = {
   position: "fixed",
   right: "max(16px, env(safe-area-inset-right, 0px))",
-  bottom: "calc(env(safe-area-inset-bottom, 0px) + 48px)",
+  bottom: "calc(48px + env(safe-area-inset-bottom, 0px))",
   zIndex: 2147483001,
   width: "min(320px, calc(100vw - 32px))",
   maxHeight: "min(420px, calc(100vh - 80px))",
@@ -232,61 +842,7 @@ const oe = {
   borderRadius: 10,
   background: "#ffffff",
   boxShadow: "0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06)"
-}, le = `
-@keyframes backmatter-devbar-in {
-  from { opacity: 0; transform: translateY(10px) scale(0.98); }
-  to { opacity: 1; transform: none; }
-}
-.${t} { animation: backmatter-devbar-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both; }
-@media (prefers-reduced-motion: reduce) {
-  .${t} { animation: none; }
-}
-.${t}-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 26px;
-  margin-inline: 4px;
-  padding: 0 8px;
-  border: 1px solid #e4e4e7;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #18181b;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  cursor: pointer;
-}
-.${t}-agent kbd {
-  font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  font-weight: 400;
-  opacity: 0.7;
-}
-.${t} button.${t}-on,
-.${t} button.${t}-on:hover:not(:disabled) {
-  background: #18181b;
-  border-color: #18181b;
-  color: #fafafa;
-}
-@media (hover: hover) {
-  .${t} button:hover:not(:disabled) { background: #f4f4f5; }
-  .${t} button.${t}-btn:hover:not(:disabled) {
-    background: rgba(24, 24, 27, 0.05);
-  }
-  .${t} button.${t}-on:hover:not(:disabled) {
-    background: #18181b;
-  }
-}
-.${t} button:focus-visible { outline: 2px solid #18181b; outline-offset: 2px; }
-.${t} button:disabled { cursor: default; opacity: 0.5; }
-html.backmatter-pointing, html.backmatter-pointing * { cursor: crosshair !important; }
-html.backmatter-pointing .${t},
-html.backmatter-pointing .${t} *,
-html.backmatter-pointing [data-backmatter-panel],
-html.backmatter-pointing [data-backmatter-panel] * { cursor: pointer !important; }
-html.backmatter-pointing .${t} button:disabled { cursor: default !important; }
-`;
+};
 export {
-  be as SiteWidget
+  Me as SiteWidget
 };