@ai-matrx/design-system 0.18.16 → 0.18.19

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 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
+packed-artifact verifier to recognize that one intentional fixed-blue rule.
+The global hardcoded-colour guard remains active for every other rule.
+
+## 0.18.17
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.18.16..npm/design-system/v0.18.17 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.18.16 — 2026-09-13
 
 Sortable table headers now toggle directly between ascending and descending.

package/dist/data-table/index.cjs

@@ -7265,6 +7265,25 @@ function MatrxDataTableCore({
     ...appendQuery?.scroll
   });
   const rootRef = (0, import_react13.useRef)(null);
+  const setDiagnosticBoundaryRef = (0, import_react13.useCallback)((node) => {
+    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");
+  }, []);
   useClippedContentGuard(rootRef, {
     label: typeof copy === "object" && copy.listLabel ? `Table: ${copy.listLabel}` : "MatrxDataTable"
   });
@@ -8132,7 +8151,7 @@ function MatrxDataTableCore({
         /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
-            ref: rootRef,
+            ref: setDiagnosticBoundaryRef,
             "data-matrx-table": true,
             "data-url-state-table": urlState?.id,
             className: cn(
@@ -8147,6 +8166,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,