basalt-ui 1.31.0 → 1.32.0

package/dist/data/data-table.js

@@ -4,8 +4,10 @@ import {
   Checkbox,
   Group,
   Pagination,
+  ScrollArea,
   Select,
   Skeleton,
+  Stack,
   Table,
   Text,
   TextInput
@@ -18,7 +20,7 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../common/props.js";
 import { BASALT_PREFIX } from "../common/errors.js";
 import { HIT_COARSE } from "../common/hit-floor.js";
@@ -32,6 +34,13 @@ import { CtlSlot } from "../theme/index.js";
 import { alpha, VX } from "../tokens/index.js";
 import { WidgetHeader } from "../dashboard/index.js";
 import { ErrorState } from "../dashboard/query-state.js";
+import {
+  activationProps,
+  EMPTY_FOLD_SET,
+  useCardProjection,
+  useDataTableState,
+  useRowDisclosure
+} from "./data-table-state.js";
 import { dataQueryBranch } from "./query-branch.js";
 import { isDev } from "../common/is-dev.js";
 import classes from "./data-table.module.css";
@@ -149,6 +158,7 @@ function SortIndicator({ direction }) {
   if (!direction) return null;
   return /* @__PURE__ */ jsx(Box, { component: "span", ml: 4, "aria-hidden": true, children: direction === "asc" ? "\u2191" : "\u2193" });
 }
+const ARIA_SORT = { asc: "ascending", desc: "descending" };
 const NUMERIC_CELL_STYLE = {
   fontFamily: "var(--mantine-font-family-monospace)",
   fontSize: VX.text.sm,
@@ -222,7 +232,6 @@ function foldOrder(columns) {
   ).toSorted((a, b) => b.priority - a.priority || b.index - a.index).map((candidate) => candidate.id);
 }
 const FOLD_ID_ATTR = "data-basalt-fold-id";
-const EMPTY_FOLD_SET = /* @__PURE__ */ new Set();
 function planColumnFold(input) {
   const { room, toggleWidth, overhead, order, widths } = input;
   const known = order.filter((id) => widths.has(id));
@@ -385,32 +394,23 @@ function BasaltDataTable(props) {
     isLoading = false,
     query,
     skeletonRows = 5,
-    initialSorting,
-    onSortingChange,
     enableGlobalFilter = false,
     globalFilterPlaceholder = "Search\u2026",
     searchIcon,
-    initialGlobalFilter,
-    onGlobalFilterChange,
     facets,
-    onColumnFiltersChange,
     manualFiltering = false,
     actions,
     onRowActivate,
+    renderCard,
     enableRowSelection = false,
-    rowSelection,
-    onRowSelectionChange,
     getRowId,
     bulkActions,
     enablePagination = false,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-    initialPagination,
-    onPaginationChange,
     manualPagination = false,
     rowCount,
     pageCount,
     enablePinning = false,
-    initialColumnPinning,
     maxHeight,
     minWidth,
     stickyHeader,
@@ -423,15 +423,8 @@ function BasaltDataTable(props) {
     style,
     classNames
   } = props;
-  const [sorting, setSorting] = useState(initialSorting ?? []);
-  const [globalFilter, setGlobalFilter] = useState(initialGlobalFilter ?? "");
-  const [columnFilters, setColumnFilters] = useState([]);
-  const [pagination, setPagination] = useState(
-    initialPagination ?? { pageIndex: 0, pageSize: pageSizeOptions[0] ?? 10 }
-  );
-  const [columnPinning, setColumnPinning] = useState(initialColumnPinning ?? {});
-  const [internalRowSelection, setInternalRowSelection] = useState({});
-  const rowSelectionState = rowSelection ?? internalRowSelection;
+  const tableState = useDataTableState(props, pageSizeOptions[0] ?? 10);
+  const { globalFilter, columnPinning, onGlobalFilterChange: handleGlobalFilterChange } = tableState;
   useValidateProps(
     "BasaltDataTable",
     () => [
@@ -448,60 +441,6 @@ function BasaltDataTable(props) {
       props.isLoading === void 0
     ]
   );
-  const handleSortingChange = useCallback(
-    (updater) => {
-      setSorting((prev) => {
-        const next = typeof updater === "function" ? updater(prev) : updater;
-        onSortingChange?.(next);
-        return next;
-      });
-    },
-    [onSortingChange]
-  );
-  const handleGlobalFilterChange = useCallback(
-    (updater) => {
-      setGlobalFilter((prev) => {
-        const next = typeof updater === "function" ? updater(prev) : updater;
-        onGlobalFilterChange?.(next);
-        return next;
-      });
-    },
-    [onGlobalFilterChange]
-  );
-  const handleColumnFiltersChange = useCallback(
-    (updater) => {
-      setColumnFilters((prev) => {
-        const next = typeof updater === "function" ? updater(prev) : updater;
-        onColumnFiltersChange?.(next);
-        return next;
-      });
-    },
-    [onColumnFiltersChange]
-  );
-  const handlePaginationChange = useCallback(
-    (updater) => {
-      setPagination((prev) => {
-        const next = typeof updater === "function" ? updater(prev) : updater;
-        onPaginationChange?.(next);
-        return next;
-      });
-    },
-    [onPaginationChange]
-  );
-  const handleRowSelectionChange = useCallback(
-    (updater) => {
-      if (rowSelection !== void 0) {
-        onRowSelectionChange?.(typeof updater === "function" ? updater(rowSelection) : updater);
-        return;
-      }
-      setInternalRowSelection((prev) => {
-        const next = typeof updater === "function" ? updater(prev) : updater;
-        onRowSelectionChange?.(next);
-        return next;
-      });
-    },
-    [rowSelection, onRowSelectionChange]
-  );
   const facetColumns = useMemo(() => {
     if (!facets || facets.length === 0) return columns;
     const facetById = new Map(facets.map((facet) => [facet.columnId, facet]));
@@ -551,8 +490,9 @@ function BasaltDataTable(props) {
       columnFoldFixedIds: [...excluded]
     };
   }, [columns, columnPinning]);
+  const projection = useCardProjection(renderCard !== void 0);
   const columnFold = useColumnFold({
-    active: foldEligible,
+    active: foldEligible && !projection.cards,
     order: columnFoldOrder,
     fixedIds: columnFoldFixedIds
   });
@@ -561,56 +501,27 @@ function BasaltDataTable(props) {
     [columnFold.folded]
   );
   const hasFolded = columnFold.folded.size > 0;
-  const [expandedFoldRows, setExpandedFoldRows] = useState(EMPTY_FOLD_SET);
-  const toggleFoldRow = useCallback((rowId) => {
-    setExpandedFoldRows((current) => {
-      const next = new Set(current);
-      if (next.has(rowId)) next.delete(rowId);
-      else next.add(rowId);
-      return next;
-    });
-  }, []);
-  const prevDataRef = useRef(data);
-  useEffect(() => {
-    const prevData = prevDataRef.current;
-    prevDataRef.current = data;
-    setExpandedFoldRows((current) => {
-      if (current.size === 0) return current;
-      let next;
-      if (getRowId === void 0) {
-        next = new Set(
-          [...current].filter((id) => {
-            const index = Number(id);
-            return data[index] !== void 0 && data[index] === prevData[index];
-          })
-        );
-      } else {
-        const liveIds = new Set(data.map((row, index) => getRowId(row, index)));
-        next = new Set([...current].filter((id) => liveIds.has(id)));
-      }
-      return next.size === current.size ? current : next;
-    });
-  }, [data, getRowId]);
+  const foldRows = useRowDisclosure({ data, getRowId });
   const table = useReactTable({
     data,
     columns: tableColumns,
     state: {
-      sorting,
+      sorting: tableState.sorting,
       globalFilter,
-      columnFilters,
+      columnFilters: tableState.columnFilters,
       columnPinning,
       columnVisibility,
-      ...enablePagination && { pagination },
-      ...enableRowSelection && { rowSelection: rowSelectionState }
+      ...enablePagination && { pagination: tableState.pagination },
+      ...enableRowSelection && { rowSelection: tableState.rowSelection }
     },
-    onSortingChange: handleSortingChange,
+    onSortingChange: tableState.onSortingChange,
     onGlobalFilterChange: handleGlobalFilterChange,
-    onColumnFiltersChange: handleColumnFiltersChange,
-    onColumnPinningChange: setColumnPinning,
-    ...enablePagination && { onPaginationChange: handlePaginationChange },
+    onColumnFiltersChange: tableState.onColumnFiltersChange,
+    onColumnPinningChange: tableState.onColumnPinningChange,
+    ...enablePagination && { onPaginationChange: tableState.onPaginationChange },
     ...enableRowSelection && {
       enableRowSelection: true,
-      onRowSelectionChange: handleRowSelectionChange
+      onRowSelectionChange: tableState.onRowSelectionChange
     },
     ...getRowId !== void 0 && { getRowId },
     getCoreRowModel: getCoreRowModel(),
@@ -651,8 +562,19 @@ function BasaltDataTable(props) {
   const headerGroups = enablePinning ? getOrderedHeaderGroups(table) : table.getHeaderGroups();
   const rows = table.getRowModel().rows;
   const pageStickyHeader = !scrolls && stickyHeader === true;
-  const containment = useMeasuredContainment(pageStickyHeader);
+  const containment = useMeasuredContainment(pageStickyHeader && !projection.cards);
   const resolvedStickyHeaderOffset = scrolls ? void 0 : stickyHeaderOffset;
+  const errorNode = queryError !== void 0 && /* @__PURE__ */ jsx(
+    ErrorState,
+    {
+      error: queryError.error,
+      title: "Could not load",
+      tier: "section",
+      retrying: queryError.fetchStatus === "fetching",
+      onRetry: () => void queryError.refetch()
+    }
+  );
+  const emptyNode = emptyState ?? /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", size: "sm", py: "sm", children: "No data to display." });
   const tableNode = /* @__PURE__ */ jsxs(
     Table,
     {
@@ -689,7 +611,7 @@ function BasaltDataTable(props) {
                   toggleSorting?.(event);
                 } : void 0,
                 tabIndex: canSort ? 0 : void 0,
-                "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+                "aria-sort": canSort ? sorted ? ARIA_SORT[sorted] : "none" : void 0,
                 style: {
                   ...canSort ? { cursor: "pointer", userSelect: "none" } : void 0,
                   ...align !== void 0 && { textAlign: align },
@@ -704,54 +626,26 @@ function BasaltDataTable(props) {
             );
           })
         ] }, headerGroup.id)) }),
-        /* @__PURE__ */ jsx(Table.Tbody, { children: queryError !== void 0 ? (
-          // The branch the table did not have (components audit #3). It spans every rendered
-          // column and carries the query's OWN `refetch` behind Retry, so the failure is reported
-          // where the rows would have been — not as an empty table saying nothing failed.
-          /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, children: /* @__PURE__ */ jsx(
-            ErrorState,
-            {
-              error: queryError.error,
-              title: "Could not load",
-              tier: "section",
-              retrying: queryError.fetchStatus === "fetching",
-              onRetry: () => void queryError.refetch()
-            }
-          ) }) })
-        ) : showSkeleton ? Array.from({ length: skeletonRows }, (_, rowIndex) => /* @__PURE__ */ jsx(Table.Tr, { children: Array.from({ length: columnCount }, (__, colIndex) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Skeleton, { height: 16, radius: "sm" }) }, `skeleton-${rowIndex}-${colIndex}`)) }, `skeleton-${rowIndex}`)) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, children: emptyState ?? /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", size: "sm", py: "sm", children: "No data to display." }) }) }) : rows.map((row) => {
+        /* @__PURE__ */ jsx(Table.Tbody, { children: queryError !== void 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, children: errorNode }) }) : showSkeleton ? Array.from({ length: skeletonRows }, (_, rowIndex) => /* @__PURE__ */ jsx(Table.Tr, { children: Array.from({ length: columnCount }, (__, colIndex) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Skeleton, { height: 16, radius: "sm" }) }, `skeleton-${rowIndex}-${colIndex}`)) }, `skeleton-${rowIndex}`)) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, children: emptyNode }) }) : rows.map((row) => {
           const cells = enablePinning ? [
             ...row.getLeftVisibleCells(),
             ...row.getCenterVisibleCells(),
             ...row.getRightVisibleCells()
           ] : row.getVisibleCells();
-          const rowExpanded = hasFolded && expandedFoldRows.has(row.id);
+          const rowExpanded = hasFolded && foldRows.expanded.has(row.id);
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(
               Table.Tr,
               {
                 ...enableRowSelection && row.getIsSelected() && { "data-selected": true },
-                ...onRowActivate !== void 0 && {
-                  className: classes.activatable,
-                  "data-activatable": true,
-                  tabIndex: 0,
-                  onClick: () => onRowActivate(row.original),
-                  // Enter only. Space is the browser's own page-scroll on a focused non-button, and
-                  // stealing it from a keyboard reader moving down a long table costs more than the
-                  // second activation key buys.
-                  onKeyDown: (event) => {
-                    if (event.key !== "Enter") return;
-                    if (event.target !== event.currentTarget) return;
-                    event.preventDefault();
-                    onRowActivate(row.original);
-                  }
-                },
+                ...activationProps(onRowActivate, row.original),
                 children: [
                   hasFolded && /* @__PURE__ */ jsx(Table.Td, { className: classes.foldToggleCell, children: /* @__PURE__ */ jsx(
                     FoldToggle,
                     {
                       expanded: rowExpanded,
                       controlsId: `${row.id}-fold`,
-                      onToggle: () => toggleFoldRow(row.id)
+                      onToggle: () => foldRows.toggle(row.id)
                     }
                   ) }),
                   cells.map((cell) => {
@@ -787,144 +681,152 @@ function BasaltDataTable(props) {
       ]
     }
   );
+  const renderCardList = () => /* @__PURE__ */ jsx(Stack, { gap: "xs", className: cx(classNames?.table), children: queryError !== void 0 ? errorNode : showSkeleton ? Array.from({ length: skeletonRows }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { height: 48, radius: "md" }, `skeleton-${index}`)) : rows.length === 0 ? emptyNode : rows.map((row) => /* @__PURE__ */ jsx(Box, { ...activationProps(onRowActivate, row.original), children: renderCard?.(row.original) }, row.id)) });
   const paginationState = table.getState().pagination;
   const pageSizeRows = [.../* @__PURE__ */ new Set([...pageSizeOptions, paginationState.pageSize])].sort((a, b) => a - b).map((size) => ({ value: String(size), label: `${size} / page` }));
   const total = table.getRowCount();
   const rangeStart = total === 0 ? 0 : paginationState.pageIndex * paginationState.pageSize + 1;
   const rangeEnd = Math.min((paginationState.pageIndex + 1) * paginationState.pageSize, total);
-  return /* @__PURE__ */ jsxs("div", { className: cx(classNames?.root, className), ...style !== void 0 && { style }, children: [
-    (title !== void 0 || showToolbar) && /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", mb: "xs", children: [
-      title !== void 0 ? /* @__PURE__ */ jsx(Box, { style: TABLE_HEADER_LEAD_STYLE, children: /* @__PURE__ */ jsx(
-        WidgetHeader,
-        {
-          tier: "widget",
-          title,
-          ...icon !== void 0 && { icon },
-          ...subtitle !== void 0 && { subtitle },
-          count: table.getRowCount()
-        }
-      ) }) : null,
-      showToolbar && /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsxs(
-        Group,
-        {
-          className: cx(classNames?.toolbar),
-          gap: "xs",
-          wrap: "wrap",
-          align: "center",
-          style: TABLE_TOOLBAR_STYLE,
-          children: [
-            showSearch && /* @__PURE__ */ jsx(
-              TextInput,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: projection.rootRef,
+      className: cx(classNames?.root, className),
+      ...style !== void 0 && { style },
+      children: [
+        (title !== void 0 || showToolbar) && /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", mb: "xs", children: [
+          title !== void 0 ? /* @__PURE__ */ jsx(Box, { style: TABLE_HEADER_LEAD_STYLE, children: /* @__PURE__ */ jsx(
+            WidgetHeader,
+            {
+              tier: "widget",
+              title,
+              ...icon !== void 0 && { icon },
+              ...subtitle !== void 0 && { subtitle },
+              count: table.getRowCount()
+            }
+          ) }) : null,
+          showToolbar && /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsxs(
+            Group,
+            {
+              className: cx(classNames?.toolbar),
+              gap: "xs",
+              wrap: "wrap",
+              align: "center",
+              style: TABLE_TOOLBAR_STYLE,
+              children: [
+                showSearch && /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    radius: "md",
+                    style: TABLE_SEARCH_STYLE,
+                    placeholder: globalFilterPlaceholder,
+                    leftSection: searchIcon,
+                    value: globalFilter,
+                    onChange: (event) => handleGlobalFilterChange(event.currentTarget.value)
+                  }
+                ),
+                showFacets && /* @__PURE__ */ jsx(FilterSet, { children: facets?.map((facet) => {
+                  const column = resolveFacetColumn(table, facet);
+                  if (!column) return null;
+                  return facet.multiple ? /* @__PURE__ */ jsx(
+                    MultiSelectFilter,
+                    {
+                      field: facetMultiHandle(column, facet),
+                      label: facet.label
+                    },
+                    facet.columnId
+                  ) : /* @__PURE__ */ jsx(
+                    EnumFilter,
+                    {
+                      field: facetEnumHandle(column, facet),
+                      label: facet.label
+                    },
+                    facet.columnId
+                  );
+                }) }),
+                actions !== void 0 && /* @__PURE__ */ jsx(BarActionSlot, { actions })
+              ]
+            }
+          ) })
+        ] }),
+        bulkBarActions !== void 0 && /* @__PURE__ */ jsx(BulkActionBar, { count: selectedRows.length, actions: bulkBarActions }),
+        projection.cards ? maxHeight === void 0 ? renderCardList() : /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: maxHeight, type: "hover", scrollbars: "y", children: renderCardList() }) : !foldEligible ? (
+          // An explicit `minWidth` is the one genuinely DECLARED horizontal floor — the column fold
+          // never engages here (see `foldEligible`, above), so this shape keeps its exact
+          // pre-existing DOM: no extra measuring wrapper for a table nothing folds.
+          /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: minWidth ?? 0, maxHeight, children: tableNode })
+        ) : (
+          // The column fold's own measuring box (`useColumnFold`) — wraps every remaining shape,
+          // `maxHeight`-only included: a vertical cap is orthogonal to column width, so a
+          // `stickyHeader` + `maxHeight` table (the pairing this package's own docs recommend) still
+          // folds instead of silently regressing to horizontal scroll. A plain block box, so it
+          // constrains nothing on its own; `columnFold.wrapperRef` only reads it.
+          /* @__PURE__ */ jsx("div", { ref: columnFold.wrapperRef, className: classes.foldWrapper, children: pageStickyHeader ? (
+            // Pinning takes this wrapper too — a pinned column's offsets are `position: sticky` on
+            // the cells and need no overflow box of their own, so the `overflow-x: auto` Box that
+            // used to sit here was the exact inert-sticky defect this shape exists to avoid.
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                radius: "md",
-                style: TABLE_SEARCH_STYLE,
-                placeholder: globalFilterPlaceholder,
-                leftSection: searchIcon,
-                value: globalFilter,
-                onChange: (event) => handleGlobalFilterChange(event.currentTarget.value)
+                ref: containment.wrapperRef,
+                className: classes.containment,
+                "data-contained": containment.contained ? "true" : "false",
+                children: tableNode
               }
-            ),
-            showFacets && /* @__PURE__ */ jsx(FilterSet, { children: facets?.map((facet) => {
-              const column = resolveFacetColumn(table, facet);
-              if (!column) return null;
-              return facet.multiple ? /* @__PURE__ */ jsx(
-                MultiSelectFilter,
-                {
-                  field: facetMultiHandle(column, facet),
-                  label: facet.label
-                },
-                facet.columnId
-              ) : /* @__PURE__ */ jsx(
-                EnumFilter,
-                {
-                  field: facetEnumHandle(column, facet),
-                  label: facet.label
-                },
-                facet.columnId
-              );
-            }) }),
-            actions !== void 0 && /* @__PURE__ */ jsx(BarActionSlot, { actions })
-          ]
-        }
-      ) })
-    ] }),
-    bulkBarActions !== void 0 && /* @__PURE__ */ jsx(BulkActionBar, { count: selectedRows.length, actions: bulkBarActions }),
-    !foldEligible ? (
-      // An explicit `minWidth` is the one genuinely DECLARED horizontal floor — the column fold
-      // never engages here (see `foldEligible`, above), so this shape keeps its exact
-      // pre-existing DOM: no extra measuring wrapper for a table nothing folds.
-      /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: minWidth ?? 0, maxHeight, children: tableNode })
-    ) : (
-      // The column fold's own measuring box (`useColumnFold`) — wraps every remaining shape,
-      // `maxHeight`-only included: a vertical cap is orthogonal to column width, so a
-      // `stickyHeader` + `maxHeight` table (the pairing this package's own docs recommend) still
-      // folds instead of silently regressing to horizontal scroll. A plain block box, so it
-      // constrains nothing on its own; `columnFold.wrapperRef` only reads it.
-      /* @__PURE__ */ jsx("div", { ref: columnFold.wrapperRef, className: classes.foldWrapper, children: pageStickyHeader ? (
-        // Pinning takes this wrapper too — a pinned column's offsets are `position: sticky` on
-        // the cells and need no overflow box of their own, so the `overflow-x: auto` Box that
-        // used to sit here was the exact inert-sticky defect this shape exists to avoid.
-        /* @__PURE__ */ jsx(
-          "div",
+            )
+          ) : (
+            // `pageStickyHeader` is false whenever `maxHeight` is set (`scrolls` above), so a vertical
+            // cap lands here — its own `ScrollArea` scrollport, just with no `minWidth` floor.
+            /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: 0, maxHeight, children: tableNode })
+          ) })
+        ),
+        enablePagination && /* @__PURE__ */ jsxs(
+          Group,
           {
-            ref: containment.wrapperRef,
-            className: classes.containment,
-            "data-contained": containment.contained ? "true" : "false",
-            children: tableNode
+            className: cx(classNames?.footer),
+            justify: "space-between",
+            mt: "xs",
+            wrap: "wrap",
+            gap: "xs",
+            align: "center",
+            children: [
+              /* @__PURE__ */ jsxs(Text, { style: RANGE_LABEL_STYLE, children: [
+                "Showing ",
+                rangeStart,
+                "\u2013",
+                rangeEnd,
+                totalIsAuthoritative ? ` of ${total}` : ""
+              ] }),
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    size: "ctl",
+                    radius: "md",
+                    w: PAGE_SIZE_WIDTH,
+                    data: pageSizeRows,
+                    value: String(paginationState.pageSize),
+                    onChange: (value) => value && table.setPageSize(Number(value)),
+                    allowDeselect: false
+                  }
+                ),
+                /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(
+                  Pagination,
+                  {
+                    size: "sm",
+                    radius: "md",
+                    total: Math.max(table.getPageCount(), 1),
+                    value: paginationState.pageIndex + 1,
+                    onChange: (page) => table.setPageIndex(page - 1)
+                  }
+                ) })
+              ] })
+            ]
           }
         )
