@walkthru-earth/objex 1.4.0 → 1.5.0

package/README.md

@@ -5,7 +5,7 @@
 [![CI](https://github.com/walkthru-earth/objex/actions/workflows/ci.yml/badge.svg)](https://github.com/walkthru-earth/objex/actions/workflows/ci.yml)
 [![License: CC BY 4.0](https://img.shields.io/badge/license-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)
 
-Cloud storage explorer that runs entirely in the browser. Connect to S3, Azure, GCS, R2, MinIO -- browse files, query data with SQL, and visualize geospatial formats on interactive maps. No backend required.
+Cloud storage explorer that runs entirely in the browser. Connect to S3, Azure, GCS, R2, MinIO - browse files, query data with SQL, and visualize geospatial formats on interactive maps. No backend required.
 
 ```mermaid
 graph LR
@@ -22,10 +22,10 @@ graph LR
 - **Query** Parquet, CSV, JSONL with SQL (DuckDB-WASM, cancellable queries)
 - **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
-- **Configure** without a rebuild -- bundled `config.json` (or remote `?config=<url>`) sets defaults, basemaps, and seed connections, with an in-app settings panel
-- **i18n** -- English + Arabic with automatic RTL layout
-- **Zero backend** -- everything runs client-side
+- **Share** via URL - `?url=<storage-url>#<view>` encodes full viewer state
+- **Configure** without a rebuild - bundled `config.json` (or remote `?config=<url>`) sets defaults, basemaps, and seed connections, with an in-app settings panel
+- **i18n** - English + Arabic with automatic RTL layout
+- **Zero backend** - everything runs client-side
 
 ## Supported Formats
 
@@ -48,7 +48,7 @@ graph LR
 
 Two packages are published for downstream use:
 
-### `@walkthru-earth/objex` -- Full Svelte 5 Library
+### `@walkthru-earth/objex` - Full Svelte 5 Library
 
 Components, stores, and utilities for building geospatial storage explorers.
 
@@ -62,9 +62,9 @@ import { UrlAdapter } from '@walkthru-earth/objex/storage';
 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, hyparquet-compressors, yaml) 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
+### `@walkthru-earth/objex-utils` - Pure TypeScript Utilities
 
 Zero Svelte dependency. Works with any JS framework or Node.js.
 
@@ -131,4 +131,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, architecture, geos
 
 ## License
 
-[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) -- hi@walkthru.earth
+[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) - hi@walkthru.earth

package/dist/components/layout/ConnectionDialog.svelte

@@ -10,7 +10,12 @@ 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 { describeParseResult, looksLikeUrl, parseStorageUrl } from '@walkthru-earth/objex-utils';
+import {
+	DEFAULT_AWS_REGION,
+	describeParseResult,
+	looksLikeUrl,
+	parseStorageUrl
+} from '@walkthru-earth/objex-utils';
 import { Button } from '../ui/button/index.js';
 import { Input } from '../ui/input/index.js';
 import {
@@ -56,7 +61,7 @@ let {
 let name = $state('');
 let provider = $state<ProviderId>('s3');
 let bucket = $state('');
-let region = $state('us-east-1');
+let region = $state(DEFAULT_AWS_REGION);
 let endpoint = $state('');
 let anonymous = $state(true);
 let accessKey = $state('');

package/dist/components/layout/SettingsSheet.svelte

@@ -2,6 +2,7 @@
 import CheckIcon from '@lucide/svelte/icons/check';
 import CopyIcon from '@lucide/svelte/icons/copy';
 import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+import { COPY_FEEDBACK_MS } from '@walkthru-earth/objex-utils';
 import {
 	Sheet,
 	SheetContent,
@@ -48,7 +49,7 @@ function buildExportConfig(): string {
 async function copyConfig() {
 	await navigator.clipboard.writeText(buildExportConfig());
 	copied = true;
-	setTimeout(() => (copied = false), 1500);
+	setTimeout(() => (copied = false), COPY_FEEDBACK_MS);
 }
 </script>
 

package/dist/components/layout/StatusBar.svelte

@@ -32,29 +32,32 @@ let activeFileInfo = $derived(activeTab ? getFileTypeInfo(activeTab.extension) :
 			{browser.activeConnection.name}
 		</span>
 		{#if displayPath}
-			<span class="text-muted-foreground/50">/</span>
-			<span class="max-w-[200px] truncate" title={displayPath}>{displayPath}</span>
+			<span class="hidden text-muted-foreground/50 sm:inline">/</span>
+			<span class="hidden max-w-[200px] truncate sm:inline" title={displayPath}>{displayPath}</span>
 		{/if}
 		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
 	{:else if displayPath}
-		<FolderIcon class="size-3 shrink-0" />
-		<span class="max-w-[300px] truncate" title={displayPath}>{displayPath}</span>
-		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+		<FolderIcon class="hidden size-3 shrink-0 sm:block" />
+		<span class="hidden max-w-[300px] truncate sm:inline" title={displayPath}>{displayPath}</span>
+		<Separator orientation="vertical" class="mx-1.5 hidden h-3.5 sm:block" />
 	{/if}
 
-	<!-- Entry count -->
+	<!-- Entry count — hidden on mobile -->
 	{#if displayCount > 0}
-		<FileTextIcon class="size-3 shrink-0" />
-		<span>{displayCount} {displayCount === 1 ? t('statusBar.item') : t('statusBar.items')}</span>
-		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+		<FileTextIcon class="hidden size-3 shrink-0 sm:block" />
+		<span class="hidden sm:inline"
+			>{displayCount}
+			{displayCount === 1 ? t('statusBar.item') : t('statusBar.items')}</span
+		>
+		<Separator orientation="vertical" class="mx-1.5 hidden h-3.5 sm:block" />
 	{/if}
 
-	<!-- Active file info -->
+	<!-- Active file info: type label hidden on mobile, size kept -->
 	{#if activeTab && activeFileInfo}
-		<InfoIcon class="size-3 shrink-0" />
-		<span>{activeFileInfo.label}</span>
+		<InfoIcon class="hidden size-3 shrink-0 sm:block" />
+		<span class="hidden sm:inline">{activeFileInfo.label}</span>
 		{#if activeTab.size}
-			<span class="text-muted-foreground/50">·</span>
+			<span class="hidden text-muted-foreground/50 sm:inline">·</span>
 			<span>{formatFileSize(activeTab.size)}</span>
 		{/if}
 		<Separator orientation="vertical" class="mx-1.5 h-3.5" />

package/dist/components/layout/TabBar.svelte

@@ -60,8 +60,8 @@ async function handleCopy(type: 'https' | 's3', tab: (typeof tabs.items)[0]) {
 								<Button
 									variant="ghost"
 									size="icon-sm"
-									class="ms-1 size-5 opacity-0 transition-opacity group-hover:opacity-100
-										{isActive ? 'opacity-60' : ''}"
+									class="ms-1 size-5 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100
+										{isActive ? 'sm:opacity-60' : ''}"
 									onclick={(e: MouseEvent) => handleClose(e, tab.id)}
 									aria-label={t('tabBar.closeTab', { name: tab.name })}
 								>

package/dist/components/viewers/ArchiveViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Archive, ChevronRight, Download, File, Folder, Loader } from '@lucide/svelte';
-import { formatFileSize } from '@walkthru-earth/objex-utils';
+import { formatFileSize, handleLoadError, isAbortError } from '@walkthru-earth/objex-utils';
 import type { Entry } from '@zip.js/zip.js';
 import { onDestroy, untrack } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -30,9 +30,12 @@ import {
 	streamZipEntriesFromUrl
 } from '../../utils/archive';
 import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
+import { useIsWide } from '../../utils/media-query.svelte.js';
 
 let { tab }: { tab: Tab } = $props();
 
+const isWide = useIsWide();
+
 const MAX_ITEMS = 500;
 
 // ── State ──────────────────────────────────────────────────────────────
@@ -165,8 +168,8 @@ async function loadArchive() {
 			error = t('archive.unsupported');
 		}
 	} catch (err) {
-		if ((err as DOMException)?.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		if (isAbortError(err)) return;
+		error = handleLoadError(err);
 	} finally {
 		scanning = false;
 		if (initializing) initializing = false;
@@ -187,7 +190,7 @@ async function loadZip() {
 			loadMethod = 'range';
 			return;
 		} catch (err) {
-			if ((err as DOMException)?.name === 'AbortError') throw err;
+			if (isAbortError(err)) throw err;
 			entryList = [];
 			scanCount = 0;
 			zipEntryMap.clear();
@@ -218,7 +221,7 @@ async function loadTar() {
 			loadMethod = 'range';
 			return;
 		} catch (err) {
-			if ((err as DOMException)?.name === 'AbortError') throw err;
+			if (isAbortError(err)) throw err;
 			entryList = [];
 			scanCount = 0;
 			remoteUrl = '';
@@ -260,7 +263,7 @@ async function loadTarGz() {
 			loadMethod = 'full';
 			return;
 		} catch (err) {
-			if ((err as DOMException)?.name === 'AbortError') throw err;
+			if (isAbortError(err)) throw err;
 			// Fall through to full-buffer approach
 			entryList = [];
 			scanCount = 0;
@@ -312,7 +315,7 @@ const totalFiles = $derived(contents.files.length);
 	{#if selectedFile}
 		{@const fileName = selectedFile.filename.split('/').pop()}
 		<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('archive.fileDetails')}
 		</div>
@@ -367,10 +370,10 @@ const totalFiles = $derived(contents.files.length);
 
 <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">
 			<Archive class="h-4 w-4 shrink-0 text-amber-500" />
-			<span class="max-w-[140px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">
+			<span class="max-w-[140px] truncate text-sm font-medium text-foreground sm:max-w-none">
 				{tab.name}
 			</span>
 			<Badge variant="outline" class="text-[10px]">{formatLabel}</Badge>
@@ -434,60 +437,118 @@ const totalFiles = $derived(contents.files.length);
 	<!-- Content area -->
 	{#if initializing}
 		<div class="flex flex-1 items-center justify-center gap-2">
-			<Loader class="h-5 w-5 animate-spin text-zinc-400" />
-			<span class="text-sm text-zinc-400">{t('archive.loading')}</span>
+			<Loader class="h-5 w-5 animate-spin text-muted-foreground" />
+			<span class="text-sm text-muted-foreground">{t('archive.loading')}</span>
 		</div>
 	{:else if error}
 		<div class="flex flex-1 items-center justify-center px-4">
-			<p class="text-sm text-red-400">{error}</p>
+			<p class="text-sm text-destructive">{error}</p>
 		</div>
 	{:else}
 		<!-- Column browser (resizable) -->
-		<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
-			<!-- Column 1: Current path entries -->
-			<ResizablePane defaultSize={35} minSize={20}>
-				<div class="flex h-full flex-col">
+		{#snippet archiveContents()}
+			<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('archive.contents')}
+					<span class="ms-1 normal-case tracking-normal">({(totalDirs + totalFiles).toLocaleString()})</span>
+				</div>
+				<div class="flex-1 overflow-auto">
+					{#if contents.directories.length === 0 && contents.files.length === 0 && !scanning}
+						<div class="p-4 text-center text-xs text-muted-foreground">
+							{t('archive.empty')}
+						</div>
+					{/if}
+
+					{#each contents.directories as dir, i}
+						{#if i < MAX_ITEMS}
+							{@const dirName = dir.split('/').pop()}
+							<button
+								class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+								class:bg-muted={selectedDir === dir}
+								onclick={() => selectDirectory(dir)}
+								ondblclick={() => navigateIntoDir(dir)}
+							>
+								<Folder class="size-3.5 shrink-0 text-amber-500/70" />
+								<span class="truncate font-medium">{dirName}</span>
+								<ChevronRight class="ms-auto size-3 shrink-0 text-muted-foreground" />
+							</button>
+						{:else if i === MAX_ITEMS}
+							<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
+								+{contents.directories.length - MAX_ITEMS} more
+							</div>
+						{/if}
+					{/each}
+
+					{#each contents.files as file, i}
+						{#if i < MAX_ITEMS}
+							{@const fileName = file.filename.split('/').pop()}
+							<button
+								class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+								class:bg-muted={selectedFile?.filename === file.filename}
+								onclick={() => selectFile(file)}
+							>
+								<File class="size-3.5 shrink-0 text-muted-foreground/70" />
+								<span class="truncate">{fileName}</span>
+								<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
+									{formatFileSize(file.uncompressedSize)}
+								</span>
+							</button>
+						{:else if i === MAX_ITEMS}
+							<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
+								+{contents.files.length - MAX_ITEMS} more
+							</div>
+						{/if}
+					{/each}
+
+					{#if scanning}
+						<div class="flex items-center gap-2 px-3 py-2 text-[10px] text-muted-foreground">
+							<Loader class="h-3 w-3 animate-spin" />
+							<span>{t('archive.scanningProgress', { count: scanCount.toLocaleString() })}</span>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+
+		{#snippet archiveSelectedDir()}
+			<div class="flex h-full flex-col">
+				{#if selectedDir}
+					{@const dirName = selectedDir.split('/').pop()}
 					<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('archive.contents')}
-						<span class="ms-1 normal-case tracking-normal">({(totalDirs + totalFiles).toLocaleString()})</span>
+						{dirName}
+						<span class="ms-1 normal-case tracking-normal">({(selectedDirContents.directories.length + selectedDirContents.files.length).toLocaleString()})</span>
 					</div>
 					<div class="flex-1 overflow-auto">
-						{#if contents.directories.length === 0 && contents.files.length === 0 && !scanning}
+						{#if selectedDirContents.directories.length === 0 && selectedDirContents.files.length === 0}
 							<div class="p-4 text-center text-xs text-muted-foreground">
 								{t('archive.empty')}
 							</div>
 						{/if}
 
-						{#each contents.directories as dir, i}
+						{#each selectedDirContents.directories as subDir, i}
 							{#if i < MAX_ITEMS}
-								{@const dirName = dir.split('/').pop()}
+								{@const subDirName = subDir.split('/').pop()}
 								<button
-									class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
-									class:bg-zinc-100={selectedDir === dir}
-									class:dark:bg-zinc-800={selectedDir === dir}
-									onclick={() => selectDirectory(dir)}
-									ondblclick={() => navigateIntoDir(dir)}
+									class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+									onclick={() => navigateIntoDir(subDir)}
 								>
 									<Folder class="size-3.5 shrink-0 text-amber-500/70" />
-									<span class="truncate font-medium">{dirName}</span>
+									<span class="truncate font-medium">{subDirName}</span>
 									<ChevronRight class="ms-auto size-3 shrink-0 text-muted-foreground" />
 								</button>
-							{:else if i === MAX_ITEMS}
-								<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
-									+{contents.directories.length - MAX_ITEMS} more
-								</div>
 							{/if}
 						{/each}
 
-						{#each contents.files as file, i}
+						{#each selectedDirContents.files as file, i}
 							{#if i < MAX_ITEMS}
 								{@const fileName = file.filename.split('/').pop()}
 								<button
-									class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
-									class:bg-zinc-100={selectedFile?.filename === file.filename}
-									class:dark:bg-zinc-800={selectedFile?.filename === file.filename}
+									class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+									class:bg-muted={selectedFile?.filename === file.filename}
 									onclick={() => selectFile(file)}
 								>
 									<File class="size-3.5 shrink-0 text-muted-foreground/70" />
@@ -496,91 +557,57 @@ const totalFiles = $derived(contents.files.length);
 										{formatFileSize(file.uncompressedSize)}
 									</span>
 								</button>
-							{:else if i === MAX_ITEMS}
-								<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
-									+{contents.files.length - MAX_ITEMS} more
-								</div>
 							{/if}
 						{/each}
-
-						{#if scanning}
-							<div class="flex items-center gap-2 px-3 py-2 text-[10px] text-muted-foreground">
-								<Loader class="h-3 w-3 animate-spin" />
-								<span>{t('archive.scanningProgress', { count: scanCount.toLocaleString() })}</span>
-							</div>
-						{/if}
 					</div>
-				</div>
-			</ResizablePane>
+				{:else}
+					<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
+						{t('archive.selectFolder')}
+					</div>
+				{/if}
+			</div>
+		{/snippet}
 
-			<ResizableHandle />
+		{#if isWide.value}
+			<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
+				<!-- Column 1: Current path entries -->
+				<ResizablePane defaultSize={35} minSize={20}>
+					{@render archiveContents()}
+				</ResizablePane>
 
-			<!-- Column 2: Selected directory contents -->
-			<ResizablePane defaultSize={35} minSize={20}>
-				<div class="flex h-full flex-col">
-					{#if selectedDir}
-						{@const dirName = selectedDir.split('/').pop()}
-						<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"
-						>
-							{dirName}
-							<span class="ms-1 normal-case tracking-normal">({(selectedDirContents.directories.length + selectedDirContents.files.length).toLocaleString()})</span>
-						</div>
-						<div class="flex-1 overflow-auto">
-							{#if selectedDirContents.directories.length === 0 && selectedDirContents.files.length === 0}
-								<div class="p-4 text-center text-xs text-muted-foreground">
-									{t('archive.empty')}
-								</div>
-							{/if}
+				<ResizableHandle />
 
-							{#each selectedDirContents.directories as subDir, i}
-								{#if i < MAX_ITEMS}
-									{@const subDirName = subDir.split('/').pop()}
-									<button
-										class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
-										onclick={() => navigateIntoDir(subDir)}
-									>
-										<Folder class="size-3.5 shrink-0 text-amber-500/70" />
-										<span class="truncate font-medium">{subDirName}</span>
-										<ChevronRight class="ms-auto size-3 shrink-0 text-muted-foreground" />
-									</button>
-								{/if}
-							{/each}
-
-							{#each selectedDirContents.files as file, i}
-								{#if i < MAX_ITEMS}
-									{@const fileName = file.filename.split('/').pop()}
-									<button
-										class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
-										class:bg-zinc-100={selectedFile?.filename === file.filename}
-										class:dark:bg-zinc-800={selectedFile?.filename === file.filename}
-										onclick={() => selectFile(file)}
-									>
-										<File class="size-3.5 shrink-0 text-muted-foreground/70" />
-										<span class="truncate">{fileName}</span>
-										<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
-											{formatFileSize(file.uncompressedSize)}
-										</span>
-									</button>
-								{/if}
-							{/each}
-						</div>
-					{:else}
-						<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
-							{t('archive.selectFolder')}
-						</div>
-					{/if}
-				</div>
-			</ResizablePane>
+				<!-- Column 2: Selected directory contents -->
+				<ResizablePane defaultSize={35} minSize={20}>
+					{@render archiveSelectedDir()}
+				</ResizablePane>
 
-			<ResizableHandle />
+				<ResizableHandle />
 
-			<!-- Column 3: File details -->
-			<ResizablePane defaultSize={30} minSize={15}>
-				<div class="flex h-full flex-col">
+				<!-- Column 3: File details -->
+				<ResizablePane defaultSize={30} minSize={15}>
+					<div class="flex h-full flex-col">
+						{@render fileDetails()}
+					</div>
+				</ResizablePane>
+			</ResizablePaneGroup>
+		{:else}
+			<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+				<!-- Contents: fixed height list -->
+				<div class="max-h-52 shrink-0 border-b border-border">
+					{@render archiveContents()}
+				</div>
+				<!-- Selected dir: fixed height list (hidden when empty) -->
+				{#if selectedDir}
+					<div class="max-h-52 shrink-0 border-b border-border">
+						{@render archiveSelectedDir()}
+					</div>
+				{/if}
+				<!-- File details: grows to fill remaining space -->
+				<div class="flex flex-1 flex-col">
 					{@render fileDetails()}
 				</div>
-			</ResizablePane>
-		</ResizablePaneGroup>
+			</div>
+		{/if}
 	{/if}
 </div>

package/dist/components/viewers/CodeViewer.svelte

@@ -16,9 +16,12 @@ import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { extensionToShikiLang, highlightCode } from '../../utils/shiki';
-import { buildHttpsUrl, buildHttpsUrlAsync, canStreamDirectly } from '../../utils/signed-url.js';
+import { buildHttpsUrl, canStreamDirectly } from '../../utils/signed-url.js';
+import { resolveSignedTabUrl } from '../../utils/signed-url-effect.js';
 import { getUrlView, pickViewMode, updateUrlView } from '../../utils/url-state.js';
 import { openZarrTab } from '../../utils/zarr-tab.js';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 interface CodeActions {
 	toggleFormat: () => Promise<void>;
@@ -123,17 +126,10 @@ const stacBadgeKey = $derived<Record<string, string>>({
 // 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;
-	};
+	return resolveSignedTabUrl(tab, (u) => {
+		styleUrl = u;
+	});
 });
 const stacBrowserSrc = $derived(
 	`https://radiantearth.github.io/stac-browser/#/external/${styleUrl}`
@@ -370,13 +366,9 @@ async function copyCode() {
 
 <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"
-	>
-		<span class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">{tab.name}</span>
-		<Badge variant="secondary">{language}</Badge>
-
-		<div class="ms-auto flex items-center gap-1 sm:gap-2">
+	<ViewerHeader {tab}>
+		{#snippet badge()}<Badge variant="secondary">{language}</Badge>{/snippet}
+		{#snippet actions()}
 			{#if jsonKind === 'maplibre-style'}
 				<Badge variant="outline" class="hidden border-blue-200 text-blue-600 sm:inline-flex dark:border-blue-800 dark:text-blue-300">
 					{t('code.maplibreStyle')}
@@ -482,7 +474,7 @@ async function copyCode() {
 			<!-- Mobile overflow menu -->
 			<div class="flex sm:hidden">
 				<DropdownMenu.Root>
-					<DropdownMenu.Trigger class="rounded p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+					<DropdownMenu.Trigger class="rounded p-1 text-muted-foreground hover:bg-muted">
 						<EllipsisVerticalIcon class="size-4" />
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content align="end" class="w-44">
@@ -539,8 +531,8 @@ async function copyCode() {
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 			</div>
-		</div>
-	</div>
+		{/snippet}
+	</ViewerHeader>
 	{/if}
 
 	{#if viewMode === 'stac-browser' && styleUrl}
@@ -596,13 +588,9 @@ async function copyCode() {
 			class:word-wrap={wordWrap}
 		>
 			{#if loading}
-				<div class="flex h-full items-center justify-center">
-					<p class="text-sm text-zinc-400">{t('code.loading')}</p>
-				</div>
+				<ViewerStatus kind="loading" message={t('code.loading')} />
 			{:else if error}
-				<div class="flex h-full items-center justify-center">
-					<p class="text-sm text-red-400">{error}</p>
-				</div>
+				<ViewerStatus kind="error" message={error} />
 			{:else}
 				{@html html}
 			{/if}

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

@@ -12,6 +12,6 @@ type $$ComponentProps = {
     wordWrap?: boolean;
     actions?: CodeActions | null;
 };
-declare const CodeViewer: import("svelte").Component<$$ComponentProps, {}, "wordWrap" | "actions">;
+declare const CodeViewer: import("svelte").Component<$$ComponentProps, {}, "actions" | "wordWrap">;
 type CodeViewer = ReturnType<typeof CodeViewer>;
 export default CodeViewer;

package/dist/components/viewers/CogViewer.svelte

@@ -6,6 +6,8 @@ import {
 	attachPixelInspector,
 	type ChannelComposite,
 	type CogAsset,
+	handleLoadError,
+	isAbortError,
 	smokeTestHref,
 	syntheticSelfAsset
 } from '@walkthru-earth/objex-utils';
@@ -260,8 +262,8 @@ async function loadCog(map: maplibregl.Map) {
 					if (signal.aborted) return;
 					if (!result.ok) smokeWarning = result.reason;
 				} catch (err) {
-					if (err instanceof DOMException && err.name === 'AbortError') return;
-					smokeWarning = err instanceof Error ? err.message : String(err);
+					if (isAbortError(err)) return;
+					smokeWarning = handleLoadError(err);
 				}
 			})();
 		}
@@ -279,7 +281,7 @@ async function loadCog(map: maplibregl.Map) {
 				const _crs = preflightGeotiff.crs;
 				void _crs;
 			} catch (crsErr) {
-				const msg = crsErr instanceof Error ? crsErr.message : String(crsErr);
+				const msg = handleLoadError(crsErr) ?? String(crsErr);
 				error = `Unsupported CRS: ${msg}`;
 				loading = false;
 				return;
@@ -293,7 +295,7 @@ async function loadCog(map: maplibregl.Map) {
 			// recognized as being in a supported file format" on the same file).
 			// Surface a clear message and bail — COGLayer would re-invoke the
 			// same loader and throw the identical error uncaught during update.
-			const msg = preflightErr instanceof Error ? preflightErr.message : String(preflightErr);
+			const msg = handleLoadError(preflightErr) ?? String(preflightErr);
 			if (/Only tiff supported version|not a tiff|Invalid.*magic/i.test(msg)) {
 				error = t('map.cogInvalidTiff');
 				loading = false;
@@ -361,8 +363,8 @@ async function loadCog(map: maplibregl.Map) {
 		buildAndAddLayer(map, preflightGeotiff, signal);
 	} catch (err) {
 		if (signal.aborted) return;
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		if (isAbortError(err)) return;
+		error = handleLoadError(err);
 		loading = false;
 	}
 }