@vit-foundation/ui 0.24.2 → 0.26.0

package/README.md

@@ -22,17 +22,17 @@ Requires `svelte` ^5.0.0 as a peer. Import the two stylesheets once:
 
 Everything exports flat from the root, and again grouped by role:
 
-| Entry point                                                     | What lives there                                                                                                                                                                                         |
-| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`/primitives`](./docs/components/primitives.md)                | Button, GhostButton, Link, CardMedia, CardTitle, CopyIntro, DateText, DecorShapes, FilterChips, Pagination, RichText, SearchInput, ShareRow                                                              |
-| [`/forms`](./docs/forms.md)                                     | Field, FormFeedback, FormErrorFeedback, FormResultSlot, Honeypot, LocaleField, NewsletterIntentField — plus the remote-form seam: structural types, transport constants, field bounds                    |
-| [`/chrome`](./docs/components/chrome.md)                        | PageShell, Nav, Footer                                                                                                                                                                                   |
-| [`/content`](./docs/components/content.md)                      | WeeklieCard, ProjectCard, Timeline, TimelineMilestone, TeamMemberCard, CollaboratorList, JobList, SortSelect — plus the data shapes, helpers and the two list rules (createWeeklyList, createUrlFilters) |
-| [`/community`](./docs/components/community.md)                  | AuthPageShell, LoginForm, SignupForm, GoogleAuthForm, AccountPanel, NewsletterSignup, CommentSection, ReactionBar, ContactForm                                                                           |
-| [`/edit`](./docs/edit-mode.md)                                  | Editable, setEditAdapter/getEditAdapter, descriptors and helpers, collectionEditing, LocalizedText                                                                                                       |
-| [`/config`](./docs/getting-started.md#wiring-an-app-uiprovider) | UiProvider, UiConfig, the locale set, the default Catalan messages                                                                                                                                       |
-| `/contract`                                                     | The component-free half: LOCALES, BASE_LOCALE, localize, REACTIONS and the edit-descriptor types — the one subpath a host may import from SERVER code                                                    |
-| `/testing`                                                      | createRemoteFormMock — the remote-form stand-in for stories and tests                                                                                                                                    |
+| Entry point                                                     | What lives there                                                                                                                                                                                                                                                                  |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`/primitives`](./docs/components/primitives.md)                | Button, GhostButton, Link, CardMedia, CardTitle, CopyIntro, DateText, DecorShapes, FilterChips, Pagination, RichText, SearchInput, ShareRow                                                                                                                                       |
+| [`/forms`](./docs/forms.md)                                     | Field, FormFeedback, FormErrorFeedback, FormResultSlot, Honeypot, LocaleField, NewsletterIntentField — plus the remote-form seam: structural types, transport constants, field bounds                                                                                             |
+| [`/chrome`](./docs/components/chrome.md)                        | PageShell, Nav, Footer                                                                                                                                                                                                                                                            |
+| [`/content`](./docs/components/content.md)                      | WeeklieCard, ProjectCard, Timeline, TimelineMilestone, TeamMemberCard, CollaboratorList, JobList, SortSelect, the nine page modules (HomePage … WeeklyPage) — plus the data shapes, the page-copy vocabulary, helpers and the two list rules (createWeeklyList, createUrlFilters) |
+| [`/community`](./docs/components/community.md)                  | AuthPageShell, LoginForm, SignupForm, GoogleAuthForm, AccountPanel, NewsletterSignup, CommentSection, ReactionBar, ContactForm                                                                                                                                                    |
+| [`/edit`](./docs/edit-mode.md)                                  | Editable, setEditAdapter(adapter, EDIT_CHROME)/getEditAdapter, descriptors and helpers, collectionEditing, LocalizedText                                                                                                                                                          |
+| [`/config`](./docs/getting-started.md#wiring-an-app-uiprovider) | UiProvider, UiConfig, the locale set, the default Catalan messages                                                                                                                                                                                                                |
+| `/contract`                                                     | The component-free half: LOCALES, BASE_LOCALE, localize, REACTIONS, PAGE_COPY_KEYS and the edit-descriptor types — the one subpath a host may import from SERVER code                                                                                                             |
+| `/testing`                                                      | createRemoteFormMock — the remote-form stand-in for stories and tests                                                                                                                                                                                                             |
 
 Every component renders standalone (Catalan copy, identity hrefs); an app
 integrates its i18n and router through one `UiProvider` in the root layout.

package/dist/community.d.ts

@@ -3,9 +3,18 @@
  * and contact. Every one takes its remote form(s) as required props — the
  * host app owns schemas and preflight; see ./forms for the seam's types.
  */
-export * from './components/account/index.js';
-export * from './components/auth/index.js';
-export * from './components/contact/index.js';
+export { default as AccountPanel } from './components/account/AccountPanel.svelte';
+export type { DeleteAccountFormInstance, LogoutFormInstance, NewsletterToggleFormInstance, UpdateNameFormInstance } from './components/account/AccountPanel.svelte';
+export { default as NewsletterSignup } from './components/account/NewsletterSignup.svelte';
+export { default as AuthPageShell } from './components/auth/AuthPageShell.svelte';
+export { default as GoogleAuthForm } from './components/auth/GoogleAuthForm.svelte';
+export type { GoogleLoginFormInstance } from './components/auth/GoogleAuthForm.svelte';
+export { default as LoginForm } from './components/auth/LoginForm.svelte';
+export type { LoginFormInstance, MagicLinkFormInstance } from './components/auth/LoginForm.svelte';
+export { default as SignupForm } from './components/auth/SignupForm.svelte';
+export type { SignupFormInstance } from './components/auth/SignupForm.svelte';
+export { default as ContactForm } from './components/contact/ContactForm.svelte';
+export type { ContactFormInstance } from './components/contact/ContactForm.svelte';
 export { default as CommentSection } from './components/weeklies/CommentSection.svelte';
 export type { CommentFormInstance } from './components/weeklies/CommentSection.svelte';
 export { default as ReactionBar } from './components/weeklies/ReactionBar.svelte';

package/dist/community.js

@@ -3,8 +3,12 @@
  * and contact. Every one takes its remote form(s) as required props — the
  * host app owns schemas and preflight; see ./forms for the seam's types.
  */
-export * from './components/account/index.js';
-export * from './components/auth/index.js';
-export * from './components/contact/index.js';
+export { default as AccountPanel } from './components/account/AccountPanel.svelte';
+export { default as NewsletterSignup } from './components/account/NewsletterSignup.svelte';
+export { default as AuthPageShell } from './components/auth/AuthPageShell.svelte';
+export { default as GoogleAuthForm } from './components/auth/GoogleAuthForm.svelte';
+export { default as LoginForm } from './components/auth/LoginForm.svelte';
+export { default as SignupForm } from './components/auth/SignupForm.svelte';
+export { default as ContactForm } from './components/contact/ContactForm.svelte';
 export { default as CommentSection } from './components/weeklies/CommentSection.svelte';
 export { default as ReactionBar } from './components/weeklies/ReactionBar.svelte';

package/dist/components/pages/GetInvolvedPage.svelte

@@ -0,0 +1,139 @@
+<script module lang="ts">
+	import type { CopyEditFor } from '../../content/pages.js';
+	import type { JobOpeningData } from '../../content/types.js';
+	import type { CollectionRef } from '../../edit/types.js';
+	import type { JobEditMap } from '../jobs/JobList.svelte';
+
+	/**
+	 * What a CMS may open on /get-involved. The five «why get in touch» rows
+	 * are copy blocks and edit through `copy` like the headings; `jobs` names
+	 * the openings' collection, which turns on the list's add slot and removes.
+	 */
+	export interface GetInvolvedPageEdit {
+		copy?: CopyEditFor<'get-involved'>;
+		jobFor?: (job: JobOpeningData) => JobEditMap | undefined;
+		jobs?: CollectionRef;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { GET_INVOLVED_REASON_KEYS, type PageCopy } from '../../content/pages.js';
+	import Editable from '../../edit/Editable.svelte';
+	import ContactForm, { type ContactFormInstance } from '../contact/ContactForm.svelte';
+	import JobList from '../jobs/JobList.svelte';
+	import PageShell from '../layout/PageShell.svelte';
+	import CopyIntro from '../ui/CopyIntro.svelte';
+	import DecorShapes from '../ui/DecorShapes.svelte';
+
+	/**
+	 * The contact page: the reasons to write beside the contact form, the
+	 * funding band, the open roles. The form arrives preflighted by the host
+	 * against its own schema (the website's `contactForm.preflight(...)`; a
+	 * CMS mirror passes the package's inert mock) — the one prop the hosts
+	 * fill differently.
+	 *
+	 * The reasons list derives from `GET_INVOLVED_REASON_KEYS`, in that
+	 * order, and does NOT skip a block with no row yet — the same answer
+	 * CopyIntro gives, and the one `PageCopy` states.
+	 */
+	interface Props {
+		content: PageCopy<'get-involved'>;
+		jobs: JobOpeningData[];
+		form: ContactFormInstance;
+		edit?: GetInvolvedPageEdit;
+	}
+
+	let { content, jobs, form, edit }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+</script>
+
+<PageShell title={msg.nav_getInvolved()}>
+	<Editable edit={config.messageEdit?.('nav_getInvolved')} value={msg.nav_getInvolved()}>
+		{#snippet children(text, attrs)}<h1 {...attrs}>{text}</h1>{/snippet}
+	</Editable>
+
+	<section class="contact" aria-labelledby="contact-heading">
+		<div class="contact-text">
+			<Editable edit={edit?.copy?.('contact_heading')} value={content.contact_heading}>
+				{#snippet children(text, attrs)}
+					<h2 class="section-heading" id="contact-heading" {...attrs}>{text}</h2>
+				{/snippet}
+			</Editable>
+			<CopyIntro text={content.contact_intro} edit={edit?.copy?.('contact_intro')} />
+			<ul class="reasons">
+				{#each GET_INVOLVED_REASON_KEYS as key (key)}
+					<!-- The li itself is the editable node: no extra span, so the
+					     read-only markup stays the website's. -->
+					<Editable edit={edit?.copy?.(key)} value={content[key]}>
+						{#snippet children(text, attrs)}<li {...attrs}>{text}</li>{/snippet}
+					</Editable>
+				{/each}
+			</ul>
+		</div>
+		<ContactForm {form} />
+	</section>
+
+	<section class="funding" aria-labelledby="funding-heading">
+		<div>
+			<Editable edit={edit?.copy?.('funding_heading')} value={content.funding_heading}>
+				{#snippet children(text, attrs)}
+					<h2 class="section-heading" id="funding-heading" {...attrs}>{text}</h2>
+				{/snippet}
+			</Editable>
+			<CopyIntro text={content.funding_body} edit={edit?.copy?.('funding_body')} />
+		</div>
+		<DecorShapes flip />
+	</section>
+
+	<section aria-labelledby="careers-heading">
+		<Editable edit={edit?.copy?.('careers_heading')} value={content.careers_heading}>
+			{#snippet children(text, attrs)}
+				<h2 class="section-heading" id="careers-heading" {...attrs}>{text}</h2>
+			{/snippet}
+		</Editable>
+		<CopyIntro text={content.careers_intro} edit={edit?.copy?.('careers_intro')} />
+		<JobList {jobs} editFor={edit?.jobFor} collection={edit?.jobs} />
+	</section>
+</PageShell>
+
+<style>
+	.contact {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		gap: var(--space-5);
+		align-items: start;
+	}
+
+	.reasons {
+		padding-left: var(--space-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		color: var(--color-ink-secondary);
+	}
+
+	.funding {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--space-5);
+		margin-block: var(--space-6);
+		padding: var(--space-4);
+		background: var(--color-cream);
+		border-radius: var(--radius-lg);
+	}
+
+	@media (max-width: 720px) {
+		.contact {
+			grid-template-columns: 1fr;
+		}
+
+		.funding {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+	}
+</style>

package/dist/components/pages/GetInvolvedPage.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { CopyEditFor } from '../../content/pages.js';
+import type { JobOpeningData } from '../../content/types.js';
+import type { CollectionRef } from '../../edit/types.js';
+import type { JobEditMap } from '../jobs/JobList.svelte';
+/**
+ * What a CMS may open on /get-involved. The five «why get in touch» rows
+ * are copy blocks and edit through `copy` like the headings; `jobs` names
+ * the openings' collection, which turns on the list's add slot and removes.
+ */
+export interface GetInvolvedPageEdit {
+    copy?: CopyEditFor<'get-involved'>;
+    jobFor?: (job: JobOpeningData) => JobEditMap | undefined;
+    jobs?: CollectionRef;
+}
+import { type PageCopy } from '../../content/pages.js';
+import { type ContactFormInstance } from '../contact/ContactForm.svelte';
+/**
+ * The contact page: the reasons to write beside the contact form, the
+ * funding band, the open roles. The form arrives preflighted by the host
+ * against its own schema (the website's `contactForm.preflight(...)`; a
+ * CMS mirror passes the package's inert mock) — the one prop the hosts
+ * fill differently.
+ *
+ * The reasons list derives from `GET_INVOLVED_REASON_KEYS`, in that
+ * order, and does NOT skip a block with no row yet — the same answer
+ * CopyIntro gives, and the one `PageCopy` states.
+ */
+interface Props {
+    content: PageCopy<'get-involved'>;
+    jobs: JobOpeningData[];
+    form: ContactFormInstance;
+    edit?: GetInvolvedPageEdit;
+}
+declare const GetInvolvedPage: import("svelte").Component<Props, {}, "">;
+type GetInvolvedPage = ReturnType<typeof GetInvolvedPage>;
+export default GetInvolvedPage;

package/dist/components/pages/HomePage.svelte

@@ -0,0 +1,256 @@
+<script module lang="ts">
+	import type { CopyEditFor } from '../../content/pages.js';
+	import type { MilestoneData, WeeklyCardData } from '../../content/types.js';
+	import type { MilestoneEditMap } from '../timeline/TimelineMilestone.svelte';
+	import type { WeeklyEditMap } from '../weeklies/WeeklieCard.svelte';
+
+	/**
+	 * What a CMS may open on the home page. Every member optional: a read-only
+	 * host passes no `edit` at all, and the render is byte-identical to the
+	 * website's route. The chrome wording (the «Mostra-ho tot» link, the CTAs,
+	 * the search placeholder, «…o explora'n un») needs no member here — the
+	 * module reads `config.messageEdit`, like every component does for its
+	 * own message sites.
+	 */
+	export interface HomePageEdit {
+		copy?: CopyEditFor<'home'>;
+		milestoneFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+		weeklyFor?: (weekly: WeeklyCardData) => WeeklyEditMap | undefined;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { PageCopy } from '../../content/pages.js';
+	import LinkEdit from '../../edit/chrome/LinkEdit.svelte';
+	import Editable from '../../edit/Editable.svelte';
+	import { chromeProperty } from '../../edit/helpers.js';
+	import PageShell from '../layout/PageShell.svelte';
+	import Timeline from '../timeline/Timeline.svelte';
+	import CopyIntro from '../ui/CopyIntro.svelte';
+	import DecorShapes from '../ui/DecorShapes.svelte';
+	import Link from '../ui/Link.svelte';
+	import SearchInput from '../ui/SearchInput.svelte';
+	import WeeklieCard from '../weeklies/WeeklieCard.svelte';
+
+	/**
+	 * The landing page: hero, the latest milestones, a weeklies band with a
+	 * search box, and two CTAs. Takes the website's read projection — its
+	 * `+page.server.ts` returns exactly these three — plus the one thing the
+	 * hosts do differently: where a search goes. The package has no router,
+	 * so the host navigates to its own /weeklies with the query.
+	 */
+	interface Props {
+		content: PageCopy<'home'>;
+		milestones: MilestoneData[];
+		weeklies: WeeklyCardData[];
+		/** Called with the trimmed query after the search box's debounce. */
+		onsearch: (query: string) => void;
+		edit?: HomePageEdit;
+	}
+
+	let { content, milestones, weeklies, onsearch, edit }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	// A link is configurable whole: clicking it while editing opens ONE modal
+	// with Text and Adreça — the label saves as wording, the destination as
+	// its *Href key. Both halves undefined without `messageEdit`, so the
+	// control stays inert (the CommentSection rule).
+	const hrefProperty = (key: string) =>
+		config.messageEdit
+			? chromeProperty(key, {
+					type: 'text',
+					locale: config.locale(),
+					label: config.editMessages.edit_linkUrl()
+				})
+			: undefined;
+	// A placeholder cannot hold a caret, so it edits through the search box's
+	// panel — only where the host exposes `messageEdit` (the ContactForm rule).
+	const placeholderProperty = $derived(
+		config.messageEdit
+			? chromeProperty('weeklies_searchPlaceholder', {
+					type: 'text',
+					locale: config.locale(),
+					label: msg.weeklies_searchPlaceholder()
+				})
+			: undefined
+	);
+</script>
+
+<PageShell title={content.hero_title} description={content.hero_subtitle}>
+	<section class="hero">
+		<div class="shapes left" aria-hidden="true"><DecorShapes /></div>
+		<div class="hero-text">
+			<Editable edit={edit?.copy?.('hero_title')} value={content.hero_title}>
+				{#snippet children(text, attrs)}<h1 {...attrs}>{text}</h1>{/snippet}
+			</Editable>
+			<Editable edit={edit?.copy?.('hero_subtitle')} value={content.hero_subtitle}>
+				{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		</div>
+		<div class="shapes right" aria-hidden="true"><DecorShapes flip /></div>
+	</section>
+
+	<section aria-labelledby="milestones-heading">
+		<Editable edit={edit?.copy?.('milestones_heading')} value={content.milestones_heading}>
+			{#snippet children(text, attrs)}
+				<h2 class="section-heading" id="milestones-heading" {...attrs}>{text}</h2>
+			{/snippet}
+		</Editable>
+		<Timeline {milestones} variant="compact" editFor={edit?.milestoneFor} />
+		<p class="see-all">
+			<LinkEdit
+				text={{ edit: config.messageEdit?.('common_seeAll'), value: msg.common_seeAll() }}
+				href={{ descriptor: hrefProperty('common_seeAllHref'), value: msg.common_seeAllHref() }}
+			>
+				{#snippet control()}
+					<Link href={msg.common_seeAllHref()}>{msg.common_seeAll()} →</Link>
+				{/snippet}
+			</LinkEdit>
+		</p>
+	</section>
+
+	<section class="weeklies-band" aria-labelledby="weeklies-heading">
+		<Editable edit={edit?.copy?.('weeklies_heading')} value={content.weeklies_heading}>
+			{#snippet children(text, attrs)}
+				<h2 class="section-heading" id="weeklies-heading" {...attrs}>{text}</h2>
+			{/snippet}
+		</Editable>
+		<CopyIntro text={content.weeklies_intro} edit={edit?.copy?.('weeklies_intro')} />
+		<SearchInput
+			placeholder={msg.weeklies_searchPlaceholder()}
+			label={msg.weeklies_searchPlaceholder()}
+			onsearch={(query) => onsearch(query)}
+			debounceMs={800}
+			placeholderEdit={placeholderProperty}
+		/>
+		<Editable edit={config.messageEdit?.('weeklies_exploreOne')} value={msg.weeklies_exploreOne()}>
+			{#snippet children(text, attrs)}<p class="explore" {...attrs}>{text}</p>{/snippet}
+		</Editable>
+		<div class="grid">
+			{#each weeklies as weekly (weekly.slug)}
+				<WeeklieCard {weekly} edit={edit?.weeklyFor?.(weekly)} />
+			{/each}
+		</div>
+	</section>
+
+	<section class="know-more" aria-labelledby="know-more-heading">
+		<Editable edit={edit?.copy?.('know_more_heading')} value={content.know_more_heading}>
+			{#snippet children(text, attrs)}<h2 id="know-more-heading" {...attrs}>{text}</h2>{/snippet}
+		</Editable>
+		<div class="ctas">
+			<LinkEdit
+				text={{ edit: config.messageEdit?.('cta_meetTeam'), value: msg.cta_meetTeam() }}
+				href={{ descriptor: hrefProperty('cta_meetTeamHref'), value: msg.cta_meetTeamHref() }}
+			>
+				{#snippet control()}
+					<Link href={msg.cta_meetTeamHref()} class="cta">{msg.cta_meetTeam()}</Link>
+				{/snippet}
+			</LinkEdit>
+			<LinkEdit
+				text={{ edit: config.messageEdit?.('cta_contactUs'), value: msg.cta_contactUs() }}
+				href={{ descriptor: hrefProperty('cta_contactUsHref'), value: msg.cta_contactUsHref() }}
+			>
+				{#snippet control()}
+					<Link href={msg.cta_contactUsHref()} class="cta primary">{msg.cta_contactUs()}</Link>
+				{/snippet}
+			</LinkEdit>
+		</div>
+	</section>
+</PageShell>
+
+<style>
+	.hero {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		gap: var(--space-4);
+		padding-block: var(--space-6);
+	}
+
+	.hero-text {
+		text-align: center;
+	}
+
+	/* The one heading in the library that sets its own size: --text-hero is a
+	 * deliberate decision about the landing page. Every other page module
+	 * takes the h1/h2 scale from the host's global rules. */
+	h1 {
+		font-size: var(--text-hero);
+		margin-bottom: var(--space-3);
+	}
+
+	.hero-text p {
+		font-size: var(--text-lg);
+		color: var(--color-ink-secondary);
+		max-width: 44ch;
+		margin-inline: auto;
+	}
+
+	.see-all :global(a) {
+		color: var(--color-brand);
+		font-weight: 600;
+		text-decoration: none;
+	}
+
+	.weeklies-band {
+		background: var(--color-band-grey);
+		border-radius: var(--radius-lg);
+		padding: var(--space-4);
+		margin-block: var(--space-5);
+	}
+
+	.explore {
+		color: var(--color-ink-secondary);
+		max-width: 60ch;
+	}
+
+	.explore {
+		margin-top: var(--space-3);
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+		gap: var(--space-4);
+	}
+
+	.know-more {
+		text-align: center;
+		padding-block: var(--space-6);
+	}
+
+	.ctas {
+		display: flex;
+		justify-content: center;
+		gap: var(--space-3);
+		flex-wrap: wrap;
+	}
+
+	.ctas :global(a.cta) {
+		padding: var(--space-2) var(--space-5);
+		border: 2px solid var(--color-ink);
+		border-radius: var(--radius);
+		text-decoration: none;
+		font-weight: 600;
+		color: var(--color-ink);
+	}
+
+	.ctas :global(a.cta.primary) {
+		background: var(--color-brand);
+		border-color: var(--color-brand);
+		color: var(--color-surface);
+	}
+
+	@media (max-width: 900px) {
+		.shapes {
+			display: none;
+		}
+
+		.hero {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/dist/components/pages/HomePage.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { CopyEditFor } from '../../content/pages.js';
+import type { MilestoneData, WeeklyCardData } from '../../content/types.js';
+import type { MilestoneEditMap } from '../timeline/TimelineMilestone.svelte';
+import type { WeeklyEditMap } from '../weeklies/WeeklieCard.svelte';
+/**
+ * What a CMS may open on the home page. Every member optional: a read-only
+ * host passes no `edit` at all, and the render is byte-identical to the
+ * website's route. The chrome wording (the «Mostra-ho tot» link, the CTAs,
+ * the search placeholder, «…o explora'n un») needs no member here — the
+ * module reads `config.messageEdit`, like every component does for its
+ * own message sites.
+ */
+export interface HomePageEdit {
+    copy?: CopyEditFor<'home'>;
+    milestoneFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+    weeklyFor?: (weekly: WeeklyCardData) => WeeklyEditMap | undefined;
+}
+import type { PageCopy } from '../../content/pages.js';
+/**
+ * The landing page: hero, the latest milestones, a weeklies band with a
+ * search box, and two CTAs. Takes the website's read projection — its
+ * `+page.server.ts` returns exactly these three — plus the one thing the
+ * hosts do differently: where a search goes. The package has no router,
+ * so the host navigates to its own /weeklies with the query.
+ */
+interface Props {
+    content: PageCopy<'home'>;
+    milestones: MilestoneData[];
+    weeklies: WeeklyCardData[];
+    /** Called with the trimmed query after the search box's debounce. */
+    onsearch: (query: string) => void;
+    edit?: HomePageEdit;
+}
+declare const HomePage: import("svelte").Component<Props, {}, "">;
+type HomePage = ReturnType<typeof HomePage>;
+export default HomePage;

package/dist/components/pages/LegalPage.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">
+	import type { CopyEditFor } from '../../content/pages.js';
+
+	/** What a CMS may open on /legal: its two copy blocks (the body edits as rich text). */
+	export interface LegalPageEdit {
+		copy?: CopyEditFor<'legal'>;
+	}
+</script>
+
+<script lang="ts">
+	import type { PageCopy } from '../../content/pages.js';
+	import Editable from '../../edit/Editable.svelte';
+	import PageShell from '../layout/PageShell.svelte';
+	import RichText from '../ui/RichText.svelte';
+
+	/** The terms page: a heading and one rich-text body, on the chrome shell. */
+	interface Props {
+		content: PageCopy<'legal'>;
+		edit?: LegalPageEdit;
+	}
+
+	let { content, edit }: Props = $props();
+</script>
+
+<PageShell title={content.heading} variant="chrome">
+	<Editable edit={edit?.copy?.('heading')} value={content.heading}>
+		{#snippet children(text, attrs)}<h1 {...attrs}>{text}</h1>{/snippet}
+	</Editable>
+	<div class="body">
+		<RichText body={content.body} edit={edit?.copy?.('body')} />
+	</div>
+</PageShell>
+
+<style>
+	.body {
+		color: var(--color-ink-secondary);
+		max-width: 40rem;
+	}
+</style>

package/dist/components/pages/LegalPage.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CopyEditFor } from '../../content/pages.js';
+/** What a CMS may open on /legal: its two copy blocks (the body edits as rich text). */
+export interface LegalPageEdit {
+    copy?: CopyEditFor<'legal'>;
+}
+import type { PageCopy } from '../../content/pages.js';
+/** The terms page: a heading and one rich-text body, on the chrome shell. */
+interface Props {
+    content: PageCopy<'legal'>;
+    edit?: LegalPageEdit;
+}
+declare const LegalPage: import("svelte").Component<Props, {}, "">;
+type LegalPage = ReturnType<typeof LegalPage>;
+export default LegalPage;