iron-edge 1.2.0 → 2.0.0

package/skills/clone-site/scripts/capture.mjs

@@ -0,0 +1,507 @@
+#!/usr/bin/env node
+/**
+ * capture.mjs — Motor de clonagem 1:1 via navegador (Playwright/Chromium).
+ *
+ * Navega o site AO VIVO, intercepta TODA a rede (inclusive cross-origin),
+ * salva cada asset e reescreve as referências para caminhos locais
+ * root-absolutos, gerando um espelho estático fiel e deployável.
+ *
+ * Por que navegador e não wget: fontes de CDN travadas por domínio
+ * (Adobe Typekit, etc.) só são servidas quando a requisição parte do
+ * domínio original. Capturando dentro do Chromium NO domínio real, nós
+ * recebemos os binários das fontes e os tornamos locais — o CSS deixa
+ * de "quebrar" em localhost.
+ *
+ * Uso:
+ *   node capture.mjs <url> <outDir> [opções]
+ *     --max-pages N        máximo de páginas no crawl (default 60)
+ *     --same-host-only     só segue links do mesmo host (default: mesma origin)
+ *     --keep-trackers      NÃO remove GTM/Analytics/Pixel (default: remove)
+ *     --mobile             captura em viewport mobile (390x844) além de desktop
+ *     --no-crawl           captura só a URL informada (sem seguir links)
+ *     --include "a,b"      só segue caminhos que contenham um destes fragmentos
+ *     --exclude "a,b"      ignora caminhos que contenham um destes fragmentos
+ *     --wait MS            espera extra por página (default 1200)
+ */
+
+import { chromium } from 'playwright';
+import * as cheerio from 'cheerio';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import path from 'node:path';
+
+// ----------------------------- args -----------------------------
+const argv = process.argv.slice(2);
+const startUrl = argv[0];
+const outDir = argv[1];
+if (!startUrl || !outDir) {
+  console.error('uso: node capture.mjs <url> <outDir> [--max-pages N] [...]');
+  process.exit(2);
+}
+const opt = (name, def) => {
+  const i = argv.indexOf(name);
+  if (i === -1) return def;
+  const v = argv[i + 1];
+  return v && !v.startsWith('--') ? v : true;
+};
+const MAX_PAGES = parseInt(opt('--max-pages', '60'), 10);
+const SAME_HOST_ONLY = argv.includes('--same-host-only');
+const KEEP_TRACKERS = argv.includes('--keep-trackers');
+const MOBILE = argv.includes('--mobile');
+const NO_CRAWL = argv.includes('--no-crawl');
+const EXTRA_WAIT = parseInt(opt('--wait', '1200'), 10);
+const INCLUDE = String(opt('--include', '') || '').split(',').map(s => s.trim()).filter(Boolean);
+const EXCLUDE = String(opt('--exclude', '') || '').split(',').map(s => s.trim()).filter(Boolean);
+const FORM_TOAST = argv.includes('--form-toast');           // injeta aviso em forms sem backend
+const STORAGE_STATE = (() => { const v = opt('--storage-state', ''); return typeof v === 'string' ? v : ''; })();
+
+const TRACKERS = [
+  'googletagmanager.com', 'google-analytics.com', '/gtag/js', '/gtm.js',
+  'analytics.google.com', 'connect.facebook.net', 'facebook.com/tr',
+  'doubleclick.net', 'googleadservices.com', 'google.com/ccm', 'google.com/pagead',
+  'hotjar.com', 'clarity.ms', 'cdn.segment.com', 'p.typekit.net',
+  'bat.bing.com', 'snap.licdn.com', 'static.ads-twitter.com',
+];
+
+const UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 '
+         + '(KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36';
+
+// --------------------------- helpers -----------------------------
+const log = (...a) => console.log('[capture]', ...a);
+
+function normalize(u) { const x = new URL(u); x.hash = ''; return x.href; }
+
+function routeFor(u, origin) {
+  let p = new URL(u).pathname;
+  if (p.endsWith('/')) p += 'index.html';
+  else if (!/\.[a-z0-9]+$/i.test(p.split('/').pop() || '')) p += '/index.html';
+  return p.replace(/^\//, '');
+}
+
+// trunca qualquer segmento de path acima do limite do filesystem (255 bytes no
+// APFS/ext4). URLs com tokens longos (ex.: active_storage do Rails, base64 em
+// query/path) estouravam mkdir com ENAMETOOLONG e abortavam toda a captura.
+// Preserva a extensão do último segmento (importa p/ MIME) e usa hash p/ unicidade.
+const MAX_SEG = 180;
+function safeSeg(seg, isLast) {
+  if (Buffer.byteLength(seg, 'utf8') <= MAX_SEG) return seg;
+  const ext = isLast ? path.extname(seg) : '';
+  // hash REAL do segmento (mesma falha do localPathFor): tokens longos com
+  // prefixo comum (active_storage do Rails) colidiam nos primeiros 8 bytes.
+  const hash = createHash('sha1').update(seg).digest('hex').slice(0, 16);
+  const head = seg.slice(0, 24).replace(/[^A-Za-z0-9._-]/g, '_');
+  return `${head}-${hash}${ext}`;
+}
+function sanitizePath(rel) {
+  const segs = rel.split('/').filter(Boolean);
+  return segs.map((s, i) => safeSeg(s, i === segs.length - 1)).join('/');
+}
+
+function localPathFor(rawUrl, primaryOrigin) {
+  const u = new URL(rawUrl);
+  // remove segmentos '..'/'.' (defesa contra escape de diretório) — URLs já vêm normalizadas
+  const clean = u.pathname.split('/').filter(s => s && s !== '.' && s !== '..').join('/');
+  let rel = (u.origin === primaryOrigin) ? clean : path.posix.join('_ext', u.host, clean);
+  // Assets de build com content-hash no nome (Next.js/Vercel `_next/static/`,
+  // Nuxt `_nuxt/`) são imutáveis; a query (`?dpl=`deployment, `?v=`) é só
+  // cache-bust. NÃO anexar hash: assim o nome no disco bate com o que o runtime
+  // do webpack pede dinamicamente (o host estático ignora a query) — sem isso,
+  // chunks/CSS carregados em runtime dão 404 mesmo com o HTML estático correto.
+  const immutableBuildAsset = /\/(?:_next\/static|_nuxt)\//.test(u.pathname);
+  if (u.search && !immutableBuildAsset) {
+    const base = rel.split('/').pop() || '';
+    const ext = path.extname(base);
+    // hash REAL da query (sha1), não os primeiros 8 bytes em hex: URLs de
+    // next/image (`?url=%2F...&w=...`) começam todas igual e colidiam no mesmo
+    // nome de arquivo, trocando imagens em silêncio.
+    const hash = createHash('sha1').update(u.search).digest('hex').slice(0, 16);
+    rel = ext ? rel.slice(0, -ext.length) + '.' + hash + ext : rel + '.' + hash;
+  }
+  if (rel.endsWith('/') || rel === '') rel += 'index.html';
+  return sanitizePath(rel);
+}
+const toRootAbs = (rel) => '/' + String(rel).replace(/\\/g, '/');
+
+function isTracker(url) { return TRACKERS.some(t => url.includes(t)); }
+
+// Script injetado no fim do <body> de cada página:
+//  - tk(): ativa classes `tk-*` no <html> (kits Typekit dependem dela; o JS do kit
+//    que a adicionaria está bloqueado/ausente no clone offline). Fidelidade — padrão.
+//  - toast (opt-in, --form-toast): avisa que forms não enviam offline (sem backend),
+//    sem usar alert() (que travaria a página).
+function runtimeInject() {
+  const tk = "function tk(){try{var c=new Set();for(var i=0;i<document.styleSheets.length;i++){var s=document.styleSheets[i],R;try{R=s.cssRules}catch(e){continue}if(!R)continue;for(var j=0;j<R.length;j++){var t=R[j].selectorText;if(!t)continue;var m=t.match(/\\.tk-[\\w-]+/g);if(m)for(var k=0;k<m.length;k++)c.add(m[k].slice(1))}}c.forEach(function(x){document.documentElement.classList.add(x)})}catch(e){}}if(document.readyState==='complete')tk();else window.addEventListener('load',tk);";
+  const toast = FORM_TOAST
+    ? "document.addEventListener('submit',function(e){var f=e.target,a=((f.getAttribute&&f.getAttribute('action'))||'').trim();if(!/^(https?:|mailto:)/i.test(a)){e.preventDefault();var t=document.createElement('div');t.textContent='Clone estatico — formularios nao enviam (sem backend).';t.style.cssText='position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:8px;font:14px/1.4 system-ui,sans-serif;z-index:2147483647;max-width:90vw;box-shadow:0 4px 20px rgba(0,0,0,.3);opacity:0;transition:opacity .2s';document.body.appendChild(t);requestAnimationFrame(function(){t.style.opacity='1'});setTimeout(function(){t.style.opacity='0';setTimeout(function(){t.remove()},300)},3500)}},true);"
+    : '';
+  return `<script data-clone-site="runtime">(function(){${tk}${toast}})();</script>`;
+}
+
+// CSS: reescreve url() e @import resolvendo SEMPRE relativo à URL do CSS.
+function rewriteCss(css, cssUrl, urlToLocal) {
+  const resolve = (raw) => {
+    const v = String(raw).trim().replace(/^['"]|['"]$/g, '');
+    if (!v || v.startsWith('data:') || v.startsWith('#') || v.startsWith('about:')) return raw;
+    try {
+      const abs = new URL(v, cssUrl).href;
+      const local = urlToLocal.get(abs) || urlToLocal.get(normalize(abs));
+      // não capturado: aponta para a origem real (absoluta) — carrega online e
+      // nunca resolve um caminho relativo errado quando o CSS é servido na raiz
+      return local ? toRootAbs(local) : abs;
+    } catch { return raw; }
+  };
+  css = css.replace(/url\(\s*(['"]?)([^'")]*)\1\s*\)/gi, (_m, _q, u) => `url("${resolve(u)}")`);
+  css = css.replace(/@import\s+(?:url\()?\s*(['"])([^'"]+)\1\s*\)?/gi,
+    (_m, _q, u) => `@import url("${resolve(u)}")`);
+  // Neutraliza beacon do Typekit que 403 offline e suja o console.
+  css = css.replace(/url\(["']?https?:\/\/p\.typekit\.net[^)]*\)/gi, 'url("data:,")');
+  return css;
+}
+
+function rewriteHtml(html, pageUrl, urlToLocal, primaryOrigin) {
+  const $ = cheerio.load(html, { decodeEntities: false });
+  const abs = (v) => { try { return new URL(v, pageUrl).href; } catch { return null; } };
+  const mapAsset = (v) => {
+    const a = abs(v); if (!a) return v;
+    const l = urlToLocal.get(a) || urlToLocal.get(normalize(a));
+    return l ? toRootAbs(l) : v;
+  };
+  // Links de navegação internos viram root-absolutos (servidor resolve /rota/ -> index.html)
+  const mapNav = (v) => {
+    const a = abs(v); if (!a) return v;
+    try { const u = new URL(a); if (u.origin === primaryOrigin) return u.pathname + u.search + u.hash; }
+    catch {}
+    return v;
+  };
+
+  $('base').remove(); // todas as refs já são root-absolutas
+
+  $('[src]').each((_, el) => { const v = $(el).attr('src'); if (v) $(el).attr('src', mapAsset(v)); });
+  $('link[href]').each((_, el) => { const v = $(el).attr('href'); if (v) $(el).attr('href', mapAsset(v)); });
+  $('[poster]').each((_, el) => { const v = $(el).attr('poster'); if (v) $(el).attr('poster', mapAsset(v)); });
+
+  const fixSrcset = (val) => val.split(',').map(part => {
+    const seg = part.trim().split(/\s+/);
+    if (!seg[0]) return part.trim();
+    seg[0] = mapAsset(seg[0]);
+    return seg.join(' ');
+  }).join(', ');
+  $('[srcset]').each((_, el) => { const v = $(el).attr('srcset'); if (v) $(el).attr('srcset', fixSrcset(v)); });
+  $('[imagesrcset]').each((_, el) => { const v = $(el).attr('imagesrcset'); if (v) $(el).attr('imagesrcset', fixSrcset(v)); });
+
+  // <a> navegação interna
+  $('a[href]').each((_, el) => { const v = $(el).attr('href'); if (v) $(el).attr('href', mapNav(v)); });
+
+  // url() em atributos style inline
+  $('[style]').each((_, el) => {
+    const v = $(el).attr('style');
+    if (v && v.includes('url(')) $(el).attr('style', rewriteCss(v, pageUrl, urlToLocal));
+  });
+
+  // blocos <style> inline (Next.js/styled-components inlinam o CSS do Typekit aqui!)
+  $('style').each((_, el) => {
+    const t = $(el).html();
+    if (t) $(el).html(rewriteCss(t, pageUrl, urlToLocal));
+  });
+
+  if (!KEEP_TRACKERS) {
+    $('script').each((_, el) => {
+      const s = $(el).html() || '';
+      const src = $(el).attr('src') || '';
+      // NUNCA remover scripts que carregam dados de hidratação de framework.
+      // O flight data (RSC) do Next.js App Router é JSON gigante inline em
+      // `__next_f.push([...])` e pode CONTER a palavra "dataLayer"/"clarity"
+      // no conteúdo serializado da página — removê-lo destrói o payload RSC e
+      // a hidratação falha (React #423 → tela branca). Idem __NEXT_DATA__ etc.
+      if (/__next_f|__NEXT_DATA__|__NUXT__|__remixContext|__sveltekit|window\.__INITIAL/.test(s)) return;
+      if (isTracker(src) || /gtag\(|dataLayer|fbq\(|gtm\.start|GoogleAnalytics|clarity\(/.test(s)) {
+        $(el).remove();
+      }
+    });
+    $('noscript').each((_, el) => {
+      if (/googletagmanager|facebook\.com\/tr/.test($(el).html() || '')) $(el).remove();
+    });
+  }
+  const _inj = runtimeInject();
+  if ($('body').length) $('body').append(_inj); else $.root().append(_inj);
+  return $.html();
+}
+
+// --------------------------- captura -----------------------------
+async function makeContext(browser, mobile, sharedAssets) {
+  const ctxOpts = {
+    serviceWorkers: 'block',
+    ignoreHTTPSErrors: true,
+    bypassCSP: true,
+    userAgent: UA,
+    viewport: mobile ? { width: 390, height: 844 } : { width: 1440, height: 900 },
+    deviceScaleFactor: 2,
+    isMobile: !!mobile,
+  };
+  if (STORAGE_STATE) ctxOpts.storageState = STORAGE_STATE;  // sessão logada (Playwright)
+  const context = await browser.newContext(ctxOpts);
+
+  // UM route handler: força no-cache (corpos sempre legíveis) + bloqueia trackers.
+  await context.route('**/*', async (route) => {
+    const url = route.request().url();
+    if (!KEEP_TRACKERS && isTracker(url)) { try { return await route.abort(); } catch { return; } }
+    const headers = { ...route.request().headers() };
+    delete headers['if-none-match'];
+    delete headers['if-modified-since'];
+    try { await route.continue({ headers }); } catch { try { await route.continue(); } catch {} }
+  });
+
+  const assets = sharedAssets || new Map();  // url -> { contentType, body, status }
+  const pending = new Set();
+  context.on('request', r => pending.add(r));
+  context.on('requestfinished', r => pending.delete(r));
+  context.on('requestfailed', r => pending.delete(r));
+
+  context.on('response', async (response) => {
+    const req = response.request();
+    const url = response.url();
+    const status = response.status();
+    if (url.startsWith('data:') || url.startsWith('blob:')) return;
+    if (status >= 300 && status < 400) return;
+    if (status === 204 || status === 304) return;
+    if (req.method() === 'OPTIONS') return;
+    if (assets.has(url)) return;
+    try {
+      const body = await response.body();
+      if (!body || body.length === 0) return;
+      const ct = (response.headers()['content-type'] || '').split(';')[0].trim().toLowerCase();
+      assets.set(url, { contentType: ct, body, status });
+    } catch { /* redirect/opaco/evicted — ignora */ }
+  });
+
+  const waitQuiet = async (page, idleMs = 700, timeout = 12000) => {
+    const t0 = Date.now();
+    while (Date.now() - t0 < timeout) {
+      if (pending.size === 0) { await page.waitForTimeout(idleMs); if (pending.size === 0) return; }
+      else await page.waitForTimeout(150);
+    }
+  };
+
+  return { context, assets, waitQuiet };
+}
+
+async function autoScroll(page) {
+  try {
+    await page.evaluate(async () => {
+      await new Promise((resolve) => {
+        let total = 0; const step = Math.max(400, Math.floor(window.innerHeight * 0.8));
+        const timer = setInterval(() => {
+          const h = document.body ? document.body.scrollHeight : 0;
+          window.scrollBy(0, step); total += step;
+          if (total >= h + window.innerHeight) { clearInterval(timer); window.scrollTo(0, 0); resolve(); }
+        }, 110);
+        setTimeout(() => { clearInterval(timer); resolve(); }, 9000);
+      });
+    });
+    await page.evaluate(() => {
+      document.querySelectorAll('img[loading="lazy"]').forEach((i) => {
+        i.loading = 'eager'; if (i.dataset && i.dataset.src) i.src = i.dataset.src;
+      });
+    });
+    await page.waitForLoadState('networkidle').catch(() => {});
+  } catch {}
+}
+
+function allowedLink(u, origin, host) {
+  try {
+    const x = new URL(u);
+    if (SAME_HOST_ONLY ? x.host !== host : x.origin !== origin) return false;
+    if (/\.(pdf|zip|rar|mp4|mov|webm|mp3|jpg|jpeg|png|gif|svg|webp|ico|css|js|json|xml|txt|woff2?|ttf|eot)$/i.test(x.pathname)) return false;
+    if (/^(mailto:|tel:|javascript:|#)/i.test(u)) return false;
+    if (INCLUDE.length && !INCLUDE.some(s => x.pathname.includes(s))) return false;
+    if (EXCLUDE.length && EXCLUDE.some(s => x.pathname.includes(s))) return false;
+    return true;
+  } catch { return false; }
+}
+
+async function crawl(context, assets, waitQuiet, start) {
+  const origin = new URL(start).origin;
+  const host = new URL(start).host;
+  const queue = [start];
+  const seen = new Set([normalize(start)]);
+  const pages = new Map();   // route -> html
+  const fontReport = [];
+
+  while (queue.length && pages.size < MAX_PAGES) {
+    const url = queue.shift();
+    const page = await context.newPage();
+    try {
+      log(`(${pages.size + 1}/${MAX_PAGES}) ${url}`);
+      const resp = await page.goto(url, { waitUntil: 'load', timeout: 45000 });
+      await page.waitForLoadState('networkidle').catch(() => {});
+      await autoScroll(page);
+      await page.waitForTimeout(EXTRA_WAIT);
+      await page.evaluate(() => document.fonts && document.fonts.ready).catch(() => {});
+      await waitQuiet(page);
+
+      const route = routeFor(url, origin);
+      // SSG/SSR: usa o HTML do servidor (pré-hidratação) — hidrata limpo, sem
+      // erros React #418/#423. CSR puro: usa o DOM renderizado (shell+JS).
+      let rawHtml = '';
+      try { if (resp) rawHtml = await resp.text(); } catch {}
+      const rendered = await page.content();
+      // marcadores de HTML renderizado no servidor. `__next_f` = Next.js App
+      // Router (RSC/Flight) — sem ele, salvávamos o DOM já-hidratado e o
+      // re-hydrate dava mismatch React #423 → tela em branco. `__NEXT_DATA__` =
+      // Pages Router. Demais: Nuxt, Remix, SvelteKit, Astro, Gatsby, WordPress.
+      const ssr = /__NEXT_DATA__|__next_f|__NUXT__|data-reactroot|__remixContext|__sveltekit|id="__svelte|astro-island|___gatsby|wp-content/i.test(rawHtml);
+      const html = (rawHtml && (ssr || rawHtml.length > rendered.length * 0.55)) ? rawHtml : rendered;
+      pages.set(route, html);
+
+      if (pages.size === 1) {
+        const fonts = await page.evaluate(() => {
+          try { return [...document.fonts].map(f => `${f.family} ${f.weight} ${f.style} [${f.status}]`); }
+          catch { return []; }
+        }).catch(() => []);
+        fontReport.push(...new Set(fonts));
+      }
+
+      if (!NO_CRAWL) {
+        const links = await page.$$eval('a[href]', as => as.map(a => a.href)).catch(() => []);
+        for (const href of links) {
+          if (!allowedLink(href, origin, host)) continue;
+          const n = normalize(href);
+          if (!seen.has(n)) { seen.add(n); queue.push(href); }
+        }
+      }
+    } catch (e) {
+      log('  ! erro nesta página:', e.message);
+    } finally {
+      await page.close().catch(() => {});
+    }
+  }
+  return { pages, origin, fontReport };
+}
+
+// Recupera assets referenciados (mesma origin) que o timing da captura perdeu
+// — ex: imagens lazy / disparadas por animação. Busca direto via HTTP.
+async function gapFill(context, assets, pages, primaryOrigin) {
+  const want = new Set();
+  const addAbs = (v, base) => {
+    if (!v) return;
+    try {
+      const u = new URL(v, base);
+      if (u.origin !== primaryOrigin) return;          // só mesma origin
+      if (/^(data:|blob:|javascript:|mailto:|tel:)/i.test(u.protocol)) return;
+      want.add(u.href.split('#')[0]);
+    } catch {}
+  };
+  for (const [route, html] of pages) {
+    const base = primaryOrigin + '/' + route.replace(/index\.html$/, '');
+    let $; try { $ = cheerio.load(html); } catch { continue; }
+    $('[src],[poster]').each((_, el) => {
+      for (const a of ['src', 'poster']) { const v = $(el).attr(a); if (v) addAbs(v, base); }
+    });
+    $('link[href]').each((_, el) => { const v = $(el).attr('href'); if (v) addAbs(v, base); });
+    $('[srcset],[imagesrcset]').each((_, el) => {
+      const v = $(el).attr('srcset') || $(el).attr('imagesrcset') || '';
+      v.split(',').forEach(p => { const f = p.trim().split(/\s+/)[0]; if (f) addAbs(f, base); });
+    });
+    $('style').each((_, el) => {
+      const t = $(el).html() || '';
+      for (const m of t.matchAll(/url\(\s*['"]?([^'")]+)/gi)) addAbs(m[1], base);
+    });
+  }
+  for (const [url, a] of assets) {
+    if (a.contentType === 'text/css' || /\.css$/i.test(url)) {
+      const css = a.body.toString('utf8');
+      for (const m of css.matchAll(/url\(\s*['"]?([^'")]+)/gi)) addAbs(m[1], url);
+    }
+  }
+  const pageUrls = new Set();
+  for (const r of pages.keys()) {
+    const b = primaryOrigin + '/' + r.replace(/index\.html$/, '');
+    pageUrls.add(b); pageUrls.add(b.replace(/\/$/, ''));
+  }
+  const missing = [...want].filter(u => !assets.has(u) && !pageUrls.has(u));
+  let filled = 0, tried = 0;
+  for (const url of missing) {
+    if (tried++ >= 400) break;
+    try {
+      const r = await context.request.get(url, { timeout: 15000 });
+      if (!r.ok()) continue;
+      const ct = (r.headers()['content-type'] || '').split(';')[0].trim().toLowerCase();
+      if (ct === 'text/html') continue;                // não é asset
+      const body = await r.body();
+      if (body && body.length) { assets.set(url, { contentType: ct, body, status: r.status() }); filled++; }
+    } catch {}
+  }
+  if (missing.length) log(`gap-fill: ${filled}/${missing.length} assets recuperados`);
+}
+
+async function writeAll(assets, pages, primaryOrigin) {
+  const urlToLocal = new Map();
+  for (const url of assets.keys()) urlToLocal.set(url, localPathFor(url, primaryOrigin));
+
+  let nAssets = 0, nFonts = 0, nSkipped = 0;
+  for (const [url, a] of assets) {
+    if (a.contentType === 'text/html') continue;     // páginas vêm do DOM hidratado
+    const rel = urlToLocal.get(url);
+    const dest = path.join(outDir, rel);
+    try {
+      await mkdir(path.dirname(dest), { recursive: true });
+      if (a.contentType === 'text/css' || rel.endsWith('.css')) {
+        await writeFile(dest, rewriteCss(a.body.toString('utf8'), url, urlToLocal));
+      } else {
+        await writeFile(dest, a.body);
+        if (/font|woff|ttf|otf/.test(a.contentType) || /\.(woff2?|ttf|otf|eot)$/i.test(rel)) nFonts++;
+      }
+      nAssets++;
+    } catch (e) {
+      // um asset problemático (path inválido, permissão, etc.) NUNCA aborta o clone
+      nSkipped++;
+      if (nSkipped <= 10) log(`asset ignorado (${e.code || e.name}): ${url.slice(0, 120)}`);
+    }
+  }
+  if (nSkipped) log(`${nSkipped} asset(s) ignorado(s) por erro de escrita`);
+
+  let nPages = 0;
+  for (const [route, html] of pages) {
+    const dest = path.join(outDir, route);
+    await mkdir(path.dirname(dest), { recursive: true });
+    // base = a URL real DESTA página, p/ resolver refs relativas corretamente
+    const pageUrl = primaryOrigin + '/' + route.replace(/index\.html$/, '');
+    await writeFile(dest, rewriteHtml(html, pageUrl, urlToLocal, primaryOrigin));
+    nPages++;
+  }
+  return { nAssets, nFonts, nPages };
+}
+
+// ----------------------------- main ------------------------------
+(async () => {
+  const browser = await chromium.launch({ headless: true });   // sandbox ON: captura roda JS de site de terceiro
+  try {
+    const { context, assets, waitQuiet } = await makeContext(browser, false);
+    const { pages, origin, fontReport } = await crawl(context, assets, waitQuiet, startUrl);
+
+    if (MOBILE) {
+      log('passada mobile (captura assets responsivos)…');
+      const m = await makeContext(browser, true, assets); // compartilha o MESMO mapa de assets
+      const mp = await crawl(m.context, assets, m.waitQuiet, startUrl);
+      for (const [r, h] of mp.pages) if (!pages.has(r)) pages.set(r, h);
+      await m.context.close().catch(() => {});
+    }
+
+    await gapFill(context, assets, pages, origin);
+    const stats = await writeAll(assets, pages, origin);
+    await context.close().catch(() => {});
+
+    const manifest = {
+      source: startUrl, origin, capturedAt: new Date().toISOString(),
+      pages: [...pages.keys()].sort(),
+      assetsCaptured: assets.size, fonts: fontReport,
+      ...stats,
+    };
+    await writeFile(path.join(outDir, '_clone-manifest.json'), JSON.stringify(manifest, null, 2));
+
+    log(`OK — ${stats.nPages} páginas, ${stats.nAssets} assets (${stats.nFonts} fontes) salvos em ${outDir}`);
+    if (fontReport.length) log('fontes detectadas:', fontReport.join(' | '));
+  } finally {
+    await browser.close().catch(() => {});
+  }
+})().catch((e) => { console.error('[capture] FALHA:', e); process.exit(1); });

package/skills/clone-site/scripts/clone.sh

@@ -0,0 +1,166 @@
+#!/usr/bin/env bash
+# clone.sh - Orquestrador da clonagem 1:1.
+#
+#   clone.sh <URL> [--out DIR] [--engine auto|browser|wget]
+#            [--max-pages N] [--no-crawl] [--mobile] [--keep-trackers]
+#            [--include "a,b"] [--exclude "a,b"] [--form-toast]
+#            [--storage-state FILE] [--no-serve] [--no-verify] [--port N] [--spa]
+#
+# Padroes: engine=auto (browser p/ tudo; wget so se Playwright indisponivel),
+#          serve liga apos clonar, verify compara original x clone.
+set -uo pipefail
+
+SKILL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+URL=""; OUT=""; ENGINE="auto"; MAXP="60"; PORT="8765"
+NOCRAWL=""; MOBILE=""; KEEP=""; INCLUDE=""; EXCLUDE=""; SPA=""; FORMTOAST=""; STORAGE=""
+DO_SERVE=1; DO_VERIFY=1
+
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --out) OUT="$2"; shift 2;;
+    --engine) ENGINE="$2"; shift 2;;
+    --max-pages) MAXP="$2"; shift 2;;
+    --port) PORT="$2"; shift 2;;
+    --no-crawl) NOCRAWL="--no-crawl"; shift;;
+    --mobile) MOBILE="--mobile"; shift;;
+    --keep-trackers) KEEP="--keep-trackers"; shift;;
+    --include) INCLUDE="$2"; shift 2;;
+    --exclude) EXCLUDE="$2"; shift 2;;
+    --spa) SPA="--spa"; shift;;
+    --form-toast) FORMTOAST="--form-toast"; shift;;
+    --storage-state) STORAGE="$2"; shift 2;;
+    --no-serve) DO_SERVE=0; shift;;
+    --no-verify) DO_VERIFY=0; shift;;
+    -*) echo "opcao desconhecida: $1" >&2; shift;;
+    *) URL="$1"; shift;;
+  esac
+done
+
+[ -z "$URL" ] && { echo "uso: clone.sh <URL> [opcoes]"; exit 2; }
+case "$URL" in http*://*) ;; *) URL="https://$URL";; esac
+case "$PORT" in ''|*[!0-9]*) echo "erro: --port deve ser numerico"; exit 2;; esac
+# valida engine: valor invalido cairia fora dos dois blocos e produziria clone
+# VAZIO anunciado como sucesso. Falha cedo e claro.
+case "$ENGINE" in auto|browser|wget) ;; *) echo "erro: --engine deve ser auto|browser|wget (recebido: '$ENGINE')"; exit 2;; esac
+
+HOST="$(printf '%s' "$URL" | sed -E 's#^https?://([^/]+).*#\1#')"
+SAFEHOST="$(printf '%s' "$HOST" | sed -E 's/[^a-zA-Z0-9.-]/-/g')"
+STAMP="$(date +%Y%m%d-%H%M)"
+[ -z "$OUT" ] && OUT="$HOME/site-clones/${SAFEHOST}-${STAMP}"
+mkdir -p "$OUT"
+
+echo "════════════════════════════════════════════════════"
+echo "  Clonando: $URL"
+echo "  Destino:  $OUT"
+echo "════════════════════════════════════════════════════"
+
+# ---------- deteccao do tipo de site ----------
+UA='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
+HTML="$(curl -sL --max-time 25 -A "$UA" "$URL" || true)"
+KIND="static"
+if printf '%s' "$HTML" | grep -qE '__NEXT_DATA__|/_next/static|__NUXT__|data-reactroot|id="__next"|id="root"|window\.__remixContext'; then
+  KIND="spa-ssg"
+fi
+if printf '%s' "$HTML" | grep -qiE 'use\.typekit\.net|fonts\.googleapis\.com|fonts\.gstatic\.com'; then
+  FONTS_CDN=1; else FONTS_CDN=0; fi
+echo "[detect] tipo=$KIND  fontes-cdn=$FONTS_CDN"
+
+# ---------- escolha do motor ----------
+have_node() { command -v node >/dev/null 2>&1; }
+PLAYWRIGHT_OK=0
+bootstrap_browser() {
+  have_node || { echo "[bootstrap] Node nao encontrado"; return 1; }
+  if [ ! -d "$SKILL_DIR/node_modules/playwright" ]; then
+    echo "[bootstrap] instalando playwright + cheerio (uma vez)…"
+    ( cd "$SKILL_DIR" && npm install --no-audit --no-fund >/tmp/clone-npm.log 2>&1 ) || { echo "[bootstrap] npm install falhou (ver /tmp/clone-npm.log)"; return 1; }
+  fi
+  if ! ( cd "$SKILL_DIR" && node -e "require('playwright').chromium" ) 2>/dev/null; then return 1; fi
+  echo "[bootstrap] baixando Chromium do Playwright (uma vez, ~120MB)…"
+  ( cd "$SKILL_DIR" && npx --yes playwright install chromium >/tmp/clone-pw.log 2>&1 ) || echo "[bootstrap] aviso: 'playwright install' retornou erro (talvez ja exista)"
+  PLAYWRIGHT_OK=1; return 0
+}
+
+USE="$ENGINE"
+if [ "$USE" = "auto" ]; then USE="browser"; fi
+if [ "$USE" = "browser" ]; then
+  if ! bootstrap_browser; then
+    echo "[engine] Playwright indisponivel -> caindo para wget (fidelidade menor)"
+    USE="wget"
+  fi
+fi
+
+# ---------- execucao ----------
+if [ "$USE" = "browser" ]; then
+  echo "[engine] navegador (Playwright)"
+  ( cd "$SKILL_DIR" && node scripts/capture.mjs "$URL" "$OUT" \
+      --max-pages "$MAXP" $NOCRAWL $MOBILE $KEEP $FORMTOAST \
+      ${STORAGE:+--storage-state "$STORAGE"} \
+      ${INCLUDE:+--include "$INCLUDE"} ${EXCLUDE:+--exclude "$EXCLUDE"} )
+  CAP=$?
+  if [ $CAP -ne 0 ]; then
+    echo "[engine] captura por navegador falhou -> tentando wget"
+    USE="wget"
+  fi
+fi
+
+if [ "$USE" = "wget" ]; then
+  echo "[engine] wget"
+  CLONE_FORM_TOAST=$([ -n "$FORMTOAST" ] && echo 1 || echo 0) bash "$SKILL_DIR/scripts/wget_fallback.sh" "$URL" "$OUT"
+  [ "$FONTS_CDN" = "1" ] && echo "⚠️  Fontes via CDN detectadas: no modo wget elas NAO carregam em localhost. Rode com --engine browser para fontes fieis."
+fi
+
+echo "[clone] arquivos:"; find "$OUT" -type f | wc -l | sed 's/^/  /'
+echo "[clone] tamanho:"; du -sh "$OUT" | sed 's/^/  /'
+
+# ---------- servidor ----------
+SERVE_PID=""
+if [ "$DO_SERVE" = "1" ]; then
+  # mata qualquer serve.py na mesma porta
+  pkill -f "serve.py --root .* --port $PORT" 2>/dev/null || true
+  python3 "$SKILL_DIR/scripts/serve.py" --root "$OUT" --port "$PORT" $SPA >/tmp/clone-serve.log 2>&1 &
+  SERVE_PID=$!
+  sleep 1.5
+  CODE="$(curl -s -o /dev/null -w '%{http_code}' "http://localhost:$PORT/" || echo 000)"
+  echo "[serve] http://localhost:$PORT/  (HTTP $CODE, pid $SERVE_PID)"
+fi
+
+# ---------- verificacao ----------
+if [ "$DO_VERIFY" = "1" ] && [ "$USE" = "browser" ] && [ "$PLAYWRIGHT_OK" = "1" ] && [ -n "$SERVE_PID" ]; then
+  ROUTES="$(node -e 'try{const fs=require("fs");const m=JSON.parse(fs.readFileSync(process.argv[1],"utf8"));process.stdout.write(m.pages.map(p=>"/"+p.replace(/index\.html$/,"")).slice(0,6).join(",")||"/")}catch(e){process.stdout.write("/")}' "$OUT/_clone-manifest.json" 2>/dev/null || echo '/')"
+  echo "[verify] comparando rotas: $ROUTES"
+  ( cd "$SKILL_DIR" && node scripts/verify.mjs "$URL" "http://localhost:$PORT" "$OUT" --routes "$ROUTES" ) || echo "[verify] aviso: verificacao retornou erro"
+fi
+
+# ---------- HANDOFF.md ----------
+NFILES="$(find "$OUT" -type f 2>/dev/null | wc -l | tr -d ' ')"
+SIZE="$(du -sh "$OUT" 2>/dev/null | awk '{print $1}')"
+cat > "$OUT/HANDOFF.md" <<EOF
+# Clone — $HOST
+
+- **Origem:** $URL
+- **Gerado:** $(date '+%Y-%m-%d %H:%M')
+- **Motor:** $USE  ·  **Tipo detectado:** $KIND  ·  **Fontes-CDN:** $FONTS_CDN
+- **Arquivos:** $NFILES  ·  **Tamanho:** $SIZE
+
+## Rodar / deploy
+- Local: \`python3 $SKILL_DIR/scripts/serve.py --root "$OUT" --port $PORT\` → http://localhost:$PORT/
+- Deploy: \`cd "$OUT" && vercel deploy --prod\` (estático, refs root-absolutas, clean URLs)
+
+## Artefatos
+- \`_clone-manifest.json\` — páginas + fontes capturadas
+- \`_verify/report.json\` — 404s, erros de console, fontes faltando, CSS truncado, cobertura de chunks
+- \`_verify/*.png\` — screenshots original × clone
+
+## Notas
+- Trackers (GTM/Analytics/Pixel) removidos por padrão — use \`--keep-trackers\` p/ manter.
+- Formulários: clone estático não tem backend — \`--form-toast\` injeta aviso amigável.
+- Workflow completo e diagnóstico: ~/.claude/skills/clone-site/reference/workflow.md
+EOF
+
+echo "════════════════════════════════════════════════════"
+echo "  PRONTO. Espelho em: $OUT"
+[ -n "$SERVE_PID" ] && echo "  Rodando: http://localhost:$PORT/   (parar: kill $SERVE_PID)"
+echo "  Manifest: $OUT/_clone-manifest.json"
+echo "  Handoff:  $OUT/HANDOFF.md"
+[ -d "$OUT/_verify" ] && echo "  Verificacao: $OUT/_verify/report.json (+ screenshots)"
+echo "════════════════════════════════════════════════════"