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

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

@@ -1,78 +0,0 @@
-import type { AgentState } from "../state/agent-state.js";
-import { findElementsById } from "../../utils.js";
-import { createOverlay, positionOverlay, clearOverlays } from "../ui/overlay.js";
-
-/**
- * Clear hover overlays
- */
-export function clearHoverOverlays(state: AgentState): void {
-  clearOverlays(state.hoverOverlays);
-  state.hoverOverlays = [];
-  state.currentHighlightedElements = [];
-}
-
-/**
- * Handle mouse over event
- */
-export function handleMouseOver(state: AgentState, e: MouseEvent): void {
-  if (!state.isVisualEditMode || state.isPopoverDragging || state.currentEditingElement) return;
-
-  const target = e.target as Element;
-
-  // Prevent hover effects when a dropdown is open
-  if (state.isDropdownOpen) {
-    clearHoverOverlays(state);
-    return;
-  }
-
-  // Prevent hover effects on SVG path elements
-  if (target.tagName.toLowerCase() === "path") {
-    clearHoverOverlays(state);
-    return;
-  }
-
-  // Support both data-source-location and data-visual-selector-id
-  const element = target.closest(
-    "[data-source-location], [data-visual-selector-id]"
-  );
-  if (!element) {
-    clearHoverOverlays(state);
-    return;
-  }
-
-  // Prefer data-source-location, fallback to data-visual-selector-id
-  const htmlElement = element as HTMLElement;
-  const selectorId =
-    htmlElement.dataset.sourceLocation ||
-    htmlElement.dataset.visualSelectorId;
-
-  // Skip if this element is already selected
-  if (state.selectedElementId === selectorId) {
-    clearHoverOverlays(state);
-    return;
-  }
-
-  // Find all elements with the same ID
-  const elements = findElementsById(selectorId || null);
-
-  // Clear previous hover overlays
-  clearHoverOverlays(state);
-
-  // Create overlays for all matching elements
-  elements.forEach((el) => {
-    const overlay = createOverlay(false);
-    document.body.appendChild(overlay);
-    state.hoverOverlays.push(overlay);
-    positionOverlay(overlay, el, false, state.isVisualEditMode);
-  });
-
-  state.currentHighlightedElements = elements;
-}
-
-/**
- * Handle mouse out event
- */
-export function handleMouseOut(state: AgentState): void {
-  if (state.isPopoverDragging || state.currentEditingElement) return;
-  clearHoverOverlays(state);
-}

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

@@ -1,146 +0,0 @@
-import type { AgentState } from "../state/agent-state.js";
-import { OutgoingMessageType } from "./messages/types.js";
-import { repositionSelectedOverlays } from "../ui/overlay.js";
-import {
-  enterInlineEditingMode,
-  clearInlineEditingMode,
-  setInlineEditCallback,
-  isStaticArrayTextElement,
-} from "../capabilities/inline-editing/index.js";
-import { INLINE_EDIT_DEBOUNCE_MS } from "../constants.js";
-import { getElementPosition, getElementClasses } from "../utils/dom-utils.js";
-
-/**
- * Enter inline editing mode
- */
-export function handleEnterInlineEditingMode(state: AgentState, element: HTMLElement): void {
-  state.currentEditingElement = element;
-
-  // Hide overlays during editing
-  state.selectedOverlays.forEach((overlay) => {
-    overlay.style.display = "none";
-  });
-
-  // Enter inline editing mode (from capabilities/inline-editing)
-  enterInlineEditingMode(element);
-
-  // Notify parent
-  window.parent.postMessage(
-    {
-      type: OutgoingMessageType.CONTENT_EDITING_STARTED,
-      visualSelectorId: state.selectedElementId,
-    },
-    "*"
-  );
-}
-
-/**
- * Clear inline editing mode
- */
-export function handleClearInlineEditingMode(state: AgentState): void {
-  if (!state.currentEditingElement) return;
-
-  // Cancel any pending debounced edit — originalTextContent will be deleted below
-  if (state.debouncedSendTimeout) {
-    clearTimeout(state.debouncedSendTimeout);
-    state.debouncedSendTimeout = null;
-  }
-
-  const element = state.currentEditingElement;
-
-  // Clear inline editing mode (from capabilities/inline-editing)
-  clearInlineEditingMode(element);
-
-  // Show overlays again
-  state.selectedOverlays.forEach((overlay) => {
-    overlay.style.display = "";
-  });
-
-  repositionSelectedOverlays(state);
-
-  // Notify parent that editing ended
-  window.parent.postMessage(
-    {
-      type: OutgoingMessageType.CONTENT_EDITING_ENDED,
-      visualSelectorId: state.selectedElementId,
-    },
-    "*"
-  );
-
-  state.currentEditingElement = null;
-}
-
-/**
- * Report inline edit to parent
- */
-function reportInlineEdit(state: AgentState, element: HTMLElement): void {
-  const originalContent = element.dataset.originalTextContent;
-  const newContent = element.textContent;
-
-  const elementInfo = {
-    tagName: element.tagName,
-    classes: getElementClasses(element),
-    visualSelectorId: state.selectedElementId,
-    content: newContent,
-    dataSourceLocation: element.dataset.sourceLocation,
-    isDynamicContent: element.dataset.dynamicContent === "true",
-    linenumber: element.dataset.linenumber,
-    filename: element.dataset.filename,
-    position: getElementPosition(element.getBoundingClientRect()),
-  };
-
-  const message: Record<string, unknown> = {
-    type: OutgoingMessageType.INLINE_EDIT,
-    elementInfo,
-    originalContent,
-    newContent,
-  };
-
-  if (isStaticArrayTextElement(element)) {
-    message.arrIndex = element.dataset.arrIndex;
-    message.arrVariableName = element.dataset.arrVariableName;
-    message.arrField = element.dataset.arrField;
-  }
-
-  window.parent.postMessage(message, "*");
-
-  // Update baseline for next edit
-  element.dataset.originalTextContent = newContent || "";
-}
-
-/**
- * Debounced function to send inline edit messages
- * 
- * Intentionally overwrites the previous timeout on each keystroke — this is the
- * correct debounce behavior. We only send ONE message 500ms after the user stops
- * typing, containing the final text. Intermediate keystrokes are not sent to avoid
- * flooding the parent with dozens of messages per second.
- */
-function debouncedSendInlineEditMessage(state: AgentState, element: HTMLElement): void {
-  // Clear any existing timeout
-  if (state.debouncedSendTimeout) {
-    clearTimeout(state.debouncedSendTimeout);
-  }
-
-  // Set new timeout
-  state.debouncedSendTimeout = setTimeout(() => {
-    reportInlineEdit(state, element);
-  }, INLINE_EDIT_DEBOUNCE_MS);
-}
-
-/**
- * Callback for text input changes (combines updatePosition and reportInlineEdit)
- */
-function createTextInputChangeCallback(state: AgentState) {
-  return (element: HTMLElement) => {
-    repositionSelectedOverlays(state);
-    debouncedSendInlineEditMessage(state, element);
-  };
-}
-
-/**
- * Setup inline edit callback
- */
-export function setupInlineEditCallback(state: AgentState): void {
-  setInlineEditCallback(createTextInputChangeCallback(state));
-}

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