feat(frontend): add MapLibre GL map components

Reusable Svelte map component library wrapping MapLibre GL JS: Map, MapMarker, MapControls, MapPopup, MapRoute, MapClusterLayer, MapArc, and supporting components. Features theme auto-detection, controlled/uncontrolled viewport, drag support, and context API. useMap hook provides reactive access. Integrated on contact page for salon location display.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-06-04 01:07:25 +01:00
co-authored by Sisyphus
parent 584c02ac6c
commit 4c26db81db
15 changed files with 2152 additions and 31 deletions
@@ -0,0 +1,27 @@
<script lang="ts">
import { cn } from "$lib/utils.js";
interface Props {
children?: import("svelte").Snippet;
class?: string;
position?: "top" | "bottom";
}
let { children, class: className, position = "top" }: Props = $props();
const positionClasses = {
top: "bottom-full mb-1",
bottom: "top-full mt-1",
};
</script>
<div
class={cn(
"absolute left-1/2 -translate-x-1/2 whitespace-nowrap",
"text-foreground text-[10px] font-medium",
positionClasses[position],
className
)}
>
{@render children?.()}
</div>