@agent-native/core 0.85.7 → 0.86.0

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

@@ -1,336 +0,0 @@
----
-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.
-
-<WireframeBlock id="doc-block-16tv5x5">
-  <Screen
-    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'>Revelação do logo</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>Prévia do Remotion</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>Nova trilha</button></div><div class='wf-box'>Fade do título · frames 0-48</div><div class='wf-box'>Escala do logo · frames 48-120</div><div class='wf-box'>Avanço de câmera · frames 72-144</div></div></div>"
-    }
-  />
-</WireframeBlock>
-
-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.
-
-<Diagram id="doc-block-xlg7n5" title={"Animação como dados"} summary={"Uma composição é um componente React; cada animação lê uma trilha para que o agente e a linha do tempo editem os mesmos dados."}>
-
-```html
-<div class="diagram-flow">
-  <div class="diagram-col">
-    <div class="diagram-node">
-      Timeline<br /><small class="diagram-muted"
-        >arrastar, redimensionar, percorrer</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>
-    Composição React<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;
-}
-```
-
-</Diagram>
-
-## 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`:
-
-<DataModel
-  id="doc-block-1nkt3fv"
-  title={"Modelo de dados de vídeo"}
-  summary={
-    "Composições apoiadas por SQL, além de sistemas de design e pastas aninhadas, cada uma com uma tabela de compartilhamentos de estrutura."
-  }
-  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: "Blob de composição completa JSON",
-        },
-        {
-          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: "Junção muitos-para-muitos",
-      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`.

package/docs/content/locales/zh-CN/template-videos.mdx

@@ -1,334 +0,0 @@
----
-title: "视频"
-description: "用于动态图形、产品演示和动态文本的程序化视频工作室。根据提示生成动画并在时间轴上调整它们。"
----
-
-# 视频
-
-一个程序化视频工作室，用于制作动态图形、产品演示和动态文本视频，这些视频很难手动设置关键帧。要求代理“显示 6 秒的徽标，并在 2 秒后淡入”，它就会构建动画。调整时间、缓动和相机在时间轴上的移动，然后渲染到 MP4 或 WebM。
-
-<WireframeBlock id="doc-block-1s0qknv">
-  <Screen
-    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 展示</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 预览</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>新轨道</button></div><div class='wf-box'>标题淡入 · 0-48 帧</div><div class='wf-box'>Logo 缩放 · 48-120 帧</div><div class='wf-box'>镜头推进 · 72-144 帧</div></div></div>"
-    }
-  />
-</WireframeBlock>
-
-当您打开工作室时，您将在主屏幕上看到作品列表。单击其中一个，您会在顶部看到一个播放器，在底部看到一个时间线，在右侧看到一个属性面板。代理始终知道您打开了哪个组合。
-
-<Diagram id="doc-block-1o9ao3j" title={"动画作为数据"} summary={"组合物是 React 组件；每个动画都从轨道读取，因此代理和时间线编辑相同的数据。"}>
-
-```html
-<div class="diagram-flow">
-  <div class="diagram-col">
-    <div class="diagram-node">
-      Timeline<br /><small class="diagram-muted"
-        >拖动、调整大小、拖动时间轴</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 合成<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;
-}
-```
-
-</Diagram>
-
-## 你可以用它做什么
-
-- **根据提示生成动画。**“添加一张在 2 秒后淡入并保持到 5 秒的标题卡。”代理编辑构图。
-- **调整时间轴上的时间。**拖动动画轨道并调整其大小、浏览帧、直观地设置缓动曲线。
-- **为相机设置动画。** 使用屏幕工具进行平移、缩放和倾斜。单击该工具，在预览中拖动，就会自动创建关键帧。
-- **从空白合成或示例开始。** 该模板提供了一个代码内合成 (`BlankComposition`) 来开始；示例作品 - 动态文本、徽标显示、粒子爆发、交互式 UI 演示、幻灯片 - 从数据库加载，您可以添加自己的。
-- **以可视方式编辑缓动曲线。** 提供 30 多条曲线 - 功率、后退、弹跳、循环、弹性、expo、正弦以及弹簧物理特性。
-- **以 1x、2x 或 3x 超级采样渲染到 MP4 或 WebM**，在相机变焦期间获得清晰的文本和矢量。
-
-与其他模板相比，这更像是一种开发人员风格的工具 - 组合是 React 组件，因此高级用户（或代理）可以从头开始编写全新的动画类型。但日常调整（“让打字速度变慢”、“将粒子数降低到 12”）只是闲聊。
-
-## 开始使用
-
-现场演示：[videos.agent-native.com](https://videos.agent-native.com)。
-
-当您打开工作室时：
-
-1. 从主屏幕中选择一个作品。
-2. 尝试代理：“添加一个在 2 秒后淡入的徽标显示。”观看时间线更新。
-3. 拖动曲目以重新定时，单击相机工具，擦洗播放器。
-
-### 有用的提示
-
-- “添加一张在 2 秒后淡入并持续到 5 秒的标题卡。”
-- “将相机更改为在第 60 帧和第 90 帧之间将徽标放大 2 倍。”
-- “让输入显示速度变慢 — 时间延长 40%。”
-- “粒子爆发太密集。将计数降至 12。”
-- “创建一个名为 intro-loop 的新合成，1080x1080，6 秒。”
-- “在按钮区域添加点击动画并将光标动画设置到它。”
-- “给这个轨道一个弹簧缓动而不是缓出。”
-
-如果您在时间轴中选择一个曲目并按 Cmd+I，代理会选择该选择 - “让这个曲目变得更快”就可以了。
-
-## 对于开发者
-
-本文档的其余部分适用于任何分叉视频模板或扩展它的人。该模板比其他模板更具代码前向性 - 每个合成都是 React 组件，每个动画都是轨道上的数据。
-
-### 架构
-
-你在工作室看到的一切都是代码。组合是 `app/remotion/registry.ts` 中的 `CompositionEntry`，它指向 `app/remotion/compositions/` 中的 React 组件。该组件中的每个动画都从 `AnimationTrack` 读取，因此用户可以在时间轴 UI 中拖动它、调整其大小并重新计时。该代理可以创建新的作品、添加曲目、调整缓动以及编写插入注册表的整个 React 组件。
-
-工作室在 Remotion 的 `<Player>` 上运行进行预览，在 Remotion CLI 上运行进行最终渲染。输出默认为 1920x1080、30fps。
-
-### 快速入门
-
-从 CLI 搭建新的视频应用程序：
-
-```bash
-npx @agent-native/core@latest create my-video-app --standalone --template videos
-cd my-video-app
-pnpm install
-pnpm dev
-```
-
-在浏览器中打开工作室，创建一个作品，然后从空白开始。向代理询问诸如“添加一个在 2 秒后淡入的徽标显示”之类的问题，它就会为您编辑构图。
-
-### 主要功能
-
-**基于 React 的组合。**视频是 Remotion 支持的 React 组件，具有 SQL 支持的用户组合和本地默认值的可选代码注册表。
-
-**时间轴优先动画。**持续时间轨道、关键帧、缓动曲线、相机移动和编程表达式轨道都编辑相同的合成数据。
-
-**可调节的运动系统。**参数、光标轨迹、交互式悬停区域、范围导航和重复播放使生成的动画无需代码即可调节。
-
-**渲染和持久性。**合成设置、质量、fps、跟踪值和覆盖会保留每个合成，并通过 Remotion 渲染到 MP4 或 WebM。
-
-### 与代理合作
-
-代理始终知道您打开了哪个组合。导航状态 (`{ view, compositionId }`) 写入框架的 `application_state` 表，`view-screen` 操作返回它以及指向 `app/remotion/registry.ts` 的提示。您不必告诉代理您正在使用哪种组合 - 要求它对“这个”采取行动，它就会这样做。
-
-在底层，代理将 actions 称为 `navigate`、`save-composition` 和 `generate-animated-component`。 SQL支持的作曲记录通过`save-composition`创建或更新；代码支持的 Remotion 组件仍然存在于 `app/remotion/compositions/*.tsx` 中，并在 `app/remotion/registry.ts` 中注册。
-
-### 数据模型
-
-服务器端架构位于 `templates/videos/server/db/schema.ts` 中：
-
-<DataModel
-  id="doc-block-xr3usw"
-  title={"视频数据模型"}
-  summary={
-    "SQL支持的组合以及设计系统和可嵌套文件夹，每个文件夹都有一个框架共享表。"
-  }
-  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: "完整组合 JSON 斑点",
-        },
-        {
-          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: "多对多加入",
-      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",
-    },
-  ]}
-/>
-
-每个表还有一个由 `createSharesTable()` 生成的匹配框架份额表（`composition_shares`、`design_system_shares`、`folder_shares`）。
-
-- `compositions` — id、标题、类型、`data`（完整组合 JSON blob）、所有权列、时间戳。
-- `composition_shares` — `createSharesTable()` 产生的标准股票授予。
-- `design_systems` — 可重复使用的品牌标记（颜色、排版、间距、资产、自定义指令、`is_default` 标志）和 `ownableColumns`。
-- `design_system_shares` — 设计系统的份额赠款。
-- `folders` — 用于库组织的可嵌套文件夹，带有 `ownableColumns`。
-- `folder_shares` — 文件夹的共享授权。
-- `folder_memberships` — `folder_id` 和 `composition_id` 之间的多对多连接。
-
-### 文件夹和设计系统
-
-可以将作品组织到文件夹中并使用设计系统进行样式设置。 Actions：`create-folder`、`rename-folder`、`delete-folder`、`move-composition-to-folder`。设计系统actions：`create-design-system`、`update-design-system`、`get-design-system`、`list-design-systems`、`set-default-design-system`、`apply-design-system`、`analyze-brand-assets`。导入actions：`import-github`、`import-from-url`、`import-document`（DOCX/PPTX/PDF）。
-
-`app/remotion/registry.ts` 中的注册表是模板附带内容的真实代码来源。 SQL 表存储用户创建的合成和覆盖。工作室状态（每个合成轨道编辑、道具覆盖、合成设置）会镜像到 `videos-tracks:<id>`、`videos-props:<id>` 和 `videos-comp-settings:<id>` 下的 `localStorage`，并在加载时深度合并回注册表默认值。
-
-核心TypeScript形状（`app/types.ts`）：
-
-- `AnimationTrack` — `id`, `label`, `startFrame`, `endFrame`, `easing`, `animatedProps[]`.
-- `AnimatedProp` — `property`、`from`、`to`、`unit`，以及可选的 `keyframes`、`programmatic`、`description`、`codeSnippet`、`parameters`、`parameterValues`。
-- `CompositionEntry` — `id`, `title`, `description`, `component`, `durationInFrames`, `fps`, `width`, `height`, `defaultProps`, `tracks`.
-
-默认情况下，作品是私有的。可见性可以是 `private`、`org` 或 `public`，共享授予赋予 `viewer`、`editor` 或 `admin` 角色 - 通过框架的共享原语连接。
-
-### 自定义它
-
-模板文件夹是`templates/videos/`（面向用户的slug是`video`，但文件夹是复数）。
-
-**Actions** — `templates/videos/actions/`
-
-- `view-screen.ts` — 返回代理的当前导航状态。
-- `navigate.ts` — 导航到合成 (`--compositionId <id>`) 或主视图 (`--view home`)。
-- `save-composition.ts` — 创建或更新 SQL 支持的合成记录。
-- `generate-animated-component.ts` — 生成带有样板的新 Remotion 组件文件。
-- `validate-compositions.ts` — 检查所有已注册的作品是否存在结构问题。
-- `list-compositions.ts`、`get-composition.ts`、`update-composition.ts`、`delete-composition.ts` — 读取、更新和删除 SQL 支持的合成记录。
-
-**路线** — `templates/videos/app/routes/`
-
-- `_index.tsx` — 工作室之家；渲染外壳和组合列表。
-- `c.$compositionId.tsx` - 合成编辑器（时间轴、播放器、属性面板）。
-- `components.tsx` — 组件库浏览器。
-- `team.tsx` — 团队管理。
-
-**远程内部结构** — `templates/videos/app/remotion/`
-
-- `registry.ts` — 权威作文列表。
-- `compositions/` — 每个组合一个 `.tsx`，加上一个 `index.ts` 枪管。
-- `trackAnimation.ts` — `trackProgress`, `getPropValue`, `findTrack`, `getPropValueKeyframed`.
-- `CameraHost.tsx` — 使用相机变换包装合成内容。
-- `hooks/`、`ui-components/`、`components/` - 交互式元素助手、光标渲染、动画元素包装器。
-
-**工作室 UI** — `templates/videos/app/components/`
-
-- `Timeline.tsx` — 完全控制的时间线（`viewStart` / `viewEnd` 内部没有状态）。
-- `VideoPlayer.tsx` - 具有范围限制播放的 Remotion `<Player>` 包装器。
-- `TrackPropertiesPanel.tsx`、`CompSettingsEditor.tsx`、`PropsEditor.tsx` — 右侧面板。
-- `CameraToolbar.tsx`、`CameraControls.tsx` - 相机工具和数字控件。
-
-**代理说明** — `templates/videos/AGENTS.md` 是代理阅读的长格式指南。它涵盖了动画轨道规则、相机系统、光标系统、CSS 过滤器单元、交互式组件注册、UI 间距以及用于创建或编辑合成的清单。
-
-**Skills** — `templates/videos/.agents/skills/`
-
-- `composition-management/SKILL.md` — 如何创建和注册作品。
-- `animation-tracks/SKILL.md` — 如何编辑轨道和动画道具。
-- 加上标准框架skills：`actions`、`self-modifying-code`、`delegate-to-agent`、`storing-data`、`security`、`frontend-design`、`create-skill`、`capture-learnings`。
-
-要添加新的合成，请遵循 `AGENTS.md` 中的清单：创建组件，声明 `FALLBACK_TRACKS`，使用 `findTrack` / `trackProgress` / `getPropValue`（切勿硬编码帧），从 `compositions/index.ts` 导出，将 `CompositionEntry` 添加到注册表，然后运行 `pnpm typecheck`。