@walkthru-earth/objex 1.2.0 → 1.3.0

package/README.md

@@ -20,7 +20,7 @@ graph LR
 
 - **Browse** cloud storage (S3, GCS, Azure, R2, B2, DigitalOcean, Wasabi, Storj, Hetzner, Contabo, Linode, OVHcloud, MinIO, direct URLs)
 - **Query** Parquet, CSV, JSONL with SQL (DuckDB-WASM, cancellable queries)
-- **Visualize** GeoParquet, GeoJSON, COG, PMTiles, FlatGeobuf, Zarr on maps (MapLibre + deck.gl)
+- **Visualize** GeoParquet, GeoJSON, COG, PMTiles, FlatGeobuf, Zarr (incl. GeoZarr), STAC catalogs, and stac-geoparquet on maps (MapLibre + deck.gl)
 - **View** 100+ file formats: code (30+ languages), Jupyter notebooks, PDF, 3D models, archives, media
 - **Share** via URL -- `?url=<storage-url>#<view>` encodes full viewer state
 - **i18n** -- English + Arabic with automatic RTL layout
@@ -32,7 +32,8 @@ graph LR
 |----------|---------|
 | Tabular | Parquet, CSV, TSV, JSONL, NDJSON |
 | Geo vector | GeoParquet, GeoJSON, Shapefile, GeoPackage, FlatGeobuf |
-| Geo raster | COG, PMTiles, Zarr v2/v3 |
+| Geo raster | COG, PMTiles, Zarr v2/v3, GeoZarr |
+| Geo catalog | STAC Item / Collection / Catalog / FeatureCollection (JSON), stac-geoparquet |
 | Point cloud | COPC, LAZ, LAS |
 | Notebooks | Jupyter (.ipynb), marimo |
 | Code | 30+ languages (Python, TS, Rust, Go, SQL...) |
