@marianmeres/stuic 3.70.0 → 3.71.0

package/AGENTS.md

@@ -23,7 +23,7 @@
 
 ```
 src/lib/
-├── components/     # 50 UI components
+├── components/     # 55 UI components
 ├── actions/        # 15 Svelte actions
 ├── utils/          # 43 utility modules
 ├── themes/         # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
@@ -116,7 +116,7 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 46 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 55 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [Actions](./docs/domains/actions.md) — 15 Svelte directives
 - [Utils](./docs/domains/utils.md) — 43 utility modules

package/README.md

@@ -148,7 +148,7 @@ AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header,
 
 ### Forms & Inputs
 
-FieldInput, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, CronInput, Fieldset, LoginForm, LoginFormModal
+FieldInput, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
 
 ### Buttons & Controls
 

package/dist/components/EmailVerifyForm/EmailVerifyForm.svelte

@@ -0,0 +1,269 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+	import type { Props as OtpInputProps } from "../OtpInput/OtpInput.svelte";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
+		/** Email address the code was sent to. Displayed in the subhead. */
+		email: string;
+
+		/** Called when the user submits a code (manually or via OtpInput auto-complete). */
+		onSubmit: (code: string) => void;
+
+		/**
+		 * Called when the user clicks "Resend code". When provided, the resend control
+		 * renders inside the form. The form owns the cooldown UI internally.
+		 */
+		onResend?: () => Promise<void> | void;
+
+		/**
+		 * Cooldown (seconds) after a successful resend, during which the resend
+		 * link is disabled and shows a countdown. Default: 30.
+		 */
+		resendCooldownSeconds?: number;
+
+		/** Disables submit button + OtpInput while submitting. */
+		isSubmitting?: boolean;
+
+		/** General error (rendered as a DismissibleMessage above the form). */
+		error?: string;
+
+		/** Optional: shown inline, e.g., "3 attempts remaining". Set to undefined to hide. */
+		attemptsRemaining?: number;
+
+		/** Code length. Default: 6. Forwarded to OtpInput. */
+		codeLength?: number;
+
+		/** Pass-through props for the inner OtpInput (spread). */
+		otpInputProps?: Omit<
+			OtpInputProps,
+			"value" | "length" | "onComplete" | "error" | "disabled"
+		>;
+
+		/** Optional notifications instance — `error()` is called when `error` is set. */
+		notifications?: NotificationsStack;
+
+		/** Footer snippet (e.g., "Wrong email? Start over"). */
+		footer?: Snippet;
+
+		/** Override CTA section. */
+		submitButton?: Snippet<[{ isSubmitting: boolean; disabled: boolean }]>;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+		class?: string;
+		el?: HTMLFormElement;
+	}
+</script>
+
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./_internal/email-verify-form-i18n-defaults.js";
+	import Button from "../Button/Button.svelte";
+	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
+	import H from "../H/H.svelte";
+	import OtpInput from "../OtpInput/OtpInput.svelte";
+
+	let {
+		email,
+		onSubmit,
+		onResend,
+		resendCooldownSeconds = 30,
+		isSubmitting = false,
+		error,
+		attemptsRemaining,
+		codeLength = 6,
+		otpInputProps,
+		notifications,
+		footer,
+		submitButton,
+		t: tProp,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+
+	let code = $state("");
+	let cooldownRemaining = $state(0);
+	let resentFlash = $state(false);
+	let isResending = $state(false);
+	let cooldownTimer: ReturnType<typeof setInterval> | null = null;
+	let resentFlashTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clearTimers() {
+		if (cooldownTimer) {
+			clearInterval(cooldownTimer);
+			cooldownTimer = null;
+		}
+		if (resentFlashTimer) {
+			clearTimeout(resentFlashTimer);
+			resentFlashTimer = null;
+		}
+	}
+
+	onDestroy(clearTimers);
+
+	function escapeHtml(s: string): string {
+		return s.replace(/[&<>"']/g, (c) =>
+			c === "&"
+				? "&amp;"
+				: c === "<"
+					? "&lt;"
+					: c === ">"
+						? "&gt;"
+						: c === '"'
+							? "&quot;"
+							: "&#39;"
+		);
+	}
+
+	let subheadingHtml = $derived(
+		t("email_verify_form.subheading", {
+			email: `<strong>${escapeHtml(email ?? "")}</strong>`,
+		})
+	);
+
+	function startCooldown() {
+		cooldownRemaining = resendCooldownSeconds;
+		if (cooldownTimer) clearInterval(cooldownTimer);
+		cooldownTimer = setInterval(() => {
+			cooldownRemaining -= 1;
+			if (cooldownRemaining <= 0) {
+				cooldownRemaining = 0;
+				if (cooldownTimer) {
+					clearInterval(cooldownTimer);
+					cooldownTimer = null;
+				}
+			}
+		}, 1000);
+	}
+
+	function flashResent() {
+		resentFlash = true;
+		if (resentFlashTimer) clearTimeout(resentFlashTimer);
+		resentFlashTimer = setTimeout(() => {
+			resentFlash = false;
+			resentFlashTimer = null;
+		}, 3000);
+	}
+
+	async function handleResendClick() {
+		if (!onResend) return;
+		if (cooldownRemaining > 0 || isResending) return;
+		isResending = true;
+		try {
+			await onResend();
+			flashResent();
+			startCooldown();
+		} finally {
+			isResending = false;
+		}
+	}
+
+	function handleFormSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (isSubmitting) return;
+		if (code.length !== codeLength) return;
+		onSubmit(code);
+	}
+
+	$effect(() => {
+		if (error && notifications) notifications.error(error);
+	});
+
+	let _class = $derived(
+		unstyled ? classProp : twMerge("stuic-email-verify-form", classProp)
+	);
+
+	let submitDisabled = $derived(code.length !== codeLength || isSubmitting);
+</script>
+
+<form bind:this={el} class={_class} onsubmit={handleFormSubmit} {...rest}>
+	<!-- Heading -->
+	<H level={2} class={unstyled ? undefined : "stuic-email-verify-form-heading"}>
+		{t("email_verify_form.heading")}
+	</H>
+
+	<!-- Subheading with bolded email -->
+	<p class={unstyled ? undefined : "stuic-email-verify-form-subheading"}>
+		<!-- email is HTML-escaped before substitution; the surrounding template is i18n-controlled -->
+		{@html subheadingHtml}
+	</p>
+
+	<!-- General error alert -->
+	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
+
+	<!-- OTP input -->
+	<div class={unstyled ? undefined : "stuic-email-verify-form-otp"}>
+		<OtpInput
+			bind:value={code}
+			length={codeLength}
+			onComplete={(c) => onSubmit(c)}
+			error={!!error}
+			disabled={isSubmitting}
+			{...otpInputProps}
+		/>
+	</div>
+
+	<!-- Attempts remaining hint -->
+	{#if attemptsRemaining != null}
+		<small class={unstyled ? undefined : "stuic-email-verify-form-attempts"}>
+			{t("email_verify_form.attempts_remaining", { count: attemptsRemaining })}
+		</small>
+	{/if}
+
+	<!-- Submit button -->
+	{#if submitButton}
+		{@render submitButton({ isSubmitting, disabled: submitDisabled })}
+	{:else}
+		<div class={unstyled ? undefined : "stuic-email-verify-form-submit"}>
+			<Button
+				intent="primary"
+				type="submit"
+				disabled={submitDisabled}
+				class="w-full"
+			>
+				{isSubmitting
+					? t("email_verify_form.submitting")
+					: t("email_verify_form.submit")}
+			</Button>
+		</div>
+	{/if}
+
+	<!-- Resend control -->
+	{#if onResend}
+		<div class={unstyled ? undefined : "stuic-email-verify-form-resend"}>
+			{#if cooldownRemaining > 0}
+				<span class={unstyled ? undefined : "stuic-email-verify-form-resend-cooldown"}>
+					{t("email_verify_form.resend_cooldown", { seconds: cooldownRemaining })}
+				</span>
+			{:else if resentFlash}
+				<span class={unstyled ? undefined : "stuic-email-verify-form-resend-flash"}>
+					{t("email_verify_form.resent")}
+				</span>
+			{:else}
+				<span>{t("email_verify_form.resend_prompt")}</span>
+				<Button
+					variant="link"
+					type="button"
+					size="sm"
+					onclick={handleResendClick}
+					disabled={isResending}
+				>
+					{t("email_verify_form.resend")}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Footer -->
+	{#if footer}
+		{@render footer()}
+	{/if}
+</form>

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

@@ -0,0 +1,47 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+import type { Props as OtpInputProps } from "../OtpInput/OtpInput.svelte";
+export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
+    /** Email address the code was sent to. Displayed in the subhead. */
+    email: string;
+    /** Called when the user submits a code (manually or via OtpInput auto-complete). */
+    onSubmit: (code: string) => void;
+    /**
+     * Called when the user clicks "Resend code". When provided, the resend control
+     * renders inside the form. The form owns the cooldown UI internally.
+     */
+    onResend?: () => Promise<void> | void;
+    /**
+     * Cooldown (seconds) after a successful resend, during which the resend
+     * link is disabled and shows a countdown. Default: 30.
+     */
+    resendCooldownSeconds?: number;
+    /** Disables submit button + OtpInput while submitting. */
+    isSubmitting?: boolean;
+    /** General error (rendered as a DismissibleMessage above the form). */
+    error?: string;
+    /** Optional: shown inline, e.g., "3 attempts remaining". Set to undefined to hide. */
+    attemptsRemaining?: number;
+    /** Code length. Default: 6. Forwarded to OtpInput. */
+    codeLength?: number;
+    /** Pass-through props for the inner OtpInput (spread). */
+    otpInputProps?: Omit<OtpInputProps, "value" | "length" | "onComplete" | "error" | "disabled">;
+    /** Optional notifications instance — `error()` is called when `error` is set. */
+    notifications?: NotificationsStack;
+    /** Footer snippet (e.g., "Wrong email? Start over"). */
+    footer?: Snippet;
+    /** Override CTA section. */
+    submitButton?: Snippet<[{
+        isSubmitting: boolean;
+        disabled: boolean;
+    }]>;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLFormElement;
+}
+declare const EmailVerifyForm: import("svelte").Component<Props, {}, "el">;
+type EmailVerifyForm = ReturnType<typeof EmailVerifyForm>;
+export default EmailVerifyForm;

package/dist/components/EmailVerifyForm/README.md

@@ -0,0 +1,76 @@
+# EmailVerifyForm
+
+"Check your email" form used after registration. Drop-in peer to `LoginForm` / `RegisterForm` — same prop conventions (`onSubmit`, `isSubmitting`, `error`, `notifications`, `t`, `unstyled`, `class`).
+
+The form owns:
+
+- A heading + subhead that displays the email the code was sent to.
+- An `OtpInput` (default 6 digits) that auto-submits on completion.
+- A general error banner via `DismissibleMessage`.
+- An optional inline "attempts remaining" hint.
+- An optional "Resend code" control with built-in cooldown countdown.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { EmailVerifyForm } from "@marianmeres/stuic";
+
+	async function handleVerify(code: string) {
+		// POST /api/verify with { email, code }
+	}
+
+	async function handleResend() {
+		// POST /api/resend-code with { email }
+	}
+</script>
+
+<EmailVerifyForm
+	email="user@example.com"
+	onSubmit={handleVerify}
+	onResend={handleResend}
+	resendCooldownSeconds={30}
+	error={errorMessage}
+/>
+```
+
+## Props
+
+| Prop                    | Type                                       | Default  | Description                                              |
+| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
+| `email`                 | `string`                                   | required | Email address shown in the subhead                       |
+| `onSubmit`              | `(code: string) => void`                   | required | Called with the entered code (auto on complete + manual) |
+| `onResend`              | `() => Promise<void> \| void`              | —        | When set, renders a resend control                       |
+| `resendCooldownSeconds` | `number`                                   | `30`     | Cooldown after a successful resend                       |
+| `isSubmitting`          | `boolean`                                  | `false`  | Disables submit + OtpInput                               |
+| `error`                 | `string`                                   | —        | General error (renders alert + applies error styling)    |
+| `attemptsRemaining`     | `number`                                   | —        | Inline hint, e.g. "3 attempts remaining"                 |
+| `codeLength`            | `number`                                   | `6`      | Forwarded to OtpInput                                    |
+| `otpInputProps`         | `Partial<OtpInputProps>`                   | —        | Pass-through props for the inner OtpInput                |
+| `notifications`         | `NotificationsStack`                       | —        | Route errors to notification system                      |
+| `submitButton`          | `Snippet`                                  | —        | Override submit section                                  |
+| `footer`                | `Snippet`                                  | —        | Content below the resend control                         |
+| `t`                     | `TranslateFn`                              | built-in | Translation function                                     |
+| `unstyled`              | `boolean`                                  | `false`  | Skip default styling                                     |
+| `class`                 | `string`                                   | —        | Additional CSS classes on the form root                  |
+| `el`                    | `HTMLFormElement`                          | —        | Bindable form element                                    |
+
+## i18n keys
+
+| Key                                       | Default                                    |
+| ----------------------------------------- | ------------------------------------------ |
+| `email_verify_form.heading`               | `Check your email`                         |
+| `email_verify_form.subheading`            | `We sent a 6-digit code to {email}`        |
+| `email_verify_form.submit`                | `Verify`                                   |
+| `email_verify_form.submitting`            | `Verifying...`                             |
+| `email_verify_form.resend_prompt`         | `Didn't receive it?`                       |
+| `email_verify_form.resend`                | `Resend code`                              |
+| `email_verify_form.resend_cooldown`       | `Resend available in {seconds}s`           |
+| `email_verify_form.resent`                | `New code sent`                            |
+| `email_verify_form.attempts_remaining`    | `{count} attempts remaining`               |
+
+## CSS Tokens
+
+Prefix: `--stuic-email-verify-form-*`
+
+`gap`, `subheading-color`, `attempts-color`, `resend-color`, `resend-flash-color`

