Move category editor to full pages and simplify root skeleton

app/components/StructureNodeEditor.vue

@@ -5,10 +5,15 @@
         <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' }}
+              {{ isRoot ? 'Composant racine de la catégorie' : 'Famille de composant' }}
             </span>
           </label>
-          <template v-if="!lockType">
+          <template v-if="isRoot">
+            <p class="text-[11px] text-gray-500">
+              Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
+            </p>
+          </template>
+          <template v-else-if="!lockType">
             <select
               v-model="node.typeComposantId"
               class="select select-bordered select-sm w-full"
@@ -312,6 +317,15 @@ const syncComponentType = (component: EditableStructureNode) => {
   if (!component) {
     return
   }
+  if (props.isRoot) {
+    component.typeComposantId = ''
+    component.typeComposantLabel = ''
+    component.familyCode = ''
+    if (component.alias) {
+      component.alias = ''
+    }
+    return
+  }
   if (props.lockType && props.isRoot) {
     if (props.lockedTypeLabel) {
       component.typeComposantLabel = props.lockedTypeLabel