@base44/vite-plugin 1.0.1 → 1.0.2

package/src/injections/layer-dropdown/consts.ts

@@ -33,10 +33,12 @@ export const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
 
 export const DEPTH_INDENT_PX = 10;
 
-/** Chevron shown when dropdown is collapsed (click to expand) */
-export const CHEVRON_COLLAPSED = " \u25BE";
-/** Chevron shown when dropdown is expanded (click to collapse) */
-export const CHEVRON_EXPANDED = " \u25B4";
+/** SVG chevron shown when dropdown is collapsed (click to expand) */
+export const CHEVRON_COLLAPSED = `<svg width="12" height="12" viewBox="0 0 24 24" style="vertical-align:middle;margin-left:4px"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
+/** SVG chevron shown when dropdown is expanded (click to collapse) */
+export const CHEVRON_EXPANDED = `<svg width="12" height="12" viewBox="0 0 24 24" style="vertical-align:middle;margin-left:4px"><path d="M18 15l-6-6-6 6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
+
+export const CHEVRON_ATTR = "data-chevron";
 
 export const BASE_PADDING_PX = 12;
 

package/src/injections/layer-dropdown/dropdown-ui.ts

@@ -11,6 +11,7 @@ import {
   BASE_PADDING_PX,
   CHEVRON_COLLAPSED,
   CHEVRON_EXPANDED,
+  CHEVRON_ATTR,
   LAYER_DROPDOWN_ATTR,
 } from "./consts.js";
 import { applyStyles, getLayerDisplayName } from "./utils.js";
