@eifi1/ui-kit 0.7.1 → 0.8.1

package/dist/components/data-table.js

@@ -61,6 +61,25 @@ function cleanAttrs(attrs) {
 function columnLabel(col) {
   return typeof col.header === "string" ? col.header : col.key;
 }
+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 fromOwnControl(target, row) {
+  if (!(target instanceof Element)) return false;
+  const hit = target.closest(OWN_CONTROL);
+  return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute("data-row-link");
+}
+function moveRowFocus(from, key) {
+  if (!(key in ROW_NAV_KEYS)) return false;
+  const body = from.parentElement;
+  if (!body) return false;
+  const rows = Array.from(body.children).filter(
+    (el) => el instanceof HTMLElement && el.hasAttribute("data-row-nav")
+  );
+  const i = rows.indexOf(from);
+  const target = key === "ArrowDown" ? rows[i + 1] : key === "ArrowUp" ? rows[i - 1] : key === "Home" ? rows[0] : key === "End" ? rows[rows.length - 1] : void 0;
+  target?.focus();
+  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,
@@ -123,8 +142,21 @@ function DataTable({
   mobileGroupLabel,
   mobileCard,
   mobileSwipeActions,
-  leadingRow
+  leadingRow,
+  density = "comfortable",
+  sortCycle = "tri",
+  chrome = "full",
+  columnSettings: columnSettingsProp,
+  resizable: resizableProp,
+  multiSort: multiSortProp,
+  frame = true,
+  className
 }) {
+  const compact = density === "compact";
+  const minimal = chrome === "minimal";
+  const columnSettings = columnSettingsProp ?? !minimal;
+  const resizable = resizableProp ?? !minimal;
+  const multiSort = multiSortProp ?? !minimal;
   const isServer = !!serverPagination;
   const isLoading = !!serverPagination?.isLoading;
   const labelOverrides = useKitLabelOverrides("dataTable");
@@ -149,9 +181,9 @@ function DataTable({
     setPage,
     pageSize,
     setPageSize,
-    widths,
+    widths: storedWidths,
     setWidths,
-    hiddenCols,
+    hiddenCols: storedHiddenCols,
     setHiddenCols,
     showSettings,
     setShowSettings,
@@ -165,6 +197,11 @@ function DataTable({
     sortsProp,
     filtersProp
   });
+  const widths = useMemo(() => resizable ? storedWidths : {}, [resizable, storedWidths]);
+  const hiddenCols = useMemo(
+    () => columnSettings ? storedHiddenCols : /* @__PURE__ */ new Set(),
+    [columnSettings, storedHiddenCols]
+  );
   const columnSig = columns.map((c) => c.key).join("\0");
   const selectOptionsSig = columns.map((c) => {
     const f = resolveFilter(c);
@@ -228,11 +265,14 @@ function DataTable({
   const totalPages = isServer ? Math.max(1, Math.ceil(serverPagination.total / Math.max(1, serverPagination.pageSize))) : Math.max(1, Math.ceil(sorted.length / effectivePageSize));
   const safePage = isServer ? Math.min(Math.max(0, serverPagination.page), totalPages - 1) : Math.min(page, totalPages - 1);
   const slice = isServer || unpaged || pageSize === Infinity ? sorted : sorted.slice(safePage * effectivePageSize, safePage * effectivePageSize + effectivePageSize);
-  const toggleSort = (key, additive) => {
-    const next = nextSorts(sorts, key, additive);
+  const toggleSort = (key, shiftKey) => {
+    const col = columns.find((c) => c.key === key);
+    const next = nextSorts(sorts, key, multiSort && shiftKey, {
+      firstDir: col?.firstSort,
+      cycle: sortCycle
+    });
     if (onSortsChange) onSortsChange(next);
     else setInternalSorts(next);
-    const col = columns.find((c) => c.key === key);
     const name = col ? columnLabel(col) : key;
     const entry = next.find((s) => s.key === key);
     announce(
@@ -406,6 +446,9 @@ function DataTable({
     defaultPageSize
   });
   const selectionAnchor = useRef(null);
+  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) => {
@@ -439,7 +482,8 @@ function DataTable({
     const swipeEnabled = !!swipe && !expanded;
     const href = mobileCardLinkable ? rowHref?.(row) : void 0;
     const cardClass = cn(
-      "w-full px-4 py-3 text-start flex items-center gap-3",
+      "w-full text-start flex items-center",
+      compact ? "px-3 py-2 gap-2 text-sm" : "px-4 py-3 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.
@@ -450,12 +494,21 @@ function DataTable({
       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"
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2"), children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
         mobilePrimaryCol && /* @__PURE__ */ jsx("div", { className: "font-medium", children: mobilePrimaryCol.cell(row) }),
-        mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 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", { className: "min-w-0 text-[var(--text-secondary)] self-center", children: col.cell(row) })
-        ] }, col.key)) })
+        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", { 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.
@@ -505,6 +558,7 @@ function DataTable({
         tabIndex: interactive ? 0 : void 0,
         onClick: interactive ? () => onRowClick(row) : void 0,
         onKeyDown: interactive ? (e) => {
+          if (e.target !== e.currentTarget) return;
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             onRowClick(row);
@@ -517,7 +571,16 @@ function DataTable({
     );
     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: "px-4 py-3 bg-[var(--bg-surface-2)] border-t border-[var(--border)]", children: expansion })
+      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 mobileGroups = mobileGroupBy ? mobileSlice.reduce((acc, row) => {
@@ -527,445 +590,503 @@ function DataTable({
     else acc.push({ key, rows: [row] });
     return acc;
   }, []) : 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", { ref: mobileRootRef, children: [
-      (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
-        MobileFilters,
-        {
-          columns,
-          filters,
-          selectOptionsByKey,
-          isServer,
-          hasFilterCallback: !!onFiltersChange,
-          onSetFilter: setFilterValue,
-          onClearFilter: clearFilter,
-          onClearAll: clearAllFilters,
-          labels,
-          locale
-        }
+  const Root = frame ? FramedRoot : PlainRoot;
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      "data-density": density,
+      "data-frame": frame ? void 0 : "none",
+      className: cn(
+        "group/table",
+        frame ? "overflow-clip" : "min-w-0",
+        fillHeight && "md:flex md:flex-1 md:flex-col md:min-h-0",
+        className
       ),
-      /* @__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"
+      children: [
+        /* @__PURE__ */ jsx("span", { ...regionProps }),
+        !isMdUp && /* @__PURE__ */ jsxs("div", { ref: mobileRootRef, children: [
+          (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
+            MobileFilters,
+            {
+              columns,
+              filters,
+              selectOptionsByKey,
+              isServer,
+              hasFilterCallback: !!onFiltersChange,
+              onSetFilter: setFilterValue,
+              onClearFilter: clearFilter,
+              onClearAll: clearAllFilters,
+              labels,
+              locale
+            }
           ),
-          "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,
-        {
-          page: safePage,
-          totalPages,
-          pageSize: paginationPageSize,
-          total: paginationTotal,
-          onPage: goToPage,
-          onPageSize: serverPagination.onPageSizeChange,
-          labels,
-          locale
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        FullBleedDialog,
-        {
-          open: dialogOpen,
-          onClose: closeDialog,
-          closeLabel: labels.close,
-          header: mobileDialogRow ? mobilePrimaryCol?.cell(mobileDialogRow) : null,
-          children: mobileDialogContent
-        }
-      )
-    ] }),
-    isMdUp && /* @__PURE__ */ jsxs("div", { className: cn("flex", fillHeight && "min-h-0 flex-1"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", fillHeight && "flex flex-col min-h-0"), children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0"),
-            style: fillHeight ? void 0 : { maxHeight: maxBodyHeight },
-            children: /* @__PURE__ */ jsxs(
-              "table",
+          /* @__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: cn(
+                      "text-center text-[var(--text-muted)]",
+                      compact ? "px-3 py-3 text-xs" : "px-4 py-6 text-sm"
+                    ),
+                    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,
+            {
+              page: safePage,
+              totalPages,
+              pageSize: paginationPageSize,
+              total: paginationTotal,
+              onPage: goToPage,
+              onPageSize: serverPagination.onPageSizeChange,
+              labels,
+              locale,
+              density
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FullBleedDialog,
+            {
+              open: dialogOpen,
+              onClose: closeDialog,
+              closeLabel: labels.close,
+              header: mobileDialogRow ? mobilePrimaryCol?.cell(mobileDialogRow) : null,
+              children: mobileDialogContent
+            }
+          )
+        ] }),
+        isMdUp && /* @__PURE__ */ jsxs("div", { className: cn("flex", fillHeight && "min-h-0 flex-1"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", fillHeight && "flex flex-col min-h-0"), children: [
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                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",
-                      {
-                        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("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0"),
+                style: fillHeight ? void 0 : { maxHeight: maxBodyHeight },
+                children: /* @__PURE__ */ jsxs(
+                  "table",
+                  {
+                    className: cn("w-full", compact ? "text-xs" : "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 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",
+                            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",
                               {
-                                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",
-                                      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-[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: 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];
+                          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 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",
+                                headClass
+                              ),
+                              children: [
+                                /* @__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",
-                                          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",
-                              {
-                                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;
-                                    }
+                                resizable && /* @__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)]"
                                   }
-                                  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",
+                                )
+                              ]
+                            },
+                            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);
+                              const key = rowKey(row);
+                              return /* @__PURE__ */ jsxs(Fragment2, { 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,
+                                    onKeyDown: rowsFocusable ? (e) => {
+                                      if (e.target !== e.currentTarget) return;
+                                      if (e.altKey || e.ctrlKey || e.metaKey) return;
+                                      if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        onRowClick(row);
+                                        return;
+                                      }
+                                      if (e.shiftKey) return;
+                                      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)]",
+                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+                                      rowClassName?.(row)
+                                    ),
+                                    onClick: rowInteractive ? (e) => {
+                                      if (fromOwnControl(e.target, e.currentTarget)) return;
+                                      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",
                                         {
-                                          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;
+                                          className: cn("align-top", compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"),
+                                          onClick: (e) => e.stopPropagation(),
+                                          children: canSelect(row) && /* @__PURE__ */ jsx(
+                                            "input",
+                                            {
+                                              type: "checkbox",
+                                              className: cn("accent-indigo-600", compact ? "size-3.5" : "size-4"),
+                                              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
                                             }
-                                          },
-                                          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
-                                    );
-                                  })
-                                ]
+                                      ),
+                                      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(
+                                              "align-top",
+                                              compact ? "px-2 py-1" : "px-3 py-2",
+                                              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", "data-row-link": "", 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: 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"),
+                                children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? "\u2014"
                               }
-                            ),
-                            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: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? "\u2014"
-                          }
-                        ) })
-                      ]
-                    }
-                  )
-                ]
+                            ) })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            !unpaged && /* @__PURE__ */ jsx(
+              Pagination,
+              {
+                page: safePage,
+                totalPages,
+                pageSize: paginationPageSize,
+                total: paginationTotal,
+                onPage: goToPage,
+                onPageSize: isServer ? serverPagination.onPageSizeChange : (n) => {
+                  setPageSize(n);
+                  setPage(0);
+                },
+                labels,
+                locale,
+                density
               }
             )
-          }
-        ),
-        !unpaged && /* @__PURE__ */ jsx(
-          Pagination,
-          {
-            page: safePage,
-            totalPages,
-            pageSize: paginationPageSize,
-            total: paginationTotal,
-            onPage: goToPage,
-            onPageSize: isServer ? serverPagination.onPageSizeChange : (n) => {
-              setPageSize(n);
-              setPage(0);
-            },
-            labels,
-            locale
-          }
-        )
-      ] }),
-      /* @__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(
+          ] }),
+          columnSettings && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Tooltip, { label: columnsCountLabel, portal: true, children: /* @__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
+                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: "flex flex-col gap-0.5", children: columns.map((col) => {
-              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",
+            ) }),
+            /* @__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: "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;
-                          });
-                        }
+                        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("span", { className: "truncate", children: headerLabel })
-                  ]
-                },
-                col.key
-              );
-            }) })
+                    ) })
+                  ] }),
+                  /* @__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) => {
+                    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
+                    );
+                  }) })
+                ] })
+              }
+            )
           ] })
-        }
-      )
-    ] })
-  ] });
+        ] })
+      ]
+    }
+  );
+}
+function FramedRoot({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(Card, { flush: true, ...rest, children });
+}
+function PlainRoot(props) {
+  return /* @__PURE__ */ jsx("div", { ...props });
 }
 function LoadingText({ label }) {
   return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [