@base44-preview/vite-plugin 0.3.3-pr.51.d4ba9e8 → 0.3.3-pr.54.d511550

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

@@ -33,12 +33,10 @@ export const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
 
 export const DEPTH_INDENT_PX = 10;
 
-/** 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";
+/** 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";
 
 export const BASE_PADDING_PX = 12;
 

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

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

package/src/injections/unhandled-errors-handlers.ts

@@ -22,6 +22,13 @@ if (import.meta.hot) {
       suppressionTimer = null;
     }, import.meta.env.VITE_HMR_ERROR_SUPPRESSION_DELAY ?? 10000);
   });
+  import.meta.hot.on("vite:afterUpdate", () => {
+    shouldPropagateErrors = true;
+    if (suppressionTimer) {
+      clearTimeout(suppressionTimer);
+      suppressionTimer = null;
+    }
+  });
   import.meta.hot.on("vite:beforeFullReload", () => {
     shouldPropagateErrors = false;
     if (suppressionTimer) {

package/src/injections/utils.ts

@@ -1,40 +1,3 @@
-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,10 +1,8 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget } 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;
@@ -14,7 +12,8 @@ export function setupVisualEditAgent() {
   let selectedOverlays: HTMLDivElement[] = [];
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
-  let selectedElement: Element | null = null;
+
+  const REPOSITION_DELAY_MS = 50;
 
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
@@ -59,19 +58,18 @@ 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 ? "#2563EB" : "#DBEAFE";
+      label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
       label.style.borderRadius = "3px";
       label.style.minWidth = "24px";
       label.style.textAlign = "center";
       overlay.appendChild(label);
     }
-
-    positionLabel(label, rect);
   };
 
   // --- Inline edit controller ---
@@ -84,7 +82,6 @@ export function setupVisualEditAgent() {
       inlineEdit.clearSelectedMarks(selectedElementId);
       clearSelectedOverlays();
       selectedElementId = null;
-      selectedElement = null;
     },
     createSelectionOverlays: (elements, elementId) => {
       elements.forEach((el) => {
@@ -101,7 +98,6 @@ export function setupVisualEditAgent() {
     inlineEdit.clearSelectedMarks(selectedElementId);
     clearSelectedOverlays();
     selectedElementId = null;
-    selectedElement = null;
   };
 
   // Clear hover overlays
@@ -184,7 +180,6 @@ export function setupVisualEditAgent() {
     });
 
     selectedElementId = visualSelectorId || null;
-    selectedElement = element;
     clearHoverOverlays();
     notifyElementSelected(element);
 
@@ -441,9 +436,10 @@ export function setupVisualEditAgent() {
   // Handle scroll events to update popover position
   const handleScroll = () => {
     if (selectedElementId) {
-      const element = selectedElement;
-      if (element && element.isConnected) {
-        const rect = element.getBoundingClientRect();
+      const elements = findElementsById(selectedElementId);
+      if (elements.length > 0) {
+        const element = elements[0];
+        const rect = element!.getBoundingClientRect();
 
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
@@ -547,37 +543,41 @@ export function setupVisualEditAgent() {
         break;
 
       case "request-element-position":
-        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,
-            },
-            "*"
-          );
+        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,
+              },
+              "*"
+            );
+          }
         }
         break;