@walkthru-earth/objex 0.1.0

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

@@ -0,0 +1,7 @@
+import type { Tab } from '../../types';
+type $$ComponentProps = {
+    tab: Tab;
+};
+declare const FlatGeobufViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlatGeobufViewer = ReturnType<typeof FlatGeobufViewer>;
+export default FlatGeobufViewer;

package/dist/components/viewers/GeoParquetMapViewer.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+import LocateIcon from '@lucide/svelte/icons/locate';
+import type maplibregl from 'maplibre-gl';
+import { onDestroy } from 'svelte';
+import { t } from '../../i18n/index.svelte.js';
+import type { MapQueryResult, SchemaField } from '../../query/engine';
+import { settings } from '../../stores/settings.svelte.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
+import type { Tab } from '../../types';
+import {
+	buildSelectionLayer,
+	createGeoArrowLayers,
+	createGeoArrowOverlay,
+	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';
+
+let {
+	tab,
+	schema,
+	mapData = null,
+	sourceCrs = null,
+	knownGeomType = undefined,
+	metadataBounds = null,
+	isCustomQuery = false,
+	progressEntries = []
+}: {
+	tab: Tab;
+	schema: SchemaField[];
+	mapData?: MapQueryResult | null;
+	sourceCrs?: string | null;
+	knownGeomType?: GeoArrowGeomType;
+	metadataBounds?: [number, number, number, number] | null;
+	isCustomQuery?: boolean;
+	progressEntries?: ProgressEntry[];
+} = $props();
+
+let loading = $state(true);
+let error = $state<string | null>(null);
+let featureCount = $state(0);
+let selectedFeature = $state<Record<string, any> | null>(null);
+let showAttributes = $state(false);
+let bounds = $state<[number, number, number, number] | undefined>();
+
+let firstFeatureCoord = $state<[number, number] | null>(null);
+
+let loadGen = 0;
+
+let geoArrowState: {
+	modules: Record<string, any>;
+	geoArrowResults: GeoArrowResult[];
+} | null = null;
+let overlayRef: any = null;
+let dataLayersRef: any[] = [];
+let mapRef: maplibregl.Map | null = null;
+let wkbArraysRef: Uint8Array[] = [];
+
+/** Drill into nested coordinate arrays to find the first [lng, lat] pair. */
+function extractFirstCoord(coords: any): [number, number] | null {
+	if (!Array.isArray(coords) || coords.length === 0) return null;
+	if (typeof coords[0] === 'number') return [coords[0] as number, coords[1] as number];
+	return extractFirstCoord(coords[0]);
+}
+
+function flyToFirstFeature() {
+	if (!mapRef || !firstFeatureCoord) return;
+	mapRef.flyTo({ center: firstFeatureCoord, zoom: 14 });
+}
+
+// mapData is read synchronously in loadGeoData (before any await),
+// so Svelte 5 tracks it as a dependency. The effect re-fires when
+// mapData changes — on initial load, pagination, sort, page size change.
+$effect(() => {
+	if (!tab || schema.length === 0) return;
+	loadGeoData();
+});
+
+function cleanup() {
+	if (overlayRef && mapRef) {
+		try {
+			mapRef.removeControl(overlayRef);
+		} catch {
+			/* already removed */
+		}
+	}
+	overlayRef = null;
+	mapRef = null;
+	geoArrowState = null;
+	wkbArraysRef = [];
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+onDestroy(cleanup);
+
+async function loadGeoData() {
+	const gen = ++loadGen;
+	error = null;
+
+	// Always use preloaded map data from TableViewer's unified query.
+	// No independent fetch — avoids duplicate DuckDB queries.
+	// The $effect re-fires when mapData changes (tracked read below).
+	if (!mapData || mapData.rowCount === 0) {
+		loading = true;
+		return; // Wait — effect will re-fire when mapData arrives
+	}
+
+	try {
+		const result = mapData;
+
+		const modules = await loadGeoArrowModules();
+		if (gen !== loadGen) return;
+
+		// Keep WKB ref for selection highlight (no copy — same typed arrays)
+		wkbArraysRef = result.wkbArrays;
+
+		// Convert WKB → GeoArrow Arrow Tables (zero-copy direct binary read)
+		// Skip knownGeomType for custom queries — the user's SQL may return
+		// different geometry types or join different tables.
+		const effectiveGeomType = isCustomQuery ? undefined : knownGeomType;
+		const geoArrowResults = buildGeoArrowTables(
+			result.wkbArrays,
+			result.attributes,
+			effectiveGeomType
+		);
+
+		if (geoArrowResults.length === 0) {
+			console.warn('[GeoMap] Empty geoArrow results:', {
+				wkbCount: result.wkbArrays.length,
+				effectiveGeomType,
+				gen
+			});
+			error = t('map.noData');
+			loading = false;
+			return;
+		}
+
+		geoArrowState = { modules, geoArrowResults };
+		featureCount = geoArrowResults.reduce((sum, r) => sum + r.table.numRows, 0);
+		// Use metadata bounds if available (no client-side computation needed)
+		bounds = metadataBounds ?? geoArrowResults[0].bounds;
+
+		// Extract first feature coordinate for fly-to
+		if (result.wkbArrays.length > 0) {
+			const parsed = parseWKB(result.wkbArrays[0]);
+			if (parsed) firstFeatureCoord = extractFirstCoord(parsed.coordinates);
+		}
+
+		// If map is already alive, update overlay in-place (no remount)
+		if (overlayRef && mapRef) {
+			const newLayers = createGeoArrowLayers(modules, {
+				layerId: 'geoarrow-data',
+				geoArrowResults,
+				onHover: hoverCursor(mapRef),
+				onClick: handleFeatureClick
+			});
+			dataLayersRef = newLayers;
+			overlayRef.setProps({ layers: newLayers });
+		}
+
+		loading = false;
+	} catch (err) {
+		if (gen !== loadGen) return;
+		error = err instanceof Error ? err.message : String(err);
+		loading = false;
+	}
+}
+
+function handleFeatureClick(props: Record<string, any>, sourceIndex: number) {
+	selectedFeature = props;
+	showAttributes = true;
+	// Reconstruct GeoJSON Feature from WKB for selection highlight
+	if (!geoArrowState || !overlayRef) return;
+	const GeoJsonLayer = geoArrowState.modules.GeoJsonLayer;
+	const wkb = wkbArraysRef[sourceIndex];
+	if (wkb) {
+		const geom = parseWKB(wkb);
+		if (geom) {
+			const selLayer = buildSelectionLayer(GeoJsonLayer, {
+				type: 'Feature',
+				geometry: geom as GeoJSON.Geometry,
+				properties: {}
+			});
+			if (selLayer) {
+				overlayRef.setProps({ layers: [...dataLayersRef, selLayer] });
+			}
+		}
+	}
+}
+
+function onMapReady(map: maplibregl.Map) {
+	if (!geoArrowState) return;
+	mapRef = map;
+
+	const { modules, geoArrowResults } = geoArrowState;
+
+	const { overlay, layers: dataLayers } = createGeoArrowOverlay(modules, {
+		layerId: 'geoarrow-data',
+		geoArrowResults,
+		onHover: hoverCursor(map),
+		onClick: handleFeatureClick
+	});
+
+	dataLayersRef = dataLayers;
+	overlayRef = overlay;
+
+	map.addControl(overlay as any);
+}
+</script>
+
+<div class="relative flex h-full overflow-hidden">
+	{#if loading}
+		<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>
+		</div>
+	{:else}
+		<div class="flex-1">
+			<MapContainer {onMapReady} {bounds} />
+		</div>
+
+		<!-- Floating feature count badge + fly-to -->
+		{#if featureCount > 0}
+			<div
+				class="absolute left-2 top-2 z-10 flex items-center gap-1"
+			>
+				<div
+					class="pointer-events-none rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm"
+				>
+					{featureCount.toLocaleString()} features{#if !isCustomQuery && featureCount >= settings.featureLimit}
+						<span class="text-amber-300">(limit)</span>{/if}
+				</div>
+				{#if firstFeatureCoord}
+					<button
+						class="rounded bg-card/80 p-1.5 text-card-foreground backdrop-blur-sm hover:bg-card"
+						onclick={flyToFirstFeature}
+						title={t('map.flyToFirst')}
+					>
+						<LocateIcon class="size-3.5" />
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Floating button group -->
+		{#if selectedFeature}
+			<div class="absolute right-2 top-2 z-10 flex gap-1">
+				<button
+					class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm hover:bg-card"
+					class:ring-1={showAttributes}
+					class:ring-primary={showAttributes}
+					onclick={() => (showAttributes = !showAttributes)}
+				>
+					{t('map.attributes')}
+				</button>
+			</div>
+		{/if}
+
+		<AttributeTable
+			feature={selectedFeature}
+			visible={showAttributes}
+			onClose={() => (showAttributes = false)}
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+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;
+    schema: SchemaField[];
+    mapData?: MapQueryResult | null;
+    sourceCrs?: string | null;
+    knownGeomType?: GeoArrowGeomType;
+    metadataBounds?: [number, number, number, number] | null;
+    isCustomQuery?: boolean;
+    progressEntries?: ProgressEntry[];
+};
+declare const GeoParquetMapViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type GeoParquetMapViewer = ReturnType<typeof GeoParquetMapViewer>;
+export default GeoParquetMapViewer;

package/dist/components/viewers/ImageViewer.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+import MaximizeIcon from '@lucide/svelte/icons/maximize';
+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 { onDestroy } from 'svelte';
+import { Badge } from '../ui/badge/index.js';
+import { Button } from '../ui/button/index.js';
+import * as DropdownMenu from '../ui/dropdown-menu/index.js';
+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 { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
+
+const mimeMap: Record<string, string> = {
+	png: 'image/png',
+	jpg: 'image/jpeg',
+	jpeg: 'image/jpeg',
+	gif: 'image/gif',
+	webp: 'image/webp',
+	avif: 'image/avif',
+	svg: 'image/svg+xml',
+	bmp: 'image/bmp',
+	ico: 'image/x-icon'
+};
+
+let { tab }: { tab: Tab } = $props();
+
+let abortController: AbortController | null = null;
+let imgSrc = $state<string | null>(null);
+let blobUrl = $state<string | null>(null);
+let loading = $state(true);
+let error = $state<string | null>(null);
+let scale = $state(1);
+let rotation = $state(0);
+let panX = $state(0);
+let panY = $state(0);
+let dragging = $state(false);
+let lastX = 0;
+let lastY = 0;
+let wrapperEl: HTMLDivElement | undefined = $state();
+
+$effect(() => {
+	if (!tab) return;
+	loadImage();
+});
+
+async function loadImage() {
+	loading = true;
+	error = null;
+	cleanup();
+	abortController = new AbortController();
+	const { signal } = abortController;
+	resetView();
+
+	try {
+		if (canStreamDirectly(tab)) {
+			// Direct URL — browser streams natively (no CORS needed for <img>)
+			imgSrc = buildHttpsUrl(tab);
+		} else {
+			// Authenticated S3 — download via storage adapter
+			const adapter = getAdapter(tab.source, tab.connectionId);
+			const data = await adapter.read(tab.path, undefined, undefined, signal);
+			const ext = tab.extension.toLowerCase();
+			const blob = new Blob([data as unknown as BlobPart], {
+				type: mimeMap[ext] || 'application/octet-stream'
+			});
+			blobUrl = URL.createObjectURL(blob);
+			imgSrc = blobUrl;
+		}
+	} catch (err) {
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+function resetView() {
+	scale = 1;
+	rotation = 0;
+	panX = 0;
+	panY = 0;
+}
+
+function zoomIn() {
+	scale = Math.min(scale * 1.4, 20);
+}
+
+function zoomOut() {
+	scale = Math.max(scale / 1.4, 0.1);
+}
+
+function fitView() {
+	resetView();
+}
+
+function rotate() {
+	rotation = (rotation + 90) % 360;
+}
+
+function fullscreen() {
+	wrapperEl?.requestFullscreen?.();
+}
+
+function handleWheel(e: WheelEvent) {
+	e.preventDefault();
+	const factor = e.deltaY > 0 ? 0.9 : 1.1;
+	scale = Math.max(0.1, Math.min(20, scale * factor));
+}
+
+function handlePointerDown(e: PointerEvent) {
+	if (e.button !== 0) return;
+	dragging = true;
+	lastX = e.clientX;
+	lastY = e.clientY;
+	(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+}
+
+function handlePointerMove(e: PointerEvent) {
+	if (!dragging) return;
+	panX += e.clientX - lastX;
+	panY += e.clientY - lastY;
+	lastX = e.clientX;
+	lastY = e.clientY;
+}
+
+function handlePointerUp() {
+	dragging = false;
+}
+
+function handleDblClick() {
+	if (scale !== 1 || panX !== 0 || panY !== 0) {
+		resetView();
+	} else {
+		scale = 2;
+	}
+}
+
+function cleanup() {
+	abortController?.abort();
+	abortController = null;
+	if (blobUrl) {
+		URL.revokeObjectURL(blobUrl);
+		blobUrl = null;
+	}
+	imgSrc = null;
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+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">
+			<!-- 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')}>
+					<PlusIcon class="size-3.5" />
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={zoomOut} title={t('image.zoomOut')}>
+					<MinusIcon class="size-3.5" />
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={fitView} title={t('image.fit')}>
+					<ScanIcon class="size-3.5" />
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={rotate} title={t('image.rotate')}>
+					<RotateCwIcon class="size-3.5" />
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={fullscreen} title={t('image.fullscreen')}>
+					<MaximizeIcon class="size-3.5" />
+				</Button>
+			</div>
+
+			<!-- 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">
+						<EllipsisVerticalIcon class="size-4" />
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content align="end" class="w-40">
+						<DropdownMenu.Item onclick={zoomIn}>{t('image.zoomIn')}</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={zoomOut}>{t('image.zoomOut')}</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={fitView}>{t('image.fit')}</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={rotate}>{t('image.rotate')}</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={fullscreen}>{t('image.fullscreen')}</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		</div>
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={wrapperEl}
+		class="relative flex flex-1 items-center justify-center overflow-hidden bg-zinc-100 dark:bg-zinc-900"
+		class:cursor-grab={scale > 1 && !dragging}
+		class:cursor-grabbing={dragging}
+		onwheel={handleWheel}
+		ondblclick={handleDblClick}
+	>
+		{#if loading}
+			<p class="text-sm text-zinc-400">{t('image.loading')}</p>
+		{:else if error}
+			<p class="text-sm text-red-400">{error}</p>
+		{:else if imgSrc}
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+			<img
+				src={imgSrc}
+				alt={tab.name}
+				class="max-h-full max-w-full select-none"
+				style="transform: translate({panX}px, {panY}px) scale({scale}) rotate({rotation}deg); transition: {dragging ? 'none' : 'transform 0.15s ease-out'};"
+				draggable="false"
+				onpointerdown={handlePointerDown}
+				onpointermove={handlePointerMove}
+				onpointerup={handlePointerUp}
+			/>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,7 @@
+import type { Tab } from '../../types';
+type $$ComponentProps = {
+    tab: Tab;
+};
+declare const ImageViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageViewer = ReturnType<typeof ImageViewer>;
+export default ImageViewer;

package/dist/components/viewers/LoadProgress.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+import CheckCircleIcon from '@lucide/svelte/icons/circle-check';
+import Loader2Icon from '@lucide/svelte/icons/loader-2';
+import XCircleIcon from '@lucide/svelte/icons/x-circle';
+import { t } from '../../i18n/index.svelte.js';
+
+export type ProgressEntry = {
+	label: string;
+	value: string;
+	detail?: string;
+};
+
+let {
+	stage = '',
+	entries = [],
+	onCancel,
+	onForceCancel,
+	forceCancelVisible = false
+}: {
+	stage?: string;
+	entries?: ProgressEntry[];
+	onCancel?: () => void;
+	onForceCancel?: () => void;
+	forceCancelVisible?: boolean;
+} = $props();
+</script>
+
+<div class="flex flex-1 flex-col items-center justify-center gap-4 px-4">
+	<!-- 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>
+	</div>
+
+	<!-- Discovered metadata -->
+	{#if entries.length > 0}
+		<div
+			class="w-full max-w-md rounded-lg border border-zinc-200/60 bg-zinc-50/80 px-3 py-2.5 sm:px-4 sm:py-3 dark:border-zinc-800/60 dark:bg-zinc-900/50"
+		>
+			<div class="flex flex-col gap-1.5">
+				{#each entries as entry}
+					<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"
+						>
+							{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">
+								{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"
+								>
+									{entry.detail}
+								</p>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Cancel -->
+	{#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"
+				onclick={onCancel}
+			>
+				<XCircleIcon class="size-3" />
+				{t('table.cancel')}
+			</button>
+			{#if forceCancelVisible && onForceCancel}
+				<div class="flex flex-col items-center gap-1">
+					<button
+						class="flex items-center gap-1 rounded border border-red-400 bg-red-50 px-3 py-1 text-xs text-red-600 hover:bg-red-100 dark:border-red-700 dark:bg-red-950 dark:text-red-400 dark:hover:bg-red-900"
+						onclick={onForceCancel}
+					>
+						<XCircleIcon class="size-3" />
+						{t('table.forceStop')}
+					</button>
+					<p class="max-w-xs text-center text-[10px] text-zinc-400 dark:text-zinc-500">
+						{t('table.forceStopWarning')}
+					</p>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+export type ProgressEntry = {
+    label: string;
+    value: string;
+    detail?: string;
+};
+type $$ComponentProps = {
+    stage?: string;
+    entries?: ProgressEntry[];
+    onCancel?: () => void;
+    onForceCancel?: () => void;
+    forceCancelVisible?: boolean;
+};
+declare const LoadProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoadProgress = ReturnType<typeof LoadProgress>;
+export default LoadProgress;