@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/data-table.js

@@ -1,140 +1,29 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment as Fragment2, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import {
-  ArrowDown,
-  ArrowDownWideNarrow,
-  ArrowUp,
-  ArrowUpDown,
-  ArrowUpNarrowWide,
-  ChevronDown,
-  ChevronRight,
-  Filter,
-  Pencil,
-  Trash2,
-  X
-} from "lucide-react";
-import { Card, FOCUS_RING, IconButton, Select, Spinner } from "./ui.js";
-import { RowActions } from "./row-actions.js";
+import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Card } from "./card.js";
+import { Spinner } from "./spinner.js";
+import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions.js";
+import { useColumnResize } from "./data-table-resize.js";
+import { useRangeSelection } from "./data-table-selection.js";
+import { RowLink, cleanAttrs, columnLabel, fromOutside, logicalAlign, splitCellProps } from "./data-table-shared.js";
+import { MobileFilters, MobileRow, MobileSort, StackedFields } from "./data-table-mobile.js";
+import { DataTableHead } from "./data-table-head.js";
+import { ColumnSettingsPanel } from "./data-table-column-settings.js";
 import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
-import {
-  defaultFilterState,
-  isFilterActive,
-  resolveFilter,
-  rowMatches
-} from "./data-table-filters.js";
+import { isFilterActive, resolveFilter, rowMatches } from "./data-table-filters.js";
 import { nextSorts } from "./data-table-sort.js";
-import { FilterPopover } from "./data-table-filter-popover.js";
 import { Pagination } from "./data-table-pagination.js";
-import { SwipeableRow } from "./swipeable-row.js";
-import { useBackdropClose } from "./modal.js";
-import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
-import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
-import { Popover } from "./popover.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels } from "./data-table-labels.js";
-import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
-import { Tooltip } from "./tooltip.js";
+import { useKitLabelOverrides, useKitLocale, useKitTableStorageKeyPrefix } from "../i18n/kit-labels.js";
 import { useEdgeFade } from "../lib/strip-fade.js";
-import { dirOf, isRtl } from "../lib/direction.js";
-function splitCellProps(props) {
-  if (!props) return { attrs: {} };
-  const {
-    className,
-    style,
-    role: _role,
-    "data-col": _col,
-    ...attrs
-  } = props;
-  return { attrs, className, style };
-}
-function dataAttrsOf(props) {
-  if (!props) return void 0;
-  const out = {};
-  for (const [k, v] of Object.entries(props)) if (k.startsWith("data-") && k !== "data-col") out[k] = v;
-  return out;
-}
-const ROW_ACTIONS_KEY = "__rowActions";
-function resolveRowAction(action, index, labels) {
-  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
-  return {
-    key: action.kind ?? `${index}:${action.label ?? ""}`,
-    label: action.label ?? (action.kind === "edit" ? labels.edit : action.kind === "delete" ? labels.delete : ""),
-    icon: action.icon ?? (action.kind === "edit" ? /* @__PURE__ */ jsx(Pencil, {}) : action.kind === "delete" ? /* @__PURE__ */ jsx(Trash2, {}) : null),
-    tone,
-    swipe: action.swipe ?? (tone === "danger" ? "start" : "end"),
-    action
-  };
-}
-async function runRowAction(action, row) {
-  if (action.confirm && !await action.confirm(row)) return;
-  action.onAction(row);
-}
-function toRowAction(a, row) {
-  return {
-    key: a.key,
-    label: a.label,
-    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
-    tone: a.tone,
-    disabledReason: a.action.disabledReason?.(row),
-    onSelect: () => void runRowAction(a.action, row)
-  };
-}
-function physicalSwipe(actions, dir) {
-  const rtl = dir === "rtl";
-  return {
-    left: (rtl ? actions.end : actions.start) ?? actions.left,
-    right: (rtl ? actions.start : actions.end) ?? actions.right
-  };
-}
-const PHYSICAL_ALIGN = /(^|\s)((?:[\w-]+:)*)text-(left|right)(?=\s|$)/g;
-function logicalAlign(className) {
-  return className?.replace(
-    PHYSICAL_ALIGN,
-    (token, lead, variants, side) => (
-      // Already scoped to one direction: that is a caller choosing the physical side.
-      /(^|:)(ltr|rtl):/.test(variants) ? token : `${lead}${variants}text-${side === "right" ? "end" : "start"}`
-    )
-  );
-}
-const FOOTER_CELL = "sticky bottom-0 z-10 bg-[var(--bg-surface-2)] shadow-[inset_0_2px_0_var(--border-strong)]";
-const END_ALIGN = /(^|\s)text-end(?=\s|$)/;
-function cleanAttrs(attrs) {
-  if (!attrs) return void 0;
-  const out = {};
-  for (const [k, v] of Object.entries(attrs)) if (v !== void 0) out[k] = v;
-  return out;
-}
-function columnLabel(col, labels) {
-  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
-  return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
-}
-const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
-function StackedFields({ columns, row, compact }) {
-  return /* @__PURE__ */ jsx(
-    "dl",
-    {
-      "data-card-fields": "stacked",
-      className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
-      children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)]", children: col.header }),
-        /* @__PURE__ */ jsx(
-          "dd",
-          {
-            ...dataAttrsOf(col.cellProps?.(row)),
-            className: "mt-0.5 min-w-0 break-words text-[var(--text-secondary)]",
-            children: col.cell(row)
-          }
-        )
-      ] }, col.key))
-    }
-  );
-}
+import { dirOf } from "../lib/direction.js";
+const FOOTER_CELL = "sticky bottom-0 z-10 bg-surface-2 shadow-[inset_0_2px_0_var(--border-strong)]";
 const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortBy: DEFAULT_DATA_TABLE_LABELS.sortBy,
   sortDefault: DEFAULT_DATA_TABLE_LABELS.sortDefault,
