uifolio 0.4.0 → 0.5.1

package/README.md

@@ -72,13 +72,23 @@ node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run   # simulate
 
 Options : `--cwd <dir>`, `--dir <chemin>` (défaut `src/components/ui`),
 `--lib <chemin>` (défaut `src/lib`), `--alias <alias>` (défaut `@`),
+`--page <chemin>` (créé s'il n'existe pas), `--interactive` (forcer les questions),
 `--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).
+`add` ne s'arrête pas à la copie : sans `--dir` ni `--page`, la CLI demande
+**dans quel dossier** copier les composants, puis **dans quel fichier** les
+utiliser. La page est créée si elle manque ; si elle existe, l'import et le
+`<Composant />` sont ajoutés dans son JSX (sans doublon). Réponds `-` à la
+seconde question pour installer sans toucher à une page.
+
+Les couleurs passent par des **tokens Tailwind CSS 4** : la CLI écrit
+`uifolio-theme.css` (`:root`, `.dark`, puis `@theme inline` qui expose
+`--color-primary`, `--color-muted-foreground`, …) et l'importe automatiquement
+dans le CSS global du projet (celui qui fait `@import 'tailwindcss'`). Les
+composants gardent donc `bg-primary`, `border-primary/50`, `ring-primary/40` :
+aucune couleur en dur, `--color` change `--primary` dans le thème et `--radius`
+y ajoute `--radius`. Sans CSS global Tailwind détecté, le fichier est écrit à la
+racine et l'import à ajouter est affiché.
 
 À la fin, la CLI affiche les dépendances npm détectées, par ex. :
 
@@ -86,9 +96,6 @@ la couleur choisie même si le projet cible ne définit pas `--primary`. `--radi
 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
 
 - Tokens CSS : `:root` (clair) et `.dark` (sombre) dans `src/index.css`,

package/cli/uifolio.mjs

@@ -6,22 +6,25 @@
  * Commandes :
  *   uifolio list                          liste des composants disponibles
  *   uifolio init [--cwd dir]              écrit uifolio.json (config cible)
- *   uifolio add <noms...> [options]       copie les composants + helpers
- *                                        --page <chemin>  crée ou adapte la page cible
+ *   uifolio add <noms...> [options]       copie les composants + helpers,
+ *                                        écrit les tokens Tailwind et utilise
+ *                                        le composant dans une page
  *
  * Options :
  *   --cwd <dir>          projet cible (défaut : répertoire courant)
  *   --dir <chemin>       dossier des composants (défaut : src/components/ui)
  *   --lib <chemin>       dossier des helpers (défaut : src/lib)
  *   --alias <alias>      alias d'import cible (défaut : @)
- *   --color <hex>        intègre cette couleur aux fichiers copiés (plus de --primary)
+ *   --color <hex>        couleur primaire, écrite dans les tokens Tailwind (@theme)
  *   --radius <px>        écrit --radius dans uifolio-theme.css
+ *   --page <chemin>      fichier où utiliser le composant (créé s'il n'existe pas)
+ *   --interactive        force les questions même quand stdin n'est pas un terminal
  *   --force              écrase les fichiers existants
- *   --page <chemin>      chemin de la page (ex : src/pages/calendar.tsx)
- *                        crée la page si elle n'existe pas, sinon y ajoute
- *                        l'import et un appel de composant
  *   --dry-run            affiche ce qui serait copié sans rien écrire
  *
+ * Sans --dir / --page, la CLI demande interactivement (terminal) dans quel
+ * dossier copier les composants et dans quel fichier les utiliser.
+ *
  * Exemples :
  *   node cli/uifolio.mjs add calendar otp --cwd ../mon-projet
  *   node cli/uifolio.mjs add calendar --color "#10B981" --page src/pages/calendar.tsx
@@ -29,7 +32,8 @@
  */
 
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { dirname, join, relative, resolve } from 'node:path'
+import { basename, dirname, join, relative, resolve } from 'node:path'
+import { createInterface } from 'node:readline/promises'
 import { fileURLToPath } from 'node:url'
 
 const HERE = dirname(fileURLToPath(import.meta.url))
@@ -39,6 +43,21 @@ const CONFIG_NAME = 'uifolio.json'
 
 const LIB_DEPS = ['clsx', 'tailwind-merge'] // cn() — toujours copié avec les helpers
 
+const DEFAULT_ACCENT = '#10b981'
+const DEFAULT_COMPONENTS_DIR = 'src/components/ui'
+const THEME_FILE = 'uifolio-theme.css'
+
+/** Fichiers CSS globaux candidats pour brancher le thème Tailwind. */
+const GLOBAL_CSS_CANDIDATES = [
+  'src/index.css',
+  'src/app.css',
+  'src/globals.css',
+  'src/styles.css',
+  'src/main.css',
+  'app/globals.css',
+  'styles/globals.css',
+]
+
 /* -------------------------------------------------------------------------- */
 /* Utilitaires                                                                */
 /* -------------------------------------------------------------------------- */
@@ -124,21 +143,19 @@ function externalDeps(source) {
   return [...deps]
 }
 
