@ai-matrx/design-system 0.40.0 → 0.42.0

package/dist/data-table/index.js

@@ -6187,6 +6187,52 @@ function markerCopy(marker) {
 
 // src/data-table/ColumnHeaderCell.tsx
 import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function HeaderMenuItems({
+  items,
+  MenuIcon,
+  onDone,
+  depth = 0
+}) {
+  const [openSubmenu, setOpenSubmenu] = useState14(null);
+  return /* @__PURE__ */ jsx31("div", { className: cn("flex flex-col gap-0.5", depth > 0 && "ml-3 border-l border-border pl-1"), role: "group", children: items.map((item) => {
+    const disabled = Boolean(item.disabledReason);
+    const hasSubmenu = Boolean(item.submenu && item.submenu.length > 0);
+    return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs22(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          disabled,
+          "aria-disabled": disabled || void 0,
+          ...hasSubmenu ? { "aria-expanded": openSubmenu === item.id } : {},
+          "data-matrx-header-menu-item": item.id,
+          className: cn(
+            "h-8 justify-start gap-2 px-2 text-xs font-normal",
+            item.destructive && "text-destructive hover:text-destructive"
+          ),
+          onClick: () => {
+            if (disabled) return;
+            if (hasSubmenu) {
+              setOpenSubmenu((current) => current === item.id ? null : item.id);
+              return;
+            }
+            onDone();
+            item.onSelect?.();
+          },
+          children: [
+            item.icon && MenuIcon ? /* @__PURE__ */ jsx31(MenuIcon, { name: item.icon, className: "h-3.5 w-3.5" }) : null,
+            /* @__PURE__ */ jsx31("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
+            item.shortcut ? /* @__PURE__ */ jsx31("span", { className: "ml-3 text-[10px] text-muted-foreground", children: item.shortcut }) : null
+          ]
+        }
+      ),
+      disabled ? /* @__PURE__ */ jsx31("span", { className: "px-2 pb-1 text-[11px] leading-tight text-muted-foreground", children: item.disabledReason }) : null,
+      hasSubmenu && openSubmenu === item.id ? /* @__PURE__ */ jsx31(HeaderMenuItems, { items: item.submenu, MenuIcon, onDone, depth: depth + 1 }) : null
+    ] }, item.id);
+  }) });
+}
 var HeaderButton = forwardRef12(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
   const descriptions = [tooltipDescription, dragDescription].filter((value) => Boolean(value)).join(" ");
   return /* @__PURE__ */ jsx31(
@@ -6228,8 +6274,11 @@ function ColumnHeaderCell({
   facetsLoading = false,
   facetsError,
   onFilterOpen,
-  reorderColumn
+  reorderColumn,
+  menuItems,
+  MenuIcon
 }) {
+  const hasMenuItems = Boolean(menuItems && menuItems.length > 0);
   const reorderEnabled = reorderColumn !== void 0;
   const { attributes: reorderAttributes, listeners: reorderListeners, setNodeRef } = useDraggable(
     reorderColumn ? {
@@ -6286,7 +6335,7 @@ function ColumnHeaderCell({
   };
   const markerLabels = marker ? markerCopy(marker) : void 0;
   const accessibleLabel = markerLabels?.label ?? labelText;
-  const menuLabel = filterKind ? accessibleLabel ? `Sort or filter ${accessibleLabel}` : "Sort or filter column" : accessibleLabel ? `Sort ${accessibleLabel}` : "Sort column";
+  const menuLabel = filterKind ? accessibleLabel ? `Sort or filter ${accessibleLabel}` : "Sort or filter column" : sortable ? accessibleLabel ? `Sort ${accessibleLabel}` : "Sort column" : accessibleLabel ? `${accessibleLabel} column options` : "Column options";
   const menuContent = /* @__PURE__ */ jsxs22(
     PopoverContent,
     {
@@ -6412,12 +6461,20 @@ function ColumnHeaderCell({
             filterShowCancel ? /* @__PURE__ */ jsx31(Button, { type: "button", variant: "ghost", size: "sm", onClick: cancelFilter, children: "Cancel" }) : null,
             /* @__PURE__ */ jsx31(Button, { type: "button", size: "sm", onClick: applyFilter, children: filterApplyLabel ?? "Apply" })
           ] })
-        ] }) : null
+        ] }) : null,
+        hasMenuItems ? /* @__PURE__ */ jsx31(
+          "div",
+          {
+            className: cn((sortable || filterKind) && "mt-2 border-t border-border pt-2"),
+            "data-matrx-header-menu": "consumer",
+            children: /* @__PURE__ */ jsx31(HeaderMenuItems, { items: menuItems, MenuIcon, onDone: () => setFilterOpen(false) })
+          }
+        ) : null
       ]
     }
   );
   if (compact) {
-    if (!sortable && !filterKind) {
+    if (!sortable && !filterKind && !hasMenuItems) {
       if (!reorderEnabled) {
         return /* @__PURE__ */ jsx31("div", { className: cn("flex items-center justify-center", className), children: label });
       }
@@ -6538,7 +6595,7 @@ function ColumnHeaderCell({
             "."
           ] })
         ] }) : /* @__PURE__ */ jsx31("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
-        filterKind || sortable ? /* @__PURE__ */ jsxs22("div", { className: "inline-flex items-center", children: [
+        filterKind || sortable || hasMenuItems ? /* @__PURE__ */ jsxs22("div", { className: "inline-flex items-center", children: [
           /* @__PURE__ */ jsxs22(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
             /* @__PURE__ */ jsxs22(Tooltip, { children: [
               /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(
@@ -6553,7 +6610,7 @@ function ColumnHeaderCell({
                     "rounded p-0.5 transition-colors",
                     filterActive ? "text-primary hover:text-primary/80" : "text-muted-foreground/40 hover:text-muted-foreground"
                   ),
-                  children: filterKind ? /* @__PURE__ */ jsx31(ListFilter, { className: cn("h-3 w-3", filterActive && "fill-primary/20") }) : /* @__PURE__ */ jsx31(ArrowUpDown, { className: "h-3 w-3" })
+                  children: filterKind ? /* @__PURE__ */ jsx31(ListFilter, { className: cn("h-3 w-3", filterActive && "fill-primary/20") }) : sortable ? /* @__PURE__ */ jsx31(ArrowUpDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx31(ChevronDown, { className: "h-3 w-3" })
                 }
               ) }) }),
               /* @__PURE__ */ jsx31(TooltipContent, { children: menuLabel })
@@ -8449,6 +8506,7 @@ function camePastAPortalIntoTheContainer(target) {
   if (!element) return false;
   return element.closest('[data-matrx-table-spreadsheet="true"]') === null;
 }
+var READ_ONLY_REASON = "This table is view-only \u2014 you can select and copy, but not change cells.";
 function useSpreadsheetGrid(options) {
   const [range, setRange] = useState16(null);
   const [fillTarget, setFillTarget] = useState16(null);
@@ -8515,10 +8573,18 @@ function useSpreadsheetGrid(options) {
         }));
         setStack((previous) => pushUndo(previous, undoEntryFor(before, patches, label)));
       }
+      if (!current.onPatch) return;
       await current.onPatch(patches, intent);
     },
     []
   );
+  const refuseWrite = useCallback7(() => {
+    const current = optionsRef.current;
+    if (!current) return true;
+    if (!current.readOnly && current.onPatch) return false;
+    current.notify?.(current.readOnlyReason ?? READ_ONLY_REASON);
+    return true;
+  }, []);
   const readValueAt = useCallback7((rowIndex, columnIndex) => {
     const current = optionsRef.current;
     const rowId = current?.rowIds[rowIndex];
@@ -8552,6 +8618,7 @@ function useSpreadsheetGrid(options) {
     []
   );
   const doFillDown = useCallback7(async () => {
+    if (refuseWrite()) return;
     const base = fillRequestBase();
     if (!base || !bounds) return;
     const result = fillDown({
@@ -8561,8 +8628,9 @@ function useSpreadsheetGrid(options) {
     const screened = screenPatches(result.patches);
     await applyPatches(screened.accepted, "fill-down", "Filled down");
     announceSkips([...result.skipped, ...screened.refusals], result.summary);
-  }, [fillRequestBase, bounds, applyPatches, announceSkips, screenPatches]);
+  }, [fillRequestBase, bounds, applyPatches, announceSkips, screenPatches, refuseWrite]);
   const doClear = useCallback7(async () => {
+    if (refuseWrite()) return;
     const current = optionsRef.current;
     if (!current || !bounds) return;
     const patches = [];
@@ -8589,20 +8657,22 @@ function useSpreadsheetGrid(options) {
       [...skipped, ...screened.refusals],
       `Cleared ${screened.accepted.length} cells.`
     );
-  }, [bounds, applyPatches, announceSkips, screenPatches]);
+  }, [bounds, applyPatches, announceSkips, screenPatches, refuseWrite]);
   const doUndo = useCallback7(async () => {
+    if (refuseWrite()) return;
     const taken = popUndo(stack);
     if (!taken.entry) return;
     setStack(taken.stack);
     await applyPatches(taken.entry.undo, "undo", taken.entry.label);
     optionsRef.current?.notify?.(taken.entry.label);
-  }, [stack, applyPatches]);
+  }, [stack, applyPatches, refuseWrite]);
   const doRedo = useCallback7(async () => {
+    if (refuseWrite()) return;
     const taken = popRedo(stack);
     if (!taken.entry) return;
     setStack(taken.stack);
     await applyPatches(taken.entry.redo, "redo", taken.entry.label);
-  }, [stack, applyPatches]);
+  }, [stack, applyPatches, refuseWrite]);
   const move = useCallback7(
     (direction, extend) => {
       setRange((previous) => {
@@ -8678,7 +8748,7 @@ function useSpreadsheetGrid(options) {
         case "edit":
         case "editSeeded": {
           const focused = range?.focus;
-          if (!focused || !current.onEditRequest) return;
+          if (!focused || !current.onEditRequest || current.readOnly) return;
           const seed = action.kind === "editSeeded" ? action.seed : null;
           if (current.onEditRequest(focused, seed)) event.preventDefault();
           return;
@@ -8735,6 +8805,7 @@ function useSpreadsheetGrid(options) {
       const text = event.clipboardData?.getData("text/plain") ?? "";
       if (!text) return;
       event.preventDefault();
+      if (refuseWrite()) return;
       const block = parseClipboardGrid(text);
       const start = range.focus;
       const startRow = rowIds.indexOf(start.rowId);
@@ -8797,7 +8868,7 @@ function useSpreadsheetGrid(options) {
       const tail = outside > 0 ? ` ${outside} landed past the edge of the table and were ignored.` : "";
       announceSkips(refusals, `Pasted ${screened.accepted.length} cells.${tail}`);
     },
-    [range, rowIds, columnIds, applyPatches, announceSkips, screenPatches]
+    [range, rowIds, columnIds, applyPatches, announceSkips, screenPatches, refuseWrite]
   );
   const cellProps = useCallback7(
     (rowId, columnId2) => {
@@ -8848,7 +8919,7 @@ function useSpreadsheetGrid(options) {
   const isFillHandleCell = useCallback7(
     (rowId, columnId2) => {
       const current = optionsRef.current;
-      if (!current || current.fillHandle === false || !bounds) return false;
+      if (!current || current.fillHandle === false || current.readOnly || !bounds) return false;
       return rowIds[bounds.r1] === rowId && columnIds[bounds.c1] === columnId2;
     },
     [bounds, rowIds, columnIds]
@@ -8875,6 +8946,7 @@ function useSpreadsheetGrid(options) {
       const source = boundsRef.current;
       setFillTarget(null);
       if (!target || !source) return;
+      if (refuseWrite()) return;
       const base = fillRequestBase();
       if (!base) return;
       const result = fillRange({
@@ -8888,7 +8960,7 @@ function useSpreadsheetGrid(options) {
     };
     window.addEventListener("mouseup", commit);
     return () => window.removeEventListener("mouseup", commit);
-  }, [options, fillRequestBase, applyPatches, announceSkips, screenPatches]);
+  }, [options, fillRequestBase, applyPatches, announceSkips, screenPatches, refuseWrite]);
   return {
     range,
     bounds,
@@ -10187,6 +10259,35 @@ function toText(value) {
     return String(value);
   return null;
 }
+function parseTimeOfDay(value) {
+  if (value instanceof Date) {
+    return { h: value.getHours(), m: value.getMinutes(), s: value.getSeconds() };
+  }
+  if (typeof value !== "string") return null;
+  const text = value.trim();
+  if (!text) return null;
+  const m = /^(\d{1,2})(?::(\d{2}))?(?::(\d{2}))?\s*([aApP]\.?[mM]\.?)?$/.exec(text);
+  if (m) {
+    let h = Number(m[1]);
+    const min = m[2] ? Number(m[2]) : 0;
+    const sec = m[3] ? Number(m[3]) : 0;
+    const ampm = m[4]?.toLowerCase().replace(/\./g, "");
+    if (ampm) {
+      if (h < 1 || h > 12) return null;
+      if (ampm === "pm" && h !== 12) h += 12;
+      if (ampm === "am" && h === 12) h = 0;
+    }
+    if (h > 23 || min > 59 || sec > 59) return null;
+    return { h, m: min, s: sec };
+  }
+  if (/\d{4}-\d{2}-\d{2}T/.test(text)) {
+    const d = new Date(text);
+    if (!Number.isNaN(d.getTime())) {
+      return { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() };
+    }
+  }
+  return null;
+}
 var BARE_CALENDAR_DATE = /^(\d{4})-(\d{2})-(\d{2})(?:[T ]00:00(?::00(?:\.0+)?)?)?$/;
 function toDate(value) {
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
@@ -10307,6 +10408,23 @@ var DEFS = [
     },
     parse: (raw) => raw === "" || raw == null ? null : String(raw).trim()
   },
+  {
+    // A postal address. Free text by design (addresses have no one shape
+    // worldwide); the cell opens it in maps, which is the thing people do
+    // with an address in a table.
+    id: "address",
+    label: "Address",
+    description: "Street address \u2014 click to open in maps",
+    group: "Text",
+    base: "string",
+    editor: "text",
+    rich: true,
+    format: (v) => {
+      const t = toText(v)?.trim();
+      return t ? t : null;
+    },
+    parse: (raw) => raw === "" || raw == null ? null : String(raw)
+  },
   {
     id: "url",
     label: "Link",
@@ -10440,6 +10558,26 @@ var DEFS = [
     },
     parse: (raw) => toNumber(raw)
   },
+  {
+    // A percentage DRAWN as a bar — task completion, quota used, a score out of
+    // 100. Same storage and scale rule as `percent`; only the rendering differs.
+    id: "progress",
+    label: "Progress bar",
+    description: "A percentage shown as a bar",
+    group: "Numbers",
+    base: "number",
+    alsoAccepts: ["integer"],
+    editor: "number",
+    rich: true,
+    optionKeys: ["percentScale"],
+    format: (v, o) => {
+      const n2 = toNumber(v);
+      if (n2 === null) return null;
+      const shown = o.percentScale === "fraction" ? n2 * 100 : n2;
+      return `${groupedNumber(shown, { precision: 0 })}%`;
+    },
+    parse: (raw) => toNumber(raw)
+  },
   {
     id: "duration",
     label: "Duration",
@@ -10508,13 +10646,16 @@ var DEFS = [
     alsoAccepts: ["number"],
     editor: "number",
     numericAlign: true,
+    // The name says BYTES on purpose: this cell holds a genuine byte length,
+    // never a character or item count, and `formatFileSize` is only honest
+    // about a quantity that is actually bytes.
     format: (v) => {
-      const n2 = toNumber(v);
-      return n2 === null ? null : formatFileSize(n2);
+      const byteLength = toNumber(v);
+      return byteLength === null ? null : formatFileSize(byteLength);
     },
     parse: (raw) => {
-      const n2 = toNumber(raw);
-      return n2 === null ? null : Math.trunc(n2);
+      const byteLength = toNumber(raw);
+      return byteLength === null ? null : Math.trunc(byteLength);
     }
   },
   // ── Choice ────────────────────────────────────────────────────────────────
@@ -10575,6 +10716,87 @@ var DEFS = [
     },
     parse: (raw) => raw === "" || raw == null ? null : String(raw)
   },
+  {
+    // A TIME OF DAY with no date: opening hours, a shift start, a meeting slot.
+    // Stored as the string the <input type="time"> gives ("HH:MM" or
+    // "HH:MM:SS"), shown in the viewer's locale ("2:30 PM" / "14:30"). The
+    // storage type stays `string`; sorting is lexical on the 24-hour form,
+    // which is chronological — the one reason the stored form is 24-hour.
+    id: "time",
+    label: "Time",
+    description: "Time of day, without a date",
+    group: "Dates",
+    base: "string",
+    editor: "time",
+    optionKeys: ["timeSeconds"],
+    format: (v, o) => {
+      const parts = parseTimeOfDay(v);
+      if (!parts) return null;
+      const d = new Date(2e3, 0, 1, parts.h, parts.m, parts.s);
+      return d.toLocaleTimeString(void 0, {
+        hour: "numeric",
+        minute: "2-digit",
+        ...o.timeSeconds ? { second: "2-digit" } : {}
+      });
+    },
+    // Normalise to the 24-hour "HH:MM[:SS]" form; a value that is not a time
+    // is handed back unchanged so the validation layer can refuse it by name.
+    parse: (raw) => {
+      if (raw == null || raw === "") return null;
+      const parts = parseTimeOfDay(raw);
+      if (!parts) return raw;
+      const two = (n2) => String(n2).padStart(2, "0");
+      const fields = parts.s > 0 ? [parts.h, parts.m, parts.s] : [parts.h, parts.m];
+      return fields.map(two).join(":");
+    }
+  },
+  {
+    // Assigned BY THE DATABASE when the row is inserted (trigger
+    // `_udt_autonumber`), so it is the same number whichever door made the row
+    // and never shifts when another row is deleted. Stored in the cell as an
+    // integer; every editor refuses it. `prefix` turns 42 into "INV-42".
+    id: "autonumber",
+    label: "Autonumber",
+    description: "A number the table assigns to each new row \u2014 never typed",
+    group: "Numbers",
+    base: "integer",
+    alsoAccepts: ["number"],
+    editor: "computed",
+    numericAlign: true,
+    optionKeys: ["prefix"],
+    format: (v, o) => {
+      const n2 = toNumber(v);
+      if (n2 === null) return null;
+      return `${o.prefix ?? ""}${Math.trunc(n2)}`;
+    },
+    parse: () => null
+  },
+  // ── System columns ────────────────────────────────────────────────────────
+  // Filled from the ROW'S OWN RECORD on read (`withComputedColumns` in
+  // `@ai-matrx/design-system/formulas`), never typed and never stored in the
+  // cell. `editor: "computed"` makes every editor refuse them.
+  {
+    id: "created_time",
+    label: "Created time",
+    description: "When the row was added \u2014 filled in automatically",
+    group: "Dates",
+    base: "string",
+    editor: "computed",
+    optionKeys: ["dateStyle"],
+    format: (v, o) => FIELD_FORMATS.datetime.format(v, o),
+    parse: () => null
+  },
+  {
+    id: "modified_time",
+    label: "Last modified time",
+    description: "When the row last changed \u2014 filled in automatically",
+    group: "Dates",
+    base: "string",
+    editor: "computed",
+    optionKeys: ["dateStyle"],
+    format: (v, o) => FIELD_FORMATS.datetime.format(v, o),
+    parse: () => null
+  },
   {
     id: "relative_time",
     label: "Relative time",
@@ -10631,6 +10853,44 @@ var DEFS = [
       return toList(raw) ?? raw;
     }
   },
+  {
+    // FILES ATTACHED TO THE ROW. The cell stores the files feature's file ids
+    // (`files.files.id`), never a URL or a name: a rename or a move in Files
+    // changes nothing here, and access is the file's own (RLS) — a reader who
+    // may see the row but not the file gets the chip's honest "no access", not
+    // a broken link. Drawn by `AttachmentChips`, edited by `AttachmentInput`
+    // through the ONE file picker.
+    id: "attachment",
+    label: "Attachments",
+    description: "Files from your Files, shown as chips",
+    group: "Structured",
+    base: "array",
+    // Not `string`: on a text column it must appear under "Other kinds" so
+    // picking it retypes the column to a list, rather than storing a JSON
+    // string of ids in a text cell.
+    alsoAccepts: ["json"],
+    editor: "attachment",
+    rich: true,
+    format: (v) => {
+      const list = toList(v);
+      if (list === null) return null;
+      const n2 = list.filter((i) => String(i).trim()).length;
+      return n2 === 0 ? "" : n2 === 1 ? "1 file" : `${n2} files`;
+    },
+    parse: (raw) => {
+      if (raw == null || raw === "") return null;
+      if (Array.isArray(raw)) return raw.map((i) => String(i).trim()).filter(Boolean);
+      const text = String(raw).trim();
+      if (text.startsWith("[")) {
+        try {
+          const parsed = JSON.parse(text);
+          if (Array.isArray(parsed)) return parsed.map((i) => String(i).trim()).filter(Boolean);
+        } catch {
+        }
+      }
+      return text.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+  },
   {
     id: "tags",
     label: "Tags",
@@ -10694,6 +10954,82 @@ var DEFS = [
       return trimmed === "" ? null : trimmed;
     }
   },
+  {
+    // A PERSON: one member of the organization the table belongs to, stored as
+    // the user id. It is a choice column whose options are the members —
+    // supplied at runtime by whoever renders it (features/data-tables/
+    // person-choices.tsx), the same door a structured-list-bound column uses —
+    // so the cell picker, the chip, filters, color-by and the agent scope are
+    // all the choice system's, with no second implementation.
+    id: "person",
+    label: "Person",
+    description: "Someone in your organization \u2014 pick from its members",
+    group: "Choice",
+    base: "string",
+    editor: "select",
+    rich: true,
+    format: (v, o) => FIELD_FORMATS.choice.format(v, o),
+    parse: (raw) => FIELD_FORMATS.choice.parse(raw, {})
+  },
+  {
+    // A RECORD OF ANOTHER TABLE. The cell stores that record's ID; the screen
+    // shows its WORDS. `person` is the precedent and the template — it has
+    // stored a user id and displayed a name through `choiceMap` since
+    // 2026-09-21 — so `relation` is a member of CHOICE_FORMAT_IDS and every
+    // one of the ten readers that print a cell resolves it through the path
+    // they already use for `person`. There is no eleventh place to remember.
+    //
+    // THREE STATES, THREE RENDERINGS, NO FOURTH (OLD-TABLES-CUTOVER §3.3):
+    //   resolved      the target's words
+    //   unresolvable  the amber fallback WITH the id, as an identifier — never
+    //                 a blank, and never the bare uuid as if it were text, so a
+    //                 person can act on it and support can trace it
+    //   withheld      platform.relation_withheld_label(), with NO id — a cell
+    //                 the reader may not see never leaks the identifier through
+    //                 the gap between the two stores' refusals
+    //
+    // `format` therefore returns null (the fallback law's "cannot interpret")
+    // for anything the resolver did not turn into words, and the renderer is
+    // what distinguishes unresolvable from withheld. It never prints a bare id.
+    id: "relation",
+    label: "Relation",
+    description: "A record of another table \u2014 pick it, and its name is shown",
+    group: "Choice",
+    base: "string",
+    alsoAccepts: ["array", "json"],
+    editor: "select",
+    rich: true,
+    optionKeys: ["relation_target", "relation_max", "on_delete", "display"],
+    // IT DOES NOT DELEGATE TO `choice`, AND THAT IS THE WHOLE POINT.
+    // `choice.format` deliberately returns the RAW VALUE when no options have
+    // resolved yet — a structured list still loading should not make every cell
+    // look off-list. For a label column that is right: the raw value IS the
+    // label. For an identifier column it is the defect §3.3 names, and it is
+    // how the first cut of this wave put four raw uuids on a real grid: the
+    // fallback arm never ran, because returning the uuid counted as SUCCESS.
+    //
+    // Here, a value that did not resolve to words is a MISMATCH — `null` — so
+    // the renderer's three-state arm owns it and shows the amber fallback with
+    // the id marked as an identifier, or the withheld sentence. The id never
+    // reaches the eye as if it were the cell's contents.
+    format: (v, options) => {
+      const list = toList(v);
+      const values = list !== null ? list : v == null ? [] : [v];
+      if (values.length === 0) return "";
+      const words2 = [];
+      for (const entry of values) {
+        const text = toText(entry);
+        if (text === null) return null;
+        const trimmed = text.trim();
+        if (trimmed === "") continue;
+        const match = findChoice(options.choices, trimmed);
+        if (!match) return null;
+        words2.push(match.label ?? match.value);
+      }
+      return words2.length === 0 ? "" : words2.join(", ");
+    },
+    parse: (raw) => FIELD_FORMATS.choice.parse(raw, {})
+  },
   {
     id: "multi_choice",
     label: "Multi-choice",
@@ -10738,7 +11074,7 @@ var DEFS = [
   // A formula column stores NOTHING. `metadata.format.options.formula` holds
   // the expression; the stored cell is always null; the value is computed on
   // read from the other columns of the same row
-  // (`features/data-tables/formulas.ts`). Grouped under Structured on purpose
+  // (`@ai-matrx/design-system/formulas`). Grouped under Structured on purpose
   // — the picker's groups are a fixed vocabulary, and a formula is structure
   // over a plain string column, not a sixth family.
   //
@@ -13314,12 +13650,15 @@ function MatrxDataTableCore({
         return getCellValue(applyRowEdits(row, edits[rowId]), col);
       },
       isColumnWritable: (colId) => {
+        if (spreadsheet.readOnly) return false;
         if (spreadsheet.writableColumnIds) return spreadsheet.writableColumnIds.includes(colId);
         const col = spreadsheetColumnById.get(colId);
         return Boolean(col && col.editable);
       },
       ...spreadsheet.columnRefusal ? { columnRefusal: spreadsheet.columnRefusal } : {},
-      onPatch: spreadsheet.onPatch,
+      ...spreadsheet.onPatch ? { onPatch: spreadsheet.onPatch } : {},
+      ...spreadsheet.readOnly ? { readOnly: true } : {},
+      ...spreadsheet.readOnlyReason ? { readOnlyReason: spreadsheet.readOnlyReason } : {},
       ...spreadsheet.undoDepth === void 0 ? {} : { undoDepth: spreadsheet.undoDepth },
       ...spreadsheet.fillHandle === void 0 ? {} : { fillHandle: spreadsheet.fillHandle },
       ...spreadsheet.paste === void 0 ? {} : { paste: spreadsheet.paste },
@@ -13879,7 +14218,7 @@ function MatrxDataTableCore({
     setEdits({});
     edit?.onCancel?.();
   };
-  const resolveMenuLevel = (target) => {
+  const menuPayloadFor = (target) => {
     const rowFor = (rowId) => {
       const row = data.find((candidate) => getRowId(candidate) === rowId);
       if (!row) return null;
@@ -13887,14 +14226,13 @@ function MatrxDataTableCore({
     };
     const columnFor = (id) => visibleColumns.find((col) => columnId(col) === id);
     const labelFor = (col, id) => col?.label ?? (typeof col?.header === "string" ? col.header : id);
-    const fromHost = (payload) => host.createDefaultMenuContext?.(payload) ?? null;
     switch (target.level) {
       case "row": {
         if (!target.rowId) return null;
         const displayRow = rowFor(target.rowId);
         if (!displayRow) return null;
         const controls = buildRecordControls(displayRow);
-        return contextMenu?.resolveRowContext?.(displayRow, controls) ?? fromHost({ level: "row", row: displayRow, rowId: target.rowId, controls });
+        return { payload: { level: "row", row: displayRow, rowId: target.rowId, controls }, controls };
       }
       case "cell": {
         if (!target.rowId || !target.columnId) return null;
@@ -13903,45 +14241,94 @@ function MatrxDataTableCore({
         if (!displayRow || !col) return null;
         const controls = buildRecordControls(displayRow);
         const value = spreadsheet?.readCell ? spreadsheet.readCell(displayRow, target.columnId) : getCellValue(displayRow, col);
-        const args = {
-          row: displayRow,
-          rowId: target.rowId,
-          columnId: target.columnId,
-          columnLabel: labelFor(col, target.columnId),
-          value,
-          text: stringifyCellValue(value),
+        return {
+          payload: {
+            level: "cell",
+            row: displayRow,
+            rowId: target.rowId,
+            columnId: target.columnId,
+            columnLabel: labelFor(col, target.columnId),
+            value,
+            text: stringifyCellValue(value),
+            controls
+          },
           controls
         };
-        return contextMenu?.resolveCellContext?.(args) ?? fromHost({ level: "cell", ...args });
       }
       case "column": {
         if (!target.columnId) return null;
         const col = columnFor(target.columnId);
         if (!col) return null;
-        const args = {
-          columnId: target.columnId,
-          columnLabel: labelFor(col, target.columnId),
-          values: paginated.map(
-            (row) => getCellValue(applyRowEdits(row, edits[getRowId(row)]), col)
-          )
+        return {
+          payload: {
+            level: "column",
+            columnId: target.columnId,
+            columnLabel: labelFor(col, target.columnId),
+            values: paginated.map(
+              (row) => getCellValue(applyRowEdits(row, edits[getRowId(row)]), col)
+            )
+          }
         };
-        return contextMenu?.resolveColumnContext?.(args) ?? fromHost({ level: "column", ...args });
       }
       case "selection": {
         const addresses = sheetRef.current.selectionAddresses();
         const cellCount = addresses.rowIds.length * addresses.columnIds.length;
-        if (cellCount <= 1) {
-          return resolveMenuLevel({ ...target, level: "cell" });
-        }
-        const args = { ...addresses, tsv: sheetRef.current.selectionTsv(), cellCount };
-        return contextMenu?.resolveSelectionContext?.(args) ?? fromHost({ level: "selection", ...args });
+        if (cellCount <= 1) return menuPayloadFor({ ...target, level: "cell" });
+        return {
+          payload: { level: "selection", ...addresses, tsv: sheetRef.current.selectionTsv(), cellCount }
+        };
+      }
+      case "table":
+        return {
+          payload: { level: "table", rowCount: data.length, columnIds: visibleColumns.map((col) => columnId(col)) }
+        };
+    }
+  };
+  const resolveMenuLevel = (target) => {
+    const built = menuPayloadFor(target);
+    if (!built) return null;
+    const { payload } = built;
+    const fromHost = () => host.createDefaultMenuContext?.(payload) ?? null;
+    switch (payload.level) {
+      case "row":
+        return contextMenu?.resolveRowContext?.(payload.row, built.controls) ?? fromHost();
+      case "cell": {
+        const { level: _level, ...args } = payload;
+        return contextMenu?.resolveCellContext?.({ ...args, controls: built.controls }) ?? fromHost();
+      }
+      case "column": {
+        const { level: _level, ...args } = payload;
+        return contextMenu?.resolveColumnContext?.(args) ?? fromHost();
+      }
+      case "selection": {
+        const { level: _level, ...args } = payload;
+        return contextMenu?.resolveSelectionContext?.(args) ?? fromHost();
       }
       case "table": {
-        const args = { rowCount: data.length, columnIds: visibleColumns.map((col) => columnId(col)) };
-        return contextMenu?.resolveTableContext?.(args) ?? fromHost({ level: "table", ...args });
+        const { level: _level, ...args } = payload;
+        return contextMenu?.resolveTableContext?.(args) ?? fromHost();
       }
     }
   };
+  const menuSectionsFor = (target) => {
+    const resolve2 = contextMenu?.sections;
+    if (!resolve2 || target.tableId !== tableContextMenuInstanceId) return [];
+    const built = menuPayloadFor(target);
+    if (!built) return [];
+    try {
+      return resolve2(built.payload);
+    } catch (error) {
+      console.error("[MatrxDataTable] contextMenu.sections threw; the menu opens without them.", error);
+      return [];
+    }
+  };
+  const menuSectionsForRef = useRef16(menuSectionsFor);
+  menuSectionsForRef.current = menuSectionsFor;
+  const hasMenuSections = Boolean(contextMenu?.sections);
+  const boundarySections = useCallback8(
+    (target) => menuSectionsForRef.current(target),
+    []
+  );
   const resolveMenuLevelRef = useRef16(resolveMenuLevel);
   resolveMenuLevelRef.current = resolveMenuLevel;
   useEffect16(() => {
@@ -14154,959 +14541,640 @@ function MatrxDataTableCore({
     },
     [columns, commitColumnState, commitColumnWidths, controlledQuery, intelligentSearchEnabled, intelligentSearchScopes, toolbar]
   );
-  return /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(ContextMenuBoundary, { label: tableId ?? "Data table", children: /* @__PURE__ */ jsxs32(
-    DndContext,
+  return /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(
+    ContextMenuBoundary,
     {
-      id: tableDndContextId,
-      sensors: hierarchySensors,
-      collisionDetection: pointerWithin,
-      accessibility: {
-        screenReaderInstructions: {
-          draggable: "Drag with a pointer. To reorder columns with a keyboard, open Columns and use Move earlier or Move later."
-        }
-      },
-      measuring: { droppable: { strategy: MeasuringStrategy.Always } },
-      onDragStart: (event) => {
-        const kind = event.active.data.current?.matrxDragKind;
-        if (kind === "column-header") {
-          const draggedId = String(event.active.data.current?.columnId);
-          draggedColumnId.current = draggedId;
-          columnDragActive.current = true;
-          setColumnDragPreview({ draggedId, targetId: null, after: false });
-          return;
-        }
-        if (kind === "column-manager") return;
-        setDraggedRowId(String(event.active.id));
-      },
-      onDragMove: (event) => {
-        if (!columnDragActive.current || event.active.data.current?.matrxDragKind !== "column-header") return;
-        const overData = event.over?.data.current;
-        const overId = overData?.matrxDragKind === "column-header" ? overData.columnId : null;
-        const activeRect = event.active.rect.current.translated;
-        const overRect = event.over?.rect;
-        if (!overId || !activeRect || !overRect) {
-          setColumnDragPreview(
-            (current) => current?.targetId === null ? current : current ? { ...current, targetId: null } : current
-          );
-          columnDragScrollDirection.current = 0;
-          stopColumnDragScroll();
-          return;
-        }
-        const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
-        setColumnDragPreview((current) => {
-          if (!current) return current;
-          return current.targetId === overId && current.after === after ? current : { ...current, targetId: String(overId), after };
-        });
-        const scroll = scrollRef.current;
-        if (!scroll) return;
-        const bounds = scroll.getBoundingClientRect();
-        const center = activeRect.left + activeRect.width / 2;
-        columnDragScrollDirection.current = center - bounds.left < 80 ? -1 : bounds.right - center < 80 ? 1 : 0;
-        if (columnDragScrollDirection.current === 0) stopColumnDragScroll();
-        else startColumnDragScroll();
-      },
-      onDragCancel: () => {
-        columnDragActive.current = false;
-        draggedColumnId.current = null;
-        setColumnDragPreview(null);
-        stopColumnDragScroll();
-        setDraggedRowId(null);
-      },
-      onDragEnd: (event) => {
-        const kind = event.active.data.current?.matrxDragKind;
-        if (kind === "column-manager") return;
-        if (kind !== "column-header") {
-          endHierarchyDrag(event);
-          return;
-        }
-        const from = String(event.active.data.current?.columnId);
-        const targetData = event.over?.data.current;
-        const target = targetData?.matrxDragKind === "column-header" ? targetData.columnId : null;
-        const activeRect = event.active.rect.current.translated;
-        const overRect = event.over?.rect;
-        columnDragActive.current = false;
-        draggedColumnId.current = null;
-        setColumnDragPreview(null);
-        stopColumnDragScroll();
-        if (columnDragPreview?.draggedId === from && columnDragPreview.targetId !== null && columnDragPreview.targetId !== from) {
-          commitColumnState(
-            projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
-            effectiveHiddenColumnIds
-          );
-          return;
-        }
-        if (!target || from === target || !activeRect || !overRect) return;
-        const order = [...effectiveColumnOrder];
-        const fromIndex = order.indexOf(from);
-        const targetIndex = order.indexOf(String(target));
-        if (fromIndex < 0 || targetIndex < 0) return;
-        order.splice(fromIndex, 1);
-        const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
-        const insertion = order.indexOf(String(target)) + (after ? 1 : 0);
-        order.splice(insertion, 0, from);
-        commitColumnState(order, effectiveHiddenColumnIds);
-      },
-      children: [
-        /* @__PURE__ */ jsxs32(
-          "div",
-          {
-            ref: rootRef,
-            "data-matrx-table": true,
-            "data-matrx-table-id": tableContextMenuInstanceId,
-            "data-matrx-table-implementation": "@ai-matrx/design-system",
-            "data-matrx-table-density": resolvedDensity,
-            "data-url-state-table": urlState?.id,
-            className: cn(
-              "flex h-full min-h-0 flex-col gap-2 px-0 py-2",
-              className
-            ),
-            children: [
-              notice,
-              savedViewError ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
-              toolbarActionError ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
-              placeToolbar(!hideToolbar && (viewTabs || toolbar?.title || toolbar?.titleCount || showSearch || toolbar?.customSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ jsxs32(
-                TableTitleRow,
-                {
-                  ...toolbar?.singleRow ? { singleRow: true } : {},
-                  tabs: viewTabs ? /* @__PURE__ */ jsx42(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
-                  ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
-                  ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
-                  context: tableId && SavedViews ? /* @__PURE__ */ jsx42("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx42(
-                    SavedViews,
-                    {
-                      tableId,
-                      snapshot: currentViewSnapshot,
-                      defaultSnapshot: declaredDefaultViewSnapshot,
-                      onApply: applySavedView
-                    }
-                  ) }) : void 0,
-                  search: toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx42(
-                    TableSearch,
-                    {
-                      value: searchValue,
-                      onChange: setSearchValue,
-                      scope: searchScope,
-                      onScopeChange: setSearchScope,
-                      scopes: intelligentSearchScopes,
-                      ...toolbar?.searchPlaceholder === void 0 ? {} : { placeholder: toolbar.searchPlaceholder }
-                    }
-                  ) : /* @__PURE__ */ jsxs32(
-                    "div",
+      label: tableId ?? "Data table",
+      ...hasMenuSections ? { sections: boundarySections } : {},
+      children: /* @__PURE__ */ jsxs32(
+        DndContext,
+        {
+          id: tableDndContextId,
+          sensors: hierarchySensors,
+          collisionDetection: pointerWithin,
+          accessibility: {
+            screenReaderInstructions: {
+              draggable: "Drag with a pointer. To reorder columns with a keyboard, open Columns and use Move earlier or Move later."
+            }
+          },
+          measuring: { droppable: { strategy: MeasuringStrategy.Always } },
+          onDragStart: (event) => {
+            const kind = event.active.data.current?.matrxDragKind;
+            if (kind === "column-header") {
+              const draggedId = String(event.active.data.current?.columnId);
+              draggedColumnId.current = draggedId;
+              columnDragActive.current = true;
+              setColumnDragPreview({ draggedId, targetId: null, after: false });
+              return;
+            }
+            if (kind === "column-manager") return;
+            setDraggedRowId(String(event.active.id));
+          },
+          onDragMove: (event) => {
+            if (!columnDragActive.current || event.active.data.current?.matrxDragKind !== "column-header") return;
+            const overData = event.over?.data.current;
+            const overId = overData?.matrxDragKind === "column-header" ? overData.columnId : null;
+            const activeRect = event.active.rect.current.translated;
+            const overRect = event.over?.rect;
+            if (!overId || !activeRect || !overRect) {
+              setColumnDragPreview(
+                (current) => current?.targetId === null ? current : current ? { ...current, targetId: null } : current
+              );
+              columnDragScrollDirection.current = 0;
+              stopColumnDragScroll();
+              return;
+            }
+            const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
+            setColumnDragPreview((current) => {
+              if (!current) return current;
+              return current.targetId === overId && current.after === after ? current : { ...current, targetId: String(overId), after };
+            });
+            const scroll = scrollRef.current;
+            if (!scroll) return;
+            const bounds = scroll.getBoundingClientRect();
+            const center = activeRect.left + activeRect.width / 2;
+            columnDragScrollDirection.current = center - bounds.left < 80 ? -1 : bounds.right - center < 80 ? 1 : 0;
+            if (columnDragScrollDirection.current === 0) stopColumnDragScroll();
+            else startColumnDragScroll();
+          },
+          onDragCancel: () => {
+            columnDragActive.current = false;
+            draggedColumnId.current = null;
+            setColumnDragPreview(null);
+            stopColumnDragScroll();
+            setDraggedRowId(null);
+          },
+          onDragEnd: (event) => {
+            const kind = event.active.data.current?.matrxDragKind;
+            if (kind === "column-manager") return;
+            if (kind !== "column-header") {
+              endHierarchyDrag(event);
+              return;
+            }
+            const from = String(event.active.data.current?.columnId);
+            const targetData = event.over?.data.current;
+            const target = targetData?.matrxDragKind === "column-header" ? targetData.columnId : null;
+            const activeRect = event.active.rect.current.translated;
+            const overRect = event.over?.rect;
+            columnDragActive.current = false;
+            draggedColumnId.current = null;
+            setColumnDragPreview(null);
+            stopColumnDragScroll();
+            if (columnDragPreview?.draggedId === from && columnDragPreview.targetId !== null && columnDragPreview.targetId !== from) {
+              commitColumnState(
+                projectColumnDragOrder(effectiveColumnOrder, columnDragPreview),
+                effectiveHiddenColumnIds
+              );
+              return;
+            }
+            if (!target || from === target || !activeRect || !overRect) return;
+            const order = [...effectiveColumnOrder];
+            const fromIndex = order.indexOf(from);
+            const targetIndex = order.indexOf(String(target));
+            if (fromIndex < 0 || targetIndex < 0) return;
+            order.splice(fromIndex, 1);
+            const after = activeRect.left + activeRect.width / 2 >= overRect.left + overRect.width / 2;
+            const insertion = order.indexOf(String(target)) + (after ? 1 : 0);
+            order.splice(insertion, 0, from);
+            commitColumnState(order, effectiveHiddenColumnIds);
+          },
+          children: [
+            /* @__PURE__ */ jsxs32(
+              "div",
+              {
+                ref: rootRef,
+                "data-matrx-table": true,
+                "data-matrx-table-id": tableContextMenuInstanceId,
+                "data-matrx-table-implementation": "@ai-matrx/design-system",
+                "data-matrx-table-density": resolvedDensity,
+                "data-url-state-table": urlState?.id,
+                className: cn(
+                  "flex h-full min-h-0 flex-col gap-2 px-0 py-2",
+                  className
+                ),
+                children: [
+                  notice,
+                  savedViewError ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
+                  toolbarActionError ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
+                  placeToolbar(!hideToolbar && (viewTabs || toolbar?.title || toolbar?.titleCount || showSearch || toolbar?.customSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ jsxs32(
+                    TableTitleRow,
                     {
-                      "data-matrx-table-search": true,
-                      className: cn(
-                        "flex min-w-0 flex-1 sm:w-full sm:flex-none",
-                        toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
-                      ),
+                      ...toolbar?.singleRow ? { singleRow: true } : {},
+                      tabs: viewTabs ? /* @__PURE__ */ jsx42(TableViewWorkspace, { snapshot: currentViewSnapshot, onApply: applySavedView, related: relatedTableActions }, tableId ?? "table") : void 0,
+                      ...toolbar?.title === void 0 ? {} : { title: toolbar.title },
+                      ...toolbar?.titleCount === void 0 ? {} : { count: toolbar.titleCount },
+                      context: tableId && SavedViews ? /* @__PURE__ */ jsx42("span", { "data-matrx-table-view-control": true, children: /* @__PURE__ */ jsx42(
+                        SavedViews,
+                        {
+                          tableId,
+                          snapshot: currentViewSnapshot,
+                          defaultSnapshot: declaredDefaultViewSnapshot,
+                          onApply: applySavedView
+                        }
+                      ) }) : void 0,
+                      search: toolbar?.customSearch ?? (showSearch ? intelligentSearchEnabled ? /* @__PURE__ */ jsx42(
+                        TableSearch,
+                        {
+                          value: searchValue,
+                          onChange: setSearchValue,
+                          scope: searchScope,
+                          onScopeChange: setSearchScope,
+                          scopes: intelligentSearchScopes,
+                          ...toolbar?.searchPlaceholder === void 0 ? {} : { placeholder: toolbar.searchPlaceholder }
+                        }
+                      ) : /* @__PURE__ */ jsxs32(
+                        "div",
+                        {
+                          "data-matrx-table-search": true,
+                          className: cn(
+                            "flex min-w-0 flex-1 sm:w-full sm:flex-none",
+                            toolbar?.searchMatch ? "sm:max-w-md" : "sm:max-w-xs"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxs32("div", { className: "relative min-w-0 flex-1", children: [
+                              /* @__PURE__ */ jsx42(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
+                              /* @__PURE__ */ jsx42(
+                                Input,
+                                {
+                                  value: searchValue,
+                                  onChange: (e) => setSearchValue(e.target.value),
+                                  placeholder: toolbar?.searchPlaceholder ?? "Search\u2026",
+                                  className: cn(
+                                    "h-8 pl-7 pr-7 text-sm",
+                                    toolbar?.searchMatch && "rounded-r-none"
+                                  ),
+                                  style: { fontSize: "16px" }
+                                }
+                              ),
+                              searchValue ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                                /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    "aria-label": "Clear search",
+                                    className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
+                                    onClick: () => setSearchValue(""),
+                                    children: /* @__PURE__ */ jsx42(X, { className: "h-5 w-5" })
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx42(TooltipContent, { children: "Clear search" })
+                              ] }) : null
+                            ] }),
+                            toolbar?.searchMatch ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                              /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs32(
+                                Button,
+                                {
+                                  type: "button",
+                                  variant: searchMatchMode === "whole_words" ? "secondary" : "outline",
+                                  size: "sm",
+                                  className: "h-8 shrink-0 gap-1 rounded-l-none border-l-0 px-2 text-xs",
+                                  "aria-pressed": searchMatchMode === "whole_words",
+                                  "aria-label": `Search match: ${searchMatchMode === "whole_words" ? "whole words" : "contains text"}`,
+                                  onClick: () => setSearchMatchMode(
+                                    searchMatchMode === "whole_words" ? "contains" : "whole_words"
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ jsx42(WholeWord, { className: "h-5 w-5" }),
+                                    searchMatchMode === "whole_words" ? "Whole words" : "Contains"
+                                  ]
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx42(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
+                            ] }) : null
+                          ]
+                        }
+                      ) : null),
                       children: [
-                        /* @__PURE__ */ jsxs32("div", { className: "relative min-w-0 flex-1", children: [
+                        toolbar?.layeredFilters ? /* @__PURE__ */ jsx42(
+                          LayeredFilterBuilder,
+                          {
+                            fields: toolbar.layeredFilters.fields,
+                            rules: layeredFilters,
+                            onChange: setLayeredFilters,
+                            maxRules: toolbar.layeredFilters.maxRules,
+                            label: toolbar.layeredFilters.label
+                          }
+                        ) : null,
+                        toolbar?.anyOf ? /* @__PURE__ */ jsxs32("div", { className: "relative w-full max-w-xs", children: [
                           /* @__PURE__ */ jsx42(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
                           /* @__PURE__ */ jsx42(
                             Input,
                             {
-                              value: searchValue,
-                              onChange: (e) => setSearchValue(e.target.value),
-                              placeholder: toolbar?.searchPlaceholder ?? "Search\u2026",
-                              className: cn(
-                                "h-8 pl-7 pr-7 text-sm",
-                                toolbar?.searchMatch && "rounded-r-none"
-                              ),
+                              value: anyOfValue,
+                              onChange: (e) => setAnyOfValue(e.target.value),
+                              placeholder: toolbar.anyOf.placeholder ?? "Match any of\u2026",
+                              className: "h-8 pl-7 pr-7 text-sm",
                               style: { fontSize: "16px" }
                             }
                           ),
-                          searchValue ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                          anyOfValue ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
                             /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
                               "button",
                               {
                                 type: "button",
-                                "aria-label": "Clear search",
+                                "aria-label": "Clear match-any search",
                                 className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
-                                onClick: () => setSearchValue(""),
+                                onClick: () => setAnyOfValue(""),
                                 children: /* @__PURE__ */ jsx42(X, { className: "h-5 w-5" })
                               }
                             ) }),
-                            /* @__PURE__ */ jsx42(TooltipContent, { children: "Clear search" })
+                            /* @__PURE__ */ jsx42(TooltipContent, { children: "Clear match-any search" })
                           ] }) : null
-                        ] }),
-                        toolbar?.searchMatch ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                          /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs32(
-                            Button,
-                            {
-                              type: "button",
-                              variant: searchMatchMode === "whole_words" ? "secondary" : "outline",
-                              size: "sm",
-                              className: "h-8 shrink-0 gap-1 rounded-l-none border-l-0 px-2 text-xs",
-                              "aria-pressed": searchMatchMode === "whole_words",
-                              "aria-label": `Search match: ${searchMatchMode === "whole_words" ? "whole words" : "contains text"}`,
-                              onClick: () => setSearchMatchMode(
-                                searchMatchMode === "whole_words" ? "contains" : "whole_words"
-                              ),
-                              children: [
-                                /* @__PURE__ */ jsx42(WholeWord, { className: "h-5 w-5" }),
-                                searchMatchMode === "whole_words" ? "Whole words" : "Contains"
-                              ]
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx42(TooltipContent, { children: searchMatchMode === "whole_words" ? "Whole words \u2014 click to match text anywhere" : "Contains text \u2014 click to require whole words" })
-                        ] }) : null
-                      ]
-                    }
-                  ) : null),
-                  children: [
-                    toolbar?.layeredFilters ? /* @__PURE__ */ jsx42(
-                      LayeredFilterBuilder,
-                      {
-                        fields: toolbar.layeredFilters.fields,
-                        rules: layeredFilters,
-                        onChange: setLayeredFilters,
-                        maxRules: toolbar.layeredFilters.maxRules,
-                        label: toolbar.layeredFilters.label
-                      }
-                    ) : null,
-                    toolbar?.anyOf ? /* @__PURE__ */ jsxs32("div", { className: "relative w-full max-w-xs", children: [
-                      /* @__PURE__ */ jsx42(Search, { className: "absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" }),
-                      /* @__PURE__ */ jsx42(
-                        Input,
-                        {
-                          value: anyOfValue,
-                          onChange: (e) => setAnyOfValue(e.target.value),
-                          placeholder: toolbar.anyOf.placeholder ?? "Match any of\u2026",
-                          className: "h-8 pl-7 pr-7 text-sm",
-                          style: { fontSize: "16px" }
-                        }
-                      ),
-                      anyOfValue ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                        /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                          "button",
+                        ] }) : null,
+                        renderedFacets ? /* @__PURE__ */ jsx42(ToolbarFacets, { facets: renderedFacets }) : null,
+                        toolbar?.leading ? /* @__PURE__ */ jsx42(
+                          "div",
                           {
-                            type: "button",
-                            "aria-label": "Clear match-any search",
-                            className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground",
-                            onClick: () => setAnyOfValue(""),
-                            children: /* @__PURE__ */ jsx42(X, { className: "h-5 w-5" })
+                            "data-matrx-table-toolbar-extras": true,
+                            className: "order-last flex w-full min-w-0 flex-wrap items-center gap-2",
+                            children: toolbar.leading
                           }
-                        ) }),
-                        /* @__PURE__ */ jsx42(TooltipContent, { children: "Clear match-any search" })
-                      ] }) : null
-                    ] }) : null,
-                    renderedFacets ? /* @__PURE__ */ jsx42(ToolbarFacets, { facets: renderedFacets }) : null,
-                    toolbar?.leading ? /* @__PURE__ */ jsx42(
+                        ) : null,
+                        /* @__PURE__ */ jsxs32(
+                          "div",
+                          {
+                            "data-matrx-table-actions": true,
+                            className: cn(
+                              "ml-auto flex min-w-0 items-center gap-0",
+                              toolbar?.singleRow ? "shrink-0 flex-nowrap" : "flex-wrap"
+                            ),
+                            children: [
+                              toolbar?.singleRow && coverageResult && coverageResult.notice ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                                /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs32(
+                                  "span",
+                                  {
+                                    "data-matrx-table-coverage": true,
+                                    "data-matrx-table-coverage-scope": coverageResult.scope,
+                                    role: "status",
+                                    tabIndex: 0,
+                                    className: "mr-1 inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-amber-300/70 bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                                    children: [
+                                      coverageResult.badge,
+                                      /* @__PURE__ */ jsxs32("span", { className: "sr-only", children: [
+                                        ": ",
+                                        coverageResult.notice
+                                      ] })
+                                    ]
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx42(TooltipContent, { className: "max-w-xs", children: coverageResult.notice })
+                              ] }) : null,
+                              /* @__PURE__ */ jsx42(
+                                TableToolbarAction,
+                                {
+                                  HostAction: host.ToolbarAction,
+                                  ariaLabel: "Clear all filters",
+                                  tooltip: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear",
+                                  disabled: !hasActiveFilters,
+                                  onClick: clearAllFilters,
+                                  children: /* @__PURE__ */ jsx42(Eraser, {})
+                                }
+                              ),
+                              showToolbarCopy && effectiveCopy ? /* @__PURE__ */ jsx42(
+                                CopyButtons,
+                                {
+                                  size: "toolbar",
+                                  sourceId: `${tableCopySourceNamespace}:view`,
+                                  label: effectiveCopy.listLabel ?? `${effectiveCopy.label} view`,
+                                  ...effectiveCopy.references ? { references: effectiveCopy.references(processed, data) } : {},
+                                  ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
+                                  ...copy === void 0 ? {} : {
+                                    human: () => effectiveCopy.listHuman?.(processed, data) ?? buildViewHuman(effectiveCopy, processed, effectiveCopyColumns),
+                                    json: () => effectiveCopy.listJson?.(processed, data) ?? processed.map((r) => effectiveCopy.agentRow ? effectiveCopy.agentRow(r) : r)
+                                  },
+                                  agent: () => copy !== void 0 && effectiveCopy.listAgent ? effectiveCopy.listAgent(processed, data) : copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, processed, data, declaredVisibleCopyColumns, {
+                                    search: searchValue,
+                                    searchMatchMode,
+                                    anyOf: anyOfValue,
+                                    filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
+                                    sort: sort ? `${sort.id}:${sort.direction}` : null
+                                  }) : buildViewAgentInput(effectiveCopy, processed, data, {
+                                    search: searchValue,
+                                    searchMatchMode,
+                                    anyOf: anyOfValue,
+                                    filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
+                                    sort: sort ? `${sort.id}:${sort.direction}` : null
+                                  }),
+                                  aiVariants: [
+                                    ...effectiveCopy.aiVariants?.(processed, data) ?? [],
+                                    ...copySubsetVariantFor(() => processed, "view")
+                                  ],
+                                  ...effectiveCopy.aiCustom ? { aiCustom: effectiveCopy.aiCustom(processed, data) } : {},
+                                  export: {
+                                    items: [],
+                                    sheetRows: () => processed.map(
+                                      (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
+                                    ),
+                                    sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
+                                      id: columnId(column),
+                                      label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
+                                    })),
+                                    ...effectiveCopy.export?.(processed, data)
+                                  }
+                                }
+                              ) : null,
+                              grouping?.onColumnIdChange ? /* @__PURE__ */ jsxs32(
+                                Select,
+                                {
+                                  value: groupingColumnId ?? NO_GROUPING_VALUE,
+                                  onValueChange: (value) => grouping.onColumnIdChange?.(value === NO_GROUPING_VALUE ? null : value),
+                                  children: [
+                                    /* @__PURE__ */ jsx42(
+                                      SelectTrigger,
+                                      {
+                                        "data-matrx-table-group-by": true,
+                                        "aria-label": "Group rows by a column",
+                                        className: "h-8 w-auto min-w-[9rem] gap-1 text-xs",
+                                        children: /* @__PURE__ */ jsx42(SelectValue, { placeholder: "No groups" })
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs32(SelectContent, { children: [
+                                      /* @__PURE__ */ jsx42(SelectItem, { value: NO_GROUPING_VALUE, children: "No groups" }),
+                                      groupableColumns.map((col) => /* @__PURE__ */ jsx42(SelectItem, { value: columnId(col), children: `Group by ${col.label ?? (typeof col.header === "string" ? col.header : columnId(col))}` }, columnId(col)))
+                                    ] })
+                                  ]
+                                }
+                              ) : null,
+                              columns.length > 0 ? /* @__PURE__ */ jsx42(
+                                TableToolbarAction,
+                                {
+                                  HostAction: host.ToolbarAction,
+                                  ariaLabel: "Columns",
+                                  tooltip: "Show, hide, or reorder columns",
+                                  onClick: () => setColumnManagerOpen(true),
+                                  children: /* @__PURE__ */ jsx42(SlidersHorizontal, {})
+                                }
+                              ) : null,
+                              toolbar?.refresh ? /* @__PURE__ */ jsx42(
+                                TableToolbarAction,
+                                {
+                                  HostAction: host.ToolbarAction,
+                                  ariaLabel: toolbar.refresh.label ?? "Refresh",
+                                  tooltip: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh",
+                                  disabled: isFetching || toolbarActionPending.refresh,
+                                  busy: isFetching || toolbarActionPending.refresh,
+                                  onClick: () => {
+                                    if (toolbarActionPendingRef.current.refresh) return;
+                                    toolbarActionPendingRef.current.refresh = true;
+                                    setToolbarActionPending((current) => ({ ...current, refresh: true }));
+                                    setToolbarActionError(null);
+                                    void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
+                                      const message = cause instanceof Error ? cause.message : String(cause);
+                                      setToolbarActionError(`Refresh failed: ${message}`);
+                                      toast.error(`Refresh failed: ${message}`);
+                                    }).finally(() => {
+                                      toolbarActionPendingRef.current.refresh = false;
+                                      setToolbarActionPending((current) => ({ ...current, refresh: false }));
+                                    });
+                                  },
+                                  children: /* @__PURE__ */ jsx42(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
+                                }
+                              ) : null,
+                              toolbar?.add ? /* @__PURE__ */ jsx42(
+                                TableToolbarAction,
+                                {
+                                  HostAction: host.ToolbarAction,
+                                  ariaLabel: "Add",
+                                  tooltip: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add",
+                                  disabled: toolbar.add.disabled || toolbarActionPending.add,
+                                  busy: toolbarActionPending.add,
+                                  onClick: () => {
+                                    if (toolbarActionPendingRef.current.add) return;
+                                    toolbarActionPendingRef.current.add = true;
+                                    setToolbarActionPending((current) => ({ ...current, add: true }));
+                                    setToolbarActionError(null);
+                                    void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
+                                      const message = cause instanceof Error ? cause.message : String(cause);
+                                      setToolbarActionError(`Add failed: ${message}`);
+                                      toast.error(`Add failed: ${message}`);
+                                    }).finally(() => {
+                                      toolbarActionPendingRef.current.add = false;
+                                      setToolbarActionPending((current) => ({ ...current, add: false }));
+                                    });
+                                  },
+                                  children: /* @__PURE__ */ jsx42(Plus, {})
+                                }
+                              ) : null,
+                              toolbar?.actions
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )),
+                  /* @__PURE__ */ jsxs32("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+                    coverageResult && coverageResult.notice && !toolbar?.singleRow ? /* @__PURE__ */ jsxs32(
                       "div",
                       {
-                        "data-matrx-table-toolbar-extras": true,
-                        className: "order-last flex w-full min-w-0 flex-wrap items-center gap-2",
-                        children: toolbar.leading
+                        "data-matrx-table-coverage": true,
+                        "data-matrx-table-coverage-scope": coverageResult.scope,
+                        role: "status",
+                        className: "flex shrink-0 items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                        children: [
+                          /* @__PURE__ */ jsx42("span", { className: "shrink-0 whitespace-nowrap font-semibold", children: coverageResult.badge }),
+                          /* @__PURE__ */ jsx42("span", { className: "min-w-0", children: coverageResult.notice })
+                        ]
                       }
                     ) : null,
-                    /* @__PURE__ */ jsxs32(
-                      "div",
-                      {
-                        "data-matrx-table-actions": true,
-                        className: cn(
-                          "ml-auto flex min-w-0 items-center gap-0",
-                          toolbar?.singleRow ? "shrink-0 flex-nowrap" : "flex-wrap"
-                        ),
-                        children: [
-                          toolbar?.singleRow && coverageResult && coverageResult.notice ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                            /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs32(
-                              "span",
+                    /* @__PURE__ */ jsxs32("div", { className: "relative min-h-0 flex-1", children: [
+                      mobileCards ? /* @__PURE__ */ jsxs32(
+                        "div",
+                        {
+                          ref: cardsScrollRef,
+                          "data-matrx-table-cards-scroll": true,
+                          "aria-busy": isLoading || isFetching,
+                          ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
+                          className: cn(
+                            "relative flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
+                            mobileCardsClass
+                          ),
+                          children: [
+                            isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ jsxs32(
+                              "div",
                               {
-                                "data-matrx-table-coverage": true,
-                                "data-matrx-table-coverage-scope": coverageResult.scope,
                                 role: "status",
-                                tabIndex: 0,
-                                className: "mr-1 inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-amber-300/70 bg-amber-50 px-2 py-0.5 text-[11px] font-semibold text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
+                                className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                                 children: [
-                                  coverageResult.badge,
-                                  /* @__PURE__ */ jsxs32("span", { className: "sr-only", children: [
-                                    ": ",
-                                    coverageResult.notice
-                                  ] })
+                                  /* @__PURE__ */ jsx42("div", { className: "h-full w-full animate-pulse bg-primary" }),
+                                  /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Refreshing table data" })
                                 ]
                               }
-                            ) }),
-                            /* @__PURE__ */ jsx42(TooltipContent, { className: "max-w-xs", children: coverageResult.notice })
-                          ] }) : null,
-                          /* @__PURE__ */ jsx42(
-                            TableToolbarAction,
-                            {
-                              HostAction: host.ToolbarAction,
-                              ariaLabel: "Clear all filters",
-                              tooltip: hasActiveFilters ? "Clear search and filters; keep columns and sort" : "No search or filters to clear",
-                              disabled: !hasActiveFilters,
-                              onClick: clearAllFilters,
-                              children: /* @__PURE__ */ jsx42(Eraser, {})
-                            }
-                          ),
-                          showToolbarCopy && effectiveCopy ? /* @__PURE__ */ jsx42(
-                            CopyButtons,
-                            {
-                              size: "toolbar",
-                              sourceId: `${tableCopySourceNamespace}:view`,
-                              label: effectiveCopy.listLabel ?? `${effectiveCopy.label} view`,
-                              ...effectiveCopy.references ? { references: effectiveCopy.references(processed, data) } : {},
-                              ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
-                              ...copy === void 0 ? {} : {
-                                human: () => effectiveCopy.listHuman?.(processed, data) ?? buildViewHuman(effectiveCopy, processed, effectiveCopyColumns),
-                                json: () => effectiveCopy.listJson?.(processed, data) ?? processed.map((r) => effectiveCopy.agentRow ? effectiveCopy.agentRow(r) : r)
+                            ) : null,
+                            isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx42(
+                              Skeleton,
+                              {
+                                className: "h-52 w-full shrink-0 rounded-lg"
                               },
-                              agent: () => copy !== void 0 && effectiveCopy.listAgent ? effectiveCopy.listAgent(processed, data) : copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, processed, data, declaredVisibleCopyColumns, {
-                                search: searchValue,
-                                searchMatchMode,
-                                anyOf: anyOfValue,
-                                filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
-                                sort: sort ? `${sort.id}:${sort.direction}` : null
-                              }) : buildViewAgentInput(effectiveCopy, processed, data, {
-                                search: searchValue,
-                                searchMatchMode,
-                                anyOf: anyOfValue,
-                                filterCount: activeFilterCount + completeLayeredFilterRules(layeredFilters).length,
-                                sort: sort ? `${sort.id}:${sort.direction}` : null
-                              }),
-                              aiVariants: [
-                                ...effectiveCopy.aiVariants?.(processed, data) ?? [],
-                                ...copySubsetVariantFor(() => processed, "view")
-                              ],
-                              ...effectiveCopy.aiCustom ? { aiCustom: effectiveCopy.aiCustom(processed, data) } : {},
-                              export: {
-                                items: [],
-                                sheetRows: () => processed.map(
-                                  (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
-                                ),
-                                sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
-                                  id: columnId(column),
-                                  label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
-                                })),
-                                ...effectiveCopy.export?.(processed, data)
-                              }
-                            }
-                          ) : null,
-                          grouping?.onColumnIdChange ? /* @__PURE__ */ jsxs32(
-                            Select,
-                            {
-                              value: groupingColumnId ?? NO_GROUPING_VALUE,
-                              onValueChange: (value) => grouping.onColumnIdChange?.(value === NO_GROUPING_VALUE ? null : value),
-                              children: [
-                                /* @__PURE__ */ jsx42(
-                                  SelectTrigger,
+                              `mobile-card-sk-${index}`
+                            )) : paginated.length === 0 ? /* @__PURE__ */ jsx42("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ jsxs32("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
+                              renderedEmptyState?.icon,
+                              /* @__PURE__ */ jsx42("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
+                              renderedEmptyState?.description ? /* @__PURE__ */ jsx42("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
+                              renderedEmptyState?.action
+                            ] }) }) : paginated.map((row, index) => {
+                              const id = getRowId(row);
+                              const displayRow = applyRowEdits(row, edits[id]);
+                              const controls = buildRecordControls(displayRow);
+                              const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
+                              return /* @__PURE__ */ jsx42("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
+                                renderCell: (columnKey) => {
+                                  const column = columns.find((candidate) => columnId(candidate) === columnKey);
+                                  return column ? renderRecordCell(row, column, index) : null;
+                                },
+                                selected: selectedIdSet.has(getSelectionId(row)),
+                                selectable,
+                                onSelectedChange: (nextSelected) => {
+                                  if (!selection || !selectable || nextSelected === selectedIdSet.has(getSelectionId(row))) {
+                                    return;
+                                  }
+                                  const next = new Set(selectedIdSet);
+                                  const selectionId = getSelectionId(row);
+                                  if (nextSelected) next.add(selectionId);
+                                  else next.delete(selectionId);
+                                  setSelectedIds(next);
+                                },
+                                actions: showInlineRowCopy || rowActions ? /* @__PURE__ */ jsxs32(
+                                  "div",
                                   {
-                                    "data-matrx-table-group-by": true,
-                                    "aria-label": "Group rows by a column",
-                                    className: "h-8 w-auto min-w-[9rem] gap-1 text-xs",
-                                    children: /* @__PURE__ */ jsx42(SelectValue, { placeholder: "No groups" })
+                                    "data-matrx-table-row-actions": true,
+                                    className: "inline-flex items-center justify-end gap-0",
+                                    onClick: (event) => event.stopPropagation(),
+                                    children: [
+                                      showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ jsx42(
+                                        TableRowCopyControl,
+                                        {
+                                          size: "toolbar",
+                                          copy: effectiveCopy,
+                                          row: displayRow,
+                                          sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
+                                          ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                                        }
+                                      ) : null,
+                                      renderRowActions(displayRow, controls)
+                                    ]
                                   }
-                                ),
-                                /* @__PURE__ */ jsxs32(SelectContent, { children: [
-                                  /* @__PURE__ */ jsx42(SelectItem, { value: NO_GROUPING_VALUE, children: "No groups" }),
-                                  groupableColumns.map((col) => /* @__PURE__ */ jsx42(SelectItem, { value: columnId(col), children: `Group by ${col.label ?? (typeof col.header === "string" ? col.header : columnId(col))}` }, columnId(col)))
-                                ] })
-                              ]
-                            }
-                          ) : null,
-                          columns.length > 0 ? /* @__PURE__ */ jsx42(
-                            TableToolbarAction,
-                            {
-                              HostAction: host.ToolbarAction,
-                              ariaLabel: "Columns",
-                              tooltip: "Show, hide, or reorder columns",
-                              onClick: () => setColumnManagerOpen(true),
-                              children: /* @__PURE__ */ jsx42(SlidersHorizontal, {})
-                            }
-                          ) : null,
-                          toolbar?.refresh ? /* @__PURE__ */ jsx42(
-                            TableToolbarAction,
-                            {
-                              HostAction: host.ToolbarAction,
-                              ariaLabel: toolbar.refresh.label ?? "Refresh",
-                              tooltip: isFetching ? "Refreshing table data" : toolbar.refresh.label ?? "Refresh",
-                              disabled: isFetching || toolbarActionPending.refresh,
-                              busy: isFetching || toolbarActionPending.refresh,
-                              onClick: () => {
-                                if (toolbarActionPendingRef.current.refresh) return;
-                                toolbarActionPendingRef.current.refresh = true;
-                                setToolbarActionPending((current) => ({ ...current, refresh: true }));
-                                setToolbarActionError(null);
-                                void Promise.resolve().then(() => toolbar.refresh?.onRefresh()).catch((cause) => {
-                                  const message = cause instanceof Error ? cause.message : String(cause);
-                                  setToolbarActionError(`Refresh failed: ${message}`);
-                                  toast.error(`Refresh failed: ${message}`);
-                                }).finally(() => {
-                                  toolbarActionPendingRef.current.refresh = false;
-                                  setToolbarActionPending((current) => ({ ...current, refresh: false }));
-                                });
-                              },
-                              children: /* @__PURE__ */ jsx42(RefreshControlIcon, { spinning: isFetching || toolbarActionPending.refresh })
-                            }
-                          ) : null,
-                          toolbar?.add ? /* @__PURE__ */ jsx42(
-                            TableToolbarAction,
-                            {
-                              HostAction: host.ToolbarAction,
-                              ariaLabel: "Add",
-                              tooltip: toolbar.add.disabled ? toolbar.add.disabledReason ?? "Add unavailable" : "Add",
-                              disabled: toolbar.add.disabled || toolbarActionPending.add,
-                              busy: toolbarActionPending.add,
-                              onClick: () => {
-                                if (toolbarActionPendingRef.current.add) return;
-                                toolbarActionPendingRef.current.add = true;
-                                setToolbarActionPending((current) => ({ ...current, add: true }));
-                                setToolbarActionError(null);
-                                void Promise.resolve().then(() => toolbar.add?.onAdd()).catch((cause) => {
-                                  const message = cause instanceof Error ? cause.message : String(cause);
-                                  setToolbarActionError(`Add failed: ${message}`);
-                                  toast.error(`Add failed: ${message}`);
-                                }).finally(() => {
-                                  toolbarActionPendingRef.current.add = false;
-                                  setToolbarActionPending((current) => ({ ...current, add: false }));
-                                });
-                              },
-                              children: /* @__PURE__ */ jsx42(Plus, {})
-                            }
-                          ) : null,
-                          toolbar?.actions
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )),
-              /* @__PURE__ */ jsxs32("div", { "data-matrx-table-body-region": true, className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-                coverageResult && coverageResult.notice && !toolbar?.singleRow ? /* @__PURE__ */ jsxs32(
-                  "div",
-                  {
-                    "data-matrx-table-coverage": true,
-                    "data-matrx-table-coverage-scope": coverageResult.scope,
-                    role: "status",
-                    className: "flex shrink-0 items-start gap-2 rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-500/40 dark:bg-amber-950/40 dark:text-amber-200",
-                    children: [
-                      /* @__PURE__ */ jsx42("span", { className: "shrink-0 whitespace-nowrap font-semibold", children: coverageResult.badge }),
-                      /* @__PURE__ */ jsx42("span", { className: "min-w-0", children: coverageResult.notice })
-                    ]
-                  }
-                ) : null,
-                /* @__PURE__ */ jsxs32("div", { className: "relative min-h-0 flex-1", children: [
-                  mobileCards ? /* @__PURE__ */ jsxs32(
-                    "div",
-                    {
-                      ref: cardsScrollRef,
-                      "data-matrx-table-cards-scroll": true,
-                      "aria-busy": isLoading || isFetching,
-                      ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
-                      className: cn(
-                        "relative flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
-                        mobileCardsClass
-                      ),
-                      children: [
-                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ jsxs32(
-                          "div",
-                          {
-                            role: "status",
-                            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
-                            children: [
-                              /* @__PURE__ */ jsx42("div", { className: "h-full w-full animate-pulse bg-primary" }),
-                              /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Refreshing table data" })
-                            ]
-                          }
-                        ) : null,
-                        isLoading ? Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx42(
-                          Skeleton,
-                          {
-                            className: "h-52 w-full shrink-0 rounded-lg"
-                          },
-                          `mobile-card-sk-${index}`
-                        )) : paginated.length === 0 ? /* @__PURE__ */ jsx42("div", { className: "flex min-h-48 flex-1 items-center justify-center px-4 py-12 text-center", children: /* @__PURE__ */ jsxs32("div", { className: "flex max-w-sm flex-col items-center gap-2", children: [
-                          renderedEmptyState?.icon,
-                          /* @__PURE__ */ jsx42("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
-                          renderedEmptyState?.description ? /* @__PURE__ */ jsx42("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
-                          renderedEmptyState?.action
-                        ] }) }) : paginated.map((row, index) => {
-                          const id = getRowId(row);
-                          const displayRow = applyRowEdits(row, edits[id]);
-                          const controls = buildRecordControls(displayRow);
-                          const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
-                          return /* @__PURE__ */ jsx42("div", { "data-row-id": id, className: "contents", children: mobileCards(displayRow, index, {
-                            renderCell: (columnKey) => {
-                              const column = columns.find((candidate) => columnId(candidate) === columnKey);
-                              return column ? renderRecordCell(row, column, index) : null;
-                            },
-                            selected: selectedIdSet.has(getSelectionId(row)),
-                            selectable,
-                            onSelectedChange: (nextSelected) => {
-                              if (!selection || !selectable || nextSelected === selectedIdSet.has(getSelectionId(row))) {
-                                return;
-                              }
-                              const next = new Set(selectedIdSet);
-                              const selectionId = getSelectionId(row);
-                              if (nextSelected) next.add(selectionId);
-                              else next.delete(selectionId);
-                              setSelectedIds(next);
-                            },
-                            actions: showInlineRowCopy || rowActions ? /* @__PURE__ */ jsxs32(
+                                ) : null,
+                                ...canExpandRow(row) ? {
+                                  isExpanded: isRowExpanded(row),
+                                  toggleExpanded: () => toggleExpanded(row)
+                                } : {},
+                                expandedDetail: expandedDetail && isRowExpanded(row) ? expandedDetail.render(displayRow, controls) : null
+                              }) }, id);
+                            }),
+                            appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsxs32(
                               "div",
                               {
-                                "data-matrx-table-row-actions": true,
-                                className: "inline-flex items-center justify-end gap-0",
-                                onClick: (event) => event.stopPropagation(),
+                                "data-matrx-table-append-loading-card": true,
+                                role: "status",
+                                "aria-live": "polite",
+                                className: "sticky bottom-0 z-20 flex h-16 w-full max-w-[100cqw] shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-card/95 px-3 text-sm font-medium text-foreground shadow-sm backdrop-blur-sm",
                                 children: [
-                                  showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ jsx42(
-                                    TableRowCopyControl,
+                                  /* @__PURE__ */ jsx42(
+                                    Loader2,
                                     {
-                                      size: "toolbar",
-                                      copy: effectiveCopy,
-                                      row: displayRow,
-                                      sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
-                                      ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                                      "aria-hidden": "true",
+                                      className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
                                     }
-                                  ) : null,
-                                  renderRowActions(displayRow, controls)
+                                  ),
+                                  "Loading more rows\u2026"
                                 ]
                               }
+                            ) : null
+                          ]
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsxs32(
+                        "div",
+                        {
+                          ref: scrollRef,
+                          "data-matrx-table-scroll": true,
+                          onScroll: updateScrollHint,
+                          ...spreadsheetEnabled ? {
+                            tabIndex: sheet.containerProps.tabIndex,
+                            onKeyDown: sheet.containerProps.onKeyDown,
+                            onCopy: sheet.containerProps.onCopy,
+                            onCut: sheet.containerProps.onCut,
+                            onPaste: sheet.containerProps.onPaste,
+                            "data-matrx-table-spreadsheet": "true"
+                          } : {},
+                          "aria-busy": isLoading || isFetching,
+                          style: { containerType: "inline-size" },
+                          className: cn(
+                            "relative h-full w-full overflow-auto rounded-md border border-border bg-card",
+                            mobileCards && tableWithCardsClass,
+                            tableClassName
+                          ),
+                          children: [
+                            hierarchy && draggedRow ? /* @__PURE__ */ jsx42(
+                              HierarchyRootDropTarget,
+                              {
+                                label: hierarchy.rootDropLabel ?? "Drop here to move to the top level",
+                                draggedLabel: hierarchy.itemLabel?.(draggedRow) ?? "Moving row"
+                              }
                             ) : null,
-                            ...canExpandRow(row) ? {
-                              isExpanded: isRowExpanded(row),
-                              toggleExpanded: () => toggleExpanded(row)
-                            } : {},
-                            expandedDetail: expandedDetail && isRowExpanded(row) ? expandedDetail.render(displayRow, controls) : null
-                          }) }, id);
-                        }),
-                        appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsxs32(
-                          "div",
-                          {
-                            "data-matrx-table-append-loading-card": true,
-                            role: "status",
-                            "aria-live": "polite",
-                            className: "sticky bottom-0 z-20 flex h-16 w-full max-w-[100cqw] shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-card/95 px-3 text-sm font-medium text-foreground shadow-sm backdrop-blur-sm",
-                            children: [
-                              /* @__PURE__ */ jsx42(
-                                Loader2,
-                                {
-                                  "aria-hidden": "true",
-                                  className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
-                                }
-                              ),
-                              "Loading more rows\u2026"
-                            ]
-                          }
-                        ) : null
-                      ]
-                    }
-                  ) : null,
-                  /* @__PURE__ */ jsxs32(
-                    "div",
-                    {
-                      ref: scrollRef,
-                      "data-matrx-table-scroll": true,
-                      onScroll: updateScrollHint,
-                      ...spreadsheetEnabled ? {
-                        tabIndex: sheet.containerProps.tabIndex,
-                        onKeyDown: sheet.containerProps.onKeyDown,
-                        onCopy: sheet.containerProps.onCopy,
-                        onCut: sheet.containerProps.onCut,
-                        onPaste: sheet.containerProps.onPaste,
-                        "data-matrx-table-spreadsheet": "true"
-                      } : {},
-                      "aria-busy": isLoading || isFetching,
-                      style: { containerType: "inline-size" },
-                      className: cn(
-                        "relative h-full w-full overflow-auto rounded-md border border-border bg-card",
-                        mobileCards && tableWithCardsClass,
-                        tableClassName
-                      ),
-                      children: [
-                        hierarchy && draggedRow ? /* @__PURE__ */ jsx42(
-                          HierarchyRootDropTarget,
-                          {
-                            label: hierarchy.rootDropLabel ?? "Drop here to move to the top level",
-                            draggedLabel: hierarchy.itemLabel?.(draggedRow) ?? "Moving row"
-                          }
-                        ) : null,
-                        hierarchy && draggedRowId ? /* @__PURE__ */ jsx42(
-                          HierarchyDragIndicatorLayer,
-                          {
-                            scrollRef,
-                            resolve: resolveHierarchyMove
-                          }
-                        ) : null,
-                        isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ jsxs32(
-                          "div",
-                          {
-                            role: "status",
-                            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
-                            children: [
-                              /* @__PURE__ */ jsx42("div", { className: "h-full w-full animate-pulse bg-primary" }),
-                              /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Refreshing table data" })
-                            ]
-                          }
-                        ) : null,
-                        /* @__PURE__ */ jsxs32(
-                          "table",
-                          {
-                            ref: tableRef,
-                            style: !fixedLayoutActive ? void 0 : {
-                              // Track the same preview variables as the cells. A stale
-                              // pre-resize total redistributes spare width under fixed
-                              // layout and defeats both exact shrinking and max bounds.
-                              "--matrx-resized-table-width": `calc(${visibleColumns.map((column) => {
-                                const id = columnId(column);
-                                return resizableColumns && column.resizable !== false ? `var(${columnResizeCssVar(id)}, ${effectiveColumnWidths[id]}px)` : `${effectiveColumnWidths[id]}px`;
-                              }).join(" + ")} + ${(selection ? fixedTableGeometry?.selectionWidth ?? 0 : 0) + (showActionsCol ? fixedTableGeometry?.actionsWidth ?? 0 : 0)}px)`
-                            },
-                            className: cn(
-                              "table w-max min-w-full max-w-none caption-bottom overflow-visible text-sm sm:w-full sm:min-w-0 sm:max-w-full",
-                              fixedLayoutActive && "sm:table-fixed sm:max-w-none sm:w-[var(--matrx-resized-table-width)]"
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsx42(
-                                "thead",
-                                {
-                                  ref: tableHeaderRef,
-                                  "data-matrx-table-sticky-header": stickyHeader ? "true" : void 0,
-                                  className: cn(
-                                    // 🚨 ABOVE THE FROZEN COLUMN, NOT UNDER IT. A frozen body
-                                    // cell is `sm:z-20` so it can slide under the columns to
-                                    // its right; the header was `z-10`, so the frozen column's
-                                    // cells scrolled straight OVER the header they belong to
-                                    // and the top data row printed through the column names.
-                                    // Only a table long enough to scroll shows it, which is why
-                                    // it survived until a hundred-thousand-row screenshot.
-                                    "z-30 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm",
-                                    stickyHeader && (documentStickyHeader ? "relative translate-y-[var(--matrx-document-sticky-offset)]" : "sticky top-0")
-                                  ),
-                                  children: /* @__PURE__ */ jsxs32("tr", { children: [
-                                    selection ? /* @__PURE__ */ jsx42(
-                                      "th",
-                                      {
-                                        "data-matrx-table-selection-column": true,
-                                        className: cn(
-                                          "h-9 w-9 px-2 text-left align-middle",
-                                          frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-30 sm:bg-muted"
-                                        ),
-                                        style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
-                                        children: /* @__PURE__ */ jsx42(
-                                          "div",
-                                          {
-                                            "data-matrx-table-selection-target": true,
-                                            onClick: (event) => {
-                                              if (event.target === event.currentTarget) {
-                                                event.currentTarget.querySelector('[role="checkbox"]')?.click();
-                                              }
-                                            },
-                                            children: /* @__PURE__ */ jsx42(
-                                              Checkbox,
-                                              {
-                                                className: CHECKBOX_TAP_AREA,
-                                                checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
-                                                disabled: selectableRows.length === 0,
-                                                onCheckedChange: toggleAllOnPage,
-                                                "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
-                                              }
-                                            )
-                                          }
-                                        )
-                                      }
-                                    ) : null,
-                                    columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx42(
-                                      "th",
-                                      {
-                                        "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) => {
-                                      const id = columnId(col);
-                                      const meta = filterMeta.get(id);
-                                      const isSorted = sort?.id === id;
-                                      const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
-                                      const defaultSortDirection = col.defaultSortDirection ?? "asc";
-                                      const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
-                                      const columnResizable = resizableColumns && col.resizable !== false;
-                                      const marker = resolveColumnMarker(col);
-                                      const compact = col.compact || marker !== void 0;
-                                      const width = marker && col.width === void 0 ? 40 : col.width;
-                                      const minWidth = marker && col.minWidth === void 0 ? 40 : col.minWidth;
-                                      return /* @__PURE__ */ jsxs32(
-                                        "th",
-                                        {
-                                          "data-matrx-table-column-id": id,
-                                          "data-matrx-header-column-id": id,
-                                          "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
-                                          "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
-                                          className: cn(
-                                            "relative h-9 text-left align-middle max-sm:whitespace-nowrap",
-                                            // ICON COLUMN (MatrxColumnDef.compact): a 40px star
-                                            // column cannot honor `width: 40` while paying 16px of
-                                            // padding for a 14px glyph.
-                                            compact ? "px-1" : "px-2",
-                                            // An intentional mobile column set (see
-                                            // MatrxColumnDef.mobileHidden). CSS, not a JS
-                                            // breakpoint — no hydration mismatch, and the column
-                                            // stays sortable/filterable from the toolbar.
-                                            col.mobileHidden && "max-sm:hidden",
-                                            // Consumer widths are desktop tuning: applied from `sm`
-                                            // up via a CSS var. The minimum is load-bearing: without
-                                            // it, a crowded table crushes a declared 190px column to a
-                                            // few characters wide instead of using the canonical
-                                            // horizontal-scroll surface.
-                                            (width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
-                                            col.headerClassName,
-                                            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",
-                                            frozenColumns.offsets[id] !== void 0 && FROZEN_HEADER_CLASS,
-                                            frozenEdgeId === id && FROZEN_EDGE_CLASS
-                                          ),
-                                          style: {
-                                            ...columnWidthVar(width, windowedWidthFor(id, width), id, columnResizable),
-                                            ...frozenStyle(id)
-                                          },
-                                          children: [
-                                            /* @__PURE__ */ jsx42(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx42(
-                                              ColumnHeaderCell,
-                                              {
-                                                label: col.header,
-                                                labelText: headerLabel,
-                                                ...facetsEnabled ? {
-                                                  facets: facetState[id]?.data ?? null,
-                                                  facetsLoading: facetState[id]?.loading ?? false,
-                                                  ...facetState[id]?.error === void 0 ? {} : { facetsError: facetState[id]?.error },
-                                                  onFilterOpen: () => requestFacets(id)
-                                                } : {},
-                                                sortable: col.sortable !== false,
-                                                isSorted: Boolean(isSorted),
-                                                sortDirection: sort?.direction ?? defaultSortDirection,
-                                                onSortAsc: () => setSort({ id, direction: "asc" }),
-                                                onSortDesc: () => setSort({ id, direction: "desc" }),
-                                                onClearSort: () => setSort(null),
-                                                onHeaderSortClick: () => {
-                                                  if (!isSorted) {
-                                                    setSort({ id, direction: defaultSortDirection });
-                                                    return;
-                                                  }
-                                                  if (sort?.direction === "asc") {
-                                                    setSort({ id, direction: "desc" });
-                                                    return;
-                                                  }
-                                                  setSort({ id, direction: "asc" });
-                                                },
-                                                filterKind: meta?.kind ?? null,
-                                                filterValue: columnFilters[id],
-                                                onFilterChange: (next) => setColumnFilter(id, next),
-                                                selectOptions: meta?.options,
-                                                selectSingle: col.filterSingle,
-                                                selectAllowCustom: col.filterAllowCustom,
-                                                filterApplyLabel: filterUi?.applyLabel,
-                                                filterShowCancel: filterUi?.showCancel,
-                                                filterFooterHint: filterUi?.footerHint,
-                                                allowNegation: filterUi?.allowNegation,
-                                                allowNullModes: filterUi?.allowNullModes,
-                                                align: col.align,
-                                                compact,
-                                                marker,
-                                                reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
-                                              }
-                                            ) }),
-                                            columnResizable ? /* @__PURE__ */ jsx42(
-                                              ColumnResizeHandle,
-                                              {
-                                                columnId: id,
-                                                label: headerLabel,
-                                                tableRef,
-                                                minWidth,
-                                                maxWidth: col.maxWidth,
-                                                onResizeStart: captureResizeGestureSnapshot,
-                                                onResizeCancel: clearResizeGestureSnapshot,
-                                                onResizeCommit: (columnId2, width2) => commitColumnWidths(
-                                                  { ...effectiveColumnWidths, [columnId2]: width2 },
-                                                  true
-                                                )
-                                              }
-                                            ) : null
-                                          ]
-                                        },
-                                        id
-                                      );
-                                    }),
-                                    columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx42(
-                                      "th",
-                                      {
-                                        "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__ */ jsx42(
-                                      "th",
-                                      {
-                                        "data-matrx-table-actions-column": true,
-                                        className: "h-9 w-px whitespace-nowrap px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-                                        style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                        children: /* @__PURE__ */ jsx42("span", { "data-matrx-table-actions-label": true, className: "inline-block whitespace-nowrap", children: "Actions" })
-                                      }
-                                    )
-                                  ] })
-                                }
-                              ),
-                              /* @__PURE__ */ jsxs32("tbody", { children: [
-                                isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs32("tr", { className: "border-b border-border/60", children: [
-                                  selection ? /* @__PURE__ */ jsx42("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ jsx42(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
-                                  columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx42(
-                                    "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) => /* @__PURE__ */ jsx42(
-                                    "td",
-                                    {
-                                      className: cn(
-                                        "py-2",
-                                        col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
-                                        col.mobileHidden && "max-sm:hidden"
-                                      ),
-                                      children: /* @__PURE__ */ jsx42(Skeleton, { className: "h-5 w-full" })
-                                    },
-                                    columnId(col)
-                                  )),
-                                  showActionsCol && /* @__PURE__ */ jsx42("td", { className: "text-right align-middle", style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth), children: /* @__PURE__ */ jsx42(Skeleton, { className: "ml-auto h-5 w-10" }) }),
-                                  columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx42(
-                                    "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
-                                ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ jsx42("tr", { children: /* @__PURE__ */ jsx42(
-                                  "td",
-                                  {
-                                    colSpan: renderedColSpan,
-                                    className: "px-0 py-12 text-center",
-                                    children: /* @__PURE__ */ jsxs32("div", { "data-matrx-table-empty-state": true, className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: [
-                                      renderedEmptyState?.icon,
-                                      /* @__PURE__ */ jsx42("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
-                                      renderedEmptyState?.description ? /* @__PURE__ */ jsx42("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
-                                      renderedEmptyState?.action
-                                    ] })
-                                  }
-                                ) }) : bodyEntries.map((entry) => {
-                                  if (entry.kind === "spacer") {
-                                    return /* @__PURE__ */ jsx42(
-                                      "tr",
-                                      {
-                                        "aria-hidden": "true",
-                                        "data-matrx-table-virtual-spacer": entry.place,
-                                        style: { height: `${entry.height}px` },
-                                        children: /* @__PURE__ */ jsx42(
-                                          "td",
-                                          {
-                                            className: "border-0 p-0",
-                                            colSpan: renderedColSpan
-                                          }
-                                        )
-                                      },
-                                      `matrx-virtual-spacer-${entry.place}`
-                                    );
-                                  }
-                                  if (entry.kind === "group") {
-                                    return /* @__PURE__ */ jsx42(
-                                      TableGroupHeaderRow,
-                                      {
-                                        group: entry.group,
-                                        collapsed: entry.collapsed,
-                                        columns: renderedColumns,
-                                        spacers: columnSpacers,
-                                        leadingCols,
-                                        showActionsCol,
-                                        rowNoun: grouping?.rowNoun ?? "row",
-                                        ...grouping?.renderLabel ? { renderLabel: grouping.renderLabel } : {},
-                                        onToggle: () => setCollapsedGroups(toggleGroupCollapsed(collapsedGroups, entry.group.key))
-                                      },
-                                      `matrx-group-${entry.group.key}`
-                                    );
-                                  }
-                                  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__ */ jsxs32(
-                                    "tr",
+                            hierarchy && draggedRowId ? /* @__PURE__ */ jsx42(
+                              HierarchyDragIndicatorLayer,
+                              {
+                                scrollRef,
+                                resolve: resolveHierarchyMove
+                              }
+                            ) : null,
+                            isFetching && !isLoading && appendQuery === null ? /* @__PURE__ */ jsxs32(
+                              "div",
+                              {
+                                role: "status",
+                                className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
+                                children: [
+                                  /* @__PURE__ */ jsx42("div", { className: "h-full w-full animate-pulse bg-primary" }),
+                                  /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Refreshing table data" })
+                                ]
+                              }
+                            ) : null,
+                            /* @__PURE__ */ jsxs32(
+                              "table",
+                              {
+                                ref: tableRef,
+                                style: !fixedLayoutActive ? void 0 : {
+                                  // Track the same preview variables as the cells. A stale
+                                  // pre-resize total redistributes spare width under fixed
+                                  // layout and defeats both exact shrinking and max bounds.
+                                  "--matrx-resized-table-width": `calc(${visibleColumns.map((column) => {
+                                    const id = columnId(column);
+                                    return resizableColumns && column.resizable !== false ? `var(${columnResizeCssVar(id)}, ${effectiveColumnWidths[id]}px)` : `${effectiveColumnWidths[id]}px`;
+                                  }).join(" + ")} + ${(selection ? fixedTableGeometry?.selectionWidth ?? 0 : 0) + (showActionsCol ? fixedTableGeometry?.actionsWidth ?? 0 : 0)}px)`
+                                },
+                                className: cn(
+                                  "table w-max min-w-full max-w-none caption-bottom overflow-visible text-sm sm:w-full sm:min-w-0 sm:max-w-full",
+                                  fixedLayoutActive && "sm:table-fixed sm:max-w-none sm:w-[var(--matrx-resized-table-width)]"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx42(
+                                    "thead",
                                     {
-                                      "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 (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");
-                                        }
-                                      },
+                                      ref: tableHeaderRef,
+                                      "data-matrx-table-sticky-header": stickyHeader ? "true" : void 0,
                                       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
+                                        // 🚨 ABOVE THE FROZEN COLUMN, NOT UNDER IT. A frozen body
+                                        // cell is `sm:z-20` so it can slide under the columns to
+                                        // its right; the header was `z-10`, so the frozen column's
+                                        // cells scrolled straight OVER the header they belong to
+                                        // and the top data row printed through the column names.
+                                        // Only a table long enough to scroll shows it, which is why
+                                        // it survived until a hundred-thousand-row screenshot.
+                                        "z-30 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm",
+                                        stickyHeader && (documentStickyHeader ? "relative translate-y-[var(--matrx-document-sticky-offset)]" : "sticky top-0")
                                       ),
-                                      children: [
+                                      children: /* @__PURE__ */ jsxs32("tr", { children: [
                                         selection ? /* @__PURE__ */ jsx42(
-                                          "td",
+                                          "th",
                                           {
+                                            "data-matrx-table-selection-column": true,
                                             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))]"
-                                              )
+                                              "h-9 w-9 px-2 text-left align-middle",
+                                              frozenColumns.selectionOffset !== null && "sm:sticky sm:left-0 sm:z-30 sm:bg-muted"
                                             ),
                                             style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
-                                            onClick: (e) => e.stopPropagation(),
-                                            children: selection.isRowSelectable?.(row) ?? true ? /* @__PURE__ */ jsx42(
+                                            children: /* @__PURE__ */ jsx42(
                                               "div",
                                               {
                                                 "data-matrx-table-selection-target": true,
@@ -15119,17 +15187,18 @@ function MatrxDataTableCore({
                                                   Checkbox,
                                                   {
                                                     className: CHECKBOX_TAP_AREA,
-                                                    checked: isChecked,
-                                                    "aria-label": `Select this ${selectionNoun}`,
-                                                    onClick: (e) => toggleRowSelected(index, e.shiftKey)
+                                                    checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
+                                                    disabled: selectableRows.length === 0,
+                                                    onCheckedChange: toggleAllOnPage,
+                                                    "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
                                                   }
                                                 )
                                               }
-                                            ) : null
+                                            )
                                           }
                                         ) : null,
                                         columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx42(
-                                          "td",
+                                          "th",
                                           {
                                             "aria-hidden": "true",
                                             "data-matrx-table-column-spacer": "start",
@@ -15138,145 +15207,124 @@ function MatrxDataTableCore({
                                           },
                                           "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)
-                                          );
+                                        renderedColumns.map((col) => {
+                                          const id = columnId(col);
+                                          const meta = filterMeta.get(id);
+                                          const isSorted = sort?.id === id;
+                                          const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
+                                          const defaultSortDirection = col.defaultSortDirection ?? "asc";
+                                          const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
+                                          const columnResizable = resizableColumns && col.resizable !== false;
+                                          const marker = resolveColumnMarker(col);
+                                          const compact = col.compact || marker !== void 0;
+                                          const width = marker && col.width === void 0 ? 40 : col.width;
+                                          const minWidth = marker && col.minWidth === void 0 ? 40 : col.minWidth;
                                           return /* @__PURE__ */ jsxs32(
-                                            "td",
+                                            "th",
                                             {
-                                              "data-matrx-table-column-id": columnId(col),
+                                              "data-matrx-table-column-id": id,
+                                              "data-matrx-header-column-id": id,
                                               "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
-                                              } : {},
+                                              "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
                                               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",
+                                                "relative h-9 text-left align-middle max-sm:whitespace-nowrap",
+                                                // ICON COLUMN (MatrxColumnDef.compact): a 40px star
+                                                // column cannot honor `width: 40` while paying 16px of
+                                                // padding for a 14px glyph.
+                                                compact ? "px-1" : "px-2",
+                                                // An intentional mobile column set (see
+                                                // MatrxColumnDef.mobileHidden). CSS, not a JS
+                                                // breakpoint — no hydration mismatch, and the column
+                                                // stays sortable/filterable from the toolbar.
                                                 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,
+                                                // Consumer widths are desktop tuning: applied from `sm`
+                                                // up via a CSS var. The minimum is load-bearing: without
+                                                // it, a crowded table crushes a declared 190px column to a
+                                                // few characters wide instead of using the canonical
+                                                // horizontal-scroll surface.
+                                                (width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
+                                                col.headerClassName,
                                                 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)
+                                                frozenColumns.offsets[id] !== void 0 && FROZEN_HEADER_CLASS,
+                                                frozenEdgeId === id && FROZEN_EDGE_CLASS
                                               ),
                                               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))
+                                                ...columnWidthVar(width, windowedWidthFor(id, width), id, columnResizable),
+                                                ...frozenStyle(id)
                                               },
                                               children: [
-                                                /* @__PURE__ */ jsxs32(
-                                                  "div",
+                                                /* @__PURE__ */ jsx42(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx42(
+                                                  ColumnHeaderCell,
                                                   {
-                                                    className: cn(
-                                                      colIdx === 0 && (hierarchy || canExpandRow(row)) && "flex min-w-0 items-center"
-                                                    ),
-                                                    children: [
-                                                      colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx42(
-                                                        HierarchyDragHandle,
-                                                        {
-                                                          id,
-                                                          label: hierarchy.itemLabel?.(row) ?? "row",
-                                                          disabled: !(hierarchy.canReparent?.(row) ?? true)
-                                                        }
-                                                      ) : null,
-                                                      colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                                                        /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                                                          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__ */ jsx42(
-                                                              ChevronRight,
-                                                              {
-                                                                className: cn(
-                                                                  "transition-transform",
-                                                                  isRowExpanded(row) && "rotate-90"
-                                                                )
-                                                              }
-                                                            )
-                                                          }
-                                                        ) }),
-                                                        /* @__PURE__ */ jsx42(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
-                                                      ] }) : null,
-                                                      /* @__PURE__ */ jsx42(
-                                                        "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)
-                                                        }
-                                                      )
-                                                    ]
+                                                    label: col.header,
+                                                    labelText: headerLabel,
+                                                    ...facetsEnabled ? {
+                                                      facets: facetState[id]?.data ?? null,
+                                                      facetsLoading: facetState[id]?.loading ?? false,
+                                                      ...facetState[id]?.error === void 0 ? {} : { facetsError: facetState[id]?.error },
+                                                      onFilterOpen: () => requestFacets(id)
+                                                    } : {},
+                                                    sortable: col.sortable !== false,
+                                                    isSorted: Boolean(isSorted),
+                                                    sortDirection: sort?.direction ?? defaultSortDirection,
+                                                    onSortAsc: () => setSort({ id, direction: "asc" }),
+                                                    onSortDesc: () => setSort({ id, direction: "desc" }),
+                                                    onClearSort: () => setSort(null),
+                                                    onHeaderSortClick: () => {
+                                                      if (!isSorted) {
+                                                        setSort({ id, direction: defaultSortDirection });
+                                                        return;
+                                                      }
+                                                      if (sort?.direction === "asc") {
+                                                        setSort({ id, direction: "desc" });
+                                                        return;
+                                                      }
+                                                      setSort({ id, direction: "asc" });
+                                                    },
+                                                    filterKind: meta?.kind ?? null,
+                                                    filterValue: columnFilters[id],
+                                                    onFilterChange: (next) => setColumnFilter(id, next),
+                                                    selectOptions: meta?.options,
+                                                    selectSingle: col.filterSingle,
+                                                    selectAllowCustom: col.filterAllowCustom,
+                                                    filterApplyLabel: filterUi?.applyLabel,
+                                                    filterShowCancel: filterUi?.showCancel,
+                                                    filterFooterHint: filterUi?.footerHint,
+                                                    allowNegation: filterUi?.allowNegation,
+                                                    allowNullModes: filterUi?.allowNullModes,
+                                                    align: col.align,
+                                                    compact,
+                                                    marker,
+                                                    reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0,
+                                                    menuItems: col.headerMenu,
+                                                    MenuIcon: host.MenuIcon
                                                   }
-                                                ),
-                                                carriesFillHandle ? /* @__PURE__ */ jsx42(
-                                                  "button",
+                                                ) }),
+                                                columnResizable ? /* @__PURE__ */ jsx42(
+                                                  ColumnResizeHandle,
                                                   {
-                                                    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"
+                                                    columnId: id,
+                                                    label: headerLabel,
+                                                    tableRef,
+                                                    minWidth,
+                                                    maxWidth: col.maxWidth,
+                                                    onResizeStart: captureResizeGestureSnapshot,
+                                                    onResizeCancel: clearResizeGestureSnapshot,
+                                                    onResizeCommit: (columnId2, width2) => commitColumnWidths(
+                                                      { ...effectiveColumnWidths, [columnId2]: width2 },
+                                                      true
+                                                    )
                                                   }
                                                 ) : null
                                               ]
                                             },
-                                            columnId(col)
+                                            id
                                           );
                                         }),
                                         columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx42(
-                                          "td",
+                                          "th",
                                           {
                                             "aria-hidden": "true",
                                             "data-matrx-table-column-spacer": "end",
@@ -15286,629 +15334,977 @@ function MatrxDataTableCore({
                                           "matrx-column-spacer-end"
                                         ) : null,
                                         showActionsCol && /* @__PURE__ */ jsx42(
-                                          "td",
+                                          "th",
                                           {
-                                            "data-matrx-table-row-action-cell": true,
-                                            className: "text-right align-middle",
+                                            "data-matrx-table-actions-column": true,
+                                            className: "h-9 w-px whitespace-nowrap px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
                                             style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                            children: /* @__PURE__ */ jsxs32(
-                                              "div",
-                                              {
-                                                "data-matrx-table-row-actions": true,
-                                                className: "inline-flex items-center justify-end gap-0",
-                                                onClick: (e) => e.stopPropagation(),
-                                                children: [
-                                                  showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ jsx42(
-                                                    TableRowCopyControl,
-                                                    {
-                                                      size: "toolbar",
-                                                      copy: effectiveCopy,
-                                                      row: displayRow,
-                                                      sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
-                                                      ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
-                                                    }
-                                                  ) : null,
-                                                  renderRowActions(displayRow, controls),
-                                                  windowEnabled ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                                                    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                                                      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__ */ jsx42(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx42(PanelRight, { className: "h-5 w-5" })
-                                                      }
-                                                    ) }),
-                                                    /* @__PURE__ */ jsx42(TooltipContent, { children: windowConfig?.openOnRowClick === true ? "Open in side panel" : "Open in window" })
-                                                  ] }) : null
-                                                ]
-                                              }
-                                            )
+                                            children: /* @__PURE__ */ jsx42("span", { "data-matrx-table-actions-label": true, className: "inline-block whitespace-nowrap", children: "Actions" })
                                           }
                                         )
-                                      ]
-                                    },
-                                    id
-                                  );
-                                  const wrappedRow = rowWrapper ? rowWrapper(row, rowNode) : rowNode;
-                                  const inlineDetail = expandedDetail && isRowExpanded(row) ? /* @__PURE__ */ jsx42(
-                                    "tr",
-                                    {
-                                      "data-matrx-table-expanded-detail": id,
-                                      className: cn("bg-muted/20", expandedDetail.className),
-                                      children: /* @__PURE__ */ jsx42(
+                                      ] })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs32("tbody", { children: [
+                                    isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs32("tr", { className: "border-b border-border/60", children: [
+                                      selection ? /* @__PURE__ */ jsx42("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ jsx42(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,
+                                      columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx42(
                                         "td",
                                         {
-                                          colSpan: renderedColSpan,
-                                          className: "p-4",
-                                          children: expandedDetail.render(displayRow, controls)
-                                        }
-                                      )
-                                    },
-                                    `${id}:expanded-detail`
-                                  ) : null;
-                                  return hierarchy ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
-                                    /* @__PURE__ */ jsx42(
-                                      HierarchyDroppableRow,
+                                          "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) => /* @__PURE__ */ jsx42(
+                                        "td",
+                                        {
+                                          className: cn(
+                                            "py-2",
+                                            col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
+                                            col.mobileHidden && "max-sm:hidden"
+                                          ),
+                                          children: /* @__PURE__ */ jsx42(Skeleton, { className: "h-5 w-full" })
+                                        },
+                                        columnId(col)
+                                      )),
+                                      showActionsCol && /* @__PURE__ */ jsx42("td", { className: "text-right align-middle", style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth), children: /* @__PURE__ */ jsx42(Skeleton, { className: "ml-auto h-5 w-10" }) }),
+                                      columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx42(
+                                        "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
+                                    ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ jsx42("tr", { children: /* @__PURE__ */ jsx42(
+                                      "td",
                                       {
-                                        id,
-                                        disabled: !canDropOn(row),
-                                        children: wrappedRow
+                                        colSpan: renderedColSpan,
+                                        className: "px-0 py-12 text-center",
+                                        children: /* @__PURE__ */ jsxs32("div", { "data-matrx-table-empty-state": true, className: "sticky left-0 flex flex-col items-center gap-2 whitespace-normal px-4", style: { width: "100cqw", maxWidth: "100%" }, children: [
+                                          renderedEmptyState?.icon,
+                                          /* @__PURE__ */ jsx42("p", { className: "text-sm font-medium text-foreground", children: renderedEmptyState?.title ?? "No rows" }),
+                                          renderedEmptyState?.description ? /* @__PURE__ */ jsx42("p", { className: "text-xs text-muted-foreground", children: renderedEmptyState.description }) : null,
+                                          renderedEmptyState?.action
+                                        ] })
                                       }
-                                    ),
-                                    inlineDetail
-                                  ] }, id) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
-                                    wrappedRow,
-                                    inlineDetail
-                                  ] }, id);
-                                }),
-                                appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsx42("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ jsx42(
-                                  "td",
-                                  {
-                                    colSpan: renderedColSpan,
-                                    className: "sticky bottom-0 z-20 h-16 border-y border-border bg-card/95 px-0 py-0 text-left shadow-sm backdrop-blur-sm",
-                                    children: /* @__PURE__ */ jsxs32(
-                                      "div",
-                                      {
-                                        role: "status",
-                                        "aria-live": "polite",
-                                        className: "sticky left-0 flex h-16 w-fit max-w-[100cqw] items-center justify-center gap-2 px-3 text-sm font-medium text-foreground",
-                                        children: [
-                                          /* @__PURE__ */ jsx42(
-                                            Loader2,
-                                            {
-                                              "aria-hidden": "true",
-                                              className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
+                                    ) }) : bodyEntries.map((entry) => {
+                                      if (entry.kind === "spacer") {
+                                        return /* @__PURE__ */ jsx42(
+                                          "tr",
+                                          {
+                                            "aria-hidden": "true",
+                                            "data-matrx-table-virtual-spacer": entry.place,
+                                            style: { height: `${entry.height}px` },
+                                            children: /* @__PURE__ */ jsx42(
+                                              "td",
+                                              {
+                                                className: "border-0 p-0",
+                                                colSpan: renderedColSpan
+                                              }
+                                            )
+                                          },
+                                          `matrx-virtual-spacer-${entry.place}`
+                                        );
+                                      }
+                                      if (entry.kind === "group") {
+                                        return /* @__PURE__ */ jsx42(
+                                          TableGroupHeaderRow,
+                                          {
+                                            group: entry.group,
+                                            collapsed: entry.collapsed,
+                                            columns: renderedColumns,
+                                            spacers: columnSpacers,
+                                            leadingCols,
+                                            showActionsCol,
+                                            rowNoun: grouping?.rowNoun ?? "row",
+                                            ...grouping?.renderLabel ? { renderLabel: grouping.renderLabel } : {},
+                                            onToggle: () => setCollapsedGroups(toggleGroupCollapsed(collapsedGroups, entry.group.key))
+                                          },
+                                          `matrx-group-${entry.group.key}`
+                                        );
+                                      }
+                                      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__ */ jsxs32(
+                                        "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) => {
+                                            if (rowEventTargetsInteractiveDescendant(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
                                           ),
-                                          "Loading more rows\u2026"
-                                        ]
-                                      }
-                                    )
-                                  }
-                                ) }) : null
-                              ] }),
-                              footerRows.length > 0 ? /* @__PURE__ */ jsx42("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ jsxs32("tr", { children: [
-                                selection ? /* @__PURE__ */ jsx42("td", { className: "px-2 py-2" }) : null,
-                                columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx42(
-                                  "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((column) => /* @__PURE__ */ jsx42(
-                                  "td",
-                                  {
-                                    className: cn(
-                                      "px-2 py-2 align-middle",
-                                      (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
-                                      column.className,
-                                      column.align === "center" && "text-center",
-                                      column.align === "right" && "text-right"
-                                    ),
-                                    style: columnWidthVar(
-                                      resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
-                                      windowedWidthFor(columnId(column), column.width),
-                                      columnId(column),
-                                      resizableColumns && column.resizable !== false
-                                    ),
-                                    children: renderCell(row, column, index)
-                                  },
-                                  columnId(column)
-                                )),
-                                columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx42(
-                                  "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__ */ jsx42("td", {}) : null
-                              ] }, `footer-${index}`)) }) : null
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  scrollHintLeft ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon",
-                        "data-matrx-table-icon-action": true,
-                        "aria-label": "Scroll table left",
-                        "data-matrx-table-scroll-control": "left",
-                        className: "absolute left-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
-                        onClick: () => scrollTableHorizontally("left"),
-                        children: /* @__PURE__ */ jsx42(ChevronLeft, { className: "h-5 w-5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx42(TooltipContent, { children: "More columns to the left" })
-                  ] }) : null,
-                  scrollHintRight ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon",
-                        "data-matrx-table-icon-action": true,
-                        "aria-label": "Scroll table right",
-                        "data-matrx-table-scroll-control": "right",
-                        className: "absolute right-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
-                        onClick: () => scrollTableHorizontally("right"),
-                        children: /* @__PURE__ */ jsx42(ChevronRight, { className: "h-5 w-5" })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx42(TooltipContent, { children: "More columns to the right" })
-                  ] }) : null
-                ] }),
-                appendQuery ? /* @__PURE__ */ jsxs32(
-                  "div",
-                  {
-                    "data-matrx-table-footer": true,
-                    className: "flex min-h-8 shrink-0 flex-wrap items-center gap-2 border-t border-border",
-                    "aria-busy": isLoading || isFetching,
-                    children: [
-                      /* @__PURE__ */ jsxs32(
-                        "div",
-                        {
-                          ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
-                          className: "flex w-full min-w-0 items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1",
-                          children: [
-                            isLoading ? /* @__PURE__ */ jsx42(
-                              Loader2,
-                              {
-                                "data-matrx-table-append-loader": true,
-                                "aria-hidden": "true",
-                                className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
+                                          children: [
+                                            selection ? /* @__PURE__ */ jsx42(
+                                              "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__ */ jsx42(
+                                                  "div",
+                                                  {
+                                                    "data-matrx-table-selection-target": true,
+                                                    onClick: (event) => {
+                                                      if (event.target === event.currentTarget) {
+                                                        event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                                                      }
+                                                    },
+                                                    children: /* @__PURE__ */ jsx42(
+                                                      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__ */ jsx42(
+                                              "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__ */ jsxs32(
+                                                "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__ */ jsxs32(
+                                                      "div",
+                                                      {
+                                                        className: cn(
+                                                          colIdx === 0 && (hierarchy || canExpandRow(row)) && "flex min-w-0 items-center"
+                                                        ),
+                                                        children: [
+                                                          colIdx === 0 && hierarchy ? /* @__PURE__ */ jsx42(
+                                                            HierarchyDragHandle,
+                                                            {
+                                                              id,
+                                                              label: hierarchy.itemLabel?.(row) ?? "row",
+                                                              disabled: !(hierarchy.canReparent?.(row) ?? true)
+                                                            }
+                                                          ) : null,
+                                                          colIdx === 0 && canExpandRow(row) ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                                                            /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+                                                              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__ */ jsx42(
+                                                                  ChevronRight,
+                                                                  {
+                                                                    className: cn(
+                                                                      "transition-transform",
+                                                                      isRowExpanded(row) && "rotate-90"
+                                                                    )
+                                                                  }
+                                                                )
+                                                              }
+                                                            ) }),
+                                                            /* @__PURE__ */ jsx42(TooltipContent, { children: isRowExpanded(row) ? "Collapse details" : "Expand details" })
+                                                          ] }) : null,
+                                                          /* @__PURE__ */ jsx42(
+                                                            "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__ */ jsx42(
+                                                      "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__ */ jsx42(
+                                              "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__ */ jsx42(
+                                              "td",
+                                              {
+                                                "data-matrx-table-row-action-cell": true,
+                                                className: "text-right align-middle",
+                                                style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
+                                                children: /* @__PURE__ */ jsxs32(
+                                                  "div",
+                                                  {
+                                                    "data-matrx-table-row-actions": true,
+                                                    className: "inline-flex items-center justify-end gap-0",
+                                                    onClick: (e) => e.stopPropagation(),
+                                                    children: [
+                                                      showInlineRowCopy && effectiveCopy ? /* @__PURE__ */ jsx42(
+                                                        TableRowCopyControl,
+                                                        {
+                                                          size: "toolbar",
+                                                          copy: effectiveCopy,
+                                                          row: displayRow,
+                                                          sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
+                                                          ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                                                        }
+                                                      ) : null,
+                                                      renderRowActions(displayRow, controls),
+                                                      windowEnabled ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                                                        /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+                                                          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__ */ jsx42(PanelRightOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx42(PanelRight, { className: "h-5 w-5" })
+                                                          }
+                                                        ) }),
+                                                        /* @__PURE__ */ jsx42(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__ */ jsx42(
+                                        "tr",
+                                        {
+                                          "data-matrx-table-expanded-detail": id,
+                                          className: cn("bg-muted/20", expandedDetail.className),
+                                          children: /* @__PURE__ */ jsx42(
+                                            "td",
+                                            {
+                                              colSpan: renderedColSpan,
+                                              className: "p-4",
+                                              children: expandedDetail.render(displayRow, controls)
+                                            }
+                                          )
+                                        },
+                                        `${id}:expanded-detail`
+                                      ) : null;
+                                      return hierarchy ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                                        /* @__PURE__ */ jsx42(
+                                          HierarchyDroppableRow,
+                                          {
+                                            id,
+                                            disabled: !canDropOn(row),
+                                            children: wrappedRow
+                                          }
+                                        ),
+                                        inlineDetail
+                                      ] }, id) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                                        wrappedRow,
+                                        inlineDetail
+                                      ] }, id);
+                                    }),
+                                    appendQuery !== null && isFetching && !isLoading ? /* @__PURE__ */ jsx42("tr", { "data-matrx-table-append-loading-row": true, children: /* @__PURE__ */ jsx42(
+                                      "td",
+                                      {
+                                        colSpan: renderedColSpan,
+                                        className: "sticky bottom-0 z-20 h-16 border-y border-border bg-card/95 px-0 py-0 text-left shadow-sm backdrop-blur-sm",
+                                        children: /* @__PURE__ */ jsxs32(
+                                          "div",
+                                          {
+                                            role: "status",
+                                            "aria-live": "polite",
+                                            className: "sticky left-0 flex h-16 w-fit max-w-[100cqw] items-center justify-center gap-2 px-3 text-sm font-medium text-foreground",
+                                            children: [
+                                              /* @__PURE__ */ jsx42(
+                                                Loader2,
+                                                {
+                                                  "aria-hidden": "true",
+                                                  className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
+                                                }
+                                              ),
+                                              "Loading more rows\u2026"
+                                            ]
+                                          }
+                                        )
+                                      }
+                                    ) }) : null
+                                  ] }),
+                                  footerRows.length > 0 ? /* @__PURE__ */ jsx42("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ jsxs32("tr", { children: [
+                                    selection ? /* @__PURE__ */ jsx42("td", { className: "px-2 py-2" }) : null,
+                                    columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ jsx42(
+                                      "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((column) => /* @__PURE__ */ jsx42(
+                                      "td",
+                                      {
+                                        className: cn(
+                                          "px-2 py-2 align-middle",
+                                          (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
+                                          column.className,
+                                          column.align === "center" && "text-center",
+                                          column.align === "right" && "text-right"
+                                        ),
+                                        style: columnWidthVar(
+                                          resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
+                                          windowedWidthFor(columnId(column), column.width),
+                                          columnId(column),
+                                          resizableColumns && column.resizable !== false
+                                        ),
+                                        children: renderCell(row, column, index)
+                                      },
+                                      columnId(column)
+                                    )),
+                                    columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ jsx42(
+                                      "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__ */ jsx42("td", {}) : null
+                                  ] }, `footer-${index}`)) }) : null
+                                ]
                               }
-                            ) : null,
-                            /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2", children: [
-                              /* @__PURE__ */ jsx42("p", { className: "min-w-0 break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : appendQuery.pagination.sourceRecords ? `${formatCount3(processed.length)} ${appendQuery.pagination.sourceRecords.rowLabel}${appendQuery.pagination.sourceRecords.matchedRecords === void 0 ? "" : ` (${formatCount3(appendQuery.pagination.sourceRecords.matchedRecords)} matching ${appendQuery.pagination.sourceRecords.label})`} \xB7 ${formatCount3(appendQuery.pagination.sourceRecords.loaded)}${appendQuery.pagination.sourceRecords.total === void 0 ? "" : ` / ${formatCount3(appendQuery.pagination.sourceRecords.total)}`} ${appendQuery.pagination.sourceRecords.label} loaded` : `${formatCount3(data.length)} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${formatCount3(appendQuery.pagination.totalItems)}`}` }),
-                              appendQuery.pagination.sourceUntil || appendUsesLocalProcessing ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                                /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42("button", { type: "button", "aria-label": "Source coverage", className: "shrink-0 text-xs text-muted-foreground underline decoration-dotted underline-offset-4", children: "Source info" }) }),
-                                /* @__PURE__ */ jsxs32(TooltipContent, { children: [
-                                  appendQuery.pagination.sourceUntil ? /* @__PURE__ */ jsxs32("p", { children: [
-                                    "Source fixed through ",
-                                    new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
-                                    "."
-                                  ] }) : null,
-                                  /* @__PURE__ */ jsx42("p", { children: !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? "All source rows are loaded." : appendUsesLocalProcessing ? sourceOwnsColumnFilters ? "Local processing covers loaded rows; source-owned column filters are applied by the source." : "Local search and filters cover loaded rows." : "Source paging is active." })
-                                ] })
-                              ] }) : null,
-                              scrollPagination.error ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
-                              appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ jsxs32("p", { role: "status", children: [
-                                appendScrollPolicy.reason,
-                                " Load more remains available."
-                              ] }) : null
-                            ] })
+                            )
                           ]
                         }
                       ),
-                      appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ jsxs32(
-                        Select,
-                        {
-                          value: String(appendQuery.pagination.sourcePageSize.value),
-                          onValueChange: (value) => appendQuery.pagination.sourcePageSize?.onChange(Number(value)),
-                          children: [
-                            /* @__PURE__ */ jsx42(
-                              SelectTrigger,
-                              {
-                                "aria-label": "Rows per load",
-                                className: "h-8 min-w-20 shrink-0 rounded-md border border-border bg-card px-3 text-sm [&_svg]:size-5",
-                                disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
-                                children: /* @__PURE__ */ jsx42(SelectValue, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsx42(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ jsx42(SelectItem, { value: String(size), children: size }, size)) })
-                          ]
-                        }
-                      ) : null,
-                      appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ jsx42(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "outline",
-                          className: "h-8 shrink-0 px-3 text-sm",
-                          onClick: appendQuery.pagination.loadAll.stop,
-                          children: "Stop loading"
-                        }
-                      ) : scrollPagination.error ? /* @__PURE__ */ jsx42(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "outline",
-                          className: "h-8 shrink-0 px-3 text-sm",
-                          onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
-                          children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
-                        }
-                      ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 max-w-full flex-wrap gap-0", children: [
-                        /* @__PURE__ */ jsx42(
+                      scrollHintLeft ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                        /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
                           Button,
                           {
                             type: "button",
-                            variant: "outline",
-                            className: "h-8 px-3 text-sm",
-                            disabled: isLoading || isFetching,
-                            onClick: () => void scrollPagination.requestNextPage(),
-                            children: "Load more"
+                            variant: "ghost",
+                            size: "icon",
+                            "data-matrx-table-icon-action": true,
+                            "aria-label": "Scroll table left",
+                            "data-matrx-table-scroll-control": "left",
+                            className: "absolute left-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
+                            onClick: () => scrollTableHorizontally("left"),
+                            children: /* @__PURE__ */ jsx42(ChevronLeft, { className: "h-5 w-5" })
                           }
-                        ),
-                        appendQuery.pagination.loadAll ? /* @__PURE__ */ jsx42(
+                        ) }),
+                        /* @__PURE__ */ jsx42(TooltipContent, { children: "More columns to the left" })
+                      ] }) : null,
+                      scrollHintRight ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                        /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
                           Button,
                           {
                             type: "button",
                             variant: "ghost",
-                            className: "h-8 px-3 text-sm",
-                            disabled: isLoading || isFetching,
-                            onClick: appendQuery.pagination.loadAll.request,
-                            children: "Load all"
-                          }
-                        ) : null
-                      ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ jsx42("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
-                    ]
-                  }
-                ) : !hidePagination && (totalItems > 0 || sourceTotal !== void 0) ? /* @__PURE__ */ jsx42("div", { className: "shrink-0", children: /* @__PURE__ */ jsx42(
-                  GenericTablePagination,
-                  {
-                    totalItems,
-                    ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${formatCount3(start)}\u2013${formatCount3(end)} of ${formatCount3(total)} matching \xB7 ${formatCount3(data.length)} / ${formatCount3(sourceTotal)} loaded` },
-                    ...localProgressiveEnabled ? { progressive: {
-                      shownCount: progressiveRows.shownCount,
-                      loadedCount: data.length,
-                      hasMore: progressiveRows.hasMore,
-                      onShowMore: () => void progressiveRows.showMore()
-                    } } : {},
-                    itemsPerPage: pageSize === 0 && allRowsAreLoaded ? 0 : effectivePageSize,
-                    currentPage: safePage,
-                    onPageChange: setPage,
-                    onItemsPerPageChange: (n2) => {
-                      setPageSize(n2);
-                      if (!controlledQuery) setPage(1);
-                    },
-                    pageSizeOptions: pageSizeOptions.filter((size) => size > 0),
-                    showAllOption: allRowsAreLoaded,
-                    allValue: 0,
-                    allOptionLabel: "All loaded",
-                    compact: true,
-                    hideEntriesInfo: false
-                  }
-                ) }) : null,
-                selection && selectionCount > 0 ? /* @__PURE__ */ jsxs32(
-                  "div",
-                  {
-                    "data-matrx-table-bulk-bar": true,
-                    className: "mt-2 flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5",
-                    children: [
-                      /* @__PURE__ */ jsxs32("span", { className: "text-xs font-medium text-foreground", children: [
-                        formatCount3(selectionCount),
-                        " ",
-                        selectionNoun,
-                        selectionCount === 1 ? "" : "s",
-                        " selected"
-                      ] }),
-                      /* @__PURE__ */ jsxs32(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "sm",
-                          className: "h-7 gap-1 px-2 text-xs",
-                          onClick: () => {
-                            lastToggledIndex.current = null;
-                            selection.onSelectedIdsChange([]);
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx42(X, { className: "h-3.5 w-3.5" }),
-                            "Clear"
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs32("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
-                        effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ jsx42(
-                          CopyButtons,
-                          {
                             size: "icon",
                             "data-matrx-table-icon-action": true,
-                            sourceId: `${tableCopySourceNamespace}:selection`,
-                            ...effectiveCopy.references ? { references: effectiveCopy.references(selectedRows, data) } : {},
-                            ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
-                            label: `${selectedRows.length} selected ${selectionNoun}${selectedRows.length === 1 ? "" : "s"}`,
-                            ...copy === void 0 ? {} : {
-                              human: () => buildViewHuman(effectiveCopy, selectedRows, effectiveCopyColumns),
-                              json: () => selectedRows.map((row) => effectiveCopy.agentRow ? effectiveCopy.agentRow(row) : row)
-                            },
-                            agent: () => copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, selectedRows, data, declaredVisibleCopyColumns, { scope: "selected" }) : buildViewAgentInput(effectiveCopy, selectedRows, data, { scope: "selected" }),
-                            aiVariants: copySubsetVariantFor(
-                              () => selectedRows,
-                              "selected"
-                            ),
-                            export: {
-                              items: [],
-                              sheetRows: () => selectedRows.map(
-                                (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
-                              ),
-                              sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
-                                id: columnId(column),
-                                label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
-                              }))
-                            }
+                            "aria-label": "Scroll table right",
+                            "data-matrx-table-scroll-control": "right",
+                            className: "absolute right-1.5 top-1/2 z-30 hidden h-11 w-11 -translate-y-1/2 rounded-full border border-glass-edge bg-glass p-0 text-foreground shadow-glass backdrop-blur-glass backdrop-saturate-glass hover:bg-glass-hover active:bg-glass-active sm:inline-flex",
+                            onClick: () => scrollTableHorizontally("right"),
+                            children: /* @__PURE__ */ jsx42(ChevronRight, { className: "h-5 w-5" })
                           }
-                        ) : null,
-                        selection.actions?.(selectedRows, [...selectedIdSet])
-                      ] })
-                    ]
-                  }
-                ) : null
-              ] }),
-              /* @__PURE__ */ jsx42(
-                ColumnManager,
-                {
-                  open: columnManagerOpen,
-                  onOpenChange: setColumnManagerOpen,
-                  columns,
-                  order: effectiveColumnOrder,
-                  hidden: effectiveHiddenColumnIds,
-                  onApply: commitColumnState
-                }
-              ),
-              detailEnabled && selectedRow ? /* @__PURE__ */ jsx42(
-                SidePanelSurface,
-                {
-                  title: resolveStringTitle(
-                    detail?.title?.(selectedRow),
-                    defaultRowTitle(selectedRow, columns)
-                  ),
-                  titleNode: detail?.title?.(selectedRow),
-                  description: detail?.description?.(selectedRow),
-                  onClose: () => setSelectedId(null),
-                  defaultWidth: detail?.defaultWidth ?? 480,
-                  headerActions: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
-                    effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx42(
-                      TableRowCopyControl,
+                        ) }),
+                        /* @__PURE__ */ jsx42(TooltipContent, { children: "More columns to the right" })
+                      ] }) : null
+                    ] }),
+                    appendQuery ? /* @__PURE__ */ jsxs32(
+                      "div",
+                      {
+                        "data-matrx-table-footer": true,
+                        className: "flex min-h-8 shrink-0 flex-wrap items-center gap-2 border-t border-border",
+                        "aria-busy": isLoading || isFetching,
+                        children: [
+                          /* @__PURE__ */ jsxs32(
+                            "div",
+                            {
+                              ...isFetching && !isLoading ? {} : { role: "status", "aria-live": "polite" },
+                              className: "flex w-full min-w-0 items-center gap-2 text-xs text-muted-foreground sm:w-auto sm:flex-1",
+                              children: [
+                                isLoading ? /* @__PURE__ */ jsx42(
+                                  Loader2,
+                                  {
+                                    "data-matrx-table-append-loader": true,
+                                    "aria-hidden": "true",
+                                    className: "h-5 w-5 shrink-0 animate-spin text-primary motion-reduce:animate-none"
+                                  }
+                                ) : null,
+                                /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2", children: [
+                                  /* @__PURE__ */ jsx42("p", { className: "min-w-0 break-words font-medium text-foreground", children: isLoading ? "Loading rows\u2026" : appendQuery.pagination.sourceRecords ? `${formatCount3(processed.length)} ${appendQuery.pagination.sourceRecords.rowLabel}${appendQuery.pagination.sourceRecords.matchedRecords === void 0 ? "" : ` (${formatCount3(appendQuery.pagination.sourceRecords.matchedRecords)} matching ${appendQuery.pagination.sourceRecords.label})`} \xB7 ${formatCount3(appendQuery.pagination.sourceRecords.loaded)}${appendQuery.pagination.sourceRecords.total === void 0 ? "" : ` / ${formatCount3(appendQuery.pagination.sourceRecords.total)}`} ${appendQuery.pagination.sourceRecords.label} loaded` : `${formatCount3(data.length)} loaded${appendQuery.pagination.totalItems === void 0 ? "" : ` of ${formatCount3(appendQuery.pagination.totalItems)}`}` }),
+                                  appendQuery.pagination.sourceUntil || appendUsesLocalProcessing ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                                    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42("button", { type: "button", "aria-label": "Source coverage", className: "shrink-0 text-xs text-muted-foreground underline decoration-dotted underline-offset-4", children: "Source info" }) }),
+                                    /* @__PURE__ */ jsxs32(TooltipContent, { children: [
+                                      appendQuery.pagination.sourceUntil ? /* @__PURE__ */ jsxs32("p", { children: [
+                                        "Source fixed through ",
+                                        new Date(appendQuery.pagination.sourceUntil).toLocaleString(),
+                                        "."
+                                      ] }) : null,
+                                      /* @__PURE__ */ jsx42("p", { children: !isLoading && !isFetching && !appendQuery.pagination.loadAll?.isLoading && !scrollPagination.error && !appendQuery.pagination.hasNextPage && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? "All source rows are loaded." : appendUsesLocalProcessing ? sourceOwnsColumnFilters ? "Local processing covers loaded rows; source-owned column filters are applied by the source." : "Local search and filters cover loaded rows." : "Source paging is active." })
+                                    ] })
+                                  ] }) : null,
+                                  scrollPagination.error ? /* @__PURE__ */ jsx42("p", { role: "alert", className: "text-destructive", children: scrollPagination.error.message }) : null,
+                                  appendScrollPolicy?.mode === "suspended" ? /* @__PURE__ */ jsxs32("p", { role: "status", children: [
+                                    appendScrollPolicy.reason,
+                                    " Load more remains available."
+                                  ] }) : null
+                                ] })
+                              ]
+                            }
+                          ),
+                          appendQuery.pagination.sourcePageSize ? /* @__PURE__ */ jsxs32(
+                            Select,
+                            {
+                              value: String(appendQuery.pagination.sourcePageSize.value),
+                              onValueChange: (value) => appendQuery.pagination.sourcePageSize?.onChange(Number(value)),
+                              children: [
+                                /* @__PURE__ */ jsx42(
+                                  SelectTrigger,
+                                  {
+                                    "aria-label": "Rows per load",
+                                    className: "h-8 min-w-20 shrink-0 rounded-md border border-border bg-card px-3 text-sm [&_svg]:size-5",
+                                    disabled: isLoading || isFetching || appendQuery.pagination.loadAll?.isLoading,
+                                    children: /* @__PURE__ */ jsx42(SelectValue, {})
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx42(SelectContent, { children: appendQuery.pagination.sourcePageSize.options.map((size) => /* @__PURE__ */ jsx42(SelectItem, { value: String(size), children: size }, size)) })
+                              ]
+                            }
+                          ) : null,
+                          appendQuery.pagination.loadAll?.isLoading ? /* @__PURE__ */ jsx42(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "outline",
+                              className: "h-8 shrink-0 px-3 text-sm",
+                              onClick: appendQuery.pagination.loadAll.stop,
+                              children: "Stop loading"
+                            }
+                          ) : scrollPagination.error ? /* @__PURE__ */ jsx42(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "outline",
+                              className: "h-8 shrink-0 px-3 text-sm",
+                              onClick: appendQuery.pagination.retrySource ?? (appendQuery.pagination.hasNextPage ? appendQuery.pagination.loadNextPage : appendQuery.pagination.refresh),
+                              children: appendQuery.pagination.retrySource ? "Retry source" : appendQuery.pagination.hasNextPage ? "Retry" : "Reload rows"
+                            }
+                          ) : appendQuery.pagination.hasNextPage || scrollPagination.error ? /* @__PURE__ */ jsxs32("div", { className: "flex min-w-0 max-w-full flex-wrap gap-0", children: [
+                            /* @__PURE__ */ jsx42(
+                              Button,
+                              {
+                                type: "button",
+                                variant: "outline",
+                                className: "h-8 px-3 text-sm",
+                                disabled: isLoading || isFetching,
+                                onClick: () => void scrollPagination.requestNextPage(),
+                                children: "Load more"
+                              }
+                            ),
+                            appendQuery.pagination.loadAll ? /* @__PURE__ */ jsx42(
+                              Button,
+                              {
+                                type: "button",
+                                variant: "ghost",
+                                className: "h-8 px-3 text-sm",
+                                disabled: isLoading || isFetching,
+                                onClick: appendQuery.pagination.loadAll.request,
+                                children: "Load all"
+                              }
+                            ) : null
+                          ] }) : !isLoading && appendQuery.pagination.totalItems !== void 0 && data.length === appendQuery.pagination.totalItems ? /* @__PURE__ */ jsx42("span", { className: "min-w-0 max-w-full break-words whitespace-normal px-3 text-xs text-muted-foreground sm:text-sm", children: "All rows loaded" }) : null
+                        ]
+                      }
+                    ) : !hidePagination && (totalItems > 0 || sourceTotal !== void 0) ? /* @__PURE__ */ jsx42("div", { className: "shrink-0", children: /* @__PURE__ */ jsx42(
+                      GenericTablePagination,
                       {
-                        size: "icon",
-                        "data-matrx-table-icon-action": true,
-                        copy: effectiveCopy,
-                        sourceId: `${tableCopySourceNamespace}:row:${getRowId(selectedRow)}`,
-                        row: selectedRow,
-                        ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                        totalItems,
+                        ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${formatCount3(start)}\u2013${formatCount3(end)} of ${formatCount3(total)} matching \xB7 ${formatCount3(data.length)} / ${formatCount3(sourceTotal)} loaded` },
+                        ...localProgressiveEnabled ? { progressive: {
+                          shownCount: progressiveRows.shownCount,
+                          loadedCount: data.length,
+                          hasMore: progressiveRows.hasMore,
+                          onShowMore: () => void progressiveRows.showMore()
+                        } } : {},
+                        itemsPerPage: pageSize === 0 && allRowsAreLoaded ? 0 : effectivePageSize,
+                        currentPage: safePage,
+                        onPageChange: setPage,
+                        onItemsPerPageChange: (n2) => {
+                          setPageSize(n2);
+                          if (!controlledQuery) setPage(1);
+                        },
+                        pageSizeOptions: pageSizeOptions.filter((size) => size > 0),
+                        showAllOption: allRowsAreLoaded,
+                        allValue: 0,
+                        allOptionLabel: "All loaded",
+                        compact: true,
+                        hideEntriesInfo: false
                       }
-                    ) : null,
-                    detail?.headerActions?.(selectedRow),
-                    windowEnabled ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                      /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "icon",
-                          "data-matrx-table-icon-action": true,
-                          className: "h-7 w-7",
-                          "aria-label": "Open in window",
-                          onClick: () => openWindow(selectedRow),
-                          children: /* @__PURE__ */ jsx42(PanelRight, { className: "h-5 w-5" })
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx42(TooltipContent, { children: "Open in window" })
-                    ] }) : null
-                  ] }),
-                  children: detail?.render ? (
-                    // The panel hands children a `min-h-0 flex-1 overflow-hidden` cell
-                    // and expects the child to own scrolling. `DataRowInspector` does;
-                    // custom `detail.render` bodies mostly did not, so their content
-                    // silently cut off at the fold with no scrollbar. Owning it here
-                    // fixes the whole class at once — a custom body that already
-                    // scrolls (`h-full` + `overflow-y-auto` root) still resolves to
-                    // this container's height, so no second scrollbar appears.
-                    /* @__PURE__ */ jsx42("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
-                      closeDetail: () => setSelectedId(null),
-                      openDetail: () => openDetail(selectedRow),
-                      openWindow: () => openWindow(selectedRow),
-                      closeWindow,
-                      hasPendingEdits: Boolean(edits[getRowId(selectedRow)]),
-                      discardPendingEdits: () => discardRowEdits(getRowId(selectedRow))
-                    }) })
-                  ) : /* @__PURE__ */ jsx42(
-                    DataRowInspector,
-                    {
-                      row: selectedRow,
-                      ...effectiveCopy?.rowKind === void 0 ? {} : { recordKind: effectiveCopy?.rowKind },
-                      ...effectiveCopy?.label === void 0 ? {} : { recordLabel: effectiveCopy?.label },
-                      ...effectiveCopy?.location === void 0 ? {} : { location: effectiveCopy?.location },
-                      ...detail?.tokenForField === void 0 ? {} : { tokenForField: detail?.tokenForField }
-                    }
-                  )
-                }
-              ) : null,
-              windowRow ? /* @__PURE__ */ jsx42(
-                DataRowWindow,
-                {
-                  isOpen: true,
-                  onClose: closeWindow,
-                  title: windowConfig?.title?.(windowRow) ?? defaultRowTitle(windowRow, columns),
-                  row: windowRow,
-                  width: windowConfig?.width,
-                  height: windowConfig?.height,
-                  windowId: `matrx-data-row-${urlState?.id ?? "local"}-${getRowId(windowRow)}`,
-                  defaultTab: windowConfig?.defaultTab,
-                  headerActions: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
-                    windowConfig?.openOnRowClick === true && detail?.enabled === true ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
-                      /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "icon",
-                          "data-matrx-table-icon-action": true,
-                          className: "h-7 w-7",
-                          "aria-label": "Open in side panel",
-                          onClick: () => {
-                            closeWindow();
-                            openDetail(windowRow);
-                          },
-                          children: /* @__PURE__ */ jsx42(PanelRightOpen, { className: "h-5 w-5" })
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx42(TooltipContent, { children: "Open in side panel" })
-                    ] }) : null,
-                    effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx42(
-                      TableRowCopyControl,
+                    ) }) : null,
+                    selection && selectionCount > 0 ? /* @__PURE__ */ jsxs32(
+                      "div",
                       {
-                        size: "icon",
-                        "data-matrx-table-icon-action": true,
-                        copy: effectiveCopy,
-                        sourceId: `${tableCopySourceNamespace}:row:${getRowId(windowRow)}`,
-                        row: windowRow,
-                        ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                        "data-matrx-table-bulk-bar": true,
+                        className: "mt-2 flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5",
+                        children: [
+                          /* @__PURE__ */ jsxs32("span", { className: "text-xs font-medium text-foreground", children: [
+                            formatCount3(selectionCount),
+                            " ",
+                            selectionNoun,
+                            selectionCount === 1 ? "" : "s",
+                            " selected"
+                          ] }),
+                          /* @__PURE__ */ jsxs32(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "sm",
+                              className: "h-7 gap-1 px-2 text-xs",
+                              onClick: () => {
+                                lastToggledIndex.current = null;
+                                selection.onSelectedIdsChange([]);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx42(X, { className: "h-3.5 w-3.5" }),
+                                "Clear"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs32("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
+                            effectiveCopy && selectedRows.length > 0 ? /* @__PURE__ */ jsx42(
+                              CopyButtons,
+                              {
+                                size: "icon",
+                                "data-matrx-table-icon-action": true,
+                                sourceId: `${tableCopySourceNamespace}:selection`,
+                                ...effectiveCopy.references ? { references: effectiveCopy.references(selectedRows, data) } : {},
+                                ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
+                                label: `${selectedRows.length} selected ${selectionNoun}${selectedRows.length === 1 ? "" : "s"}`,
+                                ...copy === void 0 ? {} : {
+                                  human: () => buildViewHuman(effectiveCopy, selectedRows, effectiveCopyColumns),
+                                  json: () => selectedRows.map((row) => effectiveCopy.agentRow ? effectiveCopy.agentRow(row) : row)
+                                },
+                                agent: () => copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, selectedRows, data, declaredVisibleCopyColumns, { scope: "selected" }) : buildViewAgentInput(effectiveCopy, selectedRows, data, { scope: "selected" }),
+                                aiVariants: copySubsetVariantFor(
+                                  () => selectedRows,
+                                  "selected"
+                                ),
+                                export: {
+                                  items: [],
+                                  sheetRows: () => selectedRows.map(
+                                    (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
+                                  ),
+                                  sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
+                                    id: columnId(column),
+                                    label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
+                                  }))
+                                }
+                              }
+                            ) : null,
+                            selection.actions?.(selectedRows, [...selectedIdSet])
+                          ] })
+                        ]
                       }
                     ) : null
                   ] }),
