@drawnagency/primitives 0.1.93 → 0.1.95

package/src/components/shared/HistoryPopover.tsx

@@ -1,104 +1,283 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo, lazy, Suspense } from "react";
 import { cn } from "../../lib/cn";
-import { formatDateTime } from "../../lib/timestamp";
-import { Button } from "./Button";
-
-interface CommitItem {
-  sha: string;
-  date: string;
-  message: string;
-}
+import { historyRestoreEvent, historyRestoreFailedEvent } from "../../lib/events";
+import {
+  buildHistoryTree, maxNodeCount,
+  type HistoryCommit, type HistoryGroup, type HistoryNode,
+} from "../../lib/history-buckets";
+// Lazy: Navigation is a client:load island on VIEWER pages too, and this pulls
+// in EditorModal. The modal only renders behind the edit-mode gate, so those
+// bytes shouldn't sit in every viewer's bundle.
+const HistoryChangesModal = lazy(() =>
+  import("./HistoryChangesModal").then((m) => ({ default: m.HistoryChangesModal })));
 
 interface HistoryPopoverProps {
   onSelectCommit: (sha: string, date: string) => void;
+  /** Editor holds unsaved local changes; restoring would discard them. */
+  hasUnsavedChanges?: boolean;
 }
 
-export function HistoryPopover({ onSelectCommit }: HistoryPopoverProps) {
-  const [commits, setCommits] = useState<CommitItem[]>([]);
+const PER_PAGE = 100;
+const MAX_PAGES = 10; // 1000-commit cap
+
+/** One entry per zoom level. The root level has no node. */
+interface Frame {
+  label: string;
+  node: HistoryNode | null;
+}
+
+const Chevron = () => (
+  <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+       strokeWidth="1.7" aria-hidden="true">
+    <path d="M3.5 1.5L7 5l-3.5 3.5" />
+  </svg>
+);
+
+const BackArrow = () => (
+  <svg width="11" height="11" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+       strokeWidth="1.7" aria-hidden="true">
+    <path d="M6.5 1.5L3 5l3.5 3.5" />
+  </svg>
+);
+
+/** Browse-to-this-version: a pointer cursor — "go look at the site as it was". */
+const BrowseCursor = () => (
+  <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M3.6 1.9a.4.4 0 0 1 .66-.3l8 6.7a.4.4 0 0 1-.23.71l-3.4.2 1.94 3.5a.4.4 0 0 1-.17.54l-1.4.75a.4.4 0 0 1-.54-.18l-1.9-3.55-2.3 2.2a.4.4 0 0 1-.68-.29z" />
+  </svg>
+);
+
+function Volume({ count, max }: { count: number; max: number }) {
+  // sqrt so a 200-commit year doesn't flatten every other bar to nothing.
+  const pct = count > 0 ? Math.round(Math.min(1, Math.sqrt(count / max)) * 100) : 0;
+  return (
+    <span className="flex items-center gap-1.5" aria-hidden="true">
+      <span className="block h-[3px] w-9 rounded-sm bg-base-accent">
+        <span className="block h-[3px] rounded-sm bg-primary" style={{ width: `${pct}%` }} />
+      </span>
+      <span className="min-w-[20px] text-right text-[10.5px] tabular-nums text-base-contrast-light">
+        {count}
+      </span>
+    </span>
+  );
+}
+
+export function HistoryPopover({ onSelectCommit, hasUnsavedChanges = false }: HistoryPopoverProps) {
+  const [commits, setCommits] = useState<HistoryCommit[]>([]);
   const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [stack, setStack] = useState<Frame[]>([{ label: "History", node: null }]);
+  const [info, setInfo] = useState<HistoryNode | null>(null);
+  // Restore ends by reloading the page, so this only has to hold long enough to
+  // block a second dispatch during the load + save window.
+  const [restoring, setRestoring] = useState(false);
+  const [restoreError, setRestoreError] = useState<string | null>(null);
 
-  const fetchPage = useCallback(async (pageNum: number) => {
-    const isFirst = pageNum === 1;
-    if (isFirst) setLoading(true);
-    else setLoadingMore(true);
-
-    try {
-      const res = await fetch(`/api/history?page=${pageNum}&per_page=20`);
-      if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
-      const data = await res.json();
-      const items = data.items as CommitItem[];
-      setCommits((prev) => isFirst ? items : [...prev, ...items]);
-      setHasMore(items.length === 20);
-      setPage(pageNum);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load history");
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
-    }
-  }, []);
+  // A successful restore reloads, so only failures ever come back.
+  useEffect(() => historyRestoreFailedEvent.listen(({ message }) => {
+    setRestoring(false);
+    setRestoreError(message);
+  }), []);
 
   useEffect(() => {
-    fetchPage(1);
-  }, [fetchPage]);
+    let live = true;
+    (async () => {
+      const all: HistoryCommit[] = [];
+      try {
+        for (let page = 1; page <= MAX_PAGES; page++) {
+          const res = await fetch(`/api/history?page=${page}&per_page=${PER_PAGE}`);
+          if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
+          const data = (await res.json()) as { items: HistoryCommit[] };
+          all.push(...data.items);
+          if (data.items.length < PER_PAGE) break;
+        }
+        if (live) setCommits(all);
+      } catch (err) {
+        if (live) setError(err instanceof Error ? err.message : "Failed to load history");
+      } finally {
+        if (live) setLoading(false);
+      }
+    })();
+    return () => { live = false; };
+  }, []);
+
+  const groups = useMemo(() => buildHistoryTree(commits, new Date()), [commits]);
+  const max = useMemo(() => maxNodeCount(groups), [groups]);
+
+  const dateOf = useCallback(
+    (sha: string | null) => commits.find((c) => c.sha === sha)?.date ?? "",
+    [commits],
+  );
+
+  const browse = useCallback((node: HistoryNode) => {
+    if (!node.newestSha) return;
+    onSelectCommit(node.newestSha, dateOf(node.newestSha));
+  }, [onSelectCommit, dateOf]);
+
+  const zoomTo = useCallback((depth: number) => {
+    setStack((s) => s.slice(0, depth + 1));
+  }, []);
+
+  const current = stack[stack.length - 1];
+  const atRoot = stack.length === 1;
 
   if (loading) {
-    return (
-      <div className="p-4 text-center text-xs text-base-contrast-light">
-        Loading history...
-      </div>
-    );
+    return <div className="p-4 text-center text-xs text-base-contrast-light">Loading history…</div>;
   }
