@ternkit/tern 1.5.0 → 1.6.0

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export type { ConnectionStatus, StreamOptions, SocketOptions } from './runtime/r
 export { default as Image } from './image/Image.svelte';
 export type { Picture } from './image/types.js';
 export { t, i18n, setLocale } from './runtime/i18n.svelte.js';
+export { passkeysSupported, registerPasskey, signInWithPasskey, PasskeyError, type PasskeyOptions } from './runtime/passkeys.js';
 export type { MessageKey } from './runtime/i18n.svelte.js';
 /**
  * The app's message keys. `tern gen` fills this in from src/locales, so
@@ -29,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.5.0";
+export declare const VERSION = "1.6.0";

package/dist/index.js

@@ -16,5 +16,6 @@ export { ApiError, createApi } from './runtime/api.js';
 export { stream, socket, EventStreamState, SocketState } from './runtime/realtime.svelte.js';
 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.5.0';
+export const VERSION = '1.6.0';

package/dist/runtime/builtin.d.ts

@@ -0,0 +1 @@
+export declare const builtin: Record<string, string>;

package/dist/runtime/builtin.js

@@ -0,0 +1,140 @@
+// Tern's own texts, in English: Tern UI's and the validation messages.
+// 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.error.credentials": "Wrong email or password.",
+    "tern.accounts.error.emailTaken": "An account with this email address already exists.",
+    "tern.accounts.error.invalidToken": "This link is invalid or has expired.",
+    "tern.accounts.error.passkey": "That passkey didn’t work.",
+    "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",
+    "tern.accounts.reset.text": "Hello {name},\n\nSomeone asked to reset your password. If it was you, choose a new one here within an hour:\n{link}\n\nIf it wasn’t you, ignore this email: your password stays as it is.",
+    "tern.accounts.verify.button": "Confirm my email address",
+    "tern.accounts.verify.subject": "Confirm your email address",
+    "tern.accounts.verify.text": "Hello {name},\n\nConfirm your email address by opening this link:\n{link}\n\nIf you didn’t create an account, you can ignore this email.",
+    "tern.ui.alertDialog.cancel": "Cancel",
+    "tern.ui.alertDialog.confirm": "Continue",
+    "tern.ui.barChart.total": "Total",
+    "tern.ui.breadcrumb.label": "Breadcrumb",
+    "tern.ui.calendar.nextMonth": "Next month",
+    "tern.ui.calendar.previousMonth": "Previous month",
+    "tern.ui.carousel.label": "Slides",
+    "tern.ui.carousel.next": "Next slide",
+    "tern.ui.carousel.previous": "Previous slide",
+    "tern.ui.chart.legend": "Legend",
+    "tern.ui.combobox.empty": "No results",
+    "tern.ui.combobox.searching": "Searching…",
+    "tern.ui.command.empty": "No results",
+    "tern.ui.command.label": "Commands",
+    "tern.ui.command.placeholder": "Type a command or search…",
+    "tern.ui.consent.allow": "Allow",
+    "tern.ui.consent.deny": "Deny",
+    "tern.ui.consent.notYou": "Not you?",
+    "tern.ui.consent.note": "You can take this back at any time in your account settings.",
+    "tern.ui.consent.scopes": "It will be able to:",
+    "tern.ui.consent.title": "{client} wants to access your account",
+    "tern.ui.dataTable.actions": "Actions",
+    "tern.ui.dataTable.empty": "No rows match",
+    "tern.ui.dataTable.search": "Search…",
+    "tern.ui.dataTable.searchLabel": "Search {caption}",
+    "tern.ui.dataTable.selectAll": "Select all rows on this page",
+    "tern.ui.datePicker.label": "Choose a date",
+    "tern.ui.datePicker.placeholder": "Pick a date",
+    "tern.ui.datePicker.placeholderRange": "Pick dates",
+    "tern.ui.devices.current": "This device",
+    "tern.ui.devices.description": "Where your account is signed in. Sign out any device you don’t recognize.",
+    "tern.ui.devices.lastSeen": "Last active {when}",
+    "tern.ui.devices.signOut": "Sign out",
+    "tern.ui.devices.signOutOthers": "Sign out all other devices",
+    "tern.ui.devices.title": "Signed-in devices",
+    "tern.ui.dialog.close": "Close",
+    "tern.ui.donutChart.total": "total",
+    "tern.ui.forgotPassword.back": "Back to sign in",
+    "tern.ui.forgotPassword.description": "Enter your account’s email address and we’ll send you a link to choose a new password.",
+    "tern.ui.forgotPassword.email": "Email",
+    "tern.ui.forgotPassword.sent": "If an account uses that address, a link to reset its password is on its way. Check your inbox.",
+    "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.navigationMenu.label": "Main",
+    "tern.ui.pagination.label": "Pagination",
+    "tern.ui.pagination.next": "Next ›",
+    "tern.ui.pagination.nextLabel": "Next page",
+    "tern.ui.pagination.previous": "‹ Previous",
+    "tern.ui.pagination.previousLabel": "Previous page",
+    "tern.ui.passkeys.add": "Add a passkey",
+    "tern.ui.passkeys.added": "Added {when}",
+    "tern.ui.passkeys.description": "Sign in with your fingerprint, face or screen lock instead of a password.",
+    "tern.ui.passkeys.empty": "No passkeys yet.",
+    "tern.ui.passkeys.failed": "The passkey wasn’t added. Try again.",
+    "tern.ui.passkeys.lastUsed": "last used {when}",
+    "tern.ui.passkeys.never": "never used",
+    "tern.ui.passkeys.remove": "Remove",
+    "tern.ui.passkeys.title": "Passkeys",
+    "tern.ui.passkeys.unsupported": "This browser can’t use passkeys.",
+    "tern.ui.password.show": "Show password",
+    "tern.ui.resetPassword.again": "Ask for a new link",
+    "tern.ui.resetPassword.confirm": "Confirm new password",
+    "tern.ui.resetPassword.invalid": "This link is invalid or has expired.",
+    "tern.ui.resetPassword.password": "New password",
+    "tern.ui.resetPassword.submit": "Save password",
+    "tern.ui.resetPassword.title": "Choose a new password",
+    "tern.ui.resizable.label": "Resize",
+    "tern.ui.selectMenu.placeholder": "Choose…",
+    "tern.ui.sidebar.label": "Main",
+    "tern.ui.sidebar.open": "Open navigation",
+    "tern.ui.sidebar.title": "Navigation",
+    "tern.ui.signIn.cancelled": "You cancelled the sign-in. Try again when you’re ready.",
+    "tern.ui.signIn.continueWith": "Continue with {provider}",
+    "tern.ui.signIn.email": "Email",
+    "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.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.",
+    "tern.ui.signIn.password": "Password",
+    "tern.ui.signIn.remember": "Keep me signed in",
+    "tern.ui.signIn.signUp": "Create an account",
+    "tern.ui.signIn.submit": "Sign in",
+    "tern.ui.signIn.title": "Sign in",
+    "tern.ui.signUp.agree": "I agree to the",
+    "tern.ui.signUp.confirm": "Confirm password",
+    "tern.ui.signUp.email": "Email",
+    "tern.ui.signUp.haveAccount": "Already have an account?",
+    "tern.ui.signUp.minPassword": "At least {n} characters.",
+    "tern.ui.signUp.name": "Name",
+    "tern.ui.signUp.password": "Password",
+    "tern.ui.signUp.signIn": "Sign in",
+    "tern.ui.signUp.submit": "Create account",
+    "tern.ui.signUp.terms": "terms",
+    "tern.ui.signUp.title": "Create an account",
+    "tern.ui.spinner.label": "Loading",
+    "tern.ui.table.empty": "Nothing to show",
+    "tern.ui.toaster.dismiss": "Dismiss",
+    "tern.ui.toaster.label": "Notifications",
+    "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.",
+    "tern.validate.date": "{field} must be a date.",
+    "tern.validate.datetime": "{field} must be a date and time.",
+    "tern.validate.email": "{field} must be an email address.",
+    "tern.validate.exactly": "{field} must be exactly {count}.",
+    "tern.validate.int": "{field} must be a whole number.",
+    "tern.validate.items": "Choose exactly {count} for {fieldLower}.",
+    "tern.validate.length": "{field} must be exactly {count} {n, plural, one {character} other {characters}}.",
+    "tern.validate.max": "{field} must be at most {count}.",
+    "tern.validate.maxItems": "Choose at most {count} for {fieldLower}.",
+    "tern.validate.maxLength": "{field} must be at most {count} {n, plural, one {character} other {characters}}.",
+    "tern.validate.min": "{field} must be at least {count}.",
+    "tern.validate.minItems": "Choose at least {count} for {fieldLower}.",
+    "tern.validate.minLength": "{field} must be at least {count} {n, plural, one {character} other {characters}}.",
+    "tern.validate.number": "{field} must be a number.",
+    "tern.validate.oneof": "{field} must be one of {options}.",
+    "tern.validate.or": "or",
+    "tern.validate.pattern": "{field} isn't in the expected format.",
+    "tern.validate.required": "{field} is required.",
+    "tern.validate.same": "{field} must match {otherLower}.",
+    "tern.validate.url": "{field} must be a web address starting with http:// or https://."
+};

package/dist/runtime/deferred.d.ts

@@ -30,4 +30,5 @@ export declare function revive<T>(value: T, promise: (id: number) => Promise<unk
  */
 export declare function readStreamed<P extends {
     nodes?: unknown;
+    deferred?: boolean;
 }>(res: Response): Promise<P>;

