@walkthru-earth/objex 1.1.0 → 1.2.0

package/README.md

@@ -63,7 +63,7 @@ import { readParquetMetadata } from '@walkthru-earth/objex/utils/parquet-metadat
 import { getFileTypeInfo } from '@walkthru-earth/objex/file-icons';
 ```
 
-Requires `svelte ^5` and `@sveltejs/kit ^2` as peer dependencies. Heavy deps (DuckDB, deck.gl, MapLibre, Arrow, hyparquet) are optional peers -- only install what you need.
+Requires `svelte ^5` and `@sveltejs/kit ^2` as peer dependencies. Heavy deps (DuckDB, deck.gl, MapLibre, Arrow, hyparquet, hyparquet-compressors, yaml) are optional peers -- only install what you need.
 
 ### `@walkthru-earth/objex-utils` -- Pure TypeScript Utilities
 
@@ -86,6 +86,8 @@ import {
 } from '@walkthru-earth/objex-utils';
 ```
 
+Full per-module reference docs: [`packages/objex-utils/docs/`](packages/objex-utils/docs/README.md).
+
 ### Exports
 
 | Export path | What |

package/dist/components/browser/FileBrowser.svelte

@@ -15,6 +15,7 @@ import {
 	toggleSortField
 } from '../../utils/file-sort.js';
 import { detectZarrMarkers } from '../../utils/zarr.js';
+import { openZarrTab } from '../../utils/zarr-tab.js';
 import Breadcrumb from './Breadcrumb.svelte';
 import CreateFolderDialog from './CreateFolderDialog.svelte';
 import DeleteConfirmDialog from './DeleteConfirmDialog.svelte';
@@ -37,19 +38,22 @@ let showWriteActions = $derived(browser.canWrite && !safeLock.locked);
 
 const zarrDetection = $derived(detectZarrMarkers(browser.entries.map((e: FileEntry) => e.name)));
 
