@agent-native/core 0.76.5 → 0.76.6

package/docs/content/locales/hi-IN/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "स्लाइड"
+description: "प्रॉम्प्ट से डेक बनाएं, दृश्य रूप से संपादित करें, और पूर्ण-स्क्रीन प्रस्तुत करें। Google स्लाइड, पिच और पॉवरपॉइंट के लिए एक ओपन-सोर्स प्रतिस्थापन।"
+---
+
+# स्लाइड
+
+प्रॉम्प्ट से पूर्ण प्रेजेंटेशन डेक तैयार करें, स्लाइड्स को दृश्य रूप से संपादित करें, और पूर्ण-स्क्रीन प्रस्तुत करें। एजेंट से "कॉफी सदस्यता सेवा के लिए 10-स्लाइड पिच डेक" के लिए पूछें और इसे सेकंडों में संपादक में स्लाइड-दर-स्लाइड स्ट्रीम करते हुए देखें। Google स्लाइड, पिच और पॉवरपॉइंट के लिए एक ओपन-सोर्स प्रतिस्थापन।
+
+```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 डॉक्स, GitHub रेपो, या किसी URL को आयात करें। PPTX, Google Slides, या 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, URLs, और GitHub रेपो लाएं; PPTX, Google Slides, HTML, या किसी शेयर लिंक पर निर्यात करें।
+
+**डिज़ाइन सिस्टम और मीडिया।** सहेजे गए ब्रांड सिस्टम, छवि निर्माण, स्टॉक खोज और लोगो लुकअप डेक को इच्छित दृश्य दिशा के करीब रखते हैं।
+
+**सहयोग और इतिहास।** रीयल-टाइम Yjs संपादन, थ्रेडेड टिप्पणियाँ, शेयर भूमिकाएँ और डेक संस्करण स्नैपशॉट अंतर्निहित हैं।
+
+### एजेंट के साथ काम करना
+
+एजेंट चैट साइडबार में रहती है। यह डेक बना सकता है, अलग-अलग स्लाइड संपादित कर सकता है, चित्र बना सकता है, लोगो खोज सकता है और UI को नेविगेट कर सकता है - यह सब उसी actions का उपयोग करके किया जा सकता है जिसे आप CLI से चलाएंगे।
+
+#### एजेंट क्या देखता है
+
+जब कोई डेक खुला होता है, तो एजेंट स्वचालित रूप से देखता है:
+
+- वर्तमान `deckId` और `slideIndex`।
+- खुले डेक में स्लाइडों की पूरी सूची।
+- वर्तमान में चयनित स्लाइड की HTML सामग्री।
+
+इसे प्रत्येक संदेश में `current-screen` ब्लॉक के रूप में इंजेक्ट किया जाता है, इसलिए एजेंट को कभी भी यह अनुमान नहीं लगाना पड़ता है कि "इस स्लाइड" का क्या अर्थ है। डेटा `navigation` एप्लिकेशन-स्टेट कुंजी से आता है, जिसे UI प्रत्येक नेविगेशन पर लिखता है। `templates/slides/actions/view-screen.ts` देखें.
+
+#### केंद्रित संपादनों के लिए पाठ का चयन करना
+
+स्लाइड पर टेक्स्ट का चयन करें और पहले से लोड किए गए उस चयन के साथ एजेंट पर ध्यान केंद्रित करने के लिए Cmd+I दबाएं। एजेंट केवल आपके द्वारा चुने गए पर ही कार्य करेगा।
+
+#### चैट में इनलाइन स्लाइड पूर्वावलोकन
+
+एजेंट फ्रेमवर्क के एंबेड फेंस का उपयोग करके लाइव स्लाइड पूर्वावलोकन को सीधे चैट उत्तर में एम्बेड कर सकता है। यह `app/routes/slide.tsx` के माध्यम से एक क्रोमलेस आईफ्रेम प्रस्तुत करता है ताकि आप बातचीत छोड़े बिना परिणाम देख सकें।
+
+### डेटा मॉडल
+
+सभी डेक डेटा 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` द्वारा प्रयुक्त।
+
+#### design_systems
+
+पुन: प्रयोज्य ब्रांड टोकन - `data` (रंग/टाइपोग्राफी/स्पेसिंग), `assets`, `custom_instructions`, और एक `is_default` ध्वज। `ownableColumns` का उपयोग करता है ताकि डिज़ाइन सिस्टम को प्रति-उपयोगकर्ता या प्रति-संगठन साझा किया जा सके।
+
+#### design_system_shares
+
+डिजाइन सिस्टम के लिए फ्रेमवर्क शेयर तालिका, भूमिकाओं के लिए प्रिंसिपलों की मैपिंग (दर्शक, संपादक, व्यवस्थापक)।
+
+#### डेक*शेयर*लिंक्स
+
+`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` के माध्यम से एक्सकैलिड्रा आरेख और `MermaidRenderer.tsx` के माध्यम से मरमेड चार्ट।
+
+### इसे अनुकूलित करना {#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 को इंगित करता है और मुख्य नियम, एप्लिकेशन-स्टेट अनुबंध और कौशल सूचकांक बताता है। हर लेआउट के लिए सटीक स्लाइड 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/hi-IN/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+ कर्व्स भेजे गए - पावर, बैक, बाउंस, सर्क, इलास्टिक, एक्सपो, साइन, प्लस स्प्रिंग फिजिक्स।
+- **कैमरा ज़ूम के दौरान क्रिस्प टेक्स्ट और वैक्टर के लिए 1x, 2x, या 3x सुपरसैंपलिंग पर MP4 या WebM** पर रेंडर करें।
+
+यह अन्य टेम्प्लेट की तुलना में अधिक डेवलपर-स्वाद वाला टूल है - रचनाएँ React घटक हैं, इसलिए पावर उपयोगकर्ता (या एजेंट) स्क्रैच से पूरे नए एनीमेशन प्रकार लिख सकते हैं। लेकिन रोजमर्रा के बदलाव ("टाइपिंग धीमी करें," "कणों की गिनती 12 तक कम करें") सिर्फ चैट हैं।
+
+## आरंभ करना
+
+लाइव डेमो: [videos.agent-native.com](https://videos.agent-native.com).
+
+जब आप स्टूडियो खोलते हैं:
+
+1. होम स्क्रीन से एक रचना चुनें।
+2. एजेंट को आज़माएं: "एक ऐसा लोगो जोड़ें जो 2 सेकंड में फीका पड़ जाए।" टाइमलाइन अपडेट देखें।
+3. रीटाइम के लिए ट्रैक खींचें, कैमरा टूल पर क्लिक करें, प्लेयर को स्क्रब करें।
+
+### उपयोगी संकेत
+
+- "एक शीर्षक कार्ड जोड़ें जो 2 सेकंड में फीका पड़ जाए और 5 सेकंड तक बना रहे।"
+- "फ़्रेम 60 और 90 के बीच लोगो पर 2x ज़ूम करने के लिए कैमरे को बदलें।"
+- "टाइपिंग को धीमा बनाएं - 40% अधिक लंबा।"
+- "कण विस्फोट बहुत सघन है। गिनती घटाकर 12 कर दें।"
+- "इंट्रो-लूप नामक एक नई रचना बनाएं, 1080x1080, 6 सेकंड।"
+- "बटन ज़ोन पर एक क्लिक एनीमेशन जोड़ें और उस पर कर्सर को एनिमेट करें।"
+- "इस ट्रैक को ईज़-आउट के बजाय स्प्रिंग ईज़िंग दें।"
+
+यदि आप टाइमलाइन में एक ट्रैक चुनते हैं और Cmd+I दबाते हैं, तो एजेंट उस चयन को चुनता है - "इसे अधिक तेज़ बनाएं" बस काम करता है।
+
+## डेवलपर्स के लिए
+
+इस दस्तावेज़ का शेष भाग वीडियो टेम्प्लेट बनाने या उसका विस्तार करने वाले किसी भी व्यक्ति के लिए है। यह टेम्प्लेट दूसरों की तुलना में अधिक कोड-फ़ॉरवर्ड है - प्रत्येक रचना एक React घटक है और प्रत्येक एनीमेशन एक ट्रैक पर डेटा है।
+
+### आर्किटेक्चर
+
+स्टूडियो में आप जो कुछ भी देखते हैं वह कोड है। एक रचना `app/remotion/registry.ts` में एक `CompositionEntry` है जो `app/remotion/compositions/` में एक React घटक की ओर इशारा करती है। उस घटक का प्रत्येक एनीमेशन `AnimationTrack` से पढ़ता है ताकि उपयोगकर्ता इसे टाइमलाइन UI में खींच सकें, आकार बदल सकें और पुनः टाइम कर सकें। एजेंट नई रचनाएँ बना सकता है, ट्रैक जोड़ सकता है, धुन आसान कर सकता है, और पूरे React घटकों को लिख सकता है जो रजिस्ट्री में प्लग होते हैं।
+
+स्टूडियो पूर्वावलोकन के लिए रेमोशन के `<Player>` और अंतिम रेंडर के लिए रेमोशन CLI पर चलता है। 30fps पर आउटपुट डिफ़ॉल्ट रूप से 1920x1080 हो जाता है।
+
+### त्वरित शुरुआत
+
+CLI से एक नया वीडियो ऐप तैयार करें:
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+अपने ब्राउज़र में स्टूडियो खोलें, एक रचना बनाएं और रिक्त से प्रारंभ करें। एजेंट से कुछ ऐसा पूछें जैसे "एक लोगो जोड़ें जो 2 सेकंड में फीका पड़ जाए" और यह आपके लिए रचना को संपादित कर देगा।
+
+### मुख्य विशेषताएं
+
+**React-आधारित रचनाएँ।** वीडियो रेमोशन-समर्थित React घटक हैं, जिनमें SQL-समर्थित उपयोगकर्ता रचनाएँ और स्थानीय डिफ़ॉल्ट के लिए एक वैकल्पिक कोड रजिस्ट्री है।
+
+**टाइमलाइन-पहला एनीमेशन।** अवधि ट्रैक, कीफ़्रेम, ईज़िंग कर्व्स, कैमरा मूव्स और प्रोग्रामेटिक एक्सप्रेशन ट्रैक सभी एक ही कंपोज़िशन डेटा को संपादित करते हैं।
+
+**एडजस्टेबल मोशन सिस्टम।** पैरामीटर, कर्सर ट्रैक, इंटरैक्टिव होवर जोन, रेंज नेविगेशन और रिपीट प्लेबैक जेनरेट किए गए एनिमेशन को बिना कोड के ट्यून करने योग्य बनाते हैं।
+
+**रेंडर और दृढ़ता।** रचना सेटिंग्स, गुणवत्ता, एफपीएस, ट्रैक मान और ओवरराइड प्रति रचना बनी रहती हैं और रिमोशन के माध्यम से MP4 या WebM पर प्रस्तुत होती हैं।
+
+### एजेंट के साथ काम करना
+
+एजेंट को हमेशा पता होता है कि आपने कौन सी रचना खोली है। नेविगेशन स्थिति (`{ view, compositionId }`) को फ्रेमवर्क की `application_state` तालिका में लिखा जाता है, और `view-screen` कार्रवाई इसे `app/remotion/registry.ts` पर इंगित करने वाले संकेत के साथ लौटाती है। आपको एजेंट को यह बताने की ज़रूरत नहीं है कि आप किस रचना पर हैं - उसे "इस पर" कार्रवाई करने के लिए कहें और वह ऐसा करेगा।
+
+हुड के तहत एजेंट `navigate`, `save-composition`, और `generate-animated-component` जैसे actions को कॉल करता है। SQL-समर्थित रचना रिकॉर्ड `save-composition` के माध्यम से बनाए या अद्यतन किए जाते हैं; कोड-समर्थित रेमोशन घटक अभी भी `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` - आईडी, शीर्षक, प्रकार, `data` (पूर्ण रचना JSON ब्लॉब), स्वामित्व कॉलम, टाइमस्टैम्प।
+- `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` - बॉयलरप्लेट के साथ एक नई रेमोशन घटक फ़ाइल उत्पन्न करें।
+- `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` - रेंज-बाधित प्लेबैक के साथ रेमोशन `<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` चलाएं।