@vit-foundation/ui 0.7.0 → 0.10.0

package/dist/admin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shell-level composition for the foundation's ADMIN apps (Brain and any
+ * future internal tool). Primitives stay in /primitives; only what shapes an
+ * admin page lives here. The host owns routes, permissions, and auth — these
+ * components receive already-filtered data through props, the Nav/Footer
+ * genericization pattern.
+ */
+export { default as AdminShell } from './components/admin/AdminShell.svelte';
+export { default as DecorMosaic } from './components/admin/DecorMosaic.svelte';
+export { default as PageHeading } from './components/admin/PageHeading.svelte';
+export { default as Sidebar, type SidebarItem } from './components/admin/Sidebar.svelte';

package/dist/admin.js

@@ -0,0 +1,11 @@
+/**
+ * Shell-level composition for the foundation's ADMIN apps (Brain and any
+ * future internal tool). Primitives stay in /primitives; only what shapes an
+ * admin page lives here. The host owns routes, permissions, and auth — these
+ * components receive already-filtered data through props, the Nav/Footer
+ * genericization pattern.
+ */
+export { default as AdminShell } from './components/admin/AdminShell.svelte';
+export { default as DecorMosaic } from './components/admin/DecorMosaic.svelte';
+export { default as PageHeading } from './components/admin/PageHeading.svelte';
+export { default as Sidebar } from './components/admin/Sidebar.svelte';

package/dist/components/admin/AdminShell.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Sidebar, { type SidebarItem } from './Sidebar.svelte';
+
+	interface Props {
+		/** Rail entries, already permission-filtered by the host. */
+		items: SidebarItem[];
+		/** Accessible name of the sidebar nav landmark. */
+		navLabel?: string;
+		logo?: Snippet;
+		/** Bottom of the rail — the host's logout form. */
+		footer?: Snippet;
+		/** The page content. */
+		children: Snippet;
+		/** Highlighting override for tests and stories. */
+		url?: URL;
+	}
+
+	let { items, navLabel = 'Principal', logo, footer, children, url = undefined }: Props = $props();
+</script>
+
+<div class="shell">
+	<Sidebar {items} label={navLabel} {logo} {footer} {url} />
+	<main class="content">
+		{@render children()}
+	</main>
+</div>
+
+<style>
+	/* The sidebar is fixed at 4.5rem; the content pays for it once, here,
+	   instead of every page knowing the rail's width. */
+	.content {
+		margin-left: 4.5rem;
+		min-height: 100vh;
+	}
+
+	@media print {
+		.content {
+			margin-left: 0;
+		}
+	}
+</style>

package/dist/components/admin/AdminShell.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import { type SidebarItem } from './Sidebar.svelte';
+interface Props {
+    /** Rail entries, already permission-filtered by the host. */
+    items: SidebarItem[];
+    /** Accessible name of the sidebar nav landmark. */
+    navLabel?: string;
+    logo?: Snippet;
+    /** Bottom of the rail — the host's logout form. */
+    footer?: Snippet;
+    /** The page content. */
+    children: Snippet;
+    /** Highlighting override for tests and stories. */
+    url?: URL;
+}
+declare const AdminShell: import("svelte").Component<Props, {}, "">;
+type AdminShell = ReturnType<typeof AdminShell>;
+export default AdminShell;

