@walkthru-earth/objex 1.4.0 → 1.5.0

package/dist/components/viewers/pmtiles/PmtilesTileInspector.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 import XIcon from '@lucide/svelte/icons/x';
-import { formatFileSize } from '@walkthru-earth/objex-utils';
+import { formatFileSize, handleLoadError } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { onDestroy } from 'svelte';
 import { t } from '../../../i18n/index.svelte.js';
@@ -121,7 +121,7 @@ async function fetchTile() {
 			}
 		}
 	} catch (e) {
-		error = e instanceof Error ? e.message : String(e);
+		error = handleLoadError(e);
 	} finally {
 		loading = false;
 	}
@@ -180,7 +180,7 @@ function formatValue(v: unknown): string {
 <div class="flex h-full flex-col overflow-hidden">
 	<!-- Navigation bar -->
 	<div
-		class="flex shrink-0 flex-wrap items-center gap-2 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800"
+		class="flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2"
 	>
 		<!-- Z/X/Y inputs -->
 		<div class="flex items-center gap-1 text-xs">
@@ -190,7 +190,7 @@ function formatValue(v: unknown): string {
 				bind:value={inputZ}
 				min={0}
 				max={30}
-				class="w-12 rounded border border-zinc-300 bg-transparent px-1.5 py-0.5 text-center font-mono text-xs dark:border-zinc-700"
+				class="w-12 rounded border border-border bg-transparent px-1.5 py-0.5 text-center font-mono text-xs"
 				onkeydown={handleKeydown}
 			/>
 			<span class="text-muted-foreground">x</span>
@@ -198,7 +198,7 @@ function formatValue(v: unknown): string {
 				type="number"
 				bind:value={inputX}
 				min={0}
-				class="w-16 rounded border border-zinc-300 bg-transparent px-1.5 py-0.5 text-center font-mono text-xs dark:border-zinc-700"
+				class="w-16 rounded border border-border bg-transparent px-1.5 py-0.5 text-center font-mono text-xs"
 				onkeydown={handleKeydown}
 			/>
 			<span class="text-muted-foreground">y</span>
@@ -206,7 +206,7 @@ function formatValue(v: unknown): string {
 				type="number"
 				bind:value={inputY}
 				min={0}
-				class="w-16 rounded border border-zinc-300 bg-transparent px-1.5 py-0.5 text-center font-mono text-xs dark:border-zinc-700"
+				class="w-16 rounded border border-border bg-transparent px-1.5 py-0.5 text-center font-mono text-xs"
 				onkeydown={handleKeydown}
 			/>
 		</div>
@@ -253,13 +253,13 @@ function formatValue(v: unknown): string {
 	</div>
 
 	<!-- Main content -->
-	<div class="flex min-h-0 flex-1 overflow-hidden">
+	<div class="flex min-h-0 flex-1 flex-col overflow-hidden sm:flex-row">
 		{#if loading}
 			<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
 				Loading tile...
 			</div>
 		{:else if error}
-			<div class="flex flex-1 items-center justify-center text-xs text-red-400">
+			<div class="flex flex-1 items-center justify-center text-xs text-destructive">
 				{error}
 			</div>
 		{:else if tile}
@@ -312,16 +312,16 @@ function formatValue(v: unknown): string {
 
 			<!-- Feature properties panel -->
 			<div
-				class="flex w-56 shrink-0 flex-col border-s border-zinc-200 lg:w-64 dark:border-zinc-800"
+				class="flex w-full flex-col border-t border-border sm:w-56 sm:shrink-0 sm:border-s sm:border-t-0 lg:w-64"
 			>
 				<div
-					class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+					class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 				>
 					{t('pmtiles.featureProperties')}
 				</div>
 				{#if selectedFeature && selectedLayerName !== null}
 					<div class="flex-1 overflow-auto">
-						<div class="border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
+						<div class="border-b border-border px-3 py-2">
 							<div class="flex items-center gap-1.5 text-xs">
 								<span
 									class="inline-block size-2 rounded-sm"
@@ -337,14 +337,14 @@ function formatValue(v: unknown): string {
 								· #{selectedFeatureIdx}
 							</div>
 						</div>
-						<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
+						<div class="divide-y divide-border">
 							{#each Object.entries(selectedFeature.properties) as [key, value]}
 								<div class="px-3 py-1.5">
-									<div class="text-[10px] font-medium text-zinc-500 dark:text-zinc-400">
+									<div class="text-[10px] font-medium text-muted-foreground">
 										{key}
 									</div>
 									<div
-										class="break-all text-xs text-zinc-700 dark:text-zinc-300"
+										class="break-all text-xs text-foreground"
 										title={formatValue(value)}
 									>
 										{formatValue(value)}
@@ -402,10 +402,10 @@ function formatValue(v: unknown): string {
 
 			<!-- Raster tile info panel -->
 			<div
-				class="flex w-56 shrink-0 flex-col border-s border-zinc-200 lg:w-64 dark:border-zinc-800"
+				class="flex w-full flex-col border-t border-border sm:w-56 sm:shrink-0 sm:border-s sm:border-t-0 lg:w-64"
 			>
 				<div
-					class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+					class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 				>
 					{t('pmtiles.tileInfo')}
 				</div>

package/dist/constants.d.ts

@@ -30,3 +30,9 @@ export declare const VIEWER_DIR_EXTENSIONS: Set<string>;
 export declare const LAYER_HUE_MULTIPLIER = 137;
 /** Duration (ms) to show "Copied!" feedback before resetting. */
 export declare const COPY_FEEDBACK_MS = 2000;
+/** Region assumed when a connection or bucket name yields none. AWS's global default. */
+export declare const DEFAULT_AWS_REGION = "us-east-1";
+/** deck.gl tile-layer debounce (ms) before fetching after a viewport change. */
+export declare const TILE_DEBOUNCE_MS = 200;
+/** Zoom level used when flying to the first feature of a vector dataset. */
+export declare const FIRST_FEATURE_FLY_ZOOM = 14;

package/dist/constants.js

@@ -36,3 +36,11 @@ export const LAYER_HUE_MULTIPLIER = 137;
 // ── Clipboard ──
 /** Duration (ms) to show "Copied!" feedback before resetting. */
 export const COPY_FEEDBACK_MS = 2000;
+// ── AWS defaults ──
+/** Region assumed when a connection or bucket name yields none. AWS's global default. */
+export const DEFAULT_AWS_REGION = 'us-east-1';
+// ── Map / tiles ──
+/** deck.gl tile-layer debounce (ms) before fetching after a viewport change. */
+export const TILE_DEBOUNCE_MS = 200;
+/** Zoom level used when flying to the first feature of a vector dataset. */
+export const FIRST_FEATURE_FLY_ZOOM = 14;

package/dist/i18n/ar.js

@@ -1,4 +1,7 @@
 export const ar = {
+    // Common
+    'common.loading': 'جارٍ التحميل...',
+    'common.error': 'خطأ',
     // Sidebar
     'sidebar.deleteConfirm': 'حذف الاتصال "{name}"؟',
     'sidebar.browseDetected': 'تصفح الحاوية المكتشفة: {name}',

package/dist/i18n/en.js

@@ -1,4 +1,7 @@
 export const en = {
+    // Common
+    'common.loading': 'Loading...',
+    'common.error': 'Error',
     // Sidebar
     'sidebar.deleteConfirm': 'Delete connection "{name}"?',
     'sidebar.browseDetected': 'Browse detected bucket: {name}',

package/dist/query/stac-source-parquet.js

@@ -27,7 +27,7 @@
  * Yields a single batch with `done: true`. Slice 3 turns this into a real
  * stream via `conn.send()` so large catalogs can render progressively.
  */
-import { emptyPushdown, parseWKB, stacRowToItem } from '@walkthru-earth/objex-utils';
+import { DEFAULT_APP_CONFIG, emptyPushdown, parseWKB, stacRowToItem } from '@walkthru-earth/objex-utils';
 import { QueryCancelledError } from './engine.js';
 import { getQueryEngine } from './index.js';
 import { resolveTableSourceAsync } from './source.js';
@@ -36,14 +36,17 @@ import { resolveTableSourceAsync } from './source.js';
  * iOS Safari caps the WASM heap at ~1.8 GiB and rarely engages OPFS spill
  * (`credentialless` COEP only landed in 17.6), so STRUCT-heavy stac-geoparquet
  * scans OOM during the parquet decode before any rows reach the consumer.
+ * Evaluated per source construction so a device that rotates or resizes re-checks.
+ * Desktop browsers are never classified low-memory regardless of window size.
  */
 function detectLowMemoryDefault() {
     if (typeof navigator === 'undefined')
         return false;
-    if (/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent))
-        return true;
+    const isMobileUa = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+    if (!isMobileUa)
+        return false; // desktop is never low-memory, regardless of window size
     if (typeof window === 'undefined')
-        return false;
+        return true;
     return Math.min(window.innerWidth, window.innerHeight) <= 820;
 }
 /**
@@ -108,7 +111,7 @@ function joinWhere(parts) {
     const live = parts.filter((p) => p !== null && p.length > 0);
     return live.length === 0 ? '' : ` WHERE ${live.join(' AND ')}`;
 }
-const DEFAULT_LIMIT = 2000;
+const DEFAULT_LIMIT = DEFAULT_APP_CONFIG.defaults.mosaicItemLimit;
 /**
  * Build the SELECT list. All columns are optional in the stac-geoparquet
  * spec, so we only project what we know we'll use and the spec requires.

package/dist/query/wasm.js

@@ -1,5 +1,5 @@
 import { buildTransformExpr, wrapWkbWithCrs } from '@walkthru-earth/objex-utils';
-import { DEFAULT_TARGET_CRS, DUCKDB_INIT_TIMEOUT_MS, WGS84_CODES } from '../constants.js';
+import { DEFAULT_TARGET_CRS, DUCKDB_INIT_TIMEOUT_MS, STORAGE_KEYS, WGS84_CODES } from '../constants.js';
 import { getAccessMode, resolveProviderEndpoint } from '../storage/providers.js';
 import { credentialStore } from '../stores/credentials.svelte.js';
 import { QueryCancelledError } from './engine';
@@ -579,67 +579,10 @@ function isBinaryType(typeStr) {
 }
 export class WasmQueryEngine {
     async query(connId, sql) {
-        const t0 = performance.now();
-        const sqlPreview = sql.length > 120 ? `${sql.slice(0, 120)}…` : sql;
-        log(`query → ${sqlPreview}`);
-        const db = await getDB();
-        const conn = await db.connect();
-        const tConn = performance.now();
-        log(`query → connected in ${elapsed(t0)}`);
-        try {
-            if (connId) {
-                await this.configureStorage(conn, connId, sql);
-                log(`query → storage configured in ${elapsed(tConn)}`);
-            }
-            const tQuery = performance.now();
-            const result = await conn.query(sql);
-            log(`query → executed in ${elapsed(tQuery)}, rows: ${result.numRows}`);
-            // DuckDB WASM returns an Arrow Table (bundled apache-arrow@17).
-            // Our project uses apache-arrow@21 — cross-version tableToIPC/tableFromIPC
-            // loses data rows. Extract rows directly from DuckDB's own Arrow Table.
-            const numRows = result.numRows;
-            const cols = result.schema.fields.map((f) => f.name);
-            const types = result.schema.fields.map((f) => String(f.type));
-            if (numRows === 0) {
-                log(`query → done (empty) in ${elapsed(t0)}`);
-                return {
-                    columns: cols,
-                    types,
-                    rowCount: 0,
-                    rows: []
-                };
-            }
-            // Arrow emits DECIMAL columns as multi-word BigInt / Uint32Array buffers.
-            // `String(rawDecimal)` yields the unscaled integer (or "0,0,0,0"),
-            // so rewrite each decimal cell through formatDecimal with the column scale.
-            const decimalCols = [];
-            for (let i = 0; i < cols.length; i++) {
-                const s = decimalScale(types[i]);
-                if (s >= 0)
-                    decimalCols.push({ name: cols[i], scale: s });
-            }
-            // Extract rows directly — avoids Arrow version mismatch
-            const rows = result.toArray().map((row) => {
-                const obj = typeof row.toJSON === 'function' ? row.toJSON() : {};
-                if (typeof row.toJSON !== 'function') {
-                    for (const col of cols)
-                        obj[col] = row[col];
-                }
-                for (const { name, scale } of decimalCols) {
-                    obj[name] = formatDecimal(obj[name], scale);
-                }
-                return obj;
-            });
-            log(`query → done in ${elapsed(t0)}, ${numRows} rows, ${cols.length} cols`);
-            return { columns: cols, types, rowCount: numRows, rows };
-        }
-        catch (err) {
-            logWarn(`query → failed after ${elapsed(t0)}:`, err?.message ?? err);
-            throw err;
-        }
-        finally {
-            await conn.close();
-        }
+        // Delegate to the send()-based path so a data query never blocks the
+        // single DuckDB worker (conn.query() is blocking). Same return shape.
+        const { result } = this.queryCancellable(connId, sql);
+        return result;
     }
     async queryForMap(connId, sql, geomCol, geomColType, sourceCrs) {
         const t0 = performance.now();
@@ -855,7 +798,7 @@ export class WasmQueryEngine {
                 log('configureStorage → presigned HTTPS source, skipping S3 config');
                 return;
             }
-            const stored = localStorage.getItem('obstore-explore-connections');
+            const stored = localStorage.getItem(STORAGE_KEYS.CONNECTIONS);
             if (!stored) {
                 log('configureStorage → no connections in localStorage');
                 return;

package/dist/storage/presign.js

@@ -1,4 +1,5 @@
 import { safeDecodeURIComponent } from '@walkthru-earth/objex-utils';
+import { DEFAULT_AWS_REGION } from '../constants.js';
 import { credentialStore } from '../stores/credentials.svelte.js';
 import { buildProviderBaseUrl, getAccessMode } from './providers.js';
 // 7 days is the SigV4 protocol maximum and is the hard cap on every
@@ -38,7 +39,7 @@ export async function presignHttpsUrl(conn, key, expiresIn = DEFAULT_EXPIRES_IN_
         accessKeyId: creds.accessKey,
         secretAccessKey: creds.secretKey,
         service: 's3',
-        region: conn.region || 'us-east-1'
+        region: conn.region || DEFAULT_AWS_REGION
     });
     const signed = await client.sign(url.toString(), {
         method: 'GET',

package/dist/storage/providers.js

@@ -4,6 +4,7 @@
  * Centralizes endpoint patterns, regions, auth methods, and UI metadata.
  * Used by ConnectionDialog, browser-cloud adapter, host-detection, url-state, etc.
  */
+import { DEFAULT_AWS_REGION } from '../constants.js';
 // ---------------------------------------------------------------------------
 // Registry
 // ---------------------------------------------------------------------------
@@ -463,7 +464,7 @@ export function buildProviderBaseUrl(provider, endpoint, bucket, region) {
         return `${resolved}/${bucket}`;
     }
     // Fallback: AWS S3 path-style
-    return `https://s3.${region || 'us-east-1'}.amazonaws.com/${bucket}`;
+    return `https://s3.${region || DEFAULT_AWS_REGION}.amazonaws.com/${bucket}`;
 }
 /** Check if a provider uses the GCS JSON API (not S3 XML). */
 export function isGcsProvider(provider, endpoint) {

package/dist/stores/settings.svelte.js

@@ -1,4 +1,4 @@
-import { loadFromStorage, parseVisibilityParam, persistToStorage, resolveSetting } from '@walkthru-earth/objex-utils';
+import { DEFAULT_APP_CONFIG, loadFromStorage, parseVisibilityParam, persistToStorage, resolveSetting } from '@walkthru-earth/objex-utils';
 import { STORAGE_KEYS } from '../constants.js';
 import { appConfig } from './config.svelte.js';
 /**
@@ -65,13 +65,13 @@ function createSettingsStore() {
             return resolveSetting(user.locale, cfg().defaults.locale, 'en');
         },
         get featureLimit() {
-            return resolveSetting(user.featureLimit, cfg().defaults.featureLimit, 1000);
+            return resolveSetting(user.featureLimit, cfg().defaults.featureLimit, DEFAULT_APP_CONFIG.defaults.featureLimit);
         },
         get mosaicItemLimit() {
             // Explicit user/query choice always wins, at any value.
             if (user.mosaicItemLimit !== undefined)
                 return user.mosaicItemLimit;
-            const configured = resolveSetting(cfg().defaults.mosaicItemLimit, 2000);
+            const configured = resolveSetting(cfg().defaults.mosaicItemLimit, DEFAULT_APP_CONFIG.defaults.mosaicItemLimit);
             // Mobile heap safety: clamp the default so API/static mosaic loads don't OOM.
             return mobileLikeAtLoad ? Math.min(configured, MOBILE_MOSAIC_LIMIT) : configured;
         },

package/dist/utils/deck.d.ts

@@ -17,6 +17,8 @@ export declare function hoverCursor(map: {
     picked?: boolean;
 }) => void;
 type RGBA = [number, number, number, number];
+/** RGBA used to highlight a hovered/selected feature across map viewers. */
+export declare const HIGHLIGHT_COLOR: [number, number, number, number];
 /** Distinct fill/line colors per geometry type. */
 export declare const GEOMETRY_COLORS: Record<string, {
     fill: RGBA;

package/dist/utils/deck.js

@@ -16,6 +16,8 @@ export function hoverCursor(map) {
         map.getCanvas().style.cursor = info.picked ? 'pointer' : '';
     };
 }
+/** RGBA used to highlight a hovered/selected feature across map viewers. */
+export const HIGHLIGHT_COLOR = [255, 255, 255, 100];
 /** Distinct fill/line colors per geometry type. */
 export const GEOMETRY_COLORS = {
     point: { fill: [66, 133, 244, 180], line: [25, 103, 210, 220] },
@@ -85,7 +87,7 @@ function createLayerForResult(modules, result, layerId, onClick, onHover) {
             radiusMaxPixels: 12,
             pickable: true,
             autoHighlight: true,
-            highlightColor: [255, 255, 255, 100],
+            highlightColor: HIGHLIGHT_COLOR,
             _validate: false,
             onHover,
             onClick: handleClick
@@ -101,7 +103,7 @@ function createLayerForResult(modules, result, layerId, onClick, onHover) {
             widthMinPixels: 1.5,
             pickable: true,
             autoHighlight: true,
-            highlightColor: [255, 255, 255, 100],
+            highlightColor: HIGHLIGHT_COLOR,
             _validate: false,
             onHover,
             onClick: handleClick
@@ -117,7 +119,7 @@ function createLayerForResult(modules, result, layerId, onClick, onHover) {
             lineWidthMinPixels: 1.5,
             pickable: true,
             autoHighlight: true,
-            highlightColor: [255, 255, 255, 100],
+            highlightColor: HIGHLIGHT_COLOR,
             _validate: false,
             onHover,
             onClick: handleClick

package/dist/utils/media-query.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Reactive media-query helpers for Svelte 5 runes.
+ *
+ * Usage (inside a component .svelte file):
+ *   import { useIsWide } from '../utils/media-query.svelte.js';
+ *   const isWide = useIsWide();  // true when viewport >= 640 px (Tailwind sm)
+ *   // then: {#if isWide.value} ... {/if}
+ *
+ * SSR-safe: guards with `typeof window` (this is a CSR-only SPA, but be defensive).
+ */
+/** Reactive wrapper around a single MediaQueryList. */
+export declare function useIsWide(): {
+    readonly value: boolean;
+};

package/dist/utils/media-query.svelte.js

@@ -0,0 +1,29 @@
+/**
+ * Reactive media-query helpers for Svelte 5 runes.
+ *
+ * Usage (inside a component .svelte file):
+ *   import { useIsWide } from '../utils/media-query.svelte.js';
+ *   const isWide = useIsWide();  // true when viewport >= 640 px (Tailwind sm)
+ *   // then: {#if isWide.value} ... {/if}
+ *
+ * SSR-safe: guards with `typeof window` (this is a CSR-only SPA, but be defensive).
+ */
+/** Reactive wrapper around a single MediaQueryList. */
+export function useIsWide() {
+    let value = $state(typeof window !== 'undefined' ? window.matchMedia('(min-width: 640px)').matches : true);
+    if (typeof window !== 'undefined') {
+        const mq = window.matchMedia('(min-width: 640px)');
+        const handler = (e) => {
+            value = e.matches;
+        };
+        $effect(() => {
+            mq.addEventListener('change', handler);
+            return () => mq.removeEventListener('change', handler);
+        });
+    }
+    return {
+        get value() {
+            return value;
+        }
+    };
+}

package/dist/utils/signed-url-effect.d.ts

@@ -0,0 +1,7 @@
+import type { Tab } from '../types.js';
+/**
+ * Resolve a tab's signed HTTPS URL reactively for iframe-style viewers.
+ * Call inside a component's $effect; returns a cleanup function.
+ * onResolved runs only if the tab is still current (guards the async race).
+ */
+export declare function resolveSignedTabUrl(tab: Tab, onResolved: (url: string) => void): () => void;

package/dist/utils/signed-url-effect.js

@@ -0,0 +1,19 @@
+import { buildHttpsUrlAsync } from './signed-url.js';
+/**
+ * Resolve a tab's signed HTTPS URL reactively for iframe-style viewers.
+ * Call inside a component's $effect; returns a cleanup function.
+ * onResolved runs only if the tab is still current (guards the async race).
+ */
+export function resolveSignedTabUrl(tab, onResolved) {
+    let cancelled = false;
+    const id = tab.id;
+    (async () => {
+        const url = await buildHttpsUrlAsync(tab);
+        if (cancelled || id !== tab.id)
+            return;
+        onResolved(url);
+    })();
+    return () => {
+        cancelled = true;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walkthru-earth/objex",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Svelte 5 components and utilities for exploring geospatial object storage — S3, GCS, Azure, R2",
   "author": "Youssef Harby <yharby@walkthru.earth>",
   "license": "CC-BY-4.0",
@@ -172,7 +172,7 @@
     "sql-formatter": "^15.8.0",
     "yaml": "^2.9.0",
     "zarrita": "^0.7.3",
-    "@walkthru-earth/objex-utils": "1.4.0"
+    "@walkthru-earth/objex-utils": "1.5.0"
   },
   "scripts": {
     "dev": "vite dev",