@walkthru-earth/objex 1.3.1 → 1.4.0

package/dist/components/browser/Breadcrumb.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-import { ChevronRight, Home } from '@lucide/svelte';
-import { t } from '../../i18n/index.svelte.js';
-
-let { path, onNavigate }: { path: string; onNavigate: (path: string) => void } = $props();
-
-const segments = $derived.by(() => {
-	if (!path || path === '/') return [];
-	// Remove leading/trailing slashes and split
-	const clean = path.replace(/^\/+|\/+$/g, '');
-	if (!clean) return [];
-	return clean.split('/');
-});
-
-function navigateToSegment(index: number) {
-	if (index < 0) {
-		onNavigate('');
-		return;
-	}
-	const targetPath = segments.slice(0, index + 1).join('/');
-	onNavigate(targetPath);
-}
-</script>
-
-<nav class="flex items-center gap-1 overflow-x-auto text-sm" aria-label="Breadcrumb">
-	<button
-		class="text-muted-foreground hover:text-foreground flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 transition-colors hover:bg-accent"
-		onclick={() => navigateToSegment(-1)}
-		aria-label={t('breadcrumb.root')}
-	>
-		<Home class="size-3.5" />
-	</button>
-
-	{#each segments as segment, i}
-		<ChevronRight class="text-muted-foreground/50 size-3.5 shrink-0 rtl:-scale-x-100" />
-
-		{#if i === segments.length - 1}
-			<span class="text-foreground truncate rounded px-1.5 py-0.5 font-medium">
-				{segment}
-			</span>
-		{:else}
-			<button
-				class="text-muted-foreground hover:text-foreground truncate rounded px-1.5 py-0.5 transition-colors hover:bg-accent"
-				onclick={() => navigateToSegment(i)}
-			>
-				{segment}
-			</button>
-		{/if}
-	{/each}
-</nav>

package/dist/components/browser/Breadcrumb.svelte.d.ts

@@ -1,7 +0,0 @@
-type $$ComponentProps = {
-    path: string;
-    onNavigate: (path: string) => void;
-};
-declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
-type Breadcrumb = ReturnType<typeof Breadcrumb>;
-export default Breadcrumb;

package/dist/components/browser/CreateFolderDialog.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-import FolderPlusIcon from '@lucide/svelte/icons/folder-plus';
-import Loader2Icon from '@lucide/svelte/icons/loader-2';
-import { Button } from '../ui/button/index.js';
-import { Input } from '../ui/input/index.js';
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetFooter,
-	SheetHeader,
-	SheetTitle
-} from '../ui/sheet/index.js';
-import { t } from '../../i18n/index.svelte.js';
-import { browser } from '../../stores/browser.svelte.js';
-
-interface Props {
-	open: boolean;
-}
-
-let { open = $bindable(false) }: Props = $props();
-
-let folderName = $state('');
-let creating = $state(false);
-let error = $state<string | null>(null);
-
-const invalidChars = /[/\\*?"<>|]/;
-let canCreate = $derived(folderName.trim() !== '' && !invalidChars.test(folderName));
-
-$effect(() => {
-	if (open) {
-		folderName = '';
-		creating = false;
-		error = null;
-	}
-});
-
-async function handleCreate() {
-	if (!canCreate) return;
-	creating = true;
-	error = null;
-
-	try {
-		await browser.createFolder(folderName.trim());
-		open = false;
-	} catch (e) {
-		error = e instanceof Error ? e.message : String(e);
-	} finally {
-		creating = false;
-	}
-}
-
-function handleKeydown(e: KeyboardEvent) {
-	if (e.key === 'Enter' && canCreate) {
-		handleCreate();
-	}
-}
-</script>
-
-<Sheet bind:open>
-	<SheetContent side="bottom" class="sm:max-w-lg sm:mx-auto sm:rounded-t-lg">
-		<SheetHeader>
-			<div class="flex items-center gap-2">
-				<FolderPlusIcon class="size-5 text-primary" />
-				<SheetTitle>{t('createFolder.title')}</SheetTitle>
-			</div>
-			<SheetDescription>
-				{t('createFolder.description')}
-			</SheetDescription>
-		</SheetHeader>
-
-		<div class="py-4">
-			<Input
-				placeholder={t('createFolder.placeholder')}
-				bind:value={folderName}
-				onkeydown={handleKeydown}
-			/>
-			{#if error}
-				<p class="mt-2 text-sm text-destructive">{error}</p>
-			{/if}
-		</div>
-
-		<SheetFooter class="flex-row gap-2">
-			<div class="flex-1"></div>
-			<Button variant="ghost" size="sm" onclick={() => { open = false; }} disabled={creating}>
-				{t('createFolder.cancel')}
-			</Button>
-			<Button size="sm" disabled={!canCreate || creating} onclick={handleCreate}>
-				{#if creating}
-					<Loader2Icon class="me-1.5 size-4 animate-spin" />
-					{t('createFolder.creating')}
-				{:else}
-					{t('createFolder.create')}
-				{/if}
-			</Button>
-		</SheetFooter>
-	</SheetContent>
-</Sheet>

package/dist/components/browser/CreateFolderDialog.svelte.d.ts

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

package/dist/components/browser/DeleteConfirmDialog.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-import Loader2Icon from '@lucide/svelte/icons/loader-2';
-import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
-import { Button } from '../ui/button/index.js';
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetFooter,
-	SheetHeader,
-	SheetTitle
-} from '../ui/sheet/index.js';
-import { t } from '../../i18n/index.svelte.js';
-import { browser } from '../../stores/browser.svelte.js';
-import type { FileEntry } from '../../types.js';
-
-interface Props {
-	open: boolean;
-	entry: FileEntry | null;
-}
-
-let { open = $bindable(false), entry }: Props = $props();
-
-let deleting = $state(false);
-let error = $state<string | null>(null);
-
-$effect(() => {
-	if (open) {
-		deleting = false;
-		error = null;
-	}
-});
-
-async function handleDelete() {
-	if (!entry) return;
-	deleting = true;
-	error = null;
-
-	try {
-		await browser.deleteEntry(entry);
-		open = false;
-	} catch (e) {
-		error = e instanceof Error ? e.message : String(e);
-	} finally {
-		deleting = false;
-	}
-}
-</script>
-
-<Sheet bind:open>
-	<SheetContent side="bottom" class="sm:max-w-lg sm:mx-auto sm:rounded-t-lg">
-		<SheetHeader>
-			<div class="flex items-center gap-2">
-				<TriangleAlertIcon class="size-5 text-destructive" />
-				<SheetTitle>{t('deleteConfirm.title')}</SheetTitle>
-			</div>
-			<SheetDescription>
-				{t('deleteConfirm.description')}
-			</SheetDescription>
-		</SheetHeader>
-
-		<div class="py-4">
-			{#if entry}
-				<p class="text-sm">
-					Are you sure you want to delete
-					<span class="font-medium">{entry.name}</span>{entry.is_dir ? ' and all its contents' : ''}?
-				</p>
-			{/if}
-
-			{#if error}
-				<p class="mt-2 text-sm text-destructive">{error}</p>
-			{/if}
-		</div>
-
-		<SheetFooter class="flex-row gap-2">
-			<div class="flex-1"></div>
-			<Button variant="ghost" size="sm" onclick={() => { open = false; }} disabled={deleting}>
-				{t('deleteConfirm.cancel')}
-			</Button>
-			<Button variant="destructive" size="sm" disabled={deleting} onclick={handleDelete}>
-				{#if deleting}
-					<Loader2Icon class="me-1.5 size-4 animate-spin" />
-					{t('deleteConfirm.deleting')}
-				{:else}
-					{t('deleteConfirm.delete')}
-				{/if}
-			</Button>
-		</SheetFooter>
-	</SheetContent>
-</Sheet>

package/dist/components/browser/DeleteConfirmDialog.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { FileEntry } from '../../types.js';
-interface Props {
-    open: boolean;
-    entry: FileEntry | null;
-}
-declare const DeleteConfirmDialog: import("svelte").Component<Props, {}, "open">;
-type DeleteConfirmDialog = ReturnType<typeof DeleteConfirmDialog>;
-export default DeleteConfirmDialog;

package/dist/components/browser/DropZone.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-import UploadCloudIcon from '@lucide/svelte/icons/upload-cloud';
-import type { Snippet } from 'svelte';
-import { t } from '../../i18n/index.svelte.js';
-import { browser } from '../../stores/browser.svelte.js';
-import { safeLock } from '../../stores/safelock.svelte.js';
-
-let { children }: { children: Snippet } = $props();
-
-let dragOver = $state(false);
-let dragCounter = 0;
-
-let active = $derived(browser.canWrite && !safeLock.locked);
-
-function handleDragEnter(e: DragEvent) {
-	if (!active) return;
-	e.preventDefault();
-	dragCounter++;
-	dragOver = true;
-}
-
-function handleDragLeave(e: DragEvent) {
-	if (!active) return;
-	e.preventDefault();
-	dragCounter--;
-	if (dragCounter <= 0) {
-		dragOver = false;
-		dragCounter = 0;
-	}
-}
-
-function handleDragOver(e: DragEvent) {
-	if (!active) return;
-	e.preventDefault();
-}
-
-async function handleDrop(e: DragEvent) {
-	if (!active) return;
-	e.preventDefault();
-	dragOver = false;
-	dragCounter = 0;
-
-	const droppedFiles = e.dataTransfer?.files;
-	if (!droppedFiles || droppedFiles.length === 0) return;
-
-	const files: Array<{ name: string; data: Uint8Array; type?: string }> = [];
-
-	for (const file of droppedFiles) {
-		const buffer = await file.arrayBuffer();
-		files.push({
-			name: file.name,
-			data: new Uint8Array(buffer),
-			type: file.type || undefined
-		});
-	}
-
-	try {
-		await browser.uploadFiles(files);
-	} catch (err) {
-		console.error('Drop upload failed:', err);
-	}
-}
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="relative h-full"
-	ondragenter={handleDragEnter}
-	ondragleave={handleDragLeave}
-	ondragover={handleDragOver}
-	ondrop={handleDrop}
->
-	{@render children()}
-
-	{#if dragOver && active}
-		<div
-			class="absolute inset-0 z-50 flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-primary/50 bg-primary/5 backdrop-blur-sm"
-		>
-			<UploadCloudIcon class="size-10 text-primary/70" />
-			<p class="text-sm font-medium text-primary/70">{t('dropZone.message')}</p>
-		</div>
-	{/if}
-</div>

package/dist/components/browser/DropZone.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-};
-declare const DropZone: import("svelte").Component<$$ComponentProps, {}, "">;
-type DropZone = ReturnType<typeof DropZone>;
-export default DropZone;

package/dist/components/browser/FileBrowser.svelte

@@ -1,252 +0,0 @@
-<script lang="ts">
-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 { openZarrTab } from '../../utils/zarr-tab.js';
-import Breadcrumb from './Breadcrumb.svelte';
-import CreateFolderDialog from './CreateFolderDialog.svelte';
-import DeleteConfirmDialog from './DeleteConfirmDialog.svelte';
-import DropZone from './DropZone.svelte';
-import FileRow from './FileRow.svelte';
-import RenameDialog from './RenameDialog.svelte';
-import SearchBar from './SearchBar.svelte';
-import UploadButton from './UploadButton.svelte';
-
-let filterQuery = $state('');
-let sortConfig = $state<SortConfig>({ field: 'name', direction: 'asc' });
-
-let deleteDialogOpen = $state(false);
-let deleteTarget = $state<FileEntry | null>(null);
-let createFolderOpen = $state(false);
-let renameDialogOpen = $state(false);
-let renameTarget = $state<FileEntry | null>(null);
-
-let showWriteActions = $derived(browser.canWrite && !safeLock.locked);
-
-const zarrDetection = $derived(detectZarrMarkers(browser.entries.map((e: FileEntry) => e.name)));
-
-// 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;
-
-	// Filter
-	if (filterQuery) {
-		const q = filterQuery.toLowerCase();
-		result = result.filter((entry: FileEntry) => entry.name.toLowerCase().includes(q));
-	}
-
-	return sortFileEntries(result, sortConfig);
-});
-
-function handleFilter(query: string) {
-	filterQuery = query;
-}
-
-function handleNavigate(path: string) {
-	browser.navigateTo(path);
-}
-
-function handleSort(field: SortField) {
-	sortConfig = toggleSortField(sortConfig, field);
-}
-
-function handleDelete(entry: FileEntry) {
-	deleteTarget = entry;
-	deleteDialogOpen = true;
-}
-
-function handleRename(entry: FileEntry) {
-	renameTarget = entry;
-	renameDialogOpen = true;
-}
-</script>
-
-<div class="flex h-full w-full flex-col">
-	<!-- Header: connection name + breadcrumb + search + actions -->
-	<div class="border-border flex flex-col gap-2 border-b px-3 py-2">
-		{#if browser.activeConnection}
-			<div class="flex items-center gap-2">
-				<span class="text-xs font-medium text-muted-foreground">
-					{browser.activeConnection.name}
-				</span>
-				<span class="text-muted-foreground/50 text-xs">/</span>
-				<span class="text-xs text-muted-foreground">
-					{browser.activeConnection.bucket}
-				</span>
-			</div>
-		{/if}
-		<Breadcrumb path={browser.currentPrefix} onNavigate={handleNavigate} />
-		<div class="flex items-center gap-2">
-			<div class="flex-1">
-				<SearchBar onFilter={handleFilter} />
-			</div>
-			{#if showWriteActions}
-				<UploadButton />
-				<Button
-					variant="outline"
-					size="sm"
-					class="h-7 gap-1.5 px-2 text-xs"
-					onclick={() => { createFolderOpen = true; }}
-				>
-					<FolderPlusIcon class="size-3.5" />
-					{t('fileBrowser.newFolder')}
-				</Button>
-			{/if}
-		</div>
-	</div>
-
-	<!-- Column headers -->
-	<div class="border-border bg-muted/30 flex items-center gap-3 border-b px-3 py-1.5 text-xs">
-		<div class="w-4 shrink-0"></div>
-		<button
-			class="text-muted-foreground hover:text-foreground flex min-w-0 flex-1 items-center gap-1 transition-colors"
-			onclick={() => handleSort('name')}
-		>
-			{t('fileBrowser.name')}
-			{#if sortConfig.field === 'name'}
-				{#if sortConfig.direction === 'asc'}
-					<ArrowUp class="size-3" />
-				{:else}
-					<ArrowDown class="size-3" />
-				{/if}
-			{:else}
-				<ArrowUpDown class="size-3 opacity-0 group-hover:opacity-100" />
-			{/if}
-		</button>
-		<button
-			class="text-muted-foreground hover:text-foreground flex w-20 shrink-0 items-center justify-end gap-1 transition-colors"
-			onclick={() => handleSort('size')}
-		>
-			{#if sortConfig.field === 'size'}
-				{#if sortConfig.direction === 'asc'}
-					<ArrowUp class="size-3" />
-				{:else}
-					<ArrowDown class="size-3" />
-				{/if}
-			{/if}
-			{t('fileBrowser.size')}
-		</button>
-		<button
-			class="text-muted-foreground hover:text-foreground flex w-24 shrink-0 items-center justify-end gap-1 transition-colors"
-			onclick={() => handleSort('modified')}
-		>
-			{#if sortConfig.field === 'modified'}
-				{#if sortConfig.direction === 'asc'}
-					<ArrowUp class="size-3" />
-				{:else}
-					<ArrowDown class="size-3" />
-				{/if}
-			{/if}
-			{t('fileBrowser.modified')}
-		</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={() => {
-					if (!browser.activeConnection) return;
-					openZarrTab(browser.currentPrefix, {
-						source: 'remote',
-						connectionId: browser.activeConnection.id,
-						bucketFallback: browser.activeConnection.bucket
-					});
-				}}
-			>
-				{t('fileBrowser.openAsZarr')}
-			</Button>
-		</div>
-	{/if}
-
-	<!-- File list -->
-	<div class="relative min-h-0 flex-1">
-		<DropZone>
-			{#if browser.loading}
-				<div class="flex h-full items-center justify-center">
-					<Loader2 class="text-muted-foreground size-6 animate-spin" />
-				</div>
-			{:else if browser.error}
-				<div class="flex h-full items-center justify-center px-4">
-					<p class="text-destructive text-sm">{browser.error}</p>
-				</div>
-			{:else if sortedAndFilteredEntries.length === 0}
-				<div class="flex h-full flex-col items-center justify-center gap-2 px-4">
-					<FolderOpen class="text-muted-foreground/50 size-10" />
-					{#if filterQuery}
-						<p class="text-muted-foreground text-sm">{t('fileBrowser.noMatch', { query: filterQuery })}</p>
-					{:else}
-						<p class="text-muted-foreground text-sm">{t('fileBrowser.empty')}</p>
-					{/if}
-				</div>
-			{:else}
-				<ScrollArea class="h-full">
-					<div role="table" aria-label="File list">
-						{#each sortedAndFilteredEntries as entry (entry.path)}
-							<FileRow
-								{entry}
-								onDelete={handleDelete}
-								onRename={handleRename}
-							/>
-						{/each}
-					</div>
-				</ScrollArea>
-			{/if}
-		</DropZone>
-	</div>
-
-	<!-- Upload progress bar -->
-	{#if browser.uploading}
-		<div class="border-border border-t px-3 py-1.5">
-			<div class="flex items-center gap-2 text-xs text-muted-foreground">
-				<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
-					<div
-						class="h-full rounded-full bg-primary transition-all"
-						style="width: {browser.uploadProgress.total > 0 ? (browser.uploadProgress.current / browser.uploadProgress.total) * 100 : 0}%"
-					></div>
-				</div>
-				<span>{browser.uploadProgress.current}/{browser.uploadProgress.total}</span>
-			</div>
-		</div>
-	{/if}
-</div>
-
-<DeleteConfirmDialog bind:open={deleteDialogOpen} entry={deleteTarget} />
-<CreateFolderDialog bind:open={createFolderOpen} />
-<RenameDialog bind:open={renameDialogOpen} entry={renameTarget} />

package/dist/components/browser/FileBrowser.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const FileBrowser: import("svelte").Component<Record<string, never>, {}, "">;
-type FileBrowser = ReturnType<typeof FileBrowser>;
-export default FileBrowser;