@dryui/ui 3.0.0 → 4.0.1

package/src/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/src/map/map-marker.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy, untrack } 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;
+
+		// Remove previous marker without tracking markerInstance as a dependency
+		const prev = untrack(() => markerInstance);
+		if (prev) {
+			prev.remove();
+		}
+
+		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}
+
+<style>
+	[data-part='marker-content'] {
+		background: var(--dry-color-bg-raised);
+		border-radius: var(--dry-radius-md, 0.375rem);
+		box-shadow: var(--dry-shadow-md);
+		padding: var(--dry-space-2, 0.5rem);
+		cursor: pointer;
+	}
+</style>

package/src/map/map-popup.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy, untrack } 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;
+
+		// Remove previous popup without tracking popupInstance as a dependency
+		const prev = untrack(() => popupInstance);
+		if (prev) {
+			prev.remove();
+		}
+
+		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>
+
+<style>
+	[data-part='popup-content'] {
+		display: grid;
+		grid-template-columns: minmax(0, 20rem);
+	}
+</style>

package/src/map/map-root.svelte

@@ -0,0 +1,244 @@
+<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 (!containerEl || !mapInstance) return;
+		const observer = new ResizeObserver(() => {
+			mapInstance?.resize?.();
+		});
+		observer.observe(containerEl);
+		return () => observer.disconnect();
+	});
+
+	$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>
+
+{#if error}
+	<div class={className} data-part="map-root" data-map-root {...rest}>
+		<div data-part="map-error">
+			{error}
+		</div>
+	</div>
+{:else}
+	<div bind:this={containerEl} class={className} data-part="map-root" data-map-root {...rest}></div>
+	{#if children}
+		{@render children()}
+	{/if}
+{/if}
+
+<style>
+	[data-map-root] {
+		--dry-map-radius: var(--dry-radius-lg, 0.5rem);
+		--dry-map-border: 1px solid var(--dry-color-stroke-weak);
+
+		display: block;
+		position: relative;
+		border-radius: var(--dry-map-radius);
+		border: var(--dry-map-border);
+		overflow: hidden;
+		height: 400px;
+	}
+
+	[data-part='map-error'] {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		padding: 1rem;
+		text-align: center;
+		color: inherit;
+		opacity: 0.6;
+	}
+</style>

package/src/map/map.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Map',
+	description: 'Interactive map container with markers, popups, layers, and controls',
+	category: 'display',
+	tags: ['map', 'geo', 'marker', 'popup', 'layer', 'geojson']
+};

package/src/markdown-renderer/index.ts

@@ -0,0 +1,4 @@
+export type { MarkdownRendererProps, MarkdownNode } from '@dryui/primitives';
+
+export { default as MarkdownRenderer } from './markdown-renderer.svelte';
+export { parseMarkdownToAst } from '@dryui/primitives/markdown-renderer';

package/src/markdown-renderer/markdown-renderer.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'MarkdownRenderer',
+	description: 'Renders markdown text as styled HTML',
+	category: 'display',
+	tags: ['markdown', 'text', 'render', 'prose', 'content']
+};