package/dist/components/EmailVerifyForm/_internal/email-verify-form-i18n-defaults.d.ts

@@ -0,0 +1 @@
+export declare function t_default(k: string, values?: false | null | undefined | Record<string, string | number>, fallback?: string | boolean): string;

package/dist/components/EmailVerifyForm/_internal/email-verify-form-i18n-defaults.js

@@ -0,0 +1,21 @@
+import { isPlainObject } from "../../../utils/is-plain-object.js";
+import { replaceMap } from "../../../utils/replace-map.js";
+const DEFAULTS = {
+    "email_verify_form.heading": "Check your email",
+    "email_verify_form.subheading": "We sent a 6-digit code to {email}",
+    "email_verify_form.submit": "Verify",
+    "email_verify_form.submitting": "Verifying...",
+    "email_verify_form.resend_prompt": "Didn't receive it?",
+    "email_verify_form.resend": "Resend code",
+    "email_verify_form.resend_cooldown": "Resend available in {seconds}s",
+    "email_verify_form.resent": "New code sent",
+    "email_verify_form.attempts_remaining": "{count} attempts remaining",
+};
+export function t_default(k, values = null, fallback = "") {
+    const out = DEFAULTS[k] ?? (typeof fallback === "string" ? fallback : "") ?? k;
+    return isPlainObject(values)
+        ? replaceMap(out, values, {
+            preSearchKeyTransform: (k) => `{${k}}`,
+        })
+        : out;
+}

