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.

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). 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

{ "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