@agent-native/core 0.79.1 → 0.79.5

package/corpus/core/docs/content/locales/zh-TW/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'>第三季度董事會更新</h1><span class='wf-pill accent'>標題幻燈片</span><div style='flex:1'></div><button>Preview</button><button>Present</button><button class='primary'>分享</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'>第三季度董事會更新</strong><br/><small>Maya Chen · 首席執行官</small><div style='height:46px'></div><span class='wf-pill'>產品動能</span></div></section><section style='display:flex;flex-direction:column;gap:10px'><div class='wf-card'><strong>幻燈片大綱</strong><div class='wf-box'>1 標題</div><div class='wf-box'>2 議程</div><div class='wf-box'>3 指標</div><div class='wf-box'>4 已發布</div></div><div class='wf-card' style='flex:1'><strong>演講者備注</strong><p class='wf-muted' style='margin:8px 0 0'>以發布進展和留存故事開場。</p></div></section></main><div style='display:grid;grid-template-columns:repeat(5,1fr);gap:8px'><div class='wf-box'>1 標題</div><div class='wf-box'>2 議程</div><div class='wf-box'>3 指標</div><div class='wf-box'>4 已發布</div><div class='wf-box'>5 風險</div></div></div>"
+}
+```
+
+當您開啟幻燈片時，幻燈片畫布、大綱、注釋和幻燈片保留在一個編輯器介面中，而代理仍然可以通過 actions 建立、修改和導覽幻燈片。
+
+```an-diagram title="提示到甲板" summary="請求一副牌，代理會通過您可以從 CLI 調用的相同操作一次滑入一張幻燈片。"
+{
+  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">提示<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\">選取布局</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\">並行、流式傳輸</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\">編輯器實時渲染</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="幻燈片資料模型" 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": "滑動評論繼續存在" },
+        { "name": "thread_id", "type": "text", "note": "螺紋加工" },
+        { "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": "用於恢復的時間點快照",
+      "fields": [
+        { "name": "deck_id", "type": "text", "fk": "decks.id" },
+        { "name": "title", "type": "text" },
+        { "name": "data", "type": "text", "note": "全副牌 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": "持久的公開共用連結快照",
+      "fields": [
+        { "name": "token", "type": "text", "pk": true },
+        { "name": "title", "type": "text" },
+        { "name": "slides", "type": "text", "note": "JSON 幻燈片快照" },
+        { "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/corpus/core/docs/content/locales/zh-TW/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 展示</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>"
+}
+```
+
+當您開啟工作室時，您將在主螢幕上看到作品列表。點選其中一個，您會在頂部看到一個播放器，在底部看到一個時間線，在右側看到一個屬性面板。代理始終知道您開啟了哪個組合。
+
+```an-diagram 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}"
+}
+```
+
+## 你可以用它做什么
+
+- **根據提示生成動畫。**“新增一張在 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="影片資料模型" 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`。