@jxsuite/import 0.40.0 → 0.40.2

package/src/emit.ts

@@ -1,9 +1,8 @@
-import { join, dirname } from "node:path";
-import { mkdir } from "node:fs/promises";
 import type { JxElement } from "@jxsuite/schema/types";
 import { componentize } from "./componentize.ts";
 import { stripClasses } from "./strip-classes.ts";
 import type { ComponentizeOptions, ComponentizeResult } from "./componentize.ts";
+import type { ImportIo } from "./io.ts";
 
 /**
  * The `$media` key the base width lives under — a number of CSS pixels, not a query.
@@ -21,14 +20,22 @@ function mediaKeyWidth(key: string): number {
 }
 
 export interface EmitResult {
-  /** Absolute paths of every file written. */
+  /** Project-relative, forward-slashed paths of every file written, in the order they were written. */
   files: string[];
   /** How many source-site class names were removed on the way out. */
   classesStripped: number;
+  /**
+   * The exact `project.json` text that was written.
+   *
+   * Returned rather than left to be read back, because a caller with no filesystem cannot read it
+   * back at all: Jx Cloud commits the emitted file set to git and needs the configuration to name
+   * the project, and re-deriving it here would be a second writer on the same bytes.
+   */
+  projectJson: string;
 }
 
 export interface EmitOptions {
-  outDir: string;
+  io: ImportIo;
   title: string;
   document: JxElement;
   sourceUrl: string;
@@ -41,7 +48,8 @@ export interface EmitOptions {
 }
 
 export interface MultiEmitOptions {
-  outDir: string;
+  /** Where the emitted files go. See `io.ts` — a disk is one implementation, not the requirement. */
+  io: ImportIo;
   title: string;
   sourceUrl: string;
   /** Map of route path (e.g. "pages/index.json") → Jx document. */
@@ -65,7 +73,7 @@ export interface MultiEmitOptions {
 }
 
 export async function emitProject({
-  outDir,
+  io,
   title,
   document,
   sourceUrl,
@@ -74,7 +82,7 @@ export async function emitProject({
   componentizeOptions,
 }: EmitOptions): Promise<EmitResult> {
   return emitMultiPageProject({
-    outDir,
+    io,
     title,
     sourceUrl,
     pages: new Map([["pages/index.json", document]]),
@@ -85,7 +93,7 @@ export async function emitProject({
 }
 
 export async function emitMultiPageProject({
-  outDir,
+  io,
   title,
   pages,
   layout,
@@ -97,10 +105,12 @@ export async function emitMultiPageProject({
   fontRewriteMap,
   styleTokens,
 }: MultiEmitOptions): Promise<EmitResult> {
-  await mkdir(join(outDir, "pages"), { recursive: true });
-  await mkdir(join(outDir, "layouts"), { recursive: true });
-  await mkdir(join(outDir, "components"), { recursive: true });
-  await mkdir(join(outDir, "public"), { recursive: true });
+  /* Seeded even when nothing lands in them, so a host that opened the project at the seed event
+     sees the shape it expects rather than a directory that grows one folder at a time. A sink with
+     no directories declines by not implementing it. */
+  for (const dir of ["pages", "layouts", "components", "public"]) {
+    await io.mkdir?.(dir);
+  }
 
   /*
    * Only keys the project schema declares (#228). `title` and `description` are page-level keys and
@@ -156,10 +166,16 @@ export async function emitMultiPageProject({
         tagName: comp.tagName,
       };
 
-      const state: Record<string, string> = {};
-      extractStateDefaults(comp.template, state);
+      /* Derived placeholders fill in for props the template interpolates but nobody declared;
+         a value the template DECLARED wins over them. This was an assignment over the spread, so
+         a component that carried its own `state` — the `active` index a tab group switches on —
+         lost it on the way out, and every interpolation referencing it went dead. */
+      const derived: Record<string, string> = {};
+      extractStateDefaults(comp.template, derived);
+      const declared = (comp.template.state ?? {}) as Record<string, unknown>;
+      const state = { ...derived, ...declared };
       if (Object.keys(state).length > 0) {
-        compDoc.state = state;
+        compDoc.state = state as Record<string, string>;
       }
 
       componentFiles.set(fileName, compDoc);
@@ -207,10 +223,8 @@ export async function emitMultiPageProject({
         fontCss = fontCss.replaceAll(pattern, (m) => byForm.get(m) ?? m);
       }
     }
-    const fontsDir = join(outDir, "public", "assets");
-    await mkdir(fontsDir, { recursive: true });
-    const fontsCssPath = join(fontsDir, "fonts.css");
-    await Bun.write(fontsCssPath, fontCss);
+    const fontsCssPath = "public/assets/fonts.css";
+    await io.write(fontsCssPath, fontCss);
     files.push(fontsCssPath);
 
     // Add fonts.css to project head
@@ -223,9 +237,9 @@ export async function emitMultiPageProject({
     });
   }
 
-  const projectPath = join(outDir, "project.json");
-  await Bun.write(projectPath, `${JSON.stringify(projectJson, null, 2)}\n`);
-  files.push(projectPath);
+  const projectText = `${JSON.stringify(projectJson, null, 2)}\n`;
+  await io.write("project.json", projectText);
+  files.push("project.json");
 
   /*
    * Classes go here, at the last possible moment, and that placement is the whole design.
@@ -245,8 +259,8 @@ export async function emitMultiPageProject({
 
   // Write components
   for (const [fileName, compDoc] of componentFiles) {
-    const compPath = join(outDir, "components", fileName);
-    await Bun.write(compPath, `${JSON.stringify(compDoc, null, 2)}\n`);
+    const compPath = `components/${fileName}`;
+    await io.write(compPath, `${JSON.stringify(compDoc, null, 2)}\n`);
     files.push(compPath);
   }
 
@@ -267,14 +281,12 @@ export async function emitMultiPageProject({
         ...((pageDoc.$elements as JxElement[]) ?? []),
       ] as JxElement[];
     }
-    const pagePath = join(outDir, route);
-    await mkdir(dirname(pagePath), { recursive: true });
-    await Bun.write(pagePath, `${JSON.stringify(pageDoc, null, 2)}\n`);
-    files.push(pagePath);
+    await io.write(route, `${JSON.stringify(pageDoc, null, 2)}\n`);
+    files.push(route);
   }
 
   // Write layout
-  const layoutPath = join(outDir, "layouts", "base.json");
+  const layoutPath = "layouts/base.json";
   const layoutDoc: JxElement = layout ?? {
     tagName: "div",
     children: [{ tagName: "slot" }],
@@ -286,22 +298,35 @@ export async function emitMultiPageProject({
     ];
   }
   classesStripped += stripClasses(layoutDoc);
-  await Bun.write(layoutPath, `${JSON.stringify(layoutDoc, null, 2)}\n`);
+  await io.write(layoutPath, `${JSON.stringify(layoutDoc, null, 2)}\n`);
   files.push(layoutPath);
 
-  return { classesStripped, files };
+  return { classesStripped, files, projectJson: projectText };
+}
+
+/**
+ * The state key a whole-string `${state.x}` names, or null.
+ *
+ * The identifier check is the point. The capture used to be `([^}]+)`, so `${state.active !== 0}` —
+ * an expression, not a reference — minted a state entry literally called `active !== 0` beside the
+ * real one. Only a bare identifier is a key; anything else is an expression over state and has no
+ * default of its own to declare.
+ */
+function stateKey(text: string): string | undefined {
+  const key = text.match(/^\$\{state\.([^}]+)\}$/)?.[1];
+  return key !== undefined && /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : undefined;
 }
 
 function extractStateDefaults(node: JxElement | string, out: Record<string, string>) {
   if (typeof node === "string") {
-    const key = node.match(/^\$\{state\.([^}]+)\}$/)?.[1];
+    const key = stateKey(node);
     if (key && !(key in out)) {
       out[key] = "";
     }
     return;
   }
   if (typeof node.textContent === "string") {
-    const key = node.textContent.match(/^\$\{state\.([^}]+)\}$/)?.[1];
+    const key = stateKey(node.textContent);
     if (key && !(key in out)) {
       out[key] = "";
     }
@@ -309,7 +334,7 @@ function extractStateDefaults(node: JxElement | string, out: Record<string, stri
   if (node.attributes) {
     for (const v of Object.values(node.attributes)) {
       if (typeof v === "string") {
-        const key = v.match(/^\$\{state\.([^}]+)\}$/)?.[1];
+        const key = stateKey(v);
         if (key && !(key in out)) {
           out[key] = "";
         }

package/src/image-family.ts

@@ -0,0 +1,227 @@
+/**
+ * Group an image's responsive derivatives back into one family, and pick the member to keep.
+ *
+ * A CMS publishes one photograph as a dozen files. WordPress alone emits `-300x200`, `-768x512`,
+ * `-1024x683`, `-1536x1025`, `-2048x1366` and `-scaled` beside the upload, and every one of them
+ * appears in the `srcset` of every `<img>` that uses it. The importer enqueued each candidate as an
+ * independent asset, so a clone of a 451-image site downloaded 2,446 files and 427 MB, and the
+ * emitted markup carried the whole derivative ladder forward.
+ *
+ * That is the wrong shape twice over. It is large, and it hands the compiler a `srcset` it did not
+ * build and cannot reason about — while `image-transform.ts` caps its own ladder at the source
+ * file's width, so an `<img src>` pointing at a `-300x200` derivative is a permanent quality
+ * ceiling rather than merely a wasted byte.
+ *
+ * So the importer keeps ONE member per family and lets the compiler regenerate sizes from it.
+ *
+ * Two rules make this safe on a real site:
+ *
+ * 1. **The key comes from the source URL, never from the written filename.** `sanitizeFilename`
+ *    truncates a long name to 96 characters, which cuts the `-WxH` marker off the end — five
+ *    resolutions of one image would land as five unrelated families.
+ * 2. **The winner is always a URL the page actually referenced.** 120 of the 451 families on the
+ *    reference corpus have no undecorated member at all, because WordPress serves only
+ *    `-scaled.jpg` once an upload passes its threshold. Synthesising the bare name and fetching it
+ *    would 404 on those, and a failed download leaves the remote URL in the markup — the clone then
+ *    serves images from the host it cloned. Taking the largest real candidate cannot fail that
+ *    way.
+ */
+
+import type { DiscoveredAsset } from "./asset-collect.ts";
+
+/** Sources whose URLs are responsive variants of one image. A CSS background is not one. */
+const FAMILY_SOURCES = new Set(["img-src", "img-srcset", "source-srcset", "picture-source"]);
+
+/** `name-1024x683.jpg` → the `1024x683` marker, and where it starts. */
+const DIMENSION_SUFFIX = /-(\d{1,5})x(\d{1,5})$/;
+
+/** WordPress's marker for "the original was too big, this is the working copy". */
+const SCALED_SUFFIX = /-scaled$/;
+
+interface ParsedName {
+  /** The stem with any `-WxH` and `-scaled` markers removed. */
+  stem: string;
+  /** Pixel area of the `-WxH` marker, or null when there is none. */
+  area: number | null;
+  /** Whether the name carried `-scaled`. */
+  scaled: boolean;
+}
+
+function splitExtension(pathname: string): { base: string; ext: string } {
+  const slash = pathname.lastIndexOf("/");
+  const dot = pathname.lastIndexOf(".");
+  return dot > slash
+    ? { base: pathname.slice(0, dot), ext: pathname.slice(dot) }
+    : { base: pathname, ext: "" };
+}
+
+/**
+ * Strip the derivative markers from a pathname's final segment.
+ *
+ * Order matters: WordPress writes `photo-scaled-768x512.jpg`, so the dimensions come off first and
+ * `-scaled` second. Doing it the other way leaves `-768x512` welded to the stem and splits the
+ * family.
+ */
+function parseName(pathname: string): ParsedName {
+  const { base } = splitExtension(pathname);
+  let stem = base;
+  let area: number | null = null;
+
+  const dimensions = stem.match(DIMENSION_SUFFIX);
+  if (dimensions) {
+    area = Number(dimensions[1]) * Number(dimensions[2]);
+    stem = stem.slice(0, dimensions.index);
+  }
+
+  const scaled = SCALED_SUFFIX.test(stem);
+  if (scaled) {
+    stem = stem.replace(SCALED_SUFFIX, "");
+  }
+
+  return { area, scaled, stem };
+}
+
+/**
+ * The identity two derivatives of one image share.
+ *
+ * Origin and directory are part of it — two sites can both serve `hero.jpg`, and WordPress's
+ * `/uploads/<year>/<month>/` layout means the same basename recurs legitimately. The query string
+ * is not: a cache-buster is not a different image. A URL that will not parse is its own family,
+ * which is the conservative answer (it is kept, not merged with something it may not match).
+ */
+export function familyKey(url: string): string {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return url;
+  }
+  const { ext } = splitExtension(parsed.pathname);
+  const { stem } = parseName(parsed.pathname);
+  return `${parsed.origin}${stem}${ext.toLowerCase()}`;
+}
+
+/**
+ * Pick the member of a family to keep.
+ *
+ * Ranked: an undecorated name beats everything, because it is the upload itself; otherwise the
+ * largest `-WxH` wins, and a `-scaled` copy is preferred to a small explicit crop only when nothing
+ * else is left. Ties break on the URL string so a crawl is reproducible.
+ *
+ * @param {readonly string[]} candidates - Absolute URLs, all of one family, non-empty
+ * @returns {string}
+ */
+export function chooseOriginal(candidates: readonly string[]): string {
+  const ranked = candidates.map((url) => {
+    let pathname: string;
+    try {
+      ({ pathname } = new URL(url));
+    } catch {
+      pathname = url;
+    }
+    const { area, scaled } = parseName(pathname);
+    // Undecorated first, then scaled-only, then explicit crops largest-first.
+    const tier = area === null ? (scaled ? 1 : 0) : 2;
+    return { area: area ?? 0, tier, url };
+  });
+
+  ranked.sort((a, b) => {
+    if (a.tier !== b.tier) {
+      return a.tier - b.tier;
+    }
+    if (a.area !== b.area) {
+      return b.area - a.area;
+    }
+    return a.url < b.url ? -1 : a.url > b.url ? 1 : 0;
+  });
+
+  return ranked[0]!.url;
+}
+
+export interface ImageFamilyPlan {
+  /** The assets to actually download — one per image family, plus every non-family asset. */
+  keep: DiscoveredAsset[];
+  /**
+   * Dropped URL → the URL kept in its place.
+   *
+   * The caller replays this over the download's `rewriteMap` so a reference to any derivative still
+   * resolves, to the one file that was written.
+   */
+  alias: Map<string, string>;
+}
+
+/**
+ * Reduce a discovered asset list to one member per image family.
+ *
+ * Only `<img>`/`<source>` URLs take part. A CSS background, a font and a favicon are each kept as
+ * found: a background is authored at one size, and merging two of them on a coincidental name match
+ * would silently swap an image the stylesheet asked for.
+ *
+ * @param {readonly DiscoveredAsset[]} assets
+ * @returns {ImageFamilyPlan}
+ */
+export function planImageFamilies(assets: readonly DiscoveredAsset[]): ImageFamilyPlan {
+  const families = new Map<string, string[]>();
+  for (const asset of assets) {
+    if (!FAMILY_SOURCES.has(asset.source)) {
+      continue;
+    }
+    const key = familyKey(asset.url);
+    families.set(key, [...(families.get(key) ?? []), asset.url]);
+  }
+
+  const winners = new Map<string, string>();
+  for (const [key, urls] of families) {
+    winners.set(key, chooseOriginal(urls));
+  }
+
+  const alias = new Map<string, string>();
+  const keep: DiscoveredAsset[] = [];
+  const taken = new Set<string>();
+
+  for (const asset of assets) {
+    if (!FAMILY_SOURCES.has(asset.source)) {
+      keep.push(asset);
+      continue;
+    }
+    const winner = winners.get(familyKey(asset.url))!;
+    if (asset.url === winner) {
+      if (!taken.has(winner)) {
+        taken.add(winner);
+        keep.push(asset);
+      }
+      continue;
+    }
+    alias.set(asset.url, winner);
+  }
+
+  return { alias, keep };
+}
+
+/**
+ * Point every dropped derivative at the file its family actually wrote.
+ *
+ * The download only ever saw one member per family, so the map it returns has one entry per family.
+ * Markup still refers to whichever rung it was authored against, and an unresolved reference is not
+ * merely a broken image: `asset-rewrite.ts` leaves a URL it cannot resolve untouched, so the built
+ * clone would go on serving that image from the site it was cloned from.
+ *
+ * @param {Map<string, string>} rewriteMap - Download result, mutated in place
+ * @param {ReadonlyMap<string, string>} alias - Dropped URL to kept URL, from
+ *   {@link planImageFamilies}
+ * @returns {number} How many references were reconnected
+ */
+export function applyFamilyAliases(
+  rewriteMap: Map<string, string>,
+  alias: ReadonlyMap<string, string>,
+): number {
+  let reconnected = 0;
+  for (const [dropped, kept] of alias) {
+    const local = rewriteMap.get(kept);
+    if (local !== undefined) {
+      rewriteMap.set(dropped, local);
+      reconnected += 1;
+    }
+  }
+  return reconnected;
+}

package/src/index.ts

@@ -1,4 +1,7 @@
-export { capturePage, launchBrowser, closeBrowser } from "./capture.ts";
+export { capturePage } from "./capture.ts";
+export { launchBrowser, closeBrowser } from "./browser-local.ts";
+export { createLocalIo } from "./io.ts";
+export { runImportPipeline } from "./pipeline.ts";
 export { importSite } from "./run.ts";
 export { convertToJx } from "./to-jx.ts";
 export { emitProject, emitMultiPageProject } from "./emit.ts";
@@ -33,13 +36,16 @@ export {
   serveDirectory,
   routeToUrlPath,
 } from "./verify.ts";
-export type { CaptureResult, LaunchOptions } from "./capture.ts";
+export type { CaptureResult, ImportBrowser, ImportPage } from "./capture.ts";
+export type { LaunchOptions } from "./browser-local.ts";
+export type { ImportIo } from "./io.ts";
 export type {
-  ImportSiteOptions,
+  ImportPipelineOptions,
+  ImportPipelineResult,
   ImportProgressEvent,
   ImportPhase,
-  ImportSiteResult,
-} from "./run.ts";
+} from "./pipeline.ts";
+export type { ImportSiteOptions, ImportSiteResult } from "./run.ts";
 export type { ToJxResult } from "./to-jx.ts";
 export type { EmitOptions, EmitResult, MultiEmitOptions } from "./emit.ts";
 export type { CapturedStyle, StyleCaptureResult } from "./style-capture.ts";

package/src/io.ts

@@ -0,0 +1,52 @@
+/**
+ * The sink every file an import produces goes through.
+ *
+ * The pipeline used to call `Bun.write(join(outDir, …))` at six sites, which made "run an import"
+ * and "have a writable filesystem" the same requirement. Jx Cloud is a Cloudflare Worker: it has
+ * neither `Bun` nor a disk, and commits the emitted project straight to git. So the destination is
+ * a parameter now — `createLocalIo` is the disk implementation and the only one that imports
+ * `node:fs`, and a Worker supplies its own without the pipeline knowing the difference.
+ */
+
+import { mkdir } from "node:fs/promises";
+import { dirname, join } from "node:path";
+
+export interface ImportIo {
+  /**
+   * Write one file.
+   *
+   * `relPath` is PROJECT-RELATIVE and forward-slashed — `"pages/blog/post.json"`, never an absolute
+   * path and never a backslash. A sink that has no filesystem uses it as a key verbatim; a sink
+   * that does joins it onto its own root.
+   */
+  write: (relPath: string, data: string | Uint8Array) => Promise<void>;
+  /**
+   * Create an empty directory, if directories are a thing this sink has.
+   *
+   * Optional because they usually are not: a git tree, an object store and a zip all record only
+   * the files, and an empty directory is unrepresentable in every one of them. The local import
+   * still seeds `pages/`, `layouts/`, `components/` and `public/` up front so a host can open the
+   * project the moment the run starts, which is what this exists for.
+   */
+  mkdir?: (relPath: string) => Promise<void>;
+}
+
+/** Split a project-relative path into segments, so a sink's own separator is the one used. */
+function toSegments(relPath: string): string[] {
+  return relPath.split("/").filter((segment) => segment !== "");
+}
+
+/** The disk sink: `outDir` plus the relative path, with parent directories created on demand. */
+export function createLocalIo(outDir: string): ImportIo {
+  const resolve = (relPath: string): string => join(outDir, ...toSegments(relPath));
+  return {
+    async write(relPath, data) {
+      const path = resolve(relPath);
+      await mkdir(dirname(path), { recursive: true });
+      await Bun.write(path, data);
+    },
+    async mkdir(relPath) {
+      await mkdir(resolve(relPath), { recursive: true });
+    },
+  };
+}

package/src/media-extract.ts

@@ -12,11 +12,11 @@
  * so the import can SAY where a width went, not so its styles can be recovered.
  */
 
-import type { Page } from "puppeteer-core";
+import type { ImportPage } from "./capture.ts";
 import type { CapturedStyle } from "./style-capture.ts";
 import { captureStylesAtWidth } from "./style-capture.ts";
 import { computeMediaDelta } from "./style-diff.ts";
-import { analyzeMediaQueries, planBreakpoints } from "./breakpoint-plan.ts";
+import { analyzeMediaQueries, parseWidthQuery, planBreakpoints } from "./breakpoint-plan.ts";
 import type { Breakpoint, BreakpointPolicy } from "./breakpoint-plan.ts";
 import type { DiffedStyle } from "./style-diff.ts";
 
@@ -53,10 +53,70 @@ export interface ExtractMediaOptions {
   plan?: readonly Breakpoint[] | undefined;
 }
 
+/**
+ * How far inside its own band the corroborating sample sits. Wide enough that a fluid element
+ * measures differently, narrow enough to stay clear of the neighbouring breakpoint.
+ */
+const SECOND_SAMPLE_OFFSET = 40;
+
+/**
+ * A second viewport width INSIDE the same media band.
+ *
+ * The direction is the whole point: for `(max-width: N)` the band runs downward, so the second
+ * sample is narrower; for `(min-width: N)` it runs upward and the sample must be wider, or it
+ * leaves the band and measures the rules this breakpoint exists to distinguish itself from.
+ */
+export function secondSampleWidth(bp: Breakpoint): number {
+  const parsed = parseWidthQuery(bp.query);
+  const direction = parsed?.type === "min" ? 1 : -1;
+  return Math.max(1, bp.testWidth + direction * SECOND_SAMPLE_OFFSET);
+}
+
+/**
+ * Keep only the declarations two samples of the same band AGREE on.
+ *
+ * `getComputedStyle` returns used values, so `width` and `height` come back as the pixels the
+ * element happens to occupy - never the authored `100%` or `auto`. Diffing one sample against the
+ * base therefore reported a "change" for every fluid element at every breakpoint: two thirds of all
+ * responsive declarations in a real import were the viewport's own width written back as the
+ * element's, which does not merely waste space but PINS the layout and defeats the reflow the
+ * breakpoint existed for.
+ *
+ * Measuring twice inside the band separates the two cases without knowing which properties are
+ * geometry. An authored value is the same at both widths and survives; a resolved one moves with
+ * the viewport and is dropped. A property whose value legitimately differs across the band (a
+ * percentage-positioned element) is dropped too - that is the intended trade, since nothing in a
+ * computed-style capture can tell it from noise.
+ */
+export function agreedDeltas(
+  primary: readonly DiffedStyle[],
+  corroborating: readonly DiffedStyle[],
+): DiffedStyle[] {
+  const second = new Map(corroborating.map((d) => [d.path.join(","), d.style]));
+  const agreed: DiffedStyle[] = [];
+
+  for (const delta of primary) {
+    const other = second.get(delta.path.join(","));
+    if (!other) {
+      continue;
+    }
+    const style: Record<string, string | number> = {};
+    for (const [prop, value] of Object.entries(delta.style)) {
+      if (other[prop] === value) {
+        style[prop] = value;
+      }
+    }
+    if (Object.keys(style).length > 0) {
+      agreed.push({ path: delta.path, style });
+    }
+  }
+  return agreed;
+}
+
 /**
  * Extract `$media` style deltas by re-capturing at each KEPT breakpoint width.
  *
- * @param {Page} page - Puppeteer page (must still have the target page loaded)
+ * @param {ImportPage} page - Browser page (must still have the target page loaded)
  * @param {CapturedStyle[]} baseElements - Style capture from the base viewport
  * @param {Record<string, Record<string, string>>} uaDefaults - UA-default baselines per tagName
  * @param {readonly string[]} mediaQueries - `@media` queries discovered in the page's stylesheets
@@ -64,7 +124,7 @@ export interface ExtractMediaOptions {
  * @returns {Promise<MediaExtractionResult>}
  */
 export async function extractMedia(
-  page: Page,
+  page: ImportPage,
   baseElements: CapturedStyle[],
   uaDefaults: Record<string, Record<string, string>>,
   mediaQueries: readonly string[],
@@ -81,8 +141,17 @@ export async function extractMedia(
   const allDeltas: Record<string, DiffedStyle[]> = {};
 
   for (const bp of keep) {
-    const bpElements = await captureStylesAtWidth(page, bp.testWidth);
-    const deltas = computeMediaDelta(baseElements, bpElements, uaDefaults);
+    const primary = computeMediaDelta(
+      baseElements,
+      await captureStylesAtWidth(page, bp.testWidth),
+      uaDefaults,
+    );
+    const corroborating = computeMediaDelta(
+      baseElements,
+      await captureStylesAtWidth(page, secondSampleWidth(bp)),
+      uaDefaults,
+    );
+    const deltas = agreedDeltas(primary, corroborating);
 
     if (deltas.length > 0) {
       projectBreakpoints[bp.name] = bp.query;