@dryui/ui 0.0.1

package/dist/map/index.d.ts

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LngLat, MapInstance, MapOptions, GeoJsonData } from '@dryui/primitives';
+export type {
+	LngLat,
+	MapInstance,
+	MapLibrary,
+	MapMarkerInstance,
+	MapPopupInstance,
+	MapOptions,
+	MapControl,
+	MapSource,
+	MarkerOptions,
+	PopupOptions,
+	GeoJsonData
+} from '@dryui/primitives';
+export interface MapRootProps extends HTMLAttributes<HTMLDivElement> {
+	center?: LngLat;
+	zoom?: number;
+	minZoom?: number;
+	maxZoom?: number;
+	mapStyle?: string;
+	createMap?: (container: HTMLDivElement, options: MapOptions) => MapInstance;
+	children?: Snippet;
+}
+export interface MapMarkerProps {
+	position: LngLat;
+	color?: string;
+	children?: Snippet;
+	class?: string;
+}
+export interface MapPopupProps {
+	maxWidth?: string;
+	closeButton?: boolean;
+	closeOnClick?: boolean;
+	children: Snippet;
+	class?: string;
+}
+export interface MapLayerProps {
+	id: string;
+	type: 'heatmap' | 'polygon' | 'fill' | 'circle' | 'line';
+	data: GeoJsonData;
+	color?: string;
+	opacity?: number;
+}
+export interface MapControlsProps {
+	position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	navigation?: boolean;
+	fullscreen?: boolean;
+	children?: Snippet;
+}
+import MapRoot from './map-root.svelte';
+import MapMarker from './map-marker.svelte';
+import MapPopup from './map-popup.svelte';
+import MapLayer from './map-layer.svelte';
+import MapControls from './map-controls.svelte';
+export declare const Map: {
+	Root: typeof MapRoot;
+	Marker: typeof MapMarker;
+	Popup: typeof MapPopup;
+	Layer: typeof MapLayer;
+	Controls: typeof MapControls;
+};

package/dist/map/index.js

@@ -0,0 +1,12 @@
+import MapRoot from './map-root.svelte';
+import MapMarker from './map-marker.svelte';
+import MapPopup from './map-popup.svelte';
+import MapLayer from './map-layer.svelte';
+import MapControls from './map-controls.svelte';
+export const Map = {
+    Root: MapRoot,
+    Marker: MapMarker,
+    Popup: MapPopup,
+    Layer: MapLayer,
+    Controls: MapControls
+};

package/dist/map/map-controls.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { getMapCtx } from './context.svelte.js';
+	import type { MapControl } from '@dryui/primitives';
+
+	interface Props {
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		navigation?: boolean;
+		fullscreen?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		position = 'top-right',
+		navigation = false,
+		fullscreen = false,
+		children
+	}: Props = $props();
+
+	const ctx = getMapCtx();
+	let controls: MapControl[] = [];
+
+	$effect(() => {
+		if (!ctx.loaded || !ctx.map || !ctx.lib) return;
+
+		cleanupControls();
+
+		if (navigation && ctx.lib.NavigationControl) {
+			try {
+				const nav = new ctx.lib.NavigationControl();
+				ctx.map.addControl(nav, position);
+				controls.push(nav);
+			} catch {
+				// Control creation failed
+			}
+		}
+
+		if (fullscreen && ctx.lib.FullscreenControl) {
+			try {
+				const fs = new ctx.lib.FullscreenControl();
+				ctx.map.addControl(fs, position);
+				controls.push(fs);
+			} catch {
+				// Control creation failed
+			}
+		}
+	});
+
+	function cleanupControls() {
+		for (const control of controls) {
+			try {
+				ctx.map?.removeControl(control);
+			} catch {
+				// Control may already be removed
+			}
+		}
+		controls = [];
+	}
+
+	onDestroy(() => {
+		cleanupControls();
+	});
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/map/map-controls.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+	position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	navigation?: boolean;
+	fullscreen?: boolean;
+	children?: Snippet;
+}
+declare const MapControls: import('svelte').Component<Props, {}, ''>;
+type MapControls = ReturnType<typeof MapControls>;
+export default MapControls;

