@vit-foundation/ui 0.1.0

package/dist/components/layout/Nav.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { SiteLink } from '../../config/types.js';
+	import { isPathUnder } from '../../utils/paths.js';
+	import GhostButton from '../ui/GhostButton.svelte';
+	import Link from '../ui/Link.svelte';
+
+	interface Props {
+		/**
+		 * Primary navigation entries. A prop rather than a package constant:
+		 * the host app owns its routes and re-derives the labels when its
+		 * locale changes (the foundation site wraps `siteLinks()` in $derived).
+		 */
+		links: SiteLink[];
+		/** Logged-in account shown as a menu item linking to /account. */
+		account?: { displayName: string } | null;
+		/** The URL highlighting reads from. Only tests and stories pass one. */
+		url?: URL;
+	}
+
+	let { links, account = null, url = undefined }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	let isMenuOpen = $state(false);
+
+	// The localhost fallback keeps a provider-less render (a story, a bare
+	// test) standing: nothing highlights, nothing crashes.
+	const currentUrl = $derived(url ?? config.url() ?? new URL('http://localhost/'));
+	const currentPath = $derived(config.canonicalPathname(currentUrl));
+
+	// /what-we-do stays current on /what-we-do/<slug>.
+	const isCurrent = (href: string): boolean => isPathUnder(currentPath, href);
+
+	const MENU_TOGGLE_ID = 'site-menu-toggle';
+
+	// Nav renders in the root layout, so it is never remounted and `isMenuOpen`
+	// survives every client-side navigation. Reading the path here is what
+	// subscribes this effect to it: without it, the menu a reader opened stays
+	// expanded over the page they navigated to, still asserting aria-expanded,
+	// with the whole menu to tab back through to reach the new content.
+	$effect(() => {
+		void currentPath;
+		isMenuOpen = false;
+	});
+
+	function closeOnEscape(event: KeyboardEvent): void {
+		if (event.key !== 'Escape' || !isMenuOpen) return;
+		isMenuOpen = false;
+		// Focus is inside the menu that just disappeared; put it back on the
+		// control that opened it. GhostButton spreads its rest props onto the
+		// button, so the id reaches the real element.
+		document.getElementById(MENU_TOGGLE_ID)?.focus();
+	}
+</script>
+
+<svelte:window onkeydown={closeOnEscape} />
+
+<header class="header">
+	<nav class="band-bar" aria-label={msg.nav_mainLabel()}>
+		<span class="logo">
+			<Link href="/" aria-label={msg.nav_home()}>{config.siteName}</Link>
+		</span>
+
+		<GhostButton
+			id={MENU_TOGGLE_ID}
+			class="menu-toggle"
+			aria-expanded={isMenuOpen}
+			aria-controls="site-menu"
+			onclick={() => (isMenuOpen = !isMenuOpen)}
+		>
+			{msg.nav_menuLabel()}
+		</GhostButton>
+
+		<div class="menu" id="site-menu" class:open={isMenuOpen}>
+			<ul class="links">
+				{#each links as link (link.href)}
+					<li>
+						<Link href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
+							{link.label}
+						</Link>
+					</li>
+				{/each}
+			</ul>
+
+			{#if account}
+				<ul class="account" aria-label={msg.account_navLabel()}>
+					<li>
+						<Link href="/account" aria-current={isCurrent('/account') ? 'page' : undefined}>
+							{account.displayName}
+						</Link>
+					</li>
+				</ul>
+			{/if}
+
+			<ul class="locales" aria-label={msg.lang_switcherLabel()}>
+				{#each config.locales as locale (locale)}
+					<li>
+						<Link
+							href={currentPath + currentUrl.search}
+							{locale}
+							data-sveltekit-reload
+							aria-current={config.locale() === locale ? 'true' : undefined}
+						>
+							{locale}
+						</Link>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</nav>
+</header>
+
+<style>
+	.header {
+		border-bottom: 1px solid var(--color-hairline);
+		background: var(--color-surface);
+	}
+
+	nav {
+		display: flex;
+		align-items: center;
+		gap: var(--space-4);
+		flex-wrap: wrap;
+	}
+
+	.logo :global(a) {
+		font-size: var(--text-xl);
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-decoration: none;
+		color: var(--color-ink);
+	}
+
+	.menu {
+		display: flex;
+		flex: 1;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-4);
+	}
+
+	ul {
+		list-style: none;
+		display: flex;
+		gap: var(--space-3);
+		margin: 0;
+		padding: 0;
+	}
+
+	.links :global(a) {
+		text-decoration: none;
+		color: var(--color-ink-secondary);
+		padding: var(--space-1) 0;
+		border-bottom: 2px solid transparent;
+		transition: color var(--transition-fast);
+	}
+
+	.links :global(a:hover) {
+		color: var(--color-ink);
+	}
+
+	.links :global(a[aria-current='page']) {
+		color: var(--color-ink);
+		border-bottom-color: var(--color-brand);
+	}
+
+	.account {
+		margin-left: auto;
+	}
+
+	.account :global(a) {
+		text-decoration: none;
+		color: var(--color-ink-secondary);
+		font-weight: 600;
+		padding: var(--space-1) 0;
+		border-bottom: 2px solid transparent;
+		transition: color var(--transition-fast);
+	}
+
+	.account :global(a:hover) {
+		color: var(--color-ink);
+	}
+
+	.account :global(a[aria-current='page']) {
+		color: var(--color-ink);
+		border-bottom-color: var(--color-brand);
+	}
+
+	.locales :global(a) {
+		text-decoration: none;
+		color: var(--color-ink-muted);
+		text-transform: uppercase;
+		font-size: var(--text-sm);
+		padding: var(--space-1);
+	}
+
+	.locales :global(a[aria-current='true']) {
+		color: var(--color-brand);
+		font-weight: 700;
+	}
+
+	nav :global(.menu-toggle) {
+		display: none;
+	}
+
+	@media (max-width: 720px) {
+		nav :global(.menu-toggle) {
+			display: block;
+			margin-left: auto;
+		}
+
+		.menu {
+			display: none;
+			flex-basis: 100%;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.menu.open {
+			display: flex;
+		}
+
+		.links {
+			flex-direction: column;
+		}
+	}
+</style>

package/dist/components/layout/Nav.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SiteLink } from '../../config/types.js';
+interface Props {
+    /**
+     * Primary navigation entries. A prop rather than a package constant:
+     * the host app owns its routes and re-derives the labels when its
+     * locale changes (the foundation site wraps `siteLinks()` in $derived).
+     */
+    links: SiteLink[];
+    /** Logged-in account shown as a menu item linking to /account. */
+    account?: {
+        displayName: string;
+    } | null;
+    /** The URL highlighting reads from. Only tests and stories pass one. */
+    url?: URL;
+}
+declare const Nav: import("svelte").Component<Props, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/components/layout/PageShell.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getUiConfig } from '../../config/context.js';
+
+	/**
+	 * The chrome every page shares: the content column, the vertical rhythm,
+	 * and the browser title, composed as `title — siteName` from the config's
+	 * site name. (The foundation site's error page spells the same format on
+	 * its own; the two are one decision, noted in both places.)
+	 *
+	 * The shape is one named variant rather than four presentation flags.
+	 * Width, spacing, stacking and the wrapper element were independent props,
+	 * so 24 combinations were expressible and 6 were used — `width="wide"
+	 * element="article" stack` typechecked and meant nothing. Naming the shapes
+	 * makes the ones that exist the only ones a page can ask for.
+	 */
+	type PageVariant =
+		/** The standard column. */
+		| 'content'
+		/** Full width, for content that is deliberately wider (the timeline). */
+		| 'wide'
+		/** A single editorial piece at the standard column width (a project). */
+		| 'article'
+		/** A single editorial piece at a long-form reading measure (a weekly). */
+		| 'reading'
+		/** Sits lower on the page: account, admin, legal. */
+		| 'chrome'
+		/** Chrome spacing with stacked children: the auth and unsubscribe pages. */
+		| 'form';
+
+	interface Props {
+		/**
+		 * Browser title; the site name is appended. Pages title themselves from
+		 * page copy, and content.getPage returns '' for a row that is missing,
+		 * so an empty title is a real state — it renders as the site name alone
+		 * rather than as a dangling separator.
+		 */
+		title: string;
+		/** Meta description, for the pages that have real copy for one. */
+		description?: string;
+		variant?: PageVariant;
+		children: Snippet;
+	}
+
+	let { title, description, variant = 'content', children }: Props = $props();
+
+	const config = getUiConfig();
+	const pageTitle = $derived(title ? `${title} — ${config.siteName}` : config.siteName);
+	/**
+	 * The editorial variants render an <article>, and say so to crawlers too.
+	 * og:type was hardcoded to 'website' while the element already switched,
+	 * so every weekly and every project story shipped the wrong social type.
+	 */
+	const isEditorial = $derived(variant === 'article' || variant === 'reading');
+	const element = $derived(isEditorial ? 'article' : 'div');
+</script>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+	<meta property="og:title" content={pageTitle} />
+	<meta property="og:type" content={isEditorial ? 'article' : 'website'} />
+	{#if description}
+		<meta name="description" content={description} />
+		<meta property="og:description" content={description} />
+	{/if}
+</svelte:head>
+
+<!-- class: directives rather than an interpolated string, so Svelte's CSS
+     scoping can see every selector and does not prune them as unused. -->
+<svelte:element
+	this={element}
+	class="page"
+	class:reading={variant === 'reading'}
+	class:wide={variant === 'wide'}
+	class:chrome={variant === 'chrome' || variant === 'form'}
+	class:stack={variant === 'form'}
+>
+	{@render children()}
+</svelte:element>
+
+<style>
+	.page {
+		max-width: var(--content-max);
+		margin: 0 auto;
+		padding: var(--space-4) var(--space-3);
+	}
+
+	.reading {
+		max-width: 48rem;
+	}
+
+	/* The timeline is intentionally wider than the content column. */
+	.wide {
+		max-width: none;
+		margin: 0;
+	}
+
+	.chrome {
+		padding: var(--space-5) var(--space-3) var(--space-6);
+	}
+
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+</style>

package/dist/components/layout/PageShell.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+/**
+ * The chrome every page shares: the content column, the vertical rhythm,
+ * and the browser title, composed as `title — siteName` from the config's
+ * site name. (The foundation site's error page spells the same format on
+ * its own; the two are one decision, noted in both places.)
+ *
+ * The shape is one named variant rather than four presentation flags.
+ * Width, spacing, stacking and the wrapper element were independent props,
+ * so 24 combinations were expressible and 6 were used — `width="wide"
+ * element="article" stack` typechecked and meant nothing. Naming the shapes
+ * makes the ones that exist the only ones a page can ask for.
+ */
+type PageVariant = 
+/** The standard column. */
+'content'
+/** Full width, for content that is deliberately wider (the timeline). */
+ | 'wide'
+/** A single editorial piece at the standard column width (a project). */
+ | 'article'
+/** A single editorial piece at a long-form reading measure (a weekly). */
+ | 'reading'
+/** Sits lower on the page: account, admin, legal. */
+ | 'chrome'
+/** Chrome spacing with stacked children: the auth and unsubscribe pages. */
+ | 'form';
+interface Props {
+    /**
+     * Browser title; the site name is appended. Pages title themselves from
+     * page copy, and content.getPage returns '' for a row that is missing,
+     * so an empty title is a real state — it renders as the site name alone
+     * rather than as a dangling separator.
+     */
+    title: string;
+    /** Meta description, for the pages that have real copy for one. */
+    description?: string;
+    variant?: PageVariant;
+    children: Snippet;
+}
+declare const PageShell: import("svelte").Component<Props, {}, "">;
+type PageShell = ReturnType<typeof PageShell>;
+export default PageShell;

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

@@ -0,0 +1,3 @@
+export { default as Footer } from './Footer.svelte';
+export { default as Nav } from './Nav.svelte';
+export { default as PageShell } from './PageShell.svelte';

package/dist/components/layout/index.js

@@ -0,0 +1,3 @@
+export { default as Footer } from './Footer.svelte';
+export { default as Nav } from './Nav.svelte';
+export { default as PageShell } from './PageShell.svelte';

package/dist/components/projects/ProjectCard.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+	import type { EditDescriptor } from '../../edit/types.js';
+
+	/** Which of the card's localized fields are editable at this render site. */
+	export interface ProjectEditMap {
+		title?: EditDescriptor;
+		excerpt?: EditDescriptor;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { ProjectCardData } from '../../content/types.js';
+	import { getEditAdapter } from '../../edit/context.js';
+	import Editable from '../../edit/Editable.svelte';
+	import CardMedia from '../ui/CardMedia.svelte';
+	import CardTitle from '../ui/CardTitle.svelte';
+	import DateText from '../ui/DateText.svelte';
+	import Link from '../ui/Link.svelte';
+
+	interface Props {
+		project: ProjectCardData;
+		/** 'wide' for collaboration rows, 'grid' for passion-project tiles. */
+		variant?: 'wide' | 'grid';
+		/** Marks fields editable where an edit adapter is active. */
+		edit?: ProjectEditMap;
+	}
+
+	let { project, variant = 'grid', edit }: Props = $props();
+
+	const config = getUiConfig();
+	const adapter = getEditAdapter();
+
+	// See WeeklieCard: an editing title renders as plain text, never inside
+	// the story link or the external anchor.
+	const titleEditing = $derived(edit?.title !== undefined && (adapter?.isEditing ?? false));
+</script>
+
+<article class={variant}>
+	<CardMedia src={project.imageUrl} alt="" ratio="16 / 9" width="1200" height="675" />
+	<div class="text">
+		<DateText value={project.publishedOn} />
+		<CardTitle>
+			{#if titleEditing}
+				<Editable edit={edit?.title} value={project.title}>
+					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+				</Editable>
+			{:else if project.hasStory}
+				<Link href={`/what-we-do/${project.slug}`}>{project.title}</Link>
+			{:else if project.externalUrl}
+				<a href={project.externalUrl} rel="external noopener">{project.title}</a>
+			{:else}
+				{project.title}
+			{/if}
+		</CardTitle>
+		<Editable edit={edit?.excerpt} value={project.excerpt}>
+			{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+		</Editable>
+		{#if project.hasStory}
+			<Link href={`/what-we-do/${project.slug}`} class="more">
+				{config.messages.common_readMore()}
+			</Link>
+		{/if}
+	</div>
+</article>
+
+<style>
+	article {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	article.wide {
+		flex-direction: row;
+		align-items: flex-start;
+	}
+
+	article.wide > :global(img) {
+		flex: 1 1 55%;
+		min-width: 0;
+	}
+
+	article.wide .text {
+		flex: 1 1 45%;
+	}
+
+	.text :global(h3) {
+		margin: var(--space-1) 0 var(--space-2);
+	}
+
+	p {
+		margin: 0 0 var(--space-2);
+		color: var(--color-ink-secondary);
+	}
+
+	.text :global(a.more) {
+		font-weight: 600;
+		color: var(--color-brand);
+	}
+
+	@media (max-width: 720px) {
+		article.wide {
+			flex-direction: column;
+		}
+	}
+</style>

package/dist/components/projects/ProjectCard.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { EditDescriptor } from '../../edit/types.js';
+/** Which of the card's localized fields are editable at this render site. */
+export interface ProjectEditMap {
+    title?: EditDescriptor;
+    excerpt?: EditDescriptor;
+}
+import type { ProjectCardData } from '../../content/types.js';
+interface Props {
+    project: ProjectCardData;
+    /** 'wide' for collaboration rows, 'grid' for passion-project tiles. */
+    variant?: 'wide' | 'grid';
+    /** Marks fields editable where an edit adapter is active. */
+    edit?: ProjectEditMap;
+}
+declare const ProjectCard: import("svelte").Component<Props, {}, "">;
+type ProjectCard = ReturnType<typeof ProjectCard>;
+export default ProjectCard;

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

@@ -0,0 +1,2 @@
+export { default as ProjectCard } from './ProjectCard.svelte';
+export type { ProjectEditMap } from './ProjectCard.svelte';

package/dist/components/projects/index.js

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

package/dist/components/team/CollaboratorList.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { CollaboratorData } from '../../content/types.js';
+
+	interface Props {
+		collaborators: CollaboratorData[];
+	}
+
+	let { collaborators }: Props = $props();
+</script>
+
+<ul>
+	{#each collaborators as collaborator (collaborator.personName + collaborator.affiliation)}
+		<li>
+			<strong>{collaborator.personName}</strong>
+			·
+			{#if collaborator.url}
+				<a href={collaborator.url} rel="external noopener">{collaborator.affiliation}</a>
+			{:else}
+				{collaborator.affiliation}
+			{/if}
+		</li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		margin: 0;
+		padding-left: var(--space-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	a {
+		color: var(--color-brand);
+	}
+</style>

package/dist/components/team/CollaboratorList.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CollaboratorData } from '../../content/types.js';
+interface Props {
+    collaborators: CollaboratorData[];
+}
+declare const CollaboratorList: import("svelte").Component<Props, {}, "">;
+type CollaboratorList = ReturnType<typeof CollaboratorList>;
+export default CollaboratorList;

package/dist/components/team/TeamMemberCard.svelte

@@ -0,0 +1,78 @@
+<script module lang="ts">
+	import type { EditDescriptor } from '../../edit/types.js';
+
+	/**
+	 * Which of the card's localized fields are editable at this render site.
+	 * `name` is deliberately absent: it is a plain-text column, not a
+	 * localized one, so the per-locale save contract does not apply to it.
+	 */
+	export interface TeamMemberEditMap {
+		role?: EditDescriptor;
+		bio?: EditDescriptor;
+	}
+</script>
+
+<script lang="ts">
+	import type { TeamMemberData } from '../../content/types.js';
+	import Editable from '../../edit/Editable.svelte';
+	import CardMedia from '../ui/CardMedia.svelte';
+
+	interface Props {
+		member: TeamMemberData;
+		/** 'featured' = big cut-out figures; 'board' = compact grid cell. */
+		variant?: 'featured' | 'board';
+		/** Marks fields editable where an edit adapter is active. */
+		edit?: TeamMemberEditMap;
+	}
+
+	let { member, variant = 'board', edit }: Props = $props();
+</script>
+
+<article class={variant}>
+	<CardMedia
+		src={member.photoUrl}
+		alt={member.name}
+		ratio={variant === 'featured' ? '4 / 5' : '1 / 1'}
+		width="400"
+		height="500"
+	/>
+	<h3>{member.name}</h3>
+	<Editable edit={edit?.role} value={member.role}>
+		{#snippet children(text, attrs)}<p class="role" {...attrs}>{text}</p>{/snippet}
+	</Editable>
+	{#if member.bio}
+		<Editable edit={edit?.bio} value={member.bio}>
+			{#snippet children(text, attrs)}<p class="bio" {...attrs}>{text}</p>{/snippet}
+		</Editable>
+	{/if}
+</article>
+
+<style>
+	article {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	h3 {
+		margin: var(--space-2) 0 0;
+		font-size: var(--text-base);
+	}
+
+	.featured h3 {
+		font-size: var(--text-lg);
+	}
+
+	.role {
+		margin: 0;
+		font-weight: 600;
+		color: var(--color-brand);
+		font-size: var(--text-sm);
+	}
+
+	.bio {
+		margin: 0;
+		color: var(--color-ink-secondary);
+		font-size: var(--text-sm);
+	}
+</style>

package/dist/components/team/TeamMemberCard.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { EditDescriptor } from '../../edit/types.js';
+/**
+ * Which of the card's localized fields are editable at this render site.
+ * `name` is deliberately absent: it is a plain-text column, not a
+ * localized one, so the per-locale save contract does not apply to it.
+ */
+export interface TeamMemberEditMap {
+    role?: EditDescriptor;
+    bio?: EditDescriptor;
+}
+import type { TeamMemberData } from '../../content/types.js';
+interface Props {
+    member: TeamMemberData;
+    /** 'featured' = big cut-out figures; 'board' = compact grid cell. */
+    variant?: 'featured' | 'board';
+    /** Marks fields editable where an edit adapter is active. */
+    edit?: TeamMemberEditMap;
+}
+declare const TeamMemberCard: import("svelte").Component<Props, {}, "">;
+type TeamMemberCard = ReturnType<typeof TeamMemberCard>;
+export default TeamMemberCard;

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

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