@base44-preview/vite-plugin 0.2.27-pr.41.77be9cb → 0.2.27-pr.43.93e5e43

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

@@ -1,121 +0,0 @@
-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

@@ -1,31 +0,0 @@
-/**
- * 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

@@ -1,126 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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 || "";
-}