@walkthru-earth/objex 1.3.0 → 1.4.0

package/dist/components/viewers/CogViewer.svelte

@@ -2,6 +2,13 @@
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import { COGLayer } from '@developmentseed/deck.gl-geotiff';
 import { DecoderPool, GeoTIFF } from '@developmentseed/geotiff';
+import {
+	attachPixelInspector,
+	type ChannelComposite,
+	type CogAsset,
+	smokeTestHref,
+	syntheticSelfAsset
+} from '@walkthru-earth/objex-utils';
 import type maplibregl from 'maplibre-gl';
 import { onDestroy, untrack } from 'svelte';
 import { t } from '../../i18n/index.svelte.js';
@@ -9,26 +16,39 @@ import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types.js';
 import {
 	type BandConfig,
+	buildCustomRenderTile,
 	buildDataTypeLabel,
 	type CogInfo,
+	type ConfigurableTileLoader,
+	type CustomTileData,
 	clampBounds,
 	cleanupNativeBitmap,
+	createConfigurableGetTileData,
 	createEpsgResolver,
+	DEFAULT_NODATA_CONFIG,
 	DEFAULT_RESCALE,
 	defaultBandConfig,
 	fitCogBounds,
+	HISTOGRAM_BIN_COUNT,
 	inspectCogTags,
+	loadGeoTIFF,
+	mapResolutionMetersPerPixel,
+	type NodataConfig,
 	needsCustomPipelineForConfig,
 	normalizeCogGeotiff,
 	type PixelValue,
 	type RescaleConfig,
+	readGdalNodata,
 	readPixelAtLngLat,
 	renderNonTiledBitmap,
 	resolveProj4Def,
-	selectCogPipeline
+	selectCogPipeline,
+	selectOverviewForResolution
 } from '../../utils/cog.js';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { seedRescaleFromGeotiff } from '../../utils/cog-histogram.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 import CogControls from './CogControls.svelte';
+import PixelInspectorPanel, { type PixelInspectorRow } from './cog/PixelInspectorPanel.svelte';
 import MapContainer from './map/MapContainer.svelte';
 
 // ─── State ───────────────────────────────────────────────────────
@@ -41,24 +61,69 @@ let showControls = $state(false);
 let bounds = $state<[number, number, number, number] | undefined>();
 let cogInfo = $state<CogInfo | null>(null);
 let bandConfig = $state<BandConfig | null>(null);
+let resolvedHrefForControls = $state<string | null>(null);
+let probedBandCount = $state<number | null>(null);
+
+const cogControlsAssets = $derived.by<CogAsset[]>(() => {
+	const href = resolvedHrefForControls;
+	if (!href) return [];
+	return [syntheticSelfAsset(href, probedBandCount ?? undefined)];
+});
+
+const cogControlsComposite = $derived.by<ChannelComposite>(() => {
+	const bc = bandConfig;
+	if (!bc) {
+		return {
+			r: { assetKey: 'self', bandIndex: 0 },
+			g: { assetKey: 'self', bandIndex: 0 },
+			b: { assetKey: 'self', bandIndex: 0 }
+		};
+	}
+	if (bc.mode === 'rgb') {
+		return {
+			r: { assetKey: 'self', bandIndex: bc.rBand ?? 0 },
+			g: { assetKey: 'self', bandIndex: bc.gBand ?? 0 },
+			b: { assetKey: 'self', bandIndex: bc.bBand ?? 0 }
+		};
+	}
+	const i = bc.band ?? 0;
+	return {
+		r: { assetKey: 'self', bandIndex: i },
+		g: { assetKey: 'self', bandIndex: i },
+		b: { assetKey: 'self', bandIndex: i }
+	};
+});
 let histogram = $state.raw<Uint32Array | null>(null);
 let histogramTick = $state(0);
 let rescale = $state<RescaleConfig>({ ...DEFAULT_RESCALE });
+// User-facing nodata override (Auto/Value/Off). Auto resolves at read time
+// from the GeoTIFF's GDAL_NODATA tag, surfaced as a hint pill in CogControls.
+let nodataConfig = $state<NodataConfig>({ ...DEFAULT_NODATA_CONFIG });
+let autoNodata = $state<number | null>(null);
 // Palette-indexed COGs render through the library's Colormap module; a GPU
 // rescale at that stage is cosmetic and would confuse the legend. Keep the
 // slider hidden when a ColorMap tag is present.
 let isPaletteIndexed = $state(false);
 let pixelValue = $state<PixelValue | null>(null);
 let inspecting = $state(false);