package/dist/map/map-layer.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { getMapCtx } from './context.svelte.js';
+	import type { GeoJsonData } from '@dryui/primitives';
+
+	interface Props {
+		id: string;
+		type: 'heatmap' | 'polygon' | 'fill' | 'circle' | 'line';
+		data: GeoJsonData;
+		color?: string;
+		opacity?: number;
+	}
+
+	let { id, type, data, color, opacity }: Props = $props();
+
+	const ctx = getMapCtx();
+	const sourceId = $derived(`source-${id}`);
+	let added = $state(false);
+
+	const resolvedType = $derived(type === 'polygon' ? 'fill' : type);
+
+	$effect(() => {
+		if (!ctx.loaded || !ctx.map) return;
+
+		const map = ctx.map;
+
+		if (!added) {
+			if (!map.getSource(sourceId)) {
+				map.addSource(sourceId, {
+					type: 'geojson',
+					data
+				});
+			}
+
+			const paint: Record<string, unknown> = {};
+			const lt = resolvedType;
+
+			if (lt === 'fill') {
+				if (color) paint['fill-color'] = color;
+				if (opacity !== undefined) paint['fill-opacity'] = opacity;
+			} else if (lt === 'circle') {
+				if (color) paint['circle-color'] = color;
+				if (opacity !== undefined) paint['circle-opacity'] = opacity;
+			} else if (lt === 'heatmap') {
+				if (opacity !== undefined) paint['heatmap-opacity'] = opacity;
+			} else if (lt === 'line') {
+				if (color) paint['line-color'] = color;
+				if (opacity !== undefined) paint['line-opacity'] = opacity;
+			}
+
+			if (!map.getLayer(id)) {
+				map.addLayer({
+					id,
+					type: lt,
+					source: sourceId,
+					paint
+				});
+			}
+
+			added = true;
+		}
+	});
+
+	$effect(() => {
+		if (!added || !ctx.map) return;
+		const source = ctx.map.getSource(sourceId);
+		if (source && data) {
+			source.setData(data);
+		}
+	});
+
+	$effect(() => {
+		if (!added || !ctx.map) return;
+		const map = ctx.map;
+		const lt = resolvedType;
+
+		if (lt === 'fill') {
+			if (color) map.setPaintProperty(id, 'fill-color', color);
+			if (opacity !== undefined) map.setPaintProperty(id, 'fill-opacity', opacity);
+		} else if (lt === 'circle') {
+			if (color) map.setPaintProperty(id, 'circle-color', color);
+			if (opacity !== undefined) map.setPaintProperty(id, 'circle-opacity', opacity);
+		} else if (lt === 'heatmap') {
+			if (opacity !== undefined) map.setPaintProperty(id, 'heatmap-opacity', opacity);
+		} else if (lt === 'line') {
+			if (color) map.setPaintProperty(id, 'line-color', color);
+			if (opacity !== undefined) map.setPaintProperty(id, 'line-opacity', opacity);
+		}
+	});
+
+	onDestroy(() => {
+		if (ctx.map && added) {
+			try {
+				if (ctx.map.getLayer(id)) ctx.map.removeLayer(id);
+				if (ctx.map.getSource(sourceId)) ctx.map.removeSource(sourceId);
+			} catch {
+				// Map may already be destroyed
+			}
+		}
+	});
+</script>

package/dist/map/map-layer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { GeoJsonData } from '@dryui/primitives';
+interface Props {
+	id: string;
+	type: 'heatmap' | 'polygon' | 'fill' | 'circle' | 'line';
+	data: GeoJsonData;
+	color?: string;
+	opacity?: number;
+}
+declare const MapLayer: import('svelte').Component<Props, {}, ''>;
+type MapLayer = ReturnType<typeof MapLayer>;
+export default MapLayer;

