@ternkit/tern 1.5.0 → 1.7.0

package/dist/ui/SignUp.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 Button from './Button.svelte';
@@ -26,7 +27,8 @@
 		footer?: Snippet;
 		class?: string;
 	};
-	let { title = 'Create an account', description, level = 1, action, rules, form, name = true, confirm = false, termsHref, signInHref, footer, class: klass = '' }: Props = $props();
+	let { title: titleProp, description, level = 1, action, rules, form, name = true, confirm = false, termsHref, signInHref, footer, class: klass = '' }: Props = $props();
+	const title = $derived(titleProp ?? tb('tern.ui.signUp.title'));
 
 	let submitting = $state(false);
 	const minPassword = $derived(rules?.find((f) => f.name === 'password')?.rules?.find((r) => r.name === 'min')?.arg);
@@ -39,21 +41,21 @@
 	</header>
 	<Form {rules} {form} {action} bind:submitting reset={false}>
 		{#if name}
-			<Field label="Name" name="name"><Input autocomplete="name" /></Field>
+			<Field label={tb('tern.ui.signUp.name')} name="name"><Input autocomplete="name" /></Field>
 		{/if}
-		<Field label="Email" name="email"><Input type="email" autocomplete="email" spellcheck="false" /></Field>
-		<Field label="Password" name="password" description={minPassword ? `At least ${minPassword} characters.` : undefined}>
+		<Field label={tb('tern.ui.signUp.email')} name="email"><Input type="email" autocomplete="email" spellcheck="false" /></Field>
+		<Field label={tb('tern.ui.signUp.password')} name="password" description={minPassword ? tb('tern.ui.signUp.minPassword', { n: minPassword }) : undefined}>
 			<PasswordInput autocomplete="new-password" />
 		</Field>
 		{#if confirm}
-			<Field label="Confirm password" name="confirm"><PasswordInput autocomplete="new-password" /></Field>
+			<Field label={tb('tern.ui.signUp.confirm')} name="confirm"><PasswordInput autocomplete="new-password" /></Field>
 		{/if}
 		{#if termsHref}
-			<Checkbox name="terms">I agree to the <a href={termsHref}>terms</a></Checkbox>
+			<Checkbox name="terms">{tb('tern.ui.signUp.agree')} <a href={termsHref}>{tb('tern.ui.signUp.terms')}</a></Checkbox>
 		{/if}
-		<Button type="submit" loading={submitting}>Create account</Button>
+		<Button type="submit" loading={submitting}>{tb('tern.ui.signUp.submit')}</Button>
 	</Form>
-	{#if signInHref}<p class="switch">Already have an account? <a href={signInHref}>Sign in</a></p>{/if}
+	{#if signInHref}<p class="switch">{tb('tern.ui.signUp.haveAccount')} <a href={signInHref}>{tb('tern.ui.signUp.signIn')}</a></p>{/if}
 	{#if footer}<div class="footer">{@render footer()}</div>{/if}
 </section>
 

package/dist/ui/Slider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import { getField } from './field.js';
 
 	type Props = {
@@ -88,7 +89,7 @@
 	}
 </script>
 
-<div class="tern-slider {klass}" class:disabled={off}>
+<div class="tern-slider {klass}" class:disabled={off} use:announce={value}>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		bind:this={track}

package/dist/ui/Spinner.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	type Props = { label?: string; size?: string; class?: string };
-	let { label = 'Loading', size = '1.25rem', class: klass = '' }: Props = $props();
+	let { label: labelProp, size = '1.25rem', class: klass = '' }: Props = $props();
+	const label = $derived(labelProp ?? tb('tern.ui.spinner.label'));
 </script>
 
 <span class="tern-spinner {klass}" role="status" style:--size={size}>

package/dist/ui/Switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -32,7 +33,7 @@
 		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 		<span class="label" id="tern-switch-{uid}" onclick={() => !disabled && (checked = !checked)}>{@render children()}</span>
 	{/if}
-	{#if name}<input type="hidden" {name} value={checked ? 'on' : 'off'} />{/if}
+	{#if name}<input type="hidden" {name} value={checked ? 'on' : 'off'} use:announce={checked} />{/if}
 </span>
 
 <style>

package/dist/ui/Table.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="Row">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import type { Snippet } from 'svelte';
 	import type { Column } from './table.js';
 
@@ -15,7 +16,8 @@
 		empty?: string;
 		class?: string;
 	};
-	let { columns, rows, caption, hideCaption = false, key = (r) => JSON.stringify(r), empty = 'Nothing to show', class: klass = '' }: Props = $props();
+	let { columns, rows, caption, hideCaption = false, key = (r) => JSON.stringify(r), empty: emptyProp, class: klass = '' }: Props = $props();
+	const empty = $derived(emptyProp ?? tb('tern.ui.table.empty'));
 </script>
 
 <!-- A semantic table, with a caption, column headers and numeric alignment. -->

package/dist/ui/Toaster.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
 	import { dismiss, toasts, type Toast } from './toast.svelte.js';
 
 	type Props = { position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' };
@@ -36,14 +37,14 @@
 				<p class="message">{t.message}</p>
 				{#if t.description}<p class="description">{t.description}</p>{/if}
 			</div>
-			<button type="button" aria-label="Dismiss" onclick={() => dismiss(t.id)}>
+			<button type="button" aria-label={tb('tern.ui.toaster.dismiss')} onclick={() => dismiss(t.id)}>
 				<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
 			</button>
 		</li>
 	{/each}
 {/snippet}
 
-<section class="tern-toaster {position}" aria-label="Notifications">
+<section class="tern-toaster {position}" aria-label={tb('tern.ui.toaster.label')}>
 	<!-- Errors are announced at once; the rest when the reader is idle. -->
 	<ol aria-live="assertive" aria-relevant="additions">{@render list(urgent)}</ol>
 	<ol aria-live="polite" aria-relevant="additions">{@render list(polite)}</ol>

package/dist/ui/Toggle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -18,6 +19,7 @@
 </script>
 
 <button
+	use:announce={pressed}
 	type="button"
 	class="tern-toggle {variant} {size} {klass}"
 	aria-pressed={pressed}

package/dist/ui/ToggleGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { announce } from './announce.js';
 	import type { Snippet } from 'svelte';
 	import { getField } from './field.js';
 
@@ -58,6 +59,7 @@
 </script>
 
 <div
+	use:announce={value}
 	class="tern-toggle-group {size} {klass}"
 	role={type === 'single' ? 'radiogroup' : 'group'}
 	aria-label={field ? undefined : label}

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/accountDates.d.ts

@@ -0,0 +1 @@
+export declare function when(iso: string | null | undefined): string;

package/dist/ui/accountDates.js

@@ -0,0 +1,15 @@
+// Dates on the account screens, in the user's locale.
+import { i18n } from '../runtime/i18n.svelte.js';
+export function when(iso) {
+    if (!iso)
+        return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    try {
+        return new Intl.DateTimeFormat(i18n.locale || undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(d);
+    }
+    catch {
+        return d.toISOString().slice(0, 16).replace('T', ' ');
+    }
+}

package/dist/ui/announce.d.ts

@@ -0,0 +1,4 @@
+/** A Svelte action: use:announce={value} fires input when value changes. */
+export declare function announce(node: HTMLElement, _value: unknown): {
+    update(): void;
+};

package/dist/ui/announce.js

@@ -0,0 +1,14 @@
+// Controls that post through hidden inputs (Combobox, SelectMenu,
+// DatePicker, Slider, …) don't fire input events as the user changes
+// them. announce does: on the element it's on, after each change of its
+// parameter, so a Form checks the field as the user changes it.
+/** A Svelte action: use:announce={value} fires input when value changes. */
+export function announce(node, _value) {
+    return {
+        update() {
+            // After Svelte has written the new value to the DOM, which it does
+            // after calling update, so the form reads what the user chose.
+            queueMicrotask(() => node.dispatchEvent(new Event('input', { bubbles: true })));
+        }
+    };
+}

package/dist/ui/index.d.ts

@@ -51,6 +51,13 @@ export { default as Sheet } from './Sheet.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SignIn } from './SignIn.svelte';
 export { default as SignUp } from './SignUp.svelte';
+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

@@ -54,6 +54,13 @@ export { default as Sheet } from './Sheet.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SignIn } from './SignIn.svelte';
 export { default as SignUp } from './SignUp.svelte';
+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/vite/native.js

@@ -58,11 +58,28 @@ export function nativePlugin(getRoot, entry) {
             try {
                 const ast = parse(code, { ecmaVersion: 'latest', sourceType: 'module' });
                 const imports = {};
+                const sources = [];
                 for (const node of ast.body) {
-                    const source = node.type === 'ImportDeclaration' || node.type === 'ExportAllDeclaration' || (node.type === 'ExportNamedDeclaration' && node.source)
-                        ? node.source.value
-                        : null;
-                    if (source === null || source in imports)
+                    if (node.type === 'ImportDeclaration' || node.type === 'ExportAllDeclaration' || (node.type === 'ExportNamedDeclaration' && node.source)) {
+                        sources.push(node.source.value);
+                    }
+                }
+                // import('./x') with a literal resolves like a static import.
+                const walk = (n) => {
+                    if (!n || typeof n !== 'object')
+                        return;
+                    if (Array.isArray(n))
+                        return n.forEach(walk);
+                    const node = n;
+                    if (node.type === 'ImportExpression' && node.source?.type === 'Literal' && typeof node.source.value === 'string')
+                        sources.push(node.source.value);
+                    for (const v of Object.values(node))
+                        if (v && typeof v === 'object')
+                            walk(v);
+                };
+                walk(ast.body);
+                for (const source of sources) {
+                    if (source in imports)
                         continue;
                     const resolved = await this.resolve(source, id, { ssr: true });
                     const target = resolved && !resolved.external && !resolved.id.startsWith('\0') ? resolved.id : null;

package/package.json

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