web-player: P11 — formularios (CoverForm, SegmentedControl, Chip)

CoverForm.svelte es el esqueleto compartido (form + enhance + portada
+ mensaje de error + botones) de AlbumForm y PlaylistForm, que quedan
solo con sus campos propios vía snippets `fields` (junto a la
portada) y `extra` (a ancho completo, no está en la spec literal pero
necesario: la descripción del álbum y el selector de visibilidad de
playlist no caben en la columna junto al arte).

ImageDropzone gana `size="hero"` (size-cover-hero + rounded-art-lg) y
un callback `onselect`; la página de subir canción usa ahora este
componente en vez de reimplementar el selector de portada a mano
(envuelto en {#key} para poder resetear tras publicar). Su icono de
posición vacía pasa de 64px a icon-xl (36px), como recomienda el plan.

SegmentedControl.svelte (genérico, N opciones) sustituye el selector
Privada/Pública de PlaylistForm. Chip.svelte sustituye los chips de
filtro de Explorar (selected/count) y los chips de género sugeridos en
"Sin resultados" (href, estilo outline).

@utility field-control en layout.css unifica la cadena de clases
repetida de Input y Textarea.

Verificado con npm run check/build; sin QA visual autenticada (Docker
no disponible en esta sesión).

web-player/src/lib/components/ui/AlbumForm.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { enhance } from '$app/forms';
 	import Disc3 from '@lucide/svelte/icons/disc-3';
-	import ImageDropzone from './ImageDropzone.svelte';
-	import Button from './Button.svelte';
+	import CoverForm from './CoverForm.svelte';
 	import Field from './Field.svelte';
 	import Input from './Input.svelte';
 	import Textarea from './Textarea.svelte';
-	import Alert from './Alert.svelte';
 	import { ALBUM_EARLIEST_YEAR } from '$lib/config';
 
 	interface Props {
@@ -43,81 +40,55 @@
 	let title = $state(untrack(() => initialTitle));
 	let description = $state(untrack(() => initialDescription));
 	let releaseYear = $state(untrack(() => (initialReleaseYear ? String(initialReleaseYear) : '')));
-	let submitting = $state(false);
 
 	const latestYear = new Date().getFullYear() + 1;
 </script>
 
-<form
-	method="POST"
+<CoverForm
 	{action}
-	enctype="multipart/form-data"
-	use:enhance={() => {
-		submitting = true;
-		return async ({ update, result }) => {
-			await update({ reset: false });
-			submitting = false;
-			if (result.type === 'success') onSuccess?.();
-		};
-	}}
-	class="mt-5 w-full max-w-2xl space-y-5"
+	{coverFallbackUrl}
+	{requireCover}
+	coverIcon={Disc3}
+	{formMessage}
+	{submitLabel}
+	{submittingLabel}
+	canSubmit={title.trim() !== ''}
+	{onCancel}
+	{onSuccess}
 >
-	<div class="flex flex-col items-stretch gap-5 sm:flex-row sm:gap-8">
-		<Field>
-			<ImageDropzone
-				name="cover"
-				fallbackUrl={coverFallbackUrl}
-				required={requireCover}
-				icon={Disc3}
-				gradient
-				class="h-36 w-36 rounded-2xl"
+	{#snippet fields()}
+		<Field label="Título" for="album-title">
+			<Input
+				id="album-title"
+				name="title"
+				maxlength={200}
+				required
+				bind:value={title}
+				placeholder={titlePlaceholder}
 			/>
 		</Field>
 
-		<div class="flex flex-1 flex-col gap-4">
-			<Field label="Título" for="album-title">
-				<Input
-					id="album-title"
-					name="title"
-					maxlength={200}
-					required
-					bind:value={title}
-					placeholder={titlePlaceholder}
-				/>
-			</Field>
-
-			<Field label="Año de publicación" for="album-year">
-				<Input
-					id="album-year"
-					name="releaseYear"
-					type="number"
-					min={ALBUM_EARLIEST_YEAR}
-					max={latestYear}
-					bind:value={releaseYear}
-					placeholder={String(new Date().getFullYear())}
-				/>
-			</Field>
-		</div>
-	</div>
-
-	<Field label="Descripción" for="album-description">
-		<Textarea
-			id="album-description"
-			name="description"
-			maxlength={256}
-			bind:value={description}
-			placeholder="¿De qué va este álbum?"
-		/>
-	</Field>
-
-	{#if formMessage}
-		<Alert tone="danger">{formMessage}</Alert>
-	{/if}
-
-	<div class="flex items-center justify-end gap-3">
-		<Button type="button" variant="secondary" onclick={onCancel}>Cancelar</Button>
-		<Button type="submit" disabled={submitting || title.trim() === ''}>
-			{submitting ? submittingLabel : submitLabel}
-		</Button>
-	</div>
-</form>
+		<Field label="Año de publicación" for="album-year">
+			<Input
+				id="album-year"
+				name="releaseYear"
+				type="number"
+				min={ALBUM_EARLIEST_YEAR}
+				max={latestYear}
+				bind:value={releaseYear}
+				placeholder={String(new Date().getFullYear())}
+			/>
+		</Field>
+	{/snippet}
+	{#snippet extra()}
+		<Field label="Descripción" for="album-description">
+			<Textarea
+				id="album-description"
+				name="description"
+				maxlength={256}
+				bind:value={description}
+				placeholder="¿De qué va este álbum?"
+			/>
+		</Field>
+	{/snippet}
+</CoverForm>