@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/CopcViewer.svelte

@@ -1,26 +1,19 @@
 <script lang="ts">
 import type { Tab } from '../../types';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { resolveSignedTabUrl } from '../../utils/signed-url-effect.js';
 
 let { tab }: { tab: Tab } = $props();
 
 let fileUrl = $state('');
 
 $effect(() => {
-	const id = tab.id;
-	let cancelled = false;
-	(async () => {
-		if (tab.source === 'url') {
-			fileUrl = tab.path;
-			return;
-		}
-		const url = await buildHttpsUrlAsync(tab);
-		if (cancelled || id !== tab.id) return;
-		fileUrl = url;
-	})();
-	return () => {
-		cancelled = true;
-	};
+	if (tab.source === 'url') {
+		fileUrl = tab.path;
+		return;
+	}
+	return resolveSignedTabUrl(tab, (u) => {
+		fileUrl = u;
+	});
 });
 
 const viewerUrl = $derived(

package/dist/components/viewers/DatabaseViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import ClockIcon from '@lucide/svelte/icons/clock';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import SqlEditor from '../editor/SqlEditor.svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -127,7 +128,7 @@ async function loadDatabase() {
 			tables = (result.rows ?? []).map((row) => row.name).filter((name): name is string => !!name);
 		}
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	} finally {
 		loading = false;
 	}
@@ -254,7 +255,7 @@ async function switchSnapshot(id: number) {
 		const connId = tab.connectionId ?? '';
 		await loadDuckLake(engine, connId, id);
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	} finally {
 		switchingSnapshot = false;
 	}
@@ -318,7 +319,7 @@ async function switchSchema(schema: string) {
 		const connId = tab.connectionId ?? '';
 		await loadDuckLakeTables(engine, connId);
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	}
 }
 
