From 8f3ffefdf1c4927b7b244bec11b7e1daf1bdf417 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 19:42:04 +0200
Subject: [PATCH] feat(page-carousel): optional leading snippet before first
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Consumers of PageCarousel can now pass a \`leading\` Snippet that
renders as the first flex child inside .fokus-track, ahead of the
page wrappers. Used on the workbench homepage for the scene header
(name + description). Scrolls with the track rather than sticking
in place — reads as an intro block, not app chrome, and doesn't
steal viewport from the cards on narrow screens.

Styled as flex-aligned, align-self:stretch so its intrinsic layout
decides the height and it centres vertically against the cards.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/page-carousel/PageCarousel.svelte  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
index fbfa12e40..8a919624b 100644
--- a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
+++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
@@ -19,6 +19,11 @@
 		addLabel?: string;
 		page: Snippet<[CarouselPage, number]>;
 		picker?: Snippet;
+		/** Optional content rendered before the first page inside the same
+		 *  scroll track. Used for the scene header on the homepage. Scrolls
+		 *  with the pages (doesn't stay pinned) so it reads as an intro
+		 *  block rather than app chrome. */
+		leading?: Snippet;
 	}
 
 	let {
@@ -33,6 +38,7 @@
 		addLabel = 'Hinzufügen',
 		page: pageSnippet,
 		picker,
+		leading,
 	}: Props = $props();
 
 	let pickerEl = $state<HTMLDivElement | null>(null);
@@ -103,6 +109,9 @@
 
 <div class="carousel-root">
 	<div class="fokus-track" style="--sheet-width: {defaultWidth}px" bind:this={trackEl}>
+		{#if leading}
+			<div class="leading-slot">{@render leading()}</div>
+		{/if}
 		{#each pages as p, idx (p.id)}
 			<div class="page-wrapper" role="listitem" data-page-id={p.id}>
 				{#if mountedIds.has(p.id)}
@@ -163,6 +172,12 @@
 	.page-wrapper {
 		flex: 0 0 auto;
 	}
+	.leading-slot {
+		flex: 0 0 auto;
+		align-self: stretch;
+		display: flex;
+		align-items: center;
+	}
 	/* Sized stand-in for a not-yet-mounted card. Matches the card's
 	   widthPx/heightPx so scroll position and the surrounding flex
 	   layout stay stable while the IntersectionObserver decides which