@elabs-ai/components-data 4.2.0 → 5.1.0

package/dist/index.js

@@ -1,1531 +1,121 @@
 "use client";
-
-// src/data-table/data-table.tsx
 import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+  downloadCsv,
+  toCsv
+} from "./chunk-ZQXJ34VJ.js";
+import "./chunk-3UFWYVDS.js";
+import {
+  FacetFilter
+} from "./chunk-ZFEW36RG.js";
+import "./chunk-3OVN7MMO.js";
+import {
+  FilterBar
+} from "./chunk-677ORWI6.js";
+import {
+  FilterChip
+} from "./chunk-OASM53LL.js";
+import "./chunk-7ZYUY3UL.js";
+import {
+  SearchInput
+} from "./chunk-E3V3SYY7.js";
+import "./chunk-RZ5MYZOA.js";
+import {
+  DataTableWithRef,
+  createSelectionColumn
+} from "./chunk-K2GHSRCP.js";
+import {
+  DATA_TABLE_BREAKPOINT_THRESHOLDS,
+  tableBreakpointForWidth,
+  useTableBreakpoint
+} from "./chunk-BEYHV3ZX.js";
 import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
-} from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
+  HeatmapCell,
+  HeatmapLegend,
+  heatmapCellStyle
+} from "./chunk-NKVJUQYW.js";
 import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors
-} from "@dnd-kit/core";
+  MarkdownCell,
+  isSafeCellUrl,
+  parseCellMarkdown
+} from "./chunk-MV2YVXEZ.js";
 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, 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");
