@backmatter/studio 0.0.8 → 0.0.10

package/src/site-bar.tsx

@@ -1,70 +1,87 @@
 // packages/studio/src/site-bar.tsx
-// On-site bar: Live/Preview, the current page, the branch, then Agent and Publish.
-import { useEffect, useId, useRef, useState, type ReactNode } from "react";
-import { isRoutable, routeFor, type RouteModel } from "@backmatter/core";
+// On-site bar. One mode button, the page, then Agent and Publish.
+// Preview fills the bar from the button that was pressed and draws a frame
+// from the bottom-right corner. The bar mounts in a shadow root.
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { createPortal } from "react-dom";
 import {
   checkoutBranch,
   createPreviewTicket,
-  fetchDocs,
+  fetchDocNav,
   fetchGit,
-  fetchSchema,
-  type DocListItem,
+  fetchMe,
+  fetchWorkspace,
+  type PageNavItem,
 } from "./api";
-import { GitBranchIcon } from "./chrome/icons";
+import { resolveDashboardOpenHref } from "./site-dashboard-href";
+import { GearIcon, GitBranchIcon } from "./chrome/icons";
 import { matchAppHotkey, modifierSymbol } from "./chrome/hotkeys";
 import { PublishIcon, SparkIcon } from "./chat/icons";
-import { PREVIEW_CHROME_BORDER } from "./preview-frame";
+import {
+  DEVBAR_EASE_DRAWER,
+  DEVBAR_EASE_IN,
+  DEVBAR_EASE_OUT,
+  DEVBAR_FLOOD_ENTER_MS,
+  DEVBAR_FLOOD_EXIT_MS,
+  HIGHLIGHT_BLOCKS_KEY,
+  PREVIEW_WITH_AGENT_KEY,
+  devbarChrome,
+  originWithin,
+  prefersReducedMotion,
+  readSiteTheme,
+  readStoredFlag,
+  readStoredMode,
+  rememberMode,
+  rememberStoredFlag,
+  resolveSiteTheme,
+  shouldAnimateWidth,
+  type DevbarActivity,
+  type DevbarMode,
+  type DevbarStep,
+  type SiteThemePreference,
+} from "./devbar-state";
+import { PREVIEW_CHROME_BORDER, PreviewFrame } from "./preview-frame";
 
 export const DEVBAR_CLASS = "backmatter-devbar";
 
 const DEFAULT_PREVIEW_ENTRY = "/api/backmatter/preview";
 
+export type { DevbarActivity, DevbarStep };
+
 export type PageMenuDoc = {
   locale: string;
   type: string;
   slug: string;
 };
 
-export type PageMenuItem = {
-  key: string;
-  label: string;
-  href: string;
-  current: boolean;
-};
+const PAGE_MENU_SIZE = 10;
+const PAGE_MENU_WIDTH = 360;
 
