@walkthru-earth/objex 1.4.0 → 1.5.0

package/dist/components/viewers/RawViewer.svelte

@@ -11,6 +11,8 @@ 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 ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -69,30 +71,31 @@ async function loadHexDump() {
 </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>
-		{#if tab.extension}
-			<Badge variant="secondary">{tab.extension}</Badge>
-		{/if}
-		{#if !loading && fileSize > 0}
-			<span class="hidden text-xs text-zinc-400 sm:inline dark:text-zinc-500">
-				{formatFileSize(fileSize)}
-			</span>
-			{#if truncated}
-				<span class="hidden text-xs text-amber-500 sm:inline">
-					({t('raw.showingFirst').replace('{size}', formatFileSize(MAX_BYTES))})
+	<ViewerHeader {tab}>
+		{#snippet badge()}
+			{#if tab.extension}
+				<Badge variant="secondary">{tab.extension}</Badge>
+			{/if}
+		{/snippet}
+		{#snippet actions()}
+			{#if !loading && fileSize > 0}
+				<span class="hidden text-xs text-muted-foreground sm:inline">
+					{formatFileSize(fileSize)}
 				</span>
+				{#if truncated}
+					<span class="hidden text-xs text-amber-500 sm:inline">
+						({t('raw.showingFirst').replace('{size}', formatFileSize(MAX_BYTES))})
+					</span>
+				{/if}
 			{/if}
-		{/if}
-	</div>
+		{/snippet}
+	</ViewerHeader>
 
 	<div class="flex-1 overflow-auto bg-zinc-950 p-4 font-mono text-xs">
 		{#if loading}
-			<p class="text-zinc-400">{t('raw.loading')}</p>
+			<ViewerStatus kind="loading" message={t('raw.loading')} />
 		{:else if error}
-			<p class="text-red-400">{error}</p>
+			<ViewerStatus kind="error" message={error} />
 		{:else}
 			<table class="w-full border-collapse">
 				<thead>

package/dist/components/viewers/StacMapViewer.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
 import type { Tab } from '../../types';
-import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
+import { resolveSignedTabUrl } from '../../utils/signed-url-effect.js';
 
 let { tab, variant = 'stac-map' }: { tab: Tab; variant?: 'stac-map' | 'stac-browser' } = $props();
 
 let fileUrl = $state('');
 
-$effect(() => {
-	const id = tab.id;
-	let cancelled = false;
-	(async () => {
-		const url = await buildHttpsUrlAsync(tab);
-		if (cancelled || id !== tab.id) return;
-		fileUrl = url;
-	})();
-	return () => {
-		cancelled = true;
-	};
-});
+$effect(() =>
+	resolveSignedTabUrl(tab, (u) => {
+		fileUrl = u;
+	})
+);
 
 const iframeSrc = $derived.by(() => {
 	if (!fileUrl) return '';

package/dist/components/viewers/StacMosaicViewer.svelte

@@ -22,6 +22,7 @@ import {
 	extractMosaicAssets,
 	type FacetState,
 	formatFileSize,
+	handleLoadError,
 	hasActiveFilters,
 	isAbortError,
 	isSingleAssetComposite,
@@ -36,7 +37,8 @@ import {
 	type StacItemView,
 	type StacRoutableKind,
 	smokeTestHref,
-	spatialCellKey
+	spatialCellKey,
+	TILE_DEBOUNCE_MS
 } from '@walkthru-earth/objex-utils';
 import type maplibregl from 'maplibre-gl';
 import { onDestroy, untrack } from 'svelte';
@@ -503,7 +505,7 @@ const mosaicLayer = $derived.by(() => {
 					console.warn('[StacMosaic] getSource failed', {
 						id: source.id,
 						href: source.href,
-						error: err instanceof Error ? err.message : err
+						error: handleLoadError(err) ?? String(err)
 					});
 				}
 				return undefined as unknown as GeoTIFF;
@@ -669,7 +671,7 @@ const multiCogLayers = $derived.by(() => {
 			// layers, so the aggregate concurrency budget is even tighter —
 			// keep `maxRequests` low.
 			maxRequests: 6,
-			debounceTime: 200,
+			debounceTime: TILE_DEBOUNCE_MS,
 			onTileError: (err: Error) => {
 				if (isAbortError(err)) return;
 				logTileErrorOnce(view.id, err);
@@ -1346,9 +1348,9 @@ async function loadMosaic(map: maplibregl.Map): Promise<void> {
 						if (gen !== loadGen || signal.aborted) return;
 						if (!result.ok) smokeWarning = result.reason;
 					} catch (err) {
-						if (err instanceof DOMException && err.name === 'AbortError') return;
+						if (isAbortError(err)) return;
 						if (gen !== loadGen) return;
-						smokeWarning = err instanceof Error ? err.message : String(err);
+						smokeWarning = handleLoadError(err);
 					}
 				})();
 			}
@@ -1444,8 +1446,8 @@ async function loadMosaic(map: maplibregl.Map): Promise<void> {
 	} catch (err) {
 		if (gen !== loadGen) return;
 		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);
 		stage = 'error';
 		loading = false;
 	}

package/dist/components/viewers/StacTabViewer.svelte

@@ -105,10 +105,10 @@ const rawContentMode: ViewMode = $derived(isParquet ? 'table' : 'code');
 <div class="flex h-full flex-col overflow-hidden">
 	{#key tab.id}
 		<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="max-w-[120px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
+				class="max-w-[120px] truncate text-sm font-medium text-foreground sm:max-w-none"
 			>
 				{tab.name}
 			</span>

package/dist/components/viewers/TableGrid.svelte

@@ -77,25 +77,27 @@ const tableWidth = $derived(
 	ROW_NUM_WIDTH + columns.reduce((sum, col) => sum + (columnWidths[col] || DEFAULT_WIDTH), 0)
 );
 
-function startResize(col: string, e: MouseEvent) {
+function startResize(col: string, e: PointerEvent) {
 	e.preventDefault();
 	e.stopPropagation();
+	(e.target as HTMLElement).setPointerCapture?.(e.pointerId);
 	const startX = e.clientX;
 	const startW = columnWidths[col] || DEFAULT_WIDTH;
 
-	function onMove(ev: MouseEvent) {
+	function onMove(ev: PointerEvent) {
 		columnWidths[col] = Math.max(MIN_WIDTH, startW + (ev.clientX - startX));
 	}
-	function onUp() {
-		document.removeEventListener('mousemove', onMove);
-		document.removeEventListener('mouseup', onUp);
+	function onUp(ev: PointerEvent) {
+		(ev.target as HTMLElement).releasePointerCapture?.(ev.pointerId);
+		document.removeEventListener('pointermove', onMove);
+		document.removeEventListener('pointerup', onUp);
 		resizeCleanup = null;
 	}
-	document.addEventListener('mousemove', onMove);
-	document.addEventListener('mouseup', onUp);
+	document.addEventListener('pointermove', onMove);
+	document.addEventListener('pointerup', onUp);
 	resizeCleanup = () => {
-		document.removeEventListener('mousemove', onMove);
-		document.removeEventListener('mouseup', onUp);
+		document.removeEventListener('pointermove', onMove);
+		document.removeEventListener('pointerup', onUp);
 	};
 }
 
@@ -221,16 +223,16 @@ function isNull(value: any): boolean {
 		</colgroup>
 
 		<thead class="sticky top-0 z-10">
-			<tr class="bg-zinc-100 dark:bg-zinc-900">
+			<tr class="bg-muted">
 				<th
-					class="border-b border-e border-zinc-200 px-2 py-2 text-start text-xs font-medium text-zinc-400 dark:border-zinc-700 dark:text-zinc-500"
+					class="border-b border-e border-border px-2 py-2 text-start text-xs font-medium text-muted-foreground"
 				>
 					#
 				</th>
 				{#each columns as col}
 					{@const category = columnCategories[col]}
 					<th
-						class="group relative select-none border-b border-e border-zinc-200 px-3 py-1.5 dark:border-zinc-700"
+						class="group relative select-none border-b border-e border-border px-3 py-1.5"
 						class:text-start={category !== 'number'}
 						class:text-end={category === 'number'}
 						class:cursor-pointer={!!onSort}
@@ -243,7 +245,7 @@ function isNull(value: any): boolean {
 							>
 								{typeLabel(category)}
 							</span>
-							<span class="truncate text-xs font-semibold text-zinc-700 dark:text-zinc-300">{col}</span>
+							<span class="truncate text-xs font-semibold text-foreground">{col}</span>
 							{#if sortColumn === col}
 								{#if sortDirection === 'asc'}
 									<ArrowUpIcon class="size-3 shrink-0 text-blue-500" />
@@ -253,18 +255,20 @@ function isNull(value: any): boolean {
 							{/if}
 						</div>
 						{#if columnTypes[col]}
-							<div class="mt-0.5 truncate text-[10px] font-normal text-zinc-400 dark:text-zinc-500">
+							<div class="mt-0.5 truncate text-[10px] font-normal text-muted-foreground">
 								{columnTypes[col]}
 							</div>
 						{/if}
 						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<div
-							class="absolute end-0 top-0 h-full w-1.5 cursor-col-resize bg-transparent transition-colors hover:bg-blue-400/60"
-							onmousedown={(e) => startResize(col, e)}
+							class="absolute end-0 top-0 h-full w-4 cursor-col-resize touch-none px-1.5"
+							onpointerdown={(e) => startResize(col, e)}
 							ondblclick={(e) => { e.stopPropagation(); resetWidth(col); }}
 							role="separator"
 							aria-orientation="vertical"
-						></div>
+						>
+							<div class="h-full w-full bg-transparent transition-colors hover:bg-blue-400/60"></div>
+						</div>
 					</th>
 				{/each}
 			</tr>
@@ -274,7 +278,7 @@ function isNull(value: any): boolean {
 			{#each displayRows as row, i (i)}
 				<tr class="hover:bg-blue-50/50 dark:hover:bg-zinc-800/40">
 					<td
-						class="border-b border-e border-zinc-100 px-2 py-1 text-xs tabular-nums text-zinc-400 dark:border-zinc-800 dark:text-zinc-600"
+						class="border-b border-e border-border px-2 py-1 text-xs tabular-nums text-muted-foreground"
 					>
 						{i + 1}
 					</td>
@@ -283,14 +287,14 @@ function isNull(value: any): boolean {
 						{@const cellValue = row[col]}
 						{@const cellIsNull = isNull(cellValue)}
 						<td
-							class="overflow-hidden text-ellipsis whitespace-nowrap border-b border-e border-zinc-100 px-3 py-1 text-[13px] dark:border-zinc-800"
+							class="overflow-hidden text-ellipsis whitespace-nowrap border-b border-e border-border px-3 py-1 text-[13px]"
 							class:text-end={category === 'number' && !cellIsNull}
 							class:font-mono={category === 'number' && !cellIsNull}
 							title={cellIsNull ? 'NULL' : formatCell(cellValue, category)}
 							oncontextmenu={(e) => handleContextMenu(e, cellValue, row, col)}
 						>
 							{#if cellIsNull}
-								<span class="text-[11px] italic text-zinc-400 dark:text-zinc-600">null</span>
+								<span class="text-[11px] italic text-muted-foreground">null</span>
 							{:else if typeof cellValue === 'boolean'}
 								{#if cellValue}
 									<CheckIcon class="inline size-3.5 text-green-500" />
@@ -298,7 +302,7 @@ function isNull(value: any): boolean {
 									<XIcon class="inline size-3.5 text-red-400" />
 								{/if}
 							{:else}
-								<span class="text-zinc-800 dark:text-zinc-200">
+								<span class="text-foreground">
 									{formatCell(cellValue, category)}
 								</span>
 							{/if}
@@ -310,7 +314,7 @@ function isNull(value: any): boolean {
 	</table>
 
 	{#if renderedCount < rows.length}
-		<div class="py-2 text-center text-xs text-zinc-400 dark:text-zinc-600">
+		<div class="py-2 text-center text-xs text-muted-foreground">
 			{t('statusBar.rowsLabel')}: {renderedCount.toLocaleString()} / {rows.length.toLocaleString()} — scroll for more
 		</div>
 	{/if}
@@ -319,36 +323,36 @@ function isNull(value: any): boolean {
 <!-- Context menu -->
 {#if ctxMenu}
 	<div
-		class="fixed z-50 min-w-40 rounded-lg border border-zinc-200 bg-white py-1 shadow-xl dark:border-zinc-700 dark:bg-zinc-800"
+		class="fixed z-50 min-w-40 rounded-lg border border-border bg-background py-1 shadow-xl"
 		style="left: {ctxMenu.x}px; top: {ctxMenu.y}px;"
 		role="menu"
 	>
 		<button
-			class="flex w-full items-center gap-2 px-3 py-1.5 text-start text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700"
+			class="flex w-full items-center gap-2 px-3 py-1.5 text-start text-xs text-foreground hover:bg-muted"
 			onclick={copyCell}
 			role="menuitem"
 		>
-			<ClipboardIcon class="size-3.5 text-zinc-400" />
+			<ClipboardIcon class="size-3.5 text-muted-foreground" />
 			{t('table.copyCell')}
 		</button>
 		<button
-			class="flex w-full items-center gap-2 px-3 py-1.5 text-start text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700"
+			class="flex w-full items-center gap-2 px-3 py-1.5 text-start text-xs text-foreground hover:bg-muted"
 			onclick={copyRow}
 			role="menuitem"
 		>
-			<RowsIcon class="size-3.5 text-zinc-400" />
+			<RowsIcon class="size-3.5 text-muted-foreground" />
 			{t('table.copyRow')}
 		</button>
 		<button
-			class="flex w-full items-center gap-2 px-3 py-1.5 text-start text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-700"
+			class="flex w-full items-center gap-2 px-3 py-1.5 text-start text-xs text-foreground hover:bg-muted"
 			onclick={copyColumn}
 			role="menuitem"
 		>
-			<ColumnsIcon class="size-3.5 text-zinc-400" />
+			<ColumnsIcon class="size-3.5 text-muted-foreground" />
 			{t('table.copyColumn')}
 		</button>
 		{#if copied}
-			<div class="border-t border-zinc-200 px-3 py-1 text-center text-[10px] text-green-500 dark:border-zinc-700">
+			<div class="border-t border-border px-3 py-1 text-center text-[10px] text-green-500">
 				Copied!
 			</div>
 		{/if}

package/dist/components/viewers/TableStatusBar.svelte

@@ -39,7 +39,7 @@ function handleClickOutside(e: MouseEvent) {
 
 <svelte:window onclick={() => { if (exportOpen) exportOpen = false; }} />
 
-<div class="flex h-7 items-center justify-between border-t border-zinc-200 bg-zinc-50 px-3 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
+<div class="flex h-7 items-center justify-between border-t border-border bg-muted px-3 text-xs text-muted-foreground">
 	<!-- Left side -->
 	<div>
 		{#if loading}
@@ -47,7 +47,7 @@ function handleClickOutside(e: MouseEvent) {
 		{:else if rowCount > 0}
 			<span>{rowCount.toLocaleString()} {t('statusBar.rowsLabel')}</span>
 			{#if executionTimeMs > 0}
-				<span class="text-zinc-400 dark:text-zinc-500"> {t('statusBar.inTime', { time: executionTimeMs })}</span>
+				<span class="text-muted-foreground"> {t('statusBar.inTime', { time: executionTimeMs })}</span>
 			{/if}
 		{:else}
 			<span>{t('statusBar.noResults')}</span>
@@ -57,7 +57,7 @@ function handleClickOutside(e: MouseEvent) {
 	<!-- Right side: export dropdown -->
 	<div class="relative">
 		<button
-			class="flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-zinc-200 dark:hover:bg-zinc-800"
+			class="flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent"
 			onclick={(e) => { e.stopPropagation(); exportOpen = !exportOpen; }}
 			disabled={rows.length === 0}
 			class:opacity-40={rows.length === 0}
@@ -69,18 +69,18 @@ function handleClickOutside(e: MouseEvent) {
 
 		{#if exportOpen}
 			<div
-				class="absolute bottom-full end-0 mb-1 w-32 rounded border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800"
+				class="absolute bottom-full end-0 mb-1 w-32 rounded border border-border bg-background py-1 shadow-lg"
 				role="menu"
 			>
 				<button
-					class="w-full px-3 py-1.5 text-start text-xs hover:bg-zinc-100 dark:hover:bg-zinc-700"
+					class="w-full px-3 py-1.5 text-start text-xs hover:bg-muted"
 					onclick={(e) => { e.stopPropagation(); handleExportCsv(); }}
 					role="menuitem"
 				>
 					{t('statusBar.exportCsv')}
 				</button>
 				<button
-					class="w-full px-3 py-1.5 text-start text-xs hover:bg-zinc-100 dark:hover:bg-zinc-700"
+					class="w-full px-3 py-1.5 text-start text-xs hover:bg-muted"
 					onclick={(e) => { e.stopPropagation(); handleExportJson(); }}
 					role="menuitem"
 				>

package/dist/components/viewers/TableToolbar.svelte

@@ -10,6 +10,7 @@ import InfoIcon from '@lucide/svelte/icons/info';
 import LinkIcon from '@lucide/svelte/icons/link';
 import MapIcon from '@lucide/svelte/icons/map';
 import TableIcon from '@lucide/svelte/icons/table';
+import { COPY_FEEDBACK_MS } from '@walkthru-earth/objex-utils';
 import { Button } from '../ui/button/index.js';
 import * as DropdownMenu from '../ui/dropdown-menu/index.js';
 import { Separator } from '../ui/separator/index.js';
@@ -89,7 +90,7 @@ async function handleCopy(type: 'https' | 'provider') {
 	try {
 		await navigator.clipboard.writeText(url);
 		copiedType = type;
-		setTimeout(() => (copiedType = null), 2000);
+		setTimeout(() => (copiedType = null), COPY_FEEDBACK_MS);
 	} catch {
 		// clipboard API may fail in some contexts
 	}
@@ -117,13 +118,13 @@ function handleJumpKeydown(e: KeyboardEvent) {
 </script>
 
 <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"
 >
 	<!-- File name — truncated on mobile -->
-	<span class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">{fileName}</span>
+	<span class="truncate max-w-[120px] text-sm font-medium text-foreground sm:max-w-none">{fileName}</span>
 
 	<!-- Row/col count — hidden on mobile -->
-	<span class="hidden text-xs text-zinc-400 sm:inline dark:text-zinc-500">
+	<span class="hidden text-xs text-muted-foreground sm:inline">
 		{#if rowCount > 0}
 			{rowCount.toLocaleString()} {t('toolbar.rows')} &times; {columnCount} cols
 		{:else if columnCount > 0}
@@ -137,7 +138,7 @@ function handleJumpKeydown(e: KeyboardEvent) {
 			<Button
 				variant={viewMode === 'info' ? 'default' : 'outline'}
 				size="sm"
-				class="h-7 gap-1 px-2 text-xs {viewMode !== 'info' ? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 hover:text-zinc-700 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900' : ''}"
+				class="h-7 gap-1 px-2 text-xs {viewMode !== 'info' ? 'border-border text-muted-foreground hover:bg-muted hover:text-foreground' : ''}"
 				onclick={onToggleInfo}
 			>
 				<InfoIcon class="size-3" />
@@ -227,7 +228,7 @@ function handleJumpKeydown(e: KeyboardEvent) {
 			{#if onPageSizeChange && viewMode === 'table'}
 				<Separator orientation="vertical" class="!h-4" />
 				<select
-					class="rounded border border-zinc-200 bg-transparent px-1.5 py-0.5 text-xs text-zinc-500 outline-none dark:border-zinc-700 dark:text-zinc-400"
+					class="rounded border border-border bg-transparent px-1.5 py-0.5 text-xs text-muted-foreground outline-none"
 					value={pageSize}
 					onchange={(e) => onPageSizeChange?.(parseInt(e.currentTarget.value, 10))}
 				>
@@ -271,7 +272,7 @@ function handleJumpKeydown(e: KeyboardEvent) {
 					<!-- svelte-ignore a11y_autofocus -->
 					<input
 						type="number"
-						class="h-7 w-14 border border-zinc-200 bg-transparent px-1 text-center text-xs outline-none dark:border-zinc-700 dark:bg-zinc-900"
+						class="h-7 w-14 border border-border bg-transparent px-1 text-center text-xs outline-none"
 						bind:value={jumpPageValue}
 						onkeydown={handleJumpKeydown}
 						onblur={handleJumpSubmit}
@@ -320,7 +321,7 @@ function handleJumpKeydown(e: KeyboardEvent) {
 		<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"
+					class="rounded p-1 text-muted-foreground hover:bg-muted"
 				>
 					<EllipsisVerticalIcon class="size-4" />
 				</DropdownMenu.Trigger>

package/dist/components/viewers/TableViewer.svelte

@@ -7,6 +7,8 @@ import {
 	extractGeometryTypes,
 	findGeoColumn,
 	findGeoColumnFromRows,
+	handleLoadError,
+	isWgs84,
 	parseWKB,
 	readParquetMetadata,
 	toBinary,
@@ -166,6 +168,9 @@ function buildDefaultSql(
 }
 
 function extractMapData(queryRows: Record<string, any>[]): MapQueryResult | null {
+	// The map attribute table is only consumed by the map view. Skip the
+	// O(rows x cols) walk entirely when the table/info/stac view is showing.
+	if (viewMode !== 'map') return null;
 	if (!geoCol || queryRows.length === 0 || !columns.includes('__wkb')) return null;
 
 	const wkbArrays: Uint8Array[] = [];
@@ -245,6 +250,14 @@ $effect(() => {
 	});
 });
 
+// When the user switches into map view and mapData is null (because extraction was
+// skipped by the viewMode gate while in table/info/stac view), compute it now.
+$effect(() => {
+	if (viewMode === 'map' && mapData === null && rows.length > 0) {
+		mapData = extractMapData(rows);
+	}
+});
+
 function cancelLoad() {
 	loadGeneration++;
 	loadStage = t('table.cancellingQuery');
@@ -502,11 +515,7 @@ async function loadTable() {
 					const crsMatch = duckGeoField.type.match(/^GEOMETRY\('([^']+)'\)/i);
 					if (crsMatch) {
 						const crsVal = crsMatch[1];
-						const isWgs84 =
-							crsVal === 'EPSG:4326' ||
-							crsVal === 'OGC:CRS84' ||
-							(crsVal.startsWith('EPSG:') && [4326, 4979].includes(Number(crsVal.split(':')[1])));
-						sourceCrs = isWgs84 ? null : crsVal;
+						sourceCrs = isWgs84(crsVal) ? null : crsVal;
 						needsDuckDbCrs = false;
 					} else if (typeStr.startsWith('GEOMETRY')) {
 						// GEOMETRY without CRS param — still need CRS from metadata
@@ -720,7 +729,7 @@ async function loadTable() {
 	} catch (err) {
 		if (thisGen !== loadGeneration) return;
 		console.error('[TableViewer] Error:', err);
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 		loading = false;
 		loadStage = '';
 	}
@@ -763,7 +772,7 @@ async function executeQuery(sql: string) {
 			error = t('table.queryCancelled');
 			return null;
 		}
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 		return null;
 	}
 }
@@ -809,7 +818,7 @@ async function runCustomSql() {
 		});
 	} catch (err) {
 		executionTimeMs = Math.round(performance.now() - start);
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 
 		queryHistory.add({
 			sql: customSql,
@@ -930,7 +939,7 @@ function setStacView() {
 
 	{#if viewMode === 'table'}
 		<!-- SQL Query Bar — hidden during schema/CRS detection, shown once query starts running -->
-		<div class="border-b border-zinc-200 px-2 py-1.5 sm:px-4 dark:border-zinc-800" class:hidden={loading && loadStage !== t('table.runningQuery')}>
+		<div class="border-b border-border px-2 py-1.5 sm:px-4" class:hidden={loading && loadStage !== t('table.runningQuery')}>
 			<div class="flex items-start gap-1.5 sm:gap-2">
 				<div class="min-w-0 flex-1">
 					<CodeMirrorEditor
@@ -950,7 +959,7 @@ function setStacView() {
 						{queryRunning ? t('table.running') : t('table.run')}
 					</button>
 					<button
-						class="rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 sm:px-3 dark:hover:bg-zinc-800"
+						class="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted sm:px-3"
 						onclick={handleFormatSql}
 					>
 						{t('table.format')}
@@ -963,9 +972,9 @@ function setStacView() {
 			<div
 				class="border-b border-red-200 bg-red-50 px-4 py-2 dark:border-red-800 dark:bg-red-950"
 			>
-				<p class="text-xs text-red-600 dark:text-red-400">{error}</p>
+				<p class="text-xs text-destructive">{error}</p>
 				{#if tab.source === 'remote'}
-					<p class="mt-1 text-[10px] text-zinc-400 break-all">{buildStorageUrl(tab)}</p>
+					<p class="mt-1 text-[10px] text-muted-foreground break-all">{buildStorageUrl(tab)}</p>
 				{/if}
 			</div>
 		{/if}
@@ -985,7 +994,7 @@ function setStacView() {
 					<div
 						class="max-w-lg rounded-lg border border-red-300 bg-red-50 px-6 py-4 text-center dark:border-red-800 dark:bg-red-950"
 					>
-						<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
+						<p class="text-sm text-destructive">{error}</p>
 					</div>
 				</div>
 			{:else}

package/dist/components/viewers/ViewerHeader.svelte

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

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

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

package/dist/components/viewers/ViewerStatus.svelte

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

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

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