@vit-foundation/ui 0.24.1 → 0.25.0

package/dist/components/pages/ProjectPage.svelte

@@ -0,0 +1,128 @@
+<script module lang="ts">
+	import type { ArticleEdit } from '../../content/types.js';
+
+	/** What a CMS may open on a project's own page: title, excerpt, and the body as rich text. */
+	export type ProjectPageEdit = ArticleEdit;
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { ProjectArticleData } from '../../content/types.js';
+	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import Editable from '../../edit/Editable.svelte';
+	import PageShell from '../layout/PageShell.svelte';
+	import DateText from '../ui/DateText.svelte';
+	import Link from '../ui/Link.svelte';
+	import RichText from '../ui/RichText.svelte';
+	import ShareRow from '../ui/ShareRow.svelte';
+
+	/**
+	 * A project's story: date, title, excerpt, hero image, the rich-text body
+	 * with a share row, and — when the project points somewhere — a preview
+	 * card of the external destination. Whether a project HAS a page is the
+	 * host's load's decision (a body-less project 404s there).
+	 */
+	interface Props {
+		project: ProjectArticleData;
+		edit?: ProjectPageEdit;
+	}
+
+	let { project, edit }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+</script>
+
+<PageShell title={project.title} description={project.excerpt} variant="article">
+	<p class="back">
+		<ActionLabel edit={config.messageEdit?.('back_label')} value={msg.back_label()}>
+			{#snippet control()}
+				<Link href="/what-we-do">← {msg.back_label()}</Link>
+			{/snippet}
+		</ActionLabel>
+	</p>
+
+	<header>
+		<DateText value={project.publishedOn} />
+		<Editable edit={edit?.title} value={project.title}>
+			{#snippet children(text, attrs)}<h1 {...attrs}>{text}</h1>{/snippet}
+		</Editable>
+		<Editable edit={edit?.excerpt} value={project.excerpt}>
+			{#snippet children(text, attrs)}<p class="excerpt" {...attrs}>{text}</p>{/snippet}
+		</Editable>
+	</header>
+
+	<img class="hero" src={project.imageUrl} alt="" width="1200" height="675" />
+
+	<div class="layout">
+		<div class="body">
+			{#if project.body}
+				<RichText body={project.body} edit={edit?.body} />
+			{/if}
+			<ShareRow title={project.title} />
+		</div>
+
+		{#if project.externalUrl}
+			<aside>
+				<a class="preview" href={project.externalUrl} rel="external noopener">
+					{#if project.previewImageUrl}
+						<img src={project.previewImageUrl} alt="" width="900" height="300" />
+					{/if}
+					<span>{project.externalUrl.replace(/^https?:\/\//, '')} ↗</span>
+				</a>
+			</aside>
+		{/if}
+	</div>
+</PageShell>
+
+<style>
+	.back :global(a) {
+		text-decoration: none;
+		color: var(--color-ink-secondary);
+	}
+
+	h1 {
+		margin: var(--space-2) 0;
+	}
+
+	.excerpt {
+		font-size: var(--text-lg);
+		color: var(--color-ink-secondary);
+		max-width: 60ch;
+	}
+
+	.hero {
+		border-radius: var(--radius-lg);
+		margin-block: var(--space-4);
+		background: var(--color-band-grey);
+	}
+
+	.layout {
+		display: grid;
+		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+		gap: var(--space-5);
+		align-items: start;
+	}
+
+	.preview {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		border: 1px solid var(--color-hairline);
+		border-radius: var(--radius);
+		padding: var(--space-3);
+		text-decoration: none;
+		color: var(--color-brand);
+		font-weight: 600;
+	}
+
+	.preview img {
+		border-radius: var(--radius);
+	}
+
+	@media (max-width: 720px) {
+		.layout {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { ArticleEdit } from '../../content/types.js';
+/** What a CMS may open on a project's own page: title, excerpt, and the body as rich text. */
+export type ProjectPageEdit = ArticleEdit;
+import type { ProjectArticleData } from '../../content/types.js';
+/**
+ * A project's story: date, title, excerpt, hero image, the rich-text body
+ * with a share row, and — when the project points somewhere — a preview
+ * card of the external destination. Whether a project HAS a page is the
+ * host's load's decision (a body-less project 404s there).
+ */
+interface Props {
+    project: ProjectArticleData;
+    edit?: ProjectPageEdit;
+}
+declare const ProjectPage: import("svelte").Component<Props, {}, "">;
+type ProjectPage = ReturnType<typeof ProjectPage>;
+export default ProjectPage;

package/dist/components/pages/TransparencyPage.svelte

@@ -0,0 +1,164 @@
+<script module lang="ts">
+	import type { CopyEditFor } from '../../content/pages.js';
+	import type { MilestoneData } from '../../content/types.js';
+	import type { CollectionRef } from '../../edit/types.js';
+	import type { MilestoneEditMap } from '../timeline/TimelineMilestone.svelte';
+
+	/**
+	 * What a CMS may open on /transparency. `milestones` names the timeline's
+	 * collection (add slots, removes); the category chips edit through
+	 * `config.messageEdit` over their own `category_*` keys, and the search
+	 * placeholder through the box's panel — neither needs a member here.
+	 */
+	export interface TransparencyPageEdit {
+		copy?: CopyEditFor<'transparency'>;
+		milestoneFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+		milestones?: CollectionRef;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { PageCopy } from '../../content/pages.js';
+	import { MILESTONE_CATEGORIES, type MilestoneCategory } from '../../content/types.js';
+	import Editable from '../../edit/Editable.svelte';
+	import { chromeProperty } from '../../edit/helpers.js';
+	import { matchesMilestoneFilter, milestoneCategoryLabel } from '../../utils/milestones.js';
+	import { createUrlFilters } from '../../utils/url-filters.svelte.js';
+	import PageShell from '../layout/PageShell.svelte';
+	import Timeline from '../timeline/Timeline.svelte';
+	import CopyIntro from '../ui/CopyIntro.svelte';
+	import FilterChips from '../ui/FilterChips.svelte';
+	import SearchInput from '../ui/SearchInput.svelte';
+
+	/** The two filters, as they ride the URL. An alias: createUrlFilters needs an index signature. */
+	type TimelineFilters = { q: string; category: MilestoneCategory | null };
+
+	/**
+	 * The full milestone history with a search box and category chips. The
+	 * whole timeline is already loaded, so filtering stays in the browser
+	 * (`matchesMilestoneFilter`); only the URL is mirrored, through the
+	 * host's shallow-routing write — the package has no router.
+	 */
+	interface Props {
+		content: PageCopy<'transparency'>;
+		milestones: MilestoneData[];
+		/** The server-parsed filters of a deep link; invalid values already fell back. */
+		query: TimelineFilters;
+		/** Shallow-routing URL write — see UrlFiltersConfig.replaceUrl. */
+		replaceUrl: (path: string) => void;
+		edit?: TransparencyPageEdit;
+	}
+
+	let { content, milestones, query, replaceUrl, edit }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	const filters = createUrlFilters<TimelineFilters>({
+		path: '/transparency',
+		initial: () => ({ q: query.q, category: query.category }),
+		toQuery: (values) => ({ q: values.q, category: values.category }),
+		replaceUrl: (path) => replaceUrl(path)
+	});
+
+	// $derived, not a const: the labels resolve to STRINGS through `msg`, and
+	// a CMS switching its editing locale (or saving a wording) repaints every
+	// other string on the page — the chips must follow.
+	const chips = $derived(
+		MILESTONE_CATEGORIES.map((value) => ({ value, label: milestoneCategoryLabel(value, msg) }))
+	);
+
+	const filtered = $derived(
+		milestones.filter((milestone) => matchesMilestoneFilter(milestone, filters.values))
+	);
+
+	const isCategory = (value: string | null): value is MilestoneCategory =>
+		value !== null && (MILESTONE_CATEGORIES as readonly string[]).includes(value);
+
+	function handleSearch(value: string): void {
+		filters.update({ q: value });
+	}
+
+	function handleCategory(value: string | null): void {
+		filters.update({ category: isCategory(value) ? value : null });
+	}
+
+	/** A chip's wording is a catalog key — `category_lab` for `lab`. */
+	const categoryKey = (category: MilestoneCategory) => `category_${category}` as const;
+
+	const placeholderProperty = $derived(
+		config.messageEdit
+			? chromeProperty('timeline_searchPlaceholder', {
+					type: 'text',
+					locale: config.locale(),
+					label: msg.timeline_searchPlaceholder()
+				})
+			: undefined
+	);
+</script>
+
+<PageShell title={content.heading} variant="wide">
+	<header>
+		<Editable edit={edit?.copy?.('heading')} value={content.heading}>
+			{#snippet children(text, attrs)}<h1 {...attrs}>{text}</h1>{/snippet}
+		</Editable>
+		<CopyIntro text={content.intro} edit={edit?.copy?.('intro')} />
+	</header>
+
+	<div class="controls">
+		<SearchInput
+			value={filters.values.q}
+			placeholder={msg.timeline_searchPlaceholder()}
+			label={msg.timeline_searchPlaceholder()}
+			onsearch={handleSearch}
+			placeholderEdit={placeholderProperty}
+		/>
+		<FilterChips
+			{chips}
+			selected={filters.values.category}
+			label={msg.timeline_filterLabel()}
+			onchange={handleCategory}
+			editFor={(chip) =>
+				isCategory(chip.value) ? config.messageEdit?.(categoryKey(chip.value)) : undefined}
+		/>
+	</div>
+
+	<section aria-live="polite" aria-label={msg.timeline_label()}>
+		{#if filtered.length === 0}
+			<Editable edit={config.messageEdit?.('timeline_empty')} value={msg.timeline_empty()}>
+				{#snippet children(text, attrs)}<p class="empty" {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		{:else}
+			<Timeline
+				milestones={filtered}
+				variant="full"
+				editFor={edit?.milestoneFor}
+				collection={edit?.milestones}
+			/>
+		{/if}
+	</section>
+</PageShell>
+
+<style>
+	header,
+	.controls {
+		max-width: var(--content-max);
+		margin-inline: auto;
+	}
+
+	.controls {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-4);
+		align-items: center;
+		margin-block: var(--space-4);
+	}
+
+	.empty {
+		max-width: var(--content-max);
+		margin-inline: auto;
+		color: var(--color-ink-secondary);
+		padding-block: var(--space-5);
+	}
+</style>

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

@@ -0,0 +1,40 @@
+import type { CopyEditFor } from '../../content/pages.js';
+import type { MilestoneData } from '../../content/types.js';
+import type { CollectionRef } from '../../edit/types.js';
+import type { MilestoneEditMap } from '../timeline/TimelineMilestone.svelte';
+/**
+ * What a CMS may open on /transparency. `milestones` names the timeline's
+ * collection (add slots, removes); the category chips edit through
+ * `config.messageEdit` over their own `category_*` keys, and the search
+ * placeholder through the box's panel — neither needs a member here.
+ */
+export interface TransparencyPageEdit {
+    copy?: CopyEditFor<'transparency'>;
+    milestoneFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+    milestones?: CollectionRef;
+}
+import type { PageCopy } from '../../content/pages.js';
+import { type MilestoneCategory } from '../../content/types.js';
+/** The two filters, as they ride the URL. An alias: createUrlFilters needs an index signature. */
+type TimelineFilters = {
+    q: string;
+    category: MilestoneCategory | null;
+};
+/**
+ * The full milestone history with a search box and category chips. The
+ * whole timeline is already loaded, so filtering stays in the browser
+ * (`matchesMilestoneFilter`); only the URL is mirrored, through the
+ * host's shallow-routing write — the package has no router.
+ */
+interface Props {
+    content: PageCopy<'transparency'>;
+    milestones: MilestoneData[];
+    /** The server-parsed filters of a deep link; invalid values already fell back. */
+    query: TimelineFilters;
+    /** Shallow-routing URL write — see UrlFiltersConfig.replaceUrl. */
+    replaceUrl: (path: string) => void;
+    edit?: TransparencyPageEdit;
+}
+declare const TransparencyPage: import("svelte").Component<Props, {}, "">;
+type TransparencyPage = ReturnType<typeof TransparencyPage>;
+export default TransparencyPage;

package/dist/components/pages/WeekliesPage.svelte

@@ -0,0 +1,184 @@
+<script module lang="ts">
+	import type { CopyEditFor } from '../../content/pages.js';
+	import type { ThemeData, WeeklyCardData } from '../../content/types.js';
+	import type { EditDescriptor } from '../../edit/types.js';
+	import type { WeeklyEditMap } from '../weeklies/WeeklieCard.svelte';
+
+	/**
+	 * What a CMS may open on /weeklies. A theme chip's wording is a THEME's
+	 * localized name — an entity, unlike the category chips — so the host
+	 * answers `themeFor` per theme. The search placeholder and the sort
+	 * options edit through their panels over `config.messageEdit`; the h1
+	 * and the empty state inline over the same gate.
+	 */
+	export interface WeekliesPageEdit {
+		copy?: CopyEditFor<'weeklies'>;
+		weeklyFor?: (weekly: WeeklyCardData) => WeeklyEditMap | undefined;
+		themeFor?: (theme: ThemeData) => EditDescriptor | undefined;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { PageCopy } from '../../content/pages.js';
+	import type { SortDirection } from '../../content/types.js';
+	import Editable from '../../edit/Editable.svelte';
+	import { chromeProperty } from '../../edit/helpers.js';
+	import type { WeeklyListServerData } from '../../utils/weekly-list-contract.js';
+	import { createWeeklyList, type WeeklyListConfig } from '../../utils/weekly-list.svelte.js';
+	import PageShell from '../layout/PageShell.svelte';
+	import CopyIntro from '../ui/CopyIntro.svelte';
+	import FilterChips from '../ui/FilterChips.svelte';
+	import Pagination from '../ui/Pagination.svelte';
+	import SearchInput from '../ui/SearchInput.svelte';
+	import SortSelect from '../weeklies/SortSelect.svelte';
+	import WeeklieCard from '../weeklies/WeeklieCard.svelte';
+
+	/**
+	 * The weeklies index: theme chips, search, sort, the grid, paging.
+	 * Filters, paging, the refetch and the server/client reconciliation are
+	 * `createWeeklyList`'s; this renders what it reports. The three things
+	 * the package deliberately lacks — a backend, an i18n runtime and a
+	 * router — are the host's `fetchPage`, the provider's locale, and
+	 * `replaceUrl`.
+	 *
+	 * The paging links go to `Pagination` UNWRAPPED: it renders them through
+	 * `Link`, which resolves every internal path through `UiConfig.href`, so
+	 * a host that re-roots the site (vit-brain's `mirrorHref`) must NOT wrap
+	 * `hrefFor` itself — that prefixed the path twice.
+	 */
+	interface Props {
+		content: PageCopy<'weeklies'>;
+		themes: ThemeData[];
+		/** The server-rendered page — the website's route `data` satisfies it as is. */
+		server: WeeklyListServerData;
+		/** The host's remote query for the first page of a changed filter. */
+		fetchPage: WeeklyListConfig['fetchPage'];
+		/** Shallow-routing URL write — see UrlFiltersConfig.replaceUrl. */
+		replaceUrl: (path: string) => void;
+		edit?: WeekliesPageEdit;
+	}
+
+	let { content, themes, server, fetchPage, replaceUrl, edit }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	const list = createWeeklyList({
+		server: () => server,
+		fetchPage: (input) => fetchPage(input),
+		locale: () => config.locale(),
+		replaceUrl: (path) => replaceUrl(path)
+	});
+
+	const chips = $derived(themes.map((theme) => ({ value: theme.slug, label: theme.name })));
+	const themeEdit = (chip: { value: string }) => {
+		const theme = themes.find((candidate) => candidate.slug === chip.value);
+		return theme ? edit?.themeFor?.(theme) : undefined;
+	};
+
+	// Wording that cannot hold a caret — the placeholder, the two <option>
+	// labels — edits through a panel, only where the host exposes `messageEdit`.
+	const placeholderProperty = $derived(
+		config.messageEdit
+			? chromeProperty('weeklies_searchPlaceholder', {
+					type: 'text',
+					locale: config.locale(),
+					label: msg.weeklies_searchPlaceholder()
+				})
+			: undefined
+	);
+	const sortOptionProperty = (direction: SortDirection) =>
+		config.messageEdit
+			? chromeProperty(direction === 'desc' ? 'weeklies_sortDesc' : 'weeklies_sortAsc', {
+					type: 'text',
+					locale: config.locale(),
+					label: direction === 'desc' ? msg.weeklies_sortDesc() : msg.weeklies_sortAsc()
+				})
+			: undefined;
+</script>
+
+<PageShell title={msg.nav_weeklies()}>
+	<header>
+		<Editable edit={config.messageEdit?.('nav_weeklies')} value={msg.nav_weeklies()}>
+			{#snippet children(text, attrs)}<h1 {...attrs}>{text}</h1>{/snippet}
+		</Editable>
+		<CopyIntro text={content.intro} edit={edit?.copy?.('intro')} />
+	</header>
+
+	<div class="controls">
+		<FilterChips
+			{chips}
+			selected={list.filters.theme}
+			label={msg.weeklies_filterLabel()}
+			onchange={(value) => list.update({ theme: value })}
+			editFor={themeEdit}
+		/>
+		<SearchInput
+			value={list.filters.q}
+			placeholder={msg.weeklies_searchPlaceholder()}
+			label={msg.weeklies_searchPlaceholder()}
+			onsearch={(q) => list.update({ q })}
+			placeholderEdit={placeholderProperty}
+		/>
+		<SortSelect
+			value={list.filters.sort}
+			onchange={(sort) => list.update({ sort })}
+			optionsEdit={sortOptionProperty}
+		/>
+	</div>
+
+	<section
+		aria-live="polite"
+		aria-busy={list.isLoading}
+		aria-label={msg.weeklies_searchResultsLabel()}
+	>
+		{#if list.loadError}
+			<p class="load-error" role="alert">{msg.weeklies_loadError()}</p>
+		{/if}
+		{#if list.items.length === 0}
+			<Editable edit={config.messageEdit?.('weeklies_empty')} value={msg.weeklies_empty()}>
+				{#snippet children(text, attrs)}<p class="empty" {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		{:else}
+			<div class="grid">
+				{#each list.items as weekly (weekly.slug)}
+					<WeeklieCard {weekly} edit={edit?.weeklyFor?.(weekly)} />
+				{/each}
+			</div>
+		{/if}
+	</section>
+
+	<Pagination
+		page={list.page}
+		total={list.total}
+		pageSize={server.pageSize}
+		href={(page) => list.hrefFor(page)}
+	/>
+</PageShell>
+
+<style>
+	.controls {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-4);
+		margin-block: var(--space-4);
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+		gap: var(--space-5) var(--space-4);
+	}
+
+	.empty {
+		color: var(--color-ink-secondary);
+		padding-block: var(--space-5);
+	}
+
+	.load-error {
+		color: var(--series-8);
+		font-weight: 600;
+	}
+</style>

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

@@ -0,0 +1,46 @@
+import type { CopyEditFor } from '../../content/pages.js';
+import type { ThemeData, WeeklyCardData } from '../../content/types.js';
+import type { EditDescriptor } from '../../edit/types.js';
+import type { WeeklyEditMap } from '../weeklies/WeeklieCard.svelte';
+/**
+ * What a CMS may open on /weeklies. A theme chip's wording is a THEME's
+ * localized name — an entity, unlike the category chips — so the host
+ * answers `themeFor` per theme. The search placeholder and the sort
+ * options edit through their panels over `config.messageEdit`; the h1
+ * and the empty state inline over the same gate.
+ */
+export interface WeekliesPageEdit {
+    copy?: CopyEditFor<'weeklies'>;
+    weeklyFor?: (weekly: WeeklyCardData) => WeeklyEditMap | undefined;
+    themeFor?: (theme: ThemeData) => EditDescriptor | undefined;
+}
+import type { PageCopy } from '../../content/pages.js';
+import type { WeeklyListServerData } from '../../utils/weekly-list-contract.js';
+import { type WeeklyListConfig } from '../../utils/weekly-list.svelte.js';
+/**
+ * The weeklies index: theme chips, search, sort, the grid, paging.
+ * Filters, paging, the refetch and the server/client reconciliation are
+ * `createWeeklyList`'s; this renders what it reports. The three things
+ * the package deliberately lacks — a backend, an i18n runtime and a
+ * router — are the host's `fetchPage`, the provider's locale, and
+ * `replaceUrl`.
+ *
+ * The paging links go to `Pagination` UNWRAPPED: it renders them through
+ * `Link`, which resolves every internal path through `UiConfig.href`, so
+ * a host that re-roots the site (vit-brain's `mirrorHref`) must NOT wrap
+ * `hrefFor` itself — that prefixed the path twice.
+ */
+interface Props {
+    content: PageCopy<'weeklies'>;
+    themes: ThemeData[];
+    /** The server-rendered page — the website's route `data` satisfies it as is. */
+    server: WeeklyListServerData;
+    /** The host's remote query for the first page of a changed filter. */
+    fetchPage: WeeklyListConfig['fetchPage'];
+    /** Shallow-routing URL write — see UrlFiltersConfig.replaceUrl. */
+    replaceUrl: (path: string) => void;
+    edit?: WeekliesPageEdit;
+}
+declare const WeekliesPage: import("svelte").Component<Props, {}, "">;
+type WeekliesPage = ReturnType<typeof WeekliesPage>;
+export default WeekliesPage;