@vit-foundation/ui 0.9.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/ui/Button.svelte

@@ -1,52 +1,147 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLButtonAttributes {
+	interface CommonProps {
 		/**
-		 * 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.
+		 * A closed named set, not orthogonal booleans (the PageShell rationale).
+		 * `primary` is the brand fill and the default — the only look this
+		 * component had before variants existed, so old call sites render
+		 * byte-identically. `navy` and `ghost` come from the admin app.
 		 */
-		pending: number | null;
+		variant?: 'primary' | 'navy' | 'ghost';
+		size?: 'md' | 'sm';
 		children: Snippet;
 	}
 
-	let { pending, children, type = 'button', disabled = false, ...rest }: Props = $props();
+	type ButtonProps = CommonProps &
+		Omit<HTMLButtonAttributes, 'type'> & {
+			type?: 'button' | 'submit' | 'reset';
+			/**
+			 * 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;
+			href?: never;
+			download?: never;
+		};
+
+	type AnchorProps = CommonProps &
+		Omit<HTMLAnchorAttributes, 'download' | 'type'> & {
+			/**
+			 * Renders an anchor styled as a button (downloads, external tools).
+			 * An anchor has no form behind it, so the branch admits no `pending`
+			 * and no `disabled` — an unavailable action is a button's business.
+			 */
+			href: string;
+			download?: boolean;
+			pending?: never;
+			disabled?: never;
+			type?: never;
+		};
+
+	type Props = ButtonProps | AnchorProps;
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		pending = null,
+		href = undefined,
+		download = false,
+		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>
+{#if href !== undefined}
+	<a
+		class="button {variant} {size}"
+		{href}
+		download={download ? '' : undefined}
+		{...rest as HTMLAnchorAttributes}
+	>
+		{@render children()}
+	</a>
+{:else}
+	<button
+		class="button {variant} {size}"
+		{type}
+		{...rest as HTMLButtonAttributes}
+		disabled={disabled || isPending}
+		aria-busy={isPending || undefined}
+	>
+		{@render children()}
+	</button>
+{/if}
 
 <style>
-	button {
+	/* The `primary md` declarations reproduce the pre-variant component
+	   exactly — consumers of the old single look must not repaint. */
+	.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);
+		transition:
+			background var(--transition-fast),
+			filter var(--transition-fast);
+	}
+
+	a.button {
+		display: inline-block;
+		text-decoration: none;
+		text-align: center;
+	}
+
+	.sm {
+		padding: var(--space-1) var(--space-3);
+		font-size: var(--text-sm);
 	}
 
-	button:hover {
+	.primary {
+		background: var(--color-brand);
+		color: var(--color-surface);
+	}
+
+	.primary:hover:not(:disabled) {
+		background: var(--color-navy);
+	}
+
+	.navy {
 		background: var(--color-navy);
+		color: var(--color-surface);
+	}
+
+	.navy:hover:not(:disabled) {
+		filter: brightness(1.25);
+	}
+
+	.ghost {
+		background: transparent;
+		color: var(--color-ink);
+		border: 1px solid var(--color-ink);
+	}
+
+	.ghost:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-ink) 8%, transparent);
 	}
 
