uifolio 0.4.0 → 0.5.3

package/README.md

@@ -4,135 +4,149 @@
 [![license](https://img.shields.io/npm/l/uifolio.svg)](https://www.npmjs.com/package/uifolio)
 [![node](https://img.shields.io/node/v/uifolio.svg)](https://www.npmjs.com/package/uifolio)
 
-Ma librairie de composants et animations : le code vit dans le projet, se copie et se modifie.
+My component and animation library: the code lives in your project, gets copied and edited.
 
-Le paquet npm `uifolio` contient la CLI, les 14 composants et leurs 9 helpers — rien d'autre.
-Le site de démonstration (Vite, animations, playgrounds) vit dans le dépôt du projet et ne
-fait pas partie du paquet.
+The `uifolio` npm package contains the CLI, the 14 components and their 9 helpers — nothing else.
+The demo site (Vite, animations, playgrounds) lives in the project repository and is not part
+of the package.
 
-## Démarrage
+## Getting started
 
 ```bash
 npm install
-npm run dev      # serveur de démo (http://localhost:5173)
-npm run build    # typecheck + build de production
-npm run preview  # sert le build
+npm run dev      # demo server (http://localhost:5173)
+npm run build    # typecheck + production build
+npm run preview  # serve the build
 npm run lint     # oxlint
-npm test         # tests du CLI (copie, couleur, manifeste npm)
+npm test         # CLI tests (copy, color, npm manifest)
 ```
 
-Routes (hash) :
+Routes (hash):
 
-- `#/` — page d'accueil (identité UIFolio)
-- `#/docs` — introduction, installation, thème
-- `#/components` — catalogue documenté
-- `#/components/video` — playground VideoPlayer
+- `#/` — home page (UIFolio identity)
+- `#/docs` — introduction, installation, theme
+- `#/components` — documented catalog
+- `#/components/video` — VideoPlayer playground
 - `#/components/calendar`, `/time`, `/audio`, `/stories`, `/editor`, `/upload`,
   `/shortcuts`, `/panels`, `/choice`, `/color-picker`, `/icon-picker`
-- `#/animations/otp` — démo OTP animée
-- `#/animations/accordeon-horizontal`, `/storytelling`, `/empilement`,
-  `/texte-progressif`, `/images-fondues` — animations au scroll et fondus d’images
+- `#/animations/otp` — animated OTP demo
+- `#/animations/horizontal-accordion`, `/storytelling`, `/stacking`,
+  `/scroll-text`, `/image-crossfade` — scroll animations and crossfades
 
-Thème **clair/sombre** : bouton dans le header, choix persisté dans
-`localStorage (uifolio-theme)`, initialisation avant le premier rendu (aucun flash),
-défaut = préférence système.
+**Light/dark** theme: button in the header, choice persisted in
+`localStorage (uifolio-theme)`, initialized before the first paint (no flash),
+default = system preference.
 
-**Personnalisation globale** : le panneau de droite (ou l'accordéon sur mobile)
-règle la couleur `--primary` et l'arrondi `--radius` pour tous les composants.
-Le sélecteur avancé propose saturation/luminosité, teinte, alpha, pipette, canaux
-RGB, presets et formats HEX/RGB/HSL/RGBA. Le choix est persisté dans
-`localStorage (uifolio:design)` et repris dans les commandes CLI copiées
-(`--color`, `--radius`).
+**Global customization**: the right panel (or the accordion on mobile) sets the
+`--primary` color and the `--radius` for every component. The advanced picker offers
+saturation/lightness, hue, alpha, eyedropper, RGB channels, presets and HEX/RGB/HSL/RGBA
+formats. The choice is persisted in `localStorage (uifolio:design)` and reused in the
+copied CLI commands (`--color`, `--radius`).
 
-## Utiliser les composants dans un autre projet (CLI)
+## Using the components in another project (CLI)
 
-Comme shadcn : tu installes les fichiers dans **ton** projet, avec leurs helpers,
-et l'alias est réécrit automatiquement.
+Like shadcn: you install the files into **your** project, with their helpers,
+and the alias is rewritten automatically.
 
 ```bash
-# depuis n'importe quel projet, via le paquet npm
+# from any project, through the npm package
 npx uifolio@latest add calendar --color "#10B981" --radius 6
 pnpm dlx uifolio@latest add video-player otp
 
-# depuis la racine du projet qui contient UIfolio
+# from the root of the project that contains UIfolio
 npm run uifolio -- list
-npm run uifolio -- init --cwd ../mon-projet
-npm run uifolio -- add video-player calendar otp --cwd ../mon-projet
+npm run uifolio -- init --cwd ../my-project
+npm run uifolio -- add video-player calendar otp --cwd ../my-project
 
-# ou directement, exécutable via « bin »
-node cli/uifolio.mjs add otp --cwd ../mon-projet
+# or directly, through the « bin »
+node cli/uifolio.mjs add otp --cwd ../my-project
 node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run   # simulate
 ```
 
-| Commande | Rôle |
+| Command | Purpose |
 | --- | --- |
-| `uifolio list` | les composants disponibles |
-| `uifolio init` | écrit `uifolio.json` (dir, lib, alias) dans le projet cible |
-| `uifolio add <noms...>` | copie composant **+ dépendances transitives** (helpers `@/lib/*`) |
-
-Options : `--cwd <dir>`, `--dir <chemin>` (défaut `src/components/ui`),
-`--lib <chemin>` (défaut `src/lib`), `--alias <alias>` (défaut `@`),
-`--force` (écraser), `--dry-run` (simuler), `--color <hex>` et `--radius <px>`.
-
-`--color` écrit la couleur **directement dans les fichiers copiés** : les classes
-Tailwind (`bg-primary`, `border-primary/50`, `ring-primary/40`…) et les `var(--primary)`
-deviennent la valeur hex (`bg-[#10b981]`, `border-[#10b981]/50`…). Le composant garde donc
-la couleur choisie même si le projet cible ne définit pas `--primary`. `--radius` (seul)
-écrit `uifolio-theme.css` avec l'arrondi (et les tokens de couleur par défaut).
-
-À la fin, la CLI affiche les dépendances npm détectées, par ex. :
+| `uifolio list` | the available components |
+| `uifolio init` | writes `uifolio.json` (dir, lib, alias) in the target project |
+| `uifolio add <names...>` | copies the component **+ transitive dependencies** (helpers `@/lib/*`) |
+
+Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`),
+`--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`),
+`--page <path>` (created if missing), `--interactive` (force the questions),
+`--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
+
+`add` does not stop at the copy. Without `--dir` or `--page`, the CLI asks for the
+components folder, then:
+
+1. *Do you already have a file ready to receive the component (Calendar)?*
+   `y` → *In which file should the component (Calendar) be copied?* (format
+   `src/pages/calendar.tsx`): the import and `<Component />` are added without
+   duplication, and the file is created when missing;
+2. `n` → *Would you like to create a new folder and an import file?*
+   `y` → *Please specify the new path*: the folder and the file are created;
+   `n` → install only, no file is touched.
+
+Answering `-` to a path question installs the component without creating or
+modifying any page.
+
+Colors go through **Tailwind CSS 4 tokens**: the CLI writes
+`uifolio-theme.css` (`:root`, `.dark`, then `@theme inline`, which exposes
+`--color-primary`, `--color-muted-foreground`, …) and imports it automatically
+into the project's global CSS (the one with `@import 'tailwindcss'`). The
+components therefore keep `bg-primary`, `border-primary/50`, `ring-primary/40`:
+no hard-coded colors. `--color` changes `--primary` in the theme and `--radius`
+adds `--radius` to it. When no global Tailwind CSS is found, the file is written
+at the root and the import to add is printed.
+
+At the end, the CLI prints the detected npm dependencies, for example:
 
 ```bash
 npm install clsx tailwind-merge lucide-react hls.js
 ```
 
-Le projet cible doit fournir les tokens du thème (`bg-background`, `border`, `text-muted-foreground`…) :
-copie les variables CSS de `src/index.css` (`:root`, `.dark`, `@theme`) si ton projet ne les a pas.
-
-## Thèmes clair/sombre
+## Light/dark themes
 
-- Tokens CSS : `:root` (clair) et `.dark` (sombre) dans `src/index.css`,
-  branchés à Tailwind via `@theme inline` + `@custom-variant dark`.
-- `useTheme()` (`src/lib/use-theme.ts`) : `{ theme, setTheme, toggle }`,
-  persistance `localStorage('uifolio-theme')`.
-- `<ThemeToggle />` (`src/components/theme-toggle.tsx`) : bouton Sun/Moon.
-- Jamais de couleur figée dans les composants : tout passe par
+- CSS tokens: `:root` (light) and `.dark` (dark) in `src/index.css`,
+  wired to Tailwind through `@theme inline` + `@custom-variant dark`.
+- `useTheme()` (`src/lib/use-theme.ts`): `{ theme, setTheme, toggle }`,
+  persistence in `localStorage('uifolio-theme')`.
+- `<ThemeToggle />` (`src/components/theme-toggle.tsx`): Sun/Moon button.
+- No fixed color anywhere in the components: everything goes through
   `background`, `foreground`, `card`, `muted`, `border`, `primary`, `accent`, `ring`.
 
-## Upload réel
+## Real upload
 
-Le `FileUpload` ne connaît pas ton backend : il appelle
-`uploader(file, onProgress) => Promise<url>` et affiche progression, succès et lien
-vers l'URL publique renvoyée.
+`FileUpload` knows nothing about your backend: it calls
+`uploader(file, onProgress) => Promise<url>` and shows progress, success and a link
+to the returned public URL.
 
-La démo utilise `createUploader()` (`src/lib/uploader.ts`) :
+The demo uses `createUploader()` (`src/lib/uploader.ts`):
 
-1. `POST /api/upload/sign` → `{ key, uploadUrl, publicUrl }` (URL signée) ;
-2. `PUT` du fichier en **XHR avec progression** ;
-3. **reprise automatique** (2 retries, backoff) en réutilisant la même URL signée ;
-   un 4xx ne réessaie pas (refus définitif).
+1. `POST /api/upload/sign` → `{ key, uploadUrl, publicUrl }` (signed URL);
+2. `PUT` of the file through **XHR with progress**;
+3. **automatic retry** (2 retries, backoff) reusing the same signed URL;
+   a 4xx does not retry (final refusal).
 
-Côté serveur, le plugin `upload-plugin.ts` (branché dans `vite.config.ts`) :
+On the server side, the `upload-plugin.ts` plugin (wired in `vite.config.ts`):
 
-- **Mode local (défaut, zéro config)** : écrit dans `public/uploads/` et sert
-  `/uploads/<key>` ;
-- **Mode S3 compatible** (AWS S3, Cloudflare R2, MinIO) : si `S3_ENDPOINT`,
-  `S3_BUCKET`, `S3_ACCESS_KEY_ID` et `S3_SECRET_ACCESS_KEY` sont définis, le serveur
-  renvoie une URL PUT signée **SigV4** (implémentée avec `node:crypto`, aucun SDK)
-  et le navigateur envoie directement au bucket.
+- **Local mode (default, zero config)**: writes into `public/uploads/` and serves
+  `/uploads/<key>`;
+- **S3-compatible mode** (AWS S3, Cloudflare R2, MinIO): when `S3_ENDPOINT`,
+  `S3_BUCKET`, `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY` are set, the server
+  returns a **SigV4** signed PUT URL (implemented with `node:crypto`, no SDK)
+  and the browser uploads straight to the bucket.
 
-Configuration dans `.env` — voir `.env.example`.
+Configuration in `.env` — see `.env.example`.
 
-Brancher son propre uploader :
+Plugging in your own uploader:
 
 ```tsx
 const upload = createUploader({ signEndpoint: '/api/upload/sign' })
 
-// ou ton propre backend :
+// or your own backend:
 const upload = async (file: File, onProgress: (v: number) => void) => {
   const form = new FormData()
   form.append('file', file)
-  const res = await fetch('/api/ton-endpoint', { method: 'POST', body: form })
+  const res = await fetch('/api/your-endpoint', { method: 'POST', body: form })
   const { url } = await res.json()
   return url
 }
@@ -143,29 +157,29 @@ const upload = async (file: File, onProgress: (v: number) => void) => {
 ## Stack
 
 - Vite 8 · React 19 · TypeScript
-- Tailwind CSS 4 (tokens CSS, aucune config JS)
-- `lucide-react` pour les icônes, `clsx` + `tailwind-merge` pour `cn()`
-- `hls.js` importé **dynamiquement**, uniquement quand un flux `.m3u8` est lu
-- Aucune autre dépendance : éditeur, calendrier, time picker, panneaux, palette,
-  OTP et signature SigV4 sont maison
+- Tailwind CSS 4 (CSS tokens, no JS config)
+- `lucide-react` for icons, `clsx` + `tailwind-merge` for `cn()`
+- `hls.js` imported **dynamically**, only when a `.m3u8` stream is played
+- No other dependency: editor, calendar, time picker, panels, palette,
+  OTP and SigV4 signing are home-made
 
-## Composants
+## Components
 
-| Composant | Fichier | Ce qu'il gère |
+| Component | File | What it handles |
 | --- | --- | --- |
-| VideoPlayer | `src/components/ui/video-player.tsx` | URL, File/Blob, qualités, HLS, YouTube/Vimeo, sous-titres VTT, contrôles et lecture |
-| Calendar | `src/components/ui/calendar.tsx` | date simple, plage start–end, saisie manuelle, min/max, jours désactivés |
-| TimePicker | `src/components/ui/time-picker.tsx` | 12/24 h, secondes, pas, saisie et flèches |
-| AudioPlayer | `src/components/ui/audio-player.tsx` | variantes carte/compact, seek, volume, vitesse, égaliseur |
-| Stories | `src/components/ui/stories.tsx` | viewer Instagram : images, vidéos, slides texte, pause, progression |
-| RichTextEditor | `src/components/ui/rich-text-editor.tsx` | WYSIWYG `contentEditable`, toolbar, HTML en sortie |
-| FileUpload | `src/components/ui/file-upload.tsx` | drag & drop, validation, aperçus, progression, URL publique, retrait |
-| CommandMenu | `src/components/ui/command-menu.tsx` | palette Ctrl/⌘ + K, recherche, clavier |
-| ResizablePanels | `src/components/ui/resizable.tsx` | groupes horizontal/vertical, poignées, min-size, clavier |
-| OtpInput | `src/components/ui/otp-input.tsx` | 4 champs, collage, rotate + coche de succès |
-| ColorPicker | `src/components/ui/color-picker.tsx` | panneau avancé, saturation/luminosité, teinte, alpha, pipette, canaux RGB, presets, HEX/RGB/HSL/RGBA |
-
-Helpers copiables (la CLI les suit automatiquement) : `src/lib/utils.ts`,
+| VideoPlayer | `src/components/ui/video-player.tsx` | URL, File/Blob, qualities, HLS, YouTube/Vimeo, VTT subtitles, controls and playback |
+| Calendar | `src/components/ui/calendar.tsx` | single date, start–end range, manual input, min/max, disabled days |
+| TimePicker | `src/components/ui/time-picker.tsx` | 12/24 h, seconds, step, typing and arrow keys |
+| AudioPlayer | `src/components/ui/audio-player.tsx` | card/compact variants, seek, volume, speed, equalizer |
+| Stories | `src/components/ui/stories.tsx` | Instagram viewer: images, videos, text slides, pause, progress |
+| RichTextEditor | `src/components/ui/rich-text-editor.tsx` | `contentEditable` WYSIWYG, toolbar, HTML output |
+| FileUpload | `src/components/ui/file-upload.tsx` | drag & drop, validation, previews, progress, public URL, removal |
+| CommandMenu | `src/components/ui/command-menu.tsx` | Ctrl/⌘ + K palette, search, keyboard |
+| ResizablePanels | `src/components/ui/resizable.tsx` | horizontal/vertical groups, handles, min-size, keyboard |
+| OtpInput | `src/components/ui/otp-input.tsx` | 4 fields, paste, rotate + success check |
+| ColorPicker | `src/components/ui/color-picker.tsx` | advanced panel, saturation/lightness, hue, alpha, eyedropper, RGB channels, presets, HEX/RGB/HSL/RGBA |
+
+Copyable helpers (the CLI follows them automatically): `src/lib/utils.ts`,
 `src/lib/video.ts`, `src/lib/vtt.ts`, `src/lib/date.ts`, `src/lib/uploader.ts`, `src/lib/color.ts`,
 `src/lib/use-theme.ts`, `src/lib/use-hotkeys.ts`, `src/lib/use-reduced-motion.ts`.
 
@@ -183,27 +197,27 @@ Helpers copiables (la CLI les suit automatiquement) : `src/lib/utils.ts`,
   loop
   lazy
   subtitles={[
-    { src: '/fr.vtt', label: 'Français', lang: 'fr', default: true },
+    { src: '/fr.vtt', label: 'French', lang: 'fr', default: true },
     { src: '/en.vtt', label: 'English', lang: 'en' },
   ]}
   subtitleClassName="bottom-20"
-  overlay={(state) => <MonBadge playing={state.playing} />}
+  overlay={(state) => <MyBadge playing={state.playing} />}
 />
 ```
 
-- Sources : URL directe, `File`/`Blob`, tableau de qualités (`{ src, quality }`), `.m3u8`,
-  YouTube et Vimeo.
-- Pour les embeds, l'iframe n'est injectée qu'au clic (façade + miniature) et les contrôles
-  natifs sont masqués : la barre du composant pilote le lecteur de la plateforme
-  (progression, temps, volume, vitesse, lecture/pause) via `postMessage`.
-- `ref` expose `play`, `pause`, `seek`, `mute`, `setVolume`, `setPlaybackRate`,
+- Sources: direct URL, `File`/`Blob`, quality list (`{ src, quality }`), `.m3u8`,
+  YouTube and Vimeo.
+- For embeds, the iframe is only injected on click (facade + thumbnail) and native
+  controls are hidden: the component bar drives the platform player
+  (progress, time, volume, speed, play/pause) through `postMessage`.
+- `ref` exposes `play`, `pause`, `seek`, `mute`, `setVolume`, `setPlaybackRate`,
   `requestFullscreen`, `getVideo`.
-- La barre de progression et le volume suivent l'arrondi global `--radius` (poignées
-  comprises), comme le reste du catalogue.
-- Optimisations : chargement lazy, pause hors écran, `preload` maîtrisé, `hls.js` en chunk séparé,
-  object URLs révoquées, changement de qualité sans perdre la position.
-- Sous-titres : parsing VTT tolérant, pistes fichier ou URL, style libre via
-  `subtitleClassName`, menu CC.
+- The progress bar and the volume follow the global `--radius` (handles
+  included), like the rest of the catalog.
+- Optimizations: lazy loading, pause off-screen, controlled `preload`, `hls.js` in a separate
+  chunk, revoked object URLs, quality switch without losing the position.
+- Subtitles: tolerant VTT parsing, file or URL tracks, free styling through
+  `subtitleClassName`, CC menu.
 
 ## Calendar / TimePicker
 
@@ -216,20 +230,20 @@ const [date, setDate] = useState<CalendarValue>(null)
 <TimePicker value={time} onChange={setTime} withSeconds step={15} hour12 />
 ```
 
-La saisie manuelle accepte `jj/mm/aaaa`, `jj-mm-aaaa` et `aaaa-mm-jj`.
+Manual input accepts `dd/mm/yyyy`, `dd-mm-yyyy` and `yyyy-mm-dd`.
 
 ## Audio / Stories
 
 ```tsx
-<AudioPlayer src="/audio.wav" title="Titre" cover="/cover.svg" accent="#facc15" />
-<AudioPlayer variant="compact" src="/audio.wav" title="Titre" />
+<AudioPlayer src="/audio.wav" title="Title" cover="/cover.svg" accent="#facc15" />
+<AudioPlayer variant="compact" src="/audio.wav" title="Title" />
 
 <Stories items={stories} open={open} onOpenChange={setOpen} duration={5000} />
 ```
 
-Une story peut être une image, une vidéo ou un slide texte avec son propre fond et sa durée.
+A story can be an image, a video or a text slide with its own background and duration.
 
-## Éditeur / Upload / Raccourcis / Panneaux / OTP
+## Editor / Upload / Shortcuts / Panels / OTP
 
 ```tsx
 <RichTextEditor value={html} onChange={setHtml} toolbar />
@@ -245,61 +259,61 @@ useHotkeys({ 'mod+k': () => setOpen(true) })
   <ResizablePanel defaultSize={66} minSize={25}>…</ResizablePanel>
 </ResizablePanelGroup>
 
-<OtpInput length={4} value={code} onChange={setCode} onComplete={valider} />
+<OtpInput length={4} value={code} onChange={setCode} onComplete={validate} />
 ```
 
-L'OTP aligne de 4 à 8 champs, forme un cercle à la validation puis affiche une coche.
-L'animation respecte `prefers-reduced-motion`.
+The OTP aligns 4 to 8 fields, forms a circle on validation and then shows a check.
+The animation respects `prefers-reduced-motion`.
 
 ## Animations
 
-Chaque animation a sa propre page documentée : `#/animations/otp` pour l'OTP, puis
-`#/animations/accordeon-horizontal` et `#/animations/storytelling` pour les cartes
-horizontales, et `#/animations/empilement` pour les cartes qui s'empilent au scroll avec
-une couleur de texte pilotée par la progression. Les couleurs suivent `--primary`. Le
-nombre de cartes se règle de 4 à 8 directement dans chaque aperçu. Ces démos autonomes ne
-sont pas installables via la CLI.
+Every animation has its own documented page: `#/animations/otp` for the OTP, then
+`#/animations/horizontal-accordion` and `#/animations/storytelling` for the
+horizontal cards, and `#/animations/stacking` for the cards that stack on scroll with
+a text color driven by progress. Colors follow `--primary`. The number of cards is set
+from 4 to 8 right in each preview. These stand-alone demos are not installable
+through the CLI.
 
-## Publier le paquet
+## Publishing the package
 
-Le paquet publié ne contient que la CLI, les composants et les helpers (`files`) : aucune
-dépendance d'exécution, React et Tailwind restent en `devDependencies` pour ne pas les
-installer chez ceux qui lancent `npx uifolio`.
+The published package only contains the CLI, the components and the helpers (`files`): no
+runtime dependency, React and Tailwind stay in `devDependencies` so they are not installed
+by people running `npx uifolio`.
 
 ```bash
-npm login                          # une fois par machine
-npm profile enable-2fa auth-and-writes   # npm refuse de publier sans 2FA
-npm publish --otp 123456           # prepublishOnly vérifie cli/uifolio.mjs
+npm login                          # once per machine
+npm profile enable-2fa auth-and-writes   # npm refuses to publish without 2FA
+npm publish --otp 123456           # prepublishOnly checks cli/uifolio.mjs
 ```
 
-Un jeton *granular* avec « Bypass 2FA » fonctionne aussi, mais npm restreint
-progressivement ces jetons pour la publication : la 2FA + `--otp` est la voie sûre.
+A *granular* token with “Bypass 2FA” also works, but npm is progressively restricting
+these tokens for publishing: 2FA + `--otp` is the safe path.
 
-Ensuite `npx uifolio@latest add <composant>` et `pnpm dlx uifolio@latest add <composant>`
-fonctionnent.
+Then `npx uifolio@latest add <component>` and `pnpm dlx uifolio@latest add <component>`
+work.
 
-### Publication automatique (GitHub Actions)
+### Automatic publishing (GitHub Actions)
 
-`.github/workflows/publish.yml` publie sur npm à chaque tag `v*` : il vérifie que le tag
-correspond à la version de `package.json`, installe avec `npm ci`, lance `oxlint`,
-`npm pack --dry-run` et `npm test`, puis publie via **trusted publishing** (OIDC, aucun
-token stocké). Un second job crée ensuite la **GitHub Release** du tag avec les notes
-générées à partir des commits.
+`.github/workflows/publish.yml` publishes to npm on every `v*` tag: it checks that the tag
+matches the `package.json` version, installs with `npm ci`, runs `oxlint`,
+`npm pack --dry-run` and `npm test`, then publishes through **trusted publishing** (OIDC, no
+stored token). A second job then creates the tag's **GitHub Release** with notes generated
+from the commits.
 
 ```bash
 npm version patch        # 0.3.0 → 0.3.1, commit + tag v0.3.1
-git push --follow-tags   # déclenche le workflow
+git push --follow-tags   # triggers the workflow
 ```
 
-Prérequis, une seule fois :
+Prerequisites, once:
 
-1. première publication manuelle (ci-dessus) — le paquet doit exister sur npm ;
-2. npmjs.com → `uifolio` → Settings → **Trusted publishing** → GitHub Actions :
-   organisation `Barronakn`, dépôt `UIfolio`, workflow `publish.yml`,
-   action « npm publish » autorisée ;
-3. une configuration neuve doit réussir sa première publication **sous 2 jours**,
-   sinon elle expire et il faut la recréer.
+1. first manual publication (above) — the package must exist on npm;
+2. npmjs.com → `uifolio` → Settings → **Trusted publishing** → GitHub Actions:
+   organization `Barronakn`, repository `UIfolio`, workflow `publish.yml`,
+   “npm publish” action allowed;
+3. a new configuration must complete its first publication **within 2 days**,
+   otherwise it expires and has to be recreated.
 
-Le workflow doit être présent sur le commit taggé. Après activation, tu peux durcir le
-paquet avec Settings → Publishing access → « Require two-factor authentication and
-disallow tokens ».
+The workflow must be present on the tagged commit. Once enabled, you can harden the
+package with Settings → Publishing access → “Require two-factor authentication and
+disallow tokens”.