@base44-preview/vite-plugin 0.2.22-pr.36.69a0b76 → 0.2.22-pr.36.6dec368

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

@@ -15,14 +15,26 @@ 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
+  maxDepth: number,
+  startDepth?: number
 ): LayerInfo[] {
   const result: LayerInfo[] = [];
 
@@ -31,11 +43,15 @@ export function getInstrumentedDescendants(
     for (let i = 0; i < el.children.length; i++) {
       const child = el.children[i]!;
       if (isInstrumentedElement(child)) {
-        result.push({
+        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);
@@ -47,17 +63,8 @@ export function getInstrumentedDescendants(
   return result;
 }
 
-/**
- * Build the layer chain for the dropdown:
- *
- *   Parents  – up to MAX_PARENT_DEPTH instrumented ancestors, outer → inner.
- *   Current  – the selected element.
- *   Children – instrumented descendants within MAX_CHILD_DEPTH levels, DOM order.
- *
- * Each item carries a `depth` for visual indentation.
- */
-export function buildLayerChain(selectedElement: Element): LayerInfo[] {
-  // --- Parents (walk up, collect at most MAX_PARENT_DEPTH) ---
+/** 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 (
@@ -67,72 +74,89 @@ export function buildLayerChain(selectedElement: Element): LayerInfo[] {
     parents.length < MAX_PARENT_DEPTH
   ) {
     if (isInstrumentedElement(current)) {
-      parents.push({
-        element: current,
-        tagName: current.tagName.toLowerCase(),
-        selectorId: getElementSelectorId(current),
-      });
+      parents.push(toLayerInfo(current));
     }
     current = current.parentElement;
   }
-  // Reverse so outermost parent comes first
   parents.reverse();
+  return parents;
+}
 
-  // --- Build the chain with depth ---
-  const chain: LayerInfo[] = [];
-  const baseDepth = 0;
-
-  // Parents: depth 0, 1, …
+/** 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: baseDepth + i });
-  });
-
-  // Self
-  const selfDepth = parents.length;
-  chain.push({
-    element: selectedElement,
-    tagName: selectedElement.tagName.toLowerCase(),
-    selectorId: getElementSelectorId(selectedElement),
-    depth: selfDepth,
+    chain.push({ ...p, depth: i });
   });
+  return parents.length;
+}
 
-  // Children: up to MAX_CHILD_DEPTH instrumented levels below selected
+/** 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
+    MAX_CHILD_DEPTH,
+    selfDepth + 1
   );
-  // Assign visual depth: we need to track the instrumented nesting to set depth correctly
-  assignDescendantDepths(selectedElement, descendants, selfDepth + 1);
-
   chain.push(...descendants);
-  return chain;
 }
 
-/**
- * Walk the DOM tree again to assign correct visual depth to each descendant.
- * This avoids storing depth during collection and keeps the API simple.
- */
-function assignDescendantDepths(
-  root: Element,
-  descendants: LayerInfo[],
-  startDepth: number
-): void {
-  // Build a set for O(1) lookup
-  const descSet = new Set(descendants.map((d) => d.element));
-  // Map element → LayerInfo for mutation
-  const descMap = new Map(descendants.map((d) => [d.element, d]));
+/** Get the innermost instrumented parent's DOM element, or null if none. */
+function getImmediateInstrParent(parents: LayerInfo[]): Element | null {
+  return parents.at(-1)?.element ?? null;
+}
 
-  function walk(el: Element, instrDepth: number): void {
-    for (let i = 0; i < el.children.length; i++) {
-      const child = el.children[i]!;
-      if (descSet.has(child)) {
-        descMap.get(child)!.depth = startDepth + instrDepth - 1;
-        walk(child, instrDepth + 1);
-      } else {
-        walk(child, instrDepth);
-      }
+/** 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);
+  }
 
-  walk(root, 1);
+  return chain;
 }

package/src/injections/utils.ts

@@ -16,22 +16,6 @@ export function getElementSelectorId(element: Element): string | null {
   );
 }
 
-/** Find the nearest instrumented ancestor (not the element itself) */
-export function getImmediateInstrumentedParent(element: Element): Element | null {
-  let current = element.parentElement;
-  while (
-    current &&
-    current !== document.documentElement &&
-    current !== document.body
-  ) {
-    if (isInstrumentedElement(current)) {
-      return current;
-    }
-    current = current.parentElement;
-  }
-  return 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

@@ -140,6 +140,11 @@ export function setupVisualEditAgent() {
     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;
@@ -243,8 +248,8 @@ export function setupVisualEditAgent() {
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Unselect the current element
-  const unselectElement = () => {
+  // Clear the current selection
+  const clearSelection = () => {
     clearSelectedOverlays();
     selectedElementId = null;
   };
@@ -315,10 +320,7 @@ export function setupVisualEditAgent() {
     },
     getSelectedElementId: () => selectedElementId,
     selectElement,
-    onDeselect: () => {
-      selectedElementId = null;
-      window.parent.postMessage({ type: "element-selected", visualSelectorId: null }, "*");
-    },
+    onDeselect: notifyDeselection,
   });
 
   // Toggle visual edit mode
@@ -409,7 +411,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        unselectElement();
+        clearSelection();
         break;
 
       case "refresh-page":