@base44-preview/vite-plugin 0.2.22-pr.36.425440e → 0.2.22-pr.36.6dec368

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

@@ -8,25 +8,24 @@ import {
   DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT,
   DROPDOWN_ITEM_HOVER_BG,
   DEPTH_INDENT_PX,
-  LABEL_CHEVRON,
-  LABEL_CHEVRON_OPEN,
+  BASE_PADDING_PX,
+  CHEVRON_COLLAPSED,
+  CHEVRON_EXPANDED,
   LAYER_DROPDOWN_ATTR,
 } from "./consts.js";
 import { applyStyles, getLayerDisplayName } from "./utils.js";
-import type { LayerInfo, OnLayerSelect, OnLayerHover, OnLayerHoverEnd } from "./types.js";
+import type { LayerInfo, DropdownCallbacks } from "./types.js";
 
 let activeDropdown: HTMLDivElement | null = null;
 let activeLabel: HTMLDivElement | null = null;
 let outsideMousedownHandler: ((e: MouseEvent) => void) | null = null;
-let activeOnHoverEnd: OnLayerHoverEnd | null = null;
+let activeOnHoverEnd: (() => void) | null = null;
 let activeKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
 
 function createDropdownItem(
   layer: LayerInfo,
   isActive: boolean,
-  onSelect: OnLayerSelect,
-  onHover?: OnLayerHover,
-  onHoverEnd?: OnLayerHoverEnd
+  { onSelect, onHover, onHoverEnd }: DropdownCallbacks
 ): HTMLDivElement {
   const item = document.createElement("div");
   item.textContent = getLayerDisplayName(layer);
@@ -34,7 +33,7 @@ function createDropdownItem(
 
   const depth = layer.depth ?? 0;
   if (depth > 0) {
-    item.style.paddingLeft = `${12 + depth * DEPTH_INDENT_PX}px`;
+    item.style.paddingLeft = `${BASE_PADDING_PX + depth * DEPTH_INDENT_PX}px`;
   }
 
   if (isActive) {
@@ -66,9 +65,7 @@ function createDropdownItem(
 export function createDropdownElement(
   layers: LayerInfo[],
   currentSelectorId: string | null,
-  onSelect: OnLayerSelect,
-  onHover?: OnLayerHover,
-  onHoverEnd?: OnLayerHoverEnd
+  callbacks: DropdownCallbacks
 ): HTMLDivElement {
   const container = document.createElement("div");
   container.setAttribute(LAYER_DROPDOWN_ATTR, "true");
@@ -76,7 +73,7 @@ export function createDropdownElement(
 
   layers.forEach((layer) => {
     const isActive = layer.selectorId === currentSelectorId;
-    container.appendChild(createDropdownItem(layer, isActive, onSelect, onHover, onHoverEnd));
+    container.appendChild(createDropdownItem(layer, isActive, callbacks));
   });
 
   return container;
@@ -85,11 +82,12 @@ 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(LABEL_CHEVRON) || t.endsWith(LABEL_CHEVRON_OPEN)) return;
+  if (t.endsWith(CHEVRON_COLLAPSED) || t.endsWith(CHEVRON_EXPANDED)) return;
 
-  label.textContent = t + LABEL_CHEVRON;
+  label.textContent = t + CHEVRON_COLLAPSED;
   label.style.cursor = "pointer";
   label.style.userSelect = "none";
+  label.style.whiteSpace = "nowrap";
   label.style.pointerEvents = "auto";
   label.setAttribute(LAYER_DROPDOWN_ATTR, "true");
 }
@@ -98,9 +96,7 @@ function setupKeyboardNavigation(
   dropdown: HTMLDivElement,
   layers: LayerInfo[],
   currentSelectorId: string | null,
-  onSelect: OnLayerSelect,
-  onHover?: OnLayerHover,
-  onHoverEnd?: OnLayerHoverEnd
+  { onSelect, onHover, onHoverEnd }: DropdownCallbacks
 ): void {
   const items = Array.from(dropdown.children) as HTMLDivElement[];
   let focusedIndex = layers.findIndex((l) => l.selectorId === currentSelectorId);
@@ -163,22 +159,21 @@ export function showDropdown(
   label: HTMLDivElement,
   layers: LayerInfo[],
   currentSelectorId: string | null,
-  onSelect: OnLayerSelect,
-  onHover?: OnLayerHover,
-  onHoverEnd?: OnLayerHoverEnd
+  callbacks: DropdownCallbacks
 ): void {
   closeDropdown();
 
   const dropdown = createDropdownElement(
     layers,
     currentSelectorId,
-    (layer) => {
-      if (onHoverEnd) onHoverEnd();
-      onSelect(layer);
-      closeDropdown();
-    },
-    onHover,
-    onHoverEnd
+    {
+      ...callbacks,
+      onSelect: (layer) => {
+        if (callbacks.onHoverEnd) callbacks.onHoverEnd();
+        callbacks.onSelect(layer);
+        closeDropdown();
+      },
+    }
   );
 
   const overlay = label.parentElement;
@@ -190,19 +185,19 @@ export function showDropdown(
   overlay.appendChild(dropdown);
   activeDropdown = dropdown;
   activeLabel = label;
-  if (label.textContent?.endsWith(LABEL_CHEVRON.trim())) {
-    label.textContent = label.textContent.slice(0, -LABEL_CHEVRON.length) + LABEL_CHEVRON_OPEN;
+  if (label.textContent?.endsWith(CHEVRON_COLLAPSED.trim())) {
+    label.textContent = label.textContent.slice(0, -CHEVRON_COLLAPSED.length) + CHEVRON_EXPANDED;
   }
-  activeOnHoverEnd = onHoverEnd ?? null;
+  activeOnHoverEnd = callbacks.onHoverEnd ?? null;
 
-  setupKeyboardNavigation(dropdown, layers, currentSelectorId, onSelect, onHover, onHoverEnd);
+  setupKeyboardNavigation(dropdown, layers, currentSelectorId, callbacks);
   setupOutsideClickHandler(dropdown, label);
 }
 
 /** Close the active dropdown and clean up listeners */
 export function closeDropdown(): void {
-  if (activeLabel?.textContent?.includes(LABEL_CHEVRON_OPEN)) {
-    activeLabel.textContent = activeLabel.textContent.replace(LABEL_CHEVRON_OPEN, LABEL_CHEVRON);
+  if (activeLabel?.textContent?.includes(CHEVRON_EXPANDED)) {
+    activeLabel.textContent = activeLabel.textContent.replace(CHEVRON_EXPANDED, CHEVRON_COLLAPSED);
   }
   activeLabel = null;
 

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

@@ -11,7 +11,13 @@ export type OnLayerSelect = (layer: LayerInfo) => void;
 export type OnLayerHover = (layer: LayerInfo) => void;
 export type OnLayerHoverEnd = () => void;
 
-export interface LayerControllerDeps {
+export interface DropdownCallbacks {
+  onSelect: OnLayerSelect;
+  onHover?: OnLayerHover;
+  onHoverEnd?: OnLayerHoverEnd;
+}
+
+export interface LayerControllerConfig {
   createPreviewOverlay: (element: Element) => HTMLDivElement;
   getSelectedElementId: () => string | null;
   selectElement: (element: Element) => HTMLDivElement | undefined;

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,16 +63,6 @@ export function getInstrumentedDescendants(
   return result;
 }
 
-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[] = [];
@@ -76,16 +82,16 @@ function collectInstrumentedParents(selectedElement: Element): LayerInfo[] {
   return parents;
 }
 
-/** Append parents to chain with depth 0, 1, …; returns depth of selected (parents.length). */
-function appendParentsWithDepth(chain: LayerInfo[], parents: LayerInfo[]): number {
+/** 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;
 }
 
-/** Append selected element and its descendants at the given depth. */
-function appendSelfAndDescendants(
+/** Add selected element and its descendants at the given depth. */
+function addSelfAndDescendantsToChain(
   chain: LayerInfo[],
   selectedElement: Element,
   selfDepth: number
@@ -93,15 +99,15 @@ function appendSelfAndDescendants(
   chain.push(toLayerInfo(selectedElement, selfDepth));
   const descendants = getInstrumentedDescendants(
     selectedElement,
-    MAX_CHILD_DEPTH
+    MAX_CHILD_DEPTH,
+    selfDepth + 1
   );
-  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;
+  return parents.at(-1)?.element ?? null;
 }
 
 /** Collect instrumented siblings of the selected element from its parent (DOM order). */
@@ -113,7 +119,7 @@ function collectSiblings(parent: Element, selectedElement: Element): LayerInfo[]
   return siblings;
 }
 
-/** Append siblings at selfDepth, expanding children only for the selected element. */
+/** Add siblings at selfDepth, expanding children only for the selected element. */
 function appendSiblingsWithSelected(
   chain: LayerInfo[],
   siblings: LayerInfo[],
@@ -122,7 +128,7 @@ function appendSiblingsWithSelected(
 ): void {
   for (const sibling of siblings) {
     if (sibling.element === selectedElement) {
-      appendSelfAndDescendants(chain, selectedElement, selfDepth);
+      addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);
     } else {
       chain.push({ ...sibling, depth: selfDepth });
     }
@@ -142,44 +148,15 @@ function appendSiblingsWithSelected(
 export function buildLayerChain(selectedElement: Element): LayerInfo[] {
   const parents = collectInstrumentedParents(selectedElement);
   const chain: LayerInfo[] = [];
-  const selfDepth = appendParentsWithDepth(chain, parents);
+  const selfDepth = addParentsToChain(chain, parents);
 
   const instrParent = getImmediateInstrParent(parents);
   if (instrParent) {
     const siblings = collectSiblings(instrParent, selectedElement);
     appendSiblingsWithSelected(chain, siblings, selectedElement, selfDepth);
   } else {
-    appendSelfAndDescendants(chain, selectedElement, selfDepth);
+    addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);
   }
 
   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]));
-
-  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);
-      }
-    }
-  }
-
-  walk(root, 1);
-}

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

@@ -140,7 +140,7 @@ export function setupVisualEditAgent() {
     return selectedOverlays[0];
   };
 
-  const unSelectElement = (): void => {
+  const notifyDeselection = (): void => {
     selectedElementId = null;
     window.parent.postMessage({ type: "unselect-element" }, "*");
   };
@@ -248,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;
   };
@@ -320,7 +320,7 @@ export function setupVisualEditAgent() {
     },
     getSelectedElementId: () => selectedElementId,
     selectElement,
-    onDeselect: unSelectElement,
+    onDeselect: notifyDeselection,
   });
 
   // Toggle visual edit mode
@@ -411,7 +411,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        unselectElement();
+        clearSelection();
         break;
 
       case "refresh-page":