@@ -142,66 +31,7 @@ const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortDescending: DEFAULT_DATA_TABLE_LABELS.sortDescending
 };
 const flipDir = (d) => d === "asc" ? "desc" : "asc";
-function MobileSort({
-  columns,
-  sorts,
-  sortCycle,
-  compact,
-  labels,
-  onPick,
-  onFlip
-}) {
-  const selectId = useId();
-  const sortLabels = labels;
-  if (columns.length === 0) return null;
-  const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;
-  const offerDefault = sortCycle === "tri" || primary === null;
-  const desc = primary?.dir === "desc";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-table-mobile-sort": "",
-      className: cn(
-        // At Large the direction button shows its words (IconButton's label, §4); the
-        // row wraps so the select keeps a usable width on a 240 px card.
-        "flex flex-wrap items-center gap-2 border-b border-[var(--border)]",
-        compact ? "px-3 py-1.5" : "px-4 py-2"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "shrink-0 text-xs text-[var(--text-muted)]", children: sortLabels.sortBy }),
-        /* @__PURE__ */ jsxs(
-          Select,
-          {
-            id: selectId,
-            size: compact ? "sm" : "md",
-            className: "min-w-0 flex-1 large:basis-40",
-            value: primary?.key ?? "",
-            onChange: (e) => onPick(e.target.value || null),
-            children: [
-              offerDefault && /* @__PURE__ */ jsx("option", { value: "", children: sortLabels.sortDefault }),
-              columns.map((col) => /* @__PURE__ */ jsx("option", { value: col.key, children: columnLabel(col, labels) }, col.key))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: compact ? "xs" : "md",
-            variant: "secondary",
-            label: desc ? sortLabels.sortDescending : sortLabels.sortAscending,
-            disabled: primary === null,
-            onClick: onFlip,
-            children: desc ? /* @__PURE__ */ jsx(ArrowDownWideNarrow, {}) : /* @__PURE__ */ jsx(ArrowUpNarrowWide, {})
-          }
-        )
-      ]
-    }
-  );
-}
 const OWN_CONTROL = 'a[href],button,input,select,textarea,label,summary,[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="menuitem"],[role="option"],[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
-function fromOutside(target, row) {
-  return !(target instanceof Node) || !row.contains(target);
-}
 function fromOwnControl(target, row) {
   if (!(target instanceof Element)) return false;
   const hit = target.closest(OWN_CONTROL);
@@ -220,37 +50,6 @@ function moveRowFocus(from, key) {
   return true;
 }
 const ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 };
