@pretable/react 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var core = require('@pretable/core');
+var ui = require('@pretable/ui');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/pretable-surface.tsx
@@ -485,23 +486,12 @@ function getEstimatedRowHeightSignature(row, columns) {
   }).join("|");
 }
 function readCellValue(row, column) {
-  return column.getValue ? column.getValue(row) : row[column.id];
+  return column.value ? column.value(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,
@@ -509,25 +499,79 @@ function usePretableModel({
   viewportHeight,
   viewportWidth,
   overscan = 6,
-  interactionOverrides,
-  measuredHeights
+  state,
+  measuredHeights,
+  onSelectionChange,
+  onFocusChange
 }) {
-  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
-      );
+  const grid = react.useMemo(
+    () => core.createGrid({ columns, rows, getRowId, autosize }),
+    [autosize, columns, getRowId, rows]
+  );
+  const lastColumnIdsRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    const currentIds = columns.map((c) => c.id);
+    const prevIds = lastColumnIdsRef.current;
+    if (prevIds === null || prevIds.length !== currentIds.length || prevIds.some((id, i) => id !== currentIds[i])) {
+      if (prevIds !== null) {
+        grid.mergeColumnsFromProps(columns);
+      }
+      lastColumnIdsRef.current = currentIds;
     }
-    if (interactionOverrides.selectedRowId !== void 0) {
-      grid.selectRow(interactionOverrides.selectedRowId);
+  }, [columns, grid]);
+  if (state) {
+    if (state.sort !== void 0) {
+      grid.setSort(state.sort?.columnId ?? null, state.sort?.direction ?? null);
+    }
+    if (state.filters !== void 0) {
+      grid.replaceFilters(state.filters);
+    }
+    if (state.columnWidths !== void 0) {
+      const widths = state.columnWidths;
+      for (const column of grid.options.columns) {
+        const next = widths[column.id];
+        if (next !== void 0 && next !== column.widthPx) {
+          grid.setColumnWidth(column.id, next);
+        }
+      }
+    }
+    if (state.columnOrder !== void 0) {
+      const targetOrder = state.columnOrder;
+      const currentIds = grid.options.columns.map((c) => c.id);
+      const targetIds = [
+        ...targetOrder.filter((id) => currentIds.includes(id)),
+        ...currentIds.filter((id) => !targetOrder.includes(id))
+      ];
+      for (let i = 0; i < targetIds.length; i += 1) {
+        const id = targetIds[i];
+        const currentIdx = grid.options.columns.findIndex((c) => c.id === id);
+        if (currentIdx !== i && id !== "__pretable_row_select__") {
+          grid.moveColumn(id, i);
+        }
+      }
+    }
+    if (state.columnPinned !== void 0) {
+      const pinned = state.columnPinned;
+      for (const [id, value] of Object.entries(pinned)) {
+        const column = grid.options.columns.find((c) => c.id === id);
+        if (!column) continue;
+        const targetPinned = value === "left" ? "left" : null;
+        const currentPinned = column.pinned ?? null;
+        if (currentPinned !== targetPinned) {
+          grid.setColumnPinned(id, targetPinned);
+        }
+      }
+    }
+    if (state.selection !== void 0) {
+      grid.setSelection(state.selection);
+    }
+    if (state.focus !== void 0) {
+      const focus = state.focus;
+      if (focus.rowId !== null && focus.columnId !== null) {
+        grid.setFocus({ rowId: focus.rowId, columnId: focus.columnId });
+      } else {
+        grid.setFocus(null);
+      }
     }
   }
   const snapshot = react.useSyncExternalStore(
@@ -586,7 +630,7 @@ function usePretableModel({
       focusedRowId: snapshot.focus.rowId,
       rowModelRowCount: snapshot.visibleRows.length,
       renderedRowCount: renderSnapshot.rows.length,
-      selectedRowId: snapshot.selection.rowIds[0] ?? null,
+      selectedRowId: snapshot.selection.ranges[0]?.startRowId ?? null,
       totalRowCount: snapshot.totalRowCount,
       totalHeight: renderSnapshot.totalHeight,
       visibleRowCount: viewportRows.length,
@@ -603,7 +647,7 @@ function usePretableModel({
     renderSnapshot.totalHeight,
     snapshot.focus.rowId,
     snapshot.visibleRows.length,
-    snapshot.selection.rowIds,
+    snapshot.selection.ranges,
     snapshot.totalRowCount,
     snapshot.viewport.height,
     snapshot.viewport.scrollTop,
@@ -616,6 +660,45 @@ function usePretableModel({
     telemetry
   };
 }
+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 = ui.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 css = ui.getDensityHeights();
+    const rowHeight = rowHeightProp ?? css.rowHeight;
+    const headerHeight = headerHeightProp ?? css.headerHeight;
+    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/rendering.ts
 var DEFAULT_ROW_HEIGHT2 = 44;
@@ -647,7 +730,7 @@ function getNextSortDirection(current) {
   return null;
 }
 function resolveCellValue(row, column) {
-  return column.getValue ? column.getValue(row) : row[column.id];
+  return column.value ? column.value(row) : row[column.id];
 }
 function formatCellValue(value) {
   if (Array.isArray(value)) {
@@ -656,69 +739,6 @@ function formatCellValue(value) {
   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 {
@@ -788,6 +808,162 @@ function getPinnedCellStyle(left) {
     zIndex: 1
   };
 }
+
+// src/constants.ts
+var ROW_SELECT_COLUMN_ID = "__pretable_row_select__";
+
+// src/copy.ts
+function defaultCoerceForCopy(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return value.toISOString();
+  const t = typeof value;
+  if (t === "string" || t === "number" || t === "boolean" || t === "bigint") {
+    return String(value);
+  }
+  if (t === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function serializeRangesAsTsv(args) {
+  const dataColumns = args.columns.filter((c) => c.id !== ROW_SELECT_COLUMN_ID);
+  if (dataColumns.length === 0) return null;
+  const colIndex = /* @__PURE__ */ new Map();
+  dataColumns.forEach((c, i) => colIndex.set(c.id, i));
+  const rowIndex = /* @__PURE__ */ new Map();
+  args.visibleRows.forEach((r, i) => rowIndex.set(r.id, i));
+  const blocks = [];
+  for (const range of args.ranges) {
+    const startRow = rowIndex.get(range.startRowId);
+    const endRow = rowIndex.get(range.endRowId);
+    const startIsSynth = range.startColumnId === ROW_SELECT_COLUMN_ID;
+    const endIsSynth = range.endColumnId === ROW_SELECT_COLUMN_ID;
+    const startCol = colIndex.get(range.startColumnId);
+    const endCol = colIndex.get(range.endColumnId);
+    const haveRows = startRow !== void 0 && endRow !== void 0;
+    const rowLo = haveRows ? Math.min(startRow, endRow) : -1;
+    const rowHi = haveRows ? Math.max(startRow, endRow) : -1;
+    let colLo;
+    let colHi;
+    if (startIsSynth && endIsSynth) {
+      continue;
+    } else if (startIsSynth && endCol !== void 0) {
+      colLo = 0;
+      colHi = endCol;
+    } else if (endIsSynth && startCol !== void 0) {
+      colLo = startCol;
+      colHi = 0;
+    } else if (startCol !== void 0 && endCol !== void 0) {
+      colLo = Math.min(startCol, endCol);
+      colHi = Math.max(startCol, endCol);
+    } else if (startCol !== void 0) {
+      colLo = colHi = startCol;
+    } else if (endCol !== void 0) {
+      colLo = colHi = endCol;
+    } else {
+      continue;
+    }
+    if (colLo > colHi) {
+      [colLo, colHi] = [colHi, colLo];
+    }
+    colLo = Math.max(colLo, 0);
+    colHi = Math.min(colHi, dataColumns.length - 1);
+    if (colLo > colHi) continue;
+    if (!haveRows || rowLo > rowHi) continue;
+    const lines = [];
+    if (args.copyWithHeaders) {
+      const headerCells = [];
+      for (let c = colLo; c <= colHi; c += 1) {
+        const col = dataColumns[c];
+        headerCells.push(col.header ?? col.id);
+      }
+      lines.push(headerCells.join("	"));
+      lines.push("");
+    }
+    for (let r = rowLo; r <= rowHi; r += 1) {
+      const row = args.visibleRows[r];
+      const cells = [];
+      for (let c = colLo; c <= colHi; c += 1) {
+        const col = dataColumns[c];
+        const raw = col.value ? col.value(row.row) : row.row[col.id];
+        const text = col.format ? col.format({ value: raw, row: row.row, column: col }) : defaultCoerceForCopy(raw);
+        cells.push(text);
+      }
+      lines.push(cells.join("	"));
+    }
+    blocks.push(lines.join("\n"));
+  }
+  if (blocks.length === 0) return null;
+  return { text: blocks.join("\n\n") };
+}
+async function defaultCopyToClipboard(payload) {
+  if (typeof navigator === "undefined" || !navigator.clipboard) return;
+  if (payload.html && typeof globalThis.ClipboardItem !== "undefined" && typeof navigator.clipboard.write === "function") {
+    await navigator.clipboard.write([
+      new globalThis.ClipboardItem({
+        "text/plain": new Blob([payload.text], { type: "text/plain" }),
+        "text/html": new Blob([payload.html], { type: "text/html" })
+      })
+    ]);
+  } else {
+    await navigator.clipboard.writeText(payload.text);
+  }
+}
+var defaultMessages = {
+  selectAllAnnouncement: ({ rowCount, columnCount, isAll }) => isAll ? "All rows selected" : `${rowCount} rows \xD7 ${columnCount} columns selected`,
+  copyAnnouncement: ({ rowCount, columnCount }) => `${rowCount} rows \xD7 ${columnCount} columns copied`,
+  copyFailedAnnouncement: () => "Copy failed"
+};
+var ANNOUNCE_DEBOUNCE_MS = 500;
+var REORDER_THRESHOLD_PX = 5;
+function CellContentImpl({
+  formattedValue,
+  renderRef,
+  fallbackRenderRef,
+  cellRenderInput
+}) {
+  if (renderRef) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderRef(cellRenderInput) });
+  }
+  if (fallbackRenderRef) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallbackRenderRef(cellRenderInput) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formattedValue });
+}
+function cellContentPropsEqual(prev, next) {
+  return prev.rowId === next.rowId && prev.columnId === next.columnId && prev.value === next.value && prev.formattedValue === next.formattedValue && prev.isFocused === next.isFocused && prev.isSelected === next.isSelected && prev.renderRef === next.renderRef && prev.fallbackRenderRef === next.fallbackRenderRef;
+}
+var MemoizedCellContent = react.memo(CellContentImpl, cellContentPropsEqual);
+function HeaderContentImpl({
+  label,
+  sortDirection,
+  renderHeaderRef,
+  fallbackRenderHeaderRef,
+  headerRenderInput
+}) {
+  if (renderHeaderRef) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderHeaderRef(headerRenderInput) });
+  }
+  if (fallbackRenderHeaderRef) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallbackRenderHeaderRef({
+      column: headerRenderInput.column,
+      label,
+      sortDirection
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: sortDirection === "desc" ? "Newest" : sortDirection === "asc" ? "Oldest" : "Sort" })
+  ] });
+}
+function headerContentPropsEqual(prev, next) {
+  return prev.columnId === next.columnId && prev.label === next.label && prev.sortDirection === next.sortDirection && prev.isSorted === next.isSorted && prev.width === next.width && prev.isSortable === next.isSortable && prev.renderHeaderRef === next.renderHeaderRef && prev.fallbackRenderHeaderRef === next.fallbackRenderHeaderRef;
+}
+var MemoizedHeaderContent = react.memo(HeaderContentImpl, headerContentPropsEqual);
 function PretableSurface({
   ariaLabel,
   autosize,
@@ -799,45 +975,292 @@ function PretableSurface({
   getRowClassName,
   getRowId,
   getRowProps,
-  interactionState,
+  state,
   overscan = 6,
   onGridReady,
   onSelectedRowIdChange,
+  onSelectionChange,
+  onFocusChange,
   onSortChange,
+  onColumnWidthsChange,
+  onColumnOrderChange,
+  onColumnPinnedChange,
   onTelemetryChange,
   renderBodyCell,
   renderHeaderCell,
   rows,
+  rowSelectionColumn,
   selectFocusedRowOnArrowKey = false,
+  tabBehavior = "wrap-rows",
   viewportStyle,
-  viewportHeight
+  viewportHeight,
+  copyWithHeaders,
+  onCopy,
+  copyToClipboard,
+  messages
 }) {
   const [measuredHeights, setMeasuredHeights] = react.useState({});
+  const [dragLiveWidth, setDragLiveWidth] = react.useState(null);
+  const resizeStateRef = react.useRef(null);
+  const wasResizingRef = react.useRef(false);
+  const wasReorderingRef = react.useRef(false);
+  const reorderStateRef = react.useRef(null);
+  const [reorderDrag, setReorderDrag] = react.useState(null);
   const [viewportWidth, setViewportWidth] = react.useState(0);
+  const [liveMessage, setLiveMessage] = react.useState("");
+  const announceTimerRef = react.useRef(null);
+  const pendingAnnouncementRef = react.useRef(null);
+  const scheduleAnnouncement = react.useCallback((message) => {
+    pendingAnnouncementRef.current = message;
+    if (announceTimerRef.current !== null) {
+      clearTimeout(announceTimerRef.current);
+    }
+    announceTimerRef.current = setTimeout(() => {
+      if (pendingAnnouncementRef.current !== null) {
+        setLiveMessage(pendingAnnouncementRef.current);
+        pendingAnnouncementRef.current = null;
+      }
+      announceTimerRef.current = null;
+    }, ANNOUNCE_DEBOUNCE_MS);
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      if (announceTimerRef.current !== null) {
+        clearTimeout(announceTimerRef.current);
+      }
+    };
+  }, []);
+  const effectiveMessages = react.useMemo(
+    () => ({
+      selectAllAnnouncement: messages?.selectAllAnnouncement ?? defaultMessages.selectAllAnnouncement,
+      copyAnnouncement: messages?.copyAnnouncement ?? defaultMessages.copyAnnouncement,
+      copyFailedAnnouncement: messages?.copyFailedAnnouncement ?? defaultMessages.copyFailedAnnouncement
+    }),
+    [messages]
+  );
   const measuredHeightsRef = react.useRef({});
   const measuredRowKeysRef = react.useRef({});
   const rowNodesRef = react.useRef(/* @__PURE__ */ new Map());
+  const cellNodesRef = react.useRef(/* @__PURE__ */ new Map());
   const viewportRef = react.useRef(null);
+  const dragAnchorRef = react.useRef(null);
+  const dragStartSelectionRef = react.useRef(null);
+  const lastCheckedRowAnchorRef = react.useRef(null);
   const { headerHeight } = useResolvedHeights();
   const bodyViewportHeight = Math.max(viewportHeight - headerHeight, 0);
-  const { grid, snapshot, renderSnapshot, telemetry } = usePretableModel({
+  const effectiveColumns = react.useMemo(() => {
+    if (!rowSelectionColumn?.enabled) return columns;
+    const synth = {
+      id: ROW_SELECT_COLUMN_ID,
+      header: "",
+      widthPx: rowSelectionColumn.width ?? 36,
+      sortable: false,
+      filterable: false,
+      ...rowSelectionColumn.pinned ?? true ? { pinned: "left" } : {}
+    };
+    return [synth, ...columns];
+  }, [columns, rowSelectionColumn]);
+  const { grid, snapshot, renderSnapshot, telemetry } = usePretable({
     autosize,
-    columns,
+    columns: effectiveColumns,
     getRowId,
-    interactionOverrides: interactionState ?? void 0,
+    state: state ?? void 0,
     measuredHeights,
     overscan,
     rows,
     viewportHeight: bodyViewportHeight,
-    viewportWidth: viewportWidth || void 0
+    viewportWidth: viewportWidth || void 0,
+    onSelectionChange,
+    onFocusChange
   });
-  const pinnedOffsets = react.useMemo(() => getPinnedLeftOffsets(columns), [columns]);
+  const focusedRowId = snapshot.focus.rowId;
+  const focusedColumnId = snapshot.focus.columnId;
+  const pinnedOffsets = react.useMemo(
+    () => getPinnedLeftOffsets(effectiveColumns),
+    [effectiveColumns]
+  );
+  const columnsById = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of effectiveColumns) {
+      map.set(col.id, col);
+    }
+    return map;
+  }, [effectiveColumns]);
+  const { columnLefts, columnWidths } = react.useMemo(() => {
+    const engineColumns = grid.options.columns;
+    const lefts = new Array(engineColumns.length).fill(0);
+    const widths = new Array(engineColumns.length).fill(0);
+    for (const planned of renderSnapshot.columns) {
+      lefts[planned.index] = planned.left;
+      widths[planned.index] = planned.width;
+    }
+    let acc = 0;
+    for (let i = 0; i < engineColumns.length; i += 1) {
+      const col = engineColumns[i];
+      if (widths[i] === 0) {
+        widths[i] = col.widthPx ?? 0;
+        lefts[i] = acc;
+      }
+      acc = lefts[i] + widths[i];
+    }
+    return { columnLefts: lefts, columnWidths: widths };
+  }, [renderSnapshot.columns, grid.options.columns]);
+  const visibleRowIndexById = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (let i = 0; i < snapshot.visibleRows.length; i += 1) {
+      const row = snapshot.visibleRows[i];
+      if (row) {
+        map.set(row.id, i);
+      }
+    }
+    return map;
+  }, [snapshot.visibleRows]);
+  const dataColumnIndex = react.useMemo(() => {
+    const dataColumns = effectiveColumns.filter(
+      (c) => c.id !== ROW_SELECT_COLUMN_ID
+    );
+    const idxById = /* @__PURE__ */ new Map();
+    for (let i = 0; i < dataColumns.length; i += 1) {
+      idxById.set(dataColumns[i].id, i);
+    }
+    return { dataColumns, idxById };
+  }, [effectiveColumns]);
+  const { fullySelectedRowIds, indeterminateRowIds } = react.useMemo(() => {
+    const fullyRows = /* @__PURE__ */ new Set();
+    const indeterminateRows = /* @__PURE__ */ new Set();
+    const ranges = snapshot.selection.ranges;
+    const { dataColumns, idxById: dataColIdxByColId } = dataColumnIndex;
+    if (ranges.length === 0 || dataColumns.length === 0) {
+      return {
+        fullySelectedRowIds: fullyRows,
+        indeterminateRowIds: indeterminateRows
+      };
+    }
+    const visibleRows = snapshot.visibleRows;
+    const colCount = dataColumns.length;
+    if (colCount <= 30) {
+      const rowMask = /* @__PURE__ */ new Map();
+      for (const range of ranges) {
+        const r1 = visibleRowIndexById.get(range.startRowId);
+        const r2 = visibleRowIndexById.get(range.endRowId);
+        if (r1 === void 0 || r2 === void 0) continue;
+        const rowLo = Math.min(r1, r2);
+        const rowHi = Math.max(r1, r2);
+        const startSynth = range.startColumnId === ROW_SELECT_COLUMN_ID;
+        const endSynth = range.endColumnId === ROW_SELECT_COLUMN_ID;
+        let dataColLo;
+        let dataColHi;
+        if (startSynth && endSynth) {
+          continue;
+        }
+        if (startSynth || endSynth) {
+          dataColLo = 0;
+          dataColHi = colCount - 1;
+        } else {
+          const a = dataColIdxByColId.get(range.startColumnId);
+          const b = dataColIdxByColId.get(range.endColumnId);
+          if (a === void 0 || b === void 0) continue;
+          dataColLo = Math.min(a, b);
+          dataColHi = Math.max(a, b);
+        }
+        const spanWidth = dataColHi - dataColLo + 1;
+        const spanMask = (spanWidth >= 30 ? 1073741823 : (1 << spanWidth) - 1) << dataColLo >>> 0;
+        for (let rowIdx = rowLo; rowIdx <= rowHi; rowIdx += 1) {
+          rowMask.set(rowIdx, (rowMask.get(rowIdx) ?? 0) | spanMask);
+        }
+      }
+      const fullMask = colCount >= 30 ? 1073741823 : (1 << colCount) - 1 >>> 0;
+      for (const [rowIdx, mask] of rowMask) {
+        if (mask === 0) continue;
+        const row = visibleRows[rowIdx];
+        if (!row) continue;
+        if (mask === fullMask) fullyRows.add(row.id);
+        else indeterminateRows.add(row.id);
+      }
+    } else {
+      const rowCoverage = /* @__PURE__ */ new Map();
+      for (const range of ranges) {
+        const r1 = visibleRowIndexById.get(range.startRowId);
+        const r2 = visibleRowIndexById.get(range.endRowId);
+        if (r1 === void 0 || r2 === void 0) continue;
+        const rowLo = Math.min(r1, r2);
+        const rowHi = Math.max(r1, r2);
+        const startSynth = range.startColumnId === ROW_SELECT_COLUMN_ID;
+        const endSynth = range.endColumnId === ROW_SELECT_COLUMN_ID;
+        let dataColLo;
+        let dataColHi;
+        if (startSynth && endSynth) continue;
+        if (startSynth || endSynth) {
+          dataColLo = 0;
+          dataColHi = colCount - 1;
+        } else {
+          const a = dataColIdxByColId.get(range.startColumnId);
+          const b = dataColIdxByColId.get(range.endColumnId);
+          if (a === void 0 || b === void 0) continue;
+          dataColLo = Math.min(a, b);
+          dataColHi = Math.max(a, b);
+        }
+        for (let rowIdx = rowLo; rowIdx <= rowHi; rowIdx += 1) {
+          let cov = rowCoverage.get(rowIdx);
+          if (!cov) {
+            cov = /* @__PURE__ */ new Set();
+            rowCoverage.set(rowIdx, cov);
+          }
+          for (let colIdx = dataColLo; colIdx <= dataColHi; colIdx += 1) {
+            cov.add(colIdx);
+          }
+        }
+      }
+      for (const [rowIdx, cov] of rowCoverage) {
+        const row = visibleRows[rowIdx];
+        if (!row) continue;
+        if (cov.size === 0) continue;
+        if (cov.size === colCount) fullyRows.add(row.id);
+        else indeterminateRows.add(row.id);
+      }
+    }
+    return {
+      fullySelectedRowIds: fullyRows,
+      indeterminateRowIds: indeterminateRows
+    };
+  }, [
+    snapshot.selection.ranges,
+    snapshot.visibleRows,
+    dataColumnIndex,
+    visibleRowIndexById
+  ]);
+  const isCellSelected = react.useCallback(
+    (rowId, columnId) => {
+      const ranges = snapshot.selection.ranges;
+      if (ranges.length === 0) return false;
+      const rIdx = visibleRowIndexById.get(rowId);
+      if (rIdx === void 0) return false;
+      const cIdx = dataColumnIndex.idxById.get(columnId);
+      if (cIdx === void 0) return false;
+      for (const range of ranges) {
+        const r1 = visibleRowIndexById.get(range.startRowId);
+        const r2 = visibleRowIndexById.get(range.endRowId);
+        if (r1 === void 0 || r2 === void 0) continue;
+        if (rIdx < Math.min(r1, r2) || rIdx > Math.max(r1, r2)) continue;
+        const startSynth = range.startColumnId === ROW_SELECT_COLUMN_ID;
+        const endSynth = range.endColumnId === ROW_SELECT_COLUMN_ID;
+        if (startSynth && endSynth) continue;
+        if (startSynth || endSynth) return true;
+        const a = dataColumnIndex.idxById.get(range.startColumnId);
+        const b = dataColumnIndex.idxById.get(range.endColumnId);
+        if (a === void 0 || b === void 0) continue;
+        if (cIdx >= Math.min(a, b) && cIdx <= Math.max(a, b)) return true;
+      }
+      return false;
+    },
+    [snapshot.selection.ranges, visibleRowIndexById, dataColumnIndex]
+  );
   react.useLayoutEffect(() => {
     const el = viewportRef.current;
     if (el && viewportWidth === 0) {
       setViewportWidth(el.clientWidth);
     }
-  });
+  }, [viewportWidth]);
   react.useLayoutEffect(() => {
     onTelemetryChange?.(telemetry);
   }, [onTelemetryChange, telemetry]);
