Categorize components/ui into primitives, overlay, media, forms and layout

Splits the flat 38-component ui/ folder into primitives/ (generic
controls), overlay/ (menus/modals), media/ (music-domain display
components), forms/ (composite entity forms) and layout/ (page
scaffolding), and updates every import path accordingly.

web-player/src/lib/components/ui/layout/Page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: klass = '', children }: Props = $props();
+</script>
+
+<section class="page-x pt-3 pb-8 sm:pt-4 sm:pb-10 {klass}">
+	{@render children()}
+</section>

web-player/src/lib/components/ui/layout/PageHeader.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		eyebrow?: string;
+		description?: string;
+		meta?: string;
+		cover?: Snippet;
+		actions?: Snippet;
+		align?: 'center' | 'end';
+		class?: string;
+	}
+
+	let {
+		title,
+		eyebrow,
+		description,
+		meta,
+		cover,
+		actions,
+		align = 'end',
+		class: klass = ''
+	}: Props = $props();
+</script>
+
+<div class="mb-7 sm:mb-8 {klass}">
+	<div
+		class="flex flex-col gap-5 sm:flex-row sm:gap-6 {cover
+			? align === 'end'
+				? 'sm:items-end'
+				: 'sm:items-center'
+			: 'sm:items-end sm:justify-between'}"
+	>
+		{#if cover}
+			{@render cover()}
+		{/if}
+		<div class="min-w-0 flex-1">
+			{#if eyebrow}
+				<p class="text-eyebrow text-fg-2">{eyebrow}</p>
+			{/if}
+			<h1 class="text-display-1 wrap-break-word text-fg {eyebrow ? 'mt-1.5' : ''}">
+				{title}
+			</h1>
+			{#if description}
+				<p class="mt-3 max-w-2xl text-body text-fg-2">{description}</p>
+			{/if}
+			{#if meta}
+				<p class="mt-3 text-sm text-fg-2">{meta}</p>
+			{/if}
+		</div>
+		{#if actions && !cover}
+			<div class="flex shrink-0 items-center gap-3">{@render actions()}</div>
+		{/if}
+	</div>
+	{#if actions && cover}
+		<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
+			{@render actions()}
+		</div>
+	{/if}
+</div>

web-player/src/lib/components/ui/layout/SectionHeading.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { plural } from '$lib/utils/format';
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+		count?: number;
+		href?: string;
+		linkLabel?: string;
+		class?: string;
+		actions?: Snippet;
+	}
+
+	let {
+		title,
+		subtitle,
+		count,
+		href,
+		linkLabel = 'Ver todas',
+		class: klass = '',
+		actions
+	}: Props = $props();
+
+	const hasActions = $derived(!!actions || count !== undefined || !!href);
+</script>
+
+{#snippet heading()}
+	<h2 class="text-display-4 text-fg">
+		{title}
+	</h2>
+	{#if subtitle}
+		<p class="mt-1 text-xs text-fg-3">{subtitle}</p>
+	{/if}
+{/snippet}
+
+{#snippet autoActions()}
+	{#if count !== undefined}
+		<div class="h-px flex-1 self-center bg-line"></div>
+		<span class="shrink-0 text-xs text-muted tabular-nums">
+			{plural(count, 'resultado', 'resultados')}
+		</span>
+	{/if}
+	{#if href}
+		<a
+			{href}
+			class="shrink-0 text-xs font-medium tracking-wider text-fg-3 uppercase transition-colors hover:text-fg"
+		>
+			{linkLabel}
+		</a>
+	{/if}
+{/snippet}
+
+{#if hasActions}
+	<div class="mb-4 flex items-end justify-between gap-4 sm:mb-4.5 {klass}">
+		<div>{@render heading()}</div>
+		{#if actions}
+			{@render actions()}
+		{:else}
+			{@render autoActions()}
+		{/if}
+	</div>
+{:else}
+	<div class="mb-4 sm:mb-4.5 {klass}">
+		{@render heading()}
+	</div>
+{/if}