feat(tables): allow resizing table rows

Author: harbournick

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

@@ -1618,6 +1618,8 @@ export type TableRowBoundary = {
   index: number;
   y: number;
   height: number;
+  minHeight: number;
+  resizable: boolean;
 };
 
 export type TableFragmentMetadata = {

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

@@ -314,7 +314,7 @@ describe('layoutTableBlock', () => {
       });
     });
 
-    it('should not include rowBoundaries metadata (Phase 1 scope)', () => {
+    it('should include rowBoundaries metadata', () => {
       const block = createMockTableBlock(3);
       const measure = createMockTableMeasure([100, 150], [20, 25, 30]);
 
@@ -336,7 +336,123 @@ describe('layoutTableBlock', () => {
       });
 
       const fragment = fragments[0];
-      expect(fragment.metadata?.rowBoundaries).toBeUndefined();
+      const rowBoundaries = fragment.metadata?.rowBoundaries;
+      expect(rowBoundaries).toBeDefined();
+      expect(rowBoundaries).toHaveLength(3);
+
+      // Each boundary should have required fields
+      expect(rowBoundaries![0]).toMatchObject({
+        index: 0,
+        y: 0,
+        height: 20,
+        resizable: true,
+      });
+      expect(rowBoundaries![1]).toMatchObject({
+        index: 1,
+        y: 20,
+        height: 25,
+        resizable: true,
+      });
+      expect(rowBoundaries![2]).toMatchObject({
+        index: 2,
+        y: 45,
+        height: 30,
+        resizable: true,
+      });
+
+      // minHeight should be at least ROW_MIN_HEIGHT_PX (10)
+      rowBoundaries!.forEach((rb) => {
+        expect(rb.minHeight).toBeGreaterThanOrEqual(10);
+      });
+    });
+
+    it('uses partial row height in rowBoundaries and marks it non-resizable', () => {
+      const block = createMockTableBlock(1, [{ cantSplit: false }]);
+      const measure = createMockTableMeasure([100], [200], [[10, 10, 10, 10, 10, 10]]);
+
+      const fragments: TableFragment[] = [];
+      let cursorY = 0;
+      let contentBottom = 40; // Force a partial-row first fragment
+
+      layoutTableBlock({
+        block,
+        measure,
+        columnWidth: 100,
+        ensurePage: () => ({
+          page: { fragments },
+          columnIndex: 0,
+          cursorY,
+          contentBottom,
+        }),
+        advanceColumn: () => {
+          cursorY = 0;
+          contentBottom = 300;
+          return {
+            page: { fragments },
+            columnIndex: 0,
+            cursorY,
+            contentBottom,
+          };
+        },
+        columnX: () => 0,
+      });
+
+      const partialFragment = fragments.find((fragment) => fragment.partialRow != null);
+      expect(partialFragment).toBeDefined();
+      expect(partialFragment!.partialRow).toBeTruthy();
+
+      const rowBoundaries = partialFragment!.metadata?.rowBoundaries;
+      expect(rowBoundaries).toHaveLength(1);
+      expect(rowBoundaries![0].height).toBe(partialFragment!.partialRow!.partialHeight);
+      expect(rowBoundaries![0].resizable).toBe(false);
+      expect(rowBoundaries![0].minHeight).toBe(partialFragment!.partialRow!.partialHeight);
+    });
+
+    it('marks repeated header row boundaries as non-resizable on continuation fragments', () => {
+      const block = createMockTableBlock(4, [
+        { repeatHeader: true },
+        { repeatHeader: false },
+        { repeatHeader: false },
+        { repeatHeader: false },
+      ]);
+      const measure = createMockTableMeasure([100], [20, 20, 20, 20]);
+
+      const fragments: TableFragment[] = [];
+      let cursorY = 0;
+      let contentBottom = 60; // First page fits 3 rows; continuation should repeat header
+
+      layoutTableBlock({
+        block,
+        measure,
+        columnWidth: 100,
+        ensurePage: () => ({
+          page: { fragments },
+          columnIndex: 0,
+          cursorY,
+          contentBottom,
+        }),
+        advanceColumn: () => {
+          cursorY = 0;
+          contentBottom = 60;
+          return {
+            page: { fragments },
+            columnIndex: 0,
+            cursorY,
+            contentBottom,
+          };
+        },
+        columnX: () => 0,
+      });
+
+      const continuation = fragments.find((fragment) => (fragment.repeatHeaderCount ?? 0) > 0);
+      expect(continuation).toBeDefined();
+
+      const rowBoundaries = continuation!.metadata?.rowBoundaries;
+      expect(rowBoundaries).toBeDefined();
+      expect(rowBoundaries!.length).toBeGreaterThanOrEqual(2);
+      expect(rowBoundaries![0].index).toBe(0);
+      expect(rowBoundaries![0].resizable).toBe(false);
+      expect(rowBoundaries![1].resizable).toBe(true);
     });
   });
 

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