@@ -845,14 +1268,26 @@ function PretableSurface({
     onGridReady?.(grid);
   }, [grid, onGridReady]);
   react.useLayoutEffect(() => {
-    if (!interactionState?.selectedRowId) {
+    if (!focusedRowId || !focusedColumnId) {
       return;
     }
-    const currentSelectedRowId = snapshot.selection.rowIds[0] ?? null;
-    if (currentSelectedRowId !== interactionState.selectedRowId) {
-      onSelectedRowIdChange?.(interactionState.selectedRowId);
+    const cellNode = cellNodesRef.current.get(
+      `${focusedRowId}::${focusedColumnId}`
+    );
+    if (cellNode && document.activeElement !== cellNode) {
+      cellNode.focus({ preventScroll: true });
+    }
+  }, [focusedRowId, focusedColumnId]);
+  react.useLayoutEffect(() => {
+    const injectedSelectedRowId = state?.selection?.ranges[0]?.startRowId ?? null;
+    if (!injectedSelectedRowId) {
+      return;
+    }
+    const currentSelectedRowId = snapshot.selection.ranges[0]?.startRowId ?? null;
+    if (currentSelectedRowId !== injectedSelectedRowId) {
+      onSelectedRowIdChange?.(injectedSelectedRowId);
     }
-  }, [interactionState, onSelectedRowIdChange, snapshot.selection.rowIds]);
+  }, [state, onSelectedRowIdChange, snapshot.selection.ranges]);
   react.useLayoutEffect(() => {
     let nextHeights = measuredHeightsRef.current;
     let nextKeys = measuredRowKeysRef.current;
@@ -893,35 +1328,106 @@ function PretableSurface({
     if (changed) {
       setMeasuredHeights(nextHeights);
     }
-  }, [snapshot.visibleRows, columns, viewportWidth]);
+  }, [snapshot.visibleRows, effectiveColumns, viewportWidth]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      "aria-colcount": effectiveColumns.length,
       "aria-label": ariaLabel,
+      "aria-multiselectable": "true",
+      "aria-rowcount": snapshot.totalRowCount + 1,
       "data-pretable-scroll-viewport": "",
       ref: viewportRef,
       role: "grid",
-      tabIndex: 0,
+      tabIndex: -1,
       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);
