@ai-matrx/design-system 0.18.19 → 0.18.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.18.21
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.18.20..npm/design-system/v0.18.21 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## 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

@@ -924,7 +924,7 @@ function TableTitleRow({
     {
       "data-matrx-table-toolbar": true,
       className: cn(
-        "flex min-w-0 shrink-0 flex-wrap items-center gap-2 border-t border-border pt-2",
+        "flex min-w-0 shrink-0 flex-wrap items-center gap-2",
         className
       ),
       children: [
@@ -951,7 +951,7 @@ function TableTitleRow({
           "div",
           {
             "data-matrx-table-actions": true,
-            className: "ml-auto flex min-w-0 flex-wrap items-center gap-2",
+            className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
             children: actions
           }
         ) : null
@@ -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"
@@ -8162,7 +8181,7 @@ function MatrxDataTableCore({
               // where every row read as an empty text input rather than a selection
               // control. The control keeps its own size and gains the 44px tap area
               // as an invisible ::before below.
-              "flex h-full min-h-0 flex-col gap-2 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-h-11 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-w-11 max-lg:[&_input]:min-h-11 max-lg:[&_table_a]:inline-flex max-lg:[&_table_a]:min-h-11 max-lg:[&_table_a]:items-center",
+              "flex h-full min-h-0 flex-col p-2 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-h-11 max-lg:[&_button:not([role=checkbox]):not([role=radio]):not([role=switch])]:min-w-11 max-lg:[&_input]:min-h-11 max-lg:[&_table_a]:inline-flex max-lg:[&_table_a]:min-h-11 max-lg:[&_table_a]:items-center",
               className
             ),
             children: [
@@ -8288,7 +8307,7 @@ function MatrxDataTableCore({
                       "div",
                       {
                         "data-matrx-table-actions": true,
-                        className: "ml-auto flex min-w-0 flex-wrap items-center gap-2",
+                        className: "ml-auto flex min-w-0 flex-wrap items-center gap-0",
                         children: [
                           sourceTotal !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                             "span",
@@ -8540,7 +8559,8 @@ function MatrxDataTableCore({
                             actions: showRowCopy || rowActions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                               "div",
                               {
-                                className: "inline-flex items-center gap-0",
+                                "data-matrx-table-row-actions": true,
+                                className: "inline-flex items-center justify-end gap-0",
                                 onClick: (event) => event.stopPropagation(),
                                 children: [
                                   showRowCopy && effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -8715,7 +8735,7 @@ function MatrxDataTableCore({
                                 id
                               );
                             }),
-                            showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { className: "h-9 w-28 px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
+                            showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { className: "h-9 w-px text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Actions" })
                           ] }) }),
                           /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tbody", { children: [
                             isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tr", { className: "border-b border-border/60", children: [
@@ -8732,7 +8752,7 @@ function MatrxDataTableCore({
                                 },
                                 columnId(col)
                               )),
-                              showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
+                              showActionsCol && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "text-right align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { className: "ml-auto h-5 w-10" }) })
                             ] }, `sk-${i}`)) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               "td",
                               {
@@ -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: "text-right align-middle", 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: [
@@ -8947,7 +8968,7 @@ function MatrxDataTableCore({
                               },
                               columnId(column)
                             )),
-                            showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-2" }) : null
+                            showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", {}) : null
                           ] }, `footer-${index}`)) }) : null
                         ] })
                       ]
@@ -8990,7 +9011,7 @@ function MatrxDataTableCore({
                   "div",
                   {
                     "data-matrx-table-footer": true,
-                    className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border px-3 py-2",
+                    className: "flex min-h-16 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border",
                     "aria-busy": isLoading || isFetching,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(