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

package/dist/svelte/components/phone-auth/PhoneInput.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	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 { cn } from '@vibesdotdev/kit/utils';
+	import type { PhoneInput as PhoneInputData } from '@vibesdotdev/auth/schemas/flows/phone';
+	import type { PhoneInputProps } from './schemas';
+
+	let {
+		phoneNumber = '',
+		isLoading = false,
+		error = null,
+		placeholder = 'Enter phone number (e.g., +1234567890)',
+		disabled = false,
+		onsubmit,
+		oninput
+	}: PhoneInputProps = $props();
+
+	let inputValue = $state('');
+	let lastPhoneNumber = $state<string | null>(null);
+	let submittedPhoneNumber = $state<string | null>(null);
+	let loadingRoundTripStarted = $state(false);
+	const instanceId = $props.id();
+	const inputId = `${instanceId}-phone-input`;
+	const errorId = `${instanceId}-phone-error`;
+
+	$effect(() => {
+		if (phoneNumber === lastPhoneNumber) return;
+		const inputChangedExternally = inputValue !== phoneNumber;
+		inputValue = phoneNumber;
+		lastPhoneNumber = phoneNumber;
+		if (inputChangedExternally) {
+			submittedPhoneNumber = null;
+		}
+	});
+
+	$effect(() => {
+		if (isLoading) {
+			loadingRoundTripStarted = true;
+			return;
+		}
+
+		if (loadingRoundTripStarted) {
+			submittedPhoneNumber = null;
+			loadingRoundTripStarted = false;
+		}
+	});
+
+	function handleInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		inputValue = event.currentTarget.value;
+		submittedPhoneNumber = null;
+		oninput?.(inputValue);
+	}
+
+	function handleSubmit(event: Event) {
+		event.preventDefault();
+
+		if (!inputValue.trim() || isLoading || disabled || !onsubmit) {
+			return;
+		}
+
+		let normalized = inputValue.trim();
+
+		if (normalized && !normalized.startsWith('+')) {
+			normalized = `+${normalized.replace(/\D/g, '')}`;
+		}
+
+		if (submittedPhoneNumber === normalized) {
+			return;
+		}
+
+		submittedPhoneNumber = normalized;
+		onsubmit({
+			phoneNumber: normalized
+		});
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="space-y-4">
+	<div class="space-y-2">
+		<Label for={inputId}>Phone Number</Label>
+		<div class="relative">
+			<Input
+				id={inputId}
+				type="tel"
+				value={inputValue}
+				oninput={handleInput}
+				{placeholder}
+				{disabled}
+				class={cn(error && 'border-destructive')}
+				autocomplete="tel"
+				inputmode="tel"
+				aria-describedby={error ? errorId : undefined}
+				aria-invalid={error ? 'true' : undefined}
+				required
+			/>
+			{#if isLoading}
+				<div class="absolute inset-y-0 right-0 flex items-center pr-3">
+					<div
+						class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"
+					></div>
+				</div>
+			{/if}
+		</div>
+		{#if error}
+			<p id={errorId} class="text-destructive text-sm" role="alert">
+				{error}
+			</p>
+		{/if}
+		<p class="text-muted-foreground text-xs">
+			Enter your phone number in international format (e.g., +1234567890)
+		</p>
+	</div>
+
+	<Button
+		type="submit"
+		variant="default"
+		size="lg"
+		class="w-full"
+		disabled={!inputValue.trim() || isLoading || disabled || submittedPhoneNumber !== null}
+	>
+		{#if isLoading}
+			<div class="flex items-center gap-2">
+				<div
+					class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
+				></div>
+				<span>Sending...</span>
+			</div>
+		{:else}
+			Send Verification Code
+		{/if}
+	</Button>
+</form>
+
+<style lang="postcss">
+	@media (max-width: 640px) {
+		:global(input[type='tel']) {
+			font-size: 16px;
+		}
+	}
+</style>

package/dist/svelte/components/phone-auth/PhoneInput.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { PhoneInputProps } from './schemas';
+declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;
+//# sourceMappingURL=PhoneInput.svelte.d.ts.map

package/dist/svelte/components/phone-auth/PhoneInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/phone-auth/PhoneInput.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAmHjD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/phone-auth/PhoneMagicLinkFlow.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	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 * as Alert from '@vibesdotdev/kit/components/ui/alert';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { PhoneMagicLinkFlowProps } from './schemas';
+
+	// Callback-driven per D-045: the package renders the magic-link UI and emits
+	// `onSend`; the APP owns validation (isValidPhoneNumber), the service call
+	// (sendMagicLink), redirect routing, and the `isLoading`/`error`/`linkSent`
+	// state it feeds back. The package NEVER imports `$lib`/`$app`/`*-system`.
+	let {
+		showTitle = true,
+		isLoading = false,
+		error = null,
+		linkSent = false,
+		sentToLabel,
+		expiryMessage,
+		onSend,
+		onStartOver
+	}: PhoneMagicLinkFlowProps = $props();
+
+	let phoneNumber = $state('');
+	let submittedPhoneNumber = $state<string | null>(null);
+	let loadingRoundTripStarted = $state(false);
+	let lastLinkSent = $state<boolean | null>(null);
+	const instanceId = $props.id();
+	const inputId = `${instanceId}-phone-number`;
+
+	$effect(() => {
+		if (linkSent !== lastLinkSent) {
+			submittedPhoneNumber = null;
+			lastLinkSent = linkSent;
+		}
+
+		if (isLoading) {
+			loadingRoundTripStarted = true;
+		} else if (loadingRoundTripStarted) {
+			submittedPhoneNumber = null;
+			loadingRoundTripStarted = false;
+		}
+	});
+
+	function handleInput() {
+		submittedPhoneNumber = null;
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		const normalizedPhoneNumber = phoneNumber.trim();
+		if (
+			isLoading ||
+			!normalizedPhoneNumber ||
+			submittedPhoneNumber === normalizedPhoneNumber ||
+			!onSend
+		) {
+			return;
+		}
+
+		submittedPhoneNumber = normalizedPhoneNumber;
+		onSend(normalizedPhoneNumber);
+	}
+
+	function handleStartOver() {
+		phoneNumber = '';
+		submittedPhoneNumber = null;
+		onStartOver?.();
+	}
+</script>
+
+<div class="mx-auto max-w-md">
+	{#if showTitle && !linkSent}
+		<div class="mb-6 text-center">
+			<h2 class="text-2xl font-bold text-foreground">Sign in with your phone</h2>
+			<p class="mt-2 text-sm text-muted-foreground">
+				We'll send you a magic link to sign in instantly
+			</p>
+		</div>
+	{/if}
+
+	{#if linkSent}
+		<!-- Success state -->
+		<div class="space-y-4 text-center">
+			<div
+				class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
+			>
+				<Icon icon="lucide:check" class="h-6 w-6 text-green-600 dark:text-green-400" />
+			</div>
+
+			<div>
+				<h3 class="text-lg font-semibold text-foreground">Check your messages</h3>
+				<p class="mt-1 text-sm text-muted-foreground">We've sent a magic link to</p>
+				<p class="font-medium text-foreground">{sentToLabel ?? phoneNumber}</p>
+			</div>
+
+			<div
+				class="rounded-lg border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20 p-4"
+			>
+				<p class="text-sm text-blue-800 dark:text-blue-200">
+					<strong>Next steps:</strong>
+				</p>
+				<ol class="mt-2 space-y-1 text-sm text-blue-700 dark:text-blue-300">
+					<li>1. Check your text messages</li>
+					<li>2. Tap the magic link</li>
+					<li>3. You'll be signed in automatically</li>
+				</ol>
+			</div>
+
+			{#if expiryMessage}
+				<div class="text-xs text-muted-foreground">{expiryMessage}</div>
+			{/if}
+
+			<Button
+				variant="ghost"
+				size="sm"
+				onclick={handleStartOver}
+				class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+			>
+				Use a different number
+			</Button>
+		</div>
+	{:else}
+		<!-- Input form -->
+		<form onsubmit={handleSubmit} class="space-y-4">
+			<div>
+				<Label for={inputId}>Phone number</Label>
+				<div class="relative mt-1">
+					<Input
+						id={inputId}
+						type="tel"
+						placeholder="+1234567890"
+						bind:value={phoneNumber}
+						oninput={handleInput}
+						disabled={isLoading}
+						class="pl-10"
+						required
+					/>
+					<Icon
+						icon="lucide:phone"
+						class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
+					/>
+				</div>
+				<p class="mt-1 text-xs text-muted-foreground">Include country code (e.g., +1 for US)</p>
+			</div>
+
+			{#if error}
+				<Alert.Root variant="destructive">
+					<Alert.Description>{error}</Alert.Description>
+				</Alert.Root>
+			{/if}
+
+			<Button
+				type="submit"
+				class="w-full"
+				disabled={isLoading || !phoneNumber.trim() || submittedPhoneNumber !== null}
+				size="lg"
+			>
+				{#if isLoading}
+					<div
+						class="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
+					></div>
+					Sending magic link...
+				{:else}
+					Send magic link
+					<Icon icon="lucide:arrow-right" class="ml-2 h-4 w-4" />
+				{/if}
+			</Button>
+		</form>
+	{/if}
+</div>

package/dist/svelte/components/phone-auth/PhoneMagicLinkFlow.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { PhoneMagicLinkFlowProps } from './schemas';
+declare const PhoneMagicLinkFlow: import("svelte").Component<PhoneMagicLinkFlowProps, {}, "">;
+type PhoneMagicLinkFlow = ReturnType<typeof PhoneMagicLinkFlow>;
+export default PhoneMagicLinkFlow;
+//# sourceMappingURL=PhoneMagicLinkFlow.svelte.d.ts.map

package/dist/svelte/components/phone-auth/PhoneMagicLinkFlow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneMagicLinkFlow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/phone-auth/PhoneMagicLinkFlow.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAkJzD,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/phone-auth/schemas/index.d.ts

@@ -0,0 +1,60 @@
+import type { PhoneAuthState, PhoneInput as PhoneInputData, OtpVerification } from '@vibesdotdev/auth/schemas/flows/phone';
+export interface PhoneNumberPayload {
+    phoneNumber: string;
+}
+export interface PhoneAuthFlowProps {
+    state: PhoneAuthState;
+    disabled?: boolean;
+    onphoneSubmit?: (data: PhoneInputData) => void;
+    onotpVerify?: (data: OtpVerification) => void;
+    onresendOtp?: (data: PhoneNumberPayload) => void;
+    onback?: () => void;
+    onsuccess?: (data: PhoneNumberPayload) => void;
+    onphoneInput?: (value: string) => void;
+}
+export interface PhoneMagicLinkFlowProps {
+    /** Show the "Sign in with your phone" heading above the form. */
+    showTitle?: boolean;
+    /** App-driven: submission in flight (disables input + shows spinner). */
+    isLoading?: boolean;
+    /** App-driven: error to surface (validation/service failure). */
+    error?: string | null;
+    /** App-driven: magic link was sent → render the success/next-steps state. */
+    linkSent?: boolean;
+    /** Display label for the number the link was sent to (e.g. formatted). */
+    sentToLabel?: string;
+    /** App-owned expiry copy. Omit when the service does not expose a reliable TTL. */
+    expiryMessage?: string;
+    /** Emitted on submit with the raw entered number; the app validates + sends. */
+    onSend?: (phoneNumber: string) => void;
+    /** Emitted when the user chooses "Use a different number". */
+    onStartOver?: () => void;
+}
+export interface PhoneInputProps {
+    phoneNumber?: string;
+    isLoading?: boolean;
+    error?: string | null;
+    placeholder?: string;
+    disabled?: boolean;
+    onsubmit?: (data: PhoneInputData) => void;
+    oninput?: (value: string) => void;
+}
+export interface OtpInputProps {
+    phoneNumber: string;
+    isLoading?: boolean;
+    error?: string | null;
+    disabled?: boolean;
+    attemptsRemaining?: number;
+    canResend?: boolean;
+    resendCooldown?: number;
+    onverify?: (data: OtpVerification) => void;
+    onresend?: (data: PhoneNumberPayload) => void;
+    onback?: () => void;
+}
+export interface OtpCodeFieldsProps {
+    error?: string | null;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/components/phone-auth/schemas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/components/phone-auth/schemas/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,cAAc,EACd,UAAU,IAAI,cAAc,EAC5B,eAAe,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IAClC,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,uBAAuB;IACvC,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}

package/dist/svelte/components/phone-auth/schemas/index.js

@@ -0,0 +1 @@
+export {};

package/dist/svelte/index.d.ts

@@ -0,0 +1,79 @@
+export { default as BrowserSessionBridge } from './components/BrowserSessionBridge.svelte';
+/**
+ * @vibesdotdev/auth/svelte
+ *
+ * Svelte components that wrap the better-auth client surface:
+ *  - `<SignInForm />` — email/password (remember-me, show/hide, banners, forgot link) + per-provider OAuth buttons
+ *  - `<SignUpForm />` — email/password with confirm + strength meter + multi-policy capture
+ *  - `<SignInHub />` — composite: OAuth picker + email form, mirroring auth-web's `/` route
+ *  - `<OAuthMethodPicker />` — provider buttons with "last used" indicator
+ *  - `<PasswordStrengthMeter />` — UX-only strength bar for any password input
+ *  - `<SignOutButton />` — POST /api/auth/sign-out then redirect
+ *  - `<AuthSessionsPanel />` — active-session review + revoke UI
+ *  - `<AuthConnectedAccountsPanel />` — Better Auth sign-in account linking
+ *  - `<DeviceAuthorizationPanel />` — runtime-projected native device sign-in
+ *  - `<SessionWatcher />` — non-visual; refreshes the session store on an interval
+ *  - `<RequireAuth>` — render guard; redirects to a sign-in URL when unauthed
+ *
+ * Backed by the auth-web `/api/auth/*` endpoints. NEVER logs tokens or passwords.
+ */
+export { default as SignInForm } from './components/SignInForm.svelte';
+export { default as SignUpForm } from './components/SignUpForm.svelte';
+export { default as SignInHub } from './components/SignInHub.svelte';
+export { default as OAuthMethodPicker } from './components/OAuthMethodPicker.svelte';
+export { default as PasswordStrengthMeter } from './components/PasswordStrengthMeter.svelte';
+export { default as AuthSessionsPanel } from './components/AuthSessionsPanel.svelte';
+export { default as AuthConnectedAccountsPanel } from './components/AuthConnectedAccountsPanel.svelte';
+export { default as DeviceAuthorizationPanel } from './components/DeviceAuthorizationPanel.svelte';
+export { default as SignOutButton } from './components/SignOutButton.svelte';
+export { default as SessionWatcher } from './components/SessionWatcher.svelte';
+export { default as RequireAuth } from './components/RequireAuth.svelte';
+export { navigateAuth, type AuthNavigate } from './navigation-effect.ts';
+/**
+ * Phone-auth presentational surface (C-SVELTE-5B Phase 1) — pure UI, callback-driven.
+ * The app owns the service/store wiring (phoneAuthService, authStore) and passes
+ * `state` + `on*` callbacks; the package NEVER imports `$app`/`$lib`/`*-system`.
+ *  - `<PhoneInput />` — phone entry + raw submit intent; the app validates E.164
+ *  - `<OtpInput />` — OTP entry with resend/back, composes `<OtpCodeFields />`
+ *  - `<OtpCodeFields />` — segmented one-time-code inputs
+ *  - `<PhoneAuthFlow />` — phone→OTP flow shell driven by injected `state` + callbacks
+ */
+export { default as PhoneInput } from './components/phone-auth/PhoneInput.svelte';
+export { default as OtpInput } from './components/phone-auth/OtpInput.svelte';
+export { default as OtpCodeFields } from './components/phone-auth/OtpCodeFields.svelte';
+export { default as PhoneAuthFlow } from './components/phone-auth/PhoneAuthFlow.svelte';
+export { default as PhoneMagicLinkFlow } from './components/phone-auth/PhoneMagicLinkFlow.svelte';
+export type { PhoneAuthFlowProps, PhoneMagicLinkFlowProps, PhoneInputProps, OtpInputProps, OtpCodeFieldsProps, PhoneNumberPayload } from './components/phone-auth/schemas/index.ts';
+/**
+ * MFA-setup step components (C-SVELTE-5B Phase 2a) — presentational, callback-driven.
+ * The app owns the setup orchestration (mfaStore state machine + mfaService); its
+ * `MfaSetup` composes these steps and wires the service/store. Package NEVER imports
+ * `$app`/`$lib`/`*-system`. Prefixed `Mfa*` to disambiguate the generic step names.
+ */
+export { default as MfaPasswordStep } from './components/mfa-setup/PasswordStep.svelte';
+export { default as MfaQrCodeStep } from './components/mfa-setup/QrCodeStep.svelte';
+export { default as MfaVerifyStep } from './components/mfa-setup/VerifyStep.svelte';
+export { default as MfaRecoveryCodesStep } from './components/mfa-setup/RecoveryCodesStep.svelte';
+export { default as MfaCompleteStep } from './components/mfa-setup/CompleteStep.svelte';
+export type { PasswordStepProps, QrCodeStepProps, VerifyStepProps, RecoveryCodesStepProps, CompleteStepProps } from './components/mfa-setup/schemas/index.ts';
+/**
+ * Auth client surface is owned by `@vibesdotdev/auth/api` — the canonical
+ * `runtime/client` for `id: 'auth'`. Consumers (apps, ad-hoc code) resolve
+ * instances via `getVibesClient<AuthApiClient>('auth', runtime)` from
+ * `@vibesdotdev/kernel/client`. The browser HTTP factory that used to live
+ * in `./runtime.ts` has been retracted per
+ * docs/architecture/FEATURE-API-CLIENT-RUNTIME-KIND.md.
+ */
+export { AuthClientError, AuthNotSignedInError, type AuthApiClient, type AuthApiRequestOptions, type AuthConnectedAccount, type AuthLinkSocialInput, type AuthLinkSocialResult, type AuthProviderId, type AuthProviderConfig, type AuthSession, type AuthSessionUser, type AuthUserSession, type AuthUnlinkAccountResult, type EmailPasswordCredentials, type AuthSignUpCredentials } from '@vibesdotdev/auth/api';
+export type { AuthDeviceSessionCapability, AuthDeviceSessionSnapshot, AuthDeviceSessionUser } from '@vibesdotdev/auth/device-session';
+export { findSessionToken, formatAuthSessionLastActive, getAuthSessionBrowserName, getAuthSessionDeviceIcon, splitAuthSessions } from './sessions.ts';
+export type { AuthSessionGroups, AuthSessionView } from './sessions.ts';
+export { evaluatePassword, getPasswordScore, getPasswordStrengthClass, getPasswordStrengthLabel } from './password.ts';
+export type { PasswordStrength, PasswordStrengthClass, PasswordStrengthResult } from './password.ts';
+export { clearLastAuthMethod, getLastAuthMethod, mapProviderIdToAuthMethod, setLastAuthMethod } from './auth-method.ts';
+export type { AuthMethod } from './auth-method.ts';
+export type { SignInNotice, SignInNoticeKind, PolicyDefinition, PolicyAcceptance, SignUpSuccessDetail } from './types.ts';
+export { authState } from './state.svelte.ts';
+export { authSveltePlugin } from './auth-svelte.plugin.ts';
+export { getAuthErrorMessage } from '../features/core/shared/auth-errors.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"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"}

package/dist/svelte/index.js

@@ -0,0 +1,71 @@
+export { default as BrowserSessionBridge } from './components/BrowserSessionBridge.svelte';
+/**
+ * @vibesdotdev/auth/svelte
+ *
+ * Svelte components that wrap the better-auth client surface:
+ *  - `<SignInForm />` — email/password (remember-me, show/hide, banners, forgot link) + per-provider OAuth buttons
+ *  - `<SignUpForm />` — email/password with confirm + strength meter + multi-policy capture
+ *  - `<SignInHub />` — composite: OAuth picker + email form, mirroring auth-web's `/` route
+ *  - `<OAuthMethodPicker />` — provider buttons with "last used" indicator
+ *  - `<PasswordStrengthMeter />` — UX-only strength bar for any password input
+ *  - `<SignOutButton />` — POST /api/auth/sign-out then redirect
+ *  - `<AuthSessionsPanel />` — active-session review + revoke UI
+ *  - `<AuthConnectedAccountsPanel />` — Better Auth sign-in account linking
+ *  - `<DeviceAuthorizationPanel />` — runtime-projected native device sign-in
+ *  - `<SessionWatcher />` — non-visual; refreshes the session store on an interval
+ *  - `<RequireAuth>` — render guard; redirects to a sign-in URL when unauthed
+ *
+ * Backed by the auth-web `/api/auth/*` endpoints. NEVER logs tokens or passwords.
+ */
+export { default as SignInForm } from './components/SignInForm.svelte';
+export { default as SignUpForm } from './components/SignUpForm.svelte';
+export { default as SignInHub } from './components/SignInHub.svelte';
+export { default as OAuthMethodPicker } from './components/OAuthMethodPicker.svelte';
+export { default as PasswordStrengthMeter } from './components/PasswordStrengthMeter.svelte';
+export { default as AuthSessionsPanel } from './components/AuthSessionsPanel.svelte';
+export { default as AuthConnectedAccountsPanel } from './components/AuthConnectedAccountsPanel.svelte';
+export { default as DeviceAuthorizationPanel } from './components/DeviceAuthorizationPanel.svelte';
+export { default as SignOutButton } from './components/SignOutButton.svelte';
+export { default as SessionWatcher } from './components/SessionWatcher.svelte';
+export { default as RequireAuth } from './components/RequireAuth.svelte';
+export { navigateAuth } from "./navigation-effect.js";
+/**
+ * Phone-auth presentational surface (C-SVELTE-5B Phase 1) — pure UI, callback-driven.
+ * The app owns the service/store wiring (phoneAuthService, authStore) and passes
+ * `state` + `on*` callbacks; the package NEVER imports `$app`/`$lib`/`*-system`.
+ *  - `<PhoneInput />` — phone entry + raw submit intent; the app validates E.164
+ *  - `<OtpInput />` — OTP entry with resend/back, composes `<OtpCodeFields />`
+ *  - `<OtpCodeFields />` — segmented one-time-code inputs
+ *  - `<PhoneAuthFlow />` — phone→OTP flow shell driven by injected `state` + callbacks
+ */
+export { default as PhoneInput } from './components/phone-auth/PhoneInput.svelte';
+export { default as OtpInput } from './components/phone-auth/OtpInput.svelte';
+export { default as OtpCodeFields } from './components/phone-auth/OtpCodeFields.svelte';
+export { default as PhoneAuthFlow } from './components/phone-auth/PhoneAuthFlow.svelte';
+export { default as PhoneMagicLinkFlow } from './components/phone-auth/PhoneMagicLinkFlow.svelte';
+/**
+ * MFA-setup step components (C-SVELTE-5B Phase 2a) — presentational, callback-driven.
+ * The app owns the setup orchestration (mfaStore state machine + mfaService); its
+ * `MfaSetup` composes these steps and wires the service/store. Package NEVER imports
+ * `$app`/`$lib`/`*-system`. Prefixed `Mfa*` to disambiguate the generic step names.
+ */
+export { default as MfaPasswordStep } from './components/mfa-setup/PasswordStep.svelte';
+export { default as MfaQrCodeStep } from './components/mfa-setup/QrCodeStep.svelte';
+export { default as MfaVerifyStep } from './components/mfa-setup/VerifyStep.svelte';
+export { default as MfaRecoveryCodesStep } from './components/mfa-setup/RecoveryCodesStep.svelte';
+export { default as MfaCompleteStep } from './components/mfa-setup/CompleteStep.svelte';
+/**
+ * Auth client surface is owned by `@vibesdotdev/auth/api` — the canonical
+ * `runtime/client` for `id: 'auth'`. Consumers (apps, ad-hoc code) resolve
+ * instances via `getVibesClient<AuthApiClient>('auth', runtime)` from
+ * `@vibesdotdev/kernel/client`. The browser HTTP factory that used to live
+ * in `./runtime.ts` has been retracted per
+ * docs/architecture/FEATURE-API-CLIENT-RUNTIME-KIND.md.
+ */
+export { AuthClientError, AuthNotSignedInError } from '@vibesdotdev/auth/api';
+export { findSessionToken, formatAuthSessionLastActive, getAuthSessionBrowserName, getAuthSessionDeviceIcon, splitAuthSessions } from "./sessions.js";
+export { evaluatePassword, getPasswordScore, getPasswordStrengthClass, getPasswordStrengthLabel } from "./password.js";
+export { clearLastAuthMethod, getLastAuthMethod, mapProviderIdToAuthMethod, setLastAuthMethod } from "./auth-method.js";
+export { authState } from "./state.svelte.js";
+export { authSveltePlugin } from "./auth-svelte.plugin.js";
+export { getAuthErrorMessage } from "../features/core/shared/auth-errors.js";

package/dist/svelte/loaders.d.ts

@@ -0,0 +1,63 @@
+/**
+ * SvelteKit `load` helpers for `@vibesdotdev/auth/svelte`.
+ *
+ * Exported under the `./loaders` subpath so SvelteKit keeps this server-only
+ * code out of the browser bundle (see SURFACE-PACKAGE-CONVENTIONS §2.5 / §2.7).
+ *
+ * Auth data lives in the sibling `apps/auth-web/src/server/` tree (better-auth
+ * session, organization context). Per §2.5.1 we DON'T reach into another
+ * runtime — the consuming app supplies the fetchers, and this loader composes
+ * the layout-shaped result. Mirrors the pattern in `account-svelte`.
+ */
+import type { RuntimeRef } from '@vibesdotdev/kernel';
+import type { AuthSession, AuthSessionUser } from '@vibesdotdev/auth/api';
+/**
+ * Trimmed user shape surfaced through the auth layout payload. Apps wiring
+ * the loader from their own `locals` typically already have most of these
+ * fields; missing ones become `null` rather than blocking the render.
+ */
+export interface AuthLayoutUser extends AuthSessionUser {
+    emailVerified?: boolean;
+}
+export interface AuthLayoutData {
+    user: AuthLayoutUser | null;
+    session: AuthSession | null;
+}
+/**
+ * Server-side fetchers the consuming app must provide. Keeping `getSession`
+ * as the canonical contract means the package never assumes a particular
+ * better-auth wiring; tests inject mocks.
+ */
+export interface AuthLayoutFetchers {
+    /** Resolve the current session from the app's server context. */
+    getSession: () => Promise<AuthSession | null>;
+}
+export interface LoadAuthLayoutDataInput {
+    runtime: RuntimeRef;
+    fetchers: AuthLayoutFetchers;
+    /** When true, propagates fetch errors instead of degrading. Default false. */
+    throwOnError?: boolean;
+}
+/**
+ * Compose the auth layout payload for a SvelteKit `+layout.server.ts`.
+ *
+ * Returns a serializable object the consuming app spreads into its own
+ * `LayoutServerLoad` return. The client-side `authState` consumes this same
+ * shape via `authState.init({ initialSession })`.
+ *
+ * Usage:
+ *
+ *   import { loadAuthLayoutData } from '@vibesdotdev/auth/svelte/loaders';
+ *
+ *   export const load: LayoutServerLoad = async ({ locals }) => {
+ *     const data = await loadAuthLayoutData({
+ *       runtime: locals.runtime,
+ *       fetchers: {
+ *         getSession: async () => locals.session ?? null
+ *       }
+ *     });
+ *     return data;
+ *   };
+ */
+export declare function loadAuthLayoutData(input: LoadAuthLayoutDataInput): Promise<AuthLayoutData>;
+//# sourceMappingURL=loaders.d.ts.map

package/dist/svelte/loaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loaders.d.ts","sourceRoot":"","sources":["../../src/svelte/loaders.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAM1E;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,eAAe;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IAClC,iEAAiE;IACjE,UAAU,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,uBAAuB;IACvC,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8EAA8E;IAC9E,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAsB,kBAAkB,CACvC,KAAK,EAAE,uBAAuB,GAC5B,OAAO,CAAC,cAAc,CAAC,CAqBzB"}