@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/docs/content/locales/fr-FR/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "Diapositives"
+description: "Générez des présentations à partir d'une invite, modifiez-les visuellement et présentez-les en plein écran. Un remplacement open source de Google Slides, Pitch et PowerPoint."
+---
+
+# Diapositives
+
+Générez des présentations complètes à partir d'une invite, modifiez visuellement les diapositives et présentez-les en plein écran. Demandez à l'agent « un pitch deck de 10 diapositives pour un service d'abonnement au café » et regardez-le diffuser diapositive par diapositive dans l'éditeur en quelques secondes. Un remplacement open source pour Google Slides, Pitch et 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>"
+}
+```
+
+Lorsque vous ouvrez une présentation, le canevas de la diapositive, le plan, les notes et la pellicule restent dans une seule surface d'édition tandis que l'agent peut toujours créer, réviser et parcourir les diapositives via 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}"
+}
+```
+
+## Ce que vous pouvez en faire
+
+- **Générez des présentations à partir d'une invite.** "Générez une présentation de 10 diapositives pour un service d'abonnement au café, le public est constitué d'investisseurs."
+- **Modifiez visuellement les diapositives** : double-cliquez sur le texte à modifier, cliquez sur un bloc pour le menu à bulles, utilisez `/` pour le menu barre oblique pour insérer des blocs.
+- **Générez des images avec l'IA.** Images de héros, maquettes de produits, illustrations — de préférence déléguées aux actifs, avec une génération d'images gérée par Builder prête à être activée une fois déployée et des clés de fournisseur directes comme solution de secours actuelle.
+- **Recherchez des photos et des logos d'entreprise.** "Recherchez le logo de stripe.com et ajoutez-le à la diapositive 2."
+- **Présentez en plein écran** avec navigation au clavier, commandes de masquage automatique et notes du présentateur.
+- **Commentez, collaborez et partagez.** Plusieurs personnes peuvent modifier le même deck en temps réel. Générez un URL public en lecture seule ou partagez-le avec des coéquipiers spécifiques.
+- **Importer depuis PDF.** Transformez un PDF en un deck de démarrage : l'agent l'analyse et présente le contenu.
+- **Importez à partir d'autres formats.** Importez des dépôts PPTX, DOCX, Google Docs, GitHub ou n'importe quel URL comme point de départ. Exportez vers PPTX, Google Slides ou HTML.
+- **Appliquer les systèmes de conception.** Les jetons de marque, les instructions personnalisées et les palettes par défaut sont enregistrés en tant que systèmes de conception et appliqués aux nouveaux decks.
+- **Restaurez les versions antérieures.** Chaque changement de deck est instantané ; répertorier ou restaurer toute version antérieure.
+
+## Démarrer
+
+Démo en direct : [slides.agent-native.com](https://slides.agent-native.com).
+
+Lorsque vous ouvrez l'application :
+
+1. Cliquez sur **Nouveau deck**.
+2. Demandez à l'agent : "Générez un pitch deck de 10 diapositives pour un service d'abonnement au café, le public est constitué d'investisseurs."
+3. Regardez les diapositives diffusées. Cliquez sur n'importe quelle diapositive à modifier ou continuez à demander à l'agent de l'affiner.
+
+### Invites utiles
+
+- "Générez un pitch deck de 10 diapositives pour un service d'abonnement au café, le public est constitué d'investisseurs."
+- "Ajouter une diapositive de tarification après la diapositive 3."
+- "Agrandissez le titre de cette diapositive et changez la couleur d'accentuation en vert."
+- "Générer une image de héros pour la diapositive actuelle : sombre, minimale, cinématographique."
+- "Recherchez le logo de stripe.com et ajoutez-le à la diapositive 2."
+- "Remplacez le mot "clients" par "membres" partout dans ce deck."
+- "Résumez ce PDF sous la forme d'un jeu de 6 diapositives." (joignez le PDF)
+
+Sélectionnez du texte sur une diapositive et appuyez sur Cmd+I pour concentrer l'agent sur cette sélection. Il n'agira que sur ce que vous avez sélectionné.
+
+## Pour les développeurs
+
+Le reste de ce document s'adresse à toute personne qui crée ou étend le modèle Slides.
+
+### Démarrage rapide
+
+Créez une nouvelle application Slides à partir du CLI :
+
+```bash
+npx @agent-native/core@latest create my-slides --standalone --template slides
+cd my-slides
+pnpm install
+pnpm dev
+```
+
+### Fonctionnalités clés {#key-features}
+
+**Génération d'invite vers le deck.** Demandez un deck et l'agent diffuse les diapositives dans l'éditeur en utilisant le même actions de création et de modification que vous pouvez exécuter vous-même.
+
+**Canevas de diapositive modifiable.** L'édition de texte en ligne, les insertions de barres obliques, l'édition de code, l'ordre par glisser-déposer, l'annulation/la restauration, les commentaires et le mode présentation sont tous présents dans la surface du deck.
+
+**Importer et exporter.** Intégrez les dépôts PPTX, DOCX, Google Docs, PDF, URL et GitHub ; exporter vers PPTX, Google Slides, HTML ou un lien de partage.
+
+**Systèmes de conception et médias.** Les systèmes de marque enregistrés, la génération d'images, la recherche de stock et la recherche de logo maintiennent les présentations plus proches de la direction visuelle prévue.
+
+**Collaboration et historique.** L'édition Yjs en temps réel, les commentaires en fil de discussion, les rôles de partage et les instantanés de la version du deck sont intégrés.
+
+### Travailler avec l'agent
+
+Le chat de l'agent se trouve dans la barre latérale. Il peut créer des présentations, éditer des diapositives individuelles, générer des images, rechercher des logos et naviguer dans le UI, le tout en utilisant le même actions que vous exécuteriez à partir du CLI.
+
+#### Ce que voit l'agent
+
+Lorsqu'un deck est ouvert, l'agent voit automatiquement :
+
+- Les `deckId` et `slideIndex` actuels.
+- La liste complète des diapositives dans la présentation ouverte.
+- Le contenu HTML de la diapositive actuellement sélectionnée.
+
+Ceci est injecté dans chaque message sous la forme d'un bloc `current-screen`, de sorte que l'agent n'a jamais à deviner ce que signifie « cette diapositive ». Les données proviennent de la clé d'état de l'application `navigation`, que le UI écrit à chaque navigation. Voir `templates/slides/actions/view-screen.ts`.
+
+#### Sélection de texte pour les modifications ciblées
+
+Sélectionnez du texte sur une diapositive et appuyez sur Cmd+I pour concentrer l'agent avec cette sélection préchargée. L'agent agira uniquement sur ce que vous avez sélectionné.
+
+#### Aperçus des diapositives en ligne dans le chat
+
+L'agent peut intégrer un aperçu de diapositive en direct directement dans une réponse de chat à l'aide de la clôture d'intégration du framework. Il restitue une iframe sans chrome via `app/routes/slide.tsx` afin que vous puissiez voir le résultat sans quitter la conversation.
+
+### Modèle de données
+
+Toutes les données du deck se trouvent dans SQL via Drizzle ORM. Schéma : `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" }
+  ]
+}
+```
+
+Les tables de partages du framework (`deck_shares`, `design_system_shares`) mappent les principaux aux rôles de spectateur/éditeur/administrateur par ressource.
+
+#### ponts
+
+| Colonne      | Tapez | Remarques                                                   |
+| ------------ | ----- | ----------------------------------------------------------- |
+| `id`         | texte | Clé primaire, par ex. `deck-1712345-abc`                    |
+| `title`      | texte | Titre du deck                                               |
+| `data`       | texte | Objet JSON : `{ title, slides: [{ id, content, layout }] }` |
+| `created_at` | texte | Horodatage                                                  |
+| `updated_at` | texte | Horodatage                                                  |
+
+Chaque deck porte également le standard `ownableColumns` (propriétaire, visibilité, jeton de partage) afin qu'il s'intègre dans le modèle de partage du framework.
+
+#### slide_comments
+
+| Colonne                       | Remarques                                           |
+| ----------------------------- | --------------------------------------------------- |
+| `id`                          | Clé primaire                                        |
+| `deck_id`                     | Deck parent                                         |
+| `slide_id`                    | Faites glisser le commentaire en direct             |
+| `thread_id`, `parent_id`      | Enfilage                                            |
+| `content`, `quoted_text`      | Corps du commentaire et extrait de texte facultatif |
+| `author_email`, `author_name` | Auteur                                              |
+| `resolved`                    | Drapeau booléen                                     |
+
+#### deck_shares
+
+Tableau de partages fourni par le framework (créé via `createSharesTable`) qui mappe les principaux (utilisateurs ou organisations) aux rôles (spectateur, éditeur, administrateur) par deck.
+
+#### versions_deck
+
+Instantanés ponctuels d'un deck : `deck_id`, `title`, `data` (plateau complet JSON) et un `change_label` en option. Utilisé par `list-deck-versions` / `restore-deck-version`.
+
+#### systèmes_de conception
+
+Jetons de marque réutilisables : `data` (couleurs/typographie/espacement), `assets`, `custom_instructions` et un drapeau `is_default`. Utilise `ownableColumns` pour que les systèmes de conception puissent être partagés par utilisateur ou par organisation.
+
+#### design_system_shares
+
+Tableau de partages de framework pour les systèmes de conception, mappant les principaux aux rôles (spectateur, éditeur, administrateur).
+
+#### deck_share_links
+
+Instantanés de liens de partage publics persistants saisis par `token`. Chaque ligne stocke un `title`, un instantané de baie JSON `slides`, un `aspect_ratio` en option et un `created_at`. Les liens de partage persistants signifient qu'ils survivent aux redémarrages du serveur et fonctionnent sur des instances sans serveur.
+
+#### Structure des diapositives
+
+Chaque diapositive à l'intérieur de `decks.data` est :
+
+```json
+{
+  "id": "slide-1",
+  "layout": "title",
+  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
+}
+```
+
+`content` est un HTML brut : le moteur de rendu (`app/components/deck/SlideRenderer.tsx`) fournit l'arrière-plan noir et le rapport hauteur/largeur fixe, et le HTML fournit tout ce qu'il contient. L'intégration riche est également prise en charge : diagrammes Excalidraw via `ExcalidrawSlide.tsx` et graphiques Mermaid via `MermaidRenderer.tsx`.
+
+### Le personnaliser {#customizing}
+
+Le modèle Slides est entièrement exécutable. Points clés à surveiller lors de son extension :
+
+#### Actions — `templates/slides/actions/`
+
+Chaque opération appelable par un agent réside ici sous la forme d'un fichier TypeScript. Quelques-uns que vous toucherez souvent :
+
+- `create-deck.ts` – nouveau deck à partir de zéro ou remplacement groupé.
+- `add-slide.ts` : ajouter une diapositive ; préférez cela pour la génération de streaming.
+- `update-slide.ts` — recherche/remplacement chirurgical ou échange de contenu complet.
+- `view-screen.ts` : instantané de ce que l'utilisateur voit.
+- `generate-image.ts`, `edit-image.ts`, `image-search.ts`, `logo-lookup.ts` — outils d'image.
+- `extract-pdf.ts` — Ingestion de PDF.
+
+Chaque action est montée automatiquement sur `POST /_agent-native/actions/:name` et peut être appelée depuis le CLI en tant que `pnpm action <name>`. Ajoutez un nouveau fichier ici pour donner à l'agent une nouvelle fonctionnalité.
+
+#### Itinéraires — `templates/slides/app/routes/`
+
+- `_index.tsx` — liste des decks.
+- `deck.$id.tsx` — l'éditeur.
+- `deck.$id_.present.tsx` — mode présentation.
+- `share.$token.tsx` : page de partage publique en lecture seule.
+- `slide.tsx` : intégration d'une seule diapositive utilisée dans les aperçus du chat.
+- `settings.tsx` — paramètres du modèle.
+- `team.tsx` — gestion de l'organisation et de l'équipe.
+
+#### Composants de l'éditeur – `templates/slides/app/components/editor/`
+
+La plupart des personnalisations du UI se produisent ici : `SlideEditor.tsx`, `EditorToolbar.tsx`, `EditorSidebar.tsx`, les menus à bulles, le menu barre oblique et les panneaux pour la génération d'images, la recherche et l'historique.
+
+#### Skills — `templates/slides/.agents/skills/`
+
+Agent skills qui explique les modèles lorsque l'agent doit modifier le code :
+
+- `create-deck/` – comment créer un nouveau deck avec des diapositives.
+- `slide-editing/` : comment modifier des diapositives individuelles.
+- `deck-management/` – comment les decks sont stockés et accessibles.
+- `slide-images/` – flux de travail de génération et de recherche d'images.
+
+#### AGENTS.md
+
+`templates/slides/AGENTS.md` est le routeur court que l'agent lit à chaque conversation. Il pointe vers le skills sous `.agents/skills/` et expose les règles de base, le contrat d'état d'application et l'indice de compétences. Les modèles de diapositives HTML exacts pour chaque mise en page sont disponibles dans `.agents/skills/create-deck/SKILL.md` : mettez à jour cette compétence chaque fois que vous ajoutez ou modifiez un modèle de mise en page de diapositive.
+
+#### Itinéraires API
+
+Dans les cas où actions ne convient pas (téléchargement de fichiers, streaming), le modèle expose un petit ensemble de points de terminaison REST : `GET/POST /api/decks`, `GET/PUT/DELETE /api/decks/:id`. Voir `templates/slides/server/routes/api/`.

package/corpus/core/docs/content/locales/fr-FR/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "Vidéo"
+description: "Un studio vidéo programmatique pour les animations graphiques, les démonstrations de produits et le texte cinétique. Générez des animations à partir d'une invite et ajustez-les sur une chronologie."
+---
+
+# Vidéo
+
+Un studio vidéo programmatique pour le type d'animations graphiques, de démonstrations de produits et de vidéos de texte cinétique qui sont difficiles à créer manuellement des images clés. Demandez à l'agent "un logo de 6 secondes qui apparaît en fondu au bout de 2 secondes" et il crée l'animation. Ajustez le timing, l'accélération et les mouvements de caméra sur une chronologie, puis effectuez le rendu sur MP4 ou 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>"
+}
+```
+
+Lorsque vous ouvrez le studio, vous verrez une liste de compositions sur l'écran d'accueil. Cliquez dessus et vous obtenez un lecteur en haut, une chronologie en bas et un panneau de propriétés à droite. L'agent sait toujours quelle composition vous avez ouverte.
+
+```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}"
+}
+```
+
+## Ce que vous pouvez en faire
+
+- **Générez des animations à partir d'une invite.** "Ajoutez une carte de titre qui apparaît en fondu toutes les 2 secondes et dure jusqu'à 5 secondes." L'agent modifie la composition.
+- **Ajustez le timing sur une chronologie.** Faites glisser et redimensionnez les pistes d'animation, parcourez les images, définissez visuellement les courbes d'accélération.
+- **Animez la caméra.** Effectuez des panoramiques, des zooms et des inclinaisons avec les outils à l'écran. Cliquez sur l'outil, faites glisser dans l'aperçu et une image clé est créée automatiquement.
+- **Partez d'une composition vierge ou d'un exemple.** Le modèle contient une composition intégrée au code (`BlankComposition`) à partir de laquelle commencer ; exemples de compositions — texte cinétique, révélations de logo, éclats de particules, démos interactives UI, diaporamas — chargez-les à partir de la base de données et vous pouvez ajouter les vôtres.
+- **Modifiez visuellement les courbes d'assouplissement.** Plus de 30 courbes livrées : puissance, retour, rebond, circulation, élastique, expo, sinus et physique du ressort.
+- **Rendu au format MP4 ou WebM** avec un suréchantillonnage 1x, 2x ou 3x pour un texte et des vecteurs nets pendant le zoom de la caméra.
+
+Il s'agit davantage d'un outil destiné aux développeurs que d'autres modèles : les compositions sont des composants React, afin que les utilisateurs expérimentés (ou l'agent) puissent écrire de tout nouveaux types d'animation à partir de zéro. Mais les ajustements quotidiens (« ralentir la frappe », « réduire le nombre de particules à 12 ») ne sont que du bavardage.
+
+## Démarrer
+
+Démo en direct : [videos.agent-native.com](https://videos.agent-native.com).
+
+Lorsque vous ouvrez le studio :
+
+1. Choisissez une composition sur l'écran d'accueil.
+2. Essayez l'agent : "ajoutez un logo qui apparaît en fondu au bout de 2 secondes". Regardez la mise à jour de la chronologie.
+3. Faites glisser les pistes pour les resynchroniser, cliquez sur l'outil Caméra, parcourez le lecteur.
+
+### Invites utiles
+
+- "Ajoutez une carte de titre qui apparaît en fondu toutes les 2 secondes et reste en place jusqu'à 5 secondes."
+- "Changez la caméra pour zoomer 2x sur le logo entre les images 60 et 90."
+- "Rend la saisie plus lente — 40 % plus longue."
+- "L'éclatement de particules est trop dense. Réduisez le compte à 12."
+- "Créez une nouvelle composition appelée intro-loop, 1080x1080, 6 secondes."
+- "Ajoutez une animation de clic sur la zone du bouton et animez-y le curseur."
+- "Donnez à ce morceau un assouplissement printanier au lieu d'un relâchement."
+
+Si vous sélectionnez une piste dans la timeline et appuyez sur Cmd+I, l'agent reprend cette sélection : "rendre celle-ci plus vive" fonctionne tout simplement.
+
+## Pour les développeurs
+
+Le reste de ce document s'adresse à toute personne qui crée le modèle vidéo ou l'étend. Ce modèle est plus orienté code que les autres : chaque composition est un composant React et chaque animation est une donnée sur une piste.
+
+### Architecture
+
+Tout ce que vous voyez dans le studio est du code. Une composition est un `CompositionEntry` dans `app/remotion/registry.ts` qui pointe vers un composant React dans `app/remotion/compositions/`. Chaque animation de ce composant est lue à partir d'un `AnimationTrack` afin que les utilisateurs puissent la faire glisser, la redimensionner et la resynchroniser dans la chronologie UI. L'agent peut créer de nouvelles compositions, ajouter des pistes, régler l'assouplissement et écrire des composants React entiers qui se connectent au registre.
+
+Le studio fonctionne sur le `<Player>` de Remotion pour la prévisualisation et sur le Remotion CLI pour le rendu final. La sortie par défaut est 1 920 x 1 080 à 30 ips.
+
+### Démarrage rapide
+
+Élaborez une nouvelle application vidéo à partir du CLI :
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+Ouvrez le studio dans votre navigateur, créez une composition et repartez de zéro. Demandez à l'agent quelque chose comme "ajouter un logo qui apparaît en fondu au bout de 2 secondes" et il modifiera la composition pour vous.
+
+### Fonctionnalités clés
+
+**Compositions basées sur React.** Les vidéos sont des composants React basés sur Remotion, avec des compositions utilisateur basées sur SQL et un registre de code facultatif pour les valeurs par défaut locales.
+
+**Animation basée sur la chronologie.** Les pistes de durée, les images clés, les courbes d'accélération, les mouvements de caméra et les pistes d'expression programmatique modifient tous les mêmes données de composition.
+
+**Systèmes de mouvement réglables.** Les paramètres, les pistes de curseur, les zones de survol interactives, la navigation par plage et la lecture répétée rendent les animations générées réglables sans code.
+
+**Rendu et persistance.** Les paramètres de composition, la qualité, les images par seconde, les valeurs de suivi et les remplacements persistent par composition et sont rendus sur MP4 ou WebM via Remotion.
+
+### Travailler avec l'agent
+
+L'agent sait toujours quelle composition vous avez ouverte. L'état de navigation (`{ view, compositionId }`) est écrit dans la table `application_state` du framework, et l'action `view-screen` le renvoie plus un indice pointant vers `app/remotion/registry.ts`. Vous n'êtes pas obligé de dire à l'agent à quelle composition vous appartenez : demandez-lui d'agir sur "celle-ci" et il le fera.
+
+Sous le capot, l'agent appelle actions comme `navigate`, `save-composition` et `generate-animated-component`. Les enregistrements de composition basés sur SQL sont créés ou mis à jour via `save-composition` ; Les composants Remotion basés sur du code sont toujours présents dans `app/remotion/compositions/*.tsx` et sont enregistrés dans `app/remotion/registry.ts`.
+
+### Modèle de données
+
+Le schéma côté serveur est dans `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" }
+  ]
+}
+```
+
+Chaque table dispose également d'une table de partages de framework correspondante (`composition_shares`, `design_system_shares`, `folder_shares`) produite par `createSharesTable()`.
+
+- `compositions` : identifiant, titre, type, `data` (composition complète JSON blob), colonnes de propriété, horodatages.
+- `composition_shares` — attributions d'actions standard produites par `createSharesTable()`.
+- `design_systems` — jetons de marque réutilisables (couleurs, typographie, espacement, éléments, instructions personnalisées, drapeau `is_default`) avec `ownableColumns`.
+- `design_system_shares` — attribution de parts pour les systèmes de conception.
+- `folders` — dossiers emboîtables pour l'organisation de la bibliothèque, avec `ownableColumns`.
+- `folder_shares` – octrois de partage pour les dossiers.
+- `folder_memberships` — jointure plusieurs-à-plusieurs entre un `folder_id` et un `composition_id`.
+
+### Dossiers et systèmes de conception
+
+Les compositions peuvent être organisées en dossiers et stylisées avec des systèmes de conception. Actions : `create-folder`, `rename-folder`, `delete-folder`, `move-composition-to-folder`. Système de conception actions : `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `set-default-design-system`, `apply-design-system`, `analyze-brand-assets`. Importer actions : `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF).
+
+Le registre dans `app/remotion/registry.ts` est la source de vérité dans le code pour ce qui est livré avec le modèle. La table SQL stocke les compositions et les remplacements créés par l'utilisateur. L'état du studio (modifications de piste par composition, remplacements d'accessoires, paramètres de composition) est mis en miroir sur `localStorage` sous `videos-tracks:<id>`, `videos-props:<id>` et `videos-comp-settings:<id>`, et fusionné en profondeur dans les valeurs par défaut du registre au chargement.
+
+Formes principales TypeScript (`app/types.ts`) :
+
+- `AnimationTrack` — `id`, `label`, `startFrame`, `endFrame`, `easing`, `animatedProps[]`.
+- `AnimatedProp` — `property`, `from`, `to`, `unit`, plus `keyframes`, `programmatic`, `description`, `codeSnippet`, `parameters`, `parameterValues` en option.
+- `CompositionEntry` — `id`, `title`, `description`, `component`, `durationInFrames`, `fps`, `width`, `height`, `defaultProps`, `tracks`.
+
+Les compositions sont privées par défaut. La visibilité peut être `private`, `org` ou `public`, et les attributions de partage donnent des rôles `viewer`, `editor` ou `admin` – câblés via la primitive de partage du framework.
+
+### Le personnaliser
+
+Le dossier du modèle est `templates/videos/` (le slug destiné à l'utilisateur est `video`, mais le dossier est au pluriel).
+
+**Actions** — `templates/videos/actions/`
+
+- `view-screen.ts` : renvoie l'état de navigation actuel de l'agent.
+- `navigate.ts` : accédez à une composition (`--compositionId <id>`) ou à la vue d'accueil (`--view home`).
+- `save-composition.ts` : créez ou mettez à jour un enregistrement de composition basé sur SQL.
+- `generate-animated-component.ts` — génère un nouveau fichier de composant Remotion avec un passe-partout.
+- `validate-compositions.ts` — vérifiez toutes les compositions enregistrées pour déceler des problèmes structurels.
+- `list-compositions.ts`, `get-composition.ts`, `update-composition.ts`, `delete-composition.ts` — lire, mettre à jour et supprimer les enregistrements de composition sauvegardés sur SQL.
+
+**Itinéraires** — `templates/videos/app/routes/`
+
+- `_index.tsx` — studio à domicile ; restitue le shell et la liste de composition.
+- `c.$compositionId.tsx` — éditeur de composition (timeline, lecteur, panneau de propriétés).
+- `components.tsx` — navigateur de bibliothèques de composants.
+- `team.tsx` — gestion d'équipe.
+
+**Internes de la rémotion** — `templates/videos/app/remotion/`
+
+- `registry.ts` — la liste de composition faisant autorité.
+- `compositions/` — un `.tsx` par composition, plus un baril `index.ts`.
+- `trackAnimation.ts` — `trackProgress`, `getPropValue`, `findTrack`, `getPropValueKeyframed`.
+- `CameraHost.tsx` : encapsule le contenu de la composition avec la transformation de la caméra.
+- `hooks/`, `ui-components/`, `components/` — assistants d'éléments interactifs, rendu du curseur, wrappers d'éléments animés.
+
+**Studio UI** — `templates/videos/app/components/`
+
+- `Timeline.tsx` — la chronologie entièrement contrôlée (`viewStart` / `viewEnd` ne possèdent aucun état en interne).
+- `VideoPlayer.tsx` — Wrapper Remotion `<Player>` avec lecture limitée en plage.
+- `TrackPropertiesPanel.tsx`, `CompSettingsEditor.tsx`, `PropsEditor.tsx` — les panneaux latéraux droits.
+- `CameraToolbar.tsx`, `CameraControls.tsx` : outils de caméra et commandes numériques.
+
+**Instructions de l'agent** — `templates/videos/AGENTS.md` est le guide détaillé que lit l'agent. Il couvre la règle d'animation en tant que piste, le système de caméra, le système de curseur, les unités de filtrage CSS, l'enregistrement des composants interactifs, l'espacement UI et les listes de contrôle pour la création ou l'édition de compositions.
+
+**Skills** — `templates/videos/.agents/skills/`
+
+- `composition-management/SKILL.md` — comment créer et enregistrer des compositions.
+- `animation-tracks/SKILL.md` — comment éditer des pistes et des accessoires animés.
+- Plus le cadre standard skills : `actions`, `self-modifying-code`, `delegate-to-agent`, `storing-data`, `security`, `frontend-design`, `create-skill`, `capture-learnings`.
+
+Pour ajouter une nouvelle composition, suivez la liste de contrôle dans `AGENTS.md` : créez le composant, déclarez `FALLBACK_TRACKS`, utilisez `findTrack` / `trackProgress` / `getPropValue` (ne codez jamais de frames en dur), exportez depuis `compositions/index.ts`, ajoutez un `CompositionEntry` au registre et exécutez `pnpm typecheck`.