diff --git a/.gitignore b/.gitignore
index 3f48653..76880a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,10 +34,6 @@ FEATURE_IDEAS.md
 bin/.phpunit.result.cache
 ###< temp files ###
 
-###> frontend ###
-/frontend/
-###< frontend ###
-
 ###> ide ###
 /.idea/
 ###< ide ###
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..1f6f542
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,29 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Playwright
+e2e/.auth/
+playwright-report/
+test-results/
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..8512a37
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,155 @@
+# Inventory Frontend
+
+Interface web de gestion d'inventaire industriel pour **Malio**. Application SPA complète permettant la gestion du parc machines, des pièces, composants, produits, fournisseurs et documents associés.
+
+## Stack technique
+
+| Technologie | Version | Rôle |
+|-------------|---------|------|
+| [Nuxt](https://nuxt.com) | 4 | Framework (SPA, SSR désactivé) |
+| [Vue 3](https://vuejs.org) | 3.5 | Composition API + `<script setup>` |
+| [TypeScript](https://www.typescriptlang.org) | 5.7 | Typage strict sur l'ensemble du projet |
+| [TailwindCSS](https://tailwindcss.com) | 4 | Utility-first CSS |
+| [DaisyUI](https://daisyui.com) | 5 | Composants UI (alertes, modales, badges, etc.) |
+| [Lucide](https://lucide.dev) | via unplugin-icons | Icônes SVG |
+| [Vitest](https://vitest.dev) | 4 | Tests unitaires |
+| [Playwright](https://playwright.dev) | 1.58 | Tests E2E |
+
+## Prérequis
+
+- **Node.js** >= 20
+- **npm**
+- **Backend Symfony** démarré avec l'API sur `http://localhost:8081/api`
+
+## Installation
+
+```bash
+npm install
+```
+
+## Développement
+
+```bash
+npm run dev
+```
+
+L'application est accessible sur **http://localhost:3001**.
+
+## Commandes disponibles
+
+| Commande | Description |
+|----------|-------------|
+| `npm run dev` | Serveur de développement avec HMR |
+| `npm run build` | Build de production |
+| `npm run lint:fix` | Correction automatique ESLint |
+| `npx nuxi typecheck` | Vérification TypeScript (0 erreurs attendu) |
+| `npm run test` | Tests unitaires Vitest |
+| `npm run test:watch` | Tests unitaires en mode watch |
+| `npm run test:e2e` | Tests E2E Playwright (Chrome) |
+
+## Fonctionnalités
+
+### Gestion du parc
+
+- **Machines** : création, édition, vue détaillée avec structure hiérarchique (composants, pièces, produits)
+- **Squelettes machines** : templates réutilisables pour créer des machines à partir d'un modèle type
+- **Sites** : gestion multi-sites avec coordonnées de contact
+
+### Catalogues
+
+- **Composants**, **Pièces**, **Produits** : catalogues avec recherche serveur, tri, pagination et filtres
+- **Catégories** : système de types avec champs personnalisés configurables et exigences (contraintes de structure)
+- **Fournisseurs** : gestion des constructeurs/fabricants avec liaison multi-entités
+
+### Documents et traçabilité
+
+- **Documents** : upload, prévisualisation PDF/images, stockage sur système de fichiers avec compression PDF automatique
+- **Journal d'activité** : audit trail complet sur toutes les entités (création, modification, suppression)
+- **Commentaires** : système de tickets/commentaires sur les fiches avec statut ouvert/résolu
+
+### Administration
+
+- **Rôles** : ADMIN, GESTIONNAIRE, VIEWER avec permissions granulaires
+- **Profils** : gestion des utilisateurs et attribution des rôles
+- **Notifications** : badge compteur de commentaires ouverts avec polling
+
+## Architecture
+
+```
+app/
+├── pages/                  # 36 pages (file-based routing)
+├── components/             # 57 composants Vue (auto-imported par Nuxt)
+│   ├── common/             #   Composants UI réutilisables (modales, pagination, recherche)
+│   ├── form/               #   Champs de formulaire (email, téléphone)
+│   ├── layout/             #   Navbar principale
+│   ├── machine/            #   Vue détail et création de machines
+│   │   └── create/         #   Wizard de création machine
+│   ├── model-types/        #   Gestion des types/catégories
+│   └── sites/              #   Modales site (création, édition)
+├── composables/            # 45 composables (logique métier)
+├── shared/                 # Types, utilitaires, validation
+│   ├── utils/              #   Helpers API, champs personnalisés, affichage, erreurs
+│   ├── validation/         #   Validation email, téléphone
+│   └── model/              #   Définitions de structures
+├── services/               # Service layer (wrappers API spécialisés)
+├── middleware/              # Middleware d'auth global (session cookie)
+└── utils/                  # Formatage dates, montants, événements
+```
+
+## Conventions de code
+
+### Composables
+
+Pattern avec injection de dépendances explicite :
+
+```typescript
+interface Deps {
+  machineId: Ref<string>
+  onSave: () => void
+}
+
+export function useMachineDetail(deps: Deps) {
+  // ...
+}
+```
+
+### Communication entre composants
+
+**Props + Events uniquement** — pas de `provide/inject` dans le projet.
+
+### Appels API
+
+Le composable `useApi.ts` centralise tous les appels HTTP :
+- Cookies de session inclus automatiquement (`credentials: 'include'`)
+- `application/ld+json` pour POST/PUT
+- `application/merge-patch+json` pour PATCH
+- Gestion d'erreurs centralisée avec traduction des messages backend en français
+
+### Styles
+
+Classes DaisyUI standard :
+- Input : `input input-bordered input-sm md:input-md`
+- Select : `select select-bordered select-sm md:select-md`
+- Button : `btn btn-sm md:btn-md btn-primary`
+
+## Authentification
+
+L'application utilise une **authentification par session (cookies)**, pas de JWT.
+
+Le middleware global `profile.global.ts` vérifie la session à chaque navigation :
+- Utilisateur non connecté → redirection vers `/profiles`
+- Route `/admin/*` → accès restreint à `ROLE_ADMIN`
+
+## Tests
+
+- **13 tests unitaires** (Vitest + happy-dom) couvrant composables, utils et composants
+- **3 specs E2E** (Playwright + Chrome) avec setup d'authentification
+
+## Submodule Git
+
+Ce repo est un **submodule** du repo principal [Inventory](https://gitea.malio.fr/MALIO-DEV/Inventory).
+
+Workflow de commit :
+1. Commiter dans ce repo (frontend) en premier
+2. Commiter dans le repo principal pour mettre à jour le pointeur submodule
+3. Pousser les deux repos
diff --git a/frontend/app/app.vue b/frontend/app/app.vue
new file mode 100644
index 0000000..d93bf6e
--- /dev/null
+++ b/frontend/app/app.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="min-h-screen flex flex-col bg-base-200/40">
+    <!-- Subtle dot pattern background -->
+    <div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
+
+    <AppNavbar
+      @open-settings="displaySettingsOpen = true"
+      @logout="handleLogout"
+    />
+
+    <main class="flex-1">
+      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
+    </main>
+
+    <ToastContainer />
+
+    <ConfirmModal />
+
+    <DisplaySettings
+      :is-open="displaySettingsOpen"
+      @close="displaySettingsOpen = false"
+      @update-settings="handleSettingsUpdate"
+    />
+
+    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
+      <div class="container mx-auto flex items-center justify-between px-6 py-3">
+        <p class="text-xs text-base-content/40 font-medium tracking-wide">
+          &copy; Malio {{ new Date().getFullYear() }}
+        </p>
+        <NuxtLink
+          to="/changelog"
+          class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
+        >
+          v{{ appVersion }}
+        </NuxtLink>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { navigateTo, useRuntimeConfig } from '#imports'
+import { useProfileSession } from '~/composables/useProfileSession'
+
+const displaySettingsOpen = ref(false)
+const { ensureSession, logout } = useProfileSession()
+const runtimeConfig = useRuntimeConfig()
+const appVersion = computed(() => (runtimeConfig.public?.appVersion as string) ?? '0.1.0')
+
+const handleSettingsUpdate = (_settings: unknown) => {
+  // Placeholder for future persistence
+}
+
+const handleLogout = async () => {
+  await logout()
+  await navigateTo('/profiles')
+}
+
+onMounted(async () => {
+  await ensureSession()
+})
+</script>
diff --git a/frontend/app/assets/LOGO_CARRE_BLANC.png b/frontend/app/assets/LOGO_CARRE_BLANC.png
new file mode 100644
index 0000000..4192a3d
Binary files /dev/null and b/frontend/app/assets/LOGO_CARRE_BLANC.png differ
diff --git a/frontend/app/assets/app.css b/frontend/app/assets/app.css
new file mode 100644
index 0000000..042b65d
--- /dev/null
+++ b/frontend/app/assets/app.css
@@ -0,0 +1,381 @@
+/* ─── Fonts ─── */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+
+@import "tailwindcss";
+@plugin "daisyui";
+
+/* ─── Theme ─── */
+@plugin "daisyui/theme" {
+  name: "mytheme";
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
+
+  /* Surfaces — warm gray with a hint of blue */
+  --color-base-100: oklch(98.5% 0.004 260);
+  --color-base-200: oklch(95% 0.008 260);
+  --color-base-300: oklch(91% 0.015 260);
+  --color-base-content: oklch(22% 0.025 260);
+
+  /* Primary — Malio blue, slightly richer */
+  --color-primary: oklch(40% 0.16 262);
+  --color-primary-content: oklch(98% 0.005 262);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — deep slate */
+  --color-neutral: oklch(28% 0.04 260);
+  --color-neutral-content: oklch(95% 0.005 260);
+
+  /* Semantic */
+  --color-info: oklch(58% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(62% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(58% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: "mytheme-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+
+  /* Surfaces — dark blue-gray */
+  --color-base-100: oklch(22% 0.015 260);
+  --color-base-200: oklch(18% 0.012 260);
+  --color-base-300: oklch(28% 0.018 260);
+  --color-base-content: oklch(92% 0.005 260);
+
+  /* Primary — Malio blue, brighter for dark */
+  --color-primary: oklch(55% 0.18 262);
+  --color-primary-content: oklch(98% 0.005 262);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — lighter slate for dark mode */
+  --color-neutral: oklch(75% 0.02 260);
+  --color-neutral-content: oklch(18% 0.01 260);
+
+  /* Semantic */
+  --color-info: oklch(62% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(65% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(62% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry — same as light */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+/* ─── Typography ─── */
+:root {
+  --font-heading: 'Outfit', system-ui, sans-serif;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.01em;
+}
+
+h1, h2, h3, h4, h5, h6,
+.card-title,
+.stat-value,
+.text-2xl,
+.text-3xl,
+.text-4xl {
+  font-family: var(--font-heading);
+  letter-spacing: -0.025em;
+}
+
+/* ─── Density variables ─── */
+:root {
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+}
+
+.density-compact {
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 0.75rem;
+  --spacing-lg: 1rem;
+  --spacing-xl: 1.25rem;
+}
+
+.density-comfortable {
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+}
+
+.density-spacious {
+  --spacing-xs: 0.75rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+}
+
+/* ─── High contrast mode ─── */
+.contrast-high .btn { @apply border-2; }
+.contrast-high .input { @apply border-2; }
+.contrast-high .select { @apply border-2; }
+.contrast-high .textarea { @apply border-2; }
+.contrast-high .modal-box { @apply border-2 border-base-content; }
+
+/* ─── Accessibility ─── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+*:focus-visible {
+  outline: 2px solid oklch(40% 0.16 262);
+  outline-offset: 2px;
+}
+
+/* ─── Cards ─── */
+.card {
+  border: 1px solid oklch(91% 0.015 260 / 0.6);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.site-card {
+  background-color: oklch(100% 0 0);
+}
+
+[data-theme="mytheme-dark"] .site-card {
+  background-color: oklch(24% 0.015 260);
+}
+
+[data-theme="mytheme-dark"] .card {
+  border-color: oklch(30% 0.02 260 / 0.6);
+}
+
+.card:hover {
+  box-shadow:
+    0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
+    0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
+}
+
+/* ─── Navbar glass effect ─── */
+.navbar-glass {
+  background: oklch(98.5% 0.004 260 / 0.82);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
+}
+
+[data-theme="mytheme-dark"] .navbar-glass {
+  background: oklch(22% 0.015 260 / 0.85);
+  border-bottom-color: oklch(30% 0.02 260 / 0.5);
+}
+
+/* ─── Buttons ─── */
+.btn {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  transition: all 0.15s ease;
+}
+
+.btn-circle {
+  transition: all 0.2s ease-in-out;
+}
+.btn-circle:hover {
+  transform: scale(1.05);
+}
+.btn-circle:active {
+  transform: scale(0.95);
+}
+
+/* ─── Inputs ─── */
+.input, .select, .textarea {
+  font-family: var(--font-body);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus, .select:focus, .textarea:focus {
+  box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
+}
+
+/* ─── Tables ─── */
+.table thead th {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  color: oklch(45% 0.03 260);
+}
+
+.table tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+/* ─── Badges ─── */
+.badge {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* ─── Stats ─── */
+.stat-title {
+  font-family: var(--font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.stat-value {
+  font-weight: 700;
+}
+
+/* ─── Modals ─── */
+.modal {
+  transition: opacity 0.25s ease;
+}
+
+.modal-box {
+  font-family: var(--font-body);
+  border-radius: 0.75rem;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
+}
+
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.modal.modal-open .modal-box {
+  animation: modalSlideUp 0.25s ease-out;
+}
+
+/* ─── Page transitions ─── */
+.page-enter-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.page-leave-active {
+  transition: opacity 0.15s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.page-leave-to {
+  opacity: 0;
+}
+
+/* ─── Scrollbar styling ─── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(75% 0.02 260);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(60% 0.03 260);
+}
+
+/* ─── Readability ─── */
+.text-sm { line-height: 1.5; }
+.text-xs { line-height: 1.4; }
+
+/* ─── Adaptive spacing ─── */
+.p-1 { padding: var(--spacing-xs); }
+.p-2 { padding: var(--spacing-sm); }
+.p-3 { padding: var(--spacing-md); }
+.p-4 { padding: var(--spacing-lg); }
+.p-5 { padding: var(--spacing-xl); }
+
+.m-1 { margin: var(--spacing-xs); }
+.m-2 { margin: var(--spacing-sm); }
+.m-3 { margin: var(--spacing-md); }
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }
+
+.gap-1 { gap: var(--spacing-xs); }
+.gap-2 { gap: var(--spacing-sm); }
+.gap-3 { gap: var(--spacing-md); }
+.gap-4 { gap: var(--spacing-lg); }
+.gap-5 { gap: var(--spacing-xl); }
+
+@layer components {
+  .form-control .label {
+    @apply mb-2;
+    padding-bottom: 0;
+    margin-right: 15px;
+  }
+  .form-control .label + * {
+    margin-top: var(--spacing-xs);
+  }
+}
+
+@layer base {
+  label + input,
+  label + select,
+  label + textarea,
+  label + .input,
+  label + .select,
+  label + .textarea {
+    margin-top: var(--spacing-xs);
+  }
+}
diff --git a/frontend/app/components/CommentDocumentList.vue b/frontend/app/components/CommentDocumentList.vue
new file mode 100644
index 0000000..38d300e
--- /dev/null
+++ b/frontend/app/components/CommentDocumentList.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-if="documents.length" class="space-y-1 mt-2">
+    <div
+      v-for="doc in documents"
+      :key="doc.id"
+      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-2 py-1.5 text-xs"
+    >
+      <div class="flex items-center gap-2 min-w-0">
+        <component
+          :is="documentIcon(doc).component"
+          class="w-4 h-4 flex-shrink-0"
+          :class="documentIcon(doc).colorClass"
+        />
+        <span class="truncate">{{ doc.name || doc.filename }}</span>
+        <span class="text-base-content/40 flex-shrink-0">{{ formatSize(doc.size) }}</span>
+      </div>
+      <div class="flex items-center gap-1 flex-shrink-0 ml-2">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(doc)"
+          :title="canPreviewDocument(doc) ? 'Consulter' : 'Aperçu non disponible'"
+          @click="openPreview(doc)"
+        >
+          Consulter
+        </button>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          @click="downloadDocument(doc)"
+        >
+          Télécharger
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CommentDocument } from '~/composables/useComments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import { formatSize, documentIcon, downloadDocument } from '~/shared/utils/documentDisplayUtils'
+
+defineProps<{
+  documents: CommentDocument[]
+}>()
+
+const openPreview = (doc: CommentDocument) => {
+  if (!canPreviewDocument(doc)) return
+  // Open file URL in new tab for preview
+  if (doc.fileUrl) {
+    window.open(doc.fileUrl, '_blank')
+  }
+}
+</script>
diff --git a/frontend/app/components/CommentSection.vue b/frontend/app/components/CommentSection.vue
new file mode 100644
index 0000000..7c483a4
--- /dev/null
+++ b/frontend/app/components/CommentSection.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <h3 class="text-lg font-semibold flex items-center gap-2">
+        <IconLucideMessageSquare class="w-5 h-5" />
+        Commentaires
+        <span v-if="openComments.length" class="badge badge-warning badge-sm">
+          {{ openComments.length }}
+        </span>
+      </h3>
+      <button
+        v-if="showResolved && resolvedComments.length"
+        type="button"
+        class="btn btn-ghost btn-xs"
+        @click="showResolvedList = !showResolvedList"
+      >
+        {{ showResolvedList ? 'Masquer résolus' : `Voir résolus (${resolvedComments.length})` }}
+      </button>
+    </div>
+
+    <!-- Formulaire d'ajout -->
+    <div class="space-y-2">
+      <div class="flex gap-2">
+        <textarea
+          v-model="newContent"
+          class="textarea textarea-bordered flex-1 text-sm"
+          rows="2"
+          placeholder="Ajouter un commentaire..."
+          :disabled="submitting"
+          @keydown.ctrl.enter="handleSubmit"
+        />
+        <div class="flex flex-col gap-1 self-end">
+          <label
+            class="btn btn-ghost btn-sm btn-square tooltip tooltip-left"
+            data-tip="Joindre des fichiers"
+          >
+            <IconLucidePaperclip class="w-4 h-4" />
+            <input
+              ref="fileInputRef"
+              type="file"
+              multiple
+              class="hidden"
+              @change="handleFilesSelected"
+            />
+          </label>
+          <button
+            type="button"
+            class="btn btn-primary btn-sm btn-square"
+            :disabled="!newContent.trim() || submitting"
+            @click="handleSubmit"
+          >
+            <span v-if="submitting" class="loading loading-spinner loading-xs" />
+            <IconLucideSend v-else class="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+      <!-- Selected files preview -->
+      <div v-if="selectedFiles.length" class="flex flex-wrap gap-1">
+        <span
+          v-for="(file, i) in selectedFiles"
+          :key="i"
+          class="badge badge-sm badge-outline gap-1"
+        >
+          <IconLucideFile class="w-3 h-3" />
+          {{ file.name }}
+          <button type="button" class="ml-1" @click="removeFile(i)">
+            <IconLucideX class="w-3 h-3" />
+          </button>
+        </span>
+      </div>
+    </div>
+
+    <!-- Liste des commentaires ouverts -->
+    <div v-if="loadingComments" class="flex justify-center py-4">
+      <span class="loading loading-spinner loading-sm" />
+    </div>
+
+    <div v-else-if="openComments.length === 0" class="text-sm text-base-content/50 py-2">
+      Aucun commentaire ouvert.
+    </div>
+
+    <div v-else class="space-y-3">
+      <div
+        v-for="comment in openComments"
+        :key="comment.id"
+        class="bg-base-200 rounded-lg p-3 space-y-2"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <div class="flex-1">
+            <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+            <!-- Documents attachés -->
+            <CommentDocumentList :documents="getDocuments(comment)" />
+          </div>
+        </div>
+        <div class="flex items-center justify-between text-xs text-base-content/60">
+          <span>
+            {{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}
+          </span>
+          <div v-if="canEdit" class="flex gap-1">
+            <button
+              type="button"
+              class="btn btn-success btn-xs gap-1"
+              :disabled="loading"
+              @click="handleResolve(comment.id)"
+            >
+              <IconLucideCheck class="w-3 h-3" />
+              Résoudre
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs text-error"
+              :disabled="loading"
+              @click="handleDelete(comment.id)"
+            >
+              <IconLucideTrash2 class="w-3 h-3" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Commentaires résolus -->
+    <div v-if="showResolvedList && resolvedComments.length" class="space-y-2">
+      <div class="divider text-xs text-base-content/40">
+        Résolus
+      </div>
+      <div
+        v-for="comment in resolvedComments"
+        :key="comment.id"
+        class="bg-base-200/50 rounded-lg p-3 opacity-60 space-y-1"
+      >
+        <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+        <!-- Documents attachés (résolus) -->
+        <CommentDocumentList :documents="getDocuments(comment)" />
+        <div class="flex items-center justify-between text-xs text-base-content/50">
+          <span>{{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}</span>
+          <span v-if="comment.resolvedByName">
+            Résolu par {{ comment.resolvedByName }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useComments, type Comment, type CommentDocument } from '~/composables/useComments'
+import { usePermissions } from '~/composables/usePermissions'
+import CommentDocumentList from '~/components/CommentDocumentList.vue'
+import IconLucideMessageSquare from '~icons/lucide/message-square'
+import IconLucideSend from '~icons/lucide/send'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+import IconLucidePaperclip from '~icons/lucide/paperclip'
+import IconLucideFile from '~icons/lucide/file'
+import IconLucideX from '~icons/lucide/x'
+
+const props = defineProps<{
+  entityType: string
+  entityId: string
+  entityName?: string
+  showResolved?: boolean
+}>()
+
+const { canEdit } = usePermissions()
+const {
+  loading,
+  fetchComments,
+  createComment,
+  resolveComment,
+  deleteComment,
+} = useComments()
+
+const comments = ref<Comment[]>([])
+const newContent = ref('')
+const submitting = ref(false)
+const loadingComments = ref(false)
+const showResolvedList = ref(false)
+const selectedFiles = ref<File[]>([])
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const getDocuments = (comment: Comment): CommentDocument[] =>
+  comment.documents?.filter((d): d is CommentDocument => typeof d === 'object' && d !== null && 'id' in d) ?? []
+
+const openComments = computed(() =>
+  comments.value.filter(c => c.status === 'open'),
+)
+
+const resolvedComments = computed(() =>
+  comments.value.filter(c => c.status === 'resolved'),
+)
+
+const formatCommentDate = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('fr-FR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date)
+}
+
+const handleFilesSelected = (e: Event) => {
+  const input = e.target as HTMLInputElement
+  if (input.files) {
+    selectedFiles.value.push(...Array.from(input.files))
+  }
+  input.value = ''
+}
+
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+}
+
+const loadComments = async () => {
+  loadingComments.value = true
+  const [openResult, resolvedResult] = await Promise.all([
+    fetchComments(props.entityType, props.entityId, 'open'),
+    props.showResolved
+      ? fetchComments(props.entityType, props.entityId, 'resolved')
+      : Promise.resolve({ success: true, data: [] as Comment[] }),
+  ])
+  const open = openResult.success ? (openResult.data ?? []) : []
+  const resolved = resolvedResult.success ? (resolvedResult.data ?? []) : []
+  comments.value = [...open, ...resolved]
+  loadingComments.value = false
+}
+
+const handleSubmit = async () => {
+  const content = newContent.value.trim()
+  if (!content) return
+  submitting.value = true
+  const result = await createComment(
+    props.entityType,
+    props.entityId,
+    content,
+    props.entityName,
+    selectedFiles.value.length > 0 ? selectedFiles.value : undefined,
+  )
+  submitting.value = false
+  if (result.success) {
+    newContent.value = ''
+    selectedFiles.value = []
+    await loadComments()
+  }
+}
+
+const handleResolve = async (commentId: string) => {
+  const result = await resolveComment(commentId)
+  if (result.success) {
+    await loadComments()
+  }
+}
+
+const handleDelete = async (commentId: string) => {
+  const result = await deleteComment(commentId)
+  if (result.success) {
+    comments.value = comments.value.filter(c => c.id !== commentId)
+  }
+}
+
+onMounted(() => {
+  if (props.entityId) {
+    loadComments()
+  }
+})
+</script>
diff --git a/frontend/app/components/ComponentHierarchy.vue b/frontend/app/components/ComponentHierarchy.vue
new file mode 100644
index 0000000..b3ab1bd
--- /dev/null
+++ b/frontend/app/components/ComponentHierarchy.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="space-y-4">
+    <!-- Root Components -->
+    <div v-for="component in components" :key="component.id" class="border border-gray-200 rounded-lg p-4">
+      <ComponentItem
+        :component="component"
+        :is-edit-mode="isEditMode"
+        :show-delete="showDelete"
+        :collapse-all="collapseAll"
+        :toggle-token="toggleToken"
+        @update="$emit('update', $event)"
+        @edit-piece="$emit('edit-piece', $event)"
+        @custom-field-update="$emit('custom-field-update', $event)"
+        @delete="$emit('delete')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ComponentItem from './ComponentItem.vue'
+
+defineProps({
+  components: {
+    type: Array,
+    required: true
+  },
+  isEditMode: {
+    type: Boolean,
+    default: false
+  },
+  showDelete: {
+    type: Boolean,
+    default: false
+  },
+  collapseAll: {
+    type: Boolean,
+    default: true
+  },
+  toggleToken: {
+    type: Number,
+    default: 0
+  }
+})
+
+defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
+</script>
diff --git a/frontend/app/components/ComponentItem.vue b/frontend/app/components/ComponentItem.vue
new file mode 100644
index 0000000..a7e7bab
--- /dev/null
+++ b/frontend/app/components/ComponentItem.vue
@@ -0,0 +1,465 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="componentDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+
+    <!-- Component Header -->
+    <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
+      <IconLucideChevronRight
+        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
+        :class="{ 'rotate-90': !isCollapsed }"
+        aria-hidden="true"
+      />
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-wrap">
+          <h3 class="text-sm font-semibold text-base-content truncate">
+            {{ component.name }}
+          </h3>
+          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
+          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
+        </div>
+        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
+          <span
+            v-for="constructeur in componentConstructeursDisplay"
+            :key="constructeur.id"
+            class="text-xs text-base-content/50"
+          >
+            {{ constructeur.name }}
+            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-70">({{ supplierReferenceMap.get(constructeur.id) }})</span>
+          </span>
+          <span v-if="displayProductName" class="badge badge-info badge-xs">
+            {{ displayProductName }}
+          </span>
+        </div>
+      </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer ce composant"
+        @click.stop="$emit('delete')"
+      >
+        Supprimer
+      </button>
+    </div>
+
+    <!-- Expanded content -->
+    <div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
+      <!-- Info fields -->
+      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
+          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
+          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
+          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
+          <ConstructeurSelect
+            class="w-full"
+            :model-value="componentConstructeurIds"
+            :initial-options="componentConstructeursDisplay"
+            @update:model-value="handleConstructeurChange"
+          />
+        </div>
+      </div>
+
+      <!-- Read-only info -->
+      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Nom</p>
+          <p class="text-base-content">{{ component.name }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Référence</p>
+          <p class="text-base-content">{{ component.reference || '—' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Prix</p>
+          <p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
+          <div v-if="componentConstructeursDisplay.length">
+            <p
+              v-for="constructeur in componentConstructeursDisplay"
+              :key="constructeur.id"
+              class="text-base-content"
+            >
+              {{ constructeur.name }}
+              <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm text-base-content/60">
+                — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+              </span>
+              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
+                {{ formatConstructeurContact(constructeur) }}
+              </span>
+            </p>
+          </div>
+          <p v-else class="text-base-content">—</p>
+        </div>
+      </div>
+
+      <!-- Product -->
+      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
+        <div class="flex items-start justify-between gap-3">
+          <div class="space-y-1">
+            <p class="text-xs text-base-content/40">Produit catalogue</p>
+            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
+            <p
+              v-for="info in productInfoRows"
+              :key="info.label"
+              class="text-xs text-base-content/60"
+            >
+              {{ info.label }} : {{ info.value }}
+            </p>
+          </div>
+          <NuxtLink
+            v-if="component.product?.id"
+            :to="`/product/${component.product.id}`"
+            class="btn btn-ghost btn-xs shrink-0"
+          >
+            Voir le produit
+          </NuxtLink>
+        </div>
+        <!-- Product documents -->
+        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
+          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
+          <div
+            v-for="document in productDocuments"
+            :key="document.id || document.path || document.name"
+            class="flex items-center justify-between gap-3 text-xs"
+          >
+            <div class="flex items-center gap-2 min-w-0">
+              <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
+                <img
+                  v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+                  :src="document.fileUrl || document.path"
+                  class="h-full w-full object-cover"
+                  :alt="`Aperçu de ${document.name}`"
+                >
+                <iframe
+                  v-else-if="shouldInlinePdf(document)"
+                  :src="documentPreviewSrc(document)"
+                  class="h-full w-full border-0 bg-white"
+                  title="Aperçu PDF"
+                />
+                <component
+                  v-else
+                  :is="documentIcon(document).component"
+                  class="h-4 w-4"
+                  :class="documentIcon(document).colorClass"
+                  aria-hidden="true"
+                />
+              </div>
+              <span class="truncate text-base-content">{{ document.name }}</span>
+            </div>
+            <div class="flex items-center gap-1 shrink-0">
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs"
+                :disabled="!canPreviewDocument(document)"
+                @click="openPreview(document)"
+              >
+                Consulter
+              </button>
+              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                Télécharger
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Fields -->
+      <CustomFieldDisplay
+        :fields="displayedCustomFields"
+        :is-edit-mode="isEditMode"
+        :columns="2"
+        @field-blur="updateComponentCustomField"
+      />
+
+      <!-- Documents -->
+      <div class="space-y-2">
+        <div class="flex items-center justify-between">
+          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
+          </span>
+        </div>
+
+        <p v-if="loadingDocuments" class="text-xs text-base-content/50">
+          Chargement...
+        </p>
+
+        <DocumentUpload
+          v-if="isEditMode"
+          v-model="selectedFiles"
+          title="Déposer des fichiers pour ce composant"
+          subtitle="Formats acceptés : PDF, images, documents..."
+          @files-added="handleFilesAdded"
+        />
+
+        <DocumentListInline
+          :documents="componentDocuments"
+          :can-delete="isEditMode"
+          :can-edit="isEditMode"
+          :delete-disabled="uploadingDocuments"
+          empty-text="Aucun document lié à ce composant."
+          @preview="openPreview"
+          @edit="openEditModal"
+          @delete="removeDocument"
+        />
+      </div>
+
+      <!-- Component Pieces (real MachinePieceLinks) -->
+      <div v-if="linkedPieces.length > 0" class="space-y-2">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
+          Pièces du composant
+        </p>
+        <div class="space-y-2">
+          <PieceItem
+            v-for="piece in linkedPieces"
+            :key="piece.id"
+            :piece="piece"
+            :is-edit-mode="isEditMode"
+            @update="updatePiece"
+            @edit="editPiece"
+            @custom-field-update="updatePieceCustomField"
+          />
+        </div>
+      </div>
+
+      <!-- Structure pieces (read-only, from composant definition) -->
+      <div v-if="structurePieces.length > 0" class="space-y-2">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
+          Pièces incluses par défaut
+        </p>
+        <div class="space-y-2">
+          <PieceItem
+            v-for="piece in structurePieces"
+            :key="piece.id"
+            :piece="piece"
+            :is-edit-mode="false"
+          />
+        </div>
+      </div>
+
+      <!-- Sub Components -->
+      <div v-if="childComponents.length > 0" class="space-y-2">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
+          Sous-composants
+        </p>
+        <div class="space-y-2 pl-4 border-l-2 border-base-200">
+          <ComponentItem
+            v-for="subComponent in childComponents"
+            :key="subComponent.id"
+            :component="subComponent"
+            :is-edit-mode="isEditMode"
+            :collapse-all="collapseAll"
+            :toggle-token="toggleToken"
+            @update="$emit('update', $event)"
+            @edit-piece="$emit('edit-piece', $event)"
+            @custom-field-update="$emit('custom-field-update', $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import PieceItem from './PieceItem.vue'
+import DocumentUpload from './DocumentUpload.vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import {
+  formatConstructeurContact as formatConstructeurContactSummary,
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+  parseConstructeurLinksFromApi,
+} from '~/shared/constructeurUtils'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+import { useEntityDocuments } from '~/composables/useEntityDocuments'
+import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
+import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
+
+const props = defineProps({
+  component: { type: Object, required: true },
+  isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
+  collapseAll: { type: Boolean, default: true },
+  toggleToken: { type: Number, default: 0 },
+})
+
+const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
+
+// --- Shared composables ---
+const {
+  documents: componentDocuments,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  previewDocument,
+  previewVisible,
+  openPreview,
+  closePreview,
+  ensureDocumentsLoaded,
+  handleFilesAdded,
+  removeDocument,
+  editDocument,
+} = useEntityDocuments({ entity: () => props.component, entityType: 'composant' })
+
+const {
+  displayProduct,
+  displayProductName,
+  productInfoRows,
+  productDocuments,
+} = useEntityProductDisplay({ entity: () => props.component })
+
+const {
+  displayedCustomFields,
+  updateCustomField: updateComponentCustomField,
+} = useEntityCustomFields({ entity: () => props.component, entityType: 'composant' })
+
+// --- Document edit modal ---
+const editingDocument = ref(null)
+const editModalVisible = ref(false)
+
+const openEditModal = (doc) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data) => {
+  if (!editingDocument.value?.id) return
+  await editDocument(editingDocument.value.id, data)
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+// --- Collapse state ---
+const isCollapsed = ref(true)
+
+watch(
+  () => props.toggleToken,
+  () => {
+    isCollapsed.value = props.collapseAll
+    if (!isCollapsed.value) ensureDocumentsLoaded()
+  },
+  { immediate: true },
+)
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  if (!isCollapsed.value) ensureDocumentsLoaded()
+}
+
+// --- Child components ---
+const childComponents = computed(() => {
+  const list = props.component.subcomponents || props.component.subComponents || []
+  return Array.isArray(list) ? list : []
+})
+
+// --- Pieces split: real links vs structure definitions ---
+const allPieces = computed(() => {
+  const list = props.component.pieces
+  return Array.isArray(list) ? list : []
+})
+const linkedPieces = computed(() => allPieces.value.filter((p) => !p._structurePiece))
+const structurePieces = computed(() => allPieces.value.filter((p) => p._structurePiece))
+
+// --- Constructeurs ---
+const { constructeurs } = useConstructeurs()
+
+const componentConstructeurLinks = computed(() =>
+  parseConstructeurLinksFromApi(
+    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
+  ),
+)
+
+const supplierReferenceMap = computed(() => {
+  const map = new Map()
+  componentConstructeurLinks.value.forEach(l => {
+    if (l.supplierReference) map.set(l.constructeurId, l.supplierReference)
+  })
+  return map
+})
+
+const componentConstructeurIds = computed(() =>
+  componentConstructeurLinks.value.map(l => l.constructeurId).filter(Boolean),
+)
+
+const componentConstructeursDisplay = computed(() => {
+  // Extract nested constructeur objects from link entries
+  const linkConstructeurs = componentConstructeurLinks.value
+    .filter(l => l.constructeur && l.constructeur.id)
+    .map(l => l.constructeur)
+  return resolveConstructeurs(
+    componentConstructeurIds.value,
+    linkConstructeurs,
+    constructeurs.value,
+  )
+})
+
+const formatConstructeurContact = (constructeur) =>
+  formatConstructeurContactSummary(constructeur)
+
+const handleConstructeurChange = async (value) => {
+  const ids = uniqueConstructeurIds(value)
+  props.component.constructeurIds = [...ids]
+  props.component.constructeurId = null
+  props.component.constructeur = null
+  props.component.constructeurs = resolveConstructeurs(
+    ids,
+    constructeurs.value,
+    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
+  )
+  await updateComponent()
+}
+
+// --- Update / Event forwarding ---
+const updateComponent = () => {
+  emit('update', {
+    ...props.component,
+    constructeurIds: componentConstructeurIds.value,
+  })
+}
+
+const updatePiece = (updatedPiece) => {
+  emit('edit-piece', updatedPiece)
+}
+
+const editPiece = (piece) => {
+  emit('edit-piece', piece)
+}
+
+const updatePieceCustomField = (fieldUpdate) => {
+  emit('custom-field-update', fieldUpdate)
+  emit('edit-piece', { ...fieldUpdate, type: 'custom-field-update' })
+}
+</script>
diff --git a/frontend/app/components/ComponentModelStructureEditor.vue b/frontend/app/components/ComponentModelStructureEditor.vue
new file mode 100644
index 0000000..e65193f
--- /dev/null
+++ b/frontend/app/components/ComponentModelStructureEditor.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="space-y-6">
+    <StructureNodeEditor
+      :node="localStructure"
+      :depth="0"
+      :component-types="availableComponentTypes"
+      :piece-types="availablePieceTypes"
+      :product-types="availableProductTypes"
+      :lock-type="lockRootType"
+      :locked-type-label="displayedRootTypeLabel"
+      :allow-subcomponents="allowSubcomponents"
+      :max-subcomponent-depth="maxSubcomponentDepth"
+      is-root
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, computed, onMounted, ref } from 'vue'
+import StructureNodeEditor from '~/components/StructureNodeEditor.vue'
+import {
+  defaultStructure,
+  hydrateStructureForEditor,
+  cloneStructure,
+} from '~/shared/modelUtils'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+
+defineOptions({ name: 'ComponentModelStructureEditor' })
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => defaultStructure(),
+  },
+  rootTypeId: {
+    type: String,
+    default: '',
+  },
+  rootTypeLabel: {
+    type: String,
+    default: '',
+  },
+  lockRootType: {
+    type: Boolean,
+    default: false,
+  },
+  allowSubcomponents: {
+    type: Boolean,
+    default: true,
+  },
+  maxSubcomponentDepth: {
+    type: Number,
+    default: Infinity,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const localStructure = reactive<ComponentModelStructure>(hydrateStructureForEditor(props.modelValue))
+const previousLockedLabel = ref(props.rootTypeLabel || '')
+
+const { pieceTypes, loadPieceTypes } = usePieceTypes()
+const { componentTypes, loadComponentTypes } = useComponentTypes()
+const { productTypes, loadProductTypes } = useProductTypes()
+
+const availablePieceTypes = computed(() => pieceTypes.value ?? [])
+const availableComponentTypes = computed(() => componentTypes.value ?? [])
+const availableProductTypes = computed(() => productTypes.value ?? [])
+const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
+const maxSubcomponentDepth = computed(() =>
+  typeof props.maxSubcomponentDepth === 'number' ? props.maxSubcomponentDepth : Infinity,
+)
+
+const fallbackRootTypeLabel = computed(() => {
+  if (!props.rootTypeId) {
+    return ''
+  }
+  const match = availableComponentTypes.value.find((type) => type?.id === props.rootTypeId)
+  return match?.name || ''
+})
+
+const displayedRootTypeLabel = computed(() => props.rootTypeLabel || fallbackRootTypeLabel.value)
+
+const formatOptionsText = (field: Record<string, any>) => {
+  if (typeof field?.optionsText === 'string') {
+    return field.optionsText
+  }
+  if (Array.isArray(field?.options)) {
+    return field.options.join('\n')
+  }
+  return ''
+}
+
+const normalizeLineEndings = (text: string) =>
+  text.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+
+const parseOptionsFromText = (text: string) => {
+  return text
+    .split('\n')
+    .map((option) => option.trim())
+    .filter((option) => option.length > 0)
+}
+
+const applyCustomFieldOptions = (node: Record<string, any> | null | undefined) => {
+  if (!node || typeof node !== 'object') {
+    return
+  }
+
+  if (Array.isArray(node.customFields)) {
+    node.customFields = node.customFields.map((field: Record<string, any>) => {
+      if (!field || typeof field !== 'object') {
+        return field
+      }
+
+      const next = { ...field }
+      if (next.type === 'select') {
+        const baseText = normalizeLineEndings(formatOptionsText(next))
+        if (next.optionsText !== baseText) {
+          next.optionsText = baseText
+        }
+        const parsedOptions = parseOptionsFromText(next.optionsText || '')
+        if (parsedOptions.length > 0) {
+          next.options = parsedOptions
+        } else {
+          delete next.options
+        }
+      } else {
+        if (next.options !== undefined) {
+          delete next.options
+        }
+        if (next.optionsText !== undefined && next.optionsText !== '') {
+          next.optionsText = ''
+        }
+      }
+      return next
+    })
+  }
+
+  if (Array.isArray(node.subcomponents)) {
+    node.subcomponents = node.subcomponents.map((sub: Record<string, any>) => {
+      if (!sub || typeof sub !== 'object') {
+        return sub
+      }
+      const copy = { ...sub }
+      applyCustomFieldOptions(copy)
+      return copy
+    })
+  }
+}
+
+const prepareStructureForEmit = (structure: any) => {
+  const clone = cloneStructure(structure)
+  applyCustomFieldOptions(clone as Record<string, any>)
+  return clone
+}
+
+const syncRootType = () => {
+  if (!props.lockRootType) {
+    previousLockedLabel.value = props.rootTypeLabel || ''
+    return
+  }
+
+  const newTypeId = props.rootTypeId || ''
+  const newLabel = displayedRootTypeLabel.value
+
+  localStructure.typeComposantId = newTypeId
+  localStructure.typeComposantLabel = newLabel
+
+  const match = availableComponentTypes.value.find((type) => type?.id === newTypeId)
+  if (match?.code) {
+    localStructure.familyCode = match.code
+  }
+
+  const previousLabel = previousLockedLabel.value
+  if (!localStructure.alias || localStructure.alias === previousLabel || localStructure.alias === '') {
+    localStructure.alias = newLabel || localStructure.alias
+  }
+
+  previousLockedLabel.value = newLabel
+}
+
+let lastEmitted = JSON.stringify(prepareStructureForEmit(props.modelValue))
+
+const syncFromProps = (value: any) => {
+  const normalizedIncoming = prepareStructureForEmit(value)
+  const incomingSerialized = JSON.stringify(normalizedIncoming)
+  if (incomingSerialized === lastEmitted) {
+    return
+  }
+  const hydrated = hydrateStructureForEditor(value)
+    localStructure.customFields = hydrated.customFields
+    localStructure.pieces = hydrated.pieces
+    localStructure.products = hydrated.products
+    localStructure.subcomponents = hydrated.subcomponents
+  localStructure.typeComposantId = hydrated.typeComposantId
+  localStructure.typeComposantLabel = hydrated.typeComposantLabel
+  localStructure.modelId = hydrated.modelId
+  localStructure.familyCode = hydrated.familyCode
+  localStructure.alias = hydrated.alias
+  lastEmitted = incomingSerialized
+  syncRootType()
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncFromProps(value)
+  },
+  { deep: true }
+)
+
+watch(
+  () => [props.rootTypeId, props.rootTypeLabel, props.lockRootType],
+  () => {
+    syncRootType()
+  },
+  { immediate: true }
+)
+
+watch(
+  availableComponentTypes,
+  () => {
+    syncRootType()
+  }
+)
+
+watch(
+  localStructure,
+  (value) => {
+    const payload = prepareStructureForEmit(value)
+    const serialized = JSON.stringify(payload)
+    if (serialized !== lastEmitted) {
+      lastEmitted = serialized
+      emit('update:modelValue', payload)
+    }
+  },
+  { deep: true }
+)
+
+onMounted(async () => {
+  const loaders: Promise<unknown>[] = []
+  if (!availablePieceTypes.value.length) {
+    loaders.push(loadPieceTypes())
+  }
+  if (!availableComponentTypes.value.length) {
+    loaders.push(loadComponentTypes())
+  }
+  if (!availableProductTypes.value.length) {
+    loaders.push(loadProductTypes())
+  }
+  if (loaders.length) {
+    await Promise.allSettled(loaders)
+  }
+  syncRootType()
+})
+
+watch(
+  allowSubcomponents,
+  (allowed) => {
+    if (!allowed && Array.isArray(localStructure.subcomponents) && localStructure.subcomponents.length) {
+      localStructure.subcomponents = []
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/frontend/app/components/ComponentStructureAssignmentNode.vue b/frontend/app/components/ComponentStructureAssignmentNode.vue
new file mode 100644
index 0000000..23e6340
--- /dev/null
+++ b/frontend/app/components/ComponentStructureAssignmentNode.vue
@@ -0,0 +1,262 @@
+<template>
+  <div :class="wrapperClass">
+    <section v-if="!isRoot" class="rounded-lg border border-base-200 bg-base-100 p-4 space-y-3">
+      <div class="space-y-1">
+        <h4 class="text-sm font-semibold text-base-content">
+          {{ requirementLabel }}
+        </h4>
+        <p class="text-xs text-base-content/70">
+          {{ requirementDescription }}
+        </p>
+      </div>
+
+      <div class="form-control">
+        <label class="label">
+          <span class="label-text text-xs">Sélectionner un composant</span>
+        </label>
+        <SearchSelect
+          :model-value="assignment.selectedComponentId || ''"
+          :options="componentOptions"
+          :loading="componentsLoading || componentLoadingByPath[assignment.path]"
+          size="sm"
+          placeholder="Rechercher un composant..."
+          :empty-text="componentOptions.length ? 'Aucun résultat' : 'Aucun composant disponible'"
+          :option-label="componentOptionLabel"
+          :option-description="componentOptionDescription"
+          server-search
+          @search="fetchComponentOptions"
+          @update:modelValue="(value) => { assignment.selectedComponentId = normalizeSelectionValue(value); }"
+        />
+      </div>
+    </section>
+
+    <section v-if="assignment.pieces.length" class="rounded-lg border border-dashed border-base-300 bg-base-200/40 p-4 space-y-4">
+      <header class="space-y-1">
+        <h4 class="text-sm font-semibold text-base-content">
+          {{ isRoot ? 'Pièces requises par le squelette' : 'Pièces associées à ce sous-composant' }}
+        </h4>
+        <p class="text-xs text-base-content/70">
+          Sélectionnez les pièces concrètes à associer pour chaque emplacement.
+        </p>
+      </header>
+
+      <div
+        v-for="pieceAssignment in assignment.pieces"
+        :key="pieceAssignment.path"
+        class="rounded-md border border-base-200 bg-base-100 p-3 space-y-2"
+      >
+        <div class="space-y-1">
+          <p class="text-xs font-medium text-base-content">
+            {{ describePieceRequirement(pieceAssignment) }}
+          </p>
+          <p v-if="!getPieceOptions(pieceAssignment).length" class="text-[11px] text-error">
+            Aucune pièce disponible pour cette famille.
+          </p>
+        </div>
+
+        <SearchSelect
+          :model-value="pieceAssignment.selectedPieceId || ''"
+          :options="getPieceOptions(pieceAssignment)"
+          :loading="piecesLoading || pieceLoadingByPath[pieceAssignment.path]"
+          size="xs"
+          placeholder="Rechercher une pièce..."
+          :empty-text="getPieceOptions(pieceAssignment).length ? 'Aucun résultat' : 'Aucune pièce disponible'"
+          :option-label="pieceOptionLabel"
+          :option-description="pieceOptionDescription"
+          server-search
+          @search="(term) => fetchPieceOptions(pieceAssignment, term)"
+          @update:modelValue="(value) => { pieceAssignment.selectedPieceId = normalizeSelectionValue(value); }"
+        />
+      </div>
+    </section>
+
+    <section v-if="assignment.products.length" class="rounded-lg border border-dashed border-base-300 bg-base-200/40 p-4 space-y-4">
+      <header class="space-y-1">
+        <h4 class="text-sm font-semibold text-base-content">
+          {{ isRoot ? 'Produits requis par le squelette' : 'Produits associés à ce sous-composant' }}
+        </h4>
+        <p class="text-xs text-base-content/70">
+          Sélectionnez les produits catalogue à lier sur chaque position définie.
+        </p>
+      </header>
+
+      <div
+        v-for="productAssignment in assignment.products"
+        :key="productAssignment.path"
+        class="rounded-md border border-base-200 bg-base-100 p-3 space-y-2"
+      >
+        <div class="space-y-1">
+          <p class="text-xs font-medium text-base-content">
+            {{ describeProductRequirement(productAssignment) }}
+          </p>
+          <p v-if="!getProductOptions(productAssignment).length" class="text-[11px] text-error">
+            Aucun produit disponible pour cette catégorie.
+          </p>
+        </div>
+
+        <SearchSelect
+          :model-value="productAssignment.selectedProductId || ''"
+          :options="getProductOptions(productAssignment)"
+          :loading="productsLoading || productLoadingByPath[productAssignment.path]"
+          size="xs"
+          placeholder="Rechercher un produit..."
+          :empty-text="getProductOptions(productAssignment).length ? 'Aucun résultat' : 'Aucun produit disponible'"
+          :option-label="productOptionLabel"
+          :option-description="productOptionDescription"
+          server-search
+          @search="(term) => fetchProductOptions(productAssignment, term)"
+          @update:modelValue="(value) => { productAssignment.selectedProductId = normalizeSelectionValue(value); }"
+        />
+      </div>
+    </section>
+
+    <section v-if="assignment.subcomponents.length" class="space-y-4">
+      <header class="space-y-1">
+        <h4 class="text-sm font-semibold text-base-content">
+          {{ isRoot ? 'Sous-composants définis par le squelette' : 'Sous-composants imbriqués' }}
+        </h4>
+        <p class="text-xs text-base-content/70">
+          Choisissez un composant existant pour chaque sous-niveau requis.
+        </p>
+      </header>
+
+      <ComponentStructureAssignmentNode
+        v-for="subAssignment in assignment.subcomponents"
+        :key="subAssignment.path"
+        :assignment="subAssignment"
+        :pieces="pieces"
+        :products="products"
+        :components="components"
+        :components-loading="componentsLoading"
+        :pieces-loading="piecesLoading"
+        :products-loading="productsLoading"
+        :depth="depth + 1"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import SearchSelect from '~/components/common/SearchSelect.vue';
+import { useStructureAssignmentFetch } from '~/composables/useStructureAssignmentFetch';
+import type {
+  ComponentOption,
+  PieceOption,
+  ProductOption,
+} from '~/composables/useStructureAssignmentFetch';
+
+export type {
+  StructureAssignmentNode,
+  StructurePieceAssignment,
+  StructureProductAssignment,
+} from '~/composables/useStructureAssignmentFetch';
+
+const props = withDefaults(
+  defineProps<{
+    assignment: import('~/composables/useStructureAssignmentFetch').StructureAssignmentNode;
+    pieces: PieceOption[] | null;
+    products: ProductOption[] | null;
+    components: ComponentOption[] | null;
+    depth?: number;
+    componentsLoading?: boolean;
+    piecesLoading?: boolean;
+    productsLoading?: boolean;
+    pieceTypeLabelMap?: Record<string, string>;
+    productTypeLabelMap?: Record<string, string>;
+    componentTypeLabelMap?: Record<string, string>;
+  }>(),
+  {
+    depth: 0,
+    pieces: () => [],
+    products: () => [],
+    components: () => [],
+    componentsLoading: false,
+    piecesLoading: false,
+    productsLoading: false,
+    pieceTypeLabelMap: () => ({}),
+    productTypeLabelMap: () => ({}),
+    componentTypeLabelMap: () => ({}),
+  },
+);
+
+const depth = computed(() => props.depth ?? 0);
+const isRoot = computed(() => depth.value === 0);
+
+const wrapperClass = computed(() =>
+  depth.value === 0 ? 'space-y-6' : 'space-y-6 border-l border-base-300 pl-4',
+);
+
+const {
+  pieceLoadingByPath,
+  productLoadingByPath,
+  componentLoadingByPath,
+  componentOptions,
+  componentOptionLabel,
+  componentOptionDescription,
+  fetchComponentOptions,
+  getPieceOptions,
+  pieceOptionLabel,
+  pieceOptionDescription,
+  fetchPieceOptions,
+  describePieceRequirement,
+  getProductOptions,
+  productOptionLabel,
+  productOptionDescription,
+  fetchProductOptions,
+  describeProductRequirement,
+} = useStructureAssignmentFetch({
+  assignment: props.assignment,
+  pieces: props.pieces,
+  products: props.products,
+  components: props.components,
+  isRoot: () => isRoot.value,
+  pieceTypeLabelMap: props.pieceTypeLabelMap ?? {},
+  productTypeLabelMap: props.productTypeLabelMap ?? {},
+  componentTypeLabelMap: props.componentTypeLabelMap ?? {},
+});
+
+const normalizeSelectionValue = (value: unknown) => {
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  return '';
+};
+
+const requirementLabel = computed(() => {
+  const definition = props.assignment.definition || {};
+  const alias = definition.alias || definition.typeComposantLabel;
+  if (alias) {
+    return alias;
+  }
+  if (definition.typeComposantId && props.componentTypeLabelMap[definition.typeComposantId]) {
+    return props.componentTypeLabelMap[definition.typeComposantId];
+  }
+  if (definition.typeComposant?.name) {
+    return definition.typeComposant.name;
+  }
+  if (definition.familyCode) {
+    return `Famille ${definition.familyCode}`;
+  }
+  return 'Sous-composant';
+});
+
+const requirementDescription = computed(() => {
+  const definition = props.assignment.definition || {};
+  const family =
+    definition.typeComposantLabel
+    || (definition.typeComposantId ? props.componentTypeLabelMap[definition.typeComposantId] : null)
+    || definition.typeComposant?.name
+    || definition.familyCode;
+  if (family) {
+    return `Doit appartenir à la famille "${family}".`;
+  }
+  return 'Sélectionnez un composant enfant conforme à cette position.';
+});
+</script>
diff --git a/frontend/app/components/ComposantSelect.vue b/frontend/app/components/ComposantSelect.vue
new file mode 100644
index 0000000..0ae7947
--- /dev/null
+++ b/frontend/app/components/ComposantSelect.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="composantOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      :option-label="formatLabel"
+      :disabled="disabled"
+      server-search
+      @update:modelValue="updateValue"
+      @search="handleSearch"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useComposants } from '~/composables/useComposants'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typeComposantId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner un composant…',
+    emptyText: 'Aucun composant disponible',
+    helperText: '',
+    disabled: false,
+    typeComposantId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { loading: globalLoading, loadComposants } = useComposants()
+
+const localComposants = ref<any[]>([])
+const localLoading = ref(false)
+const loading = computed(() => localLoading.value || globalLoading.value)
+
+const composantOptions = computed(() => localComposants.value)
+
+const loadFilteredComposants = async (search = '') => {
+  if (!props.typeComposantId) return
+  localLoading.value = true
+  try {
+    const result = await loadComposants({ typeComposantId: props.typeComposantId, search, itemsPerPage: 200, force: true })
+    if (result.success && result.data?.items) {
+      localComposants.value = result.data.items
+    }
+  }
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des composants:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+const handleSearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(() => loadFilteredComposants(term.trim()), 300)
+}
+
+onMounted(() => {
+  loadFilteredComposants()
+})
+
+watch(
+  () => props.typeComposantId,
+  () => {
+    loadFilteredComposants()
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatLabel = (option: any) => {
+  if (!option) return ''
+  const name = option.name || 'Composant'
+  return option.reference ? `${name} — ${option.reference}` : name
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  const typeName = option?.typeComposant?.name
+  if (typeName) {
+    parts.push(typeName)
+  }
+  if (option?.reference) {
+    parts.push(`Ref. ${option.reference}`)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>
diff --git a/frontend/app/components/ConstructeurLinksTable.vue b/frontend/app/components/ConstructeurLinksTable.vue
new file mode 100644
index 0000000..438b3cd
--- /dev/null
+++ b/frontend/app/components/ConstructeurLinksTable.vue
@@ -0,0 +1,93 @@
+<template>
+  <div v-if="modelValue.length" class="overflow-x-auto">
+    <table class="table table-sm">
+      <thead>
+        <tr>
+          <th>Fournisseur</th>
+          <th>Réf. fournisseur</th>
+          <th v-if="!readonly" class="w-10" />
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(link, index) in modelValue" :key="link.constructeurId">
+          <td class="font-medium">
+            {{ getConstructeurName(link) }}
+            <div v-if="getConstructeurContact(link)" class="text-xs text-gray-500">
+              {{ getConstructeurContact(link) }}
+            </div>
+          </td>
+          <td>
+            <input
+              v-if="!readonly"
+              :value="link.supplierReference || ''"
+              type="text"
+              class="input input-bordered input-sm w-full"
+              placeholder="Réf. fournisseur"
+              @input="updateReference(index, ($event.target as HTMLInputElement).value)"
+            >
+            <span v-else>{{ link.supplierReference || '—' }}</span>
+          </td>
+          <td v-if="!readonly">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs text-error"
+              aria-label="Retirer"
+              @click="removeLink(index)"
+            >
+              <IconLucideX class="w-4 h-4" />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { formatConstructeurContact } from '~/shared/constructeurUtils'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import IconLucideX from '~icons/lucide/x'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<ConstructeurLinkEntry[]>,
+    default: () => [],
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ConstructeurLinkEntry[]): void
+  (e: 'remove', constructeurId: string): void
+}>()
+
+const { getConstructeurById } = useConstructeurs()
+
+const getConstructeurName = (link: ConstructeurLinkEntry): string =>
+  link.constructeur?.name || getConstructeurById(link.constructeurId)?.name || link.constructeurId
+
+const getConstructeurContact = (link: ConstructeurLinkEntry): string => {
+  const c = link.constructeur || getConstructeurById(link.constructeurId)
+  return formatConstructeurContact(c as any)
+}
+
+const updateReference = (index: number, value: string) => {
+  const updated = [...props.modelValue]
+  const entry = updated[index]
+  if (!entry) return
+  updated[index] = { ...entry, supplierReference: value || null }
+  emit('update:modelValue', updated)
+}
+
+const removeLink = (index: number) => {
+  const removed = props.modelValue[index]
+  const updated = props.modelValue.filter((_, i) => i !== index)
+  emit('update:modelValue', updated)
+  if (removed) emit('remove', removed.constructeurId)
+}
+</script>
diff --git a/frontend/app/components/ConstructeurSelect.vue b/frontend/app/components/ConstructeurSelect.vue
new file mode 100644
index 0000000..589f1a8
--- /dev/null
+++ b/frontend/app/components/ConstructeurSelect.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="space-y-2 constructeur-select">
+    <label v-if="label" class="label"><span class="label-text">{{ label }}</span></label>
+    <div class="flex items-start gap-2">
+      <div class="relative flex-1">
+        <input
+          v-model="searchTerm"
+          type="text"
+          class="input input-bordered w-full pr-10"
+          :placeholder="placeholder"
+          @focus="openDropdown = true; ensureOptionsLoaded()"
+          @input="onSearch"
+        >
+        <button
+          type="button"
+          class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
+          @click="ensureOptionsLoaded(true)"
+        >
+          <IconLucideChevronsUpDown class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <div
+          v-if="openDropdown"
+          class="absolute z-20 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
+        >
+          <div
+            v-if="filteredOptions.length === 0"
+            class="px-3 py-2 text-xs text-gray-500"
+          >
+            Aucun fournisseur trouvé
+          </div>
+          <button
+            v-for="option in filteredOptions"
+            :key="option.id"
+            type="button"
+            class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
+            :class="{ 'bg-base-200': isSelected(option.id) }"
+            @click="toggleOption(option)"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex flex-col">
+                <span class="font-medium">{{ option.name }}</span>
+                <span class="text-xs text-gray-500">
+                  {{ formatConstructeurContact(option) || '—' }}
+                </span>
+              </div>
+              <IconLucideCheck v-if="isSelected(option.id)" class="w-4 h-4 text-primary" aria-hidden="true" />
+            </div>
+          </button>
+        </div>
+      </div>
+      <button type="button" class="btn btn-outline btn-sm" @click="openCreateModal = true">
+        Nouveau
+      </button>
+    </div>
+
+    <div class="flex flex-wrap gap-2 min-h-[1.5rem]">
+      <span v-if="!selectedConstructeurs.length" class="text-sm text-gray-500">
+        Aucun fournisseur sélectionné
+      </span>
+      <span
+        v-for="constructeur in selectedConstructeurs"
+        :key="constructeur.id"
+        class="badge badge-outline gap-1"
+      >
+        <span>{{ constructeur.name }}</span>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs p-0"
+          aria-label="Retirer le fournisseur"
+          @click="removeConstructeur(constructeur.id)"
+        >
+          <IconLucideX class="w-3 h-3" aria-hidden="true" />
+        </button>
+      </span>
+    </div>
+
+    <dialog class="modal" :class="{ 'modal-open': openCreateModal }">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">
+          Nouveau fournisseur
+        </h3>
+        <form @submit.prevent="handleCreate">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nom</span></label>
+            <input v-model="createForm.name" type="text" class="input input-bordered" required>
+          </div>
+          <FieldEmail
+            v-model="createForm.email"
+            class="mb-3"
+            label="Email"
+            placeholder="ex: contact@fournisseur.com"
+            autocomplete="email"
+          />
+          <FieldPhone
+            v-model="createForm.phone"
+            class="mb-3"
+            label="Téléphone"
+            placeholder="ex: 01 23 45 67 89"
+          />
+
+          <div class="modal-action">
+            <button type="button" class="btn" @click="closeCreateModal">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary" :disabled="creating">
+              <span v-if="creating" class="loading loading-spinner loading-xs mr-2" />
+              Créer
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+import type { PropType } from 'vue'
+import FieldEmail from '~/components/form/FieldEmail.vue'
+import FieldPhone from '~/components/form/FieldPhone.vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideX from '~icons/lucide/x'
+import {
+  type ConstructeurSummary,
+  formatConstructeurContact,
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: 'Sélectionner ou créer un fournisseur...',
+  },
+  initialOptions: {
+    type: Array as PropType<ConstructeurSummary[]>,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void
+}>()
+
+const {
+  constructeurs,
+  searchConstructeurs,
+  createConstructeur,
+  ensureConstructeurs,
+} = useConstructeurs()
+const searchTerm = ref('')
+const openDropdown = ref(false)
+const openCreateModal = ref(false)
+const creating = ref(false)
+const options = ref<ConstructeurSummary[]>([])
+const selectedIds = ref<string[]>([])
+
+
+const uniqueOptions = (items: ConstructeurSummary[] = []) => {
+  const seen = new Map<string, ConstructeurSummary>()
+  items.forEach((item) => {
+    if (item && typeof item === 'object' && typeof item.id === 'string') {
+      seen.set(item.id, item)
+    }
+  })
+  return Array.from(seen.values())
+}
+
+const normalizedInitialOptions = computed(() =>
+  uniqueOptions((props.initialOptions as ConstructeurSummary[]) || []),
+)
+
+const applyOptions = (items: ConstructeurSummary[] = []) => {
+  options.value = uniqueOptions([
+    ...normalizedInitialOptions.value,
+    ...items,
+  ])
+}
+
+const filteredOptions = computed(() => {
+  const term = searchTerm.value.trim().toLowerCase()
+  if (!term) return options.value
+  return options.value.filter((option) =>
+    (option.name ?? '').toLowerCase().includes(term)
+    || (option.email && option.email.toLowerCase().includes(term))
+    || (option.phone && option.phone.toLowerCase().includes(term))
+  )
+})
+
+const createForm = ref({
+  name: '',
+  email: '',
+  phone: '',
+})
+
+const optionLookup = computed(() => {
+  const map = new Map<string, ConstructeurSummary>()
+  normalizedInitialOptions.value.forEach((item) => {
+    map.set(item.id, item)
+  })
+  constructeurs.value.forEach((item: ConstructeurSummary) => {
+    map.set(item.id, item)
+  })
+  options.value.forEach((item) => {
+    map.set(item.id, item)
+  })
+  return map
+})
+
+const selectedConstructeurs = computed<ConstructeurSummary[]>(() => {
+  if (!selectedIds.value.length) {
+    return []
+  }
+
+  return selectedIds.value
+    .map((id) => optionLookup.value.get(id))
+    .filter((item): item is ConstructeurSummary => Boolean(item))
+})
+
+const isSelected = (id: string) => selectedIds.value.includes(id)
+
+const emitSelection = (ids: string[]) => {
+  const normalized = uniqueConstructeurIds(ids)
+  selectedIds.value = normalized
+  emit('update:modelValue', normalized)
+}
+
+const extractDataArray = (data: unknown): ConstructeurSummary[] => {
+  if (Array.isArray(data)) {
+    return data as ConstructeurSummary[]
+  }
+  if (data && typeof data === 'object' && 'id' in data) {
+    return [data as ConstructeurSummary]
+  }
+  return []
+}
+
+const ensureOptionsLoaded = async (force = false) => {
+  if (!force && constructeurs.value.length) {
+    applyOptions(constructeurs.value as ConstructeurSummary[])
+    return
+  }
+
+  const result = await searchConstructeurs('')
+  if (result.success) {
+    applyOptions(extractDataArray(result.data))
+  }
+}
+
+const onSearch = () => {
+  openDropdown.value = true
+  ensureOptionsLoaded()
+}
+
+const toggleOption = (option: ConstructeurSummary) => {
+  const ids = new Set(selectedIds.value)
+  if (ids.has(option.id)) {
+    ids.delete(option.id)
+  } else {
+    ids.add(option.id)
+  }
+  emitSelection(Array.from(ids))
+}
+
+const removeConstructeur = (id: string) => {
+  emitSelection(selectedIds.value.filter((item) => item !== id))
+}
+
+const closeCreateModal = () => {
+  openCreateModal.value = false
+  createForm.value = { name: '', email: '', phone: '' }
+}
+
+const handleCreate = async () => {
+  const trimmedName = createForm.value.name.trim()
+  const duplicate = options.value.find(
+    (o) => (o.name ?? '').toLowerCase() === trimmedName.toLowerCase(),
+  )
+  if (duplicate) {
+    emitSelection([...selectedIds.value, duplicate.id])
+    closeCreateModal()
+    return
+  }
+
+  creating.value = true
+  const payload: { name: string; email?: string; phone?: string } = {
+    name: trimmedName,
+  }
+  if (createForm.value.email) {
+    payload.email = createForm.value.email
+  }
+  if (createForm.value.phone) {
+    payload.phone = createForm.value.phone
+  }
+  const result = await createConstructeur(payload)
+  creating.value = false
+  if (result.success && result.data && !Array.isArray(result.data)) {
+    emitSelection([...selectedIds.value, result.data.id])
+    searchTerm.value = ''
+    closeCreateModal()
+    await ensureOptionsLoaded(true)
+  }
+}
+
+const clickHandler = (event: Event) => {
+  const element = event.target as HTMLElement | null
+  if (element && element.closest) {
+    if (
+      element.closest('.menu') ||
+      element.closest('.modal-box') ||
+      element.closest('.btn') ||
+      element.closest('.constructeur-select')
+    ) {
+      return
+    }
+  }
+  openDropdown.value = false
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedIds.value = uniqueConstructeurIds(newValue)
+  },
+  { immediate: true },
+)
+
+watch(
+  selectedIds,
+  async (ids) => {
+    if (!ids.length) {
+      return
+    }
+    const missing = ids.some((id) => !optionLookup.value.get(id))
+    if (missing) {
+      const fetched = await ensureConstructeurs(ids)
+      if (fetched.length) {
+        applyOptions([...options.value, ...fetched])
+      }
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  constructeurs,
+  (list) => {
+    applyOptions((list as ConstructeurSummary[]) || [])
+  },
+  { immediate: true },
+)
+
+watch(
+  normalizedInitialOptions,
+  () => {
+    applyOptions(options.value)
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  window.addEventListener('click', clickHandler)
+  ensureOptionsLoaded()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', clickHandler)
+})
+
+watch(
+  selectedIds,
+  (ids) => {
+    // ensure options contain newly selected ids
+    const resolved = resolveConstructeurs(
+      ids,
+      constructeurs.value as ConstructeurSummary[],
+      options.value,
+    )
+    if (resolved.length) {
+      applyOptions([...resolved, ...options.value])
+    }
+  },
+  { immediate: true },
+)
+</script>
diff --git a/frontend/app/components/CustomFieldsDisplay.vue b/frontend/app/components/CustomFieldsDisplay.vue
new file mode 100644
index 0000000..0e3137e
--- /dev/null
+++ b/frontend/app/components/CustomFieldsDisplay.vue
@@ -0,0 +1,147 @@
+<template>
+  <div v-if="customFields && customFields.length > 0" class="space-y-4">
+    <h4 class="font-semibold text-base-content/80 mb-3">
+      Champs personnalisés
+    </h4>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div
+        v-for="field in sortedCustomFields"
+        :key="field.id"
+        class="form-control"
+      >
+        <label class="label">
+          <span class="label-text">{{ field.name }}</span>
+          <span v-if="field.required" class="label-text-alt text-error">*</span>
+        </label>
+
+        <!-- Champ de type TEXT -->
+        <input
+          v-if="field.type === 'text'"
+          v-model="fieldValues[field.id]"
+          type="text"
+          class="input input-bordered input-sm"
+          :required="field.required"
+          @blur="updateCustomFieldValue(field.id)"
+        >
+
+        <!-- Champ de type NUMBER -->
+        <input
+          v-else-if="field.type === 'number'"
+          v-model="fieldValues[field.id]"
+          type="number"
+          class="input input-bordered input-sm"
+          :required="field.required"
+          @blur="updateCustomFieldValue(field.id)"
+        >
+
+        <!-- Champ de type SELECT -->
+        <select
+          v-else-if="field.type === 'select'"
+          v-model="fieldValues[field.id]"
+          class="select select-bordered select-sm"
+          :required="field.required"
+          @change="updateCustomFieldValue(field.id)"
+        >
+          <option value="">
+            Sélectionner...
+          </option>
+          <option
+            v-for="option in field.options"
+            :key="option"
+            :value="option"
+          >
+            {{ option }}
+          </option>
+        </select>
+
+        <!-- Champ de type BOOLEAN -->
+        <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
+          <input
+            v-model="fieldValues[field.id]"
+            type="checkbox"
+            class="toggle toggle-primary toggle-sm"
+            :checked="fieldValues[field.id] === 'true'"
+            @change="updateCustomFieldValue(field.id)"
+          >
+          <span class="text-sm" :class="fieldValues[field.id] === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
+        </label>
+
+        <!-- Champ de type DATE -->
+        <input
+          v-else-if="field.type === 'date'"
+          v-model="fieldValues[field.id]"
+          type="date"
+          class="input input-bordered input-sm"
+          :required="field.required"
+          @blur="updateCustomFieldValue(field.id)"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, watch, computed } from 'vue'
+
+const props = defineProps({
+  customFields: {
+    type: Array,
+    default: () => []
+  },
+  entityId: {
+    type: String,
+    required: true
+  },
+  entityType: {
+    type: String,
+    required: true, // 'machine', 'composant', 'piece'
+    validator: value => ['machine', 'composant', 'piece'].includes(value)
+  }
+})
+
+const emit = defineEmits(['update'])
+
+const sortedCustomFields = computed(() => {
+  if (!Array.isArray(props.customFields)) {
+    return []
+  }
+  return [...props.customFields].sort((a, b) => {
+    const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
+    const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
+    return left - right
+  })
+})
+
+// Valeurs des champs personnalisés
+const fieldValues = reactive({})
+
+// Initialiser les valeurs sans appliquer de valeur par défaut implicite
+const initializeFieldValues = () => {
+  props.customFields.forEach((field) => {
+    if (!(field.id in fieldValues)) {
+      fieldValues[field.id] = field.value ?? ''
+    }
+  })
+}
+
+// Mettre à jour la valeur d'un champ personnalisé
+const updateCustomFieldValue = (fieldId) => {
+  const field = props.customFields.find(f => f.id === fieldId)
+  if (field) {
+    emit('update', {
+      fieldId,
+      value: fieldValues[fieldId],
+      field
+    })
+  }
+}
+
+// Surveiller les changements dans les champs personnalisés
+watch(() => props.customFields, () => {
+  initializeFieldValues()
+}, { deep: true })
+
+onMounted(() => {
+  initializeFieldValues()
+})
+</script>
diff --git a/frontend/app/components/DetailHeader.vue b/frontend/app/components/DetailHeader.vue
new file mode 100644
index 0000000..4a7d43c
--- /dev/null
+++ b/frontend/app/components/DetailHeader.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-bold">{{ title }}</h1>
+      <p v-if="subtitle" class="text-sm text-base-content/70">{{ subtitle }}</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <button
+        v-if="canEdit"
+        class="btn btn-primary"
+        :class="{ 'btn-outline': isEditMode }"
+        @click="$emit('toggle-edit')"
+      >
+        <IconLucideSquarePen v-if="!isEditMode" class="w-5 h-5 mr-2" aria-hidden="true" />
+        <IconLucideEye v-else class="w-5 h-5 mr-2" aria-hidden="true" />
+        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
+      </button>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
+        Retour au catalogue
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideSquarePen from '~icons/lucide/square-pen'
+import IconLucideEye from '~icons/lucide/eye'
+
+const router = useRouter()
+
+const props = defineProps<{
+  title: string
+  subtitle?: string
+  isEditMode: boolean
+  canEdit: boolean
+  backLink: string
+}>()
+
+defineEmits<{
+  'toggle-edit': []
+}>()
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back()
+  }
+  else {
+    navigateTo(props.backLink)
+  }
+}
+</script>
diff --git a/frontend/app/components/DisplaySettings.vue b/frontend/app/components/DisplaySettings.vue
new file mode 100644
index 0000000..74ce9de
--- /dev/null
+++ b/frontend/app/components/DisplaySettings.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="modal" :class="{ 'modal-open': isOpen }">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg mb-4">
+        Paramètres d'affichage
+      </h3>
+
+      <!-- Contrôle du zoom -->
+      <div class="form-control mb-4">
+        <label class="label">
+          <span class="label-text">Taille du texte</span>
+          <span class="label-text-alt">{{ zoomLevel }}%</span>
+        </label>
+        <input
+          type="range"
+          min="80"
+          max="150"
+          step="10"
+          :value="zoomLevel"
+          class="range range-primary"
+          @input="updateZoom"
+        >
+        <div class="w-full flex justify-between text-xs px-2 mt-1">
+          <span>80%</span>
+          <span>100%</span>
+          <span>150%</span>
+        </div>
+      </div>
+
+      <!-- Contrôle de la densité -->
+      <div class="form-control mb-4">
+        <label class="label">
+          <span class="label-text">Densité de l'interface</span>
+        </label>
+        <div class="flex gap-2">
+          <button
+            class="btn btn-sm"
+            :class="density === 'compact' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('compact')"
+          >
+            Compacte
+          </button>
+          <button
+            class="btn btn-sm"
+            :class="density === 'comfortable' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('comfortable')"
+          >
+            Confortable
+          </button>
+          <button
+            class="btn btn-sm"
+            :class="density === 'spacious' ? 'btn-primary' : 'btn-outline'"
+            @click="setDensity('spacious')"
+          >
+            Espacée
+          </button>
+        </div>
+      </div>
+
+      <!-- Contrôle du contraste -->
+      <div class="form-control mb-4">
+        <label class="label">
+          <span class="label-text">Contraste</span>
+        </label>
+        <div class="flex gap-2">
+          <button
+            class="btn btn-sm"
+            :class="contrast === 'normal' ? 'btn-primary' : 'btn-outline'"
+            @click="setContrast('normal')"
+          >
+            Normal
+          </button>
+          <button
+            class="btn btn-sm"
+            :class="contrast === 'high' ? 'btn-primary' : 'btn-outline'"
+            @click="setContrast('high')"
+          >
+            Élevé
+          </button>
+        </div>
+      </div>
+
+      <!-- Réinitialiser -->
+      <div class="form-control">
+        <button
+          class="btn btn-outline btn-sm"
+          @click="resetSettings"
+        >
+          Réinitialiser les paramètres
+        </button>
+      </div>
+
+      <!-- Actions -->
+      <div class="modal-action">
+        <button class="btn btn-primary" @click="closeModal">
+          Fermer
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'update-settings'])
+
+// Paramètres d'affichage
+const zoomLevel = ref(100)
+const density = ref('comfortable')
+const contrast = ref('normal')
+
+// Charger les paramètres depuis le localStorage
+onMounted(() => {
+  const savedZoom = localStorage.getItem('display-zoom')
+  const savedDensity = localStorage.getItem('display-density')
+  const savedContrast = localStorage.getItem('display-contrast')
+
+  if (savedZoom) { zoomLevel.value = parseInt(savedZoom) }
+  if (savedDensity) { density.value = savedDensity }
+  if (savedContrast) { contrast.value = savedContrast }
+
+  applySettings()
+})
+
+const updateZoom = (event) => {
+  zoomLevel.value = parseInt(event.target.value)
+  applySettings()
+}
+
+const setDensity = (newDensity) => {
+  density.value = newDensity
+  applySettings()
+}
+
+const setContrast = (newContrast) => {
+  contrast.value = newContrast
+  applySettings()
+}
+
+const applySettings = () => {
+  // Sauvegarder dans localStorage
+  localStorage.setItem('display-zoom', zoomLevel.value.toString())
+  localStorage.setItem('display-density', density.value)
+  localStorage.setItem('display-contrast', contrast.value)
+
+  // Appliquer les styles
+  const root = document.documentElement
+
+  // Zoom - exclure complètement le modal des paramètres
+  const modal = document.querySelector('.modal')
+  if (modal) {
+    // Forcer la taille normale pour le modal et tous ses enfants
+    modal.style.fontSize = '100%'
+    modal.style.transform = 'none'
+    modal.style.scale = '1'
+
+    // Appliquer aux enfants du modal
+    const modalElements = modal.querySelectorAll('*')
+    modalElements.forEach((element) => {
+      element.style.fontSize = 'inherit'
+      element.style.transform = 'none'
+      element.style.scale = '1'
+    })
+  }
+
+  // Appliquer le zoom au reste de la page (sauf le modal)
+  root.style.fontSize = `${zoomLevel.value}%`
+
+  // Densité - utiliser les classes DaisyUI
+  root.classList.remove('density-compact', 'density-comfortable', 'density-spacious')
+  root.classList.add(`density-${density.value}`)
+
+  // Contraste - utiliser les classes DaisyUI
+  root.classList.remove('contrast-normal', 'contrast-high')
+  root.classList.add(`contrast-${contrast.value}`)
+
+  // Émettre les changements
+  emit('update-settings', {
+    zoom: zoomLevel.value,
+    density: density.value,
+    contrast: contrast.value
+  })
+}
+
+const resetSettings = () => {
+  zoomLevel.value = 100
+  density.value = 'comfortable'
+  contrast.value = 'normal'
+  applySettings()
+}
+
+const closeModal = () => {
+  emit('close')
+}
+</script>
+
+<style scoped>
+/* Les styles sont maintenant gérés par DaisyUI et le CSS global */
+</style>
diff --git a/frontend/app/components/DocumentEditModal.vue b/frontend/app/components/DocumentEditModal.vue
new file mode 100644
index 0000000..2470e0a
--- /dev/null
+++ b/frontend/app/components/DocumentEditModal.vue
@@ -0,0 +1,90 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="modal modal-open" @click.self="$emit('close')">
+      <div class="modal-box max-w-sm">
+        <h3 class="font-bold text-lg mb-4">
+          Modifier le document
+        </h3>
+
+        <div class="space-y-4">
+          <label class="form-control w-full">
+            <div class="label">
+              <span class="label-text">Nom</span>
+            </div>
+            <input
+              v-model="form.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md w-full"
+            >
+          </label>
+
+          <label class="form-control w-full">
+            <div class="label">
+              <span class="label-text">Type</span>
+            </div>
+            <select
+              v-model="form.type"
+              class="select select-bordered select-sm md:select-md w-full"
+            >
+              <option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
+                {{ t.label }}
+              </option>
+            </select>
+          </label>
+        </div>
+
+        <div class="modal-action">
+          <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="$emit('close')">
+            Annuler
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary btn-sm md:btn-md"
+            :disabled="saving"
+            @click="save"
+          >
+            <span v-if="saving" class="loading loading-spinner loading-xs" />
+            Sauvegarder
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, ref } from 'vue'
+import { DOCUMENT_TYPES } from '~/shared/documentTypes'
+import type { Document } from '~/composables/useDocuments'
+
+const props = defineProps<{
+  visible: boolean
+  document: Document | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'updated', data: { name: string; type: string }): void
+}>()
+
+const form = reactive({ name: '', type: 'documentation' })
+const saving = ref(false)
+
+watch(
+  () => props.document,
+  (doc) => {
+    if (doc) {
+      form.name = doc.name || ''
+      form.type = doc.type || 'documentation'
+    }
+  },
+  { immediate: true },
+)
+
+const save = () => {
+  if (!form.name.trim()) return
+  saving.value = true
+  emit('updated', { name: form.name.trim(), type: form.type })
+  saving.value = false
+}
+</script>
diff --git a/frontend/app/components/DocumentPreviewModal.vue b/frontend/app/components/DocumentPreviewModal.vue
new file mode 100644
index 0000000..401b460
--- /dev/null
+++ b/frontend/app/components/DocumentPreviewModal.vue
@@ -0,0 +1,250 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="visible"
+      class="fixed inset-0 z-[1200] flex items-center justify-center bg-black/60 backdrop-blur-sm px-4 py-6"
+      @click.self="close"
+    >
+      <div class="w-full max-w-[1600px] h-full max-h-[94vh] bg-base-100 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+        <header class="flex items-start justify-between gap-4 p-6 border-b border-base-200">
+          <div class="min-w-0">
+            <h3 class="font-bold text-xl truncate">
+              Prévisualisation
+              <span v-if="navTotal > 1" class="text-base font-normal text-base-content/50">
+                {{ activeIndex + 1 }} / {{ navTotal }}
+              </span>
+            </h3>
+            <p class="text-sm text-base-content/50 truncate">
+              {{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span>
+            </p>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm shrink-0" @click="close">
+            ✕
+          </button>
+        </header>
+
+        <section class="flex-1 bg-base-200/40 px-6 py-5 overflow-hidden relative">
+          <button
+            v-if="hasPrev"
+            type="button"
+            class="absolute left-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
+            title="Document précédent (←)"
+            @click="goToPrev"
+          >
+            ❮
+          </button>
+
+          <button
+            v-if="hasNext"
+            type="button"
+            class="absolute right-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
+            title="Document suivant (→)"
+            @click="goToNext"
+          >
+            ❯
+          </button>
+
+          <div class="h-full w-full rounded-xl border border-base-300 bg-base-100 flex items-center justify-center overflow-hidden">
+            <template v-if="previewType === 'image'">
+              <img :src="documentSrc" alt="preview" class="max-h-full max-w-full object-contain">
+            </template>
+
+            <template v-else-if="previewType === 'pdf'">
+              <iframe
+                :src="documentSrc"
+                class="w-full h-full bg-white"
+                frameborder="0"
+                title="Aperçu PDF"
+              />
+            </template>
+
+            <template v-else-if="previewType === 'audio'">
+              <audio :src="documentSrc" controls class="w-full" />
+            </template>
+
+            <template v-else-if="previewType === 'video'">
+              <video :src="documentSrc" controls class="w-full h-full bg-black" />
+            </template>
+
+            <template v-else-if="previewType === 'text'">
+              <div class="w-full h-full overflow-auto">
+                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
+                  <span class="loading loading-spinner loading-md mr-2" />
+                  Chargement du document...
+                </div>
+                <div v-else-if="textError" class="alert alert-error text-sm">
+                  {{ textError }}
+                </div>
+                <pre v-else class="bg-base-100 border border-base-300 rounded-lg p-4 whitespace-pre-wrap">
+{{ textContent }}
+                </pre>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="text-sm text-base-content/50 text-center px-6">
+                Prévisualisation non disponible pour ce type de document.
+              </div>
+            </template>
+          </div>
+        </section>
+
+        <footer class="border-t border-base-200 px-6 py-4 flex flex-wrap gap-2 justify-end bg-base-100">
+          <button type="button" class="btn" @click="close">
+            Fermer
+          </button>
+          <button type="button" class="btn btn-primary" @click="download">
+            Télécharger
+          </button>
+        </footer>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { getPreviewType, describeDocument, canPreviewDocument } from '~/utils/documentPreview'
+
+const props = defineProps({
+  document: {
+    type: Object,
+    default: null,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  documents: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits(['close'])
+
+// --- Carousel navigation ---
+
+const previewableDocuments = computed(() => {
+  if (!props.documents?.length) return []
+  return props.documents.filter((doc) => canPreviewDocument(doc))
+})
+
+const navTotal = computed(() => previewableDocuments.value.length)
+
+const activeIndex = ref(0)
+
+// Sync index when the parent changes the document prop (e.g. user clicks a different "Consulter")
+watch(
+  () => props.document,
+  (doc) => {
+    if (!doc || !previewableDocuments.value.length) {
+      activeIndex.value = 0
+      return
+    }
+    const idx = previewableDocuments.value.findIndex((d) => d.id === doc.id)
+    activeIndex.value = idx >= 0 ? idx : 0
+  },
+  { immediate: true },
+)
+
+const activeDoc = computed(() => {
+  if (previewableDocuments.value.length && activeIndex.value < previewableDocuments.value.length) {
+    return previewableDocuments.value[activeIndex.value]
+  }
+  return props.document
+})
+
+const hasPrev = computed(() => navTotal.value > 1 && activeIndex.value > 0)
+const hasNext = computed(() => navTotal.value > 1 && activeIndex.value < navTotal.value - 1)
+
+const goToPrev = () => {
+  if (hasPrev.value) activeIndex.value--
+}
+const goToNext = () => {
+  if (hasNext.value) activeIndex.value++
+}
+
+// Keyboard navigation
+const handleKeydown = (e) => {
+  if (!props.visible) return
+  if (e.key === 'ArrowLeft') {
+    e.preventDefault()
+    goToPrev()
+  } else if (e.key === 'ArrowRight') {
+    e.preventDefault()
+    goToNext()
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+  }
+}
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      document.addEventListener('keydown', handleKeydown)
+    } else {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  },
+)
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+// --- Preview logic (uses activeDoc) ---
+
+const previewType = computed(() => getPreviewType(activeDoc.value))
+const documentDescription = computed(() => describeDocument(activeDoc.value))
+const documentSrc = computed(() => activeDoc.value?.fileUrl || activeDoc.value?.path || '')
+
+const textContent = ref('')
+const textLoading = ref(false)
+const textError = ref('')
+
+watch(
+  activeDoc,
+  async (doc) => {
+    textContent.value = ''
+    textError.value = ''
+    textLoading.value = false
+
+    if (!doc) { return }
+    if (getPreviewType(doc) !== 'text') { return }
+
+    try {
+      textLoading.value = true
+      const url = doc.fileUrl || doc.path || ''
+      if (!url) {
+        textError.value = 'Aucune URL de document disponible.'
+        return
+      }
+
+      const response = await fetch(url, { credentials: 'include' })
+      if (!response.ok) {
+        throw new Error('Téléchargement du document impossible')
+      }
+      textContent.value = await response.text()
+    } catch (error) {
+      console.error('Erreur lors du chargement du texte:', error)
+      textError.value = error.message || 'Impossible de lire ce document.'
+    } finally {
+      textLoading.value = false
+    }
+  },
+  { immediate: true },
+)
+
+const close = () => {
+  emit('close')
+}
+
+const download = () => {
+  const url = activeDoc.value?.downloadUrl || activeDoc.value?.fileUrl || activeDoc.value?.path
+  if (!url) { return }
+  window.open(url, '_blank')
+}
+</script>
diff --git a/frontend/app/components/DocumentThumbnail.vue b/frontend/app/components/DocumentThumbnail.vue
new file mode 100644
index 0000000..f17fb43
--- /dev/null
+++ b/frontend/app/components/DocumentThumbnail.vue
@@ -0,0 +1,105 @@
+<template>
+  <div
+    v-if="document"
+    class="flex items-center justify-center overflow-hidden rounded-md border border-base-200 bg-base-200/70"
+    :class="thumbnailClass"
+  >
+    <img
+      v-if="canRenderImage"
+      :src="previewSrc"
+      class="h-full w-full object-cover"
+      :alt="altText"
+      loading="lazy"
+      decoding="async"
+    >
+    <component
+      v-else
+      :is="icon.component"
+      class="h-6 w-6"
+      :class="icon.colorClass"
+      aria-hidden="true"
+    />
+  </div>
+  <div
+    v-else
+    class="flex h-16 w-16 items-center justify-center rounded-md border border-dashed border-base-200 bg-base-200/40 text-xs text-base-content/40"
+    aria-hidden="true"
+  >
+    —
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getFileIcon } from '~/utils/fileIcons';
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview';
+
+type GenericDocument = {
+  id?: string | number;
+  name?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  path?: string | null;
+  fileUrl?: string | null;
+  downloadUrl?: string | null;
+  size?: number | null;
+};
+
+const props = defineProps<{
+  document: GenericDocument | null | undefined;
+  alt?: string;
+}>();
+
+const normalizedDocument = computed(() => props.document ?? null);
+
+const canRenderImage = computed(() => {
+  const doc = normalizedDocument.value;
+  return !!(doc && isImageDocument(doc) && (doc.fileUrl || doc.path));
+});
+
+const canRenderPdf = computed(() => {
+  // Rendering many PDF iframes in a list is very heavy for the browser.
+  // We intentionally disable inline PDF previews and fall back to an icon.
+  return false;
+});
+
+const appendPdfViewerParams = (src: string) => {
+  if (!src || src.startsWith('data:')) {
+    return src;
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`;
+  }
+  return `${src}#toolbar=0&navpanes=0`;
+};
+
+const previewSrc = computed(() => {
+  const doc = normalizedDocument.value;
+  const url = doc?.fileUrl || doc?.path;
+  if (!doc || !url) {
+    return '';
+  }
+  if (isPdfDocument(doc)) {
+    return appendPdfViewerParams(url);
+  }
+  return url;
+});
+
+const thumbnailClass = computed(() => (canRenderImage.value || canRenderPdf.value ? 'h-20 w-16' : 'h-16 w-16'));
+
+const icon = computed(() => {
+  const doc = normalizedDocument.value;
+  return getFileIcon({
+    name: doc?.filename || doc?.name || '',
+    mime: doc?.mimeType || undefined,
+  });
+});
+
+const altText = computed(() => {
+  if (props.alt) {
+    return props.alt;
+  }
+  const doc = normalizedDocument.value;
+  return doc?.name ? `Aperçu de ${doc.name}` : 'Aperçu du document';
+});
+</script>
diff --git a/frontend/app/components/DocumentUpload.vue b/frontend/app/components/DocumentUpload.vue
new file mode 100644
index 0000000..2958636
--- /dev/null
+++ b/frontend/app/components/DocumentUpload.vue
@@ -0,0 +1,245 @@
+<template>
+  <div
+    class="border-2 border-dashed rounded-lg p-6 transition-colors"
+    :class="dragActive ? 'border-primary bg-primary/5' : 'border-base-300 bg-base-100'"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="onDragLeave"
+    @drop.prevent="onDrop"
+  >
+    <div class="flex flex-col items-center gap-3 text-center">
+      <IconLucideCloudUpload class="w-10 h-10 text-primary" aria-hidden="true" />
+
+      <div>
+        <h3 class="font-semibold">
+          {{ title }}
+        </h3>
+        <p class="text-sm text-base-content/50">
+          {{ subtitle }}
+        </p>
+      </div>
+
+      <div class="flex flex-wrap justify-center gap-2">
+        <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
+          Sélectionner des fichiers
+        </button>
+        <span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
+      </div>
+
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        :accept="accept"
+        :multiple="multiple"
+        @change="onFileChange"
+      >
+
+      <div class="w-full max-w-xs mt-2">
+        <label class="text-xs font-semibold uppercase tracking-wide text-base-content/70">
+          Type de document
+        </label>
+        <select
+          class="select select-bordered select-sm w-full mt-1"
+          :value="documentType"
+          @change="emit('update:documentType', $event.target.value)"
+        >
+          <option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
+            {{ t.label }}
+          </option>
+        </select>
+      </div>
+
+      <ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
+        <li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
+          <div class="flex items-center gap-3">
+            <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-300 bg-base-200/70 flex items-center justify-center">
+              <img
+                v-if="isImageFile(file)"
+                :src="getFilePreview(file)"
+                class="h-full w-full object-cover"
+                :alt="`Aperçu de ${file.name}`"
+              >
+              <component
+                v-else
+                :is="getIcon(file).component"
+                class="h-6 w-6"
+                :class="getIcon(file).colorClass"
+                aria-hidden="true"
+              />
+            </div>
+            <div class="flex flex-col">
+              <span class="font-medium">{{ file.name }}</span>
+              <span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+            </div>
+          </div>
+          <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
+            Retirer
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { useToast } from '~/composables/useToast'
+import { DOCUMENT_TYPES } from '~/shared/documentTypes'
+import { getFileIcon } from '~/utils/fileIcons'
+import IconLucideCloudUpload from '~icons/lucide/cloud-upload'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Ajouter des documents'
+  },
+  subtitle: {
+    type: String,
+    default: 'Formats acceptés : PDF, images, textes…'
+  },
+  accept: {
+    type: String,
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  maxFileSizeMb: {
+    type: Number,
+    default: 200
+  },
+  documentType: {
+    type: String,
+    default: 'documentation'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'files-added', 'update:documentType'])
+
+const dragActive = ref(false)
+const fileInput = ref(null)
+const internalFiles = ref([])
+const { showError } = useToast()
+const previewUrls = new Map()
+
+const isImageFile = (file) => (file?.type || '').startsWith('image/')
+
+const getFilePreview = (file) => {
+  if (!isImageFile(file)) { return null }
+  if (!previewUrls.has(file)) {
+    previewUrls.set(file, URL.createObjectURL(file))
+  }
+  return previewUrls.get(file)
+}
+
+const cleanupRemovedPreviews = (previousFiles = [], nextFiles = []) => {
+  const nextSet = new Set(nextFiles)
+  previousFiles.forEach((file) => {
+    if (!nextSet.has(file)) {
+      const url = previewUrls.get(file)
+      if (url) {
+        URL.revokeObjectURL(url)
+        previewUrls.delete(file)
+      }
+    }
+  })
+}
+
+const selectedFiles = internalFiles
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (Array.isArray(newValue)) {
+      cleanupRemovedPreviews(internalFiles.value, newValue)
+      internalFiles.value = [...newValue]
+    }
+  },
+  { immediate: true }
+)
+
+const triggerFileDialog = () => {
+  fileInput.value?.click()
+}
+
+const emitFiles = (files) => {
+  cleanupRemovedPreviews(internalFiles.value, files)
+  internalFiles.value = files
+  emit('update:modelValue', files)
+  emit('files-added', files)
+}
+
+const handleFiles = (fileList) => {
+  const files = Array.from(fileList)
+  const maxBytes = props.maxFileSizeMb * 1024 * 1024
+  if (!props.multiple) {
+    const validFile = files[0]
+    if (validFile && validFile.size > maxBytes) {
+      showError(`Le fichier "${validFile.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
+      return
+    }
+    emitFiles(files.slice(0, 1))
+  } else {
+    const merged = [...internalFiles.value]
+    files.forEach((file) => {
+      if (file.size > maxBytes) {
+        showError(`Le fichier "${file.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
+        return
+      }
+      if (!merged.some(existing => existing.name === file.name && existing.size === file.size)) {
+        merged.push(file)
+      }
+    })
+    emitFiles(merged)
+  }
+}
+
+const onFileChange = (event) => {
+  handleFiles(event.target.files || [])
+  event.target.value = ''
+}
+
+const onDragOver = () => {
+  dragActive.value = true
+}
+
+const onDragLeave = () => {
+  dragActive.value = false
+}
+
+const onDrop = (event) => {
+  dragActive.value = false
+  if (event.dataTransfer?.files?.length) {
+    handleFiles(event.dataTransfer.files)
+  }
+}
+
+const removeFile = (fileToRemove) => {
+  const filtered = internalFiles.value.filter(file => file !== fileToRemove)
+  emitFiles(filtered)
+}
+
+const formatSize = (size) => {
+  if (!size) { return '0 B' }
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.floor(Math.log(size) / Math.log(1024))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+
+const getIcon = (file) => {
+  return getFileIcon({ name: file.name, mime: file.type })
+}
+
+onBeforeUnmount(() => {
+  previewUrls.forEach((url) => {
+    URL.revokeObjectURL(url)
+  })
+  previewUrls.clear()
+})
+</script>
diff --git a/frontend/app/components/MachinePrintSelectionModal.vue b/frontend/app/components/MachinePrintSelectionModal.vue
new file mode 100644
index 0000000..6ef2b5d
--- /dev/null
+++ b/frontend/app/components/MachinePrintSelectionModal.vue
@@ -0,0 +1,138 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': open }">
+    <div class="modal-box max-w-3xl">
+      <form method="dialog" class="modal-close" @submit.prevent />
+      <h3 class="font-bold text-lg mb-2">
+        Préparer l'impression
+      </h3>
+      <p class="text-sm text-base-content/70 mb-4">
+        Choisissez les sections à inclure avant de lancer l'impression.
+      </p>
+
+      <div class="flex flex-wrap gap-2 mb-4">
+        <button type="button" class="btn btn-xs btn-outline" @click="emit('select-all')">
+          Tout sélectionner
+        </button>
+        <button type="button" class="btn btn-xs btn-outline" @click="emit('deselect-all')">
+          Tout désélectionner
+        </button>
+      </div>
+
+      <div class="max-h-[420px] overflow-y-auto pr-2 space-y-6">
+        <section class="bg-base-200/50 rounded-xl p-4 space-y-3">
+          <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
+            Machine
+          </h4>
+          <label class="flex items-start gap-3">
+            <input
+              v-model="selection.machine.info"
+              type="checkbox"
+              class="checkbox checkbox-primary mt-1"
+            >
+            <div>
+              <p class="font-medium">Informations générales</p>
+              <p class="text-xs text-base-content/60">
+                Nom, site et fournisseur de la machine.
+              </p>
+            </div>
+          </label>
+          <label class="flex items-start gap-3">
+            <input
+              v-model="selection.machine.customFields"
+              type="checkbox"
+              class="checkbox checkbox-primary mt-1"
+            >
+            <div>
+              <p class="font-medium">Champs personnalisés</p>
+              <p class="text-xs text-base-content/60">
+                Valeurs spécifiques configurées pour cette machine.
+              </p>
+            </div>
+          </label>
+          <label class="flex items-start gap-3">
+            <input
+              v-model="selection.machine.documents"
+              type="checkbox"
+              class="checkbox checkbox-primary mt-1"
+            >
+            <div>
+              <p class="font-medium">Documents</p>
+              <p class="text-xs text-base-content/60">
+                Pièces jointes liées directement à la machine.
+              </p>
+            </div>
+          </label>
+        </section>
+
+        <section v-if="hasComponents" class="bg-base-200/30 rounded-xl p-4 space-y-3">
+          <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
+            Composants & pièces
+          </h4>
+          <div class="space-y-3">
+            <MachinePrintSelectionNode
+              v-for="component in componentsList"
+              :key="component.id"
+              :component="component"
+              :selection="selection"
+            />
+          </div>
+        </section>
+
+        <section v-if="hasPieces" class="bg-base-200/30 rounded-xl p-4 space-y-3">
+          <h4 class="font-semibold text-sm uppercase tracking-wide text-base-content/70">
+            Pièces indépendantes
+          </h4>
+          <div class="space-y-2">
+            <label
+              v-for="piece in piecesList"
+              :key="piece.id"
+              class="flex items-start gap-3"
+            >
+              <input
+                v-model="selection.pieces[piece.id]"
+                type="checkbox"
+                class="checkbox checkbox-secondary mt-1"
+              >
+              <div>
+                <p class="font-medium">{{ piece.name }}</p>
+                <p class="text-xs text-base-content/60">
+                  {{ piece.reference || 'Référence inconnue' }}
+                </p>
+              </div>
+            </label>
+          </div>
+        </section>
+      </div>
+
+      <div class="modal-action">
+        <button type="button" class="btn btn-ghost" @click="emit('close')">
+          Annuler
+        </button>
+        <button type="button" class="btn btn-primary" @click="emit('confirm')">
+          Imprimer
+        </button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup>
+import { computed, toRef } from 'vue'
+import MachinePrintSelectionNode from '~/components/MachinePrintSelectionNode.vue'
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  selection: { type: Object, required: true },
+  components: { type: Array, default: () => [] },
+  pieces: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['close', 'confirm', 'select-all', 'deselect-all'])
+
+const selection = toRef(props, 'selection')
+const componentsList = computed(() => props.components || [])
+const piecesList = computed(() => props.pieces || [])
+
+const hasComponents = computed(() => componentsList.value.length > 0)
+const hasPieces = computed(() => piecesList.value.length > 0)
+</script>
diff --git a/frontend/app/components/MachinePrintSelectionNode.vue b/frontend/app/components/MachinePrintSelectionNode.vue
new file mode 100644
index 0000000..561cafa
--- /dev/null
+++ b/frontend/app/components/MachinePrintSelectionNode.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="rounded-lg border border-base-300 bg-base-100/80 p-3 space-y-3">
+    <label class="flex items-start gap-3">
+      <input
+        v-model="selection.components[component.id]"
+        type="checkbox"
+        class="checkbox checkbox-primary mt-1"
+      >
+      <div class="flex-1">
+        <p class="font-medium">{{ component.name }}</p>
+        <p v-if="component.reference" class="text-xs text-base-content/60">
+          {{ component.reference }}
+        </p>
+      </div>
+    </label>
+
+    <div v-if="childPieces.length" class="pl-6 space-y-2">
+      <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">
+        Pièces
+      </p>
+      <label
+        v-for="piece in childPieces"
+        :key="piece.id"
+        class="flex items-start gap-3"
+      >
+        <input
+          v-model="selection.pieces[piece.id]"
+          type="checkbox"
+          class="checkbox checkbox-secondary mt-1"
+        >
+        <div>
+          <p class="font-medium">{{ piece.name }}</p>
+          <p class="text-xs text-base-content/60">
+            {{ piece.reference || 'Référence inconnue' }}
+          </p>
+        </div>
+      </label>
+    </div>
+
+    <div v-if="childComponents.length" class="pl-6 space-y-3 border-l border-base-200">
+      <MachinePrintSelectionNode
+        v-for="child in childComponents"
+        :key="child.id"
+        :component="child"
+        :selection="selection"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'MachinePrintSelectionNode' })
+
+const props = defineProps({
+  component: { type: Object, required: true },
+  selection: { type: Object, required: true }
+})
+
+const childComponents = computed(() => props.component.subcomponents || props.component.subComponents || [])
+const childPieces = computed(() => props.component.pieces || [])
+</script>
diff --git a/frontend/app/components/ModelStructureViewer.vue b/frontend/app/components/ModelStructureViewer.vue
new file mode 100644
index 0000000..39c9030
--- /dev/null
+++ b/frontend/app/components/ModelStructureViewer.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
+      <span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
+      <span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
+      <span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span>
+      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-base-content/50">
+        Structure vide
+      </span>
+    </div>
+
+    <details class="collapse collapse-arrow bg-base-200">
+      <summary class="collapse-title text-sm font-medium">
+        Voir la structure JSON
+      </summary>
+      <div class="collapse-content">
+        <pre class="mockup-code whitespace-pre-wrap text-xs bg-base-300 p-4 rounded">
+<code>{{ formatted }}</code>
+        </pre>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { computeStructureStats } from '~/shared/modelUtils'
+
+const props = defineProps({
+  structure: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const stats = computed(() => computeStructureStats(props.structure))
+const formatted = computed(() => JSON.stringify(props.structure ?? {}, null, 2))
+</script>
diff --git a/frontend/app/components/PageHero.vue b/frontend/app/components/PageHero.vue
new file mode 100644
index 0000000..0730013
--- /dev/null
+++ b/frontend/app/components/PageHero.vue
@@ -0,0 +1,81 @@
+<template>
+  <section :class="sectionClasses">
+    <div :class="contentClasses">
+      <div :class="['space-y-3', maxWidthClass]">
+        <component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
+          {{ title }}
+        </component>
+        <p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
+          {{ subtitle }}
+        </p>
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  gradientFrom: {
+    type: String,
+    default: 'from-primary'
+  },
+  gradientTo: {
+    type: String,
+    default: 'to-secondary'
+  },
+  minHeight: {
+    type: String,
+    default: 'min-h-[25vh]'
+  },
+  maxWidth: {
+    type: String,
+    default: 'max-w-xl'
+  },
+  rounded: {
+    type: Boolean,
+    default: false
+  },
+  alignment: {
+    type: String,
+    default: 'center',
+    validator: value => ['center', 'start', 'end'].includes(value)
+  },
+  headingTag: {
+    type: String,
+    default: 'h1'
+  }
+})
+
+const sectionClasses = computed(() => {
+  const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
+  if (props.rounded) {
+    classes.push('rounded-xl', 'overflow-hidden')
+  }
+  return classes
+})
+
+const contentClasses = computed(() => {
+  const base = ['hero-content', 'text-neutral-content']
+  if (props.alignment === 'center') {
+    base.push('text-center')
+  } else if (props.alignment === 'start') {
+    base.push('justify-start', 'text-left')
+  } else if (props.alignment === 'end') {
+    base.push('justify-end', 'text-right')
+  }
+  return base
+})
+
+const maxWidthClass = computed(() => props.maxWidth)
+</script>
diff --git a/frontend/app/components/PieceItem.vue b/frontend/app/components/PieceItem.vue
new file mode 100644
index 0000000..a081d6a
--- /dev/null
+++ b/frontend/app/components/PieceItem.vue
@@ -0,0 +1,578 @@
+<template>
+  <div class="space-y-4">
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+
+    <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
+    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
+      <div class="flex items-start gap-3 flex-1 min-w-0">
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
+          :class="{ 'rotate-90': !isCollapsed }"
+          :aria-expanded="!isCollapsed"
+          :title="isCollapsed ? 'Déplier les détails de la pièce' : 'Replier les détails de la pièce'"
+          @click="toggleCollapse"
+        >
+          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
+          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
+        </button>
+        <div class="flex-1 min-w-0">
+          <h3 class="text-lg font-semibold">
+            {{ pieceData.name }}
+            <span
+              v-if="displayQuantity > 1"
+              class="text-sm font-normal text-base-content/60 ml-1"
+            >
+              ×{{ displayQuantity }}
+            </span>
+          </h3>
+          <div class="flex flex-wrap gap-2 mt-2">
+            <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
+              Rattachée à {{ piece.parentComponentName }}
+            </span>
+            <span v-if="pieceData.reference" class="badge badge-outline badge-sm">{{ pieceData.reference }}</span>
+            <span v-if="pieceData.referenceAuto" class="badge badge-secondary badge-sm" title="Référence auto">{{ pieceData.referenceAuto }}</span>
+            <template v-if="pieceConstructeursDisplay.length">
+              <span
+                v-for="constructeur in pieceConstructeursDisplay"
+                :key="constructeur.id"
+                class="badge badge-outline badge-sm"
+              >
+                {{ constructeur.name }}
+                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs opacity-60 ml-0.5">
+                  ({{ supplierReferenceMap.get(constructeur.id) }})
+                </span>
+              </span>
+            </template>
+            <span v-if="pieceData.prix" class="badge badge-primary badge-sm">{{ pieceData.prix }}€</span>
+            <span
+              v-if="displayProductName"
+              class="badge badge-info badge-sm"
+            >
+              Produit&nbsp;: {{ displayProductName }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer cette pièce"
+        @click="$emit('delete')"
+      >
+        Supprimer
+      </button>
+    </div>
+
+    <div v-show="!isCollapsed" class="space-y-4">
+      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
+        <div class="space-y-2 text-sm">
+      <div v-if="isEditMode" class="form-control">
+        <label class="label">
+          <span class="label-text text-sm">Quantité</span>
+        </label>
+        <input
+          v-model.number="pieceData.quantity"
+          type="number"
+          min="1"
+          step="1"
+          class="input input-bordered input-sm md:input-md w-24"
+          @blur="updatePiece"
+        />
+      </div>
+      <div v-else-if="displayQuantity > 1">
+        <span class="font-medium">Quantité:</span>
+        <span class="ml-2">{{ displayQuantity }}</span>
+      </div>
+      <div>
+        <span class="font-medium">Référence:</span>
+        <input
+          v-if="isEditMode"
+          :id="`piece-reference-${piece.id}`"
+          v-model="pieceData.reference"
+          type="text"
+          class="input input-sm input-bordered ml-2"
+          @blur="updatePiece"
+        />
+        <span v-else class="ml-2">{{
+          pieceData.reference || "Non définie"
+        }}</span>
+      </div>
+      <div v-if="pieceData.referenceAuto">
+        <span class="font-medium">Référence auto:</span>
+        <span class="ml-2">{{ pieceData.referenceAuto }}</span>
+      </div>
+      <div>
+        <span class="font-medium">Fournisseur:</span>
+        <div v-if="!isEditMode" class="ml-2">
+          <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
+            <div
+              v-for="constructeur in pieceConstructeursDisplay"
+              :key="constructeur.id"
+              class="flex flex-col"
+            >
+              <span class="font-medium">
+                {{ constructeur.name }}
+                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm font-normal text-base-content/60">
+                  — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                </span>
+              </span>
+              <span
+                v-if="formatConstructeurContact(constructeur)"
+                class="text-xs text-base-content/50"
+              >
+                {{ formatConstructeurContact(constructeur) }}
+              </span>
+            </div>
+          </div>
+          <span v-else class="font-medium">
+            Non défini
+          </span>
+        </div>
+        <ConstructeurSelect
+          v-else
+          class="w-full"
+          :model-value="pieceConstructeurIds"
+          :initial-options="pieceConstructeursDisplay"
+          placeholder="Sélectionner un ou plusieurs fournisseurs..."
+          @update:model-value="handleConstructeurChange"
+        />
+      </div>
+      <div>
+        <span class="font-medium">Prix:</span>
+        <input
+          v-if="isEditMode"
+          :id="`piece-prix-${piece.id}`"
+          v-model="pieceData.prix"
+          type="number"
+          step="0.01"
+          class="input input-sm input-bordered ml-2"
+          @blur="updatePiece"
+        />
+        <span v-else class="ml-2">{{
+          pieceData.prix ? `${pieceData.prix}€` : "Non défini"
+        }}</span>
+      </div>
+      <div>
+        <span class="font-medium">Produit catalogue:</span>
+        <div v-if="isEditMode" class="mt-2 space-y-2">
+          <ProductSelect
+            :model-value="pieceData.productId"
+            placeholder="Associer un produit…"
+            helper-text="Optionnel : reliez cette pièce à un produit catalogue."
+            @update:modelValue="handleProductChange"
+          />
+          <div
+            v-if="selectedProduct"
+            class="rounded-md border border-base-200 bg-base-100 p-3 text-xs space-y-1"
+          >
+            <p class="text-sm font-semibold text-base-content">
+              {{ selectedProduct.name }}
+            </p>
+            <p
+              v-for="info in productInfoRows"
+              :key="info.label"
+              class="flex flex-wrap gap-1"
+            >
+              <span class="font-semibold">{{ info.label }} :</span>
+              <span>{{ info.value }}</span>
+            </p>
+            <NuxtLink
+              v-if="selectedProduct.id"
+              :to="`/product/${selectedProduct.id}`"
+              class="link link-primary text-xs"
+            >
+              Ouvrir la fiche produit
+            </NuxtLink>
+          </div>
+          <p v-else class="text-xs text-base-content/60">
+            Aucun produit associé.
+          </p>
+        </div>
+        <div class="ml-2">
+          <div v-if="displayProduct" class="space-y-1">
+            <p class="font-medium text-base-content">
+              {{ displayProductName || 'Produit catalogue' }}
+            </p>
+            <p
+              v-for="info in productInfoRows"
+              :key="info.label"
+              class="text-xs text-base-content/70"
+            >
+              <span class="font-semibold">{{ info.label }} :</span>
+              <span class="ml-1">{{ info.value }}</span>
+            </p>
+            <ProductDocumentsInline
+              :documents="productDocuments"
+              @preview="openPreview"
+            />
+          </div>
+          <span v-else class="font-medium">
+            Non défini
+          </span>
+        </div>
+      </div>
+    </div>
+      </div>
+
+    <!-- Champs personnalisés de la pièce -->
+    <CustomFieldDisplay
+      :fields="displayedCustomFields"
+      :is-edit-mode="isEditMode"
+      @field-input="handleCustomFieldInput"
+      @field-blur="handleCustomFieldBlur"
+    />
+
+    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
+      <div class="flex items-center justify-between">
+        <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
+        <span
+          v-if="isEditMode && selectedFiles.length"
+          class="badge badge-outline"
+        >
+          {{ selectedFiles.length }} fichier{{
+            selectedFiles.length > 1 ? "s" : ""
+          }}
+          sélectionné{{ selectedFiles.length > 1 ? "s" : "" }}
+        </span>
+      </div>
+
+      <p v-if="loadingDocuments" class="text-xs text-base-content/50">
+        Chargement des documents...
+      </p>
+
+      <DocumentUpload
+        v-if="isEditMode"
+        v-model="selectedFiles"
+        title="Déposer des fichiers pour cette pièce"
+        subtitle="Formats acceptés : PDF, images, documents..."
+        @files-added="handleFilesAdded"
+      />
+
+      <DocumentListInline
+        :documents="pieceDocuments"
+        :can-delete="isEditMode"
+        :can-edit="isEditMode"
+        :delete-disabled="uploadingDocuments"
+        empty-text="Aucun document lié à cette pièce."
+        @preview="openPreview"
+        @edit="openEditModal"
+        @delete="removeDocument"
+      />
+    </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, watch, computed } from 'vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
+import ProductSelect from '~/components/ProductSelect.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useProducts } from '~/composables/useProducts'
+import {
+  formatConstructeurContact as formatConstructeurContactSummary,
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+  parseConstructeurLinksFromApi,
+} from '~/shared/constructeurUtils'
+import {
+  resolveFieldId,
+  resolveFieldReadOnly,
+} from '~/shared/utils/entityCustomFieldLogic'
+import { useEntityDocuments } from '~/composables/useEntityDocuments'
+import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
+import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
+
+const props = defineProps({
+  piece: { type: Object, required: true },
+  isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
+  collapseAll: { type: Boolean, default: true },
+  toggleToken: { type: Number, default: 0 },
+})
+
+const emit = defineEmits(['update', 'edit', 'custom-field-update', 'delete'])
+
+// --- Local reactive data for editing ---
+const pieceData = reactive({
+  name: props.piece.name || '',
+  reference: props.piece.reference || '',
+  referenceAuto: props.piece.referenceAuto || null,
+  prix: props.piece.prix || '',
+  productId: props.piece.product?.id || props.piece.productId || null,
+  quantity: props.piece.quantity ?? 1,
+})
+
+const displayQuantity = computed(() => {
+  return pieceData.quantity ?? 1
+})
+
+// --- Products ---
+const { products, loadProducts, getProduct } = useProducts()
+
+const selectedProduct = computed(() => {
+  const id = pieceData.productId
+  if (!id) return null
+  const list = Array.isArray(products.value) ? products.value : []
+  const cached = list.find((p) => p && p.id === id) || null
+  if (cached) return cached
+  const current = props.piece.product
+  if (current && current.id === id) return current
+  return null
+})
+
+// --- Shared composables ---
+const {
+  documents: pieceDocuments,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  previewDocument,
+  previewVisible,
+  openPreview,
+  closePreview,
+  refreshDocuments,
+  handleFilesAdded,
+  removeDocument,
+  editDocument,
+} = useEntityDocuments({ entity: () => props.piece, entityType: 'piece' })
+
+const {
+  displayProduct,
+  displayProductName,
+  productInfoRows,
+  productDocuments,
+} = useEntityProductDisplay({ entity: () => props.piece, selectedProduct })
+
+const {
+  displayedCustomFields,
+  updateCustomField,
+} = useEntityCustomFields({ entity: () => props.piece, entityType: 'piece' })
+
+// --- Document edit modal ---
+const editingDocument = ref(null)
+const editModalVisible = ref(false)
+
+const openEditModal = (doc) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data) => {
+  if (!editingDocument.value?.id) return
+  await editDocument(editingDocument.value.id, data)
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+// --- Collapse state ---
+const isCollapsed = ref(true)
+
+watch(
+  () => props.toggleToken,
+  () => {
+    isCollapsed.value = props.collapseAll
+    if (!isCollapsed.value) refreshDocuments()
+  },
+  { immediate: true },
+)
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  if (!isCollapsed.value) refreshDocuments()
+}
+
+// --- Constructeurs ---
+const { constructeurs } = useConstructeurs()
+
+const pieceConstructeurLinks = computed(() =>
+  parseConstructeurLinksFromApi(
+    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
+  ),
+)
+
+const supplierReferenceMap = computed(() => {
+  const map = new Map()
+  pieceConstructeurLinks.value.forEach(l => {
+    if (l.supplierReference) map.set(l.constructeurId, l.supplierReference)
+  })
+  return map
+})
+
+const pieceConstructeurIds = computed(() =>
+  pieceConstructeurLinks.value.map(l => l.constructeurId).filter(Boolean),
+)
+
+const pieceConstructeursDisplay = computed(() => {
+  // Extract nested constructeur objects from link entries
+  const linkConstructeurs = pieceConstructeurLinks.value
+    .filter(l => l.constructeur && l.constructeur.id)
+    .map(l => l.constructeur)
+  return resolveConstructeurs(
+    pieceConstructeurIds.value,
+    linkConstructeurs,
+    constructeurs.value,
+  )
+})
+
+const formatConstructeurContact = (constructeur) =>
+  formatConstructeurContactSummary(constructeur)
+
+const handleConstructeurChange = (value) => {
+  const ids = uniqueConstructeurIds(value)
+  props.piece.constructeurIds = [...ids]
+  props.piece.constructeurId = null
+  props.piece.constructeur = null
+  props.piece.constructeurs = resolveConstructeurs(
+    ids,
+    constructeurs.value,
+    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
+  )
+  updatePiece()
+}
+
+// --- Product handling ---
+const ensureProductLoaded = async (id) => {
+  if (!id) return null
+  const list = Array.isArray(products.value) ? products.value : []
+  const cached = list.find((p) => p && p.id === id)
+  if (cached) return cached
+  const result = await getProduct(id, { force: true })
+  return result.success && result.data ? result.data : null
+}
+
+const handleProductChange = async (value) => {
+  const nextId = value || null
+  pieceData.productId = nextId
+  props.piece.productId = nextId
+
+  if (!nextId) {
+    props.piece.product = null
+    updatePiece()
+    return
+  }
+
+  const resolved = await ensureProductLoaded(nextId)
+  if (resolved) {
+    props.piece.product = resolved
+    const supplierPrice = resolved.supplierPrice
+    if (
+      (pieceData.prix === '' || pieceData.prix === null || pieceData.prix === undefined) &&
+      supplierPrice !== null && supplierPrice !== undefined
+    ) {
+      const number = Number(supplierPrice)
+      if (!Number.isNaN(number)) pieceData.prix = String(number)
+    }
+  }
+
+  updatePiece()
+}
+
+// --- Custom field event handlers ---
+const handleCustomFieldInput = (field, value) => {
+  if (resolveFieldReadOnly(field)) return
+  const fieldValueId = resolveFieldId(field)
+  if (!fieldValueId) return
+  const fieldValue = props.piece.customFieldValues?.find((fv) => fv.id === fieldValueId)
+  if (fieldValue) fieldValue.value = value
+}
+
+const handleCustomFieldBlur = async (field) => {
+  await updateCustomField(field)
+  const cfId = field?.customFieldId || field?.customField?.id || null
+  if (cfId || field?.customFieldValueId) {
+    emit('custom-field-update', {
+      fieldId: cfId,
+      pieceId: props.piece.id,
+      value: field?.value ?? '',
+    })
+  }
+}
+
+// --- Update piece ---
+const updatePiece = () => {
+  const prixValue = pieceData.prix
+  let parsedPrice = null
+  if (prixValue !== null && prixValue !== undefined && String(prixValue).trim().length > 0) {
+    const numeric = Number(prixValue)
+    if (!Number.isNaN(numeric)) parsedPrice = String(numeric)
+  }
+  const product = selectedProduct.value ? { ...selectedProduct.value } : null
+  emit('update', {
+    ...props.piece,
+    ...pieceData,
+    prix: parsedPrice,
+    quantity: pieceData.quantity ?? 1,
+    productId: pieceData.productId || null,
+    product,
+    constructeurIds: pieceConstructeurIds.value,
+  })
+}
+
+// --- Watchers ---
+watch(
+  () => props.piece.product?.id || props.piece.productId || null,
+  async (id) => {
+    if (pieceData.productId === id) {
+      if (id && !selectedProduct.value) {
+        const resolved = await ensureProductLoaded(id)
+        if (resolved) props.piece.product = resolved
+      }
+      if (!id) props.piece.product = null
+      return
+    }
+    pieceData.productId = id
+    if (id) {
+      const resolved = await ensureProductLoaded(id)
+      if (resolved) {
+        props.piece.product = resolved
+        if (
+          (pieceData.prix === '' || pieceData.prix === null || pieceData.prix === undefined) &&
+          resolved.supplierPrice !== null && resolved.supplierPrice !== undefined
+        ) {
+          const number = Number(resolved.supplierPrice)
+          if (!Number.isNaN(number)) pieceData.prix = String(number)
+        }
+      }
+    } else {
+      props.piece.product = null
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => [props.piece.name, props.piece.reference, props.piece.prix, props.piece.quantity],
+  () => {
+    pieceData.name = props.piece.name || ''
+    pieceData.reference = props.piece.reference || ''
+    pieceData.prix = props.piece.prix || ''
+    pieceData.quantity = props.piece.quantity ?? 1
+  },
+)
+
+onMounted(() => {
+  pieceData.name = props.piece.name || ''
+  pieceData.reference = props.piece.reference || ''
+  pieceData.prix = props.piece.prix || ''
+  pieceData.quantity = props.piece.quantity ?? 1
+  loadProducts().catch(() => {})
+  if (pieceData.productId) ensureProductLoaded(pieceData.productId)
+  if (!props.piece.documents?.length) refreshDocuments()
+})
+</script>
diff --git a/frontend/app/components/PieceModelStructureEditor.vue b/frontend/app/components/PieceModelStructureEditor.vue
new file mode 100644
index 0000000..c26a7fc
--- /dev/null
+++ b/frontend/app/components/PieceModelStructureEditor.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="space-y-6">
+    <section class="space-y-3">
+      <header>
+        <h3 class="text-sm font-semibold">
+          Produits inclus par défaut
+        </h3>
+        <p class="text-xs text-base-content/70">
+          Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie.
+        </p>
+      </header>
+
+      <p v-if="!products.length" class="text-xs text-base-content/50">
+        Aucun produit défini.
+      </p>
+
+      <ul v-else class="space-y-2" role="list">
+        <li
+          v-for="(product, index) in products"
+          :key="product.uid"
+          class="space-y-3 rounded-md border border-base-200 bg-base-100 p-3"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="flex-1 space-y-3">
+              <div class="form-control">
+                <label class="label py-1">
+                  <span class="label-text text-xs">Famille de produit</span>
+                </label>
+                <select
+                  v-model="product.typeProductId"
+                  class="select select-bordered select-xs"
+                  @change="handleProductTypeSelect(product)"
+                >
+                  <option value="">
+                    Sélectionner une famille
+                  </option>
+                  <option
+                    v-for="type in productTypeOptions"
+                    :key="type.id"
+                    :value="type.id"
+                  >
+                    {{ formatProductTypeOption(type) }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="btn btn-error btn-xs btn-square"
+              @click="removeProduct(index)"
+            >
+              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+            </button>
+          </div>
+        </li>
+      </ul>
+      <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+        Ajouter
+      </button>
+    </section>
+
+    <section class="space-y-3">
+      <h3 class="text-sm font-semibold">
+        Champs personnalisés
+      </h3>
+
+      <p v-if="!fields.length" class="text-xs text-base-content/50">
+        Aucun champ personnalisé n'a encore été défini.
+      </p>
+
+      <ul v-else class="space-y-2" role="list">
+        <li
+          v-for="(field, index) in fields"
+          :key="field.uid"
+          class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
+          :class="reorderClass(index)"
+          draggable="true"
+          @dragstart="onDragStart(index, $event)"
+          @dragenter="onDragEnter(index)"
+          @dragover.prevent="onDragEnter(index)"
+          @drop.prevent="onDrop(index)"
+          @dragend="onDragEnd"
+        >
+          <div class="flex items-start gap-3">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
+              title="Réordonner"
+              draggable="false"
+            >
+              <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+            </button>
+
+            <div class="flex-1 space-y-2">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                <input
+                  v-model="field.name"
+                  type="text"
+                  class="input input-bordered input-xs"
+                  placeholder="Nom du champ"
+                >
+                <select v-model="field.type" class="select select-bordered select-xs">
+                  <option value="text">
+                    Texte
+                  </option>
+                  <option value="number">
+                    Nombre
+                  </option>
+                  <option value="select">
+                    Liste
+                  </option>
+                  <option value="boolean">
+                    Oui/Non
+                  </option>
+                  <option value="date">
+                    Date
+                  </option>
+                </select>
+              </div>
+
+              <div class="flex items-center gap-2 text-xs">
+                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+                Obligatoire
+              </div>
+
+              <textarea
+                v-if="field.type === 'select'"
+                v-model="field.optionsText"
+                class="textarea textarea-bordered textarea-xs h-20"
+                placeholder="Option 1&#10;Option 2"
+              />
+            </div>
+
+            <button
+              type="button"
+              class="btn btn-error btn-xs btn-square"
+              @click="removeField(index)"
+            >
+              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+            </button>
+          </div>
+        </li>
+      </ul>
+      <button type="button" class="btn btn-outline btn-xs" @click="addField">
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+        Ajouter
+      </button>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import { usePieceStructureEditorLogic } from '~/composables/usePieceStructureEditorLogic'
+
+defineOptions({ name: 'PieceModelStructureEditor' })
+
+const props = defineProps<{
+  modelValue?: PieceModelStructure | null
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: PieceModelStructure): void
+}>()
+
+const {
+  fields,
+  products,
+  productTypeOptions,
+  formatProductTypeOption,
+  handleProductTypeSelect,
+  addProduct,
+  removeProduct,
+  addField,
+  removeField,
+  reorderClass,
+  onDragStart,
+  onDragEnter,
+  onDrop,
+  onDragEnd,
+} = usePieceStructureEditorLogic({ props, emit })
+</script>
diff --git a/frontend/app/components/PieceSelect.vue b/frontend/app/components/PieceSelect.vue
new file mode 100644
index 0000000..ba19d56
--- /dev/null
+++ b/frontend/app/components/PieceSelect.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="pieceOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      :option-label="formatLabel"
+      :disabled="disabled"
+      server-search
+      @update:modelValue="updateValue"
+      @search="handleSearch"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { usePieces } from '~/composables/usePieces'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typePieceId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner une pièce…',
+    emptyText: 'Aucune pièce disponible',
+    helperText: '',
+    disabled: false,
+    typePieceId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { loading: globalLoading, loadPieces } = usePieces()
+
+const localPieces = ref<any[]>([])
+const localLoading = ref(false)
+const loading = computed(() => localLoading.value || globalLoading.value)
+
+const pieceOptions = computed(() => localPieces.value)
+
+const loadFilteredPieces = async (search = '') => {
+  if (!props.typePieceId) return
+  localLoading.value = true
+  try {
+    const result = await loadPieces({ typePieceId: props.typePieceId, search, itemsPerPage: 200, force: true })
+    if (result.success && result.data?.items) {
+      localPieces.value = result.data.items
+    }
+  }
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des pièces:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+const handleSearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(() => loadFilteredPieces(term.trim()), 300)
+}
+
+onMounted(() => {
+  loadFilteredPieces()
+})
+
+watch(
+  () => props.typePieceId,
+  () => {
+    loadFilteredPieces()
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatLabel = (option: any) => {
+  if (!option) return ''
+  const name = option.name || 'Pièce'
+  return option.reference ? `${name} — ${option.reference}` : name
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  const typeName = option?.typePiece?.name
+  if (typeName) {
+    parts.push(typeName)
+  }
+  if (option?.reference) {
+    parts.push(`Ref. ${option.reference}`)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>
diff --git a/frontend/app/components/ProductDocumentsInline.vue b/frontend/app/components/ProductDocumentsInline.vue
new file mode 100644
index 0000000..d17702c
--- /dev/null
+++ b/frontend/app/components/ProductDocumentsInline.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="documents.length"
+    class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+  >
+    <h5 class="font-medium text-base-content">Documents du produit</h5>
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-5 w-5"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium text-base-content">
+            {{ document.name }}
+          </div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 text-xs">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+          Télécharger
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps({
+  documents: { type: Array, required: true },
+})
+
+defineEmits(['preview'])
+</script>
diff --git a/frontend/app/components/ProductSelect.vue b/frontend/app/components/ProductSelect.vue
new file mode 100644
index 0000000..0e2496b
--- /dev/null
+++ b/frontend/app/components/ProductSelect.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="productOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      :option-label="formatLabel"
+      :disabled="disabled"
+      server-search
+      @update:modelValue="updateValue"
+      @search="handleSearch"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useProducts } from '~/composables/useProducts'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typeProductId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner un produit…',
+    emptyText: 'Aucun produit disponible',
+    helperText: '',
+    disabled: false,
+    typeProductId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { loading: globalLoading, loadProducts } = useProducts()
+
+const localProducts = ref<any[]>([])
+const localLoading = ref(false)
+const loading = computed(() => localLoading.value || globalLoading.value)
+
+const productOptions = computed(() => localProducts.value)
+
+const loadFilteredProducts = async (search = '') => {
+  if (!props.typeProductId) return
+  localLoading.value = true
+  try {
+    const result = await loadProducts({ typeProductId: props.typeProductId, search, itemsPerPage: 200, force: true })
+    if (result.success && result.data?.items) {
+      localProducts.value = result.data.items
+    }
+  }
+  catch (error: unknown) {
+    console.error('Erreur lors du chargement des produits:', error)
+  }
+  finally {
+    localLoading.value = false
+  }
+}
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+const handleSearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(() => loadFilteredProducts(term.trim()), 300)
+}
+
+onMounted(() => {
+  loadFilteredProducts()
+})
+
+watch(
+  () => props.typeProductId,
+  () => {
+    loadFilteredProducts()
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatLabel = (option: any) => {
+  if (!option) return ''
+  const name = option.name || 'Produit'
+  return option.reference ? `${name} — ${option.reference}` : name
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  const typeName = option?.typeProduct?.name
+  if (typeName) {
+    parts.push(typeName)
+  }
+  if (option?.reference) {
+    parts.push(`Ref. ${option.reference}`)
+  }
+  if (option?.supplierPrice !== undefined && option.supplierPrice !== null) {
+    const price = Number(option.supplierPrice)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>
diff --git a/frontend/app/components/StructureNodeEditor.vue b/frontend/app/components/StructureNodeEditor.vue
new file mode 100644
index 0000000..3612258
--- /dev/null
+++ b/frontend/app/components/StructureNodeEditor.vue
@@ -0,0 +1,416 @@
+<template>
+  <div :class="containerClass">
+    <div class="border border-base-200 rounded-lg bg-base-100 shadow-sm">
+      <div class="flex flex-wrap items-start justify-between gap-3 border-b border-base-200 px-4 py-3">
+        <div class="flex-1 min-w-[220px] space-y-2">
+          <label class="label">
+            <span class="label-text text-xs font-semibold">
+              {{ isRoot ? 'Composant racine de la catégorie' : 'Famille de composant' }}
+            </span>
+          </label>
+          <template v-if="isRoot">
+            <p class="text-[11px] text-base-content/50">
+              Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
+            </p>
+          </template>
+          <template v-else-if="!lockType">
+            <select
+              v-model="node.typeComposantId"
+              class="select select-bordered select-sm w-full"
+              :disabled="isLocked"
+              @change="handleComponentTypeSelect(node)"
+            >
+              <option value="">
+                Sélectionner une famille de composant
+              </option>
+              <option
+                v-for="type in componentTypes"
+                :key="type.id"
+                :value="type.id"
+              >
+                {{ formatComponentTypeOption(type) }}
+              </option>
+            </select>
+            <p class="text-[11px] text-base-content/50">
+              {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+            </p>
+            <div v-if="!isRoot" class="form-control mt-2">
+              <label class="label py-1">
+                <span class="label-text text-[11px]">Alias (optionnel)</span>
+              </label>
+              <input
+                v-model="node.alias"
+                type="text"
+                class="input input-bordered input-xs"
+                placeholder="Alias du sous-composant"
+                :disabled="isLocked"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="input input-bordered input-sm bg-base-200 flex items-center">
+              {{ lockedTypeDisplay }}
+            </div>
+          </template>
+        </div>
+        <button
+          v-if="!isRoot && !isLocked"
+          type="button"
+          class="btn btn-error btn-xs btn-square"
+          @click="emit('remove')"
+        >
+          <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <div v-else-if="!isRoot && isLocked" class="tooltip tooltip-left" data-tip="Ce sous-composant ne peut pas être supprimé">
+          <button type="button" class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed" disabled>
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <div class="px-4 py-4 space-y-5">
+        <section v-if="isRoot" class="space-y-3">
+          <h4 :class="headingClass">
+            {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
+          </h4>
+          <p v-if="!(node.customFields?.length)" class="text-xs text-base-content/50">
+            Aucun champ n'a encore été défini.
+          </p>
+          <div v-else class="space-y-2">
+            <div
+              v-for="(field, index) in node.customFields"
+              :key="`field-${index}`"
+              class="border border-base-200 rounded-md p-3 space-y-2 transition-colors"
+              :class="customFieldReorderClass(index)"
+              draggable="true"
+              @dragstart="onCustomFieldDragStart(index, $event)"
+              @dragenter="onCustomFieldDragEnter(index)"
+              @dragover.prevent
+              @drop="onCustomFieldDrop(index)"
+              @dragend="onCustomFieldDragEnd"
+            >
+              <div class="flex items-start justify-between gap-2">
+                <div class="flex items-center gap-2">
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                    title="Réorganiser"
+                    draggable="true"
+                    @dragstart.stop="onCustomFieldDragStart(index, $event)"
+                  >
+                    <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+                  </button>
+                </div>
+                <div class="flex-1 space-y-2">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+                    <input
+                      v-model="field.name"
+                      type="text"
+                      class="input input-bordered input-xs"
+                      placeholder="Nom du champ"
+                    />
+                    <select v-model="field.type" class="select select-bordered select-xs">
+                      <option value="text">Texte</option>
+                      <option value="number">Nombre</option>
+                      <option value="select">Liste</option>
+                      <option value="boolean">Oui/Non</option>
+                      <option value="date">Date</option>
+                    </select>
+                  </div>
+                  <div class="flex items-center gap-2 text-xs">
+                    <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" />
+                    Obligatoire
+                  </div>
+                  <textarea
+                    v-if="field.type === 'select'"
+                    v-model="field.optionsText"
+                    class="textarea textarea-bordered textarea-xs h-20"
+                    placeholder="Option 1&#10;Option 2"
+                  ></textarea>
+                </div>
+                <button
+                  type="button"
+                  class="btn btn-error btn-xs btn-square"
+                  @click="removeCustomField(index)"
+                >
+                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
+        </section>
+
+        <section v-if="isRoot" class="space-y-3">
+          <h4 :class="headingClass">
+            {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
+          </h4>
+          <p v-if="!(node.products?.length)" class="text-xs text-base-content/50">
+            Aucun produit défini.
+          </p>
+          <div v-else class="space-y-2">
+            <div
+              v-for="(product, index) in node.products"
+              :key="`product-${index}`"
+              class="relative border border-base-200 rounded-md p-3 pl-10 space-y-3 transition-colors"
+              :class="productReorderClass(index)"
+              @dragenter="onProductDragEnter(index)"
+              @dragover="onProductDragOver"
+              @drop="onProductDrop(index)"
+            >
+              <button
+                type="button"
+                class="absolute left-2 top-3 btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                draggable="true"
+                title="Réorganiser"
+                @dragstart="onProductDragStart(index, $event)"
+                @dragend="onProductDragEnd"
+              >
+                <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+              </button>
+              <div class="flex items-start justify-between gap-2">
+                <div class="flex-1 space-y-3">
+                  <div class="form-control">
+                    <label class="label py-1"><span class="label-text text-xs">Famille de produit</span></label>
+                    <select
+                      v-model="product.typeProductId"
+                      class="select select-bordered select-xs"
+                      @change="handleProductTypeSelect(product)"
+                    >
+                      <option value="">
+                        Sélectionner une famille
+                      </option>
+                      <option
+                        v-for="type in productTypes"
+                        :key="type.id"
+                        :value="type.id"
+                      >
+                        {{ formatProductTypeOption(type) }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <button type="button" class="btn btn-error btn-xs btn-square" @click="removeProduct(index)">
+                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
+        </section>
+
+        <section v-if="isRoot" class="space-y-3">
+          <h4 :class="headingClass">
+            {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
+          </h4>
+          <p v-if="!(node.pieces?.length)" class="text-xs text-base-content/50">
+            Aucune pièce définie.
+          </p>
+          <div v-else class="space-y-2">
+            <div
+              v-for="(piece, index) in node.pieces"
+              :key="`piece-${index}`"
+              class="relative border border-base-200 rounded-md p-3 pl-10 space-y-3 transition-colors"
+              :class="pieceReorderClass(index)"
+              @dragenter="onPieceDragEnter(index)"
+              @dragover="onPieceDragOver"
+              @drop="onPieceDrop(index)"
+            >
+              <button
+                type="button"
+                class="absolute left-2 top-3 btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                draggable="true"
+                title="Réorganiser"
+                @dragstart="onPieceDragStart(index, $event)"
+                @dragend="onPieceDragEnd"
+              >
+                <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+              </button>
+              <div class="flex items-start justify-between gap-2">
+                <div class="flex-1 space-y-3">
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Famille de pièce</span></label>
+                    <div>
+                      <select
+                        v-model="piece.typePieceId"
+                        class="select select-bordered select-xs"
+                        @change="handlePieceTypeSelect(piece)"
+                      >
+                        <option value="">
+                          Sélectionner une famille
+                        </option>
+                        <option
+                          v-for="type in pieceTypes"
+                          :key="type.id"
+                          :value="type.id"
+                        >
+                          {{ formatPieceTypeOption(type) }}
+                        </option>
+                      </select>
+                    </div>
+                    <p class="mt-1 text-[11px] text-base-content/50">
+                      {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+                    </p>
+                  </div>
+                  <!-- Quantity is set per-component on the component edit page -->
+                </div>
+                <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
+                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
+        </section>
+
+        <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
+          <h4 :class="headingClass">Sous-composants</h4>
+          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-base-content/50">
+            Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
+          </p>
+          <p v-if="!hasSubcomponents" class="text-xs text-base-content/50">
+            Aucun sous-composant défini.
+          </p>
+          <div v-else class="space-y-3">
+            <div
+              v-for="(subComponent, index) in node.subcomponents"
+              :key="`sub-${index}`"
+              class="relative pl-8 transition-shadow rounded-lg"
+              :class="subcomponentReorderClass(index)"
+              @dragenter="onSubcomponentDragEnter(index)"
+              @dragover="onSubcomponentDragOver"
+              @drop="onSubcomponentDrop(index)"
+            >
+              <button
+                type="button"
+                class="absolute left-0 top-4 btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                draggable="true"
+                title="Réorganiser"
+                @dragstart="onSubcomponentDragStart(index, $event)"
+                @dragend="onSubcomponentDragEnd"
+              >
+                <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+              </button>
+              <StructureNodeEditor
+                :node="subComponent"
+                :depth="depth + 1"
+                :component-types="componentTypes"
+                :piece-types="pieceTypes"
+                :product-types="productTypes"
+                :allow-subcomponents="childAllowSubcomponents"
+                :max-subcomponent-depth="maxSubcomponentDepth"
+                @remove="removeSubComponent(index)"
+              />
+            </div>
+          </div>
+          <button
+            v-if="canManageSubcomponents"
+            type="button"
+            class="btn btn-outline btn-xs"
+            @click="addSubComponent"
+          >
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+import type { EditableStructureNode, ModelTypeOption } from '~/composables/useStructureNodeLogic'
+
+defineOptions({ name: 'StructureNodeEditor' })
+
+const props = withDefaults(defineProps<{
+  node: EditableStructureNode
+  depth?: number
+  componentTypes?: ModelTypeOption[]
+  pieceTypes?: ModelTypeOption[]
+  productTypes?: ModelTypeOption[]
+  isRoot?: boolean
+  lockType?: boolean
+  lockedTypeLabel?: string
+  allowSubcomponents?: boolean
+  maxSubcomponentDepth?: number
+  isLocked?: boolean
+}>(), {
+  depth: 0,
+  componentTypes: () => [],
+  pieceTypes: () => [],
+  productTypes: () => [],
+  isRoot: false,
+  lockType: false,
+  lockedTypeLabel: '',
+  allowSubcomponents: true,
+  maxSubcomponentDepth: Infinity,
+  isLocked: false,
+})
+
+const emit = defineEmits(['remove'])
+
+const {
+  isLocked,
+  componentTypes,
+  pieceTypes,
+  productTypes,
+  canManageSubcomponents,
+  childAllowSubcomponents,
+  hasSubcomponents,
+  containerClass,
+  headingClass,
+  lockedTypeDisplay,
+  getComponentTypeLabel,
+  getPieceTypeLabel,
+  formatComponentTypeOption,
+  formatPieceTypeOption,
+  formatProductTypeOption,
+  handleComponentTypeSelect,
+  handlePieceTypeSelect,
+  handleProductTypeSelect,
+  addCustomField,
+  removeCustomField,
+  addPiece,
+  removePiece,
+  addProduct,
+  removeProduct,
+  addSubComponent,
+  removeSubComponent,
+  onCustomFieldDragStart,
+  onCustomFieldDragEnter,
+  onCustomFieldDrop,
+  onCustomFieldDragEnd,
+  customFieldReorderClass,
+  onPieceDragStart,
+  onPieceDragEnter,
+  onPieceDragOver,
+  onPieceDrop,
+  onPieceDragEnd,
+  pieceReorderClass,
+  onProductDragStart,
+  onProductDragEnter,
+  onProductDragOver,
+  onProductDrop,
+  onProductDragEnd,
+  productReorderClass,
+  onSubcomponentDragStart,
+  onSubcomponentDragEnter,
+  onSubcomponentDragOver,
+  onSubcomponentDrop,
+  onSubcomponentDragEnd,
+  subcomponentReorderClass,
+} = useStructureNodeLogic(props)
+</script>
diff --git a/frontend/app/components/SyncConfirmationModal.vue b/frontend/app/components/SyncConfirmationModal.vue
new file mode 100644
index 0000000..96614af
--- /dev/null
+++ b/frontend/app/components/SyncConfirmationModal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { SyncPreviewResult } from '~/services/modelTypes';
+
+const props = defineProps<{
+  preview: SyncPreviewResult | null;
+  open: boolean;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+const dialogRef = ref<HTMLDialogElement>();
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    dialogRef.value?.showModal();
+  }
+  else {
+    dialogRef.value?.close();
+  }
+});
+
+const hasDeletions = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.deletions).some(v => v > 0);
+});
+
+const hasModifications = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.modifications).some(v => v > 0);
+});
+
+const totalAdditions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.additions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalDeletions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.deletions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalModifications = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.modifications).reduce((sum, v) => sum + v, 0);
+});
+
+function handleCancel() {
+  emit('cancel');
+}
+
+function handleConfirm() {
+  emit('confirm');
+}
+</script>
+
+<template>
+  <dialog ref="dialogRef" class="modal" @close="handleCancel">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">
+        Synchronisation des éléments liés
+      </h3>
+
+      <div v-if="preview" class="py-4 space-y-3">
+        <p>
+          Cette modification impactera
+          <strong>{{ preview.itemCount }}</strong>
+          élément(s) lié(s).
+        </p>
+
+        <ul class="list-disc list-inside space-y-1">
+          <li v-if="totalAdditions > 0" class="text-success">
+            {{ totalAdditions }} ajout(s)
+          </li>
+          <li v-if="totalDeletions > 0" class="text-error">
+            {{ totalDeletions }} suppression(s)
+          </li>
+          <li v-if="totalModifications > 0" class="text-warning">
+            {{ totalModifications }} modification(s)
+          </li>
+        </ul>
+
+        <div v-if="hasDeletions" role="alert" class="alert alert-warning">
+          <span>Des éléments seront supprimés. Cette action est irréversible.</span>
+        </div>
+
+        <div v-if="hasModifications" role="alert" class="alert alert-info">
+          <span>Des valeurs de champs personnalisés seront réinitialisées.</span>
+        </div>
+      </div>
+
+      <div class="modal-action">
+        <button class="btn btn-ghost" :disabled="loading" @click="handleCancel">
+          Annuler
+        </button>
+        <button class="btn btn-primary" :disabled="loading" @click="handleConfirm">
+          <span v-if="loading" class="loading loading-spinner loading-sm" />
+          Confirmer la synchronisation
+        </button>
+      </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button @click="handleCancel">
+        close
+      </button>
+    </form>
+  </dialog>
+</template>
diff --git a/frontend/app/components/ToastContainer.vue b/frontend/app/components/ToastContainer.vue
new file mode 100644
index 0000000..cfa6837
--- /dev/null
+++ b/frontend/app/components/ToastContainer.vue
@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="toast-container pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col gap-2 items-end"
+  >
+    <TransitionGroup name="toast">
+      <div
+        v-for="toast in toasts"
+        :key="toast.id"
+        class="toast-item"
+        :class="[
+          'transform transition-all duration-300 ease-in-out',
+          toast.visible ? 'translate-y-0 opacity-100 pointer-events-auto' : 'translate-y-4 opacity-0 pointer-events-none'
+        ]"
+      >
+        <div
+          class="alert toast-card shadow-md px-3 py-2 text-sm"
+          :class="getToastClasses(toast.type)"
+        >
+          <div class="flex items-center gap-2">
+            <!-- Icon -->
+            <div class="flex-shrink-0">
+              <IconLucideCheck
+                v-if="toast.type === 'success'"
+                class="w-4 h-4"
+                aria-hidden="true"
+              />
+              <IconLucideCircleX
+                v-else-if="toast.type === 'error'"
+                class="w-4 h-4"
+                aria-hidden="true"
+              />
+              <IconLucideAlertTriangle
+                v-else-if="toast.type === 'warning'"
+                class="w-4 h-4"
+                aria-hidden="true"
+              />
+              <IconLucideInfo
+                v-else
+                class="w-4 h-4"
+                aria-hidden="true"
+              />
+            </div>
+
+            <!-- Message -->
+            <div class="flex-1">
+              <span class="font-medium">{{ toast.message }}</span>
+            </div>
+
+            <!-- Close button -->
+            <button
+              class="btn btn-ghost btn-2xs"
+              @click="removeToast(toast.id)"
+            >
+              <IconLucideX class="w-3 h-3" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup>
+import { useToast } from '~/composables/useToast'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideX from '~icons/lucide/x'
+import IconLucideCircleX from '~icons/lucide/circle-x'
+import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
+import IconLucideInfo from '~icons/lucide/info'
+
+const { toasts, removeToast } = useToast()
+
+const getToastClasses = (type) => {
+  switch (type) {
+    case 'success':
+      return 'alert-success text-success-content'
+    case 'error':
+      return 'alert-error text-error-content'
+    case 'warning':
+      return 'alert-warning text-warning-content'
+    case 'info':
+      return 'alert-info text-info-content'
+    default:
+      return 'alert-info'
+  }
+}
+</script>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateY(16px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateY(16px);
+}
+
+.toast-move {
+  transition: transform 0.3s ease;
+}
+
+.toast-card {
+  max-width: 20rem;
+  pointer-events: auto;
+  border-radius: 0.75rem;
+}
+</style>
diff --git a/frontend/app/components/common/ConfirmModal.vue b/frontend/app/components/common/ConfirmModal.vue
new file mode 100644
index 0000000..4702bda
--- /dev/null
+++ b/frontend/app/components/common/ConfirmModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="confirmState.open"
+      class="fixed inset-0 z-[1200] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      @click.self="handleCancel"
+    >
+      <div class="bg-base-100 rounded-box shadow-xl w-full max-w-md mx-4 p-6 space-y-4">
+        <h3 class="font-bold text-lg">
+          {{ confirmState.title }}
+        </h3>
+
+        <p class="whitespace-pre-line text-base-content/80">
+          {{ confirmState.message }}
+        </p>
+
+        <div class="flex justify-end gap-2 pt-2">
+          <button
+            class="btn btn-ghost btn-sm"
+            @click="handleCancel"
+          >
+            {{ confirmState.cancelText }}
+          </button>
+          <button
+            class="btn btn-sm"
+            :class="confirmState.dangerous ? 'btn-error' : 'btn-primary'"
+            @click="handleConfirm"
+          >
+            {{ confirmState.confirmText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from '~/composables/useConfirm'
+
+const { confirmState, handleConfirm, handleCancel } = useConfirm()
+</script>
diff --git a/frontend/app/components/common/CustomFieldDisplay.vue b/frontend/app/components/common/CustomFieldDisplay.vue
new file mode 100644
index 0000000..30e04c7
--- /dev/null
+++ b/frontend/app/components/common/CustomFieldDisplay.vue
@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-if="fields.length"
+    class="mt-4 pt-4 border-t border-base-200"
+  >
+    <h5 class="text-sm font-medium text-base-content/80 mb-3">
+      Champs personnalisés
+    </h5>
+    <div :class="layoutClass">
+      <div
+        v-for="(field, index) in fields"
+        :key="resolveFieldKey(field, index)"
+        class="form-control"
+      >
+        <label class="label">
+          <span class="label-text text-sm">{{
+            resolveFieldName(field)
+          }}</span>
+          <span
+            v-if="resolveFieldRequired(field)"
+            class="label-text-alt text-error"
+          >*</span>
+        </label>
+
+        <!-- Mode édition -->
+        <template v-if="isEditMode && !resolveFieldReadOnly(field)">
+          <!-- Champ de type TEXT -->
+          <input
+            v-if="resolveFieldType(field) === 'text'"
+            :value="field.value ?? ''"
+            type="text"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type NUMBER -->
+          <input
+            v-else-if="resolveFieldType(field) === 'number'"
+            :value="field.value ?? ''"
+            type="number"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type SELECT -->
+          <select
+            v-else-if="resolveFieldType(field) === 'select'"
+            :value="field.value ?? ''"
+            class="select select-bordered select-sm"
+            :required="resolveFieldRequired(field)"
+            @change="onInput(field, ($event.target as HTMLSelectElement).value)"
+            @blur="onBlur(field)"
+          >
+            <option value="">
+              Sélectionner...
+            </option>
+            <option
+              v-for="option in resolveFieldOptions(field)"
+              :key="option"
+              :value="option"
+            >
+              {{ option }}
+            </option>
+          </select>
+
+          <!-- Champ de type BOOLEAN -->
+          <div
+            v-else-if="resolveFieldType(field) === 'boolean'"
+            class="flex items-center gap-2"
+          >
+            <input
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              :checked="String(field.value).toLowerCase() === 'true'"
+              @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+            >
+            <span class="text-sm">{{
+              String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
+            }}</span>
+          </div>
+
+          <!-- Champ de type DATE -->
+          <input
+            v-else-if="resolveFieldType(field) === 'date'"
+            :value="field.value ?? ''"
+            type="date"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+
+          <!-- Champ de type TEXTAREA -->
+          <textarea
+            v-else-if="resolveFieldType(field) === 'textarea'"
+            :value="field.value ?? ''"
+            class="textarea textarea-bordered textarea-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLTextAreaElement).value)"
+            @blur="onBlur(field)"
+          />
+
+          <!-- Fallback: input text -->
+          <input
+            v-else
+            :value="field.value ?? ''"
+            type="text"
+            class="input input-bordered input-sm"
+            :required="resolveFieldRequired(field)"
+            @input="onInput(field, ($event.target as HTMLInputElement).value)"
+            @blur="onBlur(field)"
+          >
+        </template>
+
+        <!-- Mode lecture seule -->
+        <template v-else>
+          <div class="input input-bordered input-sm bg-base-200">
+            {{ formatFieldDisplayValue(field) }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  resolveFieldKey,
+  resolveFieldName,
+  resolveFieldType,
+  resolveFieldOptions,
+  resolveFieldRequired,
+  resolveFieldReadOnly,
+  formatFieldDisplayValue,
+} from '~/shared/utils/entityCustomFieldLogic'
+
+const props = defineProps<{
+  fields: any[]
+  isEditMode: boolean
+  columns?: 1 | 2
+}>()
+
+const emit = defineEmits<{
+  'field-input': [field: any, value: string]
+  'field-blur': [field: any]
+}>()
+
+const layoutClass = computed(() =>
+  props.columns === 2
+    ? 'grid grid-cols-1 md:grid-cols-2 gap-4'
+    : 'space-y-3',
+)
+
+function onInput(field: any, value: string) {
+  field.value = value
+  emit('field-input', field, value)
+}
+
+function onBooleanChange(field: any, checked: boolean) {
+  const value = checked ? 'true' : 'false'
+  field.value = value
+  emit('field-input', field, value)
+  emit('field-blur', field)
+}
+
+function onBlur(field: any) {
+  emit('field-blur', field)
+}
+</script>
diff --git a/frontend/app/components/common/CustomFieldInputGrid.vue b/frontend/app/components/common/CustomFieldInputGrid.vue
new file mode 100644
index 0000000..70c048f
--- /dev/null
+++ b/frontend/app/components/common/CustomFieldInputGrid.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div
+      v-for="(field, index) in fields"
+      :key="fieldKey(field, index)"
+      class="form-control"
+    >
+      <label class="label">
+        <span class="label-text">{{ field.name }}</span>
+        <span v-if="field.required" class="label-text-alt text-error">*</span>
+      </label>
+      <input
+        v-if="field.type === 'text'"
+        v-model="field.value"
+        type="text"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <input
+        v-else-if="field.type === 'number'"
+        v-model="field.value"
+        type="number"
+        step="0.01"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <select
+        v-else-if="field.type === 'select'"
+        v-model="field.value"
+        class="select select-bordered select-sm md:select-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+        <option value="">Sélectionner...</option>
+        <option
+          v-for="option in field.options"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}
+        </option>
+      </select>
+      <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
+        <input
+          v-model="field.value"
+          type="checkbox"
+          class="toggle toggle-primary toggle-sm md:toggle-md"
+          true-value="true"
+          false-value="false"
+          :disabled="disabled"
+        >
+        <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+      </label>
+      <input
+        v-else-if="field.type === 'date'"
+        v-model="field.value"
+        type="date"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+      <input
+        v-else
+        v-model="field.value"
+        type="text"
+        class="input input-bordered input-sm md:input-md"
+        :required="field.required"
+        :disabled="disabled"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fieldKey, type CustomFieldInput } from '~/shared/utils/customFieldFormUtils'
+
+defineProps<{
+  fields: CustomFieldInput[]
+  disabled?: boolean
+}>()
+</script>
diff --git a/frontend/app/components/common/DataTable.vue b/frontend/app/components/common/DataTable.vue
new file mode 100644
index 0000000..90384ae
--- /dev/null
+++ b/frontend/app/components/common/DataTable.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="space-y-4">
+    <!-- Toolbar + counter row -->
+    <div
+      v-if="$slots.toolbar || showCounter || showPerPage"
+      class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between"
+    >
+      <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+        <slot name="toolbar" />
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div v-if="showPerPage && pagination?.perPageOptions?.length" class="flex items-center gap-2">
+          <label
+            class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+            for="dt-per-page"
+          >
+            Par page
+          </label>
+          <select
+            id="dt-per-page"
+            :value="pagination.perPage"
+            class="select select-bordered select-sm"
+            @change="emit('update:perPage', Number(($event.target as HTMLSelectElement).value))"
+          >
+            <option v-for="opt in pagination.perPageOptions" :key="opt" :value="opt">
+              {{ opt }}
+            </option>
+          </select>
+        </div>
+
+        <p v-if="showCounter && pagination" class="text-xs text-base-content/50 whitespace-nowrap">
+          {{ pagination.pageItems }} / {{ pagination.totalItems }}
+          résultat{{ pagination.totalItems > 1 ? 's' : '' }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Loading state (full spinner only when no filterable columns to keep visible) -->
+    <div v-if="loading && !hasFilterableColumns" class="flex justify-center py-8">
+      <slot name="loading">
+        <span class="loading loading-spinner" aria-hidden="true" />
+      </slot>
+    </div>
+
+    <!-- Empty state (no data at all, no filterable columns to keep visible) -->
+    <template v-else-if="isEmpty && !hasFilterableColumns">
+      <slot name="empty">
+        <p class="text-sm text-base-content/70 py-8 text-center">
+          {{ emptyMessage }}
+        </p>
+      </slot>
+    </template>
+
+    <!-- No results without filterable columns -->
+    <template v-else-if="rows.length === 0 && !hasFilterableColumns">
+      <slot name="no-results">
+        <p class="text-sm text-base-content/70 py-8 text-center">
+          {{ noResultsMessage }}
+        </p>
+      </slot>
+    </template>
+
+    <!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
+    <template v-else>
+      <div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
+        <!-- Loading overlay (keeps table & filter inputs visible) -->
+        <div
+          v-if="loading && hasFilterableColumns"
+          class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
+        >
+          <span class="loading loading-spinner text-primary" aria-hidden="true" />
+        </div>
+        <table :class="['table table-sm md:table-md', tableClass]">
+          <thead>
+            <!-- Header labels + sort -->
+            <tr>
+              <th
+                v-for="col in columns"
+                :key="col.key"
+                :class="[
+                  col.width,
+                  col.class,
+                  col.headerClass,
+                  alignClass(col),
+                  { 'hidden sm:table-cell': col.hiddenMobile },
+                ]"
+              >
+                <slot :name="`header-${col.key}`" :column="col">
+                  <span
+                    :class="[
+                      'inline-flex items-center gap-1',
+                      col.sortable ? 'cursor-pointer select-none hover:text-base-content' : '',
+                    ]"
+                    @click="col.sortable && handleHeaderSort(col)"
+                  >
+                    {{ col.label }}
+                    <template v-if="col.sortable">
+                      <IconLucideChevronUp
+                        v-if="isSortedAsc(col)"
+                        class="h-3.5 w-3.5"
+                        aria-label="Trié croissant"
+                      />
+                      <IconLucideChevronDown
+                        v-else-if="isSortedDesc(col)"
+                        class="h-3.5 w-3.5"
+                        aria-label="Trié décroissant"
+                      />
+                      <IconLucideChevronsUpDown
+                        v-else
+                        class="h-3.5 w-3.5 opacity-30"
+                        aria-label="Triable"
+                      />
+                    </template>
+                  </span>
+                </slot>
+              </th>
+              <th v-if="expandable" class="w-12" />
+            </tr>
+            <!-- Filter inputs row -->
+            <tr v-if="hasFilterableColumns">
+              <th
+                v-for="col in columns"
+                :key="`filter-${col.key}`"
+                class="p-1"
+                :class="{ 'hidden sm:table-cell': col.hiddenMobile }"
+              >
+                <input
+                  v-if="col.filterable"
+                  type="text"
+                  class="input input-bordered input-xs w-full"
+                  :placeholder="col.filterPlaceholder || 'Filtrer…'"
+                  :value="columnFilters[col.key] ?? ''"
+                  @input="handleFilterInput(col.key, ($event.target as HTMLInputElement).value)"
+                />
+              </th>
+              <th v-if="expandable" />
+            </tr>
+          </thead>
+          <tbody>
+            <!-- No results message (inside table to keep headers visible) -->
+            <tr v-if="rows.length === 0">
+              <td :colspan="expandable ? columns.length + 1 : columns.length" class="text-center py-8">
+                <p class="text-sm text-base-content/70">
+                  {{ isEmpty ? emptyMessage : noResultsMessage }}
+                </p>
+              </td>
+            </tr>
+            <template v-for="(row, idx) in rows" :key="getRowKey(row)">
+              <tr>
+                <td
+                  v-for="col in columns"
+                  :key="col.key"
+                  :class="[
+                    col.class,
+                    alignClass(col),
+                    { 'hidden sm:table-cell': col.hiddenMobile },
+                  ]"
+                >
+                  <slot :name="`cell-${col.key}`" :row="row" :column="col" :index="idx">
+                    {{ row[col.key] ?? '—' }}
+                  </slot>
+                </td>
+                <td v-if="expandable" class="text-center">
+                  <button
+                    v-if="!canExpand || canExpand(row)"
+                    type="button"
+                    class="btn btn-ghost btn-xs"
+                    @click="emit('toggle-expand', getRowKey(row))"
+                  >
+                    {{ isExpanded(row) ? 'Masquer' : 'Voir' }}
+                  </button>
+                  <span v-else class="text-xs text-base-content/50">—</span>
+                </td>
+              </tr>
+              <!-- Expanded row -->
+              <tr v-if="expandable && isExpanded(row)">
+                <td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
+                  <slot name="row-expanded" :row="row" :index="idx" />
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <Pagination
+        v-if="pagination && pagination.totalPages > 1"
+        :current-page="pagination.currentPage"
+        :total-pages="pagination.totalPages"
+        @update:current-page="emit('update:currentPage', $event)"
+      />
+    </template>
+
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DataTableColumn, DataTableSort, DataTablePagination, DataTableColumnFilters } from '~/shared/types/dataTable'
+import Pagination from '~/components/common/Pagination.vue'
+import IconLucideChevronUp from '~icons/lucide/chevron-up'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
+import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
+
+const props = withDefaults(defineProps<{
+  columns: DataTableColumn[]
+  rows: any[]
+  rowKey?: string
+  loading?: boolean
+  sort?: DataTableSort | null
+  pagination?: DataTablePagination | null
+  columnFilters?: DataTableColumnFilters
+  emptyMessage?: string
+  noResultsMessage?: string
+  expandable?: boolean
+  expandedKeys?: Set<string>
+  canExpand?: (row: any) => boolean
+  tableClass?: string
+  showCounter?: boolean
+  showPerPage?: boolean
+}>(), {
+  rowKey: 'id',
+  loading: false,
+  sort: null,
+  pagination: null,
+  columnFilters: () => ({}),
+  emptyMessage: 'Aucune donnée disponible.',
+  noResultsMessage: 'Aucun résultat ne correspond à vos critères.',
+  expandable: false,
+  expandedKeys: () => new Set<string>(),
+  canExpand: undefined,
+  tableClass: '',
+  showCounter: true,
+  showPerPage: false,
+})
+
+const emit = defineEmits<{
+  (e: 'sort', sort: DataTableSort): void
+  (e: 'update:currentPage', page: number): void
+  (e: 'update:perPage', perPage: number): void
+  (e: 'update:columnFilters', filters: DataTableColumnFilters): void
+  (e: 'toggle-expand', key: string): void
+}>()
+
+const hasFilterableColumns = computed(() =>
+  props.columns.some(col => col.filterable),
+)
+
+const isEmpty = computed(() => {
+  if (props.pagination) {
+    return props.pagination.totalItems === 0
+  }
+  return props.rows.length === 0
+})
+
+const getRowKey = (row: any): string => {
+  return String(row[props.rowKey] ?? '')
+}
+
+const isExpanded = (row: any): boolean => {
+  return props.expandedKeys?.has(getRowKey(row)) ?? false
+}
+
+const sortKeyForColumn = (col: DataTableColumn): string => {
+  return col.sortKey ?? col.key
+}
+
+const isSortedAsc = (col: DataTableColumn): boolean => {
+  return props.sort?.field === sortKeyForColumn(col) && props.sort?.direction === 'asc'
+}
+
+const isSortedDesc = (col: DataTableColumn): boolean => {
+  return props.sort?.field === sortKeyForColumn(col) && props.sort?.direction === 'desc'
+}
+
+const handleHeaderSort = (col: DataTableColumn) => {
+  const key = sortKeyForColumn(col)
+  const currentDirection = props.sort?.field === key ? props.sort.direction : null
+
+  emit('sort', {
+    field: key,
+    direction: currentDirection === 'asc' ? 'desc' : 'asc',
+  })
+}
+
+let filterDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
+const handleFilterInput = (key: string, value: string) => {
+  if (filterDebounceTimer) clearTimeout(filterDebounceTimer)
+  filterDebounceTimer = setTimeout(() => {
+    const updated = { ...props.columnFilters, [key]: value }
+    // Remove empty filter keys
+    for (const k of Object.keys(updated)) {
+      if (!updated[k]) delete updated[k]
+    }
+    emit('update:columnFilters', updated)
+  }, 300)
+}
+
+const alignClass = (col: DataTableColumn): string => {
+  if (col.align === 'center') return 'text-center'
+  if (col.align === 'right') return 'text-right'
+  return ''
+}
+</script>
diff --git a/frontend/app/components/common/DocumentListInline.vue b/frontend/app/components/common/DocumentListInline.vue
new file mode 100644
index 0000000..df6306c
--- /dev/null
+++ b/frontend/app/components/common/DocumentListInline.vue
@@ -0,0 +1,118 @@
+<template>
+  <div v-if="documents.length" class="space-y-2">
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3 text-sm">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+          :class="documentThumbnailClass(document)"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-6 w-6"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium flex items-center gap-2">
+            {{ document.name }}
+            <span class="badge badge-sm badge-outline">{{ getDocumentTypeLabel(document.type || 'documentation') }}</span>
+          </div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          v-if="canEdit"
+          type="button"
+          class="btn btn-ghost btn-xs"
+          title="Modifier"
+          @click="$emit('edit', document)"
+        >
+          Modifier
+        </button>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          @click="downloadDocument(document)"
+        >
+          Télécharger
+        </button>
+        <button
+          v-if="canDelete"
+          type="button"
+          class="btn btn-error btn-xs"
+          :disabled="deleteDisabled"
+          @click="$emit('delete', document.id)"
+        >
+          Supprimer
+        </button>
+      </div>
+    </div>
+  </div>
+  <p v-else class="text-xs text-base-content/70">
+    {{ emptyText }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { getDocumentTypeLabel } from '~/shared/documentTypes'
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  documentIcon,
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentThumbnailClass,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+import type { Document } from '~/composables/useDocuments'
+
+withDefaults(defineProps<{
+  documents: Document[]
+  canDelete?: boolean
+  canEdit?: boolean
+  deleteDisabled?: boolean
+  emptyText?: string
+}>(), {
+  canDelete: false,
+  canEdit: false,
+  deleteDisabled: false,
+  emptyText: 'Aucun document.',
+})
+
+defineEmits<{
+  (e: 'preview', document: Document): void
+  (e: 'delete', documentId: string): void
+  (e: 'edit', document: Document): void
+}>()
+</script>
diff --git a/frontend/app/components/common/EntityHistorySection.vue b/frontend/app/components/common/EntityHistorySection.vue
new file mode 100644
index 0000000..d874353
--- /dev/null
+++ b/frontend/app/components/common/EntityHistorySection.vue
@@ -0,0 +1,97 @@
+<template>
+  <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <header class="flex items-center justify-between gap-3">
+      <div>
+        <h2 class="font-semibold text-base-content">Historique</h2>
+        <p class="text-xs text-base-content/70">
+          Qui a changé quoi, et quand.
+        </p>
+      </div>
+      <span v-if="entries.length" class="badge badge-outline">
+        {{ entries.length }} entrée{{ entries.length > 1 ? 's' : '' }}
+      </span>
+    </header>
+
+    <div v-if="loading" class="flex items-center gap-2 text-sm text-base-content/70">
+      <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+      Chargement de l'historique…
+    </div>
+
+    <div v-else-if="error" class="alert alert-warning">
+      <span>{{ error }}</span>
+    </div>
+
+    <p v-else-if="entries.length === 0" class="text-xs text-base-content/70">
+      Aucun changement enregistré pour le moment.
+    </p>
+
+    <ul v-else class="max-h-80 space-y-2 overflow-y-auto pr-1">
+      <li
+        v-for="entry in entries"
+        :key="entry.id"
+        class="rounded-md border border-base-200 bg-base-100 px-3 py-2"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-base-content/70">
+          <span class="font-medium text-base-content">
+            {{ historyActionLabel(entry.action) }}
+          </span>
+          <span>{{ formatHistoryDate(entry.createdAt) }}</span>
+        </div>
+        <p class="mt-1 text-xs text-base-content/60">
+          Par {{ entry.actor?.label || 'Inconnu' }}
+        </p>
+
+        <ul
+          v-if="diffEntries(entry).length"
+          class="mt-2 space-y-1 text-xs"
+        >
+          <li
+            v-for="diffEntry in diffEntries(entry)"
+            :key="`${entry.id}-${diffEntry.field}`"
+            class="flex flex-col gap-0.5"
+          >
+            <span class="font-medium text-base-content/80">{{ diffEntry.label }}</span>
+            <span class="text-base-content/60">
+              {{ diffEntry.fromLabel }} → {{ diffEntry.toLabel }}
+            </span>
+          </li>
+        </ul>
+
+        <p
+          v-else-if="entry.snapshot?.name"
+          class="mt-2 text-xs text-base-content/70"
+        >
+          {{ entry.snapshot.name }}
+        </p>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  historyActionLabel,
+  formatHistoryDate,
+  historyDiffEntries,
+  type HistoryDiffEntry,
+} from '~/shared/utils/historyDisplayUtils'
+
+interface HistoryEntry {
+  id: string
+  action: string
+  createdAt: string
+  actor?: { label?: string } | null
+  diff?: Record<string, { from?: unknown; to?: unknown }> | null
+  snapshot?: { name?: string } | null
+}
+
+const props = defineProps<{
+  entries: HistoryEntry[]
+  loading?: boolean
+  error?: string | null
+  fieldLabels: Record<string, string>
+}>()
+
+const diffEntries = (entry: HistoryEntry): HistoryDiffEntry[] =>
+  historyDiffEntries(entry, props.fieldLabels)
+</script>
diff --git a/frontend/app/components/common/EntityVersionList.vue b/frontend/app/components/common/EntityVersionList.vue
new file mode 100644
index 0000000..9d35218
--- /dev/null
+++ b/frontend/app/components/common/EntityVersionList.vue
@@ -0,0 +1,170 @@
+<template>
+  <section class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <header class="flex items-center justify-between gap-3">
+      <div>
+        <h2 class="font-semibold text-base-content">Versions</h2>
+        <p class="text-xs text-base-content/70">
+          Historique des versions avec possibilite de restauration.
+        </p>
+      </div>
+      <span v-if="versions.length" class="badge badge-outline">
+        {{ versions.length }} version{{ versions.length > 1 ? 's' : '' }}
+      </span>
+    </header>
+
+    <div v-if="loading" class="flex items-center gap-2 text-sm text-base-content/70">
+      <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+      Chargement des versions...
+    </div>
+
+    <div v-else-if="error" class="alert alert-warning">
+      <span>{{ error }}</span>
+    </div>
+
+    <p v-else-if="versions.length === 0" class="text-xs text-base-content/70">
+      Aucune version enregistree.
+    </p>
+
+    <ul v-else class="max-h-96 space-y-2 overflow-y-auto pr-1">
+      <li
+        v-for="entry in versions"
+        :key="entry.version"
+        class="flex items-center justify-between rounded-md border border-base-200 bg-base-100 px-3 py-2"
+      >
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2">
+            <span class="font-mono text-sm font-semibold">v{{ entry.version }}</span>
+            <span
+              v-if="entry.version === currentVersion"
+              class="badge badge-primary badge-sm"
+            >
+              actuelle
+            </span>
+            <span
+              v-if="entry.action === 'restore'"
+              class="badge badge-warning badge-sm"
+            >
+              restauration
+            </span>
+          </div>
+          <div class="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-base-content/60">
+            <span>{{ actionLabel(entry.action) }}</span>
+            <span>&middot;</span>
+            <span>{{ formatDate(entry.createdAt) }}</span>
+            <span v-if="entry.actor">&middot; {{ entry.actor.label }}</span>
+          </div>
+          <div v-if="entry.diff && Object.keys(entry.diff).length" class="mt-1 flex flex-wrap gap-1">
+            <span
+              v-for="(change, field) in entry.diff"
+              :key="field"
+              class="badge badge-ghost badge-xs"
+            >
+              {{ formatDiffEntry(String(field), change) }}
+            </span>
+          </div>
+        </div>
+        <button
+          v-if="canRestore && entry.version !== currentVersion"
+          class="btn btn-ghost btn-xs"
+          :disabled="restoring"
+          @click="handleRestore(entry.version)"
+        >
+          Restaurer
+        </button>
+      </li>
+    </ul>
+
+    <VersionRestoreModal
+      :visible="modalVisible"
+      :preview="previewData"
+      :restoring="restoring"
+      :field-labels="fieldLabels"
+      :entity-type="entityType"
+      @close="modalVisible = false"
+      @confirm="confirmRestore"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, toRef } from 'vue'
+import { useEntityVersions, type RestorePreview } from '~/composables/useEntityVersions'
+import { usePermissions } from '~/composables/usePermissions'
+import { formatHistoryDate, historyActionLabel } from '~/shared/utils/historyDisplayUtils'
+import VersionRestoreModal from './VersionRestoreModal.vue'
+
+const props = defineProps<{
+  entityType: 'machine' | 'composant' | 'piece' | 'product'
+  entityId: string
+  fieldLabels: Record<string, string>
+  /** Increment this value to force a refresh of the versions list */
+  refreshKey?: number
+}>()
+
+const emit = defineEmits<{
+  restored: []
+}>()
+
+const { canEdit } = usePermissions()
+const canRestore = computed(() => canEdit.value)
+
+const { versions, loading, error, fetchVersions, fetchPreview, restore } = useEntityVersions({
+  entityType: props.entityType,
+  entityId: props.entityId,
+})
+
+const currentVersion = computed(() => {
+  if (versions.value.length === 0) return null
+  return versions.value[0]?.version ?? null
+})
+
+const modalVisible = ref(false)
+const previewData = ref<RestorePreview | null>(null)
+const restoring = ref(false)
+const targetVersion = ref<number | null>(null)
+
+const actionLabel = (action: string) => historyActionLabel(action)
+const formatDate = (date: string) => formatHistoryDate(date)
+
+const formatDiffEntry = (field: string, change: { from: unknown; to: unknown }): string => {
+  const label = props.fieldLabels[field] || field
+  // Link changes (addedComponent, removedPiece, etc.) have {id, name} as value
+  const val = change.to ?? change.from
+  if (val && typeof val === 'object' && 'name' in (val as Record<string, unknown>)) {
+    return `${label}: ${(val as Record<string, unknown>).name}`
+  }
+  return label
+}
+
+const handleRestore = async (version: number) => {
+  targetVersion.value = version
+  previewData.value = null
+  modalVisible.value = true
+  previewData.value = await fetchPreview(version)
+}
+
+const confirmRestore = async () => {
+  if (!targetVersion.value) return
+  restoring.value = true
+  const result = await restore(targetVersion.value)
+  restoring.value = false
+  if (result?.success) {
+    modalVisible.value = false
+    await fetchVersions()
+    emit('restored')
+  }
+  else {
+    error.value = 'La restauration a echoue.'
+    modalVisible.value = false
+  }
+}
+
+onMounted(() => {
+  fetchVersions()
+})
+
+// Auto-refresh when parent signals a data change
+watch(toRef(props, 'refreshKey'), () => {
+  fetchVersions()
+})
+</script>
diff --git a/frontend/app/components/common/Pagination.vue b/frontend/app/components/common/Pagination.vue
new file mode 100644
index 0000000..ad6c253
--- /dev/null
+++ b/frontend/app/components/common/Pagination.vue
@@ -0,0 +1,128 @@
+<template>
+  <div v-if="totalPages > 1" class="flex items-center justify-center gap-2">
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost"
+      :disabled="currentPage <= 1"
+      @click="goToPage(1)"
+    >
+      <IconLucideChevronFirst class="w-4 h-4" />
+    </button>
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost"
+      :disabled="currentPage <= 1"
+      @click="goToPage(currentPage - 1)"
+    >
+      <IconLucideChevronLeft class="w-4 h-4" />
+    </button>
+
+    <template v-for="page in visiblePages" :key="page">
+      <span v-if="page === 'ellipsis-start' || page === 'ellipsis-end'" class="px-2">...</span>
+      <button
+        v-else
+        type="button"
+        class="btn btn-sm"
+        :class="page === currentPage ? 'btn-primary' : 'btn-ghost'"
+        @click="goToPage(page)"
+      >
+        {{ page }}
+      </button>
+    </template>
+
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost"
+      :disabled="currentPage >= totalPages"
+      @click="goToPage(currentPage + 1)"
+    >
+      <IconLucideChevronRight class="w-4 h-4" />
+    </button>
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost"
+      :disabled="currentPage >= totalPages"
+      @click="goToPage(totalPages)"
+    >
+      <IconLucideChevronLast class="w-4 h-4" />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import IconLucideChevronFirst from '~icons/lucide/chevrons-left'
+import IconLucideChevronLeft from '~icons/lucide/chevron-left'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideChevronLast from '~icons/lucide/chevrons-right'
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true
+  },
+  totalPages: {
+    type: Number,
+    required: true
+  },
+  maxVisiblePages: {
+    type: Number,
+    default: 5
+  }
+})
+
+const emit = defineEmits(['update:currentPage'])
+
+const visiblePages = computed(() => {
+  const pages = []
+  const total = props.totalPages
+  const current = props.currentPage
+  const maxVisible = props.maxVisiblePages
+
+  if (total <= maxVisible + 2) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
+
+  // Always show first page
+  pages.push(1)
+
+  const half = Math.floor(maxVisible / 2)
+  let start = Math.max(2, current - half)
+  let end = Math.min(total - 1, current + half)
+
+  // Adjust if near start
+  if (current <= half + 1) {
+    end = maxVisible
+  }
+  // Adjust if near end
+  if (current >= total - half) {
+    start = total - maxVisible + 1
+  }
+
+  if (start > 2) {
+    pages.push('ellipsis-start')
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+
+  if (end < total - 1) {
+    pages.push('ellipsis-end')
+  }
+
+  // Always show last page
+  pages.push(total)
+
+  return pages
+})
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= props.totalPages && page !== props.currentPage) {
+    emit('update:currentPage', page)
+  }
+}
+</script>
diff --git a/frontend/app/components/common/RequirementListEditor.vue b/frontend/app/components/common/RequirementListEditor.vue
new file mode 100644
index 0000000..076a715
--- /dev/null
+++ b/frontend/app/components/common/RequirementListEditor.vue
@@ -0,0 +1,406 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <h3 class="card-title text-lg">{{ labels.headerTitle }}</h3>
+        <button type="button" class="btn btn-primary btn-sm" @click="addRequirement">
+          <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+          {{ labels.addButton }}
+        </button>
+      </div>
+
+      <p class="text-sm text-base-content/50">
+        {{ labels.description }}
+      </p>
+
+      <div v-if="requirements.length === 0" class="text-sm text-base-content/50 bg-base-200/60 rounded-md p-4">
+        {{ labels.emptyState }}
+      </div>
+
+      <div
+        v-for="(requirement, index) in requirements"
+        :key="requirement.id || index"
+        class="relative border border-base-200 rounded-lg p-4 pl-12 space-y-3 transition-colors"
+        :class="requirementReorderClass(index)"
+        @dragenter="onRequirementDragEnter(index)"
+        @dragover="onRequirementDragOver"
+        @drop="onRequirementDrop(index)"
+      >
+        <button
+          type="button"
+          class="absolute left-3 top-4 btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+          draggable="true"
+          title="Réorganiser"
+          @dragstart="onRequirementDragStart(index, $event)"
+          @dragend="onRequirementDragEnd"
+        >
+          <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <div class="flex items-start justify-between gap-3">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 flex-1">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">{{ labels.typeSelectLabel }}</span>
+                <span class="label-text-alt text-error">*</span>
+              </label>
+              <SearchSelect
+                :model-value="normalizeTypeModel(requirement[typeField])"
+                :options="typeOptions"
+                :loading="typeLoading"
+                size="sm"
+                :placeholder="labels.typePlaceholder"
+                :empty-text="typeOptions.length ? 'Aucun résultat' : 'Aucune option disponible'"
+                :option-label="optionLabel"
+                :option-description="optionDescription"
+                @update:modelValue="(value) => updateRequirement(index, { [typeField]: normalizeTypeValue(value) })"
+              />
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">{{ labels.labelFieldLabel }}</span>
+                <span v-if="labels.labelFieldHelper" class="label-text-alt text-xs">{{ labels.labelFieldHelper }}</span>
+              </label>
+              <input
+                :value="requirement.label ?? ''"
+                type="text"
+                class="input input-bordered input-sm"
+                :placeholder="labels.labelPlaceholder"
+                @input="handleLabelInput(index, $event)"
+              />
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">{{ labels.minLabel }}</span>
+              </label>
+              <input
+                :value="requirement.minCount ?? minFallback"
+                type="number"
+                min="0"
+                class="input input-bordered input-sm"
+                @input="handleMinInput(index, $event)"
+              />
+            </div>
+
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">{{ labels.maxLabel }}</span>
+                <span v-if="labels.maxHelper" class="label-text-alt text-xs">{{ labels.maxHelper }}</span>
+              </label>
+              <input
+                :value="requirement.maxCount ?? ''"
+                type="number"
+                min="0"
+                class="input input-bordered input-sm"
+                @input="handleMaxInput(index, $event)"
+              />
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="btn btn-square btn-error btn-sm"
+            @click="removeRequirement(index)"
+          >
+            <IconLucideTrash2 class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-4 text-sm">
+          <label class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              :checked="(requirement.required ?? requiredFallback) === true"
+              @change="handleRequiredChange(index, $event)"
+            />
+            {{ labels.requiredLabel }}
+          </label>
+
+          <label class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              class="checkbox checkbox-sm"
+              :checked="(requirement.allowNewModels ?? allowNewModelsFallback) === true"
+              @change="handleAllowNewModelsChange(index, $event)"
+            />
+            {{ labels.allowNewModelsLabel }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { PropType } from 'vue'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+
+type Option = {
+  id: string | number
+  name: string
+  description?: string | null
+}
+
+type Requirement = Record<string, unknown> & {
+  id?: string | number
+  label?: string
+  minCount?: number | null
+  maxCount?: number | null
+  required?: boolean | null
+  allowNewModels?: boolean | null
+  orderIndex?: number | null
+}
+
+type Labels = {
+  headerTitle: string
+  addButton: string
+  description: string
+  emptyState: string
+  typeSelectLabel: string
+  typePlaceholder: string
+  labelFieldLabel: string
+  labelFieldHelper?: string
+  labelPlaceholder?: string
+  minLabel: string
+  maxLabel: string
+  maxHelper?: string
+  requiredLabel: string
+  allowNewModelsLabel: string
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<Requirement[]>,
+    default: () => [],
+  },
+  typeOptions: {
+    type: Array as PropType<Option[]>,
+    default: () => [],
+  },
+  typeField: {
+    type: String,
+    required: true,
+  },
+  labels: {
+    type: Object as PropType<Labels>,
+    required: true,
+  },
+  defaultRequirement: {
+    type: Function as PropType<() => Requirement>,
+    required: true,
+  },
+  requiredFallback: {
+    type: Boolean,
+    default: false,
+  },
+  allowNewModelsFallback: {
+    type: Boolean,
+    default: true,
+  },
+  minFallback: {
+    type: Number,
+    default: 0,
+  },
+  typeLoading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const requirements = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const optionLabel = (option: Option) => {
+  if (!option) {
+    return ''
+  }
+  return option.name || ''
+}
+
+const optionDescription = (option: Option) => {
+  if (!option) {
+    return ''
+  }
+  if (typeof option.description === 'string' && option.description.trim()) {
+    return option.description.trim()
+  }
+  return ''
+}
+
+const applyOrderIndex = (list: Requirement[]): Requirement[] =>
+  list.map((item, index) => ({
+    ...item,
+    orderIndex: index,
+  }))
+
+const addRequirement = () => {
+  requirements.value = applyOrderIndex([
+    ...requirements.value,
+    props.defaultRequirement(),
+  ])
+}
+
+const removeRequirement = (index: number) => {
+  requirements.value = applyOrderIndex(
+    requirements.value.filter((_, i) => i !== index),
+  )
+}
+
+const updateRequirement = (index: number, patch: Partial<Requirement>) => {
+  requirements.value = applyOrderIndex(
+    requirements.value.map((item, i) =>
+      i === index ? { ...item, ...patch } : item,
+    ),
+  )
+}
+
+const parseNumber = (value: string) => {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+const parseOptionalNumber = (value: string) => {
+  if (value === '' || value === null || value === undefined) {
+    return null
+  }
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+// Type-safe event handlers
+const getInputValue = (event: Event): string => {
+  const target = event.target as HTMLInputElement | null
+  return target?.value ?? ''
+}
+
+const getCheckboxValue = (event: Event): boolean => {
+  const target = event.target as HTMLInputElement | null
+  return target?.checked ?? false
+}
+
+const handleLabelInput = (index: number, event: Event) => {
+  updateRequirement(index, { label: getInputValue(event) })
+}
+
+const handleMinInput = (index: number, event: Event) => {
+  updateRequirement(index, { minCount: parseNumber(getInputValue(event)) })
+}
+
+const handleMaxInput = (index: number, event: Event) => {
+  updateRequirement(index, { maxCount: parseOptionalNumber(getInputValue(event)) })
+}
+
+const handleRequiredChange = (index: number, event: Event) => {
+  updateRequirement(index, { required: getCheckboxValue(event) })
+}
+
+const handleAllowNewModelsChange = (index: number, event: Event) => {
+  updateRequirement(index, { allowNewModels: getCheckboxValue(event) })
+}
+
+const draggingRequirementIndex = ref<number | null>(null)
+const requirementDropTargetIndex = ref<number | null>(null)
+
+const resetRequirementDragState = () => {
+  draggingRequirementIndex.value = null
+  requirementDropTargetIndex.value = null
+}
+
+const reorderRequirements = (from: number, to: number) => {
+  const list = requirements.value
+  if (!Array.isArray(list)) {
+    resetRequirementDragState()
+    return
+  }
+  if (from === to || from < 0 || to < 0 || from >= list.length || to >= list.length) {
+    resetRequirementDragState()
+    return
+  }
+  const updated = list.slice() as Requirement[]
+  const [moved] = updated.splice(from, 1)
+  if (!moved) {
+    resetRequirementDragState()
+    return
+  }
+  updated.splice(to, 0, moved)
+  requirements.value = applyOrderIndex(updated)
+  resetRequirementDragState()
+}
+
+const onRequirementDragStart = (index: number, event: DragEvent) => {
+  draggingRequirementIndex.value = index
+  requirementDropTargetIndex.value = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+const onRequirementDragEnter = (index: number) => {
+  if (draggingRequirementIndex.value === null) {
+    return
+  }
+  requirementDropTargetIndex.value = index
+}
+
+const onRequirementDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const onRequirementDrop = (index: number) => {
+  if (draggingRequirementIndex.value === null) {
+    resetRequirementDragState()
+    return
+  }
+  reorderRequirements(draggingRequirementIndex.value, index)
+}
+
+const onRequirementDragEnd = () => {
+  resetRequirementDragState()
+}
+
+const requirementReorderClass = (index: number) => {
+  if (draggingRequirementIndex.value === index) {
+    return 'border-dashed border-primary'
+  }
+  if (
+    draggingRequirementIndex.value !== null &&
+    requirementDropTargetIndex.value === index &&
+    draggingRequirementIndex.value !== index
+  ) {
+    return 'border-primary border-dashed bg-primary/5'
+  }
+  return ''
+}
+
+const normalizeTypeModel = (value: unknown) => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value
+  }
+  return ''
+}
+
+const normalizeTypeValue = (value: string | number | null | undefined) => {
+  if (value === '' || value === null || value === undefined) {
+    return null
+  }
+  return value
+}
+</script>
+
+<!--
+  Éditeur générique de groupes de contraintes (pièces/composants) pour les types de machine.
+  Paramétrer les libellés et la structure via les props pour réutiliser ce bloc.
+-->
diff --git a/frontend/app/components/common/SearchSelect.vue b/frontend/app/components/common/SearchSelect.vue
new file mode 100644
index 0000000..f18ab98
--- /dev/null
+++ b/frontend/app/components/common/SearchSelect.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="space-y-1 search-select">
+    <label v-if="$slots.label" class="label">
+      <span class="label-text">
+        <slot name="label" />
+      </span>
+    </label>
+    <div class="relative">
+      <input
+        ref="inputRef"
+        v-model="searchTerm"
+        type="text"
+        :placeholder="placeholder"
+        :class="inputClasses"
+        @focus="handleFocus"
+        @keydown.down.prevent="highlightNext"
+        @keydown.up.prevent="highlightPrevious"
+        @keydown.enter.prevent="selectHighlighted"
+        @input="handleInput"
+      >
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="absolute top-1/2 -translate-y-1/2 right-8 btn btn-ghost btn-xs"
+        aria-label="Effacer la sélection"
+        @click.stop="clearSelection"
+      >
+        <IconLucideX class="w-3 h-3" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        :class="toggleButtonClasses"
+        @click="toggleDropdown"
+        aria-label="Afficher les options"
+      >
+        <IconLucideChevronsUpDown class="w-4 h-4" aria-hidden="true" />
+      </button>
+
+      <transition name="fade">
+        <div
+          v-if="openDropdown"
+          class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
+        >
+          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
+            <span class="loading loading-spinner loading-xs" />
+            Recherche en cours…
+          </div>
+          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
+            {{ emptyText }}
+          </div>
+          <ul v-else class="flex flex-col">
+            <li
+              v-for="(option, index) in displayedOptions"
+              :key="resolveValue(option) ?? index"
+            >
+              <button
+                type="button"
+                class="flex w-full flex-col items-start gap-1 px-3 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
+                :class="{
+                  'bg-base-200': isOptionSelected(option),
+                  'bg-base-300/60': highlightedIndex === index
+                }"
+                @mouseenter="highlightedIndex = index"
+                @mouseleave="highlightedIndex = -1"
+                @click="selectOption(option)"
+              >
+                <span class="font-medium text-sm">
+                  <slot name="option-label" :option="option">
+                    {{ resolveLabel(option) }}
+                  </slot>
+                </span>
+                <span v-if="$slots['option-description'] || resolveDescription(option)" class="text-xs text-base-content/50">
+                  <slot name="option-description" :option="option">
+                    {{ resolveDescription(option) }}
+                  </slot>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
+import IconLucideX from '~icons/lucide/x'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  placeholder: {
+    type: String,
+    default: 'Rechercher…'
+  },
+  emptyText: {
+    type: String,
+    default: 'Aucun résultat'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  optionValue: {
+    type: [String, Function],
+    default: 'id'
+  },
+  optionLabel: {
+    type: [String, Function],
+    default: 'name'
+  },
+  optionDescription: {
+    type: [String, Function],
+    default: null
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['xs', 'sm', 'md', 'lg'].includes(value)
+  },
+  maxVisible: {
+    type: Number,
+    default: 50
+  },
+  serverSearch: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'search'])
+
+const searchTerm = ref('')
+const openDropdown = ref(false)
+const highlightedIndex = ref(-1)
+const inputRef = ref(null)
+
+const baseOptions = computed(() => Array.isArray(props.options) ? props.options : [])
+
+const selectedOption = computed(() => {
+  return baseOptions.value.find(option => isEqualValue(resolveValue(option), props.modelValue)) || null
+})
+
+const displayedOptions = computed(() => {
+  const items = baseOptions.value.slice()
+
+  const filtered = (!props.serverSearch && searchTerm.value.trim())
+    ? items.filter((option) => {
+      const term = searchTerm.value.trim().toLowerCase()
+      const label = resolveLabel(option).toLowerCase()
+      const description = resolveDescription(option)?.toLowerCase() || ''
+      return label.includes(term) || description.includes(term)
+    })
+    : items
+
+  if (props.maxVisible && filtered.length > props.maxVisible) {
+    return filtered.slice(0, props.maxVisible)
+  }
+
+  return filtered
+})
+
+const inputClasses = computed(() => {
+  const pr = props.clearable && props.modelValue ? 'pr-16' : 'pr-10'
+  const base = ['input', 'input-bordered', 'w-full', pr]
+  if (props.size === 'xs') base.push('input-xs')
+  if (props.size === 'sm') base.push('input-sm')
+  if (props.size === 'lg') base.push('input-lg')
+  return base.join(' ')
+})
+
+const toggleButtonClasses = computed(() => {
+  const base = ['absolute', 'top-1/2', '-translate-y-1/2', 'right-2', 'btn', 'btn-ghost']
+  if (props.size === 'xs' || props.size === 'sm') {
+    base.push('btn-xs')
+  } else {
+    base.push('btn-sm')
+  }
+  return base.join(' ')
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (!openDropdown.value) {
+      searchTerm.value = selectedOption.value ? resolveLabel(selectedOption.value) : ''
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  baseOptions,
+  (_newOptions) => {
+    if (!openDropdown.value && selectedOption.value) {
+      searchTerm.value = resolveLabel(selectedOption.value)
+    }
+  },
+  { deep: true }
+)
+
+watch(openDropdown, (isOpen) => {
+  if (isOpen) {
+    highlightedIndex.value = -1
+  }
+})
+
+function resolveValue (option) {
+  if (!option) {
+    return null
+  }
+  if (typeof props.optionValue === 'function') {
+    return props.optionValue(option)
+  }
+  return option[props.optionValue]
+}
+
+function resolveLabel (option) {
+  if (!option) {
+    return ''
+  }
+  if (typeof props.optionLabel === 'function') {
+    return props.optionLabel(option) || ''
+  }
+  return option[props.optionLabel] || ''
+}
+
+function resolveDescription (option) {
+  if (!option || !props.optionDescription) {
+    return ''
+  }
+  if (typeof props.optionDescription === 'function') {
+    return props.optionDescription(option) || ''
+  }
+  return option[props.optionDescription] || ''
+}
+
+function isEqualValue (a, b) {
+  if (a === b) {
+    return true
+  }
+  return String(a ?? '') === String(b ?? '')
+}
+
+function isOptionSelected (option) {
+  return isEqualValue(resolveValue(option), props.modelValue)
+}
+
+function selectOption (option) {
+  emit('update:modelValue', resolveValue(option) ?? '')
+  searchTerm.value = resolveLabel(option)
+  openDropdown.value = false
+}
+
+function handleFocus () {
+  openDropdown.value = true
+  if (searchTerm.value === '' && selectedOption.value) {
+    searchTerm.value = resolveLabel(selectedOption.value)
+  }
+}
+
+function toggleDropdown () {
+  openDropdown.value = !openDropdown.value
+  if (openDropdown.value && selectedOption.value) {
+    searchTerm.value = resolveLabel(selectedOption.value)
+  }
+  if (openDropdown.value && inputRef.value) {
+    inputRef.value.focus()
+  }
+}
+
+function handleInput () {
+  if (!openDropdown.value) {
+    openDropdown.value = true
+  }
+  emit('search', searchTerm.value)
+}
+
+function clearSelection () {
+  emit('update:modelValue', '')
+  searchTerm.value = ''
+  openDropdown.value = false
+}
+
+function closeDropdown () {
+  openDropdown.value = false
+  if (searchTerm.value.trim() === '' && selectedOption.value) {
+    emit('update:modelValue', '')
+  } else if (selectedOption.value) {
+    searchTerm.value = resolveLabel(selectedOption.value)
+  }
+}
+
+function highlightNext () {
+  if (!openDropdown.value || displayedOptions.value.length === 0) {
+    return
+  }
+  highlightedIndex.value = (highlightedIndex.value + 1) % displayedOptions.value.length
+}
+
+function highlightPrevious () {
+  if (!openDropdown.value || displayedOptions.value.length === 0) {
+    return
+  }
+  highlightedIndex.value =
+    highlightedIndex.value <= 0
+      ? displayedOptions.value.length - 1
+      : highlightedIndex.value - 1
+}
+
+function selectHighlighted () {
+  if (!openDropdown.value) {
+    return
+  }
+  if (highlightedIndex.value >= 0 && highlightedIndex.value < displayedOptions.value.length) {
+    selectOption(displayedOptions.value[highlightedIndex.value])
+  }
+}
+
+const handleGlobalClick = (event) => {
+  if (!openDropdown.value) {
+    return
+  }
+  const target = event.target
+  if (target?.closest?.('.search-select')) {
+    return
+  }
+  closeDropdown()
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleGlobalClick)
+  searchTerm.value = selectedOption.value ? resolveLabel(selectedOption.value) : ''
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleGlobalClick)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.12s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/app/components/common/StructureSkeletonPreview.vue b/frontend/app/components/common/StructureSkeletonPreview.vue
new file mode 100644
index 0000000..bce8a18
--- /dev/null
+++ b/frontend/app/components/common/StructureSkeletonPreview.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
+        <p class="text-xs text-base-content/70">
+          {{ description }}
+        </p>
+      </div>
+      <span class="badge badge-outline">{{ previewBadge }}</span>
+    </div>
+
+    <details v-if="structure" class="collapse collapse-arrow bg-base-100">
+      <summary class="collapse-title text-sm font-medium">
+        Consulter le détail du squelette
+      </summary>
+      <div class="collapse-content text-sm text-base-content/80" :class="variant === 'component' ? 'space-y-4' : 'space-y-2'">
+        <!-- Custom fields: component variant (rich display) -->
+        <div v-if="variant === 'component' && customFields.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="space-y-2">
+            <li
+              v-for="field in customFields"
+              :key="field.customFieldId || field.id || field.name"
+              class="rounded bg-base-200/60 px-3 py-2"
+            >
+              <p class="font-medium text-sm text-base-content">
+                {{ field.name || field.key }}
+              </p>
+              <p class="text-xs text-base-content/70 mt-1">
+                Type : {{ field.type || 'text' }}<span v-if="field.required"> &bull; Obligatoire</span>
+                <span v-if="Array.isArray(field.options) && field.options.length">
+                  &bull; Options : {{ field.options.join(', ') }}
+                </span>
+                <span v-if="field.defaultValue">
+                  &bull; Défaut : {{ field.defaultValue }}
+                </span>
+              </p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Custom fields: piece variant (simple display) -->
+        <div v-if="variant === 'piece' && customFields.length" class="space-y-1">
+          <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li v-for="field in customFields" :key="field.name">
+              <span class="font-medium">{{ field.name }}</span>
+              <span v-if="field.value !== undefined && field.value !== null"> : {{ field.value }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Pieces: component variant only -->
+        <div v-if="variant === 'component' && pieces.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(piece, index) in pieces"
+              :key="piece.role || piece.typePieceId || piece.familyCode || index"
+            >
+              {{ resolvePieceLabelFn(piece) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Products: component variant only -->
+        <div v-if="variant === 'component' && products.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(product, index) in products"
+              :key="product.role || product.typeProductId || product.familyCode || index"
+            >
+              {{ resolveProductLabelFn(product) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Subcomponents: component variant only -->
+        <div v-if="variant === 'component' && subcomponents.length" class="space-y-2">
+          <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+          <ul class="list-disc list-inside space-y-1">
+            <li
+              v-for="(subcomponent, index) in subcomponents"
+              :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
+            >
+              {{ resolveSubcomponentLabelFn(subcomponent) }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Empty state: component variant -->
+        <p
+          v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
+          class="text-xs text-base-content/50"
+        >
+          Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
+        </p>
+
+        <!-- Empty state: piece variant -->
+        <p v-if="variant === 'piece' && !customFields.length" class="text-xs text-base-content/70">
+          Ce squelette ne définit pas encore de champs personnalisés.
+        </p>
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getStructureCustomFields,
+  getStructurePieces,
+  getStructureProducts,
+  getStructureSubcomponents,
+} from '~/shared/utils/structureDisplayUtils'
+
+const props = withDefaults(defineProps<{
+  structure: Record<string, any> | null
+  description?: string
+  previewBadge: string
+  variant: 'component' | 'piece'
+  showEmptyState?: boolean
+  resolvePieceLabel?: (piece: Record<string, any>) => string
+  resolveProductLabel?: (product: Record<string, any>) => string
+  resolveSubcomponentLabel?: (subcomponent: Record<string, any>) => string
+}>(), {
+  description: '',
+  showEmptyState: false,
+  resolvePieceLabel: undefined,
+  resolveProductLabel: undefined,
+  resolveSubcomponentLabel: undefined,
+})
+
+const customFields = computed(() =>
+  getStructureCustomFields(props.structure),
+)
+
+const pieces = computed(() =>
+  props.variant === 'component' ? getStructurePieces(props.structure) : [],
+)
+
+const products = computed(() =>
+  props.variant === 'component' ? getStructureProducts(props.structure) : [],
+)
+
+const subcomponents = computed(() =>
+  props.variant === 'component' ? getStructureSubcomponents(props.structure) : [],
+)
+
+const fallbackLabel = (item: Record<string, any>) =>
+  item?.name || item?.label || item?.role || item?.alias || 'N/A'
+
+const resolvePieceLabelFn = (piece: Record<string, any>) =>
+  props.resolvePieceLabel ? props.resolvePieceLabel(piece) : fallbackLabel(piece)
+
+const resolveProductLabelFn = (product: Record<string, any>) =>
+  props.resolveProductLabel ? props.resolveProductLabel(product) : fallbackLabel(product)
+
+const resolveSubcomponentLabelFn = (subcomponent: Record<string, any>) =>
+  props.resolveSubcomponentLabel ? props.resolveSubcomponentLabel(subcomponent) : fallbackLabel(subcomponent)
+</script>
diff --git a/frontend/app/components/common/VersionRestoreModal.vue b/frontend/app/components/common/VersionRestoreModal.vue
new file mode 100644
index 0000000..b6231a8
--- /dev/null
+++ b/frontend/app/components/common/VersionRestoreModal.vue
@@ -0,0 +1,198 @@
+<template>
+  <dialog ref="dialogRef" class="modal" :class="{ 'modal-open': visible }">
+    <div class="modal-box max-w-lg">
+      <h3 class="text-lg font-bold">Restaurer la version {{ preview?.version }}</h3>
+
+      <div v-if="!preview" class="flex justify-center py-8">
+        <span class="loading loading-spinner loading-md" />
+      </div>
+
+      <template v-else>
+        <div class="mt-4 space-y-4">
+          <!-- Restore mode explanation -->
+          <div
+            class="alert text-sm"
+            :class="preview.restoreMode === 'full' ? 'alert-info' : 'alert-warning'"
+          >
+            <div class="flex flex-col gap-1">
+              <!-- FULL MODE -->
+              <template v-if="preview.restoreMode === 'full'">
+                <span class="font-semibold">Restauration complete</span>
+
+                <!-- Machine: always full, no category -->
+                <template v-if="entityType === 'machine'">
+                  <span>Tous les elements de la machine seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, prix</li>
+                    <li>Site</li>
+                    <li>Fournisseurs</li>
+                    <li>Composants, pieces et produits lies</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+
+                <!-- Composant -->
+                <template v-else-if="entityType === 'composant'">
+                  <span>La categorie est identique. Tous les elements du composant seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                    <li>Structure : pieces, sous-composants et produits lies</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+
+                <!-- Piece -->
+                <template v-else-if="entityType === 'piece'">
+                  <span>La categorie est identique. Tous les elements de la piece seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                    <li>Produits lies</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+
+                <!-- Product -->
+                <template v-else-if="entityType === 'product'">
+                  <span>La categorie est identique. Tous les elements du produit seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, prix fournisseur</li>
+                    <li>Fournisseurs</li>
+                    <li>Champs personnalises</li>
+                  </ul>
+                </template>
+              </template>
+
+              <!-- PARTIAL MODE (never for machines) -->
+              <template v-else>
+                <span class="font-semibold">Restauration partielle</span>
+
+                <!-- Composant -->
+                <template v-if="entityType === 'composant'">
+                  <span>La categorie du composant a change depuis cette version. Seuls les champs de base seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                  </ul>
+                  <span class="mt-1 text-xs font-medium">Ne seront PAS modifies :</span>
+                  <ul class="ml-4 list-disc text-xs opacity-70">
+                    <li>Structure actuelle (pieces, sous-composants, produits lies)</li>
+                    <li>Champs personnalises actuels</li>
+                  </ul>
+                </template>
+
+                <!-- Piece -->
+                <template v-else-if="entityType === 'piece'">
+                  <span>La categorie de la piece a change depuis cette version. Seuls les champs de base seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, description, prix</li>
+                    <li>Fournisseurs</li>
+                  </ul>
+                  <span class="mt-1 text-xs font-medium">Ne seront PAS modifies :</span>
+                  <ul class="ml-4 list-disc text-xs opacity-70">
+                    <li>Produits lies actuels</li>
+                    <li>Champs personnalises actuels</li>
+                  </ul>
+                </template>
+
+                <!-- Product -->
+                <template v-else-if="entityType === 'product'">
+                  <span>La categorie du produit a change depuis cette version. Seuls les champs de base seront restaures :</span>
+                  <ul class="ml-4 list-disc text-xs">
+                    <li>Nom, reference, prix fournisseur</li>
+                    <li>Fournisseurs</li>
+                  </ul>
+                  <span class="mt-1 text-xs font-medium">Ne seront PAS modifies :</span>
+                  <ul class="ml-4 list-disc text-xs opacity-70">
+                    <li>Champs personnalises actuels</li>
+                  </ul>
+                </template>
+              </template>
+            </div>
+          </div>
+
+          <!-- Diff -->
+          <div v-if="Object.keys(preview.diff).length" class="space-y-2">
+            <h4 class="text-sm font-semibold">Changements qui seront appliques</h4>
+            <ul class="space-y-1 text-sm">
+              <li
+                v-for="(change, field) in preview.diff"
+                :key="field"
+                class="flex flex-col rounded-md border border-base-200 px-3 py-2"
+              >
+                <span class="font-medium text-base-content">{{ fieldLabels[field] || formatFieldLabel(String(field)) }}</span>
+                <span class="text-xs text-error line-through">{{ formatValue(change.current) }}</span>
+                <span class="text-xs text-success">{{ formatValue(change.restored) }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div v-else class="text-sm text-base-content/60">
+            Aucune difference detectee — l'entite est deja dans l'etat de cette version.
+          </div>
+
+          <!-- Warnings -->
+          <div v-if="preview.warnings.length" class="space-y-1">
+            <h4 class="text-sm font-semibold text-warning">Avertissements</h4>
+            <ul class="space-y-1">
+              <li
+                v-for="(warning, i) in preview.warnings"
+                :key="i"
+                class="alert alert-warning py-2 text-xs"
+              >
+                {{ warning.message }}
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="modal-action">
+          <button class="btn btn-ghost btn-sm md:btn-md" :disabled="restoring" @click="$emit('close')">
+            Annuler
+          </button>
+          <button class="btn btn-primary btn-sm md:btn-md" :disabled="restoring" @click="$emit('confirm')">
+            <span v-if="restoring" class="loading loading-spinner loading-sm mr-2" />
+            Confirmer la restauration
+          </button>
+        </div>
+      </template>
+    </div>
+    <form method="dialog" class="modal-backdrop" @click="$emit('close')">
+      <button type="button">close</button>
+    </form>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import type { RestorePreview } from '~/composables/useEntityVersions'
+
+defineProps<{
+  visible: boolean
+  preview: RestorePreview | null
+  restoring: boolean
+  fieldLabels: Record<string, string>
+  entityType: 'machine' | 'composant' | 'piece' | 'product'
+}>()
+
+defineEmits<{
+  close: []
+  confirm: []
+}>()
+
+const formatFieldLabel = (field: string): string => {
+  if (field.startsWith('customField:')) {
+    return `Champ perso : ${field.replace('customField:', '')}`
+  }
+  return field
+}
+
+const formatValue = (value: unknown): string => {
+  if (value === null || value === undefined) return '—'
+  if (Array.isArray(value)) {
+    return value.map((v) => (typeof v === 'object' && v !== null ? (v as any).name || (v as any).id || JSON.stringify(v) : String(v))).join(', ') || '—'
+  }
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+</script>
diff --git a/frontend/app/components/form/FieldEmail.vue b/frontend/app/components/form/FieldEmail.vue
new file mode 100644
index 0000000..bf5dcf2
--- /dev/null
+++ b/frontend/app/components/form/FieldEmail.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="form-control">
+    <label v-if="label" class="label" :for="inputId">
+      <span class="label-text">{{ label }}</span>
+      <span v-if="required" class="label-text-alt text-error">*</span>
+    </label>
+    <input
+      :id="inputId"
+      :value="modelValue"
+      type="email"
+      class="input input-bordered"
+      :class="{ 'input-error': Boolean(errorMessage) }"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      :name="name"
+      :autocomplete="autocomplete"
+      :pattern="EMAIL_INPUT_PATTERN"
+      :aria-invalid="Boolean(errorMessage)"
+      :aria-describedby="describedBy"
+      @input="onInput"
+      @blur="onBlur"
+      @focus="(event) => emit('focus', event)"
+    />
+    <p v-if="help" :id="helpId" class="mt-2 text-xs text-gray-500">
+      {{ help }}
+    </p>
+    <p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { normalizeEmail } from '~/utils/formatters/email'
+import { EMAIL_INPUT_PATTERN, EMAIL_VALIDATION_ERROR, emailSchema } from '~/shared/validation/email'
+
+type Emits = {
+  (event: 'update:modelValue', value: string): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'focus', value: FocusEvent): void
+}
+
+const emit = defineEmits<Emits>()
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label?: string
+    required?: boolean
+    error?: string | null
+    help?: string | null
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    id?: string
+    autocomplete?: string
+    normalizeOnBlur?: boolean
+    validateOnBlur?: boolean
+  }>(),
+  {
+    modelValue: '',
+    label: 'Email',
+    required: false,
+    error: null,
+    help: null,
+    placeholder: 'ex: contact@example.com',
+    disabled: false,
+    name: undefined,
+    id: undefined,
+    autocomplete: 'email',
+    normalizeOnBlur: false,
+    validateOnBlur: false,
+  }
+)
+
+const fallbackId = useId()
+const inputId = computed(() => props.id || fallbackId)
+const helpId = computed(() => (props.help ? `${inputId.value}-help` : undefined))
+const errorMessage = computed(() => props.error || null)
+const errorId = computed(() => (errorMessage.value ? `${inputId.value}-error` : undefined))
+const describedBy = computed(() => [helpId.value, errorId.value].filter(Boolean).join(' ') || undefined)
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+const onBlur = (event: FocusEvent) => {
+  const target = event.target as HTMLInputElement
+
+  if (props.normalizeOnBlur) {
+    const normalized = normalizeEmail(target.value)
+    if (normalized !== target.value) {
+      target.value = normalized
+      emit('update:modelValue', normalized)
+    }
+  }
+
+  if (props.validateOnBlur && !errorMessage.value) {
+    const validation = emailSchema.validate(target.value)
+    if (!validation.valid) {
+      target.setCustomValidity(EMAIL_VALIDATION_ERROR)
+    } else {
+      target.setCustomValidity('')
+    }
+  }
+
+  emit('blur', event)
+}
+</script>
diff --git a/frontend/app/components/form/FieldPhone.vue b/frontend/app/components/form/FieldPhone.vue
new file mode 100644
index 0000000..6a9da77
--- /dev/null
+++ b/frontend/app/components/form/FieldPhone.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="form-control">
+    <label v-if="label" class="label" :for="inputId">
+      <span class="label-text">{{ label }}</span>
+      <span v-if="required" class="label-text-alt text-error">*</span>
+    </label>
+    <input
+      :id="inputId"
+      :value="modelValue"
+      type="tel"
+      class="input input-bordered"
+      :class="{ 'input-error': Boolean(errorMessage) }"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      :name="name"
+      :autocomplete="autocomplete"
+      :pattern="PHONE_INPUT_PATTERN"
+      inputmode="tel"
+      :aria-invalid="Boolean(errorMessage)"
+      :aria-describedby="describedBy"
+      @input="onInput"
+      @blur="onBlur"
+      @focus="(event) => emit('focus', event)"
+    />
+    <p v-if="help" :id="helpId" class="mt-2 text-xs text-base-content/50">
+      {{ help }}
+    </p>
+    <p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { formatPhone } from '~/utils/formatters/phone'
+import { PHONE_INPUT_PATTERN, PHONE_VALIDATION_ERROR, phoneSchema } from '~/shared/validation/phone'
+
+type Emits = {
+  (event: 'update:modelValue', value: string): void
+  (event: 'blur', value: FocusEvent): void
+  (event: 'focus', value: FocusEvent): void
+}
+
+const emit = defineEmits<Emits>()
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label?: string
+    required?: boolean
+    error?: string | null
+    help?: string | null
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    id?: string
+    autocomplete?: string
+    normalizeOnBlur?: boolean
+    validateOnBlur?: boolean
+  }>(),
+  {
+    modelValue: '',
+    label: 'Téléphone',
+    required: false,
+    error: null,
+    help: null,
+    placeholder: 'Ex: 06 00 00 00 00',
+    disabled: false,
+    name: undefined,
+    id: undefined,
+    autocomplete: 'tel',
+    normalizeOnBlur: false,
+    validateOnBlur: false,
+  }
+)
+
+const fallbackId = useId()
+const inputId = computed(() => props.id || fallbackId)
+const helpId = computed(() => (props.help ? `${inputId.value}-help` : undefined))
+const errorMessage = computed(() => props.error || null)
+const errorId = computed(() => (errorMessage.value ? `${inputId.value}-error` : undefined))
+const describedBy = computed(() => [helpId.value, errorId.value].filter(Boolean).join(' ') || undefined)
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+const onBlur = (event: FocusEvent) => {
+  const target = event.target as HTMLInputElement
+
+  if (props.normalizeOnBlur) {
+    const formatted = formatPhone(target.value)
+    if (formatted !== target.value) {
+      target.value = formatted
+      emit('update:modelValue', formatted)
+    }
+  }
+
+  if (props.validateOnBlur && !errorMessage.value) {
+    const validation = phoneSchema.validate(target.value)
+    if (!validation.valid) {
+      target.setCustomValidity(PHONE_VALIDATION_ERROR)
+    } else {
+      target.setCustomValidity('')
+    }
+  }
+
+  emit('blur', event)
+}
+</script>
diff --git a/frontend/app/components/home/AddMachineModal.vue b/frontend/app/components/home/AddMachineModal.vue
new file mode 100644
index 0000000..5078044
--- /dev/null
+++ b/frontend/app/components/home/AddMachineModal.vue
@@ -0,0 +1,108 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box max-w-2xl">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter une nouvelle machine
+      </h3>
+      <form @submit.prevent="handleSubmit">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom de la machine</span>
+            </label>
+            <input
+              v-model="form.name"
+              type="text"
+              placeholder="Ex: Presse hydraulique #1"
+              class="input input-bordered"
+              :disabled="disabled"
+              required
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Site</span>
+            </label>
+            <select
+              v-model="form.siteId"
+              class="select select-bordered"
+              :disabled="disabled"
+              required
+            >
+              <option value="">
+                Sélectionner un site
+              </option>
+              <option v-for="site in sites" :key="site.id" :value="site.id">
+                {{ site.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-control mb-4">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </label>
+          <input
+            v-model="form.reference"
+            type="text"
+            placeholder="Ex: PRESS-001"
+            class="input input-bordered"
+            :disabled="disabled"
+          >
+        </div>
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer la machine
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+const props = defineProps<{
+  open: boolean
+  sites: Array<{ id: string, name: string }>
+  disabled: boolean
+  preselectedSiteId?: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, siteId: string, reference: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  siteId: '',
+  reference: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen && props.preselectedSiteId) {
+    form.siteId = props.preselectedSiteId
+  }
+  if (!isOpen) {
+    form.name = ''
+    form.siteId = ''
+    form.reference = ''
+  }
+})
+</script>
diff --git a/frontend/app/components/home/AddSiteModal.vue b/frontend/app/components/home/AddSiteModal.vue
new file mode 100644
index 0000000..5d19f7b
--- /dev/null
+++ b/frontend/app/components/home/AddSiteModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter un nouveau site
+      </h3>
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom du site</span>
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="Ex: Usine de production"
+            class="input input-bordered"
+            :disabled="disabled"
+            required
+          >
+        </div>
+
+        <SiteContactFormFields :form="form" :disabled="disabled" />
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer le site
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+
+const props = defineProps<{
+  open: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, contactName: string, contactPhone: string, contactAddress: string, contactPostalCode: string, contactCity: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  contactName: '',
+  contactPhone: '',
+  contactAddress: '',
+  contactPostalCode: '',
+  contactCity: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) {
+    form.name = ''
+    form.contactName = ''
+    form.contactPhone = ''
+    form.contactAddress = ''
+    form.contactPostalCode = ''
+    form.contactCity = ''
+  }
+})
+</script>
diff --git a/frontend/app/components/layout/AppNavbar.vue b/frontend/app/components/layout/AppNavbar.vue
new file mode 100644
index 0000000..23b94c2
--- /dev/null
+++ b/frontend/app/components/layout/AppNavbar.vue
@@ -0,0 +1,466 @@
+<template>
+  <div class="navbar navbar-glass sticky top-0 z-50 px-4 lg:px-6">
+    <div class="navbar-start">
+      <!-- Mobile hamburger menu -->
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-sm lg:hidden">
+          <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
+        </div>
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
+        >
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
+              @click="toggleDarkMode"
+            >
+              <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+              <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+              {{ isDark ? 'Mode clair' : 'Mode sombre' }}
+            </button>
+          </li>
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
+              @click="$emit('open-settings')"
+            >
+              <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
+              Paramètres d'affichage
+            </button>
+          </li>
+
+          <!-- Mobile: simple links -->
+          <li v-for="link in simpleLinks" :key="link.to">
+            <NuxtLink
+              :to="link.to"
+              class="rounded-lg px-3 py-2 transition-all flex items-center gap-2"
+              :class="linkClass(link)"
+            >
+              <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
+              {{ link.label }}
+            </NuxtLink>
+          </li>
+
+          <!-- Mobile: dropdown groups -->
+          <li
+            v-for="group in navGroups"
+            :key="group.id + '-mobile'"
+            class="mt-1 border-t border-base-200 pt-2"
+          >
+            <button
+              type="button"
+              class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-all"
+              :class="groupClass(group)"
+              :aria-expanded="openDropdown === group.id + '-mobile'"
+              @click="toggleDropdown(group.id + '-mobile')"
+              @keydown.enter.prevent="toggleDropdown(group.id + '-mobile')"
+              @keydown.space.prevent="toggleDropdown(group.id + '-mobile')"
+            >
+              <span class="flex items-center gap-2">
+                <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
+                {{ group.label }}
+              </span>
+              <IconLucideChevronRight
+                class="h-3.5 w-3.5 transition-transform duration-200"
+                :class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''"
+                aria-hidden="true"
+              />
+            </button>
+            <Transition name="nav-dropdown-mobile">
+              <ul
+                v-if="openDropdown === group.id + '-mobile'"
+                class="mt-1 space-y-0.5 rounded-lg bg-base-200/50 p-2 overflow-hidden"
+              >
+                <li v-for="child in group.children" :key="child.to">
+                  <NuxtLink
+                    :to="child.to"
+                    class="rounded-md px-3 py-1.5 transition-colors block text-sm"
+                    :class="childLinkClass(child)"
+                  >
+                    {{ child.label }}
+                    <span v-if="child.to === '/comments' && unresolvedCount > 0" class="badge badge-warning badge-xs ml-1">
+                      {{ unresolvedCount }}
+                    </span>
+                  </NuxtLink>
+                </li>
+              </ul>
+            </Transition>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Logo -->
+      <NuxtLink to="/" class="flex items-center gap-2.5 group">
+        <div class="w-9 h-9 rounded-lg overflow-hidden ring-1 ring-base-300/50 transition-all group-hover:ring-primary/30 group-hover:shadow-md">
+          <img
+            :src="logoSrc"
+            alt="Logo Malio"
+            class="h-full w-full object-contain"
+          />
+        </div>
+        <span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
+          Inventory
+        </span>
+      </NuxtLink>
+    </div>
+
+    <!-- Desktop navbar -->
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal gap-0.5 px-1">
+        <!-- Desktop: simple links -->
+        <li v-for="link in simpleLinks" :key="link.to">
+          <NuxtLink
+            :to="link.to"
+            class="transition-all px-3 py-2 rounded-lg flex items-center gap-1.5 text-sm font-medium"
+            :class="linkClass(link)"
+          >
+            <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
+            {{ link.label }}
+          </NuxtLink>
+        </li>
+
+        <!-- Desktop: dropdown groups -->
+        <li
+          v-for="group in navGroups"
+          :key="group.id + '-desktop'"
+          class="relative"
+          @mouseenter="setDropdown(group.id + '-desktop')"
+          @mouseleave="scheduleDropdownClose(group.id + '-desktop')"
+          @focusin="setDropdown(group.id + '-desktop')"
+          @focusout="scheduleDropdownClose(group.id + '-desktop')"
+        >
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 transition-all text-sm font-medium"
+            :class="groupClass(group)"
+            :aria-expanded="openDropdown === group.id + '-desktop'"
+            @click="toggleDropdown(group.id + '-desktop')"
+            @keydown.enter.prevent="toggleDropdown(group.id + '-desktop')"
+            @keydown.space.prevent="toggleDropdown(group.id + '-desktop')"
+          >
+            <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
+            {{ group.label }}
+            <IconLucideChevronDown
+              class="h-3.5 w-3.5 transition-transform duration-200"
+              :class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
+              aria-hidden="true"
+            />
+          </button>
+          <Transition name="nav-dropdown-desktop">
+            <ul
+              v-if="openDropdown === group.id + '-desktop'"
+              class="absolute left-0 top-full mt-1.5 w-56 rounded-xl border border-base-300/50 bg-base-100 p-1.5 shadow-lg shadow-base-content/5 z-50"
+            >
+              <li v-for="child in group.children" :key="child.to">
+                <NuxtLink
+                  :to="child.to"
+                  class="block rounded-lg px-3 py-2 transition-all text-sm"
+                  :class="childLinkClass(child)"
+                >
+                  {{ child.label }}
+                  <span v-if="child.to === '/comments' && unresolvedCount > 0" class="badge badge-warning badge-xs ml-1">
+                    {{ unresolvedCount }}
+                  </span>
+                </NuxtLink>
+              </li>
+            </ul>
+          </Transition>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Navbar end -->
+    <div class="navbar-end">
+      <div class="flex items-center gap-1.5">
+        <button
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
+          :title="isDark ? 'Mode clair' : 'Mode sombre'"
+          @click="toggleDarkMode"
+        >
+          <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+          <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <button
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
+          title="Paramètres d'affichage"
+          @click="$emit('open-settings')"
+        >
+          <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
+        </button>
+
+        <ClientOnly>
+          <div v-if="activeProfile" class="dropdown dropdown-end">
+            <div
+              tabindex="0"
+              role="button"
+              class="indicator cursor-pointer"
+            >
+              <span
+                v-if="unresolvedCount > 0"
+                class="indicator-item badge badge-warning badge-xs"
+              >
+                {{ unresolvedCount }}
+              </span>
+              <div
+                class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
+              >
+                <span class="text-xs font-semibold">
+                  {{ activeProfileInitials }}
+                </span>
+              </div>
+            </div>
+            <ul
+              tabindex="0"
+              class="menu dropdown-content mt-3 p-2 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
+            >
+              <li class="px-3 py-2">
+                <div class="flex flex-col gap-1 pointer-events-none">
+                  <span class="text-xs text-base-content/50">Connecté en tant que</span>
+                  <span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
+                  <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+                </div>
+              </li>
+              <div class="divider my-0.5 px-2" />
+              <li v-if="isAdmin">
+                <NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
+                  Administration
+                  <IconLucideChevronRight class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
+                  Commentaires
+                  <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
+                    {{ unresolvedCount }}
+                  </span>
+                  <IconLucideChevronRight v-else class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
+                </NuxtLink>
+              </li>
+              <div class="divider my-0.5 px-2" />
+              <li>
+                <button
+                  type="button"
+                  class="rounded-lg text-error/80 hover:text-error hover:bg-error/5 justify-between text-sm"
+                  @click="$emit('logout')"
+                >
+                  Déconnexion
+                  <IconLucideLogOut class="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </li>
+            </ul>
+          </div>
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, type Component } from 'vue'
+import { useRoute } from '#imports'
+import { useNavDropdown } from '~/composables/useNavDropdown'
+import { usePermissions } from '~/composables/usePermissions'
+import { useProfileSession } from '~/composables/useProfileSession'
+import { useComments } from '~/composables/useComments'
+import IconLucideMenu from '~icons/lucide/menu'
+import IconLucideSettings from '~icons/lucide/settings'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
+import IconLucideLogOut from '~icons/lucide/log-out'
+import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
+import IconLucideFactory from '~icons/lucide/factory'
+
+import IconLucideCpu from '~icons/lucide/cpu'
+import IconLucidePuzzle from '~icons/lucide/puzzle'
+import IconLucidePackage from '~icons/lucide/package'
+import IconLucideLink from '~icons/lucide/link'
+import IconLucideSun from '~icons/lucide/sun'
+import IconLucideMoon from '~icons/lucide/moon'
+import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
+
+defineEmits<{
+  (e: 'open-settings'): void
+  (e: 'logout'): void
+}>()
+
+interface NavLink {
+  to: string
+  label: string
+  icon?: Component
+}
+
+interface NavGroup {
+  id: string
+  label: string
+  icon?: Component
+  activePaths: string[]
+  children: NavLink[]
+}
+
+const simpleLinks: NavLink[] = [
+  { to: '/', label: 'Vue d\'ensemble', icon: IconLucideLayoutDashboard },
+  { to: '/machines', label: 'Parc Machines', icon: IconLucideFactory },
+]
+
+const navGroups: NavGroup[] = [
+  {
+    id: 'component',
+    label: 'Composants',
+    icon: IconLucideCpu,
+    activePaths: ['/component-category', '/component-catalog'],
+    children: [
+      { to: '/component-catalog', label: 'Catalogue des composants' },
+      { to: '/component-category', label: 'Catégorie de composant' },
+    ],
+  },
+  {
+    id: 'pieces',
+    label: 'Pièces',
+    icon: IconLucidePuzzle,
+    activePaths: ['/piece-category', '/pieces-catalog'],
+    children: [
+      { to: '/pieces-catalog', label: 'Catalogue des pièces' },
+      { to: '/piece-category', label: 'Catégorie de pièce' },
+    ],
+  },
+  {
+    id: 'products',
+    label: 'Produits',
+    icon: IconLucidePackage,
+    activePaths: ['/product-category', '/product-catalog'],
+    children: [
+      { to: '/product-catalog', label: 'Catalogue des produits' },
+      { to: '/product-category', label: 'Catégorie de produit' },
+    ],
+  },
+  {
+    id: 'resources',
+    label: 'Ressources liées',
+    icon: IconLucideLink,
+    activePaths: ['/sites', '/documents', '/constructeurs', '/activity-log', '/comments'],
+    children: [
+      { to: '/sites', label: 'Sites' },
+      { to: '/documents', label: 'Documents' },
+      { to: '/constructeurs', label: 'Fournisseurs' },
+      { to: '/comments', label: 'Commentaires' },
+      { to: '/activity-log', label: 'Journal d\'activité' },
+    ],
+  },
+]
+
+const route = useRoute()
+const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = useNavDropdown()
+const { activeProfile } = useProfileSession()
+const { isAdmin, canEdit } = usePermissions()
+const { fetchUnresolvedCount } = useComments()
+const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
+
+const unresolvedCount = ref(0)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+const refreshUnresolvedCount = async () => {
+  if (!activeProfile.value) return
+  unresolvedCount.value = await fetchUnresolvedCount()
+}
+
+onMounted(() => {
+  initDarkMode()
+  refreshUnresolvedCount()
+  pollInterval = setInterval(refreshUnresolvedCount, 60_000)
+})
+
+onBeforeUnmount(() => {
+  if (pollInterval) clearInterval(pollInterval)
+})
+
+const isActive = (path: string) => {
+  if (path === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(path)
+}
+
+const isGroupActive = (group: NavGroup) => {
+  return group.activePaths.some((path) => isActive(path))
+}
+
+const linkClass = (link: NavLink) => {
+  return isActive(link.to)
+    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
+}
+
+const groupClass = (group: NavGroup) => {
+  return isGroupActive(group)
+    ? 'bg-primary text-primary-content font-semibold shadow-sm'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
+}
+
+const childLinkClass = (child: NavLink) => {
+  return isActive(child.to)
+    ? 'bg-primary/10 text-primary font-semibold'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
+}
+
+const roleLabel = computed(() => {
+  if (isAdmin.value) return 'Admin'
+  if (canEdit.value) return 'Gestionnaire'
+  return 'Lecteur'
+})
+
+const roleBadgeClass = computed(() => {
+  if (isAdmin.value) return 'badge-error'
+  if (canEdit.value) return 'badge-warning'
+  return 'badge-info'
+})
+
+const activeProfileLabel = computed(() => {
+  if (!activeProfile.value) {
+    return 'Profil inconnu'
+  }
+  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
+})
+
+const activeProfileInitials = computed(() => {
+  if (!activeProfile.value) {
+    return '??'
+  }
+  const { firstName = '', lastName = '' } = activeProfile.value
+  return (
+    `${firstName.charAt(0) || ''}${lastName.charAt(0) || ''}`.toUpperCase() || '??'
+  )
+})
+</script>
+
+<style scoped>
+.nav-dropdown-desktop-enter-active,
+.nav-dropdown-desktop-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.nav-dropdown-desktop-enter-from,
+.nav-dropdown-desktop-leave-to {
+  opacity: 0;
+  transform: translateY(4px) scale(0.98);
+}
+.nav-dropdown-desktop-enter-to,
+.nav-dropdown-desktop-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.nav-dropdown-mobile-enter-active,
+.nav-dropdown-mobile-leave-active {
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+.nav-dropdown-mobile-enter-from,
+.nav-dropdown-mobile-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.nav-dropdown-mobile-enter-to,
+.nav-dropdown-mobile-leave-from {
+  max-height: 12rem;
+  opacity: 1;
+}
+</style>
diff --git a/frontend/app/components/machine/AddEntityToMachineModal.vue b/frontend/app/components/machine/AddEntityToMachineModal.vue
new file mode 100644
index 0000000..f6459ed
--- /dev/null
+++ b/frontend/app/components/machine/AddEntityToMachineModal.vue
@@ -0,0 +1,236 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box max-w-xl w-full" style="overflow: visible">
+      <button
+        type="button"
+        class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3"
+        @click="handleClose"
+      >
+        &times;
+      </button>
+
+      <h3 class="font-bold text-lg mb-6">
+        {{ title }}
+      </h3>
+
+      <!-- Step 1: Choose category -->
+      <div class="form-control mb-5" style="position: relative; z-index: 20">
+        <label class="label pb-1">
+          <span class="label-text font-medium">Catégorie</span>
+        </label>
+        <SearchSelect
+          v-model="selectedTypeId"
+          :options="types"
+          :loading="loadingTypes"
+          :max-visible="8"
+          placeholder="Rechercher une catégorie..."
+          empty-text="Aucune catégorie disponible"
+          :option-label="(t: any) => t.name"
+          :option-description="(t: any) => t.code"
+        />
+      </div>
+
+      <!-- Step 2: Choose entity (visible only after category selected) -->
+      <div v-if="selectedTypeName" class="form-control mb-5" style="position: relative; z-index: 10">
+        <label class="label pb-1">
+          <span class="label-text font-medium">{{ entityLabel }}</span>
+        </label>
+        <SearchSelect
+          v-model="selectedEntityId"
+          :options="entities"
+          :loading="loadingEntities"
+          :max-visible="8"
+          :placeholder="`Rechercher ${entityLabelLower}...`"
+          :empty-text="`Aucun ${entityLabelLower} disponible dans cette catégorie`"
+          :option-label="entityOptionLabel"
+          :option-description="entityOptionDescription"
+          server-search
+          @search="handleEntitySearch"
+        />
+      </div>
+
+      <!-- Summary of selection -->
+      <div v-if="selectedEntitySummary" class="bg-base-200 rounded-lg p-3 mb-4">
+        <p class="text-sm font-medium">{{ selectedEntitySummary.name }}</p>
+        <p v-if="selectedEntitySummary.reference" class="text-xs text-base-content/60">
+          Réf : {{ selectedEntitySummary.reference }}
+        </p>
+      </div>
+
+      <div class="modal-action mt-4 pt-4 border-t border-base-200" style="position: relative; z-index: 0">
+        <button type="button" class="btn btn-ghost" @click="handleClose">
+          Annuler
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          :disabled="!selectedEntityId"
+          @click="handleConfirm"
+        >
+          Ajouter
+        </button>
+      </div>
+    </div>
+    <div class="modal-backdrop" @click="handleClose" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
+
+type EntityKind = 'component' | 'piece' | 'product'
+
+const props = defineProps<{
+  open: boolean
+  entityKind: EntityKind
+}>()
+
+const emit = defineEmits<{
+  close: []
+  confirm: [entityId: string]
+}>()
+
+const selectedTypeId = ref('')
+const selectedEntityId = ref('')
+const loadingEntities = ref(false)
+const entities = ref<any[]>([])
+
+const { componentTypes, loadingComponentTypes, loadComponentTypes } = useComponentTypes()
+const { pieceTypes, loadingPieceTypes, loadPieceTypes } = usePieceTypes()
+const { productTypes, loadingProductTypes, loadProductTypes } = useProductTypes()
+const { loadComposants } = useComposants()
+const { loadPieces } = usePieces()
+const { loadProducts } = useProducts()
+
+const title = computed(() => {
+  const labels: Record<EntityKind, string> = {
+    component: 'Ajouter un composant',
+    piece: 'Ajouter une pièce',
+    product: 'Ajouter un produit',
+  }
+  return labels[props.entityKind]
+})
+
+const entityLabel = computed(() => {
+  const labels: Record<EntityKind, string> = {
+    component: 'Composant',
+    piece: 'Pièce',
+    product: 'Produit',
+  }
+  return labels[props.entityKind]
+})
+
+const entityLabelLower = computed(() => entityLabel.value.toLowerCase())
+
+const types = computed(() => {
+  if (props.entityKind === 'component') return componentTypes.value
+  if (props.entityKind === 'piece') return pieceTypes.value
+  return productTypes.value
+})
+
+const loadingTypes = computed(() => {
+  if (props.entityKind === 'component') return loadingComponentTypes.value
+  if (props.entityKind === 'piece') return loadingPieceTypes.value
+  return loadingProductTypes.value
+})
+
+const selectedTypeName = computed(() => {
+  if (!selectedTypeId.value) return ''
+  const found = types.value.find((t: any) => t.id === selectedTypeId.value)
+  return found?.name || ''
+})
+
+const entityOptionLabel = (e: any) => {
+  const name = e.name || '(sans nom)'
+  return e.reference ? `${name} — ${e.reference}` : name
+}
+const entityOptionDescription = (e: any) => e.reference || ''
+
+const selectedEntitySummary = computed(() => {
+  if (!selectedEntityId.value || !entities.value.length) return null
+  const found = entities.value.find((e: any) => e.id === selectedEntityId.value)
+  if (!found) return null
+  return { name: found.name || '(sans nom)', reference: found.reference || null }
+})
+
+// Load types when modal opens
+watch(() => props.open, async (isOpen) => {
+  if (!isOpen) return
+  if (props.entityKind === 'component') await loadComponentTypes()
+  else if (props.entityKind === 'piece') await loadPieceTypes()
+  else await loadProductTypes()
+})
+
+// Load entities when type changes
+watch(selectedTypeId, async () => {
+  selectedEntityId.value = ''
+  entities.value = []
+
+  if (!selectedTypeName.value) return
+
+  loadingEntities.value = true
+  try {
+    if (props.entityKind === 'component') {
+      const result = await loadComposants({ typeName: selectedTypeName.value, itemsPerPage: 200 })
+      entities.value = result?.data?.items || []
+    } else if (props.entityKind === 'piece') {
+      const result = await loadPieces({ typeName: selectedTypeName.value, itemsPerPage: 200 })
+      entities.value = result?.data?.items || []
+    } else {
+      const result = await loadProducts({ typeName: selectedTypeName.value, itemsPerPage: 200 })
+      entities.value = result?.data?.items || []
+    }
+  } finally {
+    loadingEntities.value = false
+  }
+})
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+
+const handleEntitySearch = (term: string) => {
+  if (searchDebounce) clearTimeout(searchDebounce)
+  searchDebounce = setTimeout(async () => {
+    if (!selectedTypeName.value) return
+    loadingEntities.value = true
+    try {
+      if (props.entityKind === 'component') {
+        const result = await loadComposants({ typeName: selectedTypeName.value, search: term.trim(), itemsPerPage: 200 })
+        entities.value = result?.data?.items || []
+      } else if (props.entityKind === 'piece') {
+        const result = await loadPieces({ typeName: selectedTypeName.value, search: term.trim(), itemsPerPage: 200 })
+        entities.value = result?.data?.items || []
+      } else {
+        const result = await loadProducts({ typeName: selectedTypeName.value, search: term.trim(), itemsPerPage: 200 })
+        entities.value = result?.data?.items || []
+      }
+    } finally {
+      loadingEntities.value = false
+    }
+  }, 300)
+}
+
+const handleClose = () => {
+  resetState()
+  emit('close')
+}
+
+const handleConfirm = () => {
+  if (!selectedEntityId.value) return
+  emit('confirm', selectedEntityId.value)
+  resetState()
+  emit('close')
+}
+
+const resetState = () => {
+  selectedTypeId.value = ''
+  selectedEntityId.value = ''
+  entities.value = []
+}
+</script>
diff --git a/frontend/app/components/machine/MachineComponentsCard.vue b/frontend/app/components/machine/MachineComponentsCard.vue
new file mode 100644
index 0000000..9f29faa
--- /dev/null
+++ b/frontend/app/components/machine/MachineComponentsCard.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">Composants</h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm gap-2"
+          @click="$emit('toggle-collapse')"
+          :title="collapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
+        >
+          <IconLucideChevronRight
+            class="w-5 h-5 transition-transform"
+            :class="collapsed ? 'rotate-0' : 'rotate-90'"
+            aria-hidden="true"
+          />
+          <span class="text-sm">
+            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+          </span>
+        </button>
+      </div>
+
+      <div v-if="components.length === 0" class="text-sm text-gray-500 py-4">
+        Aucun composant associé à cette machine.
+      </div>
+
+      <div v-else class="space-y-2">
+        <div v-for="component in components" :key="component.id">
+          <ComponentHierarchy
+            :components="[component]"
+            :is-edit-mode="false"
+            :show-delete="isEditMode"
+            :collapse-all="collapsed"
+            :toggle-token="collapseToggleToken"
+            @edit-piece="$emit('edit-piece', $event)"
+            @delete="$emit('remove-component', component.linkId || component.id)"
+          />
+        </div>
+      </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-component')"
+      >
+        Ajouter un composant
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+
+defineProps<{
+  components: any[]
+  isEditMode: boolean
+  collapsed: boolean
+  collapseToggleToken: number
+}>()
+
+defineEmits<{
+  'toggle-collapse': []
+  'update-component': [component: any]
+  'edit-piece': [piece: any]
+  'custom-field-update': [fieldUpdate: any]
+  'add-component': []
+  'remove-component': [linkId: string]
+}>()
+</script>
diff --git a/frontend/app/components/machine/MachineCustomFieldDefEditor.vue b/frontend/app/components/machine/MachineCustomFieldDefEditor.vue
new file mode 100644
index 0000000..280d8e1
--- /dev/null
+++ b/frontend/app/components/machine/MachineCustomFieldDefEditor.vue
@@ -0,0 +1,112 @@
+<template>
+  <section class="space-y-3">
+    <h3 class="text-sm font-semibold">
+      Définitions des champs personnalisés
+    </h3>
+
+    <p v-if="!fields.length" class="text-xs text-gray-500">
+      Aucun champ personnalisé défini. Cliquez sur « Ajouter » pour en créer un.
+    </p>
+
+    <ul v-else class="space-y-2" role="list">
+      <li
+        v-for="(field, index) in fields"
+        :key="field.uid"
+        class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
+        :class="reorderClass(index)"
+        draggable="true"
+        @dragstart="onDragStart(index, $event)"
+        @dragenter="onDragEnter(index)"
+        @dragover.prevent="onDragEnter(index)"
+        @drop.prevent="onDrop(index)"
+        @dragend="onDragEnd"
+      >
+        <div class="flex items-start gap-3">
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
+            title="Réordonner"
+            draggable="false"
+          >
+            <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+          </button>
+
+          <div class="flex-1 space-y-2">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <input
+                v-model="field.name"
+                type="text"
+                class="input input-bordered input-sm"
+                placeholder="Nom du champ"
+              >
+              <select v-model="field.type" class="select select-bordered select-sm">
+                <option value="text">
+                  Texte
+                </option>
+                <option value="number">
+                  Nombre
+                </option>
+                <option value="select">
+                  Liste
+                </option>
+                <option value="boolean">
+                  Oui/Non
+                </option>
+                <option value="date">
+                  Date
+                </option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2 text-xs">
+              <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+              Obligatoire
+            </div>
+
+            <textarea
+              v-if="field.type === 'select'"
+              v-model="field.optionsText"
+              class="textarea textarea-bordered textarea-sm h-20"
+              placeholder="Option 1&#10;Option 2"
+            />
+          </div>
+
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square text-error"
+            @click="$emit('remove-field', index)"
+          >
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <button type="button" class="btn btn-outline btn-sm" @click="$emit('add-field')">
+      <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+      Ajouter un champ
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { MachineCustomFieldEditorField } from '~/composables/useMachineCustomFieldDefs'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+
+defineProps<{
+  fields: MachineCustomFieldEditorField[]
+  saving: boolean
+  reorderClass: (index: number) => string
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+}>()
+
+defineEmits<{
+  'add-field': []
+  'remove-field': [index: number]
+}>()
+</script>
diff --git a/frontend/app/components/machine/MachineCustomFieldsCard.vue b/frontend/app/components/machine/MachineCustomFieldsCard.vue
new file mode 100644
index 0000000..b86168a
--- /dev/null
+++ b/frontend/app/components/machine/MachineCustomFieldsCard.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Champs personnalisés</h2>
+          <p class="text-xs text-gray-500">
+            Champs personnalisés propres à cette machine.
+          </p>
+        </div>
+        <span v-if="visibleCustomFields.length" class="badge badge-outline">
+          {{ visibleCustomFields.length }} champ{{ visibleCustomFields.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <!-- View mode: display values -->
+      <template v-if="!isEditMode">
+        <div v-if="visibleCustomFields.length" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+            </label>
+            <div class="input input-bordered input-sm bg-base-200">
+              {{ formatCustomFieldValue(field) }}
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-xs text-gray-500">
+          Aucun champ personnalisé défini pour cette machine.
+        </p>
+      </template>
+
+      <!-- Edit mode: definition management + value editing -->
+      <template v-else>
+        <p v-if="!customFields.length" class="text-xs text-gray-500">
+          Aucun champ personnalisé défini.
+        </p>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="(field, index) in customFields"
+            :key="field.id || field.name || index"
+            class="border border-base-200 rounded-md p-3 space-y-2"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex-1 space-y-2">
+                <!-- Definition fields -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                  <input
+                    :value="field.name"
+                    type="text"
+                    class="input input-bordered input-sm"
+                    placeholder="Nom du champ"
+                    @blur="handleDefinitionUpdate(field, 'name', ($event.target as HTMLInputElement).value)"
+                  />
+                  <select
+                    :value="field.type || 'text'"
+                    class="select select-bordered select-sm"
+                    @change="handleDefinitionUpdate(field, 'type', ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="text">Texte</option>
+                    <option value="number">Nombre</option>
+                    <option value="select">Liste</option>
+                    <option value="boolean">Oui/Non</option>
+                    <option value="date">Date</option>
+                  </select>
+                  <div class="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="!!field.required"
+                      @change="handleDefinitionUpdate(field, 'required', ($event.target as HTMLInputElement).checked)"
+                    />
+                    Obligatoire
+                  </div>
+                </div>
+
+                <!-- Options for select type -->
+                <textarea
+                  v-if="(field.type || 'text') === 'select'"
+                  :value="field.optionsText || (Array.isArray(field.options) ? field.options.join('\n') : '')"
+                  class="textarea textarea-bordered textarea-sm h-20 w-full"
+                  placeholder="Option 1&#10;Option 2"
+                  @blur="handleOptionsUpdate(field, ($event.target as HTMLTextAreaElement).value)"
+                ></textarea>
+
+                <!-- Value editing -->
+                <div class="pt-1 border-t border-base-200">
+                  <label class="label py-0">
+                    <span class="label-text text-xs text-base-content/60">Valeur</span>
+                  </label>
+                  <input
+                    v-if="!field.type || field.type === 'text'"
+                    :value="field.value ?? ''"
+                    type="text"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <input
+                    v-else-if="field.type === 'number'"
+                    :value="field.value ?? ''"
+                    type="number"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <select
+                    v-else-if="field.type === 'select'"
+                    :value="field.value ?? ''"
+                    class="select select-bordered select-sm w-full"
+                    @change="onSelectChange(field, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">Sélectionner...</option>
+                    <option
+                      v-for="option in field.options"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  <label
+                    v-else-if="field.type === 'boolean'"
+                    class="flex items-center gap-3 cursor-pointer py-1"
+                  >
+                    <input
+                      type="checkbox"
+                      class="toggle toggle-primary toggle-sm"
+                      :checked="String(field.value).toLowerCase() === 'true'"
+                      @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+                    >
+                    <span
+                      class="text-sm"
+                      :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'"
+                    >
+                      {{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}
+                    </span>
+                  </label>
+                  <input
+                    v-else-if="field.type === 'date'"
+                    :value="field.value ?? ''"
+                    type="date"
+                    class="input input-bordered input-sm w-full"
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-ghost btn-sm btn-square flex-shrink-0 text-error"
+                title="Supprimer ce champ"
+                @click="$emit('delete-field', field.id || field.customFieldId)"
+              >
+                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm md:btn-md btn-primary"
+          @click="$emit('add-field')"
+        >
+          Ajouter un champ personnalisé
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideTrash from '~icons/lucide/trash'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+
+defineProps<{
+  customFields: any[]
+  visibleCustomFields: any[]
+  isEditMode: boolean
+}>()
+
+const emit = defineEmits<{
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+  'add-field': []
+  'delete-field': [fieldId: string]
+  'update-field-definition': [fieldId: string, data: Record<string, unknown>]
+}>()
+
+const handleDefinitionUpdate = (field: any, key: string, value: unknown) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  emit('update-field-definition', fieldId, { ...field, [key]: value })
+}
+
+const handleOptionsUpdate = (field: any, raw: string) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  const options = raw.split('\n').map((o: string) => o.trim()).filter((o: string) => o.length > 0)
+  emit('update-field-definition', fieldId, { ...field, options })
+}
+
+const onSelectChange = (field: any, value: string) => {
+  emit('set-custom-field-value', field, value)
+  emit('update-custom-field', field)
+}
+
+const onBooleanChange = (field: any, checked: boolean) => {
+  emit('set-custom-field-value', field, checked ? 'true' : 'false')
+  emit('update-custom-field', field)
+}
+</script>
diff --git a/frontend/app/components/machine/MachineDetailHeader.vue b/frontend/app/components/machine/MachineDetailHeader.vue
new file mode 100644
index 0000000..2613a96
--- /dev/null
+++ b/frontend/app/components/machine/MachineDetailHeader.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+    <div class="flex flex-col gap-2">
+      <h1 class="text-3xl font-bold">
+        {{ title }}
+      </h1>
+    </div>
+    <div class="flex items-center gap-2 print:hidden" data-print-hide>
+      <button
+        @click="$emit('toggle-edit')"
+        class="btn btn-primary"
+        :class="{ 'btn-outline': isEditMode }"
+      >
+        <IconLucideSquarePen
+          v-if="!isEditMode"
+          class="w-5 h-5 mr-2"
+          aria-hidden="true"
+        />
+        <IconLucideEye
+          v-else
+          class="w-5 h-5 mr-2"
+          aria-hidden="true"
+        />
+        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
+      </button>
+      <button
+        v-if="!isEditMode"
+        @click="$emit('open-print')"
+        type="button"
+        class="btn btn-outline btn-secondary"
+      >
+        <IconLucidePrinter class="w-5 h-5 mr-2" aria-hidden="true" />
+        Imprimer
+      </button>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
+        Retour aux machines
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideSquarePen from '~icons/lucide/square-pen'
+import IconLucideEye from '~icons/lucide/eye'
+import IconLucidePrinter from '~icons/lucide/printer'
+
+const router = useRouter()
+
+defineProps<{
+  title: string
+  isEditMode: boolean
+}>()
+
+defineEmits<{
+  'toggle-edit': []
+  'open-print': []
+}>()
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back()
+  }
+  else {
+    navigateTo('/machines')
+  }
+}
+</script>
diff --git a/frontend/app/components/machine/MachineDocumentsCard.vue b/frontend/app/components/machine/MachineDocumentsCard.vue
new file mode 100644
index 0000000..4986cb2
--- /dev/null
+++ b/frontend/app/components/machine/MachineDocumentsCard.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="card bg-base-100 shadow-sm mt-6">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Documents de la machine</h2>
+          <p class="text-xs text-gray-500">Ajoutez ou consultez les documents liés à cette machine.</p>
+        </div>
+        <span v-if="isEditMode && files.length" class="badge badge-outline">
+          {{ files.length }} fichier{{ files.length > 1 ? 's' : '' }} sélectionné{{ files.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <DocumentUpload
+        v-if="isEditMode"
+        :model-value="files"
+        @update:model-value="$emit('update:files', $event)"
+        title="Déposer des fichiers pour la machine"
+        subtitle="Formats acceptés : PDF, images, documents..."
+        @files-added="$emit('files-added', $event)"
+      />
+
+      <div v-if="documents.length" class="space-y-2">
+        <div
+          v-for="doc in documents"
+          :key="doc.id"
+          class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+        >
+          <div class="flex items-center gap-3 text-sm">
+            <div
+              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+              :class="documentThumbnailClass(doc)"
+            >
+              <img
+                v-if="isImageDocument(doc) && (doc.fileUrl || doc.path)"
+                :src="doc.fileUrl || doc.path"
+                class="h-full w-full object-cover"
+                :alt="`Aperçu de ${doc.name}`"
+              >
+              <iframe
+                v-else-if="shouldInlinePdf(doc)"
+                :src="documentPreviewSrc(doc)"
+                class="h-full w-full border-0 bg-white"
+                title="Aperçu PDF"
+              />
+              <component
+                v-else
+                :is="documentIcon(doc).component"
+                class="h-6 w-6"
+                :class="documentIcon(doc).colorClass"
+                aria-hidden="true"
+              />
+            </div>
+            <div>
+              <div class="font-medium">{{ doc.name }}</div>
+              <div class="text-xs text-gray-500">
+                {{ doc.mimeType || 'Inconnu' }} &bull; {{ formatSize(doc.size) }}
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="!canPreviewDocument(doc)"
+              :title="canPreviewDocument(doc) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+              @click="$emit('preview', doc)"
+            >
+              Consulter
+            </button>
+            <button type="button" class="btn btn-ghost btn-xs" @click="$emit('download', doc)">
+              Télécharger
+            </button>
+            <button
+              v-if="isEditMode"
+              type="button"
+              class="btn btn-ghost btn-xs text-error"
+              :disabled="uploading"
+              @click="$emit('remove', doc.id)"
+            >
+              Supprimer
+            </button>
+          </div>
+        </div>
+      </div>
+      <p v-else class="text-xs text-gray-500">Aucun document lié à cette machine.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentThumbnailClass,
+  documentIcon,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps<{
+  documents: any[]
+  isEditMode: boolean
+  uploading: boolean
+  files: File[]
+}>()
+
+defineEmits<{
+  'update:files': [files: File[]]
+  'files-added': [files: File[]]
+  'preview': [doc: any]
+  'download': [doc: any]
+  'remove': [documentId: string]
+}>()
+</script>
diff --git a/frontend/app/components/machine/MachineInfoCard.vue b/frontend/app/components/machine/MachineInfoCard.vue
new file mode 100644
index 0000000..21982ed
--- /dev/null
+++ b/frontend/app/components/machine/MachineInfoCard.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body">
+      <h2 class="card-title tracking-tight">Informations de la machine</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom</span>
+          </label>
+          <input
+            v-if="isEditMode"
+            :id="getMachineFieldId('name')"
+            :value="machineName"
+            type="text"
+            class="input input-bordered"
+            @input="$emit('update:machine-name', ($event.target as HTMLInputElement).value)"
+          />
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineName }}
+          </div>
+        </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Site</span>
+          </label>
+          <select
+            v-if="isEditMode"
+            :value="machineSiteId"
+            class="select select-bordered"
+            @change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value)"
+          >
+            <option value="">Sélectionner un site</option>
+            <option
+              v-for="site in sites"
+              :key="site.id"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </option>
+          </select>
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineSiteName || 'Non défini' }}
+          </div>
+        </div>
+        <div v-if="isEditMode || machineReference" class="form-control">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </label>
+          <input
+            v-if="isEditMode"
+            :id="getMachineFieldId('reference')"
+            :value="machineReference"
+            type="text"
+            class="input input-bordered"
+            @input="$emit('update:machine-reference', ($event.target as HTMLInputElement).value)"
+          />
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineReference }}
+          </div>
+        </div>
+        <div v-if="isEditMode || hasMachineConstructeur" class="form-control md:col-span-2">
+          <label class="label">
+            <span class="label-text">Fournisseur</span>
+          </label>
+          <ConstructeurSelect
+            v-if="isEditMode"
+            class="w-full"
+            :model-value="machineConstructeurIds"
+            :initial-options="machineConstructeursDisplay"
+            placeholder="Rechercher un ou plusieurs fournisseurs..."
+            @update:modelValue="$emit('update:constructeur-ids', $event)"
+          />
+          <ConstructeurLinksTable
+            v-if="constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="!isEditMode"
+            @update:model-value="$emit('update:constructeur-links', $event)"
+            @remove="$emit('remove-constructeur-link', $event)"
+          />
+          <div v-else-if="!isEditMode" class="border border-base-300 rounded-btn bg-base-200 px-4 py-2 min-h-12 flex items-center">
+            <span class="text-base-content/50">Non défini</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Champs personnalisés -->
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
+        <h4 class="font-semibold text-base-content/80 mb-3">Champs personnalisés de la machine</h4>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+              <span v-if="field.required" class="label-text-alt text-error">*</span>
+            </label>
+
+            <template v-if="isEditMode">
+              <input
+                v-if="field.type === 'text'"
+                :value="field.value ?? ''"
+                type="text"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+              />
+              <input
+                v-else-if="field.type === 'number'"
+                :value="field.value ?? ''"
+                type="number"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+              />
+              <select
+                v-else-if="field.type === 'select'"
+                :value="field.value ?? ''"
+                class="select select-bordered select-sm"
+                :required="field.required"
+                @change="$emit('set-custom-field-value', field, ($event.target as HTMLSelectElement).value)"
+              >
+                <option value="">Sélectionner...</option>
+                <option
+                  v-for="option in field.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
+                <input
+                  type="checkbox"
+                  class="toggle toggle-primary toggle-sm"
+                  :checked="String(field.value).toLowerCase() === 'true'"
+                  @change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')"
+                >
+                <span class="text-sm" :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
+              <input
+                v-else-if="field.type === 'date'"
+                :value="field.value ?? ''"
+                type="date"
+                class="input input-bordered input-sm"
+                :required="field.required"
+                @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+              />
+              <div v-else class="text-xs text-error">
+                Type de champ non pris en charge
+              </div>
+            </template>
+            <template v-else>
+              <div class="input input-bordered input-sm bg-base-200">
+                {{ formatCustomFieldValue(field) }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="isEditMode" class="mt-6 pt-4 border-t border-base-200">
+        <MachineCustomFieldDefEditor
+          :fields="fieldDefs.fields.value"
+          :saving="fieldDefs.saving.value"
+          :reorder-class="fieldDefs.reorderClass"
+          :on-drag-start="fieldDefs.onDragStart"
+          :on-drag-enter="fieldDefs.onDragEnter"
+          :on-drop="fieldDefs.onDrop"
+          :on-drag-end="fieldDefs.onDragEnd"
+          @add-field="fieldDefs.addField()"
+          @remove-field="fieldDefs.removeField($event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import ConstructeurLinksTable from '~/components/ConstructeurLinksTable.vue'
+import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+
+const props = defineProps<{
+  isEditMode: boolean
+  machineName: string
+  machineReference: string
+  machineSiteId: string
+  machineSiteName: string
+  sites: any[]
+  machineConstructeurIds: string[]
+  machineConstructeursDisplay: any[]
+  hasMachineConstructeur: boolean
+  constructeurLinks: ConstructeurLinkEntry[]
+  visibleCustomFields: any[]
+  getMachineFieldId: (fieldName: string) => string
+  machineId: string
+  machineCustomFieldDefs: any[]
+}>()
+
+const emit = defineEmits<{
+  'update:machine-name': [value: string]
+  'update:machine-reference': [value: string]
+  'update:machine-site-id': [value: string]
+  'update:constructeur-ids': [ids: unknown]
+  'update:constructeur-links': [links: ConstructeurLinkEntry[]]
+  'remove-constructeur-link': [constructeurId: string]
+  'set-custom-field-value': [field: any, value: unknown]
+  'custom-fields-saved': []
+}>()
+
+const fieldDefs = useMachineCustomFieldDefs({
+  machineId: props.machineId,
+  initialDefs: props.machineCustomFieldDefs,
+  onSaved: () => emit('custom-fields-saved'),
+})
+
+watch(() => props.machineCustomFieldDefs, (newDefs) => {
+  fieldDefs.reinit(newDefs)
+}, { deep: true })
+
+defineExpose({
+  saveFieldDefinitions: () => fieldDefs.saveDefinitions(),
+})
+</script>
diff --git a/frontend/app/components/machine/MachinePiecesCard.vue b/frontend/app/components/machine/MachinePiecesCard.vue
new file mode 100644
index 0000000..20d2c72
--- /dev/null
+++ b/frontend/app/components/machine/MachinePiecesCard.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">Pièces de la machine</h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm gap-2"
+          @click="$emit('toggle-collapse')"
+          :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
+        >
+          <IconLucideChevronRight
+            class="w-5 h-5 transition-transform"
+            :class="collapsed ? 'rotate-0' : 'rotate-90'"
+            aria-hidden="true"
+          />
+          <span class="text-sm">
+            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+          </span>
+        </button>
+      </div>
+
+      <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
+        Aucune pièce associée à cette machine.
+      </div>
+
+      <div v-else class="space-y-2">
+        <div v-for="piece in pieces" :key="piece.id">
+          <PieceItem
+            :piece="piece"
+            :is-edit-mode="isEditMode"
+            :show-delete="isEditMode"
+            :collapse-all="collapsed"
+            :toggle-token="collapseToggleToken"
+            @update="$emit('update-piece', $event)"
+            @edit="$emit('edit-piece', $event)"
+            @delete="$emit('remove-piece', piece.linkId || piece.id)"
+          />
+        </div>
+      </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-piece')"
+      >
+        Ajouter une pièce
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+
+defineProps<{
+  pieces: any[]
+  isEditMode: boolean
+  collapsed: boolean
+  collapseToggleToken: number
+}>()
+
+defineEmits<{
+  'toggle-collapse': []
+  'update-piece': [piece: any]
+  'edit-piece': [piece: any]
+  'add-piece': []
+  'remove-piece': [linkId: string]
+}>()
+</script>
diff --git a/frontend/app/components/machine/MachineProductsCard.vue b/frontend/app/components/machine/MachineProductsCard.vue
new file mode 100644
index 0000000..68c8575
--- /dev/null
+++ b/frontend/app/components/machine/MachineProductsCard.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="card bg-base-100 shadow-sm">
+    <div class="card-body space-y-4">
+      <DocumentPreviewModal
+        :document="previewDocument"
+        :visible="previewVisible"
+        :documents="previewDocumentList"
+        @close="closePreview"
+      />
+
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Produits associés</h2>
+          <p class="text-xs text-gray-500">
+            Produits sélectionnés directement pour cette machine.
+          </p>
+        </div>
+        <span class="badge badge-outline" v-if="products.length">
+          {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <div v-if="products.length" class="space-y-3">
+        <div
+          v-for="product in products"
+          :key="product.id || product.name"
+          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2"
+        >
+          <div class="flex items-center justify-between flex-wrap gap-2">
+            <p class="font-semibold text-base-content">
+              {{ product.name }}
+            </p>
+            <div class="flex items-center gap-2">
+              <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
+                {{ product.groupLabel }}
+              </span>
+              <button
+                v-if="isEditMode"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                title="Supprimer ce produit"
+                @click="$emit('remove-product', (product.linkId || product.id) as string)"
+              >
+                Supprimer
+              </button>
+            </div>
+          </div>
+          <p v-if="product.reference" class="text-xs text-base-content/70">
+            <span class="font-medium">Référence :</span>
+            <span class="ml-1">{{ product.reference }}</span>
+          </p>
+          <p v-if="product.supplierLabel" class="text-xs text-base-content/70">
+            <span class="font-medium">Fournisseurs :</span>
+            <span class="ml-1">{{ product.supplierLabel }}</span>
+          </p>
+          <p v-if="product.priceLabel" class="text-xs text-base-content/70">
+            <span class="font-medium">Prix indicatif :</span>
+            <span class="ml-1">{{ product.priceLabel }}</span>
+          </p>
+
+          <!-- Documents liés au produit -->
+          <div v-if="product.documents?.length" class="mt-2 space-y-1">
+            <p class="text-xs font-medium text-base-content/70">Documents :</p>
+            <div
+              v-for="doc in product.documents"
+              :key="doc.id || doc.name"
+              class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+            >
+              <div class="flex items-center gap-3 text-xs">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-6"
+                >
+                  <component
+                    :is="documentIcon(doc).component"
+                    class="h-4 w-4"
+                    :class="documentIcon(doc).colorClass"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div>
+                  <div class="font-medium text-base-content">{{ doc.name }}</div>
+                  <div class="text-xs text-base-content/60">
+                    {{ doc.mimeType || 'Inconnu' }} • {{ formatSize(doc.size) }}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 text-xs">
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  :disabled="!canPreviewDocument(doc)"
+                  :title="canPreviewDocument(doc) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+                  @click="openPreview(doc, product.documents || [])"
+                >
+                  Consulter
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  @click="downloadDocument(doc)"
+                >
+                  Télécharger
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p v-else class="text-xs text-gray-500">
+        Aucun produit n'a été associé directement à cette machine.
+      </p>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-product')"
+      >
+        Ajouter un produit
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps<{
+  products: Array<{
+    id?: string | null
+    linkId?: string | null
+    name?: string
+    reference?: string | null
+    supplierLabel?: string | null
+    priceLabel?: string | null
+    groupLabel?: string
+    documents?: Array<{
+      id?: string
+      name?: string
+      mimeType?: string
+      size?: number
+      fileUrl?: string
+      downloadUrl?: string
+    }>
+  }>
+  isEditMode: boolean
+}>()
+
+defineEmits<{
+  'add-product': []
+  'remove-product': [linkId: string]
+}>()
+
+const previewDocument = ref<any>(null)
+const previewVisible = ref(false)
+const previewDocumentList = ref<any[]>([])
+
+const openPreview = (doc: any, docs: any[]) => {
+  previewDocument.value = doc
+  previewDocumentList.value = docs
+  previewVisible.value = true
+}
+
+const closePreview = () => {
+  previewVisible.value = false
+  previewDocument.value = null
+}
+</script>
diff --git a/frontend/app/components/model-types/ConversionModal.vue b/frontend/app/components/model-types/ConversionModal.vue
new file mode 100644
index 0000000..22ba69d
--- /dev/null
+++ b/frontend/app/components/model-types/ConversionModal.vue
@@ -0,0 +1,172 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': open }">
+    <div class="modal-box max-w-2xl">
+      <h3 class="text-lg font-bold text-base-content">
+        Convertir la catégorie
+      </h3>
+
+      <!-- Loading state -->
+      <div v-if="checking" class="mt-4 flex items-center gap-2 text-sm text-info">
+        <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+        Vérification de la conversion…
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="checkError" class="mt-4 text-sm text-error">
+        {{ checkError }}
+      </div>
+
+      <!-- Blocked state -->
+      <template v-else-if="checkResult && !checkResult.canConvert">
+        <p class="mt-3 text-sm text-base-content/70">
+          La conversion de « {{ modelType?.name }} » est impossible pour les raisons suivantes :
+        </p>
+        <ul class="mt-3 space-y-1">
+          <li
+            v-for="(blocker, i) in checkResult.blockers"
+            :key="i"
+            class="flex items-start gap-2 rounded-lg border border-error/20 bg-error/5 px-3 py-2 text-sm text-error"
+          >
+            <IconLucideCircleX class="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+            {{ blocker }}
+          </li>
+        </ul>
+      </template>
+
+      <!-- Eligible state -->
+      <template v-else-if="checkResult && checkResult.canConvert">
+        <div class="mt-3 rounded-lg border border-warning/20 bg-warning/5 px-4 py-3">
+          <p class="text-sm font-medium text-warning">
+            {{ directionLabel }}
+          </p>
+          <p class="mt-1 text-sm text-base-content/70">
+            {{ checkResult.itemCount }} élément(s) seront convertis. Cette opération est irréversible.
+          </p>
+        </div>
+
+        <div
+          v-if="checkResult.names.length > 0"
+          class="mt-3 rounded-xl border border-base-200 bg-base-100"
+        >
+          <p class="px-4 pt-3 text-sm font-medium text-base-content/70">
+            Éléments concernés :
+          </p>
+          <ul class="max-h-48 divide-y divide-base-200 overflow-y-auto px-4 pb-3">
+            <li
+              v-for="(name, i) in checkResult.names"
+              :key="i"
+              class="py-1.5 text-sm text-base-content"
+            >
+              {{ name }}
+            </li>
+          </ul>
+        </div>
+
+        <div v-if="convertError" class="mt-3 text-sm text-error">
+          {{ convertError }}
+        </div>
+      </template>
+
+      <div class="modal-action">
+        <button
+          type="button"
+          class="btn"
+          :disabled="converting"
+          @click="emit('close')"
+        >
+          Fermer
+        </button>
+        <button
+          v-if="checkResult?.canConvert"
+          type="button"
+          class="btn btn-warning"
+          :disabled="converting"
+          @click="doConvert"
+        >
+          <span v-if="converting" class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+          Convertir
+        </button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import IconLucideCircleX from '~icons/lucide/circle-x';
+import {
+  checkConversion,
+  convertCategory,
+  type ConversionCheck,
+  type ModelType,
+} from '~/services/modelTypes';
+
+const props = defineProps<{
+  open: boolean;
+  modelType: ModelType | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'converted'): void;
+}>();
+
+const checking = ref(false);
+const checkError = ref<string | null>(null);
+const checkResult = ref<ConversionCheck | null>(null);
+const converting = ref(false);
+const convertError = ref<string | null>(null);
+
+const directionLabel = computed(() => {
+  if (!checkResult.value) return '';
+  return checkResult.value.direction === 'piece_to_component'
+    ? 'Conversion : Catégorie de pièce → Catégorie de composant'
+    : 'Conversion : Catégorie de composant → Catégorie de pièce';
+});
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (!isOpen || !props.modelType) {
+      return;
+    }
+
+    checking.value = true;
+    checkError.value = null;
+    checkResult.value = null;
+    convertError.value = null;
+
+    try {
+      checkResult.value = await checkConversion(props.modelType.id);
+    } catch (err: any) {
+      checkError.value =
+        err?.data?.message || err?.message || 'Erreur lors de la vérification.';
+    } finally {
+      checking.value = false;
+    }
+  },
+);
+
+const doConvert = async () => {
+  if (!props.modelType) return;
+
+  converting.value = true;
+  convertError.value = null;
+
+  try {
+    const result = await convertCategory(props.modelType.id);
+
+    if (!result.success) {
+      convertError.value = result.error || 'La conversion a échoué.';
+      return;
+    }
+
+    emit('converted');
+  } catch (err: any) {
+    convertError.value =
+      err?.data?.message || err?.message || 'Erreur lors de la conversion.';
+  } finally {
+    converting.value = false;
+  }
+};
+</script>
diff --git a/frontend/app/components/model-types/ManagementView.vue b/frontend/app/components/model-types/ManagementView.vue
new file mode 100644
index 0000000..2dff978
--- /dev/null
+++ b/frontend/app/components/model-types/ManagementView.vue
@@ -0,0 +1,438 @@
+<template>
+  <main
+    class="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8"
+  >
+    <header class="space-y-2">
+      <h1 class="text-3xl font-bold text-base-content">{{ headingText }}</h1>
+      <p class="text-base text-base-content/70">
+        {{ descriptionText }}
+      </p>
+    </header>
+
+    <nav
+      v-if="allowCategorySwitch"
+      class="tabs tabs-boxed inline-flex"
+      role="tablist"
+      aria-label="Catégories"
+    >
+      <button
+        v-for="option in categories"
+        :key="option.value"
+        type="button"
+        class="tab"
+        :class="{ 'tab-active': option.value === selectedCategory }"
+        role="tab"
+        :aria-selected="option.value === selectedCategory"
+        @click="onCategoryChange(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </nav>
+
+    <DataTable
+      :columns="columns"
+      :rows="items"
+      :loading="loading"
+      :sort="currentSort"
+      :pagination="paginationState"
+      :show-per-page="true"
+      row-key="id"
+      empty-message="Aucune catégorie trouvée."
+      no-results-message="Aucune catégorie ne correspond à votre recherche."
+      @sort="handleSort"
+      @update:current-page="handlePageChange"
+      @update:per-page="handlePerPageChange"
+    >
+      <template #toolbar>
+        <label class="input input-bordered flex items-center gap-2 w-full sm:w-72" :aria-busy="loading">
+          <IconLucideSearch class="w-4 h-4" aria-hidden="true" />
+          <input
+            v-model="searchInput"
+            type="search"
+            class="grow min-w-0"
+            placeholder="Rechercher par nom…"
+            autocomplete="off"
+          />
+        </label>
+
+        <button
+          v-if="canEdit"
+          type="button"
+          class="btn btn-primary btn-sm"
+          :disabled="loading"
+          @click="openCreatePage"
+        >
+          <IconLucidePlus class="w-4 h-4" aria-hidden="true" />
+          Créer
+        </button>
+      </template>
+
+      <template #cell-name="{ row }">
+        <span class="font-medium">{{ row.name }}</span>
+      </template>
+
+      <template #cell-notes="{ row }">
+        <span v-if="row.notes" class="block text-sm text-base-content/80 break-words">{{ row.notes }}</span>
+        <span v-else class="text-base-content/50">—</span>
+      </template>
+
+      <template #cell-actions="{ row }">
+        <div class="flex justify-end gap-2">
+          <button type="button" class="btn btn-ghost btn-xs" @click="openRelatedModal(row)">
+            Liés
+          </button>
+          <button
+            v-if="canEdit && showConvertButton"
+            type="button"
+            class="btn btn-ghost btn-xs text-warning"
+            @click="openConversionModal(row)"
+          >
+            Convertir
+          </button>
+          <button type="button" class="btn btn-ghost btn-xs" @click="openEditPage(row)">
+            Éditer
+          </button>
+          <button v-if="canEdit" type="button" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
+            Supprimer
+          </button>
+        </div>
+      </template>
+    </DataTable>
+
+    <ConversionModal
+      :open="conversionModalOpen"
+      :model-type="conversionTarget"
+      @close="closeConversionModal"
+      @converted="onConverted"
+    />
+
+    <RelatedItemsModal
+      :open="relatedModalOpen"
+      :model-type="relatedType"
+      @close="relatedModalOpen = false"
+      @open-edit="openRelatedEdit"
+    />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import DataTable from '~/components/common/DataTable.vue'
+import ConversionModal from '~/components/model-types/ConversionModal.vue'
+import { useUrlState } from '~/composables/useUrlState'
+import type { DataTableSort } from '~/shared/types/dataTable'
+import {
+  deleteModelType,
+  listModelTypes,
+  type ModelCategory,
+  type ModelType,
+  type ModelTypeListResponse,
+} from '~/services/modelTypes'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
+import IconLucideSearch from '~icons/lucide/search'
+import IconLucidePlus from '~icons/lucide/plus'
+
+const DEFAULT_DESCRIPTION
+  = 'Gérez les catégories utilisées pour structurer les catalogues de composants, de pièces et de produits. Ajoutez, modifiez ou supprimez des entrées avec tri, recherche et pagination.'
+
+const props = withDefaults(
+  defineProps<{
+    category: ModelCategory
+    heading: string
+    description?: string
+    allowCategorySwitch?: boolean
+  }>(),
+  {
+    allowCategorySwitch: false,
+  },
+)
+
+const selectedCategory = ref<ModelCategory>(props.category)
+const searchInput = ref('')
+
+// State synced with URL query params
+const urlState = useUrlState({
+  q: { default: '' },
+  sort: { default: 'name' },
+  dir: { default: 'asc' },
+  limit: { default: 20, type: 'number' },
+  offset: { default: 0, type: 'number' },
+}, {
+  onRestore: () => {
+    searchInput.value = urlState.q.value
+    doRefresh()
+  },
+})
+const searchTerm = urlState.q
+const sort = urlState.sort as Ref<'name' | 'createdAt'>
+const dir = urlState.dir as Ref<'asc' | 'desc'>
+const limit = urlState.limit
+const offset = urlState.offset
+
+// Initialize searchInput from URL
+searchInput.value = searchTerm.value
+
+const items = ref<ModelType[]>([])
+const total = ref(0)
+const loading = ref(false)
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+let activeController: AbortController | null = null
+
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const { canEdit } = usePermissions()
+
+const headingText = computed(() => props.heading)
+const descriptionText = computed(() => props.description ?? DEFAULT_DESCRIPTION)
+const allowCategorySwitch = computed(() => props.allowCategorySwitch ?? false)
+
+useHead(() => ({ title: headingText.value }))
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'notes', label: 'Notes' },
+  { key: 'actions', label: 'Actions', align: 'right' as const, width: 'w-48' },
+]
+
+const showConvertButton = computed(() =>
+  selectedCategory.value === 'PIECE' || selectedCategory.value === 'COMPONENT',
+)
+
+const categories: Array<{ label: string, value: ModelCategory }> = [
+  { label: 'Composants', value: 'COMPONENT' },
+  { label: 'Pièces', value: 'PIECE' },
+  { label: 'Produits', value: 'PRODUCT' },
+]
+
+// Sort state for DataTable
+const currentSort = computed<DataTableSort>(() => ({
+  field: sort.value,
+  direction: dir.value,
+}))
+
+const handleSort = (newSort: DataTableSort) => {
+  sort.value = newSort.field as 'name' | 'createdAt'
+  dir.value = newSort.direction as 'asc' | 'desc'
+  offset.value = 0
+  doRefresh()
+}
+
+// Pagination: convert offset/limit to page-based for DataTable
+const currentPage = computed(() => {
+  if (limit.value <= 0) return 1
+  return Math.floor(offset.value / limit.value) + 1
+})
+
+const totalPages = computed(() => {
+  if (limit.value <= 0) return 1
+  return Math.max(1, Math.ceil(total.value / limit.value))
+})
+
+const paginationState = computed(() => ({
+  currentPage: currentPage.value,
+  totalPages: totalPages.value,
+  totalItems: total.value,
+  pageItems: items.value.length,
+  perPageOptions: [20, 50, 100],
+  perPage: limit.value,
+}))
+
+const handlePageChange = (page: number) => {
+  offset.value = (page - 1) * limit.value
+  doRefresh()
+}
+
+const handlePerPageChange = (perPage: number) => {
+  limit.value = perPage
+  offset.value = 0
+  doRefresh()
+}
+
+const extractErrorMessage = (error: unknown): string => {
+  let raw: string | null = null
+  if (error && typeof error === 'object') {
+    const maybeFetchError = error as {
+      data?: Record<string, unknown>
+      statusMessage?: string
+      message?: string
+    }
+    if (maybeFetchError.data) {
+      const data = maybeFetchError.data
+      if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
+      else if (typeof data.detail === 'string') raw = data.detail
+      else if (typeof data.message === 'string') raw = data.message
+      else if (Array.isArray(data.message) && data.message.length > 0) raw = data.message[0]
+      else if (typeof data.error === 'string') raw = data.error
+    }
+    if (!raw && typeof maybeFetchError.statusMessage === 'string') raw = maybeFetchError.statusMessage
+    if (!raw && typeof maybeFetchError.message === 'string') raw = maybeFetchError.message
+  }
+  return humanizeError(raw)
+}
+
+const doRefresh = async ({ resetOffset = false }: { resetOffset?: boolean } = {}) => {
+  if (resetOffset) offset.value = 0
+
+  if (activeController) activeController.abort()
+  const controller = new AbortController()
+  activeController = controller
+  loading.value = true
+
+  try {
+    const response: ModelTypeListResponse = await listModelTypes(
+      {
+        q: searchTerm.value || undefined,
+        category: selectedCategory.value,
+        sort: sort.value,
+        dir: dir.value,
+        limit: limit.value,
+        offset: offset.value,
+      },
+      { signal: controller.signal },
+    )
+    items.value = response.items
+    total.value = response.total
+    offset.value = response.offset
+    limit.value = response.limit
+  }
+  catch (error: unknown) {
+    if (error && typeof error === 'object' && (error as { name?: string }).name === 'AbortError') return
+    showError(extractErrorMessage(error))
+  }
+  finally {
+    if (activeController === controller) {
+      loading.value = false
+      activeController = null
+    }
+  }
+}
+
+watch(
+  () => props.category,
+  (value) => {
+    if (value !== selectedCategory.value) {
+      selectedCategory.value = value
+      doRefresh({ resetOffset: true })
+    }
+  },
+)
+
+const onCategoryChange = (value: ModelCategory) => {
+  if (!props.allowCategorySwitch) return
+  if (selectedCategory.value !== value) {
+    selectedCategory.value = value
+    doRefresh({ resetOffset: true })
+  }
+}
+
+const resolveCategoryBasePath = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return '/component-category'
+  if (category === 'PIECE') return '/piece-category'
+  return '/product-category'
+}
+
+const openCreatePage = () => {
+  const basePath = resolveCategoryBasePath(selectedCategory.value)
+  router.push(`${basePath}/new`).catch(() => {
+    showError('Navigation impossible vers la page de création.')
+  })
+}
+
+const openEditPage = (item: ModelType) => {
+  const category = item.category ?? selectedCategory.value
+  const basePath = resolveCategoryBasePath(category)
+  router.push(`${basePath}/${item.id}/edit`).catch(() => {
+    showError("Navigation impossible vers la page d'édition.")
+  })
+}
+
+const { confirm } = useConfirm()
+
+const confirmDelete = async (item: ModelType) => {
+  const confirmed = await confirm({
+    message: 'Supprimer ce type ? Cette action est irréversible.',
+  })
+  if (!confirmed) return
+
+  try {
+    await deleteModelType(item.id)
+    invalidateEntityTypeCache(item.category)
+    showSuccess(`Type « ${item.name} » supprimé avec succès.`)
+    if (items.value.length === 1 && offset.value >= limit.value) {
+      offset.value = Math.max(0, offset.value - limit.value)
+    }
+    await doRefresh()
+  }
+  catch (error) {
+    showError(extractErrorMessage(error))
+  }
+}
+
+const relatedModalOpen = ref(false)
+const relatedType = ref<ModelType | null>(null)
+
+const resolveRelatedEditBasePath = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return '/component'
+  if (category === 'PIECE') return '/pieces'
+  return '/product'
+}
+
+const openRelatedModal = (item: ModelType) => {
+  relatedType.value = item
+  relatedModalOpen.value = true
+}
+
+const openRelatedEdit = (entry: { id: string }) => {
+  const current = relatedType.value
+  if (!current) return
+  const basePath = resolveRelatedEditBasePath(current.category)
+  relatedModalOpen.value = false
+  router.push(`${basePath}/${entry.id}/edit`).catch(() => {
+    showError("Navigation impossible vers la fiche d'édition.")
+  })
+}
+
+const conversionModalOpen = ref(false)
+const conversionTarget = ref<ModelType | null>(null)
+
+const openConversionModal = (item: ModelType) => {
+  conversionTarget.value = item
+  conversionModalOpen.value = true
+}
+
+const closeConversionModal = () => {
+  conversionModalOpen.value = false
+}
+
+const onConverted = () => {
+  conversionModalOpen.value = false
+  invalidateEntityTypeCache('PIECE')
+  invalidateEntityTypeCache('COMPONENT')
+  showSuccess('Catégorie convertie avec succès.')
+  doRefresh()
+}
+
+watch(
+  () => searchInput.value,
+  (value) => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      searchTerm.value = value.trim()
+      doRefresh({ resetOffset: true })
+    }, 300)
+  },
+)
+
+onMounted(() => {
+  doRefresh()
+})
+
+onBeforeUnmount(() => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (activeController) activeController.abort()
+})
+</script>
diff --git a/frontend/app/components/model-types/ModelTypeForm.vue b/frontend/app/components/model-types/ModelTypeForm.vue
new file mode 100644
index 0000000..83c365c
--- /dev/null
+++ b/frontend/app/components/model-types/ModelTypeForm.vue
@@ -0,0 +1,405 @@
+<template>
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <section class="space-y-4">
+      <div>
+        <label class="label" for="model-type-name">
+          <span class="label-text">Nom *</span>
+        </label>
+        <input
+          id="model-type-name"
+          ref="nameInput"
+          v-model.trim="form.name"
+          type="text"
+          class="input input-bordered w-full"
+          name="name"
+          minlength="2"
+          maxlength="120"
+          required
+          />
+        <p v-if="errors.name" class="mt-1 text-sm text-error">{{ errors.name }}</p>
+      </div>
+      <div>
+        <label class="label" for="model-type-category">
+          <span class="label-text">Catégorie *</span>
+        </label>
+        <select
+          id="model-type-category"
+          v-model="form.category"
+          class="select select-bordered w-full"
+          name="category"
+          required
+          :disabled="lockCategory || isReadonly"
+        >
+          <option value="COMPONENT">Composants</option>
+          <option value="PIECE">Pièces</option>
+          <option value="PRODUCT">Produits</option>
+        </select>
+      </div>
+
+      <div>
+        <label class="label" for="model-type-notes">
+          <span class="label-text">Notes</span>
+        </label>
+        <textarea
+          id="model-type-notes"
+          v-model.trim="form.notes"
+          class="textarea textarea-bordered w-full"
+          rows="4"
+          name="notes"
+          maxlength="2000"
+        ></textarea>
+        <p class="mt-1 text-xs text-base-content/70">Saisissez des informations complémentaires (facultatif).</p>
+      </div>
+    </section>
+
+    <section class="space-y-4">
+      <header>
+        <h3 class="text-lg font-semibold text-base-content">Structure du squelette</h3>
+        <p class="mt-1 text-sm text-base-content/70">
+          Définissez la structure canonique appliquée lors de la création des composants ou pièces de cette catégorie.
+        </p>
+      </header>
+
+      <div
+        v-if="structureLoading"
+        class="flex items-center justify-center rounded-lg border border-dashed border-base-300 py-12"
+      >
+        <span class="loading loading-spinner loading-lg" aria-hidden="true"></span>
+        <span class="ml-3 text-sm text-base-content/70">Chargement du squelette…</span>
+      </div>
+
+      <template v-else>
+        <div
+          v-if="form.category === 'COMPONENT'"
+          class="space-y-3 rounded-lg border border-base-300 p-4"
+        >
+          <p class="text-sm text-base-content/70">
+            Aperçu :
+            <span class="font-medium text-base-content">{{ componentStructurePreview }}</span>
+          </p>
+          <ComponentModelStructureEditor
+            v-model="componentStructure"
+            :allow-subcomponents="allowComponentSubcomponents"
+            :max-subcomponent-depth="componentSubcomponentMaxDepth"
+          />
+        </div>
+
+        <div
+          v-else-if="form.category === 'PIECE'"
+          class="space-y-3 rounded-lg border border-base-300 p-4"
+        >
+          <p class="text-sm text-base-content/70">
+            Aperçu :
+            <span class="font-medium text-base-content">{{ pieceStructurePreview }}</span>
+          </p>
+          <PieceModelStructureEditor v-model="pieceStructure" />
+        </div>
+
+        <div
+          v-else
+          class="space-y-3 rounded-lg border border-base-300 p-4"
+        >
+          <p class="text-sm text-base-content/70">
+            Aperçu :
+            <span class="font-medium text-base-content">{{ productStructurePreview }}</span>
+          </p>
+          <PieceModelStructureEditor v-model="productStructure" />
+        </div>
+      </template>
+    </section>
+
+    <ReferenceFormulaBuilder
+      v-if="form.category === 'PIECE' || form.category === 'COMPONENT'"
+      v-model="form.referenceFormula"
+      :custom-fields="formulaBuilderCustomFields"
+      :disabled="isReadonly"
+    />
+
+    <footer class="flex flex-col gap-3 border-t border-base-300 pt-4 sm:flex-row sm:justify-end">
+      <button type="button" class="btn btn-ghost" :disabled="saving" @click="emit('cancel')">
+        Annuler
+      </button>
+      <button v-if="!isReadonly" type="submit" class="btn btn-primary" :disabled="isSubmitDisabled">
+        <span v-if="saving" class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+        {{ submitLabel }}
+      </button>
+    </footer>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import ComponentModelStructureEditor from '~/components/ComponentModelStructureEditor.vue'
+import PieceModelStructureEditor from '~/components/PieceModelStructureEditor.vue'
+import {
+  clonePieceStructure,
+  cloneProductStructure,
+  cloneStructure,
+  defaultPieceStructure,
+  defaultProductStructure,
+  defaultStructure,
+  formatPieceStructurePreview,
+  formatProductStructurePreview,
+  formatStructurePreview,
+  normalizePieceStructureForSave,
+  normalizeProductStructureForSave,
+  normalizeStructureForEditor,
+  normalizeStructureForSave,
+} from '~/shared/modelUtils'
+import type { ModelCategory, ModelTypePayload } from '~/services/modelTypes'
+
+const props = withDefaults(defineProps<{
+  mode: 'create' | 'edit'
+  initialCategory: ModelCategory
+  initialData?: Partial<ModelTypePayload> | null
+  saving?: boolean
+  lockCategory?: boolean
+  structureLoading?: boolean
+  allowComponentSubcomponents?: boolean
+  componentSubcomponentMaxDepth?: number
+  readonly?: boolean
+}>(), {
+  initialData: null,
+  saving: false,
+  lockCategory: false,
+  structureLoading: false,
+  allowComponentSubcomponents: true,
+  componentSubcomponentMaxDepth: 1,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  (e: 'submit', payload: ModelTypePayload): void
+  (e: 'cancel'): void
+}>()
+
+const lockCategory = computed(() => props.lockCategory ?? false)
+const structureLoading = computed(() => props.structureLoading ?? false)
+const saving = computed(() => props.saving ?? false)
+const allowComponentSubcomponents = computed(() => props.allowComponentSubcomponents !== false)
+const componentSubcomponentMaxDepth = computed(() =>
+  typeof props.componentSubcomponentMaxDepth === 'number'
+    ? props.componentSubcomponentMaxDepth
+    : 1,
+)
+const isReadonly = computed(() => props.readonly === true)
+
+const form = reactive<ModelTypePayload & { referenceFormula?: string | null }>({
+  name: '',
+  code: '',
+  category: props.initialCategory,
+  notes: '',
+  structure: undefined,
+  referenceFormula: null,
+})
+
+const formulaBuilderCustomFields = computed(() => {
+  if (form.category === 'PIECE') {
+    const fields = pieceStructure.value?.customFields
+    return Array.isArray(fields) ? fields : []
+  }
+  if (form.category === 'COMPONENT') {
+    const fields = componentStructure.value?.customFields
+    return Array.isArray(fields) ? fields : []
+  }
+  return []
+})
+
+const extractFormulaFields = (formula: string | null | undefined): string[] => {
+  if (!formula) return []
+  const matches = [...formula.matchAll(/\{(\w+)\}/g)]
+  return [...new Set(matches.map(m => m[1]).filter((n): n is string => n !== undefined))]
+}
+
+const errors = reactive<{ name?: string }>({})
+const nameInput = ref<HTMLInputElement | null>(null)
+
+const componentStructure = ref(normalizeStructureForEditor(defaultStructure()))
+const pieceStructure = ref(normalizePieceStructureForSave(defaultPieceStructure()))
+const productStructure = ref(normalizeProductStructureForSave(defaultProductStructure()))
+
+const generateCodeFromName = (name: string) => {
+  const fallback = 'type'
+  if (!name) {
+    return fallback
+  }
+  return name
+    .normalize('NFD')
+    .replace(/[\u0300-\u036F]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-+/g, '-') || fallback
+}
+
+const resetStructures = (incomingStructure: ModelTypePayload['structure'], category: ModelCategory) => {
+  if (category === 'COMPONENT') {
+    componentStructure.value = normalizeStructureForEditor(
+      incomingStructure && props.initialData?.category === 'COMPONENT'
+        ? incomingStructure
+        : defaultStructure(),
+    )
+    return
+  }
+
+  if (category === 'PIECE') {
+    pieceStructure.value = normalizePieceStructureForSave(
+      incomingStructure && props.initialData?.category === 'PIECE'
+        ? incomingStructure
+        : defaultPieceStructure(),
+    )
+    return
+  }
+
+  productStructure.value = normalizeProductStructureForSave(
+    incomingStructure && props.initialData?.category === 'PRODUCT'
+      ? cloneProductStructure(incomingStructure)
+      : defaultProductStructure(),
+  )
+}
+
+const resetForm = () => {
+  const incoming = props.initialData ?? {}
+  form.name = typeof incoming.name === 'string' ? incoming.name : ''
+  form.code = typeof incoming.code === 'string' && incoming.code
+    ? incoming.code
+    : generateCodeFromName(form.name)
+  form.category = incoming.category ?? props.initialCategory
+  const incomingRecord = incoming as Record<string, unknown>
+  form.notes = typeof incoming.notes === 'string'
+    ? incoming.notes
+    : typeof incomingRecord.description === 'string'
+      ? incomingRecord.description
+      : ''
+
+  errors.name = undefined
+
+  const incomingAny = incoming as Record<string, unknown>
+  form.referenceFormula = typeof incomingAny.referenceFormula === 'string' ? incomingAny.referenceFormula : null
+
+  resetStructures(incoming.structure, form.category)
+}
+
+const submitLabel = computed(() => (props.mode === 'edit' ? 'Enregistrer' : 'Créer'))
+const isSubmitDisabled = computed(() => saving.value || structureLoading.value || isReadonly.value)
+
+const validate = () => {
+  errors.name = undefined
+
+  const trimmedName = form.name.trim()
+  if (trimmedName.length < 2) {
+    errors.name = 'Le nom doit contenir au moins 2 caractères.'
+  }
+  if (trimmedName.length > 120) {
+    errors.name = 'Le nom ne peut pas dépasser 120 caractères.'
+  }
+
+  return !errors.name
+}
+
+const handleSubmit = () => {
+  if (isReadonly.value) return
+  if (!validate()) {
+    return
+  }
+
+  const trimmedName = form.name.trim()
+  const resolvedCode = form.code?.trim()
+    ? form.code.trim()
+    : generateCodeFromName(trimmedName)
+
+  const common = {
+    name: trimmedName,
+    code: resolvedCode,
+    notes: form.notes?.trim() ? form.notes.trim() : undefined,
+  }
+
+  if (form.category === 'COMPONENT') {
+    const formula = form.referenceFormula || null
+    const requiredFields = extractFormulaFields(formula)
+    emit('submit', {
+      ...common,
+      category: 'COMPONENT',
+      structure: normalizeStructureForSave(cloneStructure(componentStructure.value)),
+      referenceFormula: formula,
+      requiredFieldsForReference: requiredFields.length ? requiredFields : null,
+    } as ModelTypePayload)
+    return
+  }
+
+  if (form.category === 'PIECE') {
+    const formula = form.referenceFormula || null
+    const requiredFields = extractFormulaFields(formula)
+    emit('submit', {
+      ...common,
+      category: 'PIECE',
+      structure: normalizePieceStructureForSave(clonePieceStructure(pieceStructure.value)),
+      referenceFormula: formula,
+      requiredFieldsForReference: requiredFields.length ? requiredFields : null,
+    } as ModelTypePayload)
+    return
+  }
+
+  emit('submit', {
+    ...common,
+    category: 'PRODUCT',
+    structure: normalizeProductStructureForSave(cloneProductStructure(productStructure.value)),
+  })
+}
+
+watch(
+  () => props.initialData,
+  () => {
+    resetForm()
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => form.name,
+  (value) => {
+    if (props.mode === 'create') {
+      form.code = generateCodeFromName(value)
+    }
+  },
+)
+
+watch(
+  () => props.initialCategory,
+  () => {
+    if (!props.initialData) {
+      form.category = props.initialCategory
+      resetStructures(undefined, form.category)
+    }
+  },
+)
+
+watch(
+  () => form.category,
+  (category, previous) => {
+    if (category === previous) {
+      return
+    }
+
+    if (category === 'COMPONENT') {
+      componentStructure.value = normalizeStructureForEditor(defaultStructure())
+    }
+
+    if (category === 'PIECE') {
+      pieceStructure.value = normalizePieceStructureForSave(defaultPieceStructure())
+    }
+
+    if (category === 'PRODUCT') {
+      productStructure.value = normalizeProductStructureForSave(defaultProductStructure())
+    }
+  },
+)
+
+const componentStructurePreview = computed(() => formatStructurePreview(componentStructure.value))
+const pieceStructurePreview = computed(() => formatPieceStructurePreview(pieceStructure.value))
+const productStructurePreview = computed(() => formatProductStructurePreview(productStructure.value))
+
+onMounted(() => {
+  nextTick(() => nameInput.value?.focus())
+})
+</script>
diff --git a/frontend/app/components/model-types/ReferenceFormulaBuilder.vue b/frontend/app/components/model-types/ReferenceFormulaBuilder.vue
new file mode 100644
index 0000000..5587f68
--- /dev/null
+++ b/frontend/app/components/model-types/ReferenceFormulaBuilder.vue
@@ -0,0 +1,115 @@
+<template>
+  <section class="space-y-4">
+    <header>
+      <h3 class="text-lg font-semibold text-base-content">Génération de référence automatique</h3>
+      <p class="mt-1 text-sm text-base-content/70">
+        Cliquez sur un champ pour l'insérer dans la formule. Vous pouvez aussi taper du texte libre (séparateurs, préfixes…).
+      </p>
+    </header>
+
+    <div class="rounded-lg border border-base-300 p-4 space-y-4">
+      <div v-if="fieldNames.length" class="flex flex-wrap gap-2">
+        <button
+          v-for="name in fieldNames"
+          :key="name"
+          type="button"
+          class="btn btn-xs btn-outline btn-primary font-mono"
+          :disabled="disabled"
+          @click="insertField(name)"
+        >
+          {{ name }}
+        </button>
+      </div>
+      <p v-else class="text-sm text-base-content/50 italic">
+        Aucun champ personnalisé défini dans la structure.
+      </p>
+
+      <div>
+        <label class="label" for="reference-formula">
+          <span class="label-text">Formule</span>
+        </label>
+        <input
+          id="reference-formula"
+          ref="inputRef"
+          :value="modelValue"
+          type="text"
+          class="input input-bordered w-full font-mono"
+          placeholder="Ex: SNU {serie}-{diametre}/{type}"
+          :disabled="disabled"
+          @input="emit('update:modelValue', ($event.target as HTMLInputElement).value || null)"
+        />
+        <p class="mt-1 text-xs text-base-content/60">
+          Laissez vide si ce type n'utilise pas de référence automatique.
+        </p>
+      </div>
+
+      <div v-if="modelValue" class="rounded bg-base-200 px-3 py-2 text-sm">
+        <span class="text-base-content/70">Aperçu :</span>
+        <span class="ml-1 font-mono font-semibold">{{ preview }}</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+
+interface CustomField {
+  name: string
+  type: string
+}
+
+const props = defineProps<{
+  modelValue: string | null | undefined
+  customFields: CustomField[]
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const fieldNames = computed(() =>
+  props.customFields.map(f => f.name).filter((n): n is string => Boolean(n)),
+)
+
+const previewExamples: Record<string, string> = {
+  text: 'VALEUR',
+  number: '123',
+  select: 'OPTION',
+  boolean: 'OUI',
+  date: '2026-01-01',
+}
+
+const preview = computed(() => {
+  if (!props.modelValue) return ''
+  const fieldMap = new Map<string, string>()
+  for (const f of props.customFields) {
+    if (f.name) {
+      fieldMap.set(f.name, previewExamples[f.type] ?? 'VALEUR')
+    }
+  }
+  return props.modelValue.replace(/\{(\w+)\}/g, (_, name) => fieldMap.get(name) ?? '???')
+})
+
+const insertField = (fieldName: string) => {
+  const placeholder = `{${fieldName}}`
+  const input = inputRef.value
+  const current = props.modelValue ?? ''
+  if (!input) {
+    emit('update:modelValue', current + placeholder)
+    return
+  }
+  const start = input.selectionStart ?? current.length
+  const end = input.selectionEnd ?? start
+  const updated = current.slice(0, start) + placeholder + current.slice(end)
+  emit('update:modelValue', updated)
+  nextTick(() => {
+    const newPos = start + placeholder.length
+    input.focus()
+    input.setSelectionRange(newPos, newPos)
+  })
+}
+</script>
diff --git a/frontend/app/components/model-types/RelatedItemsModal.vue b/frontend/app/components/model-types/RelatedItemsModal.vue
new file mode 100644
index 0000000..646d76c
--- /dev/null
+++ b/frontend/app/components/model-types/RelatedItemsModal.vue
@@ -0,0 +1,182 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': open }">
+    <div class="modal-box max-w-3xl">
+      <h3 class="text-lg font-bold text-base-content">
+        {{ modalTitle }}
+      </h3>
+      <p class="mt-1 text-sm text-base-content/70">
+        {{ modalSubtitle }}
+      </p>
+
+      <div class="mt-4 rounded-xl border border-base-200 bg-base-100">
+        <div v-if="loading" class="flex items-center gap-2 px-4 py-6 text-sm text-info">
+          <span class="loading loading-spinner loading-sm" aria-hidden="true" />
+          Chargement des éléments liés…
+        </div>
+
+        <div v-else-if="error" class="px-4 py-6 text-sm text-error">
+          {{ error }}
+        </div>
+
+        <div
+          v-else-if="items.length === 0"
+          class="px-4 py-6 text-sm text-base-content/60"
+        >
+          Aucun élément lié à cette catégorie.
+        </div>
+
+        <ul v-else class="max-h-96 divide-y divide-base-200 overflow-y-auto">
+          <li
+            v-for="entry in items"
+            :key="entry.id"
+            class="px-2 py-1"
+          >
+            <button
+              type="button"
+              class="flex w-full flex-col gap-1 rounded-lg px-2 py-2 text-left hover:bg-base-200 focus:bg-base-200 focus:outline-none"
+              @click="onOpenEdit(entry)"
+            >
+              <span class="font-medium text-base-content">{{ entry.name }}</span>
+              <span v-if="entry.reference" class="text-xs text-base-content/60">
+                Référence: {{ entry.reference }}
+              </span>
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <div class="modal-action">
+        <button type="button" class="btn" @click="emit('close')">
+          Fermer
+        </button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import type { ModelCategory, ModelType } from '~/services/modelTypes'
+
+type RelatedEntry = {
+  id: string
+  name: string
+  reference?: string | null
+}
+
+const props = defineProps<{
+  open: boolean
+  modelType: ModelType | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  'open-edit': [entry: RelatedEntry]
+}>()
+
+const { get } = useApi()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const items = ref<RelatedEntry[]>([])
+
+const categoryLabels: Record<ModelCategory, { plural: string, singular: string }> = {
+  COMPONENT: { plural: 'composants', singular: 'composant' },
+  PIECE: { plural: 'pièces', singular: 'pièce' },
+  PRODUCT: { plural: 'produits', singular: 'produit' },
+}
+
+const modalTitle = computed(() => {
+  if (!props.modelType) return 'Éléments liés'
+  return `Éléments liés à « ${props.modelType.name} »`
+})
+
+const modalSubtitle = computed(() => {
+  if (!props.modelType) return ''
+  const labels = categoryLabels[props.modelType.category] ?? categoryLabels.COMPONENT
+  const count = items.value.length
+  if (loading.value) return `Chargement des ${labels.plural}…`
+  if (count === 0) return `Aucun ${labels.singular} lié.`
+  if (count === 1) return `1 ${labels.singular} lié.`
+  return `${count} ${labels.plural} liés.`
+})
+
+const resolveRelatedConfig = (category: ModelCategory) => {
+  if (category === 'COMPONENT') return { endpoint: '/composants', filterKey: 'typeComposant' }
+  if (category === 'PIECE') return { endpoint: '/pieces', filterKey: 'typePiece' }
+  return { endpoint: '/products', filterKey: 'typeProduct' }
+}
+
+const mapRelatedEntry = (item: unknown): RelatedEntry | null => {
+  if (!item || typeof item !== 'object') return null
+  const record = item as Record<string, unknown>
+  if (typeof record.id !== 'string') return null
+  const name = typeof record.name === 'string' && record.name.trim() ? record.name : 'Sans nom'
+  const reference
+    = typeof record.reference === 'string' && record.reference.trim()
+      ? record.reference
+      : typeof record.code === 'string' && record.code.trim()
+        ? record.code
+        : null
+  return { id: record.id, name, reference }
+}
+
+const loadRelatedItems = async (modelType: ModelType) => {
+  const { endpoint, filterKey } = resolveRelatedConfig(modelType.category)
+  const params = new URLSearchParams()
+  params.set('itemsPerPage', '200')
+  params.set(filterKey, `/api/model_types/${modelType.id}`)
+  params.set('order[name]', 'asc')
+
+  loading.value = true
+  error.value = null
+  items.value = []
+
+  try {
+    const result = await get(`${endpoint}?${params.toString()}`)
+    if (!result.success) {
+      error.value = result.error ?? 'Impossible de charger les éléments liés.'
+      return
+    }
+    const collection = extractCollection(result.data)
+    items.value = collection
+      .map(mapRelatedEntry)
+      .filter((entry): entry is RelatedEntry => Boolean(entry))
+  }
+  catch (err) {
+    let raw: string | null = null
+    if (err && typeof err === 'object') {
+      const e = err as { data?: Record<string, unknown>, statusMessage?: string, message?: string }
+      if (e.data) {
+        const data = e.data
+        if (typeof data['hydra:description'] === 'string') raw = data['hydra:description']
+        else if (typeof data.detail === 'string') raw = data.detail
+        else if (typeof data.message === 'string') raw = data.message
+        else if (typeof data.error === 'string') raw = data.error
+      }
+      if (!raw && typeof e.statusMessage === 'string') raw = e.statusMessage
+      if (!raw && typeof e.message === 'string') raw = e.message
+    }
+    error.value = humanizeError(raw)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const onOpenEdit = (entry: RelatedEntry) => {
+  emit('open-edit', entry)
+}
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen && props.modelType) {
+      void loadRelatedItems(props.modelType)
+    }
+  },
+)
+</script>
diff --git a/frontend/app/components/model-types/Table.vue b/frontend/app/components/model-types/Table.vue
new file mode 100644
index 0000000..53718cd
--- /dev/null
+++ b/frontend/app/components/model-types/Table.vue
@@ -0,0 +1,190 @@
+<template>
+  <section class="space-y-4" aria-live="polite">
+    <header class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <h2 class="text-xl font-semibold text-base-content">Catégories enregistrées</h2>
+        <p class="text-sm text-base-content/70">
+          {{ totalLabel }}
+        </p>
+      </div>
+      <p v-if="loading" class="text-sm text-info flex items-center gap-2">
+        <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
+        Chargement en cours…
+      </p>
+    </header>
+
+    <div v-if="loading && items.length === 0" class="space-y-3" role="status" aria-live="polite">
+      <div
+        v-for="index in 3"
+        :key="index"
+        class="rounded-xl border border-base-200 bg-base-200/70 animate-pulse h-24"
+      ></div>
+    </div>
+
+    <div v-else-if="items.length === 0" class="rounded-xl border border-dashed border-base-200 p-10 text-center">
+      <IconLucideInbox class="mx-auto h-12 w-12 text-base-content/30" aria-hidden="true" />
+      <h3 class="mt-4 text-lg font-medium text-base-content">Aucune catégorie trouvée</h3>
+      <p class="text-sm text-base-content/70">Ajustez votre recherche ou créez une nouvelle catégorie.</p>
+    </div>
+
+    <div v-else class="space-y-6">
+      <div class="hidden sm:block overflow-x-auto">
+        <table class="table">
+          <thead>
+            <tr class="text-base-content/70">
+              <th scope="col">Nom</th>
+              <th scope="col">Notes</th>
+              <th scope="col" class="w-48 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in items" :key="item.id">
+              <td class="font-medium">{{ item.name }}</td>
+              <td class="max-w-xs align-middle">
+                <span v-if="item.notes" class="block text-sm text-base-content/80 break-words">{{ item.notes }}</span>
+                <span v-else class="text-base-content/50">—</span>
+              </td>
+              <td class="text-right space-x-2">
+                <button type="button" class="btn btn-ghost btn-sm" @click="emit('related', item)">
+                  Liés
+                </button>
+                <button
+                  v-if="canEdit && showConvertButton"
+                  type="button"
+                  class="btn btn-ghost btn-sm text-warning"
+                  @click="emit('convert', item)"
+                >
+                  <IconLucideArrowLeftRight class="h-4 w-4" aria-hidden="true" />
+                  Convertir
+                </button>
+                <button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
+                  Éditer
+                </button>
+                <button v-if="canEdit" type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
+                  Supprimer
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="grid gap-4 sm:hidden">
+        <article
+          v-for="item in items"
+          :key="item.id"
+          class="rounded-xl border border-base-200 bg-base-100 p-4 shadow-sm"
+        >
+          <header class="flex items-start justify-between gap-3">
+            <div>
+              <h3 class="text-lg font-semibold text-base-content">{{ item.name }}</h3>
+              <p class="text-sm text-base-content/60">{{ categoryLabel(item.category) }}</p>
+            </div>
+          </header>
+          <p class="mt-3 text-sm text-base-content/80" v-if="item.notes">{{ item.notes }}</p>
+          <p class="mt-3 text-sm text-base-content/50" v-else>Pas de notes</p>
+          <footer class="mt-4 flex flex-wrap items-center gap-2 justify-end">
+            <button type="button" class="btn btn-ghost btn-sm" @click="emit('related', item)">
+              Liés
+            </button>
+            <button
+              v-if="canEdit && showConvertButton"
+              type="button"
+              class="btn btn-ghost btn-sm text-warning"
+              @click="emit('convert', item)"
+            >
+              <IconLucideArrowLeftRight class="h-4 w-4" aria-hidden="true" />
+              Convertir
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
+              Éditer
+            </button>
+            <button v-if="canEdit" type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
+              Supprimer
+            </button>
+          </footer>
+        </article>
+      </div>
+
+      <nav class="flex flex-wrap items-center justify-between gap-3" aria-label="Pagination">
+        <span class="text-sm text-base-content/70">
+          Page {{ currentPage }} sur {{ totalPages }}
+        </span>
+        <div class="join">
+          <button
+            type="button"
+            class="btn btn-outline btn-sm join-item"
+            :disabled="!canGoPrevious"
+            @click="emit('update:offset', Math.max(0, offset - limit))"
+          >
+            Précédent
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline btn-sm join-item"
+            :disabled="!canGoNext"
+            @click="emit('update:offset', offset + limit)"
+          >
+            Suivant
+          </button>
+        </div>
+      </nav>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import IconLucideInbox from '~icons/lucide/inbox';
+import IconLucideArrowLeftRight from '~icons/lucide/arrow-left-right';
+import type { ModelType, ModelCategory } from '~/services/modelTypes';
+
+const props = defineProps<{
+  items: ModelType[];
+  loading: boolean;
+  total: number;
+  limit: number;
+  offset: number;
+  category?: ModelCategory;
+  canEdit?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'related', item: ModelType): void;
+  (e: 'edit', item: ModelType): void;
+  (e: 'delete', item: ModelType): void;
+  (e: 'convert', item: ModelType): void;
+  (e: 'update:offset', offset: number): void;
+}>();
+
+const showConvertButton = computed(() =>
+  props.category === 'PIECE' || props.category === 'COMPONENT',
+);
+
+const categoryDictionary: Record<ModelCategory, string> = {
+  COMPONENT: 'Composants',
+  PIECE: 'Pièces',
+  PRODUCT: 'Produits',
+};
+
+const categoryLabel = (category: ModelCategory) => categoryDictionary[category] ?? category;
+
+const currentPage = computed(() => {
+  if (props.limit <= 0) return 1;
+  return Math.floor(props.offset / props.limit) + 1;
+});
+
+const totalPages = computed(() => {
+  if (props.limit <= 0) return 1;
+  return Math.max(1, Math.ceil(props.total / props.limit));
+});
+
+const canGoPrevious = computed(() => props.offset > 0);
+const canGoNext = computed(() => props.offset + props.limit < props.total);
+
+const totalLabel = computed(() => {
+  if (props.total === 0) return 'Aucun résultat';
+  if (props.total === 1) return '1 catégorie trouvée';
+  return `${props.total} catégories trouvées`;
+});
+</script>
diff --git a/frontend/app/components/model-types/Toolbar.vue b/frontend/app/components/model-types/Toolbar.vue
new file mode 100644
index 0000000..362e542
--- /dev/null
+++ b/frontend/app/components/model-types/Toolbar.vue
@@ -0,0 +1,116 @@
+<template>
+  <section class="space-y-4">
+    <nav
+      v-if="displayCategoryTabs"
+      class="tabs tabs-boxed inline-flex"
+      role="tablist"
+      aria-label="Catégories"
+    >
+      <button
+        v-for="option in categories"
+        :key="option.value"
+        type="button"
+        class="tab"
+        :class="{ 'tab-active': option.value === category }"
+        role="tab"
+        :aria-selected="option.value === category"
+        @click="emit('update:category', option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </nav>
+
+    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <label class="input input-bordered flex items-center gap-2 w-full sm:w-72" :aria-busy="loading">
+          <IconLucideSearch class="w-4 h-4" aria-hidden="true" />
+          <input
+            :value="search"
+            type="search"
+            class="grow min-w-0"
+            placeholder="Rechercher par nom…"
+            autocomplete="off"
+            @input="onSearch"
+          />
+        </label>
+
+        <div class="flex items-center gap-2">
+          <label class="text-sm font-medium text-base-content/70" for="model-type-sort">Trier par</label>
+          <select
+            id="model-type-sort"
+            class="select select-bordered select-sm"
+            :value="sort"
+            @change="emit('update:sort', ($event.target as HTMLSelectElement).value as SortField)"
+          >
+            <option value="name">Nom</option>
+            <option value="createdAt">Date de création</option>
+          </select>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <label class="text-sm font-medium text-base-content/70" for="model-type-dir">Ordre</label>
+          <select
+            id="model-type-dir"
+            class="select select-bordered select-sm"
+            :value="dir"
+            @change="emit('update:dir', ($event.target as HTMLSelectElement).value as SortDirection)"
+          >
+            <option value="asc">Ascendant</option>
+            <option value="desc">Descendant</option>
+          </select>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-primary self-start"
+        :disabled="loading"
+        @click="emit('create')"
+      >
+        <IconLucidePlus class="w-4 h-4" aria-hidden="true" />
+        Créer
+      </button>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import IconLucidePlus from '~icons/lucide/plus';
+import IconLucideSearch from '~icons/lucide/search';
+import type { ModelCategory } from '~/services/modelTypes';
+
+type SortField = 'name' | 'createdAt';
+type SortDirection = 'asc' | 'desc';
+
+const props = defineProps<{
+  category: ModelCategory;
+  search: string;
+  sort: SortField;
+  dir: SortDirection;
+  loading?: boolean;
+  showCategoryTabs?: boolean;
+  canEdit?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:category', value: ModelCategory): void;
+  (e: 'update:search', value: string): void;
+  (e: 'update:sort', value: SortField): void;
+  (e: 'update:dir', value: SortDirection): void;
+  (e: 'create'): void;
+}>();
+
+const categories: Array<{ label: string; value: ModelCategory }> = [
+  { label: 'Composants', value: 'COMPONENT' },
+  { label: 'Pièces', value: 'PIECE' },
+  { label: 'Produits', value: 'PRODUCT' },
+];
+
+const onSearch = (event: Event) => {
+  emit('update:search', (event.target as HTMLInputElement).value);
+};
+
+const loading = computed(() => props.loading ?? false);
+const displayCategoryTabs = computed(() => props.showCategoryTabs ?? true);
+</script>
diff --git a/frontend/app/components/sites/SiteCard.vue b/frontend/app/components/sites/SiteCard.vue
new file mode 100644
index 0000000..534b3fe
--- /dev/null
+++ b/frontend/app/components/sites/SiteCard.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
+    :style="{
+      borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+      background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+    }"
+  >
+    <div class="card-body">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="card-title text-lg text-base-content">
+          {{ site.name }}
+        </h3>
+        <div
+          class="badge font-bold"
+          :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+          :class="!site.color ? 'badge-primary' : ''"
+        >
+          {{ machineCount }} machines
+        </div>
+      </div>
+
+      <div class="space-y-3 text-sm">
+        <div class="flex items-center gap-2 text-base-content/80">
+          <IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
+          <span class="font-medium">{{ site.contactName }}</span>
+        </div>
+
+        <div class="flex items-center gap-2 text-base-content/60">
+          <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
+          <span>{{ formattedContactPhone }}</span>
+        </div>
+
+        <div class="flex items-start gap-2 text-base-content/60">
+          <IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
+          <span>
+            {{ site.contactAddress }}<br>
+            {{ site.contactPostalCode }} {{ site.contactCity }}
+          </span>
+        </div>
+
+        <div class="flex items-center gap-2 text-base-content/60">
+          <IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
+          <span>{{ machineCount }} machine(s)</span>
+        </div>
+      </div>
+
+      <div class="card-actions justify-end mt-4">
+        <button class="btn btn-sm btn-outline" @click="emit('edit', site)">
+          {{ canEdit ? 'Modifier' : 'Consulter' }}
+        </button>
+        <button v-if="canEdit" class="btn btn-sm btn-error" @click="emit('delete', site)">
+          Supprimer
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import IconLucideFactory from '~icons/lucide/factory'
+import IconLucideMapPin from '~icons/lucide/map-pin'
+import IconLucidePhone from '~icons/lucide/phone'
+import IconLucideUser from '~icons/lucide/user'
+import { formatPhone } from '~/utils/formatters/phone'
+
+const { canEdit } = usePermissions()
+
+const props = defineProps({
+  site: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['edit', 'delete'])
+
+const machineCount = computed(() => props.site?.machines?.length || 0)
+const formattedContactPhone = computed(() => {
+  const value = props.site?.contactPhone ?? ''
+  const formatted = formatPhone(value)
+  return formatted || value || '—'
+})
+</script>
diff --git a/frontend/app/components/sites/SiteContactFormFields.vue b/frontend/app/components/sites/SiteContactFormFields.vue
new file mode 100644
index 0000000..9217d0f
--- /dev/null
+++ b/frontend/app/components/sites/SiteContactFormFields.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="grid grid-cols-1 gap-4">
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Nom du contact</span>
+      </label>
+      <input
+        v-model="contactName"
+        type="text"
+        placeholder="Nom et prénom"
+        class="input input-bordered"
+        :disabled="disabled"
+        required
+      />
+    </div>
+
+    <FieldPhone v-model="contactPhone" :disabled="disabled" required />
+
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Adresse</span>
+      </label>
+      <input
+        v-model="contactAddress"
+        type="text"
+        placeholder="Adresse complète"
+        class="input input-bordered"
+        :disabled="disabled"
+        required
+      />
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label">
+          <span class="label-text">Code postal</span>
+        </label>
+        <input
+          v-model="contactPostalCode"
+          type="text"
+          placeholder="Code postal"
+          class="input input-bordered"
+          :disabled="disabled"
+          required
+        />
+      </div>
+
+      <div class="form-control">
+        <label class="label">
+          <span class="label-text">Ville</span>
+        </label>
+        <input
+          v-model="contactCity"
+          type="text"
+          placeholder="Ville"
+          class="input input-bordered"
+          :disabled="disabled"
+          required
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import type { PropType } from 'vue'
+
+import FieldPhone from '~/components/form/FieldPhone.vue'
+
+type SiteForm = {
+  contactName: string
+  contactPhone: string
+  contactAddress: string
+  contactPostalCode: string
+  contactCity: string
+}
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<SiteForm>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const form = toRef(props, 'form')
+
+const contactName = computed({
+  get: () => form.value.contactName,
+  set: (value: string) => {
+    form.value.contactName = value
+  },
+})
+
+const contactPhone = computed({
+  get: () => form.value.contactPhone,
+  set: (value: string) => {
+    form.value.contactPhone = value
+  },
+})
+
+const contactAddress = computed({
+  get: () => form.value.contactAddress,
+  set: (value: string) => {
+    form.value.contactAddress = value
+  },
+})
+
+const contactPostalCode = computed({
+  get: () => form.value.contactPostalCode,
+  set: (value: string) => {
+    form.value.contactPostalCode = value
+  },
+})
+
+const contactCity = computed({
+  get: () => form.value.contactCity,
+  set: (value: string) => {
+    form.value.contactCity = value
+  },
+})
+</script>
+
+<!--
+  Bloc de formulaire partagé pour la saisie/édition des informations de contact d'un site.
+  Utilisation :
+  <SiteContactFormFields :form="siteForm" />
+-->
diff --git a/frontend/app/components/sites/SiteCreateModal.vue b/frontend/app/components/sites/SiteCreateModal.vue
new file mode 100644
index 0000000..09d1e7c
--- /dev/null
+++ b/frontend/app/components/sites/SiteCreateModal.vue
@@ -0,0 +1,115 @@
+<template>
+  <div v-if="visible" class="modal modal-open">
+    <div class="modal-box max-w-md">
+      <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
+      <form @submit.prevent="emit('submit')" class="space-y-4">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom du site</span>
+          </label>
+          <input
+            v-model="siteName"
+            type="text"
+            placeholder="Ex: Usine principale"
+            class="input input-bordered"
+            :disabled="disabled"
+            required
+          />
+        </div>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="siteRef.color" class="flex items-center gap-3">
+            <input
+              :value="siteRef.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
+            >
+            <input
+              v-model="siteRef.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="siteRef.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="siteRef.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
+        <SiteContactFormFields :form="siteRef" :disabled="disabled" />
+
+        <div class="modal-action">
+          <button type="button" class="btn" @click="emit('close')">
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer le site
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import type { PropType } from 'vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+
+type SiteForm = {
+  name: string
+  color: string
+  contactName: string
+  contactPhone: string
+  contactAddress: string
+  contactPostalCode: string
+  contactCity: string
+}
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  site: {
+    type: Object as PropType<SiteForm>,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const siteRef = toRef(props, 'site')
+
+const siteName = computed({
+  get: () => siteRef.value.name,
+  set: (value: string) => {
+    siteRef.value.name = value
+  }
+})
+</script>
diff --git a/frontend/app/components/sites/SiteEditModal.vue b/frontend/app/components/sites/SiteEditModal.vue
new file mode 100644
index 0000000..ee4a059
--- /dev/null
+++ b/frontend/app/components/sites/SiteEditModal.vue
@@ -0,0 +1,220 @@
+<template>
+  <div v-if="visible" class="modal modal-open">
+    <div class="modal-box max-w-md">
+      <h3 class="font-bold text-lg mb-4">
+        {{ disabled ? 'Détails du site' : 'Modifier le site' }}
+        <span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
+      </h3>
+      <form class="space-y-4" @submit.prevent="emit('submit')">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom du site</span>
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="Nom du site"
+            class="input input-bordered"
+            :disabled="disabled"
+            required
+          >
+        </div>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="form.color" class="flex items-center gap-3">
+            <input
+              :value="form.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="form.color = $event.target.value"
+            >
+            <input
+              v-model="form.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="form.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="form.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
+        <SiteContactFormFields :form="props.form" :disabled="disabled" />
+
+        <div class="border-t border-base-200 pt-4 space-y-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <h4 class="font-semibold text-sm">
+                Documents liés
+              </h4>
+              <p class="text-xs text-base-content/50">
+                Ajoutez des documents (PDF, images...) relatifs à ce site.
+              </p>
+            </div>
+            <span v-if="selectedFilesModel.length" class="badge badge-outline">
+              {{ selectedFilesModel.length }} fichier{{ selectedFilesModel.length > 1 ? 's' : '' }} prêt{{ selectedFilesModel.length > 1 ? 's' : '' }} à être ajouté
+            </span>
+          </div>
+
+          <DocumentUpload
+            v-if="!disabled"
+            v-model="selectedFilesModel"
+            title="Déposer vos fichiers"
+            subtitle="Formats courants acceptés : PDF, JPG, PNG, DOCX..."
+          />
+
+          <div v-if="documents.length" class="space-y-3">
+            <h5 class="text-sm font-medium">
+              Documents existants
+            </h5>
+            <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
+              <div
+                v-for="document in documents"
+                :key="document.id"
+                class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+              >
+                <div class="flex items-center gap-3 text-sm">
+                  <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
+                    <img
+                      v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+                      :src="document.fileUrl || document.path"
+                      class="h-full w-full object-cover"
+                      :alt="`Aperçu de ${document.name}`"
+                    >
+                    <component
+                      v-else
+                      :is="documentIcon(document).component"
+                      class="h-6 w-6"
+                      :class="documentIcon(document).colorClass"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div>
+                    <div class="font-medium">
+                      {{ document.name }}
+                    </div>
+                    <div class="text-xs text-base-content/50">
+                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-xs"
+                    :disabled="!canPreviewDocument(document)"
+                    :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+                    @click="emit('preview-document', document)"
+                  >
+                    Consulter
+                  </button>
+                  <button type="button" class="btn btn-ghost btn-xs" @click="emit('download-document', document)">
+                    Télécharger
+                  </button>
+                  <button v-if="!disabled" type="button" class="btn btn-error btn-xs" @click="emit('remove-document', document.id)">
+                    Supprimer
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-action">
+          <button type="button" class="btn" @click="emit('close')">
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled || uploadingDocuments">
+            <span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2" />
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { isImageDocument } from '~/utils/documentPreview'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  siteName: {
+    type: String,
+    default: ''
+  },
+  form: {
+    type: Object,
+    required: true
+  },
+  documents: {
+    type: Array,
+    default: () => []
+  },
+  selectedFiles: {
+    type: Array,
+    default: () => []
+  },
+  uploadingDocuments: {
+    type: Boolean,
+    default: false
+  },
+  canPreviewDocument: {
+    type: Function,
+    required: true
+  },
+  documentIcon: {
+    type: Function,
+    required: true
+  },
+  formatSize: {
+    type: Function,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits([
+  'close',
+  'submit',
+  'remove-document',
+  'download-document',
+  'preview-document',
+  'update:selectedFiles'
+])
+
+const selectedFilesModel = computed({
+  get: () => props.selectedFiles,
+  set: value => emit('update:selectedFiles', value)
+})
+</script>
diff --git a/frontend/app/composables/useActivityLog.ts b/frontend/app/composables/useActivityLog.ts
new file mode 100644
index 0000000..03d039b
--- /dev/null
+++ b/frontend/app/composables/useActivityLog.ts
@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+
+export type ActivityLogActor = {
+  id: string
+  label: string
+}
+
+export type ActivityLogEntry = {
+  id: string
+  entityType: string
+  entityId: string
+  entityName: string | null
+  entityRef: string | null
+  action: 'create' | 'update' | 'delete' | string
+  createdAt: string
+  actor: ActivityLogActor | null
+  diff: Record<string, { from: unknown; to: unknown }> | null
+  snapshot: Record<string, unknown> | null
+}
+
+interface LoadActivityLogOptions {
+  page?: number
+  itemsPerPage?: number
+  entityType?: string
+  action?: string
+}
+
+export function useActivityLog() {
+  const { get } = useApi()
+
+  const entries = ref<ActivityLogEntry[]>([])
+  const total = ref(0)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const loadActivityLog = async (options: LoadActivityLogOptions = {}) => {
+    loading.value = true
+    error.value = null
+    try {
+      const params = new URLSearchParams()
+      params.set('page', String(options.page ?? 1))
+      params.set('itemsPerPage', String(options.itemsPerPage ?? 30))
+      if (options.entityType) params.set('entityType', options.entityType)
+      if (options.action) params.set('action', options.action)
+
+      const result = await get(`/activity-logs?${params.toString()}`)
+      if (!result.success) {
+        error.value = result.error ?? 'Impossible de charger le journal d\'activité.'
+        entries.value = []
+        return result
+      }
+
+      const data = result.data as any
+      entries.value = Array.isArray(data?.items) ? data.items : []
+      total.value = typeof data?.total === 'number' ? data.total : entries.value.length
+
+      return { success: true, data: entries.value }
+    } catch (err: any) {
+      const message = err?.message ?? 'Erreur inconnue'
+      error.value = message
+      entries.value = []
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { entries, total, loading, error, loadActivityLog }
+}
diff --git a/frontend/app/composables/useAdminProfiles.ts b/frontend/app/composables/useAdminProfiles.ts
new file mode 100644
index 0000000..230eeb4
--- /dev/null
+++ b/frontend/app/composables/useAdminProfiles.ts
@@ -0,0 +1,80 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+
+export interface AdminProfile {
+  id: string
+  firstName: string
+  lastName: string
+  email: string | null
+  isActive: boolean
+  hasPassword: boolean
+  roles: string[]
+  createdAt: string
+  updatedAt: string
+}
+
+export function useAdminProfiles() {
+  const { get, post, put } = useApi()
+  const profiles = ref<AdminProfile[]>([])
+  const loading = ref(false)
+
+  const fetchAll = async () => {
+    loading.value = true
+    try {
+      const result = await get<AdminProfile[]>('/admin/profiles')
+      if (result.success && result.data) {
+        profiles.value = result.data
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createProfile = async (data: {
+    firstName: string
+    lastName: string
+    email?: string
+    password?: string
+    role?: string
+  }) => {
+    const result = await post<AdminProfile>('/admin/profiles', data)
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const updateRole = async (id: string, role: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/role`, { role })
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const setPassword = async (id: string, password: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/password`, { password })
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const deactivateProfile = async (id: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/deactivate`, {})
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  return {
+    profiles,
+    loading,
+    fetchAll,
+    createProfile,
+    updateRole,
+    setPassword,
+    deactivateProfile,
+  }
+}
diff --git a/frontend/app/composables/useApi.ts b/frontend/app/composables/useApi.ts
new file mode 100644
index 0000000..cecb7b3
--- /dev/null
+++ b/frontend/app/composables/useApi.ts
@@ -0,0 +1,141 @@
+import { useToast } from './useToast'
+import { humanizeError, extractApiErrorMessage } from '~/shared/utils/errorMessages'
+
+export interface ApiResponse<T = any> {
+  success: boolean
+  data?: T
+  error?: string
+  status?: number
+}
+
+interface ApiCallOptions extends RequestInit {
+  headers?: Record<string, string>
+}
+
+export function useApi() {
+  const { showError } = useToast()
+  const { public: publicConfig } = useRuntimeConfig()
+  const API_BASE_URL = (publicConfig.apiBaseUrl as string) || 'http://localhost:3000'
+  const parsedApiTimeout = Number(publicConfig.apiTimeout ?? 30000)
+  const API_TIMEOUT = Number.isNaN(parsedApiTimeout) ? 30000 : parsedApiTimeout
+
+  const apiCall = async <T = any>(endpoint: string, options: ApiCallOptions = {}): Promise<ApiResponse<T>> => {
+    const url = `${API_BASE_URL}${endpoint}`
+    const isFormData = options.body instanceof FormData
+    const defaultOptions: ApiCallOptions = {
+      credentials: 'include',
+      headers: isFormData ? {} : { 'Content-Type': 'application/json' },
+    }
+
+    // Ajouter un timeout à la requête
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), API_TIMEOUT)
+
+    try {
+      const response = await fetch(url, {
+        ...defaultOptions,
+        ...options,
+        headers: {
+          ...defaultOptions.headers,
+          ...options.headers,
+        },
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+
+      if (response.ok) {
+        let data: T | null = null
+        if (response.status !== 204) {
+          const contentType = response.headers.get('content-type') || ''
+          if (contentType.includes('application/json') || contentType.includes('application/ld+json') || contentType.includes('+json')) {
+            const text = await response.text()
+            data = text ? JSON.parse(text) : null
+          } else {
+            const text = await response.text()
+            data = (text || null) as T | null
+          }
+        }
+        return { success: true, data: data as T }
+      } else {
+        const contentType = response.headers.get('content-type') || ''
+        let errorData: Record<string, unknown> = {}
+        if (contentType.includes('json')) {
+          errorData = await response.json().catch(() => ({}))
+        } else {
+          const text = await response.text().catch(() => '')
+          errorData = text ? { message: text } : {}
+        }
+        const rawMessage = response.status === 403
+          ? 'Permissions insuffisantes pour cette action.'
+          : extractApiErrorMessage(errorData) || `Erreur ${response.status}: ${response.statusText}`
+        const errorMessage = humanizeError(rawMessage)
+        showError(errorMessage)
+        return { success: false, error: errorMessage, status: response.status }
+      }
+    } catch (error) {
+      clearTimeout(timeoutId)
+      const err = error as Error & { name?: string }
+      const errorMessage = err.name === 'AbortError'
+        ? 'La requête a pris trop de temps. Veuillez réessayer.'
+        : 'Impossible de contacter le serveur. Vérifiez votre connexion.'
+      showError(errorMessage)
+      return { success: false, error: errorMessage }
+    }
+  }
+
+  const get = async <T = any>(endpoint: string): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, { method: 'GET' })
+  }
+
+  const post = async <T = any>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/ld+json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  const patch = async <T = any>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/merge-patch+json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  const put = async <T = any>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/ld+json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  const postFormData = async <T = any>(endpoint: string, formData: FormData): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'POST',
+      body: formData,
+    })
+  }
+
+  const del = async <T = any>(endpoint: string): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, { method: 'DELETE' })
+  }
+
+  return {
+    apiCall,
+    get,
+    post,
+    postFormData,
+    patch,
+    put,
+    delete: del,
+  }
+}
diff --git a/frontend/app/composables/useComments.ts b/frontend/app/composables/useComments.ts
new file mode 100644
index 0000000..c350cce
--- /dev/null
+++ b/frontend/app/composables/useComments.ts
@@ -0,0 +1,207 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface CommentDocument {
+  id: string
+  name: string
+  filename: string
+  mimeType: string
+  size: number
+  type: string
+  fileUrl: string
+  downloadUrl: string
+  createdAt: string
+}
+
+export interface Comment {
+  id: string
+  content: string
+  entityType: string
+  entityId: string
+  entityName?: string | null
+  authorId: string
+  authorName: string
+  status: 'open' | 'resolved'
+  resolvedById?: string | null
+  resolvedByName?: string | null
+  resolvedAt?: string | null
+  createdAt: string
+  updatedAt: string
+  documents?: CommentDocument[]
+}
+
+interface CommentResult {
+  success: boolean
+  data?: Comment | Comment[]
+  error?: string
+}
+
+interface CommentListResult {
+  success: boolean
+  data?: Comment[]
+  total?: number
+  error?: string
+}
+
+export function useComments() {
+  const { get, post, patch, postFormData, delete: del } = useApi()
+  const { showSuccess, showError } = useToast()
+  const loading = ref(false)
+
+  const fetchComments = async (
+    entityType: string,
+    entityId: string,
+    status: string = 'open',
+  ): Promise<CommentListResult> => {
+    loading.value = true
+    try {
+      const result = await get<Comment[]>(`/comments/by-entity/${entityType}/${entityId}?status=${status}`)
+      if (result.success) {
+        const items = (result.data ?? []) as Comment[]
+        return { success: true, data: items }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchAllComments = async (options: {
+    status?: string
+    entityType?: string
+    entityName?: string
+    page?: number
+    itemsPerPage?: number
+    orderBy?: string
+    orderDir?: string
+  } = {}): Promise<CommentListResult> => {
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      if (options.status) params.set('status', options.status)
+      if (options.entityType) params.set('entityType', options.entityType)
+      if (options.entityName) params.set('entityName', options.entityName)
+      params.set('sort', options.orderBy || 'createdAt')
+      params.set('direction', options.orderDir || 'desc')
+      params.set('itemsPerPage', String(options.itemsPerPage || 30))
+      params.set('page', String(options.page || 1))
+
+      const result = await get<{ items: Comment[]; total: number }>(`/comments/search/list?${params.toString()}`)
+      if (result.success && result.data) {
+        const data = result.data as { items: Comment[]; total: number }
+        return { success: true, data: data.items, total: data.total }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createComment = async (
+    entityType: string,
+    entityId: string,
+    content: string,
+    entityName?: string,
+    files?: File[],
+  ): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      let result
+      if (files && files.length > 0) {
+        const formData = new FormData()
+        formData.append('content', content)
+        formData.append('entityType', entityType)
+        formData.append('entityId', entityId)
+        if (entityName) formData.append('entityName', entityName)
+        for (const file of files) {
+          formData.append('files[]', file)
+        }
+        result = await postFormData('/comments', formData)
+      } else {
+        const payload: Record<string, string> = { entityType, entityId, content }
+        if (entityName) payload.entityName = entityName
+        result = await post('/comments', payload)
+      }
+      if (result.success) {
+        showSuccess('Commentaire ajouté')
+        return { success: true, data: result.data as Comment }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible d\'ajouter le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const resolveComment = async (commentId: string): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/comments/${commentId}/resolve`)
+      if (result.success) {
+        showSuccess('Commentaire résolu')
+        return { success: true, data: result.data as Comment }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de résoudre le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteComment = async (commentId: string): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/comments/${commentId}`)
+      if (result.success) {
+        showSuccess('Commentaire supprimé')
+        return { success: true }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de supprimer le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchUnresolvedCount = async (): Promise<number> => {
+    try {
+      const result = await get<{ count: number }>('/comments/stats/unresolved-count')
+      if (result.success && result.data) {
+        return result.data.count
+      }
+      return 0
+    } catch {
+      return 0
+    }
+  }
+
+  return {
+    loading,
+    fetchComments,
+    fetchAllComments,
+    createComment,
+    resolveComment,
+    deleteComment,
+    fetchUnresolvedCount,
+  }
+}
diff --git a/frontend/app/composables/useComponentCreate.ts b/frontend/app/composables/useComponentCreate.ts
new file mode 100644
index 0000000..ed1b091
--- /dev/null
+++ b/frontend/app/composables/useComponentCreate.ts
@@ -0,0 +1,426 @@
+/**
+ * Component creation page – orchestration composable.
+ *
+ * Pure structure-assignment helpers live in
+ * `~/shared/utils/structureAssignmentHelpers.ts`.
+ */
+
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProducts } from '~/composables/useProducts'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useDocuments } from '~/composables/useDocuments'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import {
+  type CustomFieldInput,
+  normalizeCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
+import {
+  hasAssignments,
+  initializeStructureAssignments,
+  isAssignmentNodeComplete,
+  serializeStructureAssignments,
+} from '~/shared/utils/structureAssignmentHelpers'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+
+interface ComponentCatalogType extends ModelType {
+  structure: ComponentModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+// ---------------------------------------------------------------------------
+// Main composable
+// ---------------------------------------------------------------------------
+
+export function useComponentCreate() {
+  const route = useRoute()
+  const router = useRouter()
+  const { get } = useApi()
+
+  const { componentTypes, loadComponentTypes, loadingComponentTypes: loadingTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { productTypes, loadProductTypes } = useProductTypes()
+  const {
+    createComposant,
+    composants: componentCatalogRef,
+    loading: componentsLoading,
+  } = useComposants()
+  const {
+    pieces: pieceCatalogRef,
+    loading: piecesLoading,
+  } = usePieces()
+  const {
+    products: productCatalogRef,
+    loading: productsLoading,
+  } = useProducts()
+  const toast = useToast()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const { uploadDocuments } = useDocuments()
+  const { syncLinks } = useConstructeurLinks()
+  const { canEdit } = usePermissions()
+
+  // -------------------------------------------------------------------------
+  // Local state
+  // -------------------------------------------------------------------------
+
+  const selectedTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
+  const submitting = ref(false)
+  const creationForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
+  const lastSuggestedName = ref('')
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const structureAssignments = ref<StructureAssignmentNode | null>(null)
+  const selectedDocuments = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+
+  // -------------------------------------------------------------------------
+  // Computed
+  // -------------------------------------------------------------------------
+
+  const availablePieces = computed(() => pieceCatalogRef.value ?? [])
+  const availableProducts = computed(() => productCatalogRef.value ?? [])
+  const availableComponents = computed(() => componentCatalogRef.value ?? [])
+  const structureDataLoading = computed(
+    () => !submitting.value && (piecesLoading.value || componentsLoading.value || productsLoading.value),
+  )
+
+  const fetchedPieceTypeMap = ref<Record<string, string>>({})
+  const pieceTypeLabelMap = computed(() =>
+    buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+  )
+  const productTypeLabelMap = computed(() =>
+    buildTypeLabelMap(productTypes.value),
+  )
+  const componentTypeLabelMap = computed(() =>
+    buildTypeLabelMap(componentTypes.value),
+  )
+
+  const componentTypeList = computed<ComponentCatalogType[]>(() =>
+    (componentTypes.value || [])
+      .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
+  )
+
+  const typeOptionLabel = (type?: ComponentCatalogType) =>
+    type?.name || 'Catégorie'
+
+  const typeOptionDescription = (type?: ComponentCatalogType) =>
+    type?.description ? String(type.description) : ''
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
+    const structure = selectedType.value?.structure ?? null
+    return structure ? normalizeStructureForEditor(structure) : null
+  })
+
+  const structureHasRequirements = computed(() =>
+    hasAssignments(structureAssignments.value),
+  )
+
+  const structureSelectionsComplete = computed(() => {
+    if (!structureHasRequirements.value) {
+      return true
+    }
+    if (structureDataLoading.value) {
+      return false
+    }
+    if (!structureAssignments.value) {
+      return false
+    }
+    return isAssignmentNodeComplete(structureAssignments.value, true)
+  })
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() => Boolean(
+    canEdit.value
+    && selectedType.value
+    && creationForm.name
+    && requiredCustomFieldsFilled.value
+    && structureSelectionsComplete.value
+    && !submitting.value,
+  ))
+
+  const resolvePieceLabel = (piece: Record<string, any>) =>
+    _resolvePieceLabel(piece, pieceTypeLabelMap.value)
+
+  const resolveProductLabel = (product: Record<string, any>) =>
+    _resolveProductLabel(product, productTypeLabelMap.value)
+
+  // -------------------------------------------------------------------------
+  // Watchers
+  // -------------------------------------------------------------------------
+
+  watch(
+    () => route.query.typeId,
+    (value) => {
+      if (typeof value === 'string') {
+        selectedTypeId.value = value
+      }
+    },
+  )
+
+  watch(selectedTypeId, (id) => {
+    const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
+    if ((id || '') === current) {
+      return
+    }
+    const nextQuery = { ...route.query }
+    if (id) {
+      nextQuery.typeId = id
+    }
+    else {
+      delete nextQuery.typeId
+    }
+    router.replace({ path: route.path, query: nextQuery }).catch(() => {})
+  })
+
+  const clearCreationForm = () => {
+    creationForm.name = ''
+    creationForm.description = ''
+    creationForm.reference = ''
+    creationForm.constructeurIds = []
+    creationForm.prix = ''
+    lastSuggestedName.value = ''
+    structureAssignments.value = null
+  }
+
+  watch(selectedType, (type) => {
+    if (!type) {
+      clearCreationForm()
+      customFieldInputs.value = []
+      structureAssignments.value = null
+      return
+    }
+    if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
+      creationForm.name = type.name
+    }
+    lastSuggestedName.value = creationForm.name
+    customFieldInputs.value = normalizeCustomFieldInputs(selectedTypeStructure.value)
+    structureAssignments.value = initializeStructureAssignments(selectedTypeStructure.value)
+  })
+
+  watch(
+    selectedTypeStructure,
+    (structure) => {
+      const ids = getStructurePieces(structure)
+        .map((piece: any) => piece?.typePieceId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (!ids.length) {
+        return
+      }
+      fetchModelTypeNames(Array.from(new Set(ids)), pieceTypeLabelMap.value, get)
+        .then((additions) => {
+          if (Object.keys(additions).length) {
+            fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+          }
+        })
+        .catch(() => {})
+    },
+    { immediate: true },
+  )
+
+  // -------------------------------------------------------------------------
+  // Submission
+  // -------------------------------------------------------------------------
+
+  const submitCreation = async () => {
+    if (!selectedType.value) {
+      toast.showError('Sélectionnez une catégorie de composant.')
+      return
+    }
+    const payload: Record<string, any> = {
+      name: creationForm.name.trim(),
+      typeComposantId: selectedType.value.id,
+    }
+
+    const description = creationForm.description.trim()
+    if (description) {
+      payload.description = description
+    }
+
+    const reference = creationForm.reference.trim()
+    if (reference) {
+      payload.reference = reference
+    }
+
+    // constructeurIds are handled via link entities, not in the main payload
+
+    const rawPrice = typeof creationForm.prix === 'string'
+      ? creationForm.prix.trim()
+      : creationForm.prix === null || creationForm.prix === undefined
+        ? ''
+        : String(creationForm.prix).trim()
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+
+    const rootProductSelection
+      = structureAssignments.value?.products?.find(
+        (product) => typeof product.selectedProductId === 'string' && product.selectedProductId.trim().length > 0,
+      ) ?? null
+
+    if (rootProductSelection?.selectedProductId) {
+      payload.productId = rootProductSelection.selectedProductId.trim()
+    }
+
+    if (structureHasRequirements.value && !structureSelectionsComplete.value) {
+      toast.showError('Complétez la sélection des pièces, produits et sous-composants.')
+      return
+    }
+
+    const serializedStructure = structureHasRequirements.value
+      ? serializeStructureAssignments(structureAssignments.value)
+      : null
+
+    if (serializedStructure) {
+      payload.structure = serializedStructure
+    }
+
+    submitting.value = true
+    try {
+      const result = await createComposant(payload)
+      if (result.success) {
+        const createdComponent = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'composant',
+          createdComponent.id,
+          [createdComponent?.typeComposant?.structure?.customFields],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        if (selectedDocuments.value.length && result.data?.id) {
+          uploadingDocuments.value = true
+          const uploadResult = await uploadDocuments(
+            {
+              files: selectedDocuments.value,
+              context: { composantId: result.data.id },
+            },
+            { updateStore: false },
+          )
+          if (!uploadResult.success) {
+            const message = uploadResult.error
+              ? `Documents non ajoutés : ${uploadResult.error}`
+              : 'Documents non ajoutés : une erreur est survenue.'
+            toast.showError(message)
+          }
+          selectedDocuments.value = []
+        }
+        // Sync constructeur links after creation
+        if (constructeurLinks.value.length) {
+          await syncLinks('composant', createdComponent.id, [], constructeurLinks.value)
+        }
+        toast.showSuccess('Composant créé avec succès')
+        await router.replace(`/component/${createdComponent.id}?edit=true`)
+      }
+      else if (result.error) {
+        toast.showError(result.error)
+      }
+    }
+    catch (error: any) {
+      toast.showError(humanizeError(error?.message) || 'Impossible de créer le composant')
+    }
+    finally {
+      submitting.value = false
+      uploadingDocuments.value = false
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Initialization
+  // -------------------------------------------------------------------------
+
+  onMounted(async () => {
+    await Promise.allSettled([
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadProductTypes(),
+    ])
+  })
+
+  // -------------------------------------------------------------------------
+  // Public API
+  // -------------------------------------------------------------------------
+
+  return {
+    // State
+    selectedTypeId,
+    submitting,
+    creationForm,
+    constructeurLinks,
+    constructeurIdsFromForm,
+    customFieldInputs,
+    structureAssignments,
+    selectedDocuments,
+    uploadingDocuments,
+
+    // Computed
+    loadingTypes,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    availablePieces,
+    availableProducts,
+    availableComponents,
+    piecesLoading,
+    productsLoading,
+    componentsLoading,
+    structureDataLoading,
+    pieceTypeLabelMap,
+    productTypeLabelMap,
+    componentTypeLabelMap,
+    structureHasRequirements,
+    structureSelectionsComplete,
+    canEdit,
+    canSubmit,
+
+    // Functions
+    typeOptionLabel,
+    typeOptionDescription,
+    formatStructurePreview,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    submitCreation,
+  }
+}
diff --git a/frontend/app/composables/useComponentEdit.ts b/frontend/app/composables/useComponentEdit.ts
new file mode 100644
index 0000000..52858bc
--- /dev/null
+++ b/frontend/app/composables/useComponentEdit.ts
@@ -0,0 +1,597 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from '#imports'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useComposants } from '~/composables/useComposants'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { extractRelationId } from '~/shared/apiRelations'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useComponentHistory } from '~/composables/useComponentHistory'
+import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import {
+  getStructurePieces,
+  getStructureProducts,
+  resolvePieceLabel as _resolvePieceLabel,
+  resolveProductLabel as _resolveProductLabel,
+  resolveSubcomponentLabel,
+  fetchModelTypeNames,
+  buildTypeLabelMap,
+} from '~/shared/utils/structureDisplayUtils'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+import { collectStructureSelections } from '~/shared/utils/structureSelectionUtils'
+
+interface ComponentCatalogType extends ModelType {
+  structure: ComponentModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+const historyFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  structure: 'Structure',
+  typeComposant: 'Catégorie',
+  product: 'Produit lié',
+  constructeurIds: 'Fournisseurs',
+}
+
+export function useComponentEdit(componentId: string) {
+  const { canEdit } = usePermissions()
+  const router = useRouter()
+  const { get, patch } = useApi()
+  const { componentTypes, loadComponentTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { productTypes, loadProductTypes } = useProductTypes()
+  const { updateComposant, composants: componentCatalogRef } = useComposants()
+  const { pieces } = usePieces()
+  const { products } = useProducts()
+  const { ensureConstructeurs } = useConstructeurs()
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const toast = useToast()
+  const { loadDocumentsByComponent, uploadDocuments, deleteDocument } = useDocuments()
+  const {
+    history,
+    loading: historyLoading,
+    error: historyError,
+    loadHistory,
+  } = useComponentHistory()
+
+  const component = ref<any | null>(null)
+  const loading = ref(true)
+  const saving = ref(false)
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const componentDocuments = ref<any[]>([])
+  const previewDocument = ref<any | null>(null)
+  const previewVisible = ref(false)
+
+  const selectedTypeId = ref<string>('')
+  const editionForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
+
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const fetchedPieceTypeMap = ref<Record<string, string>>({})
+  const pieceTypeLabelMap = computed(() =>
+    buildTypeLabelMap(pieceTypes.value, fetchedPieceTypeMap.value),
+  )
+  const fetchedProductTypeMap = ref<Record<string, string>>({})
+  const productTypeLabelMap = computed(() =>
+    buildTypeLabelMap(productTypes.value, fetchedProductTypeMap.value),
+  )
+  const pieceCatalogMap = computed(() =>
+    new Map(
+      (pieces.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+  const productCatalogMap = computed(() =>
+    new Map(
+      (products.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+  const componentCatalogMap = computed(() =>
+    new Map(
+      (componentCatalogRef.value || [])
+        .filter((item: any) => item?.id)
+        .map((item: any) => [String(item.id), item]),
+    ),
+  )
+
+  const openPreview = (doc: any) => {
+    if (!doc || !canPreviewDocument(doc)) {
+      return
+    }
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const removeDocument = async (documentId: string | number | null | undefined) => {
+    if (!documentId) {
+      return
+    }
+    const result = await deleteDocument(documentId, { updateStore: false })
+    if (result.success) {
+      componentDocuments.value = componentDocuments.value.filter((doc) => doc.id !== documentId)
+    }
+  }
+
+  const refreshDocuments = async () => {
+    if (!component.value?.id) {
+      componentDocuments.value = []
+      return
+    }
+    loadingDocuments.value = true
+    try {
+      const result = await loadDocumentsByComponent(component.value.id, { updateStore: false })
+      if (result.success) {
+        componentDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
+      }
+    }
+    finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    if (!files?.length || !component.value?.id) {
+      return
+    }
+    uploadingDocuments.value = true
+    try {
+      const result = await uploadDocuments(
+        {
+          files,
+          context: { composantId: component.value.id },
+        },
+        { updateStore: false },
+      )
+      if (result.success) {
+        selectedFiles.value = []
+        await refreshDocuments()
+      }
+    }
+    finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const componentTypeList = computed<ComponentCatalogType[]>(() =>
+    (componentTypes.value || [])
+      .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
+  )
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return componentTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const selectedTypeStructure = computed<ComponentModelStructure | null>(() => {
+    const structure = selectedType.value?.structure ?? null
+    return structure ? normalizeStructureForEditor(structure) : null
+  })
+
+  const refreshCustomFieldInputs = (
+    structureOverride?: ComponentModelStructure | null,
+    valuesOverride?: any[] | null,
+  ) => {
+    const structure = structureOverride ?? selectedTypeStructure.value ?? null
+    const values = valuesOverride ?? component.value?.customFieldValues ?? null
+    customFieldInputs.value = buildCustomFieldInputs(structure, values)
+  }
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() => Boolean(
+    canEdit.value
+    && component.value
+    && editionForm.name
+    && requiredCustomFieldsFilled.value
+    && !saving.value,
+  ))
+
+  const fetchComponent = async () => {
+    if (!componentId || typeof componentId !== 'string') {
+      component.value = null
+      componentDocuments.value = []
+      return
+    }
+    const result = await get(`/composants/${componentId}`)
+    if (result.success) {
+      component.value = result.data
+      componentDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
+
+      const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+      refreshCustomFieldInputs(undefined, customValues)
+
+      loadHistory(result.data.id).catch(() => {})
+    }
+    else {
+      component.value = null
+      componentDocuments.value = []
+    }
+  }
+
+  const resolvePieceLabel = (piece: Record<string, any>) =>
+    _resolvePieceLabel(piece, pieceTypeLabelMap.value)
+
+  const resolveProductLabel = (product: Record<string, any>) =>
+    _resolveProductLabel(product, productTypeLabelMap.value)
+
+  const structureSelections = computed(() => {
+    const selections = collectStructureSelections(
+      component.value?.structure,
+      {
+        pieceCatalogMap: pieceCatalogMap.value,
+        productCatalogMap: productCatalogMap.value,
+        componentCatalogMap: componentCatalogMap.value,
+      },
+      { resolvePieceLabel, resolveProductLabel, resolveSubcomponentLabel },
+    )
+    const total
+      = selections.pieces.length + selections.products.length + selections.components.length
+    return {
+      ...selections,
+      total,
+      hasAny: total > 0,
+    }
+  })
+
+  // --- Slot local edits (saved on submit, not auto-saved) ---
+
+  const slotEdits = reactive<{
+    pieces: Record<string, { selectedPieceId?: string | null, quantity?: number }>
+    products: Record<string, { selectedProductId?: string | null }>
+    subcomponents: Record<string, { selectedComposantId?: string | null }>
+  }>({ pieces: {}, products: {}, subcomponents: {} })
+
+  const pieceSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.pieces) return []
+    return (structure.pieces as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.pieces[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typePieceId: slot.typePieceId,
+        selectedPieceId: edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null),
+        selectedPieceName: slot.selectedPieceName ?? null,
+        quantity: edits && 'quantity' in edits ? edits.quantity! : (slot.quantity ?? 1),
+        position: slot.position ?? i,
+        label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+      }
+    })
+  })
+
+  const productSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.products) return []
+    return (structure.products as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.products[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typeProductId: slot.typeProductId,
+        selectedProductId: edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null),
+        selectedProductName: slot.selectedProductName ?? null,
+        familyCode: slot.familyCode,
+        position: slot.position ?? i,
+        label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+      }
+    })
+  })
+
+  const subcomponentSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.subcomponents) return []
+    return (structure.subcomponents as any[]).map((slot: any, i: number) => {
+      const edits = slotEdits.subcomponents[slot.slotId]
+      return {
+        slotId: slot.slotId,
+        typeComposantId: slot.typeComposantId,
+        selectedComponentId: edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null),
+        selectedComponentName: slot.selectedComponentName ?? null,
+        alias: slot.alias,
+        familyCode: slot.familyCode,
+        position: slot.position ?? i,
+        label: slot.alias || `Sous-composant #${i + 1}`,
+      }
+    })
+  })
+
+  const setPieceSlotSelection = (slotId: string, selectedPieceId: string | null) => {
+    slotEdits.pieces[slotId] = { ...slotEdits.pieces[slotId], selectedPieceId }
+  }
+
+  const setProductSlotSelection = (slotId: string, selectedProductId: string | null) => {
+    slotEdits.products[slotId] = { ...slotEdits.products[slotId], selectedProductId }
+  }
+
+  const setSubcomponentSlotSelection = (slotId: string, selectedComposantId: string | null) => {
+    slotEdits.subcomponents[slotId] = { ...slotEdits.subcomponents[slotId], selectedComposantId }
+  }
+
+  const setSlotQuantity = (slotId: string, quantity: number) => {
+    if (!slotId || quantity < 1) return
+    slotEdits.pieces[slotId] = { ...slotEdits.pieces[slotId], quantity: Math.max(1, quantity) }
+  }
+
+  const submitEdition = async () => {
+    if (!component.value) {
+      return
+    }
+
+    const rawPrice = typeof editionForm.prix === 'string'
+      ? editionForm.prix.trim()
+      : editionForm.prix === null || editionForm.prix === undefined
+        ? ''
+        : String(editionForm.prix).trim()
+
+    const payload: Record<string, any> = {
+      name: editionForm.name.trim(),
+      description: editionForm.description.trim() || null,
+    }
+
+    const reference = editionForm.reference.trim()
+    payload.reference = reference || null
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+    else {
+      payload.prix = null
+    }
+
+    saving.value = true
+    try {
+      const result = await updateComposant(component.value.id, payload)
+      if (result.success && result.data) {
+        const updatedComponent = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'composant',
+          updatedComponent.id,
+          [
+            updatedComponent?.typeComposant?.structure?.customFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+
+        // Save slot edits
+        const slotPromises: Promise<any>[] = []
+        for (const [slotId, edits] of Object.entries(slotEdits.pieces)) {
+          if (Object.keys(edits).length) {
+            slotPromises.push(patch(`/composant-piece-slots/${slotId}`, {
+              ...'selectedPieceId' in edits ? { selectedPieceId: edits.selectedPieceId } : {},
+              ...'quantity' in edits ? { quantity: edits.quantity } : {},
+            }))
+          }
+        }
+        for (const [slotId, edits] of Object.entries(slotEdits.products)) {
+          if ('selectedProductId' in edits) {
+            slotPromises.push(patch(`/composant-product-slots/${slotId}`, { selectedProductId: edits.selectedProductId }))
+          }
+        }
+        for (const [slotId, edits] of Object.entries(slotEdits.subcomponents)) {
+          if ('selectedComposantId' in edits) {
+            slotPromises.push(patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId: edits.selectedComposantId }))
+          }
+        }
+        await Promise.all(slotPromises)
+
+        // Apply slot edits to local structure so UI reflects saved values
+        const structure = component.value?.structure
+        if (structure) {
+          for (const [slotId, edits] of Object.entries(slotEdits.pieces)) {
+            const slot = (structure.pieces as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot) {
+              if ('selectedPieceId' in edits) slot.selectedPieceId = edits.selectedPieceId
+              if ('quantity' in edits) slot.quantity = edits.quantity
+            }
+          }
+          for (const [slotId, edits] of Object.entries(slotEdits.products)) {
+            const slot = (structure.products as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot && 'selectedProductId' in edits) slot.selectedProductId = edits.selectedProductId
+          }
+          for (const [slotId, edits] of Object.entries(slotEdits.subcomponents)) {
+            const slot = (structure.subcomponents as any[])?.find((s: any) => s.slotId === slotId)
+            if (slot && 'selectedComposantId' in edits) slot.selectedComponentId = edits.selectedComposantId
+          }
+        }
+
+        // Reset local slot edits
+        slotEdits.pieces = {}
+        slotEdits.products = {}
+        slotEdits.subcomponents = {}
+
+        await syncLinks('composant', component.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+        originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+
+        toast.showSuccess('Composant mis à jour avec succès.')
+      }
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour du composant')
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  // --- Watchers ---
+
+  const initialized = ref(false)
+
+  watch(
+    [component, selectedTypeStructure],
+    ([currentComponent, currentStructure]) => {
+      if (!currentComponent) {
+        return
+      }
+
+      if (!initialized.value) {
+        const resolvedTypeId = currentComponent.typeComposantId
+          || extractRelationId(currentComponent.typeComposant)
+          || ''
+        if (resolvedTypeId && !currentComponent.typeComposantId) {
+          currentComponent.typeComposantId = resolvedTypeId
+        }
+        selectedTypeId.value = resolvedTypeId
+
+        editionForm.name = currentComponent.name || ''
+        editionForm.description = currentComponent.description || ''
+        editionForm.reference = currentComponent.reference || ''
+        // Load constructeur links
+        fetchLinks('composant', componentId).then((links) => {
+          constructeurLinks.value = links
+          originalConstructeurLinks.value = links.map(l => ({ ...l }))
+          editionForm.constructeurIds = constructeurIdsFromLinks(links)
+          if (editionForm.constructeurIds.length) {
+            void ensureConstructeurs(editionForm.constructeurIds)
+          }
+        })
+        editionForm.prix = currentComponent.prix !== null && currentComponent.prix !== undefined ? String(currentComponent.prix) : ''
+
+        initialized.value = true
+      }
+
+      refreshCustomFieldInputs(selectedTypeStructure.value ?? currentStructure, currentComponent.customFieldValues)
+    },
+    { immediate: true },
+  )
+
+  watch(
+    selectedTypeStructure,
+    (structure) => {
+      const pieceIds = getStructurePieces(structure)
+        .map((piece: any) => piece?.typePieceId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (pieceIds.length) {
+        fetchModelTypeNames(Array.from(new Set(pieceIds)), pieceTypeLabelMap.value, get)
+          .then((additions) => {
+            if (Object.keys(additions).length) {
+              fetchedPieceTypeMap.value = { ...fetchedPieceTypeMap.value, ...additions }
+            }
+          })
+          .catch(() => {})
+      }
+
+      const productIds = getStructureProducts(structure)
+        .map((product: any) => product?.typeProductId)
+        .filter((id: any): id is string => typeof id === 'string' && id.trim().length > 0)
+      if (productIds.length) {
+        fetchModelTypeNames(Array.from(new Set(productIds)), productTypeLabelMap.value, get)
+          .then((additions) => {
+            if (Object.keys(additions).length) {
+              fetchedProductTypeMap.value = { ...fetchedProductTypeMap.value, ...additions }
+            }
+          })
+          .catch(() => {})
+      }
+    },
+    { immediate: true },
+  )
+
+  // --- Lifecycle ---
+
+  onMounted(async () => {
+    await Promise.allSettled([
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadProductTypes(),
+      fetchComponent(),
+    ])
+    loading.value = false
+  })
+
+  return {
+    // State
+    component,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    componentDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    constructeurLinks,
+    originalConstructeurLinks,
+    constructeurIdsFromForm,
+    customFieldInputs,
+    historyFieldLabels,
+
+    // Computed
+    canEdit,
+    canSubmit,
+    componentTypeList,
+    selectedType,
+    selectedTypeStructure,
+    structureSelections,
+    pieceSlotEntries,
+    productSlotEntries,
+    subcomponentSlotEntries,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    refreshDocuments,
+    submitEdition,
+    fetchComponent,
+    setSlotQuantity,
+    setPieceSlotSelection,
+    setProductSlotSelection,
+    setSubcomponentSlotSelection,
+    resolvePieceLabel,
+    resolveProductLabel,
+    resolveSubcomponentLabel,
+    formatStructurePreview,
+  }
+}
diff --git a/frontend/app/composables/useComponentHistory.ts b/frontend/app/composables/useComponentHistory.ts
new file mode 100644
index 0000000..620eb36
--- /dev/null
+++ b/frontend/app/composables/useComponentHistory.ts
@@ -0,0 +1,12 @@
+/**
+ * Backward-compatible wrapper around useEntityHistory.
+ * Real logic lives in useEntityHistory.ts.
+ */
+import { useEntityHistory, type EntityHistoryActor, type EntityHistoryEntry } from './useEntityHistory'
+
+export type ComponentHistoryActor = EntityHistoryActor
+export type ComponentHistoryEntry = EntityHistoryEntry
+
+export function useComponentHistory() {
+  return useEntityHistory('composant')
+}
diff --git a/frontend/app/composables/useComponentTypes.ts b/frontend/app/composables/useComponentTypes.ts
new file mode 100644
index 0000000..147acdc
--- /dev/null
+++ b/frontend/app/composables/useComponentTypes.ts
@@ -0,0 +1,29 @@
+/**
+ * Backward-compatible wrapper around useEntityTypes.
+ * Preserves the original API surface (renamed fields) so consumers need no changes.
+ */
+import { useEntityTypes, type EntityType } from './useEntityTypes'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import type { Ref } from 'vue'
+
+export interface ComponentType extends EntityType {
+  structure: ComponentModelStructure | null
+}
+
+export function useComponentTypes() {
+  const { types, loading, loadTypes, createType, updateType, deleteType } = useEntityTypes({
+    category: 'COMPONENT',
+    label: 'composant',
+  })
+
+  return {
+    componentTypes: types as Ref<ComponentType[]>,
+    loadingComponentTypes: loading,
+    loadComponentTypes: loadTypes,
+    createComponentType: createType,
+    updateComponentType: updateType,
+    deleteComponentType: deleteType,
+    getComponentTypes: () => types.value as ComponentType[],
+    isComponentTypeLoading: () => loading.value,
+  }
+}
diff --git a/frontend/app/composables/useComposants.ts b/frontend/app/composables/useComposants.ts
new file mode 100644
index 0000000..61d6809
--- /dev/null
+++ b/frontend/app/composables/useComposants.ts
@@ -0,0 +1,276 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi } from './useApi'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs, type Constructeur } from './useConstructeurs'
+import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Composant {
+  id: string
+  name: string
+  reference?: string | null
+  description?: string | null
+  typeComposantId?: string | null
+  typeComposant?: { id: string; name?: string } | null
+  productId?: string | null
+  product?: { id: string; name?: string } | null
+  constructeurs?: Constructeur[]
+  constructeurIds?: string[]
+  documents?: unknown[]
+  createdAt?: string | null
+  updatedAt?: string | null
+  [key: string]: unknown
+}
+
+interface ComposantListResult {
+  success: boolean
+  data?: { items: Composant[]; total: number; page: number; itemsPerPage: number }
+  error?: string
+}
+
+interface ComposantSingleResult {
+  success: boolean
+  data?: Composant
+  error?: string
+}
+
+interface LoadComposantsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  typeName?: string
+  typeComposantId?: string
+  force?: boolean
+}
+
+const composants = ref<Composant[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') {
+    return p.totalItems
+  }
+  if (typeof p?.['hydra:totalItems'] === 'number') {
+    return p['hydra:totalItems']
+  }
+  return fallbackLength
+}
+
+export function useComposants() {
+  const { showSuccess } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (composant: Composant): Promise<Composant> => {
+    if (!composant || typeof composant !== 'object') {
+      return composant
+    }
+    if (!composant.typeComposantId) {
+      const typeComposantId = extractRelationId(composant.typeComposant)
+      if (typeComposantId) {
+        composant.typeComposantId = typeComposantId
+      }
+    }
+    if (!composant.productId) {
+      const productId = extractRelationId(composant.product)
+      if (productId) {
+        composant.productId = productId
+      }
+    }
+    const ids = uniqueConstructeurIds(
+      composant.constructeurIds,
+      composant.constructeurs,
+    )
+    const hasResolvedConstructeurs =
+      Array.isArray(composant.constructeurs) &&
+      composant.constructeurs.length > 0 &&
+      composant.constructeurs.every((item) => item && typeof item === 'object')
+
+    if (ids.length && !hasResolvedConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        composant.constructeurs = resolved
+        composant.constructeurIds = ids
+      }
+    }
+    return composant
+  }
+
+  const loadComposants = async (options: LoadComposantsOptions = {}): Promise<ComposantListResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'name',
+      orderDir = 'asc',
+      typeName,
+      typeComposantId,
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && !typeName && !typeComposantId && page === 1) {
+      return {
+        success: true,
+        data: { items: composants.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    if (!typeComposantId && loading.value) {
+      return {
+        success: true,
+        data: { items: composants.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('search', search.trim())
+      }
+
+      if (typeName && typeName.trim()) {
+        params.set('typeComposant.name', typeName.trim())
+      }
+
+      if (typeComposantId) {
+        params.set('typeComposant', typeComposantId)
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/composants?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        const resultTotal = extractTotal(result.data, items.length)
+
+        if (!typeComposantId) {
+          composants.value = enrichedItems
+          total.value = resultTotal
+          loaded.value = true
+        }
+
+        return {
+          success: true,
+          data: {
+            items: enrichedItems,
+            total: resultTotal,
+            page,
+            itemsPerPage,
+          },
+        }
+      }
+      return result as ComposantListResult
+    } catch (error) {
+      console.error('Erreur lors du chargement des composants:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createComposant = async (composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
+    loading.value = true
+    try {
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = composantData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
+      const result = await post('/composants', normalizedPayload)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Composant)
+        composants.value.unshift(enriched)
+        total.value += 1
+        const definition = (composantData as Record<string, unknown>)?.definition as Record<string, unknown> | undefined
+        const displayName =
+          (result.data as Composant)?.name ||
+          (definition?.name as string | undefined) ||
+          composantData?.name ||
+          'Composant'
+        showSuccess(`Composant "${displayName}" créé avec succès`)
+        return { success: true, data: enriched }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la création du composant:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateComposantData = async (id: string, composantData: Partial<Composant>): Promise<ComposantSingleResult> => {
+    loading.value = true
+    try {
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = composantData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
+      const result = await patch(`/composants/${id}`, normalizedPayload)
+      if (result.success && result.data) {
+        const updated = await withResolvedConstructeurs(result.data as Composant)
+        const index = composants.value.findIndex((comp) => comp.id === id)
+        if (index !== -1) {
+          composants.value[index] = updated
+        }
+        showSuccess(`Composant "${updated?.name || composantData.name || ''}" mis à jour avec succès`)
+        return { success: true, data: updated }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du composant:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteComposant = async (id: string): Promise<ComposantSingleResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/composants/${id}`)
+      if (result.success) {
+        const deletedComposant = composants.value.find((comp) => comp.id === id)
+        composants.value = composants.value.filter((comp) => comp.id !== id)
+        total.value = Math.max(0, total.value - 1)
+        showSuccess(`Composant "${deletedComposant?.name || 'inconnu'}" supprimé avec succès`)
+        return { success: true }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la suppression du composant:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getComposants = () => composants.value
+  const isLoading = () => loading.value
+
+  const clearComposantsCache = () => {
+    composants.value = []
+    total.value = 0
+    loaded.value = false
+  }
+
+  return {
+    composants,
+    total,
+    loading,
+    loaded,
+    loadComposants,
+    createComposant,
+    updateComposant: updateComposantData,
+    deleteComposant,
+    getComposants,
+    isLoading,
+    clearComposantsCache,
+  }
+}
diff --git a/frontend/app/composables/useConfirm.ts b/frontend/app/composables/useConfirm.ts
new file mode 100644
index 0000000..a623509
--- /dev/null
+++ b/frontend/app/composables/useConfirm.ts
@@ -0,0 +1,73 @@
+/**
+ * Promise-based confirmation dialog composable.
+ *
+ * Usage:
+ *   const { confirm, confirmState } = useConfirm()
+ *   const ok = await confirm({ message: 'Supprimer ?' })
+ *   if (ok) { ... }
+ *
+ * The ConfirmModal component reads `confirmState` to render the dialog.
+ */
+
+import { reactive } from 'vue'
+
+export interface ConfirmOptions {
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  dangerous?: boolean
+}
+
+export interface ConfirmState {
+  open: boolean
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+  dangerous: boolean
+  resolve: ((value: boolean) => void) | null
+}
+
+const state = reactive<ConfirmState>({
+  open: false,
+  title: '',
+  message: '',
+  confirmText: 'Supprimer',
+  cancelText: 'Annuler',
+  dangerous: true,
+  resolve: null,
+})
+
+function confirm(options: ConfirmOptions): Promise<boolean> {
+  return new Promise((resolve) => {
+    state.title = options.title ?? 'Confirmation'
+    state.message = options.message
+    state.confirmText = options.confirmText ?? 'Supprimer'
+    state.cancelText = options.cancelText ?? 'Annuler'
+    state.dangerous = options.dangerous ?? true
+    state.resolve = resolve
+    state.open = true
+  })
+}
+
+function handleConfirm() {
+  state.resolve?.(true)
+  state.open = false
+  state.resolve = null
+}
+
+function handleCancel() {
+  state.resolve?.(false)
+  state.open = false
+  state.resolve = null
+}
+
+export function useConfirm() {
+  return {
+    confirm,
+    confirmState: state,
+    handleConfirm,
+    handleCancel,
+  }
+}
diff --git a/frontend/app/composables/useConstructeurLinks.ts b/frontend/app/composables/useConstructeurLinks.ts
new file mode 100644
index 0000000..560e0f1
--- /dev/null
+++ b/frontend/app/composables/useConstructeurLinks.ts
@@ -0,0 +1,103 @@
+import { useApi } from '~/composables/useApi'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+type EntityType = 'machine' | 'piece' | 'composant' | 'product'
+
+const ENDPOINTS: Record<EntityType, string> = {
+  machine: '/machine_constructeur_links',
+  piece: '/piece_constructeur_links',
+  composant: '/composant_constructeur_links',
+  product: '/product_constructeur_links',
+}
+
+const ENTITY_KEYS: Record<EntityType, string> = {
+  machine: 'machine',
+  piece: 'piece',
+  composant: 'composant',
+  product: 'product',
+}
+
+const ENTITY_PLURALS: Record<EntityType, string> = {
+  machine: 'machines',
+  piece: 'pieces',
+  composant: 'composants',
+  product: 'products',
+}
+
+export function useConstructeurLinks() {
+  const { get, post, patch, delete: del } = useApi()
+
+  const fetchLinks = async (
+    entityType: EntityType,
+    entityId: string,
+  ): Promise<ConstructeurLinkEntry[]> => {
+    const endpoint = ENDPOINTS[entityType]
+    const key = ENTITY_KEYS[entityType]
+    const plural = ENTITY_PLURALS[entityType]
+    const url = `${endpoint}?${key}=/api/${plural}/${entityId}`
+    const result = await get(url)
+    if (!result.success || !result.data) return []
+
+    const members = extractCollection(result.data)
+    if (!Array.isArray(members)) return []
+
+    return members.map((link: any) => ({
+      linkId: link.id ?? (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
+      constructeurId: typeof link.constructeur === 'string'
+        ? link.constructeur.split('/').pop()!
+        : link.constructeur?.id ?? '',
+      constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
+      supplierReference: link.supplierReference ?? null,
+    }))
+  }
+
+  const syncLinks = async (
+    entityType: EntityType,
+    entityId: string,
+    originalLinks: ConstructeurLinkEntry[],
+    formLinks: ConstructeurLinkEntry[],
+  ): Promise<void> => {
+    const endpoint = ENDPOINTS[entityType]
+    const key = ENTITY_KEYS[entityType]
+    const plural = ENTITY_PLURALS[entityType]
+    const entityIri = `/api/${plural}/${entityId}`
+
+    const originalMap = new Map(originalLinks.map(l => [l.constructeurId, l]))
+    const formMap = new Map(formLinks.map(l => [l.constructeurId, l]))
+
+    const promises: Promise<any>[] = []
+
+    // Delete removed links
+    for (const [cId, orig] of originalMap) {
+      if (!formMap.has(cId) && orig.linkId) {
+        promises.push(del(`${endpoint}/${orig.linkId}`))
+      }
+    }
+
+    // Create new links
+    for (const [cId, form] of formMap) {
+      if (!originalMap.has(cId)) {
+        promises.push(post(endpoint, {
+          [key]: entityIri,
+          constructeur: `/api/constructeurs/${cId}`,
+          supplierReference: form.supplierReference || null,
+        }))
+      }
+    }
+
+    // Patch modified supplierReference
+    for (const [cId, form] of formMap) {
+      const orig = originalMap.get(cId)
+      if (orig?.linkId && (orig.supplierReference ?? null) !== (form.supplierReference ?? null)) {
+        promises.push(patch(`${endpoint}/${orig.linkId}`, {
+          supplierReference: form.supplierReference || null,
+        }))
+      }
+    }
+
+    await Promise.allSettled(promises)
+  }
+
+  return { fetchLinks, syncLinks }
+}
diff --git a/frontend/app/composables/useConstructeurs.ts b/frontend/app/composables/useConstructeurs.ts
new file mode 100644
index 0000000..272d939
--- /dev/null
+++ b/frontend/app/composables/useConstructeurs.ts
@@ -0,0 +1,219 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Constructeur {
+  id: string
+  name: string
+  email?: string | null
+  phone?: string | null
+}
+
+interface ConstructeurResult {
+  success: boolean
+  data?: Constructeur | Constructeur[]
+  error?: string
+}
+
+const constructeurs = ref<Constructeur[]>([])
+const loading = ref(false)
+const loaded = ref(false)
+
+const uniqueConstructeurs = (items: Constructeur[] = []): Constructeur[] => {
+  const map = new Map<string, Constructeur>()
+  items.forEach((item) => {
+    if (item && typeof item === 'object' && typeof item.id === 'string') {
+      map.set(item.id, item)
+    }
+  })
+  return Array.from(map.values())
+}
+
+const normalizeIds = (ids: unknown[] = []): string[] => {
+  if (!Array.isArray(ids)) {
+    return []
+  }
+  return Array.from(
+    new Set(
+      ids
+        .map((value) => (typeof value === 'string' ? value.trim() : ''))
+        .filter((value) => value.length > 0),
+    ),
+  )
+}
+
+const upsertConstructeurs = (items: Constructeur[] = []) => {
+  if (!Array.isArray(items) || !items.length) {
+    return
+  }
+  const merged = uniqueConstructeurs([...constructeurs.value, ...items])
+  constructeurs.value = merged
+}
+
+const getIndexedConstructeur = (id: string): Constructeur | null =>
+  constructeurs.value.find((item) => item && item.id === id) || null
+
+const pendingFetches = new Map<string, Promise<Constructeur | null>>()
+
+export function useConstructeurs() {
+  const { get, post, patch, delete: del } = useApi()
+  const { showSuccess, showError } = useToast()
+
+  const loadConstructeurs = async (search = '', options: { force?: boolean } = {}): Promise<ConstructeurResult> => {
+    if (!search && !options.force && loaded.value) {
+      return { success: true, data: constructeurs.value }
+    }
+    loading.value = true
+    try {
+      const query = search ? `?search=${encodeURIComponent(search)}` : ''
+      const result = await get(`/constructeurs${query}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        constructeurs.value = uniqueConstructeurs(items)
+        if (!search) loaded.value = true
+      }
+      return result as ConstructeurResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors du chargement des fournisseurs:', error)
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const searchConstructeurs = async (search = ''): Promise<ConstructeurResult> => {
+    return loadConstructeurs(search)
+  }
+
+  const createConstructeur = async (data: Partial<Constructeur>): Promise<ConstructeurResult> => {
+    loading.value = true
+    try {
+      const result = await post('/constructeurs', data)
+      if (result.success) {
+        upsertConstructeurs([result.data as Constructeur])
+        showSuccess(`Fournisseur "${(result.data as Constructeur).name}" créé`)
+      } else if (result.error) {
+        showError(result.error)
+      }
+      return result as ConstructeurResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors de la création du fournisseur:', error)
+      showError('Impossible de créer le fournisseur')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const ensureConstructeurs = async (ids: unknown[] = []): Promise<Constructeur[]> => {
+    const normalizedIds = normalizeIds(ids)
+    if (!normalizedIds.length) {
+      return []
+    }
+
+    const collected: Constructeur[] = []
+    const missing: string[] = []
+    normalizedIds.forEach((id) => {
+      const existing = getIndexedConstructeur(id)
+      if (existing) {
+        collected.push(existing)
+      } else {
+        missing.push(id)
+      }
+    })
+
+    if (missing.length) {
+      const fetchTasks = missing.map((id) => {
+        const cached = pendingFetches.get(id)
+        if (cached) {
+          return cached
+        }
+        const task = get(`/constructeurs/${id}`)
+          .then((result) => {
+            if (result.success && result.data) {
+              return result.data as Constructeur
+            }
+            return null
+          })
+          .catch((error) => {
+            console.error('Erreur lors du chargement du fournisseur:', error)
+            return null
+          })
+          .finally(() => {
+            pendingFetches.delete(id)
+          })
+        pendingFetches.set(id, task)
+        return task
+      })
+
+      const fetched = await Promise.all(fetchTasks)
+      const validFetched = fetched.filter((item): item is Constructeur => item !== null && item.id !== undefined)
+      if (validFetched.length) {
+        upsertConstructeurs(validFetched)
+      }
+    }
+
+    return normalizedIds
+      .map((id) => getIndexedConstructeur(id))
+      .filter((item): item is Constructeur => item !== null)
+  }
+
+  const updateConstructeur = async (id: string, data: Partial<Constructeur>): Promise<ConstructeurResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/constructeurs/${id}`, data)
+      if (result.success) {
+        upsertConstructeurs([result.data as Constructeur])
+        showSuccess(`Fournisseur "${(result.data as Constructeur).name}" mis à jour`)
+      } else if (result.error) {
+        showError(result.error)
+      }
+      return result as ConstructeurResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors de la mise à jour du fournisseur:', error)
+      showError('Impossible de mettre à jour le fournisseur')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteConstructeur = async (id: string): Promise<ConstructeurResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/constructeurs/${id}`)
+      if (result.success) {
+        constructeurs.value = constructeurs.value.filter((item) => item.id !== id)
+        showSuccess('Fournisseur supprimé')
+      } else if (result.error) {
+        showError(result.error)
+      }
+      return result as ConstructeurResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors de la suppression du fournisseur:', error)
+      showError('Impossible de supprimer le fournisseur')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getConstructeurById = (id: string) => getIndexedConstructeur(id)
+
+  return {
+    constructeurs,
+    loading,
+    loadConstructeurs,
+    searchConstructeurs,
+    createConstructeur,
+    updateConstructeur,
+    deleteConstructeur,
+    getConstructeurById,
+    ensureConstructeurs,
+  }
+}
diff --git a/frontend/app/composables/useCustomFields.ts b/frontend/app/composables/useCustomFields.ts
new file mode 100644
index 0000000..132a1a9
--- /dev/null
+++ b/frontend/app/composables/useCustomFields.ts
@@ -0,0 +1,113 @@
+import { ref } from 'vue'
+import { useApi, type ApiResponse } from './useApi'
+
+export interface CustomFieldValue {
+  id: string
+  customFieldId: string
+  entityType: string
+  entityId: string
+  value: unknown
+  [key: string]: unknown
+}
+
+export function useCustomFields() {
+  const { apiCall } = useApi()
+  const customFieldValues = ref<CustomFieldValue[]>([])
+  const loading = ref(false)
+
+  // Créer une valeur de champ personnalisé
+  const createCustomFieldValue = async (customFieldValueData: Record<string, unknown>): Promise<ApiResponse> => {
+    try {
+      const result = await apiCall('/custom-fields/values', {
+        method: 'POST',
+        body: JSON.stringify(customFieldValueData),
+      })
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la création de la valeur de champ personnalisé:', error)
+      return { success: false, error: (error as Error).message }
+    }
+  }
+
+  // Obtenir les valeurs de champs personnalisés pour une entité
+  const getCustomFieldValuesByEntity = async (entityType: string, entityId: string): Promise<ApiResponse> => {
+    try {
+      loading.value = true
+      const result = await apiCall(`/custom-fields/values/${entityType}/${entityId}`, {
+        method: 'GET',
+      })
+      if (result.success) {
+        customFieldValues.value = result.data as CustomFieldValue[]
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la récupération des valeurs de champs personnalisés:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Mettre à jour une valeur de champ personnalisé
+  const updateCustomFieldValue = async (id: string, updateData: Record<string, unknown>): Promise<ApiResponse> => {
+    try {
+      const result = await apiCall(`/custom-fields/values/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify(updateData),
+      })
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la valeur de champ personnalisé:', error)
+      return { success: false, error: (error as Error).message }
+    }
+  }
+
+  // Créer ou mettre à jour une valeur de champ personnalisé
+  const upsertCustomFieldValue = async (
+    customFieldId: string | null,
+    entityType: string,
+    entityId: string,
+    value: unknown,
+    metadata: Record<string, unknown> = {},
+  ): Promise<ApiResponse> => {
+    try {
+      const result = await apiCall('/custom-fields/values/upsert', {
+        method: 'POST',
+        body: JSON.stringify({
+          customFieldId,
+          entityType,
+          entityId,
+          value,
+          ...metadata,
+        }),
+      })
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la création/mise à jour de la valeur de champ personnalisé:', error)
+      return { success: false, error: (error as Error).message }
+    }
+  }
+
+  // Supprimer une valeur de champ personnalisé
+  const deleteCustomFieldValue = async (id: string): Promise<ApiResponse> => {
+    try {
+      const result = await apiCall(`/custom-fields/values/${id}`, {
+        method: 'DELETE',
+      })
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la suppression de la valeur de champ personnalisé:', error)
+      return { success: false, error: (error as Error).message }
+    }
+  }
+
+  return {
+    customFieldValues,
+    loading,
+    createCustomFieldValue,
+    getCustomFieldValuesByEntity,
+    updateCustomFieldValue,
+    upsertCustomFieldValue,
+    deleteCustomFieldValue,
+  }
+}
diff --git a/frontend/app/composables/useDarkMode.ts b/frontend/app/composables/useDarkMode.ts
new file mode 100644
index 0000000..a79d683
--- /dev/null
+++ b/frontend/app/composables/useDarkMode.ts
@@ -0,0 +1,26 @@
+const isDark = ref(false)
+
+export function useDarkMode() {
+  const toggle = () => {
+    isDark.value = !isDark.value
+    applyTheme()
+  }
+
+  const applyTheme = () => {
+    const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }
+
+  const init = () => {
+    const saved = localStorage.getItem('theme')
+    if (saved === 'mytheme-dark') {
+      isDark.value = true
+    } else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      isDark.value = true
+    }
+    applyTheme()
+  }
+
+  return { isDark, toggle, init }
+}
diff --git a/frontend/app/composables/useDataTable.ts b/frontend/app/composables/useDataTable.ts
new file mode 100644
index 0000000..3b0fe32
--- /dev/null
+++ b/frontend/app/composables/useDataTable.ts
@@ -0,0 +1,221 @@
+import { ref, computed, watch, type Ref, type ComputedRef } from 'vue'
+import { useUrlState } from './useUrlState'
+import type { DataTableSort, DataTablePagination, DataTableColumnFilters, SortDirection } from '~/shared/types/dataTable'
+
+export interface UseDataTableDeps {
+  /** Called whenever sort/page/search/perPage/filter changes. The composable does NOT fetch data itself. */
+  fetchData: () => void | Promise<void>
+}
+
+export interface UseDataTableOptions {
+  /** Default sort field */
+  defaultSort?: string
+  /** Default sort direction */
+  defaultDirection?: SortDirection
+  /** Default items per page */
+  defaultPerPage?: number
+  /** Available per-page options */
+  perPageOptions?: number[]
+  /** Search debounce in ms. Default: 300 */
+  searchDebounceMs?: number
+  /** Whether to persist state to URL. Default: true */
+  persistToUrl?: boolean
+  /** Extra URL state params for page-specific filters */
+  extraParams?: Record<string, { default: string | number; type?: 'string' | 'number' }>
+  /** Column filter keys to persist in URL (prefixed with `f.` in query string) */
+  columnFilterKeys?: string[]
+}
+
+export interface UseDataTableReturn {
+  searchTerm: Ref<string>
+  sortField: Ref<string>
+  sortDirection: Ref<SortDirection>
+  currentPage: Ref<number>
+  itemsPerPage: Ref<number>
+  columnFilters: Ref<DataTableColumnFilters>
+  filters: Record<string, Ref<string | number>>
+  sort: ComputedRef<DataTableSort>
+  pagination: (total: Ref<number>, pageItems: Ref<number>) => ComputedRef<DataTablePagination>
+  handleSort: (newSort: DataTableSort) => void
+  handlePageChange: (page: number) => void
+  handlePerPageChange: (perPage: number) => void
+  handleFilterChange: () => void
+  handleColumnFiltersChange: (filters: DataTableColumnFilters) => void
+  debouncedSearch: () => void
+  refresh: () => void
+  perPageOptions: number[]
+}
+
+export function useDataTable(
+  deps: UseDataTableDeps,
+  options: UseDataTableOptions = {},
+): UseDataTableReturn {
+  const {
+    defaultSort = 'name',
+    defaultDirection = 'asc',
+    defaultPerPage = 20,
+    perPageOptions = [20, 50, 100],
+    searchDebounceMs = 300,
+    persistToUrl = true,
+    extraParams = {},
+    columnFilterKeys = [],
+  } = options
+
+  let searchTerm: Ref<string>
+  let sortField: Ref<string>
+  let sortDirection: Ref<SortDirection>
+  let currentPage: Ref<number>
+  let itemsPerPage: Ref<number>
+  const filters: Record<string, Ref<string | number>> = {}
+  const columnFilterRefs: Record<string, Ref<string>> = {}
+
+  if (persistToUrl) {
+    const paramDefs: Record<string, { default: string | number; type?: 'string' | 'number'; debounce?: number }> = {
+      page: { default: 1, type: 'number' },
+      perPage: { default: defaultPerPage, type: 'number' },
+      q: { default: '', debounce: searchDebounceMs },
+      sort: { default: defaultSort },
+      dir: { default: defaultDirection },
+      ...extraParams,
+    }
+
+    for (const key of columnFilterKeys) {
+      paramDefs[`f.${key}`] = { default: '', debounce: 300 }
+    }
+
+    const state = useUrlState(paramDefs, {
+      onRestore: () => deps.fetchData(),
+    })
+
+    searchTerm = state.q as Ref<string>
+    sortField = state.sort as Ref<string>
+    sortDirection = state.dir as unknown as Ref<SortDirection>
+    currentPage = state.page as unknown as Ref<number>
+    itemsPerPage = state.perPage as unknown as Ref<number>
+
+    for (const key of Object.keys(extraParams)) {
+      filters[key] = (state as Record<string, Ref<string | number>>)[key]!
+    }
+
+    for (const key of columnFilterKeys) {
+      columnFilterRefs[key] = (state as Record<string, Ref<string>>)[`f.${key}`]!
+    }
+  }
+  else {
+    searchTerm = ref('')
+    sortField = ref(defaultSort)
+    sortDirection = ref(defaultDirection) as Ref<SortDirection>
+    currentPage = ref(1)
+    itemsPerPage = ref(defaultPerPage)
+
+    for (const [key, def] of Object.entries(extraParams)) {
+      filters[key] = ref(def.default)
+    }
+  }
+
+  // Search debounce
+  let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+  const debouncedSearch = () => {
+    if (searchTimeout) clearTimeout(searchTimeout)
+    searchTimeout = setTimeout(() => {
+      currentPage.value = 1
+      deps.fetchData()
+    }, searchDebounceMs)
+  }
+
+  // Sort
+  const sort = computed<DataTableSort>(() => ({
+    field: sortField.value,
+    direction: sortDirection.value,
+  }))
+
+  const handleSort = (newSort: DataTableSort) => {
+    sortField.value = newSort.field
+    sortDirection.value = newSort.direction
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Pagination
+  const handlePageChange = (page: number) => {
+    currentPage.value = page
+    deps.fetchData()
+  }
+
+  const handlePerPageChange = (perPage: number) => {
+    itemsPerPage.value = perPage
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Column filters — seed from URL-persisted refs
+  const initialColumnFilters: DataTableColumnFilters = {}
+  for (const [key, r] of Object.entries(columnFilterRefs)) {
+    if (r.value) initialColumnFilters[key] = r.value
+  }
+  const columnFilters = ref<DataTableColumnFilters>(initialColumnFilters)
+
+  // Sync columnFilters → URL refs
+  if (persistToUrl && columnFilterKeys.length > 0) {
+    watch(columnFilters, (val) => {
+      for (const key of columnFilterKeys) {
+        columnFilterRefs[key]!.value = val[key] || ''
+      }
+    }, { deep: true })
+
+    // Sync URL refs → columnFilters (back/forward navigation)
+    for (const key of columnFilterKeys) {
+      watch(columnFilterRefs[key]!, (urlVal) => {
+        const current = columnFilters.value[key] || ''
+        if (current !== urlVal) {
+          columnFilters.value = { ...columnFilters.value, [key]: urlVal }
+        }
+      })
+    }
+  }
+
+  const handleColumnFiltersChange = (newFilters: DataTableColumnFilters) => {
+    columnFilters.value = newFilters
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  // Generic filter change handler (resets page and refetches)
+  const handleFilterChange = () => {
+    currentPage.value = 1
+    deps.fetchData()
+  }
+
+  const pagination = (total: Ref<number>, pageItems: Ref<number>): ComputedRef<DataTablePagination> =>
+    computed(() => ({
+      currentPage: currentPage.value,
+      totalPages: Math.ceil(total.value / itemsPerPage.value) || 1,
+      totalItems: total.value,
+      pageItems: pageItems.value,
+      perPageOptions,
+      perPage: itemsPerPage.value,
+    }))
+
+  const refresh = () => deps.fetchData()
+
+  return {
+    searchTerm,
+    sortField,
+    sortDirection,
+    currentPage,
+    itemsPerPage,
+    columnFilters,
+    filters,
+    sort,
+    pagination,
+    handleSort,
+    handlePageChange,
+    handlePerPageChange,
+    handleFilterChange,
+    handleColumnFiltersChange,
+    debouncedSearch,
+    refresh,
+    perPageOptions,
+  }
+}
diff --git a/frontend/app/composables/useDocuments.ts b/frontend/app/composables/useDocuments.ts
new file mode 100644
index 0000000..5078c5a
--- /dev/null
+++ b/frontend/app/composables/useDocuments.ts
@@ -0,0 +1,334 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Document {
+  id: string
+  name: string
+  filename: string
+  mimeType: string
+  size: number
+  fileUrl: string
+  downloadUrl: string
+  type?: string
+  /** @deprecated Legacy Base64 data URI — use fileUrl instead */
+  path?: string
+  createdAt?: string
+  siteId?: string
+  machineId?: string
+  composantId?: string
+  productId?: string
+  pieceId?: string
+  site?: { id: string; name?: string } | null
+  machine?: { id: string; name?: string } | null
+  composant?: { id: string; name?: string } | null
+  piece?: { id: string; name?: string } | null
+  product?: { id: string; name?: string } | null
+}
+
+export interface UploadContext {
+  siteId?: string
+  machineId?: string
+  composantId?: string
+  productId?: string
+  pieceId?: string
+  type?: string
+}
+
+export interface DocumentResult {
+  success: boolean
+  data?: Document | Document[]
+  error?: string
+}
+
+interface LoadDocumentsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  attachmentFilter?: string
+  type?: string
+  force?: boolean
+}
+
+const documents = ref<Document[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') return p.totalItems
+  if (typeof p?.['hydra:totalItems'] === 'number') return p['hydra:totalItems']
+  return fallbackLength
+}
+
+export function useDocuments() {
+  const { get, patch, postFormData, delete: del } = useApi()
+  const { showError, showSuccess } = useToast()
+
+  const loadFromEndpoint = async (
+    endpoint: string,
+    { updateStore = false, itemsPerPage }: { updateStore?: boolean; itemsPerPage?: number } = {},
+  ): Promise<DocumentResult> => {
+    loading.value = true
+    try {
+      const url = itemsPerPage ? `${endpoint}${endpoint.includes('?') ? '&' : '?'}itemsPerPage=${itemsPerPage}` : endpoint
+      const result = await get(url)
+      if (result.success) {
+        const data = extractCollection(result.data)
+        if (updateStore) {
+          documents.value = data
+        }
+        return { success: true, data }
+      }
+      if (result.error) {
+        showError(result.error)
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error(`Erreur lors du chargement des documents (${endpoint}):`, error)
+      showError('Impossible de charger les documents')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadDocuments = async (options: LoadDocumentsOptions = {}): Promise<DocumentResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'createdAt',
+      orderDir = 'desc',
+      attachmentFilter = 'all',
+      type = 'all',
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && page === 1 && attachmentFilter === 'all' && type === 'all') {
+      return { success: true, data: documents.value }
+    }
+
+    if (loading.value) {
+      return { success: true, data: documents.value }
+    }
+
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('name', search.trim())
+      }
+
+      if (attachmentFilter && attachmentFilter !== 'all') {
+        params.set(`exists[${attachmentFilter}]`, 'true')
+      }
+
+      if (type && type !== 'all') {
+        params.set('type', type)
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/documents?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        documents.value = items
+        total.value = extractTotal(result.data, items.length)
+        loaded.value = true
+        return { success: true, data: items }
+      }
+      if (result.error) {
+        showError(result.error)
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors du chargement des documents:', error)
+      showError('Impossible de charger les documents')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadDocumentsBySite = async (
+    siteId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!siteId) {
+      return { success: false, error: 'Aucun site sélectionné' }
+    }
+    return loadFromEndpoint(`/documents/site/${siteId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByMachine = async (
+    machineId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!machineId) {
+      return { success: false, error: 'Aucune machine sélectionnée' }
+    }
+    return loadFromEndpoint(`/documents/machine/${machineId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByComponent = async (
+    componentId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!componentId) {
+      return { success: false, error: 'Aucun composant sélectionné' }
+    }
+    return loadFromEndpoint(`/documents/composant/${componentId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByProduct = async (
+    productId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!productId) {
+      return { success: false, error: 'Aucun produit sélectionné' }
+    }
+    return loadFromEndpoint(`/documents/product/${productId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const loadDocumentsByPiece = async (
+    pieceId: string,
+    options: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!pieceId) {
+      return { success: false, error: 'Aucune pièce sélectionnée' }
+    }
+    return loadFromEndpoint(`/documents/piece/${pieceId}`, { updateStore: options.updateStore ?? false })
+  }
+
+  const uploadDocuments = async (
+    { files, context = {} }: { files: File[]; context?: UploadContext },
+    { updateStore = false }: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!files.length) {
+      return { success: false, error: 'Aucun fichier sélectionné' }
+    }
+
+    loading.value = true
+    const created: Document[] = []
+
+    try {
+      for (const file of files) {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('name', file.name)
+        if (context.type) formData.append('type', context.type)
+
+        if (context.siteId) formData.append('siteId', context.siteId)
+        if (context.machineId) formData.append('machineId', context.machineId)
+        if (context.composantId) formData.append('composantId', context.composantId)
+        if (context.productId) formData.append('productId', context.productId)
+        if (context.pieceId) formData.append('pieceId', context.pieceId)
+
+        const result = await postFormData('/documents', formData)
+        if (result.success) {
+          created.push(result.data as Document)
+          showSuccess(`Document "${file.name}" ajouté`)
+        } else if (result.error) {
+          showError(`Erreur sur ${file.name} : ${result.error}`)
+        }
+      }
+
+      if (created.length) {
+        if (updateStore) {
+          documents.value = [...created, ...documents.value]
+        }
+        return { success: true, data: created }
+      }
+
+      return { success: false, error: 'Aucun document ajouté' }
+    } catch (error) {
+      const err = error as Error
+      console.error("Erreur lors de l'upload des documents:", error)
+      showError("Échec de l'ajout des documents")
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteDocument = async (
+    id: string | number,
+    { updateStore = false }: { updateStore?: boolean } = {},
+  ): Promise<DocumentResult> => {
+    if (!id) {
+      return { success: false, error: 'Identifiant manquant' }
+    }
+
+    loading.value = true
+    try {
+      const result = await del(`/documents/${id}`)
+      if (result.success) {
+        if (updateStore) {
+          documents.value = documents.value.filter((doc) => doc.id !== id)
+        }
+        showSuccess('Document supprimé')
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors de la suppression du document:', error)
+      showError('Impossible de supprimer le document')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateDocument = async (
+    id: string,
+    data: { name?: string; type?: string },
+  ): Promise<DocumentResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/documents/${id}`, data)
+      if (result.success && result.data) {
+        const updated = result.data as Document
+        const index = documents.value.findIndex((doc) => doc.id === id)
+        if (index !== -1) {
+          documents.value[index] = { ...documents.value[index], ...updated }
+        }
+        showSuccess('Document mis à jour')
+        return { success: true, data: updated }
+      }
+      if (result.error) showError(result.error)
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de mettre à jour le document')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    documents,
+    total,
+    loading,
+    loaded,
+    loadDocuments,
+    loadDocumentsBySite,
+    loadDocumentsByMachine,
+    loadDocumentsByComponent,
+    loadDocumentsByPiece,
+    loadDocumentsByProduct,
+    uploadDocuments,
+    updateDocument,
+    deleteDocument,
+  }
+}
diff --git a/frontend/app/composables/useDragReorder.ts b/frontend/app/composables/useDragReorder.ts
new file mode 100644
index 0000000..4523e98
--- /dev/null
+++ b/frontend/app/composables/useDragReorder.ts
@@ -0,0 +1,109 @@
+import { ref } from 'vue'
+
+interface DragReorderHandlers {
+  draggingIndex: Ref<number | null>
+  dropTargetIndex: Ref<number | null>
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDragOver: (event: DragEvent) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+  reorderClass: (index: number) => string
+  reset: () => void
+}
+
+interface DragReorderOptions {
+  draggingClass?: string
+  dropTargetClass?: string
+  onReorder?: () => void
+}
+
+function moveItemInPlace<T>(list: T[], from: number, to: number): void {
+  if (from === to) return
+  if (from < 0 || to < 0 || from >= list.length || to >= list.length) return
+  const updated = list.slice()
+  const [item] = updated.splice(from, 1)
+  if (item === undefined) return
+  updated.splice(to, 0, item)
+  list.splice(0, list.length, ...updated)
+}
+
+export function useDragReorder(
+  getList: () => unknown[] | undefined,
+  options: DragReorderOptions = {},
+): DragReorderHandlers {
+  const {
+    draggingClass = 'border-dashed border-primary',
+    dropTargetClass = 'border-primary border-dashed bg-primary/5',
+    onReorder,
+  } = options
+
+  const draggingIndex = ref<number | null>(null)
+  const dropTargetIndex = ref<number | null>(null)
+
+  const reset = () => {
+    draggingIndex.value = null
+    dropTargetIndex.value = null
+  }
+
+  const onDragStart = (index: number, event: DragEvent) => {
+    draggingIndex.value = index
+    dropTargetIndex.value = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  const onDragEnter = (index: number) => {
+    if (draggingIndex.value === null) return
+    dropTargetIndex.value = index
+  }
+
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault()
+  }
+
+  const onDrop = (index: number) => {
+    const list = getList()
+    if (!Array.isArray(list)) {
+      reset()
+      return
+    }
+    const from = draggingIndex.value
+    if (from === null) {
+      reset()
+      return
+    }
+    moveItemInPlace(list, from, index)
+    onReorder?.()
+    reset()
+  }
+
+  const onDragEnd = () => {
+    reset()
+  }
+
+  const reorderClass = (index: number): string => {
+    if (draggingIndex.value === index) return draggingClass
+    if (
+      draggingIndex.value !== null
+      && dropTargetIndex.value === index
+      && draggingIndex.value !== index
+    ) {
+      return dropTargetClass
+    }
+    return ''
+  }
+
+  return {
+    draggingIndex,
+    dropTargetIndex,
+    onDragStart,
+    onDragEnter,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    reorderClass,
+    reset,
+  }
+}
diff --git a/frontend/app/composables/useEntityCustomFields.ts b/frontend/app/composables/useEntityCustomFields.ts
new file mode 100644
index 0000000..4f57280
--- /dev/null
+++ b/frontend/app/composables/useEntityCustomFields.ts
@@ -0,0 +1,181 @@
+/**
+ * Reactive custom field management for entity items (ComponentItem, PieceItem).
+ *
+ * Wraps the pure logic from entityCustomFieldLogic.ts with Vue reactivity,
+ * watchers, and API calls for updating/upserting custom field values.
+ */
+
+import { computed, watch } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import {
+  buildDefinitionSources,
+  buildCandidateCustomFields,
+  mergeFieldDefinitionsWithValues,
+  dedupeMergedFields,
+  ensureCustomFieldId,
+  resolveFieldId,
+  resolveFieldName,
+  resolveFieldType,
+  resolveFieldReadOnly,
+  resolveCustomFieldId,
+  buildCustomFieldMetadata,
+} from '~/shared/utils/entityCustomFieldLogic'
+
+export interface EntityCustomFieldsDeps {
+  entity: () => any
+  entityType: 'composant' | 'piece'
+}
+
+export function useEntityCustomFields(deps: EntityCustomFieldsDeps) {
+  const { entity, entityType } = deps
+  const {
+    updateCustomFieldValue: updateCustomFieldValueApi,
+    upsertCustomFieldValue,
+  } = useCustomFields()
+  const { showSuccess, showError } = useToast()
+
+  const definitionSources = computed(() =>
+    buildDefinitionSources(entity(), entityType),
+  )
+
+  const displayedCustomFields = computed(() =>
+    dedupeMergedFields(
+      mergeFieldDefinitionsWithValues(
+        definitionSources.value,
+        entity().customFieldValues,
+      ),
+    ),
+  )
+
+  const candidateCustomFields = computed(() =>
+    buildCandidateCustomFields(entity(), definitionSources.value),
+  )
+
+  // Watchers to ensure field IDs are resolved
+  watch(
+    candidateCustomFields,
+    () => {
+      const candidates = candidateCustomFields.value
+      ;(displayedCustomFields.value || []).forEach((field: any) => {
+        if (field) ensureCustomFieldId(field, candidates)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+
+  watch(
+    displayedCustomFields,
+    (fields) => {
+      const candidates = candidateCustomFields.value
+      ;(fields || []).forEach((field: any) => {
+        if (field) ensureCustomFieldId(field, candidates)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+
+  const updateCustomField = async (field: any) => {
+    if (!field || resolveFieldReadOnly(field)) return
+
+    const e = entity()
+    const fieldValueId = resolveFieldId(field)
+
+    // Update existing field value
+    if (fieldValueId) {
+      const result: any = await updateCustomFieldValueApi(fieldValueId, { value: field.value ?? '' })
+      if (result.success) {
+        const existingValue = e.customFieldValues?.find((v: any) => v.id === fieldValueId)
+        if (existingValue?.customField?.id) {
+          field.customFieldId = existingValue.customField.id
+          field.customField = existingValue.customField
+        }
+        showSuccess(`Champ "${resolveFieldName(field)}" mis à jour avec succès`)
+      } else {
+        showError(`Erreur lors de la mise à jour du champ "${resolveFieldName(field)}"`)
+      }
+      return
+    }
+
+    // Create new field value
+    const customFieldId = ensureCustomFieldId(field, candidateCustomFields.value)
+    const fieldName = resolveFieldName(field)
+    if (!e?.id) {
+      showError(`Impossible de créer la valeur pour ce champ`)
+      return
+    }
+    if (!customFieldId && (!fieldName || fieldName === 'Champ')) {
+      showError(`Impossible de créer la valeur pour ce champ`)
+      return
+    }
+
+    const metadata = customFieldId ? undefined : buildCustomFieldMetadata(field)
+    const result: any = await upsertCustomFieldValue(
+      customFieldId,
+      entityType,
+      e.id,
+      field.value ?? '',
+      metadata,
+    )
+
+    if (result.success) {
+      const newValue = result.data
+      if (newValue?.id) {
+        field.customFieldValueId = newValue.id
+        field.value = newValue.value ?? field.value ?? ''
+        if (newValue.customField?.id) {
+          field.customFieldId = newValue.customField.id
+          field.customField = newValue.customField
+        }
+
+        if (Array.isArray(e.customFieldValues)) {
+          const index = e.customFieldValues.findIndex((v: any) => v.id === newValue.id)
+          if (index !== -1) {
+            e.customFieldValues.splice(index, 1, newValue)
+          } else {
+            e.customFieldValues.push(newValue)
+          }
+        } else {
+          e.customFieldValues = [newValue]
+        }
+      }
+      showSuccess(`Champ "${resolveFieldName(field)}" créé avec succès`)
+
+      // Update definitions list
+      const definitions = Array.isArray(e.customFields) ? [...e.customFields] : []
+      const fieldIdentifier = ensureCustomFieldId(field, candidateCustomFields.value)
+      const existingIndex = definitions.findIndex((definition: any) => {
+        const definitionId = resolveCustomFieldId(definition)
+        if (fieldIdentifier && definitionId) return definitionId === fieldIdentifier
+        return definition?.name === resolveFieldName(field)
+      })
+
+      const updatedDefinition = {
+        ...(existingIndex !== -1 ? definitions[existingIndex] : {}),
+        customFieldValueId: field.customFieldValueId,
+        customFieldId: fieldIdentifier,
+        name: resolveFieldName(field),
+        type: resolveFieldType(field),
+        required: field.required ?? false,
+        options: field.options ?? [],
+        value: field.value ?? '',
+        customField: field.customField ?? null,
+      }
+
+      if (existingIndex !== -1) {
+        definitions.splice(existingIndex, 1, updatedDefinition)
+      } else {
+        definitions.push(updatedDefinition)
+      }
+      e.customFields = definitions
+    } else {
+      showError(`Erreur lors de la sauvegarde du champ "${resolveFieldName(field)}"`)
+    }
+  }
+
+  return {
+    displayedCustomFields,
+    candidateCustomFields,
+    updateCustomField,
+  }
+}
diff --git a/frontend/app/composables/useEntityDocuments.ts b/frontend/app/composables/useEntityDocuments.ts
new file mode 100644
index 0000000..f00d946
--- /dev/null
+++ b/frontend/app/composables/useEntityDocuments.ts
@@ -0,0 +1,136 @@
+/**
+ * Reactive document management for entity items (ComponentItem, PieceItem).
+ *
+ * Handles document CRUD operations, preview modal state, and lazy loading.
+ * Display helpers (formatSize, shouldInlinePdf, etc.) are imported from
+ * shared/utils/documentDisplayUtils.ts.
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+export interface EntityDocumentsDeps {
+  entity: () => any
+  entityType: 'composant' | 'piece'
+}
+
+export function useEntityDocuments(deps: EntityDocumentsDeps) {
+  const { entity, entityType } = deps
+  const { uploadDocuments, deleteDocument, updateDocument } = useDocuments()
+
+  const loadDocumentsFn = entityType === 'composant'
+    ? useDocuments().loadDocumentsByComponent
+    : useDocuments().loadDocumentsByPiece
+
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const documentsLoaded = ref(!!(entity().documents && entity().documents.length))
+
+  const documents = computed(() => entity().documents || [])
+
+  // Preview modal state
+  const previewDocument = ref<any>(null)
+  const previewVisible = ref(false)
+
+  const openPreview = (doc: any) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  // Document watchers
+  watch(
+    () => entity().documents,
+    (docs: any) => {
+      documentsLoaded.value = !!(docs && docs.length)
+    },
+  )
+
+  // CRUD operations
+  const refreshDocuments = async () => {
+    const e = entity()
+    if (!e?.id || e._structurePiece) return
+    loadingDocuments.value = true
+    try {
+      const result: any = await loadDocumentsFn(e.id, { updateStore: false })
+      if (result.success) {
+        e.documents = result.data || []
+        documentsLoaded.value = true
+      }
+    } finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const ensureDocumentsLoaded = async () => {
+    if (documentsLoaded.value || !entity()?.id) return
+    await refreshDocuments()
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    const e = entity()
+    if (!files.length || !e?.id) return
+    uploadingDocuments.value = true
+    try {
+      const contextKey = entityType === 'composant' ? 'composantId' : 'pieceId'
+      const result: any = await uploadDocuments(
+        { files, context: { [contextKey]: e.id } } as any,
+        { updateStore: false } as any,
+      )
+      if (result.success) {
+        const newDocs = result.data || []
+        e.documents = [...newDocs, ...(e.documents || [])]
+        documentsLoaded.value = true
+        selectedFiles.value = []
+      }
+    } finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const removeDocument = async (documentId: string) => {
+    if (!documentId) return
+    const result: any = await deleteDocument(documentId, { updateStore: false } as any)
+    if (result.success) {
+      const e = entity()
+      e.documents = (e.documents || []).filter((doc: any) => doc.id !== documentId)
+    }
+  }
+
+  const editDocument = async (id: string, data: { name?: string; type?: string }) => {
+    const result: any = await updateDocument(id, data)
+    if (result.success) {
+      const e = entity()
+      const docs = e.documents || []
+      const index = docs.findIndex((doc: any) => doc.id === id)
+      if (index !== -1) {
+        docs[index] = { ...docs[index], ...data }
+      }
+    }
+    return result
+  }
+
+  return {
+    documents,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    documentsLoaded,
+    previewDocument,
+    previewVisible,
+    openPreview,
+    closePreview,
+    refreshDocuments,
+    ensureDocumentsLoaded,
+    handleFilesAdded,
+    removeDocument,
+    editDocument,
+  }
+}
diff --git a/frontend/app/composables/useEntityHistory.ts b/frontend/app/composables/useEntityHistory.ts
new file mode 100644
index 0000000..9be67b8
--- /dev/null
+++ b/frontend/app/composables/useEntityHistory.ts
@@ -0,0 +1,70 @@
+/**
+ * Generic entity history composable.
+ *
+ * Replaces useComponentHistory, usePieceHistory, useProductHistory which were
+ * 99% identical (only the API endpoint differed).
+ */
+
+import { ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+
+export type EntityHistoryActor = {
+  id: string
+  label: string
+}
+
+export type EntityHistoryEntry = {
+  id: string
+  action: 'create' | 'update' | 'delete' | string
+  createdAt: string
+  actor: EntityHistoryActor | null
+  diff: Record<string, { from: unknown; to: unknown }> | null
+  snapshot: Record<string, unknown> | null
+}
+
+const ENTITY_ENDPOINTS: Record<string, string> = {
+  machine: '/machines',
+  composant: '/composants',
+  piece: '/pieces',
+  product: '/products',
+}
+
+const extractItems = (payload: any): EntityHistoryEntry[] => {
+  if (Array.isArray(payload?.items)) return payload.items
+  if (Array.isArray(payload?.member)) return payload.member
+  if (Array.isArray(payload?.['hydra:member'])) return payload['hydra:member']
+  return []
+}
+
+export function useEntityHistory(entityType: 'machine' | 'composant' | 'piece' | 'product') {
+  const { get } = useApi()
+  const basePath = ENTITY_ENDPOINTS[entityType]
+
+  const history = ref<EntityHistoryEntry[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const loadHistory = async (entityId: string) => {
+    loading.value = true
+    error.value = null
+    try {
+      const result = await get(`${basePath}/${entityId}/history`)
+      if (!result.success) {
+        error.value = result.error ?? 'Impossible de charger l\'historique.'
+        history.value = []
+        return result
+      }
+      history.value = extractItems(result.data)
+      return { success: true, data: history.value }
+    } catch (err: any) {
+      const message = err?.message ?? 'Erreur inconnue'
+      error.value = message
+      history.value = []
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { history, loading, error, loadHistory }
+}
diff --git a/frontend/app/composables/useEntityProductDisplay.ts b/frontend/app/composables/useEntityProductDisplay.ts
new file mode 100644
index 0000000..e0de3fa
--- /dev/null
+++ b/frontend/app/composables/useEntityProductDisplay.ts
@@ -0,0 +1,103 @@
+/**
+ * Reactive product display for entity items (ComponentItem, PieceItem).
+ *
+ * Resolves product information from entity.product, entity.__productDisplay,
+ * or a selectedProduct ref, and produces display-ready computed properties.
+ */
+
+import { computed, type Ref } from 'vue'
+
+const currencyFormatter = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  currencyDisplay: 'narrowSymbol',
+})
+
+function buildProductDisplay(product: any) {
+  if (!product || typeof product !== 'object') return null
+
+  const suppliers = Array.isArray(product.constructeurs)
+    ? product.constructeurs
+        .map((c: any) => c?.name)
+        .filter((name: any) => typeof name === 'string' && name.trim().length > 0)
+        .join(', ')
+    : product.supplierLabel || null
+
+  const priceValue = product.supplierPrice ?? product.price ?? product.priceLabel ?? product.priceDisplay ?? null
+  let price: string | null = null
+  if (priceValue !== null && priceValue !== undefined) {
+    const parsed = Number(priceValue)
+    if (!Number.isNaN(parsed)) {
+      price = currencyFormatter.format(parsed)
+    } else if (typeof priceValue === 'string' && priceValue.trim().length > 0) {
+      price = priceValue
+    }
+  }
+
+  return {
+    name: product.name || product.label || product.reference || product.productName || null,
+    reference: product.reference || null,
+    category: product.typeProduct?.name || product.category || null,
+    suppliers,
+    price,
+  }
+}
+
+export interface EntityProductDisplayDeps {
+  entity: () => any
+  selectedProduct?: Ref<any>
+}
+
+export function useEntityProductDisplay(deps: EntityProductDisplayDeps) {
+  const { entity, selectedProduct } = deps
+
+  const displayProduct = computed(() => {
+    // Priority: selectedProduct (for PieceItem) → entity.product → entity.__productDisplay
+    if (selectedProduct?.value) {
+      const normalized = buildProductDisplay(selectedProduct.value)
+      if (normalized) return normalized
+    }
+    const explicit = entity().product || null
+    const normalized = buildProductDisplay(explicit)
+    if (normalized) return normalized
+    const fallback = entity().__productDisplay
+    if (fallback) {
+      return {
+        name: fallback.name || null,
+        reference: fallback.reference || null,
+        category: fallback.category || null,
+        suppliers: fallback.suppliers || null,
+        price: fallback.price || null,
+      }
+    }
+    return null
+  })
+
+  const displayProductName = computed(() => {
+    if (displayProduct.value?.name) return displayProduct.value.name
+    const e = entity()
+    return e.product?.name || e.productName || e.productLabel || null
+  })
+
+  const productInfoRows = computed(() => {
+    if (!displayProduct.value) return []
+    const rows: { label: string; value: string }[] = []
+    if (displayProduct.value.reference) rows.push({ label: 'Référence', value: displayProduct.value.reference })
+    if (displayProduct.value.price) rows.push({ label: 'Prix indicatif', value: displayProduct.value.price })
+    if (displayProduct.value.suppliers) rows.push({ label: 'Fournisseur(s)', value: displayProduct.value.suppliers })
+    if (displayProduct.value.category) rows.push({ label: 'Catégorie', value: displayProduct.value.category })
+    return rows
+  })
+
+  const productDocuments = computed(() => {
+    const product = selectedProduct?.value || entity().product || null
+    return Array.isArray(product?.documents) ? product.documents : []
+  })
+
+  return {
+    displayProduct,
+    displayProductName,
+    productInfoRows,
+    productDocuments,
+  }
+}
diff --git a/frontend/app/composables/useEntityTypes.ts b/frontend/app/composables/useEntityTypes.ts
new file mode 100644
index 0000000..3b04fbf
--- /dev/null
+++ b/frontend/app/composables/useEntityTypes.ts
@@ -0,0 +1,192 @@
+/**
+ * Generic entity types composable.
+ *
+ * Replaces useComponentTypes, usePieceTypes, useProductTypes which were
+ * 95%+ identical (only the category string and labels differed).
+ */
+
+import { ref, type Ref } from 'vue'
+import { useToast } from './useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import {
+  listModelTypes,
+  createModelType,
+  updateModelType,
+  deleteModelType,
+  type ModelType,
+  type ModelCategory,
+} from '~/services/modelTypes'
+
+export interface EntityType extends ModelType {
+  description?: string | null
+}
+
+interface EntityTypePayload {
+  name: string
+  code?: string
+  description?: string | null
+  notes?: string | null
+  structure?: any
+}
+
+interface EntityTypeResult {
+  success: boolean
+  data?: EntityType | EntityType[]
+  error?: string
+}
+
+interface EntityTypeConfig {
+  category: ModelCategory
+  label: string // e.g. 'composant', 'pièce', 'produit'
+}
+
+const generateCodeFromName = (name: string): string => {
+  return (name || '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036F]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-+/g, '-') || 'type'
+}
+
+// Shared state per category (module-level singletons)
+const stateByCategory: Record<string, { types: Ref<EntityType[]>; loading: Ref<boolean>; loaded: Ref<boolean> }> = {}
+
+function getOrCreateState(category: ModelCategory) {
+  if (!stateByCategory[category]) {
+    stateByCategory[category] = {
+      types: ref<EntityType[]>([]),
+      loading: ref(false),
+      loaded: ref(false),
+    }
+  }
+  return stateByCategory[category]
+}
+
+/**
+ * Marks the cache for a given category as stale.
+ * Next call to `loadTypes()` (without `force`) will refetch from the API.
+ * Safe to call from event handlers (no setup context required).
+ */
+export function invalidateEntityTypeCache(category: ModelCategory) {
+  const state = stateByCategory[category]
+  if (state) {
+    state.loaded.value = false
+  }
+}
+
+export function useEntityTypes(config: EntityTypeConfig) {
+  const { category, label } = config
+  const { showSuccess, showError } = useToast()
+  const state = getOrCreateState(category)
+
+  const normalizeItem = (item: ModelType): EntityType => ({
+    ...item,
+    description: item.description ?? item.notes ?? null,
+  })
+
+  const loadTypes = async (options: { force?: boolean } = {}): Promise<EntityTypeResult> => {
+    if (!options.force && state.loaded.value) {
+      return { success: true, data: state.types.value }
+    }
+    state.loading.value = true
+    try {
+      const data = await listModelTypes({
+        category,
+        sort: 'name',
+        dir: 'asc',
+        limit: 200,
+      })
+      state.types.value = data.items.map(normalizeItem)
+      state.loaded.value = true
+      return { success: true, data: state.types.value }
+    } catch (error) {
+      const err = error as Error & { message?: string }
+      const message = humanizeError(err?.message)
+      showError(`Impossible de charger les types de ${label}.`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  const createType = async (payload: EntityTypePayload): Promise<EntityTypeResult> => {
+    state.loading.value = true
+    try {
+      const data = await createModelType({
+        name: payload.name,
+        code: payload.code || generateCodeFromName(payload.name),
+        category,
+        notes: payload.description ?? payload.notes ?? undefined,
+        description: payload.description ?? undefined,
+        structure: payload.structure ?? undefined,
+      })
+      const normalized = normalizeItem(data)
+      state.types.value.push(normalized)
+      showSuccess(`Type de ${label} "${data.name}" créé`)
+      return { success: true, data: normalized }
+    } catch (error) {
+      const err = error as Error & { data?: { error?: string; message?: string }; message?: string }
+      const raw = err?.data?.error || err?.data?.message || err?.message
+      const message = humanizeError(raw)
+      showError(`Impossible de créer le type de ${label} : ${message}`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  const updateType = async (id: string, payload: EntityTypePayload): Promise<EntityTypeResult> => {
+    state.loading.value = true
+    try {
+      const data = await updateModelType(id, {
+        name: payload.name,
+        description: payload.description ?? undefined,
+        notes: payload.notes ?? undefined,
+        code: payload.code,
+        structure: payload.structure ?? undefined,
+      })
+      const normalized = normalizeItem(data)
+      const index = state.types.value.findIndex((t) => t.id === id)
+      if (index !== -1) state.types.value[index] = normalized
+      showSuccess(`Type de ${label} "${data.name}" mis à jour`)
+      return { success: true, data: normalized }
+    } catch (error) {
+      const err = error as Error & { data?: { error?: string; message?: string }; message?: string }
+      const raw = err?.data?.error || err?.data?.message || err?.message
+      const message = humanizeError(raw)
+      showError(`Impossible de mettre à jour le type de ${label} : ${message}`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  const deleteType = async (id: string): Promise<EntityTypeResult> => {
+    state.loading.value = true
+    try {
+      await deleteModelType(id)
+      state.types.value = state.types.value.filter((t) => t.id !== id)
+      showSuccess(`Type de ${label} supprimé`)
+      return { success: true }
+    } catch (error) {
+      const err = error as Error & { data?: { error?: string; message?: string }; message?: string }
+      const raw = err?.data?.error || err?.data?.message || err?.message
+      const message = humanizeError(raw)
+      showError(`Impossible de supprimer le type de ${label} : ${message}`)
+      return { success: false, error: message }
+    } finally {
+      state.loading.value = false
+    }
+  }
+
+  return {
+    types: state.types,
+    loading: state.loading,
+    loadTypes,
+    createType,
+    updateType,
+    deleteType,
+  }
+}
diff --git a/frontend/app/composables/useEntityVersions.ts b/frontend/app/composables/useEntityVersions.ts
new file mode 100644
index 0000000..43572e3
--- /dev/null
+++ b/frontend/app/composables/useEntityVersions.ts
@@ -0,0 +1,98 @@
+import { ref, toValue } from 'vue'
+import { useApi } from '~/composables/useApi'
+import type { MaybeRef } from 'vue'
+
+export interface VersionEntry {
+  version: number
+  action: 'create' | 'update' | 'restore' | string
+  createdAt: string
+  actor: { id: string; label: string } | null
+  diff: Record<string, { from: unknown; to: unknown }> | null
+}
+
+export interface RestorePreview {
+  version: number
+  restoreMode: 'full' | 'partial'
+  diff: Record<string, { current: unknown; restored: unknown }>
+  warnings: Array<{
+    field: string
+    message: string
+    missingEntityId: string | null
+    missingEntityName: string | null
+  }>
+  snapshot: Record<string, unknown>
+}
+
+export interface RestoreResult {
+  success: boolean
+  newVersion: number
+  restoredFromVersion: number
+  restoreMode: 'full' | 'partial'
+  warnings: RestorePreview['warnings']
+}
+
+const ENTITY_ENDPOINTS: Record<string, string> = {
+  machine: '/machines',
+  composant: '/composants',
+  piece: '/pieces',
+  product: '/products',
+}
+
+interface Deps {
+  entityType: MaybeRef<string>
+  entityId: MaybeRef<string>
+}
+
+export function useEntityVersions(deps: Deps) {
+  const { get, post } = useApi()
+
+  const versions = ref<VersionEntry[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const getPath = () => {
+    const type = toValue(deps.entityType)
+    const id = toValue(deps.entityId)
+    const base = ENTITY_ENDPOINTS[type]
+    return `${base}/${id}`
+  }
+
+  const fetchVersions = async () => {
+    loading.value = true
+    error.value = null
+    try {
+      const result = await get(`${getPath()}/versions`)
+      if (!result.success) {
+        error.value = result.error ?? 'Impossible de charger les versions.'
+        versions.value = []
+        return
+      }
+      versions.value = result.data?.items ?? []
+    }
+    catch (err: any) {
+      error.value = err?.message ?? 'Erreur inconnue'
+      versions.value = []
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  const fetchPreview = async (version: number): Promise<RestorePreview | null> => {
+    const result = await get<RestorePreview>(`${getPath()}/versions/${version}/preview`)
+    if (!result.success || !result.data) {
+      return null
+    }
+    return result.data
+  }
+
+  const restore = async (version: number): Promise<RestoreResult | null> => {
+    const result = await post<RestoreResult>(`${getPath()}/versions/${version}/restore`, {})
+    if (!result.success || !result.data) {
+      return null
+    }
+    return result.data
+  }
+
+  return { versions, loading, error, fetchVersions, fetchPreview, restore }
+}
diff --git a/frontend/app/composables/useMachineCreatePage.ts b/frontend/app/composables/useMachineCreatePage.ts
new file mode 100644
index 0000000..5bf49b7
--- /dev/null
+++ b/frontend/app/composables/useMachineCreatePage.ts
@@ -0,0 +1,123 @@
+/**
+ * Machine creation page – orchestration composable.
+ *
+ * Simplified: no more TypeMachine / skeleton system.
+ * Supports direct creation or cloning from an existing machine.
+ */
+
+import { ref, reactive, onMounted } from 'vue'
+import { useMachines } from '~/composables/useMachines'
+import { useSites } from '~/composables/useSites'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+
+export function useMachineCreatePage() {
+  // ---------------------------------------------------------------------------
+  // Composable calls
+  // ---------------------------------------------------------------------------
+
+  const { machines, loadMachines, createMachine, cloneMachine } = useMachines()
+  const { sites, loadSites } = useSites()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // Local state
+  // ---------------------------------------------------------------------------
+
+  const submitting = ref(false)
+  const loading = ref(true)
+
+  const newMachine = reactive({
+    name: '',
+    siteId: '',
+    reference: '',
+    cloneFromMachineId: '',
+  })
+
+  // ---------------------------------------------------------------------------
+  // Machine creation
+  // ---------------------------------------------------------------------------
+
+  const finalizeMachineCreation = async () => {
+    if (submitting.value) return
+
+    if (!newMachine.name?.trim()) {
+      toast.showError('Merci de renseigner un nom pour la machine')
+      return
+    }
+
+    submitting.value = true
+    try {
+      let result: any
+
+      if (newMachine.cloneFromMachineId) {
+        result = await cloneMachine(newMachine.cloneFromMachineId, {
+          name: newMachine.name,
+          siteId: newMachine.siteId,
+          ...(newMachine.reference ? { reference: newMachine.reference } : {}),
+        })
+      } else {
+        result = await createMachine({
+          name: newMachine.name,
+          siteId: newMachine.siteId || undefined,
+          reference: newMachine.reference || undefined,
+        } as any)
+      }
+
+      if (result.success) {
+        const machineId = result.data?.id
+          || (result.data?.machine as any)?.id
+          || null
+
+        newMachine.name = ''
+        newMachine.siteId = ''
+        newMachine.reference = ''
+        newMachine.cloneFromMachineId = ''
+
+        if (machineId) {
+          await navigateTo(`/machine/${machineId}`)
+        } else {
+          await navigateTo('/machines')
+        }
+      } else if (result.error) {
+        toast.showError(`Impossible de créer la machine : ${humanizeError(result.error)}`)
+      }
+    } catch (error: any) {
+      toast.showError(`Impossible de créer la machine : ${humanizeError(error.message)}`)
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  onMounted(async () => {
+    loading.value = true
+    try {
+      await Promise.all([
+        loadSites(),
+        loadMachines(),
+      ])
+    } finally {
+      loading.value = false
+    }
+  })
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  return {
+    // State
+    newMachine,
+    sites,
+    machines,
+    submitting,
+    loading,
+
+    // Actions
+    finalizeMachineCreation,
+  }
+}
diff --git a/frontend/app/composables/useMachineCustomFieldDefs.ts b/frontend/app/composables/useMachineCustomFieldDefs.ts
new file mode 100644
index 0000000..a4e9a94
--- /dev/null
+++ b/frontend/app/composables/useMachineCustomFieldDefs.ts
@@ -0,0 +1,327 @@
+import { reactive, ref } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+
+// --- Types ---
+
+export type MachineFieldType = 'text' | 'number' | 'select' | 'boolean' | 'date'
+
+export interface MachineCustomFieldEditorField {
+  uid: string
+  serverId?: string
+  name: string
+  type: MachineFieldType
+  required: boolean
+  optionsText: string
+  orderIndex: number
+}
+
+interface InitialDef {
+  id: string
+  name: string
+  type: string
+  required: boolean
+  options?: string[]
+  orderIndex: number
+  defaultValue?: unknown
+}
+
+interface Deps {
+  machineId: string
+  initialDefs: InitialDef[]
+  onSaved: () => void | Promise<void>
+}
+
+// --- Helpers ---
+
+let uidCounter = 0
+const createUid = (): string => {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  uidCounter += 1
+  return `mcf-${Date.now().toString(36)}-${uidCounter}`
+}
+
+const normalizeLineEndings = (value: string): string =>
+  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+
+const toEditorField = (def: InitialDef, index: number): MachineCustomFieldEditorField => ({
+  uid: createUid(),
+  serverId: def.id,
+  name: def.name || '',
+  type: (def.type || 'text') as MachineFieldType,
+  required: Boolean(def.required),
+  optionsText: normalizeLineEndings(
+    Array.isArray(def.options) ? def.options.join('\n') : '',
+  ),
+  orderIndex: typeof def.orderIndex === 'number' ? def.orderIndex : index,
+})
+
+const hydrateFields = (defs: InitialDef[]): MachineCustomFieldEditorField[] =>
+  defs
+    .map((def, index) => toEditorField(def, index))
+    .sort((a, b) => a.orderIndex - b.orderIndex)
+    .map((field, index) => ({ ...field, orderIndex: index }))
+
+const buildSnapshot = (defs: InitialDef[]): Map<string, InitialDef> => {
+  const map = new Map<string, InitialDef>()
+  for (const def of defs) {
+    map.set(def.id, def)
+  }
+  return map
+}
+
+const applyOrderIndex = (
+  list: MachineCustomFieldEditorField[],
+): MachineCustomFieldEditorField[] =>
+  list.map((field, index) => ({ ...field, orderIndex: index }))
+
+const parseOptions = (optionsText: string): string[] =>
+  normalizeLineEndings(optionsText)
+    .split('\n')
+    .map(o => o.trim())
+    .filter(o => o.length > 0)
+
+// --- Composable ---
+
+export function useMachineCustomFieldDefs(deps: Deps) {
+  const { apiCall } = useApi()
+  const { showSuccess, showError } = useToast()
+
+  // --- State ---
+
+  const fields = ref<MachineCustomFieldEditorField[]>(hydrateFields(deps.initialDefs))
+  const initialSnapshot = ref<Map<string, InitialDef>>(buildSnapshot(deps.initialDefs))
+  const saving = ref(false)
+
+  // --- CRUD ---
+
+  const addField = () => {
+    const next = fields.value.slice()
+    next.push({
+      uid: createUid(),
+      name: '',
+      type: 'text',
+      required: false,
+      optionsText: '',
+      orderIndex: next.length,
+    })
+    fields.value = applyOrderIndex(next)
+  }
+
+  const removeField = (index: number) => {
+    const next = fields.value.filter((_, i) => i !== index)
+    fields.value = applyOrderIndex(next)
+  }
+
+  // --- Drag & drop ---
+
+  const dragState = reactive({
+    draggingIndex: null as number | null,
+    dropTargetIndex: null as number | null,
+  })
+
+  const resetDragState = () => {
+    dragState.draggingIndex = null
+    dragState.dropTargetIndex = null
+  }
+
+  const onDragStart = (index: number, event: DragEvent) => {
+    dragState.draggingIndex = index
+    dragState.dropTargetIndex = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  const onDragEnter = (index: number) => {
+    if (dragState.draggingIndex === null) return
+    dragState.dropTargetIndex = index
+  }
+
+  const onDrop = (index: number) => {
+    const from = dragState.draggingIndex
+    if (from === null) {
+      resetDragState()
+      return
+    }
+
+    if (from === index) {
+      resetDragState()
+      return
+    }
+
+    const list = fields.value.slice()
+    if (from < 0 || index < 0 || from >= list.length || index >= list.length) {
+      resetDragState()
+      return
+    }
+
+    const [moved] = list.splice(from, 1)
+    if (!moved) {
+      resetDragState()
+      return
+    }
+    list.splice(index, 0, moved)
+    fields.value = applyOrderIndex(list)
+    resetDragState()
+  }
+
+  const onDragEnd = () => {
+    resetDragState()
+  }
+
+  const reorderClass = (index: number): string => {
+    if (dragState.draggingIndex === index) {
+      return 'border-dashed border-primary bg-primary/5'
+    }
+    if (
+      dragState.draggingIndex !== null
+      && dragState.dropTargetIndex === index
+      && dragState.draggingIndex !== index
+    ) {
+      return 'border-primary border-dashed bg-primary/10'
+    }
+    return ''
+  }
+
+  // --- Save ---
+
+  const saveDefinitions = async () => {
+    if (saving.value) return
+
+    // Validate: remove empty-name fields before saving
+    const emptyNameFields = fields.value.filter(f => !f.name.trim() && !f.serverId)
+    if (emptyNameFields.length > 0) {
+      fields.value = applyOrderIndex(fields.value.filter(f => f.name.trim() || f.serverId))
+    }
+
+    saving.value = true
+
+    try {
+      const snapshot = initialSnapshot.value
+      const currentServerIds = new Set(
+        fields.value.filter(f => f.serverId).map(f => f.serverId!),
+      )
+
+      // DELETE removed fields
+      const deletedIds = [...snapshot.keys()].filter(id => !currentServerIds.has(id))
+      for (const id of deletedIds) {
+        const result = await apiCall(`/custom_fields/${id}`, { method: 'DELETE' })
+        if (!result.success) {
+          showError('Erreur lors de la suppression d\'un champ personnalisé')
+          await deps.onSaved()
+          return
+        }
+      }
+
+      let hasNewFields = false
+
+      for (const field of fields.value) {
+        const name = field.name.trim()
+        if (!name) continue
+
+        const options = field.type === 'select' ? parseOptions(field.optionsText) : []
+
+        if (!field.serverId) {
+          // POST new field
+          hasNewFields = true
+          const body: Record<string, unknown> = {
+            name,
+            type: field.type,
+            required: field.required,
+            options,
+            orderIndex: field.orderIndex,
+            machine: `/api/machines/${deps.machineId}`,
+          }
+
+          const result = await apiCall('/custom_fields', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/ld+json' },
+            body: JSON.stringify(body),
+          })
+          if (!result.success) {
+            showError('Erreur lors de la création d\'un champ personnalisé')
+            await deps.onSaved()
+            return
+          }
+        } else {
+          // PATCH modified field
+          const original = snapshot.get(field.serverId)
+          const originalOptions = Array.isArray(original?.options)
+            ? original.options.join('\n')
+            : ''
+          const currentOptions = field.type === 'select' ? field.optionsText : ''
+
+          const changed
+            = original?.name !== name
+            || original?.type !== field.type
+            || original?.required !== field.required
+            || normalizeLineEndings(originalOptions) !== normalizeLineEndings(currentOptions)
+            || original?.orderIndex !== field.orderIndex
+
+          if (changed) {
+            const body: Record<string, unknown> = {
+              name,
+              type: field.type,
+              required: field.required,
+              options,
+              orderIndex: field.orderIndex,
+            }
+
+            const result = await apiCall(`/custom_fields/${field.serverId}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/merge-patch+json' },
+              body: JSON.stringify(body),
+            })
+            if (!result.success) {
+              showError('Erreur lors de la mise à jour d\'un champ personnalisé')
+              await deps.onSaved()
+              return
+            }
+          }
+        }
+      }
+
+      // Initialize missing custom field values if new fields were created
+      if (hasNewFields) {
+        await apiCall(`/machines/${deps.machineId}/add-custom-fields`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/ld+json' },
+          body: JSON.stringify({}),
+        })
+      }
+
+      showSuccess('Champs personnalisés sauvegardés avec succès')
+      await deps.onSaved()
+    } catch {
+      showError('Erreur inattendue lors de la sauvegarde des champs personnalisés')
+      await deps.onSaved()
+    } finally {
+      saving.value = false
+    }
+  }
+
+  // --- Reinit ---
+
+  const reinit = (newDefs: InitialDef[]) => {
+    fields.value = hydrateFields(newDefs)
+    initialSnapshot.value = buildSnapshot(newDefs)
+  }
+
+  return {
+    fields,
+    saving,
+    dragState,
+    addField,
+    removeField,
+    onDragStart,
+    onDragEnter,
+    onDrop,
+    onDragEnd,
+    reorderClass,
+    saveDefinitions,
+    reinit,
+  }
+}
diff --git a/frontend/app/composables/useMachineDetailCustomFields.ts b/frontend/app/composables/useMachineDetailCustomFields.ts
new file mode 100644
index 0000000..d4b8790
--- /dev/null
+++ b/frontend/app/composables/useMachineDetailCustomFields.ts
@@ -0,0 +1,449 @@
+/**
+ * Machine detail — custom field management sub-composable.
+ *
+ * Handles custom field resolution, display filtering, sync and updates
+ * for machines, components and pieces.
+ */
+
+import { ref, computed } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import { normalizeStructureForEditor } from '~/shared/modelUtils'
+import {
+  shouldDisplayCustomField,
+  normalizeExistingCustomFieldDefinitions,
+  normalizeCustomFieldValueEntry,
+  mergeCustomFieldValuesWithDefinitions,
+  dedupeCustomFieldEntries,
+} from '~/shared/utils/customFieldUtils'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailCustomFieldsDeps {
+  machine: Ref<AnyRecord | null>
+  isEditMode: Ref<boolean>
+  constructeurs: Ref<unknown[]>
+  resolveProductReference: (source: AnyRecord) => { product: unknown; productId: string | null }
+  getProductDisplay: (source: AnyRecord) => unknown
+}
+
+export function useMachineDetailCustomFields(deps: MachineDetailCustomFieldsDeps) {
+  const { machine, isEditMode, constructeurs, resolveProductReference, getProductDisplay } = deps
+  const {
+    upsertCustomFieldValue,
+    updateCustomFieldValue: updateCustomFieldValueApi,
+  } = useCustomFields()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const machineCustomFields = ref<AnyRecord[]>([])
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const visibleMachineCustomFields = computed(() => {
+    const fields = Array.isArray(machineCustomFields.value) ? machineCustomFields.value : []
+    if (isEditMode.value) return fields
+    return fields.filter((field) => shouldDisplayCustomField(field))
+  })
+
+  // ---------------------------------------------------------------------------
+  // Transform helpers
+  // ---------------------------------------------------------------------------
+
+  const getStructureCustomFields = (structure: unknown): AnyRecord[] => {
+    if (!structure || typeof structure !== 'object') return []
+    const normalized = normalizeStructureForEditor(structure as any) as any
+    return Array.isArray(normalized?.customFields)
+      ? (normalized.customFields as AnyRecord[])
+      : []
+  }
+
+  const transformCustomFields = (piecesData: AnyRecord[]): AnyRecord[] => {
+    return (piecesData || []).map((piece) => {
+      const typePiece = (piece.typePiece as AnyRecord) || {}
+
+      const normalizeStructureDefs = (structure: unknown) =>
+        structure ? normalizeStructureForEditor(structure as AnyRecord) : null
+
+      const normalizedStructureDefs = [
+        normalizeStructureDefs((piece.definition as AnyRecord)?.structure),
+        normalizeStructureDefs(typePiece.structure),
+      ]
+
+      const valueEntries = [
+        ...(Array.isArray(piece.customFieldValues) ? piece.customFieldValues : []),
+        ...(Array.isArray(piece.customFields)
+          ? (piece.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+        ...(Array.isArray(typePiece.customFieldValues)
+          ? (typePiece.customFieldValues as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+      ]
+
+      const customFields = dedupeCustomFieldEntries(
+        mergeCustomFieldValuesWithDefinitions(
+          valueEntries,
+          normalizeExistingCustomFieldDefinitions(piece.customFields),
+          normalizeExistingCustomFieldDefinitions((piece.definition as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions((piece.typePiece as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions(typePiece.customFields),
+          ...normalizedStructureDefs.map((def) => getStructureCustomFields(def)),
+        ),
+      )
+
+      const constructeurIds = uniqueConstructeurIds(
+        piece.constructeurs,
+        piece.constructeurIds,
+        piece.constructeurId,
+        piece.constructeur,
+        (piece.originalPiece as AnyRecord)?.constructeurs,
+        (piece.originalPiece as AnyRecord)?.constructeurIds,
+        (piece.originalPiece as AnyRecord)?.constructeurId,
+        (piece.originalPiece as AnyRecord)?.constructeur,
+      )
+
+      const { product: resolvedProduct, productId: resolvedProductId } =
+        resolveProductReference(piece)
+
+      const constructeursList = resolveConstructeurs(
+        constructeurIds,
+        Array.isArray(piece.constructeurs) ? (piece.constructeurs as any[]) : [],
+        piece.constructeur ? [piece.constructeur as any] : [],
+        Array.isArray((piece.originalPiece as AnyRecord)?.constructeurs)
+          ? ((piece.originalPiece as AnyRecord).constructeurs as any[])
+          : [],
+        (piece.originalPiece as AnyRecord)?.constructeur
+          ? [(piece.originalPiece as AnyRecord).constructeur as any]
+          : [],
+        constructeurs.value as any,
+      ) as any[]
+
+      const normalizedPiece = {
+        ...piece,
+        product: resolvedProduct || piece.product || null,
+        productId: resolvedProductId || piece.productId || (piece.product as AnyRecord)?.id || null,
+      }
+      const productDisplay = getProductDisplay(normalizedPiece)
+
+      return {
+        ...normalizedPiece,
+        customFields,
+        documents: piece.documents || [],
+        constructeurs: constructeursList,
+        constructeur: constructeursList[0] || piece.constructeur || null,
+        constructeurIds,
+        constructeurId: constructeurIds[0] || null,
+        typePieceId:
+          piece.typePieceId ||
+          (piece.typePiece as AnyRecord)?.id ||
+          null,
+        __productDisplay: productDisplay,
+      }
+    })
+  }
+
+  const transformComponentCustomFields = (componentsData: AnyRecord[]): AnyRecord[] => {
+    const normalizeStructureDefs = (structure: unknown) =>
+      structure ? normalizeStructureForEditor(structure as AnyRecord) : null
+
+    return (componentsData || []).map((component) => {
+      const type = (component.typeComposant as AnyRecord) || {}
+
+      const normalizedStructureDefs = [
+        normalizeStructureDefs((component.definition as AnyRecord)?.structure),
+        normalizeStructureDefs(type.structure),
+      ]
+
+      const actualComponent = (component.originalComposant as AnyRecord) || component
+
+      const valueEntries = [
+        ...(Array.isArray(component.customFieldValues) ? component.customFieldValues : []),
+        ...(Array.isArray(component.customFields)
+          ? (component.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+        ...(Array.isArray(actualComponent?.customFields)
+          ? (actualComponent.customFields as AnyRecord[])
+              .map(normalizeCustomFieldValueEntry)
+              .filter((e) => e !== null)
+          : []),
+      ]
+
+      const customFields = dedupeCustomFieldEntries(
+        mergeCustomFieldValuesWithDefinitions(
+          valueEntries,
+          normalizeExistingCustomFieldDefinitions(component.customFields),
+          normalizeExistingCustomFieldDefinitions((component.definition as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions((component.typeComposant as AnyRecord)?.customFields),
+          normalizeExistingCustomFieldDefinitions(type.customFields),
+          normalizeExistingCustomFieldDefinitions(actualComponent?.customFields),
+          ...normalizedStructureDefs.map((def) => getStructureCustomFields(def)),
+        ),
+      )
+
+      const piecesTransformed = component.pieces
+        ? transformCustomFields(component.pieces as AnyRecord[]).map((p) => ({
+            ...p,
+            parentComponentName: component.name,
+          }))
+        : []
+
+      const subComponents = component.sousComposants
+        ? transformComponentCustomFields(component.sousComposants as AnyRecord[])
+        : []
+
+      const constructeurIds = uniqueConstructeurIds(
+        component.constructeurs,
+        component.constructeurIds,
+        component.constructeurId,
+        component.constructeur,
+        actualComponent?.constructeurs,
+        actualComponent?.constructeurIds,
+        actualComponent?.constructeurId,
+        actualComponent?.constructeur,
+      )
+
+      const constructeursList = resolveConstructeurs(
+        constructeurIds,
+        Array.isArray(component.constructeurs) ? (component.constructeurs as any[]) : [],
+        component.constructeur ? [component.constructeur as any] : [],
+        Array.isArray(actualComponent?.constructeurs)
+          ? (actualComponent.constructeurs as any[])
+          : [],
+        actualComponent?.constructeur ? [actualComponent.constructeur as any] : [],
+        constructeurs.value as any,
+      ) as any[]
+
+      const { product: resolvedProduct, productId: resolvedProductId } =
+        resolveProductReference(component)
+      const normalizedComponent = {
+        ...component,
+        product: resolvedProduct || component.product || null,
+        productId:
+          resolvedProductId || component.productId || (component.product as AnyRecord)?.id || null,
+      }
+      const productDisplay = getProductDisplay(normalizedComponent)
+
+      return {
+        ...normalizedComponent,
+        customFields,
+        pieces: piecesTransformed,
+        subComponents,
+        documents: component.documents || [],
+        constructeurs: constructeursList,
+        constructeur: constructeursList[0] || component.constructeur || null,
+        constructeurIds,
+        constructeurId: constructeurIds[0] || null,
+        typeComposantId:
+          component.typeComposantId ||
+          (component.typeComposant as AnyRecord)?.id ||
+          null,
+        __productDisplay: productDisplay,
+      }
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+  // Machine custom field methods
+  // ---------------------------------------------------------------------------
+
+  const syncMachineCustomFields = () => {
+    if (!machine.value) {
+      machineCustomFields.value = []
+      return
+    }
+    const valueEntries = [
+      ...(Array.isArray(machine.value.customFieldValues) ? machine.value.customFieldValues : []),
+      ...(Array.isArray(machine.value.customFields)
+        ? (machine.value.customFields as AnyRecord[])
+            .map(normalizeCustomFieldValueEntry)
+            .filter((e) => e !== null)
+        : []),
+    ]
+    const merged = dedupeCustomFieldEntries(
+      mergeCustomFieldValuesWithDefinitions(
+        valueEntries,
+        normalizeExistingCustomFieldDefinitions(machine.value.customFields),
+      ),
+    ).map((field: AnyRecord) => ({ ...field, readOnly: false }))
+    machineCustomFields.value = merged
+  }
+
+  const setMachineCustomFieldValue = (field: AnyRecord, value: unknown) => {
+    if (!field) return
+    field.value = value
+    if (field.customFieldValueId && (machine.value as AnyRecord)?.customFieldValues) {
+      const stored = ((machine.value as AnyRecord).customFieldValues as AnyRecord[]).find(
+        (fv) => fv.id === field.customFieldValueId,
+      )
+      if (stored) stored.value = value
+    }
+  }
+
+  const updateMachineCustomField = async (field: AnyRecord) => {
+    if (!machine.value || !field) return
+
+    const { id: customFieldId, customFieldValueId } = field
+    const fieldLabel = (field.name as string) || 'Champ personnalisé'
+
+    try {
+      if (customFieldValueId) {
+        const result: any = await updateCustomFieldValueApi(customFieldValueId as string, {
+          value: field.value ?? '',
+        } as any)
+        if (result.success) {
+          toast.showSuccess(`Champ "${fieldLabel}" de la machine mis à jour avec succès`)
+          syncMachineCustomFields()
+        } else {
+          toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+        }
+        return
+      }
+      if (!customFieldId) {
+        toast.showError(
+          'Impossible de mettre à jour ce champ personnalisé (identifiant manquant).',
+        )
+        return
+      }
+      const result: any = await upsertCustomFieldValue(
+        customFieldId as string,
+        'machine',
+        machine.value.id as string,
+        field.value ?? '',
+      )
+      if (result.success) {
+        const createdValue = result.data as AnyRecord
+        toast.showSuccess(`Champ "${fieldLabel}" de la machine mis à jour avec succès`)
+        if (createdValue?.id) {
+          if (!createdValue.customField) {
+            createdValue.customField = {
+              id: customFieldId,
+              name: field.name,
+              type: field.type,
+              required: field.required,
+              options: field.options,
+            }
+          }
+          field.customFieldValueId = createdValue.id
+          field.readOnly = false
+          const existingValues = Array.isArray(machine.value.customFieldValues)
+            ? (machine.value.customFieldValues as AnyRecord[]).filter(
+                (item) => item.id !== createdValue.id,
+              )
+            : []
+          machine.value.customFieldValues = [...existingValues, createdValue]
+        }
+        syncMachineCustomFields()
+      } else {
+        toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du champ personnalisé de la machine:', error)
+      toast.showError(`Erreur lors de la mise à jour du champ "${fieldLabel}"`)
+    }
+  }
+
+  const updatePieceCustomField = async (fieldUpdate: AnyRecord) => {
+    try {
+      const result: any = await upsertCustomFieldValue(
+        fieldUpdate.fieldId as string,
+        'piece',
+        fieldUpdate.pieceId as string,
+        fieldUpdate.value,
+      )
+      if (result.success) {
+        toast.showSuccess('Champ personnalisé mis à jour avec succès')
+      } else {
+        toast.showError('Erreur lors de la mise à jour du champ personnalisé')
+      }
+    } catch (error) {
+      toast.showError('Erreur lors de la mise à jour du champ personnalisé')
+      console.error('Erreur lors de la mise à jour du champ personnalisé:', error)
+    }
+  }
+
+  const saveAllMachineCustomFields = async () => {
+    if (!machine.value) return
+
+    const fields = Array.isArray(machineCustomFields.value) ? machineCustomFields.value : []
+    const fieldsToSave = fields.filter(
+      (field) => field.value !== undefined && field.value !== null && String(field.value).trim() !== '',
+    )
+
+    for (const field of fieldsToSave) {
+      const { id: customFieldId, customFieldValueId } = field
+
+      try {
+        if (customFieldValueId) {
+          await updateCustomFieldValueApi(customFieldValueId as string, {
+            value: field.value ?? '',
+          } as any)
+        } else if (customFieldId) {
+          const result: any = await upsertCustomFieldValue(
+            customFieldId as string,
+            'machine',
+            machine.value.id as string,
+            field.value ?? '',
+          )
+          if (result.success) {
+            const createdValue = result.data as AnyRecord
+            if (createdValue?.id) {
+              field.customFieldValueId = createdValue.id
+              if (!createdValue.customField) {
+                createdValue.customField = {
+                  id: customFieldId,
+                  name: field.name,
+                  type: field.type,
+                  required: field.required,
+                  options: field.options,
+                }
+              }
+              const existingValues = Array.isArray(machine.value.customFieldValues)
+                ? (machine.value.customFieldValues as AnyRecord[]).filter(
+                    (item) => item.id !== createdValue.id,
+                  )
+                : []
+              machine.value.customFieldValues = [...existingValues, createdValue]
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Erreur lors de la sauvegarde du champ personnalisé:', error)
+        throw error
+      }
+    }
+  }
+
+  return {
+    // State
+    machineCustomFields,
+
+    // Computed
+    visibleMachineCustomFields,
+
+    // Transform functions
+    transformCustomFields,
+    transformComponentCustomFields,
+
+    // Methods
+    syncMachineCustomFields,
+    setMachineCustomFieldValue,
+    updateMachineCustomField,
+    updatePieceCustomField,
+    saveAllMachineCustomFields,
+  }
+}
diff --git a/frontend/app/composables/useMachineDetailData.ts b/frontend/app/composables/useMachineDetailData.ts
new file mode 100644
index 0000000..5291bfd
--- /dev/null
+++ b/frontend/app/composables/useMachineDetailData.ts
@@ -0,0 +1,519 @@
+/**
+ * Machine detail page — core state & business logic (orchestrator).
+ *
+ * Extracted from pages/machine/[id].vue (F1.1).
+ * Composes sub-composables for documents, custom fields, hierarchy and products.
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useMachines } from '~/composables/useMachines'
+import { useComposants } from '~/composables/useComposants'
+import { usePieces } from '~/composables/usePieces'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useSites } from '~/composables/useSites'
+import { useMachinePrint } from '~/composables/useMachinePrint'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+  formatConstructeurContact as formatConstructeurContactSummary,
+  parseConstructeurLinksFromApi,
+  constructeurIdsFromLinks,
+} from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useMachineDetailDocuments } from '~/composables/useMachineDetailDocuments'
+import { useMachineDetailCustomFields } from '~/composables/useMachineDetailCustomFields'
+import { useMachineDetailHierarchy } from '~/composables/useMachineDetailHierarchy'
+import { useMachineDetailProducts } from '~/composables/useMachineDetailProducts'
+import { useMachineDetailUpdates } from '~/composables/useMachineDetailUpdates'
+import { downloadDocument as downloadDocumentHelper } from '~/shared/utils/documentDisplayUtils'
+
+type AnyRecord = Record<string, unknown>
+
+export function useMachineDetailData(machineId: string) {
+  // External composables
+  const {
+    updateMachine: updateMachineApi,
+    updateStructure: updateMachineStructure,
+  } = useMachines()
+  const { updateComposant: updateComposantApi } = useComposants()
+  const { updatePiece: updatePieceApi } = usePieces()
+  const { componentTypes, loadComponentTypes } = useComponentTypes()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { upsertCustomFieldValue } = useCustomFields()
+  const { get, patch: apiPatch } = useApi()
+  const toast = useToast()
+  const { constructeurs, loadConstructeurs } = useConstructeurs()
+  const { sites, loadSites } = useSites()
+
+  const {
+    printModalOpen,
+    printSelection,
+    ensurePrintSelectionEntries: _ensurePrintEntries,
+    setAllPrintSelection: _setAllPrint,
+    openPrintModal: _openPrintModal,
+    closePrintModal,
+    handlePrintConfirm: _handlePrintConfirm,
+  } = useMachinePrint()
+
+  // Core state
+  const loading = ref(true)
+  const machine = ref<AnyRecord | null>(null)
+  const productDocumentsMap = ref<Map<string, AnyRecord[]>>(new Map())
+  const printAreaRef = ref<HTMLElement | null>(null)
+  const saving = ref(false)
+
+  // Constructeur links
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+
+  // Machine fields
+  const machineName = ref('')
+  const machineReference = ref('')
+  const machineSiteId = ref('')
+  const machineConstructeurIds = ref<string[]>([])
+
+  const machineConstructeurId = computed({
+    get: () => machineConstructeurIds.value[0] || null,
+    set: (value: string | null) => {
+      machineConstructeurIds.value = value ? [value] : []
+    },
+  })
+
+  const machineConstructeursDisplay = computed(() => {
+    const ids = machineConstructeurIds.value
+    if (!ids.length) return [] as any[]
+    // Extract nested constructeur objects from link entries as candidate pool
+    const linkConstructeurs = constructeurLinks.value
+      .filter(l => l.constructeur && l.constructeur.id)
+      .map(l => l.constructeur!) as any[]
+    return resolveConstructeurs(
+      ids,
+      linkConstructeurs,
+      constructeurs.value as any,
+    ) as any[]
+  })
+
+  const machineConstructeurContact = computed(() =>
+    machineConstructeursDisplay.value
+      .map((c: any) => formatConstructeurContactSummary(c))
+      .filter(Boolean)
+      .join(' • '),
+  )
+
+  const hasMachineConstructeur = computed(
+    () => machineConstructeursDisplay.value.length > 0,
+  )
+
+  // UI state
+  const isEditMode = ref(false)
+  const canSubmit = computed(() => {
+    if (!machine.value) return false
+    if (saving.value) return false
+    if (!machineName.value.trim()) return false
+    return true
+  })
+  const debug = ref(false)
+
+  const componentsCollapsed = ref(true)
+  const collapseToggleToken = ref(0)
+
+  const piecesCollapsed = ref(true)
+  const pieceCollapseToggleToken = ref(0)
+
+  // Sub-composables: Products (init first — hierarchy needs findProductById)
+  // Products needs machineProductLinks from hierarchy, but hierarchy needs
+  // findProductById from products. We break the cycle by passing a lazy
+  // computed that reads from the hierarchy ref once it exists.
+  const _machineProductLinksProxy = ref<AnyRecord[]>([])
+
+  const {
+    productInventory,
+    productById,
+    machineDirectProducts,
+    findProductById,
+    resolveProductReference,
+    getProductDisplay,
+    loadProducts,
+  } = useMachineDetailProducts({
+    machineProductLinks: _machineProductLinksProxy,
+    productDocumentsMap,
+    constructeurs,
+  })
+
+  // Sub-composables: Custom fields
+  const {
+    machineCustomFields,
+    visibleMachineCustomFields,
+    transformCustomFields,
+    transformComponentCustomFields,
+    syncMachineCustomFields,
+    setMachineCustomFieldValue,
+    updateMachineCustomField,
+    updatePieceCustomField,
+    saveAllMachineCustomFields,
+  } = useMachineDetailCustomFields({
+    machine,
+    isEditMode,
+    constructeurs,
+    resolveProductReference,
+    getProductDisplay,
+  })
+
+  // Sub-composables: Hierarchy (includes structure link CRUD)
+  const hierarchy = useMachineDetailHierarchy({
+    machineId,
+    machine,
+    constructeurs,
+    findProductById,
+    transformComponentCustomFields,
+    transformCustomFields,
+    syncMachineCustomFields,
+  })
+
+  const {
+    components,
+    pieces,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+    flattenedComponents,
+    machinePieces,
+    applyMachineLinks,
+    reloadMachineStructure,
+    addComponentLink,
+    removeComponentLink,
+    addPieceLink,
+    removePieceLink,
+    addProductLink,
+    removeProductLink,
+  } = hierarchy
+
+  // Keep the product links proxy in sync with the hierarchy's machineProductLinks
+  watch(machineProductLinks, (val) => { _machineProductLinksProxy.value = val }, { immediate: true })
+
+  // Sub-composables: Documents
+  const {
+    machineDocumentFiles,
+    machineDocumentsUploading,
+    machineDocumentsLoaded,
+    previewDocument,
+    previewVisible,
+    machineDocumentsList,
+    refreshMachineDocuments,
+    handleMachineFilesAdded,
+    removeMachineDocument,
+    openPreview,
+    closePreview,
+    loadProductDocuments: _loadProductDocuments,
+  } = useMachineDetailDocuments({ machine })
+
+  // Type helpers
+  const componentTypeOptions = computed(() => componentTypes.value || [])
+  const pieceTypeOptions = computed(() => pieceTypes.value || [])
+
+  const componentTypeLabelMap = computed(() => {
+    const map = new Map<string, string>()
+    componentTypeOptions.value.forEach((type) => {
+      if (type?.id) map.set(type.id as string, (type.name as string) || '')
+    })
+    return map
+  })
+
+  const pieceTypeLabelMap = computed(() => {
+    const map = new Map<string, string>()
+    pieceTypeOptions.value.forEach((type) => {
+      if (type?.id) map.set(type.id as string, (type.name as string) || '')
+    })
+    return map
+  })
+
+  // Machine field methods
+  const initMachineFields = () => {
+    if (machine.value) {
+      machineName.value = (machine.value.name as string) || ''
+      machineReference.value = (machine.value.reference as string) || ''
+      // Parse constructeur links from structure response
+      const rawLinks = Array.isArray(machine.value.constructeurs) ? machine.value.constructeurs as any[] : []
+      const parsed = parseConstructeurLinksFromApi(rawLinks)
+      constructeurLinks.value = parsed
+      originalConstructeurLinks.value = parsed.map(l => ({ ...l }))
+      machineConstructeurIds.value = constructeurIdsFromLinks(parsed)
+      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
+    }
+  }
+
+  const getMachineFieldId = (fieldName: string): string => {
+    return machine.value ? `machine-${fieldName}-${machine.value.id}` : `machine-${fieldName}`
+  }
+
+  // Product documents wrapper
+  const loadProductDocuments = async () => {
+    const map = await _loadProductDocuments(machineProductLinks.value)
+    productDocumentsMap.value = map
+  }
+
+  // Update methods (delegated to useMachineDetailUpdates)
+  const {
+    updateMachineInfo,
+    updateComponent,
+    updatePieceFromComponent,
+    updatePieceInfo,
+    handleMachineConstructeurChange,
+    editComponent,
+    editPiece,
+  } = useMachineDetailUpdates({
+    machine,
+    machineName,
+    machineReference,
+    machineSiteId,
+    machineConstructeurIds,
+    constructeurLinks,
+    originalConstructeurLinks,
+    machineDocumentsLoaded,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+    applyMachineLinks,
+    refreshMachineDocuments,
+    transformComponentCustomFields,
+    transformCustomFields,
+    loadProductDocuments,
+    upsertCustomFieldValue,
+    updateMachineApi,
+    updateComposantApi: updateComposantApi,
+    updatePieceApi,
+    apiPatch,
+    toast,
+    syncLinks,
+  })
+
+  // UI methods
+  const toggleEditMode = () => {
+    isEditMode.value = !isEditMode.value
+    debug.value = !debug.value
+    if (isEditMode.value && !machineDocumentsLoaded.value) {
+      refreshMachineDocuments()
+    }
+  }
+
+  const toggleAllComponents = () => {
+    componentsCollapsed.value = !componentsCollapsed.value
+    collapseToggleToken.value += 1
+  }
+
+  const collapseAllComponents = () => {
+    componentsCollapsed.value = true
+    collapseToggleToken.value += 1
+  }
+
+  const toggleAllPieces = () => {
+    piecesCollapsed.value = !piecesCollapsed.value
+    pieceCollapseToggleToken.value += 1
+  }
+
+  const submitEdition = async () => {
+    if (!machine.value || saving.value) return
+    saving.value = true
+
+    try {
+      // 1. Save machine info (name, reference, site, constructeurs)
+      await updateMachineInfo()
+
+      // 2. Save all custom field values
+      await saveAllMachineCustomFields()
+
+      // 3. Reload machine data to get fresh state
+      await loadMachineData()
+
+      // 4. Exit edit mode
+      isEditMode.value = false
+      toast.showSuccess('Machine mise à jour avec succès')
+    } catch (error) {
+      console.error('Erreur lors de la sauvegarde:', error)
+      toast.showError('Erreur lors de la sauvegarde de la machine')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const cancelEdition = () => {
+    initMachineFields()
+    syncMachineCustomFields()
+    constructeurLinks.value = originalConstructeurLinks.value.map(l => ({ ...l }))
+    machineConstructeurIds.value = constructeurIdsFromLinks(constructeurLinks.value)
+    isEditMode.value = false
+  }
+
+  // Print wrappers
+  const ensurePrintSelectionEntries = () =>
+    _ensurePrintEntries(components.value, machinePieces.value)
+  const setAllPrintSelection = (value: boolean) =>
+    _setAllPrint(value, components.value, machinePieces.value)
+  const openPrintModal = () =>
+    _openPrintModal(components.value, machinePieces.value)
+  const handlePrintConfirm = () =>
+    _handlePrintConfirm(
+      machine.value as any,
+      machineName.value,
+      machineReference.value,
+      machinePieces.value as any,
+      components.value as any,
+    )
+
+  // Data loading
+  const loadMachineData = async () => {
+    loading.value = true
+    try {
+      const machineResult: any = await get(`/machines/${machineId}/structure`)
+
+      if (!machineResult.success) {
+        console.error('Machine non trouvée:', machineId, machineResult.error)
+        machine.value = null
+        components.value = []
+        pieces.value = []
+        return
+      }
+
+      const machinePayload =
+        machineResult.data?.machine && typeof machineResult.data.machine === 'object'
+          ? machineResult.data.machine
+          : machineResult.data
+
+      if (!machinePayload || typeof machinePayload !== 'object') {
+        console.error('Réponse machine invalide pour', machineId)
+        machine.value = null
+        components.value = []
+        pieces.value = []
+        return
+      }
+
+      machine.value = {
+        ...machinePayload,
+        documents: machinePayload.documents || [],
+        customFieldValues: machinePayload.customFieldValues || [],
+      }
+
+      machineDocumentsLoaded.value = !!((machine.value!.documents as AnyRecord[])?.length)
+      syncMachineCustomFields()
+      initMachineFields()
+
+      // Start document loading early (independent of products/links)
+      const documentPromise = !machineDocumentsLoaded.value
+        ? refreshMachineDocuments()
+        : Promise.resolve()
+
+      // Load products in parallel — don't block hierarchy rendering
+      const productsPromise = !(productInventory.value as AnyRecord[]).length
+        ? loadProducts().catch((error: unknown) => {
+            console.error('Erreur lors du chargement des produits:', error)
+          })
+        : Promise.resolve()
+
+      await productsPromise
+      const linksApplied = applyMachineLinks(machineResult.data)
+
+      if (machine.value) {
+        machine.value.componentLinks = machineComponentLinks.value
+        machine.value.pieceLinks = machinePieceLinks.value
+        machine.value.productLinks = machineProductLinks.value
+      }
+
+      if (!linksApplied) {
+        components.value = transformComponentCustomFields(machinePayload.components || [])
+        pieces.value = transformCustomFields(machinePayload.pieces || [])
+        machineProductLinks.value = Array.isArray(machinePayload.productLinks)
+          ? machinePayload.productLinks
+          : []
+      }
+
+      if (machine.value) {
+        machine.value.productLinks = machineProductLinks.value
+      }
+
+      collapseAllComponents()
+
+      // Load product documents in background
+      loadProductDocuments().catch(() => {})
+
+      // Wait for documents if still loading
+      await documentPromise
+    } catch (error) {
+      console.error('Erreur lors du chargement des données:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadInitialData = (): Promise<unknown[]> => {
+    return Promise.all([
+      loadConstructeurs(),
+      loadComponentTypes(),
+      loadPieceTypes(),
+      loadSites(),
+    ])
+  }
+
+  // Watchers
+  watch(() => (machine.value as AnyRecord)?.customFieldValues, () => syncMachineCustomFields(), { deep: true })
+  watch(() => (machine.value as AnyRecord)?.customFields, () => syncMachineCustomFields(), { deep: true })
+  watch(
+    () => [components.value.length, machinePieces.value.length],
+    () => ensurePrintSelectionEntries(),
+    { immediate: true },
+  )
+
+  return {
+    // State
+    loading, machine, components, pieces, printAreaRef,
+    machineComponentLinks, machinePieceLinks, machineProductLinks,
+
+    // Machine fields
+    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
+    machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    constructeurLinks, originalConstructeurLinks,
+    sites,
+
+    // UI state
+    machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
+    machineCustomFields, previewDocument, previewVisible,
+    isEditMode, debug,
+    componentsCollapsed, collapseToggleToken, piecesCollapsed, pieceCollapseToggleToken,
+
+    // Computed
+    componentTypeOptions, pieceTypeOptions, componentTypeLabelMap, pieceTypeLabelMap,
+    productInventory, productById, flattenedComponents, machinePieces,
+    machineDirectProducts, machineDocumentsList, visibleMachineCustomFields,
+
+    // Methods
+    findProductById, resolveProductReference, getProductDisplay,
+    initMachineFields, getMachineFieldId,
+    syncMachineCustomFields, setMachineCustomFieldValue,
+    updateMachineCustomField, updatePieceCustomField,
+    refreshMachineDocuments, handleMachineFilesAdded, removeMachineDocument,
+    openPreview, closePreview,
+    updateMachineInfo, updateComponent, updatePieceFromComponent,
+    updatePieceInfo, handleMachineConstructeurChange, editComponent, editPiece,
+    toggleEditMode, toggleAllComponents, collapseAllComponents, toggleAllPieces,
+    saving, canSubmit, submitEdition, cancelEdition,
+
+    // Print
+    printModalOpen, printSelection, ensurePrintSelectionEntries,
+    setAllPrintSelection, openPrintModal, closePrintModal, handlePrintConfirm,
+
+    // Loading & structure
+    loadMachineData, loadInitialData,
+    addComponentLink, removeComponentLink, addPieceLink, removePieceLink,
+    addProductLink, removeProductLink, reloadMachineStructure,
+
+    // External
+    constructeurs, loadProducts, updateMachineStructure, toast,
+    downloadDocument: downloadDocumentHelper,
+  }
+}
diff --git a/frontend/app/composables/useMachineDetailDocuments.ts b/frontend/app/composables/useMachineDetailDocuments.ts
new file mode 100644
index 0000000..96fc29f
--- /dev/null
+++ b/frontend/app/composables/useMachineDetailDocuments.ts
@@ -0,0 +1,146 @@
+/**
+ * Machine detail — document management sub-composable.
+ *
+ * Handles document loading, upload, delete and preview state.
+ */
+
+import { ref, computed } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailDocumentsDeps {
+  machine: Ref<AnyRecord | null>
+}
+
+export function useMachineDetailDocuments(deps: MachineDetailDocumentsDeps) {
+  const { machine } = deps
+  const {
+    uploadDocuments,
+    deleteDocument,
+    loadDocumentsByMachine,
+    loadDocumentsByProduct,
+  } = useDocuments()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const machineDocumentFiles = ref<File[]>([])
+  const machineDocumentsUploading = ref(false)
+  const machineDocumentsLoaded = ref(false)
+  const previewDocument = ref<AnyRecord | null>(null)
+  const previewVisible = ref(false)
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const machineDocumentsList = computed(
+    () => ((machine.value as AnyRecord)?.documents as AnyRecord[]) || [],
+  )
+
+  // ---------------------------------------------------------------------------
+  // Methods
+  // ---------------------------------------------------------------------------
+
+  const refreshMachineDocuments = async () => {
+    if (!machine.value?.id) return
+    const result: any = await loadDocumentsByMachine(machine.value.id as string, { updateStore: false })
+    if (result.success && machine.value) {
+      machine.value.documents = result.data || []
+      machineDocumentsLoaded.value = true
+    }
+  }
+
+  const handleMachineFilesAdded = async (files: File[]) => {
+    if (!files.length || !machine.value?.id) return
+    machineDocumentsUploading.value = true
+    try {
+      const result: any = await uploadDocuments(
+        { files, context: { machineId: machine.value.id } } as any,
+        { updateStore: false },
+      )
+      if (result.success && machine.value) {
+        const newDocs = (result.data as AnyRecord[]) || []
+        machine.value.documents = [
+          ...newDocs,
+          ...((machine.value.documents as AnyRecord[]) || []),
+        ]
+        machineDocumentFiles.value = []
+      }
+    } finally {
+      machineDocumentsUploading.value = false
+    }
+  }
+
+  const removeMachineDocument = async (documentId: string) => {
+    if (!documentId) return
+    const result: any = await deleteDocument(documentId, { updateStore: false })
+    if (result.success && machine.value) {
+      machine.value.documents = ((machine.value.documents as AnyRecord[]) || []).filter(
+        (doc) => doc.id !== documentId,
+      )
+    }
+  }
+
+  const openPreview = (doc: AnyRecord) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const loadProductDocuments = async (machineProductLinks: AnyRecord[]) => {
+    const productIds = machineProductLinks
+      .map((link) => {
+        const p = link.product as AnyRecord | string | null
+        if (typeof p === 'string') return p.split('/').pop() || null
+        return (p as AnyRecord)?.id as string | null
+      })
+      .filter((id): id is string => !!id)
+
+    const results = await Promise.allSettled(
+      productIds.map(async (id) => {
+        const result: any = await loadDocumentsByProduct(id, { updateStore: false })
+        if (result.success && Array.isArray(result.data)) {
+          return { id, docs: result.data as AnyRecord[] }
+        }
+        return { id, docs: [] }
+      }),
+    )
+
+    const map = new Map<string, AnyRecord[]>()
+    results.forEach((r) => {
+      if (r.status === 'fulfilled' && r.value.docs.length) {
+        map.set(r.value.id, r.value.docs)
+      }
+    })
+    return map
+  }
+
+  return {
+    // State
+    machineDocumentFiles,
+    machineDocumentsUploading,
+    machineDocumentsLoaded,
+    previewDocument,
+    previewVisible,
+
+    // Computed
+    machineDocumentsList,
+
+    // Methods
+    refreshMachineDocuments,
+    handleMachineFilesAdded,
+    removeMachineDocument,
+    openPreview,
+    closePreview,
+    loadProductDocuments,
+  }
+}
diff --git a/frontend/app/composables/useMachineDetailHierarchy.ts b/frontend/app/composables/useMachineDetailHierarchy.ts
new file mode 100644
index 0000000..17cd8bd
--- /dev/null
+++ b/frontend/app/composables/useMachineDetailHierarchy.ts
@@ -0,0 +1,306 @@
+/**
+ * Machine detail — hierarchy & link management sub-composable.
+ *
+ * Handles machine hierarchy building, component/piece tree resolution,
+ * flatten helpers, find-by-id utilities, and structure link CRUD.
+ */
+
+import { ref, computed } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import {
+  resolveIdentifier,
+} from '~/shared/utils/productDisplayUtils'
+import {
+  buildMachineHierarchyFromLinks,
+  resolveLinkArray,
+} from '~/composables/useMachineHierarchy'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailHierarchyDeps {
+  machineId: string
+  machine: Ref<AnyRecord | null>
+  constructeurs: Ref<unknown[]>
+  findProductById: (id: string | null | undefined) => AnyRecord | null
+  transformComponentCustomFields: (data: AnyRecord[]) => AnyRecord[]
+  transformCustomFields: (data: AnyRecord[]) => AnyRecord[]
+  syncMachineCustomFields: () => void
+}
+
+export function useMachineDetailHierarchy(deps: MachineDetailHierarchyDeps) {
+  const {
+    machineId,
+    machine,
+    constructeurs,
+    findProductById,
+    transformComponentCustomFields,
+    transformCustomFields,
+    syncMachineCustomFields,
+  } = deps
+
+  const { get, post: apiPost, delete: apiDel } = useApi()
+  const toast = useToast()
+
+  // ---------------------------------------------------------------------------
+  // State
+  // ---------------------------------------------------------------------------
+
+  const components = ref<AnyRecord[]>([])
+  const pieces = ref<AnyRecord[]>([])
+  const machineComponentLinks = ref<AnyRecord[]>([])
+  const machinePieceLinks = ref<AnyRecord[]>([])
+  const machineProductLinks = ref<AnyRecord[]>([])
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  const flattenComponents = (list: AnyRecord[] = []): AnyRecord[] => {
+    const result: AnyRecord[] = []
+    const traverse = (items: AnyRecord[]) => {
+      items.forEach((item) => {
+        result.push(item)
+        if (Array.isArray(item.subComponents) && item.subComponents.length) {
+          traverse(item.subComponents as AnyRecord[])
+        }
+      })
+    }
+    traverse(list)
+    return result
+  }
+
+  const findComponentById = (items: AnyRecord[] | undefined, id: string): AnyRecord | null => {
+    for (const item of items || []) {
+      if (item.id === id) return item
+      const found = findComponentById(item.subComponents as AnyRecord[] | undefined, id)
+      if (found) return found
+    }
+    return null
+  }
+
+  const findPieceById = (pieceId: string): AnyRecord | null => {
+    const direct = pieces.value.find((p) => p.id === pieceId)
+    if (direct) return direct
+
+    const searchInComponents = (items: AnyRecord[]): AnyRecord | null => {
+      for (const item of items || []) {
+        const match = ((item.pieces as AnyRecord[]) || []).find((p) => p.id === pieceId)
+        if (match) return match
+        const nested = searchInComponents((item.subComponents as AnyRecord[]) || [])
+        if (nested) return nested
+      }
+      return null
+    }
+    return searchInComponents(components.value)
+  }
+
+  // ---------------------------------------------------------------------------
+  // Hierarchy & links
+  // ---------------------------------------------------------------------------
+
+  const applyMachineLinks = (source: AnyRecord): boolean => {
+    const container = (source?.machine as AnyRecord) ?? null
+    const componentLinksData =
+      resolveLinkArray(source, ['componentLinks', 'machineComponentLinks']) ??
+      resolveLinkArray(container, ['componentLinks', 'machineComponentLinks'])
+    const pieceLinksData =
+      resolveLinkArray(source, ['pieceLinks', 'machinePieceLinks']) ??
+      resolveLinkArray(container, ['pieceLinks', 'machinePieceLinks'])
+    const productLinksData =
+      resolveLinkArray(source, ['productLinks', 'machineProductLinks']) ??
+      resolveLinkArray(container, ['productLinks', 'machineProductLinks'])
+
+    if (componentLinksData === null && pieceLinksData === null && productLinksData === null) {
+      return false
+    }
+
+    const normalizedComponentLinks = (componentLinksData ?? []) as AnyRecord[]
+    const normalizedPieceLinks = (pieceLinksData ?? []) as AnyRecord[]
+    const normalizedProductLinks = (productLinksData ?? []) as AnyRecord[]
+
+    machineComponentLinks.value = normalizedComponentLinks
+    machinePieceLinks.value = normalizedPieceLinks
+    machineProductLinks.value = normalizedProductLinks
+
+    const { components: hierarchy, machinePieces: machineLevelPieces } =
+      buildMachineHierarchyFromLinks(
+        normalizedComponentLinks,
+        normalizedPieceLinks,
+        findProductById as any,
+        constructeurs.value as any,
+      )
+
+    components.value = transformComponentCustomFields(hierarchy as AnyRecord[])
+    pieces.value = transformCustomFields(machineLevelPieces as AnyRecord[])
+
+    return true
+  }
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const flattenedComponents = computed(() => flattenComponents(components.value))
+
+  const machinePieces = computed(() => {
+    return pieces.value.filter((piece) => {
+      const parentLinkId = resolveIdentifier(
+        piece.parentComponentLinkId,
+        (piece.machinePieceLink as AnyRecord)?.parentComponentLinkId,
+        piece.parentLinkId,
+      )
+      if (parentLinkId) return false
+      return !piece.composantId
+    })
+  })
+
+  // ---------------------------------------------------------------------------
+  // Structure reload
+  // ---------------------------------------------------------------------------
+
+  const reloadMachineStructure = async () => {
+    const result: any = await get(`/machines/${machineId}/structure`)
+    if (result.success) {
+      const machinePayload =
+        result.data?.machine && typeof result.data.machine === 'object'
+          ? result.data.machine
+          : result.data
+      if (machinePayload && typeof machinePayload === 'object') {
+        machine.value = {
+          ...machine.value,
+          ...machinePayload,
+          documents: machinePayload.documents || (machine.value as AnyRecord)?.documents || [],
+          customFieldValues: machinePayload.customFieldValues || (machine.value as AnyRecord)?.customFieldValues || [],
+        }
+        const linksApplied = applyMachineLinks(result.data)
+        if (linksApplied && machine.value) {
+          machine.value.componentLinks = machineComponentLinks.value
+          machine.value.pieceLinks = machinePieceLinks.value
+          machine.value.productLinks = machineProductLinks.value
+        }
+        syncMachineCustomFields()
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Structure link CRUD
+  // ---------------------------------------------------------------------------
+
+  const addComponentLink = async (composantId: string) => {
+    const result: any = await apiPost('/machine_component_links', {
+      machine: `/api/machines/${machineId}`,
+      composant: `/api/composants/${composantId}`,
+    })
+    if (result.success) {
+      toast.showSuccess('Composant ajouté à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout du composant')
+    }
+    return result
+  }
+
+  const removeComponentLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_component_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Composant retiré de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression du composant')
+    }
+    return result
+  }
+
+  const addPieceLink = async (pieceId: string, parentComponentLinkId?: string) => {
+    const payload: any = {
+      machine: `/api/machines/${machineId}`,
+      piece: `/api/pieces/${pieceId}`,
+    }
+    if (parentComponentLinkId) {
+      payload.parentLink = `/api/machine_component_links/${parentComponentLinkId}`
+    }
+    const result: any = await apiPost('/machine_piece_links', payload)
+    if (result.success) {
+      toast.showSuccess('Pièce ajoutée à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout de la pièce')
+    }
+    return result
+  }
+
+  const removePieceLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_piece_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Pièce retirée de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression de la pièce')
+    }
+    return result
+  }
+
+  const addProductLink = async (productId: string, parentComponentLinkId?: string, parentPieceLinkId?: string) => {
+    const payload: any = {
+      machine: `/api/machines/${machineId}`,
+      product: `/api/products/${productId}`,
+    }
+    if (parentComponentLinkId) {
+      payload.parentComponentLink = `/api/machine_component_links/${parentComponentLinkId}`
+    }
+    if (parentPieceLinkId) {
+      payload.parentPieceLink = `/api/machine_piece_links/${parentPieceLinkId}`
+    }
+    const result: any = await apiPost('/machine_product_links', payload)
+    if (result.success) {
+      toast.showSuccess('Produit ajouté à la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de l\'ajout du produit')
+    }
+    return result
+  }
+
+  const removeProductLink = async (linkId: string) => {
+    const result: any = await apiDel(`/machine_product_links/${linkId}`)
+    if (result.success) {
+      toast.showSuccess('Produit retiré de la machine')
+      await reloadMachineStructure()
+    } else {
+      toast.showError('Erreur lors de la suppression du produit')
+    }
+    return result
+  }
+
+  return {
+    // State
+    components,
+    pieces,
+    machineComponentLinks,
+    machinePieceLinks,
+    machineProductLinks,
+
+    // Computed
+    flattenedComponents,
+    machinePieces,
+
+    // Helpers
+    flattenComponents,
+    findComponentById,
+    findPieceById,
+
+    // Hierarchy
+    applyMachineLinks,
+
+    // Structure link management
+    reloadMachineStructure,
+    addComponentLink,
+    removeComponentLink,
+    addPieceLink,
+    removePieceLink,
+    addProductLink,
+    removeProductLink,
+  }
+}
diff --git a/frontend/app/composables/useMachineDetailProducts.ts b/frontend/app/composables/useMachineDetailProducts.ts
new file mode 100644
index 0000000..41a9b40
--- /dev/null
+++ b/frontend/app/composables/useMachineDetailProducts.ts
@@ -0,0 +1,132 @@
+/**
+ * Machine detail — product display sub-composable.
+ *
+ * Handles product resolution, display helpers, supplier info,
+ * and machine-level direct product links.
+ */
+
+import { computed } from 'vue'
+import { useProducts } from '~/composables/useProducts'
+import {
+  resolveProductReference as _resolveProductReference,
+  getProductDisplay as _getProductDisplay,
+  getProductSuppliersLabel,
+  getProductPriceLabel,
+} from '~/shared/utils/productDisplayUtils'
+import {
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+interface MachineDetailProductsDeps {
+  machineProductLinks: Ref<AnyRecord[]>
+  productDocumentsMap: Ref<Map<string, AnyRecord[]>>
+  constructeurs: Ref<unknown[]>
+}
+
+export function useMachineDetailProducts(deps: MachineDetailProductsDeps) {
+  const { machineProductLinks, productDocumentsMap, constructeurs } = deps
+  const { products, loadProducts } = useProducts()
+
+  // ---------------------------------------------------------------------------
+  // Computed
+  // ---------------------------------------------------------------------------
+
+  const productInventory = computed(() => products.value || [])
+
+  const productById = computed(() => {
+    const map = new Map<string, AnyRecord>()
+    ;(productInventory.value as AnyRecord[]).forEach((product: AnyRecord) => {
+      if (product?.id) map.set(product.id as string, product)
+    })
+    return map
+  })
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  const findProductById = (productId: string | null | undefined): AnyRecord | null => {
+    if (!productId) return null
+    return productById.value.get(productId) || null
+  }
+
+  const resolveProductReference = (source: AnyRecord) =>
+    _resolveProductReference(source, findProductById as any)
+  const getProductDisplay = (source: AnyRecord) =>
+    _getProductDisplay(source, findProductById as any)
+
+  // ---------------------------------------------------------------------------
+  // Machine direct products
+  // ---------------------------------------------------------------------------
+
+  const machineDirectProducts = computed(() => {
+    return machineProductLinks.value.map((link) => {
+      const productObj = link.product as AnyRecord | string | null
+      let resolved: AnyRecord | null = null
+      let productId: string | null = null
+
+      if (typeof productObj === 'string') {
+        productId = productObj.split('/').pop() || null
+        resolved = productId ? findProductById(productId) : null
+      } else if (productObj && typeof productObj === 'object') {
+        productId = (productObj as AnyRecord)?.id as string | null
+        // Prefer the embedded product from the structure endpoint — it has richer
+        // data (typeProduct as object, supplierPrice, constructeurs) than the
+        // global products cache which may store typeProduct as an IRI string.
+        const cached = productId ? findProductById(productId) : null
+        resolved = productObj as AnyRecord
+        if (cached) {
+          // Merge: use embedded as base, overlay any non-null cached fields
+          resolved = { ...resolved, ...Object.fromEntries(
+            Object.entries(cached as AnyRecord).filter(([, v]) => v != null && v !== ''),
+          ) }
+          // But always prefer the embedded typeProduct when it's an object
+          if (productObj.typeProduct && typeof productObj.typeProduct === 'object') {
+            resolved.typeProduct = productObj.typeProduct
+          }
+        }
+      }
+
+      const cIds = uniqueConstructeurIds(
+        resolved?.constructeurs,
+        resolved?.constructeurIds,
+      )
+      const resolvedConstructeurs = resolveConstructeurs(
+        cIds,
+        resolved?.constructeurs as any[] || [],
+        constructeurs.value as any,
+      )
+
+      return {
+        id: (resolved?.id as string) || productId || null,
+        linkId: (link.id as string) || (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : null) || null,
+        name: (resolved?.name as string) || 'Produit inconnu',
+        reference: (resolved?.reference as string) || null,
+        supplierLabel: resolvedConstructeurs.length
+          ? resolvedConstructeurs.map((c) => c.name).filter(Boolean).join(', ') || null
+          : getProductSuppliersLabel(resolved),
+        priceLabel: resolved ? getProductPriceLabel(resolved) : null,
+        groupLabel: ((resolved?.typeProduct as AnyRecord)?.name as string) || '',
+        documents: productId ? (productDocumentsMap.value.get(productId) || []) : [],
+      }
+    })
+  })
+
+  return {
+    // Computed
+    productInventory,
+    productById,
+    machineDirectProducts,
+
+    // Helpers
+    findProductById,
+    resolveProductReference,
+    getProductDisplay,
+
+    // Loading
+    loadProducts,
+  }
+}
diff --git a/frontend/app/composables/useMachineDetailUpdates.ts b/frontend/app/composables/useMachineDetailUpdates.ts
new file mode 100644
index 0000000..8a43a36
--- /dev/null
+++ b/frontend/app/composables/useMachineDetailUpdates.ts
@@ -0,0 +1,244 @@
+/**
+ * Machine detail page — update/mutation methods.
+ *
+ * Extracted from useMachineDetailData.ts to keep the orchestrator under 500 lines.
+ */
+
+import type { Ref } from 'vue'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+export interface UseMachineDetailUpdatesDeps {
+  machine: Ref<AnyRecord | null>
+  machineName: Ref<string>
+  machineReference: Ref<string>
+  machineSiteId: Ref<string>
+  machineConstructeurIds: Ref<string[]>
+  constructeurLinks: Ref<ConstructeurLinkEntry[]>
+  originalConstructeurLinks: Ref<ConstructeurLinkEntry[]>
+  machineDocumentsLoaded: Ref<boolean>
+  machineComponentLinks: Ref<AnyRecord[]>
+  machinePieceLinks: Ref<AnyRecord[]>
+  machineProductLinks: Ref<AnyRecord[]>
+  applyMachineLinks: (data: AnyRecord) => boolean
+  refreshMachineDocuments: () => Promise<void>
+  transformComponentCustomFields: (items: AnyRecord[]) => AnyRecord[]
+  transformCustomFields: (items: AnyRecord[]) => AnyRecord[]
+  loadProductDocuments: () => Promise<void>
+  upsertCustomFieldValue: (
+    fieldId: string,
+    entityType: string,
+    entityId: string,
+    value: unknown,
+  ) => Promise<unknown>
+  updateMachineApi: (id: string, data: any) => Promise<unknown>
+  updateComposantApi: (id: string, data: any) => Promise<unknown>
+  updatePieceApi: (id: string, data: any) => Promise<unknown>
+  apiPatch: (endpoint: string, data?: unknown) => Promise<any>
+  toast: { showInfo: (msg: string) => void }
+  syncLinks: (
+    entityType: 'machine' | 'piece' | 'composant' | 'product',
+    entityId: string,
+    originalLinks: ConstructeurLinkEntry[],
+    formLinks: ConstructeurLinkEntry[],
+  ) => Promise<void>
+}
+
+export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
+  const {
+    machine,
+    machineName,
+    machineReference,
+    machineSiteId,
+    machineConstructeurIds,
+    constructeurLinks,
+    originalConstructeurLinks,
+    machineComponentLinks,
+    machinePieceLinks,
+    applyMachineLinks,
+    loadProductDocuments,
+    transformComponentCustomFields,
+    transformCustomFields,
+    upsertCustomFieldValue,
+    updateMachineApi,
+    updateComposantApi,
+    updatePieceApi,
+    apiPatch,
+    toast,
+    syncLinks,
+  } = deps
+
+  const updateMachineInfo = async () => {
+    if (!machine.value) return
+    try {
+      const result: any = await updateMachineApi(machine.value.id as string, {
+        name: machineName.value,
+        reference: machineReference.value,
+        siteId: machineSiteId.value || undefined,
+      } as any)
+      if (result.success) {
+        const machinePayload =
+          result.data?.machine && typeof result.data.machine === 'object'
+            ? result.data.machine
+            : result.data
+        if (machinePayload && typeof machinePayload === 'object') {
+          machine.value = {
+            ...machine.value,
+            ...machinePayload,
+            documents: machinePayload.documents || machine.value.documents || [],
+            customFieldValues: machinePayload.customFieldValues || machine.value.customFieldValues || [],
+          }
+          const linksApplied = applyMachineLinks(result.data)
+          if (linksApplied && machine.value) {
+            machine.value.componentLinks = machineComponentLinks.value
+            machine.value.pieceLinks = machinePieceLinks.value
+          }
+          loadProductDocuments().catch(() => {})
+        }
+      }
+      // Sync constructeur links after entity save
+      await syncLinks('machine', machine.value!.id as string, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la machine:', error)
+    }
+  }
+
+  const updateComponent = async (updatedComponent: AnyRecord) => {
+    try {
+      const cIds = uniqueConstructeurIds(
+        updatedComponent.constructeurIds,
+        updatedComponent.constructeurId,
+        updatedComponent.constructeur,
+      )
+      const productId = updatedComponent.productId
+        ? String(updatedComponent.productId)
+        : null
+      const prixStr =
+        updatedComponent.prix !== null &&
+        updatedComponent.prix !== undefined &&
+        String(updatedComponent.prix).trim() !== ''
+          ? String(updatedComponent.prix)
+          : null
+
+      const result: any = await updateComposantApi(updatedComponent.id as string, {
+        name: updatedComponent.name,
+        reference: updatedComponent.reference,
+        constructeurIds: cIds,
+        prix: prixStr,
+        productId,
+      } as any)
+      if (result.success) {
+        const transformed = transformComponentCustomFields([result.data])[0]
+        Object.assign(updatedComponent, transformed)
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du composant:', error)
+    }
+  }
+
+  const _buildAndUpdatePiece = async (updatedPiece: AnyRecord) => {
+    const cIds = uniqueConstructeurIds(
+      updatedPiece.constructeurIds,
+      updatedPiece.constructeurId,
+      updatedPiece.constructeur,
+    )
+    const productId = updatedPiece.productId ? String(updatedPiece.productId) : null
+    const prixStr =
+      updatedPiece.prix !== null &&
+      updatedPiece.prix !== undefined &&
+      String(updatedPiece.prix).trim() !== ''
+        ? String(updatedPiece.prix)
+        : null
+
+    const result: any = await updatePieceApi(updatedPiece.id as string, {
+      name: updatedPiece.name,
+      reference: updatedPiece.reference || null,
+      constructeurIds: cIds,
+      prix: prixStr,
+      productId,
+    } as any)
+    if (result.success) {
+      const transformed = transformCustomFields([result.data])[0]
+      Object.assign(updatedPiece, transformed)
+    }
+    return result
+  }
+
+  const updatePieceFromComponent = async (updatedPiece: AnyRecord) => {
+    try {
+      const result = await _buildAndUpdatePiece(updatedPiece)
+      if (result?.success && updatedPiece.customFields) {
+        const fieldsToSave = (updatedPiece.customFields as AnyRecord[]).filter(
+          (field) => field.value !== undefined,
+        )
+        if (fieldsToSave.length) {
+          await Promise.allSettled(
+            fieldsToSave.map((field) =>
+              upsertCustomFieldValue(
+                field.id as string,
+                'piece',
+                updatedPiece.id as string,
+                field.value,
+              ),
+            ),
+          )
+        }
+      }
+
+      // Update slot quantity if this is a composant structure piece
+      const slotId = updatedPiece.slotId as string | null
+      const quantity = typeof updatedPiece.quantity === 'number' ? Math.max(1, updatedPiece.quantity) : null
+      if (slotId && quantity !== null) {
+        await apiPatch(`/composant-piece-slots/${slotId}`, { quantity })
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la pièce:', error)
+    }
+  }
+
+  const updatePieceInfo = async (updatedPiece: AnyRecord) => {
+    try {
+      await _buildAndUpdatePiece(updatedPiece)
+
+      // Update link quantity if this is a direct machine piece
+      const linkId = updatedPiece.linkId || updatedPiece.machinePieceLinkId
+      const quantity = typeof updatedPiece.quantity === 'number' ? Math.max(1, updatedPiece.quantity) : null
+      if (linkId && quantity !== null) {
+        await apiPatch(`/machine_piece_links/${linkId}`, { quantity })
+      }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la pièce:', error)
+    }
+  }
+
+  const handleMachineConstructeurChange = (value: unknown) => {
+    const newIds = uniqueConstructeurIds(value)
+    machineConstructeurIds.value = newIds
+    // Sync constructeurLinks: keep existing entries, add new ones
+    const existingMap = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+    constructeurLinks.value = newIds.map(id =>
+      existingMap.get(id) ?? { constructeurId: id, supplierReference: null },
+    )
+  }
+
+  const editComponent = () => {
+    toast.showInfo('La modification des composants sera bientôt disponible')
+  }
+
+  const editPiece = () => {
+    toast.showInfo('La modification des pièces sera bientôt disponible')
+  }
+
+  return {
+    updateMachineInfo,
+    updateComponent,
+    updatePieceFromComponent,
+    updatePieceInfo,
+    handleMachineConstructeurChange,
+    editComponent,
+    editPiece,
+  }
+}
diff --git a/frontend/app/composables/useMachineHierarchy.ts b/frontend/app/composables/useMachineHierarchy.ts
new file mode 100644
index 0000000..b46c6cb
--- /dev/null
+++ b/frontend/app/composables/useMachineHierarchy.ts
@@ -0,0 +1,312 @@
+/**
+ * Builds a component/piece hierarchy tree from flat machine link arrays.
+ *
+ * Extracted from pages/machine/[id].vue to keep the page orchestrator lean.
+ */
+
+import { resolveIdentifier, getProductDisplay } from '~/shared/utils/productDisplayUtils'
+import { resolveConstructeurs, uniqueConstructeurIds, type ConstructeurSummary } from '~/shared/constructeurUtils'
+
+type AnyRecord = Record<string, unknown>
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const collectConstructeurs = (
+  allConstructeurs: AnyRecord[],
+  ...sources: unknown[]
+): AnyRecord[] => {
+  const ids = uniqueConstructeurIds(...sources)
+  if (!ids.length) return []
+
+  const pools = sources
+    .flatMap((source) => {
+      if (Array.isArray(source)) return [source]
+      if (source && typeof source === 'object' && (source as AnyRecord).id) return [[source]]
+      return []
+    })
+    .filter(Boolean) as AnyRecord[][]
+
+  // ConstructeurSummary and AnyRecord are structurally compatible at runtime
+  const allPools = [...pools, allConstructeurs] as unknown as Array<ConstructeurSummary[]>
+  return resolveConstructeurs(ids, ...allPools) as unknown as AnyRecord[]
+}
+
+// ---------------------------------------------------------------------------
+// Link array resolution
+// ---------------------------------------------------------------------------
+
+export const resolveLinkArray = (source: unknown, keys: string[]): unknown[] | null => {
+  if (!source || typeof source !== 'object') return null
+  for (const key of keys) {
+    const value = (source as AnyRecord)[key]
+    if (Array.isArray(value)) return value
+  }
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Merge trees (for incremental updates)
+// ---------------------------------------------------------------------------
+
+export function mergePieceLists(existing: AnyRecord[] = [], updates: AnyRecord[] = []): AnyRecord[] {
+  if (!existing.length) {
+    return updates.map((piece) => ({ ...piece, constructeurs: piece.constructeurs || [] }))
+  }
+  if (!updates.length) {
+    return existing.map((piece) => ({ ...piece, constructeurs: piece.constructeurs || [] }))
+  }
+
+  const updateMap = new Map<unknown, AnyRecord>(
+    updates.map((piece) => [piece.id, { ...piece, constructeurs: piece.constructeurs || [] }]),
+  )
+  const merged = existing.map((piece) => {
+    const update = updateMap.get(piece.id)
+    if (!update) return piece
+    return { ...piece, ...update, customFields: update.customFields ?? piece.customFields }
+  })
+
+  updates.forEach((update) => {
+    if (!existing.some((piece) => piece.id === update.id)) merged.push(update)
+  })
+
+  return merged
+}
+
+export function mergeComponentTrees(existing: AnyRecord[] = [], updates: AnyRecord[] = []): AnyRecord[] {
+  if (!existing.length) {
+    return updates.map((component) => ({
+      ...component,
+      constructeurs: component.constructeurs || [],
+      pieces: ((component.pieces || []) as AnyRecord[]).map((piece) => ({
+        ...piece,
+        constructeurs: piece.constructeurs || [],
+      })),
+      subComponents: mergeComponentTrees([], (component.subComponents || []) as AnyRecord[]),
+    }))
+  }
+  if (!updates.length) return existing
+
+  const updateMap = new Map<unknown, AnyRecord>(
+    updates.map((component) => [
+      component.id,
+      {
+        ...component,
+        constructeurs: component.constructeurs || [],
+        pieces: ((component.pieces || []) as AnyRecord[]).map((piece) => ({
+          ...piece,
+          constructeurs: piece.constructeurs || [],
+        })),
+        subComponents: mergeComponentTrees([], (component.subComponents || []) as AnyRecord[]),
+      },
+    ]),
+  )
+  const merged: AnyRecord[] = existing.map((component) => {
+    const update = updateMap.get(component.id)
+    if (!update) {
+      return {
+        ...component,
+        constructeurs: component.constructeurs || [],
+        pieces: mergePieceLists((component.pieces || []) as AnyRecord[], []),
+        subComponents: mergeComponentTrees((component.subComponents || []) as AnyRecord[], []),
+      }
+    }
+    return {
+      ...component,
+      ...update,
+      customFields: update.customFields ?? component.customFields,
+      pieces: mergePieceLists((component.pieces || []) as AnyRecord[], (update.pieces || []) as AnyRecord[]),
+      subComponents: mergeComponentTrees(
+        (component.subComponents || []) as AnyRecord[],
+        (update.subComponents || []) as AnyRecord[],
+      ),
+    }
+  })
+
+  updates.forEach((update) => {
+    if (!existing.some((component) => component.id === update.id)) merged.push(update)
+  })
+
+  return merged
+}
+
+// ---------------------------------------------------------------------------
+// Build hierarchy from links
+// ---------------------------------------------------------------------------
+
+export const buildMachineHierarchyFromLinks = (
+  componentLinks: AnyRecord[] = [],
+  pieceLinks: AnyRecord[] = [],
+  findProductById: (id: string) => AnyRecord | null,
+  allConstructeurs: AnyRecord[] = [],
+): { components: AnyRecord[]; machinePieces: AnyRecord[] } => {
+  const normalizeComponentLinkId = (link: AnyRecord) =>
+    resolveIdentifier(link?.id, link?.linkId, link?.machineComponentLinkId)
+
+  const normalizePieceLinkId = (link: AnyRecord) =>
+    resolveIdentifier(link?.id, link?.linkId, link?.machinePieceLinkId)
+
+  const createPieceNode = (link: AnyRecord, parentComponentName: string | null = null): AnyRecord | null => {
+    if (!link || typeof link !== 'object') return null
+
+    const appliedPiece = (link.piece && typeof link.piece === 'object' ? link.piece : {}) as AnyRecord
+    const originalPiece = (link.originalPiece && typeof link.originalPiece === 'object' ? link.originalPiece : null) as AnyRecord | null
+
+    const machinePieceLinkId = normalizePieceLinkId(link)
+    const pieceId = resolveIdentifier(appliedPiece.id, appliedPiece.pieceId, link.pieceId)
+
+    const overrides = (link.overrides || null) as AnyRecord | null
+
+    const basePiece: AnyRecord = {
+      ...appliedPiece,
+      id: appliedPiece.id || pieceId || machinePieceLinkId || `piece-${machinePieceLinkId}`,
+      pieceId,
+      name: overrides?.name || appliedPiece.name || (appliedPiece.definition as AnyRecord)?.name || (appliedPiece.definition as AnyRecord)?.role || originalPiece?.name || 'Pièce',
+      reference: overrides?.reference || appliedPiece.reference || (appliedPiece.definition as AnyRecord)?.reference || originalPiece?.reference || null,
+      prix: overrides?.prix ?? appliedPiece.prix ?? originalPiece?.prix ?? null,
+      constructeur: appliedPiece.constructeur || originalPiece?.constructeur || null,
+      constructeurId: appliedPiece.constructeurId || (appliedPiece.constructeur as AnyRecord)?.id || originalPiece?.constructeurId || null,
+      documents: Array.isArray(appliedPiece.documents) ? appliedPiece.documents : Array.isArray(originalPiece?.documents) ? originalPiece!.documents : [],
+      typePiece: appliedPiece.typePiece || null,
+      typePieceId: appliedPiece.typePieceId || (appliedPiece.typePiece as AnyRecord)?.id || null,
+      overrides,
+      originalPiece,
+      machinePieceLink: link,
+      machinePieceLinkId,
+      linkId: machinePieceLinkId,
+      parentComponentLinkId: resolveIdentifier(link.parentComponentLinkId, link.parentLinkId, link.parentMachineComponentLinkId, appliedPiece.parentComponentLinkId),
+      parentComponentId: resolveIdentifier(appliedPiece.parentComponentId, link.parentComponentId),
+      parentComponentName,
+      parentLinkId: resolveIdentifier(link.parentLinkId, link.parentMachinePieceLinkId, appliedPiece.parentLinkId),
+      parentPieceLinkId: resolveIdentifier(link.parentPieceLinkId, appliedPiece.parentPieceLinkId),
+      parentPieceId: resolveIdentifier(appliedPiece.parentPieceId, link.parentPieceId),
+      quantity: typeof link.quantity === 'number' ? link.quantity : 1,
+      definition: appliedPiece.definition || originalPiece?.definition || {},
+      customFields: appliedPiece.customFields || [],
+    }
+
+    const resolvedProductId = resolveIdentifier(appliedPiece.productId, (appliedPiece.product as AnyRecord)?.id, link.productId, (link.product as AnyRecord)?.id, originalPiece?.productId, (originalPiece?.product as AnyRecord)?.id)
+    const resolvedProduct = (appliedPiece.product || link.product || originalPiece?.product || (resolvedProductId ? findProductById(resolvedProductId) : null) || null) as AnyRecord | null
+
+    const constructeurs = collectConstructeurs(allConstructeurs, appliedPiece.constructeurs, appliedPiece.constructeur, appliedPiece.constructeurIds, appliedPiece.constructeurId, originalPiece?.constructeurs, originalPiece?.constructeur, originalPiece?.constructeurIds, originalPiece?.constructeurId)
+
+    return {
+      ...basePiece,
+      constructeurs,
+      constructeur: constructeurs[0] || basePiece.constructeur || null,
+      constructeurId: (constructeurs[0] as AnyRecord)?.id || basePiece.constructeurId || null,
+      productId: resolvedProductId || appliedPiece.productId || null,
+      product: resolvedProduct || appliedPiece.product || null,
+      __productDisplay: getProductDisplay({ product: resolvedProduct || appliedPiece.product || null, productId: resolvedProductId || appliedPiece.productId || null } as AnyRecord, findProductById),
+    }
+  }
+
+  const createComponentNode = (link: AnyRecord): AnyRecord | null => {
+    if (!link || typeof link !== 'object') return null
+
+    const appliedComponent = (link.composant && typeof link.composant === 'object' ? link.composant : {}) as AnyRecord
+    const originalComponent = (link.originalComposant && typeof link.originalComposant === 'object' ? link.originalComposant : null) as AnyRecord | null
+
+    const machineComponentLinkId = normalizeComponentLinkId(link)
+    const composantId = resolveIdentifier(appliedComponent.id, appliedComponent.composantId, link.composantId)
+
+    const compOverrides = (link.overrides || null) as AnyRecord | null
+
+    const componentName = (compOverrides?.name || appliedComponent.name || (appliedComponent.definition as AnyRecord)?.alias || (appliedComponent.definition as AnyRecord)?.name || originalComponent?.name || 'Composant') as string
+
+    const linkedPieces = Array.isArray(link.pieceLinks)
+      ? (link.pieceLinks as AnyRecord[]).map((pl) => createPieceNode(pl, componentName)).filter(Boolean) as AnyRecord[]
+      : []
+
+    // If no linked pieces exist, build read-only entries from the composant's structure
+    const structurePieceDefs = (!linkedPieces.length && appliedComponent.structure && typeof appliedComponent.structure === 'object')
+      ? (Array.isArray((appliedComponent.structure as AnyRecord).pieces) ? (appliedComponent.structure as AnyRecord).pieces as AnyRecord[] : [])
+      : []
+    const structurePieces = structurePieceDefs.map((def, index) => {
+      const definition = (def.definition && typeof def.definition === 'object' ? def.definition : def) as AnyRecord
+      const resolved = (def.resolvedPiece && typeof def.resolvedPiece === 'object' ? def.resolvedPiece : null) as AnyRecord | null
+      const quantity = typeof definition.quantity === 'number' ? definition.quantity : (typeof def.quantity === 'number' ? def.quantity : 1)
+      return {
+        ...(resolved || {}),
+        id: resolved?.id || `structure-piece-${composantId}-${index}`,
+        pieceId: resolved?.id || null,
+        name: resolved?.name || definition.role || definition.name || def.role || def.name || `Pièce ${index + 1}`,
+        reference: resolved?.reference || definition.reference || def.reference || null,
+        prix: resolved?.prix ?? null,
+        constructeurs: resolved?.constructeurs || [],
+        documents: [],
+        quantity,
+        slotId: def.slotId || definition.slotId || null,
+        typePieceId: resolved?.typePieceId || definition.typePieceId || def.typePieceId || null,
+        typePiece: resolved?.typePiece || null,
+        parentComponentLinkId: machineComponentLinkId,
+        parentComponentName: componentName,
+        _structurePiece: true,
+      }
+    }) as AnyRecord[]
+
+    const pieces = linkedPieces.length ? linkedPieces : structurePieces
+
+    const subComponents = Array.isArray(link.childLinks)
+      ? (link.childLinks as AnyRecord[]).map(createComponentNode).filter(Boolean) as AnyRecord[]
+      : []
+
+    const resolvedProductId = resolveIdentifier(appliedComponent.productId, (appliedComponent.product as AnyRecord)?.id, link.productId, (link.product as AnyRecord)?.id, originalComponent?.productId, (originalComponent?.product as AnyRecord)?.id)
+    const resolvedProduct = (appliedComponent.product || link.product || originalComponent?.product || (resolvedProductId ? findProductById(resolvedProductId) : null) || null) as AnyRecord | null
+
+    const baseComponent: AnyRecord = {
+      ...appliedComponent,
+      id: appliedComponent.id || composantId || machineComponentLinkId || `component-${machineComponentLinkId}`,
+      composantId,
+      name: componentName,
+      reference: compOverrides?.reference || appliedComponent.reference || (appliedComponent.definition as AnyRecord)?.reference || originalComponent?.reference || null,
+      prix: compOverrides?.prix ?? appliedComponent.prix ?? originalComponent?.prix ?? null,
+      constructeur: appliedComponent.constructeur || originalComponent?.constructeur || null,
+      constructeurId: appliedComponent.constructeurId || (appliedComponent.constructeur as AnyRecord)?.id || originalComponent?.constructeurId || null,
+      documents: Array.isArray(appliedComponent.documents) ? appliedComponent.documents : Array.isArray(originalComponent?.documents) ? originalComponent!.documents : [],
+      typeComposant: appliedComponent.typeComposant || null,
+      typeComposantId: appliedComponent.typeComposantId || (appliedComponent.typeComposant as AnyRecord)?.id || null,
+      overrides: compOverrides,
+      machineComponentLinkOverrides: compOverrides,
+      definitionOverrides: compOverrides,
+      originalComposant: originalComponent,
+      machineComponentLink: link,
+      machineComponentLinkId,
+      linkId: machineComponentLinkId,
+      componentLinkId: machineComponentLinkId,
+      parentComponentLinkId: resolveIdentifier(link.parentComponentLinkId, link.parentLinkId, link.parentMachineComponentLinkId, appliedComponent.parentComponentLinkId),
+      parentComposantId: resolveIdentifier(appliedComponent.parentComposantId, link.parentComponentId),
+      definition: appliedComponent.definition || originalComponent?.definition || {},
+      customFields: appliedComponent.customFields || [],
+      pieces,
+      subComponents,
+      subcomponents: subComponents,
+      sousComposants: subComponents,
+    }
+
+    const constructeurs = collectConstructeurs(allConstructeurs, appliedComponent.constructeurs, appliedComponent.constructeur, appliedComponent.constructeurIds, appliedComponent.constructeurId, originalComponent?.constructeurs, originalComponent?.constructeur, originalComponent?.constructeurIds, originalComponent?.constructeurId)
+
+    return {
+      ...baseComponent,
+      constructeurs,
+      constructeur: constructeurs[0] || baseComponent.constructeur || null,
+      constructeurId: (constructeurs[0] as AnyRecord)?.id || baseComponent.constructeurId || null,
+      productId: resolvedProductId || appliedComponent.productId || null,
+      product: resolvedProduct || appliedComponent.product || null,
+      __productDisplay: getProductDisplay({ product: resolvedProduct || appliedComponent.product || null, productId: resolvedProductId || appliedComponent.productId || null } as AnyRecord, findProductById),
+    }
+  }
+
+  const rootComponents = (Array.isArray(componentLinks) ? componentLinks : [])
+    .filter((link) => !resolveIdentifier(link?.parentComponentLinkId, link?.parentLinkId, link?.parentMachineComponentLinkId))
+    .map(createComponentNode)
+    .filter(Boolean) as AnyRecord[]
+
+  const machinePieces = (Array.isArray(pieceLinks) ? pieceLinks : [])
+    .filter((link) => !resolveIdentifier(link?.parentComponentLinkId, link?.parentLinkId, link?.parentMachineComponentLinkId))
+    .map((link) => createPieceNode(link, null))
+    .filter(Boolean) as AnyRecord[]
+
+  return { components: rootComponents, machinePieces }
+}
diff --git a/frontend/app/composables/useMachinePrint.ts b/frontend/app/composables/useMachinePrint.ts
new file mode 100644
index 0000000..e20b106
--- /dev/null
+++ b/frontend/app/composables/useMachinePrint.ts
@@ -0,0 +1,163 @@
+/**
+ * Machine print selection and execution logic.
+ *
+ * Extracted from pages/machine/[id].vue.
+ */
+
+import { ref, reactive, nextTick } from 'vue'
+import { buildMachinePrintContext, buildMachinePrintHtml } from '~/utils/printTemplates/machineReport'
+
+type AnyRecord = Record<string, unknown>
+
+export interface PrintSelection {
+  machine: { info: boolean; customFields: boolean; documents: boolean }
+  components: Record<string, boolean>
+  pieces: Record<string, boolean>
+}
+
+export function useMachinePrint() {
+  const printModalOpen = ref(false)
+  const printSelection = reactive<PrintSelection>({
+    machine: { info: true, customFields: true, documents: true },
+    components: {},
+    pieces: {},
+  })
+
+  const ensurePrintSelectionEntries = (
+    components: AnyRecord[],
+    machinePieces: AnyRecord[],
+  ) => {
+    printSelection.machine.info ??= true
+    printSelection.machine.customFields ??= true
+    printSelection.machine.documents ??= true
+
+    const ensureComponent = (component: AnyRecord) => {
+      if (component?.id !== undefined && printSelection.components[component.id as string] === undefined) {
+        printSelection.components[component.id as string] = true
+      }
+      ;((component.pieces || []) as AnyRecord[]).forEach((piece) => {
+        if (piece?.id !== undefined && printSelection.pieces[piece.id as string] === undefined) {
+          printSelection.pieces[piece.id as string] = true
+        }
+      })
+      ;((component.subComponents || []) as AnyRecord[]).forEach(ensureComponent)
+    }
+
+    components.forEach(ensureComponent)
+    machinePieces.forEach((piece) => {
+      if (piece?.id !== undefined && printSelection.pieces[piece.id as string] === undefined) {
+        printSelection.pieces[piece.id as string] = true
+      }
+    })
+  }
+
+  const setAllPrintSelection = (
+    value: boolean,
+    components: AnyRecord[],
+    machinePieces: AnyRecord[],
+  ) => {
+    ensurePrintSelectionEntries(components, machinePieces)
+    printSelection.machine.info = value
+    printSelection.machine.customFields = value
+    printSelection.machine.documents = value
+    Object.keys(printSelection.components).forEach((key) => {
+      printSelection.components[key] = value
+    })
+    Object.keys(printSelection.pieces).forEach((key) => {
+      printSelection.pieces[key] = value
+    })
+  }
+
+  const openPrintModal = (components: AnyRecord[], machinePieces: AnyRecord[]) => {
+    ensurePrintSelectionEntries(components, machinePieces)
+    printModalOpen.value = true
+  }
+
+  const closePrintModal = () => {
+    printModalOpen.value = false
+  }
+
+  const printMachine = (
+    machine: AnyRecord,
+    machineName: string,
+    machineReference: string,
+    machinePieces: AnyRecord[],
+    components: AnyRecord[],
+    currentSelection: PrintSelection = printSelection,
+  ) => {
+    if (typeof window === 'undefined') return
+
+    // machineReport.js has no type annotations; cast to avoid inferred never[] params
+    const context = (buildMachinePrintContext as unknown as (config: Record<string, unknown>) => Record<string, unknown>)({
+      machine,
+      machineName,
+      machineReference,
+      machinePieces,
+      components,
+      selection: currentSelection,
+    })
+    const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style'))
+      .map((node) => node.outerHTML)
+      .join('')
+
+    const htmlContent = buildMachinePrintHtml(context, styles)
+
+    const iframe = document.createElement('iframe')
+    iframe.style.position = 'fixed'
+    iframe.style.right = '0'
+    iframe.style.bottom = '0'
+    iframe.style.width = '0'
+    iframe.style.height = '0'
+    iframe.style.border = '0'
+    iframe.setAttribute('title', 'print-frame')
+    document.body.appendChild(iframe)
+
+    const iframeWindow = iframe.contentWindow
+    const iframeDocument = iframe.contentDocument || iframeWindow?.document
+    if (!iframeDocument || !iframeWindow) {
+      iframe.remove()
+      return
+    }
+
+    iframeDocument.open()
+    iframeDocument.write(htmlContent)
+    iframeDocument.close()
+
+    const triggerPrint = () => {
+      iframeWindow.focus()
+      iframeWindow.print()
+      setTimeout(() => {
+        iframe.remove()
+      }, 1000)
+    }
+
+    if (iframeDocument.readyState === 'complete') {
+      setTimeout(triggerPrint, 50)
+    } else {
+      iframe.onload = () => setTimeout(triggerPrint, 50)
+    }
+  }
+
+  const handlePrintConfirm = async (
+    machine: AnyRecord,
+    machineName: string,
+    machineReference: string,
+    machinePieces: AnyRecord[],
+    components: AnyRecord[],
+  ) => {
+    closePrintModal()
+    await nextTick()
+    printMachine(machine, machineName, machineReference, machinePieces, components, printSelection)
+  }
+
+  return {
+    printModalOpen,
+    printSelection,
+    ensurePrintSelectionEntries,
+    setAllPrintSelection,
+    openPrintModal,
+    closePrintModal,
+    printMachine,
+    handlePrintConfirm,
+  }
+}
diff --git a/frontend/app/composables/useMachines.ts b/frontend/app/composables/useMachines.ts
new file mode 100644
index 0000000..18e98f8
--- /dev/null
+++ b/frontend/app/composables/useMachines.ts
@@ -0,0 +1,266 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi, type ApiResponse } from './useApi'
+import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Machine {
+  id: string
+  name?: string
+  siteId?: string | null
+  componentLinks?: unknown[]
+  pieceLinks?: unknown[]
+  [key: string]: unknown
+}
+
+const machines = ref<Machine[]>([])
+const loading = ref(false)
+const loaded = ref(false)
+
+const resolveLinkCollection = (source: Record<string, unknown>, keys: string[]): unknown[] | undefined => {
+  if (!source || typeof source !== 'object') {
+    return undefined
+  }
+
+  for (const key of keys) {
+    const value = source[key]
+    if (Array.isArray(value)) {
+      return value
+    }
+  }
+
+  return undefined
+}
+
+const normalizeMachineResponse = (payload: unknown): Machine | null => {
+  if (!payload || typeof payload !== 'object') {
+    return null
+  }
+
+  const raw = payload as Record<string, unknown>
+  const container = raw.machine && typeof raw.machine === 'object'
+    ? raw.machine as Record<string, unknown>
+    : raw
+
+  const normalized: Record<string, unknown> = { ...container }
+
+  if (!normalized.siteId) {
+    const siteId = extractRelationId(container.site)
+    if (siteId) {
+      normalized.siteId = siteId
+    }
+  }
+
+  const componentLinks = resolveLinkCollection(raw, ['componentLinks', 'machineComponentLinks']) ??
+    resolveLinkCollection(container, ['componentLinks', 'machineComponentLinks']) ??
+    []
+  const pieceLinks = resolveLinkCollection(raw, ['pieceLinks', 'machinePieceLinks']) ??
+    resolveLinkCollection(container, ['pieceLinks', 'machinePieceLinks']) ??
+    []
+
+  normalized.componentLinks = componentLinks
+  normalized.pieceLinks = pieceLinks
+
+  return normalized as Machine
+}
+
+export function useMachines() {
+  const { showSuccess, showError } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+
+  const loadMachines = async (options: { force?: boolean } = {}): Promise<void> => {
+    if (!options.force && loaded.value) return
+    loading.value = true
+    try {
+      const result = await get('/machines')
+      if (result.success) {
+        const machineList = extractCollection(result.data)
+        const normalized = machineList
+          .map((item) => normalizeMachineResponse(item))
+          .filter((item): item is Machine => item !== null)
+        machines.value = normalized
+        loaded.value = true
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des machines:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createMachine = async (machineData: Partial<Machine>): Promise<ApiResponse> => {
+    loading.value = true
+    try {
+      const normalizedPayload = normalizeRelationIds(machineData as Record<string, unknown>)
+      const result = await post('/machines', normalizedPayload)
+      if (result.success) {
+        const createdMachine = normalizeMachineResponse(result.data) ||
+          normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
+          null
+        if (createdMachine) {
+          machines.value.push(createdMachine)
+        }
+        const displayName = createdMachine?.name || machineData?.name || ''
+        showSuccess(`Machine "${displayName}" créée avec succès`)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la création de la machine:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateMachineData = async (id: string, machineData: Partial<Machine>): Promise<ApiResponse> => {
+    loading.value = true
+    try {
+      const normalizedPayload = normalizeRelationIds(machineData as Record<string, unknown>)
+      const result = await patch(`/machines/${id}`, normalizedPayload)
+      if (result.success) {
+        const updatedMachine = normalizeMachineResponse(result.data) ||
+          normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
+          null
+        const index = machines.value.findIndex((machine) => machine.id === id)
+        if (index !== -1 && updatedMachine) {
+          machines.value[index] = {
+            ...machines.value[index],
+            ...updatedMachine,
+          }
+        }
+        showSuccess(`Machine "${updatedMachine?.name || machineData.name || ''}" mise à jour avec succès`)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la machine:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateStructure = async (machineId: string, payload: unknown): Promise<ApiResponse> => {
+    if (!machineId) {
+      return { success: false, error: 'Identifiant de machine manquant' }
+    }
+
+    loading.value = true
+    try {
+      const result = await patch(`/machines/${machineId}/structure`, payload)
+      if (result.success) {
+        const index = machines.value.findIndex((machine) => machine.id === machineId)
+        if (index !== -1) {
+          const updatedMachine = normalizeMachineResponse(result.data) ||
+            normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
+            machines.value[index]
+          machines.value[index] = {
+            ...machines.value[index],
+            ...updatedMachine,
+          } as Machine
+        }
+        showSuccess('Structure de la machine mise à jour avec succès')
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la structure de la machine:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const cloneMachine = async (sourceId: string, data: { name: string; siteId: string; reference?: string }): Promise<ApiResponse> => {
+    loading.value = true
+    try {
+      const result = await post(`/machines/${sourceId}/clone`, data)
+      if (result.success) {
+        const clonedMachine = normalizeMachineResponse(result.data) ||
+          normalizeMachineResponse((result.data as Record<string, unknown>)?.machine) ||
+          null
+        if (clonedMachine) {
+          machines.value.push(clonedMachine)
+        }
+        showSuccess(`Machine "${clonedMachine?.name || data.name}" clonée avec succès`)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors du clonage de la machine:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const addMissingCustomFields = async (machineId: string, { showToast: shouldShowToast = true } = {}): Promise<ApiResponse> => {
+    if (!machineId) {
+      const error = 'Identifiant de machine manquant'
+      if (shouldShowToast) {
+        showError(error)
+      }
+      return { success: false, error }
+    }
+
+    try {
+      const result = await post(`/machines/${machineId}/add-custom-fields`)
+      if (result.success) {
+        if (shouldShowToast) {
+          showSuccess('Champs personnalisés complétés avec succès')
+        }
+      } else if (shouldShowToast && result.error) {
+        showError(result.error)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de l\'ajout des champs personnalisés manquants:', error)
+      if (shouldShowToast) {
+        showError('Erreur lors de la complétion des champs personnalisés')
+      }
+      return { success: false, error: (error as Error).message }
+    }
+  }
+
+  const deleteMachine = async (id: string): Promise<ApiResponse> => {
+    loading.value = true
+    try {
+      const result = await del(`/machines/${id}`)
+      if (result.success) {
+        const deletedMachine = machines.value.find((machine) => machine.id === id)
+        machines.value = machines.value.filter((machine) => machine.id !== id)
+        showSuccess(`Machine "${deletedMachine?.name || 'inconnu'}" supprimée avec succès`)
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la suppression de la machine:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getMachineById = (id: string): Machine | undefined => {
+    return machines.value.find((machine) => machine.id === id)
+  }
+
+  const getMachinesBySite = (siteId: string): Machine[] => {
+    return machines.value.filter((machine) => machine.siteId === siteId)
+  }
+
+  const getMachines = (): Machine[] => machines.value
+  const isLoading = (): boolean => loading.value
+
+  return {
+    machines,
+    loading,
+    loadMachines,
+    createMachine,
+    updateMachine: updateMachineData,
+    updateStructure,
+    cloneMachine,
+    deleteMachine,
+    getMachineById,
+    getMachinesBySite,
+    getMachines,
+    isLoading,
+    addMissingCustomFields,
+  }
+}
diff --git a/frontend/app/composables/useNavDropdown.ts b/frontend/app/composables/useNavDropdown.ts
new file mode 100644
index 0000000..be15873
--- /dev/null
+++ b/frontend/app/composables/useNavDropdown.ts
@@ -0,0 +1,65 @@
+import { ref, watch, onUnmounted } from 'vue'
+import { useRoute } from '#imports'
+
+export function useNavDropdown() {
+  const openDropdown = ref<string | null>(null)
+  let dropdownCloseTimer: ReturnType<typeof setTimeout> | null = null
+  const route = useRoute()
+
+  const setDropdown = (name: string) => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+      dropdownCloseTimer = null
+    }
+    if (openDropdown.value !== name) {
+      openDropdown.value = name
+    }
+  }
+
+  const scheduleDropdownClose = (name: string) => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+    }
+    dropdownCloseTimer = setTimeout(() => {
+      if (openDropdown.value === name) {
+        openDropdown.value = null
+      }
+      dropdownCloseTimer = null
+    }, 200)
+  }
+
+  const closeDropdownNow = () => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+      dropdownCloseTimer = null
+    }
+    openDropdown.value = null
+  }
+
+  const toggleDropdown = (name: string) => {
+    if (openDropdown.value === name) {
+      closeDropdownNow()
+      return
+    }
+    setDropdown(name)
+  }
+
+  watch(() => route.fullPath, () => {
+    closeDropdownNow()
+  })
+
+  onUnmounted(() => {
+    if (dropdownCloseTimer) {
+      clearTimeout(dropdownCloseTimer)
+      dropdownCloseTimer = null
+    }
+  })
+
+  return {
+    openDropdown,
+    setDropdown,
+    scheduleDropdownClose,
+    closeDropdownNow,
+    toggleDropdown,
+  }
+}
diff --git a/frontend/app/composables/usePermissions.ts b/frontend/app/composables/usePermissions.ts
new file mode 100644
index 0000000..a96fd5c
--- /dev/null
+++ b/frontend/app/composables/usePermissions.ts
@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+import { useProfileSession } from './useProfileSession'
+
+const ROLE_HIERARCHY: Record<string, string[]> = {
+  ROLE_ADMIN: ['ROLE_ADMIN', 'ROLE_GESTIONNAIRE', 'ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_GESTIONNAIRE: ['ROLE_GESTIONNAIRE', 'ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_VIEWER: ['ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_USER: ['ROLE_USER'],
+}
+
+export function usePermissions() {
+  const { activeProfile } = useProfileSession()
+
+  const effectiveRoles = computed<string[]>(() => {
+    const roles = (activeProfile.value?.roles as string[] | undefined) ?? ['ROLE_USER']
+    const all = new Set<string>()
+    for (const role of roles) {
+      const inherited = ROLE_HIERARCHY[role] ?? [role]
+      for (const r of inherited) {
+        all.add(r)
+      }
+    }
+    return [...all]
+  })
+
+  const isGranted = (role: string): boolean => {
+    return effectiveRoles.value.includes(role)
+  }
+
+  const isAdmin = computed(() => isGranted('ROLE_ADMIN'))
+  const canEdit = computed(() => isGranted('ROLE_GESTIONNAIRE'))
+  const canView = computed(() => isGranted('ROLE_VIEWER'))
+
+  return {
+    isAdmin,
+    canEdit,
+    canView,
+    isGranted,
+    effectiveRoles,
+  }
+}
diff --git a/frontend/app/composables/usePersistedSort.ts b/frontend/app/composables/usePersistedSort.ts
new file mode 100644
index 0000000..ea7c569
--- /dev/null
+++ b/frontend/app/composables/usePersistedSort.ts
@@ -0,0 +1,53 @@
+import { ref, watch } from 'vue'
+import { useCookie } from '#imports'
+
+type SortCookie = {
+  field?: string
+  direction?: string
+}
+
+const readSortCookie = (value: unknown): SortCookie | null => {
+  if (!value) {
+    return null
+  }
+  if (typeof value === 'object') {
+    return value as SortCookie
+  }
+  if (typeof value === 'string') {
+    try {
+      return JSON.parse(value) as SortCookie
+    } catch {
+      return null
+    }
+  }
+  return null
+}
+
+export const usePersistedSort = <
+  TField extends string,
+  TDirection extends string,
+>(
+  key: string,
+  defaults: { field: TField; direction: TDirection },
+) => {
+  const cookie = useCookie<string | null>(`sort:${key}`, {
+    sameSite: 'lax',
+  })
+  const stored = readSortCookie(cookie.value)
+  const sortField = ref<TField>((stored?.field as TField) || defaults.field)
+  const sortDirection = ref<TDirection>(
+    (stored?.direction as TDirection) || defaults.direction,
+  )
+
+  watch([sortField, sortDirection], () => {
+    cookie.value = JSON.stringify({
+      field: sortField.value,
+      direction: sortDirection.value,
+    })
+  })
+
+  return {
+    sortField,
+    sortDirection,
+  }
+}
diff --git a/frontend/app/composables/usePersistedValue.ts b/frontend/app/composables/usePersistedValue.ts
new file mode 100644
index 0000000..3d9fe71
--- /dev/null
+++ b/frontend/app/composables/usePersistedValue.ts
@@ -0,0 +1,34 @@
+import { ref, watch } from 'vue'
+import { useCookie } from '#imports'
+
+const parseValue = <T>(value: unknown, fallback: T): T => {
+  if (value === null || value === undefined) {
+    return fallback
+  }
+  if (typeof value === 'string') {
+    try {
+      return JSON.parse(value) as T
+    } catch {
+      return value as unknown as T
+    }
+  }
+  return value as T
+}
+
+export const usePersistedValue = <T>(key: string, fallback: T) => {
+  const cookie = useCookie<string | null>(`pref:${key}`, {
+    sameSite: 'lax',
+  })
+  const initial = parseValue(cookie.value, fallback)
+  const state = ref<T>(initial)
+
+  watch(
+    state,
+    (value) => {
+      cookie.value = JSON.stringify(value)
+    },
+    { deep: true },
+  )
+
+  return state
+}
diff --git a/frontend/app/composables/usePieceEdit.ts b/frontend/app/composables/usePieceEdit.ts
new file mode 100644
index 0000000..adce953
--- /dev/null
+++ b/frontend/app/composables/usePieceEdit.ts
@@ -0,0 +1,482 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from '#imports'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useApi } from '~/composables/useApi'
+import { useToast } from '~/composables/useToast'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { usePieceHistory } from '~/composables/usePieceHistory'
+import { extractRelationId } from '~/shared/apiRelations'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import { formatPieceStructurePreview } from '~/shared/modelUtils'
+import { uniqueConstructeurIds, constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import {
+  getStructureProducts,
+  buildProductRequirementDescriptions,
+  buildProductRequirementEntries,
+  resizeProductSelections,
+  areProductSelectionsFilled,
+  applyProductSelection,
+  collectNormalizedProductIds,
+} from '~/shared/utils/pieceProductSelectionUtils'
+import { getModelType } from '~/services/modelTypes'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+
+interface PieceCatalogType extends ModelType {
+  structure: PieceModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+export function usePieceEdit(pieceId: string) {
+  const { canEdit } = usePermissions()
+  const router = useRouter()
+  const { get } = useApi()
+  const { pieceTypes, loadPieceTypes } = usePieceTypes()
+  const { updatePiece } = usePieces()
+  const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+  const toast = useToast()
+  const { loadDocumentsByPiece, uploadDocuments, deleteDocument } = useDocuments()
+  const { ensureConstructeurs } = useConstructeurs()
+  const { fetchLinks, syncLinks } = useConstructeurLinks()
+  const {
+    history,
+    loading: historyLoading,
+    error: historyError,
+    loadHistory,
+  } = usePieceHistory()
+
+  const piece = ref<any | null>(null)
+  const loading = ref(true)
+  const saving = ref(false)
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const pieceDocuments = ref<any[]>([])
+  const previewDocument = ref<any | null>(null)
+  const previewVisible = ref(false)
+
+  const historyFieldLabels: Record<string, string> = {
+    name: 'Nom',
+    reference: 'Référence',
+    prix: 'Prix',
+    typePiece: 'Catégorie',
+    product: 'Produit lié',
+    productIds: 'Produits liés',
+    constructeurIds: 'Fournisseurs',
+  }
+
+  const selectedTypeId = ref<string>('')
+  const pieceTypeDetails = ref<any | null>(null)
+  const editionForm = reactive({
+    name: '' as string,
+    description: '' as string,
+    reference: '' as string,
+    constructeurIds: [] as string[],
+    prix: '' as string,
+  })
+  const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+  const constructeurIdsFromForm = computed(() => constructeurIdsFromLinks(constructeurLinks.value))
+  const productSelections = ref<(string | null)[]>([])
+
+  const customFieldInputs = ref<CustomFieldInput[]>([])
+  const resolvedStructure = computed<PieceModelStructure | null>(() =>
+    pieceTypeDetails.value?.structure ?? selectedType.value?.structure ?? null,
+  )
+
+  const refreshCustomFieldInputs = (
+    structureOverride?: PieceModelStructure | null,
+    valuesOverride?: any[] | null,
+  ) => {
+    const structure = structureOverride ?? resolvedStructure.value ?? null
+    const values = valuesOverride ?? piece.value?.customFieldValues ?? null
+    customFieldInputs.value = buildCustomFieldInputs(structure, values)
+  }
+
+  const openPreview = (doc: any) => {
+    if (!doc || !canPreviewDocument(doc)) {
+      return
+    }
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const removeDocument = async (documentId: string | number | null | undefined) => {
+    if (!documentId) {
+      return
+    }
+    const result = await deleteDocument(documentId, { updateStore: false })
+    if (result.success) {
+      pieceDocuments.value = pieceDocuments.value.filter((doc) => doc.id !== documentId)
+    }
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    if (!files?.length || !piece.value?.id) {
+      return
+    }
+    uploadingDocuments.value = true
+    try {
+      const result = await uploadDocuments(
+        {
+          files,
+          context: { pieceId: piece.value.id },
+        },
+        { updateStore: false },
+      )
+      if (result.success) {
+        selectedFiles.value = []
+        await refreshDocuments()
+      }
+    }
+    finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const refreshDocuments = async () => {
+    if (!piece.value?.id) {
+      pieceDocuments.value = []
+      return
+    }
+    loadingDocuments.value = true
+    try {
+      const result = await loadDocumentsByPiece(piece.value.id, { updateStore: false })
+      if (result.success) {
+        pieceDocuments.value = Array.isArray(result.data) ? result.data : result.data ? [result.data] : []
+      }
+    }
+    finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
+
+  const selectedType = computed(() => {
+    if (!selectedTypeId.value) {
+      return null
+    }
+    return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+  })
+
+  const structureProducts = computed(() =>
+    getStructureProducts(resolvedStructure.value),
+  )
+
+  const requiresProductSelection = computed(() => structureProducts.value.length > 0)
+
+  const productRequirementDescriptions = computed(() =>
+    buildProductRequirementDescriptions(structureProducts.value),
+  )
+
+  const ensureProductSelections = (count: number) => {
+    productSelections.value = resizeProductSelections(productSelections.value, count)
+  }
+
+  let pendingProductIds: string[] = []
+
+  const productRequirementEntries = computed(() =>
+    buildProductRequirementEntries(structureProducts.value, 'piece-product-requirement'),
+  )
+
+  const productSelectionsFilled = computed(() =>
+    areProductSelectionsFilled(
+      requiresProductSelection.value,
+      productRequirementEntries.value,
+      productSelections.value,
+    ),
+  )
+
+  const setProductSelection = (index: number, value: string | null) => {
+    productSelections.value = applyProductSelection(productSelections.value, index, value)
+  }
+
+  watch(structureProducts, (products) => {
+    ensureProductSelections(products.length)
+    if (!pendingProductIds.length || products.length === 0) {
+      return
+    }
+    const next = Array.from(
+      { length: products.length },
+      (_, index) => pendingProductIds[index] ?? null,
+    )
+    productSelections.value = next
+    pendingProductIds = []
+  })
+
+  const requiredCustomFieldsFilled = computed(() =>
+    _requiredCustomFieldsFilled(customFieldInputs.value),
+  )
+
+  const canSubmit = computed(() =>
+    Boolean(
+      canEdit.value
+      && piece.value
+      && editionForm.name
+      && requiredCustomFieldsFilled.value
+      && productSelectionsFilled.value
+      && !saving.value,
+    ),
+  )
+
+  const fetchPiece = async () => {
+    if (!pieceId || typeof pieceId !== 'string') {
+      piece.value = null
+      pieceDocuments.value = []
+      return
+    }
+    const result = await get(`/pieces/${pieceId}`)
+    if (result.success) {
+      piece.value = result.data
+      pieceDocuments.value = Array.isArray(result.data?.documents) ? result.data.documents : []
+
+      // Use customFieldValues from entity response (enriched with customField definitions via serialization groups)
+      const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+      refreshCustomFieldInputs(undefined, customValues)
+
+      // Use cached type from loadPieceTypes() instead of separate getModelType() call
+      loadPieceTypeDetailsFromCache(result.data)
+
+      // History is non-blocking — template handles its own loading state
+      loadHistory(result.data.id).catch(() => {})
+    }
+    else {
+      piece.value = null
+      pieceDocuments.value = []
+    }
+  }
+
+  const loadPieceTypeDetailsFromCache = (currentPiece: any) => {
+    const typeId = currentPiece?.typePieceId
+      || extractRelationId(currentPiece?.typePiece)
+      || ''
+    if (!typeId) {
+      pieceTypeDetails.value = null
+      return
+    }
+    // Look up in the already-loaded pieceTypes cache (from loadPieceTypes in onMounted)
+    const cachedType = (pieceTypes.value || []).find((t: any) => t.id === typeId) ?? null
+    if (cachedType) {
+      pieceTypeDetails.value = cachedType
+      refreshCustomFieldInputs((cachedType.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
+      return
+    }
+    // Fallback: fetch if not in cache (edge case)
+    getModelType(typeId).then((type) => {
+      if (type && typeof type === 'object') {
+        pieceTypeDetails.value = type
+        refreshCustomFieldInputs((type.structure as PieceModelStructure | null) ?? null, currentPiece?.customFieldValues ?? null)
+      }
+    }).catch(() => {
+      pieceTypeDetails.value = null
+    })
+  }
+
+  let initialized = false
+
+  watch(
+    [piece, selectedType],
+    ([currentPiece, _currentType]) => {
+      if (!currentPiece || initialized) {
+        return
+      }
+
+      const resolvedTypeId = currentPiece.typePieceId
+        || extractRelationId(currentPiece.typePiece)
+        || ''
+      if (resolvedTypeId && !currentPiece.typePieceId) {
+        currentPiece.typePieceId = resolvedTypeId
+      }
+      selectedTypeId.value = resolvedTypeId
+
+      editionForm.name = currentPiece.name || ''
+      editionForm.description = currentPiece.description || ''
+      editionForm.reference = currentPiece.reference || ''
+      // Load constructeur links
+      fetchLinks('piece', pieceId).then((links) => {
+        constructeurLinks.value = links
+        originalConstructeurLinks.value = links.map(l => ({ ...l }))
+        editionForm.constructeurIds = constructeurIdsFromLinks(links)
+        if (editionForm.constructeurIds.length) {
+          void ensureConstructeurs(editionForm.constructeurIds)
+        }
+      })
+      editionForm.prix = currentPiece.prix !== null && currentPiece.prix !== undefined ? String(currentPiece.prix) : ''
+
+      const existingProductIds = Array.isArray(currentPiece.productIds) && currentPiece.productIds.length
+        ? currentPiece.productIds.map((id: unknown) => String(id))
+        : currentPiece.product?.id || currentPiece.productId
+          ? [String(currentPiece.product?.id || currentPiece.productId)]
+          : []
+      pendingProductIds = existingProductIds
+      ensureProductSelections(structureProducts.value.length)
+      if (existingProductIds.length && structureProducts.value.length) {
+        const next = Array.from(
+          { length: structureProducts.value.length },
+          (_, index) => existingProductIds[index] ?? null,
+        )
+        productSelections.value = next
+        pendingProductIds = []
+      }
+
+      // After setting selectedTypeId, read selectedType.value (now updated) instead of
+      // the stale destructured currentType which was captured before the ID change.
+      const resolvedType = selectedType.value ?? pieceTypeDetails.value ?? null
+      refreshCustomFieldInputs(resolvedType?.structure ?? null, currentPiece.customFieldValues)
+
+      initialized = true
+    },
+    { immediate: true },
+  )
+
+  watch(selectedType, (currentType) => {
+    if (!piece.value || !currentType) {
+      return
+    }
+    refreshCustomFieldInputs(currentType.structure, piece.value.customFieldValues)
+  })
+
+  watch(resolvedStructure, (currentStructure) => {
+    if (!piece.value) {
+      return
+    }
+    ensureProductSelections(structureProducts.value.length)
+    refreshCustomFieldInputs(currentStructure, piece.value.customFieldValues)
+  })
+
+  const submitEdition = async () => {
+    if (!piece.value) {
+      return
+    }
+
+    if (!productSelectionsFilled.value) {
+      toast.showError('Sélectionnez un produit conforme au squelette.')
+      return
+    }
+
+    const rawPrice = typeof editionForm.prix === 'string'
+      ? editionForm.prix.trim()
+      : editionForm.prix === null || editionForm.prix === undefined
+        ? ''
+        : String(editionForm.prix).trim()
+
+    const payload: Record<string, any> = {
+      name: editionForm.name.trim(),
+      description: editionForm.description.trim() || null,
+    }
+
+    const reference = editionForm.reference.trim()
+    payload.reference = reference ? reference : null
+
+    const normalizedProductIds = collectNormalizedProductIds(
+      productRequirementEntries.value,
+      productSelections.value,
+    )
+
+    payload.productIds = normalizedProductIds
+    payload.productId = normalizedProductIds[0] || null
+
+    if (rawPrice) {
+      const parsed = Number(rawPrice)
+      if (!Number.isNaN(parsed)) {
+        payload.prix = String(parsed)
+      }
+    }
+    else {
+      payload.prix = null
+    }
+
+    saving.value = true
+    try {
+      const result = await updatePiece(piece.value.id, payload)
+      if (result.success && result.data) {
+        const updatedPiece = result.data as Record<string, any>
+        await _saveCustomFieldValues(
+          'piece',
+          updatedPiece.id,
+          [
+            updatedPiece?.typePiece?.structure?.customFields,
+          ],
+          { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+        )
+        await syncLinks('piece', piece.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+        originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+        toast.showSuccess('Pièce mise à jour avec succès.')
+      }
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour de la pièce')
+    }
+    finally {
+      saving.value = false
+    }
+  }
+
+  onMounted(async () => {
+    await Promise.allSettled([loadPieceTypes(), fetchPiece()])
+    loading.value = false
+  })
+
+  return {
+    // State
+    piece,
+    loading,
+    saving,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    pieceDocuments,
+    previewDocument,
+    previewVisible,
+    selectedTypeId,
+    editionForm,
+    constructeurLinks,
+    originalConstructeurLinks,
+    constructeurIdsFromForm,
+    productSelections,
+    customFieldInputs,
+    canEdit,
+
+    // Computed
+    pieceTypeList,
+    selectedType,
+    resolvedStructure,
+    structureProducts,
+    productRequirementDescriptions,
+    productRequirementEntries,
+    canSubmit,
+    historyFieldLabels,
+
+    // History
+    history,
+    historyLoading,
+    historyError,
+
+    // Methods
+    openPreview,
+    closePreview,
+    removeDocument,
+    handleFilesAdded,
+    setProductSelection,
+    submitEdition,
+    fetchPiece,
+    formatPieceStructurePreview,
+  }
+}
diff --git a/frontend/app/composables/usePieceHistory.ts b/frontend/app/composables/usePieceHistory.ts
new file mode 100644
index 0000000..7f4e607
--- /dev/null
+++ b/frontend/app/composables/usePieceHistory.ts
@@ -0,0 +1,12 @@
+/**
+ * Backward-compatible wrapper around useEntityHistory.
+ * Real logic lives in useEntityHistory.ts.
+ */
+import { useEntityHistory, type EntityHistoryActor, type EntityHistoryEntry } from './useEntityHistory'
+
+export type PieceHistoryActor = EntityHistoryActor
+export type PieceHistoryEntry = EntityHistoryEntry
+
+export function usePieceHistory() {
+  return useEntityHistory('piece')
+}
diff --git a/frontend/app/composables/usePieceStructureEditorLogic.ts b/frontend/app/composables/usePieceStructureEditorLogic.ts
new file mode 100644
index 0000000..0734bc9
--- /dev/null
+++ b/frontend/app/composables/usePieceStructureEditorLogic.ts
@@ -0,0 +1,440 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import type {
+  PieceModelCustomField,
+  PieceModelCustomFieldType,
+  PieceModelProduct,
+  PieceModelStructure,
+  PieceModelStructureEditorField,
+} from '~/shared/types/inventory'
+import { normalizePieceStructureForSave } from '~/shared/modelUtils'
+import { useProductTypes } from '~/composables/useProductTypes'
+
+export type EditorField = PieceModelStructureEditorField & { uid: string }
+export type EditorProduct = {
+  uid: string
+  typeProductId: string
+  typeProductLabel: string
+  familyCode: string
+}
+
+interface Deps {
+  props: {
+    modelValue?: PieceModelStructure | null
+  }
+  emit: (event: 'update:modelValue', value: PieceModelStructure) => void
+}
+
+// --- Pure helpers ---
+
+const ensureArray = <T,>(value: T[] | null | undefined): T[] =>
+  Array.isArray(value) ? value : []
+
+const normalizeLineEndings = (value: string): string =>
+  value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+
+const safeClone = <T,>(value: T, fallback: T): T => {
+  try {
+    return JSON.parse(JSON.stringify(value ?? fallback)) as T
+  }
+  catch {
+    return JSON.parse(JSON.stringify(fallback)) as T
+  }
+}
+
+const extractRest = (structure?: PieceModelStructure | null): Record<string, unknown> => {
+  if (!structure || typeof structure !== 'object') {
+    return {}
+  }
+  const entries = Object.entries(structure).filter(
+    ([key]) => key !== 'customFields' && key !== 'products',
+  )
+  return safeClone(Object.fromEntries(entries), {})
+}
+
+let uidCounter = 0
+const createUid = (scope: 'field' | 'product'): string => {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  uidCounter += 1
+  return `piece-${scope}-${Date.now().toString(36)}-${uidCounter}`
+}
+
+// --- Hydration ---
+
+const toEditorField = (
+  input: Partial<PieceModelStructureEditorField> | null | undefined,
+  index: number,
+): EditorField => {
+  const baseType = typeof input?.type === 'string' && input.type ? input.type : 'text'
+  const optionsText = normalizeLineEndings(
+    typeof input?.optionsText === 'string'
+      ? input.optionsText
+      : Array.isArray(input?.options)
+        ? input.options.join('\n')
+        : '',
+  )
+
+  return {
+    uid: createUid('field'),
+    name: typeof input?.name === 'string' ? input.name : '',
+    type: baseType as PieceModelCustomFieldType,
+    required: Boolean(input?.required),
+    optionsText,
+    defaultValue:
+      input?.defaultValue !== undefined && input.defaultValue !== null && input.defaultValue !== ''
+        ? String(input.defaultValue)
+        : null,
+    ...(typeof input?.id === 'string' && input.id ? { id: input.id } : {}),
+    ...(typeof input?.customFieldId === 'string' && input.customFieldId ? { customFieldId: input.customFieldId } : {}),
+    orderIndex: typeof input?.orderIndex === 'number' ? input.orderIndex : index,
+  }
+}
+
+const hydrateFields = (structure?: PieceModelStructure | null): EditorField[] => {
+  const source = ensureArray(structure?.customFields)
+  return source
+    .map((field, index) => toEditorField(field, index))
+    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+    .map((field, index) => ({ ...field, orderIndex: index }))
+}
+
+const toEditorProduct = (
+  input: Partial<PieceModelProduct> | null | undefined,
+): EditorProduct => ({
+  uid: createUid('product'),
+  typeProductId: typeof input?.typeProductId === 'string' ? input.typeProductId : '',
+  typeProductLabel:
+    typeof input?.typeProductLabel === 'string' ? input.typeProductLabel : '',
+  familyCode: typeof input?.familyCode === 'string' ? input.familyCode : '',
+})
+
+const hydrateProducts = (structure?: PieceModelStructure | null): EditorProduct[] => {
+  const source = Array.isArray(structure?.products) ? structure?.products : []
+  return source.map(product => toEditorProduct(product))
+}
+
+// --- Payload ---
+
+const applyOrderIndex = (list: EditorField[]): EditorField[] =>
+  list.map((field, index) => ({
+    ...field,
+    orderIndex: index,
+  }))
+
+const normalizeProductEntry = (product: EditorProduct): PieceModelProduct | null => {
+  const typeProductId = typeof product.typeProductId === 'string' ? product.typeProductId.trim() : ''
+  const familyCode = typeof product.familyCode === 'string' ? product.familyCode.trim() : ''
+
+  if (!typeProductId && !familyCode) {
+    return null
+  }
+
+  const payload: PieceModelProduct = {}
+  if (typeProductId) {
+    payload.typeProductId = typeProductId
+  }
+  if (familyCode) {
+    payload.familyCode = familyCode
+  }
+  if (product.typeProductLabel) {
+    payload.typeProductLabel = product.typeProductLabel
+  }
+  return payload
+}
+
+const buildPayload = (
+  fieldsSource: EditorField[],
+  productsSource: EditorProduct[],
+  restSource: Record<string, unknown>,
+): PieceModelStructure => {
+  const normalizedFields = fieldsSource
+    .map<PieceModelCustomField | null>((field, index) => {
+      const name = field.name.trim()
+      if (!name) {
+        return null
+      }
+
+      const type = (field.type || 'text') as PieceModelCustomFieldType
+      const required = Boolean(field.required)
+      const payload: PieceModelCustomField = {
+        name,
+        type,
+        required,
+        orderIndex: index,
+      }
+
+      if (field.id) {
+        payload.id = field.id
+      }
+      if (field.customFieldId) {
+        payload.customFieldId = field.customFieldId
+      }
+      if (field.defaultValue !== undefined && field.defaultValue !== null && field.defaultValue !== '') {
+        payload.defaultValue = String(field.defaultValue)
+      }
+
+      if (type === 'select') {
+        const options = normalizeLineEndings(field.optionsText)
+          .split('\n')
+          .map(option => option.trim())
+          .filter(option => option.length > 0)
+        if (options.length > 0) {
+          payload.options = options
+        }
+      }
+
+      return payload
+    })
+    .filter((field): field is PieceModelCustomField => Boolean(field))
+
+  const normalizedProducts = productsSource
+    .map(product => normalizeProductEntry(product))
+    .filter((product): product is PieceModelProduct => Boolean(product))
+
+  const draft: PieceModelStructure = {
+    ...safeClone(restSource, {}),
+    products: normalizedProducts,
+    customFields: normalizedFields,
+  }
+
+  return normalizePieceStructureForSave(draft)
+}
+
+const serializeStructure = (structure?: PieceModelStructure | null): string => {
+  return JSON.stringify(normalizePieceStructureForSave(structure ?? { customFields: [] }))
+}
+
+// --- Composable ---
+
+export function usePieceStructureEditorLogic(deps: Deps) {
+  const { props, emit } = deps
+  const { productTypes, loadProductTypes } = useProductTypes()
+
+  // --- State ---
+
+  const fields = ref<EditorField[]>(hydrateFields(props.modelValue))
+  const products = ref<EditorProduct[]>(hydrateProducts(props.modelValue))
+  const restState = ref<Record<string, unknown>>(extractRest(props.modelValue))
+
+
+  // --- Product types ---
+
+  const productTypeOptions = computed(() => productTypes.value ?? [])
+
+  const productTypeMap = computed(() => {
+    const map = new Map<string, any>()
+    productTypeOptions.value.forEach((type: any) => {
+      if (type?.id) {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  const formatProductTypeOption = (type: any) => {
+    if (!type) {
+      return ''
+    }
+    const parts: string[] = []
+    if (type.code) {
+      parts.push(type.code)
+    }
+    if (type.name) {
+      parts.push(type.name)
+    }
+    return parts.length ? parts.join(' • ') : type.id || ''
+  }
+
+  const updateProductTypeMetadata = (product: EditorProduct) => {
+    const option = product.typeProductId
+      ? productTypeMap.value.get(product.typeProductId)
+      : null
+    product.typeProductLabel = option?.name ?? ''
+  }
+
+  const handleProductTypeSelect = (product: EditorProduct) => {
+    const option = product.typeProductId
+      ? productTypeMap.value.get(product.typeProductId)
+      : null
+    product.typeProductLabel = option?.name ?? ''
+    if (option?.code) {
+      product.familyCode = option.code
+    }
+  }
+
+  // --- CRUD ---
+
+  const createEmptyProduct = (): EditorProduct => ({
+    uid: createUid('product'),
+    typeProductId: '',
+    typeProductLabel: '',
+    familyCode: '',
+  })
+
+  const addProduct = () => {
+    products.value.push(createEmptyProduct())
+  }
+
+  const removeProduct = (index: number) => {
+    products.value = products.value.filter((_, idx) => idx !== index)
+  }
+
+  const createEmptyField = (orderIndex: number): EditorField => ({
+    uid: createUid('field'),
+    name: '',
+    type: 'text',
+    required: false,
+    optionsText: '',
+    orderIndex,
+  })
+
+  const addField = () => {
+    const next = fields.value.slice()
+    next.push(createEmptyField(next.length))
+    fields.value = applyOrderIndex(next)
+  }
+
+  const removeField = (index: number) => {
+    const next = fields.value.filter((_, i) => i !== index)
+    fields.value = applyOrderIndex(next)
+  }
+
+  // --- Drag & drop ---
+
+  const dragState = reactive({
+    draggingIndex: null as number | null,
+    dropTargetIndex: null as number | null,
+  })
+
+  const resetDragState = () => {
+    dragState.draggingIndex = null
+    dragState.dropTargetIndex = null
+  }
+
+  const reorderFields = (from: number, to: number) => {
+    if (from === to) {
+      resetDragState()
+      return
+    }
+
+    const list = fields.value.slice()
+    if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
+      resetDragState()
+      return
+    }
+
+    const [moved] = list.splice(from, 1)
+    if (!moved) {
+      resetDragState()
+      return
+    }
+    list.splice(to, 0, moved)
+    fields.value = applyOrderIndex(list)
+    resetDragState()
+  }
+
+  const onDragStart = (index: number, event: DragEvent) => {
+    dragState.draggingIndex = index
+    dragState.dropTargetIndex = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+    }
+  }
+
+  const onDragEnter = (index: number) => {
+    if (dragState.draggingIndex === null) {
+      return
+    }
+    dragState.dropTargetIndex = index
+  }
+
+  const onDrop = (index: number) => {
+    if (dragState.draggingIndex === null) {
+      resetDragState()
+      return
+    }
+    reorderFields(dragState.draggingIndex, index)
+  }
+
+  const onDragEnd = () => {
+    resetDragState()
+  }
+
+  const reorderClass = (index: number) => {
+    if (dragState.draggingIndex === index) {
+      return 'border-dashed border-primary bg-primary/5'
+    }
+    if (
+      dragState.draggingIndex !== null
+      && dragState.dropTargetIndex === index
+      && dragState.draggingIndex !== index
+    ) {
+      return 'border-primary border-dashed bg-primary/10'
+    }
+    return ''
+  }
+
+  // --- Emit ---
+
+  let lastEmitted = serializeStructure(props.modelValue)
+
+  const emitUpdate = () => {
+    const payload = buildPayload(fields.value, products.value, restState.value)
+    const serialized = JSON.stringify(payload)
+    if (serialized !== lastEmitted) {
+      lastEmitted = serialized
+      emit('update:modelValue', payload)
+    }
+  }
+
+  // --- Watchers ---
+
+  watch(fields, emitUpdate, { deep: true })
+  watch(products, emitUpdate, { deep: true })
+  watch(productTypeOptions, () => {
+    products.value.forEach(product => updateProductTypeMetadata(product))
+  })
+
+  watch(
+    () => props.modelValue,
+    (value) => {
+      const incomingSerialized = serializeStructure(value)
+      if (incomingSerialized === lastEmitted) {
+        return
+      }
+      restState.value = extractRest(value)
+      fields.value = hydrateFields(value)
+      products.value = hydrateProducts(value)
+      products.value.forEach(product => updateProductTypeMetadata(product))
+      lastEmitted = incomingSerialized
+    },
+    { deep: true },
+  )
+
+  // --- Lifecycle ---
+
+  onMounted(async () => {
+    if (!productTypeOptions.value.length) {
+      await loadProductTypes()
+    }
+    products.value.forEach(product => updateProductTypeMetadata(product))
+  })
+
+  return {
+    fields,
+    products,
+    productTypeOptions,
+    formatProductTypeOption,
+    handleProductTypeSelect,
+    addProduct,
+    removeProduct,
+    addField,
+    removeField,
+    reorderClass,
+    onDragStart,
+    onDragEnter,
+    onDrop,
+    onDragEnd,
+  }
+}
diff --git a/frontend/app/composables/usePieceTypes.ts b/frontend/app/composables/usePieceTypes.ts
new file mode 100644
index 0000000..6347833
--- /dev/null
+++ b/frontend/app/composables/usePieceTypes.ts
@@ -0,0 +1,29 @@
+/**
+ * Backward-compatible wrapper around useEntityTypes.
+ * Preserves the original API surface (renamed fields) so consumers need no changes.
+ */
+import { useEntityTypes, type EntityType } from './useEntityTypes'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import type { Ref } from 'vue'
+
+export interface PieceType extends EntityType {
+  structure: PieceModelStructure | null
+}
+
+export function usePieceTypes() {
+  const { types, loading, loadTypes, createType, updateType, deleteType } = useEntityTypes({
+    category: 'PIECE',
+    label: 'pièce',
+  })
+
+  return {
+    pieceTypes: types as Ref<PieceType[]>,
+    loadingPieceTypes: loading,
+    loadPieceTypes: loadTypes,
+    createPieceType: createType,
+    updatePieceType: updateType,
+    deletePieceType: deleteType,
+    getPieceTypes: () => types.value as PieceType[],
+    isPieceTypeLoading: () => loading.value,
+  }
+}
diff --git a/frontend/app/composables/usePieces.ts b/frontend/app/composables/usePieces.ts
new file mode 100644
index 0000000..42c1724
--- /dev/null
+++ b/frontend/app/composables/usePieces.ts
@@ -0,0 +1,290 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi } from './useApi'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs, type Constructeur } from './useConstructeurs'
+import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Piece {
+  id: string
+  name: string
+  reference?: string | null
+  referenceAuto?: string | null
+  description?: string | null
+  typePieceId?: string | null
+  typePiece?: { id: string; name?: string } | null
+  productId?: string | null
+  productIds?: string[]
+  product?: { id: string; name?: string } | null
+  constructeurs?: Constructeur[]
+  constructeurIds?: string[]
+  documents?: unknown[]
+  createdAt?: string | null
+  updatedAt?: string | null
+  [key: string]: unknown
+}
+
+interface PieceListResult {
+  success: boolean
+  data?: { items: Piece[]; total: number; page: number; itemsPerPage: number }
+  error?: string
+}
+
+interface PieceSingleResult {
+  success: boolean
+  data?: Piece
+  error?: string
+}
+
+interface LoadPiecesOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  typeName?: string
+  typePieceId?: string
+  force?: boolean
+}
+
+const pieces = ref<Piece[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') {
+    return p.totalItems
+  }
+  if (typeof p?.['hydra:totalItems'] === 'number') {
+    return p['hydra:totalItems']
+  }
+  return fallbackLength
+}
+
+export function usePieces() {
+  const { showSuccess } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (piece: Piece): Promise<Piece> => {
+    if (!piece || typeof piece !== 'object') {
+      return piece
+    }
+    if (!piece.typePieceId) {
+      const typePieceId = extractRelationId(piece.typePiece)
+      if (typePieceId) {
+        piece.typePieceId = typePieceId
+      }
+    }
+    if (!piece.productId) {
+      const productId = extractRelationId(piece.product)
+      if (productId) {
+        piece.productId = productId
+      }
+    }
+    const productIds = Array.isArray(piece.productIds) ? piece.productIds.filter(Boolean) : []
+    if (productIds.length === 0 && piece.productId) {
+      piece.productIds = [piece.productId]
+    } else if (productIds.length > 0) {
+      piece.productIds = productIds.map((id) => String(id))
+      if (!piece.productId) {
+        piece.productId = piece.productIds[0] || null
+      }
+    }
+    const ids = uniqueConstructeurIds(
+      piece.constructeurIds,
+      piece.constructeurs,
+    )
+    const hasResolvedConstructeurs =
+      Array.isArray(piece.constructeurs) &&
+      piece.constructeurs.length > 0 &&
+      piece.constructeurs.every((item) => item && typeof item === 'object')
+
+    if (ids.length && !hasResolvedConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        piece.constructeurs = resolved
+        piece.constructeurIds = ids
+      }
+    }
+    return piece
+  }
+
+  const loadPieces = async (options: LoadPiecesOptions = {}): Promise<PieceListResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'name',
+      orderDir = 'asc',
+      typeName,
+      typePieceId,
+      force = false,
+    } = options
+
+    // Only use cache for unfiltered full-catalog loads
+    if (!force && loaded.value && !search && !typeName && !typePieceId && page === 1) {
+      return {
+        success: true,
+        data: { items: pieces.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    // For filtered queries, don't block on global loading state
+    if (!typePieceId && loading.value) {
+      return {
+        success: true,
+        data: { items: pieces.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('search', search.trim())
+      }
+
+      if (typeName && typeName.trim()) {
+        params.set('typePiece.name', typeName.trim())
+      }
+
+      if (typePieceId) {
+        params.set('typePiece', typePieceId)
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/pieces?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        const resultTotal = extractTotal(result.data, items.length)
+
+        // Only update global cache for unfiltered queries
+        if (!typePieceId) {
+          pieces.value = enrichedItems
+          total.value = resultTotal
+          loaded.value = true
+        }
+
+        return {
+          success: true,
+          data: {
+            items: enrichedItems,
+            total: resultTotal,
+            page,
+            itemsPerPage,
+          },
+        }
+      }
+      return result as PieceListResult
+    } catch (error) {
+      console.error('Erreur lors du chargement des pièces:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createPiece = async (pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
+    loading.value = true
+    try {
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = pieceData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
+      const result = await post('/pieces', normalizedPayload)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Piece)
+        pieces.value.unshift(enriched)
+        total.value += 1
+        const definition = (pieceData as Record<string, unknown>)?.definition as Record<string, unknown> | undefined
+        const displayName =
+          (result.data as Piece)?.name ||
+          (definition?.name as string | undefined) ||
+          pieceData?.name ||
+          'Pièce'
+        showSuccess(`Pièce "${displayName}" créée avec succès`)
+        return { success: true, data: enriched }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la création de la pièce:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updatePieceData = async (id: string, pieceData: Partial<Piece>): Promise<PieceSingleResult> => {
+    loading.value = true
+    try {
+      const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = pieceData as any
+      const normalizedPayload = normalizeRelationIds(cleanPayload)
+      const result = await patch(`/pieces/${id}`, normalizedPayload)
+      if (result.success && result.data) {
+        const updated = await withResolvedConstructeurs(result.data as Piece)
+        const index = pieces.value.findIndex((piece) => piece.id === id)
+        if (index !== -1) {
+          pieces.value[index] = updated
+        }
+        showSuccess(`Pièce "${updated?.name || pieceData.name || ''}" mise à jour avec succès`)
+        return { success: true, data: updated }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour de la pièce:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deletePiece = async (id: string): Promise<PieceSingleResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/pieces/${id}`)
+      if (result.success) {
+        const deletedPiece = pieces.value.find((piece) => piece.id === id)
+        pieces.value = pieces.value.filter((piece) => piece.id !== id)
+        total.value = Math.max(0, total.value - 1)
+        showSuccess(`Pièce "${deletedPiece?.name || 'inconnu'}" supprimée avec succès`)
+        return { success: true }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      console.error('Erreur lors de la suppression de la pièce:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getPieces = () => pieces.value
+  const isLoading = () => loading.value
+
+  const clearPiecesCache = () => {
+    pieces.value = []
+    total.value = 0
+    loaded.value = false
+  }
+
+  return {
+    pieces,
+    total,
+    loading,
+    loaded,
+    loadPieces,
+    createPiece,
+    updatePiece: updatePieceData,
+    deletePiece,
+    getPieces,
+    isLoading,
+    clearPiecesCache,
+  }
+}
diff --git a/frontend/app/composables/useProductHistory.ts b/frontend/app/composables/useProductHistory.ts
new file mode 100644
index 0000000..aa45d20
--- /dev/null
+++ b/frontend/app/composables/useProductHistory.ts
@@ -0,0 +1,12 @@
+/**
+ * Backward-compatible wrapper around useEntityHistory.
+ * Real logic lives in useEntityHistory.ts.
+ */
+import { useEntityHistory, type EntityHistoryActor, type EntityHistoryEntry } from './useEntityHistory'
+
+export type ProductHistoryActor = EntityHistoryActor
+export type ProductHistoryEntry = EntityHistoryEntry
+
+export function useProductHistory() {
+  return useEntityHistory('product')
+}
diff --git a/frontend/app/composables/useProductTypes.ts b/frontend/app/composables/useProductTypes.ts
new file mode 100644
index 0000000..5c8904f
--- /dev/null
+++ b/frontend/app/composables/useProductTypes.ts
@@ -0,0 +1,27 @@
+/**
+ * Backward-compatible wrapper around useEntityTypes.
+ * Preserves the original API surface (renamed fields) so consumers need no changes.
+ */
+import { useEntityTypes, type EntityType } from './useEntityTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import type { Ref } from 'vue'
+
+export interface ProductType extends EntityType {
+  structure: ProductModelStructure | null
+}
+
+export function useProductTypes() {
+  const { types, loading, loadTypes, createType, updateType, deleteType } = useEntityTypes({
+    category: 'PRODUCT',
+    label: 'produit',
+  })
+
+  return {
+    productTypes: types as Ref<ProductType[]>,
+    loadingProductTypes: loading,
+    loadProductTypes: loadTypes,
+    createProductType: createType,
+    updateProductType: updateType,
+    deleteProductType: deleteType,
+  }
+}
diff --git a/frontend/app/composables/useProducts.ts b/frontend/app/composables/useProducts.ts
new file mode 100644
index 0000000..e63a1df
--- /dev/null
+++ b/frontend/app/composables/useProducts.ts
@@ -0,0 +1,324 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi } from './useApi'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
+import { useConstructeurs, type Constructeur } from './useConstructeurs'
+import { extractRelationId, normalizeRelationIds } from '~/shared/apiRelations'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Product {
+  id: string
+  name: string
+  reference?: string | null
+  typeProductId?: string | null
+  typeProduct?: { id: string; name?: string } | null
+  constructeurs?: Constructeur[]
+  constructeurIds?: string[]
+  supplierPrice?: number | null
+  createdAt?: string | null
+  updatedAt?: string | null
+  documents?: unknown[]
+  [key: string]: unknown
+}
+
+interface ProductListResult {
+  success: boolean
+  data?: { items: Product[]; total: number; page: number; itemsPerPage: number }
+  error?: string
+}
+
+interface ProductSingleResult {
+  success: boolean
+  data?: Product
+  error?: string
+}
+
+interface LoadProductsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  typeName?: string
+  typeProductId?: string
+  force?: boolean
+}
+
+const products = ref<Product[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+const error = ref<string | null>(null)
+
+const replaceInCache = (item: Product): boolean => {
+  if (!item?.id) {
+    return false
+  }
+  const index = products.value.findIndex((product) => product.id === item.id)
+  if (index === -1) {
+    products.value.unshift(item)
+    return true
+  }
+  const clone = products.value.slice()
+  clone[index] = item
+  products.value = clone
+  return false
+}
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') {
+    return p.totalItems
+  }
+  if (typeof p?.['hydra:totalItems'] === 'number') {
+    return p['hydra:totalItems']
+  }
+  return fallbackLength
+}
+
+export function useProducts() {
+  const { showError } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+  const { ensureConstructeurs } = useConstructeurs()
+
+  const withResolvedConstructeurs = async (product: Product): Promise<Product> => {
+    if (!product || typeof product !== 'object') {
+      return product
+    }
+    if (!product.typeProductId) {
+      const typeProductId = extractRelationId(product.typeProduct)
+      if (typeProductId) {
+        product.typeProductId = typeProductId
+      }
+    }
+    const ids = uniqueConstructeurIds(
+      product.constructeurIds,
+      product.constructeurs,
+    )
+    const hasResolvedConstructeurs =
+      Array.isArray(product.constructeurs) &&
+      product.constructeurs.length > 0 &&
+      product.constructeurs.every((item) => item && typeof item === 'object')
+
+    if (ids.length && !hasResolvedConstructeurs) {
+      const resolved = await ensureConstructeurs(ids)
+      if (resolved.length) {
+        product.constructeurs = resolved
+        product.constructeurIds = ids
+      }
+    }
+    return product
+  }
+
+  const loadProducts = async (options: LoadProductsOptions = {}): Promise<ProductListResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'name',
+      orderDir = 'asc',
+      typeName,
+      typeProductId,
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && !typeName && !typeProductId && page === 1) {
+      return {
+        success: true,
+        data: { items: products.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    if (!typeProductId && loading.value) {
+      return {
+        success: true,
+        data: { items: products.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    loading.value = true
+    error.value = null
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('search', search.trim())
+      }
+
+      if (typeName && typeName.trim()) {
+        params.set('typeProduct.name', typeName.trim())
+      }
+
+      if (typeProductId) {
+        params.set('typeProduct', typeProductId)
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/products?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
+        const resultTotal = extractTotal(result.data, items.length)
+
+        if (!typeProductId) {
+          products.value = enrichedItems
+          total.value = resultTotal
+          loaded.value = true
+        }
+
+        return {
+          success: true,
+          data: {
+            items: enrichedItems,
+            total: resultTotal,
+            page,
+            itemsPerPage,
+          },
+        }
+      } else if (result.error) {
+        error.value = result.error
+        showError(`Impossible de charger les produits: ${result.error}`)
+      }
+      return result as ProductListResult
+    } catch (err) {
+      console.error('Erreur lors du chargement des produits:', err)
+      const message = humanizeError((err as Error)?.message)
+      error.value = message
+      showError(`Impossible de charger les produits.`)
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createProduct = async (payload: Partial<Product>): Promise<ProductSingleResult> => {
+    const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = payload as any
+    const normalizedPayload = normalizeRelationIds(cleanPayload)
+    loading.value = true
+    error.value = null
+    try {
+      const result = await post('/products', normalizedPayload)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Product)
+        const added = replaceInCache(enriched)
+        if (added) {
+          total.value += 1
+        }
+        return { success: true, data: enriched }
+      } else if (result.error) {
+        error.value = result.error
+        showError(result.error)
+      }
+      return { success: false, error: result.error }
+    } catch (err) {
+      console.error('Erreur lors de la création du produit:', err)
+      const message = humanizeError((err as Error)?.message)
+      error.value = message
+      showError('Impossible de créer le produit.')
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateProduct = async (id: string, payload: Partial<Product>): Promise<ProductSingleResult> => {
+    const { constructeurIds, constructeurs, constructeurId, constructeur, ...cleanPayload } = payload as any
+    const normalizedPayload = normalizeRelationIds(cleanPayload)
+    loading.value = true
+    error.value = null
+    try {
+      const result = await patch(`/products/${id}`, normalizedPayload)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Product)
+        replaceInCache(enriched)
+        return { success: true, data: enriched }
+      } else if (result.error) {
+        error.value = result.error
+        showError(result.error)
+      }
+      return { success: false, error: result.error }
+    } catch (err) {
+      console.error('Erreur lors de la mise à jour du produit:', err)
+      const message = humanizeError((err as Error)?.message)
+      error.value = message
+      showError('Impossible de mettre à jour le produit.')
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteProduct = async (id: string): Promise<ProductSingleResult> => {
+    loading.value = true
+    error.value = null
+    try {
+      const result = await del(`/products/${id}`)
+      if (result.success) {
+        products.value = products.value.filter((product) => product.id !== id)
+        total.value = Math.max(0, total.value - 1)
+        return { success: true }
+      } else if (result.error) {
+        error.value = result.error
+        showError(result.error)
+      }
+      return { success: false, error: result.error }
+    } catch (err) {
+      console.error('Erreur lors de la suppression du produit:', err)
+      const message = humanizeError((err as Error)?.message)
+      error.value = message
+      showError('Impossible de supprimer le produit.')
+      return { success: false, error: message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getProduct = async (id: string, options: { force?: boolean } = {}): Promise<ProductSingleResult> => {
+    const shouldForce = !!options.force
+    if (!shouldForce) {
+      const cached = products.value.find((product) => product.id === id)
+      if (cached && Array.isArray(cached.constructeurs) && cached.constructeurs.length > 0) {
+        return { success: true, data: cached }
+      }
+    }
+
+    try {
+      const result = await get(`/products/${id}`)
+      if (result.success && result.data) {
+        const enriched = await withResolvedConstructeurs(result.data as Product)
+        replaceInCache(enriched)
+        return { success: true, data: enriched }
+      }
+      return { success: false, error: result.error }
+    } catch (err) {
+      console.error('Erreur lors du chargement du produit:', err)
+      const message = (err as Error)?.message ?? 'Erreur inconnue'
+      return { success: false, error: message }
+    }
+  }
+
+  const clearProductsCache = () => {
+    products.value = []
+    total.value = 0
+    loaded.value = false
+    error.value = null
+  }
+
+  return {
+    products,
+    total,
+    loading,
+    loaded,
+    error,
+    loadProducts,
+    createProduct,
+    updateProduct,
+    deleteProduct,
+    getProduct,
+    clearProductsCache,
+  }
+}
diff --git a/frontend/app/composables/useProfileSession.ts b/frontend/app/composables/useProfileSession.ts
new file mode 100644
index 0000000..1acb477
--- /dev/null
+++ b/frontend/app/composables/useProfileSession.ts
@@ -0,0 +1,78 @@
+import { useState, useRuntimeConfig } from '#imports'
+import type { Profile } from './useProfiles'
+
+const buildUrl = (path: string): string => {
+  const config = useRuntimeConfig()
+  const base = ((config.public.apiBaseUrl as string) || '').replace(/\/$/, '')
+  return `${base}${path}`
+}
+
+export function useProfileSession() {
+  const activeProfile = useState<Profile | null>('profileSession:active', () => null)
+  const sessionLoaded = useState<boolean>('profileSession:loaded', () => false)
+  const loading = useState<boolean>('profileSession:loading', () => false)
+
+  const fetchCurrentProfile = async (): Promise<Profile | null> => {
+    loading.value = true
+    try {
+      activeProfile.value = await $fetch<Profile>(buildUrl('/session/profile'), {
+        method: 'GET',
+        credentials: 'include',
+      })
+    } catch (error) {
+      const err = error as { status?: number }
+      if (err?.status === 401) {
+        activeProfile.value = null
+      } else {
+        console.error('Erreur lors du chargement du profil actif', error)
+        activeProfile.value = null
+      }
+    } finally {
+      sessionLoaded.value = true
+      loading.value = false
+    }
+    return activeProfile.value
+  }
+
+  const ensureSession = (): Promise<Profile | null> => {
+    if (!sessionLoaded.value) {
+      return fetchCurrentProfile()
+    }
+    return Promise.resolve(activeProfile.value)
+  }
+
+  const activateProfile = async (profileId: string, password?: string): Promise<void> => {
+    const body: Record<string, string> = { profileId }
+    if (password) {
+      body.password = password
+    }
+    await $fetch(buildUrl('/session/profile'), {
+      method: 'POST',
+      credentials: 'include',
+      body,
+    })
+    await fetchCurrentProfile()
+  }
+
+  const logout = async (): Promise<void> => {
+    try {
+      await $fetch(buildUrl('/session/profile'), {
+        method: 'DELETE',
+        credentials: 'include',
+      })
+    } finally {
+      activeProfile.value = null
+      sessionLoaded.value = true
+    }
+  }
+
+  return {
+    activeProfile,
+    loading,
+    sessionLoaded,
+    ensureSession,
+    fetchCurrentProfile,
+    activateProfile,
+    logout,
+  }
+}
diff --git a/frontend/app/composables/useProfiles.ts b/frontend/app/composables/useProfiles.ts
new file mode 100644
index 0000000..9c85f99
--- /dev/null
+++ b/frontend/app/composables/useProfiles.ts
@@ -0,0 +1,49 @@
+import { useState, useRuntimeConfig } from '#imports'
+
+export interface Profile {
+  id: string
+  firstName: string
+  lastName: string
+  email?: string | null
+  isActive?: boolean
+  hasPassword?: boolean
+  roles?: string[]
+  [key: string]: unknown
+}
+
+const buildUrl = (path: string): string => {
+  const config = useRuntimeConfig()
+  const base = (config.public.apiBaseUrl as string)?.replace(/\/$/, '') || ''
+  return `${base}${path}`
+}
+
+export function useProfiles() {
+  const profiles = useState<Profile[]>('profiles:list', () => [])
+  const loadingProfiles = useState<boolean>('profiles:loading', () => false)
+  const profilesLoaded = useState<boolean>('profiles:loaded', () => false)
+
+  const fetchProfiles = async (): Promise<Profile[]> => {
+    loadingProfiles.value = true
+    try {
+      profiles.value = await $fetch<Profile[]>(buildUrl('/session/profiles'), {
+        method: 'GET',
+        credentials: 'include',
+      })
+      profilesLoaded.value = true
+    } catch (error) {
+      console.error('Erreur lors du chargement des profils', error)
+      profiles.value = []
+      profilesLoaded.value = false
+    } finally {
+      loadingProfiles.value = false
+    }
+    return profiles.value
+  }
+
+  return {
+    profiles,
+    loadingProfiles,
+    profilesLoaded,
+    fetchProfiles,
+  }
+}
diff --git a/frontend/app/composables/useSiteManagement.ts b/frontend/app/composables/useSiteManagement.ts
new file mode 100644
index 0000000..2c4d705
--- /dev/null
+++ b/frontend/app/composables/useSiteManagement.ts
@@ -0,0 +1,337 @@
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { navigateTo, useRoute } from '#imports'
+import { useSites } from '~/composables/useSites'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConfirm } from '~/composables/useConfirm'
+import { getFileIcon } from '~/utils/fileIcons'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+type SiteForm = {
+  name: string
+  color: string
+  contactName: string
+  contactPhone: string
+  contactAddress: string
+  contactPostalCode: string
+  contactCity: string
+}
+
+type SiteDocument = {
+  id: string
+  name?: string
+  filename?: string
+  mimeType?: string
+  size?: number
+  path?: string
+  fileUrl?: string
+  downloadUrl?: string
+}
+
+type SiteWithDocuments = {
+  id: string
+  name?: string
+  color?: string
+  contactName?: string
+  contactPhone?: string
+  contactAddress?: string
+  contactPostalCode?: string
+  contactCity?: string
+  documents?: SiteDocument[]
+  machines?: Array<unknown>
+}
+
+export function useSiteManagement() {
+  const route = useRoute()
+  const { showError, showSuccess } = useToast()
+  const { sites, loading, loadSites, createSite, updateSite, deleteSite } = useSites()
+  const { uploadDocuments, deleteDocument, loadDocumentsBySite } = useDocuments()
+  const { confirm: confirmDialog } = useConfirm()
+
+  const showAddSiteModal = ref(false)
+  const showEditSiteModal = ref(false)
+
+  const siteBeingEdited = ref<SiteWithDocuments | null>(null)
+
+  const newSite = reactive<SiteForm>({
+    name: '',
+    color: '',
+    contactName: '',
+    contactPhone: '',
+    contactAddress: '',
+    contactPostalCode: '',
+    contactCity: ''
+  })
+
+  const editSiteForm = reactive<SiteForm>({
+    name: '',
+    color: '',
+    contactName: '',
+    contactPhone: '',
+    contactAddress: '',
+    contactPostalCode: '',
+    contactCity: ''
+  })
+
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const previewDocument = ref<SiteDocument | null>(null)
+  const previewVisible = ref(false)
+
+  const siteDocuments = computed(() => siteBeingEdited.value?.documents || [])
+  const documentIcon = (doc: SiteDocument) =>
+    getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
+
+  const resetNewSite = () => {
+    newSite.name = ''
+    newSite.color = ''
+    newSite.contactName = ''
+    newSite.contactPhone = ''
+    newSite.contactAddress = ''
+    newSite.contactPostalCode = ''
+    newSite.contactCity = ''
+  }
+
+  const closeCreateModal = () => {
+    showAddSiteModal.value = false
+    resetNewSite()
+  }
+
+  const openCreateSiteModal = () => {
+    resetNewSite()
+    showAddSiteModal.value = true
+  }
+
+  const handleCreateSite = async () => {
+    const result = await createSite({
+      name: newSite.name,
+      color: newSite.color,
+      contactName: newSite.contactName,
+      contactPhone: newSite.contactPhone,
+      contactAddress: newSite.contactAddress,
+      contactPostalCode: newSite.contactPostalCode,
+      contactCity: newSite.contactCity
+    })
+
+    if (result.success) {
+      closeCreateModal()
+    }
+  }
+
+  const editSite = (site: SiteWithDocuments) => {
+    siteBeingEdited.value = site
+    editSiteForm.name = site.name || ''
+    editSiteForm.color = site.color || ''
+    editSiteForm.contactName = site.contactName || ''
+    editSiteForm.contactPhone = site.contactPhone || ''
+    editSiteForm.contactAddress = site.contactAddress || ''
+    editSiteForm.contactPostalCode = site.contactPostalCode || ''
+    editSiteForm.contactCity = site.contactCity || ''
+    selectedFiles.value = []
+    refreshSiteDocuments(site.id)
+    showEditSiteModal.value = true
+  }
+
+  const closeEditModal = () => {
+    showEditSiteModal.value = false
+    siteBeingEdited.value = null
+    selectedFiles.value = []
+  }
+
+  const updateSiteInCollection = (id: string, updated: Partial<SiteWithDocuments>) => {
+    const index = sites.value.findIndex(site => site.id === id)
+    if (index !== -1) {
+      sites.value[index] = {
+        ...sites.value[index],
+        ...updated,
+        id,
+      }
+    }
+  }
+
+  const handleUpdateSite = async () => {
+    if (!siteBeingEdited.value) return
+
+    const baseUpdate = {
+      name: editSiteForm.name,
+      color: editSiteForm.color,
+      contactName: editSiteForm.contactName,
+      contactPhone: editSiteForm.contactPhone,
+      contactAddress: editSiteForm.contactAddress,
+      contactPostalCode: editSiteForm.contactPostalCode,
+      contactCity: editSiteForm.contactCity
+    }
+
+    const result = await updateSite(siteBeingEdited.value.id, baseUpdate)
+
+    if (!result.success) return
+
+    let uploadedDocuments: SiteDocument[] = []
+    const existingDocuments = siteBeingEdited.value?.documents || []
+    if (selectedFiles.value.length) {
+      uploadingDocuments.value = true
+      const uploadResult = await uploadDocuments(
+        {
+          files: selectedFiles.value,
+          context: { siteId: siteBeingEdited.value.id }
+        },
+        { updateStore: false }
+      )
+      uploadingDocuments.value = false
+
+      if (uploadResult.success && uploadResult.data) {
+        const data = uploadResult.data
+        uploadedDocuments = (Array.isArray(data) ? data : [data]) as SiteDocument[]
+        selectedFiles.value = []
+      }
+    }
+
+    if (uploadedDocuments.length) {
+      const mergedDocuments = [...uploadedDocuments, ...existingDocuments]
+      if (siteBeingEdited.value) {
+        siteBeingEdited.value.documents = mergedDocuments
+      }
+      updateSiteInCollection(siteBeingEdited.value.id, {
+        ...baseUpdate,
+        documents: mergedDocuments
+      })
+    } else {
+      updateSiteInCollection(siteBeingEdited.value.id, baseUpdate)
+    }
+
+    closeEditModal()
+  }
+
+  const handleRemoveSiteDocument = async (documentId: string) => {
+    if (!documentId) return
+
+    const result = await deleteDocument(documentId, { updateStore: false })
+    if (!result.success) return
+
+    if (siteBeingEdited.value) {
+      siteBeingEdited.value.documents = (siteBeingEdited.value.documents || []).filter(
+        doc => doc.id !== documentId
+      )
+      updateSiteInCollection(siteBeingEdited.value.id, {
+        documents: siteBeingEdited.value.documents
+      })
+    }
+  }
+
+  const downloadDocument = (doc: SiteDocument) => {
+    if (doc?.downloadUrl) {
+      window.open(doc.downloadUrl, '_blank')
+      return
+    }
+
+    const url = doc?.fileUrl || doc?.path
+    if (!url) return
+
+    if (url.startsWith('data:')) {
+      const link = document.createElement('a')
+      link.href = url
+      link.download = doc.filename || doc.name || 'document'
+      link.click()
+      return
+    }
+
+    window.open(url, '_blank')
+  }
+
+  const openPreview = (doc: SiteDocument) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  const refreshSiteDocuments = async (siteId: string) => {
+    if (!siteId) return
+    const result = await loadDocumentsBySite(siteId, { updateStore: false })
+    if (result.success && siteBeingEdited.value && siteBeingEdited.value.id === siteId) {
+      const cloned = Array.isArray(result.data) ? [...result.data] : []
+      siteBeingEdited.value.documents = cloned
+      updateSiteInCollection(siteId, { documents: cloned })
+    }
+  }
+
+  const formatSize = (size?: number | null) => {
+    if (size === undefined || size === null) return '—'
+    if (size === 0) return '0 B'
+    const units = ['B', 'KB', 'MB', 'GB']
+    const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+    const formatted = size / Math.pow(1024, index)
+    return `${formatted.toFixed(1)} ${units[index]}`
+  }
+
+  const confirmDeleteSite = async (site: SiteWithDocuments) => {
+    if (
+      !await confirmDialog({
+        message: `Êtes-vous sûr de vouloir supprimer le site "${site.name}" ? Cette action est irréversible.`,
+      })
+    ) {
+      return
+    }
+
+    try {
+      const result = await deleteSite(site.id)
+      if (result.success) {
+        showSuccess(`Site "${site.name}" supprimé avec succès`)
+      } else {
+        showError(`Impossible de supprimer le site : ${humanizeError(result.error)}`)
+      }
+    } catch (error: any) {
+      showError(`Impossible de supprimer le site : ${humanizeError(error.message)}`)
+    }
+  }
+
+  onMounted(async () => {
+    await loadSites()
+  })
+
+  watch(
+    () => route.query.add,
+    async (shouldOpen) => {
+      if (shouldOpen === 'true') {
+        openCreateSiteModal()
+        await navigateTo('/sites', { replace: true })
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    sites,
+    loading,
+    showAddSiteModal,
+    showEditSiteModal,
+    siteBeingEdited,
+    newSite,
+    editSiteForm,
+    selectedFiles,
+    uploadingDocuments,
+    previewDocument,
+    previewVisible,
+    siteDocuments,
+    documentIcon,
+    openCreateSiteModal,
+    closeCreateModal,
+    handleCreateSite,
+    editSite,
+    handleUpdateSite,
+    closeEditModal,
+    handleRemoveSiteDocument,
+    downloadDocument,
+    openPreview,
+    closePreview,
+    refreshSiteDocuments,
+    formatSize,
+    confirmDeleteSite,
+    canPreviewDocument
+  }
+}
diff --git a/frontend/app/composables/useSites.ts b/frontend/app/composables/useSites.ts
new file mode 100644
index 0000000..cbe0dbc
--- /dev/null
+++ b/frontend/app/composables/useSites.ts
@@ -0,0 +1,124 @@
+import { ref } from 'vue'
+import { useToast } from './useToast'
+import { useApi } from './useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Site {
+  id: string
+  name?: string
+  color?: string
+  contactName?: string
+  contactPhone?: string
+  contactAddress?: string
+  contactPostalCode?: string
+  contactCity?: string
+  machines?: unknown[]
+  documents?: unknown[]
+  [key: string]: unknown
+}
+
+interface SiteResult {
+  success: boolean
+  data?: Site
+  error?: string
+}
+
+const sites = ref<Site[]>([])
+const loading = ref(false)
+const loaded = ref(false)
+
+export function useSites() {
+  const { showSuccess } = useToast()
+  const { get, post, patch, delete: del } = useApi()
+
+  const loadSites = async (options: { force?: boolean } = {}): Promise<void> => {
+    if (!options.force && loaded.value) return
+    loading.value = true
+    try {
+      const result = await get('/sites')
+      if (result.success) {
+        const collection = extractCollection(result.data)
+        sites.value = collection
+        loaded.value = true
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des sites:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createSite = async (siteData: Partial<Site>): Promise<SiteResult> => {
+    loading.value = true
+    try {
+      const result = await post('/sites', siteData)
+      if (result.success && result.data) {
+        sites.value.push(result.data as Site)
+        showSuccess(`Site "${siteData.name}" créé avec succès`)
+      }
+      return result as SiteResult
+    } catch (error) {
+      console.error('Erreur lors de la création du site:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateSite = async (id: string, siteData: Partial<Site>): Promise<SiteResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/sites/${id}`, siteData)
+      if (result.success && result.data) {
+        const index = sites.value.findIndex((site) => site.id === id)
+        if (index !== -1) {
+          sites.value[index] = result.data as Site
+        }
+        showSuccess(`Site "${siteData.name}" mis à jour avec succès`)
+      }
+      return result as SiteResult
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour du site:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteSite = async (id: string): Promise<SiteResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/sites/${id}`)
+      if (result.success) {
+        const deletedSite = sites.value.find((site) => site.id === id)
+        sites.value = sites.value.filter((site) => site.id !== id)
+        showSuccess(`Site "${deletedSite?.name || 'inconnu'}" supprimé avec succès`)
+      }
+      return result as SiteResult
+    } catch (error) {
+      console.error('Erreur lors de la suppression du site:', error)
+      return { success: false, error: (error as Error).message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const getSiteById = (id: string): Site | undefined => {
+    return sites.value.find((site) => site.id === id)
+  }
+
+  const getSites = () => sites.value
+  const isLoading = () => loading.value
+
+  return {
+    sites,
+    loading,
+    loadSites,
+    createSite,
+    updateSite,
+    deleteSite,
+    getSiteById,
+    getSites,
+    isLoading,
+  }
+}
diff --git a/frontend/app/composables/useStructureAssignmentFetch.ts b/frontend/app/composables/useStructureAssignmentFetch.ts
new file mode 100644
index 0000000..a1be483
--- /dev/null
+++ b/frontend/app/composables/useStructureAssignmentFetch.ts
@@ -0,0 +1,380 @@
+import { computed, ref, watch } from 'vue'
+import { useApi } from '~/composables/useApi'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+import {
+  componentOptionDescription,
+  componentOptionLabel,
+  describePieceRequirement as _describePieceRequirement,
+  describeProductRequirement as _describeProductRequirement,
+  pieceOptionDescription,
+  pieceOptionLabel,
+  productOptionDescription,
+  productOptionLabel,
+} from '~/shared/utils/structureAssignmentLabels'
+import type {
+  ComponentOption,
+  PieceOption,
+  ProductOption,
+  StructureAssignmentNode,
+  StructurePieceAssignment,
+  StructureProductAssignment,
+} from '~/shared/utils/structureAssignmentLabels'
+
+export type {
+  ComponentOption,
+  PieceOption,
+  ProductOption,
+  StructureAssignmentNode,
+  StructurePieceAssignment,
+  StructureProductAssignment,
+} from '~/shared/utils/structureAssignmentLabels'
+
+export interface StructureAssignmentFetchDeps {
+  assignment: StructureAssignmentNode
+  pieces: PieceOption[] | null
+  products: ProductOption[] | null
+  components: ComponentOption[] | null
+  isRoot: () => boolean
+  pieceTypeLabelMap: Record<string, string>
+  productTypeLabelMap: Record<string, string>
+  componentTypeLabelMap: Record<string, string>
+}
+
+export function useStructureAssignmentFetch(deps: StructureAssignmentFetchDeps) {
+  const { get } = useApi()
+
+  const pieceOptionsByPath = ref<Record<string, PieceOption[]>>({})
+  const productOptionsByPath = ref<Record<string, ProductOption[]>>({})
+  const componentOptionsByPath = ref<Record<string, ComponentOption[]>>({})
+  const pieceLoadingByPath = ref<Record<string, boolean>>({})
+  const productLoadingByPath = ref<Record<string, boolean>>({})
+  const componentLoadingByPath = ref<Record<string, boolean>>({})
+
+  const setLoading = (target: Record<string, boolean>, key: string, value: boolean) => {
+    target[key] = value
+  }
+
+  const typeIri = (id: string) => `/api/model_types/${id}`
+  const primedPiecePaths = new Set<string>()
+  const primedProductPaths = new Set<string>()
+  const primedComponentPaths = new Set<string>()
+
+  // --- Component options ---
+
+  const componentOptions = computed(() => {
+    if (deps.isRoot()) {
+      return []
+    }
+    const cached = componentOptionsByPath.value[deps.assignment.path]
+    if (cached) {
+      return cached
+    }
+    const definition = deps.assignment.definition || {}
+    const requiredTypeId =
+      definition.typeComposantId || definition.modelId || null
+    const requiredFamilyCode = definition.familyCode || null
+
+    return (deps.components || []).filter((component) => {
+      if (!component || typeof component !== 'object') {
+        return false
+      }
+      if (requiredTypeId) {
+        return component.typeComposantId === requiredTypeId
+      }
+      if (requiredFamilyCode) {
+        return (
+          component.typeComposant?.code === requiredFamilyCode
+          || component.typeComposantId === requiredFamilyCode
+        )
+      }
+      return true
+    })
+  })
+
+  const fetchComponentOptions = async (term = '') => {
+    if (deps.isRoot()) {
+      return
+    }
+    const key = deps.assignment.path
+    if (componentLoadingByPath.value[key]) {
+      return
+    }
+
+    const definition = deps.assignment.definition || {}
+    const requiredTypeId =
+      definition.typeComposantId || definition.modelId || definition.typeComposant?.id || null
+
+    const params = new URLSearchParams()
+    params.set('itemsPerPage', '200')
+    if (term.trim()) {
+      params.set('search', term.trim())
+    }
+    if (requiredTypeId) {
+      params.set('typeComposant', typeIri(requiredTypeId))
+    }
+
+    setLoading(componentLoadingByPath.value, key, true)
+    try {
+      const result = await get(`/composants?${params.toString()}`)
+      if (result.success) {
+        componentOptionsByPath.value[key] = extractCollection(result.data)
+      }
+    }
+    finally {
+      setLoading(componentLoadingByPath.value, key, false)
+    }
+  }
+
+  // --- Piece options ---
+
+  const getPieceOptions = (assignment: StructurePieceAssignment) => {
+    const cached = pieceOptionsByPath.value[assignment.path]
+    if (cached) {
+      return cached
+    }
+    const definition = assignment.definition
+    const requiredTypeId =
+      definition.typePieceId
+      || definition.typePiece?.id
+      || definition.familyCode
+      || null
+
+    return (deps.pieces || []).filter((piece) => {
+      if (!piece || typeof piece !== 'object') {
+        return false
+      }
+      if (!requiredTypeId) {
+        return true
+      }
+      if (definition.typePieceId || definition.typePiece?.id) {
+        return (
+          piece.typePieceId === requiredTypeId
+          || piece.typePiece?.id === requiredTypeId
+        )
+      }
+      if (definition.familyCode) {
+        return (
+          piece.typePiece?.code === requiredTypeId
+          || piece.typePieceId === requiredTypeId
+        )
+      }
+      return false
+    })
+  }
+
+  const fetchPieceOptions = async (assignment: StructurePieceAssignment, term = '') => {
+    const key = assignment.path
+    if (pieceLoadingByPath.value[key]) {
+      return
+    }
+
+    const definition = assignment.definition || {}
+    const requiredTypeId =
+      definition.typePieceId || definition.typePiece?.id || null
+
+    const params = new URLSearchParams()
+    params.set('itemsPerPage', '200')
+    if (term.trim()) {
+      params.set('search', term.trim())
+    }
+    if (requiredTypeId) {
+      params.set('typePiece', typeIri(requiredTypeId))
+    }
+
+    setLoading(pieceLoadingByPath.value, key, true)
+    try {
+      const result = await get(`/pieces?${params.toString()}`)
+      if (result.success) {
+        pieceOptionsByPath.value[key] = extractCollection(result.data)
+      }
+    }
+    finally {
+      setLoading(pieceLoadingByPath.value, key, false)
+    }
+  }
+
+  const describePieceRequirement = (assignment: StructurePieceAssignment) => {
+    const options = getPieceOptions(assignment)
+    return _describePieceRequirement(assignment, options, deps.pieceTypeLabelMap)
+  }
+
+  // --- Product options ---
+
+  const getProductOptions = (assignment: StructureProductAssignment) => {
+    const cached = productOptionsByPath.value[assignment.path]
+    if (cached) {
+      return cached
+    }
+    const definition = assignment.definition
+    const requiredTypeId =
+      definition.typeProductId
+      || definition.typeProduct?.id
+      || definition.familyCode
+      || null
+
+    return (deps.products || []).filter((product) => {
+      if (!product || typeof product !== 'object') {
+        return false
+      }
+      if (!requiredTypeId) {
+        return true
+      }
+      if (definition.typeProductId || definition.typeProduct?.id) {
+        return (
+          product.typeProductId === requiredTypeId
+          || product.typeProduct?.id === requiredTypeId
+        )
+      }
+      if (definition.familyCode) {
+        return (
+          product.typeProduct?.code === requiredTypeId
+          || product.typeProductId === requiredTypeId
+        )
+      }
+      return false
+    })
+  }
+
+  const fetchProductOptions = async (assignment: StructureProductAssignment, term = '') => {
+    const key = assignment.path
+    if (productLoadingByPath.value[key]) {
+      return
+    }
+
+    const definition = assignment.definition || {}
+    const requiredTypeId =
+      definition.typeProductId || definition.typeProduct?.id || null
+
+    const params = new URLSearchParams()
+    params.set('itemsPerPage', '200')
+    if (term.trim()) {
+      params.set('search', term.trim())
+    }
+    if (requiredTypeId) {
+      params.set('typeProduct', typeIri(requiredTypeId))
+    }
+
+    setLoading(productLoadingByPath.value, key, true)
+    try {
+      const result = await get(`/products?${params.toString()}`)
+      if (result.success) {
+        productOptionsByPath.value[key] = extractCollection(result.data)
+      }
+    }
+    finally {
+      setLoading(productLoadingByPath.value, key, false)
+    }
+  }
+
+  const describeProductRequirement = (assignment: StructureProductAssignment) => {
+    const options = getProductOptions(assignment)
+    return _describeProductRequirement(assignment, options, deps.productTypeLabelMap)
+  }
+
+  // --- Watchers ---
+
+  watch(
+    componentOptions,
+    (options) => {
+      if (deps.isRoot()) {
+        return
+      }
+      // Only clear if we have loaded options (cache or catalog); skip when options are empty
+      // because the fetch may not have completed yet.
+      if (!options.length) {
+        return
+      }
+      const hasMatch = options.some(
+        (component) => component.id === deps.assignment.selectedComponentId,
+      )
+      if (!hasMatch) {
+        deps.assignment.selectedComponentId = ''
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => [deps.pieces, deps.assignment.pieces],
+    () => {
+      for (const pieceAssignment of deps.assignment.pieces) {
+        const hasCachedOptions = !!pieceOptionsByPath.value[pieceAssignment.path]
+        // Only clear selections when we have loaded options (cached or from catalog).
+        // When no cache exists, a fetch is about to fire — clearing now would lose
+        // user input before the real option list arrives.
+        if (hasCachedOptions) {
+          const options = getPieceOptions(pieceAssignment)
+          if (
+            pieceAssignment.selectedPieceId
+            && !options.some((piece) => piece.id === pieceAssignment.selectedPieceId)
+          ) {
+            pieceAssignment.selectedPieceId = ''
+          }
+        }
+        if (!primedPiecePaths.has(pieceAssignment.path) && !pieceOptionsByPath.value[pieceAssignment.path]) {
+          primedPiecePaths.add(pieceAssignment.path)
+          fetchPieceOptions(pieceAssignment).catch(() => {})
+        }
+      }
+    },
+    { deep: true, immediate: true },
+  )
+
+  watch(
+    () => [deps.products, deps.assignment.products],
+    () => {
+      for (const productAssignment of deps.assignment.products) {
+        const hasCachedOptions = !!productOptionsByPath.value[productAssignment.path]
+        if (hasCachedOptions) {
+          const options = getProductOptions(productAssignment)
+          if (
+            productAssignment.selectedProductId
+            && !options.some((product) => product.id === productAssignment.selectedProductId)
+          ) {
+            productAssignment.selectedProductId = ''
+          }
+        }
+        if (!primedProductPaths.has(productAssignment.path) && !productOptionsByPath.value[productAssignment.path]) {
+          primedProductPaths.add(productAssignment.path)
+          fetchProductOptions(productAssignment).catch(() => {})
+        }
+      }
+    },
+    { deep: true, immediate: true },
+  )
+
+  watch(
+    () => deps.assignment.definition,
+    () => {
+      if (deps.isRoot()) {
+        return
+      }
+      const key = deps.assignment.path
+      if (!primedComponentPaths.has(key) && !componentOptionsByPath.value[key]) {
+        primedComponentPaths.add(key)
+        fetchComponentOptions().catch(() => {})
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    pieceLoadingByPath,
+    productLoadingByPath,
+    componentLoadingByPath,
+    componentOptions,
+    componentOptionLabel,
+    componentOptionDescription,
+    fetchComponentOptions,
+    getPieceOptions,
+    pieceOptionLabel,
+    pieceOptionDescription,
+    fetchPieceOptions,
+    describePieceRequirement,
+    getProductOptions,
+    productOptionLabel,
+    productOptionDescription,
+    fetchProductOptions,
+    describeProductRequirement,
+  }
+}
diff --git a/frontend/app/composables/useStructureNodeCrud.ts b/frontend/app/composables/useStructureNodeCrud.ts
new file mode 100644
index 0000000..ddf16d6
--- /dev/null
+++ b/frontend/app/composables/useStructureNodeCrud.ts
@@ -0,0 +1,161 @@
+import type { EditableStructureNode } from '~/composables/useStructureNodeLogic'
+
+export interface StructureNodeCrudDeps {
+  node: EditableStructureNode
+  canManageSubcomponents: () => boolean
+}
+
+export function useStructureNodeCrud(props: StructureNodeCrudDeps) {
+  // --- Helpers ---
+  const ensureArray = (key: 'customFields' | 'pieces' | 'products' | 'subcomponents') => {
+    if (!Array.isArray((props.node as any)[key])) {
+      if (key === 'subcomponents') {
+        props.node.subcomponents = []
+      } else if (key === 'products') {
+        props.node.products = []
+      } else {
+        (props.node as any)[key] = []
+      }
+    }
+  }
+
+  // --- Custom field reindex ---
+  const reindexCustomFields = () => {
+    if (!Array.isArray(props.node.customFields)) {
+      return
+    }
+    props.node.customFields.forEach((field: any, index: number) => {
+      if (!field || typeof field !== 'object') {
+        return
+      }
+      field.orderIndex = index
+    })
+  }
+
+  // --- Drag reorder ---
+  const customFieldDrag = useDragReorder(
+    () => props.node.customFields,
+    { onReorder: reindexCustomFields },
+  )
+
+  const pieceDrag = useDragReorder(() => props.node.pieces)
+  const productDrag = useDragReorder(() => props.node.products)
+  const subcomponentDrag = useDragReorder(
+    () => props.node.subcomponents,
+    { draggingClass: 'ring-2 ring-primary', dropTargetClass: 'ring-2 ring-primary/70' },
+  )
+
+  // --- CRUD functions ---
+  const addCustomField = () => {
+    ensureArray('customFields')
+    const fields = props.node.customFields!
+    const nextIndex = fields.length
+    fields.push({
+      name: '',
+      type: 'text',
+      required: false,
+      optionsText: '',
+      options: [],
+      orderIndex: nextIndex,
+    })
+    reindexCustomFields()
+  }
+
+  const removeCustomField = (index: number) => {
+    if (!Array.isArray(props.node.customFields)) return
+    props.node.customFields.splice(index, 1)
+    reindexCustomFields()
+  }
+
+  const addPiece = () => {
+    ensureArray('pieces')
+    props.node.pieces!.push({
+      typePieceId: '',
+      typePieceLabel: '',
+      reference: '',
+      familyCode: '',
+      role: '',
+      quantity: 1,
+    })
+  }
+
+  const removePiece = (index: number) => {
+    if (!Array.isArray(props.node.pieces)) return
+    props.node.pieces.splice(index, 1)
+  }
+
+  const addProduct = () => {
+    ensureArray('products')
+    props.node.products!.push({
+      typeProductId: '',
+      typeProductLabel: '',
+      familyCode: '',
+    })
+  }
+
+  const removeProduct = (index: number) => {
+    if (!Array.isArray(props.node.products)) return
+    props.node.products.splice(index, 1)
+  }
+
+  const addSubComponent = () => {
+    if (!props.canManageSubcomponents()) {
+      return
+    }
+    ensureArray('subcomponents')
+    props.node.subcomponents.push({
+      typeComposantId: '',
+      typeComposantLabel: '',
+      modelId: '',
+      familyCode: '',
+      alias: '',
+      subcomponents: [],
+    })
+  }
+
+  const removeSubComponent = (index: number) => {
+    if (!Array.isArray(props.node.subcomponents)) return
+    props.node.subcomponents.splice(index, 1)
+  }
+
+  return {
+    // Helpers exposed for watchers
+    reindexCustomFields,
+    // CRUD
+    addCustomField,
+    removeCustomField,
+    addPiece,
+    removePiece,
+    addProduct,
+    removeProduct,
+    addSubComponent,
+    removeSubComponent,
+    // Drag reorder — custom fields
+    onCustomFieldDragStart: customFieldDrag.onDragStart,
+    onCustomFieldDragEnter: customFieldDrag.onDragEnter,
+    onCustomFieldDrop: customFieldDrag.onDrop,
+    onCustomFieldDragEnd: customFieldDrag.onDragEnd,
+    customFieldReorderClass: customFieldDrag.reorderClass,
+    // Drag reorder — pieces
+    onPieceDragStart: pieceDrag.onDragStart,
+    onPieceDragEnter: pieceDrag.onDragEnter,
+    onPieceDragOver: pieceDrag.onDragOver,
+    onPieceDrop: pieceDrag.onDrop,
+    onPieceDragEnd: pieceDrag.onDragEnd,
+    pieceReorderClass: pieceDrag.reorderClass,
+    // Drag reorder — products
+    onProductDragStart: productDrag.onDragStart,
+    onProductDragEnter: productDrag.onDragEnter,
+    onProductDragOver: productDrag.onDragOver,
+    onProductDrop: productDrag.onDrop,
+    onProductDragEnd: productDrag.onDragEnd,
+    productReorderClass: productDrag.reorderClass,
+    // Drag reorder — subcomponents
+    onSubcomponentDragStart: subcomponentDrag.onDragStart,
+    onSubcomponentDragEnter: subcomponentDrag.onDragEnter,
+    onSubcomponentDragOver: subcomponentDrag.onDragOver,
+    onSubcomponentDrop: subcomponentDrag.onDrop,
+    onSubcomponentDragEnd: subcomponentDrag.onDragEnd,
+    subcomponentReorderClass: subcomponentDrag.reorderClass,
+  }
+}
diff --git a/frontend/app/composables/useStructureNodeLogic.ts b/frontend/app/composables/useStructureNodeLogic.ts
new file mode 100644
index 0000000..89bb7f3
--- /dev/null
+++ b/frontend/app/composables/useStructureNodeLogic.ts
@@ -0,0 +1,453 @@
+import { computed, watch } from 'vue'
+import type { ComponentModelPiece, ComponentModelProduct, ComponentModelStructureNode } from '~/shared/types/inventory'
+import { useStructureNodeCrud } from '~/composables/useStructureNodeCrud'
+
+export type ModelTypeOption = {
+  id: string
+  name: string
+  code?: string | null
+}
+
+export type EditableStructureNode = ComponentModelStructureNode & {
+  customFields?: any[]
+  pieces?: ComponentModelPiece[]
+  products?: ComponentModelProduct[]
+}
+
+export interface StructureNodeLogicDeps {
+  node: EditableStructureNode
+  depth: number
+  componentTypes: ModelTypeOption[]
+  pieceTypes: ModelTypeOption[]
+  productTypes: ModelTypeOption[]
+  isRoot: boolean
+  lockType: boolean
+  lockedTypeLabel: string
+  allowSubcomponents: boolean
+  maxSubcomponentDepth: number
+  isLocked: boolean
+}
+
+export function useStructureNodeLogic(props: StructureNodeLogicDeps) {
+  // --- Computed props ---
+  const isLocked = computed(() => props.isLocked === true)
+
+  const componentTypes = computed(() => props.componentTypes ?? [])
+  const pieceTypes = computed(() => props.pieceTypes ?? [])
+  const productTypes = computed(() => props.productTypes ?? [])
+  const allowSubcomponents = computed(() => props.allowSubcomponents !== false)
+  const maxSubcomponentDepth = computed(() =>
+    typeof props.maxSubcomponentDepth === 'number' ? props.maxSubcomponentDepth : Infinity,
+  )
+  const currentDepth = computed(() => Math.max(0, props.depth ?? 0))
+  const canManageSubcomponents = computed(
+    () => allowSubcomponents.value && currentDepth.value < maxSubcomponentDepth.value,
+  )
+  const childAllowSubcomponents = computed(
+    () => allowSubcomponents.value && currentDepth.value + 1 < maxSubcomponentDepth.value,
+  )
+  const hasSubcomponents = computed(
+    () => Array.isArray(props.node?.subcomponents) && props.node.subcomponents.length > 0,
+  )
+
+  const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
+  const containerClass = computed(() => {
+    const level = currentDepth.value
+    const index = Math.min(level, depthClasses.length - 1)
+    return level === 0 ? 'space-y-4' : `${depthClasses[index]} space-y-4`
+  })
+
+  const headingClass = computed(() => (props.isRoot ? 'text-sm font-semibold' : 'text-xs font-semibold'))
+
+  // --- Type maps ---
+  const formatModelTypeOption = (type: ModelTypeOption | undefined | null) =>
+    type?.name ?? ''
+
+  const componentTypeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    componentTypes.value.forEach((type) => {
+      if (type && typeof type.id === 'string') {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  const componentTypeCodeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    componentTypes.value.forEach((type) => {
+      const code = typeof type?.code === 'string' ? type.code.trim() : ''
+      if (code) {
+        map.set(code, type)
+      }
+    })
+    return map
+  })
+
+  const pieceTypeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    pieceTypes.value.forEach((type) => {
+      if (type && typeof type.id === 'string') {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  const productTypeMap = computed(() => {
+    const map = new Map<string, ModelTypeOption>()
+    productTypes.value.forEach((type) => {
+      if (type && typeof type.id === 'string') {
+        map.set(type.id, type)
+      }
+    })
+    return map
+  })
+
+  // --- Label getters ---
+  const getComponentTypeLabel = (id?: string) => {
+    if (!id) return ''
+    return formatModelTypeOption(componentTypeMap.value.get(id))
+  }
+
+  const getPieceTypeLabel = (id?: string) => {
+    if (!id) return ''
+    return formatModelTypeOption(pieceTypeMap.value.get(id))
+  }
+
+  const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) =>
+    formatModelTypeOption(type)
+
+  const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) =>
+    formatModelTypeOption(type)
+
+  const formatProductTypeOption = (type: ModelTypeOption | undefined | null) =>
+    formatModelTypeOption(type)
+
+  const lockedTypeDisplay = computed(() => {
+    if (props.lockedTypeLabel) {
+      return props.lockedTypeLabel
+    }
+    return getComponentTypeLabel(props.node?.typeComposantId) || 'Famille non définie'
+  })
+
+  // --- Sync functions ---
+  const syncComponentType = (component: EditableStructureNode) => {
+    if (!component) {
+      return
+    }
+    if (props.isRoot) {
+      component.typeComposantId = ''
+      component.typeComposantLabel = ''
+      component.familyCode = ''
+      if (component.alias) {
+        component.alias = ''
+      }
+      return
+    }
+    const id = typeof component.typeComposantId === 'string'
+      ? component.typeComposantId
+      : ''
+
+    if (!id) {
+      const code =
+        typeof component.familyCode === 'string' && component.familyCode
+          ? component.familyCode
+          : ''
+      if (code) {
+        const codeMatch = componentTypeCodeMap.value.get(code)
+        if (codeMatch?.id) {
+          component.typeComposantId = codeMatch.id
+          component.typeComposantLabel = formatModelTypeOption(codeMatch)
+          component.familyCode = codeMatch.code ?? component.familyCode
+          if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
+            component.alias = codeMatch.name || component.typeComposantLabel
+          }
+          return
+        }
+      }
+      component.typeComposantLabel = ''
+      component.familyCode = ''
+      return
+    }
+
+    const option = componentTypeMap.value.get(id)
+    if (!option) {
+      component.typeComposantLabel = ''
+      component.familyCode = ''
+      return
+    }
+
+    component.typeComposantLabel = formatModelTypeOption(option)
+    component.familyCode = option.code ?? component.familyCode
+    if (!component.alias || component.alias === '' || component.alias === lockedTypeDisplay.value) {
+      component.alias = option.name || component.typeComposantLabel
+    }
+  }
+
+  const updatePieceTypeLabel = (piece: ComponentModelPiece & Record<string, any>) => {
+    if (!piece) return
+
+    if (piece.typePieceId) {
+      const option = pieceTypeMap.value.get(piece.typePieceId)
+      if (option) {
+        piece.typePieceLabel = formatPieceTypeOption(option)
+        return
+      }
+    }
+
+    if (piece.typePieceLabel) {
+      const normalized = piece.typePieceLabel.trim().toLowerCase()
+      if (normalized) {
+        const match = pieceTypes.value.find((type) => {
+          const formatted = formatPieceTypeOption(type).toLowerCase()
+          const name = (type?.name ?? '').toLowerCase()
+          const code = (type?.code ?? '').toLowerCase()
+          return formatted === normalized || name === normalized || (!!code && code === normalized)
+        })
+        if (match) {
+          piece.typePieceId = match.id
+          piece.typePieceLabel = formatPieceTypeOption(match)
+          return
+        }
+      }
+    }
+  }
+
+  const updateProductTypeLabel = (product: ComponentModelProduct & Record<string, any>) => {
+    if (!product) return
+
+    if (product.typeProductId) {
+      const option = productTypeMap.value.get(product.typeProductId)
+      if (option) {
+        product.typeProductLabel = formatProductTypeOption(option)
+        product.familyCode = option.code ?? product.familyCode ?? ''
+        return
+      }
+    }
+
+    if (product.typeProductLabel) {
+      const normalized = product.typeProductLabel.trim().toLowerCase()
+      if (normalized) {
+        const match = productTypes.value.find((type) => {
+          const formatted = formatProductTypeOption(type).toLowerCase()
+          const name = (type?.name ?? '').toLowerCase()
+          const code = (type?.code ?? '').toLowerCase()
+          return formatted === normalized || name === normalized || (!!code && code === normalized)
+        })
+        if (match) {
+          product.typeProductId = match.id
+          product.typeProductLabel = formatProductTypeOption(match)
+          product.familyCode = match.code ?? product.familyCode ?? ''
+          return
+        }
+      }
+    }
+  }
+
+  const syncPieceLabels = (pieces?: any[]) => {
+    if (!Array.isArray(pieces)) {
+      return
+    }
+    pieces.forEach((piece) => {
+      updatePieceTypeLabel(piece)
+    })
+  }
+
+  const syncProductLabels = (products?: any[]) => {
+    if (!Array.isArray(products)) {
+      return
+    }
+    products.forEach((product) => {
+      updateProductTypeLabel(product)
+    })
+  }
+
+  // --- Handler functions ---
+  const handleComponentTypeSelect = (component: any) => {
+    syncComponentType(component)
+  }
+
+  const handlePieceTypeSelect = (piece: ComponentModelPiece & Record<string, any>) => {
+    if (!piece) {
+      return
+    }
+    const id = typeof piece.typePieceId === 'string' ? piece.typePieceId : ''
+    if (!id) {
+      piece.typePieceLabel = ''
+      return
+    }
+    const option = pieceTypeMap.value.get(id)
+    if (!option) {
+      piece.typePieceId = ''
+      piece.typePieceLabel = ''
+      return
+    }
+    piece.typePieceLabel = formatPieceTypeOption(option)
+  }
+
+  const handleProductTypeSelect = (product: ComponentModelProduct & Record<string, any>) => {
+    if (!product) {
+      return
+    }
+    const id = typeof product.typeProductId === 'string' ? product.typeProductId : ''
+    if (!id) {
+      product.typeProductLabel = ''
+      return
+    }
+    const option = productTypeMap.value.get(id)
+    if (!option) {
+      product.typeProductId = ''
+      product.typeProductLabel = ''
+      return
+    }
+    product.typeProductLabel = formatProductTypeOption(option)
+    product.familyCode = option.code ?? product.familyCode ?? ''
+  }
+
+  // --- CRUD & Lock (delegated to useStructureNodeCrud) ---
+  const crud = useStructureNodeCrud({
+    node: props.node,
+    canManageSubcomponents: () => canManageSubcomponents.value,
+  })
+
+  // --- Watchers ---
+  watch(
+    canManageSubcomponents,
+    (allowed) => {
+      if (!allowed && Array.isArray(props.node.subcomponents) && props.node.subcomponents.length) {
+        props.node.subcomponents.splice(0, props.node.subcomponents.length)
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(componentTypes, () => {
+    syncComponentType(props.node)
+  }, { deep: true, immediate: true })
+
+  watch(
+    () => props.node.typeComposantId,
+    () => {
+      syncComponentType(props.node)
+    },
+  )
+
+  watch(pieceTypes, () => {
+    syncPieceLabels(props.node?.pieces)
+  }, { deep: true, immediate: true })
+
+  watch(
+    () => props.node.pieces,
+    (value) => {
+      syncPieceLabels(value)
+    },
+    { deep: true },
+  )
+
+  watch(productTypes, () => {
+    syncProductLabels(props.node?.products)
+  }, { deep: true, immediate: true })
+
+  watch(
+    () => props.node.products,
+    (value) => {
+      syncProductLabels(value)
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => props.node.customFields,
+    (value) => {
+      if (!Array.isArray(value)) {
+        return
+      }
+      value.sort((a: any, b: any) => {
+        const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
+        const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
+        return left - right
+      })
+      crud.reindexCustomFields()
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => [props.lockedTypeLabel, props.lockType],
+    () => {
+      if (props.lockType && props.isRoot) {
+        const label = props.lockedTypeLabel || lockedTypeDisplay.value
+        props.node.typeComposantLabel = label
+        if (label && (!props.node.alias || props.node.alias === lockedTypeDisplay.value)) {
+          props.node.alias = label
+        }
+        if (props.node.typeComposantId) {
+          const option = componentTypeMap.value.get(props.node.typeComposantId)
+          props.node.familyCode = option?.code ?? props.node.familyCode
+        }
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    // Computed state
+    isLocked,
+    componentTypes,
+    pieceTypes,
+    productTypes,
+    canManageSubcomponents,
+    childAllowSubcomponents,
+    hasSubcomponents,
+    containerClass,
+    headingClass,
+    lockedTypeDisplay,
+    // Label getters & formatters
+    getComponentTypeLabel,
+    getPieceTypeLabel,
+    formatComponentTypeOption,
+    formatPieceTypeOption,
+    formatProductTypeOption,
+    // Handlers
+    handleComponentTypeSelect,
+    handlePieceTypeSelect,
+    handleProductTypeSelect,
+    // CRUD
+    addCustomField: crud.addCustomField,
+    removeCustomField: crud.removeCustomField,
+    addPiece: crud.addPiece,
+    removePiece: crud.removePiece,
+    addProduct: crud.addProduct,
+    removeProduct: crud.removeProduct,
+    addSubComponent: crud.addSubComponent,
+    removeSubComponent: crud.removeSubComponent,
+    // Drag reorder — custom fields
+    onCustomFieldDragStart: crud.onCustomFieldDragStart,
+    onCustomFieldDragEnter: crud.onCustomFieldDragEnter,
+    onCustomFieldDrop: crud.onCustomFieldDrop,
+    onCustomFieldDragEnd: crud.onCustomFieldDragEnd,
+    customFieldReorderClass: crud.customFieldReorderClass,
+    // Drag reorder — pieces
+    onPieceDragStart: crud.onPieceDragStart,
+    onPieceDragEnter: crud.onPieceDragEnter,
+    onPieceDragOver: crud.onPieceDragOver,
+    onPieceDrop: crud.onPieceDrop,
+    onPieceDragEnd: crud.onPieceDragEnd,
+    pieceReorderClass: crud.pieceReorderClass,
+    // Drag reorder — products
+    onProductDragStart: crud.onProductDragStart,
+    onProductDragEnter: crud.onProductDragEnter,
+    onProductDragOver: crud.onProductDragOver,
+    onProductDrop: crud.onProductDrop,
+    onProductDragEnd: crud.onProductDragEnd,
+    productReorderClass: crud.productReorderClass,
+    // Drag reorder — subcomponents
+    onSubcomponentDragStart: crud.onSubcomponentDragStart,
+    onSubcomponentDragEnter: crud.onSubcomponentDragEnter,
+    onSubcomponentDragOver: crud.onSubcomponentDragOver,
+    onSubcomponentDrop: crud.onSubcomponentDrop,
+    onSubcomponentDragEnd: crud.onSubcomponentDragEnd,
+    subcomponentReorderClass: crud.subcomponentReorderClass,
+  }
+}
diff --git a/frontend/app/composables/useToast.ts b/frontend/app/composables/useToast.ts
new file mode 100644
index 0000000..89edb99
--- /dev/null
+++ b/frontend/app/composables/useToast.ts
@@ -0,0 +1,92 @@
+import { ref } from 'vue'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface Toast {
+  id: number
+  message: string
+  type: ToastType
+  visible: boolean
+}
+
+const toasts = ref<Toast[]>([])
+const MAX_TOASTS = 3
+let nextId = 1
+
+// Anti-doublon : ignore un toast identique affiché dans les 2 dernières secondes
+const recentMessages = new Map<string, number>()
+const DEDUP_WINDOW = 2000
+
+export function useToast() {
+  const showToast = (message: string, type: ToastType = 'info', duration = 3500): number => {
+    const dedupKey = `${type}::${message}`
+    const lastShown = recentMessages.get(dedupKey)
+    if (lastShown && Date.now() - lastShown < DEDUP_WINDOW) {
+      return -1
+    }
+    recentMessages.set(dedupKey, Date.now())
+
+    const id = nextId++
+    const toast: Toast = {
+      id,
+      message,
+      type,
+      visible: true,
+    }
+
+    if (toasts.value.length >= MAX_TOASTS) {
+      toasts.value.shift()
+    }
+
+    toasts.value.push(toast)
+
+    // Auto-remove after duration
+    setTimeout(() => {
+      removeToast(id)
+    }, duration)
+
+    return id
+  }
+
+  const showSuccess = (message: string, duration = 5000): number => {
+    return showToast(message, 'success', duration)
+  }
+
+  const showError = (message: string, duration = 5000): number => {
+    return showToast(message, 'error', duration)
+  }
+
+  const showWarning = (message: string, duration = 6000): number => {
+    return showToast(message, 'warning', duration)
+  }
+
+  const showInfo = (message: string, duration = 5000): number => {
+    return showToast(message, 'info', duration)
+  }
+
+  const removeToast = (id: number): void => {
+    const index = toasts.value.findIndex((toast) => toast.id === id)
+    if (index !== -1 && toasts.value[index]) {
+      toasts.value[index].visible = false
+      setTimeout(() => {
+        toasts.value.splice(index, 1)
+      }, 300) // Animation duration
+    }
+  }
+
+  const clearAll = (): void => {
+    toasts.value = []
+    recentMessages.clear()
+  }
+
+  return {
+    toasts,
+    showToast,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+    removeToast,
+    clearAll,
+  }
+}
diff --git a/frontend/app/composables/useUrlState.ts b/frontend/app/composables/useUrlState.ts
new file mode 100644
index 0000000..e221d5f
--- /dev/null
+++ b/frontend/app/composables/useUrlState.ts
@@ -0,0 +1,116 @@
+import { ref, watch, nextTick, type Ref } from 'vue'
+import { useRoute, useRouter } from '#imports'
+
+interface ParamDef<T extends string | number = string | number> {
+  default: T
+  type?: 'string' | 'number'
+  /** Debounce URL writes (ms). Default: 0 (immediate). */
+  debounce?: number
+}
+
+type ParamDefs = Record<string, ParamDef>
+
+type InferRef<D extends ParamDef> = D['default'] extends number ? Ref<number> : Ref<string>
+
+type StateRefs<T extends ParamDefs> = {
+  [K in keyof T]: InferRef<T[K]>
+}
+
+interface UseUrlStateOptions {
+  /** Called when state is restored from URL (back/forward navigation). */
+  onRestore?: () => void
+}
+
+export function useUrlState<T extends ParamDefs>(
+  params: T,
+  options?: UseUrlStateOptions,
+): StateRefs<T> {
+  const route = useRoute()
+  const router = useRouter()
+
+  const keys = Object.keys(params) as (keyof T & string)[]
+  const refs: Record<string, Ref<string | number>> = {}
+  const timers: Record<string, ReturnType<typeof setTimeout> | null> = {}
+
+  for (const key of keys) {
+    refs[key] = ref(parseValue(route.query[key], params[key]!))
+    timers[key] = null
+  }
+
+  let isProgrammatic = false
+
+  const buildQuery = (): Record<string, string> => {
+    const q: Record<string, string> = {}
+    for (const key of keys) {
+      const val = refs[key]!.value
+      if (val !== params[key]!.default) {
+        q[key] = String(val)
+      }
+    }
+    return q
+  }
+
+  const pushToUrl = () => {
+    if (isProgrammatic) return
+    isProgrammatic = true
+    const query = buildQuery()
+    router
+      .replace({ path: route.path, query })
+      .catch(() => {})
+      .finally(() => {
+        nextTick(() => {
+          isProgrammatic = false
+        })
+      })
+  }
+
+  for (const key of keys) {
+    const ms = params[key]!.debounce ?? 0
+    watch(refs[key]!, () => {
+      if (isProgrammatic) return
+      if (ms > 0) {
+        if (timers[key]) clearTimeout(timers[key]!)
+        timers[key] = setTimeout(pushToUrl, ms)
+      } else {
+        pushToUrl()
+      }
+    })
+  }
+
+  watch(
+    () => ({ ...route.query }),
+    (newQuery) => {
+      if (isProgrammatic) return
+      isProgrammatic = true
+      let changed = false
+      for (const key of keys) {
+        const parsed = parseValue(newQuery[key], params[key]!)
+        if (refs[key]!.value !== parsed) {
+          refs[key]!.value = parsed
+          changed = true
+        }
+      }
+      nextTick(() => {
+        isProgrammatic = false
+        if (changed && options?.onRestore) {
+          options.onRestore()
+        }
+      })
+    },
+  )
+
+  return refs as StateRefs<T>
+}
+
+function parseValue(
+  raw: unknown,
+  def: ParamDef,
+): string | number {
+  const str = typeof raw === 'string' ? raw : null
+  if (str === null) return def.default
+  if (def.type === 'number' || typeof def.default === 'number') {
+    const n = Number(str)
+    return Number.isFinite(n) ? n : def.default
+  }
+  return str
+}
diff --git a/frontend/app/middleware/profile.global.ts b/frontend/app/middleware/profile.global.ts
new file mode 100644
index 0000000..c6ab767
--- /dev/null
+++ b/frontend/app/middleware/profile.global.ts
@@ -0,0 +1,33 @@
+import { useProfileSession, usePermissions } from "#imports";
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const { ensureSession, activeProfile } = useProfileSession();
+  await ensureSession();
+
+  const rawPath = to?.path ?? "";
+  const normalizedPath = rawPath.startsWith("/") ? rawPath : `/${rawPath}`;
+  const fullPath = to?.fullPath ?? normalizedPath;
+  const routeName = typeof to?.name === "string" ? to.name : "";
+  const isProfilesRoute =
+    normalizedPath.startsWith("/profiles") ||
+    fullPath.startsWith("/profiles") ||
+    routeName.startsWith("profiles");
+
+  // Redirect to login if no active profile
+  if (!activeProfile.value && !isProfilesRoute) {
+    return navigateTo("/profiles");
+  }
+
+  // Permission checks
+  if (activeProfile.value) {
+    const { isAdmin } = usePermissions();
+
+    // Admin-only routes
+    if (normalizedPath.startsWith("/admin")) {
+      if (!isAdmin.value) {
+        return navigateTo("/");
+      }
+    }
+
+  }
+});
diff --git a/frontend/app/pages/activity-log.vue b/frontend/app/pages/activity-log.vue
new file mode 100644
index 0000000..d1b27d8
--- /dev/null
+++ b/frontend/app/pages/activity-log.vue
@@ -0,0 +1,234 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header>
+      <h1 class="text-3xl font-semibold text-base-content">Journal d'activité</h1>
+      <p class="text-sm text-gray-500">
+        Historique des modifications sur l'ensemble des pièces, produits et composants.
+      </p>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <DataTable
+          :columns="columns"
+          :rows="entries"
+          :loading="loading"
+          :pagination="paginationState"
+          :show-per-page="true"
+          :show-counter="true"
+          :expandable="true"
+          :expanded-keys="expandedIds"
+          :can-expand="canExpandRow"
+          row-key="id"
+          empty-message="Aucune activité enregistrée."
+          no-results-message="Aucune activité ne correspond à vos filtres."
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+          @toggle-expand="toggleExpanded"
+        >
+          <template #toolbar>
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="activity-entity-type"
+              >
+                Type
+              </label>
+              <select
+                id="activity-entity-type"
+                v-model="entityTypeFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="">Tous</option>
+                <option value="piece">Pièce</option>
+                <option value="product">Produit</option>
+                <option value="composant">Composant</option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="activity-action"
+              >
+                Action
+              </label>
+              <select
+                id="activity-action"
+                v-model="actionFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="">Toutes</option>
+                <option value="create">Création</option>
+                <option value="update">Modification</option>
+                <option value="delete">Suppression</option>
+              </select>
+            </div>
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            <span class="whitespace-nowrap">{{ formatHistoryDate(row.createdAt) }}</span>
+          </template>
+
+          <template #cell-action="{ row }">
+            <span
+              class="badge badge-sm"
+              :class="actionBadgeClass(row.action)"
+            >
+              {{ historyActionLabel(row.action) }}
+            </span>
+          </template>
+
+          <template #cell-entityType="{ row }">
+            <span class="badge badge-ghost badge-sm">
+              {{ entityTypeLabel(row.entityType) }}
+            </span>
+          </template>
+
+          <template #cell-entity="{ row }">
+            <NuxtLink
+              v-if="row.action !== 'delete'"
+              :to="entityEditLink(row)"
+              class="link link-hover link-primary"
+            >
+              {{ row.entityName || 'Sans nom' }}
+            </NuxtLink>
+            <span v-else class="text-base-content/50 line-through">
+              {{ row.entityName || 'Sans nom' }}
+            </span>
+            <span
+              v-if="row.entityRef"
+              class="text-xs text-base-content/50 ml-1"
+            >
+              ({{ row.entityRef }})
+            </span>
+          </template>
+
+          <template #cell-author="{ row }">
+            {{ row.actor?.label || '—' }}
+          </template>
+
+          <template #row-expanded="{ row }">
+            <div class="space-y-1 text-sm">
+              <div
+                v-for="diffEntry in historyDiffEntries(row, globalFieldLabels)"
+                :key="diffEntry.field"
+                class="flex gap-2"
+              >
+                <span class="font-medium min-w-[10rem]">{{ diffEntry.label }} :</span>
+                <span class="text-error line-through">{{ diffEntry.fromLabel }}</span>
+                <span>→</span>
+                <span class="text-success">{{ diffEntry.toLabel }}</span>
+              </div>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, type Ref } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import { useActivityLog } from '~/composables/useActivityLog'
+import type { ActivityLogEntry } from '~/composables/useActivityLog'
+import { useDataTable } from '~/composables/useDataTable'
+import {
+  historyActionLabel,
+  formatHistoryDate,
+  historyDiffEntries,
+} from '~/shared/utils/historyDisplayUtils'
+
+const { entries, total, loading, loadActivityLog } = useActivityLog()
+
+const table = useDataTable(
+  { fetchData: fetchLog },
+  {
+    defaultSort: 'createdAt',
+    defaultDirection: 'desc',
+    defaultPerPage: 50,
+    persistToUrl: true,
+    extraParams: {
+      entityType: { default: '' },
+      action: { default: '' },
+    },
+  },
+)
+
+const entityTypeFilter = table.filters.entityType as Ref<string>
+const actionFilter = table.filters.action as Ref<string>
+
+const entriesOnPage = computed(() => entries.value.length)
+const paginationState = table.pagination(total, entriesOnPage)
+
+const columns = [
+  { key: 'createdAt', label: 'Date' },
+  { key: 'action', label: 'Action' },
+  { key: 'entityType', label: 'Type' },
+  { key: 'entity', label: 'Entité' },
+  { key: 'author', label: 'Auteur' },
+]
+
+const expandedIds = reactive(new Set<string>())
+
+const toggleExpanded = (id: string) => {
+  if (expandedIds.has(id)) expandedIds.delete(id)
+  else expandedIds.add(id)
+}
+
+const canExpandRow = (row: any) =>
+  row.diff !== null && row.diff !== undefined && Object.keys(row.diff).length > 0
+
+function fetchLog() {
+  loadActivityLog({
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    entityType: entityTypeFilter.value || undefined,
+    action: actionFilter.value || undefined,
+  })
+}
+
+const ENTITY_TYPE_LABELS: Record<string, string> = {
+  piece: 'Pièce',
+  product: 'Produit',
+  composant: 'Composant',
+}
+
+const entityTypeLabel = (type: string) => ENTITY_TYPE_LABELS[type] ?? type
+
+const ENTITY_EDIT_ROUTES: Record<string, string> = {
+  piece: '/pieces',
+  product: '/product',
+  composant: '/component',
+}
+
+const entityEditLink = (entry: ActivityLogEntry) => {
+  const base = ENTITY_EDIT_ROUTES[entry.entityType] ?? ''
+  return base ? `${base}/${entry.entityId}/edit` : '#'
+}
+
+const actionBadgeClass = (action: string) => {
+  if (action === 'create') return 'badge-success'
+  if (action === 'delete') return 'badge-error'
+  return 'badge-warning'
+}
+
+const globalFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  supplierPrice: 'Prix fournisseur',
+  typePiece: 'Type de pièce',
+  typeProduct: 'Type de produit',
+  typeComposant: 'Type de composant',
+  product: 'Produit',
+  productIds: 'Produits',
+  constructeurIds: 'Fournisseurs',
+  structure: 'Structure',
+}
+
+onMounted(fetchLog)
+</script>
diff --git a/frontend/app/pages/admin/index.vue b/frontend/app/pages/admin/index.vue
new file mode 100644
index 0000000..645fe2e
--- /dev/null
+++ b/frontend/app/pages/admin/index.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="container mx-auto p-6 max-w-6xl">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold">
+        Administration des profils
+      </h1>
+      <button class="btn btn-primary btn-sm" @click="showCreateDialog = true">
+        Nouveau profil
+      </button>
+    </div>
+
+    <DataTable
+      :columns="columns"
+      :rows="sortedProfiles"
+      :loading="isLoading"
+      :sort="sortState"
+      :show-counter="false"
+      table-class="table-zebra"
+      empty-message="Aucun profil."
+      @sort="handleSort"
+    >
+      <template #cell-name="{ row }">
+        <span class="font-medium">{{ row.firstName }} {{ row.lastName }}</span>
+      </template>
+
+      <template #cell-email="{ row }">
+        <span class="text-sm text-base-content/70">{{ row.email || '-' }}</span>
+      </template>
+
+      <template #cell-role="{ row }">
+        <select
+          class="select select-bordered select-xs"
+          :value="primaryRole(row)"
+          @change="handleRoleChange(row.id, $event.target.value)"
+        >
+          <option value="ROLE_ADMIN">Admin</option>
+          <option value="ROLE_GESTIONNAIRE">Gestionnaire</option>
+          <option value="ROLE_VIEWER">Viewer</option>
+        </select>
+      </template>
+
+      <template #cell-password="{ row }">
+        <span v-if="row.hasPassword" class="badge badge-success badge-sm">Oui</span>
+        <span v-else class="badge badge-ghost badge-sm">Non</span>
+        <button
+          class="btn btn-ghost btn-xs ml-1"
+          @click="openPasswordDialog(row.id)"
+        >
+          {{ row.hasPassword ? 'Changer' : 'Definir' }}
+        </button>
+      </template>
+
+      <template #cell-status="{ row }">
+        <span
+          class="badge badge-sm"
+          :class="row.isActive ? 'badge-success' : 'badge-error'"
+        >
+          {{ row.isActive ? 'Actif' : 'Inactif' }}
+        </span>
+      </template>
+
+      <template #cell-actions="{ row }">
+        <button
+          v-if="row.isActive"
+          class="btn btn-ghost btn-xs text-error"
+          @click="handleDeactivate(row.id)"
+        >
+          Desactiver
+        </button>
+      </template>
+    </DataTable>
+
+    <!-- Create Profile Dialog -->
+    <dialog ref="createDialog" class="modal" :open="showCreateDialog || undefined">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">
+          Nouveau profil
+        </h3>
+        <form @submit.prevent="handleCreate">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Prenom</span></label>
+            <input v-model="createForm.firstName" type="text" class="input input-bordered" required>
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nom</span></label>
+            <input v-model="createForm.lastName" type="text" class="input input-bordered" required>
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Email</span></label>
+            <input v-model="createForm.email" type="email" class="input input-bordered">
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Mot de passe</span></label>
+            <input v-model="createForm.password" type="password" class="input input-bordered">
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Role</span></label>
+            <select v-model="createForm.role" class="select select-bordered">
+              <option value="ROLE_ADMIN">Admin</option>
+              <option value="ROLE_GESTIONNAIRE">Gestionnaire</option>
+              <option value="ROLE_VIEWER">Viewer</option>
+            </select>
+          </div>
+          <div class="modal-action">
+            <button type="button" class="btn btn-ghost" @click="showCreateDialog = false">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary" :disabled="creating">
+              <span v-if="creating" class="loading loading-spinner loading-xs" />
+              Creer
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button type="button" @click="showCreateDialog = false">
+          close
+        </button>
+      </form>
+    </dialog>
+
+    <!-- Set Password Dialog -->
+    <dialog ref="passwordDialog" class="modal" :open="showPasswordDialog || undefined">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">
+          Definir le mot de passe
+        </h3>
+        <form @submit.prevent="handleSetPassword">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nouveau mot de passe</span></label>
+            <input v-model="newPassword" type="password" class="input input-bordered" required>
+          </div>
+          <div class="modal-action">
+            <button type="button" class="btn btn-ghost" @click="showPasswordDialog = false">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary" :disabled="settingPassword">
+              <span v-if="settingPassword" class="loading loading-spinner loading-xs" />
+              Valider
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button type="button" @click="showPasswordDialog = false">
+          close
+        </button>
+      </form>
+    </dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import { useAdminProfiles } from '#imports'
+
+const { profiles, loading, fetchAll, createProfile, updateRole, setPassword, deactivateProfile } = useAdminProfiles()
+
+const loaded = ref(false)
+const isLoading = computed(() => loading.value || !loaded.value)
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'role', label: 'Role', sortable: true },
+  { key: 'password', label: 'Mot de passe' },
+  { key: 'status', label: 'Statut', sortable: true },
+  { key: 'actions', label: 'Actions' },
+]
+
+const sortState = ref({ field: 'name', direction: 'asc' })
+
+const handleSort = (sort) => {
+  sortState.value = sort
+}
+
+const sortedProfiles = computed(() => {
+  const { field, direction } = sortState.value
+  const dir = direction === 'desc' ? -1 : 1
+  return [...profiles.value].sort((a, b) => {
+    let valA, valB
+    if (field === 'name') {
+      valA = `${a.firstName} ${a.lastName}`.toLowerCase()
+      valB = `${b.firstName} ${b.lastName}`.toLowerCase()
+    }
+    else if (field === 'role') {
+      valA = primaryRole(a)
+      valB = primaryRole(b)
+    }
+    else if (field === 'status') {
+      valA = a.isActive ? '1' : '0'
+      valB = b.isActive ? '1' : '0'
+    }
+    else {
+      valA = (a[field] || '').toLowerCase()
+      valB = (b[field] || '').toLowerCase()
+    }
+    return dir * valA.localeCompare(valB)
+  })
+})
+
+const showCreateDialog = ref(false)
+const showPasswordDialog = ref(false)
+const creating = ref(false)
+const settingPassword = ref(false)
+const passwordProfileId = ref(null)
+const newPassword = ref('')
+
+const createForm = ref({
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: '',
+  role: 'ROLE_VIEWER',
+})
+
+const primaryRole = (profile) => {
+  const roles = profile.roles || []
+  if (roles.includes('ROLE_ADMIN')) { return 'ROLE_ADMIN' }
+  if (roles.includes('ROLE_GESTIONNAIRE')) { return 'ROLE_GESTIONNAIRE' }
+  return 'ROLE_VIEWER'
+}
+
+const handleCreate = async () => {
+  creating.value = true
+  try {
+    const data = { ...createForm.value }
+    if (!data.email) { delete data.email }
+    if (!data.password) { delete data.password }
+    await createProfile(data)
+    showCreateDialog.value = false
+    createForm.value = { firstName: '', lastName: '', email: '', password: '', role: 'ROLE_VIEWER' }
+  }
+  finally {
+    creating.value = false
+  }
+}
+
+const handleRoleChange = async (profileId, role) => {
+  await updateRole(profileId, role)
+}
+
+const openPasswordDialog = (profileId) => {
+  passwordProfileId.value = profileId
+  newPassword.value = ''
+  showPasswordDialog.value = true
+}
+
+const handleSetPassword = async () => {
+  if (!passwordProfileId.value) { return }
+  settingPassword.value = true
+  try {
+    await setPassword(passwordProfileId.value, newPassword.value)
+    showPasswordDialog.value = false
+  }
+  finally {
+    settingPassword.value = false
+  }
+}
+
+const handleDeactivate = async (profileId) => {
+  await deactivateProfile(profileId)
+}
+
+onMounted(async () => {
+  await fetchAll()
+  loaded.value = true
+})
+</script>
diff --git a/frontend/app/pages/changelog.vue b/frontend/app/pages/changelog.vue
new file mode 100644
index 0000000..3fed311
--- /dev/null
+++ b/frontend/app/pages/changelog.vue
@@ -0,0 +1,694 @@
+<template>
+    <main class="container mx-auto max-w-4xl px-6 py-10 space-y-8">
+        <header class="space-y-2">
+            <h1 class="text-3xl font-bold text-base-content">Changelog</h1>
+            <p class="text-sm text-base-content/70">
+                Historique des modifications et nouvelles fonctionnalités de
+                l'application.
+            </p>
+        </header>
+
+        <section
+            v-for="release in releases"
+            :key="release.version"
+            class="card border border-base-200 bg-base-100 shadow-sm"
+        >
+            <div class="card-body space-y-3">
+                <div class="flex items-center gap-3">
+                    <h2 class="text-xl font-bold text-base-content">
+                        {{ release.version }}
+                    </h2>
+                    <span class="badge badge-ghost text-xs">{{
+                        release.date
+                    }}</span>
+                </div>
+
+                <ul class="space-y-2">
+                    <li
+                        v-for="(item, i) in release.changes"
+                        :key="i"
+                        class="flex items-start gap-2 text-sm text-base-content/80"
+                    >
+                        <span
+                            class="badge badge-sm mt-0.5 shrink-0"
+                            :class="badgeClass(item.type)"
+                        >
+                            {{ item.type }}
+                        </span>
+                        <span>{{ item.text }}</span>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    </main>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "#imports";
+
+useHead({ title: "Changelog" });
+
+type ChangeType = "feat" | "fix" | "perf" | "chore";
+
+interface Change {
+    type: ChangeType;
+    text: string;
+}
+
+interface Release {
+    version: string;
+    date: string;
+    changes: Change[];
+}
+
+const badgeClass = (type: ChangeType) => {
+    const map: Record<ChangeType, string> = {
+        feat: "badge-primary",
+        fix: "badge-error",
+        perf: "badge-warning",
+        chore: "badge-ghost",
+    };
+    return map[type] ?? "badge-ghost";
+};
+
+const releases: Release[] = [
+    {
+        version: "v1.9.5",
+        date: "2026-03-31",
+        changes: [
+            {
+                type: "feat",
+                text: "Référence automatique des pièces et composants : génération d'une référence technique à partir d'une formule configurable sur la catégorie, recalculée automatiquement à chaque modification des champs personnalisés",
+            },
+            {
+                type: "feat",
+                text: "Formula builder interactif : sélection des champs disponibles par clic (chips) avec insertion à la position du curseur, aperçu live avec valeurs d'exemple, et calcul automatique des champs requis",
+            },
+            {
+                type: "feat",
+                text: "Versioning des entités : numéro de version incrémenté automatiquement à chaque modification, avec historique des versions et possibilité de restaurer une version antérieure",
+            },
+            {
+                type: "feat",
+                text: "Bouton de sauvegarde unique sur la fiche machine : remplacement des sauvegardes automatiques par un bouton explicite, avec affichage des versions sur les liens composants/pièces/produits",
+            },
+        ],
+    },
+    {
+        version: "v1.9.4",
+        date: "2026-03-25",
+        changes: [
+            {
+                type: "feat",
+                text: "Pages de consultation détaillées pour les pièces, composants et produits : vue lecture seule avec affichage propre des informations, fournisseurs, champs personnalisés et documents",
+            },
+            {
+                type: "feat",
+                text: "Bouton bascule Modifier / Voir détails sur les fiches pièces, composants et produits, identique au fonctionnement de la fiche machine",
+            },
+            {
+                type: "feat",
+                text: "Bouton « Détails » sur les catalogues pièces, composants et produits pour accéder directement à la vue consultation",
+            },
+            {
+                type: "feat",
+                text: "Masquage automatique des champs vides et de la section documents en mode consultation",
+            },
+            {
+                type: "feat",
+                text: "Accès direct au mode édition via le paramètre ?edit=true dans l'URL",
+            },
+        ],
+    },
+    {
+        version: "v1.9.2",
+        date: "2026-03-23",
+        changes: [
+            {
+                type: "feat",
+                text: "Serveur MCP (Model Context Protocol) : l'application expose désormais un serveur MCP permettant l'intégration avec des assistants IA — outils CRUD complets pour toutes les entités, recherche inventaire, historique, commentaires, champs personnalisés, documents, slots et structure machine",
+            },
+            {
+                type: "feat",
+                text: "Types de documents : classification des documents par type (Plan, Photo, Fiche technique, Notice, Certificat, Facture, Bon de commande, Autre) avec filtre dédié sur la page documents, sélection du type à l'upload et possibilité de modifier le type après upload",
+            },
+            {
+                type: "feat",
+                text: "Filtre sites multi-sélection sur le Parc Machines : remplacement du menu déroulant par des cases à cocher permettant de filtrer sur un ou plusieurs sites simultanément",
+            },
+            {
+                type: "feat",
+                text: "Tri alphabétique automatique des machines sur le Parc Machines",
+            },
+            {
+                type: "feat",
+                text: "Recherche par nom OU référence sur les catalogues : la recherche dans les catalogues pièces, composants et produits cherche désormais dans le nom et la référence simultanément (extension Doctrine OR search)",
+            },
+            {
+                type: "feat",
+                text: "Quantité sur les slots pièces : ajout d'un champ quantité éditable directement depuis la page d'édition d'un composant",
+            },
+            {
+                type: "feat",
+                text: "Lien rapide vers la catégorie depuis la page d'édition d'un composant",
+            },
+            {
+                type: "feat",
+                text: "Redirection vers la page d'édition après création d'un composant, d'une pièce ou d'un produit",
+            },
+            {
+                type: "fix",
+                text: "Correction de la suppression de fournisseurs sur les pièces, composants et produits : la suppression est maintenant persistée correctement",
+            },
+            {
+                type: "fix",
+                text: "Correction de la création de composants : les sélections de pièces, produits et sous-composants sont maintenant sauvegardées, et les slots squelette sont correctement initialisés",
+            },
+            {
+                type: "fix",
+                text: "Correction de la perte de données lors de la sauvegarde d'une catégorie (champs personnalisés et structure)",
+            },
+            {
+                type: "fix",
+                text: "Correction de la suppression de composants depuis la fiche machine (utilisation du linkId au lieu du composantId)",
+            },
+            {
+                type: "fix",
+                text: "Amélioration de l'envoi des fournisseurs en PATCH : le tableau est toujours envoyé pour éviter les pertes",
+            },
+            {
+                type: "fix",
+                text: "Filtrage serveur des options dans les sélecteurs de slots au lieu du filtrage client",
+            },
+            {
+                type: "fix",
+                text: "Page d'édition pièce : rester sur la page après sauvegarde au lieu de rediriger",
+            },
+            {
+                type: "fix",
+                text: "Messages d'erreur 409 (conflit) : extraction du champ d'erreur pour un message compréhensible",
+            },
+            {
+                type: "perf",
+                text: "Suppression des chargements catalogue redondants sur la page d'édition composant",
+            },
+        ],
+    },
+    {
+        version: "v1.9.1",
+        date: "2026-03-16",
+        changes: [
+            {
+                type: "feat",
+                text: "Normalisation JSON → tables relationnelles : les structures des composants (pièces, produits, sous-composants) et les squelettes des catégories sont désormais stockés dans des tables dédiées au lieu de colonnes JSON, améliorant la fiabilité et les performances des requêtes",
+            },
+            {
+                type: "feat",
+                text: "Synchronisation des catégories (ModelType Sync) : la modification d'une catégorie (ajout/suppression de slots ou champs personnalisés) peut être propagée automatiquement à tous les éléments existants de cette catégorie, avec prévisualisation des changements avant application",
+            },
+            {
+                type: "feat",
+                text: "Sélection interactive des items dans les slots : sur la page d'édition d'un composant, il est maintenant possible de choisir directement la pièce, le produit ou le sous-composant assigné à chaque emplacement du squelette via des sélecteurs avec recherche",
+            },
+            {
+                type: "feat",
+                text: "Endpoints PATCH pour les slots composant : modification de la quantité et de l'item sélectionné sur les slots pièce, produit et sous-composant",
+            },
+            {
+                type: "feat",
+                text: "Table de relation pièce ↔ produit (PieceProductSlot) avec versioning pour le suivi des modifications de structure",
+            },
+            {
+                type: "feat",
+                text: "Gestion des champs personnalisés sur les catégories : synchronisation automatique des définitions de champs (ajout, modification, suppression) lors de la sauvegarde d'une catégorie",
+            },
+            {
+                type: "feat",
+                text: "Suite de tests étendue : 219 tests couvrant les stratégies de synchronisation, le contrôleur de sync et les nouvelles entités",
+            },
+            {
+                type: "fix",
+                text: "Correction de l'affichage des sélections pré-existantes dans les slots : les pièces, produits et sous-composants déjà assignés sont maintenant correctement affichés à l'ouverture de la page d'édition (correction du cache catalogue)",
+            },
+            {
+                type: "fix",
+                text: "Fallback position/orderIndex sur index de tableau dans les stratégies de sync pour éviter les erreurs quand le champ est absent",
+            },
+        ],
+    },
+    {
+        version: "v1.9.0",
+        date: "2026-03-09",
+        changes: [
+            {
+                type: "feat",
+                text: "Gestion des champs personnalisés sur les machines : ajout, modification et suppression de définitions de champs directement depuis la fiche machine",
+            },
+            {
+                type: "feat",
+                text: "Refonte UI globale : amélioration du styling, des layouts et du responsive sur l'ensemble des composants et pages",
+            },
+            {
+                type: "feat",
+                text: "Suite de tests API complète : 167 tests couvrant toutes les entités, la sécurité et les validations",
+            },
+            {
+                type: "feat",
+                text: "Endpoint /api/health pour le monitoring applicatif",
+            },
+            {
+                type: "fix",
+                text: "Sécurité renforcée : désactivation de la migration de session sur le firewall API, durcissement des accès documents et sessions",
+            },
+            {
+                type: "fix",
+                text: "Confirmation de suppression avec impact sur le catalogue produits (documents, liaisons machines en cascade)",
+            },
+            {
+                type: "fix",
+                text: "Correction du débordement des dropdowns dans les DataTable",
+            },
+            {
+                type: "perf",
+                text: "Refactoring massif du frontend : extraction de 15+ composables et composants partagés, réduction de la taille des fichiers",
+            },
+            {
+                type: "chore",
+                text: "Extraction de CuidEntityTrait et abstraction du subscriber d'audit côté backend",
+            },
+            {
+                type: "chore",
+                text: "Ajout de DAMA DoctrineTestBundle pour l'isolation des tests par transaction",
+            },
+        ],
+    },
+    {
+        version: "v1.8.1",
+        date: "2026-03-05",
+        changes: [
+            {
+                type: "feat",
+                text: "Composant DataTable générique avec tri, recherche, pagination et filtres server-side — toutes les pages catalogue migrées vers ce composant partagé",
+            },
+            {
+                type: "feat",
+                text: "Messages d'erreur humanisés : les erreurs backend sont traduites en messages compréhensibles pour l'utilisateur final",
+            },
+            {
+                type: "feat",
+                text: "Modal d'ajout d'entités aux machines : ajout direct de composants, pièces et produits depuis la fiche machine",
+            },
+            {
+                type: "feat",
+                text: "Filtres SearchFilter ipartial sur les noms de types de modèles et commentaires côté API",
+            },
+            {
+                type: "feat",
+                text: "Suppression du système TypeMachine (squelettes machines) : les champs personnalisés sont désormais liés directement à chaque machine",
+            },
+            {
+                type: "feat",
+                text: "Simplification de la création de machines : plus besoin de sélectionner un squelette, ajout direct des entités",
+            },
+            {
+                type: "fix",
+                text: "Suppression catalogue pièces/composants : confirmation avec liste des éléments supprimés en cascade (documents, liaisons machine, champs personnalisés) au lieu de bloquer la suppression",
+            },
+            {
+                type: "fix",
+                text: "Affichage des catégories sur les pages d'édition (produit, composant, pièce) : correction de « Catégorie inconnue » causée par un import obsolète dans ModelType",
+            },
+            {
+                type: "fix",
+                text: "Recherche insensible à la casse sur les commentaires et documents (partial → ipartial)",
+            },
+            {
+                type: "chore",
+                text: "Suppression des pages squelettes machines (/machine-skeleton, /type) et composants associés",
+            },
+        ],
+    },
+    {
+        version: "v1.8.0",
+        date: "2026-03-03",
+        changes: [
+            {
+                type: "feat",
+                text: "Stockage des documents sur le système de fichiers au lieu de Base64 en base de données, avec endpoints dédiés pour servir et télécharger les fichiers",
+            },
+            {
+                type: "feat",
+                text: "Pagination serveur sur la page Documents avec recherche, tri (date/nom/taille), filtre par rattachement et sélecteur d'éléments par page",
+            },
+            {
+                type: "feat",
+                text: "Compression PDF automatique à l'upload via Ghostscript, avec commande pour compresser les PDFs existants",
+            },
+            {
+                type: "feat",
+                text: "Champ description sur les pièces et composants, visible dans les catalogues avec popover au survol",
+            },
+            {
+                type: "feat",
+                text: "Commande de migration app:migrate-documents-to-filesystem pour migrer les documents existants (Base64 → fichiers)",
+            },
+            {
+                type: "fix",
+                text: "Normalisation des documents : fileUrl et downloadUrl toujours exposés dans l'API",
+            },
+            {
+                type: "fix",
+                text: "Édition de squelettes machines : correction du conflit UniqueEntity et de l'interférence du désérialiseur",
+            },
+            {
+                type: "fix",
+                text: "Sites : ajout de l'opération PATCH et correction de la migration de contrainte",
+            },
+            {
+                type: "chore",
+                text: "Réorganisation de la navbar avec nouvelles icônes Lucide",
+            },
+        ],
+    },
+    {
+        version: "v1.7.0",
+        date: "2026-03-02",
+        changes: [
+            {
+                type: "feat",
+                text: "Système de commentaires / tickets : possibilité de laisser des commentaires sur les fiches (machines, pièces, composants, produits, catégories, squelettes) avec résolution par les gestionnaires",
+            },
+            {
+                type: "feat",
+                text: "Page commentaires centralisée (/comments) avec filtres par statut, type d'entité, pagination et liens cliquables vers les fiches",
+            },
+            {
+                type: "feat",
+                text: "Badge notifications : compteur de commentaires ouverts sur l'avatar utilisateur et dans le menu profil (polling 60s)",
+            },
+            {
+                type: "feat",
+                text: "Contrôle d'accès par rôles : ROLE_ADMIN, ROLE_GESTIONNAIRE, ROLE_VIEWER avec permissions granulaires sur toutes les pages",
+            },
+            {
+                type: "feat",
+                text: "Journal d'audit étendu : suivi des opérations sur machines, fournisseurs, types de modèles, documents et conversions",
+            },
+            {
+                type: "feat",
+                text: "Commande app:init-profile-passwords pour l'initialisation en masse des mots de passe et rôles",
+            },
+            {
+                type: "fix",
+                text: "Toggle switch pour les champs personnalisés booléens (remplace les checkboxes)",
+            },
+            {
+                type: "fix",
+                text: "Recherche fournisseur : filtrage côté client au lieu d'appels API debounce",
+            },
+            {
+                type: "fix",
+                text: "Prévention des doublons de noms de fournisseurs et de références de pièces (contraintes unique)",
+            },
+            {
+                type: "fix",
+                text: "Correction de la création de squelettes machines : pagination, duplication, champs personnalisés",
+            },
+        ],
+    },
+    {
+        version: "v1.6.1",
+        date: "2026-02-12",
+        changes: [
+            {
+                type: "feat",
+                text: "Suivi d'audit étendu : enregistrement des opérations CRUD sur les machines, fournisseurs, catégories (ModelType) et documents",
+            },
+            {
+                type: "feat",
+                text: "Traçabilité des conversions de catégories dans le journal d'activité (action « convert » avec direction, nombre et noms des éléments)",
+            },
+            {
+                type: "feat",
+                text: "Endpoint historique machine : GET /api/machines/{id}/history",
+            },
+        ],
+    },
+    {
+        version: "v1.6.0",
+        date: "2026-02-12",
+        changes: [
+            {
+                type: "feat",
+                text: "Conversion bidirectionnelle des catégories : possibilité de convertir une catégorie de pièce en catégorie de composant (et inversement) avec transfert automatique de tous les éléments, documents, champs personnalisés et fournisseurs",
+            },
+            {
+                type: "feat",
+                text: "Vérification des conditions de blocage avant conversion : liaisons machines, templates de type machine, sous-composants dans la structure, collisions de noms",
+            },
+            {
+                type: "feat",
+                text: "Bouton « Convertir » sur les listes de catégories pièce et composant avec modale de confirmation détaillée",
+            },
+            {
+                type: "chore",
+                text: "Passage php-cs-fixer sur l'ensemble des contrôleurs et entités du backend",
+            },
+        ],
+    },
+    {
+        version: "v1.5.0",
+        date: "2026-02-11",
+        changes: [
+            {
+                type: "feat",
+                text: "Page de journal d'activité globale avec filtres par entité, par acteur et pagination serveur",
+            },
+            {
+                type: "feat",
+                text: "Suivi d'audit : enregistrement des noms de fournisseurs et des modifications de champs personnalisés",
+            },
+            {
+                type: "feat",
+                text: "Préservation de l'état des listes dans l'URL (page courante, recherche, tri, direction, filtres) — le retour navigateur restaure exactement la position précédente",
+            },
+            {
+                type: "feat",
+                text: "Boutons « Retour » sur toutes les pages de création et d'édition utilisent désormais l'historique du navigateur au lieu de liens fixes",
+            },
+            {
+                type: "feat",
+                text: "Première lettre automatiquement en majuscule lors de la création de catégories et de composants",
+            },
+            {
+                type: "feat",
+                text: "Les types de catégories dans les tableaux des catalogues sont maintenant cliquables (lien vers la fiche d'édition)",
+            },
+            {
+                type: "feat",
+                text: "Application des couleurs de marque Malio sur l'ensemble du thème (navbar, boutons, badges)",
+            },
+            {
+                type: "feat",
+                text: "Page changelog accessible depuis le footer",
+            },
+            {
+                type: "fix",
+                text: "Correction des filtres de tri et de recherche cassés sur les catalogues composants, pièces et produits",
+            },
+            {
+                type: "fix",
+                text: "Correction du filtre par rattachement (site, machine, composant, pièce) sur la page documents",
+            },
+            {
+                type: "fix",
+                text: "Correction de l'affichage des champs personnalisés sur les pages d'édition (condition de concurrence)",
+            },
+            {
+                type: "fix",
+                text: "Plafonnement de la pagination à 200 éléments par page pour éviter les erreurs mémoire en production",
+            },
+            {
+                type: "perf",
+                text: "Cache intelligent sur les composables usePieces et useComposants : les données déjà chargées ne sont plus re-téléchargées inutilement",
+            },
+            {
+                type: "perf",
+                text: "Réduction des appels API bloquants sur les pages d'édition",
+            },
+        ],
+    },
+    {
+        version: "v1.4.0",
+        date: "2026-02-04",
+        changes: [
+            {
+                type: "perf",
+                text: "Optimisation de la sérialisation API : ajout de groupes dédiés pour CustomFieldValue et CustomField, réduisant significativement la taille des réponses",
+            },
+            {
+                type: "perf",
+                text: "Pages d'édition machines/composants/pièces : chargement parallèle des données au lieu de séquentiel",
+            },
+        ],
+    },
+    {
+        version: "v1.3.0",
+        date: "2026-01-28",
+        changes: [
+            {
+                type: "feat",
+                text: "Refactoring complet du frontend : découpage des méga-composants en modules réutilisables (7 chantiers F1-F7)",
+            },
+            {
+                type: "feat",
+                text: "Page détail machine découpée de 2989 à 219 lignes avec 2 composables et 7 sous-composants",
+            },
+            {
+                type: "feat",
+                text: "Page création machine découpée de 1231 à 196 lignes avec 1 composable et 5 sous-composants",
+            },
+            {
+                type: "feat",
+                text: "Extraction de 4 modules utilitaires partagés (champs personnalisés, affichage produits, documents, fournisseurs)",
+            },
+            {
+                type: "feat",
+                text: "Fusion des composables dupliqués : 3 composables d'historique et 3 composables de types fusionnés en versions génériques",
+            },
+            {
+                type: "feat",
+                text: "Remplacement de confirm() natif par une modale DaisyUI personnalisée sur l'ensemble de l'application",
+            },
+            {
+                type: "feat",
+                text: "Extraction de la navbar dans un composant AppNavbar dédié",
+            },
+            {
+                type: "feat",
+                text: "Suite de 54 tests unitaires avec Vitest couvrant les utilitaires et composables",
+            },
+            {
+                type: "perf",
+                text: "Optimisations API : helper extractCollection partagé, invalidation de cache ciblée",
+            },
+            {
+                type: "chore",
+                text: "Migration des composables JavaScript vers TypeScript strict",
+            },
+            {
+                type: "chore",
+                text: "Activation de règles ESLint strictes et suppression de 19 console.log de débogage",
+            },
+        ],
+    },
+    {
+        version: "v1.2.0",
+        date: "2026-01-21",
+        changes: [
+            {
+                type: "feat",
+                text: "Système de suivi d'historique (audit) avec enregistrement automatique des modifications sur toutes les entités",
+            },
+            {
+                type: "feat",
+                text: "Interface dédiée à l'historique sur les fiches produits, pièces et composants",
+            },
+            {
+                type: "feat",
+                text: "Modale d'éléments liés sur les pages de gestion des catégories avec navigation directe vers la fiche d'édition",
+            },
+            {
+                type: "feat",
+                text: "Possibilité d'ajouter des champs personnalisés en mode restreint sur les catégories",
+            },
+        ],
+    },
+    {
+        version: "v1.1.1",
+        date: "2026-01-14",
+        changes: [
+            {
+                type: "feat",
+                text: "Compression automatique des fichiers PDF à l'upload via qpdf, réduisant l'espace de stockage",
+            },
+            {
+                type: "chore",
+                text: "Ajout de qpdf dans l'image Docker pour le support de la compression PDF",
+            },
+        ],
+    },
+    {
+        version: "v1.1.0",
+        date: "2026-01-07",
+        changes: [
+            {
+                type: "fix",
+                text: "Recherche insensible à la casse sur l'ensemble des filtres de toutes les entités (machines, composants, pièces, produits)",
+            },
+            {
+                type: "chore",
+                text: "Réinitialisation des migrations vers un schéma initial unique avec guide de déploiement",
+            },
+            {
+                type: "chore",
+                text: "Mise à jour des fixtures avec les données courantes de la base",
+            },
+        ],
+    },
+    {
+        version: "v1.0.0",
+        date: "2025-12-15",
+        changes: [
+            {
+                type: "feat",
+                text: "Gestion complète des machines : création, édition, vue détaillée avec liaisons composants et pièces",
+            },
+            {
+                type: "feat",
+                text: "Catalogues composants, pièces et produits avec recherche serveur, tri et pagination",
+            },
+            {
+                type: "feat",
+                text: "Système de catégories (types) avec squelettes de champs personnalisés et drag & drop pour réordonner",
+            },
+            {
+                type: "feat",
+                text: "Upload de documents avec prévisualisation PDF et images, miniatures dans les tableaux",
+            },
+            {
+                type: "feat",
+                text: "Gestion des fournisseurs multiples avec résolution automatique des noms",
+            },
+            {
+                type: "feat",
+                text: "Exigences produit sur les pièces : support de liaisons multiples",
+            },
+            {
+                type: "feat",
+                text: "Sélections de composants sur les pièces avec recherche dynamique",
+            },
+            {
+                type: "feat",
+                text: "Système de sessions utilisateurs avec authentification par cookie",
+            },
+            {
+                type: "feat",
+                text: "Mémorisation des préférences de tri par catalogue (cookies)",
+            },
+            {
+                type: "feat",
+                text: "Formatage automatique des contacts et des montants en format français",
+            },
+            {
+                type: "feat",
+                text: "Protection contre les suppressions : affichage des dépendances bloquantes avant confirmation",
+            },
+            {
+                type: "chore",
+                text: "Infrastructure Docker complète avec PostgreSQL, PHP 8.4, API Platform et pgAdmin",
+            },
+        ],
+    },
+];
+</script>
diff --git a/frontend/app/pages/comments.vue b/frontend/app/pages/comments.vue
new file mode 100644
index 0000000..5a1f189
--- /dev/null
+++ b/frontend/app/pages/comments.vue
@@ -0,0 +1,264 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header>
+      <h1 class="text-3xl font-semibold text-base-content">
+        Commentaires
+      </h1>
+      <p class="text-sm text-base-content/50">
+        Liste de tous les commentaires et tickets ouverts sur les fiches.
+      </p>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <DataTable
+          :columns="columns"
+          :rows="comments"
+          :loading="loadingList"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :column-filters="table.columnFilters.value"
+          :show-per-page="true"
+          empty-message="Aucun commentaire trouvé."
+          no-results-message="Aucun commentaire trouvé."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+          @update:column-filters="table.handleColumnFiltersChange"
+        >
+          <template #toolbar>
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="comment-status"
+              >
+                Statut
+              </label>
+              <select
+                id="comment-status"
+                v-model="statusFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="open">Ouverts</option>
+                <option value="resolved">Résolus</option>
+                <option value="">Tous</option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="comment-entity-type"
+              >
+                Type
+              </label>
+              <select
+                id="comment-entity-type"
+                v-model="entityTypeFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="">Tous</option>
+                <option value="machine">Machine</option>
+                <option value="piece">Pièce</option>
+                <option value="composant">Composant</option>
+                <option value="product">Produit</option>
+                <option value="piece_category">Catégorie pièce</option>
+                <option value="component_category">Catégorie composant</option>
+                <option value="product_category">Catégorie produit</option>
+                <option value="machine_skeleton">Squelette machine</option>
+              </select>
+            </div>
+          </template>
+
+          <template #cell-content="{ row }">
+            <div class="tooltip tooltip-top max-w-xs" :data-tip="row.content">
+              <span class="line-clamp-2 text-sm text-left">{{ row.content }}</span>
+            </div>
+            <CommentDocumentList :documents="getDocuments(row)" />
+          </template>
+
+          <template #cell-entityType="{ row }">
+            <span class="badge badge-outline badge-sm">
+              {{ entityTypeLabel(row.entityType) }}
+            </span>
+          </template>
+
+          <template #cell-entity="{ row }">
+            <NuxtLink
+              v-if="getEntityRoute(row)"
+              :to="getEntityRoute(row)!"
+              class="link link-primary text-sm font-medium"
+            >
+              {{ row.entityName || row.entityId }}
+            </NuxtLink>
+            <span v-else class="text-sm">
+              {{ row.entityName || row.entityId }}
+            </span>
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            <span class="whitespace-nowrap">{{ formatCommentDate(row.createdAt) }}</span>
+          </template>
+
+          <template #cell-status="{ row }">
+            <span
+              class="badge badge-sm"
+              :class="row.status === 'open' ? 'badge-warning' : 'badge-success'"
+            >
+              {{ row.status === 'open' ? 'Ouvert' : 'Résolu' }}
+            </span>
+          </template>
+
+          <template v-if="canEdit" #cell-actions="{ row }">
+            <button
+              v-if="row.status === 'open'"
+              type="button"
+              class="btn btn-success btn-xs gap-1"
+              :disabled="loading"
+              @click="handleResolve(row.id)"
+            >
+              <IconLucideCheck class="w-3 h-3" />
+              Résoudre
+            </button>
+            <span v-else class="text-xs text-base-content/50">
+              {{ row.resolvedByName }}
+            </span>
+          </template>
+        </DataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, type Ref } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import { useComments, type Comment, type CommentDocument } from '~/composables/useComments'
+import CommentDocumentList from '~/components/CommentDocumentList.vue'
+import { usePermissions } from '~/composables/usePermissions'
+import { useDataTable } from '~/composables/useDataTable'
+import IconLucideCheck from '~icons/lucide/check'
+
+const { canEdit } = usePermissions()
+const {
+  loading,
+  fetchAllComments,
+  resolveComment,
+} = useComments()
+
+const comments = ref<Comment[]>([])
+const total = ref(0)
+const loadingList = ref(true)
+
+const getDocuments = (comment: Comment): CommentDocument[] =>
+  comment.documents?.filter((d): d is CommentDocument => typeof d === 'object' && d !== null && 'id' in d) ?? []
+
+const table = useDataTable(
+  { fetchData: loadComments },
+  {
+    defaultSort: 'createdAt',
+    defaultDirection: 'desc',
+    defaultPerPage: 20,
+    persistToUrl: true,
+    extraParams: {
+      status: { default: 'open' },
+      entityType: { default: '' },
+    },
+    columnFilterKeys: ['entity'],
+  },
+)
+
+const statusFilter = table.filters.status as Ref<string>
+const entityTypeFilter = table.filters.entityType as Ref<string>
+
+const commentsOnPage = computed(() => comments.value.length)
+const paginationState = table.pagination(total, commentsOnPage)
+
+const columns = computed(() => {
+  const cols = [
+    { key: 'content', label: 'Contenu', class: 'max-w-xs' },
+    { key: 'entityType', label: 'Type' },
+    { key: 'entity', label: 'Item', filterable: true, filterPlaceholder: 'Rechercher…' },
+    { key: 'authorName', label: 'Auteur', sortable: true, sortKey: 'authorName' },
+    { key: 'createdAt', label: 'Date', sortable: true, sortKey: 'createdAt' },
+    { key: 'status', label: 'Statut', sortable: true, sortKey: 'status' },
+  ]
+  if (canEdit.value) {
+    cols.push({ key: 'actions', label: 'Actions' })
+  }
+  return cols
+})
+
+const ENTITY_TYPE_LABELS: Record<string, string> = {
+  machine: 'Machine',
+  piece: 'Pièce',
+  composant: 'Composant',
+  product: 'Produit',
+  piece_category: 'Cat. pièce',
+  component_category: 'Cat. composant',
+  product_category: 'Cat. produit',
+  machine_skeleton: 'Squelette',
+}
+
+const entityTypeLabel = (type: string): string =>
+  ENTITY_TYPE_LABELS[type] ?? type
+
+const formatCommentDate = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('fr-FR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date)
+}
+
+async function loadComments() {
+  loadingList.value = true
+  const result = await fetchAllComments({
+    status: statusFilter.value || undefined,
+    entityType: entityTypeFilter.value || undefined,
+    entityName: table.columnFilters.value.entity || undefined,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value,
+  })
+  if (result.success) {
+    comments.value = result.data ?? []
+    total.value = result.total ?? 0
+  }
+  loadingList.value = false
+}
+
+const handleResolve = async (commentId: string) => {
+  const result = await resolveComment(commentId)
+  if (result.success) {
+    await loadComments()
+  }
+}
+
+const ENTITY_ROUTE_MAP: Record<string, (id: string) => string> = {
+  machine: (id: string) => `/machine/${id}`,
+  piece: (id: string) => `/piece/${id}`,
+  composant: (id: string) => `/component/${id}`,
+  product: (id: string) => `/product/${id}`,
+  piece_category: (id: string) => `/piece-category/${id}/edit`,
+  component_category: (id: string) => `/component-category/${id}/edit`,
+  product_category: (id: string) => `/product-category/${id}/edit`,
+  machine_skeleton: (id: string) => `/type/${id}`,
+}
+
+const getEntityRoute = (comment: Comment): string | null => {
+  const builder = ENTITY_ROUTE_MAP[comment.entityType]
+  return builder ? builder(comment.entityId) : null
+}
+
+onMounted(() => {
+  loadComments()
+})
+</script>
diff --git a/frontend/app/pages/component-catalog.vue b/frontend/app/pages/component-catalog.vue
new file mode 100644
index 0000000..ce67b4e
--- /dev/null
+++ b/frontend/app/pages/component-catalog.vue
@@ -0,0 +1,212 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+      <div>
+        <h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
+        <p class="text-sm text-base-content/50 mt-1">
+          Consultez et gérez tous les composants existants.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md">
+          Ajouter un composant
+        </NuxtLink>
+        <NuxtLink to="/component-category" class="btn btn-ghost btn-sm md:btn-md">
+          Gérer les catégories
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="card bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <header class="flex flex-col gap-1">
+          <h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
+          <p class="text-sm text-base-content/50">
+            Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
+          </p>
+        </header>
+
+        <DataTable
+          :columns="columns"
+          :rows="componentRows"
+          :loading="loadingComposants"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :column-filters="table.columnFilters.value"
+          :show-per-page="true"
+          empty-message="Aucun composant n'a encore été créé."
+          no-results-message="Aucun composant ne correspond à votre recherche."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+          @update:column-filters="table.handleColumnFiltersChange"
+        >
+          <template #toolbar>
+            <label class="w-full sm:w-72">
+              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+              <input
+                v-model="table.searchTerm.value"
+                type="text"
+                class="input input-bordered input-sm w-full mt-1"
+                placeholder="Nom ou référence…"
+                @input="table.debouncedSearch"
+              />
+            </label>
+          </template>
+
+          <template #cell-preview="{ row }">
+            <DocumentThumbnail
+              :document="resolvePrimaryDocument(row.component)"
+              :alt="resolvePreviewAlt(row.component)"
+            />
+          </template>
+
+          <template #cell-name="{ row }">
+            {{ row.component.name || 'Composant sans nom' }}
+          </template>
+
+          <template #cell-reference="{ row }">
+            {{ row.component.reference || '—' }}
+          </template>
+
+          <template #cell-description="{ row }">
+            <div v-if="row.component.description" class="group relative">
+              <span class="block cursor-help truncate">{{ row.component.description }}</span>
+              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
+                <p class="break-words whitespace-pre-wrap">{{ row.component.description }}</p>
+              </div>
+            </div>
+            <span v-else>—</span>
+          </template>
+
+          <template #cell-typeComposant="{ row }">
+            <NuxtLink
+              v-if="row.component.typeComposant?.id"
+              :to="`/component-category/${row.component.typeComposant.id}/edit`"
+              class="link link-hover link-primary"
+            >
+              {{ resolveComponentType(row.component) }}
+            </NuxtLink>
+            <span v-else>{{ resolveComponentType(row.component) }}</span>
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            <span class="whitespace-nowrap">{{ formatDate(row.component.createdAt) }}</span>
+          </template>
+
+          <template #cell-actions="{ row }">
+            <div class="flex items-center justify-end gap-2">
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/component/${row.component.id}?edit=true`)"
+              >
+                Modifier
+              </button>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                :disabled="loadingComposants"
+                @click="handleDeleteComponent(row.component)"
+              >
+                Supprimer
+              </button>
+              <NuxtLink
+                :to="`/component/${row.component.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import { useComposants } from '~/composables/useComposants'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useDataTable } from '~/composables/useDataTable'
+import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
+import { resolveDeleteImpact, buildDeleteMessage } from '~/shared/utils/deleteImpactUtils'
+import { resolvePrimaryDocument, resolvePreviewAlt } from '~/shared/utils/catalogDisplayUtils'
+import { formatFrenchDate } from '~/utils/date'
+
+const { canEdit } = usePermissions()
+const { composants, total, loadComposants, loading: loadingComposants, deleteComposant } = useComposants()
+const { componentTypes, loadComponentTypes } = useComponentTypes()
+
+const table = useDataTable(
+  { fetchData: fetchComposants },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typeComposant'] },
+)
+
+const columns = [
+  { key: 'preview', label: 'Aperçu', width: 'w-24' },
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'reference', label: 'Référence' },
+  { key: 'description', label: 'Description' },
+  { key: 'typeComposant', label: 'Type de composant', filterable: true, filterPlaceholder: 'Filtrer…' },
+  { key: 'createdAt', label: 'Date', sortable: true },
+  { key: 'actions', label: 'Actions' },
+]
+
+const composantsOnPage = computed(() => componentRows.value.length)
+const paginationState = table.pagination(total, composantsOnPage)
+
+// Enrich composants with full type data
+const composantsList = computed(() => {
+  return (composants.value || []).map((composant) => {
+    const typeComposant = componentTypes.value.find(t => t.id === composant.typeComposantId)
+    return { ...composant, typeComposant: typeComposant || composant.typeComposant || null }
+  })
+})
+
+const componentRows = computed(() =>
+  composantsList.value.map(component => ({
+    id: component.id,
+    component,
+  })),
+)
+
+async function fetchComposants() {
+  await loadComposants({
+    search: table.searchTerm.value,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value as 'asc' | 'desc',
+    typeName: table.columnFilters.value.typeComposant || undefined,
+    force: true,
+  })
+}
+
+const resolveComponentType = (component: Record<string, any>) => {
+  if (component?.typeComposant?.name) return component.typeComposant.name
+  if (component?.typeComposantLabel) return component.typeComposantLabel
+  return '—'
+}
+
+const { confirm } = useConfirm()
+
+const handleDeleteComponent = async (component: Record<string, any>) => {
+  const componentName = component?.name || 'ce composant'
+  const message = buildDeleteMessage(componentName, resolveDeleteImpact(component))
+  const confirmed = await confirm({ title: 'Supprimer le composant', message, dangerous: true })
+  if (!confirmed) return
+  await deleteComposant(component.id)
+  fetchComposants()
+}
+
+const formatDate = formatFrenchDate
+
+onMounted(async () => {
+  await Promise.all([fetchComposants(), loadComponentTypes()])
+})
+</script>
diff --git a/frontend/app/pages/component-category/[id]/edit.vue b/frontend/app/pages/component-category/[id]/edit.vue
new file mode 100644
index 0000000..c1b9a56
--- /dev/null
+++ b/frontend/app/pages/component-category/[id]/edit.vue
@@ -0,0 +1,206 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">{{ title }}</h1>
+          <p class="text-base text-base-content/70">
+            Ajustez le squelette et les métadonnées de cette catégorie de composant. Les modifications seront appliquées lors des prochaines créations de composants.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <div v-if="loading" class="flex items-center justify-center py-16">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true"></span>
+        <span class="ml-3 text-sm text-base-content/70">Chargement de la catégorie…</span>
+      </div>
+      <ModelTypeForm
+        v-else
+        mode="edit"
+        initial-category="COMPONENT"
+        :initial-data="initialData"
+        :lock-category="true"
+        :saving="saving"
+        :readonly="!canEdit"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+
+    <!-- Comments -->
+    <div class="mt-4">
+      <CommentSection
+        entity-type="component_category"
+        :entity-id="String(route.params.id)"
+        :entity-name="initialData?.name"
+        show-resolved
+      />
+    </div>
+
+    <SyncConfirmationModal
+      :preview="syncPreviewData"
+      :open="showSyncModal"
+      :loading="syncLoading"
+      @confirm="handleSyncConfirm"
+      @cancel="handleSyncCancel"
+    />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useHead, useRoute, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { getModelType, updateModelType, syncPreview, syncExecute, type ModelTypePayload, type SyncPreviewResult } from '~/services/modelTypes'
+import type { ComponentModelStructure } from '~/shared/types/inventory'
+import { useComponentTypes } from '~/composables/useComponentTypes'
+import { useToast } from '~/composables/useToast'
+
+const { canEdit } = usePermissions()
+const route = useRoute()
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const { loadComponentTypes } = useComponentTypes()
+
+const loading = ref(true)
+const saving = ref(false)
+const initialData = ref<Partial<ModelTypePayload> | null>(null)
+const showSyncModal = ref(false)
+const syncLoading = ref(false)
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
+
+const title = computed(() =>
+  initialData.value?.name
+    ? `Modifier « ${initialData.value.name} »`
+    : 'Modifier une catégorie de composant',
+)
+
+useHead(() => ({
+  title: title.value,
+}))
+
+const navigateBackToList = async () => {
+  await router.push('/component-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const normalizeError = (error: any) => {
+  const message = error?.data?.message || error?.message || 'Une erreur est survenue.'
+  return Array.isArray(message) ? message[0] : message
+}
+
+const loadCategory = async () => {
+  loading.value = true
+  try {
+    const id = String(route.params.id)
+    const response = await getModelType(id)
+
+    if (response.category !== 'COMPONENT') {
+      showError("Cette catégorie n'est pas un composant." )
+      await navigateBackToList()
+      return
+    }
+
+    initialData.value = {
+      name: response.name,
+      code: response.code,
+      category: response.category,
+      notes: response.notes ?? response.description ?? '',
+      structure: (response.structure as ComponentModelStructure | null) ?? undefined,
+      referenceFormula: response.referenceFormula ?? null,
+      requiredFieldsForReference: response.requiredFieldsForReference ?? null,
+    }
+
+  } catch (error) {
+    showError(normalizeError(error))
+    await navigateBackToList()
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  navigateBackToList()
+}
+
+const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  if (!canEdit.value) return
+  const id = String(route.params.id)
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload?.notes ?? null,
+    }
+
+    // Get sync preview BEFORE saving
+    const preview = await syncPreview(id, enrichedPayload.structure || {})
+
+    const hasImpact = preview && (
+      Object.values(preview.additions || {}).some(v => v > 0)
+      || Object.values(preview.deletions || {}).some(v => v > 0)
+      || Object.values(preview.modifications || {}).some(v => v > 0)
+    )
+
+    if (hasImpact) {
+      // Show modal for confirmation
+      pendingPayload.value = enrichedPayload
+      syncPreviewData.value = preview
+      showSyncModal.value = true
+    } else {
+      // No impact — save directly + sync
+      await updateModelType(id, enrichedPayload)
+      await syncExecute(id, { confirmDeletions: false, confirmTypeChanges: false })
+      await loadComponentTypes({ force: true })
+      showSuccess('Catégorie de composant mise à jour avec succès.')
+    }
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    saving.value = false
+  }
+}
+
+const handleSyncConfirm = async () => {
+  if (!pendingPayload.value) return
+  const id = String(route.params.id)
+
+  syncLoading.value = true
+  try {
+    const hasDeletions = syncPreviewData.value && Object.values(syncPreviewData.value.deletions || {}).some(v => v > 0)
+    const hasModifications = syncPreviewData.value && Object.values(syncPreviewData.value.modifications || {}).some(v => v > 0)
+
+    await updateModelType(id, pendingPayload.value)
+    await syncExecute(id, {
+      confirmDeletions: !!hasDeletions,
+      confirmTypeChanges: !!hasModifications,
+    })
+    await loadComponentTypes({ force: true })
+    showSuccess('Catégorie de composant mise à jour avec succès.')
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    syncLoading.value = false
+    showSyncModal.value = false
+    pendingPayload.value = null
+    syncPreviewData.value = null
+  }
+}
+
+const handleSyncCancel = () => {
+  showSyncModal.value = false
+  pendingPayload.value = null
+  syncPreviewData.value = null
+}
+
+onMounted(() => {
+  loadCategory()
+})
+</script>
diff --git a/frontend/app/pages/component-category/index.vue b/frontend/app/pages/component-category/index.vue
new file mode 100644
index 0000000..0012a1f
--- /dev/null
+++ b/frontend/app/pages/component-category/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <ManagementView
+    category="COMPONENT"
+    heading="Catégories de composant"
+  />
+</template>
+
+<script setup lang="ts">
+import ManagementView from '~/components/model-types/ManagementView.vue'
+</script>
diff --git a/frontend/app/pages/component-category/new.vue b/frontend/app/pages/component-category/new.vue
new file mode 100644
index 0000000..d34c024
--- /dev/null
+++ b/frontend/app/pages/component-category/new.vue
@@ -0,0 +1,74 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">Nouvelle catégorie de composant</h1>
+          <p class="text-base text-base-content/70">
+            Configurez le squelette canonique qui sera appliqué lors de la création des composants appartenant à cette catégorie.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <ModelTypeForm
+        mode="create"
+        initial-category="COMPONENT"
+        :lock-category="true"
+        :saving="saving"
+        :readonly="!canEdit"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { createModelType } from '~/services/modelTypes'
+import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
+import { useToast } from '~/composables/useToast'
+
+const { canEdit } = usePermissions()
+
+useHead(() => ({
+  title: 'Nouvelle catégorie de composant',
+}))
+
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const saving = ref(false)
+
+const handleCancel = () => {
+  router.push('/component-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  if (!canEdit.value) return
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload.notes ?? null,
+    }
+    await createModelType(enrichedPayload)
+    invalidateEntityTypeCache('COMPONENT')
+    showSuccess('Catégorie de composant créée avec succès.')
+    await router.push('/component-category')
+  } catch (error: any) {
+    const message = error?.data?.message || error?.message || 'Une erreur est survenue lors de la création.'
+    showError(Array.isArray(message) ? message[0] : message)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
diff --git a/frontend/app/pages/component/[id]/edit.vue b/frontend/app/pages/component/[id]/edit.vue
new file mode 100644
index 0000000..8e2d591
--- /dev/null
+++ b/frontend/app/pages/component/[id]/edit.vue
@@ -0,0 +1,452 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="componentDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+    <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+      <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+      <p class="text-sm text-base-content/70">Chargement du composant…</p>
+    </div>
+
+    <div v-else-if="!component" class="max-w-xl mx-auto">
+      <div class="alert alert-error shadow-lg">
+        <div>
+          <h2 class="font-semibold text-lg">Composant introuvable</h2>
+          <p class="text-sm text-base-content/80">
+            Nous n'avons pas pu retrouver le composant demandé. Il a peut-être été supprimé.
+          </p>
+        </div>
+      </div>
+      <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+        Retour au catalogue
+      </button>
+    </div>
+
+    <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+      <div class="card-body space-y-6">
+        <header class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <div>
+            <h1 class="text-3xl font-semibold text-base-content">Modifier le composant</h1>
+            <p class="text-sm text-base-content/70">
+              Mettez à jour les informations du composant et ses champs personnalisés.
+            </p>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
+            Retour au catalogue
+          </button>
+        </header>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Catégorie de composant</span>
+            </label>
+            <div class="flex items-center gap-2">
+              <select
+                v-model="selectedTypeId"
+                class="select select-bordered select-sm md:select-md flex-1"
+                disabled
+              >
+                <option value="">Sélectionner une catégorie</option>
+                <option
+                  v-for="type in componentTypeList"
+                  :key="type.id"
+                  :value="type.id"
+                >
+                  {{ type.name }}
+                </option>
+              </select>
+              <NuxtLink
+                v-if="selectedTypeId"
+                :to="`/component-category/${selectedTypeId}/edit`"
+                class="btn btn-ghost btn-sm"
+                title="Voir la catégorie"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                  <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                </svg>
+              </NuxtLink>
+            </div>
+            <p class="text-xs text-base-content/60 mt-1">
+              La catégorie d'origine ne peut pas être modifiée depuis cette page.
+            </p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom du composant</span>
+            </label>
+            <input
+              v-model="editionForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              placeholder="Nom affiché dans le catalogue"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="editionForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || saving"
+            placeholder="Description du composant (optionnel)"
+            rows="3"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="editionForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              placeholder="Référence interne ou fournisseur"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseur</span>
+            </label>
+            <ConstructeurSelect
+              v-model="editionForm.constructeurIds"
+              class="w-full"
+              :disabled="!canEdit || saving"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+              :initial-options="component?.constructeurs || []"
+            />
+          </div>
+        </div>
+
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Prix indicatif (€)</span>
+            </label>
+            <input
+              v-model="editionForm.prix"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              placeholder="Valeur indicatrice"
+            >
+          </div>
+        </div>
+
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedTypeStructure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+          :preview-badge="formatStructurePreview(selectedTypeStructure)"
+          variant="component"
+          show-empty-state
+          :resolve-piece-label="resolvePieceLabel"
+          :resolve-product-label="resolveProductLabel"
+          :resolve-subcomponent-label="resolveSubcomponentLabel"
+        />
+
+        <div
+          v-if="pieceSlotEntries.length || productSlotEntries.length || subcomponentSlotEntries.length"
+          class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4"
+        >
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Sélections du squelette</h2>
+            <p class="text-xs text-base-content/70">
+              Choisissez les pièces, produits et sous-composants pour chaque emplacement requis par la catégorie.
+            </p>
+          </header>
+
+          <div v-if="pieceSlotEntries.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="slot in pieceSlotEntries"
+                :key="`piece-slot-${slot.slotId}`"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <div class="flex items-start gap-2">
+                  <div class="flex-1">
+                    <PieceSelect
+                      :model-value="slot.selectedPieceId"
+                      :disabled="!canEdit || saving"
+                      :type-piece-id="slot.typePieceId"
+                      @update:model-value="(value) => setPieceSlotSelection(slot.slotId, value)"
+                    />
+                  </div>
+                  <div class="w-20 shrink-0">
+                    <input
+                      type="number"
+                      :value="slot.quantity"
+                      min="1"
+                      class="input input-bordered input-sm w-full text-center"
+                      :disabled="!canEdit || saving"
+                      title="Quantité"
+                      @change="(e) => setSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="productSlotEntries.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Produits</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="slot in productSlotEntries"
+                :key="`product-slot-${slot.slotId}`"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <ProductSelect
+                  :model-value="slot.selectedProductId"
+                  :disabled="!canEdit || saving"
+                  :type-product-id="slot.typeProductId"
+                  @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-if="subcomponentSlotEntries.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="slot in subcomponentSlotEntries"
+                :key="`sub-slot-${slot.slotId}`"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <ComposantSelect
+                  :model-value="slot.selectedComponentId"
+                  :disabled="!canEdit || saving"
+                  :type-composant-id="slot.typeComposantId"
+                  @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+            <p class="text-xs text-base-content/70">
+              Mettez à jour les valeurs propres à ce composant.
+            </p>
+          </header>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+        </div>
+
+        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h2 class="font-semibold text-base-content">Documents</h2>
+              <p class="text-xs text-base-content/70">
+                Gérez les documents associés à ce composant.
+              </p>
+            </div>
+            <span v-if="selectedFiles.length" class="badge badge-outline">
+              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+            <DocumentUpload
+              v-model="selectedFiles"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+              @files-added="handleFilesAdded"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+          <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+            Chargement des documents en cours…
+          </p>
+          <DocumentListInline
+            v-else
+            :documents="componentDocuments"
+            :can-delete="canEdit"
+            :can-edit="true"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document n'est associé à ce composant pour le moment."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
+
+        <EntityHistorySection
+          :entries="history"
+          :loading="historyLoading"
+          :error="historyError"
+          :field-labels="historyFieldLabels"
+        />
+
+        <EntityVersionList
+          entity-type="composant"
+          :entity-id="String(route.params.id)"
+          :field-labels="historyFieldLabels"
+          :refresh-key="versionRefreshKey"
+          @restored="fetchComponent()"
+        />
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/component-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="async () => { await submitEdition(); versionRefreshKey++ }">
+            <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+            Enregistrer les modifications
+          </button>
+        </div>
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="composant"
+            :entity-id="String(route.params.id)"
+            :entity-name="component?.name"
+            show-resolved
+          />
+        </div>
+      </div>
+    </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from '#imports'
+import { useComponentEdit } from '~/composables/useComponentEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const route = useRoute()
+const { updateDocument } = useDocuments()
+const { getConstructeurById } = useConstructeurs()
+const versionRefreshKey = ref(0)
+
+const {
+  component,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  componentDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
+  customFieldInputs,
+  historyFieldLabels,
+  canEdit,
+  canSubmit,
+  componentTypeList,
+  selectedType,
+  selectedTypeStructure,
+  structureSelections,
+  pieceSlotEntries,
+  productSlotEntries,
+  subcomponentSlotEntries,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  submitEdition,
+  setSlotQuantity,
+  setPieceSlotSelection,
+  setProductSlotSelection,
+  setSubcomponentSlotSelection,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  formatStructurePreview,
+  fetchComponent,
+} = useComponentEdit(String(route.params.id))
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = componentDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      componentDocuments.value[idx] = { ...componentDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+</script>
diff --git a/frontend/app/pages/component/[id]/index.vue b/frontend/app/pages/component/[id]/index.vue
new file mode 100644
index 0000000..720f3ee
--- /dev/null
+++ b/frontend/app/pages/component/[id]/index.vue
@@ -0,0 +1,558 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="componentDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement du composant…</p>
+      </div>
+
+      <div v-else-if="!component" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Composant introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu retrouver le composant demandé. Il a peut-être été supprimé.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier le composant' : component.name"
+            :subtitle="isEditMode ? 'Ajustez les informations du composant et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/component-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de composant</span>
+              </label>
+              <template v-if="isEditMode">
+                <div class="flex items-center gap-2">
+                  <select
+                    v-model="selectedTypeId"
+                    class="select select-bordered select-sm md:select-md flex-1"
+                    disabled
+                  >
+                    <option value="">Sélectionner une catégorie</option>
+                    <option
+                      v-for="type in componentTypeList"
+                      :key="type.id"
+                      :value="type.id"
+                    >
+                      {{ type.name }}
+                    </option>
+                  </select>
+                  <NuxtLink
+                    v-if="selectedTypeId"
+                    :to="`/component-category/${selectedTypeId}/edit`"
+                    class="btn btn-ghost btn-sm"
+                    title="Voir la catégorie"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                      <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                    </svg>
+                  </NuxtLink>
+                </div>
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ selectedType?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom du composant</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Description (if value or edit mode) -->
+          <div v-if="isEditMode || component.description" class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea
+              v-if="isEditMode"
+              v-model="editionForm.description"
+              class="textarea textarea-bordered textarea-sm md:textarea-md"
+              :disabled="!canEdit || saving"
+              placeholder="Description du composant (optionnel)"
+              rows="3"
+            />
+            <div v-else class="textarea textarea-bordered textarea-sm md:textarea-md bg-base-200">
+              {{ component.description }}
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || component.reference || constructeurLinks.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || component.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseur</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                v-model="editionForm.constructeurIds"
+                class="w-full"
+                :disabled="!canEdit || saving"
+                placeholder="Rechercher un ou plusieurs fournisseurs..."
+                :initial-options="component?.constructeurs || []"
+              />
+            </div>
+          </div>
+
+          <!-- Constructeur links table -->
+          <ConstructeurLinksTable
+            v-if="isEditMode && constructeurLinks.length"
+            v-model="constructeurLinks"
+          />
+          <ConstructeurLinksTable
+            v-else-if="!isEditMode && constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="true"
+          />
+
+          <!-- Prix (if value or edit mode) -->
+          <div v-if="isEditMode || component.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.prix"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ component.prix }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Skeleton preview (edit mode only) -->
+          <StructureSkeletonPreview
+            v-if="isEditMode && selectedType"
+            :structure="selectedTypeStructure"
+            :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+            :preview-badge="formatStructurePreview(selectedTypeStructure)"
+            variant="component"
+            show-empty-state
+            :resolve-piece-label="resolvePieceLabel"
+            :resolve-product-label="resolveProductLabel"
+            :resolve-subcomponent-label="resolveSubcomponentLabel"
+          />
+
+          <!-- Skeleton slot selections -->
+          <div
+            v-if="pieceSlotEntries.length || productSlotEntries.length || subcomponentSlotEntries.length"
+            class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4"
+          >
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">{{ isEditMode ? 'Sélections du squelette' : 'Structure du composant' }}</h2>
+              <p class="text-xs text-base-content/70">
+                {{ isEditMode ? 'Choisissez les pièces, produits et sous-composants pour chaque emplacement requis par la catégorie.' : 'Pièces, produits et sous-composants associés à ce composant.' }}
+              </p>
+            </header>
+
+            <div v-if="pieceSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in pieceSlotEntries"
+                  :key="`piece-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <template v-if="isEditMode">
+                    <div class="flex items-start gap-2">
+                      <div class="flex-1">
+                        <PieceSelect
+                          :model-value="slot.selectedPieceId"
+                          :disabled="!canEdit || saving"
+                          :type-piece-id="slot.typePieceId"
+                          @update:model-value="(value) => setPieceSlotSelection(slot.slotId, value)"
+                        />
+                      </div>
+                      <div class="w-20 shrink-0">
+                        <input
+                          type="number"
+                          :value="slot.quantity"
+                          min="1"
+                          class="input input-bordered input-sm w-full text-center"
+                          :disabled="!canEdit || saving"
+                          title="Quantité"
+                          @change="(e) => setSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                        >
+                      </div>
+                    </div>
+                  </template>
+                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+                    {{ slot.selectedPieceName || '— Non sélectionné' }}
+                    <span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="productSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Produits</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in productSlotEntries"
+                  :key="`product-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <template v-if="isEditMode">
+                    <ProductSelect
+                      :model-value="slot.selectedProductId"
+                      :disabled="!canEdit || saving"
+                      :type-product-id="slot.typeProductId"
+                      @update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
+                    />
+                  </template>
+                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                    {{ slot.selectedProductName || '— Non sélectionné' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="subcomponentSlotEntries.length" class="space-y-2">
+              <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                  v-for="slot in subcomponentSlotEntries"
+                  :key="`sub-slot-${slot.slotId}`"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                  </label>
+                  <template v-if="isEditMode">
+                    <ComposantSelect
+                      :model-value="slot.selectedComponentId"
+                      :disabled="!canEdit || saving"
+                      :type-composant-id="slot.typeComposantId"
+                      @update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
+                    />
+                  </template>
+                  <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                    {{ slot.selectedComponentName || '— Non sélectionné' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à ce composant.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  v-for="field in visibleCustomFields"
+                  :key="field.customFieldValueId || field.id || field.name"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-sm">{{ field.name }}</span>
+                  </label>
+                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || componentDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à ce composant.' : 'Documents associés à ce composant.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="componentDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments"
+                empty-text="Aucun document n'est associé à ce composant pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="componentDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à ce composant pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="composant"
+              :entity-id="String(route.params.id)"
+              :entity-name="component?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from '#imports'
+import { useComponentEdit } from '~/composables/useComponentEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { usePermissions } from '~/composables/usePermissions'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+
+const route = useRoute()
+const { canEdit } = usePermissions()
+const { getConstructeurById } = useConstructeurs()
+const { updateDocument } = useDocuments()
+
+const isEditMode = ref(false)
+
+const {
+  component,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  componentDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  constructeurLinks,
+  constructeurIdsFromForm,
+  customFieldInputs,
+  historyFieldLabels,
+  canSubmit,
+  componentTypeList,
+  selectedType,
+  selectedTypeStructure,
+  pieceSlotEntries,
+  productSlotEntries,
+  subcomponentSlotEntries,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  submitEdition: _submitEdition,
+  fetchComponent,
+  setSlotQuantity,
+  setPieceSlotSelection,
+  setProductSlotSelection,
+  setSubcomponentSlotSelection,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  formatStructurePreview,
+} = useComponentEdit(String(route.params.id))
+
+const submitEdition = async () => {
+  await _submitEdition()
+  if (!saving.value) {
+    await fetchComponent()
+    isEditMode.value = false
+  }
+}
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    // Remove links whose ID was removed from the select
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = componentDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      componentDocuments.value[idx] = { ...componentDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>
diff --git a/frontend/app/pages/component/create.vue b/frontend/app/pages/component/create.vue
new file mode 100644
index 0000000..61b4c56
--- /dev/null
+++ b/frontend/app/pages/component/create.vue
@@ -0,0 +1,282 @@
+<template>
+  <main class="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div class="space-y-1">
+        <h1 class="text-3xl font-semibold text-base-content">Nouvel composant</h1>
+        <p class="text-sm text-base-content/70">
+          Sélectionnez la catégorie cible puis complétez les informations du composant.
+        </p>
+      </div>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
+        Retour au catalogue
+      </button>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-6">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Catégorie de composant</span>
+            </label>
+            <SearchSelect
+              v-model="selectedTypeId"
+              :options="componentTypeList"
+              :loading="loadingTypes"
+              size="sm"
+              placeholder="Rechercher une catégorie..."
+              empty-text="Aucune catégorie disponible"
+              :option-label="typeOptionLabel"
+              :option-description="typeOptionDescription"
+              :disabled="!canEdit || loadingTypes || submitting"
+            />
+            <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
+              Chargement des catégories…
+            </p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom du composant</span>
+            </label>
+            <input
+              v-model="creationForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Nom affiché dans le catalogue"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="creationForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || submitting || !selectedType"
+            placeholder="Description du composant (optionnel)"
+            rows="3"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="creationForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Référence interne ou fournisseur"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseur</span>
+            </label>
+            <ConstructeurSelect
+              v-model="creationForm.constructeurIds"
+              class="w-full"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+            />
+          </div>
+        </div>
+
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Prix indicatif (€)</span>
+            </label>
+            <input
+              v-model="creationForm.prix"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Valeur indicatrice"
+            >
+          </div>
+        </div>
+
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedTypeStructure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+          :preview-badge="formatStructurePreview(selectedTypeStructure)"
+          variant="component"
+          :resolve-piece-label="resolvePieceLabel"
+          :resolve-product-label="resolveProductLabel"
+          :resolve-subcomponent-label="resolveSubcomponentLabel"
+        />
+
+        <div
+          v-if="structureHasRequirements"
+          class="space-y-4 rounded-lg border border-primary/30 bg-primary/5 p-4"
+        >
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <h2 class="font-semibold text-base-content">
+                Sélection des éléments du squelette
+              </h2>
+              <p class="text-xs text-base-content/70">
+                Affectez les pièces et sous-composants concrets correspondant à la catégorie choisie.
+              </p>
+            </div>
+            <span
+              class="badge"
+              :class="structureSelectionsComplete ? 'badge-success' : structureDataLoading ? 'badge-info' : 'badge-warning'"
+            >
+              {{ structureSelectionsComplete ? 'Complet' : structureDataLoading ? 'Chargement…' : 'Incomplet' }}
+            </span>
+          </div>
+
+          <div
+            v-if="structureDataLoading"
+            class="flex items-center gap-3 rounded-md border border-base-200 bg-base-100 p-3 text-sm text-base-content/70"
+          >
+            <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
+            Chargement du catalogue de pièces, produits et composants…
+          </div>
+          <ComponentStructureAssignmentNode
+            v-else-if="structureAssignments"
+            :assignment="structureAssignments"
+            :pieces="availablePieces"
+            :products="availableProducts"
+            :components="availableComponents"
+            :pieces-loading="piecesLoading"
+            :products-loading="productsLoading"
+            :components-loading="componentsLoading"
+            :piece-type-label-map="pieceTypeLabelMap"
+            :product-type-label-map="productTypeLabelMap"
+            :component-type-label-map="componentTypeLabelMap"
+          />
+          <p v-else class="text-xs text-error">
+            Impossible de générer les emplacements définis par le squelette.
+          </p>
+        </div>
+
+        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+            <p class="text-xs text-base-content/70">
+              Renseignez les valeurs propres à ce composant selon le squelette choisi.
+            </p>
+          </header>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
+        </div>
+
+        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h2 class="font-semibold text-base-content">Documents</h2>
+              <p class="text-xs text-base-content/70">
+                Ajoutez des documents (PDF, images, textes…) liés à ce composant.
+              </p>
+            </div>
+            <span v-if="selectedDocuments.length" class="badge badge-outline">
+              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} prêt{{ selectedDocuments.length > 1 ? 's' : '' }} à être ajouté{{ selectedDocuments.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || submitting }">
+            <DocumentUpload
+              v-model="selectedDocuments"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/component-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': submitting }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitCreation">
+            <span v-if="submitting" class="loading loading-spinner loading-sm mr-2"></span>
+            Créer le composant
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const { getConstructeurById } = useConstructeurs()
+
+const {
+  selectedTypeId,
+  submitting,
+  creationForm,
+  constructeurLinks,
+  customFieldInputs,
+  structureAssignments,
+  selectedDocuments,
+  uploadingDocuments,
+  loadingTypes,
+  componentTypeList,
+  selectedType,
+  selectedTypeStructure,
+  availablePieces,
+  availableProducts,
+  availableComponents,
+  piecesLoading,
+  productsLoading,
+  componentsLoading,
+  structureDataLoading,
+  pieceTypeLabelMap,
+  productTypeLabelMap,
+  componentTypeLabelMap,
+  structureHasRequirements,
+  structureSelectionsComplete,
+  canEdit,
+  canSubmit,
+  typeOptionLabel,
+  typeOptionDescription,
+  formatStructurePreview,
+  resolvePieceLabel,
+  resolveProductLabel,
+  resolveSubcomponentLabel,
+  submitCreation,
+} = useComponentCreate()
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+</script>
diff --git a/frontend/app/pages/constructeurs.vue b/frontend/app/pages/constructeurs.vue
new file mode 100644
index 0000000..eeef20f
--- /dev/null
+++ b/frontend/app/pages/constructeurs.vue
@@ -0,0 +1,240 @@
+<template>
+  <main class="container mx-auto px-6 py-8 space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold">
+          Fournisseurs
+        </h1>
+        <p class="text-sm text-gray-500">
+          Gérez les fournisseurs et leurs coordonnées.
+        </p>
+      </div>
+      <button v-if="canEdit" class="btn btn-primary" @click="openCreateModal">
+        <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+        Nouveau fournisseur
+      </button>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <DataTable
+          :columns="columns"
+          :rows="filteredConstructeurs"
+          :loading="loading"
+          :sort="currentSort"
+          :show-counter="false"
+          empty-message="Aucun fournisseur trouvé."
+          no-results-message="Aucun fournisseur trouvé."
+          @sort="handleSort"
+        >
+          <template #toolbar>
+            <label class="w-full sm:w-72">
+              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+              <input
+                v-model="searchTerm"
+                type="search"
+                class="input input-bordered input-sm w-full mt-1"
+                placeholder="Nom, email ou téléphone"
+                @input="debouncedSearch"
+              />
+            </label>
+          </template>
+
+          <template #cell-phone="{ row }">
+            {{ formatPhoneDisplay(row.phone) }}
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            <span class="whitespace-nowrap">{{ formatDate(row.createdAt) }}</span>
+          </template>
+
+          <template #cell-actions="{ row }">
+            <div class="flex items-center justify-end gap-2">
+              <button class="btn btn-ghost btn-xs" @click="openEditModal(row)">
+                {{ canEdit ? 'Modifier' : 'Consulter' }}
+              </button>
+              <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
+                Supprimer
+              </button>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </div>
+
+    <dialog class="modal" :class="{ 'modal-open': modalOpen }">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">
+          {{ editingConstructeur ? (canEdit ? 'Modifier' : 'Détails du') : 'Nouveau' }} fournisseur
+        </h3>
+        <form class="space-y-4" @submit.prevent="saveConstructeur">
+          <div class="form-control">
+            <label class="label"><span class="label-text">Nom</span></label>
+            <input v-model="form.name" type="text" class="input input-bordered" :disabled="!canEdit" required>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FieldEmail v-model="form.email" label="Email" :disabled="!canEdit" />
+            <FieldPhone v-model="form.phone" label="Téléphone" :disabled="!canEdit" />
+          </div>
+          <div class="modal-action">
+            <button type="button" class="btn" @click="closeModal">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary" :disabled="!canEdit || saving">
+              <span v-if="saving" class="loading loading-spinner loading-xs mr-2" />
+              {{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  </main>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import FieldEmail from '~/components/form/FieldEmail.vue'
+import FieldPhone from '~/components/form/FieldPhone.vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useToast } from '~/composables/useToast'
+import { usePersistedValue } from '~/composables/usePersistedValue'
+import { formatPhone } from '~/utils/formatters/phone'
+import { formatFrenchDate } from '~/utils/date'
+import IconLucidePlus from '~icons/lucide/plus'
+
+const { canEdit } = usePermissions()
+const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
+const { showError } = useToast()
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'phone', label: 'Téléphone', sortable: true },
+  { key: 'createdAt', label: 'Date de création', sortable: true },
+  { key: 'actions', label: 'Actions', align: 'right' },
+]
+
+const searchTerm = ref('')
+const sortKey = usePersistedValue('constructeurs-sort', 'name')
+const sortDir = ref('asc')
+
+const currentSort = computed(() => ({
+  field: sortKey.value,
+  direction: sortDir.value,
+}))
+
+const handleSort = (sort) => {
+  sortKey.value = sort.field
+  sortDir.value = sort.direction
+}
+
+const modalOpen = ref(false)
+const saving = ref(false)
+const editingConstructeur = ref(null)
+const form = ref({ name: '', email: '', phone: '' })
+
+const filteredConstructeurs = computed(() => {
+  const key = sortKey.value
+  const dir = sortDir.value === 'desc' ? -1 : 1
+  const sorted = [...constructeurs.value].sort((a, b) => {
+    if (key === 'createdAt') {
+      return dir * (new Date(a[key] || 0).getTime() - new Date(b[key] || 0).getTime())
+    }
+    return dir * (a[key] || '').localeCompare(b[key] || '')
+  })
+  if (!searchTerm.value) { return sorted }
+  const term = searchTerm.value.toLowerCase()
+  return sorted.filter(item =>
+    [item.name, item.email, item.phone].some(value => value && value.toLowerCase().includes(term)),
+  )
+})
+
+const debouncedSearch = debounce(async () => {
+  await searchConstructeurs(searchTerm.value)
+}, 300)
+
+const formatDate = formatFrenchDate
+
+const formatPhoneDisplay = (value) => {
+  const formatted = formatPhone(value)
+  if (formatted) {
+    return formatted
+  }
+  return value || '—'
+}
+
+function debounce(fn, delay) {
+  let timeout
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => fn(...args), delay)
+  }
+}
+
+const resetForm = () => {
+  form.value = { name: '', email: '', phone: '' }
+  editingConstructeur.value = null
+}
+
+const openCreateModal = () => {
+  resetForm()
+  modalOpen.value = true
+}
+
+const openEditModal = (constructeur) => {
+  editingConstructeur.value = constructeur
+  form.value = {
+    name: constructeur.name,
+    email: constructeur.email || '',
+    phone: constructeur.phone || '',
+  }
+  modalOpen.value = true
+}
+
+const closeModal = () => {
+  modalOpen.value = false
+  resetForm()
+}
+
+const saveConstructeur = async () => {
+  const trimmedName = form.value.name.trim()
+  const duplicate = constructeurs.value.find(
+    c => c.name.toLowerCase() === trimmedName.toLowerCase()
+      && c.id !== editingConstructeur.value?.id,
+  )
+  if (duplicate) {
+    showError(`Un fournisseur "${duplicate.name}" existe déjà.`)
+    return
+  }
+
+  saving.value = true
+  const payload = { ...form.value, name: trimmedName }
+  if (!payload.email) { delete payload.email }
+  if (!payload.phone) { delete payload.phone }
+  let result
+  if (editingConstructeur.value) {
+    result = await updateConstructeur(editingConstructeur.value.id, payload)
+  }
+  else {
+    result = await createConstructeur(payload)
+  }
+  saving.value = false
+  if (result.success) {
+    closeModal()
+    await searchConstructeurs(searchTerm.value)
+  }
+}
+
+const { confirm } = useConfirm()
+
+const confirmDelete = async (constructeur) => {
+  if (!await confirm({ message: `Supprimer le fournisseur "${constructeur.name}" ?` })) { return }
+  const result = await deleteConstructeur(constructeur.id)
+  if (!result.success && result.error) {
+    showError(result.error)
+  }
+}
+
+onMounted(() => loadConstructeurs())
+</script>
diff --git a/frontend/app/pages/documents.vue b/frontend/app/pages/documents.vue
new file mode 100644
index 0000000..031a336
--- /dev/null
+++ b/frontend/app/pages/documents.vue
@@ -0,0 +1,271 @@
+<template>
+  <main class="container mx-auto px-6 py-8 space-y-8">
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="documents"
+      @close="closePreview"
+    />
+
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+
+    <section class="card bg-base-100 shadow-sm">
+      <div class="card-body space-y-6">
+        <DataTable
+          :columns="columns"
+          :rows="documents"
+          :loading="loading"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :show-per-page="true"
+          empty-message="Aucun document n'a encore été ajouté."
+          no-results-message="Aucun document ne correspond à votre recherche."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+        >
+          <template #toolbar>
+            <label class="w-full sm:w-72">
+              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+              <input
+                v-model="table.searchTerm.value"
+                type="text"
+                class="input input-bordered input-sm w-full mt-1"
+                placeholder="Nom du document..."
+                @input="table.debouncedSearch"
+              />
+            </label>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="doc-filter"
+              >
+                Rattachement
+              </label>
+              <select
+                id="doc-filter"
+                v-model="attachmentFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="all">Tous</option>
+                <option value="site">Sites</option>
+                <option value="machine">Machines</option>
+                <option value="composant">Composants</option>
+                <option value="piece">Pi&egrave;ces</option>
+                <option value="product">Produits</option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="doc-type-filter"
+              >
+                Type
+              </label>
+              <select
+                id="doc-type-filter"
+                v-model="typeFilter"
+                class="select select-bordered select-sm"
+                @change="table.handleFilterChange"
+              >
+                <option value="all">Tous</option>
+                <option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
+                  {{ t.label }}
+                </option>
+              </select>
+            </div>
+          </template>
+
+          <template #cell-name="{ row }">
+            <div class="flex items-center gap-3">
+              <span class="text-xl" :class="documentIcon(row).colorClass">
+                <component
+                  :is="documentIcon(row).component"
+                  class="h-6 w-6"
+                  aria-hidden="true"
+                />
+              </span>
+              <div>
+                <div class="font-semibold">{{ row.name }}</div>
+                <div class="text-xs text-base-content/50">{{ row.filename }}</div>
+              </div>
+            </div>
+          </template>
+
+          <template #cell-mimeType="{ row }">
+            {{ row.mimeType || 'Inconnu' }}
+          </template>
+
+          <template #cell-type="{ row }">
+            <span class="badge badge-sm badge-outline">{{ getDocumentTypeLabel(row.type || 'documentation') }}</span>
+          </template>
+
+          <template #cell-size="{ row }">
+            {{ formatSize(row.size) }}
+          </template>
+
+          <template #cell-attachment="{ row }">
+            <div class="flex flex-col text-xs">
+              <span v-if="row.site">Site &middot; {{ row.site.name }}</span>
+              <span v-else-if="row.machine">Machine &middot; {{ row.machine.name }}</span>
+              <span v-else-if="row.composant">Composant &middot; {{ row.composant.name }}</span>
+              <span v-else-if="row.piece">Pi&egrave;ce &middot; {{ row.piece.name }}</span>
+              <span v-else-if="row.product">Produit &middot; {{ row.product.name }}</span>
+              <span v-else class="text-base-content/30">Non d&eacute;fini</span>
+            </div>
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            {{ formatFrenchDate(row.createdAt) }}
+          </template>
+
+          <template #cell-actions="{ row }">
+            <div class="flex justify-end gap-2">
+              <button
+                v-if="canEdit"
+                class="btn btn-ghost btn-xs"
+                type="button"
+                @click="openEditModal(row)"
+              >
+                Modifier
+              </button>
+              <button
+                class="btn btn-ghost btn-xs"
+                type="button"
+                :disabled="!canPreviewDocument(row)"
+                :title="canPreviewDocument(row) ? 'Consulter le document' : 'Aucun aper\u00E7u disponible pour ce type'"
+                @click="openPreview(row)"
+              >
+                Consulter
+              </button>
+              <button class="btn btn-ghost btn-xs" type="button" @click="downloadDocument(row)">
+                T&eacute;l&eacute;charger
+              </button>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, type Ref } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { useDataTable } from '~/composables/useDataTable'
+import { usePermissions } from '~/composables/usePermissions'
+import { getFileIcon } from '~/utils/fileIcons'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import { formatFrenchDate } from '~/utils/date'
+import { DOCUMENT_TYPES, getDocumentTypeLabel } from '~/shared/documentTypes'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+
+const { documents, total, loading, loadDocuments, updateDocument } = useDocuments()
+const { canEdit } = usePermissions()
+
+const table = useDataTable(
+  { fetchData: fetchDocuments },
+  {
+    defaultSort: 'createdAt',
+    defaultDirection: 'desc',
+    defaultPerPage: 30,
+    persistToUrl: true,
+    extraParams: {
+      filter: { default: 'all' },
+      typeFilter: { default: 'all' },
+    },
+  },
+)
+
+const attachmentFilter = table.filters.filter as Ref<string>
+const typeFilter = table.filters.typeFilter as Ref<string>
+
+const previewDocument = ref<any>(null)
+const previewVisible = ref(false)
+const editingDocument = ref<any>(null)
+const editModalVisible = ref(false)
+
+const documentsOnPage = computed(() => documents.value.length)
+const paginationState = table.pagination(total, documentsOnPage)
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true, sortKey: 'name' },
+  { key: 'mimeType', label: 'Type MIME' },
+  { key: 'type', label: 'Type' },
+  { key: 'size', label: 'Taille', sortable: true, sortKey: 'size' },
+  { key: 'attachment', label: 'Rattaché à' },
+  { key: 'createdAt', label: 'Date', sortable: true, sortKey: 'createdAt' },
+  { key: 'actions', label: 'Actions', align: 'right' as const },
+]
+
+async function fetchDocuments() {
+  await loadDocuments({
+    search: table.searchTerm.value,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value as 'asc' | 'desc',
+    attachmentFilter: attachmentFilter.value,
+    type: typeFilter.value,
+    force: true,
+  })
+}
+
+const formatSize = (size: number | undefined | null) => {
+  if (size === undefined || size === null) return '\u2014'
+  if (size === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+
+const documentIcon = (doc: any) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
+
+const downloadDocument = (doc: any) => {
+  if (doc?.downloadUrl) window.open(doc.downloadUrl, '_blank')
+}
+
+const openPreview = (doc: any) => {
+  if (!canPreviewDocument(doc)) return
+  previewDocument.value = doc
+  previewVisible.value = true
+}
+
+const closePreview = () => {
+  previewVisible.value = false
+  previewDocument.value = null
+}
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name: string; type: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const doc = documents.value.find((d) => d.id === editingDocument.value.id)
+    if (doc) {
+      doc.name = data.name
+      doc.type = data.type
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  fetchDocuments()
+})
+</script>
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
new file mode 100644
index 0000000..7527fac
--- /dev/null
+++ b/frontend/app/pages/index.vue
@@ -0,0 +1,439 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <div class="my-8">
+      <!-- Header with Stats -->
+      <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between mb-8">
+        <div>
+          <h2 class="text-3xl font-bold text-base-content tracking-tight">
+            Vue d'ensemble
+          </h2>
+          <p class="text-base-content/50 mt-1">
+            Machines organisées par site
+          </p>
+        </div>
+        <div class="flex gap-3">
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
+            <p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
+          </div>
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Machines</p>
+            <p class="text-2xl font-bold text-secondary tracking-tight">{{ totalMachines }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="card bg-base-100 shadow-sm mb-8">
+        <div class="card-body py-4">
+          <div class="flex flex-col md:flex-row md:items-end gap-4">
+            <div class="form-control flex-1">
+              <label class="label">
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
+              </label>
+              <div class="relative">
+                <IconLucideSearch class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/30" aria-hidden="true" />
+                <input
+                  v-model="searchTerm"
+                  type="text"
+                  placeholder="Nom de machine ou site..."
+                  class="input input-bordered pl-10 w-full"
+                >
+              </div>
+            </div>
+            <div class="form-control md:w-64">
+              <label class="label">
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
+              </label>
+              <select v-model="selectedSiteFilter" class="select select-bordered w-full">
+                <option value="">
+                  Tous les sites
+                </option>
+                <option
+                  v-for="site in sites"
+                  :key="site.id"
+                  :value="site.id"
+                >
+                  {{ site.name }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="flex justify-center items-center py-16">
+        <span class="loading loading-spinner loading-lg text-primary" />
+      </div>
+
+      <!-- Empty State -->
+      <div v-else-if="filteredSites.length === 0" class="text-center py-16">
+        <div class="max-w-sm mx-auto">
+          <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+            <IconLucideFactory
+              class="w-8 h-8 text-base-content/30"
+              aria-hidden="true"
+            />
+          </div>
+          <h3 class="text-lg font-semibold text-base-content mb-1">
+            Aucune machine trouvée
+          </h3>
+          <p class="text-sm text-base-content/50 mb-6">
+            Commencez par ajouter des sites et des machines.
+          </p>
+          <div class="flex gap-2 justify-center">
+            <button v-if="canEdit" class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
+              Ajouter un site
+            </button>
+            <button
+              v-if="canEdit"
+              class="btn btn-ghost btn-sm"
+              @click="showAddMachineModal = true"
+            >
+              Ajouter une machine
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sites List -->
+      <div v-else class="space-y-5">
+        <div
+          v-for="site in filteredSites"
+          :key="site.id"
+          class="card site-card shadow-md overflow-hidden"
+          :style="{
+            borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+            background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
+        >
+          <div class="card-body">
+            <!-- Site Header -->
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex items-start gap-4">
+                <div
+                  class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
+                  :style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
+                >
+                  <IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
+                </div>
+                <div class="min-w-0">
+                  <h3
+                    class="text-lg font-bold tracking-tight text-base-content"
+                  >
+                    {{ site.name }}
+                  </h3>
+                  <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
+                    <span v-if="site.contactName" class="flex items-center gap-1.5">
+                      <IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ site.contactName }}
+                    </span>
+                    <span v-if="site.contactPhone" class="flex items-center gap-1.5">
+                      <IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ formatPhoneDisplay(site.contactPhone) }}
+                    </span>
+                    <span v-if="site.contactCity" class="flex items-center gap-1.5">
+                      <IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ site.contactPostalCode }} {{ site.contactCity }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 shrink-0">
+                <span
+                  class="badge font-bold"
+                  :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+                  :class="!site.color ? 'badge-primary' : ''"
+                >
+                  {{ site.machines?.length || 0 }}
+                </span>
+                <button
+                  class="btn btn-ghost btn-xs btn-circle"
+                  @click="toggleSiteCollapse(site.id)"
+                >
+                  <IconLucideChevronDown
+                    class="w-4 h-4 transition-transform duration-200"
+                    :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
+                    aria-hidden="true"
+                  />
+                </button>
+              </div>
+            </div>
+
+            <!-- Machines Grid -->
+            <div
+              v-if="
+                !collapsedSites.includes(site.id) &&
+                  site.machines &&
+                  site.machines.length > 0
+              "
+              class="mt-4 pt-4 border-t border-base-200/80"
+            >
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                <div
+                  v-for="machine in site.machines"
+                  :key="machine.id"
+                  class="group flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md hover:border-primary/20 transition-all cursor-pointer p-4"
+                  @click="viewMachineDetails(machine)"
+                >
+                  <div class="flex items-center justify-between mb-2">
+                    <h4 class="font-semibold text-sm text-base-content group-hover:text-primary transition-colors truncate">
+                      {{ machine.name }}
+                    </h4>
+                  </div>
+
+                  <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40">
+                    <IconLucideTag class="w-3 h-3" aria-hidden="true" />
+                    <span>{{ machine.reference }}</span>
+                  </div>
+
+                  <div class="mt-auto pt-3 flex items-center justify-end gap-2">
+                    <button
+                      v-if="canEdit"
+                      class="btn btn-ghost btn-sm"
+                      @click.stop="editMachine(machine)"
+                    >
+                      Modifier
+                    </button>
+                    <button
+                      v-if="canEdit"
+                      class="btn btn-ghost btn-sm text-error"
+                      @click.stop="confirmDeleteMachine(machine)"
+                    >
+                      Supprimer
+                    </button>
+                    <NuxtLink
+                      :to="`/machine/${machine.id}`"
+                      class="btn btn-primary btn-sm"
+                      @click.stop
+                    >
+                      Détails
+                    </NuxtLink>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Empty Site State -->
+            <div
+              v-else-if="
+                !collapsedSites.includes(site.id) &&
+                  (!site.machines || site.machines.length === 0)
+              "
+              class="text-center py-8 mt-4 border-t border-base-200/80"
+            >
+              <div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
+                <IconLucideFactory class="w-5 h-5 text-base-content/25" aria-hidden="true" />
+              </div>
+              <p class="text-sm text-base-content/40 mb-3">
+                Aucune machine dans ce site
+              </p>
+              <button
+                v-if="canEdit"
+                class="btn btn-sm btn-primary btn-outline"
+                @click="addMachineToSite(site)"
+              >
+                Ajouter une machine
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Site Modal -->
+    <AddSiteModal
+      :open="showAddSiteModal"
+      :disabled="!canEdit"
+      @close="showAddSiteModal = false"
+      @create="handleCreateSite"
+    />
+
+    <!-- Add Machine Modal -->
+    <AddMachineModal
+      :open="showAddMachineModal"
+      :sites="sites"
+      :disabled="!canEdit"
+      :preselected-site-id="preselectedSiteId"
+      @close="showAddMachineModal = false"
+      @create="handleCreateMachine"
+    />
+  </main>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useSites } from '~/composables/useSites'
+import { useMachines } from '~/composables/useMachines'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import IconLucideFactory from '~icons/lucide/factory'
+import IconLucideMapPin from '~icons/lucide/map-pin'
+import IconLucideUser from '~icons/lucide/user'
+import IconLucidePhone from '~icons/lucide/phone'
+import IconLucideMapPinned from '~icons/lucide/map-pinned'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
+import IconLucideTag from '~icons/lucide/tag'
+import IconLucideSearch from '~icons/lucide/search'
+import { formatPhone } from '~/utils/formatters/phone'
+import { extractRelationId } from '~/shared/apiRelations'
+
+const { canEdit } = usePermissions()
+const { sites, loading, loadSites, createSite } = useSites()
+const { machines, loadMachines, createMachine, deleteMachine } = useMachines()
+
+// Data
+const showAddSiteModal = ref(false)
+const showAddMachineModal = ref(false)
+const searchTerm = ref('')
+const selectedSiteFilter = ref('')
+const collapsedSites = ref([])
+const preselectedSiteId = ref('')
+
+// Computed
+const machinesBySiteId = computed(() => {
+  const map = new Map()
+
+  machines.value.forEach((machine) => {
+    const siteId = machine.siteId || extractRelationId(machine.site)
+    if (!siteId) { return }
+
+    if (!map.has(siteId)) {
+      map.set(siteId, [])
+    }
+
+    map.get(siteId).push(machine)
+  })
+
+  return map
+})
+
+const sitesWithMachines = computed(() => {
+  return sites.value.map((site) => ({
+    ...site,
+    machines: machinesBySiteId.value.get(site.id) || []
+  }))
+})
+
+const totalMachines = computed(() => {
+  return sitesWithMachines.value.reduce((total, site) => {
+    return total + (site.machines?.length || 0)
+  }, 0)
+})
+
+const formatPhoneDisplay = (value) => {
+  const formatted = formatPhone(value)
+  if (formatted) {
+    return formatted
+  }
+  return value || '—'
+}
+
+const filteredSites = computed(() => {
+  let filtered = sitesWithMachines.value
+
+  // Filtrer par site
+  if (selectedSiteFilter.value) {
+    filtered = filtered.filter(site => site.id === selectedSiteFilter.value)
+  }
+
+  // Filtrer par terme de recherche
+  if (searchTerm.value) {
+    filtered = filtered.filter((site) => {
+      const lowerTerm = searchTerm.value.toLowerCase()
+      const siteMatches = [
+        site.name,
+        site.contactName,
+        site.contactPhone,
+        site.contactAddress,
+        site.contactPostalCode,
+        site.contactCity
+      ].some((field) => {
+        if (!field) { return false }
+        return field.toLowerCase().includes(lowerTerm)
+      })
+
+      const machineMatches = site.machines?.some(
+        machine => {
+          const name = (machine.name || '').toLowerCase()
+          const reference = (machine.reference || '').toLowerCase()
+          return name.includes(lowerTerm) || reference.includes(lowerTerm)
+        }
+      )
+
+      return siteMatches || machineMatches
+    })
+  }
+
+  return filtered
+})
+
+// Methods
+const handleCreateSite = async (data) => {
+  const result = await createSite(data)
+  if (result.success) {
+    showAddSiteModal.value = false
+  }
+}
+
+const handleCreateMachine = async (data) => {
+  const result = await createMachine(data)
+
+  if (result.success) {
+    showAddMachineModal.value = false
+    await loadMachines()
+  }
+}
+
+const toggleSiteCollapse = (siteId) => {
+  const index = collapsedSites.value.indexOf(siteId)
+  if (index > -1) {
+    collapsedSites.value.splice(index, 1)
+  } else {
+    collapsedSites.value.push(siteId)
+  }
+}
+
+const viewMachineDetails = (machine) => {
+  navigateTo(`/machine/${machine.id}`)
+}
+
+const editMachine = (machine) => {
+  navigateTo(`/machine/${machine.id}?edit=true`)
+}
+
+const { confirm: confirmDialog } = useConfirm()
+
+const confirmDeleteMachine = async (machine) => {
+  const { showError, showSuccess } = useToast()
+
+  if (
+    await confirmDialog({
+      message: `Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.`,
+    })
+  ) {
+    try {
+      const result = await deleteMachine(machine.id)
+      if (result.success) {
+        showSuccess(`Machine "${machine.name}" supprimée avec succès`)
+        await loadMachines()
+      } else {
+        showError(`Impossible de supprimer la machine : ${result.error}`)
+      }
+    } catch (error) {
+      showError(`Impossible de supprimer la machine : ${humanizeError(error.message)}`)
+    }
+  }
+}
+
+const addMachineToSite = (site) => {
+  preselectedSiteId.value = site.id
+  showAddMachineModal.value = true
+}
+
+// Lifecycle
+onMounted(async () => {
+  await Promise.all([loadSites(), loadMachines()])
+})
+</script>
diff --git a/frontend/app/pages/machine/[id].vue b/frontend/app/pages/machine/[id].vue
new file mode 100644
index 0000000..c5f0a15
--- /dev/null
+++ b/frontend/app/pages/machine/[id].vue
@@ -0,0 +1,323 @@
+<template>
+  <div>
+    <main class="container mx-auto px-6 py-8">
+    <!-- Loading State -->
+    <div v-if="d.loading.value" class="flex justify-center items-center py-16">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+
+    <!-- Machine Details -->
+    <div v-else-if="d.machine.value" ref="d.printAreaRef" class="space-y-8">
+      <DocumentPreviewModal
+        :document="d.previewDocument.value"
+        :visible="d.previewVisible.value"
+        :documents="d.machineDocumentsList.value"
+        @close="d.closePreview"
+      />
+
+      <!-- Header with actions -->
+      <MachineDetailHeader
+        :title="machineViewTitle"
+        :is-edit-mode="d.isEditMode.value"
+        @toggle-edit="d.toggleEditMode"
+        @open-print="d.openPrintModal"
+      />
+
+      <!-- Debug info -->
+      <div v-if="d.debug.value" class="bg-yellow-100 p-4 rounded-lg">
+        <p>Debug: Machine trouvée - {{ d.machine.value.name }}</p>
+        <p>Components count: {{ d.components.value.length }}</p>
+        <p>Pieces count: {{ d.pieces.value.length }}</p>
+      </div>
+
+      <!-- Hero -->
+      <PageHero
+        :title="d.machine.value.name"
+        :subtitle="d.machine.value.description"
+        min-height="min-h-[20vh]"
+        max-width="max-w-md"
+        rounded
+      >
+        <div class="flex justify-center gap-4">
+          <div
+            v-if="d.machine.value.site?.name"
+            class="badge badge-outline font-semibold"
+            :style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
+          >
+            {{ d.machine.value.site?.name }}
+          </div>
+          <div v-if="d.machine.value.reference" class="badge badge-outline">
+            {{ d.machine.value.reference }}
+          </div>
+        </div>
+      </PageHero>
+
+      <!-- Machine Info Card -->
+      <MachineInfoCard
+        ref="machineInfoCardRef"
+        :is-edit-mode="d.isEditMode.value"
+        :machine-name="d.machineName.value"
+        :machine-reference="d.machineReference.value"
+        :machine-site-id="d.machineSiteId.value"
+        :machine-site-name="d.machine.value?.site?.name ?? ''"
+        :sites="d.sites.value"
+        :machine-constructeur-ids="d.machineConstructeurIds.value"
+        :machine-constructeurs-display="d.machineConstructeursDisplay.value"
+        :has-machine-constructeur="d.hasMachineConstructeur.value"
+        :constructeur-links="d.constructeurLinks.value"
+        :visible-custom-fields="d.visibleMachineCustomFields.value"
+        :get-machine-field-id="d.getMachineFieldId"
+        :machine-id="machineId"
+        :machine-custom-field-defs="d.machine.value?.customFields ?? []"
+        @update:machine-name="d.machineName.value = $event"
+        @update:machine-reference="d.machineReference.value = $event"
+        @update:machine-site-id="d.machineSiteId.value = $event"
+        @update:constructeur-ids="d.handleMachineConstructeurChange"
+        @update:constructeur-links="d.constructeurLinks.value = $event"
+        @remove-constructeur-link="handleRemoveConstructeurLink"
+        @set-custom-field-value="d.setMachineCustomFieldValue"
+        @custom-fields-saved="() => { d.loadMachineData(); refreshVersions() }"
+      />
+
+      <!-- Documents -->
+      <MachineDocumentsCard
+        v-if="d.isEditMode.value || d.machineDocumentsList.value.length > 0"
+        :documents="d.machineDocumentsList.value"
+        :is-edit-mode="d.isEditMode.value"
+        :uploading="d.machineDocumentsUploading.value"
+        :files="d.machineDocumentFiles.value"
+        @update:files="d.machineDocumentFiles.value = $event"
+        @files-added="d.handleMachineFilesAdded"
+        @preview="d.openPreview"
+        @download="d.downloadDocument"
+        @remove="d.removeMachineDocument"
+      />
+
+      <!-- Produits associés -->
+      <MachineProductsCard
+        v-if="d.isEditMode.value || d.machineDirectProducts.value.length > 0"
+        :products="d.machineDirectProducts.value"
+        :is-edit-mode="d.isEditMode.value"
+        @add-product="openAddModal('product')"
+        @remove-product="async (id) => { await d.removeProductLink(id); refreshVersions() }"
+      />
+
+      <!-- Components Section -->
+      <MachineComponentsCard
+        v-if="d.isEditMode.value || d.components.value.length > 0"
+        :components="d.components.value"
+        :is-edit-mode="d.isEditMode.value"
+        :collapsed="d.componentsCollapsed.value"
+        :collapse-toggle-token="d.collapseToggleToken.value"
+        @toggle-collapse="d.toggleAllComponents"
+        @update-component="d.updateComponent"
+        @edit-piece="d.updatePieceFromComponent"
+        @custom-field-update="d.updatePieceCustomField"
+        @add-component="openAddModal('component')"
+        @remove-component="async (id) => { await d.removeComponentLink(id); refreshVersions() }"
+      />
+
+      <!-- Machine Pieces Section -->
+      <MachinePiecesCard
+        v-if="d.isEditMode.value || d.machinePieces.value.length > 0"
+        :pieces="d.machinePieces.value"
+        :is-edit-mode="d.isEditMode.value"
+        :collapsed="d.piecesCollapsed.value"
+        :collapse-toggle-token="d.pieceCollapseToggleToken.value"
+        @update-piece="d.updatePieceInfo"
+        @edit-piece="d.editPiece"
+        @custom-field-update="d.updatePieceCustomField"
+        @add-piece="openAddModal('piece')"
+        @remove-piece="async (id) => { await d.removePieceLink(id); refreshVersions() }"
+        @toggle-collapse="d.toggleAllPieces"
+      />
+
+      <!-- Add Entity Modal -->
+      <AddEntityToMachineModal
+        :open="addModalOpen"
+        :entity-kind="addModalKind"
+        @close="addModalOpen = false"
+        @confirm="handleAddEntity"
+      />
+
+      <!-- Save / Cancel buttons -->
+      <div v-if="d.isEditMode.value" class="flex flex-col gap-3 md:flex-row md:justify-end">
+        <button
+          type="button"
+          class="btn btn-ghost"
+          :class="{ 'btn-disabled': d.saving.value }"
+          @click="d.cancelEdition()"
+        >
+          Annuler
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          :disabled="!d.canSubmit.value"
+          @click="submitMachineEdition"
+        >
+          <span v-if="d.saving.value" class="loading loading-spinner loading-sm mr-2" />
+          Enregistrer les modifications
+        </button>
+      </div>
+
+      <!-- Historique -->
+      <EntityHistorySection
+        :entries="history"
+        :loading="historyLoading"
+        :error="historyError"
+        :field-labels="historyFieldLabels"
+      />
+
+      <!-- Versions -->
+      <EntityVersionList
+        ref="versionListRef"
+        entity-type="machine"
+        :entity-id="String(machineId)"
+        :field-labels="historyFieldLabels"
+        :refresh-key="versionRefreshKey"
+        @restored="d.loadMachineData()"
+
+      />
+
+      <!-- Comments -->
+      <div class="mt-4">
+        <CommentSection
+          entity-type="machine"
+          :entity-id="String(machineId)"
+          :entity-name="d.machine.value?.name"
+          show-resolved
+        />
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div v-else class="text-center py-12">
+      <div class="max-w-md mx-auto">
+        <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+          <IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
+        </div>
+        <h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
+        <p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
+        <button type="button" class="btn btn-primary" @click="$router.back()">
+          Retour aux machines
+        </button>
+      </div>
+    </div>
+    </main>
+
+    <MachinePrintSelectionModal
+      :open="d.printModalOpen.value"
+      :selection="d.printSelection"
+      :components="d.components.value"
+      :pieces="d.machinePieces.value"
+      @close="d.closePrintModal"
+      @confirm="d.handlePrintConfirm"
+      @select-all="d.setAllPrintSelection(true)"
+      @deselect-all="d.setAllPrintSelection(false)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useMachineDetailData } from '~/composables/useMachineDetailData'
+import { useEntityHistory } from '~/composables/useEntityHistory'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import PageHero from '~/components/PageHero.vue'
+import MachinePrintSelectionModal from '~/components/MachinePrintSelectionModal.vue'
+import MachineDetailHeader from '~/components/machine/MachineDetailHeader.vue'
+import MachineInfoCard from '~/components/machine/MachineInfoCard.vue'
+import MachineDocumentsCard from '~/components/machine/MachineDocumentsCard.vue'
+import MachineProductsCard from '~/components/machine/MachineProductsCard.vue'
+import MachineComponentsCard from '~/components/machine/MachineComponentsCard.vue'
+import MachinePiecesCard from '~/components/machine/MachinePiecesCard.vue'
+import AddEntityToMachineModal from '~/components/machine/AddEntityToMachineModal.vue'
+import EntityHistorySection from '~/components/common/EntityHistorySection.vue'
+import EntityVersionList from '~/components/common/EntityVersionList.vue'
+import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
+
+const route = useRoute()
+const machineId = route.params.id
+const { canEdit } = usePermissions()
+
+if (!machineId) {
+  console.error('ID de machine manquant')
+}
+
+const d = useMachineDetailData(machineId)
+const machineInfoCardRef = ref(null)
+const versionRefreshKey = ref(0)
+const refreshVersions = () => { versionRefreshKey.value++ }
+
+const {
+  history,
+  loading: historyLoading,
+  error: historyError,
+  loadHistory,
+} = useEntityHistory('machine')
+
+const historyFieldLabels = {
+  name: 'Nom',
+  reference: 'Référence',
+  prix: 'Prix',
+  site: 'Site',
+  constructeurIds: 'Fournisseurs',
+  addedComponent: 'Composant ajouté',
+  removedComponent: 'Composant supprimé',
+  addedPiece: 'Pièce ajoutée',
+  removedPiece: 'Pièce supprimée',
+  addedProduct: 'Produit ajouté',
+  removedProduct: 'Produit supprimé',
+  componentLinks: 'Composants liés',
+  pieceLinks: 'Pièces liées',
+  productLinks: 'Produits liés',
+}
+
+const addModalOpen = ref(false)
+const addModalKind = ref('component')
+
+const openAddModal = (kind) => {
+  addModalKind.value = kind
+  addModalOpen.value = true
+}
+
+const handleRemoveConstructeurLink = (constructeurId) => {
+  const ids = d.machineConstructeurIds.value.filter(id => id !== constructeurId)
+  d.handleMachineConstructeurChange(ids)
+}
+
+const handleAddEntity = async (entityId) => {
+  if (addModalKind.value === 'component') {
+    await d.addComponentLink(entityId)
+  } else if (addModalKind.value === 'piece') {
+    await d.addPieceLink(entityId)
+  } else {
+    await d.addProductLink(entityId)
+  }
+  refreshVersions()
+}
+
+const machineViewTitle = computed(() => {
+  return d.isEditMode.value ? 'Modification de la machine' : 'Détails de la machine'
+})
+
+const submitMachineEdition = async () => {
+  if (machineInfoCardRef.value?.saveFieldDefinitions) {
+    await machineInfoCardRef.value.saveFieldDefinitions()
+  }
+  await d.submitEdition()
+  refreshVersions()
+}
+
+onMounted(() => {
+  d.loadMachineData()
+  d.loadInitialData()
+  loadHistory(String(machineId)).catch(() => {})
+
+  if (route.query.edit === 'true' && canEdit.value) {
+    d.isEditMode.value = true
+  }
+})
+</script>
diff --git a/frontend/app/pages/machines/index.vue b/frontend/app/pages/machines/index.vue
new file mode 100644
index 0000000..cc240f0
--- /dev/null
+++ b/frontend/app/pages/machines/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <div class="my-8">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold">
+          Parc Machines
+        </h2>
+        <NuxtLink to="/machines/new" class="btn btn-primary">
+          <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
+          Ajouter une machine
+        </NuxtLink>
+      </div>
+
+      <div class="card bg-base-100 shadow-sm mb-6">
+        <div class="card-body">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Sites</span>
+              </label>
+              <div class="flex flex-wrap gap-3">
+                <label
+                  v-for="site in sites"
+                  :key="site.id"
+                  class="flex items-center gap-2 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    class="checkbox checkbox-sm"
+                    :checked="selectedSites.has(site.id)"
+                    @change="selectedSites.has(site.id) ? selectedSites.delete(site.id) : selectedSites.add(site.id)"
+                  >
+                  <span class="text-sm">{{ site.name }}</span>
+                </label>
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Recherche</span>
+              </label>
+              <input
+                v-model="searchQuery"
+                type="text"
+                placeholder="Rechercher par nom ou référence..."
+                class="input input-bordered"
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <span class="loading loading-spinner loading-lg" />
+      </div>
+
+      <div v-else-if="filteredMachines.length === 0" class="text-center py-12">
+        <div class="max-w-md mx-auto">
+          <IconLucideFactory class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
+          <h3 class="text-lg font-medium text-gray-900 mb-2">
+            Aucune machine trouvée
+          </h3>
+          <p class="text-gray-500 mb-4">
+            Commencez par ajouter votre première machine.
+          </p>
+          <NuxtLink to="/machines/new" class="btn btn-primary">
+            Ajouter une machine
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          v-for="machine in filteredMachines"
+          :key="machine.id"
+          class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
+          :style="{
+            borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
+            background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
+          @click="viewMachineDetails(machine)"
+        >
+          <div class="card-body flex flex-col">
+            <div class="flex items-center justify-between mb-2">
+              <h3 class="card-title text-lg">
+                {{ machine.name }}
+              </h3>
+            </div>
+
+            <div class="space-y-2 text-sm">
+              <div class="flex items-center gap-2">
+                <IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
+                <span
+                  class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
+                  :style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
+                >{{ machine.site?.name || 'Site inconnu' }}</span>
+              </div>
+
+              <div v-if="machine.reference" class="flex items-center gap-2">
+                <IconLucideTag class="w-4 h-4 text-orange-500" aria-hidden="true" />
+                <span class="text-gray-600">{{ machine.reference }}</span>
+              </div>
+            </div>
+
+            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
+              <button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
+                Modifier
+              </button>
+              <button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
+                Supprimer
+              </button>
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
+                Détails
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { useMachines } from '~/composables/useMachines'
+import { useSites } from '~/composables/useSites'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useUrlState } from '~/composables/useUrlState'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideFactory from '~icons/lucide/factory'
+import IconLucideMapPin from '~icons/lucide/map-pin'
+import IconLucideTag from '~icons/lucide/tag'
+
+const { canEdit } = usePermissions()
+const { machines, loading, loadMachines, deleteMachine } = useMachines()
+const { sites, loadSites } = useSites()
+const toast = useToast()
+
+const urlState = useUrlState({
+  q: { default: '', debounce: 300 },
+  sites: { default: '' },
+})
+
+const searchQuery = urlState.q
+const selectedSites = reactive(new Set())
+
+// Sync URL → selectedSites on load and back/forward
+watch(urlState.sites, (val) => {
+  selectedSites.clear()
+  if (val) {
+    for (const id of String(val).split(',')) {
+      if (id) selectedSites.add(id)
+    }
+  }
+}, { immediate: true })
+
+// Sync selectedSites → URL
+watch(() => [...selectedSites], (ids) => {
+  urlState.sites.value = ids.join(',')
+})
+
+// Enrichir les machines avec les objets site complets
+const enrichedMachines = computed(() => {
+  return machines.value.map((machine) => {
+    const site = sites.value.find(s => s.id === machine.siteId)
+    return {
+      ...machine,
+      site: site || null,
+    }
+  })
+})
+
+const filteredMachines = computed(() => {
+  let filtered = enrichedMachines.value
+
+  if (selectedSites.size > 0) {
+    filtered = filtered.filter(machine => selectedSites.has(machine.siteId))
+  }
+
+  if (searchQuery.value.trim()) {
+    const term = searchQuery.value.trim().toLowerCase()
+    filtered = filtered.filter(machine =>
+      machine.name?.toLowerCase().includes(term)
+      || machine.reference?.toLowerCase().includes(term),
+    )
+  }
+
+  filtered = [...filtered].sort((a, b) =>
+    (a.name || '').localeCompare(b.name || '', 'fr')
+  )
+
+  return filtered
+})
+
+const viewMachineDetails = (machine) => {
+  navigateTo(`/machine/${machine.id}`)
+}
+
+const editMachine = (machine) => {
+  navigateTo(`/machine/${machine.id}?edit=true`)
+}
+
+const { confirm: confirmDialog } = useConfirm()
+
+const confirmDeleteMachine = async (machine) => {
+  const { showError, showSuccess } = toast
+
+  if (await confirmDialog({ message: `Êtes-vous sûr de vouloir supprimer la machine "${machine.name}" ? Cette action est irréversible.` })) {
+    try {
+      const result = await deleteMachine(machine.id)
+      if (result.success) {
+        showSuccess(`Machine "${machine.name}" supprimée avec succès`)
+      } else {
+        showError(`Impossible de supprimer la machine : ${result.error}`)
+      }
+    } catch (error) {
+      showError(`Impossible de supprimer la machine : ${humanizeError(error.message)}`)
+    }
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([
+    loadMachines(),
+    loadSites(),
+  ])
+})
+</script>
diff --git a/frontend/app/pages/machines/new.vue b/frontend/app/pages/machines/new.vue
new file mode 100644
index 0000000..9838d50
--- /dev/null
+++ b/frontend/app/pages/machines/new.vue
@@ -0,0 +1,121 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <div class="max-w-3xl mx-auto">
+      <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
+        <div>
+          <h1 class="text-2xl font-bold">
+            Nouvelle machine
+          </h1>
+          <p class="text-sm text-gray-500">
+            Renseignez les informations de base pour créer la machine.
+          </p>
+        </div>
+        <NuxtLink to="/machines" class="btn btn-ghost">
+          Annuler
+        </NuxtLink>
+      </div>
+
+      <div v-if="c.loading" class="flex justify-center items-center py-12">
+        <span class="loading loading-spinner loading-lg" />
+      </div>
+
+      <form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation">
+        <div class="card bg-base-100 shadow-sm">
+          <div class="card-body space-y-6">
+            <!-- Basic fields -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="form-control">
+                <label class="label" for="machine-field-name">
+                  <span class="label-text">Nom de la machine <span class="text-error">*</span></span>
+                </label>
+                <input
+                  id="machine-field-name"
+                  v-model="c.newMachine.name"
+                  type="text"
+                  placeholder="Ex: Presse hydraulique #1"
+                  class="input input-bordered input-sm md:input-md"
+                  :disabled="!canEdit"
+                  required
+                >
+              </div>
+
+              <div class="form-control">
+                <label class="label" for="machine-field-site">
+                  <span class="label-text">Site <span class="text-error">*</span></span>
+                </label>
+                <select
+                  id="machine-field-site"
+                  v-model="c.newMachine.siteId"
+                  class="select select-bordered select-sm md:select-md"
+                  :disabled="!canEdit"
+                  required
+                >
+                  <option value="">
+                    Sélectionner un site
+                  </option>
+                  <option v-for="site in c.sites" :key="site.id" :value="site.id">
+                    {{ site.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="form-control">
+                <label class="label" for="machine-field-reference">
+                  <span class="label-text">Référence</span>
+                </label>
+                <input
+                  id="machine-field-reference"
+                  v-model="c.newMachine.reference"
+                  type="text"
+                  placeholder="Ex: PRESS-001"
+                  class="input input-bordered input-sm md:input-md"
+                  :disabled="!canEdit"
+                >
+              </div>
+
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">Cloner depuis une machine</span>
+                </label>
+                <SearchSelect
+                  v-model="c.newMachine.cloneFromMachineId"
+                  :options="c.machines"
+                  :disabled="!canEdit"
+                  :clearable="true"
+                  placeholder="Rechercher une machine..."
+                  empty-text="Aucune machine trouvée"
+                />
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex justify-end gap-3 pt-4 border-t border-base-200">
+              <NuxtLink to="/machines" class="btn btn-outline btn-sm md:btn-md">
+                Annuler
+              </NuxtLink>
+              <button
+                type="submit"
+                class="btn btn-sm md:btn-md btn-primary"
+                :disabled="!canEdit || !c.newMachine.name?.trim() || c.submitting"
+                :class="{ loading: c.submitting }"
+              >
+                Créer la machine
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { proxyRefs } from 'vue'
+import { useMachineCreatePage } from '~/composables/useMachineCreatePage'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+
+const c = proxyRefs(useMachineCreatePage())
+const { canEdit } = usePermissions()
+</script>
diff --git a/frontend/app/pages/models/index.vue b/frontend/app/pages/models/index.vue
new file mode 100644
index 0000000..f239037
--- /dev/null
+++ b/frontend/app/pages/models/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="min-h-[60vh] flex flex-col items-center justify-center gap-6 text-center px-6">
+    <div class="space-y-2 max-w-xl">
+      <h1 class="text-3xl font-semibold">Catalogue retiré</h1>
+      <p class="text-sm text-gray-500">
+        La gestion des modèles s'effectue désormais directement depuis les catégories de composants et de pièces.
+        Retrouvez l'intégralité des squelettes et champs personnalisés dans ces écrans dédiés.
+      </p>
+    </div>
+    <div class="flex flex-wrap items-center justify-center gap-3">
+      <NuxtLink to="/component-category" class="btn btn-primary">
+        Gestion des catégories de composants
+      </NuxtLink>
+      <NuxtLink to="/piece-category" class="btn btn-outline">
+        Gestion des catégories de pièces
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  navigateTo('/component-category', { replace: true })
+})
+</script>
diff --git a/frontend/app/pages/piece-category/[id]/edit.vue b/frontend/app/pages/piece-category/[id]/edit.vue
new file mode 100644
index 0000000..c40ac59
--- /dev/null
+++ b/frontend/app/pages/piece-category/[id]/edit.vue
@@ -0,0 +1,204 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">{{ title }}</h1>
+          <p class="text-base text-base-content/70">
+            Mettez à jour la structure et les champs personnalisés de cette catégorie de pièce pour préparer les futures créations.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <div v-if="loading" class="flex items-center justify-center py-16">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true"></span>
+        <span class="ml-3 text-sm text-base-content/70">Chargement de la catégorie…</span>
+      </div>
+      <ModelTypeForm
+        v-else
+        mode="edit"
+        initial-category="PIECE"
+        :initial-data="initialData"
+        :lock-category="true"
+        :saving="saving"
+        :readonly="!canEdit"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+
+    <!-- Comments -->
+    <div class="mt-4">
+      <CommentSection
+        entity-type="piece_category"
+        :entity-id="String(route.params.id)"
+        :entity-name="initialData?.name"
+        show-resolved
+      />
+    </div>
+
+    <SyncConfirmationModal
+      :preview="syncPreviewData"
+      :open="showSyncModal"
+      :loading="syncLoading"
+      @confirm="handleSyncConfirm"
+      @cancel="handleSyncCancel"
+    />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useHead, useRoute, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { getModelType, updateModelType, syncPreview, syncExecute, type ModelTypePayload, type SyncPreviewResult } from '~/services/modelTypes'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useToast } from '~/composables/useToast'
+
+const { canEdit } = usePermissions()
+const route = useRoute()
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const { loadPieceTypes } = usePieceTypes()
+
+const loading = ref(true)
+const saving = ref(false)
+const initialData = ref<Partial<ModelTypePayload> | null>(null)
+const showSyncModal = ref(false)
+const syncLoading = ref(false)
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
+
+const title = computed(() =>
+  initialData.value?.name ? `Modifier « ${initialData.value.name} »` : 'Modifier une catégorie de pièce',
+)
+
+useHead(() => ({
+  title: title.value,
+}))
+
+const navigateBackToList = async () => {
+  await router.push('/piece-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const normalizeError = (error: any) => {
+  const message = error?.data?.message || error?.message || 'Une erreur est survenue.'
+  return Array.isArray(message) ? message[0] : message
+}
+
+const loadCategory = async () => {
+  loading.value = true
+  try {
+    const id = String(route.params.id)
+    const response = await getModelType(id)
+
+    if (response.category !== 'PIECE') {
+      showError("Cette catégorie n'est pas une pièce.")
+      await navigateBackToList()
+      return
+    }
+
+    initialData.value = {
+      name: response.name,
+      code: response.code,
+      category: response.category,
+      notes: response.notes ?? response.description ?? '',
+      structure: (response.structure as PieceModelStructure | null) ?? undefined,
+      referenceFormula: response.referenceFormula ?? null,
+      requiredFieldsForReference: response.requiredFieldsForReference ?? null,
+    }
+
+  } catch (error) {
+    showError(normalizeError(error))
+    await navigateBackToList()
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  navigateBackToList()
+}
+
+const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  if (!canEdit.value) return
+  const id = String(route.params.id)
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload?.notes ?? null,
+    }
+
+    // Get sync preview BEFORE saving
+    const preview = await syncPreview(id, enrichedPayload.structure || {})
+
+    const hasImpact = preview && (
+      Object.values(preview.additions || {}).some(v => v > 0)
+      || Object.values(preview.deletions || {}).some(v => v > 0)
+      || Object.values(preview.modifications || {}).some(v => v > 0)
+    )
+
+    if (hasImpact) {
+      // Show modal for confirmation
+      pendingPayload.value = enrichedPayload
+      syncPreviewData.value = preview
+      showSyncModal.value = true
+    } else {
+      // No impact — save directly + sync
+      await updateModelType(id, enrichedPayload)
+      await syncExecute(id, { confirmDeletions: false, confirmTypeChanges: false })
+      await loadPieceTypes({ force: true })
+      showSuccess('Catégorie de pièce mise à jour avec succès.')
+    }
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    saving.value = false
+  }
+}
+
+const handleSyncConfirm = async () => {
+  if (!pendingPayload.value) return
+  const id = String(route.params.id)
+
+  syncLoading.value = true
+  try {
+    const hasDeletions = syncPreviewData.value && Object.values(syncPreviewData.value.deletions || {}).some(v => v > 0)
+    const hasModifications = syncPreviewData.value && Object.values(syncPreviewData.value.modifications || {}).some(v => v > 0)
+
+    await updateModelType(id, pendingPayload.value)
+    await syncExecute(id, {
+      confirmDeletions: !!hasDeletions,
+      confirmTypeChanges: !!hasModifications,
+    })
+    await loadPieceTypes({ force: true })
+    showSuccess('Catégorie de pièce mise à jour avec succès.')
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    syncLoading.value = false
+    showSyncModal.value = false
+    pendingPayload.value = null
+    syncPreviewData.value = null
+  }
+}
+
+const handleSyncCancel = () => {
+  showSyncModal.value = false
+  pendingPayload.value = null
+  syncPreviewData.value = null
+}
+
+onMounted(() => {
+  loadCategory()
+})
+</script>
diff --git a/frontend/app/pages/piece-category/index.vue b/frontend/app/pages/piece-category/index.vue
new file mode 100644
index 0000000..42df576
--- /dev/null
+++ b/frontend/app/pages/piece-category/index.vue
@@ -0,0 +1,10 @@
+<template>
+  <ManagementView
+    category="PIECE"
+    heading="Catégories de pièce"
+  />
+</template>
+
+<script setup lang="ts">
+import ManagementView from '~/components/model-types/ManagementView.vue'
+</script>
diff --git a/frontend/app/pages/piece-category/new.vue b/frontend/app/pages/piece-category/new.vue
new file mode 100644
index 0000000..e6272a0
--- /dev/null
+++ b/frontend/app/pages/piece-category/new.vue
@@ -0,0 +1,74 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">Nouvelle catégorie de pièce</h1>
+          <p class="text-base text-base-content/70">
+            Définissez les champs personnalisés et le squelette appliqué lors de la création des pièces de cette catégorie.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <ModelTypeForm
+        mode="create"
+        initial-category="PIECE"
+        :lock-category="true"
+        :saving="saving"
+        :readonly="!canEdit"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { createModelType } from '~/services/modelTypes'
+import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
+import { useToast } from '~/composables/useToast'
+
+const { canEdit } = usePermissions()
+
+useHead(() => ({
+  title: 'Nouvelle catégorie de pièce',
+}))
+
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const saving = ref(false)
+
+const handleCancel = () => {
+  router.push('/piece-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  if (!canEdit.value) return
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload.notes ?? null,
+    }
+    await createModelType(enrichedPayload)
+    invalidateEntityTypeCache('PIECE')
+    showSuccess('Catégorie de pièce créée avec succès.')
+    await router.push('/piece-category')
+  } catch (error: any) {
+    const message = error?.data?.message || error?.message || 'Une erreur est survenue lors de la création.'
+    showError(Array.isArray(message) ? message[0] : message)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
diff --git a/frontend/app/pages/piece/[id].vue b/frontend/app/pages/piece/[id].vue
new file mode 100644
index 0000000..d1851ff
--- /dev/null
+++ b/frontend/app/pages/piece/[id].vue
@@ -0,0 +1,506 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
+      </div>
+
+      <div v-else-if="!piece" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Pièce introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu retrouver la pièce demandée. Elle a peut-être été supprimée.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier la pièce' : piece.name"
+            :subtitle="isEditMode ? 'Ajustez les informations de la pièce et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/pieces-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de pièce</span>
+              </label>
+              <template v-if="isEditMode">
+                <select
+                  v-model="selectedTypeId"
+                  class="select select-bordered select-sm md:select-md"
+                  disabled
+                >
+                  <option value="">Sélectionner une catégorie</option>
+                  <option
+                    v-for="type in pieceTypeList"
+                    :key="type.id"
+                    :value="type.id"
+                  >
+                    {{ type.name }}
+                  </option>
+                </select>
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ selectedType?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom de la pièce</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Description (if value or edit mode) -->
+          <div v-if="isEditMode || piece.description" class="form-control">
+            <label class="label">
+              <span class="label-text">Description</span>
+            </label>
+            <textarea
+              v-if="isEditMode"
+              v-model="editionForm.description"
+              class="textarea textarea-bordered textarea-sm md:textarea-md"
+              :disabled="!canEdit || saving"
+              placeholder="Description de la pièce (optionnel)"
+              rows="3"
+            />
+            <div v-else class="textarea textarea-bordered textarea-sm md:textarea-md bg-base-200">
+              {{ piece.description }}
+            </div>
+          </div>
+
+          <!-- Référence auto (read-only, shown only if computed) -->
+          <div v-if="piece.referenceAuto" class="form-control">
+            <label class="label">
+              <span class="label-text">Référence auto</span>
+            </label>
+            <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+              <span class="font-mono font-semibold">{{ piece.referenceAuto }}</span>
+              <span class="badge badge-sm badge-ghost">auto</span>
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || piece.reference || editionForm.constructeurIds.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || piece.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseur</span>
+              </label>
+              <template v-if="isEditMode">
+                <ConstructeurSelect
+                  v-model="editionForm.constructeurIds"
+                  class="w-full"
+                  :disabled="!canEdit || saving"
+                  placeholder="Rechercher un ou plusieurs fournisseurs..."
+                  :initial-options="piece?.constructeurs || []"
+                />
+                <ConstructeurLinksTable
+                  v-model="constructeurLinks"
+                  class="mt-2"
+                  @remove="handleConstructeurRemoved"
+                />
+              </template>
+              <ConstructeurLinksTable
+                v-else
+                :model-value="constructeurLinks"
+                readonly
+              />
+            </div>
+          </div>
+
+          <!-- Prix (if value or edit mode) -->
+          <div v-if="isEditMode || piece.prix" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.prix"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ piece.prix }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Product requirements -->
+          <div
+            v-if="structureProducts.length"
+            class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">
+                Produits liés
+              </h2>
+              <p class="text-xs text-base-content/70">
+                {{ isEditMode ? 'Cette pièce doit rester liée à un produit catalogue répondant aux critères suivants.' : 'Produits associés à cette pièce via le squelette.' }}
+              </p>
+            </header>
+            <ul class="space-y-2 text-sm text-base-content/80">
+              <li
+                v-for="(description, index) in productRequirementDescriptions"
+                :key="`edit-requirement-${index}`"
+                class="flex items-start gap-2"
+              >
+                <span class="mt-0.5 inline-flex h-2 w-2 flex-shrink-0 rounded-full bg-primary"></span>
+                <span>{{ description }}</span>
+              </li>
+            </ul>
+            <div v-if="isEditMode" class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="entry in productRequirementEntries"
+                :key="entry.key"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">
+                    {{ entry.label }}
+                  </span>
+                </label>
+                <ProductSelect
+                  :model-value="productSelections[entry.index] || null"
+                  :disabled="!canEdit || saving"
+                  :type-product-id="entry.typeProductId"
+                  helper-text="Un produit valide est requis pour cette pièce."
+                  @update:model-value="(value) => setProductSelection(entry.index, value)"
+                />
+              </div>
+            </div>
+            <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="(entry, index) in productRequirementEntries"
+                :key="entry.key"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ entry.label }}</span>
+                </label>
+                <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                  {{ productSelectionLabels[index] || '— Non sélectionné' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Skeleton preview (edit mode only) -->
+          <StructureSkeletonPreview
+            v-if="isEditMode && (selectedType || resolvedStructure)"
+            :structure="resolvedStructure"
+            :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+            :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+            variant="piece"
+          />
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à cette pièce.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  v-for="field in visibleCustomFields"
+                  :key="field.customFieldValueId || field.id || field.name"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-sm">{{ field.name }}</span>
+                  </label>
+                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || pieceDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à cette pièce.' : 'Documents associés à cette pièce.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="pieceDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments"
+                empty-text="Aucun document n'est associé à cette pièce pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="pieceDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à cette pièce pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <EntityVersionList
+            entity-type="piece"
+            :entity-id="String(route.params.id)"
+            :field-labels="historyFieldLabels"
+            :refresh-key="versionRefreshKey"
+            @restored="fetchPiece()"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="piece"
+              :entity-id="String(route.params.id)"
+              :entity-name="piece?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from '#imports'
+import { usePieceEdit } from '~/composables/usePieceEdit'
+import { useDocuments } from '~/composables/useDocuments'
+import { usePermissions } from '~/composables/usePermissions'
+
+const route = useRoute()
+const { canEdit } = usePermissions()
+const { updateDocument } = useDocuments()
+
+const isEditMode = ref(false)
+const versionRefreshKey = ref(0)
+
+const {
+  piece,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  pieceDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  constructeurLinks,
+  productSelections,
+  customFieldInputs,
+  pieceTypeList,
+  selectedType,
+  resolvedStructure,
+  structureProducts,
+  productRequirementDescriptions,
+  productRequirementEntries,
+  canSubmit,
+  historyFieldLabels,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  setProductSelection,
+  submitEdition: _submitEdition,
+  fetchPiece,
+  formatPieceStructurePreview,
+} = usePieceEdit(String(route.params.id))
+
+const submitEdition = async () => {
+  await _submitEdition()
+  if (!saving.value) {
+    await fetchPiece()
+    isEditMode.value = false
+    versionRefreshKey.value++
+  }
+}
+
+// Sync ConstructeurSelect changes → constructeurLinks
+watch(() => editionForm.constructeurIds, (newIds) => {
+  const existing = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+  constructeurLinks.value = newIds.map(id =>
+    existing.get(id) || { constructeurId: id, supplierReference: null },
+  )
+})
+
+const handleConstructeurRemoved = (constructeurId: string) => {
+  editionForm.constructeurIds = editionForm.constructeurIds.filter(id => id !== constructeurId)
+}
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+// Resolve product names for read-only display from piece data
+const productSelectionLabels = computed(() => {
+  if (!piece.value) return []
+  const p = piece.value as any
+  // piece.product contains {id, name} for the legacy single product
+  if (p.product?.name) return [p.product.name]
+  return productSelections.value.map((id: string | null) => id || null)
+})
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = pieceDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      pieceDocuments.value[idx] = { ...pieceDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+onMounted(() => {
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>
diff --git a/frontend/app/pages/pieces-catalog.vue b/frontend/app/pages/pieces-catalog.vue
new file mode 100644
index 0000000..df5765f
--- /dev/null
+++ b/frontend/app/pages/pieces-catalog.vue
@@ -0,0 +1,245 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+      <div>
+        <h1 class="text-3xl font-semibold text-base-content">Catalogue des pièces</h1>
+        <p class="text-sm text-gray-500">
+          Consultez et gérez toutes les pièces existantes.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <NuxtLink to="/pieces/create" class="btn btn-primary btn-sm md:btn-md">
+          Ajouter une pièce
+        </NuxtLink>
+        <NuxtLink to="/piece-category" class="btn btn-outline btn-sm md:btn-md">
+          Gérer les catégories
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <header class="flex flex-col gap-2">
+          <h2 class="text-xl font-semibold text-base-content">Pièces créées</h2>
+          <p class="text-sm text-base-content/70">
+            Liste globale des pièces enregistrées, quel que soit leur squelette d'origine.
+          </p>
+        </header>
+
+        <DataTable
+          :columns="columns"
+          :rows="pieceRows"
+          :loading="loadingPieces"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :column-filters="table.columnFilters.value"
+          :show-per-page="true"
+          empty-message="Aucune pièce n'a encore été créée."
+          no-results-message="Aucune pièce ne correspond à votre recherche."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+          @update:column-filters="table.handleColumnFiltersChange"
+        >
+          <template #toolbar>
+            <label class="w-full sm:w-72">
+              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+              <input
+                v-model="table.searchTerm.value"
+                type="text"
+                class="input input-bordered input-sm w-full mt-1"
+                placeholder="Nom ou référence…"
+                @input="table.debouncedSearch"
+              />
+            </label>
+          </template>
+
+          <template #cell-preview="{ row }">
+            <DocumentThumbnail
+              :document="resolvePrimaryDocument(row.piece)"
+              :alt="resolvePreviewAlt(row.piece)"
+            />
+          </template>
+
+          <template #cell-name="{ row }">
+            {{ row.piece.name || 'Pièce sans nom' }}
+          </template>
+
+          <template #cell-reference="{ row }">
+            {{ row.piece.reference || '—' }}
+          </template>
+
+          <template #cell-referenceAuto="{ row }">
+            {{ row.piece.referenceAuto || '—' }}
+          </template>
+
+          <template #cell-description="{ row }">
+            <div v-if="row.piece.description" class="group relative">
+              <span class="block cursor-help truncate">{{ row.piece.description }}</span>
+              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-sm group-hover:pointer-events-auto group-hover:visible">
+                <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
+              </div>
+            </div>
+            <span v-else>—</span>
+          </template>
+
+          <template #cell-suppliers="{ row }">
+            <div
+              v-if="row.suppliers.visible.length"
+              class="flex max-w-[14rem] flex-wrap items-center gap-1"
+              :title="row.suppliers.tooltip"
+            >
+              <span
+                v-for="supplier in row.suppliers.visible"
+                :key="supplier"
+                class="badge badge-ghost badge-sm whitespace-nowrap"
+              >
+                {{ supplier }}
+              </span>
+              <span
+                v-if="row.suppliers.overflow"
+                class="badge badge-outline badge-sm"
+              >
+                +{{ row.suppliers.overflow }}
+              </span>
+            </div>
+            <span v-else>—</span>
+          </template>
+
+          <template #cell-typePiece="{ row }">
+            <NuxtLink
+              v-if="row.piece.typePiece?.id"
+              :to="`/piece-category/${row.piece.typePiece.id}/edit`"
+              class="link link-hover link-primary"
+            >
+              {{ resolvePieceType(row.piece) }}
+            </NuxtLink>
+            <span v-else>{{ resolvePieceType(row.piece) }}</span>
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            <span class="whitespace-nowrap">{{ formatDate(row.piece.createdAt) }}</span>
+          </template>
+
+          <template #cell-actions="{ row }">
+            <div class="flex items-center justify-end gap-2">
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/piece/${row.piece.id}?edit=true`)"
+              >
+                Modifier
+              </button>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                :disabled="loadingPieces"
+                @click="handleDeletePiece(row.piece)"
+              >
+                Supprimer
+              </button>
+              <NuxtLink
+                :to="`/piece/${row.piece.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
+import { usePieces } from '~/composables/usePieces'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { useDataTable } from '~/composables/useDataTable'
+import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
+import { resolveDeleteImpact, buildDeleteMessage } from '~/shared/utils/deleteImpactUtils'
+import { resolvePrimaryDocument, resolvePreviewAlt, resolveSupplierNames, buildSuppliersDisplay } from '~/shared/utils/catalogDisplayUtils'
+import { formatFrenchDate } from '~/utils/date'
+
+const { canEdit } = usePermissions()
+const { pieces, total, loadPieces, loading: loadingPieces, deletePiece } = usePieces()
+const { pieceTypes, loadPieceTypes } = usePieceTypes()
+
+const table = useDataTable(
+  { fetchData: fetchPieces },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typePiece'] },
+)
+
+const columns = [
+  { key: 'preview', label: 'Aperçu', width: 'w-24' },
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'reference', label: 'Référence' },
+  { key: 'referenceAuto', label: 'Réf. auto' },
+  { key: 'description', label: 'Description' },
+  { key: 'suppliers', label: 'Fournisseurs' },
+  { key: 'typePiece', label: 'Type de pièce', filterable: true, filterPlaceholder: 'Filtrer…' },
+  { key: 'createdAt', label: 'Date', sortable: true },
+  { key: 'actions', label: 'Actions' },
+]
+
+const piecesOnPage = computed(() => pieceRows.value.length)
+const paginationState = table.pagination(total, piecesOnPage)
+
+// Enrich pieces with full type data
+const piecesList = computed(() => {
+  return (pieces.value || []).map((piece) => {
+    const typePiece = pieceTypes.value.find(t => t.id === piece.typePieceId)
+    return { ...piece, typePiece: typePiece || piece.typePiece || null }
+  })
+})
+
+const pieceRows = computed(() =>
+  piecesList.value.map(piece => ({
+    id: piece.id,
+    piece,
+    suppliers: buildPieceSuppliersDisplay(piece),
+  })),
+)
+
+async function fetchPieces() {
+  await loadPieces({
+    search: table.searchTerm.value,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value as 'asc' | 'desc',
+    typeName: table.columnFilters.value.typePiece || undefined,
+    force: true,
+  })
+}
+
+const resolvePieceType = (piece: Record<string, any>) => {
+  if (piece?.typePiece?.name) return piece.typePiece.name
+  if (piece?.typePieceLabel) return piece.typePieceLabel
+  return '—'
+}
+
+const buildPieceSuppliersDisplay = (piece: Record<string, any>) =>
+  buildSuppliersDisplay(resolveSupplierNames(piece, 'product'))
+
+const { confirm } = useConfirm()
+
+const handleDeletePiece = async (piece: Record<string, any>) => {
+  const pieceName = piece?.name || 'cette pièce'
+  const message = buildDeleteMessage(pieceName, resolveDeleteImpact(piece))
+  const confirmed = await confirm({ title: 'Supprimer la pièce', message, dangerous: true })
+  if (!confirmed) return
+  await deletePiece(piece.id)
+  fetchPieces()
+}
+
+const formatDate = formatFrenchDate
+
+onMounted(async () => {
+  await Promise.all([fetchPieces(), loadPieceTypes()])
+})
+</script>
diff --git a/frontend/app/pages/pieces/[id]/edit.vue b/frontend/app/pages/pieces/[id]/edit.vue
new file mode 100644
index 0000000..c1b6c68
--- /dev/null
+++ b/frontend/app/pages/pieces/[id]/edit.vue
@@ -0,0 +1,357 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+    <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+      <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+      <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
+    </div>
+
+    <div v-else-if="!piece" class="max-w-xl mx-auto">
+      <div class="alert alert-error shadow-lg">
+        <div>
+          <h2 class="font-semibold text-lg">Pièce introuvable</h2>
+          <p class="text-sm text-base-content/80">
+            Nous n'avons pas pu retrouver la pièce demandée. Elle a peut-être été supprimée.
+          </p>
+        </div>
+      </div>
+      <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+        Retour au catalogue
+      </button>
+    </div>
+
+    <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+      <div class="card-body space-y-6">
+        <header class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <div>
+            <h1 class="text-3xl font-semibold text-base-content">Modifier la pièce</h1>
+            <p class="text-sm text-base-content/70">
+              Ajustez les informations de la pièce et ses champs personnalisés.
+            </p>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
+            Retour au catalogue
+          </button>
+        </header>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Catégorie de pièce</span>
+            </label>
+            <select
+              v-model="selectedTypeId"
+              class="select select-bordered select-sm md:select-md"
+              disabled
+            >
+              <option value="">Sélectionner une catégorie</option>
+              <option
+                v-for="type in pieceTypeList"
+                :key="type.id"
+                :value="type.id"
+              >
+                {{ type.name }}
+              </option>
+            </select>
+            <p class="text-xs text-base-content/60 mt-1">
+              La catégorie d'origine ne peut pas être modifiée depuis cette page.
+            </p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom de la pièce</span>
+            </label>
+            <input
+              v-model="editionForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              placeholder="Nom affiché dans le catalogue"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="editionForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || saving"
+            placeholder="Description de la pièce (optionnel)"
+            rows="3"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="editionForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              placeholder="Référence interne ou fournisseur"
+            >
+          </div>
+
+          <div v-if="piece?.referenceAuto" class="form-control">
+            <label class="label">
+              <span class="label-text">Référence auto</span>
+            </label>
+            <input
+              :value="piece.referenceAuto"
+              type="text"
+              class="input input-bordered input-sm md:input-md bg-base-200"
+              disabled
+              title="Générée automatiquement à partir du type et des champs personnalisés"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseur</span>
+            </label>
+            <ConstructeurSelect
+              v-model="editionForm.constructeurIds"
+              class="w-full"
+              :disabled="!canEdit || saving"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+              :initial-options="piece?.constructeurs || []"
+            />
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Prix indicatif (€)</span>
+            </label>
+            <input
+              v-model="editionForm.prix"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              placeholder="Valeur indicatrice"
+            >
+          </div>
+        </div>
+
+        <div
+          v-if="structureProducts.length"
+          class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4"
+        >
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">
+              Produit requis par le squelette
+            </h2>
+            <p class="text-xs text-base-content/70">
+              Cette pièce doit rester liée à un produit catalogue répondant aux critères suivants.
+            </p>
+          </header>
+          <ul class="space-y-2 text-sm text-base-content/80">
+            <li
+              v-for="(description, index) in productRequirementDescriptions"
+              :key="`edit-requirement-${index}`"
+              class="flex items-start gap-2"
+            >
+              <span class="mt-0.5 inline-flex h-2 w-2 flex-shrink-0 rounded-full bg-primary"></span>
+              <span>{{ description }}</span>
+            </li>
+          </ul>
+          <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <div
+              v-for="entry in productRequirementEntries"
+              :key="entry.key"
+              class="form-control"
+            >
+              <label class="label">
+                <span class="label-text text-xs font-medium">
+                  {{ entry.label }}
+                </span>
+              </label>
+              <ProductSelect
+                :model-value="productSelections[entry.index] || null"
+                :disabled="!canEdit || saving"
+                :type-product-id="entry.typeProductId"
+                helper-text="Un produit valide est requis pour cette pièce."
+                @update:model-value="(value) => setProductSelection(entry.index, value)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <StructureSkeletonPreview
+          v-if="selectedType || resolvedStructure"
+          :structure="resolvedStructure"
+          :description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+          :preview-badge="formatPieceStructurePreview(resolvedStructure)"
+          variant="piece"
+        />
+
+        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+            <p class="text-xs text-base-content/70">
+              Mettez à jour les valeurs propres à cette pièce.
+            </p>
+          </header>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+        </div>
+
+        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h2 class="font-semibold text-base-content">Documents</h2>
+              <p class="text-xs text-base-content/70">
+                Gérez les documents associés à cette pièce.
+              </p>
+            </div>
+            <span v-if="selectedFiles.length" class="badge badge-outline">
+              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+            <DocumentUpload
+              v-model="selectedFiles"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+              @files-added="handleFilesAdded"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+          <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+            Chargement des documents en cours…
+          </p>
+          <DocumentListInline
+            v-else
+            :documents="pieceDocuments"
+            :can-delete="canEdit"
+            :can-edit="true"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document n'est associé à cette pièce pour le moment."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
+
+        <EntityHistorySection
+          :entries="history"
+          :loading="historyLoading"
+          :error="historyError"
+          :field-labels="historyFieldLabels"
+        />
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/pieces-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+            <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+            Enregistrer les modifications
+          </button>
+        </div>
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="piece"
+            :entity-id="String(route.params.id)"
+            :entity-name="piece?.name"
+            show-resolved
+          />
+        </div>
+      </div>
+    </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute } from '#imports'
+import { usePieceEdit } from '~/composables/usePieceEdit'
+import { useDocuments } from '~/composables/useDocuments'
+
+const route = useRoute()
+const { updateDocument } = useDocuments()
+
+const {
+  piece,
+  loading,
+  saving,
+  selectedFiles,
+  uploadingDocuments,
+  loadingDocuments,
+  pieceDocuments,
+  previewDocument,
+  previewVisible,
+  selectedTypeId,
+  editionForm,
+  productSelections,
+  customFieldInputs,
+  canEdit,
+  pieceTypeList,
+  selectedType,
+  resolvedStructure,
+  structureProducts,
+  productRequirementDescriptions,
+  productRequirementEntries,
+  canSubmit,
+  historyFieldLabels,
+  history,
+  historyLoading,
+  historyError,
+  openPreview,
+  closePreview,
+  removeDocument,
+  handleFilesAdded,
+  setProductSelection,
+  submitEdition,
+  formatPieceStructurePreview,
+} = usePieceEdit(String(route.params.id))
+
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = pieceDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      pieceDocuments.value[idx] = { ...pieceDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+</script>
diff --git a/frontend/app/pages/pieces/create.vue b/frontend/app/pages/pieces/create.vue
new file mode 100644
index 0000000..2b06c5a
--- /dev/null
+++ b/frontend/app/pages/pieces/create.vue
@@ -0,0 +1,519 @@
+<template>
+  <main class="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div class="space-y-1">
+        <h1 class="text-3xl font-semibold text-base-content">Nouvelle pièce</h1>
+        <p class="text-sm text-base-content/70">
+          Choisissez la catégorie adaptée puis renseignez toutes les informations de votre pièce.
+        </p>
+      </div>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
+        Retour au catalogue
+      </button>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-6">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Catégorie de pièce</span>
+            </label>
+            <SearchSelect
+              v-model="selectedTypeId"
+              :options="pieceTypeList"
+              :loading="loadingTypes"
+              size="sm"
+              placeholder="Rechercher une catégorie..."
+              empty-text="Aucune catégorie disponible"
+              :option-label="typeOptionLabel"
+              :option-description="typeOptionDescription"
+              :disabled="!canEdit || loadingTypes || submitting"
+            />
+            <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
+              Chargement des catégories…
+            </p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom de la pièce</span>
+            </label>
+            <input
+              v-model="creationForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Nom affiché dans le catalogue"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="creationForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || submitting || !selectedType"
+            placeholder="Description de la pièce (optionnel)"
+            rows="3"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="creationForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Référence interne ou fournisseur"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseur</span>
+            </label>
+            <ConstructeurSelect
+              v-model="creationForm.constructeurIds"
+              class="w-full"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+            />
+          </div>
+        </div>
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Prix indicatif (€)</span>
+            </label>
+            <input
+              v-model="creationForm.prix"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Valeur indicatrice"
+            >
+          </div>
+        </div>
+
+        <div
+          v-if="structureProducts.length"
+          class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4"
+        >
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">
+              Produit requis par le squelette
+            </h2>
+            <p class="text-xs text-base-content/70">
+              Sélectionnez un produit catalogue compatible avec les exigences ci-dessous.
+            </p>
+          </header>
+          <ul class="space-y-2 text-sm text-base-content/80">
+            <li
+              v-for="(description, index) in productRequirementDescriptions"
+              :key="`requirement-${index}`"
+              class="flex items-start gap-2"
+            >
+              <span class="mt-0.5 inline-flex h-2 w-2 flex-shrink-0 rounded-full bg-primary"></span>
+              <span>{{ description }}</span>
+            </li>
+          </ul>
+          <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <div
+              v-for="entry in productRequirementEntries"
+              :key="entry.key"
+              class="form-control"
+            >
+              <label class="label">
+                <span class="label-text text-xs font-medium">
+                  {{ entry.label }}
+                </span>
+              </label>
+              <ProductSelect
+                :model-value="productSelections[entry.index] || null"
+                :disabled="!canEdit || submitting || !selectedType"
+                :type-product-id="entry.typeProductId"
+                helper-text="Un produit est requis pour cette pièce."
+                @update:model-value="(value) => setProductSelection(entry.index, value)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedType.structure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
+          :preview-badge="formatPieceStructurePreview(selectedType.structure)"
+          variant="piece"
+        />
+
+        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+            <p class="text-xs text-base-content/70">
+              Renseignez les valeurs propres à cette pièce. Ces champs complètent le squelette sélectionné.
+            </p>
+          </header>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
+        </div>
+
+        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h2 class="font-semibold text-base-content">Documents</h2>
+              <p class="text-xs text-base-content/70">
+                Ajoutez des documents (PDF, images, textes…) liés à cette pièce.
+              </p>
+            </div>
+            <span v-if="selectedDocuments.length" class="badge badge-outline">
+              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} prêt{{ selectedDocuments.length > 1 ? 's' : '' }} à être ajouté{{ selectedDocuments.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || submitting }">
+            <DocumentUpload
+              v-model="selectedDocuments"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/pieces-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': submitting }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitCreation">
+            <span v-if="submitting" class="loading loading-spinner loading-sm mr-2"></span>
+            Créer la pièce
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import ConstructeurLinksTable from '~/components/ConstructeurLinksTable.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import ProductSelect from '~/components/ProductSelect.vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { usePieceTypes } from '~/composables/usePieceTypes'
+import { usePieces } from '~/composables/usePieces'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { formatPieceStructurePreview } from '~/shared/modelUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import type { PieceModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import {
+  getStructureProducts,
+  buildProductRequirementDescriptions,
+  buildProductRequirementEntries,
+  resizeProductSelections,
+  areProductSelectionsFilled,
+  applyProductSelection,
+  collectNormalizedProductIds,
+} from '~/shared/utils/pieceProductSelectionUtils'
+import {
+  type CustomFieldInput,
+  normalizeCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+
+interface PieceCatalogType extends ModelType {
+  structure: PieceModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+const route = useRoute()
+const router = useRouter()
+
+const { pieceTypes, loadPieceTypes, loadingPieceTypes: loadingTypes } = usePieceTypes()
+const { createPiece } = usePieces()
+const toast = useToast()
+const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+const { uploadDocuments } = useDocuments()
+const { syncLinks } = useConstructeurLinks()
+const { getConstructeurById } = useConstructeurs()
+const { canEdit } = usePermissions()
+
+const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
+const selectedTypeId = ref<string>(initialTypeId.value)
+const submitting = ref(false)
+const creationForm = reactive({
+  name: '' as string,
+  description: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  prix: '' as string,
+})
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const productSelections = ref<(string | null)[]>([])
+
+const lastSuggestedName = ref('')
+const customFieldInputs = ref<CustomFieldInput[]>([])
+const selectedDocuments = ref<File[]>([])
+const uploadingDocuments = ref(false)
+
+watch(
+  () => route.query.typeId,
+  (value) => {
+    if (typeof value === 'string') {
+      selectedTypeId.value = value
+    }
+  },
+)
+
+watch(selectedTypeId, (id) => {
+  const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
+  if ((id || '') === current) {
+    return
+  }
+  const nextQuery = { ...route.query }
+  if (id) {
+    nextQuery.typeId = id
+  } else {
+    delete nextQuery.typeId
+  }
+  router.replace({ path: route.path, query: nextQuery }).catch(() => {})
+})
+
+const pieceTypeList = computed<PieceCatalogType[]>(() => (pieceTypes.value || []) as PieceCatalogType[])
+
+const typeOptionLabel = (type?: PieceCatalogType) =>
+  type?.name || 'Catégorie'
+
+const typeOptionDescription = (type?: PieceCatalogType) =>
+  type?.description ? String(type.description) : ''
+
+const selectedType = computed(() => {
+  if (!selectedTypeId.value) {
+    return null
+  }
+  return pieceTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+})
+
+const structureProducts = computed(() =>
+  getStructureProducts(selectedType.value?.structure ?? null),
+)
+
+const requiresProductSelection = computed(() => structureProducts.value.length > 0)
+
+const productRequirementDescriptions = computed(() =>
+  buildProductRequirementDescriptions(structureProducts.value),
+)
+
+const ensureProductSelections = (count: number) => {
+  productSelections.value = resizeProductSelections(productSelections.value, count)
+}
+
+const productRequirementEntries = computed(() =>
+  buildProductRequirementEntries(structureProducts.value, 'piece-create-product-requirement'),
+)
+
+const productSelectionsFilled = computed(() =>
+  areProductSelectionsFilled(
+    requiresProductSelection.value,
+    productRequirementEntries.value,
+    productSelections.value,
+  ),
+)
+
+const setProductSelection = (index: number, value: string | null) => {
+  productSelections.value = applyProductSelection(productSelections.value, index, value)
+}
+
+watch(structureProducts, (products) => {
+  ensureProductSelections(products.length)
+})
+
+watch(selectedType, (type) => {
+  if (!type) {
+    clearCreationForm()
+    customFieldInputs.value = []
+    return
+  }
+  if (!creationForm.name || creationForm.name === lastSuggestedName.value) {
+    creationForm.name = type.name
+  }
+  lastSuggestedName.value = creationForm.name
+  customFieldInputs.value = normalizeCustomFieldInputs(type.structure)
+  productSelections.value = Array.from({ length: structureProducts.value.length }, () => null)
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  _requiredCustomFieldsFilled(customFieldInputs.value),
+)
+
+const canSubmit = computed(() =>
+  Boolean(
+    canEdit.value &&
+    selectedType.value &&
+    creationForm.name &&
+    requiredCustomFieldsFilled.value &&
+    productSelectionsFilled.value &&
+    !submitting.value,
+  ),
+)
+
+const clearCreationForm = () => {
+  creationForm.name = ''
+  creationForm.description = ''
+  creationForm.reference = ''
+  creationForm.constructeurIds = []
+  constructeurLinks.value = []
+  creationForm.prix = ''
+  productSelections.value = []
+  lastSuggestedName.value = ''
+}
+
+const submitCreation = async () => {
+  if (!selectedType.value) {
+    toast.showError('Sélectionnez une catégorie de pièce.')
+    return
+  }
+
+  if (!productSelectionsFilled.value) {
+    toast.showError('Sélectionnez un produit conforme au squelette.')
+    return
+  }
+
+  const payload: Record<string, any> = {
+    name: creationForm.name.trim(),
+    typePieceId: selectedType.value.id,
+  }
+
+  const description = creationForm.description.trim()
+  if (description) {
+    payload.description = description
+  }
+
+  const reference = creationForm.reference.trim()
+  if (reference) {
+    payload.reference = reference
+  }
+
+  const normalizedProductIds = collectNormalizedProductIds(
+    productRequirementEntries.value,
+    productSelections.value,
+  )
+  if (normalizedProductIds.length) {
+    payload.productIds = normalizedProductIds
+    payload.productId = normalizedProductIds[0]
+  }
+
+  const rawPrice = typeof creationForm.prix === 'string'
+    ? creationForm.prix.trim()
+    : creationForm.prix === null || creationForm.prix === undefined
+      ? ''
+      : String(creationForm.prix).trim()
+
+  if (rawPrice) {
+    const parsed = Number(rawPrice)
+    if (!Number.isNaN(parsed)) {
+      payload.prix = String(parsed)
+    }
+  }
+
+  submitting.value = true
+  try {
+    const result = await createPiece(payload)
+    if (result.success && result.data) {
+      const createdPiece = result.data as Record<string, any>
+      await _saveCustomFieldValues(
+        'piece',
+        createdPiece.id,
+        [
+          createdPiece?.typePiece?.structure?.customFields,
+        ],
+        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+      )
+      // Sync constructeur links after creation
+      if (constructeurLinks.value.length) {
+        await syncLinks('piece', createdPiece.id, [], constructeurLinks.value)
+      }
+      if (selectedDocuments.value.length && createdPiece.id) {
+        uploadingDocuments.value = true
+        const uploadResult = await uploadDocuments(
+          {
+            files: selectedDocuments.value,
+            context: { pieceId: createdPiece.id },
+          },
+          { updateStore: false },
+        )
+        if (!uploadResult.success) {
+          const message = uploadResult.error
+            ? `Documents non ajoutés : ${uploadResult.error}`
+            : 'Documents non ajoutés : une erreur est survenue.'
+          toast.showError(message)
+        }
+        selectedDocuments.value = []
+      }
+      toast.showSuccess('Pièce créée avec succès')
+      await router.replace(`/piece/${createdPiece.id}?edit=true`)
+    } else if (result.error) {
+      toast.showError(result.error)
+    }
+  } catch (error: any) {
+    toast.showError(humanizeError(error?.message) || 'Impossible de créer la pièce')
+  } finally {
+    submitting.value = false
+    uploadingDocuments.value = false
+  }
+}
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+  { deep: true },
+)
+
+onMounted(async () => {
+  await loadPieceTypes()
+})
+
+</script>
diff --git a/frontend/app/pages/product-catalog.vue b/frontend/app/pages/product-catalog.vue
new file mode 100644
index 0000000..4a4965b
--- /dev/null
+++ b/frontend/app/pages/product-catalog.vue
@@ -0,0 +1,257 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+      <div>
+        <h1 class="text-3xl font-semibold text-base-content">Catalogue des produits</h1>
+        <p class="text-sm text-base-content/70">
+          Retrouvez l'ensemble des produits du catalogue, leurs informations fournisseurs et leurs catégories.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <NuxtLink to="/product/create" class="btn btn-primary btn-sm md:btn-md">
+          Ajouter un produit
+        </NuxtLink>
+        <NuxtLink to="/product-category" class="btn btn-outline btn-sm md:btn-md">
+          Gérer les catégories
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <div
+          v-if="errorMessage"
+          class="alert alert-error"
+        >
+          <div class="flex flex-col gap-1">
+            <span class="font-semibold">Impossible de charger les produits</span>
+            <span class="text-sm">{{ errorMessage }}</span>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm ml-auto" @click="reload">
+            Réessayer
+          </button>
+        </div>
+
+        <DataTable
+          v-else
+          :columns="columns"
+          :rows="productRows"
+          :loading="loading"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :column-filters="table.columnFilters.value"
+          :show-per-page="true"
+          empty-message="Aucun produit n'a encore été enregistré."
+          no-results-message="Aucun produit ne correspond à votre recherche."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+          @update:column-filters="table.handleColumnFiltersChange"
+        >
+          <template #toolbar>
+            <label class="w-full sm:w-72">
+              <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+              <input
+                v-model="table.searchTerm.value"
+                type="text"
+                class="input input-bordered input-sm w-full mt-1"
+                placeholder="Nom ou référence…"
+                @input="table.debouncedSearch"
+              />
+            </label>
+          </template>
+
+          <template #cell-preview="{ row }">
+            <DocumentThumbnail
+              :document="resolvePrimaryDocument(row.product, true)"
+              :alt="resolvePreviewAlt(row.product)"
+            />
+          </template>
+
+          <template #cell-name="{ row }">
+            <span class="font-medium">{{ row.product.name }}</span>
+          </template>
+
+          <template #cell-reference="{ row }">
+            {{ row.product.reference || '—' }}
+          </template>
+
+          <template #cell-typeProduct="{ row }">
+            <NuxtLink
+              v-if="row.product.typeProduct?.id"
+              :to="`/product-category/${row.product.typeProduct.id}/edit`"
+              class="link link-hover link-primary"
+            >
+              {{ row.product.typeProduct.name }}
+            </NuxtLink>
+            <span v-else>{{ row.product.typeProduct?.name || '—' }}</span>
+          </template>
+
+          <template #cell-suppliers="{ row }">
+            <div
+              v-if="row.suppliers.visible.length"
+              class="flex max-w-[14rem] flex-wrap items-center gap-1 text-sm"
+              :title="row.suppliers.tooltip"
+            >
+              <span
+                v-for="supplier in row.suppliers.visible"
+                :key="supplier"
+                class="badge badge-ghost badge-sm whitespace-nowrap"
+              >
+                {{ supplier }}
+              </span>
+              <span
+                v-if="row.suppliers.overflow"
+                class="badge badge-outline badge-sm"
+              >
+                +{{ row.suppliers.overflow }}
+              </span>
+            </div>
+            <span v-else class="text-sm text-base-content/50">—</span>
+          </template>
+
+          <template #cell-price="{ row }">
+            {{ formatPrice(row.product.supplierPrice) }}
+          </template>
+
+          <template #cell-actions="{ row }">
+            <div class="flex items-center justify-end gap-2">
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs"
+                @click="navigateTo(`/product/${row.product.id}?edit=true`)"
+              >
+                Modifier
+              </button>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                @click="confirmDelete(row.product)"
+              >
+                Supprimer
+              </button>
+              <NuxtLink
+                :to="`/product/${row.product.id}`"
+                class="btn btn-primary btn-xs"
+              >
+                Détails
+              </NuxtLink>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useHead } from '#imports'
+import DataTable from '~/components/common/DataTable.vue'
+import { useProducts } from '~/composables/useProducts'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useToast } from '~/composables/useToast'
+import { useDataTable } from '~/composables/useDataTable'
+import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
+import { resolveDeleteImpact, buildDeleteMessage } from '~/shared/utils/deleteImpactUtils'
+import { resolvePrimaryDocument, resolvePreviewAlt, resolveSupplierNames, buildSuppliersDisplay } from '~/shared/utils/catalogDisplayUtils'
+
+const { canEdit } = usePermissions()
+
+useHead(() => ({ title: 'Catalogue des produits' }))
+
+const {
+  products,
+  total,
+  loading,
+  error,
+  loadProducts,
+  deleteProduct,
+} = useProducts()
+const { productTypes, loadProductTypes } = useProductTypes()
+const toast = useToast()
+
+const table = useDataTable(
+  { fetchData: fetchProducts },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true, columnFilterKeys: ['typeProduct'] },
+)
+
+const errorMessage = computed(() => (typeof error.value === 'string' && error.value.length ? error.value : null))
+
+const columns = [
+  { key: 'preview', label: 'Aperçu', width: 'w-16' },
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'reference', label: 'Référence' },
+  { key: 'typeProduct', label: 'Type de produit', filterable: true, filterPlaceholder: 'Filtrer…' },
+  { key: 'suppliers', label: 'Fournisseurs' },
+  { key: 'price', label: 'Prix indicatif', sortable: true, sortKey: 'supplierPrice', align: 'right' as const },
+  { key: 'actions', label: 'Actions', align: 'right' as const, width: 'w-32' },
+]
+
+const productsOnPage = computed(() => productRows.value.length)
+const paginationState = table.pagination(total, productsOnPage)
+
+// Enrich products with full type data
+const normalizedProducts = computed(() => {
+  return (Array.isArray(products.value) ? products.value : []).map((product) => {
+    const typeProduct = productTypes.value.find(t => t.id === product.typeProductId)
+    return { ...product, typeProduct: typeProduct || product.typeProduct || null }
+  })
+})
+
+const productRows = computed(() =>
+  normalizedProducts.value.map(product => ({
+    id: product.id,
+    product,
+    suppliers: buildProductSuppliersDisplay(product),
+  })),
+)
+
+async function fetchProducts() {
+  await loadProducts({
+    search: table.searchTerm.value,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value as 'asc' | 'desc',
+    typeName: table.columnFilters.value.typeProduct || undefined,
+    force: true,
+  })
+}
+
+const priceFormatter = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  currencyDisplay: 'narrowSymbol',
+})
+
+const formatPrice = (value: any) => {
+  if (value === null || value === undefined || value === '') return '—'
+  const number = Number(value)
+  return Number.isNaN(number) ? '—' : priceFormatter.format(number)
+}
+
+const buildProductSuppliersDisplay = (product: Record<string, any>) =>
+  buildSuppliersDisplay(resolveSupplierNames(product))
+
+const reload = () => fetchProducts()
+
+const { confirm } = useConfirm()
+
+const confirmDelete = async (product: Record<string, any>) => {
+  const productName = product?.name || 'ce produit'
+  const message = buildDeleteMessage(productName, resolveDeleteImpact(product))
+  const confirmed = await confirm({ title: 'Supprimer le produit', message, dangerous: true })
+  if (!confirmed) return
+  const result = await deleteProduct(product.id)
+  if (result.success) {
+    toast.showSuccess(`Produit "${productName}" supprimé`)
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([fetchProducts(), loadProductTypes()])
+})
+</script>
diff --git a/frontend/app/pages/product-category/[id]/edit.vue b/frontend/app/pages/product-category/[id]/edit.vue
new file mode 100644
index 0000000..71652d2
--- /dev/null
+++ b/frontend/app/pages/product-category/[id]/edit.vue
@@ -0,0 +1,202 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">{{ title }}</h1>
+          <p class="text-base text-base-content/70">
+            Mettez à jour la structure et les champs personnalisés de cette catégorie de produit pour préparer les futures créations.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <div v-if="loading" class="flex items-center justify-center py-16">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true"></span>
+        <span class="ml-3 text-sm text-base-content/70">Chargement de la catégorie…</span>
+      </div>
+      <ModelTypeForm
+        v-else
+        mode="edit"
+        initial-category="PRODUCT"
+        :initial-data="initialData"
+        :lock-category="true"
+        :saving="saving"
+        :readonly="!canEdit"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+
+    <!-- Comments -->
+    <div class="mt-4">
+      <CommentSection
+        entity-type="product_category"
+        :entity-id="String(route.params.id)"
+        :entity-name="initialData?.name"
+        show-resolved
+      />
+    </div>
+
+    <SyncConfirmationModal
+      :preview="syncPreviewData"
+      :open="showSyncModal"
+      :loading="syncLoading"
+      @confirm="handleSyncConfirm"
+      @cancel="handleSyncCancel"
+    />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useHead, useRoute, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { getModelType, updateModelType, syncPreview, syncExecute, type ModelTypePayload, type SyncPreviewResult } from '~/services/modelTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useToast } from '~/composables/useToast'
+
+const { canEdit } = usePermissions()
+const route = useRoute()
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const { loadProductTypes } = useProductTypes()
+
+const loading = ref(true)
+const saving = ref(false)
+const initialData = ref<Partial<ModelTypePayload> | null>(null)
+const showSyncModal = ref(false)
+const syncLoading = ref(false)
+const syncPreviewData = ref<SyncPreviewResult | null>(null)
+const pendingPayload = ref<Partial<ModelTypePayload> | null>(null)
+
+const title = computed(() =>
+  initialData.value?.name ? `Modifier « ${initialData.value.name} »` : 'Modifier une catégorie de produit',
+)
+
+useHead(() => ({
+  title: title.value,
+}))
+
+const navigateBackToList = async () => {
+  await router.push('/product-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const normalizeError = (error: any) => {
+  const message = error?.data?.message || error?.message || 'Une erreur est survenue.'
+  return Array.isArray(message) ? message[0] : message
+}
+
+const loadCategory = async () => {
+  loading.value = true
+  try {
+    const id = String(route.params.id)
+    const response = await getModelType(id)
+
+    if (response.category !== 'PRODUCT') {
+      showError("Cette catégorie n'est pas un produit.")
+      await navigateBackToList()
+      return
+    }
+
+    initialData.value = {
+      name: response.name,
+      code: response.code,
+      category: response.category,
+      notes: response.notes ?? response.description ?? '',
+      structure: (response.structure as ProductModelStructure | null) ?? undefined,
+    }
+
+  } catch (error) {
+    showError(normalizeError(error))
+    await navigateBackToList()
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  navigateBackToList()
+}
+
+const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  if (!canEdit.value) return
+  const id = String(route.params.id)
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload?.notes ?? null,
+    }
+
+    // Get sync preview BEFORE saving
+    const preview = await syncPreview(id, enrichedPayload.structure || {})
+
+    const hasImpact = preview && (
+      Object.values(preview.additions || {}).some(v => v > 0)
+      || Object.values(preview.deletions || {}).some(v => v > 0)
+      || Object.values(preview.modifications || {}).some(v => v > 0)
+    )
+
+    if (hasImpact) {
+      // Show modal for confirmation
+      pendingPayload.value = enrichedPayload
+      syncPreviewData.value = preview
+      showSyncModal.value = true
+    } else {
+      // No impact — save directly + sync
+      await updateModelType(id, enrichedPayload)
+      await syncExecute(id, { confirmDeletions: false, confirmTypeChanges: false })
+      await loadProductTypes({ force: true })
+      showSuccess('Catégorie de produit mise à jour avec succès.')
+    }
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    saving.value = false
+  }
+}
+
+const handleSyncConfirm = async () => {
+  if (!pendingPayload.value) return
+  const id = String(route.params.id)
+
+  syncLoading.value = true
+  try {
+    const hasDeletions = syncPreviewData.value && Object.values(syncPreviewData.value.deletions || {}).some(v => v > 0)
+    const hasModifications = syncPreviewData.value && Object.values(syncPreviewData.value.modifications || {}).some(v => v > 0)
+
+    await updateModelType(id, pendingPayload.value)
+    await syncExecute(id, {
+      confirmDeletions: !!hasDeletions,
+      confirmTypeChanges: !!hasModifications,
+    })
+    await loadProductTypes({ force: true })
+    showSuccess('Catégorie de produit mise à jour avec succès.')
+  } catch (error) {
+    showError(normalizeError(error))
+  } finally {
+    syncLoading.value = false
+    showSyncModal.value = false
+    pendingPayload.value = null
+    syncPreviewData.value = null
+  }
+}
+
+const handleSyncCancel = () => {
+  showSyncModal.value = false
+  pendingPayload.value = null
+  syncPreviewData.value = null
+}
+
+onMounted(() => {
+  loadCategory()
+})
+</script>
diff --git a/frontend/app/pages/product-category/index.vue b/frontend/app/pages/product-category/index.vue
new file mode 100644
index 0000000..9e64e3f
--- /dev/null
+++ b/frontend/app/pages/product-category/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <ManagementView
+    category="PRODUCT"
+    heading="Catégories de produit"
+    description="Gérez les catégories de produits et leurs champs personnalisés communs."
+  />
+</template>
+
+<script setup lang="ts">
+import ManagementView from '~/components/model-types/ManagementView.vue'
+</script>
diff --git a/frontend/app/pages/product-category/new.vue b/frontend/app/pages/product-category/new.vue
new file mode 100644
index 0000000..a34e7ca
--- /dev/null
+++ b/frontend/app/pages/product-category/new.vue
@@ -0,0 +1,74 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">Nouvelle catégorie de produit</h1>
+          <p class="text-base text-base-content/70">
+            Définissez les champs personnalisés et le squelette appliqué lors de la création des produits de cette catégorie.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <ModelTypeForm
+        mode="create"
+        initial-category="PRODUCT"
+        :lock-category="true"
+        :saving="saving"
+        :readonly="!canEdit"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { createModelType } from '~/services/modelTypes'
+import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
+import { useToast } from '~/composables/useToast'
+
+const { canEdit } = usePermissions()
+
+useHead(() => ({
+  title: 'Nouvelle catégorie de produit',
+}))
+
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const saving = ref(false)
+
+const handleCancel = () => {
+  router.push('/product-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  if (!canEdit.value) return
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload.notes ?? null,
+    }
+    await createModelType(enrichedPayload)
+    invalidateEntityTypeCache('PRODUCT')
+    showSuccess('Catégorie de produit créée avec succès.')
+    await router.push('/product-category')
+  } catch (error: any) {
+    const message = error?.data?.message || error?.message || 'Une erreur est survenue lors de la création.'
+    showError(Array.isArray(message) ? message[0] : message)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
diff --git a/frontend/app/pages/product/[id]/edit.vue b/frontend/app/pages/product/[id]/edit.vue
new file mode 100644
index 0000000..4000c6c
--- /dev/null
+++ b/frontend/app/pages/product/[id]/edit.vue
@@ -0,0 +1,564 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="productDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+    <div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center">
+      <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+      <p class="text-sm text-base-content/70">Chargement du produit…</p>
+    </div>
+
+    <div v-else-if="!product" class="max-w-xl mx-auto">
+      <div class="alert alert-error shadow-lg">
+        <div>
+          <h2 class="font-semibold text-lg">Produit introuvable</h2>
+          <p class="text-sm text-base-content/80">
+            Nous n'avons pas pu trouver le produit demandé. Il a peut-être été supprimé.
+          </p>
+        </div>
+      </div>
+      <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+        Retour au catalogue
+      </button>
+    </div>
+
+    <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-4xl mx-auto">
+      <div class="card-body space-y-6">
+        <header class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+          <div>
+            <h1 class="text-3xl font-semibold text-base-content">Modifier le produit</h1>
+            <p class="text-sm text-base-content/70">
+              Mettez à jour les informations du produit et ses champs personnalisés.
+            </p>
+          </div>
+          <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
+            Retour au catalogue
+          </button>
+        </header>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Catégorie de produit</span>
+            </label>
+            <input
+              :value="product?.typeProduct?.name || 'Catégorie inconnue'"
+              type="text"
+              class="input input-bordered input-sm md:input-md bg-base-200"
+              disabled
+            >
+            <p class="text-xs text-base-content/60 mt-1">
+              La catégorie d'origine ne peut pas être modifiée depuis cette page.
+            </p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom du produit</span>
+            </label>
+            <input
+              v-model="editionForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="editionForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseurs</span>
+            </label>
+            <ConstructeurSelect
+              v-model="editionForm.constructeurIds"
+              class="w-full"
+              :disabled="!canEdit || saving"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+              :initial-options="product?.constructeurs || []"
+            />
+          </div>
+        </div>
+
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Prix fournisseur indicatif (€)</span>
+            </label>
+            <input
+              v-model="editionForm.supplierPrice"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || saving"
+            >
+          </div>
+        </div>
+
+        <div v-if="structurePreview" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <h2 class="font-semibold text-base-content">Champs définis par la catégorie</h2>
+              <p class="text-xs text-base-content/70">
+                {{ productType?.description || 'Le squelette de catégorie contrôle les champs personnalisés disponibles.' }}
+              </p>
+            </div>
+            <span class="badge badge-outline">{{ structurePreview }}</span>
+          </div>
+        </div>
+
+        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+            <p class="text-xs text-base-content/70">
+              Mettez à jour les valeurs propres à ce produit.
+            </p>
+          </header>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+        </div>
+
+        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h2 class="font-semibold text-base-content">Documents</h2>
+              <p class="text-xs text-base-content/70">
+                Gérez les documents associés à ce produit.
+              </p>
+            </div>
+            <span v-if="selectedFiles.length" class="badge badge-outline">
+              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+            <DocumentUpload
+              v-model="selectedFiles"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+              @files-added="handleFilesAdded"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+          <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+            Chargement des documents…
+          </p>
+          <DocumentListInline
+            v-else
+            :documents="productDocuments"
+            :can-delete="canEdit"
+            :can-edit="true"
+            :delete-disabled="uploadingDocuments || saving"
+            empty-text="Aucun document n'est associé à ce produit pour le moment."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
+
+        <EntityHistorySection
+          :entries="history"
+          :loading="historyLoading"
+          :error="historyError"
+          :field-labels="historyFieldLabels"
+        />
+
+        <EntityVersionList
+          entity-type="product"
+          :entity-id="String(route.params.id)"
+          :field-labels="historyFieldLabels"
+          :refresh-key="versionRefreshKey"
+          @restored="loadProduct()"
+        />
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/product-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': saving }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+            <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+            Enregistrer les modifications
+          </button>
+        </div>
+        <p v-if="product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+          Merci de renseigner tous les champs personnalisés obligatoires.
+        </p>
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="product"
+            :entity-id="String(route.params.id)"
+            :entity-name="product?.name"
+            show-resolved
+          />
+        </div>
+      </div>
+    </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useProductHistory } from '~/composables/useProductHistory'
+import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { getModelType } from '~/services/modelTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+
+const { canEdit } = usePermissions()
+const versionRefreshKey = ref(0)
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { getProduct, updateProduct } = useProducts()
+const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+const {
+  loadDocumentsByProduct,
+  uploadDocuments: uploadProductDocuments,
+  deleteDocument: deleteProductDocument,
+  updateDocument,
+} = useDocuments()
+const { ensureConstructeurs, getConstructeurById } = useConstructeurs()
+const { fetchLinks, syncLinks } = useConstructeurLinks()
+const {
+  history,
+  loading: historyLoading,
+  error: historyError,
+  loadHistory,
+} = useProductHistory()
+
+const product = ref<any | null>(null)
+const productType = ref<any | null>(null)
+const structure = ref<ProductModelStructure | null>(null)
+const customFieldInputs = ref<CustomFieldInput[]>([])
+const loading = ref(true)
+const saving = ref(false)
+const selectedFiles = ref<File[]>([])
+const uploadingDocuments = ref(false)
+const loadingDocuments = ref(false)
+const productDocuments = ref<any[]>([])
+const previewDocument = ref<any | null>(null)
+const previewVisible = ref(false)
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+
+const historyFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  supplierPrice: 'Prix fournisseur',
+  typeProduct: 'Catégorie',
+  constructeurIds: 'Fournisseurs',
+}
+
+const refreshCustomFieldInputs = (
+  structureOverride?: ProductModelStructure | null,
+  valuesOverride?: any[] | null,
+) => {
+  const nextStructure = structureOverride ?? structure.value ?? null
+  const nextValues = valuesOverride ?? product.value?.customFieldValues ?? null
+  customFieldInputs.value = buildCustomFieldInputs(nextStructure, nextValues)
+}
+
+const editionForm = reactive({
+  name: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  supplierPrice: '' as string,
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  _requiredCustomFieldsFilled(customFieldInputs.value),
+)
+
+const canSubmit = computed(() =>
+  Boolean(canEdit.value && product.value && editionForm.name.trim().length >= 2 && requiredCustomFieldsFilled.value && !saving.value),
+)
+
+const structurePreview = computed(() => formatProductStructurePreview(structure.value))
+
+const openPreview = (doc: any) => {
+  if (!doc || !canPreviewDocument(doc)) return
+  previewDocument.value = doc
+  previewVisible.value = true
+}
+const closePreview = () => { previewVisible.value = false; previewDocument.value = null }
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = productDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      productDocuments.value[idx] = { ...productDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+const loadProduct = async () => {
+  const id = route.params.id
+  if (!id || typeof id !== 'string') {
+    product.value = null
+    loading.value = false
+    return
+  }
+  const result = await getProduct(id)
+  if (result.success && result.data) {
+    product.value = result.data
+    productDocuments.value = Array.isArray(result.data.documents) ? result.data.documents : []
+
+    await loadProductType()
+
+    // Use customFieldValues from entity response (enriched with customField definitions via serialization groups)
+    const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+    refreshCustomFieldInputs(undefined, customValues)
+
+    hydrateForm()
+
+    // History is non-blocking — template handles its own loading state
+    loadHistory(result.data.id).catch(() => {})
+  } else {
+    product.value = null
+  }
+  loading.value = false
+}
+
+const refreshDocuments = async () => {
+  if (!product.value?.id) {
+    return
+  }
+  loadingDocuments.value = true
+  try {
+    const result = await loadDocumentsByProduct(product.value.id, { updateStore: false })
+    if (result.success) {
+      productDocuments.value = Array.isArray(result.data) ? result.data : []
+    }
+  } finally {
+    loadingDocuments.value = false
+  }
+}
+
+const removeDocument = async (documentId: string | number | null | undefined) => {
+  if (!documentId) {
+    return
+  }
+  const result = await deleteProductDocument(documentId, { updateStore: false })
+  if (result.success) {
+    productDocuments.value = productDocuments.value.filter((doc) => doc.id !== documentId)
+    toast.showSuccess('Document supprimé')
+  }
+}
+
+const handleFilesAdded = async (files: File[]) => {
+  if (!files?.length || !product.value?.id) {
+    return
+  }
+  uploadingDocuments.value = true
+  try {
+    const result = await uploadProductDocuments(
+      {
+        files,
+        context: { productId: product.value.id },
+      },
+      { updateStore: false },
+    )
+    if (result.success) {
+      selectedFiles.value = []
+      await refreshDocuments()
+      toast.showSuccess('Document(s) ajouté(s)')
+    } else if (result.error) {
+      toast.showError(result.error)
+    }
+  } finally {
+    uploadingDocuments.value = false
+  }
+}
+
+const loadProductType = async () => {
+  // Try using the expanded typeProduct from entity response first
+  const embedded = product.value?.typeProduct
+  if (embedded && typeof embedded === 'object' && embedded.id) {
+    const embeddedStructure = embedded.structure ?? null
+    if (embeddedStructure) {
+      productType.value = embedded
+      structure.value = normalizeProductStructureForSave(embeddedStructure)
+      return
+    }
+  }
+
+  if (!product.value?.typeProductId) {
+    productType.value = embedded ?? null
+    structure.value = normalizeProductStructureForSave(embedded?.structure ?? null)
+    return
+  }
+  try {
+    const type = await getModelType(product.value.typeProductId)
+    productType.value = type
+    structure.value = normalizeProductStructureForSave(type?.structure ?? null)
+  } catch (error) {
+    console.error('Erreur lors du chargement du type de produit:', error)
+    productType.value = embedded ?? null
+    structure.value = normalizeProductStructureForSave(embedded?.structure ?? null)
+  }
+}
+
+const hydrateForm = () => {
+  if (!product.value) {
+    return
+  }
+  editionForm.name = product.value.name || ''
+  editionForm.reference = product.value.reference || ''
+  // Load constructeur links
+  fetchLinks('product', String(route.params.id)).then((links) => {
+    constructeurLinks.value = links
+    originalConstructeurLinks.value = links.map(l => ({ ...l }))
+    editionForm.constructeurIds = constructeurIdsFromLinks(links)
+    if (editionForm.constructeurIds.length) {
+      void ensureConstructeurs(editionForm.constructeurIds)
+    }
+  })
+  editionForm.supplierPrice = product.value.supplierPrice !== null && product.value.supplierPrice !== undefined
+    ? String(product.value.supplierPrice)
+    : ''
+  refreshCustomFieldInputs(structure.value, product.value.customFieldValues)
+}
+
+watch(
+  () => product.value?.documents,
+  (docs) => {
+    if (Array.isArray(docs)) {
+      productDocuments.value = docs
+    }
+  },
+  { immediate: true },
+)
+
+const submitEdition = async () => {
+  if (!product.value) {
+    return
+  }
+
+  const payload: Record<string, any> = {
+    name: editionForm.name.trim(),
+    reference: editionForm.reference.trim() || null,
+  }
+
+  const rawPrice = typeof editionForm.supplierPrice === 'string'
+    ? editionForm.supplierPrice.trim()
+    : editionForm.supplierPrice
+  payload.supplierPrice = rawPrice !== '' && rawPrice !== null && rawPrice !== undefined
+    ? Number.isNaN(Number(rawPrice))
+      ? null
+      : String(Number(rawPrice))
+    : null
+
+  saving.value = true
+  try {
+    const result = await updateProduct(product.value.id, payload)
+    if (result.success && result.data?.id) {
+      product.value = result.data
+      const failedFields = await _saveCustomFieldValues(
+        'product',
+        result.data.id,
+        [result.data?.typeProduct?.structure?.customFields],
+        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+      )
+      if (failedFields.length) {
+        toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
+        return
+      }
+      await syncLinks('product', product.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+      toast.showSuccess('Produit mis à jour avec succès')
+      versionRefreshKey.value++
+    }
+  } catch (error: any) {
+    toast.showError(humanizeError(error?.message) || 'Impossible de mettre à jour le produit')
+  } finally {
+    saving.value = false
+  }
+}
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
+onMounted(async () => {
+  await loadProduct()
+})
+</script>
diff --git a/frontend/app/pages/product/[id]/index.vue b/frontend/app/pages/product/[id]/index.vue
new file mode 100644
index 0000000..cbc5337
--- /dev/null
+++ b/frontend/app/pages/product/[id]/index.vue
@@ -0,0 +1,646 @@
+<template>
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="productDocuments"
+      @close="closePreview"
+    />
+    <DocumentEditModal
+      :visible="editModalVisible"
+      :document="editingDocument"
+      @close="editModalVisible = false"
+      @updated="handleDocumentUpdated"
+    />
+    <main class="container mx-auto px-6 py-10">
+      <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
+        <span class="loading loading-spinner loading-lg" aria-hidden="true" />
+        <p class="text-sm text-base-content/70">Chargement du produit…</p>
+      </div>
+
+      <div v-else-if="!product" class="max-w-xl mx-auto">
+        <div class="alert alert-error shadow-lg">
+          <div>
+            <h2 class="font-semibold text-lg">Produit introuvable</h2>
+            <p class="text-sm text-base-content/80">
+              Nous n'avons pas pu trouver le produit demandé. Il a peut-être été supprimé.
+            </p>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary mt-6" @click="$router.back()">
+          Retour au catalogue
+        </button>
+      </div>
+
+      <section v-else class="card border border-base-200 bg-base-100 shadow-sm max-w-5xl mx-auto">
+        <div class="card-body space-y-6">
+          <DetailHeader
+            :title="isEditMode ? 'Modifier le produit' : product.name"
+            :subtitle="isEditMode ? 'Ajustez les informations du produit et ses champs personnalisés.' : undefined"
+            :is-edit-mode="isEditMode"
+            :can-edit="canEdit"
+            back-link="/product-catalog"
+            @toggle-edit="isEditMode = !isEditMode"
+          />
+
+          <!-- Catégorie (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Catégorie de produit</span>
+              </label>
+              <template v-if="isEditMode">
+                <input
+                  :value="product?.typeProduct?.name || 'Catégorie inconnue'"
+                  type="text"
+                  class="input input-bordered input-sm md:input-md bg-base-200"
+                  disabled
+                >
+                <p class="text-xs text-base-content/60 mt-1">
+                  La catégorie d'origine ne peut pas être modifiée depuis cette page.
+                </p>
+              </template>
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product?.typeProduct?.name || '—' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Nom (always shown) -->
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Nom du produit</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.name"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Nom affiché dans le catalogue"
+                required
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product.name }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Référence + Fournisseurs (if value or edit mode) -->
+          <div
+            v-if="isEditMode || product.reference || editionForm.constructeurIds.length"
+            class="grid grid-cols-1 gap-4 md:grid-cols-2"
+          >
+            <div v-if="isEditMode || product.reference" class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.reference"
+                type="text"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Référence interne ou fournisseur"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product.reference }}
+              </div>
+            </div>
+
+            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+              <label class="label">
+                <span class="label-text">Fournisseurs</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                v-model="editionForm.constructeurIds"
+                class="w-full"
+                :disabled="!canEdit || saving"
+                placeholder="Rechercher un ou plusieurs fournisseurs..."
+                :initial-options="product?.constructeurs || []"
+              />
+              <div v-else class="flex flex-wrap gap-2">
+                <span
+                  v-for="id in editionForm.constructeurIds"
+                  :key="id"
+                  class="badge badge-outline"
+                >
+                  {{ getConstructeurById(id)?.name || id }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Constructeur links table -->
+          <ConstructeurLinksTable
+            v-if="isEditMode && constructeurLinks.length"
+            v-model="constructeurLinks"
+          />
+          <ConstructeurLinksTable
+            v-else-if="!isEditMode && constructeurLinks.length"
+            :model-value="constructeurLinks"
+            :readonly="true"
+          />
+
+          <!-- Prix fournisseur (if value or edit mode) -->
+          <div v-if="isEditMode || product.supplierPrice" class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Prix fournisseur indicatif (€)</span>
+              </label>
+              <input
+                v-if="isEditMode"
+                v-model="editionForm.supplierPrice"
+                type="number"
+                step="0.01"
+                min="0"
+                class="input input-bordered input-sm md:input-md"
+                :disabled="!canEdit || saving"
+                placeholder="Valeur indicatrice"
+              >
+              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+                {{ product.supplierPrice }} €
+              </div>
+            </div>
+          </div>
+
+          <!-- Structure preview (edit mode only) -->
+          <div v-if="isEditMode && structurePreview" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <h2 class="font-semibold text-base-content">Champs définis par la catégorie</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ productType?.description || 'Le squelette de catégorie contrôle les champs personnalisés disponibles.' }}
+                </p>
+              </div>
+              <span class="badge badge-outline">{{ structurePreview }}</span>
+            </div>
+          </div>
+
+          <!-- Custom fields -->
+          <div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+            <header class="space-y-1">
+              <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+              <p v-if="isEditMode" class="text-xs text-base-content/70">
+                Mettez à jour les valeurs propres à ce produit.
+              </p>
+            </header>
+            <template v-if="isEditMode">
+              <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
+            </template>
+            <template v-else>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  v-for="field in visibleCustomFields"
+                  :key="field.customFieldValueId || field.id || field.name"
+                  class="form-control"
+                >
+                  <label class="label">
+                    <span class="label-text text-sm">{{ field.name }}</span>
+                  </label>
+                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                    {{ field.value }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Documents -->
+          <div
+            v-if="isEditMode || productDocuments.length > 0"
+            class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
+          >
+            <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+              <div>
+                <h2 class="font-semibold text-base-content">Documents</h2>
+                <p class="text-xs text-base-content/70">
+                  {{ isEditMode ? 'Gérez les documents associés à ce produit.' : 'Documents associés à ce produit.' }}
+                </p>
+              </div>
+              <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
+              </span>
+            </header>
+            <template v-if="isEditMode">
+              <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
+                <DocumentUpload
+                  v-model="selectedFiles"
+                  title="Déposer vos fichiers"
+                  subtitle="Formats acceptés : PDF, images, documents…"
+                  @files-added="handleFilesAdded"
+                />
+              </div>
+              <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+                Téléversement des documents en cours…
+              </p>
+              <p v-else-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="productDocuments"
+                :can-delete="canEdit"
+                :can-edit="true"
+                :delete-disabled="uploadingDocuments || saving"
+                empty-text="Aucun document n'est associé à ce produit pour le moment."
+                @preview="openPreview"
+                @edit="openEditModal"
+                @delete="removeDocument"
+              />
+            </template>
+            <template v-else>
+              <p v-if="loadingDocuments" class="text-xs text-base-content/70">
+                Chargement des documents en cours…
+              </p>
+              <DocumentListInline
+                v-else
+                :documents="productDocuments"
+                :can-delete="false"
+                :can-edit="false"
+                empty-text="Aucun document n'est associé à ce produit pour le moment."
+                @preview="openPreview"
+              />
+            </template>
+          </div>
+
+          <EntityHistorySection
+            :entries="history"
+            :loading="historyLoading"
+            :error="historyError"
+            :field-labels="historyFieldLabels"
+          />
+
+          <!-- Save buttons (edit mode only) -->
+          <div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
+            <button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
+              Annuler
+            </button>
+            <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
+              <span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
+              Enregistrer les modifications
+            </button>
+          </div>
+          <p v-if="isEditMode && product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+            Merci de renseigner tous les champs personnalisés obligatoires.
+          </p>
+
+          <!-- Comments -->
+          <div class="mt-4">
+            <CommentSection
+              entity-type="product"
+              :entity-id="String(route.params.id)"
+              :entity-name="product?.name"
+              show-resolved
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import { useProducts } from '~/composables/useProducts'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import { humanizeError } from '~/shared/utils/errorMessages'
+import { useDocuments } from '~/composables/useDocuments'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useProductHistory } from '~/composables/useProductHistory'
+import { usePermissions } from '~/composables/usePermissions'
+import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { getModelType } from '~/services/modelTypes'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import { canPreviewDocument } from '~/utils/documentPreview'
+import {
+  type CustomFieldInput,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled as _requiredCustomFieldsFilled,
+  saveCustomFieldValues as _saveCustomFieldValues,
+} from '~/shared/utils/customFieldFormUtils'
+
+const { canEdit } = usePermissions()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const { getProduct, updateProduct } = useProducts()
+const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
+const {
+  loadDocumentsByProduct,
+  uploadDocuments: uploadProductDocuments,
+  deleteDocument: deleteProductDocument,
+  updateDocument,
+} = useDocuments()
+const { ensureConstructeurs, getConstructeurById } = useConstructeurs()
+const { fetchLinks, syncLinks } = useConstructeurLinks()
+const {
+  history,
+  loading: historyLoading,
+  error: historyError,
+  loadHistory,
+} = useProductHistory()
+
+const isEditMode = ref(false)
+
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const originalConstructeurLinks = ref<ConstructeurLinkEntry[]>([])
+
+const product = ref<any | null>(null)
+const productType = ref<any | null>(null)
+const structure = ref<ProductModelStructure | null>(null)
+const customFieldInputs = ref<CustomFieldInput[]>([])
+const loading = ref(true)
+const saving = ref(false)
+const selectedFiles = ref<File[]>([])
+const uploadingDocuments = ref(false)
+const loadingDocuments = ref(false)
+const productDocuments = ref<any[]>([])
+const previewDocument = ref<any | null>(null)
+const previewVisible = ref(false)
+const editingDocument = ref<any | null>(null)
+const editModalVisible = ref(false)
+
+const historyFieldLabels: Record<string, string> = {
+  name: 'Nom',
+  reference: 'Référence',
+  supplierPrice: 'Prix fournisseur',
+  typeProduct: 'Catégorie',
+  constructeurIds: 'Fournisseurs',
+}
+
+const refreshCustomFieldInputs = (
+  structureOverride?: ProductModelStructure | null,
+  valuesOverride?: any[] | null,
+) => {
+  const nextStructure = structureOverride ?? structure.value ?? null
+  const nextValues = valuesOverride ?? product.value?.customFieldValues ?? null
+  customFieldInputs.value = buildCustomFieldInputs(nextStructure, nextValues)
+}
+
+const editionForm = reactive({
+  name: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  supplierPrice: '' as string,
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  _requiredCustomFieldsFilled(customFieldInputs.value),
+)
+
+const canSubmit = computed(() =>
+  Boolean(canEdit.value && product.value && editionForm.name.trim().length >= 2 && requiredCustomFieldsFilled.value && !saving.value),
+)
+
+const structurePreview = computed(() => formatProductStructurePreview(structure.value))
+
+const visibleCustomFields = computed(() => {
+  if (isEditMode.value) return customFieldInputs.value
+  return customFieldInputs.value.filter(
+    (f) => f.value !== null && f.value !== undefined && f.value !== '',
+  )
+})
+
+const openPreview = (doc: any) => {
+  if (!doc || !canPreviewDocument(doc)) return
+  previewDocument.value = doc
+  previewVisible.value = true
+}
+const closePreview = () => { previewVisible.value = false; previewDocument.value = null }
+
+const openEditModal = (doc: any) => {
+  editingDocument.value = doc
+  editModalVisible.value = true
+}
+const handleDocumentUpdated = async (data: { name?: string; type?: string }) => {
+  if (!editingDocument.value?.id) return
+  const result = await updateDocument(editingDocument.value.id, data)
+  if (result.success) {
+    const idx = productDocuments.value.findIndex((d: any) => d.id === editingDocument.value?.id)
+    if (idx !== -1) {
+      productDocuments.value[idx] = { ...productDocuments.value[idx], ...data }
+    }
+  }
+  editModalVisible.value = false
+  editingDocument.value = null
+}
+
+const loadProduct = async () => {
+  const id = route.params.id
+  if (!id || typeof id !== 'string') {
+    product.value = null
+    loading.value = false
+    return
+  }
+  const result = await getProduct(id)
+  if (result.success && result.data) {
+    product.value = result.data
+    productDocuments.value = Array.isArray(result.data.documents) ? result.data.documents : []
+
+    await loadProductType()
+
+    const customValues = Array.isArray(result.data?.customFieldValues) ? result.data.customFieldValues : []
+    refreshCustomFieldInputs(undefined, customValues)
+
+    hydrateForm()
+
+    loadHistory(result.data.id).catch(() => {})
+  } else {
+    product.value = null
+  }
+  loading.value = false
+}
+
+const refreshDocuments = async () => {
+  if (!product.value?.id) {
+    return
+  }
+  loadingDocuments.value = true
+  try {
+    const result = await loadDocumentsByProduct(product.value.id, { updateStore: false })
+    if (result.success) {
+      productDocuments.value = Array.isArray(result.data) ? result.data : []
+    }
+  } finally {
+    loadingDocuments.value = false
+  }
+}
+
+const removeDocument = async (documentId: string | number | null | undefined) => {
+  if (!documentId) {
+    return
+  }
+  const result = await deleteProductDocument(documentId, { updateStore: false })
+  if (result.success) {
+    productDocuments.value = productDocuments.value.filter((doc) => doc.id !== documentId)
+    toast.showSuccess('Document supprimé')
+  }
+}
+
+const handleFilesAdded = async (files: File[]) => {
+  if (!files?.length || !product.value?.id) {
+    return
+  }
+  uploadingDocuments.value = true
+  try {
+    const result = await uploadProductDocuments(
+      {
+        files,
+        context: { productId: product.value.id },
+      },
+      { updateStore: false },
+    )
+    if (result.success) {
+      selectedFiles.value = []
+      await refreshDocuments()
+      toast.showSuccess('Document(s) ajouté(s)')
+    } else if (result.error) {
+      toast.showError(result.error)
+    }
+  } finally {
+    uploadingDocuments.value = false
+  }
+}
+
+const loadProductType = async () => {
+  const embedded = product.value?.typeProduct
+  if (embedded && typeof embedded === 'object' && embedded.id) {
+    const embeddedStructure = embedded.structure ?? null
+    if (embeddedStructure) {
+      productType.value = embedded
+      structure.value = normalizeProductStructureForSave(embeddedStructure)
+      return
+    }
+  }
+
+  if (!product.value?.typeProductId) {
+    productType.value = embedded ?? null
+    structure.value = normalizeProductStructureForSave(embedded?.structure ?? null)
+    return
+  }
+  try {
+    const type = await getModelType(product.value.typeProductId)
+    productType.value = type
+    structure.value = normalizeProductStructureForSave(type?.structure ?? null)
+  } catch (error) {
+    console.error('Erreur lors du chargement du type de produit:', error)
+    productType.value = embedded ?? null
+    structure.value = normalizeProductStructureForSave(embedded?.structure ?? null)
+  }
+}
+
+const hydrateForm = () => {
+  if (!product.value) {
+    return
+  }
+  editionForm.name = product.value.name || ''
+  editionForm.reference = product.value.reference || ''
+  // Load constructeur links
+  fetchLinks('product', String(route.params.id)).then((links) => {
+    constructeurLinks.value = links
+    originalConstructeurLinks.value = links.map(l => ({ ...l }))
+    editionForm.constructeurIds = constructeurIdsFromLinks(links)
+    if (editionForm.constructeurIds.length) {
+      void ensureConstructeurs(editionForm.constructeurIds)
+    }
+  })
+  editionForm.supplierPrice = product.value.supplierPrice !== null && product.value.supplierPrice !== undefined
+    ? String(product.value.supplierPrice)
+    : ''
+  refreshCustomFieldInputs(structure.value, product.value.customFieldValues)
+}
+
+watch(
+  () => product.value?.documents,
+  (docs) => {
+    if (Array.isArray(docs)) {
+      productDocuments.value = docs
+    }
+  },
+  { immediate: true },
+)
+
+const submitEdition = async () => {
+  if (!product.value) {
+    return
+  }
+
+  const payload: Record<string, any> = {
+    name: editionForm.name.trim(),
+    reference: editionForm.reference.trim() || null,
+  }
+
+  const rawPrice = typeof editionForm.supplierPrice === 'string'
+    ? editionForm.supplierPrice.trim()
+    : editionForm.supplierPrice
+  payload.supplierPrice = rawPrice !== '' && rawPrice !== null && rawPrice !== undefined
+    ? Number.isNaN(Number(rawPrice))
+      ? null
+      : String(Number(rawPrice))
+    : null
+
+  saving.value = true
+  try {
+    const result = await updateProduct(product.value.id, payload)
+    if (result.success && result.data?.id) {
+      product.value = result.data
+      const failedFields = await _saveCustomFieldValues(
+        'product',
+        result.data.id,
+        [result.data?.typeProduct?.structure?.customFields],
+        { customFieldInputs, upsertCustomFieldValue, updateCustomFieldValue, toast },
+      )
+      if (failedFields.length) {
+        toast.showError(`Impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
+        return
+      }
+      await syncLinks('product', product.value.id, originalConstructeurLinks.value, constructeurLinks.value)
+      originalConstructeurLinks.value = constructeurLinks.value.map(l => ({ ...l }))
+      toast.showSuccess('Produit mis à jour avec succès')
+      await loadProduct()
+      isEditMode.value = false
+    }
+  } catch (error: any) {
+    toast.showError(humanizeError(error?.message) || 'Impossible de mettre à jour le produit')
+  } finally {
+    saving.value = false
+  }
+}
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => editionForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
+onMounted(async () => {
+  await loadProduct()
+  if (route.query.edit === 'true' && canEdit.value) {
+    isEditMode.value = true
+  }
+})
+</script>
diff --git a/frontend/app/pages/product/create.vue b/frontend/app/pages/product/create.vue
new file mode 100644
index 0000000..451240e
--- /dev/null
+++ b/frontend/app/pages/product/create.vue
@@ -0,0 +1,439 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div class="space-y-1">
+        <h1 class="text-3xl font-semibold text-base-content">Nouveau produit</h1>
+        <p class="text-sm text-base-content/70">
+          Sélectionnez la catégorie cible puis renseignez toutes les informations de votre produit catalogue.
+        </p>
+      </div>
+      <button type="button" class="btn btn-ghost btn-sm md:btn-md self-start" @click="$router.back()">
+        Retour au catalogue
+      </button>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-6">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Catégorie de produit</span>
+            </label>
+            <SearchSelect
+              v-model="selectedTypeId"
+              :options="productTypeList"
+              :loading="loadingTypes"
+              size="sm"
+              placeholder="Rechercher une catégorie..."
+              empty-text="Aucune catégorie disponible"
+              :option-label="typeOptionLabel"
+              :option-description="typeOptionDescription"
+              :disabled="!canEdit || loadingTypes || submitting"
+            />
+            <p v-if="loadingTypes" class="text-xs text-base-content/60 mt-1">
+              Chargement des catégories…
+            </p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom du produit</span>
+            </label>
+            <input
+              v-model="creationForm.name"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Nom affiché dans le catalogue"
+              required
+            >
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Référence</span>
+            </label>
+            <input
+              v-model="creationForm.reference"
+              type="text"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Référence interne ou fournisseur"
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Fournisseurs</span>
+            </label>
+            <ConstructeurSelect
+              v-model="creationForm.constructeurIds"
+              class="w-full"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Rechercher un ou plusieurs fournisseurs..."
+            />
+          </div>
+        </div>
+
+        <ConstructeurLinksTable
+          v-if="constructeurLinks.length"
+          v-model="constructeurLinks"
+        />
+
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Prix fournisseur indicatif (€)</span>
+            </label>
+            <input
+              v-model="creationForm.supplierPrice"
+              type="number"
+              step="0.01"
+              min="0"
+              class="input input-bordered input-sm md:input-md"
+              :disabled="!canEdit || submitting || !selectedType"
+              placeholder="Valeur indicatrice"
+            >
+          </div>
+        </div>
+
+        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
+              <p class="text-xs text-base-content/70">
+                {{ selectedType.description || 'Ce squelette définit les champs personnalisés applicables aux produits de cette catégorie.' }}
+              </p>
+            </div>
+            <span class="badge badge-outline">{{ formatProductStructurePreview(selectedType.structure) }}</span>
+          </div>
+
+          <p v-if="!customFieldInputs.length" class="text-xs text-base-content/70">
+            Cette catégorie ne définit pas encore de champs personnalisés.
+          </p>
+        </div>
+
+        <div v-if="customFieldInputs.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="space-y-1">
+            <h2 class="font-semibold text-base-content">Champs personnalisés</h2>
+            <p class="text-xs text-base-content/70">
+              Renseignez les valeurs propres à ce produit catalogue.
+            </p>
+          </header>
+          <CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || submitting" />
+        </div>
+
+        <div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
+          <header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h2 class="font-semibold text-base-content">Documents</h2>
+              <p class="text-xs text-base-content/70">
+                Ajoutez des documents pour ce produit (fiches techniques, notices, etc.).
+              </p>
+            </div>
+            <span v-if="selectedDocuments.length" class="badge badge-outline">
+              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} sélectionné{{ selectedDocuments.length > 1 ? 's' : '' }}
+            </span>
+          </header>
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || submitting || uploadingDocuments }">
+            <DocumentUpload
+              v-model="selectedDocuments"
+              title="Déposer vos fichiers"
+              subtitle="Formats acceptés : PDF, images, documents…"
+            />
+          </div>
+          <p v-if="uploadingDocuments" class="text-xs text-base-content/70">
+            Téléversement des documents en cours…
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-3 md:flex-row md:justify-end">
+          <NuxtLink to="/product-catalog" class="btn btn-ghost" :class="{ 'btn-disabled': submitting }">
+            Annuler
+          </NuxtLink>
+          <button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitCreation">
+            <span v-if="submitting" class="loading loading-spinner loading-sm mr-2"></span>
+            Créer le produit
+          </button>
+        </div>
+        <p v-if="selectedType && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
+          Merci de renseigner tous les champs personnalisés obligatoires.
+        </p>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import DocumentUpload from '~/components/DocumentUpload.vue'
+import { useProductTypes } from '~/composables/useProductTypes'
+import { useProducts } from '~/composables/useProducts'
+import { useToast } from '~/composables/useToast'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useDocuments } from '~/composables/useDocuments'
+import { formatProductStructurePreview, normalizeProductStructureForSave } from '~/shared/modelUtils'
+import { constructeurIdsFromLinks } from '~/shared/constructeurUtils'
+import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
+import { useConstructeurLinks } from '~/composables/useConstructeurLinks'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import type { ProductModelStructure } from '~/shared/types/inventory'
+import type { ModelType } from '~/services/modelTypes'
+import {
+  type CustomFieldInput,
+  normalizeCustomFieldInputs as normalizeCustomFieldInputsFromUtils,
+} from '~/shared/utils/customFieldFormUtils'
+
+interface ProductCatalogType extends ModelType {
+  structure: ProductModelStructure | null
+  customFields?: Array<Record<string, any>>
+}
+
+const route = useRoute()
+const router = useRouter()
+
+const { productTypes, loadProductTypes, loadingProductTypes: loadingTypes } = useProductTypes()
+const { createProduct } = useProducts()
+const toast = useToast()
+const { upsertCustomFieldValue } = useCustomFields()
+const { uploadDocuments } = useDocuments()
+const { canEdit } = usePermissions()
+const { syncLinks } = useConstructeurLinks()
+const { getConstructeurById } = useConstructeurs()
+
+const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
+const selectedTypeId = ref<string>(initialTypeId.value)
+const submitting = ref(false)
+const creationForm = reactive({
+  name: '' as string,
+  reference: '' as string,
+  constructeurIds: [] as string[],
+  supplierPrice: '' as string,
+})
+const constructeurLinks = ref<ConstructeurLinkEntry[]>([])
+const selectedDocuments = ref<File[]>([])
+const uploadingDocuments = ref(false)
+
+const customFieldInputs = ref<CustomFieldInput[]>([])
+
+const productTypeList = computed<ProductCatalogType[]>(() =>
+  (productTypes.value || []) as ProductCatalogType[],
+)
+
+const typeOptionLabel = (type?: ProductCatalogType) => type?.name || 'Catégorie'
+const typeOptionDescription = (type?: ProductCatalogType) =>
+  type?.description ? String(type.description) : ''
+
+const selectedType = computed(() => {
+  if (!selectedTypeId.value) {
+    return null
+  }
+  return productTypeList.value.find((type) => type.id === selectedTypeId.value) ?? null
+})
+
+watch(
+  () => route.query.typeId,
+  (value) => {
+    if (typeof value === 'string') {
+      selectedTypeId.value = value
+    }
+  },
+)
+
+watch(selectedTypeId, (id) => {
+  const current = typeof route.query.typeId === 'string' ? route.query.typeId : ''
+  if ((id || '') === current) {
+    return
+  }
+  const nextQuery = { ...route.query }
+  if (id) {
+    nextQuery.typeId = id
+  } else {
+    delete nextQuery.typeId
+  }
+  router.replace({ path: route.path, query: nextQuery }).catch(() => {})
+})
+
+watch(selectedType, (type) => {
+  if (!type) {
+    clearForm()
+    customFieldInputs.value = []
+    return
+  }
+  if (!creationForm.name) {
+    creationForm.name = type.name
+  }
+  customFieldInputs.value = normalizeCustomFieldInputsFromUtils(normalizeProductStructureForSave(type.structure))
+})
+
+const requiredCustomFieldsFilled = computed(() =>
+  customFieldInputs.value.every((field) => {
+    if (!field.required) {
+      return true
+    }
+    if (field.type === 'boolean') {
+      return field.value === 'true' || field.value === 'false'
+    }
+    return field.value.trim().length > 0
+  }),
+)
+
+const canSubmit = computed(() => Boolean(
+  canEdit.value &&
+  selectedType.value &&
+  creationForm.name.trim().length >= 2 &&
+  requiredCustomFieldsFilled.value &&
+  !submitting.value,
+))
+
+const clearForm = () => {
+  creationForm.name = ''
+  creationForm.reference = ''
+  creationForm.constructeurIds = []
+  creationForm.supplierPrice = ''
+}
+
+const buildPayload = () => {
+  const payload: Record<string, any> = {
+    name: creationForm.name.trim(),
+    typeProductId: selectedType.value?.id,
+  }
+
+  const reference = creationForm.reference.trim()
+  if (reference) {
+    payload.reference = reference
+  }
+
+  const rawPrice = typeof creationForm.supplierPrice === 'string'
+    ? creationForm.supplierPrice.trim()
+    : creationForm.supplierPrice
+  if (rawPrice !== '' && rawPrice !== null && rawPrice !== undefined) {
+    const parsed = Number(rawPrice)
+    if (!Number.isNaN(parsed)) {
+      payload.supplierPrice = String(parsed)
+    }
+  }
+
+  return payload
+}
+
+const submitCreation = async () => {
+  if (!selectedType.value) {
+    toast.showError('Sélectionnez une catégorie de produit.')
+    return
+  }
+
+  submitting.value = true
+  try {
+    const payload = buildPayload()
+    const result = await createProduct(payload)
+    if (result.success && result.data?.id) {
+      const productId = result.data.id
+      const failedFields = await saveCustomFieldValues(result.data.id)
+      if (failedFields.length) {
+        toast.showError(`Produit créé, mais impossible d'enregistrer ${failedFields.length} champ(s): ${failedFields.join(', ')}`)
+        await router.replace(`/product/${result.data.id}?edit=true`)
+        return
+      }
+      // Sync constructeur links after creation
+      if (constructeurLinks.value.length) {
+        await syncLinks('product', productId, [], constructeurLinks.value)
+      }
+      if (selectedDocuments.value.length) {
+        uploadingDocuments.value = true
+        const uploadResult = await uploadDocuments(
+          {
+            files: selectedDocuments.value,
+            context: { productId },
+          },
+          { updateStore: false },
+        )
+        if (!uploadResult.success) {
+          const message = uploadResult.error
+            ? `Documents non ajoutés : ${uploadResult.error}`
+            : 'Documents non ajoutés : une erreur est survenue.'
+          toast.showError(message)
+        } else {
+          selectedDocuments.value = []
+        }
+      }
+      toast.showSuccess('Produit créé avec succès')
+      await router.replace(`/product/${productId}?edit=true`)
+    }
+  } catch (error: any) {
+    toast.showError(error?.message || 'Erreur lors de la création du produit')
+  } finally {
+    submitting.value = false
+    uploadingDocuments.value = false
+  }
+}
+
+const saveCustomFieldValues = async (productId: string) => {
+  const failed: string[] = []
+  for (const field of customFieldInputs.value) {
+    if (!field.name) {
+      continue
+    }
+    const value = field.value ?? ''
+    const metadata = field.customFieldId
+      ? undefined
+      : { customFieldName: field.name, customFieldType: field.type, customFieldRequired: field.required }
+    const result = await upsertCustomFieldValue(
+      field.customFieldId,
+      'product',
+      productId,
+      String(value ?? ''),
+      metadata,
+    )
+    if (!result.success) {
+      failed.push(field.name)
+    } else {
+      const createdValue = result.data
+      if (createdValue?.id) {
+        field.customFieldValueId = createdValue.id
+      }
+      const resolvedId = createdValue?.customField?.id || field.customFieldId
+      if (resolvedId) {
+        field.customFieldId = resolvedId
+      }
+    }
+  }
+  return failed
+}
+
+// Sync constructeurIds → constructeurLinks when IDs are added via ConstructeurSelect
+watch(
+  () => creationForm.constructeurIds,
+  (ids) => {
+    const currentIds = new Set(constructeurLinks.value.map(l => l.constructeurId))
+    for (const id of ids) {
+      if (!currentIds.has(id)) {
+        const resolved = getConstructeurById(id)
+        constructeurLinks.value.push({
+          constructeurId: id,
+          constructeur: resolved ? { id: resolved.id, name: resolved.name } : null,
+          supplierReference: null,
+        })
+      }
+    }
+    constructeurLinks.value = constructeurLinks.value.filter(l => ids.includes(l.constructeurId))
+  },
+)
+
+onMounted(async () => {
+  await loadProductTypes()
+  if (selectedTypeId.value && !selectedType.value) {
+    await router.replace({
+      path: route.path,
+      query: { ...route.query, typeId: undefined },
+    }).catch(() => {})
+  }
+})
+</script>
diff --git a/frontend/app/pages/profiles/index.vue b/frontend/app/pages/profiles/index.vue
new file mode 100644
index 0000000..9376367
--- /dev/null
+++ b/frontend/app/pages/profiles/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <main class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
+    <div class="w-full max-w-md">
+      <div class="card bg-base-100 shadow-2xl">
+        <div class="card-body">
+          <h1 class="text-2xl font-bold mb-6 text-center">
+            Connexion
+          </h1>
+
+          <div v-if="loadingProfiles" class="flex justify-center py-8">
+            <span class="loading loading-spinner loading-lg" />
+          </div>
+
+          <form v-else @submit.prevent="handleLogin">
+            <div class="form-control mb-4">
+              <label class="label">
+                <span class="label-text">Profil</span>
+              </label>
+              <select
+                v-model="selectedProfileId"
+                class="select select-bordered w-full"
+                required
+              >
+                <option value="" disabled>
+                  Choisir un profil...
+                </option>
+                <option
+                  v-for="profile in profiles"
+                  :key="profile.id"
+                  :value="profile.id"
+                >
+                  {{ profile.firstName }} {{ profile.lastName }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-control mb-2">
+              <label class="label">
+                <span class="label-text">Mot de passe</span>
+              </label>
+              <input
+                ref="passwordInput"
+                v-model="password"
+                type="password"
+                placeholder="Mot de passe"
+                class="input input-bordered w-full"
+                :class="{ 'input-error': loginError }"
+              >
+            </div>
+
+            <p v-if="loginError" class="text-error text-sm mb-4">
+              {{ loginError }}
+            </p>
+
+            <button
+              type="submit"
+              class="btn btn-primary w-full mt-4"
+              :disabled="!selectedProfileId || submitting"
+            >
+              <span v-if="submitting" class="loading loading-spinner loading-xs" />
+              Se connecter
+            </button>
+          </form>
+
+          <footer v-if="activeProfile" class="mt-6 pt-4 border-t border-base-300 flex justify-between items-center">
+            <div class="text-sm text-base-content/70">
+              Connecte :
+              <span class="font-semibold">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</span>
+            </div>
+            <button type="button" class="btn btn-outline btn-sm" @click="handleLogout">
+              Deconnexion
+            </button>
+          </footer>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useProfiles, useProfileSession } from '#imports'
+
+const router = useRouter()
+const { profiles, loadingProfiles, fetchProfiles } = useProfiles()
+const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()
+
+const selectedProfileId = ref('')
+const password = ref('')
+const loginError = ref('')
+const submitting = ref(false)
+const passwordInput = ref(null)
+
+const handleLogin = async () => {
+  if (!selectedProfileId.value) { return }
+  submitting.value = true
+  loginError.value = ''
+  try {
+    await activateProfile(selectedProfileId.value, password.value || undefined)
+    await router.push('/')
+  } catch (error) {
+    const err = error
+    if (err?.status === 401 || err?.statusCode === 401) {
+      loginError.value = 'Mot de passe incorrect.'
+    } else {
+      loginError.value = 'Erreur lors de la connexion.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+const handleLogout = async () => {
+  await logout()
+  selectedProfileId.value = ''
+  password.value = ''
+}
+
+onMounted(async () => {
+  await fetchProfiles()
+  await fetchCurrentProfile()
+})
+</script>
diff --git a/frontend/app/pages/sites.vue b/frontend/app/pages/sites.vue
new file mode 100644
index 0000000..6ceddca
--- /dev/null
+++ b/frontend/app/pages/sites.vue
@@ -0,0 +1,119 @@
+<template>
+  <main class="container mx-auto px-6 py-8">
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="siteDocuments"
+      @close="closePreview"
+    />
+
+    <div class="my-8">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold">
+          Sites
+        </h2>
+        <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
+          <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
+          Ajouter un site
+        </button>
+      </div>
+
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <span class="loading loading-spinner loading-lg" />
+      </div>
+
+      <div v-else-if="sites.length === 0" class="text-center py-12">
+        <div class="max-w-md mx-auto">
+          <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
+          <h3 class="text-lg font-medium text-base-content mb-2">
+            Aucun site trouvé
+          </h3>
+          <p class="text-base-content/50 mb-4">
+            Commencez par ajouter votre premier site.
+          </p>
+          <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
+            Ajouter un site
+          </button>
+        </div>
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <SiteCard
+          v-for="site in sites"
+          :key="site.id"
+          :site="site"
+          @edit="editSite"
+          @delete="confirmDeleteSite"
+        />
+      </div>
+    </div>
+
+    <SiteCreateModal
+      :visible="showAddSiteModal"
+      :site="newSite"
+      :disabled="!canEdit"
+      @close="closeCreateModal"
+      @submit="handleCreateSite"
+    />
+
+    <SiteEditModal
+      :visible="showEditSiteModal"
+      :site-name="siteBeingEdited?.name || ''"
+      :form="editSiteForm"
+      :documents="siteDocuments"
+      :selected-files="selectedFiles"
+      :uploading-documents="uploadingDocuments"
+      :can-preview-document="canPreviewDocument"
+      :document-icon="documentIcon"
+      :format-size="formatSize"
+      :disabled="!canEdit"
+      @close="closeEditModal"
+      @submit="handleUpdateSite"
+      @remove-document="handleRemoveSiteDocument"
+      @download-document="downloadDocument"
+      @preview-document="openPreview"
+      @update:selected-files="(files) => (selectedFiles.value = files)"
+    />
+  </main>
+</template>
+
+<script setup>
+import IconLucideMapPin from '~icons/lucide/map-pin'
+import IconLucidePlus from '~icons/lucide/plus'
+import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
+import SiteCard from '~/components/sites/SiteCard.vue'
+import SiteCreateModal from '~/components/sites/SiteCreateModal.vue'
+import SiteEditModal from '~/components/sites/SiteEditModal.vue'
+import { useSiteManagement } from '~/composables/useSiteManagement'
+
+const { canEdit } = usePermissions()
+
+const {
+  sites,
+  loading,
+  showAddSiteModal,
+  showEditSiteModal,
+  siteBeingEdited,
+  newSite,
+  editSiteForm,
+  selectedFiles,
+  uploadingDocuments,
+  previewDocument,
+  previewVisible,
+  siteDocuments,
+  documentIcon,
+  handleCreateSite,
+  editSite,
+  handleUpdateSite,
+  closeEditModal,
+  handleRemoveSiteDocument,
+  downloadDocument,
+  openPreview,
+  closePreview,
+  formatSize,
+  confirmDeleteSite,
+  canPreviewDocument,
+  openCreateSiteModal,
+  closeCreateModal
+} = useSiteManagement()
+</script>
diff --git a/frontend/app/services/modelTypes.ts b/frontend/app/services/modelTypes.ts
new file mode 100644
index 0000000..d072959
--- /dev/null
+++ b/frontend/app/services/modelTypes.ts
@@ -0,0 +1,261 @@
+import { useRequestFetch } from '#imports';
+import type {
+  ComponentModelStructure,
+  PieceModelStructure,
+  ProductModelStructure,
+} from '~/shared/types/inventory';
+
+export type ModelCategory = 'COMPONENT' | 'PIECE' | 'PRODUCT';
+
+export type ModelTypeStructure =
+  | ComponentModelStructure
+  | PieceModelStructure
+  | ProductModelStructure
+  | null;
+
+export interface BaseModelTypePayload {
+  name: string;
+  code: string;
+  notes?: string | null;
+  description?: string | null;
+}
+
+export interface ComponentModelTypePayload extends BaseModelTypePayload {
+  category: 'COMPONENT';
+  structure?: ComponentModelStructure | null;
+  referenceFormula?: string | null;
+  requiredFieldsForReference?: string[] | null;
+}
+
+export interface PieceModelTypePayload extends BaseModelTypePayload {
+  category: 'PIECE';
+  structure?: PieceModelStructure | null;
+  referenceFormula?: string | null;
+  requiredFieldsForReference?: string[] | null;
+}
+
+export interface ProductModelTypePayload extends BaseModelTypePayload {
+  category: 'PRODUCT';
+  structure?: ProductModelStructure | null;
+}
+
+export type ModelTypePayload =
+  | ComponentModelTypePayload
+  | PieceModelTypePayload
+  | ProductModelTypePayload;
+
+export interface ModelType extends BaseModelTypePayload {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  category: ModelCategory;
+  structure: ModelTypeStructure;
+  referenceFormula?: string | null;
+  requiredFieldsForReference?: string[] | null;
+}
+
+export interface ModelTypeListParams {
+  q?: string;
+  category?: ModelCategory;
+  sort?: 'name' | 'createdAt';
+  dir?: 'asc' | 'desc';
+  limit?: number;
+  offset?: number;
+}
+
+export interface ModelTypeListResponse {
+  items: ModelType[];
+  total: number;
+  offset: number;
+  limit: number;
+}
+
+const ENDPOINT = '/model_types';
+
+function resolveBaseUrl() {
+  const runtimeConfig = useRuntimeConfig();
+  return runtimeConfig.public.apiBaseUrl || '';
+}
+
+function createOptions(options: Record<string, unknown> = {}): Record<string, unknown> {
+  return {
+    baseURL: resolveBaseUrl(),
+    credentials: 'include',
+    ...options,
+  };
+}
+
+const normalizeModelType = (item: any): ModelType => {
+  if (!item || typeof item !== 'object') {
+    return item as ModelType;
+  }
+  return item as ModelType;
+};
+
+export async function listModelTypes(params: ModelTypeListParams = {}, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  const query: Record<string, string | number> = {};
+
+  if (params.q) {
+    query.name = params.q;
+  }
+  if (params.category) {
+    query.category = params.category;
+  }
+
+  // Sort: API Platform OrderFilter uses order[field]=direction
+  const sortField = params.sort || 'name';
+  const sortDir = params.dir || 'asc';
+  query[`order[${sortField}]`] = sortDir;
+
+  // Pagination: API Platform uses page + itemsPerPage
+  const effectiveLimit = typeof params.limit === 'number' ? params.limit : 20;
+  const effectiveOffset = typeof params.offset === 'number' ? params.offset : 0;
+  const page = Math.floor(effectiveOffset / effectiveLimit) + 1;
+
+  query.itemsPerPage = effectiveLimit;
+  query.page = page;
+
+  const payload = await requestFetch<Record<string, any>>(ENDPOINT, createOptions({
+    method: 'GET',
+    query,
+    signal: opts.signal,
+  }));
+
+  const rawItems = Array.isArray(payload?.member)
+    ? payload.member
+    : Array.isArray(payload?.['hydra:member'])
+      ? payload['hydra:member']
+      : Array.isArray(payload?.items)
+        ? payload.items
+        : [];
+
+  const total = typeof payload?.totalItems === 'number'
+    ? payload.totalItems
+    : typeof payload?.['hydra:totalItems'] === 'number'
+      ? payload['hydra:totalItems']
+      : rawItems.length;
+
+  const items = rawItems.map(normalizeModelType);
+
+  return {
+    items,
+    total,
+    offset: effectiveOffset,
+    limit: effectiveLimit,
+  } satisfies ModelTypeListResponse;
+}
+
+export function createModelType(payload: ModelTypePayload, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<ModelType>(ENDPOINT, createOptions({
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/ld+json',
+      Accept: 'application/ld+json',
+    },
+    body: payload,
+    signal: opts.signal,
+  })).then(normalizeModelType);
+}
+
+export function updateModelType(id: string, payload: Partial<ModelTypePayload>, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<ModelType>(`${ENDPOINT}/${id}`, createOptions({
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/merge-patch+json',
+      Accept: 'application/ld+json',
+    },
+    body: payload,
+    signal: opts.signal,
+  })).then(normalizeModelType);
+}
+
+export function deleteModelType(id: string, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<void>(`${ENDPOINT}/${id}`, createOptions({
+    method: 'DELETE',
+    signal: opts.signal,
+  }));
+}
+
+export function getModelType(id: string, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<ModelType>(`${ENDPOINT}/${id}`, createOptions({
+    method: 'GET',
+    signal: opts.signal,
+  })).then(normalizeModelType);
+}
+
+export interface ConversionCheck {
+  canConvert: boolean;
+  direction: 'piece_to_component' | 'component_to_piece' | null;
+  itemCount: number;
+  names: string[];
+  blockers: string[];
+}
+
+export interface ConversionResult {
+  success: boolean;
+  convertedCount: number;
+  error?: string | null;
+}
+
+export function checkConversion(id: string, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<ConversionCheck>(`${ENDPOINT}/${id}/conversion-check`, createOptions({
+    method: 'GET',
+    signal: opts.signal,
+  }));
+}
+
+export function convertCategory(id: string, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<ConversionResult>(`${ENDPOINT}/${id}/convert`, createOptions({
+    method: 'POST',
+    signal: opts.signal,
+  }));
+}
+
+export interface SyncPreviewResult {
+  modelTypeId: string;
+  category: string;
+  itemCount: number;
+  additions: Record<string, number>;
+  deletions: Record<string, number>;
+  modifications: Record<string, number>;
+}
+
+export interface SyncExecuteResult {
+  itemsUpdated: number;
+  additions: Record<string, number>;
+  deletions: Record<string, number>;
+  modifications: Record<string, number>;
+}
+
+export function syncPreview(id: string, structure: unknown, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<SyncPreviewResult>(`${ENDPOINT}/${id}/sync-preview`, createOptions({
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
+    body: { structure },
+    signal: opts.signal,
+  }));
+}
+
+export function syncExecute(id: string, confirmation: { confirmDeletions: boolean; confirmTypeChanges: boolean }, opts: { signal?: AbortSignal } = {}) {
+  const requestFetch = useRequestFetch();
+  return requestFetch<SyncExecuteResult>(`${ENDPOINT}/${id}/sync`, createOptions({
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    },
+    body: confirmation,
+    signal: opts.signal,
+  }));
+}
diff --git a/frontend/app/shared/apiRelations.ts b/frontend/app/shared/apiRelations.ts
new file mode 100644
index 0000000..0e3da7d
--- /dev/null
+++ b/frontend/app/shared/apiRelations.ts
@@ -0,0 +1,56 @@
+export const RELATION_ID_MAP: Record<string, { key: string; path: string }> = {
+  siteId: { key: 'site', path: 'sites' },
+  machineId: { key: 'machine', path: 'machines' },
+  composantId: { key: 'composant', path: 'composants' },
+  pieceId: { key: 'piece', path: 'pieces' },
+  productId: { key: 'product', path: 'products' },
+  typeComposantId: { key: 'typeComposant', path: 'model_types' },
+  typePieceId: { key: 'typePiece', path: 'model_types' },
+  typeProductId: { key: 'typeProduct', path: 'model_types' },
+};
+
+export const toIri = (path: string, id: string): string => `/api/${path}/${id}`;
+
+export const extractRelationId = (value: unknown): string | null => {
+  if (!value) {
+    return null;
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return null;
+    }
+    if (trimmed.includes('/')) {
+      const parts = trimmed.split('/').filter(Boolean);
+      return parts.length ? (parts[parts.length - 1] ?? null) : null;
+    }
+    return trimmed;
+  }
+  if (typeof value === 'object' && 'id' in (value as Record<string, any>)) {
+    const id = (value as Record<string, any>).id;
+    return typeof id === 'string' ? id : null;
+  }
+  return null;
+};
+
+export const normalizeRelationIds = <T extends Record<string, any>>(payload: T): T => {
+  if (!payload || typeof payload !== 'object') {
+    return payload;
+  }
+
+  const next: Record<string, any> = { ...payload };
+  Object.entries(RELATION_ID_MAP).forEach(([sourceKey, config]) => {
+    const raw = next[sourceKey];
+    if (typeof raw !== 'string') {
+      return;
+    }
+    const trimmed = raw.trim();
+    if (!trimmed) {
+      return;
+    }
+    next[config.key] = toIri(config.path, trimmed);
+    delete next[sourceKey];
+  });
+
+  return next as T;
+};
diff --git a/frontend/app/shared/constructeurUtils.ts b/frontend/app/shared/constructeurUtils.ts
new file mode 100644
index 0000000..843909d
--- /dev/null
+++ b/frontend/app/shared/constructeurUtils.ts
@@ -0,0 +1,141 @@
+import { formatPhone } from '~/utils/formatters/phone';
+
+export interface ConstructeurSummary {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  phone?: string | null;
+}
+
+export interface ConstructeurLinkEntry {
+  linkId?: string;
+  constructeurId: string;
+  constructeur?: ConstructeurSummary | null;
+  supplierReference: string | null;
+}
+
+export const constructeurIdsFromLinks = (links: ConstructeurLinkEntry[]): string[] =>
+  links.map(l => l.constructeurId).filter(Boolean);
+
+export const parseConstructeurLinksFromApi = (
+  apiLinks: any[],
+): ConstructeurLinkEntry[] => {
+  if (!Array.isArray(apiLinks)) return [];
+  return apiLinks
+    .filter(link => link && typeof link === 'object')
+    .map(link => ({
+      linkId: link.id || (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
+      constructeurId: typeof link.constructeur === 'string'
+        ? link.constructeur.split('/').pop()!
+        : link.constructeur?.id || '',
+      constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
+      supplierReference: link.supplierReference ?? null,
+    }));
+};
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+
+const toStringId = (value: unknown): string | null => {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  if (trimmed.includes('/')) {
+    const parts = trimmed.split('/').filter(Boolean);
+    return parts.length ? (parts[parts.length - 1] ?? null) : null;
+  }
+  return trimmed;
+};
+
+export const uniqueConstructeurIds = (...sources: unknown[]): string[] => {
+  const ids = new Set<string>();
+
+  const pushId = (value: unknown) => {
+    const id = toStringId(value);
+    if (id) {
+      ids.add(id);
+    }
+  };
+
+  const explore = (value: unknown): void => {
+    if (!value) {
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach(explore);
+      return;
+    }
+    if (typeof value === 'string') {
+      pushId(value);
+      return;
+    }
+    if (isObject(value)) {
+      if (Array.isArray(value.constructeurIds)) {
+        value.constructeurIds.forEach(pushId);
+      }
+      if (value.constructeurId) {
+        pushId(value.constructeurId);
+      }
+      if (Array.isArray(value.constructeurs)) {
+        value.constructeurs.forEach(explore);
+      }
+      if (value.constructeur) {
+        explore(value.constructeur);
+      }
+      // Extract ID from constructeur-like objects, but skip component/piece/product entities
+      if (typeof value.id === 'string' && !value.typeComposant && !value.typePiece && !value.typeProduct) {
+        pushId(value.id);
+      }
+      return;
+    }
+  };
+
+  sources.forEach(explore);
+  return Array.from(ids);
+};
+
+export const resolveConstructeurs = (
+  ids: string[],
+  ...candidatePools: Array<ConstructeurSummary[] | null | undefined>
+): ConstructeurSummary[] => {
+  if (!Array.isArray(ids) || ids.length === 0) {
+    return [];
+  }
+
+  const index = new Map<string, ConstructeurSummary>();
+  const register = (pool?: ConstructeurSummary[] | null) => {
+    if (!Array.isArray(pool)) {
+      return;
+    }
+    pool.forEach((entry) => {
+      if (entry && typeof entry === 'object' && typeof entry.id === 'string') {
+        index.set(entry.id, entry);
+      }
+    });
+  };
+
+  candidatePools.forEach(register);
+
+  return ids
+    .map((id) => index.get(id))
+    .filter((item): item is ConstructeurSummary => Boolean(item))
+    .map((item) => ({ ...item }));
+};
+
+export const formatConstructeurContact = (
+  constructeur?: ConstructeurSummary | null,
+): string => {
+  if (!constructeur) {
+    return '';
+  }
+
+  const formattedPhone = formatPhone(constructeur.phone);
+  const phone = formattedPhone || constructeur.phone || null;
+
+  return [constructeur.email, phone].filter(Boolean).join(' • ');
+};
+
diff --git a/frontend/app/shared/documentTypes.ts b/frontend/app/shared/documentTypes.ts
new file mode 100644
index 0000000..2b60f00
--- /dev/null
+++ b/frontend/app/shared/documentTypes.ts
@@ -0,0 +1,15 @@
+export const DOCUMENT_TYPES = [
+  { value: 'documentation', label: 'Documentation' },
+  { value: 'devis', label: 'Devis' },
+  { value: 'facture', label: 'Facture' },
+  { value: 'plan', label: 'Plan' },
+  { value: 'photo', label: 'Photo' },
+  { value: 'autre', label: 'Autre' },
+] as const
+
+export type DocumentTypeValue = (typeof DOCUMENT_TYPES)[number]['value']
+
+export const getDocumentTypeLabel = (value: string): string => {
+  const found = DOCUMENT_TYPES.find((t) => t.value === value)
+  return found?.label ?? value
+}
diff --git a/frontend/app/shared/model/componentStructure.ts b/frontend/app/shared/model/componentStructure.ts
new file mode 100644
index 0000000..29ed772
--- /dev/null
+++ b/frontend/app/shared/model/componentStructure.ts
@@ -0,0 +1,316 @@
+import {
+  createEmptyComponentModelStructure,
+  type ComponentModelCustomField,
+  type ComponentModelStructure,
+  type ComponentModelStructureNode,
+} from '../types/inventory'
+
+// Import for internal use in this file
+import { sanitizeCustomFields, sanitizePieces, sanitizeProducts, sanitizeSubcomponents } from './componentStructureSanitize'
+import { hydrateCustomFields, hydratePieces, hydrateProducts, hydrateSubcomponents, mapComponentCustomFields, mapComponentPieces, mapComponentProducts, mapSubcomponents } from './componentStructureHydrate'
+
+// Re-export sanitize functions so existing imports continue to work
+export {
+  toStringArray,
+  extractFieldValueObject,
+  sanitizeCustomFields,
+  sanitizePieces,
+  sanitizeProducts,
+  sanitizeSubcomponents,
+} from './componentStructureSanitize'
+
+// Re-export hydrate functions so existing imports continue to work
+export {
+  hydrateCustomFields,
+  hydratePieces,
+  hydrateProducts,
+  hydrateSubcomponents,
+  mapComponentCustomFields,
+  mapComponentPieces,
+  mapComponentProducts,
+  mapSubcomponents,
+} from './componentStructureHydrate'
+
+export const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+export interface ModelStructurePreview {
+  customFields: number
+  pieces: number
+  products: number
+  subcomponents: number
+}
+
+export const defaultStructure = (): ComponentModelStructure => ({
+  ...createEmptyComponentModelStructure(),
+})
+
+const ensureStructureShape = (input: any): ComponentModelStructure => {
+  const base = createEmptyComponentModelStructure()
+  if (!isPlainObject(input)) {
+    return base
+  }
+
+  const clone: ComponentModelStructure = {
+    ...base,
+    customFields: Array.isArray((input as any).customFields) ? (input as any).customFields : [],
+    pieces: Array.isArray((input as any).pieces) ? (input as any).pieces : [],
+    products: Array.isArray((input as any).products) ? (input as any).products : [],
+    subcomponents: Array.isArray((input as any).subcomponents)
+      ? (input as any).subcomponents
+      : Array.isArray((input as any).subComponents)
+        ? (input as any).subComponents
+        : [],
+    typeComposantId: typeof (input as any).typeComposantId === 'string' ? (input as any).typeComposantId : undefined,
+    typeComposantLabel: typeof (input as any).typeComposantLabel === 'string'
+      ? (input as any).typeComposantLabel
+      : undefined,
+    modelId: typeof (input as any).modelId === 'string' ? (input as any).modelId : undefined,
+    familyCode: typeof (input as any).familyCode === 'string' ? (input as any).familyCode : undefined,
+    alias: typeof (input as any).alias === 'string' ? (input as any).alias : undefined,
+  }
+
+  return clone
+}
+
+export const cloneStructure = (input: any): ComponentModelStructure => {
+  try {
+    const cloned = JSON.parse(JSON.stringify(input ?? defaultStructure()))
+    return ensureStructureShape(cloned)
+  } catch (_error) {
+    return defaultStructure()
+  }
+}
+
+export const normalizeStructureForEditor = (input: any): ComponentModelStructure => {
+  const source = cloneStructure(input)
+
+  const sanitizedCustomFields = sanitizeCustomFields(source.customFields)
+  const customFields = sanitizedCustomFields.map((field) => {
+    const options = Array.isArray(field.options) ? [...field.options] : []
+    const optionsText = options.length ? options.join('\n') : ''
+    const defaultValue =
+      field.defaultValue !== undefined && field.defaultValue !== null && field.defaultValue !== ''
+        ? String(field.defaultValue)
+        : null
+    const copy: ComponentModelCustomField = {
+      name: field.name,
+      type: field.type,
+      required: field.required,
+      options,
+      defaultValue,
+      optionsText,
+      id: field.id,
+      customFieldId: field.customFieldId,
+    }
+    return copy
+  })
+
+  const result: ComponentModelStructure = {
+    customFields: customFields as ComponentModelCustomField[],
+    pieces: sanitizePieces(source.pieces),
+    products: sanitizeProducts(source.products),
+    subcomponents: hydrateSubcomponents(source.subcomponents),
+  }
+
+  if (typeof source.typeComposantId === 'string' && source.typeComposantId.length > 0) {
+    result.typeComposantId = source.typeComposantId
+  }
+  if (typeof source.typeComposantLabel === 'string' && source.typeComposantLabel.length > 0) {
+    result.typeComposantLabel = source.typeComposantLabel
+  }
+  if (typeof source.modelId === 'string' && source.modelId.length > 0) {
+    result.modelId = source.modelId
+  }
+  if (typeof source.familyCode === 'string' && source.familyCode.length > 0) {
+    result.familyCode = source.familyCode
+  }
+  if (typeof source.alias === 'string' && source.alias.length > 0) {
+    result.alias = source.alias
+  }
+
+  return result
+}
+
+export const normalizeStructureForSave = (input: any): any => {
+  const source = cloneStructure(input)
+
+  const sanitizedCustomFields = sanitizeCustomFields(source.customFields)
+  const backendCustomFields = sanitizedCustomFields.map((field) => {
+    const value: Record<string, any> = {
+      type: field.type,
+      required: !!field.required,
+    }
+    if (field.options && field.options.length) {
+      value.options = field.options
+    }
+    if (field.defaultValue !== undefined && field.defaultValue !== null && field.defaultValue !== '') {
+      value.defaultValue = field.defaultValue
+    }
+    const payload: Record<string, any> = {
+      key: field.name,
+      value,
+    }
+    if (field.id) {
+      payload.id = field.id
+    }
+    if (field.customFieldId) {
+      payload.customFieldId = field.customFieldId
+    }
+    return payload
+  }) as any
+
+  const backendPieces = sanitizePieces(source.pieces).map((piece) => {
+    const payload: Record<string, any> = {}
+    if ((piece as any).familyCode) {
+      payload.familyCode = (piece as any).familyCode
+    }
+    if (piece.typePieceId) {
+      payload.typePieceId = piece.typePieceId
+    }
+    if (piece.typePieceLabel) {
+      payload.typePieceLabel = piece.typePieceLabel
+    }
+    if (piece.reference) {
+      payload.reference = piece.reference
+    }
+    if ((piece as any).quantity !== undefined && (piece as any).quantity >= 1) {
+      payload.quantity = (piece as any).quantity
+    }
+    return payload
+  }) as any
+
+  const backendProducts = sanitizeProducts(source.products).map((product) => {
+    const payload: Record<string, any> = {}
+    if ((product as any).familyCode) {
+      payload.familyCode = (product as any).familyCode
+    }
+    if (product.typeProductId) {
+      payload.typeProductId = product.typeProductId
+    }
+    if (product.role) {
+      payload.role = product.role
+    }
+    return payload
+  }) as any
+
+  const mapSubcomponentForSave = (subcomponent: ComponentModelStructureNode): any => {
+    const payload: Record<string, any> = {}
+    if (subcomponent.typeComposantId) {
+      payload.typeComposantId = subcomponent.typeComposantId
+    }
+    if (subcomponent.modelId) {
+      payload.modelId = subcomponent.modelId
+    }
+    if (subcomponent.familyCode) {
+      payload.familyCode = subcomponent.familyCode
+    }
+    if (subcomponent.alias) {
+      payload.alias = subcomponent.alias
+    }
+    if (Array.isArray(subcomponent.subcomponents) && subcomponent.subcomponents.length) {
+      payload.subcomponents = subcomponent.subcomponents.map(mapSubcomponentForSave)
+    }
+    return payload
+  }
+
+  const backendSubcomponents = sanitizeSubcomponents(source.subcomponents).map(mapSubcomponentForSave) as any
+
+  const result: ComponentModelStructure = {
+    customFields: backendCustomFields,
+    pieces: backendPieces,
+    products: backendProducts,
+    subcomponents: backendSubcomponents,
+  }
+
+  if (typeof source.typeComposantId === 'string' && source.typeComposantId.length > 0) {
+    (result as any).typeComposantId = source.typeComposantId
+  }
+  if (typeof source.typeComposantLabel === 'string' && source.typeComposantLabel.length > 0) {
+    (result as any).typeComposantLabel = source.typeComposantLabel
+  }
+  if (typeof source.modelId === 'string' && source.modelId.length > 0) {
+    (result as any).modelId = source.modelId
+  }
+  if (typeof source.familyCode === 'string' && source.familyCode.length > 0) {
+    (result as any).familyCode = source.familyCode
+  }
+  if (typeof source.alias === 'string' && source.alias.length > 0) {
+    (result as any).alias = source.alias
+  }
+
+  return result
+}
+
+export const hydrateStructureForEditor = (input: any): ComponentModelStructure => {
+  const source = cloneStructure(input)
+  return {
+    customFields: hydrateCustomFields(source.customFields),
+    pieces: hydratePieces(source.pieces),
+    products: hydrateProducts(source.products),
+    subcomponents: hydrateSubcomponents(
+      Array.isArray(source.subcomponents) ? source.subcomponents : (source as any).subComponents,
+    ),
+    typeComposantId: source.typeComposantId ?? '',
+    typeComposantLabel: source.typeComposantLabel ?? '',
+    modelId: source.modelId ?? '',
+    familyCode: source.familyCode ?? '',
+    alias: source.alias ?? '',
+  }
+}
+
+export const extractStructureFromComponent = (component: any) => {
+  if (!component) {
+    return defaultStructure()
+  }
+
+  const raw = {
+    customFields: mapComponentCustomFields(component.customFields),
+    pieces: mapComponentPieces(component.pieces),
+    products: mapComponentProducts(component.products),
+    subcomponents: mapSubcomponents(
+      Array.isArray(component?.subcomponents)
+        ? component.subcomponents
+        : component?.subComponents,
+    ),
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposant?.name ?? component?.typeComposantLabel ?? '',
+    modelId: component?.modelId ?? '',
+    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
+    alias: component?.alias ?? component?.name ?? '',
+  }
+
+  return normalizeStructureForEditor(raw)
+}
+
+export const computeStructureStats = (structure: any): ModelStructurePreview => {
+  if (!structure || typeof structure !== 'object') {
+    return { customFields: 0, pieces: 0, products: 0, subcomponents: 0 }
+  }
+
+  return {
+    customFields: Array.isArray(structure.customFields) ? structure.customFields.length : 0,
+    pieces: Array.isArray(structure.pieces) ? structure.pieces.length : 0,
+    products: Array.isArray(structure.products) ? structure.products.length : 0,
+    subcomponents: Array.isArray(structure.subcomponents)
+      ? structure.subcomponents.length
+      : Array.isArray(structure.subComponents)
+        ? structure.subComponents.length
+        : 0,
+  }
+}
+
+export const formatStructurePreview = (structure: any) => {
+  const stats = computeStructureStats(structure)
+  if (!stats.customFields && !stats.pieces && !stats.products && !stats.subcomponents) {
+    return 'Structure vide'
+  }
+
+  const segments: string[] = []
+  if (stats.customFields) segments.push(`${stats.customFields} champ(s)`)
+  if (stats.pieces) segments.push(`${stats.pieces} pièce(s)`)
+  if (stats.products) segments.push(`${stats.products} produit(s)`)
+  if (stats.subcomponents) segments.push(`${stats.subcomponents} sous-composant(s)`)
+  return segments.join(' • ')
+}
diff --git a/frontend/app/shared/model/componentStructureHydrate.ts b/frontend/app/shared/model/componentStructureHydrate.ts
new file mode 100644
index 0000000..6393ea6
--- /dev/null
+++ b/frontend/app/shared/model/componentStructureHydrate.ts
@@ -0,0 +1,212 @@
+import type {
+  ComponentModelCustomFieldType,
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructureNode,
+} from '../types/inventory'
+import { extractFieldValueObject, toStringArray } from './componentStructureSanitize'
+
+export const hydrateCustomFields = (fields: any[]): any[] => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+
+  return fields.map((field, index) => {
+    const valueObject = extractFieldValueObject(field)
+    const name = typeof field?.name === 'string'
+      ? field.name
+      : typeof field?.key === 'string'
+        ? field.key
+        : ''
+
+    const candidateType =
+      typeof field?.type === 'string' && field.type
+        ? field.type
+        : typeof valueObject?.type === 'string'
+          ? valueObject.type
+          : ''
+    const allowedTypes: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
+    const type = allowedTypes.includes(candidateType as ComponentModelCustomFieldType)
+      ? (candidateType as ComponentModelCustomFieldType)
+      : 'text'
+
+    const required =
+      typeof field?.required === 'boolean'
+        ? field.required
+        : typeof valueObject?.required === 'boolean'
+          ? valueObject.required
+          : false
+
+    const options =
+      toStringArray(field?.options) ||
+      toStringArray(valueObject?.options) ||
+      toStringArray((valueObject as any)?.choices) ||
+      []
+
+    const optionsText = typeof field?.optionsText === 'string'
+      ? field.optionsText
+      : options.length
+        ? options.join('\n')
+        : ''
+
+    const defaultCandidate =
+      field?.defaultValue ?? valueObject?.defaultValue ?? field?.value ?? field?.default ?? null
+    const resolvedDefault = (() => {
+      if (defaultCandidate === undefined || defaultCandidate === null) {
+        return undefined
+      }
+      if (typeof defaultCandidate === 'object') {
+        if (defaultCandidate === null) {
+          return undefined
+        }
+        if ('defaultValue' in (defaultCandidate as Record<string, any>)) {
+          return (defaultCandidate as Record<string, any>).defaultValue
+        }
+        if ('value' in (defaultCandidate as Record<string, any>)) {
+          return (defaultCandidate as Record<string, any>).value
+        }
+        return undefined
+      }
+      return defaultCandidate
+    })()
+    const defaultValue =
+      resolvedDefault !== undefined && resolvedDefault !== null && resolvedDefault !== ''
+        ? String(resolvedDefault)
+        : ''
+
+    const id = typeof field?.id === 'string' ? field.id : undefined
+    const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
+    const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+
+    return {
+      name,
+      type,
+      required,
+      options,
+      optionsText,
+      defaultValue,
+      id,
+      customFieldId,
+      orderIndex,
+    }
+  })
+}
+
+export const hydratePieces = (pieces: any[]): ComponentModelPiece[] => {
+  if (!Array.isArray(pieces)) {
+    return []
+  }
+
+  return pieces.map((piece) => ({
+    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
+    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
+    reference: piece?.reference ?? '',
+    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
+    role: piece?.role ?? '',
+    ...(piece?.quantity !== undefined && piece.quantity >= 1 ? { quantity: piece.quantity } : {}),
+  }))
+}
+
+export const hydrateProducts = (products: any[]): ComponentModelProduct[] => {
+  if (!Array.isArray(products)) {
+    return []
+  }
+
+  return products.map((product) => ({
+    typeProductId: product?.typeProductId ?? product?.typeProduct?.id ?? '',
+    typeProductLabel: product?.typeProductLabel ?? product?.typeProduct?.name ?? '',
+    reference: product?.reference ?? '',
+    familyCode: product?.familyCode ?? product?.typeProduct?.code ?? '',
+    role: product?.role ?? '',
+  }))
+}
+
+export const hydrateSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
+  if (!Array.isArray(components)) {
+    return []
+  }
+
+  return components.map((component) => ({
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
+    modelId: component?.modelId ?? '',
+    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
+    alias: component?.alias ?? component?.name ?? '',
+    subcomponents: hydrateSubcomponents(
+      Array.isArray(component?.subcomponents)
+        ? component.subcomponents
+        : component?.subComponents,
+    ),
+  }))
+}
+
+export const mapComponentCustomFields = (fields: any[]) => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+  return hydrateCustomFields(fields).map((field, index) => {
+    const defaultValue =
+      field?.defaultValue !== undefined && field?.defaultValue !== null && field?.defaultValue !== ''
+        ? field.defaultValue
+        : null
+    return {
+      name: typeof field?.name === 'string' ? field.name : '',
+      type: field?.type ?? 'text',
+      required: !!field?.required,
+      options: Array.isArray(field?.options) ? field.options : [],
+      optionsText: typeof field?.optionsText === 'string' ? field.optionsText : '',
+      defaultValue,
+      id: typeof (field as any)?.id === 'string' ? (field as any).id : undefined,
+      customFieldId:
+        typeof (field as any)?.customFieldId === 'string'
+          ? (field as any).customFieldId
+          : undefined,
+      orderIndex: typeof field?.orderIndex === 'number' ? field.orderIndex : index,
+    }
+  })
+}
+
+export const mapComponentPieces = (pieces: any[]): ComponentModelPiece[] => {
+  if (!Array.isArray(pieces)) {
+    return []
+  }
+  return pieces.map((piece) => ({
+    reference: piece?.reference ?? '',
+    typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
+    typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
+    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
+    role: piece?.role ?? '',
+    ...(piece?.quantity !== undefined && piece.quantity >= 1 ? { quantity: piece.quantity } : {}),
+  }))
+}
+
+export const mapComponentProducts = (products: any[]): ComponentModelProduct[] => {
+  if (!Array.isArray(products)) {
+    return []
+  }
+  return products.map((product) => ({
+    reference: product?.reference ?? '',
+    typeProductId: product?.typeProductId ?? product?.typeProduct?.id ?? '',
+    typeProductLabel: product?.typeProductLabel ?? product?.typeProduct?.name ?? '',
+    familyCode: product?.familyCode ?? product?.typeProduct?.code ?? '',
+    role: product?.role ?? '',
+  }))
+}
+
+export const mapSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
+  if (!Array.isArray(components)) {
+    return []
+  }
+  return components.map((component) => ({
+    typeComposantId: component?.typeComposantId ?? component?.typeComposant?.id ?? '',
+    typeComposantLabel: component?.typeComposantLabel ?? component?.typeComposant?.name ?? '',
+    modelId: component?.modelId ?? '',
+    familyCode: component?.familyCode ?? component?.typeComposant?.code ?? '',
+    alias: component?.alias ?? component?.name ?? '',
+    subcomponents: mapSubcomponents(
+      Array.isArray(component?.subcomponents)
+        ? component.subcomponents
+        : component?.subComponents,
+    ),
+  }))
+}
diff --git a/frontend/app/shared/model/componentStructureSanitize.ts b/frontend/app/shared/model/componentStructureSanitize.ts
new file mode 100644
index 0000000..440bdb7
--- /dev/null
+++ b/frontend/app/shared/model/componentStructureSanitize.ts
@@ -0,0 +1,317 @@
+import type {
+  ComponentModelCustomField,
+  ComponentModelCustomFieldType,
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructureNode,
+} from '../types/inventory'
+// Inline helper to avoid circular dependency with componentStructure.ts
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+export const toStringArray = (input: unknown): string[] | undefined => {
+  if (!Array.isArray(input)) {
+    return undefined
+  }
+  const parsed = input
+    .map((value) => {
+      if (typeof value === 'string') {
+        return value.trim()
+      }
+      if (value === null || value === undefined) {
+        return ''
+      }
+      return String(value).trim()
+    })
+    .filter((value) => value.length > 0)
+  return parsed.length ? parsed : undefined
+}
+
+export const extractFieldValueObject = (field: any): Record<string, any> => {
+  if (isPlainObject(field?.value)) {
+    return field.value as Record<string, any>
+  }
+  return {}
+}
+
+export const sanitizeCustomFields = (fields: any[]): ComponentModelCustomField[] => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+
+  return fields
+    .map((field, index) => {
+      const rawName =
+        typeof field?.name === 'string'
+          ? field.name
+          : typeof field?.key === 'string'
+            ? field.key
+            : ''
+      const name = rawName.trim()
+      if (!name) {
+        return null
+      }
+
+      const valueObject = extractFieldValueObject(field)
+
+      const candidateType =
+        typeof field?.type === 'string' && field.type
+          ? field.type
+          : typeof valueObject?.type === 'string'
+            ? valueObject.type
+            : ''
+      const allowedTypes: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
+      const type = allowedTypes.includes(candidateType as ComponentModelCustomFieldType)
+        ? (candidateType as ComponentModelCustomFieldType)
+        : 'text'
+
+      const required =
+        typeof valueObject?.required === 'boolean' ? valueObject.required : !!field?.required
+
+      let options: string[] | undefined
+      if (type === 'select') {
+        options =
+          toStringArray(valueObject?.options) ||
+          toStringArray((valueObject as any)?.choices) ||
+          toStringArray(field?.options)
+
+        if (!options && typeof field?.optionsText === 'string') {
+          const parsedFromText = field.optionsText
+            .split(/\r?\n/)
+            .map((option: string) => option.trim())
+            .filter((option: string) => option.length > 0)
+          options = parsedFromText.length ? parsedFromText : undefined
+        }
+      }
+
+      const result: ComponentModelCustomField = { name, type, required }
+      if (options) {
+        result.options = options
+      }
+      const defaultCandidate =
+        field?.defaultValue ?? valueObject?.defaultValue ?? field?.value ?? field?.default ?? null
+      const resolvedDefault = (() => {
+        if (defaultCandidate === undefined || defaultCandidate === null) {
+          return undefined
+        }
+        if (typeof defaultCandidate === 'object') {
+          if (defaultCandidate === null) {
+            return undefined
+          }
+          if ('defaultValue' in (defaultCandidate as Record<string, any>)) {
+            return (defaultCandidate as Record<string, any>).defaultValue
+          }
+          if ('value' in (defaultCandidate as Record<string, any>)) {
+            return (defaultCandidate as Record<string, any>).value
+          }
+          return undefined
+        }
+        return defaultCandidate
+      })()
+      if (resolvedDefault !== undefined && resolvedDefault !== null && resolvedDefault !== '') {
+        result.defaultValue = String(resolvedDefault)
+      }
+      const id = typeof field?.id === 'string' ? field.id : undefined
+      if (id) {
+        result.id = id
+      }
+      const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
+      if (customFieldId) {
+        result.customFieldId = customFieldId
+      }
+      const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+      result.orderIndex = orderIndex
+      return result
+    })
+    .filter((field): field is ComponentModelCustomField => !!field)
+}
+
+export const sanitizePieces = (pieces: any[]): ComponentModelPiece[] => {
+  if (!Array.isArray(pieces)) {
+    return []
+  }
+
+  return pieces
+    .map((piece) => {
+      const rawTypePieceId = typeof piece?.typePieceId === 'string'
+        ? piece.typePieceId.trim()
+        : typeof piece?.typePiece?.id === 'string'
+          ? piece.typePiece.id.trim()
+          : ''
+      const typePieceId = rawTypePieceId.length > 0 ? rawTypePieceId : undefined
+
+      const rawTypePieceLabel = typeof piece?.typePieceLabel === 'string'
+        ? piece.typePieceLabel.trim()
+        : typeof piece?.typePiece?.name === 'string'
+          ? piece.typePiece.name.trim()
+          : ''
+      const typePieceLabel = rawTypePieceLabel.length > 0 ? rawTypePieceLabel : undefined
+
+      const reference = typeof piece?.reference === 'string' && piece.reference.trim().length > 0
+        ? piece.reference.trim()
+        : undefined
+
+      const rawFamilyCode = typeof piece?.familyCode === 'string'
+        ? piece.familyCode.trim()
+        : typeof piece?.typePiece?.code === 'string'
+          ? piece.typePiece.code.trim()
+          : ''
+      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
+
+      const rawRole = typeof piece?.role === 'string' ? piece.role.trim() : ''
+      const role = rawRole.length > 0 ? rawRole : undefined
+
+      const quantity = typeof piece?.quantity === 'number' && piece.quantity >= 1 ? piece.quantity : undefined
+
+      if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
+        return null
+      }
+
+      const result: ComponentModelPiece = {}
+      if (role) {
+        result.role = role
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
+      if (reference !== undefined) {
+        result.reference = reference
+      }
+      if (typePieceId) {
+        result.typePieceId = typePieceId
+      }
+      if (typePieceLabel) {
+        result.typePieceLabel = typePieceLabel
+      }
+      if (quantity !== undefined) {
+        result.quantity = quantity
+      }
+      return result
+    })
+    .filter((piece): piece is ComponentModelPiece => !!piece)
+}
+
+export const sanitizeProducts = (products: any[]): ComponentModelProduct[] => {
+  if (!Array.isArray(products)) {
+    return []
+  }
+
+  return products
+    .map((product) => {
+      const rawTypeProductId = typeof product?.typeProductId === 'string'
+        ? product.typeProductId.trim()
+        : typeof product?.typeProduct?.id === 'string'
+          ? product.typeProduct.id.trim()
+          : ''
+      const typeProductId = rawTypeProductId.length > 0 ? rawTypeProductId : undefined
+
+      const rawTypeProductLabel = typeof product?.typeProductLabel === 'string'
+        ? product.typeProductLabel.trim()
+        : typeof product?.typeProduct?.name === 'string'
+          ? product.typeProduct.name.trim()
+          : ''
+      const typeProductLabel = rawTypeProductLabel.length > 0 ? rawTypeProductLabel : undefined
+
+      const reference = typeof product?.reference === 'string' && product.reference.trim().length > 0
+        ? product.reference.trim()
+        : undefined
+
+      const rawFamilyCode = typeof product?.familyCode === 'string'
+        ? product.familyCode.trim()
+        : typeof product?.typeProduct?.code === 'string'
+          ? product.typeProduct.code.trim()
+          : ''
+      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
+
+      const rawRole = typeof product?.role === 'string' ? product.role.trim() : ''
+      const role = rawRole.length > 0 ? rawRole : undefined
+
+      if (!typeProductId && !typeProductLabel && !reference && !familyCode) {
+        return null
+      }
+
+      const result: ComponentModelProduct = {}
+      if (role) {
+        result.role = role
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
+      if (reference !== undefined) {
+        result.reference = reference
+      }
+      if (typeProductId) {
+        result.typeProductId = typeProductId
+      }
+      if (typeProductLabel) {
+        result.typeProductLabel = typeProductLabel
+      }
+      return result
+    })
+    .filter((product): product is ComponentModelProduct => !!product)
+}
+
+export const sanitizeSubcomponents = (components: any[]): ComponentModelStructureNode[] => {
+  if (!Array.isArray(components)) {
+    return []
+  }
+
+  return components
+    .map((component) => {
+      const rawTypeComposantId = typeof component?.typeComposantId === 'string'
+        ? component.typeComposantId.trim()
+        : typeof component?.typeComposant?.id === 'string'
+          ? component.typeComposant.id.trim()
+          : ''
+      const typeComposantId = rawTypeComposantId.length > 0 ? rawTypeComposantId : undefined
+
+      const modelId = typeof component?.modelId === 'string' && component.modelId.trim().length > 0
+        ? component.modelId.trim()
+        : undefined
+
+      const familyCode = typeof component?.familyCode === 'string' && component.familyCode.trim().length > 0
+        ? component.familyCode.trim()
+        : undefined
+
+      const alias = typeof component?.alias === 'string' && component.alias.trim().length > 0
+        ? component.alias.trim()
+        : undefined
+
+      if (!typeComposantId && !modelId && !familyCode) {
+        return null
+      }
+
+      const result: ComponentModelStructureNode = {
+        subcomponents: sanitizeSubcomponents(
+          Array.isArray(component?.subcomponents)
+            ? component.subcomponents
+            : component?.subComponents,
+        ),
+      }
+
+      if (typeComposantId) {
+        result.typeComposantId = typeComposantId
+      }
+      const typeComposantLabel = typeof component?.typeComposantLabel === 'string'
+        ? component.typeComposantLabel.trim()
+        : typeof component?.typeComposant?.name === 'string'
+          ? component.typeComposant.name.trim()
+          : ''
+      if (typeComposantLabel) {
+        result.typeComposantLabel = typeComposantLabel
+      }
+      if (modelId) {
+        result.modelId = modelId
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
+      if (alias) {
+        result.alias = alias
+      }
+
+      return result
+    })
+    .filter((component): component is ComponentModelStructureNode => !!component)
+}
diff --git a/frontend/app/shared/model/definitionOverrides.ts b/frontend/app/shared/model/definitionOverrides.ts
new file mode 100644
index 0000000..5401bcd
--- /dev/null
+++ b/frontend/app/shared/model/definitionOverrides.ts
@@ -0,0 +1,49 @@
+import { uniqueConstructeurIds } from '../constructeurUtils'
+
+export interface DefinitionOverridePayload {
+  name?: string
+  reference?: string
+  constructeurIds?: string[]
+  prix?: string
+}
+
+export const sanitizeDefinitionOverrides = (definition: any): DefinitionOverridePayload | null => {
+  if (!definition || typeof definition !== 'object') {
+    return null
+  }
+
+  const payload: DefinitionOverridePayload = {}
+
+  if (typeof definition.name === 'string') {
+    const name = definition.name.trim()
+    if (name.length > 0) {
+      payload.name = name
+    }
+  }
+
+  if (typeof definition.reference === 'string') {
+    const reference = definition.reference.trim()
+    if (reference.length > 0) {
+      payload.reference = reference
+    }
+  }
+
+  const constructeurIds = uniqueConstructeurIds(
+    definition.constructeurIds,
+    definition.constructeurId,
+    definition.constructeur,
+    definition.constructeurs,
+  )
+  if (constructeurIds.length) {
+    payload.constructeurIds = constructeurIds
+  }
+
+  if (definition.prix !== undefined && definition.prix !== null && definition.prix !== '') {
+    const parsed = Number(definition.prix)
+    if (!Number.isNaN(parsed)) {
+      payload.prix = String(parsed)
+    }
+  }
+
+  return Object.keys(payload).length ? payload : null
+}
diff --git a/frontend/app/shared/model/pieceProductStructure.ts b/frontend/app/shared/model/pieceProductStructure.ts
new file mode 100644
index 0000000..24a1c7c
--- /dev/null
+++ b/frontend/app/shared/model/pieceProductStructure.ts
@@ -0,0 +1,192 @@
+import {
+  createEmptyPieceModelStructure,
+  createEmptyProductModelStructure,
+  type PieceModelCustomField,
+  type PieceModelProduct,
+  type PieceModelStructure,
+  type PieceModelStructureEditorField,
+  type PieceModelStructureForEditor,
+  type ProductModelStructure,
+} from '../types/inventory'
+import { isPlainObject, sanitizeProducts, hydrateProducts } from './componentStructure'
+
+export const defaultPieceStructure = (): PieceModelStructure => ({
+  ...createEmptyPieceModelStructure(),
+})
+
+export const defaultProductStructure = (): ProductModelStructure => ({
+  ...createEmptyProductModelStructure(),
+})
+
+const ensurePieceStructureShape = (input: any): PieceModelStructure => {
+  const base = createEmptyPieceModelStructure()
+  if (!isPlainObject(input)) {
+    return base
+  }
+
+  const clone: PieceModelStructure = {
+    ...base,
+    customFields: Array.isArray((input as any).customFields) ? (input as any).customFields : [],
+    products: Array.isArray((input as any).products) ? (input as any).products : [],
+  }
+
+  for (const [key, value] of Object.entries(input as Record<string, unknown>)) {
+    if (key === 'customFields' || key === 'products') {
+      continue
+    }
+    clone[key] = value
+  }
+
+  return clone
+}
+
+export const clonePieceStructure = (input: any): PieceModelStructure => {
+  try {
+    const cloned = JSON.parse(JSON.stringify(input ?? defaultPieceStructure()))
+    return ensurePieceStructureShape(cloned)
+  } catch (_error) {
+    return defaultPieceStructure()
+  }
+}
+
+export const cloneProductStructure = (input: any): ProductModelStructure => {
+  return clonePieceStructure(input)
+}
+
+const sanitizePieceCustomFields = (fields: any[]): PieceModelCustomField[] => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+
+  return fields
+    .map((field, index) => {
+      const name = typeof field?.name === 'string' ? field.name.trim() : ''
+      if (!name) {
+        return null
+      }
+
+      const type = typeof field?.type === 'string' && field.type ? field.type : 'text'
+      const required = !!field?.required
+
+      let options: string[] | undefined
+      if (type === 'select') {
+        const rawOptions = typeof field?.optionsText === 'string'
+          ? field.optionsText
+          : Array.isArray(field?.options)
+            ? field.options.join('\n')
+            : ''
+        const parsed = rawOptions
+          .split(/\r?\n/)
+          .map((option: string) => option.trim())
+          .filter((option: string) => option.length > 0)
+        options = parsed.length > 0 ? parsed : undefined
+      }
+
+      const result: PieceModelCustomField = { name, type, required }
+      if (options) {
+        result.options = options
+      }
+      const defaultValue =
+        field?.defaultValue !== undefined && field?.defaultValue !== null && field?.defaultValue !== ''
+          ? String(field.defaultValue)
+          : null
+      if (defaultValue !== null) {
+        result.defaultValue = defaultValue
+      }
+      if (typeof field?.id === 'string' && field.id) {
+        result.id = field.id
+      }
+      if (typeof field?.customFieldId === 'string' && field.customFieldId) {
+        result.customFieldId = field.customFieldId
+      }
+      const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+      result.orderIndex = orderIndex
+      return result
+    })
+    .filter((field): field is PieceModelCustomField => !!field)
+}
+
+const sanitizePieceProducts = (products: any[]): PieceModelProduct[] => {
+  return sanitizeProducts(products) as PieceModelProduct[]
+}
+
+export const normalizePieceStructureForSave = (input: any): PieceModelStructure => {
+  const source = clonePieceStructure(input)
+  const restEntries = Object.entries(source).filter(
+    ([key]) => key !== 'customFields' && key !== 'products',
+  )
+  return {
+    ...Object.fromEntries(restEntries),
+    products: sanitizePieceProducts(source.products || []),
+    customFields: sanitizePieceCustomFields(source.customFields),
+  }
+}
+
+const hydratePieceCustomFields = (fields: any[]): PieceModelStructureEditorField[] => {
+  if (!Array.isArray(fields)) {
+    return []
+  }
+
+  return fields.map((field, index) => ({
+    name: field?.name ?? '',
+    type: field?.type ?? 'text',
+    required: !!field?.required,
+    options: Array.isArray(field?.options) ? field.options : undefined,
+    optionsText: typeof field?.optionsText === 'string'
+      ? field.optionsText
+      : Array.isArray(field?.options)
+        ? field.options.join('\n')
+        : '',
+    orderIndex: typeof field?.orderIndex === 'number' ? field.orderIndex : index,
+    ...(field?.id ? { id: field.id } : {}),
+    ...(field?.customFieldId ? { customFieldId: field.customFieldId } : {}),
+  }))
+}
+
+export const hydratePieceStructureForEditor = (input: any): PieceModelStructureForEditor => {
+  const source = clonePieceStructure(input)
+  const payload: PieceModelStructureForEditor = {
+    ...Object.fromEntries(
+      Object.entries(source).filter(([key]) => key !== 'customFields' && key !== 'products'),
+    ),
+    products: hydrateProducts(source.products || []) as PieceModelProduct[],
+    customFields: hydratePieceCustomFields(source.customFields),
+  }
+  return payload
+}
+
+export const formatPieceStructurePreview = (structure: any) => {
+  if (!structure || typeof structure !== 'object') {
+    return 'Aucun champ personnalisé'
+  }
+
+  const customFields = Array.isArray((structure as any).customFields)
+    ? (structure as any).customFields.length
+    : 0
+  const products = Array.isArray((structure as any).products)
+    ? (structure as any).products.length
+    : 0
+
+  if (!customFields && !products) {
+    return 'Aucun produit ni champ personnalisé'
+  }
+
+  const segments: string[] = []
+  if (products) {
+    segments.push(`${products} produit(s)`)
+  }
+  if (customFields) {
+    segments.push(`${customFields} champ(s) personnalisé(s)`)
+  }
+
+  return segments.join(' · ')
+}
+
+export const normalizeProductStructureForSave = (input: any): ProductModelStructure =>
+  normalizePieceStructureForSave(input)
+
+export const hydrateProductStructureForEditor = (input: any) =>
+  hydratePieceStructureForEditor(input)
+
+export const formatProductStructurePreview = (structure: any) =>
+  formatPieceStructurePreview(structure)
diff --git a/frontend/app/shared/modelUtils.ts b/frontend/app/shared/modelUtils.ts
new file mode 100644
index 0000000..02cf7dd
--- /dev/null
+++ b/frontend/app/shared/modelUtils.ts
@@ -0,0 +1,36 @@
+export {
+  isPlainObject,
+  defaultStructure,
+  cloneStructure,
+  toStringArray,
+  extractFieldValueObject,
+  sanitizeCustomFields,
+  sanitizePieces,
+  sanitizeProducts,
+  hydrateProducts,
+  normalizeStructureForEditor,
+  normalizeStructureForSave,
+  hydrateStructureForEditor,
+  extractStructureFromComponent,
+  computeStructureStats,
+  formatStructurePreview,
+  type ModelStructurePreview,
+} from './model/componentStructure'
+
+export {
+  defaultPieceStructure,
+  defaultProductStructure,
+  clonePieceStructure,
+  cloneProductStructure,
+  normalizePieceStructureForSave,
+  hydratePieceStructureForEditor,
+  formatPieceStructurePreview,
+  normalizeProductStructureForSave,
+  hydrateProductStructureForEditor,
+  formatProductStructurePreview,
+} from './model/pieceProductStructure'
+
+export {
+  sanitizeDefinitionOverrides,
+  type DefinitionOverridePayload,
+} from './model/definitionOverrides'
diff --git a/frontend/app/shared/types/dataTable.ts b/frontend/app/shared/types/dataTable.ts
new file mode 100644
index 0000000..55b3cb0
--- /dev/null
+++ b/frontend/app/shared/types/dataTable.ts
@@ -0,0 +1,46 @@
+export type SortDirection = 'asc' | 'desc'
+
+export interface DataTableColumn {
+  /** Unique key — used as slot name prefix (`#cell-{key}`) and default data accessor (`row[key]`) */
+  key: string
+  /** Display label for the column header */
+  label: string
+  /** Whether clicking this column header triggers sorting. Default: false */
+  sortable?: boolean
+  /** Sort key sent to the API (may differ from `key`). Falls back to `key` if omitted. */
+  sortKey?: string
+  /** CSS class applied to both <th> and <td> */
+  class?: string
+  /** CSS class applied only to <th> */
+  headerClass?: string
+  /** Width hint (e.g. 'w-24', 'min-w-[10rem]') */
+  width?: string
+  /** Text alignment: 'left' (default), 'center', 'right' */
+  align?: 'left' | 'center' | 'right'
+  /** Hide on mobile (adds 'hidden sm:table-cell') */
+  hiddenMobile?: boolean
+  /** Whether this column has a filter input under the header */
+  filterable?: boolean
+  /** Placeholder for the filter input */
+  filterPlaceholder?: string
+}
+
+export type DataTableColumnFilters = Record<string, string>
+
+export interface DataTableSort {
+  field: string
+  direction: SortDirection
+}
+
+export interface DataTablePagination {
+  currentPage: number
+  totalPages: number
+  /** Total items matching current filters */
+  totalItems: number
+  /** Items displayed on current page */
+  pageItems: number
+  /** Available per-page options. If omitted, per-page selector is hidden. */
+  perPageOptions?: number[]
+  /** Currently selected items per page */
+  perPage?: number
+}
diff --git a/frontend/app/shared/types/inventory.ts b/frontend/app/shared/types/inventory.ts
new file mode 100644
index 0000000..1a531d6
--- /dev/null
+++ b/frontend/app/shared/types/inventory.ts
@@ -0,0 +1,303 @@
+export type ComponentModelCustomFieldType = 'text' | 'number' | 'select' | 'boolean' | 'date'
+
+export interface ComponentModelCustomField {
+  name: string
+  type: ComponentModelCustomFieldType
+  required: boolean
+  options?: string[]
+  defaultValue?: string | null
+  optionsText?: string
+  id?: string
+  customFieldId?: string
+  orderIndex?: number
+  key?: string
+  value?: unknown
+}
+
+export interface ComponentModelPiece {
+  typePieceId?: string
+  typePieceLabel?: string
+  typePiece?: { id?: string; name?: string; code?: string } | null
+  reference?: string
+  familyCode?: string
+  role?: string
+  quantity?: number
+}
+
+export interface ComponentModelProduct {
+  typeProductId?: string
+  typeProductLabel?: string
+  typeProduct?: { id?: string; name?: string; code?: string } | null
+  reference?: string
+  familyCode?: string
+  role?: string
+}
+
+export interface ComponentModelStructureNode {
+  typeComposantId?: string
+  typeComposantLabel?: string
+  typeComposant?: { id?: string; name?: string }
+  modelId?: string
+  familyCode?: string
+  alias?: string
+  products?: ComponentModelProduct[]
+  subcomponents: ComponentModelStructureNode[]
+}
+
+export interface ComponentModelStructure extends ComponentModelStructureNode {
+  customFields: ComponentModelCustomField[]
+  pieces: ComponentModelPiece[]
+  products: ComponentModelProduct[]
+}
+
+export type PieceModelCustomFieldType = ComponentModelCustomFieldType
+
+export interface PieceModelCustomField {
+  name: string
+  type: PieceModelCustomFieldType
+  required: boolean
+  options?: string[]
+  orderIndex?: number
+  key?: string
+  value?: unknown
+  defaultValue?: string | null
+  id?: string
+  customFieldId?: string
+}
+
+export interface PieceModelProduct {
+  typeProductId?: string
+  typeProductLabel?: string
+  reference?: string
+  familyCode?: string
+  role?: string
+}
+
+export interface PieceModelStructure {
+  customFields: PieceModelCustomField[]
+  products?: PieceModelProduct[]
+  [key: string]: unknown
+}
+
+export interface PieceModelStructureEditorField extends PieceModelCustomField {
+  optionsText: string
+}
+
+export interface PieceModelStructureForEditor {
+  customFields: PieceModelStructureEditorField[]
+  products?: PieceModelProduct[]
+  [key: string]: unknown
+}
+
+export type ProductModelCustomField = PieceModelCustomField
+export type ProductModelStructure = PieceModelStructure
+
+const FIELD_TYPES: ComponentModelCustomFieldType[] = ['text', 'number', 'select', 'boolean', 'date']
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+const isNonEmptyString = (value: unknown): value is string => typeof value === 'string' && value.trim().length > 0
+
+const ensureString = (value: unknown): string | undefined => {
+  if (!isNonEmptyString(value)) {
+    return undefined
+  }
+  return value.trim()
+}
+
+const validateCustomField = (
+  value: unknown,
+  issues: string[],
+  path: string,
+): ComponentModelCustomField | null => {
+  if (!isPlainObject(value)) {
+    issues.push(`${path}: expected object`)
+    return null
+  }
+
+  const name = ensureString(value.name)
+  if (!name) {
+    issues.push(`${path}.name: valeur manquante`)
+    return null
+  }
+
+  const type = isNonEmptyString(value.type) && FIELD_TYPES.includes(value.type as ComponentModelCustomFieldType)
+    ? (value.type as ComponentModelCustomFieldType)
+    : 'text'
+
+  const required = !!value.required
+
+  let options: string[] | undefined
+  if (value.options !== undefined) {
+    if (!Array.isArray(value.options)) {
+      issues.push(`${path}.options: attendu tableau`)
+    } else {
+      const parsed = value.options.map(ensureString).filter((option): option is string => !!option)
+      if (parsed.length) {
+        options = parsed
+      }
+    }
+  }
+
+  return { name, type, required, ...(options ? { options } : {}) }
+}
+
+const validatePiece = (
+  value: unknown,
+  issues: string[],
+  path: string,
+): ComponentModelPiece | null => {
+  if (!isPlainObject(value)) {
+    issues.push(`${path}: expected object`)
+    return null
+  }
+
+  const typePieceId = ensureString(value.typePieceId)
+  const typePieceLabel = ensureString(value.typePieceLabel)
+  const reference = ensureString(value.reference)
+  const familyCode = ensureString(value.familyCode)
+  const role = ensureString(value.role)
+  const quantity = typeof value.quantity === 'number' && value.quantity >= 1 ? value.quantity : undefined
+
+  if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
+    issues.push(`${path}: au moins un identifiant, une famille ou une référence de pièce est requis`)
+    return null
+  }
+
+  return {
+    ...(typePieceId ? { typePieceId } : {}),
+    ...(typePieceLabel ? { typePieceLabel } : {}),
+    ...(reference ? { reference } : {}),
+    ...(familyCode ? { familyCode } : {}),
+    ...(role ? { role } : {}),
+    ...(quantity ? { quantity } : {}),
+  }
+}
+
+const validateStructureNode = (
+  value: unknown,
+  issues: string[],
+  path: string,
+): ComponentModelStructureNode | null => {
+  if (!isPlainObject(value)) {
+    issues.push(`${path}: expected object`)
+    return null
+  }
+
+  const typeComposantId = ensureString(value.typeComposantId)
+  const typeComposantLabel = ensureString(value.typeComposantLabel)
+  const modelId = ensureString(value.modelId)
+  const familyCode = ensureString(value.familyCode)
+  const alias = ensureString(value.alias)
+
+  const rawSubcomponents = Array.isArray(value.subcomponents)
+    ? value.subcomponents
+    : []
+
+  const subcomponents: ComponentModelStructureNode[] = []
+  rawSubcomponents.forEach((subValue: unknown, index: number) => {
+    const parsed = validateStructureNode(subValue, issues, `${path}.subcomponents[${index}]`)
+    if (parsed) {
+      subcomponents.push(parsed)
+    }
+  })
+
+  return {
+    ...(typeComposantId ? { typeComposantId } : {}),
+    ...(typeComposantLabel ? { typeComposantLabel } : {}),
+    ...(modelId ? { modelId } : {}),
+    ...(familyCode ? { familyCode } : {}),
+    ...(alias ? { alias } : {}),
+    subcomponents,
+  }
+}
+
+export interface ComponentModelStructureValidationSuccess {
+  success: true
+  data: ComponentModelStructure
+}
+
+export interface ComponentModelStructureValidationFailure {
+  success: false
+  issues: string[]
+}
+
+export type ComponentModelStructureValidationResult =
+  | ComponentModelStructureValidationSuccess
+  | ComponentModelStructureValidationFailure
+
+export const componentModelStructureValidator = {
+  safeParse(value: unknown): ComponentModelStructureValidationResult {
+    const issues: string[] = []
+
+    if (!isPlainObject(value)) {
+      issues.push('Structure invalide: attendu un objet')
+      return { success: false, issues }
+    }
+
+    const customFieldsInput = Array.isArray(value.customFields) ? value.customFields : []
+    const piecesInput = Array.isArray(value.pieces) ? value.pieces : []
+
+    const customFields: ComponentModelCustomField[] = []
+    customFieldsInput.forEach((field, index) => {
+      const parsed = validateCustomField(field, issues, `customFields[${index}]`)
+      if (parsed) {
+        customFields.push(parsed)
+      }
+    })
+
+    const pieces: ComponentModelPiece[] = []
+    piecesInput.forEach((piece, index) => {
+      const parsed = validatePiece(piece, issues, `pieces[${index}]`)
+      if (parsed) {
+        pieces.push(parsed)
+      }
+    })
+
+    const node = validateStructureNode(value, issues, 'structure')
+
+    if (!node) {
+      issues.push('Structure racine invalide')
+      return { success: false, issues }
+    }
+
+    if (issues.length > 0) {
+      return { success: false, issues }
+    }
+
+    return {
+      success: true,
+      data: {
+        ...node,
+        customFields,
+        pieces,
+        products: ((node as unknown) as Record<string, unknown>).products as ComponentModelProduct[] ?? [],
+      },
+    }
+  },
+  parse(value: unknown): ComponentModelStructure {
+    const result = this.safeParse(value)
+    if (!result.success) {
+      throw new Error(result.issues.join('\n'))
+    }
+    return result.data
+  },
+}
+
+export const createEmptyComponentModelStructure = (): ComponentModelStructure => ({
+  customFields: [],
+  pieces: [],
+  products: [],
+  subcomponents: [],
+})
+
+export const createEmptyPieceModelStructure = (): PieceModelStructure => ({
+  customFields: [],
+  products: [],
+})
+
+export const createEmptyProductModelStructure = (): ProductModelStructure => ({
+  customFields: [],
+})
diff --git a/frontend/app/shared/utils/apiHelpers.ts b/frontend/app/shared/utils/apiHelpers.ts
new file mode 100644
index 0000000..54e9640
--- /dev/null
+++ b/frontend/app/shared/utils/apiHelpers.ts
@@ -0,0 +1,16 @@
+/**
+ * Shared API response helpers.
+ *
+ * Extracted from 10+ composables/components that each had an identical local
+ * copy of extractCollection (parsing hydra:member / member / data / array).
+ */
+
+export function extractCollection<T = any>(payload: unknown): T[] {
+  if (Array.isArray(payload)) return payload as T[]
+  const p = payload as Record<string, unknown> | null
+  if (Array.isArray(p?.member)) return p!.member as T[]
+  if (Array.isArray(p?.['hydra:member'])) return p!['hydra:member'] as T[]
+  if (Array.isArray(p?.items)) return p!.items as T[]
+  if (Array.isArray(p?.data)) return p!.data as T[]
+  return []
+}
diff --git a/frontend/app/shared/utils/assignmentUtils.ts b/frontend/app/shared/utils/assignmentUtils.ts
new file mode 100644
index 0000000..16f1a47
--- /dev/null
+++ b/frontend/app/shared/utils/assignmentUtils.ts
@@ -0,0 +1,220 @@
+/**
+ * Entity assignment normalization and display utilities.
+ *
+ * Extracted from pages/machines/new.vue – these pure functions resolve
+ * machine / component / piece assignments from nested API payloads.
+ */
+
+type AnyRecord = Record<string, unknown>
+
+// ---------------------------------------------------------------------------
+// Primitive helpers
+// ---------------------------------------------------------------------------
+
+const isPlainObject = (value: unknown): value is AnyRecord =>
+  value !== null && typeof value === 'object' && !Array.isArray(value)
+
+const toTrimmedString = (value: unknown): string | null => {
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed.length > 0 ? trimmed : null
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return String(value)
+  }
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Dedup
+// ---------------------------------------------------------------------------
+
+export const dedupeAssignments = (
+  assignments: AnyRecord[],
+): AnyRecord[] => {
+  const seen = new Set<string>()
+  return assignments.filter((assignment) => {
+    if (!assignment) return false
+    const id = assignment.id != null ? String(assignment.id) : ''
+    const name = assignment.name != null ? String(assignment.name) : ''
+    const key = `${id}::${name}`
+    if (!id && !name) return false
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Machine assignments
+// ---------------------------------------------------------------------------
+
+export const normalizeMachineAssignment = (input: unknown): AnyRecord | null => {
+  if (!input) return null
+  if (typeof input === 'string') {
+    const name = toTrimmedString(input)
+    return name ? { id: name, name } : null
+  }
+  if (typeof input === 'number' && Number.isFinite(input)) {
+    const value = String(input)
+    return { id: value, name: value }
+  }
+
+  const container = (input as AnyRecord).machine || (input as AnyRecord).machineData || input
+  if (!isPlainObject(container)) return null
+
+  const id =
+    container.id ?? (input as AnyRecord).machineId ?? (input as AnyRecord).id ?? null
+  const name =
+    container.name ||
+    (input as AnyRecord).machineName ||
+    container.label ||
+    container.title ||
+    (typeof id === 'string' ? id : null) ||
+    (typeof id === 'number' ? String(id) : null)
+
+  if (id == null && name == null) return null
+
+  return {
+    id: id != null ? id : null,
+    name: name != null ? name : null,
+  }
+}
+
+export const collectMachineAssignments = (source: unknown): AnyRecord[] => {
+  if (!isPlainObject(source)) return []
+
+  const candidates = [
+    source.machines,
+    source.machineLinks,
+    source.machineAssignments,
+    source.machinesAssignments,
+    source.linkedMachines,
+  ]
+
+  const assignments: AnyRecord[] = []
+
+  candidates.forEach((list) => {
+    if (Array.isArray(list)) {
+      list.forEach((item) => {
+        const normalized = normalizeMachineAssignment(item)
+        if (normalized) assignments.push(normalized)
+      })
+    }
+  })
+
+  if (!assignments.length) {
+    const direct = normalizeMachineAssignment(source.machine)
+    if (direct) assignments.push(direct)
+  }
+
+  if (!assignments.length) {
+    const idCandidate = source.machineId ?? source.machineID ?? null
+    const nameCandidate = source.machineName ?? null
+    const normalized = normalizeMachineAssignment(nameCandidate || idCandidate)
+    if (normalized) assignments.push(normalized)
+  }
+
+  return dedupeAssignments(assignments)
+}
+
+// ---------------------------------------------------------------------------
+// Component assignments
+// ---------------------------------------------------------------------------
+
+export const normalizeComponentAssignment = (input: unknown): AnyRecord | null => {
+  if (!input) return null
+  if (typeof input === 'string') {
+    const value = toTrimmedString(input)
+    return value ? { id: value, name: value } : null
+  }
+  if (typeof input === 'number' && Number.isFinite(input)) {
+    const value = String(input)
+    return { id: value, name: value }
+  }
+
+  const container =
+    (input as AnyRecord).component || (input as AnyRecord).composant || input
+  if (!isPlainObject(container)) return null
+
+  const id =
+    container.id ??
+    (input as AnyRecord).componentId ??
+    (input as AnyRecord).composantId ??
+    (input as AnyRecord).id ??
+    null
+  const name =
+    container.name ||
+    (input as AnyRecord).componentName ||
+    (input as AnyRecord).composantName ||
+    container.label ||
+    (typeof id === 'string' ? id : null) ||
+    (typeof id === 'number' ? String(id) : null)
+
+  if (id == null && name == null) return null
+
+  return {
+    id: id != null ? id : null,
+    name: name != null ? name : null,
+  }
+}
+
+export const collectComponentAssignments = (source: unknown): AnyRecord[] => {
+  if (!isPlainObject(source)) return []
+
+  const candidates = [
+    source.components,
+    source.composants,
+    source.componentLinks,
+    source.linkedComponents,
+  ]
+
+  const assignments: AnyRecord[] = []
+
+  candidates.forEach((list) => {
+    if (Array.isArray(list)) {
+      list.forEach((item) => {
+        const normalized = normalizeComponentAssignment(item)
+        if (normalized) assignments.push(normalized)
+      })
+    }
+  })
+
+  if (!assignments.length) {
+    const direct = normalizeComponentAssignment(source.component || source.composant)
+    if (direct) assignments.push(direct)
+  }
+
+  if (!assignments.length) {
+    const idCandidate = source.componentId ?? source.composantId ?? null
+    const normalized = normalizeComponentAssignment(idCandidate)
+    if (normalized) assignments.push(normalized)
+  }
+
+  return dedupeAssignments(assignments)
+}
+
+// ---------------------------------------------------------------------------
+// Convenience wrappers
+// ---------------------------------------------------------------------------
+
+export const getComponentMachineAssignments = (component: unknown): AnyRecord[] =>
+  collectMachineAssignments(component || {})
+
+export const getPieceMachineAssignments = (piece: unknown): AnyRecord[] =>
+  collectMachineAssignments(piece || {})
+
+export const getPieceComponentAssignments = (piece: unknown): AnyRecord[] =>
+  collectComponentAssignments(piece || {})
+
+// ---------------------------------------------------------------------------
+// Display
+// ---------------------------------------------------------------------------
+
+export const formatAssignmentList = (assignments: AnyRecord[]): string => {
+  if (!Array.isArray(assignments) || assignments.length === 0) return ''
+  return assignments
+    .map((assignment) => (assignment?.name || assignment?.id) as string)
+    .filter(Boolean)
+    .join(', ')
+}
diff --git a/frontend/app/shared/utils/catalogDisplayUtils.ts b/frontend/app/shared/utils/catalogDisplayUtils.ts
new file mode 100644
index 0000000..5f710a1
--- /dev/null
+++ b/frontend/app/shared/utils/catalogDisplayUtils.ts
@@ -0,0 +1,87 @@
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+
+/**
+ * Selects the best document for thumbnail preview from an entity's documents array.
+ * Default priority: PDF first, then images. Use `preferImages` to reverse.
+ */
+export const resolvePrimaryDocument = (entity: Record<string, any>, preferImages = false): any | null => {
+  const documents = Array.isArray(entity?.documents) ? entity.documents : []
+  if (!documents.length) return null
+  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
+  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
+  if (!withPath.length) return normalized[0] ?? null
+  const first = preferImages ? isImageDocument : isPdfDocument
+  const second = preferImages ? isPdfDocument : isImageDocument
+  const a = withPath.find((doc: any) => first(doc))
+  if (a) return a
+  const b = withPath.find((doc: any) => second(doc))
+  if (b) return b
+  return withPath[0]
+}
+
+/**
+ * Builds alt text for a document preview thumbnail.
+ */
+export const resolvePreviewAlt = (entity: Record<string, any>): string => {
+  const parts = [entity?.name, entity?.reference].filter(Boolean)
+  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
+}
+
+/**
+ * Supplier name resolution: extracts unique supplier names from entity relations.
+ */
+export const resolveSupplierNames = (entity: Record<string, any>, nestedKey?: string): string[] => {
+  const names: string[] = []
+  const seen = new Set<string>()
+
+  const pushName = (maybeName: unknown) => {
+    if (typeof maybeName !== 'string') return
+    const normalized = maybeName.trim().replace(/\s+/g, ' ')
+    if (!normalized.length) return
+    const key = normalized.toLowerCase()
+    if (seen.has(key)) return
+    seen.add(key)
+    names.push(normalized)
+  }
+
+  const collectConstructeurs = (value: unknown): void => {
+    if (!value) return
+    if (Array.isArray(value)) { value.forEach(collectConstructeurs); return }
+    if (typeof value === 'string') { pushName(value); return }
+    if (typeof value === 'object') {
+      const record = value as Record<string, any>
+      pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
+      if (record?.constructeur) collectConstructeurs(record.constructeur)
+      if (Array.isArray(record?.constructeurs)) collectConstructeurs(record.constructeurs)
+    }
+  }
+
+  const collectFromLabel = (value: unknown): void => {
+    if (typeof value !== 'string') return
+    value.split(/[,;\\/•·|]+/).map(part => part.trim()).filter(Boolean).forEach(pushName)
+  }
+
+  collectConstructeurs(entity?.constructeurs)
+  collectConstructeurs(entity?.constructeur)
+  collectFromLabel(entity?.constructeursLabel)
+  collectFromLabel(entity?.supplierLabel)
+  collectFromLabel(entity?.suppliers)
+
+  if (nestedKey && entity?.[nestedKey]) {
+    const nested = entity[nestedKey]
+    collectConstructeurs(nested?.constructeurs)
+    collectConstructeurs(nested?.constructeur)
+    collectFromLabel(nested?.constructeursLabel)
+    collectFromLabel(nested?.supplierLabel)
+  }
+
+  return names
+}
+
+const MAX_VISIBLE_SUPPLIERS = 3
+
+export const buildSuppliersDisplay = (suppliers: string[]) => {
+  const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
+  const overflow = Math.max(suppliers.length - visible.length, 0)
+  return { suppliers, visible, overflow, tooltip: suppliers.length ? suppliers.join(', ') : '' }
+}
diff --git a/frontend/app/shared/utils/customFieldFormUtils.ts b/frontend/app/shared/utils/customFieldFormUtils.ts
new file mode 100644
index 0000000..c9e2483
--- /dev/null
+++ b/frontend/app/shared/utils/customFieldFormUtils.ts
@@ -0,0 +1,404 @@
+/**
+ * Custom field form normalization, merge, and persistence utilities.
+ *
+ * Extracted from pages/component/create.vue, component/[id]/edit.vue,
+ * pieces/create.vue, pieces/[id]/edit.vue, product/[id]/edit.vue.
+ *
+ * Every create/edit page was shipping its own copy of these helpers –
+ * this module unifies them behind a single, entity-agnostic API.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CustomFieldInput {
+  id: string | null
+  name: string
+  type: string
+  required: boolean
+  options: string[]
+  value: string
+  customFieldId: string | null
+  customFieldValueId: string | null
+  orderIndex: number
+}
+
+export interface SaveCustomFieldDeps {
+  customFieldInputs: { value: CustomFieldInput[] }
+  upsertCustomFieldValue: (
+    definitionId: string | null,
+    entityType: string,
+    entityId: string,
+    value: string,
+    metadata?: Record<string, unknown>,
+  ) => Promise<{ success: boolean; data?: any }>
+  updateCustomFieldValue: (
+    id: string,
+    payload: { value: string },
+  ) => Promise<{ success: boolean }>
+  toast: { showError: (msg: string) => void }
+}
+
+// ---------------------------------------------------------------------------
+// Primitive helpers
+// ---------------------------------------------------------------------------
+
+export const toFieldString = (value: unknown): string => {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  return ''
+}
+
+export const fieldKey = (field: CustomFieldInput, index: number): string =>
+  field.customFieldValueId || field.id || `${field.name}-${index}`
+
+// ---------------------------------------------------------------------------
+// Field resolution helpers
+// ---------------------------------------------------------------------------
+
+export const resolveFieldName = (field: any): string => {
+  if (typeof field?.name === 'string' && field.name.trim()) return field.name.trim()
+  if (typeof field?.key === 'string' && field.key.trim()) return field.key.trim()
+  if (typeof field?.label === 'string' && field.label.trim()) return field.label.trim()
+  return ''
+}
+
+export const resolveFieldType = (field: any): string => {
+  const allowed = ['text', 'number', 'select', 'boolean', 'date']
+  const rawType =
+    typeof field?.type === 'string'
+      ? field.type
+      : typeof field?.value?.type === 'string'
+        ? field.value.type
+        : ''
+  const value = rawType.toLowerCase()
+  return allowed.includes(value) ? value : 'text'
+}
+
+export const resolveRequiredFlag = (field: any): boolean => {
+  if (typeof field?.required === 'boolean') return field.required
+  const nested = field?.value?.required
+  if (typeof nested === 'boolean') return nested
+  if (typeof nested === 'string') {
+    const normalized = nested.toLowerCase()
+    return normalized === 'true' || normalized === '1'
+  }
+  return false
+}
+
+export const resolveOptions = (field: any): string[] => {
+  const sources = [field?.options, field?.value?.options, field?.value?.choices]
+  for (const source of sources) {
+    if (Array.isArray(source)) {
+      const mapped = source
+        .map((option: unknown) => {
+          if (option === null || option === undefined) return ''
+          if (typeof option === 'string') return option.trim()
+          if (typeof option === 'object') {
+            const record = (option || {}) as Record<string, unknown>
+            for (const key of ['value', 'label', 'name']) {
+              const candidate = record[key]
+              if (typeof candidate === 'string' && candidate.trim().length > 0) return candidate.trim()
+            }
+          }
+          const fallback = String(option).trim()
+          return fallback === '[object Object]' ? '' : fallback
+        })
+        .filter((o) => o.length > 0)
+      if (mapped.length) return mapped
+    }
+  }
+  return []
+}
+
+export const resolveDefaultValue = (field: any): any => {
+  if (!field || typeof field !== 'object') return null
+  if (field.defaultValue !== undefined && field.defaultValue !== null) return field.defaultValue
+  if (field.value !== undefined && field.value !== null && typeof field.value !== 'object') return field.value
+  if (field.default !== undefined && field.default !== null) return field.default
+  if (field.value && typeof field.value === 'object') {
+    if (field.value.defaultValue !== undefined && field.value.defaultValue !== null) return field.value.defaultValue
+    if (field.value.value !== undefined && field.value.value !== null && typeof field.value.value !== 'object') return field.value.value
+  }
+  return null
+}
+
+export const formatDefaultValue = (type: string, defaultValue: any): string => {
+  if (defaultValue === null || defaultValue === undefined) return ''
+  if (typeof defaultValue === 'object') {
+    if (defaultValue === null) return ''
+    if ('defaultValue' in (defaultValue as Record<string, any>)) {
+      return formatDefaultValue(type, (defaultValue as Record<string, any>).defaultValue)
+    }
+    if ('value' in (defaultValue as Record<string, any>)) {
+      return formatDefaultValue(type, (defaultValue as Record<string, any>).value)
+    }
+    return ''
+  }
+  if (type === 'boolean') {
+    const normalized = String(defaultValue).toLowerCase()
+    if (normalized === 'true' || normalized === '1') return 'true'
+    if (normalized === 'false' || normalized === '0') return 'false'
+    return ''
+  }
+  return String(defaultValue)
+}
+
+// ---------------------------------------------------------------------------
+// Normalize a single raw custom-field definition into CustomFieldInput
+// ---------------------------------------------------------------------------
+
+export const normalizeCustomField = (rawField: any, fallbackIndex = 0): CustomFieldInput | null => {
+  if (!rawField || typeof rawField !== 'object') return null
+  const name = resolveFieldName(rawField)
+  if (!name) return null
+  const type = resolveFieldType(rawField)
+  const required = resolveRequiredFlag(rawField)
+  const options = resolveOptions(rawField)
+  const defaultSource = resolveDefaultValue(rawField)
+  const value = formatDefaultValue(type, defaultSource)
+  const id = typeof rawField.id === 'string' ? rawField.id : null
+  const customFieldId = typeof rawField.customFieldId === 'string' ? rawField.customFieldId : id
+  const customFieldValueId = typeof rawField.customFieldValueId === 'string' ? rawField.customFieldValueId : null
+  const orderIndex = typeof rawField.orderIndex === 'number' ? rawField.orderIndex : fallbackIndex
+  return { id, name, type, required, options, value, customFieldId, customFieldValueId, orderIndex }
+}
+
+// ---------------------------------------------------------------------------
+// Normalize ALL custom-field definitions from a structure
+// ---------------------------------------------------------------------------
+
+export const normalizeCustomFieldInputs = (structure: any): CustomFieldInput[] => {
+  if (!structure || typeof structure !== 'object') return []
+  const fields = Array.isArray(structure.customFields) ? structure.customFields : []
+  return fields
+    .map((field: any, index: number) => normalizeCustomField(field, index))
+    .filter((field: CustomFieldInput | null): field is CustomFieldInput => field !== null)
+    .sort((a: CustomFieldInput, b: CustomFieldInput) => a.orderIndex - b.orderIndex)
+}
+
+// ---------------------------------------------------------------------------
+// Extract stored value from a persisted custom-field entry
+// ---------------------------------------------------------------------------
+
+export const extractStoredCustomFieldValue = (entry: any): any => {
+  if (entry === null || entry === undefined) return ''
+  if (typeof entry === 'string' || typeof entry === 'number' || typeof entry === 'boolean') return entry
+  if (typeof entry !== 'object') return String(entry)
+
+  const direct = entry.value
+  if (direct !== undefined && direct !== null) {
+    if (typeof direct === 'object') {
+      if (direct === null) return ''
+      if ('value' in direct && direct.value !== undefined && direct.value !== null) return direct.value
+      if ('defaultValue' in direct && direct.defaultValue !== undefined && direct.defaultValue !== null) return direct.defaultValue
+      return ''
+    }
+    return direct
+  }
+  if (entry.defaultValue !== undefined && entry.defaultValue !== null) return entry.defaultValue
+  if (entry.customFieldValue?.value !== undefined && entry.customFieldValue?.value !== null) return entry.customFieldValue.value
+  return ''
+}
+
+// ---------------------------------------------------------------------------
+// Build inputs for edit pages (merge definitions + stored values)
+// ---------------------------------------------------------------------------
+
+export const buildCustomFieldInputs = (
+  structure: any,
+  values: any[] | null | undefined,
+): CustomFieldInput[] => {
+  const definitions = normalizeCustomFieldInputs(structure)
+  const valueList = Array.isArray(values) ? values : []
+
+  const mapById = new Map<string, any>()
+  const mapByName = new Map<string, any>()
+
+  valueList.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') return
+    const fieldId = entry.customField?.id || entry.customFieldId || null
+    if (fieldId) mapById.set(fieldId, entry)
+    const fieldName = entry.customField?.name || entry.name || entry.key || null
+    if (fieldName) mapByName.set(fieldName, entry)
+  })
+
+  const matchedIds = new Set<string>()
+  const matchedNames = new Set<string>()
+
+  const result = definitions
+    .map((definition) => {
+      const definitionId = definition.customFieldId || definition.id || null
+      const matched = (definitionId ? mapById.get(definitionId) : null) || mapByName.get(definition.name)
+
+      if (!matched) {
+        return {
+          ...definition,
+          customFieldId: definition.customFieldId || definition.id,
+          customFieldValueId: null,
+          orderIndex: definition.orderIndex,
+        }
+      }
+
+      const matchedFieldId = matched.customField?.id || matched.customFieldId || null
+      if (matchedFieldId) matchedIds.add(matchedFieldId)
+      const matchedFieldName = matched.customField?.name || matched.name || null
+      if (matchedFieldName) matchedNames.add(matchedFieldName)
+
+      const resolvedValue = extractStoredCustomFieldValue(matched)
+      return {
+        ...definition,
+        customFieldId: matched.customField?.id || definition.customFieldId || definition.id,
+        customFieldValueId: matched.id ?? null,
+        value: formatDefaultValue(definition.type, resolvedValue),
+        orderIndex: Math.min(
+          definition.orderIndex ?? 0,
+          typeof matched.customField?.orderIndex === 'number'
+            ? matched.customField.orderIndex
+            : definition.orderIndex ?? 0,
+        ),
+      }
+    })
+
+  // Include values with embedded definitions that didn't match any structure definition
+  valueList.forEach((entry, index) => {
+    if (!entry || typeof entry !== 'object') return
+    const cf = entry.customField
+    if (!cf || typeof cf !== 'object') return
+    const fieldId = cf.id || entry.customFieldId || null
+    const fieldName = cf.name || entry.name || null
+    if (fieldId && matchedIds.has(fieldId)) return
+    if (fieldName && matchedNames.has(fieldName)) return
+
+    const name = resolveFieldName(cf)
+    if (!name) return
+
+    const type = resolveFieldType(cf)
+    const resolvedValue = extractStoredCustomFieldValue(entry)
+    result.push({
+      id: fieldId,
+      name,
+      type,
+      required: resolveRequiredFlag(cf),
+      options: resolveOptions(cf),
+      value: formatDefaultValue(type, resolvedValue),
+      customFieldId: fieldId,
+      customFieldValueId: entry.id ?? null,
+      orderIndex: typeof cf.orderIndex === 'number' ? cf.orderIndex : definitions.length + index,
+    })
+  })
+
+  return result.sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+}
+
+// ---------------------------------------------------------------------------
+// Validation helpers
+// ---------------------------------------------------------------------------
+
+export const buildCustomFieldMetadata = (field: CustomFieldInput): Record<string, unknown> => ({
+  customFieldName: field.name,
+  customFieldType: field.type,
+  customFieldRequired: field.required,
+  customFieldOptions: field.options,
+})
+
+export const shouldPersistField = (field: CustomFieldInput): boolean => {
+  if (field.type === 'boolean') return field.value === 'true' || field.value === 'false'
+  return toFieldString(field.value).trim() !== ''
+}
+
+export const formatValueForPersistence = (field: CustomFieldInput): string => {
+  if (field.type === 'boolean') return field.value === 'true' ? 'true' : 'false'
+  return toFieldString(field.value).trim()
+}
+
+export const requiredCustomFieldsFilled = (inputs: CustomFieldInput[]): boolean =>
+  inputs.every((field) => {
+    if (!field.required) return true
+    if (field.type === 'boolean') return field.value === 'true' || field.value === 'false'
+    return toFieldString(field.value).trim() !== ''
+  })
+
+// ---------------------------------------------------------------------------
+// Persistence
+// ---------------------------------------------------------------------------
+
+/**
+ * Save custom-field values for an entity.
+ *
+ * @param entityType  - API entity slug ('composant' | 'piece' | 'product')
+ * @param entityId    - ID of the created/updated entity
+ * @param definitionSources - arrays of raw definition objects to build a name→id map
+ * @param deps        - injected composable references
+ * @returns list of field names that failed to save (empty = all OK)
+ */
+export const saveCustomFieldValues = async (
+  entityType: string,
+  entityId: string,
+  definitionSources: any[][],
+  deps: SaveCustomFieldDeps,
+): Promise<string[]> => {
+  if (!entityId) return []
+
+  const definitionMap = new Map<string, string>()
+  const registerDefinitions = (fields: any[]) => {
+    if (!Array.isArray(fields)) return
+    fields.forEach((field) => {
+      if (!field || typeof field !== 'object') return
+      const name = typeof field.name === 'string' ? field.name : null
+      const id = typeof field.id === 'string' ? field.id : null
+      if (name && id && !definitionMap.has(name)) definitionMap.set(name, id)
+    })
+  }
+
+  definitionSources.forEach(registerDefinitions)
+
+  const resolveDefinitionId = (field: CustomFieldInput) => {
+    if (field.customFieldId) return field.customFieldId
+    if (field.id) return field.id
+    return definitionMap.get(field.name) ?? null
+  }
+
+  const failed: string[] = []
+
+  for (const field of deps.customFieldInputs.value) {
+    if (!shouldPersistField(field)) continue
+
+    const definitionId = resolveDefinitionId(field)
+    const metadata = definitionId ? undefined : buildCustomFieldMetadata(field)
+    const value = formatValueForPersistence(field)
+
+    if (field.customFieldValueId) {
+      const result = await deps.updateCustomFieldValue(field.customFieldValueId, { value })
+      if (!result.success) {
+        deps.toast.showError(`Impossible de mettre à jour le champ personnalisé "${field.name}"`)
+        failed.push(field.name)
+      } else if (definitionId && !field.customFieldId) {
+        field.customFieldId = definitionId
+      }
+      continue
+    }
+
+    const result = await deps.upsertCustomFieldValue(
+      definitionId,
+      entityType,
+      entityId,
+      value,
+      metadata,
+    )
+
+    if (!result.success) {
+      deps.toast.showError(`Impossible d'enregistrer le champ personnalisé "${field.name}"`)
+      failed.push(field.name)
+    } else {
+      const createdValue = result.data
+      if (createdValue?.id) field.customFieldValueId = createdValue.id
+      const resolvedId = createdValue?.customField?.id || definitionId
+      if (resolvedId) field.customFieldId = resolvedId
+    }
+  }
+
+  return failed
+}
diff --git a/frontend/app/shared/utils/customFieldUtils.ts b/frontend/app/shared/utils/customFieldUtils.ts
new file mode 100644
index 0000000..28eaf4c
--- /dev/null
+++ b/frontend/app/shared/utils/customFieldUtils.ts
@@ -0,0 +1,440 @@
+/**
+ * Custom field normalization, merging and display utilities.
+ *
+ * Extracted from pages/machine/[id].vue to be reusable across
+ * machine detail, component, piece and product views.
+ */
+
+// ---------------------------------------------------------------------------
+// Primitive helpers
+// ---------------------------------------------------------------------------
+
+export const coerceValueForType = (type: string, rawValue: unknown): string => {
+  if (rawValue === undefined || rawValue === null || rawValue === '') {
+    return ''
+  }
+  if (type === 'boolean') {
+    const normalized = String(rawValue).toLowerCase()
+    if (normalized === 'true' || normalized === '1') return 'true'
+    if (normalized === 'false' || normalized === '0') return 'false'
+    return ''
+  }
+  return String(rawValue)
+}
+
+export const formatCustomFieldValue = (field: Record<string, unknown> | null | undefined): string => {
+  if (!field) return 'Non défini'
+
+  const value = (field.value ?? field.defaultValue ?? '') as string
+  if (value === '' || value === null || value === undefined) return 'Non défini'
+
+  if (field.type === 'boolean') {
+    const normalized = String(value).toLowerCase()
+    if (normalized === 'true' || normalized === '1') return 'Oui'
+    if (normalized === 'false' || normalized === '0') return 'Non'
+  }
+
+  return String(value)
+}
+
+export const shouldDisplayCustomField = (field: Record<string, unknown> | null | undefined): boolean => {
+  if (!field) return false
+  if (field.readOnly) return true
+  if (field.type === 'boolean') return field.value !== undefined && field.value !== null
+
+  const value = field.value
+  if (value === null || value === undefined) return false
+  if (typeof value === 'string') return value.trim().length > 0
+  return true
+}
+
+// ---------------------------------------------------------------------------
+// Definition extraction helpers
+// ---------------------------------------------------------------------------
+
+export const extractDefinitionName = (definition: Record<string, unknown> = {}): string => {
+  if (typeof definition?.name === 'string' && (definition.name as string).trim()) {
+    return (definition.name as string).trim()
+  }
+  if (typeof definition?.key === 'string' && (definition.key as string).trim()) {
+    return (definition.key as string).trim()
+  }
+  if (typeof definition?.label === 'string' && (definition.label as string).trim()) {
+    return (definition.label as string).trim()
+  }
+  return ''
+}
+
+export const extractDefinitionType = (
+  definition: Record<string, unknown> = {},
+  fallback = 'text',
+): string => {
+  const allowed = ['text', 'number', 'select', 'boolean', 'date']
+  const rawType =
+    typeof definition?.type === 'string'
+      ? definition.type
+      : typeof (definition?.value as Record<string, unknown>)?.type === 'string'
+        ? (definition.value as Record<string, unknown>).type as string
+        : typeof fallback === 'string'
+          ? fallback
+          : 'text'
+  const normalized = (rawType as string).toLowerCase()
+  return allowed.includes(normalized) ? normalized : 'text'
+}
+
+export const extractDefinitionRequired = (
+  definition: Record<string, unknown> = {},
+  fallback = false,
+): boolean => {
+  if (typeof definition?.required === 'boolean') return definition.required
+  const nested = (definition?.value as Record<string, unknown>)?.required
+  if (typeof nested === 'boolean') return nested
+  if (typeof nested === 'string') {
+    const normalized = nested.toLowerCase()
+    if (normalized === 'true' || normalized === '1') return true
+    if (normalized === 'false' || normalized === '0') return false
+  }
+  return !!fallback
+}
+
+const extractOptionList = (input: unknown): string[] | undefined => {
+  if (!Array.isArray(input)) return undefined
+  const mapped = input
+    .map((option) => {
+      if (option === null || option === undefined) return ''
+      if (typeof option === 'string') return option.trim()
+      if (typeof option === 'object') {
+        const record = (option || {}) as Record<string, unknown>
+        for (const key of ['value', 'label', 'name']) {
+          const candidate = record[key]
+          if (typeof candidate === 'string' && candidate.trim().length > 0) return candidate.trim()
+        }
+      }
+      const fallback = String(option).trim()
+      return fallback === '[object Object]' ? '' : fallback
+    })
+    .filter((option) => option.length > 0)
+  return mapped.length ? mapped : undefined
+}
+
+export const extractDefinitionOptions = (definition: Record<string, unknown> = {}): string[] => {
+  const sources = [
+    definition?.options,
+    (definition?.value as Record<string, unknown>)?.options,
+    (definition?.value as Record<string, unknown>)?.choices,
+  ]
+  for (const source of sources) {
+    const list = extractOptionList(source)
+    if (list) return list
+  }
+  return []
+}
+
+export const extractDefinitionDefaultValue = (definition: Record<string, unknown> = {}): unknown => {
+  const candidates = [
+    definition?.defaultValue,
+    (definition?.value as Record<string, unknown>)?.defaultValue,
+    (definition?.value as Record<string, unknown>)?.value,
+    definition?.value,
+    definition?.default,
+  ]
+  for (const candidate of candidates) {
+    if (candidate === undefined || candidate === null || candidate === '') continue
+    if (typeof candidate === 'object') {
+      if (candidate === null) continue
+      const nestedDefault =
+        (candidate as Record<string, unknown>).defaultValue !== undefined &&
+        (candidate as Record<string, unknown>).defaultValue !== null
+          ? (candidate as Record<string, unknown>).defaultValue
+          : (candidate as Record<string, unknown>).value
+      if (nestedDefault !== undefined && nestedDefault !== null && nestedDefault !== '') {
+        return nestedDefault
+      }
+      continue
+    }
+    return candidate
+  }
+  return undefined
+}
+
+// ---------------------------------------------------------------------------
+// Normalization
+// ---------------------------------------------------------------------------
+
+export interface NormalizedCustomFieldDefinition {
+  id?: string
+  customFieldId?: string
+  name: string
+  type: string
+  required: boolean
+  options: string[]
+  defaultValue?: unknown
+  readOnly: boolean
+  orderIndex: number
+}
+
+export interface NormalizedCustomFieldEntry {
+  customFieldValueId: unknown
+  id: string | undefined
+  customFieldId: string | null
+  name: string
+  type: string
+  required: boolean
+  options: string[]
+  optionsText: string
+  defaultValue: unknown
+  value: string
+  readOnly: boolean
+}
+
+export const normalizeCustomFieldDefinitionEntry = (
+  definition: Record<string, unknown> = {},
+  fallbackIndex = 0,
+): NormalizedCustomFieldDefinition | null => {
+  const name = extractDefinitionName(definition)
+  if (!name) return null
+  const type = extractDefinitionType(definition)
+  const required = extractDefinitionRequired(definition)
+  const options = extractDefinitionOptions(definition)
+  const defaultValue = extractDefinitionDefaultValue(definition)
+  const id = typeof definition?.id === 'string' ? definition.id : undefined
+  const customFieldId = typeof definition?.customFieldId === 'string' ? definition.customFieldId : id
+  const orderIndex = typeof definition?.orderIndex === 'number' ? definition.orderIndex : fallbackIndex
+  return { id, customFieldId, name, type, required, options, defaultValue, readOnly: !!definition?.readOnly, orderIndex }
+}
+
+export const normalizeExistingCustomFieldDefinitions = (
+  fields: unknown,
+): NormalizedCustomFieldDefinition[] => {
+  if (!Array.isArray(fields)) return []
+  return fields
+    .map((field, index) => normalizeCustomFieldDefinitionEntry(field as Record<string, unknown>, index))
+    .filter((d): d is NormalizedCustomFieldDefinition => d !== null)
+    .sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0))
+}
+
+// ---------------------------------------------------------------------------
+// Custom field value normalization
+// ---------------------------------------------------------------------------
+
+export const normalizeCustomFieldValueEntry = (entry: Record<string, unknown> = {}): Record<string, unknown> | null => {
+  if (!entry || typeof entry !== 'object') return null
+  const normalizedDefinition = normalizeCustomFieldDefinitionEntry(entry)
+  if (!normalizedDefinition) return null
+
+  const value = coerceValueForType(
+    normalizedDefinition.type,
+    (entry?.value ?? entry?.defaultValue ?? normalizedDefinition.defaultValue ?? '') as string,
+  )
+
+  return {
+    id: (entry?.customFieldValueId ?? entry?.id ?? null) as string | null,
+    customFieldId:
+      (entry?.customFieldId ?? normalizedDefinition.customFieldId ?? normalizedDefinition.id ?? null) as string | null,
+    customField: {
+      id: normalizedDefinition.id ?? normalizedDefinition.customFieldId ?? null,
+      name: normalizedDefinition.name,
+      type: normalizedDefinition.type,
+      required: normalizedDefinition.required,
+      options: normalizedDefinition.options,
+      defaultValue: normalizedDefinition.defaultValue ?? '',
+    },
+    value,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Merge & dedup
+// ---------------------------------------------------------------------------
+
+export const mergeCustomFieldValuesWithDefinitions = (
+  valueEntries: Record<string, unknown>[] = [],
+  ...definitionSources: unknown[][]
+): Record<string, unknown>[] => {
+  const normalizedValues: Record<string, unknown>[] = (Array.isArray(valueEntries) ? valueEntries : [])
+    .map((entry): Record<string, unknown> | null => {
+      if (!entry || typeof entry !== 'object') return null
+      const normalizedDefinition = normalizeCustomFieldDefinitionEntry(
+        ((entry as Record<string, unknown>).customField || entry) as Record<string, unknown>,
+      )
+      if (!normalizedDefinition) return null
+
+      const value = coerceValueForType(
+        normalizedDefinition.type,
+        ((entry as Record<string, unknown>)?.value ??
+          (entry as Record<string, unknown>)?.defaultValue ??
+          normalizedDefinition.defaultValue ??
+          '') as string,
+      )
+
+      return {
+        customFieldValueId: (entry as Record<string, unknown>)?.id ?? (entry as Record<string, unknown>)?.customFieldValueId ?? null,
+        id: normalizedDefinition.id,
+        customFieldId: normalizedDefinition.customFieldId ?? normalizedDefinition.id ?? null,
+        name: normalizedDefinition.name,
+        type: normalizedDefinition.type,
+        required: normalizedDefinition.required,
+        options: normalizedDefinition.options,
+        optionsText: normalizedDefinition.options?.length ? normalizedDefinition.options.join('\n') : '',
+        defaultValue: normalizedDefinition.defaultValue ?? '',
+        value,
+        readOnly: !!(entry as Record<string, unknown>)?.readOnly,
+      } as Record<string, unknown>
+    })
+    .filter((entry): entry is Record<string, unknown> => entry !== null)
+
+  const result = [...normalizedValues]
+  const keyFor = (item: Record<string, unknown>) => (item?.id as string) ?? `${item?.name ?? ''}::${item?.type ?? ''}`
+  const existingMap = new Map<string, Record<string, unknown>>()
+
+  result.forEach((item) => {
+    const key = keyFor(item)
+    if (key) existingMap.set(key, item)
+    const fallbackKey = item?.name ? `${item.name}::${item.type ?? ''}` : null
+    if (fallbackKey) existingMap.set(fallbackKey, item)
+  })
+
+  const definitions = definitionSources
+    .flatMap((source) => (Array.isArray(source) ? source : []))
+    .map((definition) => normalizeCustomFieldDefinitionEntry(definition as Record<string, unknown>))
+    .filter((d): d is NormalizedCustomFieldDefinition => d !== null)
+
+  definitions.forEach((normalizedDefinition) => {
+    const key = normalizedDefinition.id ?? `${normalizedDefinition.name}::${normalizedDefinition.type}`
+    if (!key) return
+
+    if (normalizedDefinition.id) {
+      const fallbackKey = `${normalizedDefinition.name}::${normalizedDefinition.type}`
+      if (existingMap.has(fallbackKey)) {
+        const existingFallback = existingMap.get(fallbackKey)
+        if (existingFallback) {
+          existingFallback.id = existingFallback.id || normalizedDefinition.id
+          existingFallback.customFieldId = normalizedDefinition.id
+          existingFallback.readOnly = (existingFallback.readOnly as boolean) && normalizedDefinition.readOnly
+          existingMap.delete(fallbackKey)
+          existingMap.set(normalizedDefinition.id, existingFallback)
+          existingMap.set(fallbackKey, existingFallback)
+          return
+        }
+      }
+    }
+
+    const existing =
+      existingMap.get(key) ||
+      (normalizedDefinition.name ? existingMap.get(`${normalizedDefinition.name}::${normalizedDefinition.type}`) : null)
+
+    if (existing) {
+      existing.name = existing.name || normalizedDefinition.name
+      existing.type = existing.type || normalizedDefinition.type
+      existing.required = (existing.required as boolean) || normalizedDefinition.required
+      if (!(existing.options as string[])?.length && normalizedDefinition.options?.length) {
+        existing.options = normalizedDefinition.options
+      }
+      if (!existing.defaultValue && normalizedDefinition.defaultValue) {
+        existing.defaultValue = String(normalizedDefinition.defaultValue)
+        if (!existing.value) {
+          existing.value = coerceValueForType(existing.type as string, normalizedDefinition.defaultValue)
+        }
+      }
+      existing.customFieldId = existing.customFieldId || normalizedDefinition.id
+      existing.readOnly = (existing.readOnly as boolean) && normalizedDefinition.readOnly
+      if (!existing.optionsText && normalizedDefinition.options?.length) {
+        existing.optionsText = normalizedDefinition.options.join('\n')
+      }
+      if (normalizedDefinition.id) existingMap.set(normalizedDefinition.id, existing)
+      if (normalizedDefinition.name) {
+        existingMap.set(`${normalizedDefinition.name}::${normalizedDefinition.type}`, existing)
+      }
+      return
+    }
+
+    const entry: Record<string, unknown> = {
+      customFieldValueId: null,
+      id: normalizedDefinition.id,
+      customFieldId: normalizedDefinition.id,
+      name: normalizedDefinition.name,
+      type: normalizedDefinition.type,
+      required: normalizedDefinition.required,
+      options: normalizedDefinition.options,
+      optionsText: normalizedDefinition.options?.length ? normalizedDefinition.options.join('\n') : '',
+      defaultValue: normalizedDefinition.defaultValue ?? '',
+      value: coerceValueForType(normalizedDefinition.type, (normalizedDefinition.defaultValue ?? '') as string),
+      readOnly: false,
+    }
+    result.push(entry)
+    existingMap.set(key, entry)
+    const fallbackKey = entry.name ? `${entry.name}::${entry.type}` : null
+    if (fallbackKey) existingMap.set(fallbackKey, entry)
+  })
+
+  return result
+}
+
+export const dedupeCustomFieldEntries = (fields: Record<string, unknown>[]): Record<string, unknown>[] => {
+  if (!Array.isArray(fields) || fields.length <= 1) {
+    return Array.isArray(fields) ? fields : []
+  }
+
+  const seen = new Set<string>()
+  const result: Record<string, unknown>[] = []
+
+  for (const field of fields) {
+    if (!field) continue
+
+    field.type = field.type || 'text'
+
+    let normalizedName = typeof field.name === 'string' ? (field.name as string).trim() : ''
+
+    if (!normalizedName && (field.customField as Record<string, unknown>)?.name) {
+      normalizedName = String((field.customField as Record<string, unknown>).name).trim()
+      field.name = normalizedName
+    } else if (typeof field.name === 'string') {
+      field.name = normalizedName
+    }
+
+    const key =
+      (field.customFieldId as string) ||
+      (field.id as string) ||
+      (normalizedName ? `${normalizedName}::${field.type || 'text'}` : null)
+
+    if (!key && !normalizedName) continue
+    if (key && seen.has(key)) continue
+    if (!normalizedName) continue
+
+    if (key) seen.add(key)
+    if (normalizedName) seen.add(`${normalizedName}::${field.type || 'text'}`)
+    result.push(field)
+  }
+
+  return result
+}
+
+// ---------------------------------------------------------------------------
+// Summarize for display
+// ---------------------------------------------------------------------------
+
+export const summarizeCustomFields = (
+  fields: Record<string, unknown>[] = [],
+): { key: string; label: string; value: string }[] => {
+  const seen = new Set<string>()
+  return fields
+    .slice()
+    .sort((a, b) => {
+      const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
+      const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
+      return (left as number) - (right as number)
+    })
+    .filter(shouldDisplayCustomField)
+    .filter((field) => {
+      const key = (field.customFieldId || field.id || field.name) as string
+      if (!key) return true
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+    .map((field, index) => ({
+      key: ((field.customFieldId || field.id || field.name) as string) || `custom-field-${index}`,
+      label: (field.name as string) || 'Champ',
+      value: formatCustomFieldValue(field),
+    }))
+}
diff --git a/frontend/app/shared/utils/deleteImpactUtils.ts b/frontend/app/shared/utils/deleteImpactUtils.ts
new file mode 100644
index 0000000..7f1289f
--- /dev/null
+++ b/frontend/app/shared/utils/deleteImpactUtils.ts
@@ -0,0 +1,19 @@
+export const resolveDeleteImpact = (entity: Record<string, any>): string[] => {
+  const impacts: string[] = []
+  const machineLinks = Array.isArray(entity?.machineLinks) ? entity.machineLinks.length : entity?.machineLinksCount ?? 0
+  const documents = Array.isArray(entity?.documents) ? entity.documents.length : entity?.documentsCount ?? 0
+  const customFields = Array.isArray(entity?.customFieldValues) ? entity.customFieldValues.length : entity?.customFieldValuesCount ?? 0
+  if (machineLinks > 0) impacts.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
+  if (documents > 0) impacts.push(`${documents} document${documents > 1 ? 's' : ''}`)
+  if (customFields > 0) impacts.push(`${customFields} valeur${customFields > 1 ? 's' : ''} de champs personnalisés`)
+  return impacts
+}
+
+export const buildDeleteMessage = (entityName: string, impacts: string[]): string => {
+  const lines = [`Voulez-vous vraiment supprimer « ${entityName} » ?`]
+  if (impacts.length) {
+    lines.push(`Cela supprimera également :\n• ${impacts.join('\n• ')}`)
+  }
+  lines.push('Cette action est irréversible.')
+  return lines.join('\n\n')
+}
\ No newline at end of file
diff --git a/frontend/app/shared/utils/documentDisplayUtils.ts b/frontend/app/shared/utils/documentDisplayUtils.ts
new file mode 100644
index 0000000..07d6432
--- /dev/null
+++ b/frontend/app/shared/utils/documentDisplayUtils.ts
@@ -0,0 +1,77 @@
+/**
+ * Document display & preview helpers for edit pages.
+ *
+ * Extracted from pages/component/[id]/edit.vue, pieces/[id]/edit.vue,
+ * product/[id]/edit.vue – each had an identical copy of these utilities.
+ */
+
+import { getFileIcon } from '~/utils/fileIcons'
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
+
+export const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+
+export const formatSize = (size: number | null | undefined): string => {
+  if (size === null || size === undefined) return '—'
+  if (size === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+
+const resolveUrl = (doc: any): string => doc?.fileUrl || doc?.path || ''
+
+export const shouldInlinePdf = (doc: any): boolean => {
+  if (!doc || !isPdfDocument(doc)) return false
+  const url = resolveUrl(doc)
+  if (!url) return false
+  if (typeof doc.size === 'number' && doc.size > PDF_PREVIEW_MAX_BYTES) return false
+  return true
+}
+
+export const appendPdfViewerParams = (src: string): string => {
+  if (!src) return ''
+  if (src.startsWith('data:')) return src
+  if (src.includes('#')) return `${src}&toolbar=0&navpanes=0`
+  return `${src}#toolbar=0&navpanes=0`
+}
+
+export const documentPreviewSrc = (doc: any): string => {
+  const url = resolveUrl(doc)
+  if (!url) return ''
+  if (isPdfDocument(doc)) return appendPdfViewerParams(url)
+  return url
+}
+
+export const documentThumbnailClass = (doc: any): string => {
+  if (shouldInlinePdf(doc) || (isImageDocument(doc) && resolveUrl(doc))) return 'h-24 w-20'
+  return 'h-16 w-16'
+}
+
+export interface FileIconResult {
+  component: unknown
+  colorClass: string
+  label: string
+}
+
+export const documentIcon = (doc: any): FileIconResult =>
+  getFileIcon({ name: doc?.filename || doc?.name, mime: doc?.mimeType })
+
+export const downloadDocument = (doc: any): void => {
+  // Prefer dedicated download endpoint
+  if (doc?.downloadUrl) {
+    window.open(doc.downloadUrl, '_blank')
+    return
+  }
+  // Fallback for legacy data: URIs during migration
+  const target = resolveUrl(doc)
+  if (!target) return
+  if (target.startsWith('data:')) {
+    const link = document.createElement('a')
+    link.href = target
+    link.download = doc.filename || doc.name || 'document'
+    link.click()
+    return
+  }
+  window.open(target, '_blank')
+}
diff --git a/frontend/app/shared/utils/entityCustomFieldLogic.ts b/frontend/app/shared/utils/entityCustomFieldLogic.ts
new file mode 100644
index 0000000..b7e5d3f
--- /dev/null
+++ b/frontend/app/shared/utils/entityCustomFieldLogic.ts
@@ -0,0 +1,335 @@
+/**
+ * Pure functions for custom field resolution, merging, and deduplication.
+ *
+ * Extracted from ComponentItem.vue and PieceItem.vue which had ~350 LOC
+ * of identical custom field logic duplicated between them.
+ */
+
+// ---------------------------------------------------------------------------
+// Field key / identity helpers
+// ---------------------------------------------------------------------------
+
+export function fieldKeyFromNameAndType(name: unknown, type: unknown): string | null {
+  const normalizedName = typeof name === 'string' ? name.trim().toLowerCase() : ''
+  const normalizedType = typeof type === 'string' ? type.trim().toLowerCase() : ''
+  return normalizedName ? `${normalizedName}::${normalizedType}` : null
+}
+
+export function resolveOrderIndex(field: any): number {
+  if (!field || typeof field !== 'object') return 0
+  if (typeof field.orderIndex === 'number') return field.orderIndex
+  if (field.customField && typeof field.customField.orderIndex === 'number') return field.customField.orderIndex
+  return 0
+}
+
+// ---------------------------------------------------------------------------
+// Field accessors
+// ---------------------------------------------------------------------------
+
+export function resolveFieldKey(field: any, index: number): string {
+  return field?.id ?? field?.customFieldValueId ?? field?.customFieldId ?? field?.name ?? `field-${index}`
+}
+
+export function resolveFieldId(field: any): string | null {
+  return field?.customFieldValueId ?? null
+}
+
+export function resolveFieldName(field: any): string {
+  return field?.name ?? 'Champ'
+}
+
+export function resolveFieldType(field: any): string {
+  return field?.type ?? 'text'
+}
+
+export function resolveFieldOptions(field: any): string[] {
+  return field?.options ?? []
+}
+
+export function resolveFieldRequired(field: any): boolean {
+  return !!field?.required
+}
+
+export function resolveFieldReadOnly(field: any): boolean {
+  return !!field?.readOnly
+}
+
+export function resolveCustomFieldId(field: any): string | null {
+  return field?.customFieldId ?? field?.id ?? field?.customField?.id ?? null
+}
+
+export function buildCustomFieldMetadata(field: any) {
+  return {
+    customFieldName: resolveFieldName(field),
+    customFieldType: resolveFieldType(field),
+    customFieldRequired: resolveFieldRequired(field),
+    customFieldOptions: resolveFieldOptions(field),
+  }
+}
+
+export function formatFieldDisplayValue(field: any): string {
+  const type = resolveFieldType(field)
+  const rawValue = field?.value ?? ''
+  if (type === 'boolean') {
+    const normalized = String(rawValue).toLowerCase()
+    if (normalized === 'true') return 'Oui'
+    if (normalized === 'false') return 'Non'
+  }
+  return rawValue || 'Non défini'
+}
+
+// ---------------------------------------------------------------------------
+// Custom field ID resolution against candidate pool
+// ---------------------------------------------------------------------------
+
+export function ensureCustomFieldId(field: any, candidateFields: any[]): string | null {
+  const existingId = resolveCustomFieldId(field)
+  if (existingId) return existingId
+
+  const name = resolveFieldName(field)
+  if (!name || name === 'Champ') return null
+
+  const matches = candidateFields.filter((candidate) => {
+    if (!candidate || typeof candidate !== 'object') return false
+    const candidateId = candidate.id || candidate.customFieldId
+    if (candidateId && (candidateId === field?.id || candidateId === field?.customFieldId)) return true
+    return typeof candidate.name === 'string' && candidate.name === name
+  })
+
+  if (matches.length) {
+    const withId = matches.find((c) => c?.id || c?.customFieldId) || matches[0]
+    const id = withId?.id || withId?.customFieldId || null
+    if (id) field.customFieldId = id
+    if (!field.customField && typeof withId === 'object') field.customField = withId
+    return id
+  }
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Structure extraction
+// ---------------------------------------------------------------------------
+
+export function extractStructureCustomFields(structure: any): any[] {
+  if (!structure || typeof structure !== 'object') return []
+  const customFields = structure.customFields
+  return Array.isArray(customFields) ? customFields : []
+}
+
+// ---------------------------------------------------------------------------
+// Deduplication & merge
+// ---------------------------------------------------------------------------
+
+export function deduplicateFieldDefinitions(definitions: any[]): any[] {
+  const result: any[] = []
+  const seenIds = new Set<string>()
+  const seenNames = new Set<string>()
+
+  const orderedDefinitions = (Array.isArray(definitions) ? definitions.slice() : [])
+    .sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+
+  orderedDefinitions.forEach((field) => {
+    if (!field || typeof field !== 'object') return
+    const id = field.id ?? field.customFieldId ?? field.customField?.id ?? null
+    const nameKey = fieldKeyFromNameAndType(field.name, field.type)
+    // Deduplicate by name+type (primary) AND by id — a field with the same
+    // name+type is the same field even when stored with different IDs.
+    if (nameKey && seenNames.has(nameKey)) return
+    if (id && seenIds.has(id)) return
+    if (id) seenIds.add(id)
+    if (nameKey) seenNames.add(nameKey)
+    field.orderIndex = resolveOrderIndex(field)
+    result.push(field)
+  })
+
+  return result
+}
+
+export function mergeFieldDefinitionsWithValues(definitions: any[], values: any[]): any[] {
+  const definitionList = Array.isArray(definitions) ? definitions : []
+  const valueList = Array.isArray(values) ? values : []
+
+  const valueMap = new Map<string, any>()
+  valueList.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') return
+    const fieldId = entry.customField?.id ?? entry.customFieldId ?? null
+    if (fieldId) valueMap.set(fieldId, entry)
+    const nameKey = fieldKeyFromNameAndType(entry.customField?.name, entry.customField?.type)
+    if (nameKey) valueMap.set(nameKey, entry)
+  })
+
+  const merged = definitionList.map((field) => {
+    if (!field || typeof field !== 'object') return field
+
+    const fieldId = resolveCustomFieldId(field)
+    const nameKey = fieldKeyFromNameAndType(resolveFieldName(field), resolveFieldType(field))
+    const matchedValue = (fieldId ? valueMap.get(fieldId) : undefined) ?? (nameKey ? valueMap.get(nameKey) : undefined)
+
+    if (!matchedValue) {
+      return { ...field, value: field?.value ?? '', orderIndex: resolveOrderIndex(field) }
+    }
+
+    const resolvedOrder = Math.min(resolveOrderIndex(field), resolveOrderIndex(matchedValue.customField))
+    return {
+      ...field,
+      customFieldValueId: matchedValue.id ?? field.customFieldValueId ?? null,
+      customFieldId: matchedValue.customField?.id ?? matchedValue.customFieldId ?? fieldId ?? null,
+      customField: matchedValue.customField ?? field.customField ?? null,
+      value: matchedValue.value ?? field.value ?? '',
+      orderIndex: resolvedOrder,
+    }
+  })
+
+  valueList.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') return
+
+    const fieldId = entry.customField?.id ?? entry.customFieldId ?? null
+    const nameKey = fieldKeyFromNameAndType(entry.customField?.name, entry.customField?.type)
+
+    const exists = merged.some((field) => {
+      if (!field || typeof field !== 'object') return false
+      if (field.customFieldValueId && field.customFieldValueId === entry.id) return true
+      const existingId = resolveCustomFieldId(field)
+      if (fieldId && existingId && existingId === fieldId) return true
+      if (!fieldId && nameKey) {
+        return fieldKeyFromNameAndType(resolveFieldName(field), resolveFieldType(field)) === nameKey
+      }
+      return false
+    })
+
+    if (!exists) {
+      merged.push({
+        customFieldValueId: entry.id ?? null,
+        customFieldId: fieldId,
+        name: entry.customField?.name ?? '',
+        type: entry.customField?.type ?? 'text',
+        required: entry.customField?.required ?? false,
+        options: entry.customField?.options ?? [],
+        value: entry.value ?? '',
+        customField: entry.customField ?? null,
+        orderIndex: resolveOrderIndex(entry.customField),
+      })
+    }
+  })
+
+  return merged.sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+}
+
+export function dedupeMergedFields(fields: any[]): any[] {
+  if (!Array.isArray(fields) || fields.length <= 1) {
+    return Array.isArray(fields)
+      ? fields.slice().sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+      : []
+  }
+
+  const seenById = new Map<string, any>()
+  const seenByName = new Map<string, any>()
+  const result: any[] = []
+
+  const orderedFields = fields.slice().sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+
+  orderedFields.forEach((field) => {
+    if (!field || typeof field !== 'object') return
+
+    const rawName = resolveFieldName(field)
+    const normalizedName = typeof rawName === 'string' ? rawName.trim() : ''
+    if (!normalizedName) return
+
+    field.name = normalizedName
+    field.type = field.type || resolveFieldType(field)
+
+    const fieldId = resolveCustomFieldId(field)
+    const nameKey = fieldKeyFromNameAndType(normalizedName, field.type)
+
+    // Check duplicates by name+type first (same field can have different IDs)
+    const existing = (nameKey ? seenByName.get(nameKey) : undefined) ?? (fieldId ? seenById.get(fieldId) : undefined)
+
+    if (!existing) {
+      field.orderIndex = resolveOrderIndex(field)
+      if (fieldId) seenById.set(fieldId, field)
+      if (nameKey) seenByName.set(nameKey, field)
+      result.push(field)
+      return
+    }
+
+    const existingHasValue = existing.value !== undefined && existing.value !== null && String(existing.value).trim().length > 0
+    const incomingHasValue = field.value !== undefined && field.value !== null && String(field.value).trim().length > 0
+
+    if (!existingHasValue && incomingHasValue) {
+      Object.assign(existing, field)
+      existing.orderIndex = Math.min(resolveOrderIndex(existing), resolveOrderIndex(field))
+      if (fieldId) seenById.set(fieldId, existing)
+      if (nameKey) seenByName.set(nameKey, existing)
+    }
+  })
+
+  return result.sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+}
+
+// ---------------------------------------------------------------------------
+// Definition sources builder
+// ---------------------------------------------------------------------------
+
+export function buildDefinitionSources(entity: any, entityType: 'composant' | 'piece'): any[] {
+  const definitions: any[] = []
+  const pushFields = (collection: any) => {
+    if (Array.isArray(collection)) definitions.push(...collection)
+  }
+
+  if (entityType === 'composant') {
+    const type = entity.typeComposant || {}
+
+    pushFields(entity.customFields)
+    pushFields(entity.definition?.customFields)
+    pushFields(type.customFields)
+
+    ;[
+      entity.definition?.structure,
+      type.structure,
+    ].forEach((structure) => {
+      const fields = extractStructureCustomFields(structure)
+      if (fields.length) definitions.push(...fields)
+    })
+  } else {
+    const type = entity.typePiece || {}
+
+    pushFields(entity.customFields)
+    pushFields(entity.definition?.customFields)
+    pushFields(type.customFields)
+
+    ;[
+      entity.definition?.structure,
+      type.structure,
+    ].forEach((structure) => {
+      const fields = extractStructureCustomFields(structure)
+      if (fields.length) definitions.push(...fields)
+    })
+  }
+
+  return deduplicateFieldDefinitions(definitions)
+}
+
+// ---------------------------------------------------------------------------
+// Candidate fields builder
+// ---------------------------------------------------------------------------
+
+export function buildCandidateCustomFields(entity: any, definitionSources: any[]): any[] {
+  const map = new Map<string, any>()
+  const register = (collection: any[]) => {
+    if (!Array.isArray(collection)) return
+    collection.forEach((item) => {
+      if (!item || typeof item !== 'object') return
+      const id = item.id || item.customFieldId
+      const name = typeof item.name === 'string' ? item.name : null
+      const key = id || (name ? `${name}::${item.type ?? ''}` : null)
+      if (!key || map.has(key)) return
+      map.set(key, item)
+    })
+  }
+
+  register((entity.customFieldValues || []).map((value: any) => value?.customField))
+  register(definitionSources)
+
+  return Array.from(map.values())
+}
diff --git a/frontend/app/shared/utils/errorMessages.ts b/frontend/app/shared/utils/errorMessages.ts
new file mode 100644
index 0000000..c9da906
--- /dev/null
+++ b/frontend/app/shared/utils/errorMessages.ts
@@ -0,0 +1,152 @@
+/**
+ * Translates raw backend error messages (Symfony, Doctrine, API Platform)
+ * into user-friendly French messages for display in toasts/alerts.
+ */
+
+const EXACT_MATCHES: Record<string, string> = {
+  // UniqueConstraintSubscriber (HTTP 409)
+  'nom duplique': 'Un élément avec ce nom existe déjà.',
+
+  // English backend messages → French
+  'Machine not found.': 'Machine introuvable.',
+  'Composant not found.': 'Composant introuvable.',
+  'Piece not found.': 'Pièce introuvable.',
+  'Product not found.': 'Produit introuvable.',
+  'Site not found.': 'Site introuvable.',
+  'Custom field not found.': 'Champ personnalisé introuvable.',
+  'Custom field value not found.': 'Valeur du champ personnalisé introuvable.',
+  'Document not found.': 'Document introuvable.',
+  'File not found on disk.': 'Le fichier n\'a pas été trouvé sur le serveur.',
+  'Invalid document data.': 'Les données du document sont invalides.',
+  'Invalid JSON payload.': 'Les données envoyées sont invalides.',
+  'Unsupported entity type.': 'Type d\'entité non supporté.',
+  'Entity target is missing.': 'La cible de l\'entité est manquante.',
+  'customFieldId or customFieldName is required.': 'L\'identifiant du champ personnalisé est requis.',
+
+  // Symfony validator messages
+  'This value should not be blank.': 'Ce champ ne peut pas être vide.',
+  'This value is not a valid email address.': 'L\'adresse email n\'est pas valide.',
+  'This value is already used.': 'Cette valeur est déjà utilisée.',
+  'This field is missing.': 'Un champ obligatoire est manquant.',
+
+  // HTTP status texts (used in "Erreur XXX: StatusText" fallback)
+  'Internal Server Error': 'Erreur interne du serveur. Veuillez réessayer.',
+  'Bad Request': 'Requête invalide.',
+  'Not Found': 'Ressource introuvable.',
+  'Conflict': 'Un élément similaire existe déjà.',
+  'Unprocessable Entity': 'Données invalides.',
+  'Unprocessable Content': 'Données invalides.',
+  'Service Unavailable': 'Service temporairement indisponible. Veuillez réessayer.',
+  'Gateway Timeout': 'Le serveur met trop de temps à répondre. Veuillez réessayer.',
+}
+
+const TECHNICAL_PATTERNS: Array<[RegExp, string]> = [
+  // Database / Doctrine errors
+  [/SQLSTATE\[/i, 'Une erreur est survenue. Veuillez réessayer.'],
+  [/An exception occurred/i, 'Une erreur est survenue. Veuillez réessayer.'],
+  [/Duplicate entry/i, 'Un élément avec ces données existe déjà.'],
+  [/unique.*constraint.*violation/i, 'Un élément avec ces données existe déjà.'],
+  [/foreign key constraint/i, 'Impossible de supprimer cet élément car il est utilisé ailleurs.'],
+  [/violates not-null constraint/i, 'Un champ obligatoire n\'a pas été renseigné.'],
+  [/violates check constraint/i, 'Une valeur saisie est invalide.'],
+
+  // Symfony / API Platform internal messages
+  [/Expected argument of type/i, 'Les données envoyées sont invalides.'],
+  [/Could not denormalize/i, 'Les données envoyées sont invalides.'],
+  [/The JSON value could not be decoded/i, 'Les données envoyées sont invalides.'],
+  [/Syntax error.*JSON/i, 'Les données envoyées sont invalides.'],
+  [/No route found/i, 'Ressource introuvable.'],
+  [/Access Denied/i, 'Permissions insuffisantes pour cette action.'],
+]
+
+/**
+ * Detects if a message contains technical jargon that should not be shown to users.
+ */
+function containsTechnicalJargon(message: string): boolean {
+  const patterns = [
+    /stack trace/i,
+    /exception/i,
+    /\bat\s+[\w\\]+::/,
+    /vendor\//,
+    /\.php/,
+    /doctrine/i,
+    /symfony/i,
+    /SQLSTATE/i,
+    /PDOException/i,
+    /DBALException/i,
+    /RuntimeException/i,
+    /TypeError/i,
+    /LogicException/i,
+    /InvalidArgumentException/i,
+    /UnexpectedValueException/i,
+    /constraint.*violation/i,
+    /entity.*manager/i,
+    /Hydra error/i,
+  ]
+  return patterns.some((p) => p.test(message))
+}
+
+/**
+ * Translates a raw backend error message into a user-friendly French message.
+ *
+ * Usage:
+ *   import { humanizeError } from '~/shared/utils/errorMessages'
+ *   showError(humanizeError(rawMessage))
+ */
+export function humanizeError(rawMessage: string | undefined | null): string {
+  if (!rawMessage) return 'Une erreur est survenue.'
+
+  const trimmed = rawMessage.trim()
+  if (!trimmed) return 'Une erreur est survenue.'
+
+  // 1. Exact match
+  if (EXACT_MATCHES[trimmed]) return EXACT_MATCHES[trimmed]
+
+  // 2. "Erreur XXX: StatusText" pattern — translate the status text
+  const httpMatch = trimmed.match(/^Erreur (\d{3})\s*:\s*(.+)$/)
+  if (httpMatch) {
+    const statusText = httpMatch[2]!.trim()
+    if (EXACT_MATCHES[statusText]) return EXACT_MATCHES[statusText]
+    return `Erreur serveur (${httpMatch[1]}). Veuillez réessayer.`
+  }
+
+  // 3. Regex patterns for technical errors
+  for (const [pattern, replacement] of TECHNICAL_PATTERNS) {
+    if (pattern.test(trimmed)) return replacement
+  }
+
+  // 4. If it contains technical jargon, replace with generic message
+  if (containsTechnicalJargon(trimmed)) {
+    return 'Une erreur est survenue. Veuillez réessayer.'
+  }
+
+  // 5. Already user-friendly — return as-is
+  return trimmed
+}
+
+/**
+ * Extracts the best error message from various backend response formats.
+ * Handles: { message }, { error }, { detail }, { "hydra:description" }
+ */
+export function extractApiErrorMessage(errorData: Record<string, unknown>): string | null {
+  if (!errorData || typeof errorData !== 'object') return null
+
+  // Symfony validator violations — priorité max (message propre sans préfixe champ)
+  if (Array.isArray(errorData.violations) && errorData.violations.length > 0) {
+    const first = errorData.violations[0] as Record<string, unknown>
+    if (typeof first?.message === 'string') return first.message
+  }
+
+  // UniqueConstraintSubscriber format ({ success: false, error: "nom duplique" })
+  if (typeof errorData.error === 'string') return errorData.error
+
+  // Custom controllers format
+  if (typeof errorData.message === 'string') return errorData.message
+  if (Array.isArray(errorData.message) && typeof errorData.message[0] === 'string') return errorData.message[0]
+
+  // API Platform hydra format (fallback — peut contenir "propertyPath: message")
+  if (typeof errorData['hydra:description'] === 'string') return errorData['hydra:description']
+  if (typeof errorData.detail === 'string') return errorData.detail
+
+  return null
+}
diff --git a/frontend/app/shared/utils/historyDisplayUtils.ts b/frontend/app/shared/utils/historyDisplayUtils.ts
new file mode 100644
index 0000000..18675ad
--- /dev/null
+++ b/frontend/app/shared/utils/historyDisplayUtils.ts
@@ -0,0 +1,79 @@
+/**
+ * History display utilities for edit pages.
+ *
+ * Extracted from pages/component/[id]/edit.vue, pieces/[id]/edit.vue,
+ * product/[id]/edit.vue – each had an identical copy.
+ */
+
+// ---------------------------------------------------------------------------
+// Formatters
+// ---------------------------------------------------------------------------
+
+export const historyActionLabel = (action: string): string => {
+  if (action === 'create') return 'Création'
+  if (action === 'delete') return 'Suppression'
+  if (action === 'restore') return 'Restauration'
+  return 'Modification'
+}
+
+const historyDateFormatter = new Intl.DateTimeFormat('fr-FR', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+})
+
+export const formatHistoryDate = (value: string): string => {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return historyDateFormatter.format(date)
+}
+
+export const formatHistoryValue = (value: unknown): string => {
+  if (value === null || value === undefined || value === '') return '—'
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '—'
+    return value.map((item) => formatHistoryValue(item)).join(', ')
+  }
+  if (typeof value === 'object') {
+    const maybeRecord = value as Record<string, unknown>
+    const name = typeof maybeRecord.name === 'string' ? maybeRecord.name : null
+    const id = typeof maybeRecord.id === 'string' ? maybeRecord.id : null
+    if (name && id) return `${name} (#${id})`
+    if (name) return name
+    if (id) return `#${id}`
+    try {
+      return JSON.stringify(value)
+    } catch {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+// ---------------------------------------------------------------------------
+// Diff entries
+// ---------------------------------------------------------------------------
+
+interface DiffChange {
+  from?: unknown
+  to?: unknown
+}
+
+export interface HistoryDiffEntry {
+  field: string
+  label: string
+  fromLabel: string
+  toLabel: string
+}
+
+export const historyDiffEntries = (
+  entry: { diff?: Record<string, DiffChange> | null },
+  fieldLabels: Record<string, string>,
+): HistoryDiffEntry[] => {
+  const diff = entry.diff ?? {}
+  return Object.entries(diff).map(([field, change]) => ({
+    field,
+    label: fieldLabels[field] ?? field,
+    fromLabel: formatHistoryValue(change?.from),
+    toLabel: formatHistoryValue(change?.to),
+  }))
+}
diff --git a/frontend/app/shared/utils/pieceProductSelectionUtils.ts b/frontend/app/shared/utils/pieceProductSelectionUtils.ts
new file mode 100644
index 0000000..781c231
--- /dev/null
+++ b/frontend/app/shared/utils/pieceProductSelectionUtils.ts
@@ -0,0 +1,104 @@
+import type { PieceModelProduct, PieceModelStructure } from '~/shared/types/inventory'
+
+/**
+ * Extract the products array from a piece model structure, defaulting to [].
+ */
+export const getStructureProducts = (structure: PieceModelStructure | null): PieceModelProduct[] =>
+  Array.isArray(structure?.products) ? structure.products : []
+
+/**
+ * Build a human-readable label for a single product requirement.
+ */
+export const describeProductRequirement = (requirement: PieceModelProduct, index: number): string => {
+  if (!requirement) {
+    return `Produit ${index + 1}`
+  }
+  const parts: string[] = []
+  if (requirement.role) {
+    parts.push(requirement.role)
+  }
+  if (requirement.typeProductLabel) {
+    parts.push(requirement.typeProductLabel)
+  } else if (requirement.typeProductId) {
+    parts.push(`Catégorie #${requirement.typeProductId}`)
+  }
+  if (requirement.familyCode) {
+    parts.push(`Famille ${requirement.familyCode}`)
+  }
+  if (parts.length === 0) {
+    parts.push(`Produit ${index + 1}`)
+  }
+  return parts.join(' • ')
+}
+
+/**
+ * Build description strings for every product requirement in a structure.
+ */
+export const buildProductRequirementDescriptions = (
+  products: PieceModelProduct[],
+): string[] =>
+  products.map((requirement, index) => describeProductRequirement(requirement, index))
+
+/**
+ * Build the entry objects used to render product selection inputs.
+ */
+export const buildProductRequirementEntries = (
+  products: PieceModelProduct[],
+  keyPrefix: string,
+) =>
+  products.map((requirement, index) => ({
+    index,
+    key: `${keyPrefix}-${index}-${requirement?.typeProductId || 'any'}`,
+    label: describeProductRequirement(requirement, index),
+    typeProductId: requirement?.typeProductId ? String(requirement.typeProductId) : null,
+  }))
+
+/**
+ * Resize the selections array to match the expected count, preserving existing values.
+ */
+export const resizeProductSelections = (
+  current: (string | null)[],
+  count: number,
+): (string | null)[] =>
+  Array.from({ length: count }, (_, index) => current[index] ?? null)
+
+/**
+ * Return true when all required product slots have a non-empty string value,
+ * or when no product selection is required.
+ */
+export const areProductSelectionsFilled = (
+  requiresSelection: boolean,
+  entries: { index: number }[],
+  selections: (string | null)[],
+): boolean =>
+  !requiresSelection ||
+  entries.every((entry) => {
+    const value = selections[entry.index]
+    return typeof value === 'string' && value.trim().length > 0
+  })
+
+/**
+ * Set a single product selection by index, returning a new array.
+ */
+export const applyProductSelection = (
+  current: (string | null)[],
+  index: number,
+  value: string | null,
+): (string | null)[] => {
+  const normalized = typeof value === 'string' ? value : null
+  const next = [...current]
+  next[index] = normalized
+  return next
+}
+
+/**
+ * Extract normalized product IDs from the current selections based on requirement entries.
+ */
+export const collectNormalizedProductIds = (
+  entries: { index: number }[],
+  selections: (string | null)[],
+): string[] =>
+  entries
+    .map((entry) => selections[entry.index])
+    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+    .map((value) => value.trim())
diff --git a/frontend/app/shared/utils/productDisplayUtils.ts b/frontend/app/shared/utils/productDisplayUtils.ts
new file mode 100644
index 0000000..ff5b609
--- /dev/null
+++ b/frontend/app/shared/utils/productDisplayUtils.ts
@@ -0,0 +1,333 @@
+/**
+ * Product resolution and display utilities.
+ *
+ * Extracted from pages/machine/[id].vue – these functions resolve product
+ * references from deeply nested API payloads and build display objects.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ProductDisplay {
+  name: string
+  reference: string | null
+  category: string | null
+  suppliers: string | null
+  price: string | null
+}
+
+type AnyRecord = Record<string, unknown>
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const isPlainObject = (value: unknown): value is AnyRecord =>
+  Object.prototype.toString.call(value) === '[object Object]'
+
+export const resolveIdentifier = (...candidates: unknown[]): string | null => {
+  for (const candidate of candidates) {
+    if (candidate !== undefined && candidate !== null && candidate !== '') {
+      return candidate as string
+    }
+  }
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Supplier / price labels
+// ---------------------------------------------------------------------------
+
+export const getProductSuppliersLabel = (product: AnyRecord | null): string | null => {
+  if (!product) return null
+  const suppliers = Array.isArray(product.constructeurs)
+    ? (product.constructeurs as AnyRecord[]).map((c) => c?.name as string).filter(Boolean)
+    : []
+  return suppliers.length > 0 ? suppliers.join(', ') : null
+}
+
+export const getProductPriceLabel = (product: AnyRecord | null): string | null => {
+  if (!product) return null
+  const priceValue =
+    (product.supplierPrice ?? product.prix ?? product.price ?? null) as string | number | null
+  if (priceValue === undefined || priceValue === null) return null
+  const numeric = Number(priceValue)
+  if (Number.isNaN(numeric)) return null
+  return `${numeric.toFixed(2)} €`
+}
+
+// ---------------------------------------------------------------------------
+// resolveProductReference
+// ---------------------------------------------------------------------------
+
+export const resolveProductReference = (
+  source: AnyRecord | null | undefined,
+  findProductById: (id: string) => AnyRecord | null,
+): { product: AnyRecord | null; productId: string | null } => {
+  if (!source || typeof source !== 'object') {
+    return { product: null, productId: null }
+  }
+
+  const candidateKeys: (string | null)[] = [
+    null,
+    'productLink',
+    'machinePieceLink',
+    'machineComponentLink',
+    'machineProductLink',
+    'originalPiece',
+    'originalComposant',
+    'link',
+    'overrides',
+    'machineComponentLinkOverrides',
+    'requirement',
+    'selection',
+    'entry',
+  ]
+
+  let product: AnyRecord | null = null
+  let productId: string | null = null
+
+  const inspect = (container: unknown) => {
+    if (!container || typeof container !== 'object') return
+    const c = container as AnyRecord
+    if (!product && c.product && typeof c.product === 'object') {
+      product = c.product as AnyRecord
+    }
+    if (!productId) {
+      const candidate =
+        (c.productId as string) ||
+        (c.product && typeof c.product === 'object'
+          ? ((c.product as AnyRecord).id as string) || ((c.product as AnyRecord).productId as string)
+          : null) ||
+        null
+      if (candidate) productId = candidate
+    }
+  }
+
+  candidateKeys.forEach((key) => {
+    if (key === null) inspect(source)
+    else inspect((source as AnyRecord)[key])
+  })
+
+  if (!product && productId) {
+    product = findProductById(productId) || null
+  }
+
+  if (!product && !productId && source.productName) {
+    const suppliersLabel =
+      typeof source.constructeursLabel === 'string'
+        ? source.constructeursLabel
+        : typeof source.productSuppliers === 'string'
+          ? source.productSuppliers
+          : null
+
+    return {
+      product: {
+        name: source.productName,
+        reference: source.productReference || null,
+        typeProduct: source.productCategory ? { name: source.productCategory } : null,
+        constructeurs: suppliersLabel
+          ? (suppliersLabel as string)
+              .split(',')
+              .map((name: string) => name.trim())
+              .filter((name: string) => name.length > 0)
+              .map((name: string) => ({ name }))
+          : undefined,
+        supplierPrice: source.productPrice ?? source.productPriceLabel ?? source.price ?? null,
+      } as AnyRecord,
+      productId: null,
+    }
+  }
+
+  if (productId && product && product.id && product.id !== productId) {
+    const resolved = findProductById(productId)
+    if (resolved) product = resolved
+  }
+
+  return { product: product || null, productId: productId || null }
+}
+
+// ---------------------------------------------------------------------------
+// getProductDisplay
+// ---------------------------------------------------------------------------
+
+export const getProductDisplay = (
+  source: AnyRecord | null | undefined,
+  findProductById: (id: string) => AnyRecord | null,
+): ProductDisplay | null => {
+  if (!source || typeof source !== 'object') return null
+
+  const { product, productId } = resolveProductReference(source, findProductById)
+
+  if (product) {
+    return {
+      name: (product.name as string) || (product.reference as string) || 'Produit catalogue',
+      reference: (product.reference as string) || null,
+      category: (product.typeProduct as AnyRecord)?.name as string || null,
+      suppliers: getProductSuppliersLabel(product),
+      price: getProductPriceLabel(product),
+    }
+  }
+
+  let fallbackName =
+    (source.productName ||
+      source.productLabel ||
+      source.typeProductLabel ||
+      (source.typeProduct as AnyRecord)?.name ||
+      (productId ? `Produit ${productId}` : null)) as string | null
+  let fallbackReference = (source.productReference || source.reference || null) as string | null
+  let fallbackCategory =
+    (source.productCategory ||
+      source.typeProductLabel ||
+      (source.typeProduct as AnyRecord)?.name ||
+      null) as string | null
+  let fallbackSuppliers =
+    (source.productSuppliers ||
+      source.constructeursLabel ||
+      source.supplierLabel ||
+      null) as string | null
+  let fallbackPrice =
+    (source.productPriceLabel ||
+      source.productPrice ||
+      source.priceLabel ||
+      source.price ||
+      null) as string | number | null
+
+  const structuralCandidates = [
+    source.products,
+    (source.definition as AnyRecord)?.products,
+    ((source.definition as AnyRecord)?.structure as AnyRecord)?.products,
+    (source.structure as AnyRecord)?.products,
+    (source.requirement as AnyRecord)?.products,
+    ((source.requirement as AnyRecord)?.structure as AnyRecord)?.products,
+    (source.typeComposant as AnyRecord)?.products,
+    ((source.typeComposant as AnyRecord)?.structure as AnyRecord)?.products,
+    (source.originalComposant as AnyRecord)?.products,
+    ((source.originalComposant as AnyRecord)?.definition as AnyRecord)?.products,
+    (((source.originalComposant as AnyRecord)?.definition as AnyRecord)?.structure as AnyRecord)?.products,
+    (source.originalComponent as AnyRecord)?.products,
+    ((source.originalComponent as AnyRecord)?.definition as AnyRecord)?.products,
+    (((source.originalComponent as AnyRecord)?.definition as AnyRecord)?.structure as AnyRecord)?.products,
+  ]
+
+  const structuralProducts = structuralCandidates
+    .flatMap((candidate) => {
+      if (Array.isArray(candidate)) return candidate
+      if (candidate && typeof candidate === 'object' && Array.isArray((candidate as AnyRecord).products)) {
+        return (candidate as AnyRecord).products as unknown[]
+      }
+      return []
+    })
+    .filter((entry) => entry && typeof entry === 'object')
+
+  const structuralProduct = structuralProducts.length ? (structuralProducts[0] as AnyRecord) : null
+
+  const structuralFamilyCode =
+    (structuralProduct && typeof structuralProduct.familyCode === 'string'
+      ? structuralProduct.familyCode
+      : null) ||
+    (typeof source.familyCode === 'string' ? source.familyCode : null)
+
+  if (!fallbackName && structuralProduct) {
+    fallbackName =
+      (structuralProduct.typeProductLabel as string) ||
+      ((structuralProduct.typeProduct as AnyRecord)?.name as string) ||
+      (structuralProduct.reference as string) ||
+      (structuralFamilyCode ? `Famille ${structuralFamilyCode}` : null) ||
+      null
+  }
+
+  if (!fallbackReference && structuralProduct?.reference) {
+    fallbackReference = structuralProduct.reference as string
+  }
+
+  if (!fallbackCategory) {
+    fallbackCategory =
+      (structuralProduct?.typeProductLabel as string) ||
+      ((structuralProduct?.typeProduct as AnyRecord)?.name as string) ||
+      (structuralFamilyCode ? `Famille ${structuralFamilyCode}` : null) ||
+      null
+  }
+
+  if (!fallbackSuppliers && structuralProduct?.supplierLabel) {
+    fallbackSuppliers = structuralProduct.supplierLabel as string
+  }
+
+  if (!fallbackSuppliers && Array.isArray(structuralProduct?.constructeurs)) {
+    const supplierNames = (structuralProduct!.constructeurs as AnyRecord[])
+      .map((c) => c?.name as string)
+      .filter((name) => typeof name === 'string' && name.trim().length > 0)
+    if (supplierNames.length) fallbackSuppliers = supplierNames.join(', ')
+  }
+
+  if (!fallbackPrice && structuralProduct?.priceLabel) fallbackPrice = structuralProduct.priceLabel as string
+  if (!fallbackPrice && structuralProduct?.price) fallbackPrice = structuralProduct.price as string | number
+
+  if (fallbackName || fallbackReference || fallbackCategory || fallbackSuppliers || fallbackPrice) {
+    return {
+      name: fallbackName || 'Produit catalogue',
+      reference: fallbackReference,
+      category: fallbackCategory,
+      suppliers: fallbackSuppliers,
+      price:
+        typeof fallbackPrice === 'number'
+          ? `${fallbackPrice.toFixed(2)} €`
+          : (fallbackPrice as string) || null,
+    }
+  }
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Parent link identifiers
+// ---------------------------------------------------------------------------
+
+export const extractParentLinkIdentifiers = (source: AnyRecord | null | undefined): AnyRecord => {
+  if (!source || typeof source !== 'object') return {}
+
+  const identifiers: AnyRecord = {}
+
+  const idKeys = [
+    'parentRequirementId',
+    'parentComponentRequirementId',
+    'parentPieceRequirementId',
+    'parentMachineComponentRequirementId',
+    'parentMachinePieceRequirementId',
+    'parentLinkId',
+    'parentComponentLinkId',
+    'parentPieceLinkId',
+    'parentComponentId',
+    'parentPieceId',
+  ]
+
+  idKeys.forEach((key) => {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const value = source[key]
+      if (value !== undefined && value !== null && value !== '') {
+        identifiers[key] = value
+      }
+    }
+  })
+
+  const objectKeys = [
+    'parentRequirement',
+    'parentComponentRequirement',
+    'parentPieceRequirement',
+    'parentMachineComponentRequirement',
+    'parentMachinePieceRequirement',
+  ]
+
+  objectKeys.forEach((key) => {
+    const value = source[key]
+    if (isPlainObject(value) && value.id !== undefined && value.id !== null && value.id !== '') {
+      const idKey = `${key}Id`
+      if (!Object.prototype.hasOwnProperty.call(identifiers, idKey)) {
+        identifiers[idKey] = value.id
+      }
+    }
+  })
+
+  return identifiers
+}
diff --git a/frontend/app/shared/utils/structureAssignmentHelpers.ts b/frontend/app/shared/utils/structureAssignmentHelpers.ts
new file mode 100644
index 0000000..cd141d4
--- /dev/null
+++ b/frontend/app/shared/utils/structureAssignmentHelpers.ts
@@ -0,0 +1,258 @@
+/**
+ * Pure helper functions for building, validating and serializing
+ * component structure assignment trees.
+ *
+ * Extracted from useComponentCreate composable to keep file sizes manageable.
+ */
+
+import type { StructureAssignmentNode } from '~/components/ComponentStructureAssignmentNode.vue'
+import type {
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructure,
+  ComponentModelStructureNode,
+} from '~/shared/types/inventory'
+
+// ---------------------------------------------------------------------------
+// Extraction helpers
+// ---------------------------------------------------------------------------
+
+export function extractSubcomponents(
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelStructureNode[] {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).subcomponents)
+    ? (definition as any).subcomponents
+    : Array.isArray((definition as any).subComponents)
+      ? (definition as any).subComponents
+      : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelStructureNode =>
+      !!item && typeof item === 'object',
+  )
+}
+
+export function extractPiecesFromNode(
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelPiece[] {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).pieces)
+    ? (definition as any).pieces
+    : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelPiece =>
+      !!item && typeof item === 'object',
+  )
+}
+
+export function extractProductsFromNode(
+  definition: ComponentModelStructure | ComponentModelStructureNode | null | undefined,
+): ComponentModelProduct[] {
+  if (!definition || typeof definition !== 'object') {
+    return []
+  }
+  const raw = Array.isArray((definition as any).products)
+    ? (definition as any).products
+    : []
+  return raw.filter(
+    (item: unknown): item is ComponentModelProduct =>
+      !!item && typeof item === 'object',
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Assignment tree building
+// ---------------------------------------------------------------------------
+
+export function buildAssignmentNode(
+  definition: ComponentModelStructureNode | ComponentModelStructure,
+  path: string,
+): StructureAssignmentNode {
+  const pieces = extractPiecesFromNode(definition).map((piece, index) => ({
+    path: `${path}:piece-${index}`,
+    definition: piece,
+    selectedPieceId: '',
+  }))
+
+  const products = extractProductsFromNode(definition).map((product, index) => ({
+    path: `${path}:product-${index}`,
+    definition: product,
+    selectedProductId: '',
+  }))
+
+  const subcomponents = extractSubcomponents(definition).map(
+    (child, index) => buildAssignmentNode(child, `${path}:sub-${index}`),
+  )
+
+  return {
+    path,
+    definition,
+    selectedComponentId: '',
+    pieces,
+    products,
+    subcomponents,
+  }
+}
+
+export function initializeStructureAssignments(
+  structure: ComponentModelStructure | null,
+): StructureAssignmentNode | null {
+  if (!structure || typeof structure !== 'object') {
+    return null
+  }
+  return buildAssignmentNode(structure, 'root')
+}
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+export function hasAssignments(node: StructureAssignmentNode | null): boolean {
+  if (!node) {
+    return false
+  }
+  if (node.pieces.length > 0 || node.products.length > 0 || node.subcomponents.length > 0) {
+    return true
+  }
+  return node.subcomponents.some((child) => hasAssignments(child))
+}
+
+export function isAssignmentNodeComplete(
+  node: StructureAssignmentNode,
+  isRootNode = false,
+): boolean {
+  const piecesComplete = node.pieces.every(
+    (piece) => !!piece.selectedPieceId && piece.selectedPieceId.length > 0,
+  )
+  const productsComplete = node.products.every(
+    (product) => !!product.selectedProductId && product.selectedProductId.length > 0,
+  )
+  const subcomponentsComplete = node.subcomponents.every(
+    (child) =>
+      !!child.selectedComponentId
+      && child.selectedComponentId.length > 0
+      && isAssignmentNodeComplete(child, false),
+  )
+  return (
+    piecesComplete
+    && productsComplete
+    && subcomponentsComplete
+    && (isRootNode || !!node.selectedComponentId)
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Serialization
+// ---------------------------------------------------------------------------
+
+export function stripNullish(input: Record<string, any>) {
+  return Object.fromEntries(
+    Object.entries(input).filter(
+      ([, value]) => value !== null && value !== undefined && value !== '',
+    ),
+  )
+}
+
+export function sanitizeStructureDefinition(
+  definition: ComponentModelStructureNode,
+) {
+  return stripNullish({
+    alias: definition.alias ?? null,
+    typeComposantId: definition.typeComposantId ?? null,
+    typeComposantLabel: definition.typeComposantLabel ?? null,
+    modelId: definition.modelId ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+  })
+}
+
+export function sanitizePieceDefinition(definition: ComponentModelPiece) {
+  return stripNullish({
+    role: (definition as any).role ?? null,
+    typePieceId: definition.typePieceId ?? null,
+    typePieceLabel: definition.typePieceLabel ?? null,
+    reference: definition.reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+    quantity: typeof (definition as any).quantity === 'number' ? (definition as any).quantity : null,
+  })
+}
+
+export function sanitizeProductDefinition(definition: ComponentModelProduct) {
+  return stripNullish({
+    role: (definition as any).role ?? null,
+    typeProductId: definition.typeProductId ?? null,
+    typeProductLabel: (definition as any).typeProductLabel ?? null,
+    reference: (definition as any).reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
+  })
+}
+
+export function serializeStructureAssignments(
+  root: StructureAssignmentNode | null,
+) {
+  if (!root) {
+    return null
+  }
+
+  const serializeNode = (
+    assignment: StructureAssignmentNode,
+    isRootNode = false,
+  ): Record<string, any> => {
+    const serializedPieces = assignment.pieces
+      .filter((piece) => !!piece.selectedPieceId)
+      .map((piece) =>
+        stripNullish({
+          path: piece.path,
+          definition: sanitizePieceDefinition(piece.definition),
+          selectedPieceId: piece.selectedPieceId,
+        }),
+      )
+
+    const serializedProducts = assignment.products
+      .filter((product) => !!product.selectedProductId)
+      .map((product) =>
+        stripNullish({
+          path: product.path,
+          definition: sanitizeProductDefinition(product.definition),
+          selectedProductId: product.selectedProductId,
+        }),
+      )
+
+    const serializedSubcomponents = assignment.subcomponents
+      .map((child) => serializeNode(child, false))
+      .filter((child) => Object.keys(child).length > 0)
+
+    const base: Record<string, any> = {
+      path: assignment.path,
+      definition: sanitizeStructureDefinition(assignment.definition),
+    }
+
+    if (!isRootNode) {
+      base.selectedComponentId = assignment.selectedComponentId
+    }
+    if (serializedPieces.length) {
+      base.pieces = serializedPieces
+    }
+    if (serializedProducts.length) {
+      base.products = serializedProducts
+    }
+    if (serializedSubcomponents.length) {
+      base.subcomponents = serializedSubcomponents
+    }
+
+    return stripNullish(base)
+  }
+
+  const serializedRoot = serializeNode(root, true)
+  if (
+    (!serializedRoot.pieces || serializedRoot.pieces.length === 0)
+    && (!serializedRoot.products || serializedRoot.products.length === 0)
+    && (!serializedRoot.subcomponents || serializedRoot.subcomponents.length === 0)
+  ) {
+    return null
+  }
+  return serializedRoot
+}
diff --git a/frontend/app/shared/utils/structureAssignmentLabels.ts b/frontend/app/shared/utils/structureAssignmentLabels.ts
new file mode 100644
index 0000000..499e4ac
--- /dev/null
+++ b/frontend/app/shared/utils/structureAssignmentLabels.ts
@@ -0,0 +1,262 @@
+/**
+ * Type definitions and pure label/description helpers for structure assignments.
+ *
+ * Extracted from composables/useStructureAssignmentFetch.ts to keep files
+ * under 500 lines. These are stateless utilities that do not depend on Vue
+ * reactivity or API fetching.
+ */
+
+import type {
+  ComponentModelPiece,
+  ComponentModelProduct,
+  ComponentModelStructureNode,
+} from '~/shared/types/inventory'
+
+// ---------------------------------------------------------------------------
+// Option types
+// ---------------------------------------------------------------------------
+
+export interface ComponentOption {
+  id: string
+  name?: string | null
+  reference?: string | null
+  typeComposantId?: string | null
+  typeComposant?: {
+    id: string
+    name?: string | null
+    code?: string | null
+  } | null
+}
+
+export interface PieceOption {
+  id: string
+  name?: string | null
+  reference?: string | null
+  typePieceId?: string | null
+  typePiece?: {
+    id: string
+    name?: string | null
+    code?: string | null
+  } | null
+}
+
+export interface ProductOption {
+  id: string
+  name?: string | null
+  reference?: string | null
+  typeProductId?: string | null
+  typeProduct?: {
+    id: string
+    name?: string | null
+    code?: string | null
+  } | null
+}
+
+// ---------------------------------------------------------------------------
+// Assignment node types
+// ---------------------------------------------------------------------------
+
+export interface StructurePieceAssignment {
+  path: string
+  definition: ComponentModelPiece
+  selectedPieceId: string
+}
+
+export interface StructureProductAssignment {
+  path: string
+  definition: ComponentModelProduct
+  selectedProductId: string
+}
+
+export interface StructureAssignmentNode {
+  path: string
+  definition: ComponentModelStructureNode
+  selectedComponentId: string
+  pieces: StructurePieceAssignment[]
+  products: StructureProductAssignment[]
+  subcomponents: StructureAssignmentNode[]
+}
+
+// ---------------------------------------------------------------------------
+// Component label helpers
+// ---------------------------------------------------------------------------
+
+export const componentOptionLabel = (component?: ComponentOption | null): string => {
+  if (!component) {
+    return 'Composant sans nom'
+  }
+  const name = component.name || 'Composant sans nom'
+  return component.reference ? `${name} — ${component.reference}` : name
+}
+
+export const componentOptionDescription = (component?: ComponentOption | null): string => {
+  if (!component) {
+    return ''
+  }
+  const parts: string[] = []
+  const typeLabel =
+    component.typeComposant?.name || component.typeComposant?.code || null
+  if (typeLabel) {
+    parts.push(typeLabel)
+  }
+  if (component.reference) {
+    parts.push(`Ref. ${component.reference}`)
+  }
+  return parts.join(' \u2022 ')
+}
+
+// ---------------------------------------------------------------------------
+// Piece label helpers
+// ---------------------------------------------------------------------------
+
+export const pieceOptionLabel = (piece?: PieceOption | null): string => {
+  if (!piece) {
+    return 'Pièce'
+  }
+  const name = piece.name || 'Pièce'
+  return piece.reference ? `${name} — ${piece.reference}` : name
+}
+
+export const pieceOptionDescription = (piece?: PieceOption | null): string => {
+  if (!piece) {
+    return ''
+  }
+  const parts: string[] = []
+  const typeLabel =
+    piece.typePiece?.name || piece.typePiece?.code || null
+  if (typeLabel) {
+    parts.push(typeLabel)
+  }
+  if (piece.reference) {
+    parts.push(`Ref. ${piece.reference}`)
+  }
+  return parts.join(' \u2022 ')
+}
+
+// ---------------------------------------------------------------------------
+// Product label helpers
+// ---------------------------------------------------------------------------
+
+export const productOptionLabel = (product?: ProductOption | null): string => {
+  if (!product) {
+    return 'Produit'
+  }
+  const name = product.name || 'Produit'
+  return product.reference ? `${name} — ${product.reference}` : name
+}
+
+export const productOptionDescription = (product?: ProductOption | null): string => {
+  if (!product) {
+    return ''
+  }
+  const parts: string[] = []
+  const typeLabel =
+    product.typeProduct?.name || product.typeProduct?.code || null
+  if (typeLabel) {
+    parts.push(typeLabel)
+  }
+  if (product.reference) {
+    parts.push(`Ref. ${product.reference}`)
+  }
+  return parts.join(' \u2022 ')
+}
+
+// ---------------------------------------------------------------------------
+// Requirement description helpers
+// ---------------------------------------------------------------------------
+
+export const describePieceRequirement = (
+  assignment: StructurePieceAssignment,
+  options: PieceOption[],
+  pieceTypeLabelMap: Record<string, string>,
+): string => {
+  const definition = assignment.definition
+  const parts: string[] = []
+  const addPart = (value?: string | null) => {
+    const trimmed = typeof value === 'string' ? value.trim() : ''
+    if (trimmed && !parts.includes(trimmed)) {
+      parts.push(trimmed)
+    }
+  }
+
+  const fallbackPiece = options[0] || null
+  const fallbackType = fallbackPiece?.typePiece || null
+
+  addPart(definition.role)
+  const explicitLabel =
+    definition.typePieceLabel
+    || definition.typePiece?.name
+    || (definition.typePieceId ? pieceTypeLabelMap[definition.typePieceId] : null)
+    || fallbackType?.name
+  addPart(explicitLabel)
+
+  const family =
+    definition.familyCode
+    || definition.typePiece?.code
+    || fallbackType?.code
+    || null
+  if (family) {
+    addPart(`Famille ${family}`)
+  }
+
+  if (parts.length === 0) {
+    addPart(fallbackType?.name)
+    if (fallbackType?.code) {
+      addPart(`Famille ${fallbackType.code}`)
+    }
+  }
+
+  if (parts.length === 0 && definition.typePieceId) {
+    addPart(`#${definition.typePieceId}`)
+  }
+
+  return parts.length ? parts.join(' \u2022 ') : 'Pi\u00e8ce du squelette'
+}
+
+export const describeProductRequirement = (
+  assignment: StructureProductAssignment,
+  options: ProductOption[],
+  productTypeLabelMap: Record<string, string>,
+): string => {
+  const definition = assignment.definition
+  const parts: string[] = []
+  const addPart = (value?: string | null) => {
+    const trimmed = typeof value === 'string' ? value.trim() : ''
+    if (trimmed && !parts.includes(trimmed)) {
+      parts.push(trimmed)
+    }
+  }
+
+  const fallbackProduct = options[0] || null
+  const fallbackType = fallbackProduct?.typeProduct || null
+
+  addPart(definition.role)
+  const explicitLabel =
+    definition.typeProductLabel
+    || definition.typeProduct?.name
+    || (definition.typeProductId ? productTypeLabelMap[definition.typeProductId] : null)
+    || fallbackType?.name
+  addPart(explicitLabel)
+
+  const family =
+    definition.familyCode
+    || definition.typeProduct?.code
+    || fallbackType?.code
+    || null
+  if (family) {
+    addPart(`Famille ${family}`)
+  }
+
+  if (parts.length === 0) {
+    addPart(fallbackType?.name)
+    if (fallbackType?.code) {
+      addPart(`Famille ${fallbackType.code}`)
+    }
+  }
+
+  if (parts.length === 0 && definition.typeProductId) {
+    addPart(`#${definition.typeProductId}`)
+  }
+
+  return parts.length ? parts.join(' \u2022 ') : 'Produit du squelette'
+}
diff --git a/frontend/app/shared/utils/structureDisplayUtils.ts b/frontend/app/shared/utils/structureDisplayUtils.ts
new file mode 100644
index 0000000..9988af5
--- /dev/null
+++ b/frontend/app/shared/utils/structureDisplayUtils.ts
@@ -0,0 +1,157 @@
+/**
+ * Shared helpers for displaying component/machine structure skeleton details.
+ *
+ * Extracted from pages/component/create.vue and pages/component/[id]/edit.vue
+ * where these functions were duplicated verbatim.
+ */
+
+// ---------------------------------------------------------------------------
+// Structure accessors
+// ---------------------------------------------------------------------------
+
+type StructureLike = Record<string, any> | null
+
+export const getStructureCustomFields = (structure: StructureLike): any[] => {
+  return Array.isArray(structure?.customFields) ? structure.customFields : []
+}
+
+export const getStructurePieces = (structure: StructureLike): any[] => {
+  return Array.isArray(structure?.pieces) ? structure.pieces : []
+}
+
+export const getStructureProducts = (structure: StructureLike): any[] => {
+  return Array.isArray(structure?.products) ? structure.products : []
+}
+
+export const getStructureSubcomponents = (structure: StructureLike): any[] => {
+  if (Array.isArray(structure?.subcomponents)) {
+    return structure.subcomponents
+  }
+  const legacy = (structure as any)?.subComponents
+  return Array.isArray(legacy) ? legacy : []
+}
+
+// ---------------------------------------------------------------------------
+// Label resolvers
+// ---------------------------------------------------------------------------
+
+export const resolvePieceLabel = (
+  piece: Record<string, any>,
+  labelMap: Record<string, string> = {},
+): string => {
+  const parts: string[] = []
+  if (piece.role) {
+    parts.push(piece.role)
+  }
+  if (piece.typePiece?.name) {
+    parts.push(piece.typePiece.name)
+  } else if (piece.typePieceLabel) {
+    parts.push(piece.typePieceLabel)
+  } else if (piece.typePieceId && labelMap[piece.typePieceId]) {
+    parts.push(labelMap[piece.typePieceId]!)
+  } else if (piece.typePiece?.code) {
+    parts.push(`Famille ${piece.typePiece.code}`)
+  } else if (piece.familyCode) {
+    parts.push(`Famille ${piece.familyCode}`)
+  } else if (piece.typePieceId) {
+    parts.push(`#${piece.typePieceId}`)
+  }
+  return parts.length ? parts.join(' • ') : 'Pièce'
+}
+
+export const resolveProductLabel = (
+  product: Record<string, any>,
+  labelMap: Record<string, string> = {},
+): string => {
+  const parts: string[] = []
+  if (product.role) {
+    parts.push(product.role)
+  }
+  if (product.typeProduct?.name) {
+    parts.push(product.typeProduct.name)
+  } else if (product.typeProductLabel) {
+    parts.push(product.typeProductLabel)
+  } else if (product.typeProductId && labelMap[product.typeProductId]) {
+    parts.push(labelMap[product.typeProductId]!)
+  } else if (product.typeProduct?.code) {
+    parts.push(`Catégorie ${product.typeProduct.code}`)
+  } else if (product.familyCode) {
+    parts.push(`Catégorie ${product.familyCode}`)
+  } else if (product.typeProductId) {
+    parts.push(`#${product.typeProductId}`)
+  }
+  return parts.length ? parts.join(' • ') : 'Produit'
+}
+
+export const resolveSubcomponentLabel = (node: Record<string, any>): string => {
+  const parts: string[] = []
+  if (node.alias) {
+    parts.push(node.alias)
+  }
+  if (node.typeComposant?.name) {
+    parts.push(node.typeComposant.name)
+  } else if (node.typeComposantLabel) {
+    parts.push(node.typeComposantLabel)
+  } else if (node.familyCode) {
+    parts.push(node.familyCode)
+  } else if (node.typeComposantId) {
+    parts.push(`#${node.typeComposantId}`)
+  }
+
+  const childCount = Array.isArray(node.subcomponents)
+    ? node.subcomponents.length
+    : Array.isArray(node.subComponents)
+      ? node.subComponents.length
+      : 0
+  if (childCount) {
+    parts.push(`${childCount} sous-composant(s)`)
+  }
+  return parts.length ? parts.join(' • ') : 'Sous-composant'
+}
+
+// ---------------------------------------------------------------------------
+// Generic model type name fetcher (replaces fetchPieceTypeNames / fetchProductTypeNames)
+// ---------------------------------------------------------------------------
+
+export const fetchModelTypeNames = async (
+  ids: string[],
+  existingMap: Record<string, string>,
+  get: (url: string) => Promise<{ success?: boolean; data?: any }>,
+): Promise<Record<string, string>> => {
+  const missing = ids.filter((id) => id && !existingMap[id])
+  if (!missing.length) {
+    return {}
+  }
+  const results = await Promise.allSettled(
+    missing.map((id) => get(`/model_types/${id}`)),
+  )
+  const additions: Record<string, string> = {}
+  results.forEach((result, index) => {
+    const key = missing[index]
+    if (!key || result.status !== 'fulfilled') {
+      return
+    }
+    const data = result.value?.data
+    const name = data?.name || data?.code
+    if (name) {
+      additions[key] = name
+    }
+  })
+  return additions
+}
+
+// ---------------------------------------------------------------------------
+// Type label map builder
+// ---------------------------------------------------------------------------
+
+export const buildTypeLabelMap = (
+  types: any[],
+  fetchedOverrides: Record<string, string> = {},
+): Record<string, string> => ({
+  ...Object.fromEntries(
+    (types || [])
+      .filter((type: any) => type?.id)
+      .map((type: any) => [type.id, type.name || type.code || '']),
+  ),
+  ...fetchedOverrides,
+})
diff --git a/frontend/app/shared/utils/structureSelectionUtils.ts b/frontend/app/shared/utils/structureSelectionUtils.ts
new file mode 100644
index 0000000..3eae918
--- /dev/null
+++ b/frontend/app/shared/utils/structureSelectionUtils.ts
@@ -0,0 +1,113 @@
+export type SelectionEntry = {
+  id: string
+  path: string
+  requirementLabel: string
+  resolvedName: string
+  quantity?: number
+  slotId?: string
+  _definition?: Record<string, any>
+}
+
+export type StructureSelectionResult = {
+  pieces: SelectionEntry[]
+  products: SelectionEntry[]
+  components: SelectionEntry[]
+}
+
+type CatalogMap = Map<string, { name?: string, [key: string]: any }>
+
+type LabelResolvers = {
+  resolvePieceLabel: (definition: Record<string, any>) => string
+  resolveProductLabel: (definition: Record<string, any>) => string
+  resolveSubcomponentLabel: (definition: Record<string, any>) => string
+}
+
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0
+
+export function collectStructureSelections(
+  root: any,
+  catalogs: {
+    pieceCatalogMap: CatalogMap
+    productCatalogMap: CatalogMap
+    componentCatalogMap: CatalogMap
+  },
+  resolvers: LabelResolvers,
+): StructureSelectionResult {
+  const piecesSelected: SelectionEntry[] = []
+  const productsSelected: SelectionEntry[] = []
+  const componentsSelected: SelectionEntry[] = []
+
+  if (!root || typeof root !== 'object') {
+    return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
+  }
+
+  const visitNode = (node: any, fallbackPath = 'racine') => {
+    if (!node || typeof node !== 'object') {
+      return
+    }
+
+    const nodePath = isNonEmptyString(node.path) ? node.path : fallbackPath
+
+    const nodePieces = Array.isArray(node.pieces) ? node.pieces : []
+    nodePieces.forEach((entry: any, index: number) => {
+      const selectedId = entry?.selectedPieceId
+      if (!isNonEmptyString(selectedId)) {
+        return
+      }
+      const definition = entry?.definition ?? entry
+      const catalogPiece = catalogs.pieceCatalogMap.get(selectedId)
+      piecesSelected.push({
+        id: selectedId,
+        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:piece-${index + 1}`,
+        requirementLabel: resolvers.resolvePieceLabel(definition),
+        resolvedName: catalogPiece?.name || selectedId,
+        quantity: typeof definition?.quantity === 'number' ? definition.quantity : undefined,
+        slotId: isNonEmptyString(entry?.slotId) ? entry.slotId : undefined,
+        _definition: definition,
+      })
+    })
+
+    const nodeProducts = Array.isArray(node.products) ? node.products : []
+    nodeProducts.forEach((entry: any, index: number) => {
+      const selectedId = entry?.selectedProductId
+      if (!isNonEmptyString(selectedId)) {
+        return
+      }
+      const definition = entry?.definition ?? entry
+      const catalogProduct = catalogs.productCatalogMap.get(selectedId)
+      productsSelected.push({
+        id: selectedId,
+        path: isNonEmptyString(entry?.path) ? entry.path : `${nodePath}:product-${index + 1}`,
+        requirementLabel: resolvers.resolveProductLabel(definition),
+        resolvedName: catalogProduct?.name || selectedId,
+      })
+    })
+
+    const nodeChildren = Array.isArray(node.subcomponents)
+      ? node.subcomponents
+      : Array.isArray(node.subComponents)
+        ? node.subComponents
+        : []
+
+    nodeChildren.forEach((child: any, index: number) => {
+      const selectedId = child?.selectedComponentId
+      if (isNonEmptyString(selectedId)) {
+        const definition = child?.definition ?? child
+        const catalogComponent = catalogs.componentCatalogMap.get(selectedId)
+        componentsSelected.push({
+          id: selectedId,
+          path: isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`,
+          requirementLabel: resolvers.resolveSubcomponentLabel(definition),
+          resolvedName: catalogComponent?.name || selectedId,
+        })
+      }
+
+      visitNode(child, isNonEmptyString(child?.path) ? child.path : `${nodePath}:subcomponent-${index + 1}`)
+    })
+  }
+
+  visitNode(root, isNonEmptyString(root?.path) ? root.path : 'racine')
+
+  return { pieces: piecesSelected, products: productsSelected, components: componentsSelected }
+}
diff --git a/frontend/app/shared/validation/email.ts b/frontend/app/shared/validation/email.ts
new file mode 100644
index 0000000..f2ea100
--- /dev/null
+++ b/frontend/app/shared/validation/email.ts
@@ -0,0 +1,34 @@
+import { normalizeEmail } from '~/utils/formatters/email'
+
+const EMAIL_VALIDATION_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+export const EMAIL_INPUT_PATTERN = EMAIL_VALIDATION_PATTERN.source
+
+export type EmailValidationResult = {
+  valid: boolean
+  error?: string
+}
+
+export const EMAIL_VALIDATION_ERROR = 'Adresse email invalide'
+
+/**
+ * Minimal email schema to align validation logic across the UI.
+ */
+export const emailSchema = {
+  pattern: EMAIL_VALIDATION_PATTERN,
+  message: EMAIL_VALIDATION_ERROR,
+  validate(value: string): EmailValidationResult {
+    const normalized = normalizeEmail(value)
+    if (!normalized) {
+      return { valid: true }
+    }
+
+    if (EMAIL_VALIDATION_PATTERN.test(normalized)) {
+      return { valid: true }
+    }
+
+    return { valid: false, error: EMAIL_VALIDATION_ERROR }
+  },
+}
+
+export const isEmailValid = (value: string): boolean => emailSchema.validate(value).valid
diff --git a/frontend/app/shared/validation/phone.ts b/frontend/app/shared/validation/phone.ts
new file mode 100644
index 0000000..b656b13
--- /dev/null
+++ b/frontend/app/shared/validation/phone.ts
@@ -0,0 +1,36 @@
+import { normalizePhone } from '~/utils/formatters/phone'
+
+/** Pattern used for the HTML input `pattern` attribute on phone fields. */
+export const PHONE_INPUT_PATTERN = '[0-9+ .]*'
+
+const PHONE_VALIDATION_PATTERN = /^\+?\d{7,15}$/
+
+export type PhoneValidationResult = {
+  valid: boolean
+  error?: string
+}
+
+export const PHONE_VALIDATION_ERROR = 'Numéro de téléphone invalide'
+
+/**
+ * Lightweight phone schema mirroring the API used across the app.
+ */
+export const phoneSchema = {
+  pattern: PHONE_VALIDATION_PATTERN,
+  message: PHONE_VALIDATION_ERROR,
+  validate(value: string): PhoneValidationResult {
+    const normalized = normalizePhone(value)
+    if (!normalized) {
+      // Empty values are considered valid; required-ness is handled by the caller.
+      return { valid: true }
+    }
+
+    if (PHONE_VALIDATION_PATTERN.test(normalized)) {
+      return { valid: true }
+    }
+
+    return { valid: false, error: PHONE_VALIDATION_ERROR }
+  },
+}
+
+export const isPhoneValid = (value: string): boolean => phoneSchema.validate(value).valid
diff --git a/frontend/app/types/icons.d.ts b/frontend/app/types/icons.d.ts
new file mode 100644
index 0000000..c76cac1
--- /dev/null
+++ b/frontend/app/types/icons.d.ts
@@ -0,0 +1,14 @@
+// Type declarations for unplugin-icons
+// This allows TypeScript to understand icon imports from ~icons/*
+
+declare module '~icons/*' {
+  import type { FunctionalComponent, SVGAttributes } from 'vue'
+  const component: FunctionalComponent<SVGAttributes>
+  export default component
+}
+
+declare module '~icons/lucide/*' {
+  import type { FunctionalComponent, SVGAttributes } from 'vue'
+  const component: FunctionalComponent<SVGAttributes>
+  export default component
+}
diff --git a/frontend/app/utils/date.ts b/frontend/app/utils/date.ts
new file mode 100644
index 0000000..756dfee
--- /dev/null
+++ b/frontend/app/utils/date.ts
@@ -0,0 +1,22 @@
+/**
+ * Formatte une date en respectant les conventions françaises (jj/mm/aaaa).
+ * Retourne "—" si la valeur est invalide ou absente.
+ */
+const frenchDateFormatter = new Intl.DateTimeFormat('fr-FR', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+})
+
+export const formatFrenchDate = (value: Date | string | number | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '—'
+  }
+
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return '—'
+  }
+
+  return frenchDateFormatter.format(date)
+}
diff --git a/frontend/app/utils/documentPreview.js b/frontend/app/utils/documentPreview.js
new file mode 100644
index 0000000..8fe2569
--- /dev/null
+++ b/frontend/app/utils/documentPreview.js
@@ -0,0 +1,29 @@
+import { getFileIcon } from './fileIcons'
+
+export const getPreviewType = (document) => {
+  if (!document) { return null }
+  const mime = (document.mimeType || '').toLowerCase()
+
+  if (mime.startsWith('image/')) { return 'image' }
+  if (mime === 'application/pdf') { return 'pdf' }
+  if (mime.startsWith('audio/')) { return 'audio' }
+  if (mime.startsWith('video/')) { return 'video' }
+  if (mime.startsWith('text/') || mime.includes('json') || mime.includes('xml')) { return 'text' }
+  return null
+}
+
+export const canPreviewDocument = (document = {}) => {
+  if (!getPreviewType(document)) return false
+  return !!(document.fileUrl || document.path)
+}
+
+export const isImageDocument = (document = {}) => getPreviewType(document) === 'image'
+
+export const isPdfDocument = (document = {}) => getPreviewType(document) === 'pdf'
+
+export const describeDocument = (document) => {
+  if (!document) { return '' }
+  const name = document.filename || document.name || ''
+  const icon = getFileIcon({ name, mime: document.mimeType })
+  return icon.label
+}
diff --git a/frontend/app/utils/events.ts b/frontend/app/utils/events.ts
new file mode 100644
index 0000000..d501d93
--- /dev/null
+++ b/frontend/app/utils/events.ts
@@ -0,0 +1,41 @@
+/**
+ * Type-safe event handlers for form inputs.
+ * These helpers extract values from DOM events in a way that satisfies TypeScript.
+ */
+
+/**
+ * Extract the string value from an input event.
+ */
+export const getInputValue = (event: Event): string => {
+  const target = event.target as HTMLInputElement | null
+  return target?.value ?? ''
+}
+
+/**
+ * Extract the numeric value from an input event.
+ */
+export const getInputNumber = (event: Event): number => {
+  const target = event.target as HTMLInputElement | null
+  const value = target?.value ?? ''
+  const parsed = parseFloat(value)
+  return Number.isNaN(parsed) ? 0 : parsed
+}
+
+/**
+ * Extract the checked state from a checkbox event.
+ */
+export const getCheckboxValue = (event: Event): boolean => {
+  const target = event.target as HTMLInputElement | null
+  return target?.checked ?? false
+}
+
+/**
+ * Extract an optional numeric value from an input event (empty string = undefined).
+ */
+export const getOptionalNumber = (event: Event): number | undefined => {
+  const target = event.target as HTMLInputElement | null
+  const value = target?.value ?? ''
+  if (value.trim() === '') return undefined
+  const parsed = parseFloat(value)
+  return Number.isNaN(parsed) ? undefined : parsed
+}
diff --git a/frontend/app/utils/fileIcons.js b/frontend/app/utils/fileIcons.js
new file mode 100644
index 0000000..446ca0d
--- /dev/null
+++ b/frontend/app/utils/fileIcons.js
@@ -0,0 +1,120 @@
+import IconFile from '~icons/lucide/file'
+import IconFileType from '~icons/lucide/file-type'
+import IconFileText from '~icons/lucide/file-text'
+import IconFileSpreadsheet from '~icons/lucide/file-spreadsheet'
+import IconPresentation from '~icons/lucide/presentation'
+import IconImage from '~icons/lucide/image'
+import IconArchive from '~icons/lucide/archive'
+import IconFileAudio2 from '~icons/lucide/file-audio-2'
+import IconFileVideo2 from '~icons/lucide/file-video-2'
+import IconFileCode from '~icons/lucide/file-code'
+
+const iconMap = [
+  {
+    label: 'PDF',
+    exts: ['pdf'],
+    component: IconFileType,
+    colorClass: 'text-red-500'
+  },
+  {
+    label: 'Word',
+    exts: ['doc', 'docx'],
+    component: IconFileText,
+    colorClass: 'text-blue-500'
+  },
+  {
+    label: 'Excel',
+    exts: ['xls', 'xlsx', 'csv'],
+    component: IconFileSpreadsheet,
+    colorClass: 'text-green-500'
+  },
+  {
+    label: 'PowerPoint',
+    exts: ['ppt', 'pptx'],
+    component: IconPresentation,
+    colorClass: 'text-orange-500'
+  },
+  {
+    label: 'Image',
+    exts: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'heic'],
+    component: IconImage,
+    colorClass: 'text-purple-500'
+  },
+  {
+    label: 'Archive',
+    exts: ['zip', 'rar', '7z', 'tar', 'gz'],
+    component: IconArchive,
+    colorClass: 'text-amber-500'
+  },
+  {
+    label: 'Audio',
+    exts: ['mp3', 'wav', 'ogg', 'flac', 'aac'],
+    component: IconFileAudio2,
+    colorClass: 'text-pink-500'
+  },
+  {
+    label: 'Vidéo',
+    exts: ['mp4', 'mov', 'avi', 'mkv', 'webm'],
+    component: IconFileVideo2,
+    colorClass: 'text-indigo-500'
+  },
+  {
+    label: 'Texte',
+    exts: ['txt', 'md', 'rtf'],
+    component: IconFileText,
+    colorClass: 'text-gray-500'
+  },
+  {
+    label: 'Code',
+    exts: ['json', 'xml', 'yml', 'yaml', 'js', 'ts', 'py', 'java', 'cs'],
+    component: IconFileCode,
+    colorClass: 'text-sky-500'
+  }
+]
+
+const mimeGroups = [
+  { prefix: 'image/', component: IconImage, colorClass: 'text-purple-500', label: 'Image' },
+  { prefix: 'video/', component: IconFileVideo2, colorClass: 'text-indigo-500', label: 'Vidéo' },
+  { prefix: 'audio/', component: IconFileAudio2, colorClass: 'text-pink-500', label: 'Audio' },
+  { prefix: 'text/', component: IconFileText, colorClass: 'text-gray-500', label: 'Texte' },
+  { prefix: 'application/pdf', component: IconFileType, colorClass: 'text-red-500', label: 'PDF' },
+  { prefix: 'application/zip', component: IconArchive, colorClass: 'text-amber-500', label: 'Archive' },
+  { prefix: 'application/x-', component: IconArchive, colorClass: 'text-amber-500', label: 'Archive' }
+]
+
+export const getFileIcon = ({ name = '', mime = '' } = {}) => {
+  const extension = name.split('.').pop()?.toLowerCase() || ''
+
+  if (extension) {
+    const match = iconMap.find(entry => entry.exts.includes(extension))
+    if (match) {
+      return {
+        component: match.component,
+        colorClass: match.colorClass,
+        label: match.label
+      }
+    }
+  }
+
+  if (mime) {
+    const match = mimeGroups.find(entry => mime.startsWith(entry.prefix))
+    if (match) {
+      return {
+        component: match.component,
+        colorClass: match.colorClass,
+        label: match.label || mime
+      }
+    }
+  }
+
+  return {
+    component: IconFile,
+    colorClass: 'text-primary',
+    label: 'Document'
+  }
+}
+
+export const describeFileType = ({ name = '', mime = '' } = {}) => {
+  const icon = getFileIcon({ name, mime })
+  return icon.label
+}
diff --git a/frontend/app/utils/formatters/email.ts b/frontend/app/utils/formatters/email.ts
new file mode 100644
index 0000000..21d7c5b
--- /dev/null
+++ b/frontend/app/utils/formatters/email.ts
@@ -0,0 +1,39 @@
+/**
+ * Basic helpers around email formatting shared across components and composables.
+ */
+
+/**
+ * Normalises an email by trimming whitespace and converting it to lowercase.
+ */
+export const normalizeEmail = (rawValue: string): string => {
+  const value = (rawValue || '').trim()
+  return value.toLowerCase()
+}
+
+/**
+ * Masks an email address by hiding the characters between the first and last letters
+ * of the local part. Useful for UI fragments where we want partial obfuscation.
+ */
+export const maskEmail = (rawValue: string): string => {
+  const value = normalizeEmail(rawValue)
+  if (!value) {
+    return ''
+  }
+
+  const parts = value.split('@')
+  const localPart = parts[0] ?? ''
+  const domain = parts[1]
+  if (!domain || !localPart) {
+    return value
+  }
+
+  if (localPart.length <= 2) {
+    return `${localPart[0] ?? ''}·@${domain}`
+  }
+
+  const start = localPart[0] ?? ''
+  const end = localPart.slice(-1)
+  const masked = '·'.repeat(Math.max(0, localPart.length - 2))
+
+  return `${start}${masked}${end}@${domain}`
+}
diff --git a/frontend/app/utils/formatters/phone.ts b/frontend/app/utils/formatters/phone.ts
new file mode 100644
index 0000000..c770e8c
--- /dev/null
+++ b/frontend/app/utils/formatters/phone.ts
@@ -0,0 +1,90 @@
+/**
+ * Utilities to normalize and format phone numbers without relying on external libraries.
+ * The helpers keep the behaviour permissive to avoid breaking existing flows while
+ * still providing a single place where formatting rules live.
+ */
+
+/** Matches characters that should be kept when normalising a phone number. */
+const PHONE_CHAR_PATTERN = /[^+\d]/g
+
+/**
+ * Normalises a phone number by trimming whitespace, removing spacing/separators and
+ * converting international prefixes written with `00` to their `+` variant.
+ */
+export const normalizePhone = (rawValue: string | null | undefined): string => {
+  const trimmed = typeof rawValue === 'string' ? rawValue.trim() : ''
+  if (!trimmed) {
+    return ''
+  }
+
+  const cleaned = trimmed.replace(PHONE_CHAR_PATTERN, '')
+  if (cleaned.startsWith('00')) {
+    return `+${cleaned.slice(2)}`
+  }
+
+  return cleaned
+}
+
+/**
+ * Formats a phone number by grouping digits by two and joining them with dots while
+ * keeping any international prefix. The function remains tolerant to partially
+ * entered numbers and returns an empty string for nullish inputs.
+ */
+export const formatPhone = (rawValue: string | null | undefined): string => {
+  if (rawValue == null) {
+    return ''
+  }
+
+  const normalized = normalizePhone(rawValue)
+  if (!normalized) {
+    return ''
+  }
+
+  if (normalized.startsWith('+33')) {
+    let nationalNumber = normalized.slice(3)
+    if (nationalNumber.startsWith('0')) {
+      nationalNumber = nationalNumber.slice(1)
+    }
+
+    if (nationalNumber.length % 2 !== 0) {
+      nationalNumber = `0${nationalNumber}`
+    }
+
+    const groups = nationalNumber.match(/\d{1,2}/g) ?? []
+    if (groups.length === 0) {
+      return '+33'
+    }
+
+    return ['+33', ...groups].join('.')
+  }
+
+  const hasInternationalPrefix = normalized.startsWith('+')
+  const prefix = hasInternationalPrefix ? normalized.slice(0, 1) : ''
+  const digits = hasInternationalPrefix ? normalized.slice(1) : normalized
+
+  const groups = digits.match(/\d{1,2}/g) ?? []
+  const grouped = groups.join('.')
+
+  return prefix ? `${prefix}${grouped}` : grouped
+}
+
+/**
+ * Masks a phone number for display purposes by replacing the middle digits with ·.
+ * Useful for UI fragments where the full number should not be exposed.
+ */
+export const maskPhone = (rawValue: string | null | undefined): string => {
+  const normalized = normalizePhone(rawValue)
+  if (!normalized) {
+    return ''
+  }
+
+  if (normalized.length <= 4) {
+    return normalized
+  }
+
+  const start = normalized.slice(0, 2)
+  const end = normalized.slice(-2)
+  const maskedMiddle = '·'.repeat(Math.max(0, normalized.length - 4))
+
+  return `${start}${maskedMiddle}${end}`
+}
diff --git a/frontend/app/utils/printTemplates/machineReport.js b/frontend/app/utils/printTemplates/machineReport.js
new file mode 100644
index 0000000..be769fc
--- /dev/null
+++ b/frontend/app/utils/printTemplates/machineReport.js
@@ -0,0 +1,745 @@
+import {
+  uniqueConstructeurIds,
+  resolveConstructeurs,
+  formatConstructeurContact,
+} from '~/shared/constructeurUtils'
+
+const currencyFormatter = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  currencyDisplay: 'narrowSymbol',
+})
+
+const formatCurrency = (value) => {
+  if (value === undefined || value === null || value === '') {
+    return null
+  }
+  const number = Number(value)
+  if (Number.isNaN(number)) {
+    return null
+  }
+  return currencyFormatter.format(number)
+}
+
+const formatSize = (size) => {
+  if (size === undefined || size === null) { return '—' }
+  if (size === 0) { return '0 B' }
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+
+const renderPrintField = (label, value, fallback = '—') => {
+  const display = value !== undefined && value !== null && value !== '' ? value : fallback
+  return `<div class="print-field"><label>${label}</label><span>${display}</span></div>`
+}
+
+const renderPrintCustomFields = (fields = [], title, sectionClass = 'print-section') => {
+  if (!fields.length) { return '' }
+  const items = fields
+    .map(field => `<div class="print-field"><label>${field.label}</label><span>${field.value || '—'}</span></div>`)
+    .join('')
+  return `
+    <div class="${sectionClass}">
+      <h3>${title}</h3>
+      <div class="print-grid">
+        ${items}
+      </div>
+    </div>
+  `
+}
+
+const renderPrintDocuments = (documents = [], title, sectionClass = 'print-section') => {
+  if (!documents.length) { return '' }
+  const rows = documents
+    .map(doc => `<tr><td>${doc.name}</td><td>${doc.type}</td><td>${doc.size}</td></tr>`)
+    .join('')
+  return `
+    <div class="${sectionClass}">
+      <h3>${title}</h3>
+      <table class="print-table">
+        <thead>
+          <tr>
+            <th>Nom</th>
+            <th>Type</th>
+            <th>Taille</th>
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+    </div>
+  `
+}
+
+const renderPrintProductSummary = (product, title = 'Produit catalogue', sectionClass = 'print-piece-section') => {
+  if (!product) { return '' }
+
+  const infoEntries = [
+    { label: 'Nom', value: product.name || '—' },
+    { label: 'Référence', value: product.reference || '—' },
+    { label: 'Catégorie', value: product.typeName || '—' },
+    {
+      label: 'Prix indicatif',
+      value: product.supplierPrice || '—',
+    },
+    {
+      label: 'Fournisseur(s)',
+      value: product.constructeurs?.length
+        ? product.constructeurs.map((constructeur) => constructeur.name).filter(Boolean).join(', ') || '—'
+        : '—',
+    },
+  ]
+
+  const infoMarkup = infoEntries
+    .map((field) => `<div class="print-field"><label>${field.label}</label><span>${field.value || '—'}</span></div>`)
+    .join('')
+
+  const customFieldsBlock = product.customFields?.length
+    ? renderPrintCustomFields(product.customFields, 'Champs personnalisés du produit', 'print-subsection')
+    : ''
+
+  const documentsBlock = product.documents?.length
+    ? renderPrintDocuments(product.documents, 'Documents du produit', 'print-subsection')
+    : ''
+
+  return `
+    <div class="${sectionClass}">
+      <h4>${title}</h4>
+      <div class="print-grid">
+        ${infoMarkup}
+      </div>
+      ${customFieldsBlock}
+      ${documentsBlock}
+    </div>
+  `
+}
+
+const renderPrintPieces = (
+  pieces = [],
+  title = 'Pièces indépendantes',
+  sectionClass = 'print-section print-section--pieces'
+) => {
+  if (!pieces.length) { return '' }
+
+  const cards = pieces
+    .map((piece, idx) => {
+      const indexLabel = piece.indexPath ? piece.indexPath.join('.') : `${idx + 1}`
+      const constructeurBadges = (piece.constructeurs || [])
+        .map((constructeur, badgeIdx) => {
+          const suffix = piece.constructeurs.length > 1 ? ` ${badgeIdx + 1}` : ''
+          return `<span class="print-badge print-badge--subtle">Fournisseur${suffix}: ${constructeur.name}</span>`
+        })
+        .join('')
+
+      const customFields = (piece.customFields || [])
+        .filter(field => field.value && field.value !== '—' && field.value !== '')
+        .map(
+          field => `
+            <li>
+              <span class="print-list-label">${field.label}</span>
+              <span class="print-list-value">${field.value}</span>
+            </li>
+          `
+        )
+        .join('')
+
+      const customFieldsBlock = customFields
+        ? `<div class="print-piece-section"><h4>Champs personnalisés</h4><ul class="print-list">${customFields}</ul></div>`
+        : ''
+
+      const documentsBlock = (piece.documents || []).length
+        ? `<div class="print-piece-section"><h4>Documents</h4><ul class="print-list">${piece.documents
+            .map(doc => `<li>${doc.name} <span class="print-list-hint">(${doc.type} • ${doc.size})</span></li>`)
+            .join('')}</ul></div>`
+        : ''
+
+      const productBlock = renderPrintProductSummary(piece.product, 'Produit catalogue')
+
+      return `
+        <div class="print-piece-card">
+          <div class="print-piece-header">
+            <span class="print-index print-index--piece">${indexLabel}</span>
+            <div class="print-piece-heading">
+              <div class="print-piece-title">${piece.name}</div>
+              <div class="print-piece-subtitle">${piece.reference || 'Référence non définie'}</div>
+            </div>
+            ${constructeurBadges}
+          </div>
+          ${piece.description ? `<p class="print-piece-description">${piece.description}</p>` : ''}
+          <div class="print-piece-meta">
+            <div class="print-field-mini">
+              <label>Fournisseur(s)</label>
+              <span>${piece.constructeurs?.length
+                ? piece.constructeurs.map(constructeur => constructeur.name).join(', ')
+                : '—'}</span>
+            </div>
+            <div class="print-field-mini">
+              <label>Contact(s)</label>
+              <span>${piece.constructeurs?.length
+                ? piece.constructeurs
+                    .map(constructeur => constructeur.contact)
+                    .filter(Boolean)
+                    .join(' • ') || '—'
+                : '—'}</span>
+            </div>
+          </div>
+          ${productBlock}
+          ${customFieldsBlock}
+          ${documentsBlock}
+        </div>
+      `
+    })
+    .join('')
+
+  return `
+    <div class="${sectionClass}">
+      <h3>${title}</h3>
+      <div class="print-piece-grid">
+        ${cards}
+      </div>
+    </div>
+  `
+}
+
+const renderPrintComponents = (components = [], depth = 0, indexPath = []) => {
+  if (!components.length) { return '' }
+  return components
+    .map((component, idx) => {
+      const badges = []
+      if (component.constructeurs?.length) {
+        const label = component.constructeurs.map((constructeur, badgeIdx) => {
+          const suffix = component.constructeurs.length > 1 ? ` ${badgeIdx + 1}` : ''
+          return `Constructeur${suffix}: ${constructeur.name}`
+        })
+        badges.push(...label)
+      }
+      const sectionClass = `print-section print-section--component print-section-depth-${Math.min(depth, 3)}`
+      const currentIndex = [...indexPath, idx + 1]
+      const indexLabel = currentIndex.join('.')
+      const productBlock = renderPrintProductSummary(component.product, 'Produit catalogue', 'print-section print-subsection print-section--product')
+      return `
+        <div class="${sectionClass}">
+          <h3>
+            <span class="print-index print-index--component">${indexLabel}</span>
+            <span>Composant&nbsp;: ${component.name}</span>
+          </h3>
+          ${component.description ? `<p class="print-muted">${component.description}</p>` : ''}
+          ${badges.length ? `<div class="badge-group">${badges.map(badge => `<span class="print-badge">${badge}</span>`).join('')}</div>` : ''}
+          ${productBlock}
+          ${renderPrintCustomFields(
+            component.customFields,
+            'Champs personnalisés',
+            'print-section print-subsection print-section--custom-fields'
+          )}
+          ${renderPrintPieces(
+            (component.pieces || []).map((piece, pieceIdx) => ({ ...piece, indexPath: [...currentIndex, pieceIdx + 1] })),
+            'Pièces du composant',
+            'print-section print-subsection print-section--pieces'
+          )}
+          ${renderPrintDocuments(
+            component.documents,
+            'Documents du composant',
+            'print-section print-subsection print-section--documents'
+          )}
+          ${renderPrintComponents(component.subComponents || [], depth + 1, currentIndex)}
+        </div>
+      `
+    })
+    .join('')
+}
+
+const normalizeDocuments = (docs = []) => {
+  return docs.map(doc => ({
+    id: doc.id,
+    name: doc.name || doc.filename || 'Document',
+    type: doc.mimeType || doc.type || '—',
+    size: formatSize(doc.size)
+  }))
+}
+
+const normalizeCustomFields = (values = []) => {
+  return values.map(value => ({
+    id: value.id,
+    label: value.customField?.name || 'Champ',
+    value: value.value || '—'
+  }))
+}
+
+const normalizeConstructeur = (constructeur) => {
+  if (!constructeur) { return null }
+  const contact = formatConstructeurContact(constructeur)
+  return {
+    id: constructeur.id || null,
+    name: constructeur.name || '—',
+    contact: contact || '—'
+  }
+}
+
+const normalizeConstructeurList = (...sources) => {
+  const ids = uniqueConstructeurIds(...sources)
+  const pools = sources
+    .flatMap((source) => {
+      if (Array.isArray(source)) {
+        if (source.length && typeof source[0] === 'object') {
+          return [source]
+        }
+        return []
+      }
+      if (source && typeof source === 'object' && 'id' in source) {
+        return [[source]]
+      }
+      return []
+    })
+    .filter(Boolean)
+  const resolved = resolveConstructeurs(ids, ...pools)
+  return resolved
+    .map(normalizeConstructeur)
+    .filter(Boolean)
+}
+
+const normalizeProduct = (product) => {
+  if (!product) { return null }
+  const constructeurs = normalizeConstructeurList(
+    product.constructeurs,
+    product.constructeur,
+    product.constructeurIds,
+    product.constructeurId,
+  )
+  return {
+    id: product.id || null,
+    name: product.name || 'Produit sans nom',
+    reference: product.reference || '',
+    supplierPrice: formatCurrency(product.supplierPrice),
+    typeName: product.typeProduct?.name || null,
+    constructeurs,
+    customFields: normalizeCustomFields(product.customFieldValues || []),
+    documents: normalizeDocuments(product.documents || []),
+  }
+}
+
+const normalizePiece = piece => {
+  const rawProduct = piece.product || null
+  const constructeurs = normalizeConstructeurList(
+    piece.constructeurs,
+    piece.constructeur,
+    piece.originalPiece?.constructeurs,
+    piece.originalPiece?.constructeur,
+    piece.constructeurIds,
+    piece.constructeurId,
+    rawProduct?.constructeurs,
+    rawProduct?.constructeur,
+    rawProduct?.constructeurIds,
+    rawProduct?.constructeurId,
+  )
+  const product = normalizeProduct(rawProduct)
+
+  return {
+    id: piece.id,
+    name: piece.name || 'Pièce sans nom',
+    description: piece.description || '',
+    reference: piece.reference || '',
+    customFields: normalizeCustomFields(piece.customFieldValues || []),
+    documents: normalizeDocuments(piece.documents || []),
+    constructeurs,
+    constructeur: constructeurs[0] || null,
+    product,
+    indexPath: piece.indexPath || null
+  }
+}
+
+const normalizeComponent = component => {
+  const rawProduct = component.product || null
+  const constructeurs = normalizeConstructeurList(
+    component.constructeurs,
+    component.constructeur,
+    component.originalComposant?.constructeurs,
+    component.originalComposant?.constructeur,
+    component.constructeurIds,
+    component.constructeurId,
+    rawProduct?.constructeurs,
+    rawProduct?.constructeur,
+    rawProduct?.constructeurIds,
+    rawProduct?.constructeurId,
+  )
+  const product = normalizeProduct(rawProduct)
+
+  return {
+    id: component.id,
+    name: component.name || 'Composant sans nom',
+    description: component.description || '',
+    customFields: normalizeCustomFields(component.customFieldValues || []),
+    documents: normalizeDocuments(component.documents || []),
+    pieces: (component.pieces || []).map(normalizePiece),
+    subComponents: (component.sousComposants || component.subComponents || []).map(normalizeComponent),
+    constructeurs,
+    constructeur: constructeurs[0] || null,
+    product,
+  }
+}
+
+export const buildMachinePrintContext = ({
+  machine,
+  machineName,
+  machineReference,
+  machinePieces = [],
+  components = [],
+  selection
+}) => {
+  const selectionState = selection || {}
+  const machineSelection = selectionState.machine || {}
+  const componentSelection = selectionState.components || {}
+  const pieceSelection = selectionState.pieces || {}
+
+  const includeMachineInfo = machineSelection.info !== false
+  const includeMachineCustomFields = machineSelection.customFields !== false
+  const includeMachineDocuments = machineSelection.documents !== false
+
+  const isComponentSelected = (id) => {
+    if (!id) { return true }
+    if (Object.prototype.hasOwnProperty.call(componentSelection, id)) {
+      return componentSelection[id]
+    }
+    return true
+  }
+
+  const isPieceSelected = (id) => {
+    if (!id) { return true }
+    if (Object.prototype.hasOwnProperty.call(pieceSelection, id)) {
+      return pieceSelection[id]
+    }
+    return true
+  }
+
+  const machineBadges = []
+  if (machine?.site?.name) {
+    machineBadges.push(`Site: ${machine.site.name}`)
+  }
+  if (machineReference) {
+    machineBadges.push(`Ref: ${machineReference}`)
+  }
+
+  const machineConstructeurs = normalizeConstructeurList(
+    machine?.constructeurs,
+    machine?.constructeur,
+    machine?.constructeurIds,
+    machine?.constructeurId,
+  )
+
+  const machineConstructeurNames = machineConstructeurs.length
+    ? machineConstructeurs.map((constructeur) => constructeur.name).join(', ')
+    : ''
+
+  const machineConstructeurContacts = machineConstructeurs.length
+    ? machineConstructeurs
+        .map((constructeur) => constructeur.contact)
+        .filter(Boolean)
+        .join(' • ')
+    : ''
+
+  const normalizedPieces = machinePieces
+    .map(normalizePiece)
+    .filter(piece => isPieceSelected(piece.id))
+    .map((piece, idx) => ({
+      ...piece,
+      indexPath: [idx + 1]
+    }))
+
+  const normalizedComponents = components.map(normalizeComponent)
+
+  const filterComponentTree = (component) => {
+    const filteredPieces = (component.pieces || []).filter(piece => isPieceSelected(piece.id))
+    const filteredSubComponents = (component.subComponents || [])
+      .map(filterComponentTree)
+      .filter(Boolean)
+
+    const includeSelf = isComponentSelected(component.id)
+    const shouldInclude = includeSelf || filteredPieces.length > 0 || filteredSubComponents.length > 0
+
+    if (!shouldInclude) {
+      return null
+    }
+
+    return {
+      ...component,
+      pieces: filteredPieces,
+      subComponents: filteredSubComponents
+    }
+  }
+
+  const filteredComponents = normalizedComponents
+    .map(filterComponentTree)
+    .filter(Boolean)
+
+  return {
+    generatedAt: new Date().toLocaleString('fr-FR'),
+    machine: {
+      id: machine?.id || null,
+      name: machineName,
+      description: machine?.description || '',
+      reference: machineReference,
+      site: machine?.site?.name || '',
+      badges: machineBadges,
+      constructeurs: machineConstructeurs,
+      constructeur: machineConstructeurs[0] || null,
+      constructeurNames: machineConstructeurNames,
+      constructeurContacts: machineConstructeurContacts,
+      includeInfo: includeMachineInfo,
+      customFields: includeMachineCustomFields
+        ? normalizeCustomFields(machine?.customFieldValues || [])
+        : [],
+      documents: includeMachineDocuments
+        ? normalizeDocuments(machine?.documents || [])
+        : []
+    },
+    components: filteredComponents,
+    pieces: normalizedPieces
+  }
+}
+
+export const buildMachinePrintHtml = (context, styles) => {
+  const title = context.machine.name ? `Impression - ${context.machine.name}` : 'Impression machine'
+  const badgesHtml = context.machine.badges
+    .map(badge => `<span class="print-badge">${badge}</span>`)
+    .join('')
+  const sections = []
+
+  sections.push(`
+    <div class="print-metadata">
+      <span>Généré le ${context.generatedAt}</span>
+      <span>Machine ID: ${context.machine.id || '—'}</span>
+    </div>
+    <div class="print-header">
+      <div class="title-block">
+        <div class="print-title">${context.machine.name || 'Machine sans nom'}</div>
+        <div class="print-subtitle">${
+          context.machine.description || context.machine.typeDescription || 'Aucune description disponible'
+        }</div>
+      </div>
+      <div class="badge-group">${badgesHtml}</div>
+    </div>
+  `)
+
+  if (context.machine.includeInfo) {
+    sections.push(`
+      <div class="print-section print-section--machine">
+        <h3>Informations générales</h3>
+        <div class="print-grid">
+         ${renderPrintField('Nom', context.machine.name)}
+         ${renderPrintField('Référence', context.machine.reference, 'Non définie')}
+         ${renderPrintField('Site', context.machine.site, 'Non défini')}
+          ${renderPrintField('Constructeur(s)', context.machine.constructeurNames, 'Non défini')}
+          ${renderPrintField('Contact(s) Constructeur(s)', context.machine.constructeurContacts, 'Non défini')}
+        </div>
+      </div>
+    `)
+  }
+
+  const customFieldsSection = renderPrintCustomFields(
+    context.machine.customFields,
+    'Champs personnalisés de la machine',
+    'print-section print-section--custom-fields'
+  )
+  if (customFieldsSection) {
+    sections.push(customFieldsSection)
+  }
+
+  const documentsSection = renderPrintDocuments(
+    context.machine.documents,
+    'Documents liés à la machine',
+    'print-section print-section--documents'
+  )
+  if (documentsSection) {
+    sections.push(documentsSection)
+  }
+
+  const componentsSection = renderPrintComponents(context.components)
+  if (componentsSection) {
+    sections.push(componentsSection)
+  }
+
+  const piecesSection = renderPrintPieces(
+    context.pieces,
+    'Pièces indépendantes',
+    'print-section print-section--pieces'
+  )
+  if (piecesSection) {
+    sections.push(piecesSection)
+  }
+
+  sections.push(`
+    <div class="print-section print-muted">
+      Rapport généré automatiquement par Inventaire Pro.
+    </div>
+  `)
+
+  const content = sections.join('\n')
+
+  return `<!DOCTYPE html>
+    <html lang="fr">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="color-scheme" content="light only" />
+        <title>${title}</title>
+        ${styles}
+        <style>
+          /* ============ Design tokens (sobre & pro) ============ */
+          :root{
+            --bg: #ffffff;
+            --ink: #0f172a;              /* slate-900 */
+            --muted: #475569;            /* slate-600 */
+            --line: #cbd5e1;             /* slate-300 */
+            --line-soft: #e2e8f0;        /* slate-200 */
+            --accent: #1f2937;           /* gray-800 */
+            --accent-ink: #111827;       /* gray-900 */
+            --brand: #0ea5e9;            /* sky-500 (léger) */
+            --brand-ink: #075985;        /* sky-800 */
+            --ok: #059669;               /* emerald-600 */
+            --warn: #ea580c;             /* orange-600 */
+            --comp: #be185d;             /* pink-700 */
+            --radius-xs: 2px;
+            --radius-sm: 4px;
+            --radius-md: 6px;
+            --radius-lg: 8px;
+            --shadow-0: none;
+            --shadow-1: 0 1px 0 rgba(15,23,42,.04);
+            --shadow-2: 0 2px 8px rgba(15,23,42,.06);
+          }
+
+          /* ============ Base ============ */
+          @page { margin: 16mm 14mm; }
+          html, body { height: 100%; }
+          body {
+            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+            background: #F9FAFB;
+            color: var(--ink);
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+          }
+
+          .print-layout { max-width: 1120px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
+
+          .print-metadata {
+            font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 12px;
+            letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 8px;
+          }
+
+          .print-header {
+            display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
+            background: var(--bg); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md);
+            box-shadow: var(--shadow-2);
+          }
+          .print-header .title-block { flex: 1; }
+          .print-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: var(--accent-ink); }
+          .print-subtitle { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }
+
+          .badge-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+          .print-badge {
+            display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-sm);
+            font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
+            background: #e0f2fe; color: var(--brand-ink); border: 1px solid #bae6fd;
+          }
+          .print-badge--subtle { background: #f1f5f9; border-color: var(--line); color: #334155; }
+
+          .print-index {
+            display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
+            border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; margin-right: 8px;
+            box-shadow: inset 0 0 0 1px var(--line);
+          }
+          .print-index--component { background: #fde2f2; color: var(--comp); }
+          .print-index--piece { background: #ffedd5; color: var(--warn); }
+
+          /* ============ Sections ============ */
+          .print-section, .print-section.print-subsection, .print-piece-card { break-inside: avoid; page-break-inside: avoid; }
+          .print-section {
+            margin: 0; padding: 20px 22px; border-radius: var(--radius-md);
+            border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-2); position: relative;
+          }
+          .print-section + .print-section { margin-top: 8px; }
+          .print-section h3 {
+            font-size: 16px; font-weight: 800; margin: 0 0 14px; letter-spacing: .02em; color: var(--accent);
+            border-left: 3px solid var(--accent); padding-left: 10px;
+          }
+
+          .print-section--machine { border-left: 3px solid var(--brand); }
+          .print-section--custom-fields { border-left: 3px solid #7c3aed; }
+          .print-section--documents { border-left: 3px solid var(--ok); }
+          .print-section--component { border-left: 3px solid var(--comp); }
+          .print-section--pieces { border-left: 3px solid var(--warn); }
+
+          .print-section.print-subsection {
+            margin-top: 14px; margin-bottom: 10px; padding: 16px 18px; border-radius: var(--radius-sm);
+            box-shadow: var(--shadow-1); background: #fcfcfd;
+          }
+
+          /* ============ Fields (grid) ============ */
+          .print-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+          .print-field {
+            display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-sm);
+            background: #fafbfc; border: 1px solid var(--line-soft); min-height: 72px;
+          }
+          .print-field label { font-size: 10px; text-transform: uppercase; color: #64748b; letter-spacing: .08em; margin-bottom: 8px; }
+          .print-field span { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.45; }
+
+          /* ============ Pieces ============ */
+          .print-piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+          .print-piece-card {
+            padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid #fed7aa; background: var(--bg); box-shadow: var(--shadow-1);
+            display: flex; flex-direction: column; gap: 10px;
+          }
+          .print-piece-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+          .print-piece-heading { flex: 1 1 160px; }
+          .print-piece-title { font-size: 15px; font-weight: 800; color: #7c2d12; }
+          .print-piece-subtitle { font-size: 11px; color: #a16207; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
+          .print-piece-description { font-size: 12px; color: #7c2d12; margin: 0; }
+
+          .print-piece-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
+          .print-field-mini {
+            padding: 8px 10px; border-radius: var(--radius-sm); background: #fff7ed; border: 1px solid #fed7aa; display: flex; flex-direction: column; gap: 4px;
+          }
+          .print-field-mini label { font-size: 9px; text-transform: uppercase; color: #9a3412; letter-spacing: .06em; }
+          .print-field-mini span { font-size: 12px; font-weight: 700; color: #7c2d12; }
+          .print-piece-section { display: flex; flex-direction: column; gap: 6px; }
+          .print-piece-section h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #7c2d12; margin: 0; }
+          .print-list { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
+          .print-list li { font-size: 12px; color: #475569; break-inside: avoid; }
+          .print-list-label { font-weight: 700; color: #7c2d12; margin-right: 4px; }
+          .print-list-value { color: var(--ink); }
+          .print-list-hint { color: #64748B; }
+
+          /* ============ Tables ============ */
+          .print-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
+          .print-table th, .print-table td { border: 1px solid var(--line-soft); padding: 10px 12px; text-align: left; vertical-align: top; }
+          .print-table thead th { background: #f1f5f9; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); font-size: 12px; }
+          .print-table tr { break-inside: avoid; page-break-inside: avoid; }
+          .print-section--documents .print-table thead th { background: #ecfdf5; color: #065f46; }
+          .print-section--pieces .print-table thead th { background: #fffbeb; color: #92400e; }
+          .print-section--component .print-table thead th { background: #fdf2f8; color: #831843; }
+
+          /* ============ Utilities ============ */
+          .print-muted { color: var(--muted); }
+          .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
+
+          /* ============ Print media ============ */
+          @media print {
+            body { background: white; }
+            .print-layout { padding: 0; max-width: none; }
+            .print-header, .print-section, .print-section.print-subsection, .print-piece-card, .print-table { box-shadow: var(--shadow-0); }
+            .print-section, .print-section.print-subsection, .print-piece-card { break-inside: avoid-page; page-break-inside: avoid; }
+            .badge-group { justify-content: flex-start; }
+            .print-metadata { border-bottom-color: var(--line); }
+            /* Force couleurs d’accent légères pour économie d’encre */
+            .print-badge { background: #e5f3fb !important; border-color: #d1e7f8 !important; }
+            .print-index--component { background: #fbe7f3 !important; }
+            .print-index--piece { background: #fff1e6 !important; }
+          }
+        </style>
+      </head>
+      <body>
+        <div class="print-layout">
+          ${content}
+        </div>
+      </body>
+    </html>`
+}
diff --git a/frontend/deploy.sh b/frontend/deploy.sh
new file mode 100644
index 0000000..7c8e279
--- /dev/null
+++ b/frontend/deploy.sh
@@ -0,0 +1,290 @@
+#!/bin/bash
+
+# Script de déploiement automatique pour Inventory V2
+# Usage: ./deploy.sh [backend|frontend|all]
+
+set -e  # Arrêter en cas d'erreur
+
+# Configuration
+PROJECT_DIR="/home/matt/inventory_v2"
+BACKEND_DIR="$PROJECT_DIR/inventory_backend"
+FRONTEND_DIR="$PROJECT_DIR/inventory_frontend"
+LOG_FILE="/tmp/deploy.log"
+
+# Couleurs pour les logs
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Fonction de logging
+log() {
+    echo -e "${BLUE}[$(date +'%Y-%m-%d %H:%M:%S')]${NC} $1" | tee -a "$LOG_FILE"
+}
+
+log_success() {
+    echo -e "${GREEN}[$(date +'%Y-%m-%d %H:%M:%S')] ✓${NC} $1" | tee -a "$LOG_FILE"
+}
+
+log_warning() {
+    echo -e "${YELLOW}[$(date +'%Y-%m-%d %H:%M:%S')] ⚠${NC} $1" | tee -a "$LOG_FILE"
+}
+
+log_error() {
+    echo -e "${RED}[$(date +'%Y-%m-%d %H:%M:%S')] ✗${NC} $1" | tee -a "$LOG_FILE"
+}
+
+# Fonction pour déployer le backend
+deploy_backend() {
+    log "Déploiement du backend..."
+    
+    # Sauvegarde automatique de la base de données avant modification
+    log "Sauvegarde automatique de la base de données..."
+    if command -v pg_dump &> /dev/null; then
+        BACKUP_DIR="/home/matt/backups"
+        DATE=$(date +"%Y%m%d_%H%M%S")
+        BACKUP_FILE="auto_backup_$DATE.sql"
+        
+        # Créer le répertoire de sauvegarde
+        mkdir -p "$BACKUP_DIR"
+        
+        # Sauvegarde de la base de données
+        if pg_dump -h localhost -U inventory_user -d inventory_db > "$BACKUP_DIR/$BACKUP_FILE" 2>/dev/null; then
+            # Compresser la sauvegarde
+            gzip "$BACKUP_DIR/$BACKUP_FILE"
+            log_success "Sauvegarde automatique créée: $BACKUP_DIR/$BACKUP_FILE.gz"
+            
+            # Garder seulement les 10 dernières sauvegardes automatiques
+            cd "$BACKUP_DIR"
+            ls -t auto_backup_*.sql.gz | tail -n +11 | xargs -r rm
+        else
+            log_warning "Impossible de créer la sauvegarde automatique (base de données non accessible)"
+        fi
+    else
+        log_warning "pg_dump non trouvé, sauvegarde automatique impossible"
+    fi
+    
+    cd "$BACKEND_DIR"
+    
+    # Sauvegarder les modifications locales si nécessaire
+    if ! git diff-index --quiet HEAD --; then
+        log_warning "Modifications locales détectées, sauvegarde..."
+        git stash push -m "Auto-sauvegarde avant déploiement $(date)"
+    fi
+    
+    # Pull les dernières modifications
+    log "Récupération des dernières modifications..."
+    git pull origin master
+    
+    # Installer les dépendances si nécessaire
+    if [ ! -d "node_modules" ] || [ "package.json" -nt "node_modules" ]; then
+        log "Installation des dépendances..."
+        npm install
+    fi
+    
+    # Build du projet
+    log "Compilation du projet..."
+    npm run build
+    
+    # Appliquer les migrations Prisma si nécessaire
+    log "Vérification et application des migrations Prisma..."
+    npx prisma migrate deploy
+    
+    # Générer le client Prisma
+    log "Génération du client Prisma..."
+    npx prisma generate
+    
+    # Redémarrer le service backend
+    log "Redémarrage du service backend..."
+    if systemctl is-active --quiet inventory-backend; then
+        sudo systemctl restart inventory-backend
+        log_success "Service backend redémarré"
+    else
+        log_warning "Service backend non trouvé, démarrage manuel requis"
+    fi
+    
+    log_success "Backend déployé avec succès"
+}
+
+# Fonction pour déployer le frontend
+deploy_frontend() {
+    log "Déploiement du frontend..."
+    
+    cd "$FRONTEND_DIR"
+    
+    # Sauvegarder les modifications locales si nécessaire
+    if ! git diff-index --quiet HEAD --; then
+        log_warning "Modifications locales détectées, sauvegarde..."
+        git stash push -m "Auto-sauvegarde avant déploiement $(date)"
+    fi
+    
+    # Pull les dernières modifications
+    log "Récupération des dernières modifications..."
+    git pull origin master
+    
+    # Installer les dépendances si nécessaire
+    if [ ! -d "node_modules" ] || [ "package.json" -nt "node_modules" ]; then
+        log "Installation des dépendances..."
+        npm install
+    fi
+    
+    # Build du projet
+    log "Compilation du projet..."
+    npm run build
+    
+    # Redémarrer le service frontend
+    log "Redémarrage du service frontend..."
+    if systemctl is-active --quiet inventory-frontend; then
+        sudo systemctl restart inventory-frontend
+        log_success "Service frontend redémarré"
+    else
+        log_warning "Service frontend non trouvé, démarrage manuel requis"
+    fi
+    
+    log_success "Frontend déployé avec succès"
+}
+
+# Fonction pour déployer tout
+deploy_all() {
+    log "Déploiement complet..."
+    deploy_backend
+    deploy_frontend
+    log_success "Déploiement complet terminé"
+}
+
+# Fonction pour restaurer la base de données
+restore_database() {
+    log "Restauration de la base de données..."
+    
+    if [ -z "$1" ]; then
+        log_error "Veuillez spécifier le fichier de sauvegarde à restaurer"
+        echo "Usage: $0 restore <fichier_sauvegarde>"
+        echo "Exemple: $0 restore /home/matt/backups/auto_backup_20241230_143022.sql.gz"
+        exit 1
+    fi
+    
+    BACKUP_FILE="$1"
+    
+    if [ ! -f "$BACKUP_FILE" ]; then
+        log_error "Fichier de sauvegarde non trouvé: $BACKUP_FILE"
+        exit 1
+    fi
+    
+    # Vérifier si c'est un fichier compressé
+    if [[ "$BACKUP_FILE" == *.gz ]]; then
+        log "Décompression de la sauvegarde..."
+        gunzip -c "$BACKUP_FILE" | psql -h localhost -U inventory_user -d inventory_db
+    else
+        psql -h localhost -U inventory_user -d inventory_db < "$BACKUP_FILE"
+    fi
+    
+    if [ $? -eq 0 ]; then
+        log_success "Base de données restaurée avec succès"
+    else
+        log_error "Erreur lors de la restauration"
+        exit 1
+    fi
+}
+
+# Fonction pour lister les sauvegardes disponibles
+list_backups() {
+    log "Sauvegardes disponibles:"
+    BACKUP_DIR="/home/matt/backups"
+    
+    if [ -d "$BACKUP_DIR" ]; then
+        ls -la "$BACKUP_DIR"/*.sql.gz 2>/dev/null | while read -r line; do
+            echo "  $line"
+        done
+    else
+        log_warning "Aucune sauvegarde trouvée"
+    fi
+}
+
+# Fonction pour afficher l'aide
+show_help() {
+    echo "Script de déploiement automatique pour Inventory V2"
+    echo ""
+    echo "Usage: $0 [OPTION]"
+    echo ""
+    echo "Options:"
+    echo "  backend    Déployer uniquement le backend"
+    echo "  frontend   Déployer uniquement le frontend"
+    echo "  all        Déployer backend et frontend (défaut)"
+    echo "  restore    Restaurer la base de données"
+    echo "  backups    Lister les sauvegardes disponibles"
+    echo "  help       Afficher cette aide"
+    echo ""
+    echo "Exemples:"
+    echo "  $0 backend"
+    echo "  $0 frontend"
+    echo "  $0 all"
+    echo "  $0 restore /home/matt/backups/auto_backup_20241230_143022.sql.gz"
+    echo "  $0 backups"
+}
+
+# Vérification des prérequis
+check_prerequisites() {
+    log "Vérification des prérequis..."
+    
+    # Vérifier que git est installé
+    if ! command -v git &> /dev/null; then
+        log_error "Git n'est pas installé"
+        exit 1
+    fi
+    
+    # Vérifier que npm est installé
+    if ! command -v npm &> /dev/null; then
+        log_error "NPM n'est pas installé"
+        exit 1
+    fi
+    
+    # Vérifier que le répertoire du projet existe
+    if [ ! -d "$PROJECT_DIR" ]; then
+        log_error "Le répertoire du projet n'existe pas: $PROJECT_DIR"
+        exit 1
+    fi
+    
+    log_success "Prérequis vérifiés"
+}
+
+# Fonction principale
+main() {
+    log "=== Début du déploiement ==="
+    
+    # Vérifier les prérequis
+    check_prerequisites
+    
+    # Traitement des arguments
+    case "${1:-all}" in
+        "backend")
+            deploy_backend
+            ;;
+        "frontend")
+            deploy_frontend
+            ;;
+        "all")
+            deploy_all
+            ;;
+        "restore")
+            restore_database "$2"
+            ;;
+        "backups")
+            list_backups
+            ;;
+        "help"|"-h"|"--help")
+            show_help
+            exit 0
+            ;;
+        *)
+            log_error "Option invalide: $1"
+            show_help
+            exit 1
+            ;;
+    esac
+    
+    log "=== Déploiement terminé ==="
+}
+
+# Exécution du script
+main "$@" 
\ No newline at end of file
diff --git a/frontend/docs/plans/2026-03-08-reduce-files-under-500-lines.md b/frontend/docs/plans/2026-03-08-reduce-files-under-500-lines.md
new file mode 100644
index 0000000..105f3f3
--- /dev/null
+++ b/frontend/docs/plans/2026-03-08-reduce-files-under-500-lines.md
@@ -0,0 +1,647 @@
+# Reduce Frontend Files Under 500 Lines — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Reduce all 14 frontend files currently over 500 lines to under 500 lines each, without changing any functionality.
+
+**Architecture:** Extract shared UI sections into reusable components, split large composables/utilities into focused modules, and extract page-level script logic into dedicated composables. Each extraction is a pure refactor — no behavior changes.
+
+**Tech Stack:** Vue 3 Composition API, TypeScript, Nuxt 4 (auto-imports for composables and components)
+
+---
+
+## Inventory of files to reduce
+
+| # | File | Lines | Target strategy |
+|---|------|------:|-----------------|
+| 1 | `composables/useMachineDetailData.ts` | 1353 | Split into 4 focused composables |
+| 2 | `components/StructureNodeEditor.vue` | 926 | Extract type-map + sync logic into composable |
+| 3 | `pages/component/[id]/edit.vue` | 911 | Extract shared component + composable |
+| 4 | `pages/component/create.vue` | 852 | Extract structure assignment helpers |
+| 5 | `pages/pieces/[id]/edit.vue` | 821 | Extract page composable |
+| 6 | `shared/model/componentStructure.ts` | 794 | Split into 3 focused modules |
+| 7 | `components/PieceItem.vue` | 757 | Extract document list + custom fields template |
+| 8 | `components/ComponentStructureAssignmentNode.vue` | 722 | Extract fetch/options logic |
+| 9 | `pages/index.vue` | 584 | Extract modal components |
+| 10 | `components/PieceModelStructureEditor.vue` | 578 | Extract drag-reorder + field logic |
+| 11 | `components/model-types/ManagementView.vue` | 577 | Extract related-items modal |
+| 12 | `components/ComponentItem.vue` | 573 | Extract document list template |
+| 13 | `pages/product/[id]/edit.vue` | 570 | Extract page composable |
+| 14 | `pages/pieces/create.vue` | 540 | Extract product-selection logic |
+
+## Shared extractions (do these FIRST — they reduce multiple files)
+
+### Task 1: Extract `DocumentListInline.vue` shared component
+
+**Rationale:** The document list display (thumbnail + name + mimeType + size + Consulter/Télécharger/Supprimer buttons) is duplicated identically in:
+- `PieceItem.vue` (lines 401-477)
+- `ComponentItem.vue` (lines 312-379)
+- `pages/component/[id]/edit.vue` (lines 307-375)
+- `pages/pieces/[id]/edit.vue` (lines 254-325)
+- `pages/product/[id]/edit.vue` (lines 165-232)
+
+**Files:**
+- Create: `app/components/common/DocumentListInline.vue`
+- Modify: all 5 files above
+
+**Step 1: Create `DocumentListInline.vue`**
+
+```vue
+<template>
+  <div v-if="documents.length" class="space-y-2">
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3 text-sm">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+          :class="documentThumbnailClass(document)"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-6 w-6"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium">{{ document.name }}</div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+          Télécharger
+        </button>
+        <button
+          v-if="canDelete"
+          type="button"
+          class="btn btn-error btn-xs"
+          :disabled="deleteDisabled"
+          @click="$emit('delete', document.id)"
+        >
+          Supprimer
+        </button>
+      </div>
+    </div>
+  </div>
+  <p v-else class="text-xs text-base-content/70">
+    {{ emptyText }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  documentIcon,
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentThumbnailClass,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+withDefaults(defineProps<{
+  documents: any[]
+  canDelete?: boolean
+  deleteDisabled?: boolean
+  emptyText?: string
+}>(), {
+  canDelete: false,
+  deleteDisabled: false,
+  emptyText: 'Aucun document.',
+})
+
+defineEmits<{
+  (e: 'preview', document: any): void
+  (e: 'delete', documentId: string): void
+}>()
+</script>
+```
+
+**Step 2: Run lint**
+
+Run: `cd Inventory_frontend && npm run lint:fix`
+
+**Step 3: Replace document list in each of the 5 files**
+
+In each file, replace the `v-for` document list block with:
+```vue
+<DocumentListInline
+  :documents="xxxDocuments"
+  :can-delete="canEdit || isEditMode"
+  :delete-disabled="uploadingDocuments"
+  :empty-text="'Aucun document lié à cet élément.'"
+  @preview="openPreview"
+  @delete="removeDocument"
+/>
+```
+Remove the now-unused imports (`documentIcon`, `formatSize`, `shouldInlinePdf`, etc.) from each file.
+
+**Step 4: Run lint + typecheck**
+
+Run: `cd Inventory_frontend && npm run lint:fix && npx nuxi typecheck`
+
+**Step 5: Commit**
+
+```bash
+git add app/components/common/DocumentListInline.vue app/components/PieceItem.vue app/components/ComponentItem.vue app/pages/component/\[id\]/edit.vue app/pages/pieces/\[id\]/edit.vue app/pages/product/\[id\]/edit.vue
+git commit -m "refactor(frontend) : extract DocumentListInline shared component"
+```
+
+**Expected savings:** ~60 lines per file × 5 files = ~300 lines total
+
+---
+
+### Task 2: Extract `StructureSkeletonPreview.vue` shared component
+
+**Rationale:** The "Squelette sélectionné" details section (collapsible, shows custom fields / pieces / products / subcomponents) is duplicated in:
+- `pages/component/[id]/edit.vue` (lines 141-225)
+- `pages/component/create.vue` (lines 112-189)
+- `pages/pieces/[id]/edit.vue` (lines 185-216)
+- `pages/pieces/create.vue` (lines 156-187)
+
+**Files:**
+- Create: `app/components/common/StructureSkeletonPreview.vue`
+- Modify: all 4 pages above
+
+**Step 1: Create the component**
+
+Extract the common `<details>` collapse + custom fields list + pieces list + products list + subcomponents list into a single component with props:
+- `structure` — the normalized structure object
+- `description` — optional description text
+- `previewBadge` — the badge text (e.g., from `formatStructurePreview`)
+- `pieceTypeLabelMap`, `productTypeLabelMap` — for label resolution (component pages only)
+- `variant` — `'component'` or `'piece'` to control which sections display
+
+**Step 2: Replace in each page**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract StructureSkeletonPreview shared component"
+```
+
+**Expected savings:** ~50 lines per file × 4 files = ~200 lines total
+
+---
+
+### Task 3: Split `shared/model/componentStructure.ts` (794 lines → 3 files)
+
+**Files:**
+- Create: `app/shared/model/componentStructureSanitize.ts`
+- Create: `app/shared/model/componentStructureHydrate.ts`
+- Modify: `app/shared/model/componentStructure.ts` (keep only normalize + format + extract)
+
+**Step 1: Create `componentStructureSanitize.ts`**
+
+Move these functions (lines 88-362):
+- `sanitizeCustomFields`
+- `sanitizePieces`
+- `sanitizeProducts`
+- `sanitizeSubcomponents` (make it exported)
+- Helper: `extractFieldValueObject`, `toStringArray`
+
+~275 lines → new file
+
+**Step 2: Create `componentStructureHydrate.ts`**
+
+Move these functions (lines 364-495, 654-739):
+- `hydrateCustomFields`
+- `hydratePieces`
+- `hydrateProducts`
+- `hydrateSubcomponents`
+- `mapComponentCustomFields`
+- `mapComponentPieces`
+- `mapComponentProducts`
+- `mapSubcomponents`
+
+~250 lines → new file
+
+**Step 3: Update `componentStructure.ts`**
+
+Keep only:
+- `isPlainObject`, `ModelStructurePreview`, `defaultStructure`, `ensureStructureShape`, `cloneStructure`
+- `normalizeStructureForEditor`, `normalizeStructureForSave`
+- `hydrateStructureForEditor`, `extractStructureFromComponent`
+- `computeStructureStats`, `formatStructurePreview`
+
+Import sanitize/hydrate functions from the new files. File should end up ~270 lines.
+
+**Step 4: Verify all imports across the codebase still work**
+
+Run: `cd Inventory_frontend && npx nuxi typecheck`
+
+**Step 5: Commit**
+
+```bash
+git commit -m "refactor(frontend) : split componentStructure.ts into focused modules"
+```
+
+---
+
+### Task 4: Split `composables/useMachineDetailData.ts` (1353 lines → 4 composables)
+
+**Files:**
+- Create: `app/composables/useMachineDetailDocuments.ts` (~200 lines)
+- Create: `app/composables/useMachineDetailCustomFields.ts` (~150 lines)
+- Create: `app/composables/useMachineDetailHierarchy.ts` (~200 lines)
+- Create: `app/composables/useMachineDetailProducts.ts` (~150 lines)
+- Modify: `app/composables/useMachineDetailData.ts` (should end up ~400 lines)
+
+**Step 1: Identify extraction boundaries**
+
+Read the full file and map which functions/refs belong to which domain:
+- **Documents:** document loading, upload, delete, preview state
+- **Custom fields:** custom field value management, display logic
+- **Hierarchy:** machine hierarchy building, component/piece tree resolution
+- **Products:** product display, resolution, supplier info
+
+**Step 2: Extract `useMachineDetailDocuments.ts`**
+
+Move all document-related refs, functions, and watchers. The composable accepts `machineId` and returns `{ documents, loadDocuments, uploadDocuments, ... }`.
+
+**Step 3: Extract `useMachineDetailCustomFields.ts`**
+
+Move custom field resolution, display filtering, and update logic.
+
+**Step 4: Extract `useMachineDetailHierarchy.ts`**
+
+Move `buildMachineHierarchyFromLinks` usage, component/piece tree construction.
+
+**Step 5: Extract `useMachineDetailProducts.ts`**
+
+Move product display resolution, supplier info formatting.
+
+**Step 6: Update `useMachineDetailData.ts`**
+
+Import and compose the 4 sub-composables. Keep only the orchestration logic (data loading sequence, top-level state).
+
+**Step 7: Run lint + typecheck**
+
+**Step 8: Commit**
+
+```bash
+git commit -m "refactor(frontend) : split useMachineDetailData into focused composables"
+```
+
+---
+
+### Task 5: Extract composable from `StructureNodeEditor.vue` (926 → <500)
+
+**Files:**
+- Create: `app/composables/useStructureNodeLogic.ts`
+- Modify: `app/components/StructureNodeEditor.vue`
+
+**Step 1: Create `useStructureNodeLogic.ts`**
+
+Extract from the `<script>` section (lines 358-926):
+- Type maps (`componentTypeMap`, `pieceTypeMap`, `productTypeMap`) and label getters
+- Sync functions (`syncComponentType`, `updatePieceTypeLabel`, `updateProductTypeLabel`, `syncPieceLabels`, `syncProductLabels`)
+- Handler functions (`handleComponentTypeSelect`, `handlePieceTypeSelect`, `handleProductTypeSelect`)
+- CRUD functions (`addCustomField`, `removeCustomField`, `addPiece`, `removePiece`, `addProduct`, `removeProduct`, `addSubComponent`, `removeSubComponent`)
+- Lock state (`initialCustomFieldIndices`, etc., `isCustomFieldLocked`, etc.)
+- All watchers
+
+The composable signature:
+```ts
+export function useStructureNodeLogic(props: { node: ..., componentTypes: ..., ... }) {
+  // ... all the extracted logic
+  return { ... }
+}
+```
+
+**Step 2: Update `StructureNodeEditor.vue`**
+
+Keep only the `<template>` (356 lines — already under 500 on its own) + thin `<script>` that calls the composable.
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract StructureNodeEditor logic into composable"
+```
+
+---
+
+### Task 6: Extract composable from `pages/component/[id]/edit.vue` (911 → <500)
+
+After Task 1 (DocumentListInline) and Task 2 (StructureSkeletonPreview), this file will be ~750 lines. Still needs ~250 lines extracted.
+
+**Files:**
+- Create: `app/composables/useComponentEdit.ts`
+- Modify: `app/pages/component/[id]/edit.vue`
+
+**Step 1: Create `useComponentEdit.ts`**
+
+Extract:
+- All state declarations (refs, reactive)
+- `fetchComponent`, `refreshDocuments`, `refreshCustomFieldInputs`
+- `collectStructureSelections` function (lines 802-879 — 77 lines alone)
+- `submitEdition` function
+- All watchers
+- Type label maps and catalog maps
+
+**Step 2: Update the page to use the composable**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract component edit page logic into composable"
+```
+
+---
+
+### Task 7: Extract composable from `pages/component/create.vue` (852 → <500)
+
+After Task 2 (StructureSkeletonPreview), ~800 lines remain.
+
+**Files:**
+- Create: `app/composables/useComponentCreate.ts`
+- Modify: `app/pages/component/create.vue`
+
+**Step 1: Create `useComponentCreate.ts`**
+
+Extract:
+- Structure assignment building functions (`extractSubcomponents`, `extractPiecesFromNode`, `extractProductsFromNode`, `buildAssignmentNode`, `initializeStructureAssignments`, `hasAssignments`, `isAssignmentNodeComplete`)
+- Serialization functions (`stripNullish`, `sanitizeStructureDefinition`, `sanitizePieceDefinition`, `sanitizeProductDefinition`, `serializeStructureAssignments`)
+- `submitCreation` function
+- State management and watchers
+
+**Step 2: Update the page**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract component create page logic into composable"
+```
+
+---
+
+### Task 8: Extract composable from `pages/pieces/[id]/edit.vue` (821 → <500)
+
+After Task 1 and Task 2, ~650 lines remain.
+
+**Files:**
+- Create: `app/composables/usePieceEdit.ts`
+- Modify: `app/pages/pieces/[id]/edit.vue`
+
+**Step 1: Create `usePieceEdit.ts`**
+
+Extract:
+- Product selection logic (`describeProductRequirement`, `productRequirementEntries`, `productSelectionsFilled`, `ensureProductSelections`, `setProductSelection`)
+- `fetchPiece`, `loadPieceTypeDetailsFromCache`, `submitEdition`
+- State refs and watchers
+
+**Step 2: Update the page**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract piece edit page logic into composable"
+```
+
+---
+
+### Task 9: Reduce `PieceItem.vue` (757 → <500)
+
+After Task 1 (DocumentListInline), ~680 lines remain. The custom field rendering template (lines 236-373) is ~140 lines.
+
+**Files:**
+- Create: `app/components/common/CustomFieldDisplay.vue` (~140 lines)
+- Modify: `app/components/PieceItem.vue`
+
+**Step 1: Create `CustomFieldDisplay.vue`**
+
+Extract the custom field edit/display template section. Props: `fields`, `isEditMode`, plus events for `update` and `blur`.
+
+**Step 2: Replace in PieceItem.vue and ComponentItem.vue**
+
+Both components have this same custom field display pattern.
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract CustomFieldDisplay shared component"
+```
+
+**Expected savings:** ~130 lines from PieceItem, ~70 lines from ComponentItem
+
+---
+
+### Task 10: Extract composable from `ComponentStructureAssignmentNode.vue` (722 → <500)
+
+**Files:**
+- Create: `app/composables/useStructureAssignmentFetch.ts`
+- Modify: `app/components/ComponentStructureAssignmentNode.vue`
+
+**Step 1: Create `useStructureAssignmentFetch.ts`**
+
+Extract:
+- All fetch functions (`fetchComponentOptions`, `fetchPieceOptions`, `fetchProductOptions`)
+- Option getters (`getPieceOptions`, `getProductOptions`, `componentOptions`)
+- Loading state maps (`pieceLoadingByPath`, `productLoadingByPath`, `componentLoadingByPath`)
+- Options-by-path state maps
+- Label/description helper functions (`describePieceRequirement`, `describeProductRequirement`, etc.)
+- All watchers
+
+**Step 2: Update the component**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract assignment fetch logic into composable"
+```
+
+---
+
+### Task 11: Extract modals from `pages/index.vue` (584 → <500)
+
+**Files:**
+- Create: `app/components/home/AddSiteModal.vue` (~50 lines)
+- Create: `app/components/home/AddMachineModal.vue` (~70 lines)
+- Modify: `app/pages/index.vue`
+
+**Step 1: Extract `AddSiteModal.vue`**
+
+Move lines 261-297 (site modal template + form).
+Props: `open`, `disabled`. Events: `close`, `create`.
+
+**Step 2: Extract `AddMachineModal.vue`**
+
+Move lines 300-368 (machine modal template + form).
+Props: `open`, `sites`, `disabled`. Events: `close`, `create`.
+
+**Step 3: Update `index.vue` to use the components**
+
+Move `newSite` and `newMachine` reactive objects into the modals.
+
+**Step 4: Run lint + typecheck**
+
+**Step 5: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract home page modals into components"
+```
+
+---
+
+### Task 12: Reduce `PieceModelStructureEditor.vue` (578 → <500)
+
+After Task 9 (if `useDragReorder` composable is already available), the drag logic is already minimal. The remaining bulk is field/product CRUD.
+
+**Files:**
+- Create: `app/composables/usePieceStructureEditorLogic.ts`
+- Modify: `app/components/PieceModelStructureEditor.vue`
+
+**Step 1: Create `usePieceStructureEditorLogic.ts`**
+
+Extract:
+- `hydrateFields`, `hydrateProducts`, `toEditorField`, `toEditorProduct`
+- `buildPayload`, `serializeStructure`, `emitUpdate`
+- `normalizeProductEntry`, product type metadata updates
+- Drag state and drag functions
+
+**Step 2: Update the component**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract PieceModelStructureEditor logic into composable"
+```
+
+---
+
+### Task 13: Extract related modal from `ManagementView.vue` (577 → <500)
+
+**Files:**
+- Create: `app/components/model-types/RelatedItemsModal.vue` (~100 lines)
+- Modify: `app/components/model-types/ManagementView.vue`
+
+**Step 1: Create `RelatedItemsModal.vue`**
+
+Move the related items modal template (lines 109-161) and its logic (`relatedModalOpen`, `relatedItems`, `relatedLoading`, `relatedError`, `loadRelatedItems`, etc.).
+
+Props: `open`, `modelType`. Events: `close`, `open-edit`.
+
+**Step 2: Update `ManagementView.vue`**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract RelatedItemsModal from ManagementView"
+```
+
+---
+
+### Task 14: Reduce `ComponentItem.vue` (573 → <500)
+
+After Task 1 (DocumentListInline ~60 lines) and Task 9 (CustomFieldDisplay ~70 lines), the file drops to ~443 lines. **Already under 500 — no further action needed.**
+
+---
+
+### Task 15: Reduce `pages/product/[id]/edit.vue` (570 → <500)
+
+After Task 1 (DocumentListInline ~60 lines), drops to ~510. Need ~10 more lines extracted.
+
+**Files:**
+- Modify: `app/pages/product/[id]/edit.vue`
+
+**Step 1: Extract `loadProductType` and `hydrateForm` into a small composable or inline**
+
+Move `loadProductType` (lines 462-488) and `hydrateForm` (lines 490-508) into a shared `useProductEdit.ts` if beneficial, or just use Task 1 savings which may be enough.
+
+**Step 2: Run lint + typecheck**
+
+**Step 3: Commit (if changes needed)**
+
+---
+
+### Task 16: Reduce `pages/pieces/create.vue` (540 → <500)
+
+After Task 2 (StructureSkeletonPreview ~30 lines), drops to ~510. Need ~10 more lines.
+
+**Files:**
+- Modify: `app/pages/pieces/create.vue`
+
+**Step 1: Extract product selection logic**
+
+The `describeProductRequirement`, `productRequirementDescriptions`, `productRequirementEntries`, `productSelectionsFilled`, `ensureProductSelections`, `setProductSelection` block (lines 343-398, ~55 lines) is duplicated with `pages/pieces/[id]/edit.vue`.
+
+Extract into `app/shared/utils/pieceProductSelectionUtils.ts`.
+
+**Step 2: Update both piece pages to import from shared utils**
+
+**Step 3: Run lint + typecheck**
+
+**Step 4: Commit**
+
+```bash
+git commit -m "refactor(frontend) : extract shared piece product selection utils"
+```
+
+---
+
+## Execution order (dependencies)
+
+1. **Task 1** (DocumentListInline) — no deps, reduces 5 files
+2. **Task 2** (StructureSkeletonPreview) — no deps, reduces 4 files
+3. **Task 9** (CustomFieldDisplay) — no deps, reduces PieceItem + ComponentItem
+4. **Task 3** (componentStructure.ts split) — no deps
+5. **Task 4** (useMachineDetailData split) — no deps
+6. **Task 5** (StructureNodeEditor) — no deps
+7. **Task 10** (ComponentStructureAssignmentNode) — no deps
+8. **Task 11** (index.vue modals) — no deps
+9. **Task 12** (PieceModelStructureEditor) — no deps
+10. **Task 13** (ManagementView) — no deps
+11. **Task 16** (pieces/create.vue) — no deps
+12. **Task 6** (component/edit) — after Tasks 1, 2
+13. **Task 7** (component/create) — after Task 2
+14. **Task 8** (pieces/edit) — after Tasks 1, 2
+15. **Task 15** (product/edit) — after Task 1
+16. **Task 14** (ComponentItem) — verify after Tasks 1, 9
+
+Tasks 1-11 are independent and can be parallelized via subagents (pairs that don't touch the same files).
diff --git a/frontend/e2e/auth.setup.ts b/frontend/e2e/auth.setup.ts
new file mode 100644
index 0000000..c47f676
--- /dev/null
+++ b/frontend/e2e/auth.setup.ts
@@ -0,0 +1,35 @@
+import { test as setup, expect } from '@playwright/test'
+
+const AUTH_FILE = 'e2e/.auth/session.json'
+
+/**
+ * Authentication setup: selects the first available profile
+ * to establish a session cookie before running any test.
+ *
+ * The app uses a profile-based session system:
+ * - GET  /api/session/profiles  → list available profiles
+ * - POST /api/session/profile   → activate a profile (sets cookie)
+ *
+ * The global middleware (profile.global.ts) redirects to /profiles
+ * if no active profile is found.
+ */
+setup('select a profile to authenticate', async ({ page }) => {
+  // Go to the profiles page
+  await page.goto('/profiles')
+
+  // Wait for profiles to load
+  await expect(page.getByRole('heading', { name: 'Choisir un profil' })).toBeVisible({ timeout: 15_000 })
+
+  // Wait for at least one profile button to appear
+  const profileButton = page.locator('button.btn-outline').first()
+  await expect(profileButton).toBeVisible({ timeout: 10_000 })
+
+  // Click the first available profile
+  await profileButton.click()
+
+  // Wait for redirect to home page (profile selected → session cookie set)
+  await page.waitForURL('/', { timeout: 10_000 })
+
+  // Save authenticated state (cookies + localStorage)
+  await page.context().storageState({ path: AUTH_FILE })
+})
diff --git a/frontend/e2e/product-category-crud.spec.ts b/frontend/e2e/product-category-crud.spec.ts
new file mode 100644
index 0000000..8296db2
--- /dev/null
+++ b/frontend/e2e/product-category-crud.spec.ts
@@ -0,0 +1,166 @@
+import { test, expect } from '@playwright/test'
+
+/**
+ * E2E tests for Product Category CRUD operations.
+ *
+ * Prerequisites:
+ * - Frontend running on http://localhost:3001 (npm run dev)
+ * - Backend running on http://localhost:8081 (docker compose up)
+ * - Auth setup must run first (profile selected)
+ */
+
+const UNIQUE = Date.now()
+const CATEGORY_NAME = `E2E Catégorie Produit ${UNIQUE}`
+const CATEGORY_NOTES = `Notes de test automatisé ${UNIQUE}`
+const CATEGORY_NAME_UPDATED = `${CATEGORY_NAME} modifié`
+const CATEGORY_NOTES_UPDATED = `${CATEGORY_NOTES} — mis à jour`
+
+test.describe('Product Category CRUD', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  // ──────────────────────────────────────────────
+  // CREATE
+  // ──────────────────────────────────────────────
+
+  test('should display the product category list page', async ({ page }) => {
+    await page.goto('/product-category')
+    await expect(page.getByRole('heading', { name: 'Catégories de produit' })).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByText('Catégories enregistrées')).toBeVisible()
+  })
+
+  test('should navigate to the create form', async ({ page }) => {
+    await page.goto('/product-category')
+    // The toolbar button text is "Créer" (with a plus icon)
+    await page.getByRole('button', { name: /créer/i }).click()
+    await expect(page).toHaveURL('/product-category/new')
+    await expect(page.getByRole('heading', { name: 'Nouvelle catégorie de produit' })).toBeVisible()
+  })
+
+  test('should show validation error for short name', async ({ page }) => {
+    await page.goto('/product-category/new')
+    await page.locator('#model-type-name').fill('A')
+    // The form submit button in ModelTypeForm is also "Créer"
+    await page.locator('button[type="submit"]').click()
+    await expect(page.getByText('Le nom doit contenir au moins 2 caractères')).toBeVisible()
+  })
+
+  test('should create a new product category', async ({ page }) => {
+    await page.goto('/product-category/new')
+    await page.locator('#model-type-name').fill(CATEGORY_NAME)
+    await page.locator('#model-type-notes').fill(CATEGORY_NOTES)
+
+    // Verify category is locked to PRODUCT
+    const categorySelect = page.locator('#model-type-category')
+    await expect(categorySelect).toBeDisabled()
+    await expect(categorySelect).toHaveValue('PRODUCT')
+
+    await page.locator('button[type="submit"]').click()
+
+    // Should redirect to list and show success toast
+    await expect(page).toHaveURL('/product-category', { timeout: 10_000 })
+    await expect(page.getByText('Catégorie de produit créée avec succès')).toBeVisible()
+  })
+
+  // ──────────────────────────────────────────────
+  // READ
+  // ──────────────────────────────────────────────
+
+  test('should display the created category in the list', async ({ page }) => {
+    await page.goto('/product-category')
+    // Target the table cell specifically (desktop view also renders a mobile card)
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME })).toBeVisible({ timeout: 10_000 })
+  })
+
+  test('should find the category via search', async ({ page }) => {
+    await page.goto('/product-category')
+
+    // Type in search input (placeholder: "Rechercher par nom…")
+    const searchInput = page.getByPlaceholder('Rechercher par nom…')
+    await searchInput.fill(UNIQUE.toString())
+    // Wait for debounce (300ms) + API response
+    await page.waitForTimeout(500)
+
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME })).toBeVisible({ timeout: 5_000 })
+  })
+
+  // ──────────────────────────────────────────────
+  // UPDATE
+  // ──────────────────────────────────────────────
+
+  test('should navigate to the edit page', async ({ page }) => {
+    await page.goto('/product-category')
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME })).toBeVisible({ timeout: 10_000 })
+
+    // Find the row with our category and click "Éditer"
+    const row = page.getByRole('row').filter({ hasText: CATEGORY_NAME })
+    await row.getByRole('button', { name: 'Éditer' }).click()
+
+    await expect(page.getByRole('heading', { name: /modifier/i })).toBeVisible({ timeout: 10_000 })
+  })
+
+  test('should edit the category name and notes', async ({ page }) => {
+    await page.goto('/product-category')
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME })).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: CATEGORY_NAME })
+    await row.getByRole('button', { name: 'Éditer' }).click()
+    await expect(page.getByRole('heading', { name: /modifier/i })).toBeVisible({ timeout: 10_000 })
+
+    // Update name
+    const nameInput = page.locator('#model-type-name')
+    await nameInput.clear()
+    await nameInput.fill(CATEGORY_NAME_UPDATED)
+
+    // Update notes
+    const notesTextarea = page.locator('#model-type-notes')
+    await notesTextarea.clear()
+    await notesTextarea.fill(CATEGORY_NOTES_UPDATED)
+
+    await page.locator('button[type="submit"]').click()
+
+    // Should redirect and show success
+    await expect(page).toHaveURL('/product-category', { timeout: 10_000 })
+    await expect(page.getByText('Catégorie de produit mise à jour avec succès')).toBeVisible()
+  })
+
+  test('should display updated category in the list', async ({ page }) => {
+    await page.goto('/product-category')
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME_UPDATED })).toBeVisible({ timeout: 10_000 })
+  })
+
+  // ──────────────────────────────────────────────
+  // DELETE
+  // ──────────────────────────────────────────────
+
+  test('should cancel deletion when clicking Annuler', async ({ page }) => {
+    await page.goto('/product-category')
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME_UPDATED })).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: CATEGORY_NAME_UPDATED })
+    await row.getByRole('button', { name: 'Supprimer' }).click()
+
+    // Confirmation modal should appear
+    await expect(page.getByText('Supprimer ce type ?')).toBeVisible()
+    await page.getByRole('button', { name: 'Annuler' }).click()
+
+    // Category should still be present
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME_UPDATED })).toBeVisible()
+  })
+
+  test('should delete the category', async ({ page }) => {
+    await page.goto('/product-category')
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME_UPDATED })).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: CATEGORY_NAME_UPDATED })
+    await row.getByRole('button', { name: 'Supprimer' }).click()
+
+    // Confirm deletion in modal
+    await expect(page.getByText('Supprimer ce type ?')).toBeVisible()
+    // Click the confirm "Supprimer" button inside the modal (btn-error style)
+    await page.locator('button.btn-error').filter({ hasText: 'Supprimer' }).click()
+
+    // Should show success toast and category should disappear
+    await expect(page.getByText(/supprimé avec succès/i)).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByRole('cell', { name: CATEGORY_NAME_UPDATED })).not.toBeVisible()
+  })
+})
diff --git a/frontend/e2e/product-crud.spec.ts b/frontend/e2e/product-crud.spec.ts
new file mode 100644
index 0000000..2a11598
--- /dev/null
+++ b/frontend/e2e/product-crud.spec.ts
@@ -0,0 +1,299 @@
+import { test, expect, type Page } from '@playwright/test'
+
+/**
+ * E2E tests for Product CRUD operations.
+ *
+ * Prerequisites:
+ * - Frontend running on http://localhost:3001 (npm run dev)
+ * - Backend running on http://localhost:8081 (docker compose up)
+ * - Auth setup must run first (profile selected)
+ *
+ * These tests create a temporary product category, use it to test
+ * the full product CRUD, then clean up both.
+ */
+
+const UNIQUE = Date.now()
+const TEST_CATEGORY_NAME = `E2E Cat Produit ${UNIQUE}`
+const PRODUCT_NAME = `E2E Produit Test ${UNIQUE}`
+const PRODUCT_REFERENCE = `REF-E2E-${UNIQUE}`
+const PRODUCT_PRICE = '42.50'
+const PRODUCT_NAME_UPDATED = `${PRODUCT_NAME} modifié`
+const PRODUCT_REFERENCE_UPDATED = `${PRODUCT_REFERENCE}-UPD`
+const PRODUCT_PRICE_UPDATED = '99.99'
+
+// ──────────────────────────────────────────────
+// Helpers
+// ──────────────────────────────────────────────
+
+/**
+ * Creates a product category via the UI.
+ */
+async function createTestCategory(page: Page) {
+  await page.goto('/product-category/new')
+  await page.locator('#model-type-name').fill(TEST_CATEGORY_NAME)
+  await page.locator('button[type="submit"]').click()
+  await expect(page).toHaveURL('/product-category', { timeout: 10_000 })
+  await expect(page.getByText('Catégorie de produit créée avec succès')).toBeVisible()
+}
+
+/**
+ * Selects an option in a SearchSelect component.
+ *
+ * The SearchSelect renders:
+ *   .search-select > .relative > input[placeholder]
+ *   .search-select > .relative > div (dropdown) > ul > li > button
+ */
+async function selectSearchOption(page: Page, placeholder: string, searchText: string) {
+  const input = page.getByPlaceholder(placeholder)
+  await input.click()
+  await input.fill(searchText)
+
+  // The dropdown is inside .search-select > .relative > div > ul > li > button
+  const option = page.locator('.search-select ul li button')
+    .filter({ hasText: searchText })
+    .first()
+  await option.waitFor({ state: 'visible', timeout: 10_000 })
+  await option.click()
+}
+
+/**
+ * Cleans up test data: deletes the category via the UI.
+ */
+async function cleanupTestCategory(page: Page) {
+  await page.goto('/product-category')
+  // Wait for list to load
+  await page.waitForTimeout(1_000)
+
+  const row = page.getByRole('row').filter({ hasText: TEST_CATEGORY_NAME })
+  if (await row.isVisible().catch(() => false)) {
+    await row.getByRole('button', { name: 'Supprimer' }).click()
+    const confirmBtn = page.locator('button.btn-error').filter({ hasText: 'Supprimer' })
+    await confirmBtn.waitFor({ state: 'visible', timeout: 5_000 })
+    await confirmBtn.click()
+    await page.waitForTimeout(1_000)
+  }
+}
+
+test.describe('Product CRUD', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  // ──────────────────────────────────────────────
+  // SETUP: Create a test category
+  // ──────────────────────────────────────────────
+
+  test('setup: create a test product category', async ({ page }) => {
+    await createTestCategory(page)
+  })
+
+  // ──────────────────────────────────────────────
+  // LIST PAGE
+  // ──────────────────────────────────────────────
+
+  test('should display the product catalog page', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByRole('heading', { name: 'Catalogue des produits' })).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByRole('link', { name: /ajouter un produit/i })).toBeVisible()
+    await expect(page.getByRole('link', { name: /gérer les catégories/i })).toBeVisible()
+  })
+
+  test('should navigate to create product page', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await page.getByRole('link', { name: /ajouter un produit/i }).click()
+    await expect(page).toHaveURL('/product/create')
+    await expect(page.getByRole('heading', { name: 'Nouveau produit' })).toBeVisible()
+  })
+
+  // ──────────────────────────────────────────────
+  // CREATE
+  // ──────────────────────────────────────────────
+
+  test('should show disabled fields until category is selected', async ({ page }) => {
+    await page.goto('/product/create')
+
+    // Name input should be disabled before selecting a category
+    const nameInput = page.getByPlaceholder('Nom affiché dans le catalogue')
+    await expect(nameInput).toBeDisabled()
+  })
+
+  test('should create a product with all fields', async ({ page }) => {
+    await page.goto('/product/create')
+
+    // 1. Select category via SearchSelect
+    await selectSearchOption(page, 'Rechercher une catégorie...', TEST_CATEGORY_NAME)
+
+    // Wait for form to enable after category selection
+    const nameInput = page.getByPlaceholder('Nom affiché dans le catalogue')
+    await expect(nameInput).toBeEnabled({ timeout: 5_000 })
+
+    // 2. Fill form fields
+    await nameInput.clear()
+    await nameInput.fill(PRODUCT_NAME)
+
+    const referenceInput = page.getByPlaceholder('Référence interne ou fournisseur')
+    await referenceInput.fill(PRODUCT_REFERENCE)
+
+    const priceInput = page.getByPlaceholder('Valeur indicatrice')
+    await priceInput.fill(PRODUCT_PRICE)
+
+    // 3. Submit
+    await page.getByRole('button', { name: /créer le produit/i }).click()
+
+    // Should redirect to catalog and show success
+    await expect(page).toHaveURL('/product-catalog', { timeout: 15_000 })
+    await expect(page.getByText('Produit créé avec succès')).toBeVisible()
+  })
+
+  // ──────────────────────────────────────────────
+  // READ
+  // ──────────────────────────────────────────────
+
+  test('should display the created product in the catalog', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME)).toBeVisible({ timeout: 10_000 })
+  })
+
+  test('should show product reference in the catalog', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_REFERENCE)).toBeVisible({ timeout: 10_000 })
+  })
+
+  test('should find the product via search', async ({ page }) => {
+    await page.goto('/product-catalog')
+
+    const searchInput = page.getByPlaceholder('Nom ou référence…')
+    await searchInput.fill(PRODUCT_REFERENCE)
+    // Wait for client-side filtering
+    await page.waitForTimeout(300)
+
+    await expect(page.getByText(PRODUCT_NAME)).toBeVisible()
+    await expect(page.getByText(PRODUCT_REFERENCE)).toBeVisible()
+  })
+
+  test('should show category link in the catalog', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME)).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: PRODUCT_NAME })
+    await expect(row.getByText(TEST_CATEGORY_NAME)).toBeVisible()
+  })
+
+  test('should sort products by name', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await page.locator('#product-sort').selectOption('name')
+    await page.locator('#product-dir').selectOption('asc')
+    await expect(page.getByRole('heading', { name: 'Catalogue des produits' })).toBeVisible()
+  })
+
+  test('should sort products by creation date', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await page.locator('#product-sort').selectOption('createdAt')
+    await page.locator('#product-dir').selectOption('desc')
+    await expect(page.getByRole('heading', { name: 'Catalogue des produits' })).toBeVisible()
+  })
+
+  // ──────────────────────────────────────────────
+  // UPDATE
+  // ──────────────────────────────────────────────
+
+  test('should navigate to edit page from catalog', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME)).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: PRODUCT_NAME })
+    await row.getByRole('link', { name: 'Modifier' }).click()
+
+    await expect(page.getByRole('heading', { name: 'Modifier le produit' })).toBeVisible({ timeout: 10_000 })
+  })
+
+  test('should show category note on edit page', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME)).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: PRODUCT_NAME })
+    await row.getByRole('link', { name: 'Modifier' }).click()
+    await expect(page.getByRole('heading', { name: 'Modifier le produit' })).toBeVisible({ timeout: 10_000 })
+
+    // Category should be displayed but disabled
+    await expect(page.getByText("La catégorie d'origine ne peut pas être modifiée")).toBeVisible()
+  })
+
+  test('should update the product', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME)).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: PRODUCT_NAME })
+    await row.getByRole('link', { name: 'Modifier' }).click()
+    await expect(page.getByRole('heading', { name: 'Modifier le produit' })).toBeVisible({ timeout: 10_000 })
+
+    // Update name (label-text "Nom du produit" → sibling input)
+    const nameInput = page.locator('.form-control').filter({ hasText: 'Nom du produit' }).locator('input')
+    await nameInput.clear()
+    await nameInput.fill(PRODUCT_NAME_UPDATED)
+
+    // Update reference
+    const refInput = page.locator('.form-control').filter({ hasText: 'Référence' }).locator('input')
+    await refInput.clear()
+    await refInput.fill(PRODUCT_REFERENCE_UPDATED)
+
+    // Update price
+    const priceInput = page.locator('.form-control').filter({ hasText: 'Prix fournisseur' }).locator('input')
+    await priceInput.clear()
+    await priceInput.fill(PRODUCT_PRICE_UPDATED)
+
+    // Submit
+    await page.getByRole('button', { name: /enregistrer les modifications/i }).click()
+
+    await expect(page).toHaveURL('/product-catalog', { timeout: 10_000 })
+    await expect(page.getByText('Produit mis à jour avec succès')).toBeVisible()
+  })
+
+  test('should display updated product in catalog', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME_UPDATED)).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByText(PRODUCT_REFERENCE_UPDATED)).toBeVisible()
+  })
+
+  // ──────────────────────────────────────────────
+  // DELETE
+  // ──────────────────────────────────────────────
+
+  test('should cancel product deletion', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME_UPDATED)).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: PRODUCT_NAME_UPDATED })
+    await row.getByRole('button', { name: 'Supprimer' }).click()
+
+    // Confirmation modal
+    await expect(page.getByText(/voulez-vous vraiment supprimer/i)).toBeVisible()
+    await page.getByRole('button', { name: 'Annuler' }).click()
+
+    // Product should still be here
+    await expect(page.getByText(PRODUCT_NAME_UPDATED)).toBeVisible()
+  })
+
+  test('should delete the product', async ({ page }) => {
+    await page.goto('/product-catalog')
+    await expect(page.getByText(PRODUCT_NAME_UPDATED)).toBeVisible({ timeout: 10_000 })
+
+    const row = page.getByRole('row').filter({ hasText: PRODUCT_NAME_UPDATED })
+    await row.getByRole('button', { name: 'Supprimer' }).click()
+
+    // Confirm deletion in modal
+    await expect(page.getByText(/voulez-vous vraiment supprimer/i)).toBeVisible()
+    await page.locator('button.btn-error').filter({ hasText: 'Supprimer' }).click()
+
+    await expect(page.getByText(/supprimé/i)).toBeVisible({ timeout: 10_000 })
+    // The toast message contains the product name, so check the table specifically
+    const table = page.locator('table')
+    await expect(table.getByText(PRODUCT_NAME_UPDATED)).not.toBeVisible({ timeout: 5_000 })
+  })
+
+  // ──────────────────────────────────────────────
+  // CLEANUP: Remove the test category
+  // ──────────────────────────────────────────────
+
+  test('cleanup: delete the test product category', async ({ page }) => {
+    await cleanupTestCategory(page)
+  })
+})
diff --git a/frontend/env.example b/frontend/env.example
new file mode 100644
index 0000000..49e891d
--- /dev/null
+++ b/frontend/env.example
@@ -0,0 +1,27 @@
+# Configuration de l'API backend
+NUXT_PUBLIC_API_BASE_URL=http://localhost:3000
+
+# Configuration du serveur de développement
+NUXT_PUBLIC_APP_URL=http://localhost:3001
+NUXT_PUBLIC_APP_NAME="Inventory Management System"
+
+# Configuration de l'environnement
+NODE_ENV=development
+NUXT_APP_ENV=development
+
+# Configuration des fonctionnalités
+NUXT_PUBLIC_ENABLE_DEBUG=true
+NUXT_PUBLIC_ENABLE_ANALYTICS=false
+
+# Configuration de sécurité (optionnel)
+NUXT_PUBLIC_CSRF_TOKEN=your-csrf-token-here
+
+# Configuration des logs
+NUXT_PUBLIC_LOG_LEVEL=debug
+
+# Configuration des timeouts
+NUXT_PUBLIC_API_TIMEOUT=30000
+NUXT_PUBLIC_REQUEST_TIMEOUT=10000 
+
+# Version de l'application (mettre à jour à chaque release)
+NUXT_PUBLIC_APP_VERSION=0.1.0
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
new file mode 100644
index 0000000..d140a3b
--- /dev/null
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,83 @@
+import nuxt from '@nuxt/eslint-config';
+
+const globals = {
+  defineNuxtConfig: 'readonly',
+  defineNuxtRouteMiddleware: 'readonly',
+  navigateTo: 'readonly',
+  useRuntimeConfig: 'readonly',
+  $fetch: 'readonly',
+};
+
+const relaxedRules = {
+  // Vue rules — relaxed for legacy code
+  'vue/no-parsing-error': 'off',
+  'vue/no-required-prop-with-default': 'off',
+  'vue/no-mutating-props': 'off',
+  'vue/html-self-closing': 'off',
+  'vue/singleline-html-element-content-newline': 'off',
+  'vue/multiline-html-element-content-newline': 'off',
+  'vue/html-indent': 'off',
+  'vue/attributes-order': 'off',
+  'vue/multi-word-component-names': 'off',
+  'vue/no-multiple-template-root': 'off',
+  'vue/v-on-event-hyphenation': 'off',
+  'vue/require-default-prop': 'off',
+
+  // Console — allow console.error only
+  'no-console': ['warn', { allow: ['error'] }],
+
+  // Unused vars — warn, ignore underscore-prefixed
+  'no-unused-vars': 'off',
+  '@typescript-eslint/no-unused-vars': ['warn', {
+    argsIgnorePattern: '^_',
+    varsIgnorePattern: '^_',
+    caughtErrorsIgnorePattern: '^_',
+  }],
+
+  // TypeScript — progressive strictness
+  '@typescript-eslint/no-explicit-any': 'warn',
+  '@typescript-eslint/no-dynamic-delete': 'off',
+  '@typescript-eslint/no-invalid-void-type': 'off',
+  '@typescript-eslint/unified-signatures': 'off',
+
+  // Formatting — handled by Prettier/stylistic
+  'require-await': 'off',
+  'comma-dangle': 'off',
+  curly: 'off',
+  'operator-linebreak': 'off',
+  'space-before-function-paren': 'off',
+  'arrow-parens': 'off',
+  semi: 'off',
+  '@typescript-eslint/semi': 'off',
+  quotes: 'off',
+  'func-call-spacing': 'off',
+  'no-trailing-spaces': 'off',
+  indent: 'off',
+  'no-multiple-empty-lines': 'off',
+  'import/order': 'off',
+  'no-irregular-whitespace': 'off',
+  'no-useless-escape': 'off',
+  'nuxt/prefer-import-meta': 'off',
+};
+
+export default await nuxt(
+  {
+    features: {
+      stylistic: false,
+      typescript: true,
+      nuxt: {
+        sortConfigKeys: false,
+      },
+    },
+    dirs: {
+      root: ['.', './app'],
+    },
+  },
+  {
+    name: 'project/custom-overrides',
+    languageOptions: {
+      globals,
+    },
+    rules: relaxedRules,
+  }
+);
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
new file mode 100644
index 0000000..ccab97c
--- /dev/null
+++ b/frontend/nuxt.config.ts
@@ -0,0 +1,81 @@
+import tailwindcss from '@tailwindcss/vite'
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Lire la version depuis le fichier VERSION à la racine du projet parent
+const getAppVersion = (): string => {
+  try {
+    const __dirname = dirname(fileURLToPath(import.meta.url))
+    const versionPath = resolve(__dirname, '..', 'VERSION')
+    return readFileSync(versionPath, 'utf-8').trim()
+  } catch {
+    return '0.0.0'
+  }
+}
+
+const appVersion = process.env.NUXT_PUBLIC_APP_VERSION || getAppVersion()
+
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  components: {
+    dirs: [
+      { path: '~/components', pathPrefix: false },
+    ],
+  },
+  ssr: false, // Désactive le SSR pour un mode SPA pur (Client-Side Rendering uniquement)
+  devtools: { enabled: true },
+  devServer: {
+    host: '0.0.0.0',
+    port: 3000
+  },
+  modules: [
+    [
+      'unplugin-icons/nuxt',
+      {
+        componentPrefix: 'Icon',
+        warn: process.env.NODE_ENV === 'development',
+        collections: {
+          lucide: () => import('@iconify-json/lucide/icons.json').then(i => i.default)
+        }
+      }
+    ]
+  ],
+  runtimeConfig: {
+    apiBaseUrl: process.env.NUXT_API_BASE_URL
+      || process.env.NUXT_PUBLIC_API_BASE_URL
+      || 'http://localhost/api',
+    public: {
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '/api',
+      appUrl: process.env.NUXT_PUBLIC_APP_URL || 'http://localhost:3001',
+      appName: process.env.NUXT_PUBLIC_APP_NAME || 'Inventory Management System',
+      appVersion: appVersion,
+      apiTimeout: process.env.NUXT_PUBLIC_API_TIMEOUT || '30000',
+      requestTimeout: process.env.NUXT_PUBLIC_REQUEST_TIMEOUT || '10000',
+      enableDebug: process.env.NUXT_PUBLIC_ENABLE_DEBUG || 'false',
+      enableAnalytics: process.env.NUXT_PUBLIC_ENABLE_ANALYTICS || 'false',
+      csrfToken: process.env.NUXT_PUBLIC_CSRF_TOKEN || '',
+      logLevel: process.env.NUXT_PUBLIC_LOG_LEVEL || 'warn'
+    }
+  },
+  vite: {
+    plugins: [tailwindcss()],
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost',
+          changeOrigin: true,
+        },
+      },
+    },
+  },
+  css: ['~/assets/app.css'],
+  router: {
+    options: {
+      strict: false
+    }
+  },
+  experimental: {
+    payloadExtraction: false
+  }
+})
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..5a99f60
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,14635 @@
+{
+  "name": "nuxt-app",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "nuxt-app",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "@tailwindcss/vite": "^4.1.11",
+        "daisyui": "^5.0.48",
+        "nuxt": "^4.0.1",
+        "tailwindcss": "^4.1.11",
+        "vue": "^3.5.17",
+        "vue-router": "^4.5.1"
+      },
+      "devDependencies": {
+        "@iconify-json/lucide": "^1.2.68",
+        "@nuxt/eslint-config": "^1.9.0",
+        "@playwright/test": "^1.58.2",
+        "@rushstack/eslint-patch": "^1.12.0",
+        "@types/node": "^25.2.1",
+        "@typescript-eslint/eslint-plugin": "^8.44.1",
+        "@typescript-eslint/parser": "^8.44.1",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "@vue/test-utils": "^2.4.6",
+        "eslint": "^9.36.0",
+        "eslint-plugin-vue": "^10.5.0",
+        "happy-dom": "^20.5.3",
+        "typescript": "^5.7.3",
+        "unplugin-icons": "^0.19.3",
+        "vitest": "^4.0.18",
+        "vue-eslint-parser": "^10.2.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
+      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz",
+      "integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
+      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.3.tgz",
+      "integrity": "sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
+      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.4"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.0.tgz",
+      "integrity": "sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
+      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@clack/core": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.5.0.tgz",
+      "integrity": "sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.11.0.tgz",
+      "integrity": "sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@clack/core": "0.5.0",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@cloudflare/kv-asset-handler": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.4.0.tgz",
+      "integrity": "sha512-+tv3z+SPp+gqTIcImN9o0hqE9xyfQjI1XD9pL6NuKjua9B1y7mNYv0S9cP+QEbA4ppVgGZEmKOvHX5G5Ei1CVA==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "mime": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@cloudflare/kv-asset-handler/node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@es-joy/jsdoccomment": {
+      "version": "0.56.0",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.56.0.tgz",
+      "integrity": "sha512-c6EW+aA1w2rjqOMjbL93nZlwxp6c1Ln06vTYs5FjRRhmJXK8V/OrSXdT+pUr4aRYgjCgu8/OkiZr0tzeVrRSbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.8",
+        "@typescript-eslint/types": "^8.42.0",
+        "comment-parser": "1.4.1",
+        "esquery": "^1.6.0",
+        "jsdoc-type-pratt-parser": "~5.1.0"
+      },
+      "engines": {
+        "node": ">=20.11.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
+      "integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.10.tgz",
+      "integrity": "sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.10.tgz",
+      "integrity": "sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.10.tgz",
+      "integrity": "sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.10.tgz",
+      "integrity": "sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.10.tgz",
+      "integrity": "sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.10.tgz",
+      "integrity": "sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.10.tgz",
+      "integrity": "sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.10.tgz",
+      "integrity": "sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.10.tgz",
+      "integrity": "sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.10.tgz",
+      "integrity": "sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.10.tgz",
+      "integrity": "sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.10.tgz",
+      "integrity": "sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.10.tgz",
+      "integrity": "sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.10.tgz",
+      "integrity": "sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.10.tgz",
+      "integrity": "sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.10.tgz",
+      "integrity": "sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.10.tgz",
+      "integrity": "sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.10.tgz",
+      "integrity": "sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.10.tgz",
+      "integrity": "sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.10.tgz",
+      "integrity": "sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.10.tgz",
+      "integrity": "sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.10.tgz",
+      "integrity": "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/compat": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.0.tgz",
+      "integrity": "sha512-DEzm5dKeDBPm3r08Ixli/0cmxr8LkRdwxMRUIJBlSCpAwSrvFEJpVBzV+66JhDxiaqKxnRzCXhtiMiczF7Hglg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.40 || 9"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/compat/node_modules/@eslint/core": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
+      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
+      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.36.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.36.0.tgz",
+      "integrity": "sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.15.2",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.2.68",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.68.tgz",
+      "integrity": "sha512-lR5xNJdn2CT0iR7lM25G4SewBO4G2hbr3fTWOc3AE9BspflEcneh02E3l9TBaCU/JOHozTJevWLrxBGypD7Tng==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ioredis/commands": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz",
+      "integrity": "sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==",
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@koa/router": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@koa/router/-/router-12.0.2.tgz",
+      "integrity": "sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "http-errors": "^2.0.0",
+        "koa-compose": "^4.1.0",
+        "methods": "^1.1.2",
+        "path-to-regexp": "^6.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@kwsites/file-exists": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
+      "integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1"
+      }
+    },
+    "node_modules/@kwsites/promise-deferred": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
+      "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
+      "license": "MIT"
+    },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.0.tgz",
+      "integrity": "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "consola": "^3.2.3",
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^7.0.5",
+        "node-fetch": "^2.6.7",
+        "nopt": "^8.0.0",
+        "semver": "^7.5.3",
+        "tar": "^7.4.0"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.5.tgz",
+      "integrity": "sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nuxt/cli": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/cli/-/cli-3.28.0.tgz",
+      "integrity": "sha512-WQ751WxWLBIeH3TDFt/LWQ2znyAKxpR5+gpv80oerwnVQs4GKajAfR6dIgExXZkjaPUHEFv2lVD9vM+frbprzw==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "citty": "^0.1.6",
+        "clipboardy": "^4.0.0",
+        "confbox": "^0.2.2",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "exsolve": "^1.0.7",
+        "fuse.js": "^7.1.0",
+        "get-port-please": "^3.2.0",
+        "giget": "^2.0.0",
+        "h3": "^1.15.4",
+        "httpxy": "^0.1.7",
+        "jiti": "^2.5.1",
+        "listhen": "^1.9.0",
+        "nypm": "^0.6.1",
+        "ofetch": "^1.4.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^2.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyexec": "^1.0.1",
+        "ufo": "^1.6.1",
+        "youch": "^4.1.0-beta.11"
+      },
+      "bin": {
+        "nuxi": "bin/nuxi.mjs",
+        "nuxi-ng": "bin/nuxi.mjs",
+        "nuxt": "bin/nuxi.mjs",
+        "nuxt-cli": "bin/nuxi.mjs"
+      },
+      "engines": {
+        "node": "^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@nuxt/cli/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@nuxt/devalue": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/devalue/-/devalue-2.0.2.tgz",
+      "integrity": "sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==",
+      "license": "MIT"
+    },
+    "node_modules/@nuxt/devtools": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-2.6.5.tgz",
+      "integrity": "sha512-Xh9XF1SzCTL5Zj6EULqsN2UjiNj4zWuUpS69rGAy5C55UTaj+Wn46IkDc6Q0+EKkGI279zlG6SzPRFawqPPUEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/devtools-kit": "2.6.5",
+        "@nuxt/devtools-wizard": "2.6.5",
+        "@nuxt/kit": "^3.19.2",
+        "@vue/devtools-core": "^7.7.7",
+        "@vue/devtools-kit": "^7.7.7",
+        "birpc": "^2.5.0",
+        "consola": "^3.4.2",
+        "destr": "^2.0.5",
+        "error-stack-parser-es": "^1.0.5",
+        "execa": "^8.0.1",
+        "fast-npm-meta": "^0.4.6",
+        "get-port-please": "^3.2.0",
+        "hookable": "^5.5.3",
+        "image-meta": "^0.2.1",
+        "is-installed-globally": "^1.0.0",
+        "launch-editor": "^2.11.1",
+        "local-pkg": "^1.1.2",
+        "magicast": "^0.3.5",
+        "nypm": "^0.6.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^2.3.0",
+        "semver": "^7.7.2",
+        "simple-git": "^3.28.0",
+        "sirv": "^3.0.2",
+        "structured-clone-es": "^1.0.0",
+        "tinyglobby": "^0.2.15",
+        "vite-plugin-inspect": "^11.3.3",
+        "vite-plugin-vue-tracer": "^1.0.0",
+        "which": "^5.0.0",
+        "ws": "^8.18.3"
+      },
+      "bin": {
+        "devtools": "cli.mjs"
+      },
+      "peerDependencies": {
+        "vite": ">=6.0"
+      }
+    },
+    "node_modules/@nuxt/devtools-kit": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-2.6.5.tgz",
+      "integrity": "sha512-t+NxoENyzJ8KZDrnbVYv3FJI5VXqSi6X4w6ZsuIIh0aKABu6+6k9nR/LoEhrM0oekn/2LDhA0NmsRZyzCXt2xQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.19.2",
+        "execa": "^8.0.1"
+      },
+      "peerDependencies": {
+        "vite": ">=6.0"
+      }
+    },
+    "node_modules/@nuxt/devtools-wizard": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-2.6.5.tgz",
+      "integrity": "sha512-nYYGxT4lmQDvfHL6qolNWLu0QTavsdN/98F57falPuvdgs5ev1NuYsC12hXun+5ENcnigEcoM9Ij92qopBgqmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "consola": "^3.4.2",
+        "diff": "^8.0.2",
+        "execa": "^8.0.1",
+        "magicast": "^0.3.5",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "prompts": "^2.4.2",
+        "semver": "^7.7.2"
+      },
+      "bin": {
+        "devtools-wizard": "cli.mjs"
+      }
+    },
+    "node_modules/@nuxt/devtools/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@nuxt/devtools/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@nuxt/devtools/node_modules/which": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
+      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@nuxt/eslint-config": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/eslint-config/-/eslint-config-1.9.0.tgz",
+      "integrity": "sha512-KLiYlX/MmWR9dhC0u7GSZQl6wyVLGAHme5aAL5fAUT1PLYgcFiJIUg1Z+b296LmwHGTa+oGPRBIk3yoDmX9/9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@clack/prompts": "^0.11.0",
+        "@eslint/js": "^9.33.0",
+        "@nuxt/eslint-plugin": "1.9.0",
+        "@stylistic/eslint-plugin": "^5.2.3",
+        "@typescript-eslint/eslint-plugin": "^8.39.1",
+        "@typescript-eslint/parser": "^8.39.1",
+        "eslint-config-flat-gitignore": "^2.1.0",
+        "eslint-flat-config-utils": "^2.1.1",
+        "eslint-merge-processors": "^2.0.0",
+        "eslint-plugin-import-lite": "^0.3.0",
+        "eslint-plugin-import-x": "^4.16.1",
+        "eslint-plugin-jsdoc": "^54.1.0",
+        "eslint-plugin-regexp": "^2.10.0",
+        "eslint-plugin-unicorn": "^60.0.0",
+        "eslint-plugin-vue": "^10.4.0",
+        "eslint-processor-vue-blocks": "^2.0.0",
+        "globals": "^16.3.0",
+        "local-pkg": "^1.1.1",
+        "pathe": "^2.0.3",
+        "vue-eslint-parser": "^10.2.0"
+      },
+      "peerDependencies": {
+        "eslint": "^9.0.0",
+        "eslint-plugin-format": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-format": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/eslint-plugin": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/eslint-plugin/-/eslint-plugin-1.9.0.tgz",
+      "integrity": "sha512-DY4ZSavgFyKQxI/NCOpSCUHg3dpS2O4lAdic5UmvP2NWj1xwtvmA9UwEZQ2nW2/f/Km6N+Q53UsgFSIBjz8jDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "^8.39.1",
+        "@typescript-eslint/utils": "^8.39.1"
+      },
+      "peerDependencies": {
+        "eslint": "^9.0.0"
+      }
+    },
+    "node_modules/@nuxt/kit": {
+      "version": "3.19.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.19.2.tgz",
+      "integrity": "sha512-+QiqO0WcIxsKLUqXdVn3m4rzTRm2fO9MZgd330utCAaagGmHsgiMJp67kE14boJEPutnikfz3qOmrzBnDIHUUg==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/schema": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-4.1.2.tgz",
+      "integrity": "sha512-uFr13C6c52OFbF3hZVIV65KvhQRyrwp1GlAm7EVNGjebY8279QEel57T4R9UA1dn2Et6CBynBFhWoFwwo97Pig==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "^3.5.21",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "std-env": "^3.9.0",
+        "ufo": "1.6.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/telemetry": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.6.6.tgz",
+      "integrity": "sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.15.4",
+        "citty": "^0.1.6",
+        "consola": "^3.4.2",
+        "destr": "^2.0.3",
+        "dotenv": "^16.4.7",
+        "git-url-parse": "^16.0.1",
+        "is-docker": "^3.0.0",
+        "ofetch": "^1.4.1",
+        "package-manager-detector": "^1.1.0",
+        "pathe": "^2.0.3",
+        "rc9": "^2.1.2",
+        "std-env": "^3.8.1"
+      },
+      "bin": {
+        "nuxt-telemetry": "bin/nuxt-telemetry.mjs"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/telemetry/node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/@nuxt/vite-builder": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-4.1.2.tgz",
+      "integrity": "sha512-to9NKVtzMBtyuhIIVgwo/ph5UCONcxkVsoAjm8HnSkDi0o9nDPhHOAg1AUMlvPnHpdXOzwnSrXo/t8E7W+UZ/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "4.1.2",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vitejs/plugin-vue-jsx": "^5.1.1",
+        "autoprefixer": "^10.4.21",
+        "consola": "^3.4.2",
+        "cssnano": "^7.1.1",
+        "defu": "^6.1.4",
+        "esbuild": "^0.25.9",
+        "escape-string-regexp": "^5.0.0",
+        "exsolve": "^1.0.7",
+        "get-port-please": "^3.2.0",
+        "h3": "^1.15.4",
+        "jiti": "^2.5.1",
+        "knitwork": "^1.2.0",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "mocked-exports": "^0.1.1",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "postcss": "^8.5.6",
+        "rollup-plugin-visualizer": "^6.0.3",
+        "std-env": "^3.9.0",
+        "ufo": "^1.6.1",
+        "unenv": "^2.0.0-rc.21",
+        "vite": "^7.1.5",
+        "vite-node": "^3.2.4",
+        "vite-plugin-checker": "^0.10.3",
+        "vue-bundle-renderer": "^2.1.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/@nuxt/vite-builder/node_modules/@nuxt/kit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
+      "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/vite-builder/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.14.0.tgz",
+      "integrity": "sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.16.0",
+        "autoprefixer": "^10.4.20",
+        "c12": "^3.0.2",
+        "consola": "^3.4.0",
+        "defu": "^6.1.4",
+        "h3": "^1.15.1",
+        "klona": "^2.0.6",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.1.0",
+        "postcss": "^8.5.3",
+        "postcss-nesting": "^13.0.1",
+        "tailwind-config-viewer": "^2.0.4",
+        "tailwindcss": "~3.4.17",
+        "ufo": "^1.5.4",
+        "unctx": "^2.4.1"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/tailwind-config-viewer": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/tailwind-config-viewer/-/tailwind-config-viewer-2.0.4.tgz",
+      "integrity": "sha512-icvcmdMmt9dphvas8wL40qttrHwAnW3QEN4ExJ2zICjwRsPj7gowd1cOceaWG3IfTuM/cTNGQcx+bsjMtmV+cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@koa/router": "^12.0.1",
+        "commander": "^6.0.0",
+        "fs-extra": "^9.0.1",
+        "koa": "^2.14.2",
+        "koa-static": "^5.0.0",
+        "open": "^7.0.4",
+        "portfinder": "^1.0.26",
+        "replace-in-file": "^6.1.0"
+      },
+      "bin": {
+        "tailwind-config-viewer": "cli/index.js",
+        "tailwindcss-config-viewer": "cli/index.js"
+      },
+      "engines": {
+        "node": ">=13"
+      },
+      "peerDependencies": {
+        "tailwindcss": "1 || 2 || 2.0.1-compat || 3"
+      }
+    },
+    "node_modules/@nuxtjs/tailwindcss/node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@oxc-minify/binding-android-arm64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm64/-/binding-android-arm64-0.87.0.tgz",
+      "integrity": "sha512-ZbJmAfXvNAamOSnXId3BiM3DiuzlD1isqKjtmRFb/hpvChHHA23FSPrFcO16w+ugZKg33sZ93FinFkKtlC4hww==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-darwin-arm64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-arm64/-/binding-darwin-arm64-0.87.0.tgz",
+      "integrity": "sha512-ewmNsTY8YbjWOI8+EOWKTVATOYvG4Qq4zQHH5VFBeqhQPVusY1ORD6Ei+BijVKrnlbpjibLlkTl8IWqXCGK89A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-darwin-x64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-darwin-x64/-/binding-darwin-x64-0.87.0.tgz",
+      "integrity": "sha512-qDH4w4EYttSC3Cs2VCh+CiMYKrcL2SNmnguBZXoUXe/RNk3csM+RhgcwdpX687xGvOhTFhH5PCIA84qh3ZpIbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-freebsd-x64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-freebsd-x64/-/binding-freebsd-x64-0.87.0.tgz",
+      "integrity": "sha512-5kxjHlSev2A09rDeITk+LMHxSrU3Iu8pUb0Zp4m+ul8FKlB9FrvFkAYwbctin6g47O98s3Win7Ewhy0w8JaiUA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm-gnueabihf": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.87.0.tgz",
+      "integrity": "sha512-NjbGXnNaAl5EgyonaDg2cPyH2pTf5a/+AP/5SRCJ0KetpXV22ZSUCvcy04Yt4QqjMcDs+WnJaGVxwx15Ofr6Gw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm-musleabihf": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.87.0.tgz",
+      "integrity": "sha512-llAjfCA0iV2LMMl+LTR3JhqAc2iQmj+DTKd0VWOrbNOuNczeE9D5kJFkqYplD73LrkuqxrX9oDeUjjeLdVBPXw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.87.0.tgz",
+      "integrity": "sha512-tf2Shom09AaSmu7U1hYYcEFF/cd+20HtmQ8eyGsRkqD5bqUj6lDu8TNSU9FWZ9tcZ83NzyFMwXZWHyeeIIbpxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-arm64-musl": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.87.0.tgz",
+      "integrity": "sha512-pgWeYfSprtpnJVea9Q5eI6Eo80lDGlMw2JdcSMXmShtBjEhBl6bvDNHlV+6kNfh7iT65y/uC6FR8utFrRghu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-riscv64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.87.0.tgz",
+      "integrity": "sha512-O1QPczlT+lqNZVeKOdFxxL+s1RIlnixaJYFLrcqDcRyn82MGKLz7sAenBTFRQoIfLnSxtMGL6dqHOefYkQx7Cg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-s390x-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.87.0.tgz",
+      "integrity": "sha512-tcwt3ZUWOKfNLXN2edxFVHMlIuPvbuyMaKmRopgljSCfFcNHWhfTNlxlvmECRNhuQ91EcGwte6F1dwoeMCNd7A==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-x64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.87.0.tgz",
+      "integrity": "sha512-Xf4AXF14KXUzSnfgTcFLFSM0TykJhFw14+xwNvlAb6WdqXAKlMrz9joIAezc8dkW1NNscCVTsqBUPJ4RhvCM1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-linux-x64-musl": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-linux-x64-musl/-/binding-linux-x64-musl-0.87.0.tgz",
+      "integrity": "sha512-LIqvpx9UihEW4n9QbEljDnfUdAWqhr6dRqmzSFwVAeLZRUECluLCDdsdwemrC/aZkvnisA4w0LFcFr3HmeTLJg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-wasm32-wasi": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-wasm32-wasi/-/binding-wasm32-wasi-0.87.0.tgz",
+      "integrity": "sha512-h0xluvc+YryfH5G5dndjGHuA/D4Kp85EkPMxqoOjNudOKDCtdobEaC9horhCqnOOQ0lgn+PGFl3w8u4ToOuRrA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-win32-arm64-msvc": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.87.0.tgz",
+      "integrity": "sha512-fgxSx+TUc7e2rNtRAMnhHrjqh1e8p/JKmWxRZXtkILveMr/TOHGiDis7U3JJbwycmTZ+HSsJ/PNFQl+tKzmDxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-minify/binding-win32-x64-msvc": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-minify/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.87.0.tgz",
+      "integrity": "sha512-K6TTrlitEJgD0FGIW2r0t3CIJNqBkzHT97h49gZLS24ey2UG1zKt27iSHkpXMJYDiG97ZD2yv3pSph1ctMlFXw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-android-arm64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.87.0.tgz",
+      "integrity": "sha512-3APxTyYaAjpW5zifjzfsPgoIa4YHwA5GBjtgLRQpGVXCykXBIEbUTokoAs411ZuOwS3sdTVXBTGAdziXRd8rUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-arm64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.87.0.tgz",
+      "integrity": "sha512-99e8E76M+k3Gtwvs5EU3VTs2hQkJmvnrl/eu7HkBUc9jLFHA4nVjYSgukMuqahWe270udUYEPRfcWKmoE1Nukg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-x64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.87.0.tgz",
+      "integrity": "sha512-2rRo6Dz560/4ot5Q0KPUTEunEObkP8mDC9mMiH0RJk1FiOb9c+xpPbkYoUHNKuVMm8uIoiBCxIAbPtBhs9QaXQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-freebsd-x64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.87.0.tgz",
+      "integrity": "sha512-uR+WZAvWkFQPVoeqXgQFr7iy+3hEI295qTbQ4ujmklgM5eTX3YgMFoIV00Stloxfd1irSDDSaK7ySnnzF6mRJg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-gnueabihf": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.87.0.tgz",
+      "integrity": "sha512-Emm1NpVGKbwzQOIZJI8ZuZu0z8FAd5xscqdS6qpDFpDdEMxk6ab7o3nM8V09RhNCORAzeUlk4TBHQ2Crzjd50A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-musleabihf": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.87.0.tgz",
+      "integrity": "sha512-1PPCxRZSJXzQaqc8y+wH7EqPgSfQ/JU3pK6WTN/1SUe/8paNVSKKqk175a8BbRVxGUtPnwEG89pi+xfPTSE7GA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.87.0.tgz",
+      "integrity": "sha512-fcnnsfcyLamJOMVKq+BQ8dasb8gRnZtNpCUfZhaEFAdXQ7J2RmZreFzlygcn80iti0V7c5LejcjHbF4IdK3GAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-musl": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.87.0.tgz",
+      "integrity": "sha512-tBPkSPgRSSbmrje8CUovISi/Hj/tWjZJ3n/qnrjx2B+u86hWtwLsngtPDQa5d4seSyDaHSx6tNEUcH7+g5Ee0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.87.0.tgz",
+      "integrity": "sha512-z4UKGM4wv2wEAQAlx2pBq6+pDJw5J/5oDEXqW6yBSLbWLjLDo4oagmRSE3+giOWteUa+0FVJ+ypq4iYxBkYSWg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-s390x-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.87.0.tgz",
+      "integrity": "sha512-6W1ENe/nZtr2TBnrEzmdGEraEAdZOiH3YoUNNeQWuqwLkmpoHTJJdclieToPe/l2IKJ4WL3FsSLSGHE8yt/OEg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.87.0.tgz",
+      "integrity": "sha512-s3kB/Ii3X3IOZ27Iu7wx2zYkIcDO22Emu32SNC6kkUSy09dPBc1yaW14TnAkPMe/rvtuzR512JPWj3iGpl+Dng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-musl": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.87.0.tgz",
+      "integrity": "sha512-3+M9hfrZSDi4+Uy4Ll3rtOuVG3IHDQlj027jgtmAAHJK1eqp4CQfC7rrwE+LFUqUwX+KD2GwlxR+eHyyEf5Gbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-wasm32-wasi": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-wasm32-wasi/-/binding-wasm32-wasi-0.87.0.tgz",
+      "integrity": "sha512-2jgeEeOa4GbQQg2Et/gFTgs5wKS/+CxIg+CN2mMOJ4EqbmvUVeGiumO01oFOWTYnJy1oONwIocBzrnMuvOcItA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-arm64-msvc": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.87.0.tgz",
+      "integrity": "sha512-KZp9poaBaVvuFM0TrsHCDOjPQK5eMDXblz21boMhKHGW5/bOlkMlg3CYn5j0f67FkK68NSdNKREMxmibBeXllQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-x64-msvc": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.87.0.tgz",
+      "integrity": "sha512-86uisngtp/8XdcerIKxMyJTqgDSTJatkfpylpUH0d96W8Bb9E+bVvM2fIIhLWB0Eb03PeY2BdIT7DNIln9TnHg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.87.0.tgz",
+      "integrity": "sha512-ipZFWVGE9fADBVXXWJWY/cxpysc41Gt5upKDeb32F6WMgFyO7XETUMVq8UuREKCih+Km5E6p2VhEvf6Fuhey6g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@oxc-transform/binding-android-arm64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-android-arm64/-/binding-android-arm64-0.87.0.tgz",
+      "integrity": "sha512-B7W6J8T9cS054LUGLfYkYz8bz5+t+4yPftZ67Bn6MJ03okMLnbbEfm1bID1tqcP5tJwMurTILVy/dQfDYDcMgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-darwin-arm64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-arm64/-/binding-darwin-arm64-0.87.0.tgz",
+      "integrity": "sha512-HImW3xOPx7FHKqfC5WfE82onhRfnWQUiB7R+JgYrk+7NR404h3zANSPzu3V/W9lbDxlmHTcqoD2LKbNC5j0TQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-darwin-x64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-darwin-x64/-/binding-darwin-x64-0.87.0.tgz",
+      "integrity": "sha512-MDbgugi6mvuPTfS78E2jyozm7493Kuqmpc5r406CsUdEsXlnsF+xvmKlrW9ZIkisO74dD+HWouSiDtNyPQHjlw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-freebsd-x64": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-freebsd-x64/-/binding-freebsd-x64-0.87.0.tgz",
+      "integrity": "sha512-N0M5D/4haJw7BMn2WZ3CWz0WkdLyoK1+3KxOyCv2CPedMCxx6eQay2AtJxSzj9tjVU1+ukbSb2fDO24JIJGsVA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm-gnueabihf": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.87.0.tgz",
+      "integrity": "sha512-PubObCNOUOzm1S+P0yn7S+/6xRLbSPMqhgrb73L3p+J1Z20fv/FYVg0kFd36Yho24TSC/byOkebEZWAtxCasWw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm-musleabihf": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.87.0.tgz",
+      "integrity": "sha512-Nk2d/FS7sMCmCl99vHojzigakjDPamkjOXs2i+H71o/NqytS0pk3M+tXat8M3IGpeLJIEszA5Mv+dcq731nlYA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.87.0.tgz",
+      "integrity": "sha512-BxFkIcso2V1+FCDoU+KctxvJzSQVSnEZ5EEQ8O3Up9EoFVQRnZ8ktXvqYj2Oqvc4IYPskLPsKUgc9gdK8wGhUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-arm64-musl": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.87.0.tgz",
+      "integrity": "sha512-MZ1/TNaebhXK73j1UDfwyBFnAy0tT3n6otOkhlt1vlJwqboUS/D7E/XrCZmAuHIfVPxAXRPovkl7kfxLB43SKw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-riscv64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.87.0.tgz",
+      "integrity": "sha512-JCWE6n4Hicu0FVbvmLdH/dS8V6JykOUsbrbDYm6JwFlHr4eFTTlS2B+mh5KPOxcdeOlv/D/XRnvMJ6WGYs25EA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-s390x-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.87.0.tgz",
+      "integrity": "sha512-n2NTgM+3PqFagJV9UXRDNOmYesF+TO9SF9FeHqwVmW893ayef9KK+vfWAAhvOYHXYaKWT5XoHd87ODD7nruyhw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-x64-gnu": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.87.0.tgz",
+      "integrity": "sha512-ZOKW3wx0bW2O7jGdOzr8DyLZqX2C36sXvJdsHj3IueZZ//d/NjLZqEiUKz+q0JlERHtCVKShQ5PLaCx7NpuqNg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-linux-x64-musl": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-linux-x64-musl/-/binding-linux-x64-musl-0.87.0.tgz",
+      "integrity": "sha512-eIspx/JqkVMPK1CAYEOo2J8o49s4ZTf+32MSMUknIN2ZS1fvRmWS0D/xFFaLP/9UGhdrXRIPbn/iSYEA8JnV/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-wasm32-wasi": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-wasm32-wasi/-/binding-wasm32-wasi-0.87.0.tgz",
+      "integrity": "sha512-4uRjJQnt/+kmJUIC6Iwzn+MqqZhLP1zInPtDwgL37KI4VuUewUQWoL+sggMssMEgm7ZJwOPoZ6piuSWwMgOqgQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-win32-arm64-msvc": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.87.0.tgz",
+      "integrity": "sha512-l/qSi4/N5W1yXKU9+1gWGo0tBoRpp4zvHYrpsbq3zbefPL4VYdA0gKF7O10/ZQVkYylzxiVh2zpYO34/FbZdIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-transform/binding-win32-x64-msvc": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/@oxc-transform/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.87.0.tgz",
+      "integrity": "sha512-jG/MhMjfSdyj5KyhnwNWr4mnAlAsz+gNUYpjQ+UXWsfsoB3f8HqbsTkG02RBtNa/IuVQYvYYVf1eIimNN3gBEQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-wasm": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-wasm/-/watcher-wasm-2.5.1.tgz",
+      "integrity": "sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==",
+      "bundleDependencies": [
+        "napi-wasm"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "napi-wasm": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "license": "MIT"
+    },
+    "node_modules/@poppinss/colors": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.5.tgz",
+      "integrity": "sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==",
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^4.1.5"
+      }
+    },
+    "node_modules/@poppinss/colors/node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@poppinss/dumper": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@poppinss/dumper/-/dumper-0.6.4.tgz",
+      "integrity": "sha512-iG0TIdqv8xJ3Lt9O8DrPRxw1MRLjNpoqiSGU03P/wNLP/s0ra0udPJ1J2Tx5M0J3H/cVyEgpbn8xUKRY9j59kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@poppinss/colors": "^4.1.5",
+        "@sindresorhus/is": "^7.0.2",
+        "supports-color": "^10.0.0"
+      }
+    },
+    "node_modules/@poppinss/dumper/node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/exception": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@poppinss/exception/-/exception-1.2.2.tgz",
+      "integrity": "sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg==",
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/plugin-alias": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz",
+      "integrity": "sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs": {
+      "version": "28.0.6",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.6.tgz",
+      "integrity": "sha512-XSQB1K7FUU5QP+3lOQmVCE3I0FcbbNvmNT4VJSj93iUjayaARrTQeoRdiYQoftAJBLrR9t2agwAd3ekaTgHNlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.2",
+        "fdir": "^6.2.0",
+        "is-reference": "1.2.1",
+        "magic-string": "^0.30.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=16.0.0 || 14 >= 14.17"
+      },
+      "peerDependencies": {
+        "rollup": "^2.68.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-inject": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
+      "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-json": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
+      "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.1.tgz",
+      "integrity": "sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-replace": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.2.tgz",
+      "integrity": "sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "magic-string": "^0.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "license": "MIT",
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.2.tgz",
+      "integrity": "sha512-o3pcKzJgSGt4d74lSZ+OCnHwkKBeAbFDmbEm5gg70eA8VkyCuC/zV9TwBnmw6VjDlRdF4Pshfb+WE9E6XY1PoQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.2.tgz",
+      "integrity": "sha512-cqFSWO5tX2vhC9hJTK8WAiPIm4Q8q/cU8j2HQA0L3E1uXvBYbOZMhE2oFL8n2pKB5sOCHY6bBuHaRwG7TkfJyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.2.tgz",
+      "integrity": "sha512-vngduywkkv8Fkh3wIZf5nFPXzWsNsVu1kvtLETWxTFf/5opZmflgVSeLgdHR56RQh71xhPhWoOkEBvbehwTlVA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.2.tgz",
+      "integrity": "sha512-h11KikYrUCYTrDj6h939hhMNlqU2fo/X4NB0OZcys3fya49o1hmFaczAiJWVAFgrM1NCP6RrO7lQKeVYSKBPSQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.2.tgz",
+      "integrity": "sha512-/eg4CI61ZUkLXxMHyVlmlGrSQZ34xqWlZNW43IAU4RmdzWEx0mQJ2mN/Cx4IHLVZFL6UBGAh+/GXhgvGb+nVxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.2.tgz",
+      "integrity": "sha512-QOWgFH5X9+p+S1NAfOqc0z8qEpJIoUHf7OWjNUGOeW18Mx22lAUOiA9b6r2/vpzLdfxi/f+VWsYjUOMCcYh0Ng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.2.tgz",
+      "integrity": "sha512-kDWSPafToDd8LcBYd1t5jw7bD5Ojcu12S3uT372e5HKPzQt532vW+rGFFOaiR0opxePyUkHrwz8iWYEyH1IIQA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.2.tgz",
+      "integrity": "sha512-gKm7Mk9wCv6/rkzwCiUC4KnevYhlf8ztBrDRT9g/u//1fZLapSRc+eDZj2Eu2wpJ+0RzUKgtNijnVIB4ZxyL+w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.2.tgz",
+      "integrity": "sha512-66lA8vnj5mB/rtDNwPgrrKUOtCLVQypkyDa2gMfOefXK6rcZAxKLO9Fy3GkW8VkPnENv9hBkNOFfGLf6rNKGUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.2.tgz",
+      "integrity": "sha512-s+OPucLNdJHvuZHuIz2WwncJ+SfWHFEmlC5nKMUgAelUeBUnlB4wt7rXWiyG4Zn07uY2Dd+SGyVa9oyLkVGOjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.2.tgz",
+      "integrity": "sha512-8wTRM3+gVMDLLDdaT6tKmOE3lJyRy9NpJUS/ZRWmLCmOPIJhVyXwjBo+XbrrwtV33Em1/eCTd5TuGJm4+DmYjw==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.2.tgz",
+      "integrity": "sha512-6yqEfgJ1anIeuP2P/zhtfBlDpXUb80t8DpbYwXQ3bQd95JMvUaqiX+fKqYqUwZXqdJDd8xdilNtsHM2N0cFm6A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.2.tgz",
+      "integrity": "sha512-sshYUiYVSEI2B6dp4jMncwxbrUqRdNApF2c3bhtLAU0qA8Lrri0p0NauOsTWh3yCCCDyBOjESHMExonp7Nzc0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.2.tgz",
+      "integrity": "sha512-duBLgd+3pqC4MMwBrKkFxaZerUxZcYApQVC5SdbF5/e/589GwVvlRUnyqMFbM8iUSb1BaoX/3fRL7hB9m2Pj8Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.2.tgz",
+      "integrity": "sha512-tzhYJJidDUVGMgVyE+PmxENPHlvvqm1KILjjZhB8/xHYqAGeizh3GBGf9u6WdJpZrz1aCpIIHG0LgJgH9rVjHQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.2.tgz",
+      "integrity": "sha512-opH8GSUuVcCSSyHHcl5hELrmnk4waZoVpgn/4FDao9iyE4WpQhyWJ5ryl5M3ocp4qkRuHfyXnGqg8M9oKCEKRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.2.tgz",
+      "integrity": "sha512-LSeBHnGli1pPKVJ79ZVJgeZWWZXkEe/5o8kcn23M8eMKCUANejchJbF/JqzM4RRjOJfNRhKJk8FuqL1GKjF5oQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.2.tgz",
+      "integrity": "sha512-uPj7MQ6/s+/GOpolavm6BPo+6CbhbKYyZHUDvZ/SmJM7pfDBgdGisFX3bY/CBDMg2ZO4utfhlApkSfZ92yXw7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.2.tgz",
+      "integrity": "sha512-Z9MUCrSgIaUeeHAiNkm3cQyst2UhzjPraR3gYYfOjAuZI7tcFRTOD+4cHLPoS/3qinchth+V56vtqz1Tv+6KPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.2.tgz",
+      "integrity": "sha512-+GnYBmpjldD3XQd+HMejo+0gJGwYIOfFeoBQv32xF/RUIvccUz20/V6Otdv+57NE70D5pa8W/jVGDoGq0oON4A==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.2.tgz",
+      "integrity": "sha512-ApXFKluSB6kDQkAqZOKXBjiaqdF1BlKi+/eqnYe9Ee7U2K3pUDKsIyr8EYm/QDHTJIM+4X+lI0gJc3TTRhd+dA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.2.tgz",
+      "integrity": "sha512-ARz+Bs8kY6FtitYM96PqPEVvPXqEZmPZsSkXvyX19YzDqkCaIlhCieLLMI5hxO9SRZ2XtCtm8wxhy0iJ2jxNfw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
+      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.1.0.tgz",
+      "integrity": "sha512-7F/yz2IphV39hiS2zB4QYVkivrptHHh0K8qJJd9HhuWSdvf8AN7NpebW3CcDZDBQsUPMoDKWsY2WWgW7bqOcfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@speed-highlight/core": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.7.tgz",
+      "integrity": "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@stylistic/eslint-plugin": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.4.0.tgz",
+      "integrity": "sha512-UG8hdElzuBDzIbjG1QDwnYH0MQ73YLXDFHgZzB4Zh/YJfnw8XNsloVtytqzx0I2Qky9THSdpTmi8Vjn/pf/Lew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.0",
+        "@typescript-eslint/types": "^8.44.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
+      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.5.1",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.18",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
+      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-x64": "4.1.13",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
+      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
+      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
+      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
+      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
+      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
+      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
+      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
+      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
+      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
+      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.5",
+        "@emnapi/runtime": "^1.4.5",
+        "@emnapi/wasi-threads": "^1.0.4",
+        "@napi-rs/wasm-runtime": "^0.2.12",
+        "@tybys/wasm-util": "^0.10.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
+      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
+      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.13.tgz",
+      "integrity": "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.13",
+        "@tailwindcss/oxide": "4.1.13",
+        "tailwindcss": "4.1.13"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.2.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.1.tgz",
+      "integrity": "sha512-CPrnr8voK8vC6eEtyRzvMpgp3VyVRhgclonE7qYi6P9sXwYb59ucfrnmFBTaP0yUi8Gk4yZg/LlTJULGxvTNsg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/parse-path": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
+      "integrity": "sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.44.1.tgz",
+      "integrity": "sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/type-utils": "8.44.1",
+        "@typescript-eslint/utils": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.44.1",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.44.1.tgz",
+      "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.44.1.tgz",
+      "integrity": "sha512-ycSa60eGg8GWAkVsKV4E6Nz33h+HjTXbsDT4FILyL8Obk5/mx4tbvCNsLf9zret3ipSumAOG89UcCs/KRaKYrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.44.1",
+        "@typescript-eslint/types": "^8.44.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
+      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.44.1.tgz",
+      "integrity": "sha512-B5OyACouEjuIvof3o86lRMvyDsFwZm+4fBOqFHccIctYgBjqR3qT39FBYGN87khcgf0ExpdCBeGKpKRhSFTjKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.44.1.tgz",
+      "integrity": "sha512-KdEerZqHWXsRNKjF9NYswNISnFzXfXNDfPxoTh7tqohU/PRIbwTmsjGK6V9/RTYWau7NZvfo52lgVk+sJh0K3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1",
+        "@typescript-eslint/utils": "8.44.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
+      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.44.1",
+        "@typescript-eslint/tsconfig-utils": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.44.1.tgz",
+      "integrity": "sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
+      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.17.tgz",
+      "integrity": "sha512-jzmGZYeMAhETV6qfetmLbZzUjjx1TjdNvFSobeFZb73D7dwD9wl/nOAx36qq+TvjZsLJdF5PQWToz2oDGAUqCg==",
+      "license": "MIT",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "unhead": "2.0.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=3.5.18"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@vercel/nft": {
+      "version": "0.30.1",
+      "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.30.1.tgz",
+      "integrity": "sha512-2mgJZv4AYBFkD/nJ4QmiX5Ymxi+AisPLPcS/KPXVqniyQNqKXX+wjieAbDXQP3HcogfEbpHoRMs49Cd4pfkk8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^2.0.0",
+        "@rollup/pluginutils": "^5.1.3",
+        "acorn": "^8.6.0",
+        "acorn-import-attributes": "^1.9.5",
+        "async-sema": "^3.1.1",
+        "bindings": "^1.4.0",
+        "estree-walker": "2.0.2",
+        "glob": "^10.4.5",
+        "graceful-fs": "^4.2.9",
+        "node-gyp-build": "^4.2.2",
+        "picomatch": "^4.0.2",
+        "resolve-from": "^5.0.0"
+      },
+      "bin": {
+        "nft": "out/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@vercel/nft/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
+      "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-5.1.1.tgz",
+      "integrity": "sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.3",
+        "@babel/plugin-syntax-typescript": "^7.27.1",
+        "@babel/plugin-transform-typescript": "^7.28.0",
+        "@rolldown/pluginutils": "^1.0.0-beta.34",
+        "@vue/babel-plugin-jsx": "^1.5.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
+      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
+      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.18",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
+      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.18",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
+      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.18",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.18",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.23.tgz",
+      "integrity": "sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.23"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.23.tgz",
+      "integrity": "sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@vue-macros/common": {
+      "version": "3.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.0.0-beta.16.tgz",
+      "integrity": "sha512-8O2gWxWFiaoNkk7PGi0+p7NPGe/f8xJ3/INUufvje/RZOs7sJvlI1jnR4lydtRFa/mU0ylMXUXXjSK0fHDEYTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.17",
+        "ast-kit": "^2.1.1",
+        "local-pkg": "^1.1.1",
+        "magic-string-ast": "^1.0.0",
+        "unplugin-utils": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
+      "integrity": "sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.5.0.tgz",
+      "integrity": "sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.2",
+        "@vue/babel-helper-vue-transform-on": "1.5.0",
+        "@vue/babel-plugin-resolve-type": "1.5.0",
+        "@vue/shared": "^3.5.18"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.5.0.tgz",
+      "integrity": "sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/parser": "^7.28.0",
+        "@vue/compiler-sfc": "^3.5.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/shared": "3.5.22",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
+      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-core": "3.5.22",
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.19",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
+      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-core": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.7.tgz",
+      "integrity": "sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.7",
+        "@vue/devtools-shared": "^7.7.7",
+        "mitt": "^3.0.1",
+        "nanoid": "^5.1.0",
+        "pathe": "^2.0.3",
+        "vite-hot-client": "^2.0.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
+      "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.7",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-kit/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
+      "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.0.8.tgz",
+      "integrity": "sha512-eYs6PF7bxoPYvek9qxceo1BCwFbJZYqJll+WaYC8o8ec60exqj+n+QRGGiJHSeUfYp0hDxARbMdxMq/fbPgU5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.23",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^2.0.5",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.2"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
+      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
+      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
+      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/runtime-core": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
+      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "vue": "3.5.22"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
+    "node_modules/abbrev": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
+      "integrity": "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==",
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-2.0.7.tgz",
+      "integrity": "sha512-wE7y3jmYeb0+h6mr5BOovuqhFv22O/MV9j5p0ndJsa7z1zJNPGQ4ph5pQk/kTTCWRC3xsA4SmtwmkzQO+7NCNg==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ansis": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.1.0.tgz",
+      "integrity": "sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/archiver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-7.0.1.tgz",
+      "integrity": "sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^5.0.2",
+        "async": "^3.2.4",
+        "buffer-crc32": "^1.0.0",
+        "readable-stream": "^4.0.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^3.0.0",
+        "zip-stream": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-5.0.2.tgz",
+      "integrity": "sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^10.0.0",
+        "graceful-fs": "^4.2.0",
+        "is-stream": "^2.0.1",
+        "lazystream": "^1.0.0",
+        "lodash": "^4.17.15",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/are-docs-informative": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz",
+      "integrity": "sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "devOptional": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.2.tgz",
+      "integrity": "sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.0",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.8.2.tgz",
+      "integrity": "sha512-3pYeLyDZ6nJew9QeBhS4Nly02269Dkdk32+zdbbKmL6n4ZuaGorwwA+xx12xgOciA8BF1w9x+dlH7oUkFTW91w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "ast-kit": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/async-sema": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+      "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/b4a": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.7.3.tgz",
+      "integrity": "sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react-native-b4a": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-b4a": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/bare-events": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.7.0.tgz",
+      "integrity": "sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
+      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.6.1.tgz",
+      "integrity": "sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.26.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz",
+      "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.3",
+        "caniuse-lite": "^1.0.30001741",
+        "electron-to-chromium": "^1.5.218",
+        "node-releases": "^2.0.21",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
+      "integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/builtin-modules": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-5.0.0.tgz",
+      "integrity": "sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/c12": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.0.tgz",
+      "integrity": "sha512-K9ZkuyeJQeqLEyqldbYLG3wjqwpw4BVaAqvmxq3GYKK0b1A/yYQdIcJxkzAOWcNVWhJpRXAPfZFueekiY/L8Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.3",
+        "confbox": "^0.2.2",
+        "defu": "^6.1.4",
+        "dotenv": "^17.2.2",
+        "exsolve": "^1.0.7",
+        "giget": "^2.0.0",
+        "jiti": "^2.5.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.0.0",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cache-content-type": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.1.tgz",
+      "integrity": "sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^2.1.18",
+        "ylru": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/cache-content-type/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cache-content-type/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001775",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001775.tgz",
+      "integrity": "sha512-s3Qv7Lht9zbVKE9XoTyRG6wVDCKdtOFIjBGg3+Yhn6JaytuNKPIjBMTMIY1AnOH3seL5mvF+x33oGAyK3hVt3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/change-case": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
+      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz",
+      "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
+    "node_modules/clean-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
+      "integrity": "sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/clean-regexp/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/clipboardy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-4.0.0.tgz",
+      "integrity": "sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==",
+      "license": "MIT",
+      "dependencies": {
+        "execa": "^8.0.1",
+        "is-wsl": "^3.1.0",
+        "is64bit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cluster-key-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
+      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/comment-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.1.tgz",
+      "integrity": "sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "license": "MIT"
+    },
+    "node_modules/compatx": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/compatx/-/compatx-0.2.0.tgz",
+      "integrity": "sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==",
+      "license": "MIT"
+    },
+    "node_modules/compress-commons": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz",
+      "integrity": "sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "crc32-stream": "^6.0.0",
+        "is-stream": "^2.0.1",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/compress-commons/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "license": "MIT"
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/config-chain/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cookie-es": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.2.2.tgz",
+      "integrity": "sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==",
+      "license": "MIT"
+    },
+    "node_modules/cookies": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.9.1.tgz",
+      "integrity": "sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "keygrip": "~1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.45.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.45.1.tgz",
+      "integrity": "sha512-tqTt5T4PzsMIZ430XGviK4vzYSoeNJ6CXODi6c/voxOT6IZqBht5/EKaSNnYiEjjRYxjVz7DQIsOsY0XNi8PIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-6.0.0.tgz",
+      "integrity": "sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/croner": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/croner/-/croner-9.1.0.tgz",
+      "integrity": "sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crossws": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.3.5.tgz",
+      "integrity": "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==",
+      "license": "MIT",
+      "dependencies": {
+        "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.3.0.tgz",
+      "integrity": "sha512-LQF6N/3vkAMYF4xoHLJfG718HRJh34Z8BnNhd6bosOMIVjMlhuZK5++oZa3uYAgrI5+7x2o27gUqTR2U/KjUOQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.1.tgz",
+      "integrity": "sha512-fm4D8ti0dQmFPeF8DXSAA//btEmqCOgAc/9Oa3C1LW94h5usNrJEfrON7b4FkPZgnDEn6OUs5NdxiJZmAtGOpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-preset-default": "^7.0.9",
+        "lilconfig": "^3.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.9.tgz",
+      "integrity": "sha512-tCD6AAFgYBOVpMBX41KjbvRh9c2uUjLXRyV7KHSIrwHiq5Z9o0TFfUCoM3TwVrRsRteN3sVXGNvjVNxYzkpTsA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "css-declaration-sorter": "^7.2.0",
+        "cssnano-utils": "^5.0.1",
+        "postcss-calc": "^10.1.1",
+        "postcss-colormin": "^7.0.4",
+        "postcss-convert-values": "^7.0.7",
+        "postcss-discard-comments": "^7.0.4",
+        "postcss-discard-duplicates": "^7.0.2",
+        "postcss-discard-empty": "^7.0.1",
+        "postcss-discard-overridden": "^7.0.1",
+        "postcss-merge-longhand": "^7.0.5",
+        "postcss-merge-rules": "^7.0.6",
+        "postcss-minify-font-values": "^7.0.1",
+        "postcss-minify-gradients": "^7.0.1",
+        "postcss-minify-params": "^7.0.4",
+        "postcss-minify-selectors": "^7.0.5",
+        "postcss-normalize-charset": "^7.0.1",
+        "postcss-normalize-display-values": "^7.0.1",
+        "postcss-normalize-positions": "^7.0.1",
+        "postcss-normalize-repeat-style": "^7.0.1",
+        "postcss-normalize-string": "^7.0.1",
+        "postcss-normalize-timing-functions": "^7.0.1",
+        "postcss-normalize-unicode": "^7.0.4",
+        "postcss-normalize-url": "^7.0.1",
+        "postcss-normalize-whitespace": "^7.0.1",
+        "postcss-ordered-values": "^7.0.2",
+        "postcss-reduce-initial": "^7.0.4",
+        "postcss-reduce-transforms": "^7.0.1",
+        "postcss-svgo": "^7.1.0",
+        "postcss-unique-selectors": "^7.0.4"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-5.0.1.tgz",
+      "integrity": "sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/daisyui": {
+      "version": "5.1.23",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.23.tgz",
+      "integrity": "sha512-HgxmDidqO0FrcrkMVRz7KYwQi+eoZarMVud2kx5cGhTmTlaJPne/gbsSEn4/vM1svbp40ENCMjJsbBldCXhrOA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+      }
+    },
+    "node_modules/db0": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/db0/-/db0-0.3.2.tgz",
+      "integrity": "sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@electric-sql/pglite": "*",
+        "@libsql/client": "*",
+        "better-sqlite3": "*",
+        "drizzle-orm": "*",
+        "mysql2": "*",
+        "sqlite3": "*"
+      },
+      "peerDependenciesMeta": {
+        "@electric-sql/pglite": {
+          "optional": true
+        },
+        "@libsql/client": {
+          "optional": true
+        },
+        "better-sqlite3": {
+          "optional": true
+        },
+        "drizzle-orm": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "sqlite3": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==",
+      "license": "MIT"
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-browser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz",
+      "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.0.tgz",
+      "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "license": "MIT"
+    },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "license": "MIT"
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
+      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/devalue": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.3.2.tgz",
+      "integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/diff": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
+      "integrity": "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
+      "integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.18.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.2.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.2.tgz",
+      "integrity": "sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "license": "MIT"
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.224",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.224.tgz",
+      "integrity": "sha512-kWAoUu/bwzvnhpdZSIc6KUyvkI1rbRXMT0Eq8pKReyOyaPZcctMli+EgvcN1PAvwVc7Tdo4Fxi2PsLNDU05mdg==",
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-stack-parser-es": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
+      "integrity": "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/errx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/errx/-/errx-0.1.0.tgz",
+      "integrity": "sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==",
+      "license": "MIT"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "license": "MIT"
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
+      "integrity": "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.10",
+        "@esbuild/android-arm": "0.25.10",
+        "@esbuild/android-arm64": "0.25.10",
+        "@esbuild/android-x64": "0.25.10",
+        "@esbuild/darwin-arm64": "0.25.10",
+        "@esbuild/darwin-x64": "0.25.10",
+        "@esbuild/freebsd-arm64": "0.25.10",
+        "@esbuild/freebsd-x64": "0.25.10",
+        "@esbuild/linux-arm": "0.25.10",
+        "@esbuild/linux-arm64": "0.25.10",
+        "@esbuild/linux-ia32": "0.25.10",
+        "@esbuild/linux-loong64": "0.25.10",
+        "@esbuild/linux-mips64el": "0.25.10",
+        "@esbuild/linux-ppc64": "0.25.10",
+        "@esbuild/linux-riscv64": "0.25.10",
+        "@esbuild/linux-s390x": "0.25.10",
+        "@esbuild/linux-x64": "0.25.10",
+        "@esbuild/netbsd-arm64": "0.25.10",
+        "@esbuild/netbsd-x64": "0.25.10",
+        "@esbuild/openbsd-arm64": "0.25.10",
+        "@esbuild/openbsd-x64": "0.25.10",
+        "@esbuild/openharmony-arm64": "0.25.10",
+        "@esbuild/sunos-x64": "0.25.10",
+        "@esbuild/win32-arm64": "0.25.10",
+        "@esbuild/win32-ia32": "0.25.10",
+        "@esbuild/win32-x64": "0.25.10"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.36.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.36.0.tgz",
+      "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.1",
+        "@eslint/core": "^0.15.2",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.36.0",
+        "@eslint/plugin-kit": "^0.3.5",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-flat-gitignore": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-flat-gitignore/-/eslint-config-flat-gitignore-2.1.0.tgz",
+      "integrity": "sha512-cJzNJ7L+psWp5mXM7jBX+fjHtBvvh06RBlcweMhKD8jWqQw0G78hOW5tpVALGHGFPsBV+ot2H+pdDGJy6CV8pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint/compat": "^1.2.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "eslint": "^9.5.0"
+      }
+    },
+    "node_modules/eslint-flat-config-utils": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-flat-config-utils/-/eslint-flat-config-utils-2.1.4.tgz",
+      "integrity": "sha512-bEnmU5gqzS+4O+id9vrbP43vByjF+8KOs+QuuV4OlqAuXmnRW2zfI/Rza1fQvdihQ5h4DUo0NqFAiViD4mSrzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/eslint-import-context": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-context/-/eslint-import-context-0.1.9.tgz",
+      "integrity": "sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-tsconfig": "^4.10.1",
+        "stable-hash-x": "^0.2.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-context"
+      },
+      "peerDependencies": {
+        "unrs-resolver": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "unrs-resolver": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-merge-processors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-merge-processors/-/eslint-merge-processors-2.0.0.tgz",
+      "integrity": "sha512-sUuhSf3IrJdGooquEUB5TNpGNpBoQccbnaLHsb1XkBLUPPqCNivCpY05ZcpCOiV9uHwO2yxXEWVczVclzMxYlA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      }
+    },
+    "node_modules/eslint-plugin-import-lite": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import-lite/-/eslint-plugin-import-lite-0.3.0.tgz",
+      "integrity": "sha512-dkNBAL6jcoCsXZsQ/Tt2yXmMDoNt5NaBh/U7yvccjiK8cai6Ay+MK77bMykmqQA2bTF6lngaLCDij6MTO3KkvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/types": "^8.34.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0",
+        "typescript": ">=4.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-import-x": {
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import-x/-/eslint-plugin-import-x-4.16.1.tgz",
+      "integrity": "sha512-vPZZsiOKaBAIATpFE2uMI4w5IRwdv/FpQ+qZZMR4E+PeOcM4OeoEbqxRMnywdxP19TyB/3h6QBB0EWon7letSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "^8.35.0",
+        "comment-parser": "^1.4.1",
+        "debug": "^4.4.1",
+        "eslint-import-context": "^0.1.9",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.3 || ^10.0.1",
+        "semver": "^7.7.2",
+        "stable-hash-x": "^0.2.0",
+        "unrs-resolver": "^1.9.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-import-x"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint-import-resolver-node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/utils": {
+          "optional": true
+        },
+        "eslint-import-resolver-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-jsdoc": {
+      "version": "54.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-54.7.0.tgz",
+      "integrity": "sha512-u5Na4he2+6kY1rWqxzbQaAwJL3/tDCuT5ElDRc5UJ9stOeQeQ5L1JJ1kRRu7ldYMlOHMCJLsY8Mg/Tu3ExdZiQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@es-joy/jsdoccomment": "~0.56.0",
+        "are-docs-informative": "^0.0.2",
+        "comment-parser": "1.4.1",
+        "debug": "^4.4.1",
+        "escape-string-regexp": "^4.0.0",
+        "espree": "^10.4.0",
+        "esquery": "^1.6.0",
+        "parse-imports-exports": "^0.2.4",
+        "semver": "^7.7.2",
+        "spdx-expression-parse": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=20.11.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-regexp": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-regexp/-/eslint-plugin-regexp-2.10.0.tgz",
+      "integrity": "sha512-ovzQT8ESVn5oOe5a7gIDPD5v9bCSjIFJu57sVPDqgPRXicQzOnYfFN21WoQBQF18vrhT5o7UMKFwJQVVjyJ0ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.11.0",
+        "comment-parser": "^1.4.0",
+        "jsdoc-type-pratt-parser": "^4.0.0",
+        "refa": "^0.12.1",
+        "regexp-ast-analysis": "^0.7.1",
+        "scslre": "^0.3.0"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.44.0"
+      }
+    },
+    "node_modules/eslint-plugin-regexp/node_modules/jsdoc-type-pratt-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.8.0.tgz",
+      "integrity": "sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-unicorn": {
+      "version": "60.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-60.0.0.tgz",
+      "integrity": "sha512-QUzTefvP8stfSXsqKQ+vBQSEsXIlAiCduS/V1Em+FKgL9c21U/IIm20/e3MFy1jyCf14tHAhqC1sX8OTy6VUCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@eslint/plugin-kit": "^0.3.3",
+        "change-case": "^5.4.4",
+        "ci-info": "^4.3.0",
+        "clean-regexp": "^1.0.0",
+        "core-js-compat": "^3.44.0",
+        "esquery": "^1.6.0",
+        "find-up-simple": "^1.0.1",
+        "globals": "^16.3.0",
+        "indent-string": "^5.0.0",
+        "is-builtin-module": "^5.0.0",
+        "jsesc": "^3.1.0",
+        "pluralize": "^8.0.0",
+        "regexp-tree": "^0.1.27",
+        "regjsparser": "^0.12.0",
+        "semver": "^7.7.2",
+        "strip-indent": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.10.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.29.0"
+      }
+    },
+    "node_modules/eslint-plugin-vue": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.5.0.tgz",
+      "integrity": "sha512-7BZHsG3kC2vei8F2W8hnfDi9RK+cv5eKPMvzBdrl8Vuc0hR5odGQRli8VVzUkrmUHkxFEm4Iio1r5HOKslO0Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "natural-compare": "^1.4.0",
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.15",
+        "semver": "^7.6.3",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "@stylistic/eslint-plugin": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+        "@typescript-eslint/parser": "^7.0.0 || ^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "vue-eslint-parser": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@stylistic/eslint-plugin": {
+          "optional": true
+        },
+        "@typescript-eslint/parser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-processor-vue-blocks": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-processor-vue-blocks/-/eslint-processor-vue-blocks-2.0.0.tgz",
+      "integrity": "sha512-u4W0CJwGoWY3bjXAuFpc/b6eK3NQEI8MoeW7ritKj3G3z/WtHrKjkqf+wk8mPEy5rlMGS+k6AZYOw2XBoN/02Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "^3.3.0",
+        "eslint": ">=9.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "devOptional": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/events-universal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/events-universal/-/events-universal-1.0.1.tgz",
+      "integrity": "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-events": "^2.7.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-npm-meta": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/fast-npm-meta/-/fast-npm-meta-0.4.7.tgz",
+      "integrity": "sha512-aZU3i3eRcSb2NCq8i6N6IlyiTyF6vqAqzBGl2NBF6ngNx/GIqfYbkLDIKZ4z4P0o/RmtsFnVqHwdrSm13o4tnQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT"
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/find-up-simple": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/find-up-simple/-/find-up-simple-1.0.1.tgz",
+      "integrity": "sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "devOptional": true,
+      "license": "ISC"
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/fuse.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-port-please": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.2.0.tgz",
+      "integrity": "sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==",
+      "license": "MIT"
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/giget": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
+      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "defu": "^6.1.4",
+        "node-fetch-native": "^1.6.6",
+        "nypm": "^0.6.0",
+        "pathe": "^2.0.3"
+      },
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/git-up": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-8.1.1.tgz",
+      "integrity": "sha512-FDenSF3fVqBYSaJoYy1KSc2wosx0gCvKP+c+PRBht7cAaiCeQlBtfBDX9vgnNOHmdePlSFITVcn4pFfcgNvx3g==",
+      "license": "MIT",
+      "dependencies": {
+        "is-ssh": "^1.4.0",
+        "parse-url": "^9.2.0"
+      }
+    },
+    "node_modules/git-url-parse": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-16.1.0.tgz",
+      "integrity": "sha512-cPLz4HuK86wClEW7iDdeAKcCVlWXmrLpb2L+G9goW0Z1dtpNS6BXXSOckUTlJT/LDQViE1QZKstNORzHsLnobw==",
+      "license": "MIT",
+      "dependencies": {
+        "git-up": "^8.1.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/global-directory": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz",
+      "integrity": "sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "4.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globals": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.3",
+        "path-type": "^6.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gzip-size": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
+      "integrity": "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==",
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/h3": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/h3/-/h3-1.15.4.tgz",
+      "integrity": "sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie-es": "^1.2.2",
+        "crossws": "^0.3.5",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "iron-webcrypto": "^1.2.1",
+        "node-mock-http": "^1.0.2",
+        "radix3": "^1.1.2",
+        "ufo": "^1.6.1",
+        "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/happy-dom": {
+      "version": "20.5.3",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.5.3.tgz",
+      "integrity": "sha512-xqAxGnkRU0KNhheHpxb3uScqg/aehqUiVto/a9ApWMyNvnH9CAqHYq9dEPAovM6bOGbLstmTfGIln5ZIezEU0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
+        "@types/ws": "^8.18.1",
+        "entities": "^6.0.1",
+        "whatwg-mimetype": "^3.0.0",
+        "ws": "^8.18.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/http-assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
+      "integrity": "sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "~1.0.1",
+        "http-errors": "~1.8.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-assert/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-assert/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-assert/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-errors/node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-shutdown": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/http-shutdown/-/http-shutdown-1.2.2.tgz",
+      "integrity": "sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/httpxy": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/httpxy/-/httpxy-0.1.7.tgz",
+      "integrity": "sha512-pXNx8gnANKAndgga5ahefxc++tJvNL87CXoRwxn1cJE2ZkWEojF3tNfQIEhZX/vfpt+wzeAzpUI4qkediX1MLQ==",
+      "license": "MIT"
+    },
+    "node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/image-meta": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.2.1.tgz",
+      "integrity": "sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==",
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/impound": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/impound/-/impound-1.0.0.tgz",
+      "integrity": "sha512-8lAJ+1Arw2sMaZ9HE2ZmL5zOcMnt18s6+7Xqgq2aUVy4P1nlzAyPtzCDxsk51KVFwHEEdc6OWvUyqwHwhRYaug==",
+      "license": "MIT",
+      "dependencies": {
+        "exsolve": "^1.0.5",
+        "mocked-exports": "^0.1.1",
+        "pathe": "^2.0.3",
+        "unplugin": "^2.3.2",
+        "unplugin-utils": "^0.2.4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz",
+      "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/ioredis": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.8.0.tgz",
+      "integrity": "sha512-AUXbKn9gvo9hHKvk6LbZJQSKn/qIfkWXrnsyL9Yrf+oeXmla9Nmf6XEumOddyhM8neynpK5oAV6r9r99KBuwzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ioredis/commands": "1.4.0",
+        "cluster-key-slot": "^1.1.0",
+        "debug": "^4.3.4",
+        "denque": "^2.1.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.isarguments": "^3.1.0",
+        "redis-errors": "^1.2.0",
+        "redis-parser": "^3.0.0",
+        "standard-as-callback": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ioredis"
+      }
+    },
+    "node_modules/iron-webcrypto": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
+      "integrity": "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/brc-dd"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-builtin-module": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-5.0.0.tgz",
+      "integrity": "sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "builtin-modules": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-1.0.0.tgz",
+      "integrity": "sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "global-directory": "^4.0.1",
+        "is-path-inside": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "license": "MIT"
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-ssh": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.1.tgz",
+      "integrity": "sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "protocols": "^2.0.1"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
+      "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is64bit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is64bit/-/is64bit-2.0.0.tgz",
+      "integrity": "sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==",
+      "license": "MIT",
+      "dependencies": {
+        "system-architecture": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
+      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-beautify": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz",
+      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.4.2",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-beautify/node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdoc-type-pratt-parser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-5.1.1.tgz",
+      "integrity": "sha512-DYYlVP1fe4QBMh2xTIs20/YeTz2GYVbWAEZweHSZD+qQ/Cx2d5RShuhhsdk64eTjNq0FeVnteP/qVOgaywSRbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/keygrip": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
+      "integrity": "sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tsscmp": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/knitwork": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.2.0.tgz",
+      "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
+      "license": "MIT"
+    },
+    "node_modules/koa": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.16.2.tgz",
+      "integrity": "sha512-+CCssgnrWKx9aI3OeZwroa/ckG4JICxvIFnSiOUyl2Uv+UTI+xIw0FfFrWS7cQFpoePpr9o8csss7KzsTzNL8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^1.3.5",
+        "cache-content-type": "^1.0.0",
+        "content-disposition": "~0.5.2",
+        "content-type": "^1.0.4",
+        "cookies": "~0.9.0",
+        "debug": "^4.3.2",
+        "delegates": "^1.0.0",
+        "depd": "^2.0.0",
+        "destroy": "^1.0.4",
+        "encodeurl": "^1.0.2",
+        "escape-html": "^1.0.3",
+        "fresh": "~0.5.2",
+        "http-assert": "^1.3.0",
+        "http-errors": "^1.6.3",
+        "is-generator-function": "^1.0.7",
+        "koa-compose": "^4.1.0",
+        "koa-convert": "^2.0.0",
+        "on-finished": "^2.3.0",
+        "only": "~0.0.2",
+        "parseurl": "^1.3.2",
+        "statuses": "^1.5.0",
+        "type-is": "^1.6.16",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": "^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4"
+      }
+    },
+    "node_modules/koa-compose": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
+      "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==",
+      "license": "MIT"
+    },
+    "node_modules/koa-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/koa-convert/-/koa-convert-2.0.0.tgz",
+      "integrity": "sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==",
+      "license": "MIT",
+      "dependencies": {
+        "co": "^4.6.0",
+        "koa-compose": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/koa-send": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/koa-send/-/koa-send-5.0.1.tgz",
+      "integrity": "sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "http-errors": "^1.7.3",
+        "resolve-path": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/koa-send/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa-send/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa-send/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa-static": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/koa-static/-/koa-static-5.0.0.tgz",
+      "integrity": "sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.1.0",
+        "koa-send": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 7.6.0"
+      }
+    },
+    "node_modules/koa-static/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/koa/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/koa/node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa/node_modules/http-errors/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/koa/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/launch-editor": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
+      "integrity": "sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==",
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.1.1",
+        "shell-quote": "^1.8.3"
+      }
+    },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/listhen": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
+      "integrity": "sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/watcher": "^2.4.1",
+        "@parcel/watcher-wasm": "^2.4.1",
+        "citty": "^0.1.6",
+        "clipboardy": "^4.0.0",
+        "consola": "^3.2.3",
+        "crossws": ">=0.2.0 <0.4.0",
+        "defu": "^6.1.4",
+        "get-port-please": "^3.1.2",
+        "h3": "^1.12.0",
+        "http-shutdown": "^1.2.2",
+        "jiti": "^2.1.2",
+        "mlly": "^1.7.1",
+        "node-forge": "^1.3.1",
+        "pathe": "^1.1.2",
+        "std-env": "^3.7.0",
+        "ufo": "^1.5.4",
+        "untun": "^0.1.3",
+        "uqr": "^0.1.2"
+      },
+      "bin": {
+        "listen": "bin/listhen.mjs",
+        "listhen": "bin/listhen.mjs"
+      }
+    },
+    "node_modules/listhen/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT"
+    },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/magic-regexp": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/magic-regexp/-/magic-regexp-0.10.0.tgz",
+      "integrity": "sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==",
+      "license": "MIT",
+      "dependencies": {
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.12",
+        "mlly": "^1.7.2",
+        "regexp-tree": "^0.1.27",
+        "type-level-regexp": "~0.1.17",
+        "ufo": "^1.5.4",
+        "unplugin": "^2.0.0"
+      }
+    },
+    "node_modules/magic-regexp/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-1.0.2.tgz",
+      "integrity": "sha512-8ngQgLhcT0t3YBdn9CGkZqCYlvwW9pm7aWJwd7AxseVWf1RU8ZHCQvG1mt3N5vvUme+pXTcHB8G/7fE666U8Vw==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.17"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/magicast": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz",
+      "integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.4",
+        "@babel/types": "^7.25.4",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mime": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.1.0.tgz",
+      "integrity": "sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==",
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+      "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/mocked-exports": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/mocked-exports/-/mocked-exports-0.1.1.tgz",
+      "integrity": "sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==",
+      "license": "MIT"
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/nanotar": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nanotar/-/nanotar-0.2.0.tgz",
+      "integrity": "sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==",
+      "license": "MIT"
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
+      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/nitropack": {
+      "version": "2.12.6",
+      "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.12.6.tgz",
+      "integrity": "sha512-DEq31s0SP4/Z5DIoVBRo9DbWFPWwIoYD4cQMEz7eE+iJMiAP+1k9A3B9kcc6Ihc0jDJmfUcHYyh6h2XlynCx6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@cloudflare/kv-asset-handler": "^0.4.0",
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-inject": "^5.0.5",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@vercel/nft": "^0.30.1",
+        "archiver": "^7.0.1",
+        "c12": "^3.2.0",
+        "chokidar": "^4.0.3",
+        "citty": "^0.1.6",
+        "compatx": "^0.2.0",
+        "confbox": "^0.2.2",
+        "consola": "^3.4.2",
+        "cookie-es": "^2.0.0",
+        "croner": "^9.1.0",
+        "crossws": "^0.3.5",
+        "db0": "^0.3.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "dot-prop": "^9.0.0",
+        "esbuild": "^0.25.9",
+        "escape-string-regexp": "^5.0.0",
+        "etag": "^1.8.1",
+        "exsolve": "^1.0.7",
+        "globby": "^14.1.0",
+        "gzip-size": "^7.0.0",
+        "h3": "^1.15.4",
+        "hookable": "^5.5.3",
+        "httpxy": "^0.1.7",
+        "ioredis": "^5.7.0",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "listhen": "^1.9.0",
+        "magic-string": "^0.30.19",
+        "magicast": "^0.3.5",
+        "mime": "^4.0.7",
+        "mlly": "^1.8.0",
+        "node-fetch-native": "^1.6.7",
+        "node-mock-http": "^1.0.3",
+        "ofetch": "^1.4.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.0.0",
+        "pkg-types": "^2.3.0",
+        "pretty-bytes": "^7.0.1",
+        "radix3": "^1.1.2",
+        "rollup": "^4.50.1",
+        "rollup-plugin-visualizer": "^6.0.3",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "serve-placeholder": "^2.0.2",
+        "serve-static": "^2.2.0",
+        "source-map": "^0.7.6",
+        "std-env": "^3.9.0",
+        "ufo": "^1.6.1",
+        "ultrahtml": "^1.6.0",
+        "uncrypto": "^0.1.3",
+        "unctx": "^2.4.1",
+        "unenv": "^2.0.0-rc.21",
+        "unimport": "^5.2.0",
+        "unplugin-utils": "^0.3.0",
+        "unstorage": "^1.17.1",
+        "untyped": "^2.0.0",
+        "unwasm": "^0.3.11",
+        "youch": "^4.1.0-beta.11",
+        "youch-core": "^0.3.3"
+      },
+      "bin": {
+        "nitro": "dist/cli/index.mjs",
+        "nitropack": "dist/cli/index.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "xml2js": "^0.6.2"
+      },
+      "peerDependenciesMeta": {
+        "xml2js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nitropack/node_modules/cookie-es": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
+      "integrity": "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==",
+      "license": "MIT"
+    },
+    "node_modules/nitropack/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nitropack/node_modules/unplugin-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.0.tgz",
+      "integrity": "sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT"
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+      "license": "MIT"
+    },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "license": "(BSD-3-Clause OR GPL-2.0)",
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
+    "node_modules/node-mock-http": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/node-mock-http/-/node-mock-http-1.0.3.tgz",
+      "integrity": "sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==",
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
+      "license": "MIT"
+    },
+    "node_modules/nopt": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^3.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nuxt": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.1.2.tgz",
+      "integrity": "sha512-g5mwszCZT4ZeGJm83nxoZvtvZoAEaY65VDdn7p7UgznePbRaEJJ1KS1OIld4FPVkoDZ8TEVuDNqI9gUn12Exvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/cli": "^3.28.0",
+        "@nuxt/devalue": "^2.0.2",
+        "@nuxt/devtools": "^2.6.3",
+        "@nuxt/kit": "4.1.2",
+        "@nuxt/schema": "4.1.2",
+        "@nuxt/telemetry": "^2.6.6",
+        "@nuxt/vite-builder": "4.1.2",
+        "@unhead/vue": "^2.0.14",
+        "@vue/shared": "^3.5.21",
+        "c12": "^3.2.0",
+        "chokidar": "^4.0.3",
+        "compatx": "^0.2.0",
+        "consola": "^3.4.2",
+        "cookie-es": "^2.0.0",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "devalue": "^5.3.2",
+        "errx": "^0.1.0",
+        "esbuild": "^0.25.9",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "exsolve": "^1.0.7",
+        "h3": "^1.15.4",
+        "hookable": "^5.5.3",
+        "ignore": "^7.0.5",
+        "impound": "^1.0.0",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "mocked-exports": "^0.1.1",
+        "nanotar": "^0.2.0",
+        "nitropack": "^2.12.5",
+        "nypm": "^0.6.1",
+        "ofetch": "^1.4.1",
+        "ohash": "^2.0.11",
+        "on-change": "^5.0.1",
+        "oxc-minify": "^0.87.0",
+        "oxc-parser": "^0.87.0",
+        "oxc-transform": "^0.87.0",
+        "oxc-walker": "^0.5.2",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.0.0",
+        "pkg-types": "^2.3.0",
+        "radix3": "^1.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "ultrahtml": "^1.6.0",
+        "uncrypto": "^0.1.3",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "unplugin": "^2.3.10",
+        "unplugin-vue-router": "^0.15.0",
+        "unstorage": "^1.17.1",
+        "untyped": "^2.0.0",
+        "vue": "^3.5.21",
+        "vue-bundle-renderer": "^2.1.2",
+        "vue-devtools-stub": "^0.1.0",
+        "vue-router": "^4.5.1"
+      },
+      "bin": {
+        "nuxi": "bin/nuxt.mjs",
+        "nuxt": "bin/nuxt.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@parcel/watcher": "^2.1.0",
+        "@types/node": ">=18.12.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/watcher": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nuxt/node_modules/@nuxt/kit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
+      "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/nuxt/node_modules/cookie-es": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
+      "integrity": "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==",
+      "license": "MIT"
+    },
+    "node_modules/nuxt/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nuxt/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/nypm": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.2.tgz",
+      "integrity": "sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.2",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": "^14.16.0 || >=16.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/ofetch": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.4.1.tgz",
+      "integrity": "sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==",
+      "license": "MIT",
+      "dependencies": {
+        "destr": "^2.0.3",
+        "node-fetch-native": "^1.6.4",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "license": "MIT"
+    },
+    "node_modules/on-change": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/on-change/-/on-change-5.0.1.tgz",
+      "integrity": "sha512-n7THCP7RkyReRSLkJb8kUWoNsxUIBxTkIp3JKno+sEz6o/9AJ3w3P9fzQkITEkMwyTKJjZciF3v/pVoouxZZMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/on-change?sponsor=1"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/only": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
+      "integrity": "sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ=="
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/oxc-minify": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/oxc-minify/-/oxc-minify-0.87.0.tgz",
+      "integrity": "sha512-+UHWp6+0mdq0S2rEsZx9mqgL6JnG9ogO+CU17XccVrPUFtISFcZzk/biTn1JdBYFQ3kztof19pv8blMtgStQ2g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-minify/binding-android-arm64": "0.87.0",
+        "@oxc-minify/binding-darwin-arm64": "0.87.0",
+        "@oxc-minify/binding-darwin-x64": "0.87.0",
+        "@oxc-minify/binding-freebsd-x64": "0.87.0",
+        "@oxc-minify/binding-linux-arm-gnueabihf": "0.87.0",
+        "@oxc-minify/binding-linux-arm-musleabihf": "0.87.0",
+        "@oxc-minify/binding-linux-arm64-gnu": "0.87.0",
+        "@oxc-minify/binding-linux-arm64-musl": "0.87.0",
+        "@oxc-minify/binding-linux-riscv64-gnu": "0.87.0",
+        "@oxc-minify/binding-linux-s390x-gnu": "0.87.0",
+        "@oxc-minify/binding-linux-x64-gnu": "0.87.0",
+        "@oxc-minify/binding-linux-x64-musl": "0.87.0",
+        "@oxc-minify/binding-wasm32-wasi": "0.87.0",
+        "@oxc-minify/binding-win32-arm64-msvc": "0.87.0",
+        "@oxc-minify/binding-win32-x64-msvc": "0.87.0"
+      }
+    },
+    "node_modules/oxc-parser": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.87.0.tgz",
+      "integrity": "sha512-uc47XrtHwkBoES4HFgwgfH9sqwAtJXgAIBq4fFBMZ4hWmgVZoExyn+L4g4VuaecVKXkz1bvlaHcfwHAJPQb5Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "^0.87.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-parser/binding-android-arm64": "0.87.0",
+        "@oxc-parser/binding-darwin-arm64": "0.87.0",
+        "@oxc-parser/binding-darwin-x64": "0.87.0",
+        "@oxc-parser/binding-freebsd-x64": "0.87.0",
+        "@oxc-parser/binding-linux-arm-gnueabihf": "0.87.0",
+        "@oxc-parser/binding-linux-arm-musleabihf": "0.87.0",
+        "@oxc-parser/binding-linux-arm64-gnu": "0.87.0",
+        "@oxc-parser/binding-linux-arm64-musl": "0.87.0",
+        "@oxc-parser/binding-linux-riscv64-gnu": "0.87.0",
+        "@oxc-parser/binding-linux-s390x-gnu": "0.87.0",
+        "@oxc-parser/binding-linux-x64-gnu": "0.87.0",
+        "@oxc-parser/binding-linux-x64-musl": "0.87.0",
+        "@oxc-parser/binding-wasm32-wasi": "0.87.0",
+        "@oxc-parser/binding-win32-arm64-msvc": "0.87.0",
+        "@oxc-parser/binding-win32-x64-msvc": "0.87.0"
+      }
+    },
+    "node_modules/oxc-transform": {
+      "version": "0.87.0",
+      "resolved": "https://registry.npmjs.org/oxc-transform/-/oxc-transform-0.87.0.tgz",
+      "integrity": "sha512-dt6INKWY2DKbSc8yR9VQoqBsCjPQ3z/SKv882UqlwFve+K38xtpi2avDlvNd35SpHUwDLDFoV3hMX0U3qOSaaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-transform/binding-android-arm64": "0.87.0",
+        "@oxc-transform/binding-darwin-arm64": "0.87.0",
+        "@oxc-transform/binding-darwin-x64": "0.87.0",
+        "@oxc-transform/binding-freebsd-x64": "0.87.0",
+        "@oxc-transform/binding-linux-arm-gnueabihf": "0.87.0",
+        "@oxc-transform/binding-linux-arm-musleabihf": "0.87.0",
+        "@oxc-transform/binding-linux-arm64-gnu": "0.87.0",
+        "@oxc-transform/binding-linux-arm64-musl": "0.87.0",
+        "@oxc-transform/binding-linux-riscv64-gnu": "0.87.0",
+        "@oxc-transform/binding-linux-s390x-gnu": "0.87.0",
+        "@oxc-transform/binding-linux-x64-gnu": "0.87.0",
+        "@oxc-transform/binding-linux-x64-musl": "0.87.0",
+        "@oxc-transform/binding-wasm32-wasi": "0.87.0",
+        "@oxc-transform/binding-win32-arm64-msvc": "0.87.0",
+        "@oxc-transform/binding-win32-x64-msvc": "0.87.0"
+      }
+    },
+    "node_modules/oxc-walker": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/oxc-walker/-/oxc-walker-0.5.2.tgz",
+      "integrity": "sha512-XYoZqWwApSKUmSDEFeOKdy3Cdh95cOcSU8f7yskFWE4Rl3cfL5uwyY+EV7Brk9mdNLy+t5SseJajd6g7KncvlA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-regexp": "^0.10.0"
+      },
+      "peerDependencies": {
+        "oxc-parser": ">=0.72.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/package-manager-detector": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+      "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+      "license": "MIT"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-imports-exports": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
+      "integrity": "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse-statements": "1.0.11"
+      }
+    },
+    "node_modules/parse-path": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.1.0.tgz",
+      "integrity": "sha512-EuCycjZtfPcjWk7KTksnJ5xPMvWGA/6i4zrLYhRG0hGvC3GPU/jGUj3Cy+ZR0v30duV3e23R95T1lE2+lsndSw==",
+      "license": "MIT",
+      "dependencies": {
+        "protocols": "^2.0.0"
+      }
+    },
+    "node_modules/parse-statements": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
+      "integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/parse-url": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-9.2.0.tgz",
+      "integrity": "sha512-bCgsFI+GeGWPAvAiUv63ZorMeif3/U0zaXABGJbOWt5OH2KCaPHF6S+0ok4aqM9RuIPGyZdx9tR9l13PsW4AYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-path": "^7.0.0",
+        "parse-path": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.13.0"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+      "license": "MIT"
+    },
+    "node_modules/path-type": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
+      "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
+      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
+      "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.6",
+        "debug": "^4.3.6"
+      },
+      "engines": {
+        "node": ">= 10.12"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.1.1.tgz",
+      "integrity": "sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12 || ^20.9 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.38"
+      }
+    },
+    "node_modules/postcss-calc/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.4.tgz",
+      "integrity": "sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.7.tgz",
+      "integrity": "sha512-HR9DZLN04Xbe6xugRH6lS4ZQH2zm/bFh/ZyRkpedZozhvh+awAfbA0P36InO4fZfDhvYfNJeNvlTf1sjwGbw/A==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.4.tgz",
+      "integrity": "sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-comments/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.2.tgz",
+      "integrity": "sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-7.0.1.tgz",
+      "integrity": "sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-7.0.1.tgz",
+      "integrity": "sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.5.tgz",
+      "integrity": "sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^7.0.5"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.6.tgz",
+      "integrity": "sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^5.0.1",
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-7.0.1.tgz",
+      "integrity": "sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-7.0.1.tgz",
+      "integrity": "sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==",
+      "license": "MIT",
+      "dependencies": {
+        "colord": "^2.9.3",
+        "cssnano-utils": "^5.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.4.tgz",
+      "integrity": "sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "cssnano-utils": "^5.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-7.0.5.tgz",
+      "integrity": "sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nesting": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.2.tgz",
+      "integrity": "sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "dependencies": {
+        "@csstools/selector-resolve-nested": "^3.1.0",
+        "@csstools/selector-specificity": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-nesting/node_modules/@csstools/selector-resolve-nested": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.1.0.tgz",
+      "integrity": "sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      }
+    },
+    "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
+      "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      }
+    },
+    "node_modules/postcss-nesting/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.1.tgz",
+      "integrity": "sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.1.tgz",
+      "integrity": "sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-7.0.1.tgz",
+      "integrity": "sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.1.tgz",
+      "integrity": "sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-7.0.1.tgz",
+      "integrity": "sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.1.tgz",
+      "integrity": "sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.4.tgz",
+      "integrity": "sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-7.0.1.tgz",
+      "integrity": "sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.1.tgz",
+      "integrity": "sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-7.0.2.tgz",
+      "integrity": "sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^5.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.4.tgz",
+      "integrity": "sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.1.tgz",
+      "integrity": "sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.0.tgz",
+      "integrity": "sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >= 18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.4.tgz",
+      "integrity": "sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-unique-selectors/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-7.1.0.tgz",
+      "integrity": "sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/protocols": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.2.tgz",
+      "integrity": "sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/radix3": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
+      "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
+      "license": "MIT"
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/rc9": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
+      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
+      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/redis-errors": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
+      "integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/redis-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
+      "integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
+      "license": "MIT",
+      "dependencies": {
+        "redis-errors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/refa": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/refa/-/refa-0.12.1.tgz",
+      "integrity": "sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.8.0"
+      },
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/regexp-ast-analysis": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz",
+      "integrity": "sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.8.0",
+        "refa": "^0.12.1"
+      },
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/regexp-tree": {
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
+      "integrity": "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==",
+      "license": "MIT",
+      "bin": {
+        "regexp-tree": "bin/regexp-tree"
+      }
+    },
+    "node_modules/regjsparser": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
+      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jsesc": "~3.0.2"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/replace-in-file": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.3.5.tgz",
+      "integrity": "sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "glob": "^7.2.0",
+        "yargs": "^17.2.1"
+      },
+      "bin": {
+        "replace-in-file": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/replace-in-file/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-path": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/resolve-path/-/resolve-path-1.4.0.tgz",
+      "integrity": "sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==",
+      "license": "MIT",
+      "dependencies": {
+        "http-errors": "~1.6.2",
+        "path-is-absolute": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/resolve-path/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-path/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-path/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "license": "ISC"
+    },
+    "node_modules/resolve-path/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+      "license": "ISC"
+    },
+    "node_modules/resolve-path/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "4.52.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.2.tgz",
+      "integrity": "sha512-I25/2QgoROE1vYV+NQ1En9T9UFB9Cmfm2CJ83zZOlaDpvz29wGQSZXWKw7MiNXau7wYgB/T9fVIdIuEQ+KbiiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.52.2",
+        "@rollup/rollup-android-arm64": "4.52.2",
+        "@rollup/rollup-darwin-arm64": "4.52.2",
+        "@rollup/rollup-darwin-x64": "4.52.2",
+        "@rollup/rollup-freebsd-arm64": "4.52.2",
+        "@rollup/rollup-freebsd-x64": "4.52.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.2",
+        "@rollup/rollup-linux-arm64-musl": "4.52.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.2",
+        "@rollup/rollup-linux-x64-gnu": "4.52.2",
+        "@rollup/rollup-linux-x64-musl": "4.52.2",
+        "@rollup/rollup-openharmony-arm64": "4.52.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.2",
+        "@rollup/rollup-win32-x64-gnu": "4.52.2",
+        "@rollup/rollup-win32-x64-msvc": "4.52.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-6.0.3.tgz",
+      "integrity": "sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==",
+      "license": "MIT",
+      "dependencies": {
+        "open": "^8.0.0",
+        "picomatch": "^4.0.2",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "rolldown": "1.x || ^1.0.0-beta",
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "license": "ISC"
+    },
+    "node_modules/scslre": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/scslre/-/scslre-0.3.0.tgz",
+      "integrity": "sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.8.0",
+        "refa": "^0.12.0",
+        "regexp-ast-analysis": "^0.7.0"
+      },
+      "engines": {
+        "node": "^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
+      "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.5",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "mime-types": "^3.0.1",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-placeholder": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/serve-placeholder/-/serve-placeholder-2.0.2.tgz",
+      "integrity": "sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
+      "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/simple-git": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.28.0.tgz",
+      "integrity": "sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@kwsites/file-exists": "^1.1.1",
+        "@kwsites/promise-deferred": "^1.1.1",
+        "debug": "^4.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/steveukx/git-js?sponsor=1"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "license": "MIT"
+    },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
+      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz",
+      "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.22",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.22.tgz",
+      "integrity": "sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash-x": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/stable-hash-x/-/stable-hash-x-0.2.0.tgz",
+      "integrity": "sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/standard-as-callback": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
+      "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
+      "license": "MIT"
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "license": "MIT"
+    },
+    "node_modules/streamx": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.23.0.tgz",
+      "integrity": "sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==",
+      "license": "MIT",
+      "dependencies": {
+        "events-universal": "^1.0.0",
+        "fast-fifo": "^1.3.2",
+        "text-decoder": "^1.1.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.1.0.tgz",
+      "integrity": "sha512-OA95x+JPmL7kc7zCu+e+TeYxEiaIyndRx0OrBcK2QPPH09oAndr2ALvymxWA+Lx1PYYvFUm4O63pRkdJAaW96w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-literal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
+      "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "license": "MIT"
+    },
+    "node_modules/structured-clone-es": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/structured-clone-es/-/structured-clone-es-1.0.0.tgz",
+      "integrity": "sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==",
+      "license": "ISC"
+    },
+    "node_modules/stylehacks": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.6.tgz",
+      "integrity": "sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/stylehacks/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
+      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.0.tgz",
+      "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "^1.4.1"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/system-architecture": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz",
+      "integrity": "sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
+      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
+      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.44.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
+      "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
+    "node_modules/text-decoder": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
+      "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/tsscmp": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
+      "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.x"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-is/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-is/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-level-regexp": {
+      "version": "0.1.17",
+      "resolved": "https://registry.npmjs.org/type-level-regexp/-/type-level-regexp-0.1.17.tgz",
+      "integrity": "sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==",
+      "license": "MIT"
+    },
+    "node_modules/typescript": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "license": "MIT"
+    },
+    "node_modules/ultrahtml": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.6.0.tgz",
+      "integrity": "sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==",
+      "license": "MIT"
+    },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT"
+    },
+    "node_modules/unctx": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.4.1.tgz",
+      "integrity": "sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17",
+        "unplugin": "^2.1.0"
+      }
+    },
+    "node_modules/unctx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/unenv": {
+      "version": "2.0.0-rc.21",
+      "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.21.tgz",
+      "integrity": "sha512-Wj7/AMtE9MRnAXa6Su3Lk0LNCfqDYgfwVjwRFVum9U7wsto1imuHqk4kTm7Jni+5A0Hn7dttL6O/zjvUvoo+8A==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "exsolve": "^1.0.7",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/unhead": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-2.0.17.tgz",
+      "integrity": "sha512-xX3PCtxaE80khRZobyWCVxeFF88/Tg9eJDcJWY9us727nsTC7C449B8BUfVBmiF2+3LjPcmqeoB2iuMs0U4oJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-5.4.0.tgz",
+      "integrity": "sha512-g/OLFZR2mEfqbC6NC9b2225eCJGvufxq34mj6kM3OmI5gdSL0qyqtnv+9qmsGpAmnzSl6x0IWZj4W+8j2hLkMA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "pkg-types": "^2.3.0",
+        "scule": "^1.3.0",
+        "strip-literal": "^3.0.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.10",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/unimport/node_modules/unplugin-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.0.tgz",
+      "integrity": "sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz",
+      "integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-icons": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.19.3.tgz",
+      "integrity": "sha512-EUegRmsAI6+rrYr0vXjFlIP+lg4fSC4zb62zAZKx8FGXlWAGgEGBCa3JDe27aRAXhistObLPbBPhwa/0jYLFkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^0.4.1",
+        "@antfu/utils": "^0.7.10",
+        "@iconify/utils": "^2.1.29",
+        "debug": "^4.3.6",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^0.5.0",
+        "unplugin": "^1.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@svgr/core": ">=7.0.0",
+        "@svgx/core": "^1.0.1",
+        "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
+        "vue-template-compiler": "^2.6.12",
+        "vue-template-es2015-compiler": "^1.9.0"
+      },
+      "peerDependenciesMeta": {
+        "@svgr/core": {
+          "optional": true
+        },
+        "@svgx/core": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        },
+        "vue-template-es2015-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/@antfu/install-pkg": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.4.1.tgz",
+      "integrity": "sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^0.2.0",
+        "tinyexec": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unplugin-icons/node_modules/local-pkg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/package-manager-detector": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
+      "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.7"
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unplugin-icons/node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.5.tgz",
+      "integrity": "sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-vue-router": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.15.0.tgz",
+      "integrity": "sha512-PyGehCjd9Ny9h+Uer4McbBjjib3lHihcyUEILa7pHKl6+rh8N7sFyw4ZkV+N30Oq2zmIUG7iKs3qpL0r+gXAaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue-macros/common": "3.0.0-beta.16",
+        "@vue/language-core": "^3.0.1",
+        "ast-walker-scope": "^0.8.1",
+        "chokidar": "^4.0.3",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "muggle-string": "^0.4.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.14",
+        "unplugin": "^2.3.5",
+        "unplugin-utils": "^0.2.4",
+        "yaml": "^2.8.0"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "^3.5.17",
+        "vue-router": "^4.5.1"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/unstorage": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.17.1.tgz",
+      "integrity": "sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "^3.1.3",
+        "chokidar": "^4.0.3",
+        "destr": "^2.0.5",
+        "h3": "^1.15.4",
+        "lru-cache": "^10.4.3",
+        "node-fetch-native": "^1.6.7",
+        "ofetch": "^1.4.1",
+        "ufo": "^1.6.1"
+      },
+      "peerDependencies": {
+        "@azure/app-configuration": "^1.8.0",
+        "@azure/cosmos": "^4.2.0",
+        "@azure/data-tables": "^13.3.0",
+        "@azure/identity": "^4.6.0",
+        "@azure/keyvault-secrets": "^4.9.0",
+        "@azure/storage-blob": "^12.26.0",
+        "@capacitor/preferences": "^6.0.3 || ^7.0.0",
+        "@deno/kv": ">=0.9.0",
+        "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0",
+        "@planetscale/database": "^1.19.0",
+        "@upstash/redis": "^1.34.3",
+        "@vercel/blob": ">=0.27.1",
+        "@vercel/functions": "^2.2.12 || ^3.0.0",
+        "@vercel/kv": "^1.0.1",
+        "aws4fetch": "^1.0.20",
+        "db0": ">=0.2.1",
+        "idb-keyval": "^6.2.1",
+        "ioredis": "^5.4.2",
+        "uploadthing": "^7.4.4"
+      },
+      "peerDependenciesMeta": {
+        "@azure/app-configuration": {
+          "optional": true
+        },
+        "@azure/cosmos": {
+          "optional": true
+        },
+        "@azure/data-tables": {
+          "optional": true
+        },
+        "@azure/identity": {
+          "optional": true
+        },
+        "@azure/keyvault-secrets": {
+          "optional": true
+        },
+        "@azure/storage-blob": {
+          "optional": true
+        },
+        "@capacitor/preferences": {
+          "optional": true
+        },
+        "@deno/kv": {
+          "optional": true
+        },
+        "@netlify/blobs": {
+          "optional": true
+        },
+        "@planetscale/database": {
+          "optional": true
+        },
+        "@upstash/redis": {
+          "optional": true
+        },
+        "@vercel/blob": {
+          "optional": true
+        },
+        "@vercel/functions": {
+          "optional": true
+        },
+        "@vercel/kv": {
+          "optional": true
+        },
+        "aws4fetch": {
+          "optional": true
+        },
+        "db0": {
+          "optional": true
+        },
+        "idb-keyval": {
+          "optional": true
+        },
+        "ioredis": {
+          "optional": true
+        },
+        "uploadthing": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unstorage/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/untun": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/untun/-/untun-0.1.3.tgz",
+      "integrity": "sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.5",
+        "consola": "^3.2.3",
+        "pathe": "^1.1.1"
+      },
+      "bin": {
+        "untun": "bin/untun.mjs"
+      }
+    },
+    "node_modules/untun/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT"
+    },
+    "node_modules/untyped": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-2.0.0.tgz",
+      "integrity": "sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==",
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "knitwork": "^1.2.0",
+        "scule": "^1.3.0"
+      },
+      "bin": {
+        "untyped": "dist/cli.mjs"
+      }
+    },
+    "node_modules/unwasm": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/unwasm/-/unwasm-0.3.11.tgz",
+      "integrity": "sha512-Vhp5gb1tusSQw5of/g3Q697srYgMXvwMgXMjcG4ZNga02fDX9coxJ9fAb0Ci38hM2Hv/U1FXRPGgjP2BYqhNoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "knitwork": "^1.2.0",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.2.0",
+        "unplugin": "^2.3.6"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uqr": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.2.tgz",
+      "integrity": "sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==",
+      "license": "MIT"
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
+      "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-dev-rpc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vite-dev-rpc/-/vite-dev-rpc-1.1.0.tgz",
+      "integrity": "sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==",
+      "license": "MIT",
+      "dependencies": {
+        "birpc": "^2.4.0",
+        "vite-hot-client": "^2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-hot-client": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-2.1.0.tgz",
+      "integrity": "sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vite-plugin-checker": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.10.3.tgz",
+      "integrity": "sha512-f4sekUcDPF+T+GdbbE8idb1i2YplBAoH+SfRS0e/WRBWb2rYb1Jf5Pimll0Rj+3JgIYWwG2K5LtBPCXxoibkLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "chokidar": "^4.0.3",
+        "npm-run-path": "^6.0.0",
+        "picocolors": "^1.1.1",
+        "picomatch": "^4.0.3",
+        "strip-ansi": "^7.1.0",
+        "tiny-invariant": "^1.3.3",
+        "tinyglobby": "^0.2.14",
+        "vscode-uri": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "peerDependencies": {
+        "@biomejs/biome": ">=1.7",
+        "eslint": ">=7",
+        "meow": "^13.2.0",
+        "optionator": "^0.9.4",
+        "stylelint": ">=16",
+        "typescript": "*",
+        "vite": ">=2.0.0",
+        "vls": "*",
+        "vti": "*",
+        "vue-tsc": "~2.2.10 || ^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@biomejs/biome": {
+          "optional": true
+        },
+        "eslint": {
+          "optional": true
+        },
+        "meow": {
+          "optional": true
+        },
+        "optionator": {
+          "optional": true
+        },
+        "stylelint": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        },
+        "vls": {
+          "optional": true
+        },
+        "vti": {
+          "optional": true
+        },
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-inspect": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-11.3.3.tgz",
+      "integrity": "sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansis": "^4.1.0",
+        "debug": "^4.4.1",
+        "error-stack-parser-es": "^1.0.5",
+        "ohash": "^2.0.11",
+        "open": "^10.2.0",
+        "perfect-debounce": "^2.0.0",
+        "sirv": "^3.0.1",
+        "unplugin-utils": "^0.3.0",
+        "vite-dev-rpc": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/unplugin-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.0.tgz",
+      "integrity": "sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/vite-plugin-vue-tracer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-tracer/-/vite-plugin-vue-tracer-1.0.1.tgz",
+      "integrity": "sha512-L5/vAhT6oYbH4RSQYGLN9VfHexWe7SGzca1pJ7oPkL6KtxWA1jbGeb3Ri1JptKzqtd42HinOq4uEYqzhVWrzig==",
+      "license": "MIT",
+      "dependencies": {
+        "estree-walker": "^3.0.3",
+        "exsolve": "^1.0.7",
+        "magic-string": "^0.30.19",
+        "pathe": "^2.0.3",
+        "source-map-js": "^1.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0",
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-tracer/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
+      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/pretty-format": "4.0.18",
+        "@vitest/runner": "4.0.18",
+        "@vitest/snapshot": "4.0.18",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/browser-preview": "4.0.18",
+        "@vitest/browser-webdriverio": "4.0.18",
+        "@vitest/ui": "4.0.18",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
+      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-sfc": "3.5.22",
+        "@vue/runtime-dom": "3.5.22",
+        "@vue/server-renderer": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-bundle-renderer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.2.tgz",
+      "integrity": "sha512-M4WRBO/O/7G9phGaGH9AOwOnYtY9ZpPoDVpBpRzR2jO5rFL9mgIlQIgums2ljCTC2HL1jDXFQc//CzWcAQHgAw==",
+      "license": "MIT",
+      "dependencies": {
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.12.tgz",
+      "integrity": "sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue-devtools-stub": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
+      "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==",
+      "license": "MIT"
+    },
+    "node_modules/vue-eslint-parser": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz",
+      "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "eslint-scope": "^8.2.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.6.0",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ylru": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.4.0.tgz",
+      "integrity": "sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/youch": {
+      "version": "4.1.0-beta.11",
+      "resolved": "https://registry.npmjs.org/youch/-/youch-4.1.0-beta.11.tgz",
+      "integrity": "sha512-sQi6PERyO/mT8w564ojOVeAlYTtVQmC2GaktQAf+IdI75/GKIggosBuvyVXvEV+FATAT6RbLdIjFoiIId4ozoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@poppinss/colors": "^4.1.5",
+        "@poppinss/dumper": "^0.6.4",
+        "@speed-highlight/core": "^1.2.7",
+        "cookie": "^1.0.2",
+        "youch-core": "^0.3.3"
+      }
+    },
+    "node_modules/youch-core": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/youch-core/-/youch-core-0.3.3.tgz",
+      "integrity": "sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@poppinss/exception": "^1.2.2",
+        "error-stack-parser-es": "^1.0.5"
+      }
+    },
+    "node_modules/zip-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz",
+      "integrity": "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^5.0.0",
+        "compress-commons": "^6.0.2",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..5cf1eb0
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "start": "nuxt start",
+    "lint": "eslint . --ext .js,.ts,.vue",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed"
+  },
+  "dependencies": {
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "daisyui": "^5.0.48",
+    "nuxt": "^4.0.1",
+    "tailwindcss": "^4.1.11",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.68",
+    "@nuxt/eslint-config": "^1.9.0",
+    "@playwright/test": "^1.58.2",
+    "@rushstack/eslint-patch": "^1.12.0",
+    "@types/node": "^25.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.36.0",
+    "eslint-plugin-vue": "^10.5.0",
+    "happy-dom": "^20.5.3",
+    "typescript": "^5.7.3",
+    "unplugin-icons": "^0.19.3",
+    "vitest": "^4.0.18",
+    "vue-eslint-parser": "^10.2.0"
+  }
+}
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
new file mode 100644
index 0000000..8940c7c
--- /dev/null
+++ b/frontend/playwright.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const AUTH_FILE = 'e2e/.auth/session.json'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  timeout: 30_000,
+
+  use: {
+    baseURL: process.env.E2E_BASE_URL || 'http://localhost:3001',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    // Auth setup: selects a profile to get a session cookie
+    {
+      name: 'auth-setup',
+      testMatch: /auth\.setup\.ts/,
+    },
+
+    // All tests run after auth setup, with the saved session
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: AUTH_FILE,
+      },
+      dependencies: ['auth-setup'],
+    },
+  ],
+})
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..18993ad
Binary files /dev/null and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
new file mode 100644
index 0000000..0ad279c
--- /dev/null
+++ b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:
diff --git a/frontend/tests/__mocks__/iconStub.ts b/frontend/tests/__mocks__/iconStub.ts
new file mode 100644
index 0000000..9202108
--- /dev/null
+++ b/frontend/tests/__mocks__/iconStub.ts
@@ -0,0 +1,12 @@
+/**
+ * Stub for ~icons/* imports (Unplugin Icons).
+ * Returns a minimal Vue component that renders a <span>.
+ */
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'IconStub',
+  render() {
+    return h('span', { class: 'icon-stub' })
+  },
+})
diff --git a/frontend/tests/__mocks__/imports.ts b/frontend/tests/__mocks__/imports.ts
new file mode 100644
index 0000000..452f33b
--- /dev/null
+++ b/frontend/tests/__mocks__/imports.ts
@@ -0,0 +1,35 @@
+/**
+ * Minimal mock for Nuxt's #imports auto-import.
+ * Add stubs here as tests require them.
+ */
+
+import { ref } from 'vue'
+
+export const useRuntimeConfig = () => ({
+  public: {
+    apiBaseUrl: 'http://localhost:8081/api',
+    appVersion: '0.0.0-test',
+  },
+})
+
+export const useRoute = () => ({
+  path: '/',
+  params: {},
+  query: {},
+})
+
+export const useRouter = () => ({
+  push: () => Promise.resolve(),
+  replace: () => Promise.resolve(),
+})
+
+export const navigateTo = () => Promise.resolve()
+
+export const useRequestFetch = () => fetch
+
+export const useFetch = () => ({
+  data: ref(null),
+  error: ref(null),
+  pending: ref(false),
+  refresh: () => Promise.resolve(),
+})
diff --git a/frontend/tests/components/ModelTypeForm.test.ts b/frontend/tests/components/ModelTypeForm.test.ts
new file mode 100644
index 0000000..b34f54d
--- /dev/null
+++ b/frontend/tests/components/ModelTypeForm.test.ts
@@ -0,0 +1,311 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { shallowMount, type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+
+// ---------------------------------------------------------------------------
+// Mocks — modelUtils (structure functions)
+// ---------------------------------------------------------------------------
+
+vi.mock('~/shared/modelUtils', () => ({
+  normalizeStructureForEditor: (s: any) => s ?? { customFields: [] },
+  normalizeStructureForSave: (s: any) => s ?? { customFields: [] },
+  normalizePieceStructureForSave: (s: any) => s ?? { customFields: [], products: [] },
+  normalizeProductStructureForSave: (s: any) => s ?? { customFields: [], products: [] },
+  formatStructurePreview: () => 'Component preview',
+  formatPieceStructurePreview: () => 'Piece preview',
+  formatProductStructurePreview: () => 'Product preview',
+  defaultStructure: () => ({ customFields: [] }),
+  defaultPieceStructure: () => ({ customFields: [], products: [] }),
+  defaultProductStructure: () => ({ customFields: [], products: [] }),
+  cloneStructure: (s: any) => JSON.parse(JSON.stringify(s ?? { customFields: [] })),
+  clonePieceStructure: (s: any) => JSON.parse(JSON.stringify(s ?? { customFields: [], products: [] })),
+  cloneProductStructure: (s: any) => JSON.parse(JSON.stringify(s ?? { customFields: [], products: [] })),
+}))
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const globalStubs = {
+  ComponentModelStructureEditor: { template: '<div data-testid="comp-editor" />' },
+  PieceModelStructureEditor: { template: '<div data-testid="piece-editor" />' },
+}
+
+function mountForm(props: Record<string, any> = {}) {
+  return shallowMount(ModelTypeForm, {
+    props: {
+      mode: 'create',
+      initialCategory: 'COMPONENT',
+      lockCategory: true,
+      ...props,
+    },
+    global: {
+      stubs: globalStubs,
+    },
+  })
+}
+
+function getNameInput(wrapper: VueWrapper) {
+  return wrapper.find('input[name="name"]')
+}
+
+function getCategorySelect(wrapper: VueWrapper) {
+  return wrapper.find('select[name="category"]')
+}
+
+function getNotesTextarea(wrapper: VueWrapper) {
+  return wrapper.find('textarea[name="notes"]')
+}
+
+function getSubmitButton(wrapper: VueWrapper) {
+  return wrapper.find('button[type="submit"]')
+}
+
+function getCancelButton(wrapper: VueWrapper) {
+  return wrapper.find('button[type="button"]')
+}
+
+async function submitForm(wrapper: VueWrapper) {
+  await wrapper.find('form').trigger('submit.prevent')
+  await nextTick()
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+describe('rendering', () => {
+  it('renders form with name, category, and notes fields', () => {
+    const wrapper = mountForm()
+    expect(getNameInput(wrapper).exists()).toBe(true)
+    expect(getCategorySelect(wrapper).exists()).toBe(true)
+    expect(getNotesTextarea(wrapper).exists()).toBe(true)
+  })
+
+  it('shows "Créer" button in create mode', () => {
+    const wrapper = mountForm({ mode: 'create' })
+    expect(getSubmitButton(wrapper).text()).toBe('Créer')
+  })
+
+  it('shows "Enregistrer" button in edit mode', () => {
+    const wrapper = mountForm({ mode: 'edit' })
+    expect(getSubmitButton(wrapper).text()).toBe('Enregistrer')
+  })
+
+  it('populates form from initialData in edit mode', async () => {
+    const wrapper = mountForm({
+      mode: 'edit',
+      initialData: {
+        name: 'Existing Type',
+        code: 'existing-type',
+        category: 'COMPONENT',
+        notes: 'Some notes',
+      },
+    })
+    await nextTick()
+
+    expect((getNameInput(wrapper).element as HTMLInputElement).value).toBe('Existing Type')
+    expect((getNotesTextarea(wrapper).element as HTMLTextAreaElement).value).toBe('Some notes')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+describe('validation', () => {
+  it('shows error for name shorter than 2 characters', async () => {
+    const wrapper = mountForm()
+    await getNameInput(wrapper).setValue('A')
+    await submitForm(wrapper)
+
+    expect(wrapper.text()).toContain('au moins 2 caractères')
+    expect(wrapper.emitted('submit')).toBeUndefined()
+  })
+
+  it('shows error for name longer than 120 characters', async () => {
+    const wrapper = mountForm()
+    await getNameInput(wrapper).setValue('A'.repeat(121))
+    await submitForm(wrapper)
+
+    expect(wrapper.text()).toContain('ne peut pas dépasser 120')
+    expect(wrapper.emitted('submit')).toBeUndefined()
+  })
+
+  it('submits with valid name', async () => {
+    const wrapper = mountForm()
+    await getNameInput(wrapper).setValue('Mon Type')
+    await submitForm(wrapper)
+
+    expect(wrapper.emitted('submit')).toBeTruthy()
+    expect(wrapper.emitted('submit')![0]).toBeTruthy()
+  })
+
+  it('does not show error with valid name', async () => {
+    const wrapper = mountForm()
+    await getNameInput(wrapper).setValue('Valid Name')
+    await submitForm(wrapper)
+
+    expect(wrapper.text()).not.toContain('au moins 2')
+    expect(wrapper.text()).not.toContain('ne peut pas dépasser')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Code generation
+// ---------------------------------------------------------------------------
+describe('code generation', () => {
+  it('auto-generates code from name in create mode', async () => {
+    const wrapper = mountForm({ mode: 'create' })
+    await getNameInput(wrapper).setValue('Ma Catégorie')
+    await nextTick()
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.code).toBe('ma-categorie')
+  })
+
+  it('preserves initialData code in edit mode', async () => {
+    const wrapper = mountForm({
+      mode: 'edit',
+      initialData: {
+        name: 'Type',
+        code: 'custom-code',
+        category: 'COMPONENT',
+      },
+    })
+    await nextTick()
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.code).toBe('custom-code')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Category-based structure editor rendering
+// ---------------------------------------------------------------------------
+describe('structure editor rendering', () => {
+  it('renders ComponentModelStructureEditor for COMPONENT', () => {
+    const wrapper = mountForm({ initialCategory: 'COMPONENT' })
+    expect(wrapper.find('[data-testid="comp-editor"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="piece-editor"]').exists()).toBe(false)
+  })
+
+  it('renders PieceModelStructureEditor for PIECE', () => {
+    const wrapper = mountForm({ initialCategory: 'PIECE' })
+    expect(wrapper.find('[data-testid="piece-editor"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="comp-editor"]').exists()).toBe(false)
+  })
+
+  it('renders PieceModelStructureEditor for PRODUCT', () => {
+    const wrapper = mountForm({ initialCategory: 'PRODUCT' })
+    // PRODUCT reuses PieceModelStructureEditor
+    expect(wrapper.find('[data-testid="piece-editor"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="comp-editor"]').exists()).toBe(false)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Category lock
+// ---------------------------------------------------------------------------
+describe('category lock', () => {
+  it('disables category select when lockCategory is true', () => {
+    const wrapper = mountForm({ lockCategory: true })
+    expect((getCategorySelect(wrapper).element as HTMLSelectElement).disabled).toBe(true)
+  })
+
+  it('enables category select when lockCategory is false', () => {
+    const wrapper = mountForm({ lockCategory: false })
+    expect((getCategorySelect(wrapper).element as HTMLSelectElement).disabled).toBe(false)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Saving state
+// ---------------------------------------------------------------------------
+describe('saving state', () => {
+  it('disables submit button when saving', () => {
+    const wrapper = mountForm({ saving: true })
+    expect((getSubmitButton(wrapper).element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('disables cancel button when saving', () => {
+    const wrapper = mountForm({ saving: true })
+    expect((getCancelButton(wrapper).element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('shows spinner when saving', () => {
+    const wrapper = mountForm({ saving: true })
+    expect(wrapper.find('.loading-spinner').exists()).toBe(true)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Cancel
+// ---------------------------------------------------------------------------
+describe('cancel', () => {
+  it('emits cancel on cancel button click', async () => {
+    const wrapper = mountForm()
+    await getCancelButton(wrapper).trigger('click')
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Submit payload
+// ---------------------------------------------------------------------------
+describe('submit payload', () => {
+  it('emits payload with COMPONENT category and structure', async () => {
+    const wrapper = mountForm({ initialCategory: 'COMPONENT' })
+    await getNameInput(wrapper).setValue('Test Component')
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.category).toBe('COMPONENT')
+    expect(payload.name).toBe('Test Component')
+    expect(payload.structure).toBeDefined()
+  })
+
+  it('emits payload with PIECE category', async () => {
+    const wrapper = mountForm({ initialCategory: 'PIECE' })
+    await getNameInput(wrapper).setValue('Test Piece')
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.category).toBe('PIECE')
+  })
+
+  it('emits payload with PRODUCT category', async () => {
+    const wrapper = mountForm({ initialCategory: 'PRODUCT' })
+    await getNameInput(wrapper).setValue('Test Product')
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.category).toBe('PRODUCT')
+  })
+
+  it('includes trimmed notes in payload', async () => {
+    const wrapper = mountForm()
+    await getNameInput(wrapper).setValue('Test')
+    await getNotesTextarea(wrapper).setValue('  Some notes  ')
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.notes).toBe('Some notes')
+  })
+
+  it('omits empty notes from payload', async () => {
+    const wrapper = mountForm()
+    await getNameInput(wrapper).setValue('Test')
+    await getNotesTextarea(wrapper).setValue('')
+    await submitForm(wrapper)
+
+    const payload = (wrapper.emitted('submit')![0] as any[])[0]
+    expect(payload.notes).toBeUndefined()
+  })
+})
diff --git a/frontend/tests/components/PieceModelStructureEditor.test.ts b/frontend/tests/components/PieceModelStructureEditor.test.ts
new file mode 100644
index 0000000..00b7057
--- /dev/null
+++ b/frontend/tests/components/PieceModelStructureEditor.test.ts
@@ -0,0 +1,304 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+
+import PieceModelStructureEditor from '~/components/PieceModelStructureEditor.vue'
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+vi.mock('~/composables/useProductTypes', () => ({
+  useProductTypes: () => ({
+    productTypes: ref([]),
+    loadingProductTypes: ref(false),
+    loadProductTypes: vi.fn().mockResolvedValue({ success: true }),
+    createProductType: vi.fn(),
+    updateProductType: vi.fn(),
+    deleteProductType: vi.fn(),
+    getProductTypes: () => [],
+    isProductTypeLoading: () => false,
+  }),
+}))
+
+vi.mock('~/shared/modelUtils', () => ({
+  normalizePieceStructureForSave: (s: any) => s ?? { customFields: [] },
+}))
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function mountEditor(props: Record<string, any> = {}) {
+  return mount(PieceModelStructureEditor, {
+    props: {
+      modelValue: { customFields: [], products: [] },
+      ...props,
+    },
+  })
+}
+
+function getAddFieldButton(wrapper: VueWrapper) {
+  // The second "Ajouter" button is for custom fields
+  const buttons = wrapper.findAll('button').filter(b => b.text().includes('Ajouter'))
+  return buttons[buttons.length - 1]
+}
+
+function getAddProductButton(wrapper: VueWrapper) {
+  // The first "Ajouter" button is for products
+  const buttons = wrapper.findAll('button').filter(b => b.text().includes('Ajouter'))
+  return buttons[0]
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+// ---------------------------------------------------------------------------
+// Empty state
+// ---------------------------------------------------------------------------
+describe('empty state', () => {
+  it('renders with no fields and shows empty message', () => {
+    const wrapper = mountEditor()
+    expect(wrapper.text()).toContain('Aucun champ personnalisé')
+  })
+
+  it('renders with no products and shows empty message', () => {
+    const wrapper = mountEditor()
+    expect(wrapper.text()).toContain('Aucun produit défini')
+  })
+
+  it('shows add field button', () => {
+    const wrapper = mountEditor()
+    expect(getAddFieldButton(wrapper).exists()).toBe(true)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Add custom field
+// ---------------------------------------------------------------------------
+describe('add custom field', () => {
+  it('adds a new empty field on button click', async () => {
+    const wrapper = mountEditor()
+    await getAddFieldButton(wrapper).trigger('click')
+    await nextTick()
+
+    const nameInputs = wrapper.findAll('input[type="text"]')
+    expect(nameInputs.length).toBeGreaterThanOrEqual(1)
+    expect(wrapper.text()).not.toContain('Aucun champ personnalisé')
+  })
+
+  it('new field has type "text" by default', async () => {
+    const wrapper = mountEditor()
+    await getAddFieldButton(wrapper).trigger('click')
+    await nextTick()
+
+    const selects = wrapper.findAll('select')
+    // The last select should be the type select for the new field
+    const typeSelect = selects[selects.length - 1]
+    expect((typeSelect.element as HTMLSelectElement).value).toBe('text')
+  })
+
+  it('emits update:modelValue after adding field', async () => {
+    const wrapper = mountEditor()
+    await getAddFieldButton(wrapper).trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Remove custom field
+// ---------------------------------------------------------------------------
+describe('remove custom field', () => {
+  it('removes field on delete button click', async () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Weight', type: 'number', required: false, orderIndex: 0 }],
+        products: [],
+      },
+    })
+
+    // Find the delete button (btn-error)
+    const deleteBtn = wrapper.find('button.btn-error')
+    expect(deleteBtn.exists()).toBe(true)
+
+    await deleteBtn.trigger('click')
+    await nextTick()
+
+    expect(wrapper.text()).toContain('Aucun champ personnalisé')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Field name editing
+// ---------------------------------------------------------------------------
+describe('field name editing', () => {
+  it('updates field name on input', async () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Old Name', type: 'text', required: false, orderIndex: 0 }],
+        products: [],
+      },
+    })
+
+    const nameInput = wrapper.find('input[type="text"]')
+    await nameInput.setValue('New Name')
+    await nextTick()
+
+    const events = wrapper.emitted('update:modelValue')
+    expect(events).toBeTruthy()
+    const lastPayload = events![events!.length - 1][0] as any
+    expect(lastPayload.customFields[0].name).toBe('New Name')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Field type change
+// ---------------------------------------------------------------------------
+describe('field type change', () => {
+  it('changes field type via select', async () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Size', type: 'text', required: false, orderIndex: 0 }],
+        products: [],
+      },
+    })
+
+    // Find the type select (not the product type select)
+    const selects = wrapper.findAll('select')
+    const typeSelect = selects[selects.length - 1]
+    await typeSelect.setValue('number')
+    await nextTick()
+
+    const events = wrapper.emitted('update:modelValue')
+    expect(events).toBeTruthy()
+    const lastPayload = events![events!.length - 1][0] as any
+    expect(lastPayload.customFields[0].type).toBe('number')
+  })
+
+  it('shows options textarea for select type', async () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Color', type: 'select', required: false, orderIndex: 0, optionsText: 'Red\nBlue' }],
+        products: [],
+      },
+    })
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.exists()).toBe(true)
+  })
+
+  it('hides options textarea for non-select types', () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Weight', type: 'number', required: false, orderIndex: 0 }],
+        products: [],
+      },
+    })
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.exists()).toBe(false)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Required checkbox
+// ---------------------------------------------------------------------------
+describe('required checkbox', () => {
+  it('toggles required on checkbox change', async () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Test', type: 'text', required: false, orderIndex: 0 }],
+        products: [],
+      },
+    })
+
+    const checkbox = wrapper.find('input[type="checkbox"]')
+    await checkbox.setValue(true)
+    await nextTick()
+
+    const events = wrapper.emitted('update:modelValue')
+    expect(events).toBeTruthy()
+    const lastPayload = events![events!.length - 1][0] as any
+    expect(lastPayload.customFields[0].required).toBe(true)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Add product
+// ---------------------------------------------------------------------------
+describe('add product', () => {
+  it('adds a product entry on button click', async () => {
+    const wrapper = mountEditor()
+    await getAddProductButton(wrapper).trigger('click')
+    await nextTick()
+
+    expect(wrapper.text()).not.toContain('Aucun produit défini')
+    // Should have a product type select
+    expect(wrapper.findAll('select').length).toBeGreaterThanOrEqual(1)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Options parsing
+// ---------------------------------------------------------------------------
+describe('options parsing', () => {
+  it('parses multiline options text into array', async () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [{ name: 'Color', type: 'select', required: false, orderIndex: 0, optionsText: '' }],
+        products: [],
+      },
+    })
+
+    const textarea = wrapper.find('textarea')
+    await textarea.setValue('Red\nGreen\nBlue')
+    await nextTick()
+
+    const events = wrapper.emitted('update:modelValue')
+    expect(events).toBeTruthy()
+    const lastPayload = events![events!.length - 1][0] as any
+    expect(lastPayload.customFields[0].options).toEqual(['Red', 'Green', 'Blue'])
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Hydration from modelValue
+// ---------------------------------------------------------------------------
+describe('hydration', () => {
+  it('renders existing fields from modelValue', () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [
+          { name: 'Weight', type: 'number', required: true, orderIndex: 0 },
+          { name: 'Color', type: 'text', required: false, orderIndex: 1 },
+        ],
+        products: [],
+      },
+    })
+
+    const nameInputs = wrapper.findAll('input[type="text"]')
+    expect(nameInputs.length).toBe(2)
+    expect((nameInputs[0].element as HTMLInputElement).value).toBe('Weight')
+    expect((nameInputs[1].element as HTMLInputElement).value).toBe('Color')
+  })
+
+  it('sorts fields by orderIndex', () => {
+    const wrapper = mountEditor({
+      modelValue: {
+        customFields: [
+          { name: 'Second', type: 'text', required: false, orderIndex: 1 },
+          { name: 'First', type: 'text', required: false, orderIndex: 0 },
+        ],
+        products: [],
+      },
+    })
+
+    const nameInputs = wrapper.findAll('input[type="text"]')
+    expect((nameInputs[0].element as HTMLInputElement).value).toBe('First')
+    expect((nameInputs[1].element as HTMLInputElement).value).toBe('Second')
+  })
+})
diff --git a/frontend/tests/composables/useConfirm.test.ts b/frontend/tests/composables/useConfirm.test.ts
new file mode 100644
index 0000000..62104c5
--- /dev/null
+++ b/frontend/tests/composables/useConfirm.test.ts
@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { useConfirm } from '~/composables/useConfirm'
+
+describe('useConfirm', () => {
+  it('returns confirm function and state', () => {
+    const { confirm, confirmState, handleConfirm, handleCancel } = useConfirm()
+    expect(typeof confirm).toBe('function')
+    expect(typeof handleConfirm).toBe('function')
+    expect(typeof handleCancel).toBe('function')
+    expect(confirmState.open).toBe(false)
+  })
+
+  it('opens modal with correct options', () => {
+    const { confirm, confirmState } = useConfirm()
+    // Don't await — we'll manually resolve
+    confirm({ message: 'Delete this item?' })
+    expect(confirmState.open).toBe(true)
+    expect(confirmState.message).toBe('Delete this item?')
+    expect(confirmState.title).toBe('Confirmation')
+    expect(confirmState.confirmText).toBe('Supprimer')
+    expect(confirmState.cancelText).toBe('Annuler')
+    expect(confirmState.dangerous).toBe(true)
+    // Clean up by canceling
+    const { handleCancel } = useConfirm()
+    handleCancel()
+  })
+
+  it('resolves true on confirm', async () => {
+    const { confirm, handleConfirm } = useConfirm()
+    const promise = confirm({ message: 'Confirm?' })
+    handleConfirm()
+    const result = await promise
+    expect(result).toBe(true)
+  })
+
+  it('resolves false on cancel', async () => {
+    const { confirm, handleCancel } = useConfirm()
+    const promise = confirm({ message: 'Cancel?' })
+    handleCancel()
+    const result = await promise
+    expect(result).toBe(false)
+  })
+
+  it('closes modal after confirm', async () => {
+    const { confirm, confirmState, handleConfirm } = useConfirm()
+    confirm({ message: 'Test' })
+    expect(confirmState.open).toBe(true)
+    handleConfirm()
+    expect(confirmState.open).toBe(false)
+  })
+
+  it('closes modal after cancel', async () => {
+    const { confirm, confirmState, handleCancel } = useConfirm()
+    confirm({ message: 'Test' })
+    expect(confirmState.open).toBe(true)
+    handleCancel()
+    expect(confirmState.open).toBe(false)
+  })
+
+  it('supports custom options', () => {
+    const { confirm, confirmState, handleCancel } = useConfirm()
+    confirm({
+      title: 'Custom Title',
+      message: 'Custom message',
+      confirmText: 'Yes',
+      cancelText: 'No',
+      dangerous: false,
+    })
+    expect(confirmState.title).toBe('Custom Title')
+    expect(confirmState.confirmText).toBe('Yes')
+    expect(confirmState.cancelText).toBe('No')
+    expect(confirmState.dangerous).toBe(false)
+    handleCancel()
+  })
+
+  it('shares state across calls (singleton)', () => {
+    const a = useConfirm()
+    const b = useConfirm()
+    expect(a.confirmState).toBe(b.confirmState)
+  })
+})
diff --git a/frontend/tests/composables/useEntityTypes.test.ts b/frontend/tests/composables/useEntityTypes.test.ts
new file mode 100644
index 0000000..df41f24
--- /dev/null
+++ b/frontend/tests/composables/useEntityTypes.test.ts
@@ -0,0 +1,412 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { useEntityTypes, invalidateEntityTypeCache } from '~/composables/useEntityTypes'
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+const mockShowSuccess = vi.fn()
+const mockShowError = vi.fn()
+
+vi.mock('~/composables/useToast', () => ({
+  useToast: () => ({
+    showSuccess: mockShowSuccess,
+    showError: mockShowError,
+    showInfo: vi.fn(),
+    showToast: vi.fn(),
+    toasts: { value: [] },
+    clearAll: vi.fn(),
+  }),
+}))
+
+const mockListModelTypes = vi.fn()
+const mockCreateModelType = vi.fn()
+const mockUpdateModelType = vi.fn()
+const mockDeleteModelType = vi.fn()
+
+vi.mock('~/services/modelTypes', () => ({
+  listModelTypes: (...args: any[]) => mockListModelTypes(...args),
+  createModelType: (...args: any[]) => mockCreateModelType(...args),
+  updateModelType: (...args: any[]) => mockUpdateModelType(...args),
+  deleteModelType: (...args: any[]) => mockDeleteModelType(...args),
+}))
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const fakeItem = (id: string, name: string) => ({
+  id,
+  name,
+  code: name.toLowerCase(),
+  category: 'COMPONENT' as const,
+  structure: null,
+  createdAt: '2025-01-01',
+  updatedAt: '2025-01-01',
+  notes: null,
+  description: null,
+})
+
+function resetState() {
+  // Reset singleton state via public APIs
+  const comp = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+  comp.types.value = []
+  invalidateEntityTypeCache('COMPONENT')
+
+  const piece = useEntityTypes({ category: 'PIECE', label: 'pièce' })
+  piece.types.value = []
+  invalidateEntityTypeCache('PIECE')
+
+  const product = useEntityTypes({ category: 'PRODUCT', label: 'produit' })
+  product.types.value = []
+  invalidateEntityTypeCache('PRODUCT')
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  resetState()
+})
+
+// ---------------------------------------------------------------------------
+// loadTypes
+// ---------------------------------------------------------------------------
+describe('loadTypes', () => {
+  it('fetches from API and stores in types', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Type A'), fakeItem('2', 'Type B')],
+      total: 2,
+      offset: 0,
+      limit: 200,
+    })
+
+    const { loadTypes, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    const result = await loadTypes()
+
+    expect(result.success).toBe(true)
+    expect(types.value).toHaveLength(2)
+    expect(types.value[0].name).toBe('Type A')
+    expect(mockListModelTypes).toHaveBeenCalledOnce()
+    expect(mockListModelTypes).toHaveBeenCalledWith({
+      category: 'COMPONENT',
+      sort: 'name',
+      dir: 'asc',
+      limit: 200,
+    })
+  })
+
+  it('returns cached data on second call without force', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Cached')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+
+    const { loadTypes, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+    expect(mockListModelTypes).toHaveBeenCalledTimes(1)
+
+    // Second call — should return cache
+    const result = await loadTypes()
+    expect(result.success).toBe(true)
+    expect(types.value).toHaveLength(1)
+    expect(mockListModelTypes).toHaveBeenCalledTimes(1) // NOT called again
+  })
+
+  it('refetches with force: true', async () => {
+    mockListModelTypes
+      .mockResolvedValueOnce({ items: [fakeItem('1', 'Old')], total: 1, offset: 0, limit: 200 })
+      .mockResolvedValueOnce({ items: [fakeItem('1', 'New')], total: 1, offset: 0, limit: 200 })
+
+    const { loadTypes, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+    expect(types.value[0].name).toBe('Old')
+
+    await loadTypes({ force: true })
+    expect(types.value[0].name).toBe('New')
+    expect(mockListModelTypes).toHaveBeenCalledTimes(2)
+  })
+
+  it('sets loading during fetch', async () => {
+    let resolvePromise: (value: any) => void
+    mockListModelTypes.mockReturnValue(new Promise((resolve) => { resolvePromise = resolve }))
+
+    const { loadTypes, loading } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    expect(loading.value).toBe(false)
+
+    const promise = loadTypes()
+    expect(loading.value).toBe(true)
+
+    resolvePromise!({ items: [], total: 0, offset: 0, limit: 200 })
+    await promise
+    expect(loading.value).toBe(false)
+  })
+
+  it('shows error on API failure', async () => {
+    mockListModelTypes.mockRejectedValue(new Error('Network error'))
+
+    const { loadTypes, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    const result = await loadTypes()
+
+    expect(result.success).toBe(false)
+    expect(result.error).toBe('Network error')
+    expect(types.value).toEqual([])
+    expect(mockShowError).toHaveBeenCalledWith(
+      'Impossible de charger les types de composant.',
+    )
+  })
+
+  it('normalizes items with description fallback', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [{ ...fakeItem('1', 'Test'), notes: 'From notes', description: null }],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+
+    const { loadTypes, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+
+    expect(types.value[0].description).toBe('From notes')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// createType
+// ---------------------------------------------------------------------------
+describe('createType', () => {
+  it('creates and pushes to types array', async () => {
+    mockCreateModelType.mockResolvedValue(fakeItem('new-1', 'Created'))
+
+    const { createType, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    const result = await createType({ name: 'Created' })
+
+    expect(result.success).toBe(true)
+    expect(types.value).toHaveLength(1)
+    expect(types.value[0].name).toBe('Created')
+    expect(mockShowSuccess).toHaveBeenCalledWith(expect.stringContaining('Created'))
+  })
+
+  it('sends correct payload with auto-generated code', async () => {
+    mockCreateModelType.mockResolvedValue(fakeItem('new-1', 'Ma Catégorie'))
+
+    const { createType } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await createType({ name: 'Ma Catégorie' })
+
+    expect(mockCreateModelType).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'Ma Catégorie',
+        code: 'ma-categorie',
+        category: 'COMPONENT',
+      }),
+    )
+  })
+
+  it('uses provided code if available', async () => {
+    mockCreateModelType.mockResolvedValue(fakeItem('new-1', 'Test'))
+
+    const { createType } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await createType({ name: 'Test', code: 'custom-code' })
+
+    expect(mockCreateModelType).toHaveBeenCalledWith(
+      expect.objectContaining({ code: 'custom-code' }),
+    )
+  })
+
+  it('shows error on API failure without modifying types', async () => {
+    mockCreateModelType.mockRejectedValue(new Error('Create failed'))
+
+    const { createType, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    const result = await createType({ name: 'Fail' })
+
+    expect(result.success).toBe(false)
+    expect(types.value).toEqual([])
+    expect(mockShowError).toHaveBeenCalled()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// updateType
+// ---------------------------------------------------------------------------
+describe('updateType', () => {
+  it('updates the existing item in types array', async () => {
+    // Pre-populate
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Original')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+    const { loadTypes, updateType, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+
+    mockUpdateModelType.mockResolvedValue(fakeItem('1', 'Updated'))
+    const result = await updateType('1', { name: 'Updated' })
+
+    expect(result.success).toBe(true)
+    expect(types.value).toHaveLength(1)
+    expect(types.value[0].name).toBe('Updated')
+    expect(mockShowSuccess).toHaveBeenCalledWith(expect.stringContaining('Updated'))
+  })
+
+  it('shows error on API failure without modifying types', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Original')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+    const { loadTypes, updateType, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+
+    mockUpdateModelType.mockRejectedValue(new Error('Update failed'))
+    const result = await updateType('1', { name: 'Bad' })
+
+    expect(result.success).toBe(false)
+    expect(types.value[0].name).toBe('Original')
+    expect(mockShowError).toHaveBeenCalled()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// deleteType
+// ---------------------------------------------------------------------------
+describe('deleteType', () => {
+  it('removes item from types array', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'A'), fakeItem('2', 'B')],
+      total: 2,
+      offset: 0,
+      limit: 200,
+    })
+    const { loadTypes, deleteType, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+    expect(types.value).toHaveLength(2)
+
+    mockDeleteModelType.mockResolvedValue(undefined)
+    const result = await deleteType('1')
+
+    expect(result.success).toBe(true)
+    expect(types.value).toHaveLength(1)
+    expect(types.value[0].id).toBe('2')
+    expect(mockShowSuccess).toHaveBeenCalled()
+  })
+
+  it('shows error on API failure without removing item', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Keep')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+    const { loadTypes, deleteType, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+
+    mockDeleteModelType.mockRejectedValue(new Error('Delete failed'))
+    const result = await deleteType('1')
+
+    expect(result.success).toBe(false)
+    expect(types.value).toHaveLength(1)
+    expect(mockShowError).toHaveBeenCalled()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// invalidateEntityTypeCache
+// ---------------------------------------------------------------------------
+describe('invalidateEntityTypeCache', () => {
+  it('forces next loadTypes to refetch', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Cached')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+
+    const { loadTypes } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadTypes()
+    expect(mockListModelTypes).toHaveBeenCalledTimes(1)
+
+    // Without invalidation, wouldn't refetch
+    invalidateEntityTypeCache('COMPONENT')
+
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Fresh')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+
+    const { loadTypes: loadAgain, types } = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await loadAgain()
+    expect(mockListModelTypes).toHaveBeenCalledTimes(2)
+    expect(types.value[0].name).toBe('Fresh')
+  })
+
+  it('does not crash for unknown category', () => {
+    expect(() => invalidateEntityTypeCache('COMPONENT')).not.toThrow()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Singleton per category
+// ---------------------------------------------------------------------------
+describe('singleton per category', () => {
+  it('shares state between same category calls', async () => {
+    mockListModelTypes.mockResolvedValue({
+      items: [fakeItem('1', 'Shared')],
+      total: 1,
+      offset: 0,
+      limit: 200,
+    })
+
+    const a = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    await a.loadTypes()
+
+    const b = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    expect(b.types.value).toHaveLength(1)
+    expect(b.types.value[0].name).toBe('Shared')
+  })
+
+  it('isolates state between different categories', async () => {
+    mockListModelTypes
+      .mockResolvedValueOnce({ items: [fakeItem('c1', 'Component')], total: 1, offset: 0, limit: 200 })
+      .mockResolvedValueOnce({ items: [fakeItem('p1', 'Piece')], total: 1, offset: 0, limit: 200 })
+
+    const comp = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    const piece = useEntityTypes({ category: 'PIECE', label: 'pièce' })
+
+    await comp.loadTypes()
+    await piece.loadTypes()
+
+    expect(comp.types.value).toHaveLength(1)
+    expect(comp.types.value[0].name).toBe('Component')
+    expect(piece.types.value).toHaveLength(1)
+    expect(piece.types.value[0].name).toBe('Piece')
+  })
+
+  it('invalidateEntityTypeCache only affects target category', async () => {
+    mockListModelTypes
+      .mockResolvedValueOnce({ items: [fakeItem('c1', 'Comp')], total: 1, offset: 0, limit: 200 })
+      .mockResolvedValueOnce({ items: [fakeItem('p1', 'Piece')], total: 1, offset: 0, limit: 200 })
+
+    const comp = useEntityTypes({ category: 'COMPONENT', label: 'composant' })
+    const piece = useEntityTypes({ category: 'PIECE', label: 'pièce' })
+    await comp.loadTypes()
+    await piece.loadTypes()
+    expect(mockListModelTypes).toHaveBeenCalledTimes(2)
+
+    // Invalidate only COMPONENT
+    invalidateEntityTypeCache('COMPONENT')
+
+    // PIECE should still use cache
+    await piece.loadTypes()
+    expect(mockListModelTypes).toHaveBeenCalledTimes(2) // No extra call
+
+    // COMPONENT should refetch
+    mockListModelTypes.mockResolvedValueOnce({ items: [fakeItem('c1', 'Refreshed')], total: 1, offset: 0, limit: 200 })
+    await comp.loadTypes()
+    expect(mockListModelTypes).toHaveBeenCalledTimes(3)
+  })
+})
diff --git a/frontend/tests/composables/useToast.test.ts b/frontend/tests/composables/useToast.test.ts
new file mode 100644
index 0000000..5fc5ce2
--- /dev/null
+++ b/frontend/tests/composables/useToast.test.ts
@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { useToast } from '~/composables/useToast'
+
+describe('useToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    const { clearAll } = useToast()
+    clearAll()
+  })
+
+  it('returns all expected functions', () => {
+    const toast = useToast()
+    expect(typeof toast.showToast).toBe('function')
+    expect(typeof toast.showSuccess).toBe('function')
+    expect(typeof toast.showError).toBe('function')
+    expect(typeof toast.showWarning).toBe('function')
+    expect(typeof toast.showInfo).toBe('function')
+    expect(typeof toast.removeToast).toBe('function')
+    expect(typeof toast.clearAll).toBe('function')
+  })
+
+  it('adds a toast with correct properties', () => {
+    const { showToast, toasts } = useToast()
+    const id = showToast('Hello', 'info')
+    expect(toasts.value).toHaveLength(1)
+    expect(toasts.value[0].message).toBe('Hello')
+    expect(toasts.value[0].type).toBe('info')
+    expect(toasts.value[0].visible).toBe(true)
+    expect(toasts.value[0].id).toBe(id)
+  })
+
+  it('showSuccess creates a success toast', () => {
+    const { showSuccess, toasts } = useToast()
+    showSuccess('Saved!')
+    expect(toasts.value[0].type).toBe('success')
+    expect(toasts.value[0].message).toBe('Saved!')
+  })
+
+  it('showError creates an error toast', () => {
+    const { showError, toasts } = useToast()
+    showError('Failed!')
+    expect(toasts.value[0].type).toBe('error')
+  })
+
+  it('showWarning creates a warning toast', () => {
+    const { showWarning, toasts } = useToast()
+    showWarning('Caution!')
+    expect(toasts.value[0].type).toBe('warning')
+  })
+
+  it('limits to MAX_TOASTS (3)', () => {
+    const { showToast, toasts } = useToast()
+    showToast('A', 'info')
+    showToast('B', 'info')
+    showToast('C', 'info')
+    showToast('D', 'info')
+    expect(toasts.value).toHaveLength(3)
+    expect(toasts.value[0].message).toBe('B')
+    expect(toasts.value[2].message).toBe('D')
+  })
+
+  it('clearAll removes all toasts', () => {
+    const { showToast, toasts, clearAll } = useToast()
+    showToast('A', 'info')
+    showToast('B', 'info')
+    expect(toasts.value.length).toBeGreaterThan(0)
+    clearAll()
+    expect(toasts.value).toHaveLength(0)
+  })
+
+  it('shares state across calls (singleton)', () => {
+    const a = useToast()
+    const b = useToast()
+    expect(a.toasts).toBe(b.toasts)
+  })
+
+  it('removeToast sets visible to false', () => {
+    const { showToast, toasts, removeToast } = useToast()
+    const id = showToast('Test', 'info')
+    removeToast(id)
+    expect(toasts.value[0].visible).toBe(false)
+  })
+})
diff --git a/frontend/tests/services/modelTypes.test.ts b/frontend/tests/services/modelTypes.test.ts
new file mode 100644
index 0000000..aeed063
--- /dev/null
+++ b/frontend/tests/services/modelTypes.test.ts
@@ -0,0 +1,221 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+// Import AFTER mocking
+import {
+  createModelType,
+  updateModelType,
+  deleteModelType,
+  getModelType,
+  type ModelType,
+  type ModelTypePayload,
+} from '~/services/modelTypes'
+
+// The service uses useRequestFetch from #imports (explicit import)
+// AND useRuntimeConfig as a Nuxt auto-import (bare global).
+const mockFetch = vi.fn()
+
+// Mock the explicit #imports module
+vi.mock('#imports', () => ({
+  useRuntimeConfig: () => ({
+    public: { apiBaseUrl: 'http://test-api:8081/api' },
+  }),
+  useRequestFetch: () => mockFetch,
+}))
+
+// Also stub the global auto-import (Nuxt makes these globally available)
+vi.stubGlobal('useRuntimeConfig', () => ({
+  public: { apiBaseUrl: 'http://test-api:8081/api' },
+}))
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const fakeModelType = (overrides: Partial<ModelType> = {}): ModelType => ({
+  id: 'mt-1',
+  name: 'Test Type',
+  code: 'test-type',
+  category: 'COMPONENT',
+  structure: null,
+  createdAt: '2025-01-01T00:00:00Z',
+  updatedAt: '2025-01-01T00:00:00Z',
+  ...overrides,
+})
+
+beforeEach(() => {
+  mockFetch.mockReset()
+})
+
+// ---------------------------------------------------------------------------
+// normalizeModelType (tested via getModelType which calls .then(normalizeModelType))
+// ---------------------------------------------------------------------------
+describe('normalizeModelType (via getModelType)', () => {
+  it('returns structure as-is for COMPONENT', async () => {
+    const structure = { customFields: [{ name: 'Weight' }] }
+    mockFetch.mockResolvedValue(fakeModelType({
+      category: 'COMPONENT',
+      structure: structure as any,
+    }))
+
+    const result = await getModelType('mt-1')
+    expect(result.structure).toEqual(structure)
+  })
+
+  it('returns structure as-is for PIECE', async () => {
+    const structure = { customFields: [{ name: 'Size' }] }
+    mockFetch.mockResolvedValue(fakeModelType({
+      category: 'PIECE',
+      structure: structure as any,
+    }))
+
+    const result = await getModelType('mt-1')
+    expect(result.structure).toEqual(structure)
+  })
+
+  it('returns structure as-is for PRODUCT', async () => {
+    const structure = { customFields: [{ name: 'Brand' }] }
+    mockFetch.mockResolvedValue(fakeModelType({
+      category: 'PRODUCT',
+      structure: structure as any,
+    }))
+
+    const result = await getModelType('mt-1')
+    expect(result.structure).toEqual(structure)
+  })
+
+  it('preserves null structure', async () => {
+    mockFetch.mockResolvedValue(fakeModelType({
+      category: 'COMPONENT',
+      structure: null,
+    }))
+
+    const result = await getModelType('mt-1')
+    expect(result.structure).toBeNull()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// createModelType — sends structure directly
+// ---------------------------------------------------------------------------
+describe('createModelType', () => {
+  it('sends POST with structure for COMPONENT', async () => {
+    const structure = { customFields: [] }
+    mockFetch.mockResolvedValue(fakeModelType())
+
+    const payload: ModelTypePayload = {
+      name: 'New Type',
+      code: 'new-type',
+      category: 'COMPONENT',
+      structure: structure as any,
+    }
+
+    await createModelType(payload)
+
+    expect(mockFetch).toHaveBeenCalledOnce()
+    const [endpoint, options] = mockFetch.mock.calls[0]
+    expect(endpoint).toBe('/model_types')
+    expect(options.method).toBe('POST')
+    expect(options.body.structure).toEqual(structure)
+  })
+
+  it('sends POST with structure for PIECE', async () => {
+    const structure = { customFields: [], products: [] }
+    mockFetch.mockResolvedValue(fakeModelType({ category: 'PIECE' }))
+
+    await createModelType({
+      name: 'Piece Type',
+      code: 'piece-type',
+      category: 'PIECE',
+      structure: structure as any,
+    })
+
+    const [, options] = mockFetch.mock.calls[0]
+    expect(options.body.structure).toEqual(structure)
+  })
+
+  it('sends POST with structure for PRODUCT', async () => {
+    const structure = { customFields: [] }
+    mockFetch.mockResolvedValue(fakeModelType({ category: 'PRODUCT' }))
+
+    await createModelType({
+      name: 'Product Type',
+      code: 'product-type',
+      category: 'PRODUCT',
+      structure: structure as any,
+    })
+
+    const [, options] = mockFetch.mock.calls[0]
+    expect(options.body.structure).toEqual(structure)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// updateModelType — sends structure directly
+// ---------------------------------------------------------------------------
+describe('updateModelType', () => {
+  it('sends PATCH with correct endpoint and structure', async () => {
+    const structure = { customFields: [{ name: 'Updated' }] }
+    mockFetch.mockResolvedValue(fakeModelType())
+
+    await updateModelType('mt-1', {
+      name: 'Updated',
+      code: 'updated',
+      category: 'COMPONENT',
+      structure: structure as any,
+    })
+
+    expect(mockFetch).toHaveBeenCalledOnce()
+    const [endpoint, options] = mockFetch.mock.calls[0]
+    expect(endpoint).toBe('/model_types/mt-1')
+    expect(options.method).toBe('PATCH')
+    expect(options.headers['Content-Type']).toBe('application/merge-patch+json')
+    expect(options.body.structure).toEqual(structure)
+  })
+
+  it('sends payload without structure when not provided', async () => {
+    mockFetch.mockResolvedValue(fakeModelType())
+
+    await updateModelType('mt-1', {
+      name: 'Just Name',
+      code: 'just-name',
+      category: 'COMPONENT',
+    })
+
+    const [, options] = mockFetch.mock.calls[0]
+    expect(options.body.structure).toBeUndefined()
+    expect(options.body.name).toBe('Just Name')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// deleteModelType
+// ---------------------------------------------------------------------------
+describe('deleteModelType', () => {
+  it('sends DELETE to correct endpoint', async () => {
+    mockFetch.mockResolvedValue(undefined)
+
+    await deleteModelType('mt-42')
+
+    expect(mockFetch).toHaveBeenCalledOnce()
+    const [endpoint, options] = mockFetch.mock.calls[0]
+    expect(endpoint).toBe('/model_types/mt-42')
+    expect(options.method).toBe('DELETE')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// getModelType
+// ---------------------------------------------------------------------------
+describe('getModelType', () => {
+  it('sends GET to correct endpoint', async () => {
+    mockFetch.mockResolvedValue(fakeModelType({ id: 'mt-99' }))
+
+    const result = await getModelType('mt-99')
+
+    expect(mockFetch).toHaveBeenCalledOnce()
+    const [endpoint, options] = mockFetch.mock.calls[0]
+    expect(endpoint).toBe('/model_types/mt-99')
+    expect(options.method).toBe('GET')
+    expect(result.id).toBe('mt-99')
+  })
+})
diff --git a/frontend/tests/shared/apiHelpers.test.ts b/frontend/tests/shared/apiHelpers.test.ts
new file mode 100644
index 0000000..8baa5bb
--- /dev/null
+++ b/frontend/tests/shared/apiHelpers.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+describe('extractCollection', () => {
+  it('returns the input if it is already an array', () => {
+    const items = [{ id: 1 }, { id: 2 }]
+    expect(extractCollection(items)).toEqual(items)
+  })
+
+  it('extracts from hydra:member', () => {
+    const payload = { 'hydra:member': [{ id: 1 }], 'hydra:totalItems': 1 }
+    expect(extractCollection(payload)).toEqual([{ id: 1 }])
+  })
+
+  it('extracts from member', () => {
+    const payload = { member: [{ id: 1 }, { id: 2 }] }
+    expect(extractCollection(payload)).toEqual([{ id: 1 }, { id: 2 }])
+  })
+
+  it('extracts from items', () => {
+    const payload = { items: [{ id: 1 }] }
+    expect(extractCollection(payload)).toEqual([{ id: 1 }])
+  })
+
+  it('extracts from data', () => {
+    const payload = { data: [{ id: 1 }] }
+    expect(extractCollection(payload)).toEqual([{ id: 1 }])
+  })
+
+  it('prefers member over hydra:member', () => {
+    const payload = { member: [{ id: 'member' }], 'hydra:member': [{ id: 'hydra' }] }
+    expect(extractCollection(payload)).toEqual([{ id: 'member' }])
+  })
+
+  it('returns empty array for null', () => {
+    expect(extractCollection(null)).toEqual([])
+  })
+
+  it('returns empty array for undefined', () => {
+    expect(extractCollection(undefined)).toEqual([])
+  })
+
+  it('returns empty array for empty object', () => {
+    expect(extractCollection({})).toEqual([])
+  })
+
+  it('returns empty array for string', () => {
+    expect(extractCollection('not an object')).toEqual([])
+  })
+})
diff --git a/frontend/tests/shared/customFieldFormUtils.test.ts b/frontend/tests/shared/customFieldFormUtils.test.ts
new file mode 100644
index 0000000..f6e5a98
--- /dev/null
+++ b/frontend/tests/shared/customFieldFormUtils.test.ts
@@ -0,0 +1,508 @@
+import { describe, it, expect } from 'vitest'
+import {
+  toFieldString,
+  fieldKey,
+  resolveFieldName,
+  resolveFieldType,
+  resolveRequiredFlag,
+  resolveOptions,
+  resolveDefaultValue,
+  formatDefaultValue,
+  normalizeCustomField,
+  normalizeCustomFieldInputs,
+  extractStoredCustomFieldValue,
+  buildCustomFieldInputs,
+  requiredCustomFieldsFilled,
+  shouldPersistField,
+  formatValueForPersistence,
+  buildCustomFieldMetadata,
+  type CustomFieldInput,
+} from '~/shared/utils/customFieldFormUtils'
+
+// ---------------------------------------------------------------------------
+// toFieldString
+// ---------------------------------------------------------------------------
+describe('toFieldString', () => {
+  it('returns empty string for null', () => {
+    expect(toFieldString(null)).toBe('')
+  })
+
+  it('returns empty string for undefined', () => {
+    expect(toFieldString(undefined)).toBe('')
+  })
+
+  it('returns string as-is', () => {
+    expect(toFieldString('hello')).toBe('hello')
+  })
+
+  it('converts number to string', () => {
+    expect(toFieldString(42)).toBe('42')
+  })
+
+  it('converts boolean to string', () => {
+    expect(toFieldString(true)).toBe('true')
+    expect(toFieldString(false)).toBe('false')
+  })
+
+  it('returns empty string for objects', () => {
+    expect(toFieldString({ foo: 'bar' })).toBe('')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// fieldKey
+// ---------------------------------------------------------------------------
+describe('fieldKey', () => {
+  it('prefers customFieldValueId', () => {
+    const field = { customFieldValueId: 'cfv-1', id: 'id-1', name: 'field' } as CustomFieldInput
+    expect(fieldKey(field, 0)).toBe('cfv-1')
+  })
+
+  it('falls back to id', () => {
+    const field = { customFieldValueId: null, id: 'id-1', name: 'field' } as CustomFieldInput
+    expect(fieldKey(field, 0)).toBe('id-1')
+  })
+
+  it('falls back to name-index', () => {
+    const field = { customFieldValueId: null, id: null, name: 'weight' } as CustomFieldInput
+    expect(fieldKey(field, 3)).toBe('weight-3')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// resolveFieldName
+// ---------------------------------------------------------------------------
+describe('resolveFieldName', () => {
+  it('resolves from name property', () => {
+    expect(resolveFieldName({ name: 'Poids' })).toBe('Poids')
+  })
+
+  it('falls back to key', () => {
+    expect(resolveFieldName({ key: 'poids' })).toBe('poids')
+  })
+
+  it('falls back to label', () => {
+    expect(resolveFieldName({ label: 'Poids' })).toBe('Poids')
+  })
+
+  it('returns empty string for empty object', () => {
+    expect(resolveFieldName({})).toBe('')
+  })
+
+  it('returns empty string for null', () => {
+    expect(resolveFieldName(null)).toBe('')
+  })
+
+  it('trims whitespace', () => {
+    expect(resolveFieldName({ name: '  Poids  ' })).toBe('Poids')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// resolveFieldType
+// ---------------------------------------------------------------------------
+describe('resolveFieldType', () => {
+  it('resolves valid type', () => {
+    expect(resolveFieldType({ type: 'number' })).toBe('number')
+  })
+
+  it('resolves case-insensitive', () => {
+    expect(resolveFieldType({ type: 'SELECT' })).toBe('select')
+  })
+
+  it('falls back to text for unknown type', () => {
+    expect(resolveFieldType({ type: 'blob' })).toBe('text')
+  })
+
+  it('resolves nested value.type', () => {
+    expect(resolveFieldType({ value: { type: 'date' } })).toBe('date')
+  })
+
+  it('returns text for missing type', () => {
+    expect(resolveFieldType({})).toBe('text')
+  })
+
+  it('handles all allowed types', () => {
+    for (const type of ['text', 'number', 'select', 'boolean', 'date']) {
+      expect(resolveFieldType({ type })).toBe(type)
+    }
+  })
+})
+
+// ---------------------------------------------------------------------------
+// resolveRequiredFlag
+// ---------------------------------------------------------------------------
+describe('resolveRequiredFlag', () => {
+  it('resolves boolean true', () => {
+    expect(resolveRequiredFlag({ required: true })).toBe(true)
+  })
+
+  it('resolves boolean false', () => {
+    expect(resolveRequiredFlag({ required: false })).toBe(false)
+  })
+
+  it('resolves nested value.required', () => {
+    expect(resolveRequiredFlag({ value: { required: true } })).toBe(true)
+  })
+
+  it('resolves string "true"', () => {
+    expect(resolveRequiredFlag({ value: { required: 'true' } })).toBe(true)
+  })
+
+  it('resolves string "1"', () => {
+    expect(resolveRequiredFlag({ value: { required: '1' } })).toBe(true)
+  })
+
+  it('defaults to false', () => {
+    expect(resolveRequiredFlag({})).toBe(false)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// resolveOptions
+// ---------------------------------------------------------------------------
+describe('resolveOptions', () => {
+  it('resolves array of strings', () => {
+    expect(resolveOptions({ options: ['A', 'B'] })).toEqual(['A', 'B'])
+  })
+
+  it('resolves array of objects with value key', () => {
+    expect(resolveOptions({ options: [{ value: 'A' }, { value: 'B' }] })).toEqual(['A', 'B'])
+  })
+
+  it('resolves array of objects with label key', () => {
+    expect(resolveOptions({ options: [{ label: 'Foo' }] })).toEqual(['Foo'])
+  })
+
+  it('falls back to value.options', () => {
+    expect(resolveOptions({ value: { options: ['X'] } })).toEqual(['X'])
+  })
+
+  it('falls back to value.choices', () => {
+    expect(resolveOptions({ value: { choices: ['Y'] } })).toEqual(['Y'])
+  })
+
+  it('returns empty array for no options', () => {
+    expect(resolveOptions({})).toEqual([])
+  })
+
+  it('filters out empty strings', () => {
+    expect(resolveOptions({ options: ['A', '', 'B'] })).toEqual(['A', 'B'])
+  })
+
+  it('filters out null values', () => {
+    expect(resolveOptions({ options: [null, 'A'] })).toEqual(['A'])
+  })
+})
+
+// ---------------------------------------------------------------------------
+// resolveDefaultValue
+// ---------------------------------------------------------------------------
+describe('resolveDefaultValue', () => {
+  it('returns null for null input', () => {
+    expect(resolveDefaultValue(null)).toBeNull()
+  })
+
+  it('resolves defaultValue', () => {
+    expect(resolveDefaultValue({ defaultValue: 'hello' })).toBe('hello')
+  })
+
+  it('resolves value (non-object)', () => {
+    expect(resolveDefaultValue({ value: 42 })).toBe(42)
+  })
+
+  it('resolves nested value.defaultValue', () => {
+    expect(resolveDefaultValue({ value: { defaultValue: 'nested' } })).toBe('nested')
+  })
+
+  it('returns null when nothing found', () => {
+    expect(resolveDefaultValue({})).toBeNull()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// formatDefaultValue
+// ---------------------------------------------------------------------------
+describe('formatDefaultValue', () => {
+  it('returns empty string for null', () => {
+    expect(formatDefaultValue('text', null)).toBe('')
+  })
+
+  it('converts number to string', () => {
+    expect(formatDefaultValue('number', 42)).toBe('42')
+  })
+
+  it('handles boolean type with true', () => {
+    expect(formatDefaultValue('boolean', 'true')).toBe('true')
+    expect(formatDefaultValue('boolean', true)).toBe('true')
+    expect(formatDefaultValue('boolean', '1')).toBe('true')
+  })
+
+  it('handles boolean type with false', () => {
+    expect(formatDefaultValue('boolean', 'false')).toBe('false')
+    expect(formatDefaultValue('boolean', false)).toBe('false')
+    expect(formatDefaultValue('boolean', '0')).toBe('false')
+  })
+
+  it('unwraps nested defaultValue object', () => {
+    expect(formatDefaultValue('text', { defaultValue: 'inner' })).toBe('inner')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// normalizeCustomField
+// ---------------------------------------------------------------------------
+describe('normalizeCustomField', () => {
+  it('normalizes a complete field', () => {
+    const result = normalizeCustomField({
+      id: 'cf-1',
+      name: 'Weight',
+      type: 'number',
+      required: true,
+      options: [],
+      orderIndex: 2,
+    })
+    expect(result).toEqual({
+      id: 'cf-1',
+      name: 'Weight',
+      type: 'number',
+      required: true,
+      options: [],
+      value: '',
+      customFieldId: 'cf-1',
+      customFieldValueId: null,
+      orderIndex: 2,
+    })
+  })
+
+  it('returns null for null input', () => {
+    expect(normalizeCustomField(null)).toBeNull()
+  })
+
+  it('returns null for field without name', () => {
+    expect(normalizeCustomField({ type: 'text' })).toBeNull()
+  })
+
+  it('uses fallback index', () => {
+    const result = normalizeCustomField({ name: 'Test' }, 5)
+    expect(result?.orderIndex).toBe(5)
+  })
+
+  it('defaults type to text', () => {
+    const result = normalizeCustomField({ name: 'Field' })
+    expect(result?.type).toBe('text')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// normalizeCustomFieldInputs
+// ---------------------------------------------------------------------------
+describe('normalizeCustomFieldInputs', () => {
+  it('returns empty array for null structure', () => {
+    expect(normalizeCustomFieldInputs(null)).toEqual([])
+  })
+
+  it('returns empty array for structure without customFields', () => {
+    expect(normalizeCustomFieldInputs({})).toEqual([])
+  })
+
+  it('normalizes and sorts fields by orderIndex', () => {
+    const result = normalizeCustomFieldInputs({
+      customFields: [
+        { name: 'B', orderIndex: 2 },
+        { name: 'A', orderIndex: 1 },
+      ],
+    })
+    expect(result).toHaveLength(2)
+    expect(result[0].name).toBe('A')
+    expect(result[1].name).toBe('B')
+  })
+
+  it('filters out invalid fields', () => {
+    const result = normalizeCustomFieldInputs({
+      customFields: [{ name: 'Valid' }, null, { type: 'text' }],
+    })
+    expect(result).toHaveLength(1)
+    expect(result[0].name).toBe('Valid')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// extractStoredCustomFieldValue
+// ---------------------------------------------------------------------------
+describe('extractStoredCustomFieldValue', () => {
+  it('returns string directly', () => {
+    expect(extractStoredCustomFieldValue('hello')).toBe('hello')
+  })
+
+  it('returns number directly', () => {
+    expect(extractStoredCustomFieldValue(42)).toBe(42)
+  })
+
+  it('returns empty string for null', () => {
+    expect(extractStoredCustomFieldValue(null)).toBe('')
+  })
+
+  it('extracts .value from object', () => {
+    expect(extractStoredCustomFieldValue({ value: 'test' })).toBe('test')
+  })
+
+  it('extracts nested .value.value', () => {
+    expect(extractStoredCustomFieldValue({ value: { value: 'deep' } })).toBe('deep')
+  })
+
+  it('extracts customFieldValue.value', () => {
+    expect(extractStoredCustomFieldValue({ customFieldValue: { value: 'cfv' } })).toBe('cfv')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// buildCustomFieldInputs
+// ---------------------------------------------------------------------------
+describe('buildCustomFieldInputs', () => {
+  const definitions = {
+    customFields: [
+      { name: 'Weight', type: 'number', required: true, id: 'cf-1', orderIndex: 0 },
+      { name: 'Color', type: 'select', options: ['Red', 'Blue'], id: 'cf-2', orderIndex: 1 },
+    ],
+  }
+
+  it('builds inputs from definitions without values', () => {
+    const result = buildCustomFieldInputs(definitions, null)
+    expect(result).toHaveLength(2)
+    expect(result[0].name).toBe('Weight')
+    expect(result[0].value).toBe('')
+    expect(result[1].name).toBe('Color')
+  })
+
+  it('merges stored values by id', () => {
+    const values = [
+      { customField: { id: 'cf-1', name: 'Weight' }, id: 'cfv-1', value: '42' },
+    ]
+    const result = buildCustomFieldInputs(definitions, values)
+    expect(result[0].value).toBe('42')
+    expect(result[0].customFieldValueId).toBe('cfv-1')
+  })
+
+  it('merges stored values by name fallback', () => {
+    const values = [
+      { name: 'Color', id: 'cfv-2', value: 'Blue' },
+    ]
+    const result = buildCustomFieldInputs(definitions, values)
+    expect(result[1].value).toBe('Blue')
+  })
+
+  it('returns empty array for null structure', () => {
+    expect(buildCustomFieldInputs(null, [])).toEqual([])
+  })
+})
+
+// ---------------------------------------------------------------------------
+// requiredCustomFieldsFilled
+// ---------------------------------------------------------------------------
+describe('requiredCustomFieldsFilled', () => {
+  it('returns true when all required fields are filled', () => {
+    const inputs: CustomFieldInput[] = [
+      { id: null, name: 'A', type: 'text', required: true, options: [], value: 'hello', customFieldId: null, customFieldValueId: null, orderIndex: 0 },
+    ]
+    expect(requiredCustomFieldsFilled(inputs)).toBe(true)
+  })
+
+  it('returns false when required field is empty', () => {
+    const inputs: CustomFieldInput[] = [
+      { id: null, name: 'A', type: 'text', required: true, options: [], value: '', customFieldId: null, customFieldValueId: null, orderIndex: 0 },
+    ]
+    expect(requiredCustomFieldsFilled(inputs)).toBe(false)
+  })
+
+  it('returns true for non-required empty field', () => {
+    const inputs: CustomFieldInput[] = [
+      { id: null, name: 'A', type: 'text', required: false, options: [], value: '', customFieldId: null, customFieldValueId: null, orderIndex: 0 },
+    ]
+    expect(requiredCustomFieldsFilled(inputs)).toBe(true)
+  })
+
+  it('treats boolean "false" as filled', () => {
+    const inputs: CustomFieldInput[] = [
+      { id: null, name: 'Active', type: 'boolean', required: true, options: [], value: 'false', customFieldId: null, customFieldValueId: null, orderIndex: 0 },
+    ]
+    expect(requiredCustomFieldsFilled(inputs)).toBe(true)
+  })
+
+  it('treats boolean "true" as filled', () => {
+    const inputs: CustomFieldInput[] = [
+      { id: null, name: 'Active', type: 'boolean', required: true, options: [], value: 'true', customFieldId: null, customFieldValueId: null, orderIndex: 0 },
+    ]
+    expect(requiredCustomFieldsFilled(inputs)).toBe(true)
+  })
+
+  it('treats boolean empty as not filled', () => {
+    const inputs: CustomFieldInput[] = [
+      { id: null, name: 'Active', type: 'boolean', required: true, options: [], value: '', customFieldId: null, customFieldValueId: null, orderIndex: 0 },
+    ]
+    expect(requiredCustomFieldsFilled(inputs)).toBe(false)
+  })
+
+  it('returns true for empty array', () => {
+    expect(requiredCustomFieldsFilled([])).toBe(true)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// shouldPersistField & formatValueForPersistence
+// ---------------------------------------------------------------------------
+describe('shouldPersistField', () => {
+  it('returns true for non-empty text field', () => {
+    expect(shouldPersistField({ value: 'hello' } as CustomFieldInput)).toBe(true)
+  })
+
+  it('returns false for empty text field', () => {
+    expect(shouldPersistField({ value: '', type: 'text' } as CustomFieldInput)).toBe(false)
+  })
+
+  it('returns true for boolean "true"', () => {
+    expect(shouldPersistField({ value: 'true', type: 'boolean' } as CustomFieldInput)).toBe(true)
+  })
+
+  it('returns true for boolean "false"', () => {
+    expect(shouldPersistField({ value: 'false', type: 'boolean' } as CustomFieldInput)).toBe(true)
+  })
+
+  it('returns false for boolean empty', () => {
+    expect(shouldPersistField({ value: '', type: 'boolean' } as CustomFieldInput)).toBe(false)
+  })
+})
+
+describe('formatValueForPersistence', () => {
+  it('trims text value', () => {
+    expect(formatValueForPersistence({ value: '  hello  ', type: 'text' } as CustomFieldInput)).toBe('hello')
+  })
+
+  it('returns "true" for boolean true', () => {
+    expect(formatValueForPersistence({ value: 'true', type: 'boolean' } as CustomFieldInput)).toBe('true')
+  })
+
+  it('returns "false" for boolean non-true', () => {
+    expect(formatValueForPersistence({ value: 'false', type: 'boolean' } as CustomFieldInput)).toBe('false')
+    expect(formatValueForPersistence({ value: '', type: 'boolean' } as CustomFieldInput)).toBe('false')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// buildCustomFieldMetadata
+// ---------------------------------------------------------------------------
+describe('buildCustomFieldMetadata', () => {
+  it('builds metadata from field', () => {
+    const field: CustomFieldInput = {
+      id: null, name: 'Color', type: 'select', required: true,
+      options: ['Red', 'Blue'], value: 'Red',
+      customFieldId: null, customFieldValueId: null, orderIndex: 0,
+    }
+    expect(buildCustomFieldMetadata(field)).toEqual({
+      customFieldName: 'Color',
+      customFieldType: 'select',
+      customFieldRequired: true,
+      customFieldOptions: ['Red', 'Blue'],
+    })
+  })
+})
diff --git a/frontend/tests/shared/inventory-types.test.ts b/frontend/tests/shared/inventory-types.test.ts
new file mode 100644
index 0000000..7206e9d
--- /dev/null
+++ b/frontend/tests/shared/inventory-types.test.ts
@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest'
+import {
+  componentModelStructureValidator,
+  createEmptyComponentModelStructure,
+  createEmptyPieceModelStructure,
+  createEmptyProductModelStructure,
+} from '~/shared/types/inventory'
+
+describe('createEmptyComponentModelStructure', () => {
+  it('returns a valid empty structure', () => {
+    const result = createEmptyComponentModelStructure()
+    expect(result).toEqual({
+      customFields: [],
+      pieces: [],
+      products: [],
+      subcomponents: [],
+    })
+  })
+})
+
+describe('createEmptyPieceModelStructure', () => {
+  it('returns a valid empty piece structure', () => {
+    const result = createEmptyPieceModelStructure()
+    expect(result).toEqual({
+      customFields: [],
+      products: [],
+    })
+  })
+})
+
+describe('createEmptyProductModelStructure', () => {
+  it('returns a valid empty product structure', () => {
+    const result = createEmptyProductModelStructure()
+    expect(result).toEqual({
+      customFields: [],
+    })
+  })
+})
+
+describe('componentModelStructureValidator', () => {
+  it('parses a minimal valid structure', () => {
+    const input = {
+      customFields: [],
+      pieces: [],
+      subcomponents: [],
+    }
+    const result = componentModelStructureValidator.safeParse(input)
+    expect(result.success).toBe(true)
+    if (result.success) {
+      expect(result.data.customFields).toEqual([])
+      expect(result.data.pieces).toEqual([])
+      expect(result.data.subcomponents).toEqual([])
+    }
+  })
+
+  it('rejects a non-object input', () => {
+    const result = componentModelStructureValidator.safeParse('not an object')
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      expect(result.issues.length).toBeGreaterThan(0)
+    }
+  })
+
+  it('validates custom fields with name and type', () => {
+    const input = {
+      customFields: [
+        { name: 'Color', type: 'text', required: true },
+        { name: 'Size', type: 'select', required: false, options: ['S', 'M', 'L'] },
+      ],
+      pieces: [],
+      subcomponents: [],
+    }
+    const result = componentModelStructureValidator.safeParse(input)
+    expect(result.success).toBe(true)
+    if (result.success) {
+      expect(result.data.customFields).toHaveLength(2)
+      expect(result.data.customFields[0].name).toBe('Color')
+      expect(result.data.customFields[1].options).toEqual(['S', 'M', 'L'])
+    }
+  })
+
+  it('rejects custom fields without name', () => {
+    const input = {
+      customFields: [{ type: 'text', required: false }],
+      pieces: [],
+      subcomponents: [],
+    }
+    const result = componentModelStructureValidator.safeParse(input)
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      expect(result.issues.some((i) => i.includes('name'))).toBe(true)
+    }
+  })
+
+  it('validates nested subcomponents', () => {
+    const input = {
+      customFields: [],
+      pieces: [],
+      subcomponents: [
+        {
+          typeComposantId: 'abc-123',
+          alias: 'Motor',
+          subcomponents: [],
+        },
+      ],
+    }
+    const result = componentModelStructureValidator.safeParse(input)
+    expect(result.success).toBe(true)
+    if (result.success) {
+      expect(result.data.subcomponents).toHaveLength(1)
+      expect(result.data.subcomponents[0].alias).toBe('Motor')
+    }
+  })
+
+  it('parse throws on invalid input', () => {
+    expect(() => componentModelStructureValidator.parse(null)).toThrow()
+  })
+})
diff --git a/frontend/tests/shared/modelUtils.test.ts b/frontend/tests/shared/modelUtils.test.ts
new file mode 100644
index 0000000..f986aa4
--- /dev/null
+++ b/frontend/tests/shared/modelUtils.test.ts
@@ -0,0 +1,169 @@
+import { describe, it, expect } from 'vitest'
+import {
+  isPlainObject,
+  defaultStructure,
+  cloneStructure,
+  computeStructureStats,
+  formatStructurePreview,
+} from '~/shared/model/componentStructure'
+import {
+  defaultPieceStructure,
+  defaultProductStructure,
+  clonePieceStructure,
+  cloneProductStructure,
+} from '~/shared/model/pieceProductStructure'
+
+describe('isPlainObject', () => {
+  it('returns true for plain objects', () => {
+    expect(isPlainObject({})).toBe(true)
+    expect(isPlainObject({ key: 'value' })).toBe(true)
+  })
+
+  it('returns false for arrays', () => {
+    expect(isPlainObject([])).toBe(false)
+  })
+
+  it('returns false for null', () => {
+    expect(isPlainObject(null)).toBe(false)
+  })
+
+  it('returns false for primitives', () => {
+    expect(isPlainObject('string')).toBe(false)
+    expect(isPlainObject(42)).toBe(false)
+    expect(isPlainObject(undefined)).toBe(false)
+  })
+})
+
+describe('defaultStructure', () => {
+  it('returns a fresh empty structure each time', () => {
+    const a = defaultStructure()
+    const b = defaultStructure()
+    expect(a).toEqual(b)
+    expect(a).not.toBe(b)
+    expect(a.customFields).toEqual([])
+    expect(a.pieces).toEqual([])
+    expect(a.products).toEqual([])
+    expect(a.subcomponents).toEqual([])
+  })
+})
+
+describe('cloneStructure', () => {
+  it('deep clones a structure', () => {
+    const original = defaultStructure()
+    original.customFields.push({ name: 'test', type: 'text', required: false })
+    const cloned = cloneStructure(original)
+    expect(cloned.customFields).toHaveLength(1)
+    expect(cloned.customFields[0].name).toBe('test')
+    // Ensure deep clone — mutating original doesn't affect clone
+    original.customFields[0].name = 'mutated'
+    expect(cloned.customFields[0].name).toBe('test')
+  })
+
+  it('returns default structure for null input', () => {
+    const result = cloneStructure(null)
+    expect(result).toEqual(defaultStructure())
+  })
+
+  it('returns default structure for undefined input', () => {
+    const result = cloneStructure(undefined)
+    expect(result).toEqual(defaultStructure())
+  })
+
+  it('preserves typeComposantId and alias', () => {
+    const input = {
+      ...defaultStructure(),
+      typeComposantId: 'abc-123',
+      alias: 'Motor',
+    }
+    const result = cloneStructure(input)
+    expect(result.typeComposantId).toBe('abc-123')
+    expect(result.alias).toBe('Motor')
+  })
+})
+
+describe('computeStructureStats', () => {
+  it('counts elements in a structure', () => {
+    const structure = {
+      ...defaultStructure(),
+      customFields: [
+        { name: 'A', type: 'text' as const, required: false },
+        { name: 'B', type: 'number' as const, required: true },
+      ],
+      pieces: [{ typePieceId: 'p1' }],
+      products: [{ typeProductId: 'pr1' }],
+      subcomponents: [{ subcomponents: [] }],
+    }
+    const stats = computeStructureStats(structure)
+    expect(stats.customFields).toBe(2)
+    expect(stats.pieces).toBe(1)
+    expect(stats.products).toBe(1)
+    expect(stats.subcomponents).toBe(1)
+  })
+
+  it('returns zeros for empty structure', () => {
+    const stats = computeStructureStats(defaultStructure())
+    expect(stats).toEqual({
+      customFields: 0,
+      pieces: 0,
+      products: 0,
+      subcomponents: 0,
+    })
+  })
+})
+
+describe('formatStructurePreview', () => {
+  it('returns "Structure vide" for empty structure', () => {
+    const result = formatStructurePreview(defaultStructure())
+    expect(result).toBe('Structure vide')
+  })
+
+  it('formats a non-empty structure', () => {
+    const structure = {
+      ...defaultStructure(),
+      customFields: [{ name: 'A', type: 'text' as const, required: false }],
+      pieces: [{ typePieceId: 'p1' }, { typePieceId: 'p2' }],
+    }
+    const result = formatStructurePreview(structure)
+    expect(result).toContain('1 champ')
+    expect(result).toContain('2 pièce')
+  })
+})
+
+describe('defaultPieceStructure', () => {
+  it('returns a valid empty piece structure', () => {
+    const result = defaultPieceStructure()
+    expect(result.customFields).toEqual([])
+    expect(result.products).toEqual([])
+  })
+})
+
+describe('defaultProductStructure', () => {
+  it('returns a valid empty product structure', () => {
+    const result = defaultProductStructure()
+    expect(result.customFields).toEqual([])
+  })
+})
+
+describe('clonePieceStructure', () => {
+  it('deep clones a piece structure', () => {
+    const original = defaultPieceStructure()
+    original.customFields.push({ name: 'Weight', type: 'number', required: true })
+    const cloned = clonePieceStructure(original)
+    expect(cloned.customFields).toHaveLength(1)
+    original.customFields[0].name = 'mutated'
+    expect(cloned.customFields[0].name).toBe('Weight')
+  })
+
+  it('returns default for null', () => {
+    expect(clonePieceStructure(null)).toEqual(defaultPieceStructure())
+  })
+})
+
+describe('cloneProductStructure', () => {
+  it('deep clones a product structure', () => {
+    const original = defaultProductStructure()
+    original.customFields.push({ name: 'Color', type: 'text', required: false })
+    const cloned = cloneProductStructure(original)
+    expect(cloned.customFields).toHaveLength(1)
+  })
+})
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..307b213
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 0000000..62402fe
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+import vue from '@vitejs/plugin-vue'
+
+const iconStub = resolve(__dirname, 'tests/__mocks__/iconStub.ts')
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    root: '.',
+    include: ['tests/**/*.test.ts'],
+  },
+  resolve: {
+    alias: [
+      { find: /^~icons\/.*/, replacement: iconStub },
+      { find: '~', replacement: resolve(__dirname, 'app') },
+      { find: '#imports', replacement: resolve(__dirname, 'tests/__mocks__/imports.ts') },
+    ],
+  },
+})