@ai-matrx/design-system 0.21.3 → 0.21.5

package/dist/data-table/index.cjs

@@ -48,6 +48,7 @@ __export(data_table_exports, {
   downloadTableAsXlsx: () => downloadTableAsXlsx,
   filterKindLabel: () => filterKindLabel,
   parseTableViewSnapshot: () => parseTableViewSnapshot,
+  resolveColumnMarker: () => resolveColumnMarker,
   resolveFilterKind: () => resolveFilterKind,
   rowsToCsvFromColumns: () => rowsToCsvFromColumns,
   rowsToMarkdownTable: () => rowsToMarkdownTable,
@@ -1925,6 +1926,12 @@ function MatrxTableRowAlchemyScope({ value, children }) {
 function useMatrxTableRowAlchemy() {
   return (0, import_react5.useContext)(RowAlchemyContext);
 }
+var ROW_CONTROLS_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-row-controls-context");
+var rowControlsRegistry = globalThis;
+var RowControlsContext = rowControlsRegistry[ROW_CONTROLS_SLOT] ??= (0, import_react5.createContext)(null);
+function MatrxTableRowControlsScope({ value, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RowControlsContext.Provider, { value, children });
+}
 
 // src/data-table/useTableNotice.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -5588,7 +5595,7 @@ var import_url_state3 = require("@ai-matrx/kit/url-state");
 // src/data-table/RowAlchemyLauncher.tsx
 var import_react12 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-function MatrxTableRowAlchemyProvider({ copy, placement, children }) {
+function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
   const controller = (0, import_react12.useRef)(null);
   const { CopyControls } = useMatrxDataTableHost();
   const [active, setActive] = (0, import_react12.useState)(false);
@@ -5605,6 +5612,7 @@ function MatrxTableRowAlchemyProvider({ copy, placement, children }) {
   }, [active, placement]);
   const value = {
     copy,
+    controls,
     placement,
     ready: active,
     activate: () => setActive(true),
@@ -5767,6 +5775,34 @@ var CommandShortcut = ({
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+// src/data-table/column-marker.ts
+var MARKER_ACCESSORS = {
+  favorite: "favorite",
+  is_favorite: "favorite",
+  favourite: "favorite",
+  is_favourite: "favorite",
+  pinned: "pin",
+  is_pinned: "pin"
+};
+function resolveColumnMarker(column) {
+  if (column.marker === false) return void 0;
+  if (column.marker) return column.marker;
+  return column.accessorKey ? MARKER_ACCESSORS[column.accessorKey] : void 0;
+}
+function markerCopy(marker) {
+  return marker === "favorite" ? {
+    label: "Favorites",
+    lowerLabel: "favorites",
+    onlyLabel: "Favorites only",
+    notLabel: "Not favorites"
+  } : {
+    label: "Pins",
+    lowerLabel: "pins",
+    onlyLabel: "Pins only",
+    notLabel: "Not pinned"
+  };
+}
+
 // src/data-table/ColumnHeaderCell.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var HeaderButton = (0, import_react13.forwardRef)(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
@@ -5799,6 +5835,7 @@ function ColumnHeaderCell({
   align = "left",
   className,
   compact = false,
+  marker,
   filterApplyLabel,
   filterShowCancel = false,
   filterFooterHint,
@@ -5850,7 +5887,9 @@ function ColumnHeaderCell({
     if (deferredFilter) setDraftFilter(next);
     else onFilterChange(next);
   };
-  const menuLabel = labelText ? `Sort or filter ${labelText}` : "Sort or filter column";
+  const markerLabels = marker ? markerCopy(marker) : void 0;
+  const accessibleLabel = markerLabels?.label ?? labelText;
+  const menuLabel = accessibleLabel ? `Sort or filter ${accessibleLabel}` : "Sort or filter column";
   const menuContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     PopoverContent,
     {
@@ -5879,7 +5918,7 @@ function ColumnHeaderCell({
                 onClick: onSortAsc,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowUp, { className: "h-3.5 w-3.5" }),
-                  "Sort ascending"
+                  markerLabels ? `${markerLabels.label} last` : "Sort ascending"
                 ]
               }
             ),
@@ -5892,7 +5931,7 @@ function ColumnHeaderCell({
                 onClick: onSortDesc,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowDown, { className: "h-3.5 w-3.5" }),
-                  "Sort descending"
+                  markerLabels ? `${markerLabels.label} first` : "Sort descending"
                 ]
               }
             ),
@@ -5905,7 +5944,7 @@ function ColumnHeaderCell({
                 onClick: onClearSort,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListX, { className: "h-3.5 w-3.5" }),
-                  "Clear sort"
+                  markerLabels ? `Clear ${markerLabels.lowerLabel} sort` : "Clear sort"
                 ]
               }
             ) : null
@@ -5924,6 +5963,13 @@ function ColumnHeaderCell({
             },
             selectOptions,
             selectSingle,
+            ...markerLabels ? {
+              booleanLabels: {
+                all: "All",
+                true: markerLabels.onlyLabel,
+                false: markerLabels.notLabel
+              }
+            } : {},
             allowNullModes
           }
         ) : null,
@@ -6139,7 +6185,8 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
-  allowNullModes = false
+  allowNullModes = false,
+  booleanLabels
 }) {
   if (kind === "text") {
     const text = value?.kind === "text" ? value.value : "";
@@ -6226,9 +6273,9 @@ function FilterBody({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectValue, {}) }),
             /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "__all__", children: "All" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "true", children: "Yes" }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "false", children: "No" })
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "__all__", children: booleanLabels?.all ?? "All" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "true", children: booleanLabels?.true ?? "Yes" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "false", children: booleanLabels?.false ?? "No" })
             ] })
           ]
         }