+// Storage smoke-test result for the primary asset href. Inspired by
+// lazycogs `_smoketest_store`, surfaces auth / CORS / bucket failures at
+// open time as a small amber pill, never blocks the layer mount.
+let smokeWarning = $state<string | null>(null);
+let smokeProbed = false;
 
 let abortController = new AbortController();
 let mapRef: maplibregl.Map | null = null;
 let overlayRef: MapboxOverlay | null = null;
 let geotiffRef: GeoTIFF | null = null;
+// Identity-stable tile loader for the configurable CPU path. Lives for the
+// duration of the current GeoTIFF identity, so deck.gl's TileLayer cache
+// survives band/ramp swaps (a fresh getTileData reference would invalidate it).
+let tileLoaderRef: ConfigurableTileLoader | null = null;
 let proj4DefRef: string | null = null;
 let sampleFormatRef = 1;
 let isTiledRef = true;
-let clickHandlerRef: ((e: maplibregl.MapMouseEvent) => void) | null = null;
+let detachInspector: (() => void) | null = null;
 let resolvedHttpsUrl: string | null = null;
 // LinearRescale operates on a 0..1 scalar. Two cases expose a meaningful
 // slider: (1) the library-default uint RGB pipeline (scales `color.rgb`
@@ -109,8 +174,11 @@ $effect(() => {
 		}
 		overlayRef = null;
 		geotiffRef = null;
+		tileLoaderRef = null;
 		proj4DefRef = null;
 		resolvedHttpsUrl = null;
+		resolvedHrefForControls = null;
+		probedBandCount = null;
 		loading = true;
 		error = null;
 		cogInfo = null;
@@ -118,8 +186,12 @@ $effect(() => {
 		histogram = null;
 		histogramTick = 0;
 		rescale = { ...DEFAULT_RESCALE };
+		nodataConfig = { ...DEFAULT_NODATA_CONFIG };
+		autoNodata = null;
 		isPaletteIndexed = false;
 		pixelValue = null;
+		smokeWarning = null;
+		smokeProbed = false;
 		bounds = undefined;
 		hasFittedOnce = false;
 		showControls = false;
@@ -138,34 +210,32 @@ function onMapReady(map: maplibregl.Map) {
 // ─── Click handler for pixel inspection ──────────────────────────
 
 function removeClickHandler() {
-	if (mapRef && clickHandlerRef) {
-		mapRef.off('click', clickHandlerRef);
-		clickHandlerRef = null;
+	if (detachInspector) {
+		detachInspector();
+		detachInspector = null;
 	}
 }
 
 function setupClickHandler(map: maplibregl.Map) {
 	removeClickHandler();
-	clickHandlerRef = async (e: maplibregl.MapMouseEvent) => {
-		if (!geotiffRef) return;
-		inspecting = true;
-		try {
-			const result = await readPixelAtLngLat(
-				geotiffRef,
-				e.lngLat.lng,
-				e.lngLat.lat,
-				proj4DefRef,
-				pool,
-				abortController.signal
-			);
+	detachInspector = attachPixelInspector<PixelValue>(map, {
+		probe: async ({ lng, lat, signal }) => {
+			if (!geotiffRef) return null;
+			// matches overview shown on screen
+			const targetRes = mapResolutionMetersPerPixel(map.getZoom(), lat);
+			const overview = selectOverviewForResolution(geotiffRef, targetRes);
+			return readPixelAtLngLat(geotiffRef, lng, lat, proj4DefRef, pool, signal, {
+				overview
+			});
+		},
+		onStart: () => {
+			inspecting = true;
+		},
+		onResult: (result) => {
 			pixelValue = result;
-		} catch {
-			pixelValue = null;
-		} finally {
 			inspecting = false;
 		}
-	};
-	map.on('click', clickHandlerRef);
+	});
 }
 
 // ─── Core load function ──────────────────────────────────────────
@@ -177,12 +247,30 @@ async function loadCog(map: maplibregl.Map) {
 		const url = await buildHttpsUrlAsync(tab);
 		if (signal.aborted) return;
 		resolvedHttpsUrl = url;
+		resolvedHrefForControls = url;
+
+		// One-shot storage smoke-test. lazycogs-style probe surfaces auth /
+		// CORS / bucket failures at open time as an amber pill, never blocks
+		// the layer mount. Aborts via the viewer's existing controller.
+		if (!smokeProbed) {
+			smokeProbed = true;
+			void (async () => {
+				try {
+					const result = await smokeTestHref(url, signal);
+					if (signal.aborted) return;
+					if (!result.ok) smokeWarning = result.reason;
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') return;
+					smokeWarning = err instanceof Error ? err.message : String(err);
+				}
+			})();
+		}
 
 		// Pre-flight: read first IFD to check if tiled (single range request).
 		let isTiled = true;
 		let preflightGeotiff: GeoTIFF | undefined;
 		try {
-			preflightGeotiff = await GeoTIFF.fromUrl(url);
+			preflightGeotiff = await loadGeoTIFF(url);
 			if (signal.aborted) return;
 			isTiled = preflightGeotiff.isTiled;
 
@@ -231,6 +319,22 @@ async function loadCog(map: maplibregl.Map) {
 
 			// Set default band config
 			bandConfig = defaultBandConfig(preflightGeotiff.count, sampleFormatRef);
+			probedBandCount = preflightGeotiff.count;
+
+			// Surface GDAL_NODATA + a shader-space rescale seed (when present) so
+			// the nodata hint pill and rescale slider have meaningful defaults
+			// before the first tile decodes — matches source-cooperative/cog-viewer
+			// UX. The slider operates in normalized [0, 1] shader space, so
+			// `seedRescaleFromGeotiff` divides GDAL STATISTICS_MIN/MAX by the
+			// sample-format factor and falls back to a p2/p98 histogram + the
+			// bit-depth-aware default.
+			autoNodata = readGdalNodata(preflightGeotiff);
+			try {
+				rescale = await seedRescaleFromGeotiff(preflightGeotiff, { signal });
+			} catch {
+				// fall through, defaults remain
+			}
+			if (signal.aborted) return;
 		}
 
 		if (!isTiled && preflightGeotiff) {
@@ -265,32 +369,49 @@ async function loadCog(map: maplibregl.Map) {
 
 // ─── Build & add COGLayer ────────────────────────────────────────
 
-function buildAndAddLayer(
+// Build the pipeline props (getTileData/renderTile/etc) for the current state.
+// When the configurable CPU path applies, the tile loader is created once per
+// GeoTIFF identity and its `getTileData` reference is reused across rebuilds so
+// deck.gl's TileLayer cache survives band/ramp swaps. Only `renderTile` and
+// downstream uniforms vary across style changes.
+function buildPipelineProps(geotiff: GeoTIFF | undefined): Record<string, unknown> {
+	if (!geotiff || !bandConfig) {
+		return geotiff ? selectCogPipeline(geotiff, { bandConfig, rescale }) : {};
+	}
+	if (needsCustomPipelineForConfig(geotiff, bandConfig)) {
+		if (!tileLoaderRef) {
+			tileLoaderRef = createConfigurableGetTileData(geotiff, bandConfig);
+		} else {
+			tileLoaderRef.updateConfig(bandConfig);
+		}
+		return {
+			getTileData: tileLoaderRef.getTileData,
+			renderTile: buildCustomRenderTile(bandConfig, rescale)
+		};
+	}
+	// Library-default or rescaled-only path. The loader (if previously seeded)
+	// is harmless to keep, but the upcoming rebuild won't reference it.
+	return selectCogPipeline(geotiff, { bandConfig, rescale });
+}
+
+function buildCogLayer(
 	map: maplibregl.Map,
 	preflightGeotiff: GeoTIFF | undefined,
 	signal: AbortSignal
-) {
+): COGLayer {
 	// Pick the library-default or one of three custom pipelines. Empty when the
 	// library-default uint path runs unchanged.
-	const customProps = preflightGeotiff
-		? selectCogPipeline(preflightGeotiff, {
-				bandConfig,
-				rescale,
-				onHistogram: (bins) => {
-					// Copy once so the derived UI sees an immutable snapshot
-					// and the accumulating worker buffer is not observed mid-mutation.
-					histogram = new Uint32Array(bins);
-					histogramTick++;
-				}
-			})
-		: {};
+	const customProps = buildPipelineProps(preflightGeotiff);
 
 	// Apply upstream-bug workarounds in place (overview filter, 4326 bbox clamp).
 	if (preflightGeotiff) normalizeCogGeotiff(preflightGeotiff);
 
 	const cogInput = preflightGeotiff ?? resolvedHttpsUrl ?? '';
 
-	const layer = new COGLayer({
+	// Cast: `onViewportLoad` is forwarded natively by COGLayer's RasterTileLayer
+	// base in 0.7.0 (deck.gl-raster PR #546), but COGLayer's generated .d.ts does
+	// not surface it.
+	const cogProps: any = {
 		// Stable id per tab so rebuilds on band/style change don't force deck.gl
 		// to treat this as a brand-new layer and drop cached tile state.
 		id: `cog-layer-${tab.id}`,
@@ -299,6 +420,15 @@ function buildAndAddLayer(
 		epsgResolver,
 		signal,
 		...customProps,
+		// COG-native histogram: sum `content.histogram` over tiles currently
+		// visible in the viewport. Fires after every pan/zoom settles and
+		// reuses deck.gl's tile cache for free, cached tiles still carry
+		// their per-tile histogram so no rebake is needed on revisit.
+		onViewportLoad: (visibleTiles: unknown) => {
+			aggregateVisibleHistogram(
+				visibleTiles as ReadonlyArray<{ content?: unknown } | null | undefined>
+			);
+		},
 		onGeoTIFFLoad: (
 			loadedTiff: GeoTIFF,
 			{
@@ -345,7 +475,19 @@ function buildAndAddLayer(
 			}
 			loading = false;
 		}
-	});
+	};
+	return new COGLayer(cogProps);
+}
+
+// First-mount: create the MapboxOverlay once and attach via addControl.
+// Subsequent style changes go through pushLayer() which only calls setProps,
+// preserving deck.gl's WebGL context and tile cache.
+function buildAndAddLayer(
+	map: maplibregl.Map,
+	preflightGeotiff: GeoTIFF | undefined,
+	signal: AbortSignal
+) {
+	const layer = buildCogLayer(map, preflightGeotiff, signal);
 
 	const overlay = new MapboxOverlay({
 		interleaved: false,
@@ -362,41 +504,100 @@ function buildAndAddLayer(
 	map.addControl(overlay as unknown as maplibregl.IControl);
 }
 
+// Style-change update path: swap layers in place via setProps. Identity of the
+// COGLayer's `id` and `getTileData` is preserved so deck.gl reconciles the
+// existing layer instance and keeps its tile cache.
+function pushLayer() {
+	if (!mapRef || !geotiffRef || !overlayRef) return;
+	const layer = buildCogLayer(mapRef, geotiffRef, abortController.signal);
+	overlayRef.setProps({ layers: [layer] });
+}
+
+// ─── Viewport-scoped histogram aggregation ───────────────────────
+
+/**
+ * Sum per-tile histograms from tiles currently visible in the viewport. COG
+ * pyramid semantics map cleanly: zoomed out → a handful of low-res overview
+ * tiles cover the whole scene; zoomed in → only the tiles intersecting the
+ * AOI are decoded. deck.gl reuses its tile cache on revisits so each cached
+ * tile still carries `content.histogram`, no rebake needed.
+ */
+function aggregateVisibleHistogram(
+	visibleTiles: ReadonlyArray<{ content?: unknown } | null | undefined>
+): void {
+	if (!visibleTiles || visibleTiles.length === 0) {
+		histogram = null;
+		histogramTick++;
+		return;
+	}
+	const summed = new Uint32Array(HISTOGRAM_BIN_COUNT);
+	let found = false;
+	for (const tile of visibleTiles) {
+		// COGLayer wraps our baker's return as `{data, forwardTransform,
+		// inverseTransform}` in `_getTileData`, so the histogram lives at
+		// `content.data.histogram`. MosaicLayer's sub-COGs follow the same
+		// shape. Fall back to `content.histogram` for future-proofing if
+		// upstream 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;
+	}
+	histogram = found ? summed : null;
+	histogramTick++;
+}
+
 // ─── Rebuild layer on band config change ─────────────────────────
 
 function handleConfigChange(newConfig: BandConfig) {
 	bandConfig = newConfig;
+	// Only the single-band CPU baker emits `onHistogram`. Clear the buffer on
+	// every mode/band change so (a) switching back to RGB hides stale bars
+	// that the rescale slider would otherwise draw on top of, and (b) picking
+	// a different single band starts a fresh distribution.
+	histogram = null;
+	histogramTick = 0;
 	if (!mapRef || !geotiffRef || !isTiledRef) return;
 
-	// Remove old overlay
-	if (overlayRef) {
-		try {
-			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
-		} catch {
-			/* already removed */
-		}
-		overlayRef = null;
-	}
-
-	// Rebuild with new config
-	buildAndAddLayer(mapRef, geotiffRef, abortController.signal);
+	// Swap layers in place: deck.gl diffs on layer id and reuses the stable
+	// `getTileData` reference held by `tileLoaderRef`, so the tile cache and
+	// in-flight fetches survive band/style changes.
+	pushLayer();
 }
 
 function handleRescaleChange(next: RescaleConfig) {
 	rescale = next;
 	if (!mapRef || !geotiffRef || !isTiledRef) return;
+	pushLayer();
+}
 
-	// Remove old overlay and rebuild. deck.gl diffs on layer id, so reusing the
-	// stable per-tab id keeps tile cache state where possible.
-	if (overlayRef) {
-		try {
-			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
-		} catch {
-			/* already removed */
-		}
-		overlayRef = null;
+// ─── Unified picker change handlers ──────────────────────────────
+
+function handleCompositeChange(next: ChannelComposite): void {
+	if (!bandConfig) return;
+	if (bandConfig.mode === 'rgb') {
+		handleConfigChange({
+			...bandConfig,
+			rBand: next.r.bandIndex,
+			gBand: next.g.bandIndex,
+			bBand: next.b.bandIndex
+		});
+	} else {
+		handleConfigChange({ ...bandConfig, band: next.r.bandIndex });
 	}
-	buildAndAddLayer(mapRef, geotiffRef, abortController.signal);
+}
+
+function handleModeChange(m: 'rgb' | 'single'): void {
+	if (!bandConfig) return;
+	handleConfigChange({ ...bandConfig, mode: m });
+}
+
+function handleBandConfigChange(next: BandConfig): void {
+	handleConfigChange(next);
 }
 
 // ─── Cleanup ─────────────────────────────────────────────────────
@@ -415,9 +616,12 @@ function cleanup() {
 	mapRef = null;
 	overlayRef = null;
 	geotiffRef = null;
+	tileLoaderRef = null;
 	proj4DefRef = null;
 	pixelValue = null;
 	resolvedHttpsUrl = null;
+	resolvedHrefForControls = null;
+	probedBandCount = null;
 }
 
 $effect(() => {
@@ -434,7 +638,7 @@ onDestroy(cleanup);
 	</div>
 
 	<!-- Top-left: Loading + metadata badges -->
-	<div class="pointer-events-none absolute left-2 top-2 z-10 flex flex-col gap-1">
+	<div class="pointer-events-none absolute left-2 top-2 z-10 flex max-w-[calc(100vw-7rem)] flex-col gap-1 sm:max-w-none">
 		{#if loading}
 			<div
 				class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm"
@@ -462,14 +666,23 @@ onDestroy(cleanup);
 				{error}
 			</div>
 		{/if}
+
+		{#if smokeWarning && !error}
+			<div
+				class="pointer-events-auto max-w-sm rounded bg-amber-900/80 px-2 py-1 text-xs text-amber-100"
+				title={t('stac.smokeWarningHint')}
+			>
+				{t('stac.smokeWarning', { reason: smokeWarning })}
+			</div>
+		{/if}
 	</div>
 
 	<!-- Top-right: Info + Style buttons -->
 	{#if cogInfo}
-		<div class="absolute right-2 top-2 z-10 flex gap-1">
+		<div class="absolute right-2 top-2 z-10 flex gap-1" style="touch-action: manipulation;">
 			{#if bandConfig}
 				<button
-					class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm hover:bg-card"
+					class="inline-flex min-h-11 min-w-11 items-center justify-center rounded bg-card/80 px-3 py-1.5 text-xs text-card-foreground backdrop-blur-sm hover:bg-card sm:min-h-0 sm:min-w-0 sm:px-2 sm:py-1"
 					class:ring-1={showControls}
 					class:ring-primary={showControls}
 					onclick={() => {
@@ -481,7 +694,7 @@ onDestroy(cleanup);
 				</button>
 			{/if}
 			<button
-				class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm hover:bg-card"
+				class="inline-flex min-h-11 min-w-11 items-center justify-center rounded bg-card/80 px-3 py-1.5 text-xs text-card-foreground backdrop-blur-sm hover:bg-card sm:min-h-0 sm:min-w-0 sm:px-2 sm:py-1"
 				class:ring-1={showInfo}
 				class:ring-primary={showInfo}
 				onclick={() => {
@@ -493,23 +706,39 @@ onDestroy(cleanup);
 			</button>
 		</div>
 
-		<!-- Band/Color controls panel -->
-		{#if showControls && bandConfig}
-			<CogControls
-				bandCount={cogInfo.bandCount}
-				{bandConfig}
-				onConfigChange={handleConfigChange}
-				{rescale}
-				rescaleApplicable={rescaleApplicable}
-				onRescaleChange={handleRescaleChange}
-				{histogram}
-			/>
+		<!-- Band/Color controls panel. Kept mounted so slider drag state and focus
+		     survive every visibility toggle; only the `hidden` class is flipped. -->
+		{#if bandConfig}
+			<div class={showControls ? 'contents' : 'hidden'}>
+				<CogControls
+					assets={cogControlsAssets}
+					composite={cogControlsComposite}
+					onCompositeChange={handleCompositeChange}
+					presets={[]}
+					activePresetId=""
+					onPresetChange={() => {}}
+					mode={bandConfig?.mode ?? 'rgb'}
+					onModeChange={handleModeChange}
+					{bandConfig}
+					bandCount={probedBandCount ?? cogInfo.bandCount}
+					onBandConfigChange={handleBandConfigChange}
+					{rescale}
+					rescaleApplicable={rescaleApplicable}
+					onRescaleChange={handleRescaleChange}
+					{histogram}
+					nodata={nodataConfig}
+					{autoNodata}
+					onNodataChange={(next) => {
+						nodataConfig = next;
+					}}
+				/>
+			</div>
 		{/if}
 
 		<!-- Info panel -->
 		{#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"
+				class="absolute inset-x-2 top-16 z-10 max-h-[60vh] overflow-auto rounded bg-card/90 p-3 text-xs text-card-foreground backdrop-blur-sm sm:inset-x-auto sm:right-2 sm:top-10 sm:max-h-[70vh] sm:w-64"
 			>
 				<h3 class="mb-2 font-medium">{t('map.cogInfo')}</h3>
 				<dl class="space-y-1.5">
@@ -529,45 +758,17 @@ onDestroy(cleanup);
 	{/if}
 
 	<!-- Bottom-left: Pixel value on click -->
-	{#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)}
-				>
-					&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>
-			</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}
+	<PixelInspectorPanel
+		lng={pixelValue?.lng ?? null}
+		lat={pixelValue?.lat ?? null}
+		rows={pixelValue
+			? (pixelValue.values.map((v, i) => ({
+					label: `${t('cog.band')} ${i + 1}`,
+					value: v
+				})) satisfies PixelInspectorRow[])
+			: null}
+		footnote={pixelValue ? `px (${pixelValue.col}, ${pixelValue.row})` : undefined}
+		onClose={() => (pixelValue = null)}
+		{inspecting}
+	/>
 </div>

package/dist/components/viewers/CopcViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { Tab } from '../../types';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 
 let { tab }: { tab: Tab } = $props();
 

package/dist/components/viewers/FlatGeobufViewer.svelte

@@ -19,7 +19,7 @@ import {
 	hoverCursor,
 	loadDeckModules
 } from '../../utils/deck.js';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 import AttributeTable from './map/AttributeTable.svelte';
 import MapContainer from './map/MapContainer.svelte';