@beyondwork/docx-react-component 1.0.43 → 1.0.45

package/src/ui-tailwind/theme/editor-theme.css

@@ -77,6 +77,18 @@
   --color-page-border: rgba(0, 0, 0, 0.04);
   --color-page-bg: #ffffff;
   --color-page-ruler: color-mix(in srgb, var(--color-border) 65%, transparent);
+  /*
+   * Phase A (L8 page-native layout): the workspace canvas is the gray
+   * surface BEHIND the paper frame(s) — LibreOffice Print Layout idiom.
+   * The outer `.wre-page-chrome` wrapper paints this; the inner paper
+   * frame paints the white `--color-page-bg` on top.
+   *
+   * L8 polish (2026-04-19): darkened from #e7e5e4 → #d4d1cc so the canvas
+   * reads as a distinctly different surface from the white paper (the
+   * earlier tone was close enough that the paper edges blurred against
+   * the canvas on high-brightness screens).
+   */
+  --color-workspace-canvas: #d4d1cc;
 
   /*
    * ─── Radius tokens (balanced 10 / 8 / 4 / 2) ───
@@ -188,6 +200,7 @@
   --color-page-border: rgba(255, 255, 255, 0.06);
   --color-page-bg: #1B2620;
   --color-page-ruler: color-mix(in srgb, var(--color-border) 70%, transparent);
+  --color-workspace-canvas: #111827;
 
   --shadow-soft: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
   --shadow-float: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
@@ -253,26 +266,39 @@
   widows: 2;
 }
 
-/* Page chrome — shadow, border, and background for the page-mode document panel */
+/*
+ * Phase A (L8 page-native layout): the outer `.wre-page-chrome` wrapper is
+ * now the **workspace canvas** — the gray surface behind the paper frame(s),
+ * mirroring LibreOffice Writer's Print Layout.  Paper styling (white
+ * background, rounded corners, drop shadow, border) lives solely on the
+ * inner `[data-paper-frame]` wrapper via `pageShellMetrics.pageFrameStyle`,
+ * eliminating the pre-Phase-A double-chrome artefact.
+ *
+ * Historical note: before 2026-04-19 this selector painted paper chrome
+ * (background/border/radius/shadow) AND the outer wrapper was sized to
+ * `frameWidthPx`.  The inner wrapper painted the SAME paper chrome, producing
+ * two nested rounded rectangles visible in every page-mode screenshot.
+ */
 .wre-page-chrome {
-  background: var(--color-page-bg);
-  border: 1px solid var(--color-page-border);
-  border-radius: var(--radius-page);
-  box-shadow: 0 8px 24px -20px var(--color-page-shadow);
+  background: var(--color-workspace-canvas);
+  padding: 2rem 0;
 }
 
-/* Canvas-mode typography — lighter, review-first baseline */
+/*
+ * Canvas-mode typography — lighter, review-first baseline.
+ *
+ * L8 Phase B (2026-04-19): canvas mode is **continuous flow, no paper
+ * card**.  Paper-card declarations (width cap, min-height, background,
+ * border, rounded corners, drop shadow) were removed so the review
+ * surface reads as a single scrollable column.  The mode-contract gate
+ * (page-mode paper card vs canvas-mode continuous flow) is pinned by
+ * `test/ui/pm-page-break-decorations-posture.test.ts`.
+ */
 .wre-canvas-surface {
   font-family: var(--font-legal-serif);
   font-size: 15px;
   line-height: 1.6;
   color: var(--color-primary);
-  width: min(100%, 920px);
-  min-height: 100%;
-  background: var(--color-page-bg);
-  border: 1px solid var(--color-page-border);
-  border-radius: var(--radius-page);
-  box-shadow: 0 6px 18px -14px var(--color-page-shadow);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -734,8 +760,15 @@
   pointer-events: none;
 }
 
-/* ─── Page workspace zoom scaling ─── */
-.wre-page-chrome[style*="scale"] {
+/*
+ * ─── Paper-frame zoom scaling ───
+ *
+ * Phase A (L8 page-native layout): browser-native CSS `zoom` lives on the
+ * inner paper frame, not the workspace canvas, so layout measurement stays
+ * truthful inside the card.  `will-change: transform` primes the compositor
+ * when a zoom is active.
+ */
+[data-paper-frame][style*="zoom"] {
   will-change: transform;
 }
 

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -52,6 +52,7 @@ import {
   incrementInvalidationCounter,
   recordPerfSample,
 } from "./editor-surface/perf-probe.ts";
+import { useVisibleBlockRange } from "./page-stack/use-visible-block-range.ts";
 import { sliceBlocksForPage } from "./editor-surface/page-slice-util.ts";
 import { TwPageBlockView } from "./editor-surface/tw-page-block-view.tsx";
 import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
@@ -895,6 +896,101 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     );
   }, [reviewRailAvailable, viewportWidth]);
 
