@rogieking/figui3 6.6.3 → 6.6.5

package/fig.js

@@ -164,6 +164,19 @@ function figUniqueId() {
   return Date.now().toString(36) + Math.random().toString(36).substring(2);
 }
 
+/** Zero-size portal for fixed overlays so they never affect body layout metrics. */
+function figGetOverlayRoot() {
+  if (!document.body) return null;
+  const attr = "data-figui-overlay-root";
+  let root = document.body.querySelector(`:scope > [${attr}]`);
+  if (!root) {
+    root = document.createElement("div");
+    root.setAttribute(attr, "");
+    document.body.append(root);
+  }
+  return root;
+}
+
 let _figZCounter = 10000;
 function figGetHighestZIndex() {
   return _figZCounter++;
@@ -859,13 +872,13 @@ class FigTooltip extends HTMLElement {
     // - Without popover support, fall back to today's behavior: nearest open
     //   <dialog> ancestor if present, else document.body.
     if (supportsPopover) {
-      document.body.append(this.popup);
+      (figGetOverlayRoot() ?? document.body).append(this.popup);
     } else {
       const parentDialog = this.closest("dialog");
       if (parentDialog && parentDialog.open) {
         parentDialog.append(this.popup);
       } else {
-        document.body.append(this.popup);
+        (figGetOverlayRoot() ?? document.body).append(this.popup);
       }
     }
 
@@ -1142,13 +1155,13 @@ class FigTooltip extends HTMLElement {
       popup.append(content);
 
       if (supportsPopover) {
-        document.body.append(popup);
+        (figGetOverlayRoot() ?? document.body).append(popup);
       } else {
         const parentDialog = anchor.closest?.("dialog");
         if (parentDialog && parentDialog.open) {
           parentDialog.append(popup);
         } else {
-          document.body.append(popup);
+          (figGetOverlayRoot() ?? document.body).append(popup);
         }
       }
 
@@ -2884,10 +2897,150 @@ class FigPopup extends HTMLDialogElement {
     return "top";
   }
 
-  updatePopoverBeak(anchorRect, popupRect, left, top, placementSide) {
+  lengthToPx(value, fallback = 0) {
+    const styles = getComputedStyle(this);
+    const raw = String(value || "").trim();
+    const n = parseFloat(raw);
+    if (!Number.isFinite(n)) return fallback;
+    if (raw.endsWith("rem")) {
+      return n * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    if (raw.endsWith("em")) {
+      return n * parseFloat(styles.fontSize);
+    }
+    return n;
+  }
+
+  radiusForSide(side) {
+    const styles = getComputedStyle(this);
+    const toPx = (value) => this.lengthToPx(value, 0);
+    if (side === "top") {
+      return Math.max(
+        toPx(styles.borderTopLeftRadius),
+        toPx(styles.borderTopRightRadius),
+      );
+    }
+    if (side === "bottom") {
+      return Math.max(
+        toPx(styles.borderBottomLeftRadius),
+        toPx(styles.borderBottomRightRadius),
+      );
+    }
+    if (side === "left") {
+      return Math.max(
+        toPx(styles.borderTopLeftRadius),
+        toPx(styles.borderBottomLeftRadius),
+      );
+    }
+    if (side === "right") {
+      return Math.max(
+        toPx(styles.borderTopRightRadius),
+        toPx(styles.borderBottomRightRadius),
+      );
+    }
+    return 0;
+  }
+
+  getBeakEdgeInset(beakSide) {
+    const beakWidth = this.lengthToPx(
+      getComputedStyle(this).getPropertyValue("--fig-popup-beak-width"),
+      16,
+    );
+    return Math.max(10, this.radiusForSide(beakSide) + beakWidth / 2);
+  }
+
+  tracksAnchorBeak() {
     const variant = this.getAttribute("variant");
-    const beakVariants = variant === "popover" || variant === "tooltip";
-    if (!beakVariants || !anchorRect) {
+    return variant === "popover" || variant === "tooltip";
+  }
+
+  getViewportBounds(m) {
+    const vv = window.visualViewport;
+    const width = vv?.width ?? window.innerWidth;
+    const height = vv?.height ?? window.innerHeight;
+    const offsetLeft = vv?.offsetLeft ?? 0;
+    const offsetTop = vv?.offsetTop ?? 0;
+
+    return {
+      minLeft: offsetLeft + m.left,
+      minTop: offsetTop + m.top,
+      maxRight: offsetLeft + width - m.right,
+      maxBottom: offsetTop + height - m.bottom,
+    };
+  }
+
+  clampToViewport(coords, popupRect, m) {
+    const bounds = this.getViewportBounds(m);
+    const maxLeft = bounds.maxRight - popupRect.width;
+    const maxTop = bounds.maxBottom - popupRect.height;
+
+    return {
+      left: Math.min(maxLeft, Math.max(bounds.minLeft, coords.left)),
+      top: Math.min(maxTop, Math.max(bounds.minTop, coords.top)),
+    };
+  }
+
+  resolveCoordsAtViewport(anchorRect, popupRect, coords, placementSide, m) {
+    let { left, top } = this.clampToViewport(coords, popupRect, m);
+    if (!anchorRect || !this.tracksAnchorBeak()) {
+      return { left, top };
+    }
+
+    const beakSide = this.oppositeSide(placementSide);
+    const bounds = this.getViewportBounds(m);
+    const maxLeft = bounds.maxRight - popupRect.width;
+    const minLeft = bounds.minLeft;
+    const maxTop = bounds.maxBottom - popupRect.height;
+    const minTop = bounds.minTop;
+
+    if (beakSide === "top" || beakSide === "bottom") {
+      const inset = this.getBeakEdgeInset(beakSide);
+      const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+      const beakOffset = anchorCenterX - left;
+      if (beakOffset < inset) {
+        left = anchorCenterX - inset;
+      } else if (beakOffset > popupRect.width - inset) {
+        left = anchorCenterX - (popupRect.width - inset);
+      }
+      left = Math.min(maxLeft, Math.max(minLeft, left));
+    } else if (beakSide === "left" || beakSide === "right") {
+      const inset = this.getBeakEdgeInset(beakSide);
+      const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+      const beakOffset = anchorCenterY - top;
+      if (beakOffset < inset) {
+        top = anchorCenterY - inset;
+      } else if (beakOffset > popupRect.height - inset) {
+        top = anchorCenterY - (popupRect.height - inset);
+      }
+      top = Math.min(maxTop, Math.max(minTop, top));
+    }
+
+    return { left, top };
+  }
+
+  canPointAtAnchor(anchorRect, popupRect, left, top, placementSide) {
+    if (!anchorRect || !this.tracksAnchorBeak()) return true;
+
+    const beakSide = this.oppositeSide(placementSide);
+    const inset = this.getBeakEdgeInset(beakSide);
+
+    if (beakSide === "top" || beakSide === "bottom") {
+      const beakOffset = anchorRect.left + anchorRect.width / 2 - left;
+      return (
+        beakOffset >= inset - 0.5 &&
+        beakOffset <= popupRect.width - inset + 0.5
+      );
+    }
+
+    const beakOffset = anchorRect.top + anchorRect.height / 2 - top;
+    return (
+      beakOffset >= inset - 0.5 &&
+      beakOffset <= popupRect.height - inset + 0.5
+    );
+  }
+
+  updatePopoverBeak(anchorRect, popupRect, left, top, placementSide) {
+    if (!this.tracksAnchorBeak() || !anchorRect) {
       this.style.removeProperty("--fig-popup-beak-offset");
       this.removeAttribute("data-beak-side");
       return;
@@ -2903,54 +3056,9 @@ class FigPopup extends HTMLDialogElement {
       measuredRect.width > 0 && measuredRect.height > 0
         ? measuredRect
         : popupRect;
-    // Always use the rendered popup rect so beak alignment matches real final placement.
     const resolvedLeft = rect.left;
     const resolvedTop = rect.top;
-    const styles = getComputedStyle(this);
-    const toPx = (value, fallback = 0) => {
-      const raw = String(value || "").trim();
-      const n = parseFloat(raw);
-      if (!Number.isFinite(n)) return fallback;
-      if (raw.endsWith("rem")) {
-        return n * parseFloat(getComputedStyle(document.documentElement).fontSize);
-      }
-      if (raw.endsWith("em")) {
-        return n * parseFloat(styles.fontSize);
-      }
-      return n;
-    };
-    const radiusForSide = (side) => {
-      if (side === "top") {
-        return Math.max(
-          toPx(styles.borderTopLeftRadius),
-          toPx(styles.borderTopRightRadius),
-        );
-      }
-      if (side === "bottom") {
-        return Math.max(
-          toPx(styles.borderBottomLeftRadius),
-          toPx(styles.borderBottomRightRadius),
-        );
-      }
-      if (side === "left") {
-        return Math.max(
-          toPx(styles.borderTopLeftRadius),
-          toPx(styles.borderBottomLeftRadius),
-        );
-      }
-      if (side === "right") {
-        return Math.max(
-          toPx(styles.borderTopRightRadius),
-          toPx(styles.borderBottomRightRadius),
-        );
-      }
-      return 0;
-    };
-    const beakWidth = toPx(
-      styles.getPropertyValue("--fig-popup-beak-width"),
-      16,
-    );
-    const edgeInset = Math.max(10, radiusForSide(beakSide) + beakWidth / 2);
+    const edgeInset = this.getBeakEdgeInset(beakSide);
 
     let beakOffset;
     if (beakSide === "top" || beakSide === "bottom") {
@@ -2969,15 +3077,14 @@ class FigPopup extends HTMLDialogElement {
   }
 
   overflowScore(coords, popupRect, m) {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
+    const bounds = this.getViewportBounds(m);
     const right = coords.left + popupRect.width;
     const bottom = coords.top + popupRect.height;
 
-    const overflowLeft = Math.max(0, m.left - coords.left);
-    const overflowTop = Math.max(0, m.top - coords.top);
-    const overflowRight = Math.max(0, right - (vw - m.right));
-    const overflowBottom = Math.max(0, bottom - (vh - m.bottom));
+    const overflowLeft = Math.max(0, bounds.minLeft - coords.left);
+    const overflowTop = Math.max(0, bounds.minTop - coords.top);
+    const overflowRight = Math.max(0, right - bounds.maxRight);
+    const overflowBottom = Math.max(0, bottom - bounds.maxBottom);
 
     return overflowLeft + overflowTop + overflowRight + overflowBottom;
   }
@@ -2986,26 +3093,93 @@ class FigPopup extends HTMLDialogElement {
     return this.overflowScore(coords, popupRect, m) === 0;
   }
 
-  clamp(coords, popupRect, m) {
-    const minLeft = m.left;
-    const minTop = m.top;
-    const maxLeft = Math.max(
-      m.left,
-      window.innerWidth - popupRect.width - m.right,
+  clamp(coords, popupRect, m, anchorRect = null, placementSide = "top") {
+    if (anchorRect) {
+      return this.resolveCoordsAtViewport(
+        anchorRect,
+        popupRect,
+        coords,
+        placementSide,
+        m,
+      );
+    }
+    return this.clampToViewport(coords, popupRect, m);
+  }
+
+  primaryAxisOverflowPenalty(coords, popupRect, m, placementSide) {
+    const bounds = this.getViewportBounds(m);
+    let overflow = 0;
+
+    if (placementSide === "top") {
+      overflow = Math.max(0, bounds.minTop - coords.top);
+    } else if (placementSide === "bottom") {
+      overflow = Math.max(0, coords.top + popupRect.height - bounds.maxBottom);
+    } else if (placementSide === "left") {
+      overflow = Math.max(0, bounds.minLeft - coords.left);
+    } else if (placementSide === "right") {
+      overflow = Math.max(0, coords.left + popupRect.width - bounds.maxRight);
+    }
+
+    return overflow > 0 ? 1000 + overflow : 0;
+  }
+
+  placementScore(anchorRect, popupRect, coords, placementSide, m) {
+    const resolved = this.resolveCoordsAtViewport(
+      anchorRect,
+      popupRect,
+      coords,
+      placementSide,
+      m,
     );
-    const maxTop = Math.max(
-      m.top,
-      window.innerHeight - popupRect.height - m.bottom,
+    let score = this.overflowScore(resolved, popupRect, m);
+    score += this.primaryAxisOverflowPenalty(
+      coords,
+      popupRect,
+      m,
+      placementSide,
     );
+    if (
+      anchorRect &&
+      !this.canPointAtAnchor(
+        anchorRect,
+        popupRect,
+        resolved.left,
+        resolved.top,
+        placementSide,
+      )
+    ) {
+      score += 10000;
+    }
+    return { score, resolved };
+  }
 
-    return {
-      left: Math.min(maxLeft, Math.max(minLeft, coords.left)),
-      top: Math.min(maxTop, Math.max(minTop, coords.top)),
-    };
+  applyPopupPosition(
+    anchorRect,
+    popupRect,
+    coords,
+    placementSide,
+    m,
+  ) {
+    const resolved = this.resolveCoordsAtViewport(
+      anchorRect,
+      popupRect,
+      coords,
+      placementSide,
+      m,
+    );
+    this.style.left = `${resolved.left}px`;
+    this.style.top = `${resolved.top}px`;
+    this.updatePopoverBeak(
+      anchorRect,
+      popupRect,
+      resolved.left,
+      resolved.top,
+      placementSide,
+    );
   }
 
   positionPopup() {
-    if (!this.open || !this.matches?.(":open")) return;
+    if (!this.open) return;
 
     const popupRect = this.getBoundingClientRect();
     const offset = this.parseOffset();
@@ -3015,14 +3189,16 @@ class FigPopup extends HTMLDialogElement {
 
     if (!anchor) {
       this.updatePopoverBeak(null, popupRect, 0, 0, "top");
+      const bounds = this.getViewportBounds(m);
       const centered = {
         left:
-          m.left + (window.innerWidth - m.right - m.left - popupRect.width) / 2,
+          bounds.minLeft +
+          (bounds.maxRight - bounds.minLeft - popupRect.width) / 2,
         top:
-          m.top +
-          (window.innerHeight - m.bottom - m.top - popupRect.height) / 2,
+          bounds.minTop +
+          (bounds.maxBottom - bounds.minTop - popupRect.height) / 2,
       };
-      const clamped = this.clamp(centered, popupRect, m);
+      const clamped = this.clampToViewport(centered, popupRect, m);
       this.style.left = `${clamped.left}px`;
       this.style.top = `${clamped.top}px`;
       return;
@@ -3041,69 +3217,63 @@ class FigPopup extends HTMLDialogElement {
     for (const { v, h, s } of candidates) {
       const coords = this.computeCoords(anchorRect, popupRect, v, h, offset, s);
       const placementSide = this.getPlacementSide(v, h, s);
+      const { score, resolved } = this.placementScore(
+        anchorRect,
+        popupRect,
+        coords,
+        placementSide,
+        m,
+      );
 
       if (s) {
-        const clamped = this.clamp(coords, popupRect, m);
+        const bounds = this.getViewportBounds(m);
         const primaryFits =
           s === "left" || s === "right"
-            ? coords.left >= m.left &&
-              coords.left + popupRect.width <= window.innerWidth - m.right
-            : coords.top >= m.top &&
-              coords.top + popupRect.height <= window.innerHeight - m.bottom;
-        if (primaryFits) {
-          this.style.left = `${clamped.left}px`;
-          this.style.top = `${clamped.top}px`;
-          this.updatePopoverBeak(
+            ? coords.left >= bounds.minLeft &&
+              coords.left + popupRect.width <= bounds.maxRight
+            : coords.top >= bounds.minTop &&
+              coords.top + popupRect.height <= bounds.maxBottom;
+        if (primaryFits && score < 10000) {
+          this.applyPopupPosition(
             anchorRect,
             popupRect,
-            clamped.left,
-            clamped.top,
+            coords,
             placementSide,
+            m,
           );
           return;
         }
-        const score = this.overflowScore(coords, popupRect, m);
-        if (score < bestScore) {
-          bestScore = score;
-          best = clamped;
-          bestSide = placementSide;
-        }
-      } else {
-        if (this.fits(coords, popupRect, m)) {
-          this.style.left = `${coords.left}px`;
-          this.style.top = `${coords.top}px`;
-          this.updatePopoverBeak(
-            anchorRect,
-            popupRect,
-            coords.left,
-            coords.top,
-            placementSide,
-          );
-          return;
-        }
-        const score = this.overflowScore(coords, popupRect, m);
-        if (score < bestScore) {
-          bestScore = score;
-          best = coords;
-          bestSide = placementSide;
-        }
+      } else if (score === 0) {
+        this.applyPopupPosition(
+          anchorRect,
+          popupRect,
+          coords,
+          placementSide,
+          m,
+        );
+        return;
+      }
+
+      if (score < bestScore) {
+        bestScore = score;
+        best = resolved;
+        bestSide = placementSide;
       }
     }
 
-    const clamped = this.clamp(best || { left: 0, top: 0 }, popupRect, m);
-    this.style.left = `${clamped.left}px`;
-    this.style.top = `${clamped.top}px`;
-    this.updatePopoverBeak(
+    this.applyPopupPosition(
       anchorRect,
       popupRect,
-      clamped.left,
-      clamped.top,
+      best || { left: 0, top: 0 },
       bestSide,
+      m,
     );
   }
 
   queueReposition() {
-    if (!this.open || !this.shouldAutoReposition()) return;
+    if (!this.open || !this.isPopupDisplayed() || !this.shouldAutoReposition()) {
+      return;
+    }
     if (this._rafId !== null) return;
 
     this._rafId = requestAnimationFrame(() => {
@@ -3116,6 +3286,14 @@ class FigPopup extends HTMLDialogElement {
     if (!(this.drag && this._wasDragged)) return true;
     return !this.resolveAnchor();
   }
+
+  isPopupDisplayed() {
+    return Boolean(
+      this._isPopupActive ||
+        this.matches?.(":open") ||
+        this.matches?.(":popover-open"),
+    );
+  }
 }
 figDefineCustomizedBuiltIn("fig-popup", FigPopup, { extends: "dialog" });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.6.3",
+  "version": "6.6.5",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",