@@ -3,6 +3,7 @@ import type {
   TableMeasure,
   TableFragment,
   TableColumnBoundary,
+  TableRowBoundary,
   TableFragmentMetadata,
   TableRowMeasure,
   TableRow,
@@ -195,6 +196,7 @@ export function rescaleColumnWidths(
 
 const COLUMN_MIN_WIDTH_PX = 25;
 const COLUMN_MAX_WIDTH_PX = 200;
+const ROW_MIN_HEIGHT_PX = 10;
 
 /**
  * Calculate minimum width for a table column from its measured width.
@@ -261,6 +263,98 @@ function generateColumnBoundaries(measure: TableMeasure, effectiveWidths?: numbe
   return boundaries;
 }
 
+/**
+ * Generate row boundary metadata for interactive table row resizing.
+ *
+ * Creates metadata that enables the overlay component to position horizontal
+ * resize handles and enforce minimum height constraints during drag operations.
+ *
+ * Boundaries are marked non-resizable when:
+ * - A cell in the row above has a rowSpan that crosses the boundary
+ * - The row is a repeated header on a continuation fragment (resize originals only)
+ *
+ * @param measure - Table measurement containing row heights
+ * @param block - Table block (used for rowSpan inspection)
+ * @param fromRow - Starting body row index (inclusive)
+ * @param toRow - Ending body row index (exclusive)
+ * @param repeatHeaderCount - Number of repeated header rows on this fragment
+ * @param cellSpacingPx - Cell spacing in pixels (border-spacing)
+ * @returns Array of row boundary metadata
+ */
+function generateRowBoundaries(
+  measure: TableMeasure,
+  block: TableBlock,
+  fromRow: number,
+  toRow: number,
+  repeatHeaderCount: number,
+  cellSpacingPx: number,
+  partialRow?: PartialRowInfo | null,
+): TableRowBoundary[] {
+  const boundaries: TableRowBoundary[] = [];
+
+  // Build ordered list of rendered rows: headers first, then body rows
+  const renderedRows: Array<{ rowIndex: number; isRepeatedHeader: boolean }> = [];
+  if (repeatHeaderCount > 0) {
+    for (let r = 0; r < repeatHeaderCount && r < measure.rows.length; r++) {
+      renderedRows.push({ rowIndex: r, isRepeatedHeader: fromRow > 0 });
+    }
+  }
+  for (let r = fromRow; r < toRow && r < measure.rows.length; r++) {
+    renderedRows.push({ rowIndex: r, isRepeatedHeader: false });
+  }
+
+  // Build a set of ABSOLUTE row boundaries blocked by rowspan cells.
+  // A boundary after absolute row N is blocked if any cell starting at row N
+  // has a rowSpan that extends beyond row N.
+  const blockedBoundaries = new Set<number>();
+  for (let ri = 0; ri < renderedRows.length; ri++) {
+    const { rowIndex } = renderedRows[ri];
+    const rowMeasure = measure.rows[rowIndex];
+    if (!rowMeasure) continue;
+
+    for (const cellMeasure of rowMeasure.cells) {
+      const rowSpan = cellMeasure.rowSpan ?? 1;
+      if (rowSpan <= 1) continue;
+
+      // This cell spans from rowIndex to rowIndex + rowSpan - 1.
+      // Block absolute boundaries between the start row and end row.
+      // Example: rowIndex=2, rowSpan=3 blocks boundaries after rows 2 and 3.
+      for (let boundaryRow = rowIndex; boundaryRow < rowIndex + rowSpan - 1; boundaryRow++) {
+        blockedBoundaries.add(boundaryRow);
+      }
+    }
+  }
+
+  let yPosition = cellSpacingPx;
+  for (let ri = 0; ri < renderedRows.length; ri++) {
+    const { rowIndex, isRepeatedHeader } = renderedRows[ri];
+    const rowMeasure = measure.rows[rowIndex];
+    if (!rowMeasure) continue;
+
+    const isPartial = partialRow?.rowIndex === rowIndex;
+    const height = isPartial ? partialRow.partialHeight : rowMeasure.height;
+    const contentHeight = getRowContentHeight(block.rows[rowIndex], rowMeasure);
+    const minHeight = isPartial ? Math.max(1, height) : Math.max(ROW_MIN_HEIGHT_PX, contentHeight);
+
+    // A boundary is resizable unless:
+    // 1. It's a repeated header on a continuation fragment
+    // 2. A rowspan crosses this boundary (blockedBoundaries)
+    const resizable = !isRepeatedHeader && !isPartial && !blockedBoundaries.has(rowIndex);
+
+    boundaries.push({
+      index: rowIndex,
+      y: yPosition,
+      height,
+      minHeight,
+      resizable,
+    });
+
+    yPosition += height + cellSpacingPx;
+  }
+
+  return boundaries;
+}
+
 /**
  * Count contiguous header rows from the beginning of the table.
  *
@@ -1097,23 +1191,29 @@ function findSplitPoint(
 /**
  * Generate fragment metadata for a table fragment.
  *
- * Currently only includes column boundaries; row boundaries omitted to reduce DOM overhead.
+ * Includes column boundaries and row boundaries for interactive resizing.
  *
  * @param measure - Table measurements
- * @param fromRow - Starting row (unused but kept for future row boundaries)
- * @param toRow - Ending row (unused but kept for future row boundaries)
- * @param repeatHeaderCount - Header count (unused but kept for future metadata)
+ * @param block - Table block (used for rowSpan and content height inspection)
+ * @param fromRow - Starting body row index (inclusive)
+ * @param toRow - Ending body row index (exclusive)
+ * @param repeatHeaderCount - Number of repeated header rows on this fragment
+ * @param effectiveWidths - Optional rescaled column widths
  * @returns Table fragment metadata
  */
 function generateFragmentMetadata(
   measure: TableMeasure,
-  _fromRow: number,
-  _toRow: number,
-  _repeatHeaderCount: number,
+  block: TableBlock,
+  fromRow: number,
+  toRow: number,
+  repeatHeaderCount: number,
   effectiveWidths?: number[],
+  partialRow?: PartialRowInfo | null,
 ): TableFragmentMetadata {
+  const cellSpacingPx = measure.cellSpacingPx ?? 0;
   return {
     columnBoundaries: generateColumnBoundaries(measure, effectiveWidths),
+    rowBoundaries: generateRowBoundaries(measure, block, fromRow, toRow, repeatHeaderCount, cellSpacingPx, partialRow),
     coordinateSystem: 'fragment',
   };
 }
@@ -1138,10 +1238,14 @@ function layoutMonolithicTable(context: TableLayoutContext): void {
   const { x, width } = resolveTableFrame(baseX, context.columnWidth, baseWidth, context.block.attrs);
   const columnWidths = rescaleColumnWidths(context.measure.columnWidths, context.measure.totalWidth, width);
 
-  const metadata: TableFragmentMetadata = {
-    columnBoundaries: generateColumnBoundaries(context.measure, columnWidths),
-    coordinateSystem: 'fragment',
-  };
+  const metadata = generateFragmentMetadata(
+    context.measure,
+    context.block,
+    0,
+    context.block.rows.length,
+    0,
+    columnWidths,
+  );
 
   const fragment: TableFragment = {
     kind: 'table',
@@ -1288,10 +1392,7 @@ export function layoutTableBlock({
     const { x, width } = resolveTableFrame(baseX, columnWidth, baseWidth, block.attrs);
     const columnWidths = rescaleColumnWidths(measure.columnWidths, measure.totalWidth, width);
 
-    const metadata: TableFragmentMetadata = {
-      columnBoundaries: generateColumnBoundaries(measure, columnWidths),
-      coordinateSystem: 'fragment',
-    };
+    const metadata = generateFragmentMetadata(measure, block, 0, 0, 0, columnWidths);
 
     const fragment: TableFragment = {
       kind: 'table',
@@ -1408,7 +1509,15 @@ export function layoutTableBlock({
           continuesOnNext: hasRemainingLinesAfterContinuation || rowIndex + 1 < block.rows.length,
           repeatHeaderCount,
           partialRow: continuationPartialRow,
-          metadata: generateFragmentMetadata(measure, rowIndex, rowIndex + 1, repeatHeaderCount, scaledWidths),
+          metadata: generateFragmentMetadata(
+            measure,
+            block,
+            rowIndex,
+            rowIndex + 1,
+            repeatHeaderCount,
+            scaledWidths,
+            continuationPartialRow,
+          ),
           columnWidths: scaledWidths,
         };
 
@@ -1486,7 +1595,15 @@ export function layoutTableBlock({
         continuesOnNext: !forcedPartialRow.isLastPart || forcedEndRow < block.rows.length,
         repeatHeaderCount,
         partialRow: forcedPartialRow,
-        metadata: generateFragmentMetadata(measure, bodyStartRow, forcedEndRow, repeatHeaderCount, scaledWidths),
+        metadata: generateFragmentMetadata(
+          measure,
+          block,
+          bodyStartRow,
+          forcedEndRow,
+          repeatHeaderCount,
+          scaledWidths,
+          forcedPartialRow,
+        ),
         columnWidths: scaledWidths,
       };
 
@@ -1530,7 +1647,15 @@ export function layoutTableBlock({
       continuesOnNext: endRow < block.rows.length || (partialRow ? !partialRow.isLastPart : false),
       repeatHeaderCount,
       partialRow: partialRow || undefined,
-      metadata: generateFragmentMetadata(measure, bodyStartRow, endRow, repeatHeaderCount, scaledWidths),
+      metadata: generateFragmentMetadata(
+        measure,
+        block,
+        bodyStartRow,
+        endRow,
+        repeatHeaderCount,
+        scaledWidths,
+        partialRow,
+      ),
       columnWidths: scaledWidths,
     };
 
@@ -1568,10 +1693,7 @@ export function createAnchoredTableFragment(
   x: number,
   y: number,
 ): TableFragment {
-  const metadata: TableFragmentMetadata = {
-    columnBoundaries: generateColumnBoundaries(measure),
-    coordinateSystem: 'fragment',
-  };
+  const metadata = generateFragmentMetadata(measure, block, 0, block.rows.length, 0);
 
   const fragment: TableFragment = {
     kind: 'table',