basalt-ui 1.30.2 → 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,9 +20,11 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useCallback, 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";
+import { useMeasuredWidths } from "../common/use-measured-widths.js";
 import { assertRequiredProps, useValidateProps } from "../common/validate.js";
 import { FilterSet } from "../controls/index.js";
 import { ActionGroup, BarActionSlot } from "../controls/actions.js";
@@ -30,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";
@@ -106,26 +117,31 @@ function selectionColumn() {
   return {
     id: SELECT_COLUMN_ID,
     enableSorting: false,
-    header: ({ table }) => /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        size: "xs",
-        "aria-label": "Select all rows",
-        checked: table.getIsAllPageRowsSelected(),
-        indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
-        onChange: table.getToggleAllPageRowsSelectedHandler()
-      }
+    header: ({ table }) => (
+      // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- wraps <Checkbox>, which oxlint cannot see is an input
+      /* @__PURE__ */ jsx("label", { className: classes.selectHit, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "xs",
+          "aria-label": "Select all rows",
+          checked: table.getIsAllPageRowsSelected(),
+          indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+          onChange: table.getToggleAllPageRowsSelectedHandler()
+        }
+      ) })
     ),
-    cell: ({ row }) => /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        size: "xs",
-        "aria-label": `Select row ${row.index + 1}`,
-        checked: row.getIsSelected(),
-        disabled: !row.getCanSelect(),
-        onChange: row.getToggleSelectedHandler(),
-        onClick: (event) => event.stopPropagation()
-      }
+    cell: ({ row }) => (
+      // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- wraps <Checkbox>, which oxlint cannot see is an input
+      /* @__PURE__ */ jsx("label", { className: classes.selectHit, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "xs",
+          "aria-label": `Select row ${row.index + 1}`,
+          checked: row.getIsSelected(),
+          disabled: !row.getCanSelect(),
+          onChange: row.getToggleSelectedHandler()
+        }
+      ) })
     )
   };
 }
@@ -142,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,
@@ -201,6 +218,117 @@ function getPinnedCellStyle(table, column) {
     boxShadow: isEdge ? `-4px 0 6px -4px ${alpha(VX.ink, 0.18)}` : void 0
   };
 }