package/dist/runtime/deferred.js

@@ -76,7 +76,8 @@ export async function readStreamed(res) {
         const [first, ...rest] = (await res.text()).split('\n');
         const scope = new DeferredScope();
         const payload = JSON.parse(first);
-        payload.nodes = revive(payload.nodes, (id) => scope.promise(id));
+        if (payload.deferred)
+            payload.nodes = revive(payload.nodes, (id) => scope.promise(id));
         for (const line of rest)
             if (line.trim())
                 scope.settle(JSON.parse(line));
@@ -98,7 +99,8 @@ export async function readStreamed(res) {
     buffer = newline < 0 ? '' : buffer.slice(newline + 1);
     const scope = new DeferredScope();
     const payload = JSON.parse(first);
-    payload.nodes = revive(payload.nodes, (id) => scope.promise(id));
+    if (payload.deferred)
+        payload.nodes = revive(payload.nodes, (id) => scope.promise(id));
     void (async () => {
         try {
             for (;;) {

package/dist/runtime/i18n.svelte.d.ts

@@ -32,6 +32,12 @@ export declare function useLocaleSync(locale: string | undefined): void;
  * then to the key.
  */
 export declare function t(key: MessageKey, params?: Record<string, unknown>): string;
+/**
+ * Translates one of Tern's own texts, such as Tern UI's labels and the
+ * validation messages: the app's message for key in src/locales if it has
+ * one, else Tern's English. Their keys start with "tern.".
+ */
+export declare function tb(key: string, params?: Record<string, unknown>): string;
 /** The current locale and the ones the app supports. */
 export declare const i18n: {
     /** The current locale, such as "de", or "" if the app has no src/locales. */

package/dist/runtime/i18n.svelte.js

@@ -1,3 +1,4 @@
+import { builtin } from './builtin.js';
 import { format } from './format.js';
 class I18nState {
     locale = $state('');
@@ -78,6 +79,15 @@ export function t(key, params) {
     }
     return format(state.locale || config?.defaultLocale || 'en', message, params);
 }
+/**
+ * Translates one of Tern's own texts, such as Tern UI's labels and the
+ * validation messages: the app's message for key in src/locales if it has
+ * one, else Tern's English. Their keys start with "tern.".
+ */
+export function tb(key, params) {
+    const message = state.messages[key] ?? state.fallback[key] ?? builtin[key] ?? key;
+    return format(state.locale || config?.defaultLocale || 'en', message, params);
+}
 /** The current locale and the ones the app supports. */
 export const i18n = {
     /** The current locale, such as "de", or "" if the app has no src/locales. */

package/dist/runtime/passkeys.d.ts

@@ -0,0 +1,21 @@
+export type PasskeyOptions = {
+    /** Where the accounts package mounts its passkey endpoints (Options.PasskeyPath). */
+    path?: string;
+};
+/** A passkey ceremony that didn't finish. cancelled is true when the user closed the browser's prompt. */
+export declare class PasskeyError extends Error {
+    cancelled: boolean;
+    constructor(message: string, cancelled?: boolean);
+}
+/** Whether this browser can use passkeys. */
+export declare function passkeysSupported(): boolean;
+export declare function toBase64url(buf: ArrayBuffer | Uint8Array): string;
+export declare function fromBase64url(s: string): Uint8Array<ArrayBuffer>;
+/** Adds a passkey to the signed-in user's account. name labels it in their list; the default names the browser and system. */
+export declare function registerPasskey(options?: PasskeyOptions & {
+    name?: string;
+}): Promise<void>;
+/** Signs in with a passkey. The browser offers the user's passkeys for this site; no email is needed. */
+export declare function signInWithPasskey(options?: PasskeyOptions & {
+    remember?: boolean;
+}): Promise<void>;

package/dist/runtime/passkeys.js

@@ -0,0 +1,107 @@
+// Passkeys in the browser, for the accounts package's endpoints. Each
+// helper asks the server for options, hands them to the browser's
+// WebAuthn API, and posts the authenticator's answer back.
+import { getBase } from './base.js';
+/** A passkey ceremony that didn't finish. cancelled is true when the user closed the browser's prompt. */
+export class PasskeyError extends Error {
+    cancelled;
+    constructor(message, cancelled = false) {
+        super(message);
+        this.name = 'PasskeyError';
+        this.cancelled = cancelled;
+    }
+}
+/** Whether this browser can use passkeys. */
+export function passkeysSupported() {
+    return typeof window !== 'undefined' && typeof window.PublicKeyCredential === 'function' && !!navigator.credentials;
+}
+export function toBase64url(buf) {
+    const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf);
+    let s = '';
+    for (const b of bytes)
+        s += String.fromCharCode(b);
+    return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+export function fromBase64url(s) {
+    const b = atob(s.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - (s.length % 4)) % 4));
+    const out = new Uint8Array(new ArrayBuffer(b.length));
+    for (let i = 0; i < b.length; i++)
+        out[i] = b.charCodeAt(i);
+    return out;
+}
+const endpoint = (o, p) => getBase() + (o?.path ?? '/_tern/passkeys').replace(/\/$/, '') + p;
+async function post(url, body) {
+    const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify(body ?? {})
+    });
+    const data = (await res.json().catch(() => ({})));
+    if (!res.ok)
+        throw new PasskeyError(typeof data.message === 'string' ? data.message : `passkey request failed (${res.status})`);
+    return data;
+}
+function failed(e) {
+    if (e instanceof PasskeyError)
+        throw e;
+    const name = e?.name;
+    // NotAllowedError is the browser's answer for both "cancelled" and "timed out".
+    if (name === 'NotAllowedError' || name === 'AbortError')
+        throw new PasskeyError('cancelled', true);
+    throw new PasskeyError(e?.message ?? String(e));
+}
+/** Adds a passkey to the signed-in user's account. name labels it in their list; the default names the browser and system. */
+export async function registerPasskey(options) {
+    try {
+        const o = (await post(endpoint(options, '/register/options')));
+        const publicKey = {
+            ...o,
+            challenge: fromBase64url(o.challenge),
+            user: { ...o.user, id: fromBase64url(o.user.id) },
+            excludeCredentials: (o.excludeCredentials ?? []).map((c) => ({ type: c.type, id: fromBase64url(c.id) }))
+        };
+        const cred = (await navigator.credentials.create({ publicKey }));
+        if (!cred)
+            throw new PasskeyError('cancelled', true);
+        const r = cred.response;
+        await post(endpoint(options, '/register'), {
+            id: cred.id,
+            type: cred.type,
+            name: options?.name ?? '',
+            response: { clientDataJSON: toBase64url(r.clientDataJSON), attestationObject: toBase64url(r.attestationObject) }
+        });
+    }
+    catch (e) {
+        failed(e);
+    }
+}
+/** Signs in with a passkey. The browser offers the user's passkeys for this site; no email is needed. */
+export async function signInWithPasskey(options) {
+    try {
+        const o = (await post(endpoint(options, '/signin/options')));
+        const publicKey = {
+            ...o,
+            challenge: fromBase64url(o.challenge),
+            allowCredentials: []
+        };
+        const cred = (await navigator.credentials.get({ publicKey }));
+        if (!cred)
+            throw new PasskeyError('cancelled', true);
+        const r = cred.response;
+        await post(endpoint(options, '/signin'), {
+            id: cred.id,
+            type: cred.type,
+            remember: !!options?.remember,
+            response: {
+                clientDataJSON: toBase64url(r.clientDataJSON),
+                authenticatorData: toBase64url(r.authenticatorData),
+                signature: toBase64url(r.signature),
+                userHandle: r.userHandle ? toBase64url(r.userHandle) : ''
+            }
+        });
+    }
+    catch (e) {
+        failed(e);
+    }
+}

package/dist/runtime/router.svelte.js

@@ -56,7 +56,8 @@ export async function start(m) {
     // Deferred values stream in as inline scripts calling __tern_resolve.
     const w = window;
     const scope = new DeferredScope();
-    payload.nodes = revive(payload.nodes, (id) => scope.promise(id));
+    if (payload.deferred)
+        payload.nodes = revive(payload.nodes, (id) => scope.promise(id));
     for (const chunk of Object.values(w.__tern_d ?? {}))
         scope.settle(chunk);
     w.__tern_on = (chunk) => scope.settle(chunk);

package/dist/runtime/types.d.ts

@@ -49,6 +49,8 @@ export interface Payload {
     data?: unknown;
     form?: unknown;
     hasForm?: boolean;
+    /** Whether the nodes have deferred values' placeholders to revive. */
+    deferred?: boolean;
     /** What each node's load read, so the client knows when to rerun it. */
     uses?: (NodeUses | null)[];
     /** Nodes the server skipped because the client already has their data. */

package/dist/runtime/validate.d.ts

@@ -17,7 +17,8 @@ export type FormErrors<Name extends string = string> = Partial<Record<Name, stri
 export declare function parseFormTime(kind: 'date' | 'datetime', s: string): number | null;
 /**
  * Returns why a field's values are invalid, or "". values are its posted
- * values; other reads another field's first value, for same=.
+ * values; other reads another field's first value, for same=. Messages
+ * are Tern's texts (tern.validate.*), translated through src/locales.
  */
 export declare function checkField(f: FormField, values: string[], other?: (name: string) => string, labelOf?: (name: string) => string): string;
 /**

package/dist/runtime/validate.js

@@ -2,6 +2,7 @@
 // kit.FormAction's validate tags. The checks and messages match
 // internal/formrules in Go, which checks the same rules on the server;
 // internal/formrules/testdata/cases.json keeps the two in step.
+import { tb } from './i18n.svelte.js';
 const emailRe = /^[^\s@<>()",;:]+@[^\s@<>()",;:]+\.[^\s@<>()",;:]+$/;
 const intRe = /^[+-]?\d+$/;
 const floatRe = /^[+-]?(\d+\.?\d*|\.\d+)$/;
@@ -33,45 +34,46 @@ export function parseFormTime(kind, s) {
     }
     return null;
 }
-function joinOr(list) {
-    return list.length === 1 ? list[0] : `${list.slice(0, -1).join(', ')} or ${list[list.length - 1]}`;
+function joinOr(list, or) {
+    return list.length === 1 ? list[0] : `${list.slice(0, -1).join(', ')} ${or} ${list[list.length - 1]}`;
 }
-const bound = { min: 'at least', max: 'at most', len: 'exactly' };
 /**
  * Returns why a field's values are invalid, or "". values are its posted
- * values; other reads another field's first value, for same=.
+ * values; other reads another field's first value, for same=. Messages
+ * are Tern's texts (tern.validate.*), translated through src/locales.
  */
 export function checkField(f, values, other = () => '', labelOf = (n) => n) {
-    const msg = (m) => f.message || m;
+    const msg = (key, params = {}) => f.message || tb(`tern.validate.${key}`, { ...params, field: f.label, fieldLower: f.label.toLowerCase() });
     const list = values.filter((v) => v.trim() !== '');
     const v = values[0] ?? '';
     const empty = f.kind === 'strings' ? list.length === 0 : f.kind === 'bool' ? !truthy(v) : v.trim() === '';
     if (empty) {
         if (!f.required)
             return '';
-        return msg(f.kind === 'bool' ? `${f.label} must be checked.` : `${f.label} is required.`);
+        return msg(f.kind === 'bool' ? 'checked' : 'required');
     }
     let num = 0;
     let when = 0;
     if (f.kind === 'int') {
         if (!intRe.test(v.trim()))
-            return msg(`${f.label} must be a whole number.`);
+            return msg('int');
         num = Number(v.trim());
     }
     else if (f.kind === 'float') {
         if (!floatRe.test(v.trim()))
-            return msg(`${f.label} must be a number.`);
+            return msg('number');
         num = Number(v.trim());
     }
     else if (f.kind === 'date' || f.kind === 'datetime') {
         const t = parseFormTime(f.kind, v.trim());
         if (t === null)
-            return msg(f.kind === 'date' ? `${f.label} must be a date.` : `${f.label} must be a date and time.`);
+            return msg(f.kind === 'date' ? 'date' : 'datetime');
         when = t;
     }
     for (const r of f.rules ?? []) {
         const arg = r.arg ?? '';
         const n = Number(arg);
+        const bound = { count: arg, n };
         switch (r.name) {
             case 'min':
             case 'max':
@@ -80,26 +82,26 @@ export function checkField(f, values, other = () => '', labelOf = (n) => n) {
                 const fails = (c) => (r.name === 'len' && c !== n) || (low && c < n) || (r.name === 'max' && c > n);
                 if (f.kind === 'string') {
                     if (fails([...v].length))
-                        return msg(`${f.label} must be ${bound[r.name]} ${arg} ${n === 1 ? 'character' : 'characters'}.`);
+                        return msg({ min: 'minLength', max: 'maxLength', len: 'length' }[r.name], bound);
                 }
                 else if (f.kind === 'int' || f.kind === 'float') {
                     if (fails(num))
-                        return msg(`${f.label} must be ${bound[r.name]} ${arg}.`);
+                        return msg({ min: 'min', max: 'max', len: 'exactly' }[r.name], bound);
                 }
                 else if (f.kind === 'date' || f.kind === 'datetime') {
                     const b = parseFormTime(f.kind, arg) ?? 0;
                     if ((low && when < b) || (r.name === 'max' && when > b))
-                        return msg(`${f.label} must be on or ${low ? 'after' : 'before'} ${arg}.`);
+                        return msg(low ? 'after' : 'before', { date: arg });
                 }
                 else if (f.kind === 'strings') {
                     if (fails(list.length))
-                        return msg(`Choose ${bound[r.name]} ${arg} for ${f.label.toLowerCase()}.`);
+                        return msg({ min: 'minItems', max: 'maxItems', len: 'items' }[r.name], bound);
                 }
                 break;
             }
             case 'email':
                 if (!emailRe.test(v))
-                    return msg(`${f.label} must be an email address.`);
+                    return msg('email');
                 break;
             case 'url': {
                 let ok = false;
@@ -111,7 +113,7 @@ export function checkField(f, values, other = () => '', labelOf = (n) => n) {
                     ok = false;
                 }
                 if (!ok)
-                    return msg(`${f.label} must be a web address starting with http:// or https://.`);
+                    return msg('url');
                 break;
             }
             case 'pattern': {
@@ -120,19 +122,19 @@ export function checkField(f, values, other = () => '', labelOf = (n) => n) {
                     patterns.set(arg, (re = new RegExp(`^(?:${arg})$`, 'u')));
                 for (const s of f.kind === 'strings' ? list : [v])
                     if (!re.test(s))
-                        return msg(`${f.label} isn't in the expected format.`);
+                        return msg('pattern');
                 break;
             }
             case 'oneof': {
                 const opts = arg.split('|');
                 for (const s of f.kind === 'strings' ? list : [v])
                     if (!opts.includes(s))
-                        return msg(`${f.label} must be one of ${joinOr(opts)}.`);
+                        return msg('oneof', { options: joinOr(opts, tb('tern.validate.or')) });
                 break;
             }
             case 'same':
                 if (other(arg) !== v)
-                    return msg(`${f.label} must match ${labelOf(arg).toLowerCase()}.`);
+                    return msg('same', { otherLower: labelOf(arg).toLowerCase() });
                 break;
         }
     }

package/dist/server/index.d.ts

@@ -35,6 +35,8 @@ export interface RenderResult {
  * same payload the client receives, so the server and the client render
  * exactly the same tree and hydration matches.
  */
-export declare function createRenderer(manifest: ServerManifest): (payload: string, href: string) => string;
+export declare function createRenderer(manifest: ServerManifest): ((payload: string, href: string) => string) & {
+    raw: (payload: string, href: string) => RenderResult;
+};
 export { createEmailRenderer } from './email.js';
 export type { EmailModule, EmailResult } from './email.js';

package/dist/server/index.js

@@ -16,15 +16,18 @@ export function createRenderer(manifest) {
     const layout = (i) => manifest.layouts[i]?.component ?? Passthrough;
     configureI18n(manifest.i18n ?? null);
     setBase(manifest.base ?? '');
-    return (payloadJSON, href) => {
+    // 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);
         // Deferred values are still loading: render their pending state.
-        p.nodes = revive(p.nodes, () => new Promise(() => { }));
+        if (p.deferred)
+            p.nodes = revive(p.nodes, () => new Promise(() => { }));
         const what = plan(manifest, p);
         let components;
         switch (what.kind) {
             case 'not-a-page':
-                return JSON.stringify({ skip: true });
+                return { skip: true };
             case 'page':
                 components = [...what.layouts.map(layout), manifest.routes[what.route].page];
                 break;
@@ -40,7 +43,8 @@ export function createRenderer(manifest) {
         applyPayloadToPage(p, new URL(href), {}, what.data);
         const form = p.hasForm ? (p.form ?? null) : null;
         const out = render(Root, { props: { components, data: what.data, form } });
-        return JSON.stringify({ head: out.head, body: out.body });
+        return { head: out.head, body: out.body };
     };
+    return Object.assign((payloadJSON, href) => JSON.stringify(raw(payloadJSON, href)), { raw });
 }
 export { createEmailRenderer } from './email.js';

package/dist/ui/AccountSection.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	// The section the account settings lists share. Internal: not exported.
+	import type { Snippet } from 'svelte';
+
+	type Props = { id: string; title: string; description?: string; level?: 2 | 3 | 4; class?: string; children: Snippet };
+	let { id, title, description, level = 2, class: klass = '', children }: Props = $props();
+</script>
+
+<section class="tern-account {klass}" aria-labelledby={id}>
+	<header>
+		<svelte:element this={`h${level}`} {id}>{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	{@render children()}
+</section>
+
+<style>
+	.tern-account {
+		display: grid;
+		gap: 1rem;
+		color: var(--tern-fg);
+	}
+	header {
+		display: grid;
+		gap: 0.25rem;
+	}
+	:is(h2, h3, h4) {
+		margin: 0;
+		font-size: 1.0625rem;
+		font-weight: 650;
+	}
+	header p,
+	.tern-account :global(.tern-account-empty) {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.tern-account :global(ul) {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+	}
+	.tern-account :global(li) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+	}
+	.tern-account :global(li + li) {
+		border-top: 1px solid var(--tern-border);
+	}
+	.tern-account :global(.tern-account-text) {
+		display: grid;
+		gap: 0.15rem;
+		min-width: 0;
+	}
+	.tern-account :global(.tern-account-name) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-weight: 550;
+		overflow-wrap: anywhere;
+	}
+	.tern-account :global(.tern-account-meta) {
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+	.tern-account :global(.tern-form) {
+		display: contents;
+	}
+</style>