@base44-preview/vite-plugin 0.2.27-pr.41.77be9cb → 0.2.27-pr.44.489d834

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

@@ -1,201 +0,0 @@
-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);
-    }
-
-    const hoveredElement = state.currentHighlightedElements[0];
-    if (
-      hoveredElement instanceof HTMLElement &&
-      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,
-  arrIndex?: number
-): void {
-  let elements = findElementsById(visualSelectorId);
-
-  if (elements.length === 0) {
-    return;
-  }
-
-  // If arrIndex is provided, only update the element at that array position
-  if (arrIndex != null) {
-    elements = elements.filter(
-      (el) => (el as HTMLElement).dataset.arrIndex === String(arrIndex)
-    );
-  }
-
-  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,
-          message.data.arrIndex
-        );
-      } 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

@@ -1,65 +0,0 @@
-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);
-
-        elements.forEach((el) => {
-          if (el instanceof HTMLElement) {
-            el.dataset.selected = "true";
-          }
-        });
-
-        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

@@ -1,40 +0,0 @@
-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 = true;
-  }
-}

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

@@ -1,134 +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;
-
-// Outgoing message interfaces
-
-export interface InlineEditMessage {
-  type: OutgoingMessageType.INLINE_EDIT;
-  elementInfo: {
-    tagName: string;
-    classes: string;
-    visualSelectorId: string | null;
-    content: string | null;
-    dataSourceLocation: string | undefined;
-    isDynamicContent: boolean;
-    linenumber: string | undefined;
-    filename: string | undefined;
-    position: ElementPosition;
-  };
-  originalContent: string | undefined;
-  newContent: string | null;
-  arrIndex?: string;
-  arrVariableName?: string;
-  arrField?: string;
-}
-
-// 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,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,
-  };
-}