@base44-preview/vite-plugin 0.2.22-pr.37.eb62313 → 0.2.22-pr.38.2655a87

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

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

@@ -1,108 +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
- */
-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);
-  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

@@ -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 || "";
-}