package/dist/components/EmailVerifyForm/index.css

@@ -0,0 +1,54 @@
+:root {
+	--stuic-email-verify-form-gap: 1rem;
+	--stuic-email-verify-form-subheading-color: var(--stuic-color-muted-foreground);
+	--stuic-email-verify-form-attempts-color: var(--stuic-color-muted-foreground);
+	--stuic-email-verify-form-resend-color: var(--stuic-color-muted-foreground);
+	--stuic-email-verify-form-resend-flash-color: var(--stuic-color-primary);
+}
+
+@layer components {
+	.stuic-email-verify-form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-email-verify-form-gap);
+	}
+
+	.stuic-email-verify-form-heading {
+		margin: 0;
+	}
+
+	.stuic-email-verify-form-subheading {
+		margin: 0;
+		color: var(--stuic-email-verify-form-subheading-color);
+		font-size: var(--text-sm);
+	}
+
+	.stuic-email-verify-form-otp {
+		display: flex;
+		justify-content: center;
+		padding: 0.25rem 0;
+	}
+
+	.stuic-email-verify-form-attempts {
+		color: var(--stuic-email-verify-form-attempts-color);
+		font-size: var(--text-xs);
+		text-align: center;
+	}
+
+	.stuic-email-verify-form-submit {
+		margin-top: 0.25rem;
+	}
+
+	.stuic-email-verify-form-resend {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		font-size: var(--text-sm);
+		color: var(--stuic-email-verify-form-resend-color);
+	}
+
+	.stuic-email-verify-form-resend-flash {
+		color: var(--stuic-email-verify-form-resend-flash-color);
+	}
+}

