@eifi1/ui-kit 0.6.0 → 0.7.0

package/dist/components/data-table.js

@@ -11,8 +11,7 @@ import {
   Filter,
   X
 } from "lucide-react";
-import { useSearchParams } from "react-router";
-import { Card } from "./ui.js";
+import { Card, Spinner } from "./ui.js";
 import { cn } from "../lib/cn.js";
 import {
   defaultFilterState,
@@ -34,6 +33,25 @@ import { useAnnounce } from "../hooks/use-announce.js";
 import { resolveDataTableLabels } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
 import { Tooltip } from "./tooltip.js";
+import { dirOf, isRtl } from "../lib/direction.js";
+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 END_ALIGN = /(^|\s)text-end(?=\s|$)/;
 function cleanAttrs(attrs) {
   if (!attrs) return void 0;
   const out = {};
@@ -108,6 +126,7 @@ function DataTable({
   leadingRow
 }) {
   const isServer = !!serverPagination;
+  const isLoading = !!serverPagination?.isLoading;
   const labelOverrides = useKitLabelOverrides("dataTable");
   const labels = useMemo(
     () => resolveDataTableLabels(
@@ -120,7 +139,6 @@ function DataTable({
     [labelOverrides, labelsProp]
   );
   const locale = useKitLocale(localeProp);
-  const [, setSearchParams] = useSearchParams();
   const { announce, regionProps } = useAnnounce();
   const {
     sorts,
@@ -143,7 +161,6 @@ function DataTable({
     storageKey,
     storageKeyPrefix,
     urlSync,
-    setSearchParams,
     defaultPageSize,
     sortsProp,
     filtersProp
@@ -315,6 +332,7 @@ function DataTable({
       pointerId: e.pointerId,
       startX: e.clientX,
       startWidth,
+      sign: isRtl(e.currentTarget) ? -1 : 1,
       hadWidth: widths[key],
       cells: columnCells(key),
       width: startWidth,
@@ -327,7 +345,7 @@ function DataTable({
   const moveResize = (e) => {
     const drag = resizing.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
-    drag.width = Math.max(40, Math.round(drag.startWidth + (e.clientX - drag.startX)));
+    drag.width = Math.max(40, Math.round(drag.startWidth + drag.sign * (e.clientX - drag.startX)));
     drag.moved = true;
     applyLiveWidth(drag.cells, drag.width);
   };
@@ -373,14 +391,22 @@ function DataTable({
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
   const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
   const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
+  const [mobileDir, setMobileDir] = useState("ltr");
+  const mobileRootRef = (el) => {
+    if (!el) return;
+    const d = dirOf(el);
+    if (d !== mobileDir) setMobileDir(d);
+  };
   const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
     rows: sorted,
     slice,
     isServer,
     isMdUp,
+    unpaged,
     defaultPageSize
   });
   const selectionAnchor = useRef(null);
+  const rangeClick = useRef(null);
   const canSelect = (row) => !!selection && (selection.isSelectable?.(row) ?? true);
   const selectRange = (toIndex) => {
     if (!selection || selectionAnchor.current === null) return false;
@@ -408,11 +434,12 @@ function DataTable({
     const tint = rowClassName?.(row);
     const interactive = !!onRowClick;
     const opensDetail = interactive && !!expandedRow;
-    const swipe = mobileSwipeActions?.(row);
+    const swipeActions = mobileSwipeActions?.(row);
+    const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     const swipeEnabled = !!swipe && !expanded;
     const href = mobileCardLinkable ? rowHref?.(row) : void 0;
     const cardClass = cn(
-      "w-full px-4 py-3 text-left flex items-center gap-3",
+      "w-full px-4 py-3 text-start flex items-center gap-3",
       // 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.
@@ -432,7 +459,16 @@ function DataTable({
       ] }) }),
       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 ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--text-placeholder)]" }) : /* @__PURE__ */ jsx(
+      (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,
@@ -493,7 +529,7 @@ function DataTable({
   }, []) : null;
   return /* @__PURE__ */ jsxs(Card, { flush: true, className: cn("overflow-clip", fillHeight && "md:flex md:flex-1 md:flex-col md:min-h-0"), children: [
     /* @__PURE__ */ jsx("span", { ...regionProps }),
-    !isMdUp && /* @__PURE__ */ jsxs("div", { children: [
+    !isMdUp && /* @__PURE__ */ jsxs("div", { ref: mobileRootRef, children: [
       (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
         MobileFilters,
         {
@@ -509,21 +545,32 @@ function DataTable({
           locale
         }
       ),
-      /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-[var(--border)]", 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 }),
-          g.rows.map(renderMobileRow)
-        ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
-        mobileSlice.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-6 text-center text-sm text-[var(--text-muted)]", children: empty ?? "\u2014" }),
-        canRevealMoreMobile && /* @__PURE__ */ jsx(
-          "li",
-          {
-            ref: loadMoreRef,
-            className: "px-4 py-4 text-center text-xs text-[var(--text-placeholder)]",
-            children: labels.loading
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          className: cn(
+            "divide-y divide-[var(--border)]",
+            // Same busy treatment as the desktop body; see `isLoading` below.
+            isLoading && mobileSlice.length > 0 && "opacity-60 transition-opacity"
+          ),
+          "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 }),
+              g.rows.map(renderMobileRow)
+            ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
+            mobileSlice.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-6 text-center text-sm text-[var(--text-muted)]", children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? "\u2014" }),
+            canRevealMoreMobile && /* @__PURE__ */ jsx(
+              "li",
+              {
+                ref: loadMoreRef,
+                className: "px-4 py-4 text-center text-xs text-[var(--text-placeholder)]",
+                children: labels.loading
+              }
+            )
+          ]
+        }
+      ),
       isServer && /* @__PURE__ */ jsx(
         Pagination,
         {
@@ -532,7 +579,7 @@ function DataTable({
           pageSize: paginationPageSize,
           total: paginationTotal,
           onPage: goToPage,
-          onPageSize: (n) => serverPagination.onPageSizeChange?.(n),
+          onPageSize: serverPagination.onPageSizeChange,
           labels,
           locale
         }
@@ -555,236 +602,262 @@ function DataTable({
           {
             className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0"),
             style: fillHeight ? void 0 : { maxHeight: maxBodyHeight },
-            children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", "aria-label": labels.table, children: [
-              /* @__PURE__ */ jsx("thead", { className: "bg-[var(--bg-surface-2)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsxs("tr", { className: "text-left", children: [
-                selection && /* @__PURE__ */ jsx(
-                  "th",
-                  {
-                    scope: "col",
-                    className: "sticky top-0 z-10 w-10 bg-[var(--bg-surface-2)] px-3 py-2 align-middle backdrop-blur-sm",
-                    children: /* @__PURE__ */ jsx(
-                      "input",
+            children: /* @__PURE__ */ jsxs(
+              "table",
+              {
+                className: "w-full text-sm",
+                "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",
                       {
-                        type: "checkbox",
-                        className: "size-4 align-middle accent-indigo-600",
-                        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 isRightAligned = col.headClassName?.includes("text-right");
-                  const width = widths[col.key];
-                  return /* @__PURE__ */ jsxs(
-                    "th",
-                    {
-                      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: width ? { width, minWidth: width, maxWidth: width } : void 0,
-                      className: cn(
-                        "relative px-3 py-2 font-medium align-middle whitespace-nowrap",
-                        // 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",
-                        col.headClassName
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxs(
-                          "div",
+                        scope: "col",
+                        className: "sticky top-0 z-10 w-10 bg-[var(--bg-surface-2)] px-3 py-2 align-middle backdrop-blur-sm",
+                        children: /* @__PURE__ */ jsx(
+                          "input",
                           {
-                            className: cn(
-                              "flex items-center gap-1",
-                              isRightAligned && "flex-row-reverse"
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsx(Tooltip, { label: sortable ? 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-left",
-                                    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-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
-                                  ]
-                                }
-                              ) }),
-                              filter && /* @__PURE__ */ jsx(
-                                Popover,
-                                {
-                                  width: filter.type === "date" ? 420 : void 0,
-                                  labels: { panel: labels.filter },
-                                  trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
+                            type: "checkbox",
+                            className: "size-4 align-middle accent-indigo-600",
+                            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];
+                      return /* @__PURE__ */ jsxs(
+                        "th",
+                        {
+                          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: width ? { width, minWidth: width, maxWidth: width } : void 0,
+                          className: cn(
+                            "relative px-3 py-2 font-medium align-middle whitespace-nowrap",
+                            // 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",
+                            headClass
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                className: cn(
+                                  "flex items-center gap-1",
+                                  isEndAligned && "flex-row-reverse"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx(Tooltip, { label: sortable ? labels.sortHint : void 0, portal: true, children: /* @__PURE__ */ jsxs(
                                     "button",
                                     {
                                       type: "button",
-                                      ref,
-                                      onClick: toggle,
-                                      "aria-label": labels.filter,
+                                      onClick: (e) => sortable && toggleSort(col.key, e.shiftKey),
+                                      disabled: !sortable,
                                       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)]"
+                                        "flex items-center gap-1 text-start",
+                                        sortable && "hover:text-[var(--text-primary)]"
                                       ),
-                                      children: /* @__PURE__ */ jsx(Filter, { className: "size-3" })
+                                      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-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
+                                      ]
                                     }
-                                  ),
-                                  children: () => /* @__PURE__ */ jsx(
-                                    FilterPopover,
+                                  ) }),
+                                  filter && /* @__PURE__ */ jsx(
+                                    Popover,
                                     {
-                                      column: col,
-                                      state: filterState ?? defaultFilterState(filter),
-                                      onChange: (next) => setFilterValue(col.key, next),
-                                      onClear: () => clearFilter(col.key),
-                                      selectOptions: selectOptionsByKey[col.key] ?? [],
-                                      labels,
-                                      locale
+                                      width: filter.type === "date" ? 420 : 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
+                                        }
+                                      )
                                     }
                                   )
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "span",
+                                ]
+                              }
+                            ),
+                            /* @__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)]"
+                              }
+                            )
+                          ]
+                        },
+                        col.key
+                      );
+                    })
+                  ] }) }),
+                  /* @__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 }) }),
+                        slice.map((row, rowIndex) => {
+                          const expanded = isExpanded?.(row) ?? false;
+                          const expansion = expanded ? expandedRow?.(row) : null;
+                          const rowInteractive = !!onRowClick || !!selection;
+                          const href = rowHref?.(row);
+                          return /* @__PURE__ */ jsxs(Fragment2, { children: [
+                            /* @__PURE__ */ jsxs(
+                              "tr",
+                              {
+                                ...cleanAttrs(rowAttributes?.(row)),
+                                className: cn(
+                                  "border-t border-[var(--border)]",
+                                  rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
+                                  rowClassName?.(row)
+                                ),
+                                onClick: rowInteractive ? (e) => {
+                                  if (selection && canSelect(row)) {
+                                    if (e.shiftKey) {
+                                      window.getSelection?.()?.removeAllRanges();
+                                      if (selectRange(rowIndex)) return;
+                                      selectionAnchor.current = rowKey(row);
+                                      selection.onToggle(row, !selection.isSelected(row));
+                                      return;
+                                    }
+                                    if (e.metaKey || e.ctrlKey) {
+                                      selectionAnchor.current = rowKey(row);
+                                      selection.onToggle(row, !selection.isSelected(row));
+                                      return;
+                                    }
+                                  }
+                                  onRowClick?.(row);
+                                } : void 0,
+                                children: [
+                                  selection && /* @__PURE__ */ jsx(
+                                    "td",
+                                    {
+                                      className: "w-10 px-3 py-2 align-top",
+                                      onClick: (e) => e.stopPropagation(),
+                                      children: canSelect(row) && /* @__PURE__ */ jsx(
+                                        "input",
+                                        {
+                                          type: "checkbox",
+                                          className: "size-4 accent-indigo-600",
+                                          checked: selection.isSelected(row),
+                                          onClick: (e) => {
+                                            if (e.shiftKey && selectRange(rowIndex)) {
+                                              e.preventDefault();
+                                              rangeClick.current = e.nativeEvent;
+                                            }
+                                          },
+                                          onChange: (e) => {
+                                            if (rangeClick.current && e.nativeEvent === rangeClick.current) {
+                                              rangeClick.current = null;
+                                              return;
+                                            }
+                                            selectionAnchor.current = rowKey(row);
+                                            selection.onToggle(row, e.target.checked);
+                                          },
+                                          "aria-label": labels.selectRow
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  visibleColumns.map((col) => {
+                                    const width = widths[col.key];
+                                    return /* @__PURE__ */ jsx(
+                                      "td",
+                                      {
+                                        "data-col": col.key,
+                                        style: width ? { width, minWidth: width, maxWidth: width } : void 0,
+                                        className: cn(
+                                          "px-3 py-2 align-top",
+                                          width && "overflow-hidden text-ellipsis",
+                                          logicalAlign(col.className)
+                                        ),
+                                        children: col === linkColumn && href ? (
+                                          // No `onActivate`: the click is left to bubble to the
+                                          // <tr> handler above, which already owns expand-vs-select.
+                                          // Calling it here as well would toggle the row twice.
+                                          /* @__PURE__ */ jsx(RowLink, { href, className: "block", children: col.cell(row) })
+                                        ) : col.cell(row)
+                                      },
+                                      col.key
+                                    );
+                                  })
+                                ]
+                              }
+                            ),
+                            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: "w-0 min-w-full px-3 py-3", children: expansion }) }) })
+                          ] }, rowKey(row));
+                        }),
+                        slice.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                          "td",
                           {
-                            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 right-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-[var(--brand-bg-hover)]"
+                            colSpan: totalColSpan,
+                            className: "px-3 py-4 text-center text-[var(--text-muted)]",
+                            children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? "\u2014"
                           }
-                        )
+                        ) })
                       ]
-                    },
-                    col.key
-                  );
-                })
-              ] }) }),
-              /* @__PURE__ */ jsxs("tbody", { children: [
-                leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-[var(--border)]", 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);
-                  return /* @__PURE__ */ jsxs(Fragment2, { children: [
-                    /* @__PURE__ */ jsxs(
-                      "tr",
-                      {
-                        ...cleanAttrs(rowAttributes?.(row)),
-                        className: cn(
-                          "border-t border-[var(--border)]",
-                          rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
-                          rowClassName?.(row)
-                        ),
-                        onClick: rowInteractive ? (e) => {
-                          if (selection && canSelect(row)) {
-                            if (e.shiftKey) {
-                              window.getSelection?.()?.removeAllRanges();
-                              if (selectRange(rowIndex)) return;
-                              selectionAnchor.current = rowKey(row);
-                              selection.onToggle(row, !selection.isSelected(row));
-                              return;
-                            }
-                            if (e.metaKey || e.ctrlKey) {
-                              selectionAnchor.current = rowKey(row);
-                              selection.onToggle(row, !selection.isSelected(row));
-                              return;
-                            }
-                          }
-                          onRowClick?.(row);
-                        } : void 0,
-                        children: [
-                          selection && /* @__PURE__ */ jsx(
-                            "td",
-                            {
-                              className: "w-10 px-3 py-2 align-top",
-                              onClick: (e) => e.stopPropagation(),
-                              children: canSelect(row) && /* @__PURE__ */ jsx(
-                                "input",
-                                {
-                                  type: "checkbox",
-                                  className: "size-4 accent-indigo-600",
-                                  checked: selection.isSelected(row),
-                                  onClick: (e) => {
-                                    if (e.shiftKey && selectRange(rowIndex)) e.preventDefault();
-                                  },
-                                  onChange: (e) => {
-                                    selectionAnchor.current = rowKey(row);
-                                    selection.onToggle(row, e.target.checked);
-                                  },
-                                  "aria-label": labels.selectRow
-                                }
-                              )
-                            }
-                          ),
-                          visibleColumns.map((col) => {
-                            const width = widths[col.key];
-                            return /* @__PURE__ */ jsx(
-                              "td",
-                              {
-                                "data-col": col.key,
-                                style: width ? { width, minWidth: width, maxWidth: width } : void 0,
-                                className: cn("px-3 py-2 align-top", width && "overflow-hidden text-ellipsis", col.className),
-                                children: col === linkColumn && href ? (
-                                  // No `onActivate`: the click is left to bubble to the
-                                  // <tr> handler above, which already owns expand-vs-select.
-                                  // Calling it here as well would toggle the row twice.
-                                  /* @__PURE__ */ jsx(RowLink, { href, className: "block", children: col.cell(row) })
-                                ) : col.cell(row)
-                              },
-                              col.key
-                            );
-                          })
-                        ]
-                      }
-                    ),
-                    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: "w-0 min-w-full px-3 py-3", children: expansion }) }) })
-                  ] }, rowKey(row));
-                }),
-                slice.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    colSpan: totalColSpan,
-                    className: "px-3 py-4 text-center text-[var(--text-muted)]",
-                    children: empty ?? "\u2014"
-                  }
-                ) })
-              ] })
-            ] })
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
         !unpaged && /* @__PURE__ */ jsx(
@@ -795,7 +868,7 @@ function DataTable({
             pageSize: paginationPageSize,
             total: paginationTotal,
             onPage: goToPage,
-            onPageSize: isServer ? (n) => serverPagination.onPageSizeChange?.(n) : (n) => {
+            onPageSize: isServer ? serverPagination.onPageSizeChange : (n) => {
               setPageSize(n);
               setPage(0);
             },
@@ -814,9 +887,9 @@ function DataTable({
           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-l border-[var(--border)]",
+            "border-s border-[var(--border)]",
             "hover:bg-[var(--bg-hover)]",
-            showSettings ? "w-0 border-l-0" : "w-8 cursor-pointer"
+            showSettings ? "w-0 border-s-0" : "w-8 cursor-pointer"
           ),
           children: /* @__PURE__ */ jsx(
             "span",
@@ -835,7 +908,7 @@ function DataTable({
             "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-l border-[var(--border)] p-2", children: [
+          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(
@@ -894,6 +967,12 @@ function DataTable({
     ] })
   ] });
 }
+function LoadingText({ label }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4" }),
+    label
+  ] });
+}
 function MobileFilters({
   columns,
   filters,
@@ -907,6 +986,7 @@ function MobileFilters({
   locale
 }) {
   const [open, setOpen] = useState(false);
+  const [dir, setDir] = useState("ltr");
   const [expanded, setExpanded] = useState(null);
   const backdropClose = useBackdropClose(() => setOpen(false));
   useBodyScrollLock(open);
@@ -925,7 +1005,10 @@ function MobileFilters({
       "button",
       {
         type: "button",
-        onClick: () => setOpen(true),
+        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" }),
@@ -950,6 +1033,7 @@ function MobileFilters({
           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: [
@@ -960,7 +1044,7 @@ function MobileFilters({
                   type: "button",
                   onClick: () => setOpen(false),
                   "aria-label": labels.close,
-                  className: "-mr-1 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                  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" })
                 }
               )
@@ -976,7 +1060,7 @@ function MobileFilters({
                     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-left",
+                    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,