+        if ((event.key === "Escape" || event.key === "Esc") && reorderStateRef.current?.dragging) {
+          reorderStateRef.current = null;
+          setReorderDrag(null);
+          event.preventDefault();
+          return;
+        }
+        if ((event.key === "Escape" || event.key === "Esc") && dragAnchorRef.current !== null && dragStartSelectionRef.current !== null) {
+          const before2 = grid.getSnapshot();
+          grid.setSelection(dragStartSelectionRef.current);
+          dragAnchorRef.current = null;
+          dragStartSelectionRef.current = null;
+          const after = grid.getSnapshot();
+          if (JSON.stringify(before2.selection) !== JSON.stringify(after.selection)) {
+            onSelectionChange?.(after.selection);
           }
           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();
+        if ((event.key === "c" || event.key === "C") && (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey && !(event.target instanceof HTMLInputElement) && !(event.target instanceof HTMLTextAreaElement)) {
+          event.preventDefault();
+          const snap = grid.getSnapshot();
+          if (snap.selection.ranges.length === 0) {
+            return;
+          }
+          const args = {
+            ranges: snap.selection.ranges,
+            visibleRows: snap.visibleRows,
+            columns: effectiveColumns,
+            copyWithHeaders: copyWithHeaders ?? false
+          };
+          const payload = onCopy ? onCopy(args) : serializeRangesAsTsv(args);
+          if (payload) {
+            const extent = computeSelectionExtent(
+              snap.selection.ranges,
+              snap,
+              effectiveColumns
+            );
+            Promise.resolve(
+              (copyToClipboard ?? defaultCopyToClipboard)(payload)
+            ).then(() => {
+              scheduleAnnouncement(
+                effectiveMessages.copyAnnouncement({
+                  rowCount: extent.rowCount,
+                  columnCount: extent.columnCount
+                })
+              );
+            }).catch((err) => {
+              console.warn("[pretable] clipboard copy failed", err);
+              scheduleAnnouncement(
+                effectiveMessages.copyFailedAnnouncement()
+              );
+            });
+          }
+          return;
+        }
+        const isSelectAll = (event.metaKey || event.ctrlKey) && (event.key === "a" || event.key === "A") && !event.shiftKey && !event.altKey;
+        const before = grid.getSnapshot();
+        const handled = handleSurfaceKeyDown(event, {
+          bodyViewportHeight,
+          columns: effectiveColumns,
+          grid,
+          onSelectedRowIdChange,
+          selectFocusedRowOnArrowKey,
+          tabBehavior
+        });
+        if (handled) {
+          event.preventDefault();
+          const after = grid.getSnapshot();
+          if (isSelectAll) {
+            const extent = computeSelectionExtent(
+              after.selection.ranges,
+              after,
+              effectiveColumns
+            );
+            scheduleAnnouncement(
+              effectiveMessages.selectAllAnnouncement({
+                rowCount: extent.rowCount,
+                columnCount: extent.columnCount,
+                isAll: extent.isAll
+              })
+            );
+          }
+          if (before.focus.rowId !== after.focus.rowId || before.focus.columnId !== after.focus.columnId) {
+            onFocusChange?.(after.focus);
+          }
+          if (JSON.stringify(before.selection) !== JSON.stringify(after.selection)) {
+            onSelectionChange?.(after.selection);
           }
         }
       },
@@ -945,12 +1451,93 @@ function PretableSurface({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            "aria-atomic": "true",
+            "aria-live": "polite",
+            className: "pt-sr-only",
+            "data-pretable-live-region": "",
+            role: "status",
+            children: liveMessage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-rowindex": 1,
             "data-pretable-header-row": "",
+            role: "row",
             style: getHeaderRowStyle(renderSnapshot.totalWidth, headerHeight),
-            children: renderSnapshot.columns.map((plannedCol) => {
-              const column = columns[plannedCol.index];
+            children: renderSnapshot.columns.flatMap((plannedCol) => {
+              const column = columnsById.get(plannedCol.id);
               if (!column) {
-                return null;
+                return [];
+              }
+              const effWidth = dragLiveWidth?.columnId === column.id ? dragLiveWidth.width : plannedCol.width;
+              if (column.id === ROW_SELECT_COLUMN_ID) {
+                const pinnedOffset2 = pinnedOffsets[column.id];
+                const positionStyle2 = plannedCol.pinned === "left" && pinnedOffset2 !== void 0 ? {
+                  ...getHeaderCellStyle(plannedCol.left, plannedCol.width),
+                  ...getPinnedCellStyle(pinnedOffset2)
+                } : getHeaderCellStyle(plannedCol.left, plannedCol.width);
+                const visibleRows = snapshot.visibleRows;
+                const allFullySelected = visibleRows.length > 0 && visibleRows.every((r) => fullySelectedRowIds.has(r.id));
+                const anySelected = visibleRows.some(
+                  (r) => fullySelectedRowIds.has(r.id) || indeterminateRowIds.has(r.id)
+                );
+                const headerCheckState = allFullySelected ? "true" : anySelected ? "mixed" : "false";
+                const showHeaderCheckbox = rowSelectionColumn?.headerCheckbox !== false;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "aria-colindex": plannedCol.index + 1,
+                    "data-pretable-header-cell": "",
+                    "data-pretable-row-select-header": "",
+                    "data-pinned": plannedCol.pinned === "left" ? "left" : void 0,
+                    role: "columnheader",
+                    style: {
+                      alignItems: "center",
+                      display: "flex",
+                      justifyContent: "center",
+                      padding: 0,
+                      ...positionStyle2
+                    },
+                    children: showHeaderCheckbox ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        "aria-checked": headerCheckState,
+                        "aria-label": "Select all rows",
+                        "data-pretable-row-select-all": "true",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          const before = grid.getSnapshot();
+                          const setting = !allFullySelected;
+                          grid.setSelectAllVisible(setting);
+                          const after = grid.getSnapshot();
+                          if (JSON.stringify(before.selection) !== JSON.stringify(after.selection)) {
+                            onSelectionChange?.(after.selection);
+                          }
+                          if (setting) {
+                            const extent = computeSelectionExtent(
+                              after.selection.ranges,
+                              after,
+                              effectiveColumns
+                            );
+                            scheduleAnnouncement(
+                              effectiveMessages.selectAllAnnouncement({
+                                rowCount: extent.rowCount,
+                                columnCount: extent.columnCount,
+                                isAll: extent.isAll
+                              })
+                            );
+                          }
+                        },
+                        role: "checkbox",
+                        type: "button",
+                        children: headerCheckState === "true" ? "\u2713" : headerCheckState === "mixed" ? "\u2013" : ""
+                      }
+                    ) : null
+                  },
+                  column.id
+                );
               }
               const label = column.header ?? column.id;
               const sortDirection = snapshot.sort.columnId === column.id ? snapshot.sort.direction : null;
@@ -960,54 +1547,261 @@ function PretableSurface({
               }) ?? {};
               const pinnedOffset = pinnedOffsets[column.id];
               const positionStyle = plannedCol.pinned === "left" && pinnedOffset !== void 0 ? {
-                ...getHeaderCellStyle(plannedCol.left, plannedCol.width),
+                ...getHeaderCellStyle(plannedCol.left, effWidth),
                 ...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?.({
+              } : getHeaderCellStyle(plannedCol.left, effWidth);
+              const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
+              const showResizeHandle = column.resizable !== false;
+              const isDragging = dragLiveWidth?.columnId === column.id;
+              const handleLeft = plannedCol.left + effWidth - 4;
+              const handlePinnedStyle = plannedCol.pinned === "left" && pinnedOffset !== void 0 ? {
+                position: "sticky",
+                zIndex: 3,
+                left: pinnedOffset + effWidth - 4
+              } : null;
+              return [
+                /* @__PURE__ */ react.createElement(
+                  "button",
+                  {
+                    ...headerProps,
+                    "aria-colindex": plannedCol.index + 1,
+                    "aria-label": `Sort ${label}`,
+                    "aria-sort": ariaSort,
+                    className: getHeaderCellClassName?.({
+                      column,
+                      sortDirection
+                    }),
+                    "data-pretable-header-cell": "",
+                    "data-pinned": plannedCol.pinned === "left" ? "left" : void 0,
+                    key: column.id,
+                    role: "columnheader",
+                    onClick: (event) => {
+                      if (wasReorderingRef.current) {
+                        event.preventDefault();
+                        wasReorderingRef.current = false;
+                        return;
+                      }
+                      const nextDirection = getNextSortDirection(sortDirection);
+                      grid.setSort(column.id, nextDirection);
+                      if (nextDirection) {
+                        onSortChange?.({
+                          columnId: column.id,
+                          direction: nextDirection
+                        });
+                      } else {
+                        onSortChange?.(null);
+                      }
+                    },
+                    ...column.id !== ROW_SELECT_COLUMN_ID && column.reorderable !== false ? {
+                      onPointerDown: (event) => {
+                        if (event.button !== 0) return;
+                        if (event.shiftKey || event.metaKey || event.ctrlKey)
+                          return;
+                        reorderStateRef.current = {
+                          columnId: column.id,
+                          pointerId: event.pointerId,
+                          startX: event.clientX,
+                          startY: event.clientY,
+                          dragging: false
+                        };
+                      },
+                      onPointerMove: (event) => {
+                        const drag = reorderStateRef.current;
+                        if (!drag || drag.columnId !== column.id) return;
+                        if (event.pointerId !== drag.pointerId) return;
+                        const dx = event.clientX - drag.startX;
+                        const dy = event.clientY - drag.startY;
+                        const dist = Math.hypot(dx, dy);
+                        const surfaceRect = viewportRef.current?.getBoundingClientRect();
+                        const surfaceLeft = surfaceRect?.left ?? 0;
+                        if (!drag.dragging) {
+                          if (dist < REORDER_THRESHOLD_PX) return;
+                          drag.dragging = true;
+                          try {
+                            event.currentTarget.setPointerCapture(
+                              event.pointerId
+                            );
+                          } catch {
+                          }
+                          const headerEl = event.currentTarget;
+                          const rect = headerEl.getBoundingClientRect();
+                          setReorderDrag({
+                            columnId: column.id,
+                            cursorX: event.clientX,
+                            cursorY: event.clientY,
+                            dropIndex: computeDropIndex(
+                              event.clientX,
+                              effectiveColumns.length,
+                              columnLefts,
+                              columnWidths,
+                              surfaceLeft
+                            ),
+                            ghostWidth: rect.width || effWidth,
+                            ghostHeight: rect.height || headerHeight,
+                            ghostHeader: String(column.header ?? column.id)
+                          });
+                          return;
+                        }
+                        setReorderDrag(
+                          (prev) => prev ? {
+                            ...prev,
+                            cursorX: event.clientX,
+                            cursorY: event.clientY,
+                            dropIndex: computeDropIndex(
+                              event.clientX,
+                              effectiveColumns.length,
+                              columnLefts,
+                              columnWidths,
+                              surfaceLeft
+                            )
+                          } : null
+                        );
+                      },
+                      onPointerUp: (event) => {
+                        const drag = reorderStateRef.current;
+                        if (!drag || drag.columnId !== column.id) return;
+                        if (event.pointerId !== drag.pointerId) return;
+                        const current = reorderDrag;
+                        if (drag.dragging && current) {
+                          wasReorderingRef.current = true;
+                          const beforePinned = buildPinnedMap(grid);
+                          grid.moveColumn(column.id, current.dropIndex);
+                          const afterOrder = grid.options.columns.map((c) => c.id).filter((id) => id !== ROW_SELECT_COLUMN_ID);
+                          onColumnOrderChange?.(afterOrder);
+                          const afterPinned = buildPinnedMap(grid);
+                          if (!pinnedMapsEqual(beforePinned, afterPinned)) {
+                            onColumnPinnedChange?.(afterPinned);
+                          }
+                        }
+                        try {
+                          event.currentTarget.releasePointerCapture(
+                            event.pointerId
+                          );
+                        } catch {
+                        }
+                        reorderStateRef.current = null;
+                        setReorderDrag(null);
+                      },
+                      onPointerCancel: () => {
+                        reorderStateRef.current = null;
+                        setReorderDrag(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"
+                  },
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    MemoizedHeaderContent,
+                    {
+                      columnId: column.id,
+                      label,
+                      sortDirection,
+                      isSorted: sortDirection !== null,
+                      width: effWidth,
+                      isSortable: column.sortable !== false,
+                      renderHeaderRef: column.renderHeader ?? null,
+                      fallbackRenderHeaderRef: renderHeaderCell ?? null,
+                      headerRenderInput: {
+                        column,
+                        label,
+                        sortDirection,
+                        isSorted: sortDirection !== null
+                      }
+                    }
+                  )
+                ),
+                showResizeHandle ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-pretable-resize-handle": "",
+                    "data-column-id": column.id,
+                    "data-dragging": isDragging ? "true" : "false",
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      height: "100%",
+                      width: 4,
+                      left: handleLeft,
+                      cursor: "col-resize",
+                      zIndex: 4,
+                      touchAction: "none",
+                      userSelect: "none",
+                      ...handlePinnedStyle ?? {}
+                    },
+                    onPointerDown: (event) => {
+                      if (event.button !== 0) return;
+                      event.stopPropagation();
+                      const startWidth = column.widthPx ?? plannedCol.width ?? Math.max(column.minWidthPx ?? 40, 80);
+                      resizeStateRef.current = {
                         columnId: column.id,
-                        direction: nextDirection
-                      });
-                    } else {
-                      onSortChange?.(null);
+                        startX: event.clientX,
+                        startWidth,
+                        pointerId: event.pointerId
+                      };
+                      wasResizingRef.current = false;
+                      try {
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                      } catch {
+                      }
+                      setDragLiveWidth({ columnId: column.id, width: startWidth });
+                    },
+                    onPointerMove: (event) => {
+                      const drag = resizeStateRef.current;
+                      if (!drag || drag.columnId !== column.id) return;
+                      const min = column.minWidthPx ?? 40;
+                      const max = column.maxWidthPx ?? Infinity;
+                      const next = Math.max(
+                        min,
+                        Math.min(
+                          max,
+                          drag.startWidth + (event.clientX - drag.startX)
+                        )
+                      );
+                      if (Math.abs(next - drag.startWidth) > 0) {
+                        wasResizingRef.current = true;
+                      }
+                      setDragLiveWidth({ columnId: column.id, width: next });
+                    },
+                    onPointerUp: (event) => {
+                      const drag = resizeStateRef.current;
+                      if (!drag || drag.columnId !== column.id) return;
+                      const finalWidth = dragLiveWidth?.width ?? drag.startWidth;
+                      try {
+                        event.currentTarget.releasePointerCapture(drag.pointerId);
+                      } catch {
+                      }
+                      grid.setColumnWidth(column.id, finalWidth);
+                      onColumnWidthsChange?.(buildWidthsMap(grid));
+                      resizeStateRef.current = null;
+                      setDragLiveWidth(null);
+                    },
+                    onPointerCancel: () => {
+                      resizeStateRef.current = null;
+                      setDragLiveWidth(null);
+                      wasResizingRef.current = false;
+                    },
+                    onDoubleClick: (event) => {
+                      if (wasResizingRef.current) {
+                        event.preventDefault();
+                        wasResizingRef.current = false;
+                        return;
+                      }
+                      grid.autosizeColumn(column.id);
+                      onColumnWidthsChange?.(buildWidthsMap(grid));
                     }
                   },
-                  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" })
-                ] })
-              );
+                  `${column.id}::resize-handle`
+                ) : null
+              ];
             })
           }
         ),
