@walkthru-earth/objex 1.2.0 → 1.3.0

package/dist/components/viewers/CogViewer.svelte

@@ -27,7 +27,7 @@ import {
 	resolveProj4Def,
 	selectCogPipeline
 } from '../../utils/cog.js';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 import CogControls from './CogControls.svelte';
 import MapContainer from './map/MapContainer.svelte';
 
@@ -41,6 +41,8 @@ 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 histogram = $state.raw<Uint32Array | null>(null);
+let histogramTick = $state(0);
 let rescale = $state<RescaleConfig>({ ...DEFAULT_RESCALE });
 // 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
@@ -57,16 +59,20 @@ let proj4DefRef: string | null = null;
 let sampleFormatRef = 1;
 let isTiledRef = true;
 let clickHandlerRef: ((e: maplibregl.MapMouseEvent) => void) | null = null;
-// True when the library-default uint pipeline will run. LinearRescale only
-// operates on already-normalized RGB 0..1, so the slider is meaningful only
-// here, and only for non-palette data (palette renders through Colormap).
-// `needsCustomPipelineForConfig` only touches read-only tags on the GeoTIFF,
-// safe to call outside reactive tracking.
+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`
+// before presentation), and (2) our custom single-band CPU + GPU Colormap
+// path (scales `color.r` before the ramp sample). Palette COGs hide the
+// slider, the embedded ColorMap tag already bakes the display colors.
+// `needsCustomPipelineForConfig` only touches read-only tags, safe to call
+// outside reactive tracking.
 const rescaleApplicable = $derived.by(() => {
 	if (!cogInfo || !bandConfig || isPaletteIndexed) return false;
 	const g = geotiffRef;
 	if (!g) return false;
-	return !needsCustomPipelineForConfig(g, bandConfig);
+	if (!needsCustomPipelineForConfig(g, bandConfig)) return true;
+	return bandConfig.mode === 'single';
 });
 // Tracks whether the camera has already been framed for the current tab.
 // Prevents fitCogBounds from resetting the user's view when the band/style
@@ -104,10 +110,13 @@ $effect(() => {
 		overlayRef = null;
 		geotiffRef = null;
 		proj4DefRef = null;
+		resolvedHttpsUrl = null;
 		loading = true;
 		error = null;
 		cogInfo = null;
 		bandConfig = null;
+		histogram = null;
+		histogramTick = 0;
 		rescale = { ...DEFAULT_RESCALE };
 		isPaletteIndexed = false;
 		pixelValue = null;
@@ -165,7 +174,9 @@ async function loadCog(map: maplibregl.Map) {
 	const signal = abortController.signal;
 
 	try {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
+		if (signal.aborted) return;
+		resolvedHttpsUrl = url;
 
 		// Pre-flight: read first IFD to check if tiled (single range request).
 		let isTiled = true;
@@ -187,6 +198,19 @@ async function loadCog(map: maplibregl.Map) {
 			}
 		} catch (preflightErr) {
 			if (signal.aborted) return;
+			// `@developmentseed/geotiff` throws "Only tiff supported version:<n>"
+			// when the first 4 bytes don't match II*\0 / MM\0* / II+\0 / MM\0+.
+			// This happens on files that advertise image/tiff but are corrupt,
+			// encrypted, or a different format entirely (GDAL reports "not
+			// 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);
+			if (/Only tiff supported version|not a tiff|Invalid.*magic/i.test(msg)) {
+				error = t('map.cogInvalidTiff');
+				loading = false;
+				return;
+			}
 		}
 
 		// Store refs for pixel inspection and rebuild
@@ -249,13 +273,22 @@ function buildAndAddLayer(
 	// 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 })
+		? 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++;
+				}
+			})
 		: {};
 
 	// Apply upstream-bug workarounds in place (overview filter, 4326 bbox clamp).
 	if (preflightGeotiff) normalizeCogGeotiff(preflightGeotiff);
 
-	const cogInput = preflightGeotiff ?? buildHttpsUrl(tab);
+	const cogInput = preflightGeotiff ?? resolvedHttpsUrl ?? '';
 
 	const layer = new COGLayer({
 		// Stable id per tab so rebuilds on band/style change don't force deck.gl
@@ -384,6 +417,7 @@ function cleanup() {
 	geotiffRef = null;
 	proj4DefRef = null;
 	pixelValue = null;
+	resolvedHttpsUrl = null;
 }
 
 $effect(() => {
@@ -468,6 +502,7 @@ onDestroy(cleanup);
 				{rescale}
 				rescaleApplicable={rescaleApplicable}
 				onRescaleChange={handleRescaleChange}
+				{histogram}
 			/>
 		{/if}
 

package/dist/components/viewers/CopcViewer.svelte

@@ -1,10 +1,28 @@
 <script lang="ts">
 import type { Tab } from '../../types';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 
 let { tab }: { tab: Tab } = $props();
 
-const fileUrl = $derived(tab.source === 'url' ? tab.path : (buildHttpsUrl(tab) ?? ''));
+let fileUrl = $state('');
+
+$effect(() => {
+	const id = tab.id;
+	let cancelled = false;
+	(async () => {
+		if (tab.source === 'url') {
+			fileUrl = tab.path;
+			return;
+		}
+		const url = await buildHttpsUrlAsync(tab);
+		if (cancelled || id !== tab.id) return;
+		fileUrl = url;
+	})();
+	return () => {
+		cancelled = true;
+	};
+});
+
 const viewerUrl = $derived(
 	fileUrl ? `https://viewer.copc.io/?copc=${encodeURIComponent(fileUrl)}` : ''
 );

