uifolio 0.5.1 → 0.5.3

package/src/components/ui/video-player.tsx

@@ -90,7 +90,7 @@ export interface VideoPlayerHandle {
 }
 
 export interface VideoPlayerProps {
-  /** Une source, un fichier local, une liste de qualités, un flux HLS ou une URL YouTube/Vimeo. */
+  /** A source, a local file, a list of qualities, an HLS stream or a YouTube/Vimeo URL. */
   sources: PlayerSource | PlayerSource[]
   poster?: string
   title?: string
@@ -101,10 +101,10 @@ export interface VideoPlayerProps {
   rounded?: VideoRounded
   frame?: VideoFrame
   controls?: VideoControlsMode | boolean
-  /** Position de la barre de contrôles dans le cadre. */
+  /** Position of the control bar inside the frame. */
   controlsPosition?: 'bottom' | 'top'
   accent?: string
-  /** Police appliquée à la barre de contrôles et aux menus. */
+  /** Font applied to the control bar and the menus. */
   fontFamily?: string
   /** Bordure du cadre (px) et couleur CSS. */
   borderWidth?: number
@@ -161,17 +161,17 @@ const iconButton =
 const menuPosition = (position: 'bottom' | 'top') =>
   position === 'top' ? 'top-full mt-1.5' : 'bottom-full mb-1.5'
 
-/** Les barres suivent l'arrondi global (`--radius`) du thème, comme le reste du catalogue. */
+/** The bars follow the global theme radius (`--radius`), like the rest of the catalog. */
 const barRadius = 'rounded-sm'
 
 const rangeThumb =
   '[&::-webkit-slider-thumb]:size-2.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-[var(--vp-accent)] [&::-moz-range-thumb]:size-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-sm [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-[var(--vp-accent)]'
 
-/** Transforme les sources (URL, File, Blob, qualités) en sources lisibles et gère les object URLs. */
+/** Turns the sources (URL, File, Blob, qualities) into playable sources and manages object URLs. */
 interface SourceResolver {
   sources: ResolvedSource[]
   signature: string
-  /** Révoque les object URLs créées pour cette résolution. */
+  /** Revokes the object URLs created for this resolution. */
   dispose: () => void
 }
 
@@ -209,7 +209,7 @@ function resolveSources(input: PlayerSource | PlayerSource[]): SourceResolver {
   }
 }
 
-/** Piste active par défaut : celle marquée `default`, sinon la première avec des cues. */
+/** Default active track: the one marked `default`, otherwise the first one with cues. */
 function preferDefaultActiveSubtitle(
   loaded: ResolvedSubtitleTrack[],
   list: SubtitleTrack[],
@@ -227,14 +227,14 @@ function useResolvedSources(input: PlayerSource | PlayerSource[]) {
     resolver: resolveSources(input),
   }))
 
-  // Ajustement au rendu quand la source change réellement (pas d'effet).
+  // Render-time adjustment when the source really changes (no effect).
   if (entry.signature !== signature) {
     setEntry({ signature, resolver: resolveSources(input) })
   }
 
   const resolver = entry.resolver
