primocode 9.8.0-beta.5 → 9.8.0-beta.7

package/kits/premium/script.js

@@ -0,0 +1,11 @@
+// Premium: um só movimento, na abertura. O arco sobe devagar quando a página
+// carrega, e nada mais se mexe: animação em toda seção tira o ar de calma.
+(function(){
+  var d=document;
+  d.documentElement.classList.add('js');
+  var arco=d.getElementById('arco');
+  if(!arco) return;
+  // Dois quadros de espera: garante que o navegador pintou o estado inicial
+  // antes de ligar a transição (senão ele pula direto para o fim).
+  requestAnimationFrame(function(){ requestAnimationFrame(function(){ arco.classList.add('pronto'); }); });
+})();

package/kits/premium/style.css

@@ -0,0 +1,87 @@
+:root{
+  /* ── A MARCA ───────────────────────────────────────────────────────
+     Para mudar a cara da página inteira, troque SÓ estas linhas:
+       --primaria   a cor do arco e dos títulos (escura e sóbria)
+       --destaque   o fio de luz no arco e os detalhes (um metal: latão,
+                    cobre, prata)
+       --apoio      as linhas finas e o fundo do depoimento
+       --fundo      o fundo da página (claro e neutro)
+       --fonte-titulo / --fonte-texto   as duas fontes (e o link do
+                    Google Fonts no index.html)
+     O resto do arquivo usa estas variáveis: não precisa mexer nele. */
+  --primaria:#1f3a34;
+  --destaque:#b8955a;
+  --apoio:#dcd9d2;
+  --fundo:#f4f4f1;
+  --fonte-titulo:'Bodoni Moda',Georgia,serif;
+  --fonte-texto:'Manrope',system-ui,sans-serif;
+
+  --tinta:#1c1c1b;
+  --suave:#66655f;
+}
+
+/* Premium: muito espaço vazio e um único elemento marcante (o arco).
+   Tudo o mais é fino, calmo e centrado. O luxo aqui é o que NÃO tem. */
+*{margin:0;padding:0;box-sizing:border-box;}
+html{scroll-behavior:smooth;}
+body{font-family:var(--fonte-texto);font-size:1.02rem;line-height:1.75;color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased;}
+a{color:inherit;}
+:focus-visible{outline:2px solid var(--destaque);outline-offset:4px;}
+h1,h2{font-family:var(--fonte-titulo);font-weight:400;line-height:1.12;color:var(--primaria);letter-spacing:-.01em;}
+.pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--fundo);padding:8px 14px;z-index:10;}
+.pular:focus{left:8px;}
+
+.topo{display:flex;align-items:center;justify-content:space-between;padding:28px clamp(20px,5vw,64px);}
+.marca{font-family:var(--fonte-titulo);font-size:1.6rem;font-weight:500;text-decoration:none;color:var(--primaria);}
+.menu{display:flex;gap:32px;font-size:.95rem;}
+.menu a{text-decoration:none;color:var(--suave);transition:color .3s;}
+.menu a:hover{color:var(--tinta);}
+
+.botao{display:inline-block;padding:14px 32px;border:1px solid var(--primaria);color:var(--primaria);font:500 .98rem var(--fonte-texto);text-decoration:none;letter-spacing:.01em;transition:background .35s,color .35s;}
+.botao:hover{background:var(--primaria);color:var(--fundo);}
+.botao-cheio{background:var(--primaria);color:var(--fundo);}
+.botao-cheio:hover{background:transparent;color:var(--primaria);}
+
+/* O arco: uma janela alta, com um fio de metal por dentro e um sol baixo */
+.abertura{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,5vw,56px) 24px clamp(90px,12vw,160px);}
+.arco{position:relative;width:min(380px,70vw);aspect-ratio:3/4.2;border-radius:999px 999px 0 0;background:var(--primaria);overflow:hidden;margin-bottom:clamp(40px,6vw,72px);transform-origin:50% 100%;}
+.arco::before{content:'';position:absolute;inset:18px 18px 0;border:1px solid var(--destaque);border-bottom:0;border-radius:999px 999px 0 0;opacity:.8;}
+.arco-luz{position:absolute;left:50%;bottom:-18%;width:64%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--destaque),color-mix(in srgb,var(--destaque) 30%,var(--primaria)) 70%);opacity:.95;}
+.abertura h1{font-size:clamp(2.2rem,4.8vw,4.1rem);max-width:18ch;margin-bottom:22px;}
+.abertura-texto{color:var(--suave);font-size:1.1rem;margin-bottom:40px;}
+
+/* Entrada: só o arco sobe, uma vez, ao abrir a página */
+.js .arco{opacity:0;transform:scaleY(.86);}
+.js .arco.pronto{opacity:1;transform:none;transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.1,1);}
+
+.manifesto{padding:clamp(80px,12vw,160px) 24px;border-top:1px solid var(--apoio);}
+.manifesto p{max-width:30ch;margin:0 auto;text-align:center;font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.4;color:var(--tinta);}
+
+/* O trabalho: três colunas de texto com um fio em cima, sem caixa */
+.trabalho{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,80px);max-width:1160px;margin:0 auto;padding:clamp(60px,8vw,120px) clamp(24px,5vw,64px);}
+.frente{border-top:1px solid var(--destaque);padding-top:28px;}
+.frente h2{font-size:clamp(1.45rem,2vw,1.8rem);font-weight:400;margin-bottom:12px;}
+.frente p{color:var(--suave);max-width:34ch;}
+
+.depoimento{background:var(--apoio);padding:clamp(80px,11vw,150px) 24px;text-align:center;}
+.depoimento p{font-family:var(--fonte-titulo);font-style:italic;font-weight:400;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.3;max-width:28ch;margin:0 auto;color:var(--primaria);}
+.depoimento footer{margin-top:24px;color:var(--suave);font-size:.95rem;}
+
+.contato{text-align:center;padding:clamp(90px,12vw,160px) 24px;}
+.contato h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:48px;}
+.contato-grade{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:clamp(28px,6vw,96px);margin-bottom:56px;color:var(--suave);}
+.contato-grade a{text-decoration:none;border-bottom:1px solid var(--apoio);transition:border-color .3s;}
+.contato-grade a:hover{border-color:var(--destaque);}
+
+.rodape{border-top:1px solid var(--apoio);padding:28px;text-align:center;font-size:.9rem;color:var(--suave);}
+
+@media (max-width:760px){
+  .trabalho{grid-template-columns:1fr;}
+  .contato-grade{grid-template-columns:1fr;gap:20px;}
+  .menu{gap:20px;}
+}
+@media (prefers-reduced-motion:reduce){
+  html{scroll-behavior:auto;}
+  *{transition:none!important;}
+  .js .arco{opacity:1;transform:none;}
+}

