@depup/base44__vite-plugin 1.0.4-depup.0

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

@@ -0,0 +1,242 @@
+/** 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,
+  CHEVRON_ATTR,
+  LAYER_DROPDOWN_ATTR,
+} from "./consts.js";
+import { applyStyles, getLayerDisplayName } from "./utils.js";
+import type { LayerInfo, DropdownCallbacks } from "./types.js";
+import { PLUGIN_ELEMENT_ATTR } from "../utils.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");
+  container.setAttribute(PLUGIN_ELEMENT_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 {
+  if (label.querySelector(`[${CHEVRON_ATTR}]`)) return;
+
+  const chevron = document.createElement("span");
+  chevron.setAttribute(CHEVRON_ATTR, "true");
+  chevron.style.display = "inline-flex";
+  chevron.innerHTML = CHEVRON_COLLAPSED;
+  label.appendChild(chevron);
+
+  label.style.display = "inline-flex";
+  label.style.alignItems = "center";
+  label.style.cursor = "pointer";
+  label.style.userSelect = "none";
+  label.style.whiteSpace = "nowrap";
+  label.style.pointerEvents = "auto";
+  label.setAttribute(LAYER_DROPDOWN_ATTR, "true");
+  label.setAttribute(PLUGIN_ELEMENT_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;
+  const chevronEl = label.querySelector(`[${CHEVRON_ATTR}]`);
+  if (chevronEl) {
+    chevronEl.innerHTML = 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 {
+  const chevronEl = activeLabel?.querySelector(`[${CHEVRON_ATTR}]`);
+  if (chevronEl) {
+    chevronEl.innerHTML = 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/navigation-notifier.ts

@@ -0,0 +1,43 @@
+if (window.self !== window.top) {
+  let lastUrl = window.location.href;
+
+  function notifyNavigation() {
+    const currentUrl = window.location.href;
+    if (currentUrl !== lastUrl) {
+      lastUrl = currentUrl;
+      window.parent?.postMessage(
+        {
+          type: "app_changed_url",
+          url: currentUrl,
+        },
+        "*"
+      );
+    }
+  }
+
+  // Intercept history.pushState
+  const originalPushState = history.pushState.bind(history);
+  history.pushState = function (...args) {
+    originalPushState(...args);
+    notifyNavigation();
+  };
+
+  // Intercept history.replaceState
+  const originalReplaceState = history.replaceState.bind(history);
+  history.replaceState = function (...args) {
+    originalReplaceState(...args);
+    notifyNavigation();
+  };
+
+  // Handle browser back/forward navigation
+  window.addEventListener("popstate", notifyNavigation);
+
+  // Notify initial URL on load
+  window.parent?.postMessage(
+    {
+      type: "app_changed_url",
+      url: window.location.href,
+    },
+    "*"
+  );
+}

package/src/injections/sandbox-hmr-notifier.ts

@@ -0,0 +1,8 @@
+if (import.meta.hot) {
+  import.meta.hot.on("vite:beforeUpdate", () => {
+    window.parent?.postMessage({ type: "sandbox:beforeUpdate" }, "*");
+  });
+  import.meta.hot.on("vite:afterUpdate", () => {
+    window.parent?.postMessage({ type: "sandbox:afterUpdate" }, "*");
+  });
+}

package/src/injections/sandbox-mount-observer.ts

@@ -0,0 +1,25 @@
+
+if (window.self !== window.top) {
+  const observer = new MutationObserver((mutations) => {
+    const nodesAdded = mutations.some(
+      (mutation) => mutation.addedNodes.length > 0
+    );
+    const nodesRemoved = mutations.some(
+      (mutation) => mutation.removedNodes.length > 0
+    );
+    if (nodesAdded || nodesRemoved) {
+      const foundElmWithDataAttribute =
+        document.body.querySelectorAll(
+          "[data-source-location], [data-dynamic-content]"
+        ).length > 0;
+
+      if (foundElmWithDataAttribute) {
+        window.parent?.postMessage({ type: "sandbox:onMounted" }, "*");
+      } else {
+        window.parent?.postMessage({ type: "sandbox:onUnmounted" }, "*");
+      }
+    }
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+}

package/src/injections/unhandled-errors-handlers.ts

@@ -0,0 +1,114 @@
+/// <reference types="vite/client" />
+
+window.removeEventListener("unhandledrejection", handleUnhandledRejection);
+window.removeEventListener("error", handleWindowError);
+
+window.addEventListener("unhandledrejection", handleUnhandledRejection);
+window.addEventListener("error", handleWindowError);
+
+let shouldPropagateErrors = true;
+let suppressionTimer: ReturnType<typeof setTimeout> | null = null;
+let hadSuppressedErrors = false;
+
+if (import.meta.hot) {
+  import.meta.hot.on("vite:beforeUpdate", () => {
+    shouldPropagateErrors = false;
+    hadSuppressedErrors = false;
+
+    if (suppressionTimer) {
+      clearTimeout(suppressionTimer);
+    }
+
+    suppressionTimer = setTimeout(() => {
+      shouldPropagateErrors = true;
+      suppressionTimer = null;
+      hadSuppressedErrors = false;
+      // No vite:afterUpdate after timeout — treat the stuck update as an error
+      window.parent?.postMessage({ type: "sandbox:hmrErrorsSuppressed" }, "*");
+    }, import.meta.env.VITE_HMR_ERROR_SUPPRESSION_DELAY ?? 10000);
+  });
+  import.meta.hot.on("vite:afterUpdate", () => {
+    shouldPropagateErrors = true;
+    if (suppressionTimer) {
+      clearTimeout(suppressionTimer);
+      suppressionTimer = null;
+    }
+    if (hadSuppressedErrors) {
+      window.parent?.postMessage({ type: "sandbox:hmrErrorsSuppressed" }, "*");
+      hadSuppressedErrors = false;
+    }
+  });
+  import.meta.hot.on("vite:beforeFullReload", () => {
+    shouldPropagateErrors = false;
+    hadSuppressedErrors = false;
+    if (suppressionTimer) {
+      clearTimeout(suppressionTimer);
+      suppressionTimer = null;
+    }
+  });
+}
+
+function onAppError({
+  title,
+  details,
+  componentName,
+  originalError,
+}: {
+  title: string;
+  details: string;
+  componentName: string;
+  originalError: any;
+}) {
+  if (originalError?.response?.status === 402) {
+    return;
+  }
+  if (!shouldPropagateErrors) {
+    hadSuppressedErrors = true;
+    return;
+  }
+  window.parent?.postMessage(
+    {
+      type: "app_error",
+      error: {
+        title: title.toString(),
+        details: details?.toString(),
+        componentName: componentName?.toString(),
+        stack: originalError?.stack?.toString(),
+      },
+    },
+    "*"
+  );
+}
+
+function handleUnhandledRejection(event: any) {
+  const stack = event.reason.stack;
+  // extract function name from "at X (eval" where x is the function name
+  const functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+  const msg = functionName
+    ? `Error in ${functionName}: ${event.reason.toString()}`
+    : event.reason.toString();
+  onAppError({
+    title: msg,
+    details: event.reason.toString(),
+    componentName: functionName,
+    originalError: event.reason,
+  });
+}
+
+function handleWindowError(event: any) {
+  const stack = event.error?.stack;
+  let functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+  if (functionName === "eval") {
+    functionName = null;
+  }
+
+  const msg = functionName
+    ? `in ${functionName}: ${event.error.toString()}`
+    : event.error.toString();
+  onAppError({
+    title: msg,
+    details: event.error.toString(),
+    componentName: functionName,
+    originalError: event.error,
+  });
+}