vite-plugin-visual-selector 0.1.2 → 0.1.4

package/dist/runtime.js

@@ -141,169 +141,6 @@ function handleInlineEdit(state, data, 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;
@@ -362,6 +199,18 @@ function reportPositionUpdate(state) {
   } catch {
   }
 }
+function reportDropdownState(state, isOpen) {
+  try {
+    window.parent.postMessage(
+      {
+        type: "dropdown-state",
+        data: { isOpen }
+      },
+      state.targetOrigin
+    );
+  } catch {
+  }
+}
 function handleMessage(state, e, callbacks) {
   if (state.targetOrigin !== "*" && e.origin !== state.targetOrigin) return;
   const msg = e.data;
@@ -395,10 +244,7 @@ function handleMessage(state, e, callbacks) {
       break;
     case "unselect-element":
       if (state.editingElement) callbacks.stopInlineEditing();
-      state.selectionOverlays.forEach((o) => o.remove());
-      state.selectionOverlays = [];
-      state.selectedId = null;
-      state.selectedElement = null;
+      callbacks.clearSelectionState();
       break;
     case "update-theme-variables":
       if (msg.data?.variables) {
@@ -433,6 +279,11 @@ function handleMessage(state, e, callbacks) {
     case "request-element-position":
       reportPositionUpdate(state);
       break;
+    case "select-element-by-id":
+      if (msg.data?.visualSelectorId) {
+        callbacks.selectElementById(msg.data.visualSelectorId);
+      }
+      break;
     case CONTROL_MESSAGE_TYPE: {
       const controlMsg = msg;
       if (typeof controlMsg.active === "boolean") {
@@ -483,6 +334,27 @@ function createOverlay(opts) {
   }
   return overlay;
 }
+function setTagArrowExpanded(arrow, expanded) {
+  arrow.style.transform = expanded ? "rotate(0deg)" : "rotate(180deg)";
+}
+function createTagArrowSvg() {
+  const svgNs = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(svgNs, "svg");
+  svg.setAttribute("xmlns", svgNs);
+  svg.setAttribute("width", "12");
+  svg.setAttribute("height", "12");
+  svg.setAttribute("viewBox", "0 0 12 12");
+  svg.setAttribute("fill", "none");
+  svg.style.display = "block";
+  const path = document.createElementNS(svgNs, "path");
+  path.setAttribute("stroke", "rgba(51, 51, 51, 1)");
+  path.setAttribute("stroke-width", "0.8325");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("d", "M3.24994 7.5L6.24994 4.5L9.24994 7.5");
+  svg.appendChild(path);
+  return svg;
+}
 function positionOverlay(overlay, target, tagMode = "none", callbacks) {
   const rect = target.getBoundingClientRect();
   overlay.style.top = `${rect.top + window.scrollY}px`;
@@ -505,8 +377,10 @@ function positionOverlay(overlay, target, tagMode = "none", callbacks) {
         textAlign: "center",
         display: "flex",
         alignItems: "center",
+        justifyContent: "center",
         gap: "3px",
-        lineHeight: "1.4"
+        lineHeight: "1.4",
+        whiteSpace: "nowrap"
       });
       if (tagMode === "selected") {
         tag.style.backgroundColor = "#FC0";
@@ -515,12 +389,23 @@ function positionOverlay(overlay, target, tagMode = "none", callbacks) {
         tag.style.pointerEvents = "auto";
         const textSpan = document.createElement("span");
         textSpan.textContent = target.tagName.toLowerCase();
+        textSpan.style.display = "inline-flex";
+        textSpan.style.alignItems = "center";
+        textSpan.style.lineHeight = "1";
         tag.appendChild(textSpan);
         const arrow = document.createElement("span");
         arrow.setAttribute("data-tag-arrow", "");
-        arrow.textContent = "\u2304";
-        arrow.style.fontSize = "10px";
+        arrow.textContent = "";
+        arrow.style.display = "inline-flex";
+        arrow.style.alignItems = "center";
+        arrow.style.justifyContent = "center";
+        arrow.style.width = "12px";
+        arrow.style.height = "12px";
+        arrow.style.flex = "0 0 auto";
+        arrow.style.transformOrigin = "center";
         arrow.style.lineHeight = "1";
+        arrow.appendChild(createTagArrowSvg());
+        setTagArrowExpanded(arrow, false);
         tag.appendChild(arrow);
         if (callbacks?.onTagClick) {
           const onTagClick = callbacks.onTagClick;
@@ -643,6 +528,171 @@ function unfreezeAnimations() {
   if (overflowStyle) overflowStyle.remove();
 }
 
+// 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) setTagArrowExpanded(arrowEl, false);
+    }
+    state.layerDropdown.remove();
+    state.layerDropdown = null;
+    reportDropdownState(state, false);
+    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: "2147483647",
+    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;
+  reportDropdownState(state, true);
+  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/state.ts
 function createAgentState(options = {}) {
   return {
@@ -656,13 +706,36 @@ function createAgentState(options = {}) {
     layerDropdown: null,
     mutationObserver: null,
     attributeName: options.attributeName ?? DEFAULT_ATTRIBUTE_NAME,
-    targetOrigin: options.targetOrigin ?? "*"
+    targetOrigin: options.targetOrigin ?? "*",
+    runtimeIdCounter: 0
   };
 }
 
 // src/runtime/index.ts
 function setupVisualEditAgent(options = {}) {
   const state = createAgentState(options);
+  const trackedSelector = `[${state.attributeName}], [data-visual-selector-id]`;
+  function shouldAssignRuntimeId(element) {
+    return !element.closest(`[${AGENT_ATTR}]`) && !element.hasAttribute(state.attributeName) && !element.hasAttribute("data-visual-selector-id");
+  }
+  function assignRuntimeId(element) {
+    if (!shouldAssignRuntimeId(element)) return;
+    state.runtimeIdCounter += 1;
+    element.setAttribute("data-visual-selector-id", `runtime:${state.runtimeIdCounter}`);
+  }
+  function trackElementSubtree(root) {
+    assignRuntimeId(root);
+    root.querySelectorAll("*").forEach((element) => assignRuntimeId(element));
+  }
+  function trackCurrentDom() {
+    if (!document.body) return;
+    trackElementSubtree(document.body);
+  }
+  function ensureElementTracked(element) {
+    if (!element.closest(`[${AGENT_ATTR}]`)) {
+      assignRuntimeId(element);
+    }
+  }
   function updateAllOverlayPositions() {
     if (state.selectedId && state.selectedElement?.isConnected) {
       const siblings = findAllElementsById(state.selectedId);
@@ -679,7 +752,7 @@ function setupVisualEditAgent(options = {}) {
   function onTagClick(target, tag) {
     const arrowEl = tag.querySelector("[data-tag-arrow]");
     if (arrowEl) {
-      arrowEl.textContent = state.layerDropdown ? "\u2304" : "\u2303";
+      setTagArrowExpanded(arrowEl, !state.layerDropdown);
     }
     toggleLayerDropdown(state, target, tag, selectElement);
   }
@@ -690,7 +763,10 @@ function setupVisualEditAgent(options = {}) {
     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;
+    const trackedElement = element.closest(trackedSelector);
+    if (trackedElement) return trackedElement;
+    ensureElementTracked(element);
+    return element.hasAttribute("data-visual-selector-id") ? element : null;
   }
   function findHoverTarget(x, y, excludeId) {
     const element = findElementAtPoint(x, y);
@@ -738,6 +814,7 @@ function setupVisualEditAgent(options = {}) {
     selectElement(element);
   }
   function selectElement(element) {
+    ensureElementTracked(element);
     const id = getSourceId(element);
     if (!id) return;
     if (state.editingElement) {
@@ -773,6 +850,7 @@ function setupVisualEditAgent(options = {}) {
     if (enabled) {
       document.body.style.cursor = "crosshair";
       freezeAnimations();
+      trackCurrentDom();
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseleave", onMouseLeave);
       document.addEventListener("click", onClick, true);
@@ -799,6 +877,13 @@ function setupVisualEditAgent(options = {}) {
   function startMutationObserver() {
     if (state.mutationObserver) return;
     state.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof Element) {
+            trackElementSubtree(node);
+          }
+        });
+      });
       const hasRelevantChange = mutations.some((m) => {
         if (m.type === "attributes" && ["style", "class", "width", "height"].includes(m.attributeName ?? "") && containsTrackedElement(m.target))
           return true;
@@ -824,8 +909,8 @@ function setupVisualEditAgent(options = {}) {
   }
   function containsTrackedElement(node) {
     if (!(node instanceof Element)) return false;
-    if (node.hasAttribute(AGENT_ATTR)) return false;
-    return hasSourceLocation(node) || !!node.querySelector(`[${state.attributeName}]`);
+    if (node.closest(`[${AGENT_ATTR}]`)) return false;
+    return node.hasAttribute(state.attributeName) || node.hasAttribute("data-visual-selector-id") || !!node.querySelector(trackedSelector);
   }
   function setupSandboxMountObserver() {
     if (window.self === window.top) return;
@@ -834,7 +919,9 @@ function setupVisualEditAgent(options = {}) {
         (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;
+      const hasTrackedElements = document.body.querySelectorAll(
+        `[${state.attributeName}], [data-dynamic-content], [data-visual-selector-id]`
+      ).length > 0;
       try {
         window.parent.postMessage(
           {
@@ -853,12 +940,25 @@ function setupVisualEditAgent(options = {}) {
       });
     }
   }
+  function selectElementById(id) {
+    const element = document.querySelector(
+      `[${state.attributeName}="${id}"], [data-visual-selector-id="${id}"]`
+    );
+    if (element) {
+      selectElement(element);
+    }
+  }
+  function clearSelectionState() {
+    clearAllOverlays(state, () => removeLayerDropdown(state));
+  }
   const onMessage = (e) => {
     handleMessage(state, e, {
       enableEditMode,
       updateAllOverlayPositions,
       stopInlineEditing: () => stopInlineEditing(state, updateAllOverlayPositions),
-      handleInlineEdit: (data) => handleInlineEdit(state, data, updateAllOverlayPositions)
+      handleInlineEdit: (data) => handleInlineEdit(state, data, updateAllOverlayPositions),
+      selectElementById,
+      clearSelectionState
     });
   };
   window.addEventListener("message", onMessage);
@@ -877,7 +977,7 @@ function setupVisualEditAgent(options = {}) {
     enableEditMode,
     selectElement,
     clearSelection() {
-      clearAllOverlays(state, () => removeLayerDropdown(state));
+      clearSelectionState();
     },
     getSelectedId() {
       return state.selectedId;