package/kits/vitrine/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang='pt-BR'>
+<head>
+  <meta charset='UTF-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+  <!-- TROQUE: título e descrição com o nome e a oferta -->
+  <title>Sua Marca, a oferta que chama</title>
+  <meta name='description' content='Uma frase que diz o que é, quando e onde.'>
+  <link rel='preconnect' href='https://fonts.googleapis.com'>
+  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
+  <!-- TROQUE (se quiser): a fonte. Se trocar aqui, troque --fonte-titulo e --fonte-texto no topo do style.css -->
+  <link href='https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap' rel='stylesheet'>
+  <link rel='stylesheet' href='style.css'>
+  <script src='script.js' defer></script>
+</head>
+<body>
+  <a class='pular' href='#conteudo'>Pular para o conteúdo</a>
+
+  <!-- TROQUE: o nome e o link do pedido (WhatsApp, loja, ingresso) -->
+  <header class='topo'>
+    <a href='#' class='marca'>Sua Marca</a>
+    <a href='https://wa.me/5500000000000' class='botao botao-preto'>Quero o meu</a>
+  </header>
+
+  <main id='conteudo'>
+    <!-- TROQUE: o título curto e barulhento (poucas palavras), o selo e a frase de apoio -->
+    <section class='palco'>
+      <h1>Uma frase curta que dá fome.</h1>
+      <p class='selo'><span>Só nesta semana</span></p>
+      <div class='palco-base'>
+        <p class='palco-texto'>O que é, para quem é, e o motivo para pedir hoje. Duas frases, sem enrolar.</p>
+        <a href='https://wa.me/5500000000000' class='botao botao-preto'>Fazer meu pedido</a>
+      </div>
+    </section>
+
+    <!-- TROQUE: a data (no texto E no data-alvo, formato 2026-12-31T20:00), o lugar e o preço. Sem data? Apague o <p id='contagem'>. -->
+    <section class='quando' aria-label='Quando e onde'>
+      <div class='quando-data'>
+        <p class='quando-rotulo'>Quando</p>
+        <p class='quando-valor'>Sábado, 12 de dezembro</p>
+        <p id='contagem' class='contagem' data-alvo='2026-12-12T19:00'></p>
+      </div>
+      <div class='quando-lugar'>
+        <p class='quando-rotulo'>Onde</p>
+        <p class='quando-valor'>Rua Exemplo, 100, Sua Cidade</p>
+      </div>
+      <div class='quando-preco'>
+        <p class='quando-rotulo'>A partir de</p>
+        <p class='quando-valor'>R$ 00</p>
+      </div>
+    </section>
+
+    <!-- TROQUE: os produtos (ou atrações). O primeiro é a estrela e fica grande. Pode ter 4 a 6. -->
+    <section id='cardapio' class='mosaico' aria-label='O que tem'>
+      <article class='peca peca-estrela'>
+        <div class='arte arte-circulos' aria-hidden='true'></div>
+        <h2>O campeão da casa</h2>
+        <p>Por que todo mundo pede este. Uma frase que dá vontade.</p>
+        <p class='etiqueta'>R$ 00</p>
+      </article>
+      <article class='peca peca-azul'>
+        <div class='arte arte-meia' aria-hidden='true'></div>
+        <h3>Segundo item</h3>
+        <p>Uma frase curta e gostosa.</p>
+        <p class='etiqueta'>R$ 00</p>
+      </article>
+      <article class='peca peca-branca'>
+        <div class='arte arte-listras' aria-hidden='true'></div>
+        <h3>Terceiro item</h3>
+        <p>Uma frase curta e gostosa.</p>
+        <p class='etiqueta'>R$ 00</p>
+      </article>
+      <article class='peca peca-amarela'>
+        <div class='arte arte-gota' aria-hidden='true'></div>
+        <h3>Quarto item</h3>
+        <p>Uma frase curta e gostosa.</p>
+        <p class='etiqueta'>R$ 00</p>
+      </article>
+      <article class='peca peca-preta'>
+        <div class='arte arte-estrela' aria-hidden='true'></div>
+        <h3>Quinto item</h3>
+        <p>Uma frase curta e gostosa.</p>
+        <p class='etiqueta'>R$ 00</p>
+      </article>
+    </section>
+
+    <!-- TROQUE: como pedir, em três verbos (é uma sequência de verdade) e uma frase -->
+    <section class='passos'>
+      <p class='passos-verbos'>Escolha. <span>Chame.</span> Aproveite.</p>
+      <p class='passos-texto'>Uma frase que explica o caminho: onde pedir, em quanto tempo chega, como pagar.</p>
+    </section>
+
+    <!-- TROQUE: o último empurrão e os contatos -->
+    <section id='pedir' class='final'>
+      <h2>Bora?</h2>
+      <p>O convite final, com a urgência verdadeira (acaba quando?).</p>
+      <a href='https://wa.me/5500000000000' class='botao botao-preto'>Chamar no WhatsApp</a>
+      <p class='final-redes'><a href='https://instagram.com/'>@suamarca</a> no Instagram</p>
+    </section>
+  </main>
+
+  <!-- TROQUE: ano, nome e cidade -->
+  <footer class='rodape'>
+    <p>© 2026 Sua Marca, Sua Cidade</p>
+    <a href='#'>Voltar ao topo</a>
+  </footer>
+</body>
+</html>

