@tensor_1/react 2.49.1 → 2.50.0

package/dist/index.cjs

@@ -633,8 +633,9 @@ function toggleSort(keys, field, additive = false) {
   const existing = keys.find((k) => k.field === field);
   const dir = nextSortDir(existing?.dir);
   if (!additive) return dir === "none" ? [] : [{ field, dir }];
-  const rest = keys.filter((k) => k.field !== field);
-  return dir === "none" ? rest : [...rest, { field, dir }];
+  if (dir === "none") return keys.filter((k) => k.field !== field);
+  if (!existing) return [...keys, { field, dir }];
+  return keys.map((k) => k.field === field ? { field, dir } : k);
 }
 function asNum(v) {
   return typeof v === "number" ? v : Number(v);
@@ -4007,6 +4008,7 @@ function SearchBar({
   inputDescribedBy,
   labels: labelsProp,
   name,
+  maxLength,
   inputId,
   inputRef,
   autoFocus,
@@ -4065,6 +4067,7 @@ function SearchBar({
               id: fieldId,
               type: "search",
               name,
+              maxLength,
               className: "uix-input",
               value,
               placeholder,
@@ -10929,17 +10932,25 @@ function Table({
     }
   );
 }
-function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
+function Th({ sortable, sortDirection, sortOrder, sortOrderLabel, onSort, className, children, onClick, ...props }) {
+  const ordinal = sortOrder != null && sortOrder > 0 && sortOrderLabel ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "uix-visually-hidden", children: `, ${sortOrderLabel}` }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "th",
     {
       className,
       "data-sort": sortable || void 0,
       "data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
+      "data-sort-labelled": ordinal != null || void 0,
       "aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
       onClick: sortable && onSort ? void 0 : onClick,
       ...props,
-      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
+      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children: [
+        children,
+        ordinal
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+        children,
+        ordinal
+      ] })
     }
   );
 }
@@ -14543,11 +14554,40 @@ var DEFAULT_DATA_WORKSPACE_LABELS = {
   filteredEmpty: "Nothing matches",
   filteredEmptyDetail: "Change the search or clear a filter.",
   error: "The list could not be loaded",
-  retry: "Try again"
+  retry: "Try again",
+  sortPriority: "Sort priority {n}",
+  groupCount: "{count} rows",
+  groupCountOne: "{count} row",
+  collapseGroup: "Collapse group {name}",
+  expandGroup: "Expand group {name}",
+  selectGroup: "Select group {name}"
 };