-	button:disabled {
+	.button:disabled {
 		opacity: 0.6;
 		cursor: default;
 	}

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

@@ -1,6 +1,18 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface CommonProps {
+    /**
+     * A closed named set, not orthogonal booleans (the PageShell rationale).
+     * `primary` is the brand fill and the default — the only look this
+     * component had before variants existed, so old call sites render
+     * byte-identically. `navy` and `ghost` come from the admin app.
+     */
+    variant?: 'primary' | 'navy' | 'ghost';
+    size?: 'md' | 'sm';
+    children: Snippet;
+}
+type ButtonProps = CommonProps & Omit<HTMLButtonAttributes, 'type'> & {
+    type?: 'button' | 'submit' | 'reset';
     /**
      * The submitting count of the remote form this button posts, or `null`
      * for a control that genuinely has no pending state — the classic
@@ -14,8 +26,22 @@ interface Props extends HTMLButtonAttributes {
      * twelve call sites re-derived. It belongs here, once.
      */
     pending: number | null;
-    children: Snippet;
-}
+    href?: never;
+    download?: never;
+};
+type AnchorProps = CommonProps & Omit<HTMLAnchorAttributes, 'download' | 'type'> & {
+    /**
+     * Renders an anchor styled as a button (downloads, external tools).
+     * An anchor has no form behind it, so the branch admits no `pending`
+     * and no `disabled` — an unavailable action is a button's business.
+     */
+    href: string;
+    download?: boolean;
+    pending?: never;
+    disabled?: never;
+    type?: never;
+};
+type Props = ButtonProps | AnchorProps;
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/ui/Icon.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	/** Stroke-based 24×24 icon paths. A closed set: extending it is a package
+	 * change, so every consumer's `IconName` stays honest. */
+	const PATHS = {
+		home: 'M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z',
+		clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4v5l3.5 2',
+		gear: 'M12 9.5A2.5 2.5 0 1 0 12 14.5 2.5 2.5 0 0 0 12 9.5zm8-.5-1.8-.5a6.6 6.6 0 0 0-.6-1.4l.9-1.6-1.9-1.9-1.6.9c-.5-.3-.9-.5-1.4-.6L13 2h-2l-.5 1.8c-.5.2-1 .4-1.4.6l-1.6-.9-1.9 1.9.9 1.6c-.3.5-.5.9-.6 1.4L4 9v2l1.8.5c.2.5.4 1 .6 1.4l-.9 1.6 1.9 1.9 1.6-.9c.5.3.9.5 1.4.6L11 22h2l.5-1.8c.5-.2 1-.4 1.4-.6l1.6.9 1.9-1.9-.9-1.6c.3-.5.5-.9.6-1.4L20 15z',
+		pencil: 'M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19zm10.5-13.5l3 3',
+		trash:
+			'M5 7h14M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2m3 0v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7m3 4v6m4-6v6',
+		duplicate: 'M9 9h10v12H9zM5 15V3h10',
+		plus: 'M12 5v14M5 12h14',
+		'chevron-right': 'M9 5l7 7-7 7',
+		'chevron-left': 'M15 5l-7 7 7 7',
+		close: 'M6 6l12 12M18 6L6 18',
+		globe:
+			'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c-2.5 2.4-3.8 5.5-3.8 9s1.3 6.6 3.8 9c2.5-2.4 3.8-5.5 3.8-9S14.5 5.4 12 3z',
+		logout: 'M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h10'
+	} as const;
+
+	export type IconName = keyof typeof PATHS;
+</script>
+
+<script lang="ts">
+	interface Props {
+		name: IconName;
+		size?: number;
+	}
+
+	let { name, size = 20 }: Props = $props();
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.8"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	aria-hidden="true"
+	focusable="false"
+>
+	<path d={PATHS[name]} />
+</svg>

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

