@base44-preview/vite-plugin 0.2.22-pr.36.019589c → 0.2.22-pr.36.425440e

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

@@ -0,0 +1,105 @@
+/** Controller that encapsulates layer-dropdown integration logic */
+
+import { getElementSelectorId } from "../utils.js";
+import { buildLayerChain } from "./utils.js";
+import {
+  enhanceLabelWithChevron,
+  showDropdown,
+  closeDropdown,
+  isDropdownOpen,
+} from "./dropdown-ui.js";
+import type { LayerInfo, LayerControllerDeps, LayerController } from "./types.js";
+
+export function createLayerController(deps: LayerControllerDeps): LayerController {
+  let layerPreviewOverlay: HTMLDivElement | null = null;
+  let escapeHandler: ((e: KeyboardEvent) => void) | null = null;
+  let dropdownSourceElement: Element | null = null;
+
+  const clearLayerPreview = () => {
+    if (layerPreviewOverlay && layerPreviewOverlay.parentNode) {
+      layerPreviewOverlay.remove();
+    }
+    layerPreviewOverlay = null;
+  };
+
+  const showLayerPreview = (layer: LayerInfo) => {
+    clearLayerPreview();
+    if (getElementSelectorId(layer.element) === deps.getSelectedElementId()) return;
+
+    layerPreviewOverlay = deps.createPreviewOverlay(layer.element);
+  };
+
+  const selectElementFromLayer = (layer: LayerInfo) => {
+    clearLayerPreview();
+    closeDropdown();
+    if (escapeHandler) {
+      document.removeEventListener("keydown", escapeHandler, true);
+      escapeHandler = null;
+    }
+    dropdownSourceElement = null;
+
+    const firstOverlay = deps.selectElement(layer.element);
+    attachToOverlay(firstOverlay, layer.element);
+  };
+
+  const reselectDropdownSource = () => {
+    if (escapeHandler) {
+      document.removeEventListener("keydown", escapeHandler, true);
+      escapeHandler = null;
+    }
+    if (dropdownSourceElement) {
+      selectElementFromLayer({
+        element: dropdownSourceElement,
+        tagName: dropdownSourceElement.tagName.toLowerCase(),
+        selectorId: getElementSelectorId(dropdownSourceElement),
+      });
+      dropdownSourceElement = null;
+    }
+  };
+
+  const attachToOverlay = (
+    overlay: HTMLDivElement | undefined,
+    element: Element
+  ) => {
+    if (!overlay) return;
+
+    const label = overlay.querySelector("div") as HTMLDivElement | null;
+    if (!label) return;
+
+    const layers = buildLayerChain(element);
+    if (layers.length <= 1) return;
+
+    const currentId = getElementSelectorId(element);
+    enhanceLabelWithChevron(label);
+
+    label.addEventListener("click", (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isDropdownOpen()) {
+        closeDropdown();
+        reselectDropdownSource();
+      } else {
+        dropdownSourceElement = element;
+        deps.onDeselect();
+
+        escapeHandler = (ev: KeyboardEvent) => {
+          if (ev.key === "Escape") {
+            ev.stopPropagation();
+            closeDropdown();
+            reselectDropdownSource();
+          }
+        };
+        document.addEventListener("keydown", escapeHandler, true);
+
+        showDropdown(label, layers, currentId, selectElementFromLayer, showLayerPreview, clearLayerPreview);
+      }
+    });
+  };
+
+  const cleanup = () => {
+    clearLayerPreview();
+    closeDropdown();
+  };
+
+  return { attachToOverlay, cleanup };
+}

package/src/injections/layer-dropdown/{component/dropdown-ui.ts → dropdown-ui.ts}

@@ -9,20 +9,59 @@ import {
   DROPDOWN_ITEM_HOVER_BG,
   DEPTH_INDENT_PX,
   LABEL_CHEVRON,
+  LABEL_CHEVRON_OPEN,
   LAYER_DROPDOWN_ATTR,
-} from "../consts.js";
-import { getLayerDisplayName } from "../utils.js";
-import type { LayerInfo } from "../utils.js";
-
-export type OnLayerSelect = (layer: LayerInfo) => void;
-export type OnLayerHover = (layer: LayerInfo) => void;
-export type OnLayerHoverEnd = () => void;
+} from "./consts.js";
+import { applyStyles, getLayerDisplayName } from "./utils.js";
+import type { LayerInfo, OnLayerSelect, OnLayerHover, OnLayerHoverEnd } 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 activeKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
 
