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. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-22 14:16:25 +02:00
parent 8a76fbb78e
commit 705f23c78f
61 changed files with 131 additions and 131 deletions
@@ -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>