package/dist/components/EmailVerifyForm/index.d.ts

@@ -0,0 +1 @@
+export { default as EmailVerifyForm, type Props as EmailVerifyFormProps, } from "./EmailVerifyForm.svelte";

package/dist/components/EmailVerifyForm/index.js

@@ -0,0 +1 @@
+export { default as EmailVerifyForm, } from "./EmailVerifyForm.svelte";

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -6,9 +6,10 @@
 	import type { LoginFormData } from "../LoginForm/_internal/login-form-types.js";
 	import type { Props as RegisterFormProps } from "../RegisterForm/RegisterForm.svelte";
 	import type { RegisterFormData } from "../RegisterForm/_internal/register-form-types.js";
+	import type { Props as EmailVerifyFormProps } from "../EmailVerifyForm/EmailVerifyForm.svelte";
 	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
-	export type LoginOrRegisterFormMode = "login" | "register";
+	export type LoginOrRegisterFormMode = "login" | "register" | "verify";
 
 	type InnerPropsCommonOmit =
 		| "formData"
@@ -45,6 +46,27 @@
 		/** Pass-through props for the inner RegisterForm (spread). */
 		registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
 
+		/**
+		 * Bindable email used by EmailVerifyForm (typically copied from registerData.email
+		 * when transitioning to "verify" mode).
+		 */
+		verifyEmail?: string;
+
+		/** Called when the user submits a code in the verify view. */
+		onVerify?: (code: string) => void;
+
+		/** Called when the user clicks "Resend code" in the verify view. */
+		onResendCode?: () => Promise<void> | void;
+
+		/** Pass-through props for the inner EmailVerifyForm (spread). */
+		verifyProps?: Omit<
+			EmailVerifyFormProps,
+			"email" | "onSubmit" | "onResend" | "isSubmitting" | "t" | "notifications" | "footer"
+		>;
+
+		/** Reserved for future use (verify mode is not exposed in the default switcher). */
+		verifyModeLabel?: string;
+
 		/** Override the built-in ButtonGroupRadio mode switcher. */
 		modeSwitcher?: Snippet<
 			[
@@ -102,17 +124,23 @@
 	import { createEmptyLoginFormData } from "../LoginForm/_internal/login-form-utils.js";
 	import RegisterForm from "../RegisterForm/RegisterForm.svelte";
 	import { createEmptyRegisterFormData } from "../RegisterForm/_internal/register-form-utils.js";
+	import EmailVerifyForm from "../EmailVerifyForm/EmailVerifyForm.svelte";
 	import ButtonGroupRadio from "../ButtonGroupRadio/ButtonGroupRadio.svelte";
 
 	let {
 		mode = $bindable("login"),
 		loginData = $bindable(createEmptyLoginFormData()),
 		registerData = $bindable(createEmptyRegisterFormData()),
+		verifyEmail = $bindable(""),
 		onLogin,
 		onRegister,
+		onVerify,
+		onResendCode,
 		isSubmitting = false,
 		loginProps,
 		registerProps,
+		verifyProps,
+		verifyModeLabel: _verifyModeLabel,
 		modeSwitcher,
 		loginModeLabel,
 		registerModeLabel,
@@ -138,10 +166,19 @@
 	// effect (which would be prone to loops).
 	function setMode(next: LoginOrRegisterFormMode) {
 		if (next === mode) return;
+		const sourceEmail =
+			mode === "verify"
+				? verifyEmail
+				: mode === "register"
+					? registerData.email
+					: loginData.email;
 		if (next === "register") {
-			registerData.email = loginData.email;
+			registerData.email = sourceEmail;
+		} else if (next === "login") {
+			loginData.email = sourceEmail;
 		} else {
-			loginData.email = registerData.email;
+			// next === "verify"
+			verifyEmail = sourceEmail;
 		}
 		mode = next;
 	}
@@ -157,21 +194,23 @@
 </script>
 
 <div class={_class} {...rest}>
-	<!-- Mode switcher -->
-	<div class={unstyled ? undefined : "stuic-login-or-register-form-switcher"}>
-		{#if modeSwitcher}
-			{@render modeSwitcher({ mode, setMode, t })}
-		{:else}
-			<ButtonGroupRadio
-				options={switcherOptions}
-				value={mode}
-				onButtonClick={(idx) => {
-					setMode(idx === 0 ? "login" : "register");
-					return false;
-				}}
-			/>
-		{/if}
-	</div>
+	<!-- Mode switcher (verify mode is never rendered as a tab — it's an outcome state) -->
+	{#if mode !== "verify"}
+		<div class={unstyled ? undefined : "stuic-login-or-register-form-switcher"}>
+			{#if modeSwitcher}
+				{@render modeSwitcher({ mode, setMode, t })}
+			{:else}
+				<ButtonGroupRadio
+					options={switcherOptions}
+					value={mode}
+					onButtonClick={(idx) => {
+						setMode(idx === 0 ? "login" : "register");
+						return false;
+					}}
+				/>
+			{/if}
+		</div>
+	{/if}
 
 	<!-- Active form -->
 	<div class={unstyled ? undefined : "stuic-login-or-register-form-body"}>
@@ -185,7 +224,7 @@
 				t={tProp}
 				{...loginProps}
 			/>
-		{:else}
+		{:else if mode === "register"}
 			<!-- svelte-ignore binding_property_non_reactive -->
 			<RegisterForm
 				bind:formData={registerData}
@@ -195,11 +234,21 @@
 				t={tProp}
 				{...registerProps}
 			/>
+		{:else}
+			<EmailVerifyForm
+				email={verifyEmail || registerData.email || loginData.email}
+				onSubmit={(code) => onVerify?.(code)}
+				onResend={onResendCode}
+				{isSubmitting}
+				{notifications}
+				t={tProp}
+				{...verifyProps}
+			/>
 		{/if}
 	</div>
 
-	<!-- Shared social logins -->
-	{#if socialLogins}
+	<!-- Shared social logins (hidden in verify mode — OAuth doesn't apply mid-verification) -->
+	{#if socialLogins && mode !== "verify"}
 		<div class={unstyled ? undefined : "stuic-login-or-register-form-social"}>
 			{#if socialDividerLabel !== false}
 				<div class={unstyled ? undefined : "stuic-login-or-register-form-social-divider"}>