@elabs-ai/components-data 4.2.0 → 5.0.0

package/dist/chunk-K2GHSRCP.js

@@ -0,0 +1,1823 @@
+"use client";
+import {
+  useTableBreakpoint
+} from "./chunk-BEYHV3ZX.js";
+import {
+  HeatmapCell,
+  HeatmapLegend,
+  heatmapCellStyle
+} from "./chunk-NKVJUQYW.js";
+import {
+  MarkdownCell
+} from "./chunk-MV2YVXEZ.js";
+import {
+  SparklineCell
+} from "./chunk-HG2YMSRM.js";
+import {
+  columnSizeStyle,
+  formatCellValue,
+  resolveShowAt
+} from "./chunk-TBB33PHQ.js";
+import {
+  DataTableRankCell,
+  DataTableRankHeader,
+  computeRowRanks
+} from "./chunk-XN6O6Z2N.js";
+import {
+  stickyRowPinning,
+  withoutStickyRows
+} from "./chunk-47ZBQZYS.js";
+import {
+  DataTableCard,
+  DataTableCardList
+} from "./chunk-KCB33PD3.js";
+import {
+  CategoryLegend
+} from "./chunk-ZUCGV2XD.js";
+import {
+  ColumnsCell
+} from "./chunk-GBO56756.js";
+import {
+  BarCell
+} from "./chunk-SK6347WB.js";
+import {
+  computeColumnScales,
+  extentOf,
+  labelBoxCh,
+  seriesEnds,
+  seriesValues
+} from "./chunk-VCLA45IC.js";
+
+// src/data-table/data-table.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from "lucide-react";
+import {
+  Button,
+  Checkbox,
+  Skeleton,
+  Spinner,
+  StatePanel,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function numericColumnClasses(meta) {
+  if (!meta?.numeric && !meta?.align) return void 0;
+  const alignClass = meta?.align === "start" ? "text-start" : meta?.align === "center" ? "text-center" : meta?.align === "end" ? "text-end" : meta?.numeric ? "text-end" : void 0;
+  return cn(alignClass, meta?.numeric && "tabular-nums");
+}
+function rowKeyValue(original, key) {
+  const v = (original ?? {})[key];
+  return typeof v === "string" || typeof v === "number" && Number.isFinite(v) ? v : null;
+}
+function colorByStyle(target, color) {
+  if (!color) return void 0;
+  return target === "background" ? { backgroundColor: `color-mix(in oklab, ${color} 22%, transparent)` } : { color: `color-mix(in oklab, ${color} 35%, var(--foreground))` };
+}
+var ROW_ACTION_CLASS = "sr-only focus-visible:outline-none";
+function exactSearchMatch(value, query) {
+  const q = String(query ?? "").trim().toLowerCase();
+  if (q === "") return true;
+  return value !== null && value !== void 0 && String(value).trim().toLowerCase() === q;
+}
+var ROW_CLICK_GUARD_SELECTOR = 'button, a[href], input, select, textarea, label, summary, [role="button"], [role="link"], [role="menuitem"], [role="checkbox"], [role="radio"], [role="switch"], [role="tab"], [contenteditable="true"]';
+function isInteractiveEventTarget(target) {
+  return target instanceof Element && target.closest(ROW_CLICK_GUARD_SELECTOR) !== null;
+}
+function isActiveTextSelection() {
+  if (typeof window === "undefined" || typeof window.getSelection !== "function") return false;
+  return window.getSelection()?.type === "Range";
+}
+var PINNED_SEAM_CLASS = "after:pointer-events-none after:absolute after:inset-y-0 after:w-px after:bg-border-strong after:content-['']";
+var COLUMN_DIVIDER_CLASS = "border-e border-rule last:border-e-0";
+function unsizedColumnIds(defs) {
+  const out = /* @__PURE__ */ new Set();
+  const walk = (list) => {
+    for (const def of list) {
+      const group = def;
+      if (group.columns) {
+        walk(group.columns);
+        continue;
+      }
+      if (def.size !== void 0) continue;
+      const accessorKey = def.accessorKey;
+      const id = def.id ?? (accessorKey !== void 0 ? String(accessorKey).replace(/\./gu, "_") : typeof def.header === "string" ? def.header : void 0);
+      if (id) out.add(id);
+    }
+  };
+  walk(defs);
+  return out;
+}
+function resizeWidthStyle(size) {
+  return { width: size, minWidth: size, maxWidth: size };
+}
+function firstDataCellValue(row) {
+  for (const cell of row.getVisibleCells()) {
+    if (!cell.column.accessorFn) continue;
+    const value = cell.getValue();
+    if (typeof value === "string" && value.trim() !== "") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return void 0;
+}
+function SelectAllHeaderCell({ table }) {
+  const { t } = useLocale();
+  const allSelected = table.getIsAllPageRowsSelected();
+  const someSelected = table.getIsSomePageRowsSelected();
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      "data-slot": "data-table-select-all",
+      checked: allSelected ? true : someSelected ? "indeterminate" : false,
+      onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked === true),
+      "aria-label": t("data.table.selectAllRows")
+    }
+  );
+}
+function SelectRowCell({ row }) {
+  const { t } = useLocale();
+  const name = firstDataCellValue(row);
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      "data-slot": "data-table-select-cell",
+      checked: row.getIsSelected(),
+      disabled: !row.getCanSelect(),
+      onCheckedChange: (checked) => row.toggleSelected(checked === true),
+      "aria-label": name ? t("data.table.selectRowNamed", { name }) : t("data.table.selectRow")
+    }
+  );
+}
+function createSelectionColumn() {
+  return {
+    id: "select",
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => (
+      // #11 C1: `toggleAllPageRowsSelected` wipes-then-sets on every row when
+      // `enableMultiRowSelection` is off (TanStack's `mutateRowIsSelected`), so
+      // a select-all header under single-select leaves only the LAST row
+      // selected and pins the header at indeterminate forever. Suppress it.
+      table.options.enableMultiRowSelection === false ? null : /* @__PURE__ */ jsx(SelectAllHeaderCell, { table })
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsx(SelectRowCell, { row })
+  };
+}
+function SortableDataRow({
+  id,
+  disabled,
+  attributesOverride,
+  children
+}) {
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, isDragging } = useSortable({ id, disabled, transition: null, attributes: attributesOverride });
+  return /* @__PURE__ */ jsx(Fragment, { children: children({
+    setNodeRef,
+    setActivatorNodeRef,
+    attributes,
+    listeners,
+    isDragging,
+    style: { transform: CSS.Transform.toString(transform) }
+  }) });
+}
+function DataTableInner({
+  columns,
+  data,
+  toolbar,
+  enablePagination = false,
+  pageSize = 10,
+  hidePaginationWhenSingle = true,
+  // Global filter
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  // Controlled slices
+  sorting: sortingProp,
+  onSortingChange: onSortingChangeProp,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange: onColumnVisibilityChangeProp,
+  columnFilters: columnFiltersProp,
+  onColumnFiltersChange: onColumnFiltersChangeProp,
+  pagination: paginationProp,
+  onPaginationChange: onPaginationChangeProp,
+  columnPinning: columnPinningProp,
+  onColumnPinningChange: onColumnPinningChangeProp,
+  enableColumnResizing = false,
+  columnResizeMode = "onChange",
+  columnSizing: columnSizingProp,
+  onColumnSizingChange: onColumnSizingChangeProp,
+  rowSelection: rowSelectionProp,
+  onRowSelectionChange: onRowSelectionChangeProp,
+  enableRowSelection,
+  enableMultiRowSelection,
+  getRowId,
+  // Saved views rehydration
+  initialView,
+  // Server-side model
+  manualSorting = false,
+  manualFiltering = false,
+  manualPagination = false,
+  rowCount,
+  pageCount,
+  onServerChange,
+  // Loading
+  loading = false,
+  loadingRows,
+  // Virtualization
+  enableRowVirtualization = false,
+  estimateRowHeight = 40,
+  overscan = 8,
+  maxBodyHeight = "32rem",
+  zebra = true,
+  columnDividers = false,
+  // Presentation (RM-123)
+  layout = "table",
+  stickyRows,
+  showRanks = false,
+  rankLabel,
+  density = "default",
+  mergeEmptyHeaders = false,
+  searchMode = "contains",
+  hideHeader = false,
+  // Row drag-reorder (#13)
+  enableRowReorder = false,
+  onRowReorder,
+  rowReorderHandle = "cell",
+  onRowClick,
+  rowActionLabel,
+  rowClassName,
+  caption,
+  emptyMessage = "No results.",
+  className,
+  ...rest
+}, ref) {
+  const { t, dir, formatNumber } = useLocale();
+  const isSortingControlled = sortingProp !== void 0;
+  const isColumnVisibilityControlled = columnVisibilityProp !== void 0;
+  const isColumnFiltersControlled = columnFiltersProp !== void 0;
+  const isPaginationControlled = paginationProp !== void 0;
+  const isFilterControlled = globalFilterProp !== void 0;
+  const isColumnPinningControlled = columnPinningProp !== void 0;
+  const isColumnSizingControlled = columnSizingProp !== void 0;
+  const isRowSelectionControlled = rowSelectionProp !== void 0;
+  const [internalSorting, setInternalSorting] = useState(
+    () => initialView?.sorting ?? []
+  );
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState(
+    () => initialView?.columnVisibility ?? {}
+  );
+  const [internalColumnFilters, setInternalColumnFilters] = useState(
+    () => initialView?.columnFilters ?? []
+  );
+  const [internalPagination, setInternalPagination] = useState(
+    () => initialView?.pagination ?? {
+      pageIndex: 0,
+      pageSize
+    }
+  );
+  const [internalGlobalFilter, setInternalGlobalFilter] = useState(
+    () => initialView?.globalFilter ?? ""
+  );
+  const [internalColumnPinning, setInternalColumnPinning] = useState(
+    () => initialView?.columnPinning ?? { left: [], right: [] }
+  );
+  const [internalColumnSizing, setInternalColumnSizing] = useState(
+    () => initialView?.columnSizing ?? {}
+  );
+  const [internalRowSelection, setInternalRowSelection] = useState(
+    () => initialView?.rowSelection ?? {}
+  );
+  const sorting = isSortingControlled ? sortingProp : internalSorting;
+  const columnVisibility = isColumnVisibilityControlled ? columnVisibilityProp : internalColumnVisibility;
+  const columnFilters = isColumnFiltersControlled ? columnFiltersProp : internalColumnFilters;
+  const pagination = isPaginationControlled ? paginationProp : internalPagination;
+  const globalFilter = isFilterControlled ? globalFilterProp : internalGlobalFilter;
+  const columnPinning = isColumnPinningControlled ? columnPinningProp : internalColumnPinning;
+  const columnSizing = isColumnSizingControlled ? columnSizingProp : internalColumnSizing;
+  const rowSelection = isRowSelectionControlled ? rowSelectionProp : internalRowSelection;
+  const sortingRef = useRef(sorting);
+  sortingRef.current = sorting;
+  const columnFiltersRef = useRef(columnFilters);
+  columnFiltersRef.current = columnFilters;
+  const paginationRef = useRef(pagination);
+  paginationRef.current = pagination;
+  const globalFilterRef = useRef(globalFilter);
+  globalFilterRef.current = globalFilter;
+  const columnVisibilityRef = useRef(columnVisibility);
+  columnVisibilityRef.current = columnVisibility;
+  const columnPinningRef = useRef(columnPinning);
+  columnPinningRef.current = columnPinning;
+  const columnSizingRef = useRef(columnSizing);
+  columnSizingRef.current = columnSizing;
+  const rowSelectionRef = useRef(rowSelection);
+  rowSelectionRef.current = rowSelection;
+  const warnedMissingRowCountRef = useRef(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && manualPagination && rowCount === void 0 && pageCount === void 0 && !warnedMissingRowCountRef.current) {
+      warnedMissingRowCountRef.current = true;
+      console.warn(
+        '[DataTable] `manualPagination` is true but neither `rowCount` nor `pageCount` was provided \u2014 the pager will appear stuck ("Page 1 of 1", Next disabled). Pass `rowCount` (or `pageCount`) so the pager can compute the total.'
+      );
+    }
+  }, [manualPagination, rowCount, pageCount]);
+  const warnedManualSelectionRef = useRef(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && manualPagination && getRowId === void 0 && (isRowSelectionControlled || onRowSelectionChangeProp !== void 0) && !warnedManualSelectionRef.current) {
+      warnedManualSelectionRef.current = true;
+      console.warn(
+        '[DataTable] `rowSelection` is wired up under `manualPagination` with no `getRowId` \u2014 each page is a fresh `data` array, so the default index-based id restarts at "0" per page and a selection made on one page can silently apply to a different record on the next. Pass `getRowId` so selection is keyed to a stable identity instead of position.'
+      );
+    }
+  }, [manualPagination, getRowId, isRowSelectionControlled, onRowSelectionChangeProp]);
+  const warnedReorderSortingRef = useRef(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && enableRowReorder && sorting.length > 0 && !warnedReorderSortingRef.current) {
+      warnedReorderSortingRef.current = true;
+      console.warn(
+        "[DataTable] `enableRowReorder` is set while a column is sorted \u2014 the sort will keep re-ordering rows out from under a manual drag. Clear `sorting` (or avoid enabling both at once) so a drag's new order stays stable."
+      );
+    }
+  }, [enableRowReorder, sorting.length]);
+  const warnedReorderVirtualizedRef = useRef(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && enableRowReorder && enableRowVirtualization && !warnedReorderVirtualizedRef.current) {
+      warnedReorderVirtualizedRef.current = true;
+      console.warn(
+        "[DataTable] `enableRowReorder` has no effect while `enableRowVirtualization` is set \u2014 the two are mutually exclusive. Virtualization wins; row reorder is disabled."
+      );
+    }
+  }, [enableRowReorder, enableRowVirtualization]);
+  const rowReorderActive = enableRowReorder && !enableRowVirtualization;
+  const hasGripColumn = rowReorderActive && rowReorderHandle === "cell";
+  const reorderSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const reorderIdentityMapRef = useRef(/* @__PURE__ */ new WeakMap());
+  const reorderIdentityCounterRef = useRef(0);
+  const reorderRepeatedPositions = useMemo(() => {
+    const repeats = /* @__PURE__ */ new Set();
+    if (!rowReorderActive) return repeats;
+    const seen = /* @__PURE__ */ new Set();
+    data.forEach((record, index) => {
+      if (record === null || typeof record !== "object") return;
+      if (seen.has(record)) repeats.add(index);
+      else seen.add(record);
+    });
+    return repeats;
+  }, [data, rowReorderActive]);
+  const [reorderLiveMessage, setReorderLiveMessage] = useState("");
+  const reorderLastAnnouncedPositionRef = useRef(null);
+  function fireServerChange(overrides = {}) {
+    if (!onServerChange) return;
+    onServerChange({
+      pagination: paginationRef.current,
+      sorting: sortingRef.current,
+      columnFilters: columnFiltersRef.current,
+      globalFilter: globalFilterRef.current,
+      ...overrides
+    });
+  }
+  function resolveSorting(updater) {
+    return typeof updater === "function" ? updater(sortingRef.current) : updater;
+  }
+  function resolveColumnVisibility(updater) {
+    return typeof updater === "function" ? updater(columnVisibilityRef.current) : updater;
+  }
+  function resolveColumnFilters(updater) {
+    return typeof updater === "function" ? updater(columnFiltersRef.current) : updater;
+  }
+  function resolvePagination(updater) {
+    return typeof updater === "function" ? updater(paginationRef.current) : updater;
+  }
+  function resolveGlobalFilter(updater) {
+    return typeof updater === "function" ? updater(globalFilterRef.current) : updater;
+  }
+  function resolveColumnPinning(updater) {
+    return typeof updater === "function" ? updater(columnPinningRef.current) : updater;
+  }
+  function resolveColumnSizing(updater) {
+    return typeof updater === "function" ? updater(columnSizingRef.current) : updater;
+  }
+  function resolveRowSelection(updater) {
+    return typeof updater === "function" ? updater(rowSelectionRef.current) : updater;
+  }
+  const sortedRowModel = manualSorting ? {} : { getSortedRowModel: getSortedRowModel() };
+  const filteredRowModel = manualFiltering ? {} : {
+    getFilteredRowModel: stickyRows ? withoutStickyRows(getFilteredRowModel()) : getFilteredRowModel()
+  };
+  const paginationRowModel = enablePagination && !manualPagination ? { getPaginationRowModel: getPaginationRowModel() } : {};
+  const rowPinning = useMemo(
+    () => stickyRowPinning(data, stickyRows, getRowId),
+    [data, stickyRows, getRowId]
+  );
+  const stickyActive = (rowPinning.top?.length ?? 0) + (rowPinning.bottom?.length ?? 0) > 0;
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      columnFilters,
+      globalFilter,
+      pagination,
+      columnPinning,
+      columnSizing,
+      rowSelection,
+      ...stickyActive ? { rowPinning } : {}
+    },
+    ...stickyActive ? { enableRowPinning: true, keepPinnedRows: true } : {},
+    // RM-123 `searchMode="exact"`: a row matches when one cell EQUALS the query.
+    ...searchMode === "exact" ? {
+      globalFilterFn: (row, columnId, filterValue) => exactSearchMatch(row.getValue(columnId), filterValue)
+    } : {},
+    // Sorting
+    onSortingChange: (updater) => {
+      const next = resolveSorting(updater);
+      if (!isSortingControlled) setInternalSorting(next);
+      onSortingChangeProp?.(updater);
+      if (manualSorting) {
+        sortingRef.current = next;
+        fireServerChange({ sorting: next });
+      }
+    },
+    // Column visibility
+    onColumnVisibilityChange: (updater) => {
+      const next = resolveColumnVisibility(updater);
+      if (!isColumnVisibilityControlled) setInternalColumnVisibility(next);
+      onColumnVisibilityChangeProp?.(updater);
+    },
+    // Column filters
+    onColumnFiltersChange: (updater) => {
+      const next = resolveColumnFilters(updater);
+      if (!isColumnFiltersControlled) setInternalColumnFilters(next);
+      onColumnFiltersChangeProp?.(updater);
+      if (manualFiltering) {
+        columnFiltersRef.current = next;
+        fireServerChange({ columnFilters: next });
+      }
+    },
+    // Global filter
+    onGlobalFilterChange: (updater) => {
+      const next = resolveGlobalFilter(updater);
+      if (!isFilterControlled) setInternalGlobalFilter(next);
+      onGlobalFilterChange?.(next);
+      if (manualFiltering) {
+        globalFilterRef.current = next;
+        fireServerChange({ globalFilter: next });
+      }
+    },
+    // Pagination
+    onPaginationChange: (updater) => {
+      const next = resolvePagination(updater);
+      if (!isPaginationControlled) setInternalPagination(next);
+      onPaginationChangeProp?.(updater);
+      if (manualPagination) {
+        paginationRef.current = next;
+        fireServerChange({ pagination: next });
+      }
+    },
+    // Column pinning — a LAYOUT slice, so unlike sorting/filtering/pagination it
+    // never fires `onServerChange`: freezing a column changes nothing the server
+    // would need to re-query.
+    onColumnPinningChange: (updater) => {
+      const next = resolveColumnPinning(updater);
+      if (!isColumnPinningControlled) setInternalColumnPinning(next);
+      onColumnPinningChangeProp?.(updater);
+    },
+    // Column resizing (#12) — a LAYOUT slice, like column pinning: a column's
+    // width changes nothing the server would need to re-query, so this never
+    // fires onServerChange either. Routed through by BOTH the pointer path
+    // (TanStack's own `header.getResizeHandler()`, wired below) and the
+    // keyboard path (`handleResizeKeyDown`, via `table.setColumnSizing`) so
+    // the two input modes can never diverge in controlled/uncontrolled
+    // behaviour.
+    columnResizeMode,
+    // RTL fix (#12 review, P1): TanStack's pointer-drag math hardcodes LTR
+    // unless told otherwise — `deltaDirection = columnResizeDirection ===
+    // 'rtl' ? -1 : 1` internally — so under `dir="rtl"` (the resize handle's
+    // own edge already flips via `end-0`, see the `useLocale()` call above)
+    // dragging would otherwise move the column's width opposite the visible
+    // boundary. `handleResizeKeyDown` below mirrors this for the keyboard path.
+    columnResizeDirection: dir,
+    enableColumnResizing,
+    onColumnSizingChange: (updater) => {
+      const next = resolveColumnSizing(updater);
+      if (!isColumnSizingControlled) setInternalColumnSizing(next);
+      onColumnSizingChangeProp?.(updater);
+    },
+    // Row selection (#11) — also a LAYOUT/UI slice, so it never fires
+    // onServerChange: which rows are checked changes nothing the server
+    // would need to re-query.
+    onRowSelectionChange: (updater) => {
+      const next = resolveRowSelection(updater);
+      if (!isRowSelectionControlled) setInternalRowSelection(next);
+      onRowSelectionChangeProp?.(updater);
+    },
+    enableRowSelection,
+    enableMultiRowSelection,
+    getRowId,
+    getCoreRowModel: getCoreRowModel(),
+    ...sortedRowModel,
+    ...filteredRowModel,
+    ...paginationRowModel,
+    // Server-side options
+    manualSorting,
+    manualFiltering,
+    manualPagination,
+    ...rowCount !== void 0 ? { rowCount } : {},
+    ...pageCount !== void 0 ? { pageCount } : {}
+    // No `initialState`: every slice is driven explicitly via `state` above
+    // (internal slices are seeded from `initialView` at useState init), so a
+    // TanStack `initialState` would be dead/misleading.
+  });
+  const rows = stickyActive ? table.getCenterRows() : table.getRowModel().rows;
+  const topRows = stickyActive ? table.getTopRows() : [];
+  const bottomRows = stickyActive ? table.getBottomRows() : [];
+  const leafColumns = table.getAllLeafColumns();
+  const coreRows = table.getCoreRowModel().rows;
+  const needsScales = leafColumns.some(
+    (c) => c.columnDef.meta?.visual !== void 0 || c.columnDef.meta?.colorBy !== void 0
+  );
+  const columnScales = useMemo(
+    () => needsScales ? computeColumnScales(
+      leafColumns.map((c) => ({ id: c.id, meta: c.columnDef.meta })),
+      coreRows
+    ) : null,
+    [needsScales, leafColumns, coreRows]
+  );
+  const labelBoxes = useMemo(() => {
+    const boxes = /* @__PURE__ */ new Map();
+    for (const column of leafColumns) {
+      const meta = column.columnDef.meta;
+      const visual = meta?.visual;
+      const labelOf = (value) => formatCellValue(value, meta?.format, formatNumber);
+      if (visual?.kind === "bar" && visual.style !== "slim") {
+        boxes.set(column.id, {
+          value: labelBoxCh(coreRows.map((row) => labelOf(row.getValue(column.id))))
+        });
+      }
+      if (visual?.kind === "sparkline" && visual.labels === "ends") {
+        const ends = coreRows.map((row) => seriesEnds(seriesValues(row.original, visual.keys))).filter((pair) => pair !== null);
+        boxes.set(column.id, {
+          ends: [
+            labelBoxCh(ends.map(([first]) => labelOf(first))),
+            labelBoxCh(ends.map(([, last]) => labelOf(last)))
+          ]
+        });
+      }
+    }
+    return boxes;
+  }, [leafColumns, coreRows, formatNumber]);
+  const rowRanks = useMemo(
+    () => showRanks ? computeRowRanks(
+      coreRows.map((r) => r.id),
+      /* @__PURE__ */ new Set([...rowPinning.top ?? [], ...rowPinning.bottom ?? []])
+    ) : null,
+    [showRanks, coreRows, rowPinning]
+  );
+  const hasShowAt = leafColumns.some((c) => c.columnDef.meta?.showAt !== void 0);
+  const { ref: breakpointRef, breakpoint } = useTableBreakpoint(
+    layout === "auto" || hasShowAt
+  );
+  const cardsActive = layout === "cards" || layout === "auto" && breakpoint === "narrow";
+  const warnedCardReorderRef = useRef(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && cardsActive && enableRowReorder && !warnedCardReorderRef.current) {
+      warnedCardReorderRef.current = true;
+      console.warn(
+        '[DataTable] `enableRowReorder` is ignored in the card layout \u2014 a card list has no grip column and no drop target, so `onRowReorder` will never fire. Keep `layout="table"` for reordering, or offer the move as a row action in cards.'
+      );
+    }
+  }, [cardsActive, enableRowReorder]);
+  const presentationAttrs = layout !== "table" || hasShowAt ? {
+    "data-layout": cardsActive ? "cards" : "table",
+    "data-breakpoint": layout === "auto" || hasShowAt ? breakpoint : void 0
+  } : null;
+  const isColumnShown = (column) => resolveShowAt(column.columnDef.meta?.showAt, breakpoint);
+  const rootRef = useCallback(
+    (node) => {
+      breakpointRef(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [breakpointRef, ref]
+  );
+  const captionId = useId();
+  const headerGroupsForCards = table.getHeaderGroups();
+  const leadingColCount = (hasGripColumn ? 1 : 0) + (showRanks ? 1 : 0);
+  const colCount = table.getVisibleLeafColumns().filter(isColumnShown).length;
+  const headerRowCount = table.getHeaderGroups().length;
+  const centreRowCount = rowCount ?? rows.length;
+  const ariaRowCount = centreRowCount + topRows.length + bottomRows.length + headerRowCount;
+  const firstCentreRowIndex = headerRowCount + topRows.length + 1;
+  function reorderRowName(id) {
+    const row = rows.find((r) => getReorderRowId(r) === id);
+    return row ? rowActionName(row) : id;
+  }
+  function reorderPosition(id) {
+    return rows.findIndex((r) => getReorderRowId(r) === id) + 1;
+  }
+  function getReorderRowId(row) {
+    if (getRowId) return row.id;
+    const original = row.original;
+    if (original !== null && typeof original === "object") {
+      const map = reorderIdentityMapRef.current;
+      let id = map.get(original);
+      if (id === void 0) {
+        id = `__reorder-${reorderIdentityCounterRef.current++}`;
+        map.set(original, id);
+      }
+      return reorderRepeatedPositions.has(row.index) ? `${id}__${row.index}` : id;
+    }
+    return row.id;
+  }
+  const silentDragAnnouncements = {
+    onDragStart: () => void 0,
+    onDragOver: () => void 0,
+    onDragEnd: () => void 0,
+    onDragCancel: () => void 0
+  };
+  function handleRowDragStart(event) {
+    const activeRowId = String(event.active.id);
+    reorderLastAnnouncedPositionRef.current = reorderPosition(activeRowId);
+    setReorderLiveMessage(t("data.table.reorderPickedUp", { name: reorderRowName(activeRowId) }));
+  }
+  function handleRowDragOver(event) {
+    const { active, over } = event;
+    if (!over) return;
+    const position = reorderPosition(String(over.id));
+    if (position === reorderLastAnnouncedPositionRef.current) return;
+    reorderLastAnnouncedPositionRef.current = position;
+    setReorderLiveMessage(
+      t("data.table.reorderMoved", {
+        name: reorderRowName(String(active.id)),
+        position,
+        total: rows.length
+      })
+    );
+  }
+  function handleRowDragCancel(event) {
+    const activeRowId = String(event.active.id);
+    setReorderLiveMessage(
+      t("data.table.reorderCancelled", {
+        name: reorderRowName(activeRowId),
+        position: reorderPosition(activeRowId),
+        total: rows.length
+      })
+    );
+    reorderLastAnnouncedPositionRef.current = null;
+  }
+  function handleRowDragEnd(event) {
+    const { active, over } = event;
+    const activeRowId = String(active.id);
+    setReorderLiveMessage(
+      t("data.table.reorderDropped", {
+        name: reorderRowName(activeRowId),
+        position: reorderPosition(String(over ? over.id : active.id)),
+        total: rows.length
+      })
+    );
+    reorderLastAnnouncedPositionRef.current = null;
+    if (!over || active.id === over.id) return;
+    const movedRow = rows.find((r) => getReorderRowId(r) === activeRowId);
+    const targetRow = rows.find((r) => getReorderRowId(r) === String(over.id));
+    if (!movedRow || !targetRow) return;
+    const from = movedRow.index;
+    const to = targetRow.index;
+    if (from < 0 || from >= data.length || to < 0 || to >= data.length) return;
+    onRowReorder?.(from, to, movedRow.original);
+  }
+  const hasLeftPinned = (columnPinning.left?.length ?? 0) > 0;
+  const hasRightPinned = (columnPinning.right?.length ?? 0) > 0;
+  const pinnedScrollPadding = {
+    ...hasLeftPinned ? { scrollPaddingInlineStart: table.getLeftTotalSize() } : {},
+    ...hasRightPinned ? { scrollPaddingInlineEnd: table.getRightTotalSize() } : {}
+  };
+  const warnedUnsizedPinnedRef = useRef(false);
+  const pinnedIds = [...columnPinning.left ?? [], ...columnPinning.right ?? []];
+  const unsizedIds = process.env.NODE_ENV === "production" || pinnedIds.length === 0 ? null : unsizedColumnIds(columns);
+  const pinnedWithoutSizeKey = unsizedIds ? pinnedIds.filter((id) => unsizedIds.has(id)).join(",") : "";
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && pinnedWithoutSizeKey !== "" && !warnedUnsizedPinnedRef.current) {
+      warnedUnsizedPinnedRef.current = true;
+      console.warn(
+        `[DataTable] Pinned column(s) without an explicit \`size\` in their \`ColumnDef\`: ${pinnedWithoutSizeKey}. Sticky offsets are computed from the declared sizes, so an auto-width pinned column will render at a width that doesn't match its own offset. Give every pinned column a \`size\`.`
+      );
+    }
+  }, [pinnedWithoutSizeKey]);
+  function pinnedCellGeometry(column) {
+    const pinned = column.getIsPinned();
+    if (pinned === false) return null;
+    const size = column.getSize();
+    const style = {
+      width: size,
+      minWidth: size,
+      maxWidth: size,
+      ...pinned === "left" ? { left: column.getStart("left") } : { right: column.getAfter("right") }
+    };
+    return {
+      pinned,
+      style,
+      // The seam between the frozen block and the scrolling block is the SOLE
+      // structural cue between two regions that share one row fill and one
+      // zebra stripe — delete it and a sighted user cannot tell them apart — so
+      // it takes the strong rung (ADR 0010 decision test). No shadow: ADR 0020's
+      // `--shadow-strength: 0` (`data-decoration="8|9|10"`) would
+      // erase a shadow-only cue entirely.
+      //
+      // It is drawn as a 1px `::after` INSIDE the cell, NOT as `border-e` /
+      // `border-s`. A real border cannot work here: Tailwind's Preflight puts
+      // the table in the COLLAPSED border model, and a collapsed border is
+      // painted by the <table> at the cell's STATIC position — it does not
+      // travel with a `position: sticky` cell, and the cell's own opaque fill
+      // (which it needs, see `pinnedCellFillClass`) then paints over it. Measured
+      // in Chromium on `Data/DataTable → PinnedColumns`: with `border-e` the
+      // seam pixel read `143,143,143` (light `--border-strong`) at
+      // scrollLeft 0 and `245,245,245` (the plain cell fill — i.e. GONE) once
+      // scrolled, in every theme and on both edges. So the one cue vanished
+      // exactly when the freeze was doing something. The `::after` lives in the
+      // sticky cell's own stacking context, so it moves with it.
+      edgeClass: pinned === "left" ? column.getIsLastColumn("left") ? PINNED_SEAM_CLASS + " after:end-0" : "" : column.getIsFirstColumn("right") ? PINNED_SEAM_CLASS + " after:start-0" : ""
+    };
+  }
+  const RESIZE_STEP = 10;
+  const RESIZE_UNBOUNDED_ARIA_MAX = 2e3;
+  function handleResizeKeyDown(event, column) {
+    let delta = 0;
+    if (event.key === "ArrowRight") delta = RESIZE_STEP;
+    else if (event.key === "ArrowLeft") delta = -RESIZE_STEP;
+    else return;
+    event.preventDefault();
+    if (dir === "rtl") delta = -delta;
+    const minSize = column.columnDef.minSize ?? 20;
+    const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+    const nextSize = Math.min(maxSize, Math.max(minSize, column.getSize() + delta));
+    table.setColumnSizing((old) => ({ ...old, [column.id]: nextSize }));
+  }
+  function handleResizeDoubleClick(column) {
+    table.setColumnSizing((old) => {
+      if (!(column.id in old)) return old;
+      const { [column.id]: _removed, ...rest2 } = old;
+      return rest2;
+    });
+  }
+  const scrollRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: enableRowVirtualization ? rows.length : 0,
+    getScrollElement: () => enableRowVirtualization ? scrollRef.current : null,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    enabled: enableRowVirtualization
+  });
+  const virtualItems = enableRowVirtualization ? virtualizer.getVirtualItems() : [];
+  const totalSize = enableRowVirtualization ? virtualizer.getTotalSize() : 0;
+  const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
+  const paddingBottom = totalSize > 0 ? totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0) : 0;
+  const plainScrollRef = useRef(null);
+  const [scrollOverflows, setScrollOverflows] = useState(false);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollAffordance = useCallback(() => {
+    const el = plainScrollRef.current;
+    if (!el) return;
+    setScrollOverflows(
+      el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1
+    );
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  useEffect(() => {
+    const el = plainScrollRef.current;
+    if (!el) return;
+    updateScrollAffordance();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateScrollAffordance);
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  }, [updateScrollAffordance, colCount, rows.length, cardsActive]);
+  const showEmpty = !loading && rows.length === 0;
+  const showSkeletons = loading && rows.length === 0;
+  const skeletonRowCount = loadingRows ?? pageSize;
+  const headerHeightClass = density === "compact" ? "h-8" : "h-10";
+  const cellPadYClass = density === "compact" ? "py-1" : "py-2";
+  const defaultCellRenderer = table._getDefaultColumnDef().cell;
+  const rowColorColumns = leafColumns.filter((c) => c.columnDef.meta?.colorBy?.scope === "row");
+  function cellLabel(value, meta) {
+    return formatCellValue(value, meta?.format, formatNumber);
+  }
+  function renderCellContent(cell) {
+    const meta = cell.column.columnDef.meta;
+    const visual = meta?.visual;
+    const value = cell.getValue();
+    const scale = columnScales?.get(cell.column.id);
+    if (visual?.kind === "bar") {
+      return /* @__PURE__ */ jsx(
+        BarCell,
+        {
+          value: typeof value === "number" ? value : null,
+          label: cellLabel(value, meta),
+          domain: scale?.barDomain ?? [0, 0],
+          variant: visual.style,
+          track: visual.track,
+          fillColor: visual.colorBy ? scale?.barCategory?.colorOf(rowKeyValue(cell.row.original, visual.colorBy)) : void 0,
+          negativeColor: visual.negative !== false,
+          labelWidth: labelBoxes.get(cell.column.id)?.value
+        }
+      );
+    }
+    if (visual?.kind === "sparkline" || visual?.kind === "columns") {
+      const values = seriesValues(cell.row.original, visual.keys);
+      const label = values.map((v) => v === null ? "\u2013" : cellLabel(v, meta)).join(", ");
+      const domain = visual.range === "column" ? scale?.seriesExtent ?? null : extentOf(values);
+      if (visual.kind === "columns") {
+        return /* @__PURE__ */ jsx(
+          ColumnsCell,
+          {
+            values: visual.keys.map((key, i) => ({ key, value: values[i] ?? null })),
+            domain,
+            label,
+            height: visual.height
+          }
+        );
+      }
+      const ends = seriesEnds(values);
+      return /* @__PURE__ */ jsx(
+        SparklineCell,
+        {
+          values,
+          domain,
+          label,
+          fill: visual.fill,
+          height: visual.height,
+          ends: visual.labels === "ends" && ends ? [cellLabel(ends[0], meta), cellLabel(ends[1], meta)] : void 0,
+          endsWidth: labelBoxes.get(cell.column.id)?.ends
+        }
+      );
+    }
+    if (visual?.kind === "heatmap") {
+      return /* @__PURE__ */ jsx(HeatmapCell, { label: cellLabel(value, meta), hideValue: visual.hideValue });
+    }
+    if (meta?.markdown && typeof value === "string") {
+      const images = typeof meta.markdown === "object" && meta.markdown.images === true;
+      return /* @__PURE__ */ jsx(MarkdownCell, { text: value, images });
+    }
+    if (meta?.format && cell.column.columnDef.cell === defaultCellRenderer) {
+      return cellLabel(value, meta);
+    }
+    return flexRender(cell.column.columnDef.cell, cell.getContext());
+  }
+  function cellPresentation(cell, includeSizing = true) {
+    const meta = cell.column.columnDef.meta;
+    if (!meta) return {};
+    const scale = columnScales?.get(cell.column.id);
+    let style = includeSizing ? columnSizeStyle(meta) : void 0;
+    let className2;
+    if (meta.visual?.kind === "heatmap") {
+      const value = cell.getValue();
+      const color = scale?.heatmap?.colorOf(typeof value === "number" ? value : null) ?? null;
+      style = { ...style, ...heatmapCellStyle(color) };
+      className2 = meta.visual.hideValue ? "h-6 px-0 text-center" : "text-center";
+    }
+    if (meta.colorBy && (meta.colorBy.scope ?? "cell") === "cell") {
+      const color = scale?.category?.colorOf(rowKeyValue(cell.row.original, meta.colorBy.key)) ?? null;
+      const colorStyle = colorByStyle(meta.colorBy.target, color);
+      if (colorStyle) style = { ...style, ...colorStyle };
+    }
+    return { className: className2, style };
+  }
+  function rowColorStyle(row) {
+    for (const column of rowColorColumns) {
+      const colorBy = column.columnDef.meta?.colorBy;
+      if (!colorBy) continue;
+      const color = columnScales?.get(column.id)?.category?.colorOf(rowKeyValue(row.original, colorBy.key)) ?? null;
+      const style = colorByStyle(colorBy.target, color);
+      if (style) return style;
+    }
+    return void 0;
+  }
+  function rankOf(row) {
+    const rank = rowRanks?.get(row.id);
+    return rank === void 0 ? void 0 : formatNumber(rank);
+  }
+  function renderSortButton(header) {
+    const sorted = header.column.getIsSorted();
+    const headerLabel = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id;
+    const sortStateLabel = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "not sorted";
+    const SortIcon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: header.column.getToggleSortingHandler(),
+        "aria-label": `Sort by ${headerLabel}, ${sortStateLabel}`,
+        className: "relative z-10 inline-flex min-h-6 items-center gap-1 rounded-sm transition-colors duration-fast ease-standard hover:text-foreground focus-ring",
+        children: [
+          flexRender(header.column.columnDef.header, header.getContext()),
+          /* @__PURE__ */ jsx(
+            SortIcon,
+            {
+              "aria-hidden": "true",
+              className: "size-3 shrink-0 transition-colors duration-fast ease-standard"
+            }
+          )
+        ]
+      }
+    );
+  }
+  function renderThead(sticky, withRowIndex = false) {
+    const headerGroups = table.getHeaderGroups();
+    const mergedHeaderColumns = /* @__PURE__ */ new Set();
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        className: cn(
+          // #173: header bottom is the only cue between header and first data row → border-strong
+          // RM-123 `hideHeader`: the header row collapses to zero height (its
+          // labels stay for screen readers), so it draws no rule and no wash.
+          // A hidden header must not reserve width either — its own padding
+          // would otherwise floor every column (a 24 px minimum per cell).
+          hideHeader ? "[&_th]:h-0 [&_th]:p-0" : "border-b border-border-strong",
+          // A sticky header scrolls OVER the body, so its fill must be opaque or data
+          // rows bleed through the labels; the non-sticky header keeps the /60 wash.
+          // z-20 (raised from z-10 for #333) puts the header row above the pinned
+          // body cells (z-10) and below the pinned header corner (z-30). No visual
+          // delta: nothing else in the table sits between those rungs.
+          !hideHeader && (sticky ? "sticky top-0 z-20 bg-surface-muted" : "bg-surface-muted/60")
+        ),
+        children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ jsxs("tr", { "aria-rowindex": withRowIndex ? groupIndex + 1 : void 0, children: [
+          hasGripColumn && /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "h-10 w-10 px-3 align-middle bg-table-header-background",
+              children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.reorderColumnHeader") })
+            },
+            "__reorder"
+          ),
+          showRanks && groupIndex === 0 && /* @__PURE__ */ jsx(
+            DataTableRankHeader,
+            {
+              label: rankLabel,
+              rowSpan: headerGroups.length > 1 ? headerGroups.length : void 0,
+              className: cn(
+                headerHeightClass,
+                "font-table-header bg-table-header-background text-table-header-foreground text-table-header"
+              )
+            },
+            "__rank"
+          ),
+          headerGroup.headers.map((header) => {
+            const shownLeaves = header.getLeafHeaders().filter((h) => h.subHeaders.length === 0 && isColumnShown(h.column)).length;
+            if (shownLeaves === 0) return null;
+            let mergedRowSpan;
+            if (mergeEmptyHeaders && mergedHeaderColumns.has(header.column.id)) return null;
+            if (mergeEmptyHeaders && header.isPlaceholder) {
+              mergedHeaderColumns.add(header.column.id);
+              mergedRowSpan = headerGroups.length - groupIndex;
+            }
+            const merged = mergedRowSpan !== void 0;
+            const geometry = pinnedCellGeometry(header.column);
+            const canSort = header.column.getCanSort();
+            const sorted = header.column.getIsSorted();
+            const headerLabel = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id;
+            const resizeStyle = enableColumnResizing ? resizeWidthStyle(header.getSize()) : void 0;
+            const canResize = enableColumnResizing && !header.isPlaceholder && header.column.getCanResize();
+            const resizeMax = header.column.columnDef.maxSize;
+            const content = header.isPlaceholder && !merged ? null : canSort ? renderSortButton(header) : flexRender(header.column.columnDef.header, header.getContext());
+            return /* @__PURE__ */ jsxs(
+              "th",
+              {
+                scope: "col",
+                colSpan: shownLeaves > 1 ? shownLeaves : void 0,
+                rowSpan: mergedRowSpan !== void 0 && mergedRowSpan > 1 ? mergedRowSpan : void 0,
+                "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+                "data-pinned": geometry?.pinned ?? void 0,
+                style: geometry?.style ?? resizeStyle ?? columnSizeStyle(header.column.columnDef.meta),
+                className: cn(
+                  // Same `px-3` the body `<td>` uses (below) — deliberately
+                  // NOT split into `ps-3`/`pe-3` for a resize-handle
+                  // override (round-1 briefly did this, see the round-2
+                  // note on `numericColumnClasses`): the header's padding
+                  // must stay byte-identical to the body's so an
+                  // end-aligned numeric column's header lines up with its
+                  // own values.
+                  // Table-header seams (fidelity review #4): a theme dials
+                  // background/foreground/size/transform/tracking via the
+                  // `--table-header-*` contract; every default equals
+                  // today's byte-identical rendering (transparent bg,
+                  // `--muted-foreground` ink, 1em size = the table's own
+                  // body size, no transform, body tracking).
+                  headerHeightClass,
+                  "px-3 text-start align-middle font-table-header bg-table-header-background text-table-header-foreground text-table-header tracking-(--table-header-tracking) [text-transform:var(--table-header-transform)]",
+                  // #69: a numeric column's `meta` overrides the default
+                  // `text-start` — placed right after the base string so
+                  // tailwind-merge lets it win over that default.
+                  numericColumnClasses(header.column.columnDef.meta),
+                  // `sticky`/pinned already establishes a positioning context
+                  // for the resize handle's `absolute`; an unpinned resizable
+                  // header needs its own.
+                  !geometry && canResize && "relative",
+                  // A pinned HEADER cell is the corner where both freezes meet,
+                  // so it stacks above the sticky header row (z-20) which is
+                  // above the pinned body cells (z-10). It needs an OPAQUE
+                  // fill (scrolled header cells pass underneath it), and that
+                  // fill has to composite to exactly what its unpinned
+                  // neighbours show — same problem, same two-layer answer as
+                  // `pinnedCellFillClass`:
+                  //   sticky branch   → the row is already opaque `surface-muted`, so match it.
+                  //   plain branch    → the row is `surface-muted/60` over the
+                  //                     container's `card`, so paint `card` and
+                  //                     re-apply the /60 wash on `::before`.
+                  // Painting the plain branch's corner solid `surface-muted`
+                  // read 4-5/255 darker than the header beside it in every
+                  // theme (measured: 242 vs 247 light, 43 vs 40
+                  // dark) — the same "floating pill"
+                  // artefact #333 was filed about, moved into the header.
+                  geometry && "sticky z-30",
+                  geometry && (sticky ? "bg-surface-muted" : "bg-card before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-surface-muted/60 before:content-['']"),
+                  // Pinned corner keeps its OPAQUE ground above (unchanged
+                  // default `transparent` on `--table-header-background`
+                  // paints nothing here, byte-identical). A theme that fills
+                  // the header instead layers that fill on an `after:`
+                  // pseudo ABOVE the ground/wash (source order after
+                  // `before:` at the same `-z-10` rung, below the cell's own
+                  // text) so the corner stays opaque either way — it never
+                  // replaces the ground the way overwriting `background-color`
+                  // directly would.
+                  geometry && "after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-table-header-background after:content-['']",
+                  // Separate cn() argument on purpose: the seam is the sole
+                  // structural cue between the frozen and scrolling blocks, so
+                  // it must not read as a "boundary + fill in one class string"
+                  // redundancy (separation:check).
+                  geometry?.edgeClass,
+                  columnDividers && !geometry && COLUMN_DIVIDER_CLASS
+                ),
+                children: [
+                  hideHeader && content !== null ? (
+                    // A focused sort button un-hides its label (skip-link idiom).
+                    /* @__PURE__ */ jsx("span", { className: "sr-only focus-within:not-sr-only", children: content })
+                  ) : content,
+                  canResize && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "separator",
+                      "aria-orientation": "vertical",
+                      "aria-valuenow": Math.round(header.getSize()),
+                      "aria-valuemin": header.column.columnDef.minSize,
+                      "aria-valuemax": resizeMax !== void 0 && resizeMax < Number.MAX_SAFE_INTEGER ? resizeMax : Math.max(header.getSize(), RESIZE_UNBOUNDED_ARIA_MAX),
+                      "aria-valuetext": t("data.table.resizeColumnValue", {
+                        count: Math.round(header.getSize()),
+                        size: formatNumber(Math.round(header.getSize()))
+                      }),
+                      "aria-label": t("data.table.resizeColumn", { name: headerLabel }),
+                      tabIndex: 0,
+                      "data-slot": "data-table-resize-handle",
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler(),
+                      onKeyDown: (event) => handleResizeKeyDown(event, header.column),
+                      onDoubleClick: () => handleResizeDoubleClick(header.column),
+                      className: cn(
+                        // #51: the hit box is a literal 24px (clamped to half
+                        // the header cell so it can never overlap a neighbour,
+                        // even at `minSize=20`) rather than the `w-2` Tailwind
+                        // spacing-scale utility. `w-2` compiles to
+                        // `calc(var(--spacing) * 2)`, and `--spacing` is what
+                        // `data-density="compact"` rescales — so the old 8px
+                        // hit box shrank further under compact density
+                        // (~7.1px). A literal px value is density-independent
+                        // by construction, which is the actual defect the
+                        // maintainer's review corrected (NOT `--type-factor`,
+                        // which this handle never used). Do not widen via
+                        // overhang into the neighbouring cell instead — on the
+                        // last column that lands inside the `overflow-auto`
+                        // box (#330 false positive) and a pinned neighbour
+                        // paints over/hit-tests away the extra area.
+                        "absolute inset-y-0 end-0 w-[min(24px,50%)] cursor-col-resize touch-none select-none",
+                        // #51: the focus ring moves to the `after:` pseudo-
+                        // element (the drawn seam) rather than the box itself
+                        // — the box is now a 24px hit target, and a 24px focus
+                        // rectangle would replace the deliberately slim ring
+                        // already reviewed/approved as the #12 a11y fix
+                        // (da9b29e). `focus-visible:after:*` targets the
+                        // pseudo-element the same way `hover:after:w-2` /
+                        // `focus-visible:after:w-2` below already do.
+                        "focus-visible:outline-none",
+                        // a11y fix (#12 review, blocking): this handle is the
+                        // SOLE boundary between two adjacent header cells once
+                        // resizing is on — no fill/elevation change separates
+                        // them otherwise — so per the border/border-strong
+                        // decision test (styling-and-tokens.md) it needs a
+                        // rung that clears WCAG 1.4.11's 3:1 on its OWN, in
+                        // EVERY state, including rest (a control with no
+                        // affordance until hover is unusable without a
+                        // pointer). `border-strong` measures only 2.86-2.96:1
+                        // against this `bg-surface-muted` header — that rung
+                        // is guaranteed only vs `--card`/`--background`, not a
+                        // same-tone surface, which is the exact trap the rule
+                        // warns about. `muted-foreground` is guaranteed AA
+                        // text contrast against `--surface-muted`
+                        // (TEXT_SURFACES), so it clears the 3:1 non-text
+                        // minimum with wide margin (measured ~5.3-6.4:1 in
+                        // both themes, unaffected by density) and is already
+                        // the header's own label color. A slim persistent
+                        // `after:` seam (not just a hover reveal) gives the
+                        // real resting boundary; hover/focus widen the drawn
+                        // seam to 8px (`after:w-2`) using the same compliant
+                        // color — a separate width from the 24px pointer hit
+                        // box below (#51), which the seam does not fill.
+                        // Dragging keeps the pre-existing full-fill
+                        // `bg-primary` treatment — that is a drag AFFORDANCE,
+                        // not a focus indicator, and it is redundant with the
+                        // pointer capture, so it is out of scope here. The
+                        // keyboard focus indicator on both branches is the
+                        // shared compound one (#67), applied to the drawn seam
+                        // via `focus-visible:after:focus-ring-static`: the
+                        // element itself is a 24px transparent hit box, so
+                        // ringing IT would ring nothing a user can see.
+                        header.column.getIsResizing() ? "after:absolute after:inset-y-0 after:end-0 after:w-2 after:bg-primary after:content-[''] focus-visible:after:focus-ring-static" : "after:absolute after:inset-y-0 after:end-0 after:w-px after:bg-muted-foreground after:content-[''] hover:after:w-2 focus-visible:after:w-2 focus-visible:after:focus-ring-static"
+                      )
+                    }
+                  )
+                ]
+              },
+              header.id
+            );
+          })
+        ] }, headerGroup.id))
+      }
+    );
+  }
+  function rowSeparationClass(rowIndex) {
+    if (!zebra) return "border-b border-border-strong last:border-b-0";
+    return cn(
+      "border-b-(length:--table-row-rule-width) border-border-strong last:border-b-0",
+      // Separate cn() argument: the stripe and the (theme-gated) rule are
+      // alternative cues, never both at once — see the jsdoc above.
+      rowIndex % 2 === 1 && "bg-table-stripe"
+    );
+  }
+  function pinnedCellFillClass(rowIndex) {
+    return cn(
+      "bg-card",
+      "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
+      zebra && rowIndex % 2 === 1 && "before:bg-table-stripe",
+      "group-hover/row:before:bg-table-row-hover",
+      "group-data-[state=selected]/row:before:bg-selection"
+    );
+  }
+  function rowActionName(row) {
+    const explicit = rowActionLabel?.(row);
+    if (explicit) return explicit;
+    const name = firstDataCellValue(row);
+    if (name !== void 0) return name;
+    return t("data.table.rowAction");
+  }
+  function renderRow(row, rowIndex, extras, dragHandle) {
+    const clickable = Boolean(onRowClick);
+    function handleRowClick(event) {
+      if (isInteractiveEventTarget(event.target)) return;
+      if (isActiveTextSelection()) return;
+      onRowClick?.(row, event);
+    }
+    const sticky = stickyActive ? row.getIsPinned() || void 0 : void 0;
+    const rowStyle = rowColorStyle(row);
+    return /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        "data-state": row.getIsSelected() ? "selected" : void 0,
+        "data-sticky": sticky,
+        onClick: clickable ? handleRowClick : void 0,
+        className: cn(
+          // Color-only feedback (no transform/movement) → per
+          // docs/MOTION_GUIDELINES.md item 3 this stays under OS reduced-motion
+          // (only movement is neutralized); the gated duration-fast/ease-standard
+          // pair already collapses toward ~0ms via --motion-factor when the user
+          // or OS asks for reduced motion, matching the header sort button.
+          "transition-colors duration-fast ease-standard hover:bg-table-row-hover data-[state=selected]:bg-selection",
+          // #13: the dragged row's live `transform` (set inline via `extras.style`,
+          // see `SortableDataRow`) is what actually MOVES it — this class only
+          // makes that movement glide instead of snapping, through the gated
+          // duration/ease utilities (never a raw ms/ease value —
+          // quality-gates.md "Motion-tokened") with a reduced-motion
+          // neutralizer. Raising the dragged row's stacking + opacity is a
+          // colour/composite-only cue, so it isn't gated by the same rule.
+          dragHandle && "relative transition-transform duration-base ease-standard motion-reduce:transition-none",
+          dragHandle?.isDragging && "z-20 opacity-90 shadow-md",
+          // Named group (#333) so a PINNED cell can re-apply the row's hover /
+          // selected wash on top of its own opaque fill — only CSS knows the
+          // pointer is over a sibling cell. Purely a selector hook: `group/row`
+          // emits no style of its own.
+          "group/row",
+          rowSeparationClass(rowIndex),
+          // RM-123 sticky rows: a quiet header-tone wash + medium weight mark
+          // the "average" / "total" rows that repeat on every page.
+          sticky && "font-medium",
+          sticky && "bg-surface-muted/60",
+          // `<tr>` isn't in the global auto-cursor-pointer role list (button/
+          // menuitem/tab/…), so a clickable row needs its own cursor. The focus
+          // ring is driven off the hidden button's `:focus-visible` (same
+          // `has-[[data-slot=…]:focus-visible]` pattern as InputGroup) so the
+          // ring paints on the ROW the user is about to activate, even though
+          // focus lives on the sr-only control inside it.
+          clickable && "cursor-pointer has-[[data-slot=data-table-row-action]:focus-visible]:focus-ring-static-inset",
+          rowClassName?.(row)
+        ),
+        ...extras,
+        style: rowStyle || extras?.style ? { ...rowStyle, ...extras?.style } : void 0,
+        children: [
+          dragHandle?.activator && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2 align-middle", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref: dragHandle.activator.setActivatorNodeRef,
+              "data-slot": "data-table-row-drag-handle",
+              "aria-label": t("data.table.reorderHandle", { name: rowActionName(row) }),
+              className: cn(
+                "inline-flex size-7 cursor-grab items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-standard hover:bg-foreground/10 hover:text-foreground focus-ring active:cursor-grabbing",
+                dragHandle.isDragging && "text-foreground"
+              ),
+              ...dragHandle.activator.attributes,
+              ...dragHandle.activator.listeners,
+              children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true", className: "size-4" })
+            }
+          ) }),
+          showRanks && /* @__PURE__ */ jsx(DataTableRankCell, { rank: rankOf(row), className: cellPadYClass }),
+          row.getVisibleCells().filter((cell) => isColumnShown(cell.column)).map((cell, cellIndex) => {
+            const geometry = pinnedCellGeometry(cell.column);
+            const resizeStyle = enableColumnResizing ? resizeWidthStyle(cell.column.getSize()) : void 0;
+            const presentation = cellPresentation(cell);
+            const baseStyle = geometry?.style ?? resizeStyle;
+            return /* @__PURE__ */ jsxs(
+              "td",
+              {
+                "data-pinned": geometry?.pinned ?? void 0,
+                style: presentation.style ? { ...baseStyle, ...presentation.style } : baseStyle,
+                className: cn(
+                  "px-3 align-middle",
+                  cellPadYClass,
+                  // #69: same numeric-column seam as the header — see
+                  // `numericColumnClasses`.
+                  numericColumnClasses(cell.column.columnDef.meta),
+                  // z-10: above the normal (unpositioned) cells it scrolls over,
+                  // below the sticky header row (z-20) and the pinned corner (z-30).
+                  geometry && "sticky z-10",
+                  geometry && pinnedCellFillClass(rowIndex),
+                  // Separate cn() argument — see pinnedCellGeometry's edgeClass.
+                  geometry?.edgeClass,
+                  columnDividers && !geometry && COLUMN_DIVIDER_CLASS,
+                  presentation.className
+                ),
+                children: [
+                  clickable && cellIndex === 0 && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-slot": "data-table-row-action",
+                      className: ROW_ACTION_CLASS,
+                      onClick: (event) => onRowClick?.(row, event),
+                      children: rowActionName(row)
+                    }
+                  ),
+                  renderCellContent(cell)
+                ]
+              },
+              cell.id
+            );
+          })
+        ]
+      },
+      row.id
+    );
+  }
+  function renderSkeletonBody(count) {
+    const visibleColumns = table.getVisibleLeafColumns().filter(isColumnShown);
+    return Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("tr", { "aria-hidden": "true", className: rowSeparationClass(i), children: [
+      hasGripColumn && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2 align-middle", children: /* @__PURE__ */ jsx(Skeleton, { className: "size-4" }) }),
+      showRanks && /* @__PURE__ */ jsx("td", { className: cn("w-10 px-3 align-middle", cellPadYClass), children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }),
+      visibleColumns.map((column) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            "px-3 align-middle",
+            cellPadYClass,
+            numericColumnClasses(column.columnDef.meta),
+            columnDividers && COLUMN_DIVIDER_CLASS
+          ),
+          children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+        },
+        column.id
+      ))
+    ] }, `skeleton-${i}`));
+  }
+  function renderEmptyBody() {
+    return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: colCount + leadingColCount,
+        className: "h-24 px-3 text-center text-muted-foreground",
+        children: emptyMessage
+      }
+    ) });
+  }
+  function renderTbodyNormal() {
+    if (showSkeletons) {
+      return /* @__PURE__ */ jsx("tbody", { children: renderSkeletonBody(skeletonRowCount) });
+    }
+    if (showEmpty) {
+      return /* @__PURE__ */ jsx("tbody", { children: renderEmptyBody() });
+    }
+    if (!rowReorderActive) {
+      return /* @__PURE__ */ jsxs("tbody", { children: [
+        topRows.map((row, i) => renderRow(row, i)),
+        rows.map((row, i) => renderRow(row, i)),
+        bottomRows.map((row, i) => renderRow(row, i))
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      SortableContext,
+      {
+        items: rows.map((r) => getReorderRowId(r)),
+        strategy: verticalListSortingStrategy,
+        children: /* @__PURE__ */ jsxs("tbody", { children: [
+          topRows.map((row, i) => renderRow(row, i)),
+          rows.map((row, i) => /* @__PURE__ */ jsx(
+            SortableDataRow,
+            {
+              id: getReorderRowId(row),
+              attributesOverride: {
+                // #98: dnd-kit's own `roleDescription: 'sortable'` default is
+                // hardcoded English; override it with the localized value in
+                // BOTH handle modes — `role` stays row-mode-only (see the
+                // `attributesOverride` prop doc above).
+                roleDescription: t("data.table.reorderRoleDescription"),
+                ...rowReorderHandle === "row" ? { role: "row" } : null
+              },
+              children: ({ setNodeRef, setActivatorNodeRef, attributes, listeners, isDragging, style }) => renderRow(
+                row,
+                i,
+                {
+                  ref: setNodeRef,
+                  style,
+                  // `aria-pressed` is a `DraggableAttributes` field meant for a
+                  // real `<button>` activator; spread onto a `<tr role="row">`
+                  // (row-handle mode) it fails axe's `aria-allowed-attr` (that
+                  // ARIA state is not permitted on the `row` role), so strip it
+                  // here rather than exempt it downstream.
+                  ...rowReorderHandle === "row" ? (() => {
+                    const { "aria-pressed": _ariaPressed, ...rowAttributes } = attributes;
+                    return { ...rowAttributes, ...listeners };
+                  })() : {}
+                },
+                {
+                  isDragging,
+                  activator: rowReorderHandle === "cell" ? { setActivatorNodeRef, attributes, listeners } : void 0
+                }
+              )
+            },
+            getReorderRowId(row)
+          )),
+          bottomRows.map((row, i) => renderRow(row, i))
+        ] })
+      }
+    );
+  }
+  function renderTbodyVirtualized() {
+    if (showSkeletons) {
+      const virtualSkeletonCount = loadingRows ?? Math.min(10, pageSize);
+      return /* @__PURE__ */ jsx("tbody", { children: renderSkeletonBody(virtualSkeletonCount) });
+    }
+    return /* @__PURE__ */ jsx("tbody", { children: showEmpty ? renderEmptyBody() : /* @__PURE__ */ jsxs(Fragment, { children: [
+      topRows.map(
+        (row, i) => renderRow(row, i, {
+          "aria-rowindex": headerRowCount + i + 1
+        })
+      ),
+      paddingTop > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { style: { height: paddingTop }, colSpan: colCount + leadingColCount }) }),
+      virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+        return renderRow(row, virtualRow.index, {
+          ref: virtualizer.measureElement,
+          "data-index": virtualRow.index,
+          // Absolute 1-based row position; header row(s) occupy
+          // 1..headerRowCount and any top-pinned rows the slots after them.
+          "aria-rowindex": firstCentreRowIndex + virtualRow.index
+        });
+      }),
+      paddingBottom > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { style: { height: paddingBottom }, colSpan: colCount + leadingColCount }) }),
+      bottomRows.map(
+        (row, i) => renderRow(row, i, {
+          "aria-rowindex": firstCentreRowIndex + centreRowCount + i
+        })
+      )
+    ] }) });
+  }
+  function leafHeadersById() {
+    const bottom = headerGroupsForCards[headerGroupsForCards.length - 1];
+    return new Map((bottom?.headers ?? []).map((h) => [h.column.id, h]));
+  }
+  function renderCardSortBar() {
+    const sortable = [...leafHeadersById().values()].filter(
+      (h) => !h.isPlaceholder && isColumnShown(h.column) && h.column.getCanSort()
+    );
+    const selectHeader = leafHeadersById().get("select");
+    if (sortable.length === 0 && !selectHeader) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "data-table-card-sort",
+        className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-border-strong px-3 py-2 text-meta text-muted-foreground",
+        children: [
+          selectHeader && !selectHeader.isPlaceholder ? /* @__PURE__ */ jsx("span", { className: "inline-flex", children: flexRender(selectHeader.column.columnDef.header, selectHeader.getContext()) }) : null,
+          sortable.map((header) => /* @__PURE__ */ jsx("span", { className: "inline-flex", children: renderSortButton(header) }, header.id))
+        ]
+      }
+    );
+  }
+  function renderCard(row, headers, extras) {
+    const cells = row.getVisibleCells().filter((cell) => isColumnShown(cell.column));
+    const selectCell = cells.find((cell) => cell.column.id === "select");
+    const clickable = Boolean(onRowClick);
+    const sticky = stickyActive ? row.getIsPinned() || void 0 : void 0;
+    const fields = [];
+    const rank = rankOf(row);
+    if (showRanks && rank !== void 0) {
+      fields.push({
+        id: "__rank",
+        term: rankLabel ?? t("data.table.rankHeader"),
+        value: rank,
+        className: "tabular-nums"
+      });
+    }
+    for (const cell of cells) {
+      if (cell === selectCell) continue;
+      const def = cell.column.columnDef.header;
+      const header = headers.get(cell.column.id);
+      const presentation = cellPresentation(cell, false);
+      fields.push({
+        id: cell.column.id,
+        term: typeof def === "string" ? def : header ? flexRender(def, header.getContext()) : cell.column.id,
+        value: renderCellContent(cell),
+        className: cn(
+          cell.column.columnDef.meta?.numeric && "tabular-nums",
+          presentation.style?.backgroundColor !== void 0 && "min-h-5 rounded-sm px-1"
+        ),
+        style: presentation.style
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      DataTableCard,
+      {
+        ref: extras?.ref,
+        "data-index": extras?.["data-index"],
+        fields,
+        density,
+        "data-state": row.getIsSelected() ? "selected" : void 0,
+        "data-sticky": sticky,
+        onClick: clickable ? (event) => {
+          if (isInteractiveEventTarget(event.target)) return;
+          if (isActiveTextSelection()) return;
+          onRowClick?.(row, event);
+        } : void 0,
+        style: rowColorStyle(row),
+        className: cn(
+          "transition-colors duration-fast ease-standard data-[state=selected]:bg-selection",
+          clickable && "cursor-pointer hover:bg-table-row-hover has-[[data-slot=data-table-row-action]:focus-visible]:focus-ring-static-inset",
+          sticky && "font-medium",
+          sticky && "bg-surface-muted/60"
+        ),
+        lead: selectCell || clickable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          selectCell && /* @__PURE__ */ jsx("div", { className: "mb-1.5", children: flexRender(selectCell.column.columnDef.cell, selectCell.getContext()) }),
+          clickable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "data-table-row-action",
+              className: ROW_ACTION_CLASS,
+              onClick: (event) => onRowClick?.(row, event),
+              children: rowActionName(row)
+            }
+          )
+        ] }) : void 0
+      },
+      row.id
+    );
+  }
+  function renderCardList(virtualized) {
+    if (showSkeletons) {
+      const count = virtualized ? loadingRows ?? Math.min(10, pageSize) : skeletonRowCount;
+      return /* @__PURE__ */ jsx(DataTableCardList, { "aria-hidden": "true", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("li", { className: "space-y-2 px-3 py-3", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })
+      ] }, `skeleton-${i}`)) });
+    }
+    if (showEmpty) {
+      return /* @__PURE__ */ jsx(StatePanel, { kind: "empty", title: emptyMessage });
+    }
+    const headers = leafHeadersById();
+    return /* @__PURE__ */ jsxs(DataTableCardList, { "aria-labelledby": caption != null ? captionId : void 0, children: [
+      topRows.map((row) => renderCard(row, headers)),
+      virtualized && paddingTop > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: paddingTop } }),
+      virtualized ? virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+        return renderCard(row, headers, {
+          ref: virtualizer.measureElement,
+          "data-index": virtualRow.index
+        });
+      }) : rows.map((row) => renderCard(row, headers)),
+      virtualized && paddingBottom > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: paddingBottom } }),
+      bottomRows.map((row) => renderCard(row, headers))
+    ] });
+  }
+  const cardsCaption = caption != null ? /* @__PURE__ */ jsx("p", { id: captionId, className: "sr-only", children: caption }) : null;
+  function renderLegends() {
+    const seen = /* @__PURE__ */ new Set();
+    const legends = [];
+    for (const column of table.getVisibleLeafColumns()) {
+      const visual = column.columnDef.meta?.visual;
+      if (visual?.kind !== "heatmap" || !visual.legend || !isColumnShown(column)) continue;
+      const scale = columnScales?.get(column.id);
+      if (!scale?.heatmap || scale.heatmapGroup === void 0 || seen.has(scale.heatmapGroup)) {
+        continue;
+      }
+      seen.add(scale.heatmapGroup);
+      const header = column.columnDef.header;
+      legends.push(
+        /* @__PURE__ */ jsx(
+          HeatmapLegend,
+          {
+            scale: scale.heatmap,
+            title: typeof visual.legend === "string" ? visual.legend : typeof header === "string" ? header : void 0,
+            formatValue: (v) => cellLabel(v, column.columnDef.meta)
+          },
+          column.id
+        )
+      );
+    }
+    const seenCategoryKeys = /* @__PURE__ */ new Set();
+    for (const column of table.getVisibleLeafColumns()) {
+      if (!isColumnShown(column)) continue;
+      const meta = column.columnDef.meta;
+      const scale = columnScales?.get(column.id);
+      const bar = meta?.visual?.kind === "bar" ? meta.visual : void 0;
+      const keys = [];
+      if (bar?.colorBy && scale?.barCategory) {
+        keys.push({ key: bar.colorBy, scale: scale.barCategory, legend: bar.legend });
+      }
+      if (meta?.colorBy && scale?.category) {
+        keys.push({ key: meta.colorBy.key, scale: scale.category, legend: meta.colorBy.legend });
+      }
+      for (const entry of keys) {
+        if (entry.legend === false || seenCategoryKeys.has(entry.key)) continue;
+        seenCategoryKeys.add(entry.key);
+        legends.push(
+          /* @__PURE__ */ jsx(
+            CategoryLegend,
+            {
+              scale: entry.scale,
+              title: typeof entry.legend === "string" ? entry.legend : entry.key
+            },
+            `category-${entry.key}`
+          )
+        );
+      }
+    }
+    const rankKey = showRanks ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        "data-slot": "data-table-rank-key",
+        className: "text-meta text-muted-foreground",
+        children: rankLabel != null ? `# \u2014 ${rankLabel}` : t("data.table.rankKey")
+      },
+      "__rank-key"
+    ) : null;
+    if (legends.length === 0 && rankKey === null) return null;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "data-table-legends", className: "flex flex-wrap gap-x-6 gap-y-2", children: [
+      legends,
+      rankKey
+    ] });
+  }
+  function renderPagination() {
+    if (enableRowVirtualization) return null;
+    if (!enablePagination && !manualPagination) return null;
+    const pageCountUnknown = manualPagination && rowCount === void 0 && pageCount === void 0;
+    if (hidePaginationWhenSingle && !pageCountUnknown && table.getPageCount() <= 1) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-body text-muted-foreground", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount() || 1
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: "Next"
+          }
+        )
+      ] })
+    ] });
+  }
+  const captionElement = caption != null ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null;
+  if (enableRowVirtualization) {
+    return /* @__PURE__ */ jsxs("div", { ref: rootRef, ...presentationAttrs, className: cn("space-y-3", className), ...rest, children: [
+      toolbar ? toolbar(table) : null,
+      renderLegends(),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: scrollRef,
+          tabIndex: 0,
+          role: "group",
+          "aria-label": t("data.table.scrollRegion"),
+          "aria-busy": loading || void 0,
+          className: "relative overflow-auto rounded-lg border bg-card focus-ring",
+          style: { maxHeight: maxBodyHeight, ...pinnedScrollPadding },
+          children: [
+            loading && rows.length > 0 && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "status",
+                "aria-live": "polite",
+                className: "absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80",
+                children: [
+                  /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.loading") })
+                ]
+              }
+            ),
+            cardsActive ? /* @__PURE__ */ jsxs("div", { "data-slot": "data-table-card-region", className: "text-body", children: [
+              cardsCaption,
+              renderCardSortBar(),
+              renderCardList(true)
+            ] }) : /* @__PURE__ */ jsxs(
+              "table",
+              {
+                "aria-busy": loading || void 0,
+                "aria-rowcount": ariaRowCount,
+                className: "w-full caption-bottom text-body",
+                children: [
+                  captionElement,
+                  renderThead(true, true),
+                  renderTbodyVirtualized()
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  const nonVirtualizedContent = /* @__PURE__ */ jsxs("div", { ref: rootRef, ...presentationAttrs, className: cn("space-y-3", className), ...rest, children: [
+    toolbar ? toolbar(table) : null,
+    renderLegends(),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-busy": loading || void 0,
+        className: "relative overflow-hidden rounded-lg border bg-card",
+        children: [
+          loading && rows.length > 0 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "status",
+              "aria-live": "polite",
+              className: "absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80",
+              children: [
+                /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "text-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.loading") })
+              ]
+            }
+          ),
+          cardsActive ? /* @__PURE__ */ jsxs("div", { "data-slot": "data-table-card-region", children: [
+            cardsCaption,
+            renderCardSortBar(),
+            renderCardList(false)
+          ] }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: plainScrollRef,
+              "data-slot": "data-table-scroll-region",
+              tabIndex: scrollOverflows ? 0 : void 0,
+              role: scrollOverflows ? "group" : void 0,
+              "aria-label": scrollOverflows ? t("data.table.scrollRegion") : void 0,
+              onScroll: updateScrollAffordance,
+              className: "overflow-auto rounded-lg focus-ring-inset",
+              style: hasLeftPinned || hasRightPinned ? pinnedScrollPadding : void 0,
+              children: /* @__PURE__ */ jsxs("table", { "aria-busy": loading || void 0, className: "w-full caption-bottom text-body", children: [
+                captionElement,
+                renderThead(false),
+                renderTbodyNormal()
+              ] })
+            }
+          ),
+          !cardsActive && canScrollLeft && !hasLeftPinned && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "data-table-scroll-fade-left",
+              className: "pointer-events-none absolute inset-y-0 left-0 z-10 w-8 rounded-lg bg-gradient-to-r from-card to-transparent"
+            }
+          ),
+          !cardsActive && canScrollRight && !hasRightPinned && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "data-table-scroll-fade-right",
+              className: "pointer-events-none absolute inset-y-0 right-0 z-10 w-8 rounded-lg bg-gradient-to-l from-card to-transparent"
+            }
+          )
+        ]
+      }
+    ),
+    renderPagination()
+  ] });
+  if (!rowReorderActive) return nonVirtualizedContent;
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors: reorderSensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleRowDragStart,
+      onDragOver: handleRowDragOver,
+      onDragEnd: handleRowDragEnd,
+      onDragCancel: handleRowDragCancel,
+      accessibility: {
+        announcements: silentDragAnnouncements,
+        // #98: dnd-kit's own hidden keyboard-instructions node is hardcoded
+        // English (`defaultScreenReaderInstructions`) unless overridden here.
+        screenReaderInstructions: { draggable: t("data.table.reorderInstructions") }
+      },
+      children: [
+        nonVirtualizedContent,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "data-slot": "data-table-reorder-live-region",
+            className: "sr-only",
+            children: reorderLiveMessage
+          }
+        )
+      ]
+    }
+  );
+}
+var DataTableWithRef = forwardRef(DataTableInner);
+
+export {
+  createSelectionColumn,
+  DataTableWithRef
+};
+//# sourceMappingURL=chunk-K2GHSRCP.js.map