@@ -79,6 +80,8 @@ import {
   parseWKB,
   buildGeoArrowTables,
   readParquetMetadata,
+  isStacGeoparquetSchema,
+  stacRowToItem,
   getFileTypeInfo,
   formatFileSize,
   generateHexDump,
@@ -105,7 +108,7 @@ Full per-module reference docs: [`packages/objex-utils/docs/`](packages/objex-ut
 | `./file-icons` | `getFileTypeInfo`, `getDuckDbReadFn`, `getViewerKind` |
 | `./types` | `FileEntry`, `Connection`, `Tab`, `WriteResult`, `Theme` |
 
-The main export also includes `copyToClipboard`, `handleLoadError`, and shared constants (`WGS84_CODES`, `STORAGE_KEYS`, `DEFAULT_TARGET_CRS`, etc.).
+The main export also includes `copyToClipboard`, `handleLoadError`, the stac-geoparquet helpers (`isStacGeoparquetSchema`, `stacRowToItem`, `flattenStacBbox`, `pickStacPrimaryAsset`, `resolveStacAssetHref`), and shared constants (`WGS84_CODES`, `STORAGE_KEYS`, `DEFAULT_TARGET_CRS`, etc.).
 
 ## Quick Start (Development)
 

package/dist/components/browser/FileTreeSidebar.svelte

@@ -356,7 +356,7 @@ async function expandToPath(path: string) {
 				? await findNodeAtRoot(accumulatedPath)
 				: await findNodeInParent(parentNode, accumulatedPath);
 
-		if (!node || !node.entry.is_dir) break;
+		if (!node?.entry.is_dir) break;
 
 		if (node.children.length === 0) {
 			await loadChildren(node);

package/dist/components/layout/ConnectionDialog.svelte

@@ -31,7 +31,7 @@ import {
 	type ProviderId,
 	READ_ONLY_HELP
 } from '../../storage/providers.js';
-import { connections } from '../../stores/connections.svelte.js';
+import { connections, DuplicateConnectionError } from '../../stores/connections.svelte.js';
 import type { Connection, ConnectionConfig } from '../../types.js';
 import { describeParseResult, looksLikeUrl, parseStorageUrl } from '../../utils/storage-url.js';
 
@@ -65,6 +65,7 @@ let sasToken = $state('');
 let saving = $state(false);
 let testing = $state(false);
 let testResult = $state<'success' | 'error' | null>(null);
+let duplicateNotice = $state<{ kind: 'merged' | 'blocked'; name: string } | null>(null);
 let parsedHint = $state<string | null>(null);
 let endpointAutoFilled = $state(false);
 
@@ -109,6 +110,7 @@ function resetForm(conn: Connection | null | undefined) {
 	testResult = null;
 	parsedHint = null;
 	endpointAutoFilled = false;
+	duplicateNotice = null;
 }
 
 function selectProvider(id: ProviderId) {
@@ -225,17 +227,33 @@ $effect(() => {
 async function handleSave() {
 	if (!canSave) return;
 	saving = true;
+	duplicateNotice = null;
 	try {
 		const config = buildConfig();
 		if (isEditMode && editConnection) {
 			await connections.update(editConnection.id, config);
 		} else {
-			await connections.save(config);
+			const result = await connections.save(config);
+			if (result.existed) {
+				const existing = connections.getById(result.id);
+				duplicateNotice = { kind: 'merged', name: existing?.name ?? config.name };
+				// Keep the dialog open briefly so the user sees the notice, then close.
+				saving = false;
+				setTimeout(() => {
+					onSaved();
+					open = false;
+				}, 1200);
+				return;
+			}
 		}
 		onSaved();
 		open = false;
 	} catch (err) {
-		console.error('Failed to save connection:', err);
+		if (err instanceof DuplicateConnectionError) {
+			duplicateNotice = { kind: 'blocked', name: err.existingName };
+		} else {
+			console.error('Failed to save connection:', err);
+		}
 	} finally {
 		saving = false;
 	}
@@ -532,6 +550,20 @@ async function handleTestConnection() {
 				</details>
 			{/if}
 
+			<!-- Duplicate-connection notice -->
+			{#if duplicateNotice}
+				<div
+					class="flex items-start gap-2 rounded-md border px-3 py-2 text-sm {duplicateNotice.kind === 'merged' ? 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400' : 'border-destructive/30 bg-destructive/10 text-destructive'}"
+				>
+					<CloudIcon class="mt-0.5 size-4 shrink-0" />
+					<span>
+						{duplicateNotice.kind === 'merged'
+							? t('connection.duplicateMerged', { name: duplicateNotice.name })
+							: t('connection.duplicateBlocked', { name: duplicateNotice.name })}
+					</span>
+				</div>
+			{/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

@@ -57,6 +57,33 @@ $effect(() => {
 	}
 });
 
+// Auto-detected ?url= buckets are saved anonymously (zero-click demo flow).
+// If the first LIST returns 401/403, the bucket is actually private — flip
+// the connection to non-anonymous and open the credential dialog so the
+// user can paste keys instead of seeing a silent failure.
+$effect(() => {
+	const conn = browser.authRequired;
+	if (!conn) return;
+	handleAuthRequired(conn);
+});
+
+async function handleAuthRequired(conn: Connection) {
+	browser.clearAuthRequired();
+	await connections.update(conn.id, {
+		name: conn.name,
+		provider: conn.provider,
+		endpoint: conn.endpoint,
+		bucket: conn.bucket,
+		region: conn.region,
+		anonymous: false,
+		authMethod: conn.authMethod,
+		rootPrefix: conn.rootPrefix
+	});
+	const updated = connections.getById(conn.id);
+	if (!updated) return;
+	await ensureCredentials(updated);
+}
+
 async function handleAutoDetection() {
 	const url = new URL(window.location.href);
 	const rawUrl = url.searchParams.get('url');
@@ -141,7 +168,7 @@ async function handleAutoDetection() {
 }
 
 async function loadDemoConnection() {
-	const id = await connections.save({
+	const { id } = await connections.save({
 		name: 'Source Cooperative',
 		provider: 's3',
 		endpoint: '',
@@ -149,7 +176,6 @@ async function loadDemoConnection() {
 		region: 'us-west-2',
 		anonymous: true
 	});
-	if (!id) return;
 	const conn = connections.getById(id);
 	if (conn) {
 		browser.browse(conn);

package/dist/components/viewers/ArchiveViewer.svelte

@@ -29,7 +29,7 @@ import {
 	streamZipEntriesFromUrl
 } from '../../utils/archive';
 import { formatFileSize } from '../../utils/format';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -177,7 +177,7 @@ async function loadZip() {
 	const signal = abortController!.signal;
 
 	if (tab.source === 'remote') {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
 		try {
 			scanning = true;
 			for await (const batch of streamZipEntriesFromUrl(url, signal)) {
@@ -208,7 +208,7 @@ async function loadTar() {
 	const signal = abortController!.signal;
 
 	if (tab.source === 'remote') {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
 		try {
 			scanning = true;
 			remoteUrl = url;
@@ -240,7 +240,7 @@ async function loadTarGz() {
 
 	// For remote URLs: stream-fetch → decompress → parse progressively
 	if (tab.source === 'remote' || tab.source === 'url') {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
 		try {
 			scanning = true;
 			const decompressedChunks: Uint8Array[] = [];

package/dist/components/viewers/CodeViewer.svelte

@@ -11,18 +11,36 @@ import type { Tab } from '../../types';
 import { copyToClipboard } from '../../utils/clipboard.js';
 import { handleLoadError } from '../../utils/error.js';
 import { extensionToShikiLang, highlightCode } from '../../utils/shiki';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrl, buildHttpsUrlAsync, canStreamDirectly } from '../../utils/url.js';
 import { getUrlView, updateUrlView } from '../../utils/url-state.js';
 import { openZarrTab } from '../../utils/zarr-tab.js';
+import { isStacCatalog, isStacCollection, isStacItem } from '../../utils/stac.js';
+
+interface CodeActions {
+	toggleFormat: () => Promise<void>;
+	copyCode: () => Promise<void>;
+	canFormat: boolean;
+	formatted: boolean;
+	copied: boolean;
+}
 
-let { tab }: { tab: Tab } = $props();
+let {
+	tab,
+	nested = false,
+	wordWrap = $bindable(false),
+	actions = $bindable<CodeActions | null>(null)
+}: {
+	tab: Tab;
+	nested?: boolean;
+	wordWrap?: boolean;
+	actions?: CodeActions | null;
+} = $props();
 
 let abortController: AbortController | null = null;
 let html = $state('');
 let rawCode = $state('');
 let loading = $state(true);
 let error = $state<string | null>(null);
-let wordWrap = $state(false);
 let copied = $state(false);
 let formatted = $state(false);
 const urlView = getUrlView();
@@ -73,9 +91,9 @@ function detectJsonKind(code: string): JsonKind {
 		if (obj && typeof obj === 'object') {
 			if (obj.version === 8 && obj.sources && obj.layers) return 'maplibre-style';
 			if (obj.tilejson && obj.tiles) return 'tilejson';
-			if (obj.type === 'Catalog' && obj.stac_version) return 'stac-catalog';
-			if (obj.type === 'Collection' && obj.stac_version) return 'stac-collection';
-			if (obj.type === 'Feature' && obj.stac_version) return 'stac-item';
+			if (isStacCatalog(obj)) return 'stac-catalog';
+			if (isStacCollection(obj)) return 'stac-collection';
+			if (isStacItem(obj)) 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';
@@ -96,7 +114,23 @@ const stacBadgeKey = $derived<Record<string, string>>({
 	'stac-collection': 'code.stacCollection',
 	'stac-item': 'code.stacItem'
 });
-const styleUrl = $derived(buildHttpsUrl(tab));
+// Third-party iframes can't route through the storage adapter, so the URL
+// must carry auth. Public/SAS connections resolve synchronously; `signed-s3`
+// must wait for the presign so the iframe never loads a bare `s3://` href.
+let styleUrl = $state('');
+$effect(() => {
+	const id = tab.id;
+	styleUrl = canStreamDirectly(tab) ? buildHttpsUrl(tab) : '';
+	let cancelled = false;
+	(async () => {
+		const url = await buildHttpsUrlAsync(tab);
+		if (cancelled || id !== tab.id) return;
+		styleUrl = url;
+	})();
+	return () => {
+		cancelled = true;
+	};
+});
 const stacBrowserSrc = $derived(
 	`https://radiantearth.github.io/stac-browser/#/external/${styleUrl}`
 );
@@ -160,9 +194,24 @@ const language = $derived(languageMap[ext] ?? 'Plain Text');
 /** File types that support native formatting */
 const canFormat = $derived(['.json', '.sql', '.css', '.html', '.xml'].includes(ext));
 
-// Auto-switch to STAC Browser when STAC JSON is detected (unless URL explicitly set #code)
+// Expose imperative actions to the parent so a shared outer toolbar (e.g. the
+// one rendered by StacTabViewer when nested) can invoke Format/Wrap/Copy
+// without duplicating the text state.
+$effect(() => {
+	actions = {
+		toggleFormat,
+		copyCode,
+		canFormat,
+		formatted,
+		copied
+	};
+});
+
+// Auto-switch to STAC Browser when STAC JSON is detected (unless URL explicitly set #code).
+// Skipped when nested in StacTabViewer since the outer wrapper owns the view toggle.
 let stacAutoSwitched = false;
 $effect(() => {
+	if (nested) return;
 	if (isStacJson && !stacAutoSwitched && viewMode === 'code' && urlView !== 'code') {
 		stacAutoSwitched = true;
 		viewMode = 'stac-browser';
@@ -311,6 +360,7 @@ async function copyCode() {
 </script>
 
 <div class="flex h-full flex-col">
+	{#if !nested}
 	<div
 		class="flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 sm:gap-2 sm:px-4 dark:border-zinc-800"
 	>
@@ -338,14 +388,16 @@ async function copyCode() {
 				<Badge variant="outline" class="hidden border-emerald-200 text-emerald-600 sm:inline-flex dark:border-emerald-800 dark:text-emerald-300">
 					{t(stacBadgeKey[jsonKind] ?? 'code.stacItem')}
 				</Badge>
-				<Button
-					variant={viewMode === 'stac-browser' ? 'default' : 'outline'}
-					size="sm"
-					class="h-7 gap-1 px-2 text-xs {viewMode !== 'stac-browser' ? 'border-blue-300 text-blue-600 hover:bg-blue-50 hover:text-blue-700 dark:border-blue-700 dark:text-blue-400 dark:hover:bg-blue-950' : ''}"
-					onclick={() => setViewMode('stac-browser')}
-				>
-					{viewMode === 'stac-browser' ? t('code.code') : t('code.browseStac')}
-				</Button>
+				{#if !nested}
+					<Button
+						variant={viewMode === 'stac-browser' ? 'default' : 'outline'}
+						size="sm"
+						class="h-7 gap-1 px-2 text-xs {viewMode !== 'stac-browser' ? 'border-blue-300 text-blue-600 hover:bg-blue-50 hover:text-blue-700 dark:border-blue-700 dark:text-blue-400 dark:hover:bg-blue-950' : ''}"
+						onclick={() => setViewMode('stac-browser')}
+					>
+						{viewMode === 'stac-browser' ? t('code.code') : t('code.browseStac')}
+					</Button>
+				{/if}
 			{:else if jsonKind === 'kepler'}
 				<Badge variant="outline" class="hidden border-violet-200 text-violet-600 sm:inline-flex dark:border-violet-800 dark:text-violet-300">
 					{t('code.keplerGl')}
@@ -480,8 +532,9 @@ async function copyCode() {
 			</div>
 		</div>
 	</div>
+	{/if}
 
-	{#if viewMode === 'stac-browser'}
+	{#if viewMode === 'stac-browser' && styleUrl}
 		<div class="flex-1 overflow-hidden">
 			<iframe
 				src={stacBrowserSrc}
@@ -490,7 +543,7 @@ async function copyCode() {
 				allow="fullscreen"
 			></iframe>
 		</div>
-	{:else if viewMode === 'kepler'}
+	{:else if viewMode === 'kepler' && styleUrl}
 		<div class="flex-1 overflow-hidden">
 			<iframe
 				src={keplerSrc}
@@ -499,7 +552,7 @@ async function copyCode() {
 				allow="fullscreen"
 			></iframe>
 		</div>
-	{:else if viewMode === 'maputnik'}
+	{:else if viewMode === 'maputnik' && styleUrl}
 		<div class="flex-1 overflow-hidden">
 			<iframe
 				src={maputnikSrc}

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

@@ -1,7 +1,17 @@
 import type { Tab } from '../../types';
+interface CodeActions {
+    toggleFormat: () => Promise<void>;
+    copyCode: () => Promise<void>;
+    canFormat: boolean;
+    formatted: boolean;
+    copied: boolean;
+}
 type $$ComponentProps = {
     tab: Tab;
+    nested?: boolean;
+    wordWrap?: boolean;
+    actions?: CodeActions | null;
 };
-declare const CodeViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const CodeViewer: import("svelte").Component<$$ComponentProps, {}, "wordWrap" | "actions">;
 type CodeViewer = ReturnType<typeof CodeViewer>;
 export default CodeViewer;

package/dist/components/viewers/CogControls.svelte

@@ -2,12 +2,16 @@
 import { t } from '../../i18n/index.svelte.js';
 import {
 	type BandConfig,
-	COLOR_RAMP_STOPS,
 	type ColorRampId,
 	DEFAULT_RESCALE,
-	type RescaleConfig,
-	rampToGradientCss
+	type RescaleConfig
 } from '../../utils/cog.js';
+import {
+	COLORMAP_INDEX,
+	COLORMAP_NAMES,
+	COLORMAP_SPRITE_LAYERS,
+	COLORMAP_SPRITE_URL
+} from '../../utils/colormap-sprite.js';
 
 let {
 	bandCount,
@@ -15,17 +19,48 @@ let {
 	onConfigChange,
 	rescale,
 	rescaleApplicable,
-	onRescaleChange
+	onRescaleChange,
+	histogram = null,
+	mode = 'single'
 }: {
 	bandCount: number;
-	bandConfig: BandConfig;
+	/** Required when `mode === 'single'`, ignored when `mode === 'multi'`. */
+	bandConfig?: BandConfig;
 	onConfigChange: (config: BandConfig) => void;
 	rescale: RescaleConfig;
 	rescaleApplicable: boolean;
 	onRescaleChange: (rescale: RescaleConfig) => void;
+	/** Optional histogram bins (normalized, single-band only) for the slider overlay. */
+	histogram?: Uint32Array | null;
+	mode?: 'single' | 'multi';
 } = $props();
 
-const RAMP_IDS: ColorRampId[] = ['grayscale', 'terrain', 'viridis', 'magma', 'turbo', 'spectral'];
+// ─── Ramp picker state ──────────────────────────────────────────
+// Keep a curated set pinned at the top for familiarity; the full set of
+// 107 is searchable underneath. Pinned names match the old UI exactly so
+// existing muscle memory holds.
+const PINNED_RAMPS: ColorRampId[] = [
+	'gray',
+	'terrain',
+	'viridis',
+	'magma',
+	'turbo',
+	'spectral',
+	'inferno',
+	'plasma',
+	'cividis',
+	'rdylgn'
+];
+
+let rampQuery = $state('');
+
+const filteredRamps = $derived.by(() => {
+	const q = rampQuery.trim().toLowerCase();
+	if (!q) return COLORMAP_NAMES;
+	return COLORMAP_NAMES.filter((name) => name.toLowerCase().includes(q));
+});
+
+// ─── Helpers ────────────────────────────────────────────────────
 
 function bandOptions(count: number): { value: number; label: string }[] {
 	return Array.from({ length: count }, (_, i) => ({
@@ -35,26 +70,53 @@ function bandOptions(count: number): { value: number; label: string }[] {
 }
 
 function setMode(mode: 'rgb' | 'single') {
+	if (!bandConfig) return;
 	onConfigChange({ ...bandConfig, mode });
 }
 
 function setBand(key: 'rBand' | 'gBand' | 'bBand' | 'band', value: number) {
+	if (!bandConfig) return;
 	onConfigChange({ ...bandConfig, [key]: value });
 }
 
 function setRamp(id: ColorRampId) {
+	if (!bandConfig) return;
 	onConfigChange({ ...bandConfig, colorRamp: id });
 }
 
+/**
+ * CSS `background` declaration that renders one sprite row at the
+ * container's full height. Sprite is 256 wide × 107 tall (one 1px row per
+ * ramp); we scale it vertically by the target height and offset to land on
+ * the requested layer.
+ */
+function rampBg(name: ColorRampId, heightPx: number): string {
+	const index = COLORMAP_INDEX[name];
+	if (index === undefined) return '';
+	const totalHeight = COLORMAP_SPRITE_LAYERS * heightPx;
+	const yOffset = index * heightPx;
+	return [
+		`background-image: url("${COLORMAP_SPRITE_URL}")`,
+		'background-repeat: no-repeat',
+		`background-size: 100% ${totalHeight}px`,
+		`background-position: 0 -${yOffset}px`
+	].join('; ');
+}
+
+// ─── Rescale / histogram ────────────────────────────────────────
+
+function clamp01(v: number): number {
+	return Math.max(0, Math.min(1, v));
+}
+
 function setRescaleMin(value: number) {
-	// Keep min strictly less than max, clamp to [0, 1].
-	const clamped = Math.max(0, Math.min(1, value));
+	const clamped = clamp01(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 clamped = clamp01(value);
 	const next = Math.max(clamped, rescale.min + 0.001);
 	onRescaleChange({ min: rescale.min, max: Number.isFinite(next) ? next : 1 });
 }
@@ -62,11 +124,21 @@ function setRescaleMax(value: number) {
 function resetRescale() {
 	onRescaleChange({ ...DEFAULT_RESCALE });
 }
+
+const histogramBars = $derived.by(() => {
+	if (!histogram || histogram.length === 0) return null;
+	let max = 0;
+	for (const v of histogram) if (v > max) max = v;
+	if (max === 0) return null;
+	const bins = Array.from(histogram, (count) => count / max);
+	return bins;
+});
 </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"
+	class="absolute right-2 top-10 z-10 w-60 rounded bg-card/90 p-2.5 text-xs text-card-foreground backdrop-blur-sm"
 >
+{#if mode === 'single' && bandConfig}
 	<!-- Mode toggle -->
 	<div class="mb-2 flex gap-1">
 		<button
@@ -130,29 +202,57 @@ function resetRescale() {
 
 		<!-- 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}
+			<div class="flex items-center justify-between">
+				<span class="text-muted-foreground">{t('cog.colorRamp')}</span>
+				<span class="text-[10px] text-muted-foreground tabular-nums">
+					{filteredRamps.length}/{COLORMAP_NAMES.length}
+				</span>
+			</div>
+
+			<!-- Pinned quick-access (only when no search active) -->
+			{#if !rampQuery}
+				<div class="grid grid-cols-2 gap-1">
+					{#each PINNED_RAMPS 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 hover:border-border'}"
+							onclick={() => setRamp(id)}
+							title={id}
+						>
+							<div class="h-2.5 w-full rounded-sm" style={rampBg(id, 10)}></div>
+							<span class="mt-0.5 text-center text-[10px] capitalize text-muted-foreground">
+								{id}
+							</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<!-- Search + all-ramps scroll list -->
+			<input
+				type="search"
+				placeholder={t('cog.colorRampSearch')}
+				class="w-full rounded border border-border bg-background px-1.5 py-0.5 text-[11px]"
+				value={rampQuery}
+				oninput={(e) => (rampQuery = (e.target as HTMLInputElement).value)}
+			/>
+			<div class="max-h-40 overflow-y-auto rounded border border-border">
+				{#each filteredRamps 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'}"
+						class="flex w-full items-center gap-2 px-1.5 py-0.5 text-left text-[11px] transition-colors {bandConfig.colorRamp === id ? 'bg-muted' : 'hover:bg-muted/60'}"
 						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>
+						<div class="h-2.5 w-14 flex-shrink-0 rounded-sm" style={rampBg(id, 10)}></div>
+						<span class="truncate text-muted-foreground">{id}</span>
 					</button>
 				{/each}
 			</div>
 		</div>
 	{/if}
+{/if}
 
 	{#if rescaleApplicable}
-		<!-- GPU LinearRescale slider. Default uint pipeline only. -->
+		<!-- GPU LinearRescale slider with histogram overlay. -->
 		<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>
@@ -163,6 +263,35 @@ function resetRescale() {
 					{t('cog.rescaleReset')}
 				</button>
 			</div>
+
+			<!-- Histogram + range visualization -->
+			{#if histogramBars}
+				<div class="relative h-8 w-full rounded bg-background/60">
+					<!-- Histogram bars -->
+					<svg
+						viewBox="0 0 100 100"
+						preserveAspectRatio="none"
+						class="absolute inset-0 h-full w-full"
+						aria-hidden="true"
+					>
+						{#each histogramBars as h, i}
+							<rect
+								x={(i * 100) / histogramBars.length}
+								y={100 - h * 100}
+								width={100 / histogramBars.length}
+								height={h * 100}
+								class="fill-primary/40"
+							/>
+						{/each}
+					</svg>
+					<!-- Active rescale window -->
+					<div
+						class="pointer-events-none absolute inset-y-0 border-x border-primary bg-primary/10"
+						style="left: {rescale.min * 100}%; right: {(1 - rescale.max) * 100}%;"
+					></div>
+				</div>
+			{/if}
+
 			<div class="flex items-center gap-1.5">
 				<input
 					type="number"

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

@@ -1,11 +1,15 @@
 import { type BandConfig, type RescaleConfig } from '../../utils/cog.js';
 type $$ComponentProps = {
     bandCount: number;
-    bandConfig: BandConfig;
+    /** Required when `mode === 'single'`, ignored when `mode === 'multi'`. */
+    bandConfig?: BandConfig;
     onConfigChange: (config: BandConfig) => void;
     rescale: RescaleConfig;
     rescaleApplicable: boolean;
     onRescaleChange: (rescale: RescaleConfig) => void;
+    /** Optional histogram bins (normalized, single-band only) for the slider overlay. */
+    histogram?: Uint32Array | null;
+    mode?: 'single' | 'multi';
 };
 declare const CogControls: import("svelte").Component<$$ComponentProps, {}, "">;
 type CogControls = ReturnType<typeof CogControls>;