@@ -1021,7 +1815,7 @@ function PretableSurface({
             ),
             children: renderSnapshot.rows.map(({ height, id, row, rowIndex, top }) => {
               const isFocused = snapshot.focus.rowId === id;
-              const isSelected = snapshot.selection.rowIds.includes(id);
+              const isSelected = fullySelectedRowIds.has(id);
               const rowProps = getRowProps?.({
                 isFocused,
                 isSelected,
@@ -1033,8 +1827,8 @@ function PretableSurface({
                 "div",
                 {
                   ...rowProps,
-                  "aria-rowindex": rowIndex + 1,
-                  "aria-selected": isSelected,
+                  "aria-rowindex": rowIndex + 2,
+                  "aria-selected": isSelected ? "true" : void 0,
                   className: getRowClassName?.({
                     isFocused,
                     isSelected,
@@ -1050,11 +1844,7 @@ function PretableSurface({
                   "data-selected": isSelected ? "true" : "false",
                   "data-testid": "pretable-row",
                   key: id,
-                  onClick: () => {
-                    grid.setFocus(id, columns[0]?.id ?? null);
-                    grid.selectRow(id);
-                    onSelectedRowIdChange?.(id);
-                  },
+                  role: "row",
                   ref: (node) => {
                     if (node) {
                       rowNodesRef.current.set(id, node);
@@ -1065,15 +1855,20 @@ function PretableSurface({
                   style: getRowStyle(top, height)
                 },
                 renderSnapshot.columns.map((plannedCol) => {
-                  const column = columns[plannedCol.index];
+                  const column = columnsById.get(plannedCol.id);
                   if (!column) {
                     return null;
                   }
                   const value = resolveCellValue(row, column);
+                  const cellKey = `${id}::${column.id}`;
+                  const cellIsFocused = isFocused && snapshot.focus.columnId === column.id;
+                  const cellIsSelected = isCellSelected(id, column.id);
+                  const formattedValue = column.format ? column.format({ value, row, column }) : formatCellValue(value);
                   const bodyInput = {
                     column,
-                    isFocused,
-                    isSelected,
+                    formattedValue,
+                    isFocused: cellIsFocused,
+                    isSelected: cellIsSelected,
                     row,
                     rowId: id,
                     rowIndex,
@@ -1081,39 +1876,310 @@ function PretableSurface({
                   };
                   const bodyProps = getBodyCellProps?.(bodyInput) ?? {};
                   const pinnedOffset = pinnedOffsets[column.id];
+                  const cellEffWidth = dragLiveWidth?.columnId === column.id ? dragLiveWidth.width : plannedCol.width;
                   const positionStyle = plannedCol.pinned === "left" && pinnedOffset !== void 0 ? {
-                    ...getCellStyle(plannedCol.left, plannedCol.width),
+                    ...getCellStyle(plannedCol.left, cellEffWidth),
                     ...getPinnedCellStyle(pinnedOffset)
-                  } : getCellStyle(plannedCol.left, plannedCol.width);
+                  } : getCellStyle(plannedCol.left, cellEffWidth);
+                  const isRowSelectCell = column.id === ROW_SELECT_COLUMN_ID;
+                  const rowCheckState = fullySelectedRowIds.has(id) ? "true" : indeterminateRowIds.has(id) ? "mixed" : "false";
                   return /* @__PURE__ */ react.createElement(
                     "div",
                     {
                       ...bodyProps,
+                      "aria-colindex": plannedCol.index + 1,
+                      "aria-selected": cellIsSelected ? "true" : void 0,
                       className: getBodyCellClassName?.(bodyInput),
                       "data-column-id": column.id,
-                      "data-focused": isFocused ? "true" : "false",
+                      "data-focused": cellIsFocused ? "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",
+                      "data-row-select-cell": isRowSelectCell ? "true" : void 0,
+                      "data-selected": cellIsSelected ? "true" : "false",
                       key: `${id}:${column.id}`,
+                      onClick: (event) => {
+                        if (column.id === ROW_SELECT_COLUMN_ID) return;
+                        handleCellClick({
+                          cmd: event.metaKey || event.ctrlKey,
+                          columnId: column.id,
+                          columns: effectiveColumns,
+                          grid,
+                          onFocusChange,
+                          onSelectedRowIdChange,
+                          onSelectionChange,
+                          rowId: id,
+                          shift: event.shiftKey
+                        });
+                      },
+                      onPointerDown: (event) => {
+                        if (event.button !== 0) return;
+                        if (column.id === ROW_SELECT_COLUMN_ID) return;
+                        const cmd = event.metaKey || event.ctrlKey;
+                        if (event.shiftKey || cmd) return;
+                        dragStartSelectionRef.current = grid.getSnapshot().selection;
+                        dragAnchorRef.current = {
+                          rowId: id,
+                          columnId: column.id
+                        };
+                        handleCellClick({
+                          cmd: false,
+                          columnId: column.id,
+                          columns: effectiveColumns,
+                          grid,
+                          onFocusChange,
+                          onSelectedRowIdChange,
+                          onSelectionChange,
+                          rowId: id,
+                          shift: false
+                        });
+                        try {
+                          event.currentTarget.setPointerCapture(event.pointerId);
+                        } catch {
+                        }
+                      },
+                      onPointerEnter: () => {
+                        if (!dragAnchorRef.current) return;
+                        if (column.id === ROW_SELECT_COLUMN_ID) return;
+                        const before = grid.getSnapshot();
+                        const addr = {
+                          rowId: id,
+                          columnId: column.id
+                        };
+                        grid.extendRangeFromAnchor(addr);
+                        grid.setFocus(addr);
+                        const after = grid.getSnapshot();
+                        if (before.focus.rowId !== after.focus.rowId || before.focus.columnId !== after.focus.columnId) {
+                          onFocusChange?.(after.focus);
+                        }
+                        if (JSON.stringify(before.selection) !== JSON.stringify(after.selection)) {
+                          onSelectionChange?.(after.selection);
+                          const beforeFullRow = singleFullRowSelection(
+                            before.selection,
+                            effectiveColumns.filter(
+                              (c) => c.id !== ROW_SELECT_COLUMN_ID
+                            )
+                          );
+                          const afterFullRow = singleFullRowSelection(
+                            after.selection,
+                            effectiveColumns.filter(
+                              (c) => c.id !== ROW_SELECT_COLUMN_ID
+                            )
+                          );
+                          if (beforeFullRow !== afterFullRow) {
+                            onSelectedRowIdChange?.(afterFullRow);
+                          }
+                        }
+                      },
+                      onPointerUp: () => {
+                        dragAnchorRef.current = null;
+                      },
+                      onPointerCancel: () => {
+                        dragAnchorRef.current = null;
+                      },
+                      ref: (node) => {
+                        if (node) {
+                          cellNodesRef.current.set(cellKey, node);
+                        } else {
+                          cellNodesRef.current.delete(cellKey);
+                        }
+                      },
+                      role: "gridcell",
                       style: {
+                        outline: "none",
                         overflowWrap: column.wrap ? "anywhere" : "normal",
                         whiteSpace: column.wrap ? "pre-wrap" : "nowrap",
                         ...positionStyle
-                      }
+                      },
+                      tabIndex: cellIsFocused ? 0 : -1
                     },
-                    renderBodyCell ? renderBodyCell(bodyInput) : formatCellValue(value)
+                    isRowSelectCell ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        "aria-checked": rowCheckState,
+                        "aria-label": "Select row",
+                        "data-pretable-row-select": "true",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          event.preventDefault();
+                          const before = grid.getSnapshot();
+                          const visible = before.visibleRows;
+                          if (event.shiftKey && lastCheckedRowAnchorRef.current) {
+                            const anchorId = lastCheckedRowAnchorRef.current;
+                            const anchorIdx = visible.findIndex(
+                              (r) => r.id === anchorId
+                            );
+                            const clickedIdx = visible.findIndex(
+                              (r) => r.id === id
+                            );
+                            if (anchorIdx >= 0 && clickedIdx >= 0) {
+                              const [lo, hi] = anchorIdx <= clickedIdx ? [anchorIdx, clickedIdx] : [clickedIdx, anchorIdx];
+                              for (let i = lo; i <= hi; i += 1) {
+                                const r = visible[i];
+                                if (r && !fullySelectedRowIds.has(r.id)) {
+                                  grid.toggleRowSelection(r.id);
+                                }
+                              }
+                            }
+                          } else {
+                            grid.toggleRowSelection(id);
+                          }
+                          lastCheckedRowAnchorRef.current = id;
+                          const after = grid.getSnapshot();
+                          if (JSON.stringify(before.selection) !== JSON.stringify(after.selection)) {
+                            onSelectionChange?.(after.selection);
+                          }
+                        },
+                        role: "checkbox",
+                        type: "button",
+                        children: rowCheckState === "true" ? "\u2713" : rowCheckState === "mixed" ? "\u2013" : ""
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      MemoizedCellContent,
+                      {
+                        rowId: id,
+                        columnId: column.id,
+                        value,
+                        formattedValue,
+                        isFocused: cellIsFocused,
+                        isSelected: cellIsSelected,
+                        renderRef: column.render ?? null,
+                        fallbackRenderRef: renderBodyCell ?? null,
+                        cellRenderInput: bodyInput
+                      }
+                    )
                   );
                 })
               );
             })
           }
-        )
+        ),
+        reorderDrag ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-pretable-reorder-ghost": "",
+              style: {
+                left: reorderDrag.cursorX + 8,
+                top: reorderDrag.cursorY + 8,
+                width: reorderDrag.ghostWidth,
+                height: reorderDrag.ghostHeight,
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: 12
+              },
+              children: reorderDrag.ghostHeader
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-pretable-reorder-drop-indicator": "",
+              style: {
+                left: computeDropIndicatorLeft(
+                  reorderDrag.dropIndex,
+                  columnLefts,
+                  columnWidths
+                ),
+                height: reorderDrag.ghostHeight + bodyViewportHeight
+              }
+            }
+          )
+        ] }) : null
       ]
     }
   );
 }
