@mostajs/setup 1.3.0 → 1.4.0

package/README.md

@@ -58,8 +58,10 @@ npm install @mostajs/setup @mostajs/orm
 │   ├── install.route.ts         # Factory POST /api/setup/install
 │   ├── detect-modules.route.ts  # Factory GET  /api/setup/detect-modules
 │   ├── install-modules.route.ts # Factory POST /api/setup/install-modules
-│   └── reconfig.route.ts        # Factory GET+POST /api/setup/reconfig
+│   ├── reconfig.route.ts        # Factory GET+POST /api/setup/reconfig
+│   └── upload-jar.route.ts     # Factory GET+POST+DELETE /api/setup/upload-jar
 ├── components/
+│   ├── SetupWizard.tsx          # Wizard d'installation complet (6 etapes)
 │   └── ReconfigPanel.tsx        # UI reconfiguration (modules + DB)
 ├── types/
 │   └── index.ts                 # Tous les types TypeScript
@@ -347,242 +349,68 @@ Ce handler :
 
 ### Etape 4 — Creer la page Setup (frontend)
 
-Voici un exemple **minimal** de page setup. Adaptez le style a votre design system.
+Le module fournit un composant **`SetupWizard`** pret a l'emploi avec inline styles (aucune dependance Tailwind/shadcn).
+Votre page Next.js n'est qu'un **wrapper** d'une vingtaine de lignes :
 
 ```tsx
 // src/app/setup/page.tsx
 'use client'
 
-import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
-import { resolveModuleDependencies } from '@mostajs/setup/data/module-definitions'
-import type { ModuleDefinition } from '@mostajs/setup'
-
-type Dialect = 'mongodb' | 'sqlite' | 'postgres' | 'mysql' | 'mariadb'
-  | 'oracle' | 'mssql' | 'cockroachdb' | 'db2' | 'hana'
-  | 'hsqldb' | 'spanner' | 'sybase'
+import SetupWizard from '@mostajs/setup/components/SetupWizard'
+import { t } from '@/i18n'  // ou toute fonction de traduction
 
 export default function SetupPage() {
   const router = useRouter()
 
-  // --- Etat du wizard ---
-  const [step, setStep] = useState(1)                     // 1=modules, 2=db, 3=admin, 4=install
-
-  // Modules
-  const [availableModules, setAvailableModules] = useState<ModuleDefinition[]>([])
-  const [selectedModules, setSelectedModules] = useState<string[]>([])
-  const [installedModules, setInstalledModules] = useState<string[]>([])
-
-  // DB
-  const [dialect, setDialect] = useState<Dialect>('mongodb')
-  const [dbConfig, setDbConfig] = useState({ host: 'localhost', port: 27017, name: 'mydb', user: '', password: '' })
-  const [dbOk, setDbOk] = useState(false)
-
-  // Admin
-  const [admin, setAdmin] = useState({ email: '', password: '', firstName: '', lastName: '' })
-
-  // Install
-  const [installing, setInstalling] = useState(false)
-  const [result, setResult] = useState<{ ok: boolean; error?: string } | null>(null)
-
-  // --- Charger les modules depuis l'API au montage ---
-  useEffect(() => {
-    fetch('/api/setup/detect-modules')
-      .then(r => r.json())
-      .then((data: { modules: ModuleDefinition[]; installed: string[] }) => {
-        setAvailableModules(data.modules || [])
-        setInstalledModules(data.installed || [])
-        // Pre-cocher les modules required + default + deja installes
-        const preChecked = new Set([
-          ...(data.modules || []).filter(m => m.required || m.default).map(m => m.key),
-          ...(data.installed || []),
-        ])
-        setSelectedModules(Array.from(preChecked))
-      })
-      .catch(() => {})
-  }, [])
-
-  // --- Toggle un module (avec resolution des dependances) ---
-  function toggleModule(key: string) {
-    const mod = availableModules.find(m => m.key === key)
-    if (!mod || mod.required) return
-
-    setSelectedModules(prev => {
-      if (prev.includes(key)) {
-        // Decochage : retirer aussi les modules qui dependent de celui-ci
-        const toRemove = new Set([key])
-        let changed = true
-        while (changed) {
-          changed = false
-          for (const m of availableModules) {
-            if (toRemove.has(m.key) || m.required) continue
-            if (m.dependsOn?.some(dep => toRemove.has(dep)) && prev.includes(m.key)) {
-              toRemove.add(m.key)
-              changed = true
-            }
-          }
-        }
-        return prev.filter(k => !toRemove.has(k))
-      } else {
-        // Cochage : ajouter les dependances transitives
-        return resolveModuleDependencies([...prev, key], availableModules)
-      }
-    })
-  }
-
-  // --- Tester la connexion DB ---
-  async function testDb() {
-    const res = await fetch('/api/setup/test-db', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ dialect, ...dbConfig }),
-    })
-    const data = await res.json()
-    setDbOk(data.ok === true)
-  }
+  return (
+    <SetupWizard
+      t={t}
+      onComplete={() => router.push('/login')}
+      dbNamePrefix="secuaccessdb"
+      endpoints={{
+        detectModules: '/api/setup/detect-modules',
+        testDb: '/api/setup/test-db',
+        installModules: '/api/setup/install-modules',
+        install: '/api/setup/install',
+        uploadJar: '/api/setup/upload-jar',
+      }}
+    />
+  )
+}
+```
 
-  // --- Lancer l'installation ---
-  async function install() {
-    setInstalling(true)
-    setResult(null)
-
-    // 1. Installer les modules npm
-    const modRes = await fetch('/api/setup/install-modules', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ modules: selectedModules }),
-    })
-    if (!modRes.ok) {
-      setResult({ ok: false, error: 'Erreur installation modules' })
-      setInstalling(false)
-      return
-    }
+#### Props de SetupWizard
 
-    // 2. Configurer la DB + seeder
-    const res = await fetch('/api/setup/install', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ dialect, db: dbConfig, admin, modules: selectedModules }),
-    })
-    const data = await res.json()
-    setResult(data.data || { ok: false, error: data.error?.message })
-    setInstalling(false)
-  }
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `t` | `(key: string) => string` | `(k) => k` | Fonction de traduction (recoit des cles `setup.xxx`) |
+| `onComplete` | `() => void` | — | Callback apres installation reussie (ex: `router.push('/login')`) |
+| `dbNamePrefix` | `string` | `'mydb'` | Prefixe pour le nom de base par defaut |
+| `persistState` | `boolean` | `true` | Persister l'etat du wizard dans `sessionStorage` |
+| `endpoints` | `object` | voir ci-dessous | URLs des routes API |
 