-      ) : maxHeight !== void 0 ? (
-        // `pageStickyHeader` is already false whenever `maxHeight` is set (`scrolls` above), so
-        // this is the ONE remaining case: a vertical cap with no sticky header to measure —
-        // still wants its own `ScrollArea` scrollport, just with no `minWidth` floor.
-        /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: 0, maxHeight, children: tableNode })
-      ) : /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: 0, children: tableNode }) })
-    ),
-    enablePagination && /* @__PURE__ */ jsxs(
-      Group,
-      {
-        className: cx(classNames?.footer),
-        justify: "space-between",
-        mt: "xs",
-        wrap: "wrap",
-        gap: "xs",
-        align: "center",
-        children: [
-          /* @__PURE__ */ jsxs(Text, { style: RANGE_LABEL_STYLE, children: [
-            "Showing ",
-            rangeStart,
-            "\u2013",
-            rangeEnd,
-            totalIsAuthoritative ? ` of ${total}` : ""
-          ] }),
-          /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                size: "ctl",
-                radius: "md",
-                w: PAGE_SIZE_WIDTH,
-                data: pageSizeRows,
-                value: String(paginationState.pageSize),
-                onChange: (value) => value && table.setPageSize(Number(value)),
-                allowDeselect: false
-              }
-            ),
-            /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(
-              Pagination,
-              {
-                size: "sm",
-                radius: "md",
-                total: Math.max(table.getPageCount(), 1),
-                value: paginationState.pageIndex + 1,
-                onChange: (page) => table.setPageIndex(page - 1)
-              }
-            ) })
-          ] })
-        ]
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 export {
   BasaltDataTable,

package/dist/forms/form-layout.module.css

@@ -14,9 +14,10 @@
  * containment and `.grid` is the queried child, the same split `StatGroup`'s `.container`/`.root`
  * uses — a container cannot reliably query ITSELF for a layout-affecting property (measured here:
  * Chrome silently keeps the un-queried value even once the container's own width crosses the
- * condition), only a descendant. The `599.9px`/`47.99375em` literals: 600px is roughly the point
+ * condition), only a descendant. The `599.9px` literal: 600px is roughly the point
  * two ~250px+ cells stop feeling cramped; `@container`/`@media` conditions cannot read a custom
