@agent-native/core 0.76.5 → 0.76.6

package/docs/content/locales/ja-JP/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>"
+}
+```
+
+デッキを開くと、スライド キャンバス、アウトライン、メモ、フィルムストリップは 1 つのエディター画面に留まり、エージェントは引き続き 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 スライドのピッチデッキを生成します。聴衆は投資家です。」
+- **スライドを視覚的に編集** — テキストをダブルクリックして編集し、バブル メニューのブロックをクリックし、スラッシュ メニューの `/` を使用してブロックを挿入します。
+- **AI を使用して画像を生成します。** ヒーロー画像、製品モックアップ、イラスト - できればアセットに委任し、Builder で管理された画像生成を使用して、展開後すぐに有効にし、今日のフォールバックとしてプロバイダー キーを直接生成します。
+- **ストック写真と会社のロゴを検索します。** 「stripe.com のロゴを見つけて、スライド 2 に追加します。」
+- **キーボード ナビゲーション、自動非表示コントロール、スピーカー ノートを備えた全画面表示**。
+- **コメント、共同作業、共有。** 複数の人が同じデッキをリアルタイムで編集できます。公開読み取り専用 URL を生成するか、特定のチームメイトと共有します。
+- **PDF からインポートします。** PDF をスターター デッキに変えます。エージェントはそれを解析し、コンテンツをレイアウトします。
+- **他の形式からインポートします。** 出発点として、PPTX、DOCX、Google ドキュメント、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 ドキュメント、PDF、URL、GitHub リポジトリを取り込みます。 PPTX、Google スライド、HTML、または共有リンクにエクスポートします。
+
+**デザイン システムとメディア。** 保存されたブランド システム、画像生成、ストック検索、ロゴ検索により、デッキは意図した視覚的方向に近づけられます。
+
+**コラボレーションと履歴。** リアルタイム YJS 編集、スレッド化されたコメント、役割の共有、デッキ バージョンのスナップショットが組み込まれています。
+
+### エージェントとの連携
+
+エージェント チャットはサイドバーにあります。デッキの作成、個々のスライドの編集、画像の生成、ロゴの検索、UI の操作が可能です。これらはすべて、CLI から実行するのと同じ actions を使用します。
+
+#### エージェントに表示されるもの
+
+デッキが開いていると、エージェントは自動的に次の情報を確認します。
+
+- 現在の `deckId` および `slideIndex`。
+- オープンデッキのスライドの完全なリスト。
+- 現在選択されているスライドの HTML コンテンツ。
+
+これは `current-screen` ブロックとしてすべてのメッセージに挿入されるため、エージェントは「このスライド」が何を意味するかを推測する必要はありません。データは、UI がすべてのナビゲーションに書き込む `navigation` アプリケーション状態キーから取得されます。 `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` — 1 つのスライドを追加します。ストリーミング生成にはこれを推奨します。
+- `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 を指し、コア ルール、アプリケーション状態コントラクト、およびスキル インデックスをレイアウトします。すべてのレイアウトの正確なスライド HTML テンプレートは `.agents/skills/create-deck/SKILL.md` にあります。スライド レイアウト パターンを追加または変更するたびに、そのスキルを更新します。
+
+#### API ルート
+
+actions が適切ではない場合 (ファイルのアップロード、ストリーミング)、テンプレートは REST エンドポイントの小さなセット (`GET/POST /api/decks`、`GET/PUT/DELETE /api/decks/:id`) を公開します。 `templates/slides/server/routes/api/` を参照してください。

