@ternkit/tern 1.9.0 → 1.11.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.9.0";
+export declare const VERSION = "1.11.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.9.0';
+export const VERSION = '1.11.0';

package/dist/runtime/builtin.js

@@ -8,14 +8,23 @@ export const builtin = {
     "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.alreadyMember": "They’re already in the team.",
     "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.lastOwner": "A team needs an owner. Make someone else an owner first.",
     "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.notAllowed": "Your role in this team doesn’t allow this.",
+    "tern.accounts.error.notMember": "They aren’t in this team.",
     "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.unknownRole": "Choose one of the team’s roles.",
+    "tern.accounts.error.wrongInvitee": "This invitation was sent to another email address. Sign in with that one to accept it.",
     "tern.accounts.error.wrongPassword": "That isn’t your current password.",
+    "tern.accounts.invite.button": "Accept the invitation",
+    "tern.accounts.invite.subject": "{inviter} invited you to {team}",
+    "tern.accounts.invite.text": "Hello,\n\n{inviter} invited you to join {team} as {role}. Accept the invitation within a week here:\n{link}\n\nIf you weren’t expecting it, you can ignore this email.",
     "tern.accounts.new_device.subject": "A new sign-in to your account",
     "tern.accounts.new_device.text": "Hello {name},\n\nYour account was just signed in to from a device it hadn’t been used on before: {device}, from {ip}, on {time}.\n\nIf this was you, there’s nothing to do. If it wasn’t, change your password now and sign that device out in your account’s security settings.",
     "tern.accounts.reset.button": "Choose a new password",
@@ -24,9 +33,71 @@ export const builtin = {
     "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.billing.limit": "The {plan} plan allows {max} {limit}. Upgrade to add more.",
+    "tern.ui.activity.description": "Sign-ins and changes to the account. If something wasn’t you, change your password.",
+    "tern.ui.activity.empty": "Nothing yet.",
+    "tern.ui.activity.identity.linked": "Linked {target}",
+    "tern.ui.activity.identity.unlinked": "Unlinked {target}",
+    "tern.ui.activity.member.invited": "Invited {target} as {role}",
+    "tern.ui.activity.member.joined": "{target} joined as {role}",
+    "tern.ui.activity.member.left": "{target} left the team",
+    "tern.ui.activity.member.removed": "Removed {target}",
+    "tern.ui.activity.member.role": "Changed {target} from {from} to {to}",
+    "tern.ui.activity.member.uninvited": "Cancelled the invitation for {target}",
+    "tern.ui.activity.mine.member.joined": "Joined {team} as {role}",
+    "tern.ui.activity.mine.member.left": "Left {team}",
+    "tern.ui.activity.more": "Show older",
+    "tern.ui.activity.passkey.added": "Added the passkey {target}",
+    "tern.ui.activity.passkey.removed": "Removed a passkey",
+    "tern.ui.activity.session.others_signed_out": "Signed out all other devices",
+    "tern.ui.activity.session.revoked": "Signed out a device",
+    "tern.ui.activity.team.created": "Created the team {target}",
+    "tern.ui.activity.team.deleted": "Deleted the team {target}",
+    "tern.ui.activity.team.renamed": "Renamed the team to {target}",
+    "tern.ui.activity.title": "Recent activity",
+    "tern.ui.activity.user.deleted": "Deleted the account",
+    "tern.ui.activity.user.email_changed": "Changed the email address to {target}",
+    "tern.ui.activity.user.email_verified": "Confirmed {target}",
+    "tern.ui.activity.user.password_changed": "Changed the password",
+    "tern.ui.activity.user.password_reset": "Reset the password",
+    "tern.ui.activity.user.sign_in_failed": "Failed sign-in attempt",
+    "tern.ui.activity.user.signed_in": "Signed in",
+    "tern.ui.activity.user.signed_out": "Signed out",
+    "tern.ui.activity.user.signed_up": "Created the account",
+    "tern.ui.activity.user.two_step_off": "Turned off two-step sign-in",
+    "tern.ui.activity.user.two_step_on": "Turned on two-step sign-in",
     "tern.ui.alertDialog.cancel": "Cancel",
     "tern.ui.alertDialog.confirm": "Continue",
     "tern.ui.barChart.total": "Total",
+    "tern.ui.billing.cancelAnytime": "Cancel anytime.",
+    "tern.ui.billing.cancels": "The plan ends on {date}, and won’t renew.",
+    "tern.ui.billing.changePlan": "Change plan",
+    "tern.ui.billing.choose": "Choose {plan}",
+    "tern.ui.billing.current": "Your plan",
+    "tern.ui.billing.interval": "Billing period",
+    "tern.ui.billing.manage": "Manage billing",
+    "tern.ui.billing.monthly": "Monthly",
+    "tern.ui.billing.noCard": "No card needed.",
+    "tern.ui.billing.pastDue": "The last payment failed. Update the payment method to keep the plan.",
+    "tern.ui.billing.perMonth": "per month",
+    "tern.ui.billing.perSeat": "per member",
+    "tern.ui.billing.perYear": "per year",
+    "tern.ui.billing.popular": "Popular",
+    "tern.ui.billing.renews": "Renews on {date}.",
+    "tern.ui.billing.seats": "{n, plural, one {# member} other {# members}}",
+    "tern.ui.billing.startFree": "Start for free",
+    "tern.ui.billing.startTrial": "Start free trial",
+    "tern.ui.billing.status.canceling": "Ending",
+    "tern.ui.billing.status.pastDue": "Payment failed",
+    "tern.ui.billing.status.trialing": "Trial",
+    "tern.ui.billing.title": "Plan and billing",
+    "tern.ui.billing.trial": "{days}-day free trial, no charge until it ends.",
+    "tern.ui.billing.trialEnds": "Your trial ends on {date}. Add a payment method before then to keep the plan.",
+    "tern.ui.billing.unlimitedUse": "{used}, no limit",
+    "tern.ui.billing.upgrade": "Upgrade",
+    "tern.ui.billing.used": "{used} of {max}",
+    "tern.ui.billing.yearly": "Yearly",
+    "tern.ui.billing.yearlySave": "Yearly · save {percent}%",
     "tern.ui.breadcrumb.label": "Breadcrumb",
     "tern.ui.calendar.nextMonth": "Next month",
     "tern.ui.calendar.previousMonth": "Previous month",
@@ -131,6 +202,55 @@ export const builtin = {
     "tern.ui.signUp.title": "Create an account",
     "tern.ui.spinner.label": "Loading",
     "tern.ui.table.empty": "Nothing to show",
+    "tern.ui.team.accept.description": "{inviter} invited you to join {team} as {role}.",
+    "tern.ui.team.accept.invalid": "It has expired, was cancelled, or was already accepted. Ask for a new one.",
+    "tern.ui.team.accept.invalidTitle": "This invitation doesn’t work",
+    "tern.ui.team.accept.signIn": "I already have an account",
+    "tern.ui.team.accept.signOut": "Sign out",
+    "tern.ui.team.accept.signUp": "Create an account",
+    "tern.ui.team.accept.signedOut": "Sign in or create an account with {email} to accept it.",
+    "tern.ui.team.accept.submit": "Join {team}",
+    "tern.ui.team.accept.title": "Join {team}",
+    "tern.ui.team.accept.wrongAccount": "This invitation is for {email}, and you’re signed in as {current}. Sign out, then sign in with {email}.",
+    "tern.ui.team.invite.cancel": "Cancel",
+    "tern.ui.team.invite.cancelFor": "Cancel the invitation for {email}",
+    "tern.ui.team.invite.description": "They get an email with a link that works for a week.",
+    "tern.ui.team.invite.email": "Email address",
+    "tern.ui.team.invite.expires": "expires {when}",
+    "tern.ui.team.invite.pending": "Pending invitations",
+    "tern.ui.team.invite.role": "Role",
+    "tern.ui.team.invite.send": "Send invitation",
+    "tern.ui.team.invite.sent": "Invitation sent to {email}.",
+    "tern.ui.team.invite.title": "Invite people",
+    "tern.ui.team.joined": "Joined {when}",
+    "tern.ui.team.leave": "Leave team",
+    "tern.ui.team.members.description": "Everyone in this team, and what they can do.",
+    "tern.ui.team.members.title": "Members",
+    "tern.ui.team.new.cancel": "Not now",
+    "tern.ui.team.new.description": "A team shares its data. You can invite people next.",
+    "tern.ui.team.new.name": "Team name",
+    "tern.ui.team.new.submit": "Create team",
+    "tern.ui.team.new.title": "Create a team",
+    "tern.ui.team.remove": "Remove",
+    "tern.ui.team.removeName": "Remove {name}",
+    "tern.ui.team.role.admin": "Admin",
+    "tern.ui.team.role.member": "Member",
+    "tern.ui.team.role.owner": "Owner",
+    "tern.ui.team.roleOf": "Role of {name}",
+    "tern.ui.team.save": "Save",
+    "tern.ui.team.settings.delete": "Delete this team",
+    "tern.ui.team.settings.deleteButton": "Delete team",
+    "tern.ui.team.settings.deleteConfirm": "Delete {team}?",
+    "tern.ui.team.settings.deleteHelp": "Its data and members’ access are removed for good.",
+    "tern.ui.team.settings.deleteWarning": "Everything in this team is deleted, and its members lose access. This can’t be undone.",
+    "tern.ui.team.settings.name": "Team name",
+    "tern.ui.team.settings.rename": "Save name",
+    "tern.ui.team.settings.title": "Team",
+    "tern.ui.team.settings.typeName": "Type {team} to confirm",
+    "tern.ui.team.switcher.heading": "Teams",
+    "tern.ui.team.switcher.new": "New team",
+    "tern.ui.team.switcher.none": "No team",
+    "tern.ui.team.you": "You",
     "tern.ui.toaster.dismiss": "Dismiss",
     "tern.ui.toaster.label": "Notifications",
     "tern.ui.twoStep.cantScan": "Can’t scan it?",

package/dist/runtime/router.svelte.js

@@ -84,6 +84,8 @@ export async function start(m) {
             el.remove();
     runAfter({ from: null, to: current(), type: 'enter' });
     registerServiceWorker();
+    if (payload.errors)
+        reportErrors();
     const saved = fresh ? undefined : scrollPositions[historyIndex];
     if (saved) {
         jump(saved.x, saved.y);
@@ -93,6 +95,39 @@ export async function start(m) {
     }
     listen();
 }
+/**
+ * Sends the page's uncaught errors and unhandled rejections to the server's
+ * reporter: at most ten a page, each message once.
+ */
+function reportErrors() {
+    const sent = new Set();
+    const url = `${manifest.base ?? ''}/__tern/errors`;
+    const send = (name, message, stack) => {
+        if (!message || sent.size >= 10 || sent.has(message))
+            return;
+        sent.add(message);
+        const body = JSON.stringify({ name, message, stack, url: location.href, route: page.route.id ?? '' });
+        try {
+            if (navigator.sendBeacon?.(url, new Blob([body], { type: 'application/json' })))
+                return;
+        }
+        catch {
+            // fall through to fetch
+        }
+        void fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body, keepalive: true }).catch(() => { });
+    };
+    addEventListener('error', (e) => {
+        const err = e.error;
+        send(err?.name ?? 'Error', err?.message ?? e.message, err?.stack ?? `at ${e.filename}:${e.lineno}:${e.colno}`);
+    });
+    addEventListener('unhandledrejection', (e) => {
+        const r = e.reason;
+        if (r instanceof Error)
+            send(r.name, r.message, r.stack ?? '');
+        else
+            send('UnhandledRejection', String(r), '');
+    });
+}
 function registerServiceWorker() {
     // Not in development: a caching worker would serve stale modules.
     if (!manifest.serviceWorker || import.meta.env?.DEV || !('serviceWorker' in navigator))

package/dist/runtime/types.d.ts

@@ -51,6 +51,8 @@ export interface Payload {
     hasForm?: boolean;
     /** Whether the nodes have deferred values' placeholders to revive. */
     deferred?: boolean;
+    /** The server takes the page's uncaught errors (a reporter is set). */
+    errors?: 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/ui/AcceptInvitation.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import Alert from './Alert.svelte';
+	import AuthCard from './AuthCard.svelte';
+	import Button from './Button.svelte';
+	import Form from './Form.svelte';
+
+	type Invitation = { teamName: string; email: string; role: string; invitedBy: string; expiresAt: string };
+	type Props = {
+		title?: string;
+		level?: 1 | 2 | 3;
+		/** From acc.InvitationFor, or null when the link is invalid or expired. */
+		invitation: Invitation | null;
+		/** The link's token, posted to the action. */
+		token: string;
+		/** The signed-in user's email, or null when signed out. */
+		email: string | null;
+		/** The action that calls acc.AcceptInvitation with the posted token. */
+		action?: string;
+		/** Sign-in and sign-up pages, for signed-out visitors: ?next= brings them back here. */
+		signInHref?: string;
+		signUpHref?: string;
+		/** An action that signs out, offered when the user is signed in with another address. */
+		signOutAction?: string;
+		/** Posted to signOutAction as next: this page's address, to come back and sign in with the invited one. */
+		signOutNext?: string;
+		/** The role's label, when it's one of the app's own. */
+		roleLabel?: string;
+		/** The page's form prop, for the action's errors. */
+		form?: unknown;
+		class?: string;
+	};
+	let { title, level = 1, invitation, token, email, action = '?/accept', signInHref, signUpHref, signOutAction, signOutNext, roleLabel, form, class: klass = '' }: Props = $props();
+
+	let submitting = $state(false);
+	const role = $derived(roleLabel ?? (invitation ? tb(`tern.ui.team.role.${invitation.role}`) : ''));
+	const heading = $derived(title ?? (invitation ? tb('tern.ui.team.accept.title', { team: invitation.teamName }) : tb('tern.ui.team.accept.invalidTitle')));
+	const wrongAccount = $derived(!!invitation && !!email && email.toLowerCase() !== invitation.email.toLowerCase());
+</script>
+
+<AuthCard
+	id="tern-accept-title"
+	title={heading}
+	description={invitation ? tb('tern.ui.team.accept.description', { inviter: invitation.invitedBy || invitation.teamName, team: invitation.teamName, role: role.toLowerCase() }) : tb('tern.ui.team.accept.invalid')}
+	{level}
+	class={klass}
+>
+	{#if invitation}
+		{#if !email}
+			<p class="tern-auth-note">{tb('tern.ui.team.accept.signedOut', { email: invitation.email })}</p>
+			{#if signUpHref}<div class="tern-accept-cta"><Button href={signUpHref}>{tb('tern.ui.team.accept.signUp')}</Button></div>{/if}
+			{#if signInHref}<p class="tern-auth-note"><a href={signInHref}>{tb('tern.ui.team.accept.signIn')}</a></p>{/if}
+		{:else if wrongAccount}
+			<Alert tone="warning">{tb('tern.ui.team.accept.wrongAccount', { email: invitation.email, current: email })}</Alert>
+			{#if signOutAction}
+				<form method="POST" action={signOutAction} class="tern-accept-cta">
+					{#if signOutNext}<input type="hidden" name="next" value={signOutNext} />{/if}
+					<Button type="submit" variant="secondary">{tb('tern.ui.team.accept.signOut')}</Button>
+				</form>
+			{/if}
+		{:else}
+			<Form {action} {form} bind:submitting reset={false}>
+				<input type="hidden" name="token" value={token} />
+				<Button type="submit" loading={submitting}>{tb('tern.ui.team.accept.submit', { team: invitation.teamName })}</Button>
+			</Form>
+		{/if}
+	{/if}
+</AuthCard>
+
+<style>
+	.tern-accept-cta {
+		display: grid;
+	}
+</style>

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

@@ -0,0 +1,34 @@
+type Invitation = {
+    teamName: string;
+    email: string;
+    role: string;
+    invitedBy: string;
+    expiresAt: string;
+};
+type Props = {
+    title?: string;
+    level?: 1 | 2 | 3;
+    /** From acc.InvitationFor, or null when the link is invalid or expired. */
+    invitation: Invitation | null;
+    /** The link's token, posted to the action. */
+    token: string;
+    /** The signed-in user's email, or null when signed out. */
+    email: string | null;
+    /** The action that calls acc.AcceptInvitation with the posted token. */
+    action?: string;
+    /** Sign-in and sign-up pages, for signed-out visitors: ?next= brings them back here. */
+    signInHref?: string;
+    signUpHref?: string;
+    /** An action that signs out, offered when the user is signed in with another address. */
+    signOutAction?: string;
+    /** Posted to signOutAction as next: this page's address, to come back and sign in with the invited one. */
+    signOutNext?: string;
+    /** The role's label, when it's one of the app's own. */
+    roleLabel?: string;
+    /** The page's form prop, for the action's errors. */
+    form?: unknown;
+    class?: string;
+};
+declare const AcceptInvitation: import("svelte").Component<Props, {}, "">;
+type AcceptInvitation = ReturnType<typeof AcceptInvitation>;
+export default AcceptInvitation;

package/dist/ui/ActivityLog.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import AccountSection from './AccountSection.svelte';
+	import Button from './Button.svelte';
+	import { when } from './accountDates.js';
+
+	type Entry = { id: number; at: string; actor: string; action: string; target: string; ip: string; device: string; data?: Record<string, string> | null };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Activity or acc.TeamActivity: the newest first. */
+		entries: Entry[];
+		/** Shows who did each thing: for a team's log. */
+		showActor?: boolean;
+		/** A link to the next page, such as `?before=${entries.at(-1).id}`; shown when there may be more. */
+		moreHref?: string;
+		/** Words for actions of the app's own, by action: { "project.deleted": "Deleted the project {target}" }. */
+		labels?: Record<string, string>;
+		class?: string;
+	};
+	let { title, description, level = 2, entries, showActor = false, moreHref, labels = {}, class: klass = '' }: Props = $props();
+
+	// The built-in actions are worded in tern.ui.activity.<action>; others
+	// come from labels, or show as they are.
+	function describe(e: Entry): string {
+		const params = { target: e.target, ...e.data };
+		const own = labels[e.action];
+		if (own) return own.replace(/\{(\w+)\}/g, (m, k: string) => (k in params ? String((params as Record<string, string>)[k]) : m));
+		// The user's own log words some actions as theirs: "Joined Acme".
+		if (!showActor) {
+			const mine = `tern.ui.activity.mine.${e.action}`;
+			const text = tb(mine, params);
+			if (text !== mine) return text;
+		}
+		const key = `tern.ui.activity.${e.action}`;
+		const text = tb(key, params);
+		return text === key ? e.action : text;
+	}
+	const failed = (e: Entry) => e.action === 'user.sign_in_failed';
+</script>
+
+<AccountSection id="tern-activity-title" title={title ?? tb('tern.ui.activity.title')} description={description ?? tb('tern.ui.activity.description')} {level} class={klass}>
+	{#if entries.length}
+		<ul>
+			{#each entries as e (e.id)}
+				<li class:tern-activity-failed={failed(e)}>
+					<div class="tern-account-text">
+						<span class="tern-account-name">{describe(e)}</span>
+						<span class="tern-account-meta">
+							{#if showActor && e.actor}{e.actor}{' · '}{/if}<time datetime={e.at}>{when(e.at)}</time>{e.device ? ` · ${e.device}` : ''}{e.ip ? ` · ${e.ip}` : ''}
+						</span>
+					</div>
+				</li>
+			{/each}
+		</ul>
+		{#if moreHref}<div><Button href={moreHref} variant="secondary" size="sm">{tb('tern.ui.activity.more')}</Button></div>{/if}
+	{:else}
+		<p class="tern-account-empty">{tb('tern.ui.activity.empty')}</p>
+	{/if}
+</AccountSection>
+
+<style>
+	.tern-activity-failed .tern-account-name {
+		color: var(--tern-danger);
+	}
+</style>

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

@@ -0,0 +1,27 @@
+type Entry = {
+    id: number;
+    at: string;
+    actor: string;
+    action: string;
+    target: string;
+    ip: string;
+    device: string;
+    data?: Record<string, string> | null;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Activity or acc.TeamActivity: the newest first. */
+    entries: Entry[];
+    /** Shows who did each thing: for a team's log. */
+    showActor?: boolean;
+    /** A link to the next page, such as `?before=${entries.at(-1).id}`; shown when there may be more. */
+    moreHref?: string;
+    /** Words for actions of the app's own, by action: { "project.deleted": "Deleted the project {target}" }. */
+    labels?: Record<string, string>;
+    class?: string;
+};
+declare const ActivityLog: import("svelte").Component<Props, {}, "">;
+type ActivityLog = ReturnType<typeof ActivityLog>;
+export default ActivityLog;

package/dist/ui/AuthCard.svelte

@@ -43,11 +43,12 @@
 		color: var(--tern-muted);
 		font-size: 0.875rem;
 	}
-	.tern-auth :global(a) {
+	/* Links in the text, not link buttons, which keep their own colors. */
+	.tern-auth :global(a:not(.tern-btn)) {
 		color: var(--tern-accent);
 		font-weight: 550;
 	}
-	.tern-auth :global(a:focus-visible) {
+	.tern-auth :global(a:not(.tern-btn):focus-visible) {
 		outline: 2px solid var(--tern-ring);
 		outline-offset: 2px;
 		border-radius: 2px;

package/dist/ui/BillingSettings.svelte

@@ -0,0 +1,120 @@
+<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 Form from './Form.svelte';
+	import Progress from './Progress.svelte';
+	import { day, money, per, type BillingPlan, type BillingSubscription } from './billing.js';
+
+	type Usage = { limit: string; label: string; used: number };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** The plan that applies, from b.Current. */
+		plan: BillingPlan;
+		/** The subscription, from b.Current; null for owners who never subscribed. */
+		subscription: BillingSubscription | null;
+		/** What's used of the plan's limits: [{ limit: "projects", label: "Projects", used: 3 }]. */
+		usage?: Usage[];
+		/** The action that calls b.Portal and redirects to it. */
+		portalAction?: string;
+		/** The pricing page, to change plans. */
+		pricingHref?: string;
+		/** The page's form prop, for the portal action's errors. */
+		form?: unknown;
+		class?: string;
+	};
+	let { title, description, level = 2, plan, subscription: s, usage = [], portalAction, pricingHref, form, class: klass = '' }: Props = $props();
+
+	const active = $derived(!!s && ['active', 'trialing', 'past_due'].includes(s.status));
+	const amount = $derived(active && s ? plan.amounts?.[s.interval] : undefined);
+	const message = $derived((form as { message?: string } | null)?.message);
+	// What happens next, in a sentence.
+	const next = $derived.by(() => {
+		if (!s || !active) return '';
+		if (s.status === 'trialing' && s.trialEnd) return tb('tern.ui.billing.trialEnds', { date: day(s.trialEnd) });
+		if (s.status === 'past_due') return tb('tern.ui.billing.pastDue');
+		if (s.cancelAtPeriodEnd) return tb('tern.ui.billing.cancels', { date: day(s.currentPeriodEnd) });
+		return tb('tern.ui.billing.renews', { date: day(s.currentPeriodEnd) });
+	});
+</script>
+
+<AccountSection id="tern-billing-title" title={title ?? tb('tern.ui.billing.title')} {description} {level} class={klass}>
+	<div class="tern-billing-plan">
+		<div class="tern-account-text">
+			<span class="tern-account-name">
+				{plan.name}
+				{#if s?.status === 'trialing'}<Badge tone="accent">{tb('tern.ui.billing.status.trialing')}</Badge>
+				{:else if s?.status === 'past_due'}<Badge tone="danger">{tb('tern.ui.billing.status.pastDue')}</Badge>
+				{:else if active && s?.cancelAtPeriodEnd}<Badge tone="warning">{tb('tern.ui.billing.status.canceling')}</Badge>{/if}
+			</span>
+			<span class="tern-account-meta">
+				{#if amount !== undefined && s}{money(amount * (plan.perSeat ? s.seats : 1), plan.currency)} {per(s.interval)}{plan.perSeat ? ` · ${tb('tern.ui.billing.seats', { n: s.seats })}` : ''}{:else}{tb('tern.ui.billing.noCard')}{/if}
+			</span>
+		</div>
+		<div class="tern-billing-actions">
+			{#if pricingHref}<Button href={pricingHref} variant={active ? 'ghost' : 'primary'} size="sm">{active ? tb('tern.ui.billing.changePlan') : tb('tern.ui.billing.upgrade')}</Button>{/if}
+			{#if portalAction && s}
+				<Form action={portalAction} reset={false}>
+					<Button type="submit" variant="secondary" size="sm">{tb('tern.ui.billing.manage')}</Button>
+				</Form>
+			{/if}
+		</div>
+	</div>
+	{#if next}<Alert tone={s?.status === 'past_due' ? 'danger' : 'info'}>{next}</Alert>{/if}
+	{#if message}<Alert tone="danger" live>{message}</Alert>{/if}
+	{#if usage.length}
+		<div class="tern-billing-usage">
+			{#each usage as u (u.limit)}
+				{@const max = plan.limits?.[u.limit]}
+				<div class="tern-billing-meter">
+					<div class="tern-billing-meter-head">
+						<span>{u.label}</span>
+						<span class="tern-account-meta">{max === undefined ? tb('tern.ui.billing.unlimitedUse', { used: u.used }) : tb('tern.ui.billing.used', { used: u.used, max })}</span>
+					</div>
+					{#if max !== undefined}<Progress value={Math.min(u.used, max)} max={Math.max(max, 1)} label={u.label} />{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</AccountSection>
+
+<style>
+	.tern-billing-plan {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		flex-wrap: wrap;
+		padding: 1rem;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius);
+		background: var(--tern-surface);
+	}
+	.tern-billing-plan .tern-account-name {
+		font-size: 1.0625rem;
+	}
+	.tern-billing-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.tern-billing-usage {
+		display: grid;
+		gap: 1rem;
+	}
+	.tern-billing-meter {
+		display: grid;
+		gap: 0.4rem;
+	}
+	.tern-billing-meter-head {
+		display: flex;
+		justify-content: space-between;
+		gap: 1rem;
+		font-size: 0.875rem;
+		font-weight: 550;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import { type BillingPlan, type BillingSubscription } from './billing.js';
+type Usage = {
+    limit: string;
+    label: string;
+    used: number;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** The plan that applies, from b.Current. */
+    plan: BillingPlan;
+    /** The subscription, from b.Current; null for owners who never subscribed. */
+    subscription: BillingSubscription | null;
+    /** What's used of the plan's limits: [{ limit: "projects", label: "Projects", used: 3 }]. */
+    usage?: Usage[];
+    /** The action that calls b.Portal and redirects to it. */
+    portalAction?: string;
+    /** The pricing page, to change plans. */
+    pricingHref?: string;
+    /** The page's form prop, for the portal action's errors. */
+    form?: unknown;
+    class?: string;
+};
+declare const BillingSettings: import("svelte").Component<Props, {}, "">;
+type BillingSettings = ReturnType<typeof BillingSettings>;
+export default BillingSettings;

package/dist/ui/NewTeam.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.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';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		/** The action that calls acc.CreateTeam with the posted name. */
+		action?: string;
+		/** The page's form prop, for the action's errors. */
+		form?: unknown;
+		/** A link back, such as to the dashboard, for users who already have a team. */
+		cancelHref?: string;
+		class?: string;
+	};
+	let { title, description, level = 1, action = '?/create', form, cancelHref, class: klass = '' }: Props = $props();
+	let submitting = $state(false);
+</script>
+
+<AuthCard id="tern-new-team-title" title={title ?? tb('tern.ui.team.new.title')} description={description ?? tb('tern.ui.team.new.description')} {level} class={klass}>
+	<Form {action} {form} bind:submitting reset={false}>
+		<Field label={tb('tern.ui.team.new.name')} name="name"><Input required maxlength={100} autocomplete="organization" /></Field>
+		<Button type="submit" loading={submitting}>{tb('tern.ui.team.new.submit')}</Button>
+	</Form>
+	{#if cancelHref}<p class="tern-auth-note"><a href={cancelHref}>{tb('tern.ui.team.new.cancel')}</a></p>{/if}
+</AuthCard>

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

@@ -0,0 +1,15 @@
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    /** The action that calls acc.CreateTeam with the posted name. */
+    action?: string;
+    /** The page's form prop, for the action's errors. */
+    form?: unknown;
+    /** A link back, such as to the dashboard, for users who already have a team. */
+    cancelHref?: string;
+    class?: string;
+};
+declare const NewTeam: import("svelte").Component<Props, {}, "">;
+type NewTeam = ReturnType<typeof NewTeam>;
+export default NewTeam;