@walkthru-earth/objex 1.3.1 → 1.5.0

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

@@ -1,5 +1,5 @@
+import { type StacRoutableKind } from '@walkthru-earth/objex-utils';
 import type { Tab } from '../../types.js';
-import { type StacRoutableKind } from '../../utils/stac.js';
 type $$ComponentProps = {
     tab: Tab;
     classified?: StacRoutableKind;

package/dist/components/viewers/StacTabViewer.svelte

@@ -3,12 +3,12 @@ import CodeIcon from '@lucide/svelte/icons/file-code';
 import GlobeIcon from '@lucide/svelte/icons/globe';
 import LayersIcon from '@lucide/svelte/icons/layers';
 import MapIcon from '@lucide/svelte/icons/map';
+import type { StacRoutableKind } from '@walkthru-earth/objex-utils';
 import { t } from '../../i18n/index.svelte.js';
 import { connectionStore } from '../../stores/connections.svelte.js';
 import type { Tab } from '../../types.js';
-import type { StacRoutableKind } from '../../utils/stac.js';
-import { canStreamDirectly } from '../../utils/url.js';
-import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+import { canStreamDirectly } from '../../utils/signed-url.js';
+import { getUrlView, pickViewMode, updateUrlView } from '../../utils/url-state.js';
 import { Badge } from '../ui/badge/index.js';
 import { Button } from '../ui/button/index.js';
 import * as Tooltip from '../ui/tooltip/index.js';
@@ -28,7 +28,11 @@ interface Props {
 
 let { tab, mapKind, classified }: Props = $props();
 
-type ViewMode = 'map' | 'stac-map' | 'stac-browser' | 'code';
+// 'code' is the URL token for raw-content view on JSON tabs; 'table' is the
+// equivalent token on stac-geoparquet tabs. Both render the nested viewer
+// (CodeViewer for JSON, TableViewer for parquet) but the URL stays
+// semantically meaningful per filetype.
+type ViewMode = 'map' | 'stac-map' | 'stac-browser' | 'code' | 'table';
 
 interface CodeActions {
 	toggleFormat: () => Promise<void>;
@@ -70,13 +74,16 @@ const stacBadgeKey = $derived.by(() => {
 });
 
 function initialView(): ViewMode {
+	// `'map'` is conditional on `mapKind`, so it's not in the static vocabulary.
+	// Both `'code'` and `'table'` are accepted regardless of filetype so a URL
+	// shared from one type still resolves; the render branch dispatches to the
+	// appropriate inner viewer (`TableViewer` / `CodeViewer`).
+	const picked = pickViewMode<ViewMode>(['stac-map', 'stac-browser', 'code', 'table'], 'stac-map');
 	const urlView = getUrlView();
 	if (urlView === 'map' && mapKind) return 'map';
-	if (urlView === 'stac-map') return 'stac-map';
-	if (urlView === 'stac-browser') return 'stac-browser';
-	if (urlView === 'code') return 'code';
-	if (mapKind) return 'map';
-	return 'stac-map';
+	// Hash was unknown or empty: prefer the rich map view when available.
+	if (mapKind && !urlView) return 'map';
+	return picked;
 }
 
 let viewMode = $state<ViewMode>(initialView());
@@ -86,18 +93,22 @@ let codeActions = $state<CodeActions | null>(null);
 function setView(next: ViewMode) {
 	if (viewMode === next) return;
 	viewMode = next;
-	updateUrlView(next === 'map' ? 'map' : next);
+	updateUrlView(next);
 }
+
+// The "Table" / "JSON" button in the navbar writes a filetype-aware token so
+// the URL stays semantically meaningful (parquet → `#table`, json → `#code`).
+const rawContentMode: ViewMode = $derived(isParquet ? 'table' : 'code');
 </script>
 
 <Tooltip.Provider>
 <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>
@@ -191,9 +202,9 @@ function setView(next: ViewMode) {
 				{/if}
 				<Button
 					size="sm"
-					variant={viewMode === 'code' ? 'default' : 'ghost'}
+					variant={viewMode === rawContentMode ? 'default' : 'ghost'}
 					class="h-7 gap-1 px-2"
-					onclick={() => setView('code')}
+					onclick={() => setView(rawContentMode)}
 				>
 					<CodeIcon class="size-3.5" />
 					{isParquet ? t('stac.viewTable') : t('stac.viewJson')}
@@ -244,7 +255,7 @@ function setView(next: ViewMode) {
 			{:else if viewMode === 'stac-browser'}
 				<StacMapViewer {tab} variant="stac-browser" />
 			{:else if isParquet}
-				<TableViewer {tab} />
+				<TableViewer {tab} nested />
 			{:else}
 				<CodeViewer {tab} nested bind:wordWrap bind:actions={codeActions} />
 			{/if}

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

@@ -1,5 +1,5 @@
+import type { StacRoutableKind } from '@walkthru-earth/objex-utils';
 import type { Tab } from '../../types.js';
-import type { StacRoutableKind } from '../../utils/stac.js';
 type MapKind = 'mosaic' | 'multicog' | null;
 interface Props {
     tab: Tab;

package/dist/components/viewers/TableGrid.svelte

@@ -7,15 +7,15 @@ import ColumnsIcon from '@lucide/svelte/icons/columns-3';
 import CopyIcon from '@lucide/svelte/icons/copy';
 import RowsIcon from '@lucide/svelte/icons/rows-3';
 import XIcon from '@lucide/svelte/icons/x';
-import { onDestroy } from 'svelte';
-import { t } from '../../i18n/index.svelte.js';
 import {
 	classifyType,
+	jsonReplacerBigInt,
 	type TypeCategory,
 	typeBadgeClass,
 	typeLabel
-} from '../../utils/column-types.js';
-import { jsonReplacerBigInt } from '../../utils/format.js';
+} from '@walkthru-earth/objex-utils';
+import { onDestroy } from 'svelte';
+import { t } from '../../i18n/index.svelte.js';
 
 const INITIAL_ROWS = 100;
 const BATCH_SIZE = 100;
@@ -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

@@ -1,8 +1,8 @@
 <script lang="ts">
 import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 import DownloadIcon from '@lucide/svelte/icons/download';
+import { exportToCsv, exportToJson } from '@walkthru-earth/objex-utils';
 import { t } from '../../i18n/index.svelte.js';
-import { exportToCsv, exportToJson } from '../../utils/export.js';
 
 let {
 	rowCount = 0,
@@ -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,13 +10,14 @@ 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';
 import { t } from '../../i18n/index.svelte.js';
 import { connections } from '../../stores/connections.svelte.js';
 import type { Tab } from '../../types';
-import { buildHttpsUrl, buildStorageUrl } from '../../utils/url.js';
+import { buildHttpsUrl, buildStorageUrl } from '../../utils/signed-url.js';
 
 const PROVIDER_LABELS: Record<string, string> = {
 	s3: 'S3',
@@ -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

@@ -1,4 +1,19 @@
 <script lang="ts">
+import type { GeoArrowGeomType } from '@walkthru-earth/objex-utils';
+import {
+	buildTransformExpr,
+	extractBounds,
+	extractEpsgFromGeoMeta,
+	extractGeometryTypes,
+	findGeoColumn,
+	findGeoColumnFromRows,
+	handleLoadError,
+	isWgs84,
+	parseWKB,
+	readParquetMetadata,
+	toBinary,
+	wrapWkbWithCrs
+} from '@walkthru-earth/objex-utils';
 import { format as formatSql } from 'sql-formatter';
 import { untrack } from 'svelte';
 import CodeMirrorEditor from '../editor/CodeMirrorEditor.svelte';
@@ -18,22 +33,13 @@ import { queryHistory } from '../../stores/query-history.svelte.js';
 import { settings } from '../../stores/settings.svelte.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
-import type { GeoArrowGeomType } from '../../utils/geoarrow.js';
-import { buildTransformExpr, wrapWkbWithCrs } from '../../utils/geometry-type.js';
-import {
-	extractBounds,
-	extractEpsgFromGeoMeta,
-	extractGeometryTypes,
-	readParquetMetadata
-} from '../../utils/parquet-metadata.js';
 import {
 	buildDuckDbUrl,
 	buildHttpsUrl,
 	buildStorageUrl,
 	canStreamDirectly
-} from '../../utils/url.js';
-import { getUrlView, updateUrlView } from '../../utils/url-state.js';
-import { findGeoColumn, findGeoColumnFromRows, parseWKB, toBinary } from '../../utils/wkb.js';
+} from '../../utils/signed-url.js';
+import { pickViewMode, updateUrlView } from '../../utils/url-state.js';
 import FileInfo from './FileInfo.svelte';
 import LoadProgress, { type ProgressEntry } from './LoadProgress.svelte';
 import QueryHistoryPanel from './QueryHistoryPanel.svelte';
@@ -41,7 +47,11 @@ import TableGrid from './TableGrid.svelte';
 import TableStatusBar from './TableStatusBar.svelte';
 import TableToolbar from './TableToolbar.svelte';
 
-let { tab }: { tab: Tab } = $props();
+// `nested = true` when mounted inside `StacTabViewer` for a stac-geoparquet
+// tab. The outer wrapper already exposes `stac-map` / `STAC Browser` buttons,
+// so the inner `TableToolbar` hides its own STAC Map toggle to avoid
+// duplicating the same `StacMapViewer` mount.
+let { tab, nested = false }: { tab: Tab; nested?: boolean } = $props();
 
 let pageSize = $state(settings.featureLimit);
 
@@ -56,9 +66,9 @@ let historyVisible = $state(false);
 let hasGeo = $state(false);
 let isStac = $state(false);
 // Restore view mode from URL hash if present
-const urlView = getUrlView();
-let viewMode = $state<'table' | 'map' | 'stac' | 'info'>(
-	urlView === 'map' ? 'map' : urlView === 'stac' ? 'stac' : urlView === 'info' ? 'info' : 'table'
+type TableViewMode = 'table' | 'map' | 'stac' | 'info';
+let viewMode = $state<TableViewMode>(
+	pickViewMode<TableViewMode>(['table', 'map', 'stac', 'info'], 'table')
 );
 let sqlQuery = $state('');
 let customSql = $state('');
@@ -158,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[] = [];
@@ -237,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');
@@ -494,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
@@ -712,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 = '';
 	}
@@ -755,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;
 	}
 }
@@ -801,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,
@@ -908,7 +925,7 @@ function setStacView() {
 		{pageSize}
 		{historyVisible}
 		{hasGeo}
-		{isStac}
+		isStac={isStac && !nested}
 		{viewMode}
 		onPrevPage={prevPage}
 		onNextPage={nextPage}
@@ -916,13 +933,13 @@ function setStacView() {
 		onToggleInfo={toggleInfo}
 		onToggleHistory={toggleHistory}
 		onToggleView={toggleView}
-		onToggleStac={setStacView}
+		onToggleStac={nested ? undefined : setStacView}
 		onPageSizeChange={handlePageSizeChange}
 	/>
 
 	{#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
@@ -942,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')}
@@ -955,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}
@@ -977,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/TableViewer.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Tab } from '../../types';
 type $$ComponentProps = {
     tab: Tab;
+    nested?: boolean;
 };
 declare const TableViewer: import("svelte").Component<$$ComponentProps, {}, "">;
 type TableViewer = ReturnType<typeof TableViewer>;