<!--
	Vertical split layout: a top pane (preview) sized by
	`view.previewPaneHeight`, a draggable divider, and a flex-1 bottom
	pane (the grid). Mirrors the horizontal sidebar resize pattern.

	Usage:
		<SplitGrid>
			{#snippet preview()}
				<InlinePreview uid={selection.focused} order={selection.order} />
			{/snippet}
			{#snippet grid()}
				<main>…</main>
			{/snippet}
		</SplitGrid>
-->
<script lang="ts">
	import type { Snippet } from 'svelte';
	import { resizableVertical } from '$lib/actions/resizableVertical';
	import { setPreviewPaneHeight, view } from '$lib/stores/view.svelte';

	interface Props {
		preview: Snippet;
		grid: Snippet;
	}
	let { preview, grid }: Props = $props();
</script>

<div class="flex min-h-0 flex-1 flex-col">
	<!-- Top: preview pane. Fixed pixel height controlled by the divider;
	     overflow-hidden so videos / images can't push the divider off-screen. -->
	<div
		class="relative shrink-0 overflow-hidden border-b border-border"
		style="height: {view.previewPaneHeight}px;"
	>
		{@render preview()}
		<!-- Divider sits on the bottom edge of the preview pane.
		     `edge: 'bottom'` matches the convention: positive dy = pane grows. -->
		<div
			class="group absolute -bottom-1.5 left-0 z-20 h-3 w-full cursor-row-resize"
			use:resizableVertical={{
				edge: 'bottom',
				getHeight: () => view.previewPaneHeight,
				setHeight: setPreviewPaneHeight
			}}
			role="separator"
			aria-orientation="horizontal"
			aria-label="Resize preview pane"
		>
			<div
				class="mt-1 h-0.5 w-full bg-transparent transition-colors group-hover:bg-primary/40"
			></div>
		</div>
	</div>

	<!-- Bottom: grid container; the caller's snippet handles its own scroll. -->
	<div class="flex min-h-0 flex-1 flex-col overflow-hidden">
		{@render grid()}
	</div>
</div>
