@base44-preview/vite-plugin 0.2.23-pr.40.744483e → 0.2.24-pr.36.31362a5

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

@@ -0,0 +1,162 @@
+/** DOM utilities for the layer-dropdown module */
+
+import { isInstrumentedElement, getElementSelectorId } from "../utils.js";
+import { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from "./consts.js";
+
+import type { LayerInfo } from "./types.js";
+
+/** Apply a style map to an element */
+export function applyStyles(element: HTMLElement, styles: Record<string, string>): void {
+  Object.assign(element.style, styles);
+}
+
+/** Display name for a layer — just the real tag name */
+export function getLayerDisplayName(layer: LayerInfo): string {
+  return layer.tagName;
+}
+
+function toLayerInfo(element: Element, depth?: number): LayerInfo {
+  const info: LayerInfo = {
+    element,
+    tagName: element.tagName.toLowerCase(),
+    selectorId: getElementSelectorId(element),
+  };
+  if (depth !== undefined) info.depth = depth;
+  return info;
+}
+
+/**
+ * Collect instrumented descendants up to `maxDepth` instrumented nesting levels.
+ * Non-instrumented wrappers are walked through without counting toward depth.
+ * Results are in DOM order.
+ * When `startDepth` is provided, assigns `depth` to each item during collection.
+ */
+export function getInstrumentedDescendants(
+  parent: Element,
+  maxDepth: number,
+  startDepth?: number
+): LayerInfo[] {
+  const result: LayerInfo[] = [];
+
+  function walk(el: Element, instrDepth: number): void {
+    if (instrDepth > maxDepth) return;
+    for (let i = 0; i < el.children.length; i++) {
+      const child = el.children[i]!;
+      if (isInstrumentedElement(child)) {
+        const info: LayerInfo = {
+          element: child,
+          tagName: child.tagName.toLowerCase(),
+          selectorId: getElementSelectorId(child),
+        };
+        if (startDepth !== undefined) {
+          info.depth = startDepth + instrDepth - 1;
+        }
+        result.push(info);
+        walk(child, instrDepth + 1);
+      } else {
+        walk(child, instrDepth);
+      }
+    }
+  }
+
+  walk(parent, 1);
+  return result;
+}
+
+/** Collect instrumented ancestors from selected element up to MAX_PARENT_DEPTH (outermost first). */
+function collectInstrumentedParents(selectedElement: Element): LayerInfo[] {
+  const parents: LayerInfo[] = [];
+  let current = selectedElement.parentElement;
+  while (
+    current &&
+    current !== document.documentElement &&
+    current !== document.body &&
+    parents.length < MAX_PARENT_DEPTH
+  ) {
+    if (isInstrumentedElement(current)) {
+      parents.push(toLayerInfo(current));
+    }
+    current = current.parentElement;
+  }
+  parents.reverse();
+  return parents;
+}
+
+/** Add parents to chain with depth 0, 1, …; returns depth of selected (parents.length). */
+function addParentsToChain(chain: LayerInfo[], parents: LayerInfo[]): number {
+  parents.forEach((p, i) => {
+    chain.push({ ...p, depth: i });
+  });
+  return parents.length;
+}
+
+/** Add selected element and its descendants at the given depth. */
+function addSelfAndDescendantsToChain(
+  chain: LayerInfo[],
+  selectedElement: Element,
+  selfDepth: number
+): void {
+  chain.push(toLayerInfo(selectedElement, selfDepth));
+  const descendants = getInstrumentedDescendants(
+    selectedElement,
+    MAX_CHILD_DEPTH,
+    selfDepth + 1
+  );
+  chain.push(...descendants);
+}
+
+/** Get the innermost instrumented parent's DOM element, or null if none. */
+function getImmediateInstrParent(parents: LayerInfo[]): Element | null {
+  return parents.at(-1)?.element ?? null;
+}
+
+/** Collect instrumented siblings of the selected element from its parent (DOM order). */
+function collectSiblings(parent: Element, selectedElement: Element): LayerInfo[] {
+  const siblings = getInstrumentedDescendants(parent, 1);
+  if (!siblings.some((s) => s.element === selectedElement)) {
+    siblings.push(toLayerInfo(selectedElement));
+  }
+  return siblings;
+}
+
+/** Add siblings at selfDepth, expanding children only for the selected element. */
+function appendSiblingsWithSelected(
+  chain: LayerInfo[],
+  siblings: LayerInfo[],
+  selectedElement: Element,
+  selfDepth: number
+): void {
+  for (const sibling of siblings) {
+    if (sibling.element === selectedElement) {
+      addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);
+    } else {
+      chain.push({ ...sibling, depth: selfDepth });
+    }
+  }
+}
+
+/**
+ * Build the layer chain for the dropdown:
+ *
+ *   Parents  – up to MAX_PARENT_DEPTH instrumented ancestors, outer → inner.
+ *   Siblings – instrumented children of the immediate parent, at the same depth.
+ *   Current  – the selected element (highlighted), with children expanded.
+ *   Children – instrumented descendants within MAX_CHILD_DEPTH levels, DOM order.
+ *
+ * Each item carries a `depth` for visual indentation.
+ */
+export function buildLayerChain(selectedElement: Element): LayerInfo[] {
+  const parents = collectInstrumentedParents(selectedElement);
+  const chain: LayerInfo[] = [];
+  const selfDepth = addParentsToChain(chain, parents);
+
+  const instrParent = getImmediateInstrParent(parents);
+  if (instrParent) {
+    const siblings = collectSiblings(instrParent, selectedElement);
+    appendSiblingsWithSelected(chain, siblings, selectedElement, selfDepth);
+  } else {
+    addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);
+  }
+
+  return chain;
+}