package/dist/components/admin/DecorMosaic.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * 'login' — full-page geometric mosaic behind an auth card;
+		 * 'app' — lighter scatter on app pages (top-right + bottom strip).
+		 */
+		variant?: 'login' | 'app';
+	}
+
+	let { variant = 'app' }: Props = $props();
+</script>
+
+<!-- Decorative geometric mosaic (brand shapes: squares, circles, quarter
+     circles, triangles). Purely visual; pointer events pass through. Named
+     apart from DecorShapes: that one is the website's corner composition,
+     this is the admin apps' full mosaic. -->
+<div class="decor" aria-hidden="true">
+	{#if variant === 'login'}
+		<svg class="cluster tl" viewBox="0 0 320 400" width="320" height="400">
+			<circle cx="120" cy="40" r="40" fill="var(--color-navy)" />
+			<rect x="240" y="0" width="80" height="80" fill="var(--color-navy)" />
+			<circle cx="40" cy="160" r="40" fill="var(--color-navy)" />
+			<path d="M80 120h80v80l-80-80z" fill="var(--color-ink)" />
+			<path d="M80 200 L160 120 L160 200 Z" fill="var(--color-navy)" />
+			<rect x="160" y="120" width="80" height="80" fill="var(--color-navy)" />
+			<rect x="0" y="80" width="60" height="60" fill="var(--color-cream)" />
+			<path d="M80 200 A80 80 0 0 1 160 280 L80 280 Z" fill="var(--color-navy)" />
+			<rect x="160" y="200" width="80" height="80" fill="var(--color-cream)" />
+			<path d="M160 200 L240 200 L160 280 Z" fill="var(--color-brand)" />
+			<path d="M0 280 L80 280 L80 360 Z" fill="var(--color-ink)" />
+			<path d="M0 280 L80 360 L0 360 Z" fill="var(--color-brand)" />
+			<rect x="80" y="280" width="80" height="80" fill="var(--color-navy)" />
+			<circle cx="120" cy="320" r="40" fill="var(--color-cream)" />
+		</svg>
+		<svg class="cluster tr" viewBox="0 0 280 280" width="280" height="280">
+			<path d="M0 0h80v80H0z" fill="var(--color-navy)" />
+			<path d="M0 0 L80 0 L0 80 Z" fill="var(--color-ink)" />
+			<rect x="80" y="0" width="80" height="80" fill="var(--color-brand)" />
+			<path d="M80 0 L160 0 L80 80 Z" fill="var(--color-ink)" />
+			<circle cx="220" cy="60" r="45" fill="var(--color-cream)" />
+			<path d="M0 80 L80 160 L0 160 Z" fill="var(--color-ink)" />
+			<path d="M0 80 L80 80 L80 160 Z" fill="var(--color-navy)" />
+			<path d="M80 160 L160 80 L160 160 Z" fill="var(--color-brand)" />
+		</svg>
+		<svg class="cluster br" viewBox="0 0 400 160" width="400" height="160">
+			<path
+				d="M0 0 A80 80 0 0 1 80 80 L0 80 Z"
+				fill="color-mix(in srgb, var(--color-brand) 70%, var(--color-ink))"
+			/>
+			<rect x="80" y="0" width="80" height="80" fill="var(--color-ink)" />
+			<path d="M80 0 L160 80 L80 80 Z" fill="var(--color-navy)" />
+			<circle cx="240" cy="60" r="42" fill="var(--color-brand)" />
+			<circle cx="330" cy="60" r="42" fill="var(--color-brand)" />
+			<rect x="180" y="100" width="60" height="60" fill="var(--color-navy)" opacity="0.15" />
+		</svg>
+		<svg class="cluster bl" viewBox="0 0 300 120" width="300" height="120">
+			<circle cx="60" cy="60" r="50" fill="var(--color-cream)" />
+			<rect x="150" y="10" width="90" height="90" fill="var(--color-brand)" />
+		</svg>
+	{:else}
+		<svg class="cluster tr" viewBox="0 0 560 180" width="560" height="180">
+			<rect x="0" y="0" width="90" height="90" fill="var(--color-navy)" />
+			<path d="M0 0 L90 0 L0 90 Z" fill="var(--color-ink)" />
+			<path d="M90 0 A90 90 0 0 1 180 90 L90 90 Z" fill="var(--color-cream)" />
+			<circle cx="300" cy="45" r="55" fill="var(--color-brand)" />
+			<circle cx="420" cy="45" r="55" fill="var(--color-brand)" />
+			<circle cx="120" cy="160" r="60" fill="var(--color-brand)" />
+			<rect x="470" y="120" width="90" height="90" fill="var(--color-navy)" />
+		</svg>
+		<svg class="cluster bottom" viewBox="0 0 900 120" width="900" height="120">
+			<circle cx="80" cy="90" r="70" fill="var(--color-cream)" />
+			<rect x="380" y="30" width="110" height="110" fill="var(--color-brand)" />
+			<circle cx="800" cy="100" r="70" fill="var(--color-navy)" />
+		</svg>
+	{/if}
+</div>
+
+<style>
+	.decor {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.cluster {
+		position: absolute;
+	}
+
+	.tl {
+		top: 4%;
+		left: 3%;
+	}
+
+	.tr {
+		top: 0;
+		right: 0;
+	}
+
+	.br {
+		bottom: 10%;
+		right: 0;
+	}
+
+	.bl {
+		bottom: -2%;
+		left: 12%;
+	}
+
+	.bottom {
+		bottom: -3rem;
+		left: 8%;
+	}
+
+	@media (max-width: 900px) {
+		.tl,
+		.bl,
+		.br {
+			display: none;
+		}
+	}
+
+	@media print {
+		.decor {
+			display: none;
+		}
+	}
+</style>

package/dist/components/admin/DecorMosaic.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /**
+     * 'login' — full-page geometric mosaic behind an auth card;
+     * 'app' — lighter scatter on app pages (top-right + bottom strip).
+     */
+    variant?: 'login' | 'app';
+}
+declare const DecorMosaic: import("svelte").Component<Props, {}, "">;
+type DecorMosaic = ReturnType<typeof DecorMosaic>;
+export default DecorMosaic;

package/dist/components/admin/PageHeading.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Italic brand-colored word ("My", "Hi", "Workers"). Optional: a plain
+		 * title is a heading too, and forcing an accent made call sites
+		 * hand-roll their own h1.
+		 */
+		accent?: string;
+		/** The serif rest of the heading ("Time Control", "Users"). */
+		rest: string;
+		level?: 1 | 2;
+	}
+
+	let { accent, rest, level = 1 }: Props = $props();
+</script>
+
+<svelte:element this={`h${level}`} class="heading">
+	{#if accent}<em>{accent}</em>{/if}
+	{rest}
+</svelte:element>
+
+<style>
+	.heading {
+		font-family: var(--font-serif);
+		font-weight: 600;
+		font-size: 3rem;
+		line-height: var(--leading-tight);
+		margin: 0;
+		color: var(--color-ink);
+	}
+
+	h2.heading {
+		font-size: 2.1rem;
+	}
+
+	em {
+		color: var(--color-brand);
+		font-style: italic;
+		font-weight: 600;
+	}
+</style>

package/dist/components/admin/PageHeading.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /**
+     * Italic brand-colored word ("My", "Hi", "Workers"). Optional: a plain
+     * title is a heading too, and forcing an accent made call sites
+     * hand-roll their own h1.
+     */
+    accent?: string;
+    /** The serif rest of the heading ("Time Control", "Users"). */
+    rest: string;
+    level?: 1 | 2;
+}
+declare const PageHeading: import("svelte").Component<Props, {}, "">;
+type PageHeading = ReturnType<typeof PageHeading>;
+export default PageHeading;