-}
-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,
-  // 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: getFilteredRowModel() };
-  const paginationRowModel = enablePagination && !manualPagination ? { getPaginationRowModel: getPaginationRowModel() } : {};
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      columnFilters,
-      globalFilter,
-      pagination,
-      columnPinning,
-      columnSizing,
-      rowSelection
-    },
-    // 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 = table.getRowModel().rows;
-  const colCount = table.getVisibleLeafColumns().length;
-  const headerRowCount = table.getHeaderGroups().length;
-  const ariaRowCount = (rowCount ?? rows.length) + headerRowCount;
-  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]);
-  const showEmpty = !loading && rows.length === 0;
-  const showSkeletons = loading && rows.length === 0;
-  const skeletonRowCount = loadingRows ?? pageSize;
-  function renderThead(sticky, withRowIndex = false) {
-    return /* @__PURE__ */ jsx(
-      "thead",
-      {
-        className: cn(
-          // #173: header bottom is the only cue between header and first data row → border-strong
-          "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.
-          sticky ? "sticky top-0 z-20 bg-surface-muted" : "bg-surface-muted/60"
-        ),
-        children: table.getHeaderGroups().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", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.reorderColumnHeader") }) }, "__reorder"),
-          headerGroup.headers.map((header) => {
-            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 sortStateLabel = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "not sorted";
-            const SortIcon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown;
-            const resizeStyle = enableColumnResizing ? resizeWidthStyle(header.getSize()) : void 0;
-            const canResize = enableColumnResizing && !header.isPlaceholder && header.column.getCanResize();
-            const resizeMax = header.column.columnDef.maxSize;
-            return /* @__PURE__ */ jsxs(
-              "th",
-              {
-                scope: "col",
-                "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
-                "data-pinned": geometry?.pinned ?? void 0,
-                style: geometry?.style ?? resizeStyle,
-                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.
-                  "h-10 px-3 text-start align-middle font-table-header text-muted-foreground",
-                  // #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-['']"),
-                  // 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: [
-                  header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: header.column.getToggleSortingHandler(),
-                      "aria-label": `Sort by ${headerLabel}, ${sortStateLabel}`,
-                      className: "relative z-10 inline-flex 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"
-                          }
-                        )
-                      ]
-                    }
-                  ) : flexRender(header.column.columnDef.header, header.getContext()),
-                  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-accent"
-    );
-  }
-  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);
-    }
-    return /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        "data-state": row.getIsSelected() ? "selected" : void 0,
-        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-accent",
-          // #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),
-          // `<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,
-        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" })
-            }
-          ) }),
-          row.getVisibleCells().map((cell, cellIndex) => {
-            const geometry = pinnedCellGeometry(cell.column);
-            const resizeStyle = enableColumnResizing ? resizeWidthStyle(cell.column.getSize()) : void 0;
-            return /* @__PURE__ */ jsxs(
-              "td",
-              {
-                "data-pinned": geometry?.pinned ?? void 0,
-                style: geometry?.style ?? resizeStyle,
-                className: cn(
-                  "px-3 py-2 align-middle",
-                  // #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
-                ),
-                children: [
-                  clickable && cellIndex === 0 && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "data-slot": "data-table-row-action",
-                      className: "sr-only focus-visible:outline-none",
-                      onClick: (event) => onRowClick?.(row, event),
-                      children: rowActionName(row)
-                    }
-                  ),
-                  flexRender(cell.column.columnDef.cell, cell.getContext())
-                ]
-              },
-              cell.id
-            );
-          })
-        ]
-      },
-      row.id
-    );
-  }
-  function renderSkeletonBody(count) {
-    const visibleColumns = table.getVisibleLeafColumns();
-    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" }) }),
-      visibleColumns.map((column) => /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: cn(
-            "px-3 py-2 align-middle",
-            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 + (hasGripColumn ? 1 : 0),
-        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__ */ jsx("tbody", { children: rows.map((row, i) => renderRow(row, i)) });
-    }
-    return /* @__PURE__ */ jsx(
-      SortableContext,
-      {
-        items: rows.map((r) => getReorderRowId(r)),
-        strategy: verticalListSortingStrategy,
-        children: /* @__PURE__ */ jsx("tbody", { children: 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)
-        )) })
-      }
-    );
-  }
-  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: [
-      paddingTop > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { style: { height: paddingTop }, colSpan: colCount }) }),
-      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.
-          "aria-rowindex": headerRowCount + virtualRow.index + 1
-        });
-      }),
-      paddingBottom > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { style: { height: paddingBottom }, colSpan: colCount }) })
-    ] }) });
-  }
-  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, className: cn("space-y-3", className), ...rest, children: [
-      toolbar ? toolbar(table) : null,
-      /* @__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") })
-                ]
-              }
-            ),
-            /* @__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, className: cn("space-y-3", className), ...rest, children: [
-    toolbar ? toolbar(table) : null,
-    /* @__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") })
-              ]
-            }
-          ),
-          /* @__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()
-              ] })
-            }
-          ),
-          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"
-            }
-          ),
-          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);
-
-// src/search-input/search-input.tsx
-import { forwardRef as forwardRef2, useId, useRef as useRef2 } from "react";
-import { Input, useLocale as useLocale2 } from "@elabs-ai/components-ui";
-import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
-import { SearchIcon } from "@elabs-ai/components-icons";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SearchInput = forwardRef2(function SearchInput2({
-  value,
-  onValueChange,
-  label,
-  placeholder,
-  className,
-  containerClassName,
-  disabled,
-  id: idProp,
-  ...props
-}, forwardedRef) {
-  const { t } = useLocale2();
-  const resolvedLabel = label ?? t("data.searchInput.label");
-  const resolvedPlaceholder = placeholder ?? t("data.searchInput.placeholder");
-  const generatedId = useId();
-  const id = idProp ?? generatedId;
-  const inputRef = useRef2(null);
-  const setRefs = (node) => {
-    inputRef.current = node;
-    if (typeof forwardedRef === "function") forwardedRef(node);
-    else if (forwardedRef) forwardedRef.current = node;
-  };
-  const handleClear = () => {
-    onValueChange("");
-    inputRef.current?.focus();
-  };
-  return /* @__PURE__ */ jsxs2("div", { className: cn2("relative w-full max-w-xs", containerClassName), children: [
-    /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "sr-only", children: resolvedLabel }),
-    /* @__PURE__ */ jsx2(
-      SearchIcon,
-      {
-        size: 16,
-        className: "pointer-events-none absolute start-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      Input,
-      {
-        ref: setRefs,
-        id,
-        value,
-        onChange: (e) => onValueChange(e.target.value),
-        placeholder: resolvedPlaceholder,
-        disabled,
-        className: cn2("ps-8", value && "pe-8", className),
-        ...props
-      }
-    ),
-    value && !disabled ? /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": t("data.searchInput.clear"),
-        className: "absolute end-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-fast ease-standard hover:text-foreground focus-ring animate-in fade-in zoom-in-95 duration-fast ease-entrance",
-        children: /* @__PURE__ */ jsx2(
-          "svg",
-          {
-            width: "14",
-            height: "14",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" })
-          }
-        )
-      }
-    ) : null
-  ] });
-});
-
-// src/filter-bar/filter-bar.tsx
-import "react";
-import { cn as cn3 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function FilterBar({ children, actions, className }) {
-  return /* @__PURE__ */ jsxs3("div", { className: cn3("flex flex-wrap items-center justify-between gap-2", className), children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap items-center gap-2", children }),
-    actions ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: actions }) : null
-  ] });
-}
-
-// src/filter-bar/filter-chip.tsx
-import { forwardRef as forwardRef3 } from "react";
+  SparklineCell
+} from "./chunk-HG2YMSRM.js";
 import {
-  FilterChip as BaseFilterChip,
-  useLocale as useLocale3
-} from "@elabs-ai/components-ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var FilterChip = forwardRef3(function FilterChip2({ label, count, countLabel, ...props }, ref) {
-  const { formatNumber } = useLocale3();
-  const countText = count === void 0 ? void 0 : countLabel ? `${countLabel} ${formatNumber(count)}` : formatNumber(count);
-  const { trailing: _ignoredTrailing, ...restProps } = props;
-  return /* @__PURE__ */ jsx4(
-    BaseFilterChip,
-    {
-      ref,
-      "data-slot": "filter-chip",
-      label,
-      ...restProps,
-      trailing: countText
-    }
-  );
-});
-
-// src/facet-filter/facet-filter.tsx
-import { forwardRef as forwardRef4 } from "react";
+  columnSizeStyle,
+  formatCellValue,
+  resolveShowAt
+} from "./chunk-TBB33PHQ.js";
 import {
-  Badge,
-  Button as Button2,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  useLocale as useLocale4
-} from "@elabs-ai/components-ui";
-import { cn as cn4 } from "@elabs-ai/components-ui/lib/cn";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var FacetFilter = forwardRef4(function FacetFilter2({ title, options, selected, onSelectedChange, className, ...props }, ref) {
-  const { t } = useLocale4();
-  const selectedSet = new Set(selected);
-  const toggle = (value) => {
-    const next = new Set(selectedSet);
-    if (next.has(value)) next.delete(value);
-    else next.add(value);
-    onSelectedChange([...next]);
-  };
-  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button2, { ref, variant: "outline", className: cn4("border-dashed", className), ...props, children: [
-      title,
-      selected.length > 0 ? /* @__PURE__ */ jsx5(
-        Badge,
-        {
-          variant: "secondary",
-          className: "ms-1 rounded px-1.5 animate-in fade-in zoom-in-95 duration-fast ease-entrance",
-          children: selected.length
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ jsxs4(DropdownMenuContent, { className: "min-w-[12rem]", children: [
-      /* @__PURE__ */ jsx5(DropdownMenuLabel, { children: title }),
-      options.map((opt) => {
-        const checked = selectedSet.has(opt.value);
-        return /* @__PURE__ */ jsxs4(
-          DropdownMenuItem,
-          {
-            onSelect: (e) => {
-              e.preventDefault();
-              toggle(opt.value);
-            },
-            children: [
-              /* @__PURE__ */ jsx5(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "flex size-4 items-center justify-center rounded border transition-colors duration-fast ease-standard " + (checked ? "border-primary bg-primary text-primary-foreground" : "border-input"),
-                  children: checked ? "\u2713" : ""
-                }
-              ),
-              opt.label
-            ]
-          },
-          opt.value
-        );
-      }),
-      selected.length > 0 ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsx5(DropdownMenuItem, { onSelect: () => onSelectedChange([]), children: t("data.facetFilter.clearFilters") })
-      ] }) : null
-    ] })
-  ] });
-});
-FacetFilter.displayName = "FacetFilter";
-
-// src/column-picker/column-picker.tsx
-import "@tanstack/react-table";
-import { forwardRef as forwardRef5 } from "react";
+  DataTableRankCell,
+  DataTableRankHeader,
+  computeRowRanks
+} from "./chunk-XN6O6Z2N.js";
 import {
-  Button as Button3,
-  DropdownMenu as DropdownMenu2,
-  DropdownMenuContent as DropdownMenuContent2,
-  DropdownMenuItem as DropdownMenuItem2,
-  DropdownMenuLabel as DropdownMenuLabel2,
-  DropdownMenuSeparator as DropdownMenuSeparator2,
-  DropdownMenuTrigger as DropdownMenuTrigger2,
-  useLocale as useLocale5
-} from "@elabs-ai/components-ui";
-import { cn as cn5 } from "@elabs-ai/components-ui/lib/cn";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function ColumnPickerInner({ table, label, className, ...props }, ref) {
-  const { t } = useLocale5();
-  const resolvedLabel = label ?? t("data.columnPicker.label");
-  const columns = table.getAllColumns().filter((c) => c.getCanHide());
-  return /* @__PURE__ */ jsxs5(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx6(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx6(Button3, { ref, variant: "outline", size: "sm", className: cn5(className), ...props, children: resolvedLabel }) }),
-    /* @__PURE__ */ jsxs5(DropdownMenuContent2, { align: "end", className: "min-w-[12rem]", children: [
-      /* @__PURE__ */ jsx6(DropdownMenuLabel2, { children: t("data.columnPicker.toggleColumns") }),
-      /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {}),
-      columns.map((column) => /* @__PURE__ */ jsxs5(
-        DropdownMenuItem2,
-        {
-          onSelect: (e) => {
-            e.preventDefault();
-            column.toggleVisibility(!column.getIsVisible());
-          },
-          children: [
-            /* @__PURE__ */ jsx6(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "flex size-4 items-center justify-center rounded border transition-colors duration-fast ease-standard " + (column.getIsVisible() ? "border-primary bg-primary text-primary-foreground" : "border-input"),
-                children: column.getIsVisible() ? "\u2713" : ""
-              }
-            ),
-            /* @__PURE__ */ jsx6("span", { className: "capitalize", children: column.id })
-          ]
-        },
-        column.id
-      ))
-    ] })
-  ] });
-}
-ColumnPickerInner.displayName = "ColumnPicker";
-var ColumnPicker = forwardRef5(ColumnPickerInner);
-
-// src/to-csv.ts
-import { csvQuoteField, csvStringifyValue, downloadBlob } from "@elabs-ai/components-ui";
-var stringifyValue = csvStringifyValue;
-var quoteField = csvQuoteField;
-function toCsv(rows, opts) {
-  const delimiter = opts?.delimiter ?? ",";
-  const includeHeader = opts?.header !== false;
-  const firstRow = rows[0];
-  const cols = opts?.columns ?? (firstRow !== void 0 ? Object.keys(firstRow).map((k) => ({ key: k })) : []);
-  const lines = [];
-  if (includeHeader && cols.length > 0) {
-    const headerRow = cols.map((c) => quoteField(c.header ?? c.key, delimiter)).join(delimiter);
-    lines.push(headerRow);
-  }
-  for (const row of rows) {
-    const line = cols.map((c) => quoteField(stringifyValue(row[c.key]), delimiter)).join(delimiter);
-    lines.push(line);
-  }
-  return lines.join("\r\n") + (lines.length > 0 ? "\r\n" : "");
-}
-function downloadCsv(rows, opts) {
-  if (typeof document === "undefined") return;
-  const csv = toCsv(rows, opts);
-  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-  downloadBlob(blob, (opts?.filename ?? "download") + ".csv");
-}
+  stickyRowPinning
+} from "./chunk-47ZBQZYS.js";
+import "./chunk-5K2IFOV2.js";
+import {
+  ColumnPicker
+} from "./chunk-DBPJ7LVM.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 {
+  barDomain,
+  barGeometry,
+  computeColumnScales,
+  extentOf,
+  heatmapColorScaleSpec,
+  seriesValues
+} from "./chunk-VCLA45IC.js";
 export {
+  BarCell,
+  CategoryLegend,
   ColumnPicker,
+  ColumnsCell,
+  DATA_TABLE_BREAKPOINT_THRESHOLDS,
   DataTableWithRef as DataTable,
+  DataTableCard,
+  DataTableCardList,
+  DataTableRankCell,
+  DataTableRankHeader,
   FacetFilter,
   FilterBar,
   FilterChip,
+  HeatmapCell,
+  HeatmapLegend,
+  MarkdownCell,
   SearchInput,
+  SparklineCell,
+  barDomain,
+  barGeometry,
+  columnSizeStyle,
+  computeColumnScales,
+  computeRowRanks,
   createSelectionColumn,
   downloadCsv,
-  toCsv
+  extentOf,
+  formatCellValue,
+  heatmapCellStyle,
+  heatmapColorScaleSpec,
+  isSafeCellUrl,
+  parseCellMarkdown,
+  resolveShowAt,
+  seriesValues,
+  stickyRowPinning,
+  tableBreakpointForWidth,
+  toCsv,
+  useTableBreakpoint
 };
 //# sourceMappingURL=index.js.map