@base44/vite-plugin 0.2.24 → 0.2.26

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

@@ -0,0 +1,230 @@
+/** 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,
+  BASE_PADDING_PX,
+  CHEVRON_COLLAPSED,
+  CHEVRON_EXPANDED,
+  LAYER_DROPDOWN_ATTR,
+} from "./consts.js";
+import { applyStyles, getLayerDisplayName } from "./utils.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: (() => void) | null = null;
+let activeKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+function createDropdownItem(
+  layer: LayerInfo,
+  isActive: boolean,
+  { onSelect, onHover, onHoverEnd }: DropdownCallbacks
+): 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 = `${BASE_PADDING_PX + 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[],
+  currentElement: Element | null,
+  callbacks: DropdownCallbacks
+): HTMLDivElement {
+  const container = document.createElement("div");
+  container.setAttribute(LAYER_DROPDOWN_ATTR, "true");
+  applyStyles(container, DROPDOWN_CONTAINER_STYLES);
+
+  layers.forEach((layer) => {
+    const isActive = layer.element === currentElement;
+    container.appendChild(createDropdownItem(layer, isActive, callbacks));
+  });
+
+  return container;
+}
+
+/** Add chevron indicator and pointer-events to the label */
+export function enhanceLabelWithChevron(label: HTMLDivElement): void {
+  const t = label.textContent ?? "";
+  if (t.endsWith(CHEVRON_COLLAPSED) || t.endsWith(CHEVRON_EXPANDED)) return;
+
+  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");
+}
+
+function setupKeyboardNavigation(
+  dropdown: HTMLDivElement,
+  layers: LayerInfo[],
+  currentElement: Element | null,
+  { onSelect, onHover, onHoverEnd }: DropdownCallbacks
+): void {
+  const items = Array.from(dropdown.children) as HTMLDivElement[];
+  let focusedIndex = layers.findIndex((l) => l.element === currentElement);
+
+  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 && focusedIndex >= 0 && focusedIndex < layers.length) {
+        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 && focusedIndex < layers.length) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (onHoverEnd) onHoverEnd();
+      onSelect(layers[focusedIndex]!);
+      closeDropdown();
+    }
+  };
+  document.addEventListener("keydown", activeKeydownHandler, true);
+}
+
+function setupOutsideClickHandler(
+  dropdown: HTMLDivElement,
+  label: HTMLDivElement
+): void {
+  let skipFirst = true;
+  outsideMousedownHandler = (e: MouseEvent) => {
+    if (skipFirst) { skipFirst = false; return; }
+    const target = e.target as Node;
+    if (!dropdown.contains(target) && target !== label) {
+      closeDropdown();
+    }
+  };
+  document.addEventListener("mousedown", outsideMousedownHandler, true);
+}
+
+/** Show the dropdown below the label element */
+export function showDropdown(
+  label: HTMLDivElement,
+  layers: LayerInfo[],
+  currentElement: Element | null,
+  callbacks: DropdownCallbacks
+): void {
+  closeDropdown();
+
+  const dropdown = createDropdownElement(
+    layers,
+    currentElement,
+    {
+      ...callbacks,
+      onSelect: (layer) => {
+        if (callbacks.onHoverEnd) callbacks.onHoverEnd();
+        callbacks.onSelect(layer);
+        closeDropdown();
+      },
+    }
+  );
+
+  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(CHEVRON_COLLAPSED.trim())) {
+    label.textContent = label.textContent.slice(0, -CHEVRON_COLLAPSED.length) + CHEVRON_EXPANDED;
+  }
+  activeOnHoverEnd = callbacks.onHoverEnd ?? null;
+
+  setupKeyboardNavigation(dropdown, layers, currentElement, callbacks);
+  setupOutsideClickHandler(dropdown, label);
+}
+
+/** Close the active dropdown and clean up listeners */
+export function closeDropdown(): void {
+  if (activeLabel?.textContent?.includes(CHEVRON_EXPANDED)) {
+    activeLabel.textContent = activeLabel.textContent.replace(CHEVRON_EXPANDED, CHEVRON_COLLAPSED);
+  }
+  activeLabel = null;
+
+  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,30 @@
+/** 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 DropdownCallbacks {
+  onSelect: OnLayerSelect;
+  onHover?: OnLayerHover;
+  onHoverEnd?: OnLayerHoverEnd;
+}
+
+export interface LayerControllerConfig {
+  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,175 @@
+/** 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 {
+  for (const key of Object.keys(styles)) {
+    element.style.setProperty(
+      key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
+      styles[key]!
+    );
+  }
+}
+
+/** Display name for a layer — just the real tag name */
+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,
+  startDepth?: 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)) {
+        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);
+      }
+    }
+  }
+
+  walk(parent, 1);
+  return result;
+}
+
+/** 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 (
+    current &&
+    current !== document.documentElement &&
+    current !== document.body &&
+    parents.length < MAX_PARENT_DEPTH
+  ) {
+    if (isInstrumentedElement(current)) {
+      parents.push(toLayerInfo(current));
+    }
+    current = current.parentElement;
+  }
+  parents.reverse();
+  return parents;
+}
+
+/** 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;
+}
+
+/** 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,
+    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.at(-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;
+}
+
+/** Add siblings at selfDepth, expanding children only for the selected element. */
+function appendSiblingsWithSelected(
+  chain: LayerInfo[],
+  siblings: LayerInfo[],
+  selectedElement: Element,
+  selfDepth: number
+): void {
+  const selectedSelectorId = getElementSelectorId(selectedElement);
+  const seen = new Set<string>();
+  for (const sibling of siblings) {
+    if (sibling.element === selectedElement) {
+      addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);
+      if (selectedSelectorId) seen.add(selectedSelectorId);
+    } else {
+      const id = sibling.selectorId;
+      if (id != null) {
+        if (id === selectedSelectorId || seen.has(id)) continue;
+        seen.add(id);
+      }
+      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);
+  }
+
+  return chain;
+}

package/src/injections/utils.ts

@@ -1,3 +1,23 @@
+/** 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
+  );
+}
+
+export const ALLOWED_ATTRIBUTES: string[] = ["src"];
+
 /** 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 [];
@@ -19,5 +39,28 @@ export function findElementsById(id: string | null): Element[] {
 export function updateElementClasses(elements: Element[], classes: string): void {
   elements.forEach((element) => {
     element.setAttribute("class", classes);
-  });  
+  });
+}
+
+/** Set a single attribute on all provided elements. */
+export function updateElementAttribute(elements: Element[], attribute: string, value: string): void {
+  if (!ALLOWED_ATTRIBUTES.includes(attribute)) {
+    return;
+  }
+
+  elements.forEach((element) => {
+    element.setAttribute(attribute, value);
+  });
+}
+
+/** Collect attribute values from an element for a given allowlist. */
+export function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {
+  const attributes: Record<string, string> = {};
+  for (const attr of allowedAttributes) {
+    const val = element.getAttribute(attr);
+    if (val !== null) {
+      attributes[attr] = val;
+    }
+  }
+  return attributes;
 }