@vibesdotdev/auth 0.0.0-stage → 1.0.0-rc.4

package/dist/svelte/components/BrowserSessionBridge.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+
+	/**
+	 * Shared failure view for the server-side session code handoff
+	 * (`createBrowserSessionCodeHandoff`). The host's callback load performs the
+	 * exchange and redirects on success; this renders only a refusal and retry.
+	 * It never reads Auth from the browser.
+	 */
+	type Props = {
+		/** User-facing refusal message from the host's callback load. */
+		message: string;
+		signInHref: string;
+	};
+	let { message, signInHref }: Props = $props();
+</script>
+
+<section class="mx-auto flex w-full max-w-lg flex-col gap-4 py-12">
+	<Icon icon="lucide:circle-alert" class="size-6 text-destructive" />
+	<h1 class="text-xl font-semibold tracking-tight">Sign-in needs attention</h1>
+	<p class="text-sm leading-relaxed text-muted-foreground" role="alert">{message}</p>
+	<Button href={signInHref} class="self-start">Try signing in again</Button>
+</section>

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

@@ -0,0 +1,15 @@
+/**
+ * Shared failure view for the server-side session code handoff
+ * (`createBrowserSessionCodeHandoff`). The host's callback load performs the
+ * exchange and redirects on success; this renders only a refusal and retry.
+ * It never reads Auth from the browser.
+ */
+type Props = {
+    /** User-facing refusal message from the host's callback load. */
+    message: string;
+    signInHref: string;
+};
+declare const BrowserSessionBridge: import("svelte").Component<Props, {}, "">;
+type BrowserSessionBridge = ReturnType<typeof BrowserSessionBridge>;
+export default BrowserSessionBridge;
+//# sourceMappingURL=BrowserSessionBridge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserSessionBridge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/BrowserSessionBridge.svelte.ts"],"names":[],"mappings":"AAOC;;;;;GAKG;AACH,KAAK,KAAK,GAAG;IACZ,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAiBH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/DeviceAuthorizationPanel.svelte