@@ -0,0 +1,24 @@
+/** Stroke-based 24×24 icon paths. A closed set: extending it is a package
+ * change, so every consumer's `IconName` stays honest. */
+declare const PATHS: {
+    readonly home: "M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z";
+    readonly clock: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4v5l3.5 2";
+    readonly gear: "M12 9.5A2.5 2.5 0 1 0 12 14.5 2.5 2.5 0 0 0 12 9.5zm8-.5-1.8-.5a6.6 6.6 0 0 0-.6-1.4l.9-1.6-1.9-1.9-1.6.9c-.5-.3-.9-.5-1.4-.6L13 2h-2l-.5 1.8c-.5.2-1 .4-1.4.6l-1.6-.9-1.9 1.9.9 1.6c-.3.5-.5.9-.6 1.4L4 9v2l1.8.5c.2.5.4 1 .6 1.4l-.9 1.6 1.9 1.9 1.6-.9c.5.3.9.5 1.4.6L11 22h2l.5-1.8c.5-.2 1-.4 1.4-.6l1.6.9 1.9-1.9-.9-1.6c.3-.5.5-.9.6-1.4L20 15z";
+    readonly pencil: "M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19zm10.5-13.5l3 3";
+    readonly trash: "M5 7h14M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2m3 0v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7m3 4v6m4-6v6";
+    readonly duplicate: "M9 9h10v12H9zM5 15V3h10";
+    readonly plus: "M12 5v14M5 12h14";
+    readonly 'chevron-right': "M9 5l7 7-7 7";
+    readonly 'chevron-left': "M15 5l-7 7 7 7";
+    readonly close: "M6 6l12 12M18 6L6 18";
+    readonly globe: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c-2.5 2.4-3.8 5.5-3.8 9s1.3 6.6 3.8 9c2.5-2.4 3.8-5.5 3.8-9S14.5 5.4 12 3z";
+    readonly logout: "M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h10";
+};
+export type IconName = keyof typeof PATHS;
+interface Props {
+    name: IconName;
+    size?: number;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/ui/IconButton.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import Icon, { type IconName } from './Icon.svelte';
+
+	interface Props {
+		icon: IconName;
+		/** Accessible name — icon-only buttons must say what they do. */
+		label: string;
+		disabled?: boolean;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let { icon, label, disabled = false, onclick }: Props = $props();
+</script>
+
+<button type="button" aria-label={label} title={label} {disabled} {onclick}>
+	<Icon name={icon} size={18} />
+</button>
+
+<style>
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.35rem;
+		border: none;
+		border-radius: 6px;
+		background: transparent;
+		color: var(--color-ink);
+		cursor: pointer;
+		transition: background var(--transition-fast);
+	}
+
+	button:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-ink) 8%, transparent);
+	}
+
+	button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import { type IconName } from './Icon.svelte';
+interface Props {
+    icon: IconName;
+    /** Accessible name — icon-only buttons must say what they do. */
+    label: string;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/ui/Logo.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	interface Props {
+		/** Height of the head mark in px. */
+		size?: number;
+		/** Adds the "Brain VIT" wordmark under the mark. */
+		withWordmark?: boolean;
+	}
+
+	let { size = 32, withWordmark = false }: Props = $props();
+</script>
+
+<span class="logo">
+	<svg
+		viewBox="0 0 48 56"
+		width={size * (48 / 56)}
+		height={size}
+		aria-hidden={withWordmark ? undefined : true}
+		role={withWordmark ? 'img' : undefined}
+		focusable="false"
+	>
+		{#if withWordmark}<title>Brain VIT</title>{/if}
+		<path
+			d="M25 2c11.6 0 21 9.4 21 21 0 6.9-3.3 13-8.5 16.8V54H17v-9h-4.5A4.5 4.5 0 0 1 8 40.5V34H4.2c-1.7 0-2.7-1.9-1.7-3.3L8 22.4C9 11 16.2 2 25 2Z"
+			fill="currentColor"
+		/>
+		<g stroke="var(--color-surface)" stroke-width="3.2" stroke-linecap="round">
+			<line x1="26" y1="13" x2="26" y2="31" />
+			<line x1="18.2" y1="17.5" x2="33.8" y2="26.5" />
+			<line x1="18.2" y1="26.5" x2="33.8" y2="17.5" />
+		</g>
+	</svg>
+	{#if withWordmark}
+		<span class="wordmark"><em>Brain</em> <strong>VIT</strong></span>
+	{/if}
+</span>
+
+<style>
+	.logo {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-2);
+		color: var(--color-ink);
+	}
+
+	.wordmark {
+		font-family: var(--font-serif);
+		font-size: 2.5rem;
+		line-height: 1;
+		letter-spacing: 0.01em;
+		white-space: nowrap;
+	}
+
+	.wordmark em {
+		color: var(--color-brand);
+		font-style: italic;
+		font-weight: 600;
+	}
+
+	.wordmark strong {
+		font-weight: 600;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** Height of the head mark in px. */
+    size?: number;
+    /** Adds the "Brain VIT" wordmark under the mark. */
+    withWordmark?: boolean;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/components/ui/Modal.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconButton from './IconButton.svelte';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		onclose: () => void;
+		/** Accessible name of the close control. A prop, not a UiMessages key:
+		 * `messages` is replaced wholesale by hosts, and a new required key
+		 * would break every existing catalog. */
+		closeLabel?: string;
+		children: Snippet;
+	}
+
+	let { open, title, onclose, closeLabel = 'Tanca', children }: Props = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	// Native <dialog>: showModal() traps focus and layers the backdrop; the
+	// cancel event covers Escape.
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		if (!open && dialog.open) dialog.close();
+	});
+
+	function onclick(event: MouseEvent) {
+		// Backdrop click: the dialog element itself is the target only outside
+		// the panel content.
+		if (event.target === dialog) onclose();
+	}
+</script>
+
+<dialog bind:this={dialog} oncancel={onclose} {onclick}>
+	<div class="panel">
+		<div class="top">
+			<h2>{title}</h2>
+			<IconButton icon="close" label={closeLabel} onclick={onclose} />
+		</div>
+		{@render children()}
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		margin: auto;
+		border: none;
+		border-radius: var(--radius);
+		padding: 0;
+		background: var(--color-surface);
+		box-shadow: var(--shadow-2);
+		min-width: min(34rem, 90vw);
+	}
+
+	dialog::backdrop {
+		background: color-mix(in srgb, var(--color-ink) 45%, transparent);
+	}
+
+	.panel {
+		padding: var(--space-4) var(--space-5) var(--space-5);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+	}
+
+	.top {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--space-3);
+	}
+
+	h2 {
+		font-weight: 600;
+		font-size: var(--text-lg);
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    title: string;
+    onclose: () => void;
+    /** Accessible name of the close control. A prop, not a UiMessages key:
+     * `messages` is replaced wholesale by hosts, and a new required key
+     * would break every existing catalog. */
+    closeLabel?: string;
+    children: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/ui/TextField.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props {
+		label: string;
+		type?: 'text' | 'email' | 'password' | 'time' | 'date';
+		id: string;
+		value?: string;
+		required?: boolean;
+		autocomplete?: FullAutoFill;
+		/**
+		 * How the field presents itself. Three, which is what the call sites
+		 * always were:
+		 *
+		 * - `field` — the labelled form field, the default.
+		 * - `cell` — a table or modal cell. Smaller, and the label goes to the
+		 *   screen reader only.
+		 * - `bare` — full size, label for the screen reader only, wording
+		 *   carried by the placeholder.
+		 *
+		 * It replaces two booleans that encoded three variants between them: no
+		 * call site ever passed both, one of the four combinations meant
+		 * nothing, and the compact one quietly did THREE things.
+		 */
+		variant?: 'field' | 'cell' | 'bare';
+		/** Overrides the label-derived default ('user' rather than 'email'). */
+		placeholder?: string;
+		error?: string | null;
+		/**
+		 * A remote form field's attachment (`login.fields.email.as('email')`),
+		 * spread onto the input instead of binding — without it every remote
+		 * form routes around this module and re-declares the underline styling.
+		 */
+		attributes?: HTMLInputAttributes;
+	}
+
+	let {
+		label,
+		type = 'text',
+		id,
+		value = $bindable(''),
+		required = false,
+		autocomplete,
+		variant = 'field',
+		placeholder,
+		error = null,
+		attributes
+	}: Props = $props();
+
+	const shared = $derived({
+		id,
+		type,
+		required,
+		autocomplete,
+		placeholder: placeholder ?? (variant === 'field' ? label.toLowerCase() : undefined),
+		'aria-invalid': error ? true : undefined,
+		'aria-describedby': error ? `${id}-error` : undefined
+	});
+</script>
+
+<div class="field" class:cell={variant === 'cell'}>
+	<label for={id} class:visually-hidden={variant !== 'field'}>{label}</label>
+	{#if attributes}
+		<!-- The form owns the value and its name; `type` comes from `as(...)`. -->
+		<input {...shared} {...attributes} />
+	{:else}
+		<input {...shared} bind:value />
+	{/if}
+	{#if error}
+		<p class="error" id="{id}-error">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	label {
+		font-size: var(--text-sm);
+		font-weight: 500;
+	}
+
+	input {
+		border: none;
+		border-bottom: 1.5px solid var(--color-brand);
+		background: transparent;
+		padding: 0.4rem 0.1rem;
+		font-family: var(--font-sans);
+		font-size: var(--text-base);
+		color: var(--color-ink);
+	}
+
+	input::placeholder {
+		font-style: italic;
+		color: var(--color-ink-muted);
+	}
+
+	input:focus-visible {
+		outline: none;
+		border-bottom-color: var(--color-navy);
+	}
+
+	.cell input {
+		font-size: 0.9rem;
+		padding: 0.2rem 0.1rem;
+	}
+
+	.error {
+		color: var(--series-8);
+		font-size: 0.8rem;
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    label: string;
+    type?: 'text' | 'email' | 'password' | 'time' | 'date';
+    id: string;
+    value?: string;
+    required?: boolean;
+    autocomplete?: FullAutoFill;
+    /**
+     * How the field presents itself. Three, which is what the call sites
+     * always were:
+     *
+     * - `field` — the labelled form field, the default.
+     * - `cell` — a table or modal cell. Smaller, and the label goes to the
+     *   screen reader only.
+     * - `bare` — full size, label for the screen reader only, wording
+     *   carried by the placeholder.
+     *
+     * It replaces two booleans that encoded three variants between them: no
+     * call site ever passed both, one of the four combinations meant
+     * nothing, and the compact one quietly did THREE things.
+     */
+    variant?: 'field' | 'cell' | 'bare';
+    /** Overrides the label-derived default ('user' rather than 'email'). */
+    placeholder?: string;
+    error?: string | null;
+    /**
+     * A remote form field's attachment (`login.fields.email.as('email')`),
+     * spread onto the input instead of binding — without it every remote
+     * form routes around this module and re-declares the underline styling.
+     */
+    attributes?: HTMLInputAttributes;
+}
+declare const TextField: import("svelte").Component<Props, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/forms/index.d.ts

@@ -5,6 +5,7 @@ export { default as FormResultSlot } from '../components/ui/FormResultSlot.svelt
 export { default as Honeypot } from '../components/ui/Honeypot.svelte';
 export { default as LocaleField } from '../components/ui/LocaleField.svelte';
 export { default as NewsletterIntentField } from '../components/ui/NewsletterIntentField.svelte';
+export { default as TextField } from '../components/ui/TextField.svelte';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './constraints.js';
 export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './transport.js';
 export type { FormFail, FormFieldIssue, FormResultLike, FormResultOf, KeyedRemoteForms, RemoteField, RemoteFormAttributes, RemoteFormInstance } from './types.js';

package/dist/forms/index.js

@@ -5,5 +5,6 @@ export { default as FormResultSlot } from '../components/ui/FormResultSlot.svelt
 export { default as Honeypot } from '../components/ui/Honeypot.svelte';
 export { default as LocaleField } from '../components/ui/LocaleField.svelte';
 export { default as NewsletterIntentField } from '../components/ui/NewsletterIntentField.svelte';
+export { default as TextField } from '../components/ui/TextField.svelte';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './constraints.js';
 export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './transport.js';

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './primitives.js';
 export * from './chrome.js';
 export * from './content-components.js';
 export * from './community.js';
+export * from './admin.js';
 export * from './forms/index.js';
 export * from './config/index.js';
 export * from './edit/index.js';

package/dist/index.js

@@ -1,10 +1,11 @@
 // The whole surface, flat — importable piecemeal through the semantic
 // subpaths: ./primitives, ./forms, ./chrome, ./content, ./community,
-// ./edit, ./config, ./testing.
+// ./edit, ./config, ./admin, ./testing.
 export * from './primitives.js';
 export * from './chrome.js';
 export * from './content-components.js';
 export * from './community.js';
+export * from './admin.js';
 // The form seam: form components, structural remote-form types, transport
 // constants, field bounds.
 export * from './forms/index.js';

package/dist/primitives.d.ts

@@ -10,7 +10,11 @@ export { default as DateText } from './components/ui/DateText.svelte';
 export { default as DecorShapes } from './components/ui/DecorShapes.svelte';
 export { default as FilterChips } from './components/ui/FilterChips.svelte';
 export { default as GhostButton } from './components/ui/GhostButton.svelte';
+export { default as Icon, type IconName } from './components/ui/Icon.svelte';
+export { default as IconButton } from './components/ui/IconButton.svelte';
 export { default as Link } from './components/ui/Link.svelte';
+export { default as Logo } from './components/ui/Logo.svelte';
+export { default as Modal } from './components/ui/Modal.svelte';
 export { default as Pagination } from './components/ui/Pagination.svelte';
 export { default as RichText } from './components/ui/RichText.svelte';
 export { default as SearchInput } from './components/ui/SearchInput.svelte';

package/dist/primitives.js

@@ -10,7 +10,11 @@ export { default as DateText } from './components/ui/DateText.svelte';
 export { default as DecorShapes } from './components/ui/DecorShapes.svelte';
 export { default as FilterChips } from './components/ui/FilterChips.svelte';
 export { default as GhostButton } from './components/ui/GhostButton.svelte';
+export { default as Icon } from './components/ui/Icon.svelte';
+export { default as IconButton } from './components/ui/IconButton.svelte';
 export { default as Link } from './components/ui/Link.svelte';
+export { default as Logo } from './components/ui/Logo.svelte';
+export { default as Modal } from './components/ui/Modal.svelte';
 export { default as Pagination } from './components/ui/Pagination.svelte';
 export { default as RichText } from './components/ui/RichText.svelte';
 export { default as SearchInput } from './components/ui/SearchInput.svelte';

package/dist/styles/tokens.css

@@ -30,6 +30,7 @@
 
 	/* Typography */
 	--font-sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+	--font-serif: Georgia, 'Times New Roman', serif;
 	--text-sm: 0.875rem;
 	--text-base: 1rem;
 	--text-lg: 1.25rem;
@@ -52,6 +53,12 @@
 	--radius-lg: 16px;
 	--content-max: 1200px;
 
+	/* Elevation & layering */
+	--shadow-1: 0 2px 10px rgb(16 20 24 / 10%);
+	--shadow-2: 0 12px 40px rgb(16 20 24 / 20%);
+	--z-raised: 10;
+	--z-overlay: 100;
+
 	/* Motion */
 	--transition-fast: 150ms ease;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -72,6 +72,11 @@
 			"svelte": "./dist/config/index.js",
 			"default": "./dist/config/index.js"
 		},
+		"./admin": {
+			"types": "./dist/admin.d.ts",
+			"svelte": "./dist/admin.js",
+			"default": "./dist/admin.js"
+		},
 		"./testing": {
 			"types": "./dist/testing/remote-form.d.ts",
 			"svelte": "./dist/testing/remote-form.js",