fix: align market selection checkboxes with rows

- Fix checkbox column misalignment with creator list items
- Add syncContentCellHeight to keep selection cells aligned with native rows
- Add MarketAlignmentDiagnostic for debugging alignment issues
- Update documentation to clarify dist-release folder usage
- Add npm run build:release step to colleague setup guide

tests/market-dom-sync.test.ts

@@ -7,6 +7,7 @@ import {
   applyRowVisibility,
   findNextPageControl,
   isPageControlDisabled,
+  readMarketAlignmentDiagnostics,
   readMarketPageSignature,
   renderMarketRowState,
   syncMarketTable
@@ -329,6 +330,70 @@ describe("market-dom-sync", () => {
     expect(readSelectionCellHeights()).toEqual(["120px", "120px"]);
   });
 
+  test("resyncs selection cell heights when native author row heights change", () => {
+    document.body.innerHTML = buildRealMarketGridFixture();
+
+    expect(syncMarketTable(document)).not.toBeNull();
+    expect(readSelectionCellHeights()).toEqual(["120px", "120px"]);
+
+    const authorCells = Array.from(
+      document.querySelectorAll('[data-testid="author-section"] .content-column:not([data-market-column-group="selection"]) > .content-cell')
+    ) as HTMLElement[];
+    const middleCells = Array.from(
+      document.querySelectorAll('.middle-columns .content-column > .content-cell')
+    ) as HTMLElement[];
+    const rightCells = Array.from(
+      document.querySelectorAll('[data-testid="right-section"] .content-column > .content-cell')
+    ) as HTMLElement[];
+
+    [...authorCells, ...middleCells, ...rightCells].forEach((cell) => {
+      cell.style.height = "152px";
+    });
+
+    expect(syncMarketTable(document)).not.toBeNull();
+    expect(readSelectionCellHeights()).toEqual(["152px", "152px"]);
+  });
+
+  test("reads alignment diagnostics for selection cells against native rows", () => {
+    document.body.innerHTML = buildRealMarketGridFixture();
+
+    const table = syncMarketTable(document);
+    if (!table) {
+      throw new Error("Expected market table");
+    }
+
+    const firstSelectionCell = table.rows[0].selectionCheckbox.parentElement as HTMLElement;
+    const secondSelectionCell = table.rows[1].selectionCheckbox.parentElement as HTMLElement;
+
+    vi.spyOn(firstSelectionCell, "getBoundingClientRect").mockReturnValue(
+      createRect({ height: 24, top: 100 })
+    );
+    vi.spyOn(table.rows[0].row, "getBoundingClientRect").mockReturnValue(
+      createRect({ height: 120, top: 120 })
+    );
+    vi.spyOn(secondSelectionCell, "getBoundingClientRect").mockReturnValue(
+      createRect({ height: 24, top: 260 })
+    );
+    vi.spyOn(table.rows[1].row, "getBoundingClientRect").mockReturnValue(
+      createRect({ height: 120, top: 250 })
+    );
+
+    expect(readMarketAlignmentDiagnostics(table)).toEqual([
+      expect.objectContaining({
+        authorId: "111",
+        checkboxTop: 100,
+        rowTop: 120,
+        topDelta: -20
+      }),
+      expect.objectContaining({
+        authorId: "222",
+        checkboxTop: 260,
+        rowTop: 250,
+        topDelta: 10
+      })
+    ]);
+  });
+
   test("uses native-like alignment styles for plugin cells", () => {
     document.body.innerHTML = buildRealMarketGridFixtureWithScopedAttributes();
 
@@ -1047,3 +1112,25 @@ function readVisualCells(root: Element | null): HTMLElement[] {
       return cells.indexOf(left) - cells.indexOf(right);
     });
 }
+
+function createRect({
+  height,
+  top
+}: {
+  height: number;
+  top: number;
+}): DOMRect {
+  return {
+    bottom: top + height,
+    height,
+    left: 0,
+    right: 0,
+    toJSON() {
+      return {};
+    },
+    top,
+    width: 0,
+    x: 0,
+    y: top
+  } as DOMRect;
+}