-/** Routable documents, in label order. Unroutable models stay out of the menu. */
-export function pageMenuItems(input: {
-  docs: readonly PageMenuDoc[];
-  models: readonly RouteModel[];
-  current: PageMenuDoc | null;
-}): PageMenuItem[] {
-  const byType = new Map(input.models.map((model) => [model.type, model]));
-  const locales = new Set(input.docs.map((doc) => doc.locale));
-  const showLocale = locales.size > 1;
-  const items: PageMenuItem[] = [];
-  for (const doc of input.docs) {
-    const model = byType.get(doc.type);
-    if (!model || !isRoutable(model)) continue;
-    const href = routeFor(model, doc.locale, doc.slug);
-    if (!href) continue;
-    const name = `${doc.type}/${doc.slug}`;
-    items.push({
-      key: `${doc.locale}/${doc.type}/${doc.slug}`,
-      label: showLocale ? `${name} · ${doc.locale}` : name,
-      href,
-      current: Boolean(
-        input.current &&
-          input.current.locale === doc.locale &&
-          input.current.type === doc.type &&
-          input.current.slug === doc.slug,
-      ),
-    });
-  }
-  items.sort((a, b) => a.label.localeCompare(b.label));
-  return items;
+function pageMenuCacheKey(workspaceId: string, query: string) {
+  return `${workspaceId}:${query.trim().toLowerCase()}`;
 }
 
-type MenuState = "page" | "branch" | null;
+type MenuState = "page" | "branch" | "settings" | null;
+
+type DevbarHotkeyHandlers = {
+  toggleHidden: () => void;
+  onModeKey: (origin: HTMLElement) => void;
+  onEscape: () => void;
+  openDashboard: () => boolean;
+  openShortcuts: () => void;
+};
 
 export function SiteBar({
   label,
@@ -75,111 +92,607 @@ export function SiteBar({
   chatOpen,
   publishOpen,
   changeCount,
+  lineDiff,
+  activity = null,
   previewEntryPath = DEFAULT_PREVIEW_ENTRY,
   siteMode = "preview",
+  frame = false,
+  frameRadius,
+  entrance = "auto",
+  dashboardHref,
   onExit,
   onEnterPreview,
   onToggleChat,
   onTogglePublish,
+  onStop,
+  onViewLive,
+  onPublishedDone,
+  onSignOut,
+  onPublishAnchor,
 }: {
   label: string;
   branch?: string;
   tree?: string;
   doc: (PageMenuDoc & { workspaceId: string }) | null;
-  siteMode?: "preview" | "live";
+  siteMode?: DevbarMode;
   exiting?: boolean;
   chatOpen: boolean;
   publishOpen: boolean;
   changeCount: number;
+  /** Insertions and deletions behind the preview changes row. */
+  lineDiff?: { added: number; removed: number };
+  activity?: DevbarActivity | null;
   previewEntryPath?: string;
+  /** Viewport frame. Hosts opt in with `devBar.previewFrame`. */
+  frame?: boolean;
+  /** Bottom corner radius for the preview ring (`devBar.previewFrameRadius`). */
+  frameRadius?: number;
+  /** `play` runs the rise on every mount. `auto` skips it when this tab was already in this mode. */
+  entrance?: "auto" | "play";
+  dashboardHref?: string;
   onExit: () => void;
   onEnterPreview?: () => void;
   onToggleChat: () => void;
   onTogglePublish: () => void;
+  onStop?: () => void;
+  onViewLive?: () => void;
+  /** Called 3.2s after the published row appears. */
+  onPublishedDone?: () => void;
+  /** Drops the site session. The settings menu shows Sign out when this is set. */
+  onSignOut?: () => void;
+  /** Light-DOM publish panel positions from the Deploy button. */
+  onPublishAnchor?: (rect: DOMRect | null) => void;
 }) {
-  const rootRef = useRef<HTMLElement>(null);
+  const hostRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const barRef = useRef<HTMLElement | null>(null);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const modeBtnRef = useRef<HTMLButtonElement>(null);
+  const publishBtnRef = useRef<HTMLButtonElement>(null);
+  const settingsBtnRef = useRef<HTMLButtonElement>(null);
+  const checkRef = useRef<HTMLSpanElement>(null);
+  const [shadow, setShadow] = useState<ShadowRoot | null>(null);
+  const attachHost = useCallback((host: HTMLDivElement | null) => {
+    hostRef.current = host;
+    if (!host) {
+      setShadow(null);
+      return;
+    }
+    const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    setShadow((prev) => (prev === root ? prev : root));
+  }, []);
+  const [barNode, setBarNode] = useState<HTMLElement | null>(null);
   const [menu, setMenu] = useState<MenuState>(null);
+  const [mode, setMode] = useState<DevbarMode>(siteMode);
+  const [hidden, setHidden] = useState(false);
+  const hiddenRef = useRef(false);
+  const pending = useRef<DevbarMode | null>(null);
+  const widthRef = useRef(0);
+  const widthReady = useRef(false);
+  const rose = useRef(false);
+  const handlers = useRef<DevbarHotkeyHandlers>({
+    toggleHidden: () => {},
+    onModeKey: (_origin: HTMLElement) => {},
+    onEscape: () => {},
+    openDashboard: () => false,
+    openShortcuts: () => {},
+  });
+  const previewWithAgent = useRef(true);
+  const [theme, setTheme] = useState<SiteThemePreference>("system");
+  const [highlightBlocks, setHighlightBlocks] = useState(true);
+  const [previewAgent, setPreviewAgent] = useState(true);
+  const [settingsPane, setSettingsPane] = useState<"main" | "shortcuts">("main");
+  const [hostName, setHostName] = useState("");
+  const [workspaceSlug, setWorkspaceSlug] = useState<string | null>(null);
+  const [workspaceDefaultLocale, setWorkspaceDefaultLocale] = useState("en");
+
+  useEffect(() => {
+    const id = doc?.workspaceId;
+    if (!id) {
+      setWorkspaceSlug(null);
+      return;
+    }
+    let cancelled = false;
+    void fetchWorkspace(id)
+      .then(({ workspace }) => {
+        if (cancelled) return;
+        setWorkspaceSlug(workspace.slug);
+        setWorkspaceDefaultLocale(workspace.locales[0] ?? "en");
+      })
+      .catch(() => {
+        if (!cancelled) setWorkspaceSlug(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [doc?.workspaceId]);
+
+  const dashboardOpenHref = useMemo(
+    () => resolveDashboardOpenHref(dashboardHref, doc, workspaceSlug, workspaceDefaultLocale),
+    [dashboardHref, doc, workspaceSlug, workspaceDefaultLocale],
+  );
+
+  const setBar = useCallback((node: HTMLElement | null) => {
+    barRef.current = node;
+    if (node && !(node.getRootNode() instanceof ShadowRoot)) return;
+    setBarNode(node);
+  }, []);
+
+  const chrome = devbarChrome({ siteMode: mode, changeCount, activity });
+  const visualMode = chrome.mode;
+  const activityKey =
+    activity?.type === "editing"
+      ? `editing:${activity.field}`
+      : activity?.type === "publishing"
+        ? `publishing:${activity.steps.map((step) => `${step.state}:${step.label}`).join("|")}`
+        : activity?.type === "published"
+          ? `published:${activity.sha}`
+          : "";
+  const signature = `${mode}|${chrome.row}|${changeCount}|${lineDiff?.added ?? ""}|${lineDiff?.removed ?? ""}|${label}|${activityKey}`;
+
+  useEffect(() => {
+    setHostName(location.host);
+    const storage = browserStorage();
+    const nextTheme = readSiteTheme(storage);
+    setPreviewAgent(readStoredFlag(storage, PREVIEW_WITH_AGENT_KEY, true));
+    setTheme(nextTheme);
+    setHighlightBlocks(readStoredFlag(storage, HIGHLIGHT_BLOCKS_KEY, true));
+  }, []);
+
+  useEffect(() => {
+    applySiteTheme(theme);
+    if (theme !== "system" || typeof matchMedia !== "function") return;
+    const media = matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => applySiteTheme("system");
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, [theme]);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("backmatter-blocks", highlightBlocks);
+    return () => document.documentElement.classList.remove("backmatter-blocks");
+  }, [highlightBlocks]);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const root = document.documentElement;
+    const name = `${DEVBAR_CLASS}-pointing`;
+    const sync = () => host.classList.toggle(name, root.classList.contains("backmatter-pointing"));
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (pending.current && pending.current !== siteMode && !exiting) {
+      pending.current = null;
+      rememberMode(siteMode);
+      setMode(siteMode);
+      return;
+    }
+    if (!pending.current) setMode(siteMode);
+    if (pending.current === siteMode) pending.current = null;
+  }, [siteMode, exiting]);
 
   useEffect(() => {
     if (!menu) return;
     function onPointer(event: PointerEvent) {
-      const target = event.target;
-      if (!(target instanceof Node)) return;
-      if (rootRef.current?.contains(target)) return;
-      setMenu(null);
-    }
-    function onKey(event: KeyboardEvent) {
-      if (event.key !== "Escape") return;
+      const root = rootRef.current;
+      if (root && event.composedPath().includes(root)) return;
       setMenu(null);
     }
     document.addEventListener("pointerdown", onPointer);
-    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("pointerdown", onPointer);
+  }, [menu]);
+
+  useLayoutEffect(() => {
+    const bar = barRef.current;
+    const button = settingsBtnRef.current;
+    if (!bar || !button || menu !== "settings") return;
+    placeMenuRight(bar, button);
+  }, [menu, barNode, signature]);
+
+  useLayoutEffect(() => {
+    if (!onPublishAnchor) return;
+    const button = publishBtnRef.current;
+    if (!publishOpen || !button) {
+      onPublishAnchor(null);
+      return;
+    }
+    const report = () => onPublishAnchor(button.getBoundingClientRect());
+    report();
+    window.addEventListener("resize", report);
+    window.addEventListener("scroll", report, true);
     return () => {
-      document.removeEventListener("pointerdown", onPointer);
-      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", report);
+      window.removeEventListener("scroll", report, true);
     };
-  }, [menu]);
+  }, [publishOpen, onPublishAnchor, signature, barNode]);
 
   useEffect(() => {
     function onKey(event: KeyboardEvent) {
-      if (matchAppHotkey(event) !== "chat") return;
-      setMenu(null);
+      if (isTypingTarget(event.composedPath()[0] ?? null)) return;
+      if ((event.metaKey || event.ctrlKey) && event.key === ".") {
+        event.preventDefault();
+        handlers.current.toggleHidden();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "p") {
+        event.preventDefault();
+        const button = modeBtnRef.current;
+        if (!button || button.disabled) return;
+        handlers.current.onModeKey(button);
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && !event.shiftKey && event.key.toLowerCase() === "d") {
+        if (!handlers.current.openDashboard()) return;
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "?" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        event.preventDefault();
+        handlers.current.openShortcuts();
+        return;
+      }
+      if (event.key === "Escape") {
+        handlers.current.onEscape();
+        return;
+      }
+      if (matchAppHotkey(event) === "chat") setMenu(null);
     }
     document.addEventListener("keydown", onKey, true);
     return () => document.removeEventListener("keydown", onKey, true);
   }, []);
 
-  function dismissPanels() {
+  useLayoutEffect(() => {
+    const bar = barRef.current;
+    if (!shadow || !bar || !(bar.getRootNode() instanceof ShadowRoot)) return;
+
+    if (!rose.current) {
+      rose.current = true;
+      const settled = entrance !== "play" && readStoredMode() === siteMode;
+      if (entrance !== "play") rememberMode(siteMode);
+      if (settled) {
+        rootRef.current?.setAttribute("data-settled", "true");
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => rootRef.current?.removeAttribute("data-settled"));
+        });
+      } else if (prefersReducedMotion()) {
+        bar.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, easing: "ease", fill: "backwards" });
+      } else {
+        const rise = bar.animate(
+          [{ transform: "translateY(100%)" }, { transform: "none" }],
+          { duration: 460, easing: DEVBAR_EASE_OUT, delay: 600, fill: "backwards" },
+        );
+        rise.id = "rise";
+        if (rowRef.current) staggerChildren(rowRef.current, { delay: 740 });
+      }
+    }
+
+    const first = !widthReady.current;
+    widthReady.current = true;
+    const running = bar.getAnimations().some((animation) => animation.id === "w");
+    const before = running ? bar.offsetWidth : widthRef.current;
+    bar.getAnimations().filter((animation) => animation.id === "w").forEach((animation) => animation.cancel());
+    const after = bar.offsetWidth;
+    widthRef.current = after;
+    if (first) return;
+    const row = rowRef.current;
+    if (row) {
+      if (prefersReducedMotion()) {
+        row.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease", fill: "backwards" });
+      } else {
+        staggerChildren(row, { delay: 40, blur: true });
+      }
+    }
+    if (prefersReducedMotion() || !shouldAnimateWidth(before, after)) return;
+    const width = bar.animate(
+      [{ width: `${before}px` }, { width: `${after}px` }],
+      { duration: 380, easing: DEVBAR_EASE_DRAWER },
+    );
+    width.id = "w";
+  }, [shadow, signature, entrance, siteMode]);
+
+  const publishedKey = activity?.type === "published" ? activity.sha : "";
+  useLayoutEffect(() => {
+    const check = checkRef.current;
+    if (!publishedKey || !check || prefersReducedMotion()) return;
+    check.animate(
+      [
+        { transform: "scale(0.5)", opacity: 0 },
+        { transform: "none", opacity: 1 },
+      ],
+      { duration: 420, delay: 140, easing: "cubic-bezier(.34, 1.56, .64, 1)", fill: "backwards" },
+    );
+  }, [publishedKey]);
+
+  useEffect(() => {
+    if (!publishedKey || !onPublishedDone) return;
+    const id = window.setTimeout(onPublishedDone, 3200);
+    return () => window.clearTimeout(id);
+  }, [publishedKey, onPublishedDone]);
+
+  function changeMode(next: DevbarMode, origin: HTMLElement) {
+    if (exiting || next === mode) return;
+    if (next === "preview" && !onEnterPreview) return;
+    const bar = barRef.current;
+    if (bar) {
+      const point = originWithin(bar.getBoundingClientRect(), origin.getBoundingClientRect());
+      bar.style.setProperty("--ox", `${point.x}px`);
+      bar.style.setProperty("--oy", `${point.y}px`);
+    }
+    if (next === "live") {
+      setMenu(null);
+      if (chatOpen) onToggleChat();
+      if (publishOpen) onTogglePublish();
+    }
+    pending.current = next;
+    rememberMode(next);
+    setMode(next);
+    if (next === "preview") onEnterPreview?.();
+    else onExit();
+  }
+
+  function setToolbarHidden(next: boolean) {
+    if (hiddenRef.current === next) return;
+    hiddenRef.current = next;
+    setMenu(null);
+    setHidden(next);
+    const bar = barRef.current;
+    if (!bar || !(bar.getRootNode() instanceof ShadowRoot)) return;
+    const activeRoot = bar.getRootNode();
+    const active = activeRoot instanceof ShadowRoot ? activeRoot.activeElement : null;
+    if (next && active instanceof HTMLElement) active.blur();
+    bar.getAnimations().filter((animation) => animation.id === "hide" || animation.id === "rise").forEach((animation) => animation.cancel());
+    if (prefersReducedMotion()) {
+      const fade = bar.animate(
+        [{ opacity: next ? 1 : 0 }, { opacity: next ? 0 : 1 }],
+        { duration: 200, easing: "ease", fill: "forwards" },
+      );
+      fade.id = next ? "hide" : "rise";
+      return;
+    }
+    if (next) {
+      const hide = bar.animate(
+        [{ transform: "translateY(0)" }, { transform: "translateY(100%)" }],
+        { duration: 220, easing: DEVBAR_EASE_IN, fill: "forwards" },
+      );
+      hide.id = "hide";
+      return;
+    }
+    const rise = bar.animate(
+      [{ transform: "translateY(100%)" }, { transform: "none" }],
+      { duration: 460, easing: DEVBAR_EASE_OUT, fill: "backwards" },
+    );
+    rise.id = "rise";
+    if (rowRef.current) staggerChildren(rowRef.current, { delay: 140 });
+  }
+
+  handlers.current.openDashboard = () => {
+    if (!dashboardHref) return false;
+    void (async () => {
+      let href = dashboardOpenHref ?? dashboardHref;
+      if (doc?.workspaceId && doc.type && doc.slug && !workspaceSlug) {
+        try {
+          const { workspace } = await fetchWorkspace(doc.workspaceId);
+          href =
+            resolveDashboardOpenHref(dashboardHref, doc, workspace.slug, workspace.locales[0] ?? "en") ??
+            href;
+        } catch {
+          // Keep the dashboard origin.
+        }
+      }
+      location.assign(href);
+    })();
+    return true;
+  };
+  handlers.current.openShortcuts = () => {
+    setSettingsPane("shortcuts");
+    setMenu("settings");
+  };
+  handlers.current.toggleHidden = () => setToolbarHidden(!hiddenRef.current);
+  handlers.current.onModeKey = (origin) => changeMode(visualMode === "preview" ? "live" : "preview", origin);
+  handlers.current.onEscape = () => {
+    if (menu) {
+      setMenu(null);
+      return;
+    }
+    if (publishOpen) {
+      onTogglePublish();
+      return;
+    }
+    if (activity?.type === "editing") onStop?.();
+  };
+
+  function openAgent(origin: HTMLElement) {
+    if (exiting) return;
+    setMenu(null);
+    if (publishOpen) onTogglePublish();
+    if (mode === "live" && previewWithAgent.current) changeMode("preview", origin);
+    onToggleChat();
+  }
+
+  function openPublish() {
+    if (exiting) return;
+    setMenu(null);
     if (chatOpen) onToggleChat();
+    onTogglePublish();
+  }
+
+  previewWithAgent.current = previewAgent;
+
+  function toggleSettings(pane: "main" | "shortcuts") {
     if (publishOpen) onTogglePublish();
+    setSettingsPane(pane);
+    setMenu((open) => (open === "settings" && pane === "main" ? null : "settings"));
   }
 
