@vit-foundation/ui 0.1.0 → 0.2.1

package/dist/components/ui/LocaleField.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The hidden `locale` input every form carries. Without it a no-JS
+ * submission is stored under the base locale, because the unprefixed POST
+ * target resolves there before the locale cookie is consulted. Rendering it
+ * from one module makes the invariant enforceable instead of restated at
+ * every form.
+ */
+interface Props {
+    /** The form's `locale` field: `form.fields.locale`. */
+    field: {
+        as(type: 'hidden', value: string): Record<string, unknown>;
+    };
+}
+declare const LocaleField: import("svelte").Component<Props, {}, "">;
+type LocaleField = ReturnType<typeof LocaleField>;
+export default LocaleField;

package/dist/components/ui/NewsletterIntentField.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { NEWSLETTER_INTENT_VALUE } from '../../forms/transport.js';
+
+	/**
+	 * The hidden `newsletter` input that carries a newsletter intent through a
+	 * form post. The fourth of the intent's four transports, and the last one to
+	 * read its owner: the host app's cookie and URL query
+	 * transports both take the value from `NEWSLETTER_INTENT_VALUE`,
+	 * while the two markup sites spelled `'1'` and imported nothing.
+	 *
+	 * That matters because the schema is `z.literal(NEWSLETTER_INTENT_VALUE)`:
+	 * changing the owner turns a hand-written literal into a submission that
+	 * fails validation on a field the reader cannot see. Dropping the input
+	 * instead loses the opt-in after the OAuth roundtrip, with no error and no
+	 * red test — the silent-failure shape LocaleField and Honeypot each own a
+	 * module for.
+	 *
+	 * Whether intent is being carried is the caller's fact and stays at the call
+	 * site; how it is encoded is this module's. Signup is not a caller: its
+	 * consent block binds `z.boolean()` through a visible checkbox, not the
+	 * intent literal.
+	 */
+	interface Props {
+		/** The form's `newsletter` field: `form.fields.newsletter`. */
+		field: { as(type: 'hidden', value: string): Record<string, unknown> };
+	}
+
+	let { field }: Props = $props();
+</script>
+
+<input {...field.as('hidden', NEWSLETTER_INTENT_VALUE)} />

package/dist/components/ui/NewsletterIntentField.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The hidden `newsletter` input that carries a newsletter intent through a
+ * form post. The fourth of the intent's four transports, and the last one to
+ * read its owner: the host app's cookie and URL query
+ * transports both take the value from `NEWSLETTER_INTENT_VALUE`,
+ * while the two markup sites spelled `'1'` and imported nothing.
+ *
+ * That matters because the schema is `z.literal(NEWSLETTER_INTENT_VALUE)`:
+ * changing the owner turns a hand-written literal into a submission that
+ * fails validation on a field the reader cannot see. Dropping the input
+ * instead loses the opt-in after the OAuth roundtrip, with no error and no
+ * red test — the silent-failure shape LocaleField and Honeypot each own a
+ * module for.
+ *
+ * Whether intent is being carried is the caller's fact and stays at the call
+ * site; how it is encoded is this module's. Signup is not a caller: its
+ * consent block binds `z.boolean()` through a visible checkbox, not the
+ * intent literal.
+ */
+interface Props {
+    /** The form's `newsletter` field: `form.fields.newsletter`. */
+    field: {
+        as(type: 'hidden', value: string): Record<string, unknown>;
+    };
+}
+declare const NewsletterIntentField: import("svelte").Component<Props, {}, "">;
+type NewsletterIntentField = ReturnType<typeof NewsletterIntentField>;
+export default NewsletterIntentField;

package/dist/components/ui/index.d.ts

@@ -10,7 +10,10 @@ export { default as FormErrorFeedback } from './FormErrorFeedback.svelte';
 export { default as FormFeedback } from './FormFeedback.svelte';
 export { default as FormResultSlot } from './FormResultSlot.svelte';
 export { default as GhostButton } from './GhostButton.svelte';
+export { default as Honeypot } from './Honeypot.svelte';
 export { default as Link } from './Link.svelte';
+export { default as LocaleField } from './LocaleField.svelte';
+export { default as NewsletterIntentField } from './NewsletterIntentField.svelte';
 export { default as Pagination } from './Pagination.svelte';
 export { default as RichText } from './RichText.svelte';
 export { default as SearchInput } from './SearchInput.svelte';

