@base44-preview/vite-plugin 1.0.18-pr.80.1ee8db5 → 1.0.18-pr.80.79b32f2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "1.0.18-pr.80.1ee8db5",
+  "version": "1.0.18-pr.80.79b32f2",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/auto-popup-suppressor.ts

@@ -6,9 +6,9 @@
 // Two-stage heuristic:
 //
 //   1. BACKDROP MATCH — element must be `position: fixed`, cover ≥90% of the
-//      viewport on both axes, have z-index ≥40, and show backdrop-like styles
-//      (translucent background OR backdrop-filter). This is the modal-overlay
-//      fingerprint.
+//      viewport on both axes, have a popup-level z-index, and show backdrop-
+//      like styles (translucent background OR backdrop-filter). This is the
+//      modal-overlay fingerprint.
 //
 //   2. PANEL SWEEP — once we've hidden any backdrop, sweep the whole document
 //      for fixed/high-z elements whose bbox falls in a "modal-shaped" band
@@ -33,13 +33,17 @@ const REFERENCE_VH_BASE_VAR = "--base44-reference-vh-base";
 const FULL_VIEWPORT_RATIO = 0.9;
 const MODAL_PANEL_MIN_RATIO = 0.15;
 const MODAL_PANEL_MAX_RATIO = 0.95;
-const MIN_Z_INDEX = 40;
+const POPUP_Z_INDEX_THRESHOLD = 40;
+
+type Viewport = { vw: number; vh: number };
 
 export type AutoPopupSuppressorController = {
   suppress: () => void;
   teardown: () => void;
 };
 
