@ai-matrx/design-system 0.47.1 → 0.47.3

package/dist/data-table/index.js

@@ -24309,7 +24309,7 @@ var init_xlsx = __esm({
         }
         prep_blob(d, 0);
         var ft = d.read_shift(1);
-        var memo = !!(ft & 136);
+        var memo2 = !!(ft & 136);
         var vfp = false, l7 = false;
         switch (ft) {
           case 2:
@@ -24320,12 +24320,12 @@ var init_xlsx = __esm({
           // dBASE III
           case 48:
             vfp = true;
-            memo = true;
+            memo2 = true;
             break;
           // VFP
           case 49:
             vfp = true;
-            memo = true;
+            memo2 = true;
             break;
           // VFP with autoincrement
           // 0x43 dBASE IV SQL table files
@@ -24474,7 +24474,7 @@ var init_xlsx = __esm({
                 }
                 break;
               case "M":
-                if (!memo) throw new Error("DBF Unexpected MEMO for type " + ft.toString(16));
+                if (!memo2) throw new Error("DBF Unexpected MEMO for type " + ft.toString(16));
                 out[R][C] = "##MEMO##" + (l7 ? parseInt(s.trim(), 10) : dd.read_shift(4));
                 break;
               case "N":
@@ -34004,6 +34004,7 @@ import {
   cloneElement as cloneElement2,
   Fragment as Fragment9,
   isValidElement as isValidElement2,
+  memo,
   useCallback as useCallback8,
   useEffect as useEffect17,
   useId as useId2,
@@ -47314,72 +47315,119 @@ function sameWindow(a, b) {
   return a.start === b.start && a.end === b.end && a.padStart === b.padStart && a.padEnd === b.padEnd && a.total === b.total && a.pinned.length === b.pinned.length;
 }
 var NO_GROUPING_VALUE = "__matrx_no_grouping__";
-function MatrxDataTableCore({
-  data: suppliedData,
-  columns,
-  tableId,
-  defaultViewSnapshot,
-  viewTabs = true,
-  relatedTableActions,
-  columnState,
-  reorderableColumns = true,
-  resizableColumns = true,
-  columnManager: controlledColumnManager,
-  getRowId,
-  searchText,
-  processLocalRows,
-  defaultSort = null,
-  isLoading: suppliedLoading = false,
-  isFetching: suppliedFetching = false,
-  query,
-  urlState,
-  toolbar,
-  hideToolbar = false,
-  hidePagination = false,
-  paginationLabelFormat,
-  filterUi,
-  detail,
-  expandedDetail,
-  window: windowConfig,
-  copy,
-  contextMenu,
-  rowCopyPlacement = "inline",
-  edit,
-  hierarchy,
-  selectedId: controlledSelectedId,
-  onSelectedIdChange,
-  windowRowId: controlledWindowRowId,
-  onWindowRowIdChange,
-  selection: selectionConfig,
-  rowActions,
-  footerRows = [],
-  rowClassName,
-  cellClassName,
-  tableStyle,
-  highlightedIndex,
-  onViewChange,
-  rowWrapper,
-  emptyState,
-  read,
-  pageSize: defaultPageSize = 25,
-  localPagination,
-  pageSizeOptions = [10, 25, 50, 100, 200, 500, 1e3, 2e3],
-  zebra = true,
-  stickyHeader = true,
-  className,
-  tableClassName,
-  mobileCards,
-  mobileCardsBreakpoint = "sm",
-  getRowHref,
-  onRowOpen,
-  density,
-  grouping,
-  virtualize,
-  coverage,
-  spreadsheet,
-  facets,
-  rowHeight: explicitRowHeight
-}) {
+function useRenderEpoch(values) {
+  const held = useRef16(null);
+  const previous = held.current;
+  if (previous !== null && previous.values.length === values.length && previous.values.every((value, i) => Object.is(value, values[i]))) {
+    return previous.epoch;
+  }
+  const next = { values, epoch: (previous?.epoch ?? 0) + 1 };
+  held.current = next;
+  return next.epoch;
+}
+var HEADER_ONLY_COLUMN_KEYS = /* @__PURE__ */ new Set([
+  "sortValue",
+  "filterValue",
+  "sortable",
+  "defaultSortDirection",
+  "filter",
+  "filterOptions",
+  "filterSingle",
+  "headerMenu",
+  "filterAllowCustom",
+  "headerClassName"
+]);
+function columnBodySignature(columns) {
+  const out = [];
+  for (const column of columns) {
+    out.push(COLUMN_SIGNATURE_START);
+    for (const [key, value] of Object.entries(column)) {
+      if (HEADER_ONLY_COLUMN_KEYS.has(key)) continue;
+      if (key === "header" && typeof value !== "string") continue;
+      out.push(key, value);
+    }
+  }
+  return out;
+}
+var COLUMN_SIGNATURE_START = /* @__PURE__ */ Symbol("column");
+function versionFacts(version2) {
+  if (version2 === void 0) return [];
+  return Array.isArray(version2) ? ["rowVersion", ...version2] : ["rowVersion", version2];
+}
+function sameBodyRow(a, b) {
+  return a.row === b.row && a.index === b.index && a.epoch === b.epoch && a.rowId === b.rowId && a.facts.length === b.facts.length && a.facts.every((fact, i) => Object.is(fact, b.facts[i]));
+}
+var MatrxTableBodyRow = memo(function MatrxTableBodyRow2({ row, index, render }) {
+  return /* @__PURE__ */ jsx47(Fragment10, { children: render(row, index) });
+}, sameBodyRow);
+function MatrxDataTableCore(coreProps) {
+  const {
+    data: suppliedData,
+    columns,
+    tableId,
+    defaultViewSnapshot,
+    viewTabs = true,
+    relatedTableActions,
+    columnState,
+    reorderableColumns = true,
+    resizableColumns = true,
+    columnManager: controlledColumnManager,
+    getRowId,
+    searchText,
+    processLocalRows,
+    defaultSort = null,
+    isLoading: suppliedLoading = false,
+    isFetching: suppliedFetching = false,
+    query,
+    urlState,
+    toolbar,
+    hideToolbar = false,
+    hidePagination = false,
+    paginationLabelFormat,
+    filterUi,
+    detail,
+    expandedDetail,
+    window: windowConfig,
+    copy,
+    contextMenu,
+    rowCopyPlacement = "inline",
+    edit,
+    hierarchy,
+    selectedId: controlledSelectedId,
+    onSelectedIdChange,
+    windowRowId: controlledWindowRowId,
+    onWindowRowIdChange,
+    selection: selectionConfig,
+    rowActions,
+    footerRows = [],
+    rowClassName,
+    rowVersion,
+    cellClassName,
+    tableStyle,
+    highlightedIndex,
+    onViewChange,
+    rowWrapper,
+    emptyState,
+    read,
+    pageSize: defaultPageSize = 25,
+    localPagination,
+    pageSizeOptions = [10, 25, 50, 100, 200, 500, 1e3, 2e3],
+    zebra = true,
+    stickyHeader = true,
+    className,
+    tableClassName,
+    mobileCards,
+    mobileCardsBreakpoint = "sm",
+    getRowHref,
+    onRowOpen,
+    density,
+    grouping,
+    virtualize,
+    coverage,
+    spreadsheet,
+    facets,
+    rowHeight: explicitRowHeight
+  } = coreProps;
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
   const committedAppendQueryKey = useRef16(appendQueryKey);
@@ -49259,6 +49307,7 @@ function MatrxDataTableCore({
       }
     } : facet
   ) : toolbar?.facets;
+  const rowLatest = useRef16(null);
   const renderRecordCell = (row, col, index) => {
     const id = getRowId(row);
     const field = col.accessorKey ? String(col.accessorKey) : columnId(col);
@@ -49274,7 +49323,7 @@ function MatrxDataTableCore({
           ...col.editOptions === void 0 ? {} : { editOptions: col.editOptions },
           display,
           dirty: Boolean(rowEdits && field in rowEdits),
-          onCommit: (next) => commitCell(id, field, next),
+          onCommit: (next) => rowLatest.current.commitCell(id, field, next),
           ...href === void 0 ? {} : { href },
           ...spreadsheetEnabled ? {
             // 🚨 THE CLICK LAW, enforced where the two paths meet. In a grid
@@ -49398,6 +49447,446 @@ function MatrxDataTableCore({
     },
     [columns, commitColumnState, commitColumnWidths, controlledQuery, intelligentSearchEnabled, intelligentSearchScopes, toolbar]
   );
+  rowLatest.current = {
+    onRowClick: (row, e) => {
+      if (rowEventTargetsInteractiveDescendant(e.target)) return;
+      if (spreadsheetEnabled && spreadsheetClickLandsOnACell(e.target)) return;
+      if (opensRowHref(e)) {
+        const href = getRowHref?.(row);
+        if (href) window.open(href, "_blank", "noopener");
+        return;
+      }
+      openRow(row);
+    },
+    onRowAuxClick: (row, e) => {
+      if (e.button !== 1 || rowEventTargetsInteractiveDescendant(e.target)) return;
+      const href = getRowHref?.(row);
+      if (href) {
+        e.preventDefault();
+        window.open(href, "_blank", "noopener");
+      }
+    },
+    toggleRowSelected,
+    toggleExpanded,
+    openDetail,
+    openWindow,
+    commitCell,
+    sheet,
+    buildRecordControls
+  };
+  const liveRecordControls = (row) => {
+    const drawn = buildRecordControls(row);
+    const live = {};
+    for (const [key, value] of Object.entries(drawn)) {
+      live[key] = typeof value === "function" ? (...args) => {
+        const now = rowLatest.current.buildRecordControls(row);
+        const handler = now[key];
+        return typeof handler === "function" ? handler(...args) : void 0;
+      } : value;
+    }
+    return live;
+  };
+  const rowEpoch = useRenderEpoch([
+    // WHAT A BODY ROW READS FROM THIS TABLE'S PROPS — and nothing it does not, so a host that
+    // rebuilds its toolbar, its query or its empty state on every render redraws no row. Handlers
+    // are absent on purpose: they run through `rowLatest`. Columns count by what a body cell
+    // draws (`columnBodySignature`), never by the header's menus and filters.
+    ...columnBodySignature(visibleColumns),
+    ...renderedColumns.map(columnId),
+    getRowId,
+    selection !== void 0 && selection !== null,
+    selection?.isRowSelectable,
+    selectionNoun,
+    windowConfig?.openOnRowClick,
+    expandedDetail,
+    hierarchy,
+    cellClassName,
+    rowClassName,
+    rowWrapper,
+    rowActions,
+    tableStyle,
+    zebra,
+    resizableColumns,
+    Boolean(onRowOpen),
+    edit?.enabled,
+    edit?.autoSave,
+    Boolean(edit?.onSave),
+    copy === void 0,
+    explicitRowHeight,
+    // …and the values of this component the row body reads.
+    virtualizeActive,
+    virtualRowHeight,
+    // Widths and the frozen band by VALUE: both are re-derived whenever the host hands a new
+    // columns array, with the same numbers in them.
+    ...Object.entries(effectiveColumnWidths).flat(),
+    ...Object.entries(frozenColumns.offsets).flat(),
+    frozenColumns.selectionOffset,
+    effectiveColumnWindow?.start,
+    effectiveColumnWindow?.end,
+    columnWindowWidth,
+    frozenEdgeId,
+    fixedTableGeometry,
+    columnSpacers?.start,
+    columnSpacers?.end,
+    columnDragPreview,
+    spreadsheetEnabled,
+    editEnabled,
+    detailEnabled,
+    windowEnabled,
+    opensWindowOnRowClick,
+    showActionsCol,
+    showInlineRowCopy,
+    showRowCopy,
+    rowCopyInMenu,
+    effectiveCopy,
+    tableCopySourceNamespace,
+    renderedColSpan,
+    hierarchyIndex,
+    hierarchyBlockedIds,
+    draggedRowId
+  ]);
+  const rowFactsFor = (row, id, index) => {
+    const pending = edits[id];
+    let sheetFlags = "";
+    if (spreadsheetEnabled) {
+      for (const col of renderedColumns) {
+        const cell = sheet.cellProps(id, columnId(col));
+        sheetFlags += (cell["data-matrx-cell-selected"] ? "s" : "-") + (cell["data-matrx-cell-active"] ? "a" : "-") + (cell["data-matrx-cell-fill-preview"] ? "f" : "-") + (sheet.isFillHandleCell(id, columnId(col)) ? "h" : "-");
+      }
+    }
+    return [
+      selectedId === id,
+      selectedIdSet.has(getSelectionId(row)),
+      pending,
+      highlightedIndex === index,
+      editRequest?.rowId === id ? editRequest : null,
+      Boolean(pending && edit?.onSave && !edit.autoSave && !saving),
+      isRowExpanded(row),
+      sheetFlags,
+      ...versionFacts(rowVersion?.(row))
+    ];
+  };
+  const renderRecordRow = (row, index) => {
+    const id = getRowId(row);
+    const isSelected = selectedId === id;
+    const rowEdits = edits[id];
+    const displayRow = applyRowEdits(row, rowEdits);
+    const controls = liveRecordControls(displayRow);
+    const isChecked = selectedIdSet.has(getSelectionId(row));
+    const background = rowBackground({
+      tint: rowTintColor(row, id),
+      highlighted: highlightedIndex === index,
+      selected: isSelected,
+      checked: isChecked,
+      zebraOdd: zebra && index % 2 === 1,
+      hoverable: detailEnabled || Boolean(onRowOpen) || canExpandRow(row)
+    });
+    const canHoverFrozenCell = background.frozenHover;
+    const frozenRowBackgroundClass = background.frozen;
+    const rowNode = /* @__PURE__ */ jsxs37(
+      "tr",
+      {
+        "data-row-id": id,
+        style: explicitRowHeight !== void 0 ? { height: `${explicitRowHeight}px` } : virtualizeActive ? { height: `${virtualRowHeight}px` } : void 0,
+        "data-state": isSelected ? "selected" : void 0,
+        onClick: (e) => rowLatest.current.onRowClick(row, e),
+        onAuxClick: (e) => rowLatest.current.onRowAuxClick(row, e),
+        className: cn(
+          // Keep the mobile row opaque while the complete row scrolls
+          // horizontally. The translucent zebra/hover tints remain
+          // desktop-only so densely layered mobile content stays crisp.
+          "group/matrx-row border-b border-border/60 bg-card transition-colors",
+          (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer",
+          rowClassName?.(row, index),
+          draggedRowId === id && "opacity-40",
+          // LAST, and decided once: tint, then highlight / open / ticked, then
+          // the zebra stripe (./row-background.ts). Under a tint no stripe is
+          // emitted at all, so no `sm:` class can win the cascade over it.
+          background.row
+        ),
+        children: [
+          selection ? /* @__PURE__ */ jsx47(
+            "td",
+            {
+              className: cn(
+                "px-2 py-1.5 align-middle lg:py-0.5",
+                // When a data column is frozen the checkbox
+                // column has to freeze with it, or the first
+                // frozen column slides over the checkboxes.
+                frozenColumns.selectionOffset !== null && cn(
+                  "sm:sticky sm:left-0 sm:z-20",
+                  frozenRowBackgroundClass,
+                  canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]"
+                )
+              ),
+              style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
+              onClick: (e) => e.stopPropagation(),
+              children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ jsx47(
+                "div",
+                {
+                  "data-matrx-table-selection-target": true,
+                  onClick: (event) => {
+                    if (event.target === event.currentTarget) {
+                      event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx47(
+                    Checkbox,
+                    {
+                      className: CHECKBOX_TAP_AREA,
+                      checked: isChecked,
+                      "aria-label": `Select this ${selectionNoun}`,
+                      onClick: (e) => rowLatest.current.toggleRowSelected(index, e.shiftKey)
+                    }
+                  )
+                }
+              ) : null
+            }
+          ) : null,
+          columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx47(
+            "td",
+            {
+              "aria-hidden": "true",
+              "data-matrx-table-column-spacer": "start",
+              className: "border-0 p-0",
+              style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
+            },
+            "matrx-column-spacer-start"
+          ) : null,
+          renderedColumns.map((col, colIdx) => {
+            const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
+            const sheetCell = spreadsheetEnabled ? sheet.cellProps(id, columnId(col)) : null;
+            const carriesFillHandle = sheetCell !== null && sheet.isFillHandleCell(id, columnId(col));
+            const frozen = frozenColumns.offsets[columnId(col)] !== void 0;
+            const frozenCellTint = cellTintColor(
+              row,
+              id,
+              columnId(col)
+            );
+            return /* @__PURE__ */ jsxs37(
+              "td",
+              {
+                "data-matrx-table-column-id": columnId(col),
+                "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
+                ...sheetCell ? {
+                  "data-matrx-cell-row": sheetCell["data-matrx-cell-row"],
+                  "data-matrx-cell-col": sheetCell["data-matrx-cell-col"],
+                  ...sheetCell["data-matrx-cell-selected"] ? { "data-matrx-cell-selected": "true" } : {},
+                  ...sheetCell["data-matrx-cell-active"] ? { "data-matrx-cell-active": "true" } : {},
+                  ...sheetCell["data-matrx-cell-fill-preview"] ? { "data-matrx-cell-fill-preview": "true" } : {},
+                  // Handlers read the grid as it is NOW: a row the memo kept must
+                  // never act on the selection it was drawn with.
+                  onMouseDown: (event) => rowLatest.current.sheet.cellProps(id, columnId(col)).onMouseDown(event),
+                  onMouseEnter: () => rowLatest.current.sheet.cellProps(id, columnId(col)).onMouseEnter()
+                } : {},
+                className: cn(
+                  "py-1.5 align-middle lg:py-0.5",
+                  sheetCell?.["data-matrx-cell-selected"] && "bg-primary/10",
+                  sheetCell?.["data-matrx-cell-fill-preview"] && "ring-1 ring-inset ring-primary/40",
+                  sheetCell?.["data-matrx-cell-active"] && "relative z-10 ring-2 ring-inset ring-primary",
+                  carriesFillHandle && "relative",
+                  col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
+                  // nowrap (NOT truncate — truncate clips the cell and
+                  // defeats w-max, killing the horizontal scroll).
+                  "max-sm:whitespace-nowrap",
+                  col.mobileHidden && "max-sm:hidden",
+                  ((resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width) !== void 0 || resizableColumns && col.resizable !== false) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
+                  col.className,
+                  isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
+                  alignForFormat(col) === "center" && "text-center",
+                  alignForFormat(col) === "right" && "text-right",
+                  frozen && FROZEN_CELL_CLASS,
+                  frozen && frozenRowBackgroundClass,
+                  frozen && sheetCell?.["data-matrx-cell-selected"] && "sm:bg-[color-mix(in_oklab,var(--color-primary)_10%,var(--color-card))]",
+                  frozen && canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]",
+                  frozenEdgeId === columnId(col) && FROZEN_EDGE_CLASS,
+                  // A cell tint paints OVER the row tint beneath
+                  // it, and the consumer's own hook comes last so
+                  // it can always win.
+                  cellTintClass(row, id, columnId(col)),
+                  frozen && frozenCellTint && FROZEN_CELL_TINT_CLASS[frozenCellTint],
+                  cellClassName?.(row, columnId(col), index)
+                ),
+                style: {
+                  ...columnWidthVar(
+                    resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width,
+                    windowedWidthFor(columnId(col), col.width),
+                    columnId(col),
+                    resizableColumns && col.resizable !== false
+                  ),
+                  ...frozenStyle(columnId(col))
+                },
+                children: [
+                  /* @__PURE__ */ jsxs37(
+                    "div",
+                    {
+                      className: cn(
+                        colIdx === 0 && (hierarchy || canExpandRow(row)) && "flex min-w-0 items-center"
+                      ),
+                      children: [
+                        colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx47(
+                          HierarchyDragHandle,
+                          {
+                            id,
+                            label: hierarchy.itemLabel?.(row) ?? "row",
+                            disabled: !(hierarchy.canReparent?.(row) ?? true)
+                          }
+                        ) : null,
+                        colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                          /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon",
+                              "data-matrx-table-expand-toggle": true,
+                              className: "mr-1 h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground [&_svg]:size-4",
+                              "aria-label": isRowExpanded(row) ? "Collapse row details" : "Expand row details",
+                              "aria-expanded": isRowExpanded(row),
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                rowLatest.current.toggleExpanded(row);
+                              },
+                              onKeyDown: (event) => {
+                                if (event.key !== "Enter" && event.key !== " ") return;
+                                event.preventDefault();
+                                event.stopPropagation();
+                                rowLatest.current.toggleExpanded(row);
+                              },
+                              children: /* @__PURE__ */ jsx47(
+                                ChevronRight,
+                                {
+                                  className: cn(
+                                    "transition-transform",
+                                    isRowExpanded(row) && "rotate-90"
+                                  )
+                                }
+                              )
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx47(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
+                        ] }) : null,
+                        /* @__PURE__ */ jsx47(
+                          "div",
+                          {
+                            "data-matrx-cell-content": true,
+                            className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_.truncate]:whitespace-nowrap sm:[&_[data-slot=badge]]:whitespace-nowrap sm:[&_[data-slot=badge]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal] [&_[data-matrx-cell-fill]]:!w-full [&_[data-matrx-cell-fill]]:!min-w-0 [&_[data-matrx-cell-fill]]:!max-w-full sm:[&_[data-matrx-cell-fill]]:!w-full sm:[&_[data-matrx-cell-fill]]:!min-w-0 sm:[&_[data-matrx-cell-fill]]:!max-w-full",
+                            children: renderRecordCell(row, col, index)
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  carriesFillHandle ? /* @__PURE__ */ jsx47(
+                    "button",
+                    {
+                      type: "button",
+                      "data-matrx-table-fill-handle": true,
+                      "aria-label": "Drag to fill the cells below or beside this selection",
+                      onMouseDown: (event) => rowLatest.current.sheet.startFillDrag(event),
+                      className: "absolute -bottom-[3px] -right-[3px] z-20 h-2 w-2 cursor-crosshair rounded-[1px] border border-background bg-primary"
+                    }
+                  ) : null
+                ]
+              },
+              columnId(col)
+            );
+          }),
+          columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx47(
+            "td",
+            {
+              "aria-hidden": "true",
+              "data-matrx-table-column-spacer": "end",
+              className: "border-0 p-0",
+              style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
+            },
+            "matrx-column-spacer-end"
+          ) : null,
+          showActionsCol && /* @__PURE__ */ jsx47(
+            "td",
+            {
+              "data-matrx-table-row-action-cell": true,
+              className: "text-right align-middle",
+              style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
+              children: /* @__PURE__ */ jsxs37(
+                "div",
+                {
+                  "data-matrx-table-row-actions": true,
+                  className: "inline-flex items-center justify-end gap-0",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ jsx47(
+                      TableRowCopyControl,
+                      {
+                        size: "toolbar",
+                        copy: effectiveCopy,
+                        row: displayRow,
+                        sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
+                        ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                      }
+                    ) : null,
+                    renderRowActions(displayRow, controls),
+                    windowEnabled ? /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                      /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "icon",
+                          "data-matrx-table-icon-action": true,
+                          className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-5",
+                          "aria-label": windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            if (windowConfig?.openOnRowClick === true) rowLatest.current.openDetail(row);
+                            else rowLatest.current.openWindow(row);
+                          },
+                          children: opensWindowOnRowClick ? /* @__PURE__ */ jsx47(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx47(PanelRight, { className: "h-5 w-5" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx47(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
+                    ] }) : null
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      },
+      id
+    );
+    const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
+    const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ jsx47(
+      "tr",
+      {
+        "data-matrx-table-expanded-detail": id,
+        className: cn("bg-muted/20", expandedDetail.className),
+        children: /* @__PURE__ */ jsx47(
+          "td",
+          {
+            colSpan: renderedColSpan,
+            className: "p-4",
+            children: expandedDetail.render(displayRow, controls)
+          }
+        )
+      },
+      `${id}:expanded-detail`
+    ) : null;
+    return hierarchy ? /* @__PURE__ */ jsxs37(Fragment9, { children: [
+      /* @__PURE__ */ jsx47(
+        HierarchyDroppableRow,
+        {
+          id,
+          disabled: !canDropOn(row),
+          children: wrappedRow
+        }
+      ),
+      inlineDetail
+    ] }, id) : /* @__PURE__ */ jsxs37(Fragment9, { children: [
+      wrappedRow,
+      inlineDetail
+    ] }, id);
+  };
   return /* @__PURE__ */ jsx47(TooltipProvider, { children: /* @__PURE__ */ jsx47(
     ContextMenuBoundary,
     {
@@ -50295,338 +50784,18 @@ function MatrxDataTableCore({
                                       const row = entry.row;
                                       const index = entry.index;
                                       const id = getRowId(row);
-                                      const isSelected = selectedId === id;
-                                      const rowEdits = edits[id];
-                                      const displayRow = applyRowEdits(row, rowEdits);
-                                      const controls = buildRecordControls(displayRow);
-                                      const isChecked = selectedIdSet.has(getSelectionId(row));
-                                      const background = rowBackground({
-                                        tint: rowTintColor(row, id),
-                                        highlighted: highlightedIndex === index,
-                                        selected: isSelected,
-                                        checked: isChecked,
-                                        zebraOdd: zebra && index % 2 === 1,
-                                        hoverable: detailEnabled || Boolean(onRowOpen) || canExpandRow(row)
-                                      });
-                                      const canHoverFrozenCell = background.frozenHover;
-                                      const frozenRowBackgroundClass = background.frozen;
-                                      const rowNode = /* @__PURE__ */ jsxs37(
-                                        "tr",
+                                      return /* @__PURE__ */ jsx47(
+                                        MatrxTableBodyRow,
                                         {
-                                          "data-row-id": id,
-                                          style: explicitRowHeight !== void 0 ? { height: `${explicitRowHeight}px` } : virtualizeActive ? { height: `${virtualRowHeight}px` } : void 0,
-                                          "data-state": isSelected ? "selected" : void 0,
-                                          onClick: (e) => {
-                                            if (rowEventTargetsInteractiveDescendant(e.target)) return;
-                                            if (spreadsheetEnabled && spreadsheetClickLandsOnACell(e.target)) return;
-                                            if (opensRowHref(e)) {
-                                              const href = getRowHref?.(row);
-                                              if (href) window.open(href, "_blank", "noopener");
-                                              return;
-                                            }
-                                            openRow(row);
-                                          },
-                                          onAuxClick: (e) => {
-                                            if (e.button !== 1 || rowEventTargetsInteractiveDescendant(e.target)) return;
-                                            const href = getRowHref?.(row);
-                                            if (href) {
-                                              e.preventDefault();
-                                              window.open(href, "_blank", "noopener");
-                                            }
-                                          },
-                                          className: cn(
-                                            // Keep the mobile row opaque while the complete row scrolls
-                                            // horizontally. The translucent zebra/hover tints remain
-                                            // desktop-only so densely layered mobile content stays crisp.
-                                            "group/matrx-row border-b border-border/60 bg-card transition-colors",
-                                            (detailEnabled || Boolean(onRowOpen) || canExpandRow(row)) && "cursor-pointer",
-                                            rowClassName?.(row, index),
-                                            draggedRowId === id && "opacity-40",
-                                            // LAST, and decided once: tint, then highlight / open / ticked, then
-                                            // the zebra stripe (./row-background.ts). Under a tint no stripe is
-                                            // emitted at all, so no `sm:` class can win the cascade over it.
-                                            background.row
-                                          ),
-                                          children: [
-                                            selection ? /* @__PURE__ */ jsx47(
-                                              "td",
-                                              {
-                                                className: cn(
-                                                  "px-2 py-1.5 align-middle lg:py-0.5",
-                                                  // When a data column is frozen the checkbox
-                                                  // column has to freeze with it, or the first
-                                                  // frozen column slides over the checkboxes.
-                                                  frozenColumns.selectionOffset !== null && cn(
-                                                    "sm:sticky sm:left-0 sm:z-20",
-                                                    frozenRowBackgroundClass,
-                                                    canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]"
-                                                  )
-                                                ),
-                                                style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
-                                                onClick: (e) => e.stopPropagation(),
-                                                children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ jsx47(
-                                                  "div",
-                                                  {
-                                                    "data-matrx-table-selection-target": true,
-                                                    onClick: (event) => {
-                                                      if (event.target === event.currentTarget) {
-                                                        event.currentTarget.querySelector('[role="checkbox"]')?.click();
-                                                      }
-                                                    },
-                                                    children: /* @__PURE__ */ jsx47(
-                                                      Checkbox,
-                                                      {
-                                                        className: CHECKBOX_TAP_AREA,
-                                                        checked: isChecked,
-                                                        "aria-label": `Select this ${selectionNoun}`,
-                                                        onClick: (e) => toggleRowSelected(index, e.shiftKey)
-                                                      }
-                                                    )
-                                                  }
-                                                ) : null
-                                              }
-                                            ) : null,
-                                            columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx47(
-                                              "td",
-                                              {
-                                                "aria-hidden": "true",
-                                                "data-matrx-table-column-spacer": "start",
-                                                className: "border-0 p-0",
-                                                style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
-                                              },
-                                              "matrx-column-spacer-start"
-                                            ) : null,
-                                            renderedColumns.map((col, colIdx) => {
-                                              const isColumnDragShadow = columnDragPreview?.draggedId === columnId(col) && columnDragPreview.targetId !== null;
-                                              const sheetCell = spreadsheetEnabled ? sheet.cellProps(id, columnId(col)) : null;
-                                              const carriesFillHandle = sheetCell !== null && sheet.isFillHandleCell(id, columnId(col));
-                                              const frozen = frozenColumns.offsets[columnId(col)] !== void 0;
-                                              const frozenCellTint = cellTintColor(
-                                                row,
-                                                id,
-                                                columnId(col)
-                                              );
-                                              return /* @__PURE__ */ jsxs37(
-                                                "td",
-                                                {
-                                                  "data-matrx-table-column-id": columnId(col),
-                                                  "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
-                                                  ...sheetCell ? {
-                                                    "data-matrx-cell-row": sheetCell["data-matrx-cell-row"],
-                                                    "data-matrx-cell-col": sheetCell["data-matrx-cell-col"],
-                                                    ...sheetCell["data-matrx-cell-selected"] ? { "data-matrx-cell-selected": "true" } : {},
-                                                    ...sheetCell["data-matrx-cell-active"] ? { "data-matrx-cell-active": "true" } : {},
-                                                    ...sheetCell["data-matrx-cell-fill-preview"] ? { "data-matrx-cell-fill-preview": "true" } : {},
-                                                    onMouseDown: sheetCell.onMouseDown,
-                                                    onMouseEnter: sheetCell.onMouseEnter
-                                                  } : {},
-                                                  className: cn(
-                                                    "py-1.5 align-middle lg:py-0.5",
-                                                    sheetCell?.["data-matrx-cell-selected"] && "bg-primary/10",
-                                                    sheetCell?.["data-matrx-cell-fill-preview"] && "ring-1 ring-inset ring-primary/40",
-                                                    sheetCell?.["data-matrx-cell-active"] && "relative z-10 ring-2 ring-inset ring-primary",
-                                                    carriesFillHandle && "relative",
-                                                    col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
-                                                    // nowrap (NOT truncate — truncate clips the cell and
-                                                    // defeats w-max, killing the horizontal scroll).
-                                                    "max-sm:whitespace-nowrap",
-                                                    col.mobileHidden && "max-sm:hidden",
-                                                    ((resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width) !== void 0 || resizableColumns && col.resizable !== false) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)] sm:max-w-[var(--matrx-col-w)]",
-                                                    col.className,
-                                                    isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
-                                                    alignForFormat(col) === "center" && "text-center",
-                                                    alignForFormat(col) === "right" && "text-right",
-                                                    frozen && FROZEN_CELL_CLASS,
-                                                    frozen && frozenRowBackgroundClass,
-                                                    frozen && sheetCell?.["data-matrx-cell-selected"] && "sm:bg-[color-mix(in_oklab,var(--color-primary)_10%,var(--color-card))]",
-                                                    frozen && canHoverFrozenCell && "sm:group-hover/matrx-row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]",
-                                                    frozenEdgeId === columnId(col) && FROZEN_EDGE_CLASS,
-                                                    // A cell tint paints OVER the row tint beneath
-                                                    // it, and the consumer's own hook comes last so
-                                                    // it can always win.
-                                                    cellTintClass(row, id, columnId(col)),
-                                                    frozen && frozenCellTint && FROZEN_CELL_TINT_CLASS[frozenCellTint],
-                                                    cellClassName?.(row, columnId(col), index)
-                                                  ),
-                                                  style: {
-                                                    ...columnWidthVar(
-                                                      resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width,
-                                                      windowedWidthFor(columnId(col), col.width),
-                                                      columnId(col),
-                                                      resizableColumns && col.resizable !== false
-                                                    ),
-                                                    ...frozenStyle(columnId(col))
-                                                  },
-                                                  children: [
-                                                    /* @__PURE__ */ jsxs37(
-                                                      "div",
-                                                      {
-                                                        className: cn(
-                                                          colIdx === 0 && (hierarchy || canExpandRow(row)) && "flex min-w-0 items-center"
-                                                        ),
-                                                        children: [
-                                                          colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx47(
-                                                            HierarchyDragHandle,
-                                                            {
-                                                              id,
-                                                              label: hierarchy.itemLabel?.(row) ?? "row",
-                                                              disabled: !(hierarchy.canReparent?.(row) ?? true)
-                                                            }
-                                                          ) : null,
-                                                          colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ jsxs37(Tooltip, { children: [
-                                                            /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
-                                                              Button,
-                                                              {
-                                                                type: "button",
-                                                                variant: "ghost",
-                                                                size: "icon",
-                                                                "data-matrx-table-expand-toggle": true,
-                                                                className: "mr-1 h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground [&_svg]:size-4",
-                                                                "aria-label": isRowExpanded(row) ? "Collapse row details" : "Expand row details",
-                                                                "aria-expanded": isRowExpanded(row),
-                                                                onClick: (event) => {
-                                                                  event.stopPropagation();
-                                                                  toggleExpanded(row);
-                                                                },
-                                                                onKeyDown: (event) => {
-                                                                  if (event.key !== "Enter" && event.key !== " ") return;
-                                                                  event.preventDefault();
-                                                                  event.stopPropagation();
-                                                                  toggleExpanded(row);
-                                                                },
-                                                                children: /* @__PURE__ */ jsx47(
-                                                                  ChevronRight,
-                                                                  {
-                                                                    className: cn(
-                                                                      "transition-transform",
-                                                                      isRowExpanded(row) && "rotate-90"
-                                                                    )
-                                                                  }
-                                                                )
-                                                              }
-                                                            ) }),
-                                                            /* @__PURE__ */ jsx47(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
-                                                          ] }) : null,
-                                                          /* @__PURE__ */ jsx47(
-                                                            "div",
-                                                            {
-                                                              "data-matrx-cell-content": true,
-                                                              className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_.truncate]:whitespace-nowrap sm:[&_[data-slot=badge]]:whitespace-nowrap sm:[&_[data-slot=badge]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal] [&_[data-matrx-cell-fill]]:!w-full [&_[data-matrx-cell-fill]]:!min-w-0 [&_[data-matrx-cell-fill]]:!max-w-full sm:[&_[data-matrx-cell-fill]]:!w-full sm:[&_[data-matrx-cell-fill]]:!min-w-0 sm:[&_[data-matrx-cell-fill]]:!max-w-full",
-                                                              children: renderRecordCell(row, col, index)
-                                                            }
-                                                          )
-                                                        ]
-                                                      }
-                                                    ),
-                                                    carriesFillHandle ? /* @__PURE__ */ jsx47(
-                                                      "button",
-                                                      {
-                                                        type: "button",
-                                                        "data-matrx-table-fill-handle": true,
-                                                        "aria-label": "Drag to fill the cells below or beside this selection",
-                                                        onMouseDown: sheet.startFillDrag,
-                                                        className: "absolute -bottom-[3px] -right-[3px] z-20 h-2 w-2 cursor-crosshair rounded-[1px] border border-background bg-primary"
-                                                      }
-                                                    ) : null
-                                                  ]
-                                                },
-                                                columnId(col)
-                                              );
-                                            }),
-                                            columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx47(
-                                              "td",
-                                              {
-                                                "aria-hidden": "true",
-                                                "data-matrx-table-column-spacer": "end",
-                                                className: "border-0 p-0",
-                                                style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
-                                              },
-                                              "matrx-column-spacer-end"
-                                            ) : null,
-                                            showActionsCol && /* @__PURE__ */ jsx47(
-                                              "td",
-                                              {
-                                                "data-matrx-table-row-action-cell": true,
-                                                className: "text-right align-middle",
-                                                style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                                children: /* @__PURE__ */ jsxs37(
-                                                  "div",
-                                                  {
-                                                    "data-matrx-table-row-actions": true,
-                                                    className: "inline-flex items-center justify-end gap-0",
-                                                    onClick: (e) => e.stopPropagation(),
-                                                    children: [
-                                                      showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ jsx47(
-                                                        TableRowCopyControl,
-                                                        {
-                                                          size: "toolbar",
-                                                          copy: effectiveCopy,
-                                                          row: displayRow,
-                                                          sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
-                                                          ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
-                                                        }
-                                                      ) : null,
-                                                      renderRowActions(displayRow, controls),
-                                                      windowEnabled ? /* @__PURE__ */ jsxs37(Tooltip, { children: [
-                                                        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
-                                                          Button,
-                                                          {
-                                                            type: "button",
-                                                            variant: "ghost",
-                                                            size: "icon",
-                                                            "data-matrx-table-icon-action": true,
-                                                            className: "h-11 w-11 text-muted-foreground hover:text-foreground [&_svg]:size-5",
-                                                            "aria-label": windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window",
-                                                            onClick: (e) => {
-                                                              e.stopPropagation();
-                                                              if (windowConfig?.openOnRowClick === true) openDetail(row);
-                                                              else openWindow(row);
-                                                            },
-                                                            children: opensWindowOnRowClick ? /* @__PURE__ */ jsx47(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx47(PanelRight, { className: "h-5 w-5" })
-                                                          }
-                                                        ) }),
-                                                        /* @__PURE__ */ jsx47(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
-                                                      ] }) : null
-                                                    ]
-                                                  }
-                                                )
-                                              }
-                                            )
-                                          ]
+                                          rowId: id,
+                                          row,
+                                          index,
+                                          epoch: rowEpoch,
+                                          facts: rowFactsFor(row, id, index),
+                                          render: renderRecordRow
                                         },
                                         id
                                       );
-                                      const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                                      const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ jsx47(
-                                        "tr",
-                                        {
-                                          "data-matrx-table-expanded-detail": id,
-                                          className: cn("bg-muted/20", expandedDetail.className),
-                                          children: /* @__PURE__ */ jsx47(
-                                            "td",
-                                            {
-                                              colSpan: renderedColSpan,
-                                              className: "p-4",
-                                              children: expandedDetail.render(displayRow, controls)
-                                            }
-                                          )
-                                        },
-                                        `${id}:expanded-detail`
-                                      ) : null;
-                                      return hierarchy ? /* @__PURE__ */ jsxs37(Fragment9, { children: [
-                                        /* @__PURE__ */ jsx47(
-                                          HierarchyDroppableRow,
-                                          {
-                                            id,
-                                            disabled: !canDropOn(row),
-                                            children: wrappedRow
-                                          }
-                                        ),
-                                        inlineDetail
-                                      ] }, id) : /* @__PURE__ */ jsxs37(Fragment9, { children: [
-                                        wrappedRow,
-                                        inlineDetail
-                                      ] }, id);
                                     }),
                                     appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsx47("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ jsx47(
                                       "td",