@ternkit/tern 1.6.0 → 1.8.0

package/dist/index.d.ts

@@ -30,4 +30,4 @@ export type { MessageKey } from './runtime/i18n.svelte.js';
 export interface Messages {
 }
 /** The version of the Tern client runtime. */
-export declare const VERSION = "1.6.0";
+export declare const VERSION = "1.8.0";

package/dist/index.js

@@ -18,4 +18,4 @@ export { default as Image } from './image/Image.svelte';
 export { t, i18n, setLocale } from './runtime/i18n.svelte.js';
 export { passkeysSupported, registerPasskey, signInWithPasskey, PasskeyError } from './runtime/passkeys.js';
 /** The version of the Tern client runtime. */
-export const VERSION = '1.6.0';
+export const VERSION = '1.8.0';

package/dist/runtime/builtin.js

@@ -2,10 +2,19 @@
 // An app translates them in src/locales like its own messages. Generated
 // from internal/i18n/builtin.json; a Go test keeps the two the same.
 export const builtin = {
+    "tern.accounts.change.button": "Confirm my new address",
+    "tern.accounts.change.subject": "Confirm your new email address",
+    "tern.accounts.change.text": "Hello {name},\n\nConfirm that this is your account’s new email address by opening this link:\n{link}\n\nIf you didn’t ask for this, ignore this email: your address stays as it is.",
+    "tern.accounts.changed.button": "",
+    "tern.accounts.changed.subject": "Your email address was changed",
+    "tern.accounts.changed.text": "Hello {name},\n\nYour account’s email address was changed, and this address no longer signs in. If you didn’t do this, contact us right away.",
     "tern.accounts.error.credentials": "Wrong email or password.",
     "tern.accounts.error.emailTaken": "An account with this email address already exists.",
+    "tern.accounts.error.invalidCode": "That code didn’t work. Check the time on your phone, or use a recovery code.",
     "tern.accounts.error.invalidToken": "This link is invalid or has expired.",
+    "tern.accounts.error.lastSignIn": "Add a password or a passkey first: this is the only way to sign in to your account.",
     "tern.accounts.error.passkey": "That passkey didn’t work.",
+    "tern.accounts.error.tooMany": "Too many attempts. Try again in a few minutes.",
     "tern.accounts.error.wrongPassword": "That isn’t your current password.",
     "tern.accounts.reset.button": "Choose a new password",
     "tern.accounts.reset.subject": "Reset your password",
@@ -57,6 +66,11 @@ export const builtin = {
     "tern.ui.forgotPassword.submit": "Send link",
     "tern.ui.forgotPassword.title": "Reset your password",
     "tern.ui.form.summary": "{n, plural, one {# field needs attention.} other {# fields need attention.}}",
+    "tern.ui.linked.connect": "Connect",
+    "tern.ui.linked.description": "Sign in with these as well as your password or passkeys.",
+    "tern.ui.linked.disconnect": "Disconnect",
+    "tern.ui.linked.since": "connected {when}",
+    "tern.ui.linked.title": "Connected accounts",
     "tern.ui.navigationMenu.label": "Main",
     "tern.ui.pagination.label": "Pagination",
     "tern.ui.pagination.next": "Next ›",
@@ -91,6 +105,7 @@ export const builtin = {
     "tern.ui.signIn.failed": "Signing in didn’t work. Try again, or choose another way.",
     "tern.ui.signIn.forgot": "Forgot your password?",
     "tern.ui.signIn.new": "New here?",
+    "tern.ui.signIn.noEmail": "The provider didn’t share your email address, which an account needs. Allow it there, or sign up with email.",
     "tern.ui.signIn.or": "or",
     "tern.ui.signIn.passkey": "Sign in with a passkey",
     "tern.ui.signIn.passkeyFailed": "That passkey didn’t work. Try again, or sign in another way.",
@@ -98,7 +113,9 @@ export const builtin = {
     "tern.ui.signIn.remember": "Keep me signed in",
     "tern.ui.signIn.signUp": "Create an account",
     "tern.ui.signIn.submit": "Sign in",
+    "tern.ui.signIn.taken": "That account is already connected to another user.",
     "tern.ui.signIn.title": "Sign in",
+    "tern.ui.signIn.unverified": "An account with this email address exists. Sign in to it another way, then connect this provider from your account.",
     "tern.ui.signUp.agree": "I agree to the",
     "tern.ui.signUp.confirm": "Confirm password",
     "tern.ui.signUp.email": "Email",
@@ -114,6 +131,31 @@ export const builtin = {
     "tern.ui.table.empty": "Nothing to show",
     "tern.ui.toaster.dismiss": "Dismiss",
     "tern.ui.toaster.label": "Notifications",
+    "tern.ui.twoStep.cantScan": "Can’t scan it?",
+    "tern.ui.twoStep.codeDescription": "Open your authenticator app and enter the code it shows for this account.",
+    "tern.ui.twoStep.codeLabel": "Code from the app",
+    "tern.ui.twoStep.codeTitle": "Enter your code",
+    "tern.ui.twoStep.codesHelp": "Each signs in once if you lose your phone. They won’t be shown again.",
+    "tern.ui.twoStep.codesLeft": "{n, plural, one {# recovery code left} other {# recovery codes left}}",
+    "tern.ui.twoStep.codesTitle": "Save your recovery codes",
+    "tern.ui.twoStep.copied": "Copied",
+    "tern.ui.twoStep.copy": "Copy codes",
+    "tern.ui.twoStep.description": "After your password, sign in with a code from an authenticator app on your phone.",
+    "tern.ui.twoStep.newCodes": "New recovery codes",
+    "tern.ui.twoStep.offLabel": "A code from the app, or a recovery code",
+    "tern.ui.twoStep.on": "On",
+    "tern.ui.twoStep.openApp": "Open in an authenticator app on this device",
+    "tern.ui.twoStep.qrAlt": "QR code to add this account to an authenticator app",
+    "tern.ui.twoStep.recoveryDescription": "Enter one of the recovery codes you saved. Each works once.",
+    "tern.ui.twoStep.recoveryLabel": "Recovery code",
+    "tern.ui.twoStep.scan": "Scan this QR code with your authenticator app.",
+    "tern.ui.twoStep.setUp": "Set up two-step sign-in",
+    "tern.ui.twoStep.title": "Two-step sign-in",
+    "tern.ui.twoStep.turnOff": "Turn off",
+    "tern.ui.twoStep.turnOn": "Turn on",
+    "tern.ui.twoStep.useApp": "Use the authenticator app",
+    "tern.ui.twoStep.useRecovery": "Use a recovery code",
+    "tern.ui.twoStep.verify": "Continue",
     "tern.validate.after": "{field} must be on or after {date}.",
     "tern.validate.before": "{field} must be on or before {date}.",
     "tern.validate.checked": "{field} must be checked.",

package/dist/server/index.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'svelte';
 import { type I18nConfig } from '../runtime/i18n.svelte.js';
+import type { Payload } from '../runtime/types.js';
 /** The server manifest generated by `tern gen` in .tern/generated/server.js. */
 export interface ServerManifest {
     layouts: {
@@ -36,7 +37,7 @@ export interface RenderResult {
  * exactly the same tree and hydration matches.
  */
 export declare function createRenderer(manifest: ServerManifest): ((payload: string, href: string) => string) & {
-    raw: (payload: string, href: string) => RenderResult;
+    raw: (payload: string | Payload, href: string) => RenderResult;
 };
 export { createEmailRenderer } from './email.js';
 export type { EmailModule, EmailResult } from './email.js';

package/dist/server/index.js

@@ -17,9 +17,10 @@ export function createRenderer(manifest) {
     configureI18n(manifest.i18n ?? null);
     setBase(manifest.base ?? '');
     // raw returns the result as an object, for a native renderer to read
-    // without encoding it as JSON first.
-    const raw = (payloadJSON, href) => {
-        const p = JSON.parse(payloadJSON);
+    // without encoding it as JSON first. Native rendering also passes the
+    // payload as an object, made from Go values without the JSON.
+    const raw = (payload, href) => {
+        const p = typeof payload === 'string' ? JSON.parse(payload) : payload;
         // Deferred values are still loading: render their pending state.
         if (p.deferred)
             p.nodes = revive(p.nodes, () => new Promise(() => { }));

package/dist/ui/Form.svelte

@@ -72,9 +72,15 @@
 	// inputs, its Field's.
 	const nameOf = (t: EventTarget | null) => (t as HTMLInputElement | null)?.name || (t as HTMLElement | null)?.closest?.('[data-tern-field]')?.getAttribute('data-tern-field') || '';
 
+	// What was last posted, by name: a field whose value is still that
+	// hasn't been edited, though a change event fires as focus leaves it.
+	let posted: Record<string, string> = {};
+	const valueOf = (name: string) => (el ? new FormData(el).getAll(name).map(String).join('\u0000') : '');
+
 	function oninput(e: Event) {
 		const name = nameOf(e.target);
 		if (!name) return;
+		if (name in posted && valueOf(name) === posted[name]) return;
 		edited = { ...edited, [name]: true };
 		if (touched[name] || submitted) check(related(name).filter((n) => touched[n] || submitted || n === name));
 	}
@@ -101,7 +107,12 @@
 		return false;
 	}
 
-	const submit = ({ formData, cancel }: { formData: FormData; cancel(): void }) => {
+	// The newest post wins: a submit while another is in flight, such as
+	// Enter right after a code completed itself, aborts the older one, and
+	// an older answer that still arrives is dropped.
+	let latest = 0;
+	let inflight: AbortController | null = null;
+	const submit = ({ formData, cancel, controller }: { formData: FormData; cancel(): void; controller: AbortController }) => {
 		const errors = validate(rules, formData);
 		if (Object.keys(errors).length > 0) {
 			cancel();
@@ -112,7 +123,14 @@
 		client = {};
 		summary = '';
 		submitting = true;
+		inflight?.abort();
+		inflight = controller;
+		const mine = ++latest;
+		posted = {};
+		for (const k of new Set(formData.keys())) posted[k] = formData.getAll(k).map(String).join('\u0000');
 		return async ({ update, result }: { update: (o?: { reset?: boolean }) => Promise<void>; result: { type: string; data?: unknown } }) => {
+			if (mine !== latest) return;
+			inflight = null;
 			await update({ reset });
 			submitting = false;
 			if (result.type === 'success') {

package/dist/ui/LinkedAccounts.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import AccountSection from './AccountSection.svelte';
+	import Button from './Button.svelte';
+	import Form from './Form.svelte';
+	import { when } from './accountDates.js';
+
+	type Linked = { provider: string; email: string; createdAt: string };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Identities. */
+		identities: Linked[];
+		/** plugins/oauth's providers, such as plugin.Providers(): each one not linked yet gets a Connect button. */
+		providers: { name: string; label: string }[];
+		/** Where plugins/oauth lives. */
+		authPath?: string;
+		/** Where to come back to after connecting: this page. */
+		next?: string;
+		/** The action that calls acc.Unlink with the posted provider. */
+		unlinkAction?: string;
+		class?: string;
+	};
+	let { title, description, level = 2, identities, providers, authPath = '/auth', next, unlinkAction, class: klass = '' }: Props = $props();
+	const label = (name: string) => providers.find((p) => p.name === name)?.label ?? name;
+	const linked = $derived(new Set(identities.map((i) => i.provider)));
+	const connect = (name: string) => `${authPath}/${encodeURIComponent(name)}/login${next ? `?next=${encodeURIComponent(next)}` : ''}`;
+</script>
+
+<AccountSection id="tern-linked-title" title={title ?? tb('tern.ui.linked.title')} description={description ?? tb('tern.ui.linked.description')} {level} class={klass}>
+	<ul>
+		{#each identities as i (i.provider)}
+			<li>
+				<div class="tern-account-text">
+					<span class="tern-account-name">{label(i.provider)}</span>
+					<span class="tern-account-meta">{i.email}{i.email ? ' · ' : ''}{tb('tern.ui.linked.since', { when: when(i.createdAt) })}</span>
+				</div>
+				{#if unlinkAction}
+					<Form action={unlinkAction} reset={false}>
+						<input type="hidden" name="provider" value={i.provider} />
+						<Button type="submit" variant="ghost" size="sm">{tb('tern.ui.linked.disconnect')}</Button>
+					</Form>
+				{/if}
+			</li>
+		{/each}
+		{#each providers.filter((p) => !linked.has(p.name)) as p (p.name)}
+			<li>
+				<div class="tern-account-text"><span class="tern-account-name">{p.label}</span></div>
+				<Button variant="secondary" size="sm" href={connect(p.name)}>{tb('tern.ui.linked.connect')}</Button>
+			</li>
+		{/each}
+	</ul>
+</AccountSection>

package/dist/ui/LinkedAccounts.svelte.d.ts

@@ -0,0 +1,27 @@
+type Linked = {
+    provider: string;
+    email: string;
+    createdAt: string;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Identities. */
+    identities: Linked[];
+    /** plugins/oauth's providers, such as plugin.Providers(): each one not linked yet gets a Connect button. */
+    providers: {
+        name: string;
+        label: string;
+    }[];
+    /** Where plugins/oauth lives. */
+    authPath?: string;
+    /** Where to come back to after connecting: this page. */
+    next?: string;
+    /** The action that calls acc.Unlink with the posted provider. */
+    unlinkAction?: string;
+    class?: string;
+};
+declare const LinkedAccounts: import("svelte").Component<Props, {}, "">;
+type LinkedAccounts = ReturnType<typeof LinkedAccounts>;
+export default LinkedAccounts;

package/dist/ui/SignIn.svelte

@@ -35,7 +35,7 @@
 		rules?: FormField[];
 		/** The page's form prop, for the server's errors. */
 		form?: unknown;
-		/** The ?error= code plugins/oauth sends back after a failed sign-in. */
+		/** The ?error= code plugins/oauth sends back after a failed sign-in, such as denied or unverified. */
 		error?: string | null;
 		/** A "Keep me signed in" checkbox, posted as remember. */
 		remember?: boolean;
@@ -71,7 +71,19 @@
 
 	let submitting = $state(false);
 	const errorText = $derived(
-		!error ? null : error === 'access_denied' ? tb('tern.ui.signIn.cancelled') : tb('tern.ui.signIn.failed')
+		!error
+			? null
+			: error === 'access_denied' || error === 'denied'
+				? tb('tern.ui.signIn.cancelled')
+				: error === 'unverified'
+					? tb('tern.ui.signIn.unverified')
+					: error === 'taken'
+						? tb('tern.ui.signIn.taken')
+						: error === 'no_email'
+							? tb('tern.ui.signIn.noEmail')
+							: error === 'limited'
+								? tb('tern.accounts.error.tooMany')
+								: tb('tern.ui.signIn.failed')
 	);
 	let el = $state<HTMLElement>();
 	let passkeyBusy = $state(false);

package/dist/ui/SignIn.svelte.d.ts

@@ -25,7 +25,7 @@ type Props = {
     rules?: FormField[];
     /** The page's form prop, for the server's errors. */
     form?: unknown;
-    /** The ?error= code plugins/oauth sends back after a failed sign-in. */
+    /** The ?error= code plugins/oauth sends back after a failed sign-in, such as denied or unverified. */
     error?: string | null;
     /** A "Keep me signed in" checkbox, posted as remember. */
     remember?: boolean;

package/dist/ui/TwoStep.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import AccountSection from './AccountSection.svelte';
+	import Alert from './Alert.svelte';
+	import Badge from './Badge.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import InputOTP from './InputOTP.svelte';
+
+	type Setup = { secret: string; uri: string; qr: string };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** User.twoStep: whether it's on. */
+		enabled: boolean;
+		/** From acc.SetUpTwoStep or acc.PendingTwoStepSetup, while turning it on. */
+		setup?: Setup | null;
+		/** Recovery codes to show once: from acc.ConfirmTwoStep or acc.RecoveryCodes. */
+		recoveryCodes?: string[] | null;
+		/** How many recovery codes are left, from acc.RecoveryCodesLeft. */
+		codesLeft?: number;
+		/** The action that calls acc.SetUpTwoStep. */
+		setupAction?: string;
+		/** The action that calls acc.ConfirmTwoStep with the posted code. */
+		confirmAction?: string;
+		/** The action that calls acc.TurnOffTwoStep with the posted code. */
+		offAction?: string;
+		/** The action that calls acc.RecoveryCodes. */
+		codesAction?: string;
+		form?: unknown;
+		class?: string;
+	};
+	let { title, description, level = 2, enabled, setup, recoveryCodes, codesLeft, setupAction, confirmAction, offAction, codesAction, form, class: klass = '' }: Props = $props();
+	let turningOff = $state(false);
+	let copied = $state(false);
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText((recoveryCodes ?? []).join('\n'));
+			copied = true;
+		} catch {
+			copied = false;
+		}
+	}
+</script>
+
+<AccountSection id="tern-two-step-settings" title={title ?? tb('tern.ui.twoStep.title')} description={description ?? tb('tern.ui.twoStep.description')} {level} class={klass}>
+	{#if recoveryCodes?.length}
+		<Alert tone="warning" title={tb('tern.ui.twoStep.codesTitle')}>{tb('tern.ui.twoStep.codesHelp')}</Alert>
+		<ol class="codes" data-testid="recovery-codes">
+			{#each recoveryCodes as c (c)}<li><code>{c}</code></li>{/each}
+		</ol>
+		<div><Button type="button" variant="secondary" size="sm" onclick={copy}>{copied ? tb('tern.ui.twoStep.copied') : tb('tern.ui.twoStep.copy')}</Button></div>
+	{/if}
+	{#if enabled}
+		<p class="status">
+			<Badge tone="success">{tb('tern.ui.twoStep.on')}</Badge>
+			{#if codesLeft !== undefined}<span class="tern-account-meta">{tb('tern.ui.twoStep.codesLeft', { n: codesLeft })}</span>{/if}
+		</p>
+		<div class="row">
+			{#if codesAction}
+				<Form action={codesAction} reset={false}><Button type="submit" variant="secondary" size="sm">{tb('tern.ui.twoStep.newCodes')}</Button></Form>
+			{/if}
+			{#if offAction && !turningOff}
+				<Button type="button" variant="ghost" size="sm" onclick={() => (turningOff = true)}>{tb('tern.ui.twoStep.turnOff')}</Button>
+			{/if}
+		</div>
+		{#if offAction && turningOff}
+			<Form action={offAction} {form} reset={false}>
+				<Field label={tb('tern.ui.twoStep.offLabel')} name="code"><Input autocomplete="one-time-code" spellcheck="false" /></Field>
+				<div class="row">
+					<Button type="submit" variant="danger" size="sm">{tb('tern.ui.twoStep.turnOff')}</Button>
+					<Button type="button" variant="ghost" size="sm" onclick={() => (turningOff = false)}>{tb('tern.ui.alertDialog.cancel')}</Button>
+				</div>
+			</Form>
+		{/if}
+	{:else if setup}
+		<ol class="steps">
+			<li>
+				{tb('tern.ui.twoStep.scan')}
+				<img src={setup.qr} alt={tb('tern.ui.twoStep.qrAlt')} width="200" height="200" />
+				<details>
+					<summary>{tb('tern.ui.twoStep.cantScan')}</summary>
+					<p><code data-testid="two-step-secret">{setup.secret}</code></p>
+					<p><a href={setup.uri}>{tb('tern.ui.twoStep.openApp')}</a></p>
+				</details>
+			</li>
+			<li>
+				<Form action={confirmAction} {form} reset={false}>
+					<Field label={tb('tern.ui.twoStep.codeLabel')} name="code"><InputOTP length={6} /></Field>
+					<div><Button type="submit" size="sm">{tb('tern.ui.twoStep.turnOn')}</Button></div>
+				</Form>
+			</li>
+		</ol>
+	{:else if setupAction}
+		<Form action={setupAction} reset={false}>
+			<div><Button type="submit" variant="secondary" size="sm">{tb('tern.ui.twoStep.setUp')}</Button></div>
+		</Form>
+	{/if}
+</AccountSection>
+
+<style>
+	.codes {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+		gap: 0.5rem;
+		margin: 0;
+		padding: 1rem 1rem 1rem 2.25rem;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+	}
+	.codes code,
+	.steps code {
+		font-family: var(--tern-mono, ui-monospace, monospace);
+		font-size: 0.9375rem;
+	}
+	.status,
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.75rem;
+		margin: 0;
+	}
+	.steps {
+		display: grid;
+		gap: 1.25rem;
+		margin: 0;
+		padding-left: 1.25rem;
+	}
+	.steps li {
+		display: grid;
+		gap: 0.75rem;
+		justify-items: start;
+	}
+	.steps img {
+		border-radius: var(--tern-radius);
+		background: #fff;
+		padding: 0.5rem;
+		image-rendering: pixelated;
+	}
+	details {
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	summary {
+		cursor: pointer;
+	}
+	.steps a {
+		color: var(--tern-accent);
+	}
+</style>

package/dist/ui/TwoStep.svelte.d.ts

@@ -0,0 +1,31 @@
+type Setup = {
+    secret: string;
+    uri: string;
+    qr: string;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** User.twoStep: whether it's on. */
+    enabled: boolean;
+    /** From acc.SetUpTwoStep or acc.PendingTwoStepSetup, while turning it on. */
+    setup?: Setup | null;
+    /** Recovery codes to show once: from acc.ConfirmTwoStep or acc.RecoveryCodes. */
+    recoveryCodes?: string[] | null;
+    /** How many recovery codes are left, from acc.RecoveryCodesLeft. */
+    codesLeft?: number;
+    /** The action that calls acc.SetUpTwoStep. */
+    setupAction?: string;
+    /** The action that calls acc.ConfirmTwoStep with the posted code. */
+    confirmAction?: string;
+    /** The action that calls acc.TurnOffTwoStep with the posted code. */
+    offAction?: string;
+    /** The action that calls acc.RecoveryCodes. */
+    codesAction?: string;
+    form?: unknown;
+    class?: string;
+};
+declare const TwoStep: import("svelte").Component<Props, {}, "">;
+type TwoStep = ReturnType<typeof TwoStep>;
+export default TwoStep;

package/dist/ui/TwoStepCode.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import type { FormField } from '../runtime/validate.js';
+	import AuthCard from './AuthCard.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import InputOTP from './InputOTP.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		/** The action that calls acc.CompleteSignIn with the posted code. */
+		action?: string;
+		rules?: FormField[];
+		form?: unknown;
+		/** Where to go back to sign in. */
+		signInHref?: string;
+		class?: string;
+	};
+	let { title, description, level = 1, action, rules, form, signInHref, class: klass = '' }: Props = $props();
+
+	let submitting = $state(false);
+	let recovery = $state(false);
+	let el = $state<HTMLElement>();
+	// A full code posts the form, as typing the last digit should.
+	const submit = () => el?.querySelector('form')?.requestSubmit();
+</script>
+
+<div bind:this={el} style="display: contents">
+	<AuthCard id="tern-two-step-title" title={title ?? tb('tern.ui.twoStep.codeTitle')} description={description ?? (recovery ? tb('tern.ui.twoStep.recoveryDescription') : tb('tern.ui.twoStep.codeDescription'))} {level} class={klass}>
+		<Form {rules} {form} {action} bind:submitting reset={false}>
+			{#if recovery}
+				<Field label={tb('tern.ui.twoStep.recoveryLabel')} name="code">
+					<Input autocomplete="off" spellcheck="false" autocapitalize="off" />
+				</Field>
+			{:else}
+				<Field label={tb('tern.ui.twoStep.codeLabel')} name="code">
+					<InputOTP length={6} oncomplete={submit} />
+				</Field>
+			{/if}
+			<Button type="submit" loading={submitting}>{tb('tern.ui.twoStep.verify')}</Button>
+		</Form>
+		<p class="tern-auth-note">
+			<button type="button" class="link" onclick={() => (recovery = !recovery)}>
+				{recovery ? tb('tern.ui.twoStep.useApp') : tb('tern.ui.twoStep.useRecovery')}
+			</button>
+		</p>
+		{#if signInHref}<p class="tern-auth-note"><a href={signInHref}>{tb('tern.ui.forgotPassword.back')}</a></p>{/if}
+	</AuthCard>
+</div>
+
+<style>
+	.link {
+		padding: 0;
+		border: 0;
+		background: none;
+		color: var(--tern-accent);
+		font: inherit;
+		font-weight: 550;
+		cursor: pointer;
+	}
+	.link:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+</style>

package/dist/ui/TwoStepCode.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    /** The action that calls acc.CompleteSignIn with the posted code. */
+    action?: string;
+    rules?: FormField[];
+    form?: unknown;
+    /** Where to go back to sign in. */
+    signInHref?: string;
+    class?: string;
+};
+declare const TwoStepCode: import("svelte").Component<Props, {}, "">;
+type TwoStepCode = ReturnType<typeof TwoStepCode>;
+export default TwoStepCode;

package/dist/ui/index.d.ts

@@ -55,6 +55,9 @@ export { default as ForgotPassword } from './ForgotPassword.svelte';
 export { default as ResetPassword } from './ResetPassword.svelte';
 export { default as Devices } from './Devices.svelte';
 export { default as Passkeys } from './Passkeys.svelte';
+export { default as LinkedAccounts } from './LinkedAccounts.svelte';
+export { default as TwoStep } from './TwoStep.svelte';
+export { default as TwoStepCode } from './TwoStepCode.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as Sparkline } from './Sparkline.svelte';

package/dist/ui/index.js

@@ -58,6 +58,9 @@ export { default as ForgotPassword } from './ForgotPassword.svelte';
 export { default as ResetPassword } from './ResetPassword.svelte';
 export { default as Devices } from './Devices.svelte';
 export { default as Passkeys } from './Passkeys.svelte';
+export { default as LinkedAccounts } from './LinkedAccounts.svelte';
+export { default as TwoStep } from './TwoStep.svelte';
+export { default as TwoStepCode } from './TwoStepCode.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as Sparkline } from './Sparkline.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ternkit/tern",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Client runtime and Vite plugin for Tern: Svelte on the client, Go on the server",
   "license": "MIT",
   "type": "module",