@backmatter/studio 0.0.3 → 0.0.5

package/dist/site-widget.js

@@ -0,0 +1,294 @@
+import { jsxs as p, jsx as n, Fragment as N } from "react/jsx-runtime";
+import { useRef as m, useState as w, useLayoutEffect as O, useEffect as f } 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 q, u as J, D as I, f as S, i as $, 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
+}) {
+  const l = m(b);
+  l.current = b, w(() => (z({
+    baseUrl: x.replace(/\/+$/, ""),
+    credentials: "same-origin",
+    dev: !1,
+    version: i,
+    onUnauthorized: ({
+      status: a
+    }) => {
+      var h;
+      a === 401 && ((h = l.current) == null || h.call(l));
+    }
+  }), !0)), O(() => T(document.documentElement, W(_).className), []);
+  const [d, g] = w(!1), [k, v] = w(!1), [C, P] = w(0), A = e ? `${e.type}/${e.slug}` : "No document";
+  function R() {
+    s == null || s();
+  }
+  f(() => {
+    function a(h) {
+      q(h) === "chat" && (h.preventDefault(), v(!1), g((L) => !L));
+    }
+    return document.addEventListener("keydown", a, !0), () => document.removeEventListener("keydown", a, !0);
+  }, []);
+  const F = /* @__PURE__ */ p("footer", { "aria-label": "Backmatter", className: t, style: oe, children: [
+    /* @__PURE__ */ n("span", { style: ae, children: A }),
+    /* @__PURE__ */ n(E, { children: "Preview" }),
+    o ? /* @__PURE__ */ n(E, { children: o }) : null,
+    r ? /* @__PURE__ */ n(E, { children: "draft" }) : null,
+    /* @__PURE__ */ p("button", { type: "button", className: `${t}-btn${k ? ` ${t}-on` : ""}`, "aria-pressed": k, 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 })
+    ] }) }) }) : null,
+    e ? /* @__PURE__ */ n("div", { "data-backmatter-panel": "", hidden: !k, style: se, children: /* @__PURE__ */ n(Q, { workspaceId: e.workspaceId, onStatus: ({
+      changeCount: a
+    }) => P(a), onPublished: () => {
+      v(!1), P(0), R();
+    } }) }) : null,
+    F
+  ] });
+}
+function X({
+  doc: e
+}) {
+  const {
+    setFocus: o
+  } = J();
+  return f(() => {
+    o({
+      docRef: {
+        locale: e.locale,
+        type: e.type,
+        slug: e.slug
+      },
+      frontmatter: {},
+      body: "",
+      selection: null
+    });
+  }, [e.locale, e.type, e.slug, o]), null;
+}
+function Z({
+  onDocChanged: e
+}) {
+  const o = m(e);
+  return o.current = e, f(() => {
+    function r() {
+      o.current();
+    }
+    return window.addEventListener(I, r), () => window.removeEventListener(I, r);
+  }, []), null;
+}
+function ee({
+  open: e
+}) {
+  const {
+    dispatch: o
+  } = S();
+  return f(() => {
+    o({
+      type: e ? "open" : "close"
+    }), e && requestAnimationFrame(() => {
+      window.dispatchEvent(new Event("backmatter:chat-focus"));
+    });
+  }, [e, o]), null;
+}
+function te({
+  onClose: e
+}) {
+  const {
+    panel: o
+  } = S(), r = o.mode, c = m(r), u = m(e);
+  return u.current = e, f(() => {
+    const s = $(c.current);
+    c.current = r, s && !$(r) && u.current();
+  }, [r]), null;
+}
+function ne({
+  doc: e
+}) {
+  const {
+    addPointer: o,
+    panel: r
+  } = S(), c = $(r.mode), u = m(c), s = m(e);
+  return u.current = c, s.current = e, f(() => {
+    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), requestAnimationFrame(() => {
+          window.dispatchEvent(new Event("backmatter:chat-focus"));
+        }));
+      },
+      onEscape: () => {
+        window.dispatchEvent(new CustomEvent(y, {
+          detail: {
+            on: !1
+          }
+        }));
+      }
+    });
+    function x(i) {
+      var d;
+      ((d = i.detail) == null ? void 0 : d.on) && u.current ? b.arm() : b.disarm();
+    }
+    return window.addEventListener(y, x), () => {
+      window.removeEventListener(y, x), b.dispose();
+    };
+  }, [o]), null;
+}
+function E({
+  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 = {
+  position: "fixed",
+  right: "max(16px, env(safe-area-inset-right, 0px))",
+  bottom: "calc(env(safe-area-inset-bottom, 0px) + 48px)",
+  zIndex: 2147483001,
+  width: "min(320px, calc(100vw - 32px))",
+  maxHeight: "min(420px, calc(100vh - 80px))",
+  overflow: "auto",
+  border: "1px solid #e4e4e7",
+  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
+};