@ai-matrx/design-system 0.61.9 → 0.61.10

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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
 

package/dist/index.cjs

@@ -664,6 +664,7 @@ function Badge({ className, variant, children, title, ...props }) {
 
 // src/pill-guard.ts
 var PILL_MAX_WIDTH_PX = 320;
+var PILL_STRETCH_TOLERANCE_PX = 8;
 var SELECTOR = [
   '[data-slot="badge"]',
   "[data-matrx-pill]",
@@ -719,8 +720,39 @@ function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
   if (lines > 1) {
     return `pill wraps to ${lines} lines holding "${describe(el)}" \u2014 a pill is one line: clamp it (Badge, or truncate + max-w + title) or render a list row.`;
   }
+  const slack = stretchSlack(el, own, cs, rect.width, view);
+  if (slack !== null && slack > PILL_STRETCH_TOLERANCE_PX) {
+    return `pill is stretched: ${Math.round(slack)}px of empty capsule beside "${describe(el)}" \u2014 a pill hugs its label; stop the parent stretching it (a grid cell: justify-self-start; drop w-full / flex-1), or render a full-width tappable item as a row, never a pill.`;
+  }
   return null;
 }
+function stretchSlack(el, own, cs, width, view) {
+  const range = el.ownerDocument.createRange?.();
+  if (!range || typeof range.getClientRects !== "function") return null;
+  let left = Infinity;
+  let right = -Infinity;
+  const take = (r) => {
+    if (r.width <= 0 || r.height <= 0) return;
+    left = Math.min(left, r.left);
+    right = Math.max(right, r.right);
+  };
+  for (const node of own) {
+    if (!(node.textContent ?? "").trim()) continue;
+    range.selectNodeContents(node);
+    Array.from(range.getClientRects()).forEach(take);
+  }
+  range.detach?.();
+  if (!Number.isFinite(left)) return null;
+  el.querySelectorAll("svg, img").forEach((g) => {
+    for (let p = g; p && p !== el; p = p.parentElement) {
+      const pcs = view.getComputedStyle(p);
+      if (pcs.position === "absolute" || pcs.position === "fixed" || pcs.display === "none") return;
+    }
+    take(g.getBoundingClientRect());
+  });
+  const inner = width - px(cs.paddingLeft) - px(cs.paddingRight) - px(cs.borderLeftWidth) - px(cs.borderRightWidth);
+  return inner - (right - left);
+}
 function lineCount(el, own, cs, height) {
   const range = el.ownerDocument.createRange?.();
   if (range && typeof range.getClientRects === "function") {