@vibesdotdev/storage 0.0.1 → 1.0.0-rc.3

package/dist/svelte/components/StorageBrowser.svelte

@@ -0,0 +1,436 @@
+<script lang="ts">
+	import { noteStoreFailure } from '../note-store-failure.js';
+	import { onMount } from 'svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import * as ContextMenu from '@vibesdotdev/kit/components/ui/context-menu';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Skeleton } from '@vibesdotdev/kit/components/ui/skeleton';
+	import { EmptyState } from '@vibesdotdev/kit/components/layout';
+	import StorageToolbar from './StorageToolbar.svelte';
+	import StoragePathBar from './StoragePathBar.svelte';
+	import { createStorageBrowseStore } from '../stores/storage-browse.svelte.js';
+	import {
+		compareEntries,
+		type StorageBrowserAction,
+		type StorageBrowserHeaderAction,
+		type StorageBrowserEntryDecoration,
+		type BrowseLocationContext,
+		type StorageBrowseConfig,
+		type StorageDrive,
+		type StorageEntry,
+		type StorageSortKey,
+		type StorageSortDir
+	} from '../storage-browse-runtime.js';
+
+	interface StorageBrowserStore {
+		drives: StorageDrive[];
+		entries: StorageEntry[];
+		currentDriveId: string | null;
+		currentPath: string;
+		drivesLoading: boolean;
+		entriesLoading: boolean;
+		connected: boolean;
+		error: Error | null;
+		readonly breadcrumbs: string[];
+		loadDrives(): Promise<StorageDrive[]>;
+		selectDrive(driveId: string): Promise<void>;
+		openDirectory(entry: StorageEntry): Promise<void>;
+		navigate(path: string): Promise<void>;
+		navigateUp(): Promise<void>;
+		refresh(): Promise<void>;
+	}
+
+	let {
+		adapterId,
+		config = undefined,
+		store = createStorageBrowseStore({ adapterId, config }),
+		selectionMode = 'none',
+		rowActions = () => [],
+		headerActions = [],
+		decorate = () => ({}),
+		connectCta = undefined,
+		loadOnMount = true,
+		title = 'Files',
+		onSelect,
+		onNavigate,
+		onOpenFile,
+		onActivate,
+		onUpload
+	}: {
+		/** Browse-capable adapter id (e.g. `'sharepoint'`). */
+		adapterId: string;
+		config?: StorageBrowseConfig;
+		store?: StorageBrowserStore;
+		selectionMode?: 'none' | 'file' | 'folder' | 'multi';
+		/** Per-entry actions (e.g. "Create job from this folder"). `ctx` carries the
+		 *  current driveId + path so actions can build links without the store. */
+		rowActions?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserAction[];
+		/** Toolbar actions in the header. */
+		headerActions?: StorageBrowserHeaderAction[];
+		/** Badge / disabled decoration per entry (e.g. "Job linked"). */
+		decorate?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserEntryDecoration;
+		/** CTA shown when the adapter isn't connected. */
+		connectCta?: { href: string; label: string };
+		loadOnMount?: boolean;
+		title?: string;
+		onSelect?: (entries: StorageEntry[]) => void;
+		onNavigate?: (driveId: string | null, path: string) => void;
+		/** Single left-click on a file (Finder-style select → preview). */
+		onOpenFile?: (entry: StorageEntry) => void;
+		/** Double-click / Enter on a file (Finder-style open — e.g. open in chat). */
+		onActivate?: (entry: StorageEntry) => void;
+		/** When set, the toolbar shows an Upload button that invokes this. */
+		onUpload?: () => void;
+	} = $props();
+
+	// Captured at component init: a failed store call is reported on this runtime, never an ambient one.
+	const runtimeStore = getRuntimeSvelteContext();
+	let selected = $state<StorageEntry[]>([]);
+	let view = $state<'list' | 'grid'>('list');
+	// Sort is a pure view concern — kept here (not in the store) so re-sorting
+	// never refetches the current directory.
+	let sortKey = $state<StorageSortKey>('name');
+	let sortDir = $state<StorageSortDir>('asc');
+	const sortedEntries = $derived(
+		[...store.entries].sort((a, b) => compareEntries(a, b, sortKey, sortDir))
+	);
+	const locationCtx = $derived({ driveId: store.currentDriveId, path: store.currentPath });
+
+	onMount(() => {
+		if (loadOnMount && !store.drivesLoading && store.drives.length === 0) {
+			void store.loadDrives().catch(noteStoreFailure(runtimeStore, 'loadDrives'));
+		}
+	});
+
+	function isSelected(entry: StorageEntry): boolean {
+		return selected.some((e) => e.id === entry.id);
+	}
+
+	function emitSelect(): void {
+		onSelect?.(selected);
+	}
+
+	async function selectDrive(drive: StorageDrive): Promise<void> {
+		selected = [];
+		await store.selectDrive(drive.id).catch(noteStoreFailure(runtimeStore, 'selectDrive'));
+		onNavigate?.(store.currentDriveId, store.currentPath);
+	}
+
+	async function open(entry: StorageEntry): Promise<void> {
+		if (entry.kind === 'directory') {
+			if (selectionMode === 'folder' || selectionMode === 'multi') toggle(entry);
+			await store.openDirectory(entry).catch(noteStoreFailure(runtimeStore, 'openDirectory'));
+			onNavigate?.(store.currentDriveId, store.currentPath);
+			return;
+		}
+		// File
+		if (selectionMode === 'file' || selectionMode === 'multi') {
+			toggle(entry);
+		} else {
+			onOpenFile?.(entry);
+		}
+	}
+
+	/** Finder "open" (double-click / Enter): folders navigate in; files fire the
+	 *  host activate (e.g. open in chat), falling back to preview. */
+	async function activate(entry: StorageEntry): Promise<void> {
+		if (entry.kind === 'directory') {
+			await store.openDirectory(entry).catch(noteStoreFailure(runtimeStore, 'openDirectory'));
+			onNavigate?.(store.currentDriveId, store.currentPath);
+			return;
+		}
+		if (onActivate) onActivate(entry);
+		else onOpenFile?.(entry);
+	}
+
+	/** Roving keyboard navigation across entry rows (arrows / Home / End). Enter +
+	 *  Space activate the focused row natively (it's a <button>). */
+	function rowKeydown(event: KeyboardEvent): void {
+		const { key } = event;
+		if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End') return;
+		const current = event.currentTarget;
+		if (!(current instanceof HTMLElement)) return;
+		const container = current.closest('[data-storage-list]');
+		if (!container) return;
+		event.preventDefault();
+		const rows = Array.from(container.querySelectorAll<HTMLElement>('[data-storage-row]'));
+		const idx = rows.indexOf(current);
+		const next =
+			key === 'ArrowDown'
+				? Math.min(rows.length - 1, idx + 1)
+				: key === 'ArrowUp'
+					? Math.max(0, idx - 1)
+					: key === 'Home'
+						? 0
+						: rows.length - 1;
+		rows[next]?.focus();
+	}
+
+	function toggle(entry: StorageEntry): void {
+		const wanted =
+			(entry.kind === 'directory' && (selectionMode === 'folder' || selectionMode === 'multi')) ||
+			(entry.kind === 'file' && (selectionMode === 'file' || selectionMode === 'multi'));
+		if (!wanted) return;
+		if (selectionMode === 'multi') {
+			selected = isSelected(entry) ? selected.filter((e) => e.id !== entry.id) : [...selected, entry];
+		} else {
+			selected = isSelected(entry) ? [] : [entry];
+		}
+		emitSelect();
+	}
+
+	async function crumbTo(index: number): Promise<void> {
+		const path = store.breadcrumbs.slice(0, index + 1).join('/');
+		await store.navigate(path).catch(noteStoreFailure(runtimeStore, 'navigate'));
+		onNavigate?.(store.currentDriveId, store.currentPath);
+	}
+
+	async function toRoot(): Promise<void> {
+		await store.navigate('').catch(noteStoreFailure(runtimeStore, 'navigate'));
+		onNavigate?.(store.currentDriveId, store.currentPath);
+	}
+
+	function fmtSize(bytes?: number): string {
+		if (bytes === undefined) return '';
+		const units = ['B', 'KB', 'MB', 'GB'];
+		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]}`;
+	}
+</script>
+
+<div class="flex min-w-0 flex-col gap-3 p-2 sm:p-3">
+	<!-- Header -->
+	<StorageToolbar
+		{title}
+		{headerActions}
+		{view}
+		{sortKey}
+		{sortDir}
+		onView={(v) => (view = v)}
+		onSort={(key, dir) => {
+			sortKey = key;
+			sortDir = dir;
+		}}
+		showViewControls={!!store.currentDriveId}
+		onUpload={store.connected && store.currentDriveId ? onUpload : undefined}
+		onRefresh={() => void store.refresh().catch(noteStoreFailure(runtimeStore, 'refresh'))}
+		busy={store.drivesLoading || store.entriesLoading}
+	/>
+
+	{#if !store.connected}
+		<!-- Not connected / not yet authorized -->
+		<EmptyState
+			size="sm"
+			icon="lucide:plug-zap"
+			title="Connect to see these files"
+			description="Sign in to this storage to browse, upload, and preview your files here."
+		>
+			{#if connectCta}
+				<Button type="button" size="sm" href={connectCta.href}>{connectCta.label}</Button>
+			{/if}
+		</EmptyState>
+	{:else if store.error}
+		<!-- Genuine fault — friendly message, never the raw client/API string -->
+		<EmptyState
+			size="sm"
+			icon="lucide:cloud-alert"
+			title="Couldn't load your files"
+			description="Something went wrong. Please try again."
+		>
+			<div class="flex items-center gap-2">
+				<Button
+					type="button"
+					size="sm"
+					onclick={() => void store.refresh().catch(noteStoreFailure(runtimeStore, 'refresh'))}
+				>
+					Try again
+				</Button>
+				{#if connectCta}
+					<Button type="button" size="sm" variant="ghost" href={connectCta.href}>
+						{connectCta.label}
+					</Button>
+				{/if}
+			</div>
+		</EmptyState>
+	{:else if !store.currentDriveId}
+		<!-- Drive picker -->
+		{#if store.drivesLoading}
+			<div class="flex flex-col gap-1" aria-busy="true" aria-label="Loading drives">
+				{#each [0, 1, 2] as i (i)}
+					<Skeleton class="h-9 w-full rounded-md" />
+				{/each}
+			</div>
+		{:else if store.drives.length === 0}
+			<EmptyState
+				size="sm"
+				icon="lucide:hard-drive"
+				title="Nothing here yet"
+				description="No drives are available in this location."
+			/>
+		{:else}
+			<ul class="flex flex-col gap-1">
+				{#each store.drives as drive (drive.id)}
+					<li>
+						<button
+							type="button"
+							data-storage-drive={drive.id}
+							class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+							onclick={() => void selectDrive(drive)}
+						>
+							<Icon icon="lucide:hard-drive" class="size-4 shrink-0 text-muted-foreground" />
+							<span class="truncate">{drive.name}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{:else}
+		<!-- Breadcrumbs -->
+		<StoragePathBar
+			breadcrumbs={store.breadcrumbs}
+			onRoot={() => void toRoot()}
+			onCrumb={(i) => void crumbTo(i)}
+			onUp={() => void store.navigateUp().catch(noteStoreFailure(runtimeStore, 'navigateUp'))}
+		/>
+
+		<!-- Entries -->
+		{#if store.entriesLoading}
+			<div class="flex flex-col gap-1" aria-busy="true" aria-label="Loading files">
+				{#each [0, 1, 2, 3, 4, 5] as i (i)}
+					<Skeleton class="h-8 w-full rounded-md" />
+				{/each}
+			</div>
+		{:else if store.entries.length === 0}
+			<EmptyState
+				size="sm"
+				icon="lucide:folder-open"
+				title="This folder is empty"
+				description={onUpload ? 'Drag files here, or use the Upload button to get started.' : undefined}
+			>
+				{#if onUpload}
+					<Button type="button" size="sm" onclick={onUpload}>
+						<Icon icon="lucide:upload" class="size-3.5" />
+						Upload files
+					</Button>
+				{/if}
+			</EmptyState>
+		{:else}
+			{#snippet entryItem(entry: StorageEntry)}
+				{@const deco = decorate(entry, locationCtx)}
+				{@const acts = rowActions(entry, locationCtx).filter((a) => !a.visible || a.visible(entry))}
+				<ContextMenu.Root>
+					<ContextMenu.Trigger
+						class={view === 'grid'
+							? `flex flex-col items-center gap-1 rounded-md p-2 text-center transition-colors hover:bg-accent/50 ${isSelected(entry) ? 'bg-accent text-accent-foreground' : ''} ${deco.disabled ? 'opacity-50' : ''}`
+							: `group flex w-full items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-accent/50 ${isSelected(entry) ? 'bg-accent text-accent-foreground' : ''} ${deco.disabled ? 'opacity-50' : ''}`}
+					>
+						{#if view === 'grid'}
+							<button
+								type="button"
+								data-storage-row
+								data-entry-kind={entry.kind}
+								class="flex w-full flex-col items-center gap-1 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								disabled={deco.disabled}
+								onclick={() => void open(entry)}
+								ondblclick={() => void activate(entry)}
+								onkeydown={rowKeydown}
+							>
+								<Icon
+									icon={entry.kind === 'directory' ? 'lucide:folder' : 'lucide:file'}
+									class="size-9 text-muted-foreground"
+								/>
+								<span class="line-clamp-2 w-full break-all text-[11px] leading-tight">{entry.name}</span>
+							</button>
+							{#if deco.badge}
+								<Badge variant={deco.badgeVariant ?? 'secondary'} class="px-1 text-[9px]">
+									{deco.badge}
+								</Badge>
+							{/if}
+						{:else}
+							<button
+								type="button"
+								data-storage-row
+								data-entry-kind={entry.kind}
+								class="flex min-w-0 flex-1 items-center gap-2 rounded-md text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+								disabled={deco.disabled}
+								onclick={() => void open(entry)}
+								ondblclick={() => void activate(entry)}
+								onkeydown={rowKeydown}
+							>
+								<Icon
+									icon={entry.kind === 'directory' ? 'lucide:folder' : 'lucide:file'}
+									class="size-4 shrink-0 text-muted-foreground"
+								/>
+								<span class="min-w-0 flex-1 truncate">{entry.name}</span>
+								{#if deco.badge}
+									<Badge
+										variant={deco.badgeVariant ?? 'secondary'}
+										class="hidden max-w-24 shrink-0 px-1.5 text-[10px] sm:inline-flex"
+									>
+										{deco.badge}
+									</Badge>
+								{/if}
+								{#if entry.kind === 'file' && entry.sizeBytes !== undefined}
+									<span class="ml-auto hidden shrink-0 text-[10px] text-muted-foreground sm:inline">
+										{fmtSize(entry.sizeBytes)}
+									</span>
+								{/if}
+							</button>
+							<div
+								class="flex shrink-0 items-center gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"
+							>
+								{#each acts as action (action.id)}
+									<Button
+										type="button"
+										size="sm"
+										variant={action.variant ?? 'ghost'}
+										class="h-7 shrink-0 gap-1 px-2 text-xs"
+										title={action.label}
+										aria-label={action.label}
+										onclick={() => void action.run(entry)}
+									>
+										{#if action.icon}<Icon icon={action.icon} class="size-3.5" />{/if}
+										<span class="hidden lg:inline">{action.label}</span>
+									</Button>
+								{/each}
+							</div>
+						{/if}
+					</ContextMenu.Trigger>
+					{#if acts.length > 0}
+						<ContextMenu.Content class="min-w-44">
+							{#each acts as action (action.id)}
+								<ContextMenu.Item onSelect={() => void action.run(entry)}>
+									{#if action.icon}<Icon icon={action.icon} />{/if}
+									{action.label}
+								</ContextMenu.Item>
+							{/each}
+						</ContextMenu.Content>
+					{/if}
+				</ContextMenu.Root>
+			{/snippet}
+			{#if view === 'grid'}
+				<div
+					data-storage-list
+					class="grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1"
+				>
+					{#each sortedEntries as entry (entry.id)}
+						{@render entryItem(entry)}
+					{/each}
+				</div>
+			{:else}
+				<ul data-storage-list class="flex flex-col gap-0.5">
+					{#each sortedEntries as entry (entry.id)}
+						<li>{@render entryItem(entry)}</li>
+					{/each}
+				</ul>
+			{/if}
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,51 @@
+import { type StorageBrowserAction, type StorageBrowserHeaderAction, type StorageBrowserEntryDecoration, type BrowseLocationContext, type StorageBrowseConfig, type StorageDrive, type StorageEntry } from '../storage-browse-runtime.ts';
+interface StorageBrowserStore {
+    drives: StorageDrive[];
+    entries: StorageEntry[];
+    currentDriveId: string | null;
+    currentPath: string;
+    drivesLoading: boolean;
+    entriesLoading: boolean;
+    connected: boolean;
+    error: Error | null;
+    readonly breadcrumbs: string[];
+    loadDrives(): Promise<StorageDrive[]>;
+    selectDrive(driveId: string): Promise<void>;
+    openDirectory(entry: StorageEntry): Promise<void>;
+    navigate(path: string): Promise<void>;
+    navigateUp(): Promise<void>;
+    refresh(): Promise<void>;
+}
+type $$ComponentProps = {
+    /** Browse-capable adapter id (e.g. `'sharepoint'`). */
+    adapterId: string;
+    config?: StorageBrowseConfig;
+    store?: StorageBrowserStore;
+    selectionMode?: 'none' | 'file' | 'folder' | 'multi';
+    /** Per-entry actions (e.g. "Create job from this folder"). `ctx` carries the
+     *  current driveId + path so actions can build links without the store. */
+    rowActions?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserAction[];
+    /** Toolbar actions in the header. */
+    headerActions?: StorageBrowserHeaderAction[];
+    /** Badge / disabled decoration per entry (e.g. "Job linked"). */
+    decorate?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserEntryDecoration;
+    /** CTA shown when the adapter isn't connected. */
+    connectCta?: {
+        href: string;
+        label: string;
+    };
+    loadOnMount?: boolean;
+    title?: string;
+    onSelect?: (entries: StorageEntry[]) => void;
+    onNavigate?: (driveId: string | null, path: string) => void;
+    /** Single left-click on a file (Finder-style select → preview). */
+    onOpenFile?: (entry: StorageEntry) => void;
+    /** Double-click / Enter on a file (Finder-style open — e.g. open in chat). */
+    onActivate?: (entry: StorageEntry) => void;
+    /** When set, the toolbar shows an Upload button that invokes this. */
+    onUpload?: () => void;
+};
+declare const StorageBrowser: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageBrowser = ReturnType<typeof StorageBrowser>;
+export default StorageBrowser;
+//# sourceMappingURL=StorageBrowser.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageBrowser.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,6BAA6B,EAClC,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,YAAY,EAGjB,MAAM,8BAA8B,CAAC;AAGtC,UAAU,mBAAmB;IAC5B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACtC,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACzB;AACD,KAAK,gBAAgB,GAAI;IACxB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD;+EAC2E;IAC3E,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,qBAAqB,KAAK,oBAAoB,EAAE,CAAC;IACzF,qCAAqC;IACrC,aAAa,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC7C,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,qBAAqB,KAAK,6BAA6B,CAAC;IAC9F,kDAAkD;IAClD,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,8EAA8E;IAC9E,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA2SH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/StorageBrowserPage.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import StorageBrowser from './StorageBrowser.svelte';
+	import type {
+		StorageBrowserAction,
+		StorageBrowserHeaderAction,
+		StorageBrowserEntryDecoration,
+		BrowseLocationContext,
+		StorageBrowseConfig,
+		StorageEntry
+	} from '../storage-browse-runtime.js';
+
+	// Full page surface for browsing a storage adapter — header + StorageBrowser
+	// on the runtime-resolved platform client (getVibesPlatformClient(runtime).storage.browse).
+	// Consuming apps mount this as a thin shell; no per-app data wiring.
+	let {
+		adapterId,
+		config = undefined,
+		title = 'Files',
+		description = undefined,
+		connectCta = undefined,
+		selectionMode = 'none',
+		rowActions = () => [],
+		headerActions = [],
+		decorate = () => ({}),
+		beforeBrowser,
+		onSelect,
+		onNavigate,
+		onOpenFile
+	}: {
+		adapterId: string;
+		config?: StorageBrowseConfig;
+		title?: string;
+		description?: string;
+		connectCta?: { href: string; label: string };
+		selectionMode?: 'none' | 'file' | 'folder' | 'multi';
+		rowActions?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserAction[];
+		headerActions?: StorageBrowserHeaderAction[];
+		decorate?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserEntryDecoration;
+		beforeBrowser?: import('svelte').Snippet;
+		onSelect?: (entries: StorageEntry[]) => void;
+		onNavigate?: (driveId: string | null, path: string) => void;
+		onOpenFile?: (entry: StorageEntry) => void;
+	} = $props();
+</script>
+
+<div class="mx-auto flex w-full max-w-4xl flex-col gap-6 p-6">
+	<header class="flex flex-col gap-1">
+		<h1 class="text-xl font-semibold">{title}</h1>
+		{#if description}
+			<p class="text-sm text-muted-foreground">{description}</p>
+		{/if}
+	</header>
+
+	{#if beforeBrowser}
+		{@render beforeBrowser()}
+	{/if}
+
+	<StorageBrowser
+		{adapterId}
+		{config}
+		{selectionMode}
+		{connectCta}
+		{rowActions}
+		{headerActions}
+		{decorate}
+		{onSelect}
+		{onNavigate}
+		{onOpenFile}
+		title={title}
+	/>
+</div>

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

@@ -0,0 +1,23 @@
+import type { StorageBrowserAction, StorageBrowserHeaderAction, StorageBrowserEntryDecoration, BrowseLocationContext, StorageBrowseConfig, StorageEntry } from '../storage-browse-runtime.ts';
+type $$ComponentProps = {
+    adapterId: string;
+    config?: StorageBrowseConfig;
+    title?: string;
+    description?: string;
+    connectCta?: {
+        href: string;
+        label: string;
+    };
+    selectionMode?: 'none' | 'file' | 'folder' | 'multi';
+    rowActions?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserAction[];
+    headerActions?: StorageBrowserHeaderAction[];
+    decorate?: (entry: StorageEntry, ctx: BrowseLocationContext) => StorageBrowserEntryDecoration;
+    beforeBrowser?: import('svelte').Snippet;
+    onSelect?: (entries: StorageEntry[]) => void;
+    onNavigate?: (driveId: string | null, path: string) => void;
+    onOpenFile?: (entry: StorageEntry) => void;
+};
+declare const StorageBrowserPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageBrowserPage = ReturnType<typeof StorageBrowserPage>;
+export default StorageBrowserPage;
+//# sourceMappingURL=StorageBrowserPage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageBrowserPage.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageBrowserPage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,6BAA6B,EAC7B,qBAAqB,EACrB,mBAAmB,EACnB,YAAY,EACZ,MAAM,8BAA8B,CAAC;AAEtC,KAAK,gBAAgB,GAAI;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,qBAAqB,KAAK,oBAAoB,EAAE,CAAC;IACzF,aAAa,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,qBAAqB,KAAK,6BAA6B,CAAC;IAC9F,aAAa,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AA0CH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}