@trueclone/cli 0.2.0 → 0.4.0-rc.1

package/README.md

@@ -1,11 +1,11 @@
 # trueclone
 
-**A working twin of any website, from one URL, with scores that prove it.**
+**The exact same website, from one URL, at every screen size, with the checks to prove it.**
 
-Give your coding agent a URL. trueclone captures the site, extracts its design system, guides the rebuild and measures the result against the original until it matches: layout, scroll states, motion curves, interactions, hover effects and computed styles, at phone, tablet and desktop widths. You get the clone as HTML and as a Next.js app, plus the design system as `DESIGN.md` and a shadcn `globals.css`.
+Give your coding agent a URL. trueclone captures the site, extracts its design system, seeds the clone with the original's structure, hands the agent the original's own scripts to port every behaviour from, and measures the result against the original until it matches: layout, scroll states, canvases, motion, interactions, hovers, styles and the load sequence, at the sizes it was built from and at sizes it never saw, plus a frame-by-frame visual review. You get the clone as HTML and as a Next.js app, plus the design system as `DESIGN.md` and a shadcn `globals.css`.
 
 ```bash
-npx @trueclone/cli init            # once per project: installs trueclone, the skill for your agent, REA as an MCP server
+npx @trueclone/cli init            # once per project: installs trueclone and the skill for your agent
 # then tell Claude Code, Codex or Cursor:
 #   "clone https://example.com with trueclone"
 ```
@@ -23,7 +23,7 @@ npx @trueclone/cli init            # once per project: installs trueclone, the s
 
 ## Proof
 
