primocode 8.40.0 → 8.42.0

package/lib/ui.js

@@ -160,8 +160,9 @@ const TIPS = [
 ];
 
 const NEWS = [
-    '/effort escolhe o esforço num slider — do rápido ao mais esperto',
-    'Do "high" para cima ele PESQUISA referências antes de escrever',
+    'Vídeo com DIRETOR: roteiro, narração, voz e movimento antes de produzir',
+    'Ele busca e baixa imagem, logo e música — com a licença junto',
+    'A escolha da IA na abertura agora anda nas setinhas',
     'Esc Esc a qualquer momento para o agente no meio do trabalho',
 ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.40.0",
+  "version": "8.42.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Requer conta Conecta Primo AI (Premium ou Super). Cria arquivos, roda comandos, controla navegador e desktop: abre apps, clica em botões e ícones pelo nome, digita e usa atalhos.",
   "main": "bin/primocode.js",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node bin/primocode.js",
-    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/pareamento.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/icone.test.js && node test/exportar.test.js && node test/ate-o-fim.test.js && node test/motion.test.js && node test/audio-marca.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/pareamento.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/icone.test.js && node test/exportar.test.js && node test/ate-o-fim.test.js && node test/motion.test.js && node test/audio-marca.test.js && node test/diretor.test.js && node test/camera.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/studio/arquivos/corte-teste-de-camera-fb823.json

@@ -0,0 +1,57 @@
+{
+  "id": "corte-teste-de-camera-fb823",
+  "ferramenta": "corte",
+  "titulo": "Teste de câmera",
+  "doc": {
+    "tema": "meia-noite",
+    "largura": 1920,
+    "altura": 1080,
+    "acabamento": "grao",
+    "cenas": [
+      {
+        "layout": "capa",
+        "duracao": 4,
+        "fundo": "aurora",
+        "transicao": "fade",
+        "camera": "empurrar",
+        "elementos": [
+          {
+            "tipo": "texto",
+            "papel": "chapeu",
+            "texto": "Câmera",
+            "paralaxe": 1.3
+          },
+          {
+            "tipo": "texto",
+            "papel": "titulo",
+            "texto": "O quadro se move"
+          },
+          {
+            "tipo": "texto",
+            "papel": "apoio",
+            "texto": "e as camadas andam em velocidades diferentes.",
+            "paralaxe": 0.5
+          }
+        ]
+      },
+      {
+        "layout": "numeros",
+        "duracao": 3.5,
+        "fundo": "malha",
+        "transicao": "zoom",
+        "camera": "aproximar",
+        "elementos": [
+          {
+            "tipo": "numeros",
+            "itens": [
+              "+38% | em 12 meses"
+            ],
+            "contar": true,
+            "som": "ding"
+          }
+        ]
+      }
+    ]
+  },
+  "atualizado": "2026-09-11T18:39:36+00:00"
+}

package/studio/ferramentas/corte.md

@@ -796,6 +796,48 @@ Duas chaves já bastam. Quem tem `chaves` ignora `anim` — as duas disputariam
 mesmo movimento, e a chave é mais específica. Use em **um ou dois** elementos
 por vídeo: tudo se mexendo ao mesmo tempo cansa e esconde a mensagem.
 
+## Câmera da cena — o quadro também se move
+
+`chaves` move um elemento. `camera` move o **quadro inteiro**: é o que separa
+motion de slide animado. Na cena:
+
+```json
+{ "layout": "capa", "duracao": 4, "camera": "aproximar" }
+```
+
+Movimentos com nome: `aproximar` · `afastar` · `pan-direita` · `pan-esquerda` ·
+`subir` · `descer` · `empurrar` (zoom com um grau de giro — a mão humana) ·
+`balanco`.
+
+Para um movimento seu, as mesmas chaves dos elementos:
+
+```json
+"camera": { "chaves": [ { "t": 0, "escala": 1.15, "x": -40 },
+                        { "t": 1, "escala": 1, "x": 0 } ], "suavizar": "saida" }
+```
+
+O **fundo não anda junto** — é assim de propósito: o quadro passa sobre o
+fundo, e é daí que vem a sensação de profundidade sem custo nenhum.
+
+### Paralaxe — as camadas andam em velocidades diferentes
+
+No elemento, `paralaxe` diz o quanto ele acompanha a câmera: `1` é o padrão
+(anda com o quadro), acima de 1 vem à frente e anda **mais**, abaixo de 1 fica
+ao fundo e anda **menos**.
+
+```json
+{ "tipo": "imagem", "src": "/midia/cidade.jpg", "paralaxe": 0.4 }
+{ "tipo": "texto", "papel": "titulo", "texto": "São Paulo", "paralaxe": 1.25 }
+```
+
+Duas ou três camadas bastam: fundo em 0,3–0,5, conteúdo em 1, o que está na
+frente em 1,2–1,4. Um elemento que já tem `chaves` próprias e está no fluxo
+ignora a paralaxe — a animação dele é mais específica, e embrulhar mudaria o
+espaçamento da cena.
+
+**Um movimento de câmera por cena, e não em todas.** Câmera em tudo embrulha o
+olho; o que dá ritmo é alternar cena parada e cena com movimento.
+
 ## Acabamento
 
 Textura por cima da cena inteira — é o que tira a cara de template:

package/studio/studio.log

@@ -1,28 +1,57 @@
-[studio] 2026-09-09T12:28:40+00:00 — iniciando na porta 7797
+[studio] 2026-09-11T18:38:32+00:00 — iniciando na porta 7777
 
   ██  PrimoCode Studio
   ────────────────────────────────────────────────────────
-  Estúdio          http://localhost:7797
-  Manual da IA     http://localhost:7797/api/manual
+  Estúdio          http://localhost:7777
+  Manual da IA     http://localhost:7777/api/manual
   Ferramentas      Prisma, Tela, Prosa, Grade, Corte, Traço
   ────────────────────────────────────────────────────────
   Ctrl+C para parar
 
+  GET /api/ferramentas
+  GET /api/ferramentas
+  GET /api/arquivos
+  GET /api/ferramentas
+  GET /api/arquivos
+  GET /api/ferramentas
   GET /api/arquivos
   POST /api/arquivos
-  GET /api/arquivos/tela-motion-3ecaa
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
   GET /api/voz/status
-[studio] 2026-09-09T12:31:01+00:00 — iniciando na porta 7797
+[studio] 2026-09-11T18:40:34+00:00 — iniciando na porta 7777
 
   ██  PrimoCode Studio
   ────────────────────────────────────────────────────────
-  Estúdio          http://localhost:7797
-  Manual da IA     http://localhost:7797/api/manual
+  Estúdio          http://localhost:7777
+  Manual da IA     http://localhost:7777/api/manual
   Ferramentas      Prisma, Tela, Prosa, Grade, Corte, Traço
   ────────────────────────────────────────────────────────
   Ctrl+C para parar
 
-  GET /api/arquivos
-  POST /api/arquivos
-  GET /api/arquivos/tela-motion-d6150
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
   GET /api/voz/status
+  GET /api/ferramentas
+  GET /api/versao
+  POST /api/sair

package/studio/web/core.css

@@ -987,3 +987,181 @@ body {
   font: 400 11.5px/1.2 var(--sans);
   color: var(--fraco);
 }
+
+/* ==========================================================================
+   REDESENHO DA CAPA — o estúdio se apresentando
+   --------------------------------------------------------------------------
+   O que estava aqui era uma página de lista: título, cartões, lista de
+   arquivos. Funcionava e não dizia nada — quem abria pela primeira vez não
+   descobria que o vídeo sai com narração, câmera e keyframes, nem que dá para
+   pedir tudo por texto ao agente.
+
+   Este bloco vem DEPOIS do núcleo de propósito: ele acrescenta a capa, os
+   poderes e o acabamento dos cartões sem reescrever a primitiva (.btn, .campo,
+   .topo) que o editor usa — mudar aquilo mexeria em cinco telas de uma vez.
+   ========================================================================== */
+
+.home { max-width: 1140px; padding-top: 34px; }
+
+.busca-topo { width: 220px; background: var(--sup2); }
+.busca-topo::placeholder { color: var(--fraco2); }
+@media (max-width: 720px) { .busca-topo { display: none; } }
+
+/* ------------------------------------------------------------------ capa -- */
+
+.capa {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
+  gap: 30px;
+  align-items: center;
+  padding: 46px 40px;
+  margin-bottom: 54px;
+  border: 1px solid var(--linha);
+  border-radius: 22px;
+  background: linear-gradient(180deg, var(--sup) 0%, #101014 100%);
+  overflow: hidden;
+}
+/* A luz é a única coisa que se move na capa, e devagar: movimento na página
+   inteira briga com o vídeo que a pessoa veio fazer. */
+.capa-luz {
+  position: absolute;
+  inset: -40% -10% auto -20%;
+  height: 520px;
+  background:
+    radial-gradient(420px 240px at 20% 40%, rgba(255, 90, 54, .22), transparent 70%),
+    radial-gradient(360px 220px at 70% 30%, rgba(139, 92, 246, .18), transparent 72%);
+  filter: blur(6px);
+  animation: capaLuz 18s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+@keyframes capaLuz { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(6%, 3%, 0); } }
+
+.capa-texto { position: relative; z-index: 1; }
+.capa h1 {
+  font-size: 40px;
+  line-height: 1.12;
+  font-weight: 680;
+  letter-spacing: -.04em;
+  margin: 14px 0 12px;
+}
+.capa h1 .grad {
+  background: linear-gradient(92deg, var(--primo), #ff9f7a 55%, #8b5cf6);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.capa p { color: var(--fraco); font-size: 14.5px; line-height: 1.7; margin: 0 0 22px; max-width: 560px; }
+.capa-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
+.btn.grande { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 12px; }
+
+.selo-vivo { color: var(--fraco); }
+.selo-vivo i {
+  width: 7px; height: 7px; border-radius: 999px; background: #4ade80;
+  box-shadow: 0 0 0 3px rgba(74, 222, 128, .16);
+  animation: pulso 2.4s ease-in-out infinite;
+}
+@keyframes pulso { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
+
+/* A arte da direita é o produto em miniatura: três quadros de cena, com a
+   mesma linguagem do render. Nada de screenshot — captura envelhece e mente. */
+.capa-arte { position: relative; height: 250px; }
+.capa-arte .quadro {
+  position: absolute;
+  border: 1px solid var(--linha2);
+  border-radius: 14px;
+  background: linear-gradient(160deg, #16161d, #0c0c11);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
+  animation: flutua 9s ease-in-out infinite alternate;
+}
+.capa-arte .q1 {
+  left: 0; top: 16px; width: 62%; height: 132px; padding: 16px;
+  display: flex; flex-direction: column; gap: 9px; justify-content: center;
+}
+.capa-arte .q1 span { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .16); }
+.capa-arte .q1 span:first-child { width: 42%; background: var(--primo); height: 11px; }
+.capa-arte .q1 span:last-child { width: 68%; }
+.capa-arte .q2 {
+  right: 6px; top: 0; width: 42%; height: 104px;
+  display: grid; place-content: center; text-align: center;
+  animation-delay: -3s;
+}
+.capa-arte .q2 b { font-size: 26px; font-weight: 680; letter-spacing: -.03em; display: block; }
+.capa-arte .q2 i { font-size: 11px; color: var(--fraco2); font-style: normal; }
+.capa-arte .q3 {
+  right: 22px; bottom: 4px; width: 54%; height: 96px; padding: 14px;
+  display: flex; align-items: flex-end; gap: 8px;
+  animation-delay: -6s;
+}
+.capa-arte .q3 u { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--primo), rgba(255, 90, 54, .25)); }
+.capa-arte .q3 u:nth-child(1) { height: 38%; }
+.capa-arte .q3 u:nth-child(2) { height: 72%; }
+.capa-arte .q3 u:nth-child(3) { height: 54%; }
+@keyframes flutua { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
+
+@media (max-width: 880px) {
+  .capa { grid-template-columns: 1fr; padding: 34px 24px; }
+  .capa-arte { display: none; }
+  .capa h1 { font-size: 31px; }
+}
+
+/* ------------------------------------------------------- cartões e listas -- */
+
+/* Seis ferramentas em três colunas fecham duas fileiras cheias; em quatro
+   colunas sobra uma fileira pela metade, e a página parece interrompida. */
+.grade-ferr {
+  gap: 16px;
+  margin-bottom: 52px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+.cartao-ferr { padding: 22px; background: linear-gradient(180deg, var(--sup), #101015); }
+.cartao-ferr .brilho {
+  position: absolute; inset: -1px -1px auto -1px; height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cor, var(--primo)), transparent);
+  opacity: 0; transition: opacity .18s;
+}
+.cartao-ferr:hover .brilho, .cartao-ferr:focus-visible .brilho { opacity: .9; }
+.cartao-ferr:focus-visible { outline: 2px solid var(--cor, var(--primo)); outline-offset: 2px; }
+.cartao-ferr .icone {
+  width: 38px; height: 38px; border-radius: 11px;
+  background: color-mix(in srgb, var(--cor, var(--primo)) 16%, transparent);
+  color: var(--cor, var(--primo));
+  border: 1px solid color-mix(in srgb, var(--cor, var(--primo)) 28%, transparent);
+}
+.cartao-ferr .icone svg { width: 19px; height: 19px; }
+.cartao-ferr:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
+
+.item-arq { border-radius: 12px; }
+.item-arq .tag {
+  background: color-mix(in srgb, var(--cor, var(--primo)) 16%, transparent);
+  color: var(--cor, var(--primo));
+}
+.item-arq:hover { transform: translateX(2px); }
+
+/* ------------------------------------------------------------- poderes --- */
+
+.poderes { margin-bottom: 50px; }
+.grade-poder {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+  gap: 12px;
+}
+.grade-poder article {
+  border: 1px solid var(--linha);
+  border-radius: var(--r2);
+  background: var(--sup);
+  padding: 16px 18px;
+}
+.grade-poder b { font-size: 13.5px; font-weight: 620; display: block; margin-bottom: 5px; }
+.grade-poder p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--fraco); }
+
+.copiado { font-size: 12px; color: #4ade80; opacity: 0; transition: opacity .2s; }
+.copiado.on { opacity: 1; }
+
+/* Quem pediu menos movimento recebe menos movimento — a capa continua
+   inteira, só para de respirar. */
+@media (prefers-reduced-motion: reduce) {
+  .capa-luz, .capa-arte .quadro, .selo-vivo i { animation: none; }
+  .cartao-ferr:hover, .item-arq:hover { transform: none; }
+}

package/studio/web/home.html

@@ -5,6 +5,7 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>PrimoCode Studio</title>
 <link rel="stylesheet" href="/core.css">
+<link rel="stylesheet" href="/fontes.css">
 </head>
 <body>
 
@@ -27,22 +28,48 @@
 <header class="topo">
   <a class="marca" href="/"><span class="cubo">P</span>PrimoCode <em>Studio</em></a>
   <div class="cresce"></div>
+  <input class="campo busca-topo" id="busca" placeholder="Buscar no estúdio    /" autocomplete="off">
   <button class="btn vazio" id="btn-manual">Manual da IA</button>
   <a class="btn vazio" href="/api/manual" target="_blank">API</a>
 </header>
 
 <div class="home">
 
-  <section class="hero">
-    <h1>O estúdio que a IA opera</h1>
-    <p>Seis ferramentas nativas com um modelo de documento em comum. A IA escreve o
-      documento, o estúdio desenha — apresentação, arte, texto, planilha, vídeo ou diagrama —
-      e você refina à mão no editor. Vídeo sai com narração neural, trilha, efeitos
-      sonoros e download direto em MP4 ou áudio.</p>
+  <section class="capa">
+    <div class="capa-luz" aria-hidden="true"></div>
+    <div class="capa-texto">
+      <span class="pilula selo-vivo"><i></i> o estúdio está no ar em localhost:7777</span>
+      <h1>Seis ferramentas.<br>Um documento só.<br><span class="grad">A IA opera tudo.</span></h1>
+      <p>Apresentação, arte, texto, planilha, vídeo e diagrama nascem do mesmo modelo —
+         a IA escreve o documento, o estúdio desenha, você refina à mão. Vídeo sai com
+         narração neural, trilha, efeito sonoro, câmera e keyframes em 3D, e baixa em MP4.</p>
+      <div class="capa-acoes">
+        <button class="btn primo grande" id="ir-corte">Criar um vídeo</button>
+        <button class="btn grande" id="ir-prisma">Criar uma apresentação</button>
+      </div>
+    </div>
+    <div class="capa-arte" aria-hidden="true">
+      <div class="quadro q1"><span></span><span></span><span></span></div>
+      <div class="quadro q2"><b>+38%</b><i>em 12 meses</i></div>
+      <div class="quadro q3"><u></u><u></u><u></u></div>
+    </div>
   </section>
 
+  <h2 class="secao-tit" id="tit-ferramentas">As ferramentas</h2>
   <section class="grade-ferr" id="ferramentas"></section>
 
+  <section class="poderes">
+    <h2 class="secao-tit">O que a IA consegue fazer aqui</h2>
+    <div class="grade-poder">
+      <article><b>Diretor antes da produção</b><p>Roteiro, narração falada, voz, câmera e a mídia a buscar — decidido antes de a primeira cena existir.</p></article>
+      <article><b>Câmera e paralaxe</b><p>O quadro se aproxima, atravessa e balança; as camadas andam em velocidades diferentes.</p></article>
+      <article><b>Keyframes em 3D</b><p>Giro em profundidade, curvas com nome (elástico, salto) e som no instante em que o elemento entra.</p></article>
+      <article><b>Mídia da internet</b><p>Foto, logo em SVG da marca e música com licença aberta — com o crédito guardado junto do arquivo.</p></article>
+      <article><b>Narração neural</b><p>Voz sintetizada em pt-BR, sincronia automática com a cena e a trilha abaixando sozinha enquanto a voz fala.</p></article>
+      <article><b>MP4 sem clique</b><p>Exporta o arquivo direto, ou vira projeto Remotion quando o vídeo é longo ou precisa de canal alfa.</p></article>
+    </div>
+  </section>
+
   <section class="faixa-ia">
     <h2>Como pedir</h2>
     <p>Fale com seu agente em português normal. Ele lê o manual, escolhe a ferramenta e devolve o link.</p>
@@ -51,7 +78,7 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
     <div class="acoes">
       <button class="btn primo" id="copiar">Copiar</button>
       <a class="btn" href="/api/manual" target="_blank">Ler o manual</a>
-      <span id="copiado" style="font-size:12px;color:#4ade80;opacity:0;transition:opacity .2s">copiado</span>
+      <span id="copiado" class="copiado">copiado</span>
     </div>
   </section>
 
@@ -70,15 +97,16 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
 (function () {
   var $ = function (s) { return document.querySelector(s); };
   var FERRS = [];
+  var ARQUIVOS = [];
 
   function fugir(s) { return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;"); }
 
   fetch("/api/ferramentas").then(function (r) { return r.json(); }).then(function (lista) {
     FERRS = lista;
     $("#ferramentas").innerHTML = lista.map(function (f) {
-      return '<div class="cartao-ferr" data-slug="' + f.slug + '">' +
-        '<div class="icone" style="background:' + f.cor + '22;color:' + f.cor + '">' +
-        svgIcone(iconeDe(f.slug)) + "</div>" +
+      return '<div class="cartao-ferr" data-slug="' + f.slug + '" style="--cor:' + f.cor + '" tabindex="0" role="button">' +
+        '<div class="brilho" aria-hidden="true"></div>' +
+        '<div class="icone">' + svgIcone(iconeDe(f.slug)) + "</div>" +
         "<b>" + fugir(f.nome) + "</b>" +
         '<div class="papel">' + fugir(f.papel) + "</div>" +
         "<p>" + fugir(f.resumo) + "</p>" +
@@ -87,6 +115,11 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
 
     Array.prototype.forEach.call(document.querySelectorAll(".cartao-ferr"), function (c) {
       c.onclick = function () { criar(c.dataset.slug); };
+      // Teclado abre igual ao mouse: o cartão é um botão, e um botão que só
+      // responde a clique deixa de fora quem navega por Tab.
+      c.onkeydown = function (ev) {
+        if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); criar(c.dataset.slug); }
+      };
     });
     carregarArquivos();
   });
@@ -110,28 +143,59 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
     });
   }
 
+  $("#ir-corte").onclick = function () { criar("corte"); };
+  $("#ir-prisma").onclick = function () { criar("prisma"); };
+
   function carregarArquivos() {
     fetch("/api/arquivos").then(function (r) { return r.json(); }).then(function (lista) {
-      if (!lista.length) { $("#vazio").style.display = "block"; return; }
-      $("#arquivos").innerHTML = lista.map(function (a) {
-        var cor = corDe(a.ferramenta);
-        var quando = a.atualizado ? a.atualizado.slice(0, 10).split("-").reverse().join("/") : "";
-        return '<div class="item-arq">' +
-          '<div class="tag" style="background:' + cor + '22;color:' + cor + '">' + svgIcone(iconeDe(a.ferramenta)) + "</div>" +
-          '<div class="cresce"><b>' + fugir(a.titulo) + "</b>" +
-          '<div class="meta">' + fugir(a.ferramenta) + " · " + a.pecas +
-          (a.pecas === 1 ? " peça · " : " peças · ") + quando + "</div></div>" +
-          '<a class="btn" href="/t/' + a.ferramenta + "/" + a.id + '">Editar</a>' +
-          '<a class="btn primo" href="/v/' + a.id + '" target="_blank">Abrir</a></div>';
-      }).join("");
+      ARQUIVOS = lista;
+      desenharArquivos(lista);
     });
   }
 
+  function desenharArquivos(lista) {
+    if (!lista.length) {
+      $("#arquivos").innerHTML = "";
+      $("#vazio").style.display = "block";
+      return;
+    }
+    $("#vazio").style.display = "none";
+    $("#arquivos").innerHTML = lista.map(function (a) {
+      var cor = corDe(a.ferramenta);
+      var quando = a.atualizado ? a.atualizado.slice(0, 10).split("-").reverse().join("/") : "";
+      return '<div class="item-arq" style="--cor:' + cor + '">' +
+        '<div class="tag">' + svgIcone(iconeDe(a.ferramenta)) + "</div>" +
+        '<div class="cresce"><b>' + fugir(a.titulo) + "</b>" +
+        '<div class="meta">' + fugir(a.ferramenta) + " · " + a.pecas +
+        (a.pecas === 1 ? " peça · " : " peças · ") + quando + "</div></div>" +
+        '<a class="btn" href="/t/' + a.ferramenta + "/" + a.id + '">Editar</a>' +
+        '<a class="btn primo" href="/v/' + a.id + '" target="_blank">Abrir</a></div>';
+    }).join("");
+  }
+
+  /* A BUSCA filtra o que já está na tela — ferramentas e arquivos.
+     Sem ida ao servidor: a lista inteira já veio, e um fetch por tecla
+     digitada seria trabalho para devolver o que está na memória. */
+  var busca = $("#busca");
+  busca.oninput = function () {
+    var q = busca.value.trim().toLowerCase();
+    Array.prototype.forEach.call(document.querySelectorAll(".cartao-ferr"), function (c) {
+      c.style.display = !q || c.textContent.toLowerCase().indexOf(q) >= 0 ? "" : "none";
+    });
+    desenharArquivos(!q ? ARQUIVOS : ARQUIVOS.filter(function (a) {
+      return (a.titulo + " " + a.ferramenta).toLowerCase().indexOf(q) >= 0;
+    }));
+  };
+  document.addEventListener("keydown", function (ev) {
+    if (ev.key === "/" && document.activeElement !== busca) { ev.preventDefault(); busca.focus(); }
+    if (ev.key === "Escape" && document.activeElement === busca) { busca.value = ""; busca.oninput(); busca.blur(); }
+  });
+
   $("#copiar").onclick = function () {
     navigator.clipboard.writeText($("#frase").textContent).then(function () {
       var c = $("#copiado");
-      c.style.opacity = 1;
-      setTimeout(function () { c.style.opacity = 0; }, 1500);
+      c.classList.add("on");
+      setTimeout(function () { c.classList.remove("on"); }, 1500);
     });
   };
 
@@ -144,6 +208,9 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
     }
   };
   folha.onclick = function (e) { if (e.target === folha) folha.classList.remove("on"); };
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") folha.classList.remove("on");
+  });
 })();
 </script>
 </body>

package/studio/web/js/editor.js

@@ -24,6 +24,12 @@
      Os valores NÃO mudam — são os mesmos que o render.css entende. O que
      muda é só o que a pessoa lê. */
   var OPC = {
+    // A câmera da cena: o quadro que se move. Os valores são os mesmos que o
+    // render.js conhece (CAMERAS); aqui vão só os nomes que se leem.
+    camera: [["", "Parada"], ["aproximar", "Aproximar"], ["afastar", "Afastar"],
+      ["pan-direita", "Atravessar para a direita"], ["pan-esquerda", "Atravessar para a esquerda"],
+      ["subir", "Subir"], ["descer", "Descer"], ["empurrar", "Empurrão (zoom com giro)"],
+      ["balanco", "Balanço"]],
     transicao: [["", "Nenhuma (corte seco)"], ["fade", "Suave"], ["deslizar", "Deslizar para o lado"],
       ["subir", "Subir"], ["zoom", "Aproximar"], ["limpar", "Varrer"],
       ["persiana", "Persiana"], ["flash", "Flash"]],
@@ -1221,6 +1227,12 @@
         g0.appendChild(linha("Duração (s)", inp(c.duracao || 4, function (v) { mudar(function () { c.duracao = v || 4; }); }, "number")));
         g0.appendChild(linha("Como entra", menu(OPC.transicao, c.transicao || "",
           function (v) { mudar(function () { if (v) c.transicao = v; else delete c.transicao; }); })));
+        /* A câmera só aparece onde há tempo (vídeo): num slide parado ela
+           não teria o que animar, e uma caixa que não faz nada é pior que
+           caixa nenhuma. Guardada como string — é o formato que a spec
+           documenta e o que o render.js aceita direto. */
+        g0.appendChild(linha("Câmera", menu(OPC.camera, typeof c.camera === "string" ? c.camera : "",
+          function (v) { mudar(function () { if (v) c.camera = v; else delete c.camera; }); })));
       }
       if (SLUG === "traco") {
         g0.appendChild(linha("Arranjo", selecao(["", "horizontal", "vertical"], c.auto || "",
@@ -1292,6 +1304,11 @@
       gp.appendChild(linha("Opacidade", inp(e.opacidade != null ? e.opacidade : 1, function (v) { edita("opacidade", v); }, "number")));
       gp.appendChild(linha("Como entra", menu(OPC.animacao, e.anim || "",
         function (v) { edita("anim", v); })));
+      /* Profundidade: o quanto este elemento acompanha a câmera. 1 anda com o
+         quadro, acima vem à frente, abaixo fica ao fundo. Sem câmera na cena
+         não faz nada — e é por isso que mora aqui embaixo, e não em destaque. */
+      gp.appendChild(linha("Profundidade", inp(e.paralaxe != null ? e.paralaxe : 1,
+        function (v) { edita("paralaxe", v === 1 || v === "" ? "" : v); }, "number")));
       if (e.tipo === "numeros") {
         gp.appendChild(linha("Contar", selecao(["não", "sim"], e.contar ? "sim" : "não",
           function (v) { edita("contar", v === "sim" ? true : ""); })));