@walkthru-earth/objex 0.1.0

package/dist/components/viewers/PdfViewer.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+import MinusIcon from '@lucide/svelte/icons/minus';
+import PlusIcon from '@lucide/svelte/icons/plus';
+import type { PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdfjs-dist';
+import { onDestroy, untrack } 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 { Separator } from '../ui/separator/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 { loadPdfDocument, loadPdfFromUrl } from '../../utils/pdf';
+import { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
+
+const LOAD_TIMEOUT_MS = 20_000;
+
+let { tab }: { tab: Tab } = $props();
+
+let abortController: AbortController | null = null;
+let canvasEl: HTMLCanvasElement | undefined = $state();
+let pdfDoc = $state.raw<PDFDocumentProxy | null>(null);
+let currentPage = $state(1);
+let totalPages = $state(0);
+let scale = $state(1.5);
+let loading = $state(true);
+let error = $state<string | null>(null);
+let renderGeneration = 0;
+let activeTask: PDFDocumentLoadingTask | null = null;
+
+$effect(() => {
+	if (!tab) return;
+	// untrack prevents tracking pdfDoc reads inside loadPdf (pdfDoc?.destroy())
+	// — otherwise setting pdfDoc after load re-triggers this effect → infinite loop
+	untrack(() => loadPdf());
+});
+
+$effect(() => {
+	if (!tab) return;
+	// Read all reactive deps unconditionally to ensure tracking
+	const doc = pdfDoc;
+	const canvas = canvasEl;
+	const page = currentPage;
+	const s = scale;
+	if (doc && canvas) renderPage(doc, canvas, page, s);
+});
+
+function cancelActiveTask() {
+	if (activeTask) {
+		activeTask.destroy();
+		activeTask = null;
+	}
+}
+
+async function loadPdf() {
+	abortController?.abort();
+	abortController = new AbortController();
+	const { signal } = abortController;
+
+	loading = true;
+	error = null;
+	cancelActiveTask();
+	pdfDoc?.destroy();
+	pdfDoc = null;
+
+	try {
+		const doc = await loadPdfData(signal);
+		pdfDoc = doc;
+		totalPages = doc.numPages;
+		currentPage = 1;
+	} catch (err: any) {
+		// Ignore cancellation errors (destroyed loading task) and aborts
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		if (err?.name === 'PasswordException' || err?.message?.includes('destroy')) return;
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+async function loadPdfData(signal: AbortSignal): Promise<PDFDocumentProxy> {
+	// Try streaming from URL first (range requests for progressive page rendering)
+	if (canStreamDirectly(tab)) {
+		try {
+			const task = await loadPdfFromUrl(buildHttpsUrl(tab));
+			activeTask = task;
+			return await withTimeout(task.promise, LOAD_TIMEOUT_MS);
+		} catch {
+			// CORS, network, or timeout error — fall through to adapter download
+			cancelActiveTask();
+		}
+	}
+	// Fall back to full download via storage adapter
+	const adapter = getAdapter(tab.source, tab.connectionId);
+	const data = await adapter.read(tab.path, undefined, undefined, signal);
+	const task = await loadPdfDocument(data);
+	activeTask = task;
+	return await withTimeout(task.promise, LOAD_TIMEOUT_MS);
+}
+
+function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
+	return Promise.race([
+		promise,
+		new Promise<never>((_, reject) =>
+			setTimeout(() => reject(new Error('PDF loading timed out')), ms)
+		)
+	]);
+}
+
+async function renderPage(
+	doc: PDFDocumentProxy,
+	canvas: HTMLCanvasElement,
+	pageNum: number,
+	currentScale: number
+) {
+	const gen = ++renderGeneration;
+
+	try {
+		const page = await doc.getPage(pageNum);
+		// Stale or unmounted — skip
+		if (gen !== renderGeneration || !canvasEl) return;
+
+		const viewport = page.getViewport({ scale: currentScale });
+		canvas.width = viewport.width;
+		canvas.height = viewport.height;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		await page.render({ canvasContext: ctx, viewport, canvas } as any).promise;
+	} catch (err) {
+		if (gen === renderGeneration) {
+			error = err instanceof Error ? err.message : String(err);
+		}
+	}
+}
+
+function prevPage() {
+	if (currentPage > 1) currentPage--;
+}
+
+function nextPage() {
+	if (currentPage < totalPages) currentPage++;
+}
+
+function zoomIn() {
+	scale = Math.min(scale + 0.25, 5);
+}
+
+function zoomOut() {
+	scale = Math.max(scale - 0.25, 0.5);
+}
+
+function cleanup() {
+	abortController?.abort();
+	abortController = null;
+	cancelActiveTask();
+	pdfDoc?.destroy();
+	pdfDoc = 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">{t("pdf.badge")}</Badge>
+
+    {#if totalPages > 0}
+      <div class="ms-auto flex items-center gap-1 sm:gap-2">
+        <!-- Pagination (always visible) -->
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-1.5"
+          onclick={prevPage}
+          disabled={currentPage <= 1}
+        >
+          <ChevronLeftIcon class="size-3.5" />
+          <span class="hidden sm:inline">{t("pdf.prev")}</span>
+        </Button>
+        <span class="text-xs text-zinc-500 dark:text-zinc-400">
+          {currentPage} / {totalPages}
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-1.5"
+          onclick={nextPage}
+          disabled={currentPage >= totalPages}
+        >
+          <span class="hidden sm:inline">{t("pdf.next")}</span>
+          <ChevronRightIcon class="size-3.5" />
+        </Button>
+
+        <!-- Zoom controls — desktop only -->
+        <div class="hidden items-center gap-1 sm:flex">
+          <Separator orientation="vertical" class="!h-4" />
+          <Button
+            variant="ghost"
+            size="sm"
+            class="h-7 px-1.5"
+            onclick={zoomOut}
+            title={t("pdf.zoomOut")}
+          >
+            <MinusIcon class="size-3.5" />
+          </Button>
+          <span class="text-xs text-zinc-500 dark:text-zinc-400">
+            {Math.round(scale * 100)}%
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            class="h-7 px-1.5"
+            onclick={zoomIn}
+            title={t("pdf.zoomIn")}
+          >
+            <PlusIcon 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-44">
+              <DropdownMenu.Item onclick={zoomIn}>
+                {t("pdf.zoomIn")}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onclick={zoomOut}>
+                {t("pdf.zoomOut")}
+              </DropdownMenu.Item>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item disabled>
+                {t("pdf.zoom")}: {Math.round(scale * 100)}%
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <div
+    class="flex flex-1 items-start justify-center overflow-auto bg-zinc-200 p-4 dark:bg-zinc-800"
+  >
+    {#if loading}
+      <div class="flex h-full items-center justify-center">
+        <p class="text-sm text-zinc-400">{t("pdf.loading")}</p>
+      </div>
+    {:else if error}
+      <div class="flex h-full items-center justify-center">
+        <p class="text-sm text-red-400">{error}</p>
+      </div>
+    {:else}
+      <canvas bind:this={canvasEl} class="shadow-lg"></canvas>
+    {/if}
+  </div>
+</div>

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

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

package/dist/components/viewers/PmtilesViewer.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+import ArchiveIcon from '@lucide/svelte/icons/archive';
+import GridIcon from '@lucide/svelte/icons/grid-3x3';
+import MapIcon from '@lucide/svelte/icons/map';
+import type { PMTiles } from 'pmtiles';
+import { onDestroy, untrack } from 'svelte';
+import { Badge } from '../ui/badge/index.js';
+import { Button } from '../ui/button/index.js';
+import { Separator } from '../ui/separator/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
+import type { Tab } from '../../types';
+import { loadPmtiles, type PmtilesMetadata } from '../../utils/pmtiles';
+import { buildHttpsUrl } from '../../utils/url.js';
+import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+
+let { tab }: { tab: Tab } = $props();
+
+type ViewMode = 'map' | 'archive' | 'inspector';
+
+let loading = $state(true);
+let error = $state<string | null>(null);
+let metadata = $state<PmtilesMetadata | null>(null);
+let pmtilesInstance = $state<PMTiles | null>(null);
+let pmtilesUrl = $state('');
+
+// Read initial view from URL hash
+const urlView = getUrlView();
+let viewMode = $state<ViewMode>(
+	urlView === 'archive' ? 'archive' : urlView === 'inspector' ? 'inspector' : 'map'
+);
+
+// Tile inspector initial coordinates (set when navigating from archive)
+let inspectorZ = $state<number | undefined>();
+let inspectorX = $state<number | undefined>();
+let inspectorY = $state<number | undefined>();
+
+function setViewMode(mode: ViewMode) {
+	viewMode = mode;
+	updateUrlView(mode);
+}
+
+function openInInspector(z: number, x: number, y: number) {
+	inspectorZ = z;
+	inspectorX = x;
+	inspectorY = y;
+	setViewMode('inspector');
+}
+
+function cleanup() {
+	pmtilesInstance = null;
+	metadata = null;
+	pmtilesUrl = '';
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+onDestroy(cleanup);
+
+$effect(() => {
+	if (!tab) return;
+	const _tabId = tab.id;
+	untrack(() => {
+		load();
+	});
+});
+
+async function load() {
+	loading = true;
+	error = null;
+
+	try {
+		pmtilesUrl = buildHttpsUrl(tab);
+		const result = await loadPmtiles(pmtilesUrl);
+		pmtilesInstance = result.pmtiles;
+		metadata = result.metadata;
+	} catch (err) {
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+const fileName = $derived(tab.path.split('/').pop() ?? 'pmtiles');
+</script>
+
+<div class="flex h-full flex-col">
+	<!-- Toolbar -->
+	{#if !loading && !error && metadata}
+		<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"
+		>
+			<!-- File info -->
+			<span
+				class="max-w-[100px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
+			>
+				{fileName}
+			</span>
+			<Badge variant="outline" class="hidden text-[10px] sm:inline-flex">
+				{metadata.formatLabel}
+			</Badge>
+			<span class="hidden text-xs text-zinc-400 sm:inline dark:text-zinc-500">
+				z{metadata.minZoom}-{metadata.maxZoom} · {metadata.numAddressedTiles.toLocaleString()} tiles
+			</span>
+
+			<!-- View mode buttons -->
+			<div class="ms-auto flex items-center gap-1">
+				<Button
+					variant={viewMode === 'map' ? 'default' : 'outline'}
+					size="sm"
+					class="h-7 gap-1 px-2 text-xs {viewMode !== 'map'
+						? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900'
+						: ''}"
+					onclick={() => setViewMode('map')}
+				>
+					<MapIcon class="size-3" />
+					<span class="hidden sm:inline">{t('pmtiles.mapView')}</span>
+				</Button>
+
+				<Button
+					variant={viewMode === 'archive' ? 'default' : 'outline'}
+					size="sm"
+					class="h-7 gap-1 px-2 text-xs {viewMode !== 'archive'
+						? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900'
+						: ''}"
+					onclick={() => setViewMode('archive')}
+				>
+					<ArchiveIcon class="size-3" />
+					<span class="hidden sm:inline">{t('pmtiles.archiveView')}</span>
+				</Button>
+
+				<Button
+					variant={viewMode === 'inspector' ? 'default' : 'outline'}
+					size="sm"
+					class="h-7 gap-1 px-2 text-xs {viewMode !== 'inspector'
+						? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900'
+						: ''}"
+					onclick={() => setViewMode('inspector')}
+				>
+					<GridIcon class="size-3" />
+					<span class="hidden sm:inline">{t('pmtiles.inspectorView')}</span>
+				</Button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Content area -->
+	<div class="min-h-0 flex-1 overflow-hidden">
+		{#if loading}
+			<div class="flex h-full items-center justify-center">
+				<p class="text-sm text-zinc-400">{t('map.loadingPmtiles')}</p>
+			</div>
+		{:else if error}
+			<div class="flex h-full items-center justify-center">
+				<p class="text-sm text-red-400">{error}</p>
+			</div>
+		{:else if metadata && pmtilesInstance}
+			{#if viewMode === 'map'}
+				{#await import('./pmtiles/PmtilesMapView.svelte') then mod}
+					<mod.default
+						{tab}
+						{metadata}
+						{pmtilesUrl}
+						onOpenInspector={openInInspector}
+					/>
+				{/await}
+			{:else if viewMode === 'archive'}
+				{#await import('./pmtiles/PmtilesArchiveView.svelte') then mod}
+					<mod.default
+						{metadata}
+						pmtiles={pmtilesInstance}
+						onOpenInspector={openInInspector}
+					/>
+				{/await}
+			{:else if viewMode === 'inspector'}
+				{#await import('./pmtiles/PmtilesTileInspector.svelte') then mod}
+					<mod.default
+						{metadata}
+						pmtiles={pmtilesInstance}
+						initialZ={inspectorZ}
+						initialX={inspectorX}
+						initialY={inspectorY}
+					/>
+				{/await}
+			{/if}
+		{/if}
+	</div>
+</div>

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

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

package/dist/components/viewers/QueryHistoryPanel.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+import ClockIcon from '@lucide/svelte/icons/clock';
+import SearchIcon from '@lucide/svelte/icons/search';
+import TrashIcon from '@lucide/svelte/icons/trash-2';
+import XIcon from '@lucide/svelte/icons/x';
+import { ScrollArea } from '../ui/scroll-area/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import type { QueryHistoryEntry } from '../../stores/query-history.svelte.js';
+import { queryHistory } from '../../stores/query-history.svelte.js';
+
+let {
+	visible = false,
+	onSelect,
+	onClose
+}: {
+	visible?: boolean;
+	onSelect?: (sql: string) => void;
+	onClose?: () => void;
+} = $props();
+
+let searchQuery = $state('');
+
+const filteredEntries = $derived(
+	searchQuery ? queryHistory.search(searchQuery) : queryHistory.entries
+);
+
+function formatTime(timestamp: number): string {
+	const date = new Date(timestamp);
+	const now = new Date();
+	const diffMs = now.getTime() - date.getTime();
+	const diffMins = Math.floor(diffMs / 60000);
+
+	if (diffMins < 1) return t('queryHistory.justNow');
+	if (diffMins < 60) return t('queryHistory.minsAgo', { n: diffMins });
+	const diffHours = Math.floor(diffMins / 60);
+	if (diffHours < 24) return t('queryHistory.hoursAgo', { n: diffHours });
+	const diffDays = Math.floor(diffHours / 24);
+	if (diffDays < 7) return t('queryHistory.daysAgo', { n: diffDays });
+
+	return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+function truncateSql(sql: string, maxLen = 120): string {
+	const oneLine = sql.replace(/\s+/g, ' ').trim();
+	if (oneLine.length <= maxLen) return oneLine;
+	return `${oneLine.slice(0, maxLen)}...`;
+}
+</script>
+
+{#if visible}
+	<!-- Mobile: absolute overlay; Desktop: flex sidebar -->
+	<div
+		class="absolute inset-y-0 end-0 z-10 flex w-72 flex-col overflow-hidden border-s border-zinc-200 bg-zinc-50 sm:relative sm:z-auto sm:shrink-0 dark:border-zinc-800 dark:bg-zinc-900"
+	>
+		<!-- Header -->
+		<div
+			class="flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800"
+		>
+			<div class="flex items-center gap-1.5">
+				<ClockIcon class="size-3.5 text-zinc-500" />
+				<h3 class="text-xs font-medium text-zinc-500 dark:text-zinc-400">
+					{t('queryHistory.title')}
+				</h3>
+			</div>
+			<div class="flex items-center gap-2">
+				{#if queryHistory.entries.length > 0}
+					<button
+						class="text-[10px] text-zinc-400 hover:text-red-500 dark:hover:text-red-400"
+						onclick={() => queryHistory.clear()}
+					>
+						{t('queryHistory.clearAll')}
+					</button>
+				{/if}
+				{#if onClose}
+					<button
+						class="rounded p-0.5 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 sm:hidden dark:hover:bg-zinc-700 dark:hover:text-zinc-300"
+						onclick={onClose}
+					>
+						<XIcon class="size-3.5" />
+					</button>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Search -->
+		<div class="border-b border-zinc-200 px-3 py-1.5 dark:border-zinc-800">
+			<div
+				class="flex items-center gap-1.5 rounded border border-zinc-200 bg-white px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800"
+			>
+				<SearchIcon class="size-3 shrink-0 text-zinc-400" />
+				<input
+					type="text"
+					class="w-full bg-transparent text-xs outline-none placeholder:text-zinc-400"
+					placeholder={t('queryHistory.searchPlaceholder')}
+					bind:value={searchQuery}
+				/>
+				{#if searchQuery}
+					<button
+						class="shrink-0 text-zinc-400 hover:text-zinc-600"
+						onclick={() => {
+							searchQuery = '';
+						}}
+					>
+						<XIcon class="size-3" />
+					</button>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Entries -->
+		<ScrollArea class="flex-1">
+			{#if filteredEntries.length === 0}
+				<div class="px-3 py-6 text-center text-xs text-zinc-400">
+					{searchQuery ? 'No matching queries' : 'No query history yet'}
+				</div>
+			{:else}
+				<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
+					{#each filteredEntries as entry (entry.id)}
+						<div
+							class="group flex w-full cursor-pointer flex-col gap-0.5 px-3 py-2 text-start hover:bg-zinc-100 dark:hover:bg-zinc-800"
+							role="button"
+							tabindex="0"
+							onclick={() => onSelect?.(entry.sql)}
+							onkeydown={(e) => {
+								if (e.key === 'Enter') onSelect?.(entry.sql);
+							}}
+						>
+							<div
+								class="font-mono text-[11px] leading-snug text-zinc-600 dark:text-zinc-300"
+							>
+								{truncateSql(entry.sql)}
+							</div>
+							<div class="flex items-center gap-2 text-[10px] text-zinc-400">
+								<span>{formatTime(entry.timestamp)}</span>
+								<span>{entry.durationMs}ms</span>
+								{#if entry.rowCount > 0}
+									<span>{entry.rowCount.toLocaleString()} rows</span>
+								{/if}
+								{#if entry.error}
+									<span class="text-red-400">error</span>
+								{/if}
+								<button
+									class="ms-auto opacity-0 group-hover:opacity-100"
+									onclick={(e) => {
+										e.stopPropagation();
+										queryHistory.remove(entry.id);
+									}}
+									title="Remove"
+								>
+									<TrashIcon class="size-3 text-zinc-400 hover:text-red-500" />
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</ScrollArea>
+	</div>
+{/if}

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

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