npm - @base44/vite-plugin - Versions diffs - 0.2.29 → 0.3.0 - Mend

@base44/vite-plugin 0.2.29 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/capabilities/inline-edit/controller.d.ts.map +1 -1
package/dist/capabilities/inline-edit/controller.js +3 -0
package/dist/capabilities/inline-edit/controller.js.map +1 -1
package/dist/injections/layer-dropdown/dropdown-ui.d.ts.map +1 -1
package/dist/injections/layer-dropdown/dropdown-ui.js +3 -0
package/dist/injections/layer-dropdown/dropdown-ui.js.map +1 -1
package/dist/injections/utils.d.ts +31 -0
package/dist/injections/utils.d.ts.map +1 -1
package/dist/injections/utils.js +97 -0
package/dist/injections/utils.js.map +1 -1
package/dist/injections/visual-edit-agent.d.ts.map +1 -1
package/dist/injections/visual-edit-agent.js +46 -51
package/dist/injections/visual-edit-agent.js.map +1 -1
package/dist/statics/index.mjs +12 -2
package/dist/statics/index.mjs.map +1 -1
package/package.json +1 -1
package/src/capabilities/inline-edit/controller.ts +3 -0
package/src/injections/layer-dropdown/dropdown-ui.ts +3 -0
package/src/injections/utils.ts +105 -0
package/src/injections/visual-edit-agent.ts +43 -64

package/src/injections/utils.ts CHANGED Viewed

@@ -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,106 @@ export function collectAllowedAttributes(element: Element, allowedAttributes: st
   }
   return attributes;
 }
+/**
+ * Freeze all CSS animations and transitions on the page by injecting
+ * scoped styles under `[data-visual-edit-active]` and programmatically
+ * finishing (or pausing) every running animation.
+ *
+ * Plugin-owned elements (`[data-vite-plugin-element]`) are excluded so
+ * the plugin UI stays animated.
+ */
+export function stopAnimations(): void {
+  if (document.getElementById('freeze-animations')) return;
+  document.documentElement.setAttribute('data-visual-edit-active', '');
+  const animStyle = document.createElement('style');
+  animStyle.id = 'freeze-animations';
+  animStyle.textContent = `
+    [data-visual-edit-active] *:not([${PLUGIN_ELEMENT_ATTR}]):not([${PLUGIN_ELEMENT_ATTR}] *),
+    [data-visual-edit-active] *:not([${PLUGIN_ELEMENT_ATTR}]):not([${PLUGIN_ELEMENT_ATTR}] *)::before,
+    [data-visual-edit-active] *:not([${PLUGIN_ELEMENT_ATTR}]):not([${PLUGIN_ELEMENT_ATTR}] *)::after {
+      animation-play-state: paused !important;
+      transition: none !important;
+    }
+  `;
+  const pointerStyle = document.createElement('style');
+  pointerStyle.id = 'freeze-pointer-events';
+  pointerStyle.textContent = `
+    [data-visual-edit-active] * { 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) => {
+    // Skip animations on plugin UI elements
+    const animTarget = (a.effect as KeyframeEffect)?.target;
+    if (animTarget instanceof Element && animTarget.closest(`[${PLUGIN_ELEMENT_ATTR}]`)) return;
+    try {
+      a.finish();  // fast-forward to end state
+    } catch {
+      a.pause();   // finish() throws on infinite animations — pause instead
+    }
+  });
+}
+/**
+ * Resume all previously frozen animations and remove the injected
+ * freeze styles.  Cleans up the `data-visual-edit-active` attribute
+ * from `<html>` so scoped selectors no longer match.
+ */
+export function resumeAnimations(): void {
+  const animStyle = document.getElementById('freeze-animations');
+  if (!animStyle) return;
+  animStyle.remove();
+  document.getElementById('freeze-pointer-events')?.remove();
+  document.documentElement.removeAttribute('data-visual-edit-active');
+  document.getAnimations().forEach((a) => {
+    if (a.playState === 'paused') {
+      try { a.play(); } catch { /* animation target may have been removed */ }
+    }
+  });
+}
+/**
+ * Hit-test the page at (`x`, `y`) and walk up the DOM to find the
+ * nearest ancestor that carries instrumentation attributes
+ * (`data-source-location` or `data-visual-selector-id`).
+ *
+ * Temporarily disables the pointer-events freeze sheet so the
+ * browser's native `elementFromPoint` can reach the real target.
+ */
+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.  Returns the selector ID of the hovered
+ * element, or `null` if the point is empty or hits the selected element.
+ */
+export function resolveHoverTarget(x: number, y: number, selectedElementId: string | null): string | null {
+  const element = findInstrumentedElement(x, y);
+  if (!element) return null;
+  const selectorId = getElementSelectorId(element);
+  if (selectorId === selectedElementId) return null;
+  return selectorId;
+}

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

@@ -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,19 @@ 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;
-    // Prevent hover effects when a dropdown is open
-    if (isDropdownOpen) {
-      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;
-    }
+  // Hover detection via mousemove + elementFromPoint (since app elements have pointer-events: none)
+  let lastHoveredSelectorId: string | null = null;
+  let pendingMouseMoveRaf: number | null = null;
-    // Find all elements with the same ID
-    const elements = findElementsById(selectorId || null);
+  const clearHoverState = () => {
+    clearHoverOverlays();
+    lastHoveredSelectorId = 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 +212,33 @@ export function setupVisualEditAgent() {
     });
     currentHighlightedElements = elements;
+    lastHoveredSelectorId = selectorId;
   };
-  // Handle mouse out event
-  const handleMouseOut = () => {
-    if (isPopoverDragging) return;
-    clearHoverOverlays();
+  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);
+    });
+  };
+  // Clear hover overlays when mouse leaves the viewport
+  const handleMouseLeave = () => {
+    if (pendingMouseMoveRaf !== null) {
+      cancelAnimationFrame(pendingMouseMoveRaf);
+      pendingMouseMoveRaf = null;
+    }
+    clearHoverState();
   };
   // Handle element click
@@ -288,20 +275,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 +414,21 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
     if (!isEnabled) {
+      resumeAnimations();
       inlineEdit.stopEditing();
       clearSelection();
       layerController.cleanup();
-      clearHoverOverlays();
-      currentHighlightedElements = [];
+      handleMouseLeave();
       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);
     }
   };