diff --git a/app/components/ComponentItem.vue b/app/components/ComponentItem.vue
index aea701c..3a6c2bc 100644
--- a/app/components/ComponentItem.vue
+++ b/app/components/ComponentItem.vue
@@ -150,48 +150,52 @@
       </div>
 
       <!-- Custom Fields Display - Editable or Read-only -->
-      <div v-if="component.customFields && component.customFields.length > 0" class="mt-4 pt-4 border-t border-gray-200">
+      <div v-if="displayedCustomFields.length" class="mt-4 pt-4 border-t border-gray-200">
         <h4 class="font-semibold text-sm text-gray-700 mb-3">
           Champs personnalisés
         </h4>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div v-for="field in component.customFields" :key="field.id" class="form-control">
+          <div
+            v-for="(field, index) in displayedCustomFields"
+            :key="resolveFieldKey(field, index)"
+            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>
+              <span class="label-text text-sm">{{ resolveFieldName(field) }}</span>
+              <span v-if="resolveFieldRequired(field)" class="label-text-alt text-error">*</span>
             </label>
-            <template v-if="isEditMode">
+            <template v-if="isEditMode && !resolveFieldReadOnly(field)">
               <input
-                v-if="field.type === 'text'"
+                v-if="resolveFieldType(field) === 'text'"
                 v-model="field.value"
                 type="text"
                 class="input input-bordered input-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @blur="updateComponentCustomField(field)"
               >
               <input
-                v-else-if="field.type === 'number'"
+                v-else-if="resolveFieldType(field) === 'number'"
                 v-model="field.value"
                 type="number"
                 class="input input-bordered input-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @blur="updateComponentCustomField(field)"
               >
               <select
-                v-else-if="field.type === 'select'"
+                v-else-if="resolveFieldType(field) === 'select'"
                 v-model="field.value"
                 class="select select-bordered select-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @change="updateComponentCustomField(field)"
               >
                 <option value="">
                   Sélectionner...
                 </option>
-                <option v-for="option in field.options" :key="option" :value="option">
+                <option v-for="option in resolveFieldOptions(field)" :key="option" :value="option">
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <div v-else-if="resolveFieldType(field) === 'boolean'" class="flex items-center gap-2">
                 <input
                   v-model="field.value"
                   type="checkbox"
@@ -200,20 +204,20 @@
                   false-value="false"
                   @change="updateComponentCustomField(field)"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+                <span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
               </div>
               <input
-                v-else-if="field.type === 'date'"
+                v-else-if="resolveFieldType(field) === 'date'"
                 v-model="field.value"
                 type="date"
                 class="input input-bordered input-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @blur="updateComponentCustomField(field)"
               >
             </template>
             <template v-else>
               <div class="input input-bordered input-sm bg-base-200">
-                {{ field.value || 'Non défini' }}
+                {{ formatFieldDisplayValue(field) }}
               </div>
             </template>
           </div>
