@goflag/cli 0.2.11 → 0.2.12

package/dist/{chunk-CWEJ6EXT.js → chunk-QKXUKHXB.js}

@@ -67,15 +67,17 @@ function parseJsonLdScripts(scripts) {
   }
   return blocks;
 }
+var MAX_DEPTH = 100;
 function extractTypes(node) {
   const out = /* @__PURE__ */ new Set();
-  visit(node, out);
+  visit(node, out, 0);
   return [...out];
 }
-function visit(node, out) {
+function visit(node, out, depth) {
   if (node === null || node === void 0) return;
+  if (depth > MAX_DEPTH) return;
   if (Array.isArray(node)) {
-    for (const item of node) visit(item, out);
+    for (const item of node) visit(item, out, depth + 1);
     return;
   }
   if (typeof node !== "object") return;
@@ -90,11 +92,11 @@ function visit(node, out) {
   }
   const graph = obj["@graph"];
   if (Array.isArray(graph)) {
-    for (const item of graph) visit(item, out);
+    for (const item of graph) visit(item, out, depth + 1);
   }
   for (const [k, v] of Object.entries(obj)) {
     if (k === "@type" || k === "@graph") continue;
-    if (v && typeof v === "object") visit(v, out);
+    if (v && typeof v === "object") visit(v, out, depth + 1);
   }
 }
 function decodeHtmlEntities(s) {
@@ -1433,14 +1435,14 @@ function normalise(value) {
   return value.trim().toLowerCase().split(/\s+/).sort().join(" ");
 }
 function sameAsset(href, src) {
-  const pathOf = (value) => {
+  const pathOf2 = (value) => {
     try {
       return new URL(value, "https://goflag.invalid").pathname;
     } catch {
       return value.split("?")[0] ?? value;
     }
   };
-  return pathOf(href) === pathOf(src);
+  return pathOf2(href) === pathOf2(src);
 }
 function hasOpenGraph(ex) {
   return Boolean(
@@ -1834,6 +1836,46 @@ var ogImageAlt = {
     };
   }
 };
+var ogImageAltCaption = {
+  id: "og.image.alt.caption",
+  kind: "boolean",
+  category: "opengraph",
+  severity: "info",
+  title: "`og:image:alt` describes the image, it does not repeat the title",
+  why: "The protocol asks for a description of what is in the image, and says in the same breath that it is not a caption. A copy of the title is the one value that is always available and never describes anything: a reader who cannot see the card is handed the same words twice and learns nothing about the picture. It also satisfies `og.image.alt` forever, which is why it needs an id of its own.",
+  rigor: "guideline",
+  sources: ["ogp"],
+  reads: ["openGraph.images", "openGraph.title", "document.title"],
+  expected: "an `og:image:alt` that says something the title does not",
+  relates: ["og.image.alt", "og.image.representative"],
+  fix: {
+    title: "Say what the card shows, not what the page is called",
+    snippet: [
+      "// The card is a title on a background. The alt says so \u2014 once, from a",
+      "// template, so every page gets one and none of them is the title alone.",
+      "const ogAlt = (title: string) => `The title \u201C${title}\u201D on a dark preview card.`;"
+    ].join("\n"),
+    language: "ts"
+  },
+  evaluate: (ex) => {
+    const described = ex.openGraph.images.filter((image) => image.alt?.value.trim());
+    if (described.length === 0) return { status: "na", observed: null };
+    const title = (ex.openGraph.title?.value ?? ex.document.title?.value ?? "").trim();
+    if (title === "") return { status: "na", observed: null };
+    const observed = described.map((image) => ({
+      url: image.url.value,
+      alt: image.alt?.value ?? ""
+    }));
+    const captions = observed.filter((image) => image.alt.trim() === title);
+    if (captions.length === 0) return { status: "pass", observed };
+    return {
+      status: "fail",
+      observed,
+      message: captions.length === observed.length ? "`og:image:alt` repeats the title instead of describing the image." : `${captions.length} of ${observed.length} \`og:image:alt\` values repeat the title.`,
+      origin: { kind: "meta", property: "og:image:alt" }
+    };
+  }
+};
 var ogImageDimensions = {
   id: "og.image.dimensions",
   kind: "boolean",
@@ -2134,6 +2176,57 @@ var ogImageReachable = {
     };
   }
 };
+var ogImageSizesMismatch = {
+  id: "og.image.sizes-mismatch",
+  kind: "boolean",
+  category: "opengraph",
+  severity: "warning",
+  title: "`og:image:width` and `og:image:height` must be the image's real size",
+  why: "The declared size is what a crawler lays the card out with before it has the file, which is the whole reason `og.image.dimensions` asks for it. A wrong one is therefore worse than none: the crawler reserves a shape the image does not have, and the card is letterboxed or cropped on the first share \u2014 the one that matters most.\n\nIt is also the declaration that blinds every other check. `og.image.ratio` reads these two numbers and refuses to fetch, so an invented 1200\xD7630 scores 1.9 and passes over an image that is square. Found on a site whose cover art is 1024\xD71024 and one of whose covers is a 337-byte 1\xD71 placeholder, all three declared 1200\xD7630 by a library that had never looked at them.",
+  rigor: "guideline",
+  sources: ["ogp", "meta-og-sharing"],
+  reads: ["openGraph.images", "assets"],
+  expected: "declared dimensions equal to the file's own",
+  relates: ["og.image.dimensions", "og.image.ratio", "og.image.reachable"],
+  fix: {
+    title: "Measure the image, or let the file convention do it",
+    snippet: [
+      "// app/\u2026/opengraph-image.tsx \u2014 `size` is the truth and the declaration at once",
+      "export const size = { width: 1200, height: 630 };",
+      "",
+      "// Naming a file instead? Then the numbers are that file's, not a default.",
+      "openGraph: { images: [{ url: cover.url, width: cover.width, height: cover.height }] }"
+    ].join("\n"),
+    language: "tsx"
+  },
+  evaluate: (ex) => {
+    if (!ex.assets) return { status: "na", observed: null };
+    const comparable = ex.openGraph.images.map((image) => ({ image, probe: ex.assets?.[image.url.value.trim()] })).filter(
+      (pair) => (
+        // Both sides have to have said something. A format goflag does not
+        // decode leaves `sizes` absent, and absent means unknown — which is
+        // not a mismatch.
+        Boolean(pair.probe?.ok && pair.probe.sizes?.length) && pair.image.width?.value !== void 0 && pair.image.height?.value !== void 0
+      )
+    );
+    if (comparable.length === 0) return { status: "na", observed: null };
+    const observed = comparable.map(({ image, probe }) => ({
+      url: image.url.value,
+      declared: `${image.width.value}x${image.height.value}`,
+      // The first frame. An `og:image` is one picture; a container carrying
+      // several is an icon, and `icons.sizes-mismatch` is the rule for those.
+      actual: `${probe.sizes[0].width}x${probe.sizes[0].height}`
+    }));
+    const wrong = observed.filter((entry) => entry.declared !== entry.actual);
+    if (wrong.length === 0) return { status: "pass", observed };
+    return {
+      status: "fail",
+      observed,
+      message: `The declared size is not the image's: ${wrong.map((entry) => `\`${entry.url}\` declares ${entry.declared} and is ${entry.actual}`).join("; ")}.`,
+      origin: { kind: "meta", property: "og:image:width" }
+    };
+  }
+};
 var iconsUnreachable = {
   id: "icons.unreachable",
   kind: "boolean",
@@ -2284,10 +2377,12 @@ var RULES = [
   ogDescriptionMissing,
   ogImageAbsolute,
   ogImageAlt,
+  ogImageAltCaption,
   ogImageDimensions,
   ogImageMissing,
   ogImageRatio,
   ogImageReachable,
+  ogImageSizesMismatch,
   ogLocaleAlternates,
   ogLocaleMissing,
   ogTitleMissing,
@@ -2416,6 +2511,17 @@ function extractionFromPage(page) {
       imageAlt: page.twitter.imageAlt
     },
     links: linksFromPage(page),
+    ...page.hydration ? {
+      hydration: {
+        titleChanged: page.hydration.titleChanged,
+        htmlLangChanged: page.hydration.htmlLangChanged,
+        injectedMetas: page.hydration.clientInjectedMetas,
+        removedMetas: page.hydration.clientRemovedMetas,
+        injectedLinks: page.hydration.clientInjectedLinks,
+        removedLinks: page.hydration.clientRemovedLinks,
+        jsonLdBlocksAdded: page.hydration.jsonLdBlocksAdded
+      }
+    } : {},
     jsonLd: page.jsonLd.map(({ index, types, data, parseError, raw }) => ({
       index,
       types,
@@ -4392,7 +4498,7 @@ function schemeOf(url) {
   }
 }
 function defaultSleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve2) => setTimeout(resolve2, ms));
 }
 
 // src/lib/core/sitemap/entries.ts
@@ -4721,13 +4827,58 @@ async function readHead(res) {
   } finally {
     await reader.cancel().catch(() => void 0);
   }
-  return chunks.length > 0 ? Buffer.concat(chunks) : void 0;
+  return chunks.length > 0 ? Buffer.concat(chunks).subarray(0, HEAD_BYTES) : void 0;
 }
 var PNG_SIGNATURE = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+var JPEG_SOI = 65496;
+var JPEG_FRAME_MARKERS = /* @__PURE__ */ new Set([
+  192,
+  193,
+  194,
+  195,
+  197,
+  198,
+  199,
+  201,
+  202,
+  203,
+  205,
+  206,
+  207
+]);
+function decodeJpegSize(head) {
+  let at = 2;
+  while (at + 3 < head.length) {
+    if (head[at] !== 255) return void 0;
+    const marker = head[at + 1];
+    if (marker === 255) {
+      at += 1;
+      continue;
+    }
+    if (marker === 216 || marker === 1 || marker >= 208 && marker <= 215) {
+      at += 2;
+      continue;
+    }
+    if (marker === 217 || marker === 218) return void 0;
+    const length = head.readUInt16BE(at + 2);
+    if (length < 2) return void 0;
+    if (JPEG_FRAME_MARKERS.has(marker)) {
+      if (at + 9 > head.length) return void 0;
+      return { width: head.readUInt16BE(at + 7), height: head.readUInt16BE(at + 5) };
+    }
+    at += 2 + length;
+  }
+  return void 0;
+}
 function decodeSizes(head) {
   if (head.length >= 24 && head.subarray(0, 8).equals(PNG_SIGNATURE)) {
     return [{ width: head.readUInt32BE(16), height: head.readUInt32BE(20) }];
   }
+  if (head.length >= 4 && head.readUInt16BE(0) === JPEG_SOI) {
+    const size = decodeJpegSize(head);
+    if (size) return [size];
+    return void 0;
+  }
   if (head.length >= 6 && head.readUInt16LE(0) === 0 && head.readUInt16LE(2) === 1) {
     const count2 = head.readUInt16LE(4);
     if (count2 === 0 || head.length < 6 + 16 * count2) return void 0;
@@ -5246,22 +5397,22 @@ function hostOf(url) {
     return url;
   }
 }
-function mapWithHostCaps(items, opts, worker, hostOf2) {
+function mapWithHostCaps(items, opts, worker, hostOf3) {
   const concurrency = Math.max(1, opts.concurrency);
   const perHost = opts.perHost;
-  return new Promise((resolve) => {
+  return new Promise((resolve2) => {
     if (items.length === 0) {
-      resolve();
+      resolve2();
       return;
     }
-    const pending = items.map((item) => ({ item, host: hostOf2(item) }));
+    const pending = items.map((item) => ({ item, host: hostOf3(item) }));
     const hostActive = /* @__PURE__ */ new Map();
     let inflight = 0;
     let settled = false;
     const finish = () => {
       if (!settled) {
         settled = true;
-        resolve();
+        resolve2();
       }
     };
     const pump = () => {
@@ -5518,7 +5669,7 @@ async function runAudit(inputUrl, options = {}) {
     signal: options.signal,
     timeoutMs: options.timeoutMs
   }).catch(() => void 0);
-  const favicon = await probeFavicon(origin, {
+  const favicon2 = await probeFavicon(origin, {
     signal: options.signal,
     timeoutMs: options.timeoutMs
   }).catch(() => void 0);
@@ -5578,11 +5729,15 @@ async function runAudit(inputUrl, options = {}) {
   const seoIssues = [];
   const conformanceRows = [];
   const advisories = [];
+  const extractions = [];
   const ruleById = new Map(rules.map((rule) => [rule.id, rule]));
   for (const page of htmlPages) {
     const pageUrl = page.fetch.finalUrl;
     const extraction = extractionFromPage(page);
     const evaluation = evaluateRules(extraction, rules);
+    if (options.extractions) {
+      extractions.push(extraction);
+    }
     if (options.conformance) {
       conformanceRows.push({ pageUrl, findings: evaluation.findings });
     }
@@ -5695,7 +5850,7 @@ async function runAudit(inputUrl, options = {}) {
     localeAxis,
     discovery,
     robots,
-    favicon,
+    favicon: favicon2,
     sitemapEntries,
     // Same index the matrix was built from, so a rule that groups by route
     // and the grid that reports holes cannot disagree about which URLs are
@@ -5803,6 +5958,7 @@ async function runAudit(inputUrl, options = {}) {
     // made.
     ...options.conformance ? { conformance: buildConformance(rules, conformanceRows) } : {},
     ...options.advisories ? { advisories } : {},
+    ...options.extractions ? { extractions } : {},
     diagnostics: {
       pagesCrawled: pages.length,
       pagesScanned: linkReport.pagesScanned,
@@ -6234,6 +6390,622 @@ function rollupRows(issues, c) {
   return lines;
 }
 
+// src/report/render-preview.ts
+var HEAD_PREFIXES = ["og.", "twitter.", "icons.", "title.", "description.", "canonical."];
+var RATIO_IDEAL2 = [1.7, 2.1];
+var RATIO_ACCEPTABLE2 = [1, 3];
+var ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function esc(value) {
+  return value.replace(/[&<>"']/g, (c) => ESCAPES[c] ?? c);
+}
+function codeSpans(escaped) {
+  return escaped.replace(/`([^`]+)`/g, "<code>$1</code>");
+}
+function clip(value, max = 300) {
+  return value.length > max ? `${value.slice(0, max)}\u2026` : value;
+}
+function prettyJson(value) {
+  try {
+    const out = JSON.stringify(value, null, 2);
+    if (out === void 0) return void 0;
+    return out.length > 2e4 ? `${out.slice(0, 2e4)}
+\u2026 truncated` : out;
+  } catch {
+    return void 0;
+  }
+}
+function safeUrl(value) {
+  if (!value) return void 0;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function hostOf2(value) {
+  try {
+    return new URL(value).host;
+  } catch {
+    return value;
+  }
+}
+function pathOf(value) {
+  try {
+    const { pathname, search } = new URL(value);
+    return `${pathname}${search}`;
+  } catch {
+    return value;
+  }
+}
+function originLabel(origin) {
+  switch (origin.kind) {
+    case "title":
+      return "<title>";
+    case "meta":
+      if (origin.property) return origin.property;
+      if (origin.name) return origin.name;
+      if (origin.httpEquiv) return `http-equiv=${origin.httpEquiv}`;
+      return "<meta>";
+    case "link":
+      return `<link rel="${origin.rel}">`;
+    case "html":
+      return `<html ${origin.attribute}>`;
+    case "json-ld":
+      return `JSON-LD #${origin.index}`;
+    case "header":
+      return `header: ${origin.name}`;
+    case "computed":
+      return "computed";
+  }
+}
+function resolve(...facts) {
+  for (const fact of facts) {
+    if (fact && fact.value.trim() !== "") {
+      return { value: fact.value, from: originLabel(fact.origin) };
+    }
+  }
+  return void 0;
+}
+function usable(size) {
+  return size && size.width > 0 && size.height > 0 ? size : void 0;
+}
+function imageOf(extraction) {
+  const og = extraction.openGraph.images[0];
+  const ogUrl = og?.url.value.trim() ? og.url.value : void 0;
+  const declared = ogUrl ?? extraction.twitter.image?.value;
+  if (!declared || declared.trim() === "") return void 0;
+  const probe = extraction.assets?.[declared.trim()];
+  const declaredSize = usable(
+    og?.width && og.height ? { width: og.width.value, height: og.height.value } : void 0
+  );
+  const probedSize = usable(probe?.sizes?.[0]);
+  const size = declaredSize ?? probedSize;
+  return {
+    declared,
+    src: safeUrl(declared),
+    alt: og?.alt?.value ?? extraction.twitter.imageAlt?.value,
+    from: ogUrl ? "og:image" : "twitter:image",
+    count: extraction.openGraph.images.length,
+    declaredSize,
+    probedSize,
+    probe,
+    // Nothing in the codebase computes this. `og.image.ratio` scores it and
+    // keeps the number to itself — and rounds to two decimals before banding,
+    // which is why this rounds too: a caption that bands 1.69731 as "cropped"
+    // beside a rule that bands 1.70 as ideal makes the page argue with itself.
+    ratio: size ? Math.round(size.width / size.height * 100) / 100 : void 0
+  };
+}
+function cardOf(extraction) {
+  const { openGraph: og, twitter, meta, document: doc } = extraction;
+  const url = extraction.http.finalUrl;
+  return {
+    url,
+    host: hostOf2(url),
+    path: pathOf(url),
+    ogTitle: resolve(og.title, doc.title),
+    ogDescription: resolve(og.description, meta.description),
+    documentTitle: resolve(doc.title),
+    metaDescription: resolve(meta.description),
+    siteName: resolve(og.siteName),
+    xTitle: resolve(twitter.title, og.title, doc.title),
+    image: imageOf(extraction),
+    icon: safeUrl(extraction.links.icons[0]?.href),
+    themeColor: meta.themeColor?.value,
+    twitterCard: twitter.card?.value,
+    locale: og.locale?.value ?? doc.lang?.value,
+    alternates: og.localeAlternates.map((f) => f.value),
+    jsonLd: extraction.jsonLd,
+    rendering: extraction.rendering,
+    status: extraction.http.status
+  };
+}
+function ratioNote(image) {
+  if (image.ratio === void 0) return "no usable dimensions declared, and none decoded";
+  const value = image.ratio.toFixed(2);
+  const source = image.declaredSize ? "declared" : "decoded from the file";
+  if (image.ratio >= RATIO_IDEAL2[0] && image.ratio <= RATIO_IDEAL2[1]) {
+    return `${value}:1 ${source} \u2014 inside the 1.91:1 band every card is laid out for`;
+  }
+  if (image.ratio >= RATIO_ACCEPTABLE2[0] && image.ratio <= RATIO_ACCEPTABLE2[1]) {
+    return `${value}:1 ${source} \u2014 renderable, but cropped away from 1.91:1`;
+  }
+  return `${value}:1 ${source} \u2014 outside anything a card renders whole`;
+}
+function probeNote(image) {
+  if (!image.probe) return "not probed on this run";
+  if (image.probe.ok) {
+    const type = image.probe.contentType ? `, ${image.probe.contentType}` : "";
+    return `answered ${image.probe.status}${type}`;
+  }
+  return image.probe.status === 0 ? "the request failed \u2014 nothing answered" : `answered ${image.probe.status}, which is not an image`;
+}
+function imageBox(card, className) {
+  const image = card.image;
+  if (!image) {
+    return `<div class="${className} shot empty"><span>no <code>og:image</code></span></div>`;
+  }
+  if (image.probe && !image.probe.ok) {
+    return `<div class="${className} shot broken"><span>the image does not answer</span><em>${esc(probeNote(image))}</em></div>`;
+  }
+  if (!image.src) {
+    return `<div class="${className} shot empty"><span>not an absolute http(s) URL</span><em>${esc(clip(image.declared))}</em></div>`;
+  }
+  const alt = image.alt ? esc(image.alt) : "";
+  return `<div class="${className} shot"><img src="${esc(image.src)}" alt="${alt}" loading="lazy" referrerpolicy="no-referrer"></div>`;
+}
+function frame(args) {
+  const trap = args.trap ? `<p class="trap"><b>${esc(args.trap.label)}</b>${esc(args.trap.text)}</p>` : "";
+  return `<article class="frame">
+  <header><span class="name">${esc(args.name)}</span><span class="badge ${args.rigor.replace("-", "")}">${esc(args.rigor)}</span></header>
+  <div class="stage">${args.body}</div>
+  <footer><p>${args.note}</p>${trap}<span class="src">${esc(args.source)}</span></footer>
+</article>`;
+}
+function favicon(card) {
+  return card.icon ? `<img class="fav" src="${esc(card.icon)}" alt="" loading="lazy">` : `<span class="fav placeholder">${esc(card.host.slice(0, 1).toUpperCase())}</span>`;
+}
+function googleSurface(card) {
+  const title = card.documentTitle?.value ?? card.ogTitle?.value ?? card.url;
+  const description = card.metaDescription?.value;
+  const body = `<div class="serp">
+  <div class="site">${favicon(card)}<span class="who"><b>${esc(card.siteName?.value ?? card.host)}</b><span>${esc(card.host)}${esc(card.path === "/" ? "" : ` \u203A ${card.path.replace(/^\//, "").split("/").join(" \u203A ")}`)}</span></span></div>
+  <h4>${esc(title)}</h4>
+  ${description ? `<p class="clamp2">${esc(description)}</p>` : `<p class="none">no <code>meta description</code> \u2014 the snippet is written from the page body</p>`}
+</div>`;
+  return frame({
+    name: "Google \u2014 search result",
+    rigor: "heuristic",
+    body,
+    note: "Not a card: no image, no ratio. <code>og:title</code> is one of the documented sources for the title link; <code>og:description</code> is not documented as a snippet source anywhere \u2014 the snippet comes from the page or from <code>meta description</code>.",
+    source: "developers.google.com/search/docs/appearance/title-link \xB7 /snippet",
+    trap: {
+      label: "Not drawn here",
+      text: "Google publishes no character or pixel limit \u2014 only truncation \u201Cto fit the device width\u201D. The two-line snippet above is the observed desktop shape, not a specification, and the 600px / 155-character figures in circulation are third-party measurements that disagree with each other."
+    }
+  });
+}
+function openGraphSurface(card) {
+  const image = card.image;
+  const body = `<div class="ogwrap">
+  ${imageBox(card, "og")}
+  <dl class="facts">
+    <dt>title</dt><dd>${card.ogTitle ? `${esc(card.ogTitle.value)} <span class="from">${esc(card.ogTitle.from)}</span>` : `<span class="none">absent</span>`}</dd>
+    <dt>description</dt><dd>${card.ogDescription ? `${esc(card.ogDescription.value)} <span class="from">${esc(card.ogDescription.from)}</span>` : `<span class="none">absent</span>`}</dd>
+    <dt>image</dt><dd>${image ? `<span class="mono">${esc(clip(image.declared))}</span> <span class="from">${esc(image.from)}${image.count > 1 ? ` \xB7 1 of ${image.count}` : ""}</span>` : `<span class="none">absent</span>`}</dd>
+    <dt>size</dt><dd>${image ? esc(ratioNote(image)) : `<span class="none">\u2014</span>`}</dd>
+    <dt>fetched</dt><dd>${image ? esc(probeNote(image)) : `<span class="none">\u2014</span>`}</dd>
+    <dt>alt</dt><dd>${image?.alt ? esc(image.alt) : `<span class="none">absent</span>`}</dd>
+    <dt>locale</dt><dd>${card.locale ? esc(card.locale) : `<span class="none">absent</span>`}${card.alternates.length > 0 ? ` <span class="from">+ ${esc(card.alternates.join(", "))}</span>` : ""}</dd>
+  </dl>
+</div>`;
+  return frame({
+    name: "Open Graph \u2014 the source card",
+    rigor: "vendor-spec",
+    body,
+    note: "The one fully specified surface: 1200\xD7630 recommended, 600\xD7315 floor, 200\xD7200 absolute minimum, 8MB, 1.91:1. Every surface below consumes this image, each in its own way.",
+    source: "developers.facebook.com/docs/sharing/webmasters/images \xB7 ogp.me"
+  });
+}
+function xSurface(card) {
+  const title = card.xTitle?.value;
+  const body = `<div class="xc">
+  <div class="xshot">
+    ${imageBox(card, "x")}
+    <div class="overlay">${title ? `<span class="lab">${esc(title)}</span>` : ""}<span class="dom">${esc(card.host)}</span></div>
+  </div>
+</div>`;
+  return frame({
+    name: "X \u2014 link card",
+    rigor: "unsourced",
+    body,
+    note: `Image, headline over the image, domain. Nothing else. This page declares <code>twitter:card</code> ${card.twitterCard ? `as <code>${esc(card.twitterCard)}</code>` : `nowhere, so X falls back to <code>og:*</code>`}.`,
+    source: "X card documentation is not publicly reachable \u2014 dated behaviour, not a spec",
+    trap: {
+      label: "The old card is a lie",
+      text: "X removed both headline and description on 4 October 2023. The headline came back in January 2024 as small text over the image; the description never did. Headline-below-image exists only for ads since May 2025. Any tool still drawing three stacked rows is drawing a card that has not existed for years."
+    }
+  });
+}
+function linkedInSurface(card) {
+  const title = card.ogTitle?.value ?? card.url;
+  const narrow = card.image?.declaredSize && card.image.declaredSize.width < 401;
+  const body = `<div class="lic">
+  ${imageBox(card, "li")}
+  <div class="meta"><b>${esc(title)}</b><span>${esc(card.host)}</span></div>
+</div>`;
+  return frame({
+    name: "LinkedIn \u2014 post unfurl",
+    rigor: "vendor-spec",
+    body,
+    note: "Four tags required \u2014 <code>og:title</code>, <code>og:image</code>, <code>og:description</code>, <code>og:url</code> \u2014 and a published geometry: 1200\xD7627 minimum, 1.91:1, 5MB. Under 401px wide the card falls back to a thumbnail, which is the only documented layout switch of any surface here.",
+    source: "linkedin.com/help/linkedin/answer/a521928",
+    ...narrow ? {
+      trap: {
+        label: "Thumbnail",
+        text: `This image declares ${card.image?.declaredSize?.width}px wide, under LinkedIn's documented 401px cutoff \u2014 it renders as a small square, not as this card.`
+      }
+    } : {}
+  });
+}
+function slackSurface(card) {
+  const title = card.ogTitle?.value ?? card.url;
+  const body = `<div class="slc">
+  <span class="who">${favicon(card)}${esc(card.siteName?.value ?? card.host)}</span>
+  <span class="t">${esc(title)}</span>
+  ${card.ogDescription ? `<p>${esc(card.ogDescription.value)}</p>` : ""}
+  ${imageBox(card, "sl")}
+</div>`;
+  return frame({
+    name: "Slack \u2014 unfurl",
+    rigor: "guideline",
+    body,
+    note: "Slack documents what it reads \u2014 Open Graph and X Card metadata \u2014 and calls the result \u201Csome micro-approximation of the content\u201D. No geometry, no image minimum, no character limit is published. The one hard number: past five links in a message, nothing expands.",
+    source: "docs.slack.dev/messaging/unfurling-links-in-messages"
+  });
+}
+function discordSurface(card) {
+  const title = card.ogTitle?.value ?? card.url;
+  const accent = /^#[0-9a-f]{3,8}$/i.test(card.themeColor ?? "") ? card.themeColor : void 0;
+  const body = `<div class="dcw"><div class="dcc"${accent ? ` style="border-left-color:${esc(accent)}"` : ""}>
+  <span class="site">${esc(card.siteName?.value ?? card.host)}</span>
+  <span class="t">${esc(title)}</span>
+  ${card.ogDescription ? `<p>${esc(card.ogDescription.value)}</p>` : ""}
+  ${imageBox(card, "dc")}
+</div></div>`;
+  return frame({
+    name: "Discord \u2014 embed",
+    rigor: "unsourced",
+    body,
+    note: `Discord publishes nothing about link unfurls: no tag table, no geometry. The accent bar is drawn from ${accent ? `this page's <code>theme-color</code>` : "a default, since this page declares no <code>theme-color</code>"}, which is community-reported behaviour and not documented.`,
+    source: "no Discord source exists for link previews",
+    trap: {
+      label: "Wrong numbers, right document",
+      text: "Discord's documented 256 / 4096 / 6000 character limits are real, and they govern embeds a bot sends through the API. Using them as unfurl truncation would be a sourcing error of exactly the kind the rigor scale exists to prevent."
+    }
+  });
+}
+function whatsAppSurface(card) {
+  const title = card.ogTitle?.value ?? card.url;
+  const body = `<div class="wac"><div class="wab"><div class="q">
+  ${imageBox(card, "wa")}
+  <div class="txt"><b class="clamp2">${esc(title)}</b>${card.ogDescription ? `<p class="clamp2">${esc(card.ogDescription.value)}</p>` : ""}<span>${esc(card.host)}</span></div>
+</div><div class="msg">${esc(card.url)}</div></div></div>`;
+  return frame({
+    name: "WhatsApp \u2014 link preview",
+    rigor: "vendor-spec",
+    body,
+    note: "The one messenger with a real spec from Meta: image under 600KB, at least 300px wide, aspect ratio 4:1 or less, title in at most two lines, description in one or two \u2014 \u201C80 characters will suffice\u201D. It is also the only surface where a 1200\xD7630 card is more often too heavy than too small.",
+    source: "developers.facebook.com/documentation/business-messaging/whatsapp/link-previews"
+  });
+}
+function findingsPanel(issues) {
+  const head = issues.filter((i) => HEAD_PREFIXES.some((p) => i.ruleId.startsWith(p)));
+  const others = issues.length - head.length;
+  const rest = others > 0 ? `<p class="foot">${others} other finding${others === 1 ? "" : "s"} on this page \u2014 they are in the report, not on a card.</p>` : "";
+  if (head.length === 0) {
+    return `<section class="panel"><h3>Findings on the head</h3><p class="none">Nothing the catalogue judges about this page's head. That is not the same as a card worth sharing \u2014 which is what the surfaces above are for.</p>${rest}</section>`;
+  }
+  const rows = head.map((issue) => {
+    const expected = "expected" in issue ? issue.expected : void 0;
+    return `<li class="find ${esc(issue.severity)}">
+  <span class="rid">${esc(issue.ruleId)}</span>
+  <span class="msg">${codeSpans(esc(issue.message))}</span>
+  <span class="pin">${esc(issue.severity)}${issue.rigor ? ` \xB7 ${esc(issue.rigor)}` : ""}${expected ? ` \xB7 expected ${codeSpans(esc(expected))}` : ""}</span>
+</li>`;
+  }).join("\n");
+  return `<section class="panel"><h3>Findings on the head</h3><ul class="finds">${rows}</ul>${rest}</section>`;
+}
+function jsonLdPanel(blocks) {
+  const note = `<p class="foot">Shown, never judged: no rule in the catalogue reads <code>jsonLd</code>, and that refusal is deliberate \u2014 nothing says which schema a page <em>should</em> carry.</p>`;
+  if (blocks.length === 0) {
+    return `<section class="panel"><h3>JSON-LD <span class="badge unjudged">extracted, unjudged</span></h3><p class="none">No <code>application/ld+json</code> block on this page \u2014 and no rule can hold that against it.</p>${note}</section>`;
+  }
+  const chips = blocks.map((block) => {
+    const label = block.parseError ? `#${block.index} ${block.parseError}` : `#${block.index} ${block.types.join(", ") || "no @type"}`;
+    return `<span class="chip${block.parseError ? " bad" : ""}">${esc(label)}</span>`;
+  }).join("");
+  const first = blocks.find((block) => block.data !== null);
+  const pretty = first ? prettyJson(first.data) : void 0;
+  const body = pretty === void 0 ? `<pre>${esc(blocks[0]?.raw.slice(0, 2e3) ?? "")}</pre>` : `<pre>${esc(pretty)}</pre>`;
+  return `<section class="panel"><h3>JSON-LD <span class="badge unjudged">extracted, unjudged</span></h3><div class="chips">${chips}</div>${body}${note}</section>`;
+}
+function renderingNote(card) {
+  if (card.rendering.mode === "static") {
+    return `read from the static HTML \u2014 what a crawler that runs no JavaScript sees`;
+  }
+  return card.rendering.escalated ? `read from the hydrated DOM, after the static head looked empty${card.rendering.escalationReason ? ` (${card.rendering.escalationReason})` : ""} \u2014 a crawler that runs no JavaScript sees less than this` : `read from the hydrated DOM \u2014 a crawler that runs no JavaScript may see less than this`;
+}
+function graphemes(value) {
+  if (typeof Intl?.Segmenter === "function") {
+    return [...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(value)].length;
+  }
+  return [...value].length;
+}
+function translationsPanel(current, siblings) {
+  if (siblings.length < 2) return "";
+  const rows = siblings.map((s) => {
+    const here = s.index === current.index;
+    return `<tr${here ? ' class="here"' : ""}>
+  <td class="loc">${here ? "\u25B8 " : ""}${esc(s.locale)}</td>
+  <td class="og">${s.ogLocale ? esc(s.ogLocale) : `<span class="none">no og:locale</span>`}</td>
+  <td>${here ? esc(s.title) : `<a href="#page-${s.index}">${esc(s.title)}</a>`}</td>
+  <td class="num">${graphemes(s.title)}</td>
+  <td class="num">${s.description ? graphemes(s.description) : `<span class="none">\u2014</span>`}</td>
+</tr>`;
+  }).join("\n");
+  return `<section class="panel"><h3>This route in ${siblings.length} languages</h3>
+<div class="tw"><table class="locs">
+<thead><tr><th>path</th><th>og:locale</th><th>og:title</th><th class="num">gr.</th><th class="num">desc.</th></tr></thead>
+<tbody>${rows}</tbody>
+</table></div>
+<p class="foot">Lengths are graphemes, which is what a card's size ladder counts. The ladder is the site's own \u2014 <code>@goflag/og</code> ships none \u2014 so this reports the length and not the step.</p></section>`;
+}
+function tagLabel(tag) {
+  const key = tag.property ?? tag.name ?? (tag.httpEquiv ? `http-equiv=${tag.httpEquiv}` : void 0);
+  if (key) return `${key}${tag.content ? ` = ${clip(tag.content, 120)}` : ""}`;
+  return `rel=${tag.rel ?? "?"}${tag.href ? ` \u2192 ${clip(tag.href, 120)}` : ""}`;
+}
+function hydrationPanel(extraction) {
+  const delta = extraction.hydration;
+  if (!delta) {
+    const why = extraction.rendering.mode === "static" ? "this run never rendered the page, so there is no second reading to compare against" : "this run rendered the page without keeping a static reading to compare against";
+    return `<section class="panel"><h3>Static vs hydrated</h3><p class="none">Not established \u2014 ${why}.</p></section>`;
+  }
+  const lines = [
+    ...delta.injectedMetas.map((m) => ({ sign: "+", text: tagLabel(m) })),
+    ...delta.injectedLinks.map((l) => ({ sign: "+", text: tagLabel(l) })),
+    ...delta.removedMetas.map((m) => ({ sign: "\u2212", text: tagLabel(m) })),
+    ...delta.removedLinks.map((l) => ({ sign: "\u2212", text: tagLabel(l) })),
+    ...delta.titleChanged ? [{ sign: "+", text: "<title> \u2014 rewritten after hydration" }] : [],
+    ...delta.htmlLangChanged ? [{ sign: "+", text: "<html lang> \u2014 changed after hydration" }] : [],
+    ...delta.jsonLdBlocksAdded > 0 ? [{ sign: "+", text: `${delta.jsonLdBlocksAdded} JSON-LD block(s) added by script` }] : []
+  ];
+  if (lines.length === 0) {
+    return `<section class="panel"><h3>Static vs hydrated</h3><p class="none">Both readings agree: every tag above is in the HTML before any script runs.</p></section>`;
+  }
+  const rows = lines.map(
+    (l) => `<li class="${l.sign === "+" ? "added" : "removed"}"><span class="sign">${l.sign}</span>${esc(l.text)}</li>`
+  ).join("\n");
+  return `<section class="panel"><h3>Static vs hydrated <span class="badge unjudged">no rule reads this</span></h3>
+<ul class="delta">${rows}</ul>
+<p class="foot">A <code>+</code> is a tag only the browser has. Unfurlers run no JavaScript, so the cards above are drawn from something a crawler may never receive \u2014 and every <code>og.*</code> rule judges the declaration it was handed, not which pass handed it over.</p></section>`;
+}
+function pageSection(extraction, issues, index, siblings) {
+  const card = cardOf(extraction);
+  const surfaces = [
+    openGraphSurface(card),
+    googleSurface(card),
+    xSurface(card),
+    linkedInSurface(card),
+    slackSurface(card),
+    discordSurface(card),
+    whatsAppSurface(card)
+  ].join("\n");
+  return `<section class="page" id="page-${index}">
+  <header class="pagehead">
+    <h2>${esc(card.path)}</h2>
+    <p class="url">${esc(card.url)}</p>
+    <p class="meta">${card.status} \xB7 ${esc(renderingNote(card))}${card.locale ? ` \xB7 ${esc(card.locale)}` : ""}</p>
+  </header>
+  <div class="surfaces">${surfaces}</div>
+  ${findingsPanel(issues)}
+  ${translationsPanel(
+    siblings.find((sib) => sib.index === index),
+    siblings
+  )}
+  ${hydrationPanel(extraction)}
+  ${jsonLdPanel(card.jsonLd)}
+</section>`;
+}
+var STYLE = `
+:root{--paper:#fff;--paper2:#f7f8f7;--ink:#09090b;--ink2:#4c534f;--ink3:#6d7671;--line:#e5e6e5;--line2:#d3d6d4;--brand:#009966;--green:#007a55;--amber:#bb4d00;--red:#e7000b;--wash:#f2f6f4;
+--g-title:#1a0dab;--g-text:#4d5156;--x-bg:#000;--x-fg:#e7e9ea;--x-line:#2f3336;--li-strip:#f3f2ef;--sl-link:#1264a3;--sl-rail:#ddd;--dc-bg:#313338;--dc-embed:#2b2d31;--dc-fg:#dbdee1;--dc-dim:#b5bac1;--dc-link:#00a8fc;--wa-bg:#efeae2;--wa-bubble:#d9fdd3;--wa-quote:#d1f4cb;--wa-fg:#111b21;--wa-dim:#667781;
+--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
+@media (prefers-color-scheme:dark){:root{--paper:#0a0a0c;--paper2:#121316;--ink:#fafafa;--ink2:#b6bcb9;--ink3:#878e8a;--line:#23252a;--line2:#32353b;--brand:#00d492;--green:#00d492;--amber:#ffb900;--red:#ff6467;--wash:#101614}}
+*{box-sizing:border-box}
+body{margin:0;padding:0 20px 100px;background:var(--paper);color:var(--ink);font:15px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
+.wrap{max-width:1120px;margin-inline:auto}
+h1,h2,h3,.badge,.chip,.rid,.src,.from,.mono,code,pre,dt,.pin,.nav{font-family:var(--mono)}
+h1{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
+.lede{color:var(--ink2);margin:0;max-width:70ch}
+header.doc{padding:44px 0 24px;border-bottom:1px solid var(--line)}
+.nav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;font-size:12px}
+.nav a{display:inline-block;padding:4px 9px;border:1px solid var(--line2);border-radius:3px;color:var(--ink2);text-decoration:none}
+.nav a:hover,.nav a:focus-visible{border-color:var(--brand);color:var(--brand)}
+.page{padding-top:52px}
+.pagehead h2{font-size:16px;margin:0 0 4px}
+.pagehead .url{margin:0;font-size:13px;color:var(--ink2);word-break:break-all}
+.pagehead .meta{margin:6px 0 0;font-size:12px;color:var(--ink3);font-family:var(--mono)}
+.surfaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:22px;margin-top:22px}
+.frame{border:1px solid var(--line);border-radius:8px;background:var(--paper2);display:flex;flex-direction:column;overflow:hidden}
+.frame>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--paper)}
+.frame>header .name{font-size:12px;font-weight:600}
+.frame .stage{padding:16px;display:flex;justify-content:center}
+.frame footer{margin-top:auto;border-top:1px solid var(--line);padding:11px 13px;font-size:12.5px;line-height:1.5;color:var(--ink2)}
+.frame footer p{margin:0 0 6px}
+.src{display:block;font-size:10.5px;color:var(--ink3);word-break:break-all}
+.badge{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid var(--line2);color:var(--ink3);white-space:nowrap}
+.badge.vendorspec{color:var(--green);border-color:currentColor}
+.badge.guideline,.badge.heuristic{color:var(--amber);border-color:currentColor}
+.badge.unsourced{color:var(--red);border-color:currentColor}
+.badge.unjudged{color:var(--ink3);text-transform:none;letter-spacing:0}
+.trap{margin:8px 0 0;padding-left:10px;border-left:2px solid var(--red);font-size:12px}
+.trap b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
+.shot{width:100%;overflow:hidden;background:#0d0e10}
+.shot img{display:block;width:100%;height:auto}
+.shot.empty,.shot.broken{aspect-ratio:1.91/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--wash);color:var(--ink3);font-size:12.5px;text-align:center;padding:12px;border:1px dashed var(--line2)}
+.shot.broken{border-color:var(--red);color:var(--red)}
+.shot em{font-family:var(--mono);font-size:11px;font-style:normal;opacity:.85;word-break:break-all}
+.ogwrap{width:100%;display:flex;flex-direction:column;gap:14px}
+.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:12.5px}
+.facts dt{color:var(--ink3);font-size:11px}
+.facts dd{margin:0;word-break:break-word}
+.from{font-family:var(--mono);font-size:10.5px;color:var(--brand)}
+.none{color:var(--ink3);font-style:italic}
+.mono{font-family:var(--mono);font-size:11.5px;word-break:break-all}
+.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.serp{width:100%;max-width:600px;font-family:Arial,var(--ui)}
+.serp .site{display:flex;align-items:center;gap:10px;margin-bottom:4px}
+.fav{width:26px;height:26px;border-radius:50%;flex:none;object-fit:contain;background:var(--wash)}
+.fav.placeholder{display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--ink2)}
+.serp .who b{display:block;font-size:14px;font-weight:400}
+.serp .who span{font-size:12px;color:var(--ink3)}
+.serp h4{font-size:19px;line-height:1.3;font-weight:400;color:var(--g-title);margin:4px 0 3px}
+.serp p{font-size:13.5px;line-height:1.56;margin:0;color:var(--g-text)}
+@media (prefers-color-scheme:dark){.serp h4{color:#8ab4f8}.serp p{color:var(--ink2)}}
+.xc{width:100%;max-width:440px}
+.xshot{position:relative;border:1px solid var(--x-line);border-radius:14px;overflow:hidden;background:var(--x-bg)}
+.overlay{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
+.overlay .lab{background:#000000bf;color:var(--x-fg);font-size:12px;line-height:1.25;padding:3px 7px;border-radius:4px;max-width:100%}
+.overlay .dom{font-size:11px;color:#fffc;text-shadow:0 1px 2px #000}
+.lic{width:100%;max-width:440px;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
+.lic .meta{padding:10px 12px;background:var(--li-strip);color:#000}
+.lic .meta b{display:block;font-size:14px;line-height:1.35}
+.lic .meta span{font-size:12px;color:#00000099}
+.slc{width:100%;max-width:440px;padding:2px 0 2px 12px;border-left:4px solid var(--sl-rail)}
+.slc .who{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;margin-bottom:3px}
+.slc .who .fav{width:16px;height:16px;border-radius:3px}
+.slc .t{display:block;font-size:14px;font-weight:700;color:var(--sl-link);margin-bottom:3px}
+.slc p{font-size:13px;line-height:1.45;margin:0 0 8px}
+.slc .shot{max-width:360px;border-radius:8px}
+.dcw{width:100%;max-width:440px;background:var(--dc-bg);padding:11px;border-radius:8px}
+.dcc{background:var(--dc-embed);border-left:4px solid var(--brand);border-radius:4px;padding:11px 13px 13px}
+.dcc .site{font-size:11.5px;color:var(--dc-fg)}
+.dcc .t{display:block;font-size:15px;font-weight:600;color:var(--dc-link);line-height:1.3;margin:5px 0}
+.dcc p{font-size:13px;line-height:1.42;color:var(--dc-dim);margin:0 0 9px}
+.dcc .shot{border-radius:4px}
+.wac{width:100%;max-width:330px;background:var(--wa-bg);padding:12px;border-radius:8px}
+.wab{background:var(--wa-bubble);border-radius:8px;padding:4px}
+.wab .q{background:var(--wa-quote);border-radius:6px;overflow:hidden}
+.wab .txt{padding:8px 10px;color:var(--wa-fg)}
+.wab .txt b{display:block;font-size:12.5px;line-height:1.3}
+.wab .txt p{font-size:12px;color:var(--wa-dim);margin:2px 0 0;line-height:1.35}
+.wab .txt span{font-size:11px;color:var(--wa-dim)}
+.wab .msg{padding:5px 9px 3px;font-size:13px;color:var(--wa-fg);word-break:break-all}
+.panel{margin-top:22px;border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--paper2)}
+.panel h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px;display:flex;align-items:center;gap:10px}
+.panel .foot{margin:12px 0 0;font-size:12.5px;color:var(--ink3)}
+.finds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
+.find{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:9px 0 9px 12px;border-left:3px solid var(--ink3);border-bottom:1px solid var(--line)}
+.find:last-child{border-bottom:0}
+.find.error{border-left-color:var(--red)}
+.find.warning{border-left-color:var(--amber)}
+.find .rid{font-size:12.5px;font-weight:600}
+.find .msg{font-size:13.5px;color:var(--ink2)}
+.find .pin{grid-column:1/-1;font-size:11px;color:var(--ink3)}
+.tw{overflow-x:auto}
+table.locs{border-collapse:collapse;width:100%;font-size:13px}
+table.locs th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:600;padding:0 12px 7px 0;border-bottom:1px solid var(--line)}
+table.locs td{padding:7px 12px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
+table.locs tr:last-child td{border-bottom:0}
+table.locs .loc,table.locs .og{font-family:var(--mono);font-size:12px;white-space:nowrap}
+table.locs .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
+table.locs tr.here td{color:var(--ink);font-weight:600}
+table.locs tr.here .loc{color:var(--brand)}
+.delta{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px;line-height:1.7}
+.delta li{display:flex;gap:9px;word-break:break-word}
+.delta .sign{flex:none;width:1ch;font-weight:700}
+.delta .added .sign,.delta li.added{color:var(--green)}
+.delta .removed .sign,.delta li.removed{color:var(--red)}
+.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
+.chip{font-size:11px;padding:3px 8px;border:1px solid var(--line2);border-radius:3px;color:var(--ink2)}
+.chip.bad{color:var(--red);border-color:currentColor}
+pre{margin:0;padding:13px 15px;background:#121416;color:#d8dbde;border-radius:6px;font-size:11.5px;line-height:1.55;overflow-x:auto}
+code{font-size:.9em;background:var(--wash);border:1px solid var(--line);border-radius:3px;padding:.05em .3em}
+footer.doc{margin-top:70px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
+a{color:var(--brand)}
+:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
+`;
+function renderPreview(report, options = {}) {
+  const title = options.title ?? `goflag preview \u2014 ${hostOf2(report.url)}`;
+  const extractions = report.extractions ?? [];
+  const issuesByPage = /* @__PURE__ */ new Map();
+  for (const issue of [...report.seoIssues, ...report.siteIssues]) {
+    const bucket = issuesByPage.get(issue.pageUrl);
+    if (bucket) bucket.push(issue);
+    else issuesByPage.set(issue.pageUrl, [issue]);
+  }
+  const empty = report.extractions === void 0 ? `This report carries no extractions, so there is nothing to draw. Pass <code>extractions: true</code> to <code>runAudit</code>, or use <code>goflag preview &lt;url&gt;</code>, which does.` : `The crawl reached no HTML page it could read, so there is nothing to draw. Every page was unreachable, not HTML, or a declared duplicate of another.`;
+  const rows = extractions.map((extraction, index) => {
+    const path = pathOf(extraction.http.finalUrl);
+    return {
+      index,
+      locale: splitRoute(path).locale,
+      path,
+      ogLocale: extraction.openGraph.locale?.value,
+      title: cardOf(extraction).ogTitle?.value ?? path,
+      description: cardOf(extraction).ogDescription?.value ?? ""
+    };
+  });
+  const byRoute = /* @__PURE__ */ new Map();
+  extractions.forEach((extraction, index) => {
+    const route = splitRoute(pathOf(extraction.http.finalUrl)).route;
+    byRoute.set(route, [...byRoute.get(route) ?? [], rows[index]]);
+  });
+  const body = extractions.length === 0 ? `<section class="page"><p class="none">${empty}</p></section>` : extractions.map(
+    (extraction, index) => pageSection(
+      extraction,
+      issuesByPage.get(extraction.http.finalUrl) ?? [],
+      index,
+      byRoute.get(splitRoute(pathOf(extraction.http.finalUrl)).route) ?? []
+    )
+  ).join("\n");
+  const nav = extractions.length > 1 ? `<ul class="nav">${extractions.map(
+    (extraction, index) => `<li><a href="#page-${index}">${esc(pathOf(extraction.http.finalUrl))}</a></li>`
+  ).join("")}</ul>` : "";
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src http: https: data:; style-src 'unsafe-inline'">
+<title>${esc(title)}</title>
+<style>${STYLE}</style>
+</head>
+<body>
+<div class="wrap">
+<header class="doc">
+  <h1>${esc(title)}</h1>
+  <p class="lede">What each surface makes of ${esc(report.url)}, drawn from what the pages declared. Each surface carries the rigor of the geometry it is drawn from \u2014 three of the seven publish one, two publish nothing at all, and Google is not a card.</p>
+  ${nav}
+</header>
+${body}
+<footer class="doc">${esc(`${extractions.length} page${extractions.length === 1 ? "" : "s"} \xB7 audited ${report.finishedAt} \xB7 profile ${report.profile} \xB7 goflag`)}</footer>
+</div>
+</body>
+</html>
+`;
+}
+
 // src/report/summarize.ts
 var SAMPLE_LIMIT = 5;
 function summarize(report) {
@@ -6517,8 +7289,9 @@ export {
   runAudit,
   renderTerminal,
   renderSummaryTerminal,
+  renderPreview,
   SAMPLE_LIMIT,
   summarize,
   Logger
 };
-//# sourceMappingURL=chunk-CWEJ6EXT.js.map
+//# sourceMappingURL=chunk-QKXUKHXB.js.map