package/kits/vitrine/script.js

@@ -0,0 +1,20 @@
+// Vitrine: a pressa de verdade é a data. O script conta quantos dias faltam
+// para o data-alvo e escreve em palavras ("Faltam 12 dias"), em vez de um
+// relógio piscando. Se a data passou ou está vazia, o selo some sozinho.
+(function(){
+  var el=document.getElementById('contagem');
+  if(!el) return;
+  var alvo=new Date(el.getAttribute('data-alvo')||'');
+  if(isNaN(alvo)) { el.textContent=''; return; }
+  function escrever(){
+    var ms=alvo-new Date();
+    if(ms<=0){ el.textContent=''; return; }
+    var dias=Math.floor(ms/864e5), horas=Math.floor(ms/36e5);
+    if(dias>1) el.textContent='Faltam '+dias+' dias';
+    else if(dias===1) el.textContent='É amanhã';
+    else if(horas>=1) el.textContent='Faltam '+horas+(horas===1?' hora':' horas');
+    else el.textContent='É agora';
+  }
+  escrever();
+  setInterval(escrever,6e4);
+})();

package/kits/vitrine/style.css

@@ -0,0 +1,117 @@
+:root{
+  /* ── A MARCA ───────────────────────────────────────────────────────
+     Para mudar a cara da página inteira, troque SÓ estas linhas:
+       --primaria   o bloco de abertura e a peça estrela
+       --destaque   o selo, as etiquetas de preço e o bloco final
+       --apoio      a faixa de data e as peças de cor
+       --fonte-titulo / --fonte-texto   a fonte (e o link do Google
+                    Fonts no index.html)
+     Cores vivas e fortes funcionam melhor aqui. O resto do arquivo usa
+     estas variáveis: não precisa mexer nele. */
+  --primaria:#ffd23f;
+  --destaque:#ff4f8b;
+  --apoio:#2d5bff;
+  --fonte-titulo:'Bricolage Grotesque',system-ui,sans-serif;
+  --fonte-texto:'Bricolage Grotesque',system-ui,sans-serif;
+
+  --tinta:#141414;
+  --branco:#ffffff;
+  --lado:clamp(16px,3vw,40px);
+}
+
+/* Vitrine: blocos de cor chapada, tipo enorme e contorno grosso, como
+   cartaz de rua. Nada de sombra suave nem vidro: tudo é plano e forte. */
+*{margin:0;padding:0;box-sizing:border-box;}
+html{scroll-behavior:smooth;}
+body{font-family:var(--fonte-texto);font-size:1.1rem;line-height:1.5;color:var(--tinta);background:var(--branco);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
+a{color:inherit;}
+:focus-visible{outline:4px solid var(--apoio);outline-offset:3px;}
+h1,h2,h3{font-family:var(--fonte-titulo);font-weight:800;line-height:.95;letter-spacing:-.035em;}
+.pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--branco);padding:8px 14px;z-index:10;}
+.pular:focus{left:8px;}
+
+.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--lado);background:var(--primaria);border-bottom:3px solid var(--tinta);}
+.marca{font-family:var(--fonte-titulo);font-weight:800;font-size:1.6rem;letter-spacing:-.04em;text-decoration:none;}
+
+.botao{display:inline-block;padding:14px 26px;border:3px solid var(--tinta);border-radius:14px;background:var(--branco);color:var(--tinta);font:800 1.05rem var(--fonte-titulo);text-decoration:none;box-shadow:5px 5px 0 var(--tinta);transition:transform .15s,box-shadow .15s;}
+.botao:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--tinta);}
+.botao:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--tinta);}
+.botao-preto{background:var(--tinta);color:var(--branco);box-shadow:5px 5px 0 var(--destaque);}
+.botao-preto:hover{box-shadow:7px 7px 0 var(--destaque);}
+.botao-preto:active{box-shadow:2px 2px 0 var(--destaque);}
+
+/* Palco: o título ocupa a largura toda, e o selo gira no canto */
+.palco{position:relative;background:var(--primaria);padding:clamp(40px,6vw,80px) var(--lado) clamp(48px,6vw,80px);border-bottom:3px solid var(--tinta);overflow:hidden;}
+.palco h1{font-size:clamp(3.4rem,12.5vw,13rem);max-width:10ch;position:relative;z-index:1;}
+.selo{position:absolute;right:clamp(16px,6vw,110px);top:clamp(24px,5vw,70px);width:clamp(120px,15vw,210px);aspect-ratio:1;display:grid;place-items:center;text-align:center;border-radius:50%;background:var(--destaque);font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(1rem,1.6vw,1.45rem);line-height:1.05;transform:rotate(-12deg);z-index:2;
+  /* a borda serrilhada do selo: um polígono de 24 pontas */
+  clip-path:polygon(50% 0%,56.5% 7.4%,65.4% 3.4%,68.8% 12.6%,78.6% 12.4%,78.3% 22.1%,87.6% 25%,84.1% 34.1%,92.1% 39.8%,86.4% 47.6%,92.1% 55.8%,84.1% 61%,87.6% 70%,78.3% 73%,78.6% 82.7%,68.8% 82.4%,65.4% 91.6%,56.5% 87.6%,50% 95%,43.5% 87.6%,34.6% 91.6%,31.2% 82.4%,21.4% 82.7%,21.7% 73%,12.4% 70%,15.9% 61%,7.9% 55.8%,13.6% 47.6%,7.9% 39.8%,15.9% 34.1%,12.4% 25%,21.7% 22.1%,21.4% 12.4%,31.2% 12.6%,34.6% 3.4%,43.5% 7.4%);}
+.selo span{max-width:8ch;}
+.palco-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,4vw,48px);}
+.palco-texto{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600;max-width:34ch;}
+
+/* Quando e onde: uma faixa de três colunas com filete preto entre elas */
+.quando{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;background:var(--apoio);color:var(--branco);border-bottom:3px solid var(--tinta);}
+.quando>div{padding:28px var(--lado);}
+.quando>div+div{border-left:3px solid var(--tinta);}
+.quando-rotulo{font-weight:600;opacity:.85;}
+.quando-valor{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.02em;margin-top:4px;}
+.contagem{margin-top:10px;display:inline-block;background:var(--primaria);color:var(--tinta);font-weight:800;padding:4px 12px;border-radius:999px;border:2px solid var(--tinta);}
+.contagem:empty{display:none;}
+
+/* Mosaico: peças de tamanhos e cores diferentes, e não cards iguais */
+.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto);gap:3px;background:var(--tinta);border-bottom:3px solid var(--tinta);}
+.peca{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:28px;overflow:hidden;background:var(--branco);}
+.peca h2,.peca h3,.peca p{position:relative;z-index:1;}
+.peca h3{font-size:clamp(1.6rem,2.4vw,2.2rem);}
+.peca p{max-width:28ch;font-weight:600;}
+.peca-estrela{grid-column:span 2;grid-row:span 2;background:var(--destaque);}
+.peca-estrela h2{font-size:clamp(2.6rem,5.5vw,5.2rem);max-width:9ch;}
+.peca-estrela p{font-size:1.25rem;}
+.peca-azul{background:var(--apoio);color:var(--branco);}
+.peca-amarela{background:var(--primaria);}
+.peca-preta{background:var(--tinta);color:var(--branco);}
+.etiqueta{position:absolute!important;top:22px;right:22px;background:var(--branco);color:var(--tinta);font-family:var(--fonte-titulo);font-weight:800;font-size:1.3rem;padding:6px 14px;border:3px solid var(--tinta);border-radius:10px;transform:rotate(4deg);}
+.peca-estrela .etiqueta{font-size:2rem;padding:8px 18px;transform:rotate(-5deg);}
+
+/* As artes: formas geométricas no lugar da foto (o pedido pode não ter foto) */
+.arte{position:absolute;z-index:0;}
+.arte-circulos{right:-8%;top:10%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--primaria) 0 22%,transparent 22.5% 36%,var(--primaria) 36.5% 50%,transparent 50.5%);}
+.arte-meia{right:-30px;top:-30px;width:170px;aspect-ratio:1;border-radius:50%;background:var(--primaria);}
+.arte-listras{left:0;right:0;top:0;height:46%;background:repeating-linear-gradient(-45deg,var(--destaque) 0 16px,transparent 16px 32px);opacity:.9;}
+.arte-gota{right:24px;top:70px;width:110px;aspect-ratio:1;border-radius:50% 0 50% 50%;background:var(--destaque);transform:rotate(-45deg);}
+.arte-estrela{right:22px;top:64px;width:120px;aspect-ratio:1;background:var(--primaria);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
+
+/* Passos: três verbos em uma linha enorme */
+.passos{padding:clamp(56px,8vw,110px) var(--lado);border-bottom:3px solid var(--tinta);}
+.passos-verbos{font-family:var(--fonte-titulo);font-weight:800;font-size:clamp(2.6rem,9vw,8.5rem);line-height:.95;letter-spacing:-.04em;}
+.passos-verbos span{color:var(--apoio);}
+.passos-texto{margin-top:24px;font-size:1.3rem;font-weight:600;max-width:40ch;}
+
+.final{background:var(--destaque);padding:clamp(56px,8vw,110px) var(--lado);text-align:center;border-bottom:3px solid var(--tinta);}
+.final h2{font-size:clamp(4.5rem,16vw,14rem);}
+.final p{font-size:1.3rem;font-weight:600;margin:16px auto 28px;max-width:34ch;}
+.final .botao-preto{box-shadow:5px 5px 0 var(--primaria);}
+.final-redes{font-size:1.05rem!important;margin-top:28px!important;}
+
+.rodape{display:flex;justify-content:space-between;gap:16px;padding:22px var(--lado);background:var(--tinta);color:var(--branco);font-weight:600;}
+
+@media (max-width:960px){
+  .mosaico{grid-template-columns:1fr 1fr;}
+  .peca-estrela{grid-column:span 2;grid-row:span 1;min-height:380px;}
+}
+@media (max-width:640px){
+  .quando{grid-template-columns:1fr;}
+  .quando>div+div{border-left:0;border-top:3px solid var(--tinta);}
+  .mosaico{grid-template-columns:1fr;}
+  .peca-estrela,.peca-preta{grid-column:auto;}
+  .peca{min-height:230px;}
+  .peca-estrela{min-height:400px;padding-top:110px;}
+  .selo{position:relative;right:auto;top:auto;width:116px;margin-top:22px;}
+  .arte-circulos{width:46%;top:22%;right:-12%;}
+  .palco{padding-bottom:40px;}
+  .palco-base{flex-direction:column;align-items:flex-start;}
+  .rodape{flex-direction:column;}
+  .topo .botao{padding:10px 16px;font-size:.95rem;}
+}
+@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

package/lib/act.js

@@ -24,6 +24,8 @@ const permissao = require('./permissao');
 const perigo = require('./perigo');
 const skills = require('./skills');
 const checkpoint = require('./checkpoint');
+const tempos = require('./tempos');
+const preLeitura = require('./pre-leitura');
 
 // 40, não 15: com o freio de repetição (repeticao.js) e o de rodada parada,
 // volta a mais não é volta em círculo — é trabalho. Quinze acabavam no meio
@@ -35,6 +37,8 @@ const MAX_EMPURROES = 3;
 // Voltas seguidas sem executar nada antes de desistir.
 const MAX_RODADAS_PARADAS = 3;
 const MAX_PROFUNDIDADE = 2; // principal + 1 nível de subagente
+// As leituras que, repetidas sem mudança no meio, devolvem o guardado.
+const RELEITURA = new Set(['read_file', 'list_dir']);
 
 // ── Interrupção (Esc Esc) ─────────────────────────────────────────────────
 // O usuário aperta Esc duas vezes e o agente PARA — entre uma rodada e outra
@@ -382,6 +386,7 @@ async function pausar(ms, subagent) {
     const sp = subagent ? null : new Spinner(PENSANDO).start();
     await new Promise((r) => setTimeout(r, ms));
     if (sp) sp.stop();
+    tempos.somar('espera de cota/rede', ms);
 }
 
 /**
@@ -451,10 +456,10 @@ function motivoDaParada({ voltas, voltasEmFalso, falhasPendentes, travou }) {
 const PULAR_NO_MAPA = new Set(['node_modules', '.git', 'dist', 'build', '.next', '.nuxt', 'out',
     '.cache', 'coverage', '__pycache__', '.venv', 'venv', '.turbo', '.vercel', '.idea', '.vscode']);
 
-function mapaDoProjeto(dir, limite = 80) {
+function arquivosDoProjeto(dir, limite = 80) {
     const path = require('path');
     const fs = require('fs');
-    if (!dir || path.resolve(dir) === path.resolve(cfg.ROOT_DIR)) return '';
+    if (!dir || path.resolve(dir) === path.resolve(cfg.ROOT_DIR)) return [];
     const achados = [];
     const andar = (atual, fundo) => {
         if (fundo > 4 || achados.length >= limite) return;
@@ -470,12 +475,18 @@ function mapaDoProjeto(dir, limite = 80) {
         }
     };
     andar(dir, 0);
+    return achados;
+}
+
+function mapaDoProjeto(dir, limite = 80, achados = arquivosDoProjeto(dir, limite)) {
     if (!achados.length) return '';
     const mais = achados.length >= limite ? `\n… (mais arquivos — use glob para achar)` : '';
     return `Arquivos que JÁ existem neste projeto (edite-os em vez de recriar):\n${achados.join('\n')}${mais}`;
 }
 
-function buildMemoryContext(projectDir, projectName) {
+/* `pedido` é opcional: com ele, o arquivo citado no pedido é o primeiro a
+   entrar já lido (ver lib/pre-leitura.js). */
+function buildMemoryContext(projectDir, projectName, pedido = '') {
     const parts = [];
     // As instruções vêm primeiro: são regra de quem manda no projeto, e a
     // memória é o que o agente anotou. Entram aqui (e não no bin) para valer
@@ -486,8 +497,11 @@ function buildMemoryContext(projectDir, projectName) {
     if (geral.trim()) parts.push(`[memory-geral.md]\n${geral}`);
     const projeto = cfg.readProjectMemory(projectDir);
     if (projeto.trim()) parts.push(`[${projectName || 'projeto'}/memory.md]\n${projeto}`);
-    const mapa = mapaDoProjeto(projectDir);
-    if (mapa) parts.push(`[${projectName || 'projeto'}/arquivos]\n${mapa}`);
+    const arquivos = arquivosDoProjeto(projectDir);
+    const mapa = mapaDoProjeto(projectDir, 80, arquivos);
+    if (mapa) parts.push(`[${projectName || 'projeto'}/arquivos]\n${mapa}\n\n${preLeitura.JUNTAR_LEITURAS}`);
+    const lidos = preLeitura.bloco(preLeitura.escolher(projectDir, arquivos, pedido));
+    if (lidos) parts.push(lidos);
     return parts.join('\n\n');
 }
 
@@ -520,6 +534,11 @@ async function runAct(userPrompt, opts) {
         /* Quem abre a página para conferir antes do "pronto". Injetável pelo
            mesmo motivo do `motor`: o teste mede a regra sem abrir um Chrome. */
         medirPagina = (dir) => require('./pipeline.js').medirNoNavegador(dir),
+        /* Quem LIGA o navegador escondido antes da hora. Injetável pelo mesmo
+           motivo do `medirPagina` — e só vale junto com o padrão dele: um
+           teste que troca o medidor não pode subir um Chrome de verdade. */
+        aquecerPagina = opts && opts.medirPagina ? null
+            : () => require('./browser.js').aquecerRevisor(),
     } = opts || {};
 
     // A pasta de projeto só nasce quando o agente for mesmo MEXER EM ARQUIVO.
@@ -550,6 +569,7 @@ async function runAct(userPrompt, opts) {
     let mexeuNaPagina = false;       // mexeu desde a última conferência?
     let conferencias = 0;            // até duas: entregar, e conferir o conserto
     let avisoDaPagina = '';          // o que ainda estava quebrado na última
+    let msConferindo = 0;            // para o PRIMOCODE_TEMPOS separar as fases
     /* Abre a página e devolve o relato quando é para VOLTAR (achou problema e
        ainda cabe uma volta); null quando é para entregar. O que ficar
        quebrado na última conferência fica em `avisoDaPagina`, e a entrega sai
@@ -560,10 +580,13 @@ async function runAct(userPrompt, opts) {
         conferencias++;
         mexeuNaPagina = false;
         let medida = null;
+        const t = Date.now();
         try {
             fala.pensamento('abrindo a página para conferir antes de entregar', profundidade);
             medida = await medirPagina(pastaAtual);
         } catch { medida = null; }
+        msConferindo += Date.now() - t;
+        tempos.somar('conferir página', Date.now() - t);
         if (!medida || !medida.testou) return null;
         avisoDaPagina = medida.limpo ? ''
             : String(medida.relato || '').split('\n').filter((l) => /·|BRANCO/.test(l)).slice(0, 3).join(' ');
@@ -574,6 +597,8 @@ async function runAct(userPrompt, opts) {
         ? `${texto}\n\nAtenção: abri a página e ela ainda tem problema — ${avisoDaPagina.trim()}` : texto);
     // Quem já foi chamado, e quantas vezes. Ver lib/repeticao.js.
     const jaChamado = repeticao.novo();
+    // O que read_file/list_dir devolveram, pela chave da época (repeticao.js).
+    const leiturasGuardadas = new Map();
     /* O livro deste pedido: arquivos, comandos, links, testes e falhas. Sai
        no fim como balanço (ver lib/registro.js). O subagente tem o seu, que
        não se mistura com o do principal — mas o que ele fez também precisa
@@ -623,7 +648,7 @@ async function runAct(userPrompt, opts) {
 
     const messages = [];
     if (!subagent) {
-        const memory = buildMemoryContext(projectDir, projectName);
+        const memory = buildMemoryContext(projectDir, projectName, userPrompt);
         if (memory) messages.push({ role: 'system', content: `Memória persistente:\n\n${memory}` });
         for (const m of (history || []).slice(-20)) {
             if (m && m.role && m.content) messages.push({ role: m.role, content: m.content });
@@ -735,6 +760,7 @@ async function runAct(userPrompt, opts) {
         let fluxo = null;
 
         emVoo = new AbortController();
+        const tRodada = Date.now();
         try {
             await motor.requestAct(server, { messages: compactar(messages), model, effort, token, projectDir: pastaAtual, projectName, subagent, sinal: emVoo.signal }, (evt) => {
                 if (evt.erro) { streamError = evt.erro; return; }
@@ -781,6 +807,7 @@ async function runAct(userPrompt, opts) {
         }
         sp.stop();
         emVoo = null;
+        tempos.somar(subagent ? 'rodada do subagente' : 'rodada do modelo', Date.now() - tRodada);
         if (PARAR) { if (fluxo) fluxo.fechar(); break; }
 
         // Chamada de função malformada: o modelo errou a SINTAXE da chamada,
@@ -957,6 +984,8 @@ async function runAct(userPrompt, opts) {
 
         let finished = null;
         let algoRodou = false;
+        const tTools = Date.now();
+        const conferindoAntes = msConferindo;
 
         // ORQUESTRAÇÃO: subagentes da MESMA rodada rodam juntos. O modelo que
         // pede "3 agentes, um por arquivo" esperava paralelismo e recebia uma
@@ -1064,7 +1093,18 @@ async function runAct(userPrompt, opts) {
             const eco = repeticao.ver(jaChamado, tc.name, tc.arguments);
             if (eco.repetida) {
                 voltasEmFalso++;
-                messages.push({ role: 'tool', tool_call_id: tc.id, content: eco.aviso });
+                /* RELER SEM MUDANÇA devolve o que já foi lido, uma vez.
+                   O aviso seco ("o resultado está na conversa acima") mentia
+                   depois do `compactar`: a leitura velha já tinha virado 300
+                   caracteres, e o modelo gastava OUTRA ida ao servidor para
+                   achar o arquivo por outro caminho (um `cat`, um grep). Na
+                   segunda vez vai o conteúdo guardado — ler de novo sem nada
+                   mudar dá o mesmo texto, então não há o que executar. Da
+                   terceira em diante é laço, e o freio segue como era. */
+                const guardado = eco.vezes === 2 && leiturasGuardadas.get(eco.chave);
+                messages.push({ role: 'tool', tool_call_id: tc.id, content: guardado
+                    ? `(sem mudança desde a última leitura — é o mesmo conteúdo; não precisa ler de novo)\n${guardado}`
+                    : eco.aviso });
                 continue;
             }
 
@@ -1125,6 +1165,9 @@ async function runAct(userPrompt, opts) {
             const result = await tools.execute(tc.name, tc.arguments, { projectDir: pastaAtual });
             logResult(tc.name, result, profundidade);
             repeticao.executou(jaChamado, tc.name, tc.arguments);
+            if (RELEITURA.has(tc.name) && result && result.ok !== false) {
+                leiturasGuardadas.set(eco.chave, summarizeForModel(result));
+            }
             if (tc.name === 'write_todos' && result && Array.isArray(result.todos)) todosDaTarefa = result.todos;
             // Além de narrar, ANOTA: no fim do pedido sai o balanço do que
             // nasceu, mudou, rodou e falhou. Narrar sozinho não basta — numa
@@ -1133,6 +1176,19 @@ async function runAct(userPrompt, opts) {
             if (result && result.ok !== false && catalogo.criaProjeto(tc.name, tc.arguments)
                 && /\.(html?|css|m?jsx?|tsx?|vue|svelte)$/i.test(String((tc.arguments && tc.arguments.path) || ''))) {
                 mexeuNaPagina = true;
+                /* O NAVEGADOR ESCONDIDO SOBE AGORA, e não no `finish`.
+                   A conferência só roda quando o agente diz "pronto", e até
+                   lá ainda há pelo menos uma rodada do modelo. Subir o Chrome
+                   ali, em paralelo com ela, tira do "pronto" o tempo de ligar
+                   o navegador e de fazer a PRIMEIRA navegação dele, que é a
+                   parte cara (ver `aquecerRevisor` em lib/browser.js). Medido
+                   em 24/09: a conferência num Chrome recém-aberto levava de
+                   2,1 a 4,6s; aquecido antes, 1,24s — que é o assentar de
+                   1,2s, e nada mais. Sem `await` e sem erro: se não subir, a
+                   conferência tenta de novo e diz o que houve. */
+                if (aquecerPagina && !subagent && conferencias < 2) {
+                    try { Promise.resolve(aquecerPagina()).catch(() => {}); } catch { /* segue */ }
+                }
             }
 
             // Uma escrita bem-sucedida limpa a dívida — mas só a do MESMO
@@ -1174,6 +1230,9 @@ async function runAct(userPrompt, opts) {
             messages.push({ role: 'tool', tool_call_id: tc.id, content: summarizeForModel(result) });
         }
 
+        // A conferência da página tem linha própria: aqui fica só o resto.
+        tempos.somar('ferramentas', Date.now() - tTools - (msConferindo - conferindoAntes));
+
         // Uma volta inteira sem executar nada é o modelo preso. Insistir custa
         // um pedido ao servidor por volta, e as 15 voltas saíam caras para
         // terminar no mesmo lugar — melhor parar e devolver a vez ao usuário.