@vibesdotdev/storage 0.0.2 → 1.0.0-rc.3

package/dist/svelte/components/ConnectStorageProviderDialog.svelte

@@ -0,0 +1,345 @@
+<script lang="ts">
+	// Polished, scope-aware "connect a storage provider" surface — sibling to the
+	// StorageExplorer. vibeskit Dialog; goes through the platform client
+	// (runtime → client → cloud-api), never a bespoke fetch. Adapts to the scopes
+	// the user can connect into (personal + orgs they administer) and to the
+	// provider type's connect mechanism (vibes provision / Microsoft sign-in /
+	// external S3-API credentials).
+	import { onMount } from 'svelte';
+	import * as Dialog from '@vibesdotdev/kit/components/ui/dialog';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { NativeSelect, NativeSelectOption } from '@vibesdotdev/kit/components/ui/native-select';
+	import { toast } from 'svelte-sonner';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import {
+		connectExternalProvider,
+		provisionVibesProvider,
+		microsoftConnectUrl,
+		type ConnectableScope,
+		type ConnectExternalProviderInput
+	} from '../storage-explorer-runtime.js';
+	import { settleStorage } from '../../client/storage-failure.js';
+	import { ExternalStorageProviderTypeSchema, storageConnectFailureCopy } from '../storage-connection.js';
+
+	let {
+		open = $bindable(false),
+		scopes = [],
+		platformOrigin = '',
+		authOrigin = '',
+		returnTo = '',
+		onConnected
+	}: {
+		open?: boolean;
+		/** Scopes the user can connect into (personal + admin'd orgs). */
+		scopes?: 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 (auth-web `/connect`). */
+		authOrigin?: string;
+		/** Where Microsoft returns to (defaults to the current page). */
+		returnTo?: string;
+		onConnected?: () => void;
+	} = $props();
+
+	// Captured at component init; the runtime is handed to the connect helpers.
+	const runtimeStore = getRuntimeSvelteContext();
+
+	type ProviderKind = 'vibes_r2' | 'sharepoint' | 'user_s3' | 'user_r2' | 'user_gcs';
+	interface ProviderOption {
+		kind: ProviderKind;
+		name: string;
+		icon: string;
+		blurb: string;
+		external?: boolean;
+	}
+
+	const PROVIDERS: ProviderOption[] = [
+		{ kind: 'vibes_r2', name: 'Vibes Storage', icon: 'lucide:cloud', blurb: 'Free storage that comes with your account. Ready to use.' },
+		{ kind: 'sharepoint', name: 'SharePoint', icon: 'lucide:building-2', blurb: 'Your Microsoft 365 files and team sites.' },
+		{ kind: 'user_s3', name: 'Amazon S3', icon: 'lucide:database', blurb: 'Connect your own Amazon S3 storage.', external: true },
+		{ kind: 'user_r2', name: 'Cloudflare R2', icon: 'lucide:hard-drive', blurb: 'Connect your own Cloudflare R2 storage.', external: true },
+		{ kind: 'user_gcs', name: 'Google Cloud Storage', icon: 'lucide:database', blurb: 'Connect your own Google Cloud storage.', external: true }
+	];
+
+	let step = $state<'type' | 'connect'>('type');
+	let selected = $state<ProviderOption | null>(null);
+	let scopeId = $state<string | null>(null);
+	let busy = $state(false);
+	let error = $state<string | null>(null);
+	let form = $state({
+		name: '',
+		bucket: '',
+		region: '',
+		endpoint: '',
+		accountId: '',
+		accessKeyId: '',
+		secretAccessKey: ''
+	});
+
+	// Only personal + scopes the user administers can receive a new provider.
+	const connectableScopes = $derived(scopes.filter((s) => s.kind === 'personal' || s.canAdmin));
+	const selectedScope = $derived(
+		connectableScopes.find((s) => s.id === scopeId) ?? connectableScopes[0]
+	);
+
+	// Default the scope selection once scopes are available (props can arrive
+	// after mount); the derived above falls back until then.
+	$effect(() => {
+		if (scopeId === null && connectableScopes.length > 0) scopeId = connectableScopes[0].id;
+	});
+
+	function pick(option: ProviderOption): void {
+		selected = option;
+		error = null;
+		step = 'connect';
+		form = { name: option.name, bucket: '', region: '', endpoint: '', accountId: '', accessKeyId: '', secretAccessKey: '' };
+	}
+
+	function reset(): void {
+		step = 'type';
+		selected = null;
+		error = null;
+	}
+
+	function close(): void {
+		open = false;
+		reset();
+	}
+
+	// The page's own location, read once the component is mounted (mounting
+	// happens only in a browser), so derived links never touch it during SSR.
+	let pageOrigin = $state('');
+	let pagePath = $state('');
+	onMount(() => {
+		pageOrigin = window.location.origin;
+		pagePath = window.location.pathname;
+	});
+
+	function connectSharePoint(): void {
+		// A click handler: it runs only in the browser.
+		// Absolute returnTo — auth-web redirects back across origins after linking.
+		const back = returnTo || `${window.location.origin}${window.location.pathname}`;
+		window.location.href = microsoftConnectUrl(
+			platformOrigin || window.location.origin,
+			back,
+			selectedScope,
+			authOrigin || undefined
+		);
+	}
+
+	// Org Microsoft admin-consent: a tenant-wide grant the org admin performs once,
+	// distinct from the personal delegated sign-in (microsoftConnectUrl). Only an
+	// admin of a concrete org scope can reach it; personal stays on the delegated
+	// link above.
+	const isAdminOrgScope = $derived(selectedScope?.kind === 'org' && !!selectedScope.canAdmin);
+	const adminConsentUrl = $derived.by(() => {
+		if (!isAdminOrgScope || !selectedScope?.id) return null;
+		const origin = platformOrigin || pageOrigin;
+		const back = returnTo || pagePath;
+		const params = new URLSearchParams({ org: selectedScope.id, returnTo: back });
+		return `${origin}/auth/microsoft/adminconsent?${params.toString()}`;
+	});
+
+	// Provision a shared (org-scoped) Vibes drive. Personal vibes_r2 auto-provisions
+	// and stays informational; an org admin can stand up a shared drive on demand.
+	async function provisionVibes(): Promise<void> {
+		if (selectedScope?.kind !== 'org' || !selectedScope.canAdmin || !selectedScope.id) return;
+		busy = true;
+		error = null;
+		const organizationId = selectedScope.id;
+		const name = form.name || `${selectedScope.label} Storage`;
+		try {
+			const attempt = await settleStorage(async () =>
+				provisionVibesProvider(await runtimeStore.load(), { name, scope: { organizationId } })
+			);
+			if (!attempt.ok) {
+				error = storageConnectFailureCopy(attempt.cause);
+				return;
+			}
+			toast.success('Shared storage created');
+			onConnected?.();
+			close();
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function connectExternal(): Promise<void> {
+		if (!selected?.external) return;
+		busy = true;
+		error = null;
+		const type = ExternalStorageProviderTypeSchema.safeParse(selected.kind);
+		if (!type.success) {
+			error = 'This storage type cannot be connected here.';
+			busy = false;
+			return;
+		}
+		try {
+			const input: ConnectExternalProviderInput = {
+				name: form.name || selected.name,
+				type: type.data,
+				bucket: form.bucket,
+				region: form.region || undefined,
+				endpoint: form.endpoint || undefined,
+				accountId: form.accountId || undefined,
+				credentials: {
+					accessKeyId: form.accessKeyId,
+					secretAccessKey: form.secretAccessKey,
+					accountId: form.accountId || undefined
+				}
+			};
+			const attempt = await settleStorage(async () => connectExternalProvider(await runtimeStore.load(), input));
+			if (!attempt.ok) {
+				error = storageConnectFailureCopy(attempt.cause);
+				return;
+			}
+			toast.success('Storage added');
+			onConnected?.();
+			close();
+		} finally {
+			busy = false;
+		}
+	}
+
+	const scopeNoun = $derived(
+		selectedScope?.kind === 'personal' ? 'your account' : (selectedScope?.label ?? 'this scope')
+	);
+</script>
+
+<Dialog.Root bind:open onOpenChange={(v) => { if (!v) reset(); }}>
+	<Dialog.Content class="max-w-lg">
+		<Dialog.Header>
+			<Dialog.Title>{step === 'type' ? 'Add storage' : `Add ${selected?.name}`}</Dialog.Title>
+			<Dialog.Description>
+				{step === 'type'
+					? 'Connect another place to keep your files, alongside the storage you already have.'
+					: selected?.blurb}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if step === 'type'}
+			<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+				{#each PROVIDERS as p (p.kind)}
+					<button
+						type="button"
+						class="flex items-start gap-3 rounded-md border border-border p-3 text-left transition-colors hover:border-foreground/20 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+						onclick={() => pick(p)}
+					>
+						<Icon icon={p.icon} class="size-5 shrink-0 text-muted-foreground" />
+						<span class="flex min-w-0 flex-col gap-0.5">
+							<span class="text-sm font-medium">{p.name}</span>
+							<span class="text-xs text-muted-foreground">{p.blurb}</span>
+						</span>
+					</button>
+				{/each}
+			</div>
+		{:else}
+			<div class="flex flex-col gap-3">
+				{#if connectableScopes.length > 1}
+					<div class="flex flex-col gap-1">
+						<Label class="text-xs">Add it to</Label>
+						<NativeSelect bind:value={scopeId}>
+							{#each connectableScopes as s (s.id ?? 'personal')}
+								<NativeSelectOption value={s.id}>{s.label}</NativeSelectOption>
+							{/each}
+						</NativeSelect>
+					</div>
+				{/if}
+
+				{#if selected?.kind === 'sharepoint'}
+					{#if isAdminOrgScope && adminConsentUrl}
+						<p class="text-sm text-muted-foreground">
+							As an admin of {scopeNoun}, you can connect Microsoft once for everyone.
+							We'll ask for read access to your team's SharePoint files.
+						</p>
+						<Button href={adminConsentUrl} class="gap-2">
+							<Icon icon="lucide:building-2" class="size-4" />
+							Connect Microsoft for {scopeNoun}
+						</Button>
+					{:else}
+						<p class="text-sm text-muted-foreground">
+							Sign in with Microsoft to add your files. We'll only read what you open.
+						</p>
+						<Button onclick={connectSharePoint} class="gap-2">
+							<Icon icon="lucide:building-2" class="size-4" />
+							Continue with Microsoft
+						</Button>
+					{/if}
+				{:else if selected?.external}
+					<div class="flex flex-col gap-2">
+						<div class="flex flex-col gap-1">
+							<Label class="text-xs">Name</Label>
+							<Input bind:value={form.name} placeholder={selected.name} />
+						</div>
+						<div class="flex flex-col gap-1">
+							<Label class="text-xs">Bucket</Label>
+							<Input bind:value={form.bucket} placeholder="my-bucket" />
+						</div>
+						<div class="grid grid-cols-2 gap-2">
+							<div class="flex flex-col gap-1">
+								<Label class="text-xs">Region</Label>
+								<Input bind:value={form.region} placeholder="us-east-1" />
+							</div>
+							{#if selected.kind === 'user_r2'}
+								<div class="flex flex-col gap-1">
+									<Label class="text-xs">Account ID</Label>
+									<Input bind:value={form.accountId} />
+								</div>
+							{:else}
+								<div class="flex flex-col gap-1">
+									<Label class="text-xs">Endpoint (optional)</Label>
+									<Input bind:value={form.endpoint} placeholder="https://…" />
+								</div>
+							{/if}
+						</div>
+						<div class="flex flex-col gap-1">
+							<Label class="text-xs">Access Key ID</Label>
+							<Input bind:value={form.accessKeyId} />
+						</div>
+						<div class="flex flex-col gap-1">
+							<Label class="text-xs">Secret Access Key</Label>
+							<Input type="password" bind:value={form.secretAccessKey} />
+						</div>
+					</div>
+					{#if error}<p class="text-xs text-destructive">{error}</p>{/if}
+				{:else if isAdminOrgScope}
+					<p class="text-sm text-muted-foreground">
+						Create shared storage for {scopeNoun}. Everyone on the team can use it.
+					</p>
+					<div class="flex flex-col gap-1">
+						<Label class="text-xs">Name</Label>
+						<Input bind:value={form.name} placeholder={`${selectedScope?.label ?? 'Team'} Storage`} />
+					</div>
+					{#if error}<p class="text-xs text-destructive">{error}</p>{/if}
+				{:else}
+					<p class="text-sm text-muted-foreground">
+						You already have free Vibes storage. Find it under "Personal" in your list of places.
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			{#if step === 'connect'}
+				<Button variant="ghost" onclick={reset}>Back</Button>
+				{#if selected?.external}
+					<Button
+						onclick={connectExternal}
+						disabled={busy || !form.bucket || !form.accessKeyId || !form.secretAccessKey}
+					>
+						{busy ? 'Connecting…' : 'Connect'}
+					</Button>
+				{:else if selected?.kind === 'vibes_r2' && isAdminOrgScope}
+					<Button onclick={provisionVibes} disabled={busy}>
+						{busy ? 'Creating…' : 'Create shared storage'}
+					</Button>
+				{/if}
+			{:else}
+				<Button variant="ghost" onclick={close}>Cancel</Button>
+			{/if}
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,17 @@
+import { type ConnectableScope } from '../storage-explorer-runtime.ts';
+type $$ComponentProps = {
+    open?: boolean;
+    /** Scopes the user can connect into (personal + admin'd orgs). */
+    scopes?: 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 (auth-web `/connect`). */
+    authOrigin?: string;
+    /** Where Microsoft returns to (defaults to the current page). */
+    returnTo?: string;
+    onConnected?: () => void;
+};
+declare const ConnectStorageProviderDialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConnectStorageProviderDialog = ReturnType<typeof ConnectStorageProviderDialog>;
+export default ConnectStorageProviderDialog;
+//# sourceMappingURL=ConnectStorageProviderDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectStorageProviderDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ConnectStorageProviderDialog.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,EAIL,KAAK,gBAAgB,EAErB,MAAM,gCAAgC,CAAC;AAaxC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+FAA+F;IAC/F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AA8TH,QAAA,MAAM,4BAA4B,0DAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}

package/dist/svelte/components/PlatformStorageExplorer.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import StorageBrowserPage from './StorageBrowserPage.svelte';
+	import type {
+		StorageBrowserAction,
+		StorageBrowserHeaderAction,
+		StorageBrowserEntryDecoration,
+		BrowseLocationContext,
+		StorageBrowseConfig,
+		StorageEntry
+	} from '../storage-browse-runtime.js';
+
+	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>
+
+<StorageBrowserPage
+	{adapterId}
+	{config}
+	{title}
+	{description}
+	{connectCta}
+	{selectionMode}
+	{rowActions}
+	{headerActions}
+	{decorate}
+	{beforeBrowser}
+	{onSelect}
+	{onNavigate}
+	{onOpenFile}
+/>

package/dist/svelte/components/PlatformStorageExplorer.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 PlatformStorageExplorer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PlatformStorageExplorer = ReturnType<typeof PlatformStorageExplorer>;
+export default PlatformStorageExplorer;
+//# sourceMappingURL=PlatformStorageExplorer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformStorageExplorer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PlatformStorageExplorer.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;AA0BH,QAAA,MAAM,uBAAuB,sDAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}