@lego-build/plugins 0.0.1

package/dist/chunk-RM4HZDF3.js

@@ -0,0 +1,555 @@
+// src/bridge.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;
+    }
+  });
+}
+
+// src/selector.ts
+function createElementSelectorState() {
+  return {
+    isActive: false,
+    isEditing: false,
+    hoveredElement: null,
+    selectedElement: null,
+    overlay: null,
+    tooltip: null,
+    inlineEditor: null,
+    depth: 0,
+    originalText: ""
+  };
+}
+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 createInlineEditor(state, element, onSave, onCancel) {
+  const rect = element.getBoundingClientRect();
+  const elementText = getElementTextContent(element);
+  const editor = document.createElement("div");
+  editor.id = "lego-inline-editor";
+  editor.style.cssText = `
+    position: fixed;
+    top: ${rect.top}px;
+    left: ${rect.left}px;
+    width: ${Math.max(rect.width, 200)}px;
+    z-index: 2147483647;
+    background: white;
+    border: 2px solid #3b82f6;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    padding: 8px;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+  `;
+  const header = document.createElement("div");
+  header.style.cssText = `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e5e7eb;
+  `;
+  header.innerHTML = `
+    <span style="font-size: 11px; font-weight: 500; color: #6b7280;">
+      \u270F\uFE0F Edit Text
+    </span>
+    <span style="font-size: 10px; color: #9ca3af;">
+      Ctrl+Enter to save \u2022 Esc to cancel
+    </span>
+  `;
+  const input = document.createElement("textarea");
+  input.id = "lego-inline-editor-input";
+  input.value = elementText;
+  input.style.cssText = `
+    width: 100%;
+    min-height: 60px;
+    padding: 8px;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    resize: vertical;
+    outline: none;
+    box-sizing: border-box;
+  `;
+  input.placeholder = "Enter text...";
+  const buttons = document.createElement("div");
+  buttons.style.cssText = `
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    justify-content: flex-end;
+  `;
+  const cancelBtn = document.createElement("button");
+  cancelBtn.textContent = "Cancel";
+  cancelBtn.style.cssText = `
+    padding: 6px 12px;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    background: white;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.15s;
+  `;
+  cancelBtn.onmouseenter = () => cancelBtn.style.background = "#f3f4f6";
+  cancelBtn.onmouseleave = () => cancelBtn.style.background = "white";
+  cancelBtn.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onCancel();
+  };
+  const saveBtn = document.createElement("button");
+  saveBtn.textContent = "Save";
+  saveBtn.style.cssText = `
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+    background: #3b82f6;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+  `;
+  saveBtn.onmouseenter = () => saveBtn.style.background = "#2563eb";
+  saveBtn.onmouseleave = () => saveBtn.style.background = "#3b82f6";
+  saveBtn.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onSave();
+  };
+  editor.appendChild(header);
+  editor.appendChild(input);
+  buttons.appendChild(cancelBtn);
+  buttons.appendChild(saveBtn);
+  editor.appendChild(buttons);
+  document.body.appendChild(editor);
+  setTimeout(() => {
+    input.focus();
+    input.select();
+  }, 0);
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      onCancel();
+    } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      onSave();
+    }
+  });
+  input.addEventListener("keyup", (e) => {
+    e.stopPropagation();
+  });
+  input.addEventListener("keypress", (e) => {
+    e.stopPropagation();
+  });
+  return editor;
+}
+function getElementTextContent(element) {
+  let text = "";
+  for (const node of element.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent?.trim() || "";
+    }
+  }
+  if (!text && element.children.length === 0) {
+    text = element.textContent?.trim() || "";
+  }
+  return text;
+}
+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>` : ""}
+    <span style="margin-left: 8px; opacity: 0.5; font-size: 10px;">Double-click to edit</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 setupElementSelector() {
+  const state = createElementSelectorState();
+  function saveInlineEdit() {
+    if (!state.inlineEditor || !state.selectedElement) return;
+    const input = state.inlineEditor.querySelector(
+      "#lego-inline-editor-input"
+    );
+    const newText = input?.value || "";
+    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() {
+    sendToParent("CANCEL_INLINE_EDIT");
+    exitEditMode();
+  }
+  function exitEditMode() {
+    state.isEditing = false;
+    if (state.inlineEditor) {
+      state.inlineEditor.remove();
+      state.inlineEditor = null;
+    }
+    if (state.isActive && state.hoveredElement) {
+      if (state.overlay) state.overlay.style.display = "block";
+      if (state.tooltip) state.tooltip.style.display = "block";
+    }
+    state.selectedElement = null;
+    state.originalText = "";
+  }
+  function enterEditMode() {
+    if (!state.selectedElement) return;
+    state.isEditing = true;
+    if (state.overlay) state.overlay.style.display = "none";
+    if (state.tooltip) state.tooltip.style.display = "none";
+    state.inlineEditor = createInlineEditor(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 selectElement() {
+    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
+    });
+  }
+  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") {
+      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;
+    if (state.isEditing) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelInlineEdit();
+        return;
+      }
+      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();
+        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.inlineEditor?.contains(target)) {
+        if (target.tagName === "BUTTON") {
+          e.preventDefault();
+          e.stopPropagation();
+          if (target.textContent === "Save") {
+            saveInlineEdit();
+          } else if (target.textContent === "Cancel") {
+            cancelInlineEdit();
+          }
+        }
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      cancelInlineEdit();
+      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;
+    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.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();
+      }
+    }
+  });
+}
+
+export {
+  sendToParent,
+  setupIframeBridge,
+  setupElementSelector
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+declare function sendToParent(type: string, payload?: unknown): void;
+declare function setupIframeBridge(): void;
+
+declare function setupElementSelector(): void;
+
+/**
+ * Auto-initialize iframe bridge when running in iframe.
+ * Call this in your entry point or use setupIframeBridge/setupElementSelector manually.
+ */
+declare function initIframeBridge(): void;
+
+export { initIframeBridge, sendToParent, setupElementSelector, setupIframeBridge };