+function columnDefId(column) {
+  if (column.id !== void 0) return column.id;
+  return "accessorKey" in column && typeof column.accessorKey === "string" ? column.accessorKey : void 0;
+}
+function foldOrder(columns) {
+  return columns.map((column, index) => ({
+    id: columnDefId(column),
+    priority: column.meta?.priority ?? index,
+    index
+  })).filter(
+    (candidate) => Boolean(candidate.id)
+  ).toSorted((a, b) => b.priority - a.priority || b.index - a.index).map((candidate) => candidate.id);
+}
+const FOLD_ID_ATTR = "data-basalt-fold-id";
+function planColumnFold(input) {
+  const { room, toggleWidth, overhead, order, widths } = input;
+  const known = order.filter((id) => widths.has(id));
+  let unfolded = overhead + known.reduce((sum, id) => sum + (widths.get(id) ?? 0), 0);
+  const folded = /* @__PURE__ */ new Set();
+  for (const id of known) {
+    if (folded.size >= known.length - 1) break;
+    const withToggle = unfolded + (folded.size > 0 ? toggleWidth : 0);
+    if (withToggle <= room) break;
+    folded.add(id);
+    unfolded -= widths.get(id) ?? 0;
+  }
+  return folded;
+}
+function useColumnFold(input) {
+  const { active, order, fixedIds } = input;
+  const wrapperRef = useRef(null);
+  const [folded, setFolded] = useState(EMPTY_FOLD_SET);
+  const orderRef = useRef(order);
+  orderRef.current = order;
+  const fixedIdsRef = useRef(fixedIds);
+  fixedIdsRef.current = fixedIds;
+  useLayoutEffect(() => {
+    if (!active || order.length === 0) {
+      setFolded((current) => current.size === 0 ? current : EMPTY_FOLD_SET);
+    }
+  }, [active, order.length]);
+  useMeasuredWidths({
+    resolveRoot: () => wrapperRef.current,
+    signature: `${order.join("|")}::${fixedIds.join("|")}`,
+    enabled: active && order.length > 0,
+    // The table too, not only the wrapper: a re-measured column set moves its min-content width
+    // while the wrapper's own box never changes.
+    extra: (root) => [root.querySelector("table")],
+    onMeasure: (root, boxes) => {
+      for (const cell of root.querySelectorAll(`[${FOLD_ID_ATTR}]`)) {
+        const id = cell.getAttribute(FOLD_ID_ATTR);
+        if (id !== null && cell.offsetWidth > 0) {
+          boxes.current.set(id, { width: cell.offsetWidth, height: cell.offsetHeight });
+        }
+      }
+      const room = root.clientWidth;
+      if (room === 0) return;
+      const widths = new Map([...boxes.current].map(([id, box]) => [id, box.width]));
+      const overhead = fixedIdsRef.current.reduce((sum, id) => sum + (widths.get(id) ?? 0), 0);
+      const next = planColumnFold({
+        room,
+        // The disclosure toggle is a fixed icon-button cell matched to the coarse hit floor, so it
+        // reads as one more `--vx-hit` control rather than a narrower afterthought.
+        toggleWidth: HIT_COARSE,
+        overhead,
+        order: orderRef.current,
+        widths
+      });
+      setFolded(
+        (current) => current.size === next.size && [...current].every((id) => next.has(id)) ? current : next
+      );
+    }
+  });
+  return { wrapperRef, folded: active ? folded : EMPTY_FOLD_SET };
+}
+function columnLabel(column) {
+  const header = column.columnDef.header;
+  return typeof header === "string" ? header : column.id;
+}
+function RowDisclosure({
+  row,
+  folded
+}) {
+  const cells = row.getAllCells().filter((cell) => folded.has(cell.column.id));
+  return /* @__PURE__ */ jsx("div", { className: classes.foldDisclosure, children: cells.map((cell) => /* @__PURE__ */ jsxs("div", { className: classes.foldDisclosureRow, children: [
+    /* @__PURE__ */ jsx(Text, { className: classes.foldDisclosureLabel, children: columnLabel(cell.column) }),
+    /* @__PURE__ */ jsx("div", { className: classes.foldDisclosureValue, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+  ] }, cell.id)) });
+}
+function FoldToggle({
+  expanded,
+  controlsId,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes.foldToggle,
+      "data-basalt-hit": true,
+      "aria-expanded": expanded,
+      "aria-controls": controlsId,
+      "aria-label": expanded ? "Hide row details" : "Show row details",
+      onClick: (event) => {
+        event.stopPropagation();
+        onToggle();
+      },
+      children: /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: expanded ? "\u25BE" : "\u25B8" })
+    }
+  );
+}
 const BREACH_REMEDY = {
   inert: "`enablePagination` is not set, so `manualPagination` never reaches the table and the server page renders as if it were the whole set, with no bar to say otherwise. Pass `enablePagination`, or drop `manualPagination`.",
   total: 'neither `rowCount` nor `pageCount` was given, so "of N" counts only the rows on this page and the pager collapses to one page nobody can leave. Pass `rowCount={total}`.',
@@ -233,35 +361,21 @@ function enforceManualPaginationContract(breaches) {
 function useMeasuredContainment(active) {
   const wrapperRef = useRef(null);
   const [contained, setContained] = useState(false);
-  useLayoutEffect(() => {
-    if (!active) return;
-    const wrapper = wrapperRef.current;
-    if (wrapper === null) return;
-    const checkFit = () => {
-      const table2 = wrapper.querySelector("table");
-      if (table2 === null) return "unknown";
-      if (wrapper.clientWidth === 0 || table2.offsetWidth === 0) return "unknown";
-      return table2.offsetWidth <= wrapper.clientWidth ? "fits" : "contained";
-    };
-    const apply = () => {
-      const result = checkFit();
-      if (result === "unknown") return;
-      const next = result === "contained";
+  useMeasuredWidths({
+    resolveRoot: () => wrapperRef.current,
+    signature: String(active),
+    enabled: active,
+    // The TABLE too, not only the wrapper: a column set that re-measures (a facet filter changing
+    // the widest cell, a font settling) moves the table's min-content width while the wrapper's
+    // box never changes at all.
+    extra: (root) => [root.querySelector("table")],
+    onMeasure: (root) => {
+      const table = root.querySelector("table");
+      if (table === null || root.clientWidth === 0 || table.offsetWidth === 0) return;
+      const next = table.offsetWidth > root.clientWidth;
       setContained((current) => current === next ? current : next);
-    };
-    if (typeof ResizeObserver === "undefined") {
-      apply();
-      return;
     }
-    const observer = new ResizeObserver(apply);
-    observer.observe(wrapper);
-    const table = wrapper.querySelector("table");
-    if (table !== null) observer.observe(table);
-    apply();
-    return () => {
-      observer.disconnect();
-    };
-  }, [active]);
+  });
   return { wrapperRef, contained: active && contained };
 }
 function BasaltDataTable(props) {
@@ -280,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,
@@ -318,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",
     () => [
@@ -343,65 +441,11 @@ 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]));
     return columns.map((column) => {
-      const id = column.id ?? column.accessorKey;
+      const id = columnDefId(column);
       const facet = id === void 0 ? void 0 : facetById.get(id);
       if (!facet) return column;
       const filterFn = facet.multiple ? (row, columnId, filterValue) => !Array.isArray(filterValue) || filterValue.length === 0 ? true : filterValue.includes(String(row.getValue(columnId))) : (row, columnId, filterValue) => filterValue === null || filterValue === void 0 || filterValue === "" ? true : String(row.getValue(columnId)) === filterValue;
@@ -430,25 +474,54 @@ function BasaltDataTable(props) {
   const sortingEnabled = enableSorting && !breaches.includes("sorting");
   const filteringEnabled = !breaches.includes("filtering");
   const totalIsAuthoritative = !breaches.includes("total");
+  const scrolls = maxHeight !== void 0 || minWidth !== void 0;
+  const foldEligible = minWidth === void 0;
+  const { columnFoldOrder, columnFoldFixedIds } = useMemo(() => {
+    const pinnedIds = /* @__PURE__ */ new Set([...columnPinning.left ?? [], ...columnPinning.right ?? []]);
+    const excluded = new Set(
+      columns.flatMap((column) => {
+        const id = columnDefId(column);
+        if (id === void 0) return [];
+        return column.enableHiding === false || pinnedIds.has(id) ? [id] : [];
+      })
+    );
+    return {
+      columnFoldOrder: foldOrder(columns).filter((id) => !excluded.has(id)),
+      columnFoldFixedIds: [...excluded]
+    };
+  }, [columns, columnPinning]);
+  const projection = useCardProjection(renderCard !== void 0);
+  const columnFold = useColumnFold({
+    active: foldEligible && !projection.cards,
+    order: columnFoldOrder,
+    fixedIds: columnFoldFixedIds
+  });
+  const columnVisibility = useMemo(
+    () => Object.fromEntries([...columnFold.folded].map((id) => [id, false])),
+    [columnFold.folded]
+  );
+  const hasFolded = columnFold.folded.size > 0;
+  const foldRows = useRowDisclosure({ data, getRowId });
   const table = useReactTable({
     data,
     columns: tableColumns,
     state: {
-      sorting,
+      sorting: tableState.sorting,
       globalFilter,
-      columnFilters,
+      columnFilters: tableState.columnFilters,
       columnPinning,
-      ...enablePagination && { pagination },
-      ...enableRowSelection && { rowSelection: rowSelectionState }
+      columnVisibility,
+      ...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(),
@@ -476,7 +549,7 @@ function BasaltDataTable(props) {
   const branch = query === void 0 ? void 0 : dataQueryBranch("BasaltDataTable", query);
   const showSkeleton = branch === void 0 ? isLoading : branch === "pending";
   const queryError = branch === "error" && query !== void 0 ? query : void 0;
-  const columnCount = columns.length + (enableRowSelection ? 1 : 0);
+  const columnCount = columns.length + (enableRowSelection ? 1 : 0) + (hasFolded ? 1 : 0) - columnFold.folded.size;
   const selectedModelRows = enableRowSelection ? table.getSelectedRowModel().rows : void 0;
   const selectedRows = useMemo(
     () => selectedModelRows?.map((row) => row.original) ?? [],
@@ -488,10 +561,20 @@ function BasaltDataTable(props) {
   );
   const headerGroups = enablePinning ? getOrderedHeaderGroups(table) : table.getHeaderGroups();
   const rows = table.getRowModel().rows;
-  const scrolls = maxHeight !== void 0 || minWidth !== void 0;
   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,
     {
@@ -507,228 +590,245 @@ function BasaltDataTable(props) {
       ...withRowBorders !== void 0 && { withRowBorders },
       withTableBorder,
       children: [
-        /* @__PURE__ */ jsx(Table.Thead, { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
-          const canSort = sortingEnabled && header.column.getCanSort();
-          const sorted = header.column.getIsSorted();
-          const toggleSorting = header.column.getToggleSortingHandler();
-          const pinnedStyle = enablePinning ? getPinnedCellStyle(table, header.column) : void 0;
-          const align = resolveAlign(header.column);
-          return /* @__PURE__ */ jsxs(
-            Table.Th,
-            {
-              onClick: canSort ? toggleSorting : void 0,
-              onKeyDown: canSort ? (event) => {
-                if (event.key !== "Enter" && event.key !== " ") return;
-                event.preventDefault();
-                toggleSorting?.(event);
-              } : void 0,
-              tabIndex: canSort ? 0 : void 0,
-              "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
-              style: {
-                ...canSort ? { cursor: "pointer", userSelect: "none" } : void 0,
-                ...align !== void 0 && { textAlign: align },
-                ...pinnedStyle
+        /* @__PURE__ */ jsx(Table.Thead, { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          hasFolded && /* @__PURE__ */ jsx(Table.Th, { className: classes.foldToggleCell, "aria-hidden": true }),
+          headerGroup.headers.map((header) => {
+            const canSort = sortingEnabled && header.column.getCanSort();
+            const sorted = header.column.getIsSorted();
+            const toggleSorting = header.column.getToggleSortingHandler();
+            const pinnedStyle = enablePinning ? getPinnedCellStyle(table, header.column) : void 0;
+            const align = resolveAlign(header.column);
+            const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+            return /* @__PURE__ */ jsxs(
+              Table.Th,
+              {
+                ...isSelectColumn && { className: classes.selectCell },
+                ...!isSelectColumn && { [FOLD_ID_ATTR]: header.column.id },
+                onClick: canSort ? toggleSorting : void 0,
+                onKeyDown: canSort ? (event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  toggleSorting?.(event);
+                } : void 0,
+                tabIndex: canSort ? 0 : 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 },
+                  ...pinnedStyle
+                },
+                children: [
+                  header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                  canSort && /* @__PURE__ */ jsx(SortIndicator, { direction: sorted })
+                ]
               },
-              children: [
-                header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
-                canSort && /* @__PURE__ */ jsx(SortIndicator, { direction: sorted })
-              ]
-            },
-            header.id
-          );
-        }) }, 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) => {
+              header.id
+            );
+          })
+        ] }, headerGroup.id)) }),
+        /* @__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();
-          return /* @__PURE__ */ jsx(
-            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);
-                }
-              },
-              children: cells.map((cell) => {
-                const pinnedStyle = enablePinning ? getPinnedCellStyle(table, cell.column) : void 0;
-                const align = resolveAlign(cell.column);
-                return /* @__PURE__ */ jsx(
-                  Table.Td,
-                  {
-                    style: {
-                      ...typeof cell.getValue() === "number" && cell.column.columnDef.meta?.numeral !== false ? NUMERIC_CELL_STYLE : void 0,
-                      ...align !== void 0 && { textAlign: align },
-                      ...pinnedStyle
-                    },
-                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                  },
-                  cell.id
-                );
-              })
-            },
-            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 },
+                ...activationProps(onRowActivate, row.original),
+                children: [
+                  hasFolded && /* @__PURE__ */ jsx(Table.Td, { className: classes.foldToggleCell, children: /* @__PURE__ */ jsx(
+                    FoldToggle,
+                    {
+                      expanded: rowExpanded,
+                      controlsId: `${row.id}-fold`,
+                      onToggle: () => foldRows.toggle(row.id)
+                    }
+                  ) }),
+                  cells.map((cell) => {
+                    const pinnedStyle = enablePinning ? getPinnedCellStyle(table, cell.column) : void 0;
+                    const align = resolveAlign(cell.column);
+                    return /* @__PURE__ */ jsx(
+                      Table.Td,
+                      {
+                        ...cell.column.id === SELECT_COLUMN_ID && {
+                          className: classes.selectCell,
+                          // The label's ::after fills the cell, so a tap on it bubbles to the row —
+                          // stop it only where a tick is possible; a disabled row's tap is a row tap.
+                          ...cell.row.getCanSelect() && {
+                            onClick: (event) => event.stopPropagation()
+                          }
+                        },
+                        style: {
+                          ...typeof cell.getValue() === "number" && cell.column.columnDef.meta?.numeral !== false ? NUMERIC_CELL_STYLE : void 0,
+                          ...align !== void 0 && { textAlign: align },
+                          ...pinnedStyle
+                        },
+                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                      },
+                      cell.id
+                    );
+                  })
+                ]
+              }
+            ),
+            rowExpanded && /* @__PURE__ */ jsx(Table.Tr, { id: `${row.id}-fold`, className: classes.foldDisclosureRowTr, children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, className: classes.foldDisclosureCell, children: /* @__PURE__ */ jsx(RowDisclosure, { row, folded: columnFold.folded }) }) })
+          ] }, row.id);
         }) })
       ]
     }
   );
+  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,
-              {
-                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 }),
-    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",
-        {
-          ref: containment.wrapperRef,
-          className: classes.containment,
-          "data-contained": containment.contained ? "true" : "false",
-          children: tableNode
-        }
-      )
-    ) : /* @__PURE__ */ jsx(
-      Table.ScrollContainer,
-      {
-        type: "native",
-        minWidth: minWidth ?? 0,
-        ...maxHeight !== void 0 && { maxHeight },
-        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
-              }
-            ),
+  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(
-              Pagination,
+              "div",
               {
-                size: "sm",
-                radius: "md",
-                total: Math.max(table.getPageCount(), 1),
-                value: paginationState.pageIndex + 1,
-                onChange: (page) => table.setPageIndex(page - 1)
+                ref: containment.wrapperRef,
+                className: classes.containment,
+                "data-contained": containment.contained ? "true" : "false",
+                children: tableNode
               }
             )
-          ] })
-        ]
-      }
-    )
-  ] });
+          ) : (
+            // `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,
+          {
+            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
+  BasaltDataTable,
+  planColumnFold
 };