@@ -357,23 +358,23 @@ function selectTable(tableName: string) {
 
 <div class="flex h-full flex-col">
 	<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"
+		class="flex items-center gap-1 border-b border-border px-2 py-1.5 sm:gap-2 sm:px-4"
 	>
-		<span class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">{tab.name}</span>
+		<span class="truncate max-w-[120px] text-sm font-medium text-foreground sm:max-w-none">{tab.name}</span>
 		{#if isDuckLake}
 			<Badge variant="secondary" class="bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200">DuckLake</Badge>
 		{:else}
 			<Badge variant="secondary">{t('database.badge')}</Badge>
 		{/if}
 		{#if tables.length > 0}
-			<span class="hidden text-xs text-zinc-400 sm:inline">{tables.length} {t('database.tables')}</span>
+			<span class="hidden text-xs text-muted-foreground sm:inline">{tables.length} {t('database.tables')}</span>
 		{/if}
 		{#if isDuckLake && snapshotVersion !== null}
-			<div class="hidden items-center gap-1 text-xs text-zinc-400 sm:inline-flex">
+			<div class="hidden items-center gap-1 text-xs text-muted-foreground sm:inline-flex">
 				<ClockIcon class="h-3 w-3" />
 				{#if snapshots.length > 1}
 					<select
-						class="rounded bg-white px-1.5 py-0.5 text-xs text-zinc-700 disabled:opacity-60 dark:bg-zinc-800 dark:text-zinc-300"
+						class="rounded bg-background px-1.5 py-0.5 text-xs text-foreground disabled:opacity-60"
 						disabled={switchingSnapshot}
 						title={t('ducklake.snapshot')}
 						value={snapshotVersion}
@@ -383,7 +384,7 @@ function selectTable(tableName: string) {
 							<option value={snap.id}>{formatSnapshotLabel(snap)}</option>
 						{/each}
 					</select>
-					<span class="text-zinc-400">({snapshots.length} {t('ducklake.snapshots')})</span>
+					<span class="text-muted-foreground">({snapshots.length} {t('ducklake.snapshots')})</span>
 				{:else}
 					{@const formatted = formatSnapshotTime(snapshotTimeMs)}
 					<span>v{snapshotVersion}{#if formatted}&nbsp;({formatted}){/if}</span>
@@ -406,26 +407,26 @@ function selectTable(tableName: string) {
 	<div class="flex flex-1 overflow-hidden">
 		{#if loading}
 			<div class="flex flex-1 items-center justify-center">
-				<p class="text-sm text-zinc-400">{isDuckLake ? t('ducklake.loading') : t('database.loading')}</p>
+				<p class="text-sm text-muted-foreground">{isDuckLake ? t('ducklake.loading') : t('database.loading')}</p>
 			</div>
 		{:else if error}
 			<div class="flex flex-1 items-center justify-center p-4">
 				<div class="max-w-md text-center">
-					<p class="text-sm text-red-400">{error}</p>
+					<p class="text-sm text-destructive">{error}</p>
 					{#if isDuckLake && error.includes('ducklake')}
-						<p class="mt-2 text-xs text-zinc-500">{t('ducklake.extensionHint')}</p>
+						<p class="mt-2 text-xs text-muted-foreground">{t('ducklake.extensionHint')}</p>
 					{/if}
 				</div>
 			</div>
 		{:else}
 			<!-- Table list sidebar -->
 			<div
-				class="w-56 shrink-0 overflow-auto border-e border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"
+				class="w-56 shrink-0 overflow-auto border-e border-border bg-muted"
 			>
 				{#if isDuckLake && schemas.length > 1}
-					<div class="border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
+					<div class="border-b border-border px-3 py-2">
 						<select
-							class="w-full rounded bg-white px-2 py-1 text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
+							class="w-full rounded bg-background px-2 py-1 text-xs text-foreground"
 							onchange={(e) => switchSchema(e.currentTarget.value)}
 						>
 							{#each schemas as schema}
@@ -434,21 +435,21 @@ function selectTable(tableName: string) {
 						</select>
 					</div>
 				{/if}
-				<div class="border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
-					<h3 class="text-xs font-medium text-zinc-500 dark:text-zinc-400">{t('database.tablesHeader')}</h3>
+				<div class="border-b border-border px-3 py-2">
+					<h3 class="text-xs font-medium text-muted-foreground">{t('database.tablesHeader')}</h3>
 				</div>
 				{#each tables as tableName}
 					<button
-						class="flex w-full items-center px-3 py-1.5 text-start text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800"
+						class="flex w-full items-center px-3 py-1.5 text-start text-xs hover:bg-accent"
 						class:bg-blue-50={selectedTable === tableName}
 						class:dark:bg-blue-950={selectedTable === tableName}
 						onclick={() => selectTable(tableName)}
 					>
-						<span class="text-zinc-700 dark:text-zinc-300">{tableName}</span>
+						<span class="text-foreground">{tableName}</span>
 					</button>
 				{/each}
 				{#if tables.length === 0}
-					<div class="px-3 py-4 text-center text-xs text-zinc-400">
+					<div class="px-3 py-4 text-center text-xs text-muted-foreground">
 						{isDuckLake ? t('ducklake.noTables') : t('database.selectTable')}
 					</div>
 				{/if}
@@ -468,7 +469,7 @@ function selectTable(tableName: string) {
 					{/key}
 				{:else}
 					<div class="flex flex-1 items-center justify-center">
-						<p class="text-sm text-zinc-400">{t('database.selectTable')}</p>
+						<p class="text-sm text-muted-foreground">{t('database.selectTable')}</p>
 					</div>
 				{/if}
 			</div>

package/dist/components/viewers/FileInfo.svelte

@@ -32,7 +32,7 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 		<!-- File Metadata -->
 		{#if fileEntries.length > 0}
 			<section class="mx-auto max-w-2xl">
-				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
 					{t('fileInfo.fileMetadata')}
 				</h3>
 				<div
@@ -42,17 +42,17 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 						{#each fileEntries as entry}
 							<div class="flex items-start gap-3 px-3.5 py-2">
 								<span
-									class="w-[5.5rem] shrink-0 text-xs text-zinc-400 dark:text-zinc-500"
+									class="w-[5.5rem] shrink-0 text-xs text-muted-foreground"
 								>
 									{entry.label}
 								</span>
 								<div class="min-w-0 flex-1">
-									<span class="text-xs font-medium text-zinc-700 dark:text-zinc-300">
+									<span class="text-xs font-medium text-foreground">
 										{entry.value}
 									</span>
 									{#if entry.detail}
 										<p
-											class="mt-0.5 truncate font-mono text-[10px] leading-tight text-zinc-400 dark:text-zinc-500"
+											class="mt-0.5 truncate font-mono text-[10px] leading-tight text-muted-foreground"
 										>
 											{entry.detail}
 										</p>
@@ -68,7 +68,7 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 		<!-- Geometry -->
 		{#if geoEntries.length > 0}
 			<section class="mx-auto max-w-2xl">
-				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
 					{t('fileInfo.geometry')}
 				</h3>
 				<div
@@ -78,12 +78,12 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 						{#each geoEntries as entry}
 							<div class="flex items-start gap-3 px-3.5 py-2">
 								<span
-									class="w-[5.5rem] shrink-0 text-xs text-zinc-400 dark:text-zinc-500"
+									class="w-[5.5rem] shrink-0 text-xs text-muted-foreground"
 								>
 									{entry.label}
 								</span>
 								<div class="min-w-0 flex-1">
-									<span class="text-xs font-medium text-zinc-700 dark:text-zinc-300">
+									<span class="text-xs font-medium text-foreground">
 										{entry.value}
 									</span>
 								</div>
@@ -97,7 +97,7 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 		<!-- Schema -->
 		{#if schema.length > 0}
 			<section class="mx-auto max-w-2xl">
-				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
 					{t('fileInfo.schema')} ({schema.length})
 				</h3>
 				<div
@@ -107,17 +107,17 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 						<thead>
 							<tr class="bg-zinc-100/80 dark:bg-zinc-800/50">
 								<th
-									class="w-10 px-3 py-1.5 text-left font-medium text-zinc-400 dark:text-zinc-500"
+									class="w-10 px-3 py-1.5 text-left font-medium text-muted-foreground"
 								>
 									#
 								</th>
 								<th
-									class="px-3 py-1.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
+									class="px-3 py-1.5 text-left font-medium text-muted-foreground"
 								>
 									{t('fileInfo.column')}
 								</th>
 								<th
-									class="px-3 py-1.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
+									class="px-3 py-1.5 text-left font-medium text-muted-foreground"
 								>
 									{t('fileInfo.type')}
 								</th>
@@ -128,13 +128,13 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 								<tr
 									class="border-t border-zinc-100/80 dark:border-zinc-800/50 {i % 2 === 0 ? 'bg-zinc-50/50 dark:bg-zinc-900/20' : ''}"
 								>
-									<td class="px-3 py-1.5 tabular-nums text-zinc-400 dark:text-zinc-600">
+									<td class="px-3 py-1.5 tabular-nums text-muted-foreground">
 										{i + 1}
 									</td>
-									<td class="px-3 py-1.5 font-mono text-zinc-700 dark:text-zinc-300">
+									<td class="px-3 py-1.5 font-mono text-foreground">
 										{field.name}
 									</td>
-									<td class="px-3 py-1.5 font-mono text-zinc-500 dark:text-zinc-400">
+									<td class="px-3 py-1.5 font-mono text-muted-foreground">
 										{field.type}
 									</td>
 								</tr>
@@ -148,7 +148,7 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 		<!-- Parquet Table Explorer -->
 		{#if parquetTableSrc}
 			<section>
-				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
 					{t('fileInfo.parquetExplorer')}
 				</h3>
 				<div
@@ -167,7 +167,7 @@ const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
 
 		{#if entries.length === 0 && schema.length === 0}
 			<div class="flex flex-1 items-center justify-center py-16">
-				<p class="text-sm text-zinc-400">{t('fileInfo.noMetadata')}</p>
+				<p class="text-sm text-muted-foreground">{t('fileInfo.noMetadata')}</p>
 			</div>
 		{/if}
 	</div>

package/dist/components/viewers/FlatGeobufViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import LocateIcon from '@lucide/svelte/icons/locate';
+import { FIRST_FEATURE_FLY_ZOOM, handleLoadError, isAbortError } from '@walkthru-earth/objex-utils';
 import { geojson as fgbGeojson } from 'flatgeobuf';
 import { magicbytes } from 'flatgeobuf/lib/mjs/constants.js';
 import { buildHeader as fgbBuildHeader } from 'flatgeobuf/lib/mjs/generic/featurecollection.js';
@@ -16,10 +17,11 @@ import {
 	buildSelectionLayer,
 	geojsonFillColor,
 	geojsonLineColor,
+	HIGHLIGHT_COLOR,
 	hoverCursor,
 	loadDeckModules
 } from '../../utils/deck.js';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 import AttributeTable from './map/AttributeTable.svelte';
 import MapContainer from './map/MapContainer.svelte';
 
@@ -71,6 +73,10 @@ let headerInfo = $state<{
 	hasIndex: boolean;
 } | null>(null);
 
+// NOTE: intentionally broader than the canonical WGS84_CODES in constants.ts.
+// 4267 (NAD27) / 4269 (NAD83) are treated as lon/lat here because FGB files
+// commonly ship NAD-coded data that needs no reprojection for display.
+// Do not narrow to [4326, 4979] without a NAD-coded FGB test file.
 const WGS84_CODES = new Set([4326, 4979, 4267, 4269]);
 const CRS84_NAMES = ['CRS84', 'CRS 84', 'OGC:CRS84'];
 
@@ -190,7 +196,7 @@ function extractFirstCoord(coords: any): [number, number] | null {
 
 function flyToFirstFeature() {
 	if (!mapRef || !firstFeatureCoord) return;
-	mapRef.flyTo({ center: firstFeatureCoord, zoom: 14 });
+	mapRef.flyTo({ center: firstFeatureCoord, zoom: FIRST_FEATURE_FLY_ZOOM });
 }
 
 function cleanup() {
@@ -238,7 +244,6 @@ $effect(() => {
 onDestroy(cleanup);
 
 async function loadFlatGeobuf() {
-	console.log('[FGB]', 'loadFlatGeobuf() start');
 	cleanup();
 
 	loading = true;
@@ -280,13 +285,11 @@ async function loadFlatGeobuf() {
 				storedHeader.crs.org && code
 					? `${storedHeader.crs.org}:${code}`
 					: (storedHeader.crs.name ?? 'unknown');
-			console.log('[FGB]', 'Projected CRS detected:', crsLabel, '→ fetching proj4 definition');
 
 			try {
 				const proj4Def = await fetchProj4Def(code);
 				const converter = proj4(proj4Def, 'EPSG:4326') as any;
 				proj4Forward = (coord) => converter.forward(coord);
-				console.log('[FGB]', 'Reprojection ready:', crsLabel, '→ WGS84');
 
 				// Reproject envelope bounds so fitBounds works
 				if (storedHeader.envelope && storedHeader.envelope.length >= 4) {
@@ -298,7 +301,7 @@ async function loadFlatGeobuf() {
 				}
 			} catch (err) {
 				console.error('[FGB]', 'Failed to set up reprojection:', err);
-				error = `Cannot reproject CRS ${crsLabel} → WGS84: ${err instanceof Error ? err.message : err}`;
+				error = `Cannot reproject CRS ${crsLabel} → WGS84: ${handleLoadError(err) ?? String(err)}`;
 				streaming = false;
 				return;
 			}
@@ -308,11 +311,10 @@ async function loadFlatGeobuf() {
 		await streamFeatures(url, settings.featureLimit);
 	} catch (err) {
 		console.error('[FGB]', 'loadFlatGeobuf error:', err);
-		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;
 	} finally {
-		console.log('[FGB]', 'done, features:', features.length);
 		streaming = false;
 	}
 }
@@ -331,25 +333,10 @@ async function readHeaderWithRangeRequests(url: string): Promise<boolean> {
 	}
 
 	const header = reader.header;
-	console.log('[FGB]', 'header:', {
-		geometryType: header.geometryType,
-		featuresCount: header.featuresCount,
-		indexNodeSize: header.indexNodeSize,
-		envelope: header.envelope ? Array.from(header.envelope) : null,
-		columns: header.columns?.length
-	});
 	populateHeaderInfo(header);
 
 	storedHeader = header;
 	storedFeatureOffset = reader.lengthBeforeFeatures();
-	console.log(
-		'[FGB]',
-		'featureOffset:',
-		storedFeatureOffset,
-		'(index ~',
-		((storedFeatureOffset - 12) / 1024 / 1024).toFixed(1),
-		'MB skipped)'
-	);
 	return true;
 }
 
@@ -367,10 +354,9 @@ async function loadAllFeatures() {
 		await streamFeatures(url);
 	} catch (err) {
 		console.error('[FGB]', 'loadAllFeatures error:', err);
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		if (isAbortError(err)) return;
+		error = handleLoadError(err);
 	} finally {
-		console.log('[FGB]', 'loadAllFeatures done, features:', features.length);
 		streaming = false;
 	}
 }
@@ -382,7 +368,6 @@ async function loadAllFeatures() {
 async function streamFeatures(url: string, limit?: number) {
 	const ac = new AbortController();
 	abortController = ac;
-	const t0 = performance.now();
 
 	let iter: AsyncGenerator;
 	activeStreamCancel = null;
@@ -398,12 +383,6 @@ async function streamFeatures(url: string, limit?: number) {
 			headers: { Range: `bytes=${storedFeatureOffset}-` },
 			signal: ac.signal
 		});
-		console.log(
-			'[FGB]',
-			'Range fetch:',
-			featureResp.status,
-			featureResp.headers.get('content-range')
-		);
 		if (!featureResp.ok && featureResp.status !== 206)
 			throw new Error(`HTTP ${featureResp.status}: ${featureResp.statusText}`);
 		if (!featureResp.body) throw new Error('No response body');
@@ -475,7 +454,6 @@ async function streamFeatures(url: string, limit?: number) {
 			activeStreamCancel?.();
 			activeStreamCancel = null;
 			ac.abort();
-			console.log('[FGB]', 'force-closed connection after', features.length, 'features');
 		}
 	}
 
@@ -487,14 +465,6 @@ async function streamFeatures(url: string, limit?: number) {
 	featureCount = features.length;
 	updateLayer();
 	if (!flewToFeatures) flyToFeaturesBounds();
-	console.log(
-		'[FGB]',
-		'stream done:',
-		features.length,
-		'features in',
-		(performance.now() - t0).toFixed(0),
-		'ms'
-	);
 
 	if (hitLimit) {
 		hasMore = totalFeatures != null && totalFeatures > features.length;
@@ -601,7 +571,7 @@ function updateLayer() {
 				pointRadiusMinPixels: 4,
 				pointRadiusMaxPixels: 12,
 				autoHighlight: true,
-				highlightColor: [255, 255, 255, 100],
+				highlightColor: HIGHLIGHT_COLOR,
 				onHover: mapRef ? hoverCursor(mapRef) : undefined,
 				onClick: (info: any) => {
 					if (info.object?.properties) {
@@ -638,11 +608,11 @@ function onMapReady(map: maplibregl.Map) {
 <div class="relative flex h-full overflow-hidden">
 	{#if loading}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-sm text-zinc-400">{t('map.loadingFgb')}</p>
+			<p class="text-sm text-muted-foreground">{t('map.loadingFgb')}</p>
 		</div>
 	{:else if error && featureCount === 0}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-sm text-red-400">{error}</p>
+			<p class="text-sm text-destructive">{error}</p>
 		</div>
 	{:else}
 		<div class="flex-1">

package/dist/components/viewers/GeoParquetMapViewer.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
 import LocateIcon from '@lucide/svelte/icons/locate';
+import {
+	buildGeoArrowTables,
+	FIRST_FEATURE_FLY_ZOOM,
+	type GeoArrowGeomType,
+	type GeoArrowResult,
+	handleLoadError,
+	parseWKB
+} from '@walkthru-earth/objex-utils';
 import type maplibregl from 'maplibre-gl';
 import { onDestroy } from 'svelte';
 import { t } from '../../i18n/index.svelte.js';
@@ -14,12 +22,6 @@ import {
 	hoverCursor,
 	loadGeoArrowModules
 } from '../../utils/deck.js';
-import {
-	buildGeoArrowTables,
-	type GeoArrowGeomType,
-	type GeoArrowResult
-} from '../../utils/geoarrow.js';
-import { parseWKB } from '../../utils/wkb.js';
 import LoadProgress, { type ProgressEntry } from './LoadProgress.svelte';
 import AttributeTable from './map/AttributeTable.svelte';
 import MapContainer from './map/MapContainer.svelte';
@@ -73,7 +75,7 @@ function extractFirstCoord(coords: any): [number, number] | null {
 
 function flyToFirstFeature() {
 	if (!mapRef || !firstFeatureCoord) return;
-	mapRef.flyTo({ center: firstFeatureCoord, zoom: 14 });
+	mapRef.flyTo({ center: firstFeatureCoord, zoom: FIRST_FEATURE_FLY_ZOOM });
 }
 
 // mapData is read synchronously in loadGeoData (before any await),
@@ -173,7 +175,7 @@ async function loadGeoData() {
 		loading = false;
 	} catch (err) {
 		if (gen !== loadGen) return;
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 		loading = false;
 	}
 }
@@ -225,7 +227,7 @@ function onMapReady(map: maplibregl.Map) {
 		<LoadProgress stage={t('map.loadingGeometry')} entries={progressEntries} />
 	{:else if error}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-sm text-red-400">{error}</p>
+			<p class="text-sm text-destructive">{error}</p>
 		</div>
 	{:else}
 		<div class="flex-1">

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

@@ -1,6 +1,6 @@
+import { type GeoArrowGeomType } from '@walkthru-earth/objex-utils';
 import type { MapQueryResult, SchemaField } from '../../query/engine';
 import type { Tab } from '../../types';
-import { type GeoArrowGeomType } from '../../utils/geoarrow.js';
 import { type ProgressEntry } from './LoadProgress.svelte';
 type $$ComponentProps = {
     tab: Tab;

package/dist/components/viewers/ImageViewer.svelte

@@ -5,6 +5,7 @@ import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
 import RotateCwIcon from '@lucide/svelte/icons/rotate-cw';
 import ScanIcon from '@lucide/svelte/icons/scan';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
 import { Button } from '../ui/button/index.js';
@@ -14,8 +15,9 @@ import { t } from '../../i18n/index.svelte.js';
 import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
-import { handleLoadError } from '../../utils/error.js';
-import { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
+import { buildHttpsUrl, canStreamDirectly } from '../../utils/signed-url.js';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -149,13 +151,9 @@ onDestroy(cleanup);
 </script>
 
 <div class="flex h-full flex-col">
-	<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">{tab.extension.toUpperCase()}</Badge>
-
-		<div class="ms-auto flex items-center gap-1">
+	<ViewerHeader {tab}>
+		{#snippet badge()}<Badge variant="secondary">{tab.extension.toUpperCase()}</Badge>{/snippet}
+		{#snippet actions()}
 			<!-- Desktop controls -->
 			<div class="hidden items-center gap-1 sm:flex">
 				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={zoomIn} title={t('image.zoomIn')}>
@@ -178,7 +176,7 @@ onDestroy(cleanup);
 			<!-- 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-40">
@@ -190,8 +188,8 @@ onDestroy(cleanup);
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 			</div>
-		</div>
-	</div>
+		{/snippet}
+	</ViewerHeader>
 
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
@@ -203,9 +201,9 @@ onDestroy(cleanup);
 		ondblclick={handleDblClick}
 	>
 		{#if loading}
-			<p class="text-sm text-zinc-400">{t('image.loading')}</p>
+			<ViewerStatus kind="loading" message={t('image.loading')} />
 		{:else if error}
-			<p class="text-sm text-red-400">{error}</p>
+			<ViewerStatus kind="error" message={error} />
 		{:else if imgSrc}
 			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<img

package/dist/components/viewers/LoadProgress.svelte

@@ -29,7 +29,7 @@ let {
 	<!-- Active step -->
 	<div class="flex items-center gap-2 text-center">
 		<Loader2Icon class="size-4 shrink-0 animate-spin text-primary" />
-		<p class="text-sm text-zinc-500 dark:text-zinc-400">{stage || t('table.loading')}</p>
+		<p class="text-sm text-muted-foreground">{stage || t('table.loading')}</p>
 	</div>
 
 	<!-- Discovered metadata -->
@@ -42,17 +42,17 @@ let {
 					<div class="flex items-start gap-1.5 sm:gap-2">
 						<CheckCircleIcon class="mt-0.5 size-3 shrink-0 text-green-500/80" />
 						<span
-							class="w-14 shrink-0 text-[11px] leading-4 text-zinc-400 sm:w-[4.5rem] sm:text-xs dark:text-zinc-500"
+							class="w-14 shrink-0 text-[11px] leading-4 text-muted-foreground sm:w-[4.5rem] sm:text-xs"
 						>
 							{entry.label}
 						</span>
 						<div class="min-w-0 flex-1">
-							<span class="break-all text-[11px] font-medium leading-4 text-zinc-600 sm:text-xs dark:text-zinc-300">
+							<span class="break-all text-[11px] font-medium leading-4 text-foreground sm:text-xs">
 								{entry.value}
 							</span>
 							{#if entry.detail}
 								<p
-									class="mt-0.5 truncate font-mono text-[10px] leading-tight text-zinc-400 dark:text-zinc-500"
+									class="mt-0.5 truncate font-mono text-[10px] leading-tight text-muted-foreground"
 								>
 									{entry.detail}
 								</p>
@@ -68,7 +68,7 @@ let {
 	{#if onCancel}
 		<div class="flex flex-col items-center gap-2">
 			<button
-				class="flex items-center gap-1 rounded border border-zinc-300 px-3 py-1 text-xs text-zinc-500 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800"
+				class="flex items-center gap-1 rounded border border-border px-3 py-1 text-xs text-muted-foreground hover:bg-muted"
 				onclick={onCancel}
 			>
 				<XCircleIcon class="size-3" />
@@ -83,7 +83,7 @@ let {
 						<XCircleIcon class="size-3" />
 						{t('table.forceStop')}
 					</button>
-					<p class="max-w-xs text-center text-[10px] text-zinc-400 dark:text-zinc-500">
+					<p class="max-w-xs text-center text-[10px] text-muted-foreground">
 						{t('table.forceStopWarning')}
 					</p>
 				</div>