@base44/vite-plugin 0.2.24 → 0.2.26

package/dist/injections/layer-dropdown/consts.d.ts

@@ -0,0 +1,19 @@
+/** Style constants for the layer dropdown UI */
+export declare const DROPDOWN_CONTAINER_STYLES: Record<string, string>;
+export declare const DROPDOWN_ITEM_BASE_STYLES: Record<string, string>;
+export declare const DROPDOWN_ITEM_ACTIVE_COLOR = "#526cff";
+export declare const DROPDOWN_ITEM_ACTIVE_BG = "#DBEAFE";
+export declare const DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT = "600";
+export declare const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
+export declare const DEPTH_INDENT_PX = 10;
+/** Chevron shown when dropdown is collapsed (click to expand) */
+export declare const CHEVRON_COLLAPSED = " \u25BE";
+/** Chevron shown when dropdown is expanded (click to collapse) */
+export declare const CHEVRON_EXPANDED = " \u25B4";
+export declare const BASE_PADDING_PX = 12;
+export declare const LAYER_DROPDOWN_ATTR = "data-layer-dropdown";
+/** Max instrumented ancestors to show above the selected element */
+export declare const MAX_PARENT_DEPTH = 2;
+/** Max instrumented depth levels to show below the selected element */
+export declare const MAX_CHILD_DEPTH = 2;
+//# sourceMappingURL=consts.d.ts.map

package/dist/injections/layer-dropdown/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/consts.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAEhD,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5D,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQ5D,CAAC;AAEF,eAAO,MAAM,0BAA0B,YAAY,CAAC;AACpD,eAAO,MAAM,uBAAuB,YAAY,CAAC;AACjD,eAAO,MAAM,gCAAgC,QAAQ,CAAC;AAEtD,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAEhD,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,iEAAiE;AACjE,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC,uEAAuE;AACvE,eAAO,MAAM,eAAe,IAAI,CAAC"}

package/dist/injections/layer-dropdown/consts.js

@@ -0,0 +1,40 @@
+/** Style constants for the layer dropdown UI */
+export const DROPDOWN_CONTAINER_STYLES = {
+    position: "absolute",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e2e8f0",
+    borderRadius: "6px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    fontSize: "12px",
+    minWidth: "120px",
+    maxHeight: "200px",
+    overflowY: "auto",
+    zIndex: "10001",
+    padding: "4px 0",
+    pointerEvents: "auto",
+};
+export const DROPDOWN_ITEM_BASE_STYLES = {
+    padding: "4px 12px",
+    cursor: "pointer",
+    color: "#334155",
+    backgroundColor: "transparent",
+    whiteSpace: "nowrap",
+    lineHeight: "1.5",
+    fontWeight: "400",
+};
+export const DROPDOWN_ITEM_ACTIVE_COLOR = "#526cff";
+export const DROPDOWN_ITEM_ACTIVE_BG = "#DBEAFE";
+export const DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT = "600";
+export const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
+export const DEPTH_INDENT_PX = 10;
+/** Chevron shown when dropdown is collapsed (click to expand) */
+export const CHEVRON_COLLAPSED = " \u25BE";
+/** Chevron shown when dropdown is expanded (click to collapse) */
+export const CHEVRON_EXPANDED = " \u25B4";
+export const BASE_PADDING_PX = 12;
+export const LAYER_DROPDOWN_ATTR = "data-layer-dropdown";
+/** Max instrumented ancestors to show above the selected element */
+export const MAX_PARENT_DEPTH = 2;
+/** Max instrumented depth levels to show below the selected element */
+export const MAX_CHILD_DEPTH = 2;
+//# sourceMappingURL=consts.js.map

package/dist/injections/layer-dropdown/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/consts.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAEhD,MAAM,CAAC,MAAM,yBAAyB,GAA2B;IAC/D,QAAQ,EAAE,UAAU;IACpB,eAAe,EAAE,SAAS;IAC1B,MAAM,EAAE,mBAAmB;IAC3B,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,gCAAgC;IAC3C,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,MAAM;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAA2B;IAC/D,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,aAAa;IAC9B,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,SAAS,CAAC;AACpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,SAAS,CAAC;AACjD,MAAM,CAAC,MAAM,gCAAgC,GAAG,KAAK,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,SAAS,CAAC;AAEhD,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,CAAC;AAElC,iEAAiE;AACjE,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC;AAC3C,kEAAkE;AAClE,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,CAAC;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG,qBAAqB,CAAC;AAEzD,oEAAoE;AACpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAElC,uEAAuE;AACvE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC"}