package/dist/map/map-marker.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { getMapCtx, setMarkerCtx } from './context.svelte.js';
+	import type { LngLat, MapMarkerInstance, MarkerOptions } from '@dryui/primitives';
+
+	interface Props {
+		position: LngLat;
+		color?: string;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { position, color, children, class: className }: Props = $props();
+
+	const ctx = getMapCtx();
+
+	let markerInstance = $state<MapMarkerInstance | null>(null);
+	let contentEl = $state<HTMLDivElement>();
+
+	setMarkerCtx({
+		get marker() {
+			return markerInstance;
+		},
+		get position() {
+			return position;
+		}
+	});
+
+	$effect(() => {
+		if (!ctx.loaded || !ctx.map || !ctx.lib) return;
+
+		if (markerInstance) {
+			markerInstance.remove();
+			markerInstance = null;
+		}
+
+		const opts: MarkerOptions = {};
+		if (children && contentEl) {
+			opts.element = contentEl;
+		}
+		if (color && !children) {
+			opts.color = color;
+		}
+
+		try {
+			const marker = new ctx.lib.Marker(opts).setLngLat(position).addTo(ctx.map);
+			markerInstance = marker;
+		} catch {
+			// Marker creation failed
+		}
+	});
+
+	$effect(() => {
+		if (markerInstance && position) {
+			markerInstance.setLngLat(position);
+		}
+	});
+
+	onDestroy(() => {
+		if (markerInstance) {
+			markerInstance.remove();
+			markerInstance = null;
+		}
+	});
+</script>
+
+{#if children}
+	<div bind:this={contentEl} data-part="marker-content" class={className}>
+		{@render children()}
+	</div>
+{/if}

package/dist/map/map-marker.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+	position: [number, number];
+	color?: string;
+	children?: Snippet;
+	class?: string;
+}
+declare const MapMarker: import('svelte').Component<Props, {}, ''>;
+type MapMarker = ReturnType<typeof MapMarker>;
+export default MapMarker;

package/dist/map/map-popup.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { getMapCtx, getMarkerCtx } from './context.svelte.js';
+	import type { MapPopupInstance, PopupOptions } from '@dryui/primitives';
+
+	interface Props {
+		maxWidth?: string;
+		closeButton?: boolean;
+		closeOnClick?: boolean;
+		children: Snippet;
+		class?: string;
+	}
+
+	let {
+		maxWidth = '20rem',
+		closeButton = true,
+		closeOnClick = true,
+		children,
+		class: className
+	}: Props = $props();
+
+	const mapCtx = getMapCtx();
+	const markerCtx = getMarkerCtx();
+
+	let popupInstance = $state<MapPopupInstance | null>(null);
+	let contentEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!mapCtx.loaded || !mapCtx.map || !mapCtx.lib || !markerCtx.marker || !contentEl) return;
+
+		if (popupInstance) {
+			popupInstance.remove();
+			popupInstance = null;
+		}
+
+		try {
+			const popupOptions: PopupOptions = {
+				maxWidth,
+				closeButton,
+				closeOnClick
+			};
+			if (className) popupOptions.className = className;
+			const popup = new mapCtx.lib.Popup(popupOptions).setDOMContent(contentEl);
+
+			markerCtx.marker.setPopup(popup);
+			popupInstance = popup;
+		} catch {
+			// Popup creation failed
+		}
+	});
+
+	onDestroy(() => {
+		if (popupInstance) {
+			popupInstance.remove();
+			popupInstance = null;
+		}
+	});
+</script>
+
+<div bind:this={contentEl} data-part="popup-content">
+	{@render children()}
+</div>

package/dist/map/map-popup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+	maxWidth?: string;
+	closeButton?: boolean;
+	closeOnClick?: boolean;
+	children: Snippet;
+	class?: string;
+}
+declare const MapPopup: import('svelte').Component<Props, {}, ''>;
+type MapPopup = ReturnType<typeof MapPopup>;
+export default MapPopup;

