@base44-preview/vite-plugin 0.2.22-pr.36.db00ef7 → 0.2.22-pr.37.466ee63

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

@@ -1,221 +0,0 @@
-/** 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

@@ -1,24 +0,0 @@
-/** 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,148 +0,0 @@
-/** 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;
-}
-
-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 (
-    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;
-}
-
-/** 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: i });
-  });
-  return parents.length;
-}
-
-/** 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
-  );
-  assignDescendantDepths(selectedElement, descendants, selfDepth + 1);
-  chain.push(...descendants);
-}
-
-/**
- * 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[] {
-  const parents = collectInstrumentedParents(selectedElement);
-  const chain: LayerInfo[] = [];
-  const selfDepth = appendParentsWithDepth(chain, parents);
-
-  appendSelfAndDescendants(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);
-}