@base44-preview/vite-plugin 0.2.26-pr.43.e9195be → 0.2.27-pr.41.77be9cb

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

@@ -0,0 +1,121 @@
+import { createAgentState } from "./state/agent-state.js";
+import { handleMouseOver, handleMouseOut } from "./handlers/hover-handlers.js";
+import { handleElementClick } from "./handlers/click-handlers.js";
+import { handleMessage, handleScroll, handleResize } from "./handlers/message-handlers.js";
+import { setupInlineEditCallback } from "./handlers/inline-edit-handlers.js";
+import { OutgoingMessageType } from "./handlers/messages/types.js";
+
+/**
+ * Initialize element IDs for elements with line numbers
+ */
+function initializeElementIds(): void {
+  const elementsWithLineNumber = document.querySelectorAll(
+    "[data-linenumber]:not([data-visual-selector-id])"
+  );
+  elementsWithLineNumber.forEach((el, index) => {
+    const htmlEl = el as HTMLElement;
+    const id = `visual-id-${htmlEl.dataset.filename}-${htmlEl.dataset.linenumber}-${index}`;
+    htmlEl.dataset.visualSelectorId = id;
+  });
+}
+
+/**
+ * Create mutation observer to detect layout changes.
+ * Uses requestAnimationFrame to coalesce many rapid mutations into one reposition
+ * per paint frame, avoiding stacking multiple timers during CSS transitions.
+ */
+function createLayoutObserver(onLayoutChange: () => void): MutationObserver {
+  let rafHandle: number | null = null;
+
+  const hasVisualId = (node: Node): boolean => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return false;
+    const el = node as HTMLElement;
+    if (el.dataset?.visualSelectorId) return true;
+    for (const child of Array.from(el.children)) {
+      if (hasVisualId(child)) return true;
+    }
+    return false;
+  };
+
+  return new MutationObserver((mutations) => {
+    if (rafHandle !== null) return;
+
+    const needsUpdate = mutations.some((mutation) => {
+      const isLayoutChange =
+        mutation.type === "attributes" &&
+        (mutation.attributeName === "style" ||
+          mutation.attributeName === "class" ||
+          mutation.attributeName === "width" ||
+          mutation.attributeName === "height");
+
+      return isLayoutChange && hasVisualId(mutation.target);
+    });
+
+    if (needsUpdate) {
+      // Coalesce rapid mutations into a single reposition per paint frame,
+      // avoiding stacked timers during CSS transitions
+      rafHandle = requestAnimationFrame(() => {
+        rafHandle = null;
+        onLayoutChange();
+      });
+    }
+  });
+}
+
+/**
+ * Setup event listeners, returning a function that removes them all.
+ */
+function setupEventListeners(state: ReturnType<typeof createAgentState>): () => void {
+  const onMessage = (e: MessageEvent) => handleMessage(state, e);
+  const onScroll = () => handleScroll(state);
+  const onResize = () => handleResize(state);
+  const onClick = (e: MouseEvent) => handleElementClick(state, e);
+  const onMouseOver = (e: MouseEvent) => handleMouseOver(state, e);
+  const onMouseOut = () => handleMouseOut(state);
+
+  window.addEventListener("message", onMessage);
+  window.addEventListener("scroll", onScroll, true);
+  document.addEventListener("scroll", onScroll, true);
+  window.addEventListener("resize", onResize);
+  window.addEventListener("scroll", onResize);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("mouseover", onMouseOver);
+  document.addEventListener("mouseout", onMouseOut);
+
+  return () => {
+    window.removeEventListener("message", onMessage);
+    window.removeEventListener("scroll", onScroll, true);
+    document.removeEventListener("scroll", onScroll, true);
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("scroll", onResize);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("mouseover", onMouseOver);
+    document.removeEventListener("mouseout", onMouseOut);
+  };
+}
+
+/**
+ * Main setup function for visual edit agent.
+ * Returns a teardown function that disconnects the observer and removes all event listeners.
+ */
+export function setupVisualEditAgent(): () => void {
+  const state = createAgentState();
+  initializeElementIds();
+  setupInlineEditCallback(state);
+  const removeEventListeners = setupEventListeners(state);
+
+  const mutationObserver = createLayoutObserver(() => handleResize(state));
+  mutationObserver.observe(document.body, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+    attributeFilter: ["style", "class", "width", "height"],
+  });
+
+  window.parent.postMessage({ type: OutgoingMessageType.VISUAL_EDIT_AGENT_READY }, "*");
+
+  return () => {
+    mutationObserver.disconnect();
+    removeEventListeners();
+  };
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Central state management for the visual edit agent
+ */
+
+export interface AgentState {
+  isVisualEditMode: boolean;
+  isPopoverDragging: boolean;
+  isDropdownOpen: boolean;
+  hoverOverlays: HTMLDivElement[];
+  selectedOverlays: HTMLDivElement[];
+  currentHighlightedElements: Element[];
+  selectedElementId: string | null;
+  currentEditingElement: HTMLElement | null;
+  debouncedSendTimeout: ReturnType<typeof setTimeout> | null;
+  isInlineEditExperimentEnabled: boolean;
+}
+
+export function createAgentState(): AgentState {
+  return {
+    isVisualEditMode: false,
+    isPopoverDragging: false,
+    isDropdownOpen: false,
+    hoverOverlays: [],
+    selectedOverlays: [],
+    currentHighlightedElements: [],
+    selectedElementId: null,
+    currentEditingElement: null,
+    debouncedSendTimeout: null,
+    isInlineEditExperimentEnabled: false,
+  };
+}

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

