@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/CogControls.svelte.d.ts

@@ -1,16 +1,39 @@
-import { type BandConfig, type RescaleConfig } from '../../utils/cog.js';
-type $$ComponentProps = {
-    bandCount: number;
-    /** Required when `mode === 'single'`, ignored when `mode === 'multi'`. */
-    bandConfig?: BandConfig;
-    onConfigChange: (config: BandConfig) => void;
+import type { ChannelComposite, CogAsset, PresetDef } from '@walkthru-earth/objex-utils';
+import { type BandConfig, type NodataConfig, type RescaleConfig } from '../../utils/cog.js';
+type Props = {
+    /** All raster-COG-ish assets on the current item (or `[selfAsset]` for plain CogViewer). */
+    assets: CogAsset[];
+    /** Current RGB composite. Always present. */
+    composite: ChannelComposite;
+    onCompositeChange: (next: ChannelComposite) => void;
+    /** Presets that resolve on this item. Empty when no preset applies. */
+    presets: PresetDef[];
+    activePresetId: string;
+    onPresetChange: (id: string) => void;
+    /** Rendering mode toggle: 'rgb' uses the channel pickers; 'single' the band+ramp picker. */
+    mode: 'rgb' | 'single';
+    onModeChange: (m: 'rgb' | 'single') => void;
+    /** Band/ramp config used when mode === 'single'. Optional for RGB-only callers. */
+    bandConfig?: BandConfig | null;
+    bandCount?: number;
+    onBandConfigChange?: (next: BandConfig) => void;
     rescale: RescaleConfig;
     rescaleApplicable: boolean;
-    onRescaleChange: (rescale: RescaleConfig) => void;
-    /** Optional histogram bins (normalized, single-band only) for the slider overlay. */
+    onRescaleChange: (next: RescaleConfig) => void;
     histogram?: Uint32Array | null;
-    mode?: 'single' | 'multi';
+    /** Optional 4th channel UI affordance (alpha). When false, alpha row is hidden. */
+    showAlpha?: boolean;
+    /** User-selected nodata config. Default `{ mode: 'auto' }`. */
+    nodata?: NodataConfig;
+    /**
+     * Value resolved by the viewer for Auto mode (typically the GeoTIFF's
+     * GDAL_NODATA tag). Surfaced as a hint pill next to the segmented control.
+     * `null` means the file has no GDAL_NODATA tag.
+     */
+    autoNodata?: number | null;
+    /** Fired when the user changes nodata mode or value. */
+    onNodataChange?: (next: NodataConfig) => void;
 };
-declare const CogControls: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const CogControls: import("svelte").Component<Props, {}, "">;
 type CogControls = ReturnType<typeof CogControls>;
 export default CogControls;

package/dist/components/viewers/CogViewer.svelte

@@ -2,6 +2,15 @@
 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,
+	handleLoadError,
+	isAbortError,
+	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,28 +18,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 ───────────────────────────────────────────────────────
@@ -43,24 +63,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`
@@ -111,8 +176,11 @@ $effect(() => {
 		}
 		overlayRef = null;
 		geotiffRef = null;
+		tileLoaderRef = null;
 		proj4DefRef = null;
 		resolvedHttpsUrl = null;
+		resolvedHrefForControls = null;
+		probedBandCount = null;
 		loading = true;
 		error = null;
 		cogInfo = null;
@@ -120,8 +188,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;
@@ -140,34 +212,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 ──────────────────────────────────────────
@@ -179,12 +249,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 (isAbortError(err)) return;
+					smokeWarning = handleLoadError(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;
 
@@ -193,7 +281,7 @@ async function loadCog(map: maplibregl.Map) {
 				const _crs = preflightGeotiff.crs;
 				void _crs;
 			} catch (crsErr) {
-				const msg = crsErr instanceof Error ? crsErr.message : String(crsErr);
+				const msg = handleLoadError(crsErr) ?? String(crsErr);
 				error = `Unsupported CRS: ${msg}`;
 				loading = false;
 				return;
@@ -207,7 +295,7 @@ async function loadCog(map: maplibregl.Map) {
 			// recognized as being in a supported file format" on the same file).
 			// Surface a clear message and bail — COGLayer would re-invoke the
 			// same loader and throw the identical error uncaught during update.
-			const msg = preflightErr instanceof Error ? preflightErr.message : String(preflightErr);
+			const msg = handleLoadError(preflightErr) ?? String(preflightErr);
 			if (/Only tiff supported version|not a tiff|Invalid.*magic/i.test(msg)) {
 				error = t('map.cogInvalidTiff');
 				loading = false;
@@ -233,6 +321,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) {
@@ -259,33 +363,56 @@ async function loadCog(map: maplibregl.Map) {
 		buildAndAddLayer(map, preflightGeotiff, signal);
 	} catch (err) {
 		if (signal.aborted) return;
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		if (isAbortError(err)) return;
+		error = handleLoadError(err);
 		loading = false;
 	}
 }
 
 // ─── 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 })
-		: {};
+	const customProps = buildPipelineProps(preflightGeotiff);
 
 	// Apply upstream-bug workarounds in place (overview filter, 4326 bbox clamp).
 	if (preflightGeotiff) normalizeCogGeotiff(preflightGeotiff);
 
 	const cogInput = preflightGeotiff ?? resolvedHttpsUrl ?? '';
 
-	// Cast: `onViewportLoad` is forwarded by our pnpm patch to the inner
-	// TileLayer, but COGLayer's generated .d.ts does not expose it.
-	// biome-ignore lint/suspicious/noExplicitAny: upstream prop not yet in types
+	// 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.
@@ -351,7 +478,18 @@ function buildAndAddLayer(
 			loading = false;
 		}
 	};
-	const layer = new COGLayer(cogProps);
+	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,
@@ -368,6 +506,15 @@ 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 ───────────────────────
 
 /**
@@ -418,35 +565,41 @@ function handleConfigChange(newConfig: BandConfig) {
 	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 ─────────────────────────────────────────────────────
@@ -465,9 +618,12 @@ function cleanup() {
 	mapRef = null;
 	overlayRef = null;
 	geotiffRef = null;
+	tileLoaderRef = null;
 	proj4DefRef = null;
 	pixelValue = null;
 	resolvedHttpsUrl = null;
+	resolvedHrefForControls = null;
+	probedBandCount = null;
 }
 
 $effect(() => {
@@ -484,7 +640,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"
@@ -512,14 +668,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={() => {
@@ -531,7 +696,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={() => {
@@ -543,23 +708,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">
@@ -579,45 +760,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>