- * property, so both are written numbers, not `--vx-*` refs.
+ * property, so it is a written number, not a `--vx-*` ref. No viewport fallback — see
+ * `stat-group.module.css`: nothing that renders basalt lacks `@container`.
  */
 
 /* ── FormSection ─────────────────────────────────────────────────────────────────────────────── */
@@ -102,17 +103,6 @@
   }
 }
 
-/* Pre-container-query fallback (Safari < 16, Chrome < 106, Firefox < 110) — the old viewport law,
- * reachable only where `@container` itself cannot parse (same reasoning as `stat-group.module.css`). */
-@supports not (container-type: inline-size) {
-  @media (max-width: 47.99375em) {
-    .grid {
-      grid-template-columns: minmax(0, 1fr);
-      gap: var(--vx-space-stack-xs);
-    }
-  }
-}
-
 /* ── FormGroup ───────────────────────────────────────────────────────────────────────────────── */
 
 /* Same UA reset as `.control`, same reason. */

package/dist/guard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/guard/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE7E,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA;AA8wB9D,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,EAAE,WAmBlC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,CAiCrE,CAAA;AA0GD,sGAAsG;AACtG,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,CAAA;CAC7C,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,WAAW,EAChB,eAAe,EAAE,SAAS,MAAM,EAAE,GACjC,sBAAsB,EAAE,CAc1B;AAID;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,MAAM,CA0D9C,CAAA;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC,CAGzE,CAAA;AAieD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,gGACwD,CAAA;AA8F1F;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,EAAE,WAAW,CAAC,SAAS,CAyB5D,CAAA;AA2NF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;gCA0BL,WAAW;;;;;;;gCAcX,WAAW;;;;;gCAMX,WAAW;;;;;;;gCAaX,WAAW;;;;;;;gCAQX,WAAW;;;;;;gCAOX,WAAW;;;;;;;gCASX,WAAW;;;;;;gCAOX,WAAW;;;;;;;gCAaX,WAAW;;;;;;gCAMX,WAAW;;;;;;;gCAaX,WAAW;;;;;;;gCAUX,WAAW;;;;;;;gCAUX,WAAW;;;;;;;gCASX,WAAW;;;;;;;gCAUX,WAAW;;;;;;;;;;;;gCAgBX,WAAW;;;;;;gCAOX,WAAW;;;;;;;gCASX,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCmB,CAAA;AAEjD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEvD;AAKD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAgBvD;AAUD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,GAAG,OAAO,EAAE,CAwetF;AAID;;;;;;GAMG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,gFAAgF;IAChF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,6FAA6F;IAC7F,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,gDAAgD;IAChD,QAAQ,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,CAAA;IACzC,oFAAoF;IACpF,QAAQ,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAA;IACvC,oGAAoG;IACpG,QAAQ,CAAC,YAAY,EAAE,SAAS,MAAM,EAAE,CAAA;IACxC,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;IAC3B,qGAAqG;IACrG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,WAAW,GACf,mBAAmB,EAAE,CAuBvB;AAED,kGAAkG;AAClG,eAAO,MAAM,uBAAuB,6BAA6B,CAAA;AAEjE;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,GAAG,MAAM,CAM9F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/guard/index.ts"],"names":[],"mappings":"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"}