@walkthru-earth/objex 0.1.0

package/dist/components/browser/CreateFolderDialog.svelte

@@ -0,0 +1,98 @@
+<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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,90 @@
+<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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,83 @@
+<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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,229 @@
+<script lang="ts">
+import { ArrowDown, ArrowUp, ArrowUpDown, FolderOpen, 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 type { FileEntry } from '../../types.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';
+
+type SortField = 'name' | 'size' | 'modified' | 'extension';
+type SortDirection = 'asc' | 'desc';
+
+let filterQuery = $state('');
+let sortField = $state<SortField>('name');
+let sortDirection = $state<SortDirection>('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 sortedAndFilteredEntries = $derived.by(() => {
+	let result = [...browser.entries];
+
+	// Filter
+	if (filterQuery) {
+		const q = filterQuery.toLowerCase();
+		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;
+});
+
+function handleFilter(query: string) {
+	filterQuery = query;
+}
+
+function handleNavigate(path: string) {
+	browser.navigateTo(path);
+}
+
+function handleSort(field: SortField) {
+	if (sortField === field) {
+		sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+	} else {
+		sortField = field;
+		sortDirection = 'asc';
+	}
+}
+
+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 sortField === 'name'}
+				{#if sortDirection === '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 sortField === 'size'}
+				{#if sortDirection === '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 sortField === 'modified'}
+				{#if sortDirection === 'asc'}
+					<ArrowUp class="size-3" />
+				{:else}
+					<ArrowDown class="size-3" />
+				{/if}
+			{/if}
+			{t('fileBrowser.modified')}
+		</button>
+	</div>
+
+	<!-- 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

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

package/dist/components/browser/FileRow.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+import PencilIcon from '@lucide/svelte/icons/pencil';
+import Trash2Icon from '@lucide/svelte/icons/trash-2';
+import FileTypeIcon from '../../file-icons/FileTypeIcon.svelte';
+import { getFileTypeInfo } from '../../file-icons/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 { formatDate, formatFileSize } from '../../utils/format.js';
+
+interface Props {
+	entry: FileEntry;
+	onDelete?: (entry: FileEntry) => void;
+	onRename?: (entry: FileEntry) => void;
+}
+
+let { entry, onDelete, onRename }: Props = $props();
+
+const info = $derived(getFileTypeInfo(entry.extension, entry.is_dir));
+let showActions = $derived(browser.canWrite && !safeLock.locked);
+
+function handleClick() {
+	if (entry.is_dir) {
+		browser.navigateTo(entry.path);
+	} else {
+		if (browser.activeConnection) {
+			tabs.open({
+				id: `${browser.activeConnection.id}:${entry.path}`,
+				name: entry.name,
+				path: entry.path,
+				source: 'remote',
+				connectionId: browser.activeConnection.id,
+				extension: entry.extension,
+				size: entry.size
+			});
+		}
+	}
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Enter' || e.key === ' ') {
+		e.preventDefault();
+		handleClick();
+	}
+}
+
+function handleDeleteClick(e: MouseEvent) {
+	e.stopPropagation();
+	onDelete?.(entry);
+}
+
+function handleRenameClick(e: MouseEvent) {
+	e.stopPropagation();
+	onRename?.(entry);
+}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="hover:bg-accent/50 border-border/40 group flex w-full cursor-pointer items-center gap-3 border-b px-3 py-2 text-start transition-colors last:border-b-0"
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	role="row"
+	tabindex="0"
+	title={info.label}
+>
+	<!-- Icon -->
+	<div class="flex shrink-0 items-center justify-center">
+		<FileTypeIcon extension={entry.extension} isDir={entry.is_dir} class="size-4" />
+	</div>
+
+	<!-- File name -->
+	<span class="text-foreground min-w-0 flex-1 truncate text-sm">
+		{entry.name}
+	</span>
+
+	<!-- Action buttons (hover-reveal) -->
+	{#if showActions}
+		<div class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+			<button
+				class="inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+				aria-label={t('fileRow.rename', { name: entry.name })}
+				onclick={handleRenameClick}
+			>
+				<PencilIcon class="size-3" />
+			</button>
+			<button
+				class="inline-flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+				aria-label={t('fileRow.delete', { name: entry.name })}
+				onclick={handleDeleteClick}
+			>
+				<Trash2Icon class="size-3" />
+			</button>
+		</div>
+	{/if}
+
+	<!-- File size -->
+	<span class="text-muted-foreground w-20 shrink-0 text-end text-xs">
+		{#if entry.is_dir}
+			--
+		{:else}
+			{formatFileSize(entry.size)}
+		{/if}
+	</span>
+
+	<!-- Modified date -->
+	<span class="text-muted-foreground w-24 shrink-0 text-end text-xs">
+		{formatDate(entry.modified)}
+	</span>
+</div>

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

@@ -0,0 +1,9 @@
+import type { FileEntry } from '../../types.js';
+interface Props {
+    entry: FileEntry;
+    onDelete?: (entry: FileEntry) => void;
+    onRename?: (entry: FileEntry) => void;
+}
+declare const FileRow: import("svelte").Component<Props, {}, "">;
+type FileRow = ReturnType<typeof FileRow>;
+export default FileRow;