@base44-preview/vite-plugin 0.2.21-pr.35.60ab963 → 0.2.22-pr.36.69a0b76

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/dropdown-ui.ts

@@ -0,0 +1,221 @@
+/** Dropdown UI component for layer navigation */
+
+import {
+  DROPDOWN_CONTAINER_STYLES,
+  DROPDOWN_ITEM_BASE_STYLES,
+  DROPDOWN_ITEM_ACTIVE_COLOR,
+  DROPDOWN_ITEM_ACTIVE_BG,
+  DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT,
+  DROPDOWN_ITEM_HOVER_BG,
+  DEPTH_INDENT_PX,
+  LABEL_CHEVRON,
+  LAYER_DROPDOWN_ATTR,
+} from "./consts.js";
+import { applyStyles, getLayerDisplayName } from "./utils.js";
+import type { LayerInfo, OnLayerSelect, OnLayerHover, OnLayerHoverEnd } from "./types.js";
+
+let activeDropdown: 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[],
+  currentSelectorId: string | null,
+  onSelect: OnLayerSelect,
+  onHover?: OnLayerHover,
+  onHoverEnd?: OnLayerHoverEnd
+): HTMLDivElement {
+  const container = document.createElement("div");
+  container.setAttribute(LAYER_DROPDOWN_ATTR, "true");
+  applyStyles(container, DROPDOWN_CONTAINER_STYLES);
+
+  layers.forEach((layer) => {
+    const isActive = layer.selectorId === currentSelectorId;
+    container.appendChild(createDropdownItem(layer, isActive, onSelect, onHover, onHoverEnd));
+  });
+
+  return container;
+}
+
+/** Add chevron indicator and pointer-events to the label */
+export function enhanceLabelWithChevron(label: HTMLDivElement): void {
+  if (label.textContent?.includes(LABEL_CHEVRON)) return;
+
+  label.textContent = label.textContent + LABEL_CHEVRON;
+  label.style.cursor = "pointer";
+  label.style.userSelect = "none";
+  label.style.pointerEvents = "auto";
+  label.setAttribute(LAYER_DROPDOWN_ATTR, "true");
+}
+
+function setupKeyboardNavigation(
+  dropdown: HTMLDivElement,
+  layers: LayerInfo[],
+  currentSelectorId: string | null,
+  onSelect: OnLayerSelect,
+  onHover?: OnLayerHover,
+  onHoverEnd?: OnLayerHoverEnd
+): void {
+  const items = Array.from(dropdown.children) as HTMLDivElement[];
+  let focusedIndex = layers.findIndex((l) => l.selectorId === currentSelectorId);
+
+  const setFocusedItem = (index: number) => {
+    if (focusedIndex >= 0 && focusedIndex < items.length) {
+      const prev = items[focusedIndex]!;
+      if (prev.style.color !== DROPDOWN_ITEM_ACTIVE_COLOR) {
+        prev.style.backgroundColor = "transparent";
+      }
+    }
+    focusedIndex = index;
+    if (focusedIndex >= 0 && focusedIndex < items.length) {
+      const cur = items[focusedIndex]!;
+      if (cur.style.color !== DROPDOWN_ITEM_ACTIVE_COLOR) {
+        cur.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;
+      }
+      cur.scrollIntoView({ block: "nearest" });
+      if (onHover) onHover(layers[focusedIndex]!);
+    }
+  };
+
+  activeKeydownHandler = (e: KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      setFocusedItem(focusedIndex < items.length - 1 ? focusedIndex + 1 : 0);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      setFocusedItem(focusedIndex > 0 ? focusedIndex - 1 : items.length - 1);
+    } else if (e.key === "Enter" && focusedIndex >= 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (onHoverEnd) onHoverEnd();
+      onSelect(layers[focusedIndex]!);
+      closeDropdown();
+    }
+  };
+  document.addEventListener("keydown", activeKeydownHandler, true);
+}
+
+function setupOutsideClickHandler(
+  dropdown: HTMLDivElement,
+  label: HTMLDivElement
+): void {
+  setTimeout(() => {
+    outsideMousedownHandler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (!dropdown.contains(target) && target !== label) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener("mousedown", outsideMousedownHandler, true);
+  }, 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;
+  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 (activeOnHoverEnd) {
+    activeOnHoverEnd();
+    activeOnHoverEnd = null;
+  }
+
+  if (activeDropdown && activeDropdown.parentNode) {
+    activeDropdown.remove();
+  }
+  activeDropdown = null;
+
+  if (outsideMousedownHandler) {
+    document.removeEventListener("mousedown", outsideMousedownHandler, true);
+    outsideMousedownHandler = null;
+  }
+
+  if (activeKeydownHandler) {
+    document.removeEventListener("keydown", activeKeydownHandler, true);
+    activeKeydownHandler = null;
+  }
+}
+
+/** Check if a dropdown is currently visible */
+export function isDropdownOpen(): boolean {
+  return activeDropdown !== 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

@@ -0,0 +1,138 @@
+/** 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;
+}
+
+/**
+ * Collect instrumented descendants up to `maxDepth` instrumented nesting levels.
+ * Non-instrumented wrappers are walked through without counting toward depth.
+ * Results are in DOM order.
+ */
+export function getInstrumentedDescendants(
+  parent: Element,
+  maxDepth: 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)) {
+        result.push({
+          element: child,
+          tagName: child.tagName.toLowerCase(),
+          selectorId: getElementSelectorId(child),
+        });
+        walk(child, instrDepth + 1);
+      } else {
+        walk(child, instrDepth);
+      }
+    }
+  }
+
+  walk(parent, 1);
+  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) ---
+  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({
+        element: current,
+        tagName: current.tagName.toLowerCase(),
+        selectorId: getElementSelectorId(current),
+      });
+    }
+    current = current.parentElement;
+  }
+  // Reverse so outermost parent comes first
+  parents.reverse();
+
+  // --- Build the chain with depth ---
+  const chain: LayerInfo[] = [];
+  const baseDepth = 0;
+
+  // Parents: depth 0, 1, …
+  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,
+  });
+
+  // Children: up to MAX_CHILD_DEPTH instrumented levels below selected
+  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);
+  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/utils.ts

@@ -1,3 +1,37 @@
+/** 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 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 [];