@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/docs/content/locales/ar-SA/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 repos أو أي 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 Docs وملفات 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 لتركيز الوكيل مع هذا التحديد الذي تم تحميله مسبقًا. سيتصرف الوكيل فقط بناءً على ما حددته.
+
+#### معاينات الشرائح المضمنة في الدردشة
+
+يمكن للوكيل تضمين معاينة الشريحة المباشرة مباشرة في رد الدردشة باستخدام سياج التضمين الخاص بإطار العمل. فهو يعرض إطار iframe بدون كروم عبر `app/routes/slide.tsx` حتى تتمكن من رؤية النتيجة دون مغادرة المحادثة.
+
+### نموذج البيانات
+
+تعيش جميع بيانات سطح السفينة في SQL عبر Drizzle ORM. المخطط: `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 كل شيء بالداخل. يتم دعم التضمين الغني أيضًا: مخططات Excalidraw عبر `ExcalidrawSlide.tsx` ومخططات Mermaid عبر `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` هو جهاز التوجيه القصير الذي يقرأه الوكيل في كل محادثة. ويشير إلى skills ضمن `.agents/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/corpus/core/docs/content/locales/ar-SA/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "فيديو"
+description: "استديو فيديو برمجي للرسومات المتحركة والعروض التوضيحية للمنتجات والنص الحركي. قم بإنشاء رسوم متحركة من موجه وضبطها على مخطط زمني."
+---
+
+# فيديو
+
+استوديو فيديو برمجي لنوع الرسومات المتحركة والعروض التوضيحية للمنتج ومقاطع الفيديو النصية الحركية التي تمثل صعوبة في استخدام الإطارات الرئيسية يدويًا. اطلب من الوكيل "إظهار شعار مدته 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}"
+}
+```
+
+## ما يمكنك فعله به
+
+- **إنشاء رسوم متحركة من المطالبة.** "أضف بطاقة عنوان تتلاشى خلال ثانيتين وتستمر حتى 5." يقوم الوكيل بتحرير التركيبة.
+- **ضبط التوقيت على مخطط زمني.** اسحب مسارات الرسوم المتحركة وقم بتغيير حجمها، وتصفح الإطارات، واضبط منحنيات التخفيف بشكل مرئي.
+- **تحريك الكاميرا.** التحريك والتكبير/التصغير والإمالة باستخدام الأدوات التي تظهر على الشاشة. انقر على الأداة، واسحب للمعاينة، وسيتم إنشاء الإطار الرئيسي تلقائيًا.
+- **ابدأ من تركيبة فارغة أو مثال.** يشحن القالب تركيبة واحدة في التعليمات البرمجية (`BlankComposition`) للبدء منها؛ يتم تحميل أمثلة التراكيب - النص الحركي، وكشف الشعار، ورشقات الجسيمات، وعروض UI التفاعلية، وعروض الشرائح - من قاعدة البيانات، ويمكنك إضافة ما تريده.
+- **تعديل المنحنيات المخففة بصريًا.** تم شحن أكثر من 30 منحنيًا - الطاقة، والرجوع، والارتداد، والدائرة، والمرونة، والمعرض، والجيب، بالإضافة إلى فيزياء الربيع.
+- **العرض إلى MP4 أو WebM** بمعدل 1x أو 2x أو 3x للحصول على نص واضح ومتجهات أثناء تكبير الكاميرا.
+
+تعد هذه أداة خاصة بالمطورين أكثر من القوالب الأخرى - فالتركيبات عبارة عن مكونات React، لذا يمكن للمستخدمين المتميزين (أو الوكيل) كتابة أنواع رسوم متحركة جديدة بالكامل من البداية. لكن التعديلات اليومية ("جعل الكتابة أبطأ"، "خفض عدد الجسيمات إلى 12") هي مجرد دردشة.
+
+## البدء
+
+عرض توضيحي مباشر: [videos.agent-native.com](https://videos.agent-native.com).
+
+عند فتح الاستوديو:
+
+1. اختر مقطوعة موسيقية من الشاشة الرئيسية.
+2. جرّب الوكيل: "أضف كشفًا للشعار يختفي خلال ثانيتين." شاهد تحديث الجدول الزمني.
+3. اسحب المسارات لإعادة الوقت، وانقر على أداة الكاميرا، وقم بمسح المشغل.
+
+### مطالبات مفيدة
+
+- "أضف بطاقة عنوان تتلاشى خلال ثانيتين وتستمر حتى 5."
+- "قم بتغيير الكاميرا لتكبير الشعار مرتين بين الإطارات 60 و90."
+- "اجعل عملية الكشف عن الكتابة أبطأ - 40% أطول."
+- "انفجار الجسيمات كثيف للغاية. قم بإسقاط العدد إلى 12."
+- "قم بإنشاء تركيبة جديدة تسمى حلقة المقدمة، 1080x1080، 6 ثوانٍ."
+- "أضف رسمًا متحركًا للنقر على منطقة الزر وقم بتحريك المؤشر إليه."
+- "امنح هذا المسار تخفيفًا ربيعيًا بدلاً من التخفيف."
+
+إذا قمت بتحديد مسار في المخطط الزمني وضغطت على Cmd+I، فسيلتقط الوكيل هذا التحديد - فقط "اجعل هذا المسار أكثر سرعة".
+
+## للمطورين
+
+باقي هذا المستند مخصص لأي شخص يقوم بتعديل قالب الفيديو أو توسيعه. يعد هذا القالب أكثر قابلية لإعادة توجيه التعليمات البرمجية من القوالب الأخرى — كل مقطوعة موسيقية عبارة عن مكون React وكل رسم متحرك عبارة عن بيانات على مسار.
+
+### الهندسة المعمارية
+
+كل ما تراه في الاستوديو هو رمز. التركيب هو `CompositionEntry` في `app/remotion/registry.ts` والذي يشير إلى مكون React في `app/remotion/compositions/`. تتم قراءة كل رسم متحرك في هذا المكون من `AnimationTrack` حتى يتمكن المستخدمون من سحبه وتغيير حجمه وإعادة توقيته في المخطط الزمني UI. يمكن للوكيل إنشاء مقطوعات موسيقية جديدة وإضافة مسارات وتخفيف الضبط وكتابة مكونات React بالكامل التي يتم توصيلها بالسجل.
+
+يعمل الاستوديو على `<Player>` الخاص بـ Remotion للمعاينة وRemotion CLI للعرض النهائي. يكون الإخراج الافتراضي هو 1920 × 1080 بمعدل 30 إطارًا في الثانية.
+
+### بداية سريعة
+
+دعم تطبيق فيديو جديد من CLI:
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+افتح الاستوديو في متصفحك، وقم بإنشاء مقطوعة موسيقية، وابدأ من فارغ. اطلب من الوكيل شيئًا مثل "أضف شعارًا يظهر ويختفي خلال ثانيتين" وسيقوم بتحرير التركيبة نيابةً عنك.
+
+### الميزات الرئيسية
+
+**المقطوعات المستندة إلى React.** مقاطع الفيديو هي مكونات React مدعومة بالحركة، مع مؤلفات مستخدم مدعومة بـ SQL وسجل رمز اختياري للإعدادات الافتراضية المحلية.
+
+**الرسوم المتحركة التي تعطي الأولوية للمخطط الزمني.** تعمل مسارات المدة والإطارات الرئيسية ومنحنيات التخفيف وحركات الكاميرا ومسارات التعبير الآلي على تحرير نفس بيانات التركيب.
+
+**أنظمة الحركة القابلة للتعديل.** المعلمات، ومسارات المؤشر، ومناطق التمرير التفاعلية، والتنقل عبر النطاق، والتشغيل المتكرر تجعل الرسوم المتحركة التي تم إنشاؤها قابلة للضبط بدون تعليمات برمجية.
+
+**العرض والثبات.** تستمر إعدادات التركيب والجودة وعدد الإطارات في الثانية وقيم المسار والتجاوزات لكل تركيبة ويتم عرضها على MP4 أو WebM من خلال Remotion.
+
+### العمل مع الوكيل
+
+يعرف الوكيل دائمًا التركيبة التي قمت بفتحها. تتم كتابة حالة التنقل (`{ 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" }
+  ]
+}
+```
+
+يحتوي كل جدول أيضًا على جدول مشاركات إطار عمل مطابق (`composition_shares`، `design_system_shares`، `folder_shares`) من إنتاج `createSharesTable()`.
+
+- `compositions` — المعرف، العنوان، النوع، `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 بتخزين التركيبات والتجاوزات التي أنشأها المستخدم. يتم عكس حالة الاستوديو (عمليات تحرير المسار لكل مقطوعة موسيقية، وتجاوزات الخصائص، وإعدادات التركيب) على `localStorage` ضمن `videos-tracks:<id>`، و`videos-props:<id>`، و`videos-comp-settings:<id>`، ويتم دمجها مرة أخرى في إعدادات التسجيل الافتراضية عند التحميل.
+
+الأشكال الأساسية 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/` — `.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`.