@vit-foundation/ui 0.1.0

package/dist/components/team/index.js

@@ -0,0 +1,2 @@
+export { default as CollaboratorList } from './CollaboratorList.svelte';
+export { default as TeamMemberCard } from './TeamMemberCard.svelte';

package/dist/components/timeline/Timeline.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { MilestoneData } from '../../content/types.js';
+	import type { MilestoneEditMap } from './TimelineMilestone.svelte';
+	import { yearOf } from '../../utils/dates.js';
+	import TimelineMilestone from './TimelineMilestone.svelte';
+
+	interface Props {
+		milestones: MilestoneData[];
+		/** 'compact' = homepage slice; 'full' = transparency history with year markers. */
+		variant?: 'compact' | 'full';
+		/** Edit descriptors for one milestone's fields; see TimelineMilestone. */
+		editFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+	}
+
+	let { milestones, variant = 'compact', editFor }: Props = $props();
+
+	const config = getUiConfig();
+
+	interface TimelineEntry {
+		milestone: MilestoneData;
+		/** Set on the first milestone of each year (full variant only). */
+		yearMarker: string | null;
+	}
+
+	const entries = $derived(
+		milestones.map((milestone, index): TimelineEntry => {
+			const year = yearOf(milestone.occurredOn);
+			const previousYear = index > 0 ? yearOf(milestones[index - 1].occurredOn) : null;
+			return {
+				milestone,
+				yearMarker: variant === 'full' && year !== previousYear ? year : null
+			};
+		})
+	);
+</script>
+
+<!-- Scrollable overflow region: tabindex="0" is required so keyboard users
+     can focus it and scroll horizontally (axe: scrollable-region-focusable). -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	class={`timeline ${variant}`}
+	role="region"
+	aria-label={config.messages.timeline_label()}
+	tabindex="0"
+>
+	<ol>
+		{#each entries as entry (entry.milestone.id)}
+			<li>
+				{#if entry.yearMarker}
+					<span class="year">{entry.yearMarker}</span>
+				{/if}
+				<TimelineMilestone milestone={entry.milestone} edit={editFor?.(entry.milestone)} />
+			</li>
+		{/each}
+	</ol>
+</div>
+
+<style>
+	.timeline {
+		overflow-x: auto;
+		padding-block: var(--space-3);
+		scrollbar-width: thin;
+	}
+
+	ol {
+		list-style: none;
+		margin: 0;
+		padding: var(--space-2) 0 0;
+		display: flex;
+		gap: var(--space-5);
+		position: relative;
+	}
+
+	/* The track line the milestone dots sit on. */
+	ol::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background: var(--color-ink);
+	}
+
+	li {
+		position: relative;
+		flex: 0 0 16rem;
+	}
+
+	.full li {
+		flex-basis: 18rem;
+	}
+
+	.year {
+		position: absolute;
+		top: -2.4rem;
+		left: 0;
+		font-size: var(--text-lg);
+		font-weight: 700;
+		color: var(--color-ink-muted);
+	}
+
+	.full {
+		padding-top: var(--space-5);
+	}
+
+	.timeline:focus-visible {
+		outline: 2px solid var(--color-brand);
+		outline-offset: 4px;
+	}
+
+	.compact {
+		overflow-x: auto;
+	}
+</style>

package/dist/components/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MilestoneData } from '../../content/types.js';
+import type { MilestoneEditMap } from './TimelineMilestone.svelte';
+interface Props {
+    milestones: MilestoneData[];
+    /** 'compact' = homepage slice; 'full' = transparency history with year markers. */
+    variant?: 'compact' | 'full';
+    /** Edit descriptors for one milestone's fields; see TimelineMilestone. */
+    editFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/timeline/TimelineMilestone.svelte

@@ -0,0 +1,127 @@
+<script module lang="ts">
+	import type { EditDescriptor } from '../../edit/types.js';
+
+	/** Which of the milestone's localized fields are editable at this render site. */
+	export interface MilestoneEditMap {
+		title?: EditDescriptor;
+		body?: EditDescriptor;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { MilestoneData } from '../../content/types.js';
+	import Editable from '../../edit/Editable.svelte';
+	import { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from '../../utils/milestones.js';
+	import CardMedia from '../ui/CardMedia.svelte';
+	import DateText from '../ui/DateText.svelte';
+	import Link from '../ui/Link.svelte';
+
+	interface Props {
+		milestone: MilestoneData;
+		/** Marks fields editable where an edit adapter is active. */
+		edit?: MilestoneEditMap;
+	}
+
+	let { milestone, edit }: Props = $props();
+
+	const config = getUiConfig();
+
+	const color = $derived(MILESTONE_CATEGORY_COLOR[milestone.category]);
+	/**
+	 * `link_url` is an unconstrained editable column, and the `press` category
+	 * exists for coverage that lives on someone else's site. Link is for
+	 * internal paths: it runs its href through the app's resolver, which may
+	 * splice a locale segment into a foreign path, and drops the `rel` an
+	 * outbound link needs. The failure is silent: the anchor renders and only
+	 * breaks on click.
+	 *
+	 * This is the only place the rule is stated, and the only column that needs
+	 * it. A project's `external_url` and a collaborator's `url` are external by
+	 * definition, so their render sites emit `rel="external noopener"` with no
+	 * predicate — they never route the value through Link, so nothing splices a
+	 * locale into it.
+	 */
+	const isExternal = $derived(/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(milestone.linkUrl ?? ''));
+</script>
+
+<article style={`--milestone-color: ${color}`}>
+	<span class="dot" aria-hidden="true"></span>
+	<p class="category">{milestoneCategoryLabel(milestone.category, config.messages)}</p>
+	<DateText value={milestone.occurredOn} />
+	<Editable edit={edit?.title} value={milestone.title}>
+		{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
+	</Editable>
+	{#if milestone.body}
+		<Editable edit={edit?.body} value={milestone.body}>
+			{#snippet children(text, attrs)}<p class="body" {...attrs}>{text}</p>{/snippet}
+		</Editable>
+	{/if}
+	{#if milestone.imageUrls.length > 0}
+		<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
+	{/if}
+	{#if milestone.linkUrl}
+		<p class="more">
+			{#if isExternal}
+				<a href={milestone.linkUrl} rel="external noopener">{config.messages.common_readMore()}</a>
+			{:else}
+				<Link href={milestone.linkUrl}>{config.messages.common_readMore()}</Link>
+			{/if}
+		</p>
+	{/if}
+</article>
+
+<style>
+	article {
+		position: relative;
+		padding-top: var(--space-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	/* Sits on the track line drawn by the parent Timeline. */
+	.dot {
+		position: absolute;
+		top: -7px;
+		left: 0;
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: var(--milestone-color);
+		border: 2px solid var(--color-surface);
+	}
+
+	.category {
+		margin: 0;
+		font-size: var(--text-sm);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--milestone-color);
+	}
+
+	h3 {
+		margin: 0;
+		font-size: var(--text-base);
+	}
+
+	.body {
+		margin: 0;
+		font-size: var(--text-sm);
+		color: var(--color-ink-secondary);
+	}
+
+	article > :global(img) {
+		margin-top: var(--space-2);
+	}
+
+	.more {
+		margin: 0;
+	}
+
+	.more :global(a) {
+		color: var(--color-brand);
+		font-weight: 600;
+	}
+</style>

package/dist/components/timeline/TimelineMilestone.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { EditDescriptor } from '../../edit/types.js';
+/** Which of the milestone's localized fields are editable at this render site. */
+export interface MilestoneEditMap {
+    title?: EditDescriptor;
+    body?: EditDescriptor;
+}
+import type { MilestoneData } from '../../content/types.js';
+interface Props {
+    milestone: MilestoneData;
+    /** Marks fields editable where an edit adapter is active. */
+    edit?: MilestoneEditMap;
+}
+declare const TimelineMilestone: import("svelte").Component<Props, {}, "">;
+type TimelineMilestone = ReturnType<typeof TimelineMilestone>;
+export default TimelineMilestone;

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

@@ -0,0 +1,3 @@
+export { default as Timeline } from './Timeline.svelte';
+export { default as TimelineMilestone } from './TimelineMilestone.svelte';
+export type { MilestoneEditMap } from './TimelineMilestone.svelte';

package/dist/components/timeline/index.js

@@ -0,0 +1,2 @@
+export { default as Timeline } from './Timeline.svelte';
+export { default as TimelineMilestone } from './TimelineMilestone.svelte';

package/dist/components/ui/Button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		/**
+		 * The submitting count of the remote form this button posts, or `null`
+		 * for a control that genuinely has no pending state — the classic
+		 * `action="?/…"` post, which has no count to read.
+		 *
+		 * Required and explicitly nullable, for the reason **field constraint**
+		 * gives: optional made "this control cannot be pending" and "nobody
+		 * thought about it" one value, and two submits had already taken the
+		 * second — both logout, both double-submittable. A count rather than a
+		 * boolean because that is what kit hands back, and `> 0` was the rule
+		 * twelve call sites re-derived. It belongs here, once.
+		 */
+		pending: number | null;
+		children: Snippet;
+	}
+
+	let { pending, children, type = 'button', disabled = false, ...rest }: Props = $props();
+
+	// `disabled` stays a separate prop: a button can be unavailable for a reason
+	// of its own — the Google button before consent — as well as while posting.
+	const isPending = $derived((pending ?? 0) > 0);
+</script>
+
+<button {type} {...rest} disabled={disabled || isPending} aria-busy={isPending || undefined}>
+	{@render children()}
+</button>
+
+<style>
+	button {
+		padding: var(--space-2) var(--space-4);
+		border: none;
+		border-radius: var(--radius);
+		background: var(--color-brand);
+		color: var(--color-surface);
+		font-weight: 600;
+		cursor: pointer;
+		transition: background var(--transition-fast);
+	}
+
+	button:hover {
+		background: var(--color-navy);
+	}
+
+	button:disabled {
+		opacity: 0.6;
+		cursor: default;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    /**
+     * The submitting count of the remote form this button posts, or `null`
+     * for a control that genuinely has no pending state — the classic
+     * `action="?/…"` post, which has no count to read.
+     *
+     * Required and explicitly nullable, for the reason **field constraint**
+     * gives: optional made "this control cannot be pending" and "nobody
+     * thought about it" one value, and two submits had already taken the
+     * second — both logout, both double-submittable. A count rather than a
+     * boolean because that is what kit hands back, and `> 0` was the rule
+     * twelve call sites re-derived. It belongs here, once.
+     */
+    pending: number | null;
+    children: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ui/CardMedia.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLImgAttributes {
+		src: string;
+		/** Empty string for decorative images (the surrounding card carries the text). */
+		alt: string;
+		/** CSS aspect-ratio (e.g. '16 / 9'); omit to keep the image's natural height. */
+		ratio?: string;
+	}
+
+	let { src, alt, ratio, ...rest }: Props = $props();
+</script>
+
+<img {src} {alt} loading="lazy" style:aspect-ratio={ratio} {...rest} />
+
+<style>
+	img {
+		border-radius: var(--radius);
+		background: var(--color-band-grey);
+		object-fit: cover;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+interface Props extends HTMLImgAttributes {
+    src: string;
+    /** Empty string for decorative images (the surrounding card carries the text). */
+    alt: string;
+    /** CSS aspect-ratio (e.g. '16 / 9'); omit to keep the image's natural height. */
+    ratio?: string;
+}
+declare const CardMedia: import("svelte").Component<Props, {}, "">;
+type CardMedia = ReturnType<typeof CardMedia>;
+export default CardMedia;

package/dist/components/ui/CardTitle.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** The title content — plain text or a Link/anchor around it. */
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<h3>{@render children()}</h3>
+
+<style>
+	h3 {
+		margin: 0;
+		font-size: var(--text-lg);
+	}
+
+	h3 :global(a) {
+		text-decoration: none;
+		color: var(--color-ink);
+	}
+
+	h3 :global(a:hover) {
+		text-decoration: underline;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The title content — plain text or a Link/anchor around it. */
+    children: Snippet;
+}
+declare const CardTitle: import("svelte").Component<Props, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/ui/CopyIntro.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Editable from '../../edit/Editable.svelte';
+	import type { EditDescriptor } from '../../edit/types.js';
+
+	/**
+	 * An editorial intro paragraph.
+	 *
+	 * Owns the intro's element and styling, which five route style blocks
+	 * repeated. It deliberately does NOT decide what an empty block means: the
+	 * foundation site's repository integration test asserts that every key a
+	 * page declares resolves to non-empty copy, so `''` is a failing suite
+	 * rather than a state to render around. This component used to guard for
+	 * it, and that guard taught every new render site that it had a decision
+	 * to make here.
+	 *
+	 * Not for a hero subtitle or a band lede: those are different visual roles
+	 * with their own styling, not editorial intros.
+	 */
+	interface Props {
+		/** Copy for the block. Asserted non-empty; see the note above. */
+		text: string;
+		/** Marks the copy editable where an edit adapter is active. */
+		edit?: EditDescriptor;
+	}
+
+	let { text, edit }: Props = $props();
+</script>
+
+<Editable {edit} value={text}>
+	{#snippet children(value, attrs)}
+		<p class="intro" {...attrs}>{value}</p>
+	{/snippet}
+</Editable>
+
+<style>
+	.intro {
+		color: var(--color-ink-secondary);
+		max-width: 60ch;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { EditDescriptor } from '../../edit/types.js';
+/**
+ * An editorial intro paragraph.
+ *
+ * Owns the intro's element and styling, which five route style blocks
+ * repeated. It deliberately does NOT decide what an empty block means: the
+ * foundation site's repository integration test asserts that every key a
+ * page declares resolves to non-empty copy, so `''` is a failing suite
+ * rather than a state to render around. This component used to guard for
+ * it, and that guard taught every new render site that it had a decision
+ * to make here.
+ *
+ * Not for a hero subtitle or a band lede: those are different visual roles
+ * with their own styling, not editorial intros.
+ */
+interface Props {
+    /** Copy for the block. Asserted non-empty; see the note above. */
+    text: string;
+    /** Marks the copy editable where an edit adapter is active. */
+    edit?: EditDescriptor;
+}
+declare const CopyIntro: import("svelte").Component<Props, {}, "">;
+type CopyIntro = ReturnType<typeof CopyIntro>;
+export default CopyIntro;

package/dist/components/ui/DateText.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { formatDate } from '../../utils/dates.js';
+
+	/**
+	 * A published, posted or occurred date: the machine-readable value and the
+	 * human string, from one module.
+	 *
+	 * `formatDate` owned the string, but the element around it owned nothing —
+	 * seven render sites restated the `datetime` attribute, the locale
+	 * read and the muted styling, and five read the locale for that one
+	 * line and nothing else. A `<time>` that loses its `datetime` renders
+	 * identically, so the defect is invisible on screen and costs only
+	 * assistive technology and search engines: the same silent-failure shape
+	 * LocaleField owns for forms.
+	 *
+	 * Timestamps are accepted as well as dates. The attribute carries the whole
+	 * ISO value while the text shows the day, which is what a comment's
+	 * `createdAt` needs and what its call site used to slice by hand.
+	 *
+	 * Resolving a timestamp to a day belongs to `formatDate`, not here: slicing
+	 * the first ten characters takes the *UTC* day and then renders it as if it
+	 * were a local one, so a comment posted just after midnight in Barcelona
+	 * showed the previous date.
+	 */
+	interface Props {
+		/** An ISO date (`2026-08-28`) or timestamp; both render as a day. */
+		value: string;
+	}
+
+	let { value }: Props = $props();
+
+	const config = getUiConfig();
+</script>
+
+<time datetime={value}>{formatDate(value, config.locale())}</time>
+
+<style>
+	time {
+		font-size: var(--text-sm);
+		color: var(--color-ink-muted);
+	}
+</style>

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

@@ -0,0 +1,28 @@
+/**
+ * A published, posted or occurred date: the machine-readable value and the
+ * human string, from one module.
+ *
+ * `formatDate` owned the string, but the element around it owned nothing —
+ * seven render sites restated the `datetime` attribute, the locale
+ * read and the muted styling, and five read the locale for that one
+ * line and nothing else. A `<time>` that loses its `datetime` renders
+ * identically, so the defect is invisible on screen and costs only
+ * assistive technology and search engines: the same silent-failure shape
+ * LocaleField owns for forms.
+ *
+ * Timestamps are accepted as well as dates. The attribute carries the whole
+ * ISO value while the text shows the day, which is what a comment's
+ * `createdAt` needs and what its call site used to slice by hand.
+ *
+ * Resolving a timestamp to a day belongs to `formatDate`, not here: slicing
+ * the first ten characters takes the *UTC* day and then renders it as if it
+ * were a local one, so a comment posted just after midnight in Barcelona
+ * showed the previous date.
+ */
+interface Props {
+    /** An ISO date (`2026-08-28`) or timestamp; both render as a day. */
+    value: string;
+}
+declare const DateText: import("svelte").Component<Props, {}, "">;
+type DateText = ReturnType<typeof DateText>;
+export default DateText;

package/dist/components/ui/DecorShapes.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		/** Mirrors the composition horizontally (wireframes place shapes on both page corners). */
+		flip?: boolean;
+	}
+
+	let { flip = false }: Props = $props();
+</script>
+
+<svg
+	class="shapes"
+	class:flip
+	viewBox="0 0 240 160"
+	width="240"
+	height="160"
+	aria-hidden="true"
+	focusable="false"
+>
+	<rect x="0" y="80" width="80" height="80" fill="var(--color-navy)" />
+	<path d="M80 80 L160 80 L80 160 Z" fill="var(--color-magenta)" />
+	<rect x="160" y="80" width="80" height="80" fill="var(--color-cream)" />
+	<path d="M160 0 A80 80 0 0 1 240 80 L160 80 Z" fill="var(--color-brand-light)" />
+	<rect x="80" y="20" width="60" height="60" fill="var(--color-navy)" opacity="0.15" />
+</svg>
+
+<style>
+	.shapes {
+		display: block;
+		max-width: 100%;
+		height: auto;
+	}
+
+	.flip {
+		transform: scaleX(-1);
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    /** Mirrors the composition horizontally (wireframes place shapes on both page corners). */
+    flip?: boolean;
+}
+declare const DecorShapes: import("svelte").Component<Props, {}, "">;
+type DecorShapes = ReturnType<typeof DecorShapes>;
+export default DecorShapes;