@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/cog/PixelInspectorPanel.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" module>
+export type PixelInspectorRow = {
+	label: string;
+	sublabel?: string;
+	value: number | null;
+};
+</script>
+
+<script lang="ts">
+import { t } from '../../../i18n/index.svelte.js';
+
+let {
+	lng,
+	lat,
+	rows,
+	footnote,
+	extraLine,
+	onClose,
+	inspecting = false
+}: {
+	lng: number | null;
+	lat: number | null;
+	rows: PixelInspectorRow[] | null;
+	footnote?: string;
+	extraLine?: string;
+	onClose: () => void;
+	inspecting?: boolean;
+} = $props();
+
+// The panel renders whenever we have a coordinate + rows. The "reading" pill
+// renders independently while inspecting is true. Both blocks can render at
+// once during a follow-up click, this matches the existing per-viewer UX.
+const showPanel = $derived(rows !== null && lng !== null && lat !== null);
+const showReading = $derived(inspecting);
+
+function formatValue(v: number | null): string {
+	if (v === null) return '-';
+	return Number.isInteger(v) ? String(v) : v.toFixed(4);
+}
+</script>
+
+{#if showPanel && rows && lng !== null && lat !== null}
+	<div
+		class="absolute bottom-2 left-2 z-10 max-w-[calc(100vw-1rem)] rounded bg-card/90 p-2.5 text-xs text-card-foreground backdrop-blur-sm sm:max-w-none"
+	>
+		<div class="mb-1 flex items-center justify-between gap-3">
+			<span class="font-medium">{t('cog.pixelValue')}</span>
+			<button
+				class="inline-flex min-h-8 min-w-8 items-center justify-center text-base text-muted-foreground hover:text-card-foreground sm:min-h-0 sm:min-w-0 sm:text-xs"
+				style="touch-action: manipulation;"
+				onclick={onClose}
+				aria-label={t('stac.close')}
+			>
+				&times;
+			</button>
+		</div>
+		<div class="space-y-0.5 text-muted-foreground">
+			<div>{lat.toFixed(6)}&deg;, {lng.toFixed(6)}&deg;</div>
+			{#if footnote}
+				<div class="text-[10px]">{footnote}</div>
+			{/if}
+			{#if extraLine}
+				<div class="truncate text-[10px]" title={extraLine}>{extraLine}</div>
+			{/if}
+		</div>
+		<div class="mt-1.5 space-y-0.5">
+			{#each rows as row}
+				<div class="flex justify-between gap-2">
+					<span class="text-muted-foreground">
+						{row.label}{#if row.sublabel}
+							<span class="ml-1 text-[10px] opacity-70">({row.sublabel})</span>
+						{/if}
+					</span>
+					<span class="font-mono tabular-nums">{formatValue(row.value)}</span>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+{#if showReading}
+	<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}

package/dist/components/viewers/cog/PixelInspectorPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+export type PixelInspectorRow = {
+    label: string;
+    sublabel?: string;
+    value: number | null;
+};
+type $$ComponentProps = {
+    lng: number | null;
+    lat: number | null;
+    rows: PixelInspectorRow[] | null;
+    footnote?: string;
+    extraLine?: string;
+    onClose: () => void;
+    inspecting?: boolean;
+};
+declare const PixelInspectorPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type PixelInspectorPanel = ReturnType<typeof PixelInspectorPanel>;
+export default PixelInspectorPanel;

package/dist/components/viewers/cog/buildRgbLayer.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Layer-construction dispatch for the unified RGB picker.
+ *
+ * Decision rule:
+ *   - All three RGB channels point to the SAME asset → COGLayer. When a
+ *     `preflightGeotiff` is supplied, the per-channel `bandIndex` values are
+ *     translated into a `BandConfig` and run through `selectCogPipeline`,
+ *     which returns a custom `getTileData` / `renderTile` pair that swaps
+ *     bands as requested (the library's COGLayer does not accept a
+ *     `bandConfig` prop, only the resolved pipeline). Without a preflight
+ *     GeoTIFF the layer falls back to the library default pipeline, which
+ *     reads bands 0/1/2 in that order, correct for single-band per-asset
+ *     COGs and for the default natural-color order on pre-baked multi-band
+ *     visuals.
+ *   - Channels point to DIFFERENT assets → MultiCOGLayer with the legacy
+ *     `composite: { r, g, b }` keyed on asset keys. MultiCOGLayer reads band 0
+ *     of each source, per-channel band index is silently ignored on this path
+ *     (library limitation, see spec Known Limitations).
+ *
+ * `buildRgbLayer` ONLY constructs the layer. It does not add overlays,
+ * register cleanup, or touch deck.gl state. Caller owns lifecycle.
+ */
+import { COGLayer, MultiCOGLayer } from '@developmentseed/deck.gl-geotiff';
+import type { DecoderPool, GeoTIFF as GeoTIFFType } from '@developmentseed/geotiff';
+import type { EpsgResolver } from '@developmentseed/proj';
+import { type ChannelComposite, type CogAsset } from '@walkthru-earth/objex-utils';
+import { type GeoBounds, type RescaleConfig } from '../../../utils/cog.js';
+export type RgbLayerKind = 'cog' | 'multicog';
+export interface BuildRgbLayerOptions {
+    id: string;
+    assets: CogAsset[];
+    composite: ChannelComposite;
+    rescale: RescaleConfig;
+    /** href → presigned-or-passthrough URL. */
+    resolveHref: (href: string) => Promise<string>;
+    pool?: DecoderPool | null;
+    epsgResolver: EpsgResolver;
+    signal: AbortSignal;
+    onLoad?: (info: {
+        kind: RgbLayerKind;
+        bounds?: GeoBounds;
+    }) => void;
+    /**
+     * Pre-opened GeoTIFF for the single-asset path. When provided, the per-channel
+     * `bandIndex` values from the composite are honored via `selectCogPipeline`,
+     * which inspects the COG's sample format / band count and returns a custom
+     * `getTileData` + `renderTile` pair that swaps bands as requested.
+     *
+     * When omitted, the layer falls back to the library default render pipeline,
+     * which always reads bands 0/1/2 in that order. That is fine for:
+     *   - single-band per-asset COGs (Sentinel-2, Landsat per-band) where every
+     *     `bandIndex` is 0 anyway, OR
+     *   - pre-baked multi-band visuals (NAIP `image`, S2 `visual`) where the
+     *     natural-color preset wants the default band order.
+     */
+    preflightGeotiff?: GeoTIFFType | null;
+    /**
+     * Resolved nodata value threaded into `buildBandRenderPipeline` for the
+     * multi-asset `MultiCOGLayer` path. `null` (default) disables the nodata
+     * filter so legacy callers preserve their previous behaviour.
+     */
+    noDataVal?: number | null;
+}
+export interface BuiltRgbLayer {
+    kind: RgbLayerKind;
+    layer: COGLayer | MultiCOGLayer;
+}
+/**
+ * Build the appropriate deck.gl layer for an RGB composite.
+ *
+ * For single-asset composites the band indices flow through `selectCogPipeline`
+ * (when `preflightGeotiff` is provided) into a custom `getTileData` /
+ * `renderTile` pair that honors the requested R/G/B band order. Without a
+ * preflight GeoTIFF the layer uses the library's default pipeline (bands 0/1/2).
+ * For multi-asset composites a warning is logged (once per call) when any
+ * non-band-0 index is requested, since MultiCOGLayer cannot honor it today.
+ */
+export declare function buildRgbLayer(opts: BuildRgbLayerOptions): Promise<BuiltRgbLayer>;

package/dist/components/viewers/cog/buildRgbLayer.js

@@ -0,0 +1,176 @@
+/**
+ * Layer-construction dispatch for the unified RGB picker.
+ *
+ * Decision rule:
+ *   - All three RGB channels point to the SAME asset → COGLayer. When a
+ *     `preflightGeotiff` is supplied, the per-channel `bandIndex` values are
+ *     translated into a `BandConfig` and run through `selectCogPipeline`,
+ *     which returns a custom `getTileData` / `renderTile` pair that swaps
+ *     bands as requested (the library's COGLayer does not accept a
+ *     `bandConfig` prop, only the resolved pipeline). Without a preflight
+ *     GeoTIFF the layer falls back to the library default pipeline, which
+ *     reads bands 0/1/2 in that order, correct for single-band per-asset
+ *     COGs and for the default natural-color order on pre-baked multi-band
+ *     visuals.
+ *   - Channels point to DIFFERENT assets → MultiCOGLayer with the legacy
+ *     `composite: { r, g, b }` keyed on asset keys. MultiCOGLayer reads band 0
+ *     of each source, per-channel band index is silently ignored on this path
+ *     (library limitation, see spec Known Limitations).
+ *
+ * `buildRgbLayer` ONLY constructs the layer. It does not add overlays,
+ * register cleanup, or touch deck.gl state. Caller owns lifecycle.
+ */
+import { COGLayer, MultiCOGLayer } from '@developmentseed/deck.gl-geotiff';
+import { allChannelsBand0, isSingleAssetComposite } from '@walkthru-earth/objex-utils';
+import { buildBandRenderPipeline, selectCogPipeline } from '../../../utils/cog.js';
+/**
+ * Build the appropriate deck.gl layer for an RGB composite.
+ *
+ * For single-asset composites the band indices flow through `selectCogPipeline`
+ * (when `preflightGeotiff` is provided) into a custom `getTileData` /
+ * `renderTile` pair that honors the requested R/G/B band order. Without a
+ * preflight GeoTIFF the layer uses the library's default pipeline (bands 0/1/2).
+ * For multi-asset composites a warning is logged (once per call) when any
+ * non-band-0 index is requested, since MultiCOGLayer cannot honor it today.
+ */
+export async function buildRgbLayer(opts) {
+    const assetByKey = new Map(opts.assets.map((a) => [a.key, a]));
+    const c = opts.composite;
+    console.debug('[buildRgbLayer]', {
+        id: opts.id,
+        composite: c,
+        single: isSingleAssetComposite(c),
+        assetKeys: opts.assets.map((a) => a.key),
+        hasPreflightGeotiff: !!opts.preflightGeotiff
+    });
+    if (isSingleAssetComposite(c)) {
+        const asset = assetByKey.get(c.r.assetKey);
+        if (!asset)
+            throw new Error(`unknown asset key: ${c.r.assetKey}`);
+        const url = await opts.resolveHref(asset.href);
+        if (opts.signal.aborted)
+            throw new DOMException('Aborted', 'AbortError');
+        const onGeoTIFFLoad = (_g, info) => {
+            opts.onLoad?.({
+                kind: 'cog',
+                bounds: info.geographicBounds
+            });
+        };
+        // Branch on whether we have a pre-opened GeoTIFF.
+        //   - Present: build a per-channel BandConfig from the composite, hand
+        //     it to selectCogPipeline (which inspects sampleFormat / bandCount)
+        //     and spread the resolved {getTileData?, renderTile?} into COGLayer.
+        //     This is the only path that honors a non-default per-channel
+        //     bandIndex on a single-asset multi-band COG (e.g. NAIP NIR-R-G).
+        //   - Absent: fall back to the library's default render pipeline. Bands
+        //     0/1/2 are read in that order, which is correct for single-band
+        //     per-asset COGs (every bandIndex is 0 anyway) and for the default
+        //     natural-color order on pre-baked multi-band visuals.
+        if (opts.preflightGeotiff) {
+            const bandConfig = {
+                mode: 'rgb',
+                rBand: c.r.bandIndex,
+                gBand: c.g.bandIndex,
+                bBand: c.b.bandIndex,
+                band: 0,
+                colorRamp: 'viridis'
+            };
+            console.debug('[buildRgbLayer] cog single-asset with preflight', {
+                id: opts.id,
+                bandConfig,
+                url
+            });
+            const pipeline = selectCogPipeline(opts.preflightGeotiff, {
+                bandConfig,
+                rescale: opts.rescale
+            });
+            const layer = new COGLayer({
+                id: opts.id,
+                geotiff: url,
+                ...pipeline,
+                pool: opts.pool ?? undefined,
+                epsgResolver: opts.epsgResolver,
+                signal: opts.signal,
+                onGeoTIFFLoad
+            });
+            return { kind: 'cog', layer };
+        }
+        console.debug('[buildRgbLayer] cog single-asset (library default pipeline)', {
+            id: opts.id,
+            url
+        });
+        // Fallback: no preflight GeoTIFF supplied. COGLayer's typed prop surface
+        // does not include `renderPipeline` (only `getTileData` + `renderTile`),
+        // so we cannot apply the band render pipeline statically here. Without
+        // a preflight to feed `selectCogPipeline`, we have no way to inspect
+        // sample format / band count up front, so we let the library infer its
+        // own pipeline from the GeoTIFF metadata at load time. Bands 0/1/2 are
+        // read in that order, which is correct for single-band per-asset COGs
+        // (every bandIndex is 0 anyway) and for the default natural-color order
+        // on pre-baked multi-band visuals (NAIP `image`, S2 `visual`).
+        const layer = new COGLayer({
+            id: opts.id,
+            geotiff: url,
+            pool: opts.pool ?? undefined,
+            epsgResolver: opts.epsgResolver,
+            signal: opts.signal,
+            onGeoTIFFLoad
+        });
+        return { kind: 'cog', layer };
+    }
+    if (!allChannelsBand0(c)) {
+        // Library limitation: MultiCOGLayer always reads band 0. Surface a
+        // console warning once per call so the consumer sees that the user's
+        // per-channel band index was dropped.
+        console.warn('[buildRgbLayer] multi-asset composite with non-band-0 indices, band index ignored on multi-asset path');
+    }
+    const sources = {};
+    for (const ref of [c.r, c.g, c.b, c.a].filter((x) => Boolean(x))) {
+        if (sources[ref.assetKey])
+            continue;
+        const asset = assetByKey.get(ref.assetKey);
+        if (!asset) {
+            console.warn('[buildRgbLayer] missing asset for ref', ref);
+            continue;
+        }
+        const url = await opts.resolveHref(asset.href);
+        if (opts.signal.aborted)
+            throw new DOMException('Aborted', 'AbortError');
+        sources[ref.assetKey] = { url };
+    }
+    const compositeSpec = {
+        r: c.r.assetKey,
+        g: c.g.assetKey,
+        b: c.b.assetKey
+    };
+    if (c.a && sources[c.a.assetKey])
+        compositeSpec.a = c.a.assetKey;
+    console.debug('[buildRgbLayer] multicog sources resolved', {
+        sourceKeys: Object.keys(sources),
+        composite: compositeSpec,
+        urls: Object.fromEntries(Object.entries(sources).map(([k, v]) => [k, v.url]))
+    });
+    const layer = new MultiCOGLayer({
+        id: opts.id,
+        sources,
+        composite: compositeSpec,
+        renderPipeline: buildBandRenderPipeline({
+            noDataVal: opts.noDataVal ?? null,
+            rescale: { ...opts.rescale }
+        }),
+        pool: opts.pool ?? undefined,
+        epsgResolver: opts.epsgResolver,
+        signal: opts.signal,
+        onGeoTIFFLoad: (_tiffs, info) => {
+            console.debug('[buildRgbLayer] MultiCOG onGeoTIFFLoad', {
+                id: opts.id,
+                bounds: info.geographicBounds
+            });
+            opts.onLoad?.({
+                kind: 'multicog',
+                bounds: info.geographicBounds
+            });
+        }
+    });
+    return { kind: 'multicog', layer };
+}

package/dist/components/viewers/map/AttributeTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import XIcon from '@lucide/svelte/icons/x';
-import { formatValue } from '../../../utils/format.js';
+import { formatValue } from '@walkthru-earth/objex-utils';
 
 let {
 	feature = null,
@@ -18,24 +18,24 @@ let {
 		class="absolute bottom-2 end-2 top-10 z-10 flex w-64 flex-col overflow-hidden rounded bg-card/95 text-card-foreground shadow-lg backdrop-blur-sm sm:w-72"
 	>
 		<div
-			class="flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800"
+			class="flex items-center justify-between border-b border-border px-3 py-2"
 		>
-			<h3 class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Feature Attributes</h3>
+			<h3 class="text-xs font-medium text-muted-foreground">Feature Attributes</h3>
 			{#if onClose}
 				<button
-					class="rounded p-0.5 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 dark:hover:bg-zinc-700 dark:hover:text-zinc-300"
+					class="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 					onclick={onClose}
 				>
 					<XIcon class="size-3.5" />
 				</button>
 			{/if}
 		</div>
-		<div class="flex-1 divide-y divide-zinc-100 overflow-auto dark:divide-zinc-800">
+		<div class="flex-1 divide-y divide-border overflow-auto">
 			{#each Object.entries(feature) as [key, value]}
 				<div class="px-3 py-1.5">
-					<div class="text-[10px] font-medium text-zinc-500 dark:text-zinc-400">{key}</div>
+					<div class="text-[10px] font-medium text-muted-foreground">{key}</div>
 					<div
-						class="break-all text-xs text-zinc-700 dark:text-zinc-300"
+						class="break-all text-xs text-foreground"
 						title={formatValue(value)}
 					>
 						{formatValue(value)}

package/dist/components/viewers/map/MapContainer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import { resolveBasemap } from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import { t } from '../../../i18n/index.svelte.js';
+import { appConfig } from '../../../stores/config.svelte.js';
 import { settings } from '../../../stores/settings.svelte.js';
 
 const MAP_STYLES = {
@@ -37,11 +39,34 @@ let {
 	bounds?: [number, number, number, number];
 } = $props();
 
-const resolvedStyle = $derived(style ?? MAP_STYLES[settings.resolved]);
+function toMapStyle(variant: 'light' | 'dark'): string | maplibregl.StyleSpecification {
+	const bm = resolveBasemap(appConfig.value, variant, settings.basemapId);
+	if (!bm) return MAP_STYLES[variant];
+	if (bm.type === 'raster') {
+		return {
+			version: 8,
+			sources: {
+				'objex-basemap': { type: 'raster', tiles: [bm.url], tileSize: 256 }
+			},
+			layers: [{ id: 'objex-basemap', type: 'raster', source: 'objex-basemap' }]
+		};
+	}
+	return bm.url;
+}
+
+const resolvedBasemap = $derived(
+	style ? undefined : resolveBasemap(appConfig.value, settings.resolved, settings.basemapId)
+);
+const resolvedStyle = $derived(style ?? toMapStyle(settings.resolved));
+// Stable identity for style-swap comparison: a raster StyleSpecification is a
+// fresh object on every derive, so compare by basemap id + variant instead.
+const styleKey = $derived(
+	style ? 'custom' : `${resolvedBasemap?.id ?? 'fallback'}:${settings.resolved}`
+);
 
 let containerEl: HTMLDivElement | undefined = $state();
 let map: maplibregl.Map | null = null;
-let currentStyleUrl: string | maplibregl.StyleSpecification | null = null;
+let currentStyleKey: string | null = null;
 let currentZoom = $state(2);
 let webglLost = $state(false);
 
@@ -56,7 +81,7 @@ function initMap() {
 		zoom
 	});
 
-	currentStyleUrl = resolvedStyle;
+	currentStyleKey = styleKey;
 
 	map.addControl(
 		new maplibregl.NavigationControl({ showCompass: true, visualizePitch: true }),
@@ -117,12 +142,13 @@ $effect(() => {
 	}
 });
 
-// React to theme changes — swap basemap style
+// React to theme / basemap changes — swap basemap style
 $effect(() => {
-	const newStyle = resolvedStyle;
-	if (map && currentStyleUrl !== newStyle && !style) {
-		currentStyleUrl = newStyle;
-		map.setStyle(newStyle);
+	const nextKey = styleKey;
+	const nextStyle = resolvedStyle;
+	if (map && currentStyleKey !== nextKey && !style) {
+		currentStyleKey = nextKey;
+		map.setStyle(nextStyle);
 	}
 });
 
@@ -132,13 +158,13 @@ onDestroy(() => {
 });
 </script>
 
-<div class="relative h-full w-full">
-	<div bind:this={containerEl} class="h-full w-full"></div>
+<div class="relative h-full w-full" style="touch-action: pan-x pan-y;">
+	<div bind:this={containerEl} class="h-full w-full" style="touch-action: none;"></div>
 	<!-- Zoom level indicator — positioned above nav controls -->
 	<div
-		class="pointer-events-none absolute bottom-[10rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-zinc-300 bg-white shadow-sm dark:border-zinc-600 dark:bg-zinc-800"
+		class="pointer-events-none absolute bottom-[7rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-border bg-background shadow-sm sm:bottom-[10rem]"
 	>
-		<span class="text-[10px] font-semibold tabular-nums text-zinc-600 dark:text-zinc-300">
+		<span class="text-[10px] font-semibold tabular-nums text-foreground">
 			{currentZoom.toFixed(1)}
 		</span>
 	</div>