@@ -10,6 +10,23 @@
 @import "./styles/marketing-components.css";
 @import "@pretable/ui/themes/excel.css";
 @import "@pretable/ui/grid.css";
+
+/* Row height is a comparability control, not a style choice.
+   The three comparator adapters hard-code ROW_HEIGHT = 48 (see
+   tanstack-adapter.tsx, mui-adapter.tsx, ag-grid-adapter.tsx), so pretable has
+   to render at 48 too or the runs are not measuring the same work: row height
+   decides how many rows fit a viewport, and a shorter row means MORE rows
+   rendered, scrolled, and re-rendered per frame.
+   Until row heights became theme-aware, pretable ignored the theme and floored
+   every row at a hard-coded 44 — off by 4px from the comparators, and nobody
+   could see it in the stylesheet. Now the Excel theme this app imports would
+   genuinely apply, and Excel's rows are 20px: pretable would render 2.4x the
+   rows of every comparator in the same viewport, in its own favour on some
+   metrics and against it on others. Pinning the token states the control in
+   the one place a reader of this file will look. */
+:root {
+  --pretable-row-height: 48px;
+}
 @import "tailwindcss";
 
 @theme inline {
 
@@ -0,0 +1,67 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * The unit tests for the row-height floor run in jsdom, which has no layout
+ * engine: there the floor is the only thing that can decide a row's height,
+ * which makes them precise about the floor and blind to everything else.
+ *
+ * This is the other half — a real engine, real fonts, real content — asserting
+ * the two properties that only a browser can show:
+ *
+ *  1. rows land on the theme's --pretable-row-height rather than the old
+ *     hard-coded 44, and
+ *  2. the scroll extent agrees with them, so the scrollbar is not sized from a
+ *     different number than the rows are drawn at.
+ */
+test("rows render at the theme's row height, and the scroll extent agrees", async ({
+  page,
+}) => {
+  await page.goto("/?adapter=pretable&scenario=S1&scale=dev");
+
+  const row = page.locator("[data-pretable-row]").first();
+  await expect(row).toBeVisible();
+
+  const themeRowHeight = await page.evaluate(() =>
+    parseFloat(
+      getComputedStyle(document.documentElement).getPropertyValue(
+        "--pretable-row-height",
+      ),
+    ),
+  );
+  // The bench pins this to match the comparators; if that pin is ever removed
+  // the assertions below still hold, they just hold against a different number.
+  expect(themeRowHeight).toBeGreaterThan(0);
+
+  const heights = await page.evaluate(() =>
+    [...document.querySelectorAll("[data-pretable-row]")].map(
+      (node) => node.getBoundingClientRect().height,
+    ),
+  );
+  expect(heights.length).toBeGreaterThan(3);
+  // Every row, not just the first: the floor is applied per row, and a bug
+  // that reached only the initially-measured window would still pass a
+  // single-row check.
+  for (const height of heights) {
+    expect(height).toBeCloseTo(themeRowHeight, 1);
+  }
+
+  // The scroll extent is built from estimates for rows nobody has measured.
+  // It used to come from a separate constant, so a themed grid claimed one
+  // height for its scrollbar and drew another in its rows.
+  const { contentHeight, rowCount } = await page.evaluate(() => {
+    const content = document.querySelector<HTMLElement>(
+      "[data-pretable-scroll-content]",
+    );
+    const viewport = document.querySelector<HTMLElement>(
+      "[data-pretable-scroll-viewport]",
+    );
+    return {
+      contentHeight: content ? parseFloat(content.style.height) : NaN,
+      rowCount: Number(viewport?.getAttribute("aria-rowcount") ?? NaN),
+    };
+  });
+  expect(Number.isFinite(contentHeight)).toBe(true);
+  expect(Number.isFinite(rowCount)).toBe(true);
+  // aria-rowcount includes the header row; the body holds the rest.
+  expect(contentHeight).toBeCloseTo((rowCount - 1) * themeRowHeight, 0);
+});
@@ -55,12 +55,16 @@ Wrap your app with a `<DensityPicker density={...} onChange={...} />` and hold t
 
 Three density tokens are read by the engine in JavaScript, not just by CSS:
 
-- `--pretable-row-height` — used by the row virtualizer to compute `top` positions.
+- `--pretable-row-height` — the height every row is drawn at, and the floor a measured row is clamped to.
 - `--pretable-header-height` — used to position the sticky header and compute body viewport height.
 - `--pretable-group-panel-height` — used to lay out the drag-to-group strip above the header.
 
 The engine reads all three from `<html>`'s computed style and subscribes to attribute changes on `<html>` with a `MutationObserver`. When you flip `data-density`, the grid re-renders with new heights automatically — this is internal to `<Pretable>` and `<PretableSurface>`, and needs no wiring from you.
 
+> `--pretable-row-height` is a floor, not a cap. A row whose content is taller — a wrapped text column, a two-line cell presentation — is measured and drawn at its content height, and the token decides only what a row that fits gets. That is what makes a mixed grid work: uniform rows at the density you asked for, taller ones exactly where the content needs them.
+>
+> With no theme imported at all, rows fall back to 44px. That is not a fourth density tier, it is the historical default for an unthemed grid, and it differs from `getDensityHeights`'s documented 32 because the two answer different questions — one is what to draw, the other what a caller reading density into their own layout should assume. Import a theme and neither number is reachable.
+
 To read the row and header heights in your own code, `@pretable/ui` exports `getDensityHeights`. See [Density helpers](/docs/grid/density-helpers).
 
 ## Composition with light/dark
 
@@ -2443,7 +2443,7 @@ export type UsePretableRowsWithIdOptions<TColumns, TRowId extends PretableRowId>
 // Warning: (ae-internal-missing-underscore) The name "ɵmeasureRenderedRowHeight" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
-export function ɵmeasureRenderedRowHeight(row: HTMLElement): number;
+export function ɵmeasureRenderedRowHeight(row: HTMLElement, minRowHeight?: number): number;
 
 // Warning: (ae-internal-missing-underscore) The name "ɵROW_SELECT_COLUMN_ID" should be prefixed with an underscore because the declaration is marked as @internal
 //
 
@@ -0,0 +1,192 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import * as React from "react";
+import { afterEach, describe, expect, test } from "vitest";
+
+import { createColumnHelper } from "@pretable/core";
+
+import { PretableSurface } from "../pretable-surface";
+import { measureRenderedRowHeight } from "../row-height";
+
+/**
+ * A row's height has a floor, and until now that floor was the literal 44 —
+ * written in April, before the token contract existed, and never revisited.
+ * Every shipped theme states a row height per density tier, and three of the
+ * nine tiers are shorter than 44: Excel is 20 / 24 / 32, and both pretable and
+ * Material are 40 at compact. Under those the floor won every time, so the
+ * theme's stated height was unreachable and Excel's rows rendered at more than
+ * twice their intended size.
+ *
+ * jsdom has no layout engine — every element measures zero — so the floor is
+ * the ONLY thing deciding a row's height here. That makes it exactly the right
+ * environment to pin the floor, and useless for anything about content.
+ */
+
+type Row = { id: number; name: string };
+
+const column = createColumnHelper<Row>();
+const columns = [column.accessor("name", { type: "text" })] as const;
+const rows: readonly Row[] = [
+  { id: 1, name: "a" },
+  { id: 2, name: "b" },
+];
+
+function setThemeRowHeight(value: string | null) {
+  if (value === null) {
+    document.documentElement.style.removeProperty("--pretable-row-height");
+    return;
+  }
+  document.documentElement.style.setProperty("--pretable-row-height", value);
+}
+
+function renderedRowHeights(container: HTMLElement): number[] {
+  return [
+    ...container.querySelectorAll<HTMLElement>("[data-pretable-row]"),
+  ].map((row) => Number(row.getAttribute("data-pretable-row-height")));
+}
+
+afterEach(() => {
+  cleanup();
+  setThemeRowHeight(null);
+});
+
+describe("row height floor", () => {
+  test("measureRenderedRowHeight floors at the height it is given", () => {
+    const row = document.createElement("div");
+    const cell = document.createElement("div");
+    cell.setAttribute("data-pretable-cell", "");
+    row.appendChild(cell);
+    document.body.appendChild(row);
+
+    // Same empty row, two themes. A single hard-coded floor cannot produce
+    // both of these numbers, which is the whole point.
+    expect(measureRenderedRowHeight(row, 20)).toBe(20);
+    expect(measureRenderedRowHeight(row, 56)).toBe(56);
+  });
+
+  test("content taller than the floor still wins", () => {
+    // The floor is a floor, not a height. Regressing it into an assignment
+    // would clip every wrapped row, and jsdom cannot see clipping — so assert
+    // it here, where scrollHeight is the one dimension jsdom does report.
+    const row = document.createElement("div");
+    const cell = document.createElement("div");
+    cell.setAttribute("data-pretable-cell", "");
+    Object.defineProperty(cell, "scrollHeight", { value: 90 });
+    row.appendChild(cell);
+    document.body.appendChild(row);
+
+    expect(measureRenderedRowHeight(row, 20)).toBe(90);
+  });
+
+  test("a surface renders its rows at the theme's row height", async () => {
+    setThemeRowHeight("20px");
+    const { container } = render(
+      <PretableSurface
+        ariaLabel="Excel-density grid"
+        columns={columns}
+        getRowId={(row) => row.id}
+        overscan={0}
+        rows={rows}
+        viewportHeight={200}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(renderedRowHeights(container).length).toBeGreaterThan(0);
+    });
+    expect(renderedRowHeights(container)).toEqual(
+      renderedRowHeights(container).map(() => 20),
+    );
+  });
+
+  test("with no theme, rows keep the historical 44px default", async () => {
+    // The fallback is unchanged on purpose: an app that never imports a theme
+    // file — and every jsdom test in this package — must render exactly as it
+    // did before. This is the check that keeps the change surgical.
+    const { container } = render(
+      <PretableSurface
+        ariaLabel="Unthemed grid"
+        columns={columns}
+        getRowId={(row) => row.id}
+        overscan={0}
+        rows={rows}
+        viewportHeight={200}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(renderedRowHeights(container).length).toBeGreaterThan(0);
+    });
+    expect(renderedRowHeights(container)).toEqual(
+      renderedRowHeights(container).map(() => 44),
+    );
+  });
+
+  test("rows nobody has measured yet are estimated at the theme's height", async () => {
+    // The floor governs rows the DOM has rendered. Everything below the
+    // viewport is a guess, and the guess has its own constant — renderer-dom's
+    // defaultRowHeight, also 44. Fixing only the floor would leave a themed
+    // grid estimating its scroll extent at one height and measuring at
+    // another: under Excel, a 500-row grid would claim 22000px of scroll for
+    // 10000px of rows, and the scrollbar would visibly shrink as you scrolled.
+    setThemeRowHeight("20px");
+    const many: readonly Row[] = Array.from({ length: 500 }, (_, i) => ({
+      id: i,
+      name: `row ${i}`,
+    }));
+    const { container } = render(
+      <PretableSurface
+        ariaLabel="Estimated grid"
+        columns={columns}
+        getRowId={(row) => row.id}
+        overscan={0}
+        rows={many}
+        viewportHeight={200}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(renderedRowHeights(container).length).toBeGreaterThan(0);
+    });
+    const content = container.querySelector<HTMLElement>(
+      "[data-pretable-scroll-content]",
+    );
+    expect(content).not.toBeNull();
+    expect(content!.style.height).toBe(`${500 * 20}px`);
+  });
+
+  test("a density flip re-measures rows that did not otherwise change", async () => {
+    // The subtle one. Rows are re-measured only when their measurement key
+    // changes, and that key is built from the row's own markup — class, style,
+    // state attributes, cell text. A density switch changes NONE of those in
+    // jsdom: same rows, same text, same classes. If the floor is not part of
+    // the key, every already-measured row keeps its old height and only rows
+    // scrolled into view afterwards pick up the new density.
+    setThemeRowHeight("20px");
+    const { container } = render(
+      <PretableSurface
+        ariaLabel="Density-switching grid"
+        columns={columns}
+        getRowId={(row) => row.id}
+        overscan={0}
+        rows={rows}
+        viewportHeight={200}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(renderedRowHeights(container)[0]).toBe(20);
+    });
+
+    await act(async () => {
+      setThemeRowHeight("56px");
+    });
+
+    await waitFor(() => {
+      expect(renderedRowHeights(container)).toEqual(
+        renderedRowHeights(container).map(() => 56),
+      );
+    });
+  });
+});
@@ -2,6 +2,8 @@ import { useCallback, useRef, useSyncExternalStore } from "react";
 
 import { type DensityHeights, getDensityHeights } from "@pretable/ui";
 