-Three benchmarks with very different stacks, scored by the tool itself:
+Three benchmarks with very different stacks, scored by the tool itself. These numbers were measured at the three build sizes only, before trueclone 0.4 added held-out sizes and the visual review; 0.4's benchmark runs replace them.
 
 **[rea.tools](https://rea.tools/)**: static docs with a canvas game and interactive demos, exact mode (copied with the owner's permission).
 
@@ -60,33 +60,25 @@ The hand-built portfolio isn't perfect yet, and its report says so: computed sty
 ## How it works
 
 ```
-URL ─► capture ─► understand ─► design system ─► build ─► score ─► report
-        3 widths    motion         DESIGN.md        your      7 checks   REPORT.md
-        HAR, HTML   inventory      globals.css      agent     in parallel
-        assets      + REA          tokens.css                  ▲     │
-                                                               └─────┘ until every target passes
+URL ─► capture ─► understand ─► design system ─► seed ─► build ─► score + review ─► report
+        5 sizes    the site's      DESIGN.md        structure  your    10 checks at       REPORT.md
+        scripts    own scripts,    globals.css      + viewport agent   build and held-out
+        HAR        motion runtime  tokens.css       functions          sizes, by eye too
+                                                                  ▲            │
+                                                                  └────────────┘ until every check passes
 ```
 
-1. **Capture** (`trueclone capture`): full-page screenshots at 390, 768 and 1440px, sections, rendered HTML, assets, every network request.
-2. **Understand** (`trueclone motion`, REA): reads the live animation runtime (GSAP timelines, ScrollTriggers, Lenis and Swiper settings, CSS animations, cursor-driven tweens) and, through REA, bundles, source maps, event listeners and API endpoints.
+1. **Capture** (`trueclone capture`): full-page screenshots at five sizes (390, 768 and 1440 wide to build from; 1280 and 1920 held out, never used to build), sections, rendered HTML, assets, every network request, every script the page ran (with what ran and where each event listener lives), and the inline values scripts set, read at extra sizes inside each of the site's breakpoint ranges.
+2. **Understand**: `reference/scripts/INDEX.md` (the site's own code, ranked by what ran), the live animation runtime (`trueclone motion`: GSAP timelines, ScrollTriggers, Lenis, Swiper, CSS animations) and the scroll states. The agent ports each behaviour's rule from the site's code instead of guessing it from effects.
 3. **Design system** (`trueclone design`): one canonical `design-tokens.json`, rendered to DESIGN.md, globals.css and the clone's tokens.
-4. **Build**: `trueclone reveals` records the original's scroll reveals frame by frame and its scroll-driven class changes; `trueclone widgets` clicks every tab and menu and records each state; `trueclone seed` turns the script-free mirror into the clone (template mode: layout-measured lorem text and same-size media placeholders) and replays what was recorded. Layout is at 99%+ before anyone writes CSS; your agent writes the remaining behaviour, guided by the skill. `trueclone rules` shows the original's CSS for any element (like DevTools).
-5. **Score** (`trueclone score`): layout pixel diff per section, scroll states replayed, motion curves sampled, interaction scenarios with change assertions, every hover, computed styles at matching points. Reference measurements are cached, so only the clone is re-measured.
-6. **Report**: `REPORT.md` with the verdict, what to fix first, and what was not copied.
+4. **Seed** (`trueclone seed`): the script-free mirror becomes the clone (template mode: layout-measured lorem text and same-size media placeholders). A value a script computed from the screen size is carried as that function (`calc()`), never as one size's number; a value no such function explains is left to the agent and listed. Pins pin, one-shot reveals and scroll class changes replay, shadow roots render, the first paint is held until the clone's scripts have run.
+5. **Build**: the agent writes `clone/script.js`, scene by scene, from the site's own rules; `clone/patches/` for anything on top of the seed; `trueclone rules` shows the original's CSS for any element.
+6. **Score and review** (`trueclone score`, `trueclone review`): layout, scroll states, canvases, motion curves, details, hovers (outcome, not just "something changed"), interactions (same end state), load sequence, at the build sizes and the held-out sizes; then the reference and the clone side by side, frame by frame, with a verdict for each.
+7. **Report**: `REPORT.md` with every check at every size, the review, what to fix first, and what was not copied.
 
-## Why not just REA?
+## REA
 
-trueclone **bundles** [REA](https://github.com/morluto/rea) (Reverse Engineer Anything) and uses it, but works without it too.
-
-| | REA on its own | trueclone |
-|---|---|---|
-| What it is | A microscope: typed tools that let your agent look inside apps, binaries and pages | A factory with quality control: capture, design system, build guide, scores, report |
-| Capture | Your Chrome over CDP, one page state | 3 widths, every scroll state, motion runtime, assets, network |
-| Knows when the clone is right | No: the agent judges by eye | Yes: 7 measured checks with targets |
-| Tells you what's wrong | No | "Footer column 2 is at x 189, the original's at 732", plus the original's CSS rule |
-| Outputs | Whatever the agent writes | HTML clone, Next.js app, DESIGN.md, globals.css, motion recipe, REPORT.md |
-
-REA answers *how does this work?* trueclone answers *is my copy identical, and where isn't it?* For the hard parts (a bundled physics rule, a shader, the API a component calls) the skill sends your agent to REA.
+trueclone bundles [REA](https://github.com/morluto/rea) (Reverse Engineer Anything) for the rare part no script reading explains (a bundled physics rule, a shader, WASM): `npx trueclone rea --help`. It is not part of the standard flow: the site's scripts, saved and ranked by the capture, carry what the agent needs.
 
 ## Modes and guardrails
 
@@ -103,19 +95,22 @@ REA answers *how does this work?* trueclone answers *is my copy identical, and w
 
 ```bash
 npx @trueclone/cli init                 # set up a project for your agent (then `npx trueclone ...`)
-npx trueclone doctor                    # check Node, Chrome and REA
+npx trueclone doctor                    # check Node and Chrome
 npx trueclone <url> [name]              # capture + design-system draft
 npx trueclone capture <url> [name] [--mode exact --permission "<owner>"]
 npx trueclone motion <name>             # motion inventory
 npx trueclone design <name>             # DESIGN.md + globals.css
 npx trueclone reveals <name>            # record scroll reveals and scroll class changes
 npx trueclone widgets <name>            # record every tab and menu state
-npx trueclone seed <name>               # clone/ from the mirror (template: placeholder text and media)
+npx trueclone seed <name>               # clone/ from the mirror (template: placeholder text and media); --patches re-applies clone/patches/ in a second
 npx trueclone rules <name> "<selector>" # the original's CSS rules for an element
 npx trueclone textshape <name> --write  # template mode: placeholder text with the original's line breaks
-npx trueclone score <name> [--quick]    # every check, then REPORT.md
-npx trueclone next <name> --verify      # Next.js + Tailwind + shadcn app, scored
-npx trueclone rea <args>                # bundled REA
+npx trueclone load <name>               # load sequence on both sides: settledness 0.25-4 s after navigation, cold cache, same network
+npx trueclone score <name> [--quick]    # every check, then REPORT.md (--only detail,load --viewport tablet after a fix; unchanged checks are kept)
+npx trueclone explain <name> <y>        # one place on the page: what every check saw there, plus a reference|clone|diff crop
+npx trueclone review <name> --size wide # reference and clone side by side at a held-out size: load, every section, hover
+npx trueclone next <name> --verify      # Next.js + Tailwind + shadcn app, scored into REPORT.next.md
+npx trueclone rea <args>                # bundled REA, for the rare deep case
 npx trueclone help                      # every step
 ```
 
@@ -134,7 +129,7 @@ Node 22.19+, 24.11+ or 26+ (the same as REA), and Google Chrome for captures (it
 
 - **Whole sites:** crawl every route, shared header and footer as components.
 - **Data layer:** captured API responses turned into mock routes and fixtures, so the clone works offline.
-- **Benchmarks:** React with Framer Motion, a Next.js site with source maps, a data-driven app; each scored with and without REA.
+- **Benchmarks by kind of site:** static, Tailwind/Next.js, Webflow, Webflow + GSAP, Framer, WordPress builders, WebGL showcases, docs, e-commerce, SPAs, scroll-jacking, embeds: each scored at build and held-out sizes, published here.
 - **A free web page:** paste a URL, get its DESIGN.md and globals.css.
 
 ## Credits

package/bin/trueclone.mjs

@@ -19,22 +19,28 @@ const require = createRequire(import.meta.url);
 const { name, version } = JSON.parse(await fs.readFile(path.join(PKG, 'package.json'), 'utf8'));
 
 const STEPS = {
-  capture: ['capture.mjs', 'capture a live page: screenshots at 390/768/1440, sections, tokens, rendered HTML, assets'],
-  seed: ['seed.mjs', 'exact mode: start clone/ from the script-free mirror (markup, text, styles, media)'],
+  capture: ['capture.mjs', 'capture a live page at 5 sizes (3 to build from, 2 held out), its scripts, assets, rendered HTML, inline values at extra sizes'],
+  seed: ['seed.mjs', 'clone/ from the script-free mirror: structure, viewport functions, pins, reveals (--patches: re-apply clone/patches/ only)'],
   design: ['design.mjs', 'design-tokens.json -> DESIGN.md (linted), shadcn globals.css, clone/tokens.css'],
   motion: ['motion.mjs', 'motion inventory from the live runtime (GSAP/ScrollTrigger, Lenis, Swiper, CSS animations)'],
+  understand: ['understand.mjs', 'optional, rarely needed: REA code evidence -> reference/code.md (capture already saves every script, ranked, in reference/scripts/)'],
   reveals: ['reveals.mjs', 'record one-shot scroll reveals frame by frame, so seed can replay them (any library)'],
   widgets: ['widgets.mjs', 'record every tab and menu state by clicking it, so seed can replay them (template mode)'],
-  states: ['states.mjs', 'live scroll states; --clone scores the rebuild step by step'],
+  states: ['states.mjs', 'live scroll states at every scored size; --clone scores the rebuild step by step (canvases too)'],
   curves: ['curves.mjs', 'motion score: sampled property curves, reference vs clone (motion-map.json)'],
   interact: ['interact.mjs', 'interaction tests: click/hover/drag/key scenarios on both sides (interactions.json)'],
   detail: ['detail.mjs', 'style diff at matching points: font, size, weight, line height, colour, background, radius'],
-  hovers: ['hovers.mjs', 'hover every interactive element on both sides and compare what changes'],
-  rules: ['rules.mjs', 'every CSS rule matching an element on the reference (+ ::before/::after, @media)'],
+  hovers: ['hovers.mjs', 'hover every control and every element with a hover listener on both sides; the outcome must match'],
+  load: ['load.mjs', 'load sequence: how settled each side is 0.25/0.5/1/2/4 s after navigation, cold cache, same network'],
+  drift: ['drift.mjs', 'has the live page changed since the capture? (page height and sections per width vs meta.json)'],
+  owned: ['owned.mjs', 'which sections of the clone script.js rebuilds at boot (load with scripts blocked vs running)'],
+  rules: ['rules.mjs', 'every CSS rule matching an element on the reference (+ ::before/::after, @media); --clone for the clone'],
+  review: ['review.mjs', 'reference and clone side by side at a held-out size: load, every section, hover; verdicts go in notes.md'],
+  explain: ['explain.mjs', 'one place on the page: what layout, states, detail and hovers saw there, plus a reference|clone|diff crop'],
   textshape: ['textshape.mjs', 'template mode: placeholder words with the reference word widths, so lines break the same'],
   diff: ['diff.mjs', 'full-page pixel diff per viewport and section (--structure masks text and media)'],
   spec: ['spec.mjs', 'measured boxes and styles of the live page (--clone for the rebuild)'],
-  tiles: ['tiles.mjs', 'cut a tall screenshot into readable tiles'],
+  tiles: ['tiles.mjs', 'the full-page shots cut into one tile per screen: tiles <name> [--size wide] [--clone], or tiles <file.png>'],
   next: ['next.mjs', 'Next.js + Tailwind v4 + shadcn app from the verified clone; --verify scores it'],
   score: ['score.mjs', 'every score in parallel groups, time limit per step, writes REPORT.md'],
   report: ['report.mjs', 'REPORT.md from the latest scores: every number, every gap, what cannot be copied'],
@@ -51,14 +57,14 @@ const run = (file, args) => new Promise((resolve) => {
 });
 
 function help() {
-  console.log(`trueclone ${version}: a working twin of a website, proven by scores
+  console.log(`trueclone ${version}: the exact same website, at every screen size
 
 usage
-  npx @trueclone/cli init            set up this folder for your coding agent (installs trueclone)
+  npx @trueclone/cli init            set up this folder for your coding agent (installs trueclone; --with-rea adds REA as MCP)
   trueclone <url> [name]             capture + design-system draft (template mode)
   trueclone <step> <name> [options]  run one step
-  trueclone rea <args>               bundled REA (Reverse Engineer Anything)
-  trueclone doctor                   check Node, browsers and REA
+  trueclone rea <args>               bundled REA (Reverse Engineer Anything), for the rare deep case
+  trueclone doctor                   check Node and browsers
 
 steps
 ${Object.entries(STEPS).map(([k, [, d]]) => `  ${k.padEnd(10)} ${d}`).join('\n')}
@@ -80,11 +86,15 @@ async function init() {
   let agents = (await exists(agentsFile)) ? await fs.readFile(agentsFile, 'utf8') : '';
   agents = agents.includes('<!-- trueclone:start -->') ? agents.replace(/<!-- trueclone:start -->[\s\S]*?<!-- trueclone:end -->\n?/, block) : `${agents}${agents && !agents.endsWith('\n\n') ? '\n' : ''}${block}`;
   await fs.writeFile(agentsFile, agents);
-  // 3. REA as an MCP server for agents that speak MCP (Claude Code reads .mcp.json)
-  const mcpFile = path.join(cwd, '.mcp.json');
-  const mcp = (await exists(mcpFile)) ? JSON.parse(await fs.readFile(mcpFile, 'utf8')) : {};
-  mcp.mcpServers = { ...(mcp.mcpServers || {}), rea: { command: 'npx', args: ['-y', `${name}@${version}`, 'rea', 'mcp'] } };
-  await fs.writeFile(mcpFile, `${JSON.stringify(mcp, null, 2)}\n`);
+  // 3. REA as an MCP server only on request (--with-rea): the standard flow reads the site's own scripts from the
+  // capture; REA is for the rare deep case and stays reachable as `npx trueclone rea` either way
+  const withRea = process.argv.includes('--with-rea');
+  if (withRea) {
+    const mcpFile = path.join(cwd, '.mcp.json');
+    const mcp = (await exists(mcpFile)) ? JSON.parse(await fs.readFile(mcpFile, 'utf8')) : {};
+    mcp.mcpServers = { ...(mcp.mcpServers || {}), rea: { command: 'npx', args: ['-y', `${name}@${version}`, 'rea', 'mcp'] } };
+    await fs.writeFile(mcpFile, `${JSON.stringify(mcp, null, 2)}\n`);
+  }
   // 4. captures, clones and browser profiles stay local
   const ignoreFile = path.join(cwd, '.gitignore');
   let ignore = (await exists(ignoreFile)) ? await fs.readFile(ignoreFile, 'utf8') : '';
@@ -103,8 +113,7 @@ async function init() {
   console.log(`trueclone set up in ${cwd}
   .claude/skills/trueclone/SKILL.md   the workflow your agent follows
   AGENTS.md                           points Codex, Cursor and others at the skill
-  .mcp.json                           REA as an MCP server
-  .gitignore                          sites/ stays local
+${withRea ? '  .mcp.json                           REA as an MCP server\n' : ''}  .gitignore                          sites/ stays local
   package.json                        ${installed}
 next: npx trueclone doctor, then ask your agent "clone <url> with trueclone"`);
 }
@@ -120,8 +129,8 @@ async function doctor() {
     try { const b = await chromium.launch(opts); await b.close(); console.log(`ok   ${label}`); }
     catch { console.log(`warn ${label} not found${opts.channel ? ': install Google Chrome' : ': npx playwright install chromium'}`); }
   }
-  try { require.resolve('rea-agents/package.json'); console.log('ok   REA bundled (trueclone rea doctor checks its decompilers)'); }
-  catch { console.log('warn REA not installed'); ok = false; }
+  try { require.resolve('rea-agents/package.json'); console.log('ok   REA bundled, for the rare deep case (trueclone rea doctor checks its decompilers)'); }
+  catch { console.log('warn REA not installed (optional)'); }
   process.exitCode = ok ? 0 : 1;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trueclone/cli",
-  "version": "0.2.0",
+  "version": "0.4.0-rc.1",
   "description": "A working twin of any website from its URL: HTML clone, Next.js + Tailwind + shadcn app, DESIGN.md and globals.css, proven by layout, motion, interaction and style scores. Bundles REA.",
   "type": "module",
   "bin": {
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@google/design.md": "^0.4.0",
+    "js-beautify": "2.0.3",
     "parse5": "^8.0.1",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.64.0",

package/scripts/capture.mjs

@@ -5,7 +5,8 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import crypto from 'node:crypto';
-import { VIEWPORTS, parseArgs, siteName, openBrowser, newPage, settle, sectionsOf, mask } from './lib.mjs';
+import { SCORED, VIEWPORTS, HELD_OUT, parseArgs, siteName, openBrowser, newPage, settle, sectionsOf, mask } from './lib.mjs';
+import { startScriptEvidence } from './scripts-evidence.mjs';
 
 const { pos, flags } = parseArgs(process.argv.slice(2));
 const [url, nameArg] = pos;
@@ -92,10 +93,14 @@ const browser = await openBrowser(flags.cdp);
 const manifest = [];
 const summary = [];
 const rootFontSize = {};
+const inlineStyles = {};
+const scriptQueries = new Set(); // media queries the page's scripts asked (matchMedia), at any size
 try {
-  for (const vp of VIEWPORTS) {
+  // the seed sizes and the held-out sizes: the held-out ones are shot and measured for scoring, nothing else
+  for (const vp of SCORED) {
     const desktop = vp.name === 'desktop';
     const { context, page } = await newPage(browser, vp, desktop ? { recordHar: { path: path.join(ref, 'desktop.har'), content: 'omit' } } : {});
+    await page.addInitScript(recordMediaQueries);
     if (desktop) {
       page.on('response', async (res) => {
         const rawType = res.request().resourceType();
@@ -114,6 +119,8 @@ try {
         } catch { /* redirects, data: urls, aborted */ }
       });
     }
+    // desktop: the page's own scripts and what ran, saved as evidence (reference/scripts/)
+    const finishEvidence = desktop ? await startScriptEvidence(page, url).catch(() => null) : null;
     await page.goto(url, { waitUntil: 'load', timeout: 60000 });
     // Components that mount only while in view (a lazy wordmark, an embed) are often unmounted again by the time
     // the DOM is saved. Watch from load: an element that was empty, got content while scrolled into view and is empty
@@ -137,6 +144,16 @@ try {
       }).observe(document.body, { subtree: true, childList: true });
     });
     await settle(page, hide);
+    // inline styles at this size, by element path: scripts size and place things from the viewport (a grid's computed
+    // cells, a pin's distance), and the rendered HTML only keeps one size's values. With the extra sizes read below,
+    // the seed tells a function of the viewport from a constant. Read here, settled and before any screenshot, in the
+    // same state as the extra sizes (a full-page shot mounts content and fires reveals).
+    if (!vp.heldOut) inlineStyles[`${vp.width}x${vp.height}`] = await page.evaluate(readInlineStyles);
+    for (const q of await page.evaluate(() => window.__tcMediaQueries || []).catch(() => [])) scriptQueries.add(q);
+    if (finishEvidence) {
+      const ev = await finishEvidence(path.join(ref, 'scripts')).catch((e) => { console.warn(`WARNING scripts not saved: ${e.message}`); return null; });
+      if (ev) console.log(`scripts: ${ev.scripts} saved to reference/scripts/ (${ev.ran} ran during load and scroll), ${ev.listeners} event-listener handlers located (INDEX.md)`);
+    }
     // A full-page screenshot brings the whole page into view at once, which mounts view-mounted components and starts
     // their reveals: shoot until two shots agree, so the reference shows a settled page, not a fade caught at 0%.
     let shot = await page.screenshot({ fullPage: true });
@@ -162,6 +179,23 @@ try {
           el.setAttribute('data-tc-rich', String(i));
           restore[i++] = best.html;
         }
+        // open shadow roots (web components, a Webflow code island) are not part of outerHTML: each becomes a
+        // declarative <template shadowrootmode="open"> inside its host, which the browser turns back into a shadow
+        // root while parsing, no script needed. Deepest first, so a host inside a shadow root is carried too.
+        // Constructed stylesheets (adoptedStyleSheets) are written out as a <style> at the top of the template.
+        const hosts = [];
+        (function find(scope) { for (const el of scope.querySelectorAll('*')) if (el.shadowRoot) { find(el.shadowRoot); hosts.push(el); } })(document);
+        for (const host of hosts) {
+          const t = document.createElement('template');
+          t.setAttribute('shadowrootmode', 'open');
+          t.setAttribute('shadowrootserializable', '');
+          const adopted = (host.shadowRoot.adoptedStyleSheets || []).map((s) => { try { return [...s.cssRules].map((r) => r.cssText).join('\n'); } catch { return ''; } }).filter(Boolean);
+          if (adopted.length) { const st = document.createElement('style'); st.textContent = adopted.join('\n'); t.content.appendChild(st); }
+          for (const n of host.shadowRoot.childNodes) t.content.appendChild(n.cloneNode(true));
+          host.prepend(t);
+          host.setAttribute('data-tc-shadow', '');
+        }
+        if (hosts.length) console.log(`tc-shadow: serialised ${hosts.length} open shadow root(s) as declarative shadow DOM`);
         const doc = document.documentElement.cloneNode(true);
         for (const el of document.querySelectorAll('[data-tc-rich]')) el.removeAttribute('data-tc-rich');
         for (const el of doc.querySelectorAll('[data-tc-rich]')) {
@@ -180,7 +214,7 @@ try {
     }
     await mask(page);
     await page.screenshot({ path: path.join(ref, `${vp.name}.mask.png`), fullPage: true });
-    summary.push({ viewport: vp.name, width: vp.width, pageHeight: height, sections: sections.length });
+    summary.push({ viewport: vp.name, width: vp.width, height: vp.height, ...(vp.heldOut ? { heldOut: true } : {}), pageHeight: height, sections: sections.length });
     await context.close(); // flushes the HAR
   }
 } finally {
@@ -188,6 +222,33 @@ try {
 }
 
 await fs.writeFile(path.join(ref, 'assets', 'manifest.json'), JSON.stringify(manifest, null, 2));
+
+// The site's own breakpoints (its @media width queries) and extra sizes inside every range they make: inline styles
+// read there let the seed fit each value a script set as a function of the viewport (a·vw + b·vh + c) per range, or
+// see that it is none and leave it to the agent. Never the held-out sizes: those stay unseen by anything that builds.
+const breakpoints = await siteBreakpoints(manifest, [...scriptQueries]);
+const fitSizes = sizesForFit(breakpoints);
+if (fitSizes.length) {
+  const queue = [...fitSizes];
+  const browser2 = await openBrowser(flags.cdp);
+  try {
+    await Promise.all(Array.from({ length: 3 }, async () => {
+      for (let s = queue.shift(); s; s = queue.shift()) {
+        const { context, page } = await newPage(browser2, { name: `fit${s.width}`, width: s.width, height: s.height });
+        try {
+          await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+          await settle(page, hide);
+          inlineStyles[`${s.width}x${s.height}`] = await page.evaluate(readInlineStyles);
+        } catch (e) { console.warn(`WARNING inline styles at ${s.width}x${s.height} not read: ${e.message.split('\n')[0]}`); }
+        finally { await context.close(); }
+      }
+    }));
+  } finally {
+    if (!flags.cdp) await browser2.close();
+  }
+}
+await fs.writeFile(path.join(ref, 'inline-styles.json'), JSON.stringify({ breakpoints, scriptQueries: [...scriptQueries], sizes: Object.keys(inlineStyles), styles: inlineStyles }));
+console.log(`inline styles read at ${Object.keys(inlineStyles).length} sizes (site breakpoints: ${breakpoints.join(', ') || 'none found'}; ${scriptQueries.size} width quer${scriptQueries.size === 1 ? 'y' : 'ies'} asked by its scripts)`);
 await fs.writeFile(path.join(ref, 'meta.json'), JSON.stringify({ url, name, mode, permission, hide, capturedAt: new Date().toISOString(), rootFontSize, viewports: summary }, null, 2));
 await buildMirror(manifest, url, mode === 'exact' ? `Exact mode, authorised by: ${permission}.` : "Template mode: the site's own content, kept as a reference only.");
 console.table(summary);
@@ -202,6 +263,24 @@ async function buildMirror(manifest, url, note) {
   const mirror = path.join(ref, 'mirror');
   await fs.rm(mirror, { recursive: true, force: true });
   await fs.mkdir(path.join(mirror, 'css'), { recursive: true });
+  // Rendered twice: the first pass shows which media the capture never saw (lazy images below the fold, hover and
+  // state images, sources behind a media query, fonts behind @import); fetchMissing() saves them and the second pass
+  // points at the local copies. A page is only as complete as its slowest-loading image.
+  let out = await renderMirror(manifest, url, note, mirror);
+  const missing = findRemoteMedia(out);
+  if (missing.length) {
+    const added = await fetchMissing(missing, manifest, url);
+    if (added) out = await renderMirror(manifest, url, note, mirror);
+    await fs.writeFile(path.join(ref, 'assets', 'manifest.json'), JSON.stringify(manifest, null, 2));
+    console.log(`mirror: fetched ${added}/${missing.length} media the capture had not seen (lazy, hover or conditional sources)`);
+  }
+  for (const [file, css] of out.css) await fs.writeFile(path.join(mirror, 'css', file), css);
+  await fs.writeFile(path.join(mirror, 'index.html'), out.html);
+  const left = findRemoteMedia(out);
+  console.log(`mirror: reference/mirror/index.html (${manifest.length} local assets${left.length ? `, ${left.length} remote media left: ${left.slice(0, 3).join(', ')}` : ''})`);
+}
+
+async function renderMirror(manifest, url, note, mirror) {
   const byUrl = new Map(manifest.map((m) => [m.url.split('#')[0], m]));
   const abs = (u, base) => { try { return new URL(u.trim().replace(/^['"]|['"]$/g, '').replaceAll('&amp;', '&'), base).href.split('#')[0]; } catch { return null; } };
   const cssName = (m) => path.basename(m.file);
@@ -218,9 +297,10 @@ async function buildMirror(manifest, url, note) {
     .replace(/@import\s+(['"])([^'"]+)\1/g, (all, q, u) => `@import "${local(abs(u, base), fromDir) || u}"`);
 
   // stylesheets: rewritten copies under mirror/css
+  const css = new Map();
   for (const m of manifest.filter((x) => x.type === 'stylesheet')) {
-    const css = await fs.readFile(path.join(ref, m.file), 'utf8');
-    await fs.writeFile(path.join(mirror, 'css', cssName(m)), rewriteCssUrls(css, m.url, path.join(mirror, 'css')));
+    const text = await fs.readFile(path.join(ref, m.file), 'utf8').catch(() => null);
+    if (text !== null) css.set(cssName(m), rewriteCssUrls(text, m.url, path.join(mirror, 'css')));
   }
 
   let html = await fs.readFile(path.join(ref, 'rendered.html'), 'utf8');
@@ -235,14 +315,164 @@ async function buildMirror(manifest, url, note) {
       const l = local(abs(u, url), mirror);
       return l ? ` ${attr}=${q}${l}${q}` : all;
     })
+    // a subresource-integrity hash belongs to the bytes at the original URL; after the rewrite it only makes the
+    // browser refuse the local copy (and the whole stylesheet with it)
+    .replace(/<link\b[^>]*>/gi, (tag) => tag.replace(/\s(?:integrity|crossorigin)(?:=("[^"]*"|'[^']*'|[^\s>]+))?/gi, ''))
     .replace(/\s(srcset|data-srcset)=("|')([^"']+)\2/gi, (all, attr, q, list) => ` ${attr}=${q}${list.split(',').map((part) => {
       const [u, ...rest] = part.trim().split(/\s+/);
       return [local(abs(u, url), mirror) || u, ...rest].join(' ');
     }).join(', ')}${q}`)
     .replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (all, attrs, css) => `<style${attrs}>${rewriteCssUrls(css, url, mirror)}</style>`)
-    .replace(/\sstyle=("|')([^"']*url\([^"']*)\1/gi, (all, q, css) => ` style=${q}${rewriteCssUrls(css, url, mirror)}${q}`)
+    // quotes inside a style attribute are HTML-escaped (url(&quot;…&quot;)): unescape before rewriting, re-escape after
+    .replace(/\sstyle=(?:"([^"]*)"|'([^']*)')/gi, (all, d, s) => {
+      const value = d ?? s;
+      if (!/url\(/i.test(value)) return all;
+      const plain = value.replaceAll('&quot;', '"').replaceAll('&#39;', "'");
+      return ` style="${rewriteCssUrls(plain, url, mirror).replaceAll('"', '&quot;')}"`;
+    })
     .replace(/<head([^>]*)>/i, `<head$1>\n<!-- trueclone local mirror of ${url}. ${note.replace(/--/g, '-')} Local reference only: do not deploy. -->\n<meta name="robots" content="noindex,nofollow">`);
-  await fs.writeFile(path.join(mirror, 'index.html'), html);
-  const missing = [...html.matchAll(/\s(?:src|href)=["'](https?:[^"']+)["']/gi)].map((m) => m[1]).filter((u) => !/^https?:\/\/[^/]+\/?$/.test(u));
-  console.log(`mirror: reference/mirror/index.html (${manifest.length} local assets, ${missing.length} remote URLs left, e.g. links)`);
+  return { html, css };
+}
+
+// Media the page still points at on the network after the rewrite: image/video/font/stylesheet URLs in src, srcset,
+// poster, data-src, <link> hrefs and CSS url(). Links to other pages (<a href>) are not media.
+function findRemoteMedia({ html, css }) {
+  const urls = new Set();
+  const media = (u) => u && /^https?:\/\//.test(u) && !/^https?:\/\/[^/]+\/?$/.test(u) && !/\.(js|mjs|json|html?)(\?|$)/i.test(u);
+  const add = (u) => { if (media(u)) urls.add(u.replaceAll('&amp;', '&')); };
+  for (const m of html.matchAll(/\s(?:src|poster|data-src)=["']([^"']+)["']/gi)) add(m[1]);
+  for (const m of html.matchAll(/\s(?:srcset|data-srcset)=["']([^"']+)["']/gi)) for (const part of m[1].split(',')) add(part.trim().split(/\s+/)[0]);
+  for (const m of html.matchAll(/<link\b[^>]*>/gi)) {
+    const rel = /\srel=["']?([^"'\s>]+)/i.exec(m[0])?.[1] || '';
+    const href = /\shref=["']([^"']+)["']/i.exec(m[0])?.[1];
+    if (/stylesheet|icon|apple-touch-icon|preload|prefetch/i.test(rel) && !/\sas=["']?(script|document|fetch)/i.test(m[0])) add(href);
+  }
+  const cssUrls = (text) => { for (const m of text.matchAll(/url\(\s*(?:&quot;|["'])?(https?:\/\/[^)"'&\s]+)/gi)) add(m[1]); };
+  cssUrls(html);
+  for (const text of css.values()) cssUrls(text);
+  return [...urls].slice(0, 300);
+}
+
+async function fetchMissing(urls, manifest, pageUrl) {
+  const typeOf = (u, contentType = '') => {
+    if (/text\/css/.test(contentType) || /\.css(\?|$)/i.test(u)) return 'stylesheet';
+    if (/^font\/|application\/(x-)?font|application\/vnd\.ms-fontobject/.test(contentType) || /\.(woff2?|ttf|otf|eot)(\?|$)/i.test(u)) return 'font';
+    if (/^image\//.test(contentType) || /\.(png|jpe?g|gif|webp|avif|svg|ico|bmp)(\?|$)/i.test(u)) return 'image';
+    return 'media';
+  };
+  let added = 0;
+  const queue = [...urls];
+  const worker = async () => {
+    for (let u = queue.shift(); u; u = queue.shift()) {
+      try {
+        const res = await fetch(u, { headers: { 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36', referer: pageUrl, accept: '*/*' }, signal: AbortSignal.timeout(20000), redirect: 'follow' });
+        if (!res.ok) continue;
+        const body = Buffer.from(await res.arrayBuffer());
+        if (!body.length || body.length > MAX_ASSET_BYTES) continue;
+        const contentType = res.headers.get('content-type') || '';
+        if (/text\/html/.test(contentType)) continue; // a page, not media (a soft 404)
+        const type = typeOf(u, contentType);
+        const parsed = new URL(u);
+        const base = (path.basename(parsed.pathname) || 'index').replace(/[^a-z0-9._-]/gi, '_').slice(-80);
+        const hash = crypto.createHash('sha1').update(u).digest('hex').slice(0, 8);
+        const file = path.join('assets', type, `${hash}-${base}`);
+        await fs.mkdir(path.join(ref, 'assets', type), { recursive: true });
+        await fs.writeFile(path.join(ref, file), body);
+        manifest.push({ url: u, type, file: file.replaceAll('\\', '/'), contentType, bytes: body.length, fetched: 'mirror' });
+        added++;
+      } catch { /* offline, blocked, timed out: stays remote and is listed */ }
+    }
+  };
+  await Promise.all(Array.from({ length: 6 }, worker));
+  return added;
+}
+
+// Inline styles and classes of every styled element, by element path, with the size actually laid out (clientWidth
+// excludes a classic scrollbar; scripts measure that, not the window).
+function readInlineStyles() {
+  const SKIP = new Set(['SCRIPT', 'NOSCRIPT', 'TEMPLATE', 'STYLE', 'LINK', 'META']);
+  const pathOf = (el) => {
+    const parts = [];
+    for (let n = el; n && n !== document.body; n = n.parentElement) {
+      const sibs = [...n.parentElement.children].filter((c) => !SKIP.has(c.tagName));
+      parts.unshift(`${n.tagName.toLowerCase()}:${sibs.indexOf(n) + 1}`);
+    }
+    return parts.join('>');
+  };
+  const styles = {};
+  for (const el of document.body.querySelectorAll('[style]')) {
+    if (SKIP.has(el.tagName) || (el.closest('svg') && el.tagName !== 'svg')) continue;
+    styles[pathOf(el)] = [el.getAttribute('style'), String(el.getAttribute('class') || '')];
+  }
+  return { w: document.documentElement.clientWidth, h: innerHeight, styles };
+}
+
+// Every media query the page's scripts ask (GSAP matchMedia, Webflow, a component's own breakpoint): what a script
+// does can switch at a width no stylesheet mentions.
+function recordMediaQueries() {
+  const seen = (window.__tcMediaQueries = []);
+  const original = window.matchMedia;
+  if (!original) return;
+  window.matchMedia = function matchMedia(q) {
+    if (typeof q === 'string' && /width/.test(q) && !seen.includes(q)) seen.push(q);
+    return original.call(this, q);
+  };
+}
+
+// The width breakpoints the site's stylesheets use at least twice (min-width: 992px is a boundary at 991), and every
+// width its scripts ask about (always kept: a script's breakpoint is behaviour).
+async function siteBreakpoints(manifest, scriptQueries = []) {
+  const count = new Map();
+  for (const q of scriptQueries) {
+    for (const m of q.matchAll(/(min|max)-width\s*:\s*([\d.]+)(px|em|rem)/g)) {
+      const px = Number(m[2]) * (m[3] === 'px' ? 1 : 16);
+      const edge = Math.round(m[1] === 'min' ? px - 1 : px);
+      if (edge >= 300 && edge <= 2600) count.set(edge, (count.get(edge) || 0) + 100);
+    }
+  }
+  const texts = [];
+  for (const m of manifest.filter((x) => x.type === 'stylesheet')) texts.push(await fs.readFile(path.join(ref, m.file), 'utf8').catch(() => ''));
+  const rendered = await fs.readFile(path.join(ref, 'rendered.html'), 'utf8').catch(() => '');
+  for (const m of rendered.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)) texts.push(m[1]);
+  for (const t of texts) {
+    for (const q of t.matchAll(/@media[^{]*/g)) {
+      for (const m of q[0].matchAll(/(min|max)-width\s*:\s*([\d.]+)(px|em|rem)/g)) {
+        const px = Number(m[2]) * (m[3] === 'px' ? 1 : 16);
+        const edge = Math.round(m[1] === 'min' ? px - 1 : px);
+        if (edge >= 300 && edge <= 2600) count.set(edge, (count.get(edge) || 0) + 1);
+      }
+    }
+  }
+  // breakpoints within 2px of each other are one (991 from max-width, 991 from min-width: 992)
+  const edges = [...count].filter(([, n]) => n >= 2).sort((a, b) => a[0] - b[0]);
+  const merged = [];
+  for (const [e, n] of edges) { const last = merged[merged.length - 1]; if (last && e - last.e <= 2) last.n += n; else merged.push({ e, n }); }
+  return merged.sort((a, b) => b.n - a.n).slice(0, 9).map((x) => x.e).sort((a, b) => a - b);
+}
+
+// Extra sizes for fitting: at least three points in every breakpoint range (counting the seed sizes in it), at
+// different heights, so a value that depends on the width, the height or both can be told apart from a constant.
+function sizesForFit(breakpoints) {
+  const edges = [320, ...breakpoints, 2400];
+  const taken = new Set([...VIEWPORTS, ...HELD_OUT].map((v) => `${v.width}x${v.height}`));
+  const out = [];
+  const heights = [760, 1000, 880];
+  for (let i = 0; i < edges.length - 1; i++) {
+    const lo = i === 0 ? edges[0] : edges[i] + 1, hi = edges[i + 1];
+    if (hi - lo < 8) { // a narrow band (760 and 767 both breakpoints) still has its own rules: sample both edges
+      for (const [w, h] of [[lo, heights[i % 3]], [hi, heights[(i + 1) % 3]]]) if (!taken.has(`${w}x${h}`)) { taken.add(`${w}x${h}`); out.push({ width: w, height: h }); }
+      continue;
+    }
+    const seeds = VIEWPORTS.filter((v) => v.width >= lo && v.width <= hi).length;
+    const want = Math.max(2, 3 - seeds);
+    for (let k = 0; k < want; k++) {
+      const w = Math.round(lo + (hi - lo) * [0.25, 0.75, 0.5][k]);
+      const h = heights[(i + k) % heights.length];
+      if (!taken.has(`${w}x${h}`)) { taken.add(`${w}x${h}`); out.push({ width: w, height: h }); }
+    }
+  }
+  // Two very wide, short screens: most sizes above are taller than 16:9, so a "cover" rule (max(100vw, 177.8vh))
+  // would have one point at most on its width side. Two make it checkable (see fitCover in viewport-fit.mjs).
+  for (const [w, h] of [[2400, 760], [2200, 900]]) if (!taken.has(`${w}x${h}`)) { taken.add(`${w}x${h}`); out.push({ width: w, height: h }); }
+  return out;
 }