+var useIsomorphicLayoutEffect22 = typeof document !== "undefined" ? import_react89.useLayoutEffect : import_react89.useEffect;
 var ArrowUpRight = () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("svg", { className: "uix-id-cell__arrow", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", { d: "M7 17 17 7M8 7h9v9" }) });
 var PlusIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", { d: "M12 5v14M5 12h14" }) });
 var MaximizeIcon = ({ restore }) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", { d: restore ? "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7" : "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" }) });
+var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("path", { d: "M6 4l4 4-4 4" }) });
+var LADDER_CARDS = 768;
+var LADDER_LOW = 900;
+var LADDER_MID = 600;
+var ladderFor = (mobile, width) => {
+  if (!mobile || !(width > 0)) return null;
+  if (mobile === "cards" && width < LADDER_CARDS) return "cards";
+  if (width < LADDER_MID) return "priority-mid";
+  if (width < LADDER_LOW) return "priority";
+  return null;
+};
+var hiddenBy = (ladder, priority) => ladder === "priority" && priority === "low" || ladder === "priority-mid" && (priority === "low" || priority === "mid");
+var ROW_HEIGHT = { compact: 44, standard: 56, comfortable: 68 };
+var CONTROLS = 'a, button, input, select, textarea, label, summary, dialog, [role="button"], [role="menuitem"], [contenteditable="true"], [popover], td.uix-table__selcell, td.uix-table__actions';
+var RESERVED_COLS = /* @__PURE__ */ new Set(["select", "id", "actions", "expand"]);
+var textOf2 = (node) => typeof node === "string" ? node : void 0;
+var columnLabel = (column) => column.label ?? textOf2(column.header);
+var ladderAttrs = (on, column, body) => on ? {
+  "data-col": RESERVED_COLS.has(column.id) ? void 0 : column.id,
+  "data-priority": column.priority && column.priority !== "high" ? column.priority : void 0,
+  "data-label": body ? columnLabel(column) : void 0
+} : {};
 function DataWorkspace({
   label,
   rows,
@@ -14558,10 +14598,15 @@ function DataWorkspace({
   onSortChange,
   selection,
   onSelectionChange,
+  maxSelection,
   bulkActions,
   rowActions,
   getRowProps,
   density,
+  zebra,
+  freezeFirstColumn = false,
+  fixed,
+  mobile,
   search,
   filters,
   savedViews,
@@ -14569,13 +14614,32 @@ function DataWorkspace({
   viewChanged = false,
   onSaveView,
   onSaveViewAs,
+  saveViewAs = "changed",
   maximized = false,
   onMaximizedChange,
   toolbarEnd,
+  beforeBody,
   pagination,
   status = "ready",
   refreshing = false,
   onRetry,
+  loadingRows = 6,
+  empty,
+  emptyAction,
+  filteredEmpty,
+  filteredEmptyAction,
+  error,
+  stateOverride,
+  groups,
+  collapsedGroups,
+  onCollapsedGroupsChange,
+  virtualize,
+  rowNavigation,
+  onRowActivate,
+  activateOnClick = true,
+  activeRowId,
+  onActiveRowChange,
+  multiSort: multiSort2 = false,
   labels: labelOverrides,
   className,
   ...props
@@ -14609,68 +14673,123 @@ function DataWorkspace({
       const root = rootRef.current;
       const target = event.target;
       const owner = target?.closest?.('[popover], [role="dialog"], [role="menu"], [role="listbox"], [aria-expanded="true"]');
-      if (owner && root?.contains(owner)) return;
+      if (owner && root?.contains(owner) && (owner.getAttribute("aria-expanded") !== "true" || stillExpanded(owner))) return;
       if (root && openInside(root)) return;
       onMaximizedChange(false);
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [maximized, onMaximizedChange]);
+  const [ladder, setLadder] = (0, import_react89.useState)(null);
+  useIsomorphicLayoutEffect22(() => {
+    const root = rootRef.current;
+    if (!mobile || !root) {
+      setLadder(null);
+      return;
+    }
+    const read = () => {
+      const style = getComputedStyle(root);
+      const padding = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+      setLadder(ladderFor(mobile, root.getBoundingClientRect().width - padding));
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [mobile]);
+  const cards = ladder === "cards";
   const filtered = (filters ? filters.fields.some((field) => !isFilterEmpty(filters.values[field.id])) : false) || (search?.value.trim() ?? "") !== "";
-  const [settled, setSettled] = (0, import_react89.useState)({ rows, filtered });
-  if (!refreshing && rows !== settled.rows) setSettled({ rows, filtered });
-  const view = rows.length > 0 ? { rows, filtered } : refreshing || rows === settled.rows ? settled : { rows, filtered };
-  const shownRows = view.rows;
+  const source = groups ?? rows;
+  const flat = (0, import_react89.useMemo)(() => groups ? groups.flatMap((group2) => group2.rows) : rows, [groups, rows]);
+  const current = { source, flat, groups, filtered };
+  const [settled, setSettled] = (0, import_react89.useState)(current);
+  if (!refreshing && source !== settled.source) setSettled(current);
+  const view = flat.length > 0 ? current : refreshing || source === settled.source ? settled : current;
+  const shownRows = view.flat;
+  const shownGroups = view.groups;
+  const [ownCollapsed, setOwnCollapsed] = (0, import_react89.useState)(() => /* @__PURE__ */ new Set());
+  const collapsed = collapsedGroups ?? ownCollapsed;
+  const toggleGroupOpen = (groupId) => {
+    const next = new Set(collapsed);
+    if (next.has(groupId)) next.delete(groupId);
+    else next.add(groupId);
+    if (!collapsedGroups) setOwnCollapsed(next);
+    onCollapsedGroupsChange?.(next);
+  };
   const ids = (0, import_react89.useMemo)(() => shownRows.map(getRowId), [shownRows, getRowId]);
-  const selected = selection ?? /* @__PURE__ */ new Set();
+  const visibleIds = (0, import_react89.useMemo)(() => {
+    if (!shownGroups) return ids;
+    const out = [];
+    for (const group2 of shownGroups) if (!collapsed.has(group2.id)) for (const row of group2.rows) out.push(getRowId(row));
+    return out;
+  }, [shownGroups, collapsed, ids, getRowId]);
+  const selected = selection ?? EMPTY_SET;
   const selectable = onSelectionChange != null;
+  const cap = maxSelection ?? Infinity;
   const onPage = ids.filter((rowId) => selected.has(rowId)).length;
+  const apply = (next, rowIds, on) => {
+    for (const rowId of rowIds) {
+      if (!on) next.delete(rowId);
+      else if (next.has(rowId) || next.size < cap) next.add(rowId);
+    }
+    return next;
+  };
   const toggleRow = (rowId, on, event) => {
     if (!onSelectionChange) return;
     const next = new Set(selected);
-    const from = anchor.current ? ids.indexOf(anchor.current) : -1;
-    const to = ids.indexOf(rowId);
+    const from = anchor.current ? visibleIds.indexOf(anchor.current) : -1;
+    const to = visibleIds.indexOf(rowId);
     if (event?.shiftKey && from >= 0 && to >= 0) {
-      for (let i = Math.min(from, to); i <= Math.max(from, to); i += 1) {
-        if (on) next.add(ids[i]);
-        else next.delete(ids[i]);
-      }
+      apply(next, visibleIds.slice(Math.min(from, to), Math.max(from, to) + 1), on);
     } else {
-      if (on) next.add(rowId);
-      else next.delete(rowId);
+      apply(next, [rowId], on);
       anchor.current = rowId;
     }
     onSelectionChange(next);
   };
-  const toggleAll = (on) => {
+  const toggleMany = (rowIds, on) => {
     if (!onSelectionChange) return;
-    const next = new Set(selected);
-    for (const rowId of ids) {
-      if (on) next.add(rowId);
-      else next.delete(rowId);
-    }
-    onSelectionChange(next);
+    onSelectionChange(apply(new Set(selected), rowIds, on));
   };
+  const atCap = selected.size >= cap;
   const actionsByRow = (0, import_react89.useMemo)(() => rowActions ? shownRows.map((row) => rowActions(row)) : [], [shownRows, rowActions]);
   const hasActions = actionsByRow.some((node) => node != null && node !== false);
   const activeFilters = filters ? filters.fields.filter((field) => !isFilterEmpty(filters.values[field.id])) : [];
   const searching = (search?.value.trim() ?? "") !== "";
   const clearAll = () => {
+    if (filters?.onClearAll) {
+      filters.onClearAll({ search: searching });
+      return;
+    }
     for (const field of activeFilters) filters?.onChange(field.id, void 0);
     if (searching) search?.onChange("");
   };
-  const sortFor = (column) => sort?.columnId === column.id ? sort.direction : "none";
-  const cycleSort = (column) => {
-    const current = sortFor(column);
-    onSortChange?.(current === "none" ? { columnId: column.id, direction: "ascending" } : current === "ascending" ? { columnId: column.id, direction: "descending" } : null);
+  const multi = multiSort2 || Array.isArray(sort);
+  const keys = Array.isArray(sort) ? sort : sort ? [sort] : [];
+  const sortFor = (column) => keys.find((key) => key.columnId === column.id)?.direction ?? "none";
+  const cycleSort = (column, additive) => {
+    if (!onSortChange) return;
+    const current2 = sortFor(column);
+    const turned = current2 === "none" ? "ascending" : current2 === "ascending" ? "descending" : null;
+    if (!multi) {
+      onSortChange(turned ? { columnId: column.id, direction: turned } : null);
+      return;
+    }
+    const next = toggleSort(keys.map((key) => ({ field: key.columnId, dir: key.direction })), column.id, additive).map((key) => ({ columnId: key.field, direction: key.dir === "descending" ? "descending" : "ascending" }));
+    onSortChange(next);
   };
+  const showSaveAs = onSaveViewAs != null && (viewChanged || saveViewAs === "always");
   const toolbar = /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-toolbar uix-data-workspace__toolbar", role: "toolbar", "aria-label": label, children: [
-    savedViews && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(PopoverButton, { id: `${id}-views`, label: savedViews.current, title: typeof savedViews.current === "string" ? fillLabel(labels.savedView, { name: savedViews.current }) : void 0, variant: "secondary", children: (close) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SavedViewMenu, { ...savedViews.menu, onSelect: (viewId) => {
-      savedViews.menu.onSelect(viewId);
-      close();
-    } }) }),
+    savedViews && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(PopoverButton, { id: `${id}-views`, label: savedViews.current, title: typeof savedViews.current === "string" ? fillLabel(labels.savedView, { name: savedViews.current }) : void 0, variant: "secondary", children: (close) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+      savedViews.note != null && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "uix-data-workspace__views-note", children: savedViews.note }),
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SavedViewMenu, { ...savedViews.menu, onSelect: (viewId) => {
+        savedViews.menu.onSelect(viewId);
+        close();
+      } })
+    ] }) }),
     viewChanged && onSaveView && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", variant: "secondary", onClick: onSaveView, children: labels.saveView }),
-    viewChanged && onSaveViewAs && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", variant: "ghost", onClick: onSaveViewAs, children: labels.saveViewAs }),
+    showSaveAs && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", variant: "ghost", onClick: onSaveViewAs, children: labels.saveViewAs }),
     filters && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(FilterChips, { filters, labels, baseId: id }),
     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-toolbar__spacer" }),
     search && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -14682,67 +14801,77 @@ function DataWorkspace({
         placeholder: search.placeholder ?? labels.searchPlaceholder,
         value: search.value,
         onValueChange: search.onChange,
-        inputRef: searchRef
+        inputRef: searchRef,
+        onSubmit: search.onSubmit,
+        onClear: search.onClear,
+        maxLength: search.maxLength
       }
     ),
     viewMenu && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(PopoverButton, { id: `${id}-view`, label: labels.view, variant: "ghost", children: () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ViewMenu, { ...viewMenu }) }),
     onMaximizedChange && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", variant: "ghost", icon: true, "aria-label": maximized ? labels.restore : labels.maximize, "aria-pressed": maximized, onClick: () => onMaximizedChange(!maximized), children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(MaximizeIcon, { restore: maximized }) }),
     toolbarEnd
   ] });
+  const busy = (node) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(BusyRegion, { busy: refreshing, className: "uix-data-workspace__state", children: node });
   let body;
-  if (status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(LoadingState, { rows: 6, label: labels.loading, className: "uix-data-workspace__loading" });
-  else if (status === "error") body = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ErrorState, { title: labels.error, action: onRetry && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", onClick: onRetry, children: labels.retry }) });
+  if (stateOverride != null) body = busy(stateOverride);
+  else if (status === "loading") body = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(LoadingState, { rows: loadingRows, label: labels.loading, className: "uix-data-workspace__loading" });
+  else if (status === "error") body = error != null ? busy(error) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ErrorState, { title: labels.error, action: onRetry && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", onClick: onRetry, children: labels.retry }) });
   else if (shownRows.length === 0) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(BusyRegion, { busy: refreshing, className: "uix-data-workspace__state", children: view.filtered ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(FilteredEmptyState, { title: labels.filteredEmpty, action: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", onClick: clearAll, children: labels.clearFilters }), children: labels.filteredEmptyDetail }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(EmptyState, { title: labels.empty, children: labels.emptyDetail }) });
+    const clear = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", onClick: clearAll, children: labels.clearFilters });
+    body = busy(view.filtered ? filteredEmpty ?? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      FilteredEmptyState,
+      {
+        title: labels.filteredEmpty,
+        action: filteredEmptyAction != null ? /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-data-workspace__state-actions", children: [
+          clear,
+          filteredEmptyAction
+        ] }) : clear,
+        children: labels.filteredEmptyDetail
+      }
+    ) : empty ?? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(EmptyState, { title: labels.empty, action: emptyAction, children: labels.emptyDetail }));
   } else {
-    body = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TableWrap, { refreshing, className: "uix-data-workspace__table", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(Table, { density, pinnedCol: idColumn != null, pinnedActions: hasActions, className: cx(selectable && idColumn && "uix-data-workspace__grid--pin-id"), "aria-label": label, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("tr", { children: [
-        selectable && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("th", { className: "uix-table__selcol", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Checkbox, { "aria-label": labels.selectAll, checked: onPage > 0 && onPage === ids.length, indeterminate: onPage > 0 && onPage < ids.length, onChange: (event) => toggleAll(event.currentTarget.checked) }) }),
-        idColumn && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Th, { scope: "col", children: idColumn.header }),
-        columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-          Th,
-          {
-            scope: "col",
-            className: column.align === "end" ? "uix-col--num" : void 0,
-            style: column.width ? { width: column.width } : void 0,
-            sortable: column.sortable && onSortChange != null,
-            sortDirection: sortFor(column),
-            onSort: () => cycleSort(column),
-            children: column.header
-          },
-          column.id
-        )),
-        hasActions && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("th", { scope: "col", className: "uix-table__actions", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-visually-hidden", children: labels.rowActions }) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("tbody", { children: shownRows.map((row, index) => {
-        const rowId = ids[index];
-        const text = idColumn?.text(row) ?? rowId;
-        const isSelected = selected.has(rowId);
-        return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(Tr, { selected: isSelected, ...getRowProps?.(row), children: [
-          selectable && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("td", { className: "uix-table__selcell", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-            Checkbox,
-            {
-              "aria-label": fillLabel(labels.selectRow, { label: text }),
-              checked: isSelected,
-              onClick: (event) => toggleRow(rowId, event.currentTarget.checked, event),
-              onChange: () => {
-              }
-            }
-          ) }),
-          idColumn && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Td, { className: "uix-id-cell", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { className: "uix-data-workspace__id", children: [
-            idColumn.onPeek ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", className: "uix-id-cell__btn", "aria-haspopup": "dialog", onClick: () => idColumn.onPeek?.(row), children: text }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-cell-strong", children: text }),
-            idColumn.href && renderUixLink(idColumn.renderLink, {
-              href: idColumn.href(row),
-              className: "uix-data-workspace__open",
-              "aria-label": fillLabel(labels.open, { label: text }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ArrowUpRight, {})
-            })
-          ] }) }),
-          columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Td, { className: column.align === "end" ? "uix-col--num" : void 0, children: column.cell(row) }, column.id)),
-          hasActions && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(RowActions, { children: actionsByRow[index] })
-        ] }, rowId);
-      }) })
-    ] }) });
+    body = /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      WorkspaceGrid,
+      {
+        label,
+        rows: shownRows,
+        ids,
+        groups: shownGroups,
+        collapsed,
+        onToggleGroup: toggleGroupOpen,
+        getRowId,
+        columns,
+        idColumn,
+        getRowProps,
+        density,
+        zebra,
+        freezeFirstColumn,
+        fixed: fixed ?? columns.some((column) => column.className != null || column.minWidth != null),
+        ladderOn: mobile != null,
+        ladder,
+        refreshing,
+        selectable,
+        selected,
+        onPage,
+        atCap,
+        toggleRow,
+        toggleMany,
+        actionsByRow,
+        hasActions,
+        keys,
+        sortable: onSortChange != null,
+        multi,
+        sortFor,
+        cycleSort,
+        virtualize: pagination || shownGroups ? void 0 : virtualize,
+        rowNavigation: rowNavigation ?? onRowActivate != null,
+        onRowActivate,
+        activateOnClick,
+        activeRowId,
+        onActiveRowChange,
+        labels
+      }
+    );
   }
   const selectedIds = [...selected];
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
@@ -14755,12 +14884,559 @@ function DataWorkspace({
       children: [
         toolbar,
         bulkActions && selectedIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(BulkBar, { count: selectedIds.length, label: labels.bulkActions, selectedLabel: (n) => fillLabel(labels.selected, { count: n }), children: bulkActions(selectedIds) }),
+        beforeBody != null && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "uix-data-workspace__before", children: beforeBody }),
         body,
-        pagination && status === "ready" && shownRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Footer, { pagination, labels, rowCount: shownRows.length })
+        pagination && status === "ready" && stateOverride == null && shownRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Footer, { pagination, labels, rowCount: shownRows.length })
       ]
     }
   );
 }
+var EMPTY_SET = /* @__PURE__ */ new Set();
+function WorkspaceGrid(props) {
+  return props.virtualize ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(WindowedGrid, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(WorkspaceTable, { ...props, windowing: null, virtual: null });
+}
+function WindowedGrid(props) {
+  const windowing = props.virtualize === true || !props.virtualize ? {} : props.virtualize;
+  const threshold = windowing.threshold ?? 100;
+  const virtual = useVirtualRows(props.rows, {
+    rowHeight: windowing.estimatedRowHeight ?? ROW_HEIGHT[props.density ?? "standard"],
+    overscan: windowing.overscan ?? 8,
+    // windowed at `threshold` rows or more (the hook windows above its own threshold)
+    threshold: Math.max(0, threshold - 1),
+    estimatedViewportHeight: windowing.maxHeight ?? 640,
+    measureRows: "tbody > tr[data-uix-row-id]",
+    // cards are not windowed: a card's height is its content's
+    enabled: props.rows.length >= threshold && props.ladder !== "cards"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(WorkspaceTable, { ...props, windowing, virtual });
+}
+var columnFloor = (width, minWidth, className) => {
+  if (minWidth) return minWidth;
+  if (width && !width.trim().endsWith("%")) return width;
+  const classes = className?.split(/\s+/) ?? [];
+  for (const cls of classes) {
+    const tier = /^uix-col--w-(xs|sm|md|lg|xl)$/.exec(cls)?.[1];
+    if (tier) return `var(--uix-col-w-${tier})`;
+  }
+  if (classes.includes("uix-col--flex") || classes.includes("uix-col--primary")) return "var(--uix-col-title-min)";
+  return "var(--uix-col-w-sm)";
+};
+var isFlex = (className) => /(^|\s)uix-col--(flex|primary)(\s|$)/.test(className ?? "");
+var colClasses = (className) => className?.split(/\s+/).filter((cls) => /^uix-col--(w-(xs|sm|md|lg|xl)|flex|primary)$/.test(cls)).join(" ") || void 0;
+function WorkspaceTable({
+  label,
+  rows,
+  ids,
+  groups,
+  collapsed,
+  onToggleGroup,
+  getRowId,
+  columns,
+  idColumn,
+  getRowProps,
+  density,
+  zebra,
+  freezeFirstColumn,
+  fixed,
+  ladderOn,
+  ladder,
+  refreshing,
+  selectable,
+  selected,
+  onPage,
+  atCap,
+  toggleRow,
+  toggleMany,
+  actionsByRow,
+  hasActions,
+  keys,
+  sortable,
+  multi,
+  sortFor,
+  cycleSort,
+  rowNavigation,
+  onRowActivate,
+  activateOnClick,
+  activeRowId,
+  onActiveRowChange,
+  labels,
+  windowing,
+  virtual
+}) {
+  const cards = ladder === "cards";
+  const wrapRef = (0, import_react89.useRef)(null);
+  const baseId = (0, import_react89.useId)();
+  const maxHeight = windowing?.maxHeight ?? 640;
+  const long = windowing != null && !cards && rows.length >= (windowing.threshold ?? 100);
+  const containerRef = virtual?.containerRef;
+  const setWrap = (0, import_react89.useCallback)((node) => {
+    wrapRef.current = node;
+    if (containerRef) containerRef.current = node;
+  }, [containerRef]);
+  const windowed = virtual?.virtualized ?? false;
+  const start = virtual && windowed ? virtual.startIndex : 0;
+  const mountedRows = virtual && windowed ? virtual.rows : rows;
+  const nav = rowNavigation;
+  const clickActivates = onRowActivate != null && activateOnClick;
+  const [ownActive, setOwnActive] = (0, import_react89.useState)(null);
+  const active = activeRowId !== void 0 ? activeRowId : ownActive;
+  const navIds = (0, import_react89.useMemo)(() => {
+    if (!groups) return ids;
+    const out = [];
+    for (const group2 of groups) if (!collapsed.has(group2.id)) for (const row of group2.rows) out.push(getRowId(row));
+    return out;
+  }, [groups, collapsed, ids, getRowId]);
+  const mountedIds = (0, import_react89.useMemo)(() => new Set(windowed ? ids.slice(start, start + mountedRows.length) : navIds), [windowed, ids, start, mountedRows.length, navIds]);
+  const tabStop = active != null && mountedIds.has(active) ? active : navIds.find((rowId) => mountedIds.has(rowId)) ?? null;
+  const pendingFocus = (0, import_react89.useRef)(null);
+  const focusedRow = (0, import_react89.useRef)(null);
+  const rowElement = (rowId) => {
+    for (const el of Array.from(wrapRef.current?.querySelectorAll("tbody > tr[data-uix-row-id]") ?? [])) {
+      if (el.getAttribute("data-uix-row-id") === rowId) return el;
+    }
+    return null;
+  };
+  const reveal = (el) => {
+    el.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    const wrap = wrapRef.current;
+    const head = wrap?.querySelector("thead");
+    if (wrap && head && windowed) {
+      const under = head.getBoundingClientRect().bottom - el.getBoundingClientRect().top;
+      if (under > 0) wrap.scrollTop -= under;
+    }
+  };
+  const setActive = (rowId) => {
+    if (rowId === active) return;
+    if (activeRowId === void 0) setOwnActive(rowId);
+    onActiveRowChange?.(rowId);
+  };
+  const focusRow = (rowId, { take = true } = {}) => {
+    if (!navIds.includes(rowId)) return;
+    setActive(rowId);
+    if (!take) return;
+    const el = rowElement(rowId);
+    if (el) {
+      el.focus({ preventScroll: true });
+      reveal(el);
+      return;
+    }
+    const index = ids.indexOf(rowId);
+    if (index >= 0 && wrapRef.current && virtual && windowed) {
+      pendingFocus.current = rowId;
+      wrapRef.current.scrollTop = index * virtual.rowHeight;
+    }
+  };
+  useIsomorphicLayoutEffect22(() => {
+    if (!nav) return;
+    const pending = pendingFocus.current;
+    if (pending != null) {
+      if (!ids.includes(pending)) {
+        pendingFocus.current = null;
+        return;
+      }
+      const el2 = rowElement(pending);
+      if (el2) {
+        pendingFocus.current = null;
+        el2.focus({ preventScroll: true });
+        reveal(el2);
+      }
+      return;
+    }
+    const had = focusedRow.current;
+    if (had == null) return;
+    const wrap = wrapRef.current;
+    const focused = typeof document !== "undefined" ? document.activeElement : null;
+    const el = rowElement(had);
+    if (el && wrap && focused === wrap) {
+      el.focus({ preventScroll: true });
+      return;
+    }
+    if (el || !(focused == null || focused === document.body)) return;
+    if (windowed && ids.includes(had) && wrap) {
+      wrap.focus({ preventScroll: true });
+    } else if (tabStop != null) {
+      rowElement(tabStop)?.focus({ preventScroll: true });
+    }
+  });
+  const lastActiveProp = (0, import_react89.useRef)(activeRowId);
+  (0, import_react89.useEffect)(() => {
+    if (!nav || activeRowId === lastActiveProp.current) return;
+    lastActiveProp.current = activeRowId;
+    if (activeRowId == null) return;
+    const focused = document.activeElement;
+    const el = rowElement(activeRowId);
+    if (el && el.contains(focused)) return;
+    const mayTake = focused == null || focused === document.body || (wrapRef.current?.contains(focused) ?? false);
+    focusRow(activeRowId, { take: mayTake });
+  });
+  const latest = {
+    toggle: (rowId, on, event) => toggleRow(rowId, on, event),
+    key: (rowId, event) => {
+      if (event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return;
+      const at2 = navIds.indexOf(rowId);
+      const to = event.key === "ArrowDown" ? at2 + 1 : event.key === "ArrowUp" ? at2 - 1 : event.key === "Home" ? 0 : event.key === "End" ? navIds.length - 1 : null;
+      if (to != null) {
+        event.preventDefault();
+        const target = navIds[Math.max(0, Math.min(navIds.length - 1, to))];
+        if (target != null) focusRow(target);
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        const row = rows[ids.indexOf(rowId)];
+        if (onRowActivate) {
+          if (row !== void 0) onRowActivate(row);
+          return;
+        }
+        const el = event.currentTarget;
+        (el.querySelector(".uix-id-cell__btn") ?? el.querySelector("a[href]"))?.click();
+      } else if (event.key === " ") {
+        event.preventDefault();
+      }
+    },
+    click: (rowId, event) => {
+      if (!clickActivates) return;
+      if (!event.currentTarget.contains(event.target)) return;
+      const control = event.target.closest?.(CONTROLS);
+      if (control && control !== event.currentTarget && event.currentTarget.contains(control)) return;
+      if (typeof window !== "undefined" && (window.getSelection?.()?.toString() ?? "") !== "") return;
+      const row = rows[ids.indexOf(rowId)];
+      if (row !== void 0) onRowActivate?.(row);
+    },
+    focus: (rowId) => {
+      focusedRow.current = rowId;
+      setActive(rowId);
+    },
+    blur: (rowId, event) => {
+      const next = event.relatedTarget;
+      if (next && wrapRef.current?.contains(next)) return;
+      if (next) {
+        focusedRow.current = null;
+        return;
+      }
+      const el = event.currentTarget;
+      setTimeout(() => {
+        if (el.isConnected && focusedRow.current === rowId) focusedRow.current = null;
+      }, 0);
+    }
+  };
+  const latestRef = (0, import_react89.useRef)(latest);
+  latestRef.current = latest;
+  const handlers2 = (0, import_react89.useMemo)(() => ({
+    toggle: (...args) => latestRef.current.toggle(...args),
+    key: (...args) => latestRef.current.key(...args),
+    click: (...args) => latestRef.current.click(...args),
+    focus: (...args) => latestRef.current.focus(...args),
+    blur: (...args) => latestRef.current.blur(...args)
+  }), []);
+  const groupAnchor = (0, import_react89.useRef)(null);
+  const toggleGroup = (groupId, header) => {
+    groupAnchor.current = header ? { id: groupId, top: header.getBoundingClientRect().top } : null;
+    onToggleGroup(groupId);
+  };
+  useIsomorphicLayoutEffect22(() => {
+    const was = groupAnchor.current;
+    if (!was) return;
+    groupAnchor.current = null;
+    const header = wrapRef.current?.querySelector(`tr[data-group-id="${cssEscape(was.id)}"]`);
+    if (!header) return;
+    const moved = header.getBoundingClientRect().top - was.top;
+    if (Math.abs(moved) < 1) return;
+    const wrap = wrapRef.current;
+    if (wrap && wrap.scrollHeight > wrap.clientHeight + 1 && getComputedStyle(wrap).overflowY !== "visible") wrap.scrollTop += moved;
+    else window.scrollBy?.(0, moved);
+  });
+  const shiftKey = (0, import_react89.useRef)(false);
+  const additive = (0, import_react89.useRef)(false);
+  const frozen = !cards && ladder !== "priority-mid" && (idColumn != null || freezeFirstColumn);
+  const shown = columns.filter((column) => !hiddenBy(ladder, column.priority));
+  const colCount = (selectable ? 1 : 0) + (idColumn ? 1 : 0) + shown.length + (hasActions ? 1 : 0);
+  const selectRowLabel = labels.selectRow;
+  const openLabel = labels.open;
+  const fixedOn = fixed && !cards;
+  const [actionsWidth, setActionsWidth] = (0, import_react89.useState)(null);
+  useIsomorphicLayoutEffect22(() => {
+    if (!fixedOn || !hasActions) return;
+    let widest = 0;
+    for (const td of Array.from(wrapRef.current?.querySelectorAll("tbody td.uix-table__actions") ?? [])) {
+      const range = document.createRange();
+      range.selectNodeContents(td);
+      const content = range.getBoundingClientRect().width;
+      const style = getComputedStyle(td);
+      widest = Math.max(widest, content + parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0"));
+    }
+    const next = widest > 0 ? Math.ceil(widest) : null;
+    if (next !== actionsWidth) setActionsWidth(next);
+  });
+  const actionsCol = actionsWidth != null ? `${actionsWidth}px` : "5.25rem";
+  const floors = fixedOn ? [
+    ...selectable ? ["var(--uix-selcol-w)"] : [],
+    ...idColumn ? [columnFloor(idColumn.width, idColumn.minWidth, void 0)] : [],
+    ...shown.map((column) => columnFloor(column.width, column.minWidth, column.className)),
+    ...hasActions ? [actionsCol] : []
+  ] : [];
+  const tableStyle = fixedOn && floors.length ? { minWidth: floors.length === 1 ? floors[0] : `calc(${floors.join(" + ")})` } : void 0;
+  const renderRow = (row, index) => {
+    const rowId = ids[index];
+    const isSelected = selected.has(rowId);
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      WorkspaceRow,
+      {
+        row,
+        rowId,
+        columns,
+        idColumn,
+        getRowProps,
+        selectable,
+        selected: isSelected,
+        selectDisabled: !isSelected && atCap,
+        hasActions,
+        actions: actionsByRow[index],
+        ladderOn,
+        selectRowLabel,
+        openLabel,
+        marked: nav || windowing != null,
+        ariaRowIndex: windowed ? index + 2 : void 0,
+        nav,
+        tabStop: tabStop === rowId,
+        handlers: handlers2
+      },
+      rowId
+    );
+  };
+  let tbody;
+  if (groups) {
+    let offset = 0;
+    tbody = groups.map((group2, groupIndex) => {
+      const first = offset;
+      offset += group2.rows.length;
+      const open = !collapsed.has(group2.id);
+      const name = group2.name ?? textOf2(group2.label) ?? group2.id;
+      const groupIds = ids.slice(first, first + group2.rows.length);
+      const on = groupIds.filter((rowId) => selected.has(rowId)).length;
+      const count2 = group2.count ?? group2.rows.length;
+      const nameId = `${baseId}-g${groupIndex}-name`;
+      const countId = `${baseId}-g${groupIndex}-count`;
+      const firstAgg = shown.findIndex((column) => group2.aggregates?.[column.id] != null);
+      const lead = (idColumn ? 1 : 0) + (firstAgg < 0 ? shown.length + (hasActions ? 1 : 0) : firstAgg);
+      const leadAgg = lead === 0 && firstAgg === 0 ? group2.aggregates?.[shown[0].id] : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("tbody", { className: "uix-data-workspace__group", "data-collapsed": open ? void 0 : "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("tr", { className: "uix-data-workspace__group-head", "data-group-id": group2.id, children: [
+          selectable && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("td", { className: "uix-table__selcell", "data-col": ladderOn ? "select" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+            Checkbox,
+            {
+              "aria-label": fillLabel(labels.selectGroup, { name }),
+              disabled: group2.rows.length === 0 || atCap && on === 0,
+              checked: on > 0 && on === groupIds.length,
+              indeterminate: on > 0 && on < groupIds.length,
+              onChange: () => toggleMany(groupIds, on < groupIds.length && !atCap)
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("th", { scope: "rowgroup", colSpan: Math.max(1, lead), className: "uix-data-workspace__group-label", "aria-labelledby": `${nameId} ${countId}`, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { className: "uix-data-workspace__group-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uix-data-workspace__group-toggle",
+                "aria-expanded": open,
+                "aria-label": fillLabel(open ? labels.collapseGroup : labels.expandGroup, { name }),
+                onClick: (event) => toggleGroup(group2.id, event.currentTarget.closest("tr")),
+                children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ChevronIcon2, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-data-workspace__group-name", id: nameId, children: group2.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-data-workspace__group-count", id: countId, children: fillLabel(count2 === 1 ? labels.groupCountOne : labels.groupCount, { count: count2 }) }),
+            leadAgg
+          ] }) }),
+          firstAgg >= 0 && shown.slice(lead === 0 ? 1 : firstAgg).map((column) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("td", { className: cx("uix-data-workspace__group-agg", column.align === "end" && "uix-col--num", column.className), children: group2.aggregates?.[column.id] }, column.id)),
+          firstAgg >= 0 && hasActions && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("td", { className: "uix-table__actions" })
+        ] }),
+        open && group2.rows.map((row, at2) => renderRow(row, first + at2))
+      ] }, group2.id);
+    });
+  } else {
+    const spacer = (height, key) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("tr", { "aria-hidden": "true", className: "uix-data-workspace__spacer", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("td", { colSpan: colCount, style: { height } }) }, key);
+    tbody = /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("tbody", { children: [
+      virtual && windowed && start > 0 && spacer(virtual.padTop, "pad-top"),
+      windowed && start > 0 && start % 2 === 0 && spacer(0, "pad-zebra"),
+      mountedRows.map((row, at2) => renderRow(row, start + at2)),
+      virtual && windowed && virtual.padBottom > 0 && spacer(virtual.padBottom, "pad-bottom")
+    ] });
+  }
+  const wrapStyle = long ? { "--uix-table-max-height": `${maxHeight}px` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    TableWrap,
+    {
+      ref: setWrap,
+      refreshing,
+      style: wrapStyle,
+      tabIndex: windowing != null && nav ? -1 : void 0,
+      className: cx("uix-data-workspace__table", long && "uix-table-wrap--scroll", cards && "uix-data-workspace__table--cards"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+        Table,
+        {
+          density,
+          zebra,
+          pinnedCol: frozen,
+          pinnedActions: hasActions && !cards,
+          fixed: fixedOn || void 0,
+          style: tableStyle,
+          className: cx(
+            selectable && frozen && "uix-data-workspace__grid--pin-id",
+            ladder && `uix-table--${ladder}`,
+            groups && zebra !== false && "uix-data-workspace__grid--grouped",
+            nav && "uix-data-workspace__grid--rows",
+            clickActivates && "uix-data-workspace__grid--click"
+          ),
+          "aria-label": label,
+          "aria-rowcount": windowed ? ids.length + 1 : void 0,
+          children: [
+            fixedOn && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("colgroup", { children: [
+              selectable && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("col", { style: { width: "var(--uix-selcol-w)" } }),
+              idColumn && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("col", { style: idColumn.width ? { width: idColumn.width } : void 0 }),
+              shown.map((column) => {
+                const width = column.width ?? (isFlex(column.className) ? void 0 : columnFloor(void 0, column.minWidth, column.className));
+                return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("col", { className: colClasses(column.className), style: width ? { width } : void 0 }, column.id);
+              }),
+              hasActions && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("col", { style: { width: actionsCol } })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("tr", { "aria-rowindex": windowed ? 1 : void 0, children: [
+              selectable && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("th", { className: "uix-table__selcol", scope: "col", "data-col": ladderOn ? "select" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+                Checkbox,
+                {
+                  "aria-label": labels.selectAll,
+                  checked: onPage > 0 && onPage === ids.length,
+                  indeterminate: onPage > 0 && onPage < ids.length,
+                  disabled: atCap && onPage === 0,
+                  onChange: () => toggleMany(ids, onPage < ids.length && !atCap)
+                }
+              ) }),
+              idColumn && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Th, { scope: "col", "data-col": ladderOn ? "id" : void 0, children: idColumn.header }),
+              columns.map((column) => {
+                const order = keys.findIndex((key) => key.columnId === column.id);
+                const canSort = column.sortable && sortable;
+                const style = !fixedOn && (column.width || column.minWidth) ? { width: column.width, minWidth: column.minWidth } : void 0;
+                const ordinal = keys.length > 1 && order >= 0 ? order + 1 : void 0;
+                return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+                  Th,
+                  {
+                    scope: "col",
+                    className: cx(column.align === "end" && "uix-col--num", column.className) || void 0,
+                    style,
+                    sortable: canSort,
+                    sortDirection: sortFor(column),
+                    sortOrder: ordinal,
+                    sortOrderLabel: ordinal != null ? fillLabel(labels.sortPriority, { n: ordinal }) : void 0,
+                    onSort: () => {
+                      cycleSort(column, multi && additive.current);
+                      additive.current = false;
+                    },
+                    ...canSort && multi ? {
+                      onKeyDownCapture: (event) => {
+                        if (event.key === "Enter" || event.key === " ") shiftKey.current = event.shiftKey;
+                      },
+                      // A click made by Enter or Space has no pointer (detail 0) and may not carry Shift itself.
+                      onClickCapture: (event) => {
+                        additive.current = event.shiftKey || event.detail === 0 && shiftKey.current;
+                        shiftKey.current = false;
+                      }
+                    } : {},
+                    ...ladderAttrs(ladderOn, column, false),
+                    children: column.header
+                  },
+                  column.id
+                );
+              }),
+              hasActions && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("th", { scope: "col", className: "uix-table__actions", "data-col": ladderOn ? "actions" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-visually-hidden", children: labels.rowActions }) })
+            ] }) }),
+            tbody
+          ]
+        }
+      )
+    }
+  );
+}
+function WorkspaceRowInner({
+  row,
+  rowId,
+  columns,
+  idColumn,
+  getRowProps,
+  selectable,
+  selected,
+  selectDisabled,
+  hasActions,
+  actions,
+  ladderOn,
+  selectRowLabel,
+  openLabel,
+  marked,
+  ariaRowIndex,
+  nav,
+  tabStop,
+  handlers: handlers2
+}) {
+  const text = idColumn?.text(row) ?? rowId;
+  const extra = getRowProps?.(row);
+  const navProps = nav ? {
+    tabIndex: tabStop ? 0 : -1,
+    onKeyDown: (event) => {
+      extra?.onKeyDown?.(event);
+      if (!event.defaultPrevented) handlers2.key(rowId, event);
+    },
+    onClick: (event) => {
+      extra?.onClick?.(event);
+      if (!event.defaultPrevented) handlers2.click(rowId, event);
+    },
+    onFocus: (event) => {
+      extra?.onFocus?.(event);
+      handlers2.focus(rowId);
+    },
+    onBlur: (event) => {
+      extra?.onBlur?.(event);
+      handlers2.blur(rowId, event);
+    }
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(Tr, { selected, "data-uix-row-id": marked ? rowId : void 0, "aria-rowindex": ariaRowIndex, ...extra, ...navProps, children: [
+    selectable && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("td", { className: "uix-table__selcell", "data-col": ladderOn ? "select" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      Checkbox,
+      {
+        "aria-label": fillLabel(selectRowLabel, { label: text }),
+        checked: selected,
+        disabled: selectDisabled,
+        onClick: (event) => handlers2.toggle(rowId, event.currentTarget.checked, event),
+        onChange: () => {
+        }
+      }
+    ) }),
+    idColumn && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Td, { className: "uix-id-cell", "data-col": ladderOn ? "id" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(IdCell, { row, text, idColumn, openLabel }) }),
+    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Td, { className: cx(column.align === "end" && "uix-col--num", column.className) || void 0, ...ladderAttrs(ladderOn, column, true), children: column.cell(row) }, column.id)),
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(RowActions, { "data-col": ladderOn ? "actions" : void 0, children: actions })
+  ] });
+}
+var WorkspaceRow = (0, import_react89.memo)(WorkspaceRowInner);
+function IdCell({ row, text, idColumn, openLabel }) {
+  const rich = idColumn.render ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-data-workspace__id-text", children: idColumn.render(row) }) : null;
+  const arrow = idColumn.href && renderUixLink(idColumn.renderLink, {
+    href: idColumn.href(row),
+    className: "uix-data-workspace__open",
+    "aria-label": fillLabel(openLabel, { label: text }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ArrowUpRight, {})
+  });
+  if (!idColumn.onPeek && idColumn.href && idColumn.linkId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-data-workspace__id", children: renderUixLink(idColumn.renderLink, {
+      href: idColumn.href(row),
+      className: "uix-id-cell__btn uix-data-workspace__id-link",
+      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+        rich ?? text,
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ArrowUpRight, {})
+      ] })
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { className: "uix-data-workspace__id", children: [
+    idColumn.onPeek ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", className: "uix-id-cell__btn", "aria-haspopup": "dialog", onClick: () => idColumn.onPeek?.(row), children: rich ?? text }) : rich ?? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-cell-strong", children: text }),
+    arrow
+  ] });
+}
+var cssEscape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
 function Footer({ pagination, labels, rowCount }) {
   const sizes = pagination.pageSizes;
   const size = pagination.mode === "offset" ? pagination.pageSize : pagination.pageSize;
@@ -14808,7 +15484,18 @@ function openInside(root) {
     if (root.querySelector(":popover-open")) return true;
   } catch {
   }
-  return root.querySelector('dialog[open], [aria-expanded="true"]') != null;
+  if (root.querySelector("dialog[open]")) return true;
+  return Array.from(root.querySelectorAll('[aria-expanded="true"]')).some(stillExpanded);
+}
+function stillExpanded(el) {
+  const controls = el.getAttribute("aria-controls");
+  const target = controls ? document.getElementById(controls) : null;
+  if (!target?.hasAttribute("popover")) return true;
+  try {
+    return target.matches(":popover-open");
+  } catch {
+    return true;
+  }
 }
 function FilterChips({ filters, labels, baseId }) {
   const [editing, setEditing] = (0, import_react89.useState)(null);
@@ -14851,6 +15538,10 @@ function FilterChips({ filters, labels, baseId }) {
       setFocusChip(null);
     }
   });