-  return (
-    <div style={{ maxWidth: 600, margin: '50px auto', padding: 20 }}>
-      <h1>Setup — Mon Application</h1>
-
-      {/* ── Etape 1 : Modules ── */}
-      {step === 1 && (
-        <div>
-          <h2>1. Modules</h2>
-          {availableModules.map(mod => (
-            <label key={mod.key} style={{ display: 'block', margin: '8px 0' }}>
-              <input
-                type="checkbox"
-                checked={selectedModules.includes(mod.key)}
-                disabled={mod.required}
-                onChange={() => toggleModule(mod.key)}
-              />
-              {' '}{mod.icon} {mod.label}
-              {mod.required && <em> (requis)</em>}
-              {mod.discovered && <strong> NOUVEAU</strong>}
-              {installedModules.includes(mod.key) && <span> ✓</span>}
-            </label>
-          ))}
-          <button onClick={() => setStep(2)}>Suivant →</button>
-        </div>
-      )}
-
-      {/* ── Etape 2 : Base de donnees ── */}
-      {step === 2 && (
-        <div>
-          <h2>2. Base de donnees</h2>
-          <select value={dialect} onChange={e => setDialect(e.target.value as Dialect)}>
-            <option value="mongodb">MongoDB</option>
-            <option value="sqlite">SQLite</option>
-            <option value="postgres">PostgreSQL</option>
-            <option value="mysql">MySQL</option>
-            {/* ... autres dialectes ... */}
-          </select>
-
-          {dialect !== 'sqlite' && (
-            <>
-              <input placeholder="Host" value={dbConfig.host}
-                onChange={e => setDbConfig({ ...dbConfig, host: e.target.value })} />
-              <input placeholder="Port" type="number" value={dbConfig.port}
-                onChange={e => setDbConfig({ ...dbConfig, port: +e.target.value })} />
-              <input placeholder="User" value={dbConfig.user}
-                onChange={e => setDbConfig({ ...dbConfig, user: e.target.value })} />
-              <input placeholder="Password" type="password" value={dbConfig.password}
-                onChange={e => setDbConfig({ ...dbConfig, password: e.target.value })} />
-            </>
-          )}
-          <input placeholder="Nom de la base" value={dbConfig.name}
-            onChange={e => setDbConfig({ ...dbConfig, name: e.target.value })} />
-
-          <button onClick={testDb}>Tester la connexion</button>
-          {dbOk && <span style={{ color: 'green' }}> ✓ Connexion OK</span>}
-
-          <br />
-          <button onClick={() => setStep(1)}>← Retour</button>
-          <button onClick={() => setStep(3)} disabled={dialect !== 'sqlite' && !dbOk}>
-            Suivant →
-          </button>
-        </div>
-      )}
-
-      {/* ── Etape 3 : Administrateur ── */}
-      {step === 3 && (
-        <div>
-          <h2>3. Administrateur</h2>
-          <input placeholder="Prenom" value={admin.firstName}
-            onChange={e => setAdmin({ ...admin, firstName: e.target.value })} />
-          <input placeholder="Nom" value={admin.lastName}
-            onChange={e => setAdmin({ ...admin, lastName: e.target.value })} />
-          <input placeholder="Email" type="email" value={admin.email}
-            onChange={e => setAdmin({ ...admin, email: e.target.value })} />
-          <input placeholder="Mot de passe (min 6)" type="password" value={admin.password}
-            onChange={e => setAdmin({ ...admin, password: e.target.value })} />
-
-          <br />
-          <button onClick={() => setStep(2)}>← Retour</button>
-          <button onClick={() => setStep(4)}>Suivant →</button>
-        </div>
-      )}
-
-      {/* ── Etape 4 : Installation ── */}
-      {step === 4 && (
-        <div>
-          <h2>4. Recapitulatif</h2>
-          <p><strong>DB :</strong> {dialect} — {dbConfig.name}</p>
-          <p><strong>Admin :</strong> {admin.email}</p>
-          <p><strong>Modules :</strong> {selectedModules.join(', ')}</p>
-
-          <button onClick={install} disabled={installing}>
-            {installing ? 'Installation en cours...' : 'Installer'}
-          </button>
-
-          {result?.ok && (
-            <div style={{ color: 'green', marginTop: 16 }}>
-              ✓ Installation terminee !
-              <br />
-              <button onClick={() => router.push('/login')}>Aller au login →</button>
-            </div>
-          )}
-          {result && !result.ok && (
-            <div style={{ color: 'red', marginTop: 16 }}>
-              ✗ Erreur : {result.error}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
+**Endpoints par defaut :**
+```json
+{
+  "detectModules": "/api/setup/detect-modules",
+  "testDb": "/api/setup/test-db",
+  "installModules": "/api/setup/install-modules",
+  "install": "/api/setup/install",
+  "uploadJar": "/api/setup/upload-jar"
 }
 ```
 
+**Cles i18n attendues :** `setup.steps.*`, `setup.welcome.*`, `setup.modules.*`, `setup.dialect.*`, `setup.database.*`, `setup.admin.*`, `setup.summary.*`, `setup.back`, `setup.next`.
+
+#### Le wizard inclut :
+- **6 etapes** : Accueil → Modules → Dialecte → Base de donnees → Admin → Recapitulatif
+- **13 dialectes** avec distinction Premium (grises, non cliquables) et badges JDBC
+- **Upload JAR** integre pour les dialectes JDBC (hsqldb, oracle, db2, hana, sybase)
+- **Persistence sessionStorage** pour survivre aux hot-reloads Next.js
+- **Resolution des dependances** entre modules
+- **Retry automatique** apres npm install (le serveur peut redemarrer)
+
 ### Etape 5 — Middleware : rediriger vers /setup
 
 ```typescript
@@ -948,7 +776,25 @@ const { GET, POST } = createReconfigHandlers()
 export { GET, POST }
 ```
 
-#### 2. Page de reconfiguration
+#### 2. Route API JAR Upload (drivers JDBC)
+
+**`src/app/api/setup/upload-jar/route.ts`**
+```typescript
+// Author: Dr Hamid MADANI drmdh@msn.com
+import { createUploadJarHandlers } from '@mostajs/setup/api/upload-jar'
+
+const { GET, POST, DELETE } = createUploadJarHandlers()
+export { GET, POST, DELETE }
+```
+
+> La logique d'upload est dans `@mostajs/orm` (`saveJarFile`, `deleteJarFile`, `listJarFiles`).
+> La route factory dans `@mostajs/setup` ne fait que la deleguer.
+>
+> - **GET** — liste les JARs et le statut des dialects JDBC
+> - **POST** — upload un fichier `.jar` (multipart/form-data, champ `jar`)
+> - **DELETE** — supprime un JAR (`{ "fileName": "hsqldb-2.7.2.jar" }`)
+
+#### 3. Page de reconfiguration
 
 **`src/app/dashboard/settings/reconfig/page.tsx`**
 ```tsx
@@ -962,6 +808,7 @@ export default function ReconfigPage() {
       <ReconfigPanel
         apiEndpoint="/api/setup/reconfig"
         detectEndpoint="/api/setup/detect-modules"
+        jarEndpoint="/api/setup/upload-jar"
         showSeedOption
         onDbChanged={() => window.location.reload()}
         onSeedRequested={async () => {

package/dist/components/SetupWizard.d.ts

@@ -0,0 +1,19 @@
+export interface SetupWizardProps {
+    /** Translation function — receives i18n key, returns translated string */
+    t?: (key: string) => string;
+    /** Called when setup is complete and user clicks "Go to Login" */
+    onComplete?: () => void;
+    /** API endpoints */
+    endpoints?: {
+        detectModules?: string;
+        testDb?: string;
+        installModules?: string;
+        install?: string;
+        uploadJar?: string;
+    };
+    /** Default database name prefix (e.g. 'secuaccessdb') */
+    dbNamePrefix?: string;
+    /** Whether to persist wizard state in sessionStorage (default: true) */
+    persistState?: boolean;
+}
+export default function SetupWizard({ t: tProp, onComplete, endpoints, dbNamePrefix, persistState, }: SetupWizardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SetupWizard.js

@@ -0,0 +1,491 @@
+// @mostajs/setup — Setup Wizard (reusable, inline-styles, no Tailwind/shadcn dependency)
+// Author: Dr Hamid MADANI drmdh@msn.com
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+// ── Constants ────────────────────────────────────────────────
+const STEPS = ['welcome', 'modules', 'dialect', 'database', 'admin', 'summary'];
+const DIALECT_DEFAULTS = {
+    mongodb: { host: 'localhost', port: 27017, name: 'mydb_prod', user: '', password: '' },
+    sqlite: { host: '', port: 0, name: 'mydb', user: '', password: '' },
+    postgres: { host: 'localhost', port: 5432, name: 'mydb', user: 'postgres', password: '' },
+    mysql: { host: 'localhost', port: 3306, name: 'mydb', user: 'root', password: '' },
+    mariadb: { host: 'localhost', port: 3306, name: 'mydb', user: 'root', password: '' },
+    oracle: { host: 'localhost', port: 1521, name: 'mydb', user: 'system', password: '' },
+    mssql: { host: 'localhost', port: 1433, name: 'mydb', user: 'sa', password: '' },
+    cockroachdb: { host: 'localhost', port: 26257, name: 'mydb', user: 'root', password: '' },
+    db2: { host: 'localhost', port: 50000, name: 'mydb', user: 'db2inst1', password: '' },
+    hana: { host: 'localhost', port: 30015, name: 'mydb', user: 'SYSTEM', password: '' },
+    hsqldb: { host: 'localhost', port: 9001, name: 'mydb', user: 'SA', password: '' },
+    spanner: { host: '', port: 0, name: 'my-project/my-instance/mydb', user: '', password: '' },
+    sybase: { host: 'localhost', port: 5000, name: 'mydb', user: 'sa', password: '' },
+};
+const DIALECT_INFO = [
+    { key: 'mongodb', name: 'MongoDB', icon: '🍃' },
+    { key: 'sqlite', name: 'SQLite', icon: '📁' },
+    { key: 'postgres', name: 'PostgreSQL', icon: '🐘' },
+    { key: 'mysql', name: 'MySQL', icon: '🐬' },
+    { key: 'mariadb', name: 'MariaDB', icon: '🦭' },
+    { key: 'mssql', name: 'SQL Server', icon: '🟦' },
+    { key: 'oracle', name: 'Oracle', icon: '🔴', premium: true, jdbc: true },
+    { key: 'cockroachdb', name: 'CockroachDB', icon: '🪳' },
+    { key: 'db2', name: 'IBM DB2', icon: '🏢', premium: true, jdbc: true },
+    { key: 'hana', name: 'SAP HANA', icon: '💎', premium: true, jdbc: true },
+    { key: 'hsqldb', name: 'HyperSQL', icon: '⚡', jdbc: true },
+    { key: 'spanner', name: 'Cloud Spanner', icon: '☁️', premium: true },
+    { key: 'sybase', name: 'Sybase ASE', icon: '🔷', premium: true, jdbc: true },
+];
+const JDBC_DIALECTS = ['hsqldb', 'oracle', 'db2', 'hana', 'sybase'];
+const DRIVER_HINTS = {
+    mongodb: 'npm install mongoose',
+    sqlite: 'npm install better-sqlite3',
+    postgres: 'npm install pg',
+    mysql: 'npm install mysql2',
+    mariadb: 'npm install mariadb',
+    oracle: 'npm install oracledb',
+    mssql: 'npm install mssql',
+    cockroachdb: 'npm install pg',
+    db2: 'npm install ibm_db',
+    hana: 'npm install @sap/hana-client',
+    hsqldb: 'Uploader hsqldb*.jar dans jar_files/',
+    spanner: 'npm install @google-cloud/spanner',
+    sybase: 'npm install sybase',
+};
+const STORAGE_KEY = 'setup-wizard-state';
+// ── Inline Styles ────────────────────────────────────────────
+const S = {
+    wrapper: { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', padding: 16, fontFamily: 'system-ui, sans-serif' },
+    container: { width: '100%', maxWidth: 672 },
+    // Stepper
+    stepperRow: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 32, gap: 8, flexWrap: 'wrap' },
+    stepCircle: (state) => ({
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        width: 32, height: 32, borderRadius: '50%', fontSize: 13, fontWeight: 500,
+        backgroundColor: state === 'future' ? '#e5e7eb' : '#0284c7',
+        color: state === 'future' ? '#6b7280' : '#fff',
+        ...(state === 'current' ? { boxShadow: '0 0 0 4px #bae6fd' } : {}),
+    }),
+    stepLabel: (active) => ({
+        fontSize: 13,
+        fontWeight: active ? 600 : 400,
+        color: active ? '#0369a1' : '#6b7280',
+    }),
+    stepLine: (done) => ({
+        width: 32, height: 2,
+        backgroundColor: done ? '#0284c7' : '#e5e7eb',
+    }),
+    // Card
+    card: { backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: 16, boxShadow: '0 10px 25px -5px rgba(0,0,0,0.1)', padding: 32 },
+    // Section header
+    sectionHeader: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 },
+    sectionIcon: { fontSize: 24, color: '#0284c7', lineHeight: 1 },
+    sectionTitle: { fontSize: 20, fontWeight: 700, color: '#111827' },
+    sectionDesc: { fontSize: 13, color: '#6b7280', marginTop: 4 },
+    // Buttons
+    btn: (variant = 'primary', disabled = false) => ({
+        display: 'inline-flex', alignItems: 'center', gap: 8,
+        padding: variant === 'lg' ? '12px 24px' : '8px 16px',
+        border: variant === 'outline' ? '1px solid #d1d5db' : 'none',
+        borderRadius: 8,
+        fontSize: variant === 'lg' ? 15 : 13,
+        fontWeight: 600,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        backgroundColor: variant === 'outline' ? '#fff' : '#0284c7',
+        color: variant === 'outline' ? '#374151' : '#fff',
+        transition: 'all 0.15s',
+    }),
+    // Form
+    formGroup: { marginBottom: 12 },
+    label: { display: 'block', marginBottom: 4, fontWeight: 500, fontSize: 13, color: '#374151' },
+    input: { width: '100%', padding: '8px 12px', border: '1px solid #d1d5db', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', outline: 'none' },
+    formRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 },
+    // Grid
+    grid2: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 },
+    grid3: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 12 },
+    // Module card
+    moduleCard: (selected, disabled) => ({
+        padding: 16, borderRadius: 8, textAlign: 'left',
+        border: `2px solid ${selected ? '#0284c7' : '#e5e7eb'}`,
+        backgroundColor: selected ? '#f0f9ff' : '#fff',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        transition: 'all 0.2s',
+    }),
+    moduleHeader: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 },
+    moduleLeft: { display: 'flex', alignItems: 'center', gap: 8 },
+    moduleName: { fontWeight: 600, fontSize: 14, color: '#111827' },
+    moduleDesc: { fontSize: 12, color: '#6b7280' },
+    badge: (type) => ({
+        display: 'inline-block', padding: '1px 6px', borderRadius: 4, fontSize: 10, fontWeight: 600, marginLeft: 4,
+        backgroundColor: type === 'required' ? '#dbeafe' : type === 'installed' ? '#d1fae5' :
+            type === 'new' ? '#f3e8ff' : '#fef3c7',
+        color: type === 'required' ? '#1e40af' : type === 'installed' ? '#065f46' :
+            type === 'new' ? '#6b21a8' : '#92400e',
+    }),
+    // Dialect card
+    dialectCard: (selected, premium) => ({
+        padding: 16, borderRadius: 8, textAlign: 'center',
+        border: `2px solid ${!premium && selected ? '#0284c7' : '#e5e7eb'}`,
+        backgroundColor: !premium && selected ? '#f0f9ff' : '#fff',
+        cursor: premium ? 'not-allowed' : 'pointer',
+        opacity: premium ? 0.4 : 1,
+        filter: premium ? 'grayscale(0.5)' : 'none',
+        transition: 'all 0.2s',
+    }),
+    dialectIcon: { fontSize: 24, marginBottom: 4 },
+    dialectName: { fontSize: 12, fontWeight: 600, color: '#111827' },
+    // Alert
+    alert: (type) => ({
+        padding: 12, borderRadius: 8, marginBottom: 16, fontSize: 13,
+        backgroundColor: type === 'success' ? '#d1fae5' : type === 'error' ? '#fee2e2' :
+            type === 'warning' ? '#fef3c7' : '#dbeafe',
+        color: type === 'success' ? '#065f46' : type === 'error' ? '#991b1b' :
+            type === 'warning' ? '#92400e' : '#1e40af',
+        border: `1px solid ${type === 'success' ? '#a7f3d0' : type === 'error' ? '#fecaca' :
+            type === 'warning' ? '#fde68a' : '#bfdbfe'}`,
+    }),
+    // Summary card
+    summaryCard: { border: '1px solid #e5e7eb', borderRadius: 8, padding: 16, marginBottom: 12 },
+    summaryTitle: { fontWeight: 600, fontSize: 14, color: '#374151', marginBottom: 8 },
+    summaryText: { fontSize: 13, color: '#6b7280' },
+    // Checkbox row
+    checkRow: { display: 'flex', alignItems: 'flex-start', gap: 12, padding: '8px 0' },
+    checkbox: { width: 16, height: 16, marginTop: 2, cursor: 'pointer', accentColor: '#0284c7' },
+    // Nav row
+    navRow: { display: 'flex', justifyContent: 'space-between', paddingTop: 16 },
+    // JAR section
+    jarBox: { padding: 16, borderRadius: 8, backgroundColor: '#f0f9ff', border: '1px solid #bae6fd', marginTop: 12 },
+    jarTitle: { fontSize: 13, fontWeight: 600, color: '#0369a1', marginBottom: 8 },
+    // Module badges
+    moduleBadges: { display: 'flex', alignItems: 'center', gap: 4 },
+    // Center
+    center: { textAlign: 'center' },
+    // Spacer
+    spacer: (px) => ({ height: px }),
+    // Flex
+    flex: (gap = 8) => ({ display: 'flex', alignItems: 'center', gap }),
+    flexBetween: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+    flexWrap: { display: 'flex', flexWrap: 'wrap', gap: 8 },
+};
+// ── Helpers ──────────────────────────────────────────────────
+function resolveModuleDeps(selected, all) {
+    const set = new Set(selected);
+    let changed = true;
+    while (changed) {
+        changed = false;
+        for (const m of all) {
+            if (set.has(m.key) && m.dependsOn) {
+                for (const dep of m.dependsOn) {
+                    if (!set.has(dep)) {
+                        set.add(dep);
+                        changed = true;
+                    }
+                }
+            }
+        }
+    }
+    return Array.from(set);
+}
+async function safeJson(res) {
+    try {
+        return JSON.parse(await res.text());
+    }
+    catch {
+        return null;
+    }
+}
+async function fetchRetry(url, init, retries = 3, delay = 2000) {
+    for (let i = 0; i < retries; i++) {
+        try {
+            const res = await fetch(url, init);
+            if (res.status === 404 && i < retries - 1) {
+                await new Promise(r => setTimeout(r, delay));
+                continue;
+            }
+            return res;
+        }
+        catch (err) {
+            if (i < retries - 1) {
+                await new Promise(r => setTimeout(r, delay));
+                continue;
+            }
+            throw err;
+        }
+    }
+    return fetch(url, init);
+}
+// ── JAR Upload Sub-component ─────────────────────────────────
+function JarUploadInline({ dialect, jarEndpoint }) {
+    const [uploading, setUploading] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [jarStatus, setJarStatus] = useState(null);
+    useEffect(() => {
+        fetch(jarEndpoint)
+            .then(r => r.json())
+            .then(data => {
+            if (data.ok) {
+                const s = data.dialects?.find((d) => d.dialect === dialect);
+                setJarStatus(s || { hasJar: false, jarFile: null });
+            }
+        })
+            .catch(() => { });
+    }, [dialect, jarEndpoint]);
+    const handleUpload = async (e) => {
+        const file = e.target.files?.[0];
+        if (!file || !file.name.endsWith('.jar'))
+            return;
+        setUploading(true);
+        setMessage(null);
+        try {
+            const fd = new FormData();
+            fd.append('jar', file);
+            const res = await fetch(jarEndpoint, { method: 'POST', body: fd });
+            const result = await res.json();
+            if (result.ok) {
+                setMessage({ ok: true, text: `${result.fileName} uploade` });
+                setJarStatus({ hasJar: true, jarFile: result.fileName });
+            }
+            else {
+                setMessage({ ok: false, text: result.error || 'Erreur' });
+            }
+        }
+        catch {
+            setMessage({ ok: false, text: 'Erreur reseau' });
+        }
+        finally {
+            setUploading(false);
+            e.target.value = '';
+        }
+    };
+    return (_jsxs("div", { style: S.jarBox, children: [_jsxs("div", { style: S.flex(8), children: [_jsx("span", { style: S.jarTitle, children: "Driver JDBC" }), jarStatus?.hasJar ? (_jsx("span", { style: { ...S.badge('installed'), marginLeft: 0 }, children: jarStatus.jarFile })) : (_jsx("span", { style: { fontSize: 12, color: '#6b7280' }, children: "Aucun JAR installe" }))] }), _jsxs("div", { style: { ...S.flex(12), marginTop: 8 }, children: [_jsxs("label", { style: { ...S.btn('primary', uploading), cursor: uploading ? 'wait' : 'pointer', fontSize: 12, padding: '6px 12px' }, children: [uploading ? 'Upload...' : 'Uploader un .jar', _jsx("input", { type: "file", accept: ".jar", onChange: handleUpload, disabled: uploading, style: { display: 'none' } })] }), _jsx("span", { style: { fontSize: 11, color: '#9ca3af' }, children: "Ex: hsqldb*.jar, ojdbc*.jar, db2jcc*.jar" })] }), message && (_jsx("p", { style: { fontSize: 12, color: message.ok ? '#059669' : '#dc2626', marginTop: 8 }, children: message.text }))] }));
+}
+// ── Main Component ───────────────────────────────────────────
+export default function SetupWizard({ t: tProp, onComplete, endpoints = {}, dbNamePrefix = 'mydb', persistState = true, }) {
+    const t = tProp || ((k) => k);
+    const ep = {
+        detectModules: endpoints.detectModules || '/api/setup/detect-modules',
+        testDb: endpoints.testDb || '/api/setup/test-db',
+        installModules: endpoints.installModules || '/api/setup/install-modules',
+        install: endpoints.install || '/api/setup/install',
+        uploadJar: endpoints.uploadJar || '/api/setup/upload-jar',
+    };
+    // --- State ---
+    const [currentStep, setCurrentStep] = useState(0);
+    const [dialect, setDialect] = useState('mongodb');
+    const [dbConfig, setDbConfig] = useState({ ...DIALECT_DEFAULTS.mongodb, name: `${dbNamePrefix}_prod` });
+    const [dbTestResult, setDbTestResult] = useState(null);
+    const [dbTesting, setDbTesting] = useState(false);
+    const [adminConfig, setAdminConfig] = useState({ firstName: '', lastName: '', email: '', password: '', confirmPassword: '' });
+    const [seedOptions, setSeedOptions] = useState({ activities: true, demoUsers: false, demoData: false });
+    const [availableModules, setAvailableModules] = useState([]);
+    const [selectedModules, setSelectedModules] = useState([]);
+    const [detectedModules, setDetectedModules] = useState([]);
+    const [modulesDetected, setModulesDetected] = useState(false);
+    const [installing, setInstalling] = useState(false);
+    const [installResult, setInstallResult] = useState(null);
+    const [hydrated, setHydrated] = useState(false);
+    const step = STEPS[currentStep];
+    // --- Persist / Restore ---
+    useEffect(() => {
+        if (!persistState) {
+            setHydrated(true);
+            return;
+        }
+        try {
+            const raw = sessionStorage.getItem(STORAGE_KEY);
+            if (raw) {
+                const saved = JSON.parse(raw);
+                if (saved.currentStep != null)
+                    setCurrentStep(saved.currentStep);
+                if (saved.dialect)
+                    setDialect(saved.dialect);
+                if (saved.dbConfig)
+                    setDbConfig(saved.dbConfig);
+                if (saved.adminConfig)
+                    setAdminConfig(saved.adminConfig);
+                if (saved.seedOptions)
+                    setSeedOptions(saved.seedOptions);
+                if (saved.selectedModules?.length)
+                    setSelectedModules(saved.selectedModules);
+            }
+        }
+        catch { }
+        setHydrated(true);
+    }, [persistState]);
+    useEffect(() => {
+        if (!hydrated || !persistState)
+            return;
+        try {
+            sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ currentStep, dialect, dbConfig, adminConfig, seedOptions, selectedModules }));
+        }
+        catch { }
+    }, [hydrated, persistState, currentStep, dialect, dbConfig, adminConfig, seedOptions, selectedModules]);
+    // --- Detect modules ---
+    useEffect(() => {
+        fetch(ep.detectModules)
+            .then(r => r.json())
+            .then((data) => {
+            if (data.modules)
+                setAvailableModules(data.modules);
+            if (data.installed)
+                setDetectedModules(data.installed);
+            if (selectedModules.length === 0) {
+                const mods = data.modules || [];
+                const pre = new Set([
+                    ...mods.filter(m => m.required || m.default).map(m => m.key),
+                    ...(data.installed || []),
+                ]);
+                setSelectedModules(Array.from(pre));
+            }
+            setModulesDetected(true);
+        })
+            .catch(() => setModulesDetected(true));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // --- Module toggle ---
+    const toggleModule = useCallback((key) => {
+        const mod = availableModules.find(m => m.key === key);
+        if (!mod || mod.required)
+            return;
+        setSelectedModules(prev => {
+            if (prev.includes(key)) {
+                const toRemove = new Set([key]);
+                let changed = true;
+                while (changed) {
+                    changed = false;
+                    for (const m of availableModules) {
+                        if (toRemove.has(m.key) || m.required)
+                            continue;
+                        if (m.dependsOn?.some(dep => toRemove.has(dep)) && prev.includes(m.key)) {
+                            toRemove.add(m.key);
+                            changed = true;
+                        }
+                    }
+                }
+                return prev.filter(k => !toRemove.has(k));
+            }
+            else {
+                return resolveModuleDeps([...prev, key], availableModules);
+            }
+        });
+    }, [availableModules]);
+    // --- Dialect select ---
+    function selectDialect(d) {
+        setDialect(d);
+        const defaults = DIALECT_DEFAULTS[d];
+        setDbConfig({ ...defaults, name: defaults.name === 'mydb' ? dbNamePrefix : defaults.name === 'mydb_prod' ? `${dbNamePrefix}_prod` : defaults.name.replace('mydb', dbNamePrefix) });
+        setDbTestResult(null);
+    }
+    // --- Test DB ---
+    async function testDb() {
+        setDbTesting(true);
+        setDbTestResult(null);
+        try {
+            const res = await fetch(ep.testDb, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ dialect, ...dbConfig }),
+            });
+            const data = await res.json();
+            setDbTestResult(res.ok ? data : { ok: false, error: data.error?.message || 'Erreur' });
+        }
+        catch (err) {
+            setDbTestResult({ ok: false, error: err instanceof Error ? err.message : 'Erreur' });
+        }
+        setDbTesting(false);
+    }
+    // --- Install ---
+    async function runInstallation() {
+        setInstalling(true);
+        setInstallResult(null);
+        try {
+            const modRes = await fetch(ep.installModules, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ modules: selectedModules }),
+            });
+            if (!modRes.ok) {
+                const d = await safeJson(modRes);
+                setInstallResult({ ok: false, error: d?.error?.message || 'Erreur installation modules' });
+                setInstalling(false);
+                return;
+            }
+            const res = await fetchRetry(ep.install, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    dialect,
+                    db: dbConfig,
+                    admin: { email: adminConfig.email, password: adminConfig.password, firstName: adminConfig.firstName, lastName: adminConfig.lastName },
+                    seed: seedOptions,
+                    modules: selectedModules,
+                }),
+            });
+            const data = await safeJson(res);
+            if (res.ok && data) {
+                setInstallResult({ ok: true, needsRestart: data.data?.needsRestart });
+            }
+            else {
+                setInstallResult({ ok: false, error: data?.error?.message || `Erreur installation (HTTP ${res.status})` });
+            }
+        }
+        catch (err) {
+            setInstallResult({ ok: false, error: err instanceof Error ? err.message : 'Erreur' });
+        }
+        setInstalling(false);
+    }
+    // --- Navigation ---
+    function canGoNext() {
+        switch (step) {
+            case 'welcome': return true;
+            case 'modules': return selectedModules.length > 0;
+            case 'dialect': return true;
+            case 'database':
+                if (dialect === 'sqlite' || dialect === 'spanner')
+                    return dbConfig.name.trim() !== '';
+                return dbTestResult?.ok === true;
+            case 'admin':
+                return adminConfig.firstName.trim() !== '' && adminConfig.lastName.trim() !== '' &&
+                    adminConfig.email.trim() !== '' && adminConfig.password.length >= 6 &&
+                    adminConfig.password === adminConfig.confirmPassword;
+            case 'summary': return false;
+        }
+    }
+    function goNext() { if (currentStep < STEPS.length - 1)
+        setCurrentStep(currentStep + 1); }
+    function goBack() { if (currentStep > 0)
+        setCurrentStep(currentStep - 1); }
+    function dbSummaryLabel() {
+        if (dialect === 'sqlite')
+            return `SQLite — ./data/${dbConfig.name}.db`;
+        if (dialect === 'spanner')
+            return `Cloud Spanner — ${dbConfig.name}`;
+        const info = DIALECT_INFO.find(d => d.key === dialect);
+        return `${info?.name || dialect} — ${dbConfig.host}:${dbConfig.port}/${dbConfig.name}`;
+    }
+    function handleComplete() {
+        if (persistState) {
+            try {
+                sessionStorage.removeItem(STORAGE_KEY);
+            }
+            catch { }
+        }
+        onComplete?.();
+    }
+    // ── Render ─────────────────────────────────────────────────
+    return (_jsx("div", { style: S.wrapper, children: _jsxs("div", { style: S.container, children: [_jsx("div", { style: S.stepperRow, children: STEPS.map((s, i) => (_jsxs("div", { style: S.flex(8), children: [_jsx("div", { style: S.stepCircle(i < currentStep ? 'done' : i === currentStep ? 'current' : 'future'), children: i < currentStep ? '✓' : i + 1 }), _jsx("span", { style: S.stepLabel(i === currentStep), children: t(`setup.steps.${s}`) }), i < STEPS.length - 1 && _jsx("div", { style: S.stepLine(i < currentStep) })] }, s))) }), _jsxs("div", { style: S.card, children: [step === 'welcome' && (_jsxs("div", { style: S.center, children: [_jsx("div", { style: { width: 80, height: 80, borderRadius: '50%', backgroundColor: '#e0f2fe', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', fontSize: 40 }, children: "\uD83D\uDEE1\uFE0F" }), _jsx("h2", { style: { fontSize: 24, fontWeight: 700, color: '#111827', marginBottom: 8 }, children: t('setup.welcome.title') }), _jsx("p", { style: { color: '#6b7280', marginBottom: 24 }, children: t('setup.welcome.description') }), _jsxs("button", { style: S.btn('lg'), onClick: goNext, children: [t('setup.welcome.start'), " \u2192"] })] })), step === 'modules' && (_jsxs("div", { children: [_jsxs("div", { style: S.sectionHeader, children: [_jsx("span", { style: S.sectionIcon, children: "\uD83D\uDCE6" }), _jsxs("div", { children: [_jsx("div", { style: S.sectionTitle, children: t('setup.modules.title') }), _jsx("div", { style: S.sectionDesc, children: t('setup.modules.description') })] })] }), _jsx("div", { style: S.grid2, children: availableModules.map(mod => {
+                                        const isSelected = selectedModules.includes(mod.key);
+                                        const isDetected = detectedModules.includes(mod.key);
+                                        return (_jsxs("div", { style: S.moduleCard(isSelected, !!mod.required), onClick: () => toggleModule(mod.key), children: [_jsxs("div", { style: S.moduleHeader, children: [_jsxs("div", { style: S.moduleLeft, children: [_jsx("span", { style: { fontSize: 20 }, children: mod.icon }), _jsx("span", { style: S.moduleName, children: mod.label })] }), _jsxs("div", { style: S.moduleBadges, children: [mod.discovered && _jsx("span", { style: S.badge('new'), children: "Nouveau" }), isDetected && _jsx("span", { style: S.badge('installed'), children: t('setup.modules.installed') }), mod.required && _jsx("span", { style: S.badge('required'), children: t('setup.modules.required') }), _jsx("input", { type: "checkbox", checked: isSelected, disabled: mod.required, readOnly: true, style: S.checkbox })] })] }), _jsx("div", { style: S.moduleDesc, children: mod.description }), mod.dependsOn?.length ? (_jsxs("div", { style: { fontSize: 11, color: '#9ca3af', marginTop: 4 }, children: ["Depend de : ", mod.dependsOn.join(', ')] })) : null] }, mod.key));
+                                    }) }), _jsxs("div", { style: S.navRow, children: [_jsxs("button", { style: S.btn('outline'), onClick: goBack, children: ["\u2190 ", t('setup.back')] }), _jsxs("button", { style: S.btn('primary', !canGoNext()), onClick: goNext, disabled: !canGoNext(), children: [t('setup.next'), " \u2192"] })] })] })), step === 'dialect' && (_jsxs("div", { children: [_jsxs("div", { style: S.sectionHeader, children: [_jsx("span", { style: S.sectionIcon, children: "\uD83D\uDCBE" }), _jsxs("div", { children: [_jsx("div", { style: S.sectionTitle, children: t('setup.dialect.title') }), _jsx("div", { style: S.sectionDesc, children: t('setup.dialect.description') })] })] }), _jsx("div", { style: S.grid3, children: DIALECT_INFO.map(d => (_jsxs("div", { style: S.dialectCard(dialect === d.key, !!d.premium), onClick: () => !d.premium && selectDialect(d.key), title: d.premium ? `${d.name} — disponible en version Premium` : d.name, children: [_jsx("div", { style: S.dialectIcon, children: d.icon }), _jsx("div", { style: S.dialectName, children: d.name }), d.premium && (_jsx("span", { style: { ...S.badge('premium'), marginLeft: 0, marginTop: 4 }, children: "Premium" }))] }, d.key))) }), _jsxs("div", { style: S.navRow, children: [_jsxs("button", { style: S.btn('outline'), onClick: goBack, children: ["\u2190 ", t('setup.back')] }), _jsxs("button", { style: S.btn('primary'), onClick: goNext, children: [t('setup.next'), " \u2192"] })] })] })), step === 'database' && (_jsxs("div", { children: [_jsxs("div", { style: S.sectionHeader, children: [_jsx("span", { style: S.sectionIcon, children: "\uD83D\uDDC4\uFE0F" }), _jsxs("div", { children: [_jsx("div", { style: S.sectionTitle, children: t('setup.database.title') }), _jsx("div", { style: S.sectionDesc, children: t('setup.database.description') })] })] }), dialect === 'sqlite' ? (_jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.name') }), _jsx("input", { style: S.input, value: dbConfig.name, onChange: e => { setDbConfig({ ...dbConfig, name: e.target.value }); setDbTestResult(null); }, placeholder: dbNamePrefix }), _jsxs("p", { style: { fontSize: 11, color: '#9ca3af', marginTop: 4 }, children: [t('setup.database.sqliteInfo'), " ", _jsxs("code", { style: { fontFamily: 'monospace', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: 3 }, children: ["./data/", dbConfig.name, ".db"] })] })] })) : dialect === 'spanner' ? (_jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.spannerPath') }), _jsx("input", { style: S.input, value: dbConfig.name, onChange: e => { setDbConfig({ ...dbConfig, name: e.target.value }); setDbTestResult(null); }, placeholder: "my-project/my-instance/mydb" }), _jsx("p", { style: { fontSize: 11, color: '#9ca3af', marginTop: 4 }, children: t('setup.database.spannerInfo') })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: S.formRow, children: [_jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.host') }), _jsx("input", { style: S.input, value: dbConfig.host, onChange: e => { setDbConfig({ ...dbConfig, host: e.target.value }); setDbTestResult(null); } })] }), _jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.port') }), _jsx("input", { style: S.input, type: "number", value: dbConfig.port, onChange: e => { setDbConfig({ ...dbConfig, port: parseInt(e.target.value) || 0 }); setDbTestResult(null); } })] })] }), _jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.name') }), _jsx("input", { style: S.input, value: dbConfig.name, onChange: e => { setDbConfig({ ...dbConfig, name: e.target.value }); setDbTestResult(null); } })] }), dialect !== 'hsqldb' && (_jsxs("div", { style: S.formRow, children: [_jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.user') }), _jsx("input", { style: S.input, value: dbConfig.user, onChange: e => { setDbConfig({ ...dbConfig, user: e.target.value }); setDbTestResult(null); } })] }), _jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.database.password') }), _jsx("input", { style: S.input, type: "password", value: dbConfig.password, onChange: e => { setDbConfig({ ...dbConfig, password: e.target.value }); setDbTestResult(null); } })] })] }))] })), dialect !== 'mongodb' && dialect !== 'sqlite' && (_jsxs("div", { style: { ...S.alert('warning'), marginTop: 12 }, children: [t('setup.database.driverHint'), ' ', _jsx("code", { style: { fontFamily: 'monospace', backgroundColor: '#fef3c7', padding: '1px 4px', borderRadius: 3 }, children: DRIVER_HINTS[dialect] })] })), JDBC_DIALECTS.includes(dialect) && (_jsx(JarUploadInline, { dialect: dialect, jarEndpoint: ep.uploadJar })), dialect !== 'sqlite' && dialect !== 'spanner' && (_jsxs("div", { style: { ...S.flex(16), marginTop: 16 }, children: [_jsxs("button", { style: S.btn('outline', dbTesting), onClick: testDb, disabled: dbTesting, children: [dbTesting ? '⏳ ' : '🗄️ ', dbTesting ? t('setup.database.testing') : t('setup.database.test')] }), dbTestResult && (_jsx("span", { style: { fontSize: 13, color: dbTestResult.ok ? '#059669' : '#dc2626' }, children: dbTestResult.ok
+                                                ? `✅ ${t('setup.database.success')}${dbTestResult.dbVersion ? ` (v${dbTestResult.dbVersion})` : ''}`
+                                                : `❌ ${t('setup.database.error')}: ${dbTestResult.error}` }))] })), _jsxs("div", { style: S.navRow, children: [_jsxs("button", { style: S.btn('outline'), onClick: goBack, children: ["\u2190 ", t('setup.back')] }), _jsxs("button", { style: S.btn('primary', !canGoNext()), onClick: goNext, disabled: !canGoNext(), children: [t('setup.next'), " \u2192"] })] })] })), step === 'admin' && (_jsxs("div", { children: [_jsxs("div", { style: S.sectionHeader, children: [_jsx("span", { style: S.sectionIcon, children: "\uD83D\uDC64" }), _jsxs("div", { children: [_jsx("div", { style: S.sectionTitle, children: t('setup.admin.title') }), _jsx("div", { style: S.sectionDesc, children: t('setup.admin.description') })] })] }), _jsxs("div", { style: S.formRow, children: [_jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.admin.firstName') }), _jsx("input", { style: S.input, value: adminConfig.firstName, onChange: e => setAdminConfig({ ...adminConfig, firstName: e.target.value }) })] }), _jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.admin.lastName') }), _jsx("input", { style: S.input, value: adminConfig.lastName, onChange: e => setAdminConfig({ ...adminConfig, lastName: e.target.value }) })] })] }), _jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.admin.email') }), _jsx("input", { style: S.input, type: "email", value: adminConfig.email, onChange: e => setAdminConfig({ ...adminConfig, email: e.target.value }), placeholder: "admin@example.com" })] }), _jsxs("div", { style: S.formRow, children: [_jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.admin.password') }), _jsx("input", { style: S.input, type: "password", value: adminConfig.password, onChange: e => setAdminConfig({ ...adminConfig, password: e.target.value }) })] }), _jsxs("div", { style: S.formGroup, children: [_jsx("label", { style: S.label, children: t('setup.admin.confirmPassword') }), _jsx("input", { style: S.input, type: "password", value: adminConfig.confirmPassword, onChange: e => setAdminConfig({ ...adminConfig, confirmPassword: e.target.value }) })] })] }), adminConfig.password && adminConfig.confirmPassword && adminConfig.password !== adminConfig.confirmPassword && (_jsx("p", { style: { fontSize: 13, color: '#dc2626' }, children: t('setup.admin.passwordMismatch') })), _jsxs("div", { style: S.navRow, children: [_jsxs("button", { style: S.btn('outline'), onClick: goBack, children: ["\u2190 ", t('setup.back')] }), _jsxs("button", { style: S.btn('primary', !canGoNext()), onClick: goNext, disabled: !canGoNext(), children: [t('setup.next'), " \u2192"] })] })] })), step === 'summary' && (_jsxs("div", { children: [_jsxs("div", { style: S.sectionHeader, children: [_jsx("span", { style: S.sectionIcon, children: "\u2699\uFE0F" }), _jsxs("div", { children: [_jsx("div", { style: S.sectionTitle, children: t('setup.summary.title') }), _jsx("div", { style: S.sectionDesc, children: t('setup.summary.description') })] })] }), _jsxs("div", { style: S.summaryCard, children: [_jsx("div", { style: S.summaryTitle, children: t('setup.summary.dbConfig') }), _jsxs("div", { style: S.summaryText, children: [_jsx("span", { style: { fontFamily: 'monospace' }, children: dbSummaryLabel() }), dialect !== 'sqlite' && dbConfig.user && _jsxs("span", { style: { display: 'block', marginTop: 4 }, children: ["Utilisateur: ", dbConfig.user] })] })] }), _jsxs("div", { style: S.summaryCard, children: [_jsx("div", { style: S.summaryTitle, children: t('setup.summary.adminConfig') }), _jsxs("div", { style: S.summaryText, children: [_jsxs("div", { children: [adminConfig.firstName, " ", adminConfig.lastName] }), _jsx("div", { children: adminConfig.email })] })] }), _jsxs("div", { style: S.summaryCard, children: [_jsx("div", { style: S.summaryTitle, children: t('setup.modules.title') }), _jsx("div", { style: S.flexWrap, children: selectedModules.map(key => {
+                                                const mod = availableModules.find(m => m.key === key);
+                                                return mod ? (_jsxs("span", { style: {
+                                                        display: 'inline-flex', alignItems: 'center', gap: 4,
+                                                        fontSize: 12, backgroundColor: '#f0f9ff', color: '#0369a1',
+                                                        border: '1px solid #bae6fd', borderRadius: 16, padding: '4px 10px',
+                                                    }, children: [mod.icon, " ", mod.label] }, key)) : null;
+                                            }) })] }), _jsxs("div", { style: S.summaryCard, children: [_jsx("div", { style: S.summaryTitle, children: t('setup.summary.seedTitle') }), _jsx("p", { style: { ...S.summaryText, marginBottom: 12 }, children: t('setup.summary.seedInfo') }), _jsxs("div", { style: S.checkRow, children: [_jsx("input", { type: "checkbox", style: S.checkbox, checked: seedOptions.activities, onChange: e => setSeedOptions({ ...seedOptions, activities: e.target.checked, demoData: e.target.checked ? seedOptions.demoData : false }), disabled: installing || !!installResult?.ok }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 500 }, children: t('setup.summary.seedActivities') }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: t('setup.summary.seedActivitiesDesc') })] })] }), _jsxs("div", { style: S.checkRow, children: [_jsx("input", { type: "checkbox", style: S.checkbox, checked: seedOptions.demoUsers, onChange: e => setSeedOptions({ ...seedOptions, demoUsers: e.target.checked }), disabled: installing || !!installResult?.ok }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 500 }, children: t('setup.summary.seedDemoUsers') }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: t('setup.summary.seedDemoUsersDesc') })] })] }), _jsxs("div", { style: S.checkRow, children: [_jsx("input", { type: "checkbox", style: S.checkbox, checked: seedOptions.demoData, onChange: e => setSeedOptions({ ...seedOptions, demoData: e.target.checked, activities: e.target.checked ? true : seedOptions.activities }), disabled: installing || !!installResult?.ok }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 500 }, children: t('setup.summary.seedDemoData') }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: t('setup.summary.seedDemoDataDesc') })] })] })] }), installResult && (_jsx("div", { style: S.alert(installResult.ok ? 'success' : 'error'), children: installResult.ok ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { fontWeight: 600, marginBottom: 4 }, children: ["\u2705 ", t('setup.summary.success')] }), _jsx("div", { children: t('setup.summary.successDesc') }), installResult.needsRestart && (_jsx("div", { style: { color: '#92400e', fontWeight: 500, marginTop: 8 }, children: t('setup.summary.needsRestart') }))] })) : (_jsxs("div", { children: ["\u274C ", installResult.error] })) })), _jsx("div", { style: S.navRow, children: !installResult?.ok ? (_jsxs(_Fragment, { children: [_jsxs("button", { style: S.btn('outline', installing), onClick: goBack, disabled: installing, children: ["\u2190 ", t('setup.back')] }), _jsxs("button", { style: S.btn('primary', installing), onClick: runInstallation, disabled: installing, children: [installing ? '⏳ ' : '⚙️ ', installing ? t('setup.summary.installing') : t('setup.summary.install')] })] })) : (_jsx("div", { style: { width: '100%', textAlign: 'center' }, children: _jsxs("button", { style: S.btn('lg'), onClick: handleComplete, children: [t('setup.summary.goToLogin'), " \u2192"] }) })) })] }))] })] }) }));
+}

package/dist/index.d.ts

@@ -13,5 +13,6 @@ export { createInstallModulesHandler } from './api/install-modules.route';
 export { createReconfigHandlers } from './api/reconfig.route';
 export { createUploadJarHandlers } from './api/upload-jar.route';
 export { default as ReconfigPanel } from './components/ReconfigPanel';
+export { default as SetupWizard } from './components/SetupWizard';
 export { setupMenuContribution } from './lib/menu';
 export type { DialectType, DialectInfo, DbConfig, InstallConfig, SeedOptions, SeedDefinition, MostaSetupConfig, ModuleDefinition, } from './types/index';

package/dist/index.js

@@ -20,5 +20,6 @@ export { createReconfigHandlers } from './api/reconfig.route';
 export { createUploadJarHandlers } from './api/upload-jar.route';
 // Components
 export { default as ReconfigPanel } from './components/ReconfigPanel';
+export { default as SetupWizard } from './components/SetupWizard';
 // Menu contribution
 export { setupMenuContribution } from './lib/menu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/setup",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Reusable setup wizard module — multi-dialect DB configuration, .env.local writer, seed runner",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",
   "license": "MIT",
@@ -43,6 +43,11 @@
       "import": "./dist/components/ReconfigPanel.js",
       "default": "./dist/components/ReconfigPanel.js"
     },
+    "./components/SetupWizard": {
+      "types": "./dist/components/SetupWizard.d.ts",
+      "import": "./dist/components/SetupWizard.js",
+      "default": "./dist/components/SetupWizard.js"
+    },
     "./api/reconfig": {
       "types": "./dist/api/reconfig.route.d.ts",
       "import": "./dist/api/reconfig.route.js",
@@ -81,7 +86,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@mostajs/orm": "^1.3.0",
+    "@mostajs/orm": "^1.3.1",
     "bcryptjs": "^2.4.3"
   },
   "devDependencies": {