@@ -83,10 +84,16 @@ export function createDropdownElement(
 
 /** Add chevron indicator and pointer-events to the label */
 export function enhanceLabelWithChevron(label: HTMLDivElement): void {
-  const t = label.textContent ?? "";
-  if (t.endsWith(CHEVRON_COLLAPSED) || t.endsWith(CHEVRON_EXPANDED)) return;
+  if (label.querySelector(`[${CHEVRON_ATTR}]`)) return;
 
-  label.textContent = t + CHEVRON_COLLAPSED;
+  const chevron = document.createElement("span");
+  chevron.setAttribute(CHEVRON_ATTR, "true");
+  chevron.style.display = "inline-flex";
+  chevron.innerHTML = CHEVRON_COLLAPSED;
+  label.appendChild(chevron);
+
+  label.style.display = "inline-flex";
+  label.style.alignItems = "center";
   label.style.cursor = "pointer";
   label.style.userSelect = "none";
   label.style.whiteSpace = "nowrap";
@@ -190,8 +197,9 @@ export function showDropdown(
   overlay.appendChild(dropdown);
   activeDropdown = dropdown;
   activeLabel = label;
-  if (label.textContent?.endsWith(CHEVRON_COLLAPSED.trim())) {
-    label.textContent = label.textContent.slice(0, -CHEVRON_COLLAPSED.length) + CHEVRON_EXPANDED;
+  const chevronEl = label.querySelector(`[${CHEVRON_ATTR}]`);
+  if (chevronEl) {
+    chevronEl.innerHTML = CHEVRON_EXPANDED;
   }
   activeOnHoverEnd = callbacks.onHoverEnd ?? null;
 
@@ -201,8 +209,9 @@ export function showDropdown(
 
 /** Close the active dropdown and clean up listeners */
 export function closeDropdown(): void {
-  if (activeLabel?.textContent?.includes(CHEVRON_EXPANDED)) {
-    activeLabel.textContent = activeLabel.textContent.replace(CHEVRON_EXPANDED, CHEVRON_COLLAPSED);
+  const chevronEl = activeLabel?.querySelector(`[${CHEVRON_ATTR}]`);
+  if (chevronEl) {
+    chevronEl.innerHTML = CHEVRON_COLLAPSED;
   }
   activeLabel = null;
 

package/src/injections/utils.ts

@@ -1,3 +1,40 @@
+const LABEL_HEIGHT = 27;
+
+/**
+ * Positions an element-tag label relative to its highlighted overlay.
+ *
+ * Strategy (in priority order):
+ *  1. If the element is near the viewport top AND tall enough (>= 2x label height),
+ *     place the label **inside** the element at the top-left.
+ *  2. If the element is near the viewport top but too short, place the label
+ *     **below** the element.
+ *  3. Otherwise, place the label **above** the element (default).
+ *
+ * For full-width elements (spanning nearly the entire viewport), the left offset
+ * is nudged inward (6px) to prevent clipping against the viewport edge.
+ *
+ * @param label - The label div to position (style.top and style.left are set).
+ * @param rect  - The bounding client rect of the highlighted element.
+ */
+export function positionLabel(label: HTMLDivElement, rect: DOMRect): void {
+  const nearTop = rect.top < LABEL_HEIGHT;
+  const tallEnough = rect.height >= LABEL_HEIGHT * 2;
+  const isFullWidth = rect.width >= window.innerWidth - 4;
+  const edgeLeft = isFullWidth ? "8px" : "-2px";
+  const insideLeft = isFullWidth ? "8px" : "4px";
+
+  if (nearTop && tallEnough) {
+    label.style.top = "2px";
+    label.style.left = insideLeft;
+  } else if (nearTop) {
+    label.style.top = `${rect.height + 2}px`;
+    label.style.left = edgeLeft;
+  } else {
+    label.style.top = `-${LABEL_HEIGHT}px`;
+    label.style.left = edgeLeft;
+  }
+}
+
 /** Check if an element has instrumentation attributes */
 export function isInstrumentedElement(element: Element): boolean {
   const htmlEl = element as HTMLElement;

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

@@ -1,8 +1,10 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
 
+const REPOSITION_DELAY_MS = 50;
+
 export function setupVisualEditAgent() {
   // State variables (replacing React useState/useRef)
   let isVisualEditMode = false;
@@ -12,8 +14,7 @@ export function setupVisualEditAgent() {
   let selectedOverlays: HTMLDivElement[] = [];
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
-
-  const REPOSITION_DELAY_MS = 50;
+  let selectedElement: Element | null = null;
 
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
@@ -58,18 +59,19 @@ export function setupVisualEditAgent() {
       label = document.createElement("div");
       label.textContent = element.tagName.toLowerCase();
       label.style.position = "absolute";
-      label.style.top = "-27px";
       label.style.left = "-2px";
       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.backgroundColor = isSelected ? "#2563EB" : "#DBEAFE";
       label.style.borderRadius = "3px";
       label.style.minWidth = "24px";
       label.style.textAlign = "center";
       overlay.appendChild(label);
     }
+
+    positionLabel(label, rect);
   };
 
   // --- Inline edit controller ---
@@ -82,6 +84,7 @@ export function setupVisualEditAgent() {
       inlineEdit.clearSelectedMarks(selectedElementId);
       clearSelectedOverlays();
       selectedElementId = null;
+      selectedElement = null;
     },
     createSelectionOverlays: (elements, elementId) => {
       elements.forEach((el) => {
@@ -98,6 +101,7 @@ export function setupVisualEditAgent() {
     inlineEdit.clearSelectedMarks(selectedElementId);
     clearSelectedOverlays();
     selectedElementId = null;
+    selectedElement = null;
   };
 
   // Clear hover overlays
@@ -180,6 +184,7 @@ export function setupVisualEditAgent() {
     });
 
     selectedElementId = visualSelectorId || null;
+    selectedElement = element;
     clearHoverOverlays();
     notifyElementSelected(element);
 
@@ -436,10 +441,9 @@ export function setupVisualEditAgent() {
   // Handle scroll events to update popover position
   const handleScroll = () => {
     if (selectedElementId) {
-      const elements = findElementsById(selectedElementId);
-      if (elements.length > 0) {
-        const element = elements[0];
-        const rect = element!.getBoundingClientRect();
+      const element = selectedElement;
+      if (element && element.isConnected) {
+        const rect = element.getBoundingClientRect();
 
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
@@ -543,41 +547,37 @@ export function setupVisualEditAgent() {
         break;
 
       case "request-element-position":
-        if (selectedElementId) {
-          const elements = findElementsById(selectedElementId);
-          if (elements.length > 0) {
-            const element = elements[0];
-            const rect = element!.getBoundingClientRect();
-
-            const viewportHeight = window.innerHeight;
-            const viewportWidth = window.innerWidth;
-            const isInViewport =
-              rect.top < viewportHeight &&
-              rect.bottom > 0 &&
-              rect.left < viewportWidth &&
-              rect.right > 0;
-
-            const elementPosition = {
-              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,
-            };
-
-            window.parent.postMessage(
-              {
-                type: "element-position-update",
-                position: elementPosition,
-                isInViewport: isInViewport,
-                visualSelectorId: selectedElementId,
-              },
-              "*"
-            );
-          }
+        if (selectedElementId && selectedElement && selectedElement.isConnected) {
+          const rect = selectedElement.getBoundingClientRect();
+
+          const viewportHeight = window.innerHeight;
+          const viewportWidth = window.innerWidth;
+          const isInViewport =
+            rect.top < viewportHeight &&
+            rect.bottom > 0 &&
+            rect.left < viewportWidth &&
+            rect.right > 0;
+
+          const elementPosition = {
+            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,
+          };
+
+          window.parent.postMessage(
+            {
+              type: "element-position-update",
+              position: elementPosition,
+              isInViewport: isInViewport,
+              visualSelectorId: selectedElementId,
+            },
+            "*"
+          );
         }
         break;