vite-plugin-visual-selector 0.1.0 → 0.1.1

package/dist/runtime.js

@@ -1,150 +1,890 @@
 // src/shared/constants.ts
 var DEFAULT_ATTRIBUTE_NAME = "data-source-location";
-var OVERLAY_ATTRIBUTE_NAME = "data-visual-selector-overlay";
+var CONTROL_MESSAGE_TYPE = "visual-selector:set-active";
+var AGENT_ATTR = "data-vite-plugin-element";
 
-// src/runtime.ts
-var activeCleanup = null;
-function getElementSelectorId(element, attributeName) {
-  return element.getAttribute(attributeName);
+// src/runtime/utils.ts
+function debounce(fn, ms) {
+  let timer = null;
+  return ((...args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  });
 }
-function isOverlayElement(element) {
-  return element.hasAttribute(OVERLAY_ATTRIBUTE_NAME);
+function getSourceId(element) {
+  return element.dataset?.sourceLocation ?? element.dataset?.visualSelectorId ?? null;
 }
-function getSelectableElement(target, attributeName) {
-  if (!(target instanceof Element)) {
-    return null;
+function findAllElementsById(id) {
+  let elements = Array.from(document.querySelectorAll(`[data-source-location="${id}"]`));
+  if (elements.length === 0) {
+    elements = Array.from(document.querySelectorAll(`[data-visual-selector-id="${id}"]`));
   }
-  const closestOverlay = target.closest(`[${OVERLAY_ATTRIBUTE_NAME}]`);
-  if (closestOverlay) {
-    return null;
+  return elements;
+}
+function hasSourceLocation(el) {
+  return el.hasAttribute("data-source-location") || el.hasAttribute("data-visual-selector-id");
+}
+function getElementPosition(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    top: rect.top,
+    left: rect.left,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height,
+    centerX: rect.left + rect.width / 2,
+    centerY: rect.top + rect.height / 2
+  };
+}
+var TEXT_TAGS = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN", "A", "LABEL"];
+var INLINE_EDIT_TAGS = [
+  "div",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "span",
+  "li",
+  "td",
+  "a",
+  "button",
+  "label"
+];
+
+// src/runtime/inline-edit.ts
+function canInlineEdit(element) {
+  return INLINE_EDIT_TAGS.includes(element.tagName.toLowerCase()) && !!element.textContent?.trim() && !element.querySelector("img, video, canvas, svg") && element.children.length === 0;
+}
+function startInlineEditing(state, element) {
+  if (!canInlineEdit(element)) return;
+  state.editingElement = element;
+  element.dataset.originalTextContent = element.textContent || "";
+  element.contentEditable = "true";
+  element.setAttribute(AGENT_ATTR, "");
+  element.style.cursor = "text";
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+  element.focus();
+  state.selectionOverlays.forEach((o) => o.style.display = "none");
+  const debouncedReport = debounce(() => {
+    try {
+      window.parent.postMessage(
+        {
+          type: "inline-edit",
+          elementInfo: {
+            tagName: element.tagName,
+            visualSelectorId: state.selectedId,
+            dataSourceLocation: element.dataset?.sourceLocation
+          },
+          originalContent: element.dataset.originalTextContent || "",
+          newContent: element.textContent || ""
+        },
+        state.targetOrigin
+      );
+    } catch {
+    }
+  }, 500);
+  element.addEventListener("input", debouncedReport);
+  element.__inlineEditHandler = debouncedReport;
+  try {
+    window.parent.postMessage(
+      {
+        type: "content-editing-started",
+        visualSelectorId: state.selectedId
+      },
+      state.targetOrigin
+    );
+  } catch {
+  }
+}
+function stopInlineEditing(state, updatePositions) {
+  if (!state.editingElement) return;
+  state.editingElement.contentEditable = "false";
+  state.editingElement.removeAttribute(AGENT_ATTR);
+  state.editingElement.style.cursor = "";
+  const handler = state.editingElement.__inlineEditHandler;
+  if (handler) {
+    state.editingElement.removeEventListener("input", handler);
+    delete state.editingElement.__inlineEditHandler;
+  }
+  state.selectionOverlays.forEach((o) => o.style.display = "");
+  updatePositions();
+  try {
+    window.parent.postMessage(
+      {
+        type: "content-editing-ended",
+        visualSelectorId: state.selectedId
+      },
+      state.targetOrigin
+    );
+  } catch {
+  }
+  state.editingElement = null;
+}
+function handleInlineEdit(state, data, updatePositions) {
+  if (data.inlineEditingMode) {
+    const el = document.querySelector(
+      `[data-source-location="${data.dataSourceLocation}"]`
+    );
+    if (el) {
+      startInlineEditing(state, el);
+    }
+  } else {
+    stopInlineEditing(state, updatePositions);
+  }
+}
+
+// src/runtime/layer-navigation.ts
+function buildLayerTree(element) {
+  const tree = [];
+  const ancestors = [];
+  let parent = element.parentElement;
+  while (parent && parent !== document.body) {
+    if (hasSourceLocation(parent)) {
+      ancestors.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  ancestors.reverse();
+  ancestors.forEach((el) => {
+    tree.push({ element: el, tagName: el.tagName.toLowerCase(), depth: 0 });
+  });
+  tree.push({ element, tagName: element.tagName.toLowerCase(), depth: 0 });
+  for (let i = 0; i < element.children.length; i++) {
+    const child = element.children[i];
+    if (hasSourceLocation(child)) {
+      tree.push({ element: child, tagName: child.tagName.toLowerCase(), depth: 0 });
+    }
+  }
+  return tree;
+}
+function removeLayerDropdown(state) {
+  if (state.layerDropdown) {
+    const parentOverlay = state.layerDropdown.parentElement;
+    if (parentOverlay) {
+      const arrowEl = parentOverlay.querySelector("[data-tag-arrow]");
+      if (arrowEl) arrowEl.textContent = "\u2304";
+    }
+    state.layerDropdown.remove();
+    state.layerDropdown = null;
+    document.removeEventListener("keydown", handleLayerKeyboard);
+  }
+}
+function toggleLayerDropdown(state, element, anchor, onSelectElement) {
+  if (state.layerDropdown) {
+    removeLayerDropdown(state);
+    return;
+  }
+  const layers = buildLayerTree(element);
+  renderLayerDropdown(state, anchor, layers, element, onSelectElement);
+}
+function renderLayerDropdown(state, anchor, layers, currentElement, onSelectElement) {
+  const dropdown = document.createElement("div");
+  dropdown.setAttribute("data-layer-dropdown", "true");
+  dropdown.setAttribute(AGENT_ATTR, "");
+  Object.assign(dropdown.style, {
+    position: "absolute",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e2e8f0",
+    borderRadius: "6px",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+    fontSize: "12px",
+    zIndex: "99999",
+    pointerEvents: "auto",
+    padding: "4px 0",
+    minWidth: "120px",
+    maxHeight: "320px",
+    overflowY: "auto"
+  });
+  let focusedIndex = -1;
+  const items = [];
+  layers.forEach((layer, idx) => {
+    const item = document.createElement("div");
+    item.setAttribute(AGENT_ATTR, "");
+    item.textContent = layer.tagName;
+    item.style.padding = "6px 16px";
+    item.style.cursor = "pointer";
+    item.style.whiteSpace = "nowrap";
+    if (layer.element === currentElement) {
+      item.style.color = "#000000";
+      item.style.backgroundColor = "rgba(255, 204, 0, 0.2)";
+      item.style.fontWeight = "600";
+      focusedIndex = idx;
+    } else {
+      item.style.color = "#64748b";
+    }
+    item.addEventListener("click", (e) => {
+      e.stopPropagation();
+      removeLayerDropdown(state);
+      onSelectElement(layer.element);
+    });
+    item.addEventListener("mouseenter", () => {
+      if (layer.element !== currentElement) {
+        item.style.backgroundColor = "#f1f5f9";
+        item.style.color = "#334155";
+      }
+    });
+    item.addEventListener("mouseleave", () => {
+      if (layer.element !== currentElement) {
+        item.style.backgroundColor = "transparent";
+        item.style.color = "#64748b";
+      }
+    });
+    items.push(item);
+    dropdown.appendChild(item);
+  });
+  document.body.appendChild(dropdown);
+  const anchorRect = anchor.getBoundingClientRect();
+  dropdown.style.top = `${anchorRect.bottom + window.scrollY + 2}px`;
+  dropdown.style.left = `${anchorRect.left + window.scrollX}px`;
+  requestAnimationFrame(() => {
+    const ddRect = dropdown.getBoundingClientRect();
+    if (ddRect.right > window.innerWidth - 4) {
+      dropdown.style.left = `${window.innerWidth - ddRect.width - 4 + window.scrollX}px`;
+    }
+    if (ddRect.left < 4) {
+      dropdown.style.left = `${4 + window.scrollX}px`;
+    }
+    if (ddRect.bottom > window.innerHeight) {
+      dropdown.style.top = `${anchorRect.top + window.scrollY - ddRect.height - 2}px`;
+    }
+  });
+  state.layerDropdown = dropdown;
+  const handleKeydown = (e) => {
+    if (!state.layerDropdown) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusedIndex = Math.min(focusedIndex + 1, items.length - 1);
+        highlightItem(items, focusedIndex, layers, currentElement);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusedIndex = Math.max(focusedIndex - 1, 0);
+        highlightItem(items, focusedIndex, layers, currentElement);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < layers.length) {
+          removeLayerDropdown(state);
+          onSelectElement(layers[focusedIndex].element);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        removeLayerDropdown(state);
+        break;
+    }
+  };
+  handleLayerKeyboard.current = handleKeydown;
+  document.addEventListener("keydown", handleLayerKeyboard);
+}
+function handleLayerKeyboard(e) {
+  const current = handleLayerKeyboard.current;
+  if (current) current(e);
+}
+function highlightItem(items, index, layers, currentElement) {
+  items.forEach((item, i) => {
+    if (layers[i].element === currentElement) {
+      item.style.color = "#000000";
+      item.style.backgroundColor = i === index ? "rgba(255, 204, 0, 0.35)" : "rgba(255, 204, 0, 0.2)";
+      item.style.fontWeight = "600";
+    } else {
+      item.style.backgroundColor = i === index ? "#f1f5f9" : "transparent";
+      item.style.color = i === index ? "#334155" : "#64748b";
+      item.style.fontWeight = "normal";
+    }
+  });
+}
+
+// src/runtime/messages.ts
+function reportElementSelected(state, element) {
+  const el = element;
+  const tagName = element.tagName;
+  const isTextElement = TEXT_TAGS.includes(tagName);
+  const computed = window.getComputedStyle(el);
+  const computedStyles = {
+    fontFamily: computed.fontFamily,
+    fontSize: computed.fontSize,
+    fontWeight: computed.fontWeight,
+    textAlign: computed.textAlign,
+    textDecoration: computed.textDecoration,
+    textDecorationLine: computed.textDecorationLine,
+    color: computed.color,
+    backgroundColor: computed.backgroundColor,
+    lineHeight: computed.lineHeight,
+    letterSpacing: computed.letterSpacing,
+    opacity: computed.opacity
+  };
+  try {
+    window.parent.postMessage(
+      {
+        type: "element-selected",
+        tagName,
+        classes: typeof el.className === "string" ? el.className : "",
+        visualSelectorId: getSourceId(element),
+        content: isTextElement ? el.innerText : void 0,
+        dataSourceLocation: el.dataset?.sourceLocation,
+        isDynamicContent: el.dataset?.dynamicContent === "true",
+        position: getElementPosition(element),
+        attributes: {},
+        isTextElement,
+        staticArrayName: null,
+        collectionId: null,
+        computedStyles
+      },
+      state.targetOrigin
+    );
+  } catch {
+  }
+}
+function reportPositionUpdate(state) {
+  if (!state.selectedId || !state.selectedElement?.isConnected) return;
+  const rect = state.selectedElement.getBoundingClientRect();
+  const isInViewport = rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+  try {
+    window.parent.postMessage(
+      {
+        type: "element-position-update",
+        position: getElementPosition(state.selectedElement),
+        isInViewport,
+        visualSelectorId: state.selectedId
+      },
+      state.targetOrigin
+    );
+  } catch {
+  }
+}
+function handleMessage(state, e, callbacks) {
+  if (state.targetOrigin !== "*" && e.origin !== state.targetOrigin) return;
+  const msg = e.data;
+  if (!msg || typeof msg !== "object" || !msg.type) return;
+  switch (msg.type) {
+    case "toggle-visual-edit-mode":
+      callbacks.enableEditMode(msg.data?.enabled ?? false, msg.data?.specs);
+      break;
+    case "update-classes":
+      if (msg.data?.visualSelectorId && typeof msg.data?.classes === "string") {
+        findAllElementsById(msg.data.visualSelectorId).forEach(
+          (el) => el.setAttribute("class", msg.data.classes)
+        );
+        setTimeout(callbacks.updateAllOverlayPositions, 50);
+      }
+      break;
+    case "update-attribute":
+      if (msg.data?.visualSelectorId && msg.data?.attribute && msg.data?.value !== void 0) {
+        findAllElementsById(msg.data.visualSelectorId).forEach(
+          (el) => el.setAttribute(msg.data.attribute, msg.data.value)
+        );
+      }
+      break;
+    case "update-content":
+      if (msg.data?.visualSelectorId && msg.data?.content !== void 0) {
+        findAllElementsById(msg.data.visualSelectorId).forEach((el) => {
+          el.innerText = msg.data.content;
+        });
+        setTimeout(callbacks.updateAllOverlayPositions, 50);
+      }
+      break;
+    case "unselect-element":
+      if (state.editingElement) callbacks.stopInlineEditing();
+      state.selectionOverlays.forEach((o) => o.remove());
+      state.selectionOverlays = [];
+      state.selectedId = null;
+      state.selectedElement = null;
+      break;
+    case "update-theme-variables":
+      if (msg.data?.variables) {
+        const root = msg.data.mode === "dark" ? document.querySelector(".dark") : document.documentElement;
+        if (root) {
+          for (const [name, value] of Object.entries(msg.data.variables)) {
+            root.style.setProperty(name, value);
+          }
+        }
+      }
+      break;
+    case "toggle-inline-edit-mode":
+      if (msg.data) {
+        callbacks.handleInlineEdit(msg.data);
+      }
+      break;
+    case "inject-font-import":
+      if (msg.data?.fontUrl && /^https?:\/\//.test(msg.data.fontUrl)) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = msg.data.fontUrl;
+        link.setAttribute(AGENT_ATTR, "");
+        document.head.appendChild(link);
+      }
+      break;
+    case "popover-drag-state":
+    case "dropdown-state":
+      break;
+    case "refresh-page":
+      window.location.reload();
+      break;
+    case "request-element-position":
+      reportPositionUpdate(state);
+      break;
+    case CONTROL_MESSAGE_TYPE: {
+      const controlMsg = msg;
+      if (typeof controlMsg.active === "boolean") {
+        callbacks.enableEditMode(controlMsg.active);
+      }
+      break;
+    }
+    case "update-element-style":
+    case "update-element-text":
+    case "update-element-class":
+      handleLegacyUpdateMessage(state, msg);
+      break;
   }
-  return target.closest(`[${attributeName}]`);
 }
-function findMatchingElements(selectorId, attributeName, root) {
-  return Array.from(
-    root.querySelectorAll(`[${attributeName}="${selectorId}"]`)
+function handleLegacyUpdateMessage(state, msg) {
+  if (!msg.dataSourceLocation) return;
+  const el = document.querySelector(
+    `[${state.attributeName}="${msg.dataSourceLocation}"]`
   );
+  if (!el) return;
+  if (msg.type === "update-element-style" && msg.styles) {
+    for (const [prop, value] of Object.entries(msg.styles)) {
+      el.style.setProperty(
+        prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
+        value
+      );
+    }
+  } else if (msg.type === "update-element-text" && typeof msg.text === "string") {
+    el.textContent = msg.text;
+  } else if (msg.type === "update-element-class" && typeof msg.className === "string") {
+    el.className = msg.className;
+  }
 }
-function createOverlay(mode, doc) {
-  const overlay = doc.createElement("div");
-  overlay.setAttribute(OVERLAY_ATTRIBUTE_NAME, mode);
+
+// src/runtime/overlay.ts
+function createOverlay(opts) {
+  const overlay = document.createElement("div");
+  overlay.setAttribute(AGENT_ATTR, "");
   overlay.style.position = "absolute";
   overlay.style.pointerEvents = "none";
   overlay.style.zIndex = "9999";
-  overlay.style.transition = "all 0.1s ease-in-out";
-  if (mode === "selected") {
-    overlay.style.border = "2px solid #2563EB";
+  overlay.style.boxSizing = "border-box";
+  if (opts.selected) {
+    overlay.style.boxShadow = "inset 0 0 0 2px #FC0";
   } else {
-    overlay.style.border = "2px solid #95a5fc";
-    overlay.style.backgroundColor = "rgba(99, 102, 241, 0.05)";
+    overlay.style.boxShadow = "inset 0 0 0 2px rgba(255, 204, 0, 0.5)";
+    overlay.style.backgroundColor = "rgba(255, 204, 0, 0.05)";
   }
   return overlay;
 }
-function positionOverlay(overlay, target, view) {
+function positionOverlay(overlay, target, tagMode = "none", callbacks) {
   const rect = target.getBoundingClientRect();
-  overlay.style.top = `${rect.top + view.scrollY}px`;
-  overlay.style.left = `${rect.left + view.scrollX}px`;
+  overlay.style.top = `${rect.top + window.scrollY}px`;
+  overlay.style.left = `${rect.left + window.scrollX}px`;
   overlay.style.width = `${rect.width}px`;
   overlay.style.height = `${rect.height}px`;
+  if (tagMode !== "none") {
+    let tag = overlay.querySelector("[data-tag-label]");
+    if (!tag) {
+      tag = document.createElement("div");
+      tag.setAttribute(AGENT_ATTR, "");
+      tag.setAttribute("data-tag-label", "");
+      Object.assign(tag.style, {
+        position: "absolute",
+        padding: "2px 8px",
+        fontSize: "11px",
+        fontWeight: "500",
+        borderRadius: "3px",
+        minWidth: "24px",
+        textAlign: "center",
+        display: "flex",
+        alignItems: "center",
+        gap: "3px",
+        lineHeight: "1.4"
+      });
+      if (tagMode === "selected") {
+        tag.style.backgroundColor = "#FC0";
+        tag.style.color = "#000000";
+        tag.style.cursor = "pointer";
+        tag.style.pointerEvents = "auto";
+        const textSpan = document.createElement("span");
+        textSpan.textContent = target.tagName.toLowerCase();
+        tag.appendChild(textSpan);
+        const arrow = document.createElement("span");
+        arrow.setAttribute("data-tag-arrow", "");
+        arrow.textContent = "\u2304";
+        arrow.style.fontSize = "10px";
+        arrow.style.lineHeight = "1";
+        tag.appendChild(arrow);
+        if (callbacks?.onTagClick) {
+          const onTagClick = callbacks.onTagClick;
+          tag.addEventListener("click", (e) => {
+            e.stopPropagation();
+            onTagClick(target, tag);
+          });
+        }
+      } else {
+        tag.style.backgroundColor = "rgba(255, 204, 0, 0.7)";
+        tag.style.color = "#000000";
+        tag.style.pointerEvents = "none";
+        tag.textContent = target.tagName.toLowerCase();
+      }
+      overlay.appendChild(tag);
+    }
+    positionTag(tag, rect);
+  }
 }
-function createMessage(type, element, attributeName) {
-  const rect = element.getBoundingClientRect();
-  return {
-    type,
-    tagName: element.tagName,
-    className: element.className,
-    selectorId: getElementSelectorId(element, attributeName),
-    dataSourceLocation: getElementSelectorId(element, attributeName),
-    rect: {
-      top: rect.top,
-      left: rect.left,
-      right: rect.right,
-      bottom: rect.bottom,
-      width: rect.width,
-      height: rect.height
+function positionTag(tag, rect) {
+  const isNearTop = rect.top < 27;
+  const isTallEnough = rect.height >= 54;
+  const isFullWidth = rect.width >= window.innerWidth - 4;
+  const leftOffset = isFullWidth ? 8 : 4;
+  if (isNearTop && isTallEnough) {
+    tag.style.top = "2px";
+  } else if (isNearTop) {
+    tag.style.top = `${rect.height + 2}px`;
+  } else {
+    tag.style.top = "-27px";
+  }
+  tag.style.left = `${leftOffset}px`;
+  requestAnimationFrame(() => {
+    const tagRect = tag.getBoundingClientRect();
+    if (tagRect.right > window.innerWidth - 4) {
+      const shift = tagRect.right - window.innerWidth + 8;
+      tag.style.left = `${leftOffset - shift}px`;
     }
-  };
+    if (tagRect.left < 4) {
+      const shift = 4 - tagRect.left;
+      tag.style.left = `${leftOffset + shift}px`;
+    }
+  });
 }
-function setupSelectionBridge(options = {}) {
-  activeCleanup?.();
-  const targetWindow = options.targetWindow ?? window;
-  const targetDocument = targetWindow.document;
-  const parentWindow = options.parentWindow ?? window.parent;
-  const attributeName = options.attributeName ?? DEFAULT_ATTRIBUTE_NAME;
-  const targetOrigin = options.targetOrigin ?? "*";
-  const enableHover = options.enableHover ?? true;
-  const enableClickSelection = options.enableClickSelection ?? true;
-  let selectedOverlays = [];
-  let hoverOverlays = [];
-  function clearOverlays(overlays) {
-    overlays.forEach((overlay) => overlay.remove());
-  }
-  function renderOverlays(mode, sourceElement) {
-    const selectorId = getElementSelectorId(sourceElement, attributeName);
-    if (!selectorId) {
-      return [];
-    }
-    return findMatchingElements(selectorId, attributeName, targetDocument).map((element) => {
-      const overlay = createOverlay(mode, targetDocument);
-      positionOverlay(overlay, element, targetWindow);
-      targetDocument.body.appendChild(overlay);
-      return overlay;
+function clearHoverOverlays(state) {
+  state.hoverOverlays.forEach((o) => o.remove());
+  state.hoverOverlays = [];
+  state.currentHoverId = null;
+}
+function clearSelectionOverlays(state, removeDropdown) {
+  state.selectionOverlays.forEach((o) => o.remove());
+  state.selectionOverlays = [];
+  removeDropdown();
+}
+function clearAllOverlays(state, removeDropdown) {
+  clearHoverOverlays(state);
+  clearSelectionOverlays(state, removeDropdown);
+  state.selectedId = null;
+  state.selectedElement = null;
+}
+function freezeAnimations() {
+  document.documentElement.setAttribute("data-visual-edit-active", "");
+  if (!document.getElementById("freeze-animations")) {
+    const style = document.createElement("style");
+    style.id = "freeze-animations";
+    style.setAttribute(AGENT_ATTR, "");
+    style.textContent = `
+      [data-visual-edit-active] *:not([${AGENT_ATTR}]):not([${AGENT_ATTR}] *),
+      [data-visual-edit-active] *:not([${AGENT_ATTR}]):not([${AGENT_ATTR}] *)::before,
+      [data-visual-edit-active] *:not([${AGENT_ATTR}]):not([${AGENT_ATTR}] *)::after {
+        animation-play-state: paused !important;
+        transition: none !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  if (!document.getElementById("freeze-overflow")) {
+    const overflowStyle = document.createElement("style");
+    overflowStyle.id = "freeze-overflow";
+    overflowStyle.setAttribute(AGENT_ATTR, "");
+    overflowStyle.textContent = `
+      html[data-visual-edit-active] {
+        overflow-y: scroll !important;
+        overflow-x: hidden !important;
+      }
+    `;
+    document.head.appendChild(overflowStyle);
+  }
+  if (!document.getElementById("freeze-pointer-events")) {
+    const pointerStyle = document.createElement("style");
+    pointerStyle.id = "freeze-pointer-events";
+    pointerStyle.setAttribute(AGENT_ATTR, "");
+    pointerStyle.textContent = `
+      [data-visual-edit-active] * { pointer-events: none !important; }
+      [${AGENT_ATTR}], [${AGENT_ATTR}] * { pointer-events: auto !important; }
+    `;
+    document.head.appendChild(pointerStyle);
+  }
+  try {
+    document.getAnimations().forEach((anim) => {
+      const effect = anim.effect;
+      const target = effect?.target;
+      if (target instanceof Element && target.closest(`[${AGENT_ATTR}]`)) return;
+      try {
+        anim.finish();
+      } catch {
+        anim.pause();
+      }
     });
+  } catch {
   }
-  function onClick(event) {
-    if (!enableClickSelection) {
-      return;
+}
+function unfreezeAnimations() {
+  document.documentElement.removeAttribute("data-visual-edit-active");
+  const freezeStyle = document.getElementById("freeze-animations");
+  if (freezeStyle) freezeStyle.remove();
+  const pointerStyle = document.getElementById("freeze-pointer-events");
+  if (pointerStyle) pointerStyle.remove();
+  const overflowStyle = document.getElementById("freeze-overflow");
+  if (overflowStyle) overflowStyle.remove();
+}
+
+// src/runtime/state.ts
+function createAgentState(options = {}) {
+  return {
+    editModeEnabled: false,
+    selectedId: null,
+    selectedElement: null,
+    hoverOverlays: [],
+    selectionOverlays: [],
+    currentHoverId: null,
+    editingElement: null,
+    layerDropdown: null,
+    mutationObserver: null,
+    attributeName: options.attributeName ?? DEFAULT_ATTRIBUTE_NAME,
+    targetOrigin: options.targetOrigin ?? "*"
+  };
+}
+
+// src/runtime/index.ts
+function setupVisualEditAgent(options = {}) {
+  const state = createAgentState(options);
+  function updateAllOverlayPositions() {
+    if (state.selectedId && state.selectedElement?.isConnected) {
+      const siblings = findAllElementsById(state.selectedId);
+      state.selectionOverlays.forEach((overlay, i) => {
+        if (siblings[i]) {
+          positionOverlay(overlay, siblings[i], i === 0 ? "selected" : "none", {
+            onTagClick
+          });
+        }
+      });
     }
-    const selectableElement = getSelectableElement(event.target, attributeName);
-    if (!selectableElement || isOverlayElement(selectableElement)) {
-      return;
+    reportPositionUpdate(state);
+  }
+  function onTagClick(target, tag) {
+    const arrowEl = tag.querySelector("[data-tag-arrow]");
+    if (arrowEl) {
+      arrowEl.textContent = state.layerDropdown ? "\u2304" : "\u2303";
     }
-    clearOverlays(selectedOverlays);
-    selectedOverlays = renderOverlays("selected", selectableElement);
-    parentWindow.postMessage(
-      createMessage("element-selected", selectableElement, attributeName),
-      targetOrigin
-    );
+    toggleLayerDropdown(state, target, tag, selectElement);
   }
-  function onMouseMove(event) {
-    if (!enableHover) {
+  function findElementAtPoint(x, y) {
+    const freezeStyle = document.getElementById("freeze-pointer-events");
+    if (freezeStyle) freezeStyle.disabled = true;
+    const element = document.elementFromPoint(x, y);
+    if (freezeStyle) freezeStyle.disabled = false;
+    if (!element) return null;
+    if (element.closest(`[${AGENT_ATTR}]`)) return null;
+    return element.closest(`[${state.attributeName}], [data-visual-selector-id]`) ?? null;
+  }
+  function findHoverTarget(x, y, excludeId) {
+    const element = findElementAtPoint(x, y);
+    if (!element) return null;
+    const id = getSourceId(element);
+    if (!id || id === excludeId) return null;
+    return id;
+  }
+  function onMouseMove(e) {
+    if (!state.editModeEnabled) return;
+    requestAnimationFrame(() => {
+      const id = findHoverTarget(e.clientX, e.clientY, state.selectedId);
+      if (!id) {
+        clearHoverOverlays(state);
+        return;
+      }
+      if (id === state.currentHoverId) return;
+      clearHoverOverlays(state);
+      const elements = findAllElementsById(id);
+      elements.forEach((el, i) => {
+        const overlay = createOverlay({ selected: false });
+        overlay.setAttribute(AGENT_ATTR, "");
+        document.body.appendChild(overlay);
+        positionOverlay(overlay, el, i === 0 ? "hover" : "none");
+        state.hoverOverlays.push(overlay);
+      });
+      state.currentHoverId = id;
+    });
+  }
+  function onMouseLeave() {
+    clearHoverOverlays(state);
+  }
+  function onClick(e) {
+    if (!state.editModeEnabled) return;
+    const target = e.target;
+    if (target?.closest?.(`[data-layer-dropdown]`)) return;
+    if (target?.closest?.(`[data-tag-label]`) && state.selectionOverlays.some((o) => o.contains(target)))
       return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    clearHoverOverlays(state);
+    const element = findElementAtPoint(e.clientX, e.clientY);
+    if (!element) return;
+    selectElement(element);
+  }
+  function selectElement(element) {
+    const id = getSourceId(element);
+    if (!id) return;
+    if (state.editingElement) {
+      stopInlineEditing(state, updateAllOverlayPositions);
     }
-    const selectableElement = getSelectableElement(event.target, attributeName);
-    clearOverlays(hoverOverlays);
-    hoverOverlays = [];
-    if (!selectableElement || isOverlayElement(selectableElement)) {
-      return;
+    clearSelectionOverlays(state, () => removeLayerDropdown(state));
+    const siblings = findAllElementsById(id);
+    siblings.forEach((el, i) => {
+      const overlay = createOverlay({ selected: true });
+      overlay.setAttribute(AGENT_ATTR, "");
+      document.body.appendChild(overlay);
+      positionOverlay(overlay, el, i === 0 ? "selected" : "none", {
+        onTagClick
+      });
+      state.selectionOverlays.push(overlay);
+    });
+    state.selectedId = id;
+    state.selectedElement = element;
+    clearHoverOverlays(state);
+    reportElementSelected(state, element);
+  }
+  let rafPending = false;
+  const throttledPositionUpdate = () => {
+    if (rafPending) return;
+    rafPending = true;
+    requestAnimationFrame(() => {
+      rafPending = false;
+      reportPositionUpdate(state);
+    });
+  };
+  function enableEditMode(enabled, _specs) {
+    state.editModeEnabled = enabled;
+    if (enabled) {
+      document.body.style.cursor = "crosshair";
+      freezeAnimations();
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseleave", onMouseLeave);
+      document.addEventListener("click", onClick, true);
+      window.addEventListener("scroll", throttledPositionUpdate, true);
+      document.addEventListener("scroll", throttledPositionUpdate, true);
+      window.addEventListener("resize", updateAllOverlayPositions);
+      startMutationObserver();
+    } else {
+      document.body.style.cursor = "default";
+      unfreezeAnimations();
+      clearAllOverlays(state, () => removeLayerDropdown(state));
+      if (state.editingElement) {
+        stopInlineEditing(state, updateAllOverlayPositions);
+      }
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseleave", onMouseLeave);
+      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("scroll", throttledPositionUpdate, true);
+      document.removeEventListener("scroll", throttledPositionUpdate, true);
+      window.removeEventListener("resize", updateAllOverlayPositions);
+      stopMutationObserver();
     }
-    hoverOverlays = renderOverlays("hover", selectableElement);
   }
-  targetDocument.addEventListener("click", onClick, true);
-  targetDocument.addEventListener("mousemove", onMouseMove, true);
-  const cleanup = () => {
-    targetDocument.removeEventListener("click", onClick, true);
-    targetDocument.removeEventListener("mousemove", onMouseMove, true);
-    clearOverlays(selectedOverlays);
-    clearOverlays(hoverOverlays);
-    selectedOverlays = [];
-    hoverOverlays = [];
-    if (activeCleanup === cleanup) {
-      activeCleanup = null;
+  function startMutationObserver() {
+    if (state.mutationObserver) return;
+    state.mutationObserver = new MutationObserver((mutations) => {
+      const hasRelevantChange = mutations.some((m) => {
+        if (m.type === "attributes" && ["style", "class", "width", "height"].includes(m.attributeName ?? "") && containsTrackedElement(m.target))
+          return true;
+        if (m.type === "childList" && containsTrackedElement(m.target)) return true;
+        return false;
+      });
+      if (hasRelevantChange) {
+        setTimeout(updateAllOverlayPositions, 50);
+      }
+    });
+    state.mutationObserver.observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      attributeFilter: ["style", "class", "width", "height"]
+    });
+  }
+  function stopMutationObserver() {
+    if (state.mutationObserver) {
+      state.mutationObserver.disconnect();
+      state.mutationObserver = null;
     }
+  }
+  function containsTrackedElement(node) {
+    if (!(node instanceof Element)) return false;
+    if (node.hasAttribute(AGENT_ATTR)) return false;
+    return hasSourceLocation(node) || !!node.querySelector(`[${state.attributeName}]`);
+  }
+  function setupSandboxMountObserver() {
+    if (window.self === window.top) return;
+    const mountObserver = new MutationObserver((mutations) => {
+      const hasChanges = mutations.some(
+        (m) => m.addedNodes.length > 0 || m.removedNodes.length > 0
+      );
+      if (!hasChanges) return;
+      const hasTrackedElements = document.body.querySelectorAll("[data-source-location], [data-dynamic-content]").length > 0;
+      try {
+        window.parent.postMessage(
+          {
+            type: hasTrackedElements ? "sandbox:onMounted" : "sandbox:onUnmounted"
+          },
+          state.targetOrigin
+        );
+      } catch {
+      }
+    });
+    if (document.body) {
+      mountObserver.observe(document.body, { childList: true, subtree: true });
+    } else {
+      document.addEventListener("DOMContentLoaded", () => {
+        mountObserver.observe(document.body, { childList: true, subtree: true });
+      });
+    }
+  }
+  const onMessage = (e) => {
+    handleMessage(state, e, {
+      enableEditMode,
+      updateAllOverlayPositions,
+      stopInlineEditing: () => stopInlineEditing(state, updateAllOverlayPositions),
+      handleInlineEdit: (data) => handleInlineEdit(state, data, updateAllOverlayPositions)
+    });
   };
-  activeCleanup = cleanup;
+  window.addEventListener("message", onMessage);
+  setupSandboxMountObserver();
+  try {
+    window.parent.postMessage({ type: "visual-edit-agent-ready" }, state.targetOrigin);
+  } catch {
+  }
   return {
     destroy() {
-      cleanup();
+      window.removeEventListener("message", onMessage);
+      if (state.editModeEnabled) {
+        enableEditMode(false);
+      }
     },
+    enableEditMode,
+    selectElement,
     clearSelection() {
-      clearOverlays(selectedOverlays);
-      clearOverlays(hoverOverlays);
-      selectedOverlays = [];
-      hoverOverlays = [];
+      clearAllOverlays(state, () => removeLayerDropdown(state));
+    },
+    getSelectedId() {
+      return state.selectedId;
     }
   };
 }
 export {
-  setupSelectionBridge
+  setupVisualEditAgent
 };
 //# sourceMappingURL=runtime.js.map