@ternkit/tern 1.5.0 → 1.7.0

package/dist/ui/ForgotPassword.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.RequestPasswordReset with the posted email. */
+    action?: string;
+    rules?: FormField[];
+    /** The page's form prop. An action returning { sent: true } shows that the email is on its way. */
+    form?: unknown;
+    signInHref?: string;
+    class?: string;
+};
+declare const ForgotPassword: import("svelte").Component<Props, {}, "">;
+type ForgotPassword = ReturnType<typeof ForgotPassword>;
+export default ForgotPassword;

package/dist/ui/Form.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { tick, type Snippet } from 'svelte';
 	import type { HTMLFormAttributes } from 'svelte/elements';
 	import { enhance as enhanceAction } from '../runtime/forms.js';
@@ -67,14 +68,24 @@
 	// A field and the fields that must match it, such as a password and its confirmation.
 	const related = (name: string) => [name, ...rules.filter((f) => f.rules?.some((r) => r.name === 'same' && r.arg === name)).map((f) => f.name)];
 
+	// A control's name: its own, or for controls posting through hidden
+	// 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 = (e.target as HTMLInputElement | null)?.name;
+		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));
 	}
 	function onfocusout(e: FocusEvent) {
-		const name = (e.target as HTMLInputElement | null)?.name;
+		const name = nameOf(e.target);
 		// Don't complain about a field the user only passed through.
 		if (!name || !byName.has(name) || (!edited[name] && !submitted)) return;
 		touched = { ...touched, [name]: true };
@@ -91,12 +102,17 @@
 			summary = '';
 			return true;
 		}
-		summary = names.length === 1 ? '1 field needs attention.' : `${names.length} fields need attention.`;
+		summary = tb('tern.ui.form.summary', { n: names.length });
 		void tick().then(() => el?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus());
 		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();
@@ -107,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/NavigationMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { page } from '../runtime/state.svelte.js';
 	import { float } from './floating.js';
 
@@ -9,7 +10,8 @@
 		label?: string;
 		class?: string;
 	};
