uifolio 0.3.0 → 0.5.1

package/cli/uifolio.mjs

@@ -6,26 +6,34 @@
  * Commandes :
  *   uifolio list                          liste des composants disponibles
  *   uifolio init [--cwd dir]              écrit uifolio.json (config cible)
- *   uifolio add <noms...> [options]       copie les composants + helpers
+ *   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
  *   --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"
+ *   node cli/uifolio.mjs add calendar --color "#10B981" --page src/pages/calendar.tsx
  *   node cli/uifolio.mjs add video-player --alias "#lib" --dry-run
  */
 
 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))
@@ -35,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                                                                */
 /* -------------------------------------------------------------------------- */
@@ -120,6 +143,88 @@ function externalDeps(source) {
   return [...deps]
 }
 
+/** 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) {
+  try {
+    const pagesDir = join(resolve(cwd), 'src', 'pages')
+    if (!existsSync(pagesDir)) return []
+    return readdirSync(pagesDir)
+      .filter((name) => name.endsWith('.tsx'))
+      .map((name) => join('src', 'pages', name))
+      .sort()
+  } catch {
+    return []
+  }
+}
+
+/** 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
+}
+
+/**
+ * Saisie interactive : uniquement sur un terminal (ou avec --interactive),
+ * jamais en CI / pipe sans données, pour ne pas bloquer l'installation.
+ */
+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)
+    }
+  })
+
+  return {
+    async ask(question, fallback) {
+      const suffix = fallback ? ` (${fallback})` : ''
+      process.stdout.write(`\n  \x1b[36m?\x1b[0m ${question}${suffix} : `)
+
+      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()
+    },
+  }
+}
+
 /**
  * Résolution transitive : un composant importe des helpers (@/lib/…)
  * qui peuvent eux-mêmes importer d'autres fichiers locaux.
@@ -156,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}`
@@ -217,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
+  }
+
+  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 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.`)
+/** 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
   }
 
-  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);',
-    )
+  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] === '/' }
+    }
   }
-  if (rounded !== null) tokens.push(`  --radius: ${rounded}px;`)
-  if (tokens.length === 0) return
+  return null
+}
 
-  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.`)
+/** 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() {
@@ -265,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 : '@',
   }
@@ -275,89 +613,130 @@ function commandInit({ flags }) {
   info('Puis : uifolio add video-player calendar …')
 }
 
-function commandAdd({ positional, flags }) {
+/**
+ * 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)
+}
+
+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 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}`)
 
-  const deps = new Set(LIB_DEPS)
-  const written = new Set()
-  const skipped = []
-
-  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 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 label = relative(cwd, destination)
-      if (status === 'written') written.add(label)
-      else skipped.push(label)
+    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)`)
     }
-  }
 
-  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`)
-  }
+    // 3. Tokens Tailwind : les classes bg-primary & co fonctionnent partout.
+    writeTheme({ cwd, accent, radius, dryRun })
 
-  writeTheme({
-    cwd,
-    accent,
-    radius: typeof flags.radius === 'string' ? flags.radius : undefined,
-    dryRun,
-  })
+    // 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 })
+    }
+    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 @/).`)
+    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 @/).`)
+      }
+      console.log('')
     }
-    console.log('')
+  } finally {
+    prompter?.close()
   }
 }
 
@@ -378,35 +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
 
+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()
-
-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.`)
+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.`)
+  }
 }
+
+await main()