package/dist/components/viewers/FlatGeobufViewer.svelte

@@ -19,7 +19,7 @@ import {
 	hoverCursor,
 	loadDeckModules
 } from '../../utils/deck.js';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 import AttributeTable from './map/AttributeTable.svelte';
 import MapContainer from './map/MapContainer.svelte';
 
@@ -55,6 +55,7 @@ let mapReadyPromise: Promise<void> | null = null;
 // Stored from preview for load-all (skip index)
 let storedHeader: HeaderMeta | null = null;
 let storedFeatureOffset = 0;
+let signedUrl: string | null = null;
 
 // proj4 converter for reprojecting from source CRS → WGS84
 let proj4Forward: ((coord: [number, number]) => [number, number]) | null = null;
@@ -217,6 +218,7 @@ function cleanup() {
 	dataVersion = 0;
 	storedHeader = null;
 	storedFeatureOffset = 0;
+	signedUrl = null;
 	proj4Forward = null;
 }
 
@@ -261,9 +263,14 @@ async function loadFlatGeobuf() {
 		await mapReadyPromise;
 		if (!overlay) return;
 
+		// Sign once per load so header + feature stream share the same signature.
+		// Cached across loadAllFeatures() so the "Load all" button doesn't re-sign.
+		const url = await buildHttpsUrlAsync(tab);
+		signedUrl = url;
+
 		// Read header via range requests (fast: 1-2 small requests)
 		// Gets metadata + feature offset to skip the spatial index
-		await readHeaderWithRangeRequests();
+		await readHeaderWithRangeRequests(url);
 
 		// Set up on-the-fly reprojection if the file uses a non-WGS84 CRS
 		proj4Forward = null;
@@ -298,7 +305,7 @@ async function loadFlatGeobuf() {
 		}
 
 		// Stream features (skips index if header was read, else sequential)
-		await streamFeatures(settings.featureLimit);
+		await streamFeatures(url, settings.featureLimit);
 	} catch (err) {
 		console.error('[FGB]', 'loadFlatGeobuf error:', err);
 		if (err instanceof DOMException && err.name === 'AbortError') return;
@@ -314,9 +321,7 @@ async function loadFlatGeobuf() {
  * Read header via range requests (fast: 1-2 small requests).
  * Stores header + feature offset for the composite stream approach.
  */
-async function readHeaderWithRangeRequests(): Promise<boolean> {
-	const url = buildHttpsUrl(tab);
-
+async function readHeaderWithRangeRequests(url: string): Promise<boolean> {
 	let reader: HttpReader;
 	try {
 		reader = await HttpReader.open(url, false);
@@ -357,7 +362,9 @@ async function loadAllFeatures() {
 	try {
 		features = [];
 		featureCount = 0;
-		await streamFeatures();
+		const url = signedUrl ?? (await buildHttpsUrlAsync(tab));
+		signedUrl = url;
+		await streamFeatures(url);
 	} catch (err) {
 		console.error('[FGB]', 'loadAllFeatures error:', err);
 		if (err instanceof DOMException && err.name === 'AbortError') return;
@@ -372,10 +379,9 @@ async function loadAllFeatures() {
  * Stream features sequentially.
  * If storedHeader is available, skips the index with a Range request + composite stream.
  */
-async function streamFeatures(limit?: number) {
+async function streamFeatures(url: string, limit?: number) {
 	const ac = new AbortController();
 	abortController = ac;
-	const url = buildHttpsUrl(tab);
 	const t0 = performance.now();
 
 	let iter: AsyncGenerator;

package/dist/components/viewers/MultiCogViewer.svelte

@@ -0,0 +1,416 @@
+<script lang="ts">
+import { MapboxOverlay } from '@deck.gl/mapbox';
+import { MultiCOGLayer } from '@developmentseed/deck.gl-geotiff';
+import { DecoderPool } from '@developmentseed/geotiff';
+import type maplibregl from 'maplibre-gl';
+import { onDestroy, untrack } from 'svelte';
+import { t } from '../../i18n/index.svelte.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 {
+	buildBandRenderPipeline,
+	clampBounds,
+	cleanupNativeBitmap,
+	createEpsgResolver,
+	fitCogBounds,
+	type RescaleConfig
+} from '../../utils/cog.js';
+import {
+	type BandMap,
+	type BandSlot,
+	extractSentinelBandAssets,
+	hasRgbBands,
+	isStacItem,
+	type StacItem,
+	type StacRoutableKind
+} from '../../utils/stac.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
+import CogControls from './CogControls.svelte';
+import MapContainer from './map/MapContainer.svelte';
+
+interface Preset {
+	id: string;
+	labelKey: string;
+	composite: { r: BandSlot; g: BandSlot; b: BandSlot };
+}
+
+const PRESETS: Preset[] = [
+	{
+		id: 'true-color',
+		labelKey: 'map.multiCogPreset.trueColor',
+		composite: { r: 'red', g: 'green', b: 'blue' }
+	},
+	{
+		id: 'false-color-ir',
+		labelKey: 'map.multiCogPreset.falseColorIR',
+		composite: { r: 'nir', g: 'red', b: 'green' }
+	},
+	{
+		id: 'swir',
+		labelKey: 'map.multiCogPreset.swir',
+		composite: { r: 'swir2', g: 'swir1', b: 'red' }
+	},
+	{
+		id: 'vegetation',
+		labelKey: 'map.multiCogPreset.vegetation',
+		composite: { r: 'nir', g: 'swir1', b: 'red' }
+	},
+	{
+		id: 'agriculture',
+		labelKey: 'map.multiCogPreset.agriculture',
+		composite: { r: 'swir1', g: 'nir', b: 'blue' }
+	}
+];
+
+let { tab, classified }: { tab: Tab; classified?: StacRoutableKind } = $props();
+
+let loading = $state(true);
+let error = $state<string | null>(null);
+let showControls = $state(false);
+let bounds = $state<[number, number, number, number] | undefined>();
+let activePresetId = $state<string>('true-color');
+// Sentinel-2 L2A reflectance is scaled uint16 (raw / 10000 = reflectance).
+// After the default uint normalization the slider operates on 0..1, so 0.3
+// keeps typical land surfaces in the visible range without clipping.
+let rescale = $state<RescaleConfig>({ min: 0, max: 0.3 });
+
+let bandMap = $state.raw<BandMap>({});
+let abortController = new AbortController();
+let mapRef: maplibregl.Map | null = null;
+let overlayRef: MapboxOverlay | null = null;
+let hasFittedOnce = false;
+let presignCache = new Map<string, Promise<string>>();
+let loadGen = 0;
+let layerVersion = 0;
+let rebuildTimer: number | null = null;
+let lastRebuildAt = 0;
+
+// Throttle rebuilds so the rescale slider (oninput, fires per pixel of drag)
+// doesn't spawn N overlapping buildAndAddLayer calls that each addControl a
+// new MapboxOverlay, leaking every overlay but the last.
+const REBUILD_INTERVAL_MS = 750;
+
+let pool: DecoderPool | null = new DecoderPool();
+const epsgResolver = createEpsgResolver();
+
+const activePreset = $derived(PRESETS.find((p) => p.id === activePresetId) ?? PRESETS[0]);
+const availablePresets = $derived(
+	PRESETS.filter((p) => bandMap[p.composite.r] && bandMap[p.composite.g] && bandMap[p.composite.b])
+);
+
+$effect(() => {
+	if (!tab) return;
+	tab.id;
+	untrack(() => {
+		resetViewer();
+		if (mapRef) void loadItem(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 {
+			/* already destroyed */
+		}
+	}
+	overlayRef = null;
+	bandMap = {};
+	presignCache = new Map();
+	loading = true;
+	error = null;
+	bounds = undefined;
+	activePresetId = 'true-color';
+	rescale = { min: 0, max: 0.3 };
+	hasFittedOnce = false;
+	showControls = false;
+}
+
+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();
+		void buildAndAddLayer(map, ++layerVersion, signal);
+	}, delay);
+}
+
+function onMapReady(map: maplibregl.Map): void {
+	mapRef = map;
+	void loadItem(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) {
+		if (/^https?:\/\//i.test(href)) {
+			// Absolute URLs that belong to the tab's own bucket still need SigV4
+			// presigning on private buckets — `new URL(rel, base)` strips the
+			// base's query string when absolutizing band hrefs, so the signature
+			// is lost and the bare URL 403s.
+			const key = extractConnectionKey(href);
+			if (key !== null) {
+				cached = buildHttpsUrlAsync({ ...tab, path: key } as Tab).catch(() => href);
+			} else {
+				cached = Promise.resolve(href);
+			}
+		} else {
+			cached = buildHttpsUrlAsync({ ...tab, path: href } as Tab).catch(() => href);
+		}
+		presignCache.set(href, cached);
+	}
+	return cached;
+}
+
+async function loadItem(map: maplibregl.Map): Promise<void> {
+	const gen = ++loadGen;
+	const signal = abortController.signal;
+	try {
+		let item: StacItem | null = null;
+		if (classified && classified.kind === 'item') {
+			item = classified.item;
+		} else {
+			const adapter = getAdapter(tab.source, tab.connectionId);
+			const data = await adapter.read(tab.path, undefined, undefined, signal);
+			if (gen !== loadGen || signal.aborted) return;
+			const parsed = JSON.parse(new TextDecoder().decode(data));
+			if (!isStacItem(parsed)) {
+				error = t('map.multiCogMissingBands');
+				loading = false;
+				return;
+			}
+			item = parsed as StacItem;
+		}
+		if (!item) {
+			error = t('map.multiCogMissingBands');
+			loading = false;
+			return;
+		}
+
+		const bands = extractSentinelBandAssets(item);
+		if (!hasRgbBands(bands)) {
+			error = t('map.multiCogMissingBands');
+			loading = false;
+			return;
+		}
+		bandMap = bands;
+
+		if (Array.isArray(item.bbox) && item.bbox.length >= 4) {
+			const clamped = clampBounds({
+				west: Number(item.bbox[0]),
+				south: Number(item.bbox[1]),
+				east: Number(item.bbox[2]),
+				north: Number(item.bbox[3])
+			});
+			bounds = [clamped.west, clamped.south, clamped.east, clamped.north];
+			if (!hasFittedOnce) {
+				fitCogBounds(map, clamped);
+				hasFittedOnce = true;
+			}
+		}
+
+		await buildAndAddLayer(map, ++layerVersion, 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;
+	}
+}
+
+async function buildAndAddLayer(
+	map: maplibregl.Map,
+	version: number,
+	signal: AbortSignal
+): Promise<void> {
+	const composite = activePreset.composite;
+	const sources: Record<string, { url: string }> = {};
+	for (const slot of [composite.r, composite.g, composite.b]) {
+		const href = bandMap[slot];
+		if (!href) continue;
+		const url = await presignHref(href);
+		if (version !== layerVersion || signal.aborted) return;
+		sources[slot] = { url };
+	}
+
+	const layer = new MultiCOGLayer({
+		id: `multicog-${tab.id}-v${version}`,
+		sources,
+		composite: { r: composite.r, g: composite.g, b: composite.b },
+		renderPipeline: buildBandRenderPipeline({ noDataVal: 0, rescale: { ...rescale } }),
+		pool: pool ?? undefined,
+		epsgResolver,
+		signal,
+		onGeoTIFFLoad: (_tiffs, { geographicBounds }) => {
+			if (version !== layerVersion || signal.aborted) return;
+			const clamped = clampBounds(geographicBounds);
+			if (!hasFittedOnce) {
+				bounds = [clamped.west, clamped.south, clamped.east, clamped.north];
+				fitCogBounds(map, clamped);
+				hasFittedOnce = true;
+			}
+			loading = false;
+		}
+	});
+
+	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);
+}
+
+function setPreset(id: string): void {
+	activePresetId = id;
+	if (mapRef) scheduleLayerRebuild(mapRef, abortController.signal);
+}
+
+function handleRescaleChange(next: RescaleConfig): void {
+	rescale = next;
+	if (mapRef) scheduleLayerRebuild(mapRef, abortController.signal);
+}
+
+function cleanup(): void {
+	abortController.abort();
+	if (rebuildTimer != null) {
+		clearTimeout(rebuildTimer);
+		rebuildTimer = null;
+	}
+	if (mapRef && overlayRef) {
+		try {
+			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
+		} catch {
+			/* already removed */
+		}
+	}
+	if (mapRef) cleanupNativeBitmap(mapRef);
+	mapRef = null;
+	overlayRef = null;
+	bandMap = {};
+	presignCache.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 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 !error && availablePresets.length > 0}
+		<div class="absolute right-2 top-2 z-10 flex items-center gap-1">
+			<label class="flex items-center gap-1 rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm">
+				<span class="text-muted-foreground">{t('map.multiCogPreset.label')}</span>
+				<select
+					class="rounded border border-border bg-background px-1 py-0.5 text-xs"
+					value={activePresetId}
+					onchange={(e) => setPreset((e.target as HTMLSelectElement).value)}
+				>
+					{#each availablePresets as p}
+						<option value={p.id}>{t(p.labelKey)}</option>
+					{/each}
+				</select>
+			</label>
+			<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;
+				}}
+			>
+				{t('cog.style')}
+			</button>
+		</div>
+
+		{#if showControls}
+			<CogControls
+				mode="multi"
+				bandCount={3}
+				onConfigChange={() => {}}
+				{rescale}
+				rescaleApplicable={true}
+				onRescaleChange={handleRescaleChange}
+			/>
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Tab } from '../../types.js';
+import { type StacRoutableKind } from '../../utils/stac.js';
+type $$ComponentProps = {
+    tab: Tab;
+    classified?: StacRoutableKind;
+};
+declare const MultiCogViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type MultiCogViewer = ReturnType<typeof MultiCogViewer>;
+export default MultiCogViewer;

package/dist/components/viewers/PmtilesViewer.svelte

@@ -11,7 +11,7 @@ import { t } from '../../i18n/index.svelte.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { loadPmtiles, type PmtilesMetadata } from '../../utils/pmtiles';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 import { getUrlView, updateUrlView } from '../../utils/url-state.js';
 
 let { tab }: { tab: Tab } = $props();
@@ -73,7 +73,7 @@ async function load() {
 	error = null;
 
 	try {
-		pmtilesUrl = buildHttpsUrl(tab);
+		pmtilesUrl = await buildHttpsUrlAsync(tab);
 		const result = await loadPmtiles(pmtilesUrl);
 		pmtilesInstance = result.pmtiles;
 		metadata = result.metadata;