uifolio 0.5.1 → 0.5.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uifolio",
-  "version": "0.5.1",
-  "description": "CLI qui copie des composants React (calendrier, lecteurs vidéo/audio, OTP, éditeur, upload) et leurs helpers dans ton projet, avec des tokens Tailwind CSS 4.",
+  "version": "0.5.4",
+  "description": "CLI that copies React components (calendar, video/audio players, OTP, editor, upload) and their helpers into your project, with Tailwind CSS 4 tokens.",
   "type": "module",
   "license": "MIT",
   "author": "Barronakn <jeanbarronalokpon@gmail.com>",
@@ -29,6 +29,7 @@
     "file-upload",
     "rich-text-editor",
     "command-menu",
+    "data-table",
     "resizable-panels",
     "time-picker",
     "cadence",

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

@@ -136,7 +136,7 @@ export function AudioPlayer({
               <button
                 type="button"
                 onClick={() => void togglePlay()}
-                aria-label={playing ? 'Mettre en pause' : 'Lire'}
+                aria-label={playing ? 'Pause' : 'Play'}
                 className="grid size-9 shrink-0 place-items-center rounded-full bg-[var(--ap-accent)] text-black shadow-sm transition hover:brightness-110"
               >
                 {playing ? (
@@ -157,7 +157,7 @@ export function AudioPlayer({
                   step={0.05}
                   value={Math.min(currentTime, duration || 0)}
                   onChange={(event) => seek(Number(event.target.value))}
-                  aria-label="Position de lecture"
+                  aria-label="Playback position"
                   className="h-1 w-full min-w-0 cursor-pointer appearance-none rounded-full"
                   style={{
                     accentColor: accent,
@@ -176,7 +176,7 @@ export function AudioPlayer({
           <button
             type="button"
             onClick={() => void togglePlay()}
-            aria-label={playing ? 'Mettre en pause' : 'Lire'}
+            aria-label={playing ? 'Pause' : 'Play'}
             className="grid size-8 shrink-0 place-items-center rounded-full bg-[var(--ap-accent)] text-black transition hover:brightness-110"
           >
             {playing ? (
@@ -195,7 +195,7 @@ export function AudioPlayer({
               step={0.05}
               value={Math.min(currentTime, duration || 0)}
               onChange={(event) => seek(Number(event.target.value))}
-              aria-label="Position de lecture"
+              aria-label="Playback position"
               className="mt-1.5 h-1 w-full cursor-pointer appearance-none rounded-full"
               style={{
                 accentColor: accent,
@@ -214,7 +214,7 @@ export function AudioPlayer({
         <button
           type="button"
           onClick={() => setMuted((value) => !value)}
-          aria-label={muted ? 'Activer le son' : 'Couper le son'}
+          aria-label={muted ? 'Unmute' : 'Mute'}
           className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           {effectiveVolume === 0 ? (
@@ -246,12 +246,12 @@ export function AudioPlayer({
         <button
           type="button"
           onClick={cycleRate}
-          aria-label={`Vitesse ${rate}×`}
+          aria-label={`Speed ${rate}×`}
           className="ml-auto rounded-md px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           {rate}×
         </button>
-        {error && <span className="text-[10px] text-rose-400">Source indisponible</span>}
+        {error && <span className="text-[10px] text-rose-400">Source unavailable</span>}
       </div>
     </div>
   )

package/src/components/ui/calendar.tsx

@@ -199,7 +199,7 @@ export function Calendar({
             <>
               <label className="flex items-center gap-2 rounded-xl border bg-background/40 px-2.5 py-1.5 focus-within:ring-2 focus-within:ring-primary/40">
                 <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
-                <span className="sr-only">Début (jj/mm/aaaa)</span>
+                <span className="sr-only">Start (MM/DD/YYYY)</span>
                 <input
                   value={fromDraft}
                   onChange={(event) => setFromDraft(event.target.value)}
@@ -210,14 +210,14 @@ export function Calendar({
                       applyRange(fromDraft, toDraft)
                     }
                   }}
-                  placeholder="du jj/mm/aaaa"
+                  placeholder="from MM/DD/YYYY"
                   inputMode="numeric"
                   className="w-full bg-transparent text-xs tabular-nums outline-none placeholder:text-muted-foreground/60"
                 />
               </label>
               <label className="flex items-center gap-2 rounded-xl border bg-background/40 px-2.5 py-1.5 focus-within:ring-2 focus-within:ring-primary/40">
                 <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
-                <span className="sr-only">Fin (jj/mm/aaaa)</span>
+                <span className="sr-only">End (MM/DD/YYYY)</span>
                 <input
                   value={toDraft}
                   onChange={(event) => setToDraft(event.target.value)}
@@ -228,7 +228,7 @@ export function Calendar({
                       applyRange(fromDraft, toDraft)
                     }
                   }}
-                  placeholder="au jj/mm/aaaa"
+                  placeholder="to MM/DD/YYYY"
                   inputMode="numeric"
                   className="w-full bg-transparent text-xs tabular-nums outline-none placeholder:text-muted-foreground/60"
                 />
@@ -242,7 +242,7 @@ export function Calendar({
         <button
           type="button"
           onClick={() => setVisibleMonth((month) => addMonths(month, -1))}
-          aria-label="Mois précédent"
+          aria-label="Previous month"
           className="inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           <ChevronLeft className="size-4" />

package/src/components/ui/color-picker.tsx

@@ -296,7 +296,7 @@ export function ColorPicker({
           type="button"
           onClick={toggle}
           disabled={disabled}
-          aria-label="Ouvrir le sélecteur de couleur"
+          aria-label="Open the color picker"
           aria-haspopup="dialog"
           aria-expanded={isOpen}
           aria-controls={panelId}
@@ -313,7 +313,7 @@ export function ColorPicker({
 
         <div className="relative min-w-0 flex-1">
           <span className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 font-mono text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">
-            {displayFormat}
+            {label ?? 'Color'}
           </span>
           <input
             id={inputId}
@@ -336,7 +336,7 @@ export function ColorPicker({
             }}
             spellCheck={false}
             aria-invalid={invalid}
-            aria-label="Valeur de la couleur"
+            aria-label="Color value"
             placeholder={displayFormat === 'hex' ? '#10B981' : displayFormat === 'rgb' ? 'rgb(16, 185, 129)' : 'hsl(160, 84%, 39%)'}
             className={cn(
               'h-8 w-full rounded-sm border bg-background pl-10 pr-2 font-mono text-[10.5px] text-foreground outline-none transition placeholder:normal-case placeholder:text-muted-foreground/70 focus:border-primary/60 focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed',
@@ -349,8 +349,8 @@ export function ColorPicker({
           type="button"
           onClick={toggle}
           disabled={disabled}
-          aria-label="Personnaliser la couleur"
-          title="Personnaliser la couleur"
+          aria-label="Customize the color"
+          title="Customize the color"
           className={cn(
             'grid size-8 shrink-0 place-items-center rounded-sm border transition outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed',
             isOpen
@@ -372,7 +372,7 @@ export function ColorPicker({
             ref={panelRef}
             id={panelId}
             role="dialog"
-            aria-label="Sélecteur de couleur"
+            aria-label="Color picker"
             tabIndex={-1}
             style={{
               position: 'fixed',
@@ -382,11 +382,11 @@ export function ColorPicker({
               maxHeight: 'min(620px, calc(100dvh - 20px))',
               visibility: position ? 'visible' : 'hidden',
             }}
-            className="z-[100] overflow-y-auto rounded-md border bg-card text-card-foreground shadow-2xl outline-none"
+            className="z-100 overflow-y-auto rounded-md border bg-card text-card-foreground shadow-2xl outline-none"
           >
             <div className="flex items-start justify-between gap-3 border-b px-3.5 py-3">
               <div className="min-w-0">
-                <p className="text-[11px] font-semibold">Sélecteur de couleur</p>
+                <p className="text-[11px] font-semibold">Color picker</p>
                 <p className="mt-0.5 truncate font-mono text-[9.5px] uppercase tracking-wide text-muted-foreground">
                   {formatColor(current, 'hex', showAlpha)}
                 </p>
@@ -394,7 +394,7 @@ export function ColorPicker({
               <button
                 type="button"
                 onClick={close}
-                aria-label="Fermer le sélecteur de couleur"
+                aria-label="Close the color picker"
                 className="grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <X className="size-3.5" />
@@ -404,7 +404,7 @@ export function ColorPicker({
             <div className="space-y-3 p-3.5">
               <div
                 role="group"
-                aria-label="Saturation et luminosité"
+                aria-label="Saturation and luminance"
                 tabIndex={disabled ? -1 : 0}
                 onPointerDown={(event) => {
                   if (disabled) return
@@ -444,7 +444,7 @@ export function ColorPicker({
 
               <div className="space-y-2">
                 <div className="flex items-center justify-between text-[9px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                  <span>Teinte</span>
+                  <span>Hue</span>
                   <span className="font-mono">{Math.round(hue)}°</span>
                 </div>
                 <input
@@ -458,7 +458,7 @@ export function ColorPicker({
                     setDraft(null)
                     emitHsv({ ...hsva, h: Number(event.target.value) })
                   }}
-                  aria-label="Teinte"
+                  aria-label="Hue"
                   className="h-3 w-full cursor-pointer appearance-none rounded-full outline-none transition focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:shadow-md [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:shadow-md"
                   style={{
                     background:
@@ -484,7 +484,7 @@ export function ColorPicker({
                       setDraft(null)
                       emit({ ...current, a: Number(event.target.value) / 100 })
                     }}
-                    aria-label="Transparence"
+                    aria-label="Transparency"
                     className="h-3 w-full cursor-pointer appearance-none rounded-full border border-border outline-none transition focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:shadow-md [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:shadow-md"
                     style={{
                       backgroundColor: 'transparent',
@@ -530,8 +530,8 @@ export function ColorPicker({
                     type="button"
                     disabled={disabled}
                     onClick={pickFromScreen}
-                    title="Prélever une couleur à l’écran"
-                    aria-label="Prélever une couleur à l’écran"
+                    title="Pick a color from the screen"
+                    aria-label="Pick a color from the screen"
                     className="inline-flex items-center gap-1.5 rounded-sm border border-border px-2 py-1 text-[9px] font-semibold uppercase tracking-[0.1em] text-muted-foreground transition hover:border-primary/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <Pipette className="size-3" />
@@ -589,7 +589,7 @@ export function ColorPicker({
                             emit(rgba)
                           }}
                           title={raw}
-                          aria-label={`Couleur ${raw}`}
+                          aria-label={`Color ${raw}`}
                           aria-pressed={selected}
                           className={cn(
                             'relative grid size-5 place-items-center overflow-hidden rounded-sm border transition hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed',
@@ -614,7 +614,7 @@ export function ColorPicker({
 
               {checkerAlpha && (
                 <p className="text-[9px] leading-relaxed text-muted-foreground">
-                  La transparence est incluse dans la valeur exportée.
+                  The opacity is included in the exported value.
                 </p>
               )}
             </div>

package/src/components/ui/command-menu.tsx

@@ -34,7 +34,7 @@ export function CommandMenu({
   defaultOpen = false,
   onOpenChange,
   placeholder = 'Rechercher une commande…',
-  emptyText = 'Aucun résultat.',
+  emptyText = 'No result.',
   emptyState,
   className,
 }: Readonly<CommandMenuProps>) {
@@ -94,7 +94,7 @@ export function CommandMenu({
 
   return (
     <div
-      className="fixed inset-0 z-[70] flex items-start justify-center bg-black/65 px-4 pt-[12vh] backdrop-blur-sm"
+      className="fixed inset-0 z-70 flex items-start justify-center bg-black/65 px-4 pt-[12vh] backdrop-blur-sm"
       onPointerDown={(event) => {
         if (event.target === event.currentTarget) setOpen(false)
       }}
@@ -102,7 +102,7 @@ export function CommandMenu({
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="Palette de commandes"
+        aria-label="Command palette"
         className={cn(
           'w-full max-w-lg overflow-hidden rounded-sm border bg-card shadow-2xl shadow-black/50',
           className,
@@ -211,8 +211,8 @@ export function CommandMenu({
 
         <div className="flex items-center justify-between border-t px-3.5 py-2 text-[10px] text-muted-foreground">
           <span className="flex items-center gap-3">
-            <span>↑↓ naviguer</span>
-            <span>↵ ouvrir</span>
+            <span>↑↓ to navigate</span>
+            <span>↵ to open</span>
           </span>
           <span className="font-mono">ctrl / ⌘ + k</span>
         </div>

package/src/components/ui/file-upload.tsx

@@ -14,7 +14,7 @@ export interface UploadItem {
   progress: number
   status: UploadStatus
   error?: string
-  /** URL publique renvoyée par l'uploader (upload réel). */
+  /** Public URL returned by the uploader (real upload). */
   url?: string
 }
 
@@ -23,7 +23,7 @@ export interface FileUploadProps {
   multiple?: boolean
   maxSizeMb?: number
   maxFiles?: number
-  /** Renvoie l'URL publique du fichier (upload réel) ou void. */
+  /** Returns the public file URL (real upload) or void. */
   uploader?: (file: File, onProgress: (value: number) => void) => Promise<string | void>
   onChange?: (items: UploadItem[]) => void
   className?: string
@@ -142,11 +142,11 @@ export function FileUpload({
     for (const file of files) {
       if (accepted.length >= slots) break
       if (file.size > maxSizeMb * 1024 * 1024) {
-        errors.push(`${file.name} dépasse ${maxSizeMb} Mo`)
+        errors.push(`${file.name} exceeds ${maxSizeMb} MB`)
         continue
       }
       if (accept && !matchesAccept(file, accept)) {
-        errors.push(`${file.name} n'est pas un type accepté`)
+        errors.push(`${file.name} is not an accepted type`)
         continue
       }
       accepted.push(file)
@@ -218,10 +218,10 @@ export function FileUpload({
           <Upload className="size-5" />
         </span>
         <span className="text-sm font-medium">
-          {dragging ? 'Dépose ici' : 'Glisse tes fichiers ou clique'}
+          {dragging ? 'Drop here' : 'Drag your files or click'}
         </span>
         <span className="max-w-xs text-[11px] leading-relaxed text-muted-foreground">
-          {accept ? accept.replaceAll(',', ' · ') : 'Tous types'} — jusqu'à {maxSizeMb} Mo
+          {accept ? accept.replaceAll(',', ' · ') : 'All types'} — up to {maxSizeMb} MB
           {multiple ? ` · ${maxFiles} fichiers` : ''}
         </span>
         <input
@@ -243,7 +243,7 @@ export function FileUpload({
           <button
             type="button"
             onClick={() => setRejection(null)}
-            aria-label="Masquer l'erreur"
+            aria-label="Hide error"
             className="text-rose-300/70 transition hover:text-rose-200"
           >
             <X className="size-3.5" />
@@ -302,9 +302,9 @@ export function FileUpload({
                   href={item.url}
                   target={item.url ? '_blank' : undefined}
                   rel="noreferrer"
-                  title={item.url ?? 'Envoyé'}
+                  title={item.url ?? 'Uploaded'}
                   className="grid size-7 shrink-0 place-items-center rounded-md text-emerald-400 transition hover:bg-emerald-400/10"
-                  aria-label={item.url ? `Ouvrir ${item.file.name}` : 'Envoyé'}
+                  aria-label={item.url ? `Open ${item.file.name}` : 'Uploaded'}
                 >
                   <Check className="size-4" />
                 </a>
@@ -313,7 +313,7 @@ export function FileUpload({
                 <button
                   type="button"
                   onClick={() => retry(item)}
-                  aria-label="Réessayer"
+                  aria-label="Retry"
                   className="grid size-7 place-items-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
                 >
                   <RotateCcw className="size-3.5" />
@@ -322,7 +322,7 @@ export function FileUpload({
               <button
                 type="button"
                 onClick={() => remove(item.id)}
-                aria-label={`Retirer ${item.file.name}`}
+                aria-label={`Remove ${item.file.name}`}
                 className="grid size-7 place-items-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
               >
                 <X className="size-3.5" />

package/src/components/ui/icon-picker.tsx

@@ -158,7 +158,7 @@ export function IconGlyph({
   const [prevIcon, setPrevIcon] = useState(icon)
   const loadRef = useRef<Promise<void> | null>(null)
 
-  // Ajustement pendant le rendu : une icône déjà en cache s'applique sans effet.
+  // Render-time adjustment: an icon already cached is applied with no effect.
   if (prevIcon !== icon) {
     setPrevIcon(icon)
     setData(iconCache.get(icon) ?? null)
@@ -184,7 +184,7 @@ export function IconPicker({
   value,
   color = 'var(--primary)',
   onChange,
-  placeholder = 'Choisir une icône',
+  placeholder = 'Choose an icon',
   className,
 }: Readonly<IconPickerProps>) {
   const [open, setOpen] = useState(false)
@@ -206,7 +206,7 @@ export function IconPicker({
           `https://api.iconify.design/search?query=${encodeURIComponent(q)}&limit=96&prefixes=${SEARCH_PREFIXES}`,
           { signal: controller.signal },
         )
-        if (!res.ok) throw new Error('Erreur lors de la recherche des icônes')
+        if (!res.ok) throw new Error('Error while searching icons')
         const data: IconSearchResponse = await res.json()
         setIcons(data.icons ?? [])
       } catch (err) {
@@ -245,7 +245,7 @@ export function IconPicker({
 
   return (
     <div className={cn('relative w-full max-w-md', className)}>
-      {/* Bouton principal */}
+      {/* Main button */}
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
@@ -270,12 +270,12 @@ export function IconPicker({
       {/* Picker */}
       {open && (
         <div className="absolute left-0 top-full z-50 mt-2 w-full overflow-hidden rounded-xl border border-border bg-card shadow-xl">
-          {/* En-tête */}
+          {/* Header */}
           <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <div>
-              <p className="text-sm font-medium text-foreground">Choisir une icône</p>
+              <p className="text-sm font-medium text-foreground">Choose an icon</p>
               <p className="text-xs text-muted-foreground">
-                Recherchez parmi des milliers d'icônes
+                Search among thousands of icons
               </p>
             </div>
             <button
@@ -287,7 +287,7 @@ export function IconPicker({
             </button>
           </div>
 
-          {/* Barre de recherche */}
+          {/* Search bar */}
           <div className="border-b border-border p-3">
             <div className="relative">
               <Search
@@ -298,14 +298,14 @@ export function IconPicker({
                 type="text"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                placeholder="Rechercher : shirt, shopping, home..."
+                placeholder="Search: shirt, shopping, home..."
                 autoFocus
                 className="h-10 w-full rounded-lg border border-border bg-muted/50 pl-9 pr-3 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary/60 focus:bg-card"
               />
             </div>
           </div>
 
-          {/* Liste d'icônes */}
+          {/* Icon list */}
           <div className="max-h-36 overflow-y-auto p-3">
             {loading ? (
               <div className="grid grid-cols-[repeat(auto-fill,minmax(2.5rem,1fr))] gap-2">
@@ -349,10 +349,10 @@ export function IconPicker({
               <div className="flex flex-col items-center justify-center py-6 text-center">
                 <Search size={26} className="mb-2 text-muted-foreground/50" />
                 <p className="text-sm font-medium text-muted-foreground">
-                  Aucune icône trouvée
+                  No icon found
                 </p>
                 <p className="mt-1 text-xs text-muted-foreground/70">
-                  Essayez un autre terme
+                  Try another term
                 </p>
               </div>
             )}

package/src/components/ui/resizable.tsx

@@ -183,7 +183,7 @@ export function ResizableHandle({ className }: Readonly<{ className?: string }>)
       }}
       className={cn('group/handle relative shrink-0 outline-none', className)}
     >
-      <span className="sr-only">Utilise les flèches pour redimensionner</span>
+      <span className="sr-only">Use the arrows to resize</span>
     </div>
   )
 }

package/src/components/ui/rich-text-editor.tsx

@@ -38,7 +38,7 @@ export function RichTextEditor({
   value,
   defaultValue = '',
   onChange,
-  placeholder = 'Écris quelque chose…',
+  placeholder = 'Write something…',
   readOnly = false,
   toolbar = true,
   minHeight = 220,
@@ -115,7 +115,7 @@ export function RichTextEditor({
       editor.focus()
       return
     }
-    const input = window.prompt('URL du lien', 'https://')
+    const input = window.prompt('Enter link URL', 'https://')
     if (!input) return
     const url = /^(https?:|mailto:|tel:)/i.test(input) ? input : `https://${input}`
     exec('createLink', url)
@@ -136,21 +136,21 @@ export function RichTextEditor({
     >
       {toolbar && (
         <div className="flex flex-wrap items-center gap-0.5 border-b bg-muted/30 p-1.5">
-          <ToolButton label="Gras" active={active.bold} onClick={() => exec('bold')}>
+          <ToolButton label="Bold" active={active.bold} onClick={() => exec('bold')}>
             <Bold className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Italique" active={active.italic} onClick={() => exec('italic')}>
+          <ToolButton label="Italic" active={active.italic} onClick={() => exec('italic')}>
             <Italic className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Souligné"
+            label="Underline"
             active={active.underline}
             onClick={() => exec('underline')}
           >
             <Underline className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Barré"
+            label="Strikethrough"
             active={active.strikeThrough}
             onClick={() => exec('strikeThrough')}
           >
@@ -159,17 +159,17 @@ export function RichTextEditor({
 
           <Divider />
 
-          <ToolButton label="Titre 2" active={active.h2} onClick={() => toggleBlock('h2')}>
+          <ToolButton label="Heading 2" active={active.h2} onClick={() => toggleBlock('h2')}>
             <Heading2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Titre 3" active={active.h3} onClick={() => toggleBlock('h3')}>
+          <ToolButton label="Heading 3" active={active.h3} onClick={() => toggleBlock('h3')}>
             <Heading3 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Paragraphe" onClick={() => toggleBlock('p')}>
+          <ToolButton label="Paragraph" onClick={() => toggleBlock('p')}>
             <Pilcrow className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Citation"
+            label="Quote"
             active={active.blockquote}
             onClick={() => toggleBlock('blockquote')}
           >
@@ -182,37 +182,36 @@ export function RichTextEditor({
           <Divider />
 
           <ToolButton
-            label="Liste à puces"
+            label="Bullet list"
             active={active.insertUnorderedList}
             onClick={() => exec('insertUnorderedList')}
           >
             <List className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Liste numérotée"
+            label="Numbered list"
             active={active.insertOrderedList}
             onClick={() => exec('insertOrderedList')}
           >
             <ListOrdered className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Lien" onClick={addLink}>
+          <ToolButton label="Link" onClick={addLink}>
             <Link2 className="size-3.5" />
           </ToolButton>
 
           <Divider />
 
-          <ToolButton label="Annuler" onClick={() => exec('undo')}>
+          <ToolButton label="Undo" onClick={() => exec('undo')}>
             <Undo2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Rétablir" onClick={() => exec('redo')}>
+          <ToolButton label="Redo" onClick={() => exec('redo')}>
             <Redo2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Effacer la mise en forme" onClick={() => exec('removeFormat')}>
+          <ToolButton label="Remove formatting" onClick={() => exec('removeFormat')}>
             <RemoveFormatting className="size-3.5" />
           </ToolButton>
 
-          <span className="ml-auto px-1.5 text-[10px] tabular-nums text-muted-foreground">
-            {characters} car.
+          <span className="ml-auto px-1.5 text-[10px] tabular-nums text-muted-foreground">{characters} chars
           </span>
         </div>
       )}

package/src/components/ui/stories.tsx

@@ -51,7 +51,7 @@ export function Stories({
   const setOpen = useCallback(
     (next: boolean) => {
       if (next) {
-        // Réinitialise la lecture à l'ouverture plutôt que par un effet.
+        // Restarts playback at open rather than via an effect.
         elapsedRef.current = 0
         setPaused(false)
       }
@@ -166,7 +166,7 @@ export function Stories({
       aria-modal="true"
       aria-label="Stories"
       className={cn(
-        'fixed inset-0 z-[80] flex items-center justify-center bg-black/95 p-0 backdrop-blur-sm sm:p-6',
+        'fixed inset-0 z-80 flex items-center justify-center bg-black/95 p-0 backdrop-blur-sm sm:p-6',
         className,
       )}
     >
@@ -204,13 +204,13 @@ export function Stories({
             )}
             <div className="min-w-0 flex-1">
               <p className="truncate text-xs font-medium text-white">{item.title ?? 'Stories'}</p>
-              <p className="text-[10px] text-white/55">à l'instant</p>
+              <p className="text-[10px] text-white/55">now</p>
             </div>
             <button
               type="button"
               onClick={close}
               onPointerDown={(event) => event.stopPropagation()}
-              aria-label="Fermer les stories"
+              aria-label="Close stories"
               className="grid size-8 place-items-center rounded-full bg-black/40 text-white/80 ring-1 ring-white/15 transition hover:bg-black/60 hover:text-white"
             >
               <X className="size-4" />