primocode 9.8.0-beta.4 → 9.8.0-beta.6

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/app.js

@@ -98,6 +98,9 @@ function tipoDe(arquivo) {
  * @param {()=>void}                op.interromper para o que estiver rodando
  * @param {()=>object}              op.estado      { pasta, modo, esforco, projeto }
  * @param {string}                  op.versao
+ * @param {()=>string}              [op.pastaProjeto] liga a IDE (/ide) nesta pasta
+ * @param {'rc'|'ide'}              [op.abrirEm]      qual tela a janela abre
+ * @param {boolean}                 [op.semJanela]    só o servidor, sem abrir navegador
  */
 async function abrir(op) {
     const chave = crypto.randomBytes(16).toString('hex');
@@ -117,6 +120,13 @@ async function abrir(op) {
         }
     }
 
+    /* A IDE (lib/ide.js) mora neste mesmo servidor e fala pelo mesmo fluxo:
+       "um app ao invés de CLI, aí fica uma IDE e uma CLI". Só sobe quando
+       quem abriu diz qual é a pasta do projeto. */
+    const ide = op.pastaProjeto
+        ? require('./ide.js').montar({ pasta: op.pastaProjeto, emitir: (e, d) => emitir(e, d) })
+        : null;
+
     const pararEspelho = espelhar((pedaco) => {
         if (ehRuido(pedaco)) return;
         memoria.push(pedaco);
@@ -175,7 +185,11 @@ async function abrir(op) {
            /app.js sem parâmetro nenhum. A página vinha, ficava sem estilo e
            sem script, e o "app bonito" era um formulário branco. */
         if (rota.startsWith('/api/')) {
-            const dada = url.searchParams.get('k') || req.headers['x-primo-chave'];
+            // A prévia da IDE leva a chave no CAMINHO (ver lib/ide.js): os
+            // arquivos que a página do projeto pede por endereço relativo não
+            // carregam query nenhuma.
+            const naPrevia = rota.match(/^\/api\/ide\/previa\/([0-9a-f]+)/);
+            const dada = (naPrevia && naPrevia[1]) || url.searchParams.get('k') || req.headers['x-primo-chave'];
             if (dada !== chave) {
                 res.writeHead(403, { 'Content-Type': 'text/plain; charset=utf-8' });
                 return res.end('chave inválida — abra a janela com o comando /app');
@@ -185,7 +199,13 @@ async function abrir(op) {
            127.0.0.1 sem preflight. Ela não saberia a chave, mas o cinto e o
            suspensório custam três linhas. */
         const origem = req.headers.origin;
-        if (origem && !origem.startsWith(`http://127.0.0.1:${servidor.__porta}`)
+        /* A exceção é a prévia da IDE: ela roda num iframe sandbox de origem
+           opaca, e o navegador manda `Origin: null` até num <script
+           type="module">. Só GET e só nas rotas da prévia, que apenas LEEM o
+           projeto — nenhuma delas dá ordem ao agente. */
+        const previaOpaca = origem === 'null' && req.method === 'GET'
+            && rota.startsWith('/api/ide/previa/');
+        if (origem && !previaOpaca && !origem.startsWith(`http://127.0.0.1:${servidor.__porta}`)
             && !origem.startsWith(`http://localhost:${servidor.__porta}`)) {
             res.writeHead(403).end();
             return;
@@ -254,6 +274,8 @@ async function abrir(op) {
             return res.end(JSON.stringify(r));
         }
 
+        if (ide && await ide.atender(req, res, url)) return;
+
         if (rota === '/api/estado') {
             res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
             return res.end(JSON.stringify(Object.assign({ versao: op.versao }, op.estado())));
@@ -262,7 +284,7 @@ async function abrir(op) {
         // Estáticos. `basename` corta qualquer "../" antes de virar caminho:
         // este servidor fala com o disco do usuário e não pode servir o que
         // estiver fora da pasta do aplicativo.
-        const nome = rota === '/' ? 'index.html' : path.basename(rota);
+        const nome = rota === '/' ? 'index.html' : rota === '/ide' ? 'ide.html' : path.basename(rota);
         const arquivo = path.join(WEB, nome);
         fs.readFile(arquivo, (erro, dados) => {
             if (erro) { res.writeHead(404).end('não encontrado'); return; }
@@ -274,11 +296,22 @@ async function abrir(op) {
     const porta = await escutar(servidor, PORTA_PADRAO);
     servidor.__porta = porta;
     const url = `http://127.0.0.1:${porta}/?k=${chave}`;
+    const urlIde = `http://127.0.0.1:${porta}/ide?k=${chave}`;
 
-    const janela = await abrirJanela(url);
+    // `semJanela` é para o teste (e para quem só quer o endereço): sem ele,
+    // rodar a suíte abriria uma janela de verdade na tela de quem roda.
+    const janela = op.semJanela ? { modo: 'nenhum' }
+        : await abrirJanela(op.abrirEm === 'ide' && ide ? urlIde : url);
     return {
-        url, porta, chave, servidor, janela,
-        fechar() { try { pararEspelho(); } catch {} try { servidor.close(); } catch {} },
+        url, urlIde: ide ? urlIde : null, porta, chave, servidor, janela,
+        fechar() {
+            try { pararEspelho(); } catch {}
+            try { if (ide) ide.fechar(); } catch {}
+            try { servidor.close(); } catch {}
+            // SSE abertos seguram o close() para sempre; a janela é que
+            // fechou, então as conexões dela também.
+            for (const r of ouvintes) { try { r.end(); } catch {} }
+        },
     };
 }
 
@@ -345,6 +378,8 @@ function abrirJanela(url) {
             const filho = execFile(exe, [
                 `--app=${url}`,
                 `--user-data-dir=${perfil}`,
+                // Sem Keychain: ver SEM_KEYCHAIN em lib/browser.js.
+                ...require('./browser.js').SEM_KEYCHAIN,
                 '--window-size=1180,820',
                 '--no-first-run',
                 '--no-default-browser-check',

package/lib/browser.js

@@ -177,6 +177,16 @@ function httpPutJson(url, timeoutMs = 3000) {
 
 function sleep(ms) { return new Promise((r) => setTimeout(r, ms)); }
 
+/* O Chrome NUNCA mexe no Keychain do Mac (nem no cofre de senhas do Linux).
+ *   "Para de fazer coisas de tentar armazenar chave no Chrome, eu apaguei o
+ *    Chrome." (24/09/2026)
+ * Cada perfil novo do PrimoCode (o do agente, o revisor escondido, a janela
+ * do /rc e do /ide) fazia o Chrome pedir o "Chrome Safe Storage" ao sistema —
+ * uma janela de senha do Mac, do nada, várias vezes. O PrimoCode não guarda
+ * senha em navegador nenhum: estas duas flags fazem o Chrome usar um cofre de
+ * mentira e texto simples no próprio perfil, sem tocar no do sistema. */
+const SEM_KEYCHAIN = ['--use-mock-keychain', '--password-store=basic'];
+
 // ---- WebSocket client mínimo (RFC 6455) para CDP ----------------
 // Suficiente pra CDP (mensagens curtas, texto UTF-8, um cliente por página).
 class MiniWebSocket {
@@ -393,6 +403,7 @@ async function ensureChromeRunning() {
     const args = [
         `--remote-debugging-port=${DEBUG_PORT}`,
         `--user-data-dir=${PROFILE_DIR}`,
+        ...SEM_KEYCHAIN,
         '--no-first-run',
         '--no-default-browser-check',
         '--disable-features=Translate',
@@ -839,6 +850,7 @@ async function subirRevisor() {
         // Zero: o Chrome escolhe uma porta livre e escreve qual no perfil.
         `--remote-debugging-port=${process.env.PRIMOCODE_CDP_PORT_REVISOR || 0}`,
         `--user-data-dir=${perfilRevisor}`,
+        ...SEM_KEYCHAIN,
         // Sempre invisível: é o pedido, e é o que separa este do navegador da
         // pessoa. Não há variável para ligar a janela aqui de propósito.
         '--headless=new', '--disable-gpu', '--disable-dev-shm-usage',
@@ -1116,7 +1128,8 @@ function fecharRevisor() {
 }
 
 module.exports = {
-    scriptDaSeta, verSeta,
+    SEM_KEYCHAIN,
+    scriptDaSeta, verSeta, findChrome,
     open, click, clickText, clickSelector, type, typeInSelector,
     key, screenshot, evaluate, waitFor, wait, scroll, close,
     inspecionarEscondido, rodarEscondido, abrirEscondido, fecharRevisor,