@agent-native/core 0.76.5 → 0.76.6

package/docs/content/locales/es-ES/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "Diapositivas"
+description: "Genere presentaciones a partir de un mensaje, edítelas visualmente y presentelas en pantalla completa. Un reemplazo de código abierto para Google Slides, Pitch y PowerPoint."
+---
+
+# Diapositivas
+
+Genere presentaciones completas a partir de un mensaje, edite diapositivas visualmente y presente en pantalla completa. Pídale al agente "una presentación de 10 diapositivas para un servicio de suscripción de café" y observe cómo se transmite diapositiva por diapositiva al editor en segundos. Un reemplazo de código abierto para Google Slides, Pitch y 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>"
+}
+```
+
+Cuando abre una plataforma, el lienzo de diapositivas, el esquema, las notas y la tira de película permanecen en una superficie del editor mientras el agente aún puede crear, revisar y navegar por las diapositivas a través de 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}"
+}
+```
+
+## Qué puedes hacer con él
+
+- **Genere presentaciones a partir de un mensaje.** "Genere una presentación de 10 diapositivas para un servicio de suscripción de café, la audiencia son los inversores".
+- **Edite diapositivas visualmente**: haga doble clic en el texto para editarlo, haga clic en un bloque para acceder al menú de burbujas, utilice `/` en el menú de barra diagonal para insertar bloques.
+- **Genere imágenes con IA.** Imágenes destacadas, maquetas de productos e ilustraciones, preferiblemente delegadas a Recursos, con la generación de imágenes administrada por Builder lista para habilitar claves de proveedor directas y una vez implementadas como alternativa actual.
+- **Busca fotografías de archivo y logotipos de empresas.** "Busque el logotipo de stripe.com y agréguelo a la diapositiva 2".
+- **Presentación en pantalla completa** con navegación por teclado, controles que se ocultan automáticamente y notas del orador.
+- **Comenta, colabora y comparte.** Varias personas pueden editar el mismo mazo en tiempo real. Genera un URL público de solo lectura o compártelo con compañeros de equipo específicos.
+- **Importar desde PDF.** Convierta un PDF en un mazo de inicio: el agente lo analiza y diseña el contenido.
+- **Importar desde otros formatos.** Importe PPTX, DOCX, Google Docs, repositorios GitHub o cualquier URL como punto de partida. Exporte a PPTX, Presentaciones de Google o HTML.
+- **Aplicar sistemas de diseño.** Los tokens de marca, las instrucciones personalizadas y las paletas predeterminadas se guardan como sistemas de diseño y se aplican a nuevas plataformas.
+- **Restaurar versiones anteriores.** Se captura una instantánea de cada cambio de plataforma; enumerar o restaurar cualquier versión anterior.
+
+## Empezando
+
+Demostración en vivo: [slides.agent-native.com](https://slides.agent-native.com).
+
+Cuando abres la aplicación:
+
+1. Haz clic en **Nueva plataforma**.
+2. Pregúntele al agente: "Genere una presentación de 10 diapositivas para un servicio de suscripción de café; la audiencia son los inversores".
+3. Vea la transmisión de diapositivas. Haga clic en cualquier diapositiva para editarla o siga pidiéndole al agente que la refine.
+
+### Indicaciones útiles
+
+- "Genere una presentación de 10 diapositivas para un servicio de suscripción de café, la audiencia son los inversores".
+- "Agregar una diapositiva de precios después de la diapositiva 3."
+- "Agrande el título de esta diapositiva y cambie el color de acento a verde."
+- "Genera una imagen principal para la diapositiva actual: oscura, minimalista y cinematográfica".
+- "Busque el logotipo de stripe.com y agréguelo a la diapositiva 2."
+- "Reemplace la palabra 'clientes' con 'miembros' en todas partes de esta plataforma."
+- "Resuma este PDF como una presentación de 6 diapositivas". (conecte el PDF)
+
+Seleccione texto en una diapositiva y presione Cmd+I para enfocar al agente con esa selección; actuará solo en lo que usted seleccionó.
+
+## Para desarrolladores
+
+El resto de este documento es para cualquiera que bifurque la plantilla de Presentaciones o la amplíe.
+
+### Inicio rápido
+
+Cree una nueva aplicación de Presentaciones desde CLI:
+
+```bash
+npx @agent-native/core@latest create my-slides --standalone --template slides
+cd my-slides
+pnpm install
+pnpm dev
+```
+
+### Características clave {#key-features}
+
+**Generación de solicitud de presentación.** Solicite una presentación y el agente transmitirá las diapositivas al editor utilizando el mismo sistema de creación y edición actions que puede ejecutar usted mismo.
+
+**Lienzo de diapositivas editable.** La edición de texto en línea, las inserciones de barras diagonales, la edición de código, el orden de arrastrar y soltar, deshacer/rehacer, los comentarios y el modo de presentación se encuentran todos en la superficie de la plataforma.
+
+**Importar y exportar.** Incorpore repositorios PPTX, DOCX, Google Docs, PDF, URL y GitHub; exporte a PPTX, Presentaciones de Google, HTML o un enlace para compartir.
+
+**Sistemas de diseño y medios.** Los sistemas de marca guardados, la generación de imágenes, la búsqueda de stock y la búsqueda de logotipos mantienen las presentaciones más cerca de la dirección visual deseada.
+
+**Colaboración e historial.** La edición de Yjs en tiempo real, los comentarios en cadena, los roles compartidos y las instantáneas de la versión del mazo están integrados.
+
+### Trabajar con el agente
+
+El chat del agente se encuentra en la barra lateral. Puede crear presentaciones, editar diapositivas individuales, generar imágenes, buscar logotipos y navegar por el UI, todo utilizando el mismo actions que ejecutarías desde el CLI.
+
+#### Lo que ve el agente
+
+Cuando una plataforma está abierta, el agente ve automáticamente:
+
+- Los actuales `deckId` y `slideIndex`.
+- La lista completa de diapositivas en la plataforma abierta.
+- El contenido HTML de la diapositiva seleccionada actualmente.
+
+Esto se inyecta en cada mensaje como un bloque `current-screen`, por lo que el agente nunca tiene que adivinar qué significa "esta diapositiva". Los datos provienen de la clave de estado de la aplicación `navigation`, que el UI escribe en cada navegación. Ver `templates/slides/actions/view-screen.ts`.
+
+#### Seleccionar texto para ediciones enfocadas
+
+Seleccione texto en una diapositiva y presione Cmd+I para enfocar al agente con esa selección precargada. El agente actuará sólo según lo que hayas seleccionado.
+
+#### Vistas previas de diapositivas en línea en el chat
+
+El agente puede incrustar una vista previa de diapositivas en vivo directamente en una respuesta de chat utilizando la barrera de incrustación del marco. Representa un iframe sin cromo a través de `app/routes/slide.tsx` para que puedas ver el resultado sin salir de la conversación.
+
+### Modelo de datos
+
+Todos los datos de la plataforma se encuentran en SQL a través de Drizzle ORM. Esquema: `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" }
+  ]
+}
+```
+
+Las tablas de recursos compartidos del marco (`deck_shares`, `design_system_shares`) asignan principales a funciones de visor/editor/administrador por recurso.
+
+#### mazos
+
+| Columna      | Tipo  | Notas                                                     |
+| ------------ | ----- | --------------------------------------------------------- |
+| `id`         | texto | Clave principal, p.e. `deck-1712345-abc`                  |
+| `title`      | texto | Título del mazo                                           |
+| `data`       | texto | Blob JSON: `{ title, slides: [{ id, content, layout }] }` |
+| `created_at` | texto | Marca de tiempo                                           |
+| `updated_at` | texto | Marca de tiempo                                           |
+
+Cada mazo también lleva el estándar `ownableColumns` (propietario, visibilidad, token compartido) por lo que encaja en el modelo de uso compartido del marco.
+
+#### comentarios_diapositivas
+
+| Columna                       | Notas                                              |
+| ----------------------------- | -------------------------------------------------- |
+| `id`                          | Clave principal                                    |
+| `deck_id`                     | Plato principal                                    |
+| `slide_id`                    | Deslice el comentario sigue activo                 |
+| `thread_id`, `parent_id`      | Enhebrado                                          |
+| `content`, `quoted_text`      | Cuerpo del comentario y extracto de texto opcional |
+| `author_email`, `author_name` | Autor                                              |
+| `resolved`                    | Bandera booleana                                   |
+
+#### cubierta_compartida
+
+Tabla de recursos compartidos proporcionada por el marco (creada a través de `createSharesTable`) que asigna principales (usuarios u organizaciones) a roles (espectador, editor, administrador) por mazo.
+
+#### versiones_de_mazo
+
+Instantáneas de un momento dado de una plataforma: `deck_id`, `title`, `data` (plataforma completa JSON) y una `change_label` opcional. Utilizado por `list-deck-versions` / `restore-deck-version`.
+
+#### sistemas_de_diseño
+
+Fichas de marca reutilizables: `data` (colores/tipografía/espaciado), `assets`, `custom_instructions` y una bandera `is_default`. Utiliza `ownableColumns` para que los sistemas de diseño se puedan compartir por usuario o por organización.
+
+#### design_system_shares
+
+Tabla de recursos compartidos de marco para sistemas de diseño, asignando principales a roles (visor, editor, administrador).
+
+#### enlaces_compartidos_deck
+
+Instantáneas de enlaces compartidos públicos persistentes codificadas por `token`. Cada fila almacena un `title`, una instantánea de matriz JSON `slides`, un `aspect_ratio` opcional y un `created_at`. Los enlaces compartidos persistentes aquí significan que sobreviven a los reinicios del servidor y funcionan en instancias sin servidor.
+
+#### Estructura de diapositiva
+
+Cada diapositiva dentro de `decks.data` es:
+
+```json
+{
+  "id": "slide-1",
+  "layout": "title",
+  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
+}
+```
+
+`content` es HTML sin formato: el renderizador (`app/components/deck/SlideRenderer.tsx`) proporciona el fondo negro y una relación de aspecto fija, y el HTML proporciona todo lo que hay dentro. También se admite la incrustación enriquecida: diagramas Excalidraw mediante `ExcalidrawSlide.tsx` y gráficos Mermaid mediante `MermaidRenderer.tsx`.
+
+### Personalizarlo {#customizing}
+
+La plantilla de Presentaciones es totalmente bifurcable. Lugares clave para buscar al ampliarlo:
+
+#### Actions — `templates/slides/actions/`
+
+Cada operación invocable por el agente se encuentra aquí como un archivo TypeScript. Algunos que tocarás con frecuencia:
+
+- `create-deck.ts`: plataforma nueva desde cero o reemplazo masivo.
+- `add-slide.ts`: agregue una diapositiva; prefiero esto para la generación de streaming.
+- `update-slide.ts`: búsqueda/reemplazo quirúrgico o intercambio de contenido completo.
+- `view-screen.ts`: instantánea de lo que ve el usuario.
+- `generate-image.ts`, `edit-image.ts`, `image-search.ts`, `logo-lookup.ts`: herramientas de imagen.
+- `extract-pdf.ts` — Ingestión de PDF.
+
+Cada acción se monta automáticamente en `POST /_agent-native/actions/:name` y se puede llamar desde CLI como `pnpm action <name>`. Agregue un nuevo archivo aquí para darle al agente una nueva capacidad.
+
+#### Rutas: `templates/slides/app/routes/`
+
+- `_index.tsx` — lista de mazos.
+- `deck.$id.tsx`: el editor.
+- `deck.$id_.present.tsx` — modo de presentación.
+- `share.$token.tsx`: página pública para compartir de solo lectura.
+- `slide.tsx`: inserción de una sola diapositiva utilizada en las vistas previas del chat.
+- `settings.tsx` — configuración de plantilla.
+- `team.tsx`: gestión de organizaciones y equipos.
+
+#### Componentes del editor: `templates/slides/app/components/editor/`
+
+La mayor parte de la personalización de UI se realiza aquí: `SlideEditor.tsx`, `EditorToolbar.tsx`, `EditorSidebar.tsx`, menús de burbujas, menú de barra diagonal y los paneles para generación de imágenes, búsqueda e historial.
+
+#### Skills — `templates/slides/.agents/skills/`
+
+Agente skills que explica patrones cuando el agente necesita modificar código:
+
+- `create-deck/`: cómo crear una nueva presentación con diapositivas.
+- `slide-editing/`: cómo editar diapositivas individuales.
+- `deck-management/`: cómo se almacenan y se accede a los mazos.
+- `slide-images/`: generación de imágenes y flujo de trabajo de búsqueda.
+
+#### AGENTS.md
+
+`templates/slides/AGENTS.md` es el enrutador corto que el agente lee en cada conversación. Apunta al skills bajo `.agents/skills/` y establece las reglas básicas, el contrato de estado de la aplicación y el índice de habilidades. Las plantillas de diapositivas HTML exactas para cada diseño se encuentran en `.agents/skills/create-deck/SKILL.md`: actualice esa habilidad cada vez que agregue o cambie un patrón de diseño de diapositiva.
+
+#### Rutas API
+
+Para los casos en los que actions no es la opción adecuada (carga de archivos, transmisión), la plantilla expone un pequeño conjunto de puntos finales REST: `GET/POST /api/decks`, `GET/PUT/DELETE /api/decks/:id`. Ver `templates/slides/server/routes/api/`.

package/docs/content/locales/es-ES/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "Vídeo"
+description: "Un estudio de vídeo programático para gráficos en movimiento, demostraciones de productos y texto cinético. Genera animaciones a partir de un mensaje y ajústalas en una línea de tiempo."
+---
+
+# Vídeo
+
+Un estudio de vídeo programático para el tipo de gráficos en movimiento, demostraciones de productos y vídeos de texto cinético que son complicados de crear fotogramas clave a mano. Pídale al agente "una revelación del logotipo de 6 segundos que se desvanece a los 2 segundos" y creará la animación. Ajuste el tiempo, la aceleración y los movimientos de la cámara en una línea de tiempo y luego renderice en MP4 o 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>"
+}
+```
+
+Cuando abras el estudio, verás una lista de composiciones en la pantalla de inicio. Haga clic en uno y obtendrá un reproductor en la parte superior, una línea de tiempo en la parte inferior y un panel de propiedades a la derecha. El agente siempre sabe qué composición tienes abierta.
+
+```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}"
+}
+```
+
+## Qué puedes hacer con él
+
+- **Genere animaciones a partir de un mensaje.** "Agregue una tarjeta de título que se desvanece a los 2 segundos y se mantiene hasta los 5". El agente edita la composición.
+- **Ajusta el tiempo en una línea de tiempo.** Arrastra y cambia el tamaño de las pistas de animación, recorre fotogramas y establece curvas suavizadas visualmente.
+- **Anima la cámara.** Gira, amplía e inclina con herramientas en pantalla. Haga clic en la herramienta, arrastre la vista previa y se creará automáticamente un fotograma clave.
+- **Comience desde una composición en blanco o un ejemplo.** La plantilla incluye una composición en código (`BlankComposition`) para comenzar; Composiciones de ejemplo (texto cinético, revelaciones de logotipos, ráfagas de partículas, demostraciones interactivas de UI, presentaciones de diapositivas) se cargan desde la base de datos y usted puede agregar las suyas propias.
+- **Edite curvas de relajación visualmente.** Más de 30 curvas incluidas: potencia, espalda, rebote, circo, elástica, exposición, seno y física de resorte.
+- **Renderiza en MP4 o WebM** con supermuestreo 1x, 2x o 3x para obtener texto y vectores nítidos durante el zoom de la cámara.
+
+Esta es más una herramienta para desarrolladores que otras plantillas: las composiciones son componentes React, por lo que los usuarios avanzados (o el agente) pueden escribir tipos de animación completamente nuevos desde cero. Pero los ajustes cotidianos ("hacer la escritura más lenta", "reducir el recuento de partículas a 12") son solo charlas.
+
+## Para empezar
+
+Demostración en vivo: [videos.agent-native.com](https://videos.agent-native.com).
+
+Cuando abres el estudio:
+
+1. Elige una composición de la pantalla de inicio.
+2. Pruebe el agente: "agregue un logotipo revelado que se desvanece a los 2 segundos". Mira la actualización de la línea de tiempo.
+3. Arrastra las pistas para volver a cronometrar, haz clic en la herramienta de la cámara y recorre el reproductor.
+
+### Indicaciones útiles
+
+- "Agregue una tarjeta de título que aparezca gradualmente a los 2 segundos y se mantenga hasta los 5."
+- "Cambie la cámara para hacer zoom 2x en el logotipo entre los fotogramas 60 y 90."
+- "Haz que la escritura se revele más lentamente: un 40 % más."
+- "La explosión de partículas es demasiado densa. Baja la cuenta a 12."
+- "Crea una nueva composición llamada intro-loop, 1080x1080, 6 segundos."
+- "Agregue una animación de clic en la zona del botón y anime el cursor hacia ella."
+- "Dale a esta pista una relajación de resorte en lugar de una relajación."
+
+Si seleccionas una pista en la línea de tiempo y presionas Cmd+I, el agente selecciona esa selección; "hacer esta más ágil" simplemente funciona.
+
+## Para desarrolladores
+
+El resto de este documento es para cualquiera que bifurque la plantilla de vídeo o la extienda. Esta plantilla tiene más código que las demás: cada composición es un componente React y cada animación son datos en una pista.
+
+### Arquitectura
+
+Todo lo que ves en el estudio es código. Una composición es un `CompositionEntry` en `app/remotion/registry.ts` que apunta a un componente React en `app/remotion/compositions/`. Cada animación en ese componente se lee desde un `AnimationTrack` para que los usuarios puedan arrastrarla, cambiar su tamaño y volver a cronometrarla en la línea de tiempo UI. El agente puede crear nuevas composiciones, agregar pistas, ajustar la aceleración y escribir componentes completos del React que se conectan al registro.
+
+El estudio se ejecuta en el `<Player>` de Remotion para la vista previa y en el Remotion CLI para el renderizado final. La salida predeterminada es 1920 x 1080 a 30 fps.
+
+### Inicio rápido
+
+Crea una nueva aplicación de vídeo desde CLI:
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+Abre el estudio en tu navegador, crea una composición y comienza desde cero. Pregúntele al agente algo como "agregue un logotipo revelado que se desvanezca en 2 segundos" y editará la composición por usted.
+
+### Características clave
+
+**Composiciones basadas en React.** Los vídeos son componentes de React respaldados por Remotion, con composiciones de usuario respaldadas por SQL y un registro de código opcional para los valores predeterminados locales.
+
+**Animación en primera línea de tiempo.** Las pistas de duración, fotogramas clave, curvas suavizadas, movimientos de cámara y pistas de expresión programática editan los mismos datos de composición.
+
+**Sistemas de movimiento ajustables.** Los parámetros, las trayectorias del cursor, las zonas de desplazamiento interactivas, la navegación por rango y la reproducción repetida hacen que las animaciones generadas se puedan ajustar sin código.
+
+**Renderizado y persistencia.** La configuración de composición, la calidad, los fps, los valores de pista y las anulaciones persisten por composición y se renderizan en MP4 o WebM a través de Remotion.
+
+### Trabajar con el agente
+
+El agente siempre sabe qué composición tienes abierta. El estado de navegación (`{ view, compositionId }`) se escribe en la tabla `application_state` del marco y la acción `view-screen` lo devuelve más una sugerencia que apunta a `app/remotion/registry.ts`. No es necesario que le diga al agente en qué composición se encuentra; pídale que actúe en "ésta" y lo hará.
+
+Debajo del capó, el agente llama a actions como `navigate`, `save-composition` y `generate-animated-component`. Los registros de composición respaldados por SQL se crean o actualizan a través de `save-composition`; Los componentes de Remotion respaldados por código aún residen en `app/remotion/compositions/*.tsx` y están registrados en `app/remotion/registry.ts`.
+
+### Modelo de datos
+
+El esquema del lado del servidor está en `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" }
+  ]
+}
+```
+
+Cada tabla también tiene una tabla de recursos compartidos de marco coincidente (`composition_shares`, `design_system_shares`, `folder_shares`) producida por `createSharesTable()`.
+
+- `compositions`: ID, título, tipo, `data` (blob de composición completa JSON), columnas de propiedad, marcas de tiempo.
+- `composition_shares`: concesiones de acciones estándar producidas por `createSharesTable()`.
+- `design_systems`: tokens de marca reutilizables (colores, tipografía, espaciado, recursos, instrucciones personalizadas, bandera `is_default`) con `ownableColumns`.
+- `design_system_shares`: subvenciones compartidas para sistemas de diseño.
+- `folders`: carpetas encajables para la organización de la biblioteca, con `ownableColumns`.
+- `folder_shares`: permisos para compartir carpetas.
+- `folder_memberships`: unión de muchos a muchos entre un `folder_id` y un `composition_id`.
+
+### Carpetas y sistemas de diseño
+
+Las composiciones se pueden organizar en carpetas y diseñar con sistemas de diseño. Actions: `create-folder`, `rename-folder`, `delete-folder`, `move-composition-to-folder`. Sistema de diseño actions: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `set-default-design-system`, `apply-design-system`, `analyze-brand-assets`. Importar actions: `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF).
+
+El registro en `app/remotion/registry.ts` es la fuente de verdad en el código de lo que se envía con la plantilla. La tabla SQL almacena composiciones y anulaciones creadas por el usuario. El estado del estudio (ediciones de pistas por composición, anulaciones de accesorios, configuraciones de composición) se refleja en `localStorage` en `videos-tracks:<id>`, `videos-props:<id>` y `videos-comp-settings:<id>`, y se fusiona nuevamente con los valores predeterminados del registro al cargar.
+
+Formas centrales de TypeScript (`app/types.ts`):
+
+- `AnimationTrack` — `id`, `label`, `startFrame`, `endFrame`, `easing`, `animatedProps[]`.
+- `AnimatedProp` — `property`, `from`, `to`, `unit`, además de `keyframes`, `programmatic`, `description`, `codeSnippet`, `parameters`, `parameterValues` opcionales.
+- `CompositionEntry` — `id`, `title`, `description`, `component`, `durationInFrames`, `fps`, `width`, `height`, `defaultProps`, `tracks`.
+
+Las composiciones son privadas por defecto. La visibilidad puede ser `private`, `org` o `public`, y las concesiones compartidas otorgan roles `viewer`, `editor` o `admin`, conectados a través de la primitiva de uso compartido del marco.
+
+### Personalizarlo
+
+La carpeta de la plantilla es `templates/videos/` (el slug de cara al usuario es `video`, pero la carpeta está en plural).
+
+**Actions** — `templates/videos/actions/`
+
+- `view-screen.ts`: devuelve el estado de navegación actual del agente.
+- `navigate.ts`: navega a una composición (`--compositionId <id>`) o a la vista de inicio (`--view home`).
+- `save-composition.ts`: crea o actualiza un registro de composición respaldado por SQL.
+- `generate-animated-component.ts`: genera un nuevo archivo de componente Remotion con texto estándar.
+- `validate-compositions.ts`: compruebe todas las composiciones registradas para detectar problemas estructurales.
+- `list-compositions.ts`, `get-composition.ts`, `update-composition.ts`, `delete-composition.ts`: lee, actualiza y elimina registros de composición respaldados por SQL.
+
+**Rutas** — `templates/videos/app/routes/`
+
+- `_index.tsx` — casa estudio; representa el shell y la lista de composición.
+- `c.$compositionId.tsx`: editor de composición (línea de tiempo, reproductor, panel de propiedades).
+- `components.tsx`: explorador de bibliotecas de componentes.
+- `team.tsx` — gestión de equipos.
+
+**Partes internas remotas** — `templates/videos/app/remotion/`
+
+- `registry.ts`: la lista de composición autorizada.
+- `compositions/`: un `.tsx` por composición, más un cañón `index.ts`.
+- `trackAnimation.ts` — `trackProgress`, `getPropValue`, `findTrack`, `getPropValueKeyframed`.
+- `CameraHost.tsx`: envuelve el contenido de la composición con la transformación de la cámara.
+- `hooks/`, `ui-components/`, `components/`: ayudas de elementos interactivos, representación del cursor, envoltorios de elementos animados.
+
+**Estudio UI** — `templates/videos/app/components/`
+
+- `Timeline.tsx`: la línea de tiempo totalmente controlada (`viewStart` / `viewEnd` no poseen ningún estado internamente).
+- `VideoPlayer.tsx`: contenedor remoto `<Player>` con reproducción con rango restringido.
+- `TrackPropertiesPanel.tsx`, `CompSettingsEditor.tsx`, `PropsEditor.tsx`: los paneles del lado derecho.
+- `CameraToolbar.tsx`, `CameraControls.tsx`: herramientas de cámara y controles numéricos.
+
+**Instrucciones del agente**: `templates/videos/AGENTS.md` es la guía detallada que lee el agente. Cubre la regla de animación como pista, el sistema de cámara, el sistema de cursor, las unidades de filtro CSS, el registro de componentes interactivos, el espaciado UI y las listas de verificación para crear o editar composiciones.
+
+**Skills** — `templates/videos/.agents/skills/`
+
+- `composition-management/SKILL.md`: cómo crear y registrar composiciones.
+- `animation-tracks/SKILL.md`: cómo editar pistas y accesorios animados.
+- Además del marco estándar skills: `actions`, `self-modifying-code`, `delegate-to-agent`, `storing-data`, `security`, `frontend-design`, `create-skill`, `capture-learnings`.
+
+Para agregar una nueva composición, siga la lista de verificación en `AGENTS.md`: cree el componente, declare `FALLBACK_TRACKS`, use `findTrack` / `trackProgress` / `getPropValue` (nunca codifique marcos), exporte desde `compositions/index.ts`, agregue un `CompositionEntry` al registro y ejecute `pnpm typecheck`.