@base44-preview/vite-plugin 0.2.28-pr.43.f34d1cd → 0.2.29-pr.45.4649f89

package/src/injections/utils.ts

@@ -18,6 +18,8 @@ export function getElementSelectorId(element: Element): string | null {
 
 export const ALLOWED_ATTRIBUTES: string[] = ["src"];
 
+export const PLUGIN_ELEMENT_ATTR = "data-vite-plugin-element";
+
 /** Find elements by ID - first try data-source-location, fallback to data-visual-selector-id */
 export function findElementsById(id: string | null): Element[] {
   if (!id) return [];
@@ -64,3 +66,76 @@ export function collectAllowedAttributes(element: Element, allowedAttributes: st
   }
   return attributes;
 }
+
+export function stopAnimations(): void {
+  if (document.getElementById('freeze-animations')) return;
+
+  const animStyle = document.createElement('style');
+  animStyle.id = 'freeze-animations';
+  animStyle.textContent = `
+    *, *::before, *::after {
+      animation-play-state: paused !important;
+      transition: none !important;
+    }
+    [${PLUGIN_ELEMENT_ATTR}],
+    [${PLUGIN_ELEMENT_ATTR}] *,
+    [${PLUGIN_ELEMENT_ATTR}]::before,
+    [${PLUGIN_ELEMENT_ATTR}] *::before,
+    [${PLUGIN_ELEMENT_ATTR}]::after,
+    [${PLUGIN_ELEMENT_ATTR}] *::after {
+      animation-play-state: running !important;
+      transition: revert !important;
+    }
+  `;
+
+  const pointerStyle = document.createElement('style');
+  pointerStyle.id = 'freeze-pointer-events';
+  pointerStyle.textContent = `
+    body * { pointer-events: none !important; }
+    [${PLUGIN_ELEMENT_ATTR}], [${PLUGIN_ELEMENT_ATTR}] * { pointer-events: auto !important; }
+  `;
+
+  const target = document.head || document.documentElement;
+  target.appendChild(animStyle);
+  target.appendChild(pointerStyle);
+
+  document.getAnimations().forEach((a) => a.pause());
+}
+
+export function resumeAnimations(): void {
+  const animStyle = document.getElementById('freeze-animations');
+  if (!animStyle) return;
+
+  animStyle.remove();
+  document.getElementById('freeze-pointer-events')?.remove();
+
+  document.getAnimations().forEach((a) => {
+    try { a.play(); } catch { /* animation target may have been removed */ }
+  });
+}
+
+export function findInstrumentedElement(x: number, y: number): Element | null {
+  const pointerStyle = document.getElementById('freeze-pointer-events') as HTMLStyleElement | null;
+  if (pointerStyle) pointerStyle.disabled = true;
+
+  const el = document.elementFromPoint(x, y);
+
+  if (pointerStyle) pointerStyle.disabled = false;
+
+  return el?.closest('[data-source-location], [data-visual-selector-id]') ?? null;
+}
+
+/** Resolve which element should be hovered at (x, y), skipping the currently selected element. */
+export function resolveHoverTarget(x: number, y: number, selectedElementId: string | null): string | null {
+  const element = findInstrumentedElement(x, y);
+  if (!element) return null;
+
+  const htmlElement = element as HTMLElement;
+  const selectorId =
+    htmlElement.dataset.sourceLocation ||
+    htmlElement.dataset.visualSelectorId || null;
+
+  if (selectorId === selectedElementId) return null;
+
+  return selectorId;
+}

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

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
@@ -191,53 +191,21 @@ export function setupVisualEditAgent() {
     window.parent.postMessage({ type: "unselect-element" }, "*");
   };
 
-  // Handle mouse over event
-  const handleMouseOver = (e: MouseEvent) => {
-    if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing()) return;
-
-
-    const target = e.target as Element;
+  // Hover detection via mousemove + elementFromPoint (since app elements have pointer-events: none)
+  let lastHoveredSelectorId: string | null = null;
+  let pendingMouseMoveRaf: number | null = null;
 
-    // Prevent hover effects when a dropdown is open
-    if (isDropdownOpen) {
+  const clearHoverState = () => {
+    if (lastHoveredSelectorId !== null) {
       clearHoverOverlays();
-      return;
-    }
-
-    // Prevent hover effects on SVG path elements
-    if (target.tagName.toLowerCase() === "path") {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Support both data-source-location and data-visual-selector-id
-    const element = target.closest(
-      "[data-source-location], [data-visual-selector-id]"
-    );
-    if (!element) {
-      clearHoverOverlays();
-      return;
-    }
-
-    // Prefer data-source-location, fallback to data-visual-selector-id
-    const htmlElement = element as HTMLElement;
-    const selectorId =
-      htmlElement.dataset.sourceLocation ||
-      htmlElement.dataset.visualSelectorId;
-
-    // Skip if this element is already selected
-    if (selectedElementId === selectorId) {
-      clearHoverOverlays();
-      return;
+      lastHoveredSelectorId = null;
     }
+  };
 
-    // Find all elements with the same ID
-    const elements = findElementsById(selectorId || null);
-
-    // Clear previous hover overlays
+  const applyHoverOverlays = (selectorId: string) => {
+    const elements = findElementsById(selectorId);
     clearHoverOverlays();
 
-    // Create overlays for all matching elements
     elements.forEach((el) => {
       const overlay = createOverlay(false);
       document.body.appendChild(overlay);
@@ -246,12 +214,34 @@ export function setupVisualEditAgent() {
     });
 
     currentHighlightedElements = elements;
+    lastHoveredSelectorId = selectorId;
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing()) return;
+
+    if (pendingMouseMoveRaf !== null) return;
+    pendingMouseMoveRaf = requestAnimationFrame(() => {
+      pendingMouseMoveRaf = null;
+
+      if (isDropdownOpen) { clearHoverState(); return; }
+
+      const selectorId = resolveHoverTarget(e.clientX, e.clientY, selectedElementId);
+      if (!selectorId) { clearHoverState(); return; }
+      if (lastHoveredSelectorId === selectorId) return;
+
+      applyHoverOverlays(selectorId);
+    });
   };
 
-  // Handle mouse out event
-  const handleMouseOut = () => {
-    if (isPopoverDragging) return;
+  // Clear hover overlays when mouse leaves the viewport
+  const handleMouseLeave = () => {
+    if (pendingMouseMoveRaf !== null) {
+      cancelAnimationFrame(pendingMouseMoveRaf);
+      pendingMouseMoveRaf = null;
+    }
     clearHoverOverlays();
+    lastHoveredSelectorId = null;
   };
 
   // Handle element click
@@ -288,20 +278,12 @@ export function setupVisualEditAgent() {
       return;
     }
 
-    // Prevent clicking on SVG path elements
-    if (target.tagName.toLowerCase() === "path") {
-      return;
-    }
-
     // Prevent default behavior immediately when in visual edit mode
     e.preventDefault();
     e.stopPropagation();
     e.stopImmediatePropagation();
 
-    // Support both data-source-location and data-visual-selector-id
-    const element = target.closest(
-      "[data-source-location], [data-visual-selector-id]"
-    );
+    const element = findInstrumentedElement(e.clientX, e.clientY);
     if (!element) {
       return;
     }
@@ -435,21 +417,28 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      resumeAnimations();
       inlineEdit.stopEditing();
       clearSelection();
       layerController.cleanup();
       clearHoverOverlays();
 
       currentHighlightedElements = [];
+      lastHoveredSelectorId = null;
+      if (pendingMouseMoveRaf !== null) {
+        cancelAnimationFrame(pendingMouseMoveRaf);
+        pendingMouseMoveRaf = null;
+      }
       document.body.style.cursor = "default";
 
-      document.removeEventListener("mouseover", handleMouseOver);
-      document.removeEventListener("mouseout", handleMouseOut);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
       document.removeEventListener("click", handleElementClick, true);
     } else {
       document.body.style.cursor = "crosshair";
-      document.addEventListener("mouseover", handleMouseOver);
-      document.addEventListener("mouseout", handleMouseOut);
+      stopAnimations();
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseleave", handleMouseLeave);
       document.addEventListener("click", handleElementClick, true);
     }
   };
@@ -620,6 +609,19 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "update-theme-variables":
+        if (message.data?.variables) {
+          const target = message.data.mode === 'dark'
+            ? document.querySelector('.dark') as HTMLElement
+            : document.documentElement;
+          if (target) {
+            for (const [name, value] of Object.entries(message.data.variables)) {
+              target.style.setProperty(name, value as string);
+            }
+          }
+        }
+        break;
+
       case "toggle-inline-edit-mode":
         if (message.data) {
           inlineEdit.handleToggleMessage(message.data);