feat: Add spatial navigation scrollTo strategies

src/lib/components/Card/Card.svelte

@@ -7,6 +7,7 @@
 	import type { TitleType } from '../../types';
 	import Container from '../../../Container.svelte';
 	import { useNavigate } from 'svelte-navigator';
+	import { scrollWithOffset } from '../../selectable';
 
 	export let tmdbId: number | undefined = undefined;
 	export let tvdbId: number | undefined = undefined;

src/lib/components/CardGrid.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Container from '../../Container.svelte';
 	import { onMount } from 'svelte';
+	import { scrollWithOffset } from '../selectable';
 
 	let cols: number = 1;
 	const calculateRows = () => {
@@ -26,6 +27,7 @@
 <Container
 	direction="grid"
 	gridCols={cols}
+	childrenRevealStrategy={scrollWithOffset('all', 50)}
 	class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
 >
 	<slot />

src/lib/components/Carousel/Carousel.svelte

@@ -3,6 +3,7 @@
 	import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
 	import classNames from 'classnames';
 	import Container from '../../../Container.svelte';
+	import { scrollWithOffset } from '../../selectable';
 
 	export let gradientFromColor = 'from-stone-950';
 	export let heading = '';
@@ -44,7 +45,7 @@
 	</div>
 
 	<div class="relative">
-		<Container direction="horizontal">
+		<Container childrenRevealStrategy={scrollWithOffset('left', 50)} direction="horizontal">
 			<div
 				class={classNames(
 					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',