@archie/devtools 0.0.17 → 0.0.18

package/dist/inspector.standalone.js

@@ -0,0 +1,3567 @@
+/**
+ * Archie Inspector - Standalone script for CDN injection.
+ * Set before loading: window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__, window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__
+ * Then load: <script src="https://your-cdn/inspector.standalone.js"></script>
+ * Auto-runs if configured; or call window.__ARCHIE_INSPECTOR_RUN__().
+ * Security: No eval(), no "*" origins; style values sanitized.
+ */
+;(function () {
+  "use strict"
+  // Capture originals at module load time so the patch below is never recursive
+  // even when runInspector() is called multiple times.
+  var _rawDocumentQuerySelector = Document.prototype.querySelector
+  var _rawDocumentQuerySelectorAll = Document.prototype.querySelectorAll
+  var _documentQuerySelectorsPatched = false
+
+  function runInspector() {
+    var INSPECTOR_PROBLEMATIC_SELECTOR_PATTERNS = [
+      /\/\d+/,
+      /\[backdrop-filter\]/,
+      /supports-\[/,
+      /:\d+\.\d+/,
+      /\.bg-background\/\d+/,
+      /\.supports-\[backdrop-filter\]/,
+      /bg-background\/\d+/,
+      /supports-\[/,
+    ]
+
+    function isProblematicInspectorSelector(selector) {
+      if (!selector || typeof selector !== "string") return false
+      return INSPECTOR_PROBLEMATIC_SELECTOR_PATTERNS.some(function (pattern) {
+        return pattern.test(selector)
+      })
+    }
+
+    function isInspectorSelectorSyntaxError(error) {
+      return (
+        error &&
+        (error.name === "SyntaxError" ||
+          (error.message &&
+            (error.message.includes("not a valid selector") ||
+              error.message.includes("Failed to execute"))))
+      )
+    }
+
+    function safeQuerySelector(selector) {
+      try {
+        if (!selector || typeof selector !== "string") {
+          return _rawDocumentQuerySelector.call(document, selector)
+        }
+        if (isProblematicInspectorSelector(selector)) return null
+        return _rawDocumentQuerySelector.call(document, selector)
+      } catch (error) {
+        if (isInspectorSelectorSyntaxError(error)) return null
+        throw error
+      }
+    }
+
+    function safeQuerySelectorAll(selector) {
+      function emptyNodeList() {
+        return document.createDocumentFragment().childNodes
+      }
+
+      try {
+        if (!selector || typeof selector !== "string") {
+          return _rawDocumentQuerySelectorAll.call(document, selector)
+        }
+        if (isProblematicInspectorSelector(selector)) return emptyNodeList()
+        return _rawDocumentQuerySelectorAll.call(document, selector)
+      } catch (error) {
+        if (isInspectorSelectorSyntaxError(error)) return emptyNodeList()
+        throw error
+      }
+    }
+
+    // Patch only the current document instance (not Document.prototype) to avoid
+    // a global cross-library prototype mutation. The patch remains for this
+    // document lifetime after the inspector initializes.
+    if (!_documentQuerySelectorsPatched) {
+      _documentQuerySelectorsPatched = true
+      try {
+        document.querySelector = function archieQuerySelectorInstance(selector) {
+          return safeQuerySelector(selector)
+        }
+        document.querySelectorAll = function archieQuerySelectorAllInstance(
+          selector,
+        ) {
+          return safeQuerySelectorAll(selector)
+        }
+      } catch (_) {}
+    }
+
+    ;(function () {
+      "use strict"
+
+      var FIBER_KEY_PREFIX = "__reactFiber$"
+      var PROPS_KEY_PREFIX = "__reactProps$"
+
+      function hasEditorMetaInFiberChain(fiber) {
+        var current = fiber
+        while (current) {
+          if (current.memoizedProps && current.memoizedProps.__editorMeta) {
+            return true
+          }
+          current = current["return"]
+        }
+        return false
+      }
+
+      // Scoring logic duplicated from fiber-bridge.ts (TypeScript context).
+      // If this algorithm changes, update fiber-bridge.ts to maintain parity.
+      function compareFiberCandidates(candidate, bestCandidate) {
+        if (!bestCandidate) return 1
+
+        var candidateScore = [
+          candidate.hasMatchingProps ? 1 : 0,
+          candidate.hasDirectEditorMeta ? 1 : 0,
+          candidate.hasCompanionPropsKey ? 1 : 0,
+          candidate.hasEditorMetaInReturnChain ? 1 : 0,
+          candidate.order,
+        ]
+        var bestScore = [
+          bestCandidate.hasMatchingProps ? 1 : 0,
+          bestCandidate.hasDirectEditorMeta ? 1 : 0,
+          bestCandidate.hasCompanionPropsKey ? 1 : 0,
+          bestCandidate.hasEditorMetaInReturnChain ? 1 : 0,
+          bestCandidate.order,
+        ]
+
+        for (var i = 0; i < candidateScore.length; i++) {
+          if (candidateScore[i] === bestScore[i]) continue
+          return candidateScore[i] > bestScore[i] ? 1 : -1
+        }
+
+        return 0
+      }
+
+      function getFiberSelectionFromElement(el) {
+        if (!el || typeof el !== "object") {
+          return { fiber: null, fiberKey: null }
+        }
+
+        var record = el
+        var keys = Object.keys(record)
+        var bestCandidate = null
+
+        for (var i = 0; i < keys.length; i++) {
+          var fiberKey = keys[i]
+          if (fiberKey.indexOf(FIBER_KEY_PREFIX) !== 0) continue
+
+          var fiber = record[fiberKey]
+          if (!fiber) continue
+          if (fiber.stateNode && fiber.stateNode !== el) continue
+
+          var suffix = fiberKey.slice(FIBER_KEY_PREFIX.length)
+          var propsKey = PROPS_KEY_PREFIX + suffix
+          var hasCompanionPropsKey = Object.prototype.hasOwnProperty.call(
+            record,
+            propsKey
+          )
+          var companionProps = hasCompanionPropsKey
+            ? record[propsKey]
+            : undefined
+          var candidate = {
+            fiber: fiber,
+            fiberKey: fiberKey,
+            hasMatchingProps:
+              hasCompanionPropsKey && fiber.memoizedProps === companionProps,
+            hasDirectEditorMeta:
+              !!(fiber.memoizedProps && fiber.memoizedProps.__editorMeta),
+            hasCompanionPropsKey: hasCompanionPropsKey,
+            hasEditorMetaInReturnChain: hasEditorMetaInFiberChain(fiber),
+            order: i,
+          }
+
+          if (compareFiberCandidates(candidate, bestCandidate) > 0) {
+            bestCandidate = candidate
+          }
+        }
+
+        if (!bestCandidate) {
+          return { fiber: null, fiberKey: null }
+        }
+
+        return {
+          fiber: bestCandidate.fiber,
+          fiberKey: bestCandidate.fiberKey,
+        }
+      }
+
+      function getFiberFromElement(el) {
+        return getFiberSelectionFromElement(el).fiber
+      }
+
+      function getEditorMetaFromElement(el) {
+        var fiber = getFiberFromElement(el)
+        while (fiber) {
+          if (fiber.memoizedProps && fiber.memoizedProps.__editorMeta) {
+            return fiber.memoizedProps.__editorMeta
+          }
+          fiber = fiber["return"]
+        }
+        return null
+      }
+
+      function getDirectEditorMetaFromElement(el) {
+        var fiber = getFiberFromElement(el)
+        if (fiber && fiber.memoizedProps && fiber.memoizedProps.__editorMeta) {
+          return fiber.memoizedProps.__editorMeta
+        }
+        return null
+      }
+
+      // Walks the fiber return chain from el's own fiber, stopping at the boundary
+      // of the next host element. Returns __editorMeta from the nearest owner
+      // component (e.g. <Button> renders <button> — Button's fiber has __editorMeta
+      // but the button host fiber does not).
+      // Uses nodeType instead of instanceof Element to avoid cross-iframe issues.
+      function getOwnerEditorMetaFromElement(el) {
+        var fiber = getFiberFromElement(el)
+        if (!fiber) return null
+
+        var current = fiber["return"]
+        while (current) {
+          if (
+            current.stateNode !== null &&
+            current.stateNode !== undefined &&
+            typeof current.stateNode.nodeType === "number" &&
+            current.stateNode.nodeType === 1 &&
+            current.stateNode !== el
+          ) {
+            break
+          }
+          if (current.memoizedProps && current.memoizedProps.__editorMeta) {
+            return current.memoizedProps.__editorMeta
+          }
+          current = current["return"]
+        }
+        return null
+      }
+
+      function findNearestEditorMeta(el) {
+        var current = el
+        while (
+          current &&
+          current !== document.body &&
+          current !== document.documentElement
+        ) {
+          var meta = getEditorMetaFromElement(current)
+          if (meta) return { meta: meta, element: current }
+          current = current.parentElement
+        }
+        return null
+      }
+
+      if (window._inspectorSharedTargetObserver) {
+        try {
+          window._inspectorSharedTargetObserver.disconnect()
+        } catch (e) {
+          // Ignore stale observer cleanup failures.
+        }
+        delete window._inspectorSharedTargetObserver
+      }
+
+      var sharedTargetIndex = {
+        dirty: true,
+        observer: null,
+        exactBySignature: new Map(),
+        sharedBySignature: new Map(),
+      }
+      var ARCHIE_SOURCE_REF_ATTR = "data-archie-source-ref"
+
+      function normalizeSharedSignaturePart(value) {
+        if (value == null) return ""
+        return String(value).trim()
+      }
+
+      function getSharedSignatureFromMeta(meta) {
+        if (!meta || typeof meta !== "object") return ""
+        var file = normalizeSharedSignaturePart(meta.file)
+        var line = normalizeSharedSignaturePart(meta.line)
+        var column = normalizeSharedSignaturePart(meta.col)
+        if (!column) {
+          column = normalizeSharedSignaturePart(meta.column)
+        }
+        if (!file || !line || !column) return ""
+        return file + "::" + line + "::" + column
+      }
+
+      function getLegacySharedSignatureFromElement(element) {
+        if (!element || typeof element.closest !== "function") return ""
+        var componentRoot = element.closest("[data-inspector-relative-path]")
+        if (!componentRoot) return ""
+
+        var path = normalizeSharedSignaturePart(
+          componentRoot.getAttribute("data-inspector-relative-path")
+        )
+        var line = normalizeSharedSignaturePart(
+          componentRoot.getAttribute("data-inspector-line")
+        )
+        var column = normalizeSharedSignaturePart(
+          componentRoot.getAttribute("data-inspector-column")
+        )
+        if (!path || !line || !column) return ""
+        return path + "::" + line + "::" + column
+      }
+
+      function getExactSourceSignatureFromElement(element) {
+        if (!element) return ""
+
+        var directMeta = getDirectEditorMetaFromElement(element)
+        var directSignature = directMeta
+          ? getSharedSignatureFromMeta(directMeta)
+          : ""
+        if (directSignature) return directSignature
+
+        // Check the owner component's meta (e.g. <Button> renders <button>:
+        // Button's component fiber has __editorMeta, the button host fiber does not).
+        var ownerMeta = getOwnerEditorMetaFromElement(element)
+        var ownerSignature = ownerMeta
+          ? getSharedSignatureFromMeta(ownerMeta)
+          : ""
+        if (ownerSignature) return ownerSignature
+
+        if (
+          element &&
+          typeof element.getAttribute === "function" &&
+          element.hasAttribute(ARCHIE_SOURCE_REF_ATTR)
+        ) {
+          return normalizeSharedSignaturePart(
+            element.getAttribute(ARCHIE_SOURCE_REF_ATTR)
+          )
+        }
+
+        return ""
+      }
+
+      function getCoarseSharedSignatureFromElement(element) {
+        if (!element) return ""
+
+        var nearestMeta = findNearestEditorMeta(element)
+        var nearestSignature =
+          nearestMeta && nearestMeta.meta
+            ? getSharedSignatureFromMeta(nearestMeta.meta)
+            : ""
+        if (nearestSignature) return nearestSignature
+
+        return getLegacySharedSignatureFromElement(element)
+      }
+
+      function resolveCoarseInspectTarget(element) {
+        var normalizedTarget = normalizeInspectableTarget(element)
+        if (
+          !normalizedTarget ||
+          normalizedTarget === document.body ||
+          normalizedTarget === document.documentElement ||
+          isInspectorElement(normalizedTarget)
+        ) {
+          return null
+        }
+
+        var baseSignature = getCoarseSharedSignatureFromElement(
+          normalizedTarget
+        )
+        if (!baseSignature) return normalizedTarget
+
+        var canonicalTarget = normalizedTarget
+        var current = normalizedTarget.parentElement
+
+        while (
+          current &&
+          current !== document.body &&
+          current !== document.documentElement &&
+          !isInspectorElement(current)
+        ) {
+          var currentSignature = getCoarseSharedSignatureFromElement(current)
+          if (!currentSignature || currentSignature !== baseSignature) break
+          canonicalTarget = current
+          current = current.parentElement
+        }
+
+        return canonicalTarget
+      }
+
+      function resolveExactInspectTarget(element) {
+        var normalizedTarget = normalizeInspectableTarget(element)
+        if (
+          !normalizedTarget ||
+          normalizedTarget === document.body ||
+          normalizedTarget === document.documentElement ||
+          isInspectorElement(normalizedTarget)
+        ) {
+          return null
+        }
+
+        // SVG elements are valid inspect targets even without source signatures.
+        // Icon libraries render SVGs without __editorMeta; walking past them
+        // would select the parent button/anchor, breaking icon selection.
+        var normalizedTag = String(normalizedTarget.tagName || "").toLowerCase()
+        if (normalizedTag === "svg") {
+          return normalizedTarget
+        }
+
+        var current = normalizedTarget
+        while (
+          current &&
+          current !== document.body &&
+          current !== document.documentElement &&
+          !isInspectorElement(current)
+        ) {
+          if (getExactSourceSignatureFromElement(current)) {
+            return current
+          }
+          current = current.parentElement
+        }
+
+        return resolveCoarseInspectTarget(normalizedTarget)
+      }
+
+      function resolveSharedGroupSignature(element) {
+        var inspectTarget = resolveExactInspectTarget(element)
+        if (!inspectTarget) return ""
+
+        var exactSignature = getExactSourceSignatureFromElement(inspectTarget)
+        if (exactSignature) return exactSignature
+
+        return getCoarseSharedSignatureFromElement(inspectTarget)
+      }
+
+      function appendSharedTarget(map, signature, element) {
+        if (!signature || !element) return
+        var existing = map.get(signature)
+        if (!existing) {
+          map.set(signature, [element])
+          return
+        }
+        if (existing.indexOf(element) === -1) {
+          existing.push(element)
+        }
+      }
+
+      function markSharedTargetIndexDirty() {
+        sharedTargetIndex.dirty = true
+      }
+
+      function ensureSharedTargetObserver() {
+        if (
+          sharedTargetIndex.observer ||
+          typeof MutationObserver === "undefined" ||
+          !document.body
+        ) {
+          return
+        }
+
+        sharedTargetIndex.observer = new MutationObserver(function (mutations) {
+          for (var i = 0; i < mutations.length; i++) {
+            var mutation = mutations[i]
+            if (mutation.type === "childList") {
+              if (
+                mutation.addedNodes.length > 0 ||
+                mutation.removedNodes.length > 0
+              ) {
+                markSharedTargetIndexDirty()
+                return
+              }
+            }
+
+            if (mutation.type === "attributes") {
+              markSharedTargetIndexDirty()
+              return
+            }
+          }
+        })
+
+        sharedTargetIndex.observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: [
+            ARCHIE_SOURCE_REF_ATTR,
+            "data-dnd-node-id",
+            "data-inspector-relative-path",
+            "data-inspector-line",
+            "data-inspector-column",
+          ],
+        })
+        window._inspectorSharedTargetObserver = sharedTargetIndex.observer
+      }
+
+      function rebuildSharedTargetIndex() {
+        ensureSharedTargetObserver()
+        if (!sharedTargetIndex.dirty) return
+
+        var nextExactBySignature = new Map()
+        var nextSharedBySignature = new Map()
+        var candidates = safeQuerySelectorAll("body *")
+        var indexedTargets = new WeakSet()
+
+        candidates.forEach(function (candidate) {
+          if (!candidate || candidate.nodeType !== Node.ELEMENT_NODE) return
+          if (isInspectorElement(candidate)) return
+
+          var inspectTarget = resolveExactInspectTarget(candidate)
+          if (!inspectTarget) return
+          if (indexedTargets.has(inspectTarget)) return
+          indexedTargets.add(inspectTarget)
+
+          var exactSignature = getExactSourceSignatureFromElement(inspectTarget)
+          if (exactSignature) {
+            appendSharedTarget(
+              nextExactBySignature,
+              exactSignature,
+              inspectTarget
+            )
+          }
+
+          var sharedSignature = resolveSharedGroupSignature(inspectTarget)
+          if (sharedSignature) {
+            appendSharedTarget(
+              nextSharedBySignature,
+              sharedSignature,
+              inspectTarget
+            )
+          }
+        })
+
+        sharedTargetIndex.exactBySignature = nextExactBySignature
+        sharedTargetIndex.sharedBySignature = nextSharedBySignature
+        sharedTargetIndex.dirty = false
+      }
+
+      function filterSharedTargets(referenceElement, candidates) {
+        if (!Array.isArray(candidates)) return []
+
+        var connectedCandidates = candidates.filter(function (candidate, index) {
+          if (!candidate || !document.contains(candidate)) return false
+          return candidates.indexOf(candidate) === index
+        })
+        if (connectedCandidates.length === 0) return []
+        return connectedCandidates
+      }
+
+      function getSharedSignatureFromInspectorSource(inspectorSource) {
+        if (!inspectorSource || typeof inspectorSource !== "object") return ""
+        var file =
+          typeof inspectorSource.file === "string"
+            ? inspectorSource.file.trim()
+            : ""
+        var line =
+          typeof inspectorSource.line === "number"
+            ? String(inspectorSource.line)
+            : typeof inspectorSource.line === "string"
+              ? inspectorSource.line.trim()
+              : ""
+        var column =
+          typeof inspectorSource.column === "number"
+            ? String(inspectorSource.column)
+            : typeof inspectorSource.column === "string"
+              ? inspectorSource.column.trim()
+              : ""
+        if (!file || !line) return ""
+        return file + "::" + line + "::" + (column || "")
+      }
+
+      function parseSourceSignature(signature) {
+        if (!signature || typeof signature !== "string") return null
+        var parts = signature.split("::")
+        if (parts.length < 3) return null
+        var column = normalizeSharedSignaturePart(parts[parts.length - 1])
+        var line = normalizeSharedSignaturePart(parts[parts.length - 2])
+        var file = normalizeSharedSignaturePart(parts.slice(0, -2).join("::"))
+        if (!file || !line || !column) return null
+        return {
+          file: file,
+          line: line,
+          column: column,
+        }
+      }
+
+      function buildInspectorInfoFromMeta(meta) {
+        if (!meta) return null
+        return {
+          file: meta.file,
+          line: meta.line,
+          column: meta.col,
+          componentName: meta.componentName,
+          nodeId: meta.nodeId,
+        }
+      }
+
+      function buildInspectorInfoFromExactSignature(signature, element) {
+        var parsed = parseSourceSignature(signature)
+        if (!parsed) return null
+        var tagName = String(element && element.tagName ? element.tagName : "")
+          .toLowerCase()
+        return {
+          file: parsed.file,
+          line: Number(parsed.line),
+          column: Number(parsed.column),
+          componentName: tagName || null,
+          nodeId:
+            parsed.file +
+            ":" +
+            parsed.line +
+            ":" +
+            parsed.column +
+            ":" +
+            (tagName || "element"),
+        }
+      }
+
+      function getInspectorInfoFromElement(element) {
+        if (!element) return null
+
+        var directMeta = getDirectEditorMetaFromElement(element)
+        if (directMeta) {
+          return buildInspectorInfoFromMeta(directMeta)
+        }
+
+        var exactSignature = getExactSourceSignatureFromElement(element)
+        if (exactSignature) {
+          return buildInspectorInfoFromExactSignature(exactSignature, element)
+        }
+
+        var metaResult = findNearestEditorMeta(element)
+        if (metaResult && metaResult.meta) {
+          return buildInspectorInfoFromMeta(metaResult.meta)
+        }
+
+        var legacySignature = getLegacySharedSignatureFromElement(element)
+        if (legacySignature) {
+          return buildInspectorInfoFromExactSignature(legacySignature, element)
+        }
+
+        return null
+      }
+
+      function resolveSharedTargetsFromMeta(targetMeta, referenceElement) {
+        var signature = getSharedSignatureFromMeta(targetMeta)
+        if (!signature) return []
+        rebuildSharedTargetIndex()
+        return filterSharedTargets(
+          referenceElement || null,
+          sharedTargetIndex.sharedBySignature.get(signature) || []
+        )
+      }
+
+      function resolveLegacySharedTargets(referenceElement) {
+        var signature = getLegacySharedSignatureFromElement(referenceElement)
+        if (!signature) return []
+        rebuildSharedTargetIndex()
+        return filterSharedTargets(
+          referenceElement,
+          sharedTargetIndex.sharedBySignature.get(signature) || []
+        )
+      }
+
+      function resolveSharedTargets(referenceElement) {
+        var inspectTarget = resolveExactInspectTarget(referenceElement)
+        if (!inspectTarget) return []
+
+        var signature = resolveSharedGroupSignature(inspectTarget)
+        if (signature) {
+          rebuildSharedTargetIndex()
+          var sharedTargets = filterSharedTargets(
+            inspectTarget,
+            sharedTargetIndex.sharedBySignature.get(signature) || []
+          )
+          if (sharedTargets.length > 0) return sharedTargets
+        }
+
+        var legacyTargets = resolveLegacySharedTargets(inspectTarget)
+        if (legacyTargets.length > 0) {
+          return legacyTargets
+        }
+
+        return [inspectTarget]
+      }
+
+      function getConfiguredTargetOrigin() {
+        var configured =
+          typeof window !== "undefined"
+            ? window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__
+            : ""
+        return typeof configured === "string" && configured !== "*"
+          ? configured
+          : ""
+      }
+
+      function getConfiguredAllowedOrigins() {
+        var configured =
+          typeof window !== "undefined"
+            ? window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__
+            : null
+        if (typeof configured === "string") {
+          return configured && configured !== "*" ? [configured] : []
+        }
+        if (!Array.isArray(configured)) return []
+        return configured.filter(function (origin) {
+          return typeof origin === "string" && origin && origin !== "*"
+        })
+      }
+
+      function getConfiguredAllowedOriginPatterns() {
+        var configured =
+          typeof window !== "undefined"
+            ? window.__ARCHIE_INSPECTOR_ALLOWED_ORIGIN_PATTERNS__
+            : []
+        if (!Array.isArray(configured)) return []
+        return configured.filter(function (pattern) {
+          return typeof pattern === "string" && pattern
+        })
+      }
+
+      function getReferrerOrigin() {
+        try {
+          return document.referrer ? new URL(document.referrer).origin : ""
+        } catch (error) {
+          return ""
+        }
+      }
+
+      var bridgeState = {
+        targetOrigin: getConfiguredTargetOrigin() || "",
+        pendingParentMessages: [],
+      }
+
+      function syncBridgeStateFromWindow() {
+        var configuredTargetOrigin = getConfiguredTargetOrigin()
+        if (configuredTargetOrigin) {
+          bridgeState.targetOrigin = configuredTargetOrigin
+        }
+      }
+
+      function flushPendingParentMessages() {
+        if (window.parent === window) {
+          bridgeState.pendingParentMessages = []
+          return
+        }
+        syncBridgeStateFromWindow()
+        if (
+          !bridgeState.targetOrigin ||
+          bridgeState.targetOrigin === "*" ||
+          bridgeState.pendingParentMessages.length === 0
+        ) {
+          return
+        }
+
+        var pendingMessages = bridgeState.pendingParentMessages.slice()
+        bridgeState.pendingParentMessages = []
+        pendingMessages.forEach(function (message) {
+          window.parent.postMessage(message, bridgeState.targetOrigin)
+        })
+      }
+
+      function adoptHostTargetOrigin(origin) {
+        if (
+          !origin ||
+          origin === "*" ||
+          bridgeState.targetOrigin === origin ||
+          bridgeState.targetOrigin
+        ) {
+          return
+        }
+
+        bridgeState.targetOrigin = origin
+        if (typeof window !== "undefined") {
+          window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ = origin
+        }
+        flushPendingParentMessages()
+      }
+
+      function postMessageToParent(msg) {
+        if (window.parent === window) {
+          return
+        }
+
+        syncBridgeStateFromWindow()
+        if (!bridgeState.targetOrigin || bridgeState.targetOrigin === "*") {
+          bridgeState.pendingParentMessages.push(msg)
+          return
+        }
+
+        window.parent.postMessage(msg, bridgeState.targetOrigin)
+      }
+
+      function isOriginAllowed(origin) {
+        if (!origin) return false
+        var allowedOrigins = getConfiguredAllowedOrigins()
+        var allowedOriginPatterns = getConfiguredAllowedOriginPatterns()
+        var configuredTargetOrigin = getConfiguredTargetOrigin()
+        if (
+          Array.isArray(allowedOrigins) &&
+          allowedOrigins.length > 0
+        ) {
+          if (allowedOrigins.indexOf(origin) !== -1) return true
+        } else if (configuredTargetOrigin && origin === configuredTargetOrigin) {
+          return true
+        }
+        if (
+          Array.isArray(allowedOriginPatterns) &&
+          allowedOriginPatterns.length > 0
+        ) {
+          try {
+            var host = new URL(origin).host
+            for (var i = 0; i < allowedOriginPatterns.length; i++) {
+              if (host.endsWith(allowedOriginPatterns[i])) return true
+            }
+          } catch (e) {}
+        }
+        return false
+      }
+
+      /** Reject CSS values that could run script (e.g. expression(), javascript: URLs, -moz-binding). Max length to avoid DoS. */
+      function isStyleValueSafe(value) {
+        if (value == null || typeof value !== "string") return false
+        if (value.length > 10000) 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 }
+
+      // Namespace (host can use __ARCHIE_INSPECTOR__ or legacy _inspector* for backward compat)
+      if (typeof window.__ARCHIE_INSPECTOR__ === "undefined") {
+        window.__ARCHIE_INSPECTOR__ = {}
+      }
+
+      // Global debug flag - can be set from outside: window._inspectorDebug or __ARCHIE_INSPECTOR__.debug
+      if (typeof window._inspectorDebug === "undefined") {
+        window._inspectorDebug = false
+      }
+      window.__ARCHIE_INSPECTOR__.debug = window._inspectorDebug
+
+      // Helper function for conditional logging
+      function inspectorLog() {
+        if (window._inspectorDebug) {
+          // eslint-disable-next-line no-console
+          console.log.apply(console, arguments)
+        }
+      }
+
+      function inspectorWarn() {
+        if (window._inspectorDebug) {
+          // eslint-disable-next-line no-console
+          console.warn.apply(console, arguments)
+        }
+      }
+
+      postMessageToParent({
+        type: "INSPECTOR_SCRIPT_LOADED",
+        timestamp: Date.now(),
+        version: "2.0.3",
+        protocolVersion: 1,
+        capabilities: {
+          inspect: true,
+          dndMove: true,
+          dndResize: true,
+          fiberInspectorSource: true,
+          hostControlledHistory: true,
+          arrangeStructuredHistory: true,
+          arrangeStrongNodeIdentity: true,
+        },
+      })
+
+      if (window._inspectorMessageHandler) {
+        try {
+          window.removeEventListener("message", window._inspectorMessageHandler)
+        } catch (e) {
+          // Ignore errors
+        }
+        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 // Track if an element is currently selected/being edited
+      let highlightedElement = null
+      let overlay = null
+      let selectedElement = null
+      let selectedElements = []
+      let selectedElementBadge = null
+      let eventBlockers = [] // Store event blocker functions for cleanup
+      let lastMultiSelectIntent = false // Tracks if user held meta/ctrl during pointer down
+      var inspectorCleanupMap = new WeakMap()
+      var BADGE_UPDATE_DELAY_MS = 50
+
+      if (!window._inspectorSelectedElement) {
+        window._inspectorSelectedElement = null
+      }
+      window.__ARCHIE_INSPECTOR__.selectedElement =
+        window._inspectorSelectedElement
+      if (window._inspectorRuntimeBridgeHandler) {
+        try {
+          window.removeEventListener(
+            "archie:dnd-runtime-event",
+            window._inspectorRuntimeBridgeHandler
+          )
+        } catch (e) {
+          // Ignore bridge cleanup errors
+        }
+        delete window._inspectorRuntimeBridgeHandler
+      }
+
+      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 normalizeInspectableTarget(element) {
+        if (!element || typeof element.closest !== "function") {
+          return element || null
+        }
+
+        var tagName = String(element.tagName || "").toLowerCase()
+        if (tagName === "svg") {
+          return element
+        }
+
+        var parentSvg = element.closest("svg")
+        if (parentSvg && !isInspectorElement(parentSvg)) {
+          return parentSvg
+        }
+
+        return element
+      }
+
+      // Hit-test: skip body/documentElement and inspector UI
+      function getElementFromPoint(x, y, fallbackTarget) {
+        try {
+          var list = document.elementsFromPoint(x, y)
+          for (var i = 0; i < list.length; i++) {
+            var el = list[i]
+            el = resolveExactInspectTarget(el)
+            if (!el || el === document.body || el === document.documentElement)
+              continue
+            if (isInspectorElement(el)) continue
+            return el
+          }
+        } catch (err) {}
+        return resolveExactInspectTarget(fallbackTarget || null)
+      }
+
+      var inspectorTheme = {
+        accent: "#8b5cf6",
+        accentSoft: "rgba(139,92,246,0.10)",
+        hover: "rgba(139,92,246,0.72)",
+        shared: "rgba(139,92,246,0.62)",
+      }
+      var INSPECTOR_OUTLINE = "2px solid " + inspectorTheme.accent
+      var INSPECTOR_OUTLINE_OFFSET = "-1px"
+
+      var inspectorStylesInjected = false
+      function getSharedOutlineRule() {
+        return (
+          '[data-inspector-shared="true"]{' +
+          "outline:2px dashed " +
+          inspectorTheme.shared +
+          "!important;" +
+          "outline-offset:-2px!important}"
+        )
+      }
+      function injectInspectorStylesheet() {
+        var style = document.getElementById("archie-inspector-styles")
+        if (!style) {
+          style = document.createElement("style")
+          style.id = "archie-inspector-styles"
+          ;(document.head || document.documentElement).appendChild(style)
+        }
+        style.textContent = getSharedOutlineRule()
+        inspectorStylesInjected = true
+      }
+
+      function updateInspectorTheme(nextTheme) {
+        if (!nextTheme || typeof nextTheme !== "object") return
+        inspectorTheme = {
+          accent:
+            typeof nextTheme.accent === "string" && nextTheme.accent
+              ? nextTheme.accent
+              : inspectorTheme.accent,
+          accentSoft:
+            typeof nextTheme.accentSoft === "string" && nextTheme.accentSoft
+              ? nextTheme.accentSoft
+              : inspectorTheme.accentSoft,
+          hover:
+            typeof nextTheme.hover === "string" && nextTheme.hover
+              ? nextTheme.hover
+              : inspectorTheme.hover,
+          shared:
+            typeof nextTheme.shared === "string" && nextTheme.shared
+              ? nextTheme.shared
+              : inspectorTheme.shared,
+        }
+        INSPECTOR_OUTLINE = "2px solid " + inspectorTheme.accent
+        injectInspectorStylesheet()
+        selectedElements.forEach(function (el) {
+          if (el) applyInspectorStyles(el)
+        })
+        if (
+          highlightedElement &&
+          !selectedElements.includes(highlightedElement)
+        ) {
+          applyOutlineToElement(highlightedElement, "hover")
+        }
+      }
+
+      function applyOutlineToElement(element, mode) {
+        if (!element || !element.style) return
+        var outlineColor =
+          mode === "hover" ? inspectorTheme.hover : inspectorTheme.accent
+        element.style.setProperty(
+          "outline",
+          "2px solid " + outlineColor,
+          "important"
+        )
+        element.style.setProperty(
+          "outline-offset",
+          INSPECTOR_OUTLINE_OFFSET,
+          "important"
+        )
+      }
+
+      function removeOutlineFromElement(element) {
+        if (!element || !element.style) return
+        element.style.removeProperty("outline")
+        element.style.removeProperty("outline-offset")
+      }
+
+      function applyInspectorStyles(element) {
+        if (!element) return
+        injectInspectorStylesheet()
+        element.setAttribute("data-inspector-editing", "true")
+        applyOutlineToElement(element)
+      }
+
+      // Helper: Remove inspector styles from element
+      function removeInspectorStyles(element) {
+        if (!element) return
+        removeOutlineFromElement(element)
+        element.removeAttribute("data-inspector-editing")
+      }
+
+      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)
+      }
+
+      // Helper: Clean up element's inspector event listeners
+      function cleanupElementListeners(element) {
+        if (!element) return
+        deleteElementCleanup(element)
+      }
+
+      // Helper: attach scroll/resize listeners to keep badge positioned over the given element (uses selectedElement/selectedElementBadge from closure)
+      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 to block all native events when inspector is active
+      function setupEventBlockers() {
+        removeEventBlockers()
+
+        // Core interaction events to block (removed less critical ones)
+        // Don't block mousedown: inspectorClickHandler needs it to select inputs; it preventDefault+stopPropagation
+        const eventsToBlock = [
+          "click",
+          "mouseup",
+          "dblclick",
+          "contextmenu",
+          "submit",
+          "change",
+          "input",
+          "focus",
+          "blur",
+          "keydown",
+          "keyup",
+        ]
+
+        const blockEvent = function (e) {
+          if (!isInspecting) return
+
+          // Allow move events and inspector UI events
+          if (
+            e.type === "mousemove" ||
+            e.type === "pointermove" ||
+            isInspectorElement(e.target)
+          ) {
+            return
+          }
+
+          // Block all other events
+          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 to remove all event blockers
+      function removeEventBlockers() {
+        eventBlockers.forEach(function (blocker) {
+          document.removeEventListener(blocker.type, blocker.handler, {
+            capture: true,
+            passive: false,
+          })
+        })
+        eventBlockers = []
+      }
+
+      const updateMultiSelectIntent = function (e) {
+        if (!isInspecting) return
+        lastMultiSelectIntent = e.metaKey || e.ctrlKey
+      }
+      document.addEventListener("mousedown", 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 = safeQuerySelector('[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) {
+          // Ignore errors
+        }
+
+        return null
+      }
+
+      // Helper: Update shared component highlights
+      function updateSharedHighlights() {
+        // Clear all shared highlights first
+        const sharedElements = safeQuerySelectorAll(
+          '[data-inspector-shared="true"]'
+        )
+        sharedElements.forEach((el) => {
+          el.removeAttribute("data-inspector-shared")
+        })
+
+        const targets = []
+        // Add all selected elements
+        if (selectedElements && selectedElements.length > 0) {
+          selectedElements.forEach((el) => targets.push(el))
+        }
+        // Add highlighted element if different and not already selected
+        if (
+          highlightedElement &&
+          !selectedElements.includes(highlightedElement)
+        ) {
+          targets.push(highlightedElement)
+        }
+
+        targets.forEach((target) => {
+          var newShared = resolveSharedTargets(target)
+
+          newShared.forEach((el) => {
+            if (selectedElements.includes(el) || el === highlightedElement)
+              return
+            injectInspectorStylesheet()
+            el.setAttribute("data-inspector-shared", "true")
+          })
+        })
+      }
+
+      function highlightElement(element) {
+        element = resolveExactInspectTarget(element)
+        if (!element || selectedElements.includes(element)) {
+          return
+        }
+
+        if (highlightedElement && highlightedElement !== element) {
+          highlightedElement.removeAttribute("data-inspector-hover")
+          if (!selectedElements.includes(highlightedElement)) {
+            removeOutlineFromElement(highlightedElement)
+          }
+        }
+
+        injectInspectorStylesheet()
+        highlightedElement = element
+        element.setAttribute("data-inspector-hover", "true")
+        applyOutlineToElement(element, "hover")
+        updateSharedHighlights()
+      }
+
+      function removeHighlight() {
+        if (highlightedElement) {
+          highlightedElement.removeAttribute("data-inspector-hover")
+          if (!selectedElements.includes(highlightedElement)) {
+            removeOutlineFromElement(highlightedElement)
+          }
+          highlightedElement = null
+        }
+        const pingEffect = document.getElementById("inspector-ping-effect")
+        if (pingEffect) {
+          pingEffect.remove()
+        }
+        if (overlay) {
+          overlay.remove()
+          overlay = null
+        }
+        updateSharedHighlights()
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      function createSelectedBadge(element) {
+        // Badge is now created in the host application, not in the iframe
+        // This function is kept for compatibility but does nothing
+        // The badge will be created by ElementInspectorBadge component in the host
+      }
+
+      function removeSelectedBadge() {
+        if (selectedElementBadge) {
+          selectedElementBadge.remove()
+          selectedElementBadge = null
+        }
+
+        // Cleanup all selected elements
+        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")
+          }
+        })
+
+        // Also cleanup the single reference if it exists and wasn't in the array (shouldn't happen but for safety)
+        if (selectedElement && !selectedElements.includes(selectedElement)) {
+          removeInspectorStyles(selectedElement)
+          if (selectedElement.style) {
+            selectedElement.style.removeProperty("transition")
+          }
+        }
+
+        selectedElement = null
+        isElementSelected = false // Mark that no element is selected
+      }
+
+      function activateInspectionMode() {
+        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()
+      }
+
+      function deactivateInspectionMode(options) {
+        var notifyParent = !options || options.notifyParent !== false
+        isInspecting = false
+        isElementSelected = false
+        removeHighlight()
+        removeSelectedBadge()
+        selectedElements.forEach(function (el) {
+          if (el) removeInspectorStyles(el)
+        })
+        selectedElement = null
+        selectedElements = []
+        window._inspectorSelectedElement = null
+        if (window.__ARCHIE_INSPECTOR__) {
+          window.__ARCHIE_INSPECTOR__.selectedElement = null
+        }
+        lastMultiSelectIntent = false
+        try {
+          safeQuerySelectorAll('[data-inspector-editing="true"]').forEach(
+            function (el) {
+              removeInspectorStyles(el)
+            }
+          )
+        } catch (_) {}
+        removeEventBlockers()
+        if (document.body) {
+          document.body.style.cursor = ""
+          document.body.style.userSelect = ""
+        }
+        updateSharedHighlights()
+        if (notifyParent) {
+          postMessageToParent({ type: "STOP_INSPECTION" })
+        }
+      }
+
+      function dispatchHostCommand(detail) {
+        window.dispatchEvent(
+          new CustomEvent("archie:editor-host-command", {
+            detail: detail,
+          })
+        )
+      }
+
+      function setEditorModeFromHost(mode, options) {
+        var historyMode =
+          options && options.hostControlledHistory ? "host" : "local"
+
+        if (options && options.theme) {
+          updateInspectorTheme(options.theme)
+          dispatchHostCommand({
+            type: "set-inspector-theme",
+            theme: options.theme,
+          })
+        }
+
+        dispatchHostCommand({
+          type: "set-history-mode",
+          historyMode: historyMode,
+        })
+
+        if (mode === "inspect") {
+          dispatchHostCommand({ type: "set-design-mode", enabled: false })
+          activateInspectionMode()
+          postMessageToParent({ type: "EDITOR_MODE_CHANGED", mode: "inspect" })
+          return
+        }
+
+        if (mode === "design") {
+          deactivateInspectionMode({ notifyParent: false })
+          dispatchHostCommand({ type: "set-design-mode", enabled: true })
+          postMessageToParent({ type: "EDITOR_MODE_CHANGED", mode: "design" })
+          return
+        }
+
+        deactivateInspectionMode({ notifyParent: false })
+        dispatchHostCommand({ type: "set-design-mode", enabled: false })
+        postMessageToParent({ type: "EDITOR_MODE_CHANGED", mode: "off" })
+      }
+
+      function findElementForReplay(selector, inspectorSource) {
+        var element = null
+        if (selector) {
+          element = findElementBySelector(selector)
+        }
+        if (!element && inspectorSource) {
+          element = findElementByInspectorSource(inspectorSource)
+        }
+        return element || getSelectedElement()
+      }
+
+      function applyMoveReplay(message) {
+        var selector = message.selector
+        var placement = message.placement || {}
+        var element = findElementForReplay(selector, message.inspectorSource)
+        if (!element) return false
+
+        var parent =
+          (placement.containerSelector &&
+            findElementBySelector(placement.containerSelector)) ||
+          (placement.containerInspectorSource &&
+            findElementByInspectorSource(placement.containerInspectorSource)) ||
+          null
+        var beforeSibling =
+          (placement.beforeSelector &&
+            findElementBySelector(placement.beforeSelector)) ||
+          (placement.beforeSiblingInspectorSource &&
+            findElementByInspectorSource(
+              placement.beforeSiblingInspectorSource
+            )) ||
+          null
+        var afterSibling =
+          (placement.afterSelector &&
+            findElementBySelector(placement.afterSelector)) ||
+          (placement.afterSiblingInspectorSource &&
+            findElementByInspectorSource(placement.afterSiblingInspectorSource)) ||
+          null
+
+        if (!parent && beforeSibling && beforeSibling.parentElement) {
+          parent = beforeSibling.parentElement
+        }
+        if (!parent && afterSibling && afterSibling.parentElement) {
+          parent = afterSibling.parentElement
+        }
+        if (!parent) {
+          parent = element.parentElement
+        }
+        if (!parent) return false
+
+        if (beforeSibling && beforeSibling.parentElement === parent) {
+          parent.insertBefore(element, beforeSibling)
+        } else if (afterSibling && afterSibling.parentElement === parent) {
+          parent.insertBefore(
+            element,
+            afterSibling.nextSibling ? afterSibling.nextSibling : null
+          )
+        } else if (
+          typeof placement.insertionIndex === "number" &&
+          placement.insertionIndex >= 0 &&
+          parent.children
+        ) {
+          var refChild = parent.children[placement.insertionIndex] || null
+          parent.insertBefore(element, refChild)
+        } else {
+          parent.appendChild(element)
+        }
+
+        return true
+      }
+
+      function applyResizeReplay(message) {
+        var selector = message.selector
+        var resize = message.resize || {}
+        var element = findElementForReplay(selector, message.inspectorSource)
+        if (!element || !element.style) return false
+
+        var styles =
+          resize.styles ||
+          (resize.styleDiff && resize.styleDiff.after) ||
+          message.styles ||
+          null
+        if (styles && typeof styles === "object") {
+          Object.keys(styles).forEach(function (key) {
+            var value = styles[key]
+            if (value == null || value === "") {
+              element.style.removeProperty(key)
+            } else {
+              element.style.setProperty(key, String(value))
+            }
+          })
+          return true
+        }
+
+        if (typeof resize.width === "number") {
+          element.style.width = resize.width + "px"
+        }
+        if (typeof resize.height === "number") {
+          element.style.height = resize.height + "px"
+        }
+
+        return true
+      }
+
+      // Helper function to get CSS selector for an element
+      // This is used for matching elements by selector in APPLY_STYLE_CHANGE handler
+      function getElementSelector(element) {
+        if (!element) return ""
+
+        // If element has ID, return it
+        if (element.id) {
+          return "#" + element.id
+        }
+
+        // Build a simple selector using tag name and classes
+        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
+      }
+
+      /** Stable selector for restore/undo (path with nth-of-type, id, or data-inspector). */
+      function getStableSelector(el) {
+        if (!el) return ""
+        if (el.nodeType !== Node.ELEMENT_NODE) return ""
+        if (el === document.body) return "body"
+        if (el === document.documentElement) return "html"
+        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")
+          const column = el.getAttribute("data-inspector-column")
+          const tagName = el.nodeName.toLowerCase()
+
+          if (relativePath && line && column) {
+            const withColumnSelector =
+              tagName +
+              '[data-inspector-relative-path="' +
+              escapeAttributeSelectorValue(relativePath) +
+              '"][data-inspector-line="' +
+              escapeAttributeSelectorValue(line) +
+              '"][data-inspector-column="' +
+              escapeAttributeSelectorValue(column) +
+              '"]'
+            try {
+              const matches = safeQuerySelectorAll(withColumnSelector)
+              if (matches.length === 1) return withColumnSelector
+            } catch (e) {}
+          }
+
+          if (relativePath && line) {
+            const withoutColumnSelector =
+              tagName +
+              '[data-inspector-relative-path="' +
+              escapeAttributeSelectorValue(relativePath) +
+              '"][data-inspector-line="' +
+              escapeAttributeSelectorValue(line) +
+              '"]'
+            try {
+              const matches = safeQuerySelectorAll(withoutColumnSelector)
+              if (matches.length === 1) return withoutColumnSelector
+            } catch (e) {}
+          }
+        }
+
+        const path = []
+        let current = el
+        while (
+          current &&
+          current.nodeType === Node.ELEMENT_NODE &&
+          current !== document.body &&
+          current !== document.documentElement
+        ) {
+          let sel = current.nodeName.toLowerCase()
+          let sibling = current
+          let nth = 1
+          while (sibling.previousElementSibling) {
+            sibling = sibling.previousElementSibling
+            if (sibling.nodeName === current.nodeName) nth++
+          }
+          sel += ":nth-of-type(" + nth + ")"
+          path.unshift(sel)
+          current = current.parentElement
+        }
+        return path.length > 0 ? path.join(" > ") : el.nodeName.toLowerCase()
+      }
+
+      function escapeAttributeSelectorValue(value) {
+        return String(value || "")
+          .replace(/\\/g, "\\\\")
+          .replace(/"/g, '\\"')
+      }
+
+      function stripSelectorClassQualifiers(selector) {
+        if (typeof selector !== "string" || selector.indexOf(".") === -1) {
+          return selector
+        }
+
+        return selector
+          .split(">")
+          .map(function (segment) {
+            const trimmed = segment.trim()
+            if (!trimmed) return trimmed
+
+            const nthIndex = trimmed.indexOf(":nth-of-type(")
+            const suffix = nthIndex === -1 ? "" : trimmed.slice(nthIndex)
+            const prefix =
+              nthIndex === -1 ? trimmed : trimmed.slice(0, nthIndex)
+            const classIndex = prefix.indexOf(".")
+            if (classIndex === -1) return trimmed
+
+            const withoutClasses = prefix.slice(0, classIndex)
+            if (!withoutClasses) return trimmed
+            return withoutClasses + suffix
+          })
+          .join(" > ")
+      }
+
+      function findElementBySelector(selector) {
+        if (!selector || typeof selector !== "string") return null
+
+        try {
+          const exactMatch = safeQuerySelector(selector)
+          if (exactMatch) return exactMatch
+        } catch (e) {}
+
+        const relaxedSelector = stripSelectorClassQualifiers(selector)
+        if (!relaxedSelector || relaxedSelector === selector) {
+          return null
+        }
+        try {
+          return safeQuerySelector(relaxedSelector)
+        } catch (e) {
+          return null
+        }
+      }
+
+      function findRelatedInspectorCandidate(candidates, preferredElement) {
+        if (
+          !preferredElement ||
+          !Array.isArray(candidates) ||
+          candidates.length === 0
+        ) {
+          return null
+        }
+
+        for (let index = 0; index < candidates.length; index++) {
+          const candidate = candidates[index]
+          if (candidate === preferredElement) {
+            return candidate
+          }
+        }
+
+        if (typeof preferredElement.contains === "function") {
+          for (let index = 0; index < candidates.length; index++) {
+            const candidate = candidates[index]
+            if (candidate && preferredElement.contains(candidate)) {
+              return candidate
+            }
+          }
+        }
+
+        for (let index = 0; index < candidates.length; index++) {
+          const candidate = candidates[index]
+          if (
+            candidate &&
+            typeof candidate.contains === "function" &&
+            candidate.contains(preferredElement)
+          ) {
+            return candidate
+          }
+        }
+
+        return null
+      }
+
+      function selectInspectorSourceCandidate(
+        candidates,
+        preferredElement,
+        allowFirstMatchFallback
+      ) {
+        if (!Array.isArray(candidates) || candidates.length === 0) {
+          return null
+        }
+
+        const relatedCandidate = findRelatedInspectorCandidate(
+          candidates,
+          preferredElement
+        )
+        if (relatedCandidate) return relatedCandidate
+
+        const editingCandidate = candidates.find(function (candidate) {
+          return candidate.getAttribute("data-inspector-editing") === "true"
+        })
+        if (editingCandidate) return editingCandidate
+
+        const selectedCandidate = candidates.find(function (candidate) {
+          return selectedElements.indexOf(candidate) !== -1
+        })
+        if (selectedCandidate) return selectedCandidate
+
+        if (candidates.length === 1 || allowFirstMatchFallback !== false) {
+          return candidates[0]
+        }
+
+        return null
+      }
+
+      function findElementByInspectorSource(
+        inspectorSource,
+        preferredElement,
+        allowFirstMatchFallback
+      ) {
+        if (!inspectorSource || typeof inspectorSource !== "object") return null
+
+        const signature = getSharedSignatureFromInspectorSource(inspectorSource)
+        if (!signature) return null
+
+        rebuildSharedTargetIndex()
+        const exactCandidates = sharedTargetIndex.exactBySignature.get(signature)
+        if (Array.isArray(exactCandidates) && exactCandidates.length > 0) {
+          const exactCandidate = selectInspectorSourceCandidate(
+            exactCandidates,
+            preferredElement,
+            allowFirstMatchFallback
+          )
+          if (exactCandidate) return exactCandidate
+        }
+
+        const sharedCandidates = sharedTargetIndex.sharedBySignature.get(signature)
+        if (Array.isArray(sharedCandidates) && sharedCandidates.length > 0) {
+          const sharedCandidate = selectInspectorSourceCandidate(
+            sharedCandidates,
+            preferredElement,
+            allowFirstMatchFallback
+          )
+          if (sharedCandidate) return sharedCandidate
+        }
+
+        try {
+          const exactMatch = safeQuerySelector(
+            "[" +
+              ARCHIE_SOURCE_REF_ATTR +
+              '="' +
+              escapeAttributeSelectorValue(signature) +
+              '"]'
+          )
+          if (exactMatch) return exactMatch
+        } catch (e) {}
+
+        const file =
+          typeof inspectorSource.file === "string"
+            ? inspectorSource.file.trim()
+            : ""
+        const line =
+          typeof inspectorSource.line === "number"
+            ? String(inspectorSource.line)
+            : typeof inspectorSource.line === "string"
+              ? inspectorSource.line.trim()
+              : ""
+        const column =
+          typeof inspectorSource.column === "number"
+            ? String(inspectorSource.column)
+            : typeof inspectorSource.column === "string"
+              ? inspectorSource.column.trim()
+              : ""
+
+        const selectors = []
+        if (column) {
+          selectors.push(
+            '[data-inspector-relative-path="' +
+              escapeAttributeSelectorValue(file) +
+              '"][data-inspector-line="' +
+              escapeAttributeSelectorValue(line) +
+              '"][data-inspector-column="' +
+              escapeAttributeSelectorValue(column) +
+              '"]'
+          )
+        }
+        selectors.push(
+          '[data-inspector-relative-path="' +
+            escapeAttributeSelectorValue(file) +
+            '"][data-inspector-line="' +
+            escapeAttributeSelectorValue(line) +
+            '"]'
+        )
+
+        let fallbackMatch = null
+        for (let index = 0; index < selectors.length; index++) {
+          const selector = selectors[index]
+          try {
+            const matches = safeQuerySelectorAll(selector)
+            if (matches.length === 1) {
+              return matches[0]
+            }
+            if (!fallbackMatch && matches.length > 0) {
+              fallbackMatch = matches[0]
+            }
+          } catch (e) {}
+        }
+        return fallbackMatch
+      }
+
+      function resolveMutationElement(options) {
+        const selector =
+          options && typeof options.selector === "string"
+            ? options.selector.trim()
+            : ""
+        const hasSelector = selector.length > 0
+        const inspectorSource = options ? options.inspectorSource : null
+        const allowSelectedFallback =
+          !!options && options.allowSelectedFallback === true
+        const allowEditingFallback =
+          !!options && options.allowEditingFallback === true
+
+        let element = null
+        let selectorElement = null
+
+        if (hasSelector) {
+          selectorElement = findElementBySelector(selector)
+        }
+        if (!element && inspectorSource) {
+          element = findElementByInspectorSource(
+            inspectorSource,
+            selectorElement,
+            !selectorElement
+          )
+        }
+        if (!element && selectorElement) {
+          element = selectorElement
+        }
+        if (!element && !hasSelector && allowSelectedFallback) {
+          element = getSelectedElement()
+        }
+        if (!element && !hasSelector && allowEditingFallback) {
+          try {
+            element = safeQuerySelector('[data-inspector-editing="true"]')
+          } catch (e) {}
+        }
+
+        return element
+      }
+
+      function extractMetadata(element) {
+        if (!element) return null
+
+        const computed = window.getComputedStyle(element)
+        const rect = element.getBoundingClientRect()
+        const tagName = String(element.tagName || "").toLowerCase()
+        const maxInnerHtmlLength = tagName === "svg" ? 50000 : 500
+
+        const attributes = {}
+        for (let i = 0; i < element.attributes.length; i++) {
+          const attr = element.attributes[i]
+          attributes[attr.name] = attr.value
+        }
+
+        const inspectorInfo = getInspectorInfoFromElement(element)
+        const editorMeta = findNearestEditorMeta(element)
+
+        return {
+          tagName: tagName,
+          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, maxInnerHtmlLength)
+            : null,
+          outerHTML: element.outerHTML
+            ? element.outerHTML.slice(0, maxInnerHtmlLength)
+            : null,
+          attributes: attributes,
+          inspectorSource: inspectorInfo,
+          editorMeta: editorMeta ? editorMeta.meta : null,
+          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: getStableSelector(element),
+        }
+      }
+
+      var LUCIDE_SVG_NAMESPACE = "http://www.w3.org/2000/svg"
+      var SAFE_LUCIDE_TAGS = {
+        circle: true,
+        ellipse: true,
+        g: true,
+        line: true,
+        path: true,
+        polygon: true,
+        polyline: true,
+        rect: true,
+      }
+      var SAFE_CUSTOM_SVG_TAGS = {
+        svg: true,
+        circle: true,
+        ellipse: true,
+        g: true,
+        line: true,
+        path: true,
+        polygon: true,
+        polyline: true,
+        rect: true,
+        defs: true,
+        clipPath: true,
+        mask: true,
+        symbol: true,
+        use: true,
+        title: true,
+        desc: true,
+        linearGradient: true,
+        radialGradient: true,
+        stop: true,
+      }
+      var MAX_CUSTOM_SVG_DEPTH = 24
+      var MAX_CUSTOM_SVG_NODES = 600
+
+      function isLucideSvgElement(element) {
+        if (!element || !element.tagName) return false
+        if (String(element.tagName).toLowerCase() !== "svg") return false
+        var classAttr = element.getAttribute
+          ? element.getAttribute("class") || ""
+          : ""
+        var hasLucideClass = false
+        if (
+          element.classList &&
+          typeof element.classList.contains === "function"
+        ) {
+          hasLucideClass = element.classList.contains("lucide")
+        } else if (classAttr) {
+          hasLucideClass = classAttr.split(/\s+/).indexOf("lucide") !== -1
+        }
+        return hasLucideClass
+      }
+
+      function toLucideSlug(iconName, explicitSlug) {
+        if (
+          typeof explicitSlug === "string" &&
+          /^[a-z0-9-]{1,120}$/.test(explicitSlug)
+        ) {
+          return explicitSlug
+        }
+        if (typeof iconName !== "string" || !iconName) return ""
+        return iconName
+          .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+          .replace(/[_\s]+/g, "-")
+          .toLowerCase()
+          .replace(/-+/g, "-")
+          .replace(/^-|-$/g, "")
+      }
+
+      function updateLucideClassName(element, iconSlug) {
+        if (!element || !iconSlug) return
+        var nextIconClass = "lucide-" + iconSlug
+        var classAttr = element.getAttribute("class") || ""
+        var tokens = classAttr
+          .split(/\s+/)
+          .map(function (token) {
+            return token.trim()
+          })
+          .filter(Boolean)
+        var replaced = false
+        for (var i = 0; i < tokens.length; i++) {
+          if (tokens[i].indexOf("lucide-") === 0) {
+            tokens[i] = nextIconClass
+            replaced = true
+            break
+          }
+        }
+        if (tokens.indexOf("lucide") === -1) {
+          tokens.unshift("lucide")
+        }
+        if (!replaced) {
+          tokens.push(nextIconClass)
+        }
+        var uniqueTokens = []
+        for (var j = 0; j < tokens.length; j++) {
+          if (uniqueTokens.indexOf(tokens[j]) === -1) {
+            uniqueTokens.push(tokens[j])
+          }
+        }
+        element.setAttribute("class", uniqueTokens.join(" "))
+      }
+
+      function isSafeSvgAttributeName(name) {
+        if (typeof name !== "string" || !name) return false
+        if (!/^[a-zA-Z_:][-a-zA-Z0-9_:.]*$/.test(name)) return false
+        var lower = name.toLowerCase()
+        if (lower.indexOf("on") === 0) return false
+        return true
+      }
+
+      function isSafeSvgAttributeValue(name, value) {
+        if (typeof value !== "string") return false
+        if (value.length > 500) return false
+        var lowerName = String(name || "").toLowerCase()
+        var lowerValue = value.toLowerCase()
+        if (lowerName === "style") return false
+        if (lowerName === "href" || lowerName === "xlink:href") {
+          if (lowerValue.indexOf("javascript:") !== -1) return false
+          if (lowerValue.indexOf("vbscript:") !== -1) return false
+          if (lowerValue.indexOf("data:text/html") !== -1) return false
+        }
+        return true
+      }
+
+      function sanitizeSvgNode(sourceNode, state, depth) {
+        if (!sourceNode) return null
+        if (depth > MAX_CUSTOM_SVG_DEPTH) return null
+        if (state.count > MAX_CUSTOM_SVG_NODES) return null
+        state.count += 1
+
+        if (sourceNode.nodeType === 3) {
+          var textValue = sourceNode.nodeValue || ""
+          if (!textValue.trim()) return null
+          return document.createTextNode(textValue.slice(0, 500))
+        }
+
+        if (sourceNode.nodeType !== 1) {
+          return null
+        }
+
+        var sourceElement = sourceNode
+        var tagName = sourceElement.tagName
+        if (!SAFE_CUSTOM_SVG_TAGS[tagName]) {
+          return null
+        }
+
+        var sanitizedElement = document.createElementNS(
+          LUCIDE_SVG_NAMESPACE,
+          tagName
+        )
+        var attrs = sourceElement.attributes || []
+        for (var i = 0; i < attrs.length; i++) {
+          var attrName = attrs[i].name
+          var attrValue = attrs[i].value
+          if (!isSafeSvgAttributeName(attrName)) continue
+          if (!isSafeSvgAttributeValue(attrName, String(attrValue))) continue
+          sanitizedElement.setAttribute(
+            attrName,
+            String(attrValue).slice(0, 2000)
+          )
+        }
+
+        var children = sourceElement.childNodes || []
+        for (var j = 0; j < children.length; j++) {
+          var childNode = sanitizeSvgNode(children[j], state, depth + 1)
+          if (!childNode) continue
+          sanitizedElement.appendChild(childNode)
+        }
+
+        return sanitizedElement
+      }
+
+      function parseAndSanitizeCustomSvgMarkup(svgMarkup) {
+        if (typeof svgMarkup !== "string") return null
+        var trimmed = svgMarkup.trim()
+        if (!trimmed || trimmed.length > 50000) return null
+
+        var parsedDocument = null
+        try {
+          parsedDocument = new DOMParser().parseFromString(
+            trimmed,
+            "image/svg+xml"
+          )
+        } catch (e) {
+          return null
+        }
+        if (!parsedDocument || !parsedDocument.documentElement) return null
+        if (parsedDocument.querySelector("parsererror")) return null
+
+        var root = parsedDocument.documentElement
+        if (!root || root.tagName !== "svg") return null
+
+        var state = { count: 0 }
+        var sanitizedRoot = sanitizeSvgNode(root, state, 0)
+        if (!sanitizedRoot || sanitizedRoot.tagName !== "svg") return null
+
+        return sanitizedRoot
+      }
+
+      function applyCustomSvgElement(target, sanitizedSvgElement) {
+        if (!target || !sanitizedSvgElement) return false
+
+        var preservedInspectorAttrs = {}
+        var targetAttrs = target.attributes || []
+        for (var i = 0; i < targetAttrs.length; i++) {
+          var attrName = targetAttrs[i].name
+          if (attrName.indexOf("data-inspector-") === 0) {
+            preservedInspectorAttrs[attrName] = targetAttrs[i].value
+          }
+        }
+
+        while (target.attributes && target.attributes.length > 0) {
+          target.removeAttribute(target.attributes[0].name)
+        }
+
+        var sourceAttrs = sanitizedSvgElement.attributes || []
+        for (var j = 0; j < sourceAttrs.length; j++) {
+          target.setAttribute(sourceAttrs[j].name, sourceAttrs[j].value)
+        }
+
+        var preservedKeys = Object.keys(preservedInspectorAttrs)
+        for (var p = 0; p < preservedKeys.length; p++) {
+          var preservedAttrName = preservedKeys[p]
+          target.setAttribute(
+            preservedAttrName,
+            String(preservedInspectorAttrs[preservedAttrName])
+          )
+        }
+
+        while (target.firstChild) {
+          target.removeChild(target.firstChild)
+        }
+
+        var sourceChildren = sanitizedSvgElement.childNodes || []
+        for (var c = 0; c < sourceChildren.length; c++) {
+          target.appendChild(sourceChildren[c].cloneNode(true))
+        }
+
+        return true
+      }
+
+      function isValidLucideIconNode(iconNode) {
+        if (!Array.isArray(iconNode) || iconNode.length === 0) return false
+        if (iconNode.length > 256) return false
+
+        for (var i = 0; i < iconNode.length; i++) {
+          var item = iconNode[i]
+          if (!Array.isArray(item) || item.length !== 2) return false
+
+          var tagName = item[0]
+          var attrs = item[1]
+          if (typeof tagName !== "string" || !SAFE_LUCIDE_TAGS[tagName])
+            return false
+          if (!attrs || typeof attrs !== "object" || Array.isArray(attrs))
+            return false
+
+          var attrNames = Object.keys(attrs)
+          if (attrNames.length > 40) return false
+          for (var j = 0; j < attrNames.length; j++) {
+            var attrName = attrNames[j]
+            if (attrName === "key") continue
+            if (!isSafeSvgAttributeName(attrName)) return false
+            var rawValue = attrs[attrName]
+            if (rawValue == null) continue
+            if (
+              typeof rawValue !== "string" &&
+              typeof rawValue !== "number" &&
+              typeof rawValue !== "boolean"
+            ) {
+              return false
+            }
+            if (!isSafeSvgAttributeValue(attrName, String(rawValue)))
+              return false
+          }
+        }
+
+        return true
+      }
+
+      function applyLucideBaseAttributes(element) {
+        if (!element || String(element.tagName || "").toLowerCase() !== "svg") {
+          return
+        }
+
+        element.setAttribute("xmlns", LUCIDE_SVG_NAMESPACE)
+        element.setAttribute("viewBox", "0 0 24 24")
+        element.setAttribute("fill", "none")
+        element.setAttribute("stroke", "currentColor")
+        element.setAttribute("stroke-width", "2")
+        element.setAttribute("stroke-linecap", "round")
+        element.setAttribute("stroke-linejoin", "round")
+      }
+
+      function applyLucideIconNode(element, iconNode) {
+        if (!element || !isValidLucideIconNode(iconNode)) return false
+        applyLucideBaseAttributes(element)
+        while (element.firstChild) {
+          element.removeChild(element.firstChild)
+        }
+
+        for (var i = 0; i < iconNode.length; i++) {
+          var item = iconNode[i]
+          var tagName = item[0]
+          var attrs = item[1]
+          var child = document.createElementNS(LUCIDE_SVG_NAMESPACE, tagName)
+
+          var attrNames = Object.keys(attrs)
+          for (var j = 0; j < attrNames.length; j++) {
+            var attrName = attrNames[j]
+            if (attrName === "key") continue
+            var rawValue = attrs[attrName]
+            if (rawValue == null) continue
+            child.setAttribute(attrName, String(rawValue).slice(0, 500))
+          }
+
+          element.appendChild(child)
+        }
+
+        return true
+      }
+
+      function coerceSvgElement(element) {
+        if (!element) return null
+        if (String(element.tagName || "").toLowerCase() === "svg") {
+          return element
+        }
+
+        if (typeof element.closest === "function") {
+          var parentSvg = element.closest("svg")
+          if (parentSvg) return parentSvg
+        }
+
+        if (typeof element.querySelector === "function") {
+          var nestedSvg = element.querySelector("svg")
+          if (nestedSvg) return nestedSvg
+        }
+
+        return null
+      }
+
+      function resolveLucideTargetElement(selector, inspectorSource) {
+        var element = coerceSvgElement(
+          resolveMutationElement({
+            selector: selector,
+            inspectorSource: inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+        )
+        if (
+          !element &&
+          !selector &&
+          !inspectorSource &&
+          selectedElements &&
+          selectedElements.length > 0
+        ) {
+          for (var i = selectedElements.length - 1; i >= 0; i--) {
+            var candidate = coerceSvgElement(selectedElements[i])
+            if (candidate) {
+              element = candidate
+              break
+            }
+          }
+        }
+        return element
+      }
+
+      function resolveSvgTargetElement(selector, inspectorSource) {
+        var element = coerceSvgElement(
+          resolveMutationElement({
+            selector: selector,
+            inspectorSource: inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+        )
+        if (
+          !element &&
+          !selector &&
+          !inspectorSource &&
+          selectedElements &&
+          selectedElements.length > 0
+        ) {
+          for (var i = selectedElements.length - 1; i >= 0; i--) {
+            var candidate = coerceSvgElement(selectedElements[i])
+            if (candidate) {
+              element = candidate
+              break
+            }
+          }
+        }
+        return element
+      }
+
+      function getSvgSharedTargets(element, predicate) {
+        var targets = resolveSharedTargets(element)
+        if (targets.length === 0 && element) {
+          targets = [element]
+        }
+        if (!predicate) return targets
+        return targets.filter(function (candidate) {
+          return predicate(candidate)
+        })
+      }
+
+      function getLucideSharedTargets(element) {
+        return getSvgSharedTargets(element, isLucideSvgElement)
+      }
+
+      var pendingArrangeUndoRequestId = null
+
+      const runtimeBridgeHandler = function (event) {
+        const detail = event && event.detail ? event.detail : null
+        if (!detail || typeof detail !== "object" || typeof detail.type !== "string") {
+          return
+        }
+
+        if (detail.type === "design-mode-changed") {
+          postMessageToParent({
+            type: "EDITOR_MODE_CHANGED",
+            mode: detail.mode || "off",
+          })
+          return
+        }
+
+        if (detail.type === "element-moved") {
+          postMessageToParent({
+            type: "ELEMENT_MOVED",
+            payload: detail,
+          })
+          return
+        }
+
+        if (detail.type === "element-resized") {
+          postMessageToParent({
+            type: "ELEMENT_RESIZED",
+            payload: detail,
+          })
+          return
+        }
+
+        if (detail.type === "element-inserted") {
+          postMessageToParent({
+            type: "ELEMENT_INSERTED",
+            payload: detail,
+          })
+          return
+        }
+
+        if (detail.type === "arrange-session-changed") {
+          postMessageToParent({
+            type: "ARRANGE_SESSION_CHANGED",
+            session: detail.session,
+          })
+          return
+        }
+
+        if (detail.type === "arrange-undo-applied") {
+          postMessageToParent({
+            type: "ARRANGE_UNDO_APPLIED",
+            requestId: pendingArrangeUndoRequestId,
+            success: !!detail.success,
+            updatedAt: detail.updatedAt || Date.now(),
+          })
+          pendingArrangeUndoRequestId = null
+          return
+        }
+
+        if (detail.type === "design-mode-error") {
+          postMessageToParent({
+            type: "DESIGN_MODE_ERROR",
+            error:
+              typeof detail.error === "string" && detail.error
+                ? detail.error
+                : "Unknown design mode error",
+            payload: detail,
+          })
+        }
+      }
+
+      window._inspectorRuntimeBridgeHandler = runtimeBridgeHandler
+      window.addEventListener("archie:dnd-runtime-event", runtimeBridgeHandler)
+
+      const messageHandler = function (event) {
+        if (!isOriginAllowed(event.origin)) return
+        adoptHostTargetOrigin(event.origin)
+        if (
+          !event.data ||
+          typeof event.data !== "object" ||
+          typeof event.data.type !== "string"
+        )
+          return
+
+        // Log all messages for debugging (excluding frequent position updates)
+        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 === "SET_EDITOR_MODE") {
+          setEditorModeFromHost(event.data.mode || "off", {
+            hostControlledHistory: event.data.hostControlledHistory !== false,
+            theme: event.data.theme || null,
+          })
+        } else if (event.data && event.data.type === "SYNC_EDITOR_STATE") {
+          setEditorModeFromHost(event.data.mode || "off", {
+            hostControlledHistory: event.data.hostControlledHistory !== false,
+            theme: event.data.theme || null,
+          })
+        } else if (event.data && event.data.type === "SET_INSPECTOR_THEME") {
+          updateInspectorTheme(event.data.theme || null)
+        } else if (event.data && event.data.type === "APPLY_MOVE") {
+          var moveApplied = applyMoveReplay(event.data)
+          postMessageToParent({
+            type: moveApplied ? "ELEMENT_MOVED_APPLIED" : "ELEMENT_MOVE_FAILED",
+            requestId: event.data.requestId,
+            selector: event.data.selector || null,
+          })
+        } else if (event.data && event.data.type === "APPLY_RESIZE") {
+          var resizeApplied = applyResizeReplay(event.data)
+          postMessageToParent({
+            type: resizeApplied
+              ? "ELEMENT_RESIZED_APPLIED"
+              : "ELEMENT_RESIZE_FAILED",
+            requestId: event.data.requestId,
+            selector: event.data.selector || null,
+          })
+        } else if (event.data && event.data.type === "ARRANGE_UNDO") {
+          pendingArrangeUndoRequestId =
+            typeof event.data.requestId === "string" ? event.data.requestId : null
+          dispatchHostCommand({ type: "request-undo" })
+        } else if (event.data && event.data.type === "START_INSPECTION") {
+          setEditorModeFromHost("inspect", {
+            hostControlledHistory: true,
+          })
+        } else if (event.data && event.data.type === "STOP_INSPECTION") {
+          setEditorModeFromHost("off", {
+            hostControlledHistory: true,
+          })
+        } else if (event.data && event.data.type === "SHOW_SELECTED_ELEMENT") {
+          const { selector } = event.data
+
+          // Try to get element by selector first, then fall back to getSelectedElement
+          let element = null
+          try {
+            element = safeQuerySelector(selector)
+          } catch (e) {
+            // Invalid selector, try getSelectedElement
+            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 // Mark that an element is selected
+
+            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)
+
+            // Remove selection from current element
+            if (selectedElement) {
+              removeInspectorStyles(selectedElement)
+              cleanupElementListeners(selectedElement)
+            }
+
+            // Select parent element
+            selectedElement = parentElement
+            window._inspectorSelectedElement = parentElement
+            if (window.__ARCHIE_INSPECTOR__)
+              window.__ARCHIE_INSPECTOR__.selectedElement = parentElement
+            isElementSelected = true // Mark that an element is selected
+
+            applyInspectorStyles(parentElement)
+            setupBadgePositionListeners(parentElement)
+
+            postMessageToParent({
+              type: "ELEMENT_SELECTED",
+              metadata: metadata,
+            })
+          }
+        } else if (event.data && event.data.type === "HIDE_SELECTED_ELEMENT") {
+          if (selectedElement) {
+            deleteElementCleanup(selectedElement)
+          }
+          if (selectedElement) {
+            // Only remove inspector-specific styles (border is preserved)
+            removeInspectorStyles(selectedElement)
+
+            // Verify user styles are still applied (use getComputedStyle to check actual values)
+            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 // Mark that no element is selected
+        } else if (event.data && event.data.type === "GET_ELEMENT_POSITION") {
+          const { selector } = event.data
+          let element = null
+
+          // Try to find the element by selector
+          if (selector) {
+            try {
+              element = safeQuerySelector(selector)
+            } catch (e) {
+              // Invalid selector or element not found
+            }
+          }
+
+          // Fallback to selectedElement if no selector provided or element not found
+          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: 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",
+              requestId: event.data.requestId,
+              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 = resolveMutationElement({
+            selector: selector,
+            inspectorSource: event.data.inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+
+          if (!element) {
+            inspectorWarn(
+              "[Inspector] Element not found for selector:",
+              selector,
+              "property:",
+              property,
+              "inspectorSource:",
+              event.data.inspectorSource
+            )
+
+            postMessageToParent({
+              type: "STYLE_CHANGE_FAILED",
+              requestId: event.data.requestId,
+              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
+          }
+          resolveSharedTargets(element).forEach((sharedEl) => {
+            if (sharedEl === element) return
+
+            sharedEl.style.setProperty(kebabProperty, value, "important")
+            if (sharedEl.style.hasOwnProperty(camelProperty)) {
+              sharedEl.style[camelProperty] = value
+            }
+          })
+
+          // Verify the style was actually applied
+          const appliedValue = element.style.getPropertyValue(kebabProperty)
+          inspectorLog(
+            "[Inspector] Applied style:",
+            property,
+            "=",
+            value,
+            "to element:",
+            selector,
+            "found:",
+            !!element,
+            "verified:",
+            appliedValue
+          )
+
+          postMessageToParent({
+            type: "STYLE_CHANGE_APPLIED",
+            requestId: event.data.requestId,
+            selector,
+            property,
+            value,
+          })
+        } else if (event.data && event.data.type === "SET_ELEMENT_CLASS_NAME") {
+          const { selector, className, inspectorSource } = event.data
+
+          inspectorLog("[Inspector] Received SET_ELEMENT_CLASS_NAME:", {
+            selector,
+            className,
+          })
+
+          let element = resolveMutationElement({
+            selector: selector,
+            inspectorSource: inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+
+          if (!element) {
+            postMessageToParent({
+              type: "STYLE_CHANGE_FAILED",
+              requestId: event.data.requestId,
+              selector,
+              error: "Element not found for class change",
+            })
+            return
+          }
+
+          var classStr =
+            typeof className === "string" ? className.slice(0, 2000) : ""
+          element.className = classStr.trim().replace(/\s+/g, " ")
+
+          resolveSharedTargets(element).forEach((sharedEl) => {
+            if (sharedEl === element) return
+            sharedEl.className = classStr.trim().replace(/\s+/g, " ")
+          })
+
+          postMessageToParent({
+            type: "STYLE_CHANGE_APPLIED",
+            requestId: event.data.requestId,
+            selector,
+            className: classStr,
+            action: "set",
+          })
+        } else if (
+          event.data &&
+          event.data.type === "APPLY_CLASS_NAME_CHANGE"
+        ) {
+          const { selector, className, action, inspectorSource } = event.data
+
+          inspectorLog("[Inspector] Received APPLY_CLASS_NAME_CHANGE:", {
+            selector,
+            className,
+            action,
+          })
+
+          let element = resolveMutationElement({
+            selector: selector,
+            inspectorSource: inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+
+          if (!element) {
+            postMessageToParent({
+              type: "STYLE_CHANGE_FAILED",
+              requestId: event.data.requestId,
+              selector,
+              error: "Element not found for class change",
+            })
+            return
+          }
+
+          // Apply Class Change
+          var classStr =
+            typeof className === "string" ? className.slice(0, 2000) : ""
+          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)
+            }
+          })
+
+          resolveSharedTargets(element).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",
+            requestId: event.data.requestId,
+            selector,
+            className,
+            action,
+          })
+        } else if (event.data && event.data.type === "APPLY_TEXT_CHANGE") {
+          const { selector, text, inspectorSource } = event.data
+          if (
+            text != null &&
+            typeof text === "string" &&
+            text.length > 500000
+          ) {
+            postMessageToParent({
+              type: "TEXT_CHANGE_FAILED",
+              requestId: event.data.requestId,
+              selector,
+              text: "",
+              error: "Text value too long",
+            })
+            return
+          }
+          let element = resolveMutationElement({
+            selector: selector,
+            inspectorSource: inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+
+          if (!element) {
+            postMessageToParent({
+              type: "TEXT_CHANGE_FAILED",
+              requestId: event.data.requestId,
+              selector,
+              text,
+              error: "Element not found",
+            })
+            return
+          }
+
+          element.textContent = text != null ? String(text) : ""
+          postMessageToParent({
+            type: "TEXT_CHANGE_APPLIED",
+            requestId: event.data.requestId,
+            selector,
+            text,
+          })
+        } else if (event.data && event.data.type === "REPLACE_LUCIDE_ICON") {
+          var lucideSelector = event.data.selector
+          var lucideIconName = event.data.iconName
+          var lucideIconSlug = toLucideSlug(lucideIconName, event.data.iconSlug)
+          var lucideIconNode = event.data.iconNode
+
+          if (!lucideIconSlug || !/^[a-z0-9-]{1,120}$/.test(lucideIconSlug)) {
+            postMessageToParent({
+              type: "LUCIDE_ICON_REPLACE_FAILED",
+              requestId: event.data.requestId,
+              selector:
+                typeof lucideSelector === "string" ? lucideSelector : "",
+              iconName:
+                typeof lucideIconName === "string" ? lucideIconName : "",
+              error: "Invalid icon slug",
+            })
+            return
+          }
+
+          var element = resolveLucideTargetElement(
+            lucideSelector,
+            event.data.inspectorSource
+          )
+          if (!element) {
+            postMessageToParent({
+              type: "LUCIDE_ICON_REPLACE_FAILED",
+              requestId: event.data.requestId,
+              selector:
+                typeof lucideSelector === "string" ? lucideSelector : "",
+              iconName:
+                typeof lucideIconName === "string" ? lucideIconName : "",
+              iconSlug: lucideIconSlug,
+              error: "SVG target not found",
+            })
+            return
+          }
+
+          var targets = getLucideSharedTargets(element)
+          if (targets.length === 0) {
+            targets.push(element)
+          }
+
+          var canApplyNode = isValidLucideIconNode(lucideIconNode)
+          var replacedNodeCount = 0
+          for (var idx = 0; idx < targets.length; idx++) {
+            var target = targets[idx]
+            updateLucideClassName(target, lucideIconSlug)
+            if (canApplyNode && applyLucideIconNode(target, lucideIconNode)) {
+              replacedNodeCount++
+            }
+            if (target.getAttribute("data-inspector-editing") === "true") {
+              applyInspectorStyles(target)
+            }
+          }
+
+          postMessageToParent({
+            type: "LUCIDE_ICON_REPLACED",
+            requestId: event.data.requestId,
+            selector: getStableSelector(element),
+            iconName: typeof lucideIconName === "string" ? lucideIconName : "",
+            iconSlug: lucideIconSlug,
+            nodeReplaced: replacedNodeCount > 0,
+            targetsCount: targets.length,
+          })
+        } else if (
+          event.data &&
+          event.data.type === "REPLACE_CUSTOM_SVG_ICON"
+        ) {
+          var customSvgSelector = event.data.selector
+          var customSvgMarkup = event.data.svgMarkup
+
+          var sanitizedSvg = parseAndSanitizeCustomSvgMarkup(customSvgMarkup)
+          if (!sanitizedSvg) {
+            postMessageToParent({
+              type: "CUSTOM_SVG_ICON_REPLACE_FAILED",
+              requestId: event.data.requestId,
+              selector:
+                typeof customSvgSelector === "string" ? customSvgSelector : "",
+              error: "Invalid custom SVG markup",
+            })
+            return
+          }
+
+          var svgTarget = resolveSvgTargetElement(
+            customSvgSelector,
+            event.data.inspectorSource
+          )
+          if (!svgTarget) {
+            postMessageToParent({
+              type: "CUSTOM_SVG_ICON_REPLACE_FAILED",
+              requestId: event.data.requestId,
+              selector:
+                typeof customSvgSelector === "string" ? customSvgSelector : "",
+              error: "SVG target not found",
+            })
+            return
+          }
+
+          var svgTargets = getSvgSharedTargets(svgTarget, function (candidate) {
+            return (
+              !!candidate &&
+              String(candidate.tagName || "").toLowerCase() === "svg"
+            )
+          })
+          if (svgTargets.length === 0) {
+            svgTargets.push(svgTarget)
+          }
+
+          for (var customIdx = 0; customIdx < svgTargets.length; customIdx++) {
+            var customTarget = svgTargets[customIdx]
+            applyCustomSvgElement(customTarget, sanitizedSvg)
+            if (
+              customTarget.getAttribute("data-inspector-editing") === "true"
+            ) {
+              applyInspectorStyles(customTarget)
+            }
+          }
+
+          postMessageToParent({
+            type: "CUSTOM_SVG_ICON_REPLACED",
+            requestId: event.data.requestId,
+            selector: getStableSelector(svgTarget),
+            targetsCount: svgTargets.length,
+          })
+        } else if (event.data && event.data.type === "REMOVE_ELEMENT") {
+          // Contract: one REMOVE_ELEMENT → save parentSelector, nextSiblingSelector, outerHTML → remove → ELEMENT_REMOVED
+          const { selector, inspectorSource } = event.data
+          let element = resolveMutationElement({
+            selector: selector,
+            inspectorSource: inspectorSource,
+            allowSelectedFallback: !selector,
+            allowEditingFallback: !selector,
+          })
+
+          if (!element) {
+            postMessageToParent({
+              type: "ELEMENT_REMOVAL_FAILED",
+              requestId: event.data.requestId,
+              selector,
+              error: "Element not found",
+            })
+            return
+          }
+
+          if (
+            element === document.body ||
+            element === document.documentElement
+          ) {
+            postMessageToParent({
+              type: "ELEMENT_REMOVAL_FAILED",
+              requestId: event.data.requestId,
+              selector,
+              error: "Cannot remove body or html",
+            })
+            return
+          }
+
+          var parentEl = element.parentElement
+          var parentSelector = parentEl ? getStableSelector(parentEl) : ""
+          var nextSibling = element.nextElementSibling
+          var nextSiblingSelector = nextSibling
+            ? getStableSelector(nextSibling)
+            : null
+          var outerHTML = element.outerHTML
+          var removedMetadata = extractMetadata(element)
+
+          element.remove()
+
+          var 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",
+            requestId: event.data.requestId,
+            selector: selector,
+            parentSelector: parentSelector,
+            nextSiblingSelector: nextSiblingSelector,
+            outerHTML: outerHTML,
+            inspectorSource: removedMetadata
+              ? removedMetadata.inspectorSource
+              : null,
+            tagName: removedMetadata ? removedMetadata.tagName : null,
+            id: removedMetadata ? removedMetadata.id : null,
+            className: removedMetadata ? removedMetadata.className : null,
+            textContent: removedMetadata ? removedMetadata.textContent : null,
+          })
+        } else if (event.data && event.data.type === "RESTORE_ELEMENT") {
+          // Contract: one RESTORE_ELEMENT → find parent, create node from outerHTML, insert before nextSibling or append
+          var _parentSelector = event.data.parentSelector
+          var _nextSiblingSelector = event.data.nextSiblingSelector
+          var _outerHTML = event.data.outerHTML
+
+          if (!_parentSelector || !_outerHTML) {
+            postMessageToParent({
+              type: "ELEMENT_RESTORE_FAILED",
+              requestId: event.data.requestId,
+              error: "Missing parentSelector or outerHTML",
+            })
+            return
+          }
+
+          var parentNode = null
+          try {
+            parentNode = safeQuerySelector(_parentSelector)
+          } catch (e) {}
+
+          var usedBodyFallback = false
+          if (!parentNode && document.body) {
+            parentNode = document.body
+            usedBodyFallback = true
+          }
+          if (!parentNode) {
+            postMessageToParent({
+              type: "ELEMENT_RESTORE_FAILED",
+              requestId: event.data.requestId,
+              error: "Parent not found: " + _parentSelector,
+            })
+            return
+          }
+
+          var nextSiblingNode = null
+          if (!usedBodyFallback && _nextSiblingSelector) {
+            try {
+              nextSiblingNode = safeQuerySelector(_nextSiblingSelector)
+            } catch (e) {}
+          }
+
+          var wrap = document.createElement("div")
+          wrap.innerHTML = _outerHTML
+          var newNode = wrap.firstElementChild
+          if (!newNode) {
+            postMessageToParent({
+              type: "ELEMENT_RESTORE_FAILED",
+              requestId: event.data.requestId,
+              error: "Could not parse outerHTML",
+            })
+            return
+          }
+
+          try {
+            if (nextSiblingNode) {
+              parentNode.insertBefore(newNode, nextSiblingNode)
+            } else {
+              parentNode.appendChild(newNode)
+            }
+          } catch (err) {
+            postMessageToParent({
+              type: "ELEMENT_RESTORE_FAILED",
+              requestId: event.data.requestId,
+              error: err && err.message ? err.message : "Insert failed",
+            })
+            return
+          }
+
+          postMessageToParent({
+            type: "ELEMENT_RESTORED",
+            requestId: event.data.requestId,
+            parentSelector: _parentSelector,
+            restoredSelector: getStableSelector(newNode),
+            usedBodyFallback: usedBodyFallback,
+          })
+        } else if (event.data && event.data.type === "REPLACE_OUTER_HTML") {
+          var replaceSelector =
+            typeof event.data.selector === "string" ? event.data.selector : ""
+          var replaceOuterHTML =
+            typeof event.data.outerHTML === "string" ? event.data.outerHTML : ""
+          var targetEl = resolveMutationElement({
+            selector: replaceSelector,
+            inspectorSource: event.data.inspectorSource,
+            allowSelectedFallback: !replaceSelector,
+            allowEditingFallback: !replaceSelector,
+          })
+          if (!targetEl && !replaceSelector && selectedElements.length > 0) {
+            targetEl = selectedElements[selectedElements.length - 1]
+          }
+
+          if (!targetEl || !replaceOuterHTML) {
+            postMessageToParent({
+              type: "OUTER_HTML_REPLACE_FAILED",
+              requestId: event.data.requestId,
+              selector: replaceSelector,
+              error: !replaceOuterHTML
+                ? "Missing outerHTML payload"
+                : "Target element not found",
+            })
+            return
+          }
+
+          var wrapRE = document.createElement("div")
+          wrapRE.innerHTML = replaceOuterHTML
+          var newEl = wrapRE.firstElementChild
+
+          if (!newEl || !targetEl.parentNode) {
+            postMessageToParent({
+              type: "OUTER_HTML_REPLACE_FAILED",
+              requestId: event.data.requestId,
+              selector: replaceSelector,
+              error: !newEl ? "Could not parse outerHTML" : "Missing parent",
+            })
+            return
+          }
+
+          targetEl.parentNode.replaceChild(newEl, targetEl)
+
+          if (selectedElement === targetEl) {
+            selectedElement = newEl
+            window._inspectorSelectedElement = newEl
+            if (window.__ARCHIE_INSPECTOR__)
+              window.__ARCHIE_INSPECTOR__.selectedElement = newEl
+          }
+
+          if (selectedElements.length > 0) {
+            selectedElements = selectedElements.map(function (candidate) {
+              return candidate === targetEl ? newEl : candidate
+            })
+          }
+
+          if (newEl.getAttribute("data-inspector-editing") === "true") {
+            applyInspectorStyles(newEl)
+          }
+
+          postMessageToParent({
+            type: "OUTER_HTML_REPLACED",
+            requestId: event.data.requestId,
+            selector: getStableSelector(newEl),
+          })
+        } else if (event.data && event.data.type === "REVERT_CHANGES") {
+          // Clean up inspector styles before reloading
+          removeHighlight()
+          removeSelectedBadge()
+          updateSharedHighlights()
+
+          selectedElements.forEach((el) => {
+            el.removeAttribute("data-inspector-editing")
+          })
+          if (selectedElement && !selectedElements.includes(selectedElement)) {
+            selectedElement.removeAttribute("data-inspector-editing")
+          }
+
+          selectedElement = null
+          selectedElements = []
+          window._inspectorSelectedElement = null
+          isInspecting = false
+          isElementSelected = false // Mark that no element is selected
+          lastMultiSelectIntent = false
+          if (document.body) {
+            document.body.style.cursor = ""
+            document.body.style.userSelect = ""
+          }
+          // Reload to restore original DOM state
+          location.reload()
+        } else if (event.data && event.data.type === "EXTERNAL_DRAG_START") {
+          dispatchHostCommand({
+            type: "external-drag-start",
+            component: event.data.component,
+          })
+        } else if (event.data && event.data.type === "EXTERNAL_DRAG_MOVE") {
+          dispatchHostCommand({
+            type: "external-drag-move",
+            clientX: event.data.clientX,
+            clientY: event.data.clientY,
+          })
+        } else if (event.data && event.data.type === "EXTERNAL_DRAG_END") {
+          dispatchHostCommand({
+            type: "external-drag-end",
+            clientX: event.data.clientX,
+            clientY: event.data.clientY,
+          })
+        } else if (event.data && event.data.type === "EXTERNAL_DRAG_CANCEL") {
+          dispatchHostCommand({
+            type: "external-drag-cancel",
+          })
+        }
+      }
+
+      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
+      )
+
+      // Valid content element: not body/docElement, not inspector UI, in document
+      function isValidContentElement(el) {
+        if (!el || el === document.body || el === document.documentElement)
+          return false
+        if (isInspectorElement(el)) return false
+        try {
+          return document.contains(el)
+        } catch (_) {
+          return false
+        }
+      }
+
+      // Selection handler: MUST run on mousedown before blockEvent. We register at load time (before
+      // START_INSPECTION), so we run first in capture phase; we stopImmediatePropagation so blockEvent never runs.
+      const inspectorClickHandler = function (e) {
+        if (!isInspecting) return
+
+        // Prefer e.target: browser already set it to the element under the pointer (e.g. input).
+        // getElementFromPoint is fallback when overlay or stacking returns something else.
+        let target = null
+        const normalizedEventTarget = resolveExactInspectTarget(e.target)
+        if (isValidContentElement(normalizedEventTarget)) {
+          target = normalizedEventTarget
+        }
+        if (!target) {
+          target = getElementFromPoint(e.clientX, e.clientY, e.target)
+        }
+
+        // Skip if invalid or inspector UI element
+        if (!target || !isValidContentElement(target)) {
+          return
+        }
+
+        // Block native behavior
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+
+        // Select the element
+        if (target && target !== overlay && target !== selectedElementBadge) {
+          const isMultiSelect =
+            e.metaKey || e.ctrlKey || lastMultiSelectIntent === true
+
+          // 1. Clear hover highlight immediately to prevent conflict
+          removeHighlight()
+
+          if (isMultiSelect) {
+            // Multi-selection mode
+            const index = selectedElements.indexOf(target)
+            if (index > -1) {
+              // Deselect if already selected
+              selectedElements.splice(index, 1)
+              removeInspectorStyles(target)
+              cleanupElementListeners(target)
+            } else {
+              // Add to selection - apply styles to new element
+              selectedElements.push(target)
+              applyInspectorStyles(target)
+            }
+
+            // Apply styles to ALL selected elements
+            selectedElements.forEach((el) => {
+              if (el) {
+                applyInspectorStyles(el)
+              }
+            })
+          } else {
+            // Single selection mode
+            // Clear ALL previous selections first
+            const previousSelection = [...selectedElements]
+            previousSelection.forEach((el) => {
+              removeInspectorStyles(el)
+              cleanupElementListeners(el)
+            })
+
+            // Reset selection array
+            selectedElements = []
+
+            // Select only the new target
+            selectedElements = [target]
+            applyInspectorStyles(target)
+          }
+
+          // Update single selectedElement reference for compatibility (use the last selected)
+          selectedElement =
+            selectedElements.length > 0
+              ? selectedElements[selectedElements.length - 1]
+              : null
+          window._inspectorSelectedElement = selectedElement
+          if (window.__ARCHIE_INSPECTOR__)
+            window.__ARCHIE_INSPECTOR__.selectedElement = selectedElement
+
+          // Update global flag
+          isElementSelected = selectedElements.length > 0
+
+          // No need to call removeSelectedBadge() here as we handled it above
+          // No need to call removeHighlight() here as we handled it above
+
+          // Re-create badges for all selected elements (if needed for side effects, though createSelectedBadge is empty)
+          selectedElements.forEach((el) => {
+            createSelectedBadge(el)
+          })
+
+          // Update shared highlights BEFORE reapplying styles
+          updateSharedHighlights()
+
+          // CRITICAL: Reapply styles to ALL selected elements AFTER updateSharedHighlights
+          // This ensures all selected elements keep their outline visible
+          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)
+
+          // Extract metadata for all selected elements
+          const metadataArray = selectedElements.map((el) =>
+            extractMetadata(el)
+          )
+
+          // For backward compatibility, if only one element is selected, send it as a single object
+          // Otherwise send the array. This ensures that the chat and other components that expect
+          // a single object for single selection continue to work.
+          const metadataPayload =
+            metadataArray.length === 1 ? metadataArray[0] : metadataArray
+
+          postMessageToParent({
+            type: "ELEMENT_SELECTED",
+            metadata: metadataPayload,
+          })
+          // Keep inspector active - don't set isInspecting = false
+          // User can continue navigating between elements
+        }
+      }
+
+      // Register inspector click handler BEFORE event blockers
+      // This ensures it runs first and can mark events as handled
+      document.addEventListener("mousedown", inspectorClickHandler, true)
+
+      // Block clicks when element is selected but not inspecting
+      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()
+          selectedElements.forEach(function (el) {
+            if (el) removeInspectorStyles(el)
+          })
+          selectedElement = null
+          selectedElements = []
+          window._inspectorSelectedElement = null
+          if (window.__ARCHIE_INSPECTOR__)
+            window.__ARCHIE_INSPECTOR__.selectedElement = null
+          updateSharedHighlights()
+          postMessageToParent({ type: "INSPECTION_CANCELLED" })
+        }
+      })
+    })()
+  }
+  if (typeof window !== "undefined") {
+    window.__ARCHIE_INSPECTOR_RUN__ = runInspector
+    var referrerOrigin = ""
+    try {
+      referrerOrigin = document.referrer ? new URL(document.referrer).origin : ""
+    } catch (error) {
+      referrerOrigin = ""
+    }
+
+    if (window.parent === window) {
+      if (!window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ && window.location.origin) {
+        window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ = window.location.origin
+      }
+      if (
+        !window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__ &&
+        window.location.origin
+      ) {
+        window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__ = [window.location.origin]
+      }
+    } else {
+      if (!window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ && referrerOrigin) {
+        window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ = referrerOrigin
+      }
+      if (!window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__ && referrerOrigin) {
+        window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__ = [referrerOrigin]
+      }
+    }
+
+    var hasAllowedOrigins =
+      Array.isArray(window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__) &&
+      window.__ARCHIE_INSPECTOR_ALLOWED_ORIGINS__.length > 0
+    var hasAllowedPatterns =
+      Array.isArray(window.__ARCHIE_INSPECTOR_ALLOWED_ORIGIN_PATTERNS__) &&
+      window.__ARCHIE_INSPECTOR_ALLOWED_ORIGIN_PATTERNS__.length > 0
+
+    if (
+      window.parent === window ||
+      window.__ARCHIE_INSPECTOR_TARGET_ORIGIN__ ||
+      hasAllowedOrigins ||
+      hasAllowedPatterns
+    ) {
+      runInspector()
+    }
+  }
+})()