@base44-preview/vite-plugin 0.2.22-pr.36.d652cb1 → 0.2.22-pr.37.26664a5

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

@@ -0,0 +1,191 @@
+import type { AgentState } from "../state/agent-state.js";
+import { IncomingMessageType, OutgoingMessageType } from "./messages/types.js";
+import { findElementsById, updateElementClasses } from "../../utils.js";
+import { clearSelection, repositionSelectedOverlays, repositionHoverOverlays } from "../ui/overlay.js";
+import { clearHoverOverlays } from "./hover-handlers.js";
+import { handleClearInlineEditingMode } from "./inline-edit-handlers.js";
+import { REPOSITION_DELAY_MS } from "../constants.js";
+import { handleToggleVisualEditMode } from "./messages/toggle-visual-edit-mode.js";
+import { handleToggleInlineEditMode } from "./messages/toggle-inline-edit-mode.js";
+import { getElementPosition, isElementInViewport } from "../utils/dom-utils.js";
+
+/**
+ * Send element position update to parent
+ */
+function sendElementPositionUpdate(state: AgentState): void {
+  if (!state.selectedElementId) return;
+
+  const elements = findElementsById(state.selectedElementId);
+  const [element] = elements;
+  if (!element) return;
+
+  const rect = element.getBoundingClientRect();
+
+  window.parent.postMessage(
+    {
+      type: OutgoingMessageType.ELEMENT_POSITION_UPDATE,
+      position: getElementPosition(rect),
+      isInViewport: isElementInViewport(rect),
+      visualSelectorId: state.selectedElementId,
+    },
+    "*"
+  );
+}
+
+/**
+ * Unselect the current element
+ */
+export function unselectElement(state: AgentState): void {
+  if (state.currentEditingElement) {
+    handleClearInlineEditingMode(state);
+  }
+  clearSelection(state);
+}
+
+/**
+ * Update element classes and reposition overlays
+ */
+export function updateElementClassesAndReposition(
+  state: AgentState,
+  visualSelectorId: string,
+  classes: string
+): void {
+  const elements = findElementsById(visualSelectorId);
+  if (elements.length === 0) return;
+
+  updateElementClasses(elements, classes);
+
+  // Use a small delay to allow the browser to recalculate layout before repositioning
+  setTimeout(() => {
+    if (state.selectedElementId === visualSelectorId) {
+      repositionSelectedOverlays(state);
+    }
+
+    if (state.currentHighlightedElements.length > 0) {
+      const hoveredElement = state.currentHighlightedElements[0] as HTMLElement;
+      if (hoveredElement?.dataset?.visualSelectorId === visualSelectorId) {
+        repositionHoverOverlays(state);
+      }
+    }
+  }, REPOSITION_DELAY_MS);
+}
+
+/**
+ * Update element content by visual selector ID
+ */
+export function updateElementContent(
+  state: AgentState,
+  visualSelectorId: string,
+  content: string
+): void {
+  const elements = findElementsById(visualSelectorId);
+
+  if (elements.length === 0) {
+    return;
+  }
+
+  elements.forEach((element) => {
+    (element as HTMLElement).innerText = content;
+  });
+
+  setTimeout(() => {
+    if (state.selectedElementId === visualSelectorId) {
+      repositionSelectedOverlays(state);
+    }
+  }, REPOSITION_DELAY_MS);
+}
+
+/**
+ * Handle scroll events to update popover position
+ */
+export function handleScroll(state: AgentState): void {
+  sendElementPositionUpdate(state);
+}
+
+/**
+ * Handle window resize to reposition overlays
+ */
+export function handleResize(state: AgentState): void {
+  repositionSelectedOverlays(state);
+  repositionHoverOverlays(state);
+}
+
+/**
+ * Handle messages from parent window
+ */
+export function handleMessage(state: AgentState, event: MessageEvent): void {
+  const message = event.data;
+
+  switch (message.type as IncomingMessageType) {
+    case IncomingMessageType.TOGGLE_VISUAL_EDIT_MODE:
+      handleToggleVisualEditMode(state, message);
+      break;
+
+    case IncomingMessageType.UPDATE_CLASSES:
+      if (message.data && message.data.classes !== undefined) {
+        updateElementClassesAndReposition(
+          state,
+          message.data.visualSelectorId,
+          message.data.classes
+        );
+      } else {
+        console.warn(
+          "[VisualEditAgent] Invalid update-classes message:",
+          message
+        );
+      }
+      break;
+
+    case IncomingMessageType.UNSELECT_ELEMENT:
+      unselectElement(state);
+      break;
+
+    case IncomingMessageType.REFRESH_PAGE:
+      window.location.reload();
+      break;
+
+    case IncomingMessageType.UPDATE_CONTENT:
+      if (message.data && message.data.content !== undefined) {
+        updateElementContent(
+          state,
+          message.data.visualSelectorId,
+          message.data.content
+        );
+      } else {
+        console.warn(
+          "[VisualEditAgent] Invalid update-content message:",
+          message
+        );
+      }
+      break;
+
+    case IncomingMessageType.TOGGLE_INLINE_EDIT_MODE:
+      handleToggleInlineEditMode(state, message);
+      break;
+
+    case IncomingMessageType.REQUEST_ELEMENT_POSITION:
+      sendElementPositionUpdate(state);
+      break;
+
+    case IncomingMessageType.POPOVER_DRAG_STATE:
+      if (message.data && message.data.isDragging !== undefined) {
+        state.isPopoverDragging = message.data.isDragging;
+        if (message.data.isDragging) {
+          clearHoverOverlays(state);
+        }
+      }
+      break;
+
+    case IncomingMessageType.DROPDOWN_STATE:
+      if (message.data && message.data.isOpen !== undefined) {
+        state.isDropdownOpen = message.data.isOpen;
+        if (message.data.isOpen) {
+          clearHoverOverlays(state);
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+}

package/src/injections/visual-edit-agent/handlers/messages/toggle-inline-edit-mode.ts

@@ -0,0 +1,70 @@
+import type { AgentState } from "../../state/agent-state.js";
+import type { ToggleInlineEditModeMessage } from "./types.js";
+import { findElementsById } from "../../../utils.js";
+import { shouldEnterInlineEditingMode } from "../../capabilities/inline-editing/index.js";
+import { handleEnterInlineEditingMode, handleClearInlineEditingMode } from "../inline-edit-handlers.js";
+import { clearSelection } from "../../ui/overlay.js";
+import { createOverlay, positionOverlay } from "../../ui/overlay.js";
+
+/**
+ * Handle toggle-inline-edit-mode message (parent-initiated)
+ */
+export function handleToggleInlineEditMode(
+  state: AgentState,
+  message: ToggleInlineEditModeMessage
+): void {
+  if (!state.isInlineEditExperimentEnabled) {
+    return;
+  }
+
+  if (!message.data || !message.data.dataSourceLocation) {
+    return;
+  }
+
+  const elements = findElementsById(message.data.dataSourceLocation);
+  if (elements.length === 0 || !(elements[0] instanceof HTMLElement)) {
+    return;
+  }
+
+  const element = elements[0];
+
+  if (message.data.inlineEditingMode) {
+    // Enable inline editing (only for non-dynamic text elements)
+    if (shouldEnterInlineEditingMode(element)) {
+      // Select the element first if not already selected
+      if (state.selectedElementId !== message.data.dataSourceLocation) {
+        // Clear any existing selection
+        if (state.currentEditingElement) {
+          handleClearInlineEditingMode(state);
+        }
+        clearSelection(state);
+
+        // Find all elements with the same ID
+        const elements = findElementsById(message.data.dataSourceLocation);
+
+        // Mark elements as selected
+        elements.forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.dataset.selected = "true";
+          }
+        });
+
+        // Create selected overlays for all matching elements
+        elements.forEach((el) => {
+          const overlay = createOverlay(true);
+          document.body.appendChild(overlay);
+          state.selectedOverlays.push(overlay);
+          positionOverlay(overlay, el, true, state.isVisualEditMode);
+        });
+
+        state.selectedElementId = message.data.dataSourceLocation;
+      }
+      handleEnterInlineEditingMode(state, element);
+    }
+  } else {
+    // Disable inline editing
+    if (state.currentEditingElement === element) {
+      handleClearInlineEditingMode(state);
+    }
+  }
+}