@@ -0,0 +1,126 @@
+import {
+  OVERLAY_TRANSITION,
+  OVERLAY_Z_INDEX,
+  SELECTED_BORDER_COLOR,
+  HOVER_BORDER_COLOR,
+  HOVER_BACKGROUND_COLOR,
+  LABEL_TOP_OFFSET,
+  LABEL_LEFT_OFFSET,
+} from "../constants.js";
+import type { AgentState } from "../state/agent-state.js";
+import { findElementsById } from "../../utils.js";
+
+/**
+ * Create an overlay element for highlighting
+ */
+export function createOverlay(isSelected = false): HTMLDivElement {
+  const overlay = document.createElement("div");
+  overlay.style.position = "absolute";
+  overlay.style.pointerEvents = "none";
+  overlay.style.transition = OVERLAY_TRANSITION;
+  overlay.style.zIndex = OVERLAY_Z_INDEX;
+
+  if (isSelected) {
+    overlay.style.border = `2px solid ${SELECTED_BORDER_COLOR}`;
+  } else {
+    overlay.style.border = `2px solid ${HOVER_BORDER_COLOR}`;
+    overlay.style.backgroundColor = HOVER_BACKGROUND_COLOR;
+  }
+
+  return overlay;
+}
+
+/**
+ * Position overlay relative to element
+ */
+export function positionOverlay(
+  overlay: HTMLDivElement,
+  element: Element,
+  isSelected = false,
+  isVisualEditMode = true
+): void {
+  if (!element || !isVisualEditMode) return;
+
+  // Force layout recalculation before reading bounding rect
+  void (element as HTMLElement).offsetWidth;
+
+  const rect = element.getBoundingClientRect();
+  overlay.style.top = `${rect.top + window.scrollY}px`;
+  overlay.style.left = `${rect.left + window.scrollX}px`;
+  overlay.style.width = `${rect.width}px`;
+  overlay.style.height = `${rect.height}px`;
+
+  // Check if label already exists in overlay
+  let label = overlay.querySelector("div") as HTMLDivElement | null;
+
+  if (!label) {
+    label = document.createElement("div");
+    label.textContent = element.tagName.toLowerCase();
+    label.style.position = "absolute";
+    label.style.top = LABEL_TOP_OFFSET;
+    label.style.left = LABEL_LEFT_OFFSET;
+    label.style.padding = "2px 8px";
+    label.style.fontSize = "11px";
+    label.style.fontWeight = isSelected ? "500" : "400";
+    label.style.color = isSelected ? "#ffffff" : "#526cff";
+    label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
+    label.style.borderRadius = "3px";
+    label.style.minWidth = "24px";
+    label.style.textAlign = "center";
+    overlay.appendChild(label);
+  }
+}
+
+/**
+ * Clear all overlays from DOM
+ */
+export function clearOverlays(overlays: HTMLDivElement[]): void {
+  overlays.forEach((overlay) => {
+    if (overlay && overlay.parentNode) {
+      overlay.remove();
+    }
+  });
+}
+
+/**
+ * Remove data-selected attribute, clear selected overlays, and reset selection state
+ */
+export function clearSelection(state: AgentState): void {
+  if (state.isInlineEditExperimentEnabled && state.selectedElementId) {
+    const elements = findElementsById(state.selectedElementId);
+    elements.forEach((el) => {
+      if (el instanceof HTMLElement) {
+        delete el.dataset.selected;
+      }
+    });
+  }
+  clearOverlays(state.selectedOverlays);
+  state.selectedOverlays = [];
+  state.selectedElementId = null;
+}
+
+/**
+ * Reposition selected overlays to match current element bounds
+ */
+export function repositionSelectedOverlays(state: AgentState): void {
+  if (!state.selectedElementId) return;
+  const elements = findElementsById(state.selectedElementId);
+  state.selectedOverlays.forEach((overlay, index) => {
+    const element = elements[index];
+    if (element) {
+      positionOverlay(overlay, element, true, state.isVisualEditMode);
+    }
+  });
+}
+
+/**
+ * Reposition hover overlays to match current element bounds
+ */
+export function repositionHoverOverlays(state: AgentState): void {
+  state.hoverOverlays.forEach((overlay, index) => {
+    const element = state.currentHighlightedElements[index];
+    if (element) {
+      positionOverlay(overlay, element, false, state.isVisualEditMode);
+    }
+  });
+}

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

@@ -0,0 +1,39 @@
+import type { ElementPosition } from "../handlers/messages/types.js";
+
+/**
+ * Calculate element position from bounding rect
+ */
+export function getElementPosition(rect: DOMRect): ElementPosition {
+  return {
+    top: rect.top,
+    left: rect.left,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height,
+    centerX: rect.left + rect.width / 2,
+    centerY: rect.top + rect.height / 2,
+  };
+}
+
+/**
+ * Check if element rect is in viewport
+ */
+export function isElementInViewport(rect: DOMRect): boolean {
+  return (
+    rect.top < window.innerHeight &&
+    rect.bottom > 0 &&
+    rect.left < window.innerWidth &&
+    rect.right > 0
+  );
+}
+
+/**
+ * Get element classes (handles both HTML and SVG)
+ */
+export function getElementClasses(element: Element): string {
+  if (element instanceof SVGElement) {
+    return (element.className as unknown as SVGAnimatedString)?.baseVal || "";
+  }
+  return element.className || "";
+}