package/dist/components/admin/Sidebar.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+	import type { IconName } from '../ui/Icon.svelte';
+
+	/** One rail entry. The host owns routes, labels, and who sees what — a
+	 * permission-filtered list arrives here already filtered. */
+	export interface SidebarItem {
+		href: string;
+		icon: IconName;
+		label: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getUiConfig } from '../../config/context.js';
+	import { isPathUnder } from '../../utils/paths.js';
+	import Icon from '../ui/Icon.svelte';
+
+	interface Props {
+		items: SidebarItem[];
+		/** Accessible name of the nav landmark. */
+		label?: string;
+		/** Brand mark above the rail; the host owns its logo and home link. */
+		logo?: Snippet;
+		/** Bottom slot — the host's logout form lives here, never in the package. */
+		footer?: Snippet;
+		/** The URL highlighting reads from. Only tests and stories pass one. */
+		url?: URL;
+	}
+
+	let { items, label = 'Principal', logo, footer, url = undefined }: Props = $props();
+
+	const config = getUiConfig();
+
+	// The localhost fallback keeps a provider-less render (a story, a bare
+	// test) standing: nothing highlights, nothing crashes — the Nav pattern.
+	const currentUrl = $derived(url ?? config.url() ?? new URL('http://localhost/'));
+	const currentPath = $derived(config.canonicalPathname(currentUrl));
+
+	// '/' matches only itself; a section stays current on its subpages.
+	const isCurrent = (href: string): boolean =>
+		href === '/' ? currentPath === '/' : isPathUnder(currentPath, href);
+</script>
+
+<nav class="sidebar" aria-label={label}>
+	{#if logo}
+		{@render logo()}
+	{/if}
+
+	<div class="rail">
+		{#each items as item (item.href)}
+			<a
+				href={item.href}
+				class="item"
+				class:active={isCurrent(item.href)}
+				aria-label={item.label}
+				aria-current={isCurrent(item.href) ? 'page' : undefined}
+				title={item.label}
+			>
+				<Icon name={item.icon} />
+			</a>
+		{/each}
+	</div>
+
+	{#if footer}
+		<div class="footer">
+			{@render footer()}
+		</div>
+	{/if}
+</nav>
+
+<style>
+	.sidebar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 4.5rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: var(--space-4) 0;
+		gap: var(--space-4);
+		z-index: var(--z-raised);
+	}
+
+	.rail {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-1);
+		background: var(--color-surface);
+		border-radius: 999px;
+		padding: var(--space-2);
+		box-shadow: var(--shadow-1);
+	}
+
+	.item {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.4rem;
+		height: 2.4rem;
+		border-radius: 999px;
+		color: var(--color-navy);
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: background var(--transition-fast);
+	}
+
+	.item:hover {
+		background: color-mix(in srgb, var(--color-navy) 10%, transparent);
+	}
+
+	.item.active {
+		background: var(--color-navy);
+		color: var(--color-surface);
+	}
+
+	.footer {
+		margin-top: auto;
+	}
+
+	/* The host's footer control (a logout submit) should sit like an item. */
+	.footer :global(button) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.4rem;
+		height: 2.4rem;
+		border-radius: 999px;
+		color: var(--color-navy);
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: background var(--transition-fast);
+	}
+
+	.footer :global(button:hover) {
+		background: color-mix(in srgb, var(--color-navy) 10%, transparent);
+	}
+
+	@media print {
+		.sidebar {
+			display: none;
+		}
+	}
+</style>