-                  viewContent: windowConfig?.renderView?.(windowRow, {
-                    closeDetail: () => setSelectedId(null),
-                    openDetail: () => openDetail(windowRow),
-                    openWindow: () => openWindow(windowRow),
-                    closeWindow,
-                    hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
-                    discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
-                  }) ?? /* @__PURE__ */ jsx42(
-                    DataRowInspector,
+                  /* @__PURE__ */ jsx42(
+                    ColumnManager,
                     {
-                      row: windowRow,
-                      recordKind: effectiveCopy?.rowKind ?? "record",
-                      recordLabel: effectiveCopy?.label ?? "Record",
-                      location: effectiveCopy?.location ?? "Table",
-                      fieldCopy: copy !== false,
-                      ...detail?.tokenForField === void 0 ? {} : { tokenForField: detail?.tokenForField }
+                      open: columnManagerOpen,
+                      onOpenChange: setColumnManagerOpen,
+                      columns,
+                      order: effectiveColumnOrder,
+                      hidden: effectiveHiddenColumnIds,
+                      onApply: commitColumnState
                     }
                   ),
-                  editContent: windowConfig?.renderEdit === false ? void 0 : windowConfig?.renderEdit ? windowConfig.renderEdit(windowRow, {
-                    closeDetail: () => setSelectedId(null),
-                    openDetail: () => openDetail(windowRow),
-                    openWindow: () => openWindow(windowRow),
-                    closeWindow,
-                    hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
-                    discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
-                  }) : detail?.render?.(windowRow, {
-                    closeDetail: () => setSelectedId(null),
-                    openDetail: () => openDetail(windowRow),
-                    openWindow: () => openWindow(windowRow),
-                    closeWindow,
-                    hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
-                    discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
-                  }),
-                  children: windowConfig?.render?.(windowRow, {
-                    closeDetail: () => setSelectedId(null),
-                    openDetail: () => openDetail(windowRow),
-                    openWindow: () => openWindow(windowRow),
-                    closeWindow,
-                    hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
-                    discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
-                  })
-                }
-              ) : null,
-              editEnabled ? /* @__PURE__ */ jsxs32(Fragment7, { children: [
-                foreignDrafts.length > 0 ? /* @__PURE__ */ jsxs32(
-                  "div",
-                  {
-                    "data-matrx-foreign-drafts": true,
-                    className: "fixed inset-x-3 bottom-20 z-50 flex flex-wrap items-center justify-center gap-2 rounded-lg border border-amber-500/40 bg-card px-3 py-2 text-xs shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap",
-                    children: [
-                      /* @__PURE__ */ jsx42("span", { children: "Unsaved edits from previous results" }),
-                      /* @__PURE__ */ jsx42(
-                        CopyButtons,
+                  detailEnabled && selectedRow ? /* @__PURE__ */ jsx42(
+                    SidePanelSurface,
+                    {
+                      title: resolveStringTitle(
+                        detail?.title?.(selectedRow),
+                        defaultRowTitle(selectedRow, columns)
+                      ),
+                      titleNode: detail?.title?.(selectedRow),
+                      description: detail?.description?.(selectedRow),
+                      onClose: () => setSelectedId(null),
+                      defaultWidth: detail?.defaultWidth ?? 480,
+                      headerActions: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
+                        effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx42(
+                          TableRowCopyControl,
+                          {
+                            size: "icon",
+                            "data-matrx-table-icon-action": true,
+                            copy: effectiveCopy,
+                            sourceId: `${tableCopySourceNamespace}:row:${getRowId(selectedRow)}`,
+                            row: selectedRow,
+                            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                          }
+                        ) : null,
+                        detail?.headerActions?.(selectedRow),
+                        windowEnabled ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                          /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon",
+                              "data-matrx-table-icon-action": true,
+                              className: "h-7 w-7",
+                              "aria-label": "Open in window",
+                              onClick: () => openWindow(selectedRow),
+                              children: /* @__PURE__ */ jsx42(PanelRight, { className: "h-5 w-5" })
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx42(TooltipContent, { children: "Open in window" })
+                        ] }) : null
+                      ] }),
+                      children: detail?.render ? (
+                        // The panel hands children a `min-h-0 flex-1 overflow-hidden` cell
+                        // and expects the child to own scrolling. `DataRowInspector` does;
+                        // custom `detail.render` bodies mostly did not, so their content
+                        // silently cut off at the fold with no scrollbar. Owning it here
+                        // fixes the whole class at once — a custom body that already
+                        // scrolls (`h-full` + `overflow-y-auto` root) still resolves to
+                        // this container's height, so no second scrollbar appears.
+                        /* @__PURE__ */ jsx42("div", { className: "h-full min-h-0 overflow-y-auto", children: detail.render(selectedRow, {
+                          closeDetail: () => setSelectedId(null),
+                          openDetail: () => openDetail(selectedRow),
+                          openWindow: () => openWindow(selectedRow),
+                          closeWindow,
+                          hasPendingEdits: Boolean(edits[getRowId(selectedRow)]),
+                          discardPendingEdits: () => discardRowEdits(getRowId(selectedRow))
+                        }) })
+                      ) : /* @__PURE__ */ jsx42(
+                        DataRowInspector,
+                        {
+                          row: selectedRow,
+                          ...effectiveCopy?.rowKind === void 0 ? {} : { recordKind: effectiveCopy?.rowKind },
+                          ...effectiveCopy?.label === void 0 ? {} : { recordLabel: effectiveCopy?.label },
+                          ...effectiveCopy?.location === void 0 ? {} : { location: effectiveCopy?.location },
+                          ...detail?.tokenForField === void 0 ? {} : { tokenForField: detail?.tokenForField }
+                        }
+                      )
+                    }
+                  ) : null,
+                  windowRow ? /* @__PURE__ */ jsx42(
+                    DataRowWindow,
+                    {
+                      isOpen: true,
+                      onClose: closeWindow,
+                      title: windowConfig?.title?.(windowRow) ?? defaultRowTitle(windowRow, columns),
+                      row: windowRow,
+                      width: windowConfig?.width,
+                      height: windowConfig?.height,
+                      windowId: `matrx-data-row-${urlState?.id ?? "local"}-${getRowId(windowRow)}`,
+                      defaultTab: windowConfig?.defaultTab,
+                      headerActions: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
+                        windowConfig?.openOnRowClick === true && detail?.enabled === true ? /* @__PURE__ */ jsxs32(Tooltip, { children: [
+                          /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon",
+                              "data-matrx-table-icon-action": true,
+                              className: "h-7 w-7",
+                              "aria-label": "Open in side panel",
+                              onClick: () => {
+                                closeWindow();
+                                openDetail(windowRow);
+                              },
+                              children: /* @__PURE__ */ jsx42(PanelRightOpen, { className: "h-5 w-5" })
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx42(TooltipContent, { children: "Open in side panel" })
+                        ] }) : null,
+                        effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx42(
+                          TableRowCopyControl,
+                          {
+                            size: "icon",
+                            "data-matrx-table-icon-action": true,
+                            copy: effectiveCopy,
+                            sourceId: `${tableCopySourceNamespace}:row:${getRowId(windowRow)}`,
+                            row: windowRow,
+                            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                          }
+                        ) : null
+                      ] }),
+                      viewContent: windowConfig?.renderView?.(windowRow, {
+                        closeDetail: () => setSelectedId(null),
+                        openDetail: () => openDetail(windowRow),
+                        openWindow: () => openWindow(windowRow),
+                        closeWindow,
+                        hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
+                        discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
+                      }) ?? /* @__PURE__ */ jsx42(
+                        DataRowInspector,
                         {
-                          size: "xs",
-                          label: "retained drafts",
-                          human: () => JSON.stringify(foreignDraftPayload, null, 2),
-                          json: () => foreignDraftPayload
+                          row: windowRow,
+                          recordKind: effectiveCopy?.rowKind ?? "record",
+                          recordLabel: effectiveCopy?.label ?? "Record",
+                          location: effectiveCopy?.location ?? "Table",
+                          fieldCopy: copy !== false,
+                          ...detail?.tokenForField === void 0 ? {} : { tokenForField: detail?.tokenForField }
                         }
                       ),
