fix(ui): table popout — annotation flow, chrome stacking, sidebar tabs

Tightens the popout so annotations work inside it and chrome doesn't
overlap the dialog.

Annotation flow inside popout:
- Radix Dialog modal={false} so the focus trap doesn't yank focus back
  from CommentPopover's textarea (CommentPopover portals to document.body,
  outside the dialog's DOM subtree).
- Dialog.Content onInteractOutside handler whitelists the annotation
  toolbar, CommentPopover, and FloatingQuickLabelPicker so clicking
  them doesn't dismiss the dialog. Backdrop click + Escape still close.
- aria-describedby={undefined} on Dialog.Content (Radix opt-out; the
  popout doesn't need a description).
- React.memo on TablePopout with a custom comparator (block id/content,
  open, container, imageBaseDir, githubRepo). Prevents upstream Viewer
  re-renders from re-running TanStack's flexRender on every cell, which
  conflicted with web-highlighter's live DOM mutations and caused a
  NotFoundError in React's reconciler.

Widget markers for :has()-based chrome stacking:
- [data-comment-popover="true"] on CommentPopover (both popover + dialog
  variants).
- [data-floating-picker="true"] on FloatingQuickLabelPicker.
- [data-sidebar-tabs="true"] on SidebarTabs (left-side TOC/Files/Versions
  flags that sit on top of the dialog otherwise).
- theme.css extended: sidebar tabs join the annotation sidebar, sticky
  header lane, app header, and overlay scrollbars in dropping to
  z-index -1 while body:has([data-popout="true"]) matches.

Known limitation (not addressed): annotations created inside the popout
show their <mark> only while the popout is open; when it closes, the
<mark> unmounts with the popout's DOM and does not reappear on the
collapsed table. The annotation itself persists in state (sidebar,
shared URLs, exports). Round-tripping visual marks between popout and
collapsed view requires either a second web-highlighter instance or a
switch to the CSS Custom Highlight API — out of scope here.

For provenance purposes, this commit was AI assisted.

Author: backnotprop

packages/ui/components/CommentPopover.tsx

@@ -137,7 +137,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
 
   if (mode === 'dialog') {
     return createPortal(
-      <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      <div data-comment-popover="true" className="fixed inset-0 z-[100] flex items-center justify-center p-4">
         {/* Backdrop */}
         <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
 
@@ -226,6 +226,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   return createPortal(
     <div
       ref={popoverRef}
+      data-comment-popover="true"
       className="fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
       style={dragPosition
         ? { top: dragPosition.top, left: dragPosition.left, width: position.width }

packages/ui/components/FloatingQuickLabelPicker.tsx

@@ -113,6 +113,7 @@ export const FloatingQuickLabelPicker: React.FC<FloatingQuickLabelPickerProps> =
     <div
       ref={ref}
       data-quick-label-picker
+      data-floating-picker="true"
       className="fixed z-[100]"
       style={{
         top: position.top,

packages/ui/components/blocks/TablePopout.tsx

@@ -32,7 +32,7 @@ interface TablePopoutProps {
 // Table expects for an accessor-based column definition.
 type Row = Record<string, string>;
 
-export const TablePopout: React.FC<TablePopoutProps> = ({
+const TablePopoutImpl: React.FC<TablePopoutProps> = ({
   block,
   open,
   onClose,
@@ -135,14 +135,31 @@ export const TablePopout: React.FC<TablePopoutProps> = ({
   const totalRows = data.length;
 
   return (
-    <Dialog.Root open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
+    <Dialog.Root open={open} onOpenChange={(next) => { if (!next) onClose(); }} modal={false}>
       <Dialog.Portal container={container ?? undefined}>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0" />
         <Dialog.Content
           className="fixed left-1/2 top-1/2 z-50 w-[calc(100vw-4rem)] max-w-[min(calc(100vw-4rem),1500px)] max-h-[calc(100vh-4rem)] -translate-x-1/2 -translate-y-1/2 bg-background border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden"
           data-block-id={block.id}
           data-popout="true"
+          aria-describedby={undefined}
           onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            // With modal={false}, Radix treats any click outside Dialog.Content
+            // as dismissal. Our annotation stack (toolbar, comment popover,
+            // quick-label picker) portals to document.body — clicks on them
+            // are outside the dialog DOM but logically part of this session.
+            // Keep the dialog open when the interaction lands on any of them.
+            const target = e.target as Node | null;
+            if (!target || !(target instanceof Element)) return;
+            if (
+              target.closest('.annotation-toolbar') ||
+              target.closest('[data-comment-popover="true"]') ||
+              target.closest('[data-floating-picker="true"]')
+            ) {
+              e.preventDefault();
+            }
+          }}
         >
           <Dialog.Title className="sr-only">Table</Dialog.Title>
           <Dialog.Close asChild>
@@ -266,6 +283,26 @@ export const TablePopout: React.FC<TablePopoutProps> = ({
   );
 };
 
+// Memoize on meaningful props (block identity, content, open, container).
+// Upstream Viewer re-renders (annotation toolbar opening, selection change,
+// hover state shuffling) keep firing while the popout is mounted. Without
+// this memo, TanStack's flexRender re-evaluates every cell on every parent
+// re-render, which conflicts with web-highlighter's DOM mutations (the
+// library inserts <mark> tags into the live DOM) and React's reconciler
+// throws NotFoundError trying to remove nodes it doesn't own.
+// Callback identity is intentionally ignored — the behavior is stable even
+// if the parent hands us new function references.
+export const TablePopout = React.memo(
+  TablePopoutImpl,
+  (prev, next) =>
+    prev.block.id === next.block.id &&
+    prev.block.content === next.block.content &&
+    prev.open === next.open &&
+    prev.container === next.container &&
+    prev.imageBaseDir === next.imageBaseDir &&
+    prev.githubRepo === next.githubRepo,
+);
+
 const SortIndicator: React.FC<{ dir: false | 'asc' | 'desc' }> = ({ dir }) => {
   const activeUp = dir === 'asc';
   const activeDown = dir === 'desc';

packages/ui/components/sidebar/SidebarTabs.tsx

@@ -29,6 +29,7 @@ export const SidebarTabs: React.FC<SidebarTabsProps> = ({
 }) => {
   return (
     <div
+      data-sidebar-tabs="true"
       className={`flex flex-col gap-1 pt-3 pl-0.5 flex-shrink-0 ${className ?? ""}`}
     >
       {/* TOC tab */}

packages/ui/theme.css

@@ -302,6 +302,7 @@ body {
 body:has([data-popout="true"]) [data-annotation-panel="true"],
 body:has([data-popout="true"]) [data-sticky-header-lane="true"],
 body:has([data-popout="true"]) [data-app-header="true"],
+body:has([data-popout="true"]) [data-sidebar-tabs="true"],
 body:has([data-popout="true"]) .os-scrollbar {
   z-index: -1;
 }