package/src/injections/utils.ts

@@ -1,3 +1,21 @@
+/** Check if an element has instrumentation attributes */
+export function isInstrumentedElement(element: Element): boolean {
+  const htmlEl = element as HTMLElement;
+  return !!(
+    htmlEl.dataset?.sourceLocation || htmlEl.dataset?.visualSelectorId
+  );
+}
+
+/** Get the selector ID from an element's data attributes (prefers source-location) */
+export function getElementSelectorId(element: Element): string | null {
+  const htmlEl = element as HTMLElement;
+  return (
+    htmlEl.dataset?.sourceLocation ||
+    htmlEl.dataset?.visualSelectorId ||
+    null
+  );
+}
+
 /** Find elements by ID - first try data-source-location, fallback to data-visual-selector-id */
 export function findElementsById(id: string | null): Element[] {
   if (!id) return [];

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

@@ -1,4 +1,6 @@
-import { findElementsById, updateElementClasses } from "./utils.js";
+import { findElementsById, updateElementClasses, getElementSelectorId } from "./utils.js";
+import { createLayerController } from "./layer-dropdown/controller.js";
+import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 
 export function setupVisualEditAgent() {
   // State variables (replacing React useState/useRef)
@@ -78,6 +80,75 @@ export function setupVisualEditAgent() {
     currentHighlightedElements = [];
   };
 
+  const clearSelectedOverlays = () => {
+    selectedOverlays.forEach((overlay) => {
+      if (overlay && overlay.parentNode) {
+        overlay.remove();
+      }
+    });
+    selectedOverlays = [];
+  };
+
+  const TEXT_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'];
+
+  const notifyElementSelected = (element: Element) => {
+    const htmlElement = element as HTMLElement;
+    const rect = element.getBoundingClientRect();
+    const svgElement = element as SVGElement;
+    const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
+    window.parent.postMessage({
+      type: "element-selected",
+      tagName: element.tagName,
+      classes:
+        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
+        element.className ||
+        "",
+      visualSelectorId: getElementSelectorId(element),
+      content: isTextElement ? htmlElement.innerText : undefined,
+      dataSourceLocation: htmlElement.dataset.sourceLocation,
+      isDynamicContent: htmlElement.dataset.dynamicContent === "true",
+      linenumber: htmlElement.dataset.linenumber,
+      filename: htmlElement.dataset.filename,
+      position: {
+        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,
+      },
+      isTextElement,
+    }, "*");
+  };
+
+  // Select an element: create overlays, update state, notify parent
+  const selectElement = (element: Element): HTMLDivElement | undefined => {
+    const visualSelectorId = getElementSelectorId(element);
+
+    clearSelectedOverlays();
+
+    const elements = findElementsById(visualSelectorId || null);
+    elements.forEach((el) => {
+      const overlay = createOverlay(true);
+      document.body.appendChild(overlay);
+      selectedOverlays.push(overlay);
+      positionOverlay(overlay, el, true);
+    });
+
+    selectedElementId = visualSelectorId || null;
+    clearHoverOverlays();
+    notifyElementSelected(element);
+
+    return selectedOverlays[0];
+  };
+
+  const notifyDeselection = (): void => {
+    selectedElementId = null;
+    window.parent.postMessage({ type: "unselect-element" }, "*");
+  };
+
   // Handle mouse over event
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
@@ -146,6 +217,9 @@ export function setupVisualEditAgent() {
 
     const target = e.target as Element;
 
+    // Let layer dropdown clicks pass through without interference
+    if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;
+
     // Close dropdowns when clicking anywhere in iframe if a dropdown is open
     if (isDropdownOpen) {
       e.preventDefault();
@@ -174,79 +248,13 @@ export function setupVisualEditAgent() {
       return;
     }
 
-    const htmlElement = element as HTMLElement;
-    const visualSelectorId =
-      htmlElement.dataset.sourceLocation ||
-      htmlElement.dataset.visualSelectorId;
-
-    // Clear any existing selected overlays
-    selectedOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    selectedOverlays = [];
-
-    // Find all elements with the same ID
-    const elements = findElementsById(visualSelectorId || null);
-
-    // Create selected overlays for all matching elements
-    elements.forEach((el) => {
-      const overlay = createOverlay(true);
-      document.body.appendChild(overlay);
-      selectedOverlays.push(overlay);
-      positionOverlay(overlay, el, true);
-    });
-
-    selectedElementId = visualSelectorId || null;
-
-    // Clear hover overlays
-    clearHoverOverlays();
-
-    // Calculate element position for popover positioning
-    const rect = element.getBoundingClientRect();
-    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,
-    };
-
-    const isTextElement = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'].includes(element.tagName?.toLowerCase())
-
-    // Send message to parent window with element info including position
-    const svgElement = element as SVGElement;
-    const elementData = {
-      type: "element-selected",
-      tagName: element.tagName,
-      classes:
-        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-        element.className ||
-        "",
-      visualSelectorId: visualSelectorId,
-      content: isTextElement ? (element as HTMLElement).innerText : undefined,
-      dataSourceLocation: htmlElement.dataset.sourceLocation,
-      isDynamicContent: htmlElement.dataset.dynamicContent === "true",
-      linenumber: htmlElement.dataset.linenumber,
-      filename: htmlElement.dataset.filename,
-      position: elementPosition,
-      isTextElement: isTextElement,
-    };
-    window.parent.postMessage(elementData, "*");
+    const selectedOverlay = selectElement(element);
+    layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Unselect the current element
-  const unselectElement = () => {
-    selectedOverlays.forEach((overlay) => {
-      if (overlay && overlay.parentNode) {
-        overlay.remove();
-      }
-    });
-    selectedOverlays = [];
+  // Clear the current selection
+  const clearSelection = () => {
+    clearSelectedOverlays();
     selectedElementId = null;
   };
 
@@ -305,19 +313,28 @@ export function setupVisualEditAgent() {
     }, 50);
   };
 
+  // --- Layer dropdown controller ---
+  const layerController = createLayerController({
+    createPreviewOverlay: (element: Element) => {
+      const overlay = createOverlay(false);
+      overlay.style.zIndex = "9998";
+      document.body.appendChild(overlay);
+      positionOverlay(overlay, element);
+      return overlay;
+    },
+    getSelectedElementId: () => selectedElementId,
+    selectElement,
+    onDeselect: notifyDeselection,
+  });
+
   // Toggle visual edit mode
   const toggleVisualEditMode = (isEnabled: boolean) => {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      layerController.cleanup();
       clearHoverOverlays();
-
-      selectedOverlays.forEach((overlay) => {
-        if (overlay && overlay.parentNode) {
-          overlay.remove();
-        }
-      });
-      selectedOverlays = [];
+      clearSelectedOverlays();
 
       currentHighlightedElements = [];
       selectedElementId = null;
@@ -398,7 +415,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        unselectElement();
+        clearSelection();
         break;
 
       case "refresh-page":