@walkthru-earth/objex 0.1.0

package/dist/components/editor/SqlEditor.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+import { format as formatSql } from 'sql-formatter';
+import { onDestroy } from 'svelte';
+import { Button } from '../ui/button/index.js';
+import TableGrid from '../viewers/TableGrid.svelte';
+import TableStatusBar from '../viewers/TableStatusBar.svelte';
+import { getQueryEngine, QueryCancelledError, type QueryHandle } from '../../query/index.js';
+import { queryHistory } from '../../stores/query-history.svelte.js';
+import CodeMirrorEditor from './CodeMirrorEditor.svelte';
+
+let {
+	connId = '',
+	initialSql = ''
+}: {
+	connId?: string;
+	initialSql?: string;
+} = $props();
+
+// svelte-ignore state_referenced_locally
+let queryText = $state(initialSql || 'SELECT 1 as hello');
+let columns = $state<string[]>([]);
+let rows = $state<Record<string, any>[]>([]);
+let error = $state<string | null>(null);
+let running = $state(false);
+let rowCount = $state(0);
+let executionTime = $state(0);
+let activeHandle: QueryHandle | null = null;
+
+onDestroy(() => {
+	activeHandle?.cancel();
+	activeHandle = null;
+});
+
+async function cancelQuery() {
+	if (activeHandle) {
+		await activeHandle.cancel();
+	}
+}
+
+async function runQuery() {
+	error = null;
+	columns = [];
+	rows = [];
+	running = true;
+
+	const start = performance.now();
+
+	try {
+		const engine = await getQueryEngine();
+
+		if (engine.queryCancellable) {
+			const handle = engine.queryCancellable(connId, queryText);
+			activeHandle = handle;
+			try {
+				const result = await handle.result;
+				executionTime = Math.round(performance.now() - start);
+				columns = result.columns;
+				rowCount = result.rowCount;
+				rows = result.rows ?? [];
+			} finally {
+				activeHandle = null;
+			}
+		} else {
+			const result = await engine.query(connId, queryText);
+			executionTime = Math.round(performance.now() - start);
+			columns = result.columns;
+			rowCount = result.rowCount;
+			rows = result.rows ?? [];
+		}
+
+		queryHistory.add({
+			sql: queryText,
+			timestamp: Date.now(),
+			durationMs: executionTime,
+			rowCount,
+			connectionId: connId || undefined
+		});
+	} catch (err) {
+		executionTime = Math.round(performance.now() - start);
+
+		if (err instanceof QueryCancelledError) {
+			error = null;
+		} else {
+			error = err instanceof Error ? err.message : String(err);
+			queryHistory.add({
+				sql: queryText,
+				timestamp: Date.now(),
+				durationMs: executionTime,
+				rowCount: 0,
+				error: error ?? undefined,
+				connectionId: connId || undefined
+			});
+		}
+	} finally {
+		activeHandle = null;
+		running = false;
+	}
+}
+
+function handleSqlChange(val: string) {
+	queryText = val;
+}
+
+function handleFormatSql() {
+	try {
+		queryText = formatSql(queryText, { language: 'sql' });
+	} catch {
+		// ignore format errors
+	}
+}
+</script>
+
+<div class="flex h-full flex-col">
+	<div class="flex items-center justify-between border-b border-zinc-200 px-4 py-2 dark:border-zinc-800">
+		<h2 class="text-sm font-medium text-foreground">SQL Console</h2>
+		<div class="flex items-center gap-2">
+			{#if rowCount > 0 && !running}
+				<span class="text-xs text-zinc-400">
+					{rowCount.toLocaleString()} rows in {executionTime}ms
+				</span>
+			{/if}
+			<Button size="sm" variant="outline" onclick={handleFormatSql} disabled={running}>
+				Format
+			</Button>
+			{#if running}
+				<Button size="sm" variant="destructive" onclick={cancelQuery}>
+					Cancel
+				</Button>
+			{:else}
+				<Button size="sm" onclick={runQuery}>
+					Run
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<div class="shrink-0 border-b border-zinc-200 p-2 dark:border-zinc-800">
+		<CodeMirrorEditor
+			value={queryText}
+			onChange={handleSqlChange}
+			onExecute={runQuery}
+			placeholder="Enter SQL query... (Ctrl+Enter to run)"
+			minHeight="80px"
+		/>
+	</div>
+
+	<div class="flex flex-1 flex-col overflow-hidden">
+		{#if running}
+			<div class="flex flex-1 items-center justify-center">
+				<p class="text-sm text-zinc-400">Running query...</p>
+			</div>
+		{:else if error}
+			<div class="flex-1 overflow-auto p-4">
+				<pre class="whitespace-pre-wrap rounded-md bg-red-50 p-3 font-mono text-sm text-red-600 dark:bg-red-950 dark:text-red-400">{error}</pre>
+			</div>
+		{:else if columns.length > 0}
+			<TableGrid {columns} {rows} totalRows={rowCount} />
+		{:else}
+			<div class="flex flex-1 items-center justify-center">
+				<p class="text-sm text-zinc-400">Press Ctrl+Enter or click Run to execute a query.</p>
+			</div>
+		{/if}
+	</div>
+
+	<TableStatusBar
+		rowCount={rowCount}
+		executionTimeMs={executionTime}
+		loading={running}
+		{columns}
+		{rows}
+		fileName="sql-query"
+	/>
+</div>

package/dist/components/editor/SqlEditor.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    connId?: string;
+    initialSql?: string;
+};
+declare const SqlEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type SqlEditor = ReturnType<typeof SqlEditor>;
+export default SqlEditor;

package/dist/components/editor/SqlResultBlock.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+import { Chart, registerables } from 'chart.js';
+import TableGrid from '../viewers/TableGrid.svelte';
+
+// Register Chart.js components
+Chart.register(...registerables);
+
+let {
+	columns,
+	rows,
+	queryName = '',
+	error = null
+}: {
+	columns: string[];
+	rows: Record<string, any>[];
+	queryName?: string;
+	error?: string | null;
+} = $props();
+
+let viewMode = $state<'table' | 'chart'>('table');
+let chartType = $state<'bar' | 'line' | 'pie'>('bar');
+let canvasEl: HTMLCanvasElement | undefined = $state();
+let chart: Chart | null = null;
+
+// Auto-detect chart type from columns
+const detectedChartType = $derived.by(() => {
+	if (columns.length < 2) return null;
+	const firstCol = columns[0];
+	const sampleValue = rows[0]?.[firstCol];
+
+	if (typeof sampleValue === 'string') {
+		return rows.length <= 10 ? 'pie' : 'bar';
+	}
+	if (
+		sampleValue instanceof Date ||
+		(typeof sampleValue === 'string' && !Number.isNaN(Date.parse(sampleValue)))
+	) {
+		return 'line';
+	}
+	return 'bar';
+});
+
+$effect(() => {
+	if (detectedChartType) chartType = detectedChartType;
+});
+
+$effect(() => {
+	if (viewMode === 'chart' && canvasEl && columns.length >= 2) {
+		renderChart();
+	}
+	return () => {
+		chart?.destroy();
+		chart = null;
+	};
+});
+
+function renderChart() {
+	if (!canvasEl) return;
+	chart?.destroy();
+
+	const labels = rows.map((r) => String(r[columns[0]]));
+	const data = rows.map((r) => Number(r[columns[1]]) || 0);
+
+	const colors = rows.map((_, i) => {
+		const hue = (i * 137) % 360;
+		return `hsl(${hue}, 65%, 55%)`;
+	});
+
+	chart = new Chart(canvasEl, {
+		type: chartType,
+		data: {
+			labels,
+			datasets: [
+				{
+					label: columns[1],
+					data,
+					backgroundColor: chartType === 'pie' ? colors : 'rgba(59, 130, 246, 0.6)',
+					borderColor: chartType === 'pie' ? colors : 'rgba(59, 130, 246, 1)',
+					borderWidth: 1
+				}
+			]
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: {
+				legend: {
+					display: chartType === 'pie',
+					labels: { color: '#9ca3af' }
+				}
+			},
+			scales:
+				chartType !== 'pie'
+					? {
+							x: { ticks: { color: '#9ca3af' }, grid: { color: '#374151' } },
+							y: { ticks: { color: '#9ca3af' }, grid: { color: '#374151' } }
+						}
+					: undefined
+		}
+	});
+}
+
+function downloadCsv() {
+	const header = columns.join(',');
+	const csvRows = rows.map((row) =>
+		columns
+			.map((col) => {
+				const val = row[col];
+				if (val === null || val === undefined) return '';
+				const str = String(val);
+				return str.includes(',') || str.includes('"') || str.includes('\n')
+					? `"${str.replace(/"/g, '""')}"`
+					: str;
+			})
+			.join(',')
+	);
+	const csv = [header, ...csvRows].join('\n');
+	const blob = new Blob([csv], { type: 'text/csv' });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = `${queryName || 'query'}.csv`;
+	a.click();
+	URL.revokeObjectURL(url);
+}
+</script>
+
+<div class="my-4 overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700">
+	{#if error}
+		<div class="bg-red-50 p-3 dark:bg-red-950">
+			<pre class="whitespace-pre-wrap font-mono text-xs text-red-600 dark:text-red-400">{error}</pre>
+		</div>
+	{:else}
+		<!-- Header -->
+		<div class="flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3 py-1.5 dark:border-zinc-700 dark:bg-zinc-800">
+			{#if queryName}
+				<span class="text-xs font-medium text-zinc-500 dark:text-zinc-400">{queryName}</span>
+			{/if}
+			<span class="text-xs text-zinc-400">{rows.length} rows</span>
+
+			<div class="ms-auto flex items-center gap-1">
+				<button
+					class="rounded px-2 py-0.5 text-xs"
+					class:bg-blue-100={viewMode === 'table'}
+					class:text-blue-700={viewMode === 'table'}
+					class:dark:bg-blue-900={viewMode === 'table'}
+					class:dark:text-blue-300={viewMode === 'table'}
+					class:text-zinc-400={viewMode !== 'table'}
+					onclick={() => (viewMode = 'table')}
+				>
+					Table
+				</button>
+				{#if columns.length >= 2}
+					<button
+						class="rounded px-2 py-0.5 text-xs"
+						class:bg-blue-100={viewMode === 'chart'}
+						class:text-blue-700={viewMode === 'chart'}
+						class:dark:bg-blue-900={viewMode === 'chart'}
+						class:dark:text-blue-300={viewMode === 'chart'}
+						class:text-zinc-400={viewMode !== 'chart'}
+						onclick={() => (viewMode = 'chart')}
+					>
+						Chart
+					</button>
+				{/if}
+
+				{#if viewMode === 'chart'}
+					<select
+						class="ms-2 rounded border border-zinc-200 bg-white px-1.5 py-0.5 text-xs dark:border-zinc-600 dark:bg-zinc-700"
+						bind:value={chartType}
+						onchange={() => renderChart()}
+					>
+						<option value="bar">Bar</option>
+						<option value="line">Line</option>
+						<option value="pie">Pie</option>
+					</select>
+				{/if}
+
+				<button
+					class="ms-2 rounded px-2 py-0.5 text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+					onclick={downloadCsv}
+				>
+					CSV
+				</button>
+			</div>
+		</div>
+
+		<!-- Content -->
+		<div style="max-height: 400px;" class="overflow-hidden">
+			{#if viewMode === 'table'}
+				<TableGrid {columns} {rows} />
+			{:else}
+				<div class="p-4" style="height: 300px;">
+					<canvas bind:this={canvasEl}></canvas>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/editor/SqlResultBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    columns: string[];
+    rows: Record<string, any>[];
+    queryName?: string;
+    error?: string | null;
+};
+declare const SqlResultBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type SqlResultBlock = ReturnType<typeof SqlResultBlock>;
+export default SqlResultBlock;