@archie/devtools 0.0.7 → 0.0.10

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

@@ -1,1159 +1,4 @@
 "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;
-    var ALLOWED_ORIGIN_PATTERNS = typeof window !== "undefined" && window.__ARCHIE_INSPECTOR_ALLOWED_ORIGIN_PATTERNS__ || [];
-    function isOriginAllowed(origin) {
-      if (!origin) return false;
-      if (Array.isArray(ALLOWED_ORIGINS) && ALLOWED_ORIGINS.length > 0 && ALLOWED_ORIGINS !== "*") {
-        if (ALLOWED_ORIGINS.indexOf(origin) !== -1) return true;
-      }
-      if (Array.isArray(ALLOWED_ORIGIN_PATTERNS) && ALLOWED_ORIGIN_PATTERNS.length > 0) {
-        try {
-          var host = new URL(origin).host;
-          for (var i = 0; i < ALLOWED_ORIGIN_PATTERNS.length; i++) {
-            if (host.endsWith(ALLOWED_ORIGIN_PATTERNS[i])) return true;
-          }
-        } catch (e) {
-        }
-      }
-      return false;
-    }
-    function isStyleValueSafe(value) {
-      if (value == null || typeof value !== "string") return false;
-      if (value.length > 1e4) return false;
-      var lower = value.toLowerCase();
-      if (lower.indexOf("javascript:") !== -1) return false;
-      if (lower.indexOf("expression(") !== -1) return false;
-      if (lower.indexOf("-moz-binding") !== -1) return false;
-      if (lower.indexOf("behavior") !== -1) return false;
-      if (lower.indexOf("vbscript:") !== -1) return false;
-      return true;
-    }
-    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
-        });
-        if (!property || typeof property !== "string" || property.length > 100 || !isStyleValueSafe(value)) {
-          inspectorWarn("[Inspector] Rejected invalid or unsafe style property/value");
-          postMessageToParent({
-            type: "STYLE_CHANGE_FAILED",
-            selector,
-            property: typeof property === "string" ? property : "",
-            value: value != null ? String(value).slice(0, 100) : "",
-            error: !isStyleValueSafe(value) ? "Invalid or unsafe style value" : "Invalid property"
-          });
-          return;
-        }
-        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 {
-              if (!isStyleValueSafe(value)) return;
-              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;
-        }
-        var classStr = typeof className === "string" ? className.slice(0, 2e3) : "";
-        const classes = classStr.split(/\s+/).filter(Boolean).slice(0, 100);
-        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;
-        if (text != null && typeof text === "string" && text.length > 5e5) {
-          postMessageToParent({
-            type: "TEXT_CHANGE_FAILED",
-            selector,
-            text: "",
-            error: "Text value too long"
-          });
-          return;
-        }
-        const element = getSelectedElement();
-        if (!element) {
-          postMessageToParent({
-            type: "TEXT_CHANGE_FAILED",
-            selector,
-            text,
-            error: "Element not found"
-          });
-          return;
-        }
-        element.textContent = text != null ? String(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 = [
@@ -1162,9 +7,15 @@ var ARCHIE_HOST_ORIGINS = [
   "https://app.archie.com"
 ];
 var ARCHIE_PREVIEW_ORIGIN_SUFFIXES = [
+  ".staging.archie-platform.com",
   ".archie-platform.com",
   ".archie.com"
 ];
+var PREVIEW_DEPLOY_HOST_SUFFIXES = [
+  ".previews.staging.archie-platform.com",
+  ".previews.archie-platform.com",
+  ".previews.archie.com"
+];
 var LOCAL_DEV_ORIGINS = [
   "http://localhost:3000",
   "http://localhost:3001"
@@ -1181,7 +32,7 @@ function isPreviewOrigin(origin) {
   if (!origin || typeof origin !== "string") return false;
   try {
     const host = new URL(origin).host;
-    return ARCHIE_PREVIEW_ORIGIN_SUFFIXES.some((suffix) => host.endsWith(suffix));
+    return PREVIEW_DEPLOY_HOST_SUFFIXES.some((suffix) => host.endsWith(suffix));
   } catch {
     return false;
   }
@@ -1189,6 +40,11 @@ function isPreviewOrigin(origin) {
 
 // src/client/inject-inspector/injectInspector.ts
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
+var REMOTE_INSPECTOR_SCRIPT_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev/inspector.standalone.js";
+function getInspectorScriptUrl(base, cacheBust = true) {
+  const separator = base.includes("?") ? "&" : "?";
+  return cacheBust ? `${base}${separator}h=${Date.now()}` : base;
+}
 function isLocalDev(referrer) {
   if (!referrer) return true;
   try {
@@ -1240,7 +96,19 @@ function injectInspector(opts = {}) {
       win["__ARCHIE_INSPECTOR_TARGET_ORIGIN__"] = target;
     }
   }
-  return Promise.resolve().then(() => (init_inspector(), inspector_exports)).then((m) => {
+  const useRemote = opts.scriptSource !== "local";
+  if (useRemote) {
+    const script = document.createElement("script");
+    script.id = id;
+    script.src = getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+    document.head.appendChild(script);
+    return null;
+  }
+  const localInspectorModulePath = "./inspector.js";
+  return import(
+    /* @vite-ignore */
+    localInspectorModulePath
+  ).then((m) => {
     try {
       m.default();
     } catch (err) {
@@ -1262,4 +130,4 @@ function injectInspector(opts = {}) {
 }
 
 // src/client/inject-inspector/auto.ts
-injectInspector();
+injectInspector({ scriptSource: "remote" });