package/src/injections/visual-edit-agent/handlers/messages/toggle-visual-edit-mode.ts

@@ -0,0 +1,40 @@
+import type { AgentState } from "../../state/agent-state.js";
+import type { ToggleVisualEditModeMessage } from "./types.js";
+import { clearSelection } from "../../ui/overlay.js";
+import { clearHoverOverlays } from "../hover-handlers.js";
+import { handleClearInlineEditingMode } from "../inline-edit-handlers.js";
+
+/**
+ * Toggle visual edit mode on/off
+ */
+export function toggleVisualEditMode(state: AgentState, isEnabled: boolean): void {
+  state.isVisualEditMode = isEnabled;
+
+  if (!isEnabled) {
+    if (state.currentEditingElement) {
+      handleClearInlineEditingMode(state);
+    }
+
+    clearHoverOverlays(state);
+    clearSelection(state);
+    state.currentHighlightedElements = [];
+    document.body.style.cursor = "default";
+  } else {
+    document.body.style.cursor = "crosshair";
+  }
+}
+
+/**
+ * Handle toggle-visual-edit-mode message
+ */
+export function handleToggleVisualEditMode(
+  state: AgentState,
+  message: ToggleVisualEditModeMessage
+): void {
+  toggleVisualEditMode(state, message.data.enabled);
+  
+  // Update inline edit experiment flag if provided
+  if (message.data.specs?.newInlineEditEnabled !== undefined) {
+    state.isInlineEditExperimentEnabled = message.data.specs.newInlineEditEnabled;
+  }
+}