-
   if (error) {
-    return (
-      <div className="p-4 text-center text-xs text-red-600">
-        {error}
-      </div>
-    );
+    return <div className="p-4 text-center text-xs text-red-600">{error}</div>;
   }
-
   if (commits.length === 0) {
-    return (
-      <div className="p-4 text-center text-xs text-base-contrast-light">
-        No history found
-      </div>
-    );
+    return <div className="p-4 text-center text-xs text-base-contrast-light">No history found</div>;
   }
 
-  return (
-    <div className="max-h-64 overflow-y-auto">
-      <ul className="py-1">
-        {commits.map((commit) => (
-          <li key={commit.sha}>
+  // Empty buckets are omitted by buildHistoryTree, so every node here has edits.
+  const row = (node: HistoryNode) => {
+    const expandable = node.children.length > 0;
+    const full = node.sublabel ? `${node.label} ${node.sublabel}` : node.label;
+    return (
+      <li key={node.id} className="group flex items-center pr-1.5 hover:bg-base-accent">
+        <span className="flex w-6 shrink-0 items-center justify-center self-stretch">
+          {expandable ? (
             <button
-              onClick={() => onSelectCommit(commit.sha, commit.date)}
-              className={cn(
-                "w-full cursor-pointer px-4 py-2 text-left text-xs transition-colors",
-                "hover:bg-base-accent text-base-contrast-light hover:text-base-contrast",
-              )}
+              type="button"
+              aria-label={`Open ${node.label}`}
+              onClick={() => setStack((s) => [...s, { label: node.label, node }])}
+              className="flex h-[22px] w-5 cursor-pointer items-center justify-center rounded text-base-contrast-light hover:bg-base-accent hover:text-primary"
             >
-              {formatDateTime(commit.date)}
+              <Chevron />
             </button>
-          </li>
-        ))}
-      </ul>
-      {hasMore && (
-        <div className="border-t border-base-200 p-2 text-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => fetchPage(page + 1)}
-            disabled={loadingMore}
+          ) : (
+            <span aria-hidden="true" className="text-[9px] text-base-contrast-light">·</span>
+          )}
+        </span>
+
+        {/* Primary action is "what changed here?" — the summary is what an editor
+            is usually after; browsing is the deliberate second step. The edit
+            count rides in the label because the volume bar is decorative and
+            hidden from screen readers. */}
+        <button
+          type="button"
+          aria-label={`${full} — ${node.count} edit${node.count === 1 ? "" : "s"} — what changed`}
+          onClick={() => setInfo(node)}
+          className="min-w-0 flex-1 cursor-pointer truncate py-1.5 text-left text-xs text-base-contrast"
+        >
+          {node.label}
+          {node.sublabel && (
+            <span className="ml-1.5 text-[11px] text-base-contrast-light">{node.sublabel}</span>
+          )}
+        </button>
+
+        <Volume count={node.count} max={max} />
+
+        {node.newestSha && (
+          <button
+            type="button"
+            aria-label={`Browse ${full}`}
+            onClick={() => browse(node)}
+            // focus-visible as well as group-hover: keyboard users never trigger
+            // a hover, so without it this control is invisible to them.
+            className="ml-1.5 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-base-contrast-light opacity-50 hover:bg-base-accent hover:text-primary focus-visible:opacity-100 group-hover:opacity-100"
           >
-            {loadingMore ? "Loading..." : "Load more"}
-          </Button>
+            <BrowseCursor />
+          </button>
+        )}
+      </li>
+    );
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {!atRoot && current.node && (
+        <div className="sticky top-0 z-10 flex items-center gap-1.5 border-b border-base-200 bg-base-accent/40 px-1.5 py-1.5">
+          <button
+            type="button"
+            aria-label="Back"
+            onClick={() => zoomTo(stack.length - 2)}
+            className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
+          >
+            <BackArrow />
+          </button>
+
+          <nav
+            aria-label="History trail"
+            className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-[11.5px] whitespace-nowrap"
+          >
+            {stack.map((f, i) =>
+              i === stack.length - 1 ? (
+                <span key={`${f.label}-${i}`} className="truncate font-semibold text-base-contrast">
+                  {f.label}
+                </span>
+              ) : (
+                <span key={`${f.label}-${i}`} className="flex shrink-0 items-center gap-1">
+                  <button
+                    type="button"
+                    onClick={() => zoomTo(i)}
+                    className="cursor-pointer rounded px-0.5 text-primary hover:bg-base-accent"
+                  >
+                    {f.label}
+                  </button>
+                  <span aria-hidden="true" className="text-base-contrast-light">›</span>
+                </span>
+              ),
+            )}
+          </nav>
+
+          {/* Volume only. Acting on the level you're inside means going back a
+              step and using its row — the bar stays a "where am I", not a
+              second set of controls competing with the rows below it. */}
+          <span className="shrink-0">
+            <Volume count={current.node.count} max={max} />
+          </span>
         </div>
       )}
+
+      <div className="flex-1 overflow-y-auto py-1">
+        {atRoot ? (
+          groups.map((g: HistoryGroup) => (
+            <section key={g.id} role="group" aria-label={g.label}>
+              <h3 className="px-3 pt-2.5 pb-1 text-[9.5px] font-medium tracking-[0.07em] text-base-contrast-light uppercase">
+                {g.label}
+              </h3>
+              {g.nodes.length === 0 ? (
+                <p className="px-3 pb-1 text-[11px] text-base-contrast-light">No edits</p>
+              ) : (
+                <ul className="list-none p-0">{g.nodes.map(row)}</ul>
+              )}
+            </section>
+          ))
+        ) : (
+          <ul className="list-none p-0">{(current.node?.children ?? []).map(row)}</ul>
+        )}
+      </div>
+
+      {info && (
+        <Suspense fallback={null}>
+          <HistoryChangesModal
+            isOpen
+            onClose={() => { setInfo(null); setRestoreError(null); }}
+            title={info.sublabel ? `${info.label} · ${info.sublabel}` : info.label}
+            base={info.baseSha}
+            head={info.newestSha ?? ""}
+            commitCount={info.count}
+            hasUnsavedChanges={hasUnsavedChanges}
+            isRestoring={restoring}
+            restoreError={restoreError}
+            onBrowse={() => { browse(info); setInfo(null); }}
+            onRestore={() => {
+              // Block a second dispatch while the first is still loading and
+              // saving — that would be two racing writes to the same content.
+              if (restoring || !info.newestSha) return;
+              setRestoreError(null);
+              setRestoring(true);
+              historyRestoreEvent.dispatch({
+                sha: info.newestSha,
+                date: dateOf(info.newestSha),
+              });
+            }}
+          />
+        </Suspense>
+      )}
     </div>
   );
 }

package/src/components/shared/Navigation.tsx

@@ -3,7 +3,7 @@ import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
 import type { SiteNav, NavItem } from "../../lib/nav";
-import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent } from "../../lib/events";
+import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, editorDirtyEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
@@ -35,21 +35,28 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   const bp = BP_CLASSES[desktopBreakpoint];
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
+  // Published by EditorShell (a separate island) so the history navigator can
+  // warn that restoring discards unsaved drafts.
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
   const [currentSiteName, setCurrentSiteName] = useState(siteName);
   const [isDark, setIsDark] = useState(false);
   const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
   const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
-  const historyButtonRef = useRef<HTMLButtonElement>(null);
+  // Anchors the history panel to the "Last updated" block rather than the button
+  // inside it: the block's top edge is the divider the panel sits above, and its
+  // mx-4 matches the nav links' px-4, so the panel lines up with them.
+  const historyAnchorRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setIsEditMode(window.location.pathname.startsWith("/edit"));
     const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
+    const unlistenDirty = editorDirtyEvent.listen((d) => setHasUnsavedChanges(d.hasUnsavedChanges));
     const unlistenNav = siteNavChangeEvent.listen((n) => setSiteNav(n));
     const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
     const unlistenName = siteNameChangeEvent.listen((name) => setCurrentSiteName(name));
-    return () => { unlistenEdit(); unlistenNav(); unlistenDark(); unlistenName(); };
+    return () => { unlistenEdit(); unlistenDirty(); unlistenNav(); unlistenDark(); unlistenName(); };
   }, []);
 
   useEffect(() => {
@@ -261,16 +268,30 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
             </div>
           )}
           {lastUpdated && (
-            <div className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
+            <div ref={historyAnchorRef} className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
               {isEditMode ? (
                 <div className="relative">
-                  <button ref={historyButtonRef} onClick={() => setShowHistory((p) => !p)}
-                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors" aria-label="View history">
+                  <button onClick={() => setShowHistory((p) => !p)}
+                    aria-label="View history" aria-expanded={showHistory}
+                    className="inline-flex cursor-pointer items-center gap-1 text-xs text-base-contrast-light transition-colors hover:text-primary">
                     Last updated {formatDate(lastUpdated)}
+                    {/* The panel opens upward, so the caret points up when closed
+                        and flips when open — the affordance that this is a toggle
+                        rather than a label. */}
+                    <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+                      strokeWidth="1.7" aria-hidden="true"
+                      className={cn("transition-transform", showHistory && "rotate-180")}>
+                      <path d="M1.5 6.5L5 3l3.5 3.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
                   </button>
-                  <Popover isOpen={showHistory} onClose={() => setShowHistory(false)} anchorRef={historyButtonRef}
-                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0">
-                    <HistoryPopover onSelectCommit={(sha, date) => { setShowHistory(false); historySelectEvent.dispatch({ sha, date }); }} />
+                  {/* Portalled: the sidebar sets overflow-y-auto, which computes
+                      overflow-x to auto, so a panel wider than the 16rem sidebar
+                      would be clipped. placement="top" opens it upward from the
+                      anchor block, landing it just above the divider. */}
+                  <Popover isOpen={showHistory} onClose={() => setShowHistory(false)} anchorRef={historyAnchorRef}
+                    portal placement="top"
+                    className="w-[22rem] h-[min(34rem,calc(100vh-7rem))] overflow-hidden">
+                    <HistoryPopover hasUnsavedChanges={hasUnsavedChanges} onSelectCommit={(sha, date) => { setShowHistory(false); historySelectEvent.dispatch({ sha, date }); }} />
                   </Popover>
                 </div>
               ) : (

package/src/components/shared/Popover.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import { createPortal } from "react-dom";
 import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { cn } from "../../lib/cn";
 
@@ -9,6 +10,15 @@ interface PopoverProps {
   children: ReactNode;
   align?: "start" | "end" | "auto";
   className?: string;
+  /**
+   * Render into document.body with fixed positioning. Required when the anchor
+   * sits inside a scroll container: the nav sidebar sets `overflow-y-auto`,
+   * which per CSS computes `overflow-x` to `auto`, so an absolutely-positioned
+   * panel wider than the sidebar is clipped and adds a horizontal scrollbar.
+   */
+  portal?: boolean;
+  /** Which side of the anchor to open toward. Only used with `portal`. */
+  placement?: "bottom" | "top";
 }
 
 export function Popover({
@@ -18,13 +28,62 @@ export function Popover({
   children,
   align = "auto",
   className,
+  portal = false,
+  placement = "bottom",
 }: PopoverProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const [resolvedAlign, setResolvedAlign] = useState<"start" | "end">("start");
+  const [fixedPos, setFixedPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null);
 
-  useFocusTrap(panelRef, isOpen);
+  // In portal mode the panel isn't rendered until it's been measured, so the
+  // trap must activate on that second commit — useFocusTrap bails on a null ref
+  // and only re-runs when `active` changes.
+  useFocusTrap(panelRef, isOpen && (!portal || fixedPos !== null));
 
+  // Track the anchor while portalled: the panel is out of normal flow, so it
+  // has to be repositioned on resize and on any ancestor's scroll.
   useLayoutEffect(() => {
+    if (!portal) return;
+    // Drop the stale position on close so the next open re-measures — the
+    // anchor can move while the popover is shut (resize, nav scroll), and a
+    // retained position would also mount the panel before it's been re-measured.
+    if (!isOpen) {
+      setFixedPos(null);
+      return;
+    }
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const update = () => {
+      const r = anchor.getBoundingClientRect();
+      const next = placement === "top"
+        ? { left: r.left, bottom: window.innerHeight - r.top + 4 }
+        : { left: r.left, top: r.bottom + 4 };
+      // The capture-phase scroll listener also fires for scrolling *inside* the
+      // panel, so bail when nothing moved rather than re-rendering the subtree.
+      setFixedPos((prev) =>
+        prev && prev.left === next.left && prev.top === next.top && prev.bottom === next.bottom
+          ? prev
+          : next,
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [isOpen, portal, placement, anchorRef]);
+
+  useLayoutEffect(() => {
+    // Alignment is only consulted by the non-portal return below. In portal
+    // mode this effect is not merely useless but harmful: it writes directly to
+    // panel.style.left to measure, and on a reopen (when the panel mounts on the
+    // first commit because fixedPos is still populated) that wipes the inline
+    // left React set. The follow-up measure computes the same value, so React's
+    // per-key style diff sees no change and never rewrites it — leaving the
+    // panel pinned to the viewport edge.
+    if (portal) return;
     if (!isOpen || align !== "auto") {
       if (!isOpen) setResolvedAlign("start");
       return;
@@ -46,12 +105,22 @@ export function Popover({
   useEffect(() => {
     if (!isOpen) return;
     function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape") return;
+      // A modal opened from inside this popover also closes on Escape. Without
+      // this the one keypress dismisses both, losing the navigator's zoom stack
+      // — inconsistent with the X button, and with the mousedown exemption
+      // below that exists for exactly this stacking.
+      if (document.querySelector("[data-modal-layer]")) return;
+      onClose();
     }
     function onMouseDown(e: MouseEvent) {
       const target = e.target as Node;
       if (panelRef.current?.contains(target)) return;
       if (anchorRef.current?.contains(target)) return;
+      // A modal opened from inside this popover portals to <body>, so it is
+      // "outside" by DOM containment. Closing on its mousedowns would unmount
+      // the modal along with the popover, and would break text selection in it.
+      if (target instanceof Element && target.closest("[data-modal-layer]")) return;
       onClose();
     }
     document.addEventListener("keydown", onKeyDown);
@@ -66,6 +135,30 @@ export function Popover({
 
   const effectiveAlign = align === "auto" ? resolvedAlign : align;
 
+  if (portal) {
+    // Render only once measured. The layout effect above runs after mutation
+    // but before paint, so this costs no visible delay — and it avoids painting
+    // the panel at the top-left corner for a frame before it's positioned.
+    if (!fixedPos) return null;
+    return createPortal(
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="false"
+        style={{
+          position: "fixed",
+          left: `${fixedPos.left}px`,
+          ...(fixedPos.top !== undefined ? { top: `${fixedPos.top}px` } : {}),
+          ...(fixedPos.bottom !== undefined ? { bottom: `${fixedPos.bottom}px` } : {}),
+        }}
+        className={cn("z-50 rounded-md border border-base-200 bg-base shadow-lg", className)}
+      >
+        {children}
+      </div>,
+      document.body,
+    );
+  }
+
   return (
     <div
       ref={panelRef}

package/src/components/shell/EditorModal.tsx

@@ -12,10 +12,15 @@ interface EditorModalProps {
   blocking?: boolean;
   size?: "standard" | "large" | "settings";
   noPadding?: boolean;
+  /**
+   * The content is a tab set: lock the panel to one height per size so switching
+   * tabs never resizes the dialog. Tab panels scroll internally instead.
+   */
+  tabbed?: boolean;
   children: ReactNode;
 }
 
-export function EditorModal({ isOpen, onClose, title, blocking = false, size = "standard", noPadding = false, children }: EditorModalProps) {
+export function EditorModal({ isOpen, onClose, title, blocking = false, size = "standard", noPadding = false, tabbed = false, children }: EditorModalProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const titleId = useId();
 
@@ -44,6 +49,12 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
   return createPortal(
     <div
       data-testid="modal-backdrop"
+      // Marks the whole modal layer (backdrop + panel) so surfaces underneath —
+      // notably Popover's outside-click handler — can tell "a dialog above me is
+      // being used" from "the user clicked away". Without it, any mousedown in a
+      // modal opened from a popover would dismiss the popover and take the modal
+      // with it, and text selection inside the modal would be impossible.
+      data-modal-layer=""
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onMouseDown={
         blocking
@@ -63,8 +74,16 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
           size === "large"
             ? "max-w-[1400px] max-h-[900px] h-[90vh]"
             : size === "settings"
-              ? "max-w-lg min-h-[min(32rem,calc(100vh-4rem))] max-h-[calc(100vh-4rem)]"
-              : "max-w-md max-h-[calc(100vh-4rem)]",
+              ? cn(
+                  "max-w-lg",
+                  tabbed
+                    ? "h-[min(48rem,calc(100vh-4rem))]"
+                    : "min-h-[min(32rem,calc(100vh-4rem))] max-h-[calc(100vh-4rem)]",
+                )
+              : cn(
+                  "max-w-md",
+                  tabbed ? "h-[min(32rem,calc(100vh-4rem))]" : "max-h-[calc(100vh-4rem)]",
+                ),
         )}
       >
         <div className="flex shrink-0 items-center justify-between border-b border-base-200 px-6 py-4">
@@ -81,7 +100,10 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
         </div>
         <div className={cn(
           !noPadding && "px-6 py-4",
-          "flex-1 overflow-y-auto",
+          "flex-1",
+          // Tabbed: the body itself never scrolls, so the tab bar stays pinned
+          // and each panel scrolls within the locked height.
+          tabbed ? "flex min-h-0 flex-col overflow-hidden" : "overflow-y-auto",
           size === "settings" && "flex flex-col",
         )}>
           {children}

package/src/components/shell/EditorModalContext.tsx

@@ -1,13 +1,14 @@
 import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import type { ModalOptions, OpenModal } from "../../lib/registry";
 
-interface ModalState {
+interface ModalState extends ModalOptions {
   title: string;
   content: ReactNode;
 }
 
 interface EditorModalContextValue {
   modalState: ModalState | null;
-  openModal: (title: string, content: ReactNode) => void;
+  openModal: OpenModal;
   closeModal: () => void;
 }
 
@@ -16,8 +17,8 @@ const EditorModalContext = createContext<EditorModalContextValue | null>(null);
 export function EditorModalProvider({ children }: { children: ReactNode }) {
   const [modalState, setModalState] = useState<ModalState | null>(null);
 
-  const openModal = useCallback((title: string, content: ReactNode) => {
-    setModalState({ title, content });
+  const openModal = useCallback((title: string, content: ReactNode, options?: ModalOptions) => {
+    setModalState({ title, content, ...options });
   }, []);
 
   const closeModal = useCallback(() => {