# 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](https://folderskin.app/docs/images/composer.webp)

## 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](https://folderskin.app/fr/docs/skins/)). 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

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