-	let { items, label = 'Main', class: klass = '' }: Props = $props();
+	let { items, label: labelProp, class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.navigationMenu.label'));
 
 	const uid = $props.id();
 	let open = $state<number | null>(null);

package/dist/ui/Pagination.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	type Props = {
 		/** The current page, from 1; bind it. */
 		page?: number;
@@ -12,7 +13,8 @@
 		class?: string;
 		onchange?: (page: number) => void;
 	};
-	let { page = $bindable(1), pages, href, siblings = 1, label = 'Pagination', class: klass = '', onchange }: Props = $props();
+	let { page = $bindable(1), pages, href, siblings = 1, label: labelProp, class: klass = '', onchange }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.pagination.label'));
 
 	// 1 … 4 5 6 … 20: the ends, the current page and its siblings.
 	const shown = $derived.by(() => {
@@ -45,7 +47,7 @@
 
 <nav class="tern-pagination {klass}" aria-label={label}>
 	<ul>
-		<li>{@render link(page - 1, '‹ Previous', 'Previous page', page <= 1, 'step')}</li>
+		<li>{@render link(page - 1, tb('tern.ui.pagination.previous'), tb('tern.ui.pagination.previousLabel'), page <= 1, 'step')}</li>
 		{#each shown as p, i (i)}
 			<li>
 				{#if p === 'gap'}
@@ -55,7 +57,7 @@
 				{/if}
 			</li>
 		{/each}
-		<li>{@render link(page + 1, 'Next ›', 'Next page', page >= pages, 'step')}</li>
+		<li>{@render link(page + 1, tb('tern.ui.pagination.next'), tb('tern.ui.pagination.nextLabel'), page >= pages, 'step')}</li>
 	</ul>
 </nav>
 

package/dist/ui/Passkeys.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import { invalidateAll } from '../runtime/router.svelte.js';
+	import { passkeysSupported, registerPasskey } from '../runtime/passkeys.js';
+	import Alert from './Alert.svelte';
+	import AccountSection from './AccountSection.svelte';
+	import Button from './Button.svelte';
+	import Form from './Form.svelte';
+	import { when } from './accountDates.js';
+
+	type Passkey = { id: string; name: string; createdAt: string; lastUsed: string | null };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Passkeys. */
+		passkeys: Passkey[];
+		/** The action that calls acc.RemovePasskey with the posted id. */
+		removeAction?: string;
+		/** Where the accounts package mounts its passkey endpoints. */
+		path?: string;
+		class?: string;
+	};
+	let { title, description, level = 2, passkeys, removeAction, path, class: klass = '' }: Props = $props();
+
+	let supported = $state(true);
+	$effect(() => {
+		supported = passkeysSupported();
+	});
+	let adding = $state(false);
+	let failed = $state(false);
+	async function add() {
+		adding = true;
+		failed = false;
+		try {
+			await registerPasskey({ path });
+			await invalidateAll();
+		} catch (e) {
+			if (!(e as { cancelled?: boolean }).cancelled) failed = true;
+		} finally {
+			adding = false;
+		}
+	}
+</script>
+
+<AccountSection id="tern-passkeys-title" title={title ?? tb('tern.ui.passkeys.title')} description={description ?? tb('tern.ui.passkeys.description')} {level} class={klass}>
+	{#if failed}<Alert tone="danger" live>{tb('tern.ui.passkeys.failed')}</Alert>{/if}
+	{#if passkeys.length}
+		<ul>
+			{#each passkeys as p (p.id)}
+				<li>
+					<div class="tern-account-text">
+						<span class="tern-account-name">{p.name}</span>
+						<span class="tern-account-meta">{tb('tern.ui.passkeys.added', { when: when(p.createdAt) })}{' · '}{p.lastUsed ? tb('tern.ui.passkeys.lastUsed', { when: when(p.lastUsed) }) : tb('tern.ui.passkeys.never')}</span>
+					</div>
+					{#if removeAction}
+						<Form action={removeAction} reset={false}>
+							<input type="hidden" name="id" value={p.id} />
+							<Button type="submit" variant="ghost" size="sm">{tb('tern.ui.passkeys.remove')}</Button>
+						</Form>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<p class="tern-account-empty">{tb('tern.ui.passkeys.empty')}</p>
+	{/if}
+	{#if supported}
+		<div><Button type="button" variant="secondary" size="sm" loading={adding} onclick={add}>{tb('tern.ui.passkeys.add')}</Button></div>
+	{:else}
+		<p class="tern-account-empty">{tb('tern.ui.passkeys.unsupported')}</p>
+	{/if}
+</AccountSection>

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

@@ -0,0 +1,21 @@
+type Passkey = {
+    id: string;
+    name: string;
+    createdAt: string;
+    lastUsed: string | null;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Passkeys. */
+    passkeys: Passkey[];
+    /** The action that calls acc.RemovePasskey with the posted id. */
+    removeAction?: string;
+    /** Where the accounts package mounts its passkey endpoints. */
+    path?: string;
+    class?: string;
+};
+declare const Passkeys: import("svelte").Component<Props, {}, "">;
+type Passkeys = ReturnType<typeof Passkeys>;
+export default Passkeys;

package/dist/ui/PasswordInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getField } from './field.js';
 
@@ -37,7 +38,7 @@
 	<button
 		type="button"
 		class="toggle"
-		aria-label="Show password"
+		aria-label={tb('tern.ui.password.show')}
 		aria-pressed={visible}
 		aria-controls={id}
 		disabled={field?.disabled || rest.disabled}

package/dist/ui/ResetPassword.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import type { FormField } from '../runtime/validate.js';
+	import Alert from './Alert.svelte';
+	import AuthCard from './AuthCard.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import PasswordInput from './PasswordInput.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		/** The token from the email's link (?token=), posted as token. */
+		token: string;
+		/** The action that calls acc.ResetPassword with the posted token and password. */
+		action?: string;
+		/** Its rules; they also set the password hint. */
+		rules?: FormField[];
+		form?: unknown;
+		/** Ask to type the password twice, posted as confirm. */
+		confirm?: boolean;
+		/** The link has been found invalid or expired: say so instead of showing the form. */
+		invalid?: boolean;
+		/** Where to ask for a new link. */
+		forgotHref?: string;
+		class?: string;
+	};
+	let { title, description, level = 1, token, action, rules, form, confirm = true, invalid = false, forgotHref, class: klass = '' }: Props = $props();
+
+	let submitting = $state(false);
+	const minPassword = $derived(rules?.find((f) => f.name === 'password')?.rules?.find((r) => r.name === 'min')?.arg);
+</script>
+
+<AuthCard id="tern-reset-title" title={title ?? tb('tern.ui.resetPassword.title')} {description} {level} class={klass}>
+	{#if invalid || !token}
+		<Alert tone="danger">{tb('tern.ui.resetPassword.invalid')}</Alert>
+		{#if forgotHref}<Button variant="secondary" href={forgotHref}>{tb('tern.ui.resetPassword.again')}</Button>{/if}
+	{:else}
+		<Form {rules} {form} {action} bind:submitting reset={false}>
+			<input type="hidden" name="token" value={token} />
+			<Field label={tb('tern.ui.resetPassword.password')} name="password" description={minPassword ? tb('tern.ui.signUp.minPassword', { n: minPassword }) : undefined}>
+				<PasswordInput autocomplete="new-password" />
+			</Field>
+			{#if confirm}
+				<Field label={tb('tern.ui.resetPassword.confirm')} name="confirm">
+					<PasswordInput autocomplete="new-password" />
+				</Field>
+			{/if}
+			<Button type="submit" loading={submitting}>{tb('tern.ui.resetPassword.submit')}</Button>
+		</Form>
+	{/if}
+</AuthCard>

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

@@ -0,0 +1,23 @@
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    /** The token from the email's link (?token=), posted as token. */
+    token: string;
+    /** The action that calls acc.ResetPassword with the posted token and password. */
+    action?: string;
+    /** Its rules; they also set the password hint. */
+    rules?: FormField[];
+    form?: unknown;
+    /** Ask to type the password twice, posted as confirm. */
+    confirm?: boolean;
+    /** The link has been found invalid or expired: say so instead of showing the form. */
+    invalid?: boolean;
+    /** Where to ask for a new link. */
+    forgotHref?: string;
+    class?: string;
+};
+declare const ResetPassword: import("svelte").Component<Props, {}, "">;
+type ResetPassword = ReturnType<typeof ResetPassword>;
+export default ResetPassword;

package/dist/ui/Resizable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -13,7 +14,8 @@
 		second: Snippet;
 		class?: string;
 	};
-	let { size = $bindable(50), min = 15, max = 85, direction = 'horizontal', label = 'Resize', first, second, class: klass = '' }: Props = $props();
+	let { size = $bindable(50), min = 15, max = 85, direction = 'horizontal', label: labelProp, first, second, class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.resizable.label'));
 
 	const uid = $props.id();
 	let root = $state<HTMLDivElement>();

package/dist/ui/SelectMenu.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { announce } from './announce.js';
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { getField } from './field.js';
 	import { float } from './floating.js';
 	import { grouped, type Option } from './options.js';
@@ -18,7 +20,8 @@
 		onchange?: (value: string, option: Option) => void;
 	};
 	const field = getField();
-	let { options, value = $bindable(field?.value ?? null), placeholder = 'Choose…', label, name: nameProp, disabled = false, class: klass = '', onchange }: Props = $props();
+	let { options, value = $bindable(field?.value ?? null), placeholder: placeholderProp, label, name: nameProp, disabled = false, class: klass = '', onchange }: Props = $props();
+	const placeholder = $derived(placeholderProp ?? tb('tern.ui.selectMenu.placeholder'));
 	const name = $derived(nameProp ?? field?.name);
 
 	const uid = $props.id();
@@ -158,7 +161,7 @@
 	<span class="value" class:placeholder={!selected} id="{id}-value">{selected?.label ?? placeholder}</span>
 	<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 6.5l3-3 3 3M5 9.5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
 </button>
-{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+{#if name}<input type="hidden" {name} value={value ?? ''} use:announce={value} />{/if}
 <div bind:this={list} id="{id}-list" class="tern-selectmenu-list" class:open role="listbox" aria-label={label} aria-labelledby={field?.labelId} tabindex="-1" popover="manual">
 	{#if open}
 		{#each grouped(options) as g, gi (gi)}

package/dist/ui/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import { page } from '../runtime/state.svelte.js';
 	import Dialog from './Dialog.svelte';
@@ -29,7 +30,8 @@
 		children: Snippet;
 		class?: string;
 	};
-	let { groups, header, footer, collapsed = $bindable(false), label = 'Main', children, class: klass = '' }: Props = $props();
+	let { groups, header, footer, collapsed = $bindable(false), label: labelProp, children, class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.sidebar.label'));
 
 	let mobileOpen = $state(false);
 	const path = $derived(page.url?.pathname ?? '');
@@ -85,7 +87,7 @@
 		{#if footer && !collapsed}<div class="footer">{@render footer()}</div>{/if}
 	</aside>
 	<div class="mobilebar">
-		<button type="button" class="collapse" aria-label="Open navigation" aria-expanded={mobileOpen} onclick={() => (mobileOpen = true)}>
+		<button type="button" class="collapse" aria-label={tb('tern.ui.sidebar.open')} aria-expanded={mobileOpen} onclick={() => (mobileOpen = true)}>
 			<svg aria-hidden="true" viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" /></svg>
 		</button>
 		{#if header}<div class="header">{@render header()}</div>{/if}
@@ -93,7 +95,7 @@
 	<div class="main">{@render children()}</div>
 </div>
 
-<Dialog bind:open={mobileOpen} title="Navigation" side="left" class="tern-sidebar-sheet">
+<Dialog bind:open={mobileOpen} title={tb('tern.ui.sidebar.title')} side="left" class="tern-sidebar-sheet">
 	{@render nav(false)}
 	{#if footer}<div class="footer">{@render footer()}</div>{/if}
 </Dialog>

package/dist/ui/SignIn.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import type { FormField } from '../runtime/validate.js';
 	import Alert from './Alert.svelte';
@@ -9,6 +10,8 @@
 	import Input from './Input.svelte';
 	import PasswordInput from './PasswordInput.svelte';
 	import Separator from './Separator.svelte';
+	import { goto } from '../runtime/router.svelte.js';
+	import { passkeysSupported, signInWithPasskey } from '../runtime/passkeys.js';
 
 	type Props = {
 		title?: string;
@@ -19,6 +22,10 @@
 		providers?: { name: string; label: string }[];
 		/** Where plugins/oauth lives. */
 		authPath?: string;
+		/** A "Sign in with a passkey" button, for the accounts package. */
+		passkey?: boolean;
+		/** Where the accounts package mounts its passkey endpoints. */
+		passkeyPath?: string;
 		/** Where to go after signing in, a path on this site. */
 		next?: string;
 		/** Show the email and password form, which posts to action. */
@@ -28,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;
@@ -41,12 +48,14 @@
 		class?: string;
 	};
 	let {
-		title = 'Sign in',
+		title: titleProp,
 		description,
 		level = 1,
 		providers = [],
 		authPath = '/auth',
 		next,
+		passkey = false,
+		passkeyPath,
 		password = true,
 		action,
 		rules,
@@ -58,45 +67,84 @@
 		footer,
 		class: klass = ''
 	}: Props = $props();
+	const title = $derived(titleProp ?? tb('tern.ui.signIn.title'));
 
 	let submitting = $state(false);
 	const errorText = $derived(
-		!error ? null : error === 'access_denied' ? 'You cancelled the sign-in. Try again when you’re ready.' : 'Signing in didn’t work. Try again, or choose another way.'
+		!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);
+	let passkeyError = $state(false);
+	// Rendered on the server too, where passkeys can't be checked: shown
+	// once the browser says it can use them.
+	let canPasskey = $state(false);
+	$effect(() => {
+		canPasskey = passkey && passkeysSupported();
+	});
+	async function usePasskey() {
+		passkeyBusy = true;
+		passkeyError = false;
+		try {
+			const rememberMe = !!el?.querySelector<HTMLInputElement>('input[name="remember"]')?.checked;
+			await signInWithPasskey({ path: passkeyPath, remember: rememberMe });
+			await goto(next && next.startsWith('/') && !next.startsWith('//') ? next : '/', { invalidateAll: true, replaceState: true });
+		} catch (e) {
+			if (!(e as { cancelled?: boolean }).cancelled) passkeyError = true;
+		} finally {
+			passkeyBusy = false;
+		}
+	}
 	const login = (name: string) => `${authPath}/${encodeURIComponent(name)}/login${next ? `?next=${encodeURIComponent(next)}` : ''}`;
 </script>
 
-<section class="tern-auth {klass}" aria-labelledby="tern-signin-title">
+<section class="tern-auth {klass}" aria-labelledby="tern-signin-title" bind:this={el}>
 	<header>
 		<svelte:element this={`h${level}`} id="tern-signin-title">{title}</svelte:element>
 		{#if description}<p>{description}</p>{/if}
 	</header>
 	{#if errorText}<Alert tone="danger" live>{errorText}</Alert>{/if}
-	{#if providers.length}
+	{#if passkeyError}<Alert tone="danger" live>{tb('tern.ui.signIn.passkeyFailed')}</Alert>{/if}
+	{#if providers.length || canPasskey}
 		<div class="providers">
+			{#if canPasskey}
+				<Button variant="secondary" type="button" loading={passkeyBusy} onclick={usePasskey}>{tb('tern.ui.signIn.passkey')}</Button>
+			{/if}
 			{#each providers as p (p.name)}
-				<Button variant="secondary" href={login(p.name)}>Continue with {p.label}</Button>
+				<Button variant="secondary" href={login(p.name)}>{tb('tern.ui.signIn.continueWith', { provider: p.label })}</Button>
 			{/each}
 		</div>
 	{/if}
-	{#if providers.length && password}<div class="or"><Separator /><span>or</span><Separator /></div>{/if}
+	{#if (providers.length || canPasskey) && password}<div class="or"><Separator /><span>{tb('tern.ui.signIn.or')}</span><Separator /></div>{/if}
 	{#if password}
 		<Form {rules} {form} {action} bind:submitting reset={false}>
 			{#if next}<input type="hidden" name="next" value={next} />{/if}
-			<Field label="Email" name="email">
+			<Field label={tb('tern.ui.signIn.email')} name="email">
 				<Input type="email" autocomplete="username" spellcheck="false" />
 			</Field>
-			<Field label="Password" name="password">
+			<Field label={tb('tern.ui.signIn.password')} name="password">
 				<PasswordInput autocomplete="current-password" />
 			</Field>
 			<div class="row">
-				{#if remember}<Checkbox name="remember">Keep me signed in</Checkbox>{/if}
-				{#if forgotHref}<a href={forgotHref}>Forgot your password?</a>{/if}
+				{#if remember}<Checkbox name="remember">{tb('tern.ui.signIn.remember')}</Checkbox>{/if}
+				{#if forgotHref}<a href={forgotHref}>{tb('tern.ui.signIn.forgot')}</a>{/if}
 			</div>
-			<Button type="submit" loading={submitting}>Sign in</Button>
+			<Button type="submit" loading={submitting}>{tb('tern.ui.signIn.submit')}</Button>
 		</Form>
 	{/if}
-	{#if signUpHref}<p class="switch">New here? <a href={signUpHref}>Create an account</a></p>{/if}
+	{#if signUpHref}<p class="switch">{tb('tern.ui.signIn.new')} <a href={signUpHref}>{tb('tern.ui.signIn.signUp')}</a></p>{/if}
 	{#if footer}<div class="footer">{@render footer()}</div>{/if}
 </section>
 

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

@@ -12,6 +12,10 @@ type Props = {
     }[];
     /** Where plugins/oauth lives. */
     authPath?: string;
+    /** A "Sign in with a passkey" button, for the accounts package. */
+    passkey?: boolean;
+    /** Where the accounts package mounts its passkey endpoints. */
+    passkeyPath?: string;
     /** Where to go after signing in, a path on this site. */
     next?: string;
     /** Show the email and password form, which posts to action. */
@@ -21,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;