feat: socle initial du package mutualisé

- primitives de design partagées / mécanisme moods commun - isolé, opt-in, sans impact sur les projets existants Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-18 05:28:15 +02:00
commit a9ec5c49e4
5 changed files with 179 additions and 0 deletions
@@ -0,0 +1,48 @@
+# @yvv/nuxt-base
+
+Nuxt layer partagé pour les projets Nuxt Yvv (librodrome, GrateWizard, libreDecision, SejeteralO).
+Fournit le **mécanisme** commun, jamais les couleurs (chaque projet garde son identité).
+
+## Contenu
+
+- `app/composables/useMood.ts` — mécanisme d'ambiances/palettes (extrait de libreDecision, généralisé).
+  Supporte les 2 patterns existants sans réécrire le CSS d'un projet :
+  - **classes `.mood-<id>`** + variables `--mood-*` définies en CSS (style libreDecision) ;
+  - **variables CSS injectées en JS** via `MoodDef.vars` (style librodrome `--color-*`) ;
+  - option `lightDarkClasses` pour basculer aussi `.palette-light/.palette-dark`.
+
+## Adoption (à faire AVEC vérif visuelle mobile + desktop — zéro régression)
+
+Dans `nuxt.config.ts` du projet :
+
+```ts
+export default defineNuxtConfig({
+  extends: ['../yvv-nuxt-base'], // chemin relatif depuis la racine frontend du projet
+})
+```
+
+`useMood` devient auto-importé. Puis, par projet :
+
+### libreDecision (risque quasi nul — c'est le mécanisme canonique)
+Remplacer le corps de `frontend/app/composables/useMood.ts` par un appel au layer :
+```ts
+// frontend/app/composables/useMood.ts
+const moods = [
+  { id: 'peps',     label: 'Peps',     description: 'Chaud et tonique', icon: 'i-lucide-sun',    color: '#d44a10', isDark: false },
+  { id: 'zen',      label: 'Zen',      description: 'Nature vivante',   icon: 'i-lucide-leaf',   color: '#2e8b48', isDark: false },
+  { id: 'chagrine', label: 'Chagrine', description: 'Nuit profonde',    icon: 'i-lucide-moon',   color: '#6488d8', isDark: true  },
+  { id: 'grave',    label: 'Grave',    description: 'Ambre mineral',    icon: 'i-lucide-shield', color: '#d8a030', isDark: true  },
+]
+export const useLibreMood = () => useMood(moods, { storageKey: 'libredecision_mood', defaultId: 'peps' })
+```
+`moods.css` (les couleurs) reste inchangé. Vérifier le switch des 4 moods + persistance.
+
+### librodrome (via l'option vars — le CSS `--color-*` reste inchangé)
+Convertir `stores/palette.ts` pour déléguer l'application DOM à `useMood`, en passant les triplets HSL dans `vars` (`--color-primary`, etc.) et `lightDarkClasses: true`. Le store peut rester pour l'API publique, mais l'application au DOM passe par le mécanisme partagé. Vérifier les 4 saisons + light/dark.
+
+### GrateWizard / SejeteralO
+Adopter après les deux premiers, même principe. SejeteralO (pas d'UnoCSS, vue-router 5) en dernier, prudemment.
+
+## Principe
+
+Ce layer unifie la **logique** (application DOM, persistance, SSR-guard, color-mode), pas le **contrat CSS**. Migrer le contrat CSS (renommer `--color-*` → `--mood-*`) est une étape séparée, optionnelle, à faire sous contrôle visuel.