05ad3fa5cf
Le précédent layout avec ◆ rotatés en timeline causait des collisions visuelles sur mobile (les coins du diamant débordaient sur les labels et la ligne de connexion). Inutilisable. Nouvelle approche, inspirée des éditeurs de séquences éprouvés (Mailchimp, Klaviyo) : liste verticale de cards de step, identique sur mobile et desktop. Plus prévisible, plus lisible, mêmes tap targets. - Chaque step = card cliquable avec : numéro d'ordre, ◆ accent (petit, coloré par tonalité, signature de marque sans gêner la lecture), J+X, label de tonalité, bouton retirer aligné dans le flux - La card sélectionnée (rubis border + shadow) révèle l'éditeur inline (Décalage + Tonalité) directement sous l'en-tête → pas de panneau séparé, pas de saut de focus, l'utilisateur édite ce qu'il vient de taper - Bouton "Ajouter une étape" en pleine largeur en pied de liste - L'avertissement mise-en-demeure (validation manuelle) s'affiche dans la card sélectionnée - OffsetInput déplacé dans CadenceTimeline avec le reste de l'éditeur ; duplication supprimée du fichier route Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])