@lego-build/plugins 0.0.1

package/dist/chunk-MZJDRENL.js

@@ -0,0 +1,303 @@
+// src/index.ts
+function sendToParent(type, payload) {
+  window.parent.postMessage({ type, payload }, "*");
+}
+function setupIframeBridge() {
+  const pushState = window.history.pushState;
+  window.history.pushState = function(...args) {
+    const ret = pushState.apply(this, args);
+    sendToParent("IFRAME_URL_CHANGED", window.location.href);
+    return ret;
+  };
+  const replaceState = window.history.replaceState;
+  window.history.replaceState = function(...args) {
+    const ret = replaceState.apply(this, args);
+    sendToParent("IFRAME_URL_CHANGED", window.location.href);
+    return ret;
+  };
+  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,
+    hoveredElement: null,
+    overlay: null,
+    tooltip: null,
+    depth: 0
+  };
+}
+function createOverlay() {
+  const overlay = document.createElement("div");
+  overlay.id = "lego-element-selector-overlay";
+  overlay.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 2147483646;
+    background: rgba(59, 130, 246, 0.1);
+    border: 2px solid #3b82f6;
+    border-radius: 4px;
+    transition: all 0.1s ease-out;
+  `;
+  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: #3b82f6;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: all 0.1s ease-out;
+  `;
+  document.body.appendChild(tooltip);
+  return tooltip;
+}
+function getElementDepth(element) {
+  let depth = 0;
+  let current = element;
+  while (current && current !== document.body) {
+    depth++;
+    current = current.parentElement;
+  }
+  return depth;
+}
+function updateOverlayPosition(state) {
+  if (!state.hoveredElement || !state.overlay || !state.tooltip) return;
+  const rect = state.hoveredElement.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  state.overlay.style.top = `${rect.top}px`;
+  state.overlay.style.left = `${rect.left}px`;
+  state.overlay.style.width = `${rect.width}px`;
+  state.overlay.style.height = `${rect.height}px`;
+  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 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);
+  state.depth = info.depth;
+  state.tooltip.innerHTML = `
+    <span style="opacity: 0.8">${info.selector}</span>
+    ${info.filePath ? `<span style="margin-left: 8px; opacity: 0.6">\u{1F4C4} ${info.filePath.split("/").pop()}</span>` : ""}
+  `;
+  updateOverlayPosition(state);
+  sendToParent("HOVER_ELEMENT", {
+    tagName: info.tagName,
+    rect: info.rect,
+    filePath: info.filePath || void 0,
+    line: info.line,
+    depth: info.depth
+  });
+}
+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 selectElement(state) {
+  if (!state.hoveredElement) return;
+  const info = getElementInfo(state.hoveredElement);
+  sendToParent("CLICK_ELEMENT", {
+    tagName: info.tagName,
+    filePath: info.filePath,
+    line: info.line,
+    depth: info.depth
+  });
+}
+function setupElementSelector() {
+  const state = createElementSelectorState();
+  const handleMouseMove = (e) => {
+    if (!state.isActive) return;
+    const target = e.target;
+    if (target.id === "lego-element-selector-overlay" || target.id === "lego-element-selector-tooltip") {
+      return;
+    }
+    if (target === state.hoveredElement) return;
+    highlightElement(state, target);
+  };
+  const handleScroll = () => {
+    if (state.isActive && state.hoveredElement) {
+      updateOverlayPosition(state);
+    }
+  };
+  const handleResize = () => {
+    if (state.isActive && state.hoveredElement) {
+      updateOverlayPosition(state);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!state.isActive) return;
+    switch (e.key) {
+      case "Escape":
+        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();
+        selectElement(state);
+        break;
+    }
+  };
+  const handleClick = (e) => {
+    if (!state.isActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    selectElement(state);
+  };
+  const activateSelector = () => {
+    state.isActive = true;
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, 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;
+    document.removeEventListener("mousemove", handleMouseMove, true);
+    document.removeEventListener("click", handleClick, 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.tooltip) {
+      state.tooltip.remove();
+      state.tooltip = null;
+    }
+    state.hoveredElement = null;
+    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
+};