package/dist/components/admin/Sidebar.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { IconName } from '../ui/Icon.svelte';
+/** One rail entry. The host owns routes, labels, and who sees what — a
+ * permission-filtered list arrives here already filtered. */
+export interface SidebarItem {
+    href: string;
+    icon: IconName;
+    label: string;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    items: SidebarItem[];
+    /** Accessible name of the nav landmark. */
+    label?: string;
+    /** Brand mark above the rail; the host owns its logo and home link. */
+    logo?: Snippet;
+    /** Bottom slot — the host's logout form lives here, never in the package. */
+    footer?: Snippet;
+    /** The URL highlighting reads from. Only tests and stories pass one. */
+    url?: URL;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/contact/ContactForm.svelte

@@ -58,6 +58,7 @@
 		<Field
 			id="contact-category"
 			label={msg.contact_categoryLabel()}
+			labelEdit={config.messageEdit?.('contact_categoryLabel')}
 			field={f.fields.category}
 			constraint={null}
 		>
@@ -73,6 +74,7 @@
 		<Field
 			id="contact-name"
 			label={msg.contact_nameLabel()}
+			labelEdit={config.messageEdit?.('contact_nameLabel')}
 			field={f.fields.name}
 			constraint={CONTACT_NAME}
 		>
@@ -90,6 +92,7 @@
 		<Field
 			id="contact-email"
 			label={msg.contact_emailLabel()}
+			labelEdit={config.messageEdit?.('contact_emailLabel')}
 			field={f.fields.email}
 			constraint={EMAIL}
 		>
@@ -107,6 +110,7 @@
 		<Field
 			id="contact-message"
 			label={msg.contact_messageLabel()}
+			labelEdit={config.messageEdit?.('contact_messageLabel')}
 			field={f.fields.message}
 			constraint={CONTACT_MESSAGE}
 		>

package/dist/components/projects/ProjectCard.svelte

@@ -10,6 +10,7 @@
 
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
+	import ActionLabel from '../../edit/ActionLabel.svelte';
 	import type { ProjectCardData } from '../../content/types.js';
 	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
@@ -57,9 +58,16 @@
 			{#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>
+			<ActionLabel
+				edit={config.messageEdit?.('common_readMore')}
+				value={config.messages.common_readMore()}
+			>
+				{#snippet control()}
+					<Link href={`/what-we-do/${project.slug}`} class="more">
+						{config.messages.common_readMore()}
+					</Link>
+				{/snippet}
+			</ActionLabel>
 		{/if}
 	</div>
 </article>

package/dist/components/timeline/TimelineMilestone.svelte

@@ -10,6 +10,7 @@
 
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
+	import ActionLabel from '../../edit/ActionLabel.svelte';
 	import type { MilestoneData } from '../../content/types.js';
 	import Editable from '../../edit/Editable.svelte';
 	import { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from '../../utils/milestones.js';
@@ -47,7 +48,12 @@
 
 <article style={`--milestone-color: ${color}`}>
 	<span class="dot" aria-hidden="true"></span>
-	<p class="category">{milestoneCategoryLabel(milestone.category, config.messages)}</p>
+	<Editable
+		edit={config.messageEdit?.(`category_${milestone.category}`)}
+		value={milestoneCategoryLabel(milestone.category, config.messages)}
+	>
+		{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
+	</Editable>
 	<DateText value={milestone.occurredOn} />
 	<Editable edit={edit?.title} value={milestone.title}>
 		{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
@@ -62,11 +68,20 @@
 	{/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}
+			<ActionLabel
+				edit={config.messageEdit?.('common_readMore')}
+				value={config.messages.common_readMore()}
+			>
+				{#snippet control()}
+					{#if isExternal}
+						<a href={milestone.linkUrl} rel="external noopener"
+							>{config.messages.common_readMore()}</a
+						>
+					{:else if milestone.linkUrl}
+						<Link href={milestone.linkUrl}>{config.messages.common_readMore()}</Link>
+					{/if}
+				{/snippet}
+			</ActionLabel>
 		</p>
 	{/if}
 </article>