@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/containers/data-grid/data-grid.js

@@ -0,0 +1,2850 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowDown,
+  ArrowDownToLine,
+  ArrowUp,
+  ArrowUpToLine,
+  BarChart3,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  CircleAlert,
+  Copy,
+  GripVertical,
+  PinOff
+} from "lucide-react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Chip } from "../../atoms/chip/chip.js";
+import { formatCurrency, formatNumber } from "../../charts/core/format.js";
+import { Sparkline } from "../../charts/sparkline/sparkline.js";
+import { cn } from "../../utils/cn.js";
+import { computePinOffsets, sanitizePinned } from "../table/pin.js";
+import { rangeToChart } from "./chart-range.js";
+import { buildHeaderGroups, groupPathOf } from "./column-groups.js";
+import { ColumnMenu } from "./column-menu.js";
+import {
+  copyFill,
+  edgeScrollStep,
+  fillLanes,
+  handleExtent,
+  isBackward,
+  seriesFill
+} from "./fill-series.js";
+import {
+  applyAdvancedFilter,
+  countConditions,
+  emptyGroup
+} from "./filter-builder.js";
+import { FilterBuilder } from "./filter-builder-editor.js";
+import { cellAddress, columnLabel, isFormulaText, shiftFormula } from "./formula.js";
+import { FormulaBar } from "./formula-bar.js";
+import { buildSheet, displayValue, isErrorText } from "./formula-sheet.js";
+import {
+  parseLooseNumber,
+  parseTSV,
+  planFill,
+  planPaste,
+  sameCellValue
+} from "./grid-edit.js";
+import { GridToolbar } from "./grid-toolbar.js";
+import {
+  commandSize,
+  createHistory,
+  DEFAULT_HISTORY_DEPTH,
+  pushCommand,
+  redoCommand,
+  setHistoryDepth,
+  summarizeHistory,
+  undoCommand
+} from "./history.js";
+import { DEFAULT_DATA_GRID_LABELS } from "./labels.js";
+import {
+  aggregateValues,
+  buildDisplayRows,
+  columnAlign,
+  computeAggregates,
+  countActiveFilters,
+  distinctValues,
+  fillColumnWidths,
+  filterRows,
+  formatAggregate,
+  formatCellValue,
+  getCellValue,
+  rangeBetween,
+  sortRows,
+  toCSV,
+  toggleSort
+} from "./model.js";
+import {
+  buildPivot,
+  isPivotValid,
+  pivotColumns,
+  pivotFooter
+} from "./pivot.js";
+import {
+  extendRange,
+  inRange,
+  rangeBounds,
+  rangeStats,
+  rangeToTSV
+} from "./range.js";
+import {
+  insertDetailRows,
+  moveRowBy,
+  moveRowTo,
+  NO_PINNED_ROWS,
+  pinnedSideOf,
+  splitPinnedRows,
+  togglePinnedRow,
+  toggleSetMember
+} from "./rows.js";
+import { EMPTY_PIVOT, GridToolPanel } from "./tool-panel.js";
+import { buildTreeRows, withAncestors } from "./tree.js";
+import { useDataSource } from "./use-data-source.js";
+import { useGridLayout } from "./use-grid-layout.js";
+import {
+  computeVariableWindow,
+  computeVirtualWindow,
+  pageCount,
+  pageStep,
+  scrollLeftToReveal,
+  scrollTopToRevealSpan
+} from "./virtual.js";
+import { gridToSheet, xlsxFilename } from "./xlsx-export.js";
+const ChartPanel = lazy(
+  () => import("./chart-panel.js").then((module) => ({ default: module.ChartPanel }))
+);
+const ROW_HEIGHT = { compact: 32, normal: 40, comfortable: 48 };
+const SELECT_ID = "__select";
+const SELECT_WIDTH = 44;
+const TOOLS_ID = "__tools";
+const TOOL_SLOT = 26;
+const GROUP_HEADER_HEIGHT = 32;
+const DEFAULT_DETAIL_HEIGHT = 240;
+const DEFAULT_BLOCK_SIZE = 50;
+const EMPTY_DATA = [];
+const SKELETON_ROWS = 8;
+const EMPTY_SORT = [];
+const EMPTY_FILTERS = {};
+const EMPTY_LIST = [];
+const EMPTY_ADVANCED = emptyGroup("and", "root");
+function idOfColumn(entry) {
+  if (entry.kind === "select") return SELECT_ID;
+  return entry.kind === "tools" ? TOOLS_ID : entry.column.id;
+}
+function useControllable(value, initial, onChange) {
+  const [internal, setInternal] = useState(initial);
+  const controlled = value !== void 0;
+  const set = useCallback(
+    (next) => {
+      if (!controlled) setInternal(next);
+      onChange?.(next);
+    },
+    [controlled, onChange]
+  );
+  return [controlled ? value : internal, set];
+}
+function downloadCSV(filename, csv) {
+  downloadFile(filename, csv, "text/csv;charset=utf-8");
+}
+function downloadFile(filename, data, type) {
+  if (typeof document === "undefined") return;
+  const url = URL.createObjectURL(new Blob([data], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+const ARROW_STEPS = {
+  ArrowUp: { dr: -1, dc: 0 },
+  ArrowDown: { dr: 1, dc: 0 },
+  ArrowLeft: { dr: 0, dc: -1 },
+  ArrowRight: { dr: 0, dc: 1 }
+};
+function writeClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    navigator.clipboard.writeText(text).catch(() => void 0);
+    return;
+  }
+  if (typeof document === "undefined") return;
+  const area = document.createElement("textarea");
+  area.value = text;
+  area.style.position = "fixed";
+  area.style.opacity = "0";
+  document.body.append(area);
+  area.select();
+  try {
+    document.execCommand("copy");
+  } finally {
+    area.remove();
+  }
+}
+function editorOf(column) {
+  if (column.editor) return column.editor;
+  if (column.options?.length) return "select";
+  return column.type === "number" || column.type === "currency" ? "number" : "text";
+}
+function canEdit(column, row) {
+  return typeof column.editable === "function" ? column.editable(row) : column.editable === true;
+}
+const alignClass = { start: "text-left", center: "text-center", end: "text-right" };
+const justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+function DataGrid({
+  data: dataProp = EMPTY_DATA,
+  columns: columnsProp,
+  "aria-label": ariaLabel,
+  getRowId: getRowIdProp,
+  height = 480,
+  pageSize: pageSizeProp,
+  pageSizeOptions = [25, 50, 100],
+  storageKey,
+  sort: sortProp,
+  defaultSort = EMPTY_SORT,
+  onSortChange,
+  filters: filtersProp,
+  defaultFilters = EMPTY_FILTERS,
+  onFiltersChange,
+  groupBy: groupByProp,
+  defaultGroupBy = EMPTY_LIST,
+  onGroupByChange,
+  defaultPinned,
+  defaultHidden,
+  density: densityProp,
+  defaultDensity = "normal",
+  onDensityChange,
+  selectable = false,
+  selectedRowIds,
+  defaultSelectedRowIds = EMPTY_LIST,
+  onSelectionChange,
+  onCellChange,
+  onCellsChange,
+  formulas = false,
+  history: historyEnabled = false,
+  historyDepth = DEFAULT_HISTORY_DEPTH,
+  onHistoryChange,
+  createRow,
+  onRowsChange,
+  dataSource,
+  maxBlocks,
+  tree,
+  expandedRowIds,
+  defaultExpandedRowIds = EMPTY_LIST,
+  onExpandedRowsChange,
+  renderDetail,
+  detailHeight = DEFAULT_DETAIL_HEIGHT,
+  rowPinning = false,
+  pinnedRows,
+  defaultPinnedRows = NO_PINNED_ROWS,
+  onPinnedRowsChange,
+  rowReorder = false,
+  onRowReorder,
+  rangeSelection: rangeSelectionProp = false,
+  fillSeries: fillSeriesOptions,
+  charts = false,
+  advancedFilter: advancedFilterProp,
+  defaultAdvancedFilter = EMPTY_ADVANCED,
+  onAdvancedFilterChange,
+  showAdvancedFilter = false,
+  toolPanel = false,
+  defaultToolPanelOpen = false,
+  pivot: pivotProp,
+  defaultPivot = EMPTY_PIVOT,
+  onPivotChange,
+  loading = false,
+  emptyMessage,
+  showFooter,
+  hideToolbar = false,
+  exportFilename = "datos.csv",
+  onExport,
+  exportXlsx = false,
+  onExportXlsx,
+  toolbarActions,
+  labels: labelsProp,
+  className
+}) {
+  const labels = useMemo(() => ({ ...DEFAULT_DATA_GRID_LABELS, ...labelsProp }), [labelsProp]);
+  const helpId = useId();
+  const scrollerRef = useRef(null);
+  const gridRef = useRef(null);
+  const [sort, setSortState] = useControllable(
+    sortProp,
+    defaultSort,
+    onSortChange && ((next) => onSortChange([...next]))
+  );
+  const [filters, setFiltersState] = useControllable(
+    filtersProp,
+    defaultFilters,
+    onFiltersChange
+  );
+  const [groupBy, setGroupByState] = useControllable(
+    groupByProp,
+    defaultGroupBy,
+    onGroupByChange && ((next) => onGroupByChange([...next]))
+  );
+  const [selection, setSelection] = useControllable(
+    selectedRowIds,
+    defaultSelectedRowIds,
+    onSelectionChange && ((next) => onSelectionChange([...next]))
+  );
+  const [expanded, setExpanded] = useControllable(
+    expandedRowIds,
+    defaultExpandedRowIds,
+    onExpandedRowsChange && ((next) => onExpandedRowsChange([...next]))
+  );
+  const [pinnedRowIds, setPinnedRowIds] = useControllable(
+    pinnedRows,
+    defaultPinnedRows,
+    onPinnedRowsChange
+  );
+  const [advanced, setAdvanced] = useControllable(
+    advancedFilterProp,
+    defaultAdvancedFilter,
+    onAdvancedFilterChange
+  );
+  const [pivotConfig, setPivotConfig] = useControllable(
+    pivotProp,
+    defaultPivot,
+    onPivotChange
+  );
+  const [search, setSearch] = useState("");
+  const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(pageSizeProp ?? 25);
+  const [active, setActive] = useState({ r: 0, c: 0 });
+  const [menuColumn, setMenuColumn] = useState(null);
+  const [editing, setEditing] = useState(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrolled, setScrolled] = useState({ start: false, end: false });
+  const [dropTarget, setDropTarget] = useState(
+    null
+  );
+  const [dropRow, setDropRow] = useState(null);
+  const [cellRange, setCellRange] = useState(null);
+  const rangeB = cellRange ? rangeBounds(cellRange) : null;
+  const [fillPreview, setFillPreview] = useState(null);
+  const [panelOpen, setPanelOpen] = useState(defaultToolPanelOpen);
+  const [announcement, setAnnouncement] = useState("");
+  const editingRef = useRef(editing);
+  editingRef.current = editing;
+  const pendingFocus = useRef(false);
+  const anchor = useRef(null);
+  const resizing = useRef(false);
+  const dragId = useRef(null);
+  const rowDrag = useRef(null);
+  const rangeSelection = rangeSelectionProp || charts;
+  const [chart, setChart] = useState(null);
+  const paged = pageSizeProp !== void 0;
+  const sourceActive = dataSource !== void 0;
+  const pivotResult = useMemo(
+    () => !sourceActive && isPivotValid(pivotConfig, columnsProp) ? buildPivot(dataProp, columnsProp, pivotConfig) : null,
+    [sourceActive, pivotConfig, columnsProp, dataProp]
+  );
+  const pivotActive = pivotResult !== null;
+  const structured = !sourceActive && !pivotActive;
+  const formulasOn = formulas && structured;
+  const formulaCache = useRef(/* @__PURE__ */ new Map());
+  const sheet = useMemo(
+    () => formulasOn && columnsProp.length > 0 ? buildSheet({
+      rows: dataProp.length,
+      cols: columnsProp.length,
+      read: (r, c) => getCellValue(dataProp[r], columnsProp[c]),
+      cache: formulaCache.current
+    }) : null,
+    [formulasOn, dataProp, columnsProp]
+  );
+  const sourceIndex = useMemo(() => {
+    if (!sheet) return null;
+    const rows = /* @__PURE__ */ new Map();
+    dataProp.forEach((row, index) => {
+      rows.set(row, index);
+    });
+    const cols = new Map(columnsProp.map((column, index) => [column.id, index]));
+    return { rows, cols };
+  }, [sheet, dataProp, columnsProp]);
+  const columns = useMemo(() => {
+    if (pivotResult) {
+      return pivotColumns(
+        columnsProp,
+        pivotConfig,
+        pivotResult,
+        labels.total
+      );
+    }
+    if (!sheet || !sourceIndex) return columnsProp;
+    return columnsProp.map((column, c) => ({
+      ...column,
+      accessor: (row) => {
+        const r = sourceIndex.rows.get(row);
+        const shown = r === void 0 ? void 0 : displayValue(sheet, r, c);
+        return shown === void 0 ? getCellValue(row, column) : shown;
+      }
+    }));
+  }, [pivotResult, columnsProp, pivotConfig, labels.total, sheet, sourceIndex]);
+  const data = useMemo(
+    () => pivotResult ? pivotResult.rows : dataProp,
+    [pivotResult, dataProp]
+  );
+  const getRowId = useMemo(
+    () => pivotResult ? (row) => row.id : getRowIdProp,
+    [pivotResult, getRowIdProp]
+  );
+  const layoutDefaults = useMemo(
+    () => ({ pinned: defaultPinned, hidden: defaultHidden, density: defaultDensity }),
+    [defaultPinned, defaultHidden, defaultDensity]
+  );
+  const grid = useGridLayout(columns, layoutDefaults, pivotActive ? void 0 : storageKey);
+  const { layout } = grid;
+  const density = densityProp ?? layout.density ?? defaultDensity;
+  const rowHeight = ROW_HEIGHT[density];
+  const headerHeight = Math.max(rowHeight, 36);
+  const firstRow = Math.floor(scrollTop / rowHeight);
+  const byId = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+  const { dataColumns, zoneOf, pinned } = useMemo(() => {
+    const visible = layout.order.filter((id) => byId.has(id) && !layout.hidden.includes(id));
+    const pins = sanitizePinned(layout.pinned, visible);
+    const left = visible.filter((id) => pins.left.includes(id));
+    const right = visible.filter((id) => pins.right.includes(id));
+    const center = visible.filter((id) => !left.includes(id) && !right.includes(id));
+    const zones = /* @__PURE__ */ new Map();
+    for (const id of left) zones.set(id, "left");
+    for (const id of right) zones.set(id, "right");
+    for (const id of center) zones.set(id, "center");
+    return {
+      dataColumns: [...left, ...center, ...right].map((id) => byId.get(id)),
+      zoneOf: zones,
+      pinned: { left, right }
+    };
+  }, [layout.order, layout.hidden, layout.pinned, byId]);
+  const detailEnabled = !!renderDetail && structured && !tree;
+  const reorderEnabled = rowReorder && structured;
+  const pinningEnabled = rowPinning && structured;
+  const toolSlots = (detailEnabled ? 1 : 0) + (reorderEnabled ? 1 : 0) + (pinningEnabled ? 2 : 0);
+  const toolsWidth = toolSlots * TOOL_SLOT + 12;
+  const renderColumns = useMemo(
+    () => [
+      ...selectable ? [{ kind: "select" }] : [],
+      ...toolSlots > 0 ? [{ kind: "tools" }] : [],
+      ...dataColumns.map((column) => ({ kind: "data", column }))
+    ],
+    [selectable, toolSlots, dataColumns]
+  );
+  const leadingCount = renderColumns.length - dataColumns.length;
+  const fillerIndex = renderColumns.length - pinned.right.length;
+  const [containerWidth, setContainerWidth] = useState(0);
+  const reservedWidth = (selectable ? SELECT_WIDTH : 0) + (toolSlots > 0 ? toolsWidth : 0);
+  const shownWidths = useMemo(
+    () => containerWidth > 0 ? fillColumnWidths(dataColumns, layout.widths, containerWidth, reservedWidth) : layout.widths,
+    [containerWidth, dataColumns, layout.widths, reservedWidth]
+  );
+  const widthOf = useCallback(
+    (entry) => entry.kind === "select" ? SELECT_WIDTH : entry.kind === "tools" ? toolsWidth : shownWidths[entry.column.id] ?? 160,
+    [shownWidths, toolsWidth]
+  );
+  const positions = useMemo(() => {
+    const widths = {
+      [SELECT_ID]: SELECT_WIDTH,
+      [TOOLS_ID]: toolsWidth,
+      ...shownWidths
+    };
+    const left = [
+      ...selectable ? [SELECT_ID] : [],
+      ...toolSlots > 0 ? [TOOLS_ID] : [],
+      ...pinned.left
+    ];
+    return computePinOffsets(widths, { left, right: pinned.right });
+  }, [shownWidths, pinned, selectable, toolSlots, toolsWidth]);
+  const totalWidth = renderColumns.reduce((sum, entry) => sum + widthOf(entry), 0);
+  const headerLevels = useMemo(() => {
+    const paths = dataColumns.map((column) => groupPathOf(column));
+    const breaks = dataColumns.map(
+      (column, index) => index > 0 && zoneOf.get(column.id) !== zoneOf.get(dataColumns[index - 1]?.id ?? "") ? index : -1
+    ).filter((index) => index >= 0);
+    return buildHeaderGroups(paths, breaks);
+  }, [dataColumns, zoneOf]);
+  const groupLevels = headerLevels.length;
+  const headerTop = groupLevels * GROUP_HEADER_HEIGHT;
+  const blockSize = paged ? pageSize : dataSource?.blockSize ?? DEFAULT_BLOCK_SIZE;
+  const remoteRange = paged ? { start: page * pageSize, end: (page + 1) * pageSize } : { start: Math.max(0, firstRow - 8), end: firstRow + Math.ceil(height / rowHeight) + 12 };
+  const remote = useDataSource(dataSource, {
+    sort,
+    filters,
+    search,
+    blockSize,
+    maxBlocks,
+    range: remoteRange
+  });
+  const busy = loading || sourceActive && remote.total === null && !remote.failed;
+  const localKeys = useMemo(() => {
+    const keys = /* @__PURE__ */ new Map();
+    data.forEach((row, index) => {
+      keys.set(row, getRowId ? getRowId(row, index) : String(index));
+    });
+    return keys;
+  }, [data, getRowId]);
+  const rowAt = remote.rowAt;
+  const remoteModel = useMemo(() => {
+    if (!sourceActive) return null;
+    const keys = /* @__PURE__ */ new Map();
+    const byKey = /* @__PURE__ */ new Map();
+    const rows = [];
+    const loaded = [];
+    const total = remote.total ?? 0;
+    for (let index = 0; index < total; index += 1) {
+      const row = rowAt(index);
+      if (row === void 0) {
+        rows.push({ kind: "placeholder", key: `~${index}`, index });
+        continue;
+      }
+      const key = getRowId ? getRowId(row, index) : String(index);
+      keys.set(row, key);
+      byKey.set(key, row);
+      loaded.push(row);
+      rows.push({ kind: "data", key, depth: 0, row });
+    }
+    return { keys, byKey, rows, loaded };
+  }, [sourceActive, remote.total, rowAt, getRowId]);
+  const keyOf = useCallback(
+    (row) => (remoteModel ? remoteModel.keys : localKeys).get(row) ?? "",
+    [remoteModel, localKeys]
+  );
+  const rowByKey = useMemo(
+    () => remoteModel?.byKey ?? new Map(data.map((row) => [keyOf(row), row])),
+    [remoteModel, data, keyOf]
+  );
+  const advancedCount = countConditions(advanced);
+  const filterActive = countActiveFilters(filters) > 0 || search.trim() !== "" || advancedCount > 0;
+  const filtered = useMemo(() => {
+    if (sourceActive) return [];
+    const base = filterRows(data, columns, filters, search);
+    return advancedCount > 0 ? applyAdvancedFilter(base, columns, advanced) : base;
+  }, [sourceActive, data, columns, filters, search, advanced, advancedCount]);
+  const treeOptions = useMemo(
+    () => tree && structured ? { getKey: keyOf, getParentId: tree.getParentId } : null,
+    [tree, structured, keyOf]
+  );
+  const sorted = useMemo(() => {
+    if (remoteModel) return remoteModel.loaded;
+    const rows = treeOptions ? withAncestors(data, filtered, treeOptions) : filtered;
+    return sortRows(rows, columns, sort);
+  }, [remoteModel, treeOptions, data, filtered, columns, sort]);
+  const expandedSet = useMemo(() => new Set(expanded), [expanded]);
+  const treeResult = useMemo(
+    () => treeOptions ? buildTreeRows(sorted, columns, {
+      ...treeOptions,
+      expanded: expandedSet,
+      forceExpand: filterActive
+    }) : null,
+    [treeOptions, sorted, columns, expandedSet, filterActive]
+  );
+  const flat = useMemo(() => {
+    if (remoteModel) return remoteModel.rows;
+    if (treeResult) return treeResult.rows;
+    return buildDisplayRows(
+      sorted,
+      columns,
+      structured ? groupBy : EMPTY_LIST,
+      collapsed,
+      keyOf,
+      sort
+    );
+  }, [remoteModel, treeResult, sorted, columns, structured, groupBy, collapsed, keyOf, sort]);
+  const hasAggregates = columns.some((column) => column.aggregate);
+  const footer = !sourceActive && (showFooter ?? hasAggregates) && !busy && flat.length > 0;
+  const totals = useMemo(() => {
+    if (!footer) return {};
+    if (pivotResult) return pivotFooter(pivotResult);
+    if (treeResult) return computeAggregates(treeResult.leaves, columns);
+    const result = {};
+    for (const column of columns) {
+      if (!column.aggregate) continue;
+      const values = filtered.map((row) => getCellValue(row, column));
+      result[column.id] = aggregateValues(values, column.aggregate);
+    }
+    return result;
+  }, [footer, pivotResult, treeResult, columns, filtered]);
+  const split = useMemo(
+    () => pinningEnabled ? splitPinnedRows(flat, pinnedRowIds) : { top: [], middle: flat, bottom: [] },
+    [pinningEnabled, flat, pinnedRowIds]
+  );
+  const pages = pageCount(split.middle.length, pageSize);
+  const currentPage = Math.min(page, pages - 1);
+  const pageOffset = paged ? currentPage * pageSize : 0;
+  const pageRows = paged ? split.middle.slice(pageOffset, pageOffset + pageSize) : split.middle;
+  const heightOfDetail = useCallback(
+    (row) => typeof detailHeight === "function" ? detailHeight(row) : detailHeight,
+    [detailHeight]
+  );
+  const middle = useMemo(
+    () => detailEnabled ? insertDetailRows(pageRows, expandedSet, heightOfDetail) : pageRows,
+    [detailEnabled, pageRows, expandedSet, heightOfDetail]
+  );
+  const bodyRows = useMemo(
+    () => split.top.length > 0 || split.bottom.length > 0 ? [...split.top, ...middle, ...split.bottom] : middle,
+    [split, middle]
+  );
+  const topCount = split.top.length;
+  const bottomCount = split.bottom.length;
+  const variableHeights = detailEnabled && middle.some((row) => row.kind === "detail");
+  const bodyViewport = Math.max(
+    rowHeight,
+    height - headerHeight - headerTop - (footer ? rowHeight : 0)
+  );
+  const win = useMemo(() => {
+    if (paged) return { start: 0, end: bodyRows.length, offsets: null };
+    if (variableHeights) {
+      return computeVariableWindow({
+        heights: bodyRows.map((row) => row.kind === "detail" ? row.height : rowHeight),
+        viewportHeight: bodyViewport,
+        scrollTop,
+        overscan: 8
+      });
+    }
+    const uniform = computeVirtualWindow({
+      count: bodyRows.length,
+      rowHeight,
+      viewportHeight: bodyViewport,
+      scrollTop: firstRow * rowHeight,
+      overscan: 8
+    });
+    return { start: uniform.start, end: uniform.end, offsets: null };
+  }, [paged, variableHeights, bodyRows, rowHeight, bodyViewport, scrollTop, firstRow]);
+  const bodyLength = bodyRows.length;
+  const midStart = Math.max(win.start, topCount);
+  const midEnd = Math.max(midStart, Math.min(win.end, bodyLength - bottomCount));
+  const offsetOf = (index) => win.offsets ? win.offsets[index] ?? 0 : index * rowHeight;
+  const gapTop = offsetOf(midStart) - offsetOf(topCount);
+  const gapBottom = offsetOf(bodyLength - bottomCount) - offsetOf(midEnd);
+  const isRendered = (index) => index < topCount || index >= bodyLength - bottomCount || index >= win.start && index < win.end;
+  const selected = useMemo(() => new Set(selection), [selection]);
+  const visibleKeys = useMemo(
+    () => flat.filter((row) => row.kind === "data").map((row) => row.key),
+    [flat]
+  );
+  const allKeys = useMemo(() => sorted.map(keyOf), [sorted, keyOf]);
+  const selectedInView = allKeys.filter((key) => selected.has(key)).length;
+  const pivotValid = isPivotValid(pivotConfig, columnsProp);
+  const reorderAllowed = reorderEnabled && sort.length === 0 && groupBy.length === 0 && !tree && !filterActive;
+  const maxR = busy ? 0 : bodyRows.length;
+  const maxC = renderColumns.length - 1;
+  const activeR = Math.min(active.r, maxR);
+  const activeC = Math.min(active.c, Math.max(0, maxC));
+  const activeRendered = activeR === 0 || isRendered(activeR - 1);
+  const tabbable = activeRendered ? { r: activeR, c: activeC } : { r: 0, c: activeC };
+  const syncScroll = useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    setScrollTop(Math.floor(scroller.scrollTop / rowHeight) * rowHeight);
+    const start = scroller.scrollLeft > 0;
+    const end = scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1;
+    setScrolled(
+      (previous) => previous.start === start && previous.end === end ? previous : { start, end }
+    );
+  }, [rowHeight]);
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    const measure = () => {
+      syncScroll();
+      if (scroller) setContainerWidth(scroller.clientWidth);
+    };
+    measure();
+    if (!scroller || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [syncScroll]);
+  useLayoutEffect(() => {
+    if (!pendingFocus.current) return;
+    pendingFocus.current = false;
+    const cell = [
+      ...gridRef.current?.querySelectorAll(`[data-r="${tabbable.r}"]`) ?? []
+    ].find((node) => {
+      const start = Number(node.dataset.c);
+      const end = Number(node.dataset.cEnd ?? start);
+      return tabbable.c >= start && tabbable.c <= end;
+    });
+    cell?.focus({ preventScroll: !paged });
+  });
+  const reveal = useCallback(
+    (r, c) => {
+      const scroller = scrollerRef.current;
+      if (!scroller) return;
+      const index = r - 1;
+      if (!paged && r > 0 && index >= topCount && index < bodyLength - bottomCount) {
+        const item = bodyRows[index];
+        const top = scrollTopToRevealSpan(
+          win.offsets ? win.offsets[index] ?? 0 : index * rowHeight,
+          item?.kind === "detail" ? item.height : rowHeight,
+          bodyViewport,
+          scroller.scrollTop,
+          topCount * rowHeight,
+          bottomCount * rowHeight
+        );
+        if (top !== scroller.scrollTop) {
+          scroller.scrollTop = top;
+          setScrollTop(Math.floor(top / rowHeight) * rowHeight);
+        }
+      }
+      const entry = renderColumns[c];
+      if (!entry || positions[idOfColumn(entry)]) return;
+      let left = 0;
+      for (let i = 0; i < c; i += 1) left += widthOf(renderColumns[i]);
+      const pinnedLeft = renderColumns.filter((x) => positions[idOfColumn(x)]?.side === "left").reduce((sum, x) => sum + widthOf(x), 0);
+      const pinnedRight = renderColumns.filter((x) => positions[idOfColumn(x)]?.side === "right").reduce((sum, x) => sum + widthOf(x), 0);
+      scroller.scrollLeft = scrollLeftToReveal(
+        left,
+        widthOf(entry),
+        scroller.clientWidth,
+        scroller.scrollLeft,
+        pinnedLeft,
+        pinnedRight
+      );
+    },
+    [
+      paged,
+      rowHeight,
+      bodyViewport,
+      renderColumns,
+      positions,
+      widthOf,
+      bodyRows,
+      topCount,
+      bottomCount,
+      bodyLength,
+      win.offsets
+    ]
+  );
+  const focusCell = useCallback(
+    (r, c, focus = true) => {
+      const next = { r: Math.max(0, Math.min(maxR, r)), c: Math.max(0, Math.min(maxC, c)) };
+      reveal(next.r, next.c);
+      pendingFocus.current = focus;
+      setActive(next);
+    },
+    [maxR, maxC, reveal]
+  );
+  const resetPage = () => setPage(0);
+  const applySort = (next) => {
+    setSortState(next);
+    resetPage();
+  };
+  const setFilter = (id, filter) => {
+    const next = { ...filters };
+    if (filter) next[id] = filter;
+    else delete next[id];
+    setFiltersState(next);
+    resetPage();
+  };
+  const setGroup = (id, on) => {
+    setGroupByState(
+      on ? [...groupBy.filter((x) => x !== id), id] : groupBy.filter((x) => x !== id)
+    );
+    resetPage();
+  };
+  const setDensity = (next) => {
+    grid.setDensity(next);
+    onDensityChange?.(next);
+  };
+  const toggleGroupRow = (key) => {
+    setCollapsed((previous) => {
+      const next = new Set(previous);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const toggleRow = (key, range) => {
+    const willSelect = !selected.has(key);
+    const keys = range ? rangeBetween(visibleKeys, anchor.current, key) : [key];
+    const next = new Set(selected);
+    for (const k of keys) {
+      if (willSelect) next.add(k);
+      else next.delete(k);
+    }
+    anchor.current = key;
+    setSelection([...next]);
+  };
+  const toggleAll = () => {
+    const next = new Set(selected);
+    const everything = allKeys.length > 0 && selectedInView === allKeys.length;
+    for (const key of allKeys) {
+      if (everything) next.delete(key);
+      else next.add(key);
+    }
+    setSelection([...next]);
+  };
+  const neighbourOf = (id, delta) => {
+    const index = dataColumns.findIndex((column) => column.id === id);
+    const neighbour = dataColumns[index + delta];
+    return neighbour && zoneOf.get(neighbour.id) === zoneOf.get(id) ? neighbour.id : null;
+  };
+  const moveColumn = (id, delta) => {
+    const neighbour = neighbourOf(id, delta);
+    if (!neighbour) return false;
+    grid.moveTo(id, neighbour, delta < 0 ? "before" : "after");
+    return true;
+  };
+  const exportCsv = () => {
+    if (exportFilename === false) return;
+    const rows = selectable && selection.length > 0 ? sorted.filter((row) => selected.has(keyOf(row))) : sorted;
+    const csv = toCSV(rows, dataColumns, { bom: true });
+    onExport?.({ csv, filename: exportFilename, rowCount: rows.length });
+    downloadCSV(exportFilename, csv);
+  };
+  const xlsxName = exportXlsx === true ? "datos.xlsx" : exportXlsx || null;
+  const exportToXlsx = async () => {
+    if (!xlsxName) return;
+    const rows = selectable && selection.length > 0 ? sorted.filter((row) => selected.has(keyOf(row))) : sorted;
+    const filename = xlsxFilename(xlsxName);
+    const { buildXlsx, XLSX_MIME } = await import("../../xlsx/index.js");
+    const bytes = buildXlsx({
+      sheets: [gridToSheet(rows, dataColumns, filename.replace(/\.xlsx$/i, ""))],
+      creator: "@jcsoftdev/ui"
+    });
+    onExportXlsx?.({ bytes, filename, rowCount: rows.length });
+    downloadFile(filename, bytes, XLSX_MIME);
+  };
+  const labelOfRow = (key) => {
+    const row = rowByKey.get(key);
+    const first = dataColumns[0];
+    return row && first ? formatCellValue(getCellValue(row, first), first) || key : key;
+  };
+  const setExpandedRow = (key, open) => {
+    const isOpen = expandedSet.has(key);
+    if ((open ?? !isOpen) === isOpen) return;
+    setExpanded([...toggleSetMember(expandedSet, key)]);
+  };
+  const pinRow = (key, side) => {
+    setPinnedRowIds(togglePinnedRow(pinnedRowIds, key, side));
+  };
+  const reorderRow = (key, target) => {
+    if (!reorderAllowed) return false;
+    const order = data.map(keyOf);
+    const next = "delta" in target ? moveRowBy(order, key, target.delta) : moveRowTo(order, key, target.id, target.place);
+    const fromIndex = order.indexOf(key);
+    const toIndex = next.indexOf(key);
+    if (fromIndex === -1 || fromIndex === toIndex) return false;
+    onRowReorder?.({ rowId: key, fromIndex, toIndex, order: next });
+    setAnnouncement(labels.rowMoved(labelOfRow(key), toIndex + 1, order.length));
+    return true;
+  };
+  const cellAt = (r, c) => {
+    const row = bodyRows[r - 1];
+    const entry = renderColumns[c];
+    return row?.kind === "data" && entry?.kind === "data" ? { row: row.row, column: entry.column } : null;
+  };
+  const copyRange = () => {
+    if (!cellRange) return;
+    const bounds = rangeBounds(cellRange);
+    const text = rangeToTSV(bounds, (r, c) => {
+      const cell = cellAt(r, c);
+      return cell ? formatCellValue(getCellValue(cell.row, cell.column), cell.column) : null;
+    });
+    writeClipboard(text);
+    const cells = (bounds.r1 - bounds.r0 + 1) * (bounds.c1 - bounds.c0 + 1);
+    setAnnouncement(labels.rangeCopied(cells));
+  };
+  const openChart = () => {
+    if (!cellRange) return;
+    const bounds = rangeBounds(cellRange);
+    const headers = [];
+    const columnIds = [];
+    for (let c = bounds.c0; c <= bounds.c1; c += 1) {
+      const entry = renderColumns[c];
+      headers.push(entry?.kind === "data" ? entry.column.header : "");
+      columnIds.push(entry ? idOfColumn(entry) : String(c));
+    }
+    const cells = [];
+    for (let r = bounds.r0; r <= bounds.r1; r += 1) {
+      const line = [];
+      for (let c = bounds.c0; c <= bounds.c1; c += 1) {
+        const cell = cellAt(r, c);
+        line.push(
+          cell ? {
+            value: getCellValue(cell.row, cell.column),
+            text: formatCellValue(getCellValue(cell.row, cell.column), cell.column)
+          } : null
+        );
+      }
+      cells.push(line);
+    }
+    const data2 = rangeToChart({ headers, columnIds, cells, rowLabel: labels.chartRow });
+    const currency = !!data2 && data2.series.length > 0 && data2.series.every((series) => byId.get(series.id)?.type === "currency");
+    setChart({
+      data: data2,
+      kind: "bar",
+      cells: (bounds.r1 - bounds.r0 + 1) * (bounds.c1 - bounds.c0 + 1),
+      currency
+    });
+    setAnnouncement(data2 ? labels.chartTitle(rangeCellCount) : labels.chartNoData);
+  };
+  const onCellPointerDown = (event, r, c) => {
+    if (!rangeSelection || event.button !== 0 || editingRef.current || event.pointerType === "touch")
+      return;
+    if (event.target.closest("button,input,select,a,textarea,[data-detail-content]"))
+      return;
+    if (event.shiftKey && cellRange) {
+      setCellRange({ anchor: cellRange.anchor, focus: { r, c } });
+      return;
+    }
+    setCellRange({ anchor: { r, c }, focus: { r, c } });
+    const move = (moveEvent) => {
+      const cell = document.elementFromPoint(moveEvent.clientX, moveEvent.clientY)?.closest("td[data-r]");
+      if (!cell || !gridRef.current?.contains(cell)) return;
+      const nextR = Number(cell.dataset.r);
+      const nextC = Number(cell.dataset.c);
+      setCellRange(
+        (previous) => previous && (previous.focus.r !== nextR || previous.focus.c !== nextC) ? { anchor: previous.anchor, focus: { r: nextR, c: nextC } } : previous
+      );
+    };
+    const end = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+  };
+  const rawValue = (row, column) => getCellValue(row, columnsProp.find((x) => x.id === column.id) ?? column);
+  const coerceDraft = (column, row, draft, loose = false) => {
+    let value = draft;
+    if (formulasOn && isFormulaText(draft)) return { value: draft.trim() };
+    if (editorOf(column) === "number") {
+      const number = loose ? parseLooseNumber(draft) : Number.parseFloat(draft.replace(",", "."));
+      if (number !== null && Number.isFinite(number)) value = number;
+      else return { error: labels.invalidCell };
+    }
+    const error = column.validate?.(value, row);
+    return error ? { error } : { value };
+  };
+  const historyRef = useRef(createHistory(historyDepth));
+  const [historySummary, setHistorySummary] = useState(
+    () => summarizeHistory(historyRef.current)
+  );
+  const syncHistory = (next) => {
+    historyRef.current = next;
+    const summary = summarizeHistory(next);
+    setHistorySummary(summary);
+    onHistoryChange?.(summary);
+  };
+  useEffect(() => {
+    if (historyRef.current.depth !== Math.max(1, Math.floor(historyDepth))) {
+      syncHistory(setHistoryDepth(historyRef.current, historyDepth));
+    }
+  }, [historyDepth]);
+  const record = (command) => {
+    if (historyEnabled) syncHistory(pushCommand(historyRef.current, command));
+  };
+  const canWrite = !!(onCellChange || onCellsChange);
+  const emitChanges = (changes) => {
+    if (changes.length === 0) return;
+    if (changes.length === 1 && onCellChange) onCellChange(changes[0]);
+    else if (onCellsChange) onCellsChange(changes);
+    else for (const change of changes) onCellChange?.(change);
+  };
+  const commitChanges = (items, source) => {
+    if (items.length === 0) return;
+    emitChanges(
+      items.map((item) => ({
+        row: item.row,
+        rowId: item.rowId,
+        columnId: item.column.id,
+        value: item.value,
+        previous: item.previous,
+        source
+      }))
+    );
+    const deltas = items.map((item) => ({
+      rowId: item.rowId,
+      columnId: item.column.id,
+      before: item.previous,
+      after: item.value
+    }));
+    record({ kind: "cells", source, changes: deltas });
+  };
+  const replay = (command, source) => {
+    if (command.kind === "cells") {
+      const changes = [];
+      for (const delta of command.changes) {
+        const row = rowByKey.get(delta.rowId);
+        const column = byId.get(delta.columnId);
+        if (!row || !column) continue;
+        changes.push({
+          row,
+          rowId: delta.rowId,
+          columnId: delta.columnId,
+          value: delta.after,
+          previous: rawValue(row, column),
+          source
+        });
+      }
+      emitChanges(changes);
+      return;
+    }
+    const rows = [...command.rows].sort((a, b) => a.index - b.index);
+    onRowsChange?.({ type: command.kind === "rows-add" ? "add" : "remove", rows, source });
+  };
+  const undo = () => {
+    const step = undoCommand(historyRef.current);
+    if (!step) return;
+    syncHistory(step.state);
+    replay(step.apply, "undo");
+    setAnnouncement(labels.undone(commandSize(step.apply)));
+  };
+  const redo = () => {
+    const step = redoCommand(historyRef.current);
+    if (!step) return;
+    syncHistory(step.state);
+    replay(step.apply, "redo");
+    setAnnouncement(labels.redone(commandSize(step.apply)));
+  };
+  const addRow = () => {
+    if (!createRow || !onRowsChange) return;
+    const row = createRow();
+    const index = dataProp.length;
+    const ref = {
+      row,
+      rowId: getRowIdProp ? getRowIdProp(row, index) : String(index),
+      index
+    };
+    onRowsChange({ type: "add", rows: [ref], source: "edit" });
+    record({ kind: "rows-add", rows: [ref] });
+  };
+  const removeSelectedRows = () => {
+    if (!onRowsChange || selection.length === 0) return;
+    const positions2 = /* @__PURE__ */ new Map();
+    dataProp.forEach((row, index) => {
+      positions2.set(row, index);
+    });
+    const rows = [];
+    for (const key of selection) {
+      const row = rowByKey.get(key);
+      const index = row === void 0 ? void 0 : positions2.get(row);
+      if (row !== void 0 && index !== void 0) rows.push({ row, rowId: key, index });
+    }
+    rows.sort((a, b) => a.index - b.index);
+    if (rows.length === 0) return;
+    onRowsChange({ type: "remove", rows, source: "edit" });
+    record({ kind: "rows-remove", rows });
+    setSelection([]);
+  };
+  const onPaste = (event) => {
+    const target = event.target;
+    if (!canWrite || editingRef.current || target.closest("input,textarea,select,[data-detail-content]"))
+      return;
+    const text = event.clipboardData.getData("text/plain");
+    if (!text) return;
+    event.preventDefault();
+    const bounds = cellRange ? rangeBounds(cellRange) : null;
+    const origin = bounds ? { r: bounds.r0, c: bounds.c0 } : { r: activeR, c: activeC };
+    const items = [];
+    for (const cellTarget of planPaste(parseTSV(text), origin, { maxR, maxC }, bounds)) {
+      const cell = cellAt(cellTarget.r, cellTarget.c);
+      if (!cell || !canEdit(cell.column, cell.row)) continue;
+      const result = coerceDraft(cell.column, cell.row, cellTarget.text, true);
+      const previous = rawValue(cell.row, cell.column);
+      if ("error" in result || sameCellValue(result.value, previous)) continue;
+      items.push({
+        row: cell.row,
+        rowId: keyOf(cell.row),
+        column: cell.column,
+        value: result.value,
+        previous
+      });
+    }
+    commitChanges(items, "paste");
+    if (items.length > 0) setAnnouncement(labels.pasted(items.length));
+  };
+  const fillItem = (from, to, source, shift) => {
+    let value = source;
+    if (shift && sourceIndex && isFormulaText(value)) {
+      const dr = (sourceIndex.rows.get(to.row) ?? 0) - (sourceIndex.rows.get(from.row) ?? 0);
+      const dc = (sourceIndex.cols.get(to.column.id) ?? 0) - (sourceIndex.cols.get(from.column.id) ?? 0);
+      value = shiftFormula(value, dr, dc);
+    }
+    const result = typeof value === "string" ? coerceDraft(to.column, to.row, value, true) : { value };
+    const previous = rawValue(to.row, to.column);
+    if ("error" in result || sameCellValue(result.value, previous)) return null;
+    return {
+      row: to.row,
+      rowId: keyOf(to.row),
+      column: to.column,
+      value: result.value,
+      previous
+    };
+  };
+  const fillByHandle = (base, extent, copyOnly) => {
+    const items = [];
+    for (const lane of fillLanes(base, extent)) {
+      const sources = lane.source.map((pos) => cellAt(pos.r, pos.c));
+      if (sources.some((cell) => !cell)) continue;
+      const values = sources.map((cell) => {
+        const known = cell;
+        return rawValue(known.row, known.column);
+      });
+      const plan = copyOnly ? copyFill(lane.targets.length, values.length, isBackward(extent.direction)) : seriesFill(values, lane.targets.length, {
+        backward: isBackward(extent.direction),
+        dateStep: fillSeriesOptions?.dateStep
+      });
+      lane.targets.forEach((pos, i) => {
+        const to = cellAt(pos.r, pos.c);
+        const step = plan[i];
+        if (!to || !step || !canEdit(to.column, to.row)) return;
+        const item = "from" in step ? fillItem(
+          sources[step.from],
+          to,
+          values[step.from],
+          true
+        ) : fillItem(to, to, step.value, false);
+        if (item) items.push(item);
+      });
+    }
+    commitChanges(items, "fill");
+    setCellRange({
+      anchor: { r: extent.bounds.r0, c: extent.bounds.c0 },
+      focus: { r: extent.bounds.r1, c: extent.bounds.c1 }
+    });
+    if (items.length > 0) setAnnouncement(labels.filled(items.length));
+  };
+  const onFillHandleDown = (event) => {
+    if (event.button !== 0 || !cellRange || !canWrite) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const base = rangeBounds(cellRange);
+    let extent = null;
+    let cancelled = false;
+    let pointer = { x: event.clientX, y: event.clientY };
+    let frame = 0;
+    const viewport = () => {
+      const scroller = scrollerRef.current;
+      if (!scroller) return null;
+      const box = scroller.getBoundingClientRect();
+      let head = box.top;
+      for (const th of scroller.querySelectorAll("thead th")) {
+        head = Math.max(head, th.getBoundingClientRect().bottom);
+      }
+      return { left: box.left, right: box.right, top: head, bottom: box.bottom };
+    };
+    const update = () => {
+      const view = viewport();
+      if (!view) return;
+      const x = Math.min(Math.max(pointer.x, view.left + 2), view.right - 2);
+      const y = Math.min(Math.max(pointer.y, view.top + 2), view.bottom - 2);
+      const cell = document.elementFromPoint(x, y)?.closest("td[data-r]");
+      if (!cell || !gridRef.current?.contains(cell)) return;
+      extent = handleExtent(
+        base,
+        { r: Number(cell.dataset.r), c: Number(cell.dataset.c) },
+        { maxR, maxC, minR: 1, minC: 0 }
+      );
+      setFillPreview(extent?.bounds ?? null);
+    };
+    const autoScroll = () => {
+      frame = requestAnimationFrame(autoScroll);
+      const view = viewport();
+      const scroller = scrollerRef.current;
+      if (!view || !scroller) return;
+      const dx = edgeScrollStep(pointer.x, view.left, view.right);
+      const dy = edgeScrollStep(pointer.y, view.top, view.bottom);
+      if (dx === 0 && dy === 0) return;
+      const before = { left: scroller.scrollLeft, top: scroller.scrollTop };
+      scroller.scrollLeft += dx;
+      scroller.scrollTop += dy;
+      if (scroller.scrollLeft !== before.left || scroller.scrollTop !== before.top) update();
+    };
+    const move = (moveEvent) => {
+      pointer = { x: moveEvent.clientX, y: moveEvent.clientY };
+      update();
+    };
+    const key = (keyEvent) => {
+      if (keyEvent.key !== "Escape") return;
+      cancelled = true;
+      finish(false);
+    };
+    const finish = (apply, copyOnly = false) => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", cancel);
+      window.removeEventListener("keydown", key);
+      cancelAnimationFrame(frame);
+      setFillPreview(null);
+      if (apply && !cancelled && extent) fillByHandle(base, extent, copyOnly);
+    };
+    const up = (upEvent) => finish(true, upEvent.ctrlKey || upEvent.metaKey);
+    const cancel = () => finish(false);
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", cancel);
+    window.addEventListener("keydown", key);
+    frame = requestAnimationFrame(autoScroll);
+  };
+  const fillRange = (direction) => {
+    if (!canWrite) return;
+    const bounds = cellRange ? rangeBounds(cellRange) : direction === "down" ? { r0: activeR - 1, r1: activeR, c0: activeC, c1: activeC } : { r0: activeR, r1: activeR, c0: activeC - 1, c1: activeC };
+    if (bounds.r0 < 1 || bounds.c0 < 0) return;
+    const items = [];
+    for (const step of planFill(bounds, direction)) {
+      const from = cellAt(step.from.r, step.from.c);
+      const to = cellAt(step.r, step.c);
+      if (!from || !to || !canEdit(to.column, to.row)) continue;
+      const item = fillItem(from, to, rawValue(from.row, from.column), true);
+      if (item) items.push(item);
+    }
+    commitChanges(items, "fill");
+    if (items.length > 0) setAnnouncement(labels.filled(items.length));
+  };
+  const startEdit = (key, column, typed) => {
+    const row = rowByKey.get(key);
+    if (!row || !canEdit(column, row)) return false;
+    const value = rawValue(row, column);
+    setEditing({
+      key,
+      columnId: column.id,
+      draft: typed ?? (value === null || value === void 0 ? "" : String(value)),
+      caretEnd: typed !== void 0
+    });
+    return true;
+  };
+  const commitEdit = (strict = false) => {
+    const current = editingRef.current;
+    if (!current) return true;
+    const row = rowByKey.get(current.key);
+    const column = byId.get(current.columnId);
+    const close = () => {
+      editingRef.current = null;
+      setEditing(null);
+    };
+    if (!row || !column) {
+      close();
+      return true;
+    }
+    const previous = rawValue(row, column);
+    const result = coerceDraft(column, row, current.draft);
+    if ("error" in result) {
+      if (!strict) {
+        close();
+        return true;
+      }
+      const next = { ...current, error: result.error };
+      editingRef.current = next;
+      setEditing(next);
+      return false;
+    }
+    close();
+    if (!sameCellValue(result.value, previous)) {
+      commitChanges([{ row, rowId: current.key, column, value: result.value, previous }], "edit");
+    }
+    return true;
+  };
+  const cancelEdit = () => {
+    editingRef.current = null;
+    setEditing(null);
+  };
+  const nextEditable = (r, c, step) => {
+    let row = r;
+    let col = c + step;
+    while (row >= 1 && row <= maxR) {
+      const display = bodyRows[row - 1];
+      if (display?.kind === "data") {
+        while (col >= 0 && col <= maxC) {
+          const entry = renderColumns[col];
+          if (entry?.kind === "data" && canEdit(entry.column, display.row))
+            return { r: row, c: col };
+          col += step;
+        }
+      }
+      row += step;
+      col = step > 0 ? 0 : maxC;
+    }
+    return null;
+  };
+  const onEditorKey = (event, r, c) => {
+    event.stopPropagation();
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelEdit();
+      focusCell(r, c);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      if (!commitEdit(true)) return;
+      focusCell(Math.min(r + 1, maxR), c);
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      if (!commitEdit(true)) return;
+      const next = nextEditable(r, c, event.shiftKey ? -1 : 1);
+      if (!next) {
+        focusCell(r, c);
+        return;
+      }
+      const target = bodyRows[next.r - 1];
+      const entry = renderColumns[next.c];
+      focusCell(next.r, next.c, false);
+      if (target?.kind === "data" && entry?.kind === "data") startEdit(target.key, entry.column);
+    }
+  };
+  const onGridKeyDown = (event) => {
+    const target = event.target;
+    if (target.closest("[data-detail-content]")) return;
+    const cell = target.closest("[data-r]");
+    if (!cell || !event.currentTarget.contains(cell)) return;
+    const r = Number(cell.dataset.r);
+    const start = Number(cell.dataset.c);
+    const spanEnd = Number(cell.dataset.cEnd ?? start);
+    const c = activeR === r && activeC >= start && activeC <= spanEnd ? activeC : start;
+    const inner = target !== cell;
+    if (inner && (event.key === "Enter" || event.key === " ")) return;
+    const entry = renderColumns[c];
+    const row = r > 0 ? bodyRows[r - 1] : void 0;
+    const handled = () => event.preventDefault();
+    const mod = event.ctrlKey || event.metaKey;
+    if (mod && !event.altKey && !target.closest("input,textarea,select")) {
+      const letter = event.key.toLowerCase();
+      if (historyEnabled && (letter === "z" || letter === "y" && !event.shiftKey)) {
+        handled();
+        if (letter === "y" || event.shiftKey) redo();
+        else undo();
+        return;
+      }
+      if (r > 0 && canWrite && !event.shiftKey && (letter === "d" || letter === "r")) {
+        handled();
+        fillRange(letter === "d" ? "down" : "right");
+        return;
+      }
+    }
+    if (r === 0 && entry?.kind === "data") {
+      const id = entry.column.id;
+      if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && event.shiftKey) {
+        const delta = event.key === "ArrowLeft" ? -1 : 1;
+        handled();
+        if (mod) {
+          if (entry.column.reorderable !== false && moveColumn(id, delta)) focusCell(0, c + delta);
+        } else if (entry.column.resizable !== false) {
+          grid.setWidth(id, (shownWidths[id] ?? 160) + delta * 16);
+        }
+        return;
+      }
+      if (event.key === "ArrowDown" && event.altKey) {
+        handled();
+        setMenuColumn(id);
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        handled();
+        if (entry.column.sortable !== false) applySort(toggleSort(sort, id, event.shiftKey));
+        return;
+      }
+    }
+    if (r > 0 && rangeSelection && !event.altKey) {
+      const step = ARROW_STEPS[event.key];
+      if (step && event.shiftKey) {
+        handled();
+        const from = { r, c: Math.max(c, firstDataIndex) };
+        const base = cellRange ?? { anchor: from, focus: from };
+        const next = extendRange(base, step.dr * (mod ? maxR : 1), step.dc * (mod ? maxC : 1), {
+          minR: 1,
+          maxR,
+          minC: Math.max(0, firstDataIndex),
+          maxC
+        });
+        setCellRange(next);
+        focusCell(next.focus.r, next.focus.c);
+        return;
+      }
+      if (mod && event.key.toLowerCase() === "c" && cellRange) {
+        handled();
+        copyRange();
+        return;
+      }
+      if (mod && event.key.toLowerCase() === "a" && !selectable) {
+        handled();
+        setCellRange({
+          anchor: { r: 1, c: Math.max(0, firstDataIndex) },
+          focus: { r: maxR, c: maxC }
+        });
+        return;
+      }
+      if (cellRange && (step || ["Home", "End", "PageUp", "PageDown", "Escape"].includes(event.key))) {
+        setCellRange(null);
+      }
+    }
+    if (r > 0 && row?.kind === "data" && event.altKey && !mod) {
+      const vertical = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+      if (vertical !== 0 && event.shiftKey && pinningEnabled) {
+        handled();
+        pinRow(row.key, vertical < 0 ? "top" : "bottom");
+        return;
+      }
+      if (vertical !== 0 && !event.shiftKey && reorderAllowed && !pinnedSideOf(pinnedRowIds, row.key)) {
+        handled();
+        if (reorderRow(row.key, { delta: vertical })) focusCell(r + vertical, c);
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        const expandable = detailEnabled || !!row.tree?.hasChildren;
+        if (expandable) {
+          handled();
+          setExpandedRow(row.key, event.key === "ArrowRight");
+          return;
+        }
+      }
+    }
+    switch (event.key) {
+      case "ArrowRight":
+        handled();
+        focusCell(r, spanEnd > start ? spanEnd + 1 : c + 1);
+        return;
+      case "ArrowLeft":
+        handled();
+        focusCell(r, spanEnd > start ? start - 1 : c - 1);
+        return;
+      case "ArrowDown":
+        handled();
+        focusCell(r + 1, c);
+        return;
+      case "ArrowUp":
+        handled();
+        focusCell(r - 1, c);
+        return;
+      case "Home":
+        handled();
+        if (mod && scrollerRef.current) scrollerRef.current.scrollTop = 0;
+        focusCell(mod ? 0 : r, 0);
+        return;
+      case "End":
+        handled();
+        focusCell(mod ? maxR : r, maxC);
+        return;
+      case "PageDown":
+      case "PageUp": {
+        handled();
+        const step = paged ? 10 : pageStep(rowHeight, bodyViewport);
+        focusCell(Math.max(r === 0 ? 0 : 1, r + (event.key === "PageDown" ? step : -step)), c);
+        return;
+      }
+    }
+    if (mod && event.key.toLowerCase() === "a" && selectable) {
+      handled();
+      toggleAll();
+      return;
+    }
+    if (r === 0 && entry?.kind === "select" && (event.key === " " || event.key === "Enter")) {
+      handled();
+      toggleAll();
+      return;
+    }
+    if (!row || row.kind === "placeholder" || row.kind === "detail") return;
+    if (row.kind === "group") {
+      if (event.key === "Enter" || event.key === " ") {
+        handled();
+        toggleGroupRow(row.key);
+      } else if (event.key === "ArrowRight" && row.collapsed) {
+        handled();
+        toggleGroupRow(row.key);
+      }
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && entry?.kind === "tools") {
+      handled();
+      if (detailEnabled) setExpandedRow(row.key);
+      return;
+    }
+    if (event.key === " " && selectable) {
+      handled();
+      toggleRow(row.key, event.shiftKey);
+      return;
+    }
+    if (formulasOn && event.key === "=" && !mod && !inner && entry?.kind === "data") {
+      if (startEdit(row.key, entry.column, "=")) handled();
+      return;
+    }
+    if ((event.key === "Enter" || event.key === "F2") && entry?.kind === "data") {
+      if (startEdit(row.key, entry.column)) handled();
+      else if (event.key === "Enter" && selectable && entry.kind === "data") return;
+    }
+    if (event.key === "Enter" && entry?.kind === "select") {
+      handled();
+      toggleRow(row.key, event.shiftKey);
+    }
+  };
+  const onGridFocus = (event) => {
+    if (event.target.closest("[data-detail-content]")) return;
+    const cell = event.target.closest("[data-r]");
+    if (!cell || !event.currentTarget.contains(cell)) return;
+    const r = Number(cell.dataset.r);
+    const c = Number(cell.dataset.c);
+    const end = Number(cell.dataset.cEnd ?? c);
+    if (r === active.r && active.c >= c && active.c <= end) return;
+    setActive({ r, c });
+  };
+  const onResizeStart = (event, column) => {
+    event.preventDefault();
+    event.stopPropagation();
+    resizing.current = true;
+    const handle = event.currentTarget;
+    const startX = event.clientX;
+    const startWidth = shownWidths[column.id] ?? 160;
+    const direction = zoneOf.get(column.id) === "right" ? -1 : 1;
+    handle.setPointerCapture(event.pointerId);
+    const move = (moveEvent) => grid.setWidth(column.id, startWidth + direction * (moveEvent.clientX - startX));
+    const end = () => {
+      resizing.current = false;
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", end);
+      handle.removeEventListener("pointercancel", end);
+    };
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", end);
+    handle.addEventListener("pointercancel", end);
+  };
+  const onDragStart = (event, id) => {
+    if (resizing.current) {
+      event.preventDefault();
+      return;
+    }
+    dragId.current = id;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", id);
+  };
+  const onDragOver = (event, id) => {
+    const source = dragId.current;
+    if (!source || source === id || zoneOf.get(source) !== zoneOf.get(id)) return;
+    event.preventDefault();
+    const rect = event.currentTarget.getBoundingClientRect();
+    const place = event.clientX < rect.left + rect.width / 2 ? "before" : "after";
+    setDropTarget(
+      (previous) => previous?.id === id && previous.place === place ? previous : { id, place }
+    );
+  };
+  const onDrop = (event, id) => {
+    event.preventDefault();
+    const source = dragId.current;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const place = event.clientX < rect.left + rect.width / 2 ? "before" : "after";
+    if (source && source !== id && zoneOf.get(source) === zoneOf.get(id)) {
+      grid.moveTo(source, id, place);
+    }
+    dragId.current = null;
+    setDropTarget(null);
+  };
+  const onDragEnd = () => {
+    dragId.current = null;
+    setDropTarget(null);
+  };
+  const onRowDragStart = (event, key) => {
+    if (!reorderAllowed) {
+      event.preventDefault();
+      return;
+    }
+    rowDrag.current = key;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", key);
+    const row = event.currentTarget.closest("tr");
+    if (row) event.dataTransfer.setDragImage(row, 16, rowHeight / 2);
+  };
+  const dropPlace = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return event.clientY < rect.top + rect.height / 2 ? "before" : "after";
+  };
+  const onRowDragOver = (event, key) => {
+    const source = rowDrag.current;
+    if (!source || source === key) return;
+    event.preventDefault();
+    const place = dropPlace(event);
+    setDropRow(
+      (previous) => previous?.key === key && previous.place === place ? previous : { key, place }
+    );
+  };
+  const onRowDrop = (event, key) => {
+    event.preventDefault();
+    const source = rowDrag.current;
+    if (source && source !== key) reorderRow(source, { id: key, place: dropPlace(event) });
+    rowDrag.current = null;
+    setDropRow(null);
+  };
+  const onRowDragEnd = () => {
+    rowDrag.current = null;
+    setDropRow(null);
+  };
+  const pinOf = (entry) => positions[idOfColumn(entry)];
+  const pinStyle = (position) => position ? { [position.side]: position.offset } : void 0;
+  const pinShadow = (position) => position?.edge && (position.side === "left" ? scrolled.start : scrolled.end) && (position.side === "left" ? "shadow-pinned-start" : "shadow-pinned-end");
+  const cellBase = "overflow-hidden border-b-divider px-3 outline-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:-outline-offset-2 @max-sm/grid:px-2";
+  const tabIndexOf = (r, c) => tabbable.r === r && tabbable.c === c ? 0 : -1;
+  const firstDataIndex = renderColumns.findIndex((entry) => entry.kind === "data");
+  const cellLetter = (id) => columnLabel(sourceIndex?.cols.get(id) ?? 0);
+  const sortOf = (id) => {
+    const index = sort.findIndex((rule) => rule.id === id);
+    return index === -1 ? null : { index, direction: sort[index].direction };
+  };
+  const renderHeader = (entry, c) => {
+    const position = pinOf(entry);
+    const common = {
+      "data-r": 0,
+      "data-c": c,
+      tabIndex: tabIndexOf(0, c),
+      style: { ...pinStyle(position), top: headerTop, height: headerHeight }
+    };
+    const sticky = cn("sticky bg-surface", position ? "z-3" : "z-2", pinShadow(position));
+    if (entry.kind === "tools") {
+      return /* @__PURE__ */ jsx("th", { className: cn(cellBase, sticky, "px-0"), ...common, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.rowActions }) }, TOOLS_ID);
+    }
+    if (entry.kind === "select") {
+      const all = allKeys.length > 0 && selectedInView === allKeys.length;
+      return /* @__PURE__ */ jsx("th", { className: cn(cellBase, sticky, "px-0 text-center"), ...common, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          tabIndex: -1,
+          "aria-label": labels.selectAll,
+          className: "size-4 align-middle accent-accent",
+          checked: all,
+          ref: (node) => {
+            if (node) node.indeterminate = selectedInView > 0 && !all;
+          },
+          onChange: toggleAll
+        }
+      ) }, SELECT_ID);
+    }
+    const { column } = entry;
+    const align = columnAlign(column);
+    const state = sortOf(column.id);
+    const sortable = column.sortable !== false;
+    const reorderable = column.reorderable !== false;
+    const zone = zoneOf.get(column.id) ?? "center";
+    const neighbourLeft = neighbourOf(column.id, -1);
+    const neighbourRight = neighbourOf(column.id, 1);
+    const drop = dropTarget?.id === column.id ? dropTarget.place : null;
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        "aria-sort": state?.index === 0 ? state.direction === "asc" ? "ascending" : "descending" : void 0,
+        draggable: reorderable && !editing,
+        onDragStart: (event) => onDragStart(event, column.id),
+        onDragOver: (event) => onDragOver(event, column.id),
+        onDragLeave: () => setDropTarget(null),
+        onDrop: (event) => onDrop(event, column.id),
+        onDragEnd,
+        onClick: (event) => {
+          if (event.target.closest("button,[data-resize]")) return;
+          if (sortable) applySort(toggleSort(sort, column.id, event.shiftKey));
+        },
+        className: cn(
+          cellBase,
+          sticky,
+          "select-none whitespace-nowrap font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]",
+          sortable && "cursor-pointer hover:text-ink",
+          drop === "before" && "shadow-[inset_2px_0_0_var(--accent)]",
+          drop === "after" && "shadow-[inset_-2px_0_0_var(--accent)]"
+        ),
+        "data-zone": zone,
+        ...common,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex min-w-0 items-center gap-1", align === "end" && "flex-row-reverse"),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-1 items-center gap-1", justifyClass[align]), children: [
+                  formulasOn ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "shrink-0 rounded-xs bg-surface-2 px-1 font-[650] text-[10px] text-ink-3 normal-case tracking-normal",
+                      children: cellLetter(column.id)
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx("span", { className: "truncate", title: column.header, children: column.header }),
+                  state ? /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center text-accent-ink", children: [
+                    state.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true", className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true", className: "size-3" }),
+                    sort.length > 1 ? /* @__PURE__ */ jsx("span", { className: "text-[10px] tabular-nums", children: state.index + 1 }) : null,
+                    state.index > 0 ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: state.direction === "asc" ? labels.sortAsc : labels.sortDesc }) : null
+                  ] }) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ColumnMenu,
+                  {
+                    column,
+                    labels,
+                    open: menuColumn === column.id,
+                    onOpenChange: (open) => setMenuColumn(open ? column.id : null),
+                    onCloseFocus: () => focusCell(0, c),
+                    sortDirection: state?.direction ?? null,
+                    filter: filters[column.id],
+                    values: () => distinctValues(data, column),
+                    pinned: zone === "center" ? null : zone,
+                    grouped: groupBy.includes(column.id),
+                    canMoveLeft: !!neighbourLeft,
+                    canMoveRight: !!neighbourRight,
+                    canHide: column.hideable !== false && dataColumns.length > 1,
+                    onSort: (direction) => applySort(direction ? [{ id: column.id, direction }] : []),
+                    onFilter: (filter) => setFilter(column.id, filter),
+                    onPin: (side) => grid.pin(column.id, side),
+                    onGroup: (on) => setGroup(column.id, on),
+                    onMove: (delta) => moveColumn(column.id, delta),
+                    onResize: (delta) => delta === null ? grid.resetWidth(column.id) : grid.setWidth(column.id, (shownWidths[column.id] ?? 160) + delta),
+                    onHide: () => {
+                      setMenuColumn(null);
+                      grid.setHidden(column.id, true);
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          column.resizable !== false ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-resize": "",
+              onPointerDown: (event) => onResizeStart(event, column),
+              onDoubleClick: () => grid.resetWidth(column.id),
+              className: cn(
+                "absolute top-0 z-1 h-full w-2 cursor-col-resize touch-none after:absolute after:inset-y-2 after:left-1/2 after:w-px after:bg-line hover:after:w-0.5 hover:after:bg-accent",
+                zone === "right" ? "left-0" : "right-0"
+              )
+            }
+          ) : null
+        ]
+      },
+      column.id
+    );
+  };
+  const renderValue = (row, key, column) => {
+    const value = getCellValue(row, column);
+    const formatted = formatCellValue(value, column);
+    if (column.cell) return column.cell({ row, rowId: key, value, formatted });
+    if (formulasOn && isErrorText(value) && isFormulaText(rawValue(row, column))) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "block truncate font-[650] text-danger",
+          title: `${labels.formulaError}: ${value}`,
+          children: value
+        }
+      );
+    }
+    if (column.type === "status" && formatted) {
+      return /* @__PURE__ */ jsx(Chip, { tone: column.statusTones?.[String(value)] ?? "neutral", className: "h-5.5", children: formatted });
+    }
+    if (column.type === "sparkline" && column.sparkline) {
+      const { values, kind, color, label } = column.sparkline;
+      const description = typeof label === "function" ? label(row) : label ?? column.header;
+      return /* @__PURE__ */ jsx("div", { className: "min-w-0 py-1", children: /* @__PURE__ */ jsx(
+        Sparkline,
+        {
+          data: values(row),
+          label: description,
+          type: kind,
+          color,
+          height: 24,
+          animate: false
+        }
+      ) });
+    }
+    if (column.type === "boolean" && formatted) {
+      return /* @__PURE__ */ jsx(Chip, { tone: value === true ? "success" : "neutral", className: "h-5.5", children: formatted });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "block truncate", title: formatted, children: formatted });
+  };
+  const renderEditor = (column, r, c) => {
+    if (!editing) return null;
+    const errorId = `${helpId}-error`;
+    const editorClass = cn(
+      "h-[calc(100%-6px)] w-full min-w-0 rounded-xs border bg-surface px-1.5 text-[13px] text-ink outline-none",
+      editing.error ? "border-danger" : "border-accent"
+    );
+    const common = {
+      autoFocus: true,
+      "aria-label": column.header,
+      "aria-invalid": editing.error ? true : void 0,
+      "aria-describedby": editing.error ? errorId : void 0,
+      value: editing.draft,
+      onBlur: () => commitEdit(),
+      onKeyDown: (event) => onEditorKey(event, r, c)
+    };
+    const change = (draft) => setEditing({ ...editing, draft, error: void 0 });
+    const editor = editorOf(column) === "select" ? /* @__PURE__ */ jsx(
+      "select",
+      {
+        ...common,
+        onChange: (event) => change(event.target.value),
+        className: editorClass,
+        children: (column.options ?? []).map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...common,
+        type: "text",
+        inputMode: editorOf(column) === "number" ? "decimal" : void 0,
+        onFocus: (event) => {
+          const input = event.currentTarget;
+          if (editing.caretEnd) input.setSelectionRange(input.value.length, input.value.length);
+          else input.select();
+        },
+        onChange: (event) => change(event.target.value),
+        className: cn(editorClass, columnAlign(column) === "end" && "text-right")
+      }
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      editor,
+      editing.error ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          id: errorId,
+          role: "alert",
+          className: "absolute top-full left-1 z-5 mt-0.5 flex max-w-64 items-center gap-1.5 rounded-xs border border-danger bg-surface px-2 py-1 text-[12px] text-danger shadow-overlay",
+          children: [
+            /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+            editing.error
+          ]
+        }
+      ) : null
+    ] });
+  };
+  const ariaRowOf = (r) => groupLevels + pageOffset + r + 1;
+  const dividerRow = (r) => topCount > 0 && r === topCount ? "top" : null;
+  const renderGroupRow = (row, r) => {
+    const header = byId.get(row.columnId)?.header ?? row.columnId;
+    let spanEnd = Math.max(0, firstDataIndex);
+    while (spanEnd + 1 < fillerIndex) {
+      const next = renderColumns[spanEnd + 1];
+      if (next?.kind !== "data" || next.column.aggregate) break;
+      spanEnd += 1;
+    }
+    const labelActive = tabbable.r === r && tabbable.c <= spanEnd;
+    const cells = renderColumns.map((entry, c) => {
+      if (c > 0 && c <= spanEnd) return null;
+      if (c === 0) {
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            "data-r": r,
+            "data-c": 0,
+            "data-c-end": spanEnd,
+            colSpan: spanEnd + 1,
+            tabIndex: labelActive ? 0 : -1,
+            role: "gridcell",
+            "aria-expanded": !row.collapsed,
+            className: cn(cellBase, "cursor-pointer overflow-visible text-[13px]"),
+            children: /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "sticky left-3 flex w-fit max-w-full min-w-0 items-center gap-1.5 whitespace-nowrap font-[650] text-ink",
+                style: { paddingLeft: row.depth * 16 },
+                title: `${header}: ${row.label}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      "aria-hidden": "true",
+                      className: cn(
+                        "size-3.5 shrink-0 text-ink-3 transition-transform motion-reduce:transition-none",
+                        row.collapsed && "-rotate-90"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                    row.collapsed ? labels.expandGroup : labels.collapseGroup,
+                    ":",
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-normal text-ink-3", children: [
+                    header,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: row.label }),
+                  /* @__PURE__ */ jsx(Chip, { className: "h-5 shrink-0 px-2 text-[11px]", children: row.count })
+                ]
+              }
+            )
+          },
+          "label"
+        );
+      }
+      const position = pinOf(entry);
+      const column = entry.kind === "data" ? entry.column : null;
+      const aggregate = column?.aggregate ? row.aggregates[column.id] ?? null : null;
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          "data-r": r,
+          "data-c": c,
+          tabIndex: tabIndexOf(r, c),
+          role: "gridcell",
+          style: pinStyle(position),
+          className: cn(
+            cellBase,
+            "cursor-pointer text-[13px]",
+            position && "sticky z-1 bg-surface-2",
+            pinShadow(position),
+            column && alignClass[columnAlign(column)]
+          ),
+          children: column?.aggregate && aggregate !== null ? /* @__PURE__ */ jsxs("span", { className: "block truncate font-[650] text-ink tabular-nums", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              labels.aggregate[column.aggregate],
+              ": "
+            ] }),
+            formatAggregate(aggregate, column.aggregate, column)
+          ] }) : null
+        },
+        idOfColumn(entry)
+      );
+    });
+    return /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        "aria-rowindex": ariaRowOf(r),
+        style: { height: rowHeight },
+        className: "group/row bg-surface-2",
+        onClick: () => toggleGroupRow(row.key),
+        children: [
+          cells.slice(0, fillerIndex),
+          /* @__PURE__ */ jsx("td", { "aria-hidden": "true", className: "border-b-divider" }),
+          cells.slice(fillerIndex)
+        ]
+      },
+      row.key
+    );
+  };
+  const rowPinInfo = (r) => {
+    const index = r - 1;
+    if (index < topCount) {
+      return { side: "top", offset: headerTop + headerHeight + index * rowHeight };
+    }
+    if (index >= bodyLength - bottomCount) {
+      const fromEnd = bodyLength - 1 - index;
+      return { side: "bottom", offset: (footer ? rowHeight : 0) + fromEnd * rowHeight };
+    }
+    return null;
+  };
+  const renderToolsCell = (row, r, c, position, pinInfo, sticky) => {
+    const isOpen = expandedSet.has(row.key);
+    const pinSide = pinnedSideOf(pinnedRowIds, row.key);
+    const name = labelOfRow(row.key);
+    const tool = "grid size-6 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface-2 hover:text-ink focus-visible:outline-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-35 [&_svg]:size-3.5";
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        "data-r": r,
+        "data-c": c,
+        tabIndex: tabIndexOf(r, c),
+        role: "gridcell",
+        style: { ...pinStyle(position), ...pinInfo ? { [pinInfo.side]: pinInfo.offset } : null },
+        className: cn(cellBase, sticky, pinShadow(position), "px-1"),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-0.5", children: [
+          reorderEnabled && !pinInfo ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              draggable: reorderAllowed,
+              "aria-hidden": "true",
+              title: reorderAllowed ? labels.dragRow : labels.reorderBlocked,
+              onDragStart: (event) => onRowDragStart(event, row.key),
+              onDragEnd: onRowDragEnd,
+              className: cn(
+                tool,
+                reorderAllowed ? "cursor-grab active:cursor-grabbing" : "cursor-not-allowed opacity-35"
+              ),
+              children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+            }
+          ) : reorderEnabled ? /* @__PURE__ */ jsx("span", { className: "size-6 shrink-0", "aria-hidden": "true" }) : null,
+          detailEnabled ? pinInfo ? /* @__PURE__ */ jsx("span", { className: "size-6 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              className: tool,
+              "aria-expanded": isOpen,
+              "aria-label": `${isOpen ? labels.collapseRow : labels.expandRow}: ${name}`,
+              onClick: () => setExpandedRow(row.key),
+              children: /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "transition-transform motion-reduce:transition-none",
+                    isOpen && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) : null,
+          pinningEnabled ? pinSide ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: cn(tool, "text-accent-ink"),
+                "aria-label": `${labels.unpinRow}: ${name}`,
+                title: labels.unpinRow,
+                onClick: () => pinRow(row.key, pinSide),
+                children: /* @__PURE__ */ jsx(PinOff, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "size-6 shrink-0", "aria-hidden": "true" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: tool,
+                "aria-label": `${labels.pinRowTop}: ${name}`,
+                title: labels.pinRowTop,
+                onClick: () => pinRow(row.key, "top"),
+                children: /* @__PURE__ */ jsx(ArrowUpToLine, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: tool,
+                "aria-label": `${labels.pinRowBottom}: ${name}`,
+                title: labels.pinRowBottom,
+                onClick: () => pinRow(row.key, "bottom"),
+                children: /* @__PURE__ */ jsx(ArrowDownToLine, { "aria-hidden": "true" })
+              }
+            )
+          ] }) : null
+        ] })
+      },
+      TOOLS_ID
+    );
+  };
+  const renderDataRow = (row, r) => {
+    const isSelected = selected.has(row.key);
+    const pinInfo = rowPinInfo(r);
+    const isDropTarget = dropRow?.key === row.key;
+    const cells = renderColumns.map((entry, c) => {
+      const position = pinOf(entry);
+      const stuck = !!position || !!pinInfo;
+      const sticky = stuck && cn(
+        "sticky bg-surface group-hover/row:bg-surface-2 group-aria-selected/row:bg-accent-soft",
+        pinInfo ? position ? "z-3" : "z-2" : "z-1"
+      );
+      const stuckStyle = {
+        ...pinStyle(position),
+        ...pinInfo ? { [pinInfo.side]: pinInfo.offset } : null
+      };
+      if (entry.kind === "select") {
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            "data-r": r,
+            "data-c": c,
+            tabIndex: tabIndexOf(r, c),
+            style: stuckStyle,
+            className: cn(cellBase, sticky, pinShadow(position), "px-0 text-center"),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                tabIndex: -1,
+                "aria-label": `${labels.selectRow} ${dataColumns[0] ? formatCellValue(getCellValue(row.row, dataColumns[0]), dataColumns[0]) : row.key}`,
+                className: "size-4 align-middle accent-accent",
+                checked: isSelected,
+                onChange: () => void 0,
+                onClick: (event) => toggleRow(row.key, event.shiftKey)
+              }
+            )
+          },
+          SELECT_ID
+        );
+      }
+      if (entry.kind === "tools") {
+        return renderToolsCell(row, r, c, position, pinInfo, sticky);
+      }
+      const { column } = entry;
+      const isEditing = editing?.key === row.key && editing.columnId === column.id;
+      const editable = canEdit(column, row.row);
+      const value = getCellValue(row.row, column);
+      const invalid = column.validate ? column.validate(value, row.row) : null;
+      const inSelection = rangeSelection && inRange(cellRange, r, c);
+      const inFill = !!fillPreview && !inSelection && r >= fillPreview.r0 && r <= fillPreview.r1 && c >= fillPreview.c0 && c <= fillPreview.c1;
+      const showHandle = canWrite && rangeSelection && !isEditing && !!rangeB && r === rangeB.r1 && c === rangeB.c1;
+      const isTreeCell = !!tree && structured && c === firstDataIndex;
+      const parentAggregate = row.tree?.hasChildren && column.aggregate ? row.tree.aggregates[column.id] ?? null : null;
+      const content = parentAggregate !== null && column.aggregate ? /* @__PURE__ */ jsxs("span", { className: "block truncate font-[650] tabular-nums", children: [
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          labels.aggregate[column.aggregate],
+          ": "
+        ] }),
+        formatAggregate(parentAggregate, column.aggregate, column)
+      ] }) : renderValue(row.row, row.key, column);
+      const body = isTreeCell ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", style: { paddingLeft: row.depth * 16 }, children: [
+        row.tree?.hasChildren ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": `${row.tree.expanded ? labels.collapseRow : labels.expandRow}: ${labelOfRow(row.key)}`,
+            "aria-expanded": row.tree.expanded,
+            onClick: () => setExpandedRow(row.key),
+            className: "grid size-5 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface-2 hover:text-ink",
+            children: /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "size-3.5 transition-transform motion-reduce:transition-none",
+                  row.tree.expanded && "rotate-90"
+                )
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: content })
+      ] }) : content;
+      return /* @__PURE__ */ jsxs(
+        "td",
+        {
+          "data-r": r,
+          "data-c": c,
+          tabIndex: tabIndexOf(r, c),
+          role: "gridcell",
+          "aria-readonly": onCellChange && !editable ? true : void 0,
+          "aria-selected": rangeSelection ? inSelection : void 0,
+          "aria-invalid": invalid ? true : void 0,
+          title: invalid ? `${labels.invalidCell}: ${invalid}` : void 0,
+          onPointerDown: rangeSelection ? (event) => onCellPointerDown(event, r, c) : void 0,
+          onDoubleClick: () => {
+            if (startEdit(row.key, column)) setActive({ r, c });
+          },
+          style: {
+            ...stuckStyle,
+            paddingLeft: c === firstDataIndex && row.depth > 0 && !isTreeCell ? 12 + row.depth * 16 : void 0
+          },
+          className: cn(
+            cellBase,
+            sticky,
+            pinShadow(position),
+            alignClass[columnAlign(column)],
+            (column.type === "number" || column.type === "currency") && "tabular-nums",
+            isEditing && "relative overflow-visible px-1",
+            editable && "cursor-text",
+            invalid && "bg-danger-soft",
+            inSelection && "bg-accent-soft",
+            inFill && "bg-accent-soft/60",
+            showHandle && !sticky && "relative"
+          ),
+          children: [
+            showHandle ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-fill-handle": "",
+                role: "presentation",
+                title: labels.fillHandle,
+                onPointerDown: onFillHandleDown,
+                className: "absolute right-0 bottom-0 z-4 size-2.5 cursor-crosshair touch-none rounded-xs border border-surface bg-accent"
+              }
+            ) : null,
+            isEditing ? renderEditor(column, r, c) : invalid ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-danger" }),
+              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                labels.invalidCell,
+                ": ",
+                invalid.replace(/\.$/, ""),
+                ".",
+                " "
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: body })
+            ] }) : body
+          ]
+        },
+        column.id
+      );
+    });
+    return /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        "aria-rowindex": ariaRowOf(r),
+        "aria-selected": selectable ? isSelected : void 0,
+        "aria-level": tree && structured ? row.depth + 1 : void 0,
+        "aria-expanded": tree && structured && row.tree?.hasChildren ? row.tree.expanded : detailEnabled ? expandedSet.has(row.key) : void 0,
+        "data-drop": isDropTarget ? dropRow?.place : void 0,
+        "data-pinned": pinInfo?.side,
+        "data-divider": dividerRow(r),
+        style: { height: rowHeight },
+        onDragOver: reorderAllowed ? (event) => onRowDragOver(event, row.key) : void 0,
+        onDrop: reorderAllowed ? (event) => onRowDrop(event, row.key) : void 0,
+        className: cn(
+          "group/row text-[13px] text-ink hover:bg-surface-2 aria-selected:bg-accent-soft",
+          "data-[drop=before]:[&>td]:shadow-[inset_0_2px_0_var(--accent)] data-[drop=after]:[&>td]:shadow-[inset_0_-2px_0_var(--accent)]",
+          "data-[divider=top]:[&>td]:border-b-line-strong"
+        ),
+        children: [
+          cells.slice(0, fillerIndex),
+          /* @__PURE__ */ jsx("td", { "aria-hidden": "true", className: "border-b-divider" }),
+          cells.slice(fillerIndex)
+        ]
+      },
+      row.key
+    );
+  };
+  const renderDetailRow = (row, r) => {
+    const labelled = labels.detailOf(labelOfRow(row.rowKey));
+    return /* @__PURE__ */ jsx("tr", { "aria-rowindex": ariaRowOf(r), style: { height: row.height }, children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        "data-r": r,
+        "data-c": 0,
+        "data-c-end": maxC,
+        colSpan,
+        role: "gridcell",
+        tabIndex: tabbable.r === r ? 0 : -1,
+        "aria-label": labelled,
+        className: cn(cellBase, "overflow-hidden bg-surface-2/50 p-0"),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-detail-content": "",
+            className: "sticky left-0 box-border overflow-auto p-2",
+            style: { width: containerWidth || "100%", height: row.height - 1 },
+            children: renderDetail?.(row.row, row.rowKey)
+          }
+        )
+      }
+    ) }, row.key);
+  };
+  const renderPlaceholderRow = (row, r) => {
+    const cells = renderColumns.map((entry, c) => {
+      const position = pinOf(entry);
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          "data-r": r,
+          "data-c": c,
+          tabIndex: tabIndexOf(r, c),
+          role: "gridcell",
+          style: pinStyle(position),
+          className: cn(cellBase, position && "sticky z-1 bg-surface", pinShadow(position)),
+          children: entry.kind === "data" ? /* @__PURE__ */ jsx("span", { className: "block h-2.5 w-3/4 rounded-pill bg-surface-2 motion-safe:animate-pulse" }) : null
+        },
+        idOfColumn(entry)
+      );
+    });
+    return /* @__PURE__ */ jsxs("tr", { "aria-rowindex": ariaRowOf(r), "aria-busy": "true", style: { height: rowHeight }, children: [
+      cells.slice(0, fillerIndex),
+      /* @__PURE__ */ jsx("td", { "aria-hidden": "true", className: "border-b-divider" }),
+      cells.slice(fillerIndex)
+    ] }, row.key);
+  };
+  const headerCells = renderColumns.map(renderHeader);
+  const footerCells = renderColumns.map((entry, c) => {
+    const position = pinOf(entry);
+    const column = entry.kind === "data" ? entry.column : null;
+    const value = column?.aggregate ? totals[column.id] ?? null : null;
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        style: pinStyle(position),
+        className: cn(
+          "sticky bottom-0 overflow-hidden border-t-divider bg-surface px-3 font-[650] text-[13px] text-ink @max-sm/grid:px-2",
+          position ? "z-3" : "z-2",
+          pinShadow(position),
+          column && alignClass[columnAlign(column)],
+          "tabular-nums"
+        ),
+        children: column?.aggregate && value !== null ? /* @__PURE__ */ jsxs("span", { className: "block truncate", children: [
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            labels.aggregate[column.aggregate],
+            ": "
+          ] }),
+          formatAggregate(value, column.aggregate, column)
+        ] }) : c === firstDataIndex ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-ink-3 uppercase tracking-[.07em]", children: labels.total }) : null
+      },
+      idOfColumn(entry)
+    );
+  });
+  const colSpan = renderColumns.length + 1;
+  const activeFilters = countActiveFilters(filters);
+  const rowCount = bodyLength + groupLevels + 1 + (footer ? 1 : 0);
+  const toolbarRows = sourceActive ? remote.total ?? 0 : sorted.length;
+  useEffect(() => {
+    if (page > pages - 1) setPage(Math.max(0, pages - 1));
+  }, [page, pages]);
+  useEffect(() => {
+    setCellRange(null);
+  }, [sort, filters, search, groupBy, page, advanced, data]);
+  const renderGroupHeaderRow = (level) => {
+    const top = level * GROUP_HEADER_HEIGHT;
+    const labelInset = renderColumns.slice(0, leadingCount + pinned.left.length).reduce((sum, entry) => sum + widthOf(entry), 0);
+    const out = [];
+    let fillerDone = false;
+    const filler = () => {
+      fillerDone = true;
+      out.push(
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            role: "presentation",
+            className: "sticky z-2 border-b-divider bg-surface",
+            style: { top, height: GROUP_HEADER_HEIGHT }
+          },
+          "filler"
+        )
+      );
+    };
+    if (leadingCount > 0) {
+      out.push(
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            role: "presentation",
+            colSpan: leadingCount,
+            className: "sticky z-3 border-b-divider bg-surface",
+            style: { left: 0, top, height: GROUP_HEADER_HEIGHT }
+          },
+          "lead"
+        )
+      );
+    }
+    for (const cell of headerLevels[level] ?? []) {
+      const startIndex = cell.start + leadingCount;
+      if (!fillerDone && startIndex >= fillerIndex) filler();
+      const zone = zoneOf.get(dataColumns[cell.start]?.id ?? "") ?? "center";
+      const first = renderColumns[startIndex];
+      const last = renderColumns[startIndex + cell.span - 1];
+      const style = { top, height: GROUP_HEADER_HEIGHT };
+      if (zone === "left" && first) style.left = positions[idOfColumn(first)]?.offset;
+      if (zone === "right" && last) style.right = positions[idOfColumn(last)]?.offset;
+      out.push(
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            role: cell.label ? "columnheader" : "presentation",
+            colSpan: cell.span,
+            className: cn(
+              "sticky overflow-clip border-b-divider bg-surface px-3 text-center font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em] @max-sm/grid:px-2",
+              zone === "center" ? "z-2" : "z-3",
+              cell.label && "border-x"
+            ),
+            style,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block w-fit max-w-full truncate",
+                  zone === "center" && "sticky mx-auto @max-sm/grid:mx-0"
+                ),
+                style: zone === "center" ? { left: labelInset + 8 } : void 0,
+                title: cell.label,
+                children: cell.label
+              }
+            )
+          },
+          `${cell.start}-${cell.label}`
+        )
+      );
+    }
+    if (!fillerDone) filler();
+    return /* @__PURE__ */ jsx("tr", { "aria-rowindex": level + 1, children: out }, `group-header-${level}`);
+  };
+  const renderBodyRow = (row, index) => {
+    const r = index + 1;
+    switch (row.kind) {
+      case "group":
+        return renderGroupRow(row, r);
+      case "detail":
+        return renderDetailRow(row, r);
+      case "placeholder":
+        return renderPlaceholderRow(row, r);
+      default:
+        return renderDataRow(row, r);
+    }
+  };
+  const bodyRowsIn = (start, end) => bodyRows.slice(start, end).map((row, offset) => renderBodyRow(row, start + offset));
+  const spacer = (key, px) => px > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", style: { height: px }, children: /* @__PURE__ */ jsx("td", { colSpan, className: "p-0" }) }, key) : null;
+  const stats = cellRange ? rangeStats(rangeBounds(cellRange), (r, c) => {
+    const cell = cellAt(r, c);
+    return cell ? getCellValue(cell.row, cell.column) : void 0;
+  }) : null;
+  const rangeCellCount = cellRange ? (() => {
+    const b = rangeBounds(cellRange);
+    return (b.r1 - b.r0 + 1) * (b.c1 - b.c0 + 1);
+  })() : 0;
+  const rangeIsCurrency = (() => {
+    if (!cellRange) return false;
+    const b = rangeBounds(cellRange);
+    const kinds = /* @__PURE__ */ new Set();
+    for (let c = b.c0; c <= b.c1; c += 1) {
+      const entry = renderColumns[c];
+      if (entry?.kind === "data" && (entry.column.type === "number" || entry.column.type === "currency")) {
+        kinds.add(entry.column.type);
+      }
+    }
+    return kinds.size === 1 && kinds.has("currency");
+  })();
+  const formatStat = (value) => value === null ? "" : rangeIsCurrency ? formatCurrency(value) : formatNumber(value);
+  const barCell = formulasOn ? cellAt(activeR, activeC) : null;
+  const [barError, setBarError] = useState();
+  useEffect(() => {
+    setBarError(void 0);
+  }, [activeR, activeC]);
+  const barRaw = barCell ? rawValue(barCell.row, barCell.column) : null;
+  const commitBar = (text) => {
+    if (!barCell || !canEdit(barCell.column, barCell.row)) return;
+    const result = coerceDraft(barCell.column, barCell.row, text);
+    if ("error" in result) {
+      setBarError(result.error);
+      return;
+    }
+    setBarError(void 0);
+    if (!sameCellValue(result.value, barRaw)) {
+      commitChanges(
+        [
+          {
+            row: barCell.row,
+            rowId: keyOf(barCell.row),
+            column: barCell.column,
+            value: result.value,
+            previous: barRaw
+          }
+        ],
+        "edit"
+      );
+    }
+    focusCell(activeR, activeC);
+  };
+  const emptyFiltered = activeFilters > 0 || search !== "" || advancedCount > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/grid flex min-w-0 max-w-full flex-col overflow-hidden rounded-card border-card shadow-card surface-card text-ink",
+        className
+      ),
+      children: [
+        hideToolbar ? null : /* @__PURE__ */ jsx(
+          GridToolbar,
+          {
+            labels,
+            search,
+            onSearch: (value) => {
+              setSearch(value);
+              resetPage();
+            },
+            activeFilters,
+            onClearFilters: () => {
+              setFiltersState({});
+              resetPage();
+            },
+            groupBy: structured ? groupBy : EMPTY_LIST,
+            columns,
+            onUngroup: (id) => setGroup(id, false),
+            density,
+            onDensity: setDensity,
+            hidden: layout.hidden,
+            onHidden: grid.setHidden,
+            onResetColumns: grid.reset,
+            onExport: exportFilename === false ? void 0 : exportCsv,
+            onExportXlsx: xlsxName ? exportToXlsx : void 0,
+            exportSelected: selectable && selection.length > 0,
+            rowCount: toolbarRows,
+            selectedCount: selectable ? selection.length : null,
+            actions: toolbarActions,
+            hideColumnPicker: toolPanel,
+            history: historyEnabled ? {
+              canUndo: historySummary.canUndo,
+              canRedo: historySummary.canRedo,
+              onUndo: undo,
+              onRedo: redo
+            } : void 0,
+            rowTools: structured && onRowsChange && (createRow || selectable) ? {
+              onAdd: createRow ? addRow : void 0,
+              onRemove: selectable ? removeSelectedRows : void 0,
+              removeDisabled: selection.length === 0
+            } : void 0,
+            toolPanel: toolPanel ? { open: panelOpen, onToggle: () => setPanelOpen(!panelOpen) } : void 0,
+            advancedFilter: showAdvancedFilter && !sourceActive ? /* @__PURE__ */ jsx(
+              FilterBuilder,
+              {
+                columns,
+                value: advanced,
+                onChange: (next) => {
+                  setAdvanced(next);
+                  resetPage();
+                },
+                valuesOf: (id) => {
+                  const column = byId.get(id);
+                  return column ? column.options ? [...column.options] : distinctValues(data, column) : [];
+                },
+                labels: labelsProp
+              }
+            ) : void 0,
+            advancedFilterCount: advancedCount,
+            onClearAdvancedFilter: () => setAdvanced(emptyGroup("and", "root"))
+          }
+        ),
+        formulasOn ? /* @__PURE__ */ jsx(
+          FormulaBar,
+          {
+            address: barCell && sourceIndex ? cellAddress(
+              sourceIndex.rows.get(barCell.row) ?? 0,
+              sourceIndex.cols.get(barCell.column.id) ?? 0
+            ) : "",
+            value: barRaw === null || barRaw === void 0 ? "" : String(barRaw),
+            editable: !!barCell && canWrite && canEdit(barCell.column, barCell.row),
+            error: barError,
+            labels: { bar: labels.formulaBar, cell: labels.formulaCell, empty: labels.formulaEmpty },
+            onCommit: commitBar,
+            onDiscard: () => focusCell(activeR, activeC)
+          }
+        ) : null,
+        sourceActive && remote.failed && remote.total !== null ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            className: "flex flex-wrap items-center gap-2 border-b-divider bg-danger-soft px-3 py-2 text-[13px] text-danger",
+            children: [
+              /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: labels.loadError }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded-control border border-danger px-2.5 py-1 font-[600] text-[12.5px] hover:bg-surface",
+                  onClick: remote.retry,
+                  children: labels.retry
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-col @2xl/grid:flex-row", children: [
+          toolPanel && panelOpen ? /* @__PURE__ */ jsx(
+            GridToolPanel,
+            {
+              labels,
+              columns: columnsProp,
+              shownColumns: columns,
+              order: layout.order,
+              hidden: layout.hidden,
+              onHidden: grid.setHidden,
+              onMove: grid.move,
+              groupBy,
+              onGroup: setGroup,
+              pivot: pivotConfig,
+              onPivot: (next) => {
+                setPivotConfig(next);
+                resetPage();
+              },
+              pivotValid,
+              canGroup: structured && !tree,
+              canPivot: !sourceActive,
+              maxHeight: height,
+              className: "order-first @2xl/grid:order-last"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollerRef,
+              onScroll: syncScroll,
+              className: "relative min-h-0 min-w-0 overflow-auto overscroll-contain @2xl/grid:flex-1",
+              style: paged ? void 0 : { maxHeight: height },
+              children: /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  ref: gridRef,
+                  role: "grid",
+                  "aria-label": ariaLabel,
+                  "aria-describedby": helpId,
+                  "aria-rowcount": busy ? -1 : rowCount,
+                  "aria-colcount": renderColumns.length,
+                  "aria-multiselectable": selectable || rangeSelection || void 0,
+                  "aria-busy": busy || void 0,
+                  onKeyDown: onGridKeyDown,
+                  onFocus: onGridFocus,
+                  onPaste,
+                  className: cn(
+                    "table-fixed border-separate border-spacing-0",
+                    rangeSelection && "select-none"
+                  ),
+                  style: { width: totalWidth, minWidth: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsxs("colgroup", { children: [
+                      renderColumns.slice(0, fillerIndex).map((entry) => /* @__PURE__ */ jsx("col", { style: { width: widthOf(entry) } }, idOfColumn(entry))),
+                      /* @__PURE__ */ jsx("col", {}),
+                      renderColumns.slice(fillerIndex).map((entry) => /* @__PURE__ */ jsx("col", { style: { width: widthOf(entry) } }, idOfColumn(entry)))
+                    ] }),
+                    /* @__PURE__ */ jsxs("thead", { children: [
+                      headerLevels.map((_, level) => renderGroupHeaderRow(level)),
+                      /* @__PURE__ */ jsxs("tr", { "aria-rowindex": groupLevels + 1, children: [
+                        headerCells.slice(0, fillerIndex),
+                        /* @__PURE__ */ jsx(
+                          "th",
+                          {
+                            role: "presentation",
+                            className: "sticky z-2 border-b-divider bg-surface",
+                            style: { top: headerTop, height: headerHeight }
+                          }
+                        ),
+                        headerCells.slice(fillerIndex)
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("tbody", { children: busy ? Array.from({ length: SKELETON_ROWS }, (_, index) => (
+                      // biome-ignore lint/suspicious/noArrayIndexKey: static placeholder rows.
+                      /* @__PURE__ */ jsxs("tr", { "aria-hidden": "true", style: { height: rowHeight }, children: [
+                        renderColumns.map((entry) => /* @__PURE__ */ jsx("td", { className: cn(cellBase), children: /* @__PURE__ */ jsx("span", { className: "block h-2.5 w-3/4 rounded-pill bg-surface-2 motion-safe:animate-pulse" }) }, idOfColumn(entry))),
+                        /* @__PURE__ */ jsx("td", { className: "border-b-divider" })
+                      ] }, index)
+                    )) : bodyLength === 0 ? /* @__PURE__ */ jsx("tr", { "aria-rowindex": groupLevels + 2, children: /* @__PURE__ */ jsx("td", { colSpan, className: "px-4 py-10 text-center text-[13px] text-ink-3", children: /* @__PURE__ */ jsxs("div", { className: "sticky left-0 inline-flex max-w-[calc(100cqw-2rem)] flex-col items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { children: sourceActive && remote.failed ? labels.loadError : emptyFiltered ? labels.emptyFiltered : emptyMessage ?? labels.empty }),
+                      sourceActive && remote.failed ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "rounded-control border-divider px-2.5 py-1 font-[600] text-[12.5px] text-ink-2 hover:text-ink",
+                          onClick: remote.retry,
+                          children: labels.retry
+                        }
+                      ) : emptyFiltered ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "rounded-control border-divider px-2.5 py-1 font-[600] text-[12.5px] text-ink-2 hover:text-ink",
+                          onClick: () => {
+                            setFiltersState({});
+                            setSearch("");
+                            setAdvanced(emptyGroup("and", "root"));
+                          },
+                          children: labels.clearFilters
+                        }
+                      ) : null
+                    ] }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      bodyRowsIn(0, topCount),
+                      spacer("gap-top", gapTop),
+                      bodyRowsIn(midStart, midEnd),
+                      spacer("gap-bottom", gapBottom),
+                      bodyRowsIn(bodyLength - bottomCount, bodyLength)
+                    ] }) }),
+                    footer ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { "aria-rowindex": rowCount, style: { height: rowHeight }, children: [
+                      footerCells.slice(0, fillerIndex),
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          role: "presentation",
+                          className: "sticky bottom-0 z-2 border-t-divider bg-surface"
+                        }
+                      ),
+                      footerCells.slice(fillerIndex)
+                    ] }) }) : null
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        rangeSelection ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-t-divider px-3 py-1.5 text-[12.5px] text-ink-2", children: stats && cellRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-[650] text-ink", children: labels.rangeCells(rangeCellCount) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            labels.rangeCount,
+            ":",
+            " ",
+            /* @__PURE__ */ jsx("b", { className: "font-[650] text-ink tabular-nums", children: stats.count })
+          ] }),
+          stats.numeric > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              labels.rangeSum,
+              ":",
+              " ",
+              /* @__PURE__ */ jsx("b", { className: "font-[650] text-ink tabular-nums", children: formatStat(stats.sum) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              labels.rangeAvg,
+              ":",
+              " ",
+              /* @__PURE__ */ jsx("b", { className: "font-[650] text-ink tabular-nums", children: formatStat(stats.avg) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "@max-sm/grid:hidden", children: [
+              labels.rangeMin,
+              ":",
+              " ",
+              /* @__PURE__ */ jsx("b", { className: "font-[650] text-ink tabular-nums", children: formatStat(stats.min) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "@max-sm/grid:hidden", children: [
+              labels.rangeMax,
+              ":",
+              " ",
+              /* @__PURE__ */ jsx("b", { className: "font-[650] text-ink tabular-nums", children: formatStat(stats.max) })
+            ] })
+          ] }) : null,
+          charts ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: openChart,
+              className: "ml-auto inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-[12px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
+              children: [
+                /* @__PURE__ */ jsx(BarChart3, { "aria-hidden": "true" }),
+                labels.chart
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: copyRange,
+              className: cn(
+                "inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-[12px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
+                !charts && "ml-auto"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+                labels.copyRange
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-ink-3", children: labels.rangeHint }) }) : null,
+        charts && chart ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-72 border-t-divider" }), children: /* @__PURE__ */ jsx(
+          ChartPanel,
+          {
+            data: chart.data,
+            kind: chart.kind,
+            onKind: (kind) => setChart({ ...chart, kind }),
+            onClose: () => setChart(null),
+            valueFormat: chart.currency ? "currency" : "number",
+            labels: {
+              title: labels.chartTitle(chart.cells),
+              kinds: labels.chartKinds,
+              kindGroup: labels.chartKindGroup,
+              close: labels.chartClose,
+              noData: labels.chartNoData,
+              other: labels.chartOther
+            }
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx("p", { id: helpId, className: "sr-only", children: labels.keyboardHelp }),
+        /* @__PURE__ */ jsx("p", { className: "sr-only", role: "status", "aria-live": "polite", children: busy ? labels.loading : announcement }),
+        paged && split.middle.length > 0 ? /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            labels,
+            page: currentPage,
+            pages,
+            pageSize,
+            total: split.middle.length,
+            options: pageSizeOptions,
+            onPage: setPage,
+            onPageSize: (size) => {
+              setPageSize(size);
+              setPage(0);
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Pagination({
+  labels,
+  page,
+  pages,
+  pageSize,
+  total,
+  options,
+  onPage,
+  onPageSize
+}) {
+  const first = page * pageSize + 1;
+  const last = Math.min(total, (page + 1) * pageSize);
+  const button = "grid size-8 place-items-center rounded-control text-ink-2 hover:bg-surface-2 hover:text-ink disabled:pointer-events-none disabled:opacity-35 [&_svg]:size-4";
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": labels.rowsPerPage,
+      className: "flex flex-wrap items-center justify-end gap-x-3 gap-y-1 border-t-divider px-2 py-1.5 text-[12.5px] text-ink-2",
+      children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.rowsPerPage }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: pageSize,
+              onChange: (event) => onPageSize(Number(event.target.value)),
+              className: "h-control-sm rounded-input border-control bg-surface-control px-1.5 text-[12.5px] text-ink",
+              children: [.../* @__PURE__ */ new Set([...options, pageSize])].sort((a, b) => a - b).map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "tabular-nums", children: labels.pageRange(first, last, total) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: button,
+              "aria-label": labels.firstPage,
+              disabled: page === 0,
+              onClick: () => onPage(0),
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: button,
+              "aria-label": labels.previousPage,
+              disabled: page === 0,
+              onClick: () => onPage(page - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: button,
+              "aria-label": labels.nextPage,
+              disabled: page >= pages - 1,
+              onClick: () => onPage(page + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: button,
+              "aria-label": labels.lastPage,
+              disabled: page >= pages - 1,
+              onClick: () => onPage(pages - 1),
+              children: /* @__PURE__ */ jsx(ChevronsRight, { "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DataGrid,
+  downloadCSV,
+  downloadFile
+};