-                      /* @__PURE__ */ jsx42(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
-                    ]
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx42(
-                  ConfirmDialog,
-                  {
-                    open: confirmForeignDraftDiscard,
-                    onOpenChange: setConfirmForeignDraftDiscard,
-                    title: "Discard unsaved edits from previous results?",
-                    description: "This permanently removes edits retained for other result sets. Copy drafts first if you may need them.",
-                    confirmLabel: "Discard drafts",
-                    cancelLabel: "Keep drafts",
-                    variant: "destructive",
-                    onConfirm: () => {
-                      setEditsByScope(
-                        (current) => Object.fromEntries(
-                          Object.entries(current).filter(([scope]) => scope === editScopeKey)
-                        )
-                      );
-                      setConfirmForeignDraftDiscard(false);
+                      editContent: windowConfig?.renderEdit === false ? void 0 : windowConfig?.renderEdit ? windowConfig.renderEdit(windowRow, {
+                        closeDetail: () => setSelectedId(null),
+                        openDetail: () => openDetail(windowRow),
+                        openWindow: () => openWindow(windowRow),
+                        closeWindow,
+                        hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
+                        discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
+                      }) : detail?.render?.(windowRow, {
+                        closeDetail: () => setSelectedId(null),
+                        openDetail: () => openDetail(windowRow),
+                        openWindow: () => openWindow(windowRow),
+                        closeWindow,
+                        hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
+                        discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
+                      }),
+                      children: windowConfig?.render?.(windowRow, {
+                        closeDetail: () => setSelectedId(null),
+                        openDetail: () => openDetail(windowRow),
+                        openWindow: () => openWindow(windowRow),
+                        closeWindow,
+                        hasPendingEdits: Boolean(edits[getRowId(windowRow)]),
+                        discardPendingEdits: () => discardRowEdits(getRowId(windowRow))
+                      })
                     }
-                  }
-                ),
-                /* @__PURE__ */ jsx42(
-                  DirtySavePill,
-                  {
-                    changeCount,
-                    saving,
-                    onSave: () => void handleSaveEdits(),
-                    onCancel: handleCancelEdits
-                  }
-                )
-              ] }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx42(DragOverlay, { children: draggedRow ? (
-          // w-max: the overlay inherits the ACTIVE node's size, and the active
-          // node is the 16px grip handle — without it the label wraps to one
-          // character per line.
-          /* @__PURE__ */ jsx42("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
-        ) : null })
-      ]
+                  ) : null,
+                  editEnabled ? /* @__PURE__ */ jsxs32(Fragment7, { children: [
+                    foreignDrafts.length > 0 ? /* @__PURE__ */ jsxs32(
+                      "div",
+                      {
+                        "data-matrx-foreign-drafts": true,
+                        className: "fixed inset-x-3 bottom-20 z-50 flex flex-wrap items-center justify-center gap-2 rounded-lg border border-amber-500/40 bg-card px-3 py-2 text-xs shadow-lg sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 sm:flex-nowrap",
+                        children: [
+                          /* @__PURE__ */ jsx42("span", { children: "Unsaved edits from previous results" }),
+                          /* @__PURE__ */ jsx42(
+                            CopyButtons,
+                            {
+                              size: "xs",
+                              label: "retained drafts",
+                              human: () => JSON.stringify(foreignDraftPayload, null, 2),
+                              json: () => foreignDraftPayload
+                            }
+                          ),
+                          /* @__PURE__ */ jsx42(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 text-xs text-destructive", onClick: () => setConfirmForeignDraftDiscard(true), children: "Discard drafts" })
+                        ]
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx42(
+                      ConfirmDialog,
+                      {
+                        open: confirmForeignDraftDiscard,
+                        onOpenChange: setConfirmForeignDraftDiscard,
+                        title: "Discard unsaved edits from previous results?",
+                        description: "This permanently removes edits retained for other result sets. Copy drafts first if you may need them.",
+                        confirmLabel: "Discard drafts",
+                        cancelLabel: "Keep drafts",
+                        variant: "destructive",
+                        onConfirm: () => {
+                          setEditsByScope(
+                            (current) => Object.fromEntries(
+                              Object.entries(current).filter(([scope]) => scope === editScopeKey)
+                            )
+                          );
+                          setConfirmForeignDraftDiscard(false);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx42(
+                      DirtySavePill,
+                      {
+                        changeCount,
+                        saving,
+                        onSave: () => void handleSaveEdits(),
+                        onCancel: handleCancelEdits
+                      }
+                    )
+                  ] }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx42(DragOverlay, { children: draggedRow ? (
+              // w-max: the overlay inherits the ACTIVE node's size, and the active
+              // node is the 16px grip handle — without it the label wraps to one
+              // character per line.
+              /* @__PURE__ */ jsx42("div", { className: "w-max max-w-xs truncate rounded border border-border bg-card px-2.5 py-1.5 text-sm font-medium text-foreground shadow-md", children: hierarchy?.itemLabel?.(draggedRow) ?? "Moving row" })
+            ) : null })
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 function HierarchyDragHandle({
   id,
@@ -16499,6 +16895,34 @@ function SavedViewsControl({
   ] });
 }
 
+// src/data-table/menu-targets.ts
+var MATRX_TABLE_MENU_ICON_NAMES = [
+  "copy",
+  "copy-plus",
+  "scissors",
+  "clipboard-paste",
+  "eraser",
+  "pencil",
+  "plus",
+  "trash",
+  "eye-off",
+  "arrow-up-a-z",
+  "arrow-down-a-z",
+  "arrow-up-down",
+  "arrow-down-to-line",
+  "palette",
+  "paintbrush",
+  "panel-left",
+  "panel-right",
+  "settings",
+  "sigma",
+  "zap",
+  "history",
+  "link",
+  "tag",
+  "filter"
+];
+
 // src/data-table/tableXlsx.ts
 import * as XLSX from "xlsx";
 function downloadTableAsXlsx({
@@ -16548,6 +16972,7 @@ export {
   FORMAT_MISMATCH_CLASS,
   FormattedCell,
   GenericTablePagination,
+  MATRX_TABLE_MENU_ICON_NAMES,
   MatrxDataTable,
   MatrxDataTableProvider,
   MatrxTableRowAlchemyProvider,