@ternkit/tern 1.10.0 → 1.11.0

package/dist/ui/PricingTable.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { tb } from '../runtime/i18n.svelte.js';
+	import Alert from './Alert.svelte';
+	import Badge from './Badge.svelte';
+	import Button from './Button.svelte';
+	import Form from './Form.svelte';
+	import ToggleGroup from './ToggleGroup.svelte';
+	import { money, per, type BillingPlan, type Interval } from './billing.js';
+
+	type Props = {
+		/** From b.Plans(). */
+		plans: BillingPlan[];
+		/** The plan the owner is on, to mark it and not offer it again. */
+		current?: string;
+		/** The action that calls b.Checkout with the posted plan and interval. Without it, the buttons link to href. */
+		action?: string;
+		/** For visitors who aren't signed in: where the buttons go, such as "/signup". */
+		href?: string;
+		/** Whether plans' trials apply: Checkout gives them to owners who never subscribed. */
+		trial?: boolean;
+		/** The interval shown first. */
+		interval?: Interval;
+		/** Words for the plans' limits, by name: { projects: "{n} projects" }. Without one, a limit isn't listed. */
+		limitLabels?: Record<string, string>;
+		/** The page's form prop, for the action's errors. */
+		form?: unknown;
+		class?: string;
+	};
+	let { plans, current, action, href, trial = true, interval = $bindable('month'), limitLabels = {}, form, class: klass = '' }: Props = $props();
+
+	// The toggle's value: clicking the chosen interval again would clear
+	// it, so a cleared one goes back to the interval shown.
+	let picked = $state<string | null>(untrack(() => interval));
+	$effect.pre(() => {
+		if (picked === null) picked = interval;
+		else if (picked !== interval) interval = picked as Interval;
+	});
+	const hasYearly = $derived(plans.some((p) => p.intervals.includes('year')));
+	const hasMonthly = $derived(plans.some((p) => p.intervals.includes('month')));
+	const message = $derived((form as { message?: string } | null)?.message);
+
+	// The interval a plan shows: the chosen one if it has it, else its own.
+	const shown = (p: BillingPlan): string | null => (p.intervals.includes(interval) ? interval : (p.intervals[0] ?? null));
+	// How much a year's price saves over twelve months.
+	function saving(p: BillingPlan): number {
+		const m = p.amounts?.month, y = p.amounts?.year;
+		return m && y && y < m * 12 ? Math.round((1 - y / (m * 12)) * 100) : 0;
+	}
+	const most = $derived(Math.max(0, ...plans.map(saving)));
+	function limits(p: BillingPlan): string[] {
+		return Object.entries(p.limits ?? {}).flatMap(([k, n]) => {
+			const label = limitLabels[k];
+			return label ? [label.replace('{n}', String(n))] : [];
+		});
+	}
+</script>
+
+<div class="tern-pricing {klass}">
+	{#if hasYearly && hasMonthly}
+		<div class="tern-pricing-toggle">
+			<ToggleGroup
+				bind:value={picked}
+				label={tb('tern.ui.billing.interval')}
+				options={[
+					{ value: 'month', label: tb('tern.ui.billing.monthly') },
+					{ value: 'year', label: most ? tb('tern.ui.billing.yearlySave', { percent: most }) : tb('tern.ui.billing.yearly') }
+				]}
+			/>
+		</div>
+	{/if}
+	{#if message}<Alert tone="danger" live>{message}</Alert>{/if}
+	<ul class="tern-pricing-plans">
+		{#each plans as p (p.id)}
+			{@const iv = shown(p)}
+			{@const amount = iv ? p.amounts?.[iv] : 0}
+			<li class="tern-pricing-plan" class:highlight={p.highlight}>
+				<header>
+					<h3>{p.name}{#if p.highlight}<Badge tone="accent">{tb('tern.ui.billing.popular')}</Badge>{/if}</h3>
+					{#if p.description}<p>{p.description}</p>{/if}
+				</header>
+				<p class="tern-pricing-price">
+					{#if !p.paid}
+						<span class="amount">{money(0, p.currency)}</span>
+					{:else if amount !== undefined && iv}
+						<span class="amount">{money(amount, p.currency)}</span>
+						<span class="per">{per(iv)}{p.perSeat ? ` · ${tb('tern.ui.billing.perSeat')}` : ''}</span>
+					{/if}
+				</p>
+				<!-- A note on every plan keeps their buttons in line. -->
+				<p class="tern-pricing-note">{p.trialDays && trial ? tb('tern.ui.billing.trial', { days: p.trialDays }) : !p.paid ? tb('tern.ui.billing.noCard') : tb('tern.ui.billing.cancelAnytime')}</p>
+				<div class="tern-pricing-cta">
+					{#if current === p.id}
+						<Button variant="secondary" disabled>{tb('tern.ui.billing.current')}</Button>
+					{:else if !p.paid}
+						{#if href}<Button href={href} variant="secondary">{tb('tern.ui.billing.startFree')}</Button>{/if}
+					{:else if action && iv}
+						<Form {action} reset={false}>
+							<input type="hidden" name="plan" value={p.id} />
+							<input type="hidden" name="interval" value={iv} />
+							<Button type="submit" variant={p.highlight ? 'primary' : 'secondary'}>{p.trialDays && trial ? tb('tern.ui.billing.startTrial') : tb('tern.ui.billing.choose', { plan: p.name })}</Button>
+						</Form>
+					{:else if href}
+						<Button href={href} variant={p.highlight ? 'primary' : 'secondary'}>{p.trialDays ? tb('tern.ui.billing.startTrial') : tb('tern.ui.billing.choose', { plan: p.name })}</Button>
+					{/if}
+				</div>
+				{#if limits(p).length || p.features?.length}
+					<ul class="tern-pricing-features">
+						{#each [...limits(p), ...(p.features ?? [])] as f (f)}
+							<li>
+								<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M3.5 8.5l3 3 6-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
+								{f}
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.tern-pricing {
+		display: grid;
+		gap: 1.5rem;
+		color: var(--tern-fg);
+	}
+	.tern-pricing-toggle {
+		display: flex;
+		justify-content: center;
+	}
+	.tern-pricing-plans {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+		gap: 1rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.tern-pricing-plan {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding: 1.5rem;
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+	}
+	.tern-pricing-plan.highlight {
+		border-color: var(--tern-accent);
+		box-shadow: 0 0 0 1px var(--tern-accent), var(--tern-shadow);
+	}
+	header {
+		display: grid;
+		gap: 0.35rem;
+	}
+	h3 {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		/* As tall with a badge as without. */
+		min-height: 1.75rem;
+		margin: 0;
+		font-size: 1.125rem;
+		font-weight: 650;
+	}
+	header p,
+	.tern-pricing-note {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.tern-pricing-price {
+		display: flex;
+		align-items: baseline;
+		gap: 0.35rem;
+		flex-wrap: wrap;
+		margin: 0;
+		min-height: 2.75rem;
+	}
+	.amount {
+		font-size: 2.25rem;
+		font-weight: 700;
+		letter-spacing: -0.03em;
+		line-height: 1.2;
+		font-variant-numeric: tabular-nums;
+	}
+	.per {
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.tern-pricing-cta {
+		display: grid;
+	}
+	.tern-pricing-cta :global(.tern-form) {
+		display: grid;
+	}
+	.tern-pricing-features {
+		display: grid;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 1rem 0 0;
+		list-style: none;
+		border-top: 1px solid var(--tern-border);
+		font-size: 0.875rem;
+	}
+	.tern-pricing-features li {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+	.tern-pricing-features svg {
+		flex-shrink: 0;
+		margin-top: 0.125rem;
+		color: var(--tern-accent);
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import { type BillingPlan, type Interval } from './billing.js';
+type Props = {
+    /** From b.Plans(). */
+    plans: BillingPlan[];
+    /** The plan the owner is on, to mark it and not offer it again. */
+    current?: string;
+    /** The action that calls b.Checkout with the posted plan and interval. Without it, the buttons link to href. */
+    action?: string;
+    /** For visitors who aren't signed in: where the buttons go, such as "/signup". */
+    href?: string;
+    /** Whether plans' trials apply: Checkout gives them to owners who never subscribed. */
+    trial?: boolean;
+    /** The interval shown first. */
+    interval?: Interval;
+    /** Words for the plans' limits, by name: { projects: "{n} projects" }. Without one, a limit isn't listed. */
+    limitLabels?: Record<string, string>;
+    /** The page's form prop, for the action's errors. */
+    form?: unknown;
+    class?: string;
+};
+declare const PricingTable: import("svelte").Component<Props, {}, "interval">;
+type PricingTable = ReturnType<typeof PricingTable>;
+export default PricingTable;

package/dist/ui/TeamInvitations.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import AccountSection from './AccountSection.svelte';
+	import Alert from './Alert.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import Select from './Select.svelte';
+	import { when } from './accountDates.js';
+	import { builtinRoles, formFor, grantable, roleLabel, type RoleOption } from './teams.js';
+
+	type Invitation = { id: string; email: string; role: string; invitedBy: string; createdAt: string; expiresAt: string };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Invitations. */
+		invitations: Invitation[];
+		/** The signed-in user's role in the team: admins can't invite owners. */
+		role: string;
+		/** The roles to offer, with labels. The default is owner, admin and member. */
+		roles?: RoleOption[];
+		/** The role chosen at first. */
+		defaultRole?: string;
+		/** The action that calls acc.Invite with the posted email and role. */
+		inviteAction: string;
+		/** The action that calls acc.CancelInvitation with the posted id. */
+		cancelAction?: string;
+		/** The page's form prop, for the invite form's errors. */
+		form?: unknown;
+		class?: string;
+	};
+	let { title, description, level = 2, invitations, role, roles, defaultRole = 'member', inviteAction, cancelAction, form, class: klass = '' }: Props = $props();
+
+	const all = $derived(roles ?? builtinRoles());
+	const offer = $derived(grantable(all, role));
+	const mine = $derived(formFor(form, 'invitations'));
+	const sent = $derived((form as { invited?: string } | null)?.invited);
+</script>
+
+<AccountSection id="tern-invitations-title" title={title ?? tb('tern.ui.team.invite.title')} description={description ?? tb('tern.ui.team.invite.description')} {level} class={klass}>
+	<div class="tern-invite">
+		<Form action={inviteAction} form={mine}>
+			<input type="hidden" name="tern_form" value="invitations" />
+			<Field label={tb('tern.ui.team.invite.email')} name="email"><Input type="email" autocomplete="off" spellcheck="false" required /></Field>
+			<Field label={tb('tern.ui.team.invite.role')} name="role"><Select options={offer} value={defaultRole} /></Field>
+			<div class="tern-invite-submit"><Button type="submit">{tb('tern.ui.team.invite.send')}</Button></div>
+		</Form>
+	</div>
+	{#if sent}<Alert tone="success" live>{tb('tern.ui.team.invite.sent', { email: sent })}</Alert>{/if}
+	{#if invitations.length}
+		<ul aria-label={tb('tern.ui.team.invite.pending')}>
+			{#each invitations as inv (inv.id)}
+				<li>
+					<div class="tern-account-text">
+						<span class="tern-account-name">{inv.email}</span>
+						<span class="tern-account-meta">{roleLabel(all, inv.role)} · {tb('tern.ui.team.invite.expires', { when: when(inv.expiresAt) })}</span>
+					</div>
+					{#if cancelAction}
+						<Form action={cancelAction} reset={false}>
+							<input type="hidden" name="tern_form" value="invitations" />
+							<input type="hidden" name="id" value={inv.id} />
+							<Button type="submit" variant="ghost" size="sm" aria-label={tb('tern.ui.team.invite.cancelFor', { email: inv.email })}>{tb('tern.ui.team.invite.cancel')}</Button>
+						</Form>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</AccountSection>
+
+<style>
+	/* The Form is display: contents in an account section: its fields are this grid's. */
+	.tern-invite {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem) auto;
+		align-items: start;
+		gap: 0.75rem;
+	}
+	.tern-invite :global([id^='tern-form-']) {
+		grid-column: 1 / -1;
+	}
+	.tern-invite-submit {
+		display: flex;
+		/* Lines the button up with the inputs, under their labels. */
+		padding-top: 1.625rem;
+	}
+	@media (max-width: 36rem) {
+		.tern-invite {
+			grid-template-columns: 1fr;
+		}
+		.tern-invite-submit {
+			padding-top: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,32 @@
+import { type RoleOption } from './teams.js';
+type Invitation = {
+    id: string;
+    email: string;
+    role: string;
+    invitedBy: string;
+    createdAt: string;
+    expiresAt: string;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Invitations. */
+    invitations: Invitation[];
+    /** The signed-in user's role in the team: admins can't invite owners. */
+    role: string;
+    /** The roles to offer, with labels. The default is owner, admin and member. */
+    roles?: RoleOption[];
+    /** The role chosen at first. */
+    defaultRole?: string;
+    /** The action that calls acc.Invite with the posted email and role. */
+    inviteAction: string;
+    /** The action that calls acc.CancelInvitation with the posted id. */
+    cancelAction?: string;
+    /** The page's form prop, for the invite form's errors. */
+    form?: unknown;
+    class?: string;
+};
+declare const TeamInvitations: import("svelte").Component<Props, {}, "">;
+type TeamInvitations = ReturnType<typeof TeamInvitations>;
+export default TeamInvitations;

package/dist/ui/TeamMembers.svelte

@@ -0,0 +1,100 @@
+<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 Select from './Select.svelte';
+	import { when } from './accountDates.js';
+	import { builtinRoles, grantable, messageFor, roleLabel, type RoleOption } from './teams.js';
+
+	type Member = { userId: number; email: string; name: string; role: string; joinedAt: string };
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** From acc.Members. */
+		members: Member[];
+		/** The signed-in user's ID. */
+		me: number;
+		/** The signed-in user's role in the team, from accounts.CurrentTeam. */
+		role: string;
+		/** The roles to offer, with labels. The default is owner, admin and member; add the app's own TeamRoles. */
+		roles?: RoleOption[];
+		/** The action that calls acc.SetRole with the posted user and role. */
+		roleAction?: string;
+		/** The action that calls acc.RemoveMember with the posted user. */
+		removeAction?: string;
+		/** The action that calls acc.LeaveTeam; then the user's own row has a Leave button. */
+		leaveAction?: string;
+		/** The page's form prop, to show why a change was refused, such as the last owner leaving. */
+		form?: unknown;
+		class?: string;
+	};
+	let { title, description, level = 2, members, me, role, roles, roleAction, removeAction, leaveAction, form, class: klass = '' }: Props = $props();
+
+	const all = $derived(roles ?? builtinRoles());
+	const offer = $derived(grantable(all, role));
+	// What the signed-in user may do to a member, as accounts allows it.
+	const canChange = (m: Member) => offer.length > 0 && (role === 'owner' || m.role !== 'owner');
+	const message = $derived(messageFor(form, 'members'));
+	// The last owner can't leave: accounts refuses, so don't offer it.
+	const owners = $derived(members.filter((m) => m.role === 'owner').length);
+</script>
+
+<AccountSection id="tern-members-title" title={title ?? tb('tern.ui.team.members.title')} description={description ?? tb('tern.ui.team.members.description')} {level} class={klass}>
+	{#if message}<Alert tone="danger" live>{message}</Alert>{/if}
+	<ul>
+		{#each members as m (m.userId)}
+			<li>
+				<div class="tern-account-text">
+					<span class="tern-account-name">{m.name || m.email}{#if m.userId === me}<Badge>{tb('tern.ui.team.you')}</Badge>{/if}</span>
+					<span class="tern-account-meta">{m.name ? `${m.email} · ` : ''}{tb('tern.ui.team.joined', { when: when(m.joinedAt) })}</span>
+				</div>
+				<div class="tern-team-actions">
+					{#if roleAction && canChange(m)}
+						<Form action={roleAction} reset={false}>
+							<input type="hidden" name="tern_form" value="members" /><input type="hidden" name="user" value={m.userId} />
+							<Select
+								name="role"
+								aria-label={tb('tern.ui.team.roleOf', { name: m.name || m.email })}
+								value={m.role}
+								options={m.role === 'owner' && role !== 'owner' ? all : offer}
+								onchange={(e) => (e.currentTarget as HTMLSelectElement).form?.requestSubmit()}
+							/>
+							<noscript><Button type="submit" variant="secondary" size="sm">{tb('tern.ui.team.save')}</Button></noscript>
+						</Form>
+					{:else}
+						<Badge tone={m.role === 'owner' ? 'accent' : 'neutral'}>{roleLabel(all, m.role)}</Badge>
+					{/if}
+					{#if m.userId === me && leaveAction && !(m.role === 'owner' && owners === 1)}
+						<Form action={leaveAction} reset={false}>
+							<input type="hidden" name="tern_form" value="members" />
+							<Button type="submit" variant="ghost" size="sm">{tb('tern.ui.team.leave')}</Button>
+						</Form>
+					{:else if m.userId !== me && removeAction && canChange(m)}
+						<Form action={removeAction} reset={false}>
+							<input type="hidden" name="tern_form" value="members" /><input type="hidden" name="user" value={m.userId} />
+							<Button type="submit" variant="ghost" size="sm" aria-label={tb('tern.ui.team.removeName', { name: m.name || m.email })}>{tb('tern.ui.team.remove')}</Button>
+						</Form>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</AccountSection>
+
+<style>
+	.tern-team-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+	@media (max-width: 30rem) {
+		:global(.tern-account) li:has(.tern-team-actions) {
+			flex-wrap: wrap;
+		}
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import { type RoleOption } from './teams.js';
+type Member = {
+    userId: number;
+    email: string;
+    name: string;
+    role: string;
+    joinedAt: string;
+};
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** From acc.Members. */
+    members: Member[];
+    /** The signed-in user's ID. */
+    me: number;
+    /** The signed-in user's role in the team, from accounts.CurrentTeam. */
+    role: string;
+    /** The roles to offer, with labels. The default is owner, admin and member; add the app's own TeamRoles. */
+    roles?: RoleOption[];
+    /** The action that calls acc.SetRole with the posted user and role. */
+    roleAction?: string;
+    /** The action that calls acc.RemoveMember with the posted user. */
+    removeAction?: string;
+    /** The action that calls acc.LeaveTeam; then the user's own row has a Leave button. */
+    leaveAction?: string;
+    /** The page's form prop, to show why a change was refused, such as the last owner leaving. */
+    form?: unknown;
+    class?: string;
+};
+declare const TeamMembers: import("svelte").Component<Props, {}, "">;
+type TeamMembers = ReturnType<typeof TeamMembers>;
+export default TeamMembers;

package/dist/ui/TeamSettings.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import AccountSection from './AccountSection.svelte';
+	import Alert from './Alert.svelte';
+	import AlertDialog from './AlertDialog.svelte';
+	import Button from './Button.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import { formFor, manages, messageFor } from './teams.js';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 2 | 3 | 4;
+		/** The current team, from accounts.CurrentTeam. */
+		team: { id: number; name: string };
+		/** The signed-in user's role in it: admins rename, owners also delete. */
+		role: string;
+		/** The action that calls acc.RenameTeam with the posted name. */
+		renameAction?: string;
+		/** The action that calls acc.DeleteTeam. Deleting asks to type the team's name first. */
+		deleteAction?: string;
+		/** The page's form prop, for the actions' errors. */
+		form?: unknown;
+		class?: string;
+	};
+	let { title, description, level = 2, team, role, renameAction, deleteAction, form, class: klass = '' }: Props = $props();
+
+	let deleteOpen = $state(false);
+	let deleteForm = $state<HTMLFormElement>();
+	let typed = $state('');
+	const message = $derived(messageFor(form, 'team-delete'));
+</script>
+
+<AccountSection id="tern-team-settings-title" title={title ?? tb('tern.ui.team.settings.title')} description={description} {level} class={klass}>
+	{#if renameAction && manages(role)}
+		<Form action={renameAction} form={formFor(form, 'team-rename')} reset={false}>
+			<input type="hidden" name="tern_form" value="team-rename" />
+			<Field label={tb('tern.ui.team.settings.name')} name="name"><Input value={team.name} required maxlength={100} autocomplete="organization" /></Field>
+			<div><Button type="submit" size="sm">{tb('tern.ui.team.settings.rename')}</Button></div>
+		</Form>
+	{/if}
+	{#if deleteAction && role === 'owner'}
+		<div class="tern-team-danger">
+			<div class="tern-account-text">
+				<span class="tern-account-name">{tb('tern.ui.team.settings.delete')}</span>
+				<span class="tern-account-meta">{tb('tern.ui.team.settings.deleteHelp')}</span>
+			</div>
+			<form method="POST" action={deleteAction} bind:this={deleteForm}>
+				<input type="hidden" name="tern_form" value="team-delete" />
+				<Button type="button" variant="danger" size="sm" onclick={() => ((typed = ''), (deleteOpen = true))}>{tb('tern.ui.team.settings.deleteButton')}</Button>
+			</form>
+		</div>
+		{#if message}<Alert tone="danger" live>{message}</Alert>{/if}
+		<AlertDialog
+			bind:open={deleteOpen}
+			title={tb('tern.ui.team.settings.deleteConfirm', { team: team.name })}
+			description={tb('tern.ui.team.settings.deleteWarning')}
+			confirmLabel={tb('tern.ui.team.settings.deleteButton')}
+			danger
+			confirmDisabled={typed.trim() !== team.name.trim()}
+			onconfirm={() => deleteForm?.requestSubmit()}
+		>
+			<Field label={tb('tern.ui.team.settings.typeName', { team: team.name })} name="confirm-team"><Input bind:value={typed} autocomplete="off" spellcheck="false" /></Field>
+		</AlertDialog>
+	{/if}
+</AccountSection>
+
+<style>
+	.tern-team-danger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--tern-danger-soft);
+		border-radius: var(--tern-radius);
+	}
+	.tern-team-danger form {
+		flex-shrink: 0;
+	}
+	@media (max-width: 30rem) {
+		.tern-team-danger {
+			flex-wrap: wrap;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 2 | 3 | 4;
+    /** The current team, from accounts.CurrentTeam. */
+    team: {
+        id: number;
+        name: string;
+    };
+    /** The signed-in user's role in it: admins rename, owners also delete. */
+    role: string;
+    /** The action that calls acc.RenameTeam with the posted name. */
+    renameAction?: string;
+    /** The action that calls acc.DeleteTeam. Deleting asks to type the team's name first. */
+    deleteAction?: string;
+    /** The page's form prop, for the actions' errors. */
+    form?: unknown;
+    class?: string;
+};
+declare const TeamSettings: import("svelte").Component<Props, {}, "">;
+type TeamSettings = ReturnType<typeof TeamSettings>;
+export default TeamSettings;

package/dist/ui/TeamSwitcher.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { tb } from '../runtime/i18n.svelte.js';
+	import Menu from './Menu.svelte';
+	import type { MenuItem } from './menu.js';
+
+	type Membership = { team: { id: number; name: string }; role: string };
+	type Props = {
+		/** From acc.Teams. */
+		teams: Membership[];
+		/** The current team's ID, from accounts.CurrentTeam. */
+		current: number;
+		/** The action that calls acc.SwitchTeam with the posted id. */
+		action: string;
+		/** A link to make a new team, such as "/teams/new". */
+		newHref?: string;
+		/** Opens to the start or end edge of the button. */
+		align?: 'start' | 'end';
+		class?: string;
+	};
+	let { teams, current, action, newHref, align = 'start', class: klass = '' }: Props = $props();
+
+	let form = $state<HTMLFormElement>();
+	let chosen = $state('');
+	const name = $derived(teams.find((m) => m.team.id === current)?.team.name ?? tb('tern.ui.team.switcher.none'));
+	const items = $derived<MenuItem[]>([
+		{ heading: tb('tern.ui.team.switcher.heading') },
+		...teams.map((m) => ({
+			label: m.team.name,
+			type: 'radio' as const,
+			checked: m.team.id === current,
+			onselect: () => {
+				if (m.team.id === current) return;
+				chosen = String(m.team.id);
+				// After the hidden input has the value.
+				queueMicrotask(() => form?.requestSubmit());
+			}
+		})),
+		...(newHref ? [{ separator: true }, { label: tb('tern.ui.team.switcher.new'), href: newHref }] : [])
+	]);
+</script>
+
+<!-- Posts the chosen team to the switch action; the page reloads its data. -->
+<form method="POST" {action} bind:this={form} hidden>
+	<input type="hidden" name="id" value={chosen} />
+</form>
+<Menu {items} {align} variant="ghost" class="tern-team-switcher {klass}">
+	<span class="tern-team-switcher-name">{name}</span>
+</Menu>
+
+<style>
+	.tern-team-switcher-name {
+		max-width: 14rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 600;
+	}
+</style>