@pretable/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1421 @@
+'use strict';
+
+var react = require('react');
+var core = require('@pretable/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/pretable-surface.tsx
+
+// src/row-height.ts
+var MIN_ROW_HEIGHT = 44;
+function parsePxLength(value) {
+  if (!value) {
+    return 0;
+  }
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function measureRenderedRowHeight(row) {
+  const style = getComputedStyle(row);
+  const verticalPadding = parsePxLength(style.paddingTop) + parsePxLength(style.paddingBottom);
+  const borderHeight = parsePxLength(style.borderBottomWidth);
+  const wrappedCells = [
+    ...row.querySelectorAll(
+      '[data-pretable-cell][data-pretable-wrap="true"]'
+    )
+  ];
+  const measuredCells = wrappedCells.length > 0 ? wrappedCells : [...row.querySelectorAll("[data-pretable-cell]")];
+  const contentHeight = Math.max(
+    0,
+    ...measuredCells.map((cell) => cell.scrollHeight).filter(Number.isFinite)
+  );
+  return Math.max(
+    MIN_ROW_HEIGHT,
+    Math.ceil(contentHeight + verticalPadding + borderHeight)
+  );
+}
+
+// ../layout-core/dist/prefix-sums.js
+function createRowMetricsIndex(estimatedHeights) {
+  return new PrefixSumsRowMetricsIndex(estimatedHeights);
+}
+var PrefixSumsRowMetricsIndex = class {
+  rowCount;
+  #heights;
+  #starts;
+  #totalHeight;
+  constructor(estimatedHeights) {
+    this.rowCount = estimatedHeights.length;
+    this.#heights = estimatedHeights.map((height) => normalizeHeight(height));
+    this.#starts = [0];
+    for (const height of this.#heights) {
+      this.#starts.push((this.#starts.at(-1) ?? 0) + height);
+    }
+    this.#totalHeight = this.#starts.at(-1) ?? 0;
+  }
+  getHeight(index) {
+    return this.#heights[index] ?? 0;
+  }
+  getOffsetForIndex(index) {
+    if (index <= 0) {
+      return 0;
+    }
+    if (index >= this.rowCount) {
+      return this.#totalHeight;
+    }
+    return this.#starts[index] ?? this.#totalHeight;
+  }
+  getIndexForOffset(offset) {
+    if (this.rowCount === 0 || offset <= 0) {
+      return 0;
+    }
+    if (offset >= this.#totalHeight) {
+      return this.rowCount;
+    }
+    let low = 0;
+    let high = this.rowCount - 1;
+    while (low <= high) {
+      const middle = Math.floor((low + high) / 2);
+      const start = this.#starts[middle] ?? 0;
+      const end = this.#starts[middle + 1] ?? this.#totalHeight;
+      if (offset < start) {
+        high = middle - 1;
+        continue;
+      }
+      if (offset >= end) {
+        low = middle + 1;
+        continue;
+      }
+      return middle;
+    }
+    return Math.min(this.rowCount, low);
+  }
+  getTotalHeight() {
+    return this.#totalHeight;
+  }
+  updateHeight(index, height) {
+    const nextHeight = normalizeHeight(height);
+    const previousHeight = this.#heights[index];
+    if (previousHeight === void 0) {
+      throw new RangeError(`Row index ${index} is out of bounds.`);
+    }
+    const delta = nextHeight - previousHeight;
+    if (delta === 0) {
+      return;
+    }
+    this.#heights[index] = nextHeight;
+    for (let startIndex = index + 1; startIndex < this.#starts.length; startIndex += 1) {
+      this.#starts[startIndex] = (this.#starts[startIndex] ?? 0) + delta;
+    }
+    this.#totalHeight += delta;
+  }
+};
+function normalizeHeight(height) {
+  return Math.max(1, Math.round(height));
+}
+
+// ../layout-core/dist/column-plan.js
+function planColumns(input) {
+  const pinned = [];
+  const scrollable = [];
+  let pinnedLeftWidth = 0;
+  let scrollableLeft = 0;
+  for (let i = 0; i < input.columns.length; i++) {
+    const col = input.columns[i];
+    if (col.pinned === "left") {
+      pinned.push({
+        index: i,
+        id: col.id,
+        left: pinnedLeftWidth,
+        width: col.width,
+        pinned: "left"
+      });
+      pinnedLeftWidth += col.width;
+    } else {
+      scrollable.push({
+        index: i,
+        id: col.id,
+        width: col.width,
+        left: scrollableLeft
+      });
+      scrollableLeft += col.width;
+    }
+  }
+  const totalWidth = pinnedLeftWidth + scrollableLeft;
+  if (scrollable.length === 0) {
+    return { columns: pinned, totalWidth, pinnedLeftWidth };
+  }
+  let low = 0;
+  let high = scrollable.length - 1;
+  let visibleStart = scrollable.length;
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const colRight = scrollable[mid].left + scrollable[mid].width + pinnedLeftWidth;
+    if (colRight <= input.scrollLeft) {
+      low = mid + 1;
+    } else {
+      visibleStart = mid;
+      high = mid - 1;
+    }
+  }
+  let visibleEnd = visibleStart;
+  const scrollRight = input.scrollLeft + input.viewportWidth;
+  while (visibleEnd < scrollable.length) {
+    const colLeft = scrollable[visibleEnd].left + pinnedLeftWidth;
+    if (colLeft >= scrollRight) {
+      break;
+    }
+    visibleEnd++;
+  }
+  const overscanStart = Math.max(0, visibleStart - input.overscan);
+  const overscanEnd = Math.min(scrollable.length, visibleEnd + input.overscan);
+  const visibleScrollable = [];
+  for (let i = overscanStart; i < overscanEnd; i++) {
+    const col = scrollable[i];
+    visibleScrollable.push({
+      index: col.index,
+      id: col.id,
+      left: col.left + pinnedLeftWidth,
+      width: col.width
+    });
+  }
+  return {
+    columns: [...pinned, ...visibleScrollable],
+    totalWidth,
+    pinnedLeftWidth
+  };
+}
+
+// ../layout-core/dist/viewport-plan.js
+function planViewport(input) {
+  const totalHeight = input.rowMetrics.getTotalHeight();
+  const rowCount = input.rowMetrics.rowCount;
+  if (rowCount === 0) {
+    return {
+      range: { start: 0, end: 0 },
+      rows: [],
+      totalHeight,
+      pinned: {
+        left: planPinnedColumns(input.pinnedLeft ?? [], "left"),
+        right: planPinnedColumns(input.pinnedRight ?? [], "right")
+      }
+    };
+  }
+  const clampedScrollTop = Math.max(0, Math.min(input.scrollTop, Math.max(0, totalHeight - 1)));
+  const visibleStart = Math.min(rowCount - 1, input.rowMetrics.getIndexForOffset(clampedScrollTop));
+  const visibleEndExclusive = Math.min(rowCount, Math.max(visibleStart + 1, input.rowMetrics.getIndexForOffset(clampedScrollTop + Math.max(0, input.viewportHeight)) + 1));
+  const start = Math.max(0, visibleStart - Math.max(0, input.overscan));
+  const end = Math.min(rowCount, visibleEndExclusive + Math.max(0, input.overscan));
+  const rows = [];
+  for (let index = start; index < end; index += 1) {
+    rows.push({
+      index,
+      top: input.rowMetrics.getOffsetForIndex(index),
+      height: input.rowMetrics.getHeight(index)
+    });
+  }
+  return {
+    range: { start, end },
+    rows,
+    totalHeight,
+    pinned: {
+      left: planPinnedColumns(input.pinnedLeft ?? [], "left"),
+      right: planPinnedColumns(input.pinnedRight ?? [], "right")
+    }
+  };
+}
+function planPinnedColumns(columns, side) {
+  let offset = 0;
+  return columns.map((column) => {
+    const planned = {
+      ...column,
+      side,
+      start: offset,
+      end: offset + column.width
+    };
+    offset = planned.end;
+    return planned;
+  });
+}
+
+// ../text-core/dist/layout-text.js
+var DEFAULT_LINE_HEIGHT_PX = 20;
+function layoutPreparedText(prepared, width, options = {}) {
+  const wrapMode = options.wrapMode ?? "wrap";
+  const lineHeightPx = options.lineHeightPx ?? DEFAULT_LINE_HEIGHT_PX;
+  const paddingBlockPx = options.paddingBlockPx ?? 0;
+  const explicitLineCount = countExplicitLines(prepared.tokens);
+  if (wrapMode === "nowrap") {
+    return buildLayout({
+      lineCount: explicitLineCount,
+      lineHeightPx,
+      paddingBlockPx,
+      measuredWidth: prepared.graphemeCount * prepared.averageCharWidth,
+      overflowX: prepared.graphemeCount * prepared.averageCharWidth > width
+    });
+  }
+  const charsPerLine = Math.max(1, Math.floor(width / prepared.averageCharWidth));
+  const { lineCount, maxLineChars } = wrapTokens(prepared.tokens, charsPerLine);
+  return buildLayout({
+    lineCount,
+    lineHeightPx,
+    paddingBlockPx,
+    measuredWidth: Math.min(width, maxLineChars * prepared.averageCharWidth),
+    overflowX: false
+  });
+}
+function countExplicitLines(tokens) {
+  return tokens.reduce((count, token) => count + (token.kind === "newline" ? 1 : 0), 1);
+}
+function wrapTokens(tokens, charsPerLine) {
+  let lineCount = 1;
+  let currentLineChars = 0;
+  let maxLineChars = 0;
+  const pushLine = () => {
+    maxLineChars = Math.max(maxLineChars, currentLineChars);
+    lineCount += 1;
+    currentLineChars = 0;
+  };
+  for (const token of tokens) {
+    if (token.kind === "newline") {
+      maxLineChars = Math.max(maxLineChars, currentLineChars);
+      lineCount += 1;
+      currentLineChars = 0;
+      continue;
+    }
+    if (token.kind === "space") {
+      if (currentLineChars === 0) {
+        continue;
+      }
+      if (currentLineChars + token.length <= charsPerLine) {
+        currentLineChars += token.length;
+      } else {
+        pushLine();
+      }
+      continue;
+    }
+    placeWord(token.length);
+  }
+  maxLineChars = Math.max(maxLineChars, currentLineChars);
+  return { lineCount, maxLineChars };
+  function placeWord(wordLength) {
+    if (currentLineChars === 0) {
+      currentLineChars = placeAtLineStart(wordLength);
+      return;
+    }
+    if (currentLineChars + wordLength <= charsPerLine) {
+      currentLineChars += wordLength;
+      return;
+    }
+    pushLine();
+    currentLineChars = placeAtLineStart(wordLength);
+  }
+  function placeAtLineStart(wordLength) {
+    if (wordLength <= charsPerLine) {
+      return wordLength;
+    }
+    const wrappedLines = Math.ceil(wordLength / charsPerLine);
+    lineCount += wrappedLines - 1;
+    maxLineChars = Math.max(maxLineChars, charsPerLine);
+    return wordLength % charsPerLine || charsPerLine;
+  }
+}
+function buildLayout(input) {
+  return {
+    lineCount: input.lineCount,
+    height: input.lineCount * input.lineHeightPx + input.paddingBlockPx * 2,
+    measuredWidth: input.measuredWidth,
+    overflowX: input.overflowX
+  };
+}
+function prepareText(input) {
+  const text = input.text.replaceAll("\r\n", "\n");
+  const graphemes = Array.from(text);
+  return {
+    text,
+    fontKey: input.fontKey,
+    graphemeCount: graphemes.length,
+    breakpoints: collectBreakpoints(graphemes),
+    averageCharWidth: input.averageCharWidth,
+    tokens: tokenizeText(text)
+  };
+}
+function collectBreakpoints(graphemes) {
+  const breakpoints = [];
+  for (let index = 0; index < graphemes.length; index += 1) {
+    const value = graphemes[index];
+    if (value === void 0) {
+      continue;
+    }
+    if (/\s/u.test(value) || value === "-" || value === "/" || value === "_") {
+      breakpoints.push(index + 1);
+    }
+  }
+  return breakpoints;
+}
+function tokenizeText(text) {
+  const matches = text.match(/\n|[^\S\n]+|[^\s]+/gu) ?? [];
+  return matches.map((value) => {
+    if (value === "\n") {
+      return { kind: "newline", value, length: 0 };
+    }
+    if (/^[^\S\n]+$/u.test(value)) {
+      return { kind: "space", value, length: Array.from(value).length };
+    }
+    return { kind: "word", value, length: Array.from(value).length };
+  });
+}
+
+// ../renderer-dom/dist/create-renderer.js
+var DEFAULT_ROW_HEIGHT = 44;
+var WRAPPED_COLUMN_WIDTH = 220;
+var FIXED_COLUMN_WIDTH = 140;
+var ROW_LINE_HEIGHT = 24;
+var ROW_CHROME_HEIGHT = 42;
+var ESTIMATED_CHARACTER_WIDTH = 7;
+var ESTIMATE_FONT_KEY = "Pretable Estimate 14";
+var estimatedRowHeightCache = /* @__PURE__ */ new WeakMap();
+function createDomRenderSnapshot(input) {
+  const rowHeights = input.snapshot.visibleRows.map((entry) => {
+    const measuredHeight = input.measuredHeights?.[entry.id];
+    return measuredHeight ?? estimateRowHeight(entry.row, input.columns);
+  });
+  const rowMetrics = createRowMetricsIndex(rowHeights);
+  const viewportPlan = planViewport({
+    scrollTop: input.scrollTop,
+    viewportHeight: input.viewportHeight,
+    overscan: input.overscan,
+    rowMetrics,
+    pinnedLeft: input.columns.filter((column) => column.pinned === "left").map((column) => ({
+      columnId: column.id,
+      width: getColumnWidth(column)
+    }))
+  });
+  const rows = viewportPlan.rows.flatMap((plannedRow) => {
+    const entry = input.snapshot.visibleRows[plannedRow.index];
+    if (!entry) {
+      return [];
+    }
+    return [
+      {
+        id: entry.id,
+        row: entry.row,
+        rowIndex: plannedRow.index,
+        top: plannedRow.top,
+        height: plannedRow.height
+      }
+    ];
+  });
+  const columnInputs = input.columns.map((col) => ({
+    id: col.id,
+    width: getColumnWidth(col),
+    pinned: col.pinned
+  }));
+  const columnPlan = input.viewportWidth !== void 0 ? planColumns({
+    columns: columnInputs,
+    scrollLeft: input.scrollLeft ?? 0,
+    viewportWidth: input.viewportWidth,
+    overscan: input.overscan
+  }) : {
+    columns: (() => {
+      let left = 0;
+      return columnInputs.map((col, index) => {
+        const entry = {
+          index,
+          id: col.id,
+          left,
+          width: col.width,
+          pinned: col.pinned
+        };
+        left += col.width;
+        return entry;
+      });
+    })(),
+    totalWidth: columnInputs.reduce((sum, col) => sum + col.width, 0),
+    pinnedLeftWidth: columnInputs.filter((col) => col.pinned === "left").reduce((sum, col) => sum + col.width, 0)
+  };
+  return {
+    frame: {
+      snapshot: input.snapshot
+    },
+    rows,
+    columns: columnPlan.columns,
+    nodeCount: rows.length * columnPlan.columns.length,
+    totalHeight: viewportPlan.totalHeight,
+    totalWidth: columnPlan.totalWidth
+  };
+}
+function estimateRowHeight(row, columns) {
+  const cached = estimatedRowHeightCache.get(row);
+  if (cached && cached.columnsRef === columns) {
+    return cached.height;
+  }
+  const signature = getEstimatedRowHeightSignature(row, columns);
+  if (cached?.signature === signature) {
+    cached.columnsRef = columns;
+    return cached.height;
+  }
+  let estimatedHeight = DEFAULT_ROW_HEIGHT;
+  for (const column of columns) {
+    if (!column.wrap) {
+      continue;
+    }
+    const prepared = prepareText({
+      text: String(readCellValue(row, column)),
+      fontKey: ESTIMATE_FONT_KEY,
+      averageCharWidth: ESTIMATED_CHARACTER_WIDTH
+    });
+    const layout = layoutPreparedText(prepared, getColumnWidth(column), {
+      lineHeightPx: ROW_LINE_HEIGHT,
+      wrapMode: "wrap"
+    });
+    estimatedHeight = Math.max(estimatedHeight, layout.height + ROW_CHROME_HEIGHT);
+  }
+  estimatedRowHeightCache.set(row, {
+    signature,
+    height: estimatedHeight,
+    columnsRef: columns
+  });
+  return estimatedHeight;
+}
+function getEstimatedRowHeightSignature(row, columns) {
+  return columns.filter((column) => column.wrap).map((column) => {
+    const value = String(readCellValue(row, column) ?? "");
+    return `${column.id}:${getColumnWidth(column)}:${value}`;
+  }).join("|");
+}
+function readCellValue(row, column) {
+  return column.getValue ? column.getValue(row) : row[column.id];
+}
+function getColumnWidth(column) {
+  return column.widthPx ?? (column.wrap ? WRAPPED_COLUMN_WIDTH : FIXED_COLUMN_WIDTH);
+}
+function usePretable({
+  autosize,
+  columns,
+  rows,
+  getRowId
+}) {
+  return react.useMemo(
+    () => core.createGrid({ columns, rows, getRowId, autosize }),
+    [autosize, columns, getRowId, rows]
+  );
+}
+function usePretableModel({
+  autosize,
+  columns,
+  rows,
+  getRowId,
+  viewportHeight,
+  viewportWidth,
+  overscan = 6,
+  interactionOverrides,
+  measuredHeights
+}) {
+  const grid = usePretable({ autosize, columns, rows, getRowId });
+  if (interactionOverrides) {
+    grid.setSort(
+      interactionOverrides.sort?.columnId ?? null,
+      interactionOverrides.sort?.direction ?? null
+    );
+    grid.replaceFilters(interactionOverrides.filters ?? {});
+    if (interactionOverrides.focusedRowId !== void 0) {
+      const firstColumnId = columns[0]?.id ?? null;
+      grid.setFocus(
+        interactionOverrides.focusedRowId,
+        interactionOverrides.focusedRowId ? firstColumnId : null
+      );
+    }
+    if (interactionOverrides.selectedRowId !== void 0) {
+      grid.selectRow(interactionOverrides.selectedRowId);
+    }
+  }
+  const snapshot = react.useSyncExternalStore(
+    grid.subscribe,
+    grid.getSnapshot,
+    grid.getSnapshot
+  );
+  react.useLayoutEffect(() => {
+    if (snapshot.viewport.height === viewportHeight && snapshot.viewport.width === (viewportWidth ?? 0)) {
+      return;
+    }
+    grid.setViewport({
+      scrollTop: snapshot.viewport.scrollTop,
+      scrollLeft: snapshot.viewport.scrollLeft,
+      height: viewportHeight,
+      width: viewportWidth ?? 0
+    });
+  }, [
+    grid,
+    snapshot.viewport.height,
+    snapshot.viewport.width,
+    snapshot.viewport.scrollTop,
+    snapshot.viewport.scrollLeft,
+    viewportHeight,
+    viewportWidth
+  ]);
+  const renderSnapshot = react.useMemo(
+    () => createDomRenderSnapshot({
+      columns: grid.options.columns,
+      snapshot,
+      scrollTop: snapshot.viewport.scrollTop,
+      scrollLeft: snapshot.viewport.scrollLeft,
+      viewportHeight,
+      viewportWidth,
+      overscan,
+      measuredHeights
+    }),
+    [
+      grid.options.columns,
+      measuredHeights,
+      overscan,
+      snapshot,
+      viewportHeight,
+      viewportWidth
+    ]
+  );
+  const telemetry = react.useMemo(() => {
+    const viewportBottom = snapshot.viewport.scrollTop + Math.max(snapshot.viewport.height, viewportHeight);
+    const viewportRows = renderSnapshot.rows.filter((row) => {
+      const rowBottom = row.top + row.height;
+      return row.top < viewportBottom && rowBottom > snapshot.viewport.scrollTop;
+    });
+    const firstVisibleRow = viewportRows[0];
+    const lastVisibleRow = viewportRows[viewportRows.length - 1];
+    return {
+      focusedRowId: snapshot.focus.rowId,
+      rowModelRowCount: snapshot.visibleRows.length,
+      renderedRowCount: renderSnapshot.rows.length,
+      selectedRowId: snapshot.selection.rowIds[0] ?? null,
+      totalRowCount: snapshot.totalRowCount,
+      totalHeight: renderSnapshot.totalHeight,
+      visibleRowCount: viewportRows.length,
+      visibleRowRange: firstVisibleRow && lastVisibleRow ? {
+        start: firstVisibleRow.rowIndex,
+        end: lastVisibleRow.rowIndex + 1
+      } : {
+        start: 0,
+        end: 0
+      }
+    };
+  }, [
+    renderSnapshot.rows,
+    renderSnapshot.totalHeight,
+    snapshot.focus.rowId,
+    snapshot.visibleRows.length,
+    snapshot.selection.rowIds,
+    snapshot.totalRowCount,
+    snapshot.viewport.height,
+    snapshot.viewport.scrollTop,
+    viewportHeight
+  ]);
+  return {
+    grid,
+    snapshot,
+    renderSnapshot,
+    telemetry
+  };
+}
+
+// src/rendering.ts
+var DEFAULT_ROW_HEIGHT2 = 44;
+var DEFAULT_WRAPPED_COLUMN_WIDTH = 220;
+var DEFAULT_FIXED_COLUMN_WIDTH = 140;
+var HEADER_HEIGHT = 52;
+function getColumnWidth2(column) {
+  return column.widthPx ?? (column.wrap ? DEFAULT_WRAPPED_COLUMN_WIDTH : DEFAULT_FIXED_COLUMN_WIDTH);
+}
+function getPinnedLeftOffsets(columns) {
+  const offsets = {};
+  let left = 0;
+  for (const column of columns) {
+    if (column.pinned !== "left") {
+      continue;
+    }
+    offsets[column.id] = left;
+    left += getColumnWidth2(column);
+  }
+  return offsets;
+}
+function getNextSortDirection(current) {
+  if (current === null) {
+    return "desc";
+  }
+  if (current === "desc") {
+    return "asc";
+  }
+  return null;
+}
+function resolveCellValue(row, column) {
+  return column.getValue ? column.getValue(row) : row[column.id];
+}
+function formatCellValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+  return String(value ?? "");
+}
+
+// src/density.ts
+var FALLBACK_ROW_HEIGHT = 32;
+var FALLBACK_HEADER_HEIGHT = HEADER_HEIGHT;
+function parsePx(value) {
+  const match = value.trim().match(/^([\d.]+)px$/);
+  return match ? parseFloat(match[1]) : null;
+}
+function getDensityHeights() {
+  if (typeof document === "undefined") {
+    return {
+      rowHeight: FALLBACK_ROW_HEIGHT,
+      headerHeight: FALLBACK_HEADER_HEIGHT
+    };
+  }
+  const styles = getComputedStyle(document.documentElement);
+  const read = (name) => {
+    if (typeof styles?.getPropertyValue !== "function") return "";
+    return styles.getPropertyValue(name);
+  };
+  return {
+    rowHeight: parsePx(read("--pretable-row-height")) ?? FALLBACK_ROW_HEIGHT,
+    headerHeight: parsePx(read("--pretable-header-height")) ?? FALLBACK_HEADER_HEIGHT
+  };
+}
+function subscribe(callback) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(callback);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-density", "data-theme", "class", "style"]
+  });
+  return () => observer.disconnect();
+}
+function useResolvedHeights(rowHeightProp, headerHeightProp) {
+  const cachedClient = react.useRef(null);
+  const cachedServer = react.useRef(null);
+  const getSnapshot = react.useCallback(() => {
+    const css = getDensityHeights();
+    const rowHeight = rowHeightProp ?? css.rowHeight;
+    const headerHeight = headerHeightProp ?? css.headerHeight;
+    const prev = cachedClient.current;
+    if (prev !== null && prev.rowHeight === rowHeight && prev.headerHeight === headerHeight) {
+      return prev;
+    }
+    const next = { rowHeight, headerHeight };
+    cachedClient.current = next;
+    return next;
+  }, [rowHeightProp, headerHeightProp]);
+  const getServerSnapshot = react.useCallback(() => {
+    const rowHeight = rowHeightProp ?? FALLBACK_ROW_HEIGHT;
+    const headerHeight = headerHeightProp ?? FALLBACK_HEADER_HEIGHT;
+    const prev = cachedServer.current;
+    if (prev !== null && prev.rowHeight === rowHeight && prev.headerHeight === headerHeight) {
+      return prev;
+    }
+    const next = { rowHeight, headerHeight };
+    cachedServer.current = next;
+    return next;
+  }, [rowHeightProp, headerHeightProp]);
+  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/styles.ts
+function getViewportStyle(height) {
+  return {
+    contain: "content",
+    containIntrinsicSize: `auto ${height}px`,
+    contentVisibility: "auto",
+    height,
+    overflow: "auto",
+    overflowAnchor: "none",
+    overscrollBehavior: "contain",
+    position: "relative"
+  };
+}
+function getHeaderRowStyle(totalWidth, headerHeight = HEADER_HEIGHT) {
+  return {
+    display: "flex",
+    height: headerHeight,
+    insetInline: 0,
+    minWidth: totalWidth,
+    position: "sticky",
+    top: 0,
+    zIndex: 3
+  };
+}
+function getScrollContentStyle(totalHeight, totalWidth) {
+  return {
+    height: Math.max(totalHeight, 0),
+    minWidth: totalWidth,
+    position: "relative"
+  };
+}
+function getRowStyle(top, height) {
+  return {
+    boxSizing: "border-box",
+    display: "flex",
+    height,
+    insetInline: 0,
+    position: "absolute",
+    top
+  };
+}
+function getCellStyle(left, width) {
+  return {
+    boxSizing: "border-box",
+    height: "100%",
+    left,
+    position: "absolute",
+    top: 0,
+    width
+  };
+}
+function getHeaderCellStyle(left, width) {
+  return {
+    boxSizing: "border-box",
+    height: "100%",
+    left,
+    position: "absolute",
+    top: 0,
+    width
+  };
+}
+function getPinnedCellStyle(left) {
+  return {
+    left,
+    position: "sticky",
+    top: 0,
+    zIndex: 1
+  };
+}
+function PretableSurface({
+  ariaLabel,
+  autosize,
+  columns,
+  getBodyCellClassName,
+  getBodyCellProps,
+  getHeaderCellClassName,
+  getHeaderCellProps,
+  getRowClassName,
+  getRowId,
+  getRowProps,
+  interactionState,
+  overscan = 6,
+  onGridReady,
+  onSelectedRowIdChange,
+  onSortChange,
+  onTelemetryChange,
+  renderBodyCell,
+  renderHeaderCell,
+  rows,
+  selectFocusedRowOnArrowKey = false,
+  viewportStyle,
+  viewportHeight
+}) {
+  const [measuredHeights, setMeasuredHeights] = react.useState({});
+  const [viewportWidth, setViewportWidth] = react.useState(0);
+  const measuredHeightsRef = react.useRef({});
+  const measuredRowKeysRef = react.useRef({});
+  const rowNodesRef = react.useRef(/* @__PURE__ */ new Map());
+  const viewportRef = react.useRef(null);
+  const { headerHeight } = useResolvedHeights();
+  const bodyViewportHeight = Math.max(viewportHeight - headerHeight, 0);
+  const { grid, snapshot, renderSnapshot, telemetry } = usePretableModel({
+    autosize,
+    columns,
+    getRowId,
+    interactionOverrides: interactionState ?? void 0,
+    measuredHeights,
+    overscan,
+    rows,
+    viewportHeight: bodyViewportHeight,
+    viewportWidth: viewportWidth || void 0
+  });
+  const pinnedOffsets = react.useMemo(() => getPinnedLeftOffsets(columns), [columns]);
+  react.useLayoutEffect(() => {
+    const el = viewportRef.current;
+    if (el && viewportWidth === 0) {
+      setViewportWidth(el.clientWidth);
+    }
+  });
+  react.useLayoutEffect(() => {
+    onTelemetryChange?.(telemetry);
+  }, [onTelemetryChange, telemetry]);
+  react.useLayoutEffect(() => {
+    onGridReady?.(grid);
+  }, [grid, onGridReady]);
+  react.useLayoutEffect(() => {
+    if (!interactionState?.selectedRowId) {
+      return;
+    }
+    const currentSelectedRowId = snapshot.selection.rowIds[0] ?? null;
+    if (currentSelectedRowId !== interactionState.selectedRowId) {
+      onSelectedRowIdChange?.(interactionState.selectedRowId);
+    }
+  }, [interactionState, onSelectedRowIdChange, snapshot.selection.rowIds]);
+  react.useLayoutEffect(() => {
+    let nextHeights = measuredHeightsRef.current;
+    let nextKeys = measuredRowKeysRef.current;
+    let changed = false;
+    for (const [rowId, node] of rowNodesRef.current) {
+      const plannedHeight = Number(node.getAttribute("data-row-height"));
+      const cachedHeight = nextHeights[rowId];
+      const currentRowKey = getRowMeasurementKey(node);
+      const cachedRowKey = nextKeys[rowId];
+      if (Number.isFinite(plannedHeight) && cachedHeight !== void 0 && cachedHeight === plannedHeight && cachedRowKey === currentRowKey) {
+        continue;
+      }
+      const measuredHeight = measureRenderedRowHeight(node);
+      if (measuredHeight <= DEFAULT_ROW_HEIGHT2) {
+        if (cachedHeight !== void 0 && cachedRowKey !== currentRowKey) {
+          const restHeights = { ...nextHeights };
+          delete restHeights[rowId];
+          const restKeys = { ...nextKeys };
+          delete restKeys[rowId];
+          nextHeights = restHeights;
+          nextKeys = restKeys;
+          changed = true;
+        }
+        continue;
+      }
+      if (nextHeights[rowId] === measuredHeight) {
+        if (cachedRowKey !== currentRowKey) {
+          nextKeys = { ...nextKeys, [rowId]: currentRowKey };
+        }
+        continue;
+      }
+      nextHeights = { ...nextHeights, [rowId]: measuredHeight };
+      nextKeys = { ...nextKeys, [rowId]: currentRowKey };
+      changed = true;
+    }
+    measuredHeightsRef.current = nextHeights;
+    measuredRowKeysRef.current = nextKeys;
+    if (changed) {
+      setMeasuredHeights(nextHeights);
+    }
+  }, [snapshot.visibleRows, columns, viewportWidth]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "data-pretable-scroll-viewport": "",
+      ref: viewportRef,
+      role: "grid",
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          grid.moveFocus(event.key === "ArrowDown" ? 1 : -1);
+          const nextFocus = grid.getSnapshot().focus;
+          if (nextFocus.rowId && nextFocus.columnId === null && columns[0]) {
+            grid.setFocus(nextFocus.rowId, columns[0].id);
+          }
+          if (selectFocusedRowOnArrowKey && nextFocus.rowId) {
+            grid.selectRow(nextFocus.rowId);
+            onSelectedRowIdChange?.(nextFocus.rowId);
+          }
+          event.preventDefault();
+          return;
+        }
+        if (event.key === "Enter" || event.key === " " || event.key === "Space") {
+          const focusedRowId = grid.getSnapshot().focus.rowId;
+          if (focusedRowId) {
+            grid.selectRow(focusedRowId);
+            onSelectedRowIdChange?.(focusedRowId);
+            event.preventDefault();
+          }
+        }
+      },
+      onScroll: (event) => {
+        const el = event.currentTarget;
+        grid.setViewport({
+          scrollTop: el.scrollTop,
+          scrollLeft: el.scrollLeft,
+          height: bodyViewportHeight,
+          width: el.clientWidth
+        });
+        if (el.clientWidth !== viewportWidth) {
+          setViewportWidth(el.clientWidth);
+        }
+      },
+      style: {
+        ...getViewportStyle(viewportHeight),
+        ...viewportStyle
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-pretable-header-row": "",
+            style: getHeaderRowStyle(renderSnapshot.totalWidth, headerHeight),
+            children: renderSnapshot.columns.map((plannedCol) => {
+              const column = columns[plannedCol.index];
+              if (!column) {
+                return null;
+              }
+              const label = column.header ?? column.id;
+              const sortDirection = snapshot.sort.columnId === column.id ? snapshot.sort.direction : null;
+              const headerProps = getHeaderCellProps?.({
+                column,
+                sortDirection
+              }) ?? {};
+              const pinnedOffset = pinnedOffsets[column.id];
+              const positionStyle = plannedCol.pinned === "left" && pinnedOffset !== void 0 ? {
+                ...getHeaderCellStyle(plannedCol.left, plannedCol.width),
+                ...getPinnedCellStyle(pinnedOffset)
+              } : getHeaderCellStyle(plannedCol.left, plannedCol.width);
+              return /* @__PURE__ */ react.createElement(
+                "button",
+                {
+                  ...headerProps,
+                  "aria-label": `Sort ${label}`,
+                  className: getHeaderCellClassName?.({
+                    column,
+                    sortDirection
+                  }),
+                  "data-pretable-header-cell": "",
+                  "data-pinned": plannedCol.pinned === "left" ? "left" : void 0,
+                  key: column.id,
+                  onClick: () => {
+                    const nextDirection = getNextSortDirection(sortDirection);
+                    grid.setSort(column.id, nextDirection);
+                    if (nextDirection) {
+                      onSortChange?.({
+                        columnId: column.id,
+                        direction: nextDirection
+                      });
+                    } else {
+                      onSortChange?.(null);
+                    }
+                  },
+                  style: {
+                    alignItems: "start",
+                    border: 0,
+                    borderRight: "1px solid rgba(255, 255, 255, 0.06)",
+                    color: "inherit",
+                    display: "grid",
+                    gap: 4,
+                    textAlign: "left",
+                    ...positionStyle
+                  },
+                  type: "button"
+                },
+                renderHeaderCell ? renderHeaderCell({
+                  column,
+                  label,
+                  sortDirection
+                }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: sortDirection === "desc" ? "Newest" : sortDirection === "asc" ? "Oldest" : "Sort" })
+                ] })
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-pretable-scroll-content": "",
+            style: getScrollContentStyle(
+              renderSnapshot.totalHeight,
+              renderSnapshot.totalWidth
+            ),
+            children: renderSnapshot.rows.map(({ height, id, row, rowIndex, top }) => {
+              const isFocused = snapshot.focus.rowId === id;
+              const isSelected = snapshot.selection.rowIds.includes(id);
+              const rowProps = getRowProps?.({
+                isFocused,
+                isSelected,
+                row,
+                rowId: id,
+                rowIndex
+              }) ?? {};
+              return /* @__PURE__ */ react.createElement(
+                "div",
+                {
+                  ...rowProps,
+                  "aria-rowindex": rowIndex + 1,
+                  "aria-selected": isSelected,
+                  className: getRowClassName?.({
+                    isFocused,
+                    isSelected,
+                    row,
+                    rowId: id,
+                    rowIndex
+                  }),
+                  "data-focused": isFocused ? "true" : "false",
+                  "data-pretable-row": "",
+                  "data-row-height": height,
+                  "data-row-id": id,
+                  "data-row-index": rowIndex,
+                  "data-selected": isSelected ? "true" : "false",
+                  "data-testid": "pretable-row",
+                  key: id,
+                  onClick: () => {
+                    grid.setFocus(id, columns[0]?.id ?? null);
+                    grid.selectRow(id);
+                    onSelectedRowIdChange?.(id);
+                  },
+                  ref: (node) => {
+                    if (node) {
+                      rowNodesRef.current.set(id, node);
+                    } else {
+                      rowNodesRef.current.delete(id);
+                    }
+                  },
+                  style: getRowStyle(top, height)
+                },
+                renderSnapshot.columns.map((plannedCol) => {
+                  const column = columns[plannedCol.index];
+                  if (!column) {
+                    return null;
+                  }
+                  const value = resolveCellValue(row, column);
+                  const bodyInput = {
+                    column,
+                    isFocused,
+                    isSelected,
+                    row,
+                    rowId: id,
+                    rowIndex,
+                    value
+                  };
+                  const bodyProps = getBodyCellProps?.(bodyInput) ?? {};
+                  const pinnedOffset = pinnedOffsets[column.id];
+                  const positionStyle = plannedCol.pinned === "left" && pinnedOffset !== void 0 ? {
+                    ...getCellStyle(plannedCol.left, plannedCol.width),
+                    ...getPinnedCellStyle(pinnedOffset)
+                  } : getCellStyle(plannedCol.left, plannedCol.width);
+                  return /* @__PURE__ */ react.createElement(
+                    "div",
+                    {
+                      ...bodyProps,
+                      className: getBodyCellClassName?.(bodyInput),
+                      "data-column-id": column.id,
+                      "data-focused": isFocused ? "true" : "false",
+                      "data-pinned": column.pinned === "left" ? "left" : void 0,
+                      "data-pretable-cell": "",
+                      "data-pretable-wrap": column.wrap ? "true" : void 0,
+                      "data-selected": isSelected ? "true" : "false",
+                      key: `${id}:${column.id}`,
+                      style: {
+                        overflowWrap: column.wrap ? "anywhere" : "normal",
+                        whiteSpace: column.wrap ? "pre-wrap" : "nowrap",
+                        ...positionStyle
+                      }
+                    },
+                    renderBodyCell ? renderBodyCell(bodyInput) : formatCellValue(value)
+                  );
+                })
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function getRowMeasurementKey(rowNode) {
+  const rowParts = [
+    rowNode.getAttribute("class") ?? "",
+    normalizeStyleSignature(rowNode.getAttribute("style") ?? ""),
+    rowNode.getAttribute("aria-selected") ?? "",
+    rowNode.getAttribute("data-focused") ?? "",
+    rowNode.getAttribute("data-selected") ?? ""
+  ];
+  const cellParts = [
+    ...rowNode.querySelectorAll("[data-pretable-cell]")
+  ].map(
+    (cell) => [
+      cell.getAttribute("data-column-id") ?? "",
+      cell.getAttribute("class") ?? "",
+      cell.getAttribute("style") ?? "",
+      cell.getAttribute("data-pretable-wrap") ?? "",
+      cell.getAttribute("data-focused") ?? "",
+      cell.getAttribute("data-selected") ?? "",
+      cell.textContent ?? ""
+    ].join(":")
+  );
+  return [...rowParts, ...cellParts].join("|");
+}
+function normalizeStyleSignature(styleValue) {
+  return styleValue.split(";").map((declaration) => declaration.trim()).filter(Boolean).filter((declaration) => !/^top\s*:/i.test(declaration)).join(";");
+}
+var VIEWPORT_HEIGHT = 320;
+var BENCHMARK_VIEWPORT_STYLE = {
+  contain: "none",
+  containIntrinsicSize: "none",
+  contentVisibility: "visible",
+  overflowAnchor: "none",
+  overscrollBehavior: "contain"
+};
+function Pretable({
+  columns,
+  getRowId,
+  rows
+}) {
+  const resolvedGetRowId = getRowId ?? ((row, index) => {
+    const candidate = row.id;
+    if (typeof candidate === "string" || typeof candidate === "number") {
+      return String(candidate);
+    }
+    return String(index);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-label": "Pretable React adapter",
+      style: {
+        display: "grid",
+        gap: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              style: {
+                margin: 0,
+                fontWeight: 700
+              },
+              children: "Pretable React adapter"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: "4px 0 0", opacity: 0.8 }, children: [
+            "Rows: ",
+            rows.length
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: "4px 0 0", opacity: 0.8 }, children: [
+            "Columns: ",
+            columns.length
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PretableSurface,
+          {
+            ariaLabel: "Pretable React adapter",
+            columns,
+            getRowId: resolvedGetRowId,
+            renderBodyCell: ({ column, value }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "strong",
+                {
+                  style: {
+                    display: "block",
+                    fontSize: 12,
+                    lineHeight: "16px",
+                    marginBottom: 4,
+                    opacity: 0.7
+                  },
+                  children: column.header ?? column.id
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    display: "block",
+                    lineHeight: "22px"
+                  },
+                  children: String(value ?? "")
+                }
+              )
+            ] }),
+            renderHeaderCell: ({ label, sortDirection }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "strong",
+                {
+                  style: {
+                    fontSize: 12,
+                    lineHeight: "16px",
+                    opacity: 0.7
+                  },
+                  children: sortDirection === "desc" ? "Newest" : sortDirection === "asc" ? "Oldest" : "Sort"
+                }
+              )
+            ] }),
+            rows,
+            viewportStyle: BENCHMARK_VIEWPORT_STYLE,
+            viewportHeight: VIEWPORT_HEIGHT
+          }
+        )
+      ]
+    }
+  );
+}
+
+// ../scenario-data/dist/inspection-profile.js
+var inspectionColumns = [
+  { id: "timestamp", header: "Timestamp", pinned: "left", widthPx: 188 },
+  { id: "severity", header: "Severity", pinned: "left", widthPx: 112 },
+  { id: "source", header: "Source", widthPx: 160 },
+  { id: "owner", header: "Owner", widthPx: 144 },
+  {
+    id: "tags",
+    header: "Tags",
+    widthPx: 200,
+    getValue: (row) => row.tags.join(", ")
+  },
+  { id: "message", header: "Message", wrap: true, widthPx: 480 }
+];
+function LabeledGridSurface({
+  ariaLabel,
+  bodyCellClassName,
+  columns,
+  formatValue,
+  getBodyCellProps,
+  getHeaderCellProps,
+  getRowId,
+  headerCellClassName,
+  interactionState,
+  labelClassName,
+  overscan,
+  onSelectedRowIdChange,
+  onSortChange,
+  onTelemetryChange,
+  pinnedClassName,
+  rowClassName,
+  rows,
+  selectFocusedRowOnArrowKey,
+  valueClassName,
+  viewportHeight
+}) {
+  const getPinnedClassName = (column) => column.pinned === "left" && pinnedClassName ? pinnedClassName : void 0;
+  const activeFilterColumns = new Set(
+    Object.entries(interactionState?.filters ?? {}).filter(([, value]) => value.trim() !== "").map(([columnId]) => columnId)
+  );
+  const getFormattedValue = ({
+    column,
+    row,
+    value
+  }) => formatValue ? formatValue({ column, row, value }) : formatDefaultValue(value);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PretableSurface,
+    {
+      ariaLabel,
+      columns,
+      getBodyCellClassName: ({ column }) => joinClassNames(bodyCellClassName, getPinnedClassName(column)),
+      getBodyCellProps: (input) => mergeProps(
+        input.column.pinned === "left" ? {
+          "data-pinned": "left"
+        } : void 0,
+        getBodyCellProps?.(input)
+      ),
+      getHeaderCellClassName: ({ column }) => joinClassNames(
+        headerCellClassName,
+        getPinnedClassName(column),
+        activeFilterColumns.has(column.id) ? "is-filtered" : void 0
+      ),
+      getHeaderCellProps: (input) => mergeProps(
+        input.column.pinned === "left" ? {
+          "data-pinned": "left"
+        } : void 0,
+        getHeaderCellProps?.(input)
+      ),
+      getRowClassName: () => rowClassName,
+      getRowId,
+      interactionState,
+      overscan,
+      onSelectedRowIdChange,
+      onSortChange,
+      onTelemetryChange,
+      renderBodyCell: ({ column, row, value }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClassName, children: column.header ?? column.id }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClassName, children: getFormattedValue({
+          column,
+          row,
+          value
+        }) })
+      ] }),
+      renderHeaderCell: ({ label, sortDirection }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        sortDirection ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sort-indicator", children: sortDirection === "desc" ? "\u25BC" : "\u25B2" }) : null
+      ] }),
+      rows,
+      selectFocusedRowOnArrowKey,
+      viewportHeight
+    }
+  );
+}
+function joinClassNames(...values) {
+  return values.filter(Boolean).join(" ") || void 0;
+}
+function mergeProps(base, extra) {
+  if (!base) {
+    return extra;
+  }
+  if (!extra) {
+    return base;
+  }
+  return {
+    ...base,
+    ...extra
+  };
+}
+function formatDefaultValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+  return String(value ?? "");
+}
+var inspectionGridColumns = [...inspectionColumns];
+var getInspectionRowId = (row) => row.id;
+var filterableBodyProps = {
+  "data-filterable": "true"
+};
+var filterableHeaderProps = {
+  "data-filterable": "true"
+};
+function InspectionGrid({
+  ariaLabel,
+  filterableColumnIds,
+  interactionState,
+  onSelectedRowIdChange,
+  onSortChange,
+  onTelemetryChange,
+  overscan,
+  rows,
+  viewportHeight
+}) {
+  const filterableColumns = new Set(filterableColumnIds);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LabeledGridSurface,
+    {
+      ariaLabel,
+      bodyCellClassName: "inspection-cell",
+      columns: inspectionGridColumns,
+      formatValue: ({ value }) => formatInspectionValue(value),
+      getBodyCellProps: ({ column }) => filterableColumns.has(column.id) ? filterableBodyProps : void 0,
+      getHeaderCellProps: ({ column }) => filterableColumns.has(column.id) ? filterableHeaderProps : void 0,
+      getRowId: getInspectionRowId,
+      headerCellClassName: "inspection-header-cell",
+      interactionState,
+      labelClassName: "inspection-cell-label",
+      overscan,
+      onSelectedRowIdChange,
+      onSortChange,
+      onTelemetryChange,
+      pinnedClassName: "is-pinned",
+      rowClassName: "inspection-row",
+      rows,
+      selectFocusedRowOnArrowKey: true,
+      valueClassName: "inspection-cell-value",
+      viewportHeight
+    }
+  );
+}
+function formatInspectionValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+  return String(value ?? "");
+}
+
+exports.InspectionGrid = InspectionGrid;
+exports.LabeledGridSurface = LabeledGridSurface;
+exports.Pretable = Pretable;
+exports.PretableSurface = PretableSurface;
+exports.measureRenderedRowHeight = measureRenderedRowHeight;
+exports.usePretable = usePretable;
+exports.usePretableModel = usePretableModel;
+exports.useResolvedHeights = useResolvedHeights;