+  // L7 Phase 2 Task 2.2.4a — viewport-scroll wiring.
+  // Collect DOM elements with `[data-page-frame]` from the PM surface so the
+  // IntersectionObserver inside `useVisibleBlockRange` can determine which
+  // pages are currently visible.  The MutationObserver refreshes the set when
+  // the PM surface re-renders (e.g. a document load changes the page count).
+  const [pageMarkers, setPageMarkers] = useState<readonly HTMLElement[]>([]);
+
+  useEffect(() => {
+    const root = pageStackScrollRoot;
+    if (!root) {
+      setPageMarkers([]);
+      return undefined;
+    }
+    const refresh = () => {
+      const found = Array.from(root.querySelectorAll<HTMLElement>("[data-page-frame]"));
+      // The boundary widgets between pages N and N+1 carry `data-page-frame`
+      // for the *next* page (pages 1 … N).  Page 0 has no widget before it,
+      // so we synthesize an in-memory element that carries page-0's attributes.
+      // This element is NOT in the DOM — the IntersectionObserver won't fire
+      // on it — but the hook's useMemo uses it to look up block indices when
+      // the overscan expansion includes page 0 (which happens whenever any of
+      // pages 1-2 are visible with overscan ≥ 1).
+      const hasPage0 = found.some(
+        (el) => el.getAttribute("data-page-frame") === "0",
+      );
+      if (!hasPage0 && found.length > 0) {
+        // Derive page-0 block range from the snapshot surface: page 0 starts
+        // at block 0 and ends just before the first block that belongs to page 1.
+        // The boundary widget's `data-page-first-block-index` for page 1 tells
+        // us where page 0 ends.
+        const page1Marker = found.find(
+          (el) => el.getAttribute("data-page-frame") === "1",
+        );
+        const page1First = page1Marker
+          ? Number(page1Marker.getAttribute("data-page-first-block-index") ?? "")
+          : NaN;
+        const page0Last = Number.isFinite(page1First) && page1First > 0
+          ? page1First - 1
+          : -1;  // page 0 empty or unknown; synthetic marker contributes nothing.
+        const ownerDoc = found[0]!.ownerDocument;
+        const synth = ownerDoc.createElement("span");
+        synth.setAttribute("data-page-frame", "0");
+        synth.setAttribute("data-page-first-block-index", "0");
+        synth.setAttribute("data-page-last-block-index", String(Math.max(0, page0Last)));
+        setPageMarkers([synth, ...found]);
+      } else {
+        setPageMarkers(found);
+      }
+    };
+    refresh();
+    // Observe PM surface mutations for page-count changes (new doc load, etc).
+    const view = root.ownerDocument?.defaultView;
+    if (!view?.MutationObserver) return undefined;
+    const mo = new view.MutationObserver(refresh);
+    mo.observe(root, { childList: true, subtree: true });
+    return () => mo.disconnect();
+    // Re-run when the scroll root changes OR when a new snapshot lands
+    // (which may have a different page count and new widgets in the PM DOM).
+    // NOTE: snapshot.surface is intentionally excluded — its reference changes on
+    // every requestViewportRefresh(), which would add two extra render passes per
+    // scroll event.  The page-0 fallback uses -1 when page1First is unknown,
+    // which is correct (no page-0 blocks → synthetic marker contributes nothing).
+  }, [pageStackScrollRoot, snapshot.revisionToken]);
+
+  // Derive the surface block index for the current selection head so the
+  // hook can extend the visible range to always include the selection.
+  const selectionBlockIndex = useMemo(() => {
+    const sel = snapshot.selection;
+    const blocks = snapshot.surface?.blocks;
+    if (!sel || !blocks) return null;
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i]!;  // from/to are required on all SurfaceBlockSnapshot variants
+      const blockFrom = block.from;
+      const blockTo = block.to;
+      if (sel.head >= blockFrom && sel.head <= blockTo) return i;
+    }
+    return null;
+  }, [snapshot.selection, snapshot.surface]);
+
+  const visibleBlockRange = useVisibleBlockRange({
+    pageMarkers,
+    overscanPages: 2,
+    selectionBlockIndex,
+    totalBlockCount: snapshot.surface?.blocks.length ?? 0,
+  });
+
+  // Push the visible range into the layout facet (which delegates to the
+  // runtime's viewport-culling machinery).  Depend on `[start, end]` values
+  // (not the range object) so identity-preserving updates are a no-op.
+  useEffect(() => {
+    if (!props.layoutFacet) return;
+    props.layoutFacet.setVisibleBlockRange(visibleBlockRange);
+    props.layoutFacet.requestViewportRefresh();
+  }, [props.layoutFacet, visibleBlockRange.start, visibleBlockRange.end]);
+
   const dismissSelectionToolbar = useCallback(() => {
     props.onDismissSelectionToolbar?.();
   }, [props.onDismissSelectionToolbar]);
