Dock

1<script lang="ts" module>
2	import type { MotionValue } from "motion-sv";
3 
4	export interface DockProps {
5		class?: string;
6		iconSize?: number;
7		iconMagnification?: number;
8		disableMagnification?: boolean;
9		iconDistance?: number;
10		direction?: "top" | "middle" | "bottom";
11		children: Snippet;
12	}
13 
14	export interface DockContext {
15		mouseX: MotionValue<number>;
16		iconSize: number;
17		iconMagnification: number;
18		disableMagnification: boolean;
19		iconDistance: number;
20	}
21</script>
22 
23<script lang="ts">
24	import { motion, useMotionValue } from "motion-sv";
25	import { cn } from "$UTILS$";
26	import type { Snippet } from "svelte";
27	import { setContext } from "svelte";
28 
29	const DEFAULT_SIZE = 40;
30	const DEFAULT_MAGNIFICATION = 60;
31	const DEFAULT_DISTANCE = 140;
32 
33	let {
34		class: className,
35		children,
36		iconSize = DEFAULT_SIZE,
37		iconMagnification = DEFAULT_MAGNIFICATION,
38		disableMagnification = false,
39		iconDistance = DEFAULT_DISTANCE,
40		direction = "middle",
41	}: DockProps = $props();
42 
43	// Use MotionValue for mouseX - this enables smooth reactive transforms
44	const mouseX = useMotionValue(Infinity);
45 
46	// Provide context to child DockIcon components
47	setContext("dock", {
48		mouseX,
49		get iconSize() {
50			return iconSize;
51		},
52		get iconMagnification() {
53			return iconMagnification;
54		},
55		get disableMagnification() {
56			return disableMagnification;
57		},
58		get iconDistance() {
59			return iconDistance;
60		},
61	});
62</script>
63 
64<motion.div
65	onmousemove={(e) => mouseX.set(e.pageX)}
66	onmouseleave={() => mouseX.set(Infinity)}
67	class={cn(
68		"mx-auto mt-8 flex h-14 w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10",
69		{
70			"items-start": direction === "top",
71			"items-center": direction === "middle",
72			"items-end": direction === "bottom",
73		},
74		className
75	)}
76>
77	{@render children()}
78</motion.div>