+// ── Public API ──────────────────────────────────────────────────────────────
+
 export function createAutoPopupSuppressorController(): AutoPopupSuppressorController {
   let observer: MutationObserver | null = null;
   let domReadyHandler: (() => void) | null = null;
@@ -49,70 +53,76 @@ export function createAutoPopupSuppressorController(): AutoPopupSuppressorContro
   // mounts after its Overlay's batch wouldn't be matched in-flight.
   let backdropEverDetected = false;
 
+  // Single decision per element. One getComputedStyle call — backdrop and
+  // panel checks share the position/z-index preconditions. Without sharing,
+  // every non-matching node in a React commit's added subtree would pay for
+  // two style recalcs, which is the MutationObserver hot path.
+  const classify = (el: Element, vp: Viewport): void => {
+    if (!(el instanceof HTMLElement)) return;
+    if (el.hasAttribute(SUPPRESSED_ATTR)) return;
+    const style = window.getComputedStyle(el);
+    if (style.position !== "fixed") return;
+    if (!hasPopupZIndex(style)) return;
+    if (coversFullViewport(el, vp) && hasBackdropLook(el, style)) {
+      hideBackdrop(el);
+      return;
+    }
+    if (backdropEverDetected && hasModalShapeBbox(el, vp)) {
+      applyHide(el);
+    }
+  };
+
   const hideBackdrop = (el: Element): void => {
     if (el.hasAttribute(SUPPRESSED_ATTR)) return;
     applyHide(el);
     backdropEverDetected = true;
-    sweepDocumentForModalPanels();
-  };
-
-  const scanNode = (root: Element | Document): void => {
-    if (!document.body) return;
-    const { vw, vh } = viewportForGates();
-    const startRoots: Element[] = root === document
-      ? [document.body]
-      : root instanceof Element
-        ? [root]
-        : [];
-    for (const startRoot of startRoots) {
-      checkNode(startRoot, vw, vh);
-      const candidates = startRoot.querySelectorAll<HTMLElement>(
-        `*:not([${SUPPRESSED_ATTR}])`,
-      );
-      for (let i = 0; i < candidates.length; i++) {
-        const el = candidates[i];
-        if (el) checkNode(el, vw, vh);
-      }
-    }
+    sweepDocumentForModalPanels(viewportForGates());
   };
 
-  const checkNode = (el: Element, vw: number, vh: number): void => {
-    if (matchesBackdrop(el, vw, vh)) {
-      hideBackdrop(el);
-    } else if (
-      backdropEverDetected &&
-      el instanceof HTMLElement &&
-      matchesModalPanel(el, vw, vh)
-    ) {
-      applyHide(el);
+  const scanSubtree = (root: Element, vp: Viewport): void => {
+    classify(root, vp);
+    const descendants = root.querySelectorAll<HTMLElement>(
+      `*:not([${SUPPRESSED_ATTR}])`,
+    );
+    for (let i = 0; i < descendants.length; i++) {
+      const el = descendants[i];
+      if (el) classify(el, vp);
     }
   };
 
-  const attach = (): void => {
-    scanNode(document);
+  const attachObserver = (): void => {
     if (observer) return;
+    // viewportForGates is read once per mutation batch, not per added node —
+    // a busy React commit can deliver dozens of added subtrees in one tick.
     observer = new MutationObserver((mutations) => {
+      const vp = viewportForGates();
       for (const m of mutations) {
         if (m.type !== "childList") continue;
         for (let i = 0; i < m.addedNodes.length; i++) {
           const node = m.addedNodes[i];
-          if (node instanceof Element) scanNode(node);
+          if (node instanceof Element) scanSubtree(node, vp);
         }
       }
     });
     observer.observe(document.documentElement, { childList: true, subtree: true });
   };
 
+  const start = (): void => {
+    if (!document.body) return;
+    scanSubtree(document.body, viewportForGates());
+    attachObserver();
+  };
+
   return {
     suppress: (): void => {
       if (active) return;
       active = true;
       if (document.body) {
-        attach();
+        start();
       } else {
         domReadyHandler = (): void => {
           domReadyHandler = null;
-          attach();
+          start();
         };
         document.addEventListener("DOMContentLoaded", domReadyHandler);
       }
@@ -132,56 +142,40 @@ export function createAutoPopupSuppressorController(): AutoPopupSuppressorContro
   };
 }
 
-// ── Heuristic ───────────────────────────────────────────────────────────────
+// ── Document-wide panel sweep ───────────────────────────────────────────────
 
-// Stage 1: identify a modal backdrop.
-//
-// Gate order matters for perf — `getComputedStyle` forces a style recalc, so
-// we run the position check first (drops 99%+ of nodes), then the cheaper
-// bbox check, then style-derived gates. `matchesOverlay` is called for every
-// node in every added subtree, so this is the hot path.
-function matchesBackdrop(el: Element, vw: number, vh: number): boolean {
-  if (!(el instanceof HTMLElement)) return false;
-  if (el.hasAttribute(SUPPRESSED_ATTR)) return false;
-  const style = window.getComputedStyle(el);
-  if (style.position !== "fixed") return false;
-  if (!coversFullViewport(el, vw, vh)) return false;
-  if (!hasHighZIndex(style)) return false;
-  return hasBackdropLook(el, style);
-}
-
-// Stage 2: identify the content panel paired with a backdrop. Runs both as a
-// document-wide sweep after a backdrop hide AND as an inline check on each
-// newly-added node once `backdropEverDetected` is set.
-function matchesModalPanel(el: HTMLElement, vw: number, vh: number): boolean {
-  if (el.hasAttribute(SUPPRESSED_ATTR)) return false;
-  const style = window.getComputedStyle(el);
-  if (style.position !== "fixed") return false;
-  if (!hasHighZIndex(style)) return false;
-  return hasModalShapeBbox(el, vw, vh);
-}
-
-function sweepDocumentForModalPanels(): void {
+// Triggered once per backdrop hide. Walks the whole document for unhidden
+// fixed/high-z elements whose bbox falls inside the modal-shape band — picks
+// up content panels regardless of how they're nested or which portal they
+// went through.
+function sweepDocumentForModalPanels(vp: Viewport): void {
   if (!document.body) return;
-  const { vw, vh } = viewportForGates();
-  if (vw <= 0 || vh <= 0) return;
+  if (vp.vw <= 0 || vp.vh <= 0) return;
   const candidates = document.body.querySelectorAll<HTMLElement>(
     `*:not([${SUPPRESSED_ATTR}])`,
   );
   for (let i = 0; i < candidates.length; i++) {
     const el = candidates[i];
-    if (el && matchesModalPanel(el, vw, vh)) applyHide(el);
+    if (el && isModalPanel(el, vp)) applyHide(el);
   }
 }
 
+function isModalPanel(el: HTMLElement, vp: Viewport): boolean {
+  if (el.hasAttribute(SUPPRESSED_ATTR)) return false;
+  const style = window.getComputedStyle(el);
+  if (style.position !== "fixed") return false;
+  if (!hasPopupZIndex(style)) return false;
+  return hasModalShapeBbox(el, vp);
+}
+
 // ── Gate predicates ─────────────────────────────────────────────────────────
 
-function coversFullViewport(el: HTMLElement, vw: number, vh: number): boolean {
-  if (vw <= 0 || vh <= 0) return false;
+function coversFullViewport(el: HTMLElement, vp: Viewport): boolean {
+  if (vp.vw <= 0 || vp.vh <= 0) return false;
   const rect = el.getBoundingClientRect();
   return (
-    rect.width >= vw * FULL_VIEWPORT_RATIO &&
-    rect.height >= vh * FULL_VIEWPORT_RATIO
+    rect.width >= vp.vw * FULL_VIEWPORT_RATIO &&
+    rect.height >= vp.vh * FULL_VIEWPORT_RATIO
   );
 }
 
@@ -190,19 +184,19 @@ function coversFullViewport(el: HTMLElement, vw: number, vh: number): boolean {
 // axes). Calibrated against shadcn Dialog content (≈25–50% × 30–50%), top
 // nav (height fails ≤15%), sidebar (height fails ≥95%), toast (height fails
 // ≤15%).
-function hasModalShapeBbox(el: HTMLElement, vw: number, vh: number): boolean {
+function hasModalShapeBbox(el: HTMLElement, vp: Viewport): boolean {
   const rect = el.getBoundingClientRect();
   return (
-    rect.width >= vw * MODAL_PANEL_MIN_RATIO &&
-    rect.height >= vh * MODAL_PANEL_MIN_RATIO &&
-    rect.width <= vw * MODAL_PANEL_MAX_RATIO &&
-    rect.height <= vh * MODAL_PANEL_MAX_RATIO
+    rect.width >= vp.vw * MODAL_PANEL_MIN_RATIO &&
+    rect.height >= vp.vh * MODAL_PANEL_MIN_RATIO &&
+    rect.width <= vp.vw * MODAL_PANEL_MAX_RATIO &&
+    rect.height <= vp.vh * MODAL_PANEL_MAX_RATIO
   );
 }
 
-function hasHighZIndex(style: CSSStyleDeclaration): boolean {
+function hasPopupZIndex(style: CSSStyleDeclaration): boolean {
   const z = parseInt(style.zIndex, 10);
-  return Number.isFinite(z) && z >= MIN_Z_INDEX;
+  return Number.isFinite(z) && z >= POPUP_Z_INDEX_THRESHOLD;
 }
 
 // True if the element looks like a modal backdrop: translucent fill OR a
@@ -218,7 +212,7 @@ function hasBackdropLook(el: HTMLElement, style: CSSStyleDeclaration): boolean {
     if (!child) continue;
     const cs = window.getComputedStyle(child);
     if (cs.position !== "fixed" && cs.position !== "absolute") continue;
-    if (!hasHighZIndex(cs)) continue;
+    if (!hasPopupZIndex(cs)) continue;
     if (isTranslucent(cs.backgroundColor)) return true;
     if (cs.backdropFilter && cs.backdropFilter !== "none") return true;
   }
@@ -253,20 +247,14 @@ function parseAlpha(value: string): number | null {
   return null;
 }
 
-// ── DOM ops ─────────────────────────────────────────────────────────────────
-
-function applyHide(el: Element): void {
-  if (el.hasAttribute(SUPPRESSED_ATTR)) return;
-  el.setAttribute(SUPPRESSED_ATTR, "1");
-  (el as HTMLElement).style.setProperty("display", "none", "important");
-}
+// ── Viewport + DOM ops ──────────────────────────────────────────────────────
 
 // Viewport dimensions used for percentage gates. Width comes from
 // `innerWidth` (unaffected by canvas auto-fit). Height prefers the reference
 // vh set by page-height-bridge — without that, after the iframe auto-resizes
 // to document content, `innerHeight` is the document height and every modal
 // panel falls below the 15% floor.
-function viewportForGates(): { vw: number; vh: number } {
+function viewportForGates(): Viewport {
   const vw = window.innerWidth || document.documentElement.clientWidth || 0;
   const refStr = document.documentElement.style.getPropertyValue(REFERENCE_VH_BASE_VAR);
   const ref = parseFloat(refStr);
@@ -275,3 +263,9 @@ function viewportForGates(): { vw: number; vh: number } {
     : (window.innerHeight || document.documentElement.clientHeight || 0);
   return { vw, vh };
 }
+
+function applyHide(el: Element): void {
+  if (el.hasAttribute(SUPPRESSED_ATTR)) return;
+  el.setAttribute(SUPPRESSED_ATTR, "1");
+  (el as HTMLElement).style.setProperty("display", "none", "important");
+}