primocode 10.19.0 → 11.1.0

package/lib/estudio/print-site.js

@@ -1,341 +0,0 @@
-/**
- * print-site.js — o print DE VERDADE de um site, para virar cena 3D.
- *
- *   "Se eu mandar um site e pedir, dependendo do modelo, ela pode tirar print
- *    do site, transformar em 3D e pôr no Motion." (Joel, 09/10/2026)
- *
- * Até aqui, quando o vídeo era SOBRE um site, o estúdio desenhava uma janela
- * de mentira (a peça `site` do kit: manchete, botão e um bloco de cor). Quem
- * conhece o site olhava e não reconhecia — era um site genérico com o nome
- * da marca. O navegador escondido já existia (browser.js, o revisor), mas
- * só servia para conferir página; o `browser_screenshot` tirava print da
- * aba visível da pessoa, do tamanho da janela dela, e só se o agente
- * lembrasse de chamar.
- *
- * Aqui o print sai do navegador ESCONDIDO, com a tela de um computador
- * (1440 de largura) ou de um celular (390, densidade 2), da página inteira
- * (até um teto, para a imagem não virar 40 MB) ou só da primeira dobra. A
- * imagem vai para midia/site/ do projeto e volta com a proporção medida,
- * que é o que a peça `printsite` do kit precisa para rolar a página.
- *
- * Não decide se o vídeo usa o print. Isso é o modelo, pelo cardápio do
- * estudio_midia: o pedido traz um site e o vídeo é sobre ele → vale; o vídeo
- * só cita a marca → não precisa.
- */
-
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-const TELAS = {
-    computador: { width: 1440, height: 900, deviceScaleFactor: 1, mobile: false },
-    celular: { width: 390, height: 844, deviceScaleFactor: 2, mobile: true },
-};
-// Página mais longa que isto é cortada: um print de 1440×20000 passa de 10 MB
-// e o vídeo nunca mostra mais que umas três telas rolando.
-const ALTURA_MAX = 6000;
-
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-
-/** A URL que o navegador pode abrir — só http(s). null = não é site. */
-function normalizarUrl(url) {
-    let u = String(url || '').trim();
-    if (!u) return null;
-    if (!/^[a-z][a-z0-9+.-]*:/i.test(u)) u = 'https://' + u;
-    try {
-        const p = new URL(u);
-        return /^https?:$/.test(p.protocol) && p.hostname ? p.toString() : null;
-    } catch { return null; }
-}
-
-/* Antes do print, a página desce até o fim e volta: foto com loading="lazy"
-   só carrega quando chega perto da tela, e sem isto o print saía com metade
-   das imagens em branco. */
-const ROLAR_TUDO = `(async () => {
-  const passo = innerHeight * 0.8, fim = Math.min(document.documentElement.scrollHeight, ${ALTURA_MAX});
-  for (let y = 0; y < fim; y += passo) { scrollTo(0, y); await new Promise((r) => setTimeout(r, 120)); }
-  scrollTo(0, 0); await new Promise((r) => setTimeout(r, 300));
-  return true;
-})()`;
-const MEDIR = `JSON.stringify({ altura: Math.max(document.documentElement.scrollHeight, document.body ? document.body.scrollHeight : 0), titulo: document.title || '' })`;
-
-async function valor(sessao, expression, awaitPromise = false) {
-    const r = await sessao.send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise }, 30000).catch(() => null);
-    return r && r.result ? r.result.value : null;
-}
-
-/**
- * Tira o print do site e grava na pasta do projeto.
- *
- * @param {string} url
- * @param {object} op  { pasta, celular, inteira (padrão true), alturaMax, navegador, assentar }
- * @returns {Promise<{ok, src, url, titulo, tela, largura, altura, proporcao, cortada, elemento} | {ok:false, error}>}
- */
-async function capturarSite(url, op = {}) {
-    const alvo = normalizarUrl(url);
-    if (!alvo) return { ok: false, error: `"${url || ''}" não é o endereço de um site (http ou https).` };
-    if (!op.pasta) return { ok: false, error: 'o print vai para a pasta do projeto — diga o projeto (id).' };
-    const navegador = op.navegador || require('../browser.js');
-    const tela = op.celular ? 'celular' : 'computador';
-    const metrica = TELAS[tela];
-    // No celular a página é três vezes mais comprida: o teto é menor.
-    const teto = Math.max(metrica.height, Number(op.alturaMax) || (metrica.mobile ? 4000 : ALTURA_MAX));
-
-    let aba;
-    try {
-        /* A aba nasce em branco e só depois navega: a tela (largura, celular)
-           tem de valer ANTES do site carregar, senão o site responsivo já
-           escolheu o layout de computador e o "print do celular" sai largo. */
-        aba = await navegador.abaEscondida('about:blank', { assentar: 0 });
-        const s = aba.sessao;
-        await s.send('Emulation.setDeviceMetricsOverride', metrica);
-        if (metrica.mobile) await s.send('Emulation.setTouchEmulationEnabled', { enabled: true }).catch(() => {});
-        await s.send('Page.navigate', { url: alvo });
-        const prazo = Date.now() + (op.prazo || 20000);
-        while (Date.now() < prazo) {
-            if (await valor(s, 'document.readyState') === 'complete') break;
-            await sleep(200);
-        }
-        await sleep(op.assentar == null ? 1500 : op.assentar);
-        if (op.inteira !== false) await valor(s, ROLAR_TUDO, true);
-
-        let medida = {};
-        try { medida = JSON.parse(await valor(s, MEDIR) || '{}'); } catch { /* segue com a tela */ }
-        const alturaPagina = Math.max(metrica.height, Number(medida.altura) || metrica.height);
-        const altura = op.inteira === false ? metrica.height : Math.min(alturaPagina, teto);
-
-        const r = await s.send('Page.captureScreenshot', {
-            format: 'jpeg', quality: 88, captureBeyondViewport: true,
-            clip: { x: 0, y: 0, width: metrica.width, height: altura, scale: 1 },
-        }, 60000);
-        if (!r || !r.data) return { ok: false, error: 'o navegador devolveu um print vazio.' };
-
-        const host = new URL(alvo).hostname.replace(/^www\./, '').replace(/[^a-z0-9.-]/gi, '-');
-        const src = `midia/site/${host}-${tela}${op.inteira === false ? '-dobra' : ''}.jpg`;
-        const cheio = path.join(op.pasta, src);
-        fs.mkdirSync(path.dirname(cheio), { recursive: true });
-        fs.writeFileSync(cheio, Buffer.from(r.data, 'base64'));
-
-        const proporcao = Math.round((altura / metrica.width) * 1000) / 1000;
-        const feito = {
-            ok: true, src, url: alvo, titulo: medida.titulo || '', tela,
-            largura: metrica.width, altura, proporcao,
-            cortada: op.inteira !== false && alturaPagina > teto,
-        };
-        feito.elemento = elementoDoPrint(feito);
-        feito.nota = 'O elemento é uma sugestão: ajuste x, y, largura e o tempo ao seu plano. '
-            + 'rolar: true desce a página devagar; inclinacao muda o ângulo 3D.';
-        return feito;
-    } catch (e) {
-        return { ok: false, error: `não consegui tirar o print de ${alvo}: ${e.message}` };
-    } finally {
-        if (aba) { try { await aba.fechar(); } catch { /* a aba já fechou */ } }
-    }
-}
-
-/**
- * O elemento de plano que mostra o print: a janela (ou o celular) em 3D.
- * Num quadro 1920×1080 por padrão — o modelo ajusta ao formato dele.
- */
-function elementoDoPrint(print, { quadroW = 1920, quadroH = 1080, t = 0 } = {}) {
-    const celular = print.tela === 'celular';
-    const largura = celular ? Math.round(quadroH * 0.42) : Math.round(quadroW * 0.66);
-    const altura = celular ? Math.round(largura * 2.05) : Math.round(largura * 0.64);
-    return {
-        tipo: 'kit', peca: 'printsite', src: print.src, proporcao: print.proporcao,
-        celular, url: print.url, t, rolar: print.proporcao > (altura / largura) * 1.2,
-        x: Math.round((quadroW - largura) / 2), y: Math.round((quadroH - altura) / 2), largura, altura,
-    };
-}
-
-
-/* ── O ELEMENTO DO SITE, TIRADO PELO CÓDIGO ───────────────────────────────
- *
- *   "tirar uma coisa, recortar o fundo, deixar só um elemento do site, ou ele
- *    extrair por código — ele lê o código do site, pega os elementos e põe
- *    no vídeo" (Joel, 10/10)
- *
- * O print inteiro mostra a página; o vídeo muitas vezes quer UMA peça dela: o
- * botão de assinar, o cartão de preço, a logo, o título. Aqui o navegador
- * escondido lê o DOM e devolve as peças que dá para tirar (com o seletor de
- * cada uma), e depois tira a escolhida SOZINHA, com o fundo transparente:
- * tudo na página fica invisível menos ela (visibility, que não mexe no
- * layout), e o print sai em PNG com alfa, no dobro da resolução. Junto vem o
- * código dela (o HTML e o estilo calculado: fonte, cor, raio, sombra), para o
- * modelo poder também REDESENHAR a peça como componente, se preferir. */
-
-// O seletor único de um elemento, curto e legível (id > classes > posição).
-const SELETOR_JS = `function __sel(el) {
-  if (el.id && /^[a-z][\\w-]*$/i.test(el.id) && document.querySelectorAll('#' + el.id).length === 1) return '#' + el.id;
-  const partes = []; let e = el;
-  while (e && e.nodeType === 1 && e !== document.body && partes.length < 7) {
-    let s = e.tagName.toLowerCase();
-    const cls = [...e.classList].filter((c) => /^[a-z][\\w-]{1,30}$/i.test(c)).slice(0, 2);
-    if (cls.length) s += '.' + cls.join('.');
-    const pai = e.parentElement;
-    if (pai) { const irm = [...pai.children].filter((x) => x.tagName === e.tagName); if (irm.length > 1) s += ':nth-of-type(' + (irm.indexOf(e) + 1) + ')'; }
-    partes.unshift(s);
-    try { if (document.querySelectorAll(partes.join(' > ')).length === 1) return partes.join(' > '); } catch (_) {}
-    e = pai;
-  }
-  return partes.join(' > ');
-}`;
-
-const LISTAR = `(() => {
-  ${SELETOR_JS}
-  const vis = (el) => { const r = el.getBoundingClientRect(); const cs = getComputedStyle(el);
-    return r.width > 20 && r.height > 12 && cs.visibility !== 'hidden' && cs.display !== 'none' && +cs.opacity > 0.05; };
-  const txt = (el) => String(el.innerText || el.getAttribute('alt') || el.getAttribute('aria-label') || '').replace(/\\s+/g, ' ').trim().slice(0, 70);
-  const out = [], vistos = new Set();
-  const por = (el, tipo) => {
-    if (!el || vistos.has(el) || !vis(el)) return;
-    vistos.add(el);
-    const r = el.getBoundingClientRect();
-    out.push({ tipo, seletor: __sel(el), texto: txt(el), largura: Math.round(r.width), altura: Math.round(r.height), y: Math.round(r.top + scrollY) });
-  };
-  const logo = document.querySelector('header img[alt*="logo" i], header [class*="logo" i], img[alt*="logo" i], [class*="logo" i] img, [class*="logo" i] svg, header svg, header img');
-  por(logo, 'logo');
-  por(document.querySelector('nav') || document.querySelector('header'), 'menu');
-  const h1 = document.querySelector('h1');
-  por(h1, 'titulo');
-  if (h1) { let e = h1.parentElement; while (e && e !== document.body && e.getBoundingClientRect().height < innerHeight * 0.45) e = e.parentElement; if (e && e !== document.body) por(e, 'hero'); }
-  const botoes = [...document.querySelectorAll('a, button, [role=button]')].filter((b) => {
-    const cs = getComputedStyle(b), r = b.getBoundingClientRect();
-    const temCor = cs.backgroundColor && !/rgba\\(0, 0, 0, 0\\)|transparent/.test(cs.backgroundColor);
-    return txt(b) && r.width >= 70 && r.height >= 28 && r.height < 120 && (temCor || parseFloat(cs.borderWidth) > 0) && r.top + scrollY < innerHeight * 3;
-  });
-  botoes.slice(0, 5).forEach((b) => por(b, 'botao'));
-  // Cartões: três ou mais irmãos com a mesma classe e tamanho de cartão.
-  const grupos = new Map();
-  for (const el of document.querySelectorAll('body *')) {
-    if (!el.className || typeof el.className !== 'string' || !el.parentElement) continue;
-    const k = el.parentElement.tagName + '|' + el.className;
-    const r = el.getBoundingClientRect();
-    if (r.width < 140 || r.width > 700 || r.height < 100 || r.height > 900) continue;
-    if (!grupos.has(k)) grupos.set(k, []);
-    grupos.get(k).push(el);
-  }
-  [...grupos.values()].filter((g) => g.length >= 3).slice(0, 4).forEach((g) => { por(g[0], 'cartao'); });
-  [...document.querySelectorAll('img')].filter((i) => (i.naturalWidth || 0) >= 300).slice(0, 4).forEach((i) => por(i, 'imagem'));
-  por(document.querySelector('form'), 'formulario');
-  por(document.querySelector('[class*="pric" i], [id*="pric" i], [class*="preco" i], [class*="plano" i]'), 'preco');
-  por(document.querySelector('footer'), 'rodape');
-  return JSON.stringify(out.slice(0, 25));
-})()`;
-
-/* Acha o alvo (pelo seletor ou pelo texto), isola e devolve a caixa e o código. */
-const ISOLAR = (seletor, texto, transparente) => `(async () => {
-  let alvo = null;
-  try { alvo = ${JSON.stringify(seletor || '')} ? document.querySelector(${JSON.stringify(seletor || '')}) : null; } catch (_) {}
-  const quer = ${JSON.stringify(String(texto || '').toLowerCase())};
-  if (!alvo && quer) {
-    const cand = [...document.querySelectorAll('a, button, h1, h2, h3, h4, p, li, span, div, section, article, img, figure')]
-      .filter((e) => { const t = String(e.innerText || e.getAttribute('alt') || '').toLowerCase(); const r = e.getBoundingClientRect(); return t.includes(quer) && r.width > 10 && r.height > 8; });
-    // O MENOR que contém o texto: o botão, e não a seção inteira em volta dele.
-    cand.sort((a, b) => { const ra = a.getBoundingClientRect(), rb = b.getBoundingClientRect(); return ra.width * ra.height - rb.width * rb.height; });
-    alvo = cand[0] || null;
-  }
-  if (!alvo) return JSON.stringify({ erro: 'não achei esse elemento na página' });
-  alvo.scrollIntoView({ block: 'center' });
-  await new Promise((r) => setTimeout(r, 500));
-  if (${transparente ? 'true' : 'false'}) {
-    alvo.setAttribute('data-primo-alvo', '1');
-    const st = document.createElement('style');
-    st.textContent = 'html, body { background: transparent !important; } body * { visibility: hidden !important; } '
-      + '[data-primo-alvo], [data-primo-alvo] * { visibility: visible !important; }';
-    document.head.appendChild(st);
-    await new Promise((r) => setTimeout(r, 150));
-  }
-  const r = alvo.getBoundingClientRect();
-  const cs = getComputedStyle(alvo);
-  const html = alvo.outerHTML.replace(/<script[\\s\\S]*?<\\/script>/gi, '').replace(/\\s+/g, ' ').slice(0, 3000);
-  return JSON.stringify({ x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height, html, texto: String(alvo.innerText || '').trim().slice(0, 200),
-    estilo: { fonte: cs.fontFamily, peso: cs.fontWeight, tamanho: cs.fontSize, cor: cs.color, fundo: cs.backgroundColor, raio: cs.borderRadius, sombra: cs.boxShadow !== 'none' ? cs.boxShadow : '', borda: cs.border } });
-})()`;
-
-async function abrir(navegador, alvo, metrica, op = {}) {
-    const aba = await navegador.abaEscondida('about:blank', { assentar: 0 });
-    const s = aba.sessao;
-    await s.send('Emulation.setDeviceMetricsOverride', metrica);
-    if (metrica.mobile) await s.send('Emulation.setTouchEmulationEnabled', { enabled: true }).catch(() => {});
-    await s.send('Page.navigate', { url: alvo });
-    const prazo = Date.now() + (op.prazo || 20000);
-    while (Date.now() < prazo) {
-        if (await valor(s, 'document.readyState') === 'complete') break;
-        await sleep(200);
-    }
-    await sleep(op.assentar == null ? 1500 : op.assentar);
-    return aba;
-}
-
-/**
- * As peças que dá para tirar do site: logo, menu, título, hero, botões,
- * cartões, imagens, formulário, preço, rodapé — cada uma com o seletor.
- */
-async function elementosDoSite(url, op = {}) {
-    const alvo = normalizarUrl(url);
-    if (!alvo) return { ok: false, error: `"${url || ''}" não é o endereço de um site (http ou https).` };
-    const navegador = op.navegador || require('../browser.js');
-    let aba;
-    try {
-        aba = await abrir(navegador, alvo, TELAS[op.celular ? 'celular' : 'computador'], op);
-        let lista = [];
-        try { lista = JSON.parse(await valor(aba.sessao, LISTAR) || '[]'); } catch { /* vazio */ }
-        return { ok: true, url: alvo, elementos: lista,
-            proximo: 'estudio_midia acao:elemento com url e seletor (ou texto: "o que está escrito nele") tira a peça sozinha, com fundo transparente.' };
-    } catch (e) {
-        return { ok: false, error: `não consegui ler ${alvo}: ${e.message}` };
-    } finally {
-        if (aba) { try { await aba.fechar(); } catch { /* já fechou */ } }
-    }
-}
-
-/**
- * Tira UM elemento do site, sozinho: PNG transparente no dobro da resolução,
- * mais o código dele (html e estilo calculado).
- *
- * @param {object} op { pasta, seletor, texto, celular, transparente (padrão true), margem }
- */
-async function capturarElemento(url, op = {}) {
-    const alvo = normalizarUrl(url);
-    if (!alvo) return { ok: false, error: `"${url || ''}" não é o endereço de um site (http ou https).` };
-    if (!op.pasta) return { ok: false, error: 'o elemento vai para a pasta do projeto — diga o projeto (id).' };
-    if (!op.seletor && !op.texto) return { ok: false, error: 'diga qual elemento: seletor (de acao:elementos) ou texto (o que está escrito nele).' };
-    const navegador = op.navegador || require('../browser.js');
-    const tela = op.celular ? 'celular' : 'computador';
-    const metrica = { ...TELAS[tela], deviceScaleFactor: 2 };
-    const transparente = op.transparente !== false;
-    let aba;
-    try {
-        aba = await abrir(navegador, alvo, metrica, op);
-        const s = aba.sessao;
-        let info = {};
-        try { info = JSON.parse(await valor(s, ISOLAR(op.seletor, op.texto, transparente), true) || '{}'); } catch { /* sem */ }
-        if (info.erro || !info.w) return { ok: false, error: info.erro || 'o elemento não tem tamanho na tela (escondido?)' };
-        if (transparente) await s.send('Emulation.setDefaultBackgroundColorOverride', { color: { r: 0, g: 0, b: 0, a: 0 } }).catch(() => {});
-        const m = op.margem == null ? 8 : Number(op.margem) || 0;
-        const clip = { x: Math.max(0, info.x - m), y: Math.max(0, info.y - m), width: info.w + 2 * m, height: Math.min(info.h + 2 * m, 4000), scale: 1 };
-        const r = await s.send('Page.captureScreenshot', { format: 'png', captureBeyondViewport: true, clip }, 60000);
-        if (!r || !r.data) return { ok: false, error: 'o navegador devolveu um print vazio.' };
-        const host = new URL(alvo).hostname.replace(/^www\./, '').replace(/[^a-z0-9.-]/gi, '-');
-        const nome = String(op.seletor || op.texto).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 30) || 'elemento';
-        const src = `midia/site/${host}-${nome}.png`;
-        const cheio = path.join(op.pasta, src);
-        fs.mkdirSync(path.dirname(cheio), { recursive: true });
-        fs.writeFileSync(cheio, Buffer.from(r.data, 'base64'));
-        const largura = Math.round(clip.width), altura = Math.round(clip.height);
-        return {
-            ok: true, src, url: alvo, largura, altura, proporcao: Math.round((altura / largura) * 1000) / 1000, transparente,
-            texto: info.texto, codigo: { html: info.html, estilo: info.estilo },
-            elemento: { tipo: 'imagem', src, ajuste: 'contain', x: 0, y: 0, largura, altura },
-            nota: 'O PNG tem o dobro da resolução: escale à vontade. O código (html e estilo) serve para redesenhar a peça como componente, se preferir animá-la por dentro.',
-        };
-    } catch (e) {
-        return { ok: false, error: `não consegui tirar o elemento de ${alvo}: ${e.message}` };
-    } finally {
-        if (aba) { try { await aba.fechar(); } catch { /* já fechou */ } }
-    }
-}
-
-module.exports = { capturarSite, elementoDoPrint, elementosDoSite, capturarElemento, normalizarUrl, TELAS, ALTURA_MAX, LISTAR, ISOLAR };