@vibesdotdev/storage 0.0.2 → 1.0.0-rc.4

package/dist/svelte/components/StorageProviderSelect.svelte

@@ -0,0 +1,163 @@
+<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 { Icon } from '@vibesdotdev/kit/components/icon';
+	import { NativeSelect, NativeSelectOption } from '@vibesdotdev/kit/components/ui/native-select';
+	import {
+		createStorageProvidersStore,
+		type StorageProvidersStore
+	} from '../stores/storage-providers.svelte.js';
+	import {
+		describeProviderType,
+		type PlatformStorageClient,
+		type StorageProviderOption
+	} from '../storage-runtime.js';
+
+	let {
+		providers = undefined,
+		client,
+		store = createStorageProvidersStore({ client, initialProviders: providers ?? [] }),
+		loadOnMount = providers === undefined,
+		providerId = $bindable<string | undefined>(undefined),
+		label = 'Storage destination',
+		hint = 'Where generated files are saved.',
+		onSelect,
+		onConnect,
+		includeDefaultHint = true,
+		showStatusMessages = true,
+		selectId = 'storage-provider-select'
+	}: {
+		providers?: StorageProviderOption[];
+		store?: StorageProvidersStore;
+		loadOnMount?: boolean;
+		client?: PlatformStorageClient;
+		providerId?: string | undefined;
+		label?: string;
+		hint?: string;
+		onSelect?: (provider: StorageProviderOption | undefined) => void;
+		onConnect?: () => void;
+		includeDefaultHint?: boolean;
+		showStatusMessages?: boolean;
+		selectId?: string;
+	} = $props();
+
+	const items = $derived(providers ?? store.providers);
+	const activeItems = $derived(items.filter((p) => p.isActive !== false));
+	const selected = $derived(items.find((p) => p.id === providerId));
+	const descriptionId = $derived(`${selectId}-description`);
+	// Captured at component init: a failed load is reported on this runtime, never an ambient one.
+	const runtimeStore = getRuntimeSvelteContext();
+
+	onMount(() => {
+		if (!loadOnMount || store.loaded || store.loading) return;
+		void store.load().catch(noteStoreFailure(runtimeStore, 'load'));
+	});
+
+	$effect(() => {
+		if (providerId) return;
+		if (!includeDefaultHint) return;
+		const fallback = store.defaultProvider ?? activeItems[0];
+		if (fallback) {
+			providerId = fallback.id;
+		}
+	});
+
+	$effect(() => {
+		if (!providerId) return;
+		const match = items.find((p) => p.id === providerId);
+		if (match) onSelect?.(match);
+	});
+</script>
+
+<div class="space-y-2">
+	<div class="flex items-center justify-between gap-2">
+		<label class="text-sm font-medium" for={selectId}>{label}</label>
+		{#if onConnect}
+			<Button
+				type="button"
+				size="sm"
+				variant="ghost"
+				class="h-7 gap-1 text-xs"
+				onclick={() => onConnect?.()}
+			>
+				<Icon icon="lucide:plus" class="size-3.5" />
+				Connect new
+			</Button>
+		{/if}
+	</div>
+
+	{#if store.loading && items.length === 0}
+		{#if showStatusMessages}
+			<div class="text-xs text-muted-foreground" role="status" aria-live="polite">
+				Loading storage destinations…
+			</div>
+		{/if}
+	{:else if store.error}
+		{#if showStatusMessages}
+			<div
+				role="alert"
+				aria-live="assertive"
+				class="rounded-md border border-amber-300 bg-amber-50 px-3 py-3 text-xs text-amber-950 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100"
+			>
+				Storage destinations could not load. Files can still use the included Vibes bucket if
+				your workspace has it enabled.
+			</div>
+		{/if}
+	{:else if items.length === 0}
+		{#if showStatusMessages}
+			<div
+				role="status"
+				aria-live="polite"
+				class="rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground"
+			>
+				Vibes Storage is ready by default. Add your own bucket when files should live in your
+				account.
+			</div>
+		{/if}
+	{:else if activeItems.length === 0}
+		{#if showStatusMessages}
+			<div
+				role="alert"
+				aria-live="assertive"
+				class="rounded-md border border-amber-300 bg-amber-50 px-3 py-3 text-xs text-amber-950 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100"
+			>
+				All connected storage destinations need attention. Open storage settings before saving
+				to your own bucket.
+			</div>
+		{/if}
+	{:else}
+		<NativeSelect
+			id={selectId}
+			bind:value={providerId}
+			class="w-full"
+			aria-describedby={descriptionId}
+		>
+			{#each items as provider (provider.id)}
+				<NativeSelectOption value={provider.id} disabled={provider.isActive === false}>
+					{provider.name} · {describeProviderType(provider.type)}
+					{provider.isActive === false ? ' · needs attention' : ''}
+				</NativeSelectOption>
+			{/each}
+		</NativeSelect>
+	{/if}
+
+	<div id={descriptionId} class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+		{#if selected}
+			<Badge variant="outline" class="px-1.5 text-[10px] uppercase">
+				{describeProviderType(selected.type)}
+			</Badge>
+			{#if selected.isDefault}
+				<Badge variant="secondary" class="px-1.5 text-[10px]">Default</Badge>
+			{/if}
+			{#if selected.isActive === false}
+				<Badge variant="outline" class="px-1.5 text-[10px]">Needs attention</Badge>
+			{/if}
+		{/if}
+		{#if hint}
+			<span class="truncate">{hint}</span>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+import { type StorageProvidersStore } from '../stores/storage-providers.svelte.ts';
+import { type PlatformStorageClient, type StorageProviderOption } from '../storage-runtime.ts';
+type $$ComponentProps = {
+    providers?: StorageProviderOption[];
+    store?: StorageProvidersStore;
+    loadOnMount?: boolean;
+    client?: PlatformStorageClient;
+    providerId?: string | undefined;
+    label?: string;
+    hint?: string;
+    onSelect?: (provider: StorageProviderOption | undefined) => void;
+    onConnect?: () => void;
+    includeDefaultHint?: boolean;
+    showStatusMessages?: boolean;
+    selectId?: string;
+};
+declare const StorageProviderSelect: import("svelte").Component<$$ComponentProps, {}, "providerId">;
+type StorageProviderSelect = ReturnType<typeof StorageProviderSelect>;
+export default StorageProviderSelect;
+//# sourceMappingURL=StorageProviderSelect.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageProviderSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageProviderSelect.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,MAAM,uCAAuC,CAAC;AAChD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,MAAM,uBAAuB,CAAC;AAE/B,KAAK,gBAAgB,GAAI;IACxB,SAAS,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,qBAAqB,GAAG,SAAS,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA4HH,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/StorageProviderSidebar.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Skeleton } from '@vibesdotdev/kit/components/ui/skeleton';
+	import type { StorageTarget, StorageTargetScope } from '../storage-explorer-runtime.js';
+
+	// Finder-style scope rail: every storage backend the scope can reach (vibes
+	// default, connected providers, SharePoint), GROUPED by scope ("Personal",
+	// the org name, …). Pure presentation — the parent owns the drives + selection.
+	let {
+		targets,
+		selectedId = null,
+		loading = false,
+		error = false,
+		signedOut = false,
+		scopeLabels = {},
+		connectCta = undefined,
+		microsoftConnectCta = null,
+		onSelect,
+		onConnect = undefined
+	}: {
+		targets: StorageTarget[];
+		selectedId?: string | null;
+		loading?: boolean;
+		/** True when drive enumeration failed; recovery lives in the content pane. */
+		error?: boolean;
+		/** Signed-out is setup, not a destructive error state. */
+		signedOut?: boolean;
+		/** Display-label overrides keyed by scope id (org/project/team id). Names
+		 *  are not in the JWT claim, so the surface (which knows them — its layout
+		 *  org list) supplies them; falls back to the server label, then the id. */
+		scopeLabels?: Record<string, string>;
+		/** Host-owned route for connecting the account or managing storage providers. */
+		connectCta?: { href: string; label: string };
+		/** When set, renders a compact "Connect Microsoft" CTA in the Personal group
+		 *  empty state — shown when personal scope is in play but no Microsoft drive
+		 *  is present. Should be the auth-web /connect URL for the personal flow. */
+		microsoftConnectCta?: string | null;
+		onSelect: (target: StorageTarget) => void;
+		/** When provided, renders a "+ Connect storage" footer that opens the dialog. */
+		onConnect?: () => void;
+	} = $props();
+
+	function iconFor(type: string): string {
+		if (type === 'sharepoint') return 'lucide:building-2';
+		if (type === 'vibes_r2') return 'lucide:cloud';
+		if (type.startsWith('user_')) return 'lucide:hard-drive';
+		return 'lucide:database';
+	}
+
+	const SCOPE_ORDER = new Map<string, number>([
+		['personal', 0],
+		['org', 1],
+		['project', 2],
+		['team', 3]
+	]);
+
+	function groupLabel(scope: StorageTargetScope | undefined): string {
+		if (!scope) return 'Locations';
+		if (scope.kind === 'personal') return 'Personal';
+		return scopeLabels[scope.id ?? ''] ?? scope.label;
+	}
+
+	type DriveGroup = { key: string; label: string; order: number; targets: StorageTarget[] };
+
+	// Group by scope, ordered Personal → orgs → projects → teams, then by label.
+	const groups = $derived.by(() => {
+		const map = new Map<string, DriveGroup>();
+		for (const target of targets) {
+			const scope = target.scope;
+			const key = scope ? `${scope.kind}:${scope.id ?? ''}` : 'ungrouped';
+			let group = map.get(key);
+			if (!group) {
+				group = {
+					key,
+					label: groupLabel(scope),
+					order: scope ? (SCOPE_ORDER.get(scope.kind) ?? 4) : 5,
+					targets: []
+				};
+				map.set(key, group);
+			}
+			group.targets.push(target);
+		}
+		return [...map.values()].sort((a, b) => a.order - b.order || a.label.localeCompare(b.label));
+	});
+</script>
+
+{#snippet groupHeading(label: string, top: boolean)}
+	<div
+		class="text-muted-foreground truncate px-2 pb-1 text-[11px] font-medium tracking-wide uppercase select-none"
+		class:pt-1={!top}
+		class:pt-3={top}
+	>
+		{label}
+	</div>
+{/snippet}
+
+<nav class="bg-muted/30 flex h-full w-full flex-col gap-0.5 overflow-y-auto p-2">
+	{#if loading}
+		{@render groupHeading('Locations', false)}
+		<div class="flex flex-col gap-1" aria-busy="true" aria-label="Loading storage">
+			{#each [0, 1, 2] as i (i)}
+				<Skeleton class="h-8 w-full rounded-md" />
+			{/each}
+		</div>
+	{:else if signedOut}
+		{@render groupHeading('Cloud drives', false)}
+		<div class="text-muted-foreground flex items-center gap-2 px-2 py-2 text-xs">
+			<Icon icon="lucide:cloud" class="size-4 shrink-0" />
+			<span>Not connected</span>
+		</div>
+	{:else if error}
+		<!-- The adjacent content pane owns recovery. Keep the locations rail
+		     navigational instead of repeating the same failure and actions. -->
+		{@render groupHeading('Locations', false)}
+		<div class="text-muted-foreground flex items-center gap-2 px-2 py-2 text-xs">
+			<Icon icon="lucide:cloud-alert" class="size-4 shrink-0" />
+			<span>Unavailable</span>
+		</div>
+	{:else if targets.length === 0}
+		{@render groupHeading('Locations', false)}
+		<div class="space-y-2 px-2 py-1.5">
+			<p class="text-muted-foreground text-xs">No storage yet.</p>
+			{#if connectCta}
+				<a
+					href={connectCta.href}
+					class="focus-visible:ring-ring inline-flex rounded text-xs font-medium underline underline-offset-2 focus-visible:ring-2 focus-visible:outline-none"
+				>
+					{connectCta.label}
+				</a>
+			{/if}
+		</div>
+	{:else}
+		{#each groups as group, i (group.key)}
+			{@render groupHeading(group.label, i > 0)}
+			{#each group.targets as target (target.providerId)}
+				{@const active = selectedId === target.providerId}
+				<button
+					type="button"
+					aria-current={active ? 'true' : undefined}
+					class="focus-visible:ring-ring flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none {active
+						? 'bg-accent text-accent-foreground font-medium'
+						: 'text-foreground hover:bg-accent/50'}"
+					onclick={() => onSelect(target)}
+				>
+					<Icon
+						icon={iconFor(target.type)}
+						class="size-4 shrink-0 {active ? 'text-accent-foreground' : 'text-muted-foreground'}"
+					/>
+					<span class="truncate">{target.name}</span>
+				</button>
+			{/each}
+		{/each}
+	{/if}
+
+	<!-- Personal Microsoft CTA: shown when personal scope is in play but no
+	     Microsoft drive is connected yet. Surfaces the link flow inline so users
+	     don't have to discover the connect dialog on their own. -->
+	{#if microsoftConnectCta && !loading && !error}
+		<div
+			class="border-border/60 bg-muted/40 mt-1.5 flex flex-col gap-1 rounded-md border px-2 py-2"
+		>
+			<div class="flex items-start gap-1.5">
+				<Icon icon="lucide:building-2" class="text-muted-foreground mt-0.5 size-3.5 shrink-0" />
+				<p class="text-muted-foreground text-xs leading-snug">
+					Connect your Microsoft account to see your OneDrive and SharePoint files.
+				</p>
+			</div>
+			<a
+				href={microsoftConnectCta}
+				class="text-foreground hover:text-foreground/80 focus-visible:ring-ring self-start rounded px-1.5 py-0.5 text-xs font-medium underline underline-offset-2 focus-visible:ring-2 focus-visible:outline-none"
+			>
+				Connect Microsoft
+			</a>
+		</div>
+	{/if}
+
+	{#if onConnect}
+		<button
+			type="button"
+			class="text-muted-foreground hover:bg-accent/50 hover:text-foreground focus-visible:ring-ring mt-auto flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
+			onclick={onConnect}
+		>
+			<Icon icon="lucide:plus" class="size-4 shrink-0" />
+			<span class="truncate">Connect storage</span>
+		</button>
+	{/if}
+</nav>

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

@@ -0,0 +1,30 @@
+import type { StorageTarget } from '../storage-explorer-runtime.ts';
+type $$ComponentProps = {
+    targets: StorageTarget[];
+    selectedId?: string | null;
+    loading?: boolean;
+    /** True when drive enumeration failed; recovery lives in the content pane. */
+    error?: boolean;
+    /** Signed-out is setup, not a destructive error state. */
+    signedOut?: boolean;
+    /** Display-label overrides keyed by scope id (org/project/team id). Names
+     *  are not in the JWT claim, so the surface (which knows them — its layout
+     *  org list) supplies them; falls back to the server label, then the id. */
+    scopeLabels?: Record<string, string>;
+    /** Host-owned route for connecting the account or managing storage providers. */
+    connectCta?: {
+        href: string;
+        label: string;
+    };
+    /** When set, renders a compact "Connect Microsoft" CTA in the Personal group
+     *  empty state — shown when personal scope is in play but no Microsoft drive
+     *  is present. Should be the auth-web /connect URL for the personal flow. */
+    microsoftConnectCta?: string | null;
+    onSelect: (target: StorageTarget) => void;
+    /** When provided, renders a "+ Connect storage" footer that opens the dialog. */
+    onConnect?: () => void;
+};
+declare const StorageProviderSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageProviderSidebar = ReturnType<typeof StorageProviderSidebar>;
+export default StorageProviderSidebar;
+//# sourceMappingURL=StorageProviderSidebar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageProviderSidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageProviderSidebar.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,gCAAgC,CAAC;AAIvF,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;gFAE4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iFAAiF;IACjF,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C;;iFAE6E;IAC7E,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA8IH,QAAA,MAAM,sBAAsB,sDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/StorageReadinessNotice.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { describeProviderType } from '../storage-runtime.js';
+
+	export interface StorageReadinessProvider {
+		id: string;
+		name: string;
+		type: string;
+		isActive?: boolean | null;
+		isDefault?: boolean | null;
+	}
+
+	export interface StorageReadinessStats {
+		totalFiles?: number;
+		totalStorageBytes?: number;
+		billing?: { status: 'unavailable' };
+	}
+
+	type ReadinessMode = 'loading' | 'error' | 'included' | 'attention' | 'ready';
+
+	let {
+		providers = [],
+		stats = undefined,
+		loading = false,
+		error = null,
+		compact = false,
+		connectHref = '/storage/create',
+		manageHref = '/storage',
+		showUsage = true,
+		showManageAction = true,
+		showConnectAction = true,
+		manageLabel = 'Open storage',
+		connectLabel = 'Add location'
+	}: {
+		providers?: StorageReadinessProvider[];
+		stats?: StorageReadinessStats;
+		loading?: boolean;
+		error?: Error | string | null;
+		compact?: boolean;
+		connectHref?: string;
+		manageHref?: string;
+		showUsage?: boolean;
+		showManageAction?: boolean;
+		showConnectAction?: boolean;
+		manageLabel?: string;
+		connectLabel?: string;
+	} = $props();
+
+	const activeProviders = $derived(providers.filter((provider) => provider.isActive !== false));
+	const defaultProvider = $derived(
+		activeProviders.find((provider) => provider.isDefault) ?? activeProviders[0]
+	);
+
+	const mode = $derived.by((): ReadinessMode => {
+		if (loading) return 'loading';
+		if (error) return 'error';
+		if (providers.length === 0) return 'included';
+		if (activeProviders.length === 0) return 'attention';
+		return 'ready';
+	});
+
+	const title = $derived.by(() => {
+		if (mode === 'loading') return 'Checking storage';
+		if (mode === 'error') return 'Storage check failed';
+		if (mode === 'attention') return 'Storage needs attention';
+		if (mode === 'included') return 'Vibes Storage is ready';
+		return 'Storage is ready';
+	});
+
+	const message = $derived.by(() => {
+		if (mode === 'loading') return 'Looking up where files and generated media can be saved.';
+		if (mode === 'error') {
+			return 'We could not confirm your storage destinations. Try again or open Files and Storage.';
+		}
+		if (mode === 'attention') {
+			return 'Every connected storage location is inactive. Repair a location before saving to your own cloud bucket.';
+		}
+		if (mode === 'included') {
+			return 'Files can save to the included Vibes bucket. Add your own bucket when files should live in your account.';
+		}
+		return `${defaultProvider?.name ?? 'Your default storage location'} is available for uploads and generated media.`;
+	});
+
+	const icon = $derived.by(() => {
+		if (mode === 'loading') return 'lucide:loader-circle';
+		if (mode === 'error' || mode === 'attention') return 'lucide:triangle-alert';
+		if (mode === 'included') return 'lucide:cloud';
+		return 'lucide:check-circle-2';
+	});
+
+	const toneClass = $derived.by(() => {
+		if (mode === 'error' || mode === 'attention') {
+			return 'border-border border-l-amber-500 bg-card text-foreground';
+		}
+		if (mode === 'loading') {
+			return 'border-border border-l-blue-500 bg-card text-foreground';
+		}
+		return 'border-border border-l-emerald-500 bg-card text-foreground';
+	});
+
+	const iconClass = $derived.by(() => {
+		if (mode === 'error' || mode === 'attention') return 'text-amber-500';
+		if (mode === 'loading') return 'text-blue-500';
+		return 'text-emerald-500';
+	});
+
+	const storageUsed = $derived(stats?.totalStorageBytes ?? 0);
+	const livePoliteness = $derived(mode === 'error' || mode === 'attention' ? 'assertive' : 'polite');
+
+	function formatBytes(bytes: number): string {
+		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(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+	}
+</script>
+
+<div
+	class={`rounded-md border border-l-4 px-3 py-3 ${toneClass}`}
+	role={mode === 'error' || mode === 'attention' ? 'alert' : 'status'}
+	aria-live={livePoliteness}
+>
+	<div class={compact ? 'flex items-start gap-2' : 'flex flex-col gap-3 md:flex-row md:items-start md:justify-between'}>
+		<div class="min-w-0 flex-1">
+			<div class="flex items-center gap-2">
+				<Icon
+					icon={icon}
+					class={`size-4 shrink-0 ${iconClass} ${mode === 'loading' ? 'animate-spin' : ''}`}
+					aria-hidden="true"
+				/>
+				<p class="text-sm font-semibold">{title}</p>
+				{#if defaultProvider && mode === 'ready'}
+					<Badge variant="secondary" class="px-1.5 text-[10px]">
+						{describeProviderType(defaultProvider.type)}
+					</Badge>
+				{/if}
+			</div>
+			<p class="text-muted-foreground mt-1 text-xs">{message}</p>
+
+			{#if showUsage && stats && !compact}
+				<div class="mt-3 flex flex-wrap gap-2 text-xs">
+					<Badge variant="outline" class="bg-background/60">
+						{stats.totalFiles ?? 0} files
+					</Badge>
+					<Badge variant="outline" class="bg-background/60">
+						{formatBytes(storageUsed)} used
+					</Badge>
+					{#if stats.billing?.status === 'unavailable'}
+						<Badge variant="outline" class="bg-background/60">
+							Storage billing unavailable
+						</Badge>
+					{/if}
+				</div>
+				{#if stats.billing?.status === 'unavailable'}
+					<p class="text-muted-foreground mt-2 text-[11px]">
+						Sampler-rated storage billing is not available on this surface yet.
+					</p>
+				{/if}
+			{/if}
+		</div>
+
+		{#if !compact && (showManageAction || showConnectAction)}
+			<div class="flex shrink-0 flex-wrap gap-2">
+				{#if showManageAction}
+					<Button variant="outline" size="sm" href={manageHref}>{manageLabel}</Button>
+				{/if}
+				{#if showConnectAction}
+					<Button variant={mode === 'attention' ? 'default' : 'secondary'} size="sm" href={connectHref}>
+						{connectLabel}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,32 @@
+export interface StorageReadinessProvider {
+    id: string;
+    name: string;
+    type: string;
+    isActive?: boolean | null;
+    isDefault?: boolean | null;
+}
+export interface StorageReadinessStats {
+    totalFiles?: number;
+    totalStorageBytes?: number;
+    billing?: {
+        status: 'unavailable';
+    };
+}
+type $$ComponentProps = {
+    providers?: StorageReadinessProvider[];
+    stats?: StorageReadinessStats;
+    loading?: boolean;
+    error?: Error | string | null;
+    compact?: boolean;
+    connectHref?: string;
+    manageHref?: string;
+    showUsage?: boolean;
+    showManageAction?: boolean;
+    showConnectAction?: boolean;
+    manageLabel?: string;
+    connectLabel?: string;
+};
+declare const StorageReadinessNotice: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageReadinessNotice = ReturnType<typeof StorageReadinessNotice>;
+export default StorageReadinessNotice;
+//# sourceMappingURL=StorageReadinessNotice.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorageReadinessNotice.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/StorageReadinessNotice.svelte.ts"],"names":[],"mappings":"AASC,MAAM,WAAW,wBAAwB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE;QAAE,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC;CACpC;AAGD,KAAK,gBAAgB,GAAI;IACxB,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAuJH,QAAA,MAAM,sBAAsB,sDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}