@ruckc/truss-ol 0.0.0-stage → 1.0.0

package/dist/Map.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { Button } from '@ruckc/truss-ui';
+	import 'ol/ol.css';
+	import type { Basemap, MapMarker, MapSelection } from './types.js';
+
+	let {
+		center = $bindable([0, 20]),
+		zoom = $bindable(2),
+		basemap = 'osm',
+		markers = [],
+		geojson,
+		selected = $bindable(),
+		height = 420,
+		fitOnLoad = true,
+		popup,
+		toolbar,
+		onselect
+	}: {
+		/** [lon, lat] */
+		center?: [number, number];
+		zoom?: number;
+		basemap?: Basemap;
+		markers?: MapMarker[];
+		/** GeoJSON FeatureCollection/Feature. Optional `properties.kind` picks the intent color. */
+		geojson?: object;
+		/** Selected marker id. */
+		selected?: string;
+		height?: number | string;
+		/** Fit the view to markers/features on first load. */
+		fitOnLoad?: boolean;
+		/** Custom popup body for the selected marker. */
+		popup?: Snippet<[marker: MapMarker]>;
+		/** Extra controls appended to the toolbar. */
+		toolbar?: Snippet;
+		onselect?: (s: MapSelection | null) => void;
+	} = $props();
+
+	let el: HTMLDivElement;
+	let popupEl: HTMLDivElement;
+	let ready = $state(false);
+	let ctl: { zoomBy(d: number): void; fit(): void } | undefined;
+	let sync: { markers(): void; geo(): void; base(): void; style(): void; select(): void; view(): void } | undefined;
+	let failed = $state<string>();
+
+	const sel = $derived(markers.find((m) => m.id === selected));
+
+	onMount(() => {
+		let dispose = () => {};
+		let dead = false;
+
+		(async () => {
+			const [
+				{ default: OLMap }, { default: View }, { default: TileLayer }, { default: VectorLayer }, { default: VectorSource },
+				{ default: OSM }, { default: XYZ }, { default: Overlay }, { default: Feature }, { default: Point }, { default: GeoJSON },
+				{ Style, Circle: CircleStyle, Fill, Stroke, Text }, { fromLonLat, toLonLat }, { default: Attribution }, { default: ScaleLine },
+				{ default: Graticule }, { createEmpty, extend, isEmpty }
+			] = await Promise.all([
+				import('ol/Map.js'), import('ol/View.js'), import('ol/layer/Tile.js'), import('ol/layer/Vector.js'), import('ol/source/Vector.js'),
+				import('ol/source/OSM.js'), import('ol/source/XYZ.js'), import('ol/Overlay.js'), import('ol/Feature.js'), import('ol/geom/Point.js'), import('ol/format/GeoJSON.js'),
+				import('ol/style.js'), import('ol/proj.js'), import('ol/control/Attribution.js'), import('ol/control/ScaleLine.js'),
+				import('ol/layer/Graticule.js'), import('ol/extent.js')
+			]);
+			if (dead) return;
+
+			// ---- design tokens → concrete colors for canvas styles
+			let T: Record<string, string> = {};
+			const read = () => {
+				const cs = getComputedStyle(document.documentElement);
+				for (const n of ['primary', 'success', 'warning', 'danger', 'outline', 'surface', 'on-surface', 'surface-container-high', 'outline-variant'])
+					T[n] = cs.getPropertyValue(`--tr-${n}`).trim() || '#888888';
+			};
+			const rgba = (hex: string, a: number) => {
+				const h = hex.replace('#', '');
+				const f = h.length === 3 ? h.replace(/./g, '$&$&') : h.slice(0, 6);
+				const n = parseInt(f, 16);
+				return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
+			};
+			const tone = (kind?: string) => (kind && kind !== 'neutral' ? T[kind] ?? T.primary : kind === 'neutral' ? T.outline : T.primary);
+			read();
+
+			const markerSrc = new VectorSource();
+			const geoSrc = new VectorSource();
+
+			const markerStyle = (f: any) => {
+				const on = f.getId() === selected;
+				const c = tone(f.get('kind'));
+				return [
+					...(on ? [new Style({ image: new CircleStyle({ radius: 14, fill: new Fill({ color: rgba(c, 0.25) }) }) })] : []),
+					new Style({
+						image: new CircleStyle({ radius: on ? 8 : 7, fill: new Fill({ color: c }), stroke: new Stroke({ color: T.surface, width: 2.5 }) }),
+						text: f.get('label')
+							? new Text({ text: f.get('label'), offsetY: 18, font: '600 12px Inter Variable, system-ui, sans-serif', fill: new Fill({ color: T['on-surface'] }), stroke: new Stroke({ color: T.surface, width: 3 }) })
+							: undefined
+					})
+				];
+			};
+			const geoStyle = (f: any) => {
+				const c = tone(f.get('kind'));
+				const t = f.getGeometry()?.getType();
+				if (t === 'Point' || t === 'MultiPoint') return new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({ color: c }), stroke: new Stroke({ color: T.surface, width: 2 }) }) });
+				return new Style({ stroke: new Stroke({ color: c, width: 2.5, lineCap: 'round', lineJoin: 'round' }), fill: new Fill({ color: rgba(c, 0.14) }) });
+			};
+
+			const markerLayer = new VectorLayer({ source: markerSrc, style: markerStyle, zIndex: 20 });
+			const geoLayer = new VectorLayer({ source: geoSrc, style: geoStyle, zIndex: 10 });
+
+			let baseLayers: any[] = [];
+			const view = new View({ center: fromLonLat(center), zoom, minZoom: 1, maxZoom: 19 });
+			const map = new OLMap({
+				target: el,
+				view,
+				layers: [markerLayer, geoLayer],
+				controls: [new Attribution({ collapsible: true }), new ScaleLine({ units: 'metric', minWidth: 64 })],
+				keyboardEventTarget: el
+			});
+
+			const overlay = new Overlay({ element: popupEl, positioning: 'bottom-center', offset: [0, -16], stopEvent: true });
+			map.addOverlay(overlay);
+
+			// ---- sync functions (called from effects)
+			sync = {
+				base() {
+					for (const l of baseLayers) map.removeLayer(l);
+					baseLayers = [];
+					if (basemap === 'osm') baseLayers = [new TileLayer({ source: new OSM(), className: 'tr-basemap', zIndex: 0 })];
+					else if (basemap === 'none') {
+						baseLayers = [new Graticule({ strokeStyle: new Stroke({ color: rgba(T.outline, 0.45), width: 1 }), showLabels: true, wrapX: true, zIndex: 0,
+							latLabelStyle: new Text({ font: '11px Inter Variable, system-ui', fill: new Fill({ color: T.outline }) }),
+							lonLabelStyle: new Text({ font: '11px Inter Variable, system-ui', fill: new Fill({ color: T.outline }) }) })];
+					} else baseLayers = [new TileLayer({ source: new XYZ({ url: basemap.url, attributions: basemap.attribution, maxZoom: basemap.maxZoom ?? 19 }), className: 'tr-basemap', zIndex: 0 })];
+					for (const l of baseLayers) map.addLayer(l);
+				},
+				markers() {
+					markerSrc.clear();
+					markerSrc.addFeatures(markers.map((m) => {
+						const f = new Feature({ geometry: new Point(fromLonLat([m.lon, m.lat])), label: m.label, kind: m.kind });
+						f.setId(m.id);
+						return f;
+					}));
+				},
+				geo() {
+					geoSrc.clear();
+					if (geojson) geoSrc.addFeatures(new GeoJSON().readFeatures(geojson, { featureProjection: 'EPSG:3857' }));
+				},
+				style() { read(); markerLayer.changed(); geoLayer.changed(); this.base(); },
+				select() {
+					markerLayer.changed();
+					const m = markers.find((x) => x.id === selected);
+					overlay.setPosition(m ? fromLonLat([m.lon, m.lat]) : undefined);
+				},
+				view() {
+					const c = toLonLat(view.getCenter()!);
+					if (Math.abs(c[0] - center[0]) > 1e-6 || Math.abs(c[1] - center[1]) > 1e-6) view.animate({ center: fromLonLat(center), duration: 250 });
+					if (Math.abs((view.getZoom() ?? 0) - zoom) > 1e-6) view.animate({ zoom, duration: 250 });
+				}
+			};
+			ctl = {
+				zoomBy: (d) => view.animate({ zoom: (view.getZoom() ?? 0) + d, duration: 200 }),
+				fit: () => {
+					const ext = createEmpty();
+					for (const src of [markerSrc, geoSrc]) { const e = src.getExtent(); if (e) extend(ext, e); }
+					if (!isEmpty(ext)) view.fit(ext, { padding: [56, 56, 56, 56], maxZoom: 12, duration: 300 });
+				}
+			};
+
+			// ---- user interaction
+			map.on('moveend', () => {
+				const c = toLonLat(view.getCenter()!);
+				center = [Number(c[0].toFixed(5)), Number(c[1].toFixed(5))];
+				zoom = Number((view.getZoom() ?? 0).toFixed(2));
+			});
+			map.on('singleclick', (e) => {
+				const hit = map.forEachFeatureAtPixel(e.pixel, (f, l) => ({ f, l }), { hitTolerance: 6 });
+				if (hit && hit.l === markerLayer) {
+					selected = String(hit.f.getId());
+					const m = markers.find((x) => x.id === selected)!;
+					onselect?.({ type: 'marker', marker: m });
+				} else if (hit) {
+					selected = undefined;
+					const { geometry, ...properties } = hit.f.getProperties();
+					onselect?.({ type: 'feature', id: hit.f.getId(), properties });
+				} else { selected = undefined; onselect?.(null); }
+			});
+			map.on('pointermove', (e) => {
+				if (e.dragging) return;
+				el.style.cursor = map.hasFeatureAtPixel(e.pixel, { hitTolerance: 6 }) ? 'pointer' : '';
+			});
+
+			// ---- follow theme (data-theme toggle or OS preference)
+			const restyle = () => sync?.style();
+			const mo = new MutationObserver(restyle);
+			mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+			const mq = matchMedia('(prefers-color-scheme: dark)');
+			mq.addEventListener('change', restyle);
+
+			sync.base(); sync.markers(); sync.geo();
+			if (fitOnLoad && (markers.length || geojson)) ctl.fit();
+			ready = true;
+
+			dispose = () => {
+				mo.disconnect(); mq.removeEventListener('change', restyle);
+				map.setTarget(undefined);
+			};
+		})().catch((e) => (failed = e instanceof Error ? e.message : String(e)));
+
+		return () => { dead = true; dispose(); };
+	});
+
+	$effect(() => { markers; if (ready) { sync?.markers(); sync?.select(); } });
+	$effect(() => { geojson; if (ready) sync?.geo(); });
+	$effect(() => { basemap; if (ready) sync?.base(); });
+	$effect(() => { selected; if (ready) sync?.select(); });
+	$effect(() => { center; zoom; if (ready) sync?.view(); });
+</script>
+
+<div class="trm" style:height={typeof height === 'number' ? `${height}px` : height}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div class="map" bind:this={el} tabindex="0" role="application" aria-label="Map. Arrow keys pan, plus and minus zoom."></div>
+
+	<div class="popup" bind:this={popupEl} hidden={!sel}>
+		{#if sel}
+			<div class="card" role="dialog" aria-label={sel.label ?? 'Location'}>
+				<button type="button" class="x" aria-label="Close" onclick={() => { selected = undefined; onselect?.(null); }}>×</button>
+				{#if popup}{@render popup(sel)}{:else}
+					<div class="t">{sel.label ?? 'Location'}</div>
+					{#if sel.description}<div class="d">{sel.description}</div>{/if}
+					<div class="c">{sel.lat.toFixed(4)}, {sel.lon.toFixed(4)}</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<div class="controls" role="toolbar" aria-label="Map controls">
+		<Button variant="minimal" intent="neutral" size="sm" icon="plus" aria-label="Zoom in" onclick={() => ctl?.zoomBy(1)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="minus" aria-label="Zoom out" onclick={() => ctl?.zoomBy(-1)} />
+		<Button variant="minimal" intent="neutral" size="sm" icon="expand" aria-label="Fit to data" onclick={() => ctl?.fit()} />
+		{#if toolbar}{@render toolbar()}{/if}
+	</div>
+	{#if failed}<div class="err" role="alert">Map failed to load: {failed}</div>{/if}
+</div>
+
+<style>
+	.trm { position: relative; overflow: hidden; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface-container); }
+	.map { position: absolute; inset: 0; outline: none; }
+	.map:focus-visible { box-shadow: inset 0 0 0 2px var(--tr-primary); }
+	.controls { position: absolute; z-index: 3; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 2px; padding: 2px; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-2); }
+	.popup[hidden] { display: none; }
+	.card { position: relative; min-width: 160px; max-width: 260px; padding: 10px 28px 10px 12px; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-3); color: var(--tr-on-surface); font: var(--tr-text-md) var(--tr-font-sans); cursor: default; }
+	.card::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--tr-surface-container-low); border-right: 1px solid var(--tr-outline-variant); border-bottom: 1px solid var(--tr-outline-variant); }
+	.t { font-weight: 700; }
+	.d { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); margin-top: 2px; }
+	.c { margin-top: 6px; color: var(--tr-on-surface-variant); font: var(--tr-text-xs) var(--tr-font-mono); }
+	.x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); font-size: 16px; line-height: 1; cursor: pointer; }
+	.x:hover { background: var(--tr-surface-container-highest); }
+	.err { position: absolute; inset: auto 8px 8px; padding: 8px 12px; border-radius: var(--tr-radius-md); background: var(--tr-danger-container); color: var(--tr-on-danger-container); }
+
+	/* Dark mode: tint raster tiles to the theme */
+	:global(:root[data-theme='dark'] .tr-basemap) { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7); }
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light']) .tr-basemap) { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7); }
+	}
+	/* Restyle OpenLayers' built-in controls with design tokens */
+	:global(.trm .ol-attribution) { right: 8px; bottom: 8px; max-width: 70%; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-pill); font: var(--tr-text-xs) var(--tr-font-sans); color: var(--tr-on-surface-variant); }
+	:global(.trm .ol-attribution ul) { margin: 0; padding: 2px 10px; color: var(--tr-on-surface-variant); text-shadow: none; }
+	:global(.trm .ol-attribution a) { color: var(--tr-primary); }
+	:global(.trm .ol-attribution button) { background: none; color: var(--tr-on-surface-variant); }
+	:global(.trm .ol-attribution button:hover) { background: var(--tr-surface-container-high); }
+	:global(.trm .ol-scale-line) { left: auto; right: 8px; bottom: 36px; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-pill); padding: 2px 8px; }
+	:global(.trm .ol-scale-line-inner) { border-color: var(--tr-on-surface-variant); color: var(--tr-on-surface-variant); font: var(--tr-text-xs) var(--tr-font-sans); }
+</style>

package/dist/index.js

@@ -0,0 +1 @@
+export { default as Map } from './Map.svelte';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,52 @@
 {
-  "name": "@ruckc/truss-ol",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ruckc/truss-ol",
+	"version": "1.0.0",
+	"description": "OpenLayers map styled with Truss UI",
+	"type": "module",
+	"license": "MIT",
+	"scripts": {
+		"package": "svelte-package -i src/lib -o dist"
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.20.0",
+		"@ruckc/truss-ui": "^1.0.0",
+		"ol": "^10.0.0"
+	},
+	"devDependencies": {
+		"ol": "^10.0.0"
+	},
+	"author": "Curtis Ruck",
+	"homepage": "https://truss.ruck.io",
+	"bugs": {
+		"url": "https://github.com/ruckc/truss-ui/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruckc/truss-ui.git",
+		"directory": "packages/map"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"truss",
+		"map",
+		"openlayers"
+	]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.