@beyondwork/docx-react-component 1.0.0 → 1.0.2

package/services/react-word-editor/app/demo/prototype-client.tsx

@@ -1,1080 +0,0 @@
-/**
- * @deprecated This prototype demo client is no longer rendered.
- * The root route (/) now uses HarnessEditorPage with the real WordReviewEditor.
- * This file is kept for reference only.
- */
-"use client";
-
-import { startTransition, useEffect, useId, useState, type ChangeEvent } from "react";
-
-import * as Select from "@radix-ui/react-select";
-import * as Tabs from "@radix-ui/react-tabs";
-import * as Toggle from "@radix-ui/react-toggle";
-import * as ToggleGroup from "@radix-ui/react-toggle-group";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
-import {
-  AlertTriangle,
-  Bold,
-  Check,
-  ChevronDown,
-  CornerDownLeft,
-  Download,
-  FileText,
-  GitCompareArrows,
-  Image,
-  Info,
-  Italic,
-  Link2,
-  Lock,
-  MessageSquare,
-  Monitor,
-  Moon,
-  MoveRight,
-  Sun,
-  Redo2,
-  Shield,
-  ShieldAlert,
-  ShieldCheck,
-  Underline,
-  Undo2,
-  X,
-  XCircle,
-} from "lucide-react";
-
-import type {
-  CompatibilityFeatureClass,
-  DemoCatalogResponse,
-  DemoMarkupDisplay,
-  DemoRailTab,
-  DemoSession,
-  DemoViewMode,
-  PrototypeCalloutBlock,
-  PrototypeCommentDecoration,
-  PrototypeCommentThread,
-  PrototypeFeatureEntry,
-  PrototypeRevisionDecoration,
-  PrototypeRevisionEntry,
-  PrototypeSurfaceBlock,
-  PrototypeTableBlock,
-  PrototypeTableCell,
-  SurfaceBlockSnapshot,
-  SurfaceInlineSegment,
-} from "../../lib/demo-fixtures";
-
-interface DemoPrototypeClientProps {
-  catalog: DemoCatalogResponse;
-}
-
-const selectionActions = [
-  { label: "Bold", icon: Bold },
-  { label: "Italic", icon: Italic },
-  { label: "Underline", icon: Underline },
-  { label: "Comment", icon: MessageSquare },
-  { label: "Link", icon: Link2 },
-  { label: "Clear", icon: X },
-];
-
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
-
-export function DemoPrototypeClient(props: DemoPrototypeClientProps) {
-  const initialSession = props.catalog.sessions[0];
-  const uploadId = useId();
-
-  const [sessionId, setSessionId] = useState(initialSession.id);
-  const [markupDisplay, setMarkupDisplay] = useState<DemoMarkupDisplay>(
-    initialSession.defaultMarkupDisplay,
-  );
-  const [viewMode, setViewMode] = useState<DemoViewMode>(initialSession.defaultViewMode);
-  const [activeRailTab, setActiveRailTab] = useState<DemoRailTab>(initialSession.defaultRailTab);
-  const [trackChangesEnabled, setTrackChangesEnabled] = useState(
-    initialSession.defaultTrackChangesEnabled,
-  );
-  const [activeCommentId, setActiveCommentId] = useState<string | undefined>(
-    initialSession.snapshot.comments.threads[0]?.commentId,
-  );
-  const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>(
-    initialSession.snapshot.trackedChanges.revisions[0]?.revisionId,
-  );
-  const [selectionLabel, setSelectionLabel] = useState<string>("");
-  const [activeCellId, setActiveCellId] = useState<string | undefined>();
-  const [commentStatusOverrides, setCommentStatusOverrides] = useState<
-    Record<string, "open" | "resolved" | "detached">
-  >({});
-  const [revisionStatusOverrides, setRevisionStatusOverrides] = useState<
-    Record<string, "active" | "accepted" | "rejected" | "detached">
-  >({});
-  const [reducedMotion, setReducedMotion] = useState(false);
-  const [darkMode, setDarkMode] = useState(false);
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", darkMode);
-  }, [darkMode]);
-  useEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-      return;
-    }
-
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const syncPreference = () => {
-      setReducedMotion(mediaQuery.matches);
-    };
-
-    syncPreference();
-    mediaQuery.addEventListener?.("change", syncPreference);
-
-    return () => {
-      mediaQuery.removeEventListener?.("change", syncPreference);
-    };
-  }, []);
-  const [isDirty, setIsDirty] = useState(false);
-  const [localUploadName, setLocalUploadName] = useState<string>("");
-
-  const currentSession =
-    props.catalog.sessions.find((s) => s.id === sessionId) ?? initialSession;
-  const snap = currentSession.snapshot;
-
-  const currentComments = snap.comments.threads.map((thread) => ({
-    ...thread,
-    status: commentStatusOverrides[thread.commentId] ?? thread.status,
-  }));
-  const currentRevisions = snap.trackedChanges.revisions.map((rev) => ({
-    ...rev,
-    status: revisionStatusOverrides[rev.revisionId] ?? rev.status,
-  }));
-  const activeComment = currentComments.find((t) => t.commentId === activeCommentId);
-  const activeRevision = currentRevisions.find((r) => r.revisionId === activeRevisionId);
-  const preserveOnlyCount = snap.compatibility.featureEntries.filter(
-    (e) => e.featureClass === "preserve-only",
-  ).length;
-  const warningCount = snap.compatibility.featureEntries.filter(
-    (e) => e.featureClass !== "supported-roundtrip",
-  ).length;
-  const isExportBlocked = snap.compatibility.blockExport;
-
-  function switchSession(nextSessionId: string) {
-    const next = props.catalog.sessions.find((s) => s.id === nextSessionId);
-    if (!next) return;
-    startTransition(() => {
-      setSessionId(next.id);
-      setMarkupDisplay(next.defaultMarkupDisplay);
-      setViewMode(next.defaultViewMode);
-      setActiveRailTab(next.defaultRailTab);
-      setTrackChangesEnabled(next.defaultTrackChangesEnabled);
-      setActiveCommentId(next.snapshot.comments.threads[0]?.commentId);
-      setActiveRevisionId(next.snapshot.trackedChanges.revisions[0]?.revisionId);
-      setSelectionLabel("");
-      setActiveCellId(undefined);
-      setCommentStatusOverrides({});
-      setRevisionStatusOverrides({});
-      setIsDirty(false);
-    });
-  }
-
-  function activateComment(thread: PrototypeCommentThread) {
-    setActiveCommentId(thread.commentId);
-    setActiveRevisionId(undefined);
-    setActiveRailTab("comments");
-    setSelectionLabel(thread.excerpt);
-    // Scroll anchor into view (rail → canvas connection)
-    setTimeout(() => {
-      const el = document.querySelector(`[data-comment-id="${thread.commentId}"]`);
-      el?.scrollIntoView({ behavior: reducedMotion ? "auto" : "smooth", block: "center" });
-    }, 50);
-  }
-
-  function activateRevision(revision: PrototypeRevisionEntry) {
-    setActiveRevisionId(revision.revisionId);
-    setActiveCommentId(undefined);
-    setActiveRailTab("changes");
-    setSelectionLabel(revision.excerpt);
-  }
-
-  function updateCommentStatus(thread: PrototypeCommentThread, nextStatus: "open" | "resolved") {
-    setCommentStatusOverrides((c) => ({ ...c, [thread.commentId]: nextStatus }));
-    setIsDirty(true);
-    setActiveCommentId(thread.commentId);
-    setActiveRailTab("comments");
-  }
-
-  function updateRevisionStatus(revision: PrototypeRevisionEntry, nextStatus: "accepted" | "rejected") {
-    setRevisionStatusOverrides((c) => ({ ...c, [revision.revisionId]: nextStatus }));
-    setIsDirty(true);
-    setActiveRevisionId(revision.revisionId);
-    setActiveRailTab("changes");
-  }
-
-  function handleSegmentClick(segmentId: string, segmentText: string, cellId?: string) {
-    const trimmed = segmentText.trim();
-    setSelectionLabel(trimmed.length > 0 ? trimmed : "Selected range");
-    setActiveCellId(cellId);
-
-    // Check if this segment is in a comment decoration
-    const commentDec = currentSession.commentDecorations.find((d) =>
-      d.segmentIds.includes(segmentId),
-    );
-    if (commentDec) {
-      const thread = currentComments.find((t) => t.commentId === commentDec.commentId);
-      if (thread) { activateComment(thread); return; }
-    }
-
-    // Check if this segment is in a revision decoration
-    const revisionDec = currentSession.revisionDecorations.find((d) =>
-      d.segmentIds.includes(segmentId),
-    );
-    if (revisionDec) {
-      const rev = currentRevisions.find((r) => r.revisionId === revisionDec.revisionId);
-      if (rev) { activateRevision(rev); return; }
-    }
-  }
-
-  function handleCellClick(cellId: string) {
-    setActiveCellId(cellId);
-    setSelectionLabel(`Cell ${cellId}`);
-  }
-
-  function handleUploadChange(event: ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0];
-    if (file) setLocalUploadName(file.name);
-  }
-
-  const saveState = snap.readOnly ? "Read-only" : isDirty ? "Unsaved" : "Ready";
-  const exportState = isExportBlocked ? "Blocked" : preserveOnlyCount > 0 ? "Warnings" : "Ready";
-
-  return (
-    <Tooltip.Provider delayDuration={400}>
-      <main
-        className={`flex h-screen flex-col bg-canvas text-primary ${reducedMotion ? "[&_*]:!transition-none [&_*]:!animation-none" : ""}`}
-      >
-        {/* Demo utility bar */}
-        <div className="flex h-9 shrink-0 items-center gap-3 border-b border-border bg-surface px-3 text-xs">
-          <span className="font-medium text-tertiary">Demo</span>
-
-          <Select.Root value={sessionId} onValueChange={switchSession}>
-            <Select.Trigger className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-secondary transition-colors hover:bg-surface-hover outline-none ${focusRingClass}`}>
-              <Select.Value />
-              <Select.Icon><ChevronDown className="h-3 w-3" /></Select.Icon>
-            </Select.Trigger>
-            <Select.Portal>
-              <Select.Content className="overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border z-50" position="popper" sideOffset={4}>
-                <Select.Viewport className="p-1">
-                  {props.catalog.sessions.map((session) => (
-                    <Select.Item key={session.id} value={session.id} className={`flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface ${focusRingClass}`}>
-                      <Select.ItemText>{session.title}</Select.ItemText>
-                      <span className={`shrink-0 text-[10px] font-medium rounded px-1 py-px ${
-                        session.sourceKind === "fixture"
-                          ? "text-insert bg-insert-soft"
-                          : session.sourceKind === "scenario"
-                            ? "text-accent bg-accent-soft"
-                            : "text-secondary bg-subtle"
-                      }`}>
-                        {session.sourceKind}
-                      </span>
-                    </Select.Item>
-                  ))}
-                </Select.Viewport>
-              </Select.Content>
-            </Select.Portal>
-          </Select.Root>
-
-          <span className={`text-[10px] font-medium rounded px-1 py-px ${
-            currentSession.sourceKind === "fixture"
-              ? "text-insert bg-insert-soft"
-              : currentSession.sourceKind === "scenario"
-                ? "text-accent bg-accent-soft"
-                : "text-secondary bg-subtle"
-          }`}>
-            {currentSession.sourceKind}
-          </span>
-
-          <div className="h-3 w-px bg-border" />
-
-          <label className="flex items-center gap-1.5 text-tertiary cursor-pointer">
-            <FileText className="h-3 w-3" />
-            <span>{localUploadName || "Upload .docx"}</span>
-            <input accept=".docx" className="sr-only" id={uploadId} type="file" onChange={handleUploadChange} />
-          </label>
-
-          <div className="flex-1" />
-
-          <span className="text-tertiary/50">Internal prototype · non-production</span>
-
-          <button
-            type="button"
-            onClick={() => setDarkMode((d) => !d)}
-            className="inline-flex h-6 w-6 items-center justify-center rounded-md text-tertiary hover:bg-surface-hover transition-colors"
-            aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
-          >
-            {darkMode ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-          </button>
-
-          <label className="flex items-center gap-1.5 text-tertiary cursor-pointer select-none">
-            <input checked={reducedMotion} type="checkbox" className="h-3 w-3 accent-accent" onChange={(e) => setReducedMotion(e.target.checked)} />
-            Reduced motion
-          </label>
-        </div>
-
-        {/* Editor shell */}
-        <div className="flex flex-1 min-h-0">
-          {/* Main column */}
-          <div className="flex flex-1 flex-col min-w-0">
-            {/* Toolbar */}
-            <header className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
-              <div className="flex items-center gap-0.5">
-                <ToolbarIconButton icon={Undo2} label="Undo" disabled={!snap.commandState.canUndo} />
-                <ToolbarIconButton icon={Redo2} label="Redo" disabled={!snap.commandState.canRedo} />
-                <div className="mx-1 h-4 w-px bg-border" />
-                <Select.Root defaultValue="body">
-                  <Select.Trigger className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-primary transition-colors hover:bg-surface outline-none ${focusRingClass}`}>
-                    <Select.Value />
-                    <Select.Icon><ChevronDown className="h-3 w-3 text-tertiary" /></Select.Icon>
-                  </Select.Trigger>
-                  <Select.Portal>
-                    <Select.Content className="overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border z-50" position="popper" sideOffset={4}>
-                      <Select.Viewport className="p-1">
-                        {["Body", "Heading 1", "Heading 2"].map((v) => (
-                          <Select.Item key={v} value={v.toLowerCase().replace(" ", "")} className={`flex cursor-pointer items-center rounded-md px-2 py-1.5 text-xs outline-none data-[highlighted]:bg-surface ${focusRingClass}`}>
-                            <Select.ItemText>{v}</Select.ItemText>
-                          </Select.Item>
-                        ))}
-                      </Select.Viewport>
-                    </Select.Content>
-                  </Select.Portal>
-                </Select.Root>
-                <div className="mx-1 h-4 w-px bg-border" />
-                <ToolbarIconButton icon={Bold} label="Bold" disabled={snap.readOnly} />
-                <ToolbarIconButton icon={Italic} label="Italic" disabled={snap.readOnly} />
-                <ToolbarIconButton icon={Underline} label="Underline" disabled={snap.readOnly} />
-              </div>
-
-              <div className="flex-1 text-center min-w-0">
-                <span className="text-sm font-medium truncate block">{snap.sourceLabel}</span>
-              </div>
-
-              <div className="flex items-center gap-0.5">
-                <ToolbarIconButton icon={MessageSquare} label="Comments" disabled={snap.readOnly || snap.comments.totalCount === 0} onClick={() => { if (currentComments[0]) activateComment(currentComments[0]); }} />
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Toggle.Root pressed={trackChangesEnabled} onPressedChange={setTrackChangesEnabled} className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none disabled:opacity-40 ${focusRingClass}`}>
-                      <GitCompareArrows className="h-4 w-4" />
-                    </Toggle.Root>
-                  </Tooltip.Trigger>
-                  <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>Track changes</Tooltip.Content></Tooltip.Portal>
-                </Tooltip.Root>
-                <div className="mx-1 h-4 w-px bg-border" />
-                <ToggleGroup.Root type="single" value={markupDisplay} onValueChange={(v) => { if (v) setMarkupDisplay(v as DemoMarkupDisplay); }} className="flex items-center gap-0.5">
-                  {(["clean", "simple", "all"] as const).map((mode) => (
-                    <Tooltip.Root key={mode}>
-                      <Tooltip.Trigger asChild>
-                        <ToggleGroup.Item value={mode} className={`inline-flex h-7 items-center rounded-md px-2 text-xs text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}>
-                          {mode === "all" ? "Full" : mode[0].toUpperCase() + mode.slice(1)}
-                        </ToggleGroup.Item>
-                      </Tooltip.Trigger>
-                      <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>{mode === "clean" ? "Hide markup" : mode === "simple" ? "Simple markup" : "Full markup"}</Tooltip.Content></Tooltip.Portal>
-                    </Tooltip.Root>
-                  ))}
-                </ToggleGroup.Root>
-                <div className="mx-1 h-4 w-px bg-border" />
-                <ToggleGroup.Root type="single" value={viewMode} onValueChange={(v) => { if (v) setViewMode(v as DemoViewMode); }} className="flex items-center gap-0.5">
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild><ToggleGroup.Item value="canvas" className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}><Monitor className="h-3.5 w-3.5" /></ToggleGroup.Item></Tooltip.Trigger>
-                    <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>Canvas view</Tooltip.Content></Tooltip.Portal>
-                  </Tooltip.Root>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild><ToggleGroup.Item value="page" className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}><FileText className="h-3.5 w-3.5" /></ToggleGroup.Item></Tooltip.Trigger>
-                    <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>Page view</Tooltip.Content></Tooltip.Portal>
-                  </Tooltip.Root>
-                </ToggleGroup.Root>
-                <div className="mx-1 h-4 w-px bg-border" />
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <button type="button" disabled={isExportBlocked} className={`inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold transition-colors outline-none ${focusRingClass} ${isExportBlocked ? "cursor-not-allowed text-danger opacity-50" : "text-accent hover:bg-accent-soft"}`}>
-                      <Download className="h-3.5 w-3.5" />Export
-                    </button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>{isExportBlocked ? "Export blocked by unsupported content" : "Export document"}</Tooltip.Content></Tooltip.Portal>
-                </Tooltip.Root>
-              </div>
-            </header>
-
-            {/* Alert banner */}
-            {snap.fatalError ? (
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs">
-                <XCircle className="h-3.5 w-3.5 shrink-0" />
-                <span>{snap.fatalError.message}</span>
-              </div>
-            ) : isExportBlocked ? (
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs">
-                <XCircle className="h-3.5 w-3.5 shrink-0" />
-                <span>Export blocked — {snap.compatibility.blockExportReasons[0] ?? "unsupported content"}</span>
-              </div>
-            ) : preserveOnlyCount > 0 ? (
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-warning-soft text-comment text-xs">
-                <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-                <span>{preserveOnlyCount} preserve-only feature{preserveOnlyCount !== 1 ? "s" : ""} detected</span>
-              </div>
-            ) : null}
-
-            {/* Document canvas */}
-            <div className="flex-1 overflow-y-auto bg-surface">
-              <div className={`mx-auto max-w-[780px] min-h-full bg-canvas ${viewMode === "page" ? "my-8 rounded-xl ring-1 ring-border shadow-sm" : ""}`}>
-                <div className={`px-12 py-10 ${markupDisplay === "clean" ? "font-[family-name:var(--font-legal-sans)]" : "font-[family-name:var(--font-legal-serif)]"}`}>
-                  <h1 className="text-2xl font-medium text-primary mb-1">{snap.sourceLabel}</h1>
-                  <p className="text-xs text-tertiary mb-8">{snap.sessionId} · {snap.documentStats.storyLength} chars</p>
-
-                  {selectionLabel ? (
-                    <div className="mb-6 inline-flex items-center gap-1 rounded-lg bg-canvas shadow-lg ring-1 ring-border p-1">
-                      {selectionActions.map((action) => (
-                        <Tooltip.Root key={action.label}>
-                          <Tooltip.Trigger asChild>
-                            <button type="button" aria-label={action.label} className="inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary hover:bg-surface hover:text-primary transition-colors">
-                              <action.icon className="h-3.5 w-3.5" />
-                            </button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>{action.label}</Tooltip.Content></Tooltip.Portal>
-                        </Tooltip.Root>
-                      ))}
-                      <div className="h-4 w-px bg-border mx-0.5" />
-                      <span className="text-xs text-tertiary px-2 max-w-[200px] truncate">{selectionLabel}</span>
-                    </div>
-                  ) : null}
-
-                  <div className="space-y-4">
-                    {snap.surface.blocks.map((block) => (
-                      <BlockView
-                        key={block.blockId}
-                        block={block}
-                        markupDisplay={markupDisplay}
-                        activeCommentId={activeComment?.commentId}
-                        activeRevisionId={activeRevision?.revisionId}
-                        activeCellId={activeCellId}
-                        commentDecorations={currentSession.commentDecorations}
-                        revisionDecorations={currentSession.revisionDecorations}
-                        onSegmentClick={handleSegmentClick}
-                        onCellClick={handleCellClick}
-                      />
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Status bar */}
-            <footer className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary">
-              <span className="flex items-center gap-1.5">
-                <span className={`inline-block h-1.5 w-1.5 rounded-full ${isExportBlocked ? "bg-danger" : isDirty ? "bg-comment" : "bg-insert"}`} />
-                {saveState}
-              </span>
-              <span className="flex items-center gap-1.5">
-                <span className={`inline-block h-1.5 w-1.5 rounded-full ${isExportBlocked ? "bg-danger" : preserveOnlyCount > 0 ? "bg-comment" : "bg-insert"}`} />
-                Export {exportState.toLowerCase()}
-              </span>
-              <span>{snap.comments.totalCount} comment{snap.comments.totalCount !== 1 ? "s" : ""} · {snap.trackedChanges.totalCount} change{snap.trackedChanges.totalCount !== 1 ? "s" : ""}</span>
-              <span className="flex-1" />
-              <span>{snap.sessionId}</span>
-            </footer>
-          </div>
-
-          {/* Review rail */}
-          <aside className="flex w-[340px] shrink-0 flex-col border-l border-border bg-canvas">
-            <Tabs.Root value={activeRailTab} onValueChange={(v) => setActiveRailTab(v as DemoRailTab)} className="flex flex-1 flex-col min-h-0">
-              <Tabs.List className="flex shrink-0 border-b border-border">
-                <Tabs.Trigger value="comments" className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}>
-                  Comments <span className="text-tertiary">{snap.comments.totalCount}</span>
-                </Tabs.Trigger>
-                <Tabs.Trigger value="changes" className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}>
-                  Changes <span className="text-tertiary">{snap.trackedChanges.totalCount}</span>
-                </Tabs.Trigger>
-                <Tabs.Trigger value="health" className={`flex-1 py-2 text-xs text-tertiary transition-colors data-[state=active]:text-primary data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}>
-                  Health {warningCount > 0 ? <span className="text-comment">{warningCount}</span> : <span className="text-tertiary">{snap.compatibility.featureEntries.length}</span>}
-                </Tabs.Trigger>
-              </Tabs.List>
-
-              <ScrollArea.Root className="flex-1 min-h-0">
-                <ScrollArea.Viewport className="h-full w-full">
-                  <Tabs.Content value="comments" className="p-3 outline-none">
-                    <p className="text-xs text-tertiary mb-3">
-                      {snap.comments.openCommentIds.length} open · {snap.comments.resolvedCommentIds.length} resolved · {snap.comments.detachedCommentIds.length} detached
-                    </p>
-                    <div className="space-y-1">
-                      {currentComments.map((thread) => (
-                        <div
-                          key={thread.commentId}
-                          role="button"
-                          tabIndex={0}
-                          className={`rounded-lg p-2.5 transition-colors cursor-pointer ${focusRingClass} ${activeComment?.commentId === thread.commentId ? "bg-accent-soft" : "hover:bg-surface"}`}
-                          onClick={() => activateComment(thread)}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault();
-                              activateComment(thread);
-                            }
-                          }}
-                        >
-                          <div className="flex items-start justify-between gap-2 mb-1">
-                            <span className="text-sm font-medium text-primary">{thread.createdBy}</span>
-                            <StatusBadge status={thread.status} />
-                          </div>
-                          <p className="text-xs text-tertiary mb-1">{thread.createdAt}</p>
-                          <p className="text-xs font-medium text-comment bg-comment-soft rounded px-1 py-0.5 inline-block mb-1.5">{thread.excerpt}</p>
-                          <p className="text-sm text-secondary leading-relaxed">{thread.body}</p>
-                          {thread.entryCount > 1 ? <p className="text-xs text-tertiary mt-1.5">{thread.entryCount - 1} repl{thread.entryCount - 1 === 1 ? "y" : "ies"}</p> : null}
-                          <div className="flex gap-1.5 mt-2">
-                            {thread.status === "open" ? (
-                              <button type="button" className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors" onClick={(e) => { e.stopPropagation(); updateCommentStatus(thread, "resolved"); }}>
-                                <Check className="h-3 w-3" /> Resolve
-                              </button>
-                            ) : thread.status === "resolved" ? (
-                              <button type="button" className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-secondary hover:bg-surface transition-colors" onClick={(e) => { e.stopPropagation(); updateCommentStatus(thread, "open"); }}>
-                                Reopen
-                              </button>
-                            ) : (
-                              <span className="text-xs text-tertiary px-2 py-1">Detached</span>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </Tabs.Content>
-
-                  <Tabs.Content value="changes" className="p-3 outline-none">
-                    <p className="text-xs text-tertiary mb-3">
-                      {snap.trackedChanges.pendingChangeIds.length} active · {snap.trackedChanges.acceptedChangeIds.length} accepted · {snap.trackedChanges.preserveOnlyChangeIds.length} preserve-only
-                    </p>
-                    <div className="space-y-1">
-                      {currentRevisions.map((rev) => (
-                        <div
-                          key={rev.revisionId}
-                          role="button"
-                          tabIndex={0}
-                          className={`flex rounded-lg transition-colors cursor-pointer ${focusRingClass} ${activeRevision?.revisionId === rev.revisionId ? "bg-accent-soft" : "hover:bg-surface"}`}
-                          onClick={() => activateRevision(rev)}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault();
-                              activateRevision(rev);
-                            }
-                          }}
-                        >
-                          <div className={`w-0.5 shrink-0 rounded-l-lg ${rev.kind === "insertion" ? "bg-insert" : rev.kind === "deletion" ? "bg-danger" : "bg-tertiary"}`} />
-                          <div className="p-2.5 flex-1 min-w-0">
-                            <div className="flex items-start justify-between gap-2 mb-1">
-                              <span className="text-sm font-medium text-primary">{rev.anchorLabel}</span>
-                              <RevisionBadge status={rev.status} actionability={rev.actionability} />
-                            </div>
-                            <p className="text-xs text-tertiary mb-1">{rev.authorId} · {rev.createdAt}</p>
-                            <p className={`text-sm ${rev.kind === "insertion" ? "text-insert" : rev.kind === "deletion" ? "text-danger line-through" : "text-secondary"}`}>{rev.excerpt}</p>
-                            <p className="text-xs text-secondary mt-1">{rev.detail}</p>
-                            <div className="flex gap-1.5 mt-2">
-                              <button type="button" disabled={!rev.canAccept || rev.status === "accepted"} className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed" onClick={(e) => { e.stopPropagation(); updateRevisionStatus(rev, "accepted"); }}>
-                                <Check className="h-3 w-3" /> Accept
-                              </button>
-                              <button type="button" disabled={!rev.canReject || rev.status === "rejected"} className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed" onClick={(e) => { e.stopPropagation(); updateRevisionStatus(rev, "rejected"); }}>
-                                <X className="h-3 w-3" /> Reject
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </Tabs.Content>
-
-                  <Tabs.Content value="health" className="p-3 outline-none">
-                    <p className="text-xs text-tertiary mb-3">
-                      {snap.compatibility.featureEntries.filter((e) => e.featureClass === "supported-roundtrip").length} supported · {snap.compatibility.featureEntries.filter((e) => e.featureClass === "preserve-only").length} preserve-only · {snap.compatibility.featureEntries.filter((e) => e.featureClass === "unsupported-fatal").length} blocked{snap.warnings.length > 0 ? ` · ${snap.warnings.length} warning${snap.warnings.length !== 1 ? "s" : ""}` : ""}
-                    </p>
-                    <div className="space-y-1">
-                      {snap.compatibility.featureEntries.map((entry) => (
-                        <div key={entry.featureEntryId} className="flex rounded-lg transition-colors hover:bg-surface">
-                          {entry.featureClass !== "supported-roundtrip" ? (
-                            <div className={`w-0.5 shrink-0 rounded-l-lg ${entry.featureClass === "unsupported-fatal" ? "bg-danger" : "bg-comment"}`} />
-                          ) : null}
-                          <div className="flex items-start gap-2 mb-1 p-2.5 flex-1">
-                            <HealthIcon featureClass={entry.featureClass} />
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-start justify-between gap-2">
-                                <span className="text-sm font-medium text-primary">{entry.message}</span>
-                                <FeatureClassBadge featureClass={entry.featureClass} />
-                              </div>
-                              <p className="text-sm text-secondary mt-0.5">{(entry as PrototypeFeatureEntry).summary}</p>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                      {snap.warnings.map((warning) => (
-                        <div key={warning.warningId} className="flex rounded-lg transition-colors hover:bg-surface">
-                          <div className={`w-0.5 shrink-0 rounded-l-lg ${warning.severity === "warning" ? "bg-comment" : "bg-accent"}`} />
-                          <div className="flex items-start gap-2 p-2.5 flex-1">
-                            {warning.severity === "warning" ? (
-                              <AlertTriangle className="h-4 w-4 text-comment shrink-0 mt-0.5" />
-                            ) : (
-                              <Info className="h-4 w-4 text-accent shrink-0 mt-0.5" />
-                            )}
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-start justify-between gap-2">
-                                <span className="text-sm font-medium text-primary">{warning.message}</span>
-                                <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${warning.severity === "warning" ? "text-comment bg-warning-soft" : "text-accent bg-accent-soft"}`}>
-                                  {warning.code.replace(/_/g, " ")}
-                                </span>
-                              </div>
-                              <p className="text-xs text-tertiary mt-0.5">{warning.source}</p>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </Tabs.Content>
-                </ScrollArea.Viewport>
-                <ScrollArea.Scrollbar orientation="vertical" className="flex w-1.5 touch-none select-none p-0.5">
-                  <ScrollArea.Thumb className="relative flex-1 rounded-full bg-black/[0.12]" />
-                </ScrollArea.Scrollbar>
-              </ScrollArea.Root>
-            </Tabs.Root>
-          </aside>
-        </div>
-      </main>
-    </Tooltip.Provider>
-  );
-}
-
-/* ─── Small components ─── */
-
-function ToolbarIconButton(props: { icon: React.ComponentType<{ className?: string }>; label: string; disabled?: boolean; onClick?: () => void }) {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <button type="button" disabled={props.disabled} onClick={props.onClick} className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface hover:text-primary outline-none disabled:opacity-30 disabled:cursor-not-allowed ${focusRingClass}`}>
-          <props.icon className="h-4 w-4" />
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal><Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>{props.label}</Tooltip.Content></Tooltip.Portal>
-    </Tooltip.Root>
-  );
-}
-
-function StatusBadge(props: { status: string }) {
-  const styles: Record<string, string> = {
-    open: "text-accent bg-accent-soft",
-    resolved: "text-insert bg-insert-soft",
-    detached: "text-comment bg-warning-soft",
-  };
-  return <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`}>{props.status}</span>;
-}
-
-function RevisionBadge(props: { status: string; actionability: string }) {
-  if (props.actionability === "preserve-only") return <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-comment bg-warning-soft">preserve-only</span>;
-  const styles: Record<string, string> = {
-    active: "text-secondary bg-subtle",
-    accepted: "text-insert bg-insert-soft",
-    rejected: "text-danger bg-delete-soft",
-    detached: "text-comment bg-warning-soft",
-  };
-  return <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`}>{props.status}</span>;
-}
-
-function FeatureClassBadge(props: { featureClass: CompatibilityFeatureClass }) {
-  const styles: Record<CompatibilityFeatureClass, string> = {
-    "supported-roundtrip": "text-insert bg-insert-soft",
-    "preserve-only": "text-comment bg-warning-soft",
-    "unsupported-fatal": "text-danger bg-delete-soft",
-  };
-  const labels: Record<CompatibilityFeatureClass, string> = {
-    "supported-roundtrip": "supported",
-    "preserve-only": "preserve-only",
-    "unsupported-fatal": "blocked",
-  };
-  return <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass]}`}>{labels[props.featureClass]}</span>;
-}
-
-function HealthIcon(props: { featureClass: CompatibilityFeatureClass }) {
-  switch (props.featureClass) {
-    case "supported-roundtrip": return <ShieldCheck className="h-4 w-4 text-insert shrink-0 mt-0.5" />;
-    case "preserve-only": return <Shield className="h-4 w-4 text-comment shrink-0 mt-0.5" />;
-    case "unsupported-fatal": return <ShieldAlert className="h-4 w-4 text-danger shrink-0 mt-0.5" />;
-  }
-}
-
-/* ─── Document surface ─── */
-
-function BlockView(props: {
-  block: PrototypeSurfaceBlock;
-  markupDisplay: DemoMarkupDisplay;
-  activeCommentId?: string;
-  activeRevisionId?: string;
-  activeCellId?: string;
-  commentDecorations: PrototypeCommentDecoration[];
-  revisionDecorations: PrototypeRevisionDecoration[];
-  onSegmentClick: (segmentId: string, text: string, cellId?: string) => void;
-  onCellClick?: (cellId: string) => void;
-}) {
-  const { block } = props;
-
-  // Prototype-only: table (mirrors proposed TableNode > TableRowNode > TableCellNode)
-  if (block.kind === "table") {
-    const tb = block as PrototypeTableBlock;
-    return (
-      <div className="group relative">
-        <BlockHint label="Table" badge="prototype" />
-        {tb.caption ? <p className="text-xs text-tertiary mb-1.5">{tb.caption}</p> : null}
-        <div className="overflow-x-auto rounded-md ring-1 ring-border">
-          <table className="w-full text-sm border-collapse">
-            <tbody>
-              {tb.rows.map((row) => (
-                <tr key={row.rowId}>
-                  {row.cells.map((cell) => {
-                    const CellTag = row.isHeader ? "th" : "td";
-                    const isCellActive = !row.isHeader && props.activeCellId === cell.cellId;
-                    return (
-                      <CellTag
-                        key={cell.cellId}
-                        colSpan={cell.colSpan > 1 ? cell.colSpan : undefined}
-                        rowSpan={cell.rowSpan > 1 ? cell.rowSpan : undefined}
-                        onClick={!row.isHeader ? () => props.onCellClick?.(cell.cellId) : undefined}
-                        onKeyDown={
-                          !row.isHeader
-                            ? (event) => {
-                                if (event.key === "Enter" || event.key === " ") {
-                                  event.preventDefault();
-                                  props.onCellClick?.(cell.cellId);
-                                }
-                              }
-                            : undefined
-                        }
-                        role={!row.isHeader ? "button" : undefined}
-                        tabIndex={!row.isHeader ? 0 : undefined}
-                        className={`text-left p-2.5 border-b border-border text-sm transition-colors ${!row.isHeader ? `cursor-pointer ${focusRingClass}` : "cursor-default"} ${
-                          row.isHeader
-                            ? "font-medium text-secondary bg-surface text-xs"
-                            : cell.preserveOnly
-                              ? "text-secondary bg-warning-soft/30"
-                              : isCellActive
-                                ? "ring-1 ring-accent/30 bg-accent-soft/30"
-                                : "text-primary hover:bg-surface/50"
-                        }`}
-                      >
-                        {cell.preserveOnly ? (
-                          <span className="flex items-center gap-1.5">
-                            <Lock className="h-3 w-3 text-tertiary shrink-0" />
-                            <span>
-                              {cell.segments.map((seg) => (
-                                <SegmentView
-                                  key={seg.segmentId}
-                                  segment={seg}
-                                  markupDisplay={props.markupDisplay}
-                                  activeCommentId={props.activeCommentId}
-                                  activeRevisionId={props.activeRevisionId}
-                                  commentDecorations={props.commentDecorations}
-                                  revisionDecorations={props.revisionDecorations}
-                                  cellId={cell.cellId}
-                                  onClick={props.onSegmentClick}
-                                />
-                              ))}
-                            </span>
-                          </span>
-                        ) : (
-                          cell.segments.map((seg) => (
-                            <SegmentView
-                              key={seg.segmentId}
-                              segment={seg}
-                              markupDisplay={props.markupDisplay}
-                              activeCommentId={props.activeCommentId}
-                              activeRevisionId={props.activeRevisionId}
-                              commentDecorations={props.commentDecorations}
-                              revisionDecorations={props.revisionDecorations}
-                              cellId={cell.cellId}
-                              onClick={props.onSegmentClick}
-                            />
-                          ))
-                        )}
-                      </CellTag>
-                    );
-                  })}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        {tb.note ? <p className="text-xs text-tertiary mt-1.5">{tb.note}</p> : null}
-      </div>
-    );
-  }
-
-  // Prototype-only: callout
-  if (block.kind === "callout") {
-    const cb = block as PrototypeCalloutBlock;
-    const toneColors: Record<string, string> = {
-      warning: "border-l-warning/30 bg-warning-soft/40",
-      danger: "border-l-danger/30 bg-danger-soft/40",
-      success: "border-l-success/30 bg-success-soft/40",
-      accent: "border-l-accent/30 bg-accent-soft/40",
-    };
-    return (
-      <div className="group relative">
-        <BlockHint label="Note" badge="prototype" />
-        <div className={`border-l-2 pl-4 py-2 rounded-r ${toneColors[cb.tone] ?? "border-l-black/10"}`}>
-          <p className="text-xs font-medium text-secondary mb-0.5">{cb.title}</p>
-          <p className="text-sm text-secondary leading-relaxed">{cb.body}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Real: opaque_block
-  if (block.kind === "opaque_block") {
-    return (
-      <div className="group relative">
-        <BlockHint label="Locked" dots={["var(--color-comment)"]} />
-        <div className="border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20">
-          <div className="flex items-center gap-1.5 text-xs text-tertiary mb-1">
-            <Lock className="h-3 w-3" />
-            <span>{block.label}</span>
-            <FeatureClassBadge featureClass="preserve-only" />
-          </div>
-          <p className="text-sm text-secondary">{block.detail}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Real: paragraph (may be heading via styleId)
-  const paraBlock = block as Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
-  const headingLevel = inferHeadingLevel(paraBlock.styleId);
-  const markers = segmentMarkers(paraBlock.segments, props.commentDecorations, props.revisionDecorations);
-  const mode = props.markupDisplay;
-
-  // Margin indicator logic per mode
-  const hasComment = markers.includes("comment");
-  const hasChange = markers.includes("change");
-  const activeCommentInBlock = hasComment && props.activeCommentId && props.commentDecorations.some(
-    (d) => d.commentId === props.activeCommentId && d.segmentIds.some((id) => paraBlock.segments.some((s) => s.segmentId === id)),
-  );
-
-  // Clean: tiny dot for comments only | Simple: colored left bar | Full: none (inline styling suffices)
-  let marginClass = "";
-  if (mode === "simple" && (hasComment || hasChange)) {
-    if (hasComment && hasChange) marginClass = "border-l-2 border-l-comment/50 pl-3 ";
-    else if (hasComment) marginClass = "border-l-2 border-l-comment/40 pl-3 ";
-    else marginClass = "border-l-2 border-l-insert/40 pl-3 ";
-  }
-  if (activeCommentInBlock && mode !== "clean") {
-    marginClass += "border-l-comment! ";
-  }
-
-  const segmentElements = paraBlock.segments.map((seg) => (
-    <SegmentView key={seg.segmentId} segment={seg} markupDisplay={mode} activeCommentId={props.activeCommentId} activeRevisionId={props.activeRevisionId} commentDecorations={props.commentDecorations} revisionDecorations={props.revisionDecorations} onClick={props.onSegmentClick} />
-  ));
-
-  return (
-    <div className="group relative">
-      <BlockHint
-        label={headingLevel ? `H${headingLevel}` : "P"}
-        dots={
-          mode === "clean" && hasComment
-            ? ["var(--color-comment)"]
-            : mode !== "simple"
-              ? markers.map(markerDotColor)
-              : undefined
-        }
-      />
-      {headingLevel ? (
-        <div className={`${marginClass} transition-colors`}>
-          <HeadingElement level={headingLevel}>{segmentElements}</HeadingElement>
-        </div>
-      ) : (
-        <p className={`text-base leading-[1.75] text-primary ${marginClass} transition-colors`}>
-          {segmentElements}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function BlockHint(props: { label: string; dots?: string[]; badge?: string }) {
-  return (
-    <div className="absolute -left-10 top-1 flex flex-col items-end gap-0 select-none w-8 text-right">
-      <div className="flex items-center gap-0.5">
-        <span className="text-[10px] text-tertiary/60 font-medium">{props.label}</span>
-        {props.dots?.map((color, i) => <span key={i} className="inline-block h-1 w-1 rounded-full" style={{ backgroundColor: color }} />)}
-      </div>
-      {props.badge ? <span className="text-[7px] text-tertiary/30 leading-none">{props.badge}</span> : null}
-    </div>
-  );
-}
-
-function HeadingElement(props: { level: 1 | 2 | 3; children: React.ReactNode }) {
-  switch (props.level) {
-    case 1: return <h2 className="text-2xl font-medium text-primary leading-tight">{props.children}</h2>;
-    case 2: return <h3 className="text-xl font-medium text-primary leading-snug">{props.children}</h3>;
-    case 3: return <h4 className="text-lg font-medium text-primary leading-snug">{props.children}</h4>;
-  }
-}
-
-function SegmentView(props: {
-  segment: SurfaceInlineSegment;
-  markupDisplay: DemoMarkupDisplay;
-  activeCommentId?: string;
-  activeRevisionId?: string;
-  commentDecorations: PrototypeCommentDecoration[];
-  revisionDecorations: PrototypeRevisionDecoration[];
-  cellId?: string;
-  onClick: (segmentId: string, text: string, cellId?: string) => void;
-}) {
-  const { segment } = props;
-
-  // Non-text segment types: render as inline tokens
-  if (segment.kind === "tab") {
-    return (
-      <span className="inline-flex items-center mx-0.5 text-tertiary/50" title="Tab character">
-        <MoveRight className="h-3 w-3" />
-      </span>
-    );
-  }
-
-  if (segment.kind === "hard_break") {
-    return (
-      <>
-        <span className="inline-flex items-center mx-0.5 text-tertiary/40" title="Line break">
-          <CornerDownLeft className="h-3 w-3" />
-        </span>
-        <br />
-      </>
-    );
-  }
-
-  if (segment.kind === "image") {
-    return (
-      <span
-        className={`inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs ${
-          segment.state === "missing"
-            ? "text-danger bg-delete-soft"
-            : "text-secondary bg-surface"
-        }`}
-        title={segment.detail ?? segment.altText ?? "Inline image"}
-      >
-        <Image className="h-3 w-3" />
-        {segment.altText ?? (segment.state === "missing" ? "Missing image" : "Image")}
-      </span>
-    );
-  }
-
-  if (segment.kind === "opaque_inline") {
-    return (
-      <span
-        className="inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-comment bg-warning-soft"
-        title={segment.detail}
-      >
-        <Lock className="h-3 w-3" />
-        {segment.label}
-      </span>
-    );
-  }
-
-  // Only text segments reach here
-  if (segment.kind !== "text") return null;
-
-  // Determine decorations
-  const commentDec = props.commentDecorations.find((d) => d.segmentIds.includes(segment.segmentId));
-  const revisionDec = props.revisionDecorations.find((d) => d.segmentIds.includes(segment.segmentId));
-  const mode = props.markupDisplay;
-
-  // Hide deletions in clean mode (document reads as final text)
-  if (revisionDec?.kind === "deletion" && mode === "clean") return null;
-
-  const isActiveComment = commentDec && commentDec.commentId === props.activeCommentId;
-  const isActiveRevision = revisionDec && revisionDec.revisionId === props.activeRevisionId;
-
-  let className = "cursor-pointer transition-colors rounded-[3px] ";
-
-  // Comment styling — varies by mode
-  if (commentDec) {
-    if (mode === "clean") {
-      // Clean: no inline highlight. Active comment gets a very subtle bg only.
-      if (isActiveComment) className += "bg-comment-soft ";
-    } else if (mode === "simple") {
-      // Simple: subtle underline, stronger when active
-      className += isActiveComment
-        ? "underline decoration-comment decoration-2 underline-offset-4 "
-        : "underline decoration-comment/30 decoration-2 underline-offset-4 ";
-    } else {
-      // Full: background wash
-      className += isActiveComment ? "bg-comment-strong " : "bg-comment-soft ";
-    }
-  }
-
-  // Revision styling — varies by mode
-  if (revisionDec) {
-    if (mode === "clean") {
-      // Clean: insertions render as normal text (no color/underline)
-    } else if (mode === "simple") {
-      // Simple: subtle cues
-      if (revisionDec.kind === "insertion") {
-        className += "underline decoration-insert/40 decoration-1 underline-offset-2 ";
-      } else if (revisionDec.kind === "deletion") {
-        className += "text-secondary line-through decoration-1 ";
-      }
-    } else {
-      // Full: strong inline styling
-      if (revisionDec.kind === "insertion") {
-        className += "text-insert bg-insert-soft ";
-      } else if (revisionDec.kind === "deletion") {
-        className += "text-danger line-through decoration-1 bg-delete-soft ";
-      }
-    }
-  }
-
-  // Active revision highlight (all modes except clean)
-  if (isActiveRevision && mode !== "clean") {
-    className += "ring-1 ring-accent/30 ";
-  }
-
-  if (segment.hyperlinkHref) {
-    className += "text-accent underline decoration-1 underline-offset-2 ";
-  }
-
-  return (
-    <span
-      role="button"
-      tabIndex={0}
-      className={`${className}${focusRingClass} `}
-      data-comment-id={commentDec?.commentId}
-      onClick={() => props.onClick(segment.segmentId, segment.text, props.cellId)}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          props.onClick(segment.segmentId, segment.text, props.cellId);
-        }
-      }}
-    >
-      {segment.text}
-    </span>
-  );
-}
-
-/* ─── Helpers ─── */
-
-function inferHeadingLevel(styleId?: string): 1 | 2 | 3 | null {
-  if (!styleId) return null;
-  const lower = styleId.toLowerCase();
-  if (lower === "heading1") return 1;
-  if (lower === "heading2") return 2;
-  if (lower === "heading3") return 3;
-  return null;
-}
-
-function segmentMarkers(
-  segments: SurfaceInlineSegment[],
-  commentDecs: PrototypeCommentDecoration[],
-  revisionDecs: PrototypeRevisionDecoration[],
-): string[] {
-  const markers: string[] = [];
-  const segIds = new Set(segments.map((s) => s.segmentId));
-  if (commentDecs.some((d) => d.segmentIds.some((id) => segIds.has(id)))) markers.push("comment");
-  if (revisionDecs.some((d) => d.segmentIds.some((id) => segIds.has(id)))) markers.push("change");
-  return markers;
-}
-
-function markerDotColor(marker: string): string {
-  if (marker === "comment") return "var(--color-comment)";
-  if (marker === "change") return "var(--color-insert)";
-  return "var(--color-tertiary)";
-}