@ai-matrx/design-system 0.21.3 → 0.21.5

package/dist/data-table/index.js

@@ -6,11 +6,11 @@ import {
   Fragment as Fragment6,
   isValidElement as isValidElement2,
   useCallback as useCallback6,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useId as useId2,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo7,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState21
 } from "react";
 import {
@@ -1886,6 +1886,12 @@ function MatrxTableRowAlchemyScope({ value, children }) {
 function useMatrxTableRowAlchemy() {
   return useContext4(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] ??= createContext4(null);
+function MatrxTableRowControlsScope({ value, children }) {
+  return /* @__PURE__ */ jsx18(RowControlsContext.Provider, { value, children });
+}
 
 // src/data-table/useTableNotice.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -5592,7 +5598,7 @@ import {
 // src/data-table/RowAlchemyLauncher.tsx
 import { useEffect as useEffect8, useRef as useRef9, useState as useState13 } from "react";
 import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
-function MatrxTableRowAlchemyProvider({ copy, placement, children }) {
+function MatrxTableRowAlchemyProvider({ copy, placement, controls, children }) {
   const controller = useRef9(null);
   const { CopyControls } = useMatrxDataTableHost();
   const [active, setActive] = useState13(false);
@@ -5609,6 +5615,7 @@ function MatrxTableRowAlchemyProvider({ copy, placement, children }) {
   }, [active, placement]);
   const value = {
     copy,
+    controls,
     placement,
     ready: active,
     activate: () => setActive(true),
@@ -5776,6 +5783,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
 import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var HeaderButton = forwardRef12(({ dragDescription, "aria-describedby": tooltipDescription, ...props }, ref) => {
@@ -5808,6 +5843,7 @@ function ColumnHeaderCell({
   align = "left",
   className,
   compact = false,
+  marker,
   filterApplyLabel,
   filterShowCancel = false,
   filterFooterHint,
@@ -5859,7 +5895,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__ */ jsxs22(
     PopoverContent,
     {
@@ -5888,7 +5926,7 @@ function ColumnHeaderCell({
                 onClick: onSortAsc,
                 children: [
                   /* @__PURE__ */ jsx31(ArrowUp, { className: "h-3.5 w-3.5" }),
-                  "Sort ascending"
+                  markerLabels ? `${markerLabels.label} last` : "Sort ascending"
                 ]
               }
             ),
@@ -5901,7 +5939,7 @@ function ColumnHeaderCell({
                 onClick: onSortDesc,
                 children: [
                   /* @__PURE__ */ jsx31(ArrowDown, { className: "h-3.5 w-3.5" }),
-                  "Sort descending"
+                  markerLabels ? `${markerLabels.label} first` : "Sort descending"
                 ]
               }
             ),
@@ -5914,7 +5952,7 @@ function ColumnHeaderCell({
                 onClick: onClearSort,
                 children: [
                   /* @__PURE__ */ jsx31(ListX, { className: "h-3.5 w-3.5" }),
-                  "Clear sort"
+                  markerLabels ? `Clear ${markerLabels.lowerLabel} sort` : "Clear sort"
                 ]
               }
             ) : null
@@ -5933,6 +5971,13 @@ function ColumnHeaderCell({
             },
             selectOptions,
             selectSingle,
+            ...markerLabels ? {
+              booleanLabels: {
+                all: "All",
+                true: markerLabels.onlyLabel,
+                false: markerLabels.notLabel
+              }
+            } : {},
             allowNullModes
           }
         ) : null,
@@ -6148,7 +6193,8 @@ function FilterBody({
   onChange,
   selectOptions,
   selectSingle = false,
-  allowNullModes = false
+  allowNullModes = false,
+  booleanLabels
 }) {
   if (kind === "text") {
     const text = value?.kind === "text" ? value.value : "";
@@ -6235,9 +6281,9 @@ function FilterBody({
           children: [
             /* @__PURE__ */ jsx31(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx31(SelectValue, {}) }),
             /* @__PURE__ */ jsxs22(SelectContent, { children: [
-              /* @__PURE__ */ jsx31(SelectItem, { value: "__all__", children: "All" }),
-              /* @__PURE__ */ jsx31(SelectItem, { value: "true", children: "Yes" }),
-              /* @__PURE__ */ jsx31(SelectItem, { value: "false", children: "No" })
+              /* @__PURE__ */ jsx31(SelectItem, { value: "__all__", children: booleanLabels?.all ?? "All" }),
+              /* @__PURE__ */ jsx31(SelectItem, { value: "true", children: booleanLabels?.true ?? "Yes" }),
+              /* @__PURE__ */ jsx31(SelectItem, { value: "false", children: booleanLabels?.false ?? "No" })
             ] })
           ]
         }
@@ -7442,7 +7488,7 @@ function DirtySavePill({
 }
 
 // src/data-table/EditableTableCell.tsx
-import { useState as useState19 } from "react";
+import { useEffect as useEffect14, useRef as useRef12, useState as useState19 } from "react";
 import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function CellEditShell({
   href,
@@ -7489,9 +7535,13 @@ function EditableTableCell({
   onCommit,
   className,
   href,
-  editTrigger = "click"
+  editTrigger = "click",
+  editRequest
 }) {
   const [open, setOpen] = useState19(false);
+  useEffect14(() => {
+    if (editRequest !== void 0) setOpen(true);
+  }, [editRequest]);
   const usePencil = Boolean(href) || editTrigger === "pencil";
   if (editType === "string") {
     return /* @__PURE__ */ jsx38(
@@ -7503,7 +7553,8 @@ function EditableTableCell({
         onCommit,
         ...className === void 0 ? {} : { className },
         ...href === void 0 ? {} : { href },
-        usePencil
+        usePencil,
+        ...editRequest === void 0 ? {} : { editRequest }
       }
     );
   }
@@ -7578,10 +7629,18 @@ function InlineStringEditor({
   onCommit,
   className,
   href,
-  usePencil
+  usePencil,
+  editRequest
 }) {
   const [editing, setEditing] = useState19(false);
   const [draft, setDraft] = useState19(value);
+  const handledEditRequest = useRef12(void 0);
+  useEffect14(() => {
+    if (editRequest === void 0 || handledEditRequest.current === editRequest) return;
+    handledEditRequest.current = editRequest;
+    setDraft(value);
+    setEditing(true);
+  }, [editRequest, value]);
   if (!editing) {
     if (usePencil) {
       return /* @__PURE__ */ jsx38(
@@ -8333,6 +8392,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";
@@ -8398,6 +8458,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 {
@@ -8505,7 +8568,7 @@ function MatrxDataTableWithUrlState({
     ...urlState.history === void 0 ? {} : { history: urlState.history },
     ...urlState.textHistory === void 0 ? {} : { textHistory: urlState.textHistory }
   });
-  useEffect14(() => {
+  useEffect15(() => {
     if (activeUrlTableIds.has(urlState.id)) {
       throw new Error(
         `Duplicate MatrxDataTable urlState.id "${urlState.id}" on one page. Give every table a unique stable id.`
@@ -8575,6 +8638,9 @@ function MatrxDataTableWithUrlState({
   );
 }
 var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
+function TableContextPassthrough({ children }) {
+  return /* @__PURE__ */ jsx41(Fragment7, { children });
+}
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
@@ -8601,6 +8667,7 @@ function MatrxDataTableCore({
   detail,
   window: windowConfig,
   copy,
+  contextMenu,
   rowCopyPlacement = "inline",
   edit,
   hierarchy,
@@ -8630,12 +8697,13 @@ function MatrxDataTableCore({
 }) {
   const appendQuery = query?.mode === "controlled-append" ? query : null;
   const appendQueryKey = appendQuery?.pagination.queryKey ?? null;
-  const committedAppendQueryKey = useRef12(appendQueryKey);
+  const committedAppendQueryKey = useRef13(appendQueryKey);
   const appendSourceChanged = appendQuery !== null && committedAppendQueryKey.current !== appendQueryKey;
   const data = appendQuery ? appendQuery.pagination.rows : suppliedData;
   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;
@@ -8644,7 +8712,7 @@ function MatrxDataTableCore({
   const [savedViewError, setSavedViewError] = useState21(null);
   const [toolbarActionError, setToolbarActionError] = useState21(null);
   const [toolbarActionPending, setToolbarActionPending] = useState21({ refresh: false, add: false });
-  const toolbarActionPendingRef = useRef12({ refresh: false, add: false });
+  const toolbarActionPendingRef = useRef13({ refresh: false, add: false });
   const CHECKBOX_TAP_AREA = "h-4 w-4 touch-manipulation";
   const mobileCardsClass = mobileCardsBreakpoint === "lg" ? "lg:hidden" : "sm:hidden";
   const tableWithCardsClass = mobileCardsBreakpoint === "lg" ? "max-lg:hidden" : "max-sm:hidden";
@@ -8782,8 +8850,10 @@ function MatrxDataTableCore({
   const [windowRowSnapshot, setWindowRowSnapshot] = useState21(null);
   const editScopeKey = appendQueryKey === null ? "\0local" : `append:${appendQueryKey}`;
   const [editsByScope, setEditsByScope] = useState21({});
-  const editRevisionRef = useRef12({});
+  const editRevisionRef = useRef13({});
   const [savingByScope, setSavingByScope] = useState21({});
+  const savingScopesRef = useRef13(/* @__PURE__ */ new Set());
+  const [editRequest, setEditRequest] = useState21(null);
   const [confirmForeignDraftDiscard, setConfirmForeignDraftDiscard] = useState21(false);
   const edits = editsByScope[editScopeKey]?.values ?? {};
   const saving = (savingByScope[editScopeKey] ?? 0) > 0;
@@ -8851,7 +8921,7 @@ function MatrxDataTableCore({
     rows: Object.entries(draft.values).map(([rowId, columns2]) => ({ rowId, columns: columns2 }))
   }));
   const selection = appendSourceChanged && selectionConfig ? { ...selectionConfig, selectedIds: [] } : selectionConfig;
-  useEffect14(() => {
+  useEffect15(() => {
     const previous = committedAppendQueryKey.current;
     committedAppendQueryKey.current = appendQueryKey;
     if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
@@ -8869,13 +8939,13 @@ function MatrxDataTableCore({
     onWindowRowIdChange,
     selectionConfig
   ]);
-  const scrollRef = useRef12(null);
-  const tableRef = useRef12(null);
-  const tableHeaderRef = useRef12(null);
-  const cardsScrollRef = useRef12(null);
+  const scrollRef = useRef13(null);
+  const tableRef = useRef13(null);
+  const tableHeaderRef = useRef13(null);
+  const cardsScrollRef = useRef13(null);
   const [documentStickyHeader, setDocumentStickyHeader] = useState21(false);
-  const documentStickyHeaderRef = useRef12(false);
-  const previousAppendKeyForScrollReset = useRef12(appendQueryKey);
+  const documentStickyHeaderRef = useRef13(false);
+  const previousAppendKeyForScrollReset = useRef13(appendQueryKey);
   useLayoutEffect2(() => {
     const previous = previousAppendKeyForScrollReset.current;
     previousAppendKeyForScrollReset.current = appendQueryKey;
@@ -8901,7 +8971,7 @@ function MatrxDataTableCore({
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.thresholdPx !== void 0 ? { thresholdPx: appendScrollPolicy.thresholdPx } : {},
     ...appendScrollPolicy?.mode === "scroll" && appendScrollPolicy.intentTimeoutMs !== void 0 ? { intentTimeoutMs: appendScrollPolicy.intentTimeoutMs } : {}
   });
-  const rootRef = useRef12(null);
+  const rootRef = useRef13(null);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -8921,7 +8991,7 @@ function MatrxDataTableCore({
       behavior: "smooth"
     });
   };
-  useEffect14(() => {
+  useEffect15(() => {
     updateScrollHint();
     window.addEventListener("resize", updateScrollHint);
     const el = scrollRef.current;
@@ -9003,18 +9073,18 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths, columns)
   );
   const [fixedTableGeometry, setFixedTableGeometry] = useState21(null);
-  const knownColumnIds = useRef12(new Set(columns.map(columnId)));
-  const draggedColumnId = useRef12(null);
-  const columnDragActive = useRef12(false);
-  const columnDragRaf = useRef12(null);
-  const columnDragScrollDirection = useRef12(0);
+  const knownColumnIds = useRef13(new Set(columns.map(columnId)));
+  const draggedColumnId = useRef13(null);
+  const columnDragActive = useRef13(false);
+  const columnDragRaf = useRef13(null);
+  const columnDragScrollDirection = useRef13(0);
   const [columnDragPreview, setColumnDragPreview] = useState21(null);
   const stopColumnDragScroll = useCallback6(() => {
     if (columnDragRaf.current !== null) cancelAnimationFrame(columnDragRaf.current);
     columnDragRaf.current = null;
     columnDragScrollDirection.current = 0;
   }, []);
-  useEffect14(() => () => {
+  useEffect15(() => () => {
     columnDragActive.current = false;
     stopColumnDragScroll();
   }, [stopColumnDragScroll]);
@@ -9062,7 +9132,7 @@ function MatrxDataTableCore({
     () => normalizeColumnWidthsForColumns(columnState?.widths ?? columnWidths, columns),
     [columns, columnState?.widths, columnWidths]
   );
-  const resizeGestureSnapshotRef = useRef12(null);
+  const resizeGestureSnapshotRef = useRef13(null);
   const measureVisibleColumnWidths = useCallback6(() => {
     const measured = {};
     const headers = tableRef.current ? Array.from(tableRef.current.querySelectorAll(
@@ -9135,7 +9205,7 @@ function MatrxDataTableCore({
     }
     setColumnWidths(normalized);
   }, [columnIds, columnState, columns, measureFixedTableGeometry, measureVisibleColumnWidths]);
-  useEffect14(() => {
+  useEffect15(() => {
     const ids = columns.map(columnId);
     if (columnState) return;
     const previousIds = knownColumnIds.current;
@@ -9205,6 +9275,7 @@ function MatrxDataTableCore({
     [visibleColumns]
   );
   const tableCopySourceNamespace = useId2();
+  const tableContextMenuInstanceId = useId2();
   const tableDndContextId = useId2();
   const defaultCopyTitle = toolbar?.title || "Table";
   const defaultCopy = useMemo7(() => ({
@@ -9320,8 +9391,8 @@ function MatrxDataTableCore({
     intelligentSearchEnabled,
     searchScope
   ]);
-  const lastNotifiedViewRows = useRef12(null);
-  useEffect14(() => {
+  const lastNotifiedViewRows = useRef13(null);
+  useEffect15(() => {
     if (!onViewChange) {
       lastNotifiedViewRows.current = null;
       return;
@@ -9330,7 +9401,7 @@ function MatrxDataTableCore({
     lastNotifiedViewRows.current = processed;
     if (changed) onViewChange(processed);
   }, [processed, onViewChange]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (controlledQuery) return;
     setInternalPage(1);
   }, [
@@ -9382,7 +9453,7 @@ function MatrxDataTableCore({
     const start = (safePage - 1) * effectivePageSize;
     return processed.slice(start, start + effectivePageSize);
   }, [processed, safePage, effectivePageSize, pageSize, remoteQuery, hidePagination, localProgressiveEnabled, progressiveRows.rows]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!controlledQuery || controlledQuery.state.page === safePage) return;
     emitControlledQueryChange({ page: safePage });
   }, [controlledQuery, emitControlledQueryChange, safePage]);
@@ -9406,13 +9477,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__ */ jsx41(MatrxTableRowControlsScope, { value: controls, children: actions });
+    if (!effectiveCopy || !showRowCopy) return scopedActions;
     return /* @__PURE__ */ jsx41(
       MatrxTableRowAlchemyProvider,
       {
         copy: tableRowCopyProps(effectiveCopy, row, `${tableCopySourceNamespace}:row:${getRowId(row)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
         placement: rowCopyInMenu ? "menu" : "inline",
-        children: actions
+        controls,
+        children: scopedActions
       }
     );
   };
@@ -9529,6 +9602,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 = useMemo7(() => {
@@ -9700,15 +9804,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));
@@ -9716,16 +9823,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 } };
       });
@@ -9735,6 +9842,7 @@ function MatrxDataTableCore({
         `Couldn't save: ${e instanceof Error ? e.message : String(e)}`
       );
     } finally {
+      savingScopesRef.current.delete(scope);
       finishSaving(scope);
     }
   };
@@ -9742,6 +9850,17 @@ function MatrxDataTableCore({
     setEdits({});
     edit?.onCancel?.();
   };
+  useEffect15(() => {
+    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 = useMemo7(
     () => new Set(selection?.selectedIds ?? []),
@@ -9759,7 +9878,7 @@ function MatrxDataTableCore({
     () => data.filter((row) => selectedIdSet.has(getRowId(row))),
     [data, selectedIdSet, getRowId]
   );
-  const lastToggledIndex = useRef12(null);
+  const lastToggledIndex = useRef13(null);
   const setSelectedIds = (next) => selection?.onSelectedIdsChange([...next]);
   const toggleRowSelected = (index, shiftKey) => {
     if (!selection) return;
@@ -9822,7 +9941,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 } : {}
         }
       );
     }
@@ -9932,7 +10052,7 @@ function MatrxDataTableCore({
     },
     [columns, commitColumnState, commitColumnWidths, controlledQuery, intelligentSearchEnabled, intelligentSearchScopes, toolbar]
   );
-  return /* @__PURE__ */ jsx41(TooltipProvider, { children: /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx41(TooltipProvider, { children: /* @__PURE__ */ jsx41(ContextMenuBoundary, { label: tableId ?? "Data table", children: /* @__PURE__ */ jsxs31(
     DndContext,
     {
       id: tableDndContextId,
@@ -10030,6 +10150,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,
@@ -10416,7 +10537,7 @@ function MatrxDataTableCore({
                           const id = getRowId(row);
                           const displayRow = applyRowEdits(row, edits[id]);
                           const selectable = selection?.isRowSelectable?.(row) ?? Boolean(selection);
-                          return /* @__PURE__ */ jsx41(Fragment6, { children: mobileCards(displayRow, index, {
+                          return /* @__PURE__ */ jsx41("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;
@@ -10449,14 +10570,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
@@ -10588,6 +10702,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__ */ jsxs31(
                                         "th",
                                         {
@@ -10599,7 +10717,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
@@ -10610,13 +10728,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__ */ jsx41(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx41(
                                               ColumnHeaderCell,
@@ -10651,7 +10769,8 @@ function MatrxDataTableCore({
                                                 allowNegation: filterUi?.allowNegation,
                                                 allowNullModes: filterUi?.allowNullModes,
                                                 align: col.align,
-                                                compact: col.compact,
+                                                compact,
+                                                marker,
                                                 reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
                                             ) }),
@@ -10661,12 +10780,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
                                                 )
                                               }
@@ -10696,7 +10815,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__ */ jsx41(Skeleton, { className: "h-5 w-full" })
@@ -10782,19 +10901,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
@@ -10852,14 +10971,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__ */ jsxs31(Tooltip, { children: [
                                                     /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
                                                       Button,
@@ -10933,13 +11045,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
@@ -11347,7 +11459,7 @@ function MatrxDataTableCore({
         ) : null })
       ]
     }
-  ) });
+  ) }) });
 }
 function HierarchyDragHandle({
   id,
@@ -11531,7 +11643,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)];
     })
   );
@@ -11895,6 +12011,7 @@ export {
   downloadTableAsXlsx,
   filterKindLabel,
   parseTableViewSnapshot,
+  resolveColumnMarker,
   resolveFilterKind,
   rowsToCsvFromColumns,
   rowsToMarkdownTable,