+  const clearSet = () => {
+    if (filters.onClearAll) filters.onClearAll({ search: false });
+    else for (const f of set) filters.onChange(f.id, void 0);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
     set.map((field) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { ref: (el) => {
       if (el) anchors.current.set(field.id, el);
@@ -14866,9 +15557,7 @@ function FilterChips({ filters, labels, baseId }) {
       }
     ) }, field.id)),
     unset.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { ref: addRef, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Menu, { trigger: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Chip, { variant: "add", icon: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(PlusIcon2, {}), children: labels.addFilter }), children: unset.map((field) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(MenuItem, { onSelect: () => edit(field, addRef.current), children: field.label }, field.id)) }) }),
-    set.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", variant: "link", onClick: () => {
-      for (const f of set) filters.onChange(f.id, void 0);
-    }, children: labels.clearFilters }),
+    set.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { size: "sm", variant: "link", onClick: clearSet, children: labels.clearFilters }),
     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Popover, { id: popId, anchor: editing?.anchor ?? null, role: "dialog", "aria-label": editing?.field.label, children: editing && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(FilterEditor, { field: editing.field, value: draft, onValueChange: setDraft, onApply: (v) => finish(v), onClear: () => finish(void 0) }) })
   ] });
 }
@@ -15049,7 +15738,7 @@ function groupCommandItems(items) {
 // src/components/CommandPalette.tsx
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var CmdkContext = (0, import_react91.createContext)(null);
-var useIsomorphicLayoutEffect22 = typeof document !== "undefined" ? import_react91.useLayoutEffect : import_react91.useEffect;
+var useIsomorphicLayoutEffect23 = typeof document !== "undefined" ? import_react91.useLayoutEffect : import_react91.useEffect;
 function CommandPalette(props) {
   if (props.items) return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(CommandPaletteItems, { ...props, items: props.items });
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(CommandPaletteChildren, { ...props });
@@ -15084,7 +15773,7 @@ function CommandPaletteChildren({
   resultsTextRef.current = resultsText;
   const listId = (0, import_react91.useId)();
   const rootRef = (0, import_react91.useRef)(null);
-  useIsomorphicLayoutEffect22(() => {
+  useIsomorphicLayoutEffect23(() => {
     const overlay = rootRef.current?.closest("dialog, [popover]");
     if (!overlay || overlay.hasAttribute("data-uix-instant")) return;
     overlay.setAttribute("data-uix-instant", "");
@@ -15596,7 +16285,7 @@ function treeNav(flat, currentId, key) {
 
 // src/components/Tree.tsx
 var import_jsx_runtime108 = require("react/jsx-runtime");
-var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var ChevronIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 var DEFAULT_TREE_LABELS = {
   loading: "Loading\u2026",
   error: "Could not load.",
@@ -15650,7 +16339,7 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
                   onToggle(node.id);
                   onFocusNode(node.id);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronIcon2, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronIcon3, {})
               }
             )
           ) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "uix-tree__toggle" }),
@@ -16050,7 +16739,7 @@ function VirtualTreeView({
                         onToggle(f.node.id);
                         setFocusedId(f.node.id);
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronIcon2, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronIcon3, {})
                     }
                   )
                 ) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "uix-tree__toggle" }),
