@ai-matrx/design-system 0.61.14 → 0.61.16

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # 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
+  never a pill inside a transformed (translate/scale/rotate) ancestor or one wholly off screen.
+  A pill wider than its nearest clipping ancestor (overflow hidden/auto/scroll/clip) is now
+  reported as overflowing its clipping container. Measured: /board tiles panned off the canvas
+  logged "overflows the viewport". Guard cases added (off-screen and half-off-screen pill in a
+  translated tile: none; pill wider than its clipping tile: flagged).
+
+No consumer action.
+
 ## 0.61.14 — a page that scrolls down never hides an overflowing pill
 
 - Pill guard: only a sideways TRACK (an ancestor that scrolls horizontally and not vertically)

package/dist/index.cjs

@@ -744,9 +744,50 @@ function overflowPast(el, rect, view) {
       if (by > 0.5) return { what: "its container", by };
     }
   }
-  const vw = el.ownerDocument.documentElement.clientWidth || view.innerWidth;
+  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 = 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 };
+    }
+  }
+  let left = rect.left;
+  let right = rect.right;
+  let top = rect.top;
+  let bottom = rect.bottom;
+  for (let p = el.parentElement; p && p !== root; p = p.parentElement) {
+    const pcs = view.getComputedStyle(p);
+    if (pcs.overflowX === "visible" && pcs.overflowY === "visible") continue;
+    const cr = p.getBoundingClientRect();
+    if (cr.width === 0 && cr.height === 0) continue;
+    if (pcs.overflowX !== "visible") {
+      left = Math.max(left, cr.left);
+      right = Math.min(right, cr.right);
+    }
+    if (pcs.overflowY !== "visible") {
+      top = Math.max(top, cr.top);
+      bottom = Math.min(bottom, cr.bottom);
+    }
+  }
+  const vw = root.clientWidth || view.innerWidth;
+  const vh = root.clientHeight || view.innerHeight;
+  if (transformed) return null;
+  if (vw > 0 && (right <= left || right <= 0 || left >= vw)) return null;
+  if (vh > 0 && (bottom <= top || bottom <= 0 || top >= vh)) return null;
   if (vw > 0) {
-    const by = Math.max(rect.right - vw, -rect.left);
+    const by = Math.max(right - vw, -left);
     if (by > 0.5) return { what: "the viewport", by };
   }
   return null;