@archie/devtools 0.0.5 → 0.0.6

package/dist/client/inject-inspector/auto.js

@@ -0,0 +1,1197 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/client/inject-inspector/inspector.js
+var inspector_exports = {};
+__export(inspector_exports, {
+  default: () => runInspector
+});
+function runInspector() {
+  ;
+  (function() {
+    "use strict";
+    if (window._inspectorQuerySelectorProtected) {
+      return;
+    }
+    window._inspectorQuerySelectorProtected = true;
+    const originalQuerySelector = document.querySelector.bind(document);
+    const originalQuerySelectorAll = document.querySelectorAll.bind(document);
+    var PROBLEMATIC_SELECTOR_PATTERNS = [
+      /\/\d+/,
+      /\[backdrop-filter\]/,
+      /supports-\[/,
+      /:\d+\.\d+/,
+      /\.bg-background\/\d+/,
+      /\.supports-\[backdrop-filter\]/,
+      /bg-background\/\d+/,
+      /supports-\[/
+    ];
+    function isProblematicSelector(selector) {
+      if (!selector || typeof selector !== "string") return false;
+      return PROBLEMATIC_SELECTOR_PATTERNS.some(function(p) {
+        return p.test(selector);
+      });
+    }
+    function isSelectorSyntaxError(e) {
+      return e && (e.name === "SyntaxError" || e.message && (e.message.includes("not a valid selector") || e.message.includes("Failed to execute")));
+    }
+    const protectedQuerySelector = function(selector) {
+      try {
+        if (!selector || typeof selector !== "string") {
+          return originalQuerySelector(selector);
+        }
+        if (isProblematicSelector(selector)) return null;
+        return originalQuerySelector(selector);
+      } catch (e) {
+        if (isSelectorSyntaxError(e)) return null;
+        throw e;
+      }
+    };
+    const protectedQuerySelectorAll = function(selector) {
+      try {
+        if (!selector || typeof selector !== "string") {
+          return originalQuerySelectorAll(selector);
+        }
+        if (isProblematicSelector(selector)) return document.createDocumentFragment();
+        return originalQuerySelectorAll(selector);
+      } catch (e) {
+        if (isSelectorSyntaxError(e)) return document.createDocumentFragment();
+        throw e;
+      }
+    };
+    Object.defineProperty(document, "querySelector", {
+      value: protectedQuerySelector,
+      writable: false,
+      configurable: false
+    });
+    Object.defineProperty(document, "querySelectorAll", {
+      value: protectedQuerySelectorAll,
+      writable: false,
+      configurable: false
+    });
+  })();
+  (function() {
+    "use strict";
+    var TARGET_ORIGIN = typeof window !== "undefined" && window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ || "";
+    function postMessageToParent(msg) {
+      if (window.parent !== window && TARGET_ORIGIN && TARGET_ORIGIN !== "*") {
+        window.parent.postMessage(msg, TARGET_ORIGIN);
+      }
+    }
+    var ALLOWED_ORIGINS = typeof window !== "undefined" && window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__ || null;
+    function isOriginAllowed(origin) {
+      if (!origin) return false;
+      if (!Array.isArray(ALLOWED_ORIGINS) || ALLOWED_ORIGINS.length === 0 || ALLOWED_ORIGINS === "*") return false;
+      return ALLOWED_ORIGINS.indexOf(origin) !== -1;
+    }
+    var SCROLL_LISTENER_OPTS = { capture: true, passive: true };
+    var RESIZE_LISTENER_OPTS = { passive: true };
+    if (typeof window.__ARCHIE_INSPECTOR__ === "undefined") {
+      window.__ARCHIE_INSPECTOR__ = {};
+    }
+    if (typeof window._inspectorDebug === "undefined") {
+      window._inspectorDebug = false;
+    }
+    window.__ARCHIE_INSPECTOR__.debug = window._inspectorDebug;
+    function inspectorLog() {
+      if (window._inspectorDebug) {
+        console.log.apply(console, arguments);
+      }
+    }
+    function inspectorWarn() {
+      if (window._inspectorDebug) {
+        console.warn.apply(console, arguments);
+      }
+    }
+    postMessageToParent({
+      type: "INSPECTOR_SCRIPT_LOADED",
+      timestamp: Date.now(),
+      version: "2.0.3"
+    });
+    if (window._inspectorMessageHandler) {
+      try {
+        window.removeEventListener("message", window._inspectorMessageHandler);
+      } catch (e) {
+      }
+      delete window._inspectorMessageHandler;
+    }
+    if (window._inspectorSelectedElement) {
+      try {
+        if (!window._inspectorSelectedElement.parentNode || !document.contains(window._inspectorSelectedElement)) {
+          window._inspectorSelectedElement = null;
+        }
+      } catch (e) {
+        window._inspectorSelectedElement = null;
+      }
+    }
+    let isInspecting = false;
+    let isElementSelected = false;
+    let highlightedElement = null;
+    let overlay = null;
+    let selectedElement = null;
+    let selectedElements = [];
+    let selectedElementBadge = null;
+    let eventBlockers = [];
+    let lastMultiSelectIntent = false;
+    var inspectorCleanupMap = /* @__PURE__ */ new WeakMap();
+    var BADGE_UPDATE_DELAY_MS = 50;
+    if (!window._inspectorSelectedElement) {
+      window._inspectorSelectedElement = null;
+    }
+    window.__ARCHIE_INSPECTOR__.selectedElement = window._inspectorSelectedElement;
+    function isInspectorElement(element) {
+      if (!element) return false;
+      return element === overlay || element === selectedElementBadge || element.id === "inspector-ping-effect" || element.closest && element.closest("[data-inspector-badge]");
+    }
+    function getElementFromPoint(x, y, fallbackTarget) {
+      try {
+        const element = document.elementFromPoint(x, y);
+        if (element && element !== document.body && element !== document.documentElement) {
+          return element;
+        }
+      } catch (err) {
+      }
+      return fallbackTarget || null;
+    }
+    function applyInspectorStyles(element) {
+      if (!element) return;
+      element.style.setProperty("outline", "2px solid #3b82f6", "important");
+      element.style.setProperty("outline-offset", "2px", "important");
+      element.setAttribute("data-inspector-editing", "true");
+      element.style.setProperty("transition", "all 0.1s ease-in-out", "important");
+      element.style.setProperty("position", "relative", "important");
+      element.style.setProperty("z-index", "10000", "important");
+    }
+    function removeInspectorStyles(element) {
+      if (!element) return;
+      element.style.removeProperty("outline");
+      element.style.removeProperty("outline-offset");
+      element.removeAttribute("data-inspector-editing");
+      element.style.removeProperty("transition");
+      element.style.removeProperty("position");
+      element.style.removeProperty("z-index");
+    }
+    function getElementCleanup(element) {
+      return element ? inspectorCleanupMap.get(element) : null;
+    }
+    function setElementCleanup(element, cleanup) {
+      if (!element) return;
+      var prev = inspectorCleanupMap.get(element);
+      if (prev) {
+        window.removeEventListener("scroll", prev.scroll, true);
+        window.removeEventListener("resize", prev.resize);
+      }
+      inspectorCleanupMap.set(element, cleanup);
+    }
+    function deleteElementCleanup(element) {
+      if (!element) return;
+      var prev = inspectorCleanupMap.get(element);
+      if (prev) {
+        window.removeEventListener("scroll", prev.scroll, true);
+        window.removeEventListener("resize", prev.resize);
+      }
+      inspectorCleanupMap.delete(element);
+    }
+    function cleanupElementListeners(element) {
+      if (!element) return;
+      deleteElementCleanup(element);
+    }
+    function setupBadgePositionListeners(element) {
+      if (!element) return;
+      function updateBadgePosition() {
+        if (selectedElement && selectedElementBadge) {
+          var rect = selectedElement.getBoundingClientRect();
+          var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+          var scrollY = window.pageYOffset || document.documentElement.scrollTop;
+          selectedElementBadge.style.top = rect.top + scrollY + "px";
+          selectedElementBadge.style.left = rect.left + scrollX + "px";
+        }
+      }
+      window.addEventListener("scroll", updateBadgePosition, SCROLL_LISTENER_OPTS);
+      window.addEventListener("resize", updateBadgePosition, RESIZE_LISTENER_OPTS);
+      setElementCleanup(element, {
+        scroll: updateBadgePosition,
+        resize: updateBadgePosition
+      });
+    }
+    function setupEventBlockers() {
+      removeEventBlockers();
+      const eventsToBlock = [
+        "click",
+        "mousedown",
+        "mouseup",
+        "dblclick",
+        "contextmenu",
+        "submit",
+        "change",
+        "input",
+        "focus",
+        "blur",
+        "keydown",
+        "keyup"
+      ];
+      const blockEvent = function(e) {
+        if (!isInspecting) return;
+        if (e.type === "mousemove" || e.type === "pointermove" || isInspectorElement(e.target)) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        return false;
+      };
+      eventsToBlock.forEach(function(eventType) {
+        document.addEventListener(eventType, blockEvent, {
+          capture: true,
+          passive: false
+        });
+        eventBlockers.push({ type: eventType, handler: blockEvent });
+      });
+    }
+    function removeEventBlockers() {
+      eventBlockers.forEach(function(blocker) {
+        document.removeEventListener(blocker.type, blocker.handler, {
+          capture: true,
+          passive: false
+        });
+      });
+      eventBlockers = [];
+    }
+    const updateMultiSelectIntent = (event) => {
+      if (!isInspecting) return;
+      lastMultiSelectIntent = event.metaKey || event.ctrlKey;
+    };
+    document.addEventListener("pointerdown", updateMultiSelectIntent, true);
+    document.addEventListener(
+      "pointerup",
+      (event) => {
+        if (!event.metaKey && !event.ctrlKey) {
+          lastMultiSelectIntent = false;
+        }
+      },
+      true
+    );
+    document.addEventListener(
+      "keyup",
+      (event) => {
+        if (!event.metaKey && !event.ctrlKey) {
+          lastMultiSelectIntent = false;
+        }
+      },
+      true
+    );
+    function getSelectedElement() {
+      if (selectedElement && selectedElement.parentNode !== null && document.contains(selectedElement)) {
+        return selectedElement;
+      }
+      if (window._inspectorSelectedElement && window._inspectorSelectedElement.parentNode !== null && document.contains(window._inspectorSelectedElement)) {
+        selectedElement = window._inspectorSelectedElement;
+        return selectedElement;
+      }
+      try {
+        const element = document.querySelector('[data-inspector-editing="true"]');
+        if (element && document.contains(element)) {
+          selectedElement = element;
+          window._inspectorSelectedElement = element;
+          if (window.__ARCHIE_INSPECTOR__) window.__ARCHIE_INSPECTOR__.selectedElement = element;
+          return element;
+        }
+      } catch (e) {
+      }
+      return null;
+    }
+    function updateSharedHighlights() {
+      const sharedElements = document.querySelectorAll(
+        '[data-inspector-shared="true"]'
+      );
+      sharedElements.forEach((el) => {
+        el.removeAttribute("data-inspector-shared");
+        if (!selectedElements.includes(el) && el !== highlightedElement) {
+          el.style.removeProperty("outline");
+          el.style.removeProperty("outline-offset");
+        }
+      });
+      const targets = [];
+      if (selectedElements && selectedElements.length > 0) {
+        selectedElements.forEach((el) => targets.push(el));
+      }
+      if (highlightedElement && !selectedElements.includes(highlightedElement)) {
+        targets.push(highlightedElement);
+      }
+      targets.forEach((target) => {
+        const componentRoot = target.closest("[data-inspector-relative-path]");
+        if (!componentRoot) return;
+        const path = componentRoot.getAttribute("data-inspector-relative-path");
+        const line = componentRoot.getAttribute("data-inspector-line");
+        const column = componentRoot.getAttribute("data-inspector-column");
+        if (!path || !line || !column) return;
+        const selector = `[data-inspector-relative-path="${path}"][data-inspector-line="${line}"][data-inspector-column="${column}"]`;
+        const newShared = document.querySelectorAll(selector);
+        newShared.forEach((el) => {
+          if (selectedElements.includes(el) || el === highlightedElement) return;
+          el.setAttribute("data-inspector-shared", "true");
+          el.style.setProperty(
+            "outline",
+            "2px dashed rgba(59, 130, 246, 0.2)",
+            "important"
+          );
+          el.style.setProperty("outline-offset", "2px", "important");
+        });
+      });
+    }
+    function highlightElement(element) {
+      if (!element || selectedElements.includes(element)) {
+        return;
+      }
+      if (highlightedElement && highlightedElement !== element) {
+        highlightedElement.style.outline = "";
+        highlightedElement.style.transition = "";
+        highlightedElement.style.outlineOffset = "";
+        highlightedElement.style.border = "";
+      }
+      highlightedElement = element;
+      element.style.outline = "";
+      element.style.outlineOffset = "";
+      element.style.border = "";
+      element.style.transition = "";
+      element.style.setProperty("outline", "2px solid #3b82f6", "important");
+      element.style.setProperty("outline-offset", "2px", "important");
+      updateSharedHighlights();
+    }
+    function removeHighlight() {
+      if (highlightedElement) {
+        highlightedElement.style.outline = "";
+        highlightedElement.style.transition = "";
+        highlightedElement.style.outlineOffset = "";
+        highlightedElement.style.border = "";
+        highlightedElement = null;
+      }
+      const pingEffect = document.getElementById("inspector-ping-effect");
+      if (pingEffect) {
+        pingEffect.remove();
+      }
+      if (overlay) {
+        overlay.remove();
+        overlay = null;
+      }
+      updateSharedHighlights();
+    }
+    function createSelectedBadge(element) {
+    }
+    function removeSelectedBadge() {
+      if (selectedElementBadge) {
+        selectedElementBadge.remove();
+        selectedElementBadge = null;
+      }
+      selectedElements.forEach((el) => {
+        if (el && el._inspectorPingCleanup) {
+          window.removeEventListener(
+            "scroll",
+            el._inspectorPingCleanup.scroll,
+            true
+          );
+          window.removeEventListener("resize", el._inspectorPingCleanup.resize);
+          if (el._inspectorPingCleanup.pingElement) {
+            el._inspectorPingCleanup.pingElement.remove();
+          }
+          delete el._inspectorPingCleanup;
+        }
+        removeInspectorStyles(el);
+        if (el.style) {
+          el.style.removeProperty("transition");
+        }
+      });
+      if (selectedElement && !selectedElements.includes(selectedElement)) {
+        removeInspectorStyles(selectedElement);
+        if (selectedElement.style) {
+          selectedElement.style.removeProperty("transition");
+        }
+      }
+      selectedElement = null;
+      isElementSelected = false;
+    }
+    function getElementSelector(element) {
+      if (!element) return "";
+      if (element.id) {
+        return "#" + element.id;
+      }
+      let selector = element.tagName.toLowerCase();
+      if (element.className && typeof element.className === "string" && element.className.trim()) {
+        const classes = element.className.trim().split(/\s+/).filter((c) => c && c.length > 0);
+        if (classes.length > 0) {
+          selector += "." + classes.slice(0, 2).join(".");
+        }
+      }
+      return selector;
+    }
+    function extractMetadata(element) {
+      if (!element) return null;
+      const computed = window.getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      const attributes = {};
+      for (let i = 0; i < element.attributes.length; i++) {
+        const attr = element.attributes[i];
+        attributes[attr.name] = attr.value;
+      }
+      let inspectorInfo = null;
+      let currentElement = element;
+      while (currentElement && currentElement !== document.body && currentElement !== document.documentElement) {
+        const relativePath = currentElement.getAttribute(
+          "data-inspector-relative-path"
+        );
+        const line = currentElement.getAttribute("data-inspector-line");
+        const column = currentElement.getAttribute("data-inspector-column");
+        if (relativePath && line) {
+          inspectorInfo = {
+            file: relativePath,
+            line: parseInt(line, 10),
+            column: column ? parseInt(column, 10) : 1
+          };
+          break;
+        }
+        currentElement = currentElement.parentElement;
+      }
+      function getCssSelector(el) {
+        if (!el) return "";
+        if (el.id) {
+          return "#" + el.id;
+        }
+        if (el.hasAttribute && el.hasAttribute("data-inspector-editing")) {
+          const relativePath = el.getAttribute("data-inspector-relative-path");
+          const line = el.getAttribute("data-inspector-line");
+          if (relativePath && line) {
+            const tagName = el.nodeName.toLowerCase();
+            const inspectorSelector = tagName + '[data-inspector-line="' + line + '"][data-inspector-relative-path="' + relativePath + '"]';
+            try {
+              const matches = document.querySelectorAll(inspectorSelector);
+              if (matches.length === 1) {
+                return inspectorSelector;
+              }
+            } catch (e) {
+            }
+          }
+        }
+        const path = [];
+        let current = el;
+        while (current && current.nodeType === Node.ELEMENT_NODE && current !== document.body && current !== document.documentElement) {
+          let selector = current.nodeName.toLowerCase();
+          if (current.className && typeof current.className === "string" && current.className.trim()) {
+            const classes = current.className.trim().split(/\s+/).filter(function(c) {
+              return c && c.length > 0 && c.length < 50;
+            });
+            if (classes.length > 0 && classes.length <= 3) {
+              selector += "." + classes.slice(0, 2).join(".");
+            }
+          }
+          let sibling = current;
+          let nth = 1;
+          while (sibling.previousElementSibling) {
+            sibling = sibling.previousElementSibling;
+            if (sibling.nodeName === current.nodeName) {
+              nth++;
+            }
+          }
+          if (nth > 1) {
+            selector += ":nth-of-type(" + nth + ")";
+          }
+          path.unshift(selector);
+          current = current.parentElement;
+        }
+        return path.length > 0 ? path.join(" > ") : el.nodeName.toLowerCase();
+      }
+      return {
+        tagName: element.tagName.toLowerCase(),
+        id: element.id || null,
+        className: element.className && typeof element.className === "string" ? element.className.trim() || null : null,
+        textContent: element.textContent ? element.textContent.trim().slice(0, 200) : null,
+        innerHTML: element.innerHTML ? element.innerHTML.slice(0, 500) : null,
+        attributes,
+        // Inspector source info from data-inspector-* attributes
+        inspectorSource: inspectorInfo,
+        computedStyles: {
+          display: computed.display,
+          position: computed.position,
+          width: computed.width,
+          height: computed.height,
+          margin: computed.margin,
+          padding: computed.padding,
+          fontSize: computed.fontSize,
+          color: computed.color,
+          backgroundColor: computed.backgroundColor,
+          border: computed.border,
+          borderRadius: computed.borderRadius,
+          textAlign: computed.textAlign,
+          fontFamily: computed.fontFamily,
+          fontWeight: computed.fontWeight,
+          lineHeight: computed.lineHeight,
+          letterSpacing: computed.letterSpacing
+        },
+        boundingRect: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+          top: rect.top,
+          left: rect.left,
+          bottom: rect.bottom,
+          right: rect.right
+        },
+        cssSelector: getCssSelector(element)
+      };
+    }
+    const messageHandler = function(event) {
+      if (!isOriginAllowed(event.origin)) return;
+      if (!event.data || typeof event.data !== "object" || typeof event.data.type !== "string")
+        return;
+      if (event.data && event.data.type && event.data.type !== "GET_ELEMENT_POSITION") {
+        inspectorLog("[Inspector] Received message:", event.data.type, event.data);
+      }
+      if (event.data && event.data.type === "START_INSPECTION") {
+        selectedElement = null;
+        selectedElements = [];
+        window._inspectorSelectedElement = null;
+        lastMultiSelectIntent = false;
+        isInspecting = true;
+        const applyCursorStyles = () => {
+          if (document.body) {
+            document.body.style.cursor = "crosshair";
+            document.body.style.userSelect = "none";
+          } else {
+            setTimeout(applyCursorStyles, 100);
+          }
+        };
+        applyCursorStyles();
+        setupEventBlockers();
+      } else if (event.data && event.data.type === "STOP_INSPECTION") {
+        isInspecting = false;
+        isElementSelected = false;
+        removeEventBlockers();
+        if (document.body) {
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+        }
+        removeHighlight();
+        removeSelectedBadge();
+        selectedElements = [];
+        lastMultiSelectIntent = false;
+        updateSharedHighlights();
+        postMessageToParent({ type: "STOP_INSPECTION" });
+      } else if (event.data && event.data.type === "SHOW_SELECTED_ELEMENT") {
+        const { selector } = event.data;
+        let element = null;
+        try {
+          element = document.querySelector(selector);
+        } catch (e) {
+          element = getSelectedElement();
+        }
+        if (!element) {
+          element = getSelectedElement();
+        }
+        if (element) {
+          removeSelectedBadge();
+          updateSharedHighlights();
+          removeHighlight();
+          selectedElement = element;
+          window._inspectorSelectedElement = element;
+          if (window.__ARCHIE_INSPECTOR__) window.__ARCHIE_INSPECTOR__.selectedElement = element;
+          isElementSelected = true;
+          applyInspectorStyles(element);
+          createSelectedBadge(element);
+          setupBadgePositionListeners(element);
+        }
+      } else if (event.data && event.data.type === "SELECT_PARENT_ELEMENT") {
+        const element = getSelectedElement();
+        if (element && element.parentElement && element.parentElement !== document.body && element.parentElement !== document.documentElement) {
+          const parentElement = element.parentElement;
+          const metadata = extractMetadata(parentElement);
+          if (selectedElement) {
+            removeInspectorStyles(selectedElement);
+            cleanupElementListeners(selectedElement);
+          }
+          selectedElement = parentElement;
+          window._inspectorSelectedElement = parentElement;
+          if (window.__ARCHIE_INSPECTOR__) window.__ARCHIE_INSPECTOR__.selectedElement = parentElement;
+          isElementSelected = true;
+          applyInspectorStyles(parentElement);
+          setupBadgePositionListeners(parentElement);
+          postMessageToParent({
+            type: "ELEMENT_SELECTED",
+            metadata
+          });
+        }
+      } else if (event.data && event.data.type === "HIDE_SELECTED_ELEMENT") {
+        if (selectedElement) {
+          deleteElementCleanup(selectedElement);
+        }
+        if (selectedElement) {
+          removeInspectorStyles(selectedElement);
+          const computed = window.getComputedStyle(selectedElement);
+          const borderWidth = computed.borderWidth;
+          const borderColor = computed.borderColor;
+          const borderStyle = computed.borderStyle;
+          const inlineBorderWidth = selectedElement.style.getPropertyValue("border-width");
+          const inlineBorderColor = selectedElement.style.getPropertyValue("border-color");
+          const inlineBorderStyle = selectedElement.style.getPropertyValue("border-style");
+          inspectorLog("[Inspector] Hiding element, user styles check:", {
+            computed: { borderWidth, borderColor, borderStyle },
+            inline: {
+              borderWidth: inlineBorderWidth,
+              borderColor: inlineBorderColor,
+              borderStyle: inlineBorderStyle
+            }
+          });
+        }
+        removeSelectedBadge();
+        updateSharedHighlights();
+        isElementSelected = false;
+      } else if (event.data && event.data.type === "GET_ELEMENT_POSITION") {
+        const { selector } = event.data;
+        let element = null;
+        if (selector) {
+          try {
+            element = document.querySelector(selector);
+          } catch (e) {
+          }
+        }
+        if (!element) {
+          element = getSelectedElement();
+        }
+        if (element) {
+          if (element.getAttribute("data-inspector-editing") === "true") {
+            applyInspectorStyles(element);
+          }
+          const rect = element.getBoundingClientRect();
+          postMessageToParent({
+            type: "ELEMENT_POSITION_UPDATE",
+            selector,
+            boundingRect: {
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height,
+              top: rect.top,
+              left: rect.left,
+              bottom: rect.bottom,
+              right: rect.right
+            }
+          });
+        }
+      } else if (event.data && event.data.type === "APPLY_STYLE_CHANGE") {
+        const { selector, property, value } = event.data;
+        inspectorLog("[Inspector] Received APPLY_STYLE_CHANGE:", {
+          selector,
+          property,
+          value
+        });
+        let element = null;
+        element = getSelectedElement();
+        if (element) {
+          inspectorLog(
+            "[Inspector] Found element via getSelectedElement (priority method)"
+          );
+          try {
+            const elementSelector = getElementSelector(element);
+            if (elementSelector === selector) {
+              inspectorLog(
+                "[Inspector] Selected element selector matches:",
+                elementSelector
+              );
+            } else {
+              inspectorLog(
+                "[Inspector] Selected element selector differs but using it anyway (user is editing this element):",
+                elementSelector,
+                "vs",
+                selector
+              );
+            }
+          } catch (e) {
+            inspectorWarn("[Inspector] Error verifying selected element:", e);
+          }
+        }
+        if (!element) {
+          try {
+            const editingElement = document.querySelector(
+              '[data-inspector-editing="true"]'
+            );
+            if (editingElement) {
+              inspectorLog("[Inspector] Found element via data-inspector-editing");
+              element = editingElement;
+              try {
+                const elementSelector = getElementSelector(editingElement);
+                if (elementSelector === selector) {
+                  inspectorLog(
+                    "[Inspector] Editing element selector matches:",
+                    elementSelector
+                  );
+                } else {
+                  inspectorLog(
+                    "[Inspector] Editing element selector differs but using it:",
+                    elementSelector,
+                    "vs",
+                    selector
+                  );
+                }
+              } catch (e) {
+              }
+            }
+          } catch (e) {
+            inspectorWarn("[Inspector] Error finding editing element:", e);
+          }
+        }
+        if (!element) {
+          try {
+            const foundElement = document.querySelector(selector);
+            if (foundElement) {
+              inspectorLog("[Inspector] Found element by selector:", selector);
+              element = foundElement;
+            }
+          } catch (e) {
+            inspectorWarn("[Inspector] Error querying selector:", selector, e);
+          }
+        }
+        if (!element) {
+          inspectorWarn(
+            "[Inspector] Element not found for selector:",
+            selector,
+            "property:",
+            property
+          );
+          setTimeout(() => {
+            try {
+              const retryElement = document.querySelector(selector);
+              if (retryElement) {
+                inspectorLog("[Inspector] Found element on retry");
+                const kebabProperty2 = property.replace(/([A-Z])/g, "-$1").toLowerCase();
+                retryElement.style.setProperty(kebabProperty2, value, "important");
+                inspectorLog(
+                  "[Inspector] Applied style on retry:",
+                  property,
+                  "=",
+                  value
+                );
+              }
+            } catch (e) {
+              inspectorWarn("[Inspector] Retry also failed:", e);
+            }
+          }, 100);
+          postMessageToParent({
+            type: "STYLE_CHANGE_FAILED",
+            selector,
+            property,
+            value,
+            error: "Element not found"
+          });
+          return;
+        }
+        const kebabProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase();
+        element.style.setProperty(kebabProperty, value, "important");
+        const camelProperty = property.replace(
+          /-([a-z])/g,
+          (g) => g[1].toUpperCase()
+        );
+        if (element.style.hasOwnProperty(camelProperty)) {
+          element.style[camelProperty] = value;
+        }
+        const componentRoot = element.closest("[data-inspector-relative-path]");
+        if (componentRoot) {
+          const path = componentRoot.getAttribute("data-inspector-relative-path");
+          const line = componentRoot.getAttribute("data-inspector-line");
+          const column = componentRoot.getAttribute("data-inspector-column");
+          if (path && line && column) {
+            const selector2 = `[data-inspector-relative-path="${path}"][data-inspector-line="${line}"][data-inspector-column="${column}"]`;
+            const sharedNodes = document.querySelectorAll(selector2);
+            sharedNodes.forEach((sharedEl) => {
+              if (sharedEl === element) return;
+              sharedEl.style.setProperty(kebabProperty, value, "important");
+              if (sharedEl.style.hasOwnProperty(camelProperty)) {
+                sharedEl.style[camelProperty] = value;
+              }
+            });
+          }
+        }
+        const appliedValue = element.style.getPropertyValue(kebabProperty);
+        inspectorLog(
+          "[Inspector] Applied style:",
+          property,
+          "=",
+          value,
+          "to element:",
+          selector,
+          "found:",
+          !!element,
+          "verified:",
+          appliedValue
+        );
+        postMessageToParent({
+          type: "STYLE_CHANGE_APPLIED",
+          selector,
+          property,
+          value
+        });
+      } else if (event.data && event.data.type === "APPLY_CLASS_NAME_CHANGE") {
+        const { selector, className, action } = event.data;
+        inspectorLog("[Inspector] Received APPLY_CLASS_NAME_CHANGE:", {
+          selector,
+          className,
+          action
+        });
+        let element = getSelectedElement();
+        if (!element) {
+          try {
+            element = document.querySelector(selector);
+          } catch (e) {
+          }
+        }
+        if (!element) {
+          postMessageToParent({
+            type: "STYLE_CHANGE_FAILED",
+            selector,
+            error: "Element not found for class change"
+          });
+          return;
+        }
+        const classes = className.split(/\s+/).filter(Boolean);
+        classes.forEach((cls) => {
+          if (action === "remove") {
+            element.classList.remove(cls);
+          } else if (action === "toggle") {
+            element.classList.toggle(cls);
+          } else {
+            element.classList.add(cls);
+          }
+        });
+        const componentRoot = element.closest("[data-inspector-relative-path]");
+        if (componentRoot) {
+          const path = componentRoot.getAttribute("data-inspector-relative-path");
+          const line = componentRoot.getAttribute("data-inspector-line");
+          const column = componentRoot.getAttribute("data-inspector-column");
+          if (path && line && column) {
+            const sharedSelector = `[data-inspector-relative-path="${path}"][data-inspector-line="${line}"][data-inspector-column="${column}"]`;
+            const sharedNodes = document.querySelectorAll(sharedSelector);
+            sharedNodes.forEach((sharedEl) => {
+              if (sharedEl === element) return;
+              classes.forEach((cls) => {
+                if (action === "remove") {
+                  sharedEl.classList.remove(cls);
+                } else if (action === "toggle") {
+                  sharedEl.classList.toggle(cls);
+                } else {
+                  sharedEl.classList.add(cls);
+                }
+              });
+            });
+          }
+        }
+        postMessageToParent({
+          type: "STYLE_CHANGE_APPLIED",
+          selector,
+          className,
+          action
+        });
+      } else if (event.data && event.data.type === "APPLY_TEXT_CHANGE") {
+        const { selector, text } = event.data;
+        const element = getSelectedElement();
+        if (!element) {
+          postMessageToParent({
+            type: "TEXT_CHANGE_FAILED",
+            selector,
+            text,
+            error: "Element not found"
+          });
+          return;
+        }
+        element.textContent = text;
+        postMessageToParent({
+          type: "TEXT_CHANGE_APPLIED",
+          selector,
+          text
+        });
+      } else if (event.data && event.data.type === "REMOVE_ELEMENT") {
+        const { selector } = event.data;
+        const element = getSelectedElement();
+        if (!element) {
+          postMessageToParent({
+            type: "ELEMENT_REMOVAL_FAILED",
+            selector,
+            error: "Element not found"
+          });
+          return;
+        }
+        element.remove();
+        const index = selectedElements.indexOf(element);
+        if (index > -1) {
+          selectedElements.splice(index, 1);
+        }
+        if (selectedElements.length === 0) {
+          selectedElement = null;
+          window._inspectorSelectedElement = null;
+          isElementSelected = false;
+          removeSelectedBadge();
+        } else {
+          selectedElement = selectedElements[selectedElements.length - 1];
+          window._inspectorSelectedElement = selectedElement;
+          removeSelectedBadge();
+          selectedElements.forEach((el) => createSelectedBadge(el));
+        }
+        updateSharedHighlights();
+        postMessageToParent({
+          type: "ELEMENT_REMOVED",
+          selector
+        });
+      } else if (event.data && event.data.type === "REVERT_CHANGES") {
+        removeHighlight();
+        removeSelectedBadge();
+        updateSharedHighlights();
+        selectedElements.forEach((el) => {
+          el.removeAttribute("data-inspector-editing");
+          el.style.outline = "";
+          el.style.outlineOffset = "";
+          el.style.border = "";
+          el.style.boxShadow = "";
+          el.style.transition = "";
+          el.style.position = "";
+          el.style.zIndex = "";
+        });
+        if (selectedElement && !selectedElements.includes(selectedElement)) {
+          selectedElement.removeAttribute("data-inspector-editing");
+          selectedElement.style.outline = "";
+          selectedElement.style.outlineOffset = "";
+          selectedElement.style.border = "";
+          selectedElement.style.boxShadow = "";
+          selectedElement.style.transition = "";
+          selectedElement.style.position = "";
+          selectedElement.style.zIndex = "";
+        }
+        selectedElement = null;
+        selectedElements = [];
+        window._inspectorSelectedElement = null;
+        isInspecting = false;
+        isElementSelected = false;
+        lastMultiSelectIntent = false;
+        if (document.body) {
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+        }
+        location.reload();
+      }
+    };
+    window._inspectorMessageHandler = messageHandler;
+    if (window.__ARCHIE_INSPECTOR__) window.__ARCHIE_INSPECTOR__.messageHandler = messageHandler;
+    window.addEventListener("message", messageHandler);
+    var mousemoveScheduled = false;
+    document.addEventListener(
+      "mousemove",
+      function(e) {
+        if (!isInspecting) return;
+        if (mousemoveScheduled) return;
+        mousemoveScheduled = true;
+        requestAnimationFrame(function() {
+          mousemoveScheduled = false;
+          var target = getElementFromPoint(e.clientX, e.clientY, e.target);
+          if (!target || target === document.body || target === document.documentElement || isInspectorElement(target) || target === highlightedElement || selectedElements.includes(target)) {
+            return;
+          }
+          if (target !== highlightedElement && target !== selectedElement) {
+            highlightElement(target);
+          }
+        });
+      },
+      true
+    );
+    const inspectorClickHandler = function(e) {
+      if (!isInspecting) return;
+      const target = getElementFromPoint(e.clientX, e.clientY, e.target);
+      if (!target || target === document.body || target === document.documentElement || isInspectorElement(target)) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      if (target && target !== overlay && target !== selectedElementBadge) {
+        const isMultiSelect = e.metaKey || e.ctrlKey || lastMultiSelectIntent === true;
+        removeHighlight();
+        if (isMultiSelect) {
+          const index = selectedElements.indexOf(target);
+          if (index > -1) {
+            selectedElements.splice(index, 1);
+            removeInspectorStyles(target);
+            cleanupElementListeners(target);
+          } else {
+            selectedElements.push(target);
+            applyInspectorStyles(target);
+          }
+          selectedElements.forEach((el) => {
+            if (el) {
+              applyInspectorStyles(el);
+            }
+          });
+        } else {
+          const previousSelection = [...selectedElements];
+          previousSelection.forEach((el) => {
+            removeInspectorStyles(el);
+            cleanupElementListeners(el);
+          });
+          selectedElements = [];
+          selectedElements = [target];
+          applyInspectorStyles(target);
+        }
+        selectedElement = selectedElements.length > 0 ? selectedElements[selectedElements.length - 1] : null;
+        window._inspectorSelectedElement = selectedElement;
+        if (window.__ARCHIE_INSPECTOR__) window.__ARCHIE_INSPECTOR__.selectedElement = selectedElement;
+        isElementSelected = selectedElements.length > 0;
+        selectedElements.forEach((el) => {
+          createSelectedBadge(el);
+        });
+        updateSharedHighlights();
+        if (isMultiSelect) {
+          selectedElements.forEach((el) => {
+            if (el) {
+              applyInspectorStyles(el);
+            }
+          });
+        }
+        setTimeout(function() {
+          updateSharedHighlights();
+          if (isMultiSelect && selectedElements.length > 0) {
+            selectedElements.forEach(function(el) {
+              if (el) applyInspectorStyles(el);
+            });
+          }
+        }, BADGE_UPDATE_DELAY_MS);
+        if (selectedElement) setupBadgePositionListeners(selectedElement);
+        const metadataArray = selectedElements.map((el) => extractMetadata(el));
+        const metadataPayload = metadataArray.length === 1 ? metadataArray[0] : metadataArray;
+        postMessageToParent({
+          type: "ELEMENT_SELECTED",
+          metadata: metadataPayload
+        });
+      }
+    };
+    document.addEventListener("click", inspectorClickHandler, true);
+    document.addEventListener(
+      "click",
+      function(e) {
+        if (isElementSelected && !isInspecting && !isInspectorElement(e.target)) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+        }
+      },
+      true
+    );
+    document.addEventListener("keydown", function(e) {
+      if (e.key === "Escape" && (isInspecting || isElementSelected)) {
+        isInspecting = false;
+        isElementSelected = false;
+        removeEventBlockers();
+        if (document.body) {
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+        }
+        removeHighlight();
+        removeSelectedBadge();
+        updateSharedHighlights();
+        postMessageToParent({ type: "INSPECTION_CANCELLED" });
+      }
+    });
+  })();
+}
+var init_inspector = __esm({
+  "src/client/inject-inspector/inspector.js"() {
+    "use strict";
+  }
+});
+
+// src/constants/archieOrigins.ts
+var ARCHIE_HOST_ORIGINS = [
+  "https://app.dev.archie-platform.com",
+  "https://app.staging.archie-platform.com",
+  "https://app.archie.com"
+];
+var LOCAL_DEV_ORIGINS = [
+  "http://localhost:3000",
+  "http://localhost:3001"
+];
+function getAllowedOrigins(includeLocal = false) {
+  const list = [...ARCHIE_HOST_ORIGINS];
+  if (includeLocal) list.push(...LOCAL_DEV_ORIGINS);
+  return list;
+}
+
+// src/client/inject-inspector/injectInspector.ts
+var DEFAULT_SCRIPT_ID = "archie-inspector-script";
+function isLocalDev(referrer) {
+  if (!referrer) return true;
+  try {
+    const u = new URL(referrer);
+    return u.hostname === "localhost" || u.hostname === "127.0.0.1";
+  } catch {
+    return true;
+  }
+}
+function injectInspector(opts = {}) {
+  if (typeof document === "undefined") return null;
+  const id = opts.id ?? DEFAULT_SCRIPT_ID;
+  const existing = document.getElementById(id);
+  if (existing) return Promise.resolve(existing);
+  const win = typeof window !== "undefined" ? window : null;
+  if (win) {
+    const referrer = typeof document.referrer === "string" ? document.referrer : "";
+    const dev = opts.dev ?? isLocalDev(referrer);
+    let allowed;
+    if (opts.allowedOrigins !== void 0 && opts.allowedOrigins !== "*") {
+      const v = opts.allowedOrigins;
+      allowed = typeof v === "string" ? [v] : Array.isArray(v) ? v : [];
+    } else {
+      allowed = getAllowedOrigins(dev);
+    }
+    if (allowed.length > 0) {
+      win["__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__"] = allowed;
+    }
+    let target;
+    if (opts.targetOrigin !== void 0 && opts.targetOrigin !== "*") {
+      target = opts.targetOrigin || void 0;
+    } else if (referrer) {
+      try {
+        target = new URL(referrer).origin;
+      } catch {
+        target = void 0;
+      }
+    } else {
+      target = void 0;
+    }
+    if (target) {
+      win["__ARCHIE_INSPECTOR_TARGET_ORIGIN__"] = target;
+    }
+  }
+  return Promise.resolve().then(() => (init_inspector(), inspector_exports)).then((m) => {
+    try {
+      m.default();
+    } catch (err) {
+      if (typeof console !== "undefined" && console.error) {
+        console.error("[Archie DevTools] Inspector failed to run:", err);
+      }
+      throw err;
+    }
+    const script = document.createElement("script");
+    script.id = id;
+    document.head.appendChild(script);
+    return script;
+  }).catch((err) => {
+    if (typeof console !== "undefined" && console.error) {
+      console.error("[Archie DevTools] Failed to load inspector:", err);
+    }
+    throw err;
+  });
+}
+
+// src/client/inject-inspector/auto.ts
+injectInspector();