package/dist/injections/layer-dropdown/controller.d.ts

@@ -0,0 +1,4 @@
+/** Controller that encapsulates layer-dropdown integration logic */
+import type { LayerControllerConfig, LayerController } from "./types.js";
+export declare function createLayerController(config: LayerControllerConfig): LayerController;
+//# sourceMappingURL=controller.d.ts.map

package/dist/injections/layer-dropdown/controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/controller.ts"],"names":[],"mappings":"AAAA,oEAAoE;AAUpE,OAAO,KAAK,EAAa,qBAAqB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEpF,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB,GAAG,eAAe,CAgGpF"}

package/dist/injections/layer-dropdown/controller.js

@@ -0,0 +1,88 @@
+/** 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";
+export function createLayerController(config) {
+    let layerPreviewOverlay = null;
+    let escapeHandler = null;
+    let dropdownSourceLayer = null;
+    const clearLayerPreview = () => {
+        if (layerPreviewOverlay && layerPreviewOverlay.parentNode) {
+            layerPreviewOverlay.remove();
+        }
+        layerPreviewOverlay = null;
+    };
+    const showLayerPreview = (layer) => {
+        clearLayerPreview();
+        if (getElementSelectorId(layer.element) === config.getSelectedElementId())
+            return;
+        layerPreviewOverlay = config.createPreviewOverlay(layer.element);
+    };
+    const selectLayer = (layer) => {
+        clearLayerPreview();
+        closeDropdown();
+        if (escapeHandler) {
+            document.removeEventListener("keydown", escapeHandler, true);
+            escapeHandler = null;
+        }
+        dropdownSourceLayer = null;
+        const firstOverlay = config.selectElement(layer.element);
+        attachToOverlay(firstOverlay, layer.element);
+    };
+    const restoreSelection = () => {
+        if (escapeHandler) {
+            document.removeEventListener("keydown", escapeHandler, true);
+            escapeHandler = null;
+        }
+        if (dropdownSourceLayer) {
+            selectLayer(dropdownSourceLayer);
+            dropdownSourceLayer = null;
+        }
+    };
+    const handleLabelClick = (e, label, element, layers, currentId) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isDropdownOpen()) {
+            closeDropdown();
+            restoreSelection();
+        }
+        else {
+            dropdownSourceLayer = {
+                element,
+                tagName: element.tagName.toLowerCase(),
+                selectorId: currentId,
+            };
+            config.onDeselect();
+            escapeHandler = (ev) => {
+                if (ev.key === "Escape") {
+                    ev.stopPropagation();
+                    closeDropdown();
+                    restoreSelection();
+                }
+            };
+            document.addEventListener("keydown", escapeHandler, true);
+            showDropdown(label, layers, element, { onSelect: selectLayer, onHover: showLayerPreview, onHoverEnd: clearLayerPreview });
+        }
+    };
+    const attachToOverlay = (overlay, element) => {
+        if (!overlay)
+            return;
+        const label = overlay.querySelector("div");
+        if (!label)
+            return;
+        const layers = buildLayerChain(element);
+        if (layers.length <= 1)
+            return;
+        const currentId = getElementSelectorId(element);
+        enhanceLabelWithChevron(label);
+        label.addEventListener("click", (e) => {
+            handleLabelClick(e, label, element, layers, currentId);
+        });
+    };
+    const cleanup = () => {
+        clearLayerPreview();
+        closeDropdown();
+    };
+    return { attachToOverlay, cleanup };
+}
+//# sourceMappingURL=controller.js.map

package/dist/injections/layer-dropdown/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/controller.ts"],"names":[],"mappings":"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"}

package/dist/injections/layer-dropdown/dropdown-ui.d.ts

@@ -0,0 +1,13 @@
+/** Dropdown UI component for layer navigation */
+import type { LayerInfo, DropdownCallbacks } from "./types.js";
+/** Create the dropdown DOM element with layer items */
+export declare function createDropdownElement(layers: LayerInfo[], currentElement: Element | null, callbacks: DropdownCallbacks): HTMLDivElement;
+/** Add chevron indicator and pointer-events to the label */
+export declare function enhanceLabelWithChevron(label: HTMLDivElement): void;
+/** Show the dropdown below the label element */
+export declare function showDropdown(label: HTMLDivElement, layers: LayerInfo[], currentElement: Element | null, callbacks: DropdownCallbacks): void;
+/** Close the active dropdown and clean up listeners */
+export declare function closeDropdown(): void;
+/** Check if a dropdown is currently visible */
+export declare function isDropdownOpen(): boolean;
+//# sourceMappingURL=dropdown-ui.d.ts.map