@@ -352,6 +356,8 @@ import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
 
 const props = defineProps({
   component: {
@@ -409,6 +415,160 @@ const componentModelOptionsList = computed(() => {
   return Array.isArray(provided) && provided.length ? provided : props.componentModelOptions
 })
 const pieceModelOptionsList = computed(() => props.pieceModelOptionsProvider(props.component) || [])
+function fieldKeyFromNameAndType(name, type) {
+  const normalizedName = typeof name === 'string' ? name : ''
+  const normalizedType = typeof type === 'string' ? type : ''
+  return normalizedName ? `${normalizedName}::${normalizedType}` : null
+}
+
+function mergeFieldDefinitionsWithValues(definitions, values) {
+  const definitionList = Array.isArray(definitions) ? definitions : []
+  const valueList = Array.isArray(values) ? values : []
+
+  const valueMap = new Map()
+  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 = ensureCustomFieldId(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 ?? ''
+      }
+    }
+
+    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 ?? ''
+    }
+  })
+
+  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 = ensureCustomFieldId(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
+      })
+    }
+  })
+
+  return merged
+}
+
+const displayedCustomFields = computed(() =>
+  mergeFieldDefinitionsWithValues(
+    props.component.customFields,
+    props.component.customFieldValues,
+  ),
+)
+const candidateCustomFields = computed(() => {
+  const sources = [
+    props.component.customFieldValues?.map((value) => value?.customField),
+    props.component.typeComposant?.customFields,
+    props.component.typeMachineComponentRequirement?.typeComposant?.customFields,
+    props.component.composantModel?.customFields,
+    props.component.typeMachineComponentRequirement?.customFields,
+    props.component.customFields,
+  ]
+
+  const map = new Map()
+  sources.forEach((collection) => {
+    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)
+    })
+  })
+
+  return Array.from(map.values())
+})
+
+watch(
+  candidateCustomFields,
+  () => {
+    displayedCustomFields.value.forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  displayedCustomFields,
+  (fields) => {
+    (fields || []).forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
 
 const handleConstructeurChange = async (value) => {
   props.component.constructeurId = value
@@ -416,6 +576,11 @@ const handleConstructeurChange = async (value) => {
 }
 
 const { uploadDocuments, deleteDocument, loadDocumentsByComponent } = useDocuments()
+const {
+  updateCustomFieldValue: updateComponentCustomFieldValueApi,
+  upsertCustomFieldValue: upsertComponentCustomFieldValue,
+} = useCustomFields()
+const { showSuccess, showError } = useToast()
 
 watch(
   () => props.toggleToken,
@@ -446,8 +611,214 @@ const updateComponent = () => {
   emit('update', props.component)
 }
 
-const updateComponentCustomField = () => {
-  emit('update', props.component)
+function resolveFieldKey(field, index) {
+  return field?.id
+    ?? field?.customFieldValueId
+    ?? field?.customFieldId
+    ?? field?.name
+    ?? `field-${index}`
+}
+
+function resolveFieldId(field) {
+  return field?.customFieldValueId ?? null
+}
+
+function resolveFieldName(field) {
+  return field?.name ?? 'Champ'
+}
+
+function resolveFieldType(field) {
+  return field?.type ?? 'text'
+}
+
+function resolveFieldOptions(field) {
+  return field?.options ?? []
+}
+
+function resolveFieldRequired(field) {
+  return !!field?.required
+}
+
+function resolveFieldReadOnly(field) {
+  return !!field?.readOnly
+}
+
+function buildCustomFieldMetadata(field) {
+  return {
+    customFieldName: resolveFieldName(field),
+    customFieldType: resolveFieldType(field),
+    customFieldRequired: resolveFieldRequired(field),
+    customFieldOptions: resolveFieldOptions(field)
+  }
+}
+
+function resolveCustomFieldId(field) {
+  return field?.customFieldId ?? field?.id ?? field?.customField?.id ?? null
+}
+
+function ensureCustomFieldId(field) {
+  const existingId = resolveCustomFieldId(field)
+  if (existingId) {
+    return existingId
+  }
+
+  const name = resolveFieldName(field)
+  if (!name || name === 'Champ') {
+    return null
+  }
+
+  const matches = candidateCustomFields.value.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((candidate) => candidate?.id || candidate?.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
+}
+
+watch(
+  candidateCustomFields,
+  () => {
+    displayedCustomFields.value.forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  displayedCustomFields,
+  (fields) => {
+    (fields || []).forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+const formatFieldDisplayValue = (field) => {
+  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'
+}
+
+const updateComponentCustomField = async (field) => {
+  if (!field || resolveFieldReadOnly(field)) {
+    return
+  }
+
+  const fieldValueId = resolveFieldId(field)
+  if (fieldValueId) {
+    const result = await updateComponentCustomFieldValueApi(fieldValueId, { value: field.value ?? '' })
+    if (result.success) {
+      const existingValue = props.component.customFieldValues?.find((value) => value.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
+  }
+
+  const customFieldId = ensureCustomFieldId(field)
+  const fieldName = resolveFieldName(field)
+  if (!props.component?.id) {
+    showError('Impossible de créer la valeur pour ce champ de composant')
+    return
+  }
+
+  if (!customFieldId && (!fieldName || fieldName === 'Champ')) {
+    showError('Impossible de créer la valeur pour ce champ de composant')
+    return
+  }
+
+  const metadata = customFieldId ? undefined : buildCustomFieldMetadata(field)
+
+  const result = await upsertComponentCustomFieldValue(
+    customFieldId,
+    'composant',
+    props.component.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(props.component.customFieldValues)) {
+        const index = props.component.customFieldValues.findIndex((value) => value.id === newValue.id)
+        if (index !== -1) {
+          props.component.customFieldValues.splice(index, 1, newValue)
+        } else {
+          props.component.customFieldValues.push(newValue)
+        }
+      } else {
+        props.component.customFieldValues = [newValue]
+      }
+    }
+    showSuccess(`Champ "${resolveFieldName(field)}" créé avec succès`)
+
+    const definitions = Array.isArray(props.component.customFields)
+      ? [...props.component.customFields]
+      : []
+    const fieldIdentifier = ensureCustomFieldId(field)
+    const existingIndex = definitions.findIndex((definition) => {
+      const definitionId = ensureCustomFieldId(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: resolveFieldRequired(field),
+      options: resolveFieldOptions(field),
+      value: field.value ?? '',
+      customField: field.customField ?? null,
+    }
+
+    if (existingIndex !== -1) {
+      definitions.splice(existingIndex, 1, updatedDefinition)
+    } else {
+      definitions.push(updatedDefinition)
+    }
+
+    props.component.customFields = definitions
+  } else {
+    showError(`Erreur lors de la sauvegarde du champ "${resolveFieldName(field)}"`)
+  }
 }
 
 const updatePiece = (updatedPiece) => {
diff --git a/app/components/ComponentModelStructureEditor.vue b/app/components/ComponentModelStructureEditor.vue
index 66a7e3f..57989f4 100644
--- a/app/components/ComponentModelStructureEditor.vue
+++ b/app/components/ComponentModelStructureEditor.vue
@@ -1,138 +1,18 @@
 <template>
   <div class="space-y-6">
-    <section class="space-y-3">
-      <div class="flex items-center justify-between">
-        <h3 class="text-sm font-semibold">Champs personnalisés du composant</h3>
-        <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
-      </div>
-      <p v-if="!(localStructure.customFields?.length)" class="text-xs text-gray-500">
-        Aucun champ n'a encore été défini.
-      </p>
-      <div v-else class="space-y-2">
-        <div
-          v-for="(field, index) in localStructure.customFields"
-          :key="`root-field-${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">
-              <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>
-    </section>
-
-    <section class="space-y-3">
-      <div class="flex items-center justify-between">
-        <h3 class="text-sm font-semibold">Pièces incluses par défaut</h3>
-        <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
-      </div>
-      <p v-if="!(localStructure.pieces?.length)" class="text-xs text-gray-500">Aucune pièce définie.</p>
-      <div v-else class="space-y-2">
-        <div
-          v-for="(piece, index) in localStructure.pieces"
-          :key="`root-piece-${index}`"
-          class="border border-base-200 rounded-md p-3 space-y-3"
-        >
-          <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 availablePieceTypes"
-                      :key="type.id"
-                      :value="type.id"
-                    >
-                      {{ formatPieceTypeOption(type) }}
-                    </option>
-                  </select>
-                </div>
-                <p class="mt-1 text-[11px] text-gray-500">
-                  {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
-                </p>
-              </div>
-            </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>
-    </section>
-
-    <section class="space-y-3">
-      <div class="flex items-center justify-between">
-        <h3 class="text-sm font-semibold">Sous-composants</h3>
-        <button type="button" class="btn btn-outline btn-xs" @click="addSubComponent">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
-      </div>
-      <p v-if="!(localStructure.subComponents?.length)" class="text-xs text-gray-500">
-        Aucun sous-composant défini.
-      </p>
-      <div v-else class="space-y-3">
-        <StructureSubComponentEditor
-          v-for="(subComponent, index) in localStructure.subComponents"
-          :key="`root-sub-${index}`"
-          :node="subComponent"
-          :depth="0"
-          :component-types="availableComponentTypes"
-          @remove="removeSubComponent(index)"
-        />
-      </div>
-    </section>
+    <StructureNodeEditor
+      :node="localStructure"
+      :depth="0"
+      :component-types="availableComponentTypes"
+      :piece-types="availablePieceTypes"
+      is-root
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, computed, onMounted } from 'vue'
-import IconLucidePlus from '~icons/lucide/plus'
-import IconLucideTrash from '~icons/lucide/trash'
-import StructureSubComponentEditor from '~/components/StructureSubComponentEditor.vue'
+import StructureNodeEditor from '~/components/StructureNodeEditor.vue'
 import {
   defaultStructure,
   hydrateStructureForEditor,
@@ -185,201 +65,11 @@ watch(
   { deep: true }
 )
 
-type ModelTypeOption = {
-  id: string
-  name: string
-  code?: string | null
-}
-
-const formatModelTypeOption = (type: ModelTypeOption | undefined | null) => {
-  if (!type) return ''
-  return type.code ? `${type.name} (${type.code})` : type.name
-}
-
 const { pieceTypes, loadPieceTypes } = usePieceTypes()
 const { componentTypes, loadComponentTypes } = useComponentTypes()
 
-const availablePieceTypes = computed<ModelTypeOption[]>(() => pieceTypes.value ?? [])
-const availableComponentTypes = computed<ModelTypeOption[]>(() => componentTypes.value ?? [])
-
-const pieceTypeMap = computed(() => {
-  const map = new Map<string, ModelTypeOption>()
-  availablePieceTypes.value.forEach((type) => {
-    if (type && typeof type.id === 'string') {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const componentTypeMap = computed(() => {
-  const map = new Map<string, ModelTypeOption>()
-  availableComponentTypes.value.forEach((type) => {
-    if (type && typeof type.id === 'string') {
-      map.set(type.id, type)
-    }
-  })
-  return map
-})
-
-const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) => formatModelTypeOption(type)
-const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) => formatModelTypeOption(type)
-
-const resolvePieceType = (input: string) => {
-  const normalized = input.trim().toLowerCase()
-  if (!normalized) {
-    return null
-  }
-  return (
-    availablePieceTypes.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)
-      )
-    }) ?? null
-  )
-}
-
-const resolveComponentType = (input: string) => {
-  const normalized = input.trim().toLowerCase()
-  if (!normalized) {
-    return null
-  }
-  return (
-    availableComponentTypes.value.find((type) => {
-      const formatted = formatComponentTypeOption(type).toLowerCase()
-      const name = (type?.name ?? '').toLowerCase()
-      const code = (type?.code ?? '').toLowerCase()
-      return (
-        formatted === normalized
-        || name === normalized
-        || (!!code && code === normalized)
-      )
-    }) ?? null
-  )
-}
-
-const getPieceTypeLabel = (id?: string) => {
-  if (!id) return ''
-  const option = pieceTypeMap.value.get(id)
-  return formatPieceTypeOption(option)
-}
-
-const updatePieceTypeLabel = (piece: any) => {
-  if (!piece) {
-    return
-  }
-  if (piece.typePieceId) {
-    const option = pieceTypeMap.value.get(piece.typePieceId)
-    if (option) {
-      piece.typePieceLabel = formatPieceTypeOption(option)
-      piece.name = option.name || formatPieceTypeOption(option)
-    } else if (!piece.typePieceLabel) {
-      piece.name = ''
-    }
-  } else if (piece.typePieceLabel) {
-    const match = resolvePieceType(piece.typePieceLabel)
-    if (match) {
-      piece.typePieceId = match.id
-      piece.typePieceLabel = formatPieceTypeOption(match)
-      piece.name = match.name || formatPieceTypeOption(match)
-    } else if (!piece.name) {
-      piece.name = piece.typePieceLabel
-    }
-  }
-}
-
-const handlePieceTypeSelect = (piece: any) => {
-  if (!piece) {
-    return
-  }
-  const id = typeof piece.typePieceId === 'string' ? piece.typePieceId : ''
-
-  if (!id) {
-    piece.typePieceId = ''
-    piece.typePieceLabel = ''
-    piece.name = ''
-    return
-  }
-
-  const option = pieceTypeMap.value.get(id)
-  if (!option) {
-    piece.typePieceId = ''
-    piece.typePieceLabel = ''
-    piece.name = ''
-    return
-  }
-
-  piece.typePieceLabel = formatPieceTypeOption(option)
-  piece.name = option.name || piece.typePieceLabel
-}
-
-const applyPieceLabels = (pieces?: any[]) => {
-  if (!Array.isArray(pieces)) {
-    return
-  }
-  pieces.forEach((piece) => {
-    if (piece?.typePieceId) {
-      updatePieceTypeLabel(piece)
-    } else if (piece?.typePieceLabel) {
-      const match = resolvePieceType(piece.typePieceLabel)
-      if (match) {
-        piece.typePieceId = match.id
-        piece.typePieceLabel = formatPieceTypeOption(match)
-        piece.name = match.name || formatPieceTypeOption(match)
-      } else if (!piece.name) {
-        piece.name = piece.typePieceLabel
-      }
-    } else if (!piece?.name) {
-      piece.name = ''
-    }
-  })
-}
-
-const applyComponentTypeLabel = (component: any) => {
-  if (!component) {
-    return
-  }
-  if (component.typeComposantId) {
-    const option = componentTypeMap.value.get(component.typeComposantId)
-    if (option) {
-      component.typeComposantLabel = formatComponentTypeOption(option)
-      component.name = option.name || formatComponentTypeOption(option)
-    } else if (!component.typeComposantLabel) {
-      component.name = ''
-    }
-  } else if (component.typeComposantLabel) {
-    const match = resolveComponentType(component.typeComposantLabel)
-    if (match) {
-      component.typeComposantId = match.id
-      component.typeComposantLabel = formatComponentTypeOption(match)
-      component.name = match.name || formatComponentTypeOption(match)
-    } else {
-      component.typeComposantLabel = ''
-      component.name = ''
-    }
-  }
-}
-
-const traverseSubComponents = (components?: any[]) => {
-  if (!Array.isArray(components)) {
-    return
-  }
-  components.forEach((component) => {
-    applyComponentTypeLabel(component)
-    applyPieceLabels(component?.pieces)
-    traverseSubComponents(component?.subComponents)
-  })
-}
-
-const syncAllTypeLabels = () => {
-  applyPieceLabels(localStructure.pieces)
-  traverseSubComponents(localStructure.subComponents)
-}
+const availablePieceTypes = computed(() => pieceTypes.value ?? [])
+const availableComponentTypes = computed(() => componentTypes.value ?? [])
 
 onMounted(async () => {
   const loaders: Promise<any>[] = []
@@ -390,74 +80,7 @@ onMounted(async () => {
     loaders.push(loadComponentTypes())
   }
   if (loaders.length) {
-    await Promise.all(loaders)
+    await Promise.allSettled(loaders)
   }
-  syncAllTypeLabels()
 })
-
-watch(
-  () => availablePieceTypes.value,
-  () => {
-    syncAllTypeLabels()
-  },
-  { deep: true }
-)
-
-watch(
-  () => availableComponentTypes.value,
-  () => {
-    syncAllTypeLabels()
-  },
-  { deep: true }
-)
-
-const ensureArray = (key: 'customFields' | 'pieces' | 'subComponents') => {
-  if (!Array.isArray(localStructure[key])) {
-    localStructure[key] = []
-  }
-}
-
-const addCustomField = () => {
-  ensureArray('customFields')
-  localStructure.customFields.push({
-    name: '',
-    type: 'text',
-    required: false,
-    optionsText: '',
-    options: [],
-  })
-}
-
-const removeCustomField = (index: number) => {
-  if (!Array.isArray(localStructure.customFields)) return
-  localStructure.customFields.splice(index, 1)
-}
-
-const addPiece = () => {
-  ensureArray('pieces')
-  localStructure.pieces.push({
-    name: '',
-    typePieceId: '',
-    typePieceLabel: '',
-  })
-}
-
-const removePiece = (index: number) => {
-  if (!Array.isArray(localStructure.pieces)) return
-  localStructure.pieces.splice(index, 1)
-}
-
-const addSubComponent = () => {
-  ensureArray('subComponents')
-  localStructure.subComponents.push({
-    name: '',
-    typeComposantId: '',
-    typeComposantLabel: '',
-  })
-}
-
-const removeSubComponent = (index: number) => {
-  if (!Array.isArray(localStructure.subComponents)) return
-  localStructure.subComponents.splice(index, 1)
-}
 </script>
diff --git a/app/components/PieceItem.vue b/app/components/PieceItem.vue
index 1a757d4..b44345d 100644
--- a/app/components/PieceItem.vue
+++ b/app/components/PieceItem.vue
@@ -8,10 +8,7 @@
 
     <div class="flex items-center justify-between mb-3">
       <div class="flex items-center gap-2">
-        <IconLucidePackage
-          class="w-4 h-4 text-purple-500"
-          aria-hidden="true"
-        />
+        <IconLucidePackage class="w-4 h-4 text-purple-500" aria-hidden="true" />
         <input
           v-if="isEditMode"
           :id="`piece-name-${piece.id}`"
@@ -19,8 +16,11 @@
           type="text"
           class="font-semibold text-lg input input-sm input-bordered"
           @blur="updatePiece"
+        />
+        <div
+          v-else
+          class="font-semibold text-lg input input-sm input-bordered bg-base-200"
         >
-        <div v-else class="font-semibold text-lg input input-sm input-bordered bg-base-200">
           {{ pieceData.name }}
         </div>
       </div>
@@ -29,7 +29,12 @@
           v-if="piece.typeMachinePieceRequirement"
           class="badge badge-outline badge-sm"
         >
-          Groupe : {{ piece.typeMachinePieceRequirement.label || piece.typeMachinePieceRequirement.typePiece?.name || 'Non défini' }}
+          Groupe :
+          {{
+            piece.typeMachinePieceRequirement.label ||
+            piece.typeMachinePieceRequirement.typePiece?.name ||
+            "Non défini"
+          }}
         </span>
         <span
           v-if="piece.pieceModel"
@@ -37,7 +42,10 @@
         >
           Modèle : {{ piece.pieceModel.name }}
         </span>
-        <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
+        <span
+          v-if="piece.parentComponentName"
+          class="badge badge-ghost badge-sm"
+        >
           Rattachée à {{ piece.parentComponentName }}
         </span>
       </div>
@@ -53,15 +61,23 @@
           type="text"
           class="input input-sm input-bordered ml-2"
           @blur="updatePiece"
-        >
-        <span v-else class="ml-2">{{ pieceData.reference || 'Non définie' }}</span>
+        />
+        <span v-else class="ml-2">{{
+          pieceData.reference || "Non définie"
+        }}</span>
       </div>
       <div>
         <span class="font-medium">Constructeur:</span>
         <span v-if="!isEditMode" class="ml-2">
-          <span class="font-medium">{{ piece.constructeur?.name || 'Non défini' }}</span>
+          <span class="font-medium">{{
+            piece.constructeur?.name || "Non défini"
+          }}</span>
           <span v-if="piece.constructeur" class="block text-xs text-gray-500">
-            {{ [piece.constructeur?.email, piece.constructeur?.phone].filter(Boolean).join(' • ') }}
+            {{
+              [piece.constructeur?.email, piece.constructeur?.phone]
+                .filter(Boolean)
+                .join(" • ")
+            }}
           </span>
         </span>
         <ConstructeurSelect
@@ -81,19 +97,22 @@
           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>
+        />
+        <span v-else class="ml-2">{{
+          pieceData.prix ? `${pieceData.prix}€` : "Non défini"
+        }}</span>
       </div>
     </div>
 
-    <div
-      v-if="isEditMode && piece.typeMachinePieceRequirement"
-      class="mt-3"
-    >
+    <div v-if="isEditMode && piece.typeMachinePieceRequirement" class="mt-3">
       <label class="label">
         <span class="label-text text-sm font-medium">Modèle de pièce</span>
         <span class="label-text-alt text-xs">
-          {{ piece.typeMachinePieceRequirement.label || piece.typeMachinePieceRequirement.typePiece?.name || 'Groupe' }}
+          {{
+            piece.typeMachinePieceRequirement.label ||
+            piece.typeMachinePieceRequirement.typePiece?.name ||
+            "Groupe"
+          }}
         </span>
       </label>
       <select
@@ -101,9 +120,7 @@
         class="select select-bordered select-sm w-full"
         @change="assignPieceModel($event.target.value)"
       >
-        <option value="">
-          Définir manuellement
-        </option>
+        <option value="">Définir manuellement</option>
         <option
           v-for="model in pieceModelOptions"
           :key="model.id"
@@ -115,59 +132,85 @@
     </div>
 
     <!-- Champs personnalisés de la pièce -->
-    <div v-if="piece.customFieldValues && piece.customFieldValues.length > 0" class="mt-4 pt-4 border-t border-gray-200">
+    <div
+      v-if="displayedCustomFields.length"
+      class="mt-4 pt-4 border-t border-gray-200"
+    >
       <h5 class="text-sm font-medium text-gray-700 mb-3">
         Champs personnalisés
       </h5>
       <div class="space-y-3">
         <div
-          v-for="fieldValue in piece.customFieldValues"
-          :key="fieldValue.id"
+          v-for="(field, index) in displayedCustomFields"
+          :key="resolveFieldKey(field, index)"
           class="form-control"
         >
           <label class="label">
-            <span class="label-text text-sm">{{ fieldValue.customField.name }}</span>
-            <span v-if="fieldValue.customField.required" class="label-text-alt text-error">*</span>
+            <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">
+          <template v-if="isEditMode && !resolveFieldReadOnly(field)">
             <!-- Champ de type TEXT -->
             <input
-              v-if="fieldValue.customField.type === 'text'"
-              :value="fieldValue.value"
+              v-if="resolveFieldType(field) === 'text'"
+              :value="field.value ?? ''"
               type="text"
               class="input input-bordered input-sm"
-              :required="fieldValue.customField.required"
-              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
-              @blur="updateCustomFieldValue(fieldValue.id)"
-            >
+              :required="resolveFieldRequired(field)"
+              @input="
+                setCustomFieldValue(
+                  resolveFieldId(field),
+                  $event.target.value,
+                  field
+                )
+              "
+              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
+            />
 
             <!-- Champ de type NUMBER -->
             <input
-              v-else-if="fieldValue.customField.type === 'number'"
-              :value="fieldValue.value"
+              v-else-if="resolveFieldType(field) === 'number'"
+              :value="field.value ?? ''"
               type="number"
               class="input input-bordered input-sm"
-              :required="fieldValue.customField.required"
-              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
-              @blur="updateCustomFieldValue(fieldValue.id)"
-            >
+              :required="resolveFieldRequired(field)"
+              @input="
+                setCustomFieldValue(
+                  resolveFieldId(field),
+                  $event.target.value,
+                  field
+                )
+              "
+              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
+            />
 
             <!-- Champ de type SELECT -->
             <select
-              v-else-if="fieldValue.customField.type === 'select'"
-              :value="fieldValue.value"
+              v-else-if="resolveFieldType(field) === 'select'"
+              :value="field.value ?? ''"
               class="select select-bordered select-sm"
-              :required="fieldValue.customField.required"
-              @change="setCustomFieldValue(fieldValue.id, $event.target.value)"
-              @blur="updateCustomFieldValue(fieldValue.id)"
+              :required="resolveFieldRequired(field)"
+              @change="
+                (event) =>
+                  setCustomFieldValue(
+                    resolveFieldId(field),
+                    event.target.value,
+                    field
+                  )
+              "
+              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
             >
-              <option value="">
-                Sélectionner...
-              </option>
+              <option value="">Sélectionner...</option>
               <option
-                v-for="option in fieldValue.customField.options"
+                v-for="option in resolveFieldOptions(field)"
                 :key="option"
                 :value="option"
               >
@@ -176,34 +219,51 @@
             </select>
 
             <!-- Champ de type BOOLEAN -->
-            <div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
+            <div
+              v-else-if="resolveFieldType(field) === 'boolean'"
+              class="flex items-center gap-2"
+            >
               <input
-                :value="fieldValue.value"
+                :value="field.value ?? ''"
                 type="checkbox"
                 class="checkbox checkbox-sm"
-                :checked="fieldValue.value === 'true'"
-                @change="setCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
-                @blur="updateCustomFieldValue(fieldValue.id)"
-              >
-              <span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
+                :checked="String(field.value).toLowerCase() === 'true'"
+                @change="
+                  setCustomFieldValue(
+                    resolveFieldId(field),
+                    $event.target.checked ? 'true' : 'false',
+                    field
+                  )
+                "
+                @blur="updateCustomFieldValue(resolveFieldId(field), field)"
+              />
+              <span class="text-sm">{{
+                String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
+              }}</span>
             </div>
 
             <!-- Champ de type DATE -->
             <input
-              v-else-if="fieldValue.customField.type === 'date'"
-              :value="fieldValue.value"
+              v-else-if="resolveFieldType(field) === 'date'"
+              :value="field.value ?? ''"
               type="date"
               class="input input-bordered input-sm"
-              :required="fieldValue.customField.required"
-              @input="setCustomFieldValue(fieldValue.id, $event.target.value)"
-              @blur="updateCustomFieldValue(fieldValue.id)"
-            >
+              :required="resolveFieldRequired(field)"
+              @input="
+                setCustomFieldValue(
+                  resolveFieldId(field),
+                  $event.target.value,
+                  field
+                )
+              "
+              @blur="updateCustomFieldValue(resolveFieldId(field), field)"
+            />
           </template>
 
           <!-- Mode lecture seule -->
           <template v-else>
             <div class="input input-bordered input-sm bg-base-200">
-              {{ fieldValue.value || 'Non défini' }}
+              {{ formatFieldDisplayValue(field) }}
             </div>
           </template>
         </div>
@@ -212,11 +272,15 @@
 
     <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
       <div class="flex items-center justify-between">
-        <h5 class="text-sm font-medium text-gray-700">
-          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' : '' }}
+        <h5 class="text-sm font-medium text-gray-700">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>
 
@@ -251,7 +315,8 @@
                 {{ document.name }}
               </div>
               <div class="text-xs text-gray-500">
-                {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+                {{ document.mimeType || "Inconnu" }} •
+                {{ formatSize(document.size) }}
               </div>
             </div>
           </div>
@@ -260,12 +325,20 @@
               type="button"
               class="btn btn-ghost btn-xs"
               :disabled="!canPreviewDocument(document)"
-              :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+              :title="
+                canPreviewDocument(document)
+                  ? 'Consulter le document'
+                  : 'Aucun aperçu disponible pour ce type'
+              "
               @click="openPreview(document)"
             >
               Consulter
             </button>
-            <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              @click="downloadDocument(document)"
+            >
               Télécharger
             </button>
             <button
@@ -288,219 +361,633 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, watch, ref, computed } from 'vue'
-import ConstructeurSelect from './ConstructeurSelect.vue'
-import { useCustomFields } from '~/composables/useCustomFields'
-import { useToast } from '~/composables/useToast'
-import { useDocuments } from '~/composables/useDocuments'
-import { getFileIcon } from '~/utils/fileIcons'
-import { canPreviewDocument } from '~/utils/documentPreview'
-import DocumentUpload from '~/components/DocumentUpload.vue'
-import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-import IconLucidePackage from '~icons/lucide/package'
+import { reactive, onMounted, watch, ref, computed } from "vue";
+import ConstructeurSelect from "./ConstructeurSelect.vue";
+import { useCustomFields } from "~/composables/useCustomFields";
+import { useToast } from "~/composables/useToast";
+import { useDocuments } from "~/composables/useDocuments";
+import { getFileIcon } from "~/utils/fileIcons";
+import { canPreviewDocument } from "~/utils/documentPreview";
+import DocumentUpload from "~/components/DocumentUpload.vue";
+import DocumentPreviewModal from "~/components/DocumentPreviewModal.vue";
+import IconLucidePackage from "~icons/lucide/package";
 
 const props = defineProps({
   piece: {
     type: Object,
-    required: true
+    required: true,
   },
   isEditMode: {
     type: Boolean,
-    default: false
+    default: false,
   },
   pieceModelOptions: {
     type: Array,
-    default: () => []
-  }
-})
+    default: () => [],
+  },
+});
 
-const emit = defineEmits(['update', 'edit', 'custom-field-update', 'assign-model'])
+const emit = defineEmits([
+  "update",
+  "edit",
+  "custom-field-update",
+  "assign-model",
+]);
 
 // Données locales isolées pour cette pièce
 const pieceData = reactive({
-  name: props.piece.name || '',
-  reference: props.piece.reference || '',
-  prix: props.piece.prix || ''
-})
+  name: props.piece.name || "",
+  reference: props.piece.reference || "",
+  prix: props.piece.prix || "",
+});
 
-const selectedFiles = ref([])
-const uploadingDocuments = ref(false)
-const loadingDocuments = ref(false)
-const documentsLoaded = ref(!!(props.piece.documents && props.piece.documents.length))
-const pieceDocuments = computed(() => props.piece.documents || [])
-const documentIcon = doc => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
-const previewDocument = ref(null)
-const previewVisible = ref(false)
-const selectedPieceModelId = computed(() => props.piece.pieceModelId || props.piece.pieceModel?.id || '')
-const pieceModelOptions = computed(() => props.pieceModelOptions || [])
+const selectedFiles = ref([]);
+const uploadingDocuments = ref(false);
+const loadingDocuments = ref(false);
+const documentsLoaded = ref(
+  !!(props.piece.documents && props.piece.documents.length)
+);
+const pieceDocuments = computed(() => props.piece.documents || []);
+const documentIcon = (doc) =>
+  getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType });
+const previewDocument = ref(null);
+const previewVisible = ref(false);
+const selectedPieceModelId = computed(
+  () => props.piece.pieceModelId || props.piece.pieceModel?.id || ""
+);
+const pieceModelOptions = computed(() => props.pieceModelOptions || []);
+function fieldKeyFromNameAndType(name, type) {
+  const normalizedName = typeof name === 'string' ? name : '';
+  const normalizedType = typeof type === 'string' ? type : '';
+  return normalizedName ? `${normalizedName}::${normalizedType}` : null;
+}
+
+function mergeFieldDefinitionsWithValues(definitions, values) {
+  const definitionList = Array.isArray(definitions) ? definitions : [];
+  const valueList = Array.isArray(values) ? values : [];
+
+  const valueMap = new Map();
+  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 ?? '',
+      };
+    }
+
+    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 ?? '',
+    };
+  });
+
+  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,
+      });
+    }
+  });
+
+  return merged;
+}
+
+const displayedCustomFields = computed(() =>
+  mergeFieldDefinitionsWithValues(
+    props.piece.customFields,
+    props.piece.customFieldValues,
+  ),
+);
+
+const candidateCustomFields = computed(() => {
+  const sources = [
+    props.piece.customFieldValues?.map((value) => value?.customField),
+    props.piece.typePiece?.customFields,
+    props.piece.typeMachinePieceRequirement?.typePiece?.customFields,
+    props.piece.typeMachinePieceRequirement?.customFields,
+    props.piece.pieceModel?.customFields,
+    props.piece.customFields,
+  ];
+
+  const map = new Map();
+  sources.forEach((collection) => {
+    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);
+    });
+  });
+
+  return Array.from(map.values());
+});
 
 const handleConstructeurChange = (value) => {
-  props.piece.constructeurId = value
-  updatePiece()
-}
+  props.piece.constructeurId = value;
+  updatePiece();
+};
 
