@walkthru-earth/objex 0.1.0 → 1.0.0

package/README.md

@@ -13,7 +13,7 @@ graph LR
 
 ## Features
 
-- **Browse** cloud storage (S3, GCS, Azure, R2, MinIO, Wasabi, Storj, direct URLs)
+- **Browse** cloud storage (S3, GCS, Azure, R2, B2, DigitalOcean, Wasabi, Storj, Hetzner, Contabo, Linode, OVHcloud, MinIO, direct URLs)
 - **Query** Parquet, CSV, JSONL with SQL (DuckDB-WASM, cancellable queries)
 - **Visualize** GeoParquet, GeoJSON, COG, PMTiles, FlatGeobuf, Zarr on maps (MapLibre + deck.gl)
 - **View** 100+ file formats: code (30+ languages), Jupyter notebooks, PDF, 3D models, archives, media

package/dist/components/browser/FileBrowser.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-import { ArrowDown, ArrowUp, ArrowUpDown, FolderOpen, Loader2 } from '@lucide/svelte';
+import { ArrowDown, ArrowUp, ArrowUpDown, FolderOpen, Layers, Loader2 } from '@lucide/svelte';
 import FolderPlusIcon from '@lucide/svelte/icons/folder-plus';
 import { Button } from '../ui/button/index.js';
 import { ScrollArea } from '../ui/scroll-area/index.js';
 import { t } from '../../i18n/index.svelte.js';
 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 { detectZarrMarkers } from '../../utils/zarr.js';
 import Breadcrumb from './Breadcrumb.svelte';
 import CreateFolderDialog from './CreateFolderDialog.svelte';
 import DeleteConfirmDialog from './DeleteConfirmDialog.svelte';
@@ -31,6 +33,22 @@ let renameTarget = $state<FileEntry | null>(null);
 
 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'