-  // Libère les object URLs du résolveur remplacé (celui du montage n'est pas
-  // libéré au démontage : StrictMode simulerait un unmount/remount).
+  // Releases the object URLs of the replaced resolver (the one from mount is not
+  // released on unmount: StrictMode would simulate an unmount/remount).
   const previousResolver = useRef(resolver)
   useEffect(() => {
     if (previousResolver.current !== resolver) {
@@ -317,8 +317,8 @@ export function VideoPlayer({
   const [retryKey, setRetryKey] = useState(0)
   const [prevSignature, setPrevSignature] = useState(signature)
 
-  // Ajustement au rendu : la source change ⇒ on repart d'un état propre,
-  // sans effet ni render supplémentaire.
+  // Render-time adjustment: the source changed ⇒ we start from a clean state,
+  // with no effect and no extra render.
   if (prevSignature !== signature) {
     setPrevSignature(signature)
     setIndex(0)
@@ -338,8 +338,8 @@ export function VideoPlayer({
     [subtitles],
   )
 
-  // Les pistes déjà chargées ne correspondent plus à la signature courante :
-  // on les écarte pendant le rechargement plutôt que par un effet de reset.
+  // Tracks already loaded no longer match the current signature:
+  // we drop them during the reload instead of using a reset effect.
   const [loadedSubtitles, setLoadedSubtitles] = useState<{
     sig: string
     tracks: ResolvedSubtitleTrack[]
@@ -367,7 +367,7 @@ export function VideoPlayer({
   const shouldLoad = inView || !lazy || !observerSupported
   const playbackActive = isEmbed ? embedPlaying : playing
   // L'iframe ne transmet pas les mouvements du pointeur : pour un embed, la barre
-  // reste affichée, sinon elle ne pourrait plus jamais être rappelée.
+  // stays visible, otherwise it could never be called again.
   const showControls =
     isEmbed || !controlsHidden || !playbackActive || openMenu !== null
 
@@ -407,7 +407,7 @@ export function VideoPlayer({
     iframeRef.current?.contentWindow?.postMessage(message, '*')
   }, [])
 
-  /** Envoie une commande à l'iframe : la barre maison pilote le lecteur de la plateforme. */
+  /** Sends a command to the iframe: the custom bar drives the platform player. */
   const postEmbedCommand = useCallback(
     (command: EmbedCommand) => {
       if (!embedKind) return
@@ -416,7 +416,7 @@ export function VideoPlayer({
     [embedKind, postEmbed],
   )
 
-  /** Abonne le lecteur aux événements de l'iframe (temps, durée, état, volume). */
+  /** Subscribes the player to the iframe events (time, duration, state, volume). */
   const sendEmbedHandshake = useCallback(() => {
     if (!embedKind) return
     for (const message of embedHandshake(embedKind)) postEmbed(message)
@@ -426,7 +426,7 @@ export function VideoPlayer({
     postEmbedCommand({ type: 'rate', rate })
   }, [embedKind, postEmbed, postEmbedCommand, muted, volume, rate])
 
-  /** Monte l'iframe (façade → lecteur) : la lecture démarre avec le geste de l'utilisateur. */
+  /** Mounts the iframe (facade → player): playback starts with the user gesture. */
   const startEmbed = useCallback(() => {
     if (!embedId || !embedKind) return
     const effectiveMuted = muted ?? mutedProp
@@ -445,7 +445,7 @@ export function VideoPlayer({
   }, [embedId, embedKind, loop, muted, mutedProp, startAt])
 
   const toggleEmbedPlay = useCallback(() => {
-    // L'iframe n'est pas encore montée : on la lance au lieu d'envoyer une commande dans le vide.
+    // The iframe is not mounted yet: start it instead of sending a command into the void.
     if (!embedActive) {
       startEmbed()
       return
@@ -535,7 +535,7 @@ export function VideoPlayer({
       void document.exitFullscreen()
     } else if (element.requestFullscreen) {
       void element.requestFullscreen().catch(() => {
-        /* iOS Safari : plein écran natif indisponible sur un div */
+        /* iOS Safari: native fullscreen unavailable on a div */
       })
     }
   }, [])
@@ -550,7 +550,7 @@ export function VideoPlayer({
         await video.requestPictureInPicture()
       }
     } catch {
-      /* refusé par le navigateur */
+      /* refused by the browser */
     }
   }, [])
 
@@ -614,11 +614,11 @@ export function VideoPlayer({
   )
 
   /* ------------------------------------------------------------------ */
-  /* Synchronisation des props / de l'état                               */
+  /* Prop / state synchronization                                        */
   /* ------------------------------------------------------------------ */
 
-  // La réinitialisation d'état se fait au rendu (voir ci-dessus) ; on ne garde
-  // ici que les refs, qui ne doivent pas être écrites pendant le rendu.
+  // State resets happen during render (see above); only the refs are kept
+  // here, and they must not be written during render.
   useEffect(() => {
     startApplied.current = null
   }, [signature])
@@ -674,8 +674,8 @@ export function VideoPlayer({
     postEmbedCommand({ type: 'volume', volume })
   }, [embedActive, isEmbed, postEmbedCommand, volume])
 
-  // Branche l'iframe sur nos contrôles : on rejoue le handshake tant que le
-  // lecteur de la plateforme n'est pas prêt (il ignore les messages avant).
+  // Wires the iframe to our controls: the handshake is replayed while the
+  // platform player is not ready (it ignores messages before that).
   useEffect(() => {
     if (!isEmbed || !embedActive) return
     sendEmbedHandshake()
@@ -687,7 +687,7 @@ export function VideoPlayer({
     }
   }, [embedActive, isEmbed, sendEmbedHandshake])
 
-  // Le temps, la durée et l'état de lecture viennent de l'iframe.
+  // Time, duration and playback state come from the iframe.
   useEffect(() => {
     if (!isEmbed || !embedActive) return
     const onMessage = (event: MessageEvent) => {
@@ -732,7 +732,7 @@ export function VideoPlayer({
       (entries) => {
         const entry = entries[0]
         setInView(entry.isIntersecting)
-        // Optimisation : on coupe la lecture hors écran.
+        // Optimization: playback is paused off-screen.
         if (!entry.isIntersecting) {
           videoRef.current?.pause()
           if (isEmbed) {
@@ -774,16 +774,16 @@ export function VideoPlayer({
     }, 2600)
   }, [])
 
-  // À la reprise de lecture, les contrôles repartent visibles : ajustement au
-  // rendu plutôt qu'un setState synchrone dans l'effet.
+  // When playback resumes, the controls are visible again: a render-time
+  // adjustment rather than a synchronous setState in the effect.
   const [prevPlaybackActive, setPrevPlaybackActive] = useState(playbackActive)
   if (prevPlaybackActive !== playbackActive) {
     setPrevPlaybackActive(playbackActive)
     if (playbackActive) setControlsHidden(false)
   }
 
-  // L'effet ne fait qu'armer le minuteur (système externe) ; le reveal est
-  // géré par les événements pointeur ou par l'ajustement au rendu ci-dessus.
+  // The effect only arms the timer (external system); the reveal is
+  // handled by pointer events or by the render adjustment above.
   useEffect(() => {
     if (!playbackActive) {
       if (hideTimer.current) {
@@ -841,12 +841,12 @@ export function VideoPlayer({
             if (autoPlay) void attemptPlay()
           })
           instance.on(HlsConstructor.Events.ERROR, (_event, data) => {
-            if (data.fatal) setError("Le flux HLS n'a pas pu être chargé.")
+            if (data.fatal) setError('The HLS stream could not be loaded.')
           })
           holder.current = instance
         })
         .catch(() => {
-          setError("La librairie hls.js n'a pas pu être chargée.")
+          setError('The hls.js library could not be loaded.')
         })
     }
 
@@ -859,7 +859,7 @@ export function VideoPlayer({
   }, [active, attemptPlay, autoPlay, kind, retryKey, shouldLoad])
 
   /* ------------------------------------------------------------------ */
-  /* Evenements média                                                    */
+  /* Media events                                                        */
   /* ------------------------------------------------------------------ */
 
   const handleLoadedMetadata = () => {
@@ -935,7 +935,7 @@ export function VideoPlayer({
     const message =
       typeof MediaError !== 'undefined' && code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
         ? "Format ou source non pris en charge."
-        : "La vidéo n'a pas pu être chargée."
+        : 'The video could not be loaded.'
     setError(message)
     setLoading(false)
     onError?.(message)
@@ -1010,7 +1010,7 @@ export function VideoPlayer({
       : undefined)
 
   const canPip = typeof document !== 'undefined' && document.pictureInPictureEnabled
-  const qualityLabel = active?.quality ?? 'Qualité'
+  const qualityLabel = active?.quality ?? 'Quality'
   const activeCues = activeSubtitle >= 0 ? subtitleTracks[activeSubtitle]?.cues : undefined
   const currentCue = activeCues?.find(
     (cue) => currentTime >= cue.start && currentTime <= cue.end,
@@ -1020,7 +1020,7 @@ export function VideoPlayer({
     <div
       ref={containerRef}
       role="region"
-      aria-label={title ?? 'Lecteur vidéo'}
+      aria-label={title ?? 'Video player'}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onPointerMove={handlePointerActivity}
@@ -1052,7 +1052,7 @@ export function VideoPlayer({
             ref={iframeRef}
             key={`${kind}-${embedId}`}
             src={embedSrc ?? undefined}
-            title={title ?? 'Lecteur vidéo'}
+            title={title ?? 'Video player'}
             className="absolute inset-0 z-0 h-full w-full border-0"
             allow="autoplay; fullscreen; picture-in-picture; encrypted-media; clipboard-write"
             referrerPolicy="strict-origin-when-cross-origin"
@@ -1063,7 +1063,7 @@ export function VideoPlayer({
           <button
             type="button"
             onClick={startEmbed}
-            aria-label={title ? `Lire ${title}` : 'Lire la vidéo'}
+            aria-label={title ? `Play ${title}` : 'Play the video'}
             className="absolute inset-0 z-0 h-full w-full cursor-pointer"
           >
             {thumbnail && shouldLoad ? (
@@ -1153,7 +1153,7 @@ export function VideoPlayer({
         <button
           type="button"
           onClick={() => void attemptPlay()}
-          aria-label={needsGesture ? 'Lancer la lecture' : 'Lire la vidéo'}
+          aria-label={needsGesture ? 'Start playback' : 'Play the video'}
           className="absolute inset-0 z-10 grid place-items-center bg-black/25 transition-colors duration-200 hover:bg-black/10"
         >
           <span className="grid size-16 place-items-center rounded-full bg-white/15 text-white ring-1 ring-white/30 backdrop-blur-md transition-transform duration-200 hover:scale-105">
@@ -1166,7 +1166,7 @@ export function VideoPlayer({
         <button
           type="button"
           onClick={toggleEmbedPlay}
-          aria-label="Lire la vidéo"
+          aria-label="Play the video"
           className="absolute inset-0 z-10 grid place-items-center bg-black/25 transition-colors duration-200 hover:bg-black/10"
         >
           <span className="grid size-16 place-items-center rounded-full bg-white/15 text-white ring-1 ring-white/30 backdrop-blur-md transition-transform duration-200 hover:scale-105">
@@ -1297,7 +1297,7 @@ export function VideoPlayer({
                       onClick={() =>
                         setOpenMenu((menu) => (menu === 'subtitles' ? null : 'subtitles'))
                       }
-                      aria-label="Sous-titres"
+                      aria-label="Subtitles"
                       aria-expanded={openMenu === 'subtitles'}
                       className={cn(iconButton, activeSubtitle >= 0 && 'text-[var(--vp-accent)]')}
                     >
@@ -1318,7 +1318,7 @@ export function VideoPlayer({
                               : 'text-white/80 hover:bg-white/10',
                           )}
                         >
-                          Désactivés
+                          Off
                           {activeSubtitle === -1 && <Check className="size-3.5" />}
                         </button>
                         {subtitleTracks.map((track, trackIndex) => (
@@ -1350,7 +1350,7 @@ export function VideoPlayer({
                     <button
                       type="button"
                       onClick={() => setOpenMenu((menu) => (menu === 'speed' ? null : 'speed'))}
-                      aria-label="Vitesse de lecture"
+                      aria-label="Playback speed"
                       aria-expanded={openMenu === 'speed'}
                       className="h-9 min-w-11 rounded-full px-2 text-[11px] font-semibold tabular-nums text-white/85 transition hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--vp-accent)]"
                     >
@@ -1386,7 +1386,7 @@ export function VideoPlayer({
                       onClick={() =>
                         setOpenMenu((menu) => (menu === 'quality' ? null : 'quality'))
                       }
-                      aria-label="Choisir la qualité"
+                      aria-label="Choose the quality"
                       aria-expanded={openMenu === 'quality'}
                       className="flex h-9 items-center gap-1 rounded-full px-2 text-[11px] font-semibold text-white/85 transition hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--vp-accent)]"
                     >
@@ -1420,7 +1420,7 @@ export function VideoPlayer({
                   <button
                     type="button"
                     onClick={() => void togglePip()}
-                    aria-label="Image dans l'image"
+                    aria-label="Picture in picture"
                     className={cn(iconButton, 'hidden sm:inline-flex')}
                   >
                     <PictureInPicture2 className="size-4" />
@@ -1430,7 +1430,7 @@ export function VideoPlayer({
                 <button
                   type="button"
                   onClick={toggleFullscreen}
-                  aria-label={fullscreen ? 'Quitter le plein écran' : 'Plein écran'}
+                  aria-label={fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
                   className={iconButton}
                 >
                   {fullscreen ? (
@@ -1461,7 +1461,7 @@ export function VideoPlayer({
             className="inline-flex items-center gap-2 rounded-full bg-white px-3.5 py-1.5 text-xs font-medium text-black transition hover:bg-white/85"
           >
             <RotateCcw className="size-3.5" />
-            Réessayer
+            Retry
           </button>
         </div>
       )}

package/src/lib/date.ts

@@ -4,29 +4,29 @@ export interface DateRange {
 }
 
 export const MONTHS = [
-  'janvier',
-  'février',
-  'mars',
-  'avril',
-  'mai',
-  'juin',
-  'juillet',
-  'août',
-  'septembre',
-  'octobre',
-  'novembre',
-  'décembre',
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
 ]
 
-export const WEEKDAYS_SHORT = ['L', 'M', 'M', 'J', 'V', 'S', 'D']
+export const WEEKDAYS_SHORT = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
 export const WEEKDAYS_LONG = [
-  'lundi',
-  'mardi',
-  'mercredi',
-  'jeudi',
-  'vendredi',
-  'samedi',
-  'dimanche',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
 ]
 
 export function startOfDay(date: Date): Date {
@@ -60,7 +60,7 @@ export function daysInMonth(year: number, month: number): number {
   return new Date(year, month + 1, 0).getDate()
 }
 
-/** Calendrier de 6 semaines, lundi en premier. */
+/** 6-week calendar grid, Monday first. */
 export function getMonthMatrix(year: number, month: number): Date[] {
   const first = new Date(year, month, 1)
   const offset = (first.getDay() + 6) % 7
@@ -74,13 +74,13 @@ export function formatMonthYear(date: Date): string {
 
 export function formatLongDate(date: Date): string {
   const weekday = WEEKDAYS_LONG[(date.getDay() + 6) % 7]
-  return `${weekday} ${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`
+  return `${weekday}, ${MONTHS[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`
 }
 
 export function formatShortDate(date: Date): string {
   return [
-    String(date.getDate()).padStart(2, '0'),
     String(date.getMonth() + 1).padStart(2, '0'),
+    String(date.getDate()).padStart(2, '0'),
     date.getFullYear(),
   ].join('/')
 }
@@ -95,10 +95,10 @@ export function parseDateInput(text: string): Date | null {
     return Number.isNaN(date.getTime()) ? null : date
   }
 
-  const french = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(value)
-  if (french) {
-    const year = Number(french[3]) < 100 ? 2000 + Number(french[3]) : Number(french[3])
-    const date = new Date(year, Number(french[2]) - 1, Number(french[1]))
+  const monthFirst = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(value)
+  if (monthFirst) {
+    const year = Number(monthFirst[3]) < 100 ? 2000 + Number(monthFirst[3]) : Number(monthFirst[3])
+    const date = new Date(year, Number(monthFirst[1]) - 1, Number(monthFirst[2]))
     return Number.isNaN(date.getTime()) ? null : date
   }
 
@@ -120,7 +120,7 @@ export function clampDate(date: Date, min?: Date, max?: Date): Date {
 }
 
 export function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} o`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }

package/src/lib/uploader.ts

@@ -1,9 +1,9 @@
 export interface UploaderOptions {
-  /** Endpoint de signature. Défaut : /api/upload/sign */
+  /** Signing endpoint. Default: /api/upload/sign */
   signEndpoint?: string
-  /** Nombre de tentatives supplémentaires en cas d'échec. Défaut : 2 */
+  /** Number of extra attempts on failure. Default: 2 */
   retries?: number
-  /** Délai de base entre les tentatives (ms). Défaut : 800 */
+  /** Base delay between attempts (ms). Default: 800 */
   retryDelayMs?: number
 }
 
@@ -42,7 +42,7 @@ function putWithProgress(
         onProgress(1)
         resolvePromise()
       } else {
-        reject(new UploadError(`Le serveur a répondu ${request.status}`, request.status))
+        reject(new UploadError(`The server returned ${request.status}`, request.status))
       }
     }
     request.onerror = () => reject(new UploadError('Connexion interrompue pendant l’envoi'))
@@ -52,12 +52,12 @@ function putWithProgress(
 }
 
 /**
- * Uploader « réel » branché sur /api/upload/sign :
- *  1. demande une URL signée au serveur,
- *  2. envoie le fichier en PUT avec progression (XHR),
- *  3. réessaie automatiquement en réutilisant la même URL signée (reprise).
+ * “Real” uploader wired to /api/upload/sign:
+ *  1. asks the server for a signed URL,
+ *  2. sends the file with a PUT and progress (XHR),
+ *  3. retries automatically, reusing the same signed URL (resume).
  *
- * Renvoie l'URL publique du fichier déposé.
+ * Returns the public URL of the uploaded file.
  */
 export function createUploader(options: UploaderOptions = {}) {
   const {
@@ -73,7 +73,7 @@ export function createUploader(options: UploaderOptions = {}) {
       body: JSON.stringify({ name: file.name, size: file.size, type: file.type }),
     })
     if (!signResponse.ok) {
-      throw new UploadError(`Signature refusée (${signResponse.status})`, signResponse.status)
+      throw new UploadError(`Signature refused (${signResponse.status})`, signResponse.status)
     }
     const signed = (await signResponse.json()) as SignedUpload
 
@@ -85,7 +85,7 @@ export function createUploader(options: UploaderOptions = {}) {
       } catch (error) {
         lastError = error
         const status = error instanceof UploadError ? error.status : undefined
-        // 4xx = refus définitif (taille, clé, auth) : inutile de réessayer
+        // 4xx = final refusal (size, key, auth): no point retrying
         if (status !== undefined && status >= 400 && status < 500) break
         if (attempt < retries) {
           await new Promise((resolvePromise) =>
@@ -96,11 +96,11 @@ export function createUploader(options: UploaderOptions = {}) {
     }
     throw lastError instanceof Error
       ? lastError
-      : new UploadError('Échec de l’envoi après plusieurs tentatives')
+      : new UploadError('Upload failed after several attempts')
   }
 }
 
-/** File d'attente par URL signée : permet la reprise d'un envoi interrompu. */
+/** Queue per signed URL: allows resuming an interrupted upload. */
 export function resumeUpload(
   signed: SignedUpload,
   file: File,

package/src/lib/use-controllable.ts

@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 /**
- * Retourne un état local piloté par une prop quand celle-ci est explicite.
+ * Returns local state driven by a prop when that prop is explicit.
  *
- * Quand le parent fournit explicitement la prop, l'état local se
- * synchronise dessus. Quand la prop est `undefined`, le composant garde
- * sa propre valeur locale.
+ * When the parent explicitly provides the prop, the local state stays
+ * in sync with it. When the prop is `undefined`, the component keeps
+ * its own local value.
  *
- * Cette version est compatible avec React Compiler : elle n'accède jamais
- * aux refs pendant le rendu.
+ * This version is compatible with React Compiler: it never reads
+ * refs during render.
  */
 export function useControllableValue<T>(
   prop: T | undefined,
@@ -21,14 +21,14 @@ export function useControllableValue<T>(
 
   const isControlled = prop !== undefined
 
-  // Synchronise l'état local quand le contrôle parent change.
+  // Keeps the local state in sync when the parent control changes.
   useEffect(() => {
     controlledRef.current = isControlled
     previousPropRef.current = prop
   })
 
-  // Premier rendu contrôlé : la prop doit remplacer l'état local.
-  // Passages ultérieurs : synchronise seulement si la prop a changé.
+  // First controlled render: the prop must replace the local state.
+  // Later renders: only sync when the prop changed.
   useEffect(() => {
     if (!isControlled) return
     const next = prop as T

package/src/lib/use-hotkeys.ts

@@ -25,7 +25,7 @@ function matches(pattern: string, event: KeyboardEvent): boolean {
   return event.key.toLowerCase() === key
 }
 
-/** Enregistre des raccourcis globaux : `mod+k`, `shift+?`, `escape`, `arrowup`… */
+/** Registers global shortcuts: `mod+k`, `shift+?`, `escape`, `arrowup`… */
 export function useHotkeys(map: HotkeyMap, options: { enabled?: boolean } = {}) {
   const handlers = useRef(map)
   const enabled = options.enabled ?? true

package/src/lib/use-theme.ts

@@ -21,8 +21,8 @@ function applyTheme(theme: Theme) {
 }
 
 /**
- * Thème clair/sombre persistant. `system` suit la préférence système
- * tant que l'utilisateur n'a pas fait de choix explicite.
+ * Persistent light/dark theme. `system` follows the system preference
+ * until the user makes an explicit choice.
  */
 export function useTheme() {
   const [theme, setThemeState] = useState<Theme>(readTheme)