-const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
-function RowLink({
-  href,
-  onActivate,
-  className,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      ...rest,
-      href,
-      draggable: false,
-      className,
-      onClickCapture: (e) => {
-        if (fromOutside(e.target, e.currentTarget)) return;
-        if (isPlainLeftClick(e)) e.preventDefault();
-      },
-      onClick: (e) => {
-        if (fromOutside(e.target, e.currentTarget)) return;
-        if (!isPlainLeftClick(e)) {
-          e.stopPropagation();
-          return;
-        }
-        onActivate?.();
-      },
-      children
-    }
-  );
-}
 import { DEFAULT_PERSIST_PREFIX, useTableState } from "./use-table-state.js";
 import { useMobileReveal } from "./use-mobile-reveal.js";
 function DataTable({
@@ -278,7 +77,7 @@ function DataTable({
   selection,
   labels: labelsProp,
   locale: localeProp,
-  storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
+  storageKeyPrefix: storageKeyPrefixProp,
   mobileExpandAsDialog = false,
   mobileDetailsInRow = false,
   rowName,
@@ -311,6 +110,8 @@ function DataTable({
   const isServer = !!serverPagination;
   const isLoading = !!serverPagination?.isLoading;
   const labelOverrides = useKitLabelOverrides("dataTable");
+  const providerStorageKeyPrefix = useKitTableStorageKeyPrefix();
+  const storageKeyPrefix = storageKeyPrefixProp ?? providerStorageKeyPrefix ?? DEFAULT_PERSIST_PREFIX;
   const labels = useMemo(
     () => resolveDataTableLabels(
       labelOverrides || labelsProp ? {
@@ -322,56 +123,13 @@ function DataTable({
     [labelOverrides, labelsProp]
   );
   const locale = useKitLocale(localeProp);
-  const rowActionsFor = useCallback(
-    (row) => rowActions ? (typeof rowActions === "function" ? rowActions(row) : rowActions).filter((a) => !a.hidden?.(row)).map((a, i) => resolveRowAction(a, i, labels)) : [],
-    [rowActions, labels]
-  );
-  const columns = useMemo(
-    () => rowActions ? [
-      ...columnsProp,
-      {
-        key: ROW_ACTIONS_KEY,
-        header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.actions }),
-        // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
-        // menu at Large once there are two — every label at once does not fit a
-        // row. Each control stops its own click: the row's handler already skips
-        // its controls, and this is for the caller who wraps the table in a
-        // clickable element of their own.
-        cell: (row) => /* @__PURE__ */ jsx(
-          RowActions,
-          {
-            actions: rowActionsFor(row).map((a) => toRowAction(a, row)),
-            name: rowName?.(row),
-            size: density === "compact" ? "2xs" : "xs",
-            labels: { actions: labels.actions },
-            className: "justify-end"
-          }
-        ),
-        className: "w-px whitespace-nowrap text-end",
-        headClassName: "w-px",
-        // On a phone the same actions are the card's swipes.
-        mobileHidden: true,
-        noRowLink: true
-      }
-    ] : columnsProp,
-    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density]
-  );
-  const swipesFromActions = (row) => {
-    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
-    if (!swipes.length) return null;
-    const toSwipe = (a) => ({
-      label: a.label,
-      icon: a.icon,
-      onCommit: () => void runRowAction(a.action, row),
-      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill
-      // and that fill's foreground armed (0.33).
-      tone: a.tone === "danger" ? "danger" : "brand"
-    });
-    return {
-      start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
-      end: swipes.filter((a) => a.swipe === "end").map(toSwipe)
-    };
-  };
+  const { columns, swipesFromActions } = useRowActionColumn({
+    columns: columnsProp,
+    rowActions,
+    rowName,
+    labels,
+    density
+  });
   const swipeActionsFor = mobileSwipeActions ?? (rowActions ? swipesFromActions : void 0);
   const { announce, regionProps } = useAnnounce();
   const {
@@ -541,93 +299,13 @@ function DataTable({
     [columns, hiddenCols]
   );
   const linkColumn = rowHref ? visibleColumns.find((c) => c.mobilePrimary && !c.noRowLink) ?? visibleColumns.find((c) => !c.noRowLink) : void 0;
-  const resizing = useRef(null);
-  const columnCells = (key) => {
-    const th = headRefs.get(key);
-    if (!th) return [];
-    const table = th.closest("table");
-    if (!table) return [th];
-    return [
-      th,
-      ...Array.from(table.querySelectorAll("tbody [data-col], tfoot [data-col]")).filter(
-        (el) => el.dataset.col === key
-      )
-    ];
-  };
-  const applyLiveWidth = (cells, width) => {
-    const px = width == null ? "" : `${width}px`;
-    for (const el of cells) {
-      el.style.width = px;
-      el.style.minWidth = px;
-      el.style.maxWidth = px;
-    }
-  };
-  const releaseResizeChrome = (handle, pointerId) => {
-    document.body.style.userSelect = "";
-    document.body.style.cursor = "";
-    if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture?.(pointerId);
-  };
-  const startResize = (e, key) => {
-    if (e.button !== 0) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const th = headRefs.get(key);
-    const startWidth = th?.getBoundingClientRect().width ?? 100;
-    resizing.current = {
-      key,
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startWidth,
-      sign: isRtl(e.currentTarget) ? -1 : 1,
-      hadWidth: widths[key],
-      cells: columnCells(key),
-      width: startWidth,
-      moved: false
-    };
-    e.currentTarget.setPointerCapture?.(e.pointerId);
-    document.body.style.userSelect = "none";
-    document.body.style.cursor = "col-resize";
-  };
-  const moveResize = (e) => {
-    const drag = resizing.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    drag.width = Math.max(40, Math.round(drag.startWidth + drag.sign * (e.clientX - drag.startX)));
-    drag.moved = true;
-    applyLiveWidth(drag.cells, drag.width);
-  };
-  const finishResize = (e, commit) => {
-    const drag = resizing.current;
-    releaseResizeChrome(e.currentTarget, e.pointerId);
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    resizing.current = null;
-    if (commit && drag.moved) {
-      setWidths((w) => ({ ...w, [drag.key]: drag.width }));
-      return;
-    }
-    applyLiveWidth(drag.cells, drag.hadWidth);
-  };
-  useEffect(
-    () => () => {
-      if (!resizing.current) return;
-      resizing.current = null;
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
-    },
-    []
-  );
-  const autoSizeAll = () => {
-    setWidths({});
-    requestAnimationFrame(() => {
-      const next = {};
-      const cols = columns.filter((c) => !hiddenCols.has(c.key));
-      cols.forEach((col, idx) => {
-        if (idx === cols.length - 1) return;
-        const th = headRefs.get(col.key);
-        if (th) next[col.key] = Math.ceil(th.getBoundingClientRect().width);
-      });
-      setWidths(next);
-    });
-  };
+  const { startResize, moveResize, finishResize, autoSizeAll } = useColumnResize({
+    headRefs,
+    widths,
+    setWidths,
+    columns,
+    hiddenCols
+  });
   const visibleCount = visibleColumns.length;
   const totalCount = columns.length;
   const totalColSpan = visibleCount + (selection ? 1 : 0);
@@ -636,6 +314,7 @@ function DataTable({
   const footerLabelCol = showFooter ? visibleColumns.find((c) => !c.footer && c.key !== ROW_ACTIONS_KEY) ?? visibleColumns[0] : void 0;
   const footerValue = (col) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
+  const detailIdBase = useId();
   const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
   const isMdUp = !usePhoneLayout();
   const desktopScroller = useRef(null);
@@ -669,184 +348,43 @@ function DataTable({
     unpaged,
     defaultPageSize
   });
-  const selectionAnchor = useRef(null);
+  const { selectionAnchor, rangeClick, canSelect, selectRange } = useRangeSelection({
+    selection,
+    slice,
+    rowKey
+  });
   const rowsFocusable = !!onRowClick;
   const [focusRowKey, setFocusRowKey] = useState(null);
   const tabRowKey = focusRowKey !== null && slice.some((r) => rowKey(r) === focusRowKey) ? focusRowKey : slice.length ? rowKey(slice[0]) : null;
-  const rangeClick = useRef(null);
-  const canSelect = (row) => !!selection && (selection.isSelectable?.(row) ?? true);
-  const selectRange = (toIndex) => {
-    if (!selection || selectionAnchor.current === null) return false;
-    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);
-    if (fromIndex < 0) return false;
-    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);
-    const range = [];
-    for (let i = lo; i <= hi; i++) {
-      const r = slice[i];
-      if (r && canSelect(r)) range.push(r);
-    }
-    if (selection.onToggleMany) selection.onToggleMany(range, true);
-    else for (const r of range) selection.onToggle(r, true);
-    return true;
-  };
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
   const mobileDialogContent = mobileDialogRow ? openedRowContent(mobileDialogRow) : null;
   const dialogOpen = !!(mobileDialogRow && mobileDialogContent);
   const closeDialog = () => {
     if (mobileDialogRow) onRowClick?.(mobileDialogRow);
   };
-  const renderMobileRow = (row) => {
-    const expanded = isExpanded?.(row) ?? false;
-    const expansion = expanded ? openedRowContent(row) : null;
-    const tint = rowClassName?.(row);
-    const interactive = !!onRowClick;
-    const opensDetail = interactive && opensRow;
-    const swipeActions = swipeActionsFor?.(row);
-    const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
-    const swipeEnabled = !!swipe && !expanded;
-    const href = mobileCardLinkable ? rowHref?.(row) : void 0;
-    const cardClass = cn(
-      "w-full text-start flex items-center",
-      // §4: more room per row at Large — a taller row is a bigger tap target too.
-      compact ? "px-3 py-2 gap-2 text-sm large:py-3" : "px-4 py-3 gap-3 large:py-4",
-      // Live #320's other half: the card acknowledges the touch before the sheet
-      // arrives. On a cold route the data can take a beat, and an unacknowledged tap
-      // reads as "did that register?" — which is most of what "abrupt" means here.
-      // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires
-      // on every row of a long list, so anything larger becomes the list's personality
-      // rather than feedback. `transition-transform` alone, so the existing background
-      // flip stays instant.
-      interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-[var(--bg-active)] motion-reduce:transition-none motion-reduce:active:scale-100",
-      // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live
-      // #394): the browser's own ring and tap highlight sit on the card's outer edge, and
-      // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and
-      // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
-      // keeps the fill and the squeeze above; an outline on every tap of a long list would
-      // be louder than the acknowledgement it replaces.
-      interactive && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING)
-    );
-    const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex min-w-0 flex-1 flex-col",
-            compact ? "gap-1 large:gap-2" : "gap-2 large:gap-3",
-            // §4 "nothing truncates": at Large a cell's own `truncate` wraps instead —
-            // the reader who chose bigger type is the one an ellipsis fails. A caller's
-            // `mobileCard` is its own layout and keeps what it chose.
-            !mobileCard && CARD_NO_TRUNCATE
-          ),
-          children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
-            mobileSecondaryColumns.length > 0 && large ? (
-              // §4: each label ABOVE its value at Large. Side by side, a label column
-              // sized to the widest label leaves a value a sliver of a 240 px card.
-              /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
-            ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
-              "dl",
-              {
-                className: cn(
-                  "grid grid-cols-[auto_1fr] gap-x-3",
-                  compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
-                ),
-                children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
-                  /* @__PURE__ */ jsx(
-                    "dd",
-                    {
-                      ...dataAttrsOf(col.cellProps?.(row)),
-                      className: "min-w-0 text-[var(--text-secondary)] self-center",
-                      children: col.cell(row)
-                    }
-                  )
-                ] }, col.key))
-              }
-            )
-          ] })
-        }
-      ),
-      opensDetail && // `aria-hidden`: the row already announces itself as a button with
-      // `aria-expanded`, so the icon would only add a second, wordless stop.
-      (mobileExpandAsDialog ? (
-        // Points INTO the sheet, which is the reading-forward direction.
-        /* @__PURE__ */ jsx(
-          ChevronRight,
-          {
-            "aria-hidden": true,
-            className: "size-4 shrink-0 text-[var(--text-placeholder)] rtl:-scale-x-100"
-          }
-        )
-      ) : /* @__PURE__ */ jsx(
-        ChevronDown,
-        {
-          "aria-hidden": true,
-          className: cn(
-            "size-4 shrink-0 text-[var(--text-placeholder)] transition-transform",
-            expanded && "rotate-180"
-          )
-        }
-      ))
-    ] });
-    const body = interactive && href ? (
-      // A card with a URL of its own is a LINK, not a div wearing role="button"
-      // (feedback #451): the phone's long-press "open in new tab" and a screen
-      // reader's link semantics both come free, and the fake role goes away.
-      /* @__PURE__ */ jsx(
-        RowLink,
-        {
-          href,
-          onActivate: () => onRowClick(row),
-          "aria-expanded": opensRow ? expanded : void 0,
-          className: cardClass,
-          onKeyDown: (e) => {
-            if (e.key !== " ") return;
-            e.preventDefault();
-            onRowClick(row);
-          },
-          children: cardInner
-        }
-      )
-    ) : (
-      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
-         only attached when `interactive`, and then so are role="button", tabIndex 0 and the
-         Enter/Space handler below; the rule cannot follow the conditional role. */
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: interactive ? "button" : void 0,
-          tabIndex: interactive ? 0 : void 0,
-          onClick: interactive ? (e) => {
-            if (fromOutside(e.target, e.currentTarget)) return;
-            onRowClick(row);
-          } : void 0,
-          onKeyDown: interactive ? (e) => {
-            if (e.target !== e.currentTarget) return;
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onRowClick(row);
-            }
-          } : void 0,
-          "aria-expanded": opensRow ? expanded : void 0,
-          className: cardClass,
-          children: cardInner
-        }
-      )
-    );
-    return /* @__PURE__ */ jsxs("li", { className: cn(tint), ...cleanAttrs(rowAttributes?.(row)), children: [
-      swipeEnabled ? /* @__PURE__ */ jsx(SwipeableRow, { enabled: true, left: swipe.left, right: swipe.right, children: body }) : body,
-      expansion && !mobileExpandAsDialog && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "bg-[var(--bg-surface-2)] border-t border-[var(--border)]",
-            compact ? "px-3 py-2" : "px-4 py-3"
-          ),
-          children: expansion
-        }
-      )
-    ] }, rowKey(row));
-  };
+  const renderMobileRow = (row) => /* @__PURE__ */ jsx(
+    MobileRow,
+    {
+      row,
+      isExpanded,
+      openedRowContent,
+      opensRow,
+      rowClassName,
+      rowAttributes,
+      onRowClick,
+      rowHref,
+      swipeActionsFor,
+      mobileDir,
+      mobileCardLinkable,
+      mobileCard,
+      mobilePrimaryCol,
+      mobileSecondaryColumns,
+      mobileExpandAsDialog,
+      compact,
+      large
+    },
+    rowKey(row)
+  );
   const mobileGroups = mobileGroupBy ? mobileSlice.reduce((acc, row) => {
     const key = mobileGroupBy(row);
     const last = acc[acc.length - 1];
@@ -878,7 +416,7 @@ function DataTable({
             "data-table-toolbar": "",
             className: cn(
               "flex flex-wrap items-center gap-2",
-              frame ? cn("border-b border-[var(--border)]", compact ? "px-2 py-1.5" : "px-3 py-2") : "pb-3"
+              frame ? cn("border-b border-subtle", compact ? "px-2 py-1.5" : "px-3 py-2") : "pb-3"
             ),
             children: toolbar
           }
@@ -929,7 +467,7 @@ function DataTable({
             "ul",
             {
               className: cn(
-                "divide-y divide-[var(--border)]",
+                "divide-y divide-subtle",
                 // Under `fillHeight` the list is the scroller, as the table body is on a
                 // wide screen: the filter button stays above it and a server pager below.
                 // The endless-scroll sentinel still fires in here — an
@@ -940,15 +478,15 @@ function DataTable({
               ),
               "aria-busy": isLoading || void 0,
               children: [
-                mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-                  /* @__PURE__ */ jsx("li", { className: "sticky top-0 z-10 bg-[var(--bg-surface-2)] px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)] backdrop-blur", children: mobileGroupLabel ? mobileGroupLabel(g.key) : g.key }),
+                mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("li", { className: "sticky top-0 z-10 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur", children: mobileGroupLabel ? mobileGroupLabel(g.key) : g.key }),
                   g.rows.map(renderMobileRow)
                 ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
                 mobileSlice.length === 0 && /* @__PURE__ */ jsx(
                   "li",
                   {
                     className: cn(
-                      "text-center text-[var(--text-muted)]",
+                      "text-center text-muted",
                       compact ? "px-3 py-3 text-xs" : "px-4 py-6 text-sm"
                     ),
                     children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty
@@ -958,7 +496,7 @@ function DataTable({
                   "li",
                   {
                     ref: loadMoreRef,
-                    className: "px-4 py-4 text-center text-xs text-[var(--text-placeholder)]",
+                    className: "px-4 py-4 text-center text-xs text-placeholder",
                     children: /* @__PURE__ */ jsx("bdi", { children: labels.loading })
                   }
                 )
@@ -971,7 +509,7 @@ function DataTable({
               "data-table-footer": "",
               "aria-labelledby": footerLabel != null ? footerHeadingId : void 0,
               className: cn(
-                "border-t-2 border-[var(--border-strong)] bg-[var(--bg-surface-2)]",
+                "border-t-2 border-strong bg-surface-2",
                 compact ? "px-3 py-2" : "px-4 py-3",
                 isLoading && "opacity-60 transition-opacity"
               ),
@@ -984,9 +522,9 @@ function DataTable({
                       "grid grid-cols-[auto_1fr] gap-x-3",
                       compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
                     ),
-                    children: mobileColumns.filter((c) => c.footer).map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-                      /* @__PURE__ */ jsx("dt", { className: "self-center text-xs uppercase tracking-wide text-[var(--text-muted)]", children: col.header }),
-                      /* @__PURE__ */ jsx("dd", { className: "min-w-0 self-center font-semibold text-[var(--text-primary)]", children: footerValue(col) })
+                    children: mobileColumns.filter((c) => c.footer).map((col) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("dt", { className: "self-center text-xs uppercase tracking-wide text-muted", children: col.header }),
+                      /* @__PURE__ */ jsx("dd", { className: "min-w-0 self-center font-semibold text-primary", children: footerValue(col) })
                     ] }, col.key))
                   }
                 )
@@ -1036,173 +574,65 @@ function DataTable({
                     "aria-label": labels.table,
                     "aria-busy": isLoading || void 0,
                     children: [
-                      /* @__PURE__ */ jsx("thead", { className: "bg-[var(--bg-surface-2)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsxs("tr", { className: "text-start", children: [
-                        selection && /* @__PURE__ */ jsx(
-                          "th",
-                          {
-                            scope: "col",
-                            className: cn(
-                              "sticky top-0 z-10 bg-[var(--bg-surface-2)] align-middle backdrop-blur-sm",
-                              compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"
-                            ),
-                            children: /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                type: "checkbox",
-                                className: cn("align-middle accent-indigo-600", compact ? "size-3.5" : "size-4"),
-                                checked: selection.allSelected,
-                                ref: (el) => {
-                                  if (el) el.indeterminate = selection.someSelected && !selection.allSelected;
-                                },
-                                onChange: (e) => selection.onToggleAll(e.target.checked),
-                                "aria-label": labels.selectAllRows
-                              }
-                            )
-                          }
-                        ),
-                        visibleColumns.map((col) => {
-                          const sortable = (!isServer || !!onSortsChange) && !!col.sortBy;
-                          const filter = !isServer || onFiltersChange ? resolveFilter(col) : null;
-                          const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : void 0);
-                          const sortIdx = sorts.findIndex((s) => s.key === col.key);
-                          const active = sortIdx !== -1;
-                          const Icon = active ? sorts[sortIdx].dir === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-                          const filterActive = filterState && isFilterActive(filterState);
-                          const headClass = logicalAlign(col.headClassName);
-                          const isEndAligned = !!headClass && END_ALIGN.test(headClass);
-                          const width = widths[col.key];
-                          const ownHead = splitCellProps(col.headProps);
-                          const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : void 0;
-                          return /* @__PURE__ */ createElement(
-                            "th",
-                            {
-                              ...ownHead.attrs,
-                              key: col.key,
-                              ref: (el) => {
-                                if (el) headRefs.set(col.key, el);
-                                else headRefs.delete(col.key);
-                              },
-                              scope: "col",
-                              "aria-sort": sortable ? sortIdx === 0 ? sorts[0].dir === "asc" ? "ascending" : "descending" : "none" : void 0,
-                              style: ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : void 0,
-                              className: cn(
-                                "relative font-medium align-middle whitespace-nowrap",
-                                compact ? "px-2 py-1" : "px-3 py-2",
-                                // Keep the header visible while the user scrolls the page.
-                                // Each <th> carries its own bg so the row doesn't render
-                                // transparent over the data rows underneath.
-                                "sticky top-0 z-10 bg-[var(--bg-surface-2)] backdrop-blur-sm",
-                                logicalAlign(ownHead.className),
-                                headClass
-                              )
-                            },
-                            /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                className: cn(
-                                  "flex items-center gap-1",
-                                  isEndAligned && "flex-row-reverse"
-                                ),
-                                children: [
-                                  /* @__PURE__ */ jsx(Tooltip, { label: sortable && multiSort ? labels.sortHint : void 0, portal: true, children: /* @__PURE__ */ jsxs(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      onClick: (e) => sortable && toggleSort(col.key, e.shiftKey),
-                                      disabled: !sortable,
-                                      className: cn(
-                                        "flex items-center gap-1 text-start",
-                                        sortable && "hover:text-[var(--text-primary)]"
-                                      ),
-                                      children: [
-                                        /* @__PURE__ */ jsx("span", { children: col.header }),
-                                        sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
-                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-micro font-semibold leading-none text-brand", children: sortIdx + 1 })
-                                      ]
-                                    }
-                                  ) }),
-                                  filter && /* @__PURE__ */ jsx(
-                                    Popover,
-                                    {
-                                      width: filter.type === "date" ? "26.25rem" : void 0,
-                                      labels: { panel: labels.filter },
-                                      trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
-                                        "button",
-                                        {
-                                          type: "button",
-                                          ref,
-                                          onClick: toggle,
-                                          "aria-label": labels.filter,
-                                          className: cn(
-                                            "rounded p-1 transition-colors",
-                                            filterActive ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]" : "text-[var(--text-placeholder)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
-                                          ),
-                                          children: /* @__PURE__ */ jsx(Filter, { className: "size-3" })
-                                        }
-                                      ),
-                                      children: () => /* @__PURE__ */ jsx(
-                                        FilterPopover,
-                                        {
-                                          column: col,
-                                          state: filterState ?? defaultFilterState(filter),
-                                          onChange: (next) => setFilterValue(col.key, next),
-                                          onClear: () => clearFilter(col.key),
-                                          selectOptions: selectOptionsByKey[col.key] ?? [],
-                                          labels,
-                                          locale
-                                        }
-                                      )
-                                    }
-                                  )
-                                ]
-                              }
-                            ),
-                            resizable && col.key !== ROW_ACTIONS_KEY && /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
-                               pointer-only drag handle for a visual preference (column width); it is
-                               deliberately not a tab stop, and no content or action depends on it. */
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                role: "separator",
-                                "aria-orientation": "vertical",
-                                onPointerDown: (e) => startResize(e, col.key),
-                                onPointerMove: moveResize,
-                                onPointerUp: (e) => finishResize(e, true),
-                                onPointerCancel: (e) => finishResize(e, false),
-                                onDoubleClick: (e) => {
-                                  e.preventDefault();
-                                  setWidths((w) => {
-                                    const next = { ...w };
-                                    delete next[col.key];
-                                    return next;
-                                  });
-                                },
-                                className: "absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-[var(--brand-bg-hover)]"
-                              }
-                            )
-                          );
-                        })
-                      ] }) }),
+                      /* @__PURE__ */ jsx(
+                        DataTableHead,
+                        {
+                          visibleColumns,
+                          selection,
+                          compact,
+                          labels,
+                          locale,
+                          isServer,
+                          hasSortCallback: !!onSortsChange,
+                          hasFilterCallback: !!onFiltersChange,
+                          sorts,
+                          filters,
+                          selectOptionsByKey,
+                          multiSort,
+                          resizable,
+                          widths,
+                          setWidths,
+                          headRefs,
+                          toggleSort,
+                          setFilterValue,
+                          clearFilter,
+                          startResize,
+                          moveResize,
+                          finishResize
+                        }
+                      ),
                       /* @__PURE__ */ jsxs(
                         "tbody",
                         {
                           className: cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity"),
                           children: [
-                            leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-[var(--border)]", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: leadingRow }) }),
+                            leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-subtle", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: leadingRow }) }),
                             slice.map((row, rowIndex) => {
                               const expanded = isExpanded?.(row) ?? false;
                               const expansion = expanded ? expandedRow?.(row) : null;
                               const rowInteractive = !!onRowClick || !!selection;
                               const href = rowHref?.(row);
                               const key = rowKey(row);
-                              return /* @__PURE__ */ jsxs(Fragment2, { children: [
+                              const detailId = `${detailIdBase}-${rowIndex}`;
+                              const disclosure = rowsFocusable && expandedRow ? /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  tabIndex: -1,
+                                  className: "sr-only-fixed",
+                                  "aria-label": labels.rowDetails,
+                                  "aria-expanded": expanded,
+                                  "aria-controls": expansion ? detailId : void 0,
+                                  onClick: () => onRowClick(row)
+                                }
+                              ) : null;
+                              return /* @__PURE__ */ jsxs(Fragment, { children: [
                                 /* @__PURE__ */ jsxs(
                                   "tr",
                                   {
                                     ...cleanAttrs(rowAttributes?.(row)),
                                     "data-row-nav": rowsFocusable ? "" : void 0,
                                     tabIndex: rowsFocusable ? key === tabRowKey ? 0 : -1 : void 0,
-                                    "aria-expanded": rowsFocusable && expandedRow ? expanded : void 0,
                                     onFocus: rowsFocusable ? (e) => {
                                       if (e.target === e.currentTarget) setFocusRowKey(key);
                                     } : void 0,
@@ -1218,12 +648,12 @@ function DataTable({
                                       if (moveRowFocus(e.currentTarget, e.key)) e.preventDefault();
                                     } : void 0,
                                     className: cn(
-                                      "border-t border-[var(--border)]",
-                                      rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
+                                      "border-t border-subtle",
+                                      rowInteractive && "cursor-pointer hover:bg-hover",
                                       // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an
                                       // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`
                                       // is not painted by every engine, an outline is.
-                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+                                      rowsFocusable && "focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
                                       rowClassName?.(row)
                                     ),
                                     onClick: rowInteractive ? (e) => {
@@ -1276,7 +706,7 @@ function DataTable({
                                           )
                                         }
                                       ),
-                                      visibleColumns.map((col) => {
+                                      visibleColumns.map((col, colIndex) => {
                                         const width = widths[col.key];
                                         const own = splitCellProps(col.cellProps?.(row));
                                         const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
@@ -1295,6 +725,7 @@ function DataTable({
                                               logicalAlign(col.className)
                                             )
                                           },
+                                          colIndex === 0 && disclosure,
                                           col === linkColumn && href ? (
                                             // No `onActivate`: the click is left to bubble to the
                                             // <tr> handler above, which already owns expand-vs-select.
@@ -1306,14 +737,14 @@ function DataTable({
                                     ]
                                   }
                                 ),
-                                expansion && /* @__PURE__ */ jsx("tr", { className: "bg-[var(--bg-surface-2)] border-t border-[var(--border)]", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: cn("w-0 min-w-full", compact ? "px-2 py-2" : "px-3 py-3"), children: expansion }) }) })
+                                expansion && /* @__PURE__ */ jsx("tr", { id: disclosure ? detailId : void 0, className: "bg-surface-2 border-t border-subtle", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: cn("w-0 min-w-full", compact ? "px-2 py-2" : "px-3 py-3"), children: expansion }) }) })
                               ] }, key);
                             }),
                             slice.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                               "td",
                               {
                                 colSpan: totalColSpan,
-                                className: cn("text-center text-[var(--text-muted)]", compact ? "px-2 py-2" : "px-3 py-4"),
+                                className: cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4"),
                                 children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty
                               }
                             ) })
@@ -1330,7 +761,7 @@ function DataTable({
                         {
                           "data-table-footer": "",
                           className: cn(
-                            "font-semibold text-[var(--text-primary)]",
+                            "font-semibold text-primary",
                             isLoading && "opacity-60 transition-opacity"
                           ),
                           children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -1395,96 +826,19 @@ function DataTable({
               }
             )
           ] }),
-          columnSettings && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Tooltip, { label: columnsCountLabel, portal: true, children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowSettings(true),
-                "aria-label": columnsCountLabel,
-                "aria-hidden": showSettings,
-                tabIndex: showSettings ? -1 : 0,
-                className: cn(
-                  "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
-                  "border-s border-[var(--border)]",
-                  "hover:bg-[var(--bg-hover)]",
-                  showSettings ? "w-0 border-s-0" : "w-8 cursor-pointer"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "whitespace-nowrap text-xs font-medium tracking-wide text-[var(--text-muted)] group-hover:text-[var(--text-secondary)]",
-                    style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
-                    children: columnsCountLabel
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
-                  showSettings ? "w-56" : "w-0"
-                ),
-                children: /* @__PURE__ */ jsxs("div", { className: "flex w-56 flex-col border-s border-[var(--border)] p-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-1", children: [
-                    /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: columnsCountLabel }),
-                    /* @__PURE__ */ jsx(Tooltip, { label: labels.close, portal: true, children: /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setShowSettings(false),
-                        "aria-label": labels.close,
-                        className: "rounded p-0.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-                        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-                      }
-                    ) })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: autoSizeAll,
-                      className: "mb-2 rounded border border-[var(--border)] px-2 py-1 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-                      children: labels.autoSize
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => {
-                    if (col.key === ROW_ACTIONS_KEY) return null;
-                    const checked = !hiddenCols.has(col.key);
-                    const headerLabel = columnLabel(col);
-                    return /* @__PURE__ */ jsxs(
-                      "label",
-                      {
-                        className: "inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-[var(--bg-hover)]",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "checkbox",
-                              className: "size-3.5",
-                              checked,
-                              onChange: (e) => {
-                                setHiddenCols((s) => {
-                                  const next = new Set(s);
-                                  if (e.target.checked) next.delete(col.key);
-                                  else next.add(col.key);
-                                  return next;
-                                });
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "truncate", children: headerLabel })
-                        ]
-                      },
-                      col.key
-                    );
-                  }) })
-                ] })
-              }
-            )
-          ] })
+          columnSettings && /* @__PURE__ */ jsx(
+            ColumnSettingsPanel,
+            {
+              columns,
+              hiddenCols,
+              setHiddenCols,
+              showSettings,
+              setShowSettings,
+              columnsCountLabel,
+              labels,
+              autoSizeAll
+            }
+          )
         ] })
       ]
     }