-function openAsZarr() {
-	if (!browser.activeConnection) return;
-	const prefix = browser.currentPrefix.replace(/\/+$/, '');
-	const name = prefix.split('/').pop() || browser.activeConnection.bucket;
-	tabs.open({
-		id: `${browser.activeConnection.id}:${prefix}/`,
-		name,
-		path: `${prefix}/`,
-		source: 'remote',
-		connectionId: browser.activeConnection.id,
-		extension: 'zarr'
-	});
-}
+// Auto-open Zarr viewer when markers are detected in the current directory.
+// Uses a Set to prevent re-triggering when navigating back to a previously opened store.
+const autoOpenedPrefixes = new Set<string>();
+$effect(() => {
+	if (zarrDetection.detected && browser.activeConnection) {
+		const prefix = browser.currentPrefix;
+		if (!autoOpenedPrefixes.has(prefix)) {
+			autoOpenedPrefixes.add(prefix);
+			openZarrTab(prefix, {
+				source: 'remote',
+				connectionId: browser.activeConnection.id,
+				bucketFallback: browser.activeConnection.bucket
+			});
+		}
+	}
+});
 
 const sortedAndFilteredEntries = $derived.by(() => {
 	let result = browser.entries;
@@ -177,7 +181,14 @@ function handleRename(entry: FileEntry) {
 				variant="outline"
 				size="sm"
 				class="h-6 gap-1 px-2 text-[11px]"
-				onclick={openAsZarr}
+				onclick={() => {
+					if (!browser.activeConnection) return;
+					openZarrTab(browser.currentPrefix, {
+						source: 'remote',
+						connectionId: browser.activeConnection.id,
+						bucketFallback: browser.activeConnection.bucket
+					});
+				}}
 			>
 				{t('fileBrowser.openAsZarr')}
 			</Button>

package/dist/components/browser/FileTreeSidebar.svelte

@@ -19,6 +19,8 @@ import { tabs } from '../../stores/tabs.svelte.js';
 import type { Connection, FileEntry } from '../../types.js';
 import { getNativeScheme } from '../../utils/cloud-url.js';
 import { syncUrlParam } from '../../utils/url-state.js';
+import { detectZarrMarkers } from '../../utils/zarr.js';
+import { openZarrTab } from '../../utils/zarr-tab.js';
 
 let {
 	connection,
@@ -48,6 +50,8 @@ let rootContinuationToken = $state<string | undefined>();
 let rootHasMore = $state(false);
 let filterQuery = $state('');
 let scrollEl = $state<HTMLElement>();
+/** Paths of directories detected as Zarr stores (by marker files in children). */
+let detectedZarrPaths = $state(new Set<string>());
 
 const filteredNodes = $derived(
 	filterQuery ? filterTree(rootNodes, filterQuery.toLowerCase()) : rootNodes
@@ -156,6 +160,16 @@ async function toggleFolder(node: TreeNode) {
 	node.expanded = !node.expanded;
 }
 
+function openAsZarr(dirPath: string) {
+	const path = dirPath.endsWith('/') ? dirPath : `${dirPath}/`;
+	openZarrTab(path, {
+		source: 'remote',
+		connectionId: connection.id,
+		bucketFallback: connection.bucket
+	});
+	syncUrlParam(connection, path);
+}
+
 function openFile(entry: FileEntry) {
 	tabs.open({
 		id: `${connection.id}:${entry.path}`,
@@ -175,12 +189,27 @@ function isViewerDir(entry: FileEntry): boolean {
 	return entry.is_dir && VIEWER_DIR_EXTENSIONS.has(entry.extension);
 }
 
-function handleNodeClick(node: TreeNode) {
+/** Whether a directory should render with the Zarr icon (either by extension or marker detection). */
+function isZarrDir(entry: FileEntry): boolean {
+	return isViewerDir(entry) || detectedZarrPaths.has(entry.path);
+}
+
+async function handleNodeClick(node: TreeNode) {
 	if (isViewerDir(node.entry)) {
-		// .zarr directories open in the viewer (clicking chevron expands)
-		openFile(node.entry);
+		// .zarr / .zr3 directories open in the viewer (clicking chevron expands)
+		openAsZarr(node.entry.path);
 	} else if (node.entry.is_dir) {
-		toggleFolder(node);
+		// Load children if needed, then check for zarr markers
+		if (node.children.length === 0) {
+			await loadChildren(node);
+		}
+		const zarrCheck = detectZarrMarkers(node.children.map((c) => c.entry.name));
+		if (zarrCheck.detected) {
+			detectedZarrPaths.add(node.entry.path);
+			openAsZarr(node.entry.path);
+		}
+		// Always expand so user can also browse contents
+		node.expanded = !node.expanded;
 	} else {
 		openFile(node.entry);
 	}
@@ -349,6 +378,7 @@ async function loadRoot() {
 	rootLoading = true;
 	rootContinuationToken = undefined;
 	rootHasMore = false;
+	detectedZarrPaths = new Set();
 	try {
 		const adapter = getAdapter('remote', connection.id);
 		const prefix = connection.rootPrefix ?? '';
@@ -488,8 +518,8 @@ async function loadMoreRoot() {
 					onclick={() => handleNodeClick(node)}
 				>
 					<FileTypeIcon
-						extension={entry.extension}
-						isDir={entry.is_dir && !isViewerDir(entry)}
+						extension={isZarrDir(entry) ? 'zarr' : entry.extension}
+						isDir={entry.is_dir && !isZarrDir(entry)}
 						isOpen={node.expanded}
 						class="size-3.5 shrink-0"
 					/>
@@ -510,6 +540,12 @@ async function loadMoreRoot() {
 					{t('fileTree.open')}
 				</ContextMenu.Item>
 				<ContextMenu.Separator />
+			{:else if detectedZarrPaths.has(entry.path)}
+				<ContextMenu.Item onclick={() => openAsZarr(entry.path)}>
+					<ExternalLinkIcon class="me-2 size-3.5" />
+					{t('fileBrowser.openAsZarr')}
+				</ContextMenu.Item>
+				<ContextMenu.Separator />
 			{/if}
 
 			<ContextMenu.Item onclick={() => copyToClipboard(buildHttpUrl(entry.path))}>

package/dist/components/layout/ConnectionDialog.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 import CheckIcon from '@lucide/svelte/icons/check';
+import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 import CloudIcon from '@lucide/svelte/icons/cloud';
+import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+import GlobeIcon from '@lucide/svelte/icons/globe';
 import LinkIcon from '@lucide/svelte/icons/link';
 import Loader2Icon from '@lucide/svelte/icons/loader-2';
 import LockIcon from '@lucide/svelte/icons/lock';
 import PlugZapIcon from '@lucide/svelte/icons/plug-zap';
+import ShieldIcon from '@lucide/svelte/icons/shield';
 import XIcon from '@lucide/svelte/icons/x';
 import { Button } from '../ui/button/index.js';
 import { Input } from '../ui/input/index.js';
@@ -20,10 +24,12 @@ import { Switch } from '../ui/switch/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import {
 	buildEndpointFromTemplate,
+	CORS_HELP,
 	getProvider,
 	PROVIDER_IDS,
 	PROVIDERS,
-	type ProviderId
+	type ProviderId,
+	READ_ONLY_HELP
 } from '../../storage/providers.js';
 import { connections } from '../../stores/connections.svelte.js';
 import type { Connection, ConnectionConfig } from '../../types.js';
@@ -71,6 +77,8 @@ let isAzure = $derived(provider === 'azure');
 let hasRegions = $derived(providerDef.regions.length > 0);
 let needsRegion = $derived(providerDef.needsRegion);
 let bucketLabel = $derived(providerDef.bucketLabel ?? t('connection.bucket'));
+let corsHelp = $derived(CORS_HELP[provider]);
+let readOnlyHelp = $derived(READ_ONLY_HELP[provider]);
 
 let isEditMode = $derived(editConnection !== null && editConnection !== undefined);
 let title = $derived(isEditMode ? t('connection.editTitle') : t('connection.newTitle'));
@@ -433,6 +441,97 @@ async function handleTestConnection() {
 				</form>
 			{/if}
 
+			<!-- CORS Help -->
+			{#if corsHelp}
+				<details class="group rounded-md border border-border">
+					<summary class="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+						<ChevronRightIcon class="size-3.5 shrink-0 transition-transform group-open:rotate-90" />
+						<GlobeIcon class="size-3.5 shrink-0" />
+						{t('connection.corsTitle')}
+					</summary>
+					<div class="flex flex-col gap-2.5 border-t border-border px-3 py-2.5">
+						{#if corsHelp.defaultEnabled}
+							<div class="flex items-center gap-1.5 text-xs text-green-700 dark:text-green-400">
+								<CheckIcon class="size-3 shrink-0" />
+								<span>{t('connection.corsDefault')}</span>
+							</div>
+						{:else}
+							<p class="text-xs text-muted-foreground">{t('connection.corsRequired')}</p>
+						{/if}
+
+						{#if corsHelp.note}
+							<p class="text-xs text-muted-foreground">{corsHelp.note}</p>
+						{/if}
+
+						{#if corsHelp.docsUrl}
+							<a
+								href={corsHelp.docsUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+							>
+								<ExternalLinkIcon class="size-3 shrink-0" />
+								{t('connection.corsDocs')}
+							</a>
+						{/if}
+
+						{#if corsHelp.cliSteps && corsHelp.cliSteps.length > 0}
+							<details class="group/cli">
+								<summary class="flex cursor-pointer list-none items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+									<ChevronRightIcon class="size-3 shrink-0 transition-transform group-open/cli:rotate-90" />
+									{t('connection.corsCliTitle')}
+								</summary>
+								<div class="mt-1.5 flex flex-col gap-1.5">
+									{#each corsHelp.cliSteps as step, i}
+										<pre class="overflow-x-auto rounded bg-muted px-2.5 py-2 text-[11px] leading-relaxed">{step}</pre>
+									{/each}
+								</div>
+							</details>
+						{/if}
+					</div>
+				</details>
+			{/if}
+
+			<!-- Read-Only Access Help -->
+			{#if readOnlyHelp}
+				<details class="group rounded-md border border-border">
+					<summary class="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+						<ChevronRightIcon class="size-3.5 shrink-0 transition-transform group-open:rotate-90" />
+						<ShieldIcon class="size-3.5 shrink-0" />
+						{t('connection.readOnlyTitle')}
+					</summary>
+					<div class="flex flex-col gap-2.5 border-t border-border px-3 py-2.5">
+						<p class="text-xs text-muted-foreground">{readOnlyHelp.note}</p>
+
+						{#if readOnlyHelp.docsUrl}
+							<a
+								href={readOnlyHelp.docsUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+							>
+								<ExternalLinkIcon class="size-3 shrink-0" />
+								{t('connection.readOnlyDocs')}
+							</a>
+						{/if}
+
+						{#if readOnlyHelp.cliSteps && readOnlyHelp.cliSteps.length > 0}
+							<details class="group/ro">
+								<summary class="flex cursor-pointer list-none items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+									<ChevronRightIcon class="size-3 shrink-0 transition-transform group-open/ro:rotate-90" />
+									{t('connection.readOnlyCliTitle')}
+								</summary>
+								<div class="mt-1.5 flex flex-col gap-1.5">
+									{#each readOnlyHelp.cliSteps as step, i}
+										<pre class="overflow-x-auto rounded bg-muted px-2.5 py-2 text-[11px] leading-relaxed">{step}</pre>
+									{/each}
+								</div>
+							</details>
+						{/if}
+					</div>
+				</details>
+			{/if}
+
 			<!-- Test Connection Result -->
 			{#if testResult === 'success'}
 				<div class="flex items-center gap-2 rounded-md border border-green-500/30 bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-400">

package/dist/components/layout/Sidebar.svelte

@@ -23,7 +23,7 @@ import { t } from '../../i18n/index.svelte.js';
 import { browser } from '../../stores/browser.svelte.js';
 import { connections } from '../../stores/connections.svelte.js';
 import { credentialStore, loadFromNative } from '../../stores/credentials.svelte.js';
-import { tabs } from '../../stores/tabs.svelte.js';
+import { eagerUrlTabId, tabs } from '../../stores/tabs.svelte.js';
 import type { Connection } from '../../types.js';
 import { type DetectedHost, detectHostBucket } from '../../utils/host-detection.js';
 import { parseStorageUrl } from '../../utils/storage-url.js';
@@ -58,16 +58,25 @@ $effect(() => {
 });
 
 async function handleAutoDetection() {
-	// Direct file URLs (e.g. ?url=https://...file.parquet) are opened eagerly
-	// in +page.svelte so they work on mobile. Skip if tab already exists.
 	const url = new URL(window.location.href);
 	const rawUrl = url.searchParams.get('url');
-	if (rawUrl && tabs.items.some((t) => t.id === `url:${rawUrl}`)) {
+
+	const detected = detectHostBucket();
+	if (!detected) {
+		// No recognizable host — let the eager URL tab handle it
 		return;
 	}
 
-	const detected = detectHostBucket();
-	if (!detected) return;
+	// A recognizable storage provider was detected. Close the eagerly-opened
+	// URL tab (if any) so we can re-open it with a proper connectionId that
+	// provides S3 credentials and endpoint config for DuckDB httpfs.
+	if (rawUrl) {
+		const eagerTabId = eagerUrlTabId(rawUrl);
+		const eagerTab = tabs.items.find((t) => t.id === eagerTabId);
+		if (eagerTab) {
+			tabs.close(eagerTabId);
+		}
+	}
 
 	const hasUrlParam = url.searchParams.has('url');
 
@@ -85,27 +94,36 @@ async function handleAutoDetection() {
 			const prefixParam = parsed.prefix;
 
 			if (prefixParam && !prefixParam.endsWith('/')) {
-				// It's a file — browse to its parent folder and open it
-				const parentPrefix = prefixParam.includes('/') ? prefixParam.replace(/\/[^/]*$/, '/') : '';
-				browser.browse(conn, parentPrefix || undefined);
 				const fileName = prefixParam.split('/').pop() || prefixParam;
 				const ext = fileName.includes('.') ? fileName.split('.').pop()!.toLowerCase() : '';
-				const tabId = `${conn.id}:${prefixParam}`;
-				tabs.open({
-					id: tabId,
-					name: fileName,
-					path: prefixParam,
-					source: 'remote',
-					connectionId: conn.id,
-					extension: ext
-				});
-				// Fire-and-forget: fetch file size via HEAD request
-				fetch(url.searchParams.get('url')!, { method: 'HEAD' })
-					.then((res) => {
-						const cl = res.headers.get('content-length');
-						if (cl) tabs.update(tabId, { size: Number(cl) });
-					})
-					.catch(() => {});
+				if (ext) {
+					// It's a file — browse to its parent folder and open it
+					const parentPrefix = prefixParam.includes('/')
+						? prefixParam.replace(/\/[^/]*$/, '/')
+						: '';
+					browser.browse(conn, parentPrefix || undefined);
+					const tabId = `${conn.id}:${prefixParam}`;
+					tabs.open({
+						id: tabId,
+						name: fileName,
+						path: prefixParam,
+						source: 'remote',
+						connectionId: conn.id,
+						extension: ext
+					});
+					// Fire-and-forget: fetch file size via HEAD request
+					fetch(url.searchParams.get('url')!, { method: 'HEAD' })
+						.then((res) => {
+							const cl = res.headers.get('content-length');
+							if (cl) tabs.update(tabId, { size: Number(cl) });
+						})
+						.catch(() => {});
+				} else {
+					// No extension — likely a directory (e.g. Zarr store without .zarr suffix).
+					// Browse into it and let FileBrowser's auto-detection handle Zarr/etc.
+					const dirPrefix = `${prefixParam}/`;
+					browser.browse(conn, dirPrefix);
+				}
 			} else if (prefixParam) {
 				// It's a directory prefix
 				browser.browse(conn, prefixParam);

package/dist/components/viewers/CodeViewer.svelte

@@ -13,6 +13,7 @@ import { handleLoadError } from '../../utils/error.js';
 import { extensionToShikiLang, highlightCode } from '../../utils/shiki';
 import { buildHttpsUrl } from '../../utils/url.js';
 import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+import { openZarrTab } from '../../utils/zarr-tab.js';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -49,6 +50,8 @@ type JsonKind =
 	| 'stac-collection'
 	| 'stac-item'
 	| 'kepler'
+	| 'zarr-v2'
+	| 'zarr-v3'
 	| null;
 
 /** Detect if a .py file is a marimo notebook (first 512 bytes contain both markers) */
@@ -74,6 +77,8 @@ function detectJsonKind(code: string): JsonKind {
 			if (obj.type === 'Collection' && obj.stac_version) return 'stac-collection';
 			if (obj.type === 'Feature' && obj.stac_version) return 'stac-item';
 			if (obj.info?.app === 'kepler.gl' && obj.config) return 'kepler';
+			if (obj.zarr_format === 3) return 'zarr-v3';
+			if (obj.zarr_format === 2) return 'zarr-v2';
 		}
 	} catch {
 		// not valid JSON
@@ -353,6 +358,24 @@ async function copyCode() {
 				>
 					{viewMode === 'kepler' ? t('code.code') : t('code.openKepler')}
 				</Button>
+			{:else if jsonKind === 'zarr-v3' || jsonKind === 'zarr-v2'}
+				<Badge variant="outline" class="hidden border-purple-200 text-purple-600 sm:inline-flex dark:border-purple-800 dark:text-purple-300">
+					{jsonKind === 'zarr-v3' ? 'Zarr v3' : 'Zarr v2'}
+				</Badge>
+				<Button
+					variant="outline"
+					size="sm"
+					class="h-7 gap-1 px-2 text-xs border-purple-300 text-purple-600 hover:bg-purple-50 hover:text-purple-700 dark:border-purple-700 dark:text-purple-400 dark:hover:bg-purple-950"
+					onclick={() => {
+						const parentPath = tab.path.replace(/[^/]+$/, '');
+						openZarrTab(parentPath, {
+							source: tab.source as 'remote' | 'url',
+							connectionId: tab.connectionId
+						});
+					}}
+				>
+					{t('fileBrowser.openAsZarr')}
+				</Button>
 			{/if}
 
 			{#if isMarimo}

package/dist/components/viewers/CogControls.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+import { t } from '../../i18n/index.svelte.js';
+import {
+	type BandConfig,
+	COLOR_RAMP_STOPS,
+	type ColorRampId,
+	DEFAULT_RESCALE,
+	type RescaleConfig,
+	rampToGradientCss
+} from '../../utils/cog.js';
+
+let {
+	bandCount,
+	bandConfig,
+	onConfigChange,
+	rescale,
+	rescaleApplicable,
+	onRescaleChange
+}: {
+	bandCount: number;
+	bandConfig: BandConfig;
+	onConfigChange: (config: BandConfig) => void;
+	rescale: RescaleConfig;
+	rescaleApplicable: boolean;
+	onRescaleChange: (rescale: RescaleConfig) => void;
+} = $props();
+
+const RAMP_IDS: ColorRampId[] = ['grayscale', 'terrain', 'viridis', 'magma', 'turbo', 'spectral'];
+
+function bandOptions(count: number): { value: number; label: string }[] {
+	return Array.from({ length: count }, (_, i) => ({
+		value: i,
+		label: `${t('cog.band')} ${i + 1}`
+	}));
+}
+
+function setMode(mode: 'rgb' | 'single') {
+	onConfigChange({ ...bandConfig, mode });
+}
+
+function setBand(key: 'rBand' | 'gBand' | 'bBand' | 'band', value: number) {
+	onConfigChange({ ...bandConfig, [key]: value });
+}
+
+function setRamp(id: ColorRampId) {
+	onConfigChange({ ...bandConfig, colorRamp: id });
+}
+
+function setRescaleMin(value: number) {
+	// Keep min strictly less than max, clamp to [0, 1].
+	const clamped = Math.max(0, Math.min(1, value));
+	const next = Math.min(clamped, rescale.max - 0.001);
+	onRescaleChange({ min: Number.isFinite(next) ? next : 0, max: rescale.max });
+}
+
+function setRescaleMax(value: number) {
+	const clamped = Math.max(0, Math.min(1, value));
+	const next = Math.max(clamped, rescale.min + 0.001);
+	onRescaleChange({ min: rescale.min, max: Number.isFinite(next) ? next : 1 });
+}
+
+function resetRescale() {
+	onRescaleChange({ ...DEFAULT_RESCALE });
+}
+</script>
+
+<div
+	class="absolute right-2 top-10 z-10 w-52 rounded bg-card/90 p-2.5 text-xs text-card-foreground backdrop-blur-sm"
+>
+	<!-- Mode toggle -->
+	<div class="mb-2 flex gap-1">
+		<button
+			class="flex-1 rounded px-2 py-1 transition-colors"
+			class:bg-primary={bandConfig.mode === 'rgb'}
+			class:text-primary-foreground={bandConfig.mode === 'rgb'}
+			class:bg-muted={bandConfig.mode !== 'rgb'}
+			onclick={() => setMode('rgb')}
+		>
+			RGB
+		</button>
+		<button
+			class="flex-1 rounded px-2 py-1 transition-colors"
+			class:bg-primary={bandConfig.mode === 'single'}
+			class:text-primary-foreground={bandConfig.mode === 'single'}
+			class:bg-muted={bandConfig.mode !== 'single'}
+			onclick={() => setMode('single')}
+		>
+			{t('cog.singleBand')}
+		</button>
+	</div>
+
+	{#if bandConfig.mode === 'rgb'}
+		<!-- RGB band selectors -->
+		<div class="space-y-1">
+			{#each [
+				{ key: 'rBand' as const, label: 'R', color: 'text-red-400' },
+				{ key: 'gBand' as const, label: 'G', color: 'text-green-400' },
+				{ key: 'bBand' as const, label: 'B', color: 'text-blue-400' }
+			] as ch}
+				<div class="flex items-center gap-2">
+					<span class="w-3 font-bold {ch.color}">{ch.label}</span>
+					<select
+						class="flex-1 rounded border border-border bg-background px-1.5 py-0.5 text-xs"
+						value={bandConfig[ch.key]}
+						onchange={(e) =>
+							setBand(ch.key, Number((e.target as HTMLSelectElement).value))}
+					>
+						{#each bandOptions(bandCount) as opt}
+							<option value={opt.value}>{opt.label}</option>
+						{/each}
+					</select>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<!-- Single band selector -->
+		<div class="mb-2 flex items-center gap-2">
+			<span class="text-muted-foreground">{t('cog.band')}</span>
+			<select
+				class="flex-1 rounded border border-border bg-background px-1.5 py-0.5 text-xs"
+				value={bandConfig.band}
+				onchange={(e) =>
+					setBand('band', Number((e.target as HTMLSelectElement).value))}
+			>
+				{#each bandOptions(bandCount) as opt}
+					<option value={opt.value}>{opt.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Color ramp picker -->
+		<div class="space-y-1">
+			<span class="text-muted-foreground">{t('cog.colorRamp')}</span>
+			<div class="grid grid-cols-2 gap-1">
+				{#each RAMP_IDS as id}
+					<button
+						class="flex flex-col items-stretch rounded border px-1 py-0.5 transition-colors {bandConfig.colorRamp === id ? 'border-primary bg-muted' : 'border-transparent'}"
+						onclick={() => setRamp(id)}
+						title={id}
+					>
+						<div
+							class="h-2.5 w-full rounded-sm"
+							style="background: {rampToGradientCss(id)}"
+						></div>
+						<span class="mt-0.5 text-center text-[10px] capitalize text-muted-foreground">
+							{id}
+						</span>
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if rescaleApplicable}
+		<!-- GPU LinearRescale slider. Default uint pipeline only. -->
+		<div class="mt-2 space-y-1 border-t border-border pt-2">
+			<div class="flex items-center justify-between">
+				<span class="text-muted-foreground">{t('cog.rescale')}</span>
+				<button
+					class="text-[10px] text-muted-foreground hover:text-card-foreground"
+					onclick={resetRescale}
+				>
+					{t('cog.rescaleReset')}
+				</button>
+			</div>
+			<div class="flex items-center gap-1.5">
+				<input
+					type="number"
+					min="0"
+					max="1"
+					step="0.01"
+					class="w-14 rounded border border-border bg-background px-1 py-0.5 text-[11px] tabular-nums"
+					value={rescale.min}
+					oninput={(e) => setRescaleMin(Number((e.target as HTMLInputElement).value))}
+				/>
+				<input
+					type="range"
+					min="0"
+					max="1"
+					step="0.01"
+					class="flex-1 accent-primary"
+					value={rescale.min}
+					oninput={(e) => setRescaleMin(Number((e.target as HTMLInputElement).value))}
+				/>
+			</div>
+			<div class="flex items-center gap-1.5">
+				<input
+					type="number"
+					min="0"
+					max="1"
+					step="0.01"
+					class="w-14 rounded border border-border bg-background px-1 py-0.5 text-[11px] tabular-nums"
+					value={rescale.max}
+					oninput={(e) => setRescaleMax(Number((e.target as HTMLInputElement).value))}
+				/>
+				<input
+					type="range"
+					min="0"
+					max="1"
+					step="0.01"
+					class="flex-1 accent-primary"
+					value={rescale.max}
+					oninput={(e) => setRescaleMax(Number((e.target as HTMLInputElement).value))}
+				/>
+			</div>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+import { type BandConfig, type RescaleConfig } from '../../utils/cog.js';
+type $$ComponentProps = {
+    bandCount: number;
+    bandConfig: BandConfig;
+    onConfigChange: (config: BandConfig) => void;
+    rescale: RescaleConfig;
+    rescaleApplicable: boolean;
+    onRescaleChange: (rescale: RescaleConfig) => void;
+};
+declare const CogControls: import("svelte").Component<$$ComponentProps, {}, "">;
+type CogControls = ReturnType<typeof CogControls>;
+export default CogControls;