package/dist/map/map-root.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { onDestroy } from 'svelte';
+	import { setMapCtx } from './context.svelte.js';
+	import type {
+		LngLat,
+		MapInstance,
+		MapLibrary,
+		MapMarkerInstance,
+		MapOptions,
+		MarkerOptions
+	} from '@dryui/primitives';
+
+	type WindowWithMapLibs = Window & { maplibregl?: MapLibrary; mapboxgl?: MapLibrary };
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		center?: LngLat;
+		zoom?: number;
+		minZoom?: number;
+		maxZoom?: number;
+		mapStyle?: string;
+		createMap?: (container: HTMLDivElement, options: MapOptions) => MapInstance;
+		children?: Snippet;
+	}
+
+	let {
+		center = [0, 0],
+		zoom = 2,
+		minZoom,
+		maxZoom,
+		mapStyle,
+		createMap,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let containerEl = $state<HTMLDivElement>();
+	let mapInstance = $state<MapInstance | null>(null);
+	let mapLib = $state<MapLibrary | null>(null);
+	let loaded = $state(false);
+	let error = $state<string | null>(null);
+	let markers = new Map<string, MapMarkerInstance>();
+
+	const ctx = setMapCtx({
+		get map() {
+			return mapInstance;
+		},
+		get lib() {
+			return mapLib;
+		},
+		get container() {
+			return containerEl ?? null;
+		},
+		get loaded() {
+			return loaded;
+		},
+		addMarker(id: string, position: LngLat, element?: HTMLElement) {
+			if (!mapInstance || !mapLib) return;
+			removeMarkerById(id);
+			try {
+				const markerOptions: MarkerOptions = {};
+				if (element) {
+					markerOptions.element = element;
+				}
+				const marker = new mapLib.Marker(markerOptions).setLngLat(position).addTo(mapInstance);
+				markers.set(id, marker);
+			} catch {
+				// intentional
+			}
+		},
+		removeMarker(id: string) {
+			removeMarkerById(id);
+		},
+		flyTo(center: LngLat, flyZoom?: number) {
+			if (!mapInstance) return;
+			const opts: { center: LngLat; zoom?: number } = { center };
+			if (flyZoom !== undefined) opts.zoom = flyZoom;
+			mapInstance.flyTo(opts);
+		}
+	});
+
+	function removeMarkerById(id: string) {
+		const existing = markers.get(id);
+		if (existing) {
+			existing.remove();
+			markers.delete(id);
+		}
+	}
+
+	function getGlobalLib(): MapLibrary | null {
+		if (typeof window === 'undefined') return null;
+		const win = window as WindowWithMapLibs;
+		return win.maplibregl ?? win.mapboxgl ?? null;
+	}
+
+	async function initMap(container: HTMLDivElement) {
+		const options: MapOptions = {
+			container,
+			center,
+			zoom
+		};
+		if (minZoom !== undefined) options.minZoom = minZoom;
+		if (maxZoom !== undefined) options.maxZoom = maxZoom;
+		if (mapStyle) options.style = mapStyle;
+
+		if (createMap) {
+			try {
+				mapInstance = createMap(container, options);
+			} catch (e) {
+				error = `Map creation failed: ${e instanceof Error ? e.message : String(e)}`;
+				return;
+			}
+			mapLib = getGlobalLib();
+		} else {
+			let lib: MapLibrary | null = getGlobalLib();
+
+			if (!lib) {
+				const maplibreId = 'maplibre-gl';
+				const mapboxId = 'mapbox-gl';
+				try {
+					const mod = (await import(/* @vite-ignore */ maplibreId)) as { default?: MapLibrary };
+					lib = mod.default ?? (mod as unknown as MapLibrary);
+				} catch {
+					try {
+						const mod = (await import(/* @vite-ignore */ mapboxId)) as { default?: MapLibrary };
+						lib = mod.default ?? (mod as unknown as MapLibrary);
+					} catch {
+						error =
+							'No map library found. Install maplibre-gl or mapbox-gl, or provide a createMap prop.';
+						return;
+					}
+				}
+			}
+
+			mapLib = lib;
+
+			try {
+				mapInstance = new lib.Map(options);
+			} catch (e) {
+				error = `Map creation failed: ${e instanceof Error ? e.message : String(e)}`;
+				return;
+			}
+		}
+
+		if (mapInstance) {
+			mapInstance.on('load', () => {
+				loaded = true;
+			});
+
+			if (mapInstance.loaded?.()) {
+				loaded = true;
+			}
+		}
+	}
+
+	$effect(() => {
+		if (containerEl && !mapInstance && !error) {
+			initMap(containerEl);
+		}
+	});
+
+	$effect(() => {
+		if (mapInstance && loaded) {
+			const currentCenter = mapInstance.getCenter?.();
+			if (currentCenter) {
+				const [lng, lat] = center;
+				if (
+					Math.abs(currentCenter.lng - lng) > 0.0001 ||
+					Math.abs(currentCenter.lat - lat) > 0.0001
+				) {
+					mapInstance.setCenter(center);
+				}
+			}
+		}
+	});
+
+	$effect(() => {
+		if (mapInstance && loaded) {
+			const currentZoom = mapInstance.getZoom?.();
+			if (currentZoom !== undefined && Math.abs(currentZoom - zoom) > 0.01) {
+				mapInstance.setZoom(zoom);
+			}
+		}
+	});
+
+	onDestroy(() => {
+		for (const marker of markers.values()) {
+			marker.remove();
+		}
+		markers.clear();
+		if (mapInstance) {
+			mapInstance.remove();
+			mapInstance = null;
+		}
+	});
+</script>
+
+<div bind:this={containerEl} class={className} data-part="map-root" data-map-root {...rest}>
+	{#if error}
+		<div data-part="map-error">
+			{error}
+		</div>
+	{/if}
+</div>
+{#if children && !error}
+	{@render children()}
+{/if}
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-map-root] {
+		--dry-map-radius: var(--dry-radius-lg, 0.5rem);
+		--dry-map-border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+
+		display: grid;
+		position: relative;
+		border-radius: var(--dry-map-radius);
+		border: var(--dry-map-border);
+		overflow: hidden;
+		height: 400px;
+	}
+
+	[data-map-root] [data-map-mapboxgl]-canvas,
+	[data-map-root] [data-map-maplibregl]-canvas {
+		border-radius: var(--dry-map-radius);
+	}
+
+	[data-map-marker] {
+		cursor: pointer;
+	}
+
+	[data-map-marker] [data-part='marker-content'] {
+		background: var(--dry-color-bg-raised, #ffffff);
+		border-radius: var(--dry-radius-md, 0.375rem);
+		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+		padding: var(--dry-space-2, 0.5rem);
+	}
+
+	[data-map-popup] {
+		display: grid;
+		grid-template-columns: minmax(0, 20rem);
+	}
+
+	[data-map-popup] [data-map-mapboxgl]-popup-content,
+	[data-map-popup] [data-map-maplibregl]-popup-content {
+		background: var(--dry-color-bg-raised, #ffffff);
+		border-radius: var(--dry-radius-lg, 0.5rem);
+		box-shadow: var(--dry-shadow-lg);
+		padding: var(--dry-space-4, 1rem);
+		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+	}
+
+	[data-theme='dark'] [data-map-popup] [data-map-mapboxgl]-popup-content,
+	[data-theme='dark'] [data-map-popup] [data-map-maplibregl]-popup-content {
+		background: var(--dry-color-bg-raised, #1e1e2e);
+	}
+
+	[data-part='map-error'] {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		padding: 1rem;
+		text-align: center;
+		color: inherit;
+		opacity: 0.6;
+	}
+</style>