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

package/src/injections/visual-edit-agent/capabilities/inline-editing/core.ts

@@ -1,120 +0,0 @@
-import { injectFocusOutlineCSS, removeFocusOutlineCSS } from "./styles.js";
-import { selectText, isEditableTextElement } from "./validation.js";
-
-/**
- * Callback function type for handling text input changes
- */
-type OnTextInputChange = (element: HTMLElement) => void;
-
-/**
- * Global callback that gets triggered on every input event
- * This is set by the visual-edit-agent and includes both updatePosition and reportInlineEdit
- */
-let onTextInputChangeCallback: OnTextInputChange | null = null;
-
-/**
- * Set the callback function that will be called on text input changes
- */
-export function setInlineEditCallback(callback: OnTextInputChange | null): void {
-  onTextInputChangeCallback = callback;
-}
-
-/**
- * WeakMap to track AbortControllers for each element's input listener.
- * Using WeakMap ensures no memory leaks — when an element is garbage collected,
- * its entry is automatically removed.
- */
-const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
-
-/**
- * Internal handler for the native input event
- */
-function handleInputEvent(this: HTMLElement, e: Event): void {
-  if (onTextInputChangeCallback) {
-    onTextInputChangeCallback(this);
-  }
-}
-
-/**
- * Check if an element should enter inline editing mode
- * Called when user clicks on an already-selected element
- */
-export function shouldEnterInlineEditingMode(element: Element): boolean {
-  // Must have data-selected="true"
-  if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
-    return false;
-  }
-
-  // Must pass all editability checks
-  if (!isEditableTextElement(element)) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Enable contentEditable mode on an element
- * Follows the exact flow from inlineEdit.md
- */
-export function enterInlineEditingMode(element: HTMLElement): void {
-  // Inject CSS to suppress focus outline
-  injectFocusOutlineCSS();
-
-  // Store original state
-  element.dataset.originalTextContent = element.textContent || "";
-  element.dataset.originalCursor = element.style.cursor;
-
-  // Enable contentEditable
-  element.contentEditable = "true";
-
-  // Create an AbortController to manage the input listener lifecycle
-  const abortController = new AbortController();
-  listenerAbortControllers.set(element, abortController);
-
-  // Add input event listener with AbortSignal for automatic cleanup
-  element.addEventListener("input", handleInputEvent, { signal: abortController.signal });
-
-  // Set cursor to text
-  element.style.cursor = "text";
-
-  // Select all text
-  selectText(element);
-
-  // Focus after render
-  setTimeout(() => {
-    element.focus();
-  }, 0);
-}
-
-/**
- * Disable contentEditable mode on an element
- * Reverses everything done by enterInlineEditingMode
- */
-export function clearInlineEditingMode(element: HTMLElement): void {
-  // Abort the input event listener using the stored AbortController
-  const abortController = listenerAbortControllers.get(element);
-  if (abortController) {
-    abortController.abort();
-    listenerAbortControllers.delete(element);
-  }
-
-  // If element was removed from DOM before cleanup, skip DOM operations
-  if (!element.isConnected) {
-    return;
-  }
-
-  removeFocusOutlineCSS();
-
-  // Disable contentEditable
-  element.contentEditable = "false";
-
-  // Remove stored original text content
-  delete element.dataset.originalTextContent;
-
-  // Restore original cursor
-  if (element.dataset.originalCursor !== undefined) {
-    element.style.cursor = element.dataset.originalCursor;
-    delete element.dataset.originalCursor;
-  }
-}

package/src/injections/visual-edit-agent/capabilities/inline-editing/index.ts

@@ -1,10 +0,0 @@
-export {
-  enterInlineEditingMode,
-  clearInlineEditingMode,
-  shouldEnterInlineEditingMode,
-  setInlineEditCallback,
-} from "./core.js";
-
-export { injectFocusOutlineCSS, removeFocusOutlineCSS } from "./styles.js";
-
-export { isEditableTextElement, isStaticArrayTextElement, selectText } from "./validation.js";

package/src/injections/visual-edit-agent/capabilities/inline-editing/styles.ts