package/dist/components/ui/index.js

@@ -10,7 +10,10 @@ export { default as FormErrorFeedback } from './FormErrorFeedback.svelte';
 export { default as FormFeedback } from './FormFeedback.svelte';
 export { default as FormResultSlot } from './FormResultSlot.svelte';
 export { default as GhostButton } from './GhostButton.svelte';
+export { default as Honeypot } from './Honeypot.svelte';
 export { default as Link } from './Link.svelte';
+export { default as LocaleField } from './LocaleField.svelte';
+export { default as NewsletterIntentField } from './NewsletterIntentField.svelte';
 export { default as Pagination } from './Pagination.svelte';
 export { default as RichText } from './RichText.svelte';
 export { default as SearchInput } from './SearchInput.svelte';

package/dist/components/weeklies/CommentSection.svelte

@@ -0,0 +1,229 @@
+<script module lang="ts">
+	import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+
+	/** One preflighted comment form (the main box, or one reply box). */
+	export type CommentFormInstance = RemoteFormInstance<
+		{ body: RemoteField; weeklySlug: RemoteField; parentId: RemoteField },
+		FormResultOf
+	>;
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { COMMENT_BODY } from '../../forms/constraints.js';
+	import type { CommentData, CommentThreadData } from '../../content/types.js';
+	import Button from '../ui/Button.svelte';
+	import DateText from '../ui/DateText.svelte';
+	import Field from '../ui/Field.svelte';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+	import Link from '../ui/Link.svelte';
+	import ReactionBar, { type ReactionBarForms } from './ReactionBar.svelte';
+
+	interface Props {
+		comments: CommentThreadData[];
+		weeklySlug: string;
+		isLoggedIn: boolean;
+		/**
+		 * The main comment form, preflighted by the host page. One RemoteForm
+		 * instance can only attach to one <form> at a time, so every reply form
+		 * gets its own through `replyFormFor` — the host builds each with
+		 * `commentForm.for(threadId).preflight(schema)`, keeping schema and
+		 * keying on its side of the seam. Every instance must be preflighted
+		 * itself: a keyed form falls back to the base schema only while the
+		 * base form renders, so each says so explicitly.
+		 */
+		commentForm: CommentFormInstance;
+		replyFormFor: (threadId: string) => CommentFormInstance;
+		/** The reaction forms, handed through to each comment's ReactionBar. */
+		reactionForms: ReactionBarForms;
+	}
+
+	let { comments, weeklySlug, isLoggedIn, commentForm, replyFormFor, reactionForms }: Props =
+		$props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	// No custom enhance: kit's default post-submit behavior already resets
+	// the form and re-runs the page's load functions in place (no navigation,
+	// scroll preserved).
+	const main = $derived(commentForm);
+
+	const errorMessages = $derived({ unauthenticated: msg.comments_loginPrompt() });
+</script>
+
+{#snippet commentMeta(comment: CommentData)}
+	<p class="meta">
+		<strong>{comment.displayName}</strong>
+		<DateText value={comment.createdAt} />
+	</p>
+	<p class="body">{comment.body}</p>
+	<ReactionBar
+		reactions={comment.reactions}
+		target={{ kind: 'comment', id: comment.id }}
+		{isLoggedIn}
+		forms={reactionForms}
+	/>
+{/snippet}
+
+<section aria-labelledby="comments-heading">
+	<h2 class="subsection-heading" id="comments-heading">{msg.comments_title()}</h2>
+
+	{#if comments.length === 0}
+		<p class="empty">{msg.comments_empty()}</p>
+	{:else}
+		<ul class="list">
+			{#each comments as thread (thread.id)}
+				<li>
+					{@render commentMeta(thread)}
+
+					{#if thread.replies.length > 0}
+						<ul class="replies">
+							{#each thread.replies as reply (reply.id)}
+								<li>{@render commentMeta(reply)}</li>
+							{/each}
+						</ul>
+					{/if}
+
+					{#if isLoggedIn}
+						{@const reply = replyFormFor(String(thread.id))}
+						<!-- Native disclosure: the reply form opens without JS. -->
+						<details class="reply">
+							<summary>{msg.comments_replyLabel()}</summary>
+							<form class="form-stack" {...reply}>
+								<Field
+									id="reply-body-{thread.id}"
+									label={msg.comments_bodyLabel()}
+									field={reply.fields.body}
+									constraint={COMMENT_BODY}
+									hideLabel
+								>
+									{#snippet children(attrs)}
+										<textarea
+											class="control"
+											required
+											rows="3"
+											{...attrs}
+											{...reply.fields.body.as('text')}
+										></textarea>
+									{/snippet}
+								</Field>
+								<input {...reply.fields.weeklySlug.as('hidden', weeklySlug)} />
+								<input {...reply.fields.parentId.as('hidden', String(thread.id))} />
+								<div class="actions">
+									<Button type="submit" pending={reply.pending}>
+										{msg.comments_replySubmit()}
+									</Button>
+								</div>
+								<FormErrorFeedback result={reply.result} messages={errorMessages} />
+							</form>
+						</details>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if isLoggedIn}
+		<form class="form-stack" {...main}>
+			<Field
+				id="comment-body"
+				label={msg.comments_bodyLabel()}
+				field={main.fields.body}
+				constraint={COMMENT_BODY}
+			>
+				{#snippet children(attrs)}
+					<textarea class="control" required rows="4" {...attrs} {...main.fields.body.as('text')}
+					></textarea>
+				{/snippet}
+			</Field>
+
+			<input {...main.fields.weeklySlug.as('hidden', weeklySlug)} />
+
+			<div class="actions">
+				<Button type="submit" pending={main.pending}>{msg.comments_submit()}</Button>
+			</div>
+
+			<FormErrorFeedback result={main.result} messages={errorMessages} />
+		</form>
+	{:else}
+		<p class="login-prompt">
+			{msg.comments_loginPrompt()}
+			<Link href="/login">{msg.comments_loginLink()}</Link>
+			·
+			<Link href="/signup">{msg.comments_signupLink()}</Link>
+		</p>
+	{/if}
+</section>
+
+<style>
+	.empty,
+	.login-prompt {
+		color: var(--color-ink-secondary);
+	}
+
+	.list {
+		list-style: none;
+		padding: 0;
+		margin: 0 0 var(--space-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	.list > li {
+		border-bottom: 1px solid var(--color-hairline);
+		padding-bottom: var(--space-3);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	.replies {
+		list-style: none;
+		margin: 0;
+		padding: 0 0 0 var(--space-4);
+		border-left: 2px solid var(--color-hairline);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	.replies li {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	.meta {
+		display: flex;
+		gap: var(--space-2);
+		align-items: baseline;
+		margin: 0;
+	}
+
+	.body {
+		margin: 0;
+		white-space: pre-line;
+	}
+
+	.reply summary {
+		cursor: pointer;
+		color: var(--color-ink-secondary);
+		font-size: var(--text-sm);
+		font-weight: 600;
+	}
+
+	.reply form {
+		margin-top: var(--space-2);
+	}
+
+	form {
+		max-width: 32rem;
+	}
+
+	textarea {
+		padding: var(--space-2);
+		resize: vertical;
+	}
+</style>

package/dist/components/weeklies/CommentSection.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** One preflighted comment form (the main box, or one reply box). */
+export type CommentFormInstance = RemoteFormInstance<{
+    body: RemoteField;
+    weeklySlug: RemoteField;
+    parentId: RemoteField;
+}, FormResultOf>;
+import type { CommentThreadData } from '../../content/types.js';
+import { type ReactionBarForms } from './ReactionBar.svelte';
+interface Props {
+    comments: CommentThreadData[];
+    weeklySlug: string;
+    isLoggedIn: boolean;
+    /**
+     * The main comment form, preflighted by the host page. One RemoteForm
+     * instance can only attach to one <form> at a time, so every reply form
+     * gets its own through `replyFormFor` — the host builds each with
+     * `commentForm.for(threadId).preflight(schema)`, keeping schema and
+     * keying on its side of the seam. Every instance must be preflighted
+     * itself: a keyed form falls back to the base schema only while the
+     * base form renders, so each says so explicitly.
+     */
+    commentForm: CommentFormInstance;
+    replyFormFor: (threadId: string) => CommentFormInstance;
+    /** The reaction forms, handed through to each comment's ReactionBar. */
+    reactionForms: ReactionBarForms;
+}
+declare const CommentSection: import("svelte").Component<Props, {}, "">;
+type CommentSection = ReturnType<typeof CommentSection>;
+export default CommentSection;

package/dist/components/weeklies/ReactionBar.svelte

@@ -0,0 +1,170 @@
+<script module lang="ts">
+	import type {
+		FormResultOf,
+		KeyedRemoteForms,
+		RemoteField,
+		RemoteFormInstance
+	} from '../../forms/types.js';
+
+	/** One reaction chip's form: the target id field plus the reaction. */
+	export type WeeklyReactionChip = RemoteFormInstance<
+		{ weeklySlug: RemoteField; reaction: RemoteField },
+		FormResultOf
+	>;
+	export type CommentReactionChip = RemoteFormInstance<
+		{ commentId: RemoteField; reaction: RemoteField },
+		FormResultOf
+	>;
+
+	/**
+	 * The two keyed remote forms a bar toggles through — every chip is its own
+	 * <form>, so each needs its own instance via `.for(key)`. Bundled so
+	 * CommentSection can hand them through per comment without naming both.
+	 */
+	export interface ReactionBarForms {
+		weeklyReactionForm: KeyedRemoteForms<WeeklyReactionChip>;
+		commentReactionForm: KeyedRemoteForms<CommentReactionChip>;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { Reaction, ReactionSummary, ReactionTarget } from '../../content/types.js';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+
+	interface Props {
+		reactions: ReactionSummary[];
+		/** The weekly or comment these reactions belong to. */
+		target: ReactionTarget;
+		isLoggedIn: boolean;
+		/** The keyed remote forms, passed by the host page. */
+		forms: ReactionBarForms;
+	}
+
+	let { reactions, target, isLoggedIn, forms }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	/**
+	 * Both presentation facts of a reaction, in one exhaustive record — the
+	 * shape milestoneCategoryLabel uses, for the same reason. A fourth Reaction
+	 * fails the build here instead of shipping the wrong screen-reader name.
+	 */
+	const REACTION = $derived<Record<Reaction, { emoji: string; label: () => string }>>({
+		like: { emoji: '👍', label: msg.reaction_like },
+		love: { emoji: '❤️', label: msg.reaction_love },
+		clap: { emoji: '👏', label: msg.reaction_clap }
+	});
+
+	/**
+	 * The chip's form and the one field that identifies what it reacts to.
+	 * The two targets are stored apart, so each names its own form and its own
+	 * id field, and nothing else about a chip differs.
+	 *
+	 * `on` is a parameter rather than the prop so the discriminant narrows here.
+	 */
+	function chipFor(reaction: Reaction, on: ReactionTarget) {
+		if (on.kind === 'weekly') {
+			const chip = forms.weeklyReactionForm.for(`${on.slug}|${reaction}`);
+			return { chip, idField: chip.fields.weeklySlug.as('hidden', on.slug) };
+		}
+		const chip = forms.commentReactionForm.for(`${on.id}|${reaction}`);
+		return { chip, idField: chip.fields.commentId.as('hidden', String(on.id)) };
+	}
+
+	/**
+	 * The first failure across the bar's chips. One alert for the bar rather
+	 * than one per chip: three stacked alerts for what is always the same
+	 * failure would be read out three times.
+	 */
+	const failure = $derived(
+		isLoggedIn
+			? reactions
+					.map((entry) => chipFor(entry.reaction, target).chip.result)
+					.find((result) => result && !result.ok)
+			: undefined
+	);
+</script>
+
+{#snippet chipContent(entry: (typeof reactions)[number])}
+	<span aria-hidden="true">{REACTION[entry.reaction].emoji}</span>
+	<span class="visually-hidden">{REACTION[entry.reaction].label()}</span>
+	{#if entry.count > 0}<span class="count">{entry.count}</span>{/if}
+{/snippet}
+
+<div class="bar" role="group" aria-label={msg.reactions_groupLabel()}>
+	{#each reactions as entry (entry.reaction)}
+		{#if isLoggedIn}
+			{@const { chip, idField } = chipFor(entry.reaction, target)}
+			<!-- One tiny form per reaction: toggling works without JavaScript. -->
+			<form {...chip}>
+				<input {...idField} />
+				<input {...chip.fields.reaction.as('hidden', entry.reaction)} />
+				<!-- aria-busy, not disabled: a disabled control is unfocusable, so
+				disabling a toggle mid-flight drops focus off the chip the reader
+				just activated. That is what makes this different from a submit
+				whose form is replaced or which redirects away. -->
+				<button
+					type="submit"
+					class="chip"
+					class:mine={entry.mine}
+					aria-pressed={entry.mine}
+					aria-busy={chip.pending > 0 || undefined}
+				>
+					{@render chipContent(entry)}
+				</button>
+			</form>
+		{:else if entry.count > 0}
+			<span class="chip static" title={REACTION[entry.reaction].label()}>
+				{@render chipContent(entry)}
+			</span>
+		{/if}
+	{/each}
+</div>
+
+<FormErrorFeedback result={failure} />
+
+<style>
+	.bar {
+		display: flex;
+		gap: var(--space-2);
+		align-items: center;
+	}
+
+	form {
+		display: contents;
+	}
+
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		border: 1px solid var(--color-hairline);
+		border-radius: 999px;
+		background: var(--color-surface);
+		padding: 0.15rem var(--space-2);
+		font-size: var(--text-sm);
+		color: var(--color-ink-secondary);
+		cursor: pointer;
+		transition: border-color var(--transition-fast);
+	}
+
+	button.chip:hover {
+		border-color: var(--color-brand);
+	}
+
+	.chip.mine {
+		border-color: var(--color-brand);
+		background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
+	}
+
+	.chip.static {
+		cursor: default;
+	}
+
+	.count {
+		font-variant-numeric: tabular-nums;
+		font-weight: 600;
+	}
+</style>

package/dist/components/weeklies/ReactionBar.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { FormResultOf, KeyedRemoteForms, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** One reaction chip's form: the target id field plus the reaction. */
+export type WeeklyReactionChip = RemoteFormInstance<{
+    weeklySlug: RemoteField;
+    reaction: RemoteField;
+}, FormResultOf>;
+export type CommentReactionChip = RemoteFormInstance<{
+    commentId: RemoteField;
+    reaction: RemoteField;
+}, FormResultOf>;
+/**
+ * The two keyed remote forms a bar toggles through — every chip is its own
+ * <form>, so each needs its own instance via `.for(key)`. Bundled so
+ * CommentSection can hand them through per comment without naming both.
+ */
+export interface ReactionBarForms {
+    weeklyReactionForm: KeyedRemoteForms<WeeklyReactionChip>;
+    commentReactionForm: KeyedRemoteForms<CommentReactionChip>;
+}
+import type { ReactionSummary, ReactionTarget } from '../../content/types.js';
+interface Props {
+    reactions: ReactionSummary[];
+    /** The weekly or comment these reactions belong to. */
+    target: ReactionTarget;
+    isLoggedIn: boolean;
+    /** The keyed remote forms, passed by the host page. */
+    forms: ReactionBarForms;
+}
+declare const ReactionBar: import("svelte").Component<Props, {}, "">;
+type ReactionBar = ReturnType<typeof ReactionBar>;
+export default ReactionBar;

package/dist/components/weeklies/index.d.ts

@@ -1,3 +1,7 @@
+export { default as CommentSection } from './CommentSection.svelte';
+export type { CommentFormInstance } from './CommentSection.svelte';
+export { default as ReactionBar } from './ReactionBar.svelte';
+export type { CommentReactionChip, ReactionBarForms, WeeklyReactionChip } from './ReactionBar.svelte';
 export { default as SortSelect } from './SortSelect.svelte';
 export { default as WeeklieCard } from './WeeklieCard.svelte';
 export type { WeeklyEditMap } from './WeeklieCard.svelte';

package/dist/components/weeklies/index.js

@@ -1,2 +1,4 @@
+export { default as CommentSection } from './CommentSection.svelte';
+export { default as ReactionBar } from './ReactionBar.svelte';
 export { default as SortSelect } from './SortSelect.svelte';
 export { default as WeeklieCard } from './WeeklieCard.svelte';

package/dist/config/messages.js

@@ -30,6 +30,74 @@ export const defaultMessages = {
     footer_rights: () => 'Fundació Visualization for Transparency. Tots els drets reservats.',
     jobs_empty: () => 'Ara mateix no tenim cap oferta oberta.',
     jobs_newsletterNudge: () => 'Res que encaixi amb el teu perfil? Subscriu-te al butlletí per estar al dia.',
+    login_title: () => 'Inicia la sessió',
+    login_emailLabel: () => 'Correu electrònic',
+    login_passwordLabel: () => 'Contrasenya',
+    login_submit: () => 'Entra',
+    login_divider: () => 'o',
+    login_magicLinkSubmit: () => "Envia'm un enllaç d'accés",
+    login_magicLinkSuccess: () => "Si el correu existeix, hi hem enviat un enllaç d'accés.",
+    login_googleSubmit: () => 'Continua amb Google',
+    login_error_invalidCredentials: () => 'Credencials incorrectes.',
+    signup_title: () => 'Crea un compte',
+    signup_nameLabel: () => 'Nom visible',
+    signup_passwordLabel: () => 'Contrasenya (mínim 8 caràcters)',
+    signup_newsletterLabel: () => 'Vull rebre el butlletí de la fundació.',
+    signup_submit: () => 'Crea el compte',
+    signup_success: () => "Revisa el correu: t'hem enviat un enllaç per confirmar el compte.",
+    signup_termsPre: () => 'Accepto els',
+    signup_termsLink: () => 'termes i condicions',
+    auth_tabsLabel: () => 'Accés al compte',
+    auth_legalNotePre: () => 'En continuar amb Google, acceptes els',
+    account_nameHeading: () => 'Nom públic',
+    account_nameLabel: () => 'Nom',
+    account_nameSubmit: () => 'Desa el nom',
+    account_nameSuccess: () => 'Nom actualitzat.',
+    account_newsletterHeading: () => 'Butlletí',
+    account_newsletterStatusOn: ({ email }) => `Estàs subscrit amb ${email}.`,
+    account_newsletterStatusOff: () => 'No estàs subscrit al butlletí.',
+    account_newsletterSubscribe: () => "Subscriu-m'hi",
+    account_newsletterUnsubscribe: () => 'Cancel·la la subscripció',
+    account_newsletterSuccessOn: () => 'Subscripció activada.',
+    account_newsletterSuccessOff: () => 'Subscripció cancel·lada.',
+    account_dataHeading: () => 'Les meves dades',
+    account_dataDescription: () => 'Descarrega una còpia de les teves dades (perfil, comentaris i subscripció) en format JSON.',
+    account_dataDownload: () => 'Descarrega les meves dades',
+    account_logout: () => 'Tanca la sessió',
+    account_deleteHeading: () => 'Elimina el compte',
+    account_deleteWarning: () => "Aquesta acció és permanent: s'eliminaran el compte, els comentaris i la subscripció al butlletí.",
+    account_deleteConfirmLabel: () => 'Entenc que aquesta acció no es pot desfer.',
+    account_deleteSubmit: () => 'Elimina el meu compte',
+    account_error_unavailable: () => "L'eliminació del compte no està disponible ara mateix. Escriu-nos i l'eliminarem manualment.",
+    newsletter_title: () => 'Butlletí',
+    newsletter_intro: () => 'Rep les novetats de la fundació al teu correu.',
+    newsletter_promptLoggedOut: () => 'El butlletí és per a persones registrades: el teu correu ja queda verificat i no en necessitem cap més.',
+    newsletter_subscribedNote: () => 'Ja estàs subscrit al butlletí. Gestiona-ho des de',
+    comments_title: () => 'Comentaris',
+    comments_empty: () => 'Encara no hi ha comentaris. Sigues el primer!',
+    comments_bodyLabel: () => 'El teu comentari',
+    comments_submit: () => 'Publica el comentari',
+    comments_replyLabel: () => 'Respon',
+    comments_replySubmit: () => 'Publica la resposta',
+    comments_loginPrompt: () => 'Per comentar cal iniciar la sessió.',
+    comments_loginLink: () => 'Inicia la sessió',
+    comments_signupLink: () => 'Crea un compte',
+    reaction_like: () => "M'agrada",
+    reaction_love: () => "M'encanta",
+    reaction_clap: () => 'Aplaudiment',
+    reactions_groupLabel: () => 'Reaccions',
+    contact_categoryLabel: () => 'Motiu',
+    contact_nameLabel: () => 'Nom',
+    contact_emailLabel: () => 'Correu electrònic',
+    contact_messageLabel: () => 'Missatge',
+    contact_submit: () => 'Envia',
+    contact_success: () => 'Missatge enviat. Et respondrem aviat!',
+    contact_invalid: () => 'Revisa els camps marcats.',
+    contact_category_collaborate: () => 'Vull col·laborar',
+    contact_category_event: () => 'Us vull en un esdeveniment',
+    contact_category_press: () => 'Premsa',
+    contact_category_brand: () => 'Promoció de marca',
+    contact_category_other: () => 'Preguntes, idees o només saludar',
     category_foundation: () => 'Fundació',
     category_lab: () => 'Laboratori',
     category_education: () => 'Educació',