@ai-matrx/design-system 0.18.18 → 0.18.20

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+`git diff npm/design-system/v0.18.18..npm/design-system/v0.18.19 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.18.18
 
 Ships the canonical MatrxDataTable diagnostic boundary after correcting the

package/dist/data-table/index.cjs

@@ -7265,11 +7265,43 @@ 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");
     node.style.setProperty("outline-offset", "-2px", "important");
+    node.style.setProperty("isolation", "isolate", "important");
+    const position = window.getComputedStyle(node).position;
+    if (position === "" || position === "static") {
+      node.style.setProperty("position", "relative", "important");
+    }
+    const boundary = node.querySelector(":scope > [data-matrx-table-boundary]");
+    if (!boundary) return;
+    boundary.style.setProperty("position", "absolute", "important");
+    boundary.style.setProperty("inset", "0", "important");
+    boundary.style.setProperty("pointer-events", "none", "important");
+    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"
@@ -8153,6 +8185,7 @@ function MatrxDataTableCore({
               className
             ),
             children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": "true", "data-matrx-table-boundary": true }),
               notice,
               savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: savedViewError }) : null,
               toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { role: "alert", className: "shrink-0 text-xs text-destructive", children: toolbarActionError }) : null,
@@ -8526,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: [
@@ -8826,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: [