@base44/vite-plugin 1.0.12 → 1.0.14

package/src/injections/page-height-bridge.ts

@@ -3,12 +3,13 @@
 // fire on their own.
 //
 //   parent → child  { type: "freeze-vh-units", referenceVhBase?: number }
-//     Rewrites every `vh` in <style> + CSSOM to fixed `px` (kills the
-//     vh ↔ auto-resize feedback loop). Idempotent; covers HMR-added
-//     styles too. Fire-and-forget.
+//     Rewrites every `vh` in <style> + CSSOM to a CSS variable-backed
+//     expression (kills the vh ↔ auto-resize feedback loop). Repeated calls
+//     update the variable, so callers can rebase without recovering raw CSS.
+//     Idempotent; covers HMR-added styles too. Fire-and-forget.
 //
 //   parent → child  { type: "measure-page-height", settleMs?: number }
-//     After `settleMs` (default 2000) posts the page's scrollHeight back
+//     After `settleMs` (default 2000) posts the page's measured content height
 //     as `{ type: "page-height-measured", height }` to the requester.
 
 type IncomingMessage = {
@@ -24,10 +25,17 @@ type IndexableCssRule = CSSRule & {
 
 type Debouncer = { trigger: () => void; cancel: () => void };
 
+export type PageHeightBridgeController = {
+  freezeVhUnits: (override?: number) => void;
+  measurePageHeight: (origin: string, settleMs?: number) => void;
+  teardown: () => void;
+};
+
 const FALLBACK_VHBASE: number = 900;
 const MIN_VHBASE: number = 400;
 const DEFAULT_SETTLE_MS: number = 2000;
 const NEUTRALIZE_DEBOUNCE_MS: number = 16;
+const REFERENCE_VH_BASE_VAR: string = "--base44-reference-vh-base";
 
 const noop: () => void = (): void => {};
 
@@ -45,34 +53,7 @@ export function setupPageHeightBridge(): () => void {
   if (window.self === window.top) return noop;
   started = true;
 
-  let vhCleanups: Array<() => void> | null = null;
-  let vhForceRun: (() => void) | null = null;
-  let pendingResponse: number | undefined;
-  let pendingOrigin: string = "*";
-
-  const freezeVhUnits = (override: number | undefined): void => {
-    if (vhCleanups) {
-      vhForceRun?.();
-      return;
-    }
-    const referenceVhBase: number = resolveReferenceVhBase(override);
-    vhCleanups = [];
-    vhForceRun = startVhNeutralizer(referenceVhBase, vhCleanups);
-  };
-
-  // Target the requester's origin so the height isn't broadcast to anyone
-  // who happens to embed us. Falls back to "*" when origin is unavailable
-  // (jsdom default, sandboxed iframes with `null` origin).
-  const measurePageHeight = (origin: string, settleMs: number): void => {
-    pendingOrigin = origin;
-    if (pendingResponse !== undefined) window.clearTimeout(pendingResponse);
-    pendingResponse = window.setTimeout((): void => {
-      requestAnimationFrame((): void => {
-        const height: number = measureContentHeight();
-        window.parent.postMessage({ type: "page-height-measured", height }, pendingOrigin);
-      });
-    }, settleMs);
-  };
+  const controller: PageHeightBridgeController = createPageHeightBridgeController();
 
   const onMessage = (event: MessageEvent): void => {
     const data: IncomingMessage | null = (event.data ?? null) as IncomingMessage | null;
@@ -81,7 +62,7 @@ export function setupPageHeightBridge(): () => void {
       case "freeze-vh-units": {
         const override: number | undefined =
           typeof data.referenceVhBase === "number" ? data.referenceVhBase : undefined;
-        freezeVhUnits(override);
+        controller.freezeVhUnits(override);
         return;
       }
       case "measure-page-height": {
@@ -89,7 +70,7 @@ export function setupPageHeightBridge(): () => void {
           typeof data.settleMs === "number" ? data.settleMs : DEFAULT_SETTLE_MS;
         const origin: string =
           event.origin && event.origin !== "null" ? event.origin : "*";
-        measurePageHeight(origin, settleMs);
+        controller.measurePageHeight(origin, settleMs);
         return;
       }
     }
@@ -103,12 +84,50 @@ export function setupPageHeightBridge(): () => void {
     torn = true;
     started = false;
     window.removeEventListener("message", onMessage);
-    if (vhCleanups) {
-      for (const c of vhCleanups) c();
-      vhCleanups = null;
-      vhForceRun = null;
-    }
-    if (pendingResponse !== undefined) window.clearTimeout(pendingResponse);
+    controller.teardown();
+  };
+}
+
+export function createPageHeightBridgeController(): PageHeightBridgeController {
+  let vhCleanups: Array<() => void> | null = null;
+  let vhForceRun: (() => void) | null = null;
+  let pendingResponse: number | undefined;
+  let pendingOrigin: string = "*";
+
+  return {
+    freezeVhUnits: (override: number | undefined): void => {
+      const referenceVhBase: number = resolveReferenceVhBase(override);
+      setReferenceVhBase(referenceVhBase);
+      if (vhCleanups) {
+        vhForceRun?.();
+        return;
+      }
+      vhCleanups = [];
+      vhForceRun = startVhNeutralizer(vhCleanups);
+    },
+
+    // Target the requester's origin so the height isn't broadcast to anyone
+    // who happens to embed us. Falls back to "*" when origin is unavailable
+    // (jsdom default, sandboxed iframes with `null` origin).
+    measurePageHeight: (origin: string, settleMs: number = DEFAULT_SETTLE_MS): void => {
+      pendingOrigin = origin;
+      if (pendingResponse !== undefined) window.clearTimeout(pendingResponse);
+      pendingResponse = window.setTimeout((): void => {
+        requestAnimationFrame((): void => {
+          const height: number = measureContentHeight();
+          window.parent.postMessage({ type: "page-height-measured", height }, pendingOrigin);
+        });
+      }, settleMs);
+    },
+
+    teardown: (): void => {
+      if (vhCleanups) {
+        for (const c of vhCleanups) c();
+        vhCleanups = null;
+        vhForceRun = null;
+      }
+      if (pendingResponse !== undefined) window.clearTimeout(pendingResponse);
+    },
   };
 }
 
@@ -118,15 +137,16 @@ function resolveReferenceVhBase(override: number | undefined): number {
   return detected >= MIN_VHBASE ? detected : FALLBACK_VHBASE;
 }
 
+function setReferenceVhBase(referenceVhBase: number): void {
+  document.documentElement.style.setProperty(REFERENCE_VH_BASE_VAR, `${referenceVhBase}px`);
+}
+
 // Caches keep work proportional to *new* CSS, not total CSS. <head> observer
 // catches `<style>`/`<link>` adds; per-element observers catch HMR text edits.
 // Returns a `forceRun` so the caller can re-trigger neutralization on later
 // parent requests (idempotent — already-rewritten text is skipped via the
 // processed sets).
-function startVhNeutralizer(
-  referenceVhBase: number,
-  cleanups: Array<() => void>,
-): () => void {
+function startVhNeutralizer(cleanups: Array<() => void>): () => void {
   const VH_RE: RegExp = /(\d+(?:\.\d+)?)vh\b/g;
   const processedStyles: WeakSet<HTMLStyleElement> = new WeakSet();
   const processedSheets: WeakMap<CSSStyleSheet, number> = new WeakMap();
@@ -136,7 +156,7 @@ function startVhNeutralizer(
   const neutralize = (): void => {
     const rewrite = (input: string): string =>
       input.replace(VH_RE, (_match: string, n: string): string =>
-        `${((parseFloat(n) / 100) * referenceVhBase).toFixed(2)}px`,
+        `calc(var(${REFERENCE_VH_BASE_VAR}) * ${formatVhFactor(n)})`,
       );
 
     document.querySelectorAll<HTMLStyleElement>("style").forEach((el: HTMLStyleElement): void => {
@@ -214,6 +234,10 @@ function startVhNeutralizer(
   return debouncedNeutralize;
 }
 
+function formatVhFactor(value: string): string {
+  return String(Number((parseFloat(value) / 100).toFixed(6)));
+}
+
 function rewriteVhInRules(rules: CSSRuleList, rewrite: (value: string) => string): void {
   for (let i: number = 0; i < rules.length; i++) {
     const rule: IndexableCssRule | undefined = rules[i] as IndexableCssRule | undefined;
@@ -241,10 +265,88 @@ function containsStylesheetNode(nodes: NodeList): boolean {
 }
 
 function measureContentHeight(): number {
-  return Math.max(
+  const scrollHeight: number = Math.max(
     document.documentElement.scrollHeight,
     document.body?.scrollHeight ?? 0,
   );
+  const viewportHeight: number = Math.max(
+    window.innerHeight || 0,
+    document.documentElement.clientHeight,
+    document.body?.clientHeight ?? 0,
+  );
+  const contentBottom: number = measureElementContentBottom(viewportHeight);
+  const referenceVhBase: number = readReferenceVhBase();
+  if (contentBottom > 0) return Math.ceil(Math.max(contentBottom, referenceVhBase));
+  return Math.ceil(Math.max(scrollHeight, referenceVhBase));
+}
+
+function readReferenceVhBase(): number {
+  const value: string = document.documentElement.style.getPropertyValue(REFERENCE_VH_BASE_VAR);
+  const parsed: number = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function measureElementContentBottom(viewportHeight: number): number {
+  if (!document.body) return 0;
+  const elements: Element[] = [document.body, ...Array.from(document.body.querySelectorAll("*"))];
+  const contentBottoms: WeakMap<Element, number> = new WeakMap();
+  const viewportBottom: number = window.scrollY + viewportHeight;
+
+  for (let i: number = elements.length - 1; i >= 0; i--) {
+    const el: Element | undefined = elements[i];
+    if (!el) continue;
+    const childContentBottom: number = readChildrenContentBottom(el, contentBottoms);
+    const rawBottom: number = readElementBottom(el);
+    const selfBottom: number = isViewportStretchedContainer(rawBottom, childContentBottom, viewportBottom)
+      ? 0
+      : rawBottom;
+    contentBottoms.set(el, Math.max(childContentBottom, selfBottom));
+  }
+
+  return contentBottoms.get(document.body) ?? 0;
+}
+
+function readChildrenContentBottom(
+  el: Element,
+  contentBottoms: WeakMap<Element, number>,
+): number {
+  let childContentBottom: number = 0;
+  for (let i: number = 0; i < el.children.length; i++) {
+    const child: Element | undefined = el.children[i];
+    if (!child) continue;
+    childContentBottom = Math.max(childContentBottom, contentBottoms.get(child) ?? 0);
+  }
+  return childContentBottom;
+}
+
+function readElementBottom(el: Element): number {
+  const computedStyle: CSSStyleDeclaration = window.getComputedStyle(el);
+  if (isOutOfFlowDecoration(computedStyle)) return 0;
+  const rect: DOMRect = el.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return 0;
+  return rect.bottom + window.scrollY + readMarginBottom(computedStyle);
+}
+
+function readMarginBottom(computedStyle: CSSStyleDeclaration): number {
+  const marginBottom: number = parseFloat(computedStyle.marginBottom);
+  return Number.isFinite(marginBottom) ? marginBottom : 0;
+}
+
+function isOutOfFlowDecoration(computedStyle: CSSStyleDeclaration): boolean {
+  if (computedStyle.position === "fixed") return true;
+  return computedStyle.position === "absolute" && computedStyle.pointerEvents === "none";
+}
+
+function isViewportStretchedContainer(
+  elementBottom: number,
+  childBottom: number,
+  viewportBottom: number,
+): boolean {
+  return (
+    childBottom > 0 &&
+    Math.abs(elementBottom - viewportBottom) <= 1 &&
+    elementBottom - childBottom > 8
+  );
 }
 
 function createDebouncer(fn: () => void, delayMs: number): Debouncer {

package/src/injections/visual-edit-agent.ts

@@ -3,13 +3,13 @@ import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
 import { THEME_FONT_PREVIEW_ID } from "../consts.js";
-import { setupPageHeightBridge } from "./page-height-bridge.js";
+import { createPageHeightBridgeController } from "./page-height-bridge.js";
 
 const REPOSITION_DELAY_MS = 50;
 
 export function setupVisualEditAgent() {
-  setupPageHeightBridge();
-  
+  const pageHeightBridge = createPageHeightBridgeController();
+
   // State variables (replacing React useState/useRef)
   let isVisualEditMode = false;
   let isPopoverDragging = false;
@@ -641,6 +641,21 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "freeze-vh-units":
+        pageHeightBridge.freezeVhUnits(
+          typeof message.referenceVhBase === "number"
+            ? message.referenceVhBase
+            : undefined
+        );
+        break;
+
+      case "measure-page-height":
+        pageHeightBridge.measurePageHeight(
+          event.origin && event.origin !== "null" ? event.origin : "*",
+          typeof message.settleMs === "number" ? message.settleMs : undefined
+        );
+        break;
+
       default:
         break;
     }
@@ -726,4 +741,4 @@ export function setupVisualEditAgent() {
 
   // Send ready message to parent
   window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
-}
+}