@base44-preview/vite-plugin 0.2.22-pr.36.69a0b76 → 0.2.22-pr.36.8002ffd

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

@@ -47,17 +47,18 @@ 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) ---
+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 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,44 +68,90 @@ 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, …
+/** Append parents to chain with depth 0, 1, …; returns depth of selected (parents.length). */
+function appendParentsWithDepth(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
+/** Append selected element and its descendants at the given depth. */
+function appendSelfAndDescendants(
+  chain: LayerInfo[],
+  selectedElement: Element,
+  selfDepth: number
+): void {
+  chain.push(toLayerInfo(selectedElement, selfDepth));
   const descendants = getInstrumentedDescendants(
     selectedElement,
     MAX_CHILD_DEPTH
   );
-  // Assign visual depth: we need to track the instrumented nesting to set depth correctly
   assignDescendantDepths(selectedElement, descendants, 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.length > 0 ? parents[parents.length - 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;
+}
+
+/** Append 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) {
+      appendSelfAndDescendants(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 = appendParentsWithDepth(chain, parents);
+
+  const instrParent = getImmediateInstrParent(parents);
+  if (instrParent) {
+    const siblings = collectSiblings(instrParent, selectedElement);
+    appendSiblingsWithSelected(chain, siblings, selectedElement, selfDepth);
+  } else {
+    appendSelfAndDescendants(chain, selectedElement, selfDepth);
+  }
+
   return chain;
 }
 

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

@@ -140,6 +140,11 @@ export function setupVisualEditAgent() {
     return selectedOverlays[0];
   };
 
+  const unSelectElement = (): void => {
+    selectedElementId = null;
+    window.parent.postMessage({ type: "unselect-element" }, "*");
+  };
+
   // Handle mouse over event
   const handleMouseOver = (e: MouseEvent) => {
     if (!isVisualEditMode || isPopoverDragging) return;
@@ -315,10 +320,7 @@ export function setupVisualEditAgent() {
     },
     getSelectedElementId: () => selectedElementId,
     selectElement,
-    onDeselect: () => {
-      selectedElementId = null;
-      window.parent.postMessage({ type: "element-selected", visualSelectorId: null }, "*");
-    },
+    onDeselect: unSelectElement,
   });
 
   // Toggle visual edit mode