@backmatter/studio 0.0.5 → 0.0.7

package/src/site-bar.tsx

@@ -0,0 +1,769 @@
+// 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";
+import {
+  checkoutBranch,
+  createPreviewTicket,
+  fetchDocs,
+  fetchGit,
+  fetchSchema,
+  type DocListItem,
+} from "./api";
+import { GitBranchIcon } from "./chrome/icons";
+import { matchAppHotkey, modifierSymbol } from "./chrome/hotkeys";
+import { PublishIcon, SparkIcon } from "./chat/icons";
+import { PREVIEW_CHROME_BORDER } from "./preview-frame";
+
+export const DEVBAR_CLASS = "backmatter-devbar";
+
+const DEFAULT_PREVIEW_ENTRY = "/api/backmatter/preview";
+
+export type PageMenuDoc = {
+  locale: string;
+  type: string;
+  slug: string;
+};
+
+export type PageMenuItem = {
+  key: string;
+  label: string;
+  href: string;
+  current: boolean;
+};
+
+/** 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;
+}
+
+type MenuState = "page" | "branch" | null;
+
+export function SiteBar({
+  label,
+  branch,
+  tree,
+  doc,
+  exiting,
+  chatOpen,
+  publishOpen,
+  changeCount,
+  previewEntryPath = DEFAULT_PREVIEW_ENTRY,
+  siteMode = "preview",
+  onExit,
+  onEnterPreview,
+  onToggleChat,
+  onTogglePublish,
+}: {
+  label: string;
+  branch?: string;
+  tree?: string;
+  doc: (PageMenuDoc & { workspaceId: string }) | null;
+  siteMode?: "preview" | "live";
+  exiting?: boolean;
+  chatOpen: boolean;
+  publishOpen: boolean;
+  changeCount: number;
+  previewEntryPath?: string;
+  onExit: () => void;
+  onEnterPreview?: () => void;
+  onToggleChat: () => void;
+  onTogglePublish: () => void;
+}) {
+  const rootRef = useRef<HTMLElement>(null);
+  const [menu, setMenu] = useState<MenuState>(null);
+
+  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;
+      setMenu(null);
+    }
+    document.addEventListener("pointerdown", onPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [menu]);
+
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      if (matchAppHotkey(event) !== "chat") return;
+      setMenu(null);
+    }
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, []);
+
+  function dismissPanels() {
+    if (chatOpen) onToggleChat();
+    if (publishOpen) onTogglePublish();
+  }
+
+  function toggleMenu(next: Exclude<MenuState, null>) {
+    setMenu((open) => {
+      if (open === next) return null;
+      dismissPanels();
+      return next;
+    });
+  }
+
+  const publishEmphasis = publishOpen || changeCount > 0;
+
+  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>
+        <PageMenu
+          label={label}
+          doc={doc}
+          open={menu === "page"}
+          onToggle={() => toggleMenu("page")}
+        />
+        {branch ? (
+          <BranchMenu
+            branch={branch}
+            tree={tree}
+            workspaceId={doc?.workspaceId ?? null}
+            previewEntryPath={previewEntryPath}
+            open={menu === "branch"}
+            onToggle={() => toggleMenu("branch")}
+          />
+        ) : 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>
+          </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}
+            </span>
+          </button>
+        </div>
+      </footer>
+    </>
+  );
+}
+
+function Dot() {
+  return <span className={`${DEVBAR_CLASS}-dot`} aria-hidden />;
+}
+
+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 PageMenu({
+  label,
+  doc,
+  open,
+  onToggle,
+}: {
+  label: string;
+  doc: (PageMenuDoc & { workspaceId: string }) | null;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const [docs, setDocs] = useState<DocListItem[] | null>(null);
+  const [models, setModels] = useState<RouteModel[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const listId = useId();
+
+  useEffect(() => {
+    if (!open) 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 } : {}),
+          })),
+        );
+      })
+      .catch(() => {
+        if (!cancelled) setError("Couldn't load pages");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, doc, docs]);
+
+  const items =
+    docs && models ? pageMenuItems({ docs, models, current: doc }) : null;
+  const shown = items ? filterItems(items, query) : null;
+
+  if (!doc) {
+    return <span className={`${DEVBAR_CLASS}-crumb`}>{label}</span>;
+  }
+
+  return (
+    <div className={`${DEVBAR_CLASS}-pop`}>
+      <button
+        type="button"
+        className={`${DEVBAR_CLASS}-crumb ${DEVBAR_CLASS}-page`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        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>
+  );
+}
+
+function BranchMenu({
+  branch,
+  tree,
+  workspaceId,
+  previewEntryPath,
+  open,
+  onToggle,
+}: {
+  branch: string;
+  tree?: string;
+  workspaceId: string | null;
+  previewEntryPath: string;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const [names, setNames] = useState<string[] | null>(null);
+  const [defaultBranch, setDefaultBranch] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [query, setQuery] = useState("");
+  const listId = useId();
+
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || !workspaceId || names) return;
+    let cancelled = false;
+    void fetchGit(workspaceId)
+      .then((git) => {
+        if (cancelled) return;
+        const listed = git.branches.map((item) => item.name);
+        if (!listed.includes(branch)) listed.unshift(branch);
+        setNames(listed);
+        setDefaultBranch(git.defaultBranch);
+      })
+      .catch(() => {
+        if (!cancelled) setError("Couldn't load branches");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [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>
+    );
+  }
+
+  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>
+  );
+}
+
+function MenuBody({
+  query,
+  onQuery,
+  showFilter,
+  empty,
+  emptyLabel,
+  error,
+  loading,
+  children,
+}: {
+  query: string;
+  onQuery: (value: string) => void;
+  showFilter: boolean;
+  empty: boolean;
+  emptyLabel: string;
+  error: string | null;
+  loading: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      {showFilter ? (
+        <input
+          value={query}
+          onChange={(event) => onQuery(event.target.value)}
+          placeholder="Filter"
+          aria-label="Filter"
+          autoComplete="off"
+          spellCheck={false}
+        />
+      ) : 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 filterItems<T extends { label: string }>(items: readonly T[], query: string): T[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [...items];
+  return items.filter((item) => item.label.toLowerCase().includes(needle));
+}
+
+export async function switchPreviewBranch(input: {
+  workspaceId: string;
+  branch: string;
+  tree?: string;
+  redirect: string;
+  previewEntryPath: string;
+  checkout?: typeof checkoutBranch;
+  ticket?: typeof createPreviewTicket;
+  assign?: (url: string) => void;
+}): Promise<void> {
+  const checkout = input.checkout ?? checkoutBranch;
+  const ticket = input.ticket ?? createPreviewTicket;
+  const assign = input.assign ?? ((url: string) => location.assign(url));
+  await checkout(input.workspaceId, input.branch);
+  let minted: { ticket: string };
+  try {
+    minted = await ticket(input.workspaceId, {
+      redirect: input.redirect,
+      branch: input.branch,
+      tree: input.tree,
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Couldn't open the branch";
+    throw new Error(`Checked out ${input.branch}, but the preview didn't update. ${message}`);
+  }
+  const joiner = input.previewEntryPath.includes("?") ? "&" : "?";
+  assign(`${input.previewEntryPath}${joiner}ticket=${encodeURIComponent(minted.ticket)}`);
+}
+
+const BAR_CSS = `
+@keyframes backmatter-devbar-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.${DEVBAR_CLASS} {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right, 0px));
+  bottom: 0;
+  z-index: 2147483000;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
+  min-height: 40px;
+  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 4px;
+  box-sizing: border-box;
+  border: 2px solid ${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;
+  font-variant-numeric: tabular-nums;
+  animation: backmatter-devbar-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${DEVBAR_CLASS} { animation: none; }
+}
+.${DEVBAR_CLASS}-mode {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: #f4f4f5;
+}
+.${DEVBAR_CLASS}-mode button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #71717a;
+  font: inherit;
+  cursor: pointer;
+}
+.${DEVBAR_CLASS}-mode button[aria-pressed="true"] {
+  background: #f4efe4;
+  color: #18181b;
+}
+.${DEVBAR_CLASS}-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #c4841d;
+  flex-shrink: 0;
+}
+.${DEVBAR_CLASS}-pop { position: relative; min-width: 0; }
+.${DEVBAR_CLASS}-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: min(180px, 100%);
+  height: 28px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #18181b;
+  font: inherit;
+}
+button.${DEVBAR_CLASS}-crumb { cursor: pointer; }
+.${DEVBAR_CLASS}-crumb > 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}-rule {
+  width: 1px;
+  height: 16px;
+  flex-shrink: 0;
+  background: #e4e4e7;
+}
+.${DEVBAR_CLASS}-actions {
+  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;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #18181b;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.${DEVBAR_CLASS}-agent {
+  border-color: transparent;
+  background: #f4f4f5;
+}
+.${DEVBAR_CLASS}-agent kbd {
+  font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 400;
+  color: #71717a;
+}
+.${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}-on kbd { color: #d4d4d8; }
+.${DEVBAR_CLASS}-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  max-height: 280px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid #e4e4e7;
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: 0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06);
+}
+.${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-radius: 7px;
+  background: #ffffff;
+  color: #18181b;
+  font: inherit;
+  font-size: 16px;
+}
+.${DEVBAR_CLASS}-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #18181b;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.${DEVBAR_CLASS}-option > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.${DEVBAR_CLASS}-current { background: #f4f4f5; }
+.${DEVBAR_CLASS}-meta {
+  margin-left: auto;
+  flex-shrink: 0;
+  color: #71717a;
+  font-size: 11px;
+  font-weight: 400;
+}
+.${DEVBAR_CLASS}-note {
+  margin: 0;
+  padding: 8px;
+  color: #71717a;
+  font-size: 12px;
+  font-weight: 400;
+}
+.${DEVBAR_CLASS}-note-error { color: #b91c1c; }
+@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:disabled { cursor: default; opacity: 0.5; }
+.${DEVBAR_CLASS}-menu input:focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 1px;
+}
+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; }
+`;