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

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