@archie/devtools 0.0.47 → 0.1.0

package/dist/inspector.standalone.js

@@ -1725,10 +1725,96 @@
             // asking blindly (and treating silence as "still unknown", never
             // as "reported empty") is the correct posture.
             capabilitiesQuery: true,
+            // vid-identity migration (protocol 1.x, `@8base-archie/editor-protocol`):
+            // this script reads `data-vid`/`meta.vid` as the node's identity
+            // (`resolveNodeVid` below) and assembles a `NodeMeta` object for
+            // `ELEMENT_SELECTED`, and it emits `REFUSED` instead of silently
+            // accepting a drag/drop this package's own policy would reject.
+            // Hosts MUST feature-detect all three: a frozen pre-migration
+            // inspector has none of them, and its `ELEMENT_SELECTED` has no
+            // `vid`/`nodeMeta` fields at all.
+            vidIdentity: true,
+            nodeMeta: true,
+            refusals: true,
           },
         }
       }
 
+      // `@8base-archie/editor-protocol`'s `PROTOCOL_VERSION` (semver,
+      // major-only compatibility). This script cannot `import` the shared
+      // package (vanilla IIFE, CDN-served) — keep this literal in sync BY
+      // HAND with that package's `src/version.ts` whenever the wire shape of
+      // `RuntimeMessage`/`NodeMeta`/`Op` changes. Reported as a SEPARATE key
+      // from the existing numeric `protocolVersion` above (never overwritten
+      // — archie-app's `runtime-compatibility.ts` parses that field as a
+      // number and compares it with strict equality; colliding the two would
+      // silently break every existing compatibility check).
+      var EDITOR_PROTOCOL_VERSION = "1.0.0"
+
+      // vid-identity migration: `/^[a-z0-9]{6,8}$/`, mirrors
+      // `@8base-archie/editor-protocol`'s `VID_PATTERN` — kept in parity by
+      // hand for the same reason as `EDITOR_PROTOCOL_VERSION` above.
+      var VID_PATTERN = /^[a-z0-9]{6,8}$/
+
+      /**
+       * This node's `vid` — the fiber-resolved (usage-projected) meta's
+       * `vid` first, the DOM `data-vid` attribute next, or null. Mirrors
+       * `node-key.ts`'s `getNodeKeyFromElement` precedence for the vid-only
+       * portion of it (this script has no legacy-nodeId/runtime-key
+       * fallback to offer here — callers that need a key for every element,
+       * vid or not, keep using their own `inspectorSource` resolution).
+       */
+      function resolveNodeVid(el, meta) {
+        if (meta && typeof meta.vid === "string" && VID_PATTERN.test(meta.vid)) {
+          return meta.vid
+        }
+        if (el && typeof el.getAttribute === "function") {
+          var domVid = el.getAttribute("data-vid")
+          if (domVid && VID_PATTERN.test(domVid)) return domVid
+        }
+        return null
+      }
+
+      /**
+       * Assemble this node's `NodeMeta` (`@8base-archie/editor-protocol`)
+       * from its `EditorMeta`, or null when there is no `vid` to key it by.
+       * Mirrors `fiber-bridge.ts`'s `getNodeMeta` — kept in parity by hand,
+       * same reason as `EDITOR_PROTOCOL_VERSION` above (this script cannot
+       * import the TS module or run its `NodeMetaSchema.safeParse`).
+       */
+      function resolveNodeMeta(el, meta) {
+        var vid = resolveNodeVid(el, meta)
+        if (!vid) return null
+        var nodeMeta = {
+          vid: vid,
+          file: (meta && meta.file) || "",
+          dynamicType: (meta && meta.dynamicType) || "STATIC",
+          isKitOrigin: !!(meta && (meta.isKitOrigin || isTemplateFrame(meta))),
+          isChrome: !!(meta && meta.isChrome),
+          containerKind: (meta && meta.containerKind) || "none",
+        }
+        if (meta && meta.componentName) nodeMeta.component = meta.componentName
+        if (meta && meta.lockReason) nodeMeta.lockReason = meta.lockReason
+        return nodeMeta
+      }
+
+      /**
+       * Emit `REFUSED` (vid-identity migration) instead of letting a
+       * drag/drop the runtime's own policy would reject proceed silently —
+       * the gap `docs/deploy-order.md`-adjacent decision this capability bit
+       * documents: "today the drop is accepted and the host discards it
+       * after the fact; that must stop."
+       */
+      function refuseNode(code, cause, vid) {
+        postMessageToParent({
+          source: "archie-devtools",
+          type: "REFUSED",
+          code: code,
+          cause: cause,
+          vid: vid || undefined,
+        })
+      }
+
       /**
        * Emit the capabilities payload as `CAPABILITIES_RESULT`.
        *
@@ -1745,6 +1831,7 @@
           reason: typeof reason === "string" && reason !== "" ? reason : null,
           version: handshake.version,
           protocolVersion: handshake.protocolVersion,
+          editorProtocolVersion: EDITOR_PROTOCOL_VERSION,
           capabilities: handshake.capabilities,
         })
       }
@@ -1755,6 +1842,7 @@
         timestamp: Date.now(),
         version: initialHandshake.version,
         protocolVersion: initialHandshake.protocolVersion,
+        editorProtocolVersion: EDITOR_PROTOCOL_VERSION,
         capabilities: initialHandshake.capabilities,
       })
 
@@ -3069,25 +3157,254 @@
         return result
       }
 
-      /** Same-origin CSS text, concatenated. Cross-origin sheets throw on
-       *  `cssRules` and are skipped — their styling is simply absent from the
-       *  capture, which is why the host treats it as best-effort. */
-      function collectSameOriginCss() {
-        var chunks = []
-        for (var i = 0; i < document.styleSheets.length; i++) {
-          var sheet = document.styleSheets[i]
-          var rules = null
-          try {
-            rules = sheet.cssRules
-          } catch (error) {
-            continue
-          }
-          if (!rules) continue
-          for (var j = 0; j < rules.length; j++) {
-            chunks.push(rules[j].cssText)
-          }
+      var CSS_INLINE_TIMEOUT_MS = 2000
+      var CSS_URL_RE = /url\(\s*(['"]?)([^'")]+)\1\s*\)/g
+
+      /** Resolves once `promise` settles, or once `ms` elapses — whichever
+       *  first — falling back to `fallbackValue` instead of rejecting. Used
+       *  to bound best-effort work (font/url inlining) that must never block
+       *  the capture past a short budget. */
+      function withTimeout(promise, ms, fallbackValue) {
+        return new Promise(function (resolve) {
+          var settled = false
+          var timer = setTimeout(function () {
+            if (settled) return
+            settled = true
+            resolve(fallbackValue)
+          }, ms)
+          promise.then(
+            function (value) {
+              if (settled) return
+              settled = true
+              clearTimeout(timer)
+              resolve(value)
+            },
+            function () {
+              if (settled) return
+              settled = true
+              clearTimeout(timer)
+              resolve(fallbackValue)
+            }
+          )
+        })
+      }
+
+      // Duck-typed against CSSOM's numeric `type` (MEDIA_RULE=4, IMPORT_RULE=3,
+      // FONT_FACE_RULE=5) because CSSMediaRule/CSSImportRule/CSSFontFaceRule
+      // are not guaranteed to exist in every test DOM (e.g. jsdom).
+      function isMediaRule(rule) {
+        if (typeof CSSMediaRule !== "undefined" && rule instanceof CSSMediaRule) {
+          return true
+        }
+        return !!(rule && rule.media && rule.cssRules && rule.type === 4)
+      }
+
+      function isImportRule(rule) {
+        if (typeof CSSImportRule !== "undefined" && rule instanceof CSSImportRule) {
+          return true
         }
-        return chunks.join("\n")
+        return !!(rule && rule.styleSheet && rule.type === 3)
+      }
+
+      function isFontFaceRule(rule) {
+        if (typeof CSSFontFaceRule !== "undefined" && rule instanceof CSSFontFaceRule) {
+          return true
+        }
+        return !!(rule && rule.type === 5)
+      }
+
+      /** The at-rule keyword of `rule.cssText` (e.g. "layer", "supports"),
+       *  lowercased. Used where a rule's numeric `.type` is unreliable — the
+       *  CSSOM spec never assigned legacy type constants to rules added
+       *  after `@supports` (`@layer`, `@container`, `@starting-style`, ...),
+       *  so they all report `type === 0`. */
+      function ruleAtKeyword(rule) {
+        var text = rule && rule.cssText ? rule.cssText : ""
+        var match = /^\s*@(?:-webkit-|-moz-|-ms-|-o-)?([a-zA-Z-]+)/.exec(text)
+        return match ? match[1].toLowerCase() : ""
+      }
+
+      /** A rule that carries its own declarations/content and must always be
+       *  pushed verbatim, never treated as a group to recurse into — even
+       *  though some of these also expose `.cssRules`:
+       *  - `CSSStyleRule` (type 1) exposes `.cssRules` in real browsers for
+       *    CSS nesting (an empty list on an un-nested rule); treating that
+       *    as a grouping rule renders `.foo {}` with the declarations
+       *    dropped. Nested `@media` inside a nested style rule is a rare
+       *    case and is left as-is inside `cssText` rather than recursed.
+       *  - `@keyframes` / `@page` also expose `.cssRules`, but their nested
+       *    rules are keyframe selectors / margin boxes, not media-sensitive
+       *    content.
+       *  `.style` existing is a reliable signal across all of these (and
+       *  `CSSKeyframeRule`, type 8) even where `.type` duck-typing can't be
+       *  trusted. */
+      function isStyleLikeLeaf(rule) {
+        if (typeof CSSStyleRule !== "undefined" && rule instanceof CSSStyleRule) {
+          return true
+        }
+        if (
+          rule &&
+          (rule.type === 1 || rule.type === 6 || rule.type === 7 || rule.type === 8)
+        ) {
+          return true
+        }
+        return !!(rule && rule.style)
+      }
+
+      var GROUPING_AT_KEYWORDS = {
+        layer: true,
+        supports: true,
+        container: true,
+        scope: true,
+        "starting-style": true,
+        document: true,
+      }
+
+      /** Positive test for "safe to recurse into and rebuild": only at-rules
+       *  whose sole job is grouping other rules under a condition/namespace
+       *  (`@layer`, `@supports`, `@container`, `@scope`, `@starting-style`,
+       *  `@document`), and only when they actually carry nested rules — a
+       *  `@layer a, b;` statement form has no `cssRules` and falls through
+       *  to the verbatim leaf branch instead. Everything else defaults to
+       *  verbatim, rather than recursing by default, precisely because
+       *  `CSSStyleRule` also exposes `cssRules` (see `isStyleLikeLeaf`). */
+      function isGroupingRule(rule) {
+        if (!rule || !rule.cssRules) return false
+        if (typeof CSSStyleRule !== "undefined" && rule instanceof CSSStyleRule) {
+          return false
+        }
+        return !!GROUPING_AT_KEYWORDS[ruleAtKeyword(rule)]
+      }
+
+      /** The rule's header text up to (not including) its opening brace,
+       *  e.g. `@layer utilities ` or `@supports (display: grid) `. Used to
+       *  rebuild a grouping at-rule around its flattened children. */
+      function headerTextOf(rule) {
+        var text = rule && rule.cssText ? rule.cssText : ""
+        var braceIndex = text.indexOf("{")
+        return braceIndex === -1 ? text : text.slice(0, braceIndex)
+      }
+
+      /** Renders a node produced by `flattenStyleRules` back into CSS text.
+       *  A "slot" defers to `pieces[index]`, which a font-face/cross-origin
+       *  inlining job may still be mutating when this runs — see
+       *  `collectCaptureCss`'s `CSS_INLINE_TIMEOUT_MS` race. */
+      function renderNode(node, pieces) {
+        if (typeof node === "string") return node
+        if (node.kind === "slot") return pieces[node.index]
+        if (node.kind === "group") {
+          return node.header + "{" + renderNodes(node.children, pieces) + "}"
+        }
+        return ""
+      }
+
+      function renderNodes(nodes, pieces) {
+        var texts = []
+        for (var i = 0; i < nodes.length; i++) {
+          texts.push(renderNode(nodes[i], pieces))
+        }
+        return texts.join("\n")
+      }
+
+      /**
+       * Flattens `rules` into a tree of plain-string leaves, font-face "slot"
+       * placeholders (resolved later by URL-inlining — see `pieces` in
+       * `collectCaptureCss`), and group nodes that preserve a non-media
+       * at-rule's own semantics while still flattening any `@media` nested
+       * inside it. This last case matters in practice: Tailwind v4 emits
+       * responsive utilities as `@layer utilities { @media (min-width: ...)
+       * { ... } }`, so a `@layer`/`@supports`/`@container` wrapper has to be
+       * rebuilt around its recursed children rather than pushed as opaque
+       * `cssText` — otherwise the nested `@media` inside it would still be
+       * evaluated against the tiny rasterized SVG instead of the live
+       * viewport.
+       *
+       * In a rasterized SVG, `@media` is evaluated against the SVG image's
+       * own (tiny) intrinsic size, not the live viewport — so a non-matching
+       * query is dropped up front and a matching one is inlined (unwrapped),
+       * using the live `window.matchMedia` as the source of truth. `@import`
+       * is followed into its target sheet the same way; a cross-origin
+       * import throws on `.styleSheet.cssRules` and is dropped, same as any
+       * other unreachable cross-origin CSS. A rule with no `cssRules` at all
+       * (e.g. a plain style rule, or `@layer a, b;`'s statement form) is
+       * pushed as a plain string leaf.
+       */
+      function flattenStyleRules(rules, sheetHref, fetchCache, enhancementJobs, pieces) {
+        var nodes = []
+        if (!rules) return nodes
+        for (var i = 0; i < rules.length; i++) {
+          ;(function (rule) {
+            if (isMediaRule(rule)) {
+              var conditionText =
+                rule.conditionText || (rule.media && rule.media.mediaText) || ""
+              var matches = true
+              try {
+                matches = window.matchMedia(conditionText).matches
+              } catch (error) {
+                matches = true
+              }
+              if (matches) {
+                var mediaChildren = flattenStyleRules(
+                  rule.cssRules,
+                  sheetHref,
+                  fetchCache,
+                  enhancementJobs,
+                  pieces
+                )
+                for (var m = 0; m < mediaChildren.length; m++) {
+                  nodes.push(mediaChildren[m])
+                }
+              }
+            } else if (isImportRule(rule)) {
+              try {
+                var importedChildren = flattenStyleRules(
+                  rule.styleSheet.cssRules,
+                  rule.href || sheetHref,
+                  fetchCache,
+                  enhancementJobs,
+                  pieces
+                )
+                for (var k = 0; k < importedChildren.length; k++) {
+                  nodes.push(importedChildren[k])
+                }
+              } catch (error) {
+                // cross-origin @import — best-effort, same as other
+                // unreachable cross-origin CSS.
+              }
+            } else if (isFontFaceRule(rule)) {
+              var index = pieces.length
+              pieces.push(rule.cssText)
+              enhancementJobs.push(
+                inlineCssUrls(
+                  rule.cssText,
+                  sheetHref || document.baseURI,
+                  fetchCache
+                ).then(function (text) {
+                  pieces[index] = text
+                })
+              )
+              nodes.push({ kind: "slot", index: index })
+            } else if (isStyleLikeLeaf(rule)) {
+              nodes.push(rule.cssText)
+            } else if (isGroupingRule(rule)) {
+              var groupChildren = flattenStyleRules(
+                rule.cssRules,
+                sheetHref,
+                fetchCache,
+                enhancementJobs,
+                pieces
+              )
+              nodes.push({
+                kind: "group",
+                header: headerTextOf(rule),
+                children: groupChildren,
+              })
+            } else {
+              nodes.push(rule.cssText)
+            }
+          })(rules[i])
+        }
+        return nodes
       }
 
       function fetchAsDataUrl(url) {
@@ -3108,6 +3425,168 @@
           })
       }
 
+      function fetchAsDataUrlCors(url) {
+        return fetch(url, { mode: "cors" })
+          .then(function (response) {
+            if (!response.ok) throw new Error("bad status")
+            return response.blob()
+          })
+          .then(function (blob) {
+            return new Promise(function (resolve, reject) {
+              var reader = new FileReader()
+              reader.onload = function () {
+                resolve(String(reader.result))
+              }
+              reader.onerror = reject
+              reader.readAsDataURL(blob)
+            })
+          })
+          .catch(function () {
+            return null
+          })
+      }
+
+      function collectCssUrls(cssText) {
+        var urls = []
+        var seen = {}
+        var match
+        CSS_URL_RE.lastIndex = 0
+        while ((match = CSS_URL_RE.exec(cssText))) {
+          var raw = match[2]
+          if (!raw || raw.indexOf("data:") === 0 || seen[raw]) continue
+          seen[raw] = true
+          urls.push(raw)
+        }
+        return urls
+      }
+
+      /** Replaces every `url(...)` in `cssText` with a `data:` URL, fetched
+       *  cross-origin and deduped via `fetchCache` (shared across calls so
+       *  the same font file is only ever fetched once). A URL that fails to
+       *  resolve or fetch is left as-is rather than aborting the rest. */
+      function inlineCssUrls(cssText, baseHref, fetchCache) {
+        var urls = collectCssUrls(cssText)
+        if (!urls.length) return Promise.resolve(cssText)
+
+        var resolved = {}
+        var jobs = []
+        for (var i = 0; i < urls.length; i++) {
+          ;(function (raw) {
+            var absolute
+            try {
+              absolute = new URL(raw, baseHref).href
+            } catch (error) {
+              return
+            }
+            if (!fetchCache[absolute]) {
+              fetchCache[absolute] = fetchAsDataUrlCors(absolute)
+            }
+            jobs.push(
+              fetchCache[absolute].then(function (dataUrl) {
+                resolved[absolute] = dataUrl
+              })
+            )
+          })(urls[i])
+        }
+
+        return Promise.all(jobs).then(function () {
+          return cssText.replace(CSS_URL_RE, function (full, quote, raw) {
+            if (!raw || raw.indexOf("data:") === 0) return full
+            var absolute
+            try {
+              absolute = new URL(raw, baseHref).href
+            } catch (error) {
+              return full
+            }
+            var dataUrl = resolved[absolute]
+            return dataUrl ? "url(" + dataUrl + ")" : full
+          })
+        })
+      }
+
+      /**
+       * CSS text for the capture clone: same-origin sheets have their
+       * `@media` flattened against the LIVE viewport (see `flattenStyleRules`)
+       * and `:root` rewritten to `html`, because inside the rasterized SVG
+       * the root element is the `<svg>`, not `<html>`. Cross-origin sheets
+       * throw on `cssRules`, so their raw text is fetched instead and every
+       * `url(...)` inlined as a `data:` URL (same-origin `@font-face` rules
+       * get the same treatment); this fetching work is best-effort and
+       * bounded by `CSS_INLINE_TIMEOUT_MS` so a slow or unreachable font
+       * never delays the capture — rules still pending when the budget runs
+       * out simply keep their original (uninlined) `url(...)`.
+       */
+      function collectCaptureCss() {
+        var fetchCache = {}
+        var pieces = []
+        var enhancementJobs = []
+        var topNodes = []
+
+        for (var i = 0; i < document.styleSheets.length; i++) {
+          ;(function (sheet) {
+            var rules = null
+            try {
+              rules = sheet.cssRules
+            } catch (error) {
+              rules = null
+            }
+
+            if (rules) {
+              var nodes = flattenStyleRules(
+                rules,
+                sheet.href,
+                fetchCache,
+                enhancementJobs,
+                pieces
+              )
+              for (var n = 0; n < nodes.length; n++) topNodes.push(nodes[n])
+              return
+            }
+
+            if (!sheet.href) return
+
+            var index = pieces.length
+            pieces.push("")
+            topNodes.push({ kind: "slot", index: index })
+            enhancementJobs.push(
+              fetch(sheet.href, { mode: "cors" })
+                .then(function (response) {
+                  if (!response.ok) throw new Error("bad status")
+                  return response.text()
+                })
+                .then(function (text) {
+                  return inlineCssUrls(text, sheet.href, fetchCache)
+                })
+                .then(function (text) {
+                  // Best-effort only: this raw fetched text is not run back
+                  // through flattenStyleRules, so any @media/@layer nesting
+                  // inside a blocked cross-origin sheet is left unflattened.
+                  pieces[index] = text
+                })
+                .catch(function () {
+                  // cross-origin sheet unreachable — left blank, same as
+                  // the previous best-effort behavior.
+                })
+            )
+          })(document.styleSheets[i])
+        }
+
+        return withTimeout(
+          Promise.all(enhancementJobs),
+          CSS_INLINE_TIMEOUT_MS,
+          null
+        ).then(function () {
+          return renderNodes(topNodes, pieces).replace(/:root\b/g, "html")
+        })
+      }
+
+      // Test hook only — lets inspector.annotation.test.ts assert on the
+      // collected CSS text directly, since the full capture pipeline needs a
+      // browser Image decoder no test DOM provides.
+      if (window.__ARCHIE_INSPECTOR__) {
+        window.__ARCHIE_INSPECTOR__.collectCaptureCss = collectCaptureCss
+      }
+
       /** Rasterizing an SVG cannot fetch subresources, so same-origin <img>
        *  sources are inlined first. Failures leave the image blank rather
        *  than aborting the whole capture. */
@@ -3141,15 +3620,22 @@
 
       /**
        * Rasterizes the CURRENT viewport into a PNG data URL via an
-       * `<svg><foreignObject>` round-trip. Best-effort by construction: web
-       * fonts, cross-origin images and <canvas> pixels do not survive it. The
-       * host composes the result with the user's drawing, and falls back to
-       * the drawing alone when this rejects.
+       * `<svg><foreignObject>` round-trip. Best-effort by construction:
+       * cross-origin images and <canvas> pixels do not survive it, and web
+       * fonts survive only within `CSS_INLINE_TIMEOUT_MS`. The host composes
+       * the result with the user's drawing, and falls back to the drawing
+       * alone when this rejects.
        */
       function captureViewportDataUrl(pixelRatio) {
         var width = window.innerWidth
         var height = window.innerHeight
         var ratio = Math.min(Math.max(Number(pixelRatio) || 1, 1), 2)
+        // The rasterized SVG's root element is the `<svg>` itself, not
+        // `<html>`, so `rem` would otherwise resolve against the UA default
+        // instead of the live page's root font-size.
+        var rootFontSize = window.getComputedStyle(
+          document.documentElement
+        ).fontSize
 
         var clone = document.documentElement.cloneNode(true)
         var strip = clone.querySelectorAll(
@@ -3159,75 +3645,79 @@
           if (strip[i].parentNode) strip[i].parentNode.removeChild(strip[i])
         }
 
-        var styleEl = document.createElement("style")
-        styleEl.textContent = collectSameOriginCss()
-        var head = clone.querySelector("head")
-        if (head) head.appendChild(styleEl)
-        else clone.insertBefore(styleEl, clone.firstChild)
-
-        return inlineImages(clone).then(function () {
-          var markup = new XMLSerializer().serializeToString(clone)
-          var svg =
-            '<svg xmlns="http://www.w3.org/2000/svg" width="' +
-            width +
-            '" height="' +
-            height +
-            '">' +
-            '<foreignObject x="0" y="0" width="' +
-            width +
-            '" height="' +
-            height +
-            '">' +
-            '<div xmlns="http://www.w3.org/1999/xhtml" style="width:' +
-            width +
-            "px;transform:translate(" +
-            -window.scrollX +
-            "px," +
-            -window.scrollY +
-            'px)">' +
-            markup +
-            "</div></foreignObject></svg>"
-
-          return new Promise(function (resolve, reject) {
-            var image = new Image()
-            // An SVG the browser refuses to decode can fire NEITHER onload nor
-            // onerror (malformed serialization, blocked subresource). Without
-            // this guard the host would sit on the request until its own
-            // timeout with no diagnostic; the deadline turns that into an
-            // explicit VIEWPORT_CAPTURE_FAILED.
-            var settled = false
-            var deadline = setTimeout(function () {
-              if (settled) return
-              settled = true
-              reject(new Error("svg rasterization timed out"))
-            }, ANNOTATION_CAPTURE_TIMEOUT_MS)
-            var finish = function (fn, value) {
-              if (settled) return
-              settled = true
-              clearTimeout(deadline)
-              fn(value)
-            }
-            image.onload = function () {
-              try {
-                var canvas = document.createElement("canvas")
-                canvas.width = Math.round(width * ratio)
-                canvas.height = Math.round(height * ratio)
-                var context = canvas.getContext("2d")
-                context.fillStyle = "#ffffff"
-                context.fillRect(0, 0, canvas.width, canvas.height)
-                context.drawImage(image, 0, 0, canvas.width, canvas.height)
-                finish(resolve, canvas.toDataURL("image/png"))
-              } catch (error) {
-                finish(reject, error)
+        return Promise.all([collectCaptureCss(), inlineImages(clone)]).then(
+          function (results) {
+            var styleEl = document.createElement("style")
+            styleEl.textContent = results[0]
+            var head = clone.querySelector("head")
+            if (head) head.appendChild(styleEl)
+            else clone.insertBefore(styleEl, clone.firstChild)
+
+            var markup = new XMLSerializer().serializeToString(clone)
+            var svg =
+              '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+              width +
+              '" height="' +
+              height +
+              '" style="font-size:' +
+              rootFontSize +
+              '">' +
+              '<foreignObject x="0" y="0" width="' +
+              width +
+              '" height="' +
+              height +
+              '">' +
+              '<div xmlns="http://www.w3.org/1999/xhtml" style="width:' +
+              width +
+              "px;transform:translate(" +
+              -window.scrollX +
+              "px," +
+              -window.scrollY +
+              'px)">' +
+              markup +
+              "</div></foreignObject></svg>"
+
+            return new Promise(function (resolve, reject) {
+              var image = new Image()
+              // An SVG the browser refuses to decode can fire NEITHER onload nor
+              // onerror (malformed serialization, blocked subresource). Without
+              // this guard the host would sit on the request until its own
+              // timeout with no diagnostic; the deadline turns that into an
+              // explicit VIEWPORT_CAPTURE_FAILED.
+              var settled = false
+              var deadline = setTimeout(function () {
+                if (settled) return
+                settled = true
+                reject(new Error("svg rasterization timed out"))
+              }, ANNOTATION_CAPTURE_TIMEOUT_MS)
+              var finish = function (fn, value) {
+                if (settled) return
+                settled = true
+                clearTimeout(deadline)
+                fn(value)
               }
-            }
-            image.onerror = function () {
-              finish(reject, new Error("svg rasterization failed"))
-            }
-            image.src =
-              "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg)
-          })
-        })
+              image.onload = function () {
+                try {
+                  var canvas = document.createElement("canvas")
+                  canvas.width = Math.round(width * ratio)
+                  canvas.height = Math.round(height * ratio)
+                  var context = canvas.getContext("2d")
+                  context.fillStyle = "#ffffff"
+                  context.fillRect(0, 0, canvas.width, canvas.height)
+                  context.drawImage(image, 0, 0, canvas.width, canvas.height)
+                  finish(resolve, canvas.toDataURL("image/png"))
+                } catch (error) {
+                  finish(reject, error)
+                }
+              }
+              image.onerror = function () {
+                finish(reject, new Error("svg rasterization failed"))
+              }
+              image.src =
+                "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg)
+            })
+          }
+        )
       }
 
       function extractMetadata(element) {
@@ -3279,6 +3769,12 @@
           // this script's version. The slot string is opaque here; validating it
           // against kit-runtime's `slot-vocabulary` is the host's job.
           editorMeta: editorMeta ? editorMeta.meta : null,
+          // vid-identity migration — `vid`/`nodeMeta` derived from the SAME
+          // meta as `editorMeta` above (`resolveNodeVid`/`resolveNodeMeta`,
+          // mirroring `node-key.ts`/`fiber-bridge.ts`'s `getNodeMeta`). Both
+          // are null for a legacy node with no `data-vid`.
+          vid: resolveNodeVid(element, editorMeta ? editorMeta.meta : null),
+          nodeMeta: resolveNodeMeta(element, editorMeta ? editorMeta.meta : null),
           // ARCH-883 F2 — the two things the host cannot derive from
           // `editorMeta` alone (SDD §2.9):
           //
@@ -3817,6 +4313,45 @@
           return
         }
 
+        // `data-vid` identity migration — the DnD runtime's `drag-started`/
+        // `drag-refused` events (`useDragLifecycle.ts`, `host-bridge.ts`)
+        // otherwise die inside the iframe: nothing relayed them to the host.
+        // Reuses `refuseNode` for `REFUSED` so the wire shape is the SAME
+        // one produced by every other refusal path in this file (never a
+        // second, drifting literal) and validates against
+        // `RuntimeMessageSchema` (`@8base-archie/editor-protocol`).
+        if (detail.type === "drag-refused") {
+          refuseNode(detail.code, detail.cause, detail.vid)
+          return
+        }
+
+        if (detail.type === "drag-started") {
+          // `DragStartMessageSchema.targetVid` is REQUIRED (not optional) —
+          // unlike `REFUSED.vid`. A legacy (no `data-vid`) page's dragged
+          // node has no vid to report, so the message cannot be made to
+          // satisfy the schema; skip the relay rather than send a shape
+          // that fails validation on the host. `droppable` is filtered to
+          // well-formed vids for the same reason — the projection's own ids
+          // can be legacy `file:line:col:componentName` strings, which the
+          // schema's `z.array(Vid)` would reject.
+          if (typeof detail.targetVid !== "string" || !VID_PATTERN.test(detail.targetVid)) {
+            veTrace("runtime-event:drag-started:skipped-no-vid", {})
+            return
+          }
+          var droppableVids = Array.isArray(detail.droppable)
+            ? detail.droppable.filter(function (id) {
+                return typeof id === "string" && VID_PATTERN.test(id)
+              })
+            : []
+          postMessageToParent({
+            source: "archie-devtools",
+            type: "DRAG_START",
+            targetVid: detail.targetVid,
+            droppable: droppableVids,
+          })
+          return
+        }
+
         // ARCH-1367 F6 — attach the drop container's editor meta chain to a
         // container descriptor ({selector, nodeId, …}). Shared by the
         // `element-inserted` relay AND the `arrange-session-changed` relay: