@walkthru-earth/objex 1.2.1 → 1.3.1

package/dist/components/viewers/StacMosaicViewer.svelte

@@ -0,0 +1,785 @@
+<script lang="ts">
+import { MapboxOverlay } from '@deck.gl/mapbox';
+import { COGLayer, MosaicLayer } from '@developmentseed/deck.gl-geotiff';
+import { DecoderPool, GeoTIFF } from '@developmentseed/geotiff';
+import type maplibregl from 'maplibre-gl';
+import { onDestroy, untrack } from 'svelte';
+import { t } from '../../i18n/index.svelte.js';
+import { queryStacGeoparquetFeatureCollection } from '../../query/stac-geoparquet.js';
+import { getAdapter } from '../../storage/index.js';
+import { buildProviderBaseUrl, type ProviderId } from '../../storage/providers.js';
+import { connectionStore } from '../../stores/connections.svelte.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
+import type { Tab } from '../../types.js';
+import { resolveCloudUrl } from '../../utils/cloud-url.js';
+import {
+	type BandConfig,
+	buildDataTypeLabel,
+	type CustomTileData,
+	clampBounds,
+	cleanupNativeBitmap,
+	createEpsgResolver,
+	DEFAULT_RESCALE,
+	defaultBandConfig,
+	fitCogBounds,
+	HISTOGRAM_BIN_COUNT,
+	normalizeCogGeotiff,
+	type PixelValue,
+	type RescaleConfig,
+	readPixelAtLngLat,
+	resolveProj4Def,
+	selectCogPipeline
+} from '../../utils/cog.js';
+import {
+	buildMosaicSourceMeta,
+	classifyStac,
+	type MosaicSourceMeta,
+	type StacRoutableKind
+} from '../../utils/stac.js';
+import { hydrateStacItems } from '../../utils/stac-hydrate.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
+import CogControls from './CogControls.svelte';
+import MapContainer from './map/MapContainer.svelte';
+
+let { tab, classified }: { tab: Tab; classified?: StacRoutableKind } = $props();
+
+let loading = $state(true);
+let error = $state<string | null>(null);
+let showControls = $state(false);
+let showInfo = $state(false);
+let sourceCount = $state(0);
+let bounds = $state<[number, number, number, number] | undefined>();
+let bandConfig = $state<BandConfig | null>(null);
+let histogram = $state.raw<Uint32Array | null>(null);
+let rescale = $state<RescaleConfig>({ ...DEFAULT_RESCALE });
+let detectedBandCount = $state<number>(3);
+let detectedDataType = $state<string>('');
+let probedBandCount = false;
+
+// ─── Pixel inspection ───────────────────────────────────────────
+let pixelValue = $state<PixelValue | null>(null);
+let pixelSourceId = $state<string | null>(null);
+let inspecting = $state(false);
+let clickHandlerRef: ((e: maplibregl.MapMouseEvent) => void) | null = null;
+// Reuse GeoTIFFs resolved by MosaicLayer's `getSource` callback so click
+// handlers don't trigger a second HTTP fetch. Keyed by `source.id`.
+let geotiffCache = new Map<string, Promise<GeoTIFF>>();
+
+let abortController = new AbortController();
+let mapRef: maplibregl.Map | null = null;
+let overlayRef: MapboxOverlay | null = null;
+let itemsRef = $state.raw<MosaicSourceMeta[]>([]);
+let hasFittedOnce = false;
+let rebuildTimer: number | null = null;
+let lastRebuildAt = 0;
+let layerVersion = 0;
+let presignCache = new Map<string, Promise<string>>();
+let loadGen = 0;
+// Per-source visible-tile histograms. Each sub-COGLayer's `onViewportLoad`
+// writes its own summed-visible histogram here, and the outer aggregator
+// sums across all sources currently contributing. Cleared on resetViewer
+// and on band/config changes to avoid leaking stale distributions.
+let sourceHistograms = new Map<string, Uint32Array>();
+
+// MosaicLayer builds a Flatbush spatial index at construction; deck.gl reuses
+// the existing internal tileset when only props change, so the index never
+// picks up new sources. Minimum interval between rebuilds + version-bumped id
+// forces deck.gl to mount a fresh MosaicLayer with a rebuilt index, at the
+// cost of discarding the tile cache. 750ms balances progressive feedback
+// against cache churn.
+const REBUILD_INTERVAL_MS = 750;
+
+let pool: DecoderPool | null = new DecoderPool();
+const epsgResolver = createEpsgResolver();
+
+$effect(() => {
+	if (!tab) return;
+	tab.id;
+	untrack(() => {
+		resetViewer();
+		if (mapRef) void loadMosaic(mapRef);
+	});
+});
+
+function resetViewer(): void {
+	abortController.abort();
+	abortController = new AbortController();
+	if (rebuildTimer != null) {
+		clearTimeout(rebuildTimer);
+		rebuildTimer = null;
+	}
+	lastRebuildAt = 0;
+	layerVersion = 0;
+	if (mapRef) cleanupNativeBitmap(mapRef);
+	if (mapRef && overlayRef) {
+		try {
+			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
+		} catch {
+			/* map already destroyed */
+		}
+	}
+	overlayRef = null;
+	itemsRef = [];
+	presignCache = new Map();
+	geotiffCache = new Map();
+	sourceHistograms = new Map();
+	loading = true;
+	error = null;
+	sourceCount = 0;
+	bounds = undefined;
+	bandConfig = null;
+	histogram = null;
+	rescale = { ...DEFAULT_RESCALE };
+	hasFittedOnce = false;
+	showControls = false;
+	showInfo = false;
+	detectedBandCount = 3;
+	detectedDataType = '';
+	probedBandCount = false;
+	pixelValue = null;
+	pixelSourceId = null;
+	inspecting = false;
+	if (mapRef) removeClickHandler();
+}
+
+function removeClickHandler(): void {
+	if (mapRef && clickHandlerRef) {
+		mapRef.off('click', clickHandlerRef);
+		clickHandlerRef = null;
+	}
+}
+
+function setupClickHandler(map: maplibregl.Map): void {
+	removeClickHandler();
+	clickHandlerRef = async (e: maplibregl.MapMouseEvent) => {
+		// Find the topmost source whose bbox contains the click. `itemsRef`
+		// is z-ordered by the mosaic so the last matching entry wins, matching
+		// MosaicLayer's tile compositing order.
+		const lng = e.lngLat.lng;
+		const lat = e.lngLat.lat;
+		const items = itemsRef;
+		let hit: MosaicSourceMeta | undefined;
+		for (let i = items.length - 1; i >= 0; i--) {
+			const [w, s, east, n] = items[i].bbox;
+			if (lng >= w && lng <= east && lat >= s && lat <= n) {
+				hit = items[i];
+				break;
+			}
+		}
+		if (!hit) {
+			pixelValue = null;
+			pixelSourceId = null;
+			return;
+		}
+		inspecting = true;
+		try {
+			// Pull from cache; if absent (user clicked before any tile fetched
+			// this source), kick off a fresh load and cache it for later.
+			let geotiffPromise = geotiffCache.get(hit.id);
+			if (!geotiffPromise) {
+				geotiffPromise = (async () => {
+					const url = await presignHref(hit.href);
+					const g = await GeoTIFF.fromUrl(url);
+					normalizeCogGeotiff(g);
+					return g;
+				})();
+				geotiffCache.set(hit.id, geotiffPromise);
+			}
+			const geotiff = await geotiffPromise;
+			const proj4Def = await resolveProj4Def(geotiff.crs, abortController.signal);
+			const result = await readPixelAtLngLat(
+				geotiff,
+				lng,
+				lat,
+				proj4Def,
+				pool,
+				abortController.signal
+			);
+			pixelValue = result;
+			pixelSourceId = hit.id;
+		} catch {
+			pixelValue = null;
+			pixelSourceId = null;
+		} finally {
+			inspecting = false;
+		}
+	};
+	map.on('click', clickHandlerRef);
+}
+
+function onMapReady(map: maplibregl.Map): void {
+	mapRef = map;
+	setupClickHandler(map);
+	void loadMosaic(map);
+}
+
+function extractConnectionKey(href: string): string | null {
+	const conn = tab.connectionId ? connectionStore.getById(tab.connectionId) : undefined;
+	if (!conn) return null;
+	const base = buildProviderBaseUrl(
+		conn.provider as ProviderId,
+		conn.endpoint,
+		conn.bucket,
+		conn.region
+	).replace(/\/$/, '');
+	if (!base) return null;
+	const prefix = `${base}/`;
+	if (!href.startsWith(prefix)) return null;
+	return href.slice(prefix.length);
+}
+
+function presignHref(href: string): Promise<string> {
+	let cached = presignCache.get(href);
+	if (!cached) {
+		// Convert cloud-protocol hrefs (s3://, gs://) to HTTPS before anything
+		// else. stac-geoparquet catalogs like source.coop's aef_index store
+		// absolute `s3://...` asset hrefs, and GeoTIFF.fromUrl / fetch cannot
+		// reach them. `resolveCloudUrl` is a no-op for already-https URLs.
+		const normalized = resolveCloudUrl(href);
+		if (/^https?:\/\//i.test(normalized)) {
+			// Absolute URLs that belong to the tab's own bucket still need SigV4
+			// presigning on private buckets (GCS/S3), `new URL(rel, base)` strips
+			// the base's query string when absolutizing asset hrefs, so the
+			// signature is lost and the bare URL 403s.
+			const key = extractConnectionKey(normalized);
+			if (key !== null) {
+				cached = buildHttpsUrlAsync({ ...tab, path: key } as Tab).catch(() => normalized);
+			} else {
+				cached = Promise.resolve(normalized);
+			}
+		} else {
+			cached = buildHttpsUrlAsync({ ...tab, path: normalized } as Tab).catch(() => normalized);
+		}
+		presignCache.set(href, cached);
+	}
+	return cached;
+}
+
+function extendBounds(
+	current: [number, number, number, number] | null,
+	items: MosaicSourceMeta[]
+): [number, number, number, number] | null {
+	if (items.length === 0) return current;
+	let [w, s, e, n] = current ?? items[0].bbox;
+	for (const item of items) {
+		w = Math.min(w, item.bbox[0]);
+		s = Math.min(s, item.bbox[1]);
+		e = Math.max(e, item.bbox[2]);
+		n = Math.max(n, item.bbox[3]);
+	}
+	const clamped = clampBounds({ west: w, south: s, east: e, north: n });
+	return [clamped.west, clamped.south, clamped.east, clamped.north];
+}
+
+function scheduleLayerRebuild(map: maplibregl.Map, signal: AbortSignal): void {
+	if (rebuildTimer != null || signal.aborted) return;
+	const elapsed = performance.now() - lastRebuildAt;
+	const delay = lastRebuildAt === 0 ? 0 : Math.max(0, REBUILD_INTERVAL_MS - elapsed);
+	rebuildTimer = window.setTimeout(() => {
+		rebuildTimer = null;
+		if (signal.aborted) return;
+		lastRebuildAt = performance.now();
+		buildOrUpdateLayer(map, signal);
+	}, delay);
+}
+
+function flushPendingRebuild(map: maplibregl.Map, signal: AbortSignal): void {
+	if (rebuildTimer != null) {
+		clearTimeout(rebuildTimer);
+		rebuildTimer = null;
+	}
+	if (signal.aborted) return;
+	lastRebuildAt = performance.now();
+	buildOrUpdateLayer(map, signal);
+}
+
+async function loadMosaic(map: maplibregl.Map): Promise<void> {
+	const gen = ++loadGen;
+	const signal = abortController.signal;
+	try {
+		const adapter = getAdapter(tab.source, tab.connectionId);
+		const ext = (tab.extension ?? '').toLowerCase();
+
+		// stac-geoparquet path: DuckDB materializes the full FeatureCollection
+		// in one query, so hydration is a single batch (no link walking).
+		if (ext === 'parquet' || ext === 'geoparquet') {
+			const fc = await queryStacGeoparquetFeatureCollection(tab, tab.connectionId ?? '', {
+				signal,
+				limit: 2000
+			});
+			if (gen !== loadGen || signal.aborted) return;
+			if (fc.features.length === 0) {
+				error = t('map.mosaicEmpty');
+				loading = false;
+				return;
+			}
+			await ingestParquetFeatures(map, fc.features, signal, gen);
+			return;
+		}
+
+		let kind: StacRoutableKind;
+		if (classified && classified.kind !== 'none') {
+			kind = classified;
+		} else {
+			const data = await adapter.read(tab.path, undefined, undefined, signal);
+			if (gen !== loadGen || signal.aborted) return;
+			const parsed = JSON.parse(new TextDecoder().decode(data));
+			kind = classifyStac(parsed);
+		}
+		if (kind.kind === 'none') {
+			error = t('map.mosaicEmpty');
+			loading = false;
+			return;
+		}
+
+		let runningBounds: [number, number, number, number] | null = null;
+		// Resolve tab.path to an absolute URL so relative hrefs in the manifest
+		// (e.g. `./item.json`) resolve against the real parent directory. For
+		// bucket-connection tabs, tab.path is a bucket-relative key and would not
+		// be a valid URL base.
+		const baseHref = await buildHttpsUrlAsync(tab);
+		if (gen !== loadGen || signal.aborted) return;
+
+		await hydrateStacItems(kind, baseHref, adapter, {
+			signal,
+			concurrency: 12,
+			limit: 2000,
+			urlToKey: extractConnectionKey,
+			onBatch: (batch) => {
+				if (gen !== loadGen || signal.aborted) return;
+				const accepted: MosaicSourceMeta[] = [];
+				for (const item of batch) {
+					const normalized = buildMosaicSourceMeta(item);
+					if (normalized) accepted.push(normalized);
+				}
+				if (accepted.length === 0) return;
+
+				for (const src of accepted) presignHref(src.href);
+
+				itemsRef = [...itemsRef, ...accepted];
+				sourceCount = itemsRef.length;
+
+				runningBounds = extendBounds(runningBounds, accepted);
+				// Only fit the camera once, on the first batch with a valid bbox.
+				// Re-assigning `bounds` on later batches would cause MapContainer
+				// to re-fly every 12-item batch, making the map unusable until
+				// hydration completes.
+				if (!hasFittedOnce && runningBounds) {
+					bounds = runningBounds;
+					fitCogBounds(map, {
+						west: runningBounds[0],
+						south: runningBounds[1],
+						east: runningBounds[2],
+						north: runningBounds[3]
+					});
+					hasFittedOnce = true;
+				}
+
+				if (!bandConfig) bandConfig = defaultBandConfig(detectedBandCount, 1);
+				scheduleLayerRebuild(map, signal);
+				loading = false;
+			}
+		});
+
+		if (gen !== loadGen) return;
+		if (itemsRef.length === 0 && !signal.aborted) {
+			error = t('map.mosaicNoAssets');
+			loading = false;
+			return;
+		}
+		// Final rebuild once hydration completes so every source is in the
+		// index, even if the last batch landed inside the throttle window.
+		if (!signal.aborted) flushPendingRebuild(map, signal);
+	} catch (err) {
+		if (gen !== loadGen) return;
+		if (signal.aborted) return;
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		error = err instanceof Error ? err.message : String(err);
+		loading = false;
+	}
+}
+
+/** Single-batch ingestion path for stac-geoparquet (already materialized). */
+async function ingestParquetFeatures(
+	map: maplibregl.Map,
+	features: import('../../utils/stac.js').StacItem[],
+	signal: AbortSignal,
+	gen: number
+): Promise<void> {
+	const accepted: MosaicSourceMeta[] = [];
+	for (const item of features) {
+		const normalized = buildMosaicSourceMeta(item);
+		if (normalized) accepted.push(normalized);
+	}
+	if (gen !== loadGen || signal.aborted) return;
+	if (accepted.length === 0) {
+		error = t('map.mosaicNoAssets');
+		loading = false;
+		return;
+	}
+	for (const src of accepted) presignHref(src.href);
+
+	itemsRef = accepted;
+	sourceCount = itemsRef.length;
+
+	let runningBounds: [number, number, number, number] | null = null;
+	runningBounds = extendBounds(runningBounds, accepted);
+	if (runningBounds) {
+		bounds = runningBounds;
+		fitCogBounds(map, {
+			west: runningBounds[0],
+			south: runningBounds[1],
+			east: runningBounds[2],
+			north: runningBounds[3]
+		});
+		hasFittedOnce = true;
+	}
+
+	if (!bandConfig) bandConfig = defaultBandConfig(3, 1);
+	loading = false;
+	flushPendingRebuild(map, signal);
+}
+
+function buildOrUpdateLayer(map: maplibregl.Map, signal: AbortSignal): void {
+	const snapshotSources = $state.snapshot(itemsRef) as MosaicSourceMeta[];
+	const bc = bandConfig ? { ...bandConfig } : null;
+	const rs = { ...rescale };
+
+	const version = ++layerVersion;
+	const layer = new MosaicLayer<MosaicSourceMeta, GeoTIFF>({
+		id: `mosaic-${tab.id}-v${version}`,
+		sources: snapshotSources,
+		maxCacheSize: 8,
+		getSource: async (source, opts) => {
+			// Reuse in-flight / resolved GeoTIFFs across MosaicLayer rebuilds
+			// (version bumps) and pixel-click handlers; otherwise every layer
+			// rebuild would re-fetch every source's header.
+			const cached = geotiffCache.get(source.id);
+			if (cached) return cached.catch(() => undefined as unknown as GeoTIFF);
+			const promise = (async () => {
+				const url = await presignHref(source.href);
+				const geotiff = await GeoTIFF.fromUrl(url);
+				normalizeCogGeotiff(geotiff);
+				return geotiff;
+			})();
+			geotiffCache.set(source.id, promise);
+			let geotiff: GeoTIFF;
+			try {
+				geotiff = await promise;
+			} catch {
+				// Swallow per-source fetch/decode failures so deck.gl's TileLayer
+				// gets `data: undefined` (renderSource returns null for it) instead
+				// of a rejected promise, which surfaces as "v is null" during the
+				// TileLayer update when a mosaic covers hundreds of unreachable
+				// sources (e.g. the 302k-item aef_index global catalog).
+				return undefined as unknown as GeoTIFF;
+			}
+			if (opts.signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+			// Seed band config from the first COG that resolves so the UI and
+			// the pipeline match the actual raster (e.g. 4-band NAIP RGB+NIR),
+			// rather than the hardcoded 3-band default. Subsequent sources are
+			// assumed to share structure within a mosaic.
+			if (!probedBandCount) {
+				probedBandCount = true;
+				const count = geotiff.count ?? 3;
+				const sf = geotiff.cachedTags.sampleFormat?.[0] ?? 1;
+				const bps = geotiff.cachedTags.bitsPerSample?.[0] ?? 8;
+				detectedBandCount = count;
+				detectedDataType = buildDataTypeLabel(sf, bps);
+				const nextConfig = defaultBandConfig(count, sf);
+				bandConfig = nextConfig;
+				if (mapRef) scheduleLayerRebuild(mapRef, signal);
+			}
+			return geotiff;
+		},
+		renderSource: (source, { data }) => {
+			if (!data) return null;
+			const customProps = selectCogPipeline(data, { bandConfig: bc, rescale: rs });
+			// Cast: `onViewportLoad` is forwarded by our pnpm patch to the
+			// inner TileLayer, but COGLayer's generated .d.ts does not expose
+			// it in `COGLayerProps`. Use `any` for the constructor arg so we
+			// can pass the extra prop without polluting the library types.
+			// biome-ignore lint/suspicious/noExplicitAny: upstream prop not yet in types
+			const cogProps: any = {
+				id: `mosaic-${tab.id}-v${version}-${source.id}`,
+				geotiff: data,
+				pool: pool ?? undefined,
+				epsgResolver,
+				signal,
+				...customProps,
+				// Viewport-scoped histogram per sub-COG. Sub-COGLayer fires this
+				// with the currently-visible tiles of THIS source at the active
+				// overview. We sum across all sources in `aggregateSources`.
+				onViewportLoad: (visibleTiles: unknown) => {
+					recordSourceHistogram(
+						source.id,
+						visibleTiles as ReadonlyArray<{ content?: unknown } | null | undefined>
+					);
+				}
+			};
+			return new COGLayer(cogProps);
+		}
+	});
+
+	if (overlayRef) {
+		overlayRef.setProps({ layers: [layer] });
+		return;
+	}
+
+	const overlay = new MapboxOverlay({
+		interleaved: false,
+		layers: [layer],
+		onError: (err: Error) => {
+			if (signal.aborted) return;
+			if (!error) {
+				error = err?.message || String(err);
+				loading = false;
+			}
+		}
+	});
+	overlayRef = overlay;
+	map.addControl(overlay as unknown as maplibregl.IControl);
+	loading = false;
+}
+
+function handleConfigChange(next: BandConfig): void {
+	bandConfig = next;
+	// Histogram is only emitted by the single-band CPU baker. Reset on every
+	// mode/band change so (a) switching to RGB hides stale bars under the
+	// rescale slider and (b) a new single-band selection does not paint on
+	// top of the previous band's distribution.
+	histogram = null;
+	sourceHistograms.clear();
+	if (!mapRef) return;
+	scheduleLayerRebuild(mapRef, abortController.signal);
+}
+
+/**
+ * Record one sub-COG's viewport-scoped histogram and re-sum across all
+ * sources currently contributing. COG-native: each source only decodes the
+ * overview tiles covering its part of the viewport, so the union across
+ * sources is exactly the pixels the viewer sees at this zoom.
+ */
+function recordSourceHistogram(
+	sourceId: string,
+	visibleTiles: ReadonlyArray<{ content?: unknown } | null | undefined>
+): void {
+	if (!visibleTiles || visibleTiles.length === 0) {
+		if (sourceHistograms.delete(sourceId)) aggregateSources();
+		return;
+	}
+	const summed = new Uint32Array(HISTOGRAM_BIN_COUNT);
+	let found = false;
+	for (const tile of visibleTiles) {
+		// COGLayer's `_getTileData` wraps our baker output as `{data, forward-
+		// Transform, inverseTransform}`, so the per-tile histogram lives at
+		// `content.data.histogram`. Fall back to `content.histogram` if the
+		// library ever stops wrapping.
+		const content = tile?.content as
+			| { data?: CustomTileData; histogram?: Uint32Array }
+			| null
+			| undefined;
+		const bins = content?.data?.histogram ?? content?.histogram;
+		if (!bins || bins.length !== HISTOGRAM_BIN_COUNT) continue;
+		for (let i = 0; i < HISTOGRAM_BIN_COUNT; i++) summed[i] += bins[i];
+		found = true;
+	}
+	if (found) sourceHistograms.set(sourceId, summed);
+	else sourceHistograms.delete(sourceId);
+	aggregateSources();
+}
+
+function aggregateSources(): void {
+	if (sourceHistograms.size === 0) {
+		histogram = null;
+		return;
+	}
+	const summed = new Uint32Array(HISTOGRAM_BIN_COUNT);
+	for (const bins of sourceHistograms.values()) {
+		for (let i = 0; i < HISTOGRAM_BIN_COUNT; i++) summed[i] += bins[i];
+	}
+	histogram = summed;
+}
+
+function handleRescaleChange(next: RescaleConfig): void {
+	rescale = next;
+	if (!mapRef) return;
+	scheduleLayerRebuild(mapRef, abortController.signal);
+}
+
+function cleanup(): void {
+	abortController.abort();
+	if (rebuildTimer != null) {
+		clearTimeout(rebuildTimer);
+		rebuildTimer = null;
+	}
+	if (mapRef) removeClickHandler();
+	if (mapRef && overlayRef) {
+		try {
+			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
+		} catch {
+			/* already removed */
+		}
+	}
+	if (mapRef) cleanupNativeBitmap(mapRef);
+	mapRef = null;
+	overlayRef = null;
+	itemsRef = [];
+	presignCache.clear();
+	geotiffCache.clear();
+	const maybeDestroy = pool as unknown as { destroy?: () => void; terminate?: () => void } | null;
+	if (maybeDestroy?.destroy) {
+		try {
+			maybeDestroy.destroy();
+		} catch {
+			/* ignore */
+		}
+	} else if (maybeDestroy?.terminate) {
+		try {
+			maybeDestroy.terminate();
+		} catch {
+			/* ignore */
+		}
+	}
+	pool = null;
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+onDestroy(cleanup);
+</script>
+
+<div class="relative flex h-full overflow-hidden">
+	<div class="flex-1">
+		<MapContainer {onMapReady} {bounds} />
+	</div>
+
+	<div class="pointer-events-none absolute left-2 top-2 z-10 flex flex-col gap-1">
+		{#if loading}
+			<div class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm">
+				{t('map.loadingCog')}
+			</div>
+		{/if}
+		{#if sourceCount > 0}
+			<div class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm">
+				{sourceCount === 1
+					? t('stac.mosaicSourcesOne', { count: sourceCount })
+					: t('stac.mosaicSourcesOther', { count: sourceCount })}
+			</div>
+		{/if}
+		{#if error}
+			<div class="pointer-events-auto max-w-sm rounded bg-red-900/80 px-2 py-1 text-xs text-red-200">
+				{error}
+			</div>
+		{/if}
+	</div>
+
+	{#if sourceCount > 0 && bandConfig}
+		<div class="absolute right-2 top-2 z-10 flex gap-1">
+			<button
+				class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm hover:bg-card"
+				class:ring-1={showControls}
+				class:ring-primary={showControls}
+				onclick={() => {
+					showControls = !showControls;
+					if (showControls) showInfo = false;
+				}}
+			>
+				{t('cog.style')}
+			</button>
+			<button
+				class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm hover:bg-card"
+				class:ring-1={showInfo}
+				class:ring-primary={showInfo}
+				onclick={() => {
+					showInfo = !showInfo;
+					if (showInfo) showControls = false;
+				}}
+			>
+				{t('map.info')}
+			</button>
+		</div>
+
+		{#if showControls}
+			<CogControls
+				bandCount={detectedBandCount}
+				{bandConfig}
+				onConfigChange={handleConfigChange}
+				{rescale}
+				rescaleApplicable={bandConfig?.mode === 'single'}
+				onRescaleChange={handleRescaleChange}
+				{histogram}
+			/>
+		{/if}
+
+		{#if showInfo}
+			<div
+				class="absolute right-2 top-10 z-10 max-h-[70vh] w-64 overflow-auto rounded bg-card/90 p-3 text-xs text-card-foreground backdrop-blur-sm"
+			>
+				<h3 class="mb-2 font-medium">{t('stac.mosaicInfo')}</h3>
+				<dl class="space-y-1.5">
+					<dt class="text-muted-foreground">{t('stac.mosaicSourcesLabel')}</dt>
+					<dd class="tabular-nums">{sourceCount}</dd>
+					<dt class="text-muted-foreground">{t('mapInfo.bands')}</dt>
+					<dd>
+						{detectedBandCount}{detectedDataType ? ` (${detectedDataType})` : ''}
+					</dd>
+					{#if bounds}
+						<dt class="text-muted-foreground">{t('mapInfo.bounds')}</dt>
+						<dd>
+							W {bounds[0].toFixed(4)}, S {bounds[1].toFixed(4)}<br />
+							E {bounds[2].toFixed(4)}, N {bounds[3].toFixed(4)}
+						</dd>
+					{/if}
+				</dl>
+			</div>
+		{/if}
+	{/if}
+
+	{#if pixelValue}
+		<div
+			class="absolute bottom-2 left-2 z-10 rounded bg-card/90 p-2.5 text-xs text-card-foreground backdrop-blur-sm"
+		>
+			<div class="mb-1 flex items-center justify-between gap-3">
+				<span class="font-medium">{t('cog.pixelValue')}</span>
+				<button
+					class="text-muted-foreground hover:text-card-foreground"
+					onclick={() => {
+						pixelValue = null;
+						pixelSourceId = null;
+					}}
+				>
+					&times;
+				</button>
+			</div>
+			<div class="space-y-0.5 text-muted-foreground">
+				<div>{pixelValue.lat.toFixed(6)}&deg;, {pixelValue.lng.toFixed(6)}&deg;</div>
+				<div class="text-[10px]">px ({pixelValue.col}, {pixelValue.row})</div>
+				{#if pixelSourceId}
+					<div class="truncate text-[10px]" title={pixelSourceId}>{pixelSourceId}</div>
+				{/if}
+			</div>
+			<div class="mt-1.5 space-y-0.5">
+				{#each pixelValue.values as val, i}
+					<div class="flex justify-between gap-2">
+						<span class="text-muted-foreground">{t('cog.band')} {i + 1}</span>
+						<span class="font-mono tabular-nums">
+							{Number.isInteger(val) ? val : val.toFixed(4)}
+						</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if inspecting}
+		<div
+			class="pointer-events-none absolute bottom-2 left-2 z-10 rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm"
+		>
+			{t('cog.reading')}
+		</div>
+	{/if}
+</div>