@beyondwork/docx-react-component 1.0.81 → 1.0.82

package/src/ui-tailwind/editor-surface/tw-page-block-view.helpers.ts

@@ -205,6 +205,25 @@ export function buildParagraphStyle(
   if (indentHanging) style.textIndent = `-${indentHanging / 20}pt`;
   else if (indentFirstLine) style.textIndent = `${indentFirstLine / 20}pt`;
 
+  // Numbering marker-lane outdent (coord-04 §1.21 — "legal numbering
+  // touches the left margin / clips into page chrome"). Word/LO model:
+  // a numbered paragraph occupies `[markerLane.start, textColumn.right]`;
+  // the marker lane lives at `[textStart - hanging, textStart]`. When
+  // `hanging > indentLeft` the marker starts at negative x relative to
+  // the paragraph's content-frame origin — legitimate Word (e.g.
+  // w:ind w:left="360" w:hanging="720"). The marker span's
+  // `margin-left: -markerWidth` (emitted by `buildMarkerStyle`)
+  // depends on the paragraph's content box reaching that far left;
+  // without this outdent the marker slides off the page frame and
+  // clips into surrounding chrome. `margin-left` expands the
+  // paragraph's content box leftward while keeping body-text
+  // alignment (via `padding-left`) untouched. Mirrors the PM branch
+  // in `pm-schema.ts::paragraph.toDOM`.
+  const markerLaneStart = block.resolvedNumbering?.geometry.markerLane?.start;
+  if (typeof markerLaneStart === "number" && markerLaneStart < 0) {
+    style.marginLeft = `${markerLaneStart / 20}pt`;
+  }
+
   // Shading
   const shadingFill = block.shading?.fill;
   const shadingColor = safeHexColor(shadingFill);
@@ -341,6 +360,17 @@ export function buildMarkerStyle(
   const hasResolvedMarkerWidth = typeof markerWidth === "number" && markerWidth > 0;
   if (hasResolvedMarkerWidth) {
     // P13.a: emit marker geometry in pt so it self-scales under CSS `zoom`.
+    //
+    // Marker-lane contract (coord-04 §1.21 — Word/LO model): marker occupies
+    // `[markerStart, markerStart + markerWidth]` where
+    // `markerStart = textStart - hanging`. The negative `margin-left` pulls
+    // the marker leftward by its own width into the paragraph's padding
+    // zone. When `markerStart < 0` the paragraph carries a compensating
+    // negative `margin-left` via `buildParagraphStyle`, so the content box
+    // reaches far enough left to hold the marker without clipping into
+    // page chrome. `markerStart` is therefore consumed via the paragraph
+    // geometry — the marker span itself stays at `-markerWidth` relative
+    // to the paragraph's (now-outdented) content-box left.
     const markerWidthPt = Math.max(1, markerWidth! / 20);
     style.width = `${markerWidthPt}pt`;
     style.minWidth = `${markerWidthPt}pt`;
@@ -348,7 +378,7 @@ export function buildMarkerStyle(
     style.marginLeft = `-${markerWidthPt}pt`;
     style.marginRight = 0;
     style.overflow = "visible";
-    void markerStart; // consumed via paragraph padding-left geometry
+    void markerStart;
   } else {
     const fallbackMinWidth = Math.min(Math.max(prefix.length + 1, 4), 14);
     const fallbackMarginRight =

package/src/ui-tailwind/editor-surface/tw-page-block-view.tsx

@@ -126,6 +126,9 @@ function ParagraphBlock({
     "data-heading-level"?: string;
     "data-numbered"?: string;
     "data-contextual-spacing"?: string;
+    "data-numbering-marker-start-twips"?: string;
+    "data-numbering-marker-width-twips"?: string;
+    "data-numbering-body-start-twips"?: string;
   } = {
     className: classes.join(" "),
     style: Object.keys(pStyle).length > 0 ? pStyle : undefined,
@@ -140,6 +143,18 @@ function ParagraphBlock({
   if (block.contextualSpacing) {
     attrs["data-contextual-spacing"] = "true";
   }
+  // Numbering geometry debug visibility (coord-04 §1.21 Deliverable D):
+  // mirror the PM path so parity investigators can read the resolved
+  // marker lane directly off the DOM on both page 1 (PM) and pages 2+
+  // (static) renders. Values are twips.
+  const debugMarkerLane = block.resolvedNumbering?.geometry?.markerLane;
+  if (debugMarkerLane) {
+    attrs["data-numbering-marker-start-twips"] = String(debugMarkerLane.start);
+    if (debugMarkerLane.width > 0) {
+      attrs["data-numbering-marker-width-twips"] = String(debugMarkerLane.width);
+    }
+    attrs["data-numbering-body-start-twips"] = String(debugMarkerLane.textStart);
+  }
   if (block.bidi) {
     attrs.dir = "rtl";
   }

package/src/ui-tailwind/page-stack/tw-floating-image-layer.tsx

@@ -11,6 +11,7 @@ import type {
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection.ts";
 import {
   measureWidgetsViaBoundingRect,
+  resolvePageOverlayRectsFromGeometry,
   resolvePageOverlayRects,
   type PageOverlayRect,
   type VisiblePageIndexRange,
@@ -60,6 +61,19 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
   const [pageRects, setPageRects] = React.useState<readonly PageOverlayRect[]>([]);
 
   const refreshPageRectsNow = React.useCallback(() => {
+    const pageCount = facet.getPageCount();
+    if (geometryFacet) {
+      const geometryRects = resolvePageOverlayRectsFromGeometry(
+        geometryFacet,
+        pageCount,
+        visiblePageIndexRange,
+      );
+      if (geometryRects !== null) {
+        setPageRects(geometryRects);
+        return;
+      }
+    }
+
     if (!scrollRoot) {
       setPageRects([]);
       return;
@@ -69,7 +83,6 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
       setPageRects([]);
       return;
     }
-    const pageCount = facet.getPageCount();
     const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
       pageCount,
       visiblePageIndexRange,
@@ -84,11 +97,11 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
         visiblePageIndexRange,
       }),
     );
-  }, [facet, scrollRoot, visiblePageIndexRange]);
+  }, [facet, geometryFacet, scrollRoot, visiblePageIndexRange]);
 
   const refreshPageRects = React.useCallback(() => {
     if (!scrollRoot) {
-      setPageRects([]);
+      refreshPageRectsNow();
       return;
     }
     const runtime = scrollRoot.ownerDocument?.defaultView as
@@ -125,6 +138,9 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
   }, [refreshPageRects, renderFrameRevision, scrollRoot]);
 
   React.useEffect(() => {
+    if (geometryFacet) {
+      return;
+    }
     if (!scrollRoot) {
       return;
     }
@@ -137,9 +153,12 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
     const observer = new runtime.ResizeObserver(() => refreshPageRects());
     observer.observe(scrollRoot);
     return () => observer.disconnect();
-  }, [refreshPageRects, scrollRoot]);
+  }, [geometryFacet, refreshPageRects, scrollRoot]);
 
   React.useEffect(() => {
+    if (geometryFacet) {
+      return;
+    }
     if (!scrollRoot) {
       return;
     }
@@ -163,7 +182,7 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
     });
     observer.observe(scrollRoot, { childList: true, subtree: false });
     return () => observer.disconnect();
-  }, [refreshPageRects, scrollRoot]);
+  }, [geometryFacet, refreshPageRects, scrollRoot]);
 
   const items = React.useMemo(() => {
     const pxPerTwip = geometryFacet?.getRenderZoom()?.pxPerTwip;

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -70,11 +70,13 @@
 import React from "react";
 import type {
   EditorStoryTarget,
+  GeometryFacet,
   WordReviewEditorLayoutFacet,
 } from "../../api/public-types.ts";
 import {
   measureWidgetsViaOffsetChain,
   measureWidgetsViaBoundingRect,
+  resolvePageOverlayRectsFromGeometry,
   resolvePageOverlayRects,
   type PageOverlayRect,
 } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
@@ -97,6 +99,8 @@ export interface PmPortalView {
 export interface TwPageStackChromeLayerProps {
   /** Layout facet — source of per-page regions, stories, and blocks. */
   facet: WordReviewEditorLayoutFacet;
+  /** Geometry facet — warm-path source of per-page frame rects. */
+  geometryFacet?: GeometryFacet;
   /** Scroll root whose `[data-page-frame-*]` markers drive per-page rects. */
   scrollRoot: HTMLElement | null;
   /**
@@ -161,6 +165,7 @@ export interface TwPageStackChromeLayerProps {
 
 const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   facet,
+  geometryFacet,
   scrollRoot,
   renderFrameRevision,
   activeStory,
@@ -172,7 +177,16 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   mediaPreviews,
   activeBandRibbonProps,
 }) => {
-  const [rects, setRects] = React.useState<readonly PageOverlayRect[]>([]);
+  const [rects, setRects] = React.useState<readonly PageOverlayRect[]>(() => {
+    if (!geometryFacet) return [];
+    const pageCount = facet.getPageCount();
+    const warm = resolvePageOverlayRectsFromGeometry(
+      geometryFacet,
+      pageCount,
+      visiblePageIndexRange,
+    );
+    return warm ?? [];
+  });
   const overlayRootRef = React.useRef<HTMLDivElement | null>(null);
   const rafHandleRef = React.useRef<number | null>(null);
 
@@ -184,12 +198,24 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   // --------------------------------------------------------------------
 
   const refreshRectsNow = React.useCallback(() => {
+    const pageCount = facet.getPageCount();
+    if (geometryFacet) {
+      const geometryRects = resolvePageOverlayRectsFromGeometry(
+        geometryFacet,
+        pageCount,
+        visiblePageIndexRange,
+      );
+      if (geometryRects !== null) {
+        setRects(geometryRects);
+        return;
+      }
+    }
+
     if (!scrollRoot) {
       setRects([]);
       return;
     }
     const origin = overlayRootRef.current;
-    const pageCount = facet.getPageCount();
     if (origin) {
       const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
         pageCount,
@@ -229,11 +255,11 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
         }),
       );
     }
-  }, [facet, scrollRoot, visiblePageIndexRange]);
+  }, [facet, geometryFacet, scrollRoot, visiblePageIndexRange]);
 
   const refreshRects = React.useCallback(() => {
     if (!scrollRoot) {
-      setRects([]);
+      refreshRectsNow();
       return;
     }
     const runtime = scrollRoot.ownerDocument?.defaultView as
@@ -269,6 +295,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
 
   // Observe scroll-root size changes.
   React.useEffect(() => {
+    if (geometryFacet) return;
     if (!scrollRoot) return;
     const runtime = scrollRoot.ownerDocument?.defaultView as
       | (Window & { ResizeObserver?: typeof ResizeObserver })
@@ -277,7 +304,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
     const observer = new runtime.ResizeObserver(() => refreshRects());
     observer.observe(scrollRoot);
     return () => observer.disconnect();
-  }, [scrollRoot, refreshRects]);
+  }, [geometryFacet, scrollRoot, refreshRects]);
 
   // Observe DOM mutations on the scroll root so PM re-renders
   // (page-break widgets added / removed) re-trigger measurement.
@@ -289,6 +316,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   //     live inside the overlay root itself, which prevents the
   //     `setRects` → reconciliation → mutation callback loop.
   React.useEffect(() => {
+    if (geometryFacet) return;
     if (!scrollRoot) return;
     const runtime = scrollRoot.ownerDocument?.defaultView as
       | (Window & { MutationObserver?: typeof MutationObserver })
@@ -306,7 +334,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
     });
     observer.observe(scrollRoot, { childList: true, subtree: false });
     return () => observer.disconnect();
-  }, [scrollRoot, refreshRects]);
+  }, [geometryFacet, scrollRoot, refreshRects]);
 
   // --------------------------------------------------------------------
   // P8.10 — PM portal reparent.
@@ -461,6 +489,7 @@ function propsAreEqual(
 ): boolean {
   return (
     prev.facet === next.facet &&
+    prev.geometryFacet === next.geometryFacet &&
     prev.scrollRoot === next.scrollRoot &&
     prev.renderFrameRevision === next.renderFrameRevision &&
     storyTargetEqual(prev.activeStory, next.activeStory) &&