-/**
- * Liste les pages cx (fichiers .tsx dans src/pages/) du projet cible.
- */
+/** Nom réellement exporté par le fichier (otp-input → OtpInput). */
+function componentExportName(source, fallback) {
+  const matches = [...source.matchAll(/export\s+function\s+([A-Z][A-Za-z0-9_]*)/g)].map((match) => match[1])
+  return matches[0] ?? fallback
+}
+
+/** Fichiers .tsx de src/pages/ du projet cible, triés. */
 function listPagesInCwd(cwd) {
-  if (!cwd || typeof cwd !== 'string') return []
   try {
-    const cwdPath = resolve(cwd)
-    const srcRoot = join(cwdPath, 'src')
-    if (!existsSync(srcRoot)) return []
-    const pagesDir = join(srcRoot, 'pages')
+    const pagesDir = join(resolve(cwd), 'src', 'pages')
     if (!existsSync(pagesDir)) return []
-    const entries = readdirSync(pagesDir)
-    if (!Array.isArray(entries)) return []
-    return entries
-      .filter((name) => typeof name === 'string' && name.endsWith('.tsx'))
+    return readdirSync(pagesDir)
+      .filter((name) => name.endsWith('.tsx'))
       .map((name) => join('src', 'pages', name))
       .sort()
   } catch {
@@ -146,71 +163,65 @@ function listPagesInCwd(cwd) {
   }
 }
 
+/** Fichiers où l'usage du composant peut atterrir (indices affichés). */
+function usageCandidates(cwd) {
+  const app = existsSync(join(resolve(cwd), 'src', 'App.tsx')) ? 'src/App.tsx' : null
+  const pages = listPagesInCwd(cwd).filter((page) => page !== app)
+  return app ? [app, ...pages] : pages
+}
+
 /**
- * Demande interactivement à l'utilisateur quelle page utiliser, ou retourne
- * null si l'entrée n'est pas valide / la saisie est vide.
+ * Saisie interactive : uniquement sur un terminal (ou avec --interactive),
+ * jamais en CI / pipe sans données, pour ne pas bloquer l'installation.
  */
-function choosePageInteraction(pages, cwd) {
-  if (!Array.isArray(pages) || pages.length === 0) return null
-  if (pages.length === 1) {
-    info(`Une page existe déjà : ${pages[0]} (utilisée par défaut)`)
-    try {
-      return join(resolve(cwd), pages[0])
-    } catch {
-      return null
+function createPrompter(flags) {
+  const allowed = Boolean(flags.interactive) || process.stdin.isTTY === true
+  if (!allowed) return null
+  const rl = createInterface({ input: process.stdin, output: process.stdout })
+  const queued = []
+  let waiting = null
+  let closed = false
+
+  rl.on('line', (line) => {
+    if (waiting) {
+      const resolveLine = waiting
+      waiting = null
+      resolveLine(line)
+    } else {
+      queued.push(line)
+    }
+  })
+  rl.on('close', () => {
+    closed = true
+    if (waiting) {
+      const resolveLine = waiting
+      waiting = null
+      resolveLine(null)
     }
-  }
-  let cwdPath = cwd
-  try {
-    cwdPath = resolve(cwd)
-  } catch {
-    cwdPath = process.cwd()
-  }
-
-  console.log('\nPlusieurs pages existent dans src/pages/. Choisis celle où importer le/des composant(s) :')
-  pages.forEach((p, index) => {
-    console.log(`  ${index + 1}. ${p}`)
   })
-  console.log('  0. Ne pas importer dans une page')
 
-  const answer = promptPageChoice()
-  if (answer === null) {
-    info('Aucune page sélectionnée : les composants seront copiés sans être importés dans une page.')
-    return null
-  }
-  if (answer === 0) {
-    info('Import dans une page annulé.')
-    return null
-  }
-  const selected = pages[answer - 1]
-  if (!selected) {
-    info('Choix invalide : aucune page sélectionnée.')
-    return null
-  }
-  info(`Page retenue : ${selected}`)
-  try {
-    return join(cwdPath, selected)
-  } catch {
-    return null
-  }
-}
+  return {
+    async ask(question, fallback) {
+      const suffix = fallback ? ` (${fallback})` : ''
+      process.stdout.write(`\n  \x1b[36m?\x1b[0m ${question}${suffix} : `)
 
-/**
- * Lecture synchrone d'une ligne depuis stdin (pour l'interaction CLI).
- * Retourne null en cas d'erreur de lecture ou d'EOF.
- */
-function promptPageChoice() {
-  const chunk = Buffer.alloc(1024)
-  try {
-    const n = process.stdin.read(0, chunk.length, chunk)
-    if (n <= 0) return null
-    const text = chunk.toString('utf8', 0, n).trim()
-    if (text === '') return null
-    const parsed = Number(text)
-    if (!Number.isInteger(parsed)) return null
-    return parsed
-  } catch {
-    return null
+      let answer
+      if (queued.length > 0) answer = queued.shift()
+      else if (closed) answer = null
+      else answer = await new Promise((resolveLine) => {
+        waiting = resolveLine
+      })
+
+      // stdin fermé (pipe sans données) : on garde la valeur par défaut.
+      if (answer === null) return fallback
+      const trimmed = answer.trim()
+      return trimmed === '' ? fallback : trimmed
+    },
+    close() {
+      if (closed) return
+      closed = true
+      rl.close()
+    },
   }
 }
 
@@ -250,47 +261,6 @@ function rewriteAlias(source, targetAlias) {
   return source.replace(/(['"])@\//g, `$1${targetAlias}/`)
 }
 
-/**
- * Remplace les tokens `--primary` par la couleur choisie, directement dans le code
- * copié : `bg-primary` → `bg-[#10b981]`, `var(--primary)` → `#10b981`.
- * Le composant garde alors la couleur demandée sans dépendre de la variable du projet.
- */
-function personalizeColor(source, accent) {
-  if (!accent) return source
-  const foreground = isLightHex(accent) ? '#0f172a' : '#ffffff'
-  return source
-    .replace(/var\(--primary-foreground\)/g, foreground)
-    .replace(/var\(--primary\)/g, accent)
-    .replace(
-      /\b((?:[a-z0-9-]+:)*)(bg|text|border(?:-[xytrblse])?|ring(?:-offset)?|fill|stroke|from|via|to|divide|outline|shadow|accent|caret|decoration|placeholder)-primary(-foreground)?(\/\d+)?\b/g,
-      (_match, prefix, utility, isForeground, opacity = '') =>
-        `${prefix}${utility}-[${isForeground ? foreground : accent}]${opacity}`,
-    )
-}
-
-function copyFile({ to, source, dryRun, force, targetAlias, accent }) {
-  if (existsSync(to) && !force) return 'skipped'
-  if (!dryRun) {
-    mkdirSync(dirname(to), { recursive: true })
-    writeFileSync(to, rewriteAlias(personalizeColor(source, accent), targetAlias), 'utf8')
-  }
-  return 'written'
-}
-
-/* -------------------------------------------------------------------------- */
-/* Commandes                                                                  */
-/* -------------------------------------------------------------------------- */
-
-const ALIASES = {
-  otp: 'otp-input',
-  editor: 'rich-text-editor',
-  panels: 'resizable',
-  shortcuts: 'command-menu',
-  upload: 'file-upload',
-  video: 'video-player',
-}
-
-
 function normalizeHex(value) {
   let next = String(value).trim()
   if (!next.startsWith('#')) next = `#${next}`
@@ -311,35 +281,309 @@ function isLightHex(hex) {
   return 0.299 * r + 0.587 * g + 0.114 * b > 160
 }
 
+/* -------------------------------------------------------------------------- */
+/* Thème Tailwind CSS 4                                                       */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Les composants utilisent uniquement des classes Tailwind (`bg-primary`,
+ * `text-muted-foreground`, `border-border`…). Pour que ces classes existent,
+ * Tailwind 4 doit connaître les tokens via `@theme` : un simple `:root`
+ * ne génère aucune classe utilitaire.
+ */
+function buildThemeCss({ accent, radius }) {
+  const foreground = isLightHex(accent) ? '#0f172a' : '#ffffff'
+  const rootTokens = [
+    '  --background: #f8fafc;',
+    '  --foreground: #0f172a;',
+    '  --card: #ffffff;',
+    '  --card-foreground: #0f172a;',
+    '  --muted: #f1f5f9;',
+    '  --muted-foreground: #64748b;',
+    '  --border: #e2e8f0;',
+    `  --primary: ${accent};`,
+    `  --primary-foreground: ${foreground};`,
+    `  --accent: color-mix(in oklab, ${accent} 18%, var(--background));`,
+    '  --accent-foreground: var(--foreground);',
+    `  --ring: ${accent}80;`,
+  ]
+  if (radius !== undefined) rootTokens.push(`  --radius: ${radius}px;`)
+
+  const darkTokens = [
+    '  --background: #0b1220;',
+    '  --foreground: #e2e8f0;',
+    '  --card: #101a2b;',
+    '  --card-foreground: #e2e8f0;',
+    '  --muted: #1e293b;',
+    '  --muted-foreground: #94a3b8;',
+    '  --border: rgba(255, 255, 255, 0.12);',
+    `  --primary: ${accent};`,
+    `  --primary-foreground: ${foreground};`,
+    `  --accent: color-mix(in oklab, ${accent} 24%, #0b1220);`,
+    '  --accent-foreground: #e2e8f0;',
+    `  --ring: ${accent}80;`,
+    '  color-scheme: dark;',
+  ]
+
+  return `/* uifolio — tokens Tailwind CSS 4 : les classes bg-primary, text-muted-foreground… viennent d'ici. */
+:root {
+${rootTokens.join('\n')}
+}
+
+.dark {
+${darkTokens.join('\n')}
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-ring: var(--ring);
+}
+`
+}
+
+/** CSS global du projet (celui qui importe Tailwind), sinon null. */
+function findGlobalCss(cwd) {
+  for (const candidate of GLOBAL_CSS_CANDIDATES) {
+    const file = join(cwd, candidate)
+    if (!existsSync(file)) continue
+    const source = readFileSync(file, 'utf8')
+    if (/@import\s+['"]tailwindcss|@tailwind\b/.test(source)) return file
+  }
+  for (const candidate of GLOBAL_CSS_CANDIDATES) {
+    const file = join(cwd, candidate)
+    if (existsSync(file)) return file
+  }
+  return null
+}
+
+/** Ajoute `@import './uifolio-theme.css';` juste après l'import de Tailwind. */
+function wireThemeImport(source, specifier) {
+  const line = `@import '${specifier}';`
+  if (source.includes(specifier)) return source
+  const lines = source.split('\n')
+  const at = lines.findIndex((entry) => /@import\s+['"]tailwindcss|@tailwind\s/.test(entry))
+  if (at === -1) return `${line}\n${source}`
+  lines.splice(at + 1, 0, line)
+  return lines.join('\n')
+}
+
+/** `--primary` déjà défini dans un CSS (hex uniquement), sinon null. */
+function existingAccent(file) {
+  if (!file || !existsSync(file)) return null
+  const match = /--primary:\s*(#[0-9a-f]{6})\s*;/i.exec(readFileSync(file, 'utf8'))
+  return match ? match[1].toLowerCase() : null
+}
+
+/** `--radius` déjà défini dans un CSS, sinon undefined. */
+function existingRadius(file) {
+  if (!file || !existsSync(file)) return undefined
+  const match = /--radius:\s*(\d+(?:\.\d+)?)px\s*;/.exec(readFileSync(file, 'utf8'))
+  return match ? Math.round(Number(match[1])) : undefined
+}
+
 function writeTheme({ cwd, accent, radius, dryRun }) {
-  if (!accent && radius === undefined) return
+  const globalCss = findGlobalCss(cwd)
+  const themeFile = globalCss
+    ? join(dirname(globalCss), THEME_FILE)
+    : join(cwd, THEME_FILE)
+  // Sans --color / --radius, on garde le thème déjà en place (projet ou UIfolio).
+  const finalAccent = accent ?? existingAccent(themeFile) ?? existingAccent(globalCss) ?? DEFAULT_ACCENT
+  const finalRadius = radius ?? existingRadius(themeFile)
+  const css = buildThemeCss({ accent: finalAccent, radius: finalRadius })
+  const label = relative(cwd, themeFile)
+
+  if (dryRun) {
+    ok(`[dry-run] thème Tailwind aurait été écrit dans ${label}`)
+    if (globalCss) info(`[dry-run] importé dans ${relative(cwd, globalCss)}`)
+    return
+  }
 
-  const rounded = radius === undefined ? null : Math.round(Number(radius))
-  if (rounded !== null && (!Number.isFinite(rounded) || rounded < 0 || rounded > 24)) {
-    fail(`Arrondi invalide : ${radius}. Utilise une valeur entre 0 et 24.`)
+  writeFileSync(themeFile, css, 'utf8')
+  ok(`thème Tailwind écrit dans ${label}`)
+  info(`--primary: ${finalAccent}${finalRadius === undefined ? '' : ` · --radius: ${finalRadius}px`}`)
+
+  if (globalCss) {
+    const source = readFileSync(globalCss, 'utf8')
+    const specifier = `./${basename(themeFile)}`
+    const updated = wireThemeImport(source, specifier)
+    if (updated !== source) writeFileSync(globalCss, updated, 'utf8')
+    info(`importé dans ${relative(cwd, globalCss)} — aucune couleur en dur dans les composants`)
+  } else {
+    info(`Ajoute « @import './${THEME_FILE}'; » en haut de ton CSS global (celui de Tailwind).`)
   }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Usage du composant dans une page                                           */
+/* -------------------------------------------------------------------------- */
+
+/** Chemin d'import relatif, sans extension, en slashs. */
+function importSpecifier(fromDir, target) {
+  const rel = relative(fromDir, target).replace(/\\/g, '/')
+  return rel.startsWith('.') ? rel : `./${rel}`
+}
 
-  const tokens = []
-  // La couleur est déjà écrite dans les fichiers copiés : on n'écrit pas de token.
-  if (!accent) {
-    const fallback = '#10b981'
-    tokens.push(
-      `  --primary: ${fallback};`,
-      '  --primary-foreground: #ffffff;',
-      `  --ring: ${fallback}80;`,
-      `  --accent: color-mix(in oklab, ${fallback} 18%, var(--background));`,
-      '  --accent-foreground: var(--foreground);',
-    )
+/** Insère les imports après le dernier import du fichier. */
+function addImports(source, lines) {
+  const missing = lines.filter((line) => !source.includes(line))
+  if (missing.length === 0) return source
+
+  const all = source.split('\n')
+  let last = -1
+  for (let index = 0; index < all.length; index += 1) {
+    if (/^\s*import\s/.test(all[index])) last = index
+  }
+  if (last === -1) return `${missing.join('\n')}\n\n${source}`
+
+  // Un import peut tenir sur plusieurs lignes : on avance jusqu'à la fin.
+  let end = last
+  while (
+    end < all.length - 1 &&
+    end - last < 20 &&
+    !/from\s+['"][^'"]+['"];?\s*$/.test(all[end]) &&
+    !/^import\s+['"][^'"]+['"];?\s*$/.test(all[end])
+  ) {
+    end += 1
   }
-  if (rounded !== null) tokens.push(`  --radius: ${rounded}px;`)
-  if (tokens.length === 0) return
 
-  const file = join(cwd, 'uifolio-theme.css')
-  if (!dryRun) writeFileSync(file, `:root {\n${tokens.join('\n')}\n}\n`, 'utf8')
-  ok(`${dryRun ? '[dry-run] ' : ''}Thème écrit dans ${relative(cwd, file)}`)
-  if (accent) info(`couleur ${accent} : déjà intégrée aux composants copiés`)
-  if (rounded !== null) info(`arrondi ${rounded}px`)
-  info(`Importe ${relative(cwd, file)} dans ton CSS global.`)
+  all.splice(end + 1, 0, ...missing)
+  return all.join('\n')
+}
+
+/**
+ * Fin de la balise ouvrante du `<` à `start`, sans se laisser piéger par les
+ * `>`/apostrophes des attributs et des textes JSX.
+ */
+function findOpeningTagEnd(source, start) {
+  let braceDepth = 0
+  for (let index = start + 1; index < source.length; index += 1) {
+    const char = source[index]
+    if (braceDepth === 0 && (char === '"' || char === "'")) {
+      const closing = source.indexOf(char, index + 1)
+      if (closing === -1) return null
+      index = closing
+      continue
+    }
+    if (char === '{') braceDepth += 1
+    else if (char === '}') braceDepth = Math.max(0, braceDepth - 1)
+    else if (char === '>' && braceDepth === 0) {
+      return { end: index, selfClosing: source[index - 1] === '/' }
+    }
+  }
+  return null
+}
+
+/** Ajoute `<Composant />` dans le JSX retourné, sinon un exemple exporté. */
+function addJsxUsage(source, exportNames) {
+  const missing = exportNames.filter((name) => !new RegExp(`<${name}[\\s/>]`).test(source))
+  if (missing.length === 0) return { source, added: [] }
+
+  const returnMatch = /\breturn\b/.exec(source)
+  let cursor = returnMatch ? returnMatch.index + returnMatch[0].length : -1
+  while (cursor !== -1 && cursor < source.length && /[\s(]/.test(source[cursor])) cursor += 1
+  const rootIndex = cursor !== -1 && source[cursor] === '<' ? cursor : -1
+  const tag = rootIndex === -1 ? null : findOpeningTagEnd(source, rootIndex)
+
+  if (tag) {
+    const lineStart = source.lastIndexOf('\n', rootIndex) + 1
+    const indent = /^\s*/.exec(source.slice(lineStart, rootIndex))?.[0] ?? ''
+    const childIndent = `${indent}  `
+    const children = missing.map((name) => `${childIndent}<${name} />`).join('\n')
+
+    // Fragment déjà présent : on insère juste après `<>`.
+    if (source.startsWith('<>', rootIndex)) {
+      const next = `${source.slice(0, rootIndex + 2)}\n${children}${source.slice(rootIndex + 2)}`
+      return { source: next, added: missing }
+    }
+
+    // Racine auto-fermante : on l'enveloppe dans un fragment.
+    if (tag.selfClosing) {
+      const element = source.slice(rootIndex, tag.end + 1)
+      const next =
+        `${source.slice(0, rootIndex)}<>\n${children}\n${indent}${element}\n${indent}</>${source.slice(tag.end + 1)}`
+      return { source: next, added: missing }
+    }
+
+    // Élément ouvrant : les composants deviennent ses premiers enfants.
+    const next = `${source.slice(0, tag.end + 1)}\n${children}${source.slice(tag.end + 1)}`
+    return { source: next, added: missing }
+  }
+
+  // JSX introuvable (page sans `return` JSX) : on laisse un exemple utilisable.
+  const example = missing
+    .map((name) => `\nexport function ${name}Example() {\n  return <${name} />\n}\n`)
+    .join('\n')
+  return { source: `${source.trimEnd()}\n${example}`, added: missing }
+}
+
+/**
+ * Écrit (ou complète) le fichier choisi : imports depuis le dossier réel des
+ * composants + appel `<Composant />` dans le JSX.
+ */
+function writeUsage({ cwd, target, componentsDir, components, dryRun }) {
+  const created = !existsSync(target)
+  const lines = components.map(({ name, exportName }) =>
+    `import { ${exportName} } from '${importSpecifier(dirname(target), join(resolve(cwd, componentsDir), name))}'`,
+  )
+  const label = relative(cwd, target)
+  const names = components.map((component) => component.exportName)
+
+  if (created) {
+    const body = [
+      ...lines,
+      '',
+      `export default function ${names[0]}Page() {`,
+      '  return (',
+      '    <main className="space-y-6 p-6">',
+      ...names.map((name) => `      <${name} />`),
+      '    </main>',
+      '  )',
+      '}',
+      '',
+    ].join('\n')
+    if (!dryRun) {
+      mkdirSync(dirname(target), { recursive: true })
+      writeFileSync(target, body, 'utf8')
+    }
+    ok(`${dryRun ? '[dry-run] ' : ''}page créée : ${label}`)
+  } else {
+    const source = readFileSync(target, 'utf8')
+    const withImports = addImports(source, lines)
+    const { source: updated, added } = addJsxUsage(withImports, names)
+    if (!dryRun) writeFileSync(target, updated, 'utf8')
+    ok(`${dryRun ? '[dry-run] ' : ''}usage ajouté dans ${label}`)
+    if (added.length < names.length) {
+      const already = names.filter((name) => !added.includes(name))
+      info(`déjà présent(s), non dupliqué(s) : ${already.join(', ')}`)
+    }
+  }
+
+  for (const name of names) info(`· <${name} />`)
+}
+
+/* -------------------------------------------------------------------------- */
+/* Commandes                                                                  */
+/* -------------------------------------------------------------------------- */
+
+const ALIASES = {
+  otp: 'otp-input',
+  editor: 'rich-text-editor',
+  panels: 'resizable',
+  shortcuts: 'command-menu',
+  upload: 'file-upload',
+  video: 'video-player',
 }
 
 function commandList() {
@@ -359,7 +603,7 @@ function commandInit({ flags }) {
 
   const config = {
     $schema: 'https://uifolio.dev/schema.json',
-    dir: typeof flags.dir === 'string' ? flags.dir : 'src/components/ui',
+    dir: typeof flags.dir === 'string' ? flags.dir : DEFAULT_COMPONENTS_DIR,
     lib: typeof flags.lib === 'string' ? flags.lib : 'src/lib',
     alias: typeof flags.alias === 'string' ? flags.alias : '@',
   }
@@ -369,159 +613,130 @@ function commandInit({ flags }) {
   info('Puis : uifolio add video-player calendar …')
 }
 
+/**
+ * Demande le fichier où utiliser le composant, après l'installation.
+ * La page proposée par défaut est créée si elle n'existe pas.
+ */
+async function chooseUsageTarget({ prompter, cwd, names }) {
+  const suggestion = `src/pages/${names[0]}.tsx`
+  const candidates = usageCandidates(cwd)
+  if (candidates.length > 0) info(`fichiers existants : ${candidates.join(', ')}`)
+
+  const answer = await prompter.ask(
+    `Dans quel fichier utiliser ${names.join(', ')} ? « - » pour ne pas l'utiliser`,
+    suggestion,
+  )
+  if (!answer || answer === '-') {
+    info('le composant est installé mais n’est utilisé dans aucun fichier.')
+    return null
+  }
+  return resolve(cwd, answer)
+}
 
-function commandAdd({ positional, flags }) {
+async function commandAdd({ positional, flags }) {
   const names = positional.map((name) => ALIASES[name] ?? name)
-
   if (names.length === 0) fail('Aucun composant demandé. Ex. : uifolio add calendar otp')
 
   const cwd = resolve(flags.cwd ?? process.cwd())
   const config = readConfig(cwd) ?? {}
-  const pageFlag = typeof flags.page === 'string' ? flags.page : undefined
-  let pageTarget = pageFlag ? resolve(cwd, pageFlag) : null
-
-  // Détermine la page cible effective : --page explicite, choix interactif, ou aucune.
-  if (!pageTarget) {
-    const pages = listPagesInCwd(cwd)
-    if (pages.length > 0) {
-      const chosen = choosePageInteraction(pages, cwd)
-      if (chosen) pageTarget = chosen
-    }
-  }
-
-  const createPage = Boolean(pageTarget) && !existsSync(pageTarget)
-  let pageImports = []
-
-  const componentsDir = typeof flags.dir === 'string' ? flags.dir : config.dir ?? 'src/components/ui'
-  const libDir = typeof flags.lib === 'string' ? flags.lib : config.lib ?? 'src/lib'
-  const targetAlias = typeof flags.alias === 'string' ? flags.alias : config.alias ?? '@'
   const dryRun = Boolean(flags['dry-run'])
   const force = Boolean(flags.force)
+  const targetAlias = typeof flags.alias === 'string' ? flags.alias : config.alias ?? '@'
+  const libDir = typeof flags.lib === 'string' ? flags.lib : config.lib ?? 'src/lib'
+
   const colorFlag = typeof flags.color === 'string' ? flags.color : undefined
   const accent = colorFlag === undefined ? null : normalizeHex(colorFlag)
   if (colorFlag !== undefined && !accent) {
     fail(`Couleur invalide : ${colorFlag}. Utilise un hex comme #10B981.`)
   }
 
+  let radius
+  if (typeof flags.radius === 'string') {
+    radius = Math.round(Number(flags.radius))
+    if (!Number.isFinite(radius) || radius < 0 || radius > 24) {
+      fail(`Arrondi invalide : ${flags.radius}. Utilise une valeur entre 0 et 24.`)
+    }
+  }
+
   const known = listComponents()
   const unknown = names.filter((name) => !known.includes(name))
   if (unknown.length > 0) {
     fail(`Composant(s) inconnu(s) : ${unknown.join(', ')}. Lance « uifolio list ».`)
   }
-
   if (!dryRun && !existsSync(cwd)) fail(`Répertoire cible introuvable : ${cwd}`)
-  if (pageTarget && !existsSync(pageTarget) && !dryRun) {
-    const bad = pageFlag ?? relative(cwd, pageTarget)
-    fail(`Page cible introuvable : ${bad}.`)
-  }
-  if (pageTarget && !existsSync(pageTarget) && dryRun) {
-    info(`[dry-run] page cible introuvable : ${pageFlag ?? relative(cwd, pageTarget)} (simulation uniquement).`)
-    pageTarget = null
-  }
-
-  const deps = new Set(LIB_DEPS)
-  const written = new Set()
-  const skipped = []
-
-  // Prépare les imports qui seront injectés dans la page cible.
-  for (const name of names) {
-    if (!pageTarget) continue
-    const importPath = relative(cwd, join(componentsDir, `${name}.tsx`))
-    pageImports.push({ name, importPath })
-  }
-
-  for (const name of names) {
-    const entry = join(REGISTRY_UI, `${name}.tsx`)
-    const files = collectFiles(entry, REGISTRY_SRC)
-
-    for (const [absolute, relativePath] of files) {
-      const isUi = relativePath.startsWith(join('components', 'ui'))
-      const destinationRoot = isUi ? resolve(cwd, componentsDir) : resolve(cwd, libDir)
-      const destination = join(destinationRoot, relativePath.replace(/^(components\/ui|lib)\//, ''))
-
-      if (written.has(destination)) continue
-
-      const source = readFileSync(absolute, 'utf8')
-      for (const dep of externalDeps(source)) deps.add(dep)
 
-      const status = copyFile({
-        to: destination,
-        source,
-        dryRun,
-        force,
-        targetAlias,
-        accent,
-      })
-
-      const label = relative(cwd, destination)
-      if (status === 'written') written.add(label)
-      else skipped.push(label)
+  const prompter = createPrompter(flags)
+  try {
+    // 1. Dossier d'import des composants.
+    let componentsDir = typeof flags.dir === 'string' ? flags.dir : config.dir ?? DEFAULT_COMPONENTS_DIR
+    if (prompter && typeof flags.dir !== 'string') {
+      const answer = await prompter.ask('Dans quel dossier copier les composants', componentsDir)
+      if (answer) componentsDir = answer
+    }
+    componentsDir = componentsDir.replace(/^\.\//, '').replace(/\/+$/, '')
+
+    // 2. Copie des fichiers + helpers.
+    const deps = new Set(LIB_DEPS)
+    const written = new Set()
+    const destinations = new Set()
+    const skipped = []
+    const components = []
+
+    for (const name of names) {
+      const entry = join(REGISTRY_UI, `${name}.tsx`)
+      const files = collectFiles(entry, REGISTRY_SRC)
+      components.push({ name, exportName: componentExportName(readFileSync(entry, 'utf8'), name) })
+
+      for (const [absolute, relativePath] of files) {
+        const isUi = relativePath.startsWith(join('components', 'ui'))
+        const destinationRoot = isUi ? resolve(cwd, componentsDir) : resolve(cwd, libDir)
+        const destination = join(destinationRoot, relativePath.replace(/^(components\/ui|lib)\//, ''))
+        if (destinations.has(destination)) continue
+        destinations.add(destination)
+
+        const source = readFileSync(absolute, 'utf8')
+        for (const dep of externalDeps(source)) deps.add(dep)
+
+        const label = relative(cwd, destination)
+        const shouldWrite = force || !existsSync(destination)
+        if (shouldWrite) {
+          if (!dryRun) {
+            mkdirSync(dirname(destination), { recursive: true })
+            writeFileSync(destination, rewriteAlias(source, targetAlias), 'utf8')
+          }
+          written.add(label)
+        } else {
+          skipped.push(label)
+        }
+      }
     }
-  }
 
-  const action = dryRun ? '[dry-run] auraient été copiés' : 'copié(s)'
-  ok(`${written.size} fichier(s) ${action} :`)
-  for (const label of [...written].sort()) info(`· ${label}`)
-  if (skipped.length > 0) {
-    info(`${skipped.length} fichier(s) déjà présent(s), ignoré(s) : ${skipped.join(', ')} (–force pour écraser)`)
-  }
-  if (accent && written.size > 0) {
-    info(`couleur ${accent} intégrée (bg-primary → bg-[${accent}]), aucun --primary requis`)
-  }
+    ok(`${written.size} fichier(s) ${dryRun ? '[dry-run] auraient été copiés' : 'copié(s)'} :`)
+    for (const label of [...written].sort()) info(`· ${label}`)
+    if (skipped.length > 0) {
+      info(`${skipped.length} fichier(s) déjà présent(s), ignoré(s) : ${skipped.join(', ')} (–force pour écraser)`)
+    }
 
-  writeTheme({
-    cwd,
-    accent,
-    radius: typeof flags.radius === 'string' ? flags.radius : undefined,
-    dryRun,
-  })
+    // 3. Tokens Tailwind : les classes bg-primary & co fonctionnent partout.
+    writeTheme({ cwd, accent, radius, dryRun })
 
-  if (written.size > 0 || dryRun) {
-    console.log('\n  Dépendances npm détectées :')
-    info(`npm install ${[...deps].sort().join(' ')}`)
-    if (targetAlias !== '@') {
-      info(`Pense à aligner l'alias ${targetAlias} dans ton tsconfig/vite (remplace de @/).`)
+    // 4. Utilisation du composant, après installation.
+    let pageTarget = typeof flags.page === 'string' ? resolve(cwd, flags.page) : null
+    if (!pageTarget && prompter) {
+      pageTarget = await chooseUsageTarget({ prompter, cwd, names })
     }
-    console.log('')
-  }  // Crée ou adapte la page cible si une page cible a été sélectionnée.
-  if (pageTarget) {
-    const dir = dirname(pageTarget)
-    if (createPage) {
-      if (!dryRun) {
-        mkdirSync(dir, { recursive: true })
-        writeFileSync(
-          pageTarget,
-          `import { ${pageImports.map((p) => p.name).join(', ')} } from '${relative(dir, join(cwd, componentsDir)).replace(/\\/g, '/')}'\n'\n` +
-            `export default function Page() {\n` +
-            `  return (<>\n` +
-            pageImports.map((p) => `    <${p.name} />`).join('\n') +
-            `\n  </>)\n` +
-            `}\n`,
-          'utf8',
-        )
-      }
-      ok(`${dryRun ? '[dry-run] ' : ''}Page créée : ${relative(cwd, pageTarget)}`)
-      for (const p of pageImports) {
-        info(`· <${p.name} /> importé depuis ${relative(cwd, join(componentsDir, `${p.name}.tsx`))}`)
-      }
-    } else {
-      if (dryRun) {
-        info(`[dry-run] page existante détectée : ${relative(cwd, pageTarget)}`)
-      } else {
-        const source = readFileSync(pageTarget, 'utf8')
-        const rendered =
-          pageImports.map((p) => `import { ${p.name} } from '${relative(dirname(pageTarget), join(cwd, componentsDir)).replace(/\\/g, '/')}';`).join('\n')
-        const functionPoint = source.indexOf('function ')
-        const insertPoint =
-          functionPoint !== -1 ? functionPoint : source.lastIndexOf('</')
-        const updatedSource =
-          insertPoint === -1
-            ? source + '\n' + rendered + '\n' + pageImports.map((p) => `<${p.name} />`).join('\n')
-            : source.slice(0, insertPoint) + '\n' + rendered + '\n' + source.slice(insertPoint)
-        writeFileSync(pageTarget, updatedSource, 'utf8')
+    if (pageTarget) writeUsage({ cwd, target: pageTarget, componentsDir, components, dryRun })
+
+    if (written.size > 0 || dryRun) {
+      console.log('\n  Dépendances npm détectées :')
+      info(`npm install ${[...deps].sort().join(' ')}`)
+      if (targetAlias !== '@') {
+        info(`Pense à aligner l'alias ${targetAlias} dans ton tsconfig/vite (remplace de @/).`)
       }
-      ok(`Page existante mise à jour : ${relative(cwd, pageTarget)}`)
+      console.log('')
     }
+  } finally {
+    prompter?.close()
   }
 }
 
@@ -542,55 +757,47 @@ Options :
   --dir <chemin>    dossier composants (défaut : src/components/ui)
   --lib <chemin>    dossier helpers (défaut : src/lib)
   --alias <alias>   alias d'import cible (défaut : @)
-  --color <hex>     intègre cette couleur aux fichiers copiés (sans --primary)
+  --color <hex>     couleur primaire, écrite dans les tokens Tailwind (@theme)
   --radius <px>     arrondi global (0–24) dans uifolio-theme.css
+  --page <chemin>   fichier où utiliser le composant (ex : src/pages/calendar.tsx) ;
+                    créé s'il n'existe pas, sinon l'import + <Composant /> y sont ajoutés
+  --interactive     force les questions (dossier, fichier) hors terminal
   --force           écrase les fichiers existants
   --dry-run         simule sans écrire
-  --page <chemin>   page cible (ex : src/pages/calendar.tsx). Avec --page, la CLI crée la page
-                    si elle n'existe pas, ou y ajoute l'import + l'appel du/des composant(s).
-                    Sans --page et quand des pages existent déjà dans src/pages, la CLI demande
-                    interactivement laquelle utiliser avant d'importer.
+
+Sans --dir ni --page, la CLI demande dans quel dossier copier les composants
+puis dans quel fichier les utiliser — l'installation ne s'arrête pas à la copie.
+Les couleurs passent par un thème Tailwind CSS 4 (uifolio-theme.css, @theme) :
+les classes bg-primary, text-muted-foreground… restent dans le code.
 
 Exemples :
   node cli/uifolio.mjs add video-player calendar otp --cwd ../mon-projet
   node cli/uifolio.mjs add otp --color "#10B981" --radius 8
-  node cli/uifolio.mjs add otp --alias "#lib" --dry-run
   node cli/uifolio.mjs add calendar --page src/pages/calendar.tsx
 `)
 }
 
-const { positional, flags } = parseArgs(process.argv.slice(2))
-const command = positional.shift()
-
-// Requête interactive de la page cible avant toute écriture, sauf si --page est déjà passé.
-if (command === 'add' && typeof flags.page !== 'string') {
-  let cwd
-  try {
-    cwd = resolve(flags.cwd ?? process.cwd())
-  } catch {
-    cwd = process.cwd()
-  }
-  const pages = listPagesInCwd(cwd)
-  if (pages.length > 0) {
-    const target = choosePageInteraction(pages, cwd)
-    if (target) flags.page = target
+async function main() {
+  const { positional, flags } = parseArgs(process.argv.slice(2))
+  const command = positional.shift()
+
+  switch (command) {
+    case 'list':
+      commandList()
+      break
+    case 'init':
+      commandInit({ positional, flags })
+      break
+    case 'add':
+      await commandAdd({ positional, flags })
+      break
+    case undefined:
+    case 'help':
+      usage()
+      break
+    default:
+      fail(`Commande inconnue : ${command}. Lance « uifolio » sans argument.`)
   }
 }
 
-switch (command) {
-  case 'list':
-    commandList()
-    break
-  case 'init':
-    commandInit({ positional, flags })
-    break
-  case 'add':
-    commandAdd({ positional, flags })
-    break
-  case undefined:
-  case 'help':
-    usage()
-    break
-  default:
-    fail(`Commande inconnue : ${command}. Lance « uifolio » sans argument.`)
-}
+await main()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifolio",
-  "version": "0.4.0",
+  "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.",
   "type": "module",
   "license": "MIT",
@@ -53,6 +53,7 @@
   "files": [
     "cli",
     "src/components/ui",
+    "!src/components/ui/stories-tokens.ts",
     "src/lib/color.ts",
     "src/lib/date.ts",
     "src/lib/uploader.ts",

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

@@ -30,7 +30,7 @@ export function AudioPlayer({
   variant = 'card',
   loop = false,
   className,
-}: AudioPlayerProps) {
+}: Readonly<AudioPlayerProps>) {
   const audioRef = useRef<HTMLAudioElement>(null)
   const [playing, setPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)

package/src/components/ui/calendar.tsx

@@ -54,7 +54,7 @@ export function Calendar({
   disabled,
   manualInput = true,
   className,
-}: CalendarProps) {
+}: Readonly<CalendarProps>) {
   const [internalValue, setInternalValue] = useState<CalendarValue>(defaultValue ?? null)
   const currentValue = value !== undefined ? value : internalValue
 

package/src/components/ui/choice.tsx

@@ -30,7 +30,7 @@ export function Choice({
   name,
   value,
   className,
-}: ChoiceProps) {
+}: Readonly<ChoiceProps>) {
   const id = useId()
   const padding = Math.max(2, Math.round(size * 0.1))
   const thumb = Math.max(6, size - padding * 2)

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

@@ -43,12 +43,12 @@ function ChannelField({
   value,
   disabled,
   onChange,
-}: {
+}: Readonly<{
   label: string
   value: number
   disabled: boolean
   onChange: (value: number) => void
-}) {
+}>) {
   const [draft, setDraft] = useState<string | null>(null)
 
   return (
@@ -123,7 +123,7 @@ export function ColorPicker({
   open,
   defaultOpen = false,
   onOpenChange,
-}: ColorPickerProps) {
+}: Readonly<ColorPickerProps>) {
   const generatedId = useId()
   const inputId = id ?? generatedId
   const panelId = `${inputId}-panel`

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

@@ -37,7 +37,7 @@ export function CommandMenu({
   emptyText = 'Aucun résultat.',
   emptyState,
   className,
-}: CommandMenuProps) {
+}: Readonly<CommandMenuProps>) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
   const isOpen = open ?? internalOpen
   const [query, setQuery] = useState('')

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

@@ -43,7 +43,7 @@ export function FileUpload({
   uploader,
   onChange,
   className,
-}: FileUploadProps) {
+}: Readonly<FileUploadProps>) {
   const inputId = useId()
   const [items, setItems] = useState<UploadItem[]>([])
   const [dragging, setDragging] = useState(false)

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

@@ -126,11 +126,11 @@ function IconSvg({
   data,
   color,
   className,
-}: {
+}: Readonly<{
   data: IconData | null
   color: string
   className?: string
-}) {
+}>) {
   if (!data) {
     return <span className={cn('inline-block rounded bg-muted', className)} />
   }
@@ -149,11 +149,11 @@ export function IconGlyph({
   icon,
   color = 'currentColor',
   className,
-}: {
+}: Readonly<{
   icon: string
   color?: string
   className?: string
-}) {
+}>) {
   const [data, setData] = useState<IconData | null>(() => iconCache.get(icon) ?? null)
   const [prevIcon, setPrevIcon] = useState(icon)
   const loadRef = useRef<Promise<void> | null>(null)
@@ -186,7 +186,7 @@ export function IconPicker({
   onChange,
   placeholder = 'Choisir une icône',
   className,
-}: IconPickerProps) {
+}: Readonly<IconPickerProps>) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [icons, setIcons] = useState<string[]>([])

package/src/components/ui/motion.tsx

@@ -21,7 +21,7 @@ export function FadeIn({
   duration = 520,
   className,
   style,
-}: MotionProps) {
+}: Readonly<MotionProps>) {
   const reduced = useReducedMotion()
   return (
     <div
@@ -45,10 +45,12 @@ export function SlideIn({
   style,
   direction = 'up',
   distance = 20,
-}: MotionProps & {
-  direction?: 'up' | 'down' | 'left' | 'right'
-  distance?: number
-}) {
+}: Readonly<
+  MotionProps & {
+    direction?: 'up' | 'down' | 'left' | 'right'
+    distance?: number
+  }
+>) {
   const reduced = useReducedMotion()
   const offset = {
     up: `translate3d(0, ${distance}px, 0)`,
@@ -82,7 +84,7 @@ export function ScaleIn({
   className,
   style,
   from = 0.92,
-}: MotionProps & { from?: number }) {
+}: Readonly<MotionProps & { from?: number }>) {
   const reduced = useReducedMotion()
   return (
     <div
@@ -108,13 +110,13 @@ export function Stagger({
   duration = 460,
   className,
   itemClassName,
-}: {
+}: Readonly<{
   children: ReactNode
   delay?: number
   duration?: number
   className?: string
   itemClassName?: string
-}) {
+}>) {
   return (
     <div className={className}>
       {Children.map(children, (child, index) => (

package/src/components/ui/otp-input.tsx

@@ -39,7 +39,7 @@ export function OtpInput({
   error = false,
   className,
   inputClassName,
-}: OtpInputProps) {
+}: Readonly<OtpInputProps>) {
   const [internalValue, setInternalValue] = useState(defaultValue)
   const current = value ?? internalValue
   const complete = current.length === length && /^\d+$/.test(current)

package/src/components/ui/resizable.tsx

@@ -10,11 +10,11 @@ export function ResizablePanelGroup({
   direction = 'horizontal',
   className,
   children,
-}: {
+}: Readonly<{
   direction?: ResizableDirection
   className?: string
   children: ReactNode
-}) {
+}>) {
   return (
     <div
       data-resizable-group
@@ -35,12 +35,12 @@ export function ResizablePanel({
   minSize = 10,
   className,
   children,
-}: {
+}: Readonly<{
   defaultSize?: number
   minSize?: number
   className?: string
   children: ReactNode
-}) {
+}>) {
   return (
     <div
       data-resizable-panel
@@ -54,7 +54,7 @@ export function ResizablePanel({
   )
 }
 
-export function ResizableHandle({ className }: { className?: string }) {
+export function ResizableHandle({ className }: Readonly<{ className?: string }>) {
   const ref = useRef<HTMLDivElement>(null)
   const [orientation, setOrientation] = useState<'horizontal' | 'vertical'>('vertical')
 

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

@@ -43,7 +43,7 @@ export function RichTextEditor({
   toolbar = true,
   minHeight = 220,
   className,
-}: RichTextEditorProps) {
+}: Readonly<RichTextEditorProps>) {
   const editorRef = useRef<HTMLDivElement>(null)
   const [internalValue, setInternalValue] = useState(defaultValue)
   const html = value ?? internalValue
@@ -254,12 +254,12 @@ function ToolButton({
   active,
   onClick,
   children,
-}: {
+}: Readonly<{
   label: string
   active?: boolean
   onClick: () => void
   children: ReactNode
-}) {
+}>) {
   return (
     <button
       type="button"

package/src/components/ui/stories.tsx

@@ -37,7 +37,7 @@ export function Stories({
   duration = 5000,
   className,
   textBackground = 'linear-gradient(160deg, color-mix(in oklab, var(--primary) 35%, #000) 0%, var(--primary) 55%, color-mix(in oklab, var(--primary) 65%, #fff) 100%)',
-}: StoriesProps) {
+}: Readonly<StoriesProps>) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
   const isOpen = open ?? internalOpen
   const [index, setIndex] = useState(initialIndex)

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

@@ -45,7 +45,7 @@ export function TimePicker({
   disabled = false,
   label,
   className,
-}: TimePickerProps) {
+}: Readonly<TimePickerProps>) {
   const [internalValue, setInternalValue] = useState(defaultValue)
   const current = value ?? internalValue
   const inputValue = toInputValue(current, withSeconds)

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

@@ -284,7 +284,7 @@ export function VideoPlayer({
   onTimeUpdate,
   onError,
   ref,
-}: VideoPlayerProps) {
+}: Readonly<VideoPlayerProps>) {
   const { sources, signature } = useResolvedSources(sourceInput)
 
   const containerRef = useRef<HTMLDivElement>(null)

package/src/components/ui/stories-tokens.ts

@@ -1,18 +0,0 @@
-const accentToScheme: Record<string, { dark: string; light: string; foreground: string; background: string }> = {
-  '#10b981': {
-    dark: '#0f172a',
-    light: '#0f172a',
-    foreground: '#f1f5f9',
-    background: '#ecfdf5',
-  },
-  default: {
-    dark: '#f8fafc',
-    light: '#0f172a',
-    foreground: '#0f172a',
-    background: '#ffffff',
-  },
-}
-
-export function accentTokens(accent: string) {
-  return accentToScheme[accent] ?? accentToScheme.default
-}