@ai-matrx/design-system 0.57.0 → 0.59.1

package/dist/data-table/index.js

@@ -34543,9 +34543,9 @@ function TableIconActions({ actions }) {
 
 // src/data-table/MatrxDataTable.tsx
 import {
-  cloneElement as cloneElement2,
+  cloneElement as cloneElement3,
   Fragment as Fragment18,
-  isValidElement as isValidElement2,
+  isValidElement as isValidElement3,
   memo,
   useCallback as useCallback15,
   useEffect as useEffect26,
@@ -35451,6 +35451,162 @@ function Skeleton({ className, animated = true, ...props }) {
   );
 }
 
+// src/data-table/row-drawing.ts
+import { cloneElement, isValidElement } from "react";
+var LAZY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/data-table/lazy-callback");
+var MAX_DEPTH = 32;
+var HANDLER_KEY = /^on[A-Z]/;
+function lazyCallback(fn) {
+  fn[LAZY] = true;
+  return fn;
+}
+function isLazy(fn) {
+  return fn[LAZY] === true;
+}
+function trampolinable(key, fn) {
+  return isLazy(fn) || HANDLER_KEY.test(key);
+}
+function isPlainObject(value) {
+  if (value === null || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function makeSlot(fn) {
+  const slot = {
+    fn,
+    // A Proxy rather than a bare wrapper: a handler that carries its own members (a debounced
+    // function's `cancel`) keeps them, read from the latest function.
+    stable: new Proxy((() => void 0), {
+      apply: (_target, thisArg, args) => Reflect.apply(slot.fn, thisArg, args),
+      get: (_target, key) => Reflect.get(slot.fn, key)
+    })
+  };
+  return slot;
+}
+function sameEntries(a, b, path2, depth, updates) {
+  const keys2 = Object.keys(a);
+  if (keys2.length !== Object.keys(b).length) return false;
+  for (const key of keys2) {
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (key === "ref") {
+      if (!Object.is(a[key], b[key])) return false;
+      continue;
+    }
+    if (!sameDrawing(a[key], b[key], key, `${path2}/${key}`, depth + 1, updates)) return false;
+  }
+  return true;
+}
+function sameDrawing(previous, next, key, path2, depth, updates) {
+  if (Object.is(previous, next)) return true;
+  if (typeof previous === "function" && typeof next === "function") {
+    if (trampolinable(key, previous) && trampolinable(key, next)) {
+      updates.push([path2, next]);
+      return true;
+    }
+    return false;
+  }
+  if (depth > MAX_DEPTH) return false;
+  if (isValidElement(previous) && isValidElement(next)) {
+    if (previous.type !== next.type || previous.key !== next.key) return false;
+    return sameEntries(
+      previous.props,
+      next.props,
+      path2,
+      depth,
+      updates
+    );
+  }
+  if (Array.isArray(previous) && Array.isArray(next)) {
+    if (previous.length !== next.length) return false;
+    for (let i = 0; i < previous.length; i += 1) {
+      if (!sameDrawing(previous[i], next[i], key, `${path2}/${i}`, depth + 1, updates)) return false;
+    }
+    return true;
+  }
+  if (isPlainObject(previous) && isPlainObject(next)) return sameEntries(previous, next, path2, depth, updates);
+  return false;
+}
+function stabilize(value, key, path2, depth, slots, reuse) {
+  if (typeof value === "function") {
+    if (!trampolinable(key, value)) return value;
+    const fn = value;
+    const kept = reuse?.get(path2);
+    const slot = kept ?? makeSlot(fn);
+    slot.fn = fn;
+    slots.set(path2, slot);
+    return slot.stable;
+  }
+  if (depth > MAX_DEPTH) return value;
+  if (isValidElement(value)) {
+    const props = value.props;
+    let changed = null;
+    for (const propKey of Object.keys(props)) {
+      if (propKey === "ref") continue;
+      const before2 = props[propKey];
+      const after2 = stabilize(before2, propKey, `${path2}/${propKey}`, depth + 1, slots, reuse);
+      if (after2 !== before2) (changed ??= {})[propKey] = after2;
+    }
+    if (!changed) return value;
+    const clone = cloneElement(value, changed);
+    const before = value._store;
+    const after = clone._store;
+    if (before && after && "validated" in before) {
+      try {
+        after.validated = before.validated;
+      } catch {
+      }
+    }
+    return clone;
+  }
+  if (Array.isArray(value)) {
+    let out = null;
+    for (let i = 0; i < value.length; i += 1) {
+      const after = stabilize(value[i], key, `${path2}/${i}`, depth + 1, slots, reuse);
+      if (after !== value[i]) (out ??= value.slice())[i] = after;
+    }
+    return out ?? value;
+  }
+  if (isPlainObject(value)) {
+    let out = null;
+    for (const entryKey of Object.keys(value)) {
+      const before = value[entryKey];
+      const after = stabilize(before, entryKey, `${path2}/${entryKey}`, depth + 1, slots, reuse);
+      if (after !== before) (out ??= { ...value })[entryKey] = after;
+    }
+    return out ?? value;
+  }
+  return value;
+}
+var RowDrawings = class {
+  rows = /* @__PURE__ */ new Map();
+  /**
+   * The element to hand React for this row. The SAME object as last time when `raw` draws what the
+   * last one drew (its handlers are re-pointed); a new one otherwise.
+   */
+  draw(rowId, raw, fresh = false) {
+    const previous = this.rows.get(rowId);
+    if (previous && !fresh) {
+      const updates = [];
+      if (sameDrawing(previous.raw, raw, "", "", 0, updates) && updates.every(([path2]) => previous.slots.has(path2))) {
+        for (const [path2, fn] of updates) previous.slots.get(path2).fn = fn;
+        previous.raw = raw;
+        return previous.out;
+      }
+    }
+    const slots = /* @__PURE__ */ new Map();
+    const out = stabilize(raw, "", "", 0, slots, previous?.slots);
+    this.rows.set(rowId, { raw, out, slots });
+    return out;
+  }
+  /** Forget rows that are no longer in the table (bounded by what was ever drawn). */
+  prune(liveIds) {
+    for (const id of this.rows.keys()) if (!liveIds.has(id)) this.rows.delete(id);
+  }
+  get size() {
+    return this.rows.size;
+  }
+};
+
 // src/data-table/TableTitleRow.tsx
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function TableTitleRow({
@@ -40702,9 +40858,9 @@ function WorkspaceWindowSlot({ onNode, sessionKey, onClose }) {
 
 // src/tap-target/tap-target-button.tsx
 import {
-  cloneElement,
+  cloneElement as cloneElement2,
   forwardRef as forwardRef13,
-  isValidElement,
+  isValidElement as isValidElement2,
   useCallback as useCallback9,
   useRef as useRef15
 } from "react";
@@ -41115,8 +41271,8 @@ function IconContent({
   className
 }) {
   if (icon) {
-    if (isValidElement(icon)) {
-      return cloneElement(icon, {
+    if (isValidElement2(icon)) {
+      return cloneElement2(icon, {
         className: cn2(className, icon.props.className)
       });
     }
@@ -49896,7 +50052,7 @@ function formatValue2(value) {
     return String(value);
   }
 }
-function isPlainObject(value) {
+function isPlainObject2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
 }
 function DataRowInspector({
@@ -49909,7 +50065,7 @@ function DataRowInspector({
   location,
   tokenForField = noFieldToken
 }) {
-  const entries = isPlainObject(row) ? Object.entries(row) : [["value", row]];
+  const entries = isPlainObject2(row) ? Object.entries(row) : [["value", row]];
   const fieldButtons = (key, value) => fieldCopy ? /* @__PURE__ */ jsx53("div", { className: "absolute right-1 top-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/field:opacity-100", children: /* @__PURE__ */ jsx53(
     CopyButtons,
     {
@@ -52149,7 +52305,7 @@ function TableToolbarAction({
         disabled,
         onClick,
         children: [
-          isValidElement2(children) ? cloneElement2(children, { className: cn("h-4 w-4", children.props.className) }) : children,
+          isValidElement3(children) ? cloneElement3(children, { className: cn("h-4 w-4", children.props.className) }) : children,
           /* @__PURE__ */ jsx59("span", { children: ariaLabel })
         ]
       }
@@ -52171,7 +52327,7 @@ function TableToolbarAction({
         "aria-busy": busy || void 0,
         disabled,
         onClick,
-        children: isValidElement2(children) ? cloneElement2(children, { className: cn("h-5 w-5", children.props.className) }) : children
+        children: isValidElement3(children) ? cloneElement3(children, { className: cn("h-5 w-5", children.props.className) }) : children
       }
     ) }) }),
     /* @__PURE__ */ jsx59(TooltipContent, { children: tooltip ?? ariaLabel })
@@ -52200,9 +52356,10 @@ function tableRowCopyProps(copy, row, sourceId, defaultColumns) {
     label: copy.label,
     ...copy.rowReferences ? { references: copy.rowReferences(row) } : {},
     ...copy.triggerVariant ? { triggerVariant: copy.triggerVariant } : {},
-    human: () => copy.humanRow(row),
-    json: () => copy.agentRow ? copy.agentRow(row) : row,
-    agent: () => defaultColumns ? buildDefaultTableRowAgentInput(copy, row, defaultColumns) : buildRowAgentInput(copy, row),
+    // Run on a copy, never while the menu renders: a row may keep a trampoline to them.
+    human: lazyCallback(() => copy.humanRow(row)),
+    json: lazyCallback(() => copy.agentRow ? copy.agentRow(row) : row),
+    agent: lazyCallback(() => defaultColumns ? buildDefaultTableRowAgentInput(copy, row, defaultColumns()) : buildRowAgentInput(copy, row)),
     ...aiVariants === void 0 ? {} : { aiVariants }
   };
 }
@@ -52435,10 +52592,14 @@ function versionFacts(version2) {
   return Array.isArray(version2) ? ["rowVersion", ...version2] : ["rowVersion", version2];
 }
 function sameBodyRow(a, b) {
-  return a.row === b.row && a.index === b.index && a.epoch === b.epoch && a.rowId === b.rowId && a.facts.length === b.facts.length && a.facts.every((fact, i) => Object.is(fact, b.facts[i]));
-}
-var MatrxTableBodyRow = memo(function MatrxTableBodyRow2({ row, index, render }) {
-  return /* @__PURE__ */ jsx59(Fragment19, { children: render(row, index) });
+  return a.row === b.row && a.index === b.index && a.epoch === b.epoch && a.probe === b.probe && a.rowId === b.rowId && a.facts.length === b.facts.length && a.facts.every((fact, i) => Object.is(fact, b.facts[i]));
+}
+var MatrxTableBodyRow = memo(function MatrxTableBodyRow2(props) {
+  const { rowId, row, index, draw } = props;
+  const last = useRef28(null);
+  const fresh = last.current === null || !sameBodyRow({ ...last.current, probe: props.probe }, props);
+  last.current = props;
+  return draw(rowId, row, index, fresh);
 }, sameBodyRow);
 var MatrxTableChrome = memo(function MatrxTableChrome2({ render }) {
   return /* @__PURE__ */ jsx59(Fragment19, { children: render() });
@@ -53302,6 +53463,9 @@ function MatrxDataTableCore(coreProps) {
   const tableContextMenuInstanceId = useId4();
   const tableDndContextId = useId4();
   const defaultCopyTitle = toolbar?.title || "Table";
+  const copyColumnsLatest = useRef28(declaredVisibleCopyColumns);
+  copyColumnsLatest.current = declaredVisibleCopyColumns;
+  const readDeclaredCopyColumns = lazyCallback(() => copyColumnsLatest.current);
   const defaultCopy = useMemo12(() => ({
     label: defaultCopyTitle,
     listLabel: defaultCopyTitle,
@@ -53311,11 +53475,11 @@ function MatrxDataTableCore(coreProps) {
     listDescription: `${defaultCopyTitle} \u2014 ${remoteQuery ? "current filtered/sorted loaded view" : "current filtered/sorted view"}.`,
     listAttributes: (_visible, loaded) => remoteQuery ? { coverage: "loaded-current-view", loaded_count: loaded.length } : { coverage: "current-view" },
     humanRow: (row) => formatDefaultTableCopyRecord(
-      projectDefaultTableCopyRow(row, declaredVisibleCopyColumns),
-      declaredVisibleCopyColumns
+      projectDefaultTableCopyRow(row, copyColumnsLatest.current),
+      copyColumnsLatest.current
     ),
-    agentRow: (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
-  }), [defaultCopyTitle, declaredVisibleCopyColumns, remoteQuery]);
+    agentRow: (row) => projectDefaultTableCopyRow(row, copyColumnsLatest.current)
+  }), [defaultCopyTitle, remoteQuery]);
   const effectiveCopy = copy === false ? void 0 : copy ?? defaultCopy;
   const visibleDataColumns = useMemo12(() => visibleColumns.filter((column) => !column.customActions), [visibleColumns]);
   const effectiveCopyColumns = copy === void 0 ? declaredVisibleCopyColumns : visibleDataColumns;
@@ -54010,7 +54174,7 @@ function MatrxDataTableCore(coreProps) {
     return /* @__PURE__ */ jsx59(
       MatrxTableRowAlchemyProvider,
       {
-        copy: tableRowCopyProps(effectiveCopy, row, `${tableCopySourceNamespace}:row:${getRowId(row)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
+        copy: tableRowCopyProps(effectiveCopy, row, `${tableCopySourceNamespace}:row:${getRowId(row)}`, copy === void 0 ? readDeclaredCopyColumns : void 0),
         placement: rowCopyInMenu ? "menu" : "inline",
         controls,
         children: scopedActions
@@ -54697,13 +54861,13 @@ function MatrxDataTableCore(coreProps) {
             copy: effectiveCopy,
             row: displayRow,
             sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
-            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+            ...copy === void 0 ? { defaultColumns: readDeclaredCopyColumns } : {}
           }
         ) : null,
         effectiveCopy && showRowCopy ? /* @__PURE__ */ jsx59(
           MatrxTableRowAlchemyProvider,
           {
-            copy: tableRowCopyProps(effectiveCopy, displayRow, `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`, copy === void 0 ? declaredVisibleCopyColumns : void 0),
+            copy: tableRowCopyProps(effectiveCopy, displayRow, `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`, copy === void 0 ? readDeclaredCopyColumns : void 0),
             placement: rowCopyInMenu && columnId(col) === (menuActionsColumn ? columnId(menuActionsColumn) : void 0) ? "menu" : "inline",
             controls,
             children: content
@@ -54877,15 +55041,15 @@ function MatrxDataTableCore(coreProps) {
     const drawn = buildRecordControls(row);
     const live = {};
     for (const [key, value] of Object.entries(drawn)) {
-      live[key] = typeof value === "function" ? (...args) => {
+      live[key] = typeof value === "function" ? lazyCallback((...args) => {
         const now = rowLatest.current.buildRecordControls(row);
         const handler = now[key];
         return typeof handler === "function" ? handler(...args) : void 0;
-      } : value;
+      }) : value;
     }
     return live;
   };
-  const rowEpoch = useRenderEpoch([
+  const rowShape = [
     // WHAT A BODY ROW READS FROM THIS TABLE'S PROPS — and nothing it does not, so a host that
     // rebuilds its toolbar, its query or its empty state on every render redraws no row. Handlers
     // are absent on purpose: they run through `rowLatest`. Columns count by what a body cell
@@ -54949,7 +55113,12 @@ function MatrxDataTableCore(coreProps) {
     hierarchyIndex,
     hierarchyBlockedIds,
     draggedRowId
-  ]);
+  ];
+  const rowEpoch = useRenderEpoch(rowShape.filter((value) => typeof value !== "function" && (typeof value !== "object" || value === null)));
+  const rowProbe = useRenderEpoch(rowShape.filter((value) => typeof value === "function" || typeof value === "object" && value !== null));
+  const rowDrawings = useRef28(null);
+  rowDrawings.current ??= new RowDrawings();
+  const drawBodyRow = (rowId, row, index, fresh) => rowDrawings.current.draw(rowId, renderRecordRow(row, index), fresh);
   chromeLatest.current = { processed, data, toggleAllOnPage, showMore: progressiveRows.showMore, applySavedView };
   const chromeGeometry = [
     ...Object.entries(effectiveColumnWidths).flat(),
@@ -55391,7 +55560,7 @@ function MatrxDataTableCore(coreProps) {
                         copy: effectiveCopy,
                         row: displayRow,
                         sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
-                        ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                        ...copy === void 0 ? { defaultColumns: readDeclaredCopyColumns } : {}
                       }
                     ) : null,
                     renderRowActions(displayRow, controls),
@@ -56027,7 +56196,7 @@ function MatrxDataTableCore(coreProps) {
                                           copy: effectiveCopy,
                                           row: displayRow,
                                           sourceId: `${tableCopySourceNamespace}:row:${getRowId(displayRow)}`,
-                                          ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                                          ...copy === void 0 ? { defaultColumns: readDeclaredCopyColumns } : {}
                                         }
                                       ) : null,
                                       renderRowActions(displayRow, controls),
@@ -56468,8 +56637,9 @@ function MatrxDataTableCore(coreProps) {
                                           row,
                                           index,
                                           epoch: rowEpoch,
+                                          probe: rowProbe,
                                           facts: rowFactsFor(row, id, index),
-                                          render: renderRecordRow
+                                          draw: drawBodyRow
                                         },
                                         id
                                       );
@@ -56920,7 +57090,7 @@ function MatrxDataTableCore(coreProps) {
                             copy: effectiveCopy,
                             sourceId: `${tableCopySourceNamespace}:row:${getRowId(selectedRow)}`,
                             row: selectedRow,
-                            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                            ...copy === void 0 ? { defaultColumns: readDeclaredCopyColumns } : {}
                           }
                         ) : null,
                         detail?.headerActions?.(selectedRow),
@@ -57008,7 +57178,7 @@ function MatrxDataTableCore(coreProps) {
                             copy: effectiveCopy,
                             sourceId: `${tableCopySourceNamespace}:row:${getRowId(windowRow)}`,
                             row: windowRow,
-                            ...copy === void 0 ? { defaultColumns: declaredVisibleCopyColumns } : {}
+                            ...copy === void 0 ? { defaultColumns: readDeclaredCopyColumns } : {}
                           }
                         ) : null
                       ] }),
@@ -57275,9 +57445,9 @@ function HierarchyDroppableRow({
   children
 }) {
   const { setNodeRef } = useDroppable2({ id, disabled });
-  if (!isValidElement2(children) || children.type !== "tr") return children;
+  if (!isValidElement3(children) || children.type !== "tr") return children;
   const row = children;
-  return cloneElement2(row, {
+  return cloneElement3(row, {
     ref: setNodeRef,
     className: row.props.className
   });