@@ -1502,153 +856,6 @@ function LoadingText({ label }) {
     /* @__PURE__ */ jsx("bdi", { children: label })
   ] });
 }
-function MobileFilters({
-  columns,
-  filters,
-  selectOptionsByKey,
-  isServer,
-  hasFilterCallback,
-  onSetFilter,
-  onClearFilter,
-  onClearAll,
-  labels,
-  locale
-}) {
-  const [open, setOpen] = useState(false);
-  const [dir, setDir] = useState("ltr");
-  const [expanded, setExpanded] = useState(null);
-  const backdropClose = useBackdropClose(() => setOpen(false));
-  useBodyScrollLock(open);
-  useOverlayHistory(open, () => setOpen(false));
-  const filterable = useMemo(
-    () => columns.map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null })).filter((x) => !!x.filter),
-    [columns, isServer, hasFilterCallback]
-  );
-  if (filterable.length === 0) return null;
-  const activeCount = filterable.filter(({ col }) => {
-    const s = filters[col.key];
-    return s && isFilterActive(s);
-  }).length;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-2", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          setDir(dirOf(e.currentTarget));
-          setOpen(true);
-        },
-        className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-        children: [
-          /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: labels.filters }),
-          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-caption font-semibold text-[var(--info)]", children: activeCount })
-        ]
-      }
-    ),
-    activeCount > 0 && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onClearAll,
-        className: "text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
-        children: labels.clearAll
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "fixed inset-0 z-50 flex items-end justify-center bg-black/40",
-          role: "dialog",
-          "aria-modal": "true",
-          dir,
-          ...backdropClose,
-          children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[85vh] w-full flex-col overflow-hidden rounded-t-2xl bg-[var(--bg-surface)] shadow-xl", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium", children: labels.filters }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setOpen(false),
-                  "aria-label": labels.close,
-                  className: "-me-1 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-[var(--border)] overflow-y-auto overscroll-contain", children: filterable.map(({ col, filter }) => {
-              const state = filters[col.key];
-              const active = !!state && isFilterActive(state);
-              const isItemOpen = expanded === col.key;
-              return /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setExpanded(isItemOpen ? null : col.key),
-                    "aria-expanded": isItemOpen,
-                    className: "flex w-full items-center justify-between gap-2 px-4 py-3 text-start",
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)]", children: [
-                        col.header,
-                        active && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-brand" })
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        ChevronDown,
-                        {
-                          className: cn(
-                            "size-4 shrink-0 text-[var(--text-placeholder)] transition-transform",
-                            isItemOpen && "rotate-180"
-                          )
-                        }
-                      )
-                    ]
-                  }
-                ),
-                isItemOpen && /* @__PURE__ */ jsx("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx(
-                  FilterPopover,
-                  {
-                    column: col,
-                    state: state ?? defaultFilterState(filter),
-                    onChange: (next) => onSetFilter(col.key, next),
-                    onClear: () => onClearFilter(col.key),
-                    selectOptions: selectOptionsByKey[col.key] ?? [],
-                    labels,
-                    locale
-                  }
-                ) })
-              ] }, col.key);
-            }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-[var(--border)] px-4 py-3", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClearAll,
-                  disabled: activeCount === 0,
-                  className: "text-sm text-[var(--text-muted)] hover:text-[var(--text-secondary)] disabled:opacity-40",
-                  children: labels.clearAll
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setOpen(false),
-                  className: "rounded-md bg-[var(--bg-inverse)] px-4 py-2 text-sm font-medium text-[var(--text-inverse)]",
-                  children: labels.done
-                }
-              )
-            ] })
-          ] })
-        }
-      ),
-      document.body
-    )
-  ] });
-}
 export {
   DEFAULT_DATA_TABLE_SORT_LABELS,
   DataTable