-const { uploadDocuments, deleteDocument, loadDocumentsByPiece } = useDocuments()
+const { uploadDocuments, deleteDocument, loadDocumentsByPiece } =
+  useDocuments();
+const {
+  updateCustomFieldValue: updateCustomFieldValueApi,
+  upsertCustomFieldValue,
+} = useCustomFields();
+const { showSuccess, showError } = useToast();
 
 const refreshDocuments = async () => {
-  if (!props.piece?.id) { return }
-  loadingDocuments.value = true
+  if (!props.piece?.id) {
+    return;
+  }
+  loadingDocuments.value = true;
   try {
-    const result = await loadDocumentsByPiece(props.piece.id, { updateStore: false })
+    const result = await loadDocumentsByPiece(props.piece.id, {
+      updateStore: false,
+    });
     if (result.success) {
-      props.piece.documents = result.data || []
-      documentsLoaded.value = true
+      props.piece.documents = result.data || [];
+      documentsLoaded.value = true;
     }
   } finally {
-    loadingDocuments.value = false
+    loadingDocuments.value = false;
   }
-}
+};
 
 const handleFilesAdded = async (files) => {
-  if (!files.length || !props.piece?.id) { return }
-  uploadingDocuments.value = true
+  if (!files.length || !props.piece?.id) {
+    return;
+  }
+  uploadingDocuments.value = true;
   try {
     const result = await uploadDocuments(
       {
         files,
-        context: { pieceId: props.piece.id }
+        context: { pieceId: props.piece.id },
       },
       { updateStore: false }
-    )
+    );
 
     if (result.success) {
-      const newDocs = result.data || []
-      props.piece.documents = [...newDocs, ...(props.piece.documents || [])]
-      documentsLoaded.value = true
-      selectedFiles.value = []
+      const newDocs = result.data || [];
+      props.piece.documents = [...newDocs, ...(props.piece.documents || [])];
+      documentsLoaded.value = true;
+      selectedFiles.value = [];
     }
   } finally {
-    uploadingDocuments.value = false
+    uploadingDocuments.value = false;
   }
-}
+};
 
 const removeDocument = async (documentId) => {
-  if (!documentId) { return }
-  const result = await deleteDocument(documentId, { updateStore: false })
-  if (result.success) {
-    props.piece.documents = (props.piece.documents || []).filter(doc => doc.id !== documentId)
+  if (!documentId) {
+    return;
   }
-}
+  const result = await deleteDocument(documentId, { updateStore: false });
+  if (result.success) {
+    props.piece.documents = (props.piece.documents || []).filter(
+      (doc) => doc.id !== documentId
+    );
+  }
+};
 
 const downloadDocument = (doc) => {
-  if (!doc?.path) { return }
-
-  if (doc.path.startsWith('data:')) {
-    const link = document.createElement('a')
-    link.href = doc.path
-    link.download = doc.filename || doc.name || 'document'
-    link.click()
-    return
+  if (!doc?.path) {
+    return;
   }
 
-  window.open(doc.path, '_blank')
-}
+  if (doc.path.startsWith("data:")) {
+    const link = document.createElement("a");
+    link.href = doc.path;
+    link.download = doc.filename || doc.name || "document";
+    link.click();
+    return;
+  }
+
+  window.open(doc.path, "_blank");
+};
 
 const openPreview = (doc) => {
-  if (!canPreviewDocument(doc)) { return }
-  previewDocument.value = doc
-  previewVisible.value = true
-}
+  if (!canPreviewDocument(doc)) {
+    return;
+  }
+  previewDocument.value = doc;
+  previewVisible.value = true;
+};
 
 const closePreview = () => {
-  previewVisible.value = false
-  previewDocument.value = null
-}
+  previewVisible.value = false;
+  previewDocument.value = null;
+};
 
 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]}`
-}
+  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]}`;
+};
 
 watch(
   () => props.piece.documents,
   (docs) => {
-    documentsLoaded.value = !!(docs && docs.length)
+    documentsLoaded.value = !!(docs && docs.length);
   }
-)
+);
 
 // Méthodes pour gérer les champs personnalisés
