@agent-native/core 0.76.5 → 0.76.6

package/docs/content/locales/de-DE/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "Folien"
+description: "Generieren Sie Decks aus einer Eingabeaufforderung, bearbeiten Sie sie visuell und präsentieren Sie sie im Vollbildmodus. Ein Open-Source-Ersatz für Google Slides, Pitch und PowerPoint."
+---
+
+# Folien
+
+Generieren Sie vollständige Präsentationsdecks aus einer Eingabeaufforderung, bearbeiten Sie Folien visuell und präsentieren Sie sie im Vollbildmodus. Bitten Sie den Agenten um „ein Pitch-Deck mit 10 Folien für einen Kaffee-Abonnementdienst“ und sehen Sie zu, wie es in Sekundenschnelle Folie für Folie in den Editor gestreamt wird. Ein Open-Source-Ersatz für Google Slides, Pitch und 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>"
+}
+```
+
+Wenn Sie ein Deck öffnen, bleiben die Folienleinwand, die Gliederung, die Notizen und der Filmstreifen auf einer Editoroberfläche, während der Agent weiterhin Folien erstellen, überarbeiten und durch actions navigieren kann.
+
+```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}"
+}
+```
+
+## Was Sie damit machen können
+
+- **Decks aus einer Eingabeaufforderung generieren.** „Erstellen Sie ein 10-Folien-Pitch-Deck für einen Kaffeeabonnementdienst. Zielgruppe sind Investoren.“
+- **Folien visuell bearbeiten** – Doppelklicken Sie auf den zu bearbeitenden Text, klicken Sie auf einen Block für das Blasenmenü und verwenden Sie `/` für das Schrägstrichmenü, um Blöcke einzufügen.
+- **Generieren Sie Bilder mit KI.** Heldenbilder, Produktmodelle, Illustrationen – vorzugsweise an Assets delegiert, wobei die von Builder verwaltete Bildgenerierung bereit ist, einmal bereitgestellte und direkte Anbieterschlüssel als heutiges Ausweichmodell zu ermöglichen.
+- **Suchen Sie nach Stockfotos und Firmenlogos.** „Suchen Sie das Logo für stripe.com und fügen Sie es zu Folie 2 hinzu.“
+- **Präsentation im Vollbildmodus** mit Tastaturnavigation, Steuerelementen zum automatischen Ausblenden und Sprechernotizen.
+- **Kommentieren, zusammenarbeiten und teilen.** Mehrere Personen können dasselbe Deck in Echtzeit bearbeiten. Generieren Sie ein öffentliches, schreibgeschütztes URL oder teilen Sie es mit bestimmten Teamkollegen.
+- **Import aus PDF.** Verwandeln Sie einen PDF in ein Starter-Deck – der Agent analysiert es und legt den Inhalt dar.
+- **Import aus anderen Formaten.** Importieren Sie PPTX, DOCX, Google Docs, GitHub-Repos oder ein beliebiges URL als Ausgangspunkt. Export nach PPTX, Google Slides oder HTML.
+- **Designsysteme anwenden.** Markentoken, benutzerdefinierte Anweisungen und Standardpaletten werden als Designsysteme gespeichert und auf neue Decks angewendet.
+- **Frühere Versionen wiederherstellen.** Bei jedem Deckwechsel wird ein Snapshot erstellt; Alle früheren Versionen auflisten oder wiederherstellen.
+
+## Erste Schritte
+
+Live-Demo: [slides.agent-native.com](https://slides.agent-native.com).
+
+Wenn Sie die App öffnen:
+
+1. Klicken Sie auf **Neues Deck**.
+2. Fragen Sie den Agenten: „Erstellen Sie ein 10-Folien-Pitch-Deck für einen Kaffee-Abonnementdienst. Zielgruppe sind Investoren.“
+3. Sehen Sie sich die eingehenden Folien an. Klicken Sie auf eine beliebige Folie, um sie zu bearbeiten, oder bitten Sie den Agenten weiterhin um eine Verfeinerung.
+
+### Nützliche Eingabeaufforderungen
+
+- „Erstellen Sie ein 10-Folien-Pitch-Deck für einen Kaffee-Abonnementdienst. Zielgruppe sind Investoren.“
+- „Fügen Sie nach Folie 3 eine Preisfolie hinzu.“
+- „Vergrößern Sie den Titel dieser Folie und ändern Sie die Akzentfarbe in Grün.“
+- „Generieren Sie ein Heldenbild für die aktuelle Folie – dunkel, minimalistisch, filmisch.“
+- „Suchen Sie das Logo für stripe.com und fügen Sie es zu Folie 2 hinzu.“
+- „Ersetzen Sie überall in diesem Deck das Wort ‚Kunden‘ durch ‚Mitglieder‘.“
+- "Fassen Sie dieses PDF als 6-Folien-Deck zusammen." (PDF anbringen)
+
+Wählen Sie Text auf einer Folie aus und drücken Sie Befehl+I, um den Agenten mit dieser Auswahl zu fokussieren – er wird nur auf das reagieren, was Sie ausgewählt haben.
+
+## Für Entwickler
+
+Der Rest dieses Dokuments richtet sich an alle, die die Folienvorlage verzweigen oder erweitern.
+
+### Schnellstart
+
+Erstellen Sie eine neue Folien-App aus CLI:
+
+```bash
+npx @agent-native/core@latest create my-slides --standalone --template slides
+cd my-slides
+pnpm install
+pnpm dev
+```
+
+### Hauptfunktionen {#key-features}
+
+**Prompt-to-Deck-Generierung.** Fragen Sie nach einem Deck, und der Agent streamt Folien in den Editor, wobei er dieselben Erstellungs- und Bearbeitungsfunktionen verwendet, die Sie selbst ausführen können.
+
+**Bearbeitbare Folienleinwand.** Inline-Textbearbeitung, Schrägstricheinfügungen, Codebearbeitung, Drag-and-Drop-Reihenfolge, Rückgängigmachen/Wiederholen, Kommentare und Präsentationsmodus – alles live in der Deckoberfläche.
+
+**Importieren und Exportieren.** Einbinden von PPTX-, DOCX-, Google Docs-, PDFs-, URLs- und GitHub-Repos; Export nach PPTX, Google Slides, HTML oder einen Freigabelink.
+
+**Designsysteme und Medien.** Gespeicherte Markensysteme, Bildgenerierung, Aktiensuche und Logosuche halten Decks näher an der beabsichtigten visuellen Ausrichtung.
+
+**Zusammenarbeit und Verlauf.** Echtzeit-Yjs-Bearbeitung, Thread-Kommentare, gemeinsame Rollen und Deck-Versions-Snapshots sind integriert.
+
+### Zusammenarbeit mit dem Agenten
+
+Der Agenten-Chat befindet sich in der Seitenleiste. Es kann Decks erstellen, einzelne Folien bearbeiten, Bilder generieren, Logos suchen und im UI navigieren – alles mit demselben actions, den Sie vom CLI aus ausführen würden.
+
+#### Was der Agent sieht
+
+Wenn ein Deck geöffnet ist, sieht der Agent automatisch Folgendes:
+
+- Der aktuelle `deckId` und `slideIndex`.
+- Die vollständige Liste der Folien im Open Deck.
+- Der HTML-Inhalt der aktuell ausgewählten Folie.
+
+Dies wird als `current-screen`-Block in jede Nachricht eingefügt, sodass der Agent nie raten muss, was „diese Folie“ bedeutet. Die Daten stammen aus dem `navigation`-Anwendungsstatusschlüssel, den der UI bei jeder Navigation schreibt. Siehe `templates/slides/actions/view-screen.ts`.
+
+#### Text für fokussierte Bearbeitungen auswählen
+
+Wählen Sie Text auf einer Folie aus und drücken Sie Befehl+I, um den Agenten mit dieser vorinstallierten Auswahl zu fokussieren. Der Agent reagiert nur auf das, was Sie ausgewählt haben.
+
+#### Inline-Folienvorschau im Chat
+
+Der Agent kann über den Einbettungszaun des Frameworks eine Live-Folienvorschau direkt in eine Chat-Antwort einbetten. Es rendert über `app/routes/slide.tsx` einen chromlosen Iframe, sodass Sie das Ergebnis sehen können, ohne die Konversation zu verlassen.
+
+### Datenmodell
+
+Alle Deckdaten befinden sich in SQL über Drizzle ORM. Schema: `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" }
+  ]
+}
+```
+
+Framework-Freigabetabellen (`deck_shares`, `design_system_shares`) ordnen Prinzipale den Viewer-/Editor-/Administratorrollen pro Ressource zu.
+
+#### Decks
+
+| Spalte       | Typ  | Notizen                                                   |
+| ------------ | ---- | --------------------------------------------------------- |
+| `id`         | Text | Primärschlüssel, z.B. `deck-1712345-abc`                  |
+| `title`      | Text | Deck-Titel                                                |
+| `data`       | Text | JSON-Blob: `{ title, slides: [{ id, content, layout }] }` |
+| `created_at` | Text | Zeitstempel                                               |
+| `updated_at` | Text | Zeitstempel                                               |
+
+Jedes Deck verfügt außerdem über das Standard-`ownableColumns` (Eigentümer, Sichtbarkeit, Freigabe-Token), sodass es in das Freigabemodell des Frameworks passt.
+
+#### Folienkommentare
+
+| Spalte                        | Notizen                                 |
+| ----------------------------- | --------------------------------------- |
+| `id`                          | Primärschlüssel                         |
+| `deck_id`                     | Übergeordnetes Deck                     |
+| `slide_id`                    | Slide, der Kommentar lebt weiter        |
+| `thread_id`, `parent_id`      | Einfädeln                               |
+| `content`, `quoted_text`      | Kommentartext und optionaler Textauszug |
+| `author_email`, `author_name` | Autor                                   |
+| `resolved`                    | Boolesches Flag                         |
+
+#### deck_shares
+
+Vom Framework bereitgestellte Freigabetabelle (erstellt über `createSharesTable`), die Prinzipale (Benutzer oder Organisationen) Rollen (Betrachter, Herausgeber, Administrator) pro Deck zuordnet.
+
+#### deck_versions
+
+Point-in-Time-Schnappschüsse eines Decks – `deck_id`, `title`, `data` (vollständiges Deck JSON) und ein optionales `change_label`. Wird von `list-deck-versions` / `restore-deck-version` verwendet.
+
+#### design_systems
+
+Wiederverwendbare Markentoken – `data` (Farben/Typografie/Abstand), `assets`, `custom_instructions` und eine `is_default`-Flagge. Verwendet `ownableColumns`, sodass Designsysteme pro Benutzer oder pro Organisation gemeinsam genutzt werden können.
+
+#### design_system_shares
+
+Framework-Freigabetabelle für Designsysteme, Zuordnung von Prinzipalen zu Rollen (Betrachter, Editor, Administrator).
+
+#### deck_share_links
+
+Persistente öffentliche Freigabe-Link-Snapshots, verschlüsselt durch `token`. In jeder Zeile werden ein `title`, ein JSON, ein `slides`-Array-Snapshot, ein optionaler `aspect_ratio` und ein `created_at` gespeichert. Persistente Freigabelinks bedeuten hier, dass sie Serverneustarts überstehen und über serverlose Instanzen hinweg funktionieren.
+
+#### Folienstruktur
+
+Jede Folie in `decks.data` ist:
+
+```json
+{
+  "id": "slide-1",
+  "layout": "title",
+  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
+}
+```
+
+`content` ist rohes HTML – der Renderer (`app/components/deck/SlideRenderer.tsx`) stellt den schwarzen Hintergrund und das feste Seitenverhältnis bereit, und der HTML stellt alles bereit, was darin enthalten ist. Auch umfangreiche Einbettung wird unterstützt: Excalidraw-Diagramme über `ExcalidrawSlide.tsx` und Mermaid-Diagramme über `MermaidRenderer.tsx`.
+
+### Anpassen {#customizing}
+
+Die Slides-Vorlage ist vollständig forkbar. Wichtige Orte, auf die Sie bei der Erweiterung achten sollten:
+
+#### Actions — `templates/slides/actions/`
+
+Jeder vom Agenten aufrufbare Vorgang befindet sich hier als TypeScript-Datei. Einige davon werden Sie oft berühren:
+
+- `create-deck.ts` – neues Deck von Grund auf oder Massenaustausch.
+- `add-slide.ts` – eine Folie anhängen; Ich bevorzuge dies für die Streaming-Generierung.
+- `update-slide.ts` – chirurgisches Suchen/Ersetzen oder vollständiger Inhaltsaustausch.
+- `view-screen.ts` – Momentaufnahme dessen, was der Benutzer sieht.
+- `generate-image.ts`, `edit-image.ts`, `image-search.ts`, `logo-lookup.ts` – Bildwerkzeuge.
+- `extract-pdf.ts` – PDF-Aufnahme.
+
+Jede Aktion wird automatisch bei `POST /_agent-native/actions/:name` gemountet und kann vom CLI als `pnpm action <name>` aufgerufen werden. Fügen Sie hier eine neue Datei hinzu, um dem Agenten eine neue Funktion zu verleihen.
+
+#### Routen – `templates/slides/app/routes/`
+
+- `_index.tsx` – Deckliste.
+- `deck.$id.tsx` – der Editor.
+- `deck.$id_.present.tsx` – Präsentationsmodus.
+- `share.$token.tsx` – öffentliche schreibgeschützte Freigabeseite.
+- `slide.tsx` – Einbettung einer einzelnen Folie, die in Chat-Vorschauen verwendet wird.
+- `settings.tsx` – Vorlageneinstellungen.
+- `team.tsx` – Organisations- und Teammanagement.
+
+#### Editor-Komponenten – `templates/slides/app/components/editor/`
+
+Die meisten UI-Anpassungen finden hier statt: `SlideEditor.tsx`, `EditorToolbar.tsx`, `EditorSidebar.tsx`, Blasenmenüs, Schrägstrichmenü und die Bedienfelder für Bildgenerierung, Suche und Verlauf.
+
+#### Skills — `templates/slides/.agents/skills/`
+
+Agent skills, der Muster erklärt, wenn der Agent Code ändern muss:
+
+- `create-deck/` – wie man ein neues Deck mit Folien erstellt.
+- `slide-editing/` – So bearbeiten Sie einzelne Folien.
+- `deck-management/` – wie Decks gespeichert und abgerufen werden.
+- `slide-images/` – Bildgenerierungs- und Suchworkflow.
+
+#### AGENTS.md
+
+`templates/slides/AGENTS.md` ist der kurze Router, den der Agent bei jedem Gespräch liest. Es verweist auf skills unter `.agents/skills/` und legt die Kernregeln, den Anwendungsstatusvertrag und den Fähigkeitsindex fest. Die genauen HTML-Folienvorlagen für jedes Layout sind in `.agents/skills/create-deck/SKILL.md` verfügbar – aktualisieren Sie diese Fähigkeit, wann immer Sie ein Folienlayoutmuster hinzufügen oder ändern.
+
+#### API-Routen
+
+Für Fälle, in denen actions nicht die richtige Lösung sind (Datei-Uploads, Streaming), stellt die Vorlage einen kleinen Satz von REST-Endpunkten bereit: `GET/POST /api/decks`, `GET/PUT/DELETE /api/decks/:id`. Siehe `templates/slides/server/routes/api/`.

package/docs/content/locales/de-DE/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "Video"
+description: "Ein programmatisches Videostudio für Bewegungsgrafiken, Produktdemos und kinetischen Text. Generieren Sie Animationen aus einer Eingabeaufforderung und optimieren Sie sie auf einer Zeitachse."
+---
+
+# Video
+
+Ein programmatisches Videostudio für die Art von Bewegungsgrafiken, Produktdemos und Videos mit kinetischem Text, bei denen das Keyframeing von Hand mühsam ist. Bitten Sie den Agenten um „eine 6-Sekunden-Logo-Enthüllung, die nach 2 Sekunden eingeblendet wird“, und er erstellt die Animation. Passen Sie Timing, Easing und Kamerabewegungen auf einer Zeitleiste an und rendern Sie sie dann in MP4 oder 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>"
+}
+```
+
+Wenn Sie das Studio öffnen, wird auf dem Startbildschirm eine Liste der Kompositionen angezeigt. Klicken Sie darauf und Sie erhalten oben einen Player, unten eine Zeitleiste und rechts ein Eigenschaftenfenster. Der Agent weiß immer, welche Komposition Sie geöffnet haben.
+
+```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}"
+}
+```
+
+## Was Sie damit machen können
+
+- **Generieren Sie Animationen aus einer Eingabeaufforderung.** „Fügen Sie eine Titelkarte hinzu, die nach 2 Sekunden eingeblendet wird und bis 5 Sekunden anhält.“ Der Agent bearbeitet die Komposition.
+- **Passen Sie das Timing auf einer Zeitleiste an.** Ziehen Sie Animationsspuren und ändern Sie ihre Größe, scrollen Sie durch Frames und legen Sie Beschleunigungskurven visuell fest.
+- **Animieren Sie die Kamera.** Schwenken, Zoomen und Neigen mit Werkzeugen auf dem Bildschirm. Klicken Sie auf das Werkzeug, ziehen Sie es in die Vorschau und ein Keyframe wird automatisch erstellt.
+- **Beginnen Sie mit einer leeren Komposition oder einem Beispiel.** Die Vorlage enthält eine In-Code-Komposition (`BlankComposition`), mit der Sie beginnen können; Beispielkompositionen – kinetischer Text, Logo-Enthüllungen, Partikelausbrüche, interaktive UI-Demos, Diashows – laden Sie aus der Datenbank, und Sie können Ihre eigenen hinzufügen.
+- **Easing-Kurven visuell bearbeiten.** Über 30 Kurven im Lieferumfang enthalten – Power, Back, Bounce, Circ, Elastic, Expo, Sinus und Federphysik.
+- **Rendern Sie in MP4 oder WebM** mit 1x, 2x oder 3x Supersampling für gestochen scharfen Text und Vektoren während des Kamerazooms.
+
+Dies ist eher ein Tool für Entwickler als andere Vorlagen – Kompositionen sind React-Komponenten, sodass Power-User (oder der Agent) ganz neue Animationstypen von Grund auf schreiben können. Aber alltägliche Optimierungen („das Tippen verlangsamen“, „die Partikelanzahl auf 12 senken“) sind nur Geschwätz.
+
+## Erste Schritte
+
+Live-Demo: [videos.agent-native.com](https://videos.agent-native.com).
+
+Wenn Sie das Studio öffnen:
+
+1. Wählen Sie eine Komposition auf dem Startbildschirm aus.
+2. Probieren Sie den Agenten aus: „Fügen Sie eine Logo-Einblendung hinzu, die nach 2 Sekunden eingeblendet wird.“ Sehen Sie sich das Timeline-Update an.
+3. Ziehen Sie Titel zur Neuzeit, klicken Sie auf das Kamera-Tool und scrollen Sie durch den Player.
+
+### Nützliche Eingabeaufforderungen
+
+- „Fügen Sie eine Titelkarte hinzu, die nach 2 Sekunden eingeblendet wird und bis 5 Sekunden anhält.“
+- „Stellen Sie die Kamera so ein, dass das Logo zwischen Bild 60 und 90 zweifach vergrößert wird.“
+- „Machen Sie die Eingabegeschwindigkeit langsamer – 40 % länger.“
+- „Der Partikelstoß ist zu dicht. Senken Sie die Zahl auf 12.“
+- „Erstellen Sie eine neue Komposition namens Intro-Loop, 1080 x 1080, 6 Sekunden.“
+- „Fügen Sie eine Klickanimation zur Schaltflächenzone hinzu und animieren Sie den Cursor dorthin.“
+- „Geben Sie diesem Track eine Feder-Entspannung statt eine Entspannung.“
+
+Wenn Sie eine Spur in der Timeline auswählen und Befehl+I drücken, übernimmt der Agent diese Auswahl – „diese Spur schneller machen“ funktioniert einfach.
+
+## Für Entwickler
+
+Der Rest dieses Dokuments richtet sich an alle, die die Videovorlage teilen oder erweitern. Diese Vorlage ist codeorientierter als die anderen – jede Komposition ist eine React-Komponente und jede Animation sind Daten auf einer Spur.
+
+### Architektur
+
+Alles, was Sie im Studio sehen, ist Code. Eine Komposition ist ein `CompositionEntry` in `app/remotion/registry.ts`, das auf eine React-Komponente in `app/remotion/compositions/` zeigt. Jede Animation in dieser Komponente wird von einem `AnimationTrack` gelesen, sodass Benutzer sie in der Zeitleiste UI ziehen, in der Größe ändern und zeitlich anpassen können. Der Agent kann neue Kompositionen erstellen, Titel hinzufügen, Easing optimieren und ganze React-Komponenten schreiben, die in die Registrierung eingebunden werden.
+
+Das Studio läuft auf dem `<Player>` von Remotion für die Vorschau und auf dem CLI von Remotion für das endgültige Rendern. Die Ausgabe erfolgt standardmäßig auf 1920 x 1080 bei 30 Bildern pro Sekunde.
+
+### Schnellstart
+
+Gerüst einer neuen Video-App aus dem CLI:
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+Öffnen Sie das Studio in Ihrem Browser, erstellen Sie eine Komposition und beginnen Sie ganz von vorne. Bitten Sie den Agenten um etwas wie „Fügen Sie eine Logo-Enthüllung hinzu, die nach 2 Sekunden eingeblendet wird“, und er wird die Komposition für Sie bearbeiten.
+
+### Hauptfunktionen
+
+**React-basierte Kompositionen.** Videos sind Remotion-gestützte React-Komponenten mit SQL-gestützten Benutzerkompositionen und einer optionalen Coderegistrierung für lokale Standardeinstellungen.
+
+**Timeline-First-Animation.** Dauerspuren, Keyframes, Beschleunigungskurven, Kamerabewegungen und programmatische Ausdrucksspuren bearbeiten alle dieselben Kompositionsdaten.
+
+**Anpassbare Bewegungssysteme.** Parameter, Cursorspuren, interaktive Schwebezonen, Bereichsnavigation und wiederholte Wiedergabe machen generierte Animationen ohne Code anpassbar.
+
+**Rendern und Persistenz.** Kompositionseinstellungen, Qualität, FPS, Spurwerte und Überschreibungen bleiben pro Komposition bestehen und werden über Remotion in MP4 oder WebM gerendert.
+
+### Zusammenarbeit mit dem Agenten
+
+Der Agent weiß immer, welche Komposition Sie geöffnet haben. Der Navigationsstatus (`{ view, compositionId }`) wird in die Tabelle `application_state` des Frameworks geschrieben und die Aktion `view-screen` gibt ihn plus einen Hinweis zurück, der auf `app/remotion/registry.ts` zeigt. Sie müssen dem Agenten nicht sagen, auf welcher Komposition Sie sich befinden – bitten Sie ihn, auf „diese“ zu reagieren, und er wird es tun.
+
+Unter der Haube nennt der Agent actions wie `navigate`, `save-composition` und `generate-animated-component`. Von SQL unterstützte Kompositionsdatensätze werden über `save-composition` erstellt oder aktualisiert. Code-gestützte Remotion-Komponenten sind weiterhin in `app/remotion/compositions/*.tsx` verfügbar und in `app/remotion/registry.ts` registriert.
+
+### Datenmodell
+
+Serverseitiges Schema befindet sich in `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" }
+  ]
+}
+```
+
+Jede Tabelle verfügt außerdem über eine passende Framework-Anteilstabelle (`composition_shares`, `design_system_shares`, `folder_shares`), die von `createSharesTable()` erstellt wurde.
+
+- `compositions` – ID, Titel, Typ, `data` (vollständiger Kompositions-JSON-Blob), Besitzspalten, Zeitstempel.
+- `composition_shares` – Standard-Aktienzuteilungen, erstellt von `createSharesTable()`.
+- `design_systems` – wiederverwendbare Marken-Tokens (Farben, Typografie, Abstände, Assets, benutzerdefinierte Anweisungen, `is_default`-Flagge) mit `ownableColumns`.
+- `design_system_shares` – Aktienzuschüsse für Designsysteme.
+- `folders` – verschachtelbare Ordner für die Bibliotheksorganisation, mit `ownableColumns`.
+- `folder_shares` – Freigabeberechtigungen für Ordner.
+- `folder_memberships` – Viele-zu-viele-Verbindung zwischen einem `folder_id` und einem `composition_id`.
+
+### Ordner und Designsysteme
+
+Kompositionen können in Ordnern organisiert und mit Designsystemen gestaltet werden. Actions: `create-folder`, `rename-folder`, `delete-folder`, `move-composition-to-folder`. Designsystem actions: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `set-default-design-system`, `apply-design-system`, `analyze-brand-assets`. Importieren Sie actions: `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF).
+
+Die Registrierung in `app/remotion/registry.ts` ist die In-Code-Quelle der Wahrheit für das, was mit der Vorlage geliefert wird. In der SQL-Tabelle werden vom Benutzer erstellte Kompositionen und Überschreibungen gespeichert. Der Studiostatus (Trackbearbeitungen pro Komposition, Überschreibungen von Requisiten, Kompositionseinstellungen) wird unter `videos-tracks:<id>`, `videos-props:<id>` und `videos-comp-settings:<id>` auf `localStorage` gespiegelt und beim Laden wieder tief in die Registrierungseinstellungen eingefügt.
+
+TypeScript-Kernformen (`app/types.ts`):
+
+- `AnimationTrack` — `id`, `label`, `startFrame`, `endFrame`, `easing`, `animatedProps[]`.
+- `AnimatedProp` – `property`, `from`, `to`, `unit`, plus optional `keyframes`, `programmatic`, `description`, `codeSnippet`, `parameters`, `parameterValues`.
+- `CompositionEntry` — `id`, `title`, `description`, `component`, `durationInFrames`, `fps`, `width`, `height`, `defaultProps`, `tracks`.
+
+Kompositionen sind standardmäßig privat. Die Sichtbarkeit kann `private`, `org` oder `public` sein, und Freigabegewährungen gewähren `viewer`-, `editor`- oder `admin`-Rollen – verbunden durch das Freigabeprimitiv des Frameworks.
+
+### Anpassen
+
+Der Vorlagenordner ist `templates/videos/` (der für den Benutzer sichtbare Slug ist `video`, aber der Ordner ist Plural).
+
+**Actions** — `templates/videos/actions/`
+
+- `view-screen.ts` – gibt den aktuellen Navigationsstatus für den Agenten zurück.
+- `navigate.ts` – Navigieren Sie zu einer Komposition (`--compositionId <id>`) oder der Startansicht (`--view home`).
+- `save-composition.ts` – Erstellen oder aktualisieren Sie einen von SQL unterstützten Kompositionsdatensatz.
+- `generate-animated-component.ts` – generiert eine neue Remotion-Komponentendatei mit Boilerplate.
+- `validate-compositions.ts` – Überprüfen Sie alle registrierten Kompositionen auf strukturelle Probleme.
+- `list-compositions.ts`, `get-composition.ts`, `update-composition.ts`, `delete-composition.ts` – von SQL unterstützte Kompositionsdatensätze lesen, aktualisieren und löschen.
+
+**Routen** – `templates/videos/app/routes/`
+
+- `_index.tsx` – Studiohaus; rendert die Shell- und Kompositionsliste.
+- `c.$compositionId.tsx` – Kompositionseditor (Zeitleiste, Player, Eigenschaftenfenster).
+- `components.tsx` – Komponentenbibliotheksbrowser.
+- `team.tsx` – Teammanagement.
+
+**Remotion-Interna** – `templates/videos/app/remotion/`
+
+- `registry.ts` – die maßgebliche Kompositionsliste.
+- `compositions/` – ein `.tsx` pro Zusammensetzung, plus ein `index.ts`-Lauf.
+- `trackAnimation.ts` — `trackProgress`, `getPropValue`, `findTrack`, `getPropValueKeyframed`.
+- `CameraHost.tsx` – umschließt Kompositionsinhalte mit der Kameratransformation.
+- `hooks/`, `ui-components/`, `components/` – interaktive Elementhelfer, Cursor-Rendering, animierte Element-Wrapper.
+
+**Studio UI** – `templates/videos/app/components/`
+
+- `Timeline.tsx` – die vollständig kontrollierte Zeitleiste (`viewStart` / `viewEnd` besitzen intern keinen Status).
+- `VideoPlayer.tsx` – Remotion `<Player>`-Wrapper mit bereichsbeschränkter Wiedergabe.
+- `TrackPropertiesPanel.tsx`, `CompSettingsEditor.tsx`, `PropsEditor.tsx` – die rechten Seitenplatten.
+- `CameraToolbar.tsx`, `CameraControls.tsx` – Kamera-Tools und numerische Steuerelemente.
+
+**Agentenanweisungen** – `templates/videos/AGENTS.md` ist die ausführliche Anleitung, die der Agent liest. Es behandelt die Animation-as-Track-Regel, das Kamerasystem, das Cursorsystem, CSS-Filtereinheiten, die interaktive Komponentenregistrierung, UI-Abstände und Checklisten zum Erstellen oder Bearbeiten von Kompositionen.
+
+**Skills** — `templates/videos/.agents/skills/`
+
+- `composition-management/SKILL.md` – wie man Kompositionen erstellt und registriert.
+- `animation-tracks/SKILL.md` – wie man Tracks und animierte Requisiten bearbeitet.
+- Plus das Standard-Framework skills: `actions`, `self-modifying-code`, `delegate-to-agent`, `storing-data`, `security`, `frontend-design`, `create-skill`, `capture-learnings`.
+
+Um eine neue Komposition hinzuzufügen, befolgen Sie die Checkliste in `AGENTS.md`: Erstellen Sie die Komponente, deklarieren Sie `FALLBACK_TRACKS`, verwenden Sie `findTrack` / `trackProgress` / `getPropValue` (niemals Hardcode-Frames), exportieren Sie aus `compositions/index.ts`, fügen Sie einen `CompositionEntry` zur Registrierung hinzu und führen Sie `pnpm typecheck` aus.