@archie/devtools 0.0.47 → 0.0.48

package/dist/inspector.standalone.js

@@ -3069,25 +3069,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 !!(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 chunks.join("\n")
+        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 +3337,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 +3532,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 +3557,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",