> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nupra.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor - Canvas de Edición

> Editor visual tipo Canva con IA integrada

# Editor - Canvas de Edición

El flujo **Editor** es un canvas de edición visual donde puedes crear composiciones complejas arrastrando y soltando elementos.

## Características Principales

### Canvas Interactivo (Konva)

* **Drag & Drop**: Arrastra elementos libremente
* **Capas**: Organiza elementos en capas (adelante/atrás)
* **Texto**: Añade y edita texto con fuentes personalizadas
* **Formas**: Rectángulos, círculos, líneas, flechas
* **Imágenes**: Sube o selecciona desde Assets

### Panel de Chat IA

El chat panel asiste en la edición:

* "Añade un logo en la esquina superior izquierda"
* "Cambia el fondo a un degradado azul"
* "Haz el texto más grande y en negrita"

## Interfaz

### Barra de Herramientas (Izquierda)

* **Seleccionar**: Mover y redimensionar elementos
* **Texto**: Añadir cajas de texto
* **Formas**: Insertar formas básicas
* **Imagen**: Subir o seleccionar imágenes
* **Capas**: Reordenar elementos

### Canvas (Centro)

* Área de trabajo visual
* Guías de alineación automáticas
* Grid para precisión
* Zoom in/out

### Panel de Propiedades (Derecha)

* Posición (X, Y)
* Dimensiones (Ancho, Alto)
* Rotación
* Opacidad
* Filtros

## Flujo de Trabajo

### 1. Crear desde Cero

Empieza con un canvas vacío:

* Selecciona dimensiones (1024x1024, 1080x1920, etc.)
* Añade elementos desde la barra de herramientas
* Usa el chat para asistirte

### 2. Editar Imagen Existente

Sube una imagen para editar:

* La imagen se carga en el canvas
* Añade capas encima (texto, formas, logos)
* Exporta la composición final

## Funciones del Chat IA

### Asistencia de Edición

El chat puede:

* **Añadir elementos**: "Pon un círculo rojo aquí"
* **Modificar propiedades**: "Haz el texto más grande"
* **Cambiar estilos**: "Aplica un filtro vintage"
* **Organizar**: "Manda el logo al frente"

### Referencias Visuales

* Sube imágenes de referencia
* La IA imita el estilo
* Útil para moodboards

## Guardado y Exportación

* **Auto-guardado**: Cambios guardados automáticamente
* **Exportar**: Descarga como PNG, JPG o WEBP
* **Guardar como Asset**: Añade a tu biblioteca
* **Guardar como Template**: Reutiliza en el futuro

## Teclas Rápidas

| Tecla                    | Acción                         |
| ------------------------ | ------------------------------ |
| **Delete**               | Eliminar elemento seleccionado |
| **Cmd/Ctrl + D**         | Duplicar elemento              |
| **Cmd/Ctrl + Z**         | Deshacer                       |
| **Cmd/Ctrl + Shift + Z** | Rehacer                        |
| **Cmd/Ctrl + S**         | Guardar                        |
| **Flechas**              | Mover elemento (1px)           |
| **Shift + Flechas**      | Mover elemento (10px)          |