@walkthru-earth/objex 0.1.0

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

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

package/dist/components/viewers/CopcViewer.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { Tab } from '../../types';
+import { buildHttpsUrl } from '../../utils/url.js';
+
+let { tab }: { tab: Tab } = $props();
+
+const fileUrl = $derived(tab.source === 'url' ? tab.path : (buildHttpsUrl(tab) ?? ''));
+const viewerUrl = $derived(
+	fileUrl ? `https://viewer.copc.io/?copc=${encodeURIComponent(fileUrl)}` : ''
+);
+</script>
+
+{#if viewerUrl}
+	<iframe
+		src={viewerUrl}
+		title={tab.name}
+		class="h-full w-full border-0"
+		allow="fullscreen"
+		sandbox="allow-scripts allow-same-origin allow-popups"
+	></iframe>
+{:else}
+	<div class="flex h-full items-center justify-center text-sm text-muted-foreground">
+		Cannot resolve file URL for point cloud viewer.
+	</div>
+{/if}

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

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

package/dist/components/viewers/DatabaseViewer.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+import { onDestroy } from 'svelte';
+import SqlEditor from '../editor/SqlEditor.svelte';
+import { Badge } from '../ui/badge/index.js';
+import { Button } from '../ui/button/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { getQueryEngine } from '../../query/index.js';
+import { getAdapter } from '../../storage/index.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
+import type { Tab } from '../../types';
+import TableGrid from './TableGrid.svelte';
+
+let { tab }: { tab: Tab } = $props();
+
+let loading = $state(true);
+let error = $state<string | null>(null);
+let tables = $state<string[]>([]);
+let selectedTable = $state<string | null>(null);
+let columns = $state<string[]>([]);
+let rows = $state<Record<string, any>[]>([]);
+let tableLoading = $state(false);
+let showSql = $state(false);
+
+$effect(() => {
+	if (!tab) return;
+	loadDatabase();
+});
+
+function cleanup() {
+	tables = [];
+	rows = [];
+	columns = [];
+	selectedTable = null;
+}
+
+$effect(() => {
+	if (!tab) return;
+	const unregister = tabResources.register(tab.id, cleanup);
+	return unregister;
+});
+
+onDestroy(cleanup);
+
+async function loadDatabase() {
+	loading = true;
+	error = null;
+
+	try {
+		// For DuckDB/SQLite files, we load them into DuckDB-WASM
+		const engine = await getQueryEngine();
+		const connId = tab.connectionId ?? '';
+
+		// Register the database file with DuckDB
+		// For .duckdb files, attach directly
+		// For .sqlite files, use sqlite scanner
+		const ext = tab.extension.toLowerCase();
+
+		if (ext === 'duckdb') {
+			// DuckDB native file — query via path
+			const result = await engine.query(
+				connId,
+				`ATTACH '${tab.path}' AS db (READ_ONLY); SHOW TABLES;`
+			);
+			tables = (result.rows ?? []).map((row) => row.name).filter((name): name is string => !!name);
+		} else {
+			// SQLite via DuckDB's sqlite scanner
+			const result = await engine.query(
+				connId,
+				`INSTALL sqlite; LOAD sqlite; SELECT name FROM sqlite_master WHERE type='table' ORDER BY name;`
+			);
+			tables = (result.rows ?? []).map((row) => row.name).filter((name): name is string => !!name);
+		}
+	} catch (err) {
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+async function selectTable(tableName: string) {
+	selectedTable = tableName;
+	tableLoading = true;
+
+	try {
+		const engine = await getQueryEngine();
+		const connId = tab.connectionId ?? '';
+		const result = await engine.query(connId, `SELECT * FROM "${tableName}" LIMIT 1000`);
+		columns = result.columns;
+		rows = result.rows ?? [];
+	} catch (err) {
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		tableLoading = false;
+	}
+}
+</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('database.badge')}</Badge>
+		{#if tables.length > 0}
+			<span class="hidden text-xs text-zinc-400 sm:inline">{tables.length} {t('database.tables')}</span>
+		{/if}
+
+		<div class="ms-auto">
+			<Button
+				variant="ghost"
+				size="sm"
+				class="h-7 px-2 text-xs {showSql ? 'text-blue-500' : ''}"
+				onclick={() => (showSql = !showSql)}
+			>
+				{t('database.sql')}
+			</Button>
+		</div>
+	</div>
+
+	<div class="flex flex-1 overflow-hidden">
+		{#if loading}
+			<div class="flex flex-1 items-center justify-center">
+				<p class="text-sm text-zinc-400">{t('database.loading')}</p>
+			</div>
+		{:else if error}
+			<div class="flex flex-1 items-center justify-center">
+				<p class="text-sm text-red-400">{error}</p>
+			</div>
+		{:else}
+			<!-- Table list -->
+			<div
+				class="w-56 shrink-0 overflow-auto border-e border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"
+			>
+				<div class="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">{t('database.tablesHeader')}</h3>
+				</div>
+				{#each tables as tableName}
+					<button
+						class="flex w-full items-center px-3 py-1.5 text-start text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800"
+						class:bg-blue-50={selectedTable === tableName}
+						class:dark:bg-blue-950={selectedTable === tableName}
+						onclick={() => selectTable(tableName)}
+					>
+						<span class="text-zinc-700 dark:text-zinc-300">{tableName}</span>
+					</button>
+				{/each}
+			</div>
+
+			<!-- Content -->
+			<div class="flex flex-1 flex-col overflow-hidden">
+				{#if showSql}
+					<div class="flex-1">
+						<SqlEditor connId={tab.connectionId ?? ''} />
+					</div>
+				{:else if tableLoading}
+					<div class="flex flex-1 items-center justify-center">
+						<p class="text-sm text-zinc-400">{t('database.loadingTable')}</p>
+					</div>
+				{:else if selectedTable && columns.length > 0}
+					<TableGrid {columns} {rows} />
+				{:else}
+					<div class="flex flex-1 items-center justify-center">
+						<p class="text-sm text-zinc-400">{t('database.selectTable')}</p>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

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

package/dist/components/viewers/FileInfo.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+import { t } from '../../i18n/index.svelte.js';
+import type { SchemaField } from '../../query/engine';
+import type { ProgressEntry } from './LoadProgress.svelte';
+
+let {
+	entries = [],
+	schema = [],
+	parquetUrl = ''
+}: {
+	entries?: ProgressEntry[];
+	schema?: SchemaField[];
+	parquetUrl?: string;
+} = $props();
+
+const parquetTableSrc = $derived(
+	parquetUrl
+		? `https://source-cooperative.github.io/parquet-table/?iframe=true&url=${encodeURIComponent(parquetUrl)}`
+		: ''
+);
+
+// Separate entries into groups for display
+const geoLabels = $derived(
+	new Set([t('progress.geometry'), t('progress.encoding'), t('progress.crs'), t('progress.bounds')])
+);
+const fileEntries = $derived(entries.filter((e) => !geoLabels.has(e.label)));
+const geoEntries = $derived(entries.filter((e) => geoLabels.has(e.label)));
+</script>
+
+<div class="flex flex-1 overflow-auto">
+	<div class="mx-auto w-full space-y-5 p-4 sm:p-6">
+		<!-- File Metadata -->
+		{#if fileEntries.length > 0}
+			<section class="mx-auto max-w-2xl">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+					{t('fileInfo.fileMetadata')}
+				</h3>
+				<div
+					class="mt-2 rounded-lg border border-zinc-200/70 bg-zinc-50/50 dark:border-zinc-800/70 dark:bg-zinc-900/30"
+				>
+					<div class="divide-y divide-zinc-200/50 dark:divide-zinc-800/50">
+						{#each fileEntries as entry}
+							<div class="flex items-start gap-3 px-3.5 py-2">
+								<span
+									class="w-[5.5rem] shrink-0 text-xs text-zinc-400 dark:text-zinc-500"
+								>
+									{entry.label}
+								</span>
+								<div class="min-w-0 flex-1">
+									<span class="text-xs font-medium text-zinc-700 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>
+			</section>
+		{/if}
+
+		<!-- Geometry -->
+		{#if geoEntries.length > 0}
+			<section class="mx-auto max-w-2xl">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+					{t('fileInfo.geometry')}
+				</h3>
+				<div
+					class="mt-2 rounded-lg border border-zinc-200/70 bg-zinc-50/50 dark:border-zinc-800/70 dark:bg-zinc-900/30"
+				>
+					<div class="divide-y divide-zinc-200/50 dark:divide-zinc-800/50">
+						{#each geoEntries as entry}
+							<div class="flex items-start gap-3 px-3.5 py-2">
+								<span
+									class="w-[5.5rem] shrink-0 text-xs text-zinc-400 dark:text-zinc-500"
+								>
+									{entry.label}
+								</span>
+								<div class="min-w-0 flex-1">
+									<span class="text-xs font-medium text-zinc-700 dark:text-zinc-300">
+										{entry.value}
+									</span>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</section>
+		{/if}
+
+		<!-- Schema -->
+		{#if schema.length > 0}
+			<section class="mx-auto max-w-2xl">
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+					{t('fileInfo.schema')} ({schema.length})
+				</h3>
+				<div
+					class="mt-2 overflow-hidden rounded-lg border border-zinc-200/70 dark:border-zinc-800/70"
+				>
+					<table class="w-full text-xs">
+						<thead>
+							<tr class="bg-zinc-100/80 dark:bg-zinc-800/50">
+								<th
+									class="w-10 px-3 py-1.5 text-left font-medium text-zinc-400 dark:text-zinc-500"
+								>
+									#
+								</th>
+								<th
+									class="px-3 py-1.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
+								>
+									{t('fileInfo.column')}
+								</th>
+								<th
+									class="px-3 py-1.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
+								>
+									{t('fileInfo.type')}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each schema as field, i}
+								<tr
+									class="border-t border-zinc-100/80 dark:border-zinc-800/50 {i % 2 === 0 ? 'bg-zinc-50/50 dark:bg-zinc-900/20' : ''}"
+								>
+									<td class="px-3 py-1.5 tabular-nums text-zinc-400 dark:text-zinc-600">
+										{i + 1}
+									</td>
+									<td class="px-3 py-1.5 font-mono text-zinc-700 dark:text-zinc-300">
+										{field.name}
+									</td>
+									<td class="px-3 py-1.5 font-mono text-zinc-500 dark:text-zinc-400">
+										{field.type}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</section>
+		{/if}
+
+		<!-- Parquet Table Explorer -->
+		{#if parquetTableSrc}
+			<section>
+				<h3 class="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
+					{t('fileInfo.parquetExplorer')}
+				</h3>
+				<div
+					class="mt-2 overflow-hidden rounded-lg border border-zinc-200/70 dark:border-zinc-800/70"
+				>
+					<iframe
+						src={parquetTableSrc}
+						title="Parquet Table Explorer"
+						class="h-[500px] w-full border-0"
+						sandbox="allow-scripts allow-same-origin allow-popups"
+						loading="lazy"
+					></iframe>
+				</div>
+			</section>
+		{/if}
+
+		{#if entries.length === 0 && schema.length === 0}
+			<div class="flex flex-1 items-center justify-center py-16">
+				<p class="text-sm text-zinc-400">{t('fileInfo.noMetadata')}</p>
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { SchemaField } from '../../query/engine';
+import type { ProgressEntry } from './LoadProgress.svelte';
+type $$ComponentProps = {
+    entries?: ProgressEntry[];
+    schema?: SchemaField[];
+    parquetUrl?: string;
+};
+declare const FileInfo: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileInfo = ReturnType<typeof FileInfo>;
+export default FileInfo;