@ai-matrx/design-system 0.61.8 → 0.61.10

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.61.10 — the pill guard flags a stretched pill
+
+- Pill guard: a capsule whose content box is more than 8px wider than its own ink (text runs plus
+  in-flow glyphs) is outlined as STRETCHED — a pill hugs its label; a full-width tappable item is a
+  row, never a pill. Measured: /education/overview's metric pills filled their grid columns at 375px
+  (label left, up to 103px of empty capsule right). Only measured where the engine reports line
+  boxes; `data-matrx-pill="off"` still opts a deliberately wide capsule out. Guard case red on 0.61.9.
+
+No consumer action.
+
+## 0.61.9
+### a scope lane is never clipped
+
+- `TableScopeBar` measures its lane tabs against their slot: when they do not fit — at any width,
+  not only below `sm` — the slot holds the select of every lane (with counts) and the tab row stays
+  mounted, invisible and inert, only to be measured. It no longer scrolls sideways and cuts a lane
+  mid-word ("My Orgs 4" lost its digit at 800px).
+
+No consumer action.
+
 ## 0.61.8 — the pill guard leaves capsule tracks to their tabs
 
 - Pill guard: text inside an interactive child (link, button, tab, radio, menu item, option) is not

package/dist/data-table/copy-helpers.d.cts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-DL5BU8Mf.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-DDgNWqzw.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/copy-helpers.d.ts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-CCWzLsOC.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-DnMvx2yK.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-DL5BU8Mf.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-DDgNWqzw.cjs';
 import 'react';
 import '../content-transfer.cjs';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-CCWzLsOC.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../layered-filters-DnMvx2yK.js';
 import 'react';
 import '../content-transfer.js';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/host.d.cts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
-import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-DL5BU8Mf.cjs';
+import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-DDgNWqzw.cjs';
 import { MatrxTableMenuItem, MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.cjs';
 export { MatrxTableMenuSection } from './menu-targets.cjs';
 import '../content-transfer.cjs';

package/dist/data-table/host.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
-import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-CCWzLsOC.js';
+import { M as MatrxColumnDef, b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../layered-filters-DnMvx2yK.js';
 import { MatrxTableMenuItem, MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.js';
 export { MatrxTableMenuSection } from './menu-targets.js';
 import '../content-transfer.js';

package/dist/data-table/index.cjs

@@ -34390,45 +34390,76 @@ function ScopeFilter({ filter, id }) {
     )
   ] }) });
 }
+function useLanesFit(lanesKey) {
+  const boxRef = (0, import_react.useRef)(null);
+  const rowRef = (0, import_react.useRef)(null);
+  const [fits, setFits] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    const box = boxRef.current;
+    const row = rowRef.current;
+    if (!box || !row || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const next = row.scrollWidth <= box.clientWidth + 1;
+      setFits((prev) => prev === next ? prev : next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [lanesKey]);
+  return { boxRef, rowRef, fits };
+}
 function TableScopeBar({ lanes, value, onChange, dimension, organization }) {
   const id = (0, import_react.useId)();
+  const { boxRef, rowRef, fits } = useLanesFit(lanes.map((lane) => `${lane.value}:${lane.count ?? ""}`).join("|"));
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-matrx-table-scope-bar": true, className: "flex min-w-0 shrink-0 flex-col gap-1 sm:flex-row sm:items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0 sm:flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: boxRef, "data-matrx-table-scope-lanes": fits ? "tabs" : "select", className: "relative min-w-0 sm:flex-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "select",
         {
           "aria-label": "Record scope",
           value,
           onChange: (event) => onChange(event.target.value),
-          className: "h-[var(--matrx-table-control-size,2rem)] w-full rounded-md border border-input bg-background px-2 text-sm sm:hidden",
+          className: `h-[var(--matrx-table-control-size,2rem)] w-full rounded-md border border-input bg-background px-2 text-sm sm:w-auto sm:max-w-full ${fits ? "sm:hidden" : ""}`,
           children: lanes.map((lane) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("option", { value: lane.value, disabled: lane.disabled, children: [
             lane.label,
             lane.count == null ? "" : ` (${lane.count.toLocaleString()})`
           ] }, lane.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "tablist", "aria-label": "Record scope", className: "hidden min-w-0 gap-1 overflow-x-auto sm:flex", children: lanes.map((lane) => {
-        const Icon3 = lane.icon ?? SCOPE_ICONS[lane.value] ?? Layers;
-        const active = value === lane.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": active,
-            "aria-label": lane.count == null ? lane.label : `${lane.label}, ${lane.count.toLocaleString()} records`,
-            disabled: lane.disabled,
-            onClick: () => onChange(lane.value),
-            className: `inline-flex h-[var(--matrx-table-control-size,2rem)] shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-sm font-medium transition-colors disabled:opacity-50 ${active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"}`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon3, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: lane.label }),
-              lane.count == null ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `rounded px-1 text-xs font-semibold tabular-nums ${active ? "bg-primary-foreground/20" : "bg-muted-foreground/15"}`, children: lane.count.toLocaleString() })
-            ]
-          },
-          lane.value
-        );
-      }) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          ref: rowRef,
+          role: "tablist",
+          "aria-label": "Record scope",
+          ...fits ? {} : { "aria-hidden": true, inert: true },
+          className: `hidden min-w-0 gap-1 overflow-hidden sm:flex ${fits ? "" : "pointer-events-none invisible absolute left-0 top-0 max-w-none"}`,
+          children: lanes.map((lane) => {
+            const Icon3 = lane.icon ?? SCOPE_ICONS[lane.value] ?? Layers;
+            const active = value === lane.value;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": active,
+                "aria-label": lane.count == null ? lane.label : `${lane.label}, ${lane.count.toLocaleString()} records`,
+                disabled: lane.disabled,
+                onClick: () => onChange(lane.value),
+                className: `inline-flex h-[var(--matrx-table-control-size,2rem)] shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-sm font-medium transition-colors disabled:opacity-50 ${active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon3, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: lane.label }),
+                  lane.count == null ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `rounded px-1 text-xs font-semibold tabular-nums ${active ? "bg-primary-foreground/20" : "bg-muted-foreground/15"}`, children: lane.count.toLocaleString() })
+                ]
+              },
+              lane.value
+            );
+          })
+        }
+      )
     ] }),
     dimension || organization ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "grid min-w-0 shrink-0 grid-cols-2 gap-1 sm:flex sm:max-w-[50%]", children: [
       dimension ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScopeFilter, { filter: dimension, id: `${id}-dimension` }) : null,