@ai-matrx/design-system 0.18.19 → 0.18.20

package/dist/data-table/index.js

@@ -7271,7 +7271,10 @@ function MatrxDataTableCore({
     ...appendQuery?.scroll
   });
   const rootRef = useRef6(null);
+  const actionDiagnosticObserver = useRef6(null);
   const setDiagnosticBoundaryRef = useCallback4((node) => {
+    actionDiagnosticObserver.current?.disconnect();
+    actionDiagnosticObserver.current = null;
     rootRef.current = node;
     if (!node) return;
     node.style.setProperty("outline", "2px solid #2563eb", "important");
@@ -7289,6 +7292,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"
@@ -8546,6 +8565,7 @@ function MatrxDataTableCore({
                             actions: showRowCopy || rowActions ? /* @__PURE__ */ jsxs26(
                               "div",
                               {
+                                "data-matrx-table-row-actions": true,
                                 className: "inline-flex items-center gap-0",
                                 onClick: (event) => event.stopPropagation(),
                                 children: [
@@ -8846,9 +8866,10 @@ function MatrxDataTableCore({
                                         columnId(col)
                                       );
                                     }),
-                                    showActionsCol && /* @__PURE__ */ jsx35("td", { className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ jsxs26(
+                                    showActionsCol && /* @__PURE__ */ jsx35("td", { "data-matrx-table-row-action-cell": true, className: "px-2 py-1.5 text-right align-middle lg:py-0.5", children: /* @__PURE__ */ jsxs26(
                                       "div",
                                       {
+                                        "data-matrx-table-row-actions": true,
                                         className: "inline-flex items-center justify-end gap-0",
                                         onClick: (e) => e.stopPropagation(),
                                         children: [