@walkthru-earth/objex 1.3.1 → 1.5.0

package/LICENSE

@@ -1,3 +1,8 @@
+Copyright (c) 2026 walkthru.earth <hi@walkthru.earth>
+
+This work is licensed under the Creative Commons Attribution 4.0 International License.
+To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
+
 Attribution 4.0 International
 
 =======================================================================

package/README.md

@@ -5,7 +5,7 @@
 [![CI](https://github.com/walkthru-earth/objex/actions/workflows/ci.yml/badge.svg)](https://github.com/walkthru-earth/objex/actions/workflows/ci.yml)
 [![License: CC BY 4.0](https://img.shields.io/badge/license-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)
 
-Cloud storage explorer that runs entirely in the browser. Connect to S3, Azure, GCS, R2, MinIO -- browse files, query data with SQL, and visualize geospatial formats on interactive maps. No backend required.
+Cloud storage explorer that runs entirely in the browser. Connect to S3, Azure, GCS, R2, MinIO - browse files, query data with SQL, and visualize geospatial formats on interactive maps. No backend required.
 
 ```mermaid
 graph LR
@@ -22,9 +22,10 @@ graph LR
 - **Query** Parquet, CSV, JSONL with SQL (DuckDB-WASM, cancellable queries)
 - **Visualize** GeoParquet, GeoJSON, COG, PMTiles, FlatGeobuf, Zarr (incl. GeoZarr), STAC catalogs, and stac-geoparquet on maps (MapLibre + deck.gl)
 - **View** 100+ file formats: code (30+ languages), Jupyter notebooks, PDF, 3D models, archives, media
-- **Share** via URL -- `?url=<storage-url>#<view>` encodes full viewer state
-- **i18n** -- English + Arabic with automatic RTL layout
-- **Zero backend** -- everything runs client-side
+- **Share** via URL - `?url=<storage-url>#<view>` encodes full viewer state
+- **Configure** without a rebuild - bundled `config.json` (or remote `?config=<url>`) sets defaults, basemaps, and seed connections, with an in-app settings panel
+- **i18n** - English + Arabic with automatic RTL layout
+- **Zero backend** - everything runs client-side
 
 ## Supported Formats
 
@@ -47,7 +48,7 @@ graph LR
 
 Two packages are published for downstream use:
 
-### `@walkthru-earth/objex` -- Full Svelte 5 Library
+### `@walkthru-earth/objex` - Full Svelte 5 Library
 
 Components, stores, and utilities for building geospatial storage explorers.
 
@@ -58,15 +59,12 @@ npm install @walkthru-earth/objex
 ```ts
 import { parseStorageUrl, formatFileSize } from '@walkthru-earth/objex';
 import { UrlAdapter } from '@walkthru-earth/objex/storage';
-import { parseWKB } from '@walkthru-earth/objex/utils/wkb';
-import { buildGeoArrowTables } from '@walkthru-earth/objex/utils/geoarrow';
-import { readParquetMetadata } from '@walkthru-earth/objex/utils/parquet-metadata';
 import { getFileTypeInfo } from '@walkthru-earth/objex/file-icons';
 ```
 
-Requires `svelte ^5` and `@sveltejs/kit ^2` as peer dependencies. Heavy deps (DuckDB, deck.gl, MapLibre, Arrow, hyparquet, hyparquet-compressors, yaml) are optional peers -- only install what you need.
+Requires `svelte ^5` and `@sveltejs/kit ^2` as peer dependencies. Heavy deps (DuckDB, deck.gl, MapLibre, Arrow, hyparquet, hyparquet-compressors, yaml) are optional peers - only install what you need.
 
-### `@walkthru-earth/objex-utils` -- Pure TypeScript Utilities
+### `@walkthru-earth/objex-utils` - Pure TypeScript Utilities
 
 Zero Svelte dependency. Works with any JS framework or Node.js.
 
@@ -95,20 +93,30 @@ Full per-module reference docs: [`packages/objex-utils/docs/`](packages/objex-ut
 
 | Export path | What |
 |-------------|------|
-| `@walkthru-earth/objex` | All types, utils, storage, query engine |
+| `@walkthru-earth/objex` | All types, pure utils, storage, query engine |
 | `./storage` | `StorageAdapter`, `UrlAdapter` |
 | `./query` | `QueryEngine`, `QueryCancelledError` |
-| `./utils/wkb` | `parseWKB`, `toBinary`, `findGeoColumn` |
-| `./utils/geoarrow` | `buildGeoArrowTables`, `normalizeGeomType` |
-| `./utils/storage-url` | `parseStorageUrl`, `looksLikeUrl` |
-| `./utils/parquet-metadata` | `readParquetMetadata`, `extractEpsgFromGeoMeta` |
-| `./utils/format` | `formatFileSize`, `formatDate`, `formatValue`, `getFileExtension`, `jsonReplacerBigInt` |
-| `./utils/hex` | `generateHexDump` |
-| `./utils/column-types` | `classifyType`, `typeColor`, `typeBadgeClass` |
 | `./file-icons` | `getFileTypeInfo`, `getDuckDbReadFn`, `getViewerKind` |
 | `./types` | `FileEntry`, `Connection`, `Tab`, `WriteResult`, `Theme` |
 
-The main export also includes `copyToClipboard`, `handleLoadError`, the stac-geoparquet helpers (`isStacGeoparquetSchema`, `stacRowToItem`, `flattenStacBbox`, `pickStacPrimaryAsset`, `resolveStacAssetHref`), and shared constants (`WGS84_CODES`, `STORAGE_KEYS`, `DEFAULT_TARGET_CRS`, etc.).
+The pure utilities live in `@walkthru-earth/objex-utils` and are also re-exported from the package root, so `parseStorageUrl`, `parseWKB`, `buildGeoArrowTables`, `readParquetMetadata`, `formatFileSize`, `generateHexDump`, `classifyType`, and the rest are importable straight from `@walkthru-earth/objex`. The root export also includes `copyToClipboard`, `handleLoadError`, the stac-geoparquet helpers (`isStacGeoparquetSchema`, `stacRowToItem`, `flattenStacBbox`, `pickStacPrimaryAsset`, `resolveStacAssetHref`), and shared constants (`WGS84_CODES`, `STORAGE_KEYS`, `DEFAULT_TARGET_CRS`, etc.).
+
+## Configuration
+
+objex reads a bundled `static/config.json` at startup, so a host can customize the app without rebuilding. Pass `?config=<url>` to load a remote config that overrides the bundled one.
+
+`config.json` sets the default theme and language, query and mosaic row limits, the basemap list with a per-theme default basemap, and seed connections that load on first visit. The `ui` block toggles whether the connection rail, file tree, and settings panel are shown.
+
+Several of these are also reachable as query params, handy for embedding and deep links.
+
+| Param | Effect |
+|-------|--------|
+| `?config=<url>` | Load a remote `config.json` instead of the bundled one |
+| `?panel=settings` | Open the settings panel on load |
+| `?rail=hide` / `?rail=show` | Hide or show the connection rail |
+| `?tree=hide` / `?tree=show` | Hide or show the file tree |
+
+Users can change theme, language, query limit, and basemap from the in-app settings panel (gear icon). Their changes persist locally and take precedence over config defaults, while settings they never touched keep following the config.
 
 ## Quick Start (Development)
 
@@ -123,4 +131,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, architecture, geos
 
 ## License
 
-[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) -- hi@walkthru.earth
+[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) - hi@walkthru.earth

package/dist/components/browser/FileTreeSidebar.svelte

@@ -9,6 +9,7 @@ import LinkIcon from '@lucide/svelte/icons/link';
 import Loader2Icon from '@lucide/svelte/icons/loader-2';
 import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
 import SearchIcon from '@lucide/svelte/icons/search';
+import { getNativeScheme } from '@walkthru-earth/objex-utils';
 import * as ContextMenu from '../ui/context-menu/index.js';
 import { VIEWER_DIR_EXTENSIONS } from '../../constants.js';
 import FileTypeIcon from '../../file-icons/FileTypeIcon.svelte';
@@ -17,7 +18,7 @@ import { getAdapter } from '../../storage/index.js';
 import { browser } from '../../stores/browser.svelte.js';
 import { tabs } from '../../stores/tabs.svelte.js';
 import type { Connection, FileEntry } from '../../types.js';
-import { getNativeScheme } from '../../utils/cloud-url.js';
+import { buildHttpsUrlForConnection } from '../../utils/signed-url.js';
 import { syncUrlParam } from '../../utils/url-state.js';
 import { detectZarrMarkers } from '../../utils/zarr.js';
 import { openZarrTab } from '../../utils/zarr-tab.js';
@@ -48,6 +49,8 @@ let rootLoading = $state(true);
 let rootLoadingMore = $state(false);
 let rootContinuationToken = $state<string | undefined>();
 let rootHasMore = $state(false);
+/** Set when the root listing fails: 'cors' for a blocked fetch, 'generic' otherwise. */
+let rootError = $state<'cors' | 'generic' | null>(null);
 let filterQuery = $state('');
 let scrollEl = $state<HTMLElement>();
 /** Paths of directories detected as Zarr stores (by marker files in children). */
@@ -222,15 +225,9 @@ function handleChevronClick(e: MouseEvent, node: TreeNode) {
 
 // ---------- URL builders ----------
 
-/** Build HTTPS URL for a file path. */
+/** Build a provider-aware HTTPS URL for a file path (percent-encoded for copy). */
 function buildHttpUrl(path: string): string {
-	const conn = connection;
-	if (conn.endpoint) {
-		const base = conn.endpoint.replace(/\/$/, '');
-		return `${base}/${conn.bucket}/${encodeKeyPath(path)}`;
-	}
-	// Default AWS S3
-	return `https://s3.${conn.region}.amazonaws.com/${conn.bucket}/${encodeKeyPath(path)}`;
+	return buildHttpsUrlForConnection(connection, path, { encode: true });
 }
 
 /** Build provider-native URI (s3://, gs://, r2://, az://). */
@@ -240,14 +237,8 @@ function buildNativeUri(path: string): string {
 	return `${scheme}://${conn.bucket}/${path}`;
 }
 
-// getNativeScheme imported from $lib/utils/url.js
-
-function encodeKeyPath(key: string): string {
-	return key
-		.split('/')
-		.map((s) => encodeURIComponent(s))
-		.join('/');
-}
+// getNativeScheme imported from @walkthru-earth/objex-utils (cloud-url.ts)
+// buildHttpsUrlForConnection imported from utils/signed-url (provider-aware base)
 
 // ---------- Clipboard ----------
 
@@ -368,6 +359,19 @@ async function expandToPath(path: string) {
 
 // ---------- Root loading ----------
 
+/**
+ * Browsers collapse a CORS block and a true network failure into the same
+ * opaque `TypeError` ('Failed to fetch' in Chrome, 'NetworkError when
+ * attempting to fetch resource' in Firefox, 'Load failed' in Safari), so this
+ * can't tell them apart. For a cloud bucket the dominant cause is a missing
+ * browser CORS policy, so we lead the message with that.
+ */
+function isLikelyCorsError(err: unknown): boolean {
+	const e = err as { name?: string; message?: string } | null;
+	if (!e || e.name !== 'TypeError' || typeof e.message !== 'string') return false;
+	return /failed to fetch|networkerror|load failed/i.test(e.message);
+}
+
 // Load root entries when connection changes
 $effect(() => {
 	const _connId = connection.id;
@@ -376,6 +380,7 @@ $effect(() => {
 
 async function loadRoot() {
 	rootLoading = true;
+	rootError = null;
 	rootContinuationToken = undefined;
 	rootHasMore = false;
 	detectedZarrPaths = new Set();
@@ -399,6 +404,7 @@ async function loadRoot() {
 		}
 	} catch (err) {
 		console.error('[FileTree] Error loading root:', err);
+		rootError = isLikelyCorsError(err) ? 'cors' : 'generic';
 	} finally {
 		rootLoading = false;
 	}
@@ -456,6 +462,15 @@ async function loadMoreRoot() {
 			<div class="flex items-center justify-center py-8">
 				<Loader2Icon class="size-4 animate-spin text-muted-foreground" />
 			</div>
+		{:else if rootError}
+			<div class="space-y-1.5 px-3 py-6 text-center text-xs">
+				<p class="font-medium text-foreground">
+					{rootError === 'cors' ? t('fileTree.corsError') : t('fileTree.loadError')}
+				</p>
+				<p class="text-muted-foreground">
+					{rootError === 'cors' ? t('fileTree.corsHint') : t('fileTree.loadErrorHint')}
+				</p>
+			</div>
 		{:else if filteredNodes.length === 0}
 			<div class="px-3 py-6 text-center text-xs text-muted-foreground">
 				{filterQuery ? t('fileTree.noMatch') : t('fileTree.emptyBucket')}

package/dist/components/layout/AboutSheet.svelte

@@ -9,7 +9,6 @@ declare const __THIRD_PARTY_LICENSES__: {
 <script lang="ts">
 import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-import GithubIcon from '@lucide/svelte/icons/github';
 import {
 	Sheet,
 	SheetContent,
@@ -75,7 +74,11 @@ $effect(() => {
 				rel="noopener noreferrer"
 				class="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
 			>
-				<GithubIcon class="size-4" />
+				<svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+					<path
+						d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.279-.01-1.02-.015-2.002-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.333-1.724-1.333-1.724-1.089-.731.083-.716.083-.716 1.205.082 1.84 1.215 1.84 1.215 1.07 1.797 2.807 1.278 3.492.977.108-.76.42-1.279.762-1.573-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.295-.54-1.494.105-3.116 0 0 1.005-.31 3.3 1.209.957-.262 1.98-.392 3-.397 1.02.005 2.04.135 3 .397 2.28-1.519 3.285-1.209 3.285-1.209.645 1.622.24 2.821.12 3.116.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.561C20.565 21.917 24 17.495 24 12.292 24 5.78 18.63.5 12 .5z"
+					/>
+				</svg>
 				{t('about.sourceCode')}
 			</a>
 

package/dist/components/layout/ConnectionDialog.svelte

@@ -10,6 +10,12 @@ import LockIcon from '@lucide/svelte/icons/lock';
 import PlugZapIcon from '@lucide/svelte/icons/plug-zap';
 import ShieldIcon from '@lucide/svelte/icons/shield';
 import XIcon from '@lucide/svelte/icons/x';
+import {
+	DEFAULT_AWS_REGION,
+	describeParseResult,
+	looksLikeUrl,
+	parseStorageUrl
+} from '@walkthru-earth/objex-utils';
 import { Button } from '../ui/button/index.js';
 import { Input } from '../ui/input/index.js';
 import {
@@ -33,7 +39,6 @@ import {
 } from '../../storage/providers.js';
 import { connections, DuplicateConnectionError } from '../../stores/connections.svelte.js';
 import type { Connection, ConnectionConfig } from '../../types.js';
-import { describeParseResult, looksLikeUrl, parseStorageUrl } from '../../utils/storage-url.js';
 
 interface Props {
 	open: boolean;
@@ -56,7 +61,7 @@ let {
 let name = $state('');
 let provider = $state<ProviderId>('s3');
 let bucket = $state('');
-let region = $state('us-east-1');
+let region = $state(DEFAULT_AWS_REGION);
 let endpoint = $state('');
 let anonymous = $state(true);
 let accessKey = $state('');

package/dist/components/layout/SettingsSheet.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+import CheckIcon from '@lucide/svelte/icons/check';
+import CopyIcon from '@lucide/svelte/icons/copy';
+import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+import { COPY_FEEDBACK_MS } from '@walkthru-earth/objex-utils';
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle
+} from '../ui/sheet/index.js';
+import { t } from '../../i18n/index.svelte.js';
+import { appConfig } from '../../stores/config.svelte.js';
+import { settings } from '../../stores/settings.svelte.js';
+import type { Theme } from '../../types.js';
+
+interface Props {
+	open: boolean;
+}
+
+let { open = $bindable(false) }: Props = $props();
+
+const themes: Theme[] = ['light', 'dark', 'system'];
+
+let copied = $state(false);
+
+function buildExportConfig(): string {
+	const cfg = appConfig.value;
+	const exported = {
+		defaults: {
+			theme: settings.theme,
+			locale: settings.locale,
+			featureLimit: settings.featureLimit,
+			mosaicItemLimit: settings.mosaicItemLimit
+		},
+		ui: {
+			showConnectionRail: settings.showConnectionRail,
+			showFileTree: settings.showFileTree,
+			showSettings: cfg.ui.showSettings
+		},
+		basemaps: cfg.basemaps,
+		defaultBasemap: cfg.defaultBasemap,
+		connections: cfg.connections
+	};
+	return JSON.stringify(exported, null, 2);
+}
+
+async function copyConfig() {
+	await navigator.clipboard.writeText(buildExportConfig());
+	copied = true;
+	setTimeout(() => (copied = false), COPY_FEEDBACK_MS);
+}
+</script>
+
+<Sheet bind:open>
+	<SheetContent side="bottom" class="max-h-[85vh] sm:mx-auto sm:max-w-lg sm:rounded-t-lg">
+		<SheetHeader>
+			<SheetTitle>{t('settings.title')}</SheetTitle>
+			<SheetDescription class="sr-only">{t('settings.title')}</SheetDescription>
+		</SheetHeader>
+
+		<div class="flex flex-col gap-6 overflow-y-auto px-4 py-6 sm:px-6">
+			{#if appConfig.status === 'custom'}
+				<div class="rounded-md bg-primary/10 px-3 py-1.5 text-xs text-primary">
+					{t('settings.customConfig')}
+				</div>
+			{/if}
+
+			<!-- Appearance -->
+			<section class="flex flex-col gap-2">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+					{t('settings.appearance')}
+				</h3>
+				<div class="flex gap-2">
+					{#each themes as th}
+						<button
+							class="flex-1 rounded-md border px-3 py-1.5 text-sm transition-colors {settings.theme ===
+							th
+								? 'border-primary bg-primary/10 text-primary'
+								: 'border-border text-muted-foreground hover:text-foreground'}"
+							onclick={() => settings.setTheme(th)}
+						>
+							{t(`theme.${th}`)}
+						</button>
+					{/each}
+				</div>
+			</section>
+
+			<!-- Language -->
+			<section class="flex flex-col gap-2">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+					{t('settings.language')}
+				</h3>
+				<div class="flex gap-2">
+					<button
+						class="flex-1 rounded-md border px-3 py-1.5 text-sm transition-colors {settings.locale ===
+						'en'
+							? 'border-primary bg-primary/10 text-primary'
+							: 'border-border text-muted-foreground hover:text-foreground'}"
+						onclick={() => settings.setLocale('en')}
+					>
+						English
+					</button>
+					<button
+						class="flex-1 rounded-md border px-3 py-1.5 text-sm transition-colors {settings.locale ===
+						'ar'
+							? 'border-primary bg-primary/10 text-primary'
+							: 'border-border text-muted-foreground hover:text-foreground'}"
+						onclick={() => settings.setLocale('ar')}
+					>
+						العربية
+					</button>
+				</div>
+			</section>
+
+			<!-- Map -->
+			{#if appConfig.value.basemaps.length > 0}
+				<section class="flex flex-col gap-2">
+					<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+						{t('settings.map')}
+					</h3>
+					<div class="flex flex-wrap gap-2">
+						<button
+							class="rounded-md border px-3 py-1.5 text-sm transition-colors {settings.basemapId ===
+							undefined
+								? 'border-primary bg-primary/10 text-primary'
+								: 'border-border text-muted-foreground hover:text-foreground'}"
+							onclick={() => settings.setBasemap(undefined)}
+						>
+							{t('settings.basemapAuto')}
+						</button>
+						{#each appConfig.value.basemaps as bm (bm.id)}
+							<button
+								class="rounded-md border px-3 py-1.5 text-sm transition-colors {settings.basemapId ===
+								bm.id
+									? 'border-primary bg-primary/10 text-primary'
+									: 'border-border text-muted-foreground hover:text-foreground'}"
+								onclick={() => settings.setBasemap(bm.id)}
+							>
+								{bm.label}
+							</button>
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			<!-- Data -->
+			<section class="flex flex-col gap-3">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+					{t('settings.data')}
+				</h3>
+				<label class="flex flex-col gap-1 text-sm">
+					<span>{t('settings.rowLimit')}</span>
+					<input
+						type="number"
+						min="1"
+						class="rounded-md border border-border bg-background px-2 py-1 text-sm"
+						value={settings.featureLimit}
+						onchange={(e) => settings.setFeatureLimit(Number(e.currentTarget.value))}
+					/>
+					<span class="text-xs text-muted-foreground">{t('settings.rowLimitHelp')}</span>
+				</label>
+				<label class="flex flex-col gap-1 text-sm">
+					<span>{t('settings.mosaicLimit')}</span>
+					<input
+						type="number"
+						min="1"
+						class="rounded-md border border-border bg-background px-2 py-1 text-sm"
+						value={settings.mosaicItemLimit}
+						onchange={(e) => settings.setMosaicItemLimit(Number(e.currentTarget.value))}
+					/>
+					<span class="text-xs text-muted-foreground">{t('settings.mosaicLimitHelp')}</span>
+				</label>
+			</section>
+
+			<!-- Interface -->
+			<section class="flex flex-col gap-3">
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+					{t('settings.interface')}
+				</h3>
+				<label class="flex items-center justify-between gap-2 text-sm">
+					<span class="flex flex-col">
+						<span>{t('settings.showConnectionRail')}</span>
+						{#if settings.railLockedByParam}
+							<span class="text-xs text-muted-foreground">{t('settings.lockedByLink')}</span>
+						{/if}
+					</span>
+					<input
+						type="checkbox"
+						class="size-4"
+						disabled={settings.railLockedByParam}
+						checked={settings.showConnectionRail}
+						onchange={(e) => settings.setShowConnectionRail(e.currentTarget.checked)}
+					/>
+				</label>
+				<label class="flex items-center justify-between gap-2 text-sm">
+					<span class="flex flex-col">
+						<span>{t('settings.showFileTree')}</span>
+						{#if settings.treeLockedByParam}
+							<span class="text-xs text-muted-foreground">{t('settings.lockedByLink')}</span>
+						{/if}
+					</span>
+					<input
+						type="checkbox"
+						class="size-4"
+						disabled={settings.treeLockedByParam}
+						checked={settings.showFileTree}
+						onchange={(e) => settings.setShowFileTree(e.currentTarget.checked)}
+					/>
+				</label>
+			</section>
+
+			<!-- Footer actions -->
+			<div class="flex items-center justify-between gap-2 border-t pt-4">
+				<button
+					class="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+					onclick={() => settings.reset()}
+				>
+					<RotateCcwIcon class="size-3.5" />
+					{t('settings.reset')}
+				</button>
+				<button
+					class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+					onclick={copyConfig}
+				>
+					{#if copied}
+						<CheckIcon class="size-3.5" />
+						{t('settings.copied')}
+					{:else}
+						<CopyIcon class="size-3.5" />
+						{t('settings.copyConfig')}
+					{/if}
+				</button>
+			</div>
+		</div>
+	</SheetContent>
+</Sheet>

package/dist/components/layout/SettingsSheet.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    open: boolean;
+}
+declare const SettingsSheet: import("svelte").Component<Props, {}, "open">;
+type SettingsSheet = ReturnType<typeof SettingsSheet>;
+export default SettingsSheet;

package/dist/components/layout/Sidebar.svelte

@@ -4,7 +4,9 @@ import DatabaseIcon from '@lucide/svelte/icons/database';
 import GlobeIcon from '@lucide/svelte/icons/globe';
 import PencilIcon from '@lucide/svelte/icons/pencil';
 import PlusIcon from '@lucide/svelte/icons/plus';
+import SettingsIcon from '@lucide/svelte/icons/settings';
 import TrashIcon from '@lucide/svelte/icons/trash-2';
+import { type DetectedHost, detectHostBucket, parseStorageUrl } from '@walkthru-earth/objex-utils';
 import {
 	ContextMenu,
 	ContextMenuContent,
@@ -21,18 +23,21 @@ import {
 } from '../ui/tooltip/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import { browser } from '../../stores/browser.svelte.js';
+import { appConfig } from '../../stores/config.svelte.js';
 import { connections } from '../../stores/connections.svelte.js';
 import { credentialStore, loadFromNative } from '../../stores/credentials.svelte.js';
 import { eagerUrlTabId, tabs } from '../../stores/tabs.svelte.js';
 import type { Connection } from '../../types.js';
-import { type DetectedHost, detectHostBucket } from '../../utils/host-detection.js';
-import { parseStorageUrl } from '../../utils/storage-url.js';
 import { clearUrlState, syncUrlParam } from '../../utils/url-state.js';
 import AboutSheet from './AboutSheet.svelte';
 import ConnectionDialog from './ConnectionDialog.svelte';
 import LocaleToggle from './LocaleToggle.svelte';
 import ThemeToggle from './ThemeToggle.svelte';
 
+// Settings panel is owned by +page.svelte so it stays reachable even when the
+// connection rail is hidden; the gear button just requests it be opened.
+let { onOpenSettings }: { onOpenSettings?: () => void } = $props();
+
 let aboutOpen = $state(false);
 let dialogOpen = $state(false);
 let editingConnection = $state<Connection | null>(null);
@@ -42,9 +47,9 @@ let autoConnecting = $state(false);
 $effect(() => {
 	connections.load().then(async () => {
 		await handleAutoDetection();
-		// On first visit (no connections, no URL params), load the demo bucket
+		// On first visit (no connections, no URL params), seed connections from config
 		if (connections.items.length === 0 && !new URL(window.location.href).searchParams.has('url')) {
-			await loadDemoConnection();
+			await loadConfigConnections();
 		}
 	});
 });
@@ -94,9 +99,18 @@ async function handleAutoDetection() {
 		return;
 	}
 
+	const hasUrlParam = url.searchParams.has('url');
+
 	// A recognizable storage provider was detected. Close the eagerly-opened
 	// URL tab (if any) so we can re-open it with a proper connectionId that
 	// provides S3 credentials and endpoint config for DuckDB httpfs.
+	// Mark the close + reopen as a migration so the tab-sync effect in
+	// +page.svelte doesn't clear `?url=` / `#hash` during the empty-tabs
+	// window between close and open. We end migration in `finally` so an
+	// abandoned credential prompt or thrown error still resets the flag.
+	const isMigrating = hasUrlParam;
+	if (isMigrating) tabs.beginMigration();
+
 	if (rawUrl) {
 		const eagerTabId = eagerUrlTabId(rawUrl);
 		const eagerTab = tabs.items.find((t) => t.id === eagerTabId);
@@ -105,12 +119,17 @@ async function handleAutoDetection() {
 		}
 	}
 
-	const hasUrlParam = url.searchParams.has('url');
-
 	if (hasUrlParam) {
 		// Auto-connect immediately for ?url= param (zero-friction)
 		autoConnecting = true;
 		try {
+			// TODO(stac-storage-ext): when `rawUrl` resolves to STAC content,
+			// peek-fetch the JSON, classify with `classifyStac`, pick the first
+			// item with non-empty hints, and pass `detected` through
+			// `applyStacItemStorageHints(detected, item)` BEFORE
+			// `saveHostConnection` so `storage:region` / `storage:platform` /
+			// `storage:requester_pays` flow into the auto-created connection.
+			// Helper lives in `utils/host-detection.ts` -- modular, callers opt in.
 			const connId = await connections.saveHostConnection(detected);
 			const conn = connections.getById(connId);
 			if (!conn) return;
@@ -160,10 +179,44 @@ async function handleAutoDetection() {
 			syncUrlParam(conn, prefixParam || undefined);
 		} finally {
 			autoConnecting = false;
+			if (isMigrating) tabs.endMigration();
 		}
 	} else {
 		// Show indicator for hostname-detected bucket
 		detectedHost = detected;
+		if (isMigrating) tabs.endMigration();
+	}
+}
+
+async function loadConfigConnections() {
+	const seeds = appConfig.value.connections;
+	if (seeds.length === 0) {
+		// No configured connections (e.g. config failed to load): preserve the
+		// historic first-run demo bucket so the empty app is never a dead end.
+		await loadDemoConnection();
+		return;
+	}
+	let firstAnon: Connection | null = null;
+	for (const seed of seeds) {
+		const { id } = await connections.save({
+			name: seed.name,
+			provider: seed.provider,
+			endpoint: seed.endpoint ?? '',
+			bucket: seed.bucket,
+			region: seed.region ?? '',
+			anonymous: seed.anonymous ?? false,
+			...(seed.authMethod ? { authMethod: seed.authMethod } : {}),
+			...(seed.rootPrefix ? { rootPrefix: seed.rootPrefix } : {})
+		});
+		const conn = connections.getById(id);
+		if (conn?.anonymous && !firstAnon) firstAnon = conn;
+	}
+	// Auto-open the first public bucket so the demo flow stays zero-click.
+	// Private seeds remain as un-browsed rows; clicking one runs the normal
+	// ensureCredentials prompt via handleBrowseConnection.
+	if (firstAnon) {
+		browser.browse(firstAnon);
+		syncUrlParam(firstAnon);
 	}
 }
 
@@ -344,6 +397,20 @@ async function handleBrowseConnection(connection: Connection) {
 
 		<!-- Bottom actions -->
 		<div class="mt-auto flex flex-col items-center gap-1 pt-2">
+			{#if appConfig.value.ui.showSettings}
+				<Tooltip>
+					<TooltipTrigger>
+						<button
+							class="flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+							onclick={() => onOpenSettings?.()}
+							aria-label={t('settings.tooltip')}
+						>
+							<SettingsIcon class="size-4" />
+						</button>
+					</TooltipTrigger>
+					<TooltipContent side="right">{t('settings.tooltip')}</TooltipContent>
+				</Tooltip>
+			{/if}
 			<LocaleToggle />
 			<ThemeToggle />
 		</div>

package/dist/components/layout/Sidebar.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const Sidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    onOpenSettings?: () => void;
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;