@backmatter/next 0.0.22 → 0.0.24

package/src/preview-refresh.tsx

@@ -39,17 +39,6 @@ function referrerOrigin(): string {
   }
 }
 
-function dashboardOriginFromMeta(): string {
-  const marked = document
-    .querySelector('meta[name="backmatter:dashboard"]')
-    ?.getAttribute("content");
-  if (marked) return marked.replace(/\/$/, "");
-  if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
-    return `${location.protocol}//${location.hostname}:5173`;
-  }
-  return "";
-}
-
 function subscribeDocStream(
   ref: { locale: string; type: string; slug: string },
   onEvent: (event: { raw?: string; body?: string; frontmatter?: Record<string, unknown> }) => void,
@@ -169,13 +158,15 @@ export function PreviewClient({
       ...(branch ? { branch } : {}),
       ...(tree ? { tree } : {}),
     };
+    // Framed by the dashboard's split view: the parent is the dashboard.
+    // Otherwise the Studio mounted on this site posts from same-origin frames.
     const parentOrigin = referrerOrigin();
-    const dashboardOrigin = dashboardOriginFromMeta();
-    const allowed = [...originsKey.split("\0"), parentOrigin, dashboardOrigin].filter(
+    const selfOrigin = window.location.origin;
+    const allowed = [...originsKey.split("\0"), parentOrigin, selfOrigin].filter(
       (origin) => origin.length > 0,
     );
     const framed = window.parent !== window;
-    const targetOrigin = framed ? parentOrigin || allowed[0] || "" : dashboardOrigin;
+    const targetOrigin = framed ? parentOrigin || allowed[0] || "" : selfOrigin;
     const windowTransport: PreviewTransport | null = targetOrigin
       ? createWindowPreviewTransport({
           target: framed ? window.parent : { postMessage() {} },

package/src/preview-route.ts

@@ -7,20 +7,50 @@ import {
   PREVIEW_SESSION_TTL_MS,
   previewLocationWithCheckout,
   readPreviewCookie,
+  readPreviewSession,
   readPreviewTicket,
+  resolveDashboardUrl,
+  studioEnterUrl,
   writePreviewCookie,
   type PreviewCheckout,
 } from "@backmatter/core";
 import { previewStreamUrl, previewTreeStreamUrl } from "@backmatter/core/preview";
 import type { BackmatterClient } from "@backmatter/core/node/create-backmatter";
+import { MARKER_COOKIE, MARKER_TTL_S, safeReturnPath } from "./gate";
+import { requestUrlFrom } from "./request-url";
 
 export type PreviewRouteDeps = {
   enableDraft?: () => void | Promise<void>;
   disableDraft?: () => void | Promise<void>;
   isDraftEnabled?: () => boolean | Promise<boolean>;
   now?: () => number;
+  /** Dashboard that holds the login, for `?enter=1`. Default: `resolveDashboardUrl()`. */
+  dashboardUrl?: string;
+  /**
+   * Exchange the current site session for a fresh token. Default calls
+   * `POST /preview/session/renew` on the API. Null means the session is dead.
+   * Throw when the API cannot be reached; that becomes a 503 and keeps the cookies.
+   */
+  renewSession?: (token: string) => Promise<string | null>;
+  /**
+   * Ask the API whether this site-session token is still logged in, epoch
+   * included. Default calls `GET /preview/session`.
+   */
+  confirmSession?: (token: string) => Promise<"ok" | "invalid" | "unavailable">;
 };
 
+/** The gate's marker: readable by the page script, so never HttpOnly. */
+function markerCookieHeader(secure: boolean, on: boolean): string {
+  const parts = [
+    `${MARKER_COOKIE}=${on ? "1" : ""}`,
+    "Path=/",
+    `Max-Age=${on ? MARKER_TTL_S : 0}`,
+    "SameSite=Lax",
+  ];
+  if (secure) parts.push("Secure");
+  return parts.join("; ");
+}
+
 function cookieBase(name: string, secure: boolean, maxAge: number, value: string) {
   // HTTPS is cross-site from the CMS iframe (dash → customer origin). Lax is
   // not sent there, so draftMode can be on while the checkout cookie is missing
@@ -55,6 +85,42 @@ async function nextDraftEnabled(): Promise<boolean> {
   return (await mod.draftMode()).isEnabled;
 }
 
+async function renewSessionOnApi(apiUrl: string, token: string): Promise<string | null> {
+  let res: Response;
+  try {
+    res = await fetch(`${apiUrl}/preview/session/renew`, {
+      method: "POST",
+      headers: { authorization: `Bearer ${token}` },
+      cache: "no-store",
+    });
+  } catch {
+    throw new Error("renew unavailable");
+  }
+  if (res.status === 401 || res.status === 403) return null;
+  if (!res.ok) throw new Error(`renew unavailable: ${res.status}`);
+  const body = (await res.json()) as { token?: unknown };
+  return typeof body.token === "string" && body.token ? body.token : null;
+}
+
+async function confirmSessionOnApi(
+  apiUrl: string | undefined,
+  token: string,
+): Promise<"ok" | "invalid" | "unavailable"> {
+  const base = apiUrl?.replace(/\/$/, "");
+  if (!base) return "unavailable";
+  try {
+    const res = await fetch(`${base}/preview/session`, {
+      headers: { authorization: `Bearer ${token}` },
+      cache: "no-store",
+    });
+    if (res.status === 401 || res.status === 403) return "invalid";
+    if (!res.ok) return "unavailable";
+    return "ok";
+  } catch {
+    return "unavailable";
+  }
+}
+
 function cookieFrom(req: Request, name: string): string | undefined {
   const header = req.headers.get("cookie");
   if (!header) return undefined;
@@ -84,15 +150,56 @@ export function createPreviewRoute(
     const secure = url.protocol === "https:";
 
     if (url.searchParams.get("session") === "1") {
-      const checkout = secret ? await checkoutFrom(req, secret, url) : null;
-      if (checkout) {
-        return Response.json({
-          mode: "preview",
-          ...checkout,
-        });
+      // The bar's only login signal. The checkout cookie and draft mode still
+      // render drafts; they do not mean the visitor is signed in.
+      const token = cookieFrom(req, PREVIEW_SESSION_COOKIE);
+      const claims = secret && token ? await readPreviewSession(secret, token) : null;
+      const workspaceOk = !cms.config.workspaceId || claims?.workspaceId === cms.config.workspaceId;
+      const clearLogin = async () => {
+        await (deps.disableDraft ?? (() => nextDraft(false)))();
+        const headers = new Headers({ "Cache-Control": "no-store" });
+        headers.append("Set-Cookie", cookieBase(PREVIEW_COOKIE, secure, 0, ""));
+        headers.append("Set-Cookie", cookieBase(PREVIEW_SESSION_COOKIE, secure, 0, ""));
+        headers.append("Set-Cookie", markerCookieHeader(secure, false));
+        return Response.json({ mode: "live", reason: "invalid" }, { headers });
+      };
+      if (!claims || !token || !workspaceOk) {
+        if (token) return clearLogin();
+        return Response.json(
+          { mode: "live", reason: "anonymous" },
+          { headers: { "Cache-Control": "no-store" } },
+        );
+      }
+      const confirm = deps.confirmSession ?? ((current: string) => confirmSessionOnApi(cms.config.apiUrl, current));
+      const verdict = await confirm(token);
+      if (verdict === "unavailable") {
+        return Response.json(
+          { mode: "live", reason: "unavailable" },
+          { headers: { "Cache-Control": "no-store" } },
+        );
+      }
+      if (verdict !== "ok") return clearLogin();
+      return Response.json(
+        { mode: "preview", branch: claims.branch, tree: claims.tree },
+        { headers: { "Cache-Control": "no-store" } },
+      );
+    }
+
+    // The bar found the marker but no session: go top-level to the dashboard,
+    // which mints a ticket after login and returns to this page.
+    if (url.searchParams.get("enter") === "1") {
+      if (!cms.config.workspaceId) {
+        return Response.json({ error: "preview_not_configured" }, { status: 503 });
       }
-      const draftOn = await (deps.isDraftEnabled ?? nextDraftEnabled)();
-      return Response.json({ mode: draftOn ? "preview" : "live" });
+      const returnUrl = requestUrlFrom(
+        (name) => req.headers.get(name),
+        safeReturnPath(url.searchParams.get("return")),
+      );
+      const dashboardUrl = resolveDashboardUrl(deps.dashboardUrl);
+      return Response.redirect(
+        studioEnterUrl(dashboardUrl, { workspaceId: cms.config.workspaceId, returnUrl }),
+        302,
+      );
     }
 
     if (url.searchParams.get("stream") === "1") {
@@ -169,15 +276,47 @@ export function createPreviewRoute(
         ),
       );
     }
+    // Entry opts the visitor in, so the bar shows on later pages without a param.
+    headers.append("Set-Cookie", markerCookieHeader(secure, true));
     return new Response(null, { status: 302, headers });
   };
 
   const POST = async (req: Request): Promise<Response> => {
+    const url = new URL(req.url);
+    // Slide the site session while the bar is open. The cookie is HttpOnly, so
+    // the browser cannot renew it itself; a dead session is a 401 and the bar
+    // bounces to the dashboard instead of failing the next chat send.
+    if (url.searchParams.get("renew") === "1") {
+      const token = cookieFrom(req, PREVIEW_SESSION_COOKIE);
+      const apiUrl = cms.config.apiUrl?.replace(/\/$/, "");
+      if (!token || !apiUrl) return Response.json({ error: "unauthorized" }, { status: 401 });
+      let renewed: string | null;
+      try {
+        renewed = await (deps.renewSession ?? ((current) => renewSessionOnApi(apiUrl, current)))(token);
+      } catch {
+        return Response.json({ error: "unavailable" }, { status: 503 });
+      }
+      if (!renewed) return Response.json({ error: "unauthorized" }, { status: 401 });
+      const headers = new Headers();
+      headers.append(
+        "Set-Cookie",
+        cookieBase(
+          PREVIEW_SESSION_COOKIE,
+          url.protocol === "https:",
+          Math.floor(PREVIEW_SESSION_TTL_MS / 1000),
+          renewed,
+        ),
+      );
+      return new Response(null, { status: 204, headers });
+    }
+
     await (deps.disableDraft ?? (() => nextDraft(false)))();
     const secure = new URL(req.url).protocol === "https:";
     const headers = new Headers();
     headers.append("Set-Cookie", cookieBase(PREVIEW_COOKIE, secure, 0, ""));
     headers.append("Set-Cookie", cookieBase(PREVIEW_SESSION_COOKIE, secure, 0, ""));
+    // Exit also drops the marker; otherwise the next page would bounce straight back in.
+    headers.append("Set-Cookie", markerCookieHeader(secure, false));
     return new Response(null, { status: 204, headers });
   };
 

package/src/request-url.ts

@@ -0,0 +1,13 @@
+// packages/next/src/request-url.ts
+
+/** Absolute URL of the current request, from forwarded headers when behind a proxy. */
+export function requestUrlFrom(
+  get: (name: string) => string | null,
+  pathWithSearch: string,
+): string {
+  const host = get("x-forwarded-host") ?? get("host") ?? "localhost:3000";
+  const proto =
+    get("x-forwarded-proto") ??
+    (host.startsWith("localhost") || host.startsWith("127.0.0.1") ? "http" : "https");
+  return `${proto}://${host}${pathWithSearch}`;
+}

package/src/site-editor.tsx

@@ -3,8 +3,21 @@
 
 import { usePathname, useRouter } from "next/navigation";
 import { startTransition, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import {
+  DEVBAR_CLASS,
+  DEVBAR_CLEARANCE,
+  DEVBAR_ENTER_CSS,
+  DEVBAR_RIGHT,
+  devbarShellStyle,
+} from "./devbar-motion";
+import { markerCookie } from "./gate";
 import { subscribeSiteDoc } from "./site-doc-bridge";
 import { readSiteDoc, sameSiteDoc, type SiteDocRef } from "./site-doc";
+import { installSitePointer } from "./site-pointer";
+
+const DEFAULT_PREVIEW_ENTRY_PATH = "/api/backmatter/preview";
+/** Slide the 12h site session while the bar is on screen. */
+const SESSION_RENEW_MS = 30 * 60 * 1000;
 
 function useSiteDoc(): SiteDocRef | null {
   const pathname = usePathname();
@@ -32,14 +45,17 @@ function useSiteDoc(): SiteDocRef | null {
   return doc;
 }
 
-function dashboardOrigin(): string {
-  if (typeof document === "undefined") return "";
-  const marked = document.querySelector('meta[name="backmatter:dashboard"]')?.getAttribute("content");
-  if (marked) return marked.replace(/\/$/, "");
-  if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
-    return `${location.protocol}//${location.hostname}:5173`;
-  }
-  return "";
+/** Default route the host mounts `@backmatter/studio` on. */
+export const DEFAULT_STUDIO_PATH = "/backmatter";
+
+/**
+ * The panels are frames of the Studio mounted on this same origin. Same
+ * origin means the site session cookie is first-party and postMessage needs
+ * no foreign origin.
+ */
+function studioBase(studioPath: string): string {
+  if (typeof location === "undefined") return "";
+  return `${location.origin}${studioPath.replace(/\/+$/, "")}`;
 }
 
 export function SiteChrome({
@@ -47,32 +63,38 @@ export function SiteChrome({
   tree,
   exiting,
   onExit,
+  studioPath = DEFAULT_STUDIO_PATH,
+  previewEntryPath = DEFAULT_PREVIEW_ENTRY_PATH,
 }: {
   branch?: string;
   tree?: string;
   exiting?: boolean;
   onExit: () => void;
+  /** Where `@backmatter/studio` is mounted on this site. */
+  studioPath?: string;
+  /** Ticket route. `POST ?renew=1` slides the site session. A 401 drops the bar. */
+  previewEntryPath?: string;
 }) {
   const router = useRouter();
   const doc = useSiteDoc();
   const [editorMounted, setEditorMounted] = useState(false);
   const [editorOpen, setEditorOpen] = useState(false);
-  const [chatMounted, setChatMounted] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
   const [publishOpen, setPublishOpen] = useState(false);
   const [changeCount, setChangeCount] = useState(0);
-  const [origin, setOrigin] = useState("");
+  // Set in an effect so SSR and the first client render agree.
+  const [base, setBase] = useState("");
+  const origin = typeof location === "undefined" ? "" : location.origin;
   const editorFrame = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
-    setOrigin(dashboardOrigin());
-  }, []);
+    setBase(studioBase(studioPath));
+  }, [studioPath]);
 
   useEffect(() => {
     function onKey(event: KeyboardEvent) {
       if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "j") return;
       event.preventDefault();
-      setChatMounted(true);
       setChatOpen((open) => !open);
     }
     document.addEventListener("keydown", onKey, true);
@@ -97,7 +119,6 @@ export function SiteChrome({
         data.key?.toLowerCase() === "j" &&
         (data.metaKey || data.ctrlKey)
       ) {
-        setChatMounted(true);
         setChatOpen((open) => !open);
       }
       if (data?.type === "backmatter:published") {
@@ -111,10 +132,52 @@ export function SiteChrome({
     return () => window.removeEventListener("message", onMessage);
   }, [origin, router]);
 
+  useEffect(() => {
+    let stopped = false;
+    let left = false;
+    function leaveEditor() {
+      if (left || stopped) return;
+      left = true;
+      void (async () => {
+        try {
+          await fetch(previewEntryPath, { method: "POST", credentials: "same-origin", cache: "no-store" });
+        } catch {
+          // The cookies expire on their own. Still drop the bar.
+        }
+        document.cookie = markerCookie(false, location.protocol === "https:");
+        location.reload();
+      })();
+    }
+    async function renew() {
+      try {
+        const res = await fetch(`${previewEntryPath}?renew=1`, {
+          method: "POST",
+          credentials: "same-origin",
+          cache: "no-store",
+        });
+        if (res.status === 401) leaveEditor();
+      } catch {
+        // Offline. The next send, or the next interval, tries again.
+      }
+    }
+    void renew();
+    const timer = setInterval(() => void renew(), SESSION_RENEW_MS);
+    function onExpired(event: MessageEvent) {
+      if (event.origin !== origin) return;
+      if (event.data?.type === "backmatter:session-expired") leaveEditor();
+    }
+    window.addEventListener("message", onExpired);
+    return () => {
+      stopped = true;
+      clearInterval(timer);
+      window.removeEventListener("message", onExpired);
+    };
+  }, [origin, previewEntryPath]);
+
   const label = doc ? `${doc.type}/${doc.slug}` : "No document";
   const editorSrc =
-    doc && origin
-      ? `${origin}/workspaces/${doc.workspaceId}/docs/${doc.locale}/${doc.type}/${doc.slug}?embed=1`
+    doc && base
+      ? `${base}/workspaces/${doc.workspaceId}/docs/${doc.locale}/${doc.type}/${doc.slug}?embed=1`
       : "";
 
   function onChatWrote() {
@@ -124,7 +187,33 @@ export function SiteChrome({
 
   return (
     <>
-      <style>{"body{padding-bottom:36px}"}</style>
+      <style>{`
+        ${DEVBAR_ENTER_CSS}
+        @media (hover: hover) {
+          .${DEVBAR_CLASS} button:hover:not(:disabled) {
+            background: #f4f4f5;
+          }
+        }
+        .${DEVBAR_CLASS} button:focus-visible {
+          outline: 2px solid #18181b;
+          outline-offset: 2px;
+        }
+        .${DEVBAR_CLASS} button:disabled {
+          cursor: default;
+          opacity: 0.5;
+        }
+        html.backmatter-pointing,
+        html.backmatter-pointing * {
+          cursor: crosshair !important;
+        }
+        html.backmatter-pointing .${DEVBAR_CLASS},
+        html.backmatter-pointing .${DEVBAR_CLASS} * {
+          cursor: pointer !important;
+        }
+        html.backmatter-pointing .${DEVBAR_CLASS} button:disabled {
+          cursor: default !important;
+        }
+      `}</style>
       {editorMounted && doc && editorSrc ? (
         <iframe
           ref={editorFrame}
@@ -137,18 +226,19 @@ export function SiteChrome({
           }}
         />
       ) : null}
-      {chatMounted && doc ? (
+      {doc && base ? (
         <CmsChat
           doc={doc}
           hidden={!chatOpen}
           onWrote={onChatWrote}
           onClosed={() => setChatOpen(false)}
+          base={base}
         />
       ) : null}
-      {doc && origin ? (
+      {doc && base ? (
         <iframe
           title="Publish"
-          src={`${origin}/embed/publish/${doc.workspaceId}`}
+          src={`${base}/embed/publish/${doc.workspaceId}`}
           style={{
             ...publishStyle,
             visibility: publishOpen ? "visible" : "hidden",
@@ -156,7 +246,7 @@ export function SiteChrome({
           }}
         />
       ) : null}
-      <footer aria-label="Backmatter" style={barStyle}>
+      <footer aria-label="Backmatter" className={DEVBAR_CLASS} style={barStyle}>
         <button
           type="button"
           aria-pressed={editorOpen}
@@ -172,17 +262,13 @@ export function SiteChrome({
         <BarText>Preview</BarText>
         {branch ? <BarText>{branch}</BarText> : null}
         {tree ? <BarText>draft</BarText> : null}
-        <span style={{ flex: 1 }} />
         <button type="button" aria-pressed={publishOpen} onClick={() => setPublishOpen((open) => !open)} style={barButton}>
           Publish{changeCount ? ` ${changeCount}` : ""}
         </button>
         <button
           type="button"
           aria-pressed={chatOpen}
-          onClick={() => {
-            setChatMounted(true);
-            setChatOpen((open) => !open);
-          }}
+          onClick={() => setChatOpen((open) => !open)}
           title="Toggle AI chat (⌘J)"
           style={barButton}
         >
@@ -201,11 +287,14 @@ function CmsChat({
   hidden,
   onWrote,
   onClosed,
+  base,
 }: {
   doc: SiteDocRef;
   hidden: boolean;
   onWrote: () => void;
   onClosed: () => void;
+  /** Studio origin plus base path. */
+  base: string;
 }) {
   const frame = useRef<HTMLIFrameElement>(null);
   const onWroteRef = useRef(onWrote);
@@ -214,7 +303,7 @@ function CmsChat({
   onWroteRef.current = onWrote;
   onClosedRef.current = onClosed;
   hiddenRef.current = hidden;
-  const origin = dashboardOrigin();
+  const origin = base ? new URL(base).origin : "";
 
   function openChat() {
     const frameEl = frame.current;
@@ -227,6 +316,9 @@ function CmsChat({
     if (!hidden) openChat();
   }, [hidden, origin]);
 
+  const docRef = useRef(doc);
+  docRef.current = doc;
+
   useEffect(() => {
     const focus = { locale: doc.locale, type: doc.type, slug: doc.slug };
     function postFocus() {
@@ -246,12 +338,47 @@ function CmsChat({
     return () => window.removeEventListener("message", onMessage);
   }, [doc.locale, doc.type, doc.slug, origin]);
 
-  if (!origin) return null;
+  useEffect(() => {
+    if (!origin) return;
+    const pointer = installSitePointer(document, {
+      bar: () => document.querySelector(`.${DEVBAR_CLASS}`),
+      ignore: (target) => {
+        if (!(target instanceof Element)) return true;
+        const frameEl = frame.current;
+        if (frameEl && (target === frameEl || frameEl.contains(target))) return true;
+        return target.closest("iframe") !== null;
+      },
+      onGrab: (grab) => {
+        frame.current?.contentWindow?.postMessage(
+          { type: "backmatter:pointer-grab", grab, doc: docRef.current },
+          origin,
+        );
+      },
+      onEscape: () => {
+        frame.current?.contentWindow?.postMessage({ type: "backmatter:pointer", on: false }, origin);
+      },
+    });
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== origin || event.source !== frame.current?.contentWindow) return;
+      const data = event.data as { type?: string; on?: boolean };
+      if (data?.type !== "backmatter:pointer" || typeof data.on !== "boolean") return;
+      if (data.on && !hiddenRef.current) pointer.arm();
+      else pointer.disarm();
+    }
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      pointer.dispose();
+      frame.current?.contentWindow?.postMessage({ type: "backmatter:pointer", on: false }, origin);
+    };
+  }, [origin, hidden]);
+
+  if (!base) return null;
   return (
     <iframe
       ref={frame}
       title="AI chat"
-      src={`${origin}/embed/chat/${doc.workspaceId}`}
+      src={`${base}/embed/chat/${doc.workspaceId}`}
       style={{
         ...chatStyle,
         visibility: hidden ? "hidden" : "visible",
@@ -266,48 +393,51 @@ function BarText({ children }: { children: ReactNode }) {
 }
 
 const barStyle: CSSProperties = {
-  position: "fixed",
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 2147483000,
-  display: "flex",
-  alignItems: "center",
-  gap: 12,
-  height: 36,
-  padding: "0 12px",
-  paddingBottom: "env(safe-area-inset-bottom, 0px)",
-  boxSizing: "border-box",
-  borderTop: "1px solid #e4e4e7",
-  background: "#f4f4f5",
-  color: "#71717a",
-  font: "12px/1 ui-sans-serif, system-ui, sans-serif",
+  ...devbarShellStyle,
+  gap: 2,
+  padding: "0 6px 0 10px",
+  font: '12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
 };
 
 const barButton: CSSProperties = {
   border: 0,
+  borderRadius: 8,
   background: "transparent",
   color: "#18181b",
   font: "inherit",
   cursor: "pointer",
-  padding: "4px 6px",
+  padding: "0 10px",
+  minHeight: 44,
 };
 
 const docButton: CSSProperties = {
   ...barButton,
   fontWeight: 600,
+  maxWidth: 200,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
 };
 
-const mutedStyle: CSSProperties = { color: "#71717a", fontSize: 12, margin: 0 };
+const mutedStyle: CSSProperties = {
+  color: "#71717a",
+  fontSize: 12,
+  margin: 0,
+  padding: "0 6px",
+  maxWidth: 140,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+};
 
 const editorStyle: CSSProperties = {
   position: "fixed",
   left: 0,
   right: 0,
-  bottom: 36,
+  bottom: DEVBAR_CLEARANCE,
   zIndex: 2147482999,
   width: "100%",
-  height: "min(78vh, calc(100vh - 48px))",
+  height: "min(78vh, calc(100vh - 104px))",
   border: 0,
   borderTop: "1px solid #e4e4e7",
   background: "#ffffff",
@@ -316,11 +446,11 @@ const editorStyle: CSSProperties = {
 
 const chatStyle: CSSProperties = {
   position: "fixed",
-  right: 12,
-  bottom: 48,
+  right: DEVBAR_RIGHT,
+  bottom: DEVBAR_CLEARANCE,
   zIndex: 2147483001,
-  width: "min(440px, calc(100vw - 24px))",
-  height: "min(640px, calc(100vh - 120px))",
+  width: "min(440px, calc(100vw - 32px))",
+  height: "min(640px, calc(100vh - 148px))",
   border: 0,
   borderRadius: 14,
   background: "#f4f4f5",
@@ -329,11 +459,11 @@ const chatStyle: CSSProperties = {
 
 const publishStyle: CSSProperties = {
   position: "fixed",
-  right: 12,
-  bottom: 48,
+  right: DEVBAR_RIGHT,
+  bottom: DEVBAR_CLEARANCE,
   zIndex: 2147483001,
-  width: "min(420px, calc(100vw - 24px))",
-  height: "min(520px, calc(100vh - 120px))",
+  width: "min(420px, calc(100vw - 32px))",
+  height: "min(520px, calc(100vh - 148px))",
   border: "1px solid #e4e4e7",
   borderRadius: 8,
   background: "#ffffff",