@mrgnw/anahtar 0.0.19 → 0.0.21

package/dist/components/AuthPill.svelte

@@ -22,6 +22,7 @@ interface Props {
 	onSignOut?: () => void | Promise<void>;
 	onPasskeysChange?: () => void | Promise<void>;
 	getPasskeys?: () => Promise<PasskeyInfo[]>;
+	onStepChange?: (step: 'email' | 'otp' | 'authenticated') => void;
 }
 
 let {
@@ -34,6 +35,7 @@ let {
 	onSignOut,
 	onPasskeysChange,
 	getPasskeys,
+	onStepChange,
 }: Props = $props();
 
 let expanded = $state(false);
@@ -47,6 +49,7 @@ let otpStep = $state(false);
 let otpDigits = $state<string[]>(['', '', '', '', '']);
 let otpInputs = $state<HTMLInputElement[]>([]);
 let showPasskeys = $state(false);
+let pendingSuccess = $state(false);
 let isTouch = $state(false);
 let hoveredKey = $state<string | null>(null);
 let passkeyRefresh = $state(0);
@@ -75,9 +78,11 @@ async function handleSignOut() {
 	email = '';
 	otpStep = false;
 	passkeyOnboarding = false;
+	pendingSuccess = false;
 	showPasskeys = false;
 	expanded = false;
 	error = '';
+	onStepChange?.('email');
 	await onSignOut?.();
 }
 
@@ -158,6 +163,7 @@ async function handleEmailSubmit(e: SubmitEvent) {
 		const data = ((await res.json().catch(() => ({}))) as any);
 		otpDigits = ['', '', '', '', ''];
 		otpStep = true;
+		onStepChange?.('otp');
 		if (data?.devCode) {
 			const code = String(data.devCode);
 			for (let i = 0; i < 5; i++) otpDigits[i] = code[i] ?? '';
@@ -217,10 +223,13 @@ async function verifyOtp(code: string) {
 			return;
 		}
 		const data = ((await res.json().catch(() => ({}))) as any);
-		await onSuccess?.();
 		otpStep = false;
 		if (!data.hasPasskey && !data.skipPasskeyPrompt) {
+			pendingSuccess = true;
 			passkeyOnboarding = true;
+		} else {
+			await onSuccess?.();
+			onStepChange?.('authenticated');
 		}
 	} catch {
 		error = m.errorGeneric;
@@ -261,11 +270,21 @@ async function handlePasskeyRegister() {
 	passkeyOnboarding = false;
 	passkeyRefresh++;
 	await onPasskeysChange?.();
+	if (pendingSuccess) {
+		pendingSuccess = false;
+		await onSuccess?.();
+		onStepChange?.('authenticated');
+	}
 }
 
-function handlePasskeySkip() {
+async function handlePasskeySkip() {
 	fetch(`${apiBase}/skip-passkey`, { method: 'POST' });
 	passkeyOnboarding = false;
+	if (pendingSuccess) {
+		pendingSuccess = false;
+		await onSuccess?.();
+		onStepChange?.('authenticated');
+	}
 }
 
 async function addPasskey() {
@@ -385,9 +404,15 @@ async function removePasskey(id: string) {
 					autocomplete="username webauthn"
 					disabled={loading}
 				/>
-				<button type="submit" class="anahtar-pill-go" disabled={loading || !email.includes('@')}>
-					{loading ? '...' : m.continue}
-				</button>
+			<button type="submit" class="anahtar-pill-go" disabled={loading || !email.includes('@')}>
+				{#if loading}
+					...
+				{:else}
+					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
+					</svg>
+				{/if}
+			</button>
 			</form>
 		{/if}
 	</div>
@@ -396,7 +421,7 @@ async function removePasskey(id: string) {
 		<div class="anahtar-pill-otp-help" transition:slide={{ duration: 150 }}>
 			<span class="anahtar-pill-otp-help-text">{m.codeSentTo}</span>
 			<span class="anahtar-pill-otp-help-sep">&middot;</span>
-			<button class="anahtar-pill-otp-help-link" onclick={() => { otpStep = false; error = ''; }}>{m.differentEmail}</button>
+			<button class="anahtar-pill-otp-help-link" onclick={() => { otpStep = false; error = ''; onStepChange?.('email'); }}>{m.differentEmail}</button>
 			<span class="anahtar-pill-otp-help-sep">&middot;</span>
 			<button class="anahtar-pill-otp-help-link" onclick={resend} disabled={loading}>{m.resend}</button>
 		</div>
@@ -406,7 +431,7 @@ async function removePasskey(id: string) {
 		<p class="anahtar-pill-error" transition:slide={{ duration: 150 }}>{error}</p>
 	{/if}
 
-	{#if passkeyOnboarding && isAuthenticated}
+	{#if passkeyOnboarding}
 		<div class="anahtar-pill-onboarding" transition:slide={{ duration: 200 }}>
 			<PasskeyPrompt {m} onRegister={handlePasskeyRegister} onSkip={handlePasskeySkip} />
 		</div>
@@ -475,6 +500,7 @@ async function removePasskey(id: string) {
 		white-space: nowrap;
 		height: 2.25rem;
 		box-sizing: border-box;
+		overflow: hidden;
 	}
 
 	.anahtar-pill-sep {
@@ -515,6 +541,9 @@ async function removePasskey(id: string) {
 		display: flex;
 		align-items: center;
 		gap: 0.375rem;
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
 	}
 
 	.anahtar-pill-email-input {
@@ -523,7 +552,8 @@ async function removePasskey(id: string) {
 		outline: none;
 		font-size: 0.875rem;
 		color: var(--anahtar-pill-fg, #111827);
-		width: 190px;
+		flex: 1;
+		min-width: 0;
 		padding: 0.125rem 0;
 	}
 	.anahtar-pill-email-input::placeholder { color: var(--anahtar-pill-placeholder, #9ca3af); }
@@ -533,12 +563,14 @@ async function removePasskey(id: string) {
 		color: var(--anahtar-primary-fg, #fff);
 		border: none;
 		border-radius: 9999px;
-		padding: 0.25rem 0.75rem;
-		font-size: 0.8125rem;
-		font-weight: 500;
+		padding: 0.3rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
 		cursor: pointer;
 		transition: opacity 0.15s;
-		white-space: nowrap;
+		line-height: 1;
 	}
 	.anahtar-pill-go:disabled { opacity: 0.4; cursor: not-allowed; }
 	.anahtar-pill-go:hover:not(:disabled) { opacity: 0.85; }

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

@@ -17,6 +17,7 @@ interface Props {
     onSignOut?: () => void | Promise<void>;
     onPasskeysChange?: () => void | Promise<void>;
     getPasskeys?: () => Promise<PasskeyInfo[]>;
+    onStepChange?: (step: 'email' | 'otp' | 'authenticated') => void;
 }
 declare const AuthPill: import("svelte").Component<Props, {}, "">;
 type AuthPill = ReturnType<typeof AuthPill>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrgnw/anahtar",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Opinionated, reusable auth for SvelteKit. Email+OTP + passkeys.",
   "license": "MIT",
   "type": "module",