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

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

@@ -1,135 +0,0 @@
-import type { AgentState } from "../state/agent-state.js";
-import { OutgoingMessageType } from "./messages/types.js";
-import { findElementsById } from "../../utils.js";
-import { createOverlay, positionOverlay, clearSelection } from "../ui/overlay.js";
-import { clearHoverOverlays } from "./hover-handlers.js";
-import { shouldEnterInlineEditingMode } from "../capabilities/inline-editing/index.js";
-import { handleClearInlineEditingMode, handleEnterInlineEditingMode } from "./inline-edit-handlers.js";
-import { getElementPosition, getElementClasses } from "../utils/dom-utils.js";
-
-/**
- * Handle element selection (first click)
- */
-export function handleElementSelection(
-  state: AgentState,
-  element: Element,
-  visualSelectorId: string | null
-): void {
-  if (state.currentEditingElement) {
-    handleClearInlineEditingMode(state);
-  }
-  clearSelection(state);
-
-  // Find all elements with the same ID
-  const elements = findElementsById(visualSelectorId);
-
-  if (state.isInlineEditExperimentEnabled) {
-    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 = visualSelectorId;
-
-  // Clear hover overlays
-  clearHoverOverlays(state);
-
-  // Send message to parent window with element info
-  const htmlElement = element as HTMLElement;
-  const elementData = {
-    type: OutgoingMessageType.ELEMENT_SELECTED,
-    tagName: element.tagName,
-    classes: getElementClasses(element),
-    visualSelectorId: visualSelectorId,
-    content: htmlElement.innerText,
-    dataSourceLocation: htmlElement.dataset.sourceLocation,
-    isDynamicContent: htmlElement.dataset.dynamicContent === "true",
-    linenumber: htmlElement.dataset.linenumber,
-    filename: htmlElement.dataset.filename,
-    position: getElementPosition(element.getBoundingClientRect()),
-  };
-  window.parent.postMessage(elementData, "*");
-}
-
-/**
- * Handle element click
- */
-export function handleElementClick(state: AgentState, e: MouseEvent): void {
-  if (!state.isVisualEditMode) return;
-
-  const target = e.target as Element;
-
-  // Bail out early if clicking on a contentEditable element (allow normal editing)
-  if (state.isInlineEditExperimentEnabled && target instanceof HTMLElement && target.contentEditable === "true") {
-    return;
-  }
-
-  // If currently editing, clicking outside should exit editing mode
-  if (state.currentEditingElement) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    handleClearInlineEditingMode(state);
-    return;
-  }
-
-  // Close dropdowns when clicking anywhere in iframe if a dropdown is open
-  if (state.isDropdownOpen) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-
-    window.parent.postMessage({ type: OutgoingMessageType.CLOSE_DROPDOWNS }, "*");
-    return;
-  }
-
-  // Prevent clicking on SVG path elements
-  if (target.tagName.toLowerCase() === "path") {
-    return;
-  }
-
-  // Prevent default behavior immediately when in visual edit mode
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-
-  // Support both data-source-location and data-visual-selector-id
-  const element = target.closest(
-    "[data-source-location], [data-visual-selector-id]"
-  );
-  if (!element) {
-    return;
-  }
-
-  const htmlElement = element as HTMLElement;
-  const visualSelectorId =
-    htmlElement.dataset.sourceLocation ||
-    htmlElement.dataset.visualSelectorId;
-
-  // Check if this element is already selected (second click scenario)
-  const isAlreadySelected =
-    state.selectedElementId === visualSelectorId &&
-    htmlElement.dataset.selected === "true";
-
-  if (isAlreadySelected) {
-    // Second click on already-selected element: check if it should enter inline editing
-    // Only if the experiment is enabled
-    if (state.isInlineEditExperimentEnabled && shouldEnterInlineEditingMode(htmlElement)) {
-      handleEnterInlineEditingMode(state, htmlElement);
-      return;
-    }
-  }
-
-  // First click: select the element
-  handleElementSelection(state, element, visualSelectorId || null);
-}

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,141 +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,
-} 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()),
-  };
-
-  // Send inline edit message
-  window.parent.postMessage(
-    {
-      type: OutgoingMessageType.INLINE_EDIT,
-      elementInfo,
-      originalContent,
-      newContent,
-    },
-    "*"
-  );
-
-  // 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,191 +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);
-    }
-
-    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

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

@@ -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 = message.data.specs.newInlineEditEnabled;
-  }
-}