# F-133 — Custom weight inline en el mismo desplegable ## Diagnóstico En `/admin/products/:id` y `/admin/products/new`, el campo "Peso unitario (Gr)" usa un `` separado **debajo** del select (`mt-2`). Esto rompe el grid de 4 columnas donde está el campo, descuadrando la fila y haciendo que los demás campos se muevan. Reproducción: 1. Abrir `/admin/products/new` 2. Scroll a "Peso unitario (Gr)" 3. Click en el desplegable → elegir "Personalizado…" 4. Aparece un input adicional debajo → el grid se descuadra, los inputs vecinos cambian de posición ## Diseño Reemplazar ` condicional` por un único control: `` con `` asociado. Este patrón es el "combo box" nativo de HTML: - El input muestra un campo numérico editable - El navegador muestra un desplegable con sugerencias (los presets) cuando el usuario hace click - Acepta cualquier valor (incluidos los custom) - Es **un único elemento visual** — no rompe el grid ```tsx {WEIGHT_PRESETS_GR.map(g => ``` ## Cambios `apps/admin/src/features/products/components/sections/PriceStockSection.tsx`: - Eliminado: `` condicional que aparecía cuando se elegía "Personalizado…" - Eliminado: `weightIsCustom`, `weightPresetValue`, `onWeightPresetChange` (helpers ya no necesarios) - Añadido: `` + `` con presets `customWeightGr` se mantiene como estado (legacy) pero ya no se usa para renderizar — solo el setter queda como `setCustomWeightGr` para mantener compatibilidad con handlers que aún lo invocan. ## Compatibilidad - El estado interno (`unitWeightGr`) sigue siendo el mismo string en gramos. - El handler `saveProductMeta` sigue convirtiendo `gr → kg` antes de llamar al API. - La persistencia backend no se ve afectada. - Si un producto tenía `unitWeightKg = 0.74` (es decir, 740g), al cargar, `setUnitWeightGr('740')` y el campo se muestra como 740 — el usuario puede editarlo a otro valor. ## Plan 1. Editar `PriceStockSection.tsx` — reemplazar select + input por input + datalist. 2. `cd apps/admin && npx tsc --noEmit`. 3. `cd apps/admin && npm run build`. 4. Cerrar gates.