@ai-matrx/design-system 0.18.19 → 0.18.20

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.18.20
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.18.19..npm/design-system/v0.18.20 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.18.19
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/data-table/index.cjs

@@ -7265,7 +7265,10 @@ function MatrxDataTableCore({
     ...appendQuery?.scroll
   });
   const rootRef = (0, import_react13.useRef)(null);
+  const actionDiagnosticObserver = (0, import_react13.useRef)(null);
   const setDiagnosticBoundaryRef = (0, import_react13.useCallback)((node) => {
+    actionDiagnosticObserver.current?.disconnect();
+    actionDiagnosticObserver.current = null;
     rootRef.current = node;
     if (!node) return;
     node.style.setProperty("outline", "2px solid #2563eb", "important");
@@ -7283,6 +7286,22 @@ function MatrxDataTableCore({
     boundary.style.setProperty("z-index", "2147483647", "important");
     boundary.style.setProperty("box-sizing", "border-box", "important");
     boundary.style.setProperty("border", "2px solid #2563eb", "important");
+    const paintActionDiagnostics = () => {
+      const paint = (selector, color) => {
+        for (const element of Array.from(node.querySelectorAll(selector))) {
+          if (element.closest("[data-matrx-table]") !== node) continue;
+          element.style.setProperty("outline", `1px solid ${color}`, "important");
+          element.style.setProperty("outline-offset", "-1px", "important");
+        }
+      };
+      paint("[data-matrx-table-row-action-cell], [data-matrx-table-row-actions]", "#16a34a");
+      paint("[data-matrx-table-row-actions] :is(button, a)", "#f97316");
+      paint("[data-matrx-table-row-actions] .matrx-tap-pill", "#a855f7");
+      paint("[data-matrx-table-row-actions] svg", "#ef4444");
+    };
+    paintActionDiagnostics();
+    actionDiagnosticObserver.current = new MutationObserver(paintActionDiagnostics);
+    actionDiagnosticObserver.current.observe(node, { childList: true, subtree: true });
   }, []);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
@@ -8540,6 +8559,7 @@ function MatrxDataTableCore({
                             actions: showRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               "div",
                               {
+                                "data-matrx-table-row-actions": true,
                                 className: "inline-flex items-center gap-0",
                                 onClick: (event) => event.stopPropagation(),
                                 children: [
@@ -8840,9 +8860,10 @@ function MatrxDataTableCore({
                                         columnId(col)
                                       );
                                     }),
-                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                                    showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { "data-matrx-table-row-action-cell": true, className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                                       "div",
                                       {
+                                        "data-matrx-table-row-actions": true,
                                         className: "inline-flex items-center justify-end gap-0",
                                         onClick: (e) => e.stopPropagation(),
                                         children: [