@lego-build/plugins 0.0.13 → 0.0.14

package/dist/chunk-GHQ2QAQ5.js

@@ -0,0 +1,902 @@
+// src/index.ts
+var SKIP_ELEMENTS = /* @__PURE__ */ new Set([
+  "html",
+  "head",
+  "script",
+  "style",
+  "meta",
+  "link",
+  "title",
+  "noscript",
+  "br",
+  "wbr",
+  "template",
+  "slot"
+]);
+var INTERACTIVE_ELEMENTS = /* @__PURE__ */ new Set([
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "details",
+  "summary",
+  "dialog",
+  "menu",
+  "menuitem"
+]);
+var SEMANTIC_ELEMENTS = /* @__PURE__ */ new Set([
+  "header",
+  "footer",
+  "main",
+  "nav",
+  "aside",
+  "section",
+  "article",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "figure",
+  "figcaption",
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "td",
+  "th",
+  "form",
+  "fieldset",
+  "legend",
+  "img",
+  "video",
+  "audio",
+  "canvas",
+  "svg"
+]);
+var MIN_ELEMENT_SIZE = 8;
+var MOUSEMOVE_DEBOUNCE = 16;
+var CSS_PREVIEW_PROPERTIES = [
+  "display",
+  "position",
+  "width",
+  "height",
+  "padding",
+  "margin",
+  "color",
+  "background-color",
+  "font-size",
+  "font-weight"
+];
+function sendToParent(type, payload) {
+  window.parent.postMessage({ type, payload }, "*");
+}
+function setupIframeBridge() {
+  const pushState = window.history.pushState.bind(window.history);
+  const originalPushState = (...args) => {
+    pushState(...args);
+    sendToParent("IFRAME_URL_CHANGED", window.location.href);
+  };
+  window.history.pushState = originalPushState;
+  const replaceState = window.history.replaceState.bind(window.history);
+  const originalReplaceState = (...args) => {
+    replaceState(...args);
+    sendToParent("IFRAME_URL_CHANGED", window.location.href);
+  };
+  window.history.replaceState = originalReplaceState;
+  window.addEventListener("popstate", () => {
+    sendToParent("IFRAME_URL_CHANGED", window.location.href);
+  });
+  window.addEventListener("message", (e) => {
+    const msg = e.data;
+    if (!msg?.type) return;
+    switch (msg.type) {
+      case "NAVIGATE_BACK":
+        window.history.back();
+        break;
+      case "NAVIGATE_FORWARD":
+        window.history.forward();
+        break;
+      case "NAVIGATE_URL":
+        if (msg.payload) {
+          window.history.pushState({}, "", msg.payload);
+          sendToParent("IFRAME_URL_CHANGED", window.location.href);
+        }
+        break;
+      case "REFRESH":
+        window.location.reload();
+        break;
+    }
+  });
+}
+function createElementSelectorState() {
+  return {
+    isActive: false,
+    isEditing: false,
+    isSelected: false,
+    hoveredElement: null,
+    selectedElement: null,
+    overlay: null,
+    selectionOverlay: null,
+    tooltip: null,
+    cssPanel: null,
+    inlineEditor: null,
+    depth: 0,
+    originalText: "",
+    originalHTML: "",
+    lastMouseMoveTime: 0,
+    pendingMouseMove: null,
+    rawTarget: null
+  };
+}
+function shouldSkipElement(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (SKIP_ELEMENTS.has(tagName)) return true;
+  if (element.id?.startsWith("lego-element-selector")) return true;
+  const style = window.getComputedStyle(element);
+  if (style.display === "none" || style.visibility === "hidden") return true;
+  const rect = element.getBoundingClientRect();
+  if (rect.width < MIN_ELEMENT_SIZE && rect.height < MIN_ELEMENT_SIZE) return true;
+  if (rect.width === 0 && rect.height === 0 && !element.children.length) return true;
+  return false;
+}
+function getElementPriority(element) {
+  const tagName = element.tagName.toLowerCase();
+  let score = 0;
+  if (INTERACTIVE_ELEMENTS.has(tagName)) score += 100;
+  if (SEMANTIC_ELEMENTS.has(tagName)) score += 50;
+  if (element.hasAttribute("data-locator-path")) score += 200;
+  if (element.id) score += 20;
+  if (element.className && typeof element.className === "string") {
+    const classes = element.className.split(" ").filter((c) => c && !c.startsWith("__"));
+    score += Math.min(classes.length * 5, 25);
+  }
+  const textContent = element.textContent?.trim() || "";
+  if (textContent.length > 0 && textContent.length < 200) score += 15;
+  if ((tagName === "div" || tagName === "span") && !element.id && !element.className) {
+    score -= 30;
+  }
+  if (element.hasAttribute("role")) score += 25;
+  const attrs = element.attributes;
+  for (let i = 0; i < attrs.length; i++) {
+    if (attrs[i].name.startsWith("aria-")) {
+      score += 10;
+      break;
+    }
+  }
+  return score;
+}
+function findBestElement(target) {
+  if (shouldSkipElement(target)) {
+    const parent = target.parentElement;
+    if (parent && parent !== document.body && parent !== document.documentElement) {
+      return findBestElement(parent);
+    }
+    return target;
+  }
+  const targetPriority = getElementPriority(target);
+  if (targetPriority < 20) {
+    const parent = target.parentElement;
+    if (parent && parent !== document.body && parent !== document.documentElement) {
+      const parentPriority = getElementPriority(parent);
+      if (parentPriority > targetPriority + 30) {
+        return findBestElement(parent);
+      }
+    }
+  }
+  let current = target;
+  while (current && current !== document.body) {
+    const tagName = current.tagName.toLowerCase();
+    if (INTERACTIVE_ELEMENTS.has(tagName)) {
+      return current;
+    }
+    if (current !== target && SEMANTIC_ELEMENTS.has(tagName)) {
+      break;
+    }
+    current = current.parentElement;
+  }
+  return target;
+}
+function getElementsAtPoint(x, y) {
+  const elements = [];
+  const allElements = document.elementsFromPoint(x, y);
+  for (const el of allElements) {
+    if (el === document.documentElement || el === document.body) continue;
+    if (shouldSkipElement(el)) continue;
+    elements.push(el);
+  }
+  return elements;
+}
+function getElementAtPoint(x, y) {
+  const elements = getElementsAtPoint(x, y);
+  if (elements.length === 0) return null;
+  return findBestElement(elements[0]);
+}
+function getBreadcrumb(element, maxDepth = 4) {
+  const parts = [];
+  let current = element;
+  let depth = 0;
+  while (current && current !== document.body && depth < maxDepth) {
+    const tagName = current.tagName.toLowerCase();
+    let part = tagName;
+    if (current.id) {
+      part += `#${current.id}`;
+    } else if (current.className && typeof current.className === "string") {
+      const classes = current.className.split(" ").filter((c) => c && !c.startsWith("__") && c.length < 20);
+      if (classes.length > 0) {
+        part += `.${classes[0]}`;
+      }
+    }
+    parts.unshift(part);
+    current = current.parentElement;
+    depth++;
+  }
+  if (current && current !== document.body) {
+    parts.unshift("...");
+  }
+  return parts.join(" \u203A ");
+}
+function getCSSPreview(element) {
+  const style = window.getComputedStyle(element);
+  const result = {};
+  for (const prop of CSS_PREVIEW_PROPERTIES) {
+    const value = style.getPropertyValue(prop);
+    if (value && value !== "none" && value !== "auto" && value !== "normal") {
+      if (prop.includes("color") && value.startsWith("rgb")) {
+        result[prop] = rgbToHex(value);
+      } else {
+        result[prop] = value;
+      }
+    }
+  }
+  return result;
+}
+function rgbToHex(rgb) {
+  const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (!match) return rgb;
+  const r = parseInt(match[1]).toString(16).padStart(2, "0");
+  const g = parseInt(match[2]).toString(16).padStart(2, "0");
+  const b = parseInt(match[3]).toString(16).padStart(2, "0");
+  return `#${r}${g}${b}`;
+}
+function createOverlay() {
+  const overlay = document.createElement("div");
+  overlay.id = "lego-element-selector-overlay";
+  overlay.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 2147483645;
+    background: rgba(59, 130, 246, 0.08);
+    border: 2px solid #3b82f6;
+    border-radius: 6px;
+    transition: all 0.08s ease-out;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.05);
+  `;
+  document.body.appendChild(overlay);
+  return overlay;
+}
+function createSelectionOverlay() {
+  const overlay = document.createElement("div");
+  overlay.id = "lego-element-selector-selection";
+  overlay.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 2147483646;
+    background: rgba(34, 197, 94, 0.1);
+    border: 2px solid #22c55e;
+    border-radius: 6px;
+    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15), 0 0 20px rgba(34, 197, 94, 0.2);
+    transition: all 0.12s ease-out;
+    animation: lego-pulse 2s ease-in-out infinite;
+  `;
+  if (!document.getElementById("lego-selector-styles")) {
+    const styleSheet = document.createElement("style");
+    styleSheet.id = "lego-selector-styles";
+    styleSheet.textContent = `
+      @keyframes lego-pulse {
+        0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15), 0 0 20px rgba(34, 197, 94, 0.2); }
+        50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1), 0 0 30px rgba(34, 197, 94, 0.3); }
+      }
+    `;
+    document.head.appendChild(styleSheet);
+  }
+  document.body.appendChild(overlay);
+  return overlay;
+}
+function createTooltip() {
+  const tooltip = document.createElement("div");
+  tooltip.id = "lego-element-selector-tooltip";
+  tooltip.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 2147483647;
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+    font-size: 12px;
+    max-width: 400px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    transition: all 0.1s ease-out;
+    backdrop-filter: blur(8px);
+  `;
+  document.body.appendChild(tooltip);
+  return tooltip;
+}
+function createCSSPanel() {
+  const panel = document.createElement("div");
+  panel.id = "lego-element-selector-css";
+  panel.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 2147483646;
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    color: white;
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-family: ui-monospace, monospace;
+    font-size: 11px;
+    max-width: 280px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    transition: all 0.15s ease-out;
+    opacity: 0;
+    transform: translateY(4px);
+    backdrop-filter: blur(8px);
+  `;
+  document.body.appendChild(panel);
+  return panel;
+}
+function updateCSSPanel(state, element) {
+  if (!state.cssPanel) {
+    state.cssPanel = createCSSPanel();
+  }
+  const cssInfo = getCSSPreview(element);
+  const entries = Object.entries(cssInfo);
+  if (entries.length === 0) {
+    state.cssPanel.style.opacity = "0";
+    return;
+  }
+  const html = entries.map(([prop, value]) => {
+    const colorDot = prop.includes("color") && value.startsWith("#") ? `<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:${value};margin-right:6px;vertical-align:middle;border:1px solid rgba(255,255,255,0.2);"></span>` : "";
+    return `<div style="display:flex;justify-content:space-between;align-items:center;padding:2px 0;">
+        <span style="color:#94a3b8;">${prop}:</span>
+        <span style="color:#e2e8f0;margin-left:12px;">${colorDot}${value}</span>
+      </div>`;
+  }).join("");
+  state.cssPanel.innerHTML = `
+    <div style="font-weight:600;color:#60a5fa;margin-bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;">CSS Properties</div>
+    ${html}
+  `;
+  const rect = element.getBoundingClientRect();
+  const tooltipHeight = state.tooltip?.offsetHeight || 40;
+  let panelTop = rect.top - tooltipHeight - 60;
+  const panelLeft = Math.min(rect.left, window.innerWidth - 300);
+  if (panelTop < 8) {
+    panelTop = rect.bottom + tooltipHeight + 16;
+  }
+  state.cssPanel.style.top = `${panelTop}px`;
+  state.cssPanel.style.left = `${Math.max(8, panelLeft)}px`;
+  state.cssPanel.style.opacity = "1";
+  state.cssPanel.style.transform = "translateY(0)";
+}
+function enableInlineEditing(state, element, onSave, onCancel) {
+  const originalOutline = element.style.outline;
+  const originalBoxShadow = element.style.boxShadow;
+  const originalBackground = element.style.background;
+  element.contentEditable = "true";
+  element.style.outline = "2px solid #3b82f6";
+  element.style.boxShadow = "0 0 0 4px rgba(59, 130, 246, 0.2)";
+  element.style.background = "rgba(59, 130, 246, 0.05)";
+  element.style.borderRadius = "4px";
+  const marker = document.createElement("div");
+  marker.id = "lego-inline-editor";
+  marker.style.display = "none";
+  marker.dataset.originalOutline = originalOutline;
+  marker.dataset.originalBoxShadow = originalBoxShadow;
+  marker.dataset.originalBackground = originalBackground;
+  document.body.appendChild(marker);
+  element.focus();
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  range.collapse(false);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      onCancel();
+    } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      onSave();
+    }
+  };
+  const handleBlur = (e) => {
+    setTimeout(() => {
+      if (document.activeElement !== element && state.isEditing) {
+        onSave();
+      }
+    }, 100);
+  };
+  element.addEventListener("keydown", handleKeyDown);
+  element.addEventListener("blur", handleBlur);
+  marker.__cleanup = () => {
+    element.removeEventListener("keydown", handleKeyDown);
+    element.removeEventListener("blur", handleBlur);
+    element.contentEditable = "false";
+    element.style.outline = originalOutline;
+    element.style.boxShadow = originalBoxShadow;
+    element.style.background = originalBackground;
+    element.style.borderRadius = "";
+    window.getSelection()?.removeAllRanges();
+  };
+  return marker;
+}
+function getElementTextContent(element) {
+  return element.innerText?.trim() || element.textContent?.trim() || "";
+}
+function getElementDepth(element) {
+  let depth = 0;
+  let current = element;
+  while (current && current !== document.body) {
+    depth++;
+    current = current.parentElement;
+  }
+  return depth;
+}
+function updateOverlayPosition(state, element, overlay) {
+  const targetElement = element || state.hoveredElement;
+  const targetOverlay = overlay || state.overlay;
+  if (!targetElement || !targetOverlay) return;
+  const rect = targetElement.getBoundingClientRect();
+  targetOverlay.style.top = `${rect.top}px`;
+  targetOverlay.style.left = `${rect.left}px`;
+  targetOverlay.style.width = `${rect.width}px`;
+  targetOverlay.style.height = `${rect.height}px`;
+}
+function updateTooltipPosition(state) {
+  if (!state.hoveredElement || !state.tooltip) return;
+  const rect = state.hoveredElement.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  let tooltipTop = rect.top - 32;
+  let tooltipLeft = rect.left;
+  if (tooltipTop < 8) {
+    tooltipTop = rect.bottom + 8;
+  }
+  const estimatedTooltipWidth = state.tooltip.offsetWidth || 150;
+  if (tooltipLeft + estimatedTooltipWidth > viewportWidth - 8) {
+    tooltipLeft = viewportWidth - estimatedTooltipWidth - 8;
+  }
+  if (tooltipLeft < 8) {
+    tooltipLeft = 8;
+  }
+  state.tooltip.style.top = `${tooltipTop}px`;
+  state.tooltip.style.left = `${tooltipLeft}px`;
+}
+function updateSelectionOverlayPosition(state) {
+  if (!state.selectedElement || !state.selectionOverlay) return;
+  updateOverlayPosition(state, state.selectedElement, state.selectionOverlay);
+}
+function getElementInfo(element) {
+  const filePath = element.getAttribute("data-locator-path") || "";
+  const line = element.getAttribute("data-locator-line");
+  const depth = getElementDepth(element);
+  const id = element.id ? `#${element.id}` : "";
+  const classes = element.className && typeof element.className === "string" ? element.className.split(" ").filter((c) => c).map((c) => `.${c}`).join("") : "";
+  return {
+    tagName: element.tagName.toLowerCase(),
+    selector: element.tagName.toLowerCase() + id + classes.slice(0, 50),
+    filePath,
+    line: line ? parseInt(line) : void 0,
+    depth,
+    rect: element.getBoundingClientRect()
+  };
+}
+function highlightElement(state, element) {
+  state.hoveredElement = element;
+  if (!state.overlay) {
+    state.overlay = createOverlay();
+  }
+  if (!state.tooltip) {
+    state.tooltip = createTooltip();
+  }
+  state.overlay.style.display = "block";
+  state.tooltip.style.display = "block";
+  const info = getElementInfo(element);
+  const breadcrumb = getBreadcrumb(element);
+  state.depth = info.depth;
+  const isSelectedElement = state.isSelected && state.selectedElement === element;
+  const priority = getElementPriority(element);
+  const priorityIndicator = priority >= 100 ? "\u{1F3AF}" : priority >= 50 ? "\u{1F4E6}" : "";
+  const tagBadgeColor = INTERACTIVE_ELEMENTS.has(info.tagName) ? "#22c55e" : SEMANTIC_ELEMENTS.has(info.tagName) ? "#3b82f6" : "#64748b";
+  state.tooltip.innerHTML = `
+    <div style="display:flex;flex-direction:column;gap:6px;">
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="background:${tagBadgeColor};padding:2px 8px;border-radius:4px;font-family:ui-monospace,monospace;font-size:11px;font-weight:600;">
+          ${priorityIndicator} ${info.selector}
+        </span>
+        ${info.filePath ? `<span style="color:#94a3b8;font-size:11px;">\u{1F4C4} ${info.filePath.split("/").pop()}${info.line ? `:${info.line}` : ""}</span>` : ""}
+      </div>
+      <div style="color:#64748b;font-size:10px;font-family:ui-monospace,monospace;">
+        ${breadcrumb}
+      </div>
+      <div style="color:#94a3b8;font-size:10px;border-top:1px solid rgba(255,255,255,0.1);padding-top:6px;margin-top:2px;">
+        ${isSelectedElement ? `<span style="color:#22c55e;">\u2713 Selected</span> \xB7 Click to edit \xB7 <kbd style="background:#334155;padding:1px 4px;border-radius:3px;">E</kbd> quick edit` : state.isSelected ? `Click to select` : `Click select \xB7 Double-click edit \xB7 <kbd style="background:#334155;padding:1px 4px;border-radius:3px;">\u2191\u2193\u2190\u2192</kbd> navigate`}
+      </div>
+    </div>
+  `;
+  updateOverlayPosition(state);
+  updateTooltipPosition(state);
+  updateCSSPanel(state, element);
+  sendToParent("HOVER_ELEMENT", {
+    tagName: info.tagName,
+    rect: info.rect,
+    filePath: info.filePath || void 0,
+    line: info.line,
+    depth: info.depth,
+    breadcrumb
+  });
+}
+function navigateDOM(state, direction) {
+  if (!state.hoveredElement) return;
+  let target = null;
+  switch (direction) {
+    case "parent":
+      target = state.hoveredElement.parentElement;
+      if (target && target === document.body) target = null;
+      break;
+    case "child":
+      target = state.hoveredElement.firstElementChild;
+      break;
+    case "next":
+      target = state.hoveredElement.nextElementSibling;
+      break;
+    case "prev":
+      target = state.hoveredElement.previousElementSibling;
+      break;
+  }
+  if (target && target !== document.documentElement && target !== document.body) {
+    highlightElement(state, target);
+  }
+}
+function setupElementSelector() {
+  const state = createElementSelectorState();
+  function saveInlineEdit() {
+    if (!state.inlineEditor || !state.selectedElement) return;
+    const newText = getElementTextContent(state.selectedElement);
+    const info = getElementInfo(state.selectedElement);
+    if (newText !== state.originalText && info.filePath) {
+      sendToParent("SAVE_INLINE_EDIT", {
+        filePath: info.filePath,
+        originalContent: state.originalText,
+        newContent: newText,
+        line: info.line
+      });
+    }
+    exitEditMode();
+  }
+  function cancelInlineEdit() {
+    if (state.selectedElement && state.originalHTML !== void 0) {
+      state.selectedElement.innerHTML = state.originalHTML;
+    }
+    sendToParent("CANCEL_INLINE_EDIT");
+    exitEditMode();
+  }
+  function exitEditMode() {
+    state.isEditing = false;
+    if (state.inlineEditor) {
+      const cleanup = state.inlineEditor.__cleanup;
+      if (cleanup) cleanup();
+      state.inlineEditor.remove();
+      state.inlineEditor = null;
+    }
+    clearSelection();
+    if (state.cssPanel) {
+      state.cssPanel.style.opacity = "0";
+    }
+    if (state.isActive && state.hoveredElement) {
+      if (state.overlay) state.overlay.style.display = "block";
+      if (state.tooltip) state.tooltip.style.display = "block";
+    }
+  }
+  function enterEditMode() {
+    if (!state.selectedElement) return;
+    state.isEditing = true;
+    state.originalHTML = state.selectedElement.innerHTML;
+    if (state.overlay) state.overlay.style.display = "none";
+    if (state.tooltip) state.tooltip.style.display = "none";
+    if (state.selectionOverlay) state.selectionOverlay.style.display = "none";
+    if (state.cssPanel) state.cssPanel.style.opacity = "0";
+    state.inlineEditor = enableInlineEditing(state, state.selectedElement, saveInlineEdit, cancelInlineEdit);
+    const info = getElementInfo(state.selectedElement);
+    sendToParent("START_INLINE_EDIT", {
+      tagName: info.tagName,
+      filePath: info.filePath,
+      line: info.line,
+      text: state.originalText
+    });
+  }
+  function clearSelection() {
+    state.isSelected = false;
+    state.selectedElement = null;
+    state.originalText = "";
+    state.originalHTML = "";
+    if (state.selectionOverlay) {
+      state.selectionOverlay.style.display = "none";
+    }
+    if (state.cssPanel) {
+      state.cssPanel.style.opacity = "0";
+    }
+  }
+  function selectElement() {
+    if (!state.hoveredElement) return;
+    if (state.isSelected && state.selectedElement === state.hoveredElement) {
+      enterEditMode();
+      return;
+    }
+    if (state.isSelected) {
+      clearSelection();
+    }
+    state.isSelected = true;
+    state.selectedElement = state.hoveredElement;
+    const info = getElementInfo(state.hoveredElement);
+    const text = getElementTextContent(state.hoveredElement);
+    const cssInfo = getCSSPreview(state.hoveredElement);
+    const breadcrumb = getBreadcrumb(state.hoveredElement);
+    state.originalText = text;
+    if (!state.selectionOverlay) {
+      state.selectionOverlay = createSelectionOverlay();
+    }
+    state.selectionOverlay.style.display = "block";
+    updateSelectionOverlayPosition(state);
+    if (state.tooltip) {
+      const tagBadgeColor = INTERACTIVE_ELEMENTS.has(info.tagName) ? "#22c55e" : SEMANTIC_ELEMENTS.has(info.tagName) ? "#3b82f6" : "#64748b";
+      state.tooltip.innerHTML = `
+        <div style="display:flex;flex-direction:column;gap:6px;">
+          <div style="display:flex;align-items:center;gap:8px;">
+            <span style="background:${tagBadgeColor};padding:2px 8px;border-radius:4px;font-family:ui-monospace,monospace;font-size:11px;font-weight:600;">
+              \u2713 ${info.selector}
+            </span>
+            ${info.filePath ? `<span style="color:#94a3b8;font-size:11px;">\u{1F4C4} ${info.filePath.split("/").pop()}${info.line ? `:${info.line}` : ""}</span>` : ""}
+          </div>
+          <div style="color:#64748b;font-size:10px;font-family:ui-monospace,monospace;">
+            ${breadcrumb}
+          </div>
+          <div style="color:#22c55e;font-size:10px;border-top:1px solid rgba(255,255,255,0.1);padding-top:6px;margin-top:2px;">
+            \u2713 Selected \xB7 Click again to edit \xB7 <kbd style="background:#334155;padding:1px 4px;border-radius:3px;">Enter</kbd> or <kbd style="background:#334155;padding:1px 4px;border-radius:3px;">E</kbd>
+          </div>
+        </div>
+      `;
+    }
+    sendToParent("CLICK_ELEMENT", {
+      tagName: info.tagName,
+      filePath: info.filePath,
+      line: info.line,
+      depth: info.depth,
+      text,
+      cssInfo
+    });
+  }
+  function startEditing() {
+    if (!state.hoveredElement) return;
+    state.selectedElement = state.hoveredElement;
+    const info = getElementInfo(state.hoveredElement);
+    const text = getElementTextContent(state.hoveredElement);
+    state.originalText = text;
+    sendToParent("CLICK_ELEMENT", {
+      tagName: info.tagName,
+      filePath: info.filePath,
+      line: info.line,
+      depth: info.depth,
+      text
+    });
+    enterEditMode();
+  }
+  const handleMouseMove = (e) => {
+    if (!state.isActive || state.isEditing) return;
+    const now = performance.now();
+    if (now - state.lastMouseMoveTime < MOUSEMOVE_DEBOUNCE) {
+      if (state.pendingMouseMove) cancelAnimationFrame(state.pendingMouseMove);
+      state.pendingMouseMove = requestAnimationFrame(() => processMouseMove(e));
+      return;
+    }
+    state.lastMouseMoveTime = now;
+    processMouseMove(e);
+  };
+  const processMouseMove = (e) => {
+    const element = getElementAtPoint(e.clientX, e.clientY);
+    if (!element) return;
+    if (element === state.hoveredElement) return;
+    state.rawTarget = e.target;
+    highlightElement(state, element);
+  };
+  const handleScroll = () => {
+    if (state.isActive && state.hoveredElement && !state.isEditing) {
+      updateOverlayPosition(state);
+      updateTooltipPosition(state);
+      updateCSSPanel(state, state.hoveredElement);
+    }
+    if (state.isSelected && state.selectedElement) {
+      updateSelectionOverlayPosition(state);
+    }
+  };
+  const handleResize = () => {
+    if (state.isActive && state.hoveredElement && !state.isEditing) {
+      updateOverlayPosition(state);
+      updateTooltipPosition(state);
+      updateCSSPanel(state, state.hoveredElement);
+    }
+    if (state.isSelected && state.selectedElement) {
+      updateSelectionOverlayPosition(state);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!state.isActive) return;
+    if (state.isEditing) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelInlineEdit();
+        return;
+      }
+      return;
+    }
+    switch (e.key) {
+      case "Escape":
+        if (state.isSelected) {
+          e.preventDefault();
+          clearSelection();
+        } else {
+          sendToParent("SELECTOR_EXIT", true);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        navigateDOM(state, "parent");
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        navigateDOM(state, "child");
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        navigateDOM(state, "prev");
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        navigateDOM(state, "next");
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (state.isSelected && state.selectedElement === state.hoveredElement) {
+          enterEditMode();
+        } else {
+          selectElement();
+        }
+        break;
+      case "e":
+      case "E":
+        if (state.hoveredElement) {
+          e.preventDefault();
+          startEditing();
+        }
+        break;
+    }
+  };
+  const handleClick = (e) => {
+    if (!state.isActive) return;
+    if (state.isEditing) {
+      const target = e.target;
+      if (state.selectedElement?.contains(target) || target === state.selectedElement) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      saveInlineEdit();
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    selectElement();
+  };
+  const handleDoubleClick = (e) => {
+    if (!state.isActive || state.isEditing) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    startEditing();
+  };
+  const activateSelector = () => {
+    state.isActive = true;
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("dblclick", handleDoubleClick, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleResize);
+    document.body.style.cursor = "crosshair";
+    state.overlay = createOverlay();
+    state.tooltip = createTooltip();
+  };
+  const deactivateSelector = () => {
+    state.isActive = false;
+    state.isEditing = false;
+    state.isSelected = false;
+    if (state.pendingMouseMove) {
+      cancelAnimationFrame(state.pendingMouseMove);
+      state.pendingMouseMove = null;
+    }
+    document.removeEventListener("mousemove", handleMouseMove, true);
+    document.removeEventListener("click", handleClick, true);
+    document.removeEventListener("dblclick", handleDoubleClick, true);
+    document.removeEventListener("keydown", handleKeyDown, true);
+    window.removeEventListener("scroll", handleScroll, true);
+    window.removeEventListener("resize", handleResize);
+    if (state.overlay) {
+      state.overlay.remove();
+      state.overlay = null;
+    }
+    if (state.selectionOverlay) {
+      state.selectionOverlay.remove();
+      state.selectionOverlay = null;
+    }
+    if (state.tooltip) {
+      state.tooltip.remove();
+      state.tooltip = null;
+    }
+    if (state.cssPanel) {
+      state.cssPanel.remove();
+      state.cssPanel = null;
+    }
+    if (state.inlineEditor) {
+      state.inlineEditor.remove();
+      state.inlineEditor = null;
+    }
+    state.hoveredElement = null;
+    state.selectedElement = null;
+    state.rawTarget = null;
+    state.originalText = "";
+    document.body.style.cursor = "";
+    state.depth = 0;
+  };
+  window.addEventListener("message", (e) => {
+    const msg = e.data;
+    if (msg.type === "TOGGLE_ELEMENT_SELECTOR") {
+      if (msg.payload) {
+        activateSelector();
+      } else {
+        deactivateSelector();
+      }
+    }
+  });
+}
+function initIframeBridge() {
+  try {
+    if (window.parent !== window) {
+      setupIframeBridge();
+      setupElementSelector();
+    }
+  } catch {
+  }
+}
+
+export {
+  sendToParent,
+  setupIframeBridge,
+  setupElementSelector,
+  initIframeBridge
+};