@vibesdotdev/storage 0.0.2 → 1.0.0-rc.4

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

@@ -0,0 +1,48 @@
+import { type StorageTarget, type StorageEntry, type StorageExplorerScope, type StorageExplorerAction, type StoragePreview, type ConnectableScope, type StorageExplorerTransport } from '../storage-explorer-runtime.ts';
+import type { StorageBrowserEntryDecoration, BrowseLocationContext } from '../storage-browse-runtime.ts';
+type $$ComponentProps = {
+    scope?: StorageExplorerScope;
+    title?: string;
+    /** Preferred provider selected by a host-owned locations rail. */
+    providerId?: string;
+    /** Open the provider connection flow when this surface mounts. */
+    connect?: boolean;
+    connectCta?: {
+        href: string;
+        label: string;
+    };
+    /** Host actions appended to the built-ins (download/copy-link/delete + AI).
+     *  `ctx` carries the current drive + path so actions can build links. */
+    contextActions?: (entry: StorageEntry, target: StorageTarget, ctx: BrowseLocationContext) => StorageExplorerAction[];
+    /** Host badge / disabled decoration per entry (e.g. "Job linked", "Pinned").
+     *  `target` is the drive the entry lives on (for backend-keyed state). */
+    decorate?: (entry: StorageEntry, ctx: BrowseLocationContext, target: StorageTarget) => StorageBrowserEntryDecoration;
+    /** Resolve a details-pane preview for an entry (default: image thumbnails). */
+    previewFor?: (entry: StorageEntry, target: StorageTarget) => StoragePreview | Promise<StoragePreview>;
+    /** Wire "Edit/Create with AI" to the host's chat surface (receives a storage ref). */
+    onAiAction?: (mode: 'edit' | 'create', ref: string, entry: StorageEntry) => void;
+    canUpload?: boolean;
+    /** Whether the owner has certified permanent-delete confirmation semantics. */
+    canDelete?: boolean;
+    /** Whether previews, downloads, and share links may leave this surface.
+     * Native hosts keep this false until bounded binary streaming is projected. */
+    canOpenObjects?: boolean;
+    /** Native hosts require the trusted daemon projection; web hosts use auto fallback. */
+    transport?: StorageExplorerTransport;
+    /** Named Vibes Cloud environment used by the projected connection-status probe. */
+    environmentId?: string;
+    /** Scopes the user can connect a provider into (personal + admin'd orgs).
+     *  When provided, a "+ Connect storage" entry opens the connect dialog. */
+    connectScopes?: ConnectableScope[];
+    /** Absolute platform origin for the cross-app admin-consent link (org SharePoint). */
+    platformOrigin?: string;
+    /** Absolute auth origin for the personal Microsoft account-link flow. */
+    authOrigin?: string;
+    /** Display-label overrides for scope ids (orgId → name) — the surface knows
+     *  org names (its layout org list); the server only has ids. For sidebar groups. */
+    scopeLabels?: Record<string, string>;
+};
+declare const StorageExplorer: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageExplorer = ReturnType<typeof StorageExplorer>;
+export default StorageExplorer;
+//# sourceMappingURL=StorageExplorer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageExplorer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageExplorer.svelte.ts"],"names":[],"mappings":"AAsBA,OAAO,EAYL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAGrB,KAAK,wBAAwB,EAC7B,MAAM,gCAAgC,CAAC;AAEzC,OAAO,KAAK,EAEV,6BAA6B,EAC7B,qBAAqB,EACrB,MAAM,8BAA8B,CAAC;AAEtC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C;6EACyE;IACzE,cAAc,CAAC,EAAE,CAChB,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EACrB,GAAG,EAAE,qBAAqB,KACtB,qBAAqB,EAAE,CAAC;IAC7B;8EAC0E;IAC1E,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,YAAY,EACnB,GAAG,EAAE,qBAAqB,EAC1B,MAAM,EAAE,aAAa,KACjB,6BAA6B,CAAC;IACnC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CACZ,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,KACjB,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9C,sFAAsF;IACtF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;mFAC+E;IAC/E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uFAAuF;IACvF,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;+EAC2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;wFACoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC,CAAC;AAgrBH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/StorageFileBrowser.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { NativeSelect, NativeSelectOption } from '@vibesdotdev/kit/components/ui/native-select';
+	import { Tabs, TabsList, TabsTrigger } from '@vibesdotdev/kit/components/ui/tabs';
+	import StorageFileCard from './StorageFileCard.svelte';
+	import type { FileItem } from './storage-media.js';
+
+	interface Props {
+		files: FileItem[];
+		total: number;
+		hasMore: boolean;
+		onLoadMore: () => void;
+		onDelete?: (id: string) => void;
+		onPreview?: (file: FileItem) => void;
+		onSearch?: (query: string) => void;
+		onFilter?: (filters: { mediaType?: string; isPublic?: boolean }) => void;
+	}
+
+	let {
+		files,
+		total,
+		hasMore,
+		onLoadMore,
+		onDelete,
+		onPreview,
+		onSearch,
+		onFilter
+	}: Props = $props();
+
+	let viewMode: 'grid' | 'list' = $state('grid');
+	let searchQuery = $state('');
+	let selectedMediaType = $state<string>('all');
+	let showFilters = $state(false);
+
+	function handleSearch() {
+		if (onSearch) onSearch(searchQuery);
+	}
+
+	function handleClearSearch() {
+		searchQuery = '';
+		if (onSearch) onSearch('');
+	}
+
+	function handleMediaTypeChange(value: string) {
+		selectedMediaType = value;
+		if (onFilter) {
+			onFilter({
+				mediaType: value === 'all' ? undefined : value
+			});
+		}
+	}
+</script>
+
+<div class="space-y-4">
+	<!-- Toolbar -->
+	<div class="flex flex-wrap items-center gap-3">
+		<!-- Search -->
+		<div class="relative flex-1 min-w-[200px]">
+			<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-muted-foreground">
+				<Icon icon="lucide:search" class="h-4 w-4" />
+			</span>
+			<Input
+				type="search"
+				placeholder="Search files..."
+				class="pl-9 pr-8"
+				bind:value={searchQuery}
+				onkeyup={(e: KeyboardEvent) => e.key === 'Enter' && handleSearch()}
+			/>
+			{#if searchQuery}
+				<button
+					type="button"
+					class="absolute inset-y-0 right-2 flex items-center text-muted-foreground hover:text-foreground focus-visible:outline-none"
+					onclick={handleClearSearch}
+					aria-label="Clear search"
+				>
+					<Icon icon="lucide:x" class="h-4 w-4" />
+				</button>
+			{/if}
+		</div>
+
+		<!-- Filters -->
+		<Button aria-label={showFilters ? 'Hide filters' : 'Show filters'} title={showFilters ? 'Hide filters' : 'Show filters'} aria-expanded={showFilters}
+			variant="outline"
+			size="icon"
+			class={showFilters ? 'bg-accent' : ''}
+			onclick={() => showFilters = !showFilters}
+		>
+			<Icon icon="lucide:filter" class="h-4 w-4" />
+		</Button>
+
+		<!-- Media type filter -->
+		<NativeSelect
+			class="w-[140px]"
+			bind:value={selectedMediaType}
+			onchange={(e) => handleMediaTypeChange(e.currentTarget.value)}
+		>
+			<NativeSelectOption value="all">All types</NativeSelectOption>
+			<NativeSelectOption value="image">Images</NativeSelectOption>
+			<NativeSelectOption value="video">Videos</NativeSelectOption>
+			<NativeSelectOption value="audio">Audio</NativeSelectOption>
+			<NativeSelectOption value="document">Documents</NativeSelectOption>
+			<NativeSelectOption value="archive">Archives</NativeSelectOption>
+			<NativeSelectOption value="other">Other</NativeSelectOption>
+		</NativeSelect>
+
+		<!-- View mode toggle -->
+		<Tabs value={viewMode} onValueChange={(v) => viewMode = v as 'grid' | 'list'}>
+			<TabsList class="h-9">
+				<TabsTrigger value="grid" class="px-3">
+					<Icon icon="lucide:grid-3-x-3" class="h-4 w-4" />
+				</TabsTrigger>
+				<TabsTrigger value="list" class="px-3">
+					<Icon icon="lucide:list" class="h-4 w-4" />
+				</TabsTrigger>
+			</TabsList>
+		</Tabs>
+
+		<!-- Upload button -->
+		<Button href="/storage/upload">
+			<Icon icon="lucide:upload" class="mr-2 h-4 w-4" />
+			Upload
+		</Button>
+	</div>
+
+	<!-- Results count -->
+	<div class="flex items-center justify-between text-sm text-muted-foreground">
+		<span>{total} file{total === 1 ? '' : 's'}</span>
+		{#if selectedMediaType !== 'all'}
+			<Badge variant="secondary" class="cursor-pointer" onclick={() => handleMediaTypeChange('all')}>
+				{selectedMediaType} ×
+			</Badge>
+		{/if}
+	</div>
+
+	<!-- Files grid/list -->
+	{#if files.length === 0}
+		<div class="flex flex-col items-center justify-center rounded-lg border border-dashed py-12">
+			<div class="mb-4 rounded-full bg-muted p-4">
+				<Icon icon="lucide:search" class="h-8 w-8 text-muted-foreground" />
+			</div>
+			<h3 class="text-lg font-medium">No files found</h3>
+			<p class="mt-1 text-sm text-muted-foreground">
+				{searchQuery ? 'Try adjusting your search or filters' : 'Upload your first file to get started'}
+			</p>
+			{#if !searchQuery}
+				<Button class="mt-4" href="/storage/upload">
+					<Icon icon="lucide:upload" class="mr-2 h-4 w-4" />
+					Upload File
+				</Button>
+			{/if}
+		</div>
+	{:else if viewMode === 'grid'}
+		<div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+			{#each files as file (file.id)}
+				<StorageFileCard {file} {onDelete} {onPreview} />
+			{/each}
+		</div>
+	{:else}
+		<div class="rounded-lg border">
+			{#each files as file, i (file.id)}
+				<div class="flex items-center gap-4 p-4 {i !== files.length - 1 ? 'border-b' : ''}">
+					<div class="h-12 w-12 shrink-0 overflow-hidden rounded">
+						{#if file.thumbnailUrl}
+							<img src={file.thumbnailUrl} alt={file.filename} class="h-full w-full object-cover" />
+						{:else}
+							<div class="flex h-full w-full items-center justify-center bg-muted text-muted-foreground">
+								{file.mediaType[0].toUpperCase()}
+							</div>
+						{/if}
+					</div>
+					<div class="min-w-0 flex-1">
+						<p class="truncate font-medium">{file.title || file.originalFilename}</p>
+						<p class="text-sm text-muted-foreground">
+							{file.mediaType} • {file.fileSize} bytes
+						</p>
+					</div>
+					<div class="flex items-center gap-2">
+						<Button variant="ghost" size="sm" href={file.url}>
+							Download
+						</Button>
+						<Button aria-label="Delete file" title="Delete file" variant="ghost" size="icon-sm" onclick={() => onDelete?.(file.id)}>
+							<Icon icon="lucide:x" class="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Load more -->
+	{#if hasMore}
+		<div class="flex justify-center pt-4">
+			<Button variant="outline" onclick={onLoadMore}>
+				Load more
+			</Button>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { FileItem } from './storage-media.ts';
+interface Props {
+    files: FileItem[];
+    total: number;
+    hasMore: boolean;
+    onLoadMore: () => void;
+    onDelete?: (id: string) => void;
+    onPreview?: (file: FileItem) => void;
+    onSearch?: (query: string) => void;
+    onFilter?: (filters: {
+        mediaType?: string;
+        isPublic?: boolean;
+    }) => void;
+}
+declare const StorageFileBrowser: import("svelte").Component<Props, {}, "">;
+type StorageFileBrowser = ReturnType<typeof StorageFileBrowser>;
+export default StorageFileBrowser;
+//# sourceMappingURL=StorageFileBrowser.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageFileBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageFileBrowser.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGlD,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACzE;AA+KF,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/StorageFileCard.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		DropdownMenu,
+		DropdownMenuContent,
+		DropdownMenuItem,
+		DropdownMenuSeparator,
+		DropdownMenuTrigger
+	} from '@vibesdotdev/kit/components/ui/dropdown-menu';
+	import { formatDistanceToNow } from 'date-fns';
+	import type { FileItem } from './storage-media.js';
+
+	interface Props {
+		file: FileItem;
+		onDelete?: (id: string) => void;
+		onPreview?: (file: FileItem) => void;
+	}
+
+	let { file, onDelete, onPreview }: Props = $props();
+
+	function formatBytes(bytes: number): string {
+		if (bytes === 0) return '0 B';
+		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+		let size = bytes;
+		let unitIndex = 0;
+		while (size >= 1024 && unitIndex < units.length - 1) {
+			size /= 1024;
+			unitIndex++;
+		}
+		return `${size.toFixed(unitIndex === 0 ? 0 : 2)} ${units[unitIndex]}`;
+	}
+
+	function getFileIcon(mediaType: string) {
+		switch (mediaType) {
+			case 'image': return 'lucide:file-image';
+			case 'video': return 'lucide:file-video';
+			case 'audio': return 'lucide:file-audio';
+			case 'document': return 'lucide:file-text';
+			case 'archive': return 'lucide:file-archive';
+			default: return 'lucide:file';
+		}
+	}
+
+	function getMediaTypeColor(mediaType: string): string {
+		switch (mediaType) {
+			case 'image': return 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400';
+			case 'video': return 'bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-400';
+			case 'audio': return 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400';
+			case 'document': return 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-400';
+			case 'archive': return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
+			default: return 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400';
+		}
+	}
+
+	function handleDelete() {
+		if (onDelete) onDelete(file.id);
+	}
+
+	function handlePreview() {
+		if (onPreview) onPreview(file);
+	}
+
+	function copyUrl() {
+		navigator.clipboard.writeText(window.location.origin + file.url);
+	}
+</script>
+
+<div class="group relative rounded-lg border bg-card p-3 transition-all hover:border-primary/50 hover:shadow-sm">
+	<!-- Thumbnail / Icon -->
+	<div class="relative mb-3 aspect-square overflow-hidden rounded-md bg-muted">
+		{#if file.thumbnailUrl}
+			<img
+				src={file.thumbnailUrl}
+				alt={file.title || file.filename}
+				class="h-full w-full object-cover"
+				loading="lazy"
+			/>
+		{:else}
+			<div class="flex h-full w-full items-center justify-center">
+				<div class="rounded-lg p-4 {getMediaTypeColor(file.mediaType)}">
+					<Icon icon={getFileIcon(file.mediaType)} class="h-8 w-8" />
+				</div>
+			</div>
+		{/if}
+
+		<!-- Overlay actions -->
+		<div class="file-actions absolute inset-0 flex items-center justify-center gap-2 bg-black/50 transition-opacity">
+			<Button aria-label="Preview file" title="Preview file" variant="secondary" size="icon-sm" onclick={handlePreview}>
+				<Icon icon="lucide:eye" class="h-4 w-4" />
+			</Button>
+			<Button aria-label="Download file" title="Download file" variant="secondary" size="icon-sm" href={file.url}>
+				<Icon icon="lucide:download" class="h-4 w-4" />
+			</Button>
+		</div>
+
+		<!-- Media type badge -->
+		<Badge variant="secondary" class="absolute bottom-2 left-2 text-xs">
+			{file.mediaType}
+		</Badge>
+	</div>
+
+	<!-- Info -->
+	<div class="space-y-1">
+		<p class="truncate text-sm font-medium" title={file.title || file.originalFilename}>
+			{file.title || file.originalFilename}
+		</p>
+		<div class="flex items-center gap-2 text-xs text-muted-foreground">
+			<span>{formatBytes(file.fileSize)}</span>
+			<span>•</span>
+			<span>{formatDistanceToNow(file.createdAt, { addSuffix: true })}</span>
+		</div>
+	</div>
+
+	<!-- Actions dropdown -->
+	<div class="file-actions absolute right-2 top-2 transition-opacity">
+		<DropdownMenu>
+			<DropdownMenuTrigger>
+				{#snippet child({ props })}
+					<Button {...props} aria-label="File actions" title="File actions" variant="ghost" size="icon-sm" class="bg-black/50 text-white hover:bg-black/70 hover:text-white">
+						<Icon icon="lucide:ellipsis-vertical" class="h-4 w-4" />
+					</Button>
+				{/snippet}
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onclick={handlePreview}>
+					<Icon icon="lucide:eye" class="mr-2 h-4 w-4" />
+					Preview
+				</DropdownMenuItem>
+				<a href={file.url} download>
+					<DropdownMenuItem>
+						<Icon icon="lucide:download" class="mr-2 h-4 w-4" />
+						Download
+					</DropdownMenuItem>
+				</a>
+				<DropdownMenuItem onclick={copyUrl}>
+					<Icon icon="lucide:link" class="mr-2 h-4 w-4" />
+					Copy URL
+				</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem class="text-destructive" onclick={handleDelete}>
+					<Icon icon="lucide:trash-2" class="mr-2 h-4 w-4" />
+					Delete
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	</div>
+</div>
+
+<style>
+	@media (hover: hover) and (pointer: fine) {
+		.file-actions {
+			opacity: 0;
+		}
+
+		.group:hover .file-actions,
+		.group:focus-within .file-actions {
+			opacity: 1;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { FileItem } from './storage-media.ts';
+interface Props {
+    file: FileItem;
+    onDelete?: (id: string) => void;
+    onPreview?: (file: FileItem) => void;
+}
+declare const StorageFileCard: import("svelte").Component<Props, {}, "">;
+type StorageFileCard = ReturnType<typeof StorageFileCard>;
+export default StorageFileCard;
+//# sourceMappingURL=StorageFileCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageFileCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageFileCard.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGlD,UAAU,KAAK;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AA2IF,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/StoragePathBar.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import * as Breadcrumb from '@vibesdotdev/kit/components/ui/breadcrumb';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+	// Presentation-only breadcrumb for the StorageBrowser: a "root" crumb
+	// (Locations) followed by one crumb per path segment. The host owns
+	// navigation — this only emits root/crumb/up intents. The last segment
+	// renders as a non-link `BreadcrumbPage` (the current location).
+	let {
+		breadcrumbs,
+		onRoot,
+		onCrumb,
+		rootLabel = 'Locations',
+		ariaLabel = 'Storage location',
+		onUp = undefined
+	}: {
+		/** Path segments of the current location (drive-relative), in order. */
+		breadcrumbs: string[];
+		/** Navigate back to the drive root / drive picker. */
+		onRoot: () => void;
+		/** Navigate to the crumb at `index` (0-based into `breadcrumbs`). */
+		onCrumb: (index: number) => void;
+		/** Label for the root crumb. */
+		rootLabel?: string;
+		/** Accessible label for the breadcrumb navigation. */
+		ariaLabel?: string;
+		/** When provided, renders a "go up one level" affordance (host passes
+		 *  `store.navigateUp`). Disabled at the drive root (no segments). */
+		onUp?: () => void;
+	} = $props();
+
+	// Crumbs are anchors (per the vibeskit breadcrumb primitive) but navigate via
+	// the host callback, not an href — swallow the default so the page can't jump.
+	function go(event: Event, run: () => void): void {
+		event.preventDefault();
+		run();
+	}
+
+	function pathLabel(index = breadcrumbs.length - 1): string {
+		if (index < 0) return rootLabel;
+		return [rootLabel, ...breadcrumbs.slice(0, index + 1)].join(' / ');
+	}
+</script>
+
+<div class="flex min-w-0 items-center gap-1 overflow-hidden text-xs text-muted-foreground">
+	{#if onUp}
+		<Button
+			type="button"
+			size="sm"
+			variant="ghost"
+			class="size-6 shrink-0 p-0"
+			aria-label="Go up one level"
+			title="Go up one level"
+			disabled={breadcrumbs.length === 0}
+			onclick={() => onUp?.()}
+		>
+			<Icon icon="lucide:corner-left-up" class="size-3.5" aria-hidden="true" />
+		</Button>
+	{/if}
+	<Breadcrumb.Root class="min-w-0 overflow-hidden" aria-label={ariaLabel}>
+		<Breadcrumb.List class="min-w-0 flex-nowrap gap-1 overflow-hidden text-xs sm:gap-1.5">
+			<Breadcrumb.Item class="shrink-0">
+				{#if breadcrumbs.length === 0}
+					<Breadcrumb.Page title={rootLabel} aria-label={rootLabel}>{rootLabel}</Breadcrumb.Page>
+				{:else}
+					<Breadcrumb.Link
+						href="#"
+						class="cursor-pointer"
+						title={rootLabel}
+						aria-label={`Go to ${rootLabel}`}
+						onclick={(e) => go(e, onRoot)}
+					>
+						{rootLabel}
+					</Breadcrumb.Link>
+				{/if}
+			</Breadcrumb.Item>
+			{#each breadcrumbs as crumb, i (i)}
+				<Breadcrumb.Separator class="shrink-0" />
+				<Breadcrumb.Item class="min-w-0">
+					{#if i === breadcrumbs.length - 1}
+						<Breadcrumb.Page
+							class="block max-w-[12rem] truncate sm:max-w-[18rem]"
+							title={pathLabel(i)}
+							aria-label={`Current location: ${pathLabel(i)}`}
+						>
+							{crumb}
+						</Breadcrumb.Page>
+					{:else}
+						<Breadcrumb.Link
+							href="#"
+							class="block max-w-[6rem] cursor-pointer truncate sm:max-w-[10rem]"
+							title={pathLabel(i)}
+							aria-label={`Go to ${pathLabel(i)}`}
+							onclick={(e) => go(e, () => onCrumb(i))}
+						>
+							{crumb}
+						</Breadcrumb.Link>
+					{/if}
+				</Breadcrumb.Item>
+			{/each}
+		</Breadcrumb.List>
+	</Breadcrumb.Root>
+</div>

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

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    /** Path segments of the current location (drive-relative), in order. */
+    breadcrumbs: string[];
+    /** Navigate back to the drive root / drive picker. */
+    onRoot: () => void;
+    /** Navigate to the crumb at `index` (0-based into `breadcrumbs`). */
+    onCrumb: (index: number) => void;
+    /** Label for the root crumb. */
+    rootLabel?: string;
+    /** Accessible label for the breadcrumb navigation. */
+    ariaLabel?: string;
+    /** When provided, renders a "go up one level" affordance (host passes
+     *  `store.navigateUp`). Disabled at the drive root (no segments). */
+    onUp?: () => void;
+};
+declare const StoragePathBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type StoragePathBar = ReturnType<typeof StoragePathBar>;
+export default StoragePathBar;
+//# sourceMappingURL=StoragePathBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StoragePathBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StoragePathBar.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IACxB,wEAAwE;IACxE,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,qEAAqE;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;yEACqE;IACrE,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAqEH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}