package/dist/injections/layer-dropdown/dropdown-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-ui.d.ts","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/dropdown-ui.ts"],"names":[],"mappings":"AAAA,iDAAiD;AAgBjD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+C/D,uDAAuD;AACvD,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,SAAS,EAAE,EACnB,cAAc,EAAE,OAAO,GAAG,IAAI,EAC9B,SAAS,EAAE,iBAAiB,GAC3B,cAAc,CAWhB;AAED,4DAA4D;AAC5D,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAUnE;AAkED,gDAAgD;AAChD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,SAAS,EAAE,EACnB,cAAc,EAAE,OAAO,GAAG,IAAI,EAC9B,SAAS,EAAE,iBAAiB,GAC3B,IAAI,CAgCN;AAED,uDAAuD;AACvD,wBAAgB,aAAa,IAAI,IAAI,CAyBpC;AAED,+CAA+C;AAC/C,wBAAgB,cAAc,IAAI,OAAO,CAExC"}

package/dist/injections/layer-dropdown/dropdown-ui.js

@@ -0,0 +1,176 @@
+/** 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";
+let activeDropdown = null;
+let activeLabel = null;
+let outsideMousedownHandler = null;
+let activeOnHoverEnd = null;
+let activeKeydownHandler = null;
+function createDropdownItem(layer, isActive, { onSelect, onHover, onHoverEnd }) {
+    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) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onSelect(layer);
+    });
+    return item;
+}
+/** Create the dropdown DOM element with layer items */
+export function createDropdownElement(layers, currentElement, callbacks) {
+    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) {
+    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, layers, currentElement, { onSelect, onHover, onHoverEnd }) {
+    const items = Array.from(dropdown.children);
+    let focusedIndex = layers.findIndex((l) => l.element === currentElement);
+    const setFocusedItem = (index) => {
+        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) => {
+        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, label) {
+    let skipFirst = true;
+    outsideMousedownHandler = (e) => {
+        if (skipFirst) {
+            skipFirst = false;
+            return;
+        }
+        const target = e.target;
+        if (!dropdown.contains(target) && target !== label) {
+            closeDropdown();
+        }
+    };
+    document.addEventListener("mousedown", outsideMousedownHandler, true);
+}
+/** Show the dropdown below the label element */
+export function showDropdown(label, layers, currentElement, callbacks) {
+    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() {
+    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() {
+    return activeDropdown !== null;
+}
+//# sourceMappingURL=dropdown-ui.js.map

package/dist/injections/layer-dropdown/dropdown-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-ui.js","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/dropdown-ui.ts"],"names":[],"mappings":"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"}

package/dist/injections/layer-dropdown/types.d.ts

@@ -0,0 +1,26 @@
+/** 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;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/injections/layer-dropdown/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/types.ts"],"names":[],"mappings":"AAAA,iDAAiD;AAEjD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;AACvD,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;AACtD,MAAM,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC;AAEzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AAED,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,cAAc,CAAC;IAC3D,oBAAoB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAC1C,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,cAAc,GAAG,SAAS,CAAC;IAChE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/dist/injections/layer-dropdown/types.js

@@ -0,0 +1,3 @@
+/** Shared types for the layer-dropdown module */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/injections/layer-dropdown/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/types.ts"],"names":[],"mappings":"AAAA,iDAAiD"}

package/dist/injections/layer-dropdown/utils.d.ts

@@ -0,0 +1,25 @@
+/** DOM utilities for the layer-dropdown module */
+import type { LayerInfo } from "./types.js";
+/** Apply a style map to an element */
+export declare function applyStyles(element: HTMLElement, styles: Record<string, string>): void;
+/** Display name for a layer — just the real tag name */
+export declare function getLayerDisplayName(layer: LayerInfo): string;
+/**
+ * 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 declare function getInstrumentedDescendants(parent: Element, maxDepth: number, startDepth?: number): LayerInfo[];
+/**
+ * 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 declare function buildLayerChain(selectedElement: Element): LayerInfo[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/injections/layer-dropdown/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/utils.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAKlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,sCAAsC;AACtC,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAOtF;AAED,wDAAwD;AACxD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAE5D;AAYD;;;;;GAKG;AACH,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,MAAM,EAChB,UAAU,CAAC,EAAE,MAAM,GAClB,SAAS,EAAE,CA0Bb;AAkFD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,EAAE,CAcrE"}

package/dist/injections/layer-dropdown/utils.js

@@ -0,0 +1,143 @@
+/** DOM utilities for the layer-dropdown module */
+import { isInstrumentedElement, getElementSelectorId } from "../utils.js";
+import { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from "./consts.js";
+/** Apply a style map to an element */
+export function applyStyles(element, styles) {
+    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) {
+    return layer.tagName;
+}
+function toLayerInfo(element, depth) {
+    const info = {
+        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, maxDepth, startDepth) {
+    const result = [];
+    function walk(el, instrDepth) {
+        if (instrDepth > maxDepth)
+            return;
+        for (let i = 0; i < el.children.length; i++) {
+            const child = el.children[i];
+            if (isInstrumentedElement(child)) {
+                const info = {
+                    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) {
+    const parents = [];
+    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, parents) {
+    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, selectedElement, selfDepth) {
+    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) {
+    return parents.at(-1)?.element ?? null;
+}
+/** Collect instrumented siblings of the selected element from its parent (DOM order). */
+function collectSiblings(parent, selectedElement) {
+    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, siblings, selectedElement, selfDepth) {
+    const selectedSelectorId = getElementSelectorId(selectedElement);
+    const seen = new Set();
+    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) {
+    const parents = collectInstrumentedParents(selectedElement);
+    const chain = [];
+    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;
+}
+//# sourceMappingURL=utils.js.map

package/dist/injections/layer-dropdown/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/injections/layer-dropdown/utils.ts"],"names":[],"mappings":"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"}

package/dist/injections/utils.d.ts

@@ -1,3 +1,8 @@
+/** Check if an element has instrumentation attributes */
+export declare function isInstrumentedElement(element: Element): boolean;
+/** Get the selector ID from an element's data attributes (prefers source-location) */
+export declare function getElementSelectorId(element: Element): string | null;
+export declare const ALLOWED_ATTRIBUTES: string[];
 /** Find elements by ID - first try data-source-location, fallback to data-visual-selector-id */
 export declare function findElementsById(id: string | null): Element[];
 /**
@@ -5,4 +10,8 @@ export declare function findElementsById(id: string | null): Element[];
  * Uses setAttribute instead of className to support both HTML and SVG elements.
  */
 export declare function updateElementClasses(elements: Element[], classes: string): void;
+/** Set a single attribute on all provided elements. */
+export declare function updateElementAttribute(elements: Element[], attribute: string, value: string): void;
+/** Collect attribute values from an element for a given allowlist. */
+export declare function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string>;
 //# sourceMappingURL=utils.d.ts.map

package/dist/injections/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/injections/utils.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,EAAE,CAW7D;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAI/E"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/injections/utils.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAK/D;AAED,sFAAsF;AACtF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAOpE;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,EAAY,CAAC;AAEpD,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,EAAE,CAW7D;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAI/E;AAED,uDAAuD;AACvD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAQlG;AAED,sEAAsE;AACtE,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAS9G"}