@lego-build/plugins 0.0.13 → 0.0.14

package/dist/chunk-57PHJ5T3.js

@@ -0,0 +1,568 @@
+// src/index.ts
+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,
+    inlineEditor: null,
+    depth: 0,
+    originalText: "",
+    originalHTML: ""
+  };
+}
+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.1);
+    border: 2px solid #3b82f6;
+    border-radius: 4px;
+    transition: all 0.1s ease-out;
+  `;
+  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.15);
+    border: 2px solid #22c55e;
+    border-radius: 4px;
+    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
+    transition: all 0.15s 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 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);
+  state.depth = info.depth;
+  const isSelectedElement = state.isSelected && state.selectedElement === element;
+  let actionHint = "";
+  if (isSelectedElement) {
+    actionHint = `<span style="margin-left: 8px; color: #22c55e; font-size: 10px;">\u2713 Selected \xB7 Click to edit</span>`;
+  } else if (state.isSelected) {
+    actionHint = `<span style="margin-left: 8px; opacity: 0.5; font-size: 10px;">Click to select</span>`;
+  } else {
+    actionHint = `<span style="margin-left: 8px; opacity: 0.5; font-size: 10px;">Click to select \xB7 Double-click to edit</span>`;
+  }
+  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>` : ""}
+    ${actionHint}
+  `;
+  updateOverlayPosition(state);
+  updateTooltipPosition(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 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.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";
+    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";
+    }
+  }
+  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);
+    state.originalText = text;
+    if (!state.selectionOverlay) {
+      state.selectionOverlay = createSelectionOverlay();
+    }
+    state.selectionOverlay.style.display = "block";
+    updateSelectionOverlayPosition(state);
+    if (state.tooltip) {
+      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>` : ""}
+        <span style="margin-left: 8px; color: #22c55e; font-size: 10px;">\u2713 Selected \xB7 Click again to edit</span>
+      `;
+    }
+    sendToParent("CLICK_ELEMENT", {
+      tagName: info.tagName,
+      filePath: info.filePath,
+      line: info.line,
+      depth: info.depth,
+      text
+    });
+  }
+  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) return;
+    const target = e.target;
+    if (target.id === "lego-element-selector-overlay" || target.id === "lego-element-selector-tooltip" || target.id === "lego-element-selector-selection") {
+      return;
+    }
+    if (target === state.hoveredElement) return;
+    highlightElement(state, target);
+  };
+  const handleScroll = () => {
+    if (state.isActive && state.hoveredElement) {
+      updateOverlayPosition(state);
+      updateTooltipPosition(state);
+    }
+    if (state.isSelected && state.selectedElement) {
+      updateSelectionOverlayPosition(state);
+    }
+  };
+  const handleResize = () => {
+    if (state.isActive && state.hoveredElement) {
+      updateOverlayPosition(state);
+      updateTooltipPosition(state);
+    }
+    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;
+    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.inlineEditor) {
+      state.inlineEditor.remove();
+      state.inlineEditor = null;
+    }
+    state.hoveredElement = null;
+    state.selectedElement = 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
+};