package/src/injections/visual-edit-agent/handlers/messages/types.ts

@@ -0,0 +1,112 @@
+/**
+ * Message types and interfaces for parent-iframe communication
+ */
+
+// Incoming message types (from parent)
+export enum IncomingMessageType {
+  TOGGLE_VISUAL_EDIT_MODE = "toggle-visual-edit-mode",
+  UPDATE_CLASSES = "update-classes",
+  UPDATE_CONTENT = "update-content",
+  UNSELECT_ELEMENT = "unselect-element",
+  REFRESH_PAGE = "refresh-page",
+  TOGGLE_INLINE_EDIT_MODE = "toggle-inline-edit-mode",
+  REQUEST_ELEMENT_POSITION = "request-element-position",
+  POPOVER_DRAG_STATE = "popover-drag-state",
+  DROPDOWN_STATE = "dropdown-state",
+}
+
+// Outgoing message types (to parent)
+export enum OutgoingMessageType {
+  VISUAL_EDIT_AGENT_READY = "visual-edit-agent-ready",
+  ELEMENT_SELECTED = "element-selected",
+  ELEMENT_POSITION_UPDATE = "element-position-update",
+  CONTENT_EDITING_STARTED = "content-editing-started",
+  INLINE_EDIT = "inline-edit",
+  CONTENT_EDITING_ENDED = "content-editing-ended",
+  CLOSE_DROPDOWNS = "close-dropdowns",
+}
+
+// Message interfaces
+export interface ToggleVisualEditModeMessage {
+  type: IncomingMessageType.TOGGLE_VISUAL_EDIT_MODE;
+  data: {
+    enabled: boolean;
+    specs?: {
+      newInlineEditEnabled?: boolean;
+    };
+  };
+}
+
+export interface UpdateClassesMessage {
+  type: IncomingMessageType.UPDATE_CLASSES;
+  data: {
+    visualSelectorId: string;
+    classes: string;
+  };
+}
+
+export interface UpdateContentMessage {
+  type: IncomingMessageType.UPDATE_CONTENT;
+  data: {
+    visualSelectorId: string;
+    content: string;
+  };
+}
+
+export interface UnselectElementMessage {
+  type: IncomingMessageType.UNSELECT_ELEMENT;
+}
+
+export interface RefreshPageMessage {
+  type: IncomingMessageType.REFRESH_PAGE;
+}
+
+export interface ToggleInlineEditModeMessage {
+  type: IncomingMessageType.TOGGLE_INLINE_EDIT_MODE;
+  data: {
+    dataSourceLocation: string;
+    inlineEditingMode: boolean;
+  };
+}
+
+export interface RequestElementPositionMessage {
+  type: IncomingMessageType.REQUEST_ELEMENT_POSITION;
+}
+
+export interface PopoverDragStateMessage {
+  type: IncomingMessageType.POPOVER_DRAG_STATE;
+  data: {
+    isDragging: boolean;
+  };
+}
+
+export interface DropdownStateMessage {
+  type: IncomingMessageType.DROPDOWN_STATE;
+  data: {
+    isOpen: boolean;
+  };
+}
+
+// Union type for all incoming messages
+export type IncomingMessage =
+  | ToggleVisualEditModeMessage
+  | UpdateClassesMessage
+  | UpdateContentMessage
+  | UnselectElementMessage
+  | RefreshPageMessage
+  | ToggleInlineEditModeMessage
+  | RequestElementPositionMessage
+  | PopoverDragStateMessage
+  | DropdownStateMessage;
+
+// Element position interface (used in multiple messages)
+export interface ElementPosition {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+  centerX: number;
+  centerY: number;
+}

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

