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

package/dist/svelte/components/SignInForm.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Checkbox } from '@vibesdotdev/kit/components/ui/checkbox';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { browserWindow } from '../browser-window.js';
+	import { failureMessage } from '@vibesdotdev/auth/api';
+	import { attempt, failureLabel, failureStatus } from '../outcome.js';
+	
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import {
+		type AuthApiClient,
+		type AuthProviderConfig,
+		type AuthProviderId,
+		type AuthSession
+	} from '@vibesdotdev/auth/api';
+	import type { SignInNotice } from '../types';
+	import { navigateAuth, type AuthNavigate } from '../navigation-effect.js';
+	import { needsSessionWarmup } from '../session-warmup.js';
+
+	type Props = {
+		providers?: AuthProviderConfig[];
+		redirectTo?: string;
+		/**
+		 * Override the resolved client. Tests inject a stub here; production
+		 * callers leave this unset so the canonical `AuthApiClient` is resolved
+		 * via `getVibesClient('auth', runtime)`.
+		 */
+		client?: AuthApiClient;
+		showEmail?: boolean;
+		title?: string;
+		description?: string;
+		/** Optional banner rendered at the top of the form. */
+		notice?: SignInNotice | null;
+		/** Render a "Forgot password?" link next to the password label when set. */
+		forgotPasswordHref?: string;
+		/** Default state for the "Remember me" checkbox. Defaults to true. */
+		defaultRememberMe?: boolean;
+		/**
+		 * Opaque client identifier propagated through cross-app handoff. Posted as a
+		 * hidden field and used by `/api/session` warm-up when set.
+		 */
+		clientContext?: string | null;
+		/**
+		 * Path used to warm the auth cookie before redirecting cross-origin. Defaults
+		 * to `/api/session`. Set to `null` to skip the warm-up.
+		 */
+		sessionWarmupPath?: string | null;
+		/** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+		navigate?: AuthNavigate;
+		/**
+		 * Progressive-enhancement mode. When set, the email form renders a native
+		 * `<form method="POST" action={action}>` that logs in server-side with JS
+		 * DISABLED (the app owns the SvelteKit server action — e.g. `"?/login"`);
+		 * with JS, `onsubmit` intercepts and runs the client flow (enhancement).
+		 * The package NEVER imports a server-only surface — the app injects this.
+		 */
+		action?: string;
+		/**
+		 * Server action result for the no-JS round-trip (SvelteKit `ActionData`).
+		 * Its `error` is surfaced as the form error so a JS-less failure is visible.
+		 */
+		form?: { error?: string } | null;
+		onSuccess?: (session: AuthSession) => void;
+		onError?: (message: string) => void;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let props: Props = $props();
+
+	const providersValue = $derived<AuthProviderConfig[]>(props.providers ?? []);
+	const showEmailValue = $derived(props.showEmail ?? true);
+	const titleValue = $derived(props.title ?? 'Sign in');
+	const descriptionValue = $derived(props.description ?? 'Choose how you want to sign in.');
+	const warmupPath = $derived(
+		props.sessionWarmupPath === undefined ? '/api/session' : props.sessionWarmupPath
+	);
+
+	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;
+	}
+
+	let email = $state('');
+	let password = $state('');
+	// `defaultRememberMe` only seeds the initial value; the user's toggles
+	// drive the local state from then on. Reading the prop once at init is
+	// intentional here.
+	// svelte-ignore state_referenced_locally
+	let rememberMe = $state(props.defaultRememberMe ?? true);
+	let showPassword = $state(false);
+	let busyEmail = $state(false);
+	let busyProvider = $state<AuthProviderId | null>(null);
+	let formError = $state<string | null>(null);
+
+	const passwordInputType = $derived(showPassword ? 'text' : 'password');
+	// No-JS round-trip: SvelteKit rerenders with the server action result; surface
+	// its error so a JS-less failure is visible even though `submitEmail` never ran.
+	const serverError = $derived(props.form?.error ?? null);
+
+	const logger = () => loadAuthComponentLogger('auth.signin', runtimeStore);
+
+	const noticeTitle = $derived.by(() => {
+		switch (props.notice?.kind) {
+			case 'magic-link-sent':
+				return 'Check your email';
+			case 'registered':
+				return 'Registration successful';
+			case 'unverified':
+				return 'Email not verified';
+			default:
+				return null;
+		}
+	});
+
+	const noticeDescription = $derived.by(() => {
+		if (props.notice?.message) return props.notice.message;
+		switch (props.notice?.kind) {
+			case 'magic-link-sent':
+				return "We've sent you a magic link. Click it to finish signing in.";
+			case 'registered':
+				return 'Your account was created. Sign in to continue.';
+			case 'unverified':
+				return 'Please verify your email before signing in.';
+			default:
+				return null;
+		}
+	});
+
+	function navigateAfterSuccess(redirectTo: string) {
+		const page = browserWindow();
+		if (!page) return;
+		// Cross-origin redirects (auth.vibes.dev -> app.vibes.dev) are
+		// safelisted by better-auth server-side; here we just trigger the
+		// browser navigation. Same-origin still uses a full navigation so
+		// the destination route picks up the freshly-set auth cookie.
+		// A redirect that is not a URL is navigated to as given.
+		const target = URL.parse(redirectTo, page.location.origin);
+		navigateAuth(props.navigate, target ? target.toString() : redirectTo);
+	}
+
+	async function warmSessionCookie(client: AuthApiClient): Promise<void> {
+		if (!warmupPath) return;
+		const page = browserWindow();
+		if (page && !needsSessionWarmup(props.redirectTo, page.location.origin)) {
+			return;
+		}
+		const warmed = await attempt(async () => {
+			const target = new URL(warmupPath, client.authOrigin);
+			if (props.clientContext) {
+				target.searchParams.set('client', props.clientContext);
+			}
+			await fetch(target.toString(), { credentials: 'include' });
+		});
+		// Warm-up is best-effort. Log and move on; the redirect will still
+		// hit the destination which can re-auth if needed.
+		if (!warmed.ok) (await logger()).warn('Session warm-up fetch failed', { failure: failureLabel(warmed.failure) });
+	}
+
+	async function submitEmail(event: SubmitEvent) {
+		event.preventDefault();
+		if (busyEmail) return;
+		formError = null;
+		if (!email || !password) {
+			formError = 'Email and password are required.';
+			return;
+		}
+		busyEmail = true;
+		(await logger()).info('Email sign-in submitted', { rememberMe });
+		const signedIn = await attempt(async () => {
+			const client = await resolveClient();
+			const session = await client.signInEmail({
+				email,
+				password,
+				rememberMe,
+				callbackURL: props.redirectTo
+			});
+			(await logger()).info('Email sign-in succeeded', { userId: session.user?.id ?? null });
+			await warmSessionCookie(client);
+			props.onSuccess?.(session);
+			if (props.redirectTo) {
+				navigateAfterSuccess(props.redirectTo);
+			}
+		});
+		if (!signedIn.ok) {
+			const message = failureMessage(signedIn.failure, 'Sign-in failed');
+			(await logger()).warn('Email sign-in failed', {
+				failure: failureLabel(signedIn.failure),
+				status: failureStatus(signedIn.failure)
+			});
+			formError = message;
+			props.onError?.(message);
+		}
+		busyEmail = false;
+	}
+
+	async function startProvider(provider: AuthProviderConfig) {
+		if (busyProvider) return;
+		busyProvider = provider.id;
+		(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) {
+			const message = failureMessage(started.failure, 'Failed to start provider sign-in');
+			(await logger()).warn('Provider sign-in start failed', {
+				providerId: provider.id,
+				failure: failureLabel(started.failure)
+			});
+			busyProvider = null;
+			formError = message;
+			props.onError?.(message);
+		}
+	}
+</script>
+
+<section class="auth-signin flex flex-col gap-4">
+	{#if titleValue || descriptionValue}
+		<header>
+			{#if titleValue}
+				<h1 class="text-xl font-semibold">{titleValue}</h1>
+			{/if}
+			{#if descriptionValue}
+				<p class="text-sm text-muted-foreground">{descriptionValue}</p>
+			{/if}
+		</header>
+	{/if}
+
+	{#if props.notice && noticeTitle}
+		<Alert
+			class={props.notice.kind === 'unverified'
+				? 'border-amber-500/60 bg-amber-50/50 dark:bg-amber-900/20'
+				: 'border-emerald-500/60 bg-emerald-50/50 dark:bg-emerald-900/20'}
+		>
+			<AlertTitle>{noticeTitle}</AlertTitle>
+			{#if noticeDescription}
+				<AlertDescription>{noticeDescription}</AlertDescription>
+			{/if}
+		</Alert>
+	{/if}
+
+	{#if showEmailValue}
+		<form
+			class="flex flex-col gap-3"
+			method={props.action ? 'POST' : undefined}
+			action={props.action}
+			onsubmit={submitEmail}
+		>
+			{#if props.clientContext}
+				<input type="hidden" name="client" value={props.clientContext} />
+			{/if}
+			{#if props.redirectTo}
+				<input type="hidden" name="redirectTo" value={props.redirectTo} />
+			{/if}
+
+			<div class="grid gap-1.5">
+				<Label for="auth-signin-email">Email</Label>
+				<Input
+					id="auth-signin-email"
+					name="email"
+					type="email"
+					autocomplete="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+
+			<div class="grid gap-1.5">
+				<div class="flex items-center justify-between">
+					<Label for="auth-signin-password">Password</Label>
+					{#if props.forgotPasswordHref}
+						<Button
+							type="button"
+							variant="link"
+							href={props.forgotPasswordHref}
+							class="h-auto p-0 text-sm"
+						>
+							Forgot password?
+						</Button>
+					{/if}
+				</div>
+				<div class="relative">
+					<Input
+						id="auth-signin-password"
+						name="password"
+						type={passwordInputType}
+						autocomplete="current-password"
+						bind:value={password}
+						required
+						class="pr-10"
+					/>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						class="text-muted-foreground absolute top-1/2 right-1 h-8 w-8 -translate-y-1/2"
+						onclick={() => (showPassword = !showPassword)}
+						aria-label={showPassword ? 'Hide password' : 'Show password'}
+					>
+						<Icon icon={showPassword ? 'lucide:eye-off' : 'lucide:eye'} class="h-4 w-4" />
+					</Button>
+				</div>
+			</div>
+
+			<label class="flex items-center gap-2 text-sm">
+				<Checkbox id="auth-signin-remember" name="rememberMe" bind:checked={rememberMe} />
+				<span>Remember me</span>
+			</label>
+
+			{#if formError || serverError}
+				<p class="text-sm text-destructive" role="alert">{formError ?? serverError}</p>
+			{/if}
+
+			<Button type="submit" disabled={busyEmail}>
+				{busyEmail ? 'Signing in…' : 'Sign in'}
+			</Button>
+		</form>
+	{/if}
+
+	{#if providersValue.length > 0}
+		{#if showEmailValue}
+			<div class="relative my-1 flex items-center" aria-hidden="true">
+				<span class="flex-1 border-t"></span>
+				<span class="mx-3 text-xs uppercase text-muted-foreground">or</span>
+				<span class="flex-1 border-t"></span>
+			</div>
+		{/if}
+
+		<div class="flex flex-col gap-2">
+			{#each providersValue as provider (provider.id)}
+				<Button
+					variant="outline"
+					onclick={() => startProvider(provider)}
+					disabled={busyProvider !== null}
+				>
+					{#if provider.icon}
+						<Icon icon={provider.icon} class="mr-2 h-4 w-4" />
+					{/if}
+					{busyProvider === provider.id ? `Redirecting to ${provider.label}…` : provider.label}
+				</Button>
+			{/each}
+		</div>
+	{/if}
+</section>

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

@@ -0,0 +1,55 @@
+import { type AuthApiClient, type AuthProviderConfig, type AuthSession } from '@vibesdotdev/auth/api';
+import type { SignInNotice } from '../types';
+import { type AuthNavigate } from '../navigation-effect.ts';
+type Props = {
+    providers?: AuthProviderConfig[];
+    redirectTo?: string;
+    /**
+     * Override the resolved client. Tests inject a stub here; production
+     * callers leave this unset so the canonical `AuthApiClient` is resolved
+     * via `getVibesClient('auth', runtime)`.
+     */
+    client?: AuthApiClient;
+    showEmail?: boolean;
+    title?: string;
+    description?: string;
+    /** Optional banner rendered at the top of the form. */
+    notice?: SignInNotice | null;
+    /** Render a "Forgot password?" link next to the password label when set. */
+    forgotPasswordHref?: string;
+    /** Default state for the "Remember me" checkbox. Defaults to true. */
+    defaultRememberMe?: boolean;
+    /**
+     * Opaque client identifier propagated through cross-app handoff. Posted as a
+     * hidden field and used by `/api/session` warm-up when set.
+     */
+    clientContext?: string | null;
+    /**
+     * Path used to warm the auth cookie before redirecting cross-origin. Defaults
+     * to `/api/session`. Set to `null` to skip the warm-up.
+     */
+    sessionWarmupPath?: string | null;
+    /** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+    navigate?: AuthNavigate;
+    /**
+     * Progressive-enhancement mode. When set, the email form renders a native
+     * `<form method="POST" action={action}>` that logs in server-side with JS
+     * DISABLED (the app owns the SvelteKit server action — e.g. `"?/login"`);
+     * with JS, `onsubmit` intercepts and runs the client flow (enhancement).
+     * The package NEVER imports a server-only surface — the app injects this.
+     */
+    action?: string;
+    /**
+     * Server action result for the no-JS round-trip (SvelteKit `ActionData`).
+     * Its `error` is surfaced as the form error so a JS-less failure is visible.
+     */
+    form?: {
+        error?: string;
+    } | null;
+    onSuccess?: (session: AuthSession) => void;
+    onError?: (message: string) => void;
+};
+declare const SignInForm: import("svelte").Component<Props, {}, "">;
+type SignInForm = ReturnType<typeof SignInForm>;
+export default SignInForm;
+//# sourceMappingURL=SignInForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignInForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SignInForm.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,kBAAkB,EAEvB,KAAK,WAAW,EAChB,MAAM,uBAAuB,CAAC;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIzE,KAAK,KAAK,GAAG;IACZ,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAgRH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/SignInHub.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import type {
+		AuthApiClient,
+		AuthProviderConfig,
+		AuthSession
+	} from '@vibesdotdev/auth/api';
+	import OAuthMethodPicker from './OAuthMethodPicker.svelte';
+	import SignInForm from './SignInForm.svelte';
+	import type { AuthNavigate } from '../navigation-effect.js';
+	import type { SignInNotice } from '../types';
+
+	/**
+	 * Hub-style sign-in surface combining OAuth providers + email/password.
+	 *
+	 * Mirrors auth-web's `/` route layout: OAuth provider list on top, divider,
+	 * email/password form below. Phone and wallet auth are intentionally OUT of
+	 * scope here — those have substantial server-side dependencies that haven't
+	 * been ported to the package yet.
+	 *
+	 * The canonical `AuthApiClient` is resolved by the inner `SignInForm` /
+	 * `OAuthMethodPicker` via `getVibesClient('auth', runtime)`. Tests can inject one
+	 * stub via the `client` prop; it threads through to both children.
+	 */
+	type Props = {
+		providers: AuthProviderConfig[];
+		redirectTo?: string;
+		client?: AuthApiClient;
+		title?: string;
+		description?: string;
+		notice?: SignInNotice | null;
+		forgotPasswordHref?: string;
+		signUpHref?: string;
+		clientContext?: string | null;
+		sessionWarmupPath?: string | null;
+		defaultRememberMe?: boolean;
+		onSuccess?: (session: AuthSession) => void;
+		onError?: (message: string) => void;
+		/** Host-owned browser navigation effect shared by both sign-in methods. */
+		navigate?: AuthNavigate;
+		/** Optional error to render in a destructive alert above the OAuth list. */
+		error?: string | null;
+	};
+
+	let props: Props = $props();
+
+	const providers = $derived<AuthProviderConfig[]>(props.providers ?? []);
+	const titleValue = $derived(props.title ?? 'Sign in');
+	const descriptionValue = $derived(props.description ?? 'Choose how you want to sign in.');
+</script>
+
+<section class="auth-signin-hub flex flex-col gap-6">
+	<header class="flex flex-col gap-1.5">
+		<h1 class="text-2xl font-semibold tracking-tight">{titleValue}</h1>
+		<p class="text-muted-foreground text-sm">{descriptionValue}</p>
+	</header>
+
+	{#if props.error}
+		<Alert variant="destructive">
+			<AlertTitle>Sign in error</AlertTitle>
+			<AlertDescription>{props.error}</AlertDescription>
+		</Alert>
+	{/if}
+
+	{#if providers.length > 0}
+		<OAuthMethodPicker
+			{providers}
+			redirectTo={props.redirectTo}
+			client={props.client}
+			navigate={props.navigate}
+		/>
+
+		<div class="relative my-1 flex items-center" aria-hidden="true">
+			<span class="flex-1 border-t"></span>
+			<span class="mx-3 text-xs uppercase text-muted-foreground">or</span>
+			<span class="flex-1 border-t"></span>
+		</div>
+	{/if}
+
+	<SignInForm
+		title=""
+		description=""
+		providers={[]}
+		redirectTo={props.redirectTo}
+		client={props.client}
+		notice={props.notice}
+		forgotPasswordHref={props.forgotPasswordHref}
+		clientContext={props.clientContext}
+		sessionWarmupPath={props.sessionWarmupPath}
+		defaultRememberMe={props.defaultRememberMe}
+		onSuccess={props.onSuccess}
+		onError={props.onError}
+		navigate={props.navigate}
+	/>
+
+	{#if props.signUpHref}
+		<p class="text-muted-foreground text-center text-xs">
+			Don't have an account?
+			<Button variant="link" href={props.signUpHref} class="h-auto p-0">Create one</Button>
+		</p>
+	{/if}
+</section>

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

@@ -0,0 +1,38 @@
+import type { AuthApiClient, AuthProviderConfig, AuthSession } from '@vibesdotdev/auth/api';
+import type { AuthNavigate } from '../navigation-effect.ts';
+import type { SignInNotice } from '../types';
+/**
+ * Hub-style sign-in surface combining OAuth providers + email/password.
+ *
+ * Mirrors auth-web's `/` route layout: OAuth provider list on top, divider,
+ * email/password form below. Phone and wallet auth are intentionally OUT of
+ * scope here — those have substantial server-side dependencies that haven't
+ * been ported to the package yet.
+ *
+ * The canonical `AuthApiClient` is resolved by the inner `SignInForm` /
+ * `OAuthMethodPicker` via `getVibesClient('auth', runtime)`. Tests can inject one
+ * stub via the `client` prop; it threads through to both children.
+ */
+type Props = {
+    providers: AuthProviderConfig[];
+    redirectTo?: string;
+    client?: AuthApiClient;
+    title?: string;
+    description?: string;
+    notice?: SignInNotice | null;
+    forgotPasswordHref?: string;
+    signUpHref?: string;
+    clientContext?: string | null;
+    sessionWarmupPath?: string | null;
+    defaultRememberMe?: boolean;
+    onSuccess?: (session: AuthSession) => void;
+    onError?: (message: string) => void;
+    /** Host-owned browser navigation effect shared by both sign-in methods. */
+    navigate?: AuthNavigate;
+    /** Optional error to render in a destructive alert above the OAuth list. */
+    error?: string | null;
+};
+declare const SignInHub: import("svelte").Component<Props, {}, "">;
+type SignInHub = ReturnType<typeof SignInHub>;
+export default SignInHub;
+//# sourceMappingURL=SignInHub.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignInHub.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SignInHub.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,MAAM,uBAAuB,CAAC;AAGhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG5C;;;;;;;;;;;GAWG;AACH,KAAK,KAAK,GAAG;IACZ,SAAS,EAAE,kBAAkB,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAqDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/SignOutButton.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import type { AuthApiClient } from '@vibesdotdev/auth/api';
+	import { failureMessage } from '@vibesdotdev/auth/api';
+	import { attempt, failureLabel, failureStatus } from '../outcome.js';
+	
+	import { navigateAuth, type AuthNavigate } from '../navigation-effect.js';
+
+	type Props = {
+		redirectTo?: string;
+		/**
+		 * Override the resolved client. Tests inject a stub here; production
+		 * callers leave this unset.
+		 */
+		client?: AuthApiClient;
+		variant?: 'default' | 'outline' | 'ghost' | 'destructive';
+		size?: 'sm' | 'default' | 'lg';
+		label?: string;
+		icon?: string;
+		class?: string;
+		onSignedOut?: () => void;
+		onError?: (message: string) => void;
+		/** 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 variantValue = $derived(props.variant ?? 'ghost');
+	const sizeValue = $derived(props.size ?? 'default');
+	const labelValue = $derived(props.label ?? 'Sign out');
+	const iconValue = $derived(props.icon ?? 'lucide:log-out');
+	const classValue = $derived(props.class ?? '');
+
+	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;
+	}
+
+	let busy = $state(false);
+	const logger = () => loadAuthComponentLogger('auth.signout', runtimeStore);
+
+	async function handleClick() {
+		if (busy) return;
+		busy = true;
+		(await logger()).info('Sign-out requested');
+		const signedOut = await attempt(async () => {
+			const client = await resolveClient();
+			await client.signOut();
+			(await logger()).info('Sign-out succeeded');
+			props.onSignedOut?.();
+			if (props.redirectTo) navigateAuth(props.navigate, props.redirectTo);
+		});
+		if (!signedOut.ok) {
+			(await logger()).warn('Sign-out failed', {
+				failure: failureLabel(signedOut.failure),
+				status: failureStatus(signedOut.failure)
+			});
+			props.onError?.(failureMessage(signedOut.failure, 'Sign-out failed'));
+		}
+		busy = false;
+	}
+</script>
+
+<Button
+	variant={variantValue}
+	size={sizeValue}
+	class={classValue}
+	onclick={handleClick}
+	disabled={busy}
+>
+	<Icon icon={iconValue} class="mr-1 h-4 w-4" />
+	{busy ? 'Signing out…' : labelValue}
+</Button>

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

@@ -0,0 +1,23 @@
+import type { AuthApiClient } from '@vibesdotdev/auth/api';
+import { type AuthNavigate } from '../navigation-effect.ts';
+type Props = {
+    redirectTo?: string;
+    /**
+     * Override the resolved client. Tests inject a stub here; production
+     * callers leave this unset.
+     */
+    client?: AuthApiClient;
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive';
+    size?: 'sm' | 'default' | 'lg';
+    label?: string;
+    icon?: string;
+    class?: string;
+    onSignedOut?: () => void;
+    onError?: (message: string) => void;
+    /** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+    navigate?: AuthNavigate;
+};
+declare const SignOutButton: import("svelte").Component<Props, {}, "">;
+type SignOutButton = ReturnType<typeof SignOutButton>;
+export default SignOutButton;
+//# sourceMappingURL=SignOutButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignOutButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SignOutButton.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE,KAAK,KAAK,GAAG;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAgEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}