Créer le vôtre : l'éditeur

Créer le vôtre, dans la barre latérale, est un espace pour fabriquer vous-même un habillage, d'une simple couleur à une composition riche en calques. Il fonctionne entièrement hors ligne. Ce que vous créez est enregistré dans Mes habillages comme n'importe quel autre habillage, et Enregistrer et appliquer le pose directement sur le dossier choisi.

L'éditeur : un insecte tiré de la bibliothèque d'icônes, incrusté dans un dossier bleu, avec la recherche d'icônes à côté et Enregistrer et appliquer en dessous

Ce qu'on en fait

Vous voulez	Partez de	Ensuite
Un dossier d'une seule couleur, n'importe laquelle	Couleur ou Uni	Cliquez sur le dossier et choisissez la couleur. Le sélecteur accepte n'importe quelle couleur, avec transparence
Un dossier avec une étiquette : Recettes, Notes 2026	Étiquette	Tapez le texte, puis choisissez une police, une graisse et une couleur. Les mots courts restent lisibles aux petites tailles
Un dossier qui dit ce qu'il contient en une seule image	Emoji	Double-cliquez sur l'emoji pour le changer, ou cherchez dans le sélecteur (avec des mots anglais : dog, plane, receipt)
Une étiquette sur l'onglet lui-même	Étiquette sur l'onglet	Le bouton Onglet de Position place n'importe quel calque sur l'onglet
Un fond et un devant de couleurs différentes	Bicolore	La séparation est cachée derrière la feuille de papier
Un dossier transparent	Verre ou Verre teinté	Baissez l'opacité du fond, ou supprimez-le pour un dossier incolore : seuls le papier et les bords restent
Un dossier à motifs	Rayures, Vichy, Pois	Motif en ajoute dix sortes, des rayures aux confettis et au grain de pellicule
Une photo avec une légende	Photo	L'éditeur demande d'abord l'image. Vous pourrez en déposer ou en coller d'autres ensuite
Un autocollant, un badge, tout ce qui n'a pas la forme d'un dossier	Autocollant	Icône libre fait de la création l'icône entière
Un habillage existant, avec votre touche personnelle	Menu ⋯ d'un habillage → Remixer dans l'éditeur	L'habillage devient un calque image sur lequel construire
Une modification de ce que vous avez déjà créé	Son menu ⋯ → Modifier la création	Enregistrer le met à jour sur place. Dupliquer garde les deux

Utilisation

Pour commencer. La première visite, et Nouveau, affichent les points de départ. Chacun est une création ordinaire : rien n'y est figé. En choisir un alors que votre création a des modifications non enregistrées demande d'abord confirmation.

