@walkthru-earth/objex 1.2.0 → 1.3.0

package/dist/components/viewers/StacTabViewer.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+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 { 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 { Badge } from '../ui/badge/index.js';
+import { Button } from '../ui/button/index.js';
+import * as Tooltip from '../ui/tooltip/index.js';
+import CodeViewer from './CodeViewer.svelte';
+import StacMapViewer from './StacMapViewer.svelte';
+import TableViewer from './TableViewer.svelte';
+
+type MapKind = 'mosaic' | 'multicog' | null;
+
+interface Props {
+	tab: Tab;
+	/** Which map viewer to mount when the user switches to `#map`. */
+	mapKind: MapKind;
+	/** Pre-classified STAC payload, forwarded to map viewers to skip re-parsing. */
+	classified?: StacRoutableKind;
+}
+
+let { tab, mapKind, classified }: Props = $props();
+
+type ViewMode = 'map' | 'stac-map' | 'stac-browser' | 'code';
+
+interface CodeActions {
+	toggleFormat: () => Promise<void>;
+	copyCode: () => Promise<void>;
+	canFormat: boolean;
+	formatted: boolean;
+	copied: boolean;
+}
+
+// Cross-origin STAC iframes (Radiant Earth stac-browser, DevSeed stac-map)
+// crawl sibling items with their own fetch client and have no access to our
+// presigned URLs. On signed-s3 connections the top manifest still renders but
+// every child link 403s — keep the buttons available and surface a warning
+// tooltip so the user can still preview the root document and knows why
+// crawling children fails.
+const iframeCrawlReachable = $derived.by(() => {
+	if (tab.source === 'url') return true;
+	if (!tab.connectionId) return true;
+	const conn = connectionStore.getById(tab.connectionId);
+	if (!conn) return true;
+	return canStreamDirectly(tab);
+});
+
+const isParquet = $derived.by(() => {
+	const ext = (tab.extension ?? '').toLowerCase();
+	return ext === 'parquet' || ext === 'geoparquet';
+});
+
+const formatBadge = $derived(isParquet ? 'Parquet' : 'JSON');
+
+const stacBadgeKey = $derived.by(() => {
+	if (isParquet) return 'code.stacGeoparquet';
+	const kind = classified?.kind;
+	if (kind === 'item') return 'code.stacItem';
+	if (kind === 'item-collection') return 'code.stacItem';
+	if (kind === 'collection') return 'code.stacCollection';
+	if (kind === 'catalog') return 'code.stacCatalog';
+	return null;
+});
+
+function initialView(): ViewMode {
+	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';
+}
+
+let viewMode = $state<ViewMode>(initialView());
+let wordWrap = $state(false);
+let codeActions = $state<CodeActions | null>(null);
+
+function setView(next: ViewMode) {
+	if (viewMode === next) return;
+	viewMode = next;
+	updateUrlView(next === 'map' ? 'map' : next);
+}
+</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"
+		>
+			<span
+				class="max-w-[120px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
+			>
+				{tab.name}
+			</span>
+			<Badge variant="secondary">{formatBadge}</Badge>
+			{#if stacBadgeKey}
+				<Badge
+					variant="outline"
+					class="hidden border-emerald-200 text-emerald-600 sm:inline-flex dark:border-emerald-800 dark:text-emerald-300"
+				>
+					{t(stacBadgeKey)}
+				</Badge>
+			{/if}
+
+			<div class="ms-auto flex items-center gap-1 sm:gap-2">
+				{#if mapKind}
+					<Button
+						size="sm"
+						variant={viewMode === 'map' ? 'default' : 'ghost'}
+						class="h-7 gap-1 px-2"
+						onclick={() => setView('map')}
+					>
+						<MapIcon class="size-3.5" />
+						{mapKind === 'multicog' ? t('stac.viewMultiCog') : t('stac.viewMosaic')}
+					</Button>
+				{/if}
+				{#if iframeCrawlReachable}
+					<Button
+						size="sm"
+						variant={viewMode === 'stac-map' ? 'default' : 'ghost'}
+						class="h-7 gap-1 px-2"
+						onclick={() => setView('stac-map')}
+					>
+						<LayersIcon class="size-3.5" />
+						{t('stac.viewStacMap')}
+					</Button>
+					{#if isParquet}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Button
+									size="sm"
+									variant="ghost"
+									class="h-7 gap-1 px-2 opacity-50"
+									disabled
+								>
+									<GlobeIcon class="size-3.5" />
+									{t('stac.viewBrowser')}
+								</Button>
+							</Tooltip.Trigger>
+							<Tooltip.Content>{t('stac.stacBrowserJsonOnly')}</Tooltip.Content>
+						</Tooltip.Root>
+					{:else}
+						<Button
+							size="sm"
+							variant={viewMode === 'stac-browser' ? 'default' : 'ghost'}
+							class="h-7 gap-1 px-2"
+							onclick={() => setView('stac-browser')}
+						>
+							<GlobeIcon class="size-3.5" />
+							{t('stac.viewBrowser')}
+						</Button>
+					{/if}
+				{:else}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Button
+								size="sm"
+								variant={viewMode === 'stac-map' ? 'default' : 'ghost'}
+								class="h-7 gap-1 px-2"
+								onclick={() => setView('stac-map')}
+							>
+								<LayersIcon class="size-3.5" />
+								{t('stac.viewStacMap')}
+							</Button>
+						</Tooltip.Trigger>
+						<Tooltip.Content>{t('stac.iframePrivateBucketWarning')}</Tooltip.Content>
+					</Tooltip.Root>
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Button
+								size="sm"
+								variant={viewMode === 'stac-browser' ? 'default' : 'ghost'}
+								class="h-7 gap-1 px-2"
+								onclick={() => setView('stac-browser')}
+							>
+								<GlobeIcon class="size-3.5" />
+								{t('stac.viewBrowser')}
+							</Button>
+						</Tooltip.Trigger>
+						<Tooltip.Content>{t('stac.iframePrivateBucketWarning')}</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+				<Button
+					size="sm"
+					variant={viewMode === 'code' ? 'default' : 'ghost'}
+					class="h-7 gap-1 px-2"
+					onclick={() => setView('code')}
+				>
+					<CodeIcon class="size-3.5" />
+					{isParquet ? t('stac.viewTable') : t('stac.viewJson')}
+				</Button>
+
+				{#if viewMode === 'code' && !isParquet && codeActions}
+					{#if codeActions.canFormat}
+						<Button
+							variant="ghost"
+							size="sm"
+							class="h-7 px-2 text-xs"
+							onclick={() => codeActions?.toggleFormat()}
+						>
+							{codeActions.formatted ? t('code.raw') : t('code.format')}
+						</Button>
+					{/if}
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-7 px-2 text-xs"
+						onclick={() => (wordWrap = !wordWrap)}
+					>
+						{wordWrap ? t('code.noWrap') : t('code.wrap')}
+					</Button>
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-7 px-2 text-xs"
+						onclick={() => codeActions?.copyCode()}
+					>
+						{codeActions.copied ? t('code.copied') : t('code.copy')}
+					</Button>
+				{/if}
+			</div>
+		</div>
+
+		<div class="relative flex-1 overflow-hidden">
+			{#if viewMode === 'map' && mapKind === 'mosaic'}
+				{#await import('./StacMosaicViewer.svelte') then { default: StacMosaicViewer }}
+					<StacMosaicViewer {tab} {classified} />
+				{/await}
+			{:else if viewMode === 'map' && mapKind === 'multicog'}
+				{#await import('./MultiCogViewer.svelte') then { default: MultiCogViewer }}
+					<MultiCogViewer {tab} {classified} />
+				{/await}
+			{:else if viewMode === 'stac-map'}
+				<StacMapViewer {tab} variant="stac-map" />
+			{:else if viewMode === 'stac-browser'}
+				<StacMapViewer {tab} variant="stac-browser" />
+			{:else if isParquet}
+				<TableViewer {tab} />
+			{:else}
+				<CodeViewer {tab} nested bind:wordWrap bind:actions={codeActions} />
+			{/if}
+		</div>
+	{/key}
+</div>
+</Tooltip.Provider>

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

@@ -0,0 +1,13 @@
+import type { Tab } from '../../types.js';
+import type { StacRoutableKind } from '../../utils/stac.js';
+type MapKind = 'mosaic' | 'multicog' | null;
+interface Props {
+    tab: Tab;
+    /** Which map viewer to mount when the user switches to `#map`. */
+    mapKind: MapKind;
+    /** Pre-classified STAC payload, forwarded to map viewers to skip re-parsing. */
+    classified?: StacRoutableKind;
+}
+declare const StacTabViewer: import("svelte").Component<Props, {}, "">;
+type StacTabViewer = ReturnType<typeof StacTabViewer>;
+export default StacTabViewer;

package/dist/components/viewers/TableViewer.svelte

@@ -11,7 +11,8 @@ import {
 	QueryCancelledError,
 	type QueryHandle,
 	type ResolvedTableSource,
-	resolveTableSource
+	resolveTableSource,
+	resolveTableSourceAsync
 } from '../../query/index.js';
 import { queryHistory } from '../../stores/query-history.svelte.js';
 import { settings } from '../../stores/settings.svelte.js';
@@ -61,6 +62,8 @@ let viewMode = $state<'table' | 'map' | 'stac' | 'info'>(
 );
 let sqlQuery = $state('');
 let customSql = $state('');
+// Presigned URL for the source-cooperative parquet-table iframe (external fetcher).
+let parquetIframeUrl = $state('');
 let queryRunning = $state(false);
 let executionTimeMs = $state(0);
 
@@ -98,8 +101,12 @@ const columnTypes = $derived(Object.fromEntries(schema.map((f) => [f.name, f.typ
 // Columns for display — exclude internal __wkb helper
 const displayColumns = $derived(columns.filter((c) => c !== '__wkb'));
 
-function buildDefaultSql(offset = 0): string {
-	const resolved = resolveTableSource(tab);
+let resolvedSource: ResolvedTableSource | null = null;
+
+function buildDefaultSql(
+	offset = 0,
+	resolved: ResolvedTableSource = resolvedSource ?? resolveTableSource(tab)
+): string {
 	const source = resolved.ref;
 
 	let sql: string;
@@ -204,6 +211,8 @@ $effect(() => {
 		geoCol = null;
 		knownGeomType = undefined;
 		metadataBounds = null;
+		resolvedSource = null;
+		parquetIframeUrl = '';
 		error = null;
 	});
 	return unregister;
@@ -268,6 +277,10 @@ async function forceCancel() {
 
 async function loadTable() {
 	const thisGen = ++loadGeneration;
+	// Snapshot reactive values once. Reading `$derived` across awaits after the
+	// component's effect is torn down returns Svelte's destroyed-signal sentinel,
+	// which throws "can't convert symbol to string" in downstream template literals.
+	const cid = connId;
 
 	// Cancel in-flight query from a previous load to prevent duplicate concurrent queries
 	if (activeHandle) {
@@ -287,13 +300,19 @@ async function loadTable() {
 	loadStage = t('table.preparingQuery');
 	loadProgress = [];
 
-	// Set SQL eagerly so editor shows the query while loading
-	const initialSql = buildDefaultSql(0);
-	sqlQuery = initialSql;
-	customSql = initialSql;
+	resolvedSource = null;
+	const eagerSql = buildDefaultSql(0);
+	sqlQuery = eagerSql;
+	customSql = eagerSql;
 
 	try {
-		const resolved: ResolvedTableSource = resolveTableSource(tab);
+		const resolved: ResolvedTableSource = await resolveTableSourceAsync(tab);
+		if (thisGen !== loadGeneration) return;
+		resolvedSource = resolved;
+		const resolvedSql = buildDefaultSql(0, resolved);
+		sqlQuery = resolvedSql;
+		// Only overwrite the editor if the user hasn't edited it during the presign await.
+		if (customSql === eagerSql) customSql = resolvedSql;
 		const isFileSource = resolved.isFileSource;
 		const fileUrl = resolved.fileUrl ?? '';
 		const httpsUrl = isFileSource ? buildHttpsUrl(tab) : '';
@@ -301,6 +320,11 @@ async function loadTable() {
 		const isParquet = isFileSource && /\.parquet$/i.test(tab.path);
 		const streamable = isFileSource && canStreamDirectly(tab);
 
+		// Parquet-table iframe fetches from its own origin. `resolved.fileUrl`
+		// is already the presigned HTTPS URL for signed-s3 (or the public URL
+		// for anonymous / SAS), so reuse it instead of signing a second time.
+		if (isParquet) parquetIframeUrl = fileUrl;
+
 		// Start DuckDB boot immediately (runs in parallel with hyparquet)
 		loadStage = t('table.initEngine');
 		const enginePromise = getQueryEngine();
@@ -448,7 +472,7 @@ async function loadTable() {
 		// Disable conversion for this connection and fall back to BLOB handling.
 		if (metaFromHyparquet && isLegacyGeoParquet && geoCol) {
 			try {
-				await engine.query(connId, 'SET enable_geoparquet_conversion = false');
+				await engine.query(cid, 'SET enable_geoparquet_conversion = false');
 				geoColType = 'BLOB';
 			} catch {
 				// Setting failed — DuckDB may still handle it gracefully
@@ -460,7 +484,7 @@ async function loadTable() {
 		// reads GeoParquet as GEOMETRY('EPSG:...') with CRS embedded in the type.
 		if (metaFromHyparquet && geoCol && !isLegacyGeoParquet) {
 			try {
-				const duckSchema = await engine.getSchema(connId, resolved);
+				const duckSchema = await engine.getSchema(cid, resolved);
 				if (thisGen !== loadGeneration) return;
 				const duckGeoField = duckSchema.find((f: { name: string }) => f.name === geoCol);
 				if (duckGeoField) {
@@ -490,7 +514,7 @@ async function loadTable() {
 		// (native Parquet GEOMETRY without "geo" KV metadata), use DuckDB
 		if (metaFromHyparquet && needsDuckDbCrs && geoCol) {
 			try {
-				sourceCrs = await engine.detectCrs(connId, resolved, geoCol);
+				sourceCrs = await engine.detectCrs(cid, resolved, geoCol);
 				if (thisGen !== loadGeneration) return;
 				if (sourceCrs) {
 					loadProgress = [...loadProgress, { label: t('progress.crs'), value: sourceCrs }];
@@ -520,7 +544,7 @@ async function loadTable() {
 			];
 
 			if (engine.getSchemaAndCrs) {
-				const result = await engine.getSchemaAndCrs(connId, resolved, findGeoColumn);
+				const result = await engine.getSchemaAndCrs(cid, resolved, findGeoColumn);
 				if (thisGen !== loadGeneration) return;
 				schema = result.schema;
 				columns = schema.map((f) => f.name);
@@ -547,7 +571,7 @@ async function loadTable() {
 					}
 				}
 			} else {
-				schema = await engine.getSchema(connId, resolved);
+				schema = await engine.getSchema(cid, resolved);
 				if (thisGen !== loadGeneration) return;
 				columns = schema.map((f) => f.name);
 				const colPreview =
@@ -568,7 +592,7 @@ async function loadTable() {
 						...loadProgress,
 						{ label: t('progress.geometry'), value: `${detectedGeoCol} (${geoColType})` }
 					];
-					sourceCrs = await engine.detectCrs(connId, resolved, detectedGeoCol);
+					sourceCrs = await engine.detectCrs(cid, resolved, detectedGeoCol);
 					if (thisGen !== loadGeneration) return;
 					if (sourceCrs) {
 						loadProgress = [...loadProgress, { label: t('progress.crs'), value: sourceCrs }];
@@ -599,7 +623,7 @@ async function loadTable() {
 		// Retry with enable_geoparquet_conversion=false and BLOB handling.
 		if (!result && error && isParquet && geoCol && !isLegacyGeoParquet) {
 			try {
-				await engine.query(connId, 'SET enable_geoparquet_conversion = false');
+				await engine.query(cid, 'SET enable_geoparquet_conversion = false');
 				geoColType = 'BLOB';
 				sqlQuery = buildDefaultSql(0);
 				customSql = sqlQuery;
@@ -673,7 +697,7 @@ async function loadTable() {
 			} else {
 				loadStage = t('table.countingRows');
 				engine
-					.getRowCount(connId, resolved)
+					.getRowCount(cid, resolved)
 					.then((count) => {
 						if (thisGen === loadGeneration) {
 							totalRows = count;
@@ -695,11 +719,14 @@ async function loadTable() {
 }
 
 async function executeQuery(sql: string) {
+	// Snapshot `connId` — reading the $derived after the effect is destroyed
+	// returns a Symbol sentinel and crashes downstream template literals.
+	const cid = connId;
 	try {
 		const engine = await getQueryEngine();
 
 		if (engine.queryCancellable) {
-			const handle = engine.queryCancellable(connId, sql);
+			const handle = engine.queryCancellable(cid, sql);
 			activeHandle = handle;
 			try {
 				const result = await handle.result;
@@ -716,7 +743,7 @@ async function executeQuery(sql: string) {
 			}
 		}
 
-		const result = await engine.query(connId, sql);
+		const result = await engine.query(cid, sql);
 		columns = result.columns;
 		rows = result.rows;
 		return result;
@@ -746,6 +773,8 @@ async function loadPage(page: number) {
 }
 
 async function runCustomSql() {
+	// Snapshot before any await — see note in executeQuery.
+	const cid = connId;
 	queryRunning = true;
 	error = null;
 	isCustomQuery = true;
@@ -768,7 +797,7 @@ async function runCustomSql() {
 			timestamp: Date.now(),
 			durationMs: executionTimeMs,
 			rowCount: rows.length,
-			connectionId: connId || undefined
+			connectionId: cid || undefined
 		});
 	} catch (err) {
 		executionTimeMs = Math.round(performance.now() - start);
@@ -780,7 +809,7 @@ async function runCustomSql() {
 			durationMs: executionTimeMs,
 			rowCount: 0,
 			error: error ?? undefined,
-			connectionId: connId || undefined
+			connectionId: cid || undefined
 		});
 	} finally {
 		queryRunning = false;
@@ -984,7 +1013,7 @@ function setStacView() {
 			<FileInfo
 				entries={loadProgress}
 				{schema}
-				parquetUrl={/\.parquet$/i.test(tab.path) ? buildHttpsUrl(tab) : ''}
+				parquetUrl={/\.parquet$/i.test(tab.path) ? parquetIframeUrl : ''}
 			/>
 		</div>
 	{:else if viewMode === 'stac'}

package/dist/components/viewers/ViewerRouter.svelte

@@ -1,19 +1,170 @@
 <script lang="ts">
 import { getViewerKind } from '../../file-icons/index.js';
-import type { Tab } from '../../types';
+import { getAdapter } from '../../storage/index.js';
+import type { Tab } from '../../types.js';
+import { readParquetMetadata } from '../../utils/parquet-metadata.js';
+import {
+	classifyStac,
+	detectMosaicCapable,
+	detectMultiCogCapable,
+	type StacRoutableKind
+} from '../../utils/stac.js';
+import { isStacGeoparquetSchema } from '../../utils/stac-geoparquet.js';
+import { STAC_API_PATH_RE } from '../../utils/storage-url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 import CodeViewer from './CodeViewer.svelte';
 import ImageViewer from './ImageViewer.svelte';
 import MediaViewer from './MediaViewer.svelte';
 import RawViewer from './RawViewer.svelte';
+import StacTabViewer from './StacTabViewer.svelte';
 import TableViewer from './TableViewer.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
 const ext = $derived(tab?.extension ?? '');
 const viewerKind = $derived(getViewerKind(ext));
+
+type StacRoute =
+	| { kind: 'pending' }
+	| { kind: 'none' }
+	| { kind: 'stac'; mapKind: 'mosaic' | 'multicog' | null; classified: StacRoutableKind };
+const MAX_STAC_PEEK = 256 * 1024;
+
+let stacRoute = $state<StacRoute>({ kind: 'none' });
+let stacSignalCtrl: AbortController | null = null;
+
+$effect(() => {
+	// Track the full tab identity so auto-migration (eager `url` tab → remote
+	// tab with a real connectionId) re-runs classification with the now-valid
+	// adapter. Without these reads the effect only depends on `ext`, and a
+	// stale 403 would leave the file stuck on the non-STAC CodeViewer path.
+	const tabId = tab.id;
+	const tabPath = tab.path;
+	const tabSource = tab.source;
+	const tabConn = tab.connectionId;
+	void tabId;
+	void tabPath;
+	void tabSource;
+	void tabConn;
+
+	const currentExt = ext.toLowerCase().replace(/^\./, '');
+	const isJsonExt = currentExt === 'json' || currentExt === 'geojson';
+	// STAC API endpoints return `application/geo+json` at extensionless paths
+	// like `/v1/collections/.../items/S2B_18TVK_20240928_0_L2A`, so we still
+	// peek when the basename has no dot.
+	const isExtensionless = !currentExt;
+	const viewerEligible = viewerKind === 'code' || viewerKind === 'raw';
+	let isStacPath = false;
+	if (isExtensionless) {
+		try {
+			isStacPath = STAC_API_PATH_RE.test(new URL(tab.path).pathname);
+		} catch {
+			isStacPath = false;
+		}
+	}
+	const isParquetExt = currentExt === 'parquet' || currentExt === 'geoparquet';
+	const shouldPeek = viewerEligible && (isJsonExt || (isExtensionless && isStacPath));
+	stacSignalCtrl?.abort();
+	if (!shouldPeek && !isParquetExt) {
+		stacRoute = { kind: 'none' };
+		return;
+	}
+	stacRoute = { kind: 'pending' };
+	const ctrl = new AbortController();
+	stacSignalCtrl = ctrl;
+	const detector = isParquetExt
+		? detectStacGeoparquet(tab, ctrl.signal)
+		: detectStac(tab, ctrl.signal);
+	void detector.then((result) => {
+		if (ctrl.signal.aborted) return;
+		stacRoute = result;
+	});
+	return () => ctrl.abort();
+});
+
+async function detectStacGeoparquet(current: Tab, signal: AbortSignal): Promise<StacRoute> {
+	try {
+		const url = await buildHttpsUrlAsync(current);
+		if (signal.aborted) return { kind: 'none' };
+		const meta = await readParquetMetadata(url);
+		if (signal.aborted) return { kind: 'none' };
+		// Use top-level column names so struct parents (`assets`, `bbox`) are
+		// visible. `meta.schema` flattens structs away, which hides the very
+		// columns stac-geoparquet detection keys on.
+		const topLevel = meta.topLevelColumns.map((name) => ({ name }));
+		if (!isStacGeoparquetSchema(topLevel)) return { kind: 'none' };
+		return {
+			kind: 'stac',
+			mapKind: 'mosaic',
+			classified: { kind: 'item-collection', fc: { type: 'FeatureCollection', features: [] } }
+		};
+	} catch {
+		return { kind: 'none' };
+	}
+}
+
+async function detectStac(current: Tab, signal: AbortSignal): Promise<StacRoute> {
+	const adapter = getAdapter(current.source, current.connectionId);
+	const decoder = new TextDecoder('utf-8', { fatal: false });
+
+	// Peek the first 256 KB first; a small catalog/collection parses outright.
+	// STAC Items with detailed asset metadata + dense footprint coordinates
+	// frequently blow past that, so on a parse failure we fall back to the
+	// full file. Network errors (403, CORS) short-circuit to `none`.
+	// `classifyStac` already returns `{ kind: 'none' }` for any JSON that
+	// isn't a STAC Item/Collection/Catalog/ItemCollection — propagate that
+	// so plain JSON files don't route through StacTabViewer (which exposes
+	// the stac-map / STAC Browser buttons).
+	try {
+		const peek = await adapter.read(current.path, 0, MAX_STAC_PEEK, signal);
+		if (signal.aborted) return { kind: 'none' };
+		try {
+			const parsed = JSON.parse(decoder.decode(peek));
+			const classified = classifyStac(parsed);
+			if (classified.kind === 'none') return { kind: 'none' };
+			return { kind: 'stac', mapKind: pickMapKind(classified), classified };
+		} catch {
+			if (peek.byteLength < MAX_STAC_PEEK) return { kind: 'none' };
+		}
+	} catch {
+		return { kind: 'none' };
+	}
+
+	try {
+		const full = await adapter.read(current.path, undefined, undefined, signal);
+		if (signal.aborted) return { kind: 'none' };
+		const parsed = JSON.parse(decoder.decode(full));
+		const classified = classifyStac(parsed);
+		if (classified.kind === 'none') return { kind: 'none' };
+		return { kind: 'stac', mapKind: pickMapKind(classified), classified };
+	} catch {
+		return { kind: 'none' };
+	}
+}
+
+function pickMapKind(classified: StacRoutableKind): 'mosaic' | 'multicog' | null {
+	switch (classified.kind) {
+		case 'item':
+			if (detectMultiCogCapable(classified.item)) return 'multicog';
+			if (detectMosaicCapable(classified.item)) return 'mosaic';
+			return null;
+		case 'item-collection': {
+			const first = classified.fc.features[0];
+			if (first && detectMultiCogCapable(first)) return 'multicog';
+			return 'mosaic';
+		}
+		case 'collection':
+		case 'catalog':
+			return 'mosaic';
+		case 'none':
+			return null;
+	}
+}
 </script>
 
-{#if viewerKind === 'table'}
+{#if stacRoute.kind === 'stac' && viewerKind === 'table'}
+	<StacTabViewer {tab} mapKind={stacRoute.mapKind} classified={stacRoute.classified} />
+{:else if viewerKind === 'table'}
 	<TableViewer {tab} />
 {:else if viewerKind === 'image'}
 	<ImageViewer {tab} />
@@ -23,6 +174,8 @@ const viewerKind = $derived(getViewerKind(ext));
 	{#await import('./MarkdownViewer.svelte') then { default: MarkdownViewer }}
 		<MarkdownViewer {tab} />
 	{/await}
+{:else if stacRoute.kind === 'stac' && (viewerKind === 'code' || viewerKind === 'raw')}
+	<StacTabViewer {tab} mapKind={stacRoute.mapKind} classified={stacRoute.classified} />
 {:else if viewerKind === 'code'}
 	<CodeViewer {tab} />
 {:else if viewerKind === 'cog'}

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

@@ -1,4 +1,4 @@
-import type { Tab } from '../../types';
+import type { Tab } from '../../types.js';
 type $$ComponentProps = {
     tab: Tab;
 };