@@ -1,26 +0,0 @@
-/**
- * Inject CSS to suppress the browser's default focus outline on contentEditable elements
- */
-export function injectFocusOutlineCSS(): void {
-  const existingStyle = document.getElementById("visual-edit-focus-styles");
-  if (existingStyle) return;
-
-  const style = document.createElement("style");
-  style.id = "visual-edit-focus-styles";
-  style.textContent = `
-    [data-selected="true"][contenteditable="true"]:focus {
-      outline: none !important;
-    }
-  `;
-  document.head.appendChild(style);
-}
-
-/**
- * Remove the injected focus outline CSS
- */
-export function removeFocusOutlineCSS(): void {
-  const style = document.getElementById("visual-edit-focus-styles");
-  if (style) {
-    style.remove();
-  }
-}

package/src/injections/visual-edit-agent/capabilities/inline-editing/validation.ts

@@ -1,87 +0,0 @@
-/**
- * Select all text content in an element using the Selection API
- */
-export function selectText(element: HTMLElement): void {
-  const range = document.createRange();
-  range.selectNodeContents(element);
-  const selection = window.getSelection();
-  selection?.removeAllRanges();
-  selection?.addRange(range);
-}
-
-/**
- * Check if an element is a static array text element.
- * These elements are "dynamic" (they reference item.field) but their source
- * is a compile-time static array, so they can be safely edited inline.
- */
-export function isStaticArrayTextElement(element: HTMLElement): boolean {
-  return !!element.dataset.arrField;
-}
-
-const ALLOWED_INLINE_EDIT_TAGS = [
-  "div",
-  "p",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "span",
-  "li",
-  "td",
-  "a",
-  "button",
-  "label",
-];
-
-/**
- * Structural checks shared by both regular and static-array inline editing:
- * allowed tag, non-empty text, no media children, leaf node.
- */
-function passesStructuralChecks(element: HTMLElement): boolean {
-  if (!ALLOWED_INLINE_EDIT_TAGS.includes(element.tagName.toLowerCase())) {
-    return false;
-  }
-
-  const textContent = element.textContent?.trim() || "";
-  if (textContent.length === 0) {
-    return false;
-  }
-
-  if (element.querySelector("img, video, canvas, svg") !== null) {
-    return false;
-  }
-
-  if (element.children.length > 0) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Check if an element is an editable text element
- * Based on the eligibility rules from inlineEdit.md (non-dynamic only),
- * with an exception for static array elements.
- */
-export function isEditableTextElement(element: Element): boolean {
-  if (!(element instanceof HTMLElement)) {
-    return false;
-  }
-
-  if (!passesStructuralChecks(element)) {
-    return false;
-  }
-
-  // Static array elements are editable even though they are technically "dynamic"
-  if (isStaticArrayTextElement(element)) {
-    return true;
-  }
-
-  if (element.dataset.dynamicContent === "true") {
-    return false;
-  }
-
-  return true;
-}

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

@@ -1,9 +0,0 @@
-export const INLINE_EDIT_DEBOUNCE_MS = 500;
-export const OVERLAY_TRANSITION = "all 0.1s ease-in-out";
-export const OVERLAY_Z_INDEX = "9999";
-export const SELECTED_BORDER_COLOR = "#2563EB";
-export const HOVER_BORDER_COLOR = "#95a5fc";
-export const HOVER_BACKGROUND_COLOR = "rgba(99, 102, 241, 0.05)";
-export const LABEL_TOP_OFFSET = "-27px";
-export const LABEL_LEFT_OFFSET = "-2px";
-export const REPOSITION_DELAY_MS = 50;

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

@@ -1,146 +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;
-
-  // Resolve static-array context from vite-plugin attributes (data-arr-*)
-  const arrEl = htmlElement.closest("[data-arr-variable-name]") as HTMLElement | null;
-  const staticArrayName = arrEl?.dataset?.arrVariableName || null;
-  const rawIdx = arrEl?.dataset?.arrIndex;
-  const staticArrayIndex = rawIdx != null ? parseInt(rawIdx, 10) : null;
-  const staticArrayField = htmlElement.dataset?.arrField || null;
-
-  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()),
-    staticArrayName,
-    staticArrayIndex,
-    staticArrayField,
-  };
-  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,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));
-}