+import { DEFAULT_ROW_HEIGHT } from "./rendering";
+
 const FALLBACK_ROW_HEIGHT = 32;
 const FALLBACK_HEADER_HEIGHT = 36;
 
@@ -86,6 +88,23 @@ function noopSubscribe(): () => void {
   return () => {};
 }
 
+/**
+ * One-shot read of the active theme's row height, for the places that need it
+ * before there is a component to hook from — the row-layout controller is
+ * constructed once per row model and takes its estimate default up front.
+ *
+ * Falls back to {@link DEFAULT_ROW_HEIGHT}, matching the surface's measured
+ * floor, so the estimate for an unmeasured row and the floor for a measured
+ * one agree in every case including no-theme. They disagreed by construction
+ * before: both were 44, so a themed grid estimated its scroll extent at one
+ * height and measured rows at another.
+ *
+ * @internal
+ */
+export function getThemeRowHeight(): number {
+  return readPx("--pretable-row-height", DEFAULT_ROW_HEIGHT);
+}
+
 /**
  * Reactive resolved pixel value of one `--pretable-*` CSS variable on
  * `document.documentElement`, falling back when it is unset or is not a
 
@@ -27,6 +27,8 @@ import {
   useSyncExternalStore,
 } from "react";
 
+import { getThemeRowHeight } from "./density";
+
 /** Inclusive symbolic data-row span exposed by the indexed React grid. @public */
 export interface PretableReactRowRange<TRowId extends PretableRowId> {
   readonly startRowId: TRowId;
@@ -400,6 +402,9 @@ export function usePretableModelInternal<
     const controller = createRowLayoutController<TRow, TRowId, TColumns>({
       model: internalModel,
       columns: initialRenderColumns,
+      // Estimates for rows the DOM has not rendered yet. Same value the
+      // surface floors measured rows at, so the two agree under every theme.
+      defaultRowHeight: getThemeRowHeight(),
       deferActivation: true,
       eagerInitialRowLimit: 32,
       viewport: {