@base44/vite-plugin 0.2.24 → 0.2.26

package/dist/statics/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/injections/utils.ts","../../src/injections/visual-edit-agent.ts"],"sourcesContent":["/** Find elements by ID - first try data-source-location, fallback to data-visual-selector-id */\nexport function findElementsById(id: string | null): Element[] {\n  if (!id) return [];\n  const sourceElements = Array.from(\n    document.querySelectorAll(`[data-source-location=\"${id}\"]`)\n  );\n  if (sourceElements.length > 0) {\n    return sourceElements;\n  }\n  return Array.from(\n    document.querySelectorAll(`[data-visual-selector-id=\"${id}\"]`)\n  );\n}\n\n/**\n * Update element classes by visual selector ID.\n * Uses setAttribute instead of className to support both HTML and SVG elements.\n */\nexport function updateElementClasses(elements: Element[], classes: string): void {\n  elements.forEach((element) => {\n    element.setAttribute(\"class\", classes);\n  });  \n}\n","import { findElementsById, updateElementClasses } from \"./utils.js\";\n\nexport function setupVisualEditAgent() {\n  // State variables (replacing React useState/useRef)\n  let isVisualEditMode = false;\n  let isPopoverDragging = false;\n  let isDropdownOpen = false;\n  let hoverOverlays: HTMLDivElement[] = [];\n  let selectedOverlays: HTMLDivElement[] = [];\n  let currentHighlightedElements: Element[] = [];\n  let selectedElementId: string | null = null;\n\n  // Create overlay element\n  const createOverlay = (isSelected = false): HTMLDivElement => {\n    const overlay = document.createElement(\"div\");\n    overlay.style.position = \"absolute\";\n    overlay.style.pointerEvents = \"none\";\n    overlay.style.transition = \"all 0.1s ease-in-out\";\n    overlay.style.zIndex = \"9999\";\n\n    if (isSelected) {\n      overlay.style.border = \"2px solid #2563EB\";\n    } else {\n      overlay.style.border = \"2px solid #95a5fc\";\n      overlay.style.backgroundColor = \"rgba(99, 102, 241, 0.05)\";\n    }\n\n    return overlay;\n  };\n\n  // Position overlay relative to element\n  const positionOverlay = (\n    overlay: HTMLDivElement,\n    element: Element,\n    isSelected = false\n  ) => {\n    if (!element || !isVisualEditMode) return;\n\n    const htmlElement = element as HTMLElement;\n    // Force layout recalculation\n    void htmlElement.offsetWidth;\n\n    const rect = element.getBoundingClientRect();\n    overlay.style.top = `${rect.top + window.scrollY}px`;\n    overlay.style.left = `${rect.left + window.scrollX}px`;\n    overlay.style.width = `${rect.width}px`;\n    overlay.style.height = `${rect.height}px`;\n\n    // Check if label already exists in overlay\n    let label = overlay.querySelector(\"div\") as HTMLDivElement | null;\n\n    if (!label) {\n      label = document.createElement(\"div\");\n      label.textContent = element.tagName.toLowerCase();\n      label.style.position = \"absolute\";\n      label.style.top = \"-27px\";\n      label.style.left = \"-2px\";\n      label.style.padding = \"2px 8px\";\n      label.style.fontSize = \"11px\";\n      label.style.fontWeight = isSelected ? \"500\" : \"400\";\n      label.style.color = isSelected ? \"#ffffff\" : \"#526cff\";\n      label.style.backgroundColor = isSelected ? \"#526cff\" : \"#DBEAFE\";\n      label.style.borderRadius = \"3px\";\n      label.style.minWidth = \"24px\";\n      label.style.textAlign = \"center\";\n      overlay.appendChild(label);\n    }\n  };\n\n  // Clear hover overlays\n  const clearHoverOverlays = () => {\n    hoverOverlays.forEach((overlay) => {\n      if (overlay && overlay.parentNode) {\n        overlay.remove();\n      }\n    });\n    hoverOverlays = [];\n    currentHighlightedElements = [];\n  };\n\n  // Handle mouse over event\n  const handleMouseOver = (e: MouseEvent) => {\n    if (!isVisualEditMode || isPopoverDragging) return;\n\n    const target = e.target as Element;\n\n    // Prevent hover effects when a dropdown is open\n    if (isDropdownOpen) {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Prevent hover effects on SVG path elements\n    if (target.tagName.toLowerCase() === \"path\") {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Support both data-source-location and data-visual-selector-id\n    const element = target.closest(\n      \"[data-source-location], [data-visual-selector-id]\"\n    );\n    if (!element) {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Prefer data-source-location, fallback to data-visual-selector-id\n    const htmlElement = element as HTMLElement;\n    const selectorId =\n      htmlElement.dataset.sourceLocation ||\n      htmlElement.dataset.visualSelectorId;\n\n    // Skip if this element is already selected\n    if (selectedElementId === selectorId) {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Find all elements with the same ID\n    const elements = findElementsById(selectorId || null);\n\n    // Clear previous hover overlays\n    clearHoverOverlays();\n\n    // Create overlays for all matching elements\n    elements.forEach((el) => {\n      const overlay = createOverlay(false);\n      document.body.appendChild(overlay);\n      hoverOverlays.push(overlay);\n      positionOverlay(overlay, el);\n    });\n\n    currentHighlightedElements = elements;\n  };\n\n  // Handle mouse out event\n  const handleMouseOut = () => {\n    if (isPopoverDragging) return;\n    clearHoverOverlays();\n  };\n\n  // Handle element click\n  const handleElementClick = (e: MouseEvent) => {\n    if (!isVisualEditMode) return;\n\n    const target = e.target as Element;\n\n    // Close dropdowns when clicking anywhere in iframe if a dropdown is open\n    if (isDropdownOpen) {\n      e.preventDefault();\n      e.stopPropagation();\n      e.stopImmediatePropagation();\n\n      window.parent.postMessage({ type: \"close-dropdowns\" }, \"*\");\n      return;\n    }\n\n    // Prevent clicking on SVG path elements\n    if (target.tagName.toLowerCase() === \"path\") {\n      return;\n    }\n\n    // Prevent default behavior immediately when in visual edit mode\n    e.preventDefault();\n    e.stopPropagation();\n    e.stopImmediatePropagation();\n\n    // Support both data-source-location and data-visual-selector-id\n    const element = target.closest(\n      \"[data-source-location], [data-visual-selector-id]\"\n    );\n    if (!element) {\n      return;\n    }\n\n    const htmlElement = element as HTMLElement;\n    const visualSelectorId =\n      htmlElement.dataset.sourceLocation ||\n      htmlElement.dataset.visualSelectorId;\n\n    // Clear any existing selected overlays\n    selectedOverlays.forEach((overlay) => {\n      if (overlay && overlay.parentNode) {\n        overlay.remove();\n      }\n    });\n    selectedOverlays = [];\n\n    // Find all elements with the same ID\n    const elements = findElementsById(visualSelectorId || null);\n\n    // Create selected overlays for all matching elements\n    elements.forEach((el) => {\n      const overlay = createOverlay(true);\n      document.body.appendChild(overlay);\n      selectedOverlays.push(overlay);\n      positionOverlay(overlay, el, true);\n    });\n\n    selectedElementId = visualSelectorId || null;\n\n    // Clear hover overlays\n    clearHoverOverlays();\n\n    // Calculate element position for popover positioning\n    const rect = element.getBoundingClientRect();\n    const elementPosition = {\n      top: rect.top,\n      left: rect.left,\n      right: rect.right,\n      bottom: rect.bottom,\n      width: rect.width,\n      height: rect.height,\n      centerX: rect.left + rect.width / 2,\n      centerY: rect.top + rect.height / 2,\n    };\n\n    const isTextElement = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'].includes(element.tagName?.toLowerCase())\n\n    // Send message to parent window with element info including position\n    const svgElement = element as SVGElement;\n    const elementData = {\n      type: \"element-selected\",\n      tagName: element.tagName,\n      classes:\n        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||\n        element.className ||\n        \"\",\n      visualSelectorId: visualSelectorId,\n      content: isTextElement ? (element as HTMLElement).innerText : undefined,\n      dataSourceLocation: htmlElement.dataset.sourceLocation,\n      isDynamicContent: htmlElement.dataset.dynamicContent === \"true\",\n      linenumber: htmlElement.dataset.linenumber,\n      filename: htmlElement.dataset.filename,\n      position: elementPosition,\n      isTextElement: isTextElement,\n    };\n    window.parent.postMessage(elementData, \"*\");\n  };\n\n  // Unselect the current element\n  const unselectElement = () => {\n    selectedOverlays.forEach((overlay) => {\n      if (overlay && overlay.parentNode) {\n        overlay.remove();\n      }\n    });\n    selectedOverlays = [];\n    selectedElementId = null;\n  };\n\n  const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {\n    const elements = findElementsById(visualSelectorId);\n    if (elements.length === 0) return;\n\n    updateElementClasses(elements, classes);\n\n    // Use a small delay to allow the browser to recalculate layout before repositioning\n    setTimeout(() => {\n      // Reposition selected overlays\n      if (selectedElementId === visualSelectorId) {\n        selectedOverlays.forEach((overlay, index) => {\n          if (index < elements.length) {\n            positionOverlay(overlay, elements[index]!);\n          }\n        });\n      }\n\n      // Reposition hover overlays if needed\n      if (currentHighlightedElements.length > 0) {\n        const hoveredElement = currentHighlightedElements[0] as HTMLElement;\n        const hoveredId = hoveredElement?.dataset?.visualSelectorId;\n        if (hoveredId === visualSelectorId) {\n          hoverOverlays.forEach((overlay, index) => {\n            if (index < currentHighlightedElements.length) {\n              positionOverlay(overlay, currentHighlightedElements[index]!);\n            }\n          });\n        }\n      }\n    }, 50);\n  };\n\n  // Update element content by visual selector ID\n  const updateElementContent = (visualSelectorId: string, content: string) => {\n    const elements = findElementsById(visualSelectorId);\n\n    if (elements.length === 0) {\n      return;\n    }\n\n    elements.forEach((element) => {\n      (element as HTMLElement).innerText = content;\n    });\n\n    setTimeout(() => {\n      if (selectedElementId === visualSelectorId) {\n        selectedOverlays.forEach((overlay, index) => {\n          if (index < elements.length) {\n            positionOverlay(overlay, elements[index]!);\n          }\n        });\n      }\n    }, 50);\n  };\n\n  // Toggle visual edit mode\n  const toggleVisualEditMode = (isEnabled: boolean) => {\n    isVisualEditMode = isEnabled;\n\n    if (!isEnabled) {\n      clearHoverOverlays();\n\n      selectedOverlays.forEach((overlay) => {\n        if (overlay && overlay.parentNode) {\n          overlay.remove();\n        }\n      });\n      selectedOverlays = [];\n\n      currentHighlightedElements = [];\n      selectedElementId = null;\n      document.body.style.cursor = \"default\";\n\n      document.removeEventListener(\"mouseover\", handleMouseOver);\n      document.removeEventListener(\"mouseout\", handleMouseOut);\n      document.removeEventListener(\"click\", handleElementClick, true);\n    } else {\n      document.body.style.cursor = \"crosshair\";\n      document.addEventListener(\"mouseover\", handleMouseOver);\n      document.addEventListener(\"mouseout\", handleMouseOut);\n      document.addEventListener(\"click\", handleElementClick, true);\n    }\n  };\n\n  // Handle scroll events to update popover position\n  const handleScroll = () => {\n    if (selectedElementId) {\n      const elements = findElementsById(selectedElementId);\n      if (elements.length > 0) {\n        const element = elements[0];\n        const rect = element!.getBoundingClientRect();\n\n        const viewportHeight = window.innerHeight;\n        const viewportWidth = window.innerWidth;\n        const isInViewport =\n          rect.top < viewportHeight &&\n          rect.bottom > 0 &&\n          rect.left < viewportWidth &&\n          rect.right > 0;\n\n        const elementPosition = {\n          top: rect.top,\n          left: rect.left,\n          right: rect.right,\n          bottom: rect.bottom,\n          width: rect.width,\n          height: rect.height,\n          centerX: rect.left + rect.width / 2,\n          centerY: rect.top + rect.height / 2,\n        };\n\n        window.parent.postMessage(\n          {\n            type: \"element-position-update\",\n            position: elementPosition,\n            isInViewport: isInViewport,\n            visualSelectorId: selectedElementId,\n          },\n          \"*\"\n        );\n      }\n    }\n  };\n\n  // Handle messages from parent window\n  const handleMessage = (event: MessageEvent) => {\n    const message = event.data;\n\n    switch (message.type) {\n      case \"toggle-visual-edit-mode\":\n        toggleVisualEditMode(message.data.enabled);\n        break;\n\n      case \"update-classes\":\n        if (message.data && message.data.classes !== undefined) {\n          updateElementClassesAndReposition(\n            message.data.visualSelectorId,\n            message.data.classes\n          );\n        } else {\n          console.warn(\n            \"[VisualEditAgent] Invalid update-classes message:\",\n            message\n          );\n        }\n        break;\n\n      case \"unselect-element\":\n        unselectElement();\n        break;\n\n      case \"refresh-page\":\n        window.location.reload();\n        break;\n\n      case \"update-content\":\n        if (message.data && message.data.content !== undefined) {\n          updateElementContent(\n            message.data.visualSelectorId,\n            message.data.content\n          );\n        } else {\n          console.warn(\n            \"[VisualEditAgent] Invalid update-content message:\",\n            message\n          );\n        }\n        break;\n\n      case \"request-element-position\":\n        if (selectedElementId) {\n          const elements = findElementsById(selectedElementId);\n          if (elements.length > 0) {\n            const element = elements[0];\n            const rect = element!.getBoundingClientRect();\n\n            const viewportHeight = window.innerHeight;\n            const viewportWidth = window.innerWidth;\n            const isInViewport =\n              rect.top < viewportHeight &&\n              rect.bottom > 0 &&\n              rect.left < viewportWidth &&\n              rect.right > 0;\n\n            const elementPosition = {\n              top: rect.top,\n              left: rect.left,\n              right: rect.right,\n              bottom: rect.bottom,\n              width: rect.width,\n              height: rect.height,\n              centerX: rect.left + rect.width / 2,\n              centerY: rect.top + rect.height / 2,\n            };\n\n            window.parent.postMessage(\n              {\n                type: \"element-position-update\",\n                position: elementPosition,\n                isInViewport: isInViewport,\n                visualSelectorId: selectedElementId,\n              },\n              \"*\"\n            );\n          }\n        }\n        break;\n\n      case \"popover-drag-state\":\n        if (message.data && message.data.isDragging !== undefined) {\n          isPopoverDragging = message.data.isDragging;\n          if (message.data.isDragging) {\n            clearHoverOverlays();\n          }\n        }\n        break;\n\n      case \"dropdown-state\":\n        if (message.data && message.data.isOpen !== undefined) {\n          isDropdownOpen = message.data.isOpen;\n          if (message.data.isOpen) {\n            clearHoverOverlays();\n          }\n        }\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  // Handle window resize to reposition overlays\n  const handleResize = () => {\n    if (selectedElementId) {\n      const elements = findElementsById(selectedElementId);\n      selectedOverlays.forEach((overlay, index) => {\n        if (index < elements.length) {\n          positionOverlay(overlay, elements[index]!);\n        }\n      });\n    }\n\n    if (currentHighlightedElements.length > 0) {\n      hoverOverlays.forEach((overlay, index) => {\n        if (index < currentHighlightedElements.length) {\n          positionOverlay(overlay, currentHighlightedElements[index]!);\n        }\n      });\n    }\n  };\n\n  // Initialize: Add IDs to elements that don't have them but have linenumbers\n  const elementsWithLineNumber = document.querySelectorAll(\n    \"[data-linenumber]:not([data-visual-selector-id])\"\n  );\n  elementsWithLineNumber.forEach((el, index) => {\n    const htmlEl = el as HTMLElement;\n    const id = `visual-id-${htmlEl.dataset.filename}-${htmlEl.dataset.linenumber}-${index}`;\n    htmlEl.dataset.visualSelectorId = id;\n  });\n\n  // Create mutation observer to detect layout changes\n  const mutationObserver = new MutationObserver((mutations) => {\n    const needsUpdate = mutations.some((mutation) => {\n      const hasVisualId = (node: Node): boolean => {\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          const el = node as HTMLElement;\n          if (el.dataset && el.dataset.visualSelectorId) {\n            return true;\n          }\n          for (let i = 0; i < el.children.length; i++) {\n            if (hasVisualId(el.children[i]!)) {\n              return true;\n            }\n          }\n        }\n        return false;\n      };\n\n      const isLayoutChange =\n        mutation.type === \"attributes\" &&\n        (mutation.attributeName === \"style\" ||\n          mutation.attributeName === \"class\" ||\n          mutation.attributeName === \"width\" ||\n          mutation.attributeName === \"height\");\n\n      return isLayoutChange && hasVisualId(mutation.target);\n    });\n\n    if (needsUpdate) {\n      setTimeout(handleResize, 50);\n    }\n  });\n\n  // Set up event listeners\n  window.addEventListener(\"message\", handleMessage);\n  window.addEventListener(\"scroll\", handleScroll, true);\n  document.addEventListener(\"scroll\", handleScroll, true);\n  window.addEventListener(\"resize\", handleResize);\n  window.addEventListener(\"scroll\", handleResize);\n\n  // Start observing DOM mutations\n  mutationObserver.observe(document.body, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n    attributeFilter: [\"style\", \"class\", \"width\", \"height\"],\n  });\n\n  // Send ready message to parent\n  window.parent.postMessage({ type: \"visual-edit-agent-ready\" }, \"*\");\n}"],"mappings":"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","names":["findElementsById","id","sourceElements","updateElementClasses","elements","classes","element","setupVisualEditAgent","isVisualEditMode","isPopoverDragging","isDropdownOpen","hoverOverlays","selectedOverlays","currentHighlightedElements","selectedElementId","createOverlay","isSelected","overlay","positionOverlay","element","rect","label","clearHoverOverlays","handleMouseOver","e","target","htmlElement","selectorId","elements","findElementsById","el","handleMouseOut","handleElementClick","visualSelectorId","elementPosition","isTextElement","svgElement","elementData","unselectElement","updateElementClassesAndReposition","classes","updateElementClasses","index","updateElementContent","content","toggleVisualEditMode","isEnabled","handleScroll","viewportHeight","viewportWidth","isInViewport","handleMessage","event","message","handleResize","htmlEl","id","mutationObserver","mutations","mutation","hasVisualId","node","i"]}
+{"version":3,"sources":["../../src/injections/utils.ts","../../src/injections/layer-dropdown/consts.ts","../../src/injections/layer-dropdown/utils.ts","../../src/injections/layer-dropdown/dropdown-ui.ts","../../src/injections/layer-dropdown/controller.ts","../../src/injections/visual-edit-agent.ts"],"sourcesContent":["/** Check if an element has instrumentation attributes */\nexport function isInstrumentedElement(element: Element): boolean {\n  const htmlEl = element as HTMLElement;\n  return !!(\n    htmlEl.dataset?.sourceLocation || htmlEl.dataset?.visualSelectorId\n  );\n}\n\n/** Get the selector ID from an element's data attributes (prefers source-location) */\nexport function getElementSelectorId(element: Element): string | null {\n  const htmlEl = element as HTMLElement;\n  return (\n    htmlEl.dataset?.sourceLocation ||\n    htmlEl.dataset?.visualSelectorId ||\n    null\n  );\n}\n\nexport const ALLOWED_ATTRIBUTES: string[] = [\"src\"];\n\n/** Find elements by ID - first try data-source-location, fallback to data-visual-selector-id */\nexport function findElementsById(id: string | null): Element[] {\n  if (!id) return [];\n  const sourceElements = Array.from(\n    document.querySelectorAll(`[data-source-location=\"${id}\"]`)\n  );\n  if (sourceElements.length > 0) {\n    return sourceElements;\n  }\n  return Array.from(\n    document.querySelectorAll(`[data-visual-selector-id=\"${id}\"]`)\n  );\n}\n\n/**\n * Update element classes by visual selector ID.\n * Uses setAttribute instead of className to support both HTML and SVG elements.\n */\nexport function updateElementClasses(elements: Element[], classes: string): void {\n  elements.forEach((element) => {\n    element.setAttribute(\"class\", classes);\n  });\n}\n\n/** Set a single attribute on all provided elements. */\nexport function updateElementAttribute(elements: Element[], attribute: string, value: string): void {\n  if (!ALLOWED_ATTRIBUTES.includes(attribute)) {\n    return;\n  }\n\n  elements.forEach((element) => {\n    element.setAttribute(attribute, value);\n  });\n}\n\n/** Collect attribute values from an element for a given allowlist. */\nexport function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {\n  const attributes: Record<string, string> = {};\n  for (const attr of allowedAttributes) {\n    const val = element.getAttribute(attr);\n    if (val !== null) {\n      attributes[attr] = val;\n    }\n  }\n  return attributes;\n}\n","/** Style constants for the layer dropdown UI */\n\nexport const DROPDOWN_CONTAINER_STYLES: Record<string, string> = {\n  position: \"absolute\",\n  backgroundColor: \"#ffffff\",\n  border: \"1px solid #e2e8f0\",\n  borderRadius: \"6px\",\n  boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.15)\",\n  fontSize: \"12px\",\n  minWidth: \"120px\",\n  maxHeight: \"200px\",\n  overflowY: \"auto\",\n  zIndex: \"10001\",\n  padding: \"4px 0\",\n  pointerEvents: \"auto\",\n};\n\nexport const DROPDOWN_ITEM_BASE_STYLES: Record<string, string> = {\n  padding: \"4px 12px\",\n  cursor: \"pointer\",\n  color: \"#334155\",\n  backgroundColor: \"transparent\",\n  whiteSpace: \"nowrap\",\n  lineHeight: \"1.5\",\n  fontWeight: \"400\",\n};\n\nexport const DROPDOWN_ITEM_ACTIVE_COLOR = \"#526cff\";\nexport const DROPDOWN_ITEM_ACTIVE_BG = \"#DBEAFE\";\nexport const DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT = \"600\";\n\nexport const DROPDOWN_ITEM_HOVER_BG = \"#f1f5f9\";\n\nexport const DEPTH_INDENT_PX = 10;\n\n/** Chevron shown when dropdown is collapsed (click to expand) */\nexport const CHEVRON_COLLAPSED = \" \\u25BE\";\n/** Chevron shown when dropdown is expanded (click to collapse) */\nexport const CHEVRON_EXPANDED = \" \\u25B4\";\n\nexport const BASE_PADDING_PX = 12;\n\nexport const LAYER_DROPDOWN_ATTR = \"data-layer-dropdown\";\n\n/** Max instrumented ancestors to show above the selected element */\nexport const MAX_PARENT_DEPTH = 2;\n\n/** Max instrumented depth levels to show below the selected element */\nexport const MAX_CHILD_DEPTH = 2;\n","/** DOM utilities for the layer-dropdown module */\n\nimport { isInstrumentedElement, getElementSelectorId } from \"../utils.js\";\nimport { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from \"./consts.js\";\n\nimport type { LayerInfo } from \"./types.js\";\n\n/** Apply a style map to an element */\nexport function applyStyles(element: HTMLElement, styles: Record<string, string>): void {\n  for (const key of Object.keys(styles)) {\n    element.style.setProperty(\n      key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),\n      styles[key]!\n    );\n  }\n}\n\n/** Display name for a layer — just the real tag name */\nexport function getLayerDisplayName(layer: LayerInfo): string {\n  return layer.tagName;\n}\n\nfunction toLayerInfo(element: Element, depth?: number): LayerInfo {\n  const info: LayerInfo = {\n    element,\n    tagName: element.tagName.toLowerCase(),\n    selectorId: getElementSelectorId(element),\n  };\n  if (depth !== undefined) info.depth = depth;\n  return info;\n}\n\n/**\n * Collect instrumented descendants up to `maxDepth` instrumented nesting levels.\n * Non-instrumented wrappers are walked through without counting toward depth.\n * Results are in DOM order.\n * When `startDepth` is provided, assigns `depth` to each item during collection.\n */\nexport function getInstrumentedDescendants(\n  parent: Element,\n  maxDepth: number,\n  startDepth?: number\n): LayerInfo[] {\n  const result: LayerInfo[] = [];\n\n  function walk(el: Element, instrDepth: number): void {\n    if (instrDepth > maxDepth) return;\n    for (let i = 0; i < el.children.length; i++) {\n      const child = el.children[i]!;\n      if (isInstrumentedElement(child)) {\n        const info: LayerInfo = {\n          element: child,\n          tagName: child.tagName.toLowerCase(),\n          selectorId: getElementSelectorId(child),\n        };\n        if (startDepth !== undefined) {\n          info.depth = startDepth + instrDepth - 1;\n        }\n        result.push(info);\n        walk(child, instrDepth + 1);\n      } else {\n        walk(child, instrDepth);\n      }\n    }\n  }\n\n  walk(parent, 1);\n  return result;\n}\n\n/** Collect instrumented ancestors from selected element up to MAX_PARENT_DEPTH (outermost first). */\nfunction collectInstrumentedParents(selectedElement: Element): LayerInfo[] {\n  const parents: LayerInfo[] = [];\n  let current = selectedElement.parentElement;\n  while (\n    current &&\n    current !== document.documentElement &&\n    current !== document.body &&\n    parents.length < MAX_PARENT_DEPTH\n  ) {\n    if (isInstrumentedElement(current)) {\n      parents.push(toLayerInfo(current));\n    }\n    current = current.parentElement;\n  }\n  parents.reverse();\n  return parents;\n}\n\n/** Add parents to chain with depth 0, 1, …; returns depth of selected (parents.length). */\nfunction addParentsToChain(chain: LayerInfo[], parents: LayerInfo[]): number {\n  parents.forEach((p, i) => {\n    chain.push({ ...p, depth: i });\n  });\n  return parents.length;\n}\n\n/** Add selected element and its descendants at the given depth. */\nfunction addSelfAndDescendantsToChain(\n  chain: LayerInfo[],\n  selectedElement: Element,\n  selfDepth: number\n): void {\n  chain.push(toLayerInfo(selectedElement, selfDepth));\n  const descendants = getInstrumentedDescendants(\n    selectedElement,\n    MAX_CHILD_DEPTH,\n    selfDepth + 1\n  );\n  chain.push(...descendants);\n}\n\n/** Get the innermost instrumented parent's DOM element, or null if none. */\nfunction getImmediateInstrParent(parents: LayerInfo[]): Element | null {\n  return parents.at(-1)?.element ?? null;\n}\n\n/** Collect instrumented siblings of the selected element from its parent (DOM order). */\nfunction collectSiblings(parent: Element, selectedElement: Element): LayerInfo[] {\n  const siblings = getInstrumentedDescendants(parent, 1);\n  if (!siblings.some((s) => s.element === selectedElement)) {\n    siblings.push(toLayerInfo(selectedElement));\n  }\n  return siblings;\n}\n\n/** Add siblings at selfDepth, expanding children only for the selected element. */\nfunction appendSiblingsWithSelected(\n  chain: LayerInfo[],\n  siblings: LayerInfo[],\n  selectedElement: Element,\n  selfDepth: number\n): void {\n  const selectedSelectorId = getElementSelectorId(selectedElement);\n  const seen = new Set<string>();\n  for (const sibling of siblings) {\n    if (sibling.element === selectedElement) {\n      addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);\n      if (selectedSelectorId) seen.add(selectedSelectorId);\n    } else {\n      const id = sibling.selectorId;\n      if (id != null) {\n        if (id === selectedSelectorId || seen.has(id)) continue;\n        seen.add(id);\n      }\n      chain.push({ ...sibling, depth: selfDepth });\n    }\n  }\n}\n\n/**\n * Build the layer chain for the dropdown:\n *\n *   Parents  – up to MAX_PARENT_DEPTH instrumented ancestors, outer → inner.\n *   Siblings – instrumented children of the immediate parent, at the same depth.\n *   Current  – the selected element (highlighted), with children expanded.\n *   Children – instrumented descendants within MAX_CHILD_DEPTH levels, DOM order.\n *\n * Each item carries a `depth` for visual indentation.\n */\nexport function buildLayerChain(selectedElement: Element): LayerInfo[] {\n  const parents = collectInstrumentedParents(selectedElement);\n  const chain: LayerInfo[] = [];\n  const selfDepth = addParentsToChain(chain, parents);\n\n  const instrParent = getImmediateInstrParent(parents);\n  if (instrParent) {\n    const siblings = collectSiblings(instrParent, selectedElement);\n    appendSiblingsWithSelected(chain, siblings, selectedElement, selfDepth);\n  } else {\n    addSelfAndDescendantsToChain(chain, selectedElement, selfDepth);\n  }\n\n  return chain;\n}\n","/** Dropdown UI component for layer navigation */\n\nimport {\n  DROPDOWN_CONTAINER_STYLES,\n  DROPDOWN_ITEM_BASE_STYLES,\n  DROPDOWN_ITEM_ACTIVE_COLOR,\n  DROPDOWN_ITEM_ACTIVE_BG,\n  DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT,\n  DROPDOWN_ITEM_HOVER_BG,\n  DEPTH_INDENT_PX,\n  BASE_PADDING_PX,\n  CHEVRON_COLLAPSED,\n  CHEVRON_EXPANDED,\n  LAYER_DROPDOWN_ATTR,\n} from \"./consts.js\";\nimport { applyStyles, getLayerDisplayName } from \"./utils.js\";\nimport type { LayerInfo, DropdownCallbacks } from \"./types.js\";\n\nlet activeDropdown: HTMLDivElement | null = null;\nlet activeLabel: HTMLDivElement | null = null;\nlet outsideMousedownHandler: ((e: MouseEvent) => void) | null = null;\nlet activeOnHoverEnd: (() => void) | null = null;\nlet activeKeydownHandler: ((e: KeyboardEvent) => void) | null = null;\n\nfunction createDropdownItem(\n  layer: LayerInfo,\n  isActive: boolean,\n  { onSelect, onHover, onHoverEnd }: DropdownCallbacks\n): HTMLDivElement {\n  const item = document.createElement(\"div\");\n  item.textContent = getLayerDisplayName(layer);\n  applyStyles(item, DROPDOWN_ITEM_BASE_STYLES);\n\n  const depth = layer.depth ?? 0;\n  if (depth > 0) {\n    item.style.paddingLeft = `${BASE_PADDING_PX + depth * DEPTH_INDENT_PX}px`;\n  }\n\n  if (isActive) {\n    item.style.color = DROPDOWN_ITEM_ACTIVE_COLOR;\n    item.style.backgroundColor = DROPDOWN_ITEM_ACTIVE_BG;\n    item.style.fontWeight = DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT;\n  }\n\n  item.addEventListener(\"mouseenter\", () => {\n    if (!isActive) item.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;\n    if (onHover) onHover(layer);\n  });\n\n  item.addEventListener(\"mouseleave\", () => {\n    if (!isActive) item.style.backgroundColor = \"transparent\";\n    if (onHoverEnd) onHoverEnd();\n  });\n\n  item.addEventListener(\"click\", (e: MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    onSelect(layer);\n  });\n\n  return item;\n}\n\n/** Create the dropdown DOM element with layer items */\nexport function createDropdownElement(\n  layers: LayerInfo[],\n  currentElement: Element | null,\n  callbacks: DropdownCallbacks\n): HTMLDivElement {\n  const container = document.createElement(\"div\");\n  container.setAttribute(LAYER_DROPDOWN_ATTR, \"true\");\n  applyStyles(container, DROPDOWN_CONTAINER_STYLES);\n\n  layers.forEach((layer) => {\n    const isActive = layer.element === currentElement;\n    container.appendChild(createDropdownItem(layer, isActive, callbacks));\n  });\n\n  return container;\n}\n\n/** Add chevron indicator and pointer-events to the label */\nexport function enhanceLabelWithChevron(label: HTMLDivElement): void {\n  const t = label.textContent ?? \"\";\n  if (t.endsWith(CHEVRON_COLLAPSED) || t.endsWith(CHEVRON_EXPANDED)) return;\n\n  label.textContent = t + CHEVRON_COLLAPSED;\n  label.style.cursor = \"pointer\";\n  label.style.userSelect = \"none\";\n  label.style.whiteSpace = \"nowrap\";\n  label.style.pointerEvents = \"auto\";\n  label.setAttribute(LAYER_DROPDOWN_ATTR, \"true\");\n}\n\nfunction setupKeyboardNavigation(\n  dropdown: HTMLDivElement,\n  layers: LayerInfo[],\n  currentElement: Element | null,\n  { onSelect, onHover, onHoverEnd }: DropdownCallbacks\n): void {\n  const items = Array.from(dropdown.children) as HTMLDivElement[];\n  let focusedIndex = layers.findIndex((l) => l.element === currentElement);\n\n  const setFocusedItem = (index: number) => {\n    if (focusedIndex >= 0 && focusedIndex < items.length) {\n      const prev = items[focusedIndex]!;\n      if (prev.style.color !== DROPDOWN_ITEM_ACTIVE_COLOR) {\n        prev.style.backgroundColor = \"transparent\";\n      }\n    }\n    focusedIndex = index;\n    if (focusedIndex >= 0 && focusedIndex < items.length) {\n      const cur = items[focusedIndex]!;\n      if (cur.style.color !== DROPDOWN_ITEM_ACTIVE_COLOR) {\n        cur.style.backgroundColor = DROPDOWN_ITEM_HOVER_BG;\n      }\n      cur.scrollIntoView({ block: \"nearest\" });\n      if (onHover && focusedIndex >= 0 && focusedIndex < layers.length) {\n        onHover(layers[focusedIndex]!);\n      }\n    }\n  };\n\n  activeKeydownHandler = (e: KeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      e.stopPropagation();\n      setFocusedItem(focusedIndex < items.length - 1 ? focusedIndex + 1 : 0);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      e.stopPropagation();\n      setFocusedItem(focusedIndex > 0 ? focusedIndex - 1 : items.length - 1);\n    } else if (e.key === \"Enter\" && focusedIndex >= 0 && focusedIndex < layers.length) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (onHoverEnd) onHoverEnd();\n      onSelect(layers[focusedIndex]!);\n      closeDropdown();\n    }\n  };\n  document.addEventListener(\"keydown\", activeKeydownHandler, true);\n}\n\nfunction setupOutsideClickHandler(\n  dropdown: HTMLDivElement,\n  label: HTMLDivElement\n): void {\n  let skipFirst = true;\n  outsideMousedownHandler = (e: MouseEvent) => {\n    if (skipFirst) { skipFirst = false; return; }\n    const target = e.target as Node;\n    if (!dropdown.contains(target) && target !== label) {\n      closeDropdown();\n    }\n  };\n  document.addEventListener(\"mousedown\", outsideMousedownHandler, true);\n}\n\n/** Show the dropdown below the label element */\nexport function showDropdown(\n  label: HTMLDivElement,\n  layers: LayerInfo[],\n  currentElement: Element | null,\n  callbacks: DropdownCallbacks\n): void {\n  closeDropdown();\n\n  const dropdown = createDropdownElement(\n    layers,\n    currentElement,\n    {\n      ...callbacks,\n      onSelect: (layer) => {\n        if (callbacks.onHoverEnd) callbacks.onHoverEnd();\n        callbacks.onSelect(layer);\n        closeDropdown();\n      },\n    }\n  );\n\n  const overlay = label.parentElement;\n  if (!overlay) return;\n\n  dropdown.style.top = `${label.offsetTop + label.offsetHeight + 2}px`;\n  dropdown.style.left = `${label.offsetLeft}px`;\n\n  overlay.appendChild(dropdown);\n  activeDropdown = dropdown;\n  activeLabel = label;\n  if (label.textContent?.endsWith(CHEVRON_COLLAPSED.trim())) {\n    label.textContent = label.textContent.slice(0, -CHEVRON_COLLAPSED.length) + CHEVRON_EXPANDED;\n  }\n  activeOnHoverEnd = callbacks.onHoverEnd ?? null;\n\n  setupKeyboardNavigation(dropdown, layers, currentElement, callbacks);\n  setupOutsideClickHandler(dropdown, label);\n}\n\n/** Close the active dropdown and clean up listeners */\nexport function closeDropdown(): void {\n  if (activeLabel?.textContent?.includes(CHEVRON_EXPANDED)) {\n    activeLabel.textContent = activeLabel.textContent.replace(CHEVRON_EXPANDED, CHEVRON_COLLAPSED);\n  }\n  activeLabel = null;\n\n  if (activeOnHoverEnd) {\n    activeOnHoverEnd();\n    activeOnHoverEnd = null;\n  }\n\n  if (activeDropdown && activeDropdown.parentNode) {\n    activeDropdown.remove();\n  }\n  activeDropdown = null;\n\n  if (outsideMousedownHandler) {\n    document.removeEventListener(\"mousedown\", outsideMousedownHandler, true);\n    outsideMousedownHandler = null;\n  }\n\n  if (activeKeydownHandler) {\n    document.removeEventListener(\"keydown\", activeKeydownHandler, true);\n    activeKeydownHandler = null;\n  }\n}\n\n/** Check if a dropdown is currently visible */\nexport function isDropdownOpen(): boolean {\n  return activeDropdown !== null;\n}\n","/** Controller that encapsulates layer-dropdown integration logic */\n\nimport { getElementSelectorId } from \"../utils.js\";\nimport { buildLayerChain } from \"./utils.js\";\nimport {\n  enhanceLabelWithChevron,\n  showDropdown,\n  closeDropdown,\n  isDropdownOpen,\n} from \"./dropdown-ui.js\";\nimport type { LayerInfo, LayerControllerConfig, LayerController } from \"./types.js\";\n\nexport function createLayerController(config: LayerControllerConfig): LayerController {\n  let layerPreviewOverlay: HTMLDivElement | null = null;\n  let escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  let dropdownSourceLayer: LayerInfo | null = null;\n\n  const clearLayerPreview = () => {\n    if (layerPreviewOverlay && layerPreviewOverlay.parentNode) {\n      layerPreviewOverlay.remove();\n    }\n    layerPreviewOverlay = null;\n  };\n\n  const showLayerPreview = (layer: LayerInfo) => {\n    clearLayerPreview();\n    if (getElementSelectorId(layer.element) === config.getSelectedElementId()) return;\n\n    layerPreviewOverlay = config.createPreviewOverlay(layer.element);\n  };\n\n  const selectLayer = (layer: LayerInfo) => {\n    clearLayerPreview();\n    closeDropdown();\n    if (escapeHandler) {\n      document.removeEventListener(\"keydown\", escapeHandler, true);\n      escapeHandler = null;\n    }\n    dropdownSourceLayer = null;\n\n    const firstOverlay = config.selectElement(layer.element);\n    attachToOverlay(firstOverlay, layer.element);\n  };\n\n  const restoreSelection = () => {\n    if (escapeHandler) {\n      document.removeEventListener(\"keydown\", escapeHandler, true);\n      escapeHandler = null;\n    }\n    if (dropdownSourceLayer) {\n      selectLayer(dropdownSourceLayer);\n      dropdownSourceLayer = null;\n    }\n  };\n\n  const handleLabelClick = (e: MouseEvent, label: HTMLDivElement, element: Element, layers: LayerInfo[], currentId: string | null) => {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isDropdownOpen()) {\n      closeDropdown();\n      restoreSelection();\n    } else {\n      dropdownSourceLayer = {\n        element,\n        tagName: element.tagName.toLowerCase(),\n        selectorId: currentId,\n      };\n      config.onDeselect();\n\n      escapeHandler = (ev: KeyboardEvent) => {\n        if (ev.key === \"Escape\") {\n          ev.stopPropagation();\n          closeDropdown();\n          restoreSelection();\n        }\n      };\n      document.addEventListener(\"keydown\", escapeHandler, true);\n\n      showDropdown(label, layers, element, { onSelect: selectLayer, onHover: showLayerPreview, onHoverEnd: clearLayerPreview });\n    }\n  };\n\n  const attachToOverlay = (\n    overlay: HTMLDivElement | undefined,\n    element: Element\n  ) => {\n    if (!overlay) return;\n\n    const label = overlay.querySelector(\"div\") as HTMLDivElement | null;\n    if (!label) return;\n\n    const layers = buildLayerChain(element);\n    if (layers.length <= 1) return;\n\n    const currentId = getElementSelectorId(element);\n    enhanceLabelWithChevron(label);\n\n    label.addEventListener(\"click\", (e: MouseEvent) => {\n      handleLabelClick(e, label, element, layers, currentId);\n    });\n  };\n\n  const cleanup = () => {\n    clearLayerPreview();\n    closeDropdown();\n  };\n\n  return { attachToOverlay, cleanup };\n}\n","import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId } from \"./utils.js\";\nimport { createLayerController } from \"./layer-dropdown/controller.js\";\nimport { LAYER_DROPDOWN_ATTR } from \"./layer-dropdown/consts.js\";\n\nexport function setupVisualEditAgent() {\n  // State variables (replacing React useState/useRef)\n  let isVisualEditMode = false;\n  let isPopoverDragging = false;\n  let isDropdownOpen = false;\n  let hoverOverlays: HTMLDivElement[] = [];\n  let selectedOverlays: HTMLDivElement[] = [];\n  let currentHighlightedElements: Element[] = [];\n  let selectedElementId: string | null = null;\n\n  // Create overlay element\n  const createOverlay = (isSelected = false): HTMLDivElement => {\n    const overlay = document.createElement(\"div\");\n    overlay.style.position = \"absolute\";\n    overlay.style.pointerEvents = \"none\";\n    overlay.style.transition = \"all 0.1s ease-in-out\";\n    overlay.style.zIndex = \"9999\";\n\n    if (isSelected) {\n      overlay.style.border = \"2px solid #2563EB\";\n    } else {\n      overlay.style.border = \"2px solid #95a5fc\";\n      overlay.style.backgroundColor = \"rgba(99, 102, 241, 0.05)\";\n    }\n\n    return overlay;\n  };\n\n  // Position overlay relative to element\n  const positionOverlay = (\n    overlay: HTMLDivElement,\n    element: Element,\n    isSelected = false\n  ) => {\n    if (!element || !isVisualEditMode) return;\n\n    const htmlElement = element as HTMLElement;\n    // Force layout recalculation\n    void htmlElement.offsetWidth;\n\n    const rect = element.getBoundingClientRect();\n    overlay.style.top = `${rect.top + window.scrollY}px`;\n    overlay.style.left = `${rect.left + window.scrollX}px`;\n    overlay.style.width = `${rect.width}px`;\n    overlay.style.height = `${rect.height}px`;\n\n    // Check if label already exists in overlay\n    let label = overlay.querySelector(\"div\") as HTMLDivElement | null;\n\n    if (!label) {\n      label = document.createElement(\"div\");\n      label.textContent = element.tagName.toLowerCase();\n      label.style.position = \"absolute\";\n      label.style.top = \"-27px\";\n      label.style.left = \"-2px\";\n      label.style.padding = \"2px 8px\";\n      label.style.fontSize = \"11px\";\n      label.style.fontWeight = isSelected ? \"500\" : \"400\";\n      label.style.color = isSelected ? \"#ffffff\" : \"#526cff\";\n      label.style.backgroundColor = isSelected ? \"#526cff\" : \"#DBEAFE\";\n      label.style.borderRadius = \"3px\";\n      label.style.minWidth = \"24px\";\n      label.style.textAlign = \"center\";\n      overlay.appendChild(label);\n    }\n  };\n\n  // Clear hover overlays\n  const clearHoverOverlays = () => {\n    hoverOverlays.forEach((overlay) => {\n      if (overlay && overlay.parentNode) {\n        overlay.remove();\n      }\n    });\n    hoverOverlays = [];\n    currentHighlightedElements = [];\n  };\n\n  const clearSelectedOverlays = () => {\n    selectedOverlays.forEach((overlay) => {\n      if (overlay && overlay.parentNode) {\n        overlay.remove();\n      }\n    });\n    selectedOverlays = [];\n  };\n\n  const TEXT_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'a', 'label'];\n\n  const notifyElementSelected = (element: Element) => {\n    const htmlElement = element as HTMLElement;\n    const rect = element.getBoundingClientRect();\n    const svgElement = element as SVGElement;\n    const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());\n    window.parent.postMessage({\n      type: \"element-selected\",\n      tagName: element.tagName,\n      classes:\n        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||\n        element.className ||\n        \"\",\n      visualSelectorId: getElementSelectorId(element),\n      content: isTextElement ? htmlElement.innerText : undefined,\n      dataSourceLocation: htmlElement.dataset.sourceLocation,\n      isDynamicContent: htmlElement.dataset.dynamicContent === \"true\",\n      linenumber: htmlElement.dataset.linenumber,\n      filename: htmlElement.dataset.filename,\n      position: {\n        top: rect.top,\n        left: rect.left,\n        right: rect.right,\n        bottom: rect.bottom,\n        width: rect.width,\n        height: rect.height,\n        centerX: rect.left + rect.width / 2,\n        centerY: rect.top + rect.height / 2,\n      },\n      attributes: collectAllowedAttributes(element, ALLOWED_ATTRIBUTES),\n      isTextElement,\n    }, \"*\");\n  };\n\n  // Select an element: create overlays, update state, notify parent\n  const selectElement = (element: Element): HTMLDivElement | undefined => {\n    const visualSelectorId = getElementSelectorId(element);\n\n    clearSelectedOverlays();\n\n    const elements = findElementsById(visualSelectorId || null);\n    elements.forEach((el) => {\n      const overlay = createOverlay(true);\n      document.body.appendChild(overlay);\n      selectedOverlays.push(overlay);\n      positionOverlay(overlay, el, true);\n    });\n\n    selectedElementId = visualSelectorId || null;\n    clearHoverOverlays();\n    notifyElementSelected(element);\n\n    return selectedOverlays[0];\n  };\n\n  const notifyDeselection = (): void => {\n    selectedElementId = null;\n    window.parent.postMessage({ type: \"unselect-element\" }, \"*\");\n  };\n\n  // Handle mouse over event\n  const handleMouseOver = (e: MouseEvent) => {\n    if (!isVisualEditMode || isPopoverDragging) return;\n\n    const target = e.target as Element;\n\n    // Prevent hover effects when a dropdown is open\n    if (isDropdownOpen) {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Prevent hover effects on SVG path elements\n    if (target.tagName.toLowerCase() === \"path\") {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Support both data-source-location and data-visual-selector-id\n    const element = target.closest(\n      \"[data-source-location], [data-visual-selector-id]\"\n    );\n    if (!element) {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Prefer data-source-location, fallback to data-visual-selector-id\n    const htmlElement = element as HTMLElement;\n    const selectorId =\n      htmlElement.dataset.sourceLocation ||\n      htmlElement.dataset.visualSelectorId;\n\n    // Skip if this element is already selected\n    if (selectedElementId === selectorId) {\n      clearHoverOverlays();\n      return;\n    }\n\n    // Find all elements with the same ID\n    const elements = findElementsById(selectorId || null);\n\n    // Clear previous hover overlays\n    clearHoverOverlays();\n\n    // Create overlays for all matching elements\n    elements.forEach((el) => {\n      const overlay = createOverlay(false);\n      document.body.appendChild(overlay);\n      hoverOverlays.push(overlay);\n      positionOverlay(overlay, el);\n    });\n\n    currentHighlightedElements = elements;\n  };\n\n  // Handle mouse out event\n  const handleMouseOut = () => {\n    if (isPopoverDragging) return;\n    clearHoverOverlays();\n  };\n\n  // Handle element click\n  const handleElementClick = (e: MouseEvent) => {\n    if (!isVisualEditMode) return;\n\n    const target = e.target as Element;\n\n    // Let layer dropdown clicks pass through without interference\n    if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;\n\n    // Close dropdowns when clicking anywhere in iframe if a dropdown is open\n    if (isDropdownOpen) {\n      e.preventDefault();\n      e.stopPropagation();\n      e.stopImmediatePropagation();\n\n      window.parent.postMessage({ type: \"close-dropdowns\" }, \"*\");\n      return;\n    }\n\n    // Prevent clicking on SVG path elements\n    if (target.tagName.toLowerCase() === \"path\") {\n      return;\n    }\n\n    // Prevent default behavior immediately when in visual edit mode\n    e.preventDefault();\n    e.stopPropagation();\n    e.stopImmediatePropagation();\n\n    // Support both data-source-location and data-visual-selector-id\n    const element = target.closest(\n      \"[data-source-location], [data-visual-selector-id]\"\n    );\n    if (!element) {\n      return;\n    }\n\n    const selectedOverlay = selectElement(element);\n    layerController.attachToOverlay(selectedOverlay, element);\n  };\n\n  // Clear the current selection\n  const clearSelection = () => {\n    clearSelectedOverlays();\n    selectedElementId = null;\n  };\n\n  const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {\n    const elements = findElementsById(visualSelectorId);\n    if (elements.length === 0) return;\n\n    updateElementClasses(elements, classes);\n\n    // Use a small delay to allow the browser to recalculate layout before repositioning\n    setTimeout(() => {\n      // Reposition selected overlays\n      if (selectedElementId === visualSelectorId) {\n        selectedOverlays.forEach((overlay, index) => {\n          if (index < elements.length) {\n            positionOverlay(overlay, elements[index]!);\n          }\n        });\n      }\n\n      // Reposition hover overlays if needed\n      if (currentHighlightedElements.length > 0) {\n        const hoveredElement = currentHighlightedElements[0] as HTMLElement;\n        const hoveredId = hoveredElement?.dataset?.visualSelectorId;\n        if (hoveredId === visualSelectorId) {\n          hoverOverlays.forEach((overlay, index) => {\n            if (index < currentHighlightedElements.length) {\n              positionOverlay(overlay, currentHighlightedElements[index]!);\n            }\n          });\n        }\n      }\n    }, 50);\n  };\n\n  // Update element attribute by visual selector ID\n  const updateElementAttributeAndReposition = (\n    visualSelectorId: string,\n    attribute: string,\n    value: string\n  ) => {\n    const elements = findElementsById(visualSelectorId);\n    if (elements.length === 0) return;\n\n    updateElementAttribute(elements, attribute, value);\n\n    // Reposition overlays after attribute change (e.g. image src swap can affect layout)\n    setTimeout(() => {\n      if (selectedElementId === visualSelectorId) {\n        selectedOverlays.forEach((overlay, index) => {\n          if (index < elements.length) {\n            positionOverlay(overlay, elements[index]!);\n          }\n        });\n      }\n    }, 50);\n  };\n\n  // Update element content by visual selector ID\n  const updateElementContent = (visualSelectorId: string, content: string) => {\n    const elements = findElementsById(visualSelectorId);\n\n    if (elements.length === 0) {\n      return;\n    }\n\n    elements.forEach((element) => {\n      (element as HTMLElement).innerText = content;\n    });\n\n    setTimeout(() => {\n      if (selectedElementId === visualSelectorId) {\n        selectedOverlays.forEach((overlay, index) => {\n          if (index < elements.length) {\n            positionOverlay(overlay, elements[index]!);\n          }\n        });\n      }\n    }, 50);\n  };\n\n  // --- Layer dropdown controller ---\n  const layerController = createLayerController({\n    createPreviewOverlay: (element: Element) => {\n      const overlay = createOverlay(false);\n      overlay.style.zIndex = \"9998\";\n      document.body.appendChild(overlay);\n      positionOverlay(overlay, element);\n      return overlay;\n    },\n    getSelectedElementId: () => selectedElementId,\n    selectElement,\n    onDeselect: notifyDeselection,\n  });\n\n  // Toggle visual edit mode\n  const toggleVisualEditMode = (isEnabled: boolean) => {\n    isVisualEditMode = isEnabled;\n\n    if (!isEnabled) {\n      layerController.cleanup();\n      clearHoverOverlays();\n      clearSelectedOverlays();\n\n      currentHighlightedElements = [];\n      selectedElementId = null;\n      document.body.style.cursor = \"default\";\n\n      document.removeEventListener(\"mouseover\", handleMouseOver);\n      document.removeEventListener(\"mouseout\", handleMouseOut);\n      document.removeEventListener(\"click\", handleElementClick, true);\n    } else {\n      document.body.style.cursor = \"crosshair\";\n      document.addEventListener(\"mouseover\", handleMouseOver);\n      document.addEventListener(\"mouseout\", handleMouseOut);\n      document.addEventListener(\"click\", handleElementClick, true);\n    }\n  };\n\n  // Handle scroll events to update popover position\n  const handleScroll = () => {\n    if (selectedElementId) {\n      const elements = findElementsById(selectedElementId);\n      if (elements.length > 0) {\n        const element = elements[0];\n        const rect = element!.getBoundingClientRect();\n\n        const viewportHeight = window.innerHeight;\n        const viewportWidth = window.innerWidth;\n        const isInViewport =\n          rect.top < viewportHeight &&\n          rect.bottom > 0 &&\n          rect.left < viewportWidth &&\n          rect.right > 0;\n\n        const elementPosition = {\n          top: rect.top,\n          left: rect.left,\n          right: rect.right,\n          bottom: rect.bottom,\n          width: rect.width,\n          height: rect.height,\n          centerX: rect.left + rect.width / 2,\n          centerY: rect.top + rect.height / 2,\n        };\n\n        window.parent.postMessage(\n          {\n            type: \"element-position-update\",\n            position: elementPosition,\n            isInViewport: isInViewport,\n            visualSelectorId: selectedElementId,\n          },\n          \"*\"\n        );\n      }\n    }\n  };\n\n  // Handle messages from parent window\n  const handleMessage = (event: MessageEvent) => {\n    const message = event.data;\n\n    switch (message.type) {\n      case \"toggle-visual-edit-mode\":\n        toggleVisualEditMode(message.data.enabled);\n        break;\n\n      case \"update-classes\":\n        if (message.data && message.data.classes !== undefined) {\n          updateElementClassesAndReposition(\n            message.data.visualSelectorId,\n            message.data.classes\n          );\n        } else {\n          console.warn(\n            \"[VisualEditAgent] Invalid update-classes message:\",\n            message\n          );\n        }\n        break;\n\n      case \"update-attribute\":\n        if (\n          message.data &&\n          message.data.visualSelectorId &&\n          message.data.attribute !== undefined &&\n          message.data.value !== undefined\n        ) {\n          updateElementAttributeAndReposition(\n            message.data.visualSelectorId,\n            message.data.attribute,\n            message.data.value\n          );\n        } else {\n          console.warn(\n            \"[VisualEditAgent] Invalid update-attribute message:\",\n            message\n          );\n        }\n        break;\n\n      case \"unselect-element\":\n        clearSelection();\n        break;\n\n      case \"refresh-page\":\n        window.location.reload();\n        break;\n\n      case \"update-content\":\n        if (message.data && message.data.content !== undefined) {\n          updateElementContent(\n            message.data.visualSelectorId,\n            message.data.content\n          );\n        } else {\n          console.warn(\n            \"[VisualEditAgent] Invalid update-content message:\",\n            message\n          );\n        }\n        break;\n\n      case \"request-element-position\":\n        if (selectedElementId) {\n          const elements = findElementsById(selectedElementId);\n          if (elements.length > 0) {\n            const element = elements[0];\n            const rect = element!.getBoundingClientRect();\n\n            const viewportHeight = window.innerHeight;\n            const viewportWidth = window.innerWidth;\n            const isInViewport =\n              rect.top < viewportHeight &&\n              rect.bottom > 0 &&\n              rect.left < viewportWidth &&\n              rect.right > 0;\n\n            const elementPosition = {\n              top: rect.top,\n              left: rect.left,\n              right: rect.right,\n              bottom: rect.bottom,\n              width: rect.width,\n              height: rect.height,\n              centerX: rect.left + rect.width / 2,\n              centerY: rect.top + rect.height / 2,\n            };\n\n            window.parent.postMessage(\n              {\n                type: \"element-position-update\",\n                position: elementPosition,\n                isInViewport: isInViewport,\n                visualSelectorId: selectedElementId,\n              },\n              \"*\"\n            );\n          }\n        }\n        break;\n\n      case \"popover-drag-state\":\n        if (message.data && message.data.isDragging !== undefined) {\n          isPopoverDragging = message.data.isDragging;\n          if (message.data.isDragging) {\n            clearHoverOverlays();\n          }\n        }\n        break;\n\n      case \"dropdown-state\":\n        if (message.data && message.data.isOpen !== undefined) {\n          isDropdownOpen = message.data.isOpen;\n          if (message.data.isOpen) {\n            clearHoverOverlays();\n          }\n        }\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  // Handle window resize to reposition overlays\n  const handleResize = () => {\n    if (selectedElementId) {\n      const elements = findElementsById(selectedElementId);\n      selectedOverlays.forEach((overlay, index) => {\n        if (index < elements.length) {\n          positionOverlay(overlay, elements[index]!);\n        }\n      });\n    }\n\n    if (currentHighlightedElements.length > 0) {\n      hoverOverlays.forEach((overlay, index) => {\n        if (index < currentHighlightedElements.length) {\n          positionOverlay(overlay, currentHighlightedElements[index]!);\n        }\n      });\n    }\n  };\n\n  // Initialize: Add IDs to elements that don't have them but have linenumbers\n  const elementsWithLineNumber = document.querySelectorAll(\n    \"[data-linenumber]:not([data-visual-selector-id])\"\n  );\n  elementsWithLineNumber.forEach((el, index) => {\n    const htmlEl = el as HTMLElement;\n    const id = `visual-id-${htmlEl.dataset.filename}-${htmlEl.dataset.linenumber}-${index}`;\n    htmlEl.dataset.visualSelectorId = id;\n  });\n\n  // Create mutation observer to detect layout changes\n  const mutationObserver = new MutationObserver((mutations) => {\n    const needsUpdate = mutations.some((mutation) => {\n      const hasVisualId = (node: Node): boolean => {\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          const el = node as HTMLElement;\n          if (el.dataset && el.dataset.visualSelectorId) {\n            return true;\n          }\n          for (let i = 0; i < el.children.length; i++) {\n            if (hasVisualId(el.children[i]!)) {\n              return true;\n            }\n          }\n        }\n        return false;\n      };\n\n      const isLayoutChange =\n        mutation.type === \"attributes\" &&\n        (mutation.attributeName === \"style\" ||\n          mutation.attributeName === \"class\" ||\n          mutation.attributeName === \"width\" ||\n          mutation.attributeName === \"height\");\n\n      return isLayoutChange && hasVisualId(mutation.target);\n    });\n\n    if (needsUpdate) {\n      setTimeout(handleResize, 50);\n    }\n  });\n\n  // Set up event listeners\n  window.addEventListener(\"message\", handleMessage);\n  window.addEventListener(\"scroll\", handleScroll, true);\n  document.addEventListener(\"scroll\", handleScroll, true);\n  window.addEventListener(\"resize\", handleResize);\n  window.addEventListener(\"scroll\", handleResize);\n\n  // Start observing DOM mutations\n  mutationObserver.observe(document.body, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n    attributeFilter: [\"style\", \"class\", \"width\", \"height\"],\n  });\n\n  // Send ready message to parent\n  window.parent.postMessage({ type: \"visual-edit-agent-ready\" }, \"*\");\n}"],"mappings":"AACO,SAASA,EAAsBC,EAA2B,CAC/D,IAAMC,EAASD,EACf,MAAO,CAAC,EACNC,EAAO,SAAS,gBAAkBA,EAAO,SAAS,iBAEtD,CAGO,SAASC,EAAqBF,EAAiC,CACpE,IAAMC,EAASD,EACf,OACEC,EAAO,SAAS,gBAChBA,EAAO,SAAS,kBAChB,IAEJ,CAEO,IAAME,EAA+B,CAAC,KAAK,EAG3C,SAASC,EAAiBC,EAA8B,CAC7D,GAAI,CAACA,EAAI,MAAO,CAAC,EACjB,IAAMC,EAAiB,MAAM,KAC3B,SAAS,iBAAiB,0BAA0BD,CAAE,IAAI,CAC5D,EACA,OAAIC,EAAe,OAAS,EACnBA,EAEF,MAAM,KACX,SAAS,iBAAiB,6BAA6BD,CAAE,IAAI,CAC/D,CACF,CAMO,SAASE,EAAqBC,EAAqBC,EAAuB,CAC/ED,EAAS,QAASR,GAAY,CAC5BA,EAAQ,aAAa,QAASS,CAAO,CACvC,CAAC,CACH,CAGO,SAASC,EAAuBF,EAAqBG,EAAmBC,EAAqB,CAC7FT,EAAmB,SAASQ,CAAS,GAI1CH,EAAS,QAASR,GAAY,CAC5BA,EAAQ,aAAaW,EAAWC,CAAK,CACvC,CAAC,CACH,CAGO,SAASC,EAAyBb,EAAkBc,EAAqD,CAC9G,IAAMC,EAAqC,CAAC,EAC5C,QAAWC,KAAQF,EAAmB,CACpC,IAAMG,EAAMjB,EAAQ,aAAagB,CAAI,EACjCC,IAAQ,OACVF,EAAWC,CAAI,EAAIC,EAEvB,CACA,OAAOF,CACT,CC/DO,IAAMG,EAAoD,CAC/D,SAAU,WACV,gBAAiB,UACjB,OAAQ,oBACR,aAAc,MACd,UAAW,iCACX,SAAU,OACV,SAAU,QACV,UAAW,QACX,UAAW,OACX,OAAQ,QACR,QAAS,QACT,cAAe,MACjB,EAEaC,EAAoD,CAC/D,QAAS,WACT,OAAQ,UACR,MAAO,UACP,gBAAiB,cACjB,WAAY,SACZ,WAAY,MACZ,WAAY,KACd,EAEaC,EAA6B,UAC7BC,EAA0B,UAC1BC,EAAmC,MAEnCC,EAAyB,UAEzBC,EAAkB,GAGlBC,EAAoB,UAEpBC,EAAmB,UAEnBC,GAAkB,GAElBC,EAAsB,sBAGtBC,GAAmB,EAGnBC,GAAkB,ECxCxB,SAASC,EAAYC,EAAsBC,EAAsC,CACtF,QAAWC,KAAO,OAAO,KAAKD,CAAM,EAClCD,EAAQ,MAAM,YACZE,EAAI,QAAQ,SAAWC,GAAM,IAAIA,EAAE,YAAY,CAAC,EAAE,EAClDF,EAAOC,CAAG,CACZ,CAEJ,CAGO,SAASE,GAAoBC,EAA0B,CAC5D,OAAOA,EAAM,OACf,CAEA,SAASC,EAAYN,EAAkBO,EAA2B,CAChE,IAAMC,EAAkB,CACtB,QAAAR,EACA,QAASA,EAAQ,QAAQ,YAAY,EACrC,WAAYS,EAAqBT,CAAO,CAC1C,EACA,OAAIO,IAAU,SAAWC,EAAK,MAAQD,GAC/BC,CACT,CAQO,SAASE,GACdC,EACAC,EACAC,EACa,CACb,IAAMC,EAAsB,CAAC,EAE7B,SAASC,EAAKC,EAAaC,EAA0B,CACnD,GAAI,EAAAA,EAAaL,GACjB,QAASM,EAAI,EAAGA,EAAIF,EAAG,SAAS,OAAQE,IAAK,CAC3C,IAAMC,EAAQH,EAAG,SAASE,CAAC,EAC3B,GAAIE,EAAsBD,CAAK,EAAG,CAChC,IAAMX,EAAkB,CACtB,QAASW,EACT,QAASA,EAAM,QAAQ,YAAY,EACnC,WAAYV,EAAqBU,CAAK,CACxC,EACIN,IAAe,SACjBL,EAAK,MAAQK,EAAaI,EAAa,GAEzCH,EAAO,KAAKN,CAAI,EAChBO,EAAKI,EAAOF,EAAa,CAAC,CAC5B,MACEF,EAAKI,EAAOF,CAAU,CAE1B,CACF,CAEA,OAAAF,EAAKJ,EAAQ,CAAC,EACPG,CACT,CAGA,SAASO,GAA2BC,EAAuC,CACzE,IAAMC,EAAuB,CAAC,EAC1BC,EAAUF,EAAgB,cAC9B,KACEE,GACAA,IAAY,SAAS,iBACrBA,IAAY,SAAS,MACrBD,EAAQ,OAASE,IAEbL,EAAsBI,CAAO,GAC/BD,EAAQ,KAAKjB,EAAYkB,CAAO,CAAC,EAEnCA,EAAUA,EAAQ,cAEpB,OAAAD,EAAQ,QAAQ,EACTA,CACT,CAGA,SAASG,GAAkBC,EAAoBJ,EAA8B,CAC3E,OAAAA,EAAQ,QAAQ,CAACK,EAAG,IAAM,CACxBD,EAAM,KAAK,CAAE,GAAGC,EAAG,MAAO,CAAE,CAAC,CAC/B,CAAC,EACML,EAAQ,MACjB,CAGA,SAASM,GACPF,EACAL,EACAQ,EACM,CACNH,EAAM,KAAKrB,EAAYgB,EAAiBQ,CAAS,CAAC,EAClD,IAAMC,EAAcrB,GAClBY,EACAU,GACAF,EAAY,CACd,EACAH,EAAM,KAAK,GAAGI,CAAW,CAC3B,CAGA,SAASE,GAAwBV,EAAsC,CACrE,OAAOA,EAAQ,GAAG,EAAE,GAAG,SAAW,IACpC,CAGA,SAASW,GAAgBvB,EAAiBW,EAAuC,CAC/E,IAAMa,EAAWzB,GAA2BC,EAAQ,CAAC,EACrD,OAAKwB,EAAS,KAAMC,GAAMA,EAAE,UAAYd,CAAe,GACrDa,EAAS,KAAK7B,EAAYgB,CAAe,CAAC,EAErCa,CACT,CAGA,SAASE,GACPV,EACAQ,EACAb,EACAQ,EACM,CACN,IAAMQ,EAAqB7B,EAAqBa,CAAe,EACzDiB,EAAO,IAAI,IACjB,QAAWC,KAAWL,EACpB,GAAIK,EAAQ,UAAYlB,EACtBO,GAA6BF,EAAOL,EAAiBQ,CAAS,EAC1DQ,GAAoBC,EAAK,IAAID,CAAkB,MAC9C,CACL,IAAMG,EAAKD,EAAQ,WACnB,GAAIC,GAAM,KAAM,CACd,GAAIA,IAAOH,GAAsBC,EAAK,IAAIE,CAAE,EAAG,SAC/CF,EAAK,IAAIE,CAAE,CACb,CACAd,EAAM,KAAK,CAAE,GAAGa,EAAS,MAAOV,CAAU,CAAC,CAC7C,CAEJ,CAYO,SAASY,GAAgBpB,EAAuC,CACrE,IAAMC,EAAUF,GAA2BC,CAAe,EACpDK,EAAqB,CAAC,EACtBG,EAAYJ,GAAkBC,EAAOJ,CAAO,EAE5CoB,EAAcV,GAAwBV,CAAO,EACnD,GAAIoB,EAAa,CACf,IAAMR,EAAWD,GAAgBS,EAAarB,CAAe,EAC7De,GAA2BV,EAAOQ,EAAUb,EAAiBQ,CAAS,CACxE,MACED,GAA6BF,EAAOL,EAAiBQ,CAAS,EAGhE,OAAOH,CACT,CC5JA,IAAIiB,EAAwC,KACxCC,EAAqC,KACrCC,EAA4D,KAC5DC,EAAwC,KACxCC,EAA4D,KAEhE,SAASC,GACPC,EACAC,EACA,CAAE,SAAAC,EAAU,QAAAC,EAAS,WAAAC,CAAW,EAChB,CAChB,IAAMC,EAAO,SAAS,cAAc,KAAK,EACzCA,EAAK,YAAcC,GAAoBN,CAAK,EAC5CO,EAAYF,EAAMG,CAAyB,EAE3C,IAAMC,EAAQT,EAAM,OAAS,EAC7B,OAAIS,EAAQ,IACVJ,EAAK,MAAM,YAAc,GAAGK,GAAkBD,EAAQE,CAAe,MAGnEV,IACFI,EAAK,MAAM,MAAQO,EACnBP,EAAK,MAAM,gBAAkBQ,EAC7BR,EAAK,MAAM,WAAaS,GAG1BT,EAAK,iBAAiB,aAAc,IAAM,CACnCJ,IAAUI,EAAK,MAAM,gBAAkBU,GACxCZ,GAASA,EAAQH,CAAK,CAC5B,CAAC,EAEDK,EAAK,iBAAiB,aAAc,IAAM,CACnCJ,IAAUI,EAAK,MAAM,gBAAkB,eACxCD,GAAYA,EAAW,CAC7B,CAAC,EAEDC,EAAK,iBAAiB,QAAUW,GAAkB,CAChDA,EAAE,gBAAgB,EAClBA,EAAE,eAAe,EACjBd,EAASF,CAAK,CAChB,CAAC,EAEMK,CACT,CAGO,SAASY,GACdC,EACAC,EACAC,EACgB,CAChB,IAAMC,EAAY,SAAS,cAAc,KAAK,EAC9C,OAAAA,EAAU,aAAaC,EAAqB,MAAM,EAClDf,EAAYc,EAAWE,CAAyB,EAEhDL,EAAO,QAASlB,GAAU,CACxB,IAAMC,EAAWD,EAAM,UAAYmB,EACnCE,EAAU,YAAYtB,GAAmBC,EAAOC,EAAUmB,CAAS,CAAC,CACtE,CAAC,EAEMC,CACT,CAGO,SAASG,GAAwBC,EAA6B,CACnE,IAAMC,EAAID,EAAM,aAAe,GAC3BC,EAAE,SAASC,CAAiB,GAAKD,EAAE,SAASE,CAAgB,IAEhEH,EAAM,YAAcC,EAAIC,EACxBF,EAAM,MAAM,OAAS,UACrBA,EAAM,MAAM,WAAa,OACzBA,EAAM,MAAM,WAAa,SACzBA,EAAM,MAAM,cAAgB,OAC5BA,EAAM,aAAaH,EAAqB,MAAM,EAChD,CAEA,SAASO,GACPC,EACAZ,EACAC,EACA,CAAE,SAAAjB,EAAU,QAAAC,EAAS,WAAAC,CAAW,EAC1B,CACN,IAAM2B,EAAQ,MAAM,KAAKD,EAAS,QAAQ,EACtCE,EAAed,EAAO,UAAWe,GAAMA,EAAE,UAAYd,CAAc,EAEjEe,EAAkBC,GAAkB,CACxC,GAAIH,GAAgB,GAAKA,EAAeD,EAAM,OAAQ,CACpD,IAAMK,EAAOL,EAAMC,CAAY,EAC3BI,EAAK,MAAM,QAAUxB,IACvBwB,EAAK,MAAM,gBAAkB,cAEjC,CAEA,GADAJ,EAAeG,EACXH,GAAgB,GAAKA,EAAeD,EAAM,OAAQ,CACpD,IAAMM,EAAMN,EAAMC,CAAY,EAC1BK,EAAI,MAAM,QAAUzB,IACtByB,EAAI,MAAM,gBAAkBtB,GAE9BsB,EAAI,eAAe,CAAE,MAAO,SAAU,CAAC,EACnClC,GAAW6B,GAAgB,GAAKA,EAAed,EAAO,QACxDf,EAAQe,EAAOc,CAAY,CAAE,CAEjC,CACF,EAEAlC,EAAwBkB,GAAqB,CACvCA,EAAE,MAAQ,aACZA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBkB,EAAeF,EAAeD,EAAM,OAAS,EAAIC,EAAe,EAAI,CAAC,GAC5DhB,EAAE,MAAQ,WACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBkB,EAAeF,EAAe,EAAIA,EAAe,EAAID,EAAM,OAAS,CAAC,GAC5Df,EAAE,MAAQ,SAAWgB,GAAgB,GAAKA,EAAed,EAAO,SACzEF,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EACdZ,GAAYA,EAAW,EAC3BF,EAASgB,EAAOc,CAAY,CAAE,EAC9BM,EAAc,EAElB,EACA,SAAS,iBAAiB,UAAWxC,EAAsB,EAAI,CACjE,CAEA,SAASyC,GACPT,EACAL,EACM,CACN,IAAIe,EAAY,GAChB5C,EAA2BoB,GAAkB,CAC3C,GAAIwB,EAAW,CAAEA,EAAY,GAAO,MAAQ,CAC5C,IAAMC,EAASzB,EAAE,OACb,CAACc,EAAS,SAASW,CAAM,GAAKA,IAAWhB,GAC3Ca,EAAc,CAElB,EACA,SAAS,iBAAiB,YAAa1C,EAAyB,EAAI,CACtE,CAGO,SAAS8C,GACdjB,EACAP,EACAC,EACAC,EACM,CACNkB,EAAc,EAEd,IAAMR,EAAWb,GACfC,EACAC,EACA,CACE,GAAGC,EACH,SAAWpB,GAAU,CACfoB,EAAU,YAAYA,EAAU,WAAW,EAC/CA,EAAU,SAASpB,CAAK,EACxBsC,EAAc,CAChB,CACF,CACF,EAEMK,EAAUlB,EAAM,cACjBkB,IAELb,EAAS,MAAM,IAAM,GAAGL,EAAM,UAAYA,EAAM,aAAe,CAAC,KAChEK,EAAS,MAAM,KAAO,GAAGL,EAAM,UAAU,KAEzCkB,EAAQ,YAAYb,CAAQ,EAC5BpC,EAAiBoC,EACjBnC,EAAc8B,EACVA,EAAM,aAAa,SAASE,EAAkB,KAAK,CAAC,IACtDF,EAAM,YAAcA,EAAM,YAAY,MAAM,EAAG,CAACE,EAAkB,MAAM,EAAIC,GAE9E/B,EAAmBuB,EAAU,YAAc,KAE3CS,GAAwBC,EAAUZ,EAAQC,EAAgBC,CAAS,EACnEmB,GAAyBT,EAAUL,CAAK,EAC1C,CAGO,SAASa,GAAsB,CAChC3C,GAAa,aAAa,SAASiC,CAAgB,IACrDjC,EAAY,YAAcA,EAAY,YAAY,QAAQiC,EAAkBD,CAAiB,GAE/FhC,EAAc,KAEVE,IACFA,EAAiB,EACjBA,EAAmB,MAGjBH,GAAkBA,EAAe,YACnCA,EAAe,OAAO,EAExBA,EAAiB,KAEbE,IACF,SAAS,oBAAoB,YAAaA,EAAyB,EAAI,EACvEA,EAA0B,MAGxBE,IACF,SAAS,oBAAoB,UAAWA,EAAsB,EAAI,EAClEA,EAAuB,KAE3B,CAGO,SAAS8C,IAA0B,CACxC,OAAOlD,IAAmB,IAC5B,CCzNO,SAASmD,GAAsBC,EAAgD,CACpF,IAAIC,EAA6C,KAC7CC,EAAqD,KACrDC,EAAwC,KAEtCC,EAAoB,IAAM,CAC1BH,GAAuBA,EAAoB,YAC7CA,EAAoB,OAAO,EAE7BA,EAAsB,IACxB,EAEMI,EAAoBC,GAAqB,CAC7CF,EAAkB,EACdG,EAAqBD,EAAM,OAAO,IAAMN,EAAO,qBAAqB,IAExEC,EAAsBD,EAAO,qBAAqBM,EAAM,OAAO,EACjE,EAEME,EAAeF,GAAqB,CACxCF,EAAkB,EAClBK,EAAc,EACVP,IACF,SAAS,oBAAoB,UAAWA,EAAe,EAAI,EAC3DA,EAAgB,MAElBC,EAAsB,KAEtB,IAAMO,EAAeV,EAAO,cAAcM,EAAM,OAAO,EACvDK,EAAgBD,EAAcJ,EAAM,OAAO,CAC7C,EAEMM,EAAmB,IAAM,CACzBV,IACF,SAAS,oBAAoB,UAAWA,EAAe,EAAI,EAC3DA,EAAgB,MAEdC,IACFK,EAAYL,CAAmB,EAC/BA,EAAsB,KAE1B,EAEMU,EAAmB,CAACC,EAAeC,EAAuBC,EAAkBC,EAAqBC,IAA6B,CAClIJ,EAAE,gBAAgB,EAClBA,EAAE,eAAe,EACbK,GAAe,GACjBV,EAAc,EACdG,EAAiB,IAEjBT,EAAsB,CACpB,QAAAa,EACA,QAASA,EAAQ,QAAQ,YAAY,EACrC,WAAYE,CACd,EACAlB,EAAO,WAAW,EAElBE,EAAiBkB,GAAsB,CACjCA,EAAG,MAAQ,WACbA,EAAG,gBAAgB,EACnBX,EAAc,EACdG,EAAiB,EAErB,EACA,SAAS,iBAAiB,UAAWV,EAAe,EAAI,EAExDmB,GAAaN,EAAOE,EAAQD,EAAS,CAAE,SAAUR,EAAa,QAASH,EAAkB,WAAYD,CAAkB,CAAC,EAE5H,EAEMO,EAAkB,CACtBW,EACAN,IACG,CACH,GAAI,CAACM,EAAS,OAEd,IAAMP,EAAQO,EAAQ,cAAc,KAAK,EACzC,GAAI,CAACP,EAAO,OAEZ,IAAME,EAASM,GAAgBP,CAAO,EACtC,GAAIC,EAAO,QAAU,EAAG,OAExB,IAAMC,EAAYX,EAAqBS,CAAO,EAC9CQ,GAAwBT,CAAK,EAE7BA,EAAM,iBAAiB,QAAUD,GAAkB,CACjDD,EAAiBC,EAAGC,EAAOC,EAASC,EAAQC,CAAS,CACvD,CAAC,CACH,EAOA,MAAO,CAAE,gBAAAP,EAAiB,QALV,IAAM,CACpBP,EAAkB,EAClBK,EAAc,CAChB,CAEkC,CACpC,CCxGO,SAASgB,IAAuB,CAErC,IAAIC,EAAmB,GACnBC,EAAoB,GACpBC,EAAiB,GACjBC,EAAkC,CAAC,EACnCC,EAAqC,CAAC,EACtCC,EAAwC,CAAC,EACzCC,EAAmC,KAGjCC,EAAgB,CAACC,EAAa,KAA0B,CAC5D,IAAMC,EAAU,SAAS,cAAc,KAAK,EAC5C,OAAAA,EAAQ,MAAM,SAAW,WACzBA,EAAQ,MAAM,cAAgB,OAC9BA,EAAQ,MAAM,WAAa,uBAC3BA,EAAQ,MAAM,OAAS,OAEnBD,EACFC,EAAQ,MAAM,OAAS,qBAEvBA,EAAQ,MAAM,OAAS,oBACvBA,EAAQ,MAAM,gBAAkB,4BAG3BA,CACT,EAGMC,EAAkB,CACtBD,EACAE,EACAH,EAAa,KACV,CACH,GAAI,CAACG,GAAW,CAACX,EAAkB,OAEfW,EAEH,YAEjB,IAAMC,EAAOD,EAAQ,sBAAsB,EAC3CF,EAAQ,MAAM,IAAM,GAAGG,EAAK,IAAM,OAAO,OAAO,KAChDH,EAAQ,MAAM,KAAO,GAAGG,EAAK,KAAO,OAAO,OAAO,KAClDH,EAAQ,MAAM,MAAQ,GAAGG,EAAK,KAAK,KACnCH,EAAQ,MAAM,OAAS,GAAGG,EAAK,MAAM,KAGrC,IAAIC,EAAQJ,EAAQ,cAAc,KAAK,EAElCI,IACHA,EAAQ,SAAS,cAAc,KAAK,EACpCA,EAAM,YAAcF,EAAQ,QAAQ,YAAY,EAChDE,EAAM,MAAM,SAAW,WACvBA,EAAM,MAAM,IAAM,QAClBA,EAAM,MAAM,KAAO,OACnBA,EAAM,MAAM,QAAU,UACtBA,EAAM,MAAM,SAAW,OACvBA,EAAM,MAAM,WAAaL,EAAa,MAAQ,MAC9CK,EAAM,MAAM,MAAQL,EAAa,UAAY,UAC7CK,EAAM,MAAM,gBAAkBL,EAAa,UAAY,UACvDK,EAAM,MAAM,aAAe,MAC3BA,EAAM,MAAM,SAAW,OACvBA,EAAM,MAAM,UAAY,SACxBJ,EAAQ,YAAYI,CAAK,EAE7B,EAGMC,EAAqB,IAAM,CAC/BX,EAAc,QAASM,GAAY,CAC7BA,GAAWA,EAAQ,YACrBA,EAAQ,OAAO,CAEnB,CAAC,EACDN,EAAgB,CAAC,EACjBE,EAA6B,CAAC,CAChC,EAEMU,EAAwB,IAAM,CAClCX,EAAiB,QAASK,GAAY,CAChCA,GAAWA,EAAQ,YACrBA,EAAQ,OAAO,CAEnB,CAAC,EACDL,EAAmB,CAAC,CACtB,EAEMY,EAAY,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,OAAQ,IAAK,OAAO,EAE1EC,EAAyBN,GAAqB,CAClD,IAAMO,EAAcP,EACdC,EAAOD,EAAQ,sBAAsB,EACrCQ,EAAaR,EACbS,EAAgBJ,EAAU,SAASL,EAAQ,SAAS,YAAY,CAAC,EACvE,OAAO,OAAO,YAAY,CACxB,KAAM,mBACN,QAASA,EAAQ,QACjB,QACGQ,EAAW,WAA4C,SACxDR,EAAQ,WACR,GACF,iBAAkBU,EAAqBV,CAAO,EAC9C,QAASS,EAAgBF,EAAY,UAAY,OACjD,mBAAoBA,EAAY,QAAQ,eACxC,iBAAkBA,EAAY,QAAQ,iBAAmB,OACzD,WAAYA,EAAY,QAAQ,WAChC,SAAUA,EAAY,QAAQ,SAC9B,SAAU,CACR,IAAKN,EAAK,IACV,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,OAAQA,EAAK,OACb,MAAOA,EAAK,MACZ,OAAQA,EAAK,OACb,QAASA,EAAK,KAAOA,EAAK,MAAQ,EAClC,QAASA,EAAK,IAAMA,EAAK,OAAS,CACpC,EACA,WAAYU,EAAyBX,EAASY,CAAkB,EAChE,cAAAH,CACF,EAAG,GAAG,CACR,EAGMI,EAAiBb,GAAiD,CACtE,IAAMc,EAAmBJ,EAAqBV,CAAO,EAErD,OAAAI,EAAsB,EAELW,EAAiBD,GAAoB,IAAI,EACjD,QAASE,GAAO,CACvB,IAAMlB,EAAUF,EAAc,EAAI,EAClC,SAAS,KAAK,YAAYE,CAAO,EACjCL,EAAiB,KAAKK,CAAO,EAC7BC,EAAgBD,EAASkB,EAAI,EAAI,CACnC,CAAC,EAEDrB,EAAoBmB,GAAoB,KACxCX,EAAmB,EACnBG,EAAsBN,CAAO,EAEtBP,EAAiB,CAAC,CAC3B,EAEMwB,EAAoB,IAAY,CACpCtB,EAAoB,KACpB,OAAO,OAAO,YAAY,CAAE,KAAM,kBAAmB,EAAG,GAAG,CAC7D,EAGMuB,EAAmBC,GAAkB,CACzC,GAAI,CAAC9B,GAAoBC,EAAmB,OAE5C,IAAM8B,EAASD,EAAE,OAGjB,GAAI5B,EAAgB,CAClBY,EAAmB,EACnB,MACF,CAGA,GAAIiB,EAAO,QAAQ,YAAY,IAAM,OAAQ,CAC3CjB,EAAmB,EACnB,MACF,CAGA,IAAMH,EAAUoB,EAAO,QACrB,mDACF,EACA,GAAI,CAACpB,EAAS,CACZG,EAAmB,EACnB,MACF,CAGA,IAAMI,EAAcP,EACdqB,EACJd,EAAY,QAAQ,gBACpBA,EAAY,QAAQ,iBAGtB,GAAIZ,IAAsB0B,EAAY,CACpClB,EAAmB,EACnB,MACF,CAGA,IAAMmB,EAAWP,EAAiBM,GAAc,IAAI,EAGpDlB,EAAmB,EAGnBmB,EAAS,QAASN,GAAO,CACvB,IAAMlB,EAAUF,EAAc,EAAK,EACnC,SAAS,KAAK,YAAYE,CAAO,EACjCN,EAAc,KAAKM,CAAO,EAC1BC,EAAgBD,EAASkB,CAAE,CAC7B,CAAC,EAEDtB,EAA6B4B,CAC/B,EAGMC,EAAiB,IAAM,CACvBjC,GACJa,EAAmB,CACrB,EAGMqB,EAAsBL,GAAkB,CAC5C,GAAI,CAAC9B,EAAkB,OAEvB,IAAM+B,EAASD,EAAE,OAGjB,GAAIC,EAAO,QAAQ,IAAIK,CAAmB,GAAG,EAAG,OAGhD,GAAIlC,EAAgB,CAClB4B,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBA,EAAE,yBAAyB,EAE3B,OAAO,OAAO,YAAY,CAAE,KAAM,iBAAkB,EAAG,GAAG,EAC1D,MACF,CAGA,GAAIC,EAAO,QAAQ,YAAY,IAAM,OACnC,OAIFD,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBA,EAAE,yBAAyB,EAG3B,IAAMnB,EAAUoB,EAAO,QACrB,mDACF,EACA,GAAI,CAACpB,EACH,OAGF,IAAM0B,EAAkBb,EAAcb,CAAO,EAC7C2B,EAAgB,gBAAgBD,EAAiB1B,CAAO,CAC1D,EAGM4B,GAAiB,IAAM,CAC3BxB,EAAsB,EACtBT,EAAoB,IACtB,EAEMkC,GAAoC,CAACf,EAA0BgB,IAAoB,CACvF,IAAMR,EAAWP,EAAiBD,CAAgB,EAC9CQ,EAAS,SAAW,IAExBS,EAAqBT,EAAUQ,CAAO,EAGtC,WAAW,IAAM,CAEXnC,IAAsBmB,GACxBrB,EAAiB,QAAQ,CAACK,EAASkC,IAAU,CACvCA,EAAQV,EAAS,QACnBvB,EAAgBD,EAASwB,EAASU,CAAK,CAAE,CAE7C,CAAC,EAICtC,EAA2B,OAAS,GACfA,EAA2B,CAAC,GACjB,SAAS,mBACzBoB,GAChBtB,EAAc,QAAQ,CAACM,EAASkC,IAAU,CACpCA,EAAQtC,EAA2B,QACrCK,EAAgBD,EAASJ,EAA2BsC,CAAK,CAAE,CAE/D,CAAC,CAGP,EAAG,EAAE,EACP,EAGMC,GAAsC,CAC1CnB,EACAoB,EACAC,IACG,CACH,IAAMb,EAAWP,EAAiBD,CAAgB,EAC9CQ,EAAS,SAAW,IAExBc,EAAuBd,EAAUY,EAAWC,CAAK,EAGjD,WAAW,IAAM,CACXxC,IAAsBmB,GACxBrB,EAAiB,QAAQ,CAACK,EAASkC,IAAU,CACvCA,EAAQV,EAAS,QACnBvB,EAAgBD,EAASwB,EAASU,CAAK,CAAE,CAE7C,CAAC,CAEL,EAAG,EAAE,EACP,EAGMK,GAAuB,CAACvB,EAA0BwB,IAAoB,CAC1E,IAAMhB,EAAWP,EAAiBD,CAAgB,EAE9CQ,EAAS,SAAW,IAIxBA,EAAS,QAAStB,GAAY,CAC3BA,EAAwB,UAAYsC,CACvC,CAAC,EAED,WAAW,IAAM,CACX3C,IAAsBmB,GACxBrB,EAAiB,QAAQ,CAACK,EAASkC,IAAU,CACvCA,EAAQV,EAAS,QACnBvB,EAAgBD,EAASwB,EAASU,CAAK,CAAE,CAE7C,CAAC,CAEL,EAAG,EAAE,EACP,EAGML,EAAkBY,GAAsB,CAC5C,qBAAuBvC,GAAqB,CAC1C,IAAMF,EAAUF,EAAc,EAAK,EACnC,OAAAE,EAAQ,MAAM,OAAS,OACvB,SAAS,KAAK,YAAYA,CAAO,EACjCC,EAAgBD,EAASE,CAAO,EACzBF,CACT,EACA,qBAAsB,IAAMH,EAC5B,cAAAkB,EACA,WAAYI,CACd,CAAC,EAGKuB,GAAwBC,GAAuB,CACnDpD,EAAmBoD,EAEdA,GAaH,SAAS,KAAK,MAAM,OAAS,YAC7B,SAAS,iBAAiB,YAAavB,CAAe,EACtD,SAAS,iBAAiB,WAAYK,CAAc,EACpD,SAAS,iBAAiB,QAASC,EAAoB,EAAI,IAf3DG,EAAgB,QAAQ,EACxBxB,EAAmB,EACnBC,EAAsB,EAEtBV,EAA6B,CAAC,EAC9BC,EAAoB,KACpB,SAAS,KAAK,MAAM,OAAS,UAE7B,SAAS,oBAAoB,YAAauB,CAAe,EACzD,SAAS,oBAAoB,WAAYK,CAAc,EACvD,SAAS,oBAAoB,QAASC,EAAoB,EAAI,EAOlE,EAGMkB,EAAe,IAAM,CACzB,GAAI/C,EAAmB,CACrB,IAAM2B,EAAWP,EAAiBpB,CAAiB,EACnD,GAAI2B,EAAS,OAAS,EAAG,CAEvB,IAAMrB,EADUqB,EAAS,CAAC,EACJ,sBAAsB,EAEtCqB,EAAiB,OAAO,YACxBC,EAAgB,OAAO,WACvBC,EACJ5C,EAAK,IAAM0C,GACX1C,EAAK,OAAS,GACdA,EAAK,KAAO2C,GACZ3C,EAAK,MAAQ,EAET6C,EAAkB,CACtB,IAAK7C,EAAK,IACV,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,OAAQA,EAAK,OACb,MAAOA,EAAK,MACZ,OAAQA,EAAK,OACb,QAASA,EAAK,KAAOA,EAAK,MAAQ,EAClC,QAASA,EAAK,IAAMA,EAAK,OAAS,CACpC,EAEA,OAAO,OAAO,YACZ,CACE,KAAM,0BACN,SAAU6C,EACV,aAAcD,EACd,iBAAkBlD,CACpB,EACA,GACF,CACF,CACF,CACF,EAGMoD,GAAiBC,GAAwB,CAC7C,IAAMC,EAAUD,EAAM,KAEtB,OAAQC,EAAQ,KAAM,CACpB,IAAK,0BACHT,GAAqBS,EAAQ,KAAK,OAAO,EACzC,MAEF,IAAK,iBACCA,EAAQ,MAAQA,EAAQ,KAAK,UAAY,OAC3CpB,GACEoB,EAAQ,KAAK,iBACbA,EAAQ,KAAK,OACf,EAEA,QAAQ,KACN,oDACAA,CACF,EAEF,MAEF,IAAK,mBAEDA,EAAQ,MACRA,EAAQ,KAAK,kBACbA,EAAQ,KAAK,YAAc,QAC3BA,EAAQ,KAAK,QAAU,OAEvBhB,GACEgB,EAAQ,KAAK,iBACbA,EAAQ,KAAK,UACbA,EAAQ,KAAK,KACf,EAEA,QAAQ,KACN,sDACAA,CACF,EAEF,MAEF,IAAK,mBACHrB,GAAe,EACf,MAEF,IAAK,eACH,OAAO,SAAS,OAAO,EACvB,MAEF,IAAK,iBACCqB,EAAQ,MAAQA,EAAQ,KAAK,UAAY,OAC3CZ,GACEY,EAAQ,KAAK,iBACbA,EAAQ,KAAK,OACf,EAEA,QAAQ,KACN,oDACAA,CACF,EAEF,MAEF,IAAK,2BACH,GAAItD,EAAmB,CACrB,IAAM2B,EAAWP,EAAiBpB,CAAiB,EACnD,GAAI2B,EAAS,OAAS,EAAG,CAEvB,IAAMrB,EADUqB,EAAS,CAAC,EACJ,sBAAsB,EAEtCqB,EAAiB,OAAO,YACxBC,EAAgB,OAAO,WACvBC,EACJ5C,EAAK,IAAM0C,GACX1C,EAAK,OAAS,GACdA,EAAK,KAAO2C,GACZ3C,EAAK,MAAQ,EAET6C,GAAkB,CACtB,IAAK7C,EAAK,IACV,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,OAAQA,EAAK,OACb,MAAOA,EAAK,MACZ,OAAQA,EAAK,OACb,QAASA,EAAK,KAAOA,EAAK,MAAQ,EAClC,QAASA,EAAK,IAAMA,EAAK,OAAS,CACpC,EAEA,OAAO,OAAO,YACZ,CACE,KAAM,0BACN,SAAU6C,GACV,aAAcD,EACd,iBAAkBlD,CACpB,EACA,GACF,CACF,CACF,CACA,MAEF,IAAK,qBACCsD,EAAQ,MAAQA,EAAQ,KAAK,aAAe,SAC9C3D,EAAoB2D,EAAQ,KAAK,WAC7BA,EAAQ,KAAK,YACf9C,EAAmB,GAGvB,MAEF,IAAK,iBACC8C,EAAQ,MAAQA,EAAQ,KAAK,SAAW,SAC1C1D,EAAiB0D,EAAQ,KAAK,OAC1BA,EAAQ,KAAK,QACf9C,EAAmB,GAGvB,MAEF,QACE,KACJ,CACF,EAGM+C,EAAe,IAAM,CACzB,GAAIvD,EAAmB,CACrB,IAAM2B,EAAWP,EAAiBpB,CAAiB,EACnDF,EAAiB,QAAQ,CAACK,EAASkC,IAAU,CACvCA,EAAQV,EAAS,QACnBvB,EAAgBD,EAASwB,EAASU,CAAK,CAAE,CAE7C,CAAC,CACH,CAEItC,EAA2B,OAAS,GACtCF,EAAc,QAAQ,CAACM,EAASkC,IAAU,CACpCA,EAAQtC,EAA2B,QACrCK,EAAgBD,EAASJ,EAA2BsC,CAAK,CAAE,CAE/D,CAAC,CAEL,EAG+B,SAAS,iBACtC,kDACF,EACuB,QAAQ,CAAChB,EAAIgB,IAAU,CAC5C,IAAMmB,EAASnC,EACToC,EAAK,aAAaD,EAAO,QAAQ,QAAQ,IAAIA,EAAO,QAAQ,UAAU,IAAInB,CAAK,GACrFmB,EAAO,QAAQ,iBAAmBC,CACpC,CAAC,EAGD,IAAMC,GAAmB,IAAI,iBAAkBC,GAAc,CACvCA,EAAU,KAAMC,GAAa,CAC/C,IAAMC,EAAeC,GAAwB,CAC3C,GAAIA,EAAK,WAAa,KAAK,aAAc,CACvC,IAAMzC,EAAKyC,EACX,GAAIzC,EAAG,SAAWA,EAAG,QAAQ,iBAC3B,MAAO,GAET,QAAS0C,EAAI,EAAGA,EAAI1C,EAAG,SAAS,OAAQ0C,IACtC,GAAIF,EAAYxC,EAAG,SAAS0C,CAAC,CAAE,EAC7B,MAAO,EAGb,CACA,MAAO,EACT,EASA,OANEH,EAAS,OAAS,eACjBA,EAAS,gBAAkB,SAC1BA,EAAS,gBAAkB,SAC3BA,EAAS,gBAAkB,SAC3BA,EAAS,gBAAkB,WAENC,EAAYD,EAAS,MAAM,CACtD,CAAC,GAGC,WAAWL,EAAc,EAAE,CAE/B,CAAC,EAGD,OAAO,iBAAiB,UAAWH,EAAa,EAChD,OAAO,iBAAiB,SAAUL,EAAc,EAAI,EACpD,SAAS,iBAAiB,SAAUA,EAAc,EAAI,EACtD,OAAO,iBAAiB,SAAUQ,CAAY,EAC9C,OAAO,iBAAiB,SAAUA,CAAY,EAG9CG,GAAiB,QAAQ,SAAS,KAAM,CACtC,WAAY,GACZ,UAAW,GACX,QAAS,GACT,gBAAiB,CAAC,QAAS,QAAS,QAAS,QAAQ,CACvD,CAAC,EAGD,OAAO,OAAO,YAAY,CAAE,KAAM,yBAA0B,EAAG,GAAG,CACpE","names":["isInstrumentedElement","element","htmlEl","getElementSelectorId","ALLOWED_ATTRIBUTES","findElementsById","id","sourceElements","updateElementClasses","elements","classes","updateElementAttribute","attribute","value","collectAllowedAttributes","allowedAttributes","attributes","attr","val","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","CHEVRON_COLLAPSED","CHEVRON_EXPANDED","BASE_PADDING_PX","LAYER_DROPDOWN_ATTR","MAX_PARENT_DEPTH","MAX_CHILD_DEPTH","applyStyles","element","styles","key","m","getLayerDisplayName","layer","toLayerInfo","depth","info","getElementSelectorId","getInstrumentedDescendants","parent","maxDepth","startDepth","result","walk","el","instrDepth","i","child","isInstrumentedElement","collectInstrumentedParents","selectedElement","parents","current","MAX_PARENT_DEPTH","addParentsToChain","chain","p","addSelfAndDescendantsToChain","selfDepth","descendants","MAX_CHILD_DEPTH","getImmediateInstrParent","collectSiblings","siblings","s","appendSiblingsWithSelected","selectedSelectorId","seen","sibling","id","buildLayerChain","instrParent","activeDropdown","activeLabel","outsideMousedownHandler","activeOnHoverEnd","activeKeydownHandler","createDropdownItem","layer","isActive","onSelect","onHover","onHoverEnd","item","getLayerDisplayName","applyStyles","DROPDOWN_ITEM_BASE_STYLES","depth","BASE_PADDING_PX","DEPTH_INDENT_PX","DROPDOWN_ITEM_ACTIVE_COLOR","DROPDOWN_ITEM_ACTIVE_BG","DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT","DROPDOWN_ITEM_HOVER_BG","e","createDropdownElement","layers","currentElement","callbacks","container","LAYER_DROPDOWN_ATTR","DROPDOWN_CONTAINER_STYLES","enhanceLabelWithChevron","label","t","CHEVRON_COLLAPSED","CHEVRON_EXPANDED","setupKeyboardNavigation","dropdown","items","focusedIndex","l","setFocusedItem","index","prev","cur","closeDropdown","setupOutsideClickHandler","skipFirst","target","showDropdown","overlay","isDropdownOpen","createLayerController","config","layerPreviewOverlay","escapeHandler","dropdownSourceLayer","clearLayerPreview","showLayerPreview","layer","getElementSelectorId","selectLayer","closeDropdown","firstOverlay","attachToOverlay","restoreSelection","handleLabelClick","e","label","element","layers","currentId","isDropdownOpen","ev","showDropdown","overlay","buildLayerChain","enhanceLabelWithChevron","setupVisualEditAgent","isVisualEditMode","isPopoverDragging","isDropdownOpen","hoverOverlays","selectedOverlays","currentHighlightedElements","selectedElementId","createOverlay","isSelected","overlay","positionOverlay","element","rect","label","clearHoverOverlays","clearSelectedOverlays","TEXT_TAGS","notifyElementSelected","htmlElement","svgElement","isTextElement","getElementSelectorId","collectAllowedAttributes","ALLOWED_ATTRIBUTES","selectElement","visualSelectorId","findElementsById","el","notifyDeselection","handleMouseOver","e","target","selectorId","elements","handleMouseOut","handleElementClick","LAYER_DROPDOWN_ATTR","selectedOverlay","layerController","clearSelection","updateElementClassesAndReposition","classes","updateElementClasses","index","updateElementAttributeAndReposition","attribute","value","updateElementAttribute","updateElementContent","content","createLayerController","toggleVisualEditMode","isEnabled","handleScroll","viewportHeight","viewportWidth","isInViewport","elementPosition","handleMessage","event","message","handleResize","htmlEl","id","mutationObserver","mutations","mutation","hasVisualId","node","i"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/vite-plugin",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/layer-dropdown/LAYERS.md

@@ -0,0 +1,258 @@
+# Layer Dropdown Feature
+
+## Overview
+
+The layer dropdown lets users navigate the instrumented DOM hierarchy around a selected element. Clicking the chevron (`▾`) on an element's label reveals a dropdown showing **ancestors**, **siblings**, **the selected element**, and its **children** — all with depth-based indentation.
+
+```
+grandparent          (depth 0)
+  parent             (depth 1)
+    sibling-1        (depth 2)
+    ★ selected       (depth 2)   ← highlighted in blue
+      child-a        (depth 3)
+      child-b        (depth 3)
+    sibling-2        (depth 2)
+```
+
+Children are only expanded for the selected element, not for siblings.
+
+---
+
+## Architecture
+
+```
+┌─────────────┐     ┌────────────────┐     ┌────────────────┐
+│  types.ts   │◄────│  controller.ts │────►│  dropdown-ui.ts│
+│  consts.ts  │◄────│  (orchestrator)│     │  (rendering)   │
+└─────────────┘     └───────┬────────┘     └────────────────┘
+                            │
+                      ┌─────▼──────┐
+                      │  utils.ts  │
+                      │ (DOM walk) │
+                      └────────────┘
+```
+
+| File | Role |
+|------|------|
+| **types.ts** | `LayerInfo`, callback types, `LayerControllerDeps`, `LayerController` |
+| **consts.ts** | Style maps, depth limits, chevron character, attribute name |
+| **utils.ts** | DOM traversal — parent walking, sibling/descendant collection, depth assignment |
+| **dropdown-ui.ts** | Creates the dropdown DOM, positions it, handles hover/click/keyboard |
+| **controller.ts** | Stateful factory that wires everything together: build chain, show dropdown, handle selection |
+
+---
+
+## Data Model
+
+### `LayerInfo`
+
+```typescript
+interface LayerInfo {
+  element: Element;            // DOM reference
+  tagName: string;             // lowercase tag name ("div", "button")
+  selectorId: string | null;   // data-source-location or data-visual-selector-id
+  depth?: number;              // visual indentation level (set during chain building)
+}
+```
+
+An element is **instrumented** if it has `dataset.sourceLocation` or `dataset.visualSelectorId`. Only instrumented elements appear in the dropdown.
+
+### Key Constants
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `MAX_PARENT_DEPTH` | `2` | Max ancestor levels shown above selected |
+| `MAX_CHILD_DEPTH` | `2` | Max descendant levels shown below selected |
+| `DEPTH_INDENT_PX` | `10` | Extra left-padding per depth level |
+| `LABEL_CHEVRON` | `" ▾"` | Appended to label text when dropdown is available |
+
+---
+
+## How the Chain Is Built (`utils.ts`)
+
+`buildLayerChain(selectedElement)` is the entry point. It delegates to focused helper functions:
+
+```typescript
+export function buildLayerChain(selectedElement: Element): LayerInfo[] {
+  const parents = collectInstrumentedParents(selectedElement);
+  const chain: LayerInfo[] = [];
+  const selfDepth = appendParentsWithDepth(chain, parents);
+
+  const instrParent = getImmediateInstrParent(parents);
+  if (instrParent) {
+    const siblings = collectSiblings(instrParent, selectedElement);
+    appendSiblingsWithSelected(chain, siblings, selectedElement, selfDepth);
+  } else {
+    appendSelfAndDescendants(chain, selectedElement, selfDepth);
+  }
+
+  return chain;
+}
+```
+
+### Helper Functions
+
+| Function | Purpose |
+|----------|---------|
+| `toLayerInfo(element, depth?)` | Convert a DOM element to a `LayerInfo` object |
+| `collectInstrumentedParents(el)` | Walk up the DOM, collect up to `MAX_PARENT_DEPTH` instrumented ancestors, return outermost-first |
+| `appendParentsWithDepth(chain, parents)` | Push parents into chain with `depth = index` (0, 1, ...), return count as `selfDepth` |
+| `getImmediateInstrParent(parents)` | Return the innermost parent's DOM element, or `null` if `parents` is empty |
+| `collectSiblings(parent, selectedEl)` | Call `getInstrumentedDescendants(parent, 1)` to get all first-level instrumented children in DOM order; safety-guard ensures `selectedEl` is always included |
+| `appendSiblingsWithSelected(chain, siblings, selectedEl, depth)` | Iterate siblings at `selfDepth`; for the selected element, expand children via `appendSelfAndDescendants`; for others, just add at `selfDepth` |
+| `appendSelfAndDescendants(chain, el, depth)` | Push element + its descendants (up to `MAX_CHILD_DEPTH` levels) with assigned depths |
+| `getInstrumentedDescendants(parent, maxDepth)` | Recursive DOM walk — instrumented children increment depth, non-instrumented wrappers are transparent. Results in DOM order |
+| `assignDescendantDepths(root, descendants, startDepth)` | Second-pass walk assigning `depth = startDepth + instrDepth - 1` using a `Set`/`Map` for O(1) lookups |
+
+### Chain-Building Steps
+
+**Step 1 — `collectInstrumentedParents`**: Walk up from `selectedElement.parentElement`, skipping `document.body` and `document.documentElement`. Collect up to `MAX_PARENT_DEPTH` instrumented ancestors, then reverse so outermost comes first.
+
+**Step 2 — `appendParentsWithDepth`**: Each parent gets `depth = index` (0, 1, ...). The count becomes `selfDepth`.
+
+**Step 3 — `getImmediateInstrParent`**: Extract the innermost instrumented parent's element. If `parents` is empty, returns `null` (root-level element).
+
+**Step 4 — `collectSiblings`** (when parent exists): Call `getInstrumentedDescendants(instrParent, 1)` to get all first-level instrumented children of the parent in DOM order — this naturally includes the selected element among its siblings. A safety guard ensures the selected element is always present.
+
+**Step 5 — `appendSiblingsWithSelected`**: Iterate siblings in DOM order, all at `selfDepth`. For the selected element only, delegate to `appendSelfAndDescendants` which also collects and appends children. For other siblings, just push at `selfDepth` with no child expansion.
+
+**Fallback** (no parent): If no instrumented parent exists (root-level element), skip sibling collection and call `appendSelfAndDescendants` directly — just self + children.
+
+---
+
+## Controller Lifecycle (`controller.ts`)
+
+`createLayerController(deps)` returns `{ attachToOverlay, cleanup }`.
+
+### Dependency Injection
+
+| Dep | Called When |
+|-----|------------|
+| `createPreviewOverlay(el)` | User hovers a dropdown item |
+| `getSelectedElementId()` | Checking if hovered item is already selected |
+| `selectElement(el)` | User clicks a dropdown item — performs selection, returns overlay |
+| `onDeselect()` | Dropdown opens — temporarily clears selection for hover previews |
+
+### `attachToOverlay(overlay, element)`
+
+1. Extract the label `<div>` from the overlay.
+2. Call `buildLayerChain(element)`.
+3. **Guard**: if `layers.length <= 1`, return early — no chevron, no click handler. This is how the chevron is hidden when there's nothing to navigate to.
+4. Append chevron via `enhanceLabelWithChevron(label)`.
+5. Bind click handler to label (toggle behavior).
+
+### Click Handler Flow
+
+```
+Label clicked
+  ├─ Dropdown already open → close + reselect source element
+  └─ Dropdown closed →
+       1. Save source element (for Escape restore)
+       2. deps.onDeselect() (clear selection visual)
+       3. Register Escape key listener (capture phase)
+       4. showDropdown(label, layers, callbacks...)
+```
+
+### State Transitions
+
+```
+CLOSED ──[click chevron]──► OPEN
+OPEN   ──[click chevron]──► CLOSED (reselect original)
+OPEN   ──[Escape]──────────► CLOSED (reselect original)
+OPEN   ──[click item]─────► CLOSED → NEW ELEMENT SELECTED → reattach
+OPEN   ──[click outside]──► CLOSED
+```
+
+Selection is recursive — `selectElementFromLayer` calls `deps.selectElement()`, gets a new overlay, and calls `attachToOverlay()` again on it.
+
+---
+
+## Dropdown UI (`dropdown-ui.ts`)
+
+### Global State (singleton)
+
+Only one dropdown can be active at a time:
+
+```typescript
+let activeDropdown: HTMLDivElement | null = null;
+let outsideMousedownHandler: ((e: MouseEvent) => void) | null = null;
+let activeOnHoverEnd: OnLayerHoverEnd | null = null;
+let activeKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+```
+
+### `showDropdown(label, layers, currentSelectorId, onSelect, onHover, onHoverEnd)`
+
+1. Close any existing dropdown.
+2. Create dropdown element with all layer items.
+3. Position it below the label (`offsetTop + offsetHeight + 2px` gap).
+4. Append to the overlay's parent element.
+5. Set up keyboard navigation and outside-click handler.
+
+### Dropdown Item Rendering
+
+Each `LayerInfo` becomes a `<div>` row:
+
+- **Display name**: `layer.tagName` (e.g., "div", "section")
+- **Indentation**: `paddingLeft = 12 + depth * 10` px
+- **Active (selected) item**: blue text (`#526cff`), light blue bg (`#DBEAFE`), semi-bold
+- **Hover state**: light gray bg (`#f1f5f9`)
+- **Events**: `mouseenter` → preview, `mouseleave` → clear preview, `click` → select
+
+### Keyboard Navigation
+
+- **Arrow Down/Up**: Circular focus movement through items
+- **Enter**: Select focused item
+- All listeners use capture phase to intercept before bubbling
+
+### Outside Click
+
+Registered via `setTimeout(..., 0)` to prevent the opening click from immediately closing. Uses `mousedown` in capture phase for responsive dismissal.
+
+---
+
+## Edge Cases
+
+| Scenario | Behavior |
+|----------|----------|
+| No instrumented parent (root element) | Falls back to self + children only (no siblings) |
+| Only child (no other siblings) | Siblings list contains just self — same result as before |
+| Parent is `document.body`/`html` | Excluded by parent-walk guard, so `parents` is empty |
+| `layers.length <= 1` | No chevron appended, no click handler attached |
+| Element not in siblings list | Safety guard appends it |
+| Non-instrumented wrapper elements | Walked through transparently during descendant collection |
+
+---
+
+## Data Flow Summary
+
+```
+User selects element
+    ↓
+attachToOverlay(overlay, element)
+    ↓
+buildLayerChain(element)
+  ├── collectInstrumentedParents() → parents[] (outermost first)
+  ├── appendParentsWithDepth() → chain gets parents at depth 0,1,...
+  ├── getImmediateInstrParent() → instrParent or null
+  ├── collectSiblings(instrParent) → siblings[] (DOM order)
+  └── appendSiblingsWithSelected()
+       ├── sibling → chain at selfDepth (no expansion)
+       ├── ★ selected → appendSelfAndDescendants()
+       │    ├── self at selfDepth
+       │    ├── getInstrumentedDescendants(self, 2) → children[]
+       │    └── assignDescendantDepths() → children get depth values
+       └── sibling → chain at selfDepth (no expansion)
+    ↓
+LayerInfo[] with depth values
+    ↓
+layers.length > 1 ? enhanceLabelWithChevron() : return
+    ↓
+User clicks chevron → showDropdown()
+    ↓
+createDropdownElement(layers, currentId, callbacks)
+  └── createDropdownItem() for each layer (indented by depth)
+    ↓
+User hovers item → showLayerPreview() → preview overlay
+User clicks item → selectElementFromLayer() → new selection → reattach
+User presses Escape → closeDropdown() → reselect original
+```

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

@@ -0,0 +1,49 @@
+/** Style constants for the layer dropdown UI */
+
+export const DROPDOWN_CONTAINER_STYLES: Record<string, string> = {
+  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: Record<string, string> = {
+  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;

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

@@ -0,0 +1,109 @@
+/** 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";
+import type { LayerInfo, LayerControllerConfig, LayerController } from "./types.js";
+
+export function createLayerController(config: LayerControllerConfig): LayerController {
+  let layerPreviewOverlay: HTMLDivElement | null = null;
+  let escapeHandler: ((e: KeyboardEvent) => void) | null = null;
+  let dropdownSourceLayer: LayerInfo | null = null;
+
+  const clearLayerPreview = () => {
+    if (layerPreviewOverlay && layerPreviewOverlay.parentNode) {
+      layerPreviewOverlay.remove();
+    }
+    layerPreviewOverlay = null;
+  };
+
+  const showLayerPreview = (layer: LayerInfo) => {
+    clearLayerPreview();
+    if (getElementSelectorId(layer.element) === config.getSelectedElementId()) return;
+
+    layerPreviewOverlay = config.createPreviewOverlay(layer.element);
+  };
+
+  const selectLayer = (layer: LayerInfo) => {
+    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: MouseEvent, label: HTMLDivElement, element: Element, layers: LayerInfo[], currentId: string | null) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (isDropdownOpen()) {
+      closeDropdown();
+      restoreSelection();
+    } else {
+      dropdownSourceLayer = {
+        element,
+        tagName: element.tagName.toLowerCase(),
+        selectorId: currentId,
+      };
+      config.onDeselect();
+
+      escapeHandler = (ev: KeyboardEvent) => {
+        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: HTMLDivElement | undefined,
+    element: Element
+  ) => {
+    if (!overlay) return;
+
+    const label = overlay.querySelector("div") as HTMLDivElement | null;
+    if (!label) return;
+
+    const layers = buildLayerChain(element);
+    if (layers.length <= 1) return;
+
+    const currentId = getElementSelectorId(element);
+    enhanceLabelWithChevron(label);
+
+    label.addEventListener("click", (e: MouseEvent) => {
+      handleLabelClick(e, label, element, layers, currentId);
+    });
+  };
+
+  const cleanup = () => {
+    clearLayerPreview();
+    closeDropdown();
+  };
+
+  return { attachToOverlay, cleanup };
+}