@vibesdotdev/storage 0.0.2 → 1.0.0-rc.3

package/dist/svelte/components/StorageCollectionManager.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Card, CardContent, CardHeader, CardTitle } from '@vibesdotdev/kit/components/ui/card';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { ConfirmDialog } from '@vibesdotdev/kit/components/ui/confirm-dialog';
+	import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@vibesdotdev/kit/components/ui/dialog';
+	import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@vibesdotdev/kit/components/ui/dropdown-menu';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import { formatDistanceToNow } from 'date-fns';
+	import type { Collection } from './storage-media.js';
+
+	interface Props {
+		collections: Collection[];
+		onCreate?: (data: { name: string; description: string }) => void;
+		onDelete?: (id: string) => void;
+		onSelect?: (collection: Collection) => void;
+	}
+
+	let { collections, onCreate, onDelete, onSelect }: Props = $props();
+
+	let showCreateDialog = $state(false);
+	let newCollectionName = $state('');
+	let newCollectionDescription = $state('');
+	let isCreating = $state(false);
+	let deleteTargetId = $state<string | null>(null);
+	let deleteDialogOpen = $state(false);
+
+	async function handleCreate() {
+		if (!newCollectionName.trim()) return;
+
+		isCreating = true;
+		try {
+			if (onCreate) {
+				onCreate({
+					name: newCollectionName.trim(),
+					description: newCollectionDescription.trim()
+				});
+			}
+			showCreateDialog = false;
+			newCollectionName = '';
+			newCollectionDescription = '';
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	function handleDelete(id: string) {
+		deleteTargetId = id;
+		deleteDialogOpen = true;
+	}
+
+	function confirmDelete() {
+		if (deleteTargetId && onDelete) onDelete(deleteTargetId);
+		deleteDialogOpen = false;
+		deleteTargetId = null;
+	}
+</script>
+
+<div class="space-y-4">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<h3 class="text-lg font-medium">Collections</h3>
+		<Button onclick={() => (showCreateDialog = true)}>
+			<Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
+			New Collection
+		</Button>
+	</div>
+
+	<!-- Collections Grid -->
+	{#if collections.length === 0}
+		<Card>
+			<CardContent class="p-8 text-center">
+				<Icon icon="lucide:folder" class="text-muted-foreground mx-auto h-12 w-12" />
+				<h3 class="mt-4 text-lg font-semibold">No Collections</h3>
+				<p class="text-muted-foreground mt-2">
+					Create collections to organize your media files into groups.
+				</p>
+				<Button class="mt-4" onclick={() => (showCreateDialog = true)}>
+					<Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
+					Create Collection
+				</Button>
+			</CardContent>
+		</Card>
+	{:else}
+		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+			{#each collections as collection}
+				<Card class="group cursor-pointer transition-all hover:shadow-md" onclick={() => onSelect?.(collection)}>
+					<CardHeader class="pb-3">
+						<div class="flex items-start justify-between">
+							<div class="flex items-center gap-3">
+								<div class="bg-muted flex h-10 w-10 items-center justify-center rounded-lg">
+									<Icon icon="lucide:folder" class="h-5 w-5 text-vibes-500" />
+								</div>
+								<div>
+									<CardTitle class="text-base">{collection.name}</CardTitle>
+									<p class="text-muted-foreground text-sm">
+										{collection.itemCount} item{collection.itemCount === 1 ? '' : 's'}
+									</p>
+								</div>
+							</div>
+							<DropdownMenu>
+								<DropdownMenuTrigger>
+									{#snippet child({ props })}
+										<Button
+											{...props}
+											variant="ghost"
+											size="icon-sm"
+											class="opacity-0 group-hover:opacity-100"
+											onclick={(e: Event) => e.stopPropagation()}
+										>
+											<Icon icon="lucide:ellipsis-vertical" class="h-4 w-4" />
+										</Button>
+									{/snippet}
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end">
+									<DropdownMenuItem>
+										<Icon icon="lucide:edit-2" class="mr-2 h-4 w-4" />
+										Edit
+									</DropdownMenuItem>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem
+										class="text-destructive"
+										onclick={() => handleDelete(collection.id)}
+									>
+										<Icon icon="lucide:trash-2" class="mr-2 h-4 w-4" />
+										Delete
+									</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
+						</div>
+					</CardHeader>
+					<CardContent>
+						{#if collection.description}
+							<p class="text-muted-foreground line-clamp-2 text-sm">
+								{collection.description}
+							</p>
+						{/if}
+						<p class="text-muted-foreground mt-2 text-xs">
+							Created {formatDistanceToNow(collection.createdAt, { addSuffix: true })}
+						</p>
+					</CardContent>
+				</Card>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<!-- Create Collection Dialog -->
+<Dialog bind:open={showCreateDialog}>
+	<DialogContent>
+		<DialogHeader>
+			<DialogTitle>Create Collection</DialogTitle>
+			<DialogDescription>Create a new collection to organize your media files.</DialogDescription>
+		</DialogHeader>
+		<div class="space-y-4 py-4">
+			<div class="space-y-2">
+				<Label for="name">Name</Label>
+				<Input
+					id="name"
+					placeholder="My Collection"
+					bind:value={newCollectionName}
+				/>
+			</div>
+			<div class="space-y-2">
+				<Label for="description">Description</Label>
+				<Textarea
+					id="description"
+					placeholder="Optional description..."
+					bind:value={newCollectionDescription}
+				/>
+			</div>
+		</div>
+		<div class="flex justify-end gap-2">
+			<Button variant="outline" onclick={() => (showCreateDialog = false)}>Cancel</Button>
+			<Button onclick={handleCreate} disabled={!newCollectionName.trim() || isCreating}>
+				{#if isCreating}
+					Creating...
+				{:else}
+					Create
+				{/if}
+			</Button>
+		</div>
+	</DialogContent>
+</Dialog>
+
+<ConfirmDialog
+	bind:open={deleteDialogOpen}
+	title="Delete Collection"
+	description="Are you sure you want to delete this collection? This action cannot be undone."
+	onconfirm={confirmDelete}
+/>

package/dist/svelte/components/StorageCollectionManager.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Collection } from './storage-media.ts';
+interface Props {
+    collections: Collection[];
+    onCreate?: (data: {
+        name: string;
+        description: string;
+    }) => void;
+    onDelete?: (id: string) => void;
+    onSelect?: (collection: Collection) => void;
+}
+declare const StorageCollectionManager: import("svelte").Component<Props, {}, "">;
+type StorageCollectionManager = ReturnType<typeof StorageCollectionManager>;
+export default StorageCollectionManager;
+//# sourceMappingURL=StorageCollectionManager.svelte.d.ts.map

package/dist/svelte/components/StorageCollectionManager.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageCollectionManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageCollectionManager.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGpD,UAAU,KAAK;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CAC5C;AAqKF,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/svelte/components/StorageDetailsPane.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { EmptyState } from '@vibesdotdev/kit/components/layout';
+	import { getStorageProviderTypeShortLabel } from '../storage-display.js';
+	import type {
+		StorageEntry,
+		StorageTarget,
+		StoragePreview,
+		StorageExplorerAction
+	} from '../storage-explorer-runtime.js';
+
+	// Right-hand details pane: preview + metadata + actions for the selected entry.
+	// The `preview` is host-extensible (resolved by the explorer's `previewFor`),
+	// and `actions` are the built-in + host-supplied context actions.
+	let {
+		entry = null,
+		target = null,
+		preview = { kind: 'none' },
+		actions = []
+	}: {
+		entry?: StorageEntry | null;
+		target?: StorageTarget | null;
+		preview?: StoragePreview;
+		actions?: StorageExplorerAction[];
+	} = $props();
+
+	function fmtSize(bytes?: number): string {
+		if (bytes === undefined) return '';
+		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+		let n = bytes;
+		let u = 0;
+		while (n >= 1024 && u < units.length - 1) {
+			n /= 1024;
+			u++;
+		}
+		return `${n < 10 && u > 0 ? n.toFixed(1) : Math.round(n)} ${units[u]}`;
+	}
+
+	function fmtDate(value?: string): string {
+		if (!value) return '';
+		const date = new Date(value);
+		if (Number.isNaN(date.getTime())) return value;
+		return date.toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	function displayPath(path: string): string {
+		return path.replace(/^\/+/, '') || '/';
+	}
+
+	const visibleActions = $derived(
+		entry && target ? actions.filter((a) => !a.visible || a.visible(entry!, target!)) : []
+	);
+
+	const previewLabel = $derived(
+		entry
+			? preview.kind === 'image'
+				? `Image preview for ${entry.name}`
+				: preview.kind === 'pdf'
+					? `PDF preview for ${entry.name}`
+					: preview.kind === 'text'
+						? `Text preview for ${entry.name}`
+						: `Preview for ${entry.name}`
+			: 'Storage preview'
+	);
+</script>
+
+{#snippet metaRow(label: string, value: string)}
+	<div class="flex items-baseline justify-between gap-3">
+		<dt class="shrink-0 text-muted-foreground">{label}</dt>
+		<dd class="break-words text-right font-medium text-foreground">{value}</dd>
+	</div>
+{/snippet}
+
+<aside class="flex h-full w-full flex-col gap-4 overflow-y-auto bg-muted/20 p-4">
+	{#if !entry}
+		<div class="flex flex-1 items-center justify-center">
+			<EmptyState
+				size="sm"
+				icon="lucide:panel-right"
+				title="No file selected"
+				description="Select a file to see its details and actions."
+			/>
+		</div>
+	{:else}
+		<!-- Preview -->
+		<div
+			class="flex {preview.kind === 'pdf'
+				? 'aspect-[3/4]'
+				: 'aspect-square'} w-full items-center justify-center overflow-hidden rounded-lg border border-border bg-muted/40 shadow-sm"
+			aria-label={previewLabel}
+		>
+			{#if preview.kind === 'image' && preview.url}
+				<img src={preview.url} alt={entry.name} class="max-h-full max-w-full object-contain" />
+			{:else if preview.kind === 'pdf' && preview.url}
+				<iframe src={preview.url} title={entry.name} class="h-full w-full border-0"></iframe>
+			{:else if preview.kind === 'text' && preview.text}
+				<pre class="h-full w-full overflow-auto p-2 text-left text-[10px] leading-snug">{preview.text}</pre>
+			{:else if preview.kind === 'link' && preview.url}
+				<a
+					href={preview.url}
+					target="_blank"
+					rel="noopener"
+					class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					<Icon icon="lucide:external-link" class="size-3.5" />
+					{preview.label ?? 'Open'}
+				</a>
+			{:else}
+				<Icon
+					icon={entry.kind === 'directory' ? 'lucide:folder' : 'lucide:file'}
+					class="size-12 text-muted-foreground"
+				/>
+			{/if}
+		</div>
+
+		<!-- Name + metadata -->
+		<div class="flex flex-col gap-3">
+			<h3 class="break-words text-sm font-semibold leading-snug">{entry.name}</h3>
+			<dl class="flex flex-col gap-1.5 text-xs">
+				{@render metaRow('Kind', entry.kind === 'directory' ? 'Folder' : 'File')}
+				{#if target}
+					{@render metaRow('Location', target.name)}
+					{@render metaRow('Storage', getStorageProviderTypeShortLabel(target.type))}
+				{/if}
+				{@render metaRow('Path', displayPath(entry.path))}
+				{#if entry.kind === 'file' && entry.sizeBytes !== undefined}
+					{@render metaRow('Size', fmtSize(entry.sizeBytes))}
+				{/if}
+				{#if entry.modifiedAt}
+					{@render metaRow('Modified', fmtDate(entry.modifiedAt))}
+				{/if}
+			</dl>
+		</div>
+
+		<!-- Actions -->
+		{#if visibleActions.length && target}
+			<div class="mt-auto flex flex-col gap-1.5 border-t border-border pt-3">
+				{#each visibleActions as action (action.id)}
+					<Button
+						type="button"
+						size="sm"
+						variant={action.variant === 'destructive' ? 'outline' : (action.variant ?? 'outline')}
+						class="min-w-0 justify-start gap-2 {action.variant === 'destructive'
+							? 'text-destructive hover:text-destructive'
+							: ''}"
+						onclick={() => void action.run(entry!, target!)}
+					>
+						{#if action.icon}<Icon icon={action.icon} class="size-3.5 shrink-0" />{/if}
+						<span class="truncate">{action.label}</span>
+					</Button>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</aside>

package/dist/svelte/components/StorageDetailsPane.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { StorageEntry, StorageTarget, StoragePreview, StorageExplorerAction } from '../storage-explorer-runtime.ts';
+type $$ComponentProps = {
+    entry?: StorageEntry | null;
+    target?: StorageTarget | null;
+    preview?: StoragePreview;
+    actions?: StorageExplorerAction[];
+};
+declare const StorageDetailsPane: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageDetailsPane = ReturnType<typeof StorageDetailsPane>;
+export default StorageDetailsPane;
+//# sourceMappingURL=StorageDetailsPane.svelte.d.ts.map

package/dist/svelte/components/StorageDetailsPane.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageDetailsPane.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageDetailsPane.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,MAAM,gCAAgC,CAAC;AAExC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAoIH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/StorageDropzone.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+	// Drag-and-drop upload surface: wraps arbitrary content and overlays a drop
+	// hint. Backend-agnostic — it only surfaces the dropped File[]; the parent
+	// resolves the target + key and performs the upload through the platform
+	// client. Reused by the explorer and (later) chat-svelte's attach flow.
+	let {
+		onDrop,
+		disabled = false,
+		children
+	}: {
+		onDrop: (files: File[]) => void | Promise<void>;
+		disabled?: boolean;
+		children: import('svelte').Snippet;
+	} = $props();
+
+	let dragging = $state(false);
+	let busy = $state(false);
+	let rootEl = $state<HTMLElement | null>(null);
+
+	function handleDragOver(e: DragEvent): void {
+		if (disabled) return;
+		e.preventDefault();
+		dragging = true;
+	}
+
+	function handleDragLeave(e: DragEvent): void {
+		// Clear the overlay only when the pointer truly exits the drop zone (not
+		// when it crosses into a child element). `relatedTarget` is where the cursor
+		// is going — if it's null (left the window/document) or outside the container,
+		// the drag really left; otherwise a child boundary is being crossed and we
+		// keep the overlay active.
+		const related = e.relatedTarget;
+		if (!(related instanceof Node) || !rootEl?.contains(related)) dragging = false;
+	}
+
+	async function handleDrop(e: DragEvent): Promise<void> {
+		if (disabled) return;
+		e.preventDefault();
+		dragging = false;
+		const files = Array.from(e.dataTransfer?.files ?? []);
+		if (files.length === 0) return;
+		busy = true;
+		try {
+			await onDrop(files);
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<div
+	bind:this={rootEl}
+	class="relative h-full w-full"
+	role="region"
+	aria-label="File drop zone"
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondrop={handleDrop}
+>
+	{@render children()}
+	{#if dragging || busy}
+		<div
+			class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed border-primary bg-background/80"
+		>
+			<div class="flex items-center gap-2 text-sm font-medium text-primary">
+				<Icon
+					icon={busy ? 'lucide:loader-2' : 'lucide:upload'}
+					class="size-5 {busy ? 'animate-spin' : ''}"
+				/>
+				{busy ? 'Uploading…' : 'Drop files to upload'}
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/svelte/components/StorageDropzone.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    onDrop: (files: File[]) => void | Promise<void>;
+    disabled?: boolean;
+    children: import('svelte').Snippet;
+};
+declare const StorageDropzone: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageDropzone = ReturnType<typeof StorageDropzone>;
+export default StorageDropzone;
+//# sourceMappingURL=StorageDropzone.svelte.d.ts.map

package/dist/svelte/components/StorageDropzone.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageDropzone.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACnC,CAAC;AA+DH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}