refactor(machine): decompose create page into composable + 5 components (F1.2)

Extract useMachineCreatePage composable and 5 preview/selector components
from machines/new.vue, reducing it from 1231 to 196 LOC.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/machine/create/RequirementComponentSelector.vue

@@ -0,0 +1,126 @@
+<template>
+  <div v-if="requirements?.length" class="space-y-4">
+    <h4 class="text-sm font-semibold">
+      Sélection des composants
+    </h4>
+
+    <div
+      v-for="requirement in requirements"
+      :id="`component-group-${requirement.id}`"
+      :key="requirement.id"
+      class="border border-base-200 rounded-lg p-4 space-y-3"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h5 class="font-medium text-sm">
+            {{ requirement.label || requirement.typeComposant?.name || 'Famille de composants' }}
+          </h5>
+          <p class="text-xs text-gray-500">
+            Type : {{ requirement.typeComposant?.name || 'Non défini' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
+            · Max : {{ requirement.maxCount ?? '∞' }}
+          </p>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm btn-outline"
+          :disabled="requirement.maxCount !== null && getEntries(requirement.id).length >= requirement.maxCount"
+          @click="$emit('add-entry', requirement)"
+        >
+          <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+          Ajouter
+        </button>
+      </div>
+
+      <div v-if="getEntries(requirement.id).length === 0" class="text-xs text-gray-500">
+        Aucun composant sélectionné pour ce groupe.
+      </div>
+
+      <div
+        v-for="(entry, entryIndex) in getEntries(requirement.id)"
+        :key="`${requirement.id}-${entryIndex}`"
+        class="bg-base-200/60 rounded-md p-3 space-y-4"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+          <span>
+            Type appliqué :
+            {{ resolveTypeLabel(requirement, entry) }}
+          </span>
+          <button
+            type="button"
+            class="btn btn-square btn-xs btn-error"
+            @click="$emit('remove-entry', requirement.id, entryIndex)"
+          >
+            <IconLucideX class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div class="grid grid-cols-1 gap-3">
+          <div class="space-y-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs">Composant existant</span>
+              </label>
+              <SearchSelect
+                :model-value="entry.composantId || ''"
+                :options="getOptions(requirement, entry)"
+                :loading="loading"
+                size="sm"
+                placeholder="Rechercher un composant…"
+                empty-text="Aucun composant disponible"
+                :option-label="optionLabel"
+                :option-description="optionDescription"
+                @update:modelValue="$emit('set-component', requirement, entryIndex, $event || '')"
+              />
+            </div>
+            <p
+              v-if="getOptions(requirement, entry).length === 0"
+              class="text-xs text-error"
+            >
+              Aucun composant disponible pour cette famille.
+            </p>
+          </div>
+
+          <div
+            v-if="entry.composantId"
+            class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
+          >
+            <div class="font-medium">
+              {{ findById(entry.composantId)?.name || "Composant" }}
+            </div>
+            <div>
+              Référence : {{ findById(entry.composantId)?.reference || "—" }}
+            </div>
+            <div>
+              Fournisseur :
+              {{ findById(entry.composantId)?.constructeur?.name || findById(entry.composantId)?.constructeurName || "—" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideX from '~icons/lucide/x'
+
+defineProps<{
+  requirements: any[]
+  loading: boolean
+  getEntries: (requirementId: string) => any[]
+  getOptions: (requirement: any, entry: any) => any[]
+  resolveTypeLabel: (requirement: any, entry: any) => string
+  findById: (id: string) => any
+  optionLabel: (item: any) => string
+  optionDescription: (item: any) => string
+}>()
+
+defineEmits<{
+  'add-entry': [requirement: any]
+  'remove-entry': [requirementId: string, entryIndex: number]
+  'set-component': [requirement: any, entryIndex: number, componentId: string]
+}>()
+</script>