+function replaceSelectionWithFullRow(grid, rowId, columns) {
+  const firstColumn = columns[0];
+  const lastColumn = columns[columns.length - 1];
+  if (!firstColumn || !lastColumn) {
+    grid.setSelection({ ranges: [], anchor: null });
+    return;
+  }
+  grid.setSelection({
+    ranges: [
+      {
+        startRowId: rowId,
+        endRowId: rowId,
+        startColumnId: firstColumn.id,
+        endColumnId: lastColumn.id
+      }
+    ],
+    anchor: { rowId, columnId: firstColumn.id }
+  });
+}
+function handleCellClick(args) {
+  const {
+    cmd,
+    columnId,
+    columns,
+    grid,
+    onFocusChange,
+    onSelectedRowIdChange,
+    onSelectionChange,
+    rowId,
+    shift
+  } = args;
+  const before = grid.getSnapshot();
+  const addr = { rowId, columnId };
+  if (shift && !cmd && before.selection.anchor) {
+    grid.extendRangeFromAnchor(addr);
+    grid.setFocus(addr);
+  } else if (cmd) {
+    grid.addRange({
+      startRowId: rowId,
+      endRowId: rowId,
+      startColumnId: columnId,
+      endColumnId: columnId
+    });
+    grid.setFocus(addr);
+  } else {
+    grid.setFocus(addr);
+    grid.setSelection({
+      ranges: [
+        {
+          startRowId: rowId,
+          endRowId: rowId,
+          startColumnId: columnId,
+          endColumnId: columnId
+        }
+      ],
+      anchor: addr
+    });
+  }
+  const after = grid.getSnapshot();
+  if (before.focus.rowId !== after.focus.rowId || before.focus.columnId !== after.focus.columnId) {
+    onFocusChange?.(after.focus);
+  }
+  const selectionChanged = JSON.stringify(before.selection) !== JSON.stringify(after.selection);
+  if (selectionChanged) {
+    onSelectionChange?.(after.selection);
+    const dataColumns = columns.filter((c) => c.id !== ROW_SELECT_COLUMN_ID);
+    const beforeFullRow = singleFullRowSelection(before.selection, dataColumns);
+    const afterFullRow = singleFullRowSelection(after.selection, dataColumns);
+    if (beforeFullRow !== afterFullRow) {
+      onSelectedRowIdChange?.(afterFullRow);
+    }
+  }
+}
+function singleFullRowSelection(selection, columns) {
+  if (selection.ranges.length !== 1 || columns.length === 0) {
+    return null;
+  }
+  const range = selection.ranges[0];
+  if (!range) return null;
+  if (range.startRowId !== range.endRowId) return null;
+  const firstColumn = columns[0];
+  const lastColumn = columns[columns.length - 1];
+  if (!firstColumn || !lastColumn) return null;
+  const startMatchesFirst = range.startColumnId === firstColumn.id;
+  const endMatchesLast = range.endColumnId === lastColumn.id;
+  const startMatchesLast = range.startColumnId === lastColumn.id;
+  const endMatchesFirst = range.endColumnId === firstColumn.id;
+  const coversAllColumns = startMatchesFirst && endMatchesLast || startMatchesLast && endMatchesFirst;
+  return coversAllColumns ? range.startRowId : null;
+}
 function getRowMeasurementKey(rowNode) {
   const rowParts = [
     rowNode.getAttribute("class") ?? "",
@@ -1140,6 +2206,281 @@ function getRowMeasurementKey(rowNode) {
 function normalizeStyleSignature(styleValue) {
   return styleValue.split(";").map((declaration) => declaration.trim()).filter(Boolean).filter((declaration) => !/^top\s*:/i.test(declaration)).join(";");
 }
+function computeSelectionExtent(ranges, snapshot, effectiveColumns) {
+  const visibleRows = snapshot.visibleRows;
+  const dataColumns = effectiveColumns.filter(
+    (c) => c.id !== ROW_SELECT_COLUMN_ID
+  );
+  if (ranges.length === 0 || visibleRows.length === 0 || dataColumns.length === 0) {
+    return { rowCount: 0, columnCount: 0, isAll: false };
+  }
+  const rowOrder = /* @__PURE__ */ new Map();
+  for (let i = 0; i < visibleRows.length; i += 1) {
+    const r = visibleRows[i];
+    if (r) rowOrder.set(r.id, i);
+  }
+  const columnOrder = /* @__PURE__ */ new Map();
+  for (let i = 0; i < effectiveColumns.length; i += 1) {
+    const c = effectiveColumns[i];
+    if (c) columnOrder.set(c.id, i);
+  }
+  const coveredRows = /* @__PURE__ */ new Set();
+  const coveredCols = /* @__PURE__ */ new Set();
+  for (const range of ranges) {
+    const r1 = rowOrder.get(range.startRowId);
+    const r2 = rowOrder.get(range.endRowId);
+    if (r1 === void 0 || r2 === void 0) continue;
+    const rowLo = Math.min(r1, r2);
+    const rowHi = Math.max(r1, r2);
+    const startSynth = range.startColumnId === ROW_SELECT_COLUMN_ID;
+    const endSynth = range.endColumnId === ROW_SELECT_COLUMN_ID;
+    let colsForRange;
+    if (startSynth && endSynth) {
+      continue;
+    }
+    if (startSynth || endSynth) {
+      colsForRange = dataColumns.slice();
+    } else {
+      const c1 = columnOrder.get(range.startColumnId);
+      const c2 = columnOrder.get(range.endColumnId);
+      if (c1 === void 0 || c2 === void 0) continue;
+      const colLo = Math.min(c1, c2);
+      const colHi = Math.max(c1, c2);
+      colsForRange = [];
+      for (let i = colLo; i <= colHi; i += 1) {
+        const col = effectiveColumns[i];
+        if (col && col.id !== ROW_SELECT_COLUMN_ID) {
+          colsForRange.push(col);
+        }
+      }
+    }
+    if (colsForRange.length === 0) continue;
+    for (let i = rowLo; i <= rowHi; i += 1) {
+      const row = visibleRows[i];
+      if (row) coveredRows.add(row.id);
+    }
+    for (const col of colsForRange) {
+      coveredCols.add(col.id);
+    }
+  }
+  const rowCount = coveredRows.size;
+  const columnCount = coveredCols.size;
+  const isAll = rowCount === visibleRows.length && columnCount === dataColumns.length;
+  return { rowCount, columnCount, isAll };
+}
+var ARROW_DIRECTIONS = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right"
+};
+function handleSurfaceKeyDown(event, ctx) {
+  const {
+    bodyViewportHeight,
+    columns: allColumns,
+    grid,
+    onSelectedRowIdChange,
+    selectFocusedRowOnArrowKey,
+    tabBehavior
+  } = ctx;
+  const columns = allColumns.filter((c) => c.id !== ROW_SELECT_COLUMN_ID);
+  const { key } = event;
+  const cmd = event.metaKey || event.ctrlKey;
+  const shift = event.shiftKey;
+  const snapshot = grid.getSnapshot();
+  const focus = snapshot.focus;
+  const visibleRows = snapshot.visibleRows;
+  const firstColumn = columns[0];
+  const lastColumn = columns[columns.length - 1];
+  const direction = ARROW_DIRECTIONS[key];
+  if (direction) {
+    grid.moveFocus(direction, {
+      extend: shift,
+      jumpToEdge: cmd
+    });
+    const after = grid.getSnapshot();
+    if (after.focus.columnId === ROW_SELECT_COLUMN_ID && firstColumn) {
+      const rowId = after.focus.rowId;
+      if (rowId) {
+        grid.setFocus({ rowId, columnId: firstColumn.id });
+      }
+    }
+    if (selectFocusedRowOnArrowKey) {
+      const nextFocus = grid.getSnapshot().focus;
+      if (nextFocus.rowId) {
+        replaceSelectionWithFullRow(grid, nextFocus.rowId, columns);
+        onSelectedRowIdChange?.(nextFocus.rowId);
+      }
+    }
+    return true;
+  }
+  if (key === "Home") {
+    if (!firstColumn) return false;
+    if (cmd) {
+      const firstRow = visibleRows[0];
+      if (!firstRow) return false;
+      grid.setFocus({ rowId: firstRow.id, columnId: firstColumn.id });
+    } else if (focus.rowId) {
+      grid.setFocus({ rowId: focus.rowId, columnId: firstColumn.id });
+    } else {
+      const firstRow = visibleRows[0];
+      if (!firstRow) return false;
+      grid.setFocus({ rowId: firstRow.id, columnId: firstColumn.id });
+    }
+    return true;
+  }
+  if (key === "End") {
+    if (!lastColumn) return false;
+    if (cmd) {
+      const lastRow = visibleRows[visibleRows.length - 1];
+      if (!lastRow) return false;
+      grid.setFocus({ rowId: lastRow.id, columnId: lastColumn.id });
+    } else if (focus.rowId) {
+      grid.setFocus({ rowId: focus.rowId, columnId: lastColumn.id });
+    } else {
+      const firstRow = visibleRows[0];
+      if (!firstRow) return false;
+      grid.setFocus({ rowId: firstRow.id, columnId: lastColumn.id });
+    }
+    return true;
+  }
+  if (key === "PageUp" || key === "PageDown") {
+    if (visibleRows.length === 0 || !firstColumn) return false;
+    const pageRowCount = Math.max(1, Math.floor(bodyViewportHeight / 32));
+    const currentRowIdx = focus.rowId ? visibleRows.findIndex((r) => r.id === focus.rowId) : -1;
+    const baseRowIdx = currentRowIdx === -1 ? 0 : currentRowIdx;
+    const nextRowIdx = key === "PageUp" ? Math.max(0, baseRowIdx - pageRowCount) : Math.min(visibleRows.length - 1, baseRowIdx + pageRowCount);
+    const nextRow = visibleRows[nextRowIdx];
+    if (!nextRow) return false;
+    const columnId = focus.columnId ?? firstColumn.id;
+    const addr = { rowId: nextRow.id, columnId };
+    if (shift) {
+      if (!snapshot.selection.anchor && focus.rowId && focus.columnId) {
+        grid.setSelection({
+          ranges: [
+            {
+              startRowId: focus.rowId,
+              endRowId: focus.rowId,
+              startColumnId: focus.columnId,
+              endColumnId: focus.columnId
+            }
+          ],
+          anchor: { rowId: focus.rowId, columnId: focus.columnId }
+        });
+      }
+      grid.setFocus(addr);
+      grid.extendRangeFromAnchor(addr);
+    } else {
+      grid.setFocus(addr);
+    }
+    return true;
+  }
+  if (key === "Tab") {
+    if (tabBehavior === "exit") {
+      return false;
+    }
+    if (visibleRows.length === 0 || columns.length === 0) return false;
+    const currentRowIdx = focus.rowId ? visibleRows.findIndex((r) => r.id === focus.rowId) : -1;
+    const currentColIdx = focus.columnId ? columns.findIndex((c) => c.id === focus.columnId) : -1;
+    const baseRowIdx = currentRowIdx === -1 ? 0 : currentRowIdx;
+    const baseColIdx = currentColIdx === -1 ? 0 : currentColIdx;
+    let nextRowIdx = baseRowIdx;
+    let nextColIdx = baseColIdx;
+    if (shift) {
+      if (baseColIdx === 0) {
+        nextColIdx = columns.length - 1;
+        nextRowIdx = Math.max(0, baseRowIdx - 1);
+        if (baseRowIdx === 0) {
+          nextColIdx = 0;
+          nextRowIdx = 0;
+        }
+      } else {
+        nextColIdx = baseColIdx - 1;
+      }
+    } else {
+      if (baseColIdx === columns.length - 1) {
+        nextColIdx = 0;
+        nextRowIdx = Math.min(visibleRows.length - 1, baseRowIdx + 1);
+        if (baseRowIdx === visibleRows.length - 1) {
+          nextColIdx = columns.length - 1;
+          nextRowIdx = visibleRows.length - 1;
+        }
+      } else {
+        nextColIdx = baseColIdx + 1;
+      }
+    }
+    const nextRow = visibleRows[nextRowIdx];
+    const nextCol = columns[nextColIdx];
+    if (!nextRow || !nextCol) return false;
+    grid.setFocus({ rowId: nextRow.id, columnId: nextCol.id });
+    return true;
+  }
+  if (cmd && (key === "a" || key === "A")) {
+    grid.selectAll();
+    return true;
+  }
+  if (key === "Escape" || key === "Esc") {
+    grid.clearSelection();
+    return true;
+  }
+  if (key === "Enter" || key === " " || key === "Space") {
+    const focusedRowId = focus.rowId;
+    if (focusedRowId) {
+      replaceSelectionWithFullRow(grid, focusedRowId, columns);
+      onSelectedRowIdChange?.(focusedRowId);
+      return true;
+    }
+    return false;
+  }
+  return false;
+}
+function buildWidthsMap(grid) {
+  const result = {};
+  for (const col of grid.options.columns) {
+    if (col.id === ROW_SELECT_COLUMN_ID) continue;
+    if (typeof col.widthPx === "number") {
+      result[col.id] = col.widthPx;
+    }
+  }
+  return result;
+}
+function buildPinnedMap(grid) {
+  const result = {};
+  for (const col of grid.options.columns) {
+    if (col.id === ROW_SELECT_COLUMN_ID) continue;
+    result[col.id] = col.pinned === "left" ? "left" : null;
+  }
+  return result;
+}
+function pinnedMapsEqual(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const k of aKeys) {
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+function computeDropIndex(cursorX, columnCount, columnLefts, columnWidths, surfaceLeft) {
+  const x = cursorX - surfaceLeft;
+  for (let i = 0; i < columnCount; i += 1) {
+    const left = columnLefts[i] ?? 0;
+    const width = columnWidths[i] ?? 0;
+    const mid = left + width / 2;
+    if (x < mid) {
+      return i;
+    }
+  }
+  return Math.max(0, columnCount - 1);
+}
+function computeDropIndicatorLeft(dropIndex, columnLefts, columnWidths) {
+  if (dropIndex >= columnLefts.length) {
+    const lastIdx = columnLefts.length - 1;
+    if (lastIdx < 0) return 0;
+    return (columnLefts[lastIdx] ?? 0) + (columnWidths[lastIdx] ?? 0);
+  }
+  return columnLefts[dropIndex] ?? 0;
+}
 var VIEWPORT_HEIGHT = 320;
 var BENCHMARK_VIEWPORT_STYLE = {
   contain: "none",
@@ -1151,7 +2492,16 @@ var BENCHMARK_VIEWPORT_STYLE = {
 function Pretable({
   columns,
   getRowId,
-  rows
+  rows,
+  rowSelectionColumn,
+  tabBehavior,
+  copyWithHeaders,
+  onCopy,
+  copyToClipboard,
+  messages,
+  onColumnWidthsChange,
+  onColumnOrderChange,
+  onColumnPinnedChange
 }) {
   const resolvedGetRowId = getRowId ?? ((row, index) => {
     const candidate = row.id;
@@ -1235,6 +2585,15 @@ function Pretable({
               )
             ] }),
             rows,
+            rowSelectionColumn,
+            tabBehavior,
+            copyWithHeaders,
+            onCopy,
+            copyToClipboard,
+            messages,
+            onColumnWidthsChange,
+            onColumnOrderChange,
+            onColumnPinnedChange,
             viewportStyle: BENCHMARK_VIEWPORT_STYLE,
             viewportHeight: VIEWPORT_HEIGHT
           }
@@ -1254,7 +2613,7 @@ var inspectionColumns = [
     id: "tags",
     header: "Tags",
     widthPx: 200,
-    getValue: (row) => row.tags.join(", ")
+    value: (row) => row.tags.join(", ")
   },
   { id: "message", header: "Message", wrap: true, widthPx: 480 }
 ];
@@ -1267,22 +2626,33 @@ function LabeledGridSurface({
   getHeaderCellProps,
   getRowId,
   headerCellClassName,
-  interactionState,
+  state,
   labelClassName,
   overscan,
   onSelectedRowIdChange,
+  onSelectionChange,
+  onFocusChange,
   onSortChange,
+  onColumnWidthsChange,
+  onColumnOrderChange,
+  onColumnPinnedChange,
   onTelemetryChange,
   pinnedClassName,
   rowClassName,
   rows,
+  rowSelectionColumn,
   selectFocusedRowOnArrowKey,
+  tabBehavior,
+  copyWithHeaders,
+  onCopy,
+  copyToClipboard,
+  messages,
   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)
+    Object.entries(state?.filters ?? {}).filter(([, value]) => value.trim() !== "").map(([columnId]) => columnId)
   );
   const getFormattedValue = ({
     column,
@@ -1314,10 +2684,15 @@ function LabeledGridSurface({
       ),
       getRowClassName: () => rowClassName,
       getRowId,
-      interactionState,
+      state,
       overscan,
       onSelectedRowIdChange,
+      onSelectionChange,
+      onFocusChange,
       onSortChange,
+      onColumnWidthsChange,
+      onColumnOrderChange,
+      onColumnPinnedChange,
       onTelemetryChange,
       renderBodyCell: ({ column, row, value }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClassName, children: column.header ?? column.id }),
@@ -1332,7 +2707,13 @@ function LabeledGridSurface({
         sortDirection ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sort-indicator", children: sortDirection === "desc" ? "\u25BC" : "\u25B2" }) : null
       ] }),
       rows,
+      rowSelectionColumn,
       selectFocusedRowOnArrowKey,
+      tabBehavior,
+      copyWithHeaders,
+      onCopy,
+      copyToClipboard,
+      messages,
       viewportHeight
     }
   );
@@ -1369,12 +2750,23 @@ var filterableHeaderProps = {
 function InspectionGrid({
   ariaLabel,
   filterableColumnIds,
-  interactionState,
+  state,
   onSelectedRowIdChange,
+  onSelectionChange,
+  onFocusChange,
   onSortChange,
+  onColumnWidthsChange,
+  onColumnOrderChange,
+  onColumnPinnedChange,
   onTelemetryChange,
   overscan,
   rows,
+  rowSelectionColumn,
+  tabBehavior,
+  copyWithHeaders,
+  onCopy,
+  copyToClipboard,
+  messages,
   viewportHeight
 }) {
   const filterableColumns = new Set(filterableColumnIds);
@@ -1389,16 +2781,27 @@ function InspectionGrid({
       getHeaderCellProps: ({ column }) => filterableColumns.has(column.id) ? filterableHeaderProps : void 0,
       getRowId: getInspectionRowId,
       headerCellClassName: "inspection-header-cell",
-      interactionState,
+      state,
       labelClassName: "inspection-cell-label",
       overscan,
       onSelectedRowIdChange,
+      onSelectionChange,
+      onFocusChange,
       onSortChange,
+      onColumnWidthsChange,
+      onColumnOrderChange,
+      onColumnPinnedChange,
       onTelemetryChange,
       pinnedClassName: "is-pinned",
       rowClassName: "inspection-row",
       rows,
+      rowSelectionColumn,
       selectFocusedRowOnArrowKey: true,
+      tabBehavior,
+      copyWithHeaders,
+      onCopy,
+      copyToClipboard,
+      messages,
       valueClassName: "inspection-cell-value",
       viewportHeight
     }
@@ -1415,7 +2818,9 @@ exports.InspectionGrid = InspectionGrid;
 exports.LabeledGridSurface = LabeledGridSurface;
 exports.Pretable = Pretable;
 exports.PretableSurface = PretableSurface;
-exports.measureRenderedRowHeight = measureRenderedRowHeight;
+exports.defaultCoerceForCopy = defaultCoerceForCopy;
+exports.serializeRangesAsTsv = serializeRangesAsTsv;
 exports.usePretable = usePretable;
-exports.usePretableModel = usePretableModel;
-exports.useResolvedHeights = useResolvedHeights;
+exports.ɵROW_SELECT_COLUMN_ID = ROW_SELECT_COLUMN_ID;
+exports.ɵmeasureRenderedRowHeight = measureRenderedRowHeight;
+exports.ɵuseResolvedHeights = useResolvedHeights;