@@ -16113,7 +16802,7 @@ var idRef = (chartId, nodeId, part) => {
   return `${chartId}-${nodeId.replace(/[^A-Za-z0-9_-]/g, "_").slice(0, 40)}-${hash.toString(36)}-${part}`;
 };
 var isExpandable = (node, known, lazy) => known ? known.length > 0 : lazy && (node.reportCount ?? 0) > 0;
-var ChevronIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var ChevronIcon4 = () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 var PlusIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("path", { d: "M8 3v10M3 8h10" }) });
 var MinusIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("path", { d: "M3 8h10" }) });
 var FitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }) });
@@ -16208,7 +16897,7 @@ function OrgChartItem({ node, level, size, pos, ctx }) {
                   ctx.onToggle(node.id);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ChevronIcon3, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ChevronIcon4, {}),
                   count2 > 0 ? count2 : null
                 ]
               }
@@ -19691,7 +20380,7 @@ var DEFAULT_UNITS = { row: 36, pad: 16, head: 40 };
 var ESTIMATED_VIEWPORT = 720;
 var OVERSCAN_ROWS = 4;
 var BAR_MIN_FALLBACK = 1.5 * 16;
-var useIsomorphicLayoutEffect23 = typeof document !== "undefined" ? import_react102.useLayoutEffect : import_react102.useEffect;
+var useIsomorphicLayoutEffect24 = typeof document !== "undefined" ? import_react102.useLayoutEffect : import_react102.useEffect;
 var sameExtent = (a, b) => a.subRows === b.subRows && a.lanes === b.lanes && a.heads === b.heads;
 var IN_LANE = { scope: "lane", labelTops: ["0%"] };
 var vars3 = (values) => values;
