@walkthru-earth/objex 0.1.0

package/dist/components/viewers/map/AttributeTable.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import XIcon from '@lucide/svelte/icons/x';
+
+let {
+	feature = null,
+	visible = false,
+	onClose
+}: {
+	feature: Record<string, any> | null;
+	visible?: boolean;
+	onClose?: () => void;
+} = $props();
+
+function formatValue(value: any): string {
+	if (value === null || value === undefined) return 'NULL';
+	if (typeof value === 'object') return JSON.stringify(value);
+	return String(value);
+}
+</script>
+
+{#if visible && feature}
+	<div
+		class="absolute bottom-2 end-2 top-10 z-10 flex w-64 flex-col overflow-hidden rounded bg-card/95 text-card-foreground shadow-lg backdrop-blur-sm sm:w-72"
+	>
+		<div
+			class="flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800"
+		>
+			<h3 class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Feature Attributes</h3>
+			{#if onClose}
+				<button
+					class="rounded p-0.5 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 dark:hover:bg-zinc-700 dark:hover:text-zinc-300"
+					onclick={onClose}
+				>
+					<XIcon class="size-3.5" />
+				</button>
+			{/if}
+		</div>
+		<div class="flex-1 divide-y divide-zinc-100 overflow-auto dark:divide-zinc-800">
+			{#each Object.entries(feature) as [key, value]}
+				<div class="px-3 py-1.5">
+					<div class="text-[10px] font-medium text-zinc-500 dark:text-zinc-400">{key}</div>
+					<div
+						class="break-all text-xs text-zinc-700 dark:text-zinc-300"
+						title={formatValue(value)}
+					>
+						{formatValue(value)}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

package/dist/components/viewers/map/AttributeTable.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    feature: Record<string, any> | null;
+    visible?: boolean;
+    onClose?: () => void;
+};
+declare const AttributeTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type AttributeTable = ReturnType<typeof AttributeTable>;
+export default AttributeTable;

package/dist/components/viewers/map/MapContainer.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { onDestroy } from 'svelte';
+import { t } from '../../../i18n/index.svelte.js';
+import { settings } from '../../../stores/settings.svelte.js';
+
+const MAP_STYLES = {
+	light: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+	dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
+};
+
+const RTL_PLUGIN_URL =
+	'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js';
+
+// Register RTL text plugin once (idempotent)
+if (
+	typeof window !== 'undefined' &&
+	(!maplibregl.getRTLTextPluginStatus || maplibregl.getRTLTextPluginStatus() === 'unavailable')
+) {
+	maplibregl.setRTLTextPlugin(RTL_PLUGIN_URL, true).catch((err) => {
+		console.warn('RTL text plugin failed to load:', err);
+	});
+}
+
+let {
+	onMapReady,
+	style,
+	center = [0, 20] as [number, number],
+	zoom = 2,
+	bounds
+}: {
+	onMapReady: (map: maplibregl.Map) => void;
+	style?: string | maplibregl.StyleSpecification;
+	center?: [number, number];
+	zoom?: number;
+	bounds?: [number, number, number, number];
+} = $props();
+
+const resolvedStyle = $derived(style ?? MAP_STYLES[settings.resolved]);
+
+let containerEl: HTMLDivElement | undefined = $state();
+let map: maplibregl.Map | null = null;
+let currentStyleUrl: string | maplibregl.StyleSpecification | null = null;
+let currentZoom = $state(2);
+let webglLost = $state(false);
+
+function initMap() {
+	if (!containerEl || map) return;
+	webglLost = false;
+
+	map = new maplibregl.Map({
+		container: containerEl,
+		style: resolvedStyle,
+		center,
+		zoom
+	});
+
+	currentStyleUrl = resolvedStyle;
+
+	map.addControl(
+		new maplibregl.NavigationControl({ showCompass: true, visualizePitch: true }),
+		'bottom-right'
+	);
+
+	currentZoom = map.getZoom();
+	map.on('zoom', () => {
+		if (map) currentZoom = map.getZoom();
+	});
+
+	map.on('load', () => {
+		if (map) onMapReady(map);
+	});
+
+	// Handle WebGL context loss gracefully
+	const canvas = map.getCanvas();
+	canvas.addEventListener('webglcontextlost', (e) => {
+		e.preventDefault();
+		console.warn('[MapContainer] WebGL context lost');
+		webglLost = true;
+	});
+	canvas.addEventListener('webglcontextrestored', () => {
+		console.log('[MapContainer] WebGL context restored');
+		webglLost = false;
+	});
+}
+
+function retryMap() {
+	if (map) {
+		map.remove();
+		map = null;
+	}
+	webglLost = false;
+	// Re-init on next microtask so the DOM settles
+	queueMicrotask(initMap);
+}
+
+$effect(() => {
+	if (containerEl && !map) {
+		initMap();
+	}
+});
+
+// React to bounds changes — data may load after the map is ready.
+// Also handles initial bounds that arrive before or during map load.
+let prevBoundsKey = '';
+$effect(() => {
+	if (!bounds || !map) return;
+	const key = bounds.join(',');
+	if (key === prevBoundsKey) return;
+	prevBoundsKey = key;
+	const [minX, minY, maxX, maxY] = bounds;
+	if (minX >= -180 && maxX <= 180 && minY >= -90 && maxY <= 90) {
+		map.fitBounds(bounds, { padding: 40 });
+	} else {
+		console.warn('[MapContainer] Bounds outside WGS84 range, skipping fitBounds:', bounds);
+	}
+});
+
+// React to theme changes — swap basemap style
+$effect(() => {
+	const newStyle = resolvedStyle;
+	if (map && currentStyleUrl !== newStyle && !style) {
+		currentStyleUrl = newStyle;
+		map.setStyle(newStyle);
+	}
+});
+
+onDestroy(() => {
+	map?.remove();
+	map = null;
+});
+</script>
+
+<div class="relative h-full w-full">
+	<div bind:this={containerEl} class="h-full w-full"></div>
+	<!-- Zoom level indicator — positioned above nav controls -->
+	<div
+		class="pointer-events-none absolute bottom-[10rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-zinc-300 bg-white shadow-sm dark:border-zinc-600 dark:bg-zinc-800"
+	>
+		<span class="text-[10px] font-semibold tabular-nums text-zinc-600 dark:text-zinc-300">
+			{currentZoom.toFixed(1)}
+		</span>
+	</div>
+	{#if webglLost}
+		<div class="absolute inset-0 z-20 flex items-center justify-center bg-card/80 backdrop-blur-sm">
+			<div class="text-center">
+				<p class="text-sm text-card-foreground">{t('map.webglLost')}</p>
+				<button
+					class="mt-2 rounded bg-primary px-3 py-1 text-xs text-primary-foreground hover:bg-primary/90"
+					onclick={retryMap}
+				>
+					{t('map.retry')}
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/viewers/map/MapContainer.svelte.d.ts

@@ -0,0 +1,12 @@
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+type $$ComponentProps = {
+    onMapReady: (map: maplibregl.Map) => void;
+    style?: string | maplibregl.StyleSpecification;
+    center?: [number, number];
+    zoom?: number;
+    bounds?: [number, number, number, number];
+};
+declare const MapContainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type MapContainer = ReturnType<typeof MapContainer>;
+export default MapContainer;

package/dist/components/viewers/pmtiles/PmtilesArchiveView.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+import type { PMTiles } from 'pmtiles';
+import { tileIdToZxy } from 'pmtiles';
+import {
+	ResizableHandle,
+	ResizablePane,
+	ResizablePaneGroup
+} from '../../ui/resizable/index.js';
+import { t } from '../../../i18n/index.svelte.js';
+import type { PmtilesMetadata } from '../../../utils/pmtiles';
+import { highlightCode } from '../../../utils/shiki';
+
+let {
+	metadata,
+	pmtiles,
+	onOpenInspector
+}: {
+	metadata: PmtilesMetadata;
+	pmtiles: PMTiles;
+	onOpenInspector?: (z: number, x: number, y: number) => void;
+} = $props();
+
+interface ZoomSummary {
+	zoom: number;
+	count: number;
+}
+
+interface DirectoryEntry {
+	tileId: number;
+	z: number;
+	x: number;
+	y: number;
+	offset: number;
+	length: number;
+	runLength: number;
+}
+
+let zoomSummaries = $state<ZoomSummary[]>([]);
+let selectedZoom = $state<number | null>(null);
+let zoomEntries = $state<DirectoryEntry[]>([]);
+let selectedEntry = $state<DirectoryEntry | null>(null);
+let loadingEntries = $state(false);
+let showJson = $state(false);
+let highlightedJson = $state('');
+let errorMsg = $state('');
+
+// Build zoom summaries from directory on mount
+$effect(() => {
+	if (!pmtiles) return;
+	buildZoomSummaries();
+});
+
+async function buildZoomSummaries() {
+	const header = metadata.header;
+	const entries = await pmtiles.cache.getDirectory(
+		pmtiles.source,
+		header.rootDirectoryOffset,
+		header.rootDirectoryLength,
+		header
+	);
+
+	// Expand root entries into per-zoom counts
+	const zoomCounts = new Map<number, number>();
+	for (const e of entries) {
+		if (e.runLength === 0) {
+			const [z] = tileIdToZxy(e.tileId);
+			zoomCounts.set(z, (zoomCounts.get(z) ?? 0) + 1);
+		} else {
+			for (let r = 0; r < e.runLength; r++) {
+				const [z] = tileIdToZxy(e.tileId + r);
+				zoomCounts.set(z, (zoomCounts.get(z) ?? 0) + 1);
+			}
+		}
+	}
+
+	const summaries: ZoomSummary[] = [];
+	for (let z = metadata.minZoom; z <= metadata.maxZoom; z++) {
+		summaries.push({ zoom: z, count: zoomCounts.get(z) ?? 0 });
+	}
+	zoomSummaries = summaries;
+}
+
+async function selectZoom(zoom: number) {
+	selectedZoom = zoom;
+	selectedEntry = null;
+	loadingEntries = true;
+	errorMsg = '';
+
+	const header = metadata.header;
+	const allEntries = await pmtiles.cache.getDirectory(
+		pmtiles.source,
+		header.rootDirectoryOffset,
+		header.rootDirectoryLength,
+		header
+	);
+
+	const result: DirectoryEntry[] = [];
+	for (const e of allEntries) {
+		if (e.runLength === 0) {
+			const [z] = tileIdToZxy(e.tileId);
+			if (z === zoom) {
+				try {
+					const leafEntries = await pmtiles.cache.getDirectory(
+						pmtiles.source,
+						header.leafDirectoryOffset + e.offset,
+						e.length,
+						header
+					);
+					for (const le of leafEntries) {
+						for (let r = 0; r < le.runLength; r++) {
+							const [lz, lx, ly] = tileIdToZxy(le.tileId + r);
+							if (lz === zoom) {
+								result.push({
+									tileId: le.tileId + r,
+									z: lz,
+									x: lx,
+									y: ly,
+									offset: le.offset,
+									length: le.length,
+									runLength: le.runLength
+								});
+							}
+						}
+						if (result.length > 5000) break;
+					}
+				} catch (err) {
+					errorMsg = err instanceof Error ? err.message : String(err);
+				}
+			}
+		} else {
+			for (let r = 0; r < e.runLength; r++) {
+				const [z, x, y] = tileIdToZxy(e.tileId + r);
+				if (z === zoom) {
+					result.push({
+						tileId: e.tileId + r,
+						z,
+						x,
+						y,
+						offset: e.offset,
+						length: e.length,
+						runLength: e.runLength
+					});
+				}
+			}
+		}
+		if (result.length > 5000) break;
+	}
+
+	zoomEntries = result;
+	loadingEntries = false;
+}
+
+function formatBytes(bytes: number): string {
+	if (bytes === 0) return '0 B';
+	const units = ['B', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	return `${(bytes / 1024 ** i).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+}
+
+const maxCount = $derived(Math.max(1, ...zoomSummaries.map((s) => s.count)));
+const dedupRatio = $derived(
+	metadata.numAddressedTiles > 0
+		? ((1 - metadata.numTileContents / metadata.numAddressedTiles) * 100).toFixed(1)
+		: '0'
+);
+</script>
+
+{#snippet entryDetails()}
+	{#if selectedEntry}
+		<div
+			class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+		>
+			{t('pmtiles.entryDetails')}
+		</div>
+		<div class="flex-1 overflow-auto p-3">
+			<dl class="space-y-2 text-xs">
+				<div>
+					<dt class="text-muted-foreground">Tile</dt>
+					<dd class="font-mono">{selectedEntry.z}/{selectedEntry.x}/{selectedEntry.y}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Tile ID</dt>
+					<dd class="font-mono text-[11px]">{selectedEntry.tileId.toLocaleString()}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">{t('pmtiles.offset')}</dt>
+					<dd class="font-mono text-[11px]">0x{selectedEntry.offset.toString(16).toUpperCase()}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">{t('pmtiles.length')}</dt>
+					<dd>{formatBytes(selectedEntry.length)}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Run Length</dt>
+					<dd>{selectedEntry.runLength}</dd>
+				</div>
+			</dl>
+
+			{#if onOpenInspector}
+				<button
+					class="mt-4 w-full rounded bg-primary/90 px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary"
+					onclick={() => onOpenInspector?.(selectedEntry!.z, selectedEntry!.x, selectedEntry!.y)}
+				>
+					{t('pmtiles.openInInspector')}
+				</button>
+			{/if}
+		</div>
+	{:else}
+		<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
+			Select an entry
+		</div>
+	{/if}
+{/snippet}
+
+<div class="flex h-full flex-col overflow-hidden">
+	<!-- Stats grid -->
+	<div
+		class="shrink-0 border-b border-zinc-200 px-3 py-3 sm:px-4 dark:border-zinc-800"
+	>
+		<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-3 lg:grid-cols-6">
+			<div>
+				<div class="text-muted-foreground">{t('mapInfo.tileFormat')}</div>
+				<div class="font-medium">{metadata.formatLabel}</div>
+			</div>
+			<div>
+				<div class="text-muted-foreground">{t('mapInfo.zoomRange')}</div>
+				<div class="font-medium">z{metadata.minZoom} – z{metadata.maxZoom}</div>
+			</div>
+			<div>
+				<div class="text-muted-foreground">{t('mapInfo.addressedTiles')}</div>
+				<div class="font-medium">{metadata.numAddressedTiles.toLocaleString()}</div>
+			</div>
+			<div>
+				<div class="text-muted-foreground">{t('mapInfo.uniqueContents')}</div>
+				<div class="font-medium">{metadata.numTileContents.toLocaleString()}</div>
+			</div>
+			<div>
+				<div class="text-muted-foreground">{t('pmtiles.dedupRatio')}</div>
+				<div class="font-medium">{dedupRatio}%</div>
+			</div>
+			<div>
+				<div class="text-muted-foreground">{t('mapInfo.tileCompression')}</div>
+				<div class="font-medium">{metadata.tileCompression}</div>
+			</div>
+		</div>
+
+		<!-- Header layout -->
+		<div class="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-[11px] sm:grid-cols-4">
+			{#each [
+				{ label: t('pmtiles.rootDirectory'), offset: metadata.header.rootDirectoryOffset, length: metadata.header.rootDirectoryLength },
+				{ label: t('pmtiles.metadata'), offset: metadata.header.jsonMetadataOffset, length: metadata.header.jsonMetadataLength },
+				{ label: t('pmtiles.leafDirectories'), offset: metadata.header.leafDirectoryOffset, length: metadata.header.leafDirectoryLength ?? 0 },
+				{ label: t('pmtiles.tileData'), offset: metadata.header.tileDataOffset, length: metadata.header.tileDataLength ?? 0 }
+			] as section}
+				<div class="flex items-baseline gap-1">
+					<span class="text-muted-foreground">{section.label}:</span>
+					<span class="font-mono text-[10px]">{formatBytes(section.length)}</span>
+				</div>
+			{/each}
+		</div>
+
+		<!-- JSON metadata toggle -->
+		{#if metadata.jsonMetadata && Object.keys(metadata.jsonMetadata).length > 0}
+			<button
+				class="mt-2 text-[11px] text-blue-400 hover:text-blue-300"
+				onclick={async () => {
+					showJson = !showJson;
+					if (showJson && !highlightedJson) {
+						const raw = JSON.stringify(metadata.jsonMetadata, null, 2);
+						highlightedJson = await highlightCode(raw, 'json');
+					}
+				}}
+			>
+				{showJson ? '▾' : '▸'} {t('pmtiles.jsonMetadata')}
+			</button>
+			{#if showJson}
+				<div class="json-metadata mt-1 max-h-48 overflow-auto rounded text-[11px]">
+					{@html highlightedJson || `<pre class="rounded bg-zinc-100 p-2 font-mono text-zinc-600 dark:bg-zinc-900 dark:text-zinc-400">${JSON.stringify(metadata.jsonMetadata, null, 2)}</pre>`}
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- Column browser (resizable) -->
+	<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
+		<!-- Column 1: Zoom levels -->
+		<ResizablePane defaultSize={28} minSize={15}>
+			<div class="flex h-full flex-col">
+				<div
+					class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+				>
+					{t('pmtiles.zoomLevels')}
+				</div>
+				<div class="flex-1 overflow-auto">
+					{#each zoomSummaries as s}
+						<button
+							class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
+							class:bg-zinc-100={selectedZoom === s.zoom}
+							class:dark:bg-zinc-800={selectedZoom === s.zoom}
+							onclick={() => selectZoom(s.zoom)}
+						>
+							<span class="w-7 shrink-0 font-mono text-muted-foreground">z{s.zoom}</span>
+							<div class="min-w-0 flex-1">
+								<div
+									class="h-1.5 rounded-full bg-blue-500/60"
+									style="width: {Math.max(2, (s.count / maxCount) * 100)}%"
+								></div>
+							</div>
+							<span class="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+								{s.count.toLocaleString()}
+							</span>
+							<ChevronRightIcon class="size-3 shrink-0 text-muted-foreground" />
+						</button>
+					{/each}
+				</div>
+			</div>
+		</ResizablePane>
+
+		<ResizableHandle />
+
+		<!-- Column 2: Entries at zoom -->
+		<ResizablePane defaultSize={42} minSize={20}>
+			<div class="flex h-full flex-col">
+				{#if selectedZoom !== null}
+					<div
+						class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+					>
+						{t('pmtiles.tilesAtZoom').replace('{zoom}', String(selectedZoom))}
+						<span class="ms-1 normal-case tracking-normal">({zoomEntries.length.toLocaleString()})</span>
+					</div>
+					<div class="flex-1 overflow-auto">
+						{#if loadingEntries}
+							<div class="p-4 text-center text-xs text-muted-foreground">Loading...</div>
+						{:else if errorMsg}
+							<div class="p-4 text-center text-xs text-red-400">{errorMsg}</div>
+						{:else if zoomEntries.length === 0}
+							<div class="p-4 text-center text-xs text-muted-foreground">{t('pmtiles.noEntries')}</div>
+						{:else}
+							{#each zoomEntries as entry}
+								<button
+									class="flex w-full items-center gap-2 px-3 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
+									class:bg-zinc-100={selectedEntry?.tileId === entry.tileId}
+									class:dark:bg-zinc-800={selectedEntry?.tileId === entry.tileId}
+									onclick={() => (selectedEntry = entry)}
+								>
+									<span class="shrink-0 truncate font-mono text-[11px]">
+										{entry.z}/{entry.x}/{entry.y}
+									</span>
+									<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
+										{formatBytes(entry.length)}
+									</span>
+									<ChevronRightIcon class="size-3 shrink-0 text-muted-foreground" />
+								</button>
+							{/each}
+						{/if}
+					</div>
+				{:else}
+					<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
+						Select a zoom level
+					</div>
+				{/if}
+			</div>
+		</ResizablePane>
+
+		<ResizableHandle />
+
+		<!-- Column 3: Entry details -->
+		<ResizablePane defaultSize={30} minSize={15}>
+			<div class="flex h-full flex-col">
+				{@render entryDetails()}
+			</div>
+		</ResizablePane>
+	</ResizablePaneGroup>
+</div>
+
+<style>
+	.json-metadata :global(pre) {
+		margin: 0;
+		padding: 0.5rem;
+		border-radius: 0.375rem;
+		font-size: 0.6875rem;
+		line-height: 1.5;
+	}
+
+	.json-metadata :global(code) {
+		font-size: inherit;
+	}
+</style>

package/dist/components/viewers/pmtiles/PmtilesArchiveView.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PMTiles } from 'pmtiles';
+import type { PmtilesMetadata } from '../../../utils/pmtiles';
+type $$ComponentProps = {
+    metadata: PmtilesMetadata;
+    pmtiles: PMTiles;
+    onOpenInspector?: (z: number, x: number, y: number) => void;
+};
+declare const PmtilesArchiveView: import("svelte").Component<$$ComponentProps, {}, "">;
+type PmtilesArchiveView = ReturnType<typeof PmtilesArchiveView>;
+export default PmtilesArchiveView;