@@ -0,0 +1,120 @@
+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) {
+      rafHandle = requestAnimationFrame(() => {
+        rafHandle = null;
+        onLayoutChange();
+      });
+    }
+  });
+}
+
+/**
+ * Setup keyboard event protection
+ */
+function setupKeyboardProtection(): void {
+  document.addEventListener("keydown", (e: KeyboardEvent) => {
+    if (e.target instanceof HTMLElement && e.target.contentEditable === "true") {
+      // Don't report keyboard events during inline editing
+      return;
+    }
+    // Forward other keyboard events to parent if needed
+  }, true);
+}
+
+/**
+ * Setup event listeners
+ */
+function setupEventListeners(state: ReturnType<typeof createAgentState>): void {
+  // Message handling
+  window.addEventListener("message", (e) => handleMessage(state, e));
+
+  // Scroll handling
+  window.addEventListener("scroll", () => handleScroll(state), true);
+  document.addEventListener("scroll", () => handleScroll(state), true);
+
+  // Resize handling
+  window.addEventListener("resize", () => handleResize(state));
+  window.addEventListener("scroll", () => handleResize(state));
+
+  // Click handling
+  document.addEventListener("click", (e) => handleElementClick(state, e), true);
+
+  // Hover handling
+  document.addEventListener("mouseover", (e) => handleMouseOver(state, e));
+  document.addEventListener("mouseout", () => handleMouseOut(state));
+}
+
+/**
+ * Main setup function for visual edit agent
+ */
+export function setupVisualEditAgent(): void {
+  const state = createAgentState();
+  initializeElementIds();
+  setupInlineEditCallback(state);
+  setupKeyboardProtection();
+  setupEventListeners(state);
+
+  // Create and start mutation observer
+  const mutationObserver = createLayoutObserver(() => handleResize(state));
+  mutationObserver.observe(document.body, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+    attributeFilter: ["style", "class", "width", "height"],
+  });
+
+  // Send ready message to parent
+  window.parent.postMessage({ type: OutgoingMessageType.VISUAL_EDIT_AGENT_READY }, "*");
+}

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,123 @@
+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;
+
+  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.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);
+    }
+  });
+}