@@ -19801,7 +20490,7 @@ function SchedulingTimeline({
     // eslint-disable-line react-hooks/exhaustive-deps
   );
   const tickCount = ticks.length;
-  useIsomorphicLayoutEffect23(() => {
+  useIsomorphicLayoutEffect24(() => {
     if (!layerTrack) return void 0;
     const measure3 = () => {
       const width = layerTrack.getBoundingClientRect().width;
@@ -19955,7 +20644,7 @@ function SchedulingTimeline({
     list.sort((a, b) => a - b);
     return { mounted: list, windowStart: window_.start };
   }, [virtual, rows, offsets, view, overscan, pinned, focusedRow, anchorRow]);
-  useIsomorphicLayoutEffect23(() => {
+  useIsomorphicLayoutEffect24(() => {
     const anchor = anchorRef.current;
     if (anchorKey === null || !anchor || anchor.key !== anchorKey) return;
     anchorRef.current = null;
@@ -21413,7 +22102,7 @@ function EquivalentRelationshipList({
 // src/components/RelationshipGraphLayered.tsx
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var EMPTY_IDS2 = /* @__PURE__ */ new Set();
-var useIsomorphicLayoutEffect24 = typeof document !== "undefined" ? import_react105.useLayoutEffect : import_react105.useEffect;
+var useIsomorphicLayoutEffect25 = typeof document !== "undefined" ? import_react105.useLayoutEffect : import_react105.useEffect;
 var MIN_ZOOM2 = 0.4;
 var MAX_ZOOM2 = 1.5;
 var READABLE_ZOOM = 0.75;
@@ -21873,7 +22562,7 @@ function LayeredRelationshipGraph({
       }) })
     ] });
   }, [layout, activeIds, highlightedEdgeIds, conflictedEdgeIds, dimmedNodeIds, labelPlacement, labels]);
-  useIsomorphicLayoutEffect24(() => {
+  useIsomorphicLayoutEffect25(() => {
     const svg2 = edgesRef.current;
     if (!svg2) return;
     for (const group2 of Array.from(svg2.querySelectorAll(".uix-relationship-graph__edge-label"))) {