@base44-preview/vite-plugin 0.2.21-pr.35.60ab963 → 0.2.22-pr.36.019589c

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

@@ -0,0 +1,16 @@
+/** Dropdown UI component for layer navigation */
+import type { LayerInfo } from "../utils.js";
+export type OnLayerSelect = (layer: LayerInfo) => void;
+export type OnLayerHover = (layer: LayerInfo) => void;
+export type OnLayerHoverEnd = () => void;
+/** Create the dropdown DOM element with layer items */
+export declare function createDropdownElement(layers: LayerInfo[], currentSelectorId: string | null, onSelect: OnLayerSelect, onHover?: OnLayerHover, onHoverEnd?: OnLayerHoverEnd): 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[], currentSelectorId: string | null, onSelect: OnLayerSelect, onHover?: OnLayerHover, onHoverEnd?: OnLayerHoverEnd): 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/component/dropdown-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-ui.d.ts","sourceRoot":"","sources":["../../../../src/injections/layer-dropdown/component/dropdown-ui.ts"],"names":[],"mappings":"AAAA,iDAAiD;AAcjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,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;AAOzC,uDAAuD;AACvD,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,SAAS,EAAE,EACnB,iBAAiB,EAAE,MAAM,GAAG,IAAI,EAChC,QAAQ,EAAE,aAAa,EACvB,OAAO,CAAC,EAAE,YAAY,EACtB,UAAU,CAAC,EAAE,eAAe,GAC3B,cAAc,CAsDhB;AAED,4DAA4D;AAC5D,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAQnE;AAED,gDAAgD;AAChD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,SAAS,EAAE,EACnB,iBAAiB,EAAE,MAAM,GAAG,IAAI,EAChC,QAAQ,EAAE,aAAa,EACvB,OAAO,CAAC,EAAE,YAAY,EACtB,UAAU,CAAC,EAAE,eAAe,GAC3B,IAAI,CAoFN;AAED,uDAAuD;AACvD,wBAAgB,aAAa,IAAI,IAAI,CAoBpC;AAED,+CAA+C;AAC/C,wBAAgB,cAAc,IAAI,OAAO,CAExC"}

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

