feat(models): align component model editing with type selection~

app/pages/component-catalog.vue

@@ -180,7 +180,12 @@
             <div class="divider my-0">
               Structure
             </div>
-            <ComponentModelStructureEditor v-model="form.data.structure" />
+            <ComponentModelStructureEditor
+              v-model="form.data.structure"
+              :root-type-id="form.data.typeComposantId"
+              :root-type-label="selectedComponentTypeLabel"
+              :lock-root-type="!!form.data.typeComposantId"
+            />
             <div class="rounded-lg border border-base-200 bg-base-200/60 p-3 text-xs text-gray-500">
               Aperçu : {{ formatStructurePreview(form.data.structure) }}
             </div>
@@ -292,6 +297,21 @@ const filteredModels = computed(() => {
   })
 })
 
+const selectedComponentType = computed(() => {
+  if (!form.data.typeComposantId) {
+    return null
+  }
+  return componentTypes.value.find((type) => type.id === form.data.typeComposantId) || null
+})
+
+const selectedComponentTypeLabel = computed(() => {
+  const type = selectedComponentType.value
+  if (!type) {
+    return ''
+  }
+  return type.code ? `${type.name} (${type.code})` : type.name
+})
+
 const refreshModels = async () => {
   if (selectedType.value === 'all') {
     await loadComponentModels()