@base44-preview/vite-plugin 1.0.6-pr.63.d7abd73 → 1.0.18-pr.80.1ee8db5

package/src/bridge.ts

@@ -5,4 +5,4 @@
  * sync script tags from node_modules.
  */
 
-export { setupVisualEditAgent } from "./injections/visual-edit-agent.js";
+export { setupVisualEditAgent } from "./injections/visual-edit-agent.js";

package/src/html-injections-plugin.ts

@@ -24,7 +24,7 @@ if (window.self === window.top) {
     const pageName = getPageNameFromPath(path) || "home";
     const appId = import.meta.env.VITE_BASE44_APP_ID;
     if (!appId) return;
-    fetch(\`/app-logs/\${appId}/log-user-in-app/\${pageName}\`, {
+    fetch(\`/api/app-logs/\${appId}/log-user-in-app/\${pageName}\`, {
       method: "POST",
     }).catch(() => {});
   }
@@ -151,7 +151,9 @@ export function htmlInjectionsPlugin({
               `    ? "https://localhost:3201/index.mjs"`,
               `    : "${dist}/statics/index.mjs";`,
               `  import(url)`,
-              `    .then(mod => { if (typeof mod.setupVisualEditAgent === "function") mod.setupVisualEditAgent(); })`,
+              `    .then(mod => {`,
+              `      if (typeof mod.setupVisualEditAgent === "function") mod.setupVisualEditAgent();`,
+              `    })`,
               `    .catch(e => console.error("[visual-edit-agent] Failed to load:", e));`,
               `}`,
             ].join("\n"),

package/src/index.ts

@@ -27,7 +27,7 @@ export default function vitePlugin(
   return [
     {
       name: "base44",
-      config: ({ mode, root = process.cwd(), server: serverConfig }) => {
+      config: ({ mode, root = process.cwd() }) => {
         const env = loadEnv(mode ?? "development", root, "");
 
         return {
@@ -53,7 +53,7 @@ export default function vitePlugin(
                 server: {
                   cors: true,
                   host: "0.0.0.0", // Bind to all interfaces for container access
-                  port: serverConfig?.port ?? 5173,
+                  port: 5173,
                   strictPort: true,
                   // Allow all hosts - essential for Modal tunnel URLs
                   allowedHosts: true,

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

@@ -0,0 +1,277 @@
+// auto-popup-suppressor — hides auto-opening modal popups in the canvas
+// preview iframe so the page snapshot isn't obscured by overlays the user
+// didn't intend to capture. Driven by `{ type: "suppress-auto-popups" }` from
+// the parent; inert until that arrives.
+//
+// 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.
+//
+//   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
+//      (15–95% on both axes). Picks up the dialog content panel even when it
+//      isn't a direct sibling of the overlay (Radix wraps content in
+//      FocusScope + DismissableLayer + focus-guards; shadcn's portals use
+//      `asChild`, so structural relationships vary).
+//
+// A sticky `backdropEverDetected` flag keeps the panel-shape check live for
+// later MutationObserver ticks — Content sometimes mounts in a different
+// batch than its Overlay.
+//
+// Why the percentage gates aren't based on window.innerHeight: the canvas
+// iframe is auto-sized to the document content (e.g. 4958px), so innerHeight
+// is the document height, not the visible viewport. page-height-bridge sets
+// `--base44-reference-vh-base` to the canvas tile height — the viewport the
+// user actually sees — and that's what our gates use.
+
+const SUPPRESSED_ATTR = "data-base44-suppressed-popup";
+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;
+
+export type AutoPopupSuppressorController = {
+  suppress: () => void;
+  teardown: () => void;
+};
+
+export function createAutoPopupSuppressorController(): AutoPopupSuppressorController {
+  let observer: MutationObserver | null = null;
+  let domReadyHandler: (() => void) | null = null;
+  let active = false;
+  // Once a backdrop has been seen, modal-shaped panels appearing in later
+  // mutation batches are also hidden. Without this, a Content node that
+  // mounts after its Overlay's batch wouldn't be matched in-flight.
+  let backdropEverDetected = false;
+
+  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);
+      }
+    }
+  };
+
+  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 attach = (): void => {
+    scanNode(document);
+    if (observer) return;
+    observer = new MutationObserver((mutations) => {
+      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);
+        }
+      }
+    });
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+  };
+
+  return {
+    suppress: (): void => {
+      if (active) return;
+      active = true;
+      if (document.body) {
+        attach();
+      } else {
+        domReadyHandler = (): void => {
+          domReadyHandler = null;
+          attach();
+        };
+        document.addEventListener("DOMContentLoaded", domReadyHandler);
+      }
+    },
+    teardown: (): void => {
+      active = false;
+      backdropEverDetected = false;
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+      if (domReadyHandler) {
+        document.removeEventListener("DOMContentLoaded", domReadyHandler);
+        domReadyHandler = null;
+      }
+    },
+  };
+}
+
+// ── Heuristic ───────────────────────────────────────────────────────────────
+
+// 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 {
+  if (!document.body) return;
+  const { vw, vh } = viewportForGates();
+  if (vw <= 0 || 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);
+  }
+}
+
+// ── Gate predicates ─────────────────────────────────────────────────────────
+
+function coversFullViewport(el: HTMLElement, vw: number, vh: number): boolean {
+  if (vw <= 0 || vh <= 0) return false;
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.width >= vw * FULL_VIEWPORT_RATIO &&
+    rect.height >= vh * FULL_VIEWPORT_RATIO
+  );
+}
+
+// "Modal-shaped" = small enough not to be a sidebar/full-screen overlay
+// (≤95% on both axes), big enough not to be a nav/footer/toast (≥15% on both
+// 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 {
+  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
+  );
+}
+
+function hasHighZIndex(style: CSSStyleDeclaration): boolean {
+  const z = parseInt(style.zIndex, 10);
+  return Number.isFinite(z) && z >= MIN_Z_INDEX;
+}
+
+// True if the element looks like a modal backdrop: translucent fill OR a
+// backdrop-filter (e.g. blur). Also returns true if the element's own bg is
+// transparent but a fixed/high-z descendant paints the backdrop — covers
+// dialog wrappers that delegate the backdrop to a child element.
+function hasBackdropLook(el: HTMLElement, style: CSSStyleDeclaration): boolean {
+  if (isTranslucent(style.backgroundColor)) return true;
+  if (style.backdropFilter && style.backdropFilter !== "none") return true;
+  const descendants = el.querySelectorAll<HTMLElement>("*");
+  for (let i = 0; i < descendants.length; i++) {
+    const child = descendants[i];
+    if (!child) continue;
+    const cs = window.getComputedStyle(child);
+    if (cs.position !== "fixed" && cs.position !== "absolute") continue;
+    if (!hasHighZIndex(cs)) continue;
+    if (isTranslucent(cs.backgroundColor)) return true;
+    if (cs.backdropFilter && cs.backdropFilter !== "none") return true;
+  }
+  return false;
+}
+
+function isTranslucent(color: string): boolean {
+  const alpha = parseAlpha(color);
+  return alpha !== null && alpha > 0 && alpha < 1;
+}
+
+// Extracts the alpha channel from a computed background-color across legacy
+// AND modern color syntaxes:
+//
+//   • `rgb(r, g, b)` / `rgba(r, g, b, a)` — legacy comma syntax.
+//   • `<func>(... / a)` / `<func>(... / a%)` — modern slash-alpha (oklch,
+//     oklab, lch, lab, hsl, hsla, color, modern rgb). Tailwind v4 / shadcn
+//     theme tokens compute to these.
+//   • A recognized color function call without explicit alpha → 1.
+//
+// Returns null when unrecognized; callers treat null as "not a backdrop".
+function parseAlpha(value: string): number | null {
+  if (!value) return null;
+  const comma = /^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*([0-9.]+)\s*)?\)$/.exec(value);
+  if (comma) return comma[1] === undefined ? 1 : parseFloat(comma[1]);
+  const slash = /\/\s*([0-9.]+)(%?)\s*\)$/.exec(value);
+  if (slash) {
+    const n = parseFloat(slash[1]!);
+    return slash[2] === "%" ? n / 100 : n;
+  }
+  if (/^[a-z]+\s*\(/.test(value)) return 1;
+  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 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 } {
+  const vw = window.innerWidth || document.documentElement.clientWidth || 0;
+  const refStr = document.documentElement.style.getPropertyValue(REFERENCE_VH_BASE_VAR);
+  const ref = parseFloat(refStr);
+  const vh = Number.isFinite(ref) && ref > 0
+    ? ref
+    : (window.innerHeight || document.documentElement.clientHeight || 0);
+  return { vw, vh };
+}

package/src/injections/canvas-wheel-zoom-bridge.ts

@@ -0,0 +1,78 @@
+import { PLUGIN_ELEMENT_ATTR } from "./utils.js";
+
+type CanvasWheelPanData = {
+  deltaX: number;
+  deltaY: number;
+  deltaMode: number;
+  clientX: number;
+  clientY: number;
+  shiftKey: boolean;
+  ctrlKey: false;
+  metaKey: false;
+};
+
+function elementFromEventTarget(target: EventTarget | null): Element | null {
+  if (target instanceof Element) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
+}
+
+function isPluginOwnedTarget(target: EventTarget | null): boolean {
+  return elementFromEventTarget(target)?.closest(`[${PLUGIN_ELEMENT_ATTR}]`) != null;
+}
+
+export function createCanvasWheelZoomBridgeController() {
+  let isEnabled = false;
+
+  const onWheel = (event: WheelEvent): void => {
+    if (isPluginOwnedTarget(event.target)) return;
+
+    event.preventDefault();
+    if (event.ctrlKey || event.metaKey) {
+      window.parent.postMessage({
+        type: "canvas-wheel-zoom",
+        data: {
+          deltaY: event.deltaY,
+          deltaMode: event.deltaMode,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          ctrlKey: event.ctrlKey,
+          metaKey: event.metaKey,
+        },
+      }, "*");
+      return;
+    }
+
+    const panData: CanvasWheelPanData = {
+      deltaX: event.deltaX,
+      deltaY: event.deltaY,
+      deltaMode: event.deltaMode,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      shiftKey: event.shiftKey,
+      ctrlKey: false,
+      metaKey: false,
+    };
+    window.parent.postMessage({
+      type: "canvas-wheel-pan",
+      data: panData,
+    }, "*");
+  };
+
+  const enable = (): void => {
+    if (isEnabled) return;
+    isEnabled = true;
+    window.addEventListener("wheel", onWheel, { capture: true, passive: false });
+  };
+
+  const disable = (): void => {
+    if (!isEnabled) return;
+    isEnabled = false;
+    window.removeEventListener("wheel", onWheel, true);
+  };
+
+  return {
+    enable,
+    disable,
+  };
+}