+function createDropdownItem(
+  layer: LayerInfo,
+  isActive: boolean,
+  onSelect: OnLayerSelect,
+  onHover?: OnLayerHover,
+  onHoverEnd?: OnLayerHoverEnd
+): HTMLDivElement {
+  const item = document.createElement("div");
+  item.textContent = getLayerDisplayName(layer);
+  applyStyles(item, DROPDOWN_ITEM_BASE_STYLES);
+
+  const depth = layer.depth ?? 0;
+  if (depth > 0) {
+    item.style.paddingLeft = `${12 + depth * DEPTH_INDENT_PX}px`;
+  }
+
+  if (isActive) {
+    item.style.color = DROPDOWN_ITEM_ACTIVE_COLOR;
+    item.style.backgroundColor = DROPDOWN_ITEM_ACTIVE_BG;
+    item.style.fontWeight = DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT;
+  }
+
+  item.addEventListener("mouseenter", () => {
+    if (!isActive) item.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;
+    if (onHover) onHover(layer);
+  });
+
+  item.addEventListener("mouseleave", () => {
+    if (!isActive) item.style.backgroundColor = "transparent";
+    if (onHoverEnd) onHoverEnd();
+  });
+
+  item.addEventListener("click", (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onSelect(layer);
+  });
+
+  return item;
+}
+
 /** Create the dropdown DOM element with layer items */
 export function createDropdownElement(
   layers: LayerInfo[],
@@ -33,54 +72,11 @@ export function createDropdownElement(
 ): HTMLDivElement {
   const container = document.createElement("div");
   container.setAttribute(LAYER_DROPDOWN_ATTR, "true");
-
-  Object.keys(DROPDOWN_CONTAINER_STYLES).forEach((key) => {
-    container.style[key as any] = DROPDOWN_CONTAINER_STYLES[key]!;
-  });
+  applyStyles(container, DROPDOWN_CONTAINER_STYLES);
 
   layers.forEach((layer) => {
-    const item = document.createElement("div");
     const isActive = layer.selectorId === currentSelectorId;
-
-    item.textContent = getLayerDisplayName(layer);
-
-    Object.keys(DROPDOWN_ITEM_BASE_STYLES).forEach((key) => {
-      item.style[key as any] = DROPDOWN_ITEM_BASE_STYLES[key]!;
-    });
-
-    // Indent based on depth
-    const depth = layer.depth ?? 0;
-    if (depth > 0) {
-      item.style.paddingLeft = `${12 + depth * DEPTH_INDENT_PX}px`;
-    }
-
-    if (isActive) {
-      item.style.color = DROPDOWN_ITEM_ACTIVE_COLOR;
-      item.style.backgroundColor = DROPDOWN_ITEM_ACTIVE_BG;
-      item.style.fontWeight = DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT;
-    }
-
-    item.addEventListener("mouseenter", () => {
-      if (!isActive) {
-        item.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;
-      }
-      if (onHover) onHover(layer);
-    });
-
-    item.addEventListener("mouseleave", () => {
-      if (!isActive) {
-        item.style.backgroundColor = "transparent";
-      }
-      if (onHoverEnd) onHoverEnd();
-    });
-
-    item.addEventListener("click", (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      onSelect(layer);
-    });
-
-    container.appendChild(item);
+    container.appendChild(createDropdownItem(layer, isActive, onSelect, onHover, onHoverEnd));
   });
 
   return container;
@@ -88,68 +84,38 @@ export function createDropdownElement(
 
 /** Add chevron indicator and pointer-events to the label */
 export function enhanceLabelWithChevron(label: HTMLDivElement): void {
-  if (label.textContent?.includes(LABEL_CHEVRON)) return;
+  const t = label.textContent ?? "";
+  if (t.endsWith(LABEL_CHEVRON) || t.endsWith(LABEL_CHEVRON_OPEN)) return;
 
-  label.textContent = label.textContent + LABEL_CHEVRON;
+  label.textContent = t + LABEL_CHEVRON;
   label.style.cursor = "pointer";
   label.style.userSelect = "none";
   label.style.pointerEvents = "auto";
   label.setAttribute(LAYER_DROPDOWN_ATTR, "true");
 }
 
-/** Show the dropdown below the label element */
-export function showDropdown(
-  label: HTMLDivElement,
+function setupKeyboardNavigation(
+  dropdown: HTMLDivElement,
   layers: LayerInfo[],
   currentSelectorId: string | null,
   onSelect: OnLayerSelect,
   onHover?: OnLayerHover,
   onHoverEnd?: OnLayerHoverEnd
 ): void {
-  closeDropdown();
-
-  const dropdown = createDropdownElement(
-    layers,
-    currentSelectorId,
-    (layer) => {
-      if (onHoverEnd) onHoverEnd();
-      onSelect(layer);
-      closeDropdown();
-    },
-    onHover,
-    onHoverEnd
-  );
-
-  const overlay = label.parentElement;
-  if (!overlay) return;
-
-  // Position below the label
-  dropdown.style.top = `${label.offsetTop + label.offsetHeight + 2}px`;
-  dropdown.style.left = `${label.offsetLeft}px`;
-
-  overlay.appendChild(dropdown);
-  activeDropdown = dropdown;
-  activeOnHoverEnd = onHoverEnd ?? null;
-
-  // --- Arrow key navigation ---
   const items = Array.from(dropdown.children) as HTMLDivElement[];
-  let focusedIndex = -1;
+  let focusedIndex = layers.findIndex((l) => l.selectorId === currentSelectorId);
 
   const setFocusedItem = (index: number) => {
-    // Clear previous focus styling
     if (focusedIndex >= 0 && focusedIndex < items.length) {
       const prev = items[focusedIndex]!;
-      const prevIsActive = prev.style.color === DROPDOWN_ITEM_ACTIVE_COLOR;
-      if (!prevIsActive) {
+      if (prev.style.color !== DROPDOWN_ITEM_ACTIVE_COLOR) {
         prev.style.backgroundColor = "transparent";
       }
     }
     focusedIndex = index;
-    // Apply hover styling to new focused item
     if (focusedIndex >= 0 && focusedIndex < items.length) {
       const cur = items[focusedIndex]!;
-      const curIsActive = cur.style.color === DROPDOWN_ITEM_ACTIVE_COLOR;
-      if (!curIsActive) {
+      if (cur.style.color !== DROPDOWN_ITEM_ACTIVE_COLOR) {
         cur.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;
       }
       cur.scrollIntoView({ block: "nearest" });
@@ -161,13 +127,11 @@ export function showDropdown(
     if (e.key === "ArrowDown") {
       e.preventDefault();
       e.stopPropagation();
-      const next = focusedIndex < items.length - 1 ? focusedIndex + 1 : 0;
-      setFocusedItem(next);
+      setFocusedItem(focusedIndex < items.length - 1 ? focusedIndex + 1 : 0);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       e.stopPropagation();
-      const prev = focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;
-      setFocusedItem(prev);
+      setFocusedItem(focusedIndex > 0 ? focusedIndex - 1 : items.length - 1);
     } else if (e.key === "Enter" && focusedIndex >= 0) {
       e.preventDefault();
       e.stopPropagation();
@@ -177,9 +141,12 @@ export function showDropdown(
     }
   };
   document.addEventListener("keydown", activeKeydownHandler, true);
+}
 
-  // Close on outside mousedown (mousedown fires before click, avoiding
-  // conflict with handleElementClick's stopPropagation on click events)
+function setupOutsideClickHandler(
+  dropdown: HTMLDivElement,
+  label: HTMLDivElement
+): void {
   setTimeout(() => {
     outsideMousedownHandler = (e: MouseEvent) => {
       const target = e.target as Node;
@@ -191,8 +158,54 @@ export function showDropdown(
   }, 0);
 }
 
+/** Show the dropdown below the label element */
+export function showDropdown(
+  label: HTMLDivElement,
+  layers: LayerInfo[],
+  currentSelectorId: string | null,
+  onSelect: OnLayerSelect,
+  onHover?: OnLayerHover,
+  onHoverEnd?: OnLayerHoverEnd
+): void {
+  closeDropdown();
+
+  const dropdown = createDropdownElement(
+    layers,
+    currentSelectorId,
+    (layer) => {
+      if (onHoverEnd) onHoverEnd();
+      onSelect(layer);
+      closeDropdown();
+    },
+    onHover,
+    onHoverEnd
+  );
+
+  const overlay = label.parentElement;
+  if (!overlay) return;
+
+  dropdown.style.top = `${label.offsetTop + label.offsetHeight + 2}px`;
+  dropdown.style.left = `${label.offsetLeft}px`;
+
+  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;
+  }
+  activeOnHoverEnd = onHoverEnd ?? null;
+
+  setupKeyboardNavigation(dropdown, layers, currentSelectorId, onSelect, onHover, onHoverEnd);
+  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);
+  }
+  activeLabel = null;
+
   if (activeOnHoverEnd) {
     activeOnHoverEnd();
     activeOnHoverEnd = null;

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

@@ -0,0 +1,24 @@
+/** Shared types for the layer-dropdown module */
+
+export interface LayerInfo {
+  element: Element;
+  tagName: string;
+  selectorId: string | null;
+  depth?: number;
+}
+
+export type OnLayerSelect = (layer: LayerInfo) => void;
+export type OnLayerHover = (layer: LayerInfo) => void;
+export type OnLayerHoverEnd = () => void;
+
+export interface LayerControllerDeps {
+  createPreviewOverlay: (element: Element) => HTMLDivElement;
+  getSelectedElementId: () => string | null;
+  selectElement: (element: Element) => HTMLDivElement | undefined;
+  onDeselect: () => void;
+}
+
+export interface LayerController {
+  attachToOverlay: (overlay: HTMLDivElement | undefined, element: Element) => void;
+  cleanup: () => void;
+}

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

@@ -1,13 +1,13 @@
-/** DOM traversal utilities for building the layer chain of instrumented elements */
+/** DOM utilities for the layer-dropdown module */
 
 import { isInstrumentedElement, getElementSelectorId } from "../utils.js";
 import { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from "./consts.js";
 
-export interface LayerInfo {
-  element: Element;
-  tagName: string;
-  selectorId: string | null;
-  depth?: number;
+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 */
@@ -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/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 [];