@walkthru-earth/objex 0.1.0 → 1.1.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
@@ -13,7 +18,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
@@ -92,12 +97,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

@@ -1,12 +1,20 @@
 <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 {
+	type SortConfig,
+	type SortField,
+	sortFileEntries,
+	toggleSortField
+} from '../../utils/file-sort.js';
+import { detectZarrMarkers } from '../../utils/zarr.js';
 import Breadcrumb from './Breadcrumb.svelte';
 import CreateFolderDialog from './CreateFolderDialog.svelte';
 import DeleteConfirmDialog from './DeleteConfirmDialog.svelte';
@@ -16,12 +24,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);
@@ -31,8 +35,24 @@ 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];
+	let result = browser.entries;
 
 	// Filter
 	if (filterQuery) {
@@ -40,28 +60,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) {
@@ -73,12 +72,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) {
@@ -134,8 +128,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" />
@@ -148,8 +142,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" />
@@ -161,8 +155,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" />
@@ -172,6 +166,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,13 +10,14 @@ 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';
 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';
 
 let {
@@ -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;