@@ -0,0 +1,374 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import {
+		Badge,
+		Button,
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		Icon
+	} from '@vibesdotdev/kit/components';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { CapabilityError, type CaughtFailure } from '@vibesdotdev/kernel';
+	import type { RuntimeDescriptor } from '@vibesdotdev/kernel/schemas/descriptor';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { attempt, failureLabel } from '../outcome.js';
+	import {
+		AUTH_DEVICE_SESSION_CAPABILITY_ID,
+		AUTH_DEVICE_SESSION_KIND,
+		AUTH_DEVICE_SESSION_REVALIDATE_MS,
+		type AuthDeviceSessionCapability,
+		type AuthDeviceSessionSnapshot
+	} from '@vibesdotdev/auth/device-session';
+
+	interface Props {
+		/** Named config/environment; omit to use the active runtime environment. */
+		environmentId?: string;
+		/** Optional test/host injection. Normal consumers resolve the runtime capability. */
+		capability?: AuthDeviceSessionCapability;
+		title?: string;
+		description?: string;
+		autoStart?: boolean;
+		recommended?: boolean;
+		beginLabel?: string;
+		onOpenVerification?: (uri: string) => Promise<void> | void;
+		onSignedIn?: (
+			snapshot: Extract<AuthDeviceSessionSnapshot, { status: 'signed-in' }>
+		) => Promise<void> | void;
+	}
+
+	const logger = () => loadAuthComponentLogger('auth.device-panel', runtimeStore);
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let {
+		environmentId,
+		capability,
+		title = 'Sign in to Vibes',
+		description = 'Connect this device without sharing your password with the desktop app.',
+		autoStart = false,
+		recommended = false,
+		beginLabel = 'Continue with Vibes Cloud',
+		onOpenVerification,
+		onSignedIn
+	}: Props = $props();
+
+	// Runtime owner references are opaque generation-bound proxies. Deep Svelte
+	// state would proxy the proxy and break its RPC method identity.
+	let resolvedCapability: AuthDeviceSessionCapability | null = null;
+	let snapshot = $state<AuthDeviceSessionSnapshot | null>(null);
+	let loading = $state(true);
+	let actionBusy = $state(false);
+	let unavailable = $state<string | null>(null);
+	let unavailableReason = $state<
+		'kind-unavailable' | 'owner-unreachable' | 'snapshot-unreachable' | null
+	>(null);
+	let alive = false;
+	let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+	let notifiedSignedInEnvironment: string | null = null;
+
+	function stopRefresh(): void {
+		if (refreshTimer) clearTimeout(refreshTimer);
+		refreshTimer = null;
+	}
+
+	function scheduleRefresh(next: AuthDeviceSessionSnapshot): void {
+		stopRefresh();
+		if (!alive) return;
+		let delayMs: number;
+		if (next.status === 'requesting' || next.status === 'pending') {
+			delayMs = 1_000;
+		} else if (next.status === 'signed-in') {
+			const projectedDelay = Date.parse(next.revalidateAt) - Date.now();
+			delayMs = Number.isFinite(projectedDelay)
+				? Math.max(250, Math.min(projectedDelay, AUTH_DEVICE_SESSION_REVALIDATE_MS))
+				: AUTH_DEVICE_SESSION_REVALIDATE_MS;
+		} else if (next.status === 'error' && next.error.code === 'network_error') {
+			delayMs = 5_000;
+		} else {
+			return;
+		}
+		refreshTimer = setTimeout(() => void refresh(), delayMs);
+	}
+
+	function scheduleOwnerRecovery(delayMs = 1_000): void {
+		stopRefresh();
+		if (!alive) return;
+		refreshTimer = setTimeout(() => void refresh(), delayMs);
+	}
+
+	async function getCapability(): Promise<AuthDeviceSessionCapability> {
+		if (resolvedCapability) return resolvedCapability;
+		if (capability) {
+			resolvedCapability = capability;
+			return capability;
+		}
+		const runtime = await runtimeStore.load();
+		if (!runtime.hasKind(AUTH_DEVICE_SESSION_KIND)) {
+			throw new AuthSurfaceCapabilityError('kind-unavailable');
+		}
+		const resolved = await attempt(() =>
+			runtime
+				.query<RuntimeDescriptor, AuthDeviceSessionCapability>(AUTH_DEVICE_SESSION_KIND)
+				.withId(AUTH_DEVICE_SESSION_CAPABILITY_ID)
+				.resolve()
+		);
+		if (!resolved.ok) throw new AuthSurfaceCapabilityError('owner-unreachable', resolved.failure);
+		resolvedCapability = resolved.value;
+		return resolvedCapability;
+	}
+
+	class AuthSurfaceCapabilityError extends CapabilityError {
+		readonly surfaceReason: 'kind-unavailable' | 'owner-unreachable';
+
+		constructor(surfaceReason: 'kind-unavailable' | 'owner-unreachable', cause?: CaughtFailure) {
+			super('The device sign-in capability is not available.', 'UNAVAILABLE', {
+				reason: surfaceReason,
+				retryable: false,
+				cause
+			});
+			this.surfaceReason = surfaceReason;
+		}
+	}
+
+	function showCapabilityFailure(failure: CaughtFailure): void {
+		stopRefresh();
+		// A projected owner is a generation-bound remote reference. Never pin a
+		// failed proxy across recovery; the next attempt must resolve the active
+		// runtime generation again.
+		resolvedCapability = null;
+		snapshot = null;
+		notifiedSignedInEnvironment = null;
+		if (failure instanceof AuthSurfaceCapabilityError) {
+			unavailableReason = failure.surfaceReason;
+			unavailable =
+				failure.surfaceReason === 'kind-unavailable'
+					? 'Secure sign-in is not installed in this app.'
+					: 'Vibes Cloud sign-in is not connected to the local runtime.';
+			return;
+		}
+		unavailableReason = 'snapshot-unreachable';
+		unavailable = 'Vibes Cloud sign-in could not read this device session.';
+	}
+
+	async function applySnapshot(next: AuthDeviceSessionSnapshot): Promise<void> {
+		snapshot = next;
+		unavailable = null;
+		unavailableReason = null;
+		scheduleRefresh(next);
+		if (next.status === 'signed-in') {
+			if (notifiedSignedInEnvironment !== next.environmentId) {
+				notifiedSignedInEnvironment = next.environmentId;
+				await onSignedIn?.(next);
+			}
+		} else {
+			notifiedSignedInEnvironment = null;
+		}
+	}
+
+	async function refresh(): Promise<void> {
+		for (let tries = 0; tries < 3; tries += 1) {
+			const read = await attempt(async () => {
+				const owner = await getCapability();
+				await applySnapshot(
+					await (environmentId === undefined ? owner.snapshot() : owner.snapshot(environmentId))
+				);
+			});
+			if (read.ok) {
+				loading = false;
+				return;
+			}
+			const failure = read.failure;
+			showCapabilityFailure(failure);
+			if (
+				(failure instanceof AuthSurfaceCapabilityError && failure.surfaceReason === 'kind-unavailable') ||
+				!alive
+			) {
+				loading = false;
+				return;
+			}
+			if (tries === 2) {
+				// The daemon may still be replacing its workspace generation even
+				// after the native shell becomes visible. Recover automatically;
+				// a transient owner gap is not a user configuration decision.
+				scheduleOwnerRecovery(failure instanceof AuthSurfaceCapabilityError ? 1_000 : 5_000);
+				loading = false;
+				return;
+			}
+			// Initial Bridge composition can resolve while the projected ref
+			// generation is being replaced. Recover invisibly and boundedly.
+			await new Promise((resolve) => setTimeout(resolve, 250 * (tries + 1)));
+		}
+	}
+
+	async function begin(): Promise<void> {
+		if (actionBusy) return;
+		actionBusy = true;
+		unavailable = null;
+		const began = await attempt(async () => {
+			const owner = await getCapability();
+			await applySnapshot(
+				await (environmentId === undefined ? owner.begin() : owner.begin(environmentId))
+			);
+		});
+		if (!began.ok) {
+			(await logger()).warn('Secure sign-in could not be started', { failure: failureLabel(began.failure) });
+			unavailable = 'Secure sign-in could not be started.';
+		}
+		actionBusy = false;
+	}
+
+	async function cancel(): Promise<void> {
+		if (actionBusy) return;
+		actionBusy = true;
+		const cancelled = await attempt(async () => {
+			const owner = await getCapability();
+			await applySnapshot(await owner.cancel());
+		});
+		if (!cancelled.ok) {
+			(await logger()).warn('Secure sign-in could not be cancelled', { failure: failureLabel(cancelled.failure) });
+			unavailable = 'Secure sign-in could not be cancelled.';
+		}
+		actionBusy = false;
+	}
+
+	async function signOut(): Promise<void> {
+		if (actionBusy) return;
+		actionBusy = true;
+		const signedOut = await attempt(async () => {
+			const owner = await getCapability();
+			await applySnapshot(
+				await (environmentId === undefined ? owner.signOut() : owner.signOut(environmentId))
+			);
+			notifiedSignedInEnvironment = null;
+		});
+		if (!signedOut.ok) {
+			(await logger()).warn('This device could not be signed out', { failure: failureLabel(signedOut.failure) });
+			unavailable = 'This device could not be signed out.';
+		}
+		actionBusy = false;
+	}
+
+	async function openVerification(): Promise<void> {
+		if (snapshot?.status !== 'pending') return;
+		const uri = snapshot.verificationUriComplete ?? snapshot.verificationUri;
+		if (onOpenVerification) {
+			await onOpenVerification(uri);
+			return;
+		}
+		window.open(uri, '_blank', 'noopener,noreferrer');
+	}
+
+	onMount(() => {
+		alive = true;
+		void refresh().then(() => {
+			if (autoStart && snapshot?.status === 'signed-out') void begin();
+		});
+		return () => {
+			alive = false;
+			stopRefresh();
+		};
+	});
+</script>
+
+<Card data-testid="device-authorization-panel">
+	<CardHeader>
+		<div class="flex items-start justify-between gap-3">
+			<div class="space-y-1">
+				<CardTitle class="flex items-center gap-2">
+					<Icon icon="lucide:shield-check" class="size-5 text-primary" />
+					{title}
+				</CardTitle>
+				<p class="text-muted-foreground text-sm">{description}</p>
+			</div>
+			{#if snapshot?.status === 'signed-in'}
+				<Badge variant="secondary">Connected</Badge>
+			{:else if snapshot?.status === 'pending'}
+				<Badge variant="outline">Waiting</Badge>
+			{:else if recommended}
+				<Badge variant="secondary">Recommended</Badge>
+			{/if}
+		</div>
+	</CardHeader>
+
+	<CardContent class="space-y-4">
+		{#if loading}
+			<div class="text-muted-foreground flex items-center gap-2 text-sm" role="status">
+				<Icon icon="lucide:loader-circle" class="size-4 animate-spin" />
+				Checking this device…
+			</div>
+		{:else if unavailable}
+			<div class="space-y-3" data-auth-unavailable-reason={unavailableReason}>
+				<p class="text-destructive text-sm" role="alert">{unavailable}</p>
+				<Button type="button" variant="outline" onclick={() => void refresh()}>Try again</Button>
+			</div>
+		{:else if !snapshot || snapshot.status === 'signed-out'}
+			<div class="space-y-3">
+				{#if snapshot?.status === 'signed-out' && snapshot.warning}
+					<p class="text-amber-600 text-sm" role="status">{snapshot.warning.message}</p>
+				{/if}
+				<p class="text-muted-foreground text-sm">
+					Your browser handles approval. This app receives only the result.
+				</p>
+				<Button type="button" disabled={actionBusy} onclick={() => void begin()}>
+					<Icon icon="lucide:log-in" class="mr-2 size-4" />
+					{actionBusy ? 'Starting…' : beginLabel}
+				</Button>
+			</div>
+		{:else if snapshot.status === 'requesting'}
+			<div class="text-muted-foreground flex items-center gap-2 text-sm" role="status">
+				<Icon icon="lucide:loader-circle" class="size-4 animate-spin" />
+				Preparing a secure approval…
+			</div>
+		{:else if snapshot.status === 'pending'}
+			<div class="space-y-4">
+				<div class="bg-muted/60 rounded-lg border p-4 text-center">
+					<p class="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+						Confirm this code
+					</p>
+					<p class="mt-2 text-2xl font-semibold tracking-[0.22em]" aria-label="Device code">
+						{snapshot.userCode}
+					</p>
+				</div>
+				<p class="text-muted-foreground text-sm">
+					Open Vibes Auth, sign in if needed, and approve only when the code matches.
+				</p>
+				<div class="flex flex-wrap gap-2">
+					<Button type="button" disabled={actionBusy} onclick={() => void openVerification()}>
+						<Icon icon="lucide:external-link" class="mr-2 size-4" />
+						Open Vibes Auth
+					</Button>
+					<Button type="button" variant="ghost" disabled={actionBusy} onclick={() => void cancel()}>
+						Cancel
+					</Button>
+				</div>
+			</div>
+		{:else if snapshot.status === 'signed-in'}
+			<div class="space-y-3">
+				<div>
+					<p class="font-medium">{snapshot.user.name || snapshot.user.email}</p>
+					{#if snapshot.user.name}
+						<p class="text-muted-foreground text-sm">{snapshot.user.email}</p>
+					{/if}
+				</div>
+				<Button
+					type="button"
+					variant="outline"
+					disabled={actionBusy}
+					onclick={() => void signOut()}
+				>
+					{actionBusy ? 'Signing out…' : 'Sign out on this device'}
+				</Button>
+			</div>
+		{:else}
+			<div class="space-y-3">
+				<p class="text-destructive text-sm" role="alert">{snapshot.error.message}</p>
+				<Button type="button" variant="outline" disabled={actionBusy} onclick={() => void begin()}>
+					Try again
+				</Button>
+			</div>
+		{/if}
+	</CardContent>
+</Card>

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

@@ -0,0 +1,20 @@
+import { type AuthDeviceSessionCapability, type AuthDeviceSessionSnapshot } from '@vibesdotdev/auth/device-session';
+interface Props {
+    /** Named config/environment; omit to use the active runtime environment. */
+    environmentId?: string;
+    /** Optional test/host injection. Normal consumers resolve the runtime capability. */
+    capability?: AuthDeviceSessionCapability;
+    title?: string;
+    description?: string;
+    autoStart?: boolean;
+    recommended?: boolean;
+    beginLabel?: string;
+    onOpenVerification?: (uri: string) => Promise<void> | void;
+    onSignedIn?: (snapshot: Extract<AuthDeviceSessionSnapshot, {
+        status: 'signed-in';
+    }>) => Promise<void> | void;
+}
+declare const DeviceAuthorizationPanel: import("svelte").Component<Props, {}, "">;
+type DeviceAuthorizationPanel = ReturnType<typeof DeviceAuthorizationPanel>;
+export default DeviceAuthorizationPanel;
+//# sourceMappingURL=DeviceAuthorizationPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceAuthorizationPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DeviceAuthorizationPanel.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,EAIL,KAAK,2BAA2B,EAChC,KAAK,yBAAyB,EAC9B,MAAM,kCAAkC,CAAC;AAG1C,UAAU,KAAK;IACd,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CACZ,QAAQ,EAAE,OAAO,CAAC,yBAAyB,EAAE;QAAE,MAAM,EAAE,WAAW,CAAA;KAAE,CAAC,KACjE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CAC1B;AAwVF,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/svelte/components/OAuthMethodPicker.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { attempt, failureLabel } from '../outcome.js';
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { resolveUiPrefs, type UiPrefs } from '@vibesdotdev/account/svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import type { AuthApiClient, AuthProviderConfig, AuthProviderId } from '@vibesdotdev/auth/api';
+	import {
+		getLastAuthMethod,
+		mapProviderIdToAuthMethod,
+		setLastAuthMethod,
+		type AuthMethod
+	} from '../auth-method';
+	import { navigateAuth, type AuthNavigate } from '../navigation-effect.js';
+
+	/**
+	 * Renders one Button per configured OAuth provider with a "last used"
+	 * indicator backed by the `auth.last_method` account user-setting. Each click navigates
+	 * the browser to the better-auth provider sign-in URL.
+	 */
+	type Props = {
+		providers: AuthProviderConfig[];
+		redirectTo?: string;
+		/**
+		 * Override the resolved client. Tests inject a stub here; production
+		 * callers leave this unset.
+		 */
+		client?: AuthApiClient;
+		/** Direction of the button stack. */
+		direction?: 'vertical' | 'horizontal';
+		/** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+		navigate?: AuthNavigate;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let props: Props = $props();
+
+	const providers = $derived(props.providers ?? []);
+	const direction = $derived(props.direction ?? 'vertical');
+
+	let lastMethod = $state<AuthMethod | null>(null);
+	let busyProvider = $state<AuthProviderId | null>(null);
+
+	const logger = () => loadAuthComponentLogger('auth.oauth-method-picker', runtimeStore);
+
+	async function resolveClient(): Promise<AuthApiClient> {
+		if (props.client) return props.client;
+		const client = await getVibesClient<AuthApiClient>('auth', await runtimeStore.load());
+		await client.ensureLoaded();
+		return client;
+	}
+
+	async function resolvePrefs(): Promise<UiPrefs> {
+		const prefs = resolveUiPrefs(await runtimeStore.load());
+		await prefs.load();
+		return prefs;
+	}
+
+	onMount(async () => {
+		const loaded = await attempt(async () => getLastAuthMethod(await resolvePrefs()));
+		if (loaded.ok) lastMethod = loaded.value;
+		else (await logger()).warn('Last sign-in method unavailable', { failure: failureLabel(loaded.failure) });
+	});
+
+	function isLastUsed(provider: AuthProviderConfig): boolean {
+		return lastMethod === mapProviderIdToAuthMethod(provider.id);
+	}
+
+	async function startProvider(provider: AuthProviderConfig) {
+		if (busyProvider) return;
+		busyProvider = provider.id;
+		// The hint is best-effort: a failed save never blocks sign-in.
+		const remembered = await attempt(async () =>
+			setLastAuthMethod(await resolvePrefs(), mapProviderIdToAuthMethod(provider.id))
+		);
+		if (!remembered.ok) {
+			(await logger()).warn('Last sign-in method not saved', { failure: failureLabel(remembered.failure) });
+		}
+		(await logger()).info('Provider sign-in started', { providerId: provider.id });
+		const started = await attempt(async () => {
+			const client = await resolveClient();
+			const href = client.providerSignInUrl(provider.id, {
+				redirectTo: props.redirectTo,
+				signInPath: provider.signInPath
+			});
+			navigateAuth(props.navigate, href);
+		});
+		if (!started.ok) {
+			(await logger()).warn('Provider sign-in start failed', {
+				providerId: provider.id,
+				failure: failureLabel(started.failure)
+			});
+			busyProvider = null;
+		}
+	}
+</script>
+
+<div
+	class={`auth-oauth-method-picker flex w-full ${direction === 'horizontal' ? 'flex-row' : 'flex-col'} gap-3`}
+>
+	{#each providers as provider (provider.id)}
+		{@const isLoading = busyProvider === provider.id}
+		{@const isLast = isLastUsed(provider)}
+		<div class="relative w-full">
+			<Button
+				variant="outline"
+				class="w-full"
+				disabled={busyProvider !== null}
+				onclick={() => startProvider(provider)}
+			>
+				{#if provider.icon}
+					<Icon icon={provider.icon} class="mr-2 h-4 w-4 shrink-0" />
+				{/if}
+				<span class="min-w-0 truncate">
+					{isLoading ? `Redirecting to ${provider.label}…` : provider.label}
+				</span>
+			</Button>
+			{#if isLast}
+				<span
+					class="bg-primary pointer-events-none absolute -top-1 -right-1 z-10 size-2 rounded-full"
+					style="box-shadow: 0 0 0 2px var(--card), 0 0 6px color-mix(in oklab, var(--primary) 50%, transparent)"
+					aria-label="Last used"
+				></span>
+			{/if}
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,24 @@
+import type { AuthApiClient, AuthProviderConfig } from '@vibesdotdev/auth/api';
+import { type AuthNavigate } from '../navigation-effect.ts';
+/**
+ * Renders one Button per configured OAuth provider with a "last used"
+ * indicator backed by the `auth.last_method` account user-setting. Each click navigates
+ * the browser to the better-auth provider sign-in URL.
+ */
+type Props = {
+    providers: AuthProviderConfig[];
+    redirectTo?: string;
+    /**
+     * Override the resolved client. Tests inject a stub here; production
+     * callers leave this unset.
+     */
+    client?: AuthApiClient;
+    /** Direction of the button stack. */
+    direction?: 'vertical' | 'horizontal';
+    /** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+    navigate?: AuthNavigate;
+};
+declare const OAuthMethodPicker: import("svelte").Component<Props, {}, "">;
+type OAuthMethodPicker = ReturnType<typeof OAuthMethodPicker>;
+export default OAuthMethodPicker;
+//# sourceMappingURL=OAuthMethodPicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthMethodPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/OAuthMethodPicker.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAkB,MAAM,uBAAuB,CAAC;AAO/F,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;;GAIG;AACH,KAAK,KAAK,GAAG;IACZ,SAAS,EAAE,kBAAkB,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAsGH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/PasswordStrengthMeter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { evaluatePassword } from '../password';
+
+	/**
+	 * Renders a 0-4 strength bar + label for the given password value.
+	 *
+	 * Pure UX hint — the canonical strength/policy enforcement lives on the
+	 * server in better-auth. Safe to render at any time; doesn't log the value.
+	 */
+	type Props = {
+		value: string;
+		/** Helper text shown next to the strength label. */
+		helperText?: string;
+	};
+
+	let props: Props = $props();
+
+	const result = $derived(evaluatePassword(props.value));
+	const helperText = $derived(props.helperText ?? 'Use 12+ chars, numbers & symbols.');
+</script>
+
+<div class="auth-password-strength flex flex-col gap-1">
+	<div class="bg-muted h-2 w-full overflow-hidden rounded-full">
+		<div
+			class={`h-full transition-all duration-300 ${result.colorClass}`}
+			style={`width: ${result.percent}%`}
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="4"
+			aria-valuenow={result.score}
+			aria-label="Password strength"
+		></div>
+	</div>
+	<p class="text-muted-foreground flex items-center justify-between text-xs">
+		<span>Password strength: {result.label}</span>
+		<span>{helperText}</span>
+	</p>
+</div>

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

@@ -0,0 +1,15 @@
+/**
+ * Renders a 0-4 strength bar + label for the given password value.
+ *
+ * Pure UX hint — the canonical strength/policy enforcement lives on the
+ * server in better-auth. Safe to render at any time; doesn't log the value.
+ */
+type Props = {
+    value: string;
+    /** Helper text shown next to the strength label. */
+    helperText?: string;
+};
+declare const PasswordStrengthMeter: import("svelte").Component<Props, {}, "">;
+type PasswordStrengthMeter = ReturnType<typeof PasswordStrengthMeter>;
+export default PasswordStrengthMeter;
+//# sourceMappingURL=PasswordStrengthMeter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordStrengthMeter.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PasswordStrengthMeter.svelte.ts"],"names":[],"mappings":"AAMC;;;;;GAKG;AACH,KAAK,KAAK,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuBH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}