@walkthru-earth/objex 1.0.0 → 1.2.0

package/README.md

@@ -1,5 +1,10 @@
 # objex
 
+[![npm](https://img.shields.io/npm/v/@walkthru-earth/objex?label=%40walkthru-earth%2Fobjex&color=cb3837)](https://www.npmjs.com/package/@walkthru-earth/objex)
+[![npm](https://img.shields.io/npm/v/@walkthru-earth/objex-utils?label=%40walkthru-earth%2Fobjex-utils&color=cb3837)](https://www.npmjs.com/package/@walkthru-earth/objex-utils)
+[![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.
 
 ```mermaid
@@ -58,7 +63,7 @@ import { readParquetMetadata } from '@walkthru-earth/objex/utils/parquet-metadat
 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) 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
 
@@ -81,6 +86,8 @@ import {
 } from '@walkthru-earth/objex-utils';
 ```
 
+Full per-module reference docs: [`packages/objex-utils/docs/`](packages/objex-utils/docs/README.md).
+
 ### Exports
 
 | Export path | What |
@@ -92,12 +99,14 @@ import {
 | `./utils/geoarrow` | `buildGeoArrowTables`, `normalizeGeomType` |
 | `./utils/storage-url` | `parseStorageUrl`, `looksLikeUrl` |
 | `./utils/parquet-metadata` | `readParquetMetadata`, `extractEpsgFromGeoMeta` |
-| `./utils/format` | `formatFileSize`, `formatDate`, `getFileExtension` |
+| `./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`, and shared constants (`WGS84_CODES`, `STORAGE_KEYS`, `DEFAULT_TARGET_CRS`, etc.).
+
 ## Quick Start (Development)
 
 ```bash

package/dist/components/browser/FileBrowser.svelte

@@ -8,7 +8,14 @@ import { browser } from '../../stores/browser.svelte.js';
 import { safeLock } from '../../stores/safelock.svelte.js';
 import { tabs } from '../../stores/tabs.svelte.js';
 import type { FileEntry } from '../../types.js';
+import {
+	type SortConfig,
+	type SortField,
+	sortFileEntries,
+	toggleSortField
+} from '../../utils/file-sort.js';
 import { detectZarrMarkers } from '../../utils/zarr.js';
+import { openZarrTab } from '../../utils/zarr-tab.js';
 import Breadcrumb from './Breadcrumb.svelte';
 import CreateFolderDialog from './CreateFolderDialog.svelte';
 import DeleteConfirmDialog from './DeleteConfirmDialog.svelte';
@@ -18,12 +25,8 @@ import RenameDialog from './RenameDialog.svelte';
 import SearchBar from './SearchBar.svelte';
 import UploadButton from './UploadButton.svelte';
 
-type SortField = 'name' | 'size' | 'modified' | 'extension';
-type SortDirection = 'asc' | 'desc';
-
 let filterQuery = $state('');
-let sortField = $state<SortField>('name');
-let sortDirection = $state<SortDirection>('asc');
+let sortConfig = $state<SortConfig>({ field: 'name', direction: 'asc' });
 
 let deleteDialogOpen = $state(false);
 let deleteTarget = $state<FileEntry | null>(null);
@@ -35,22 +38,25 @@ let showWriteActions = $derived(browser.canWrite && !safeLock.locked);
 
 const zarrDetection = $derived(detectZarrMarkers(browser.entries.map((e: FileEntry) => e.name)));
 
-function openAsZarr() {
-	if (!browser.activeConnection) return;
-	const prefix = browser.currentPrefix.replace(/\/+$/, '');
-	const name = prefix.split('/').pop() || browser.activeConnection.bucket;
-	tabs.open({
-		id: `${browser.activeConnection.id}:${prefix}/`,
-		name,
-		path: `${prefix}/`,
-		source: 'remote',
-		connectionId: browser.activeConnection.id,
-		extension: 'zarr'
-	});
-}
+// Auto-open Zarr viewer when markers are detected in the current directory.
+// Uses a Set to prevent re-triggering when navigating back to a previously opened store.
+const autoOpenedPrefixes = new Set<string>();
+$effect(() => {
+	if (zarrDetection.detected && browser.activeConnection) {
+		const prefix = browser.currentPrefix;
+		if (!autoOpenedPrefixes.has(prefix)) {
+			autoOpenedPrefixes.add(prefix);
+			openZarrTab(prefix, {
+				source: 'remote',
+				connectionId: browser.activeConnection.id,
+				bucketFallback: browser.activeConnection.bucket
+			});
+		}
+	}
+});
 
 const sortedAndFilteredEntries = $derived.by(() => {
-	let result = [...browser.entries];
+	let result = browser.entries;
 
 	// Filter
 	if (filterQuery) {
@@ -58,28 +64,7 @@ const sortedAndFilteredEntries = $derived.by(() => {
 		result = result.filter((entry: FileEntry) => entry.name.toLowerCase().includes(q));
 	}
 
-	// Sort
-	const dir = sortDirection === 'asc' ? 1 : -1;
-	result.sort((a, b) => {
-		// Directories always come first
-		if (a.is_dir && !b.is_dir) return -1;
-		if (!a.is_dir && b.is_dir) return 1;
-
-		switch (sortField) {
-			case 'name':
-				return dir * a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
-			case 'size':
-				return dir * (a.size - b.size);
-			case 'modified':
-				return dir * (a.modified - b.modified);
-			case 'extension':
-				return dir * a.extension.localeCompare(b.extension, undefined, { sensitivity: 'base' });
-			default:
-				return 0;
-		}
-	});
-
-	return result;
+	return sortFileEntries(result, sortConfig);
 });
 
 function handleFilter(query: string) {
@@ -91,12 +76,7 @@ function handleNavigate(path: string) {
 }
 
 function handleSort(field: SortField) {
-	if (sortField === field) {
-		sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-	} else {
-		sortField = field;
-		sortDirection = 'asc';
-	}
+	sortConfig = toggleSortField(sortConfig, field);
 }
 
 function handleDelete(entry: FileEntry) {
@@ -152,8 +132,8 @@ function handleRename(entry: FileEntry) {
 			onclick={() => handleSort('name')}
 		>
 			{t('fileBrowser.name')}
-			{#if sortField === 'name'}
-				{#if sortDirection === 'asc'}
+			{#if sortConfig.field === 'name'}
+				{#if sortConfig.direction === 'asc'}
 					<ArrowUp class="size-3" />
 				{:else}
 					<ArrowDown class="size-3" />
@@ -166,8 +146,8 @@ function handleRename(entry: FileEntry) {
 			class="text-muted-foreground hover:text-foreground flex w-20 shrink-0 items-center justify-end gap-1 transition-colors"
 			onclick={() => handleSort('size')}
 		>
-			{#if sortField === 'size'}
-				{#if sortDirection === 'asc'}
+			{#if sortConfig.field === 'size'}
+				{#if sortConfig.direction === 'asc'}
 					<ArrowUp class="size-3" />
 				{:else}
 					<ArrowDown class="size-3" />
@@ -179,8 +159,8 @@ function handleRename(entry: FileEntry) {
 			class="text-muted-foreground hover:text-foreground flex w-24 shrink-0 items-center justify-end gap-1 transition-colors"
 			onclick={() => handleSort('modified')}
 		>
-			{#if sortField === 'modified'}
-				{#if sortDirection === 'asc'}
+			{#if sortConfig.field === 'modified'}
+				{#if sortConfig.direction === 'asc'}
 					<ArrowUp class="size-3" />
 				{:else}
 					<ArrowDown class="size-3" />
@@ -201,7 +181,14 @@ function handleRename(entry: FileEntry) {
 				variant="outline"
 				size="sm"
 				class="h-6 gap-1 px-2 text-[11px]"
-				onclick={openAsZarr}
+				onclick={() => {
+					if (!browser.activeConnection) return;
+					openZarrTab(browser.currentPrefix, {
+						source: 'remote',
+						connectionId: browser.activeConnection.id,
+						bucketFallback: browser.activeConnection.bucket
+					});
+				}}
 			>
 				{t('fileBrowser.openAsZarr')}
 			</Button>

package/dist/components/browser/FileTreeSidebar.svelte

@@ -17,8 +17,10 @@ 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/url.js';
+import { getNativeScheme } from '../../utils/cloud-url.js';
 import { syncUrlParam } from '../../utils/url-state.js';
+import { detectZarrMarkers } from '../../utils/zarr.js';
+import { openZarrTab } from '../../utils/zarr-tab.js';
 
 let {
 	connection,
@@ -48,6 +50,8 @@ let rootContinuationToken = $state<string | undefined>();
 let rootHasMore = $state(false);
 let filterQuery = $state('');
 let scrollEl = $state<HTMLElement>();
+/** Paths of directories detected as Zarr stores (by marker files in children). */
+let detectedZarrPaths = $state(new Set<string>());
 
 const filteredNodes = $derived(
 	filterQuery ? filterTree(rootNodes, filterQuery.toLowerCase()) : rootNodes
@@ -156,6 +160,16 @@ async function toggleFolder(node: TreeNode) {
 	node.expanded = !node.expanded;
 }
 
+function openAsZarr(dirPath: string) {
+	const path = dirPath.endsWith('/') ? dirPath : `${dirPath}/`;
+	openZarrTab(path, {
+		source: 'remote',
+		connectionId: connection.id,
+		bucketFallback: connection.bucket
+	});
+	syncUrlParam(connection, path);
+}
+
 function openFile(entry: FileEntry) {
 	tabs.open({
 		id: `${connection.id}:${entry.path}`,
@@ -175,12 +189,27 @@ function isViewerDir(entry: FileEntry): boolean {
 	return entry.is_dir && VIEWER_DIR_EXTENSIONS.has(entry.extension);
 }
 
-function handleNodeClick(node: TreeNode) {
+/** Whether a directory should render with the Zarr icon (either by extension or marker detection). */
+function isZarrDir(entry: FileEntry): boolean {
+	return isViewerDir(entry) || detectedZarrPaths.has(entry.path);
+}
+
+async function handleNodeClick(node: TreeNode) {
 	if (isViewerDir(node.entry)) {
-		// .zarr directories open in the viewer (clicking chevron expands)
-		openFile(node.entry);
+		// .zarr / .zr3 directories open in the viewer (clicking chevron expands)
+		openAsZarr(node.entry.path);
 	} else if (node.entry.is_dir) {
-		toggleFolder(node);
+		// Load children if needed, then check for zarr markers
+		if (node.children.length === 0) {
+			await loadChildren(node);
+		}
+		const zarrCheck = detectZarrMarkers(node.children.map((c) => c.entry.name));
+		if (zarrCheck.detected) {
+			detectedZarrPaths.add(node.entry.path);
+			openAsZarr(node.entry.path);
+		}
+		// Always expand so user can also browse contents
+		node.expanded = !node.expanded;
 	} else {
 		openFile(node.entry);
 	}
@@ -349,6 +378,7 @@ async function loadRoot() {
 	rootLoading = true;
 	rootContinuationToken = undefined;
 	rootHasMore = false;
+	detectedZarrPaths = new Set();
 	try {
 		const adapter = getAdapter('remote', connection.id);
 		const prefix = connection.rootPrefix ?? '';
@@ -488,8 +518,8 @@ async function loadMoreRoot() {
 					onclick={() => handleNodeClick(node)}
 				>
 					<FileTypeIcon
-						extension={entry.extension}
-						isDir={entry.is_dir && !isViewerDir(entry)}
+						extension={isZarrDir(entry) ? 'zarr' : entry.extension}
+						isDir={entry.is_dir && !isZarrDir(entry)}
 						isOpen={node.expanded}
 						class="size-3.5 shrink-0"
 					/>
@@ -510,6 +540,12 @@ async function loadMoreRoot() {
 					{t('fileTree.open')}
 				</ContextMenu.Item>
 				<ContextMenu.Separator />
+			{:else if detectedZarrPaths.has(entry.path)}
+				<ContextMenu.Item onclick={() => openAsZarr(entry.path)}>
+					<ExternalLinkIcon class="me-2 size-3.5" />
+					{t('fileBrowser.openAsZarr')}
+				</ContextMenu.Item>
+				<ContextMenu.Separator />
 			{/if}
 
 			<ContextMenu.Item onclick={() => copyToClipboard(buildHttpUrl(entry.path))}>

package/dist/components/layout/ConnectionDialog.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 import CheckIcon from '@lucide/svelte/icons/check';
+import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 import CloudIcon from '@lucide/svelte/icons/cloud';
+import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+import GlobeIcon from '@lucide/svelte/icons/globe';
 import LinkIcon from '@lucide/svelte/icons/link';
 import Loader2Icon from '@lucide/svelte/icons/loader-2';
 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 { Button } from '../ui/button/index.js';
 import { Input } from '../ui/input/index.js';
@@ -20,10 +24,12 @@ import { Switch } from '../ui/switch/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import {
 	buildEndpointFromTemplate,
+	CORS_HELP,
 	getProvider,
 	PROVIDER_IDS,
 	PROVIDERS,
-	type ProviderId
+	type ProviderId,
+	READ_ONLY_HELP
 } from '../../storage/providers.js';
 import { connections } from '../../stores/connections.svelte.js';
 import type { Connection, ConnectionConfig } from '../../types.js';
@@ -71,6 +77,8 @@ let isAzure = $derived(provider === 'azure');
 let hasRegions = $derived(providerDef.regions.length > 0);
 let needsRegion = $derived(providerDef.needsRegion);
 let bucketLabel = $derived(providerDef.bucketLabel ?? t('connection.bucket'));
+let corsHelp = $derived(CORS_HELP[provider]);
+let readOnlyHelp = $derived(READ_ONLY_HELP[provider]);
 
 let isEditMode = $derived(editConnection !== null && editConnection !== undefined);
 let title = $derived(isEditMode ? t('connection.editTitle') : t('connection.newTitle'));
@@ -433,6 +441,97 @@ async function handleTestConnection() {
 				</form>
 			{/if}
 
+			<!-- CORS Help -->
+			{#if corsHelp}
+				<details class="group rounded-md border border-border">
+					<summary class="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+						<ChevronRightIcon class="size-3.5 shrink-0 transition-transform group-open:rotate-90" />
+						<GlobeIcon class="size-3.5 shrink-0" />
+						{t('connection.corsTitle')}
+					</summary>
+					<div class="flex flex-col gap-2.5 border-t border-border px-3 py-2.5">
+						{#if corsHelp.defaultEnabled}
+							<div class="flex items-center gap-1.5 text-xs text-green-700 dark:text-green-400">
+								<CheckIcon class="size-3 shrink-0" />
+								<span>{t('connection.corsDefault')}</span>
+							</div>
+						{:else}
+							<p class="text-xs text-muted-foreground">{t('connection.corsRequired')}</p>
+						{/if}
+
+						{#if corsHelp.note}
+							<p class="text-xs text-muted-foreground">{corsHelp.note}</p>
+						{/if}
+
+						{#if corsHelp.docsUrl}
+							<a
+								href={corsHelp.docsUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+							>
+								<ExternalLinkIcon class="size-3 shrink-0" />
+								{t('connection.corsDocs')}
+							</a>
+						{/if}
+
+						{#if corsHelp.cliSteps && corsHelp.cliSteps.length > 0}
+							<details class="group/cli">
+								<summary class="flex cursor-pointer list-none items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+									<ChevronRightIcon class="size-3 shrink-0 transition-transform group-open/cli:rotate-90" />
+									{t('connection.corsCliTitle')}
+								</summary>
+								<div class="mt-1.5 flex flex-col gap-1.5">
+									{#each corsHelp.cliSteps as step, i}
+										<pre class="overflow-x-auto rounded bg-muted px-2.5 py-2 text-[11px] leading-relaxed">{step}</pre>
+									{/each}
+								</div>
+							</details>
+						{/if}
+					</div>
+				</details>
+			{/if}
+
+			<!-- Read-Only Access Help -->
+			{#if readOnlyHelp}
+				<details class="group rounded-md border border-border">
+					<summary class="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+						<ChevronRightIcon class="size-3.5 shrink-0 transition-transform group-open:rotate-90" />
+						<ShieldIcon class="size-3.5 shrink-0" />
+						{t('connection.readOnlyTitle')}
+					</summary>
+					<div class="flex flex-col gap-2.5 border-t border-border px-3 py-2.5">
+						<p class="text-xs text-muted-foreground">{readOnlyHelp.note}</p>
+
+						{#if readOnlyHelp.docsUrl}
+							<a
+								href={readOnlyHelp.docsUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+							>
+								<ExternalLinkIcon class="size-3 shrink-0" />
+								{t('connection.readOnlyDocs')}
+							</a>
+						{/if}
+
+						{#if readOnlyHelp.cliSteps && readOnlyHelp.cliSteps.length > 0}
+							<details class="group/ro">
+								<summary class="flex cursor-pointer list-none items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+									<ChevronRightIcon class="size-3 shrink-0 transition-transform group-open/ro:rotate-90" />
+									{t('connection.readOnlyCliTitle')}
+								</summary>
+								<div class="mt-1.5 flex flex-col gap-1.5">
+									{#each readOnlyHelp.cliSteps as step, i}
+										<pre class="overflow-x-auto rounded bg-muted px-2.5 py-2 text-[11px] leading-relaxed">{step}</pre>
+									{/each}
+								</div>
+							</details>
+						{/if}
+					</div>
+				</details>
+			{/if}
+
 			<!-- Test Connection Result -->
 			{#if testResult === 'success'}
 				<div class="flex items-center gap-2 rounded-md border border-green-500/30 bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-400">

package/dist/components/layout/Sidebar.svelte

@@ -23,7 +23,7 @@ import { t } from '../../i18n/index.svelte.js';
 import { browser } from '../../stores/browser.svelte.js';
 import { connections } from '../../stores/connections.svelte.js';
 import { credentialStore, loadFromNative } from '../../stores/credentials.svelte.js';
-import { tabs } from '../../stores/tabs.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';
@@ -58,16 +58,25 @@ $effect(() => {
 });
 
 async function handleAutoDetection() {
-	// Direct file URLs (e.g. ?url=https://...file.parquet) are opened eagerly
-	// in +page.svelte so they work on mobile. Skip if tab already exists.
 	const url = new URL(window.location.href);
 	const rawUrl = url.searchParams.get('url');
-	if (rawUrl && tabs.items.some((t) => t.id === `url:${rawUrl}`)) {
+
+	const detected = detectHostBucket();
+	if (!detected) {
+		// No recognizable host — let the eager URL tab handle it
 		return;
 	}
 
-	const detected = detectHostBucket();
-	if (!detected) return;
+	// 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.
+	if (rawUrl) {
+		const eagerTabId = eagerUrlTabId(rawUrl);
+		const eagerTab = tabs.items.find((t) => t.id === eagerTabId);
+		if (eagerTab) {
+			tabs.close(eagerTabId);
+		}
+	}
 
 	const hasUrlParam = url.searchParams.has('url');
 
@@ -85,27 +94,36 @@ async function handleAutoDetection() {
 			const prefixParam = parsed.prefix;
 
 			if (prefixParam && !prefixParam.endsWith('/')) {
-				// It's a file — browse to its parent folder and open it
-				const parentPrefix = prefixParam.includes('/') ? prefixParam.replace(/\/[^/]*$/, '/') : '';
-				browser.browse(conn, parentPrefix || undefined);
 				const fileName = prefixParam.split('/').pop() || prefixParam;
 				const ext = fileName.includes('.') ? fileName.split('.').pop()!.toLowerCase() : '';
-				const tabId = `${conn.id}:${prefixParam}`;
-				tabs.open({
-					id: tabId,
-					name: fileName,
-					path: prefixParam,
-					source: 'remote',
-					connectionId: conn.id,
-					extension: ext
-				});
-				// Fire-and-forget: fetch file size via HEAD request
-				fetch(url.searchParams.get('url')!, { method: 'HEAD' })
-					.then((res) => {
-						const cl = res.headers.get('content-length');
-						if (cl) tabs.update(tabId, { size: Number(cl) });
-					})
-					.catch(() => {});
+				if (ext) {
+					// It's a file — browse to its parent folder and open it
+					const parentPrefix = prefixParam.includes('/')
+						? prefixParam.replace(/\/[^/]*$/, '/')
+						: '';
+					browser.browse(conn, parentPrefix || undefined);
+					const tabId = `${conn.id}:${prefixParam}`;
+					tabs.open({
+						id: tabId,
+						name: fileName,
+						path: prefixParam,
+						source: 'remote',
+						connectionId: conn.id,
+						extension: ext
+					});
+					// Fire-and-forget: fetch file size via HEAD request
+					fetch(url.searchParams.get('url')!, { method: 'HEAD' })
+						.then((res) => {
+							const cl = res.headers.get('content-length');
+							if (cl) tabs.update(tabId, { size: Number(cl) });
+						})
+						.catch(() => {});
+				} else {
+					// No extension — likely a directory (e.g. Zarr store without .zarr suffix).
+					// Browse into it and let FileBrowser's auto-detection handle Zarr/etc.
+					const dirPrefix = `${prefixParam}/`;
+					browser.browse(conn, dirPrefix);
+				}
 			} else if (prefixParam) {
 				// It's a directory prefix
 				browser.browse(conn, prefixParam);

package/dist/components/viewers/CodeViewer.svelte

@@ -13,6 +13,7 @@ import { handleLoadError } from '../../utils/error.js';
 import { extensionToShikiLang, highlightCode } from '../../utils/shiki';
 import { buildHttpsUrl } from '../../utils/url.js';
 import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+import { openZarrTab } from '../../utils/zarr-tab.js';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -49,6 +50,8 @@ type JsonKind =
 	| 'stac-collection'
 	| 'stac-item'
 	| 'kepler'
+	| 'zarr-v2'
+	| 'zarr-v3'
 	| null;
 
 /** Detect if a .py file is a marimo notebook (first 512 bytes contain both markers) */
@@ -74,6 +77,8 @@ function detectJsonKind(code: string): JsonKind {
 			if (obj.type === 'Collection' && obj.stac_version) return 'stac-collection';
 			if (obj.type === 'Feature' && obj.stac_version) return 'stac-item';
 			if (obj.info?.app === 'kepler.gl' && obj.config) return 'kepler';
+			if (obj.zarr_format === 3) return 'zarr-v3';
+			if (obj.zarr_format === 2) return 'zarr-v2';
 		}
 	} catch {
 		// not valid JSON
@@ -353,6 +358,24 @@ async function copyCode() {
 				>
 					{viewMode === 'kepler' ? t('code.code') : t('code.openKepler')}
 				</Button>
+			{:else if jsonKind === 'zarr-v3' || jsonKind === 'zarr-v2'}
+				<Badge variant="outline" class="hidden border-purple-200 text-purple-600 sm:inline-flex dark:border-purple-800 dark:text-purple-300">
+					{jsonKind === 'zarr-v3' ? 'Zarr v3' : 'Zarr v2'}
+				</Badge>
+				<Button
+					variant="outline"
+					size="sm"
+					class="h-7 gap-1 px-2 text-xs border-purple-300 text-purple-600 hover:bg-purple-50 hover:text-purple-700 dark:border-purple-700 dark:text-purple-400 dark:hover:bg-purple-950"
+					onclick={() => {
+						const parentPath = tab.path.replace(/[^/]+$/, '');
+						openZarrTab(parentPath, {
+							source: tab.source as 'remote' | 'url',
+							connectionId: tab.connectionId
+						});
+					}}
+				>
+					{t('fileBrowser.openAsZarr')}
+				</Button>
 			{/if}
 
 			{#if isMarimo}