@elabs-ai/components-data 4.0.0 → 4.2.0

package/dist/index.js

@@ -1,7 +1,14 @@
 "use client";
 
 // src/data-table/data-table.tsx
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -11,10 +18,30 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import { Button, Skeleton, Spinner, useLocale } from "@elabs-ai/components-ui";
+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, 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;
@@ -24,6 +51,7 @@ function isActiveTextSelection() {
   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) => {
@@ -42,6 +70,78 @@ function unsizedColumnIds(defs) {
   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,
@@ -63,6 +163,15 @@ function DataTableInner({
   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
@@ -81,6 +190,11 @@ function DataTableInner({
   overscan = 8,
   maxBodyHeight = "32rem",
   zebra = true,
+  columnDividers = false,
+  // Row drag-reorder (#13)
+  enableRowReorder = false,
+  onRowReorder,
+  rowReorderHandle = "cell",
   onRowClick,
   rowActionLabel,
   rowClassName,
@@ -89,13 +203,15 @@ function DataTableInner({
   className,
   ...rest
 }, ref) {
-  const { t } = useLocale();
+  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 ?? []
   );
@@ -117,12 +233,20 @@ function DataTableInner({
   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);
@@ -135,6 +259,10 @@ function DataTableInner({
   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) {
@@ -144,6 +272,54 @@ function DataTableInner({
       );
     }
   }, [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({
@@ -172,13 +348,28 @@ function DataTableInner({
   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 },
+    state: {
+      sorting,
+      columnVisibility,
+      columnFilters,
+      globalFilter,
+      pagination,
+      columnPinning,
+      columnSizing,
+      rowSelection
+    },
     // Sorting
     onSortingChange: (updater) => {
       const next = resolveSorting(updater);
@@ -233,6 +424,38 @@ function DataTableInner({
       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,
@@ -251,6 +474,83 @@ function DataTableInner({
   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 = {
@@ -298,12 +598,33 @@ function DataTableInner({
       // 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 all three themes and on both edges. So the one cue vanished
+      // 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,
@@ -356,101 +677,210 @@ function DataTableInner({
           // 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__ */ jsx("tr", { "aria-rowindex": withRowIndex ? groupIndex + 1 : void 0, children: 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;
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              scope: "col",
-              "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
-              "data-pinned": geometry?.pinned ?? void 0,
-              style: geometry?.style,
-              className: cn(
-                "h-10 px-3 text-start align-middle font-medium text-muted-foreground",
-                // 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
-              ),
-              children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: header.column.getToggleSortingHandler(),
-                  "aria-label": `Sort by ${headerLabel}, ${sortStateLabel}`,
-                  className: "inline-flex items-center gap-1 rounded-sm transition-colors duration-fast ease-standard hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-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())
-            },
-            header.id
-          );
-        }) }, headerGroup.id))
+        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 rowIndex % 2 === 1 ? "bg-foreground/5" : "";
+    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-foreground/5",
-      "group-hover/row:before:bg-foreground/10",
+      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 firstValue = row.getVisibleCells()[0]?.getValue();
-    if (typeof firstValue === "string" && firstValue.trim() !== "") return firstValue;
-    if (typeof firstValue === "number") return String(firstValue);
+    const name = firstDataCellValue(row);
+    if (name !== void 0) return name;
     return t("data.table.rowAction");
   }
-  function renderRow(row, rowIndex, extras) {
+  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__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "tr",
       {
         "data-state": row.getIsSelected() ? "selected" : void 0,
@@ -461,7 +891,16 @@ function DataTableInner({
           // (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-foreground/10 data-[state=selected]:bg-accent",
+          "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`
@@ -474,58 +913,151 @@ function DataTableInner({
           // `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]:outline-2 has-[[data-slot=data-table-row-action]:focus-visible]:-outline-offset-2 has-[[data-slot=data-table-row-action]:focus-visible]:outline-ring",
+          clickable && "cursor-pointer has-[[data-slot=data-table-row-action]:focus-visible]:focus-ring-static-inset",
           rowClassName?.(row)
         ),
         ...extras,
-        children: row.getVisibleCells().map((cell, cellIndex) => {
-          const geometry = pinnedCellGeometry(cell.column);
-          return /* @__PURE__ */ jsxs(
-            "td",
+        children: [
+          dragHandle?.activator && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2 align-middle", children: /* @__PURE__ */ jsx(
+            "button",
             {
-              "data-pinned": geometry?.pinned ?? void 0,
-              style: geometry?.style,
+              type: "button",
+              ref: dragHandle.activator.setActivatorNodeRef,
+              "data-slot": "data-table-row-drag-handle",
+              "aria-label": t("data.table.reorderHandle", { name: rowActionName(row) }),
               className: cn(
-                "px-3 py-2 align-middle",
-                // 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
+                "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"
               ),
-              children: [
-                clickable && cellIndex === 0 && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-slot": "data-table-row-action",
-                    className: "sr-only",
-                    onClick: (event) => onRowClick?.(row, event),
-                    children: rowActionName(row)
-                  }
+              ...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
                 ),
-                flexRender(cell.column.columnDef.cell, cell.getContext())
-              ]
-            },
-            cell.id
-          );
-        })
+                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) {
-    return Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", className: rowSeparationClass(i), children: Array.from({ length: colCount }).map((_2, j) => /* @__PURE__ */ jsx("td", { className: "px-3 py-2 align-middle", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, j)) }, `skeleton-${i}`));
+    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, className: "h-24 px-3 text-center text-muted-foreground", children: emptyMessage }) });
+    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) });
     }
-    return /* @__PURE__ */ jsx("tbody", { children: showEmpty ? renderEmptyBody() : rows.map((row, i) => renderRow(row, i)) });
+    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) {
@@ -592,9 +1124,10 @@ function DataTableInner({
         {
           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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className: "relative overflow-auto rounded-lg border bg-card focus-ring",
           style: { maxHeight: maxBodyHeight, ...pinnedScrollPadding },
           children: [
             loading && rows.length > 0 && /* @__PURE__ */ jsxs(
@@ -605,7 +1138,7 @@ function DataTableInner({
                 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: "Loading table data\u2026" })
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.loading") })
                 ]
               }
             ),
@@ -627,7 +1160,7 @@ function DataTableInner({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-3", className), ...rest, children: [
+  const nonVirtualizedContent = /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-3", className), ...rest, children: [
     toolbar ? toolbar(table) : null,
     /* @__PURE__ */ jsxs(
       "div",
@@ -643,7 +1176,7 @@ function DataTableInner({
               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: "Loading table data\u2026" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("data.table.loading") })
               ]
             }
           ),
@@ -653,9 +1186,10 @@ function DataTableInner({
               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-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              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,
@@ -685,28 +1219,75 @@ function DataTableInner({
     ),
     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 { useId } from "react";
-import { Input } from "@elabs-ai/components-ui";
+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";
-function SearchInput({
+var SearchInput = forwardRef2(function SearchInput2({
   value,
   onValueChange,
-  label = "Search",
-  placeholder = "Search\u2026",
+  label,
+  placeholder,
   className,
   containerClassName,
   disabled,
+  id: idProp,
   ...props
-}) {
-  const id = useId();
+}, 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: label }),
+    /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "sr-only", children: resolvedLabel }),
     /* @__PURE__ */ jsx2(
       SearchIcon,
       {
@@ -717,10 +1298,11 @@ function SearchInput({
     /* @__PURE__ */ jsx2(
       Input,
       {
+        ref: setRefs,
         id,
         value,
         onChange: (e) => onValueChange(e.target.value),
-        placeholder,
+        placeholder: resolvedPlaceholder,
         disabled,
         className: cn2("ps-8", value && "pe-8", className),
         ...props
@@ -730,9 +1312,9 @@ function SearchInput({
       "button",
       {
         type: "button",
-        onClick: () => onValueChange(""),
-        "aria-label": "Clear search",
-        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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring animate-in fade-in zoom-in-95 duration-fast ease-entrance",
+        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",
           {
@@ -751,7 +1333,7 @@ function SearchInput({
       }
     ) : null
   ] });
-}
+});
 
 // src/filter-bar/filter-bar.tsx
 import "react";
@@ -764,8 +1346,31 @@ function FilterBar({ children, actions, className }) {
   ] });
 }
 
+// src/filter-bar/filter-chip.tsx
+import { forwardRef as forwardRef3 } from "react";
+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 forwardRef2 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import {
   Badge,
   Button as Button2,
@@ -774,11 +1379,13 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
+  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 jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var FacetFilter = forwardRef2(function FacetFilter2({ title, options, selected, onSelectedChange, className, ...props }, ref) {
+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);
@@ -787,9 +1394,9 @@ var FacetFilter = forwardRef2(function FacetFilter2({ title, options, selected,
     onSelectedChange([...next]);
   };
   return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button2, { ref, variant: "outline", className: cn4("border-dashed", className), ...props, 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__ */ jsx4(
+      selected.length > 0 ? /* @__PURE__ */ jsx5(
         Badge,
         {
           variant: "secondary",
@@ -799,7 +1406,7 @@ var FacetFilter = forwardRef2(function FacetFilter2({ title, options, selected,
       ) : null
     ] }) }),
     /* @__PURE__ */ jsxs4(DropdownMenuContent, { className: "min-w-[12rem]", children: [
-      /* @__PURE__ */ jsx4(DropdownMenuLabel, { children: title }),
+      /* @__PURE__ */ jsx5(DropdownMenuLabel, { children: title }),
       options.map((opt) => {
         const checked = selectedSet.has(opt.value);
         return /* @__PURE__ */ jsxs4(
@@ -810,7 +1417,7 @@ var FacetFilter = forwardRef2(function FacetFilter2({ title, options, selected,
               toggle(opt.value);
             },
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -825,8 +1432,8 @@ var FacetFilter = forwardRef2(function FacetFilter2({ title, options, selected,
         );
       }),
       selected.length > 0 ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsx4(DropdownMenuItem, { onSelect: () => onSelectedChange([]), children: "Clear filters" })
+        /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx5(DropdownMenuItem, { onSelect: () => onSelectedChange([]), children: t("data.facetFilter.clearFilters") })
       ] }) : null
     ] })
   ] });
@@ -835,7 +1442,7 @@ FacetFilter.displayName = "FacetFilter";
 
 // src/column-picker/column-picker.tsx
 import "@tanstack/react-table";
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import {
   Button as Button3,
   DropdownMenu as DropdownMenu2,
@@ -843,17 +1450,20 @@ import {
   DropdownMenuItem as DropdownMenuItem2,
   DropdownMenuLabel as DropdownMenuLabel2,
   DropdownMenuSeparator as DropdownMenuSeparator2,
-  DropdownMenuTrigger as DropdownMenuTrigger2
+  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 jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function ColumnPickerInner({ table, label = "Columns", className, ...props }, ref) {
+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__ */ jsx5(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx5(Button3, { ref, variant: "outline", size: "sm", className: cn5(className), ...props, children: label }) }),
+    /* @__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__ */ jsx5(DropdownMenuLabel2, { children: "Toggle columns" }),
-      /* @__PURE__ */ jsx5(DropdownMenuSeparator2, {}),
+      /* @__PURE__ */ jsx6(DropdownMenuLabel2, { children: t("data.columnPicker.toggleColumns") }),
+      /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {}),
       columns.map((column) => /* @__PURE__ */ jsxs5(
         DropdownMenuItem2,
         {
@@ -862,7 +1472,7 @@ function ColumnPickerInner({ table, label = "Columns", className, ...props }, re
             column.toggleVisibility(!column.getIsVisible());
           },
           children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "span",
               {
                 "aria-hidden": "true",
@@ -870,7 +1480,7 @@ function ColumnPickerInner({ table, label = "Columns", className, ...props }, re
                 children: column.getIsVisible() ? "\u2713" : ""
               }
             ),
-            /* @__PURE__ */ jsx5("span", { className: "capitalize", children: column.id })
+            /* @__PURE__ */ jsx6("span", { className: "capitalize", children: column.id })
           ]
         },
         column.id
@@ -879,26 +1489,12 @@ function ColumnPickerInner({ table, label = "Columns", className, ...props }, re
   ] });
 }
 ColumnPickerInner.displayName = "ColumnPicker";
-var ColumnPicker = forwardRef3(ColumnPickerInner);
+var ColumnPicker = forwardRef5(ColumnPickerInner);
 
 // src/to-csv.ts
-import { downloadBlob } from "@elabs-ai/components-ui";
-var INJECTION_PREFIXES = ["=", "+", "-", "@"];
-function stringifyValue(value) {
-  if (value === null || value === void 0) return "";
-  if (value instanceof Date) return value.toISOString();
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
-}
-function quoteField(field, delimiter) {
-  if (INJECTION_PREFIXES.some((p) => field.startsWith(p))) {
-    field = "'" + field;
-  }
-  if (field.includes(delimiter) || field.includes('"') || field.includes("\n") || field.includes("\r")) {
-    return '"' + field.replaceAll('"', '""') + '"';
-  }
-  return field;
-}
+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;
@@ -926,7 +1522,9 @@ export {
   DataTableWithRef as DataTable,
   FacetFilter,
   FilterBar,
+  FilterChip,
   SearchInput,
+  createSelectionColumn,
   downloadCsv,
   toCsv
 };