@walkthru-earth/objex 0.1.0

package/dist/components/browser/SearchBar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { Search, X } from '@lucide/svelte';
+import { Input } from '../ui/input/index.js';
+import { t } from '../../i18n/index.svelte.js';
+
+let { onFilter }: { onFilter: (query: string) => void } = $props();
+
+let query = $state('');
+
+function handleInput() {
+	onFilter(query);
+}
+
+function clearSearch() {
+	query = '';
+	onFilter('');
+}
+</script>
+
+<div class="relative flex items-center">
+	<label for="file-filter" class="sr-only">{t('searchBar.label')}</label>
+	<Search class="text-muted-foreground pointer-events-none absolute start-2.5 size-4" />
+	<Input
+		id="file-filter"
+		type="text"
+		placeholder={t('searchBar.placeholder')}
+		class="h-8 ps-8 pe-8 text-sm"
+		bind:value={query}
+		oninput={handleInput}
+	/>
+	{#if query.length > 0}
+		<button
+			class="text-muted-foreground hover:text-foreground absolute end-2.5 flex items-center justify-center"
+			onclick={clearSearch}
+			aria-label={t('searchBar.clear')}
+		>
+			<X class="size-3.5" />
+		</button>
+	{/if}
+</div>

package/dist/components/browser/SearchBar.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onFilter: (query: string) => void;
+};
+declare const SearchBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/dist/components/browser/UploadButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import Loader2Icon from '@lucide/svelte/icons/loader-2';
+import UploadIcon from '@lucide/svelte/icons/upload';
+import { Button } from '../ui/button/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { browser } from '../../stores/browser.svelte.js';
+
+let fileInput: HTMLInputElement;
+
+let uploading = $derived(browser.uploading);
+
+function handleClick() {
+	fileInput?.click();
+}
+
+async function handleFileSelect(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const fileList = input.files;
+	if (!fileList || fileList.length === 0) return;
+
+	const files: Array<{ name: string; data: Uint8Array; type?: string }> = [];
+
+	for (const file of fileList) {
+		const buffer = await file.arrayBuffer();
+		files.push({
+			name: file.name,
+			data: new Uint8Array(buffer),
+			type: file.type || undefined
+		});
+	}
+
+	try {
+		await browser.uploadFiles(files);
+	} catch (err) {
+		console.error('Upload failed:', err);
+	}
+
+	// Reset input so the same file can be re-selected
+	input.value = '';
+}
+</script>
+
+<input
+	bind:this={fileInput}
+	type="file"
+	multiple
+	class="hidden"
+	onchange={handleFileSelect}
+/>
+
+<Button
+	variant="outline"
+	size="sm"
+	class="h-7 gap-1.5 px-2 text-xs"
+	disabled={uploading}
+	onclick={handleClick}
+>
+	{#if uploading}
+		<Loader2Icon class="size-3.5 animate-spin" />
+		{t('upload.uploading')}
+	{:else}
+		<UploadIcon class="size-3.5" />
+		{t('upload.upload')}
+	{/if}
+</Button>

package/dist/components/browser/UploadButton.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const UploadButton: import("svelte").Component<Record<string, never>, {}, "">;
+type UploadButton = ReturnType<typeof UploadButton>;
+export default UploadButton;

package/dist/components/editor/CodeMirrorEditor.svelte

@@ -0,0 +1,404 @@
+<script lang="ts">
+import {
+	autocompletion,
+	type CompletionContext,
+	type CompletionResult,
+	closeBrackets,
+	closeBracketsKeymap
+} from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { StandardSQL, sql } from '@codemirror/lang-sql';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { oneDark } from '@codemirror/theme-one-dark';
+import {
+	EditorView,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	keymap,
+	lineNumbers,
+	placeholder as placeholderExt
+} from '@codemirror/view';
+import { onMount, untrack } from 'svelte';
+import { settings } from '../../stores/settings.svelte.js';
+
+let {
+	value = '',
+	onExecute,
+	onChange,
+	placeholder = 'Enter SQL query...',
+	readonly = false,
+	minHeight = '60px',
+	schemaColumns = [] as string[]
+}: {
+	value?: string;
+	onExecute?: () => void;
+	onChange?: (value: string) => void;
+	placeholder?: string;
+	readonly?: boolean;
+	minHeight?: string;
+	schemaColumns?: string[];
+} = $props();
+
+let editorContainer: HTMLDivElement | undefined = $state();
+
+// Use a plain variable — NOT $state — to avoid reactivity loops
+let view: EditorView | undefined;
+let currentTheme: 'light' | 'dark' = settings.resolved;
+
+// SQL keywords for autocompletion
+const SQL_KEYWORDS = [
+	'SELECT',
+	'FROM',
+	'WHERE',
+	'AND',
+	'OR',
+	'NOT',
+	'IN',
+	'IS',
+	'NULL',
+	'AS',
+	'ORDER',
+	'BY',
+	'ASC',
+	'DESC',
+	'LIMIT',
+	'OFFSET',
+	'GROUP',
+	'HAVING',
+	'JOIN',
+	'LEFT',
+	'RIGHT',
+	'INNER',
+	'OUTER',
+	'CROSS',
+	'ON',
+	'USING',
+	'UNION',
+	'ALL',
+	'INTERSECT',
+	'EXCEPT',
+	'DISTINCT',
+	'CASE',
+	'WHEN',
+	'THEN',
+	'ELSE',
+	'END',
+	'EXISTS',
+	'BETWEEN',
+	'LIKE',
+	'ILIKE',
+	'INSERT',
+	'INTO',
+	'VALUES',
+	'UPDATE',
+	'SET',
+	'DELETE',
+	'CREATE',
+	'TABLE',
+	'VIEW',
+	'INDEX',
+	'DROP',
+	'ALTER',
+	'ADD',
+	'COLUMN',
+	'WITH',
+	'RECURSIVE',
+	'OVER',
+	'PARTITION',
+	'WINDOW',
+	'ROWS',
+	'RANGE',
+	'UNBOUNDED',
+	'PRECEDING',
+	'FOLLOWING',
+	'CURRENT',
+	'ROW',
+	'EXCLUDE',
+	'FILTER',
+	'TRUE',
+	'FALSE',
+	'CAST',
+	'COALESCE',
+	'NULLIF',
+	'EXPLAIN',
+	'ANALYZE',
+	'PRAGMA',
+	'COPY',
+	'EXPORT',
+	'IMPORT'
+];
+
+// DuckDB functions commonly used with spatial / analytics
+const DUCKDB_FUNCTIONS = [
+	'COUNT',
+	'SUM',
+	'AVG',
+	'MIN',
+	'MAX',
+	'FIRST',
+	'LAST',
+	'LIST',
+	'STRING_AGG',
+	'ROW_NUMBER',
+	'RANK',
+	'DENSE_RANK',
+	'LAG',
+	'LEAD',
+	'NTILE',
+	'LENGTH',
+	'LOWER',
+	'UPPER',
+	'TRIM',
+	'LTRIM',
+	'RTRIM',
+	'REPLACE',
+	'SUBSTRING',
+	'CONCAT',
+	'STARTS_WITH',
+	'ENDS_WITH',
+	'CONTAINS',
+	'REGEXP_MATCHES',
+	'STRFTIME',
+	'DATE_PART',
+	'DATE_TRUNC',
+	'NOW',
+	'CURRENT_DATE',
+	'CURRENT_TIMESTAMP',
+	'ABS',
+	'CEIL',
+	'FLOOR',
+	'ROUND',
+	'POWER',
+	'SQRT',
+	'LOG',
+	'LN',
+	'MOD',
+	'ARRAY_AGG',
+	'UNNEST',
+	'GENERATE_SERIES',
+	'RANGE',
+	'JSON_EXTRACT',
+	'JSON_EXTRACT_STRING',
+	'JSON_TYPE',
+	'READ_PARQUET',
+	'READ_CSV',
+	'READ_JSON',
+	'READ_CSV_AUTO',
+	'ST_POINT',
+	'ST_GEOMFROMWKB',
+	'ST_GEOMFROMGEOJSON',
+	'ST_GEOMFROMTEXT',
+	'ST_ASWKB',
+	'ST_ASTEXT',
+	'ST_ASGEOJSON',
+	'ST_TRANSFORM',
+	'ST_AREA',
+	'ST_LENGTH',
+	'ST_DISTANCE',
+	'ST_CENTROID',
+	'ST_BUFFER',
+	'ST_INTERSECTS',
+	'ST_CONTAINS',
+	'ST_WITHIN',
+	'ST_INTERSECTION',
+	'ST_UNION',
+	'ST_ENVELOPE',
+	'ST_X',
+	'ST_Y',
+	'ST_SRID',
+	'TYPEOF',
+	'TRY_CAST',
+	'IF',
+	'IFN',
+	'GREATEST',
+	'LEAST',
+	'LIST_AGGREGATE',
+	'LIST_SORT',
+	'LIST_DISTINCT',
+	'LIST_CONTAINS'
+];
+
+function sqlCompletions(context: CompletionContext): CompletionResult | null {
+	const word = context.matchBefore(/[\w.]*/);
+	if (!word || (word.from === word.to && !context.explicit)) return null;
+
+	const input = word.text.toLowerCase();
+	const options: { label: string; type: string; boost?: number }[] = [];
+
+	// Column completions get highest priority
+	for (const col of schemaColumns) {
+		if (col.toLowerCase().startsWith(input)) {
+			options.push({ label: col, type: 'property', boost: 2 });
+		}
+	}
+
+	// SQL keywords
+	for (const kw of SQL_KEYWORDS) {
+		if (kw.toLowerCase().startsWith(input)) {
+			options.push({ label: kw, type: 'keyword', boost: 1 });
+		}
+	}
+
+	// DuckDB functions
+	for (const fn of DUCKDB_FUNCTIONS) {
+		if (fn.toLowerCase().startsWith(input)) {
+			options.push({ label: fn, type: 'function', boost: 0 });
+		}
+	}
+
+	if (options.length === 0) return null;
+	return { from: word.from, options };
+}
+
+function createExtensions() {
+	const dark = settings.resolved === 'dark';
+	const exts = [
+		lineNumbers(),
+		EditorView.lineWrapping,
+		highlightActiveLine(),
+		highlightActiveLineGutter(),
+		history(),
+		bracketMatching(),
+		closeBrackets(),
+		syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+		sql({ dialect: StandardSQL }),
+		autocompletion({
+			override: [sqlCompletions],
+			defaultKeymap: true,
+			icons: true
+		}),
+		placeholderExt(placeholder),
+		keymap.of([
+			{
+				key: 'Mod-Enter',
+				run: () => {
+					onExecute?.();
+					return true;
+				}
+			},
+			...closeBracketsKeymap,
+			...defaultKeymap,
+			...historyKeymap
+		]),
+		EditorView.updateListener.of((update) => {
+			if (update.docChanged) {
+				onChange?.(update.state.doc.toString());
+			}
+		}),
+		EditorView.theme({
+			'&': { minHeight, maxHeight: '40vh' },
+			'.cm-scroller': { overflow: 'auto', minHeight },
+			'.cm-content': {
+				fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+				fontSize: '12px',
+				minHeight
+			},
+			'.cm-gutters': { fontSize: '11px', minHeight }
+		}),
+		EditorState.readOnly.of(readonly)
+	];
+
+	if (dark) {
+		exts.push(oneDark);
+	}
+
+	return exts;
+}
+
+function createView(doc: string) {
+	if (!editorContainer) return;
+	view?.destroy();
+	view = undefined;
+	try {
+		view = new EditorView({
+			state: EditorState.create({
+				doc,
+				extensions: createExtensions()
+			}),
+			parent: editorContainer
+		});
+		currentTheme = settings.resolved;
+	} catch (err) {
+		console.warn('[CodeMirrorEditor] Failed to create editor:', err);
+		// Retry once with minimal extensions (handles stale module instances during HMR)
+		try {
+			view = new EditorView({
+				state: EditorState.create({
+					doc,
+					extensions: [
+						EditorView.updateListener.of((update) => {
+							if (update.docChanged) {
+								onChange?.(update.state.doc.toString());
+							}
+						}),
+						EditorView.theme({
+							'&': { minHeight, maxHeight: '200px' },
+							'.cm-scroller': { overflow: 'auto', minHeight },
+							'.cm-content': {
+								fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+								fontSize: '12px',
+								minHeight
+							}
+						}),
+						placeholderExt(placeholder)
+					]
+				}),
+				parent: editorContainer
+			});
+		} catch {
+			// Give up — the editor won't render but the app shouldn't crash
+		}
+	}
+}
+
+onMount(() => {
+	createView(value);
+	return () => {
+		view?.destroy();
+		view = undefined;
+	};
+});
+
+// Sync external value changes into editor
+$effect(() => {
+	const v = value;
+	untrack(() => {
+		if (view && v !== view.state.doc.toString()) {
+			view.dispatch({
+				changes: {
+					from: 0,
+					to: view.state.doc.length,
+					insert: v
+				}
+			});
+		}
+	});
+});
+
+// Recreate editor when theme changes
+$effect(() => {
+	const newTheme = settings.resolved;
+	untrack(() => {
+		if (view && editorContainer && newTheme !== currentTheme) {
+			const currentDoc = view.state.doc.toString();
+			createView(currentDoc);
+		}
+	});
+});
+</script>
+
+<div bind:this={editorContainer} dir="ltr" class="codemirror-wrapper resize-y overflow-hidden rounded border border-zinc-200 dark:border-zinc-700"></div>
+
+<style>
+	.codemirror-wrapper :global(.cm-editor) {
+		outline: none;
+	}
+	.codemirror-wrapper :global(.cm-editor.cm-focused) {
+		outline: none;
+	}
+	/* Autocomplete tooltip */
+	.codemirror-wrapper :global(.cm-tooltip-autocomplete) {
+		max-width: min(90vw, 300px);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    value?: string;
+    onExecute?: () => void;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    readonly?: boolean;
+    minHeight?: string;
+    schemaColumns?: string[];
+};
+declare const CodeMirrorEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeMirrorEditor = ReturnType<typeof CodeMirrorEditor>;
+export default CodeMirrorEditor;

package/dist/components/editor/MilkdownEditor.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { defaultValueCtx, Editor, rootCtx } from '@milkdown/kit/core';
+import { history } from '@milkdown/kit/plugin/history';
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
+import { commonmark } from '@milkdown/kit/preset/commonmark';
+import { gfm } from '@milkdown/kit/preset/gfm';
+import { nord } from '@milkdown/theme-nord';
+import { getDir } from '../../i18n/index.svelte.js';
+import '@milkdown/theme-nord/style.css';
+import { onDestroy } from 'svelte';
+
+let {
+	initialValue = '',
+	onSave,
+	onChange
+}: {
+	initialValue?: string;
+	onSave?: (markdown: string) => void;
+	onChange?: (markdown: string) => void;
+} = $props();
+
+let editorEl: HTMLDivElement | undefined = $state();
+let editor: Editor | null = null;
+// svelte-ignore state_referenced_locally
+let currentValue = $state(initialValue);
+
+$effect(() => {
+	if (editorEl) initEditor();
+});
+
+async function initEditor() {
+	if (!editorEl || editor) return;
+
+	editor = await Editor.make()
+		.config((ctx) => {
+			ctx.set(rootCtx, editorEl!);
+			ctx.set(defaultValueCtx, initialValue);
+
+			ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
+				currentValue = markdown;
+				onChange?.(markdown);
+			});
+		})
+		.config(nord)
+		.use(commonmark)
+		.use(gfm)
+		.use(history)
+		.use(listener)
+		.create();
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+		e.preventDefault();
+		onSave?.(currentValue);
+	}
+}
+
+onDestroy(() => {
+	editor?.destroy();
+	editor = null;
+});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	dir={getDir()}
+	class="milkdown-wrapper h-full overflow-auto"
+	bind:this={editorEl}
+	onkeydown={handleKeydown}
+></div>
+
+<style>
+	.milkdown-wrapper :global(.milkdown) {
+		padding: 1.5rem;
+		min-height: 100%;
+	}
+
+	.milkdown-wrapper :global(.milkdown .editor) {
+		outline: none;
+	}
+
+	.milkdown-wrapper :global(.milkdown p) {
+		margin: 0.5em 0;
+	}
+
+	.milkdown-wrapper :global(.milkdown pre) {
+		background: #1e1e2e;
+		border-radius: 0.375rem;
+		padding: 0.75rem;
+		font-size: 0.8125rem;
+		overflow-x: auto;
+	}
+
+	.milkdown-wrapper :global(.milkdown code) {
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import '@milkdown/theme-nord/style.css';
+type $$ComponentProps = {
+    initialValue?: string;
+    onSave?: (markdown: string) => void;
+    onChange?: (markdown: string) => void;
+};
+declare const MilkdownEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type MilkdownEditor = ReturnType<typeof MilkdownEditor>;
+export default MilkdownEditor;