@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 ;
  • option darkClass: 'dark' pour basculer une classe unique selon isDark (variants dark: UnoCSS/Tailwind — style GrateWizard) ;
  • setMood(id, { persist: false }) pour une application éphémère (thème imposé en mode embed, suivi de prefers-color-scheme) ;
  • initMood() ne persiste que si un choix était déjà stocké.

Adoption (à faire AVEC vérif visuelle mobile + desktop — zéro régression)

Dans nuxt.config.ts du projet :

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 :

// 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 (dark/light seulement, contraintes embed)

Deux moods light/dark avec darkClass: 'dark' (variants UnoCSS) et syncColorMode: false. useDarkMode reste l'API publique et garde sa logique de décision : thème imposé par ?theme= en embed (setMood(id, { persist: false }) — ne jamais écraser la préférence standalone, même origine), migration du stockage legacy 'true'/'false' → 'dark'/'light', suivi de prefers-color-scheme tant qu'aucun choix explicite n'est stocké. Vérifier : toggle + persistance standalone, embed ?theme=light non persisté, sceau.

SejeteralO

Adopter en dernier (pas d'UnoCSS, vue-router 5), prudemment.

⚠️ Distribution — à régler AVANT tout merge/push des adoptions

Les extends relatifs (../yvv-nuxt-base) pointent HORS des repos consommateurs : les builds Docker (COPY . .) et la CI échoueront. Options à trancher : repo distant + dépendance git, git subtree vendoré par projet, ou contexte Docker élargi. En dev local, rien à faire.

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.