@ai-matrx/design-system 0.61.15 → 0.61.16

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.61.16 — a pill panned past a chart's viewport is not an overflowing pill
+
+- Pill guard: when a transformed layer sits between a pill and its nearest clipping ancestor (a
+  pan/zoom world inside a chart or canvas viewport), the pill is flagged against that clip only
+  when it is wider than the clip. 0.61.15 still compared position, so every chip on a card panned
+  out of view logged "overflows its clipping container" (measured on /agents/org-chart: 2460px).
+  Guard case red on 0.61.15.
+
+No consumer action.
+
 ## 0.61.15 — a pill in a panned tile is not an overflowing pill
 
 - Pill guard: the viewport judges only the part of the pill its clipping ancestors leave drawn, and

package/dist/index.cjs

@@ -746,18 +746,20 @@ function overflowPast(el, rect, view) {
   }
   let clip = null;
   let transformed = false;
+  let pannedInsideClip = false;
   const root = el.ownerDocument.documentElement;
   for (let p = el.parentElement; p && p !== root; p = p.parentElement) {
     const pcs = view.getComputedStyle(p);
     if (!clip && pcs.overflowX !== "visible" && pcs.overflowX !== "") clip = p;
     if (pcs.transform && pcs.transform !== "none" || pcs.translate && pcs.translate !== "none" || pcs.scale && pcs.scale !== "none" || pcs.rotate && pcs.rotate !== "none") {
       transformed = true;
+      if (!clip) pannedInsideClip = true;
     }
   }
   if (clip && !pinned && clip !== parent) {
     const cr = clip.getBoundingClientRect();
     if (cr.width > 0) {
-      const by = Math.max(rect.right - cr.right, cr.left - rect.left);
+      const by = pannedInsideClip ? rect.width - cr.width : Math.max(rect.right - cr.right, cr.left - rect.left);
       if (by > 0.5) return { what: "its clipping container", by };
     }
   }