+	});
+}
+
 const sortedAndFilteredEntries = $derived.by(() => {
 	let result = [...browser.entries];
 
@@ -172,6 +190,24 @@ function handleRename(entry: FileEntry) {
 		</button>
 	</div>
 
+	<!-- Zarr detection banner -->
+	{#if zarrDetection.detected}
+		<div class="border-border flex items-center gap-2 border-b bg-purple-50 px-3 py-1.5 dark:bg-purple-950/30">
+			<Layers class="size-3.5 shrink-0 text-purple-500" />
+			<span class="flex-1 text-xs text-purple-700 dark:text-purple-300">
+				{t('fileBrowser.zarrDetected', { version: String(zarrDetection.version ?? '?') })}
+			</span>
+			<Button
+				variant="outline"
+				size="sm"
+				class="h-6 gap-1 px-2 text-[11px]"
+				onclick={openAsZarr}
+			>
+				{t('fileBrowser.openAsZarr')}
+			</Button>
+		</div>
+	{/if}
+
 	<!-- File list -->
 	<div class="relative min-h-0 flex-1">
 		<DropZone>

package/dist/components/browser/FileRow.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import PencilIcon from '@lucide/svelte/icons/pencil';
 import Trash2Icon from '@lucide/svelte/icons/trash-2';
+import { VIEWER_DIR_EXTENSIONS } from '../../constants.js';
 import FileTypeIcon from '../../file-icons/FileTypeIcon.svelte';
 import { getFileTypeInfo } from '../../file-icons/index.js';
 import { t } from '../../i18n/index.svelte.js';
@@ -18,11 +19,15 @@ interface Props {
 
 let { entry, onDelete, onRename }: Props = $props();
 
-const info = $derived(getFileTypeInfo(entry.extension, entry.is_dir));
+function isViewerDir(e: FileEntry): boolean {
+	return e.is_dir && VIEWER_DIR_EXTENSIONS.has(e.extension);
+}
+
+const info = $derived(getFileTypeInfo(entry.extension, entry.is_dir && !isViewerDir(entry)));
 let showActions = $derived(browser.canWrite && !safeLock.locked);
 
 function handleClick() {
-	if (entry.is_dir) {
+	if (entry.is_dir && !isViewerDir(entry)) {
 		browser.navigateTo(entry.path);
 	} else {
 		if (browser.activeConnection) {
@@ -68,7 +73,7 @@ function handleRenameClick(e: MouseEvent) {
 >
 	<!-- Icon -->
 	<div class="flex shrink-0 items-center justify-center">
-		<FileTypeIcon extension={entry.extension} isDir={entry.is_dir} class="size-4" />
+		<FileTypeIcon extension={entry.extension} isDir={entry.is_dir && !isViewerDir(entry)} class="size-4" />
 	</div>
 
 	<!-- File name -->

package/dist/components/browser/FileTreeSidebar.svelte

@@ -10,6 +10,7 @@ import Loader2Icon from '@lucide/svelte/icons/loader-2';
 import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
 import SearchIcon from '@lucide/svelte/icons/search';
 import * as ContextMenu from '../ui/context-menu/index.js';
+import { VIEWER_DIR_EXTENSIONS } from '../../constants.js';
 import FileTypeIcon from '../../file-icons/FileTypeIcon.svelte';
 import { t } from '../../i18n/index.svelte.js';
 import { getAdapter } from '../../storage/index.js';
@@ -170,9 +171,6 @@ function openFile(entry: FileEntry) {
 	syncUrlParam(connection, entry.path);
 }
 
-/** Extensions that represent "virtual files" — directories that open as viewers. */
-const VIEWER_DIR_EXTENSIONS = new Set(['zarr', 'zr3']);
-
 function isViewerDir(entry: FileEntry): boolean {
 	return entry.is_dir && VIEWER_DIR_EXTENSIONS.has(entry.extension);
 }

package/dist/components/layout/AboutSheet.svelte

@@ -0,0 +1,126 @@
+<script module lang="ts">
+declare const __APP_VERSION__: string;
+declare const __THIRD_PARTY_LICENSES__: {
+	license: string;
+	packages: { name: string; url: string }[];
+}[];
+</script>
+
+<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,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle
+} from '../ui/sheet/index.js';
+import { t } from '../../i18n/index.svelte.js';
+
+interface Props {
+	open: boolean;
+}
+
+let { open = $bindable(false) }: Props = $props();
+
+let licensesOpen = $state(false);
+
+const version = __APP_VERSION__;
+
+const thirdPartyLicenses = __THIRD_PARTY_LICENSES__;
+
+$effect(() => {
+	if (!open) licensesOpen = false;
+});
+</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('about.title')}</SheetTitle>
+			<SheetDescription class="sr-only">
+				{t('about.version', { version })}
+			</SheetDescription>
+		</SheetHeader>
+
+		<div class="flex flex-col items-center gap-4 overflow-y-auto px-4 py-6 sm:px-6">
+			<!-- walkthru.earth logo/link -->
+			<a
+				href="https://walkthru.earth/links"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="group flex flex-col items-center gap-2 transition-opacity hover:opacity-80"
+			>
+				<img src="https://walkthru.earth/icon.svg" alt="walkthru.earth" class="size-12" />
+				<span class="flex items-center gap-1 text-lg font-semibold text-foreground">
+					walkthru.earth
+					<ExternalLinkIcon
+						class="size-3.5 opacity-0 transition-opacity group-hover:opacity-100"
+					/>
+				</span>
+			</a>
+
+			<!-- Version + License -->
+			<div class="flex flex-col items-center gap-1 text-sm text-muted-foreground">
+				<span>{t('about.version', { version })}</span>
+				<span>{t('about.license')}</span>
+			</div>
+
+			<!-- GitHub link -->
+			<a
+				href="https://github.com/walkthru-earth/objex"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+			>
+				<GithubIcon class="size-4" />
+				{t('about.sourceCode')}
+			</a>
+
+			<!-- Third-party licenses -->
+			<div class="w-full border-t pt-3">
+				<button
+					class="flex w-full items-center justify-between rounded-md px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+					onclick={() => {
+						licensesOpen = !licensesOpen;
+					}}
+				>
+					<span>{t('about.openSourceLicenses')}</span>
+					<ChevronDownIcon
+						class="size-3.5 transition-transform {licensesOpen ? 'rotate-180' : ''}"
+					/>
+				</button>
+
+				{#if licensesOpen}
+					<div
+						class="mt-2 flex max-h-48 flex-col gap-3 overflow-y-auto rounded-lg bg-muted/40 p-3 sm:max-h-60"
+					>
+						{#each thirdPartyLicenses as group}
+							<div>
+								<span
+									class="inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
+								>
+									{group.license}
+								</span>
+								<div class="mt-1.5 flex flex-wrap gap-1">
+									{#each group.packages as pkg}
+										<a
+											href={pkg.url}
+											target="_blank"
+											rel="noopener noreferrer"
+											class="rounded-md border border-border/50 bg-background px-2 py-0.5 text-[11px] text-muted-foreground transition-colors hover:border-border hover:text-foreground"
+										>
+											{pkg.name}
+										</a>
+									{/each}
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</SheetContent>
+</Sheet>

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

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