package/docs/content/locales/ja-JP/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "ビデオ"
+description: "モーション グラフィックス、製品デモ、キネティック テキスト用のプログラマティック ビデオ スタジオ。プロンプトからアニメーションを生成し、タイムライン上で調整します。"
+---
+
+# ビデオ
+
+手動でキーフレームを作成するのが面倒なモーション グラフィックス、製品デモ、キネティック テキスト ビデオなどを作成するためのプログラマティック ビデオ スタジオ。エージェントに「2 秒でフェードインする 6 秒間のロゴ表示」を依頼すると、アニメーションが構築されます。タイムライン上でタイミング、イージング、カメラの動きを調整し、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 秒まで保持されるタイトル カードを追加します。」エージェントがコンポジションを編集します。
+- **タイムラインでタイミングを調整します。** アニメーション トラックをドラッグしてサイズ変更し、フレームをスクラブし、イージング カーブを視覚的に設定します。
+- **カメラをアニメーション化します。** 画面上のツールを使用してパン、ズーム、チルトします。ツールをクリックし、プレビュー内でドラッグすると、キーフレームが自動作成されます。
+- **空の構成またはサンプルから開始します。** テンプレートには、開始する 1 つのコード内構成 (`BlankComposition`) が同梱されています。サンプル構成 — キネティック テキスト、ロゴの表示、パーティクル バースト、インタラクティブな UI デモ、スライドショー — はデータベースからロードされ、独自のものを追加できます。
+- **イージング カーブを視覚的に編集します。** パワー、バック、バウンス、サーキュレーション、エラスティック、エキスポ、サイン、スプリング物理など、30 以上のカーブが同梱されています。
+- **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 に下げてください。」
+- 「イントロループ、1080x1080、6 秒という名前の新しいコンポジションを作成します。」
+- 「ボタン ゾーンにクリック アニメーションを追加し、そこにカーソルをアニメーション化します。」
+- 「このトラックにイーズアウトではなくスプリングイージングを与えます。」
+
+タイムラインでトラックを選択して Cmd+I を押すと、エージェントはその選択を選択します。「これをもっときびきびさせてください」というだけで機能します。
+
+## 開発者向け
+
+このドキュメントの残りの部分は、ビデオ テンプレートをフォークしたり拡張したりする人を対象としています。このテンプレートは他のテンプレートよりもコードフォワードです。すべてのコンポジションは React コンポーネントであり、すべてのアニメーションはトラック上のデータです。
+
+### アーキテクチャ
+
+スタジオで目にするものはすべてコードです。コンポジションは、`app/remotion/compositions/` の React コンポーネントを指す `app/remotion/registry.ts` の `CompositionEntry` です。そのコンポーネント内のすべてのアニメーションは `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 ベースのコンポジション。** ビデオは、SQL ベースのユーザー コンポジションと、ローカル デフォルト用のオプションのコード レジストリを備えた、Remotion ベースの React コンポーネントです。
+
+**タイムラインファーストのアニメーション。** デュレーション トラック、キーフレーム、イージング カーブ、カメラの動き、およびプログラムによるエクスプレッション トラックはすべて、同じコンポジション データを編集します。
+
+**調整可能なモーション システム。** パラメータ、カーソル トラック、インタラクティブ ホバー ゾーン、範囲ナビゲーション、および繰り返し再生により、コードなしで生成されたアニメーションを調整できます。
+
+**レンダリングと永続性。** コンポジション設定、品質、fps、トラック値、およびオーバーライドはコンポジションごとに保持され、リモートを通じて MP4 または WebM にレンダリングされます。
+
+### エージェントとの連携
+
+エージェントは、あなたがどのコンポジションを開いているかを常に知っています。ナビゲーション状態 (`{ view, compositionId }`) はフレームワークの `application_state` テーブルに書き込まれ、`view-screen` アクションはそれと `app/remotion/registry.ts` を指すヒントを返します。どの構成を使用しているかをエージェントに伝える必要はありません。「これ」に基づいて動作するようにエージェントに依頼すれば、動作します。
+
+内部では、エージェントは `navigate`、`save-composition`、`generate-animated-component` のように actions を呼び出します。 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` — `ownableColumns` を使用した再利用可能なブランド トークン (色、タイポグラフィ、間隔、アセット、カスタム指示、`is_default` フラグ)。
+- `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/` です (ユーザー側のスラッグは `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/` — 構成ごとに 1 つの `.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` — 範囲制限付き再生を備えたリモート `<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` を実行します。