@@ -0,0 +1,166 @@
+/** 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 { getLayerDisplayName } from "../utils.js";
+let activeDropdown = null;
+let outsideMousedownHandler = null;
+let activeOnHoverEnd = null;
+let activeKeydownHandler = null;
+/** Create the dropdown DOM element with layer items */
+export function createDropdownElement(layers, currentSelectorId, onSelect, onHover, onHoverEnd) {
+    const container = document.createElement("div");
+    container.setAttribute(LAYER_DROPDOWN_ATTR, "true");
+    Object.keys(DROPDOWN_CONTAINER_STYLES).forEach((key) => {
+        container.style[key] = DROPDOWN_CONTAINER_STYLES[key];
+    });
+    layers.forEach((layer) => {
+        const item = document.createElement("div");
+        const isActive = layer.selectorId === currentSelectorId;
+        item.textContent = getLayerDisplayName(layer);
+        Object.keys(DROPDOWN_ITEM_BASE_STYLES).forEach((key) => {
+            item.style[key] = DROPDOWN_ITEM_BASE_STYLES[key];
+        });
+        // Indent based on depth
+        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) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onSelect(layer);
+        });
+        container.appendChild(item);
+    });
+    return container;
+}
+/** Add chevron indicator and pointer-events to the label */
+export function enhanceLabelWithChevron(label) {
+    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");
+}
+/** Show the dropdown below the label element */
+export function showDropdown(label, layers, currentSelectorId, onSelect, onHover, onHoverEnd) {
+    closeDropdown();
+    const dropdown = createDropdownElement(layers, currentSelectorId, (layer) => {
+        if (onHoverEnd)
+            onHoverEnd();
+        onSelect(layer);
+        closeDropdown();
+    }, onHover, onHoverEnd);
+    const overlay = label.parentElement;
+    if (!overlay)
+        return;
+    // Position below the label
+    dropdown.style.top = `${label.offsetTop + label.offsetHeight + 2}px`;
+    dropdown.style.left = `${label.offsetLeft}px`;
+    overlay.appendChild(dropdown);
+    activeDropdown = dropdown;
+    activeOnHoverEnd = onHoverEnd ?? null;
+    // --- Arrow key navigation ---
+    const items = Array.from(dropdown.children);
+    let focusedIndex = -1;
+    const setFocusedItem = (index) => {
+        // Clear previous focus styling
+        if (focusedIndex >= 0 && focusedIndex < items.length) {
+            const prev = items[focusedIndex];
+            const prevIsActive = prev.style.color === DROPDOWN_ITEM_ACTIVE_COLOR;
+            if (!prevIsActive) {
+                prev.style.backgroundColor = "transparent";
+            }
+        }
+        focusedIndex = index;
+        // Apply hover styling to new focused item
+        if (focusedIndex >= 0 && focusedIndex < items.length) {
+            const cur = items[focusedIndex];
+            const curIsActive = cur.style.color === DROPDOWN_ITEM_ACTIVE_COLOR;
+            if (!curIsActive) {
+                cur.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;
+            }
+            cur.scrollIntoView({ block: "nearest" });
+            if (onHover)
+                onHover(layers[focusedIndex]);
+        }
+    };
+    activeKeydownHandler = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            e.stopPropagation();
+            const next = focusedIndex < items.length - 1 ? focusedIndex + 1 : 0;
+            setFocusedItem(next);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            e.stopPropagation();
+            const prev = focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;
+            setFocusedItem(prev);
+        }
+        else if (e.key === "Enter" && focusedIndex >= 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (onHoverEnd)
+                onHoverEnd();
+            onSelect(layers[focusedIndex]);
+            closeDropdown();
+        }
+    };
+    document.addEventListener("keydown", activeKeydownHandler, true);
+    // Close on outside mousedown (mousedown fires before click, avoiding
+    // conflict with handleElementClick's stopPropagation on click events)
+    setTimeout(() => {
+        outsideMousedownHandler = (e) => {
+            const target = e.target;
+            if (!dropdown.contains(target) && target !== label) {
+                closeDropdown();
+            }
+        };
+        document.addEventListener("mousedown", outsideMousedownHandler, true);
+    }, 0);
+}
+/** Close the active dropdown and clean up listeners */
+export function closeDropdown() {
+    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/component/dropdown-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-ui.js","sourceRoot":"","sources":["../../../../src/injections/layer-dropdown/component/dropdown-ui.ts"],"names":[],"mappings":"AAAA,iDAAiD;AAEjD,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,uBAAuB,EACvB,gCAAgC,EAChC,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOlD,IAAI,cAAc,GAA0B,IAAI,CAAC;AACjD,IAAI,uBAAuB,GAAqC,IAAI,CAAC;AACrE,IAAI,gBAAgB,GAA2B,IAAI,CAAC;AACpD,IAAI,oBAAoB,GAAwC,IAAI,CAAC;AAErE,uDAAuD;AACvD,MAAM,UAAU,qBAAqB,CACnC,MAAmB,EACnB,iBAAgC,EAChC,QAAuB,EACvB,OAAsB,EACtB,UAA4B;IAE5B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IAEpD,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACrD,SAAS,CAAC,KAAK,CAAC,GAAU,CAAC,GAAG,yBAAyB,CAAC,GAAG,CAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,KAAK,iBAAiB,CAAC;QAExD,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAE9C,MAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACrD,IAAI,CAAC,KAAK,CAAC,GAAU,CAAC,GAAG,yBAAyB,CAAC,GAAG,CAAE,CAAC;QAC3D,CAAC,CAAC,CAAC;QAEH,wBAAwB;QACxB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,EAAE,GAAG,KAAK,GAAG,eAAe,IAAI,CAAC;QAC/D,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,0BAA0B,CAAC;YAC9C,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,uBAAuB,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,gCAAgC,CAAC;QAC3D,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACvC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,sBAAsB,CAAC;YACtD,CAAC;YACD,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACvC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;YAC7C,CAAC;YACD,IAAI,UAAU;gBAAE,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YAC/C,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,4DAA4D;AAC5D,MAAM,UAAU,uBAAuB,CAAC,KAAqB;IAC3D,IAAI,KAAK,CAAC,WAAW,EAAE,QAAQ,CAAC,aAAa,CAAC;QAAE,OAAO;IAEvD,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC;IACtD,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;IACnC,KAAK,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;AAClD,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,YAAY,CAC1B,KAAqB,EACrB,MAAmB,EACnB,iBAAgC,EAChC,QAAuB,EACvB,OAAsB,EACtB,UAA4B;IAE5B,aAAa,EAAE,CAAC;IAEhB,MAAM,QAAQ,GAAG,qBAAqB,CACpC,MAAM,EACN,iBAAiB,EACjB,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,UAAU;YAAE,UAAU,EAAE,CAAC;QAC7B,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,aAAa,EAAE,CAAC;IAClB,CAAC,EACD,OAAO,EACP,UAAU,CACX,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;IACpC,IAAI,CAAC,OAAO;QAAE,OAAO;IAErB,2BAA2B;IAC3B,QAAQ,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC;IACrE,QAAQ,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,KAAK,CAAC,UAAU,IAAI,CAAC;IAE9C,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,cAAc,GAAG,QAAQ,CAAC;IAC1B,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;IAEtC,+BAA+B;IAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAqB,CAAC;IAChE,IAAI,YAAY,GAAG,CAAC,CAAC,CAAC;IAEtB,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,+BAA+B;QAC/B,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;YACrD,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAE,CAAC;YAClC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,0BAA0B,CAAC;YACrE,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;YAC7C,CAAC;QACH,CAAC;QACD,YAAY,GAAG,KAAK,CAAC;QACrB,0CAA0C;QAC1C,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;YACrD,MAAM,GAAG,GAAG,KAAK,CAAC,YAAY,CAAE,CAAC;YACjC,MAAM,WAAW,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK,0BAA0B,CAAC;YACnE,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,sBAAsB,CAAC;YACrD,CAAC;YACD,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;YACzC,IAAI,OAAO;gBAAE,OAAO,CAAC,MAAM,CAAC,YAAY,CAAE,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC;IAEF,oBAAoB,GAAG,CAAC,CAAgB,EAAE,EAAE;QAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,MAAM,IAAI,GAAG,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpE,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,MAAM,IAAI,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YACpE,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,YAAY,IAAI,CAAC,EAAE,CAAC;YAClD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,UAAU;gBAAE,UAAU,EAAE,CAAC;YAC7B,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAE,CAAC,CAAC;YAChC,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAEjE,qEAAqE;IACrE,sEAAsE;IACtE,UAAU,CAAC,GAAG,EAAE;QACd,uBAAuB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC1C,MAAM,MAAM,GAAG,CAAC,CAAC,MAAc,CAAC;YAChC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;gBACnD,aAAa,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED,uDAAuD;AACvD,MAAM,UAAU,aAAa;IAC3B,IAAI,gBAAgB,EAAE,CAAC;QACrB,gBAAgB,EAAE,CAAC;QACnB,gBAAgB,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED,IAAI,cAAc,IAAI,cAAc,CAAC,UAAU,EAAE,CAAC;QAChD,cAAc,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IACD,cAAc,GAAG,IAAI,CAAC;IAEtB,IAAI,uBAAuB,EAAE,CAAC;QAC5B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAC;QACzE,uBAAuB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,IAAI,oBAAoB,EAAE,CAAC;QACzB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;QACpE,oBAAoB,GAAG,IAAI,CAAC;IAC9B,CAAC;AACH,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,cAAc;IAC5B,OAAO,cAAc,KAAK,IAAI,CAAC;AACjC,CAAC"}

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

@@ -0,0 +1,15 @@
+/** 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;
+export declare const LABEL_CHEVRON = " \u25BE";
+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,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,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,36 @@
+/** 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;
+export const LABEL_CHEVRON = " \u25BE";
+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,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC;AAEvC,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/utils.d.ts

@@ -0,0 +1,26 @@
+/** DOM traversal utilities for building the layer chain of instrumented elements */
+export interface LayerInfo {
+    element: Element;
+    tagName: string;
+    selectorId: string | null;
+    depth?: number;
+}
+/** 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.
+ */
+export declare function getInstrumentedDescendants(parent: Element, maxDepth: number): LayerInfo[];
+/**
+ * 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 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,oFAAoF;AAKpF,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,wDAAwD;AACxD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAE5D;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,MAAM,GACf,SAAS,EAAE,CAsBb;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,EAAE,CAkDrE"}

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

@@ -0,0 +1,109 @@
+/** DOM traversal utilities for building the layer chain of instrumented elements */
+import { isInstrumentedElement, getElementSelectorId } from "../utils.js";
+import { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from "./consts.js";
+/** Display name for a layer — just the real tag name */
+export function getLayerDisplayName(layer) {
+    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, maxDepth) {
+    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)) {
+                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) {
+    // --- Parents (walk up, collect at most MAX_PARENT_DEPTH) ---
+    const parents = [];
+    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 = [];
+    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, descendants, startDepth) {
+    // 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, instrDepth) {
+        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);
+}
+//# 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,9 @@
+/** 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;
+/** Find the nearest instrumented ancestor (not the element itself) */
+export declare function getImmediateInstrumentedParent(element: Element): Element | null;
 /** Find elements by ID - first try data-source-location, fallback to data-visual-selector-id */
 export declare function findElementsById(id: string | null): Element[];
 /**

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,sEAAsE;AACtE,wBAAgB,8BAA8B,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAa/E;AAED,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"}

package/dist/injections/utils.js

@@ -1,3 +1,28 @@
+/** Check if an element has instrumentation attributes */
+export function isInstrumentedElement(element) {
+    const htmlEl = element;
+    return !!(htmlEl.dataset?.sourceLocation || htmlEl.dataset?.visualSelectorId);
+}
+/** Get the selector ID from an element's data attributes (prefers source-location) */
+export function getElementSelectorId(element) {
+    const htmlEl = element;
+    return (htmlEl.dataset?.sourceLocation ||
+        htmlEl.dataset?.visualSelectorId ||
+        null);
+}
+/** Find the nearest instrumented ancestor (not the element itself) */
+export function getImmediateInstrumentedParent(element) {
+    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) {
     if (!id)

package/dist/injections/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/injections/utils.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,MAAM,UAAU,gBAAgB,CAAC,EAAiB;IAChD,IAAI,CAAC,EAAE;QAAE,OAAO,EAAE,CAAC;IACnB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,QAAQ,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAC5D,CAAC;IACF,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAC/D,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,QAAmB,EAAE,OAAe;IACvE,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC3B,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/injections/utils.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,UAAU,qBAAqB,CAAC,OAAgB;IACpD,MAAM,MAAM,GAAG,OAAsB,CAAC;IACtC,OAAO,CAAC,CAAC,CACP,MAAM,CAAC,OAAO,EAAE,cAAc,IAAI,MAAM,CAAC,OAAO,EAAE,gBAAgB,CACnE,CAAC;AACJ,CAAC;AAED,sFAAsF;AACtF,MAAM,UAAU,oBAAoB,CAAC,OAAgB;IACnD,MAAM,MAAM,GAAG,OAAsB,CAAC;IACtC,OAAO,CACL,MAAM,CAAC,OAAO,EAAE,cAAc;QAC9B,MAAM,CAAC,OAAO,EAAE,gBAAgB;QAChC,IAAI,CACL,CAAC;AACJ,CAAC;AAED,sEAAsE;AACtE,MAAM,UAAU,8BAA8B,CAAC,OAAgB;IAC7D,IAAI,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;IACpC,OACE,OAAO;QACP,OAAO,KAAK,QAAQ,CAAC,eAAe;QACpC,OAAO,KAAK,QAAQ,CAAC,IAAI,EACzB,CAAC;QACD,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;IAClC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,gBAAgB,CAAC,EAAiB;IAChD,IAAI,CAAC,EAAE;QAAE,OAAO,EAAE,CAAC;IACnB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,QAAQ,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAC5D,CAAC;IACF,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAC/D,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,QAAmB,EAAE,OAAe;IACvE,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC3B,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/injections/visual-edit-agent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-edit-agent.d.ts","sourceRoot":"","sources":["../../src/injections/visual-edit-agent.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,SA8iBnC"}
+{"version":3,"file":"visual-edit-agent.d.ts","sourceRoot":"","sources":["../../src/injections/visual-edit-agent.ts"],"names":[],"mappings":"AAWA,wBAAgB,oBAAoB,SA+sBnC"}

package/dist/injections/visual-edit-agent.js

@@ -1,4 +1,7 @@
-import { findElementsById, updateElementClasses } from "./utils.js";
+import { findElementsById, updateElementClasses, getElementSelectorId } from "./utils.js";
+import { buildLayerChain } from "./layer-dropdown/utils.js";
+import { enhanceLabelWithChevron, showDropdown, closeDropdown as closeLayerDropdown, isDropdownOpen as isLayerDropdownOpen, } from "./layer-dropdown/component/dropdown-ui.js";
+import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 export function setupVisualEditAgent() {
     // State variables (replacing React useState/useRef)
     let isVisualEditMode = false;
@@ -119,6 +122,9 @@ export function setupVisualEditAgent() {
         if (!isVisualEditMode)
             return;
         const target = e.target;
+        // Let layer dropdown clicks pass through without interference
+        if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`))
+            return;
         // Close dropdowns when clicking anywhere in iframe if a dropdown is open
         if (isDropdownOpen) {
             e.preventDefault();
@@ -162,6 +168,8 @@ export function setupVisualEditAgent() {
         selectedElementId = visualSelectorId || null;
         // Clear hover overlays
         clearHoverOverlays();
+        // Attach layer dropdown to the selected overlay label
+        attachLayerDropdownToOverlay(selectedOverlays[0], element);
         // Calculate element position for popover positioning
         const rect = element.getBoundingClientRect();
         const elementPosition = {
@@ -250,10 +258,143 @@ export function setupVisualEditAgent() {
             }
         }, 50);
     };
+    // --- Layer dropdown: hover preview overlay ---
+    let layerPreviewOverlay = null;
+    const clearLayerPreview = () => {
+        if (layerPreviewOverlay && layerPreviewOverlay.parentNode) {
+            layerPreviewOverlay.remove();
+        }
+        layerPreviewOverlay = null;
+    };
+    const showLayerPreview = (layer) => {
+        clearLayerPreview();
+        // Don't preview the currently selected element
+        if (getElementSelectorId(layer.element) === selectedElementId)
+            return;
+        const overlay = createOverlay(false);
+        overlay.style.zIndex = "9998";
+        document.body.appendChild(overlay);
+        positionOverlay(overlay, layer.element);
+        layerPreviewOverlay = overlay;
+    };
+    // --- Layer dropdown: select a different element from the layer chain ---
+    const selectElementFromLayer = (layer) => {
+        clearLayerPreview();
+        closeLayerDropdown();
+        if (escapeHandler) {
+            document.removeEventListener("keydown", escapeHandler, true);
+            escapeHandler = null;
+        }
+        dropdownSourceElement = null;
+        const element = layer.element;
+        const htmlElement = element;
+        const visualSelectorId = getElementSelectorId(element);
+        // Clear existing selected overlays
+        selectedOverlays.forEach((overlay) => {
+            if (overlay && overlay.parentNode) {
+                overlay.remove();
+            }
+        });
+        selectedOverlays = [];
+        // Find all elements with the same ID
+        const elements = findElementsById(visualSelectorId || null);
+        // Create selected overlays for all matching elements
+        elements.forEach((el) => {
+            const overlay = createOverlay(true);
+            document.body.appendChild(overlay);
+            selectedOverlays.push(overlay);
+            positionOverlay(overlay, el, true);
+        });
+        selectedElementId = visualSelectorId || null;
+        clearHoverOverlays();
+        // Attach layer dropdown to the new overlay label
+        attachLayerDropdownToOverlay(selectedOverlays[0], element);
+        // Notify parent of the newly selected element
+        const rect = element.getBoundingClientRect();
+        const elementPosition = {
+            top: rect.top,
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+            width: rect.width,
+            height: rect.height,
+            centerX: rect.left + rect.width / 2,
+            centerY: rect.top + rect.height / 2,
+        };
+        const svgElement = element;
+        const elementData = {
+            type: "element-selected",
+            tagName: element.tagName,
+            classes: svgElement.className?.baseVal ||
+                element.className ||
+                "",
+            visualSelectorId: visualSelectorId,
+            content: element.innerText,
+            dataSourceLocation: htmlElement.dataset.sourceLocation,
+            isDynamicContent: htmlElement.dataset.dynamicContent === "true",
+            linenumber: htmlElement.dataset.linenumber,
+            filename: htmlElement.dataset.filename,
+            position: elementPosition,
+        };
+        window.parent.postMessage(elementData, "*");
+    };
+    let escapeHandler = null;
+    let dropdownSourceElement = null;
+    const attachLayerDropdownToOverlay = (overlay, element) => {
+        if (!overlay)
+            return;
+        const label = overlay.querySelector("div");
+        if (!label)
+            return;
+        const layers = buildLayerChain(element);
+        // Only show dropdown when there are multiple layers to navigate
+        if (layers.length <= 1)
+            return;
+        const currentId = getElementSelectorId(element);
+        enhanceLabelWithChevron(label);
+        label.addEventListener("click", (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (isLayerDropdownOpen()) {
+                closeLayerDropdown();
+                reselectDropdownSource();
+            }
+            else {
+                dropdownSourceElement = element;
+                selectedElementId = null;
+                window.parent.postMessage({ type: "element-selected", visualSelectorId: null }, "*");
+                escapeHandler = (ev) => {
+                    if (ev.key === "Escape") {
+                        ev.stopPropagation();
+                        closeLayerDropdown();
+                        reselectDropdownSource();
+                    }
+                };
+                document.addEventListener("keydown", escapeHandler, true);
+                showDropdown(label, layers, currentId, selectElementFromLayer, showLayerPreview, clearLayerPreview);
+            }
+        });
+    };
+    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;
+        }
+    };
     // Toggle visual edit mode
     const toggleVisualEditMode = (isEnabled) => {
         isVisualEditMode = isEnabled;
         if (!isEnabled) {
+            clearLayerPreview();
+            closeLayerDropdown();
             clearHoverOverlays();
             selectedOverlays.forEach((overlay) => {
                 if (overlay && overlay.parentNode) {