-const setCustomFieldValue = (fieldValueId, value) => {
-  const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
-  if (fieldValue) {
-    fieldValue.value = value
+function resolveFieldKey(field, index) {
+  return field?.id ??
+    field?.customFieldValueId ??
+    field?.customFieldId ??
+    field?.name ??
+    `field-${index}`
+}
+
+function resolveFieldId(field) {
+  return field?.customFieldValueId ?? null
+}
+
+function resolveFieldName(field) {
+  return field?.name ?? 'Champ'
+}
+
+function resolveFieldType(field) {
+  return field?.type ?? 'text'
+}
+
+function resolveFieldOptions(field) {
+  return field?.options ?? []
+}
+
+function resolveFieldRequired(field) {
+  return !!field?.required
+}
+
+function resolveFieldReadOnly(field) {
+  return !!field?.readOnly
+}
+
+function buildCustomFieldMetadata(field) {
+  return {
+    customFieldName: resolveFieldName(field),
+    customFieldType: resolveFieldType(field),
+    customFieldRequired: resolveFieldRequired(field),
+    customFieldOptions: resolveFieldOptions(field)
   }
 }
 
+function resolveCustomFieldId(field) {
+  return field?.customFieldId ?? field?.id ?? field?.customField?.id ?? null;
+}
+
+function ensureCustomFieldId(field) {
+  const existingId = resolveCustomFieldId(field);
+  if (existingId) {
+    return existingId;
+  }
+
+  const name = resolveFieldName(field);
+  if (!name || name === "Champ") {
+    return null;
+  }
+
+  const matches = candidateCustomFields.value.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((candidate) => candidate?.id || candidate?.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;
+}
+
+watch(
+  candidateCustomFields,
+  () => {
+    const fields = displayedCustomFields.value || []
+    fields.forEach((field) => field && ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  displayedCustomFields,
+  (fields) => {
+    (fields || []).forEach((field) => field && ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+
+const formatFieldDisplayValue = (field) => {
+  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";
+};
+
+const setCustomFieldValue = (fieldValueId, value, field) => {
+  if (resolveFieldReadOnly(field)) {
+    return;
+  }
+  if (field && typeof field === "object") {
+    field.value = value;
+  }
+  if (!fieldValueId) {
+    return;
+  }
+  const fieldValue = props.piece.customFieldValues?.find(
+    (fv) => fv.id === fieldValueId
+  );
+  if (fieldValue) {
+    fieldValue.value = value;
+  }
+};
+
 const updatePiece = () => {
-  const prixValue = pieceData.prix
-  emit('update', {
+  const prixValue = pieceData.prix;
+  emit("update", {
     ...props.piece,
     ...pieceData,
-    prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null,
-    constructeurId: props.piece.constructeurId || null
-  })
-}
+    prix: prixValue && prixValue !== "" ? parseFloat(prixValue) : null,
+    constructeurId: props.piece.constructeurId || null,
+  });
+};
 
 const assignPieceModel = (value) => {
-  const previousModelId = props.piece.pieceModelId || props.piece.pieceModel?.id || null
-  const previousModel = props.piece.pieceModel || null
-  props.piece.pieceModelId = value || null
+  const previousModelId =
+    props.piece.pieceModelId || props.piece.pieceModel?.id || null;
+  const previousModel = props.piece.pieceModel || null;
+  props.piece.pieceModelId = value || null;
   if (!value) {
-    props.piece.pieceModel = null
+    props.piece.pieceModel = null;
   }
-  emit('assign-model', {
+  emit("assign-model", {
     pieceId: props.piece.id,
     pieceModelId: value || null,
     previousModelId,
-    previousModel
-  })
-}
+    previousModel,
+  });
+};
 
-const updateCustomFieldValue = async (fieldValueId) => {
-  const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
-  if (fieldValue) {
-    const { updateCustomFieldValue } = useCustomFields()
-    const { showSuccess, showError } = useToast()
-
-    const result = await updateCustomFieldValue(fieldValueId, { value: fieldValue.value })
-    if (result.success) {
-      showSuccess(`Champ "${fieldValue.customField.name}" mis à jour avec succès`)
-    } else {
-      showError(`Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`)
-    }
+const updateCustomFieldValue = async (fieldValueId, field) => {
+  if (!field || resolveFieldReadOnly(field)) {
+    return;
   }
-}
+
+  const fieldValue = fieldValueId
+    ? props.piece.customFieldValues?.find((fv) => fv.id === fieldValueId)
+    : undefined;
+
+  if (fieldValue) {
+    const result = await updateCustomFieldValueApi(fieldValueId, {
+      value: fieldValue.value,
+    });
+    if (result.success) {
+      if (fieldValue.customField?.id) {
+        field.customFieldId = fieldValue.customField.id;
+        field.customField = fieldValue.customField;
+      }
+      showSuccess(
+        `Champ "${fieldValue.customField.name}" mis à jour avec succès`
+      );
+      emit("custom-field-update", {
+        fieldId: fieldValue.customField?.id ?? ensureCustomFieldId(field),
+        pieceId: props.piece.id,
+        value: fieldValue.value,
+      });
+    } else {
+      showError(
+        `Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`
+      );
+    }
+    return;
+  }
+
+  const customFieldId = ensureCustomFieldId(field);
+  const fieldName = resolveFieldName(field);
+  if (!props.piece?.id) {
+    showError("Impossible de créer la valeur pour ce champ de pièce");
+    return;
+  }
+
+  if (!customFieldId && (!fieldName || fieldName === "Champ")) {
+    showError("Impossible de créer la valeur pour ce champ de pièce");
+    return;
+  }
+
+  const metadata = customFieldId ? undefined : buildCustomFieldMetadata(field);
+
+  const result = await upsertCustomFieldValue(
+    customFieldId,
+    "piece",
+    props.piece.id,
+    field.value ?? "",
+    metadata
+  );
+
+  if (result.success) {
+    const created = result.data;
+    if (created?.id) {
+      field.customFieldValueId = created.id;
+      field.value = created.value ?? field.value ?? "";
+      if (created.customField?.id) {
+        field.customFieldId = created.customField.id;
+        field.customField = created.customField;
+      }
+
+      if (Array.isArray(props.piece.customFieldValues)) {
+        const index = props.piece.customFieldValues.findIndex(
+          (value) => value.id === created.id
+        );
+        if (index !== -1) {
+          props.piece.customFieldValues.splice(index, 1, created);
+        } else {
+          props.piece.customFieldValues.push(created);
+        }
+      } else {
+        props.piece.customFieldValues = [created];
+      }
+    }
+
+    showSuccess(`Champ "${resolveFieldName(field)}" créé avec succès`);
+    emit("custom-field-update", {
+      fieldId:
+        created?.customField?.id ??
+        created?.customFieldId ??
+        ensureCustomFieldId(field),
+      pieceId: props.piece.id,
+      value: field.value ?? "",
+    });
+
+    const definitions = Array.isArray(props.piece.customFields)
+      ? [...props.piece.customFields]
+      : [];
+    const fieldIdentifier = ensureCustomFieldId(field);
+    const existingIndex = definitions.findIndex((definition) => {
+      const definitionId = ensureCustomFieldId(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: resolveFieldRequired(field),
+      options: resolveFieldOptions(field),
+      value: field.value ?? "",
+      customField: field.customField ?? null,
+    };
+
+    if (existingIndex !== -1) {
+      definitions.splice(existingIndex, 1, updatedDefinition);
+    } else {
+      definitions.push(updatedDefinition);
+    }
+
+    props.piece.customFields = definitions;
+  } else {
+    showError(
+      `Erreur lors de la sauvegarde du champ "${resolveFieldName(field)}"`
+    );
+  }
+};
 
 // Surveiller les changements dans les champs personnalisés
-watch(() => props.piece.customFieldValues, () => {
-  console.log('PieceItem - customFieldValues updated:', props.piece.customFieldValues)
-}, { deep: true })
-
 watch(
   () => [props.piece.name, props.piece.reference, props.piece.prix],
   () => {
-    pieceData.name = props.piece.name || ''
-    pieceData.reference = props.piece.reference || ''
-    pieceData.prix = props.piece.prix || ''
+    pieceData.name = props.piece.name || "";
+    pieceData.reference = props.piece.reference || "";
+    pieceData.prix = props.piece.prix || "";
   }
-)
+);
 
 onMounted(() => {
   // Initialiser les données avec les props
-  pieceData.name = props.piece.name || ''
-  pieceData.reference = props.piece.reference || ''
-  pieceData.prix = props.piece.prix || ''
-
-  // Debug: vérifier si les champs personnalisés sont présents
-  console.log('PieceItem - piece:', props.piece)
-  console.log('PieceItem - customFieldValues:', props.piece.customFieldValues)
-
+  pieceData.name = props.piece.name || "";
+  pieceData.reference = props.piece.reference || "";
+  pieceData.prix = props.piece.prix || "";
   if (!documentsLoaded.value) {
-    refreshDocuments()
+    refreshDocuments();
   }
-})
+});
 </script>
diff --git a/app/components/StructureNodeEditor.vue b/app/components/StructureNodeEditor.vue
new file mode 100644
index 0000000..919c9b9
--- /dev/null
+++ b/app/components/StructureNodeEditor.vue
@@ -0,0 +1,433 @@
+<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 ? 'Famille de composant racine' : 'Famille de composant' }}
+            </span>
+          </label>
+          <select
+            v-model="node.typeComposantId"
+            class="select select-bordered select-sm w-full"
+            @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-gray-500">
+            {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+          </p>
+        </div>
+        <button
+          v-if="!isRoot"
+          type="button"
+          class="btn btn-error btn-xs btn-square"
+          @click="emit('remove')"
+        >
+          <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="px-4 py-4 space-y-5">
+        <section class="space-y-3">
+          <div class="flex items-center justify-between gap-2">
+            <h4 :class="headingClass">
+              {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
+            </h4>
+            <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
+              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+              Ajouter
+            </button>
+          </div>
+          <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
+            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"
+            >
+              <div class="flex items-start justify-between gap-2">
+                <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>
+        </section>
+
+        <section class="space-y-3">
+          <div class="flex items-center justify-between gap-2">
+            <h4 :class="headingClass">
+              {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
+            </h4>
+            <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
+              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+              Ajouter
+            </button>
+          </div>
+          <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
+            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="border border-base-200 rounded-md p-3 space-y-3"
+            >
+              <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-gray-500">
+                      {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
+                    </p>
+                  </div>
+                </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>
+        </section>
+
+        <section class="space-y-3">
+          <div class="flex items-center justify-between gap-2">
+            <h4 :class="headingClass">Sous-composants</h4>
+            <button type="button" class="btn btn-outline btn-xs" @click="addSubComponent">
+              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+              Ajouter
+            </button>
+          </div>
+          <p v-if="!(node.subComponents?.length)" class="text-xs text-gray-500">
+            Aucun sous-composant défini.
+          </p>
+          <div v-else class="space-y-3">
+            <StructureNodeEditor
+              v-for="(subComponent, index) in node.subComponents"
+              :key="`sub-${index}`"
+              :node="subComponent"
+              :depth="depth + 1"
+              :component-types="componentTypes"
+              :piece-types="pieceTypes"
+              @remove="removeSubComponent(index)"
+            />
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+
+defineOptions({ name: 'StructureNodeEditor' })
+
+type ModelTypeOption = {
+  id: string
+  name: string
+  code?: string | null
+}
+
+const props = withDefaults(defineProps<{
+  node: Record<string, any>
+  depth?: number
+  componentTypes?: ModelTypeOption[]
+  pieceTypes?: ModelTypeOption[]
+  isRoot?: boolean
+}>(), {
+  depth: 0,
+  componentTypes: () => [],
+  pieceTypes: () => [],
+  isRoot: false,
+})
+
+const emit = defineEmits(['remove'])
+
+const componentTypes = computed(() => props.componentTypes ?? [])
+const pieceTypes = computed(() => props.pieceTypes ?? [])
+
+const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
+const containerClass = computed(() => {
+  const level = Math.max(0, props.depth ?? 0)
+  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'))
+
+const formatModelTypeOption = (type: ModelTypeOption | undefined | null) => {
+  if (!type) return ''
+  return type.code ? `${type.name} (${type.code})` : 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 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 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 ensureArray = (key: 'customFields' | 'pieces' | 'subComponents') => {
+  if (!Array.isArray(props.node[key])) {
+    props.node[key] = []
+  }
+}
+
+const syncComponentType = (component: any) => {
+  if (!component) {
+    return
+  }
+  const id = typeof component.typeComposantId === 'string'
+    ? component.typeComposantId
+    : ''
+
+  if (!id) {
+    component.typeComposantLabel = ''
+    component.name = ''
+    return
+  }
+
+  const option = componentTypeMap.value.get(id)
+  if (!option) {
+    component.typeComposantLabel = ''
+    component.name = ''
+    return
+  }
+
+  component.typeComposantLabel = formatModelTypeOption(option)
+  component.name = option.name || component.typeComposantLabel
+}
+
+const updatePieceTypeLabel = (piece: any) => {
+  if (!piece) return
+
+  if (piece.typePieceId) {
+    const option = pieceTypeMap.value.get(piece.typePieceId)
+    if (option) {
+      piece.typePieceLabel = formatPieceTypeOption(option)
+      piece.name = option.name || 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)
+        piece.name = match.name || formatPieceTypeOption(match)
+        return
+      }
+    }
+  }
+
+  if (!piece.name) {
+    piece.name = piece.typePieceLabel || ''
+  }
+}
+
+const syncPieceLabels = (pieces?: any[]) => {
+  if (!Array.isArray(pieces)) {
+    return
+  }
+  pieces.forEach((piece) => {
+    updatePieceTypeLabel(piece)
+  })
+}
+
+const handleComponentTypeSelect = (component: any) => {
+  syncComponentType(component)
+}
+
+const handlePieceTypeSelect = (piece: any) => {
+  if (!piece) {
+    return
+  }
+  const id = typeof piece.typePieceId === 'string' ? piece.typePieceId : ''
+  if (!id) {
+    piece.typePieceLabel = ''
+    piece.name = ''
+    return
+  }
+  const option = pieceTypeMap.value.get(id)
+  if (!option) {
+    piece.typePieceId = ''
+    piece.typePieceLabel = ''
+    piece.name = ''
+    return
+  }
+  piece.typePieceLabel = formatPieceTypeOption(option)
+  piece.name = option.name || piece.typePieceLabel
+}
+
+const addCustomField = () => {
+  ensureArray('customFields')
+  props.node.customFields.push({
+    name: '',
+    type: 'text',
+    required: false,
+    optionsText: '',
+    options: [],
+  })
+}
+
+const removeCustomField = (index: number) => {
+  if (!Array.isArray(props.node.customFields)) return
+  props.node.customFields.splice(index, 1)
+}
+
+const addPiece = () => {
+  ensureArray('pieces')
+  props.node.pieces.push({
+    name: '',
+    typePieceId: '',
+    typePieceLabel: '',
+  })
+}
+
+const removePiece = (index: number) => {
+  if (!Array.isArray(props.node.pieces)) return
+  props.node.pieces.splice(index, 1)
+}
+
+const addSubComponent = () => {
+  ensureArray('subComponents')
+  props.node.subComponents.push({
+    name: '',
+    typeComposantId: '',
+    typeComposantLabel: '',
+    customFields: [],
+    pieces: [],
+    subComponents: [],
+  })
+}
+
+const removeSubComponent = (index: number) => {
+  if (!Array.isArray(props.node.subComponents)) return
+  props.node.subComponents.splice(index, 1)
+}
+
+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 }
+)
+</script>
diff --git a/app/components/StructureSubComponentEditor.vue b/app/components/StructureSubComponentEditor.vue
deleted file mode 100644
index b5aea5e..0000000
--- a/app/components/StructureSubComponentEditor.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div class="border border-base-200 rounded-lg bg-base-100" :class="depthPadding">
-    <div class="flex items-center justify-between gap-3 px-4 py-3">
-      <div class="flex-1">
-        <select
-          v-model="node.typeComposantId"
-          class="select select-bordered select-sm w-full"
-          @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="mt-1 text-[11px] text-gray-500">
-          {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
-        </p>
-      </div>
-      <button type="button" class="btn btn-error btn-xs btn-square" @click="emit('remove')">
-        <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, watch } from 'vue'
-import IconLucideTrash from '~icons/lucide/trash'
-
-defineOptions({ name: 'StructureSubComponentEditor' })
-
-type ModelTypeOption = {
-  id: string
-  name: string
-  code?: string | null
-}
-
-const props = withDefaults(defineProps<{
-  node: Record<string, any>
-  depth?: number
-  componentTypes?: ModelTypeOption[]
-}>(), {
-  depth: 0,
-  componentTypes: () => [],
-})
-
-const emit = defineEmits(['remove'])
-
-const componentTypes = computed(() => props.componentTypes ?? [])
-
-const depthPadding = computed(() => {
-  const level = props.depth ?? 0
-  return level > 0 ? `ml-${Math.min(level * 4, 12)}` : ''
-})
-
-const formatModelTypeOption = (type: ModelTypeOption | undefined | null) => {
-  if (!type) {
-    return ''
-  }
-  return type.code ? `${type.name} (${type.code})` : type.name
-}
-
-const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) =>
-  formatModelTypeOption(type)
-
-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 getComponentTypeLabel = (id?: string) => {
-  if (!id) return ''
-  return formatModelTypeOption(componentTypeMap.value.get(id))
-}
-
-const syncComponentType = (component: any) => {
-  if (!component) {
-    return
-  }
-  const id = typeof component.typeComposantId === 'string'
-    ? component.typeComposantId
-    : ''
-
-  if (!id) {
-    component.typeComposantLabel = ''
-    component.name = ''
-    return
-  }
-
-  const option = componentTypeMap.value.get(id)
-  if (!option) {
-    component.typeComposantLabel = ''
-    component.name = ''
-    return
-  }
-
-  component.typeComposantLabel = formatModelTypeOption(option)
-  component.name = option.name || component.typeComposantLabel
-}
-
-const handleComponentTypeSelect = (component: any) => {
-  syncComponentType(component)
-}
-
-watch(componentTypes, () => {
-  syncComponentType(props.node)
-}, { deep: true, immediate: true })
-
-watch(
-  () => props.node.typeComposantId,
-  () => {
-    syncComponentType(props.node)
-  }
-)
-</script>
-
-<style scoped>
-</style>
diff --git a/app/composables/useCustomFields.js b/app/composables/useCustomFields.js
index 238086b..faa6d50 100644
--- a/app/composables/useCustomFields.js
+++ b/app/composables/useCustomFields.js
@@ -54,7 +54,13 @@ export function useCustomFields () {
   }
 
   // Créer ou mettre à jour une valeur de champ personnalisé
-  const upsertCustomFieldValue = async (customFieldId, entityType, entityId, value) => {
+  const upsertCustomFieldValue = async (
+    customFieldId,
+    entityType,
+    entityId,
+    value,
+    metadata = {},
+  ) => {
     try {
       const result = await apiCall('/custom-fields/values/upsert', {
         method: 'POST',
@@ -62,7 +68,8 @@ export function useCustomFields () {
           customFieldId,
           entityType,
           entityId,
-          value
+          value,
+          ...metadata
         })
       })
       return result
diff --git a/app/pages/machine/[id].vue b/app/pages/machine/[id].vue
index c8852a4..3236583 100644
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -14,10 +14,31 @@
       />
 
       <!-- Header with actions -->
-      <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <h1 class="text-3xl font-bold">
-          {{ machineViewTitle }}
-        </h1>
+      <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">
+            {{ machineViewTitle }}
+          </h1>
+          <div class="btn-group w-full max-w-xs print:hidden" data-print-hide>
+            <button
+              type="button"
+              class="btn btn-sm"
+              :class="isDetailsView ? 'btn-primary' : 'btn-outline'"
+              @click="changeMachineView('details')"
+            >
+              Vue machine
+            </button>
+            <button
+              type="button"
+              class="btn btn-sm"
+              :class="isSkeletonView ? 'btn-primary' : 'btn-outline'"
+              :disabled="!machineHasSkeletonRequirements"
+              @click="changeMachineView('skeleton')"
+            >
+              Squelette
+            </button>
+          </div>
+        </div>
         <div class="flex items-center gap-2 print:hidden" data-print-hide>
           <button
             @click="toggleEditMode"
@@ -37,16 +58,7 @@
             {{ isEditMode ? 'Voir détails' : 'Modifier' }}
           </button>
           <button
-            v-if="machineHasSkeletonRequirements"
-            type="button"
-            class="btn btn-outline"
-            :disabled="skeletonEditor.open"
-            @click="openSkeletonEditor"
-          >
-            Modifier les éléments du squelette
-          </button>
-          <button
-            v-if="!isEditMode"
+            v-if="isDetailsView && !isEditMode"
             @click="openPrintModal"
             type="button"
             class="btn btn-outline btn-secondary"
@@ -57,6 +69,7 @@
         </div>
       </div>
 
+      <template v-if="isDetailsView">
       <!-- Debug info -->
       <div v-if="debug" class="bg-yellow-100 p-4 rounded-lg">
         <p>Debug: Machine trouvée - {{ machine.name }}</p>
@@ -79,10 +92,406 @@
         </div>
       </PageHero>
 
+      <!-- Machine Info Card -->
+      <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+          <h2 class="card-title">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')"
+                v-model="machineName" 
+                type="text" 
+                class="input input-bordered"
+                @blur="updateMachineInfo"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                {{ machineName }}
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Référence</span>
+              </label>
+              <input 
+                v-if="isEditMode"
+                :id="getMachineFieldId('reference')"
+                v-model="machineReference" 
+                type="text" 
+                class="input input-bordered"
+                @blur="updateMachineInfo"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                {{ machineReference || 'Non définie' }}
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Constructeur</span>
+              </label>
+              <ConstructeurSelect
+                v-if="isEditMode"
+                class="w-full"
+                :key="machine.value?.id"
+                :model-value="machineConstructeurId"
+                placeholder="Rechercher un constructeur..."
+                @update:modelValue="handleMachineConstructeurChange"
+              />
+              <div v-else class="input input-bordered bg-base-200">
+                <div class="flex flex-col">
+                  <span class="font-medium">{{ machineConstructeurDisplay?.name || 'Non défini' }}</span>
+                  <span class="text-xs text-gray-500">
+                    {{ [machineConstructeurDisplay?.email, machineConstructeurDisplay?.phone].filter(Boolean).join(' • ') || '' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Champs personnalisés -->
+          <div v-if="machineCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
+            <h4 class="font-semibold text-gray-700 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 machineCustomFields"
+                :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="setMachineCustomFieldValue(field, $event.target.value)"
+                    @blur="updateMachineCustomField(field)"
+                  />
+                  <input
+                    v-else-if="field.type === 'number'"
+                    :value="field.value ?? ''"
+                    type="number"
+                    class="input input-bordered input-sm"
+                    :required="field.required"
+                    @input="setMachineCustomFieldValue(field, $event.target.value)"
+                    @blur="updateMachineCustomField(field)"
+                  />
+                  <select
+                    v-else-if="field.type === 'select'"
+                    :value="field.value ?? ''"
+                    class="select select-bordered select-sm"
+                    :required="field.required"
+                    @change="setMachineCustomFieldValue(field, $event.target.value)"
+                    @blur="updateMachineCustomField(field)"
+                  >
+                    <option value="">Sélectionner...</option>
+                    <option
+                      v-for="option in field.options"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+                    <input
+                      :value="field.value ?? ''"
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="String(field.value).toLowerCase() === 'true'"
+                      @change="setMachineCustomFieldValue(field, $event.target.checked ? 'true' : 'false')"
+                      @blur="updateMachineCustomField(field)"
+                    />
+                    <span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
+                  </div>
+                  <input
+                    v-else-if="field.type === 'date'"
+                    :value="field.value ?? ''"
+                    type="date"
+                    class="input input-bordered input-sm"
+                    :required="field.required"
+                    @input="setMachineCustomFieldValue(field, $event.target.value)"
+                    @blur="updateMachineCustomField(field)"
+                  />
+                  <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>
+      </div>
+
+      <!-- Documents -->
+      <div class="card bg-base-100 shadow-lg 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 && machineDocumentFiles.length" class="badge badge-outline">
+              {{ machineDocumentFiles.length }} fichier{{ machineDocumentFiles.length > 1 ? 's' : '' }} sélectionné{{ machineDocumentFiles.length > 1 ? 's' : '' }}
+            </span>
+          </div>
+
+          <DocumentUpload
+            v-if="isEditMode"
+            v-model="machineDocumentFiles"
+            title="Déposer des fichiers pour la machine"
+            subtitle="Formats acceptés : PDF, images, documents..."
+            @files-added="handleMachineFilesAdded"
+          />
+
+          <div v-if="machineDocumentsList.length" class="space-y-2">
+            <div
+              v-for="document in machineDocumentsList"
+              :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">
+                <span class="text-xl" :class="documentIcon(document).colorClass">
+                  <component
+                    :is="documentIcon(document).component"
+                    class="h-6 w-6"
+                    aria-hidden="true"
+                  />
+                </span>
+                <div>
+                  <div class="font-medium">{{ document.name }}</div>
+                  <div class="text-xs text-gray-500">
+                    {{ 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="openPreview(document)"
+                >
+                  Consulter
+                </button>
+                <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                  Télécharger
+                </button>
+                <button
+                  v-if="isEditMode"
+                  type="button"
+                  class="btn btn-error btn-xs"
+                  :disabled="machineDocumentsUploading"
+                  @click="removeMachineDocument(document.id)"
+                >
+                  Supprimer
+                </button>
+              </div>
+            </div>
+          </div>
+          <p v-else class="text-xs text-gray-500">Aucun document lié à cette machine.</p>
+        </div>
+      </div>
+
+      <!-- Requirement Summary -->
       <div
-        v-if="skeletonEditor.open"
-        class="card bg-base-100 shadow-lg border border-primary/20"
+        v-if="componentRequirementGroups.length || pieceRequirementGroups.length"
+        class="card bg-base-100 shadow-lg"
       >
+        <div class="card-body space-y-6">
+          <div>
+            <h2 class="card-title">Structure sélectionnée</h2>
+            <p class="text-sm text-gray-500">
+              Synthèse des familles définies dans le type et des modèles utilisés pour cette machine.
+            </p>
+          </div>
+
+          <div v-if="componentRequirementGroups.length" class="space-y-4">
+            <h3 class="text-sm font-semibold text-gray-700">Composants</h3>
+            <div
+              v-for="group in componentRequirementGroups"
+              :key="group.requirement.id"
+              class="rounded-lg border border-base-200 p-4"
+            >
+              <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
+                <div>
+                  <h4 class="font-medium text-sm">
+                    {{ group.requirement.label || group.requirement.typeComposant?.name || 'Famille de composants' }}
+                  </h4>
+                  <p class="text-xs text-gray-500">
+                    Type : {{ group.requirement.typeComposant?.name || 'Non défini' }} · Min {{ group.requirement.minCount ?? (group.requirement.required ? 1 : 0) }} · Max {{ group.requirement.maxCount ?? '∞' }}
+                  </p>
+                </div>
+                <span class="badge badge-outline badge-sm">{{ group.components.length }} composant(s)</span>
+              </div>
+
+              <div v-if="group.components.length" class="space-y-2">
+                <div
+                  v-for="component in group.components"
+                  :key="component.id"
+                  class="flex flex-wrap items-center gap-2 text-sm"
+                >
+                  <span class="font-medium">{{ component.name }}</span>
+                  <span v-if="component.composantModel" class="badge badge-sm badge-primary badge-outline">
+                    Modèle : {{ component.composantModel.name }}
+                  </span>
+                  <span v-else class="badge badge-sm badge-outline">Défini manuellement</span>
+                  <span v-if="component.parentComposantId" class="text-xs text-gray-500">
+                    (Sous-composant)
+                  </span>
+                  <div
+                    v-if="summarizeCustomFields(component.customFields || []).length"
+                    class="w-full flex flex-wrap gap-2 text-xs text-gray-600"
+                  >
+                    <span
+                      v-for="field in summarizeCustomFields(component.customFields || [])"
+                      :key="field.key"
+                      class="badge badge-ghost badge-sm whitespace-pre-wrap"
+                    >
+                      <span class="font-medium">{{ field.label }} :</span>
+                      <span class="ml-1">{{ field.value }}</span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p v-else class="text-xs text-gray-500">Aucun composant rattaché à ce groupe.</p>
+            </div>
+          </div>
+
+          <div v-if="pieceRequirementGroups.length" class="space-y-4">
+            <h3 class="text-sm font-semibold text-gray-700">Pièces principales</h3>
+            <div
+              v-for="group in pieceRequirementGroups"
+              :key="group.requirement.id"
+              class="rounded-lg border border-base-200 p-4"
+            >
+              <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
+                <div>
+                  <h4 class="font-medium text-sm">
+                    {{ group.requirement.label || group.requirement.typePiece?.name || 'Groupe de pièces' }}
+                  </h4>
+                  <p class="text-xs text-gray-500">
+                    Type : {{ group.requirement.typePiece?.name || 'Non défini' }} · Min {{ group.requirement.minCount ?? (group.requirement.required ? 1 : 0) }} · Max {{ group.requirement.maxCount ?? '∞' }}
+                  </p>
+                </div>
+                <span class="badge badge-outline badge-sm">{{ group.pieces.length }} pièce(s)</span>
+              </div>
+
+              <div v-if="group.pieces.length" class="space-y-2">
+                <div
+                  v-for="piece in group.pieces"
+                  :key="piece.id"
+                  class="flex flex-wrap items-center gap-2 text-sm"
+                >
+                  <span class="font-medium">{{ piece.name }}</span>
+                  <span v-if="piece.pieceModel" class="badge badge-sm badge-primary badge-outline">
+                    Modèle : {{ piece.pieceModel.name }}
+                  </span>
+                  <span v-else class="badge badge-sm badge-outline">Définie manuellement</span>
+                  <span v-if="piece.parentComponentName" class="text-xs text-gray-500">
+                    (Rattachée à {{ piece.parentComponentName }})
+                  </span>
+                  <div
+                    v-if="summarizeCustomFields(piece.customFields || []).length"
+                    class="w-full flex flex-wrap gap-2 text-xs text-gray-600"
+                  >
+                    <span
+                      v-for="field in summarizeCustomFields(piece.customFields || [])"
+                      :key="field.key"
+                      class="badge badge-ghost badge-sm whitespace-pre-wrap"
+                    >
+                      <span class="font-medium">{{ field.label }} :</span>
+                      <span class="ml-1">{{ field.value }}</span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p v-else class="text-xs text-gray-500">Aucune pièce rattachée à ce groupe.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Components Section -->
+      <div class="card bg-base-100 shadow-lg">
+        <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="toggleAllComponents"
+              :title="componentsCollapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
+            >
+              <IconLucideChevronRight
+                class="w-5 h-5 transition-transform"
+                :class="componentsCollapsed ? 'rotate-0' : 'rotate-90'"
+                aria-hidden="true"
+              />
+              <span class="text-sm">
+                {{ componentsCollapsed ? 'Tout déplier' : 'Tout replier' }}
+              </span>
+            </button>
+          </div>
+
+          <ComponentHierarchy 
+            :components="components"
+            :is-edit-mode="isEditMode"
+            :collapse-all="componentsCollapsed"
+            :toggle-token="collapseToggleToken"
+            :component-model-options-provider="getComponentModelOptions"
+            :piece-model-options-provider="getPieceModelOptions"
+            @update="updateComponent"
+            @edit-piece="updatePieceFromComponent"
+            @assign-model="assignComponentModel"
+            @assign-piece-model="assignPieceModel"
+            @custom-field-update="updatePieceCustomField"
+            @create-model-from-component="openSaveComponentModelModal"
+          />
+        </div>
+      </div>
+
+      <!-- Machine Pieces Section -->
+      <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+          <div class="flex justify-between items-center mb-4">
+            <h2 class="card-title">Pièces de la machine</h2>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <PieceItem 
+              v-for="piece in machinePieces" 
+              :key="piece.id"
+              :piece="piece"
+              :is-edit-mode="isEditMode"
+              :piece-model-options="getPieceModelOptions(piece)"
+              @update="updatePieceInfo"
+              @edit="editPiece"
+              @custom-field-update="updatePieceCustomField"
+              @assign-model="assignPieceModel"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="card bg-base-100 shadow-lg border border-primary/20">
         <div class="card-body space-y-6">
           <div class="flex flex-wrap items-start justify-between gap-3">
             <div>
@@ -97,7 +506,7 @@
               type="button"
               class="btn btn-ghost btn-sm"
               :disabled="skeletonEditor.submitting"
-              @click="closeSkeletonEditor"
+              @click="changeMachineView('details')"
             >
               Fermer
             </button>
@@ -285,8 +694,8 @@
                     :key="`${requirement.id}-piece-${entryIndex}`"
                     class="bg-base-200/60 rounded-md p-3 space-y-3"
                   >
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                    <div class="form-control">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                      <div class="form-control">
                         <label class="label">
                           <span class="label-text text-xs">Modèle de pièce</span>
                         </label>
@@ -339,7 +748,7 @@
                 type="button"
                 class="btn btn-ghost"
                 :disabled="skeletonEditor.submitting"
-                @click="closeSkeletonEditor"
+                @click="changeMachineView('details')"
               >
                 Annuler
               </button>
@@ -355,375 +764,8 @@
           </template>
         </div>
       </div>
-
-      <!-- Machine Info Card -->
-      <div class="card bg-base-100 shadow-lg">
-        <div class="card-body">
-          <h2 class="card-title">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')"
-                v-model="machineName" 
-                type="text" 
-                class="input input-bordered"
-                @blur="updateMachineInfo"
-              />
-              <div v-else class="input input-bordered bg-base-200">
-                {{ machineName }}
-              </div>
-            </div>
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Référence</span>
-              </label>
-              <input 
-                v-if="isEditMode"
-                :id="getMachineFieldId('reference')"
-                v-model="machineReference" 
-                type="text" 
-                class="input input-bordered"
-                @blur="updateMachineInfo"
-              />
-              <div v-else class="input input-bordered bg-base-200">
-                {{ machineReference || 'Non définie' }}
-              </div>
-            </div>
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Constructeur</span>
-              </label>
-              <ConstructeurSelect
-                v-if="isEditMode"
-                class="w-full"
-                :key="machine.value?.id"
-                :model-value="machineConstructeurId"
-                placeholder="Rechercher un constructeur..."
-                @update:modelValue="handleMachineConstructeurChange"
-              />
-              <div v-else class="input input-bordered bg-base-200">
-                <div class="flex flex-col">
-                  <span class="font-medium">{{ machineConstructeurDisplay?.name || 'Non défini' }}</span>
-                  <span class="text-xs text-gray-500">
-                    {{ [machineConstructeurDisplay?.email, machineConstructeurDisplay?.phone].filter(Boolean).join(' • ') || '' }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Champs personnalisés -->
-          <div v-if="machine && machine.customFieldValues && machine.customFieldValues.length > 0" class="mt-6 pt-4 border-t border-gray-200">
-            <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div 
-                v-for="fieldValue in machine.customFieldValues" 
-                :key="fieldValue.id"
-                class="form-control"
-              >
-                <label class="label">
-                  <span class="label-text text-sm">{{ fieldValue.customField.name }}</span>
-                  <span v-if="fieldValue.customField.required" class="label-text-alt text-error">*</span>
-                </label>
-
-                <template v-if="isEditMode">
-                  <input 
-                    v-if="fieldValue.customField.type === 'text'"
-                    :value="fieldValue.value"
-                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
-                    type="text"
-                    class="input input-bordered input-sm"
-                    :required="fieldValue.customField.required"
-                    @blur="updateMachineCustomField(fieldValue.id)"
-                  />
-                  <input 
-                    v-else-if="fieldValue.customField.type === 'number'"
-                    :value="fieldValue.value"
-                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
-                    type="number"
-                    class="input input-bordered input-sm"
-                    :required="fieldValue.customField.required"
-                    @blur="updateMachineCustomField(fieldValue.id)"
-                  />
-                  <select 
-                    v-else-if="fieldValue.customField.type === 'select'"
-                    :value="fieldValue.value"
-                    @change="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
-                    class="select select-bordered select-sm"
-                    :required="fieldValue.customField.required"
-                    @blur="updateMachineCustomField(fieldValue.id)"
-                  >
-                    <option value="">Sélectionner...</option>
-                    <option 
-                      v-for="option in fieldValue.customField.options" 
-                      :key="option" 
-                      :value="option"
-                    >
-                      {{ option }}
-                    </option>
-                  </select>
-                  <div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
-                    <input 
-                      :value="fieldValue.value"
-                      @change="setMachineCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
-                      type="checkbox"
-                      class="checkbox checkbox-sm"
-                      :checked="fieldValue.value === 'true'"
-                      @blur="updateMachineCustomField(fieldValue.id)"
-                    />
-                    <span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
-                  </div>
-                  <input 
-                    v-else-if="fieldValue.customField.type === 'date'"
-                    :value="fieldValue.value"
-                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
-                    type="date"
-                    class="input input-bordered input-sm"
-                    :required="fieldValue.customField.required"
-                    @blur="updateMachineCustomField(fieldValue.id)"
-                  />
-                </template>
-                <template v-else>
-                  <div class="input input-bordered input-sm bg-base-200">
-                    {{ fieldValue.value || 'Non défini' }}
-                  </div>
-                </template>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Documents -->
-      <div class="card bg-base-100 shadow-lg 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 && machineDocumentFiles.length" class="badge badge-outline">
-              {{ machineDocumentFiles.length }} fichier{{ machineDocumentFiles.length > 1 ? 's' : '' }} sélectionné{{ machineDocumentFiles.length > 1 ? 's' : '' }}
-            </span>
-          </div>
-
-          <DocumentUpload
-            v-if="isEditMode"
-            v-model="machineDocumentFiles"
-            title="Déposer des fichiers pour la machine"
-            subtitle="Formats acceptés : PDF, images, documents..."
-            @files-added="handleMachineFilesAdded"
-          />
-
-          <div v-if="machineDocumentsList.length" class="space-y-2">
-            <div
-              v-for="document in machineDocumentsList"
-              :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">
-                <span class="text-xl" :class="documentIcon(document).colorClass">
-                  <component
-                    :is="documentIcon(document).component"
-                    class="h-6 w-6"
-                    aria-hidden="true"
-                  />
-                </span>
-                <div>
-                  <div class="font-medium">{{ document.name }}</div>
-                  <div class="text-xs text-gray-500">
-                    {{ 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="openPreview(document)"
-                >
-                  Consulter
-                </button>
-                <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                  Télécharger
-                </button>
-                <button
-                  v-if="isEditMode"
-                  type="button"
-                  class="btn btn-error btn-xs"
-                  :disabled="machineDocumentsUploading"
-                  @click="removeMachineDocument(document.id)"
-                >
-                  Supprimer
-                </button>
-              </div>
-            </div>
-          </div>
-          <p v-else class="text-xs text-gray-500">Aucun document lié à cette machine.</p>
-        </div>
-      </div>
-
-      <!-- Requirement Summary -->
-      <div
-        v-if="componentRequirementGroups.length || pieceRequirementGroups.length"
-        class="card bg-base-100 shadow-lg"
-      >
-        <div class="card-body space-y-6">
-          <div>
-            <h2 class="card-title">Structure sélectionnée</h2>
-            <p class="text-sm text-gray-500">
-              Synthèse des familles définies dans le type et des modèles utilisés pour cette machine.
-            </p>
-          </div>
-
-          <div v-if="componentRequirementGroups.length" class="space-y-4">
-            <h3 class="text-sm font-semibold text-gray-700">Composants</h3>
-            <div
-              v-for="group in componentRequirementGroups"
-              :key="group.requirement.id"
-              class="rounded-lg border border-base-200 p-4"
-            >
-              <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
-                <div>
-                  <h4 class="font-medium text-sm">
-                    {{ group.requirement.label || group.requirement.typeComposant?.name || 'Famille de composants' }}
-                  </h4>
-                  <p class="text-xs text-gray-500">
-                    Type : {{ group.requirement.typeComposant?.name || 'Non défini' }} · Min {{ group.requirement.minCount ?? (group.requirement.required ? 1 : 0) }} · Max {{ group.requirement.maxCount ?? '∞' }}
-                  </p>
-                </div>
-                <span class="badge badge-outline badge-sm">{{ group.components.length }} composant(s)</span>
-              </div>
-
-              <div v-if="group.components.length" class="space-y-2">
-                <div
-                  v-for="component in group.components"
-                  :key="component.id"
-                  class="flex flex-wrap items-center gap-2 text-sm"
-                >
-                  <span class="font-medium">{{ component.name }}</span>
-                  <span v-if="component.composantModel" class="badge badge-sm badge-primary badge-outline">
-                    Modèle : {{ component.composantModel.name }}
-                  </span>
-                  <span v-else class="badge badge-sm badge-outline">Défini manuellement</span>
-                  <span v-if="component.parentComposantId" class="text-xs text-gray-500">
-                    (Sous-composant)
-                  </span>
-                </div>
-              </div>
-              <p v-else class="text-xs text-gray-500">Aucun composant rattaché à ce groupe.</p>
-            </div>
-          </div>
-
-          <div v-if="pieceRequirementGroups.length" class="space-y-4">
-            <h3 class="text-sm font-semibold text-gray-700">Pièces principales</h3>
-            <div
-              v-for="group in pieceRequirementGroups"
-              :key="group.requirement.id"
-              class="rounded-lg border border-base-200 p-4"
-            >
-              <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
-                <div>
-                  <h4 class="font-medium text-sm">
-                    {{ group.requirement.label || group.requirement.typePiece?.name || 'Groupe de pièces' }}
-                  </h4>
-                  <p class="text-xs text-gray-500">
-                    Type : {{ group.requirement.typePiece?.name || 'Non défini' }} · Min {{ group.requirement.minCount ?? (group.requirement.required ? 1 : 0) }} · Max {{ group.requirement.maxCount ?? '∞' }}
-                  </p>
-                </div>
-                <span class="badge badge-outline badge-sm">{{ group.pieces.length }} pièce(s)</span>
-              </div>
-
-              <div v-if="group.pieces.length" class="space-y-2">
-                <div
-                  v-for="piece in group.pieces"
-                  :key="piece.id"
-                  class="flex flex-wrap items-center gap-2 text-sm"
-                >
-                  <span class="font-medium">{{ piece.name }}</span>
-                  <span v-if="piece.pieceModel" class="badge badge-sm badge-primary badge-outline">
-                    Modèle : {{ piece.pieceModel.name }}
-                  </span>
-                  <span v-else class="badge badge-sm badge-outline">Définie manuellement</span>
-                  <span v-if="piece.parentComponentName" class="text-xs text-gray-500">
-                    (Rattachée à {{ piece.parentComponentName }})
-                  </span>
-                </div>
-              </div>
-              <p v-else class="text-xs text-gray-500">Aucune pièce rattachée à ce groupe.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Components Section -->
-      <div class="card bg-base-100 shadow-lg">
-        <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="toggleAllComponents"
-              :title="componentsCollapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
-            >
-              <IconLucideChevronRight
-                class="w-5 h-5 transition-transform"
-                :class="componentsCollapsed ? 'rotate-0' : 'rotate-90'"
-                aria-hidden="true"
-              />
-              <span class="text-sm">
-                {{ componentsCollapsed ? 'Tout déplier' : 'Tout replier' }}
-              </span>
-            </button>
-          </div>
-
-          <ComponentHierarchy 
-            :components="components"
-            :is-edit-mode="isEditMode"
-            :collapse-all="componentsCollapsed"
-            :toggle-token="collapseToggleToken"
-            :component-model-options-provider="getComponentModelOptions"
-            :piece-model-options-provider="getPieceModelOptions"
-            @update="updateComponent"
-            @edit-piece="updatePieceFromComponent"
-            @assign-model="assignComponentModel"
-            @assign-piece-model="assignPieceModel"
-            @custom-field-update="updatePieceCustomField"
-            @create-model-from-component="openSaveComponentModelModal"
-          />
-        </div>
-      </div>
-
-      <!-- Machine Pieces Section -->
-      <div class="card bg-base-100 shadow-lg">
-        <div class="card-body">
-          <div class="flex justify-between items-center mb-4">
-            <h2 class="card-title">Pièces de la machine</h2>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <PieceItem 
-              v-for="piece in machinePieces" 
-              :key="piece.id"
-              :piece="piece"
-              :is-edit-mode="isEditMode"
-              :piece-model-options="getPieceModelOptions(piece)"
-              @update="updatePieceInfo"
-              @edit="editPiece"
-              @custom-field-update="updatePieceCustomField"
-              @assign-model="assignPieceModel"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
+    </template>
+  </div>
 
     <!-- Error State -->
     <div v-else class="text-center py-12">
@@ -844,12 +886,14 @@ import IconLucidePrinter from '~icons/lucide/printer'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideX from '~icons/lucide/x'
 import ModelStructureViewer from '~/components/ModelStructureViewer.vue'
+import SkeletonComponentNodeSelector from '~/components/SkeletonComponentNodeSelector.vue'
 import { useComponentModels } from '~/composables/useComponentModels'
 import { usePieceModels } from '~/composables/usePieceModels'
 import {
   defaultStructure,
   extractStructureFromComponent,
   formatStructurePreview,
+  cloneStructure,
 } from '~/shared/modelUtils'
 
 const route = useRoute()
@@ -874,7 +918,7 @@ const {
   updatePiece: updatePieceApi 
 } = usePieces()
 
-const { upsertCustomFieldValue } = useCustomFields()
+const { upsertCustomFieldValue, updateCustomFieldValue: updateCustomFieldValueApi } = useCustomFields()
 const { 
   uploadDocuments,
   deleteDocument,
@@ -917,6 +961,7 @@ const machineConstructeurDisplay = computed(() => {
 const machineDocumentFiles = ref([])
 const machineDocumentsUploading = ref(false)
 const machineDocumentsLoaded = ref(false)
+const machineCustomFields = ref([])
 const previewDocument = ref(null)
 const previewVisible = ref(false)
 const printModalOpen = ref(false)
@@ -930,6 +975,10 @@ const printSelection = reactive({
   pieces: {},
 })
 
+const activeMachineView = ref('details')
+const isDetailsView = computed(() => activeMachineView.value === 'details')
+const isSkeletonView = computed(() => activeMachineView.value === 'skeleton')
+
 const saveComponentAsModelModal = reactive({
   open: false,
   submitting: false,
@@ -963,6 +1012,220 @@ const machineHasSkeletonRequirements = computed(() =>
   componentRequirements.value.length > 0 || pieceRequirements.value.length > 0
 )
 
+const componentTypeLabelMap = computed(() => {
+  const map = new Map()
+  componentRequirements.value.forEach((requirement) => {
+    const type = requirement.typeComposant
+    if (type?.id) {
+      map.set(type.id, type.name || '')
+    }
+  })
+  return map
+})
+
+const pieceTypeLabelMap = computed(() => {
+  const map = new Map()
+  pieceRequirements.value.forEach((requirement) => {
+    const type = requirement.typePiece
+    if (type?.id) {
+      map.set(type.id, type.name || '')
+    }
+  })
+  return map
+})
+
+const getComponentRequirementById = (id) =>
+  componentRequirements.value.find((requirement) => requirement.id === id) || null
+
+const getPieceRequirementById = (id) =>
+  pieceRequirements.value.find((requirement) => requirement.id === id) || null
+
+const getComponentTypeLabel = (typeId) => {
+  if (!typeId) return ''
+  return componentTypeLabelMap.value.get(typeId) || ''
+}
+
+const getPieceTypeLabel = (typeId) => {
+  if (!typeId) return ''
+  return pieceTypeLabelMap.value.get(typeId) || ''
+}
+
+const normalizePieceNode = (source, context = {}) => {
+  const name = source?.name || context.name || source?.typePieceLabel || source?.typePiece?.name || ''
+  const typePieceId = source?.typePieceId
+    || source?.typePiece?.id
+    || context.typePieceId
+    || ''
+  const typePieceLabel = source?.typePieceLabel
+    || source?.typePiece?.name
+    || context.typePieceLabel
+    || ''
+
+  return {
+    name,
+    typePieceId,
+    typePieceLabel,
+    __pieceModelId: source?.__pieceModelId
+      ?? source?.pieceModelId
+      ?? source?.pieceModel?.id
+      ?? context.pieceModelId
+      ?? null,
+    customFields: Array.isArray(source?.customFields)
+      ? cloneStructure(source.customFields)
+      : [],
+  }
+}
+
+const normalizeComponentNode = (source, context = {}) => {
+  const typeComposantId = source?.typeComposantId
+    || source?.typeComposant?.id
+    || context.typeComposantId
+    || ''
+
+  const node = {
+    name: source?.name || context.name || '' ,
+    description: source?.description || context.description || '',
+    typeComposantId,
+    typeComposantLabel: source?.typeComposantLabel
+      || source?.typeComposant?.name
+      || context.typeComposantLabel
+      || getComponentTypeLabel(typeComposantId),
+    __componentModelId: source?.__componentModelId
+      ?? source?.componentModelId
+      ?? source?.composantModelId
+      ?? source?.composantModel?.id
+      ?? context.componentModelId
+      ?? null,
+    __requirementId: source?.__requirementId ?? context.requirementId ?? null,
+    customFields: Array.isArray(source?.customFields)
+      ? cloneStructure(source.customFields)
+      : [],
+    pieces: Array.isArray(source?.pieces)
+      ? source.pieces.map((piece: any) => normalizePieceNode(piece))
+      : [],
+    subComponents: Array.isArray(source?.subComponents || source?.sousComposants)
+      ? (source.subComponents || source.sousComposants).map((sub: any) => normalizeComponentNode(sub, {
+          name: sub?.name || '',
+          description: sub?.description || '',
+          typeComposantId: sub?.typeComposantId || sub?.typeComposant?.id || '',
+          typeComposantLabel: sub?.typeComposantLabel || sub?.typeComposant?.name || '',
+          componentModelId: sub?.__componentModelId
+            ?? sub?.componentModelId
+            ?? sub?.composantModelId
+            ?? sub?.composantModel?.id
+            ?? null,
+        }))
+      : [],
+  }
+
+  if (!node.name) {
+    node.name = node.typeComposantLabel || 'Composant'
+  }
+
+  return node
+}
+
+const createEmptyComponentDefinition = (requirement) => {
+  return normalizeComponentNode(
+    {
+      name: requirement?.typeComposant?.name || 'Composant',
+      typeComposantId: requirement?.typeComposantId || '',
+    },
+    {
+      requirementId: requirement?.id || null,
+    },
+  )
+}
+
+const createDefinitionFromModel = (model, requirement) => {
+  const structure = cloneStructure(model?.structure || defaultStructure())
+  if (!structure.name) {
+    structure.name = model?.name || requirement?.typeComposant?.name || 'Composant'
+  }
+  if (!structure.typeComposantId) {
+    structure.typeComposantId = model?.typeComposantId || requirement?.typeComposantId || ''
+  }
+  const definition = normalizeComponentNode(structure, {
+    requirementId: requirement?.id || null,
+    componentModelId: model?.id || null,
+  })
+  definition.__componentModelId = model?.id || null
+  return definition
+}
+
+const buildDefinitionFromComponent = (component, requirement) => {
+  const definition = normalizeComponentNode(component, {
+    requirementId: requirement?.id || null,
+    componentModelId: component?.composantModelId
+      || component?.composantModel?.id
+      || null,
+    typeComposantId: requirement?.typeComposantId
+      || component?.typeComposantId
+      || component?.typeComposant?.id
+      || '',
+    typeComposantLabel: requirement?.typeComposant?.name
+      || component?.typeComposant?.name
+      || '',
+  })
+  return definition
+}
+
+const applyDefinitionToNode = (target, definition) => {
+  target.name = definition.name
+  target.description = definition.description
+  target.typeComposantId = definition.typeComposantId
+  target.typeComposantLabel = definition.typeComposantLabel
+  target.__componentModelId = definition.__componentModelId ?? null
+  target.__requirementId = definition.__requirementId ?? null
+  target.customFields = Array.isArray(definition.customFields)
+    ? cloneStructure(definition.customFields)
+    : []
+  target.pieces = Array.isArray(definition.pieces)
+    ? definition.pieces.map((piece: any) => normalizePieceNode(piece))
+    : []
+  target.subComponents = Array.isArray(definition.subComponents)
+    ? definition.subComponents.map((sub: any) => normalizeComponentNode(sub))
+    : []
+}
+
+const handleNodeComponentModelChange = async (node, typeComposantId, modelId) => {
+  const requirement = node.__requirementId
+    ? getComponentRequirementById(node.__requirementId)
+    : null
+
+  const previousModelId = node.__componentModelId || null
+  if (previousModelId === modelId) {
+    return
+  }
+
+  if (typeComposantId) {
+    await loadComponentModels(typeComposantId)
+  }
+
+  const models = typeComposantId ? getComponentModelsForType(typeComposantId) : []
+  const selectedModel = models.find((model) => model.id === modelId)
+
+  if (selectedModel) {
+    const definition = createDefinitionFromModel(selectedModel, requirement)
+    if (!definition.name && node.name) {
+      definition.name = node.name
+    }
+    applyDefinitionToNode(node, definition)
+    node.__componentModelId = selectedModel.id
+  } else {
+    node.__componentModelId = null
+    node.pieces = []
+    node.subComponents = []
+  }
+}
+
+const handleNodePieceModelChange = async (pieceNode, typePieceId, modelId) => {
+  if (typePieceId) {
+    await loadPieceModels(typePieceId)
+  }
+  pieceNode.__pieceModelId = modelId || null
+}
+
 const getComponentRequirementEntries = (requirementId) => {
   return componentRequirementSelections[requirementId] || []
 }
@@ -971,10 +1234,11 @@ const getPieceRequirementEntries = (requirementId) => {
   return pieceRequirementSelections[requirementId] || []
 }
 
-const createComponentSelectionEntry = () => ({
+const createComponentSelectionEntry = (requirement) => ({
   mode: 'model',
   componentModelId: '',
-  name: '',
+  name: requirement?.typeComposant?.name || '',
+  definition: createEmptyComponentDefinition(requirement),
 })
 
 const createPieceSelectionEntry = () => ({
@@ -999,7 +1263,10 @@ const addComponentSelectionEntry = (requirement) => {
     )
     return
   }
-  componentRequirementSelections[requirement.id] = [...entries, createComponentSelectionEntry()]
+  componentRequirementSelections[requirement.id] = [
+    ...entries,
+    createComponentSelectionEntry(requirement),
+  ]
 }
 
 const removeComponentSelectionEntry = (requirementId, index) => {
@@ -1009,20 +1276,51 @@ const removeComponentSelectionEntry = (requirementId, index) => {
 
 const setComponentSelectionMode = (requirementId, index, mode) => {
   const entries = getComponentRequirementEntries(requirementId)
+  const requirement = getComponentRequirementById(requirementId)
   componentRequirementSelections[requirementId] = entries.map((entry, i) => {
     if (i !== index) return entry
     if (mode === 'model') {
-      return { ...entry, mode: 'model', componentModelId: entry.componentModelId || '', name: '' }
+      return {
+        ...entry,
+        mode: 'model',
+        componentModelId: entry.componentModelId || '',
+        definition: entry.definition || createEmptyComponentDefinition(requirement),
+      }
+    }
+    return {
+      ...entry,
+      mode: 'manual',
+      componentModelId: '',
+      definition: entry.definition || createEmptyComponentDefinition(requirement),
     }
-    return { ...entry, mode: 'manual', componentModelId: '', name: entry.name || '' }
   })
 }
 
 const updateComponentSelectionEntry = (requirementId, index, patch) => {
   const entries = getComponentRequirementEntries(requirementId)
-  componentRequirementSelections[requirementId] = entries.map((entry, i) =>
-    i === index ? { ...entry, ...patch } : entry
-  )
+  const requirement = getComponentRequirementById(requirementId)
+  componentRequirementSelections[requirementId] = entries.map((entry, i) => {
+    if (i !== index) {
+      return entry
+    }
+
+    const updated = { ...entry, ...patch }
+
+    if (Object.prototype.hasOwnProperty.call(patch, 'componentModelId')) {
+      const newModelId = patch.componentModelId || ''
+      const typeId = requirement?.typeComposantId || ''
+      const models = typeId ? getComponentModelsForType(typeId) : []
+      const selectedModel = models.find((model) => model.id === newModelId)
+
+      if (selectedModel) {
+        updated.definition = createDefinitionFromModel(selectedModel, requirement)
+      } else {
+        updated.definition = createEmptyComponentDefinition(requirement)
+      }
+    }
+
+    return updated
+  })
 }
 
 const addPieceSelectionEntry = (requirement) => {
@@ -1144,6 +1442,9 @@ const openSkeletonEditor = async () => {
 }
 
 const closeSkeletonEditor = () => {
+  if (!skeletonEditor.open) {
+    return
+  }
   if (skeletonEditor.submitting) {
     return
   }
@@ -1153,6 +1454,35 @@ const closeSkeletonEditor = () => {
   resetSkeletonRequirementSelections()
 }
 
+const changeMachineView = async (view) => {
+  if (view === activeMachineView.value) {
+    return
+  }
+
+  if (view === 'skeleton') {
+    if (!machineHasSkeletonRequirements.value) {
+      toast.showInfo('Aucun squelette configuré pour cette machine.')
+      return
+    }
+
+    activeMachineView.value = 'skeleton'
+
+    if (!skeletonEditor.open) {
+      try {
+        await openSkeletonEditor()
+      } catch (error) {
+        console.error('Impossible d\'ouvrir l\'éditeur de squelette:', error)
+        toast.showError('Impossible de charger les éléments du squelette.')
+        activeMachineView.value = 'details'
+      }
+    }
+    return
+  }
+
+  closeSkeletonEditor()
+  activeMachineView.value = 'details'
+}
+
 const validateSkeletonSelections = (type) => {
   const errors = []
   const componentSelectionsPayload = []
@@ -1296,8 +1626,7 @@ const saveSkeletonConfiguration = async () => {
     const result = await reconfigureMachineSkeleton(machine.value.id, payload)
     if (result.success) {
       await applySkeletonReconfigurationResult(result.data)
-      skeletonEditor.open = false
-      resetSkeletonRequirementSelections()
+      await changeMachineView('details')
     } else if (result.error) {
       toast.showError(result.error)
     }
@@ -1353,9 +1682,12 @@ const closeSaveComponentModelModal = () => {
 const isEditMode = ref(false)
 const debug = ref(false) // Ajout de debug pour afficher les infos de debug
 
-const machineViewTitle = computed(() =>
-  isEditMode.value ? 'Modification de la machine' : 'Détails de la machine'
-)
+const machineViewTitle = computed(() => {
+  if (isSkeletonView.value) {
+    return 'Squelette de la machine'
+  }
+  return isEditMode.value ? 'Modification de la machine' : 'Détails de la machine'
+})
 
 const skeletonEditorTitle = computed(() =>
   skeletonEditor.open
@@ -1755,70 +2087,273 @@ const formatSize = (size) => {
   return `${formatted.toFixed(1)} ${units[index]}`
 }
 
+const formatCustomFieldValue = (field) => {
+  if (!field) {
+    return 'Non défini'
+  }
+
+  const value = field.value ?? ''
+  if (!value && value !== 0) {
+    return 'Non défini'
+  }
+
+  if (field.type === 'boolean') {
+    const normalized = String(value).toLowerCase()
+    if (normalized === 'true') return 'Oui'
+    if (normalized === 'false') return 'Non'
+  }
+
+  return value
+}
+
+const shouldDisplayCustomField = (field) => {
+  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
+}
+
+const summarizeCustomFields = (fields = []) => {
+  const seen = new Set()
+  return fields
+    .filter(shouldDisplayCustomField)
+    .filter((field) => {
+      const key = field.customFieldId || field.id || field.name
+      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 || `custom-field-${index}`,
+      label: field.name || 'Champ',
+      value: formatCustomFieldValue(field),
+    }))
+}
+
+const getStructureCustomFields = (structure) => {
+  if (!structure || typeof structure !== 'object') {
+    return []
+  }
+  const customFields = structure.customFields
+  return Array.isArray(customFields) ? customFields : []
+}
+
 // Transform custom field values to custom fields format
+const mergeCustomFieldValuesWithDefinitions = (valueEntries = [], ...definitionSources) => {
+  const normalizedValues = (Array.isArray(valueEntries) ? valueEntries : []).map((entry) => {
+    const id = entry?.customField?.id ?? entry?.customFieldId ?? null
+    const name = entry?.customField?.name ?? ''
+    const type = entry?.customField?.type ?? 'text'
+    const required = !!entry?.customField?.required
+    const options = Array.isArray(entry?.customField?.options) ? entry.customField.options : []
+
+    return {
+      customFieldValueId: entry?.id ?? null,
+      id,
+      customFieldId: id,
+      name,
+      type,
+      required,
+      options,
+      value: entry?.value ?? '',
+      readOnly: false,
+    }
+  })
+
+  const result = [...normalizedValues]
+  const keyFor = (item) => item?.id ?? `${item?.name ?? ''}::${item?.type ?? ''}`
+  const existingMap = new Map()
+  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 : []))
+    .filter(Boolean)
+
+  definitions.forEach((definition) => {
+    const normalizedDefinition = {
+      id: definition?.id ?? definition?.customFieldId ?? null,
+      name: definition?.name ?? '',
+      type: definition?.type ?? 'text',
+      required: !!definition?.required,
+      options: Array.isArray(definition?.options) ? definition.options : [],
+      customFieldId: definition?.id ?? definition?.customFieldId ?? null,
+      readOnly: !!definition?.readOnly,
+    }
+    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 && 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 ?? normalizedDefinition.required
+      if (!existing.options?.length) {
+        existing.options = normalizedDefinition.options
+      }
+      existing.customFieldId = existing.customFieldId || normalizedDefinition.id
+      existing.readOnly = existing.readOnly && normalizedDefinition.readOnly
+      if (normalizedDefinition.id) {
+        existingMap.set(normalizedDefinition.id, existing)
+      }
+      if (normalizedDefinition.name) {
+        existingMap.set(`${normalizedDefinition.name}::${normalizedDefinition.type}`, existing)
+      }
+      return
+    }
+
+    const entry = {
+      customFieldValueId: null,
+      id: normalizedDefinition.id,
+      customFieldId: normalizedDefinition.id,
+      name: normalizedDefinition.name,
+      type: normalizedDefinition.type,
+      required: normalizedDefinition.required,
+      options: normalizedDefinition.options,
+      value: '',
+      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
+}
+
 const transformCustomFields = (pieces) => {
-  return pieces.map(piece => {
-    const customFields = piece.customFieldValues?.map(cfv => ({
-      id: cfv.customField.id,
-      name: cfv.customField.name,
-      type: cfv.customField.type,
-      required: cfv.customField.required,
-      options: cfv.customField.options || [],
-      value: cfv.value
-    })) || []
-    
+  return (pieces || []).map((piece) => {
+    const customFields = mergeCustomFieldValuesWithDefinitions(
+      piece.customFieldValues,
+      piece.customFields,
+      piece.typePiece?.customFields,
+      piece.pieceModel?.customFields,
+      getStructureCustomFields(piece.pieceModel?.structure),
+      piece.typeMachinePieceRequirement?.customFields,
+    )
+
     return {
       ...piece,
       customFields,
       documents: piece.documents || [],
       constructeur: piece.constructeur || null,
       constructeurId: piece.constructeurId || piece.constructeur?.id || null,
+      typePieceId: piece.typePieceId
+        || piece.typeMachinePieceRequirement?.typePieceId
+        || piece.typePiece?.id
+        || null,
     }
   })
 }
 
 // Transform custom fields for components (now handles nested structure)
 const transformComponentCustomFields = (componentsData) => {
-  console.log('transformComponentCustomFields called with:', componentsData)
+  return (componentsData || []).map((component) => {
+    const customFields = mergeCustomFieldValuesWithDefinitions(
+      component.customFieldValues,
+      component.customFields,
+      component.typeComposant?.customFields,
+      component.composantModel?.customFields,
+      getStructureCustomFields(component.composantModel?.structure),
+      component.typeMachineComponentRequirement?.customFields,
+    )
 
-  return componentsData.map(component => {
-    console.log('Processing component:', component.name, 'with sousComposants:', component.sousComposants?.length || 0)
-    
-    // Transform custom fields for the current component
-    const customFields = component.customFieldValues?.map(cfv => ({
-      id: cfv.customField.id,
-      name: cfv.customField.name,
-      type: cfv.customField.type,
-      required: cfv.customField.required,
-      options: cfv.customField.options || [],
-      value: cfv.value
-    })) || [];
-    
-    // Transform pieces for the current component
     const pieces = component.pieces
       ? transformCustomFields(component.pieces).map((piece) => ({
           ...piece,
           parentComponentName: component.name,
         }))
-      : [];
-    
-    // Recursively transform sub-components (using 'sousComposants' from backend)
-    const subComponents = component.sousComposants ? transformComponentCustomFields(component.sousComposants) : [];
-    
-    const result = {
+      : []
+
+    const subComponents = component.sousComposants
+      ? transformComponentCustomFields(component.sousComposants)
+      : []
+
+    return {
       ...component,
-      customFields, // Use customFields for frontend display
+      customFields,
       pieces,
-      subComponents, // Use the transformed sousComposants as subComponents
+      subComponents,
       documents: component.documents || [],
       constructeur: component.constructeur || null,
       constructeurId: component.constructeurId || component.constructeur?.id || null,
-    };
-    
-    console.log('Transformed component:', result.name, 'with subComponents:', result.subComponents?.length || 0)
-    return result;
-  });
-};
+      typeComposantId: component.typeComposantId
+        || component.typeMachineComponentRequirement?.typeComposantId
+        || component.typeComposant?.id
+        || null,
+    }
+  })
+}
+
+const syncMachineCustomFields = () => {
+  if (!machine.value) {
+    machineCustomFields.value = []
+    return
+  }
+
+  const merged = mergeCustomFieldValuesWithDefinitions(
+    machine.value.customFieldValues,
+    machine.value.customFields,
+    machine.value.typeMachine?.customFields,
+  ).map((field) => ({
+    ...field,
+    readOnly: false,
+  }))
+
+  machineCustomFields.value = merged
+}
 
 function mergePieceLists(existing = [], updates = []) {
   if (!existing.length) {
@@ -1902,9 +2437,11 @@ const loadMachineData = async () => {
     if (machineResult.success) {
       machine.value = machineResult.data
       machine.value.documents = machine.value.documents || []
+      machine.value.customFieldValues = machine.value.customFieldValues || []
       machineDocumentsLoaded.value = !!(machine.value.documents?.length)
       console.log('Machine trouvée et assignée:', machine.value)
 
+      syncMachineCustomFields()
       await preloadModelsForTypeMachine(machine.value.typeMachine)
     } else {
       console.error('Machine non trouvée:', machineId)
@@ -2067,12 +2604,14 @@ const assignComponentModel = async ({ componentId, composantModelId, previousMod
       const target = findComponentById(components.value, componentId)
       if (target) {
         Object.assign(target, transformed)
+        components.value = [...components.value]
       }
     } else {
       const target = findComponentById(components.value, componentId)
       if (target) {
         target.composantModelId = previousModelId || null
         target.composantModel = previousModel || null
+        components.value = [...components.value]
       }
       toast.showError(result.error || 'Impossible de mettre à jour le modèle du composant')
     }
@@ -2082,6 +2621,7 @@ const assignComponentModel = async ({ componentId, composantModelId, previousMod
     if (target) {
       target.composantModelId = previousModelId || null
       target.composantModel = previousModel || null
+      components.value = [...components.value]
     }
     toast.showError('Impossible de mettre à jour le modèle du composant')
   }
@@ -2149,12 +2689,16 @@ const assignPieceModel = async ({ pieceId, pieceModelId, previousModelId, previo
       const target = findPieceById(pieceId)
       if (target) {
         Object.assign(target, transformed)
+        pieces.value = [...pieces.value]
+        components.value = [...components.value]
       }
     } else {
       const target = findPieceById(pieceId)
       if (target) {
         target.pieceModelId = previousModelId || null
         target.pieceModel = previousModel || null
+        pieces.value = [...pieces.value]
+        components.value = [...components.value]
       }
       toast.showError(result.error || 'Impossible de mettre à jour le modèle de pièce')
     }
@@ -2164,31 +2708,86 @@ const assignPieceModel = async ({ pieceId, pieceModelId, previousModelId, previo
     if (target) {
       target.pieceModelId = previousModelId || null
       target.pieceModel = previousModel || null
+      pieces.value = [...pieces.value]
+      components.value = [...components.value]
     }
     toast.showError('Impossible de mettre à jour le modèle de pièce')
   }
 }
 
 // Méthodes pour les champs personnalisés de la machine
-const setMachineCustomFieldValue = (fieldValueId, value) => {
-  const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
-  if (fieldValue) {
-    fieldValue.value = value
+const setMachineCustomFieldValue = (field, value) => {
+  if (!field) {
+    return
+  }
+
+  field.value = value
+
+  if (field.customFieldValueId && machine.value?.customFieldValues) {
+    const stored = machine.value.customFieldValues.find((fv) => fv.id === field.customFieldValueId)
+    if (stored) {
+      stored.value = value
+    }
   }
 }
 
-const updateMachineCustomField = async (fieldValueId) => {
-  const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
-  if (fieldValue) {
-    const { updateCustomFieldValue } = useCustomFields()
-    const { showSuccess, showError } = useToast()
-    
-    const result = await updateCustomFieldValue(fieldValueId, { value: fieldValue.value })
-    if (result.success) {
-      showSuccess(`Champ "${fieldValue.customField.name}" de la machine mis à jour avec succès`)
-    } else {
-      showError(`Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`)
+const updateMachineCustomField = async (field) => {
+  if (!machine.value || !field) {
+    return
+  }
+
+  const { id: customFieldId, customFieldValueId } = field
+  const fieldLabel = field.name || 'Champ personnalisé'
+
+  try {
+    if (customFieldValueId) {
+      const result = await updateCustomFieldValueApi(customFieldValueId, { value: field.value ?? '' })
+      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 = await upsertCustomFieldValue(customFieldId, 'machine', machine.value.id, field.value ?? '')
+    if (result.success) {
+      const createdValue = result.data
+      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.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}"`)
   }
 }
 
@@ -2231,6 +2830,30 @@ const toggleEditMode = () => {
   }
 }
 
+watch(
+  () => machine.value?.customFieldValues,
+  () => {
+    syncMachineCustomFields()
+  },
+  { deep: true }
+)
+
+watch(
+  () => machine.value?.customFields,
+  () => {
+    syncMachineCustomFields()
+  },
+  { deep: true }
+)
+
+watch(
+  () => machine.value?.typeMachine?.customFields,
+  () => {
+    syncMachineCustomFields()
+  },
+  { deep: true }
+)
+
 watch(
   () => [components.value.length, machinePieces.value.length],
   () => {