@walkthru-earth/objex 1.1.0 → 1.2.1

package/README.md

@@ -63,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
 
@@ -86,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 |

package/dist/components/browser/FileBrowser.svelte

@@ -15,6 +15,7 @@ import {
 	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';
@@ -37,19 +38,22 @@ 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;
@@ -177,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

@@ -19,6 +19,8 @@ import { tabs } from '../../stores/tabs.svelte.js';
 import type { Connection, FileEntry } from '../../types.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);
 	}
@@ -327,7 +356,7 @@ async function expandToPath(path: string) {
 				? await findNodeAtRoot(accumulatedPath)
 				: await findNodeInParent(parentNode, accumulatedPath);
 
-		if (!node || !node.entry.is_dir) break;
+		if (!node?.entry.is_dir) break;
 
 		if (node.children.length === 0) {
 			await loadChildren(node);
@@ -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';
@@ -57,17 +57,53 @@ $effect(() => {
 	}
 });
 
+// Auto-detected ?url= buckets are saved anonymously (zero-click demo flow).
+// If the first LIST returns 401/403, the bucket is actually private — flip
+// the connection to non-anonymous and open the credential dialog so the
+// user can paste keys instead of seeing a silent failure.
+$effect(() => {
+	const conn = browser.authRequired;
+	if (!conn) return;
+	handleAuthRequired(conn);
+});
+
+async function handleAuthRequired(conn: Connection) {
+	browser.clearAuthRequired();
+	await connections.update(conn.id, {
+		name: conn.name,
+		provider: conn.provider,
+		endpoint: conn.endpoint,
+		bucket: conn.bucket,
+		region: conn.region,
+		anonymous: false,
+		authMethod: conn.authMethod,
+		rootPrefix: conn.rootPrefix
+	});
+	const updated = connections.getById(conn.id);
+	if (!updated) return;
+	await ensureCredentials(updated);
+}
+
 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 +121,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/ArchiveViewer.svelte

@@ -29,7 +29,7 @@ import {
 	streamZipEntriesFromUrl
 } from '../../utils/archive';
 import { formatFileSize } from '../../utils/format';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -177,7 +177,7 @@ async function loadZip() {
 	const signal = abortController!.signal;
 
 	if (tab.source === 'remote') {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
 		try {
 			scanning = true;
 			for await (const batch of streamZipEntriesFromUrl(url, signal)) {
@@ -208,7 +208,7 @@ async function loadTar() {
 	const signal = abortController!.signal;
 
 	if (tab.source === 'remote') {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
 		try {
 			scanning = true;
 			remoteUrl = url;
@@ -240,7 +240,7 @@ async function loadTarGz() {
 
 	// For remote URLs: stream-fetch → decompress → parse progressively
 	if (tab.source === 'remote' || tab.source === 'url') {
-		const url = buildHttpsUrl(tab);
+		const url = await buildHttpsUrlAsync(tab);
 		try {
 			scanning = true;
 			const decompressedChunks: Uint8Array[] = [];

package/dist/components/viewers/CodeViewer.svelte

@@ -11,8 +11,9 @@ import type { Tab } from '../../types';
 import { copyToClipboard } from '../../utils/clipboard.js';
 import { handleLoadError } from '../../utils/error.js';
 import { extensionToShikiLang, highlightCode } from '../../utils/shiki';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrl, buildHttpsUrlAsync, canStreamDirectly } 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
@@ -91,7 +96,23 @@ const stacBadgeKey = $derived<Record<string, string>>({
 	'stac-collection': 'code.stacCollection',
 	'stac-item': 'code.stacItem'
 });
-const styleUrl = $derived(buildHttpsUrl(tab));
+// Third-party iframes can't route through the storage adapter, so the URL
+// must carry auth. Public/SAS connections resolve synchronously; `signed-s3`
+// must wait for the presign so the iframe never loads a bare `s3://` href.
+let styleUrl = $state('');
+$effect(() => {
+	const id = tab.id;
+	styleUrl = canStreamDirectly(tab) ? buildHttpsUrl(tab) : '';
+	let cancelled = false;
+	(async () => {
+		const url = await buildHttpsUrlAsync(tab);
+		if (cancelled || id !== tab.id) return;
+		styleUrl = url;
+	})();
+	return () => {
+		cancelled = true;
+	};
+});
 const stacBrowserSrc = $derived(
 	`https://radiantearth.github.io/stac-browser/#/external/${styleUrl}`
 );
@@ -353,6 +374,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}
@@ -458,7 +497,7 @@ async function copyCode() {
 		</div>
 	</div>
 
-	{#if viewMode === 'stac-browser'}
+	{#if viewMode === 'stac-browser' && styleUrl}
 		<div class="flex-1 overflow-hidden">
 			<iframe
 				src={stacBrowserSrc}
@@ -467,7 +506,7 @@ async function copyCode() {
 				allow="fullscreen"
 			></iframe>
 		</div>
-	{:else if viewMode === 'kepler'}
+	{:else if viewMode === 'kepler' && styleUrl}
 		<div class="flex-1 overflow-hidden">
 			<iframe
 				src={keplerSrc}
@@ -476,7 +515,7 @@ async function copyCode() {
 				allow="fullscreen"
 			></iframe>
 		</div>
-	{:else if viewMode === 'maputnik'}
+	{:else if viewMode === 'maputnik' && styleUrl}
 		<div class="flex-1 overflow-hidden">
 			<iframe
 				src={maputnikSrc}