@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/ViewerHeader.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { Tab } from '../../types.js';
+
+let { tab, badge, actions }: { tab: Tab; badge?: Snippet; actions?: Snippet } = $props();
+</script>
+
+<div
+	class="flex items-center gap-1 border-b border-border px-2 py-1.5 sm:gap-2 sm:px-4"
+>
+	<span class="max-w-[120px] truncate text-sm font-medium text-foreground sm:max-w-none">
+		{tab.name}
+	</span>
+	{#if badge}{@render badge()}{/if}
+	{#if actions}
+		<div class="ms-auto flex items-center gap-1">{@render actions()}</div>
+	{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { Tab } from '../../types.js';
+type $$ComponentProps = {
+    tab: Tab;
+    badge?: Snippet;
+    actions?: Snippet;
+};
+declare const ViewerHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewerHeader = ReturnType<typeof ViewerHeader>;
+export default ViewerHeader;

package/dist/components/viewers/ViewerRouter.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-import { getViewerKind } from '../../file-icons/index.js';
-import { getAdapter } from '../../storage/index.js';
-import type { Tab } from '../../types.js';
-import { readParquetMetadata } from '../../utils/parquet-metadata.js';
 import {
 	classifyStac,
 	detectMosaicCapable,
 	detectMultiCogCapable,
+	isStacGeoparquetSchema,
+	readParquetMetadata,
+	STAC_API_PATH_RE,
 	type StacRoutableKind
-} from '../../utils/stac.js';
-import { isStacGeoparquetSchema } from '../../utils/stac-geoparquet.js';
-import { STAC_API_PATH_RE } from '../../utils/storage-url.js';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+} from '@walkthru-earth/objex-utils';
+import { getViewerKind } from '../../file-icons/index.js';
+import { getAdapter } from '../../storage/index.js';
+import type { Tab } from '../../types.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 import CodeViewer from './CodeViewer.svelte';
 import ImageViewer from './ImageViewer.svelte';
 import MediaViewer from './MediaViewer.svelte';
@@ -164,6 +164,14 @@ function pickMapKind(classified: StacRoutableKind): 'mosaic' | 'multicog' | null
 
 {#if stacRoute.kind === 'stac' && viewerKind === 'table'}
 	<StacTabViewer {tab} mapKind={stacRoute.mapKind} classified={stacRoute.classified} />
+{:else if stacRoute.kind === 'pending' && (viewerKind === 'table' || viewerKind === 'code' || viewerKind === 'raw')}
+	<!-- STAC detection (sniff parquet schema or peek 256KB JSON) is in flight.
+	     Mounting TableViewer / CodeViewer here would let them read the URL hash,
+	     pick a default viewMode, and potentially write back over an explicit
+	     hash that StacTabViewer would otherwise own (e.g. `#map` on a STAC
+	     collection JSON). The pending window is short — render an empty pane
+	     until detection resolves and the right viewer takes over. -->
+	<div class="h-full"></div>
 {:else if viewerKind === 'table'}
 	<TableViewer {tab} />
 {:else if viewerKind === 'image'}

package/dist/components/viewers/ViewerStatus.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Loader } from '@lucide/svelte';
+import { t } from '../../i18n/index.svelte.js';
+
+let { kind, message }: { kind: 'loading' | 'error' | 'empty'; message?: string } = $props();
+</script>
+
+<div class="flex h-full items-center justify-center p-4">
+	{#if kind === 'loading'}
+		<div class="text-muted-foreground flex items-center gap-2 text-sm">
+			<Loader class="size-4 animate-spin" />
+			<span>{message ?? t('common.loading')}</span>
+		</div>
+	{:else if kind === 'error'}
+		<p class="text-destructive text-sm">{message ?? t('common.error')}</p>
+	{:else}
+		<p class="text-muted-foreground text-sm">{message}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    kind: 'loading' | 'error' | 'empty';
+    message?: string;
+};
+declare const ViewerStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewerStatus = ReturnType<typeof ViewerStatus>;
+export default ViewerStatus;

package/dist/components/viewers/ZarrMapViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { MapboxOverlay } from '@deck.gl/mapbox';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import type maplibregl from 'maplibre-gl';
 import maplibreModule from 'maplibre-gl';
 import { onDestroy, untrack } from 'svelte';
@@ -7,7 +8,7 @@ import { t } from '../../i18n/index.svelte.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types.js';
 import { createEpsgResolver } from '../../utils/cog.js';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 import {
 	detectGeoZarr,
 	ensureCodecsRegistered,
@@ -17,6 +18,7 @@ import {
 	type ZarrHierarchy,
 	type ZarrNode
 } from '../../utils/zarr.js';
+import { Slider } from '../ui/slider/index.js';
 import MapContainer from './map/MapContainer.svelte';
 
 /** Enriched selector dimension with coordinate metadata. */
@@ -490,7 +492,7 @@ async function addZarrLayer(map: maplibregl.Map) {
 		zarrLayer = new ZarrLayer(opts);
 		map.addLayer(zarrLayer);
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 		loading = false;
 	}
 }
@@ -526,7 +528,7 @@ async function tryAddGeoZarrLayer(
 		const zarrInfoSnapshot = $state.snapshot(geoZarrInfo) as GeoZarrInfo;
 		const layer = new ZarrLayer({
 			id: `geozarr-${tab.id}`,
-			source: group,
+			node: group,
 			variable: zarrInfoSnapshot.variantPath || undefined,
 			selection: {},
 			epsgResolver: dsZarrEpsg,
@@ -598,7 +600,7 @@ async function updateSelector() {
 	try {
 		await zarrLayer.setSelector(buildSelector());
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	}
 }
 
@@ -640,12 +642,12 @@ onDestroy(cleanup);
 <div class="flex h-full w-full flex-col overflow-hidden">
 	<!-- Controls bar -->
 	<div
-		class="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-zinc-200 px-3 py-1.5 dark:border-zinc-800"
+		class="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border px-3 py-1.5"
 	>
-		<label class="flex items-center gap-1 text-xs text-zinc-400">
+		<label class="flex items-center gap-1 text-xs text-muted-foreground">
 			{t('map.variable')}
 			<select
-				class="rounded border border-zinc-300 bg-white px-1.5 py-0.5 text-xs text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300"
+				class="rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground"
 				bind:value={selectedVar}
 				onchange={changeVariable}
 			>
@@ -657,24 +659,25 @@ onDestroy(cleanup);
 
 		{#each selectorDims as dim}
 			<label
-				class="flex shrink-0 items-center gap-1.5 rounded border border-zinc-200 px-2 py-0.5 text-xs text-zinc-400 dark:border-zinc-700"
+				class="flex shrink-0 items-center gap-1.5 rounded border border-border px-2 py-0.5 text-xs text-muted-foreground"
 				title={dimLabel(dim)}
 			>
-				<span class="shrink-0 font-medium text-zinc-500 dark:text-zinc-400">{dim.name}</span>
-				<input
-					type="range"
-					min="0"
+				<span class="shrink-0 font-medium text-muted-foreground">{dim.name}</span>
+				<Slider
+					type="single"
+					min={0}
 					max={dim.size - 1}
+					step={1}
 					value={selectorValues[dim.name] ?? 0}
-					oninput={(e) => {
-						selectorValues[dim.name] = +e.currentTarget.value;
+					onValueChange={(v) => {
+						selectorValues[dim.name] = v as number;
 					}}
-					onchange={updateSelector}
-					class="h-1 w-16"
+					onValueCommit={() => updateSelector()}
+					class="w-20"
 				/>
 				{#if dim.isDatetime && dim.minDate && dim.maxDate}
 					{@const dateVal = indexToDateStr(selectorValues[dim.name] ?? 0, dim)}
-					<span class="shrink-0 tabular-nums text-zinc-500">
+					<span class="shrink-0 tabular-nums text-muted-foreground">
 						{dateVal ? (dim.subDaily ? dateVal.replace('T', ' ') : dateVal) : (selectorValues[dim.name] ?? 0)}
 					</span>
 					<input
@@ -689,10 +692,10 @@ onDestroy(cleanup);
 								updateSelector();
 							}
 						}}
-						class="h-5 rounded border border-zinc-300 bg-white px-1 text-[10px] text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
+						class="h-5 rounded border border-border bg-background px-1 text-[10px] text-muted-foreground"
 					/>
 				{:else}
-					<span class="shrink-0 tabular-nums text-zinc-500">{selectorValues[dim.name] ?? 0}<span class="text-zinc-500/60">/{dim.size - 1}</span></span>
+					<span class="shrink-0 tabular-nums text-muted-foreground">{selectorValues[dim.name] ?? 0}<span class="text-muted-foreground/60">/{dim.size - 1}</span></span>
 					{#if dim.dtype}
 						<span class="shrink-0 text-[10px] text-zinc-400/70">{dim.dtype}</span>
 					{/if}
@@ -701,7 +704,7 @@ onDestroy(cleanup);
 		{/each}
 
 		{#if selectedMeta?.shape}
-			<span class="ms-auto text-xs text-zinc-400">
+			<span class="ms-auto text-xs text-muted-foreground">
 				{selectedMeta.dtype} [{selectedMeta.shape.join(', ')}]
 			</span>
 		{/if}
@@ -711,7 +714,7 @@ onDestroy(cleanup);
 	<div class="relative min-h-0 flex-1">
 		{#if error && !loading}
 			<div class="flex h-full items-center justify-center">
-				<p class="max-w-md text-center text-sm text-red-400">{error}</p>
+				<p class="max-w-md text-center text-sm text-destructive">{error}</p>
 			</div>
 		{:else}
 			<MapContainer {onMapReady} bounds={[-130, 20, -60, 55]} />

package/dist/components/viewers/ZarrViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { untrack } from 'svelte';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
+import { onDestroy, untrack } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
 import { Button } from '../ui/button/index.js';
 import {
@@ -8,9 +9,10 @@ import {
 	ResizablePaneGroup
 } from '../ui/resizable/index.js';
 import { t } from '../../i18n/index.svelte.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
-import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
+import { pickViewMode, updateUrlView } from '../../utils/url-state.js';
 import {
 	computeChunkCount,
 	computeChunkSize,
@@ -25,13 +27,16 @@ import {
 	type ZarrHierarchy,
 	type ZarrNode
 } from '../../utils/zarr.js';
+import { useIsWide } from '../../utils/media-query.svelte.js';
 
 let { tab }: { tab: Tab } = $props();
 
+const isWide = useIsWide();
+
 let loading = $state(true);
 let error = $state<string | null>(null);
-const urlView = getUrlView();
-let viewMode = $state<'inspect' | 'map'>(urlView === 'map' ? 'map' : 'inspect');
+type ZarrViewMode = 'inspect' | 'map';
+let viewMode = $state<ZarrViewMode>(pickViewMode<ZarrViewMode>(['inspect', 'map'], 'inspect'));
 
 let hierarchy = $state.raw<ZarrHierarchy | null>(null);
 let selectedNode = $state<ZarrNode | null>(null);
@@ -110,6 +115,19 @@ $effect(() => {
 	});
 });
 
+function cleanup() {
+	hierarchy = null;
+	selectedNode = null;
+	expanded = new Set();
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+onDestroy(cleanup);
+
 function setViewMode(mode: 'inspect' | 'map') {
 	viewMode = mode;
 	updateUrlView(viewMode);
@@ -133,7 +151,7 @@ async function loadHierarchy() {
 			expanded = new Set(['/']);
 		}
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	} finally {
 		loading = false;
 		updateUrlView(viewMode);
@@ -182,7 +200,7 @@ function selectStoreAttrs() {
 			{#if hasChildren}
 				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 				<span
-					class="flex size-4 shrink-0 items-center justify-center rounded hover:bg-zinc-200 dark:hover:bg-zinc-700"
+					class="flex size-4 shrink-0 items-center justify-center rounded hover:bg-accent"
 					role="button"
 					tabindex="-1"
 					aria-label={isExpanded ? 'Collapse' : 'Expand'}
@@ -192,7 +210,7 @@ function selectStoreAttrs() {
 					}}
 				>
 					<svg
-						class="size-3 text-zinc-400 transition-transform"
+						class="size-3 text-muted-foreground transition-transform"
 						class:rotate-90={isExpanded}
 						viewBox="0 0 16 16"
 						fill="currentColor"
@@ -229,10 +247,8 @@ function selectStoreAttrs() {
 			<span
 				class="truncate"
 				class:font-medium={node.kind === 'array'}
-				class:text-zinc-700={node.kind === 'array'}
-				class:dark:text-zinc-300={node.kind === 'array'}
-				class:text-zinc-600={node.kind === 'group'}
-				class:dark:text-zinc-400={node.kind === 'group'}
+				class:text-foreground={node.kind === 'array'}
+				class:text-muted-foreground={node.kind === 'group'}
 			>
 				{node.path === '/' ? '/ (root)' : node.name}
 			</span>
@@ -259,18 +275,18 @@ function selectStoreAttrs() {
 {#snippet nodeDetails()}
 	{#if showingStoreAttrs && hierarchy}
 		<div
-			class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+			class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 		>
 			{t('zarr.storeAttributes')}
 		</div>
 		<div class="flex-1 overflow-auto p-3">
 			<div
-				class="rounded border border-zinc-200 bg-zinc-100 p-2 text-xs dark:border-zinc-700 dark:bg-zinc-800"
+				class="rounded border border-border bg-muted p-2 text-xs"
 			>
 				{#each Object.entries(hierarchy.storeAttrs) as [key, value]}
 					<div class="flex gap-2 py-0.5">
 						<span class="shrink-0 font-medium text-muted-foreground">{key}:</span>
-						<span class="break-all text-zinc-700 dark:text-zinc-300">
+						<span class="break-all text-foreground">
 							{typeof value === 'string' ? value : JSON.stringify(value)}
 						</span>
 					</div>
@@ -279,7 +295,7 @@ function selectStoreAttrs() {
 		</div>
 	{:else if selectedNode}
 		<div
-			class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+			class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 		>
 			{selectedNode.path}
 		</div>
@@ -389,12 +405,12 @@ function selectStoreAttrs() {
 						<dt class="text-muted-foreground">{t('zarr.attributes')}</dt>
 						<dd>
 							<div
-								class="mt-1 rounded border border-zinc-200 bg-zinc-100 p-2 dark:border-zinc-700 dark:bg-zinc-800"
+								class="mt-1 rounded border border-border bg-muted p-2"
 							>
 								{#each Object.entries(selectedNode.attributes) as [key, value]}
 									<div class="flex gap-2 py-0.5">
 										<span class="shrink-0 font-medium text-muted-foreground">{key}:</span>
-										<span class="break-all text-zinc-700 dark:text-zinc-300">
+										<span class="break-all text-foreground">
 											{typeof value === 'string' ? value : JSON.stringify(value)}
 										</span>
 									</div>
@@ -414,10 +430,10 @@ function selectStoreAttrs() {
 
 <div class="flex h-full flex-col">
 	<!-- Header bar -->
-	<div class="shrink-0 border-b border-zinc-200 px-3 py-2 sm:px-4 dark:border-zinc-800">
+	<div class="shrink-0 border-b border-border px-3 py-2 sm:px-4">
 		<div class="flex items-center gap-1.5 sm:gap-2">
 			<span
-				class="max-w-[140px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
+				class="max-w-[140px] truncate text-sm font-medium text-foreground sm:max-w-none"
 				>{tab.name}</span
 			>
 			<Badge
@@ -459,11 +475,11 @@ function selectStoreAttrs() {
 	<!-- Content -->
 	{#if loading}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-sm text-zinc-400">{t('zarr.loading')}</p>
+			<p class="text-sm text-muted-foreground">{t('zarr.loading')}</p>
 		</div>
 	{:else if error}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="max-w-md text-center text-sm text-red-400">{error}</p>
+			<p class="max-w-md text-center text-sm text-destructive">{error}</p>
 		</div>
 	{:else if viewMode === 'map' && hasMapVars}
 		{#key viewMode}
@@ -480,56 +496,73 @@ function selectStoreAttrs() {
 		{/key}
 	{:else if hierarchy}
 		<!-- Inspect mode (tree + detail panel) -->
-		<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
-			<!-- Left: Tree view -->
-			<ResizablePane defaultSize={40} minSize={20}>
-				<div class="flex h-full flex-col">
-					<div
-						class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+		{#snippet zarrTree()}
+			<div class="flex h-full flex-col">
+				<div
+					class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
+				>
+					{t('zarr.contents')}
+					<span class="ms-1 normal-case tracking-normal"
+						>({hierarchy!.totalNodes})</span
 					>
-						{t('zarr.contents')}
-						<span class="ms-1 normal-case tracking-normal"
-							>({hierarchy.totalNodes})</span
+				</div>
+				<div class="flex-1 overflow-auto">
+					{#if hasStoreAttrs}
+						<button
+							class="flex w-full items-center gap-2 border-b border-zinc-100 px-3 py-1 text-xs hover:bg-zinc-100 dark:border-zinc-800/50 dark:hover:bg-zinc-800/50"
+							class:bg-blue-50={showingStoreAttrs}
+							class:dark:bg-blue-950={showingStoreAttrs}
+							onclick={selectStoreAttrs}
 						>
-					</div>
-					<div class="flex-1 overflow-auto">
-						{#if hasStoreAttrs}
-							<button
-								class="flex w-full items-center gap-2 border-b border-zinc-100 px-3 py-1 text-xs hover:bg-zinc-100 dark:border-zinc-800/50 dark:hover:bg-zinc-800/50"
-								class:bg-blue-50={showingStoreAttrs}
-								class:dark:bg-blue-950={showingStoreAttrs}
-								onclick={selectStoreAttrs}
+							<span class="size-4 shrink-0"></span>
+							<svg
+								class="size-3.5 shrink-0 text-muted-foreground"
+								viewBox="0 0 16 16"
+								fill="currentColor"
 							>
-								<span class="size-4 shrink-0"></span>
-								<svg
-									class="size-3.5 shrink-0 text-zinc-400"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-1.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-								<span class="truncate font-medium text-muted-foreground">
-									{t('zarr.storeAttributes')}
-								</span>
-							</button>
-						{/if}
-						{@render treeNode(hierarchy.root, 0)}
-					</div>
+								<path
+									fill-rule="evenodd"
+									d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-1.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							<span class="truncate font-medium text-muted-foreground">
+								{t('zarr.storeAttributes')}
+							</span>
+						</button>
+					{/if}
+					{@render treeNode(hierarchy!.root, 0)}
 				</div>
-			</ResizablePane>
+			</div>
+		{/snippet}
+
+		{#if isWide.value}
+			<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
+				<!-- Left: Tree view -->
+				<ResizablePane defaultSize={40} minSize={20}>
+					{@render zarrTree()}
+				</ResizablePane>
 
-			<ResizableHandle />
+				<ResizableHandle />
 
-			<!-- Right: Detail panel -->
-			<ResizablePane defaultSize={60} minSize={30}>
-				<div class="flex h-full flex-col">
+				<!-- Right: Detail panel -->
+				<ResizablePane defaultSize={60} minSize={30}>
+					<div class="flex h-full flex-col">
+						{@render nodeDetails()}
+					</div>
+				</ResizablePane>
+			</ResizablePaneGroup>
+		{:else}
+			<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+				<!-- Tree pane: fixed height so it doesn't crowd the detail section -->
+				<div class="max-h-64 shrink-0 border-b border-border">
+					{@render zarrTree()}
+				</div>
+				<!-- Detail panel: grows to fill remaining space -->
+				<div class="flex flex-1 flex-col">
 					{@render nodeDetails()}
 				</div>
-			</ResizablePane>
-		</ResizablePaneGroup>
+			</div>
+		{/if}
 	{/if}
 </div>

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { ChannelRef, CogAsset } from '@walkthru-earth/objex-utils';
+import { t } from '../../../i18n/index.svelte.js';
+
+type Props = {
+	channel: 'r' | 'g' | 'b' | 'a';
+	label: string;
+	colorClass: string;
+	assets: CogAsset[];
+	value: ChannelRef;
+	onChange: (next: ChannelRef) => void;
+	allowNone?: boolean;
+};
+
+let { channel, label, colorClass, assets, value, onChange, allowNone = false }: Props = $props();
+
+const assetByKey = $derived(new Map(assets.map((a) => [a.key, a])));
+const currentAsset = $derived(assetByKey.get(value.assetKey) ?? null);
+const bandCount = $derived(currentAsset?.bandCount ?? 1);
+const bandIndices = $derived(Array.from({ length: bandCount }, (_, i) => i));
+
+function assetLabel(a: CogAsset): string {
+	const cn = a.eoCommon[0];
+	const base = cn ? `${a.key} (${cn})` : a.key;
+	return a.bandCount > 1 ? `${base} · ${a.bandCount} bands` : base;
+}
+
+function bandLabel(i: number, asset: CogAsset | null): string {
+	if (!asset) return `${t('cog.band')} ${i + 1}`;
+	const cn = asset.eoCommon[i];
+	return cn ? `${t('cog.band')} ${i + 1} (${cn})` : `${t('cog.band')} ${i + 1}`;
+}
+
+function setAsset(key: string): void {
+	if (channel === 'a' && allowNone && key === '') {
+		onChange({ assetKey: '', bandIndex: 0 });
+		return;
+	}
+	const target = assetByKey.get(key);
+	const maxIdx = Math.max(0, (target?.bandCount ?? 1) - 1);
+	const nextBand = Math.min(value.bandIndex, maxIdx);
+	onChange({ assetKey: key, bandIndex: nextBand });
+}
+
+function setBand(idx: number): void {
+	onChange({ assetKey: value.assetKey, bandIndex: idx });
+}
+</script>
+
+<div class="flex items-start gap-2">
+	<span class="mt-1 w-3 shrink-0 font-bold {colorClass}">{label}</span>
+	<div class="flex min-w-0 flex-1 flex-col gap-1 sm:flex-row sm:items-center">
+		<select
+			class="min-w-0 flex-1 truncate rounded border border-border bg-background px-1.5 py-0.5 text-xs"
+			aria-label={`${label} ${t('cog.asset')}`}
+			value={value.assetKey}
+			onchange={(e) => setAsset((e.target as HTMLSelectElement).value)}
+		>
+			{#if allowNone}
+				<option value="">{t('map.multiCogChannelNone')}</option>
+			{/if}
+			{#each assets as a (a.key)}
+				<option value={a.key}>{assetLabel(a)}</option>
+			{/each}
+		</select>
+		{#if currentAsset && bandCount > 1}
+			<select
+				class="min-w-0 flex-1 truncate rounded border border-border bg-background px-1.5 py-0.5 text-xs sm:flex-[0_1_auto] sm:min-w-24"
+				aria-label={`${label} ${t('cog.band')}`}
+				value={value.bandIndex}
+				onchange={(e) => setBand(Number((e.target as HTMLSelectElement).value))}
+			>
+				{#each bandIndices as i (i)}
+					<option value={i}>{bandLabel(i, currentAsset)}</option>
+				{/each}
+			</select>
+		{:else if currentAsset}
+			<span class="min-w-0 truncate px-1.5 py-0.5 text-[10px] text-muted-foreground sm:min-w-24">
+				{t('cog.band')} 1
+			</span>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { ChannelRef, CogAsset } from '@walkthru-earth/objex-utils';
+type Props = {
+    channel: 'r' | 'g' | 'b' | 'a';
+    label: string;
+    colorClass: string;
+    assets: CogAsset[];
+    value: ChannelRef;
+    onChange: (next: ChannelRef) => void;
+    allowNone?: boolean;
+};
+declare const ChannelPicker: import("svelte").Component<Props, {}, "">;
+type ChannelPicker = ReturnType<typeof ChannelPicker>;
+export default ChannelPicker;