refactor: reorganize style resolution in the layout engine (SD-1411)

packages/layout-engine/contracts/src/index.ts

@@ -1170,7 +1170,7 @@ export type WordLayoutConfig = {
 
 export type ParagraphAttrs = {
   styleId?: string;
-  alignment?: 'left' | 'center' | 'right' | 'justify' | 'both';
+  alignment?: 'left' | 'center' | 'right' | 'justify';
   spacing?: ParagraphSpacing;
   /**
    * Indicates which spacing properties were explicitly set on the paragraph.
@@ -1197,14 +1197,15 @@ export type ParagraphAttrs = {
    */
   dropCapDescriptor?: DropCapDescriptor;
   frame?: ParagraphFrame;
-  numberingProperties?: Record<string, unknown>;
+  numberingProperties?: { ilvl?: number; numId?: number } | null;
   borders?: ParagraphBorders;
   shading?: ParagraphShading;
   tabs?: TabStop[];
   decimalSeparator?: string;
   tabIntervalTwips?: number;
   keepNext?: boolean;
   keepLines?: boolean;
+  pageBreakBefore?: boolean;
   trackedChangesMode?: TrackedChangesMode;
   trackedChangesEnabled?: boolean;
   /** Marks an empty paragraph that only exists to carry section properties. */

packages/layout-engine/layout-bridge/src/index.ts

@@ -980,7 +980,7 @@ export function clickToPosition(
       const markerWidth = fragment.markerWidth ?? measure.marker?.markerWidth ?? 0;
       const isListItem = markerWidth > 0;
       const paraAlignment = block.attrs?.alignment;
-      const isJustified = paraAlignment === 'justify' || paraAlignment === 'both';
+      const isJustified = paraAlignment === 'justify';
       const alignmentOverride = isListItem && !isJustified ? 'left' : undefined;
 
       const pos = mapPointToPm(block, line, pageRelativePoint.x - fragment.x, isRTL, availableWidth, alignmentOverride);
@@ -1089,7 +1089,7 @@ export function clickToPosition(
       const cellMarkerWidth = cellMeasure.marker?.markerWidth ?? 0;
       const isListItem = cellMarkerWidth > 0;
       const cellAlignment = cellBlock.attrs?.alignment;
-      const isJustified = cellAlignment === 'justify' || cellAlignment === 'both';
+      const isJustified = cellAlignment === 'justify';
       const alignmentOverride = isListItem && !isJustified ? 'left' : undefined;
 
       const pos = mapPointToPm(cellBlock, line, localX, isRTL, availableWidth, alignmentOverride);
@@ -1412,7 +1412,7 @@ export function selectionToRects(
           // List items use textAlign: 'left' in the DOM for non-justify alignments.
           // For justify, we don't override so justify selection rectangles are calculated correctly.
           const blockAlignment = block.attrs?.alignment;
-          const isJustified = blockAlignment === 'justify' || blockAlignment === 'both';
+          const isJustified = blockAlignment === 'justify';
           const alignmentOverride = isListItemFlag && !isJustified ? 'left' : undefined;
           const startX = mapPmToX(block, line, charOffsetFrom, fragment.width, alignmentOverride);
           const endX = mapPmToX(block, line, charOffsetTo, fragment.width, alignmentOverride);

packages/layout-engine/layout-bridge/src/remeasure.ts

@@ -1079,13 +1079,7 @@ export function remeasureParagraph(
   // Both values represent the same concept: where the first-line text begins after the marker/tab.
   // IMPORTANT: Priority must match the painter (renderer.ts) which prefers marker.textStartX
   // because it's consistent with marker.markerX positioning. Mismatched priority causes justify overflow.
-  const markerTextStartX = wordLayout?.marker?.textStartX;
-  const textStartPx =
-    typeof markerTextStartX === 'number' && Number.isFinite(markerTextStartX)
-      ? markerTextStartX
-      : typeof wordLayout?.textStartPx === 'number' && Number.isFinite(wordLayout.textStartPx)
-        ? wordLayout.textStartPx
-        : undefined;
+  const textStartPx = wordLayout?.textStartPx;
   // Track measured marker text width for returning in measure.marker
   let measuredMarkerTextWidth: number | undefined;
   const resolvedTextStartPx = resolveListTextStartPx(
@@ -1319,7 +1313,7 @@ export function remeasureParagraph(
   const marker = wordLayout?.marker;
   const markerInfo = marker
     ? {
-        markerWidth: marker.markerBoxWidthPx ?? indentHanging ?? 0,
+        markerWidth: indentHanging ?? 0,
         markerTextWidth: measuredMarkerTextWidth ?? 0,
         indentLeft,
         gutterWidth: marker.gutterWidthPx,

packages/layout-engine/layout-engine/src/layout-paragraph.test.ts

@@ -203,10 +203,10 @@ describe('layoutParagraphBlock - remeasurement with list markers', () => {
       expect(remeasureParagraph).toHaveBeenCalledWith(block, 150, 24);
     });
 
-    it('uses fallback to markerBoxWidthPx when markerWidth is missing', () => {
+    it('uses markerWidth=0 fallback when markerWidth is missing', () => {
       const remeasureParagraph = vi.fn((block, maxWidth, firstLineIndent) => {
-        // Should use markerBoxWidthPx (20) + gutterWidth (6)
-        expect(firstLineIndent).toBe(26);
+        // markerWidth defaults to 0 when the measure marker is present
+        expect(firstLineIndent).toBe(6);
         return makeMeasure([{ width: 100, lineHeight: 20, maxWidth: 150 }]);
       });
 
@@ -226,7 +226,7 @@ describe('layoutParagraphBlock - remeasurement with list markers', () => {
 
       const measure = makeMeasure(
         [{ width: 100, lineHeight: 20, maxWidth: 200 }],
-        { gutterWidth: 6 }, // markerWidth is missing
+        { gutterWidth: 6 }, // markerWidth is missing and defaults to 0
       );
 
       const ctx: ParagraphLayoutContext = {
@@ -242,7 +242,7 @@ describe('layoutParagraphBlock - remeasurement with list markers', () => {
 
       layoutParagraphBlock(ctx);
 
-      expect(remeasureParagraph).toHaveBeenCalledWith(block, 150, 26);
+      expect(remeasureParagraph).toHaveBeenCalledWith(block, 150, 6);
     });
 
     it('uses fallback to 0 when both markerWidth and markerBoxWidthPx are missing', () => {

packages/layout-engine/layout-engine/src/layout-table.test.ts

@@ -1439,13 +1439,48 @@ describe('layoutTableBlock', () => {
       const measure = createMockTableMeasure(
         [100, 100], // Two columns
         [120], // Row height (max of cell heights)
-        [
-          // Row 0 - different line heights per cell
-          [20, 20, 20], // Cell 0: 3x20px lines
-          [40, 40, 40], // Cell 1: 3x40px lines
-        ],
+        [[20, 20, 20]], // Row 0 defaults (applied to all cells)
       );
 
+      if (measure.rows[0].cells[1]) {
+        measure.rows[0].cells[1].paragraph = {
+          kind: 'paragraph',
+          lines: [
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 30,
+              descent: 10,
+              lineHeight: 40,
+            },
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 30,
+              descent: 10,
+              lineHeight: 40,
+            },
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 30,
+              descent: 10,
+              lineHeight: 40,
+            },
+          ],
+          totalHeight: 120,
+        };
+      }
+
       const fragments: TableFragment[] = [];
       let pageCount = 0;
       const mockPage = { fragments };
@@ -1583,12 +1618,58 @@ describe('layoutTableBlock', () => {
       const measure = createMockTableMeasure(
         [100, 100],
         [80], // Row height (max of cells)
-        [
-          [20, 20], // Cell 0: 2 lines of 20px (total 40px)
-          [20, 20, 20, 20], // Cell 1: 4 lines of 20px (total 80px)
-        ],
+        [[20, 20]], // Row 0 defaults (applied to all cells)
       );
 
+      if (measure.rows[0].cells[1]) {
+        measure.rows[0].cells[1].paragraph = {
+          kind: 'paragraph',
+          lines: [
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 15,
+              descent: 5,
+              lineHeight: 20,
+            },
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 15,
+              descent: 5,
+              lineHeight: 20,
+            },
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 15,
+              descent: 5,
+              lineHeight: 20,
+            },
+            {
+              fromRun: 0,
+              fromChar: 0,
+              toRun: 0,
+              toChar: 1,
+              width: 100,
+              ascent: 15,
+              descent: 5,
+              lineHeight: 20,
+            },
+          ],
+          totalHeight: 80,
+        };
+      }
+
       const fragments: TableFragment[] = [];
       let cursorY = 0;
       const mockPage = { fragments };

packages/layout-engine/measuring/dom/src/index.ts

@@ -2299,7 +2299,7 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
         : LIST_MARKER_GAP;
 
     // Marker box should match Word's box width when provided; otherwise fall back to glyph + gap.
-    const markerBoxWidth = Math.max(wordLayout.marker.markerBoxWidthPx ?? 0, glyphWidth + LIST_MARKER_GAP);
+    const markerBoxWidth = Math.max(0, glyphWidth + LIST_MARKER_GAP);
 
     markerInfo = {
       markerWidth: markerBoxWidth,
@@ -2971,7 +2971,7 @@ async function measureListBlock(block: ListBlock, constraints: MeasureConstraint
       };
       const { font: markerFont } = buildFontString(markerFontRun);
       markerTextWidth = marker.markerText ? measureText(marker.markerText, markerFont, ctx) : 0;
-      markerWidth = marker.markerBoxWidthPx;
+      markerWidth = 0;
       indentLeft = (wordLayout as WordParagraphLayoutOutput).indentLeftPx ?? 0;
     } else {
       // Fallback: legacy behavior for backwards compatibility

packages/layout-engine/painters/dom/src/index.test.ts

@@ -764,6 +764,7 @@ describe('DomPainter', () => {
               y: 0,
               width: 400,
               markerWidth: 24,
+              markerTextWidth: 12,
             },
           ],
         },
@@ -860,6 +861,7 @@ describe('DomPainter', () => {
               y: 0,
               width: 400,
               markerWidth: 24,
+              markerTextWidth: 12,
             },
           ],
         },
@@ -872,11 +874,11 @@ describe('DomPainter', () => {
     const firstLine = mount.querySelector('.superdoc-line') as HTMLElement;
     // Word-spacing is calculated based on available width AFTER accounting for marker position + inline width.
     // Fragment has indent: { left: 48, hanging: 24 }, so markerStartPos = 48 - 24 = 24
-    // fragment.markerTextWidth is not set, so falls back to fragment.markerWidth = 24
-    // Text starts at: markerStartPos (24) + markerTextWidth (24) + space (~4px) = 52px
-    // availableWidth = 400 - 52 = 348
-    // slack = 348 - 180 = 168, wordSpacing = 168 / 5 = 33.6px
-    expect(firstLine.style.wordSpacing).toBe('33.6px');
+    // fragment.markerTextWidth is 12
+    // Text starts at: markerStartPos (24) + markerTextWidth (12) + space (4px) = 40px
+    // availableWidth = 400 - 40 = 360
+    // slack = 360 - 180 = 180, wordSpacing = 180 / 5 = 36px
+    expect(firstLine.style.wordSpacing).toBe('36px');
 
     const suffix = firstLine.querySelector('.superdoc-marker-suffix-space') as HTMLElement;
     expect(suffix).toBeTruthy();
@@ -944,6 +946,7 @@ describe('DomPainter', () => {
               y: 0,
               width: 400,
               markerWidth: 24,
+              markerTextWidth: 12,
             },
           ],
         },
@@ -1855,6 +1858,7 @@ describe('DomPainter', () => {
               y: 96,
               width: 300,
               markerWidth: 20,
+              markerTextWidth: 12,
             },
           ],
         },
@@ -1943,6 +1947,7 @@ describe('DomPainter', () => {
               y: 120,
               width: 300,
               markerWidth: 24,
+              markerTextWidth: 12,
             },
           ],
         },
@@ -2028,6 +2033,7 @@ describe('DomPainter', () => {
               y: 96,
               width: 300,
               markerWidth: 15,
+              markerTextWidth: 10,
             },
           ],
         },
@@ -2047,10 +2053,10 @@ describe('DomPainter', () => {
 
     // Tab should reach implicit tab stop at indentLeft (48px)
     // markerStartPos = paraIndentLeft - hanging = 48 - 24 = 24
-    // currentPos = markerStartPos + markerWidth = 24 + 15 = 39
+    // currentPos = markerStartPos + markerTextWidth = 24 + 10 = 34
     // implicitTabStop = paraIndentLeft = 48
-    // tabWidth = 48 - 39 = 9
-    const expectedTabWidth = 9;
+    // tabWidth = 48 - 34 = 14
+    const expectedTabWidth = 14;
     expect(tabEl.style.width).toBe(`${expectedTabWidth}px`);
   });
 
@@ -2116,6 +2122,7 @@ describe('DomPainter', () => {
               y: 96,
               width: 300,
               markerWidth: 45,
+              markerTextWidth: 40,
             },
           ],
         },
@@ -2135,11 +2142,11 @@ describe('DomPainter', () => {
 
     // Marker extends past implicit tab stop, so advance to next default tab interval
     // markerStartPos = paraIndentLeft - hanging = 24 - 12 = 12
-    // currentPos = markerStartPos + markerWidth = 12 + 45 = 57
+    // currentPos = markerStartPos + markerTextWidth = 12 + 40 = 52
     // implicitTabStop = paraIndentLeft = 24
     // tabWidth would be negative (24 - 57 = -33), so use default tab interval
-    // tabWidth = 48 - (57 % 48) = 48 - 9 = 39
-    const expectedTabWidth = 39;
+    // tabWidth = 48 - (52 % 48) = 48 - 4 = 44
+    const expectedTabWidth = 44;
     expect(tabEl.style.width).toBe(`${expectedTabWidth}px`);
   });
 
@@ -2208,6 +2215,7 @@ describe('DomPainter', () => {
               width: 300,
               markerWidth: 20,
               markerGutter: 12,
+              markerTextWidth: 10,
             },
           ],
         },
@@ -2225,8 +2233,8 @@ describe('DomPainter', () => {
     const tabEl = fragment.querySelector('.superdoc-tab') as HTMLElement;
     expect(tabEl).toBeTruthy();
 
-    // For right-justified markers, use fragment.markerGutter
-    const expectedTabWidth = 12;
+    // For right-justified markers without firstLine, tab width uses hanging indent
+    const expectedTabWidth = 24;
     expect(tabEl.style.width).toBe(`${expectedTabWidth}px`);
   });
 
@@ -8662,6 +8670,7 @@ describe('applyRunDataAttributes', () => {
                 y: 24,
                 width: 300,
                 markerWidth: 15,
+                markerTextWidth: 10,
                 pmStart: 0,
                 pmEnd: 14,
               },
@@ -8758,6 +8767,7 @@ describe('applyRunDataAttributes', () => {
                 y: 24,
                 width: 300,
                 markerWidth: 15,
+                markerTextWidth: 10,
                 pmStart: 0,
                 pmEnd: 4,
               },
@@ -8849,6 +8859,7 @@ describe('applyRunDataAttributes', () => {
                 y: 24,
                 width: 300,
                 markerWidth: 15,
+                markerTextWidth: 10,
                 pmStart: 0,
                 pmEnd: 4,
               },
@@ -8924,6 +8935,7 @@ describe('applyRunDataAttributes', () => {
                 y: 24,
                 width: 300,
                 markerWidth: 15,
+                markerTextWidth: 10,
                 pmStart: 0,
                 pmEnd: 4,
               },