Ajouter. La barre au-dessus du dossier ajoute du Texte, un Emoji, une Forme (treize, du rectangle arrondi à la bulle de dialogue), une Image (un fichier, l'un de vos habillages, ou une image déposée ou collée sur le dossier), un Motif et une Couleur (sélectionne le fond, ou en ajoute un).

Disposer. Cliquez sur un calque pour le sélectionner : il se teinte, avec des poignées à ses coins et sur ses côtés, et une poignée ronde au-dessus pour le faire pivoter.

Faites-le glisser pour le déplacer. Il s'aimante au milieu du dossier, à l'onglet, aux bords du dossier et aux autres calques. Maintenez ⌘ (Ctrl) pour le placer librement.
Faites glisser un coin ou un côté pour le redimensionner. Les images gardent leurs proportions depuis un coin et se recadrent depuis un côté. Le texte et les emojis gardent toujours leurs proportions.
Maintenez ⇧ pour pivoter par pas de 15°, ou pour garder les proportions d'une forme. Maintenez ⌥ pour redimensionner depuis le centre.
Double-cliquez sur du texte pour le modifier, ou sur un emoji pour le changer.
Cliquez sur le dossier lui-même pour sélectionner son fond.

Calques. La liste en haut à droite montre la pile, en commençant par le haut. Faites glisser une ligne pour changer l'ordre, double-cliquez sur un nom pour le renommer, et utilisez l'œil, le cadenas et la corbeille pour masquer un calque, le verrouiller en place ou le supprimer. Tout supprimer, au bout de l'en-tête, vide la création. Le message qui l'annonce permet de tout remettre, comme ⌘Z. Les boutons d'un en-tête, comme ceux d'une ligne, apparaissent au survol.

Calques et Réglages s'ouvrent et se ferment chacun depuis leur en-tête, et la barre qui les sépare se fait glisser pour donner plus ou moins de place aux calques (un double-clic la remet en place, et quand elle a le focus, les flèches la déplacent). Leur disposition est mémorisée sur cet ordinateur.

Réglages. Sous les calques se trouve tout ce qui concerne le calque sélectionné, sous son nom, avec dans cet en-tête les boutons pour changer son ordre, le dupliquer et le supprimer :

Texte : police, graisse, alignement, italique, majuscules, taille, espacement des lettres, interligne et courbure (en arche ou en sourire).
Couleur : unie, en dégradé linéaire ou radial, jusqu'à quatre couleurs avec transparence, et des dégradés tout prêts.
Formes : arrondi des coins, nombre de pointes ou de côtés, et profondeur de l'étoile ou trou de l'anneau.
Images : luminosité, contraste, couleur, teinte, flou, noir et blanc, sépia, inversion et coins arrondis.
Tous les calques : opacité et un mode de fusion parmi seize.
Les calques placés ont aussi une ombre (En faire une lueur pour un effet néon) et un contour d'autocollant, une bordure qui suit la silhouette comme un autocollant découpé à la forme.

Quand rien n'est sélectionné, les réglages proposent Sur le dossier ou Icône libre.

Voir le résultat. L'interrupteur Squelette du dossier, sous le canevas, affiche la création sur le dossier (onglet, feuille de papier et bords), ou à plat avec les bords du dossier dessinés par-dessus, pour voir ce que le dossier cache. Pour une icône libre, il affiche un dossier estompé derrière, pour donner l'échelle. Les quatre ronds à côté placent la création sur la fenêtre, un bureau clair, un bureau sombre ou un fond d'écran coloré, ce qui compte pour tout ce qui est transparent. À droite, l'icône à ses tailles réelles (64, 32 et 16 points) montre si elle reste lisible dans le Finder ou l'Explorateur.

Enregistrer. Le nom en haut à droite est celui de l'habillage. S'il reste vide, les premiers mots de la création lui servent de nom. Enregistrer dans Mes habillages le garde dans la bibliothèque, et Enregistrer et appliquer le pose en plus sur le dossier choisi. Une fois enregistrée, la création reste ouverte pour d'autres modifications : Enregistrer met à jour le même habillage à sa place, et Dupliquer en ajoute un autre. Une création non enregistrée est conservée pendant que vous allez ailleurs dans l'app, et sur cet ordinateur jusqu'à ce qu'elle soit enregistrée ou remplacée.

Inclure les N sous-dossiers, sous le dossier concerné, est le même interrupteur que Inclure les sous-dossiers dans le panneau du dossier : l'activer à un endroit l'active aux deux. Quand il est activé, Enregistrer et appliquer pose la création sur le dossier et sur chaque dossier qu'il contient, en demandant d'abord confirmation au-delà de dix. Le bouton montre où en est l'opération, avec Arrêter à côté, et un message indique comment elle s'est terminée : une opération interrompue propose Continuer, et une opération où certains dossiers n'ont pas pu être modifiés propose Voir lesquels, qui ouvre le récapitulatif du panneau du dossier.

Touches
⌘Z / ⇧⌘Z	Annuler, refaire
Suppr	Supprimer le calque sélectionné
⌘D	Le dupliquer
⌘C, puis ⌘V	Le copier et en coller une copie. ⌘V avec une image dans le presse-papiers ajoute l'image
Flèches, ⇧ flèches	Décaler de 1 ou de 10
⌘] / ⌘[	Avancer, reculer (avec ⌥ : au premier plan, à l'arrière-plan)
Échap	Tout désélectionner
Dans la liste des calques	↑ ↓ sélectionner, ⌥↑ ⌥↓ changer l'ordre, F2 renommer

Comment ça marche

La création se dessine dans l'espace de l'icône

Une création est un canevas carré de 1024 unités de côté : le même canevas que celui dans lequel se mesure le gabarit du dossier (crates/folderskin-core/src/geometry.rs). Ce que vous placez à un point se retrouve à ce point sur le dossier. Il n'y a ni ajustement pour couvrir ni recadrage, contrairement aux illustrations ajoutées depuis un fichier (SKINS.md). Le document est une simple structure de données dans src/composer/doc.ts, et chaque modification en crée un nouveau : c'est ce que parcourt l'annulation (src/composer/history.ts).

Un seul chemin de rendu, toujours

La webview ne dessine que ce que crée l'utilisateur : texte, emojis, formes, images et motifs (src/composer/render.ts). Le dossier autour vient du gabarit en Rust. composer_template fait le rendu du gabarit une seule fois, découpé en calques entre lesquels s'insère la création (compositor::template_layers), à la taille de référence 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

La zone de travail empile ces quatre calques à chaque rafraîchissement (src/composer/composite.ts), ce qui est assez léger pour suivre un glisser-déposer. L'icône enregistrée vient de compositor::render_master_placed, qui dessine le même gabarit avec les mêmes fonctions, les deux panneaux remplis par la création à sa place. Le test the_layers_stacked_around_a_design_are_the_saved_icon garantit un écart de 3 niveaux par canal au maximum entre les deux, si bien que le canevas montre l'icône qui sera écrite. Un cinquième calque, outline, correspond aux bords visibles du dossier. La vue à plat le teinte, et il ne fait jamais partie d'une icône.

Enregistrement

L'enregistrement redessine la création une dernière fois à 2048 px, l'encode en PNG et l'envoie à composer_save sous forme d'octets bruts, après un petit en-tête JSON ([u32 LE header length][header][PNG], src/composer/body.ts). Côté Rust, src-tauri/src/composer.rs fait ensuite le reste :

Sur le dossier : il fait le rendu du dossier à partir de la création.
Icône libre : il prend la création telle quelle comme icône. Une création entièrement transparente est refusée.
Stockage : comme un dossier fini (kind: "folder", source: "composer"), si bien que l'application sur un dossier, les vignettes et le partage fonctionnent comme pour n'importe quel dossier fini.
Le document : conservé à côté de l'image sous le nom <stem>.design.json, ce qui permet à Modifier la création de le rouvrir.
Identifiant : le SHA-256 du PNG de la création, de son document et de sa forme. La même création enregistrée deux fois ne donne qu'un seul habillage.
Enregistrer : remplace l'ancien habillage en une seule écriture de l'index et garde sa place dans la bibliothèque. Un favori passe au nouvel identifiant.

Un remix lit l'image propre de l'habillage avec composer_skin_image :

Une illustration devient une image qui couvre le dossier.
Un dossier fini devient une icône libre dans laquelle l'image est ajustée, exactement comme l'app l'applique.

Commandes

commande	entrée	sortie
`composer_template`	–	`{size, back, front, middle, top, outline, parts}` : les calques sous forme d'URL de données PNG, et l'emplacement des parties du dossier (en unités du canevas)
`composer_save`	corps brut, en-tête `{name, tags, shape, design, replaces}`	`{skin, replaced}` : l'habillage enregistré, et l'identifiant de la création qu'il remplace
`composer_preview`	corps brut, en-tête `{shape, sizes}`	l'icône à chaque taille (de 16 à 512, six au maximum), sous forme d'URL de données
`composer_image`	`path`	`{url, width, height, name, alpha}` : un fichier image, 2048 px au maximum, en PNG s'il a de la transparence et en JPEG sinon
`composer_skin_image`	`skinId`	la même chose, pour l'image propre d'un habillage enregistré
`composer_design`	`skinId`	le document de la création, ou `null` pour un habillage qui n'a pas été fait ici

Le document

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

Les calques sont dessinés du premier au dernier :

Couvrant tout le canevas : fill (une couleur ou un dégradé) et pattern.
Placés : text, emoji, shape et image. Chacun a un centre x, y en unités du canevas, une rotation en degrés, des retournements, une shadow facultative et un edge d'autocollant facultatif.
Tous les calques : opacity, blend, et en option name, hidden et locked.

Les couleurs s'écrivent #rrggbb, ou #rrggbbaa quand elles sont transparentes. Une image est conservée dans le document sous forme d'URL de données. Un document lu depuis le disque passe d'abord par parseDoc :

Les calques inconnus sont écartés, et au-delà de 64 calques, la liste est ramenée à 64.
Les nombres sont ramenés dans des plages raisonnables et les couleurs mises sous forme canonique.
Une image qui n'est pas une URL de données PNG, JPEG, WebP ou GIF est écartée.
Un document venant d'une version plus récente est refusé plutôt que mal lu.

Limites à connaître

Les emojis viennent de la police d'emojis du système. Sur macOS, cette police est en bitmap, nette jusqu'à environ 160 px : un très grand emoji est donc légèrement flou aux plus grandes tailles d'icônes du Finder, et net à toutes les tailles que le Finder affiche d'habitude.
Les polices sont des styles, chacun étant une liste de polices fournies avec macOS, Windows ou Linux, la meilleure en premier (src/composer/fonts.ts). FolderSkin n'embarque que Manrope. Une autre police installée accepte n'importe quelle famille installée, par son nom. Une création est enregistrée en pixels : ses polices n'ont besoin d'être présentes que sur l'ordinateur où elle est créée.
Les retouches d'image se font sur les pixels (src/composer/imagefx.ts), car la vue web de macOS 12 n'a pas de filtres de canevas. Le flou enchaîne trois flous en boîte, ce qui donne un résultat proche d'un flou gaussien.
Un brouillon est conservé dans le stockage de la vue web, qu'une création avec plusieurs grandes images peut remplir. Un tel brouillon dure quand même jusqu'à la fermeture de l'app.

L'aperçu dans le navigateur

pnpm dev dans un simple navigateur affiche aussi l'éditeur. Les calques du dossier sont les PNG de docs/images/composer/, écrits par cargo run -p folderskin-tools -- composer-layers --out docs/images/composer. Un test de folderskin-tools vérifie qu'ils correspondent aux pixels que dessine le compositeur, pour qu'ils ne puissent pas devenir obsolètes.

Tests


compositeur (`folderskin-core`)	les calques empilés sont identiques à l'icône enregistrée, une création atterrit là où elle a été dessinée, une création transparente ne laisse que le papier et les bords, le contour suit les bords visibles
stockage (`src-tauri`)	le document d'une création est enregistré à côté d'elle, survit à un redémarrage, disparaît quand elle est supprimée, et est nettoyé si un plantage le laisse orphelin. Enregistrer par-dessus une création garde sa place et refuse un habillage qui n'est pas une création
éditeur (`src-tauri`)	le format du corps, les vérifications d'image, les aperçus, l'enregistrement, le nommage, un document endommagé, les encodages d'image, et une création envoyée en octets bruts par l'IPC de Tauri lui-même (son runtime simulé) qui est prévisualisée et enregistrée
frontend (vitest)	le document (ses modifications et sa relecture), l'annulation, le déplacement, le redimensionnement, la rotation et l'aimantation, la mise en page du texte et ses courbes, les formes, les couleurs, les retouches d'image, les points de départ et le format du corps