-  function toggleMenu(next: Exclude<MenuState, null>) {
-    setMenu((open) => {
-      if (open === next) return null;
-      dismissPanels();
-      return next;
-    });
+  function togglePageMenu() {
+    if (publishOpen) onTogglePublish();
+    setMenu((open) => (open === "page" ? null : "page"));
   }
 
-  const publishEmphasis = publishOpen || changeCount > 0;
+  const modeDisabled = Boolean(exiting) || (visualMode === "live" && !onEnterPreview);
+  const publishDisabled = !doc || changeCount <= 0;
+  const modeButton = (
+    <ModeButton
+      mode={visualMode}
+      disabled={modeDisabled}
+      buttonRef={modeBtnRef}
+      onClick={(event) => changeMode(visualMode === "preview" ? "live" : "preview", event.currentTarget)}
+    />
+  );
 
-  return (
-    <>
-      <style>{BAR_CSS}</style>
-      <footer ref={rootRef} aria-label="Backmatter" className={DEVBAR_CLASS}>
-        <div className={`${DEVBAR_CLASS}-mode`} role="group" aria-label="Site view">
-          <button
-            type="button"
-            aria-pressed={siteMode === "live"}
-            title="View the published site"
-            disabled={exiting || siteMode === "live"}
-            onClick={() => {
-              setMenu(null);
-              onExit();
-            }}
-          >
-            Live
-          </button>
-          <button
-            type="button"
-            aria-pressed={siteMode === "preview"}
-            title="View draft content"
-            disabled={exiting || siteMode === "preview" || !onEnterPreview}
-            onClick={() => {
-              setMenu(null);
-              onEnterPreview?.();
-            }}
-          >
-            <Dot />
-            Preview
-          </button>
-        </div>
+  let row: ReactNode;
+  if (activity?.type === "editing") {
+    row = (
+      <>
+        {modeButton}
+        <span className={`${DEVBAR_CLASS}-spin`} aria-hidden />
+        <span className={`${DEVBAR_CLASS}-shimmer`}>Agent is editing</span>
+        <code className={`${DEVBAR_CLASS}-field`}>{activity.field}</code>
+        <button type="button" className={`${DEVBAR_CLASS}-btn`} onClick={() => onStop?.()}>
+          Stop
+          <kbd className={`${DEVBAR_CLASS}-kbd`}>esc</kbd>
+        </button>
+      </>
+    );
+  } else if (activity?.type === "publishing") {
+    row = (
+      <>
+        {modeButton}
+        <span className={`${DEVBAR_CLASS}-steps`}>
+          {activity.steps.map((step, index) => (
+            <span key={`${step.label}:${index}`} className={`${DEVBAR_CLASS}-step`}>
+              {index > 0 ? <span className={`${DEVBAR_CLASS}-dash`} aria-hidden>—</span> : null}
+              <StepMark state={step.state} />
+              <span>{step.label}</span>
+            </span>
+          ))}
+        </span>
+      </>
+    );
+  } else if (activity?.type === "published") {
+    row = (
+      <>
+        {modeButton}
+        <span ref={checkRef} className={`${DEVBAR_CLASS}-check`} aria-hidden>
+          ✓
+        </span>
+        <span className={`${DEVBAR_CLASS}-published`}>
+          Published <code className={`${DEVBAR_CLASS}-field`}>{activity.sha}</code>
+          <span className={`${DEVBAR_CLASS}-when`}> · {activity.when}</span>
+        </span>
+        <button type="button" className={`${DEVBAR_CLASS}-btn`} onClick={() => (onViewLive ?? onExit)()}>
+          View live
+        </button>
+        <AgentButton
+          pressed={chatOpen}
+          disabled={!doc}
+          shortcut={modifierSymbol()}
+          onClick={(event) => openAgent(event.currentTarget)}
+        />
+      </>
+    );
+  } else {
+    row = (
+      <>
+        {modeButton}
         <PageMenu
           label={label}
           doc={doc}
+          dashboardHref={dashboardOpenHref}
+          bar={barNode}
           open={menu === "page"}
-          onToggle={() => toggleMenu("page")}
+          expanded={menu === "page"}
+          onToggle={togglePageMenu}
+        />
+        <span className={`${DEVBAR_CLASS}-rule`} aria-hidden />
+        <AgentButton
+          pressed={chatOpen}
+          disabled={!doc}
+          shortcut={modifierSymbol()}
+          onClick={(event) => openAgent(event.currentTarget)}
+        />
+        <PublishButton
+          buttonRef={publishBtnRef}
+          open={publishOpen}
+          count={changeCount}
+          disabled={publishDisabled}
+          onClick={openPublish}
+        />
+        <SettingsButton
+          buttonRef={settingsBtnRef}
+          open={menu === "settings"}
+          onClick={() => toggleSettings("main")}
+        />
+      </>
+    );
+  }
+
+  const body = (
+    <>
+      <style>{BAR_CSS}</style>
+      <div
+        ref={rootRef}
+        className={`${DEVBAR_CLASS}-root`}
+        data-mode={visualMode}
+        data-branch={branch || undefined}
+      >
+        {frame ? <PreviewFrame active={visualMode === "preview"} radius={frameRadius} /> : null}
+        <footer
+          ref={setBar}
+          aria-label="Backmatter"
+          aria-hidden={hidden || undefined}
+          inert={hidden ? true : undefined}
+          data-hidden={hidden ? "true" : "false"}
+          data-branch={branch || undefined}
+          className={DEVBAR_CLASS}
+        >
+          <div className={`${DEVBAR_CLASS}-clip`}>
+            <span className={`${DEVBAR_CLASS}-flood`} aria-hidden />
+            <div ref={rowRef} className={`${DEVBAR_CLASS}-row`}>
+              {row}
+            </div>
+            {activity?.type === "publishing" ? (
+              <span
+                className={`${DEVBAR_CLASS}-progress`}
+                style={{ width: `${Math.max(0, Math.min(1, activity.progress)) * 100}%` }}
+                aria-hidden
+              />
+            ) : null}
+          </div>
+          <div className={`${DEVBAR_CLASS}-sr`} aria-live="polite">
+            {chrome.announce}
+          </div>
+        </footer>
+        <SettingsMenu
+          open={menu === "settings"}
+          pane={settingsPane}
+          hostName={hostName}
+          branch={branch}
+          bar={barNode}
+          highlightBlocks={highlightBlocks}
+          previewAgent={previewAgent}
+          dashboardHref={dashboardOpenHref}
+          onHighlight={(on) => {
+            setHighlightBlocks(on);
+            rememberStoredFlag(browserStorage(), HIGHLIGHT_BLOCKS_KEY, on);
+          }}
+          onPreviewAgent={(on) => {
+            setPreviewAgent(on);
+            rememberStoredFlag(browserStorage(), PREVIEW_WITH_AGENT_KEY, on);
+          }}
+          onShortcuts={() => setSettingsPane("shortcuts")}
+          onBack={() => setSettingsPane("main")}
+          onDashboard={() => {
+            handlers.current.openDashboard();
+          }}
+          onHide={() => setToolbarHidden(true)}
+          onSwitchBranch={branch ? () => setMenu("branch") : undefined}
+          onSignOut={onSignOut}
         />
         {branch ? (
           <BranchMenu
@@ -187,161 +700,629 @@ export function SiteBar({
             tree={tree}
             workspaceId={doc?.workspaceId ?? null}
             previewEntryPath={previewEntryPath}
+            bar={barNode}
             open={menu === "branch"}
-            onToggle={() => toggleMenu("branch")}
+            onClose={() => setMenu(null)}
           />
         ) : null}
-        <span className={`${DEVBAR_CLASS}-rule`} aria-hidden />
-        <div className={`${DEVBAR_CLASS}-actions`}>
-          <button
-            type="button"
-            className={`${DEVBAR_CLASS}-btn ${DEVBAR_CLASS}-agent${chatOpen ? ` ${DEVBAR_CLASS}-on` : ""}`}
-            aria-pressed={chatOpen}
-            aria-keyshortcuts="Meta+J Control+J"
-            disabled={!doc}
-            onClick={() => {
-              setMenu(null);
-              if (publishOpen) onTogglePublish();
-              onToggleChat();
-            }}
-          >
-            <SparkIcon />
-            <span>Agent</span>
-            <kbd>{modifierSymbol()}J</kbd>
+      </div>
+    </>
+  );
+
+  return (
+    <div ref={attachHost} className={`${DEVBAR_CLASS}-host`} data-backmatter-devbar="">
+      <style>{LIGHT_CSS}</style>
+      {shadow
+        ? createPortal(body, shadow)
+        : (
+            <template
+              {...({ shadowrootmode: "open" } as HTMLAttributes<HTMLTemplateElement> & {
+                shadowrootmode?: "open" | "closed";
+              })}
+            >
+              {body}
+            </template>
+          )}
+    </div>
+  );
+}
+
+function ModeButton({
+  mode,
+  disabled,
+  buttonRef,
+  onClick,
+}: {
+  mode: DevbarMode;
+  disabled: boolean;
+  buttonRef: Ref<HTMLButtonElement>;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}) {
+  const preview = mode === "preview";
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      data-mode-button=""
+      className={`${DEVBAR_CLASS}-mode`}
+      aria-pressed={preview}
+      aria-keyshortcuts="Meta+Shift+P Control+Shift+P"
+      title={preview ? "View the published site" : "View draft content"}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <ModeMark exit={preview} />
+      {preview ? "Exit preview" : "Enter preview"}
+    </button>
+  );
+}
+
+function AgentButton({
+  pressed,
+  disabled,
+  shortcut,
+  onClick,
+}: {
+  pressed: boolean;
+  disabled: boolean;
+  shortcut: string;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={`${DEVBAR_CLASS}-btn ${DEVBAR_CLASS}-agent${pressed ? ` ${DEVBAR_CLASS}-on` : ""}`}
+      aria-pressed={pressed}
+      aria-keyshortcuts="Meta+J Control+J"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <SparkIcon />
+      <span>Agent</span>
+      <kbd className={`${DEVBAR_CLASS}-kbd`}>{shortcut}J</kbd>
+    </button>
+  );
+}
+
+function PublishButton({
+  buttonRef,
+  open,
+  count,
+  disabled,
+  onClick,
+}: {
+  buttonRef?: Ref<HTMLButtonElement>;
+  open?: boolean;
+  count: number;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      className={`${DEVBAR_CLASS}-publish${open ? ` ${DEVBAR_CLASS}-publish-on` : ""}`}
+      aria-haspopup="dialog"
+      aria-expanded={open ?? false}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <PublishIcon />
+      <span>
+        Publish
+        {count > 0 ? <span className={`${DEVBAR_CLASS}-count`}> {count}</span> : null}
+      </span>
+    </button>
+  );
+}
+
+function ModeMark({ exit }: { exit: boolean }) {
+  if (exit) {
+    return (
+      <svg className={`${DEVBAR_CLASS}-mark`} width="12" height="12" viewBox="0 0 12 12" aria-hidden>
+        <path d="M3 3l6 6M9 3 3 9" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  return (
+    <svg className={`${DEVBAR_CLASS}-mark`} width="12" height="12" viewBox="0 0 12 12" aria-hidden>
+      <circle cx="6" cy="6" r="3.25" stroke="currentColor" strokeWidth="1.25" />
+      <circle cx="6" cy="6" r="1.35" fill="currentColor" />
+    </svg>
+  );
+}
+
+function StepMark({ state }: { state: DevbarStep["state"] }) {
+  if (state === "done") return <span className={`${DEVBAR_CLASS}-done`} aria-hidden>✓</span>;
+  if (state === "active") return <span className={`${DEVBAR_CLASS}-spin`} aria-hidden />;
+  return <span className={`${DEVBAR_CLASS}-ring`} aria-hidden />;
+}
+
+function staggerChildren(row: HTMLElement, options: { delay?: number; blur?: boolean } = {}) {
+  const delay = options.delay ?? 0;
+  if (prefersReducedMotion()) {
+    row.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease", fill: "backwards" });
+    return;
+  }
+  [...row.children].forEach((el, index) => {
+    (el as HTMLElement).animate(
+      [
+        { opacity: 0, transform: "translateY(4px)", filter: options.blur ? "blur(2px)" : "none" },
+        { opacity: 1, transform: "none", filter: "none" },
+      ],
+      { duration: 300, delay: delay + index * 28, easing: DEVBAR_EASE_OUT, fill: "backwards" },
+    );
+  });
+}
+
+function isTypingTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return target.isContentEditable;
+}
+
+function SettingsButton({
+  buttonRef,
+  open,
+  onClick,
+}: {
+  buttonRef?: Ref<HTMLButtonElement>;
+  open: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      className={`${DEVBAR_CLASS}-gear${open ? ` ${DEVBAR_CLASS}-gear-on` : ""}`}
+      aria-label="Settings"
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      onClick={onClick}
+    >
+      <GearIcon />
+    </button>
+  );
+}
+
+function SettingsMenu({
+  open,
+  pane,
+  hostName,
+  branch,
+  bar,
+  highlightBlocks,
+  previewAgent,
+  dashboardHref,
+  onHighlight,
+  onPreviewAgent,
+  onShortcuts,
+  onBack,
+  onDashboard,
+  onHide,
+  onSwitchBranch,
+  onSignOut,
+}: {
+  open: boolean;
+  pane: "main" | "shortcuts";
+  hostName: string;
+  branch?: string;
+  bar: HTMLElement | null;
+  highlightBlocks: boolean;
+  previewAgent: boolean;
+  dashboardHref?: string;
+  onHighlight: (on: boolean) => void;
+  onPreviewAgent: (on: boolean) => void;
+  onShortcuts: () => void;
+  onBack: () => void;
+  onDashboard: () => void;
+  onHide: () => void;
+  onSwitchBranch?: () => void;
+  onSignOut?: () => void;
+}) {
+  const titleId = useId();
+  const [email, setEmail] = useState<string | null>(null);
+  const shortcut = modifierSymbol();
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    void fetchMe()
+      .then((me) => {
+        if (!cancelled) setEmail(me?.user.email ?? null);
+      })
+      .catch(() => {
+        if (!cancelled) setEmail(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  if (!open || !bar) return null;
+  const place = hostName && branch ? `${hostName} · ${branch}` : hostName || branch || "";
+  const panel =
+    pane === "shortcuts" ? (
+      <div role="dialog" aria-labelledby={titleId} className={`${DEVBAR_CLASS}-menu ${DEVBAR_CLASS}-settings`}>
+        <div className={`${DEVBAR_CLASS}-settings-head`}>
+          <button type="button" className={`${DEVBAR_CLASS}-settings-back`} onClick={onBack}>
+            <Chevron />
+            <span id={titleId}>Shortcuts</span>
           </button>
-          <button
-            type="button"
-            className={`${DEVBAR_CLASS}-btn${publishEmphasis ? ` ${DEVBAR_CLASS}-on` : ""}`}
-            aria-pressed={publishOpen}
-            disabled={!doc}
-            onClick={() => {
-              setMenu(null);
-              if (chatOpen) onToggleChat();
-              onTogglePublish();
-            }}
-          >
-            <PublishIcon />
-            <span>
-              Publish
-              {changeCount ? <span className={`${DEVBAR_CLASS}-count`}> {changeCount}</span> : null}
+        </div>
+        <ShortcutRow label="Toggle preview" keys={`${shortcut}⇧P`} />
+        <ShortcutRow label="Agent" keys={`${shortcut}J`} />
+        <ShortcutRow label="Open in dashboard" keys={`${shortcut}D`} />
+        <ShortcutRow label="Hide toolbar" keys={`${shortcut}.`} />
+        <ShortcutRow label="Keyboard shortcuts" keys="?" />
+      </div>
+    ) : (
+      <div role="dialog" aria-labelledby={titleId} className={`${DEVBAR_CLASS}-menu ${DEVBAR_CLASS}-settings`}>
+        <div className={`${DEVBAR_CLASS}-settings-head`}>
+          <span id={titleId} className={`${DEVBAR_CLASS}-settings-kicker`}>
+            Settings
+          </span>
+          {place ? <span className={`${DEVBAR_CLASS}-settings-place`}>{place}</span> : null}
+        </div>
+        <div className={`${DEVBAR_CLASS}-settings-row`}>
+          <BlocksIcon />
+          <span>Highlight editable blocks</span>
+          <Switch on={highlightBlocks} label="Highlight editable blocks" onClick={() => onHighlight(!highlightBlocks)} />
+        </div>
+        <div className={`${DEVBAR_CLASS}-settings-row`}>
+          <EyeIcon />
+          <span>Preview when Agent edits</span>
+          <Switch on={previewAgent} label="Preview when Agent edits" onClick={() => onPreviewAgent(!previewAgent)} />
+        </div>
+        <div className={`${DEVBAR_CLASS}-settings-rule`} />
+        {dashboardHref ? (
+          <button type="button" className={`${DEVBAR_CLASS}-settings-action`} onClick={onDashboard}>
+            <GridIcon />
+            <span>Open in dashboard</span>
+            <kbd className={`${DEVBAR_CLASS}-kbd`}>{shortcut}D</kbd>
+          </button>
+        ) : null}
+        {onSwitchBranch ? (
+          <button type="button" className={`${DEVBAR_CLASS}-settings-action`} onClick={onSwitchBranch}>
+            <span className={`${DEVBAR_CLASS}-settings-icon`} aria-hidden>
+              <GitBranchIcon />
             </span>
+            <span>Switch branch</span>
+            {branch ? <span className={`${DEVBAR_CLASS}-settings-email`}>{branch}</span> : null}
           </button>
-        </div>
-      </footer>
-    </>
+        ) : null}
+        <button type="button" className={`${DEVBAR_CLASS}-settings-action`} onClick={onShortcuts}>
+          <KeyboardIcon />
+          <span>Keyboard shortcuts</span>
+          <kbd className={`${DEVBAR_CLASS}-kbd`}>?</kbd>
+        </button>
+        <button type="button" className={`${DEVBAR_CLASS}-settings-action`} aria-keyshortcuts="Meta+. Control+." onClick={onHide}>
+          <HideIcon />
+          <span>Hide toolbar</span>
+          <kbd className={`${DEVBAR_CLASS}-kbd`}>{shortcut}.</kbd>
+        </button>
+        {onSignOut ? (
+          <>
+            <div className={`${DEVBAR_CLASS}-settings-rule`} />
+            <button type="button" className={`${DEVBAR_CLASS}-settings-action`} onClick={onSignOut}>
+              <LeaveIcon />
+              <span>Sign out</span>
+              {email ? <span className={`${DEVBAR_CLASS}-settings-email`}>{email}</span> : null}
+            </button>
+          </>
+        ) : null}
+      </div>
+    );
+  return createPortal(panel, bar);
+}
+
+function ShortcutRow({ label, keys }: { label: string; keys: string }) {
+  return (
+    <div className={`${DEVBAR_CLASS}-settings-action ${DEVBAR_CLASS}-settings-static`}>
+      <span>{label}</span>
+      <kbd className={`${DEVBAR_CLASS}-kbd`}>{keys}</kbd>
+    </div>
   );
 }
 
-function Dot() {
-  return <span className={`${DEVBAR_CLASS}-dot`} aria-hidden />;
+function Switch({ on, label, onClick }: { on: boolean; label: string; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      className={`${DEVBAR_CLASS}-switch${on ? ` ${DEVBAR_CLASS}-switch-on` : ""}`}
+      aria-checked={on}
+      aria-label={label}
+      onClick={onClick}
+    >
+      <span className={`${DEVBAR_CLASS}-knob`} />
+    </button>
+  );
 }
 
-function Chevron() {
+function placeMenuRight(bar: HTMLElement, button: HTMLElement) {
+  const barRect = bar.getBoundingClientRect();
+  const btnRect = button.getBoundingClientRect();
+  bar.style.setProperty("--menu-right", `${Math.max(0, barRect.right - btnRect.right)}px`);
+}
+
+function placeMenuCenter(bar: HTMLElement, button: HTMLElement) {
+  const barRect = bar.getBoundingClientRect();
+  const btnRect = button.getBoundingClientRect();
+  const menuWidth = Math.min(PAGE_MENU_WIDTH, window.innerWidth - 32);
+  const anchor = btnRect.left + btnRect.width / 2 - barRect.left;
+  let left = anchor - menuWidth / 2;
+  const inset = 16;
+  const minLeft = inset - barRect.left;
+  const maxLeft = window.innerWidth - inset - menuWidth - barRect.left;
+  bar.style.setProperty("--menu-x", `${Math.max(minLeft, Math.min(left, maxLeft))}px`);
+}
+
+function BlocksIcon() {
   return (
-    <svg className={`${DEVBAR_CLASS}-chevron`} width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden>
-      <path d="M2.5 4.5 6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+    <svg className={`${DEVBAR_CLASS}-settings-icon`} width="16" height="16" viewBox="0 0 16 16" aria-hidden>
+      <path d="M3 3h4.2v4.2H3zM8.8 3H13v4.2H8.8zM3 8.8h4.2V13H3z" fill="none" stroke="currentColor" strokeWidth="1.3" />
+      <path d="M8.8 10.2h4.2" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeDasharray="1.4 1.5" />
+    </svg>
+  );
+}
+
+function EyeIcon() {
+  return (
+    <svg className={`${DEVBAR_CLASS}-settings-icon`} width="16" height="16" viewBox="0 0 16 16" aria-hidden>
+      <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" />
+      <circle cx="8" cy="8" r="1.8" fill="none" stroke="currentColor" strokeWidth="1.3" />
+    </svg>
+  );
+}
+
+function GridIcon() {
+  return (
+    <svg className={`${DEVBAR_CLASS}-settings-icon`} width="16" height="16" viewBox="0 0 16 16" aria-hidden>
+      <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" />
+    </svg>
+  );
+}
+
+function KeyboardIcon() {
+  return (
+    <svg className={`${DEVBAR_CLASS}-settings-icon`} width="16" height="16" viewBox="0 0 16 16" aria-hidden>
+      <rect x="1.8" y="3.6" width="12.4" height="8.8" rx="1.4" fill="none" stroke="currentColor" strokeWidth="1.3" />
+      <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" />
+    </svg>
+  );
+}
+
+function HideIcon() {
+  return (
+    <svg className={`${DEVBAR_CLASS}-settings-icon`} width="16" height="16" viewBox="0 0 16 16" aria-hidden>
+      <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" />
+      <path d="M3 13 13 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
     </svg>
   );
 }
 
+function LeaveIcon() {
+  return (
+    <svg className={`${DEVBAR_CLASS}-settings-icon`} width="16" height="16" viewBox="0 0 16 16" aria-hidden>
+      <path d="M6.5 3.2H3.8v9.6h2.7" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+      <path d="M7 8h6.2M11 5.4 13.6 8 11 10.6" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function browserStorage(): Storage | null {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function applySiteTheme(preference: SiteThemePreference) {
+  if (typeof document === "undefined") return;
+  const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+  const dark = resolveSiteTheme(preference, prefersDark) === "dark";
+  const root = document.documentElement;
+  root.dataset.theme = dark ? "dark" : "light";
+  root.style.colorScheme = preference === "system" ? "light dark" : dark ? "dark" : "light";
+  root.classList.toggle("dark", dark);
+  root.classList.toggle("light", !dark);
+}
+
 function PageMenu({
   label,
   doc,
+  dashboardHref,
+  bar,
   open,
+  expanded,
   onToggle,
 }: {
   label: string;
   doc: (PageMenuDoc & { workspaceId: string }) | null;
+  dashboardHref?: string;
+  bar: HTMLElement | null;
   open: boolean;
+  expanded: boolean;
   onToggle: () => void;
 }) {
-  const [docs, setDocs] = useState<DocListItem[] | null>(null);
-  const [models, setModels] = useState<RouteModel[] | null>(null);
+  const [rows, setRows] = useState<PageNavItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [query, setQuery] = useState("");
   const listId = useId();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const filterRef = useRef<HTMLInputElement>(null);
+  const requestRef = useRef(0);
+  const cacheRef = useRef(new Map<string, { rows: PageNavItem[]; total: number }>());
 
   useEffect(() => {
-    if (!open) setQuery("");
+    if (open) return;
+    setQuery("");
   }, [open]);
 
-  useEffect(() => {
-    if (!open || !doc || docs) return;
-    let cancelled = false;
-    void Promise.all([fetchDocs(doc.workspaceId), fetchSchema(doc.workspaceId)])
-      .then(([listed, schema]) => {
-        if (cancelled) return;
-        setDocs(listed.docs);
-        setModels(
-          (schema.schema?.payload.models ?? []).map((model) => ({
-            type: model.type,
-            ...(model.route !== undefined ? { route: model.route } : {}),
-            ...(model.indexSlug ? { indexSlug: model.indexSlug } : {}),
-          })),
-        );
+  useLayoutEffect(() => {
+    if (!open) return;
+    filterRef.current?.focus({ preventScroll: true });
+  }, [open]);
+
+  useLayoutEffect(() => {
+    const button = buttonRef.current;
+    if (!open || !bar || !button) return;
+    const place = () => placeMenuCenter(bar, button);
+    place();
+    window.addEventListener("resize", place);
+    return () => window.removeEventListener("resize", place);
+  }, [open, bar]);
+
+  const loadPage = useCallback(
+    (offset: number, append: boolean, options?: { silent?: boolean }) => {
+      if (!doc) return;
+      const requestId = ++requestRef.current;
+      const q = query.trim();
+      const cacheKey = pageMenuCacheKey(doc.workspaceId, q);
+      if (append) setLoadingMore(true);
+      else if (!options?.silent) setLoading(true);
+      void fetchDocNav(doc.workspaceId, {
+        q: q || undefined,
+        limit: PAGE_MENU_SIZE,
+        offset,
+        current: doc,
       })
-      .catch(() => {
-        if (!cancelled) setError("Couldn't load pages");
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [open, doc, docs]);
+        .then((page) => {
+          if (requestId !== requestRef.current) return;
+          setTotal(page.total);
+          setRows((prev) => {
+            const next = append ? [...prev, ...page.items] : page.items;
+            cacheRef.current.set(cacheKey, { rows: next, total: page.total });
+            return next;
+          });
+          setError(null);
+        })
+        .catch(() => {
+          if (requestId !== requestRef.current) return;
+          if (!append) {
+            const hit = cacheRef.current.get(cacheKey);
+            if (!hit) setRows([]);
+          }
+          setError("Couldn't load pages");
+        })
+        .finally(() => {
+          if (requestId !== requestRef.current) return;
+          setLoading(false);
+          setLoadingMore(false);
+        });
+    },
+    [doc, query],
+  );
 
-  const items =
-    docs && models ? pageMenuItems({ docs, models, current: doc }) : null;
-  const shown = items ? filterItems(items, query) : null;
+  useEffect(() => {
+    if (!open || !doc) return;
+    const q = query.trim();
+    const cacheKey = pageMenuCacheKey(doc.workspaceId, q);
+    const hit = cacheRef.current.get(cacheKey);
+    if (hit) {
+      setRows(hit.rows);
+      setTotal(hit.total);
+      setError(null);
+    }
+    const timer = window.setTimeout(
+      () => loadPage(0, false, { silent: Boolean(hit) }),
+      q ? 200 : 0,
+    );
+    return () => window.clearTimeout(timer);
+  }, [open, doc, query, loadPage]);
 
-  if (!doc) {
-    return <span className={`${DEVBAR_CLASS}-crumb`}>{label}</span>;
+  function onMenuScroll() {
+    const menu = menuRef.current;
+    if (!menu || loading || loadingMore || rows.length >= total) return;
+    if (menu.scrollTop + menu.clientHeight < menu.scrollHeight - 48) return;
+    loadPage(rows.length, true);
   }
 
+  if (!doc) return <span className={`${DEVBAR_CLASS}-crumb`}>{label}</span>;
+
+  const empty = !loading && !error && rows.length === 0;
+  const menuNode = open ? (
+    <div
+      id={listId}
+      role="menu"
+      aria-label="Pages"
+      className={`${DEVBAR_CLASS}-menu ${DEVBAR_CLASS}-page-menu`}
+    >
+      <MenuBody
+        query={query}
+        onQuery={setQuery}
+        inputRef={filterRef}
+        searchClassName={`${DEVBAR_CLASS}-page-search`}
+        showFilter
+        empty={empty}
+        emptyLabel={query.trim() ? "Nothing matches" : "No pages"}
+        error={error}
+        loading={loading && rows.length === 0}
+      />
+      <div ref={menuRef} className={`${DEVBAR_CLASS}-page-menu-list`} onScroll={onMenuScroll}>
+        {rows.map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            role="menuitem"
+            className={`${DEVBAR_CLASS}-option${item.current ? ` ${DEVBAR_CLASS}-current` : ""}`}
+            aria-current={item.current ? "page" : undefined}
+            onClick={() => {
+              if (item.current || item.href === location.pathname) {
+                onToggle();
+                return;
+              }
+              location.assign(item.href);
+            }}
+          >
+            <span>{item.label}</span>
+          </button>
+        ))}
+        {loadingMore ? <p className={`${DEVBAR_CLASS}-note`}>Loading more…</p> : null}
+        {empty && !error ? <p className={`${DEVBAR_CLASS}-note`}>{query.trim() ? "Nothing matches" : "No pages"}</p> : null}
+        {error ? <p className={`${DEVBAR_CLASS}-note ${DEVBAR_CLASS}-note-error`}>{error}</p> : null}
+        {loading && rows.length === 0 ? (
+          <p className={`${DEVBAR_CLASS}-note ${DEVBAR_CLASS}-note-muted`}>Loading pages…</p>
+        ) : null}
+      </div>
+      {dashboardHref ? (
+        <div className={`${DEVBAR_CLASS}-page-menu-foot`}>
+          <button
+            type="button"
+            role="menuitem"
+            className={`${DEVBAR_CLASS}-option`}
+            onClick={() => location.assign(dashboardHref)}
+          >
+            <span>Open in dashboard</span>
+          </button>
+        </div>
+      ) : null}
+    </div>
+  ) : null;
+
   return (
-    <div className={`${DEVBAR_CLASS}-pop`}>
+    <>
       <button
+        ref={buttonRef}
         type="button"
-        className={`${DEVBAR_CLASS}-crumb ${DEVBAR_CLASS}-page`}
+        className={`${DEVBAR_CLASS}-btn ${DEVBAR_CLASS}-page${expanded ? ` ${DEVBAR_CLASS}-page-on` : ""}`}
         aria-haspopup="menu"
-        aria-expanded={open}
+        aria-expanded={expanded}
         aria-controls={listId}
         onClick={onToggle}
       >
         <span>{label}</span>
-        <Chevron />
-      </button>
-      {open ? (
-        <div id={listId} role="menu" aria-label="Pages" className={`${DEVBAR_CLASS}-menu`}>
-          <MenuBody
-            query={query}
-            onQuery={setQuery}
-            showFilter={(items?.length ?? 0) > 7}
-            empty={shown?.length === 0}
-            emptyLabel={query.trim() ? "Nothing matches" : "No pages"}
-            error={error}
-            loading={shown === null && !error}
-          >
-            {shown?.map((item) => (
-              <button
-                key={item.key}
-                type="button"
-                role="menuitem"
-                className={`${DEVBAR_CLASS}-option${item.current ? ` ${DEVBAR_CLASS}-current` : ""}`}
-                aria-current={item.current ? "page" : undefined}
-                onClick={() => {
-                  if (item.current || item.href === location.pathname) {
-                    onToggle();
-                    return;
-                  }
-                  location.assign(item.href);
-                }}
-              >
-                <span>{item.label}</span>
-              </button>
-            ))}
-          </MenuBody>
-        </div>
-      ) : null}
-    </div>
+        <Chevron />
+      </button>
+      {menuNode && bar ? createPortal(menuNode, bar) : null}
+    </>
   );
 }
 
@@ -350,15 +1331,17 @@ function BranchMenu({
   tree,
   workspaceId,
   previewEntryPath,
+  bar,
   open,
-  onToggle,
+  onClose,
 }: {
   branch: string;
   tree?: string;
   workspaceId: string | null;
   previewEntryPath: string;
+  bar: HTMLElement | null;
   open: boolean;
-  onToggle: () => void;
+  onClose: () => void;
 }) {
   const [names, setNames] = useState<string[] | null>(null);
   const [defaultBranch, setDefaultBranch] = useState<string | null>(null);
@@ -390,87 +1373,66 @@ function BranchMenu({
     };
   }, [open, workspaceId, names, branch]);
 
-  const shown = names ? filterItems(names.map((name) => ({ key: name, label: name })), query) : null;
-
-  if (!workspaceId) {
-    return (
-      <span className={`${DEVBAR_CLASS}-crumb ${DEVBAR_CLASS}-branch`}>
-        <GitBranchIcon />
-        <span>{branch}</span>
-      </span>
-    );
-  }
+  if (!open || !bar) return null;
 
-  return (
-    <div className={`${DEVBAR_CLASS}-pop`}>
-      <button
-        type="button"
-        className={`${DEVBAR_CLASS}-crumb ${DEVBAR_CLASS}-branch`}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        aria-controls={listId}
-        aria-label={`Branch ${branch}`}
-        aria-busy={busy}
-        disabled={busy}
-        onClick={onToggle}
-      >
-        <GitBranchIcon />
-        <span>{branch}</span>
-        <Chevron />
-      </button>
-      {open ? (
-        <div id={listId} role="menu" aria-label="Branches" className={`${DEVBAR_CLASS}-menu ${DEVBAR_CLASS}-menu-end`}>
-          <MenuBody
-            query={query}
-            onQuery={setQuery}
-            showFilter={(names?.length ?? 0) > 7}
-            empty={shown?.length === 0}
-            emptyLabel={query.trim() ? "Nothing matches" : "No branches"}
-            error={error}
-            loading={shown === null && !error}
-          >
-            {shown?.map((item) => (
-              <button
-                key={item.key}
-                type="button"
-                role="menuitem"
-                className={`${DEVBAR_CLASS}-option${item.label === branch ? ` ${DEVBAR_CLASS}-current` : ""}`}
-                aria-current={item.label === branch ? "true" : undefined}
-                disabled={busy}
-                onClick={() => {
-                  if (item.label === branch) {
-                    onToggle();
-                    return;
-                  }
-                  setBusy(true);
-                  setError(null);
-                  void switchPreviewBranch({
-                    workspaceId,
-                    branch: item.label,
-                    tree,
-                    redirect: location.pathname + location.search + location.hash,
-                    previewEntryPath,
-                  })
-                    .catch((err: unknown) => {
-                      setBusy(false);
-                      setError(err instanceof Error ? err.message : "Couldn't switch branch");
-                    });
-                }}
-              >
-                <span>{item.label}</span>
-                {item.label === defaultBranch ? <span className={`${DEVBAR_CLASS}-meta`}>default</span> : null}
-              </button>
-            ))}
-          </MenuBody>
-        </div>
-      ) : null}
-    </div>
+  const shown = names ? filterItems(names.map((name) => ({ key: name, label: name })), query) : null;
+  return createPortal(
+    <div id={listId} role="menu" aria-label="Branches" className={`${DEVBAR_CLASS}-menu ${DEVBAR_CLASS}-page-menu`}>
+      {workspaceId ? (
+        <MenuBody
+          query={query}
+          onQuery={setQuery}
+          showFilter={(names?.length ?? 0) > 7}
+          empty={shown?.length === 0}
+          emptyLabel={query.trim() ? "Nothing matches" : "No branches"}
+          error={error}
+          loading={shown === null && !error}
+        >
+          {shown?.map((item) => (
+            <button
+              key={item.key}
+              type="button"
+              role="menuitem"
+              className={`${DEVBAR_CLASS}-option${item.label === branch ? ` ${DEVBAR_CLASS}-current` : ""}`}
+              aria-current={item.label === branch ? "true" : undefined}
+              disabled={busy}
+              onClick={() => {
+                if (item.label === branch) {
+                  onClose();
+                  return;
+                }
+                setBusy(true);
+                setError(null);
+                void switchPreviewBranch({
+                  workspaceId,
+                  branch: item.label,
+                  tree,
+                  redirect: location.pathname + location.search + location.hash,
+                  previewEntryPath,
+                }).catch((err: unknown) => {
+                  setBusy(false);
+                  setError(err instanceof Error ? err.message : "Couldn't switch branch");
+                });
+              }}
+            >
+              <span>{item.label}</span>
+              {item.label === defaultBranch ? <span className={`${DEVBAR_CLASS}-meta`}>default</span> : null}
+            </button>
+          ))}
+        </MenuBody>
+      ) : (
+        <p className={`${DEVBAR_CLASS}-note`}>{branch}</p>
+      )}
+    </div>,
+    bar,
   );
 }
 
 function MenuBody({
   query,
   onQuery,
+  inputRef,
+  searchClassName,
   showFilter,
   empty,
   emptyLabel,
@@ -480,33 +1442,51 @@ function MenuBody({
 }: {
   query: string;
   onQuery: (value: string) => void;
+  inputRef?: Ref<HTMLInputElement>;
+  searchClassName?: string;
   showFilter: boolean;
   empty: boolean;
   emptyLabel: string;
   error: string | null;
   loading: boolean;
-  children: ReactNode;
+  children?: ReactNode;
 }) {
   return (
     <>
       {showFilter ? (
-        <input
-          value={query}
-          onChange={(event) => onQuery(event.target.value)}
-          placeholder="Filter"
-          aria-label="Filter"
-          autoComplete="off"
-          spellCheck={false}
-        />
+        <div className={`${DEVBAR_CLASS}-page-menu-search`}>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(event) => onQuery(event.target.value)}
+            placeholder="Search files"
+            aria-label="Search files"
+            autoComplete="off"
+            spellCheck={false}
+            className={searchClassName}
+          />
+        </div>
+      ) : null}
+      {children ? (
+        <>
+          {error ? <p className={`${DEVBAR_CLASS}-note ${DEVBAR_CLASS}-note-error`}>{error}</p> : null}
+          {loading ? <p className={`${DEVBAR_CLASS}-note`}>Loading…</p> : null}
+          {empty && !error ? <p className={`${DEVBAR_CLASS}-note`}>{emptyLabel}</p> : null}
+          {children}
+        </>
       ) : null}
-      {error ? <p className={`${DEVBAR_CLASS}-note ${DEVBAR_CLASS}-note-error`}>{error}</p> : null}
-      {loading ? <p className={`${DEVBAR_CLASS}-note`}>Loading…</p> : null}
-      {empty && !error ? <p className={`${DEVBAR_CLASS}-note`}>{emptyLabel}</p> : null}
-      {children}
     </>
   );
 }
 
+function Chevron() {
+  return (
+    <svg className={`${DEVBAR_CLASS}-chevron`} width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path d="M2.5 4.5 6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 function filterItems<T extends { label: string }>(items: readonly T[], query: string): T[] {
   const needle = query.trim().toLowerCase();
   if (!needle) return [...items];
@@ -542,169 +1522,399 @@ export async function switchPreviewBranch(input: {
   assign(`${input.previewEntryPath}${joiner}ticket=${encodeURIComponent(minted.ticket)}`);
 }
 
+const LIGHT_CSS = `
+.${DEVBAR_CLASS}-host {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+}
+html.backmatter-pointing, html.backmatter-pointing * { cursor: crosshair !important; }
+html.backmatter-pointing [data-backmatter-panel],
+html.backmatter-pointing [data-backmatter-panel] *,
+html.backmatter-pointing [data-backmatter-devbar] { cursor: pointer !important; }
+html.backmatter-blocks [data-backmatter-block] {
+  outline: 1.5px solid oklch(0.56 0.21 295);
+  outline-offset: 2px;
+}
+`;
+
 const BAR_CSS = `
-@keyframes backmatter-devbar-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: none; }
+.${DEVBAR_CLASS}-root {
+  --preview: ${PREVIEW_CHROME_BORDER};
+  --preview-hover: oklch(0.50 0.20 295);
+  --preview-deep: oklch(0.48 0.20 295);
+  --preview-line: oklch(0.66 0.16 295);
+  --preview-outline: oklch(0.72 0.13 295);
+  --preview-ink: oklch(0.98 0.01 295);
+  --preview-ink-soft: oklch(0.88 0.05 295);
+  --preview-on-white: oklch(0.36 0.16 295);
+  --panel: #ffffff;
+  --line: #e7e7e4;
+  --line2: #d8d8d4;
+  --fg: #17171a;
+  --fg2: #5d5d62;
+  --fg3: #8e8e93;
+  --hover: #f3f3f1;
+  --live: oklch(0.66 0.13 150);
+  --shadow-live: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -8px rgba(0, 0, 0, 0.18);
+  --shadow-preview: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 28px -8px oklch(0.45 0.2 295 / 0.5);
+  --ease-out: ${DEVBAR_EASE_OUT};
+  --ease-in: ${DEVBAR_EASE_IN};
+  --ox: 28px;
+  --oy: 20px;
+  color-scheme: light;
+  text-decoration: none;
 }
 .${DEVBAR_CLASS} {
-  position: fixed;
-  right: max(16px, env(safe-area-inset-right, 0px));
-  bottom: 0;
+  all: initial;
+  position: var(--bm-devbar-position, fixed);
+  right: var(--bm-devbar-right, max(16px, env(safe-area-inset-right, 0px)));
+  left: var(--bm-devbar-left, auto);
+  bottom: var(--bm-devbar-bottom, 0px);
   z-index: 2147483000;
-  isolation: isolate;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  display: block;
   width: max-content;
   max-width: calc(100vw - 32px);
-  min-height: 40px;
-  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 4px;
+  height: 40px;
   box-sizing: border-box;
-  border: 2px solid ${PREVIEW_CHROME_BORDER};
-  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;
+  transform-origin: 100% 100%;
+  pointer-events: auto;
+  color: var(--fg);
+  font-family: "Geist Sans", Geist, ui-sans-serif, system-ui, sans-serif;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
   font-variant-numeric: tabular-nums;
-  animation: backmatter-devbar-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  -webkit-font-smoothing: antialiased;
+  text-align: left;
+  cursor: default;
+  user-select: none;
+  transition: color 250ms ease;
 }
-@media (prefers-reduced-motion: reduce) {
-  .${DEVBAR_CLASS} { animation: none; }
+.${DEVBAR_CLASS}[data-hidden="true"] { pointer-events: none; }
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS} { color: var(--preview-ink); }
+.${DEVBAR_CLASS} button, .${DEVBAR_CLASS} input {
+  all: unset;
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
-.${DEVBAR_CLASS}-mode {
-  display: inline-flex;
-  flex-shrink: 0;
+.${DEVBAR_CLASS} button {
+  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 250ms ease, border-color 300ms ease;
+}
+.${DEVBAR_CLASS} button:active:not(:disabled) { transform: scale(0.97); }
+.${DEVBAR_CLASS} button:disabled { cursor: default; }
+.${DEVBAR_CLASS} button:focus-visible, .${DEVBAR_CLASS}-menu input:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1.5px currentColor;
+}
+.${DEVBAR_CLASS} input.${DEVBAR_CLASS}-page-search:focus,
+.${DEVBAR_CLASS} input.${DEVBAR_CLASS}-page-search:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.${DEVBAR_CLASS}-clip {
+  position: relative;
+  height: 40px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid var(--line);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  background: var(--panel);
+  box-shadow: var(--shadow-live);
+  transition: border-color 300ms ease;
+}
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-clip {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.${DEVBAR_CLASS}-flood {
+  position: absolute;
+  z-index: 0;
+  inset: -1px -1px 0 -1px;
+  border-radius: 12px 12px 0 0;
+  background: var(--preview);
+  pointer-events: none;
+  clip-path: circle(0px at var(--ox) var(--oy));
+  transition: clip-path ${DEVBAR_FLOOD_EXIT_MS}ms var(--ease-in);
+}
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-flood {
+  clip-path: circle(150% at var(--ox) var(--oy));
+  transition: clip-path ${DEVBAR_FLOOD_ENTER_MS}ms var(--ease-out);
+}
+.${DEVBAR_CLASS}-root[data-settled] .${DEVBAR_CLASS}-flood { transition: none; }
+.${DEVBAR_CLASS}-row {
+  position: relative;
+  z-index: 1;
+  display: flex;
   align-items: center;
   gap: 2px;
-  padding: 2px;
-  border-radius: 9px;
-  background: #f4f4f5;
+  height: 39px;
+  padding: 0 8px 0 12px;
+  white-space: nowrap;
 }
-.${DEVBAR_CLASS}-mode button {
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-mode {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 6px;
-  height: 26px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: #71717a;
-  font: inherit;
-  cursor: pointer;
-}
-.${DEVBAR_CLASS}-mode button[aria-pressed="true"] {
-  background: #f4efe4;
-  color: #18181b;
+  height: 28px;
+  margin-right: 10px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: var(--preview);
+  color: var(--preview-ink);
 }
-.${DEVBAR_CLASS}-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: #c4841d;
-  flex-shrink: 0;
+.${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-mode {
+  background: transparent;
+  border-color: var(--preview-outline);
 }
-.${DEVBAR_CLASS}-pop { position: relative; min-width: 0; }
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-mode:active:not(:disabled) { background: var(--preview-deep); }
+.${DEVBAR_CLASS}-mark { flex-shrink: 0; }
 .${DEVBAR_CLASS}-crumb {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
   min-width: 0;
-  max-width: min(180px, 100%);
+  max-width: min(180px, 28vw);
   height: 28px;
-  padding: 0 6px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: #18181b;
-  font: inherit;
+  padding: 0 8px;
+  border-radius: 8px;
+  color: var(--fg2);
 }
-button.${DEVBAR_CLASS}-crumb { cursor: pointer; }
-.${DEVBAR_CLASS}-crumb > span {
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-crumb { color: var(--preview-ink-soft); }
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-page {
+  min-width: 0;
+  max-width: min(200px, 34vw);
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-page > span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.${DEVBAR_CLASS}-branch { color: #52525b; }
-.${DEVBAR_CLASS}-chevron { flex-shrink: 0; color: #a1a1aa; }
+.${DEVBAR_CLASS}-page-on { background: var(--hover); }
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-page-on {
+  background: rgba(255, 255, 255, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
+}
+.${DEVBAR_CLASS}-chevron { flex-shrink: 0; color: var(--fg3); }
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-chevron { color: var(--preview-ink-soft); }
 .${DEVBAR_CLASS}-rule {
   width: 1px;
   height: 16px;
   flex-shrink: 0;
-  background: #e4e4e7;
+  margin: 0 6px;
+  background: var(--line2);
 }
-.${DEVBAR_CLASS}-actions {
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-rule { background: var(--preview-line); }
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-btn,
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-publish {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   gap: 6px;
-}
-.${DEVBAR_CLASS}-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
   height: 28px;
-  padding: 0 10px;
-  border: 1px solid #e4e4e7;
+  padding: 0 8px;
   border-radius: 8px;
-  background: #ffffff;
-  color: #18181b;
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
+  border: 0;
+  text-decoration: none;
 }
-.${DEVBAR_CLASS}-agent {
-  border-color: transparent;
-  background: #f4f4f5;
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-btn span,
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-publish span {
+  text-decoration: none;
 }
-.${DEVBAR_CLASS}-agent kbd {
-  font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
+.${DEVBAR_CLASS}-kbd, .${DEVBAR_CLASS}-field, .${DEVBAR_CLASS}-when {
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
-  font-weight: 400;
-  color: #71717a;
+  font-weight: 500;
 }
+.${DEVBAR_CLASS}-kbd, .${DEVBAR_CLASS}-when, .${DEVBAR_CLASS}-field { color: var(--fg3); }
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-kbd,
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-field,
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-when { color: var(--preview-ink-soft); }
 .${DEVBAR_CLASS}-count { font-variant-numeric: tabular-nums; }
-.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-on,
-.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-on:hover:not(:disabled) {
-  background: #18181b;
-  border-color: #18181b;
-  color: #fafafa;
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-publish:not(:disabled) { background: #17171a; color: #fff; }
+.${DEVBAR_CLASS}-root[data-mode="live"] button.${DEVBAR_CLASS}-publish:disabled {
+  background: #f0f0ee;
+  color: var(--fg3);
 }
-.${DEVBAR_CLASS}-on kbd { color: #d4d4d8; }
-.${DEVBAR_CLASS}-menu {
+.${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-publish:not(:disabled) {
+  background: #fff;
+  color: var(--preview-on-white);
+}
+.${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-publish:disabled {
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--preview-ink-soft);
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-btn:disabled { opacity: 0.45; }
+.${DEVBAR_CLASS}-changes, .${DEVBAR_CLASS}-steps, .${DEVBAR_CLASS}-published, .${DEVBAR_CLASS}-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.${DEVBAR_CLASS}-diff { display: inline-flex; gap: 4px; }
+.${DEVBAR_CLASS}-add, .${DEVBAR_CLASS}-del { font-variant-numeric: tabular-nums; }
+.${DEVBAR_CLASS}-dash { color: var(--preview-ink-soft); }
+.${DEVBAR_CLASS}-spin {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1.5px solid var(--preview-line);
+  border-top-color: #fff;
+  border-radius: 999px;
+  animation: ${DEVBAR_CLASS}-spin 800ms linear infinite;
+}
+.${DEVBAR_CLASS}-ring {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1.5px solid var(--preview-line);
+  border-radius: 999px;
+}
+.${DEVBAR_CLASS}-done, .${DEVBAR_CLASS}-check { color: var(--live); }
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-done { color: var(--preview-ink); }
+.${DEVBAR_CLASS}-shimmer {
+  display: inline-block;
+  background-image: linear-gradient(90deg, var(--preview-ink-soft) 0%, #fff 45%, var(--preview-ink-soft) 90%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: ${DEVBAR_CLASS}-shimmer 1.4s linear infinite;
+}
+.${DEVBAR_CLASS}-progress {
   position: absolute;
-  bottom: calc(100% + 8px);
   left: 0;
+  bottom: 0;
   z-index: 2;
+  height: 2px;
+  background: #fff;
+  pointer-events: none;
+  transition: width 300ms linear;
+}
+.${DEVBAR_CLASS}-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.${DEVBAR_CLASS}-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: var(--menu-x, 12px);
+  z-index: 3;
   display: flex;
   flex-direction: column;
   width: 240px;
   max-height: 280px;
   overflow: auto;
   padding: 4px;
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--line);
   border-radius: 10px;
-  background: #ffffff;
+  background: var(--panel);
+  color: var(--fg);
+  box-shadow: var(--shadow-live);
+  box-sizing: border-box;
+}
+.${DEVBAR_CLASS}-page-menu {
+  display: flex;
+  flex-direction: column;
+  width: min(360px, calc(100vw - 32px));
+  max-height: min(420px, calc(100vh - 96px));
+  padding: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+.${DEVBAR_CLASS}-page-menu-search {
+  flex-shrink: 0;
+  padding: 8px 12px 0;
+  border-bottom: 1px solid var(--line);
+}
+.${DEVBAR_CLASS}-page-menu-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: 1px;
+  min-height: 240px;
+  max-height: 320px;
+  overflow: auto;
+  padding: 4px 6px 6px;
+  box-sizing: border-box;
+}
+.${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-page-menu {
+  border-color: var(--preview-line);
+  background: #fff;
+  color: var(--fg);
   box-shadow: 0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06);
 }
-.${DEVBAR_CLASS}-menu-end { left: auto; right: 0; }
 .${DEVBAR_CLASS}-menu input {
   width: 100%;
-  box-sizing: border-box;
   height: 32px;
   margin: 2px 0 4px;
   padding: 0 8px;
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--line);
   border-radius: 7px;
-  background: #ffffff;
-  color: #18181b;
-  font: inherit;
+  background: #fff;
+  color: var(--fg);
   font-size: 16px;
+  cursor: text;
+  user-select: text;
+}
+.${DEVBAR_CLASS} input.${DEVBAR_CLASS}-page-search {
+  display: block;
+  width: 100%;
+  height: 40px;
+  margin: 0;
+  padding: 0 4px 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  cursor: text;
+  user-select: text;
+  box-sizing: border-box;
+}
+.${DEVBAR_CLASS} input.${DEVBAR_CLASS}-page-search::placeholder {
+  color: var(--fg3);
+  font-weight: 400;
+}
+.${DEVBAR_CLASS}-page-menu-foot {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  padding: 0 8px 8px;
+}
+.${DEVBAR_CLASS}-page-menu-foot::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 0 4px 6px;
+  background: var(--line);
 }
 .${DEVBAR_CLASS}-option {
   display: flex;
@@ -713,14 +1923,17 @@ button.${DEVBAR_CLASS}-crumb { cursor: pointer; }
   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;
+  box-sizing: border-box;
+}
+.${DEVBAR_CLASS}-page-menu .${DEVBAR_CLASS}-option {
+  flex-shrink: 0;
+  min-height: 30px;
+  padding: 5px 12px;
+  border-radius: 7px;
+  font-size: 12.5px;
+  line-height: 1.25;
 }
 .${DEVBAR_CLASS}-option > span:first-child {
   min-width: 0;
@@ -728,42 +1941,214 @@ button.${DEVBAR_CLASS}-crumb { cursor: pointer; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.${DEVBAR_CLASS}-current { background: #f4f4f5; }
+.${DEVBAR_CLASS}-current { background: var(--hover); }
 .${DEVBAR_CLASS}-meta {
   margin-left: auto;
   flex-shrink: 0;
-  color: #71717a;
+  color: var(--fg3);
   font-size: 11px;
-  font-weight: 400;
+  font-weight: 500;
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-gear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-left: 4px;
+  border-radius: 8px;
+  background: var(--hover);
+  color: var(--fg2);
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-gear svg {
+  display: block;
+  flex-shrink: 0;
+}
+.${DEVBAR_CLASS}-gear-on { background: var(--line); color: var(--fg); }
+.${DEVBAR_CLASS}-publish-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
+.${DEVBAR_CLASS}-root[data-mode="live"] button.${DEVBAR_CLASS}-publish-on {
+  box-shadow: inset 0 0 0 1px var(--line2);
+}
+.${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-gear {
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--preview-ink);
+}
+.${DEVBAR_CLASS}-settings {
+  right: var(--menu-right, 8px);
+  left: auto;
+  width: 328px;
+  max-height: min(480px, calc(100vh - 80px));
+  padding: 8px;
+  border-radius: 16px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.${DEVBAR_CLASS}-settings-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+  padding: 4px 12px 8px;
+}
+.${DEVBAR_CLASS}-settings-kicker {
+  color: var(--fg3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.${DEVBAR_CLASS}-settings-place {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--fg3);
+  font-size: 12px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${DEVBAR_CLASS}-settings-row,
+.${DEVBAR_CLASS}-settings-action,
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-settings-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 8px;
+  color: var(--fg);
+  text-align: left;
+  box-sizing: border-box;
+}
+.${DEVBAR_CLASS}-settings-row.${DEVBAR_CLASS}-settings-theme {
+  flex-wrap: wrap;
+  row-gap: 8px;
+  padding-bottom: 4px;
+}
+.${DEVBAR_CLASS}-settings-theme > span:nth-child(2) {
+  flex: 1 1 auto;
+}
+.${DEVBAR_CLASS}-settings-row > span:nth-child(2),
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-settings-action > span:nth-child(2) {
+  min-width: 0;
+  flex: 1;
+}
+.${DEVBAR_CLASS}-settings-icon { flex-shrink: 0; color: var(--fg2); }
+.${DEVBAR_CLASS}-settings-rule { height: 1px; margin: 6px 12px; background: var(--line); }
+.${DEVBAR_CLASS}-segment {
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--hover);
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-segment-btn {
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 7px;
+  color: var(--fg2);
+  font-size: 12.5px;
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-segment-on {
+  background: #fff;
+  color: var(--fg);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 36px;
+  height: 22px;
+  margin-left: auto;
+  border-radius: 999px;
+  background: #e4e4e1;
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-switch-on { background: var(--preview); }
+.${DEVBAR_CLASS}-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
+  transition: transform 160ms var(--ease-out);
+}
+.${DEVBAR_CLASS}-switch-on .${DEVBAR_CLASS}-knob { transform: translateX(14px); }
+.${DEVBAR_CLASS}-settings .${DEVBAR_CLASS}-kbd { margin-left: auto; color: var(--fg3); }
+.${DEVBAR_CLASS}-settings-email {
+  margin-left: auto;
+  max-width: 46%;
+  overflow: hidden;
+  color: var(--fg3);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-settings-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  color: var(--fg);
+  font-weight: 600;
+}
+.${DEVBAR_CLASS}-settings-back svg { transform: rotate(90deg); }
+.${DEVBAR_CLASS}-settings-static { cursor: default; }
+.${DEVBAR_CLASS}-menu-split {
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--line);
 }
 .${DEVBAR_CLASS}-note {
   margin: 0;
   padding: 8px;
-  color: #71717a;
+  color: var(--fg2);
   font-size: 12px;
-  font-weight: 400;
+  font-weight: 500;
+}
+.${DEVBAR_CLASS}-page-menu .${DEVBAR_CLASS}-note {
+  padding: 8px 12px;
+  font-size: 12.5px;
 }
 .${DEVBAR_CLASS}-note-error { color: #b91c1c; }
+.${DEVBAR_CLASS}-note-muted { color: var(--fg3); }
 @media (hover: hover) {
-  .${DEVBAR_CLASS}-mode button:hover:not(:disabled):not([aria-pressed="true"]) { color: #18181b; }
-  .${DEVBAR_CLASS}-crumb:hover:not(:disabled) { background: #f4f4f5; }
-  .${DEVBAR_CLASS}-btn:hover:not(:disabled):not(.${DEVBAR_CLASS}-on) { background: #fafafa; }
-  .${DEVBAR_CLASS}-agent:hover:not(:disabled):not(.${DEVBAR_CLASS}-on) { background: #ececee; }
-  .${DEVBAR_CLASS}-option:hover:not(:disabled) { background: #f4f4f5; }
-}
-.${DEVBAR_CLASS} button:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 2px;
+  .${DEVBAR_CLASS} button.${DEVBAR_CLASS}-mode:hover:not(:disabled) { background: var(--preview-hover); }
+  .${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-mode:hover:not(:disabled) { background: var(--preview-hover); }
+  .${DEVBAR_CLASS}-root[data-mode="live"] button.${DEVBAR_CLASS}-btn:hover:not(:disabled),
+  .${DEVBAR_CLASS}-root[data-mode="live"] button.${DEVBAR_CLASS}-page:hover:not(:disabled),
+  .${DEVBAR_CLASS}-root[data-mode="live"] button.${DEVBAR_CLASS}-gear:hover,
+  .${DEVBAR_CLASS}-option:hover:not(:disabled),
+  .${DEVBAR_CLASS} button.${DEVBAR_CLASS}-settings-action:hover { background: var(--hover); }
+  .${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-btn:hover:not(:disabled),
+  .${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-page:hover:not(:disabled) { background: var(--preview-hover); }
+  .${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-publish:hover:not(:disabled),
+  .${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-publish:active:not(:disabled) { background: #fff; }
+  .${DEVBAR_CLASS}-root[data-mode="preview"] button.${DEVBAR_CLASS}-btn:active:not(:disabled) { background: var(--preview-deep); }
 }
-.${DEVBAR_CLASS} button:disabled { cursor: default; opacity: 0.5; }
-.${DEVBAR_CLASS}-menu input:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 1px;
+@media (prefers-reduced-motion: reduce) {
+  .${DEVBAR_CLASS}-flood,
+  .${DEVBAR_CLASS} button,
+  .${DEVBAR_CLASS}-clip,
+  .${DEVBAR_CLASS}-progress,
+  .${DEVBAR_CLASS}-knob { transition: none !important; }
+  .${DEVBAR_CLASS}-flood { clip-path: none; opacity: 0; }
+  .${DEVBAR_CLASS}-root[data-mode="preview"] .${DEVBAR_CLASS}-flood { opacity: 1; }
 }
-html.backmatter-pointing, html.backmatter-pointing * { cursor: crosshair !important; }
-html.backmatter-pointing .${DEVBAR_CLASS},
-html.backmatter-pointing .${DEVBAR_CLASS} *,
-html.backmatter-pointing [data-backmatter-panel],
-html.backmatter-pointing [data-backmatter-panel] * { cursor: pointer !important; }
-html.backmatter-pointing .${DEVBAR_CLASS} button:disabled { cursor: default !important; }
+@keyframes ${DEVBAR_CLASS}-spin { to { transform: rotate(360deg); } }
+@keyframes ${DEVBAR_CLASS}-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+:host(.${DEVBAR_CLASS}-pointing) .${DEVBAR_CLASS},
+:host(.${DEVBAR_CLASS}-pointing) .${DEVBAR_CLASS} * { cursor: pointer !important; }
+:host(.${DEVBAR_CLASS}-pointing) .${DEVBAR_CLASS} button:disabled { cursor: default !important; }
 `;