@agent-native/core 0.76.5 → 0.76.6

package/docs/content/locales/zh-CN/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "幻灯片"
+description: "根据提示生成套牌、进行可视化编辑并全屏呈现。 Google Slides、Pitch 和 PowerPoint 的开源替代品。"
+---
+
+# 幻灯片
+
+根据提示生成完整的演示文稿、直观地编辑幻灯片并全屏演示。向代理询问“一份包含 10 张幻灯片的咖啡订阅服务宣传资料”，并在几秒钟内观看它一张一张幻灯片地传输到编辑器中。 Google Slides、Pitch 和 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>"
+}
+```
+
+当您打开幻灯片时，幻灯片画布、大纲、注释和幻灯片保留在一个编辑器界面中，而代理仍然可以通过 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}"
+}
+```
+
+## 你可以用它做什么
+
+- **根据提示生成演示文稿。**“为咖啡订阅服务生成 10 张幻灯片的宣传演示文稿，受众是投资者。”
+- **直观地编辑幻灯片** — 双击文本进行编辑，单击气泡菜单的块，使用斜线菜单的 `/` 插入块。
+- **使用人工智能生成图像。**英雄图像、产品模型、插图 - 最好委托给资产，Builder 管理的图像生成准备好在部署后启用，并直接提供程序密钥作为今天的后备。
+- **搜索库存照片和公司徽标。**“查找 stripe.com 的徽标并将其添加到幻灯片 2。”
+- **呈现全屏**，带有键盘导航、自动隐藏控件和演讲者备注。
+- **评论、协作和分享。**多人可以实时编辑同一个牌组。生成公共只读URL或与特定队友共享。
+- **从 PDF 导入。**将 PDF 变成入门套牌 - 代理对其进行解析并布置内容。
+- **从其他格式导入。**导入 PPTX、DOCX、Google Docs、GitHub 存储库或任何 URL 作为起点。导出到 PPTX、Google 幻灯片或 HTML。
+- **应用设计系统。**品牌标记、自定义说明和默认调色板保存为设计系统并应用于新牌组。
+- **恢复早期版本。**每个套牌更改都会有快照；列出或恢复任何先前版本。
+
+## 开始使用
+
+现场演示：[slides.agent-native.com](https://slides.agent-native.com)。
+
+当您打开应用程序时：
+
+1. 点击**新牌组**。
+2. 询问代理：“为咖啡订阅服务生成 10 张幻灯片的推介材料，受众是投资者。”
+3. 观看幻灯片流入。点击任何幻灯片进行编辑，或不断要求客服人员进行优化。
+
+### 有用的提示
+
+- “为咖啡订阅服务生成 10 张幻灯片的推介材料，受众是投资者。”
+- “在幻灯片 3 之后添加定价幻灯片。”
+- “放大此幻灯片上的标题并将强调色更改为绿色。”
+- “为当前幻灯片生成主图像 - 黑暗、简约、电影。”
+- “找到 stripe.com 的徽标并将其添加到幻灯片 2 中。”
+- “将此套牌中所有地方的‘客户’一词替换为‘会员’。”
+- “将此 PDF 概括为 6 张幻灯片。” （附上PDF）
+
+选择幻灯片上的文本，然后按 Cmd+I 使代理聚焦于该选择 — 它将仅对您选择的内容进行操作。
+
+## 对于开发者
+
+本文档的其余部分适用于任何分叉幻灯片模板或扩展它的人。
+
+### 快速入门
+
+从 CLI 创建新的幻灯片应用：
+
+```bash
+npx @agent-native/core@latest create my-slides --standalone --template slides
+cd my-slides
+pnpm install
+pnpm dev
+```
+
+### 主要功能 {#key-features}
+
+**提示牌组生成。**请求牌组，代理流会滑入编辑器，使用您可以自己运行的相同创建和编辑 actions。
+
+**可编辑的幻灯片画布。**内联文本编辑、斜线插入、代码编辑、拖放排序、撤消/重做、注释和演示模式全部位于幻灯片表面。
+
+**导入和导出。**引入 PPTX、DOCX、Google Docs、PDF、URL 和 GitHub 存储库；导出到 PPTX、Google 幻灯片、HTML 或共享链接。
+
+**设计系统和媒体。**保存的品牌系统、图像生成、库存搜索和徽标查找使套牌更接近预期的视觉方向。
+
+**协作和历史记录。**内置实时 Yjs 编辑、线程评论、共享角色和套牌版本快照。
+
+### 与代理合作
+
+代理聊天位于侧边栏中。它可以创建幻灯片、编辑单个幻灯片、生成图像、搜索徽标以及导航 UI - 所有这些都使用您从 CLI 运行的相同 actions。
+
+#### 代理看到的内容
+
+当牌组打开时，代理会自动看到：
+
+- 当前的`deckId`和`slideIndex`。
+- 开放式幻灯片的完整列表。
+- 当前所选幻灯片的 HTML 内容。
+
+这会作为 `current-screen` 块注入到每条消息中，因此代理永远不必猜测“这张幻灯片”的含义。数据来自 `navigation` 应用程序状态密钥，UI 将其写入每次导航。参见`templates/slides/actions/view-screen.ts`。
+
+#### 选择文本进行集中编辑
+
+选择幻灯片上的文本，然后按 Cmd+I 以使代理聚焦于预加载的选择。代理将仅根据您选择的内容采取行动。
+
+#### 聊天中的内联幻灯片预览
+
+代理可以使用框架的嵌入栅栏将实时幻灯片预览直接嵌入到聊天回复中。它通过 `app/routes/slide.tsx` 渲染无边框 iframe，因此您无需离开对话即可看到结果。
+
+### 数据模型
+
+所有牌组数据通过 Drizzle ORM 存储在 SQL 中。架构：`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" }
+  ]
+}
+```
+
+框架共享表（`deck_shares`、`design_system_shares`）将主体映射到每个资源的查看者/编辑者/管理员角色。
+
+#### 套牌
+
+| 列           | 类型 | 注释                                                      |
+| ------------ | ---- | --------------------------------------------------------- |
+| `id`         | 文本 | 主键，例如`deck-1712345-abc`                              |
+| `title`      | 文字 | 牌组标题                                                  |
+| `data`       | 文本 | JSON 斑点：`{ title, slides: [{ id, content, layout }] }` |
+| `created_at` | 文本 | 时间戳                                                    |
+| `updated_at` | 文字 | 时间戳                                                    |
+
+每个牌组还带有标准的 `ownableColumns`（所有者、可见性、共享代币），因此它可以插入框架的共享模型中。
+
+#### 幻灯片评论
+
+| 列                            | 注释                   |
+| ----------------------------- | ---------------------- |
+| `id`                          | 主键                   |
+| `deck_id`                     | 家长平台               |
+| `slide_id`                    | 滑动评论生效           |
+| `thread_id`, `parent_id`      | 线程                   |
+| `content`, `quoted_text`      | 评论正文和可选文本摘录 |
+| `author_email`, `author_name` | 作者                   |
+| `resolved`                    | 布尔标志               |
+
+#### 甲板股
+
+框架提供的共享表（通过 `createSharesTable` 创建）将主体（用户或组织）映射到每个牌组的角色（查看者、编辑者、管理员）。
+
+#### 甲板版本
+
+牌组的时间点快照 - `deck_id`、`title`、`data`（全牌组 JSON）和可选的 `change_label`。由`list-deck-versions` / `restore-deck-version`使用。
+
+#### 设计系统
+
+可重复使用的品牌标记 - `data`（颜色/版式/间距）、`assets`、`custom_instructions` 和 `is_default` 标志。使用 `ownableColumns`，因此设计系统可以按用户或按组织共享。
+
+#### design_system_shares
+
+设计系统的框架共享表，将主体映射到角色（查看者、编辑者、管理员）。
+
+#### deck_share_links
+
+由 `token` 键入的持久公共共享链接快照。每行存储一个 `title`、一个 JSON、`slides` 阵列快照、一个可选的 `aspect_ratio` 和 `created_at`。此处保留共享链接意味着它们可以在服务器重新启动后继续存在并跨无服务器实例工作。
+
+#### 幻灯片结构
+
+`decks.data` 内的每张幻灯片为：
+
+```json
+{
+  "id": "slide-1",
+  "layout": "title",
+  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
+}
+```
+
+`content` 是原始的 HTML — 渲染器 (`app/components/deck/SlideRenderer.tsx`) 提供黑色背景和固定纵横比，而 HTML 提供内部的所有内容。还支持丰富的嵌入：通过 `ExcalidrawSlide.tsx` 的 Excalidraw 图和通过 `MermaidRenderer.tsx` 的 Mermaid 图表。
+
+### 自定义 {#customizing}
+
+幻灯片模板是完全可分叉的。扩展时要注意的关键地方：
+
+#### Actions — `templates/slides/actions/`
+
+每个代理可调用操作都以 TypeScript 文件形式存在于此处。您会经常接触的一些：
+
+- `create-deck.ts` — 从头开始或批量替换新牌组。
+- `add-slide.ts` — 附加一张幻灯片；更喜欢用它来进行流式生成。
+- `update-slide.ts` — 外科手术式查找/替换或全部内容交换。
+- `view-screen.ts` — 用户所看到内容的快照。
+- `generate-image.ts`、`edit-image.ts`、`image-search.ts`、`logo-lookup.ts` — 图像工具。
+- `extract-pdf.ts` — PDF 摄取。
+
+每个操作都会自动安装在 `POST /_agent-native/actions/:name` 上，并且可以从 CLI 作为 `pnpm action <name>` 进行调用。在此处添加新文件以赋予代理新功能。
+
+#### 路线 — `templates/slides/app/routes/`
+
+- `_index.tsx` — 套牌列表。
+- `deck.$id.tsx` — 编辑。
+- `deck.$id_.present.tsx` — 演示模式。
+- `share.$token.tsx` — 公共只读共享页面。
+- `slide.tsx` — 在聊天预览中使用单幻灯片嵌入。
+- `settings.tsx` — 模板设置。
+- `team.tsx` — 组织和团队管理。
+
+#### 编辑器组件 - `templates/slides/app/components/editor/`
+
+大多数 UI 自定义都发生在这里：`SlideEditor.tsx`、`EditorToolbar.tsx`、`EditorSidebar.tsx`、气泡菜单、斜线菜单以及用于图像生成、搜索和历史记录的面板。
+
+#### Skills — `templates/slides/.agents/skills/`
+
+当代理需要修改代码时解释模式的代理skills：
+
+- `create-deck/` — 如何使用幻灯片创建新的幻灯片。
+- `slide-editing/` — 如何编辑单个幻灯片。
+- `deck-management/` — 如何存储和访问套牌。
+- `slide-images/` - 图像生成和搜索工作流程。
+
+#### AGENTS.md
+
+`templates/slides/AGENTS.md` 是代理在每次对话中读取的短路由器。它指向`.agents/skills/`下的skills，并列出了核心规则、应用程序状态契约和技能指数。 `.agents/skills/create-deck/SKILL.md` 中每个布局的精确幻灯片 HTML 模板 - 每当您添加或更改幻灯片布局模式时更新该技能。
+
+#### API路线
+
+对于 actions 不适合的情况（文件上传、流式传输），模板会公开一小组 REST 端点：`GET/POST /api/decks`、`GET/PUT/DELETE /api/decks/:id`。参见`templates/slides/server/routes/api/`。

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

@@ -0,0 +1,222 @@
+---
+title: "视频"
+description: "用于动态图形、产品演示和动态文本的程序化视频工作室。根据提示生成动画并在时间轴上调整它们。"
+---
+
+# 视频
+
+一个程序化视频工作室，用于制作动态图形、产品演示和动态文本视频，这些视频很难手动设置关键帧。要求代理“显示 6 秒的徽标，并在 2 秒后淡入”，它就会构建动画。调整时间、缓动和相机在时间轴上的移动，然后渲染到 MP4 或 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>"
+}
+```
+
+当您打开工作室时，您将在主屏幕上看到作品列表。单击其中一个，您会在顶部看到一个播放器，在底部看到一个时间线，在右侧看到一个属性面板。代理始终知道您打开了哪个组合。
+
+```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}"
+}
+```
+
+## 你可以用它做什么
+
+- **根据提示生成动画。**“添加一张在 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` 中：
+
+```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" }
+  ]
+}
+```
+
+每个表还有一个由 `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`。