@@ -1222,32 +1318,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 ref={selectionToolbarRootRef}
                 className={`mx-auto min-h-full w-full ${
                   isPageWorkspace
-                    ? "wre-page-chrome wre-page-surface relative my-8 overflow-hidden"
+                    ? "wre-page-chrome relative overflow-hidden"
                     : "wre-canvas-surface relative my-8 overflow-hidden"
                 }`}
                 data-zoom-bucket={pageZoomBucket}
                 data-zoom-scale={isPageWorkspace ? zoomScale : undefined}
-                style={
-                  isPageWorkspace
-                    ? {
-                        // P2.a — real-dim page frame: width/height from
-                        // `pageLayout.pageWidth/pageHeight × FRAME_PX_PER_TWIP_AT_96DPI`
-                        // so every paper size renders at its
-                        // Word-matching CSS px.  `max-w-[840px]` retired.
-                        ...(pageShellMetrics.frameWidthPx
-                          ? { width: `${pageShellMetrics.frameWidthPx}px` }
-                          : {}),
-                        ...(pageShellMetrics.frameHeightPx
-                          ? { minHeight: `${pageShellMetrics.frameHeightPx}px` }
-                          : {}),
-                        // P2.b — browser-native CSS `zoom` rescales layout
-                        // so `getBoundingClientRect()` and hit-test offsets
-                        // stay truthful at any zoom — no inverse-projection
-                        // math needed downstream.
-                        ...(zoomScale !== 1 ? { zoom: zoomScale } : {}),
-                      }
-                    : undefined
-                }
+                data-workspace-canvas={isPageWorkspace ? "true" : undefined}
+                data-workspace-mode={isPageWorkspace ? "page" : "canvas"}
               >
                 {isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout ? (
                   <div className="border-b border-border/70 bg-surface/65 px-5 py-3" data-testid="page-context-summary">
@@ -1448,8 +1525,38 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   />
                 ) : null}
                 <div
-                  className={isPageWorkspace ? "relative" : undefined}
+                  className={
+                    isPageWorkspace
+                      ? "wre-page-surface relative mx-auto my-8"
+                      : "relative"
+                  }
                   data-line-numbering={pageChromeModel.lineNumberingEnabled ? "enabled" : "disabled"}
+                  data-paper-frame={isPageWorkspace ? "true" : undefined}
+                  data-debug-page-layout={
+                    isPageWorkspace && snapshot.pageLayout
+                      ? `${snapshot.pageLayout.pageWidth}:${snapshot.pageLayout.pageHeight}:${snapshot.pageLayout.orientation}:${snapshot.pageLayout.sectionIndex}`
+                      : undefined
+                  }
+                  style={
+                    isPageWorkspace
+                      ? {
+                          // Phase A (L8 page-native layout): the paper frame
+                          // owns paper width/height + browser-native CSS
+                          // `zoom` so layout measurement stays truthful
+                          // inside the card.  `pageShellMetrics.pageFrameStyle`
+                          // carries the paper chrome (bg + shadow + rounded +
+                          // border) — painted exactly once.
+                          ...(pageShellMetrics.frameWidthPx
+                            ? { width: `${pageShellMetrics.frameWidthPx}px` }
+                            : {}),
+                          ...(pageShellMetrics.frameHeightPx
+                            ? { minHeight: `${pageShellMetrics.frameHeightPx}px` }
+                            : {}),
+                          ...(zoomScale !== 1 ? { zoom: zoomScale } : {}),
+                          ...pageShellMetrics.pageFrameStyle,
+                        }
+                      : undefined
+                  }
                 >
                   {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? (
                     <div
@@ -1477,12 +1584,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                       className={isPageWorkspace ? "relative" : undefined}
                       data-document-grid={pageChromeModel.documentGridType}
                       data-page-border-display={pageChromeModel.pageBorderDisplay}
-                      style={isPageWorkspace
-                        ? {
-                            ...pageChromeModel.documentGridStyle,
-                            ...pageShellMetrics.pageFrameStyle,
-                          }
-                        : pageChromeModel.documentGridStyle}
+                      style={pageChromeModel.documentGridStyle}
                     >
                       {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.showPageBorder && !hidePageBorderForActiveEditing ? (
                         <div