@@ -7471,9 +7518,13 @@ function EditableTableCell({
   onCommit,
   className,
   href,
-  editTrigger = "click"
+  editTrigger = "click",
+  editRequest
 }) {
   const [open, setOpen] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    if (editRequest !== void 0) setOpen(true);
+  }, [editRequest]);
   const usePencil = Boolean(href) || editTrigger === "pencil";
   if (editType === "string") {
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -7485,7 +7536,8 @@ function EditableTableCell({
         onCommit,
         ...className === void 0 ? {} : { className },
         ...href === void 0 ? {} : { href },
-        usePencil
+        usePencil,
+        ...editRequest === void 0 ? {} : { editRequest }
       }
     );
   }
@@ -7560,10 +7612,18 @@ function InlineStringEditor({
   onCommit,
   className,
   href,
-  usePencil
+  usePencil,
+  editRequest
 }) {
   const [editing, setEditing] = (0, import_react18.useState)(false);
   const [draft, setDraft] = (0, import_react18.useState)(value);
+  const handledEditRequest = (0, import_react18.useRef)(void 0);
+  (0, import_react18.useEffect)(() => {
+    if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
+    handledEditRequest.current = editRequest;
+    setDraft(value);
+    setEditing(true);
+  }, [editRequest, value]);
   if (!editing) {
     if (usePencil) {
       return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -8315,6 +8375,7 @@ var SELECT_CARDINALITY_CAP = 24;
 function resolveFilterKind(col, sampleRows) {
   if (col.filter === false) return null;
   if (col.filter && col.filter !== "auto") return col.filter;
+  if (resolveColumnMarker(col)) return "boolean";
   const values = sampleRows.slice(0, 200).map((row) => getCellValue(row, col)).filter((v) => v != null);
   if (values.length === 0) return "text";
   if (values.every((v) => typeof v === "boolean")) return "boolean";
@@ -8380,6 +8441,9 @@ function resolveQueryFilterMeta(column, rows, controlled) {
     };
   }
   if (column.filter === false) return { kind: null, options: [] };
+  if (resolveColumnMarker(column) && (column.filter === void 0 || column.filter === "auto")) {
+    return { kind: "boolean", options: [] };
+  }
   const declared = column.filter;
   const kind = declared && declared !== "auto" ? declared : column.filterOptions?.length ? "select" : "text";
   return {
@@ -8557,6 +8621,9 @@ function MatrxDataTableWithUrlState({
   );
 }
 var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
+function TableContextPassthrough({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children });
+}
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
@@ -8583,6 +8650,7 @@ function MatrxDataTableCore({
   detail,
   window: windowConfig,
   copy,
+  contextMenu,
   rowCopyPlacement = "inline",
   edit,
   hierarchy,
@@ -8618,6 +8686,7 @@ function MatrxDataTableCore({
   const isLoading = appendQuery ? appendQuery.pagination.loading : suppliedLoading;
   const isFetching = appendQuery ? appendQuery.pagination.isFetchingNextPage : suppliedFetching;
   const host = useMatrxDataTableHost();
+  const ContextMenuBoundary = host.ContextMenuBoundary ?? TableContextPassthrough;
   const resolvedDensity = density ?? host.defaultDensity ?? "normal";
   const SavedViews = host.SavedViews;
   const Link = host.Link ?? DefaultTableLink;
@@ -8766,6 +8835,8 @@ function MatrxDataTableCore({
   const [editsByScope, setEditsByScope] = (0, import_react20.useState)({});
   const editRevisionRef = (0, import_react20.useRef)({});
   const [savingByScope, setSavingByScope] = (0, import_react20.useState)({});
+  const savingScopesRef = (0, import_react20.useRef)(/* @__PURE__ */ new Set());
+  const [editRequest, setEditRequest] = (0, import_react20.useState)(null);
   const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = (0, import_react20.useState)(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
   const saving = (savingByScope[editScopeKey] ?? 0) > 0;
@@ -9187,6 +9258,7 @@ function MatrxDataTableCore({
     [visibleColumns]
   );
   const tableCopySourceNamespace = (0, import_react20.useId)();
+  const tableContextMenuInstanceId = (0, import_react20.useId)();
   const tableDndContextId = (0, import_react20.useId)();
   const defaultCopyTitle = toolbar?.title || "Table";
   const defaultCopy = (0, import_react20.useMemo)(() => ({
@@ -9388,13 +9460,15 @@ function MatrxDataTableCore({
   const showToolbarCopy = effectiveCopy !== void 0 && effectiveCopy.showToolbar !== false;
   const renderRowActions = (row, controls) => {
     const actions = rowActions?.(row, controls);
-    if (!effectiveCopy || !showRowCopy) return actions;
+    const scopedActions = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MatrxTableRowControlsScope, { value: controls, children: actions });
+    if (!effectiveCopy || !showRowCopy) return scopedActions;
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       MatrxTableRowAlchemyProvider,
       {
         copy: tableRowCopyProps(effectiveCopy, row, `${tableCopySourceNamespace}:row:${getRowId(row)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
         placement: rowCopyInMenu ? "menu" : "inline",
-        children: actions
+        controls,
+        children: scopedActions
       }
     );
   };
@@ -9511,6 +9585,37 @@ function MatrxDataTableCore({
       return next;
     });
   };
+  const beginRowEdit = (row) => {
+    const column = visibleColumns.find(
+      (candidate) => candidate.editable && (candidate.editableIf?.(row) ?? true)
+    );
+    if (!column) return;
+    const field = column.accessorKey ? String(column.accessorKey) : columnId(column);
+    setEditRequest((current) => ({
+      rowId: getRowId(row),
+      field,
+      nonce: (current?.nonce ?? 0) + 1
+    }));
+  };
+  const buildRecordControls = (row) => {
+    const rowId = getRowId(row);
+    const pending = edits[rowId];
+    return {
+      closeDetail: () => setSelectedId(null),
+      openDetail: () => openDetail(row),
+      openWindow: () => openWindow(row),
+      closeWindow,
+      hasPendingEdits: Boolean(pending),
+      discardPendingEdits: () => discardRowEdits(rowId),
+      ...pending ? { cancelEdits: () => discardRowEdits(rowId) } : {},
+      ...pending && edit?.onSave && !edit.autoSave && !saving ? {
+        saveEdits: () => handleSaveEdits(rowId)
+      } : {},
+      ...editEnabled && visibleColumns.some(
+        (column) => column.editable && (column.editableIf?.(row) ?? true)
+      ) ? { beginEdit: () => beginRowEdit(row) } : {}
+    };
+  };
   const hierarchyRows = hierarchy?.rows ?? data;
   const hierarchyGetParentId = hierarchy?.getParentId;
   const hierarchyIndex = (0, import_react20.useMemo)(() => {
@@ -9682,15 +9787,18 @@ function MatrxDataTableCore({
     }
     setDraggedRowId(null);
   };
-  const handleSaveEdits = async () => {
+  const handleSaveEdits = async (rowId) => {
     if (!edit?.onSave || changeCount === 0) return;
     const scope = editScopeKey;
+    if (savingScopesRef.current.has(scope)) return;
     const draft = editsByScope[scope];
     if (!draft) return;
-    const values = draft.values;
-    const revisions = draft.revisions;
+    const values = rowId ? draft.values[rowId] ? { [rowId]: draft.values[rowId] } : {} : draft.values;
+    if (Object.keys(values).length === 0) return;
+    const revisions = rowId ? draft.revisions[rowId] ? { [rowId]: draft.revisions[rowId] } : {} : draft.revisions;
     const rows = appendQueryKey === null ? data : draft.rows;
     const save = edit.onSave;
+    savingScopesRef.current.add(scope);
     startSaving(scope);
     try {
       await Promise.resolve().then(() => save(values, rows));
@@ -9698,16 +9806,16 @@ function MatrxDataTableCore({
         const currentDraft = current[scope];
         if (!currentDraft) return current;
         const nextValues = {};
-        for (const [rowId, rowValues] of Object.entries(currentDraft.values)) {
-          const savedRow = values[rowId];
-          const savedRevisions = revisions[rowId];
-          const currentRevisions = currentDraft.revisions[rowId];
+        for (const [rowId2, rowValues] of Object.entries(currentDraft.values)) {
+          const savedRow = values[rowId2];
+          const savedRevisions = revisions[rowId2];
+          const currentRevisions = currentDraft.revisions[rowId2];
           const remaining = Object.fromEntries(
             Object.entries(rowValues).filter(
               ([field]) => !Object.hasOwn(savedRow ?? {}, field) || currentRevisions?.[field] !== savedRevisions?.[field]
             )
           );
-          if (Object.keys(remaining).length > 0) nextValues[rowId] = remaining;
+          if (Object.keys(remaining).length > 0) nextValues[rowId2] = remaining;
         }
         return { ...current, [scope]: { ...currentDraft, values: nextValues } };
       });
@@ -9717,6 +9825,7 @@ function MatrxDataTableCore({
         `Couldn't save: ${e instanceof Error ? e.message : String(e)}`
       );
     } finally {
+      savingScopesRef.current.delete(scope);
       finishSaving(scope);
     }
   };
@@ -9724,6 +9833,17 @@ function MatrxDataTableCore({
     setEdits({});
     edit?.onCancel?.();
   };
+  (0, import_react20.useEffect)(() => {
+    if (!host.rowContextRegistry || !contextMenu && !host.createDefaultRowContext) return;
+    return host.rowContextRegistry.register(tableContextMenuInstanceId, (rowId) => {
+      const row = data.find((candidate) => getRowId(candidate) === rowId);
+      if (!row) return null;
+      const pending = edits[rowId];
+      const displayRow = applyRowEdits(row, pending);
+      const controls = buildRecordControls(displayRow);
+      return contextMenu?.resolveRowContext(displayRow, controls) ?? host.createDefaultRowContext?.(displayRow, controls) ?? null;
+    });
+  }, [buildRecordControls, contextMenu, data, getRowId, host.createDefaultRowContext, host.rowContextRegistry, tableContextMenuInstanceId]);
   const showActionsCol = windowEnabled || Boolean(rowActions) || showInlineRowCopy;
   const selectedIdSet = (0, import_react20.useMemo)(
     () => new Set(selection?.selectedIds ?? []),
@@ -9804,7 +9924,8 @@ function MatrxDataTableCore({
           dirty: Boolean(rowEdits && field in rowEdits),
           onCommit: (next) => commitCell(id, field, next),
           ...href === void 0 ? {} : { href },
-          ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger }
+          ...col.editTrigger === void 0 ? {} : { editTrigger: col.editTrigger },
+          ...editRequest?.rowId === id && editRequest.field === field ? { editRequest: editRequest.nonce } : {}
         }
       );
     }
@@ -9914,7 +10035,7 @@ function MatrxDataTableCore({
     },
     [columns, commitColumnState, commitColumnWidths, controlledQuery, intelligentSearchEnabled, intelligentSearchScopes, toolbar]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ContextMenuBoundary, { label: tableId ?? "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     import_core3.DndContext,
     {
       id: tableDndContextId,
@@ -10012,6 +10133,7 @@ function MatrxDataTableCore({
           {
             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,
@@ -10398,7 +10520,7 @@ function MatrxDataTableCore({
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
-                          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react20.Fragment, { children: mobileCards(displayRow, index, {
+                          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("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;
@@ -10431,14 +10553,7 @@ function MatrxDataTableCore({
                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                     }
                                   ) : null,
-                                  renderRowActions(displayRow, {
-                                    closeDetail: () => setSelectedId(null),
-                                    openDetail: () => openDetail(displayRow),
-                                    openWindow: () => openWindow(displayRow),
-                                    closeWindow,
-                                    hasPendingEdits: Boolean(edits[id]),
-                                    discardPendingEdits: () => discardRowEdits(id)
-                                  })
+                                  renderRowActions(displayRow, buildRecordControls(displayRow))
                                 ]
                               }
                             ) : null
@@ -10570,6 +10685,10 @@ function MatrxDataTableCore({
                                       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__ */ (0, import_jsx_runtime41.jsxs)(
                                         "th",
                                         {
@@ -10581,7 +10700,7 @@ function MatrxDataTableCore({
                                             // ICON COLUMN (MatrxColumnDef.compact): a 40px star
                                             // column cannot honor `width: 40` while paying 16px of
                                             // padding for a 14px glyph.
-                                            col.compact ? "px-1" : "px-2",
+                                            compact ? "px-1" : "px-2",
                                             // An intentional mobile column set (see
                                             // MatrxColumnDef.mobileHidden). CSS, not a JS
                                             // breakpoint — no hydration mismatch, and the column
@@ -10592,13 +10711,13 @@ function MatrxDataTableCore({
                                             // it, a crowded table crushes a declared 190px column to a
                                             // few characters wide instead of using the canonical
                                             // horizontal-scroll surface.
-                                            (col.width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
+                                            (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)]",
                                             col.align === "center" && "text-center",
                                             col.align === "right" && "text-right"
                                           ),
-                                          style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
+                                          style: columnWidthVar(width, effectiveColumnWidths[id], id, columnResizable),
                                           children: [
                                             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                               ColumnHeaderCell,
@@ -10633,7 +10752,8 @@ function MatrxDataTableCore({
                                                 allowNegation: filterUi?.allowNegation,
                                                 allowNullModes: filterUi?.allowNullModes,
                                                 align: col.align,
-                                                compact: col.compact,
+                                                compact,
+                                                marker,
                                                 reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
                                             ) }),
@@ -10643,12 +10763,12 @@ function MatrxDataTableCore({
                                                 columnId: id,
                                                 label: headerLabel,
                                                 tableRef,
-                                                minWidth: col.minWidth,
+                                                minWidth,
                                                 maxWidth: col.maxWidth,
                                                 onResizeStart: captureResizeGestureSnapshot,
                                                 onResizeCancel: clearResizeGestureSnapshot,
-                                                onResizeCommit: (columnId2, width) => commitColumnWidths(
-                                                  { ...effectiveColumnWidths, [columnId2]: width },
+                                                onResizeCommit: (columnId2, width2) => commitColumnWidths(
+                                                  { ...effectiveColumnWidths, [columnId2]: width2 },
                                                   true
                                                 )
                                               }
@@ -10678,7 +10798,7 @@ function MatrxDataTableCore({
                                     {
                                       className: cn(
                                         "py-2",
-                                        col.compact ? "px-1" : "px-2",
+                                        col.compact || resolveColumnMarker(col) !== void 0 ? "px-1" : "px-2",
                                         col.mobileHidden && "max-sm:hidden"
                                       ),
                                       children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { className: "h-5 w-full" })
@@ -10764,19 +10884,19 @@ function MatrxDataTableCore({
                                               "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
                                               className: cn(
                                                 "py-1.5 align-middle lg:py-0.5",
-                                                col.compact ? "px-1" : "px-2",
+                                                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",
-                                                (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)]",
+                                                ((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)]",
                                                 col.align === "center" && "text-center",
                                                 col.align === "right" && "text-right"
                                               ),
                                               style: columnWidthVar(
-                                                col.width,
+                                                resolveColumnMarker(col) && col.width === void 0 ? 40 : col.width,
                                                 effectiveColumnWidths[columnId(col)],
                                                 columnId(col),
                                                 resizableColumns && col.resizable !== false
@@ -10834,14 +10954,7 @@ function MatrxDataTableCore({
                                                       ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
                                                     }
                                                   ) : null,
-                                                  renderRowActions(displayRow, {
-                                                    closeDetail: () => setSelectedId(null),
-                                                    openDetail: () => openDetail(displayRow),
-                                                    openWindow: () => openWindow(displayRow),
-                                                    closeWindow,
-                                                    hasPendingEdits: Boolean(rowEdits),
-                                                    discardPendingEdits: () => discardRowEdits(id)
-                                                  }),
+                                                  renderRowActions(displayRow, buildRecordControls(displayRow)),
                                                   windowEnabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
                                                     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                                                       Button,
@@ -10915,13 +11028,13 @@ function MatrxDataTableCore({
                                   {
                                     className: cn(
                                       "px-2 py-2 align-middle",
-                                      column.compact && "px-1",
+                                      (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
                                       column.className,
                                       column.align === "center" && "text-center",
                                       column.align === "right" && "text-right"
                                     ),
                                     style: columnWidthVar(
-                                      column.width,
+                                      resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
                                       effectiveColumnWidths[columnId(column)],
                                       columnId(column),
                                       resizableColumns && column.resizable !== false
@@ -11329,7 +11442,7 @@ function MatrxDataTableCore({
         ) : null })
       ]
     }
-  ) });
+  ) }) });
 }
 function HierarchyDragHandle({
   id,
@@ -11513,7 +11626,11 @@ function normalizeColumnWidthsForColumns(widths, columns) {
   return Object.fromEntries(
     Object.entries(normalized).map(([id, width]) => {
       const column = byId.get(id);
-      const bounds = resolveColumnResizeBounds(column?.minWidth, column?.maxWidth);
+      const marker = column ? resolveColumnMarker(column) : void 0;
+      const bounds = resolveColumnResizeBounds(
+        marker && column?.minWidth === void 0 ? 40 : column?.minWidth,
+        column?.maxWidth
+      );
       return [id, clampColumnWidth(width, bounds)];
     })
   );