# Diseña el tuyo: el editor

**Diseña el tuyo**, en la barra lateral, es un lienzo para crear tú mismo un aspecto, desde un solo
color hasta un diseño con muchas capas. Funciona totalmente sin conexión. Lo que diseñas se guarda en
**Mis aspectos** como cualquier otro aspecto, y **Guardar y aplicar** lo pone directamente en la
carpeta que elegiste.

![El editor: un insecto de la biblioteca de iconos estampado en una carpeta azul, con la búsqueda de iconos al lado y Guardar y aplicar debajo](https://folderskin.app/docs/images/composer.webp)

## Qué se puede hacer con él

| Quieres | Empieza con | Luego |
| --- | --- | --- |
| Una carpeta de un solo color, el que sea | **Color** o **Liso** | Haz clic en la carpeta y elige el color. El selector admite cualquier color, con transparencia |
| Una carpeta con rótulo: *Recetas*, *Notas 2026* | **Rótulo** | Escribe el texto y elige fuente, grosor y color. Las palabras cortas se leen mejor a tamaños pequeños |
| Una carpeta que diga lo que guarda con una sola imagen | **Emoji** | Haz doble clic en el emoji para cambiarlo, o busca en el selector (con palabras en inglés: *dog*, *plane*, *receipt*) |
| Un rótulo en la propia pestaña | **Rótulo en la pestaña** | El botón **Pestaña** de *Posición* pone cualquier capa en la pestaña |
| Una parte trasera y una delantera de colores distintos | **Bicolor** | La división queda oculta detrás de la hoja de papel |
| Una carpeta transparente | **Cristal** o **Cristal tintado** | Baja la opacidad del fondo, o bórralo para una carpeta transparente del todo: solo quedan el papel y los bordes |
| Una carpeta con un patrón | **Rayas**, **Vichy**, **Lunares** | **Patrón** añade diez tipos, de rayas a confeti y grano de película |
| Una foto con leyenda | **Foto** | Primero pide la imagen. Luego puedes soltar o pegar más |
| Un sticker, una insignia, cualquier cosa sin forma de carpeta | **Sticker** | *Icono libre* convierte el diseño en el icono entero |
| Un aspecto que ya tienes, con tu toque personal | Menú ⋯ de un aspecto → **Remezclar en el editor** | El aspecto se convierte en una capa de imagen sobre la que construir |
| Un cambio en algo que ya diseñaste | Su menú ⋯ → **Editar el diseño** | **Guardar cambios** lo actualiza en su sitio. **Guardar copia** conserva los dos |

## Cómo se usa

**Para empezar.** La primera visita, y **Nuevo**, muestran los puntos de partida. Cada uno es un
diseño normal: nada en él es fijo. Si eliges uno mientras tu diseño tiene cambios sin guardar,
primero te pregunta.

**Añadir.** La barra de encima de la carpeta añade **Texto**, un **Emoji**, una **Forma** (trece, de
un rectángulo redondeado a un globo de diálogo), una **Imagen** (un archivo, uno de tus aspectos, o
una imagen soltada o pegada sobre la carpeta), un **Patrón** y **Color** (selecciona el fondo, o
añade uno).

**Organizar.** Haz clic en una capa para seleccionarla: se tiñe, con controles en las esquinas y los
lados, y un control redondo encima para girarla.

- Arrástrala para moverla. Se ajusta al centro de la carpeta, a la pestaña, a los bordes de la
  carpeta y a otras capas. Mantén presionado ⌘ (Ctrl) para colocarla libremente.
- Arrastra una esquina o un lado para cambiar su tamaño. Las imágenes conservan sus proporciones
  desde una esquina y se recortan desde un lado. El texto y los emojis siempre conservan sus
  proporciones.
- Mantén presionado ⇧ para girar en pasos de 15° o para conservar las proporciones de una forma.
  Mantén presionado ⌥ para cambiar el tamaño desde el centro.
- Haz doble clic en un texto para editarlo, o en un emoji para cambiarlo.
- Haz clic en la propia carpeta para seleccionar su fondo.

**Capas.** La lista de arriba a la derecha muestra la pila, de arriba abajo. Arrastra una fila para
cambiar su orden, haz doble clic en un nombre para renombrarlo, y usa el ojo, el candado y la
papelera para ocultar una capa, fijarla en su sitio o borrarla. **Borrar todo**, al final del
encabezado, vacía el diseño. El aviso que lo indica permite recuperarlas, igual que ⌘Z. Los botones
de un encabezado, como los de una fila, aparecen al pasar el puntero por encima.

**Capas y Ajustes** se abren y se cierran desde su encabezado, y la barra que las separa se arrastra
para dar más o menos espacio a las capas (un doble clic la devuelve a su sitio, y cuando tiene el
foco, las flechas la mueven). Cómo las dejaste se recuerda en este equipo.

**Ajustes.** Debajo de las capas está todo lo relativo a la capa seleccionada, bajo su nombre, con
los botones para cambiar su orden, duplicarla y borrarla en ese encabezado:

- Texto: fuente, grosor, alineación, cursiva, mayúsculas, tamaño, espaciado entre letras,
  interlineado y curva (en arco o en sonrisa).
- Color: sólido, un degradado lineal o uno radial, hasta cuatro colores con transparencia, y
  degradados ya hechos.
- Formas: redondeo de las esquinas, número de puntas o de lados, y profundidad de la estrella o
  agujero del anillo.
- Imágenes: brillo, contraste, color, tono, desenfoque, blanco y negro, sepia, invertir y esquinas
  redondeadas.
- Todas las capas: opacidad y uno de dieciséis modos de fusión.
- Las capas colocadas también tienen una sombra (**Convertir en resplandor** para un efecto neón) y
  un borde de sticker, un contorno que sigue la silueta como un sticker troquelado.

Sin nada seleccionado, los ajustes eligen entre **En la carpeta** e **Icono libre**.

**Ver el resultado.** El interruptor **Esqueleto de la carpeta**, debajo del lienzo, muestra el
diseño sobre la carpeta (pestaña, hoja de papel y bordes), o en plano con los bordes de la carpeta
dibujados encima, para que veas lo que oculta la carpeta. Para un icono libre, muestra detrás una
carpeta tenue, como referencia de tamaño. Los cuatro círculos de al lado ponen el diseño sobre la
ventana, un escritorio claro, un escritorio oscuro o un fondo de pantalla colorido, lo que importa en
todo lo que sea transparente. A la derecha, el icono en sus tamaños reales (64, 32 y 16 puntos)
muestra cómo se lee en el Finder o el Explorador de archivos.

**Guardar.** El nombre de arriba a la derecha es el nombre del aspecto. Si lo dejas vacío, lo toma de
las primeras palabras del diseño. **Guardar en Mis aspectos** lo guarda en la biblioteca, y **Guardar
y aplicar** además lo pone en la carpeta elegida. Una vez guardado, sigue abierto para más cambios:
**Guardar cambios** actualiza el mismo aspecto en su sitio, y **Guardar copia** añade otro. Un
diseño sin guardar se conserva mientras miras otras partes de la app, y en este equipo hasta que lo
guardes o lo reemplaces.

**Incluir las N subcarpetas**, debajo de la carpeta a la que se aplica, es el mismo interruptor que
**Incluir subcarpetas** en el panel de la carpeta: activarlo en un lugar lo activa en los dos. Con él
activado, **Guardar y aplicar** pone el diseño en la carpeta y en cada carpeta que contiene, y
pregunta antes si son más de diez. El botón muestra cuánto lleva el proceso, con **Detener** al lado,
y un aviso dice cómo terminó: un proceso detenido ofrece **Continuar**, y uno en el que no se
pudieron cambiar algunas carpetas ofrece **Ver cuáles**, que abre el resumen del panel de la carpeta.

| Teclas | |
| --- | --- |
| ⌘Z / ⇧⌘Z | Deshacer, rehacer |
| Suprimir | Borrar la capa seleccionada |
| ⌘D | Duplicarla |
| ⌘C, luego ⌘V | Copiarla y pegar una copia. ⌘V con una imagen en el portapapeles añade la imagen |
| Flechas, ⇧ flechas | Mover 1 o 10 |
| ⌘] / ⌘[ | Traer adelante, enviar atrás (con ⌥: al frente, al fondo) |
| Esc | No seleccionar nada |
| En la lista de capas | ↑ ↓ seleccionar, ⌥↑ ⌥↓ cambiar el orden, F2 renombrar |

## Cómo funciona

### El diseño se dibuja en el espacio del icono

Un diseño es un lienzo cuadrado de 1024 unidades de lado: el mismo lienzo en el que se mide la
plantilla de la carpeta (`crates/folderskin-core/src/geometry.rs`). Lo que pones en un punto queda en
ese punto de la carpeta. No hay ajuste para cubrir ni recorte, a diferencia de las ilustraciones
añadidas desde un archivo ([SKINS.md](https://folderskin.app/es/docs/skins/)). El documento son datos simples en
`src/composer/doc.ts`, y cada cambio crea uno nuevo, que es lo que recorre la función de deshacer
(`src/composer/history.ts`).

### Sigue habiendo un solo camino de renderizado

La webview solo dibuja el arte del propio usuario: texto, emojis, formas, imágenes y patrones
(`src/composer/render.ts`). La carpeta que lo rodea es la de la plantilla de Rust.
`composer_template` renderiza la plantilla una sola vez, dividida en las capas entre las que se
coloca un diseño (`compositor::template_layers`), al tamaño maestro de 2048 px:

```
top      the front panel's rim light and the shade along its bottom
design   masked by front: the front panel's coverage
middle   the back panel's rim light, the paper sheet and its highlight
design   masked by back: the back panel's coverage, tab included
```

El área de trabajo apila esas cuatro capas en cada fotograma (`src/composer/composite.ts`), algo lo
bastante ligero para seguir un arrastre. El icono guardado sale de
`compositor::render_master_placed`, que dibuja la misma plantilla con las mismas funciones
auxiliares, con los dos paneles rellenos del diseño en su lugar. La prueba
`the_layers_stacked_around_a_design_are_the_saved_icon` mantiene la diferencia entre los dos por
debajo de 3 niveles por canal, así que el lienzo muestra el icono que se escribe. Una quinta capa,
`outline`, son los bordes visibles de la carpeta. La vista en plano la tiñe, y nunca forma parte de
un icono.

### Guardar

Al guardar, el diseño se dibuja una vez más a 2048 px, se codifica como PNG y se envía a
`composer_save` como bytes sin procesar tras una pequeña cabecera JSON
(`[u32 LE header length][header][PNG]`, `src/composer/body.ts`). En el lado de Rust,
`src-tauri/src/composer.rs` hace el resto:

- **En la carpeta:** renderiza la carpeta a partir del diseño.
- **Icono libre:** toma el diseño tal cual como icono. Uno totalmente transparente se rechaza.
- **Se guarda como:** una carpeta terminada (`kind: "folder"`, `source: "composer"`), así que
  aplicarlo, las miniaturas y compartirlo funcionan igual que con cualquier carpeta terminada.
- **El documento:** se guarda junto a la imagen como `<stem>.design.json`, y así es como **Editar el
  diseño** lo vuelve a abrir.
- **Identificador:** el SHA-256 del PNG del diseño, de su documento y de su forma. El mismo diseño
  guardado dos veces es un solo aspecto.
- **Guardar cambios:** reemplaza el aspecto anterior en una sola escritura del índice y conserva su
  lugar en la biblioteca. Un favorito pasa al nuevo identificador.

Una remezcla lee la imagen propia del aspecto con `composer_skin_image`:

- **Una ilustración** se convierte en una imagen que cubre la carpeta.
- **Una carpeta terminada** se convierte en un icono libre con la imagen encajada, exactamente como
  la aplica la app.

### Comandos

| comando | entrada | salida |
| --- | --- | --- |
| `composer_template` | – | `{size, back, front, middle, top, outline, parts}`: las capas como URL de datos PNG, y dónde están las partes de la carpeta (en unidades del lienzo) |
| `composer_save` | cuerpo sin procesar, cabecera `{name, tags, shape, design, replaces}` | `{skin, replaced}`: el aspecto guardado, y el identificador del diseño al que reemplazó |
| `composer_preview` | cuerpo sin procesar, cabecera `{shape, sizes}` | el icono en cada tamaño (de 16 a 512, seis como máximo), como URL de datos |
| `composer_image` | `path` | `{url, width, height, name, alpha}`: un archivo de imagen, 2048 px como máximo, en PNG si tiene transparencia y en JPEG si no |
| `composer_skin_image` | `skinId` | lo mismo, para la imagen propia de un aspecto guardado |
| `composer_design` | `skinId` | el documento del diseño, o `null` para un aspecto que no se hizo aquí |

### El documento

```json
{ "version": 1, "shape": "folder", "layers": [ { "kind": "fill", "paint": { "type": "solid", "color": "#3a86ff" }, "opacity": 1, "blend": "normal", "id": "…" } ] }
```

Las capas se dibujan de la primera a la última:

- **Cubren todo el lienzo:** `fill` (un color o un degradado) y `pattern`.
- **Colocadas:** `text`, `emoji`, `shape` e `image`. Cada una tiene un centro `x, y` en unidades del
  lienzo, una `rotation` en grados, volteos, una `shadow` opcional y un `edge` de sticker opcional.
- **Todas las capas:** `opacity`, `blend`, y opcionalmente `name`, `hidden` y `locked`.

Los colores son `#rrggbb`, o `#rrggbbaa` cuando son transparentes. Una imagen se guarda dentro del
documento como URL de datos. Un documento leído del disco pasa primero por `parseDoc`:

- Las capas desconocidas se descartan, y si hay más de 64 capas, se recortan a 64.
- Los números se mantienen en rangos razonables y los colores se normalizan.
- Una imagen que no sea una URL de datos PNG, JPEG, WebP o GIF se descarta.
- Un documento de una versión más reciente se rechaza en lugar de leerse mal.

### Límites que conviene conocer

- **Los emojis** vienen de la fuente de emojis del sistema. En macOS esa fuente es un mapa de bits,
  nítido hasta unos 160 px, así que un emoji muy grande se ve ligeramente suave en los tamaños de
  icono más grandes del Finder y nítido en todos los tamaños que el Finder muestra normalmente.
- **Las fuentes** son estilos, cada uno una lista de fuentes que vienen con macOS, Windows o Linux,
  de la mejor a la peor (`src/composer/fonts.ts`). FolderSkin solo incluye Manrope. **Otra fuente
  instalada** acepta cualquier familia instalada por su nombre. Un diseño se guarda en píxeles, así
  que sus fuentes solo tienen que estar en el equipo donde se hace.
- **Los ajustes de imagen** se hacen sobre los píxeles (`src/composer/imagefx.ts`), porque la vista
  web de macOS 12 no tiene filtros de canvas. El desenfoque son tres desenfoques de caja, muy
  parecidos a un desenfoque gaussiano.
- **Un borrador** se guarda en el almacenamiento de la vista web, que un diseño con varias imágenes
  grandes puede llenar. Aun así, ese borrador dura hasta que se cierra la app.

### La vista previa en el navegador

`pnpm dev` en un navegador normal también muestra el editor. Las capas de la carpeta son los PNG de
`docs/images/composer/`, que escribe
`cargo run -p folderskin-tools -- composer-layers --out docs/images/composer`. Una prueba de
`folderskin-tools` comprueba que son los píxeles que dibuja el compositor, para que no se queden
desactualizados.

### Pruebas

| | |
| --- | --- |
| compositor (`folderskin-core`) | las capas apiladas son iguales al icono guardado, un diseño cae donde se dibujó, un diseño transparente solo deja el papel y los bordes, el contorno sigue los bordes visibles |
| almacenamiento (`src-tauri`) | el documento de un diseño se guarda a su lado, sobrevive a un reinicio, desaparece cuando se borra el diseño y se limpia si un fallo lo deja huérfano. Guardar encima de un diseño conserva su lugar y rechaza un aspecto que no sea un diseño |
| editor (`src-tauri`) | el formato del cuerpo, las comprobaciones de imágenes, las vistas previas, el guardado, los nombres, un documento dañado, las codificaciones de imagen, y un diseño enviado como bytes sin procesar por el propio IPC de Tauri (su runtime simulado) que se previsualiza y se guarda |
| frontend (vitest) | el documento (sus cambios y cómo se vuelve a leer), deshacer, mover, cambiar el tamaño, girar y ajustar, la composición del texto y sus curvas, las formas, los colores, los ajustes de imagen, los puntos de partida y el formato del cuerpo |