mira-studio-full

# Skill: Mira Studio Full (16:9 com câmera embutida, gravação nativa) ## Ordem zero — não negociável A primeira ação é resolver `deck_id = YYYY-MM-DD <slug>` com a data atual e criar, de uma vez, a pasta do deck e toda a árvore interna: `references/`, `assets/`, `assets/vendor/` e `mira/`. Nenhuma dessas pastas fica para depois. Isso acontece antes de mensagem intermediária, pergunta, leitura do deck de referência, coleta de roteiro, escolha de layout ou geração. Cria decks horizontais 16:9 full-hd para gravação de videoaula em que o apresentador aparece AO VIVO dentro do próprio slide. Cada slide declara um layout no `roteiro.md`: - **`camera`** — a webcam preenche o quadro inteiro (você falando). - **`thirds`** — título + animação declarativa nos 2/3 da esquerda e a câmera ao vivo no 1/3 direito (separados por uma linha sutil). - **`full`** — título + animação no quadro inteiro, sem câmera (a fala fica em off, lida no teleprompter). > **Fonte da verdade:** o padrão desta skill está congelado no deck de referência. Resolva o arquivo nesta ordem: > 1. `mira-templates/decks/mira-studio-full-demo/index-16x9.html` (projeto com Mira instalado) > 2. `templates/decks/mira-studio-full-demo/index-16x9.html` (repositório fonte do Mira) > 3. `node_modules/mira-animator/templates/decks/mira-studio-full-demo/index-16x9.html` > > Se nenhum existir, peça para rodar `npx mira-animator update`. Em dúvida sobre um valor exato, o resultado deve bater com o deck de referência. ## O resultado, em uma frase Um quadro 16:9 cravado à janela (letterbox `#000000` quando a tela não é 16:9) chamado `index-16x9.html`, onde cada `body > section` declara `data-layout="camera|thirds|full"`, os slides NASCEM do `roteiro.md` (layout, título e animação `linha:`/`orbita:` por cabeçalho; texto da fala sincronizando ao vivo), a webcam entra ao vivo pelas `.cam-area` (`mira/mira-camera.js`), o teleprompter em overlay fica FORA do vídeo via Element Capture, e a tecla **R** grava um MP4 1920x1080 direto no disco pelo `mira/mira-record-16x9.js`, sem OBS. ## Diferenças para o /mira-studio (não confunda) | | `/mira-studio` | `/mira-studio-full` | |---|---|---| | Formato | 9:16 vertical (coluna) | 16:9 horizontal (quadro cobre a janela) | | Arquivo | `index.html` | `index-16x9.html` | | Layouts | `capa`, `camera`, `split`, `full` | `camera`, `thirds`, `full` | | Animações | autorais (escritas à mão por slide) | declarativas no roteiro (`linha:` / `orbita:`), autoral opcional | | Gravador | `mira-record.js` (1080x1920) | `mira-record-16x9.js` (1920x1080) | | Painel de gravação | na margem, fora da coluna | SOBRE o slide (some do vídeo via Element Capture) | | Launcher | `mira-studio-windows.bat` | `mira-studio-16x9-windows.bat` / `-apple.command` | Pedido de vertical/Reels/Shorts dentro desta skill: aponte para `/mira-studio`. ## Dimensão (o bloco de formato canônico) O quadro é 16:9 cravado e generalista para a tela: `--fmt-w: min(100vw, calc(100vh * 16 / 9))` e `--fmt-h: min(100vh, calc(100vw * 9 / 16))`. Em tela cheia num display 1080p fecha exatos 1920x1080; em janela menor encolhe mantendo a proporção. Regras que acompanham (todas no deck de referência): - `body > section` com `margin: calc((100vh - var(--fmt-h)) / 2) 0` e `scroll-margin-top` igual: a sobra vertical vira faixa `#000` acima e abaixo, nunca o slide seguinte. - `html` com `scroll-snap-type: y proximity`, `scrollbar-width: none` e `overflow-x: hidden`: a barra de rolagem roubava largura e criava scroll horizontal em F11. Navegação por teclado ou roda do mouse. - `body > section { isolation: isolate }` é PRÉ-REQUISITO do Element Capture: sem stacking context o Chrome aceita o `restrictTo` e não emite frame nenhum (o MP4 sai vazio). - `thirds`: `.thirds-main` com `width: 66.667%`, `padding: 50px` (área segura onde título e animação vivem), `h2` centrado no topo; `.cam-area` com `width: 33.333%` e `border-left: 1px solid var(--line)`. - `full`: `.full-main` ocupando o quadro inteiro (`padding: 50px`, mesma área segura), `h2` centrado no topo, SEM `.cam-area` (o builder não a cria neste layout). - Tema mira-dark embutido nas variáveis `--mira-*` (deck self-contained); destaque `#FF904D`. - Primeiro slide com `h1/h2`: `text-wrap: balance` (diretiva do título da capa). ## Roteiro externo `roteiro.md` (os slides nascem dele) Todo deck gerado leva um **`roteiro.md` na raiz**: é dele que saem os slides E as animações. O usuário escreve no editor que quiser e vê o resultado no deck aberto. **Gramática (uma linha por cabeçalho):** ``` ## Slide N | layout | Título | animação ``` - `layout` (obrigatório): `camera`, `thirds` ou `full`, comparado em minúsculas. Valor desconhecido cai em `camera`. - `Título` (thirds/full): `*entre asteriscos*` vira `<span class="accent">`, montado por fragmento (**nunca `innerHTML`**). - `animação` (thirds/full): **`linha: A, B, C, D`** (etapas em diagonal, orbe percorrendo e acendendo cada nó com pulso) ou **`orbita: A, B, C @ NÚCLEO`** (satélites girando em elipse em torno do núcleo). Sem o campo ou valor inválido, cai em `linha` padrão. - O número do cabeçalho é **rótulo, não índice**, e continua sendo. - **Quem casa bloco com slide é a identidade, não a ordem.** Cada bloco leva `<!-- mira-slide-id: X -->` na linha abaixo do cabeçalho e a `<section>` correspondente leva `data-mira-slide-id="X"`. Reordenar os blocos no editor ou os slides no modo E dá o mesmo resultado: o slide anda inteiro, com palco, título e fala. Faltando id de um dos lados, cai no casamento por ordem de aparição de antes (deck antigo não precisa de migração). Detalhes em `_reversa_sdd/addenda/roteiro-identidade-de-slide-v001.md`. - O `mira-slide-id` é **metadado, não fala**: fica fora do teleprompter e do overlay lido em câmera. - O texto abaixo do cabeçalho é a fala do slide (teleprompter e overlay). **O que sincroniza e o que não:** | Dado | Fonte da verdade | Quando vale | |------|------------------|-------------| | Layout, título, animação | `roteiro.md` | lido uma vez, no **load** (mudou, recarregue) | | Texto da fala | `roteiro.md` | **ao vivo**, nos dois sentidos | | Posição/tamanho/fonte do overlay + textos | bloco `#mira-studio-state` no `index-16x9.html` | Ctrl+S | | Cópia de trabalho | `localStorage` | entre polls | - Builder **síncrono antes** das animações e dos `<script defer>` (os módulos leem as `<section>` logo em seguida): busca o `.md`, guarda texto bruto, intro e cabeçalhos, remonta as seções antes do painel do teleprompter. As `<section>` estáticas do HTML ficam como fallback: em `file://` ou sem o arquivo, elas SÃO o deck. - Sincronização: poll de leitura a cada **1,5 s**, escrita com debounce de **800 ms**. Guards obrigatórios: escrita em voo trava o poll; gravação em andamento trava o poll; campo com foco não é sobrescrito; conteúdo idêntico aborta. - A escrita de volta remonta o arquivo com a intro e os cabeçalhos capturados no load, mais os textos atuais. Cabeçalho nunca é reescrito a partir do estado do deck. Arquivo ausente (404) é recriado uma vez. - **Estado no arquivo:** diferente do 9:16, aqui o `#mira-studio-state` guarda **texto (`mira-tp-text`) E layout do overlay (`mira-tp-ov-pos`)**. O seed no load é **guardado por hash**: só sobrescreve o `localStorage` quando o bloco MUDOU desde o último seed, então ajustes locais ainda não salvos sobrevivem a um recarregar, e um arquivo atualizado sempre vence. ## As animações declarativas (animLinha e animOrbita) Os dois geradores estão no deck de referência; copie-os como estão. Regras que carregam: - **Regra Zero:** entrada coreografada (haste se desenha e nós pipocam; núcleo cresce e satélites acendem) e DEPOIS o loop perpétuo via `d3.timer`, com generation counter (`window.__animGen[svgId]`): cada rebuild mata o timer anterior no próximo tick. - **Fora da tela o loop morre:** `IntersectionObserver` (threshold 0.35) reconstrói ao entrar e invalida a geração ao sair. Trocar de slide não acumula timers. - `casarPalco` (viewBox casado ao box real do palco) + `fitOnce` sobre a parte ESTÁTICA, uma vez (reenquadrar a cada frame faz o palco reescalar junto com o que se move). - Todo callback de `d3.timer` dentro de `try/catch`: uma exceção congela a fila inteira de timers do d3. - Texto SVG: `font-size >= 24` para `W = 960`; cor da marca `#FF904D` via variáveis do tema; sem arco-íris. - Animação AUTORAL além das duas: permitida, presa ao palco `svg#sv-slide-N` (N = posição do slide no arquivo), seguindo as mesmas regras e o padrão criativo do `agents/mira-animator/SKILL.md`: metáfora primeiro, animação depois (método A/B antes de codar), refinamento sob demanda por slide, e espaço vazio preenchido com cenário ambiente da própria metáfora (parado ou em deriva lenta, nunca focal). As declarativas `linha`/`orbita` continuam como estão, mas devem preencher o palco. Palco sem animação fica vazio em vez de quebrar. ## Teleprompter que não entra no vídeo Duas peças, mais o estado no arquivo. Blocos canônicos no deck de referência. - **Painel lateral (`#mira-prompter`, tecla T):** o editor. Quatro chaves (T painel, O overlay, G Element Capture, E mover/redimensionar), slider de tamanho do texto do overlay por slide (padrão do deck: **34px**, caixa **621x454**), o texto do slide (`#mp-body`, `contenteditable`) e o botão "Salvar no arquivo". **Some durante a gravação** (`html[data-mira-recording] #mira-prompter { display: none }`). - **Overlay central (`#tp-ov-wrap`/`#tp-ov`, tecla O):** o retângulo que o apresentador lê (fundo preto 60%, texto branco 60%), **irmão das `<section>`, nunca filho**: é isso que o exclui do vídeo no Element Capture. - **Rolagem automática (teleprompter de verdade):** tecla **L** liga/pausa a rolagem do overlay (P é da caneta), **+ / -** ajustam a velocidade (10 a 200 px/s, persistida). Na troca de slide o texto volta ao topo e espera ~1 s antes de rolar. O degradê `.tp-ov-more` indica texto abaixo do corte; um toast discreto (`#tp-toast`) confirma liga/pausa e velocidade. - **Modo E no overlay:** arrastar move; alça da borda direita muda largura, da borda de baixo muda altura, grip do canto muda as duas. Tudo por slide, persistido em `mira-tp-ov-pos`. - **Element Capture (tecla G, LIGADO por padrão):** o deck declara `window.__miraElemCapture = true`; a gravação restringe a captura à subárvore da seção visível (`RestrictionTarget.fromElement` + `track.restrictTo`), então overlay, painel do teleprompter e painel de gravação **não são pintados no vídeo**, mesmo sobrepostos. - **Cheat-sheet (tecla ?):** grade com todos os atalhos, fora do vídeo, Esc ou clique fecha. - **Salvar (botão ou Ctrl+S):** grava textos e layout do overlay no bloco `<script id="mira-studio-state" type="application/json">` do próprio `index-16x9.html`: em localhost por `POST /__mira_save`, em `file://` pela File System Access API. O arquivo é a fonte da verdade, não o navegador. **Onde cada overlay mora (regra de ouro):** o que deve entrar no vídeo (logo, selo, `.me-ov` com `data-me-chrome` + `data-me-key`) fica **DENTRO** da `<section>`; o que não deve (teleprompter, painéis) fica **FORA**, como filho direto de `body`. ## Desenho por slide (caneta P) A caneta do `mira-draw.js` desenha sobre o slide ATUAL: ao trocar de slide os traços saem junto e voltam quando o slide volta (bloco canônico usando `miraDraw.getShapes/setShapes` por índice de slide). No palco do `mira-remote` o desenho é da shell (modelo global sincronizado): o bloco detecta `window.__MIRA_REMOTE_STAGE__` e não interfere. ## O módulo mira/mira-record-16x9.js (gravação nativa 1920x1080) Fonte canônica em `templates/authoring/mira-record-16x9.js`; copie para `mira/` do deck. O que muda em relação ao gravador 9:16: - **Painel SOBRE o slide:** no 16:9 o quadro cobre a janela, então o painel de gravação flutua sobre o slide (arrastável). Gravando **com** Element Capture ele continua visível para você e fora do MP4; gravando **sem** (Region Capture), ele é ocultado via CSS durante a gravação e a tecla R segue funcionando. - **Contagem regressiva 3-2-1** antes de iniciar (fora do vídeo: aparece antes do pipeline). - **Saída H.264 `avc1` com resolução constante por sessão:** **1920x1080** em Alta (padrão de videoaula) ou a resolução **16:9 nativa da janela** em Desempenho (menos pixels a codificar, a alavanca real para máquina fraca). Bitrate 12 Mbps escalado proporcionalmente; keyframe a cada 2 s. - **Pipeline em Worker** idêntico ao padrão comprovado do 9:16: `MediaStreamTrackProcessor` puxa `VideoFrame`s da track restringida/recortada, o `readable` é transferido ao Worker (Blob URL, sem arquivo extra), `VideoEncoder` com backpressure (`encodeQueueSize>=2` descarta não-chave), áudio AAC no mesmo Worker, mux `mp4-muxer` com `firstTimestampBehavior: 'offset'` (por trilha — **nunca** `cross-track-offset`). O main thread só renderiza a página. - **CFR (edição) — o MP4 entra no Premiere sem drift de áudio:** chave no painel, **ligada por padrão**, idêntica à do 9:16. O Worker põe cada frame num slot da grade de 1/FPS antes do encoder e preenche slot vazio com o quadro anterior (teto de 2 s). Sem isso a trilha sai VFR: VLC e Chrome tocam certo (honram PTS), mas o Premiere conforma VFR numa grade fixa e a boca desencontra da voz de forma PROGRESSIVA. Painel mostra `N dup` / `N salto`; o JSON traz `timing: {mode, dupFilled, dupDropped, gapJumped}`. Desligada, volta ao VFR de antes. **A grade CFR trata a deriva PROGRESSIVA e só ela.** O deslocamento CONSTANTE entre as trilhas é outro defeito (BUG-20260815-HYRG, corrigido em 2026-08-16): o vídeo chega ao muxer já rebaseado em zero pela grade e o áudio no relógio nativo, então `firstTimestampBehavior: 'offset'` zerava cada trilha na própria origem e jogava fora a distância entre elas. Hoje quem alinha é o gravador, em `mandaAoMux()`, e o desvio medido aparece no painel (`A/V ±N ms`) e no diagnóstico (`av: {firstVideoUs, firstAudioUs, deltaMs}`). Contrato no adendo `_reversa_sdd/addenda/bug-BUG-20260815-HYRG-v001.md`. Trocar a constante do muxer sem esse alinhamento reintroduz o commit `6e84363`. - **Seletores de câmera e microfone no painel**, com medidor de nível (VU) do microfone. A troca de câmera é AO VIVO (`window.__miraCameraUse` do `mira-camera.js`), persiste em `mira-cam-device` e vale para os próximos loads. - **Encoder Auto / Hardware preferido / Software (CPU)** (`hardwareAcceleration` é preferência, não garantia) e as três informações separadas: GPUs instaladas (`/__mira/gpus`, via launcher), renderer ativo (WebGL) e a preferência do encoder. GPUs instaladas nunca viram opções do encoder. - **Gravação direta no disco** (File System Access + `FileSystemWritableFileStreamTarget`, `fastStart: false`): escolhe o arquivo uma vez antes de começar, nada acumula em RAM, sem teto de duração. Preço honesto: o índice `moov` vai para o fim; travamento no meio deixa MP4 sem índice. Fallback in-memory (~2 GB de teto, aviso ~384 MB, para sozinha ~512 MB) quando não há File System Access. - **Métricas reais ao vivo** (fps efetivo, % descartado, fila do encoder, Mbps, MB) e **diagnóstico JSON** por `mira-navigation` (input/crop/output, long task, gap de rAF, gap PTS) com botão de salvar ao final. - **Fallback de compatibilidade:** sem WebCodecs/`MediaStreamTrackProcessor`/`OffscreenCanvas`, cai no `MediaRecorder` sobre canvas fixo 1920x1080. - **Tecla R** grava/para (quieta nos modos E/P e digitação). Ao iniciar, escolha "Esta guia" no seletor do navegador. ## Launcher `mira-studio-16x9-windows.bat` / `-apple.command` + `mira/mira-studio-server.cjs` Fontes canônicas em `templates/studio/`: os launchers vão para a RAIZ do deck e o `mira-studio-server.cjs` para `mira/`. Mesmo ciclo de vida comprovado do Mira Remote: Node em primeiro plano, Chrome aberto pelo servidor somente depois de `listen()`. - Os launchers 16:9 exportam **`MIRA_STUDIO_PAGE=/index-16x9.html`** (página inicial servida) e **`MIRA_STUDIO_FULLSCREEN=1`** (Chrome abre em `--start-fullscreen`: F11 já na abertura, para o quadro fechar 1920x1080 exato).