@agent-native/core 0.76.5 → 0.76.6

package/docs/content/locales/pt-BR/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "Apresentações"
+description: "Gere apresentações a partir de um prompt, edite visualmente e apresente em tela inteira. Um substituto de código aberto para Apresentações Google, Pitch e PowerPoint."
+---
+
+# Apresentações
+
+Gere apresentações completas a partir de um prompt, edite slides visualmente e apresente em tela inteira. Peça ao agente "uma apresentação de 10 slides para um serviço de assinatura de café" e assista-a ser transmitida slide por slide para o editor em segundos. Um substituto de código aberto para Apresentações Google, Pitch e PowerPoint.
+
+```an-wireframe
+{
+  "surface": "desktop",
+  "html": "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Q3 Board Update</h1><span class='wf-pill accent'>Title slide</span><div style='flex:1'></div><button>Preview</button><button>Present</button><button class='primary'>Share</button></div><main style='display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0'><section class='wf-card' style='display:flex;align-items:center;justify-content:center;text-align:center;padding:36px'><div><strong style='font-size:28px'>Q3 Board Update</strong><br/><small>Maya Chen · CEO</small><div style='height:46px'></div><span class='wf-pill'>Product momentum</span></div></section><section style='display:flex;flex-direction:column;gap:10px'><div class='wf-card'><strong>Slide outline</strong><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div></div><div class='wf-card' style='flex:1'><strong>Speaker notes</strong><p class='wf-muted' style='margin:8px 0 0'>Open with launch progress and retention story.</p></div></section></main><div style='display:grid;grid-template-columns:repeat(5,1fr);gap:8px'><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div></div>"
+}
+```
+
+Quando você abre uma apresentação, a tela do slide, o esboço, as notas e a tira de filme permanecem em uma superfície do editor enquanto o agente ainda pode criar, revisar e navegar pelos slides por meio do actions.
+
+```an-diagram title="Prompt to deck" summary="Ask for a deck and the agent streams slides in one at a time through the same actions you could call from the CLI."
+{
+  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">picks layouts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">parallel, streaming</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Editor renders live</div></div>",
+  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+}
+```
+
+## O que você pode fazer com isso
+
+- **Gere apresentações a partir de um prompt.** "Gere uma apresentação de 10 slides para um serviço de assinatura de café, o público são investidores."
+- **Edite slides visualmente** — clique duas vezes no texto para editar, clique em um bloco para o menu de bolha, use `/` para o menu de barra para inserir blocos.
+- **Gere imagens com IA.** Imagens principais, modelos de produtos, ilustrações, de preferência delegadas ao Assets, com geração de imagens gerenciadas por Builder prontas para permitir chaves de provedor diretas e uma vez implantadas como substituto de hoje.
+- **Pesquise fotos e logotipos de empresas.** "Encontre o logotipo de stripe.com e adicione-o ao slide 2."
+- **Apresentação em tela cheia** com navegação pelo teclado, controles de ocultação automática e anotações do orador.
+- **Comente, colabore e compartilhe.** Várias pessoas podem editar o mesmo deck em tempo real. Gere um URL público somente leitura ou compartilhe com colegas de equipe específicos.
+- **Importe de PDF.** Transforme um PDF em um deck inicial — o agente o analisa e apresenta o conteúdo.
+- **Importar de outros formatos.** Importe repositórios PPTX, DOCX, Google Docs, GitHub ou qualquer URL como ponto de partida. Exporte para PPTX, Apresentações Google ou HTML.
+- **Aplicar sistemas de design.** Tokens de marca, instruções personalizadas e paletas padrão são salvos como sistemas de design e aplicados a novos decks.
+- **Restaure versões anteriores.** Cada mudança de deck é capturada; liste ou restaure qualquer versão anterior.
+
+## Primeiros passos
+
+Demonstração ao vivo: [slides.agent-native.com](https://slides.agent-native.com).
+
+Quando você abre o aplicativo:
+
+1. Clique em **Novo deck**.
+2. Pergunte ao agente: "Gere uma apresentação de 10 slides para um serviço de assinatura de café. O público-alvo são investidores."
+3. Assista à transmissão dos slides. Clique em qualquer slide para editar ou continue pedindo ao agente para refinar.
+
+### Instruções úteis
+
+- "Gere uma apresentação de 10 slides para um serviço de assinatura de café. O público-alvo são investidores."
+- "Adicione um slide de preços após o slide 3."
+- "Aumente o título deste slide e mude a cor de destaque para verde."
+- "Gere uma imagem principal para o slide atual — escuro, minimalista, cinematográfico."
+- "Encontre o logotipo de stripe.com e adicione-o ao slide 2."
+- "Substitua a palavra 'clientes' por 'membros' em todos os lugares desta apresentação."
+- "Resuma este PDF como uma apresentação de 6 slides." (anexe o PDF)
+
+Selecione o texto em um slide e pressione Cmd+I para focar o agente nessa seleção — ele agirá apenas sobre o que você selecionou.
+
+## Para desenvolvedores
+
+O restante deste documento é para qualquer pessoa que faça bifurcação ou extensão do modelo do Apresentações.
+
+### Início rápido
+
+Crie um novo aplicativo Apresentações no CLI:
+
+```bash
+npx @agent-native/core@latest create my-slides --standalone --template slides
+cd my-slides
+pnpm install
+pnpm dev
+```
+
+### Principais recursos {#key-features}
+
+**Geração de prompt para apresentação.** Peça uma apresentação e o agente transmite os slides para o editor usando o mesmo actions de criação e edição que você mesmo pode executar.
+
+**Tela de slide editável.** Edição de texto in-line, inserções de barras, edição de código, ordenação de arrastar e soltar, desfazer/refazer, comentários e modo de apresentação, tudo ao vivo na superfície do deck.
+
+**Importar e exportar.** Traga repositórios PPTX, DOCX, Google Docs, PDFs, URLs e GitHub; exporte para PPTX, Apresentações Google, HTML ou um link de compartilhamento.
+
+**Sistemas de design e mídia.** Sistemas de marca salva, geração de imagens, pesquisa de estoque e pesquisa de logotipo mantêm os decks mais próximos da direção visual pretendida.
+
+**Colaboração e histórico.** Edição Yjs em tempo real, comentários encadeados, compartilhamento de funções e instantâneos da versão do deck estão integrados.
+
+### Trabalhando com o agente
+
+O chat do agente fica na barra lateral. Ele pode criar apresentações, editar slides individuais, gerar imagens, pesquisar logotipos e navegar no UI — tudo usando o mesmo actions que você executaria no CLI.
+
+#### O que o agente vê
+
+Quando um baralho está aberto, o agente vê automaticamente:
+
+- Os atuais `deckId` e `slideIndex`.
+- A lista completa de slides na apresentação aberta.
+- O conteúdo HTML do slide atualmente selecionado.
+
+Isso é injetado em cada mensagem como um bloco `current-screen`, para que o agente nunca precise adivinhar o que "este slide" significa. Os dados vêm da chave de estado do aplicativo `navigation`, que o UI grava em cada navegação. Consulte `templates/slides/actions/view-screen.ts`.
+
+#### Seleção de texto para edições específicas
+
+Selecione o texto em um slide e pressione Cmd+I para focar o agente com essa seleção pré-carregada. O agente agirá apenas de acordo com o que você selecionou.
+
+#### Visualizações de slides embutidas no bate-papo
+
+O agente pode incorporar uma visualização de slide ao vivo diretamente em uma resposta de bate-papo usando a cerca de incorporação da estrutura. Ele renderiza um iframe sem cromo via `app/routes/slide.tsx` para que você possa ver o resultado sem sair da conversa.
+
+### Modelo de dados
+
+Todos os dados do deck ficam em SQL via Drizzle ORM. Esquema: `templates/slides/server/db/schema.ts`.
+
+```an-schema title="Slides data model" summary="A deck owns its slides as JSON in decks.data; comments, versions, shares, and design systems hang off it."
+{
+  "entities": [
+    {
+      "id": "decks",
+      "name": "decks",
+      "note": "Slides live as JSON in data; carries ownableColumns",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true, "note": "e.g. deck-1712345-abc" },
+        { "name": "title", "type": "text" },
+        { "name": "data", "type": "text", "note": "JSON: { title, slides: [{ id, content, layout }] }" },
+        { "name": "created_at", "type": "text" },
+        { "name": "updated_at", "type": "text" }
+      ]
+    },
+    {
+      "id": "slide_comments",
+      "name": "slide_comments",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true },
+        { "name": "deck_id", "type": "text", "fk": "decks.id" },
+        { "name": "slide_id", "type": "text", "note": "Slide the comment lives on" },
+        { "name": "thread_id", "type": "text", "note": "Threading" },
+        { "name": "parent_id", "type": "text", "nullable": true },
+        { "name": "content", "type": "text" },
+        { "name": "quoted_text", "type": "text", "nullable": true },
+        { "name": "author_email", "type": "text" },
+        { "name": "author_name", "type": "text" },
+        { "name": "resolved", "type": "boolean" }
+      ]
+    },
+    {
+      "id": "deck_versions",
+      "name": "deck_versions",
+      "note": "Point-in-time snapshots for restore",
+      "fields": [
+        { "name": "deck_id", "type": "text", "fk": "decks.id" },
+        { "name": "title", "type": "text" },
+        { "name": "data", "type": "text", "note": "Full deck JSON" },
+        { "name": "change_label", "type": "text", "nullable": true }
+      ]
+    },
+    {
+      "id": "design_systems",
+      "name": "design_systems",
+      "note": "Reusable brand tokens; ownableColumns",
+      "fields": [
+        { "name": "data", "type": "text", "note": "colors / typography / spacing" },
+        { "name": "assets", "type": "text", "nullable": true },
+        { "name": "custom_instructions", "type": "text", "nullable": true },
+        { "name": "is_default", "type": "boolean" }
+      ]
+    },
+    {
+      "id": "deck_share_links",
+      "name": "deck_share_links",
+      "note": "Persisted public share-link snapshots",
+      "fields": [
+        { "name": "token", "type": "text", "pk": true },
+        { "name": "title", "type": "text" },
+        { "name": "slides", "type": "text", "note": "JSON slides snapshot" },
+        { "name": "aspect_ratio", "type": "text", "nullable": true },
+        { "name": "created_at", "type": "text" }
+      ]
+    }
+  ],
+  "relations": [
+    { "from": "decks", "to": "slide_comments", "kind": "1-n", "label": "comments" },
+    { "from": "decks", "to": "deck_versions", "kind": "1-n", "label": "snapshots" }
+  ]
+}
+```
+
+A estrutura compartilha tabelas (`deck_shares`, `design_system_shares`) mapeia principais para funções de visualizador/editor/administrador por recurso.
+
+#### baralhos
+
+| Coluna       | Tipo  | Notas                                                     |
+| ------------ | ----- | --------------------------------------------------------- |
+| `id`         | texto | Chave primária, por ex. `deck-1712345-abc`                |
+| `title`      | texto | Título do deck                                            |
+| `data`       | texto | Blob JSON: `{ title, slides: [{ id, content, layout }] }` |
+| `created_at` | texto | Carimbo de data e hora                                    |
+| `updated_at` | texto | Carimbo de data e hora                                    |
+
+Cada deck também carrega o `ownableColumns` padrão (proprietário, visibilidade, token de compartilhamento) para que ele se encaixe no modelo de compartilhamento da estrutura.
+
+#### slide_comments
+
+| Coluna                        | Notas                                          |
+| ----------------------------- | ---------------------------------------------- |
+| `id`                          | Chave primária                                 |
+| `deck_id`                     | Baralho pai                                    |
+| `slide_id`                    | Deslize o comentário ao vivo                   |
+| `thread_id`, `parent_id`      | Rosqueamento                                   |
+| `content`, `quoted_text`      | Corpo do comentário e trecho de texto opcional |
+| `author_email`, `author_name` | Autor                                          |
+| `resolved`                    | Sinalizador booleano                           |
+
+#### deck_shares
+
+Tabela de compartilhamentos fornecida pela estrutura (criada via `createSharesTable`) que mapeia principais (usuários ou organizações) para funções (visualizador, editor, administrador) por deck.
+
+#### deck_versions
+
+Snapshots pontuais de um deck — `deck_id`, `title`, `data` (deck completo JSON) e um `change_label` opcional. Usado por `list-deck-versions` / `restore-deck-version`.
+
+#### sistemas_de_design
+
+Tokens de marca reutilizáveis — `data` (cores/tipografia/espaçamento), `assets`, `custom_instructions` e um sinalizador `is_default`. Usa `ownableColumns` para que os sistemas de design possam ser compartilhados por usuário ou por organização.
+
+#### design_system_shares
+
+Framework compartilha tabela para sistemas de design, mapeando princípios para funções (visualizador, editor, administrador).
+
+#### deck_share_links
+
+Snapshots de link de compartilhamento público persistentes codificados por `token`. Cada linha armazena um `title`, um instantâneo de matriz JSON `slides`, um `aspect_ratio` opcional e `created_at`. Persistir links de compartilhamento aqui significa que eles sobrevivem às reinicializações do servidor e funcionam em instâncias sem servidor.
+
+#### Estrutura do slide
+
+Cada slide dentro de `decks.data` é:
+
+```json
+{
+  "id": "slide-1",
+  "layout": "title",
+  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
+}
+```
+
+`content` é HTML bruto - o renderizador (`app/components/deck/SlideRenderer.tsx`) fornece o fundo preto e proporção de aspecto fixa, e o HTML fornece tudo dentro. A incorporação rica também é suportada: diagramas Excalidraw via `ExcalidrawSlide.tsx` e gráficos Mermaid via `MermaidRenderer.tsx`.
+
+### Personalizando {#customizing}
+
+O modelo do Apresentações é totalmente bifurcável. Principais pontos a serem observados ao estendê-lo:
+
+#### Actions — `templates/slides/actions/`
+
+Toda operação que pode ser chamada pelo agente reside aqui como um arquivo TypeScript. Alguns que você tocará com frequência:
+
+- `create-deck.ts` — novo deck do zero ou substituição em massa.
+- `add-slide.ts` — anexa um slide; prefira isso para geração de streaming.
+- `update-slide.ts` — localização/substituição cirúrgica ou troca completa de conteúdo.
+- `view-screen.ts` — instantâneo do que o usuário vê.
+- `generate-image.ts`, `edit-image.ts`, `image-search.ts`, `logo-lookup.ts` — ferramentas de imagem.
+- `extract-pdf.ts` — ingestão de PDF.
+
+Cada ação é montada automaticamente em `POST /_agent-native/actions/:name` e pode ser chamada de CLI como `pnpm action <name>`. Adicione um novo arquivo aqui para dar ao agente uma nova capacidade.
+
+#### Rotas — `templates/slides/app/routes/`
+
+- `_index.tsx` — lista de decks.
+- `deck.$id.tsx` — o editor.
+- `deck.$id_.present.tsx` — modo de apresentação.
+- `share.$token.tsx` — página de compartilhamento pública somente leitura.
+- `slide.tsx` — incorporação de slide único usada em visualizações de bate-papo.
+- `settings.tsx` — configurações do modelo.
+- `team.tsx` — gerenciamento organizacional e de equipe.
+
+#### Componentes do editor — `templates/slides/app/components/editor/`
+
+A maior parte da personalização do UI acontece aqui: `SlideEditor.tsx`, `EditorToolbar.tsx`, `EditorSidebar.tsx`, menus de bolha, menu de barra e painéis para geração de imagens, pesquisa e histórico.
+
+#### Skills — `templates/slides/.agents/skills/`
+
+Agente skills que explica padrões quando o agente precisa modificar o código:
+
+- `create-deck/` — como criar uma nova apresentação com slides.
+- `slide-editing/` — como editar slides individuais.
+- `deck-management/` — como os decks são armazenados e acessados.
+- `slide-images/` — geração de imagens e fluxo de trabalho de pesquisa.
+
+#### AGENTS.md
+
+`templates/slides/AGENTS.md` é o roteador curto que o agente lê em cada conversa. Ele aponta para skills em `.agents/skills/` e estabelece as regras básicas, o contrato de estado do aplicativo e o índice de habilidades. Os modelos de slide HTML exatos para cada layout estão disponíveis no `.agents/skills/create-deck/SKILL.md`. Atualize essa habilidade sempre que você adicionar ou alterar um padrão de layout de slide.
+
+#### Rotas API
+
+Para casos em que actions não é adequado (uploads de arquivos, streaming), o modelo expõe um pequeno conjunto de endpoints REST: `GET/POST /api/decks`, `GET/PUT/DELETE /api/decks/:id`. Consulte `templates/slides/server/routes/api/`.

package/docs/content/locales/pt-BR/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "Vídeo"
+description: "Um estúdio de vídeo programático para gráficos em movimento, demonstrações de produtos e texto cinético. Gere animações a partir de um prompt e ajuste-as em uma linha do tempo."
+---
+
+# Vídeo
+
+Um estúdio de vídeo programático para o tipo de gráficos em movimento, demonstrações de produtos e vídeos de texto cinético que são difíceis de capturar manualmente. Peça ao agente “uma revelação do logotipo de 6 segundos que desaparece em 2 segundos” e ele cria a animação. Ajuste o tempo, a atenuação e os movimentos da câmera em uma linha do tempo e depois renderize para MP4 ou WebM.
+
+```an-wireframe
+{
+  "surface": "desktop",
+  "html": "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Logo reveal</h1><span class='wf-pill accent'>6 seconds</span><div style='flex:1'></div><button>Preview</button><button class='primary'>Render</button></div><div class='wf-card' style='flex:1;display:flex;align-items:center;justify-content:center;min-height:250px'><div style='text-align:center'><strong>Remotion preview</strong><br/><small class='wf-muted'>logo scales in as the title fades</small></div></div><div class='wf-card' style='display:flex;flex-direction:column;gap:10px'><div style='display:flex;gap:8px;align-items:center'><span class='wf-pill'>0s</span><span class='wf-pill'>2s</span><span class='wf-pill'>4s</span><span class='wf-pill'>6s</span><div style='flex:1'></div><button>New track</button></div><div class='wf-box'>Title fade · 0-48 frames</div><div class='wf-box'>Logo scale · 48-120 frames</div><div class='wf-box'>Camera push · 72-144 frames</div></div></div>"
+}
+```
+
+Ao abrir o estúdio, você verá uma lista de composições na tela inicial. Clique em um e você verá um player na parte superior, uma linha do tempo na parte inferior e um painel de propriedades à direita. O agente sempre sabe qual composição você tem aberta.
+
+```an-diagram title="Animation as data" summary="A composition is a React component; every animation reads from a track so the agent and the timeline edit the same data."
+{
+  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">drag, resize, scrub</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>React composition<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</div></div>",
+  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+}
+```
+
+## O que você pode fazer com isso
+
+- **Gere animações a partir de um prompt.** "Adicione um cartão de título que aparece gradualmente em 2 segundos e dura até 5." O agente edita a composição.
+- **Ajuste o tempo em uma linha do tempo.** Arraste e redimensione trilhas de animação, percorra quadros, defina curvas de atenuação visualmente.
+- **Anime a câmera.** Panorâmica, zoom e inclinação com ferramentas na tela. Clique na ferramenta, arraste na visualização e um quadro-chave será criado automaticamente.
+- **Comece com uma composição em branco ou um exemplo.** O modelo envia uma composição no código (`BlankComposition`) para começar; exemplos de composições — texto cinético, revelação de logotipo, explosões de partículas, demonstrações interativas do UI, apresentações de slides — são carregados do banco de dados e você pode adicionar os seus próprios.
+- **Edite visualmente as curvas de atenuação.** Mais de 30 curvas fornecidas — potência, costas, salto, circ, elástico, expo, senoidal, além de física de mola.
+- **Renderize para MP4 ou WebM** com superamostragem de 1x, 2x ou 3x para texto e vetores nítidos durante o zoom da câmera.
+
+Esta é mais uma ferramenta voltada para o desenvolvedor do que outros modelos - as composições são componentes React, então usuários avançados (ou o agente) podem escrever novos tipos de animação do zero. Mas os ajustes diários ("tornar a digitação mais lenta", "reduzir a contagem de partículas para 12") são apenas conversa fiada.
+
+## Primeiros passos
+
+Demonstração ao vivo: [videos.agent-native.com](https://videos.agent-native.com).
+
+Quando você abre o estúdio:
+
+1. Escolha uma composição na tela inicial.
+2. Experimente o agente: "adicione um logotipo revelado que apareça gradualmente em 2 segundos." Assista à atualização da linha do tempo.
+3. Arraste as faixas para reprogramar, clique na ferramenta câmera, deslize o player.
+
+### Instruções úteis
+
+- "Adicione um cartão de título que apareça gradualmente em 2 segundos e permaneça até 5."
+- "Mude a câmera para ampliar 2x o logotipo entre os quadros 60 e 90."
+- "Torne a digitação mais lenta — 40% mais longa."
+- "A explosão de partículas é muito densa. Reduza a contagem para 12."
+- "Crie uma nova composição chamada intro-loop, 1080x1080, 6 segundos."
+- "Adicione uma animação de clique na zona do botão e anime o cursor para ela."
+- "Dê a esta faixa uma flexibilização elástica em vez de uma suavização."
+
+Se você selecionar uma faixa na linha do tempo e pressionar Cmd+I, o agente seleciona essa seleção — "tornar esta mais rápida" simplesmente funciona.
+
+## Para desenvolvedores
+
+O restante deste documento é para qualquer pessoa que faça bifurcação do modelo de vídeo ou estenda-o. Este modelo é mais avançado em código do que os outros: cada composição é um componente React e cada animação são dados em uma trilha.
+
+### Arquitetura
+
+Tudo o que você vê no estúdio é código. Uma composição é um `CompositionEntry` em `app/remotion/registry.ts` que aponta para um componente React em `app/remotion/compositions/`. Cada animação nesse componente é lida em um `AnimationTrack` para que os usuários possam arrastá-la, redimensioná-la e reprogramá-la na linha do tempo UI. O agente pode criar novas composições, adicionar faixas, ajustar a easing e gravar componentes React inteiros que se conectam ao registro.
+
+O estúdio roda no `<Player>` do Remotion para visualização e no Remotion CLI para renderização final. O padrão de saída é 1920x1080 a 30fps.
+
+### Início rápido
+
+Estruture um novo aplicativo de vídeo do CLI:
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+Abra o estúdio no seu navegador, crie uma composição e comece do zero. Pergunte ao agente algo como "adicione um logotipo revelado que apareça gradualmente em 2 segundos" e ele editará a composição para você.
+
+### Principais recursos
+
+**Composições baseadas em React.** Os vídeos são componentes React apoiados por Remotion, com composições de usuário apoiadas por SQL e um registro de código opcional para padrões locais.
+
+**Animação que prioriza a linha do tempo.** Faixas de duração, quadros-chave, curvas de atenuação, movimentos de câmera e faixas de expressão programática editam os mesmos dados de composição.
+
+**Sistemas de movimento ajustáveis.** Parâmetros, trilhas de cursor, zonas interativas de foco, navegação de alcance e reprodução repetida tornam as animações geradas ajustáveis sem código.
+
+**Renderização e persistência.** As configurações de composição, qualidade, fps, valores de rastreamento e substituições persistem por composição e são renderizadas para MP4 ou WebM por meio do Remotion.
+
+### Trabalhando com o agente
+
+O agente sempre sabe qual composição você tem aberta. O estado de navegação (`{ view, compositionId }`) é gravado na tabela `application_state` da estrutura e a ação `view-screen` o retorna mais uma dica apontando para `app/remotion/registry.ts`. Você não precisa dizer ao agente em qual composição você está — peça para ele agir de acordo com "este" e ele o fará.
+
+Nos bastidores, o agente chama actions como `navigate`, `save-composition` e `generate-animated-component`. Os registros de composição apoiados por SQL são criados ou atualizados por meio de `save-composition`; Os componentes Remotion apoiados por código ainda residem em `app/remotion/compositions/*.tsx` e são registrados em `app/remotion/registry.ts`.
+
+### Modelo de dados
+
+O esquema do lado do servidor está em `templates/videos/server/db/schema.ts`:
+
+```an-schema title="Video data model" summary="SQL-backed compositions plus design systems and nestable folders, each with a framework shares table."
+{
+  "entities": [
+    {
+      "id": "compositions",
+      "name": "compositions",
+      "note": "User-created compositions and overrides; ownableColumns",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true },
+        { "name": "title", "type": "text" },
+        { "name": "type", "type": "text" },
+        { "name": "data", "type": "text", "note": "Full composition JSON blob" },
+        { "name": "created_at", "type": "text" },
+        { "name": "updated_at", "type": "text" }
+      ]
+    },
+    {
+      "id": "design_systems",
+      "name": "design_systems",
+      "note": "Reusable brand tokens; ownableColumns",
+      "fields": [
+        { "name": "data", "type": "text", "note": "colors / typography / spacing" },
+        { "name": "assets", "type": "text", "nullable": true },
+        { "name": "custom_instructions", "type": "text", "nullable": true },
+        { "name": "is_default", "type": "boolean" }
+      ]
+    },
+    {
+      "id": "folders",
+      "name": "folders",
+      "note": "Nestable folders; ownableColumns",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true },
+        { "name": "name", "type": "text" }
+      ]
+    },
+    {
+      "id": "folder_memberships",
+      "name": "folder_memberships",
+      "note": "Many-to-many join",
+      "fields": [
+        { "name": "folder_id", "type": "text", "fk": "folders.id" },
+        { "name": "composition_id", "type": "text", "fk": "compositions.id" }
+      ]
+    }
+  ],
+  "relations": [
+    { "from": "folders", "to": "folder_memberships", "kind": "1-n", "label": "members" },
+    { "from": "compositions", "to": "folder_memberships", "kind": "1-n", "label": "in folders" }
+  ]
+}
+```
+
+Cada tabela também possui uma tabela de compartilhamentos de estrutura correspondente (`composition_shares`, `design_system_shares`, `folder_shares`) produzida por `createSharesTable()`.
+
+- `compositions` — id, título, tipo, `data` (blob JSON de composição completa), colunas de propriedade, carimbos de data/hora.
+- `composition_shares` — concessões de ações padrão produzidas por `createSharesTable()`.
+- `design_systems` — tokens de marca reutilizáveis (cores, tipografia, espaçamento, recursos, instruções personalizadas, sinalizador `is_default`) com `ownableColumns`.
+- `design_system_shares` — compartilha subsídios para sistemas de design.
+- `folders` — pastas aninhadas para organização de bibliotecas, com `ownableColumns`.
+- `folder_shares` — concessões de compartilhamento para pastas.
+- `folder_memberships` — junção muitos-para-muitos entre um `folder_id` e um `composition_id`.
+
+### Pastas e sistemas de design
+
+As composições podem ser organizadas em pastas e estilizadas com sistemas de design. Actions: `create-folder`, `rename-folder`, `delete-folder`, `move-composition-to-folder`. Sistema de design actions: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `set-default-design-system`, `apply-design-system`, `analyze-brand-assets`. Importar actions: `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF).
+
+O registro em `app/remotion/registry.ts` é a fonte de verdade no código para o que vem com o modelo. A tabela SQL armazena composições e substituições criadas pelo usuário. O estado do Studio (edições de trilha por composição, substituições de objetos, configurações de composição) é espelhado em `localStorage` em `videos-tracks:<id>`, `videos-props:<id>` e `videos-comp-settings:<id>` e mesclado de volta aos padrões do registro durante o carregamento.
+
+Formas principais TypeScript (`app/types.ts`):
+
+- `AnimationTrack` — `id`, `label`, `startFrame`, `endFrame`, `easing`, `animatedProps[]`.
+- `AnimatedProp` — `property`, `from`, `to`, `unit`, além de `keyframes`, `programmatic`, `description`, `codeSnippet`, `parameters`, `parameterValues` opcionais.
+- `CompositionEntry` — `id`, `title`, `description`, `component`, `durationInFrames`, `fps`, `width`, `height`, `defaultProps`, `tracks`.
+
+As composições são privadas por padrão. A visibilidade pode ser `private`, `org` ou `public`, e as concessões de compartilhamento fornecem funções `viewer`, `editor` ou `admin`, conectadas por meio da primitiva de compartilhamento da estrutura.
+
+### Personalizando
+
+A pasta do modelo é `templates/videos/` (o slug voltado para o usuário é `video`, mas a pasta está no plural).
+
+**Actions** — `templates/videos/actions/`
+
+- `view-screen.ts` — retorna o estado de navegação atual do agente.
+- `navigate.ts` — navegue até uma composição (`--compositionId <id>`) ou a visualização inicial (`--view home`).
+- `save-composition.ts` — cria ou atualiza um registro de composição baseado em SQL.
+- `generate-animated-component.ts` — gera um novo arquivo de componente Remotion com padrão.
+- `validate-compositions.ts` — verifique todas as composições registradas em busca de problemas estruturais.
+- `list-compositions.ts`, `get-composition.ts`, `update-composition.ts`, `delete-composition.ts` — leia, atualize e exclua registros de composição baseados em SQL.
+
+**Rotas** — `templates/videos/app/routes/`
+
+- `_index.tsx` — estúdio doméstico; renderiza o shell e a lista de composição.
+- `c.$compositionId.tsx` — editor de composição (linha do tempo, player, painel de propriedades).
+- `components.tsx` — navegador da biblioteca de componentes.
+- `team.tsx` — gerenciamento de equipe.
+
+**Remoção interna** — `templates/videos/app/remotion/`
+
+- `registry.ts` — a lista de composição oficial.
+- `compositions/` — um `.tsx` por composição, mais um barril `index.ts`.
+- `trackAnimation.ts` — `trackProgress`, `getPropValue`, `findTrack`, `getPropValueKeyframed`.
+- `CameraHost.tsx` — agrupa o conteúdo da composição com a transformação da câmera.
+- `hooks/`, `ui-components/`, `components/` — auxiliares de elementos interativos, renderização de cursor, wrappers de elementos animados.
+
+**Estúdio UI** — `templates/videos/app/components/`
+
+- `Timeline.tsx` — a linha do tempo totalmente controlada (`viewStart`/`viewEnd` não possui nenhum estado internamente).
+- `VideoPlayer.tsx` — Wrapper `<Player>` de remoção com reprodução com intervalo limitado.
+- `TrackPropertiesPanel.tsx`, `CompSettingsEditor.tsx`, `PropsEditor.tsx` — os painéis do lado direito.
+- `CameraToolbar.tsx`, `CameraControls.tsx` — ferramentas de câmera e controles numéricos.
+
+**Instruções do agente** — `templates/videos/AGENTS.md` é o guia extenso que o agente lê. Ele cobre a regra de animação como trilha, sistema de câmera, sistema de cursor, unidades de filtro CSS, registro de componentes interativos, espaçamento UI e listas de verificação para criação ou edição de composições.
+
+**Skills** — `templates/videos/.agents/skills/`
+
+- `composition-management/SKILL.md` — como criar e registrar composições.
+- `animation-tracks/SKILL.md` — como editar trilhas e objetos animados.
+- Além da estrutura padrão skills: `actions`, `self-modifying-code`, `delegate-to-agent`, `storing-data`, `security`, `frontend-design`, `create-skill`, `capture-learnings`.
+
+Para adicionar uma nova composição, siga a lista de verificação em `AGENTS.md`: crie o componente, declare `FALLBACK_TRACKS`, use `findTrack` / `trackProgress` / `getPropValue` (nunca codifique